fix: address review findings for editorial presentation

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

@@ -53,16 +53,6 @@ describe("PresentationRoute", () => {
     expect(await screen.findByText(/workflow.runs.resume/i)).toBeInTheDocument();
   });
 
-  it("runs the prepared agent and applies the interrupt node action", async () => {
-    render(<PresentationRoute />);
-
-    await userEvent.click(screen.getByRole("button", { name: /run prepared agent/i }));
-
-    expect(await screen.findByText(/prepared workflow recipe/i)).toBeInTheDocument();
-    expect(screen.getAllByText(/selectWorkflowNode/i).length).toBeGreaterThanOrEqual(2);
-    expect(await screen.findByRole("dialog", { name: /issue review/i })).toBeInTheDocument();
-  });
-
   it("opens a positioning branch via hash and returns to the parent scene first beat", async () => {
     window.location.hash = "#discuss/hosted-automation";
     render(<PresentationRoute />);

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

@@ -11,7 +11,6 @@ import {
   presentationReducer,
 } from "./presentation-state.js";
 import { hashForLocation } from "./storyboard-navigation.js";
-import { findScene } from "./storyboard.js";
 import type { PresentationLocation } from "./storyboard.js";
 import "./presentation.css";
 import "./styles/demo-workflow.css";
@@ -153,22 +152,6 @@ export const PresentationRoute = () => {
     [],
   );
 
-  const handleForceReplay = useCallback(() => {
-    demo.setMode("replay");
-    setEvidence(replayEvidence);
-  }, [demo, replayEvidence]);
-
-  const handleResetScene = useCallback(() => {
-    if (state.location.kind !== "main") return;
-    const scene = findScene(state.location.sceneId);
-    if (!scene || scene.beats.length === 0) return;
-    dispatch({ type: "jump", location: { kind: "main", sceneId: state.location.sceneId, beatId: scene.beats[0]!.id, focusPath: scene.beats[0]!.figure?.focusPath ?? [] } });
-  }, [state.location]);
-
-  const handleToggleMotion = useCallback(() => {
-    dispatch({ type: "toggle_motion" });
-  }, []);
-
   return (
     <main className="presentation-route" aria-label="lda.chat presentation" data-motion={state.motionDisabled ? "disabled" : "enabled"}>
       <PresentationCanvas>
@@ -187,14 +170,6 @@ export const PresentationRoute = () => {
           closeDiscussion={handleCloseDiscussion}
         />
       </PresentationCanvas>
-      <button
-        type="button"
-        onClick={() => agent.startPreparedReplay()}
-        disabled={agent.phase === "running" || agent.phase === "awaiting-approval"}
-        className="presentation-route__agent-button"
-      >
-        Run prepared agent
-      </button>
     </main>
   );
 };

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

@@ -74,7 +74,7 @@ export const PresentationStage = ({
                     jump({ ...state.location, focusPath: path });
                   }
                 }}
-                motionDisabled={false}
+                motionDisabled={state.motionDisabled}
               />
             )}
           </section>

web/apps/console/src/presentation/figures/InteractiveFigure.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from "react";
-import { ReactFlow, type Node, type Edge, type NodeTypes } from "@xyflow/react";
+import { ReactFlow, ReactFlowProvider, useReactFlow, type Node, type Edge, type NodeTypes } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import type { FigureCatalogDefinition, FigureNodeKind } from "./model.js";
 import { layoutFigure, NODE_WIDTH, NODE_HEIGHT, type PositionedFigure } from "./layout.js";
@@ -45,6 +45,7 @@ const FigureFlowNode = ({ data }: { data: FigureNodeData }) => {
       data-expandable={expandable}
       data-testid={`figure-node-${data.nodeId}`}
       aria-label={accessibleName}
+      tabIndex={-1}
       onClick={() => {
         data.onActivate(data.nodeId);
         if (expandable) data.onExpand(data.nodeId);
@@ -69,7 +70,15 @@ const nodeTypes: NodeTypes = {
   figure: FigureFlowNode,
 };
 
-export const InteractiveFigure = ({
+const FitViewOnLayoutChange = ({ layoutVersion }: { layoutVersion: number }) => {
+  const { fitView } = useReactFlow();
+  useEffect(() => {
+    void fitView({ padding: 0.15, duration: 0 });
+  }, [fitView, layoutVersion]);
+  return null;
+};
+
+const InteractiveFigureInner = ({
   catalog,
   focusPath,
   activeNodeId,
@@ -82,7 +91,7 @@ export const InteractiveFigure = ({
     activeNodeId ?? focus.figure.nodes[0]?.id ?? "",
   );
   const containerRef = useRef<HTMLDivElement>(null);
-  const prevFigureIdRef = useState(focus.figure.id);
+  const [layoutVersion, setLayoutVersion] = useState(0);
 
   useEffect(() => {
     if (activeNodeId) setFocusedNodeId(activeNodeId);
@@ -91,6 +100,7 @@ export const InteractiveFigure = ({
   useEffect(() => {
     const firstNode = focus.figure.nodes[0];
     if (firstNode) setFocusedNodeId(firstNode.id);
+    setLayoutVersion((v) => v + 1);
   }, [focus.figure.id]);
 
   const handleExpand = useCallback(
@@ -177,6 +187,15 @@ export const InteractiveFigure = ({
     [layout.edges],
   );
 
+  const handleNodeClick = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      const data = node.data as FigureNodeData;
+      setFocusedNodeId(data.nodeId);
+      if (data.isExpandable) handleExpand(data.nodeId);
+    },
+    [handleExpand],
+  );
+
   return (
     <div
       className="interactive-figure"
@@ -205,8 +224,17 @@ export const InteractiveFigure = ({
           zoomOnPinch={false}
           zoomOnDoubleClick={false}
           preventScrolling={false}
-        />
+          onNodeClick={handleNodeClick}
+        >
+          <FitViewOnLayoutChange layoutVersion={layoutVersion} />
+        </ReactFlow>
       </div>
     </div>
   );
 };
+
+export const InteractiveFigure = (props: InteractiveFigureProps) => (
+  <ReactFlowProvider>
+    <InteractiveFigureInner {...props} />
+  </ReactFlowProvider>
+);

web/apps/console/src/presentation/figures/architecture-catalog.ts

@@ -91,7 +91,7 @@ export const architectureCatalog: FigureCatalogDefinition = defineFigureCatalog(
           label: "WorkflowServer",
           summary: "wf_server composition",
           kind: "runtime",
-          evidencePointer: "src/wf_server/server.py",
+          evidencePointer: "src/wf_server/context.py",
         },
         {
           id: "workflow-api",

web/apps/console/src/presentation/figures/interactive-figure.css

@@ -11,6 +11,10 @@
   min-height: 0;
 }
 
+.interactive-figure .react-flow__pane {
+  pointer-events: none;
+}
+
 .interactive-figure .react-flow__node {
   cursor: default;
 }

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

@@ -417,19 +417,6 @@
   font-weight: 600;
 }
 
-.presentation-route__agent-button {
-  position: fixed;
-  bottom: 0.75rem;
-  right: 0.75rem;
-  padding: 0.45rem 0.75rem;
-  border: 1px solid oklch(0.4 0.05 250);
-  background: oklch(0.18 0.025 250);
-  color: inherit;
-  border-radius: 0.4rem;
-  font-size: 0.8rem;
-  z-index: 25;
-}
-
 .chat-tool-part {
   display: flex;
   align-items: center;

web/apps/console/src/presentation/storyboard.ts

@@ -140,7 +140,7 @@ export const mainScenes = defineScenes([
       sceneBeat("client", "Client operations", "Human and agent clients use the same public lifecycle surface.", { figure: { catalogId: "system-architecture", focusPath: [], activeNodeId: "client-operations" } }),
       sceneBeat("api", "Transport and API", "JSON-RPC reaches WorkflowApi without owning domain behavior.", { figure: { catalogId: "system-architecture", focusPath: [], activeNodeId: "application-lifecycle" } }),
       sceneBeat("runtime", "Runtime and providers", "The runtime resolves provider-neutral capabilities and stores lifecycle records.", { figure: { catalogId: "system-architecture", focusPath: ["runtime-providers"], activeNodeId: "configured-providers" } }),
-      sceneBeat("node-use", "NodeUse", "One callable node validates input, invokes a capability, and reduces output into state.", { evidenceMode: "peek", figure: { catalogId: "system-architecture", focusPath: [], activeNodeId: "node-use" } }),
+      sceneBeat("node-use", "NodeUse", "One callable node validates input, invokes a capability, and reduces output into state.", { evidenceMode: "peek", figure: { catalogId: "system-architecture", focusPath: ["node-use"], activeNodeId: "node-use" } }),
     ],
   },
   {