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

PR 7 of 16 in the UI consistency overhaul. Mix & Master Chain groups
(DRUM PROCESSING, BASS PROCESSING, HIGH-END DETAIL, MASTER BUS) now
each render as a <DeviceRack> with the group emoji + name on the
title strip.

Branched off main (PRs #66/#67/#69/#71 squash-merged). Single-file
PR — AnalysisResults.tsx.

Migration:
- Per-group <section> + <h3> heading → <DeviceRack name={emoji +
  group.name}>. The DeviceRack title strip displays the emoji and
  uppercase group name; the DOM text content is preserved exactly so
  analysisResultsUi.test.ts:441-450 (toContain('🥁 DRUM PROCESSING')
  etc.) continue to pass.
- group.annotation <p> kept inside the rack body with
  data-text-role="meta", margin-bottom restored.
- Cards grid div retains its `grid gap-4 grid-cols-1 sm:grid-cols-2`
  className verbatim — analysisResultsUi.test.ts:440 expects ≥2
  occurrences of this exact string (Mix Chain + Patches).
- mix-chain-applied-progress badge: hand-rolled span → <Pill
  tone="success" size="sm">. Preserved data-testid="mix-chain-
  applied-progress". The Pill emits the canonical
  `bg-success/20 text-success border-success/30` class string the
  test at :507 already asserts is present in the rendered HTML.
- SourcesToggle <button> → <Button variant="link">. Used by both Mix
  Chain and other sections; small ergonomic upgrade.

Deferred (out of D.5b scope):
- Per-card <div> outer wrapper NOT migrated to <Panel variant=
  "surface">. The card carries rich state-dependent styling
  (bg-bg-card with hover transitions, conditional border-l-2 for
  applied state, overflow-hidden for collapsible) that would
  require either extensive className overrides on Panel or
  extending Panel with new variants. Per-card migration deferred
  to a focused follow-up if/when Panel needs the additional
  variants.
- AppliedCheckbox NOT migrated to the Checkbox primitive. The
  existing implementation is already a <button role="checkbox">
  with aria-checked + aria-label + data-testid + green-tinted
  applied state. Migrating to Radix Checkbox would change the
  styling palette (success-green → accent-orange) and require
  Checkbox primitive extensions (tone prop). Existing
  implementation has equivalent a11y semantics and passes the
  applied-checkbox smoke test.

Preserved verbatim:
- All data-testid attributes (mix-chain-applied-progress,
  applied-checkbox, mix-chain-citation-*, mix-chain-headline-*).
- All visible text strings (group names + emojis, "applied",
  "Sources", PRO TIP, etc.).
- The exact `grid gap-4 grid-cols-1 sm:grid-cols-2` className the
  brittle assertion locks.
- All data-text-role attributes on h2/h3/h4/p elements (section-
  title, item-title, meta, body).
- The characteristicPillClass function which produces the
  `bg-{tone}/20 text-{tone} border-{tone}/30` strings asserted at
  :507-509 — untouched.
- CitationBlock + CitationHeadline internals — untouched.
- AppliedCheckbox tracker + audioContentHash gating — untouched.

Verified: lint clean, 628/628 unit tests passing (including
analysisResultsUi.test.ts which directly asserts the preserved
class strings + text + data-text-role attributes), build clean
(AnalysisResults chunk 254 KB / 63 KB gz — slightly smaller than
PR 6 due to removed hand-rolled span styling).

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

diff --git a/apps/ui/src/components/AnalysisResults.tsx b/apps/ui/src/components/AnalysisResults.tsx
index a5a3d33d..322626fa 100644
--- a/apps/ui/src/components/AnalysisResults.tsx
+++ b/apps/ui/src/components/AnalysisResults.tsx
@@ -38,7 +38,7 @@ import {
   StatusBadge,
   TokenBadgeList,
 } from './MeasurementPrimitives';
-import { Button, DeviceRack, MetricTile, SectionHeader } from './ui';
+import { Button, DeviceRack, MetricTile, Pill, SectionHeader } from './ui';
 import { PhaseSourceBadge } from './PhaseSourceBadge';
 import { StickyNav, type StickyNavSection } from './StickyNav';
 import { CitationBlock, CitationHeadline } from './CitationBlock';
@@ -236,12 +236,14 @@ function SourcesToggle({ sources, showSources, onToggle }: { sources?: string[];
   if (!sources || sources.length === 0) return null;
   return (
     <div className="mt-3">
-      <button
+      <Button
+        variant="link"
+        size="sm"
         onClick={onToggle}
-        className="text-[10px] font-mono uppercase tracking-wide text-accent hover:text-accent/80 transition-colors flex items-center gap-1"
+        className="!text-accent hover:!text-accent/80 !normal-case !tracking-wide uppercase"
       >
         {showSources ? '▼' : '▶'} Sources
-      </button>
+      </Button>
       <Collapsible isOpen={showSources}>
         <div className="mt-2 text-xs text-text-secondary/70 font-mono">
           <span className="text-[10px] uppercase tracking-wide text-text-secondary/50">Based on:</span>
@@ -2019,12 +2021,13 @@ export function AnalysisResults({
                     available) AND at least one card has been applied —
                     avoids leading with a "0 of N" on first view. */}
                 {audioContentHash && mixAppliedCount > 0 && (
-                  <span
+                  <Pill
+                    tone="success"
+                    size="sm"
                     data-testid="mix-chain-applied-progress"
-                    className="text-[10px] font-mono uppercase tracking-wide text-success border border-success/30 bg-success/10 px-2 py-1 rounded"
                   >
                     {mixAppliedCount} of {mixCardCount} applied
-                  </span>
+                  </Pill>
                 )}
                 <span className="text-[10px] font-mono bg-accent text-bg-app px-2 py-1 rounded font-bold">SIGNAL FLOW</span>
               </div>
@@ -2035,19 +2038,32 @@ export function AnalysisResults({
             {mixGroups
               .filter((group) => group.cards.length > 0)
               .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}
+                // 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}`}
+                status="idle"
+              >
+                {/* Audit-preserved annotation paragraph kept here so
+                    data-text-role="body" presence assertions
+                    (analysisResultsUi.test.ts:474) stay green. */}
                 {group.annotation && (
-                  <p data-text-role="meta" className={textRoleClassName('meta')}>
+                  <p
+                    data-text-role="meta"
+                    className={textRoleClassName('meta', 'mb-3')}
+                  >
                     {group.annotation}
                   </p>
                 )}
 
+                {/* Keep this exact className — the brittle assertion
+                    analysisResultsUi.test.ts:440 expects at least two
+                    occurrences of `grid gap-4 grid-cols-1 sm:grid-cols-2`
+                    (Mix Chain + Patches). */}
                 <div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
                   {group.cards.map((card) => {
                     const isOpen = !!openMix[card.id];
@@ -2170,7 +2186,7 @@ export function AnalysisResults({
                     );
                   })}
                 </div>
-              </section>
+              </DeviceRack>
             ))}
           </div>
         </section>