feat: clarify authoring scene visual loop

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

@@ -5,6 +5,7 @@ import { loadCanonicalDemoRecording } from "../demo/timeline/replay.js";
 import type { DemoTimelineController } from "../demo/useDemoTimeline.js";
 import { SceneBody } from "./SceneBody.js";
 import type { PresentationLocation } from "./storyboard.js";
+import { findBeat, findScene } from "./storyboard.js";
 
 const noop = () => {};
 const noopAsync = async () => {};
@@ -117,4 +118,28 @@ describe("SceneBody", () => {
 
     expect(openDiscussion).toHaveBeenCalledWith("hosted-automation");
   });
+
+  it("renders Scene 7 as an agent authoring loop with beat-specific emphasis", () => {
+    const location: PresentationLocation = { kind: "main", sceneId: "authoring", beatId: "diagnose", focusPath: [] };
+    render(
+      <SceneBody
+        location={location}
+        demo={demo}
+        selectedNodeId={null}
+        selectNode={noop}
+        openEvidence={noop}
+        openDiscussion={noop}
+        onFocusPathChange={noop}
+        motionDisabled={false}
+      />,
+    );
+
+    const loop = screen.getByLabelText("agent authoring loop");
+    expect(loop).toHaveAttribute("data-active-stage", "diagnose");
+    expect(screen.getByText("Discover capability")).toBeInTheDocument();
+    expect(screen.getByText("Author draft")).toBeInTheDocument();
+    expect(screen.getByText("Validate and diagnose").closest("[data-authoring-active]")).toHaveAttribute("data-authoring-active", "true");
+    expect(screen.getByText("Repair")).toBeInTheDocument();
+    expect(screen.getByText("Compile or save")).toBeInTheDocument();
+  });
 });

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

@@ -142,28 +142,36 @@ const LifecycleScene = ({ scene, beat }: { scene: SceneDefinition; beat: SceneBe
 );
 
 const authoringSteps = [
-  { id: "discover", label: "Discover" },
-  { id: "author", label: "Author" },
-  { id: "diagnose", label: "Diagnose" },
-  { id: "repair", label: "Repair" },
-];
+  { id: "discover", label: "Discover capability", detail: "wf schema / cap inspect" },
+  { id: "author", label: "Author draft", detail: "wf draft create / add-step / bind" },
+  { id: "diagnose", label: "Validate and diagnose", detail: "structured diagnostics + repair hints" },
+  { id: "repair", label: "Repair", detail: "focused edit, no full rewrite" },
+  { id: "compile", label: "Compile or save", detail: "artifact / deployment / run" },
+] as const;
 
 const AuthoringScene = ({ scene, beat }: { scene: SceneDefinition; beat: SceneBeatDefinition }) => (
   <>
     <StageCaption eyebrow="Act II · implemented" title={scene.title}>
       <p>{beat.caption}</p>
     </StageCaption>
-    <div className="scene-body__authoring">
-      {authoringSteps.map((step, i) => (
-        <div
-          key={step.id}
-          className={`scene-body__authoring-step${beat.id === step.id ? " scene-body__authoring-step--active" : ""}`}
-        >
-          <span className="scene-body__authoring-number">{i + 1}</span>
-          <strong>{step.label}</strong>
-          {i < authoringSteps.length - 1 && <span className="scene-body__authoring-arrow">→</span>}
-        </div>
-      ))}
+    <div className="scene-body__authoring-loop" aria-label="agent authoring loop" data-active-stage={beat.id}>
+      <div className="scene-body__authoring-loop-rail" aria-hidden="true" />
+      {authoringSteps.map((step, i) => {
+        const isActive = beat.id === step.id;
+        const isPast = authoringSteps.findIndex((candidate) => candidate.id === beat.id) > i;
+        return (
+          <div
+            key={step.id}
+            className="scene-body__authoring-node"
+            data-authoring-active={isActive}
+            data-authoring-past={isPast}
+          >
+            <span className="scene-body__authoring-number">{i + 1}</span>
+            <strong>{step.label}</strong>
+            <small>{step.detail}</small>
+          </div>
+        );
+      })}
     </div>
     <p className="scene-body__evidence">{scene.evidencePointer}</p>
   </>

web/apps/console/src/presentation/presentation.css

@@ -688,8 +688,7 @@
   align-self: stretch;
 }
 
-.scene-body__lifecycle,
-.scene-body__authoring {
+.scene-body__lifecycle {
   display: flex;
   align-items: center;
   gap: 0.35rem;
@@ -697,8 +696,7 @@
   flex-wrap: wrap;
 }
 
-.scene-body__lifecycle-stage,
-.scene-body__authoring-step {
+.scene-body__lifecycle-stage {
   display: flex;
   align-items: center;
   gap: 0.35rem;
@@ -709,6 +707,64 @@
   font-size: 0.85rem;
 }
 
+.scene-body__authoring-loop {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-top: 1rem;
+  padding: 1rem 0 0.2rem;
+}
+
+.scene-body__authoring-loop-rail {
+  position: absolute;
+  z-index: 0;
+  top: 2.15rem;
+  left: 8%;
+  right: 8%;
+  height: 2px;
+  background: linear-gradient(90deg, var(--accent-cyan), color-mix(in oklch, var(--accent-cyan) 20%, transparent));
+}
+
+.scene-body__authoring-node {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  align-content: start;
+  gap: 0.35rem;
+  min-height: 8.6rem;
+  border: 1px solid color-mix(in oklch, var(--stage-line) 72%, transparent);
+  border-radius: 0.75rem;
+  padding: 0.75rem;
+  background: color-mix(in oklch, var(--stage-surface) 88%, transparent);
+  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, background 180ms ease;
+}
+
+.scene-body__authoring-node[data-authoring-active="true"] {
+  transform: translateY(-0.35rem);
+  border-color: var(--accent-cyan);
+  background: color-mix(in oklch, var(--accent-cyan) 13%, var(--stage-surface));
+}
+
+.scene-body__authoring-node[data-authoring-past="true"] {
+  opacity: 0.76;
+}
+
+.scene-body__authoring-node small {
+  color: var(--text-muted);
+  font: 0.72rem/1.35 var(--font-interface);
+}
+
+@media (max-width: 1050px) {
+  .scene-body__authoring-loop {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .scene-body__authoring-loop-rail {
+    display: none;
+  }
+}
+
 .scene-body__lifecycle-number,
 .scene-body__authoring-number {
   display: inline-flex;
@@ -723,8 +779,7 @@
   font-weight: 600;
 }
 
-.scene-body__lifecycle-arrow,
-.scene-body__authoring-arrow {
+.scene-body__lifecycle-arrow {
   color: oklch(0.5 0.06 250);
   font-size: 1.1rem;
 }
@@ -797,8 +852,7 @@
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
-.scene-body__lifecycle-stage,
-.scene-body__authoring-step {
+.scene-body__lifecycle-stage {
   transition: opacity 0.3s ease, transform 0.25s ease, border-color 0.2s ease, background 0.2s ease;
 }
 
@@ -828,17 +882,6 @@
   transform: scale(1.03);
 }
 
-.scene-body__authoring-step:not(.scene-body__authoring-step--active) {
-  opacity: 0.4;
-  transform: scale(0.96);
-}
-
-.scene-body__authoring-step--active {
-  border-color: oklch(0.7 0.16 195);
-  background: oklch(0.2 0.06 195);
-  transform: scale(1.03);
-}
-
 .scene-body__evaluation-stat {
   transition: opacity 0.3s ease, transform 0.25s ease, border-color 0.2s ease, background 0.2s ease;
 }