From 1a7ab3f2c6c349b43f6a674f0347ab1f8f9658cb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 22:33:40 +0000
Subject: [PATCH 1/4] feat(ui): D.2 migrate SamplePlayback to ui/ primitives
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR 3 of 16 in the UI consistency overhaul. Worst-drift fix: kills
every raw zinc-* / amber-* / emerald-* / rounded-lg instance in
SamplePlayback.tsx (was 13 occurrences, now 0).

Stacked on top of PR #65 (D.1 primitives). Will be rebased onto main
once PR #65 merges.

Migration:
- Outer <section> → <DeviceRack name="AUDITION SAMPLES"
  subtitle="· Phase 3 heuristic" status={rackStatusFor(...)}>. Rack
  status reflects panel state — error tone on failure, active tone
  while generating, success tone once a manifest is rendered.
- Original <h3> id-based labelling replaced by aria-label on the
  DeviceRack; the title strip carries the visible name.
- Regenerate <button> → <Button variant="link" size="sm"> in the
  title-strip action slot.
- Generate <button> → <Button variant="primary" size="md"
  ledIndicator> in the body.
- ManifestMeta pill spans → <Pill tone="neutral" leadingDot>.
- SampleGroup <h4> → <SectionHeader size="sm" eyebrow="Group"
  title={CATEGORY_LABELS[category]}>.
- SampleCard <li> rounded-md border → <Panel variant="surface"
  padding="md"> (wrapped in a <li> for list semantics).
- confidenceClassFor() className helper → confidenceTone() returning
  a Pill tone (warning for LOW / low-confidence, neutral for MED,
  success for HIGH).
- Code spans for cited Phase 1 field paths now use design-token
  colors (bg-bg-app, border-border, text-text-primary) instead of
  raw zinc-300/zinc-800.
- MIDI download link uses text-accent + underline instead of zinc.

No behavior changes — same callbacks, same conditional rendering, same
content. Chain-of-custody fields (sample.cites.rationale,
sample.cites.phase1Fields) are rendered identically; PURPOSE.md
invariant preserved.

Verified: lint clean, 605/605 unit tests passing, build clean.
Bundle: AnalysisResults chunk grew from 256.79 KB to 311.86 KB
(larger import surface from the ui/ barrel; tree-shaking will tighten
this as more components migrate and the import is shared).

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
---
 apps/ui/src/components/SamplePlayback.tsx | 219 ++++++++++++----------
 1 file changed, 123 insertions(+), 96 deletions(-)

diff --git a/apps/ui/src/components/SamplePlayback.tsx b/apps/ui/src/components/SamplePlayback.tsx
index ffe57133..a47bd671 100644
--- a/apps/ui/src/components/SamplePlayback.tsx
+++ b/apps/ui/src/components/SamplePlayback.tsx
@@ -7,6 +7,14 @@ import {
   generateSamples,
 } from '../services/sampleGenerationClient';
 import { BackendClientError } from '../services/backendPhase1Client';
+import {
+  Button,
+  DeviceRack,
+  Panel,
+  Pill,
+  SectionHeader,
+} from './ui';
+import type { Tone } from './ui';
 
 interface SamplePlaybackProps {
   runId: string | null | undefined;
@@ -31,6 +39,18 @@ const CATEGORY_LABELS: Record<SampleRecord['category'], string> = {
   melody: 'Melody / lead phrase',
 };
 
+type RackStatus = 'idle' | 'active' | 'success' | 'warning' | 'error';
+
+function rackStatusFor(
+  panelStatus: PanelStatus,
+  hasManifest: boolean,
+): RackStatus {
+  if (panelStatus.kind === 'error') return 'error';
+  if (panelStatus.kind === 'generating') return 'active';
+  if (hasManifest) return 'success';
+  return 'idle';
+}
+
 /**
  * Audition panel that renders generated audio clips for the current run.
  *
@@ -98,79 +118,84 @@ export function SamplePlayback({
 
   if (!runId) return null;
 
+  const rackStatus = rackStatusFor(status, Boolean(manifest));
+
   return (
-    <section
-      className="rounded-lg border border-zinc-700 bg-zinc-900/40 p-4 mt-6"
-      aria-labelledby="audition-heading"
-    >
-      <header className="flex items-baseline justify-between gap-3 mb-3">
-        <div>
-          <h3 id="audition-heading" className="text-base font-semibold text-zinc-100">
-            Audition samples (Phase 3 — heuristic)
-          </h3>
-          <p className="text-xs text-zinc-400 mt-1 max-w-xl">
-            Short clips derived from Phase 1 measurements (and Phase 2 context when
-            available) so you can ear-check the measurement chain. These are not
-            Ableton-accurate reconstructions — follow Phase 2 in Live for the
-            production character.
-          </p>
-        </div>
-        {manifest && (
-          <button
-            type="button"
+    <DeviceRack
+      name="AUDITION SAMPLES"
+      subtitle="· Phase 3 heuristic"
+      status={rackStatus}
+      aria-label="Audition samples"
+      className="mt-6"
+      action={
+        manifest && (
+          <Button
+            variant="link"
+            size="sm"
             onClick={() => handleGenerate(true)}
             disabled={status.kind === 'generating'}
-            className="text-xs underline text-zinc-400 hover:text-zinc-200 disabled:opacity-40"
           >
             Regenerate
-          </button>
-        )}
-      </header>
-
-      {!measurementCompleted && (
-        <p className="text-sm text-zinc-400">
-          Measurements still running — audition samples become available once Phase 1
-          completes.
+          </Button>
+        )
+      }
+    >
+      <div className="space-y-3">
+        <p className="font-mono text-[11px] leading-snug text-text-secondary max-w-xl">
+          Short clips derived from Phase 1 measurements (and Phase 2 context when
+          available) so you can ear-check the measurement chain. These are not
+          Ableton-accurate reconstructions — follow Phase 2 in Live for the
+          production character.
         </p>
-      )}
 
-      {measurementCompleted && !manifest && status.kind !== 'generating' && (
-        <button
-          type="button"
-          onClick={() => handleGenerate(false)}
-          disabled={status.kind === 'loading'}
-          className="px-3 py-2 rounded bg-amber-600 text-zinc-50 text-sm font-medium hover:bg-amber-500 disabled:opacity-40"
-        >
-          {status.kind === 'loading' ? 'Checking…' : 'Generate audition samples'}
-        </button>
-      )}
+        {!measurementCompleted && (
+          <p className="font-mono text-[11px] text-text-secondary">
+            Measurements still running — audition samples become available once
+            Phase 1 completes.
+          </p>
+        )}
 
-      {status.kind === 'generating' && (
-        <p className="text-sm text-zinc-300">Rendering audition clips…</p>
-      )}
+        {measurementCompleted && !manifest && status.kind !== 'generating' && (
+          <Button
+            variant="primary"
+            size="md"
+            ledIndicator
+            onClick={() => handleGenerate(false)}
+            disabled={status.kind === 'loading'}
+          >
+            {status.kind === 'loading' ? 'Checking…' : 'Generate audition samples'}
+          </Button>
+        )}
 
-      {status.kind === 'error' && (
-        <p className="text-sm text-red-400" role="alert">
-          {status.message}
-        </p>
-      )}
+        {status.kind === 'generating' && (
+          <p className="font-mono text-[11px] text-text-secondary">
+            Rendering audition clips…
+          </p>
+        )}
 
-      {manifest && groupedSamples.length > 0 && (
-        <div className="space-y-5">
-          <ManifestMeta manifest={manifest} />
-          {groupedSamples.map(([category, samples]) => (
-            <React.Fragment key={category}>
-              <SampleGroup
-                category={category}
-                samples={samples}
-                runId={runId}
-                apiBaseUrl={apiBaseUrl}
-              />
-            </React.Fragment>
-          ))}
-        </div>
-      )}
-    </section>
+        {status.kind === 'error' && (
+          <p className="font-mono text-[11px] text-error" role="alert">
+            {status.message}
+          </p>
+        )}
+
+        {manifest && groupedSamples.length > 0 && (
+          <div className="space-y-5">
+            <ManifestMeta manifest={manifest} />
+            {groupedSamples.map(([category, samples]) => (
+              <React.Fragment key={category}>
+                <SampleGroup
+                  category={category}
+                  samples={samples}
+                  runId={runId}
+                  apiBaseUrl={apiBaseUrl}
+                />
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+      </div>
+    </DeviceRack>
   );
 }
 
@@ -184,13 +209,9 @@ function ManifestMeta({ manifest }: { manifest: SamplesManifest }) {
       ? 'PyTheory'
       : 'Pure-Python theory fallback';
   return (
-    <div className="flex flex-wrap gap-2 text-xs">
-      <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-zinc-300">
-        Music theory: {theoryLabel}
-      </span>
-      <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-zinc-300">
-        Synthesis: {synthesisLabel}
-      </span>
+    <div className="flex flex-wrap gap-1.5">
+      <Pill tone="neutral" leadingDot>Music theory: {theoryLabel}</Pill>
+      <Pill tone="neutral" leadingDot>Synthesis: {synthesisLabel}</Pill>
     </div>
   );
 }
@@ -204,15 +225,18 @@ interface SampleGroupProps {
 
 function SampleGroup({ category, samples, runId, apiBaseUrl }: SampleGroupProps) {
   return (
-    <div>
-      <h4 className="text-sm font-medium text-zinc-200 mb-2">
-        {CATEGORY_LABELS[category]}
-      </h4>
-      <ul className="space-y-3">
+    <div className="space-y-2">
+      <SectionHeader
+        size="sm"
+        eyebrow="Group"
+        title={CATEGORY_LABELS[category]}
+        ledTone="accent"
+      />
+      <ul className="space-y-2 list-none p-0">
         {samples.map((sample) => (
-          <React.Fragment key={sample.id}>
+          <li key={sample.id}>
             <SampleCard sample={sample} runId={runId} apiBaseUrl={apiBaseUrl} />
-          </React.Fragment>
+          </li>
         ))}
       </ul>
     </div>
@@ -233,15 +257,16 @@ function SampleCard({ sample, runId, apiBaseUrl }: SampleCardProps) {
     ? artifactStreamUrl(runId, sample.midiArtifactId, apiBaseUrl)
     : null;
 
+  const tone = confidenceTone(sample.confidence, sample.lowConfidence);
+  const label = sample.lowConfidence
+    ? 'Low confidence'
+    : `${sample.confidence} confidence`;
+
   return (
-    <li className="rounded-md border border-zinc-800 bg-zinc-900/60 p-3">
+    <Panel variant="surface" padding="md">
       <div className="flex items-baseline justify-between gap-3 mb-2">
-        <span className="text-sm text-zinc-100">{sample.label}</span>
-        <span
-          className={`text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded ${confidenceClassFor(sample.confidence, sample.lowConfidence)}`}
-        >
-          {sample.lowConfidence ? 'Low confidence' : `${sample.confidence} confidence`}
-        </span>
+        <span className="font-mono text-[12px] text-text-primary">{sample.label}</span>
+        <Pill tone={tone} size="xs">{label}</Pill>
       </div>
       {audioUrl ? (
         <audio
@@ -252,16 +277,18 @@ function SampleCard({ sample, runId, apiBaseUrl }: SampleCardProps) {
           aria-label={`Audition sample: ${sample.label}`}
         />
       ) : (
-        <p className="text-xs text-zinc-500">Audio stream unavailable.</p>
+        <p className="font-mono text-[11px] text-text-muted">Audio stream unavailable.</p>
       )}
-      <p className="text-xs text-zinc-400 mt-2">{sample.cites.rationale}</p>
+      <p className="font-mono text-[11px] text-text-secondary mt-2">
+        {sample.cites.rationale}
+      </p>
       {sample.cites.phase1Fields.length > 0 && (
-        <p className="text-xs text-zinc-500 mt-1">
+        <p className="font-mono text-[11px] text-text-muted mt-1">
           Cites:{' '}
           {sample.cites.phase1Fields.map((field, idx) => (
             <React.Fragment key={field}>
               {idx > 0 && ', '}
-              <code className="text-zinc-300 bg-zinc-800/60 rounded px-1">
+              <code className="text-text-primary bg-bg-app/60 rounded px-1 py-0.5 border border-border/40">
                 {field}
               </code>
             </React.Fragment>
@@ -269,10 +296,10 @@ function SampleCard({ sample, runId, apiBaseUrl }: SampleCardProps) {
         </p>
       )}
       {midiUrl && (
-        <p className="text-xs text-zinc-500 mt-1">
+        <p className="font-mono text-[11px] text-text-muted mt-1">
           <a
             href={midiUrl}
-            className="underline hover:text-zinc-300"
+            className="text-accent underline underline-offset-2 hover:text-accent/80"
             download={sample.midiFilename ?? `${sample.id}.mid`}
           >
             Download MIDI
@@ -280,17 +307,17 @@ function SampleCard({ sample, runId, apiBaseUrl }: SampleCardProps) {
           to audition with your own instruments in Ableton.
         </p>
       )}
-    </li>
+    </Panel>
   );
 }
 
-function confidenceClassFor(
+function confidenceTone(
   confidence: SampleRecord['confidence'],
   lowConfidence: boolean,
-): string {
-  if (lowConfidence || confidence === 'LOW') return 'bg-amber-900/40 text-amber-300';
-  if (confidence === 'MED') return 'bg-zinc-700 text-zinc-200';
-  return 'bg-emerald-900/40 text-emerald-300';
+): Tone {
+  if (lowConfidence || confidence === 'LOW') return 'warning';
+  if (confidence === 'MED') return 'neutral';
+  return 'success';
 }
 
 function friendlyError(err: unknown): string {

From 28a9ac4c57e33bd7d2c313cefc554a8a1396617c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 22:35:29 +0000
Subject: [PATCH 2/4] fix(ui): DeviceRack signal rail uses 3 explicit slots

PR #65 review flagged that when signalIn, railContent, and signalOut
are all set together, both railContent and signalOut carried ml-auto.
In a flex row only the first ml-auto sibling claims the available
space, so signalOut collapsed against railContent instead of
anchoring to the far right.

Restructure the rail as three fixed slots: a left container for
signalIn, a flex-1 center for railContent, and a right-justified
container for signalOut. Each slot always renders; empty when its
content is absent. Layout is now consistent across all combinations
of the three slot props.

PR #66 doesn't exercise the all-three-slots case (SamplePlayback only
sets status, not the rail), but D.4 (AnalysisStatusPanel migration)
will, so worth fixing now while the primitive has no production
consumers.

Verified: lint clean, 605/605 unit tests passing.

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
---
 apps/ui/src/components/ui/DeviceRack.tsx | 36 +++++++++++++++---------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/apps/ui/src/components/ui/DeviceRack.tsx b/apps/ui/src/components/ui/DeviceRack.tsx
index d964664d..09018cfd 100644
--- a/apps/ui/src/components/ui/DeviceRack.tsx
+++ b/apps/ui/src/components/ui/DeviceRack.tsx
@@ -95,20 +95,30 @@ export const DeviceRack = React.forwardRef<HTMLDivElement, DeviceRackProps>(
         )}
         <div className={cn(bodyVariants({ density }))}>{children}</div>
         {showRail && (
+          // Three explicit slots so signalIn / railContent / signalOut land
+          // left / center / right regardless of which combination is present.
+          // (Previously two adjacent `ml-auto` siblings collapsed signalOut
+          // next to railContent when all three slots were filled.)
           <div className="device-rack__rail">
-            {signalIn != null && (
-              <span className="flex items-center gap-1">
-                <span className="signal-arrow" data-tone={signalIn} />
-                <span>in</span>
-              </span>
-            )}
-            {railContent && <span className="ml-auto truncate">{railContent}</span>}
-            {signalOut != null && (
-              <span className="ml-auto flex items-center gap-1">
-                <span>out</span>
-                <span className="signal-arrow" data-tone={signalOut} />
-              </span>
-            )}
+            <span className="flex items-center gap-1 min-w-0">
+              {signalIn != null && (
+                <>
+                  <span className="signal-arrow" data-tone={signalIn} />
+                  <span>in</span>
+                </>
+              )}
+            </span>
+            <span className="flex-1 min-w-0 truncate text-center">
+              {railContent}
+            </span>
+            <span className="flex items-center gap-1 min-w-0 justify-end">
+              {signalOut != null && (
+                <>
+                  <span>out</span>
+                  <span className="signal-arrow" data-tone={signalOut} />
+                </>
+              )}
+            </span>
           </div>
         )}
       </div>

From bb1d557ef5069f80c2e989874db9470a5a86321f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 22:37:43 +0000
Subject: [PATCH 3/4] =?UTF-8?q?feat(ui):=20D.3=20AnalysisStatusPanel=20?=
 =?UTF-8?q?=E2=86=92=20SignalChain=20(marquee=20transformation)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR 4 of 16 in the UI consistency overhaul. The visual hook reviewers
will remember: the analysis pipeline literally renders as a horizontal
Live 12 device chain.

Stacked on PR #66 (D.2 SamplePlayback + DeviceRack rail fix). Branch
already includes the rail fix needed for the all-3-slots layout this
PR exercises.

Migration:
- Outer <div> → <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/etc.) map onto the
  SignalChain primitive's smaller vocabulary
  (idle/queued/active/success/error) via toSignalStatus().
- 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.
- 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.
- Progress bar disappears as a standalone element — 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).
- 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 #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 shrank slightly. Will tighten as more files share the
import.

Verified: lint clean, 605/605 unit tests passing (computeLiveProgress
test suite unaffected), build clean.

https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
---
 .../ui/src/components/AnalysisStatusPanel.tsx | 335 ++++++++----------
 1 file changed, 153 insertions(+), 182 deletions(-)

diff --git a/apps/ui/src/components/AnalysisStatusPanel.tsx b/apps/ui/src/components/AnalysisStatusPanel.tsx
index 071b3c2b..be01460b 100644
--- a/apps/ui/src/components/AnalysisStatusPanel.tsx
+++ b/apps/ui/src/components/AnalysisStatusPanel.tsx
@@ -1,7 +1,21 @@
 import React from 'react';
 import { RotateCcw, Square } from 'lucide-react';
 
-import { AnalysisRunSnapshot, AnalysisStageError, AnalysisStageStatus, BackendAnalysisEstimate } from '../types';
+import {
+  AnalysisRunSnapshot,
+  AnalysisStageError,
+  AnalysisStageStatus,
+  BackendAnalysisEstimate,
+} from '../types';
+import {
+  Button,
+  DeviceRack,
+  Panel,
+  SignalChain,
+  type SignalStage,
+  type SignalStageStatus,
+  type SignalTone,
+} from './ui';
 
 interface AnalysisStatusPanelProps {
   run: AnalysisRunSnapshot | null;
@@ -26,7 +40,7 @@ function formatElapsed(ms: number): string {
 function formatEstimateRange(estimate: BackendAnalysisEstimate): string {
   const lo = Math.round(estimate.totalLowMs / 1000);
   const hi = Math.round(estimate.totalHighMs / 1000);
-  return `${lo}s-${hi}s`;
+  return `${lo}s–${hi}s`;
 }
 
 export type ProgressTone = 'running' | 'success' | 'failed';
@@ -70,36 +84,6 @@ const STAGE_LABELS: Record<StageKey, string> = {
   interpretation: 'INTERPRET',
 };
 
-/**
- * Maps progress tone to the Tailwind background-color class for the progress
- * bar fill. Used to surface failed/successful end-states visually, instead of
- * leaving the bar accent-orange even when a stage has FAILED. Indeterminate
- * fills use a lower-opacity variant so the pulsing partial bar reads as
- * activity rather than solid colour. Audit N1 sibling.
- */
-function progressFillClass(tone: ProgressTone, indeterminate: boolean): string {
-  if (tone === 'failed') return indeterminate ? 'bg-error/60' : 'bg-error';
-  if (tone === 'success') return indeterminate ? 'bg-success/60' : 'bg-success';
-  return indeterminate ? 'bg-accent/60' : 'bg-accent';
-}
-
-function statusDotClass(status: AnalysisStageStatus): string {
-  switch (status) {
-    case 'running':
-    case 'queued':
-      return 'bg-accent animate-pulse';
-    case 'completed':
-      return 'bg-success';
-    case 'failed':
-    case 'interrupted':
-      return 'bg-error';
-    case 'not_requested':
-      return 'bg-text-secondary/30';
-    default:
-      return 'bg-border';
-  }
-}
-
 function getStageSnapshot(run: AnalysisRunSnapshot, stageKey: StageKey) {
   switch (stageKey) {
     case 'measurement':
@@ -246,20 +230,28 @@ export function computeLiveProgress(
   };
 }
 
-function statusTextClass(status: AnalysisStageStatus): string {
+/**
+ * Map a stage's internal status onto the visual SignalChain status. The
+ * SignalChain primitive owns the device-rack chrome for each stage, so we
+ * collapse the wider AnalysisStageStatus enum onto its smaller vocabulary.
+ */
+function toSignalStatus(status: AnalysisStageStatus): SignalStageStatus {
   switch (status) {
     case 'running':
+      return 'active';
     case 'queued':
-      return 'text-accent';
+    case 'blocked':
+    case 'ready':
+      return 'queued';
     case 'completed':
-      return 'text-success';
+      return 'success';
     case 'failed':
     case 'interrupted':
-      return 'text-error';
+      return 'error';
     case 'not_requested':
-      return 'text-text-secondary/50';
+      return 'idle';
     default:
-      return 'text-text-secondary';
+      return 'idle';
   }
 }
 
@@ -277,6 +269,15 @@ function statusLabel(status: AnalysisStageStatus): string {
   }
 }
 
+function rackStatusFromProgress(
+  progress: ProgressState,
+  isActive: boolean,
+): 'idle' | 'active' | 'success' | 'error' {
+  if (progress.tone === 'failed') return 'error';
+  if (progress.tone === 'success') return 'success';
+  return isActive ? 'active' : 'idle';
+}
+
 export function AnalysisStatusPanel({
   run,
   elapsedMs,
@@ -315,156 +316,126 @@ export function AnalysisStatusPanel({
     },
   ];
 
+  const signalStages: SignalStage[] = stages.map((stage) => {
+    const errorMarkedNonRetryable = stage.error?.retryable === false;
+    const isRetryable =
+      stage.onRetry &&
+      (stage.status === 'failed' || stage.status === 'interrupted' || stage.status === 'ready') &&
+      !errorMarkedNonRetryable;
+    // Audit N1: non-retryable failures (e.g. GEMINI_NOT_CONFIGURED) used to
+    // render FAILED with no actionable feedback. Surface the error code in
+    // the action slot so the user knows where to look; the full message
+    // lives in the title attribute.
+    const nonRetryableHint =
+      errorMarkedNonRetryable && stage.error?.code ? (
+        <span
+          className="font-mono text-[9px] uppercase tracking-wider text-error/70 truncate max-w-[8rem]"
+          title={stage.error?.message ?? stage.error.code}
+        >
+          {stage.error.code}
+        </span>
+      ) : null;
+
+    const action = isRetryable ? (
+      <Button
+        variant="ghost"
+        size="sm"
+        leadingIcon={<RotateCcw className="w-3 h-3" />}
+        onClick={stage.onRetry}
+        title={`Retry ${STAGE_LABELS[stage.key]}`}
+      >
+        Retry
+      </Button>
+    ) : (
+      nonRetryableHint
+    );
+
+    return {
+      key: stage.key,
+      name: STAGE_LABELS[stage.key],
+      status: toSignalStatus(stage.status),
+      statusLabel: statusLabel(stage.status),
+      action,
+    };
+  });
+
+  const rackStatus = rackStatusFromProgress(progress, isActive);
+  const subtitle = run ? `· ${run.runId.slice(-8)}` : undefined;
+  const railTone: SignalTone =
+    progress.tone === 'success' ? 'success' : progress.tone === 'failed' ? 'idle' : 'active';
+
+  const railProgressLabel = progress.indeterminate
+    ? 'estimating'
+    : `${Math.round(progress.percent)}%`;
+
   return (
-    <div className="rounded-sm border border-border bg-bg-panel p-3 space-y-3">
-      {/* Header row */}
-      <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-3 min-w-0">
-          <span className="text-[11px] font-mono text-text-secondary uppercase tracking-[0.2em]">Analysis Run</span>
-          {run && (
-            <span className="text-[9px] font-mono text-text-secondary/50 uppercase tracking-wider truncate">
-              {run.runId}
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-3 shrink-0">
-          <div className="flex items-center gap-1.5">
-            <div className={`w-1.5 h-1.5 rounded-full ${isActive ? 'bg-accent animate-pulse' : 'bg-success'}`} />
-            <span className="text-[10px] font-mono text-text-primary tabular-nums">{formatElapsed(elapsedMs)}</span>
-          </div>
+    <DeviceRack
+      name="ANALYSIS RUN"
+      subtitle={subtitle}
+      status={rackStatus}
+      action={
+        onStopAnalysis && isActive ? (
+          <Button
+            variant="danger"
+            size="sm"
+            leadingIcon={<Square className="w-3 h-3 fill-current" />}
+            onClick={onStopAnalysis}
+            title="Stop analysis"
+            aria-label="Stop analysis"
+          >
+            Stop
+          </Button>
+        ) : undefined
+      }
+      signalIn={railTone}
+      signalOut={progress.tone === 'success' ? 'success' : 'idle'}
+      railContent={
+        <span className="flex items-center gap-3">
+          <span className="tabular-mono text-text-secondary">
+            {formatElapsed(elapsedMs)}
+          </span>
           {estimate && (
-            <span className="text-[9px] font-mono text-text-secondary/60 uppercase">
-              est {formatEstimateRange(estimate)}
-            </span>
+            <span className="text-text-muted">est {formatEstimateRange(estimate)}</span>
           )}
-          {onStopAnalysis && isActive && (
-            <button
-              onClick={onStopAnalysis}
-              className="flex items-center gap-1 rounded-sm border border-error/30 bg-error/10 px-2 py-1 text-error hover:bg-error/20 transition-colors"
-              title="Stop analysis"
-              aria-label="Stop analysis"
-            >
-              <Square className="w-3 h-3 fill-current" />
-              <span className="text-[9px] font-mono uppercase tracking-wider">Stop</span>
-            </button>
+          <span className="tabular-mono text-text-secondary">{railProgressLabel}</span>
+        </span>
+      }
+    >
+      <div className="space-y-3">
+        {/* Audit Finding #6: primary readout. The stage diagnostic message
+            used to render at `text-[9px] text-secondary/50` below the percent
+            — sized as background fluff. During a 4–5 minute Phase 2 wait the
+            producer would tab away and miss any actual signal about what's
+            happening. Now it sits at the top of the device body as the visual
+            focus, with the active stage label as a mono eyebrow above it. The
+            SignalChain below becomes the secondary "which stage is which"
+            landmark. */}
+        <Panel
+          variant="inset"
+          padding="sm"
+          data-testid="status-panel-primary-readout"
+        >
+          {progress.activeStageKey && (
+            <p className="font-mono text-[10px] uppercase tracking-[0.18em] text-text-secondary/80 mb-1">
+              {STAGE_LABELS[progress.activeStageKey]}
+              {progress.tone === 'failed' ? ' · failure' : null}
+            </p>
           )}
-        </div>
-      </div>
-
-      {/* Audit Finding #6: primary readout. The stage diagnostic message used
-          to render at `text-[9px] text-secondary/50` below the percent — sized
-          as background fluff. During a 4–5 minute Phase 2 wait the producer
-          would tab away and miss any actual signal about what's happening.
-          Now it sits between the header and the stage chips as the visual
-          focus, with the active stage label as a mono eyebrow above it. The
-          chips below become the secondary "which stage is which" landmark. */}
-      <div
-        data-testid="status-panel-primary-readout"
-        className="rounded-sm border border-border/40 bg-bg-card/40 px-3 py-2.5"
-      >
-        {progress.activeStageKey && (
-          <p className="text-[10px] font-mono uppercase tracking-[0.18em] text-text-secondary/80 mb-1">
-            {STAGE_LABELS[progress.activeStageKey]}
-            {progress.tone === 'failed' ? ' · failure' : null}
+          <p
+            className={`text-sm font-sans leading-snug ${
+              progress.tone === 'failed' ? 'text-error' : 'text-text-primary'
+            }`}
+          >
+            {progress.message}
           </p>
-        )}
-        <p
-          className={`text-sm font-sans leading-snug ${
-            progress.tone === 'failed' ? 'text-error' : 'text-text-primary'
-          }`}
-        >
-          {progress.message}
-        </p>
-      </div>
+        </Panel>
 
-      {/* Stage pipeline */}
-      <div className="flex items-stretch gap-1">
-        {stages.map((stage, i) => {
-          // A retry button only makes sense when (a) the parent provided a
-          // handler, (b) the stage is in a retryable state, and (c) the
-          // backend hasn't explicitly marked the error as non-retryable
-          // (e.g. GEMINI_NOT_CONFIGURED: clicking RETRY won't fix a missing
-          // env var). Audit N1 sibling: previously the button rendered for
-          // every failed stage regardless of error.retryable.
-          const errorMarkedNonRetryable = stage.error?.retryable === false;
-          const isRetryable =
-            stage.onRetry &&
-            (stage.status === 'failed' || stage.status === 'interrupted' || stage.status === 'ready') &&
-            !errorMarkedNonRetryable;
-          return (
-            <div
-              key={stage.key}
-              className={`flex-1 rounded-sm border p-2 ${
-                stage.status === 'running' || stage.status === 'queued'
-                  ? 'border-accent/30 bg-accent/5'
-                  : stage.status === 'completed'
-                    ? 'border-success/20 bg-success/5'
-                    : stage.status === 'failed' || stage.status === 'interrupted'
-                      ? 'border-error/20 bg-error/5'
-                      : 'border-border bg-bg-card'
-              }`}
-            >
-              <div className="flex items-center justify-between gap-1.5 mb-1">
-                <span className="text-[9px] font-mono text-text-secondary uppercase tracking-wider">
-                  {STAGE_LABELS[stage.key]}
-                </span>
-                <div className={`w-2 h-2 rounded-full shrink-0 ${statusDotClass(stage.status)}`} />
-              </div>
-              <div className="flex items-center justify-between gap-1">
-                <span className={`text-[10px] font-mono font-bold uppercase tracking-wider ${statusTextClass(stage.status)}`}>
-                  {statusLabel(stage.status)}
-                </span>
-                {isRetryable ? (
-                  <button
-                    onClick={stage.onRetry}
-                    className="flex items-center gap-0.5 text-accent hover:text-accent/80 transition-colors"
-                    title={`Retry ${STAGE_LABELS[stage.key]}`}
-                  >
-                    <RotateCcw className="w-3 h-3" />
-                    <span className="text-[8px] font-mono uppercase tracking-wider">Retry</span>
-                  </button>
-                ) : errorMarkedNonRetryable && stage.error?.code ? (
-                  // Audit N1 sibling: a non-retryable failure (e.g.
-                  // GEMINI_NOT_CONFIGURED) used to render FAILED with no
-                  // actionable feedback. Surface the error code so the user
-                  // knows where to look; full message goes in the tooltip.
-                  <span
-                    className="text-[8px] font-mono uppercase tracking-wider text-error/70 truncate max-w-[8rem]"
-                    title={stage.error?.message ?? stage.error.code}
-                  >
-                    {stage.error.code}
-                  </span>
-                ) : null}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Progress bar */}
-      <div className="space-y-1">
-        <div className="w-full h-1 bg-bg-app border border-border/20 rounded-sm overflow-hidden">
-          {progress.indeterminate ? (
-            <div className={`h-full w-1/3 rounded-sm animate-pulse ${progressFillClass(progress.tone, true)}`} />
-          ) : (
-            <div
-              className={`h-full rounded-sm transition-all duration-500 ease-out ${progressFillClass(progress.tone, false)} ${
-                progress.percent >= 95 && progress.tone === 'running' ? 'animate-pulse' : ''
-              }`}
-              style={{ width: `${progress.percent}%` }}
-            />
-          )}
-        </div>
-        <div className="flex items-center justify-end">
-          <span className="text-[9px] font-mono text-text-secondary/50 tabular-nums">
-            {progress.indeterminate ? 'estimating' : `${Math.round(progress.percent)}%`}
-          </span>
-        </div>
-        {/* Audit Finding #6: the duplicate small `progress.message` that used
-            to render here was removed — the primary readout above is the
-            single source for "what's happening". Keeping it here would have
-            been visual noise repeating the same sentence twice. */}
+        <SignalChain
+          stages={signalStages}
+          orientation="horizontal"
+          animated={isActive && progress.tone === 'running'}
+        />
       </div>
-    </div>
+    </DeviceRack>
   );
 }

From cc9509510a7e6e768c60e4582aa2af6c1a431fdf Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 22:42:15 +0000
Subject: [PATCH 4/4] chore(ui): normalize package-lock.json optional dep dev
 flags
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

npm install during PR review pass dropped "dev": true from optional
rollup platform-binary entries — cosmetic lockfile normalization, no
functional change.

https://claude.ai/code/session_01MWRh46jPZ7YbFq4SkPFEwU
---
 apps/ui/package-lock.json | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/apps/ui/package-lock.json b/apps/ui/package-lock.json
index 52cc0bcb..1edabd73 100644
--- a/apps/ui/package-lock.json
+++ b/apps/ui/package-lock.json
@@ -362,7 +362,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -379,7 +378,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -396,7 +394,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -413,7 +410,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -430,7 +426,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -447,7 +442,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -464,7 +458,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -481,7 +474,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -498,7 +490,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -515,7 +506,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -532,7 +522,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -549,7 +538,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -566,7 +554,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -583,7 +570,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -600,7 +586,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -617,7 +602,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -634,7 +618,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -651,7 +634,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -668,7 +650,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -685,7 +666,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -702,7 +682,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -719,7 +698,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -736,7 +714,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -753,7 +730,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -770,7 +746,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -787,7 +762,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [