From fb5edcacf355492ba4c931e281b2e4f0eb45a527 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 22:44:36 +0000
Subject: [PATCH 1/3] feat(ui): D.4 migrate FileUpload + Input Source to ui/
 primitives
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR 5 of 16 in the UI consistency overhaul. The Input Source panel
becomes a <DeviceRack name="Input Source">; the analysis-option
toggles become Radix Checkboxes; the Run Analysis CTA becomes a
<Button variant="primary" ledIndicator>; the loaded-file card becomes
a <Panel variant="surface">.

Stacked on PR #67 (D.3 SignalChain). Branch will be rebased onto main
once #66 → #67 → PR 5 merge in order.

FileUpload.tsx:
- Loaded file card: replaced the hand-rolled bg-bg-card border div
  with <Panel variant="surface" padding="md">. Accent stripe + file
  icon + name + ready-dot + size-warning preserved verbatim.
- Format chips (MP3/WAV/FLAC/AIFF): replaced inline span chips with
  <Pill tone="neutral" variant="outline" size="xs">. Visual parity.
- "Load Demo Track" <button>: replaced with <Button variant="secondary"
  size="md">. Behavior + text preserved verbatim for the smoke test
  selector (tests/smoke/responsive-layout.spec.ts asserts the text).
- Remove File icon button: replaced with <Button variant="ghost"
  iconOnly size="sm">.
- Dropzone container kept as raw div — its drag-event handlers and
  conditional background-tint state are denser than Panel currently
  supports, and shimming Panel to accept onDragOver/Leave/Drop +
  three-way tint logic just to wrap one site would add API surface
  for one consumer.

App.tsx — Input Source panel:
- Outer wrapper at :1018-1027: hand-rolled bg-bg-surface-dark header
  + bg-bg-card body → <DeviceRack name="Input Source"
  status={audioFile ? (isAnalyzing ? 'active' : 'success') : 'idle'}>.
  Preserved data-testid="input-panel".
- Collapsed-summary buttons (Analyze new file + Adjust settings):
  swapped from inline <button> bg-bg-panel borders to <Button
  variant="secondary">.
- "Editing analysis settings" Hide button: <Button variant="secondary"
  size="sm">.
- STEM PITCH/NOTE TRANSLATION toggle: replaced <input type="checkbox">
  with Radix <Checkbox> (via the ui/ wrapper). Outer card label kept
  for the click-anywhere-on-card UX; htmlFor binds the label to the
  checkbox id. Preserved aria-label="PITCH/NOTE TRANSLATION" so the
  smoke selectors continue to resolve.
- AI INTERPRETATION toggle: same treatment. Preserved
  data-testid="phase2-status-inline" and aria-label="AI INTERPRETATION".
- Run Analysis CTA: replaced the motion.button with <Button
  variant="primary" size="lg" ledIndicator leadingIcon={<Play>}>.
  The Button primitive already encodes the bg-bg-panel +
  border-accent/60 + glow hover + ledIndicator pulse that the
  inline motion.button was hand-rolling. Text "Run Analysis"
  preserved verbatim for tests/smoke/upload-phase1.spec.ts.
- Removed the explicit `<X />` import from lucide-react remains used
  by other call sites in App.tsx; left intact.
- Removed unused motion.button (motion is still used elsewhere in the
  file; the import stays).

Pre-flight decisions honored:
- Two native <select> at :984-998 (phase2-model-desktop) and
  :1191-1204 (phase2-model-mobile) stayed native — they were already
  restyled with appearance-none and don't need migration.
- Radix Checkbox, not Switch, for the analysis options (selection
  metaphor, not on/off feature flag).
- TooltipProvider not mounted yet — no Tooltip consumers in this PR.

Preserved verbatim:
- All data-testid attributes (input-panel, input-panel-collapsed,
  phase2-status-badge, phase2-status-inline).
- All visible text strings: "Input Source", "Drop Audio Here",
  "Load Demo Track", "Run Analysis", "↺ Analyze new file",
  "Adjust settings", "Hide", "STEM PITCH/NOTE TRANSLATION",
  "AI INTERPRETATION", "Ready", "Estimated local analysis".
- All ARIA labels (PITCH/NOTE TRANSLATION, AI INTERPRETATION,
  ANALYSIS MODE, Interpretation model).
- Behavior: onCheckedChange wraps Radix's CheckedState ('true' |
  'false' | 'indeterminate') with a strict `=== true` check before
  setting the boolean state, preserving the existing semantics.
- Audit findings (N9 collapse, N9 re-expand banner, #11 no CPU
  meter, #6 readout placement) untouched.

Verified: lint clean, 605/605 unit tests passing, build clean
(index chunk 323 KB / 97 KB gz; comparable to PR 4 — primitive
imports are now amortized across consumers).

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
---
 apps/ui/src/App.tsx                   |  74 +++++++++----------
 apps/ui/src/components/FileUpload.tsx | 100 ++++++++++++++------------
 2 files changed, 94 insertions(+), 80 deletions(-)

diff --git a/apps/ui/src/App.tsx b/apps/ui/src/App.tsx
index 4859d781..fa553aaf 100644
--- a/apps/ui/src/App.tsx
+++ b/apps/ui/src/App.tsx
@@ -6,6 +6,7 @@ import { AnalysisStatusPanel } from './components/AnalysisStatusPanel';
 import { DiagnosticLog } from './components/DiagnosticLog';
 import { FileUpload } from './components/FileUpload';
 import { WaveformPlayer } from './components/WaveformPlayer';
+import { Button, Checkbox, DeviceRack, Panel } from './components/ui';
 // Audit Finding #5: IdleValuePropPanel now occupies the Signal Monitor area
 // when no file is selected. It tells the producer what ASA does and what to
 // expect in 30s / 5min.
@@ -1016,14 +1017,13 @@ export default function App() {
           <main className="space-y-5">
             <section className="grid grid-cols-1 lg:grid-cols-12 gap-3 md:gap-4">
               <div className="lg:col-span-4 flex flex-col gap-4">
-                <div className="flex flex-col">
-                  <div className="bg-bg-surface-dark border border-border border-b-0 rounded-t-sm px-3 py-1.5 flex items-center">
-                    <span className="w-2 h-2 bg-accent rounded-full mr-2"></span>
-                    <h3 className="text-[10px] font-mono text-text-secondary uppercase tracking-wider">Input Source</h3>
-                  </div>
+                <DeviceRack
+                  name="Input Source"
+                  status={audioFile ? (isAnalyzing ? 'active' : 'success') : 'idle'}
+                >
                   <div
                     data-testid="input-panel"
-                    className="bg-bg-card border border-border rounded-b-sm p-4 flex flex-col min-h-[220px]"
+                    className="flex flex-col min-h-[220px]"
                   >
                     {showInputCollapsed && audioFile ? (
                       // Audit N9: compact post-analysis summary. Replaces the
@@ -1054,20 +1054,21 @@ export default function App() {
                           </p>
                         </div>
                         <div className="flex items-center gap-2">
-                          <button
-                            type="button"
+                          <Button
+                            variant="secondary"
+                            size="md"
                             onClick={handleFileClear}
-                            className="flex-1 text-[10px] font-mono uppercase tracking-wider text-text-secondary border border-border bg-bg-panel hover:border-accent/40 hover:text-text-primary px-2 py-2 rounded-sm transition-colors"
+                            className="flex-1"
                           >
                             ↺ Analyze new file
-                          </button>
-                          <button
-                            type="button"
+                          </Button>
+                          <Button
+                            variant="secondary"
+                            size="md"
                             onClick={() => setInputManuallyExpanded(true)}
-                            className="text-[10px] font-mono uppercase tracking-wider text-text-secondary border border-border bg-bg-panel hover:border-accent/40 hover:text-text-primary px-2 py-2 rounded-sm transition-colors"
                           >
                             Adjust settings
-                          </button>
+                          </Button>
                         </div>
                       </div>
                     ) : (
@@ -1079,13 +1080,13 @@ export default function App() {
                             <p className="text-[10px] font-mono uppercase tracking-wider text-text-secondary">
                               Editing analysis settings
                             </p>
-                            <button
-                              type="button"
+                            <Button
+                              variant="secondary"
+                              size="sm"
                               onClick={() => setInputManuallyExpanded(false)}
-                              className="text-[10px] font-mono uppercase tracking-wider text-text-secondary border border-border bg-bg-panel hover:border-accent/40 hover:text-text-primary px-2 py-1 rounded-sm transition-colors"
                             >
                               Hide
-                            </button>
+                            </Button>
                           </div>
                         )}
                     <FileUpload
@@ -1121,20 +1122,21 @@ export default function App() {
                       </div>
                     </div>
                     <label
-                      className={`mt-4 rounded-sm border px-3 py-3 transition-colors cursor-pointer ${
+                      htmlFor="pitch-note-toggle"
+                      className={`mt-4 rounded-sm border px-3 py-3 transition-colors cursor-pointer block ${
                         pitchNoteTranslationRequested
                           ? 'border-accent bg-accent/10 text-accent'
                           : 'border-border bg-bg-panel text-text-secondary'
                       } ${isAnalyzing ? 'opacity-50 cursor-not-allowed' : ''}`}
                     >
                       <div className="flex items-start gap-3">
-                        <input
-                          type="checkbox"
+                        <Checkbox
+                          id="pitch-note-toggle"
                           checked={pitchNoteTranslationRequested}
-                          onChange={(e) => setPitchNoteTranslationRequested(e.target.checked)}
+                          onCheckedChange={(checked) => setPitchNoteTranslationRequested(checked === true)}
                           disabled={isAnalyzing}
                           aria-label="PITCH/NOTE TRANSLATION"
-                          className="mt-0.5 h-4 w-4 accent-accent"
+                          className="mt-0.5"
                         />
                         <div className="space-y-1">
                           <p className="text-[10px] font-mono uppercase tracking-wider">STEM PITCH/NOTE TRANSLATION</p>
@@ -1146,20 +1148,21 @@ export default function App() {
                       </div>
                     </label>
                     <label
-                      className={`mt-3 rounded-sm border px-3 py-3 transition-colors cursor-pointer ${
+                      htmlFor="interpretation-toggle"
+                      className={`mt-3 rounded-sm border px-3 py-3 transition-colors cursor-pointer block ${
                         interpretationRequested && phase2ConfigEnabled
                           ? 'border-accent bg-accent/10 text-accent'
                           : 'border-border bg-bg-panel text-text-secondary'
                       } ${isAnalyzing || !phase2ConfigEnabled ? 'opacity-50 cursor-not-allowed' : ''}`}
                     >
                       <div className="flex items-start gap-3">
-                        <input
-                          type="checkbox"
+                        <Checkbox
+                          id="interpretation-toggle"
                           checked={interpretationRequested}
-                          onChange={(e) => handleInterpretationRequestedChange(e.target.checked)}
+                          onCheckedChange={(checked) => handleInterpretationRequestedChange(checked === true)}
                           disabled={isAnalyzing || !phase2ConfigEnabled}
                           aria-label="AI INTERPRETATION"
-                          className="mt-0.5 h-4 w-4 accent-accent"
+                          className="mt-0.5"
                         />
                         <div className="space-y-1">
                           <div className="flex flex-wrap items-center gap-2">
@@ -1238,25 +1241,24 @@ export default function App() {
                           transition={{ duration: 0.3, ease: 'easeOut', delay: 0.1 }}
                           className="mt-4 flex justify-end"
                         >
-                          <motion.button
+                          <Button
+                            variant="primary"
+                            size="lg"
+                            ledIndicator
+                            leadingIcon={<Play className="w-3 h-3 fill-current" />}
                             onClick={handleStartAnalysis}
                             disabled={isAnalyzeDisabled}
-                            whileHover={isAnalyzeDisabled ? {} : { scale: 1.02 }}
-                            whileTap={isAnalyzeDisabled ? {} : { scale: 0.98 }}
-                            className="group relative bg-bg-panel border border-accent/60 hover:bg-accent hover:border-accent text-accent hover:text-bg-app shadow-[0_0_10px_rgba(255,136,0,0.15)] hover:shadow-[0_0_18px_rgba(255,136,0,0.4)] disabled:opacity-40 disabled:shadow-none disabled:border-border disabled:text-text-secondary disabled:cursor-not-allowed font-bold py-2.5 px-7 rounded-sm flex items-center transition-all duration-200 uppercase tracking-wider font-mono text-xs"
                             title={estimateWrongService ? 'Point the UI at the Sonic Analyzer backend to enable analysis.' : undefined}
                           >
-                            <span className="w-1.5 h-1.5 rounded-full bg-accent group-hover:bg-bg-app/50 group-disabled:bg-border mr-3 animate-pulse" />
-                            <Play className="w-3 h-3 mr-2 fill-current" />
                             Run Analysis
-                          </motion.button>
+                          </Button>
                         </motion.div>
                       </>
                     )}
                       </>
                     )}
                   </div>
-                </div>
+                </DeviceRack>
               </div>
 
               <div className="lg:col-span-8 flex flex-col">
diff --git a/apps/ui/src/components/FileUpload.tsx b/apps/ui/src/components/FileUpload.tsx
index 8b8fc26a..da9e3a1a 100644
--- a/apps/ui/src/components/FileUpload.tsx
+++ b/apps/ui/src/components/FileUpload.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { UploadCloud, FileAudio, X, AlertTriangle } from 'lucide-react';
 
 import { isSupportedAudioFile } from '../services/audioFile';
+import { Button, Panel, Pill } from './ui';
 
 interface FileUploadProps {
   onFileSelect: (file: File) => void;
@@ -139,24 +140,26 @@ export function FileUpload({
           </div>
           <p className="text-sm font-bold mb-1 tracking-wide text-text-primary">Drop Audio Here</p>
           <p className="text-[10px] text-text-secondary font-mono uppercase tracking-wider">or click to browse</p>
-          <div className="mt-4 flex gap-2">
-             {['MP3', 'WAV', 'FLAC', 'AIFF'].map(fmt => (
-               <span key={fmt} className="text-[9px] font-mono text-text-secondary border border-border px-1.5 py-0.5 rounded-sm bg-bg-panel opacity-60">
-                 {fmt}
-               </span>
-             ))}
+          <div className="mt-4 flex gap-1.5">
+            {['MP3', 'WAV', 'FLAC', 'AIFF'].map((fmt) => (
+              <Pill key={fmt} tone="neutral" variant="outline" size="xs">
+                {fmt}
+              </Pill>
+            ))}
+          </div>
+          <div className="mt-4">
+            <Button
+              variant="secondary"
+              size="md"
+              onClick={(event) => {
+                event.stopPropagation();
+                void onLoadDemoTrack();
+              }}
+              disabled={isLoading || isDemoLoading}
+            >
+              {isDemoLoading ? 'Loading Demo...' : 'Load Demo Track'}
+            </Button>
           </div>
-          <button
-            type="button"
-            onClick={(event) => {
-              event.stopPropagation();
-              void onLoadDemoTrack();
-            }}
-            disabled={isLoading || isDemoLoading}
-            className="mt-4 rounded-sm border border-border bg-bg-panel px-3 py-1.5 text-[10px] font-mono uppercase tracking-wider text-text-secondary transition-colors hover:border-accent/40 hover:text-accent disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {isDemoLoading ? 'Loading Demo...' : 'Load Demo Track'}
-          </button>
           {fileError && (
             <div className="mt-3 flex items-center gap-2 text-error text-[10px] font-mono uppercase tracking-wider" role="alert">
               <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
@@ -165,36 +168,45 @@ export function FileUpload({
           )}
         </div>
       ) : (
-        <div className="bg-bg-card border border-border rounded-sm p-4 flex items-center justify-between relative overflow-hidden group">
-          <div className="absolute left-0 top-0 bottom-0 w-1 bg-accent"></div>
-          <div className="flex items-center space-x-4 pl-2">
-            <div className="bg-bg-panel p-2 rounded-sm border border-border">
-              <FileAudio className="w-6 h-6 text-accent" />
-            </div>
-            <div>
-              <p className="font-bold text-sm tracking-tight truncate max-w-[200px] md:max-w-xs">{selectedFile.name}</p>
-              <p className="text-[10px] text-text-secondary font-mono uppercase tracking-wider flex items-center mt-1">
-                <span className="w-1.5 h-1.5 rounded-full bg-success mr-2"></span>
-                Ready • {(selectedFile.size / (1024 * 1024)).toFixed(2)} MB
-              </p>
-              {fileSizeWarning && (
-                <p className="text-[10px] text-warning font-mono uppercase tracking-wider flex items-center mt-1">
-                  <AlertTriangle className="w-3 h-3 shrink-0 mr-1.5" />
-                  {fileSizeWarning}
+        <Panel variant="surface" padding="md" className="relative overflow-hidden group">
+          {/* Accent stripe down the left edge — the same Live device-on
+              affordance used elsewhere. */}
+          <div className="absolute left-0 top-0 bottom-0 w-1 bg-accent" aria-hidden />
+          <div className="flex items-center justify-between gap-3 pl-2">
+            <div className="flex items-center gap-3 min-w-0">
+              <div className="bg-bg-panel p-2 rounded-sm border border-border shrink-0">
+                <FileAudio className="w-6 h-6 text-accent" />
+              </div>
+              <div className="min-w-0">
+                <p className="font-bold text-sm tracking-tight truncate max-w-[200px] md:max-w-xs">
+                  {selectedFile.name}
                 </p>
-              )}
+                <p className="text-[10px] text-text-secondary font-mono uppercase tracking-wider flex items-center mt-1">
+                  <span className="w-1.5 h-1.5 rounded-full bg-success mr-2" aria-hidden />
+                  Ready • {(selectedFile.size / (1024 * 1024)).toFixed(2)} MB
+                </p>
+                {fileSizeWarning && (
+                  <p className="text-[10px] text-warning font-mono uppercase tracking-wider flex items-center mt-1">
+                    <AlertTriangle className="w-3 h-3 shrink-0 mr-1.5" />
+                    {fileSizeWarning}
+                  </p>
+                )}
+              </div>
             </div>
+            {!isLoading && (
+              <Button
+                variant="ghost"
+                size="sm"
+                iconOnly
+                onClick={clearFile}
+                title="Remove File"
+                aria-label="Remove File"
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            )}
           </div>
-          {!isLoading && (
-            <button
-              onClick={clearFile}
-              className="p-1.5 hover:bg-bg-panel rounded-sm border border-transparent hover:border-border transition-all group/btn"
-              title="Remove File"
-            >
-              <X className="w-4 h-4 text-text-secondary group-hover/btn:text-error" />
-            </button>
-          )}
-        </div>
+        </Panel>
       )}
     </div>
   );

From d049e34e079609f94e7a7bf9e9fe5ef9b5bd9080 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 22:48:34 +0000
Subject: [PATCH 2/3] 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.

From 41436e661c137afffd6c0d20f424df65a25c56d8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 22:53:53 +0000
Subject: [PATCH 3/3] chore: normalize package-lock.json after npm install

npm install during PR review stripped redundant `"dev": true` flags from
optional platform-specific Rollup binary entries.

https://claude.ai/code/session_01EQenqavW2LS5ZTCfbogBJL
---
 apps/ui/package-lock.json | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/apps/ui/package-lock.json b/apps/ui/package-lock.json
index 52cc0bcb..1edabd73 100644
--- a/apps/ui/package-lock.json
+++ b/apps/ui/package-lock.json
@@ -362,7 +362,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -379,7 +378,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -396,7 +394,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -413,7 +410,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -430,7 +426,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -447,7 +442,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -464,7 +458,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -481,7 +474,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -498,7 +490,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -515,7 +506,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -532,7 +522,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -549,7 +538,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -566,7 +554,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -583,7 +570,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -600,7 +586,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -617,7 +602,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -634,7 +618,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -651,7 +634,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -668,7 +650,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -685,7 +666,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -702,7 +682,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -719,7 +698,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -736,7 +714,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -753,7 +730,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -770,7 +746,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -787,7 +762,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [