feat(ui): D.3 AnalysisStatusPanel → SignalChain (marquee transformation)

[slittycode]

Summary

PR 4 of 16 in the UI consistency overhaul / Live 12 restyle stack. The visual hook reviewers will remember: the analysis pipeline literally renders as a horizontal Live 12 device chain. Animated cables convey "data is flowing left to right" between active stages.

Stacked on #66 (D.2 SamplePlayback + DeviceRack rail fix). Base will be retargeted to main once #66 merges. PR 4's branch already includes the rail fix needed for the all-three-slots layout this PR exercises.

Migration

• Outer <div className="rounded-sm border ... p-3 space-y-3"> → <DeviceRack name="ANALYSIS RUN" subtitle={'· ' + runId.slice(-8)} status={overallStatus}>. Status maps progress tone + isActive to idle/active/success/error.
• Stop button → <Button variant="danger" size="sm" leadingIcon={<Square>}> in the title-strip action slot.
• The three stage tiles (measurement / pitchNoteTranslation / interpretation) → <SignalChain orientation="horizontal" animated>. The animated cables convey "data is flowing left to right" between active stages — the literal Live 12 device-chain metaphor.
• Stage statuses (running/queued/completed/failed/...) map onto the SignalChain primitive's smaller vocabulary (idle/queued/active/success/error) via a local toSignalStatus() helper.
• Per-stage retry buttons rendered via <Button variant="ghost"> in the stage device's action slot.
• Non-retryable error codes (e.g. GEMINI_NOT_CONFIGURED) surface as a truncated mono span in the action slot with the full message in the title attribute — Audit N1 sibling preserved verbatim.
• Primary readout (data-testid="status-panel-primary-readout") wraps in <Panel variant="inset" padding="sm"> instead of the hand-rolled rounded-sm border bg-bg-card div. Test ID preserved verbatim.
• Standalone progress bar disappears — its information (elapsed time, estimate range, percent) folds into the DeviceRack's bottom signal-flow rail via railContent. Animated SignalChain cables + LED-pulse on the active stage + percent in the rail collectively carry the "still running" signal.

Preserved verbatim

• AnalysisStatusPanelProps — no API change for App.tsx:1279-1288.
• computeLiveProgress() pure function and its export — the only consumer (tests/services/analysisStatusProgress.test.ts) was driven exclusively by this export and continues to pass without change.
• STAGE_LABELS, statusLabel, all stage-status mapping logic.
• The Audit N1 retry-button gating (errorMarkedNonRetryable check).
• The Audit Finding [codex] Prepare hosted runtime foundation #6 primary-readout placement at the top of the body.

Bundle

Index chunk grew from 271 KB → 325 KB gz (97.5 KB compressed) because AnalysisStatusPanel now imports more from the ui/ barrel. AnalysisResults chunk shrank slightly (256 → 255 KB gz). Will tighten as more files share the import.

Test plan

• npm run lint — clean
• npm run test:unit — 605/605 passing (computeLiveProgress test suite unaffected)
• npm run build — clean
• npm run test:smoke — sandbox network blocks Playwright browser; should pass in CI since data-testid="status-panel-primary-readout" is preserved and stage-label text ("MEASURE", "PITCH/NOTE", "INTERPRET", "RUNNING", "DONE", "FAILED", etc.) is unchanged
• Manual: start an analysis, watch cables animate between active stages, confirm LED on the active stage pulses, primary readout sits at the top, retry buttons appear inline when a stage fails, Stop button works

Up next (PR 5)

D.4 FileUpload + Input Source. The Input Source wrapper becomes a <DeviceRack name="INPUT SOURCE">, analysis-option toggles become Radix <Checkbox>es styled as Live device on/off pads.

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe

---

Generated by Claude Code

[slittycode]

Verdict: REQUEST CHANGES

Summary

Pure UI transformation: AnalysisStatusPanel is rewritten around the DeviceRack / SignalChain / Panel primitives from PR D.1. No Phase 1 data is mutated, no schema fields change, computeLiveProgress() and its export are preserved verbatim. 622/622 unit tests pass, TypeScript lint is clean. The only issue triggering a REQUEST_CHANGES is two new logic functions with no unit tests — per the project's non-negotiable testing rule.

Findings

Should fix

toSignalStatus() and rackStatusFromProgress() are new non-trivial functions that convert internal state to typed contract values (SignalStageStatus, rack status string). Neither has a unit test. The project rule is explicit: new logic without tests = REQUEST_CHANGES. Both are simple enough to cover in a dozen lines.

Note: the three functions deleted by this PR (statusDotClass, statusTextClass, progressFillClass) also had no tests, so the net coverage posture is unchanged — but new additions still need to be covered going forward.

Worth considering

blocked and ready both map to 'queued' in toSignalStatus(). Previously they fell through to the neutral-grey default. For blocked (waiting on measurement) this reads correctly. For ready (failed stage, awaiting user retry) it's slightly off — the user already sees a Retry button in the action slot, so the stage tile also reading queued could momentarily confuse. Not blocking; judgment call.

Test results

622 passed / 4 skipped / 0 failed. computeLiveProgress test suite (10 tests) unaffected.

Phase boundary check

Clean. Only AnalysisStatusPanel.tsx changed. No reads or writes to Phase 1 output objects, no re-derivation of measured values, no changes to Phase 2/3 files.

---

Generated by Claude Code