feat(ui): D.4 migrate FileUpload + Input Source to ui/ primitives

[slittycode]

Summary

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

Stacked on #67 (D.3 SignalChain). Base will be retargeted to main after #66 → #67 → this PR 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 tests/smoke/responsive-layout.spec.ts.
• Remove File icon button: replaced with <Button variant="ghost" iconOnly size="sm">.
• Dropzone container kept as a raw <div> — its drag-event handlers + three-way background-tint state are denser than Panel currently supports.

App.tsx — Input Source panel

• Outer wrapper at :1018-1027: hand-rolled header + body → <DeviceRack name="Input Source" status={audioFile ? (isAnalyzing ? 'active' : 'success') : 'idle'}>. Preserved data-testid="input-panel".
• Collapsed-summary buttons (Analyze new file + Adjust settings) and the "Hide" button: <Button variant="secondary">.
• STEM PITCH/NOTE TRANSLATION + AI INTERPRETATION toggles: native <input type="checkbox"> → 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. ARIA labels preserved so smoke selectors continue to resolve. onCheckedChange wraps Radix's CheckedState (true | false | 'indeterminate') with a strict === true check before setting the boolean state.
• Run Analysis CTA: motion.button → <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.

Pre-flight decisions honored

• Two native <select> at :984-998 and :1191-1204 stayed native (already restyled with appearance-none).
• Radix Checkbox, not Switch, for the analysis options.
• TooltipProvider not mounted yet — no Tooltip consumers in this PR; will land in a later PR when the first one ships.

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.
• Audit findings: N9 collapse, N9 re-expand banner, Codex/backend upload hardening #11 no CPU meter, [codex] Prepare hosted runtime foundation #6 readout placement — all untouched.

Test plan

• npm run lint — clean
• npm run test:unit — 605/605 passing (PR 4's new 23 helper tests will land via rebase once feat(ui): D.3 AnalysisStatusPanel → SignalChain (marquee transformation) #67 merges)
• npm run build — clean (index chunk 323 KB / 97 KB gz; comparable to PR 4 — primitive imports amortized across consumers)
• npm run test:smoke — sandbox network blocks Playwright browser; smoke selectors target text + data-testid + ARIA labels which are all preserved
• Manual: drag-drop a file, toggle both checkboxes, click Run Analysis, confirm the rack lights up active during analysis and turns success after; verify Load Demo Track works; verify the collapsed summary appears after analysis completes

Up next (PR 6)

D.5a Results header + metric strip. AnalysisResults.tsx:835-1019 — header → <SectionHeader size="lg" eyebrow="ASA RESULTS" titleRole="page-title"> with Download buttons in the action slot. 4-card row (TEMPO/KEY/METER/CHARACTER at :886-1011) → 4 × <MetricTile size="lg"> inside <DeviceRack name="MEASUREMENT SUMMARY" density="dense">.

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe

---

Generated by Claude Code

[slittycode]

Verdict: APPROVE

Summary

Pure UI migration: FileUpload.tsx and the Input Source section of App.tsx swap hand-rolled divs/buttons/inputs for DeviceRack, Button, Checkbox, Panel, and Pill primitives. No Phase 1 schema touched, no Phase 2/3 logic involved. Unit test suite passes clean (622 passed, 4 skipped).

Findings

Should fix

• App.tsx:9 imports Panel but never uses it — Panel only appears in FileUpload.tsx. Dead import; drop it from the App.tsx destructure.

Worth considering

• motion.button → Button on Run Analysis (App.tsx:~1244) silently drops the framer-motion whileHover={{ scale: 1.02 }} / whileTap={{ scale: 0.98 }} micro-animations. The new Button uses CSS transition-colors only. Not a bug — the primitive doesn't carry motion deps by design — but if the scale feel was intentional UX it's now gone.

• Remove File button (FileUpload.tsx:~185): old button had group-hover/btn:text-error turning the X icon red on hover. New Button variant="ghost" resolves to hover:text-text-primary. The icon no longer reddens on hover. Minor visual regression unless the ghost variant is intentionally neutral here.

Test results

622 passed, 4 skipped. No failures.

Phase boundary check

Clean. Both changed files are UI layer only. No analyze.py, no types.ts, no phase2*, no schema fields added, removed, or renamed.

---

Generated by Claude Code