# Presentation Discussion Modal Composition Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Make discussion routes look like intentional defense overlays instead of plain document cards by giving Q&A and context-only branches a stage-aware composition.
**Architecture:** Keep discussion navigation, branch data, and focus-trap behavior unchanged. Add a small presentation shell around `DiscussionPanel` content: the panel remains the only dialog component, but it gets an inner layout with header, content, and action zones. CSS chooses a Q&A layout or context layout from `data-discussion-layout`; no new state, routes, or component library.
**Tech Stack:** React, TypeScript, Vitest, Testing Library, existing presentation CSS, Playwright CLI screenshots, `npx -y impeccable detect` rendered-route scan.
## Global Constraints
- Do not change branch ids, route hashes, or Q&A answer copy.
- Do not change focus trap semantics: return button focuses on open, Escape closes, Tab stays inside dialog.
- Do not introduce a modal library or component library.
- Do not touch demo workflow scenes, graph layout, evidence inspector, or replay state.
- Avoid slop patterns: centered generic card, huge empty context page, side-stripe callout, wide diffuse shadow, all-caps body text.
- At `1280x720`, both Q&A and context discussion routes must fit without page scroll.
---
## Current Findings
The previous discussion craft pass improved semantics and hierarchy, but screenshots still show:
- Q&A route reads as a document card spanning the top of the slide.
- Context-only route leaves the bottom two-thirds empty, which looks unfinished.
- Return action is functionally correct but visually disconnected from the content hierarchy.
This slice should make discussion feel like a stage overlay: left side for the question/claim, right side for answer/provenance/actions, and a compact context layout for non-Q&A branches.
---
## File Structure
- Modify `web/apps/console/src/presentation/DiscussionPanel.tsx`
- Add structural wrappers: `.discussion-panel__shell`, `.discussion-panel__header`, `.discussion-panel__body`, `.discussion-panel__aside`, `.discussion-panel__actions`.
- Keep current branch fields and focus trap.
- Modify `web/apps/console/src/presentation/DiscussionPanel.test.tsx`
- Pin shell/body/aside/actions semantics for Q&A and context layouts.
- Modify `web/apps/console/src/presentation/presentation.css`
- Add stage-sized discussion layout.
- Make context layout intentionally compact instead of top-heavy.
- Preserve existing editorial tokens and avoid shadows/side stripes.
- Modify `docs/current_roadmap.md`
- Mark this modal composition pass complete after implementation.
- Move this plan to `docs/historical/superpowers/plans/2026-07-09-presentation-discussion-modal-composition.md` after implementation.
---
### Task 1: Add Discussion Panel Composition Structure
**Files:**
- Modify: `web/apps/console/src/presentation/DiscussionPanel.tsx`
- Modify: `web/apps/console/src/presentation/DiscussionPanel.test.tsx`
**Interfaces:**
- Consumes: existing `DiscussionPanelProps` and `DiscussionBranchDefinition` fields.
- Produces: stable DOM sections with labels:
- `discussion shell`
- `discussion body`
- `discussion support`
- `discussion actions`
- [ ] **Step 1: Add failing structure tests**
In `web/apps/console/src/presentation/DiscussionPanel.test.tsx`, add:
```tsx
it("renders Q&A discussion as shell, body, support, and actions regions", () => {
render();
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();
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();
});
```
- [ ] **Step 2: Run tests and verify they fail**
Run:
```powershell
pnpm --dir web --filter @lda/console test -- src/presentation/DiscussionPanel.test.tsx
```
Expected: fail because the labelled shell/body/support/actions regions do not exist.
- [ ] **Step 3: Refactor JSX into shell regions**
In `web/apps/console/src/presentation/DiscussionPanel.tsx`, keep imports, props, focus effect, `trapKeyboardWithinDialog`, and `hasQuestion` logic. Replace the dialog contents inside the root `