From f8e657cc8bad6dff91705ed068ef6c3f7c3ed636 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 23:36:14 +0000
Subject: [PATCH 1/2] =?UTF-8?q?feat(ui):=20D.8=20Signal=20Monitor=20?=
 =?UTF-8?q?=E2=86=92=20DeviceRack=20+=20SpectrogramViewer=20drift=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR 12 of 16 in the UI consistency overhaul. Focused, surgical pass
over the smaller-component surface — kills the SpectrogramViewer
drift and wraps Signal Monitor in DeviceRack chrome.

Changes:
- App.tsx Signal Monitor wrapper (:1280-1290): hand-rolled
  bg-bg-surface-dark header + bg-bg-card body → <DeviceRack
  name="Signal Monitor" status={isAnalyzing ? 'active' : audioUrl
  ? 'success' : 'idle'}>. The status reflects the upstream pipeline
  (running → orange pulse, ready → green, idle → gray) — same
  vocabulary as every other rack in the migration.
- bg-bg-card preserved on the inner data-testid="signal-panel" div
  to keep the palette contract (same pattern as the Input Source
  D.4 migration).
- SpectrogramViewer.tsx:279: bg-blue-500/20 text-blue-400 border-
  blue-500/30 → bg-accent/20 text-accent border-accent/30. Kills
  the last raw-Tailwind drift the plan flagged (§F.9 grep would
  return 0 now).

Deferred (out of scope, all preserved as-is):
- IdleValuePropPanel — its VisualPlaceholder is already a clean
  three-step Audio → Measure → Live 12 flow. Wrapping in DeviceRack
  would add a redundant title strip; SignalChain doesn't match the
  visual semantic (decorative icons + labels vs racked devices +
  cables). Keep as-is.
- WaveformPlayer — the WaveformPlayer component itself is a
  WaveSurfer.js canvas; wrapping its inner viz in DeviceRack would
  conflict with the Signal Monitor rack now wrapping the whole
  signal-panel column.
- StickyNav — uses <a> elements with anchor-scroll behavior; can't
  swap to <Button> primitives without losing semantics. Outer
  chrome already uses tokens.
- DiagnosticLog, Phase2ConsistencyReport, StemListeningNotesPanel,
  StructureLanes, HarmonyLanes, ChromaHeatmap,
  SpectralEvolutionChart, MiniHeatmap, Sparkline, EQSpinner,
  PhaseSourceBadge — outer chrome already on tokens; data-viz
  internals untouched. Migration would be string-shuffling without
  visible improvement.

Preserved verbatim:
- data-testid="signal-panel" hook.
- Visible text "Signal Monitor".
- All data-testid hooks across the deferred components.

Verified: lint clean, 628/628 unit tests passing, build clean.

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
---
 apps/ui/src/App.tsx                          | 24 ++++++++++++--------
 apps/ui/src/components/SpectrogramViewer.tsx |  2 +-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/apps/ui/src/App.tsx b/apps/ui/src/App.tsx
index 0d68de5b..a6752776 100644
--- a/apps/ui/src/App.tsx
+++ b/apps/ui/src/App.tsx
@@ -1278,17 +1278,20 @@ export default function App() {
               </div>
 
               <div className="lg:col-span-8 flex flex-col">
-                <div className="bg-bg-surface-dark border border-border border-b-0 rounded-t-sm px-3 py-1.5 flex items-center justify-between">
-                  <div className="flex items-center">
-                    <span className={`w-2 h-2 rounded-full mr-2 ${isAnalyzing ? 'bg-accent animate-pulse' : audioUrl ? 'bg-success' : 'bg-border'}`}></span>
-                    <h3 className="text-[10px] font-mono text-text-secondary uppercase tracking-wider">Signal Monitor</h3>
-                  </div>
-                </div>
-
-                <div
-                  data-testid="signal-panel"
-                  className="flex-grow bg-bg-card border border-border rounded-b-sm p-4 relative flex flex-col"
+                <DeviceRack
+                  name="Signal Monitor"
+                  status={isAnalyzing ? 'active' : audioUrl ? 'success' : 'idle'}
+                  className="flex-grow flex flex-col"
                 >
+                  {/* bg-bg-card on the inner div mirrors the input-panel
+                      pattern from D.4 — the DeviceRack body is transparent
+                      by default; flatten it here so theme-shell smoke specs
+                      (if they observe signal-panel bg) keep matching the
+                      palette contract. */}
+                  <div
+                    data-testid="signal-panel"
+                    className="flex-grow bg-bg-card p-4 relative flex flex-col"
+                  >
                   {audioUrl && audioFile ? (
                     <div className="flex flex-col relative z-10 gap-4">
                       <WaveformPlayer audioUrl={audioUrl} audioFile={audioFile} onAudioElement={handleAudioElement} />
@@ -1310,6 +1313,7 @@ export default function App() {
                     <IdleValuePropPanel />
                   )}
                 </div>
+                </DeviceRack>
               </div>
             </section>
 
diff --git a/apps/ui/src/components/SpectrogramViewer.tsx b/apps/ui/src/components/SpectrogramViewer.tsx
index 656fb6d9..0c6376a3 100644
--- a/apps/ui/src/components/SpectrogramViewer.tsx
+++ b/apps/ui/src/components/SpectrogramViewer.tsx
@@ -276,7 +276,7 @@ export function SpectrogramViewer({
                 onClick={() => setActiveKind(spec.kind)}
                 className={`px-2 py-0.5 text-[10px] font-mono uppercase tracking-wide rounded-sm transition-colors ${
                   spec.kind === activeKind
-                    ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30'
+                    ? 'bg-accent/20 text-accent border border-accent/30'
                     : 'text-text-secondary hover:text-text-primary border border-transparent'
                 }`}
               >

From 2c32c12380b8a5705a6f60623e66c2efd11566be Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 23:41:08 +0000
Subject: [PATCH 2/2] fix(ui): move data-testid="signal-panel" onto DeviceRack
 outer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

tests/smoke/error-states.spec.ts:524 asserts
`signalPanel.getByText('Signal Monitor')` — the visible "Signal
Monitor" text must be inside the data-testid="signal-panel" element.
PR 12's migration put the testid on the inner body div which sits
BELOW the DeviceRack title strip (where the "Signal Monitor" text
actually renders), so the locator returned 0 matches.

Lift the data-testid onto the DeviceRack itself (which spreads ...rest
to the outer div). The testid now wraps the title strip + body; the
bg-bg-card flatten div underneath stays for the palette contract.

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
---
 apps/ui/src/App.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/ui/src/App.tsx b/apps/ui/src/App.tsx
index a6752776..8adf9fdf 100644
--- a/apps/ui/src/App.tsx
+++ b/apps/ui/src/App.tsx
@@ -1278,18 +1278,20 @@ export default function App() {
               </div>
 
               <div className="lg:col-span-8 flex flex-col">
+                {/* data-testid="signal-panel" lifted onto the DeviceRack so
+                    the testid wraps the title strip (containing the
+                    visible "Signal Monitor" text the
+                    tests/smoke/error-states.spec.ts:524 selector
+                    `signalPanel.getByText('Signal Monitor')` looks for).
+                    The inner bg-bg-card div preserves the palette
+                    contract the theme-shell smoke locks. */}
                 <DeviceRack
+                  data-testid="signal-panel"
                   name="Signal Monitor"
                   status={isAnalyzing ? 'active' : audioUrl ? 'success' : 'idle'}
                   className="flex-grow flex flex-col"
                 >
-                  {/* bg-bg-card on the inner div mirrors the input-panel
-                      pattern from D.4 — the DeviceRack body is transparent
-                      by default; flatten it here so theme-shell smoke specs
-                      (if they observe signal-panel bg) keep matching the
-                      palette contract. */}
                   <div
-                    data-testid="signal-panel"
                     className="flex-grow bg-bg-card p-4 relative flex flex-col"
                   >
                   {audioUrl && audioFile ? (