fix: apply authored presentation stage themes

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

@@ -17,10 +17,17 @@ describe("PresentationCanvas", () => {
     const canvas = screen.getByTestId("presentation-canvas");
 
     expect(canvas).toHaveClass("presentation-canvas");
+    expect(canvas).toHaveAttribute("data-stage-theme", "paper");
     expect(canvas.style.transform).toBe("");
     expect(canvas).toHaveTextContent("Scene");
   });
 
+  it("applies the authored night stage theme without changing canvas geometry", () => {
+    render(<PresentationCanvas stageTheme="night"><div>Scene</div></PresentationCanvas>);
+
+    expect(screen.getByTestId("presentation-canvas")).toHaveAttribute("data-stage-theme", "night");
+  });
+
   it("uses CSS ratio bounds instead of JavaScript scale calculations", () => {
     expect(editorialCss).toContain("width: min(100dvw, calc(100dvh * 16 / 9))");
     expect(editorialCss).toContain("height: min(100dvh, calc(100dvw * 9 / 12))");

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

@@ -1,8 +1,12 @@
 import type { ReactNode } from "react";
+import type { StageTheme } from "./storyboard.js";
 
-type PresentationCanvasProps = { readonly children: ReactNode };
+type PresentationCanvasProps = {
+  readonly children: ReactNode;
+  readonly stageTheme?: StageTheme;
+};
 
-export const PresentationCanvas = ({ children }: PresentationCanvasProps) => (
+export const PresentationCanvas = ({ children, stageTheme = "paper" }: PresentationCanvasProps) => (
   <div className="presentation-viewport">
     {/*
       Keep the presentation as normal responsive DOM instead of scaling the
@@ -13,6 +17,7 @@ export const PresentationCanvas = ({ children }: PresentationCanvasProps) => (
     <div
       className="presentation-canvas"
       data-testid="presentation-canvas"
+      data-stage-theme={stageTheme}
     >
       {children}
     </div>

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

@@ -13,7 +13,7 @@ import {
   presentationReducer,
 } from "./presentation-state.js";
 import { hashForLocation } from "./storyboard-navigation.js";
-import type { MainLocation } from "./storyboard.js";
+import { findScene, type MainLocation } from "./storyboard.js";
 import type { DemoApprovalActions, DemoApprovalUiState } from "./demo-approval-actions.js";
 import "./presentation.css";
 import "./styles/demo-workflow.css";
@@ -224,9 +224,13 @@ export const PresentationRoute = () => {
     [],
   );
 
+  const stageTheme = state.location.kind === "main"
+    ? findScene(state.location.sceneId)?.stageTheme ?? "paper"
+    : "paper";
+
   return (
     <main className="presentation-route" aria-label="lda.chat presentation" data-motion={state.motionDisabled ? "disabled" : "enabled"}>
-      <PresentationCanvas>
+      <PresentationCanvas stageTheme={stageTheme}>
         <PresentationStage
           state={state}
           demo={demo}

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

@@ -19,6 +19,16 @@
   --chat-width: 18rem;
 }
 
+.presentation-canvas[data-stage-theme="night"] .presentation-stage__primary {
+  background: var(--stage-canvas);
+  color: var(--text-primary);
+}
+
+.presentation-canvas[data-stage-theme="paper"] .presentation-stage__primary {
+  background: var(--color-editorial-paper, oklch(0.975 0.012 82));
+  color: var(--color-editorial-ink, oklch(0.19 0.015 65));
+}
+
 .presentation-stage {
   --presentation-footer-height: 2.5rem;
   position: relative;
@@ -1543,7 +1553,19 @@
 }
 
 .scene-body__authoring-evidence .authoring-visual {
-  min-height: 11rem;
+  min-height: 0;
+  overflow: auto;
+}
+
+.scene-body__authoring-evidence .authoring-visual--repair {
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 0.55rem 0.8rem;
+}
+
+.scene-body__authoring-evidence .authoring-repair__diagnostic,
+.scene-body__authoring-evidence .authoring-repair__correction {
+  min-height: 6.5rem;
+  padding: 0.75rem;
 }
 
 .scene-body__authoring-composition .scene-body__authoring-loop {
@@ -2834,6 +2856,9 @@
   min-height: 0;
   height: 100%;
   margin-inline: auto;
+  border-radius: 0.35rem;
+  background: var(--stage-canvas);
+  color: var(--text-primary);
 }
 
 .agent-handoff-scene__header {

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

@@ -40,3 +40,8 @@
   container-name: presentation-canvas;
   container-type: inline-size;
 }
+
+.presentation-canvas[data-stage-theme="night"] {
+  background: oklch(0.12 0.025 250);
+  color: oklch(0.96 0.01 250);
+}