FN-6784: keep Command Center numbers on one line

Command Center token totals now shrink to fit instead of wrapping digit groups.

- Add inline-size containers around stat cards and live metrics for container-query scaling.
- Replace digit wrapping with nowrap overflow clipping and clamp-based numeric font sizes.
- Strengthen Command Center tests for exact live metric values and CSS no-wrap shrink contracts.

Files changed:
 .../app/components/command-center/CommandCenter.css   | 17 ++++++++++++-----
 .../command-center/__tests__/CommandCenter.test.tsx   |  3 ++-
 .../CommandCenter.token-validity.css.test.ts          | 19 +++++++++++++++----
 3 files changed, 29 insertions(+), 10 deletions(-)

Fusion-Task-Id: FN-6784

Fusion-Task-Lineage: dfe165f4-7304-49eb-b46b-83c0a9e2c4a3

packages/dashboard/app/components/command-center/CommandCenter.css

@@ -106,6 +106,7 @@ FNXC:CommandCenterStyling 2026-06-18-22:38:
 FN-6680 standardizes the Command Center card rhythm across overview, area, table, team, and system chart surfaces: use --space-md padding/gaps, 1px solid --border-subtle, --radius-md, and --surface-1 so mobile and tablet charts do not look like separate components.
 */
 .cc-stat-card {
+  container-type: inline-size;
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
@@ -123,13 +124,17 @@ FN-6680 standardizes the Command Center card rhythm across overview, area, table
 
 /*
 FNXC:CommandCenterStyling 2026-06-19-00:00:
-FN-6726 requires large comma-grouped token totals to wrap instead of forcing stat cards or live metrics wider across desktop, tablet, and mobile. jsdom cannot prove pixel overflow for min-content sizing, so keep these containment declarations paired with the raw CSS-rule regression test.
+FN-6726 required large comma-grouped token totals to wrap instead of forcing stat cards or live metrics wider across desktop, tablet, and mobile. FN-6784 reverses that behavior because split digit groups read as multiple numbers.
+
+FNXC:CommandCenterStyling 2026-06-19-22:18:
+FN-6784 requires stat and live-metric numbers to stay on one line and shrink by card/container width across desktop, tablet, and mobile. jsdom cannot prove pixel fit, so the CSS-rule contract guards nowrap plus container-query font clamps instead of wrapping.
 */
 .cc-stat-value {
   max-width: 100%;
   min-width: 0;
-  overflow-wrap: anywhere;
-  font-size: 1.5rem;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: clamp(0.8rem, 7cqi, 1.5rem);
   font-variant-numeric: tabular-nums;
   color: var(--text);
 }
@@ -240,6 +245,7 @@ FN-6700 reduces the live-strip decorative accent gradient, glow, and sweep inten
 }
 
 .cc-live-metric {
+  container-type: inline-size;
   min-inline-size: 0;
   display: flex;
   flex-direction: column;
@@ -253,9 +259,10 @@ FN-6700 reduces the live-strip decorative accent gradient, glow, and sweep inten
 .cc-live-metric-value {
   max-width: 100%;
   min-width: 0;
-  overflow-wrap: anywhere;
+  overflow: hidden;
+  white-space: nowrap;
   color: var(--text);
-  font-size: 1.125rem;
+  font-size: clamp(0.75rem, 6cqi, 1.125rem);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
 }

packages/dashboard/app/components/command-center/__tests__/CommandCenter.test.tsx

@@ -484,7 +484,7 @@ describe("CommandCenter shell", () => {
 
     await screen.findByTestId("command-center-stat-tokens");
     expect(statValue("command-center-stat-tokens")).toBe("1,234,567,890");
-    expect(screen.getByTestId("command-center-live-tokens").textContent).toContain("1,234,567,890");
+    expect(liveMetricValue("command-center-live-tokens")).toBe("1,234,567,890");
   });
 
   it("live-polls token totals for the Overview card and live strip", async () => {
@@ -597,6 +597,7 @@ describe("CommandCenter shell", () => {
     await screen.findByTestId("command-center-stat-nodes");
     expect(screen.queryByTestId("command-center-empty")).toBeNull();
     expect(statValue("command-center-stat-tokens")).toBe("0");
+    expect(liveMetricValue("command-center-live-tokens")).toBe("0");
     expect(statValue("command-center-stat-nodes")).toBe("1");
     expect(screen.queryByTestId("command-center-overview-charts")).toBeNull();
     expect(screen.queryByTestId("command-center-overview-loading")).toBeNull();

packages/dashboard/app/components/command-center/__tests__/CommandCenter.token-validity.css.test.ts

@@ -101,16 +101,27 @@ function expectRuleContainsDeclaration(ruleBlock: string, property: string, valu
 
 /*
 FNXC:CommandCenterStyling 2026-06-19-00:00:
-FN-6726 guards Command Center stat and live-metric value containment at the emitted CSS-rule level because jsdom cannot measure min-content overflow from large comma-grouped token totals.
+FN-6726 guarded Command Center stat and live-metric value containment at the emitted CSS-rule level because jsdom cannot measure min-content overflow from large comma-grouped token totals.
+
+FNXC:CommandCenterStyling 2026-06-19-22:18:
+FN-6784 changes the containment contract from wrapping to single-line numbers with container-query font shrink. This raw CSS assertion must fail if overflow-wrap:anywhere returns or if the card/metric containers stop exposing inline-size query units.
 */
-describe("Command Center stat value overflow containment (FN-6726)", () => {
+describe("Command Center stat value no-wrap shrink containment (FN-6784)", () => {
   const css = readFileSync(join(COMMAND_CENTER_DIR, "CommandCenter.css"), "utf8");
 
-  it("keeps stat and live metric values shrinkable and wrappable", () => {
+  it("keeps stat and live metric values single-line with container-query font clamps", () => {
+    const containers = [".cc-stat-card", ".cc-live-metric"];
+    for (const selector of containers) {
+      const block = extractRuleBlock(css, selector);
+      expectRuleContainsDeclaration(block, "container-type", /inline-size/);
+    }
+
     for (const selector of [".cc-stat-value", ".cc-live-metric-value"]) {
       const block = extractRuleBlock(css, selector);
       expectRuleContainsDeclaration(block, "min-width", /0/);
-      expectRuleContainsDeclaration(block, "overflow-wrap", /anywhere|break-word/);
+      expectRuleContainsDeclaration(block, "white-space", /nowrap/);
+      expectRuleContainsDeclaration(block, "font-size", /clamp\([^;]*cqi[^;]*\)/);
+      expect(block, `${selector} must not restore digit-group wrapping`).not.toMatch(/(^|\n)\s*overflow-wrap\s*:\s*(anywhere|break-word)\s*;/);
     }
   });
 });