fix: compact continuity rail to slim 14px strip, regain ~90px for stage

web/apps/console/src/presentation/DemoContinuityRail.tsx

@@ -7,17 +7,16 @@ type DemoContinuityRailProps = {
 type RailStep = {
   readonly phase: DemoClimaxPhase;
   readonly label: string;
-  readonly detail: string;
 };
 
 /* The rail shows 4 visual steps while the phase model has 5 — "resume" is
-   an invisible in-between state that maps to the same rail step as "interrupt"
+   an in-between state: for completed-index calculation it sits past "interrupt"
-   for completed-index calculation but must not be marked active. */
+   but must not be marked active since it has no dedicated rail step. */
 const railSteps: ReadonlyArray<RailStep> = [
-  { phase: "agent", label: "Agent request", detail: "thin interface" },
+  { phase: "agent", label: "Agent request" },
-  { phase: "run", label: "Workflow run", detail: "typed runtime" },
+  { phase: "run", label: "Workflow run" },
-  { phase: "interrupt", label: "Human boundary", detail: "schema-backed" },
+  { phase: "interrupt", label: "Human boundary" },
-  { phase: "evidence", label: "Evidence", detail: "traceable output" },
+  { phase: "evidence", label: "Evidence" },
 ];
 
 const phaseOrder: ReadonlyArray<DemoClimaxPhase> = [
@@ -32,29 +31,29 @@ export const DemoContinuityRail = ({ lens }: DemoContinuityRailProps) => {
   const currentIndex = phaseOrder.indexOf(lens.phase);
 
   return (
-    <section className="demo-continuity-rail" aria-label="demo continuity">
+    <nav className="demo-continuity-rail" aria-label="demo continuity">
-      <div className="demo-continuity-rail__proof">
-        <span>{lens.eyebrow}</span>
-        <strong>{lens.headline}</strong>
-        <code>{lens.proofLabel}</code>
-      </div>
       <ol className="demo-continuity-rail__steps">
-        {railSteps.map((step) => {
+        {railSteps.map((step, idx) => {
           const stepIndex = phaseOrder.indexOf(step.phase);
           const active = step.phase === lens.phase;
           const completed = stepIndex < currentIndex;
+          const isLast = idx === railSteps.length - 1;
           return (
-            <li
+            <li key={step.phase}>
-              key={step.phase}
+              {!isLast && <span className="demo-continuity-rail__connector" data-completed={completed || active} />}
+              <span
+                className="demo-continuity-rail__dot"
                 data-active={active}
                 data-completed={completed}
-            >
+              />
-              <span>{step.label}</span>
+              <span className="demo-continuity-rail__label" data-active={active} data-completed={completed}>
-              <small>{step.detail}</small>
+                {step.label}
+              </span>
             </li>
           );
         })}
       </ol>
-    </section>
+      <code className="demo-continuity-rail__beat-code">{lens.proofLabel}</code>
+    </nav>
   );
 };

web/apps/console/src/presentation/DemoWorkflowScene.test.tsx

@@ -134,16 +134,16 @@ describe("DemoWorkflowScene", () => {
 
   it("shows the continuity rail across Scene 9 operation, graph, and interrupt beats", () => {
     const { unmount } = renderBeat("operation");
-    expect(screen.getByLabelText("demo continuity")).toHaveTextContent("Request becomes a workflow run");
     expect(screen.getByLabelText("demo continuity")).toHaveTextContent("workflow.runs.start");
+    expect(screen.getByLabelText("demo continuity")).toHaveTextContent("Agent request");
     unmount();
 
     const graph = renderBeat("graph");
-    expect(screen.getByLabelText("demo continuity")).toHaveTextContent("The product owns the reusable workflow shape");
+    expect(screen.getByLabelText("demo continuity")).toHaveTextContent("typed graph");
     graph.unmount();
 
     renderBeat("interrupt");
-    expect(screen.getByLabelText("demo continuity")).toHaveTextContent("Execution stops at a declared human boundary");
+    expect(screen.getByLabelText("demo continuity")).toHaveTextContent("issue_review");
   });
 
   it("adds outcome proof to approval, resume, output, and trace beats", () => {

web/apps/console/src/presentation/styles/demo-workflow.css

@@ -687,83 +687,90 @@
 }
 
 .demo-continuity-rail {
-  display: grid;
+  display: flex;
-  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1fr);
+  align-items: center;
-  gap: 0.9rem;
+  gap: 0.75rem;
-  align-items: stretch;
   flex: 0 0 auto;
-  margin-bottom: 0.65rem;
+  margin-bottom: 0.2rem;
-}
+  padding: 0.15rem 0;
-
-.demo-continuity-rail__proof {
-  display: grid;
-  gap: 0.2rem;
-  border: 1px solid oklch(0.72 0.17 195 / 0.34);
-  border-radius: 0.75rem;
-  padding: 0.65rem 0.8rem;
-  background: oklch(0.12 0.022 250 / 0.82);
-}
-
-.demo-continuity-rail__proof span {
-  color: var(--accent-cyan);
-  font: 700 0.62rem/1 var(--font-mono, monospace);
-  letter-spacing: 0.11em;
-  text-transform: uppercase;
-}
-
-.demo-continuity-rail__proof strong {
-  color: var(--text-primary);
-  font-size: 0.92rem;
-  line-height: 1.15;
-}
-
-.demo-continuity-rail__proof code {
-  color: var(--text-secondary);
-  font: 600 0.68rem/1.2 var(--font-mono, monospace);
 }
 
 .demo-continuity-rail__steps {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  align-items: center;
-  gap: 0.45rem;
+  gap: 0;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .demo-continuity-rail__steps li {
-  display: grid;
+  display: flex;
-  align-content: center;
+  align-items: center;
-  gap: 0.18rem;
+  gap: 0;
   min-width: 0;
-  border: 1px solid var(--stage-line);
-  border-radius: 0.65rem;
-  padding: 0.55rem 0.65rem;
-  background: oklch(0.135 0.022 250 / 0.72);
-  color: var(--text-muted);
 }
 
-.demo-continuity-rail__steps li[data-completed="true"] {
+.demo-continuity-rail__dot {
-  border-color: oklch(0.72 0.17 195 / 0.36);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--stage-line);
+  transition: background 200ms ease;
+}
+
+.demo-continuity-rail__dot[data-completed="true"] {
+  background: oklch(0.72 0.17 195 / 0.55);
+}
+
+.demo-continuity-rail__dot[data-active="true"] {
+  width: 8px;
+  height: 8px;
+  background: var(--accent-cyan);
+  box-shadow: 0 0 0 3px oklch(0.72 0.17 195 / 0.15);
+}
+
+.demo-continuity-rail__connector {
+  display: block;
+  width: 1.6rem;
+  height: 2px;
+  flex-shrink: 0;
+  margin: 0 0.35rem;
+  background: var(--stage-line);
+  transition: background 200ms ease;
+}
+
+.demo-continuity-rail__connector[data-completed="true"] {
+  background: oklch(0.72 0.17 195 / 0.55);
+}
+
+.demo-continuity-rail__label {
+  margin-left: 0.35rem;
+  font: 500 0.6rem/1 var(--font-interface, sans-serif);
+  color: var(--text-muted);
+  white-space: nowrap;
+  opacity: 0.5;
+  transition: opacity 200ms ease, color 200ms ease;
+}
+
+.demo-continuity-rail__label[data-completed="true"] {
+  opacity: 0.7;
   color: var(--text-secondary);
 }
 
-.demo-continuity-rail__steps li[data-active="true"] {
+.demo-continuity-rail__label[data-active="true"] {
-  border-color: var(--accent-cyan);
+  opacity: 1;
-  background: oklch(0.18 0.052 210 / 0.92);
+  color: var(--accent-cyan);
-  color: var(--text-primary);
+  font-weight: 600;
 }
 
-.demo-continuity-rail__steps span {
+.demo-continuity-rail__beat-code {
-  overflow: hidden;
+  margin-left: auto;
-  font: 700 0.74rem/1.1 var(--font-interface, sans-serif);
+  font: 550 0.58rem/1 var(--font-mono, monospace);
-  text-overflow: ellipsis;
+  letter-spacing: 0.06em;
-  white-space: nowrap;
+  color: var(--text-muted);
-}
+  opacity: 0.6;
-
-.demo-continuity-rail__steps small {
-  color: color-mix(in oklch, currentColor 70%, transparent);
-  font: 600 0.6rem/1.1 var(--font-mono, monospace);
 }
 
 .demo-outcome-panel {
@@ -833,9 +840,3 @@
 .demo-outcome-panel small {
   color: var(--text-secondary);
 }
-
-@container presentation-canvas (max-width: 1050px) {
-  .demo-continuity-rail {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}