feat: add presentation problem visual

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

@@ -62,6 +62,30 @@ describe("SceneBody", () => {
     expect(screen.getByRole("button", { name: /where is the ai agent/i })).toBeInTheDocument();
   });
 
+  it("renders Scene 2 as action sequence versus reusable automation", () => {
+    const location: PresentationLocation = { kind: "main", sceneId: "problem", beatId: "missing-contracts", focusPath: [] };
+
+    render(
+      <SceneBody
+        location={location}
+        demo={demo}
+        selectedNodeId={null}
+        selectNode={noop}
+        openEvidence={noop}
+        openDiscussion={noop}
+        onFocusPathChange={noop}
+        motionDisabled={false}
+      />,
+    );
+
+    expect(screen.getByLabelText("action sequence versus reusable automation")).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Action sequence" })).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Reusable automation" })).toBeInTheDocument();
+    expect(screen.queryByText("Draft")).not.toBeInTheDocument();
+    expect(screen.queryByText("Artifact")).not.toBeInTheDocument();
+    expect(screen.queryByText("Deployment")).not.toBeInTheDocument();
+  });
+
   it("renders narrative metadata without mounting the demo graph", () => {
     const location: PresentationLocation = { kind: "main", sceneId: "positioning", beatId: "landscape", focusPath: [] };
     render(

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

@@ -13,6 +13,7 @@ import { DemoWorkflowScene } from "./DemoWorkflowScene.js";
 import { StageCaption } from "./StageCaption.js";
 import { ArchitectureScene } from "./scenes/ArchitectureScene.js";
 import { OpeningThesisScene } from "./opening/OpeningThesisScene.js";
+import { ProblemLoopScene } from "./opening/ProblemLoopScene.js";
 
 type SceneBodyProps = {
   readonly location: PresentationLocation;
@@ -306,6 +307,7 @@ export const SceneBody = ({ location, demo, selectedNodeId, selectNode, openEvid
   switch (scene.view) {
     case "narrative":
       if (scene.id === "thesis") return <OpeningThesisScene scene={scene} beat={beat} />;
+      if (scene.id === "problem") return <ProblemLoopScene scene={scene} beat={beat} />;
       return <NarrativeScene scene={scene} beat={beat} />;
     case "positioning":
       return <PositioningScene scene={scene} beat={beat} />;

web/apps/console/src/presentation/opening/ProblemLoopScene.test.tsx

@@ -0,0 +1,33 @@
+import { cleanup, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { findBeat, findScene } from "../storyboard.js";
+import { ProblemLoopScene } from "./ProblemLoopScene.js";
+
+const problemScene = findScene("problem")!;
+
+afterEach(() => cleanup());
+
+describe("ProblemLoopScene", () => {
+  it("renders the action sequence as useful but insufficient", () => {
+    render(<ProblemLoopScene scene={problemScene} beat={findBeat("problem", "direct-actions")!} />);
+
+    const action = screen.getByRole("group", { name: "Action sequence" });
+    expect(within(action).getByText("think")).toBeInTheDocument();
+    expect(within(action).getAllByText("tool")).toHaveLength(2);
+    expect(within(action).getByText("observe")).toBeInTheDocument();
+    expect(within(action).getByText("done")).toBeInTheDocument();
+    expect(screen.getByText(/useful once/i)).toBeInTheDocument();
+  });
+
+  it("renders reusable automation with simple verbs only", () => {
+    render(<ProblemLoopScene scene={problemScene} beat={findBeat("problem", "missing-contracts")!} />);
+
+    const automation = screen.getByRole("group", { name: "Reusable automation" });
+    for (const label of ["design", "save", "connect", "run", "inspect"]) {
+      expect(within(automation).getByText(label)).toBeInTheDocument();
+    }
+    for (const formalName of ["Draft", "Artifact", "Deployment", "Trace"]) {
+      expect(screen.queryByText(formalName)).not.toBeInTheDocument();
+    }
+  });
+});

web/apps/console/src/presentation/opening/ProblemLoopScene.tsx

@@ -0,0 +1,47 @@
+import { StageCaption } from "../StageCaption.js";
+import type { SceneBeatDefinition, SceneDefinition } from "../storyboard.js";
+import { ConceptNode, ConceptRail } from "./ConceptPrimitives.js";
+
+type ProblemLoopSceneProps = {
+  readonly scene: SceneDefinition;
+  readonly beat: SceneBeatDefinition;
+};
+
+export const ProblemLoopScene = ({ scene, beat }: ProblemLoopSceneProps) => {
+  const automationBeat = beat.id === "missing-contracts";
+  return (
+    <>
+      <StageCaption eyebrow="Problem shape" title={scene.title}>
+        <p>{beat.caption}</p>
+      </StageCaption>
+      <section className="problem-loop-scene" aria-label="action sequence versus reusable automation">
+        <div className="problem-loop-scene__side" data-problem-active={automationBeat ? "false" : "true"}>
+          <h2>Action sequence</h2>
+          <ConceptRail label="Action sequence">
+            <ConceptNode title="think" icon="think" emphasis={automationBeat ? "muted" : "normal"} />
+            <ConceptNode title="tool" icon="toolCall" emphasis={automationBeat ? "muted" : "normal"} />
+            <ConceptNode title="observe" icon="observe" emphasis={automationBeat ? "muted" : "normal"} />
+            <ConceptNode title="tool" icon="toolCall" emphasis={automationBeat ? "muted" : "normal"} />
+            <ConceptNode title="done" icon="done" emphasis={automationBeat ? "muted" : "normal"} />
+          </ConceptRail>
+          <p>Useful once. Hard to reuse.</p>
+        </div>
+
+        <div className="problem-loop-scene__bridge" aria-hidden="true">→</div>
+
+        <div className="problem-loop-scene__side" data-problem-active={automationBeat ? "true" : "false"}>
+          <h2>Reusable automation</h2>
+          <ConceptRail label="Reusable automation">
+            <ConceptNode title="design" icon="design" emphasis={automationBeat ? "primary" : "normal"} />
+            <ConceptNode title="save" icon="save" emphasis={automationBeat ? "primary" : "normal"} />
+            <ConceptNode title="connect" icon="connect" emphasis={automationBeat ? "primary" : "normal"} />
+            <ConceptNode title="run" icon="run" emphasis={automationBeat ? "primary" : "normal"} />
+            <ConceptNode title="inspect" icon="inspect" emphasis={automationBeat ? "primary" : "normal"} />
+          </ConceptRail>
+          <p>The platform makes work reusable.</p>
+        </div>
+      </section>
+      <p className="scene-body__evidence">{scene.evidencePointer}</p>
+    </>
+  );
+};

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

@@ -1401,6 +1401,74 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+/* Problem loop scene */
+.problem-loop-scene {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 1rem;
+}
+
+.problem-loop-scene__side {
+  display: grid;
+  gap: 0.8rem;
+  min-width: 0;
+  border: 1px solid color-mix(in oklch, var(--stage-line) 60%, transparent);
+  border-radius: 1rem;
+  background: var(--stage-inset);
+  padding: 1rem;
+}
+
+.problem-loop-scene__side[data-problem-active="false"] {
+  opacity: 0.62;
+}
+
+.problem-loop-scene__side h2 {
+  margin: 0;
+  color: var(--text-primary);
+  font: 800 clamp(1.5rem, 3vw, 2.4rem)/0.95 var(--font-editorial);
+}
+
+.problem-loop-scene__side p {
+  margin: 0;
+  color: var(--text-secondary);
+  font: 0.95rem/1.35 var(--font-interface);
+}
+
+.problem-loop-scene .concept-rail {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.problem-loop-scene .concept-node {
+  grid-template-columns: 1fr;
+  justify-items: center;
+  text-align: center;
+  padding: 0.7rem 0.45rem;
+}
+
+.problem-loop-scene .concept-node__copy span,
+.problem-loop-scene .concept-node__meta {
+  display: none;
+}
+
+.problem-loop-scene__bridge {
+  color: var(--accent-cyan);
+  font: 800 2rem/1 var(--font-interface);
+}
+
+@container presentation-canvas (max-width: 1050px) {
+  .problem-loop-scene {
+    grid-template-columns: 1fr;
+  }
+
+  .problem-loop-scene__bridge {
+    display: none;
+  }
+}
+
 /* Demo workflow scene */
 .demo-workflow-scene__graph-area {
   flex: 1;