Merge pull request 'feat(ui): sharpen dashboard console visual system' (#31)

feat(ui): sharpen dashboard console visual system

src/App.test.tsx

@@ -35,8 +35,8 @@ describe("React app dashboard state view", () => {
 
     expect(html).toContain('data-ui-theme-toggle="true"');
     expect(html).toContain('data-ui-theme-current="dark"');
-    expect(html).toContain('aria-label="Switch to light theme"');
+    expect(html).toContain('aria-label="Light theme"');
-    expect(html).not.toContain("aria-pressed");
+    expect(html).toContain('aria-pressed="false"');
     expect(html).toContain("Theme");
     expect(html).toContain("Dark");
     expect(html).toContain("Light");

src/app.css

@@ -67,8 +67,8 @@
     --accent: var(--ui-color-accent);
     --accent-foreground: var(--ui-color-canvas);
     --destructive: var(--ui-color-danger);
-    --border: rgba(244, 244, 244, 0.16);
+    --border: var(--ui-color-border);
-    --input: rgba(244, 244, 244, 0.18);
+    --input: var(--ui-color-border-strong);
     --ring: var(--ui-color-accent);
     --chart-1: var(--ui-color-accent);
     --chart-2: var(--ui-color-ok);
@@ -107,10 +107,11 @@ body {
   min-height: 100vh;
   margin: 0;
   background:
+    radial-gradient(circle at 50% 12%, transparent 0 42%, var(--ui-color-backdrop-vignette) 100%),
     linear-gradient(var(--ui-color-grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--ui-color-grid-line) 1px, transparent 1px),
     var(--ui-color-canvas);
-  background-size: 48px 48px, 48px 48px, auto;
+  background-size: auto, 40px 40px, 40px 40px, auto;
   color: var(--ui-color-text);
   font-family: var(--ui-font-mono);
   text-rendering: geometricPrecision;

src/lib/ui/components/DashboardFrame.tsx

@@ -22,7 +22,7 @@ export function DashboardFrame({
 
   return (
     <main className="dashboard-frame" aria-labelledby={resolvedTitleId}>
-      <header className="dashboard-frame__header">
+      <header className="dashboard-frame__header console-header">
         <div className="dashboard-frame__title">
           <div className="dashboard-frame__title-copy">
             {dashboard.eyebrow ? <p>{dashboard.eyebrow}</p> : null}

src/lib/ui/components/ServiceRow.tsx

@@ -11,6 +11,7 @@ export function ServiceRow({ service }: ServiceRowProps) {
   const rel = service.link?.external ? "noreferrer" : undefined;
   const content = (
     <>
+      <span className="service-row__status" aria-hidden="true" />
       <IconGlyph name={service.icon} />
       <div className="service-row__main">
         <h3>{service.label}</h3>
@@ -19,6 +20,11 @@ export function ServiceRow({ service }: ServiceRowProps) {
       {service.detail ? (
         <StatusBadge label={service.detail} severity={service.severity} />
       ) : null}
+      {service.link ? (
+        <span className="service-row__launch" aria-hidden="true">
+          <IconGlyph name="mdi:open-in-new" size="sm" />
+        </span>
+      ) : null}
     </>
   );
 

src/lib/ui/components/StatusStrip.tsx

@@ -9,7 +9,12 @@ export interface StatusStripProps {
 
 export function StatusStrip({ id, items, compact = false }: StatusStripProps) {
   return (
-    <section className="status-strip" data-compact={compact} data-model-id={id}>
+    <section
+      className="status-strip"
+      data-compact={compact}
+      data-model-id={id}
+      data-variant={compact ? "cluster" : "system-bus"}
+    >
       {items.map((item) => (
         <FooterCell key={item.id} item={item} />
       ))}

src/lib/ui/components/TelemetryCard.tsx

@@ -6,21 +6,29 @@ import { LineChart } from "./LineChart";
 
 export interface TelemetryCardProps {
   card: UiTelemetryCard;
+  index?: number;
 }
 
-export function TelemetryCard({ card }: TelemetryCardProps) {
+export function TelemetryCard({ card, index }: TelemetryCardProps) {
   const progress = resolveProgress(card);
   const value = formatMetricValue(card.value);
+  const metricIndex = index ? String(index).padStart(2, "0") : undefined;
 
   return (
     <article
       className="telemetry-card"
       data-severity={card.severity}
       data-model-id={card.id}
+      data-metric-index={metricIndex}
     >
       <header>
+        <div>
+          {metricIndex ? (
+            <span className="telemetry-card__index">{metricIndex}</span>
+          ) : null}
+          <h3>{card.label}</h3>
+        </div>
         {card.icon ? <IconGlyph name={card.icon} size="sm" /> : null}
-        <h3>{card.label}</h3>
       </header>
       <strong>{value}</strong>
       {progress !== null ? (
@@ -36,7 +44,7 @@ export function TelemetryCard({ card }: TelemetryCardProps) {
         />
       ) : null}
       {card.detail || card.description ? (
-        <p>{card.detail || card.description}</p>
+        <p className="telemetry-card__source">{card.detail || card.description}</p>
       ) : null}
     </article>
   );

src/lib/ui/components/TelemetryGrid.tsx

@@ -1,3 +1,4 @@
+import { useId } from "react";
 import type { UiTelemetryCard } from "../types";
 import { TelemetryCard } from "./TelemetryCard";
 
@@ -6,11 +7,23 @@ export interface TelemetryGridProps {
 }
 
 export function TelemetryGrid({ cards }: TelemetryGridProps) {
+  const headingId = useId();
+  const metricCount = `${cards.length} ${cards.length === 1 ? "Metric" : "Metrics"}`;
+
   return (
-    <section className="telemetry-grid" aria-label="Telemetry">
+    <section className="telemetry-section" aria-labelledby={headingId}>
-      {cards.map((card) => (
+      <header className="telemetry-section__header">
-        <TelemetryCard key={card.id} card={card} />
+        <div>
-      ))}
+          <p>Signal Matrix</p>
+          <h2 id={headingId}>Telemetry</h2>
+        </div>
+        <span>{metricCount}</span>
+      </header>
+      <div className="telemetry-grid">
+        {cards.map((card, index) => (
+          <TelemetryCard key={card.id} card={card} index={index + 1} />
+        ))}
+      </div>
     </section>
   );
 }

src/lib/ui/components/ThemeToggle.tsx

@@ -9,11 +9,11 @@ export interface ThemeToggleProps {
 
 export function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps) {
   const nextTheme = getNextUiTheme(theme);
-  const label = `Switch to ${nextTheme} theme`;
 
   return (
     <button
-      aria-label={label}
+      aria-label="Light theme"
+      aria-pressed={theme === "light"}
       className="theme-toggle"
       data-ui-theme-current={theme}
       data-ui-theme-toggle="true"

src/lib/ui/components/render.test.tsx

@@ -5,7 +5,9 @@ import { DashboardFrame } from "./DashboardFrame";
 import { FooterCell } from "./FooterCell";
 import { IconButton } from "./IconButton";
 import { ServiceRow } from "./ServiceRow";
+import { StatusStrip } from "./StatusStrip";
 import { TelemetryCard } from "./TelemetryCard";
+import { TelemetryGrid } from "./TelemetryGrid";
 import { ThemeToggle } from "./ThemeToggle";
 import { dashboardPreviewFixtures } from "../fixtures";
 
@@ -18,6 +20,10 @@ describe("dashboard UI components", () => {
     expect(body).toContain("Operations Console");
     expect(body).toContain("Core Throughput");
     expect(body).toContain("Queue Workers");
+    expect(body).toContain("console-header");
+    expect(body).toContain("telemetry-section");
+    expect(body).toContain("6 Metrics");
+    expect(body).toContain('data-variant="system-bus"');
     expect(body).toContain("data-icon-name=\"mdi:server-network\"");
     expect(body).toContain("data-severity=\"warning\"");
     expect(body).not.toContain("dashboard-title");
@@ -63,10 +69,28 @@ describe("dashboard UI components", () => {
     expect(service).toContain("<a ");
     expect(service).toContain("href=\"https://example.test/service\"");
     expect(service).toContain("target=\"_blank\"");
+    expect(service).toContain('class="service-row__status"');
+    expect(service).toContain('class="service-row__launch"');
     expect(footer).toContain("<a ");
     expect(footer).toContain("href=\"https://example.test/status\"");
   });
 
+  test("renders the status strip as a compact system bus", () => {
+    const body = renderToString(
+      <StatusStrip
+        id="dashboard-status"
+        items={[
+          { id: "system", label: "System", value: "Nominal", severity: "ok" },
+          { id: "refresh", label: "Refresh", value: "15s", severity: "neutral" },
+        ]}
+      />,
+    );
+
+    expect(body).toContain('class="status-strip"');
+    expect(body).toContain('data-variant="system-bus"');
+    expect(body).toContain("Nominal");
+  });
+
   test("renders stable model IDs on group and status containers", () => {
     const body = renderToString(
       <DashboardFrame dashboard={dashboardPreviewFixtures.primary} />,
@@ -119,6 +143,19 @@ describe("dashboard UI components", () => {
     expect(body).toContain('data-chart-library="uplot"');
   });
 
+  test("renders telemetry as a framed instrument section with indexed cards", () => {
+    const body = renderToString(
+      <TelemetryGrid cards={dashboardPreviewFixtures.primary.telemetry.slice(0, 2)} />,
+    );
+
+    expect(body).toContain('class="telemetry-section"');
+    expect(body).toContain("Telemetry");
+    expect(body).toContain("2 Metrics");
+    expect(body).toContain('data-metric-index="01"');
+    expect(body).toContain('class="telemetry-card__index"');
+    expect(body).toContain('class="telemetry-card__source"');
+  });
+
   test("base button controls forward native attributes", () => {
     const button = renderToString(
       <Button
@@ -153,7 +190,8 @@ describe("dashboard UI components", () => {
 
     expect(body).toContain('class="theme-toggle"');
     expect(body).toContain('data-ui-theme-current="light"');
-    expect(body).toContain('aria-label="Switch to dark theme"');
+    expect(body).toContain('aria-label="Light theme"');
+    expect(body).toContain('aria-pressed="true"');
     expect(body).toContain('class="theme-toggle__label"');
     expect(body).toContain('class="theme-toggle__switch"');
     expect(body).toContain('data-active="true"');

src/lib/ui/components/styles.css

@@ -3,38 +3,47 @@
   box-sizing: border-box;
   height: 100vh;
   min-height: 100vh;
-  gap: 0.36rem;
+  gap: 0.45rem;
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   overflow: hidden;
-  padding: clamp(0.42rem, 0.65vw, 0.62rem);
+  padding: clamp(0.5rem, 0.72vw, 0.74rem);
   background:
-    linear-gradient(90deg, transparent 0 49%, var(--ui-color-frame-spine) 50%, transparent 51%),
+    radial-gradient(ellipse at 50% 12%, transparent 0 44%, rgba(0, 0, 0, 0.14) 100%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 9rem),
     var(--ui-color-frame-wash);
+  font-variant-numeric: tabular-nums;
 }
 
 .dashboard-frame__header,
 .dashboard-header {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.48rem;
   align-items: start;
-  border-bottom: var(--ui-border);
 }
 
 .dashboard-frame__header {
-  grid-template-columns: minmax(30rem, 1fr) minmax(30rem, 0.9fr);
+  grid-template-columns: minmax(28rem, 1fr) minmax(31rem, 0.92fr);
-  min-height: 5.35rem;
+  min-height: 4.82rem;
-  padding-bottom: 0.34rem;
+  border: var(--ui-border-strong);
+  background: var(--ui-color-surface-panel);
+  box-shadow: var(--ui-shadow-inset-panel);
+  padding: 0.48rem;
 }
 
 .dashboard-frame__title {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--ui-space-3);
+  gap: 0.58rem;
-  align-items: start;
+  align-items: stretch;
   min-width: 0;
+  min-height: 3.72rem;
+  border-right: var(--ui-border);
+  padding-right: 0.48rem;
 }
 
 .dashboard-frame__title-copy {
+  display: grid;
+  align-content: start;
   min-width: 0;
 }
 
@@ -62,8 +71,9 @@
 .dashboard-header p,
 .dashboard-header span {
   color: var(--ui-color-muted);
-  font-size: 0.78rem;
+  font-size: 0.62rem;
   font-weight: 800;
+  letter-spacing: 0.04em;
 }
 
 .dashboard-frame h1,
@@ -71,10 +81,10 @@
   max-width: 100%;
   overflow-wrap: anywhere;
   font-family: var(--ui-font-display);
-  font-size: clamp(2.2rem, 3.3vw, 2.95rem);
+  font-size: clamp(2.05rem, 3vw, 2.78rem);
   font-weight: 850;
   letter-spacing: 0;
-  line-height: 0.8;
+  line-height: 0.82;
   white-space: nowrap;
 }
 
@@ -82,14 +92,14 @@
   display: grid;
   grid-template-columns: minmax(15rem, 0.66fr) minmax(17rem, 1fr);
   justify-content: end;
-  gap: 0.5rem;
+  gap: 0.48rem;
 }
 
 .dashboard-frame__panels {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   align-content: start;
-  gap: 0.36rem;
+  gap: 0.45rem;
   min-height: 0;
   overflow: hidden;
 }
@@ -102,12 +112,59 @@
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.telemetry-section {
+  display: grid;
+  min-height: 0;
+  border: var(--ui-border-strong);
+  background: var(--ui-color-surface-panel);
+  box-shadow: var(--ui-shadow-inset-panel);
+}
+
+.telemetry-section__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  min-height: 1.48rem;
+  border-bottom: var(--ui-border);
+  padding: 0.22rem 0.5rem;
+}
+
+.telemetry-section__header p,
+.telemetry-section__header h2,
+.telemetry-section__header span {
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.telemetry-section__header p {
+  color: var(--ui-color-muted);
+  font-size: 0.46rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.telemetry-section__header h2 {
+  color: var(--ui-color-text);
+  font-size: 0.68rem;
+  font-weight: 850;
+  letter-spacing: 0.04em;
+}
+
+.telemetry-section__header > span {
+  border: var(--ui-border);
+  color: var(--ui-color-text-secondary);
+  font-size: 0.5rem;
+  font-weight: 850;
+  letter-spacing: 0.06em;
+  padding: 0.18rem 0.36rem;
+}
+
 .telemetry-grid {
   display: grid;
   grid-template-columns: repeat(8, minmax(0, 1fr));
   gap: 1px;
-  border: var(--ui-border);
+  border: 0;
-  background: var(--ui-color-line);
+  background: var(--ui-color-border-subtle);
 }
 
 .telemetry-card,
@@ -120,44 +177,60 @@
 }
 
 .telemetry-card {
+  position: relative;
   display: grid;
-  min-height: 5.15rem;
+  min-height: 4.72rem;
-  gap: 0.25rem;
+  gap: 0.22rem;
   background: linear-gradient(
     180deg,
     var(--ui-color-card-gradient-start),
     var(--ui-color-card-gradient-end)
   );
-  padding: 0.45rem 0.55rem 0.42rem;
+  border-left: 2px solid var(--ui-color-ok);
+  box-shadow: var(--ui-shadow-inset-panel);
+  padding: 0.34rem 0.46rem 0.36rem;
 }
 
 .telemetry-card[data-severity="warning"] {
   border-color: color-mix(in srgb, var(--ui-color-warning), transparent 42%);
+  border-left-color: var(--ui-color-warning);
 }
 
 .telemetry-card[data-severity="danger"] {
   border-color: color-mix(in srgb, var(--ui-color-danger), transparent 22%);
+  border-left-color: var(--ui-color-danger);
   color: var(--ui-color-danger);
 }
 
 .telemetry-card[data-severity="stale"],
 .telemetry-card[data-severity="unavailable"] {
+  border-left-color: var(--ui-color-stale);
   color: var(--ui-color-stale);
 }
 
 .telemetry-card[data-severity="loading"] {
+  border-left-color: var(--ui-color-accent);
   color: var(--ui-color-accent);
 }
 
+.telemetry-card:hover {
+  background: var(--ui-color-surface-raised);
+}
+
 .telemetry-card header {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   min-width: 0;
-  align-items: center;
+  align-items: start;
-  gap: 0.35rem;
+  gap: 0.25rem;
 }
 
 .telemetry-card header .icon-glyph {
-  display: none;
+  width: 1rem;
+  height: 1rem;
+  border-color: var(--ui-color-border-subtle);
+  background: transparent;
+  color: var(--ui-color-muted);
 }
 
 .telemetry-card h3,
@@ -185,13 +258,23 @@
 
 .telemetry-card h3 {
   overflow-wrap: anywhere;
-  color: inherit;
+  color: var(--ui-color-text-secondary);
-  font-size: 0.58rem;
+  font-size: 0.52rem;
-  font-weight: 800;
+  font-weight: 850;
   line-height: 1.02;
   white-space: normal;
 }
 
+.telemetry-card__index {
+  display: inline-grid;
+  min-width: 1.05rem;
+  margin-bottom: 0.08rem;
+  color: var(--ui-color-muted);
+  font-size: 0.45rem;
+  font-weight: 850;
+  line-height: 1;
+}
+
 .service-row h3 {
   font-size: 0.72rem;
 }
@@ -200,10 +283,10 @@
 .module-card strong {
   display: block;
   font-family: var(--ui-font-display);
-  font-size: clamp(1.55rem, 2.45vw, 2.22rem);
+  font-size: clamp(1.45rem, 2.25vw, 2.05rem);
   font-weight: 800;
   letter-spacing: 0;
-  line-height: 0.76;
+  line-height: 0.78;
   white-space: nowrap;
 }
 
@@ -218,7 +301,8 @@
   white-space: nowrap;
 }
 
-.telemetry-card p {
+.telemetry-card p,
+.telemetry-card__source {
   font-size: 0.49rem;
   line-height: 1.05;
 }
@@ -230,7 +314,7 @@
 
 .telemetry-card__bar,
 .progress-meter {
-  height: 0.25rem;
+  height: 0.2rem;
   border: var(--ui-border);
   background: var(--ui-color-surface-inset);
 }
@@ -250,10 +334,18 @@
 .line-chart {
   position: relative;
   min-width: 0;
-  height: 1rem;
+  height: 0.86rem;
   color: var(--ui-color-accent);
 }
 
+.line-chart::before {
+  position: absolute;
+  inset: 50% 0 auto;
+  height: 1px;
+  background: var(--ui-color-border-subtle);
+  content: "";
+}
+
 .line-chart[data-severity="warning"] {
   color: var(--ui-color-warning);
 }
@@ -287,37 +379,43 @@
 .module-card {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.5rem;
+  gap: 0.45rem;
   align-items: start;
   min-width: 0;
-  min-height: 4.15rem;
+  min-height: 3.72rem;
+  border: var(--ui-border);
   background: var(--ui-color-surface-module);
-  padding: 0.5rem;
+  box-shadow: var(--ui-shadow-inset-panel);
+  padding: 0.42rem 0.48rem;
 }
 
 .module-card h2 {
   color: var(--ui-color-muted);
-  font-size: 0.56rem;
+  font-size: 0.48rem;
+  font-weight: 850;
+  letter-spacing: 0.08em;
   line-height: 1;
   text-transform: uppercase;
 }
 
 .module-card strong {
-  margin-top: 0.15rem;
+  margin-top: 0.12rem;
-  font-size: clamp(1.25rem, 1.75vw, 1.72rem);
+  font-size: clamp(1.1rem, 1.55vw, 1.56rem);
   line-height: 0.82;
   overflow-wrap: anywhere;
 }
 
 .module-card p {
-  margin-top: 0.2rem;
+  margin-top: 0.18rem;
-  font-size: 0.49rem;
+  color: var(--ui-color-muted);
+  font-size: 0.45rem;
   line-height: 1.05;
 }
 
 .module-card[data-severity="ok"] .icon-glyph {
-  background: var(--ui-color-accent);
+  border-color: color-mix(in srgb, var(--ui-color-ok), transparent 44%);
-  color: var(--ui-color-accent-contrast);
+  background: var(--ui-color-accent-soft);
+  color: var(--ui-color-ok);
 }
 
 .module-card[data-severity="warning"] {
@@ -341,10 +439,10 @@
 
 .service-row {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: 0.28rem auto minmax(0, 1fr) auto auto;
   gap: 0.24rem;
   align-items: center;
-  min-height: 2.02rem;
+  min-height: 2.08rem;
   border: 0;
   border-bottom: var(--ui-border);
   background: transparent;
@@ -353,19 +451,42 @@
   text-decoration: none;
 }
 
+.service-row__status {
+  width: 0.26rem;
+  height: 0.72rem;
+  background: var(--ui-color-muted);
+}
+
+.service-row[data-severity="ok"] .service-row__status {
+  background: var(--ui-color-ok);
+}
+
 .service-row[data-severity="warning"] {
   border-bottom-color: color-mix(in srgb, var(--ui-color-warning), transparent 54%);
 }
 
+.service-row[data-severity="warning"] .service-row__status {
+  background: var(--ui-color-warning);
+}
+
 .service-row[data-severity="danger"],
 .service-row[data-severity="unavailable"] {
   border-bottom-color: color-mix(in srgb, var(--ui-color-danger), transparent 50%);
 }
 
+.service-row[data-severity="danger"] .service-row__status,
+.service-row[data-severity="unavailable"] .service-row__status {
+  background: var(--ui-color-danger);
+}
+
 .service-row[data-severity="loading"] {
   border-bottom-color: color-mix(in srgb, var(--ui-color-accent), transparent 56%);
 }
 
+.service-row[data-severity="loading"] .service-row__status {
+  background: var(--ui-color-accent);
+}
+
 .service-row:where(a):hover {
   border-bottom-color: var(--ui-color-accent);
   background: var(--ui-color-hover);
@@ -375,16 +496,30 @@
   min-width: 0;
 }
 
+.service-row__launch {
+  display: inline-grid;
+  place-items: center;
+  color: var(--ui-color-muted);
+}
+
+.service-row__launch .icon-glyph {
+  width: 1rem;
+  height: 1rem;
+  border-color: var(--ui-color-border-subtle);
+  background: transparent;
+}
+
 .status-badge {
   display: inline-grid;
   min-height: 1.12rem;
   align-items: center;
   border: var(--ui-border);
-  padding: 0 0.3rem;
+  background: var(--ui-color-surface-inset);
+  padding: 0 0.32rem;
   color: var(--ui-color-muted);
-  font-size: 0.55rem;
+  font-size: 0.5rem;
   font-weight: 800;
-  letter-spacing: 0;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
   white-space: nowrap;
 }
@@ -416,7 +551,7 @@
 .footer-cell {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  min-height: 1.9rem;
+  min-height: 1.72rem;
   align-items: center;
   background: var(--ui-color-surface-footer);
   color: inherit;
@@ -426,7 +561,7 @@
 .footer-cell span,
 .footer-cell strong {
   min-width: 0;
-  padding: 0.34rem 0.52rem;
+  padding: 0.29rem 0.52rem;
   overflow-wrap: anywhere;
   text-transform: uppercase;
 }
@@ -435,18 +570,19 @@
   height: 100%;
   border-right: var(--ui-border);
   color: var(--ui-color-muted);
-  font-size: 0.52rem;
+  font-size: 0.48rem;
   font-weight: 800;
+  letter-spacing: 0.04em;
 }
 
 .footer-cell strong {
   color: var(--ui-color-text);
-  font-size: 0.58rem;
+  font-size: 0.54rem;
+  font-weight: 850;
 }
 
 .footer-cell[data-severity="ok"] strong {
-  background: var(--ui-color-accent);
+  color: var(--ui-color-ok);
-  color: var(--ui-color-accent-contrast);
 }
 
 .footer-cell[data-severity="warning"] strong {
@@ -474,8 +610,9 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
   gap: 1px;
-  border: var(--ui-border);
+  border: var(--ui-border-strong);
-  background: var(--ui-color-line);
+  background: var(--ui-color-border);
+  box-shadow: var(--ui-shadow-inset-panel);
 }
 
 .status-strip[data-compact="true"] {
@@ -485,7 +622,8 @@
 .panel {
   position: relative;
   min-width: 0;
-  box-shadow: var(--ui-shadow-hard);
+  background: var(--ui-color-surface-panel);
+  box-shadow: var(--ui-shadow-inset-panel);
 }
 
 .panel::before,
@@ -512,14 +650,15 @@
 }
 
 .panel__header {
-  padding: 0.42rem 0.55rem 0;
+  border-bottom: var(--ui-border);
+  padding: 0.38rem 0.55rem 0.3rem;
 }
 
 .panel h2 {
   font-family: var(--ui-font-display);
-  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
+  font-size: clamp(1.1rem, 1.62vw, 1.55rem);
   font-weight: 800;
-  line-height: 0.92;
+  line-height: 0.9;
   text-transform: uppercase;
 }
 
@@ -531,7 +670,11 @@
 
 .service-panel .panel__body {
   gap: 0;
-  padding-block: 0.24rem 0.42rem;
+  padding-block: 0.18rem 0.32rem;
+}
+
+.service-panel[data-layout="grid"] .service-row {
+  min-height: 1.95rem;
 }
 
 .ui-button,
@@ -581,11 +724,16 @@
   letter-spacing: 0;
   padding: 0.13rem;
   text-transform: uppercase;
-  box-shadow: var(--ui-shadow-hard);
+  box-shadow: var(--ui-shadow-inset-panel);
 }
 
 .theme-toggle:hover {
   border-color: var(--ui-color-accent);
+  background: var(--ui-color-surface-raised);
+}
+
+.theme-toggle:active {
+  background: var(--ui-color-surface-inset);
 }
 
 .theme-toggle__label {
@@ -623,8 +771,8 @@
 
 .theme-toggle__cell[data-active="true"] {
   border-color: var(--ui-color-accent);
-  background: var(--ui-color-accent);
+  background: var(--ui-color-accent-soft);
-  color: var(--ui-color-accent-contrast);
+  color: var(--ui-color-accent);
 }
 
 .theme-toggle__cell > span {
@@ -714,13 +862,34 @@
   }
 }
 
-@media (max-width: 780px) {
+@media (max-width: 1180px), (max-height: 840px) {
   .dashboard-frame {
+    grid-template-rows: auto auto auto auto;
     height: auto;
     min-height: 100vh;
     overflow: visible;
   }
 
+  .dashboard-frame__panels {
+    overflow: visible;
+  }
+}
+
+@media (max-width: 1180px) {
+  .dashboard-frame__header {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-frame__panels {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .dashboard-frame__panels .service-panel[data-layout="grid"] .panel__body {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 780px) {
   .dashboard-frame__header,
   .dashboard-frame__title,
   .dashboard-header,
@@ -729,6 +898,17 @@
     grid-template-columns: 1fr;
   }
 
+  .dashboard-frame__header {
+    min-height: 0;
+  }
+
+  .dashboard-frame__title {
+    border-right: 0;
+    border-bottom: var(--ui-border);
+    padding-right: 0;
+    padding-bottom: 0.48rem;
+  }
+
   .dashboard-frame h1,
   .dashboard-header h1 {
     white-space: normal;
@@ -751,11 +931,27 @@
 
 @media (max-width: 580px) {
   .service-row {
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: 0.28rem auto minmax(0, 1fr) auto;
+    min-height: 2.75rem;
   }
 
   .service-row .status-badge {
-    grid-column: 2;
+    grid-column: 3;
     justify-self: start;
   }
+
+  .service-row__launch {
+    grid-column: 4;
+    grid-row: 1;
+  }
+
+  .status-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 420px) {
+  .status-strip {
+    grid-template-columns: 1fr;
+  }
 }

src/lib/ui/tokens.css

@@ -1,32 +1,46 @@
 :root,
 [data-ui-theme="dark"] {
   color-scheme: dark;
-  --ui-color-canvas: #020302;
+  --ui-color-background: #0b0f0d;
-  --ui-color-surface: #060706;
+  --ui-color-backdrop-edge: #020403;
-  --ui-color-surface-raised: #0b0d0c;
+  --ui-color-canvas: #0b0f0d;
-  --ui-color-surface-panel: rgba(3, 4, 3, 0.86);
+  --ui-color-surface: #111713;
-  --ui-color-surface-module: rgba(6, 8, 7, 0.82);
+  --ui-color-surface-raised: #151d18;
-  --ui-color-surface-footer: rgba(2, 3, 2, 0.92);
+  --ui-color-surface-elevated: #19231d;
-  --ui-color-surface-inset: #030403;
+  --ui-color-surface-panel: rgba(15, 21, 17, 0.94);
-  --ui-color-surface-icon: #050605;
+  --ui-color-surface-module: rgba(18, 25, 21, 0.96);
-  --ui-color-line: rgba(244, 244, 244, 0.16);
+  --ui-color-surface-footer: rgba(11, 15, 13, 0.98);
-  --ui-color-line-strong: rgba(244, 244, 244, 0.32);
+  --ui-color-surface-inset: #070b09;
-  --ui-color-grid-line: rgba(255, 255, 255, 0.035);
+  --ui-color-surface-icon: #101711;
-  --ui-color-frame-spine: rgba(255, 255, 255, 0.08);
+  --ui-color-border-subtle: rgba(209, 222, 198, 0.13);
-  --ui-color-frame-wash: rgba(0, 0, 0, 0.18);
+  --ui-color-border: rgba(211, 225, 199, 0.2);
-  --ui-color-card-gradient-start: rgba(13, 15, 14, 0.82);
+  --ui-color-border-strong: rgba(219, 234, 207, 0.34);
-  --ui-color-card-gradient-end: rgba(2, 3, 2, 0.92);
+  --ui-color-line: var(--ui-color-border);
-  --ui-color-hover: rgba(244, 244, 244, 0.035);
+  --ui-color-line-strong: var(--ui-color-border-strong);
-  --ui-color-text: #f3f4ed;
+  --ui-color-grid-line: rgba(222, 238, 211, 0.045);
-  --ui-color-muted: #8d948c;
+  --ui-color-backdrop-vignette: rgba(0, 0, 0, 0.24);
-  --ui-color-dim: #555b55;
+  --ui-color-frame-spine: rgba(198, 230, 160, 0.1);
-  --ui-color-accent: #d7ff00;
+  --ui-color-frame-wash: rgba(10, 15, 12, 0.52);
-  --ui-color-accent-contrast: #050605;
+  --ui-color-card-gradient-start: rgba(24, 33, 27, 0.94);
-  --ui-color-ok: #bfff00;
+  --ui-color-card-gradient-end: rgba(10, 15, 12, 0.98);
-  --ui-color-warning: #ffb020;
+  --ui-color-hover: rgba(190, 225, 146, 0.075);
-  --ui-color-danger: #ff1744;
+  --ui-color-text-primary: #edf1e6;
-  --ui-color-stale: #82909a;
+  --ui-color-text-secondary: #b4bda9;
-  --ui-color-unavailable: #65707a;
+  --ui-color-text-muted: #7f8a7a;
+  --ui-color-text: var(--ui-color-text-primary);
+  --ui-color-muted: var(--ui-color-text-muted);
+  --ui-color-dim: #4e594d;
+  --ui-color-accent: #c7ef5f;
+  --ui-color-accent-soft: rgba(199, 239, 95, 0.12);
+  --ui-color-accent-contrast: #0a100b;
+  --ui-color-success: #9fd85a;
+  --ui-color-ok: var(--ui-color-success);
+  --ui-color-warning: #d99a3a;
+  --ui-color-critical: #f04463;
+  --ui-color-danger: var(--ui-color-critical);
+  --ui-color-info: #86a8bd;
+  --ui-color-stale: #8a9a93;
+  --ui-color-unavailable: #6f7a76;
   --ui-font-mono: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
   --ui-font-display: "Teko", "IBM Plex Mono", "Roboto Mono", monospace;
   --ui-space-1: 0.25rem;
@@ -36,9 +50,12 @@
   --ui-space-5: 1.25rem;
   --ui-space-6: 1.5rem;
   --ui-radius-none: 0;
-  --ui-border: 1px solid var(--ui-color-line);
+  --ui-border: 1px solid var(--ui-color-border);
-  --ui-border-strong: 1px solid var(--ui-color-line-strong);
+  --ui-border-strong: 1px solid var(--ui-color-border-strong);
-  --ui-shadow-hard: 0 0 0 1px rgba(215, 255, 0, 0.12) inset;
+  --ui-shadow-hard: 0 0 0 1px rgba(199, 239, 95, 0.1) inset;
+  --ui-shadow-inset-panel:
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
   --ui-z-base: 0;
   --ui-z-panel: 1;
   --ui-z-overlay: 10;
@@ -48,33 +65,50 @@
 
 [data-ui-theme="light"] {
   color-scheme: light;
-  --ui-color-canvas: #f3f5ed;
+  --ui-color-background: #eef2e7;
-  --ui-color-surface: #ffffff;
+  --ui-color-backdrop-edge: #d7decf;
-  --ui-color-surface-raised: #eef1e7;
+  --ui-color-canvas: #eef2e7;
-  --ui-color-surface-panel: rgba(255, 255, 255, 0.9);
+  --ui-color-surface: #f9fbf3;
-  --ui-color-surface-module: rgba(255, 255, 255, 0.84);
+  --ui-color-surface-raised: #f1f5ea;
-  --ui-color-surface-footer: rgba(248, 250, 241, 0.94);
+  --ui-color-surface-elevated: #ffffff;
-  --ui-color-surface-inset: #e4e8db;
+  --ui-color-surface-panel: rgba(250, 252, 245, 0.94);
-  --ui-color-surface-icon: #f8faf1;
+  --ui-color-surface-module: rgba(252, 254, 247, 0.96);
-  --ui-color-line: rgba(19, 25, 19, 0.18);
+  --ui-color-surface-footer: rgba(239, 243, 233, 0.98);
-  --ui-color-line-strong: rgba(19, 25, 19, 0.34);
+  --ui-color-surface-inset: #e1e8d9;
-  --ui-color-grid-line: rgba(19, 25, 19, 0.055);
+  --ui-color-surface-icon: #edf3e6;
-  --ui-color-frame-spine: rgba(19, 25, 19, 0.1);
+  --ui-color-border-subtle: rgba(32, 43, 29, 0.12);
-  --ui-color-frame-wash: rgba(255, 255, 255, 0.48);
+  --ui-color-border: rgba(32, 43, 29, 0.22);
-  --ui-color-card-gradient-start: rgba(255, 255, 255, 0.92);
+  --ui-color-border-strong: rgba(32, 43, 29, 0.38);
-  --ui-color-card-gradient-end: rgba(230, 235, 221, 0.88);
+  --ui-color-line: var(--ui-color-border);
-  --ui-color-hover: rgba(19, 25, 19, 0.055);
+  --ui-color-line-strong: var(--ui-color-border-strong);
-  --ui-color-text: #11170f;
+  --ui-color-grid-line: rgba(32, 43, 29, 0.055);
-  --ui-color-muted: #5d665a;
+  --ui-color-backdrop-vignette: rgba(31, 44, 29, 0.08);
-  --ui-color-dim: #7d8779;
+  --ui-color-frame-spine: rgba(32, 43, 29, 0.09);
-  --ui-color-accent: #516f00;
+  --ui-color-frame-wash: rgba(255, 255, 255, 0.54);
+  --ui-color-card-gradient-start: rgba(255, 255, 255, 0.96);
+  --ui-color-card-gradient-end: rgba(229, 235, 221, 0.92);
+  --ui-color-hover: rgba(54, 81, 25, 0.065);
+  --ui-color-text-primary: #11180f;
+  --ui-color-text-secondary: #3f4b3b;
+  --ui-color-text-muted: #667260;
+  --ui-color-text: var(--ui-color-text-primary);
+  --ui-color-muted: var(--ui-color-text-muted);
+  --ui-color-dim: #7e8878;
+  --ui-color-accent: #4f7200;
+  --ui-color-accent-soft: rgba(79, 114, 0, 0.11);
   --ui-color-accent-contrast: #ffffff;
-  --ui-color-ok: #4c7400;
+  --ui-color-success: #436f00;
-  --ui-color-warning: #a45b00;
+  --ui-color-ok: var(--ui-color-success);
-  --ui-color-danger: #bd173f;
+  --ui-color-warning: #915c00;
-  --ui-color-stale: #596975;
+  --ui-color-critical: #b7173c;
-  --ui-color-unavailable: #6c7479;
+  --ui-color-danger: var(--ui-color-critical);
-  --ui-shadow-hard: 0 0 0 1px rgba(81, 111, 0, 0.18) inset;
+  --ui-color-info: #476a7c;
+  --ui-color-stale: #596b64;
+  --ui-color-unavailable: #68726c;
+  --ui-shadow-hard: 0 0 0 1px rgba(79, 114, 0, 0.14) inset;
+  --ui-shadow-inset-panel:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    inset 0 -1px 0 rgba(31, 44, 29, 0.08);
 }
 
 html {
@@ -86,10 +120,11 @@ body {
   min-height: 100vh;
   margin: 0;
   background:
+    radial-gradient(circle at 50% 12%, transparent 0 42%, var(--ui-color-backdrop-vignette) 100%),
     linear-gradient(var(--ui-color-grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--ui-color-grid-line) 1px, transparent 1px),
     var(--ui-color-canvas);
-  background-size: 48px 48px, 48px 48px, auto;
+  background-size: auto, 40px 40px, 40px 40px, auto;
   color: var(--ui-color-text);
   font-family: var(--ui-font-mono);
   text-rendering: geometricPrecision;

tests/e2e/dashboard.spec.ts

@@ -109,6 +109,61 @@ test.describe("dashboard page QA gate", () => {
     expect(metrics.clippedItems).toEqual([]);
   });
 
+  test("keeps intermediate viewports scrollable without horizontal clipping", async ({
+    page,
+  }, testInfo) => {
+    test.skip(testInfo.project.name !== "chromium-desktop");
+
+    for (const viewport of [
+      { width: 900, height: 956 },
+      { width: 1024, height: 768 },
+    ]) {
+      await page.setViewportSize(viewport);
+      await page.goto("/");
+      await waitForDashboardReady(page);
+
+      const metrics = await page.evaluate(() => {
+        const footer = document.querySelector("[data-model-id='footer-status']");
+        const trackedElements = [
+          document.querySelector(".dashboard-frame__header"),
+          ...document.querySelectorAll(".telemetry-card"),
+          ...document.querySelectorAll(".service-panel"),
+          document.querySelector("[data-model-id='runtime-health']"),
+          footer,
+        ].filter((element): element is Element => Boolean(element));
+
+        const footerRect = footer?.getBoundingClientRect();
+        const clippedRight = trackedElements
+          .map((element) => {
+            const rect = element.getBoundingClientRect();
+            return {
+              id: element.getAttribute("data-model-id") || element.className,
+              right: rect.right,
+              width: rect.width,
+            };
+          })
+          .filter((item) => item.right > window.innerWidth + 1 || item.width <= 0);
+
+        return {
+          clippedRight,
+          footerBottomInDocument: (footerRect?.bottom ?? 0) + window.scrollY,
+          frameOverflow: window.getComputedStyle(
+            document.querySelector(".dashboard-frame") as Element,
+          ).overflow,
+          scrollHeight: document.documentElement.scrollHeight,
+          scrollWidth: document.documentElement.scrollWidth,
+        };
+      });
+
+      expect(metrics.scrollWidth).toBeLessThanOrEqual(viewport.width);
+      expect(metrics.scrollHeight).toBeGreaterThanOrEqual(
+        Math.ceil(metrics.footerBottomInDocument),
+      );
+      expect(metrics.frameOverflow).not.toBe("hidden");
+      expect(metrics.clippedRight).toEqual([]);
+    }
+  });
+
   test("renders bookmark rows as a compact divider list", async ({ page }, testInfo) => {
     test.skip(testInfo.project.name !== "chromium-desktop");
 
@@ -210,10 +265,9 @@ test.describe("dashboard page QA gate", () => {
 
     await expect(page.getByRole("main")).toHaveCount(1);
     await page.keyboard.press("Tab");
-    const themeToggle = page.getByRole("button", {
+    const themeToggle = page.getByRole("button", { name: "Light theme" });
-      name: "Switch to light theme",
-    });
     await expect(themeToggle).toBeFocused();
+    await expect(themeToggle).toHaveAttribute("aria-pressed", "false");
     const themeFocusBoxShadow = await themeToggle.evaluate((element) => {
       return window.getComputedStyle(element).boxShadow;
     });
@@ -247,8 +301,12 @@ test.describe("dashboard page QA gate", () => {
 
     await page.goto("/");
     await waitForDashboardReady(page);
-    await page.getByRole("button", { name: "Switch to light theme" }).click();
+    await page.getByRole("button", { name: "Light theme" }).click();
     await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "light");
+    await expect(page.getByRole("button", { name: "Light theme" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
 
     const results = await new AxeBuilder({ page }).analyze();
     expect(results.violations).toEqual([]);
@@ -291,15 +349,17 @@ test.describe("dashboard page QA gate", () => {
     await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "dark");
 
     const switchToLight = page.getByRole("button", {
-      name: "Switch to light theme",
+      name: "Light theme",
     });
     await expect(switchToLight).toBeVisible();
+    await expect(switchToLight).toHaveAttribute("aria-pressed", "false");
     await switchToLight.click();
 
     await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "light");
-    await expect(
+    await expect(page.getByRole("button", { name: "Light theme" })).toHaveAttribute(
-      page.getByRole("button", { name: "Switch to dark theme" }),
+      "aria-pressed",
-    ).toBeVisible();
+      "true",
+    );
 
     await page.reload();
     await waitForDashboardReady(page);

tests/e2e/storybook.spec.ts

@@ -21,11 +21,15 @@ test.describe("Storybook theme QA", () => {
 
     await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "light");
     await expect(
-      page.getByRole("button", { name: "Switch to dark theme" }),
+      page.getByRole("button", { name: "Light theme" }),
     ).toBeVisible();
+    await expect(page.getByRole("button", { name: "Light theme" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
     await expect(page.locator("body")).toHaveCSS(
       "background-color",
-      "rgb(243, 245, 237)",
+      "rgb(238, 242, 231)",
     );
     expect(
       consoleMessages.filter((message) =>