From 2accb2b092db38cb33a40fe490b74fe78c73e20f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 22:48:34 +0000
Subject: [PATCH] feat(ui): D.5a migrate Results header + 4-card metric strip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR 6 of 16 in the UI consistency overhaul. 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 PR #69 (D.4 FileUpload). Will rebase onto 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 already 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...".
- The PhaseSourceBadge + ConfidenceBandBadge + MetricBar + StatusBadge
  + TokenBadgeList rendering inside each tile is untouched.
- Audit Finding #4 commentary preserved (canonical band-pill
  vocabulary).
- Audit Finding #1 ordering comment preserved (MeasurementDashboard
  rendering at the bottom of the scroll).
- The lowConfidenceIndicator + characteristicPills logic untouched.

Verified: lint clean, 628/628 unit tests passing, build clean
(AnalysisResults chunk 255 KB / 63 KB gz; index chunk 323 KB / 97 KB
gz — both stable vs PR 5).

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
---
 apps/ui/src/components/AnalysisResults.tsx | 308 ++++++++++-----------
 1 file changed, 154 insertions(+), 154 deletions(-)

diff --git a/apps/ui/src/components/AnalysisResults.tsx b/apps/ui/src/components/AnalysisResults.tsx
index 56c9a528..a5a3d33d 100644
--- a/apps/ui/src/components/AnalysisResults.tsx
+++ b/apps/ui/src/components/AnalysisResults.tsx
@@ -38,6 +38,7 @@ import {
   StatusBadge,
   TokenBadgeList,
 } from './MeasurementPrimitives';
+import { Button, DeviceRack, MetricTile, SectionHeader } from './ui';
 import { PhaseSourceBadge } from './PhaseSourceBadge';
 import { StickyNav, type StickyNavSection } from './StickyNav';
 import { CitationBlock, CitationHeadline } from './CitationBlock';
@@ -840,176 +841,175 @@ export function AnalysisResults({
       data-testid="analysis-results-root"
       className="space-y-12"
     >
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-6 border-b border-border relative">
-        <div>
-          <h1
-            data-text-role="page-title"
-            className={textRoleClassName('page-title', 'flex items-center')}
-          >
-            <Activity className="w-6 h-6 mr-3 text-accent" />
-            {formatDisplayText('Analysis Results', 'title')}
-          </h1>
-          {headerSubtitle && (
-            <p
-              data-text-role="meta"
-              className={textRoleClassName('meta', 'mt-1 opacity-70')}
-              data-testid="analysis-results-subtitle"
-            >
-              {headerSubtitle}
-            </p>
-          )}
-        </div>
-        <div className="flex items-center gap-3">
-          <button
-            onClick={handleExportJSON}
-            data-testid="analysis-export-json"
-            className="flex items-center gap-2 px-4 py-2 bg-bg-panel border border-border rounded text-xs font-mono uppercase tracking-wider hover:bg-bg-card-hover hover:border-accent/50 transition-all group"
-          >
-            <FileJson className="w-3 h-3 text-text-secondary group-hover:text-accent" />
-            <span>Download data</span>
-          </button>
-          <button
-            onClick={handleExportMD}
-            data-testid="analysis-export-markdown"
-            className="flex items-center gap-2 px-4 py-2 bg-accent/10 border border-accent/50 text-accent rounded text-xs font-mono uppercase tracking-wider hover:bg-accent/20 transition-all shadow-[0_0_10px_rgba(255,85,0,0.1)]"
+      <div className="flex flex-col gap-2 pb-6 border-b border-border relative">
+        <SectionHeader
+          size="lg"
+          variant="inline"
+          eyebrow="ASA Results"
+          titleRole="page-title"
+          ledTone="accent"
+          title={formatDisplayText('Analysis Results', 'title')}
+          action={
+            <>
+              <Button
+                variant="secondary"
+                size="md"
+                leadingIcon={<FileJson className="w-3 h-3" />}
+                onClick={handleExportJSON}
+                data-testid="analysis-export-json"
+              >
+                Download data
+              </Button>
+              <Button
+                variant="primary"
+                size="md"
+                leadingIcon={<FileText className="w-3 h-3" />}
+                onClick={handleExportMD}
+                data-testid="analysis-export-markdown"
+              >
+                Download report
+              </Button>
+            </>
+          }
+        />
+        {headerSubtitle && (
+          <p
+            data-text-role="meta"
+            data-testid="analysis-results-subtitle"
+            className={textRoleClassName('meta', 'opacity-70 pl-4')}
           >
-            <FileText className="w-3 h-3" />
-            <span>Download report</span>
-          </button>
-        </div>
+            {headerSubtitle}
+          </p>
+        )}
       </div>
 
       <StickyNav sections={navSections} />
 
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-        {/* TEMPO */}
-        <AccentMetricCard
-          label={
-            <span className="flex items-center gap-1.5">
-              <Activity className="w-3.5 h-3.5 text-accent/60" />
-              <span>TEMPO</span>
-            </span>
-          }
-          value={finalBpm}
-          unit="BPM"
-          headerRight={<PhaseSourceBadge source="measured" />}
-          footer={
-            <div className="space-y-2">
-              {/* Audit Finding #4: `SCORE 0.86` badge retired in favor of the
-                  canonical band pill — same vocabulary as Key, Character, and
-                  every other confidence surface. */}
-              <ConfidenceBandBadge variant="compact" confidence={phase1.bpmConfidence} />
-              {phase1.bpmSource && (
-                <span className="block text-[8px] font-mono uppercase tracking-wide text-text-secondary/50">
-                  {phase1.bpmSource.replace(/_/g, ' ')}
-                </span>
-              )}
-            </div>
-          }
-        />
-
-        {/* KEY SIG */}
-        <AccentMetricCard
-          label={
-            <span className="flex items-center gap-1.5">
-              <Music className="w-3.5 h-3.5 text-accent/60" />
-              <span>KEY SIG</span>
-            </span>
-          }
-          value={<span className="truncate block">{finalKey}</span>}
-          headerRight={
-            <div className="flex items-center gap-1">
-              <PhaseSourceBadge source="measured" />
-              {lowConfidenceIndicator(keyIsApproximate)}
-            </div>
-          }
-          footer={
-            <div className="space-y-1.5">
-              <MetricBar
-                value={phase1.keyConfidence}
-                color="var(--color-accent)"
-                glow
-              />
-              {/* Audit Finding #4: `CONF 62%` text replaced with the canonical
-                  band pill so every confidence reads in the same vocabulary. */}
-              <ConfidenceBandBadge variant="compact" confidence={phase1.keyConfidence} />
-            </div>
-          }
-        />
-
-        {/* METER */}
-        <AccentMetricCard
-          label={
-            <span className="flex items-center gap-1.5">
-              <Clock className="w-3.5 h-3.5 text-accent/60" />
-              <span>METER</span>
-            </span>
-          }
-          value={phase1.timeSignature}
-          footer={<StatusBadge label={meterStatusLabel(phase1)} tone="muted" compact />}
-        />
-
-        {/* CHARACTER — genre primary, characteristic pills secondary */}
-        {phase1.genreDetail ? (
-          <AccentMetricCard
-            label={
-              <span className="flex items-center gap-1.5">
-                <Disc className="w-3.5 h-3.5 text-accent/60" />
-                <span>CHARACTER</span>
-              </span>
-            }
-            value={<span className="truncate block capitalize text-[1.5rem]">{phase1.genreDetail.genre}</span>}
+      <DeviceRack name="Measurement Summary" density="dense" status="success">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          {/* TEMPO */}
+          <MetricTile
+            size="lg"
+            accent="accent"
+            icon={<Activity className="w-3.5 h-3.5 text-accent/60" />}
+            label="TEMPO"
+            value={finalBpm}
+            unit="BPM"
             headerRight={<PhaseSourceBadge source="measured" />}
             footer={
               <div className="space-y-2">
-                <TokenBadgeList
-                  items={[
-                    { label: phase1.genreDetail.genreFamily, tone: 'accent' },
-                    ...(phase1.genreDetail.secondaryGenre
-                      ? [{ label: phase1.genreDetail.secondaryGenre, tone: 'muted' as const }]
-                      : []),
-                  ]}
-                />
+                {/* Audit Finding #4: `SCORE 0.86` badge retired in favor of the
+                    canonical band pill — same vocabulary as Key, Character, and
+                    every other confidence surface. */}
+                <ConfidenceBandBadge variant="compact" confidence={phase1.bpmConfidence} />
+                {phase1.bpmSource && (
+                  <span className="block text-[8px] font-mono uppercase tracking-wide text-text-secondary/50">
+                    {phase1.bpmSource.replace(/_/g, ' ')}
+                  </span>
+                )}
+              </div>
+            }
+          />
+
+          {/* KEY SIG */}
+          <MetricTile
+            size="lg"
+            accent="accent"
+            icon={<Music className="w-3.5 h-3.5 text-accent/60" />}
+            label="KEY SIG"
+            value={<span className="truncate block">{finalKey}</span>}
+            headerRight={
+              <div className="flex items-center gap-1">
+                <PhaseSourceBadge source="measured" />
+                {lowConfidenceIndicator(keyIsApproximate)}
+              </div>
+            }
+            footer={
+              <div className="space-y-1.5">
                 <MetricBar
-                  value={phase1.genreDetail.confidence}
+                  value={phase1.keyConfidence}
                   color="var(--color-accent)"
                   glow
                 />
-                {/* Audit Finding #4: `CONF X%` replaced with the canonical
-                    band pill — same vocabulary across every confidence. */}
-                <ConfidenceBandBadge
-                  variant="compact"
-                  confidence={phase1.genreDetail.confidence}
-                />
+                {/* Audit Finding #4: `CONF 62%` text replaced with the canonical
+                    band pill so every confidence reads in the same vocabulary. */}
+                <ConfidenceBandBadge variant="compact" confidence={phase1.keyConfidence} />
               </div>
             }
           />
-        ) : (
-          <AccentMetricCard
-            label={
-              <span className="flex items-center gap-1.5">
-                <Disc className="w-3.5 h-3.5 text-accent/60" />
-                <span>CHARACTER</span>
-              </span>
-            }
-            value={<span className="text-base font-mono uppercase tracking-wide text-text-secondary/60">SCANNING...</span>}
-            footer={
-              characteristicPills.length > 0 ? (
-                <div className="w-full flex flex-wrap gap-1">
-                  {characteristicPills.map((item, idx) => (
-                    <span
-                      key={`${item.name}-${idx}`}
-                      className={`inline-flex items-center px-2 py-1 rounded-sm border text-[9px] font-mono uppercase tracking-wide ${characteristicPillClass(item.confidence)}`}
-                    >
-                      {shortenCharacteristicName(item.name)}
-                    </span>
-                  ))}
-                </div>
-              ) : undefined
-            }
+
+          {/* METER */}
+          <MetricTile
+            size="lg"
+            accent="accent"
+            icon={<Clock className="w-3.5 h-3.5 text-accent/60" />}
+            label="METER"
+            value={phase1.timeSignature}
+            footer={<StatusBadge label={meterStatusLabel(phase1)} tone="muted" compact />}
           />
-        )}
-      </div>
+
+          {/* CHARACTER — genre primary, characteristic pills secondary */}
+          {phase1.genreDetail ? (
+            <MetricTile
+              size="lg"
+              accent="accent"
+              icon={<Disc className="w-3.5 h-3.5 text-accent/60" />}
+              label="CHARACTER"
+              value={<span className="truncate block capitalize">{phase1.genreDetail.genre}</span>}
+              headerRight={<PhaseSourceBadge source="measured" />}
+              footer={
+                <div className="space-y-2">
+                  <TokenBadgeList
+                    items={[
+                      { label: phase1.genreDetail.genreFamily, tone: 'accent' },
+                      ...(phase1.genreDetail.secondaryGenre
+                        ? [{ label: phase1.genreDetail.secondaryGenre, tone: 'muted' as const }]
+                        : []),
+                    ]}
+                  />
+                  <MetricBar
+                    value={phase1.genreDetail.confidence}
+                    color="var(--color-accent)"
+                    glow
+                  />
+                  {/* Audit Finding #4: `CONF X%` replaced with the canonical
+                      band pill — same vocabulary across every confidence. */}
+                  <ConfidenceBandBadge
+                    variant="compact"
+                    confidence={phase1.genreDetail.confidence}
+                  />
+                </div>
+              }
+            />
+          ) : (
+            <MetricTile
+              size="lg"
+              accent="accent"
+              icon={<Disc className="w-3.5 h-3.5 text-accent/60" />}
+              label="CHARACTER"
+              value={
+                <span className="text-base font-mono uppercase tracking-wide text-text-secondary/60">
+                  SCANNING...
+                </span>
+              }
+              footer={
+                characteristicPills.length > 0 ? (
+                  <div className="w-full flex flex-wrap gap-1">
+                    {characteristicPills.map((item, idx) => (
+                      <span
+                        key={`${item.name}-${idx}`}
+                        className={`inline-flex items-center px-2 py-1 rounded-sm border text-[9px] font-mono uppercase tracking-wide ${characteristicPillClass(item.confidence)}`}
+                      >
+                        {shortenCharacteristicName(item.name)}
+                      </span>
+                    ))}
+                  </div>
+                ) : undefined
+              }
+            />
+          )}
+        </div>
+      </DeviceRack>
 
       {/* Audit Finding #1: MeasurementDashboard was here at the top of the
           results scroll, ahead of Style / Sonic Elements / Mix Chain / Patches.