feat(ui): D.5a migrate Results header + 4-card metric strip

[slittycode]

Summary

PR 6 of 16 in the UI consistency overhaul / Live 12 restyle stack. Promotes the AnalysisResults page header to <SectionHeader> and wraps the top TEMPO/KEY/METER/CHARACTER metric strip in a <DeviceRack name="Measurement Summary"> with <MetricTile> cards inside.

Stacked on #69 (D.4 FileUpload). Base will be retargeted to main after #69 merges.

Header (AnalysisResults.tsx:835-880 → :835-878)

• <h1> + Download buttons row → <SectionHeader size="lg" variant="inline" eyebrow="ASA Results" titleRole="page-title"> with both Download buttons in the action slot.
• The Activity icon prefix on the h1 disappears — the SectionHeader LED dot carries the "results are live" semantic.
• The subtitle (sourceFileName · interpretationSubtitle) stays as a separate <p> sibling, preserving data-testid="analysis-results-subtitle" and the existing text-role-meta styling. Indented pl-4 to align under the title after the LED.
• Download data: <button> → <Button variant="secondary" leadingIcon={FileJson}>. Preserved data-testid="analysis-export-json".
• Download report: <button> → <Button variant="primary" leadingIcon={FileText}>. Preserved data-testid="analysis-export-markdown".

Metric strip (AnalysisResults.tsx:884-1012 → :882-1010)

• Outer <div className="grid grid-cols-2 md:grid-cols-4 gap-3"> wrapped in <DeviceRack name="Measurement Summary" density="dense" status="success">. The grid layout stays as-is inside the rack body so the responsive 2-col / 4-col break still works.
• 4 × AccentMetricCard → 4 × <MetricTile size="lg" accent="accent">. API parity drop-in:
  • label (was a flex-span with icon+text) → icon prop + label string. Cleaner separation; the MetricTile primitive places the icon in the eyebrow row.
  • value / unit / headerRight / footer pass through unchanged.
  • The hand-rolled text-[1.5rem] override on the CHARACTER value disappears — MetricTile size="lg" already renders text-2xl which is the same 1.5rem.

Imports

• AccentMetricCard stays imported from ./MeasurementPrimitives. Other usages of it remain at :1249-1258 and :1444-1448 (Patches / Sonic Elements sections — migrated in later PRs D.5b/c/d).
• Added Button / DeviceRack / MetricTile / SectionHeader from ./ui.

Preserved verbatim

• All data-testid attributes: analysis-results-root, analysis-results-subtitle, analysis-export-json, analysis-export-markdown.
• All visible text strings: "Analysis Results", "Download data", "Download report", "TEMPO", "BPM", "KEY SIG", "METER", "CHARACTER", "SCANNING...".
• PhaseSourceBadge + ConfidenceBandBadge + MetricBar + StatusBadge + TokenBadgeList rendering inside each tile is untouched.
• Audit Finding fix: chunk Demucs inference and stop boot-time memory spikes #4 commentary (canonical band-pill vocabulary) and Audit Finding feat: value-first backport — genre profiles, MixDoctor, broken-pipe fixes #1 ordering comment (MeasurementDashboard at the bottom).
• The lowConfidenceIndicator + characteristicPills logic untouched.

Test plan

• npm run lint — clean
• npm run test:unit — 628/628 passing
• npm run build — clean (AnalysisResults chunk 255 KB / 63 KB gz; index chunk 323 KB / 97 KB gz — stable vs PR 5)
• npm run test:smoke — sandbox network blocks Playwright browser; smoke selectors target text + data-testid which are all preserved (Download data, Download report, analysis-results-subtitle, etc.)
• Manual: confirm the page header LED pulses orange, Download buttons read as primary/secondary, the 4-card metric strip sits inside a "Measurement Summary" rack with success-tinted box-shadow

Up next (PR 7)

D.5b Mix Chain. Each group → <DeviceRack>. Cards → <Panel variant="surface">. AppliedCheckbox (AnalysisResults.tsx:189-220) uses <Checkbox> internally. Preserve data-testid="mix-chain-applied-progress" and CitationBlock/CitationHeadline internals verbatim. Update analysisResultsUi.test.ts brittle assertions per plan §F.5.

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe

---

Generated by Claude Code

[slittycode]

Verdict: APPROVE

Summary

Pure UI layer component substitution — <h1> → <SectionHeader>, four <AccentMetricCard> → four <MetricTile size="lg"> inside a <DeviceRack>, two <button> → <Button variant>. No logic changed. Tests pass (645/649, 4 skipped), lint clean, build stable at the sizes the PR description quotes (AnalysisResults chunk 255 KB / 63 KB gz). All data-testid hooks preserved.

Findings

Worth considering (not blocking):

MetricTile renders its value prop inside a <span className="... tabular-nums ...">. For the CHARACTER genre string that's harmless, but tabular-nums on a word is semantically odd. Not a bug — just something to be aware of if that value ever needs proportional spacing.

The CHARACTER "SCANNING..." fallback passes <span className="text-base ..."> as the value prop, which correctly overrides the parent text-2xl from size="lg". That works, but it's a fragile coupling: the sizing inside MetricTile is being cancelled by a class on the child rather than a supported prop. Again not blocking — the visual result is identical to the old code — but worth knowing for when this tile gets standardised in D.5b+.

Test results

645 passed / 4 skipped (0 failures). No new non-trivial logic was introduced; the existing data-testid selectors in smoke tests cover the preserved hooks.

Phase boundary check

Clean. AnalysisResults.tsx reads phase1.* values identically to before — phase1.bpmConfidence, phase1.keyConfidence, phase1.genreDetail.confidence etc. are passed through to child components as props. No assignment, no re-derivation.

---

Generated by Claude Code