feat: recompose lifecycle scene

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

@@ -168,6 +168,63 @@ describe("SceneBody", () => {
     expect(withinBoundary.getByText(/JSON-RPC/)).toBeInTheDocument();
   });
 
+  it("renders Scene 5 as a full workflow lifecycle rail", () => {
+    const location: PresentationLocation = { kind: "main", sceneId: "lifecycle", beatId: "deployment", focusPath: [] };
+    render(
+      <SceneBody
+        location={location}
+        demo={demo}
+        selectedNodeId={null}
+        selectNode={noop}
+        openEvidence={noop}
+        openDiscussion={noop}
+        onFocusPathChange={noop}
+        motionDisabled={false}
+      />,
+    );
+
+    const rail = screen.getByLabelText("workflow lifecycle rail");
+    expect(rail).toHaveAttribute("data-lifecycle-active-stage", "deployment");
+    const withinRail = within(rail);
+    expect(withinRail.getByText("Draft")).toBeInTheDocument();
+    expect(withinRail.getByText("Artifact")).toBeInTheDocument();
+    expect(withinRail.getByText("Deployment")).toBeInTheDocument();
+    expect(withinRail.getByText("Run")).toBeInTheDocument();
+    expect(withinRail.getByText("Source binding")).toBeInTheDocument();
+  });
+
+  it("updates the lifecycle explanation with the active beat", () => {
+    const { rerender } = render(
+      <SceneBody
+        location={{ kind: "main", sceneId: "lifecycle", beatId: "draft", focusPath: [] }}
+        demo={demo}
+        selectedNodeId={null}
+        selectNode={noop}
+        openEvidence={noop}
+        openDiscussion={noop}
+        onFocusPathChange={noop}
+        motionDisabled={false}
+      />,
+    );
+
+    expect(screen.getByLabelText("current lifecycle state")).toHaveTextContent("Mutable authoring state");
+
+    rerender(
+      <SceneBody
+        location={{ kind: "main", sceneId: "lifecycle", beatId: "run", focusPath: [] }}
+        demo={demo}
+        selectedNodeId={null}
+        selectNode={noop}
+        openEvidence={noop}
+        openDiscussion={noop}
+        onFocusPathChange={noop}
+        motionDisabled={false}
+      />,
+    );
+
+    expect(screen.getByLabelText("current lifecycle state")).toHaveTextContent("Execution record and trace");
+  });
+
   it("marks the planner side active on the planner beat", () => {
     const location: PresentationLocation = { kind: "main", sceneId: "planner-runtime", beatId: "planner", focusPath: [] };
     render(

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

@@ -166,32 +166,44 @@ const BoundaryScene = ({ scene, beat }: { scene: SceneDefinition; beat: SceneBea
 };
 
 const lifecycleStages = [
-  { id: "draft", label: "Draft" },
-  { id: "artifact", label: "Artifact" },
-  { id: "deployment", label: "Deployment" },
-  { id: "run", label: "Run" },
-];
+  { id: "draft", label: "Draft", role: "Mutable authoring state", detail: "Iterate before freezing a workflow definition." },
+  { id: "artifact", label: "Artifact", role: "Immutable workflow definition", detail: "Save a versioned plan that can be deployed." },
+  { id: "deployment", label: "Deployment", role: "Source binding", detail: "Bind workflow requirements to configured runtime sources." },
+  { id: "run", label: "Run", role: "Execution record and trace", detail: "Persist status, outputs, interrupts, and trace evidence." },
+] as const;
 
-const LifecycleScene = ({ scene, beat }: { scene: SceneDefinition; beat: SceneBeatDefinition }) => (
-  <>
-    <StageCaption eyebrow="Act II · implemented" title={scene.title}>
-      <p>{beat.caption}</p>
-    </StageCaption>
-    <div className="scene-body__lifecycle">
-      {lifecycleStages.map((stage, i) => (
-        <div
-          key={stage.id}
-          className={`scene-body__lifecycle-stage${beat.id === stage.id ? " scene-body__lifecycle-stage--active" : ""}`}
-        >
-          <span className="scene-body__lifecycle-number">{i + 1}</span>
-          <strong>{stage.label}</strong>
-          {i < lifecycleStages.length - 1 && <span className="scene-body__lifecycle-arrow">→</span>}
-        </div>
-      ))}
-    </div>
-    <p className="scene-body__evidence">{scene.evidencePointer}</p>
-  </>
-);
+const LifecycleScene = ({ scene, beat }: { scene: SceneDefinition; beat: SceneBeatDefinition }) => {
+  const activeIndex = Math.max(0, lifecycleStages.findIndex((stage) => stage.id === beat.id));
+  const activeStage = lifecycleStages[activeIndex] ?? lifecycleStages[0];
+  return (
+    <>
+      <StageCaption eyebrow="Act II · implemented" title={scene.title}>
+        <p>{beat.caption}</p>
+      </StageCaption>
+      <div className="scene-body__lifecycle" aria-label="workflow lifecycle rail" data-lifecycle-active-stage={activeStage.id}>
+        {lifecycleStages.map((stage, i) => (
+          <article
+            key={stage.id}
+            className="scene-body__lifecycle-stage"
+            data-lifecycle-active={i === activeIndex ? "true" : "false"}
+            data-lifecycle-complete={i < activeIndex ? "true" : "false"}
+          >
+            <span className="scene-body__lifecycle-number">{i + 1}</span>
+            <strong>{stage.label}</strong>
+            <small>{stage.role}</small>
+            {i < lifecycleStages.length - 1 && <span className="scene-body__lifecycle-arrow">→</span>}
+          </article>
+        ))}
+      </div>
+      <aside className="scene-body__lifecycle-current" aria-label="current lifecycle state">
+        <span>{activeStage.label}</span>
+        <strong>{activeStage.role}</strong>
+        <p>{activeStage.detail}</p>
+      </aside>
+      <p className="scene-body__evidence">{scene.evidencePointer}</p>
+    </>
+  );
+};
 
 const authoringSteps = [
   { id: "discover", label: "Discover capability", detail: "wf schema / cap inspect" },

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

@@ -827,22 +827,45 @@
 }
 
 .scene-body__lifecycle {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  margin-top: 0.75rem;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.65rem;
+  align-items: stretch;
+  margin-top: 1.2rem;
 }
 
 .scene-body__lifecycle-stage {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid oklch(0.36 0.04 250);
-  background: oklch(0.16 0.025 250);
-  border-radius: 0.5rem;
-  font-size: 0.85rem;
+  position: relative;
+  display: grid;
+  align-content: start;
+  gap: 0.5rem;
+  min-height: 9rem;
+  border: 1px solid color-mix(in oklch, var(--color-editorial-muted, oklch(0.48 0.025 65)) 32%, transparent);
+  border-radius: 0.9rem;
+  padding: 0.9rem;
+  background: color-mix(in oklch, var(--color-editorial-paper, oklch(0.975 0.012 82)) 82%, white);
+  color: var(--color-editorial-ink, oklch(0.19 0.015 65));
+}
+
+.scene-body__lifecycle-stage[data-lifecycle-active="false"] {
+  opacity: 0.68;
+}
+
+.scene-body__lifecycle-stage[data-lifecycle-active="true"] {
+  opacity: 1;
+  transform: translateY(-0.25rem);
+  border-color: color-mix(in oklch, var(--accent-cyan, oklch(0.7 0.16 195)) 58%, transparent);
+  background: color-mix(in oklch, var(--accent-cyan, oklch(0.7 0.16 195)) 8%, var(--color-editorial-paper, oklch(0.975 0.012 82)));
+}
+
+.scene-body__lifecycle-stage strong {
+  color: var(--color-editorial-ink, oklch(0.19 0.015 65));
+  font-size: 1.2rem;
+}
+
+.scene-body__lifecycle-stage small {
+  color: color-mix(in oklch, var(--color-editorial-ink, oklch(0.19 0.015 65)) 72%, var(--color-editorial-muted, oklch(0.48 0.025 65)));
+  line-height: 1.3;
 }
 
 .scene-body__authoring-loop {
@@ -908,7 +931,18 @@
   }
 }
 
-.scene-body__lifecycle-number,
+.scene-body__lifecycle-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  background: color-mix(in oklch, var(--accent-cyan, oklch(0.7 0.16 195)) 74%, white);
+  color: var(--color-editorial-ink, oklch(0.19 0.015 65));
+  font: 800 0.72rem/1 var(--font-mono, monospace);
+}
+
 .scene-body__authoring-number {
   display: inline-flex;
   align-items: center;
@@ -923,8 +957,38 @@
 }
 
 .scene-body__lifecycle-arrow {
-  color: oklch(0.5 0.06 250);
-  font-size: 1.1rem;
+  position: absolute;
+  right: -0.55rem;
+  top: 50%;
+  color: var(--color-editorial-muted, oklch(0.48 0.025 65));
+  transform: translateY(-50%);
+}
+
+.scene-body__lifecycle-current {
+  display: grid;
+  gap: 0.3rem;
+  margin-top: 0.9rem;
+  border: 1px solid color-mix(in oklch, var(--color-editorial-muted, oklch(0.48 0.025 65)) 28%, transparent);
+  border-radius: 0.85rem;
+  padding: 0.8rem 0.9rem;
+  background: color-mix(in oklch, var(--color-editorial-paper, oklch(0.975 0.012 82)) 86%, white);
+  color: var(--color-editorial-ink, oklch(0.19 0.015 65));
+}
+
+.scene-body__lifecycle-current span {
+  color: var(--color-editorial-muted, oklch(0.48 0.025 65));
+  font: 700 0.66rem/1 var(--font-mono, monospace);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.scene-body__lifecycle-current strong,
+.scene-body__lifecycle-current p {
+  margin: 0;
+}
+
+.scene-body__lifecycle-current p {
+  color: color-mix(in oklch, var(--color-editorial-ink, oklch(0.19 0.015 65)) 76%, var(--color-editorial-muted, oklch(0.48 0.025 65)));
 }
 
 .scene-body__architecture {
@@ -985,21 +1049,6 @@
 }
 
 /* Beat-driven active states */
-.scene-body__lifecycle-stage {
-  transition: opacity 0.3s ease, transform 0.25s ease, border-color 0.2s ease, background 0.2s ease;
-}
-
-.scene-body__lifecycle-stage:not(.scene-body__lifecycle-stage--active) {
-  opacity: 0.4;
-  transform: scale(0.96);
-}
-
-.scene-body__lifecycle-stage--active {
-  border-color: oklch(0.7 0.16 195);
-  background: oklch(0.2 0.06 195);
-  transform: scale(1.03);
-}
-
 .scene-body__architecture-layer {
   transition: opacity 0.3s ease, transform 0.25s ease, border-color 0.2s ease, background 0.2s ease;
 }