fix: structure discussion modal regions

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

@@ -113,6 +113,27 @@ describe("DiscussionPanel", () => {
     expect(screen.getByLabelText("answer provenance")).toHaveTextContent(/Workflow Automation Platforms/i);
   });
 
+  it("renders Q&A discussion as shell, body, support, and actions regions", () => {
+    render(<DiscussionPanel branchId="where-is-ai-agent" onClose={onClose} />);
+
+    expect(screen.getByRole("dialog")).toHaveAttribute("data-discussion-layout", "qna");
+    expect(screen.getByLabelText("discussion shell")).toBeInTheDocument();
+    expect(screen.getByLabelText("discussion body")).toHaveTextContent("Where is the AI agent in this thesis?");
+    expect(screen.getByLabelText("discussion support")).toHaveTextContent("Evidence");
+    expect(screen.getByLabelText("discussion actions")).toContainElement(
+      screen.getByRole("button", { name: /return to thesis/i }),
+    );
+  });
+
+  it("renders context-only discussion with a compact support column", () => {
+    render(<DiscussionPanel branchId="hosted-automation" onClose={onClose} />);
+
+    expect(screen.getByRole("dialog")).toHaveAttribute("data-discussion-layout", "context");
+    expect(screen.getByLabelText("discussion body")).toHaveTextContent(/Hosted triggers/i);
+    expect(screen.getByLabelText("discussion support")).toHaveTextContent(/Workflow Automation Platforms/i);
+    expect(screen.queryByLabelText("defense question")).not.toBeInTheDocument();
+  });
+
   it("shows mcp-agent-scale links to Anthropic and Cloudflare", () => {
     render(<DiscussionPanel branchId="mcp-agent-scale" onClose={onClose} />);
     const anthropic = screen.getByText("Anthropic MCP");

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

@@ -59,16 +59,17 @@ export const DiscussionPanel = ({ branchId, onClose }: DiscussionPanelProps) =>
       aria-label={branch.title}
       onKeyDown={trapKeyboardWithinDialog}
     >
-      <header>
+      <div className="discussion-panel__shell" aria-label="discussion shell">
-        <h2>{branch.title}</h2>
+        <header className="discussion-panel__header">
+          <div>
             <span className="discussion-panel__badge">{branch.claimClass}</span>
+            <h2>{branch.title}</h2>
+          </div>
+          <p>{branch.summary}</p>
         </header>
-      <section className="discussion-panel__provenance" aria-label="answer provenance">
+
-        <span>Evidence</span>
+        <main className="discussion-panel__body" aria-label="discussion body">
-        <p>{branch.evidencePointer}</p>
+          {hasQuestion ? (
-      </section>
-      <p className="discussion-panel__summary">{branch.summary}</p>
-      {hasQuestion && (
             <section className="discussion-panel__qna" aria-label="defense question">
               <p className="discussion-panel__question">{branch.question}</p>
               {branch.shortAnswer && (
@@ -83,16 +84,12 @@ export const DiscussionPanel = ({ branchId, onClose }: DiscussionPanelProps) =>
                   <p>{branch.expandedAnswer}</p>
                 </article>
               )}
-          {branch.speakerHint && (
-            <aside className="discussion-panel__presenter-note" aria-label="presenter note">
-              <span>Presenter note</span>
-              <p>{branch.speakerHint}</p>
-            </aside>
-          )}
             </section>
-      )}
+          ) : (
+            <section className="discussion-panel__context" aria-label="discussion context">
+              <p>{branch.summary}</p>
               {branch.detail && (
-        <section className="discussion-panel__detail" aria-label="additional context">
+                <div className="discussion-panel__detail" aria-label="additional context">
                   <p>
                     {branch.detail.links?.map((link, index) => (
                       <span key={link.href}>
@@ -103,11 +100,31 @@ export const DiscussionPanel = ({ branchId, onClose }: DiscussionPanelProps) =>
                     {branch.detail.links && branch.detail.links.length > 0 ? " — " : ""}
                     {branch.detail.text}
                   </p>
+                </div>
+              )}
             </section>
           )}
+        </main>
+
+        <aside className="discussion-panel__aside" aria-label="discussion support">
+          <section className="discussion-panel__provenance" aria-label="answer provenance">
+            <span>Evidence</span>
+            <p>{branch.evidencePointer}</p>
+          </section>
+          {branch.speakerHint && (
+            <aside className="discussion-panel__presenter-note" aria-label="presenter note">
+              <span>Presenter note</span>
+              <p>{branch.speakerHint}</p>
+            </aside>
+          )}
+        </aside>
+
+        <footer className="discussion-panel__actions" aria-label="discussion actions">
           <button ref={returnButtonRef} type="button" onClick={onClose} className="discussion-panel__return">
             Return to {parentScene?.title ?? "scene"}
           </button>
+        </footer>
+      </div>
     </div>
   );
 };