fix: add React Flow handles, fix keyboard, NodeUse active, beat captions

web/apps/console/src/presentation/scenes/ArchitectureScene.test.tsx

@@ -31,12 +31,35 @@ afterAll(() => {
   delete (globalThis as Record<string, unknown>).DOMRect;
 });
 
+const mockScene = {
+  id: "architecture",
+  number: 6,
+  title: "Architecture Zoom",
+  claimClass: "implemented" as const,
+  evidencePointer: "Thesis System Architecture",
+  stageTheme: "night" as const,
+  view: "architecture" as const,
+  beats: [],
+};
+
+const mockBeat = {
+  id: "client",
+  title: "Client operations",
+  caption: "Human and agent clients use the same public lifecycle surface.",
+  chatMode: "rail" as const,
+  chatTheme: "light" as const,
+  evidenceMode: "hidden" as const,
+  figure: { catalogId: "system-architecture", focusPath: [] as readonly string[], activeNodeId: "client-operations" },
+};
+
 const renderArchitecture = (overrides: Partial<React.ComponentProps<typeof ArchitectureScene>> = {}) => {
   const onFocusPathChange = overrides.onFocusPathChange ?? vi.fn();
   return {
     onFocusPathChange,
     ...render(
       <ArchitectureScene
+        scene={overrides.scene ?? mockScene}
+        beat={overrides.beat ?? mockBeat}
         focusPath={overrides.focusPath ?? []}
         activeNodeId={overrides.activeNodeId ?? null}
         onFocusPathChange={onFocusPathChange}

web/apps/console/src/presentation/scenes/ArchitectureScene.tsx

@@ -1,8 +1,11 @@
 import { StageCaption } from "../StageCaption.js";
 import { InteractiveFigure } from "../figures/InteractiveFigure.js";
 import { architectureCatalog } from "../figures/architecture-catalog.js";
+import type { SceneDefinition, SceneBeatDefinition } from "../storyboard.js";
 
 type ArchitectureSceneProps = {
+  readonly scene: SceneDefinition;
+  readonly beat: SceneBeatDefinition;
   readonly focusPath: readonly string[];
   readonly activeNodeId: string | null;
   readonly onFocusPathChange: (path: readonly string[]) => void;
@@ -10,14 +13,16 @@ type ArchitectureSceneProps = {
 };
 
 export const ArchitectureScene = ({
+  scene,
+  beat,
   focusPath,
   activeNodeId,
   onFocusPathChange,
   motionDisabled,
 }: ArchitectureSceneProps) => (
   <>
-    <StageCaption eyebrow="Act II · implemented" title="Architecture Zoom">
-      <p>The system exposes one public lifecycle surface across all client types.</p>
+    <StageCaption eyebrow={`Act II · ${scene.claimClass}`} title={scene.title}>
+      <p>{beat.caption}</p>
     </StageCaption>
     <InteractiveFigure
       catalog={architectureCatalog}