feat: enlarge architecture presentation figure

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

@@ -83,6 +83,7 @@ const renderFigure = (overrides: Partial<React.ComponentProps<typeof Interactive
         activeNodeId={restOverrides.activeNodeId ?? null}
         onFocusPathChange={onFocusPathChange}
         motionDisabled={restOverrides.motionDisabled ?? false}
+        size={restOverrides.size ?? "standard"}
       />,
     ),
   };
@@ -178,6 +179,13 @@ describe("InteractiveFigure", () => {
     expect(screen.getAllByRole("button").length).toBeGreaterThan(1);
   });
 
+  it("marks stage figures as horizontally navigable presentation maps", () => {
+    renderFigure({ focusPath: [], size: "stage" });
+    const figure = screen.getByRole("group", { name: /architecture/i });
+    expect(figure).toHaveAttribute("data-figure-size", "stage");
+    expect(figure.querySelector(".interactive-figure__canvas")).toBeInTheDocument();
+  });
+
   it("resets roving focus when focusPath changes", () => {
     const { rerender } = render(
       <InteractiveFigure

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

@@ -19,7 +19,7 @@ type InteractiveFigureProps = {
   readonly activeNodeId: string | null;
   readonly onFocusPathChange: (path: readonly string[]) => void;
   readonly motionDisabled: boolean;
-  readonly size?: "standard" | "wide";
+  readonly size?: "standard" | "wide" | "stage";
 };
 
 type FigureNodeData = {

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

@@ -116,6 +116,46 @@
   max-width: 100%;
 }
 
+.interactive-figure[data-figure-size="stage"] {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0 0 0.45rem;
+  scrollbar-gutter: stable;
+}
+
+.interactive-figure[data-figure-size="stage"] .figure-breadcrumbs {
+  min-height: 1.6rem;
+  padding: 0.15rem 0 0.35rem;
+}
+
+.interactive-figure[data-figure-size="stage"] .interactive-figure__canvas {
+  min-width: 1440px;
+  min-height: 470px;
+}
+
+.interactive-figure[data-figure-size="stage"] .react-flow {
+  border: 1px solid color-mix(in oklch, var(--color-editorial-muted, oklch(0.48 0.025 65)) 42%, transparent);
+  border-radius: 0.65rem;
+  background:
+    linear-gradient(90deg, color-mix(in oklch, var(--color-editorial-paper, oklch(0.975 0.012 82)) 92%, white), transparent 65%),
+    color-mix(in oklch, var(--color-editorial-surface, oklch(0.96 0.012 82)) 94%, white);
+}
+
+.interactive-figure[data-figure-size="stage"] .figure-node {
+  width: 256px;
+  height: 112px;
+  padding: 12px 16px;
+}
+
+.interactive-figure[data-figure-size="stage"] .figure-node__label {
+  font-size: 16px;
+}
+
+.interactive-figure[data-figure-size="stage"] .figure-node__summary {
+  font-size: 12.5px;
+  line-height: 1.25;
+}
+
 .figure-node__expand-affordance {
   position: absolute;
   top: 8px;

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

@@ -81,10 +81,10 @@ describe("ArchitectureScene", () => {
     expect(onFocusPathChange).toHaveBeenCalledWith(["runtime-providers"]);
   });
 
-  it("uses the wide figure presentation for the defense architecture scene", () => {
+  it("uses the stage figure presentation for the defense architecture scene", () => {
     renderArchitecture({ focusPath: [] });
-    expect(screen.getByRole("group", { name: /architecture/i })).toHaveAttribute("data-figure-size", "wide");
+    expect(screen.getByRole("group", { name: /architecture/i })).toHaveAttribute("data-figure-size", "stage");
-    expect(screen.getByTestId("architecture-scene")).toBeInTheDocument();
+    expect(screen.getByTestId("architecture-scene")).toHaveAttribute("data-visual-pass", "architecture-stage");
   });
 
   it("renders a directly linked nested provider view", () => {

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

@@ -31,7 +31,7 @@ export const ArchitectureScene = ({
     : architectureCatalog;
 
   return (
-    <section className="architecture-scene" data-testid="architecture-scene">
+    <section className="architecture-scene" data-testid="architecture-scene" data-visual-pass="architecture-stage">
       <StageCaption eyebrow={`Act II · ${scene.claimClass}`} title={scene.title}>
         <p>{beat.caption}</p>
       </StageCaption>
@@ -41,7 +41,7 @@ export const ArchitectureScene = ({
         activeNodeId={activeNodeId}
         onFocusPathChange={onFocusPathChange}
         motionDisabled={motionDisabled}
-        size="wide"
+        size="stage"
       />
     </section>
   );