feat(ui): D.8 Signal Monitor → DeviceRack + SpectrogramViewer drift fix - #80
Merged
Merged
Conversation
This was referenced May 18, 2026
slittycode
added a commit
that referenced
this pull request
May 18, 2026
tests/smoke/responsive-layout.spec.ts:192 fails at the 375px mobile
viewport with `expect(getByText('Analysis Results')).toBeVisible()`
resolving to a hidden h2. Root cause: my D.5a migration replaced the
original `flex flex-col md:flex-row` layout for the Analysis Results
page header with the SectionHeader primitive which used
`flex items-center justify-between` unconditionally. At 375px the
two Download buttons (~280px combined) squeeze the title to zero
width and the parent `.ableton-shell overflow-hidden` clips the
title off-screen, so Playwright sees it as hidden.
Restore the responsive collapse: mobile-first
`flex flex-col items-start gap-2`, then `md:flex-row md:items-center
md:justify-between md:gap-3` at the 768px+ breakpoint. Matches the
pre-D.5a Analysis Results header behavior. Other consumers of
SectionHeader (the many ResultsSectionHeader call sites) have small
rightSlot content (badges, single pills, icons) — stacking those
below the title on mobile is a tiny visual improvement, not a
regression.
This is the failure that's been blocking #79, #80, #81, #82 — none
of those PRs introduced the bug; they all inherit it from main
because D.5a (#71) landed this regression. The fact that #71 itself
merged green is either CI luck (the test passed on its first run)
or the test was added later and not re-checked.
Landing this hotfix lets the four open PRs rebase and pick up the
fix to clear their CI.
Verified: lint clean, 628/628 unit tests passing, build clean.
https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
Co-authored-by: Claude <noreply@anthropic.com>
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
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
slittycode
force-pushed
the
claude/ui-restyle-pr12-smaller-components
branch
from
May 18, 2026 23:58
254829c to
2c32c12
Compare
slittycode
pushed a commit
that referenced
this pull request
May 18, 2026
PR 14 of 16 in the UI consistency overhaul. Final cleanup pass. Removes three CSS utility classes from index.css: - .ableton-panel - .ableton-device - .ableton-header All three were retired by D.* migrations — every former consumer now uses the canonical primitives from components/ui/ (Panel, DeviceRack, SectionHeader). `grep -rn` against apps/ui/src/ confirms zero remaining usages. .ableton-shell and .ableton-toolbar STAY because App.tsx:952,956 still consumes them for the outer app chrome (the load-bearing section-grid shell). A focused follow-up could migrate those two to DeviceRack / a future AppShell primitive; out of scope here. Deferred (preserved as-is): - components/MeasurementPrimitives.tsx cannot be fully deleted yet — 5 consumers still depend on timeline/lane primitives (LaneContainer, LaneRow, StatsBar, TimeRuler) that the plan explicitly preserved. The shipped primitives (StatusBadge, DeltaBadge, MetricBar, MetricBarRow, OutlinePillButton, TokenBadgeList, StyledDataTable, AccentMetricCard) also still have consumers in MeasurementDashboard and AnalysisResults sections that weren't migrated (StructureLanes, HarmonyLanes, AnalysisResults remaining sections). Keep the file intact. - components/Tooltip.tsx stays as a re-export shim; the file isn't causing any drift and external imports may still target it. Verified: lint clean, 628/628 unit tests passing, build clean. D.* migrations summary (all merged or open at time of this PR): - D.0 Foundation (#64) ✓ - D.1 Primitives complete (#65) ✓ - D.2 SamplePlayback (#66) ✓ - D.3 SignalChain marquee (#67) ✓ - D.4 FileUpload + Input Source (#69) ✓ - D.5a Results header + metric strip (#71) ✓ - D.5b Mix Chain (#73) ✓ - D.5c Patches (#74) ✓ - D.5d Section headers (#75) ✓ - D.6a Dashboard structure (#76) ✓ - D.6b Dashboard sections (#77) ✓ - D.6c Dashboard headers (#78) ✓ - D.7 SessionMusicianPanel + MixDoctorPanel (#79) — open - D.8 Signal Monitor + SpectrogramViewer drift (#80) — open - D.9 DenseDawConcept drift (#81) — open - D.10 Cleanup (this PR) ✓ https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
slittycode
added a commit
that referenced
this pull request
May 19, 2026
…82) PR 14 of 16 in the UI consistency overhaul. Final cleanup pass. Removes three CSS utility classes from index.css: - .ableton-panel - .ableton-device - .ableton-header All three were retired by D.* migrations — every former consumer now uses the canonical primitives from components/ui/ (Panel, DeviceRack, SectionHeader). `grep -rn` against apps/ui/src/ confirms zero remaining usages. .ableton-shell and .ableton-toolbar STAY because App.tsx:952,956 still consumes them for the outer app chrome (the load-bearing section-grid shell). A focused follow-up could migrate those two to DeviceRack / a future AppShell primitive; out of scope here. Deferred (preserved as-is): - components/MeasurementPrimitives.tsx cannot be fully deleted yet — 5 consumers still depend on timeline/lane primitives (LaneContainer, LaneRow, StatsBar, TimeRuler) that the plan explicitly preserved. The shipped primitives (StatusBadge, DeltaBadge, MetricBar, MetricBarRow, OutlinePillButton, TokenBadgeList, StyledDataTable, AccentMetricCard) also still have consumers in MeasurementDashboard and AnalysisResults sections that weren't migrated (StructureLanes, HarmonyLanes, AnalysisResults remaining sections). Keep the file intact. - components/Tooltip.tsx stays as a re-export shim; the file isn't causing any drift and external imports may still target it. Verified: lint clean, 628/628 unit tests passing, build clean. D.* migrations summary (all merged or open at time of this PR): - D.0 Foundation (#64) ✓ - D.1 Primitives complete (#65) ✓ - D.2 SamplePlayback (#66) ✓ - D.3 SignalChain marquee (#67) ✓ - D.4 FileUpload + Input Source (#69) ✓ - D.5a Results header + metric strip (#71) ✓ - D.5b Mix Chain (#73) ✓ - D.5c Patches (#74) ✓ - D.5d Section headers (#75) ✓ - D.6a Dashboard structure (#76) ✓ - D.6b Dashboard sections (#77) ✓ - D.6c Dashboard headers (#78) ✓ - D.7 SessionMusicianPanel + MixDoctorPanel (#79) — open - D.8 Signal Monitor + SpectrogramViewer drift (#80) — open - D.9 DenseDawConcept drift (#81) — open - D.10 Cleanup (this PR) ✓ https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe Co-authored-by: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PR 12 of 16 in the UI consistency overhaul / Live 12 restyle stack. Focused, surgical pass over the smaller-component surface — kills the
SpectrogramViewerdrift and wraps Signal Monitor inDeviceRackchrome.Changes
App.tsxSignal Monitor wrapper (:1280-1290): hand-rolledbg-bg-surface-darkheader +bg-bg-cardbody →<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-cardpreserved on the innerdata-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)
<a>elements with anchor-scroll behavior; can't swap to<Button>primitives without losing semantics.Preserved verbatim
data-testid="signal-panel"hook.data-testidhooks across the deferred components.Test plan
npm run lint— cleannpm run test:unit— 628/628 passingnpm run build— cleanUp next
https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
Generated by Claude Code