From e95574fc3637980ce71893bddca77489225fa558 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 23:26:33 +0000
Subject: [PATCH] feat(ui): D.6a wrap MeasurementDashboard in DeviceRack +
 migrate cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR 10 (sub-step a) of 16 in the UI consistency overhaul. First of
three small PRs against MeasurementDashboard.tsx (2814 LOC) — split
per plan §E.3 to keep each diff eyeball-reviewable.

This step:
- Wrap the dashboard outer <div data-testid="measurement-dashboard">
  in <DeviceRack name="Measurements" density="dense" status="success">.
  The dashboard now lives inside the Live 12 device chrome (title
  strip + LED + dense body padding) consistent with every other
  results section.
- Migrate every AccentMetricCard (5 instances at :1325, :1365, :1384,
  :1662, :1866) to <MetricTile size="xl">. The xl size renders the
  numeric value at text-3xl (1.875rem) — exact visual match for the
  old AccentMetricCard which manually appended text-3xl to its value
  span. accent="warning" call at :1866 maps cleanly to MetricTile's
  accent prop (both share warning/success/error/accent/neutral tones).

Drop the AccentMetricCard import in favor of DeviceRack + MetricTile
from ./ui. Other MeasurementPrimitives exports (DeltaBadge, MetricBar,
MetricBarRow, OutlinePillButton, StatusBadge, StyledDataTable,
TokenBadgeList) stay imported — those are migrated in D.6b/c.

Preserved verbatim:
- data-testid="measurement-dashboard" hook (locked by smoke tests).
- All MetricTile props (label/value/unit/headerRight/footer) match
  AccentMetricCard's API 1:1.
- All inner data-text-role attributes and visible text.

Verified: lint clean, 628/628 unit tests passing, build clean
(AnalysisResults chunk stable at 254 KB / 63 KB gz).

Next: D.6b — UnavailableMeasurementCard → EmptyState + drift fix at
:438 (bg-blue-500 → bg-accent). D.6c — local SectionHeader (:288-303)
→ primitive.

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
---
 .../ui/src/components/MeasurementDashboard.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/ui/src/components/MeasurementDashboard.tsx b/apps/ui/src/components/MeasurementDashboard.tsx
index 91a19104..b5bd634b 100644
--- a/apps/ui/src/components/MeasurementDashboard.tsx
+++ b/apps/ui/src/components/MeasurementDashboard.tsx
@@ -25,7 +25,6 @@ import { MiniHeatmap } from './MiniHeatmap';
 import { ConfidenceBandBadge } from './sessionMusician/ConfidenceBandBadge';
 import { MixDoctorPanel } from './MixDoctorPanel';
 import {
-  AccentMetricCard,
   DeltaBadge,
   MetricBar,
   MetricBarRow,
@@ -34,6 +33,7 @@ import {
   StyledDataTable,
   TokenBadgeList,
 } from './MeasurementPrimitives';
+import { DeviceRack, MetricTile } from './ui';
 import { Sparkline } from './Sparkline';
 import { SpectralCursorProvider } from '../hooks/useSpectralCursorBus';
 import { formatDisplayText, getTextRoleClassName } from '../utils/displayText';
@@ -1310,7 +1310,8 @@ export function MeasurementDashboard({
   }, [apiBaseUrl, runId, generating]);
 
   return (
-    <div data-testid="measurement-dashboard" className="space-y-4">
+    <DeviceRack name="Measurements" density="dense" status="success">
+      <div data-testid="measurement-dashboard" className="space-y-4">
       {/* 1. Core Metrics */}
       <Section id="section-meas-core" number={1} title="Core Metrics">
         {/* Hero Grid */}
@@ -1321,7 +1322,7 @@ export function MeasurementDashboard({
               twice at different precisions ("157" up top, "156.6" here) inside
               one scroll region read as a measurement disagreement to producers.
               Precision is preserved in the Percival sub-label below. */}
-          <AccentMetricCard
+          <MetricTile size="xl"
             label="Tempo"
             value={Math.round(phase1.bpm)}
             unit="BPM"
@@ -1361,7 +1362,7 @@ export function MeasurementDashboard({
           />
 
           {/* Key Tile */}
-          <AccentMetricCard
+          <MetricTile size="xl"
             label="Key Signature"
             value={<span className="truncate block">{phase1.key || '—'}</span>}
             footer={
@@ -1380,7 +1381,7 @@ export function MeasurementDashboard({
           />
 
           {/* Duration / Format Tile */}
-          <AccentMetricCard
+          <MetricTile size="xl"
             label="Duration"
             value={formatDuration(phase1.durationSeconds)}
             unit={phase1.timeSignature}
@@ -1658,7 +1659,7 @@ export function MeasurementDashboard({
                 { label: 'True Peak', value: phase1.truePeak, suffix: 'dBTP', decimals: 2 },
               ].filter((tile) => tile.value !== undefined && tile.value !== null).map((tile) => (
                 <div key={tile.label}>
-                  <AccentMetricCard
+                  <MetricTile size="xl"
                     label={tile.label}
                     value={formatNumber(tile.value!, tile.decimals)}
                     unit={tile.suffix ? <span className="text-[8px] font-mono text-text-secondary/45">{tile.suffix}</span> : undefined}
@@ -1862,7 +1863,7 @@ export function MeasurementDashboard({
               )}
             </div>
           ) : (
-            <AccentMetricCard
+            <MetricTile size="xl"
               label="Dynamics & Texture"
               value={dynamicsTextureFallback.title}
               unit={<span className="text-[8px] font-mono uppercase tracking-wide text-text-secondary/45">Unavailable</span>}
@@ -2809,6 +2810,7 @@ export function MeasurementDashboard({
           )}
         </div>
       </Section>
-    </div>
+      </div>
+    </DeviceRack>
   );
 }