feat(ui): D.5c migrate Patches per-group sections to DeviceRack

[slittycode]

Summary

PR 8 of 16 in the UI consistency overhaul / Live 12 restyle stack. Patches section follows the Mix Chain (D.5b / #73) shape — each processing-stage group becomes a <DeviceRack>; the progress badge becomes a <Pill>.

Migration

• Per-group <section> + <h3> heading → <DeviceRack name={emoji+group.name}>.
• patches-applied-progress: hand-rolled <span> → <Pill tone="success" size="sm">. data-testid preserved.

Bug fix bundled — JSX fragment for the name prop

Carried over from D.5b: the name prop is now a JSX fragment instead of a template literal. groupIcon('BASS PROCESSING') returns an <AudioWaveform> SVG node; template-literal interpolation stringifies it to "[object Object]" — visually broken in production AND a hidden test regression that #73 narrowly avoided because the Patches section still rendered the raw <h3> with the SVG, satisfying analysisResultsUi.test.ts:448's /lucide-audio-waveform[\s\S]{0,200}BASS PROCESSING/ regex via Patches alone. Migrating Patches in this PR would have removed the last unbroken match site and failed the test — so both Mix Chain and Patches now use the JSX-fragment form and the SVG renders in both groups as intended.

Deferred (same scope as D.5b)

• Per-card <div> outer wrapper NOT migrated to <Panel>. The card has rich state-dependent styling (bg-bg-card hover, conditional border-l-2 for applied, overflow-hidden) that would need Panel extensions.
• AppliedCheckbox NOT migrated to Radix Checkbox primitive (would change green→orange palette; existing button has equivalent a11y).

Preserved verbatim

• data-testids: patches-applied-progress, applied-checkbox, patch-headline-*, citation-row-*.
• Visible text: group names + emojis/SVG, "applied", "Sources", "Transcription-derived", etc.
• The exact grid gap-4 grid-cols-1 sm:grid-cols-2 className (now appears in both Mix Chain and Patches racks; ≥2 occurrences per analysisResultsUi.test.ts:440).
• All data-text-role attributes.
• CitationBlock + CitationHeadline internals.

Test plan

• npm run lint — clean
• npm run test:unit — 628/628 passing (including analysisResultsUi.test.ts which now correctly asserts both the grid className AND the lucide-audio-waveform SVG class for BASS PROCESSING)
• npm run build — clean (AnalysisResults chunk 254 KB / 63 KB gz)
• npm run test:smoke — sandbox blocks Playwright browser; selectors on text + data-testid preserved
• Manual: confirm each Patches group (DRUM/BASS/SYNTH/MID/HIGH-END/MASTER) renders as a racked device with title strip showing emoji-or-SVG + uppercase group name

Up next (PR 9)

D.5d Sonic Elements + remaining sections. Section headers → <SectionHeader variant="underline">. Section wrappers → <DeviceRack>. Preserve data-testid="measurements-section" and similar.

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe

---

Generated by Claude Code

[slittycode]

Verdict: APPROVE

Summary

Pure UI refactor on one file. Patches per-group sections migrate from <section> + <h3> to DeviceRack, matching the D.5b Mix Chain shape. Also retroactively fixes D.5b's template-literal bug for Mix Chain groups (where groupIcon() returns an SVG node and template-literal coercion stringified it to "[object Object]"). The JSX fragment fix is correct. data-testids, visible text, and the grid gap-4 grid-cols-1 sm:grid-cols-2 className that the test suite counts are all preserved.

Findings

No blocking or should-fix findings.

Worth considering: the <Pill tone="success" size="sm"> swap changes the visual styling from the hand-rolled text-[10px] font-mono uppercase tracking-wide text-success border border-success/30 bg-success/10 px-2 py-1 rounded span. Functionally identical for the test suite (testid preserved), but if the Pill component's success tone renders a meaningfully different palette or size, the manual verification step in the test plan is where that shows up. Not a code issue — just noting it's a visual delta the description doesn't enumerate.

Test results

628 / 628 pass. 49 test files. Lint (tsc --noEmit) clean. Verified locally on the PR HEAD (73d9428).

Phase boundary check

Clean. No Phase 1, Phase 2, or Phase 3 measurement logic touched.

---

Generated by Claude Code