style: establish editorial surfaces for authoring scenes

web/apps/console/src/presentation/authoring/AgentHandoffScene.test.tsx

@@ -26,6 +26,10 @@ describe("AgentHandoffScene", () => {
       "data-handoff-phase",
       "discover",
     );
+    expect(screen.getByRole("region", { name: "prepared agent handoff" })).toHaveAttribute(
+      "data-presentation-surface",
+      "editorial",
+    );
     expect(screen.getByRole("log", { name: "prepared authoring conversation" })).toHaveAttribute(
       "data-surface",
       "stage",

web/apps/console/src/presentation/authoring/AgentHandoffScene.tsx

@@ -29,7 +29,7 @@ export const AgentHandoffScene = ({ beat, timelineAgent }: AgentHandoffSceneProp
   const activeIndex = phases.findIndex(({ id }) => id === phase);
 
   return (
-    <section className="agent-handoff-scene" aria-label="prepared agent handoff" data-handoff-phase={phase}>
+    <section className="agent-handoff-scene" aria-label="prepared agent handoff" data-handoff-phase={phase} data-presentation-surface="editorial">
       <header className="agent-handoff-scene__header">
         <span>Prepared replay</span>
         <strong>External agent → workflow substrate</strong>

web/apps/console/src/presentation/authoring/AuthoringPhaseVisual.test.tsx

@@ -6,9 +6,23 @@ import { AuthoringPhaseVisual } from "./AuthoringPhaseVisual.js";
 afterEach(cleanup);
 
 describe("AuthoringPhaseVisual", () => {
+  it.each(["discover", "draft", "validate", "artifact", "deployment"] as const)(
+    "marks the %s visual as editorial",
+    (phase) => {
+      render(<AuthoringPhaseVisual projection={projectPreparedAuthoringPhase(phase)} />);
+      expect(screen.getByRole("region", { name: /evidence/i })).toHaveAttribute(
+        "data-presentation-surface",
+        "editorial",
+      );
+    },
+  );
+
   it("shows source inventory and the inspected contract", () => {
     render(<AuthoringPhaseVisual projection={projectPreparedAuthoringPhase("discover")} />);
-    expect(screen.getByRole("region", { name: /discovery evidence/i })).toBeInTheDocument();
+    expect(screen.getByRole("region", { name: /discovery evidence/i })).toHaveAttribute(
+      "data-presentation-surface",
+      "editorial",
+    );
     expect(screen.getByText("local.lda_docs")).toBeInTheDocument();
     expect(screen.getByText("local.lda_report")).toBeInTheDocument();
     expect(screen.getByText(/documents.*analysis/i)).toBeInTheDocument();

web/apps/console/src/presentation/authoring/AuthoringPhaseVisual.tsx

@@ -15,7 +15,7 @@ type AuthoringPhaseVisualProps = {
 };
 
 const InventoryVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "inventory" }> }) => (
-  <section className="authoring-visual authoring-visual--inventory" aria-label="discovery evidence">
+  <section className="authoring-visual authoring-visual--inventory" aria-label="discovery evidence" data-presentation-surface="editorial">
     <div className="authoring-inventory__sources">
       {visual.sources.map((source) => (
         <div key={source}><Database aria-hidden="true" /><code>{source}</code></div>
@@ -31,7 +31,7 @@ const InventoryVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection[
 );
 
 const GraphVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "graph" }> }) => (
-  <section className="authoring-visual authoring-visual--graph" aria-label="draft graph evidence">
+  <section className="authoring-visual authoring-visual--graph" aria-label="draft graph evidence" data-presentation-surface="editorial">
     <div className="authoring-graph__node"><Database aria-hidden="true" /><strong>{visual.nodes[0]}</strong></div>
     <div className="authoring-graph__edge"><span>{visual.inputBinding}</span><ArrowRight aria-hidden="true" /></div>
     <div className="authoring-graph__node"><Workflow aria-hidden="true" /><strong>{visual.nodes[1]}</strong></div>
@@ -41,7 +41,7 @@ const GraphVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["vis
 );
 
 const RepairVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "repair" }> }) => (
-  <section className="authoring-visual authoring-visual--repair" aria-label="validation repair evidence">
+  <section className="authoring-visual authoring-visual--repair" aria-label="validation repair evidence" data-presentation-surface="editorial">
     <div className="authoring-repair__diagnostic"><AlertTriangle aria-hidden="true" /><span>Diagnostic</span><strong>{visual.diagnostic}</strong></div>
     <ArrowRight aria-hidden="true" />
     <div className="authoring-repair__correction"><Link2 aria-hidden="true" /><span>Repair</span><code>{visual.correction}</code></div>
@@ -50,7 +50,7 @@ const RepairVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["vi
 );
 
 const ArtifactVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "artifact" }> }) => (
-  <section className="authoring-visual authoring-visual--artifact" aria-label="artifact evidence">
+  <section className="authoring-visual authoring-visual--artifact" aria-label="artifact evidence" data-presentation-surface="editorial">
     <LockKeyhole aria-hidden="true" />
     <div><span>Immutable workflow artifact</span><strong>{visual.artifactId}</strong></div>
     <dl><div><dt>Version</dt><dd>Version {visual.version}</dd></div><div><dt>Requirements</dt><dd>{visual.requiredSources} local sources</dd></div></dl>
@@ -58,7 +58,7 @@ const ArtifactVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["
 );
 
 const BindingsVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "bindings" }> }) => (
-  <section className="authoring-visual authoring-visual--bindings" aria-label="deployment binding evidence">
+  <section className="authoring-visual authoring-visual--bindings" aria-label="deployment binding evidence" data-presentation-surface="editorial">
     <header><Link2 aria-hidden="true" /><div><span>Deployment</span><strong>{visual.deploymentId}</strong></div><b><CheckCircle2 aria-hidden="true" />{visual.status}</b></header>
     <div className="authoring-bindings__rows">
       {visual.bindings.map((binding) => (

web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.test.tsx

@@ -15,6 +15,10 @@ const renderBeat = (beatId: string) => {
 describe("PreparedAuthoringLifecycleScene", () => {
   it("discover shows sources, capabilities, and schema", () => {
     renderBeat("discover");
+    expect(screen.getByRole("region", { name: "prepared workflow authoring lifecycle" })).toHaveAttribute(
+      "data-presentation-surface",
+      "editorial",
+    );
     expect(screen.getByText("Discover")).toBeInTheDocument();
     expect(screen.getAllByText(/sources|capabilities|schema/i).length).toBeGreaterThanOrEqual(1);
   });

web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.tsx

@@ -42,6 +42,7 @@ export const PreparedAuthoringLifecycleScene = ({ scene, beat }: PreparedAuthori
         data-active-phase={beatId}
         data-primary-surface="authoring-phase"
         data-support-surface="prepared-chat"
+        data-presentation-surface="editorial"
       >
         <ol className="prepared-lifecycle-scene__rail" aria-label="authoring phase rail">
           {phases.map((phase) => (

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

@@ -36,6 +36,25 @@
   background: transparent;
 }
 
+.agent-handoff-scene[data-presentation-surface="editorial"],
+.prepared-lifecycle-scene[data-presentation-surface="editorial"],
+.authoring-visual[data-presentation-surface="editorial"] {
+  --authoring-paper: var(--color-editorial-paper, oklch(0.975 0.012 82));
+  --authoring-ink: var(--color-editorial-ink, oklch(0.19 0.015 65));
+  --authoring-muted: var(--color-editorial-muted, oklch(0.48 0.025 65));
+  --authoring-rule: color-mix(in oklch, var(--authoring-muted) 32%, transparent);
+  background: var(--authoring-paper);
+  color: var(--authoring-ink);
+}
+
+.presentation-stage__primary > .agent-handoff-scene,
+.presentation-stage__primary > .prepared-lifecycle-scene {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
+
 .presentation-stage {
   --presentation-footer-height: 2.5rem;
   position: relative;