feat(ui): D.5d migrate ResultsSectionHeader to SectionHeader primitive

[slittycode]

Summary

PR 9 of 16 in the UI consistency overhaul / Live 12 restyle stack. Promotes every section header in AnalysisResults to the SectionHeader primitive via a single internal change — the local ResultsSectionHeader helper is now a thin wrapper that delegates to <SectionHeader variant="underline">.

Affected sections (every ResultsSectionHeader call site)

• Interpretation panel, Idle/"waiting on interpretation" panel
• Style Profile, Audio Observations, Project Setup, Track Layout
• Routing Blueprint, Warp Guide (×2), Arrangement
• Sonic Elements & Reconstruction
• Mix & Master Chain, Patch Framework (already migrated in feat(ui): D.5b migrate Mix Chain per-group sections to DeviceRack #73/feat(ui): D.5c migrate Patches per-group sections to DeviceRack #74 but still use the helper)

What changes visually

• The static accent dot in each section header (<span class="w-2 h-2 bg-accent rounded-full">) becomes the pulsing .led-indicator--active glyph. Same affordance as every DeviceRack title strip in PRs feat(ui): D.2 migrate SamplePlayback to ui/ primitives #66-feat(ui): D.5c migrate Patches per-group sections to DeviceRack #74, so all section landmarks now share one vocabulary.
• The outer underline + flex layout is preserved verbatim (border-b border-border pb-2 + flex items-center justify-between gap-3), so spacing doesn't shift.

What's preserved verbatim

• The ResultsSectionHeader prop API (title, rightSlot, titleRole, titleClassName, className) — every existing call site continues to work without changes.
• All <h2> elements with data-text-role={titleRole} — analysisResultsUi.test.ts:465-466 assertions (data-text-role="section-title" + >Mix &amp; Master Chain</h2>) continue to match.
• data-text-role="item-title" assertions inside each section.
• All data-testid hooks (interpretation-panel, interpretation-warnings, mix-chain-applied-progress, patches-applied-progress, measurements-section, etc.).
• The border-b border-border pb-2 outer container class so spacing is identical.

Deferred (not in D.5d scope)

Per-section DeviceRack wraps were considered (per the plan's "Section wrappers → <DeviceRack>" item) but would have created duplicate title strips wherever a section also has a ResultsSectionHeader — the rack title strip + the SectionHeader h2 would both render section identity. Each affected section would need a custom "drop the SectionHeader, rely only on the rack name" call which doesn't fit a single mechanical change. Save for a focused follow-up if/when the rack chrome is wanted on these surfaces.

Test plan

• npm run lint — clean
• npm run test:unit — 628/628 passing (including analysisResultsUi.test.ts that asserts data-text-role + the Mix & Master Chain h2 text)
• npm run build — clean (AnalysisResults chunk 254 KB / 63 KB gz, marginally smaller than PR 8)
• npm run test:smoke — sandbox blocks Playwright browser; all data-testid + ARIA + heading text preserved
• Manual: confirm each section header now shows a pulsing orange LED instead of a static dot; layout and spacing identical

Up next (PR 10a)

D.6a MeasurementDashboard structure — wrap the dashboard in <DeviceRack name="MEASUREMENTS" density="dense">. Migrate AccentMetricCard usages → <MetricTile> (API parity, drop-in). Preserve data-testid="measurement-dashboard".

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe

---

Generated by Claude Code

[slittycode]

Verdict: APPROVE (posted as COMMENT — can't self-approve)

Summary

Single-file UI migration. ResultsSectionHeader becomes a thin delegate to <SectionHeader variant="underline" size="md" ledTone="accent">, replacing the inline static-dot implementation. The prop API (title, rightSlot→action, titleRole, titleClassName, className) maps cleanly. SectionHeader renders <h2 data-text-role={titleRole}> (primitive line 88-89), so the analysisResultsUi.test.ts:465-466 assertions hold. variant="underline" maps directly to border-b border-border pb-2 in sectionHeaderVariants. Class computation equivalence confirmed: textRoleClassName(role, extras) (line 312-313) is exactly getTextRoleClassName(role) + ' ' + extras, which is what SectionHeader reconstructs via cn(titleBase, 'flex items-center gap-2', titleClassName). Vitest was not runnable in this review environment, but code inspection confirms all load-bearing assertions survive.

Findings

Worth considering (non-blocking × 2):

• SectionHeader wraps the title in an inner <div className="flex flex-col gap-0.5 min-w-0"> (primitive line 79) not present in the old implementation. min-w-0 prevents title overflow in flex rows that have a rightSlot — strictly better behavior. gap-0.5 is a no-op because eyebrow is never passed by ResultsSectionHeader. The PR description doesn't mention this structural addition; worth a line in the migration plan doc if you're tracking visual-layout surface area.

• The action container in SectionHeader (primitive line 96) carries gap-2 that the old rightSlot wrapper lacked. All current rightSlot call sites pass a single <span>, so no visible difference today. Only relevant if a future caller passes multiple children.

Test results

Vitest not installed in review environment; could not run locally. PR claims 628/628. Code inspection confirms the data-text-role, <h2> text, and data-testid assertions are intact.

Phase boundary check

Clean. No Phase 1 schema touches, no Phase 2/3 measurement reads or writes. Pure UI primitive wiring.

---

Generated by Claude Code