feat: mark presentation side surfaces

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

@@ -12,6 +12,18 @@ describe("DiscussionPanel", () => {
     onClose.mockClear();
   });
 
+  it("renders Q&A branches on the editorial presentation surface", () => {
+    render(<DiscussionPanel branchId="where-is-ai-agent" onClose={onClose} />);
+
+    expect(screen.getByRole("dialog")).toHaveAttribute("data-presentation-surface", "editorial");
+  });
+
+  it("renders legacy discussion branches on the same editorial surface", () => {
+    render(<DiscussionPanel branchId="hosted-automation" onClose={onClose} />);
+
+    expect(screen.getByRole("dialog")).toHaveAttribute("data-presentation-surface", "editorial");
+  });
+
   it("renders the branch title and claim class", () => {
     render(<DiscussionPanel branchId="hosted-automation" onClose={onClose} />);
     expect(screen.getByRole("dialog")).toHaveAttribute("aria-label", "Hosted automation");

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

@@ -50,6 +50,7 @@ export const DiscussionPanel = ({ branchId, onClose }: DiscussionPanelProps) =>
     <div
       ref={dialogRef}
       className="discussion-panel"
+      data-presentation-surface="editorial"
       role="dialog"
       aria-modal="true"
       aria-label={branch.title}

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

@@ -8,6 +8,26 @@ import type { AgentMessage } from "../demo/agent/events.js";
 afterEach(() => cleanup());
 
 describe("OperatorChat", () => {
+  it("maps light chat theme to the editorial presentation surface", () => {
+    const state = {
+      ...initialPresentationState,
+      location: { kind: "main" as const, sceneId: "workflow-demo" as const, beatId: "graph", focusPath: [] },
+    };
+
+    render(<OperatorChat state={state} />);
+
+    const chat = screen.getByLabelText("scripted operator chat");
+    expect(chat).toHaveAttribute("data-chat-theme", "light");
+    expect(chat).toHaveAttribute("data-presentation-surface", "editorial");
+  });
+
+  it("maps dark chat theme to the night presentation surface", () => {
+    render(<OperatorChat state={initialPresentationState} />);
+
+    const chat = screen.getByLabelText("scripted operator chat");
+    expect(chat).toHaveAttribute("data-presentation-surface", "night");
+  });
+
   it("exposes chat theme and readable surface attributes", () => {
     render(<OperatorChat state={initialPresentationState} />);
 

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

@@ -111,12 +111,14 @@ const partKey = (messageId: string, part: AgentMessagePart): string => {
 export const OperatorChat = ({ state, messages, onApprove, onDeny }: OperatorChatProps) => {
   const visibleMessages = messages && messages.length > 0 ? messages : fallbackMessages(state);
   const composition = compositionForState(state);
+  const presentationSurface = composition.chatTheme === "light" ? "editorial" : "night";
   return (
     <aside
       className="operator-chat"
       data-mode={composition.chatMode}
       data-chat-theme={composition.chatTheme}
       data-readable-surface={composition.chatTheme === "light" ? "light" : "dark"}
+      data-presentation-surface={presentationSurface}
       aria-label="scripted operator chat"
     >
       {visibleMessages.map((message) => (