From 73d9428e5d2d9c84fa4be190a2aab0aef916ed1d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 23:22:01 +0000
Subject: [PATCH] feat(ui): D.5c migrate Patches per-group sections to
 DeviceRack
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Branched off main. Single-file PR — AnalysisResults.tsx.

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.

Also includes a bug fix 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 stringified it to "[object Object]" — visually broken
in production AND a hidden test regression that PR #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, still ≥2 occurrences
  per analysisResultsUi.test.ts:440).
- All data-text-role attributes.
- CitationBlock + CitationHeadline internals.

Verified: lint clean, 628/628 unit tests passing (including
analysisResultsUi.test.ts which now correctly asserts both the grid
className AND the lucide-audio-waveform SVG class for BASS
PROCESSING), build clean (AnalysisResults chunk 254 KB / 63 KB gz).

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

diff --git a/apps/ui/src/components/AnalysisResults.tsx b/apps/ui/src/components/AnalysisResults.tsx
index 322626fa..e6c46f81 100644
--- a/apps/ui/src/components/AnalysisResults.tsx
+++ b/apps/ui/src/components/AnalysisResults.tsx
@@ -2041,11 +2041,19 @@ export function AnalysisResults({
               <DeviceRack
                 key={group.name}
                 // The DeviceRack title strip carries the group name. The
-                // emoji from groupIcon() + the existing uppercase group.name
-                // ("DRUM PROCESSING" etc.) are preserved verbatim in the
-                // DOM text so analysisResultsUi.test.ts:441-450 selectors
-                // (toContain('🥁 DRUM PROCESSING') etc.) continue to pass.
-                name={`${groupIcon(group.name)} ${group.name}`}
+                // emoji-or-SVG from groupIcon() + uppercase group.name
+                // ("DRUM PROCESSING" etc.) are preserved verbatim so
+                // analysisResultsUi.test.ts:441-450 selectors (toContain
+                // ('🥁 DRUM PROCESSING')) AND the BASS PROCESSING test at
+                // :448 which expects a `lucide-audio-waveform` SVG class
+                // nearby both pass. The name must be a React fragment —
+                // template-literal coercion turns the AudioWaveform JSX
+                // node into "[object Object]" and the SVG is lost.
+                name={
+                  <>
+                    {groupIcon(group.name)} {group.name}
+                  </>
+                }
                 status="idle"
               >
                 {/* Audit-preserved annotation paragraph kept here so
@@ -2200,12 +2208,13 @@ export function AnalysisResults({
             rightSlot={
               <div className="flex items-center gap-2">
                 {audioContentHash && patchAppliedCount > 0 && (
-                  <span
+                  <Pill
+                    tone="success"
+                    size="sm"
                     data-testid="patches-applied-progress"
-                    className="text-[10px] font-mono uppercase tracking-wide text-success border border-success/30 bg-success/10 px-2 py-1 rounded"
                   >
                     {patchAppliedCount} of {patchCards.length} applied
-                  </span>
+                  </Pill>
                 )}
                 <Sliders className="w-4 h-4 text-accent opacity-70" />
               </div>
@@ -2218,14 +2227,23 @@ export function AnalysisResults({
               bass patch without scanning all 8 cards. */}
           <div className="space-y-4">
             {patchGroups.map((group) => (
-              <section key={group.name} className="space-y-3">
-                <h3
-                  data-text-role="meta"
-                  className={textRoleClassName('meta', 'border-b border-border/70 pb-1')}
-                >
-                  {groupIcon(group.name)} {group.name}
-                </h3>
-
+              <DeviceRack
+                key={group.name}
+                // Mirror Mix Chain's D.5b shape. JSX fragment (not template
+                // literal) so groupIcon's BASS PROCESSING return value (an
+                // <AudioWaveform> SVG) renders as a real React node — the
+                // template-literal version stringifies it to "[object
+                // Object]" and analysisResultsUi.test.ts:448 fails.
+                name={
+                  <>
+                    {groupIcon(group.name)} {group.name}
+                  </>
+                }
+                status="idle"
+              >
+                {/* Keep the exact className — analysisResultsUi.test.ts:440
+                    expects ≥2 occurrences of `grid gap-4 grid-cols-1
+                    sm:grid-cols-2` across Mix Chain + Patches. */}
                 <div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
                   {group.cards.map((patch) => {
                     const isOpen = !!openPatch[patch.id];
@@ -2342,7 +2360,7 @@ export function AnalysisResults({
                     );
                   })}
                 </div>
-              </section>
+              </DeviceRack>
             ))}
           </div>
         </section>