feat(ui): D.2 migrate SamplePlayback to ui/ primitives

[slittycode]

Summary

PR 3 of 16 in the UI consistency overhaul / Live 12 restyle stack. Worst-drift fix: kills every raw zinc-* / amber-* / emerald-* / rounded-lg / rounded-md instance in SamplePlayback.tsx (was 13 occurrences, now 0).

Rebased onto main after #65 merged. Two commits:

1. 1a7ab3f — SamplePlayback migration.
2. 28a9ac4 — Bundled fix from feat(ui): D.1 primitives complete — DeviceRack, SignalChain, MetricTile et al. #65 review: DeviceRack signal rail uses 3 explicit slots (left/center/right) so signalIn + railContent + signalOut lay out correctly when all three are present. SamplePlayback doesn't exercise this combo, but D.4 (AnalysisStatusPanel) will.

Migration

• Outer <section> → <DeviceRack name="AUDITION SAMPLES" subtitle="· Phase 3 heuristic" status={...}>. Rack status reflects panel state — error tone on failure, active while generating, success once a manifest is rendered.
• Original <h3> id-based labelling replaced by aria-label on the DeviceRack; the title strip carries the visible name.
• Regenerate <button> → <Button variant="link" size="sm"> in the title-strip action slot.
• Generate <button> → <Button variant="primary" size="md" ledIndicator> in the body.
• ManifestMeta pill spans → <Pill tone="neutral" leadingDot>.
• SampleGroup <h4> → <SectionHeader size="sm" eyebrow="Group" title={CATEGORY_LABELS[category]}>.
• SampleCard <li> rounded-md border → <Panel variant="surface" padding="md"> (wrapped in a <li> for list semantics).
• confidenceClassFor() className helper → confidenceTone() returning a Pill tone (warning for LOW / low-confidence, neutral for MED, success for HIGH).
• Code spans for cited Phase 1 field paths now use design-token colors (bg-bg-app, border-border, text-text-primary) instead of raw zinc-300/zinc-800.
• MIDI download link uses text-accent + underline instead of zinc.

DeviceRack rail fix (commit 2)

Previously, when signalIn + railContent + signalOut were all set together, both railContent and signalOut carried ml-auto. In a flex row only the first ml-auto sibling claims the available space, so signalOut collapsed against railContent instead of anchoring to the far right. Restructured as three fixed slots: a left container for signalIn, a flex-1 center for railContent, and a right-justified container for signalOut. Each slot always renders; empty when its content is absent.

Non-goals (preserved verbatim)

• No behavior changes — same callbacks, same conditional rendering, same content.
• Chain-of-custody fields (sample.cites.rationale, sample.cites.phase1Fields) are rendered identically.
• PURPOSE.md honest-uncertainty framing preserved in the description copy.
• Same backend interface, same services/sampleGenerationClient.ts calls.

Test plan

• npm run lint — clean
• npm run test:unit — 605/605 passing
• npm run build — clean
• npm run test:smoke — sandbox network blocks Playwright browser; should pass in CI as SamplePlayback text content + aria-label are preserved
• Manual: drag-drop a track, click "Generate audition samples", confirm rack lights up active during generation and turns success when manifest renders; verify confidence pills show success / neutral / warning tones; trigger an error and confirm the rack flips to error tone

Verification: drift count

$ grep -c "zinc-\|amber-\|emerald-\|rounded-lg\|rounded-md" apps/ui/src/components/SamplePlayback.tsx
0

Up next (PR 4)

D.3 AnalysisStatusPanel → SignalChain. Marquee transformation: the analysis pipeline literally renders as a horizontal Live 12 device chain.

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe

[slittycode]

Verdict: APPROVE

Summary

Pure visual restyle of SamplePlayback.tsx — raw zinc-*/amber-*/emerald-*/rounded-* Tailwind classes replaced with DeviceRack, Button, Panel, Pill, and SectionHeader primitives from the ui/ barrel. No behavior changes, no backend or type-contract changes. The PR's stated drift count (0 occurrences of the banned class patterns) checks out against the file. Chain-of-custody fields (sample.cites.rationale, sample.cites.phase1Fields) are rendered identically to the original.

Findings

Worth considering — rackStatusFor has no unit test. It's a new pure function with four branches encoding a state machine (error → active → success → idle). The codebase doesn't unit-test component helpers as a rule (no tests/services/samplePlayback.test.ts exists, and the pattern is service-layer unit tests + Playwright smoke for UI behavior), so this doesn't block — but if the smoke suite misses the error-state path, the only coverage for 'error' → rack status mapping is code review. Worth a smoke assertion on failure-path if the suite grows.

Not flagging: confidenceTone is a rename of confidenceClassFor with return type string → Tone. Logic is identical; the old function had no tests either.

Note: AnalysisResults chunk grew from 256.79 KB → 311.86 KB gz. The barrel-amortization explanation is plausible — worth a checkpoint at PR 16 to confirm the per-component cost actually normalizes.

Test results

PR reports 605/605 unit tests passing. No new tests added (test count unchanged). Smoke tests blocked by sandbox network; should run in CI. All verified prop shapes match component definitions: Button has primary/link variants; Pill has xs size; Panel has surface variant + md padding; DeviceRack spreads ...rest so aria-label propagates correctly; SectionHeader accepts size="sm" and ledTone.

Phase boundary check

Clean. No Phase 1 values re-derived or overwritten. No new fields read from or written to the measurement layer. sample.cites.phase1Fields rendering is unchanged. role="alert" preserved on error state.

---

Generated by Claude Code