Compact cluster signal strip

Author: rootsec1

src/components/workspace.tsx

@@ -101,24 +101,26 @@ export function Toolbar({ count, data, scope }: { count: number; data: KiteData;
 
 export function SummaryStrip({ counts, warningCount }: { counts: Map<string, number>; warningCount: number }) {
   return (
-    <section className="summary-strip" aria-label="Cluster summary">
-      {overviewCards.map((card, index) => {
-        const Icon = card.icon;
-        return (
-          <article className="summary-card" key={card.kind} style={{ "--delay": `${index * 65}ms` } as CSSProperties}>
-            <Icon size={20} />
-            <span>{card.label}</span>
-            <strong>{counts.get(card.kind) ?? 0}</strong>
-            <small>live</small>
-          </article>
-        );
-      })}
-      <article className="summary-card risk" style={{ "--delay": "260ms" } as CSSProperties}>
-        <Gauge size={20} />
-        <span>Warnings</span>
-        <strong>{warningCount}</strong>
-        <small>needs review</small>
-      </article>
+    <section className="summary-strip" aria-label="Cluster signals">
+      <span className="summary-strip-label">Cluster</span>
+      <div className="summary-metrics">
+        {overviewCards.map((card, index) => {
+          const Icon = card.icon;
+          return (
+            <article className="summary-metric" key={card.kind} style={{ "--delay": `${index * 45}ms` } as CSSProperties}>
+              <Icon size={20} />
+              <span>{card.label}</span>
+              <strong>{counts.get(card.kind) ?? 0}</strong>
+            </article>
+          );
+        })}
+        <article className="summary-metric risk" style={{ "--delay": "180ms" } as CSSProperties}>
+          <Gauge size={20} />
+          <span>Warnings</span>
+          <strong>{warningCount}</strong>
+        </article>
+      </div>
+      <small className={warningCount ? "summary-state warning" : "summary-state"}>{warningCount ? "review" : "clear"}</small>
     </section>
   );
 }

src/styles/base.css

@@ -125,8 +125,9 @@ summary:focus-visible {
 .inspector header span,
 .detail-row span,
 .scope-readout,
-.summary-card span,
-.summary-card small {
+.summary-strip-label,
+.summary-metric span,
+.summary-state {
   color: var(--text-soft);
   font-family: var(--font-mono);
   font-size: 11px;
@@ -416,38 +417,76 @@ summary:focus-visible {
 }
 
 .summary-strip {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(120px, 1fr));
-  gap: 1px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-block-size: 54px;
   margin-block-end: 14px;
+  padding-inline: 14px;
   border: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.summary-strip-label {
+  flex: 0 0 auto;
+  text-transform: uppercase;
+}
+
+.summary-metrics {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(96px, 1fr));
+  gap: 1px;
+  flex: 1 1 auto;
+  min-inline-size: 0;
   background: var(--line);
 }
 
-.summary-card {
+.summary-metric {
   display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 8px 12px;
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+  gap: 8px;
   align-items: center;
-  min-block-size: 100px;
-  padding: 16px 18px;
-  background: var(--surface);
+  min-block-size: 34px;
+  min-inline-size: 0;
+  padding-inline: 10px;
+  background: var(--surface-soft);
 }
 
-.summary-card svg {
-  grid-row: span 3;
+.summary-metric svg {
   color: var(--green-deep);
 }
 
-.summary-card strong {
-  font-size: 34px;
+.summary-metric span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.summary-metric strong {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 16px;
   line-height: 1;
 }
 
-.summary-card.risk svg {
+.summary-metric.risk {
+  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--orange) 72%, transparent);
+}
+
+.summary-metric.risk svg,
+.summary-state.warning {
   color: var(--orange);
 }
 
+.summary-state {
+  flex: 0 0 auto;
+  padding: 4px 7px;
+  border: 1px solid var(--line);
+  text-transform: uppercase;
+  background: var(--surface-soft);
+}
+
 .scope-tabs {
   display: flex;
   gap: 0;
@@ -3211,7 +3250,11 @@ summary:focus-visible {
   }
 
   .summary-strip {
-    grid-template-columns: repeat(5, minmax(120px, 1fr));
+    gap: 10px;
+  }
+
+  .summary-metrics {
+    grid-template-columns: repeat(5, minmax(96px, 1fr));
   }
 
   .pod-triage-rail {

src/styles/motion.css

@@ -6,15 +6,11 @@
     animation: surface-enter 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
   }
 
-  .summary-card {
+  .summary-metric {
     animation: surface-enter 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
     animation-delay: var(--delay);
   }
 
-  .summary-card::after {
-    animation: metric-line 760ms ease both;
-  }
-
   .runtime-tile,
   .container-card,
   .pod-issue-strip button {
@@ -125,26 +121,6 @@
   }
 }
 
-.summary-card {
-  position: relative;
-  overflow: hidden;
-}
-
-.summary-card::after {
-  position: absolute;
-  inset-inline: 0;
-  inset-block-end: 0;
-  block-size: 2px;
-  content: "";
-  background: var(--green);
-  transform: scaleX(0);
-  transform-origin: left;
-}
-
-.summary-card.risk::after {
-  background: var(--orange);
-}
-
 @keyframes surface-enter {
   from {
     opacity: 0;
@@ -156,12 +132,6 @@
   }
 }
 
-@keyframes metric-line {
-  to {
-    transform: scaleX(1);
-  }
-}
-
 @keyframes row-enter {
   from {
     opacity: 0;