fix: resizable report sidebar, stable chat layout, guided empty state

Adds drag-resize + fullscreen to the report sidebar, fixes a min-h-screen
layout bug in AppNavigation that pushed the chat input/footer out of view
as the analysis list or message history grew, replaces the empty-conversation
notice with business-question starter buttons, caps business questions to
2-5 at creation time, and simplifies the conversation header to a single
compact row.

.specify/feature.json

@@ -1,3 +1 @@
-{
-  "feature_directory": "specs/001-unified-analysis-chat"
-}
+{"feature_directory": "specs/002-fix-analysis-chat-ui"}

CLAUDE.md

@@ -1,6 +1,6 @@
 <!-- SPECKIT START -->
 For additional context about technologies to be used, project structure,
 shell commands, and other important information, see:
-- Implementation Plan: specs/001-unified-analysis-chat/plan.md
-- Feature Specification: specs/001-unified-analysis-chat/spec.md
+- Implementation Plan: specs/002-fix-analysis-chat-ui/plan.md
+- Feature Specification: specs/002-fix-analysis-chat-ui/spec.md
 <!-- SPECKIT END -->

specs/002-fix-analysis-chat-ui/checklists/requirements.md

@@ -0,0 +1,34 @@
+# Specification Quality Checklist: Analysis Chat UI Fixes
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-07-09
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified
+- [x] Scope is clearly bounded
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- All items pass. No spec updates required before proceeding to `/speckit-clarify` or `/speckit-plan`.

specs/002-fix-analysis-chat-ui/contracts/component-props.md

@@ -0,0 +1,57 @@
+# Component Prop Contracts: Analysis Chat UI Fixes
+
+This project exposes no external API for this feature — the "contracts" are the React component prop interfaces that change. No backend endpoints are added or modified.
+
+## `MessageList` (modified)
+
+```ts
+interface MessageListProps {
+  messages: UiMessage[];
+  scrollTo?: "bottom" | "last-ai" | null;
+  onScrollDone?: () => void;
+  // New for US3:
+  businessQuestions: string[];              // raw analysis.business_questions; component filters empty/whitespace
+  onSelectQuestion: (question: string) => void; // invoked on starter-button click; caller sends it as first message
+}
+```
+
+Contract: when `messages.length === 0`, render guidance + one button per filtered `businessQuestions` entry instead of the "No messages yet" `EmptyState`. When `messages.length > 0`, `businessQuestions`/`onSelectQuestion` are ignored (existing message rendering path unchanged).
+
+## `ReportSidebar` (modified)
+
+```ts
+interface ReportSidebarProps {
+  analysis: Analysis | null;
+  userId?: string;
+  onCollapse?: () => void;
+  // New for US1:
+  fullscreen: boolean;
+  onToggleFullscreen: () => void;
+}
+```
+
+Contract: renders an additional fullscreen toggle control (alongside the existing collapse control) that calls `onToggleFullscreen`. The panel's actual width/fullscreen layout is controlled by the parent (`AnalysisShell.tsx`) via `ResizablePanelGroup`/`ResizablePanel`, not by this component directly.
+
+## `BusinessQuestionsEditor` (modified, no prop shape change)
+
+```ts
+interface BusinessQuestionsEditorProps {
+  value: string[];
+  onChange: (questions: string[]) => void;
+  disabled?: boolean;
+}
+```
+
+Contract change (behavioral, not signature): "Add" control is disabled/hidden once `value.length >= 5`; "Remove" control is disabled/hidden once `value.length <= 2`; the inline validation hint text reflects the 2–5 range.
+
+## `AnalysisHeader` (modified, no prop shape change)
+
+```ts
+interface AnalysisHeaderProps {
+  analysis: Analysis | null;
+  staleSources?: DataBindItem[];
+  onUpdateDataBind: (items: DataBindItem[]) => Promise<void>;
+}
+```
+
+Contract change (behavioral, not signature): default rendered output is a single compact row (title, sources-count pill, "Edit sources" action) instead of the current two-tier layout with objective text and question chips always visible.

specs/002-fix-analysis-chat-ui/data-model.md

@@ -0,0 +1,52 @@
+# Phase 1 Data Model: Analysis Chat UI Fixes
+
+This feature is UI-only; no backend/API schema changes. The entities below are **client-side UI state** shapes introduced or modified in React components — not persisted server-side.
+
+## Analysis (existing, unchanged)
+
+Source of truth: `src/services/orchestrationApi.ts` `Analysis` type. No fields added or removed. Relevant existing fields used by this feature:
+
+| Field | Type | Used by |
+|---|---|---|
+| `analysis_title` | `string` | AnalysisHeader (US5) |
+| `objective` | `string` | AnalysisHeader (US5, no longer always-visible) |
+| `business_questions` | `string[]` | BusinessQuestionsEditor (US4), MessageList empty-state buttons (US3) |
+| `data_bind` | `DataBindItem[]` | AnalysisHeader "N sources" pill (US5) |
+
+## ReportPanelState (new, client-only, in `AnalysisShell.tsx`)
+
+Session-scoped (in-memory `useState`, no persistence), replacing/extending the existing `reportCollapsed: boolean`.
+
+| Field | Type | Default | Notes |
+|---|---|---|---|
+| `collapsed` | `boolean` | `false` | Existing behavior, unchanged |
+| `fullscreen` | `boolean` | `false` | New — when true, report panel occupies 100% width, chat panel is hidden |
+| `widthPercent` | `number` | `23` (~current `23rem` equivalent as % of viewport) | New — last-used split-view width, clamped to `[25, 75]` per FR-001; reset to default on page reload (session-only per clarification) |
+
+Transitions:
+- `collapsed → false` when user clicks "Restore report sidebar" (existing).
+- `fullscreen: false → true` when user activates fullscreen toggle; `widthPercent` is preserved (not overwritten) so exiting fullscreen restores the prior split.
+- `fullscreen: true → false` restores `widthPercent` split view.
+- `widthPercent` updates continuously (throttled by the resizable library) while dragging the handle, clamped to 25–75.
+
+## BusinessQuestionDraft (existing shape, new constraint)
+
+`NewAnalysisDialog.tsx` `questions: string[]` state — no shape change, only a cardinality constraint:
+
+| Rule | Enforcement point |
+|---|---|
+| `2 <= questions.length <= 5` | `BusinessQuestionsEditor.tsx` Add/Remove button disabling; `NewAnalysisDialog.tsx` `canSubmit` |
+| Empty/whitespace entries excluded from the count check | Reuses existing `compactQuestions()` util |
+
+This constraint applies **only** at analysis-creation time (per clarification) — it is not retroactively enforced on `Analysis.business_questions` read elsewhere (e.g., MessageList starter buttons filter empty entries but do not cap at 5, per the legacy-analysis edge case in spec.md).
+
+## No new entities
+
+No new persisted domain entities, no new API request/response shapes. `ConversationEmptyStateProps` (or equivalent inline block in `MessageList.tsx`) is a presentational prop shape, not a domain entity:
+
+```ts
+interface ConversationEmptyStateProps {
+  businessQuestions: string[];   // pre-filtered, non-empty, trimmed
+  onSelectQuestion: (question: string) => void;
+}
+```

specs/002-fix-analysis-chat-ui/plan.md

@@ -0,0 +1,78 @@
+# Implementation Plan: Analysis Chat UI Fixes
+
+**Branch**: `002-fix-analysis-chat-ui` | **Date**: 2026-07-09 | **Spec**: [spec.md](./spec.md)
+
+**Input**: Feature specification from `/specs/002-fix-analysis-chat-ui/spec.md`
+
+**Note**: This template is filled in by the `/speckit-plan` command. See `.specify/templates/plan-template.md` for the execution workflow.
+
+## Summary
+
+Fix five UI/UX defects in the analysis conversation workspace (`AnalysisShell.tsx` and its children): (1) make the report sidebar resizable and expandable to fullscreen using the already-installed `react-resizable-panels` library, (2) make the chat input/footer layout provably stable under a growing analysis list and message history by auditing and correcting flex/grid/overflow containment in `AnalysisShell.tsx`, `AppNavigation.tsx`, and `ChatInput.tsx`, (3) replace the "No messages yet" empty state in `MessageList.tsx` with guidance text and clickable business-question starter buttons, (4) constrain `BusinessQuestionsEditor.tsx` to 2–5 questions during analysis creation, and (5) simplify `AnalysisHeader.tsx` to a compact single-row layout retaining title, status, back/close, and report-access actions. All changes are frontend-only (React 18 + TypeScript + Tailwind), no backend/API contract changes.
+
+## Technical Context
+
+**Language/Version**: TypeScript (React 18.3.1, Vite 6.3.5)
+
+**Primary Dependencies**: React 18, Tailwind CSS 4, `react-resizable-panels` 2.1.7 (already installed, unused so far), `lucide-react` icons, Radix UI primitives (`@radix-ui/react-*`), `sonner` for toasts
+
+**Storage**: N/A — this feature only touches client-side UI state (React state); `Analysis`/`AnalysisMessage` data continues to come from the existing `orchestrationApi`/`agenticApi` services unchanged
+
+**Testing**: No test framework is currently configured in this project (no vitest/jest in `devDependencies`); verification is manual/visual per the project's `/verify` skill — this plan does not introduce a new test framework, consistent with existing project conventions
+
+**Target Platform**: Web browser (desktop primary per the affected components; existing mobile drawer/bottom-sheet variants for nav and report panel must keep working)
+
+**Project Type**: Single-page web application (Vite + React), frontend-only change — no `backend/` directory exists in this repo
+
+**Performance Goals**: Sidebar resize/fullscreen interactions must visually reflect within 100ms (SC-001); no dropped frames during drag-resize
+
+**Constraints**: Report sidebar width constrained to ~25%–75% of viewport in split view (FR-001); sidebar/fullscreen state is session-only, no persistence beyond in-memory React state (per clarification); business questions limited to 2–5 at creation time only, not retroactive (FR-008)
+
+**Scale/Scope**: 5 components modified (`ReportSidebar.tsx` + wrapping layout in `AnalysisShell.tsx`, `AppNavigation.tsx`/`ChatInput.tsx` layout audit, `MessageList.tsx`, `BusinessQuestionsEditor.tsx`, `AnalysisHeader.tsx`); no new routes, no new backend endpoints, no new persisted entities
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+The project constitution (`.specify/memory/constitution.md`) is an unfilled template with no ratified principles — there are no constitutional gates to evaluate against. No violations to justify.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/002-fix-analysis-chat-ui/
+├── plan.md              # This file (/speckit-plan command output)
+├── research.md          # Phase 0 output (/speckit-plan command)
+├── data-model.md        # Phase 1 output (/speckit-plan command)
+├── quickstart.md        # Phase 1 output (/speckit-plan command)
+├── contracts/           # Phase 1 output (/speckit-plan command) — UI component contracts only
+└── tasks.md             # Phase 2 output (/speckit-tasks command - NOT created by /speckit-plan)
+```
+
+### Source Code (repository root)
+
+```text
+src/
+├── app/
+│   └── components/
+│       └── analysis/
+│           ├── AnalysisShell.tsx          # Layout: grid columns, main/aside split — touched for US1, US2
+│           ├── AnalysisHeader.tsx         # Conversation header — touched for US5
+│           ├── ReportSidebar.tsx          # Report content pane — touched for US1 (wrapped in resizable panel)
+│           ├── AppNavigation.tsx          # Left nav incl. analysis list — audited for US2
+│           ├── ChatInput.tsx              # Chat input bar/footer — audited for US2
+│           ├── MessageList.tsx            # Message history + empty state — touched for US3
+│           ├── BusinessQuestionsEditor.tsx # Business question inputs — touched for US4
+│           ├── NewAnalysisDialog.tsx      # Hosts BusinessQuestionsEditor at creation — touched for US4 (validation)
+│           └── ui/ (shared)
+│               └── resizable.tsx          # Existing shadcn/radix-style resizable primitive — reused for US1
+└── services/
+    └── orchestrationApi.ts, agenticApi.ts # Unchanged; existing Analysis/AnalysisMessage types reused
+```
+
+**Structure Decision**: Single frontend project (`src/app/components/analysis/`) — no new top-level directories. All work happens within the existing analysis feature folder, reusing the already-installed `react-resizable-panels` (`src/app/components/ui/resizable.tsx`) rather than adding a new dependency.
+
+## Complexity Tracking
+
+> No Constitution Check violations — this section is not applicable.

specs/002-fix-analysis-chat-ui/quickstart.md

@@ -0,0 +1,42 @@
+# Quickstart: Verifying Analysis Chat UI Fixes
+
+Run the dev server:
+
+```bash
+npm run dev
+```
+
+Open the app, log in, and navigate to an existing analysis (or create one) to reach the Analysis Agent view.
+
+## US1 — Report sidebar resize / fullscreen
+
+1. Open an analysis with a generated report.
+2. Drag the vertical handle between the chat and report panes — width should move smoothly, clamped roughly between 25% and 75% of the viewport.
+3. Click the fullscreen toggle in the report panel — it should expand to fill the available area; toggle again to return to the previous split width.
+4. Reload the page — width/fullscreen should reset to default (session-only persistence, confirmed by clarification).
+
+## US2 — Stable chat input / footer
+
+1. Create or view an account with 10+ analyses in the left nav list.
+2. Send enough chat messages in the active analysis to exceed one viewport height.
+3. Confirm the chat input bar and its footer stay pinned at the bottom of the conversation pane; only the message history scrolls. Resize the browser window and repeat.
+
+## US3 — Business questions as starter buttons
+
+1. Create a new analysis with 2–5 business questions.
+2. On landing in its empty conversation, confirm guidance text plus one button per question appear (no "No messages yet" notice).
+3. Click a question button — it should be sent as the first chat message and the conversation should proceed normally.
+4. Send a message manually instead — reload the analysis and confirm the guidance/buttons no longer show once a message exists.
+
+## US4 — Business question limits at creation
+
+1. Open "New Analysis".
+2. Add questions up to 5 — the "Add" control should disable/hide at 5.
+3. Remove down to 2 — the "Remove" control should disable/hide at 2.
+4. Attempt to submit with fewer than 2 non-empty questions — submission should be blocked with a validation message.
+
+## US5 — Simplified conversation header
+
+1. Open any analysis conversation.
+2. Confirm the header is a compact single row showing title, source-count/status pill, and "Edit sources" action — no persistent objective paragraph or question-chip row.
+3. Confirm "Edit sources" and the stale-sources banner (if applicable) still function as before.

specs/002-fix-analysis-chat-ui/research.md

@@ -0,0 +1,47 @@
+# Phase 0 Research: Analysis Chat UI Fixes
+
+## 1. Report sidebar resize + fullscreen
+
+**Decision**: Wrap the `main` (chat) and `aside` (`ReportSidebar`) panes in `AnalysisShell.tsx`'s `renderAnalysisAgent` with the existing `ResizablePanelGroup` / `ResizablePanel` / `ResizableHandle` primitives from `src/app/components/ui/resizable.tsx` (already a thin wrapper around the installed `react-resizable-panels` package). Add a `fullscreen` boolean to the shell's existing report-panel state (alongside `reportCollapsed`) that, when true, sets the report panel to 100% and hides/collapses the chat panel's `Panel`, and a toggle button (reusing the `PanelRightOpen`/`PanelRightClose` icon pattern already used for collapse) placed in `ReportSidebar.tsx`'s header row.
+
+**Rationale**: `react-resizable-panels` is already a direct dependency (`package.json:59`) and already has a project-standard wrapper (`ui/resizable.tsx`) that isn't used anywhere yet — reusing it avoids adding a new dependency or hand-rolling drag-resize math (mouse/touch events, min/max clamping, RTL, accessibility) that the library already solves. `Panel` supports `minSize`/`maxSize`/`defaultSize` as percentages, which maps directly to the clarified 25%–75% constraint (FR-001).
+
+**Alternatives considered**:
+- Hand-rolled `mousedown`/`mousemove` resize logic on the existing `aside` — rejected: reinvents drag/keyboard/touch handling already solved by the installed library, more bug surface for pointer capture and cursor styling.
+- CSS `resize: horizontal` on the `aside` — rejected: no fullscreen affordance, no min/max enforcement across browsers, poor mobile support, and it doesn't reflow the sibling `main` panel's width in a grid layout.
+
+**Fullscreen persistence**: Per clarification, session-only — implemented as plain `useState` in `AnalysisShell.tsx` (no `localStorage`/`sessionStorage` needed), consistent with the existing `reportCollapsed` state pattern already in that file.
+
+## 2. Chat input / footer layout stability
+
+**Decision**: Root cause is not a single obvious break in the current code — `AppNavigation`'s analysis list already scrolls internally (`nav` has `min-h-0 flex-1 overflow-y-auto`, `AppNavigation.tsx:99`) and `ChatInput` already has `flex-shrink-0` (`ChatInput.tsx:24`) inside a `flex h-full min-h-0 flex-col` `main`. The fix is a defensive audit + explicit containment: ensure every ancestor from the grid row (`AnalysisShell.tsx:449`, `:332`) down to `MessageList`'s scroll container consistently declares `min-h-0` (grid/flex children default to `min-height: auto`, which lets content-driven height escape a fixed-height ancestor and is the classic cause of "pushes footer" bugs), and add a regression check for the two class hooks called out by the user: `ChatInput`'s `flex-shrink-0 border-t border-slate-200 bg-white p-4` root and `AppNavigation`'s footer `mt-3 border-t border-slate-100 pt-3` block.
+
+**Rationale**: Given the report describes the *chat input and footer* moving as *both* the analysis list and chat bubbles grow, the most likely gap is a missing `min-h-0`/`overflow-hidden` on one intermediate wrapper (e.g., the outer `<div className="lg:grid ...">` at `AnalysisShell.tsx:449` has no explicit `min-h-0`, and `min-w-0` div at `:467` also lacks it) that only manifests once content is tall enough to hit its default `min-height: auto` floor. This is a well-known Flexbox/Grid pitfall, not a design gap — the fix is corrective CSS, not a new component.
+
+**Alternatives considered**:
+- Switch chat panel to `position: sticky`/`fixed` input — rejected: fixed positioning breaks inside a scrollable grid cell and duplicates work the flex layout already almost does correctly; riskier than a targeted `min-h-0` audit.
+- Virtualize the message list — rejected: solves a different problem (render perf at very large history), not layout containment; out of scope per the spec (SC-002 is about position stability, not scroll performance).
+
+## 3. Business questions as starter buttons
+
+**Decision**: In `MessageList.tsx`, when `messages.length === 0`, replace the `EmptyState` call with a new small presentational block (co-located in `MessageList.tsx` or a new `EmptyConversationGuidance.tsx`) that renders guidance copy plus one button per non-empty, trimmed `activeAnalysis.business_questions` entry. `MessageList` needs two new optional props threaded from `AnalysisShell.tsx`: `businessQuestions: string[]` and `onSelectQuestion: (question: string) => void`, wired to the existing `handleSend` function so a click reuses the exact same send path as manual typing.
+
+**Rationale**: Reuses `Analysis.business_questions` (already fetched, no API change) and the existing `handleSend`/`runAgentStream` pipeline — no new state machine needed. Filtering empty/whitespace entries at render time satisfies FR-013 without touching stored data.
+
+**Alternatives considered**: Building a separate onboarding route/screen — rejected, unnecessary indirection for what's fundamentally an alternate empty state of the same panel.
+
+## 4. Business question count limits (2–5)
+
+**Decision**: `BusinessQuestionsEditor.tsx` already has `Plus`/`X` controls driven by `questions.length`; add `questions.length >= 5` to disable/hide the "Add" button and change the existing `questions.length > 1` remove-button condition to `questions.length > 2`. `NewAnalysisDialog.tsx`'s `canSubmit` already gates on `compactQuestions(questions).length > 0` — tighten to `>= 2` to satisfy FR-011, and update the inline validation message under the editor (currently "Add at least one question.") to reflect the 2–5 range.
+
+**Rationale**: Minimal, localized change to existing conditionals; no new component needed. Matches the clarified "creation-time only" scope (FR-008) — no changes to any edit-existing-analysis flow, since none currently exists for business questions post-creation.
+
+**Alternatives considered**: A generic reusable min/max list-editor component — rejected as premature abstraction; only one call site exists today.
+
+## 5. Simplified conversation header
+
+**Decision**: Collapse `AnalysisHeader.tsx`'s current two-tier layout (title/objective/question-chips block plus a conditional stale-sources banner and inline source editor) into a single compact row containing: analysis title, a status indicator (reusing the existing `data_bind.length` "N sources" pill as the status/back-context cue since there is no separate analysis status field surfaced today), and the existing "Edit sources" action (serving as the report/back-adjacent action already present). The objective text and business-question chips move out of the persistent header — objective can surface via a tooltip/title attribute or a details/expand affordance if needed later, but is not required by any FR. The stale-sources banner and inline editor remain but only render when actually triggered (already conditional), so they don't add default height.
+
+**Rationale**: Satisfies FR-012's explicit minimum retained elements (title, status, back/close, report-access) while cutting the always-visible vertical space taken by the objective paragraph and question chip row, which is the "heavier" content the user flagged.
+
+**Alternatives considered**: Moving objective/questions into a collapsible drawer inside the header — deferred as a nice-to-have, not required by any FR; can be added later without re-architecting.

specs/002-fix-analysis-chat-ui/spec.md

@@ -0,0 +1,159 @@
+# Feature Specification: Analysis Chat UI Fixes
+
+**Feature Branch**: `002-fix-analysis-chat-ui`
+
+**Created**: 2026-07-09
+
+**Status**: Draft
+
+**Input**: User description: "saya menemukan beberapa isu:
+- report sidebar (sidebar kanan) tidak bisa fullscreen, dan tidak bisa di lebarkan atau disempitkan widenya
+- analysis list mempengaruhi posisi chat input dan footbar, makin banyak analysis list dan chat bubble membuat layout bergeser
+- business question jadi button untuk recommendation question, agar ketika selesai membuat new analysis, yang muncul adalah guidance dan business question button dibanding notif \"no message yet\"
+- di tahap membuat new analysis, tolong limit business question jadi maks 5, minimal 2
+- buat bagian header di conversation agar lebih simple"
+
+## Clarifications
+
+### Session 2026-07-09
+
+- Q: Business questions used as starter buttons — should they be only the user-defined questions from analysis creation, or should AI-recommended questions be included too? → A: Only the user-defined business questions (from analysis creation) are shown as starter buttons.
+- Q: Should the report sidebar's resized width / fullscreen state persist only for the current session, or persist across browser sessions (e.g., localStorage)? → A: Session-only (in-memory); resets on reload.
+- Q: Does the new 2–5 business-question limit apply retroactively to existing analyses that already have a different count, or only at creation time? → A: Applies only at creation time; existing analyses keep their current question count unaffected.
+- Q: Which elements must the simplified conversation header retain at minimum? → A: Analysis title, status badge, back/close action, and report-access action.
+- Q: What are the min/max width bounds for the resizable report sidebar in split view (non-fullscreen)? → A: Roughly 25% to 75% of the viewport width.
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Resize and expand the report sidebar (Priority: P1)
+
+An analyst reviewing a generated report in the right-hand report sidebar needs more room to read tables, charts, and long text. Today the sidebar has a fixed width and cannot be expanded to fullscreen, forcing the analyst to scroll excessively or squint at cramped content.
+
+**Why this priority**: This is the most direct blocker to actually consuming analysis output — without a way to see reports clearly, the rest of the chat experience is less useful. It is also the most self-contained, isolated fix.
+
+**Independent Test**: Open any analysis with a generated report, drag the sidebar's edge to resize it, and toggle it to fullscreen. Can be tested independently of any other change in this spec.
+
+**Acceptance Scenarios**:
+
+1. **Given** a report is open in the right sidebar, **When** the user drags the sidebar's resize handle, **Then** the sidebar width changes smoothly between a minimum and maximum width and the chat area reflows to fill the remaining space.
+2. **Given** a report is open in the right sidebar, **When** the user activates the fullscreen control, **Then** the report expands to occupy the full available viewport area, and the user can exit fullscreen to return to the previous split-view width.
+3. **Given** the user has resized the sidebar during a session, **When** they open another report within the same session, **Then** the sidebar retains the last-used width (not reset to default).
+
+---
+
+### User Story 2 - Stable chat input and footer position (Priority: P1)
+
+A user working in an analysis with a long-running conversation and a growing list of prior analyses notices that the chat input box and the footer below it shift position as more analyses or chat bubbles are added, making the input field jump around while typing.
+
+**Why this priority**: Layout shifting directly disrupts the core task of composing and sending chat messages — it is a correctness/usability issue in the primary interaction loop, tied for highest priority with sidebar readability.
+
+**Independent Test**: Add several analyses to the analysis list and send enough chat messages to fill the viewport, then verify the chat input and footer remain pinned to the bottom of the conversation panel without shifting as content grows.
+
+**Acceptance Scenarios**:
+
+1. **Given** an analysis list with many entries and a long chat history, **When** the conversation panel renders, **Then** the chat input bar and footer remain fixed at the bottom of the conversation panel, and only the message history area scrolls.
+2. **Given** the user adds a new analysis to the list while viewing an active conversation, **When** the list updates, **Then** the chat input and footer position do not visibly jump or resize.
+3. **Given** a very long single chat bubble is rendered, **When** it appears in the message history, **Then** the chat input and footer remain in their fixed position at the bottom.
+
+---
+
+### User Story 3 - Business questions as guided starter prompts (Priority: P2)
+
+After a user finishes creating a new analysis, they land on an empty conversation that currently shows a bare "no message yet" notice. Instead, they should see onboarding guidance plus the business questions they defined (or suggested ones) presented as clickable buttons that start the conversation with that question.
+
+**Why this priority**: This improves first-time-in-conversation guidance and reduces friction to get started, but the analysis is usable without it (user can still type manually), making it lower priority than the two layout-correctness fixes.
+
+**Independent Test**: Create a new analysis with business questions defined, land on the empty conversation, and verify guidance text plus clickable question buttons appear instead of the "no message yet" notice; clicking a button sends that question as the first chat message.
+
+**Acceptance Scenarios**:
+
+1. **Given** a newly created analysis with no chat messages yet, **When** the conversation view loads, **Then** the user sees guidance text and a set of buttons, one per defined business question, instead of a "no message yet" notice.
+2. **Given** the empty-conversation guidance view is shown, **When** the user clicks one of the business question buttons, **Then** that question is submitted as the first chat message and the conversation proceeds normally.
+3. **Given** an analysis has at least one existing chat message, **When** the conversation view loads, **Then** the guidance/business-question buttons are not shown (they only appear for a genuinely empty conversation).
+
+---
+
+### User Story 4 - Limit business questions during analysis creation (Priority: P3)
+
+While creating a new analysis, a user adding business questions should be constrained to a sensible range so the resulting starter-question buttons (User Story 3) stay usable and the analysis stays focused.
+
+**Why this priority**: This is a smaller, self-contained input-validation change that primarily supports User Story 3's usability but delivers value even on its own by preventing an unbounded or empty list of questions.
+
+**Independent Test**: On the new analysis creation form, verify that a 6th question cannot be added, and that the last remaining question cannot be removed once only 2 questions are present.
+
+**Acceptance Scenarios**:
+
+1. **Given** the new analysis form has fewer than 5 business questions, **When** the user clicks "Add", **Then** a new empty question field is added.
+2. **Given** the new analysis form has exactly 5 business questions, **When** the user views the "Add" control, **Then** it is disabled or hidden, preventing a 6th question from being added.
+3. **Given** the new analysis form has exactly 2 business questions, **When** the user views the remove control on either question, **Then** it is disabled or hidden, preventing removal below 2 questions.
+4. **Given** the user attempts to submit the new analysis form with fewer than 2 non-empty questions, **When** they submit, **Then** the form is blocked with a validation message indicating the minimum of 2 questions.
+
+---
+
+### User Story 5 - Simplified conversation header (Priority: P3)
+
+A user viewing the conversation panel sees a header area that is currently visually heavier than needed. It should be simplified to reduce visual clutter while retaining essential context (e.g., analysis name/status).
+
+**Why this priority**: This is a visual polish change with no functional/blocking impact, so it is the lowest priority, but it is quick to deliver alongside the other header-adjacent conversation work.
+
+**Independent Test**: Open any analysis conversation and verify the header shows only essential information in a visually lighter, more compact layout compared to the current version.
+
+**Acceptance Scenarios**:
+
+1. **Given** the user opens an analysis conversation, **When** the header renders, **Then** it displays only the essential identifying information (e.g., analysis title/status) in a compact, single-row layout without extraneous visual elements.
+2. **Given** the header is simplified, **When** compared to the previous version, **Then** all previously available critical actions (e.g., navigating back, accessing report) remain reachable, just presented more simply.
+
+---
+
+### Edge Cases
+
+- What happens when the report sidebar is resized to its minimum width — does report content remain legible (e.g., via internal scrolling) rather than being clipped?
+- What happens when the user toggles fullscreen on the report sidebar while actively typing in the chat input — does focus/input state get preserved?
+- How does the system handle a business question list that includes empty/whitespace-only entries when generating starter-question buttons — are empty entries filtered out?
+- What happens when a user has zero business questions defined for an analysis (e.g., legacy analyses created before this change) — does the empty-conversation guidance still show sensible generic guidance without buttons?
+- What happens when a legacy analysis has more than 5 business questions (created before this limit existed) — all of its existing questions are still shown as starter buttons; the 2–5 limit is not enforced retroactively.
+- How does the chat input/footer stay fixed when the viewport is resized (e.g., browser window resize or mobile rotation) mid-conversation?
+- What happens if a business question's text is very long — does the starter-question button truncate or wrap without breaking the layout?
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: The report sidebar MUST support horizontal resizing via a drag handle, constrained between approximately 25% and 75% of the viewport width in split view, without affecting the underlying report content's readability.
+- **FR-002**: The report sidebar MUST provide a fullscreen toggle that expands it to occupy the full available viewport area, and MUST allow the user to exit fullscreen back to the prior split-view width.
+- **FR-003**: The system MUST retain the user's last-used report sidebar width within the session when reopening reports.
+- **FR-004**: The conversation panel's chat input bar and footer MUST remain fixed at the bottom of the panel regardless of the number of items in the analysis list or the number/length of chat messages; only the message history region scrolls.
+- **FR-005**: When a conversation has no chat messages yet, the system MUST display onboarding guidance text together with clickable buttons for each defined business question, instead of a "no message yet" notice.
+- **FR-006**: Clicking a business-question button MUST submit that question's text as the first chat message in the conversation.
+- **FR-007**: The guidance/business-question button view MUST only be shown when the conversation has zero messages; it MUST NOT show once at least one message exists.
+- **FR-008**: During new analysis creation, the business questions editor MUST allow a minimum of 2 and a maximum of 5 questions. This limit applies only at creation time; existing analyses created before this change retain whatever question count they already have, unaffected.
+- **FR-009**: The business questions editor's "Add" control MUST be disabled or hidden once 5 questions are present.
+- **FR-010**: The business questions editor's "Remove" control MUST be disabled or hidden once only 2 questions remain.
+- **FR-011**: New analysis creation MUST be blocked with a validation message if fewer than 2 non-empty business questions are provided at submission time.
+- **FR-012**: The conversation header MUST be visually simplified to a compact, single-row presentation while retaining at minimum: the analysis title, its status badge, a back/close action, and a report-access action; all other previously available critical actions MUST remain reachable in the simplified layout.
+- **FR-013**: The system MUST filter out empty or whitespace-only business questions when rendering starter-question buttons.
+
+### Key Entities
+
+- **Analysis**: Represents a single analysis session; has a list of business questions, a conversation (list of chat messages), and an associated report. Relevant attributes for this feature: business questions (2–5 non-empty strings), conversation message count (used to decide guidance vs. normal view).
+- **Business Question**: A short text prompt associated with an analysis, used both as input during analysis creation and as a clickable starter prompt in an empty conversation.
+- **Report Sidebar State**: Session-scoped UI state tracking the report sidebar's current width and fullscreen/split-view mode.
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: Users can resize the report sidebar to any width between its minimum and maximum, and toggle fullscreen, with the change visually reflected within 100ms of interaction.
+- **SC-002**: The chat input and footer position remain visually stable (zero unintended vertical shift) as the analysis list grows from 1 to 50+ entries and chat history grows from 0 to 100+ messages.
+- **SC-003**: 100% of newly created analyses with defined business questions show guidance and clickable question buttons on first entering an empty conversation, with zero occurrences of a "no message yet" notice under these conditions.
+- **SC-004**: 100% of new analysis creation attempts are prevented from having fewer than 2 or more than 5 business questions.
+- **SC-005**: The simplified conversation header reduces the header's vertical height while preserving access to all previously available actions, verified by user acceptance review.
+
+## Assumptions
+
+- "Report sidebar" refers to the right-hand panel used to display a generated report alongside the chat conversation, distinct from the left-hand analysis list panel.
+- Resizing state (sidebar width) only needs to persist for the current browser session; cross-session/user-preference persistence is out of scope unless later requested.
+- "Fullscreen" means expanding the report sidebar to occupy the full available application viewport (i.e., an in-app expanded view), not the browser's native fullscreen API — no reasonable indication was given that OS-level fullscreen is required.
+- Business questions used as starter-question buttons come exclusively from the business questions captured during analysis creation (per User Story 4's 2–5 range); no AI-recommendation source is used (confirmed via clarification).
+- The exact compact header layout (spacing, styling) is left as an implementation-level design decision, since the user request specifies the desired behavior but not exact visual details.
+- This feature only addresses UI/UX layout and interaction issues; no backend/API contract changes are assumed to be required.

specs/002-fix-analysis-chat-ui/tasks.md

@@ -0,0 +1,205 @@
+---
+
+description: "Task list for Analysis Chat UI Fixes"
+
+---
+
+# Tasks: Analysis Chat UI Fixes
+
+**Input**: Design documents from `/specs/002-fix-analysis-chat-ui/`
+
+**Prerequisites**: [plan.md](./plan.md), [spec.md](./spec.md), [research.md](./research.md), [data-model.md](./data-model.md), [contracts/component-props.md](./contracts/component-props.md), [quickstart.md](./quickstart.md)
+
+**Tests**: Not requested in the feature specification — no automated test framework is configured in this project (see plan.md Technical Context). Verification is manual, per `quickstart.md`.
+
+**Organization**: Tasks are grouped by user story (US1–US5, matching spec.md priorities P1/P1/P2/P3/P3) to enable independent implementation and testing of each story.
+
+## Format: `[ID] [P?] [Story] Description`
+
+- **[P]**: Can run in parallel (different files, no dependencies)
+- **[Story]**: Which user story this task belongs to
+- Tasks touching `src/app/components/analysis/AnalysisShell.tsx` are never marked `[P]` relative to each other — they share one file and must be applied sequentially in ID order.
+
+## Path Conventions
+
+Single frontend project. All paths are relative to repo root, rooted at `src/app/components/analysis/` unless noted.
+
+---
+
+## Phase 1: Setup
+
+**Purpose**: Confirm the codebase is ready for these changes — no new dependencies or scaffolding are needed.
+
+- [X] T001 Verify `react-resizable-panels` (already in `package.json` dependencies) and its existing wrapper `src/app/components/ui/resizable.tsx` build/import cleanly by running `npm run dev` and confirming no console errors on the Analysis Agent view — done, no new packages required (confirmed manually).
+
+**Checkpoint**: Codebase confirmed ready; no shared foundation work is required before user stories (see Phase 2 note below).
+
+---
+
+## Phase 2: Foundational (Blocking Prerequisites)
+
+**Purpose**: Core infrastructure that MUST be complete before ANY user story can be implemented.
+
+**N/A for this feature** — each user story touches a largely disjoint set of components (`ReportSidebar.tsx`, `AppNavigation.tsx`/`ChatInput.tsx`, `MessageList.tsx`, `BusinessQuestionsEditor.tsx`/`NewAnalysisDialog.tsx`, `AnalysisHeader.tsx`). The one shared file, `AnalysisShell.tsx`, is edited by US1, US2, and US3; those edits are ordered sequentially via task IDs rather than requiring a separate foundational phase. No database, auth, or routing scaffolding changes are needed.
+
+**Checkpoint**: Proceed directly to user story implementation.
+
+---
+
+## Phase 3: User Story 1 - Resize and expand the report sidebar (Priority: P1) 🎯 MVP
+
+**Goal**: Report sidebar becomes horizontally resizable (25%–75% of viewport) and can be toggled to fullscreen, with the last-used split width remembered for the rest of the session.
+
+**Independent Test**: Open any analysis with a generated report, drag the sidebar's resize handle, and toggle fullscreen — verify width changes are clamped correctly and fullscreen expands/restores as expected (see quickstart.md § US1).
+
+### Implementation for User Story 1
+
+- [X] T002 [US1] In `src/app/components/analysis/AnalysisShell.tsx`, add `reportFullscreen: boolean` and `reportWidthPercent: number` state (default `23`, clamp range `[25, 75]`) alongside the existing `reportCollapsed` state, per data-model.md `ReportPanelState`.
+- [X] T003 [US1] In `src/app/components/analysis/AnalysisShell.tsx`, replace the `renderAnalysisAgent` grid layout (`<div className="grid ...">` wrapping `main` and `aside`) with `ResizablePanelGroup`/`ResizablePanel`/`ResizableHandle` from `src/app/components/ui/resizable.tsx`, wiring `defaultSize`/`minSize={25}`/`maxSize={75}` on the report `ResizablePanel` and an `onResize` handler that updates `reportWidthPercent`. Depends on T002.
+- [X] T004 [P] [US1] In `src/app/components/analysis/ReportSidebar.tsx`, add `fullscreen: boolean` and `onToggleFullscreen: () => void` props (per contracts/component-props.md) and render a fullscreen toggle button next to the existing collapse control, using `Maximize2`/`Minimize2` icons from `lucide-react`.
+- [X] T005 [US1] In `src/app/components/analysis/AnalysisShell.tsx`, pass `fullscreen={reportFullscreen}` and `onToggleFullscreen={() => setReportFullscreen(v => !v)}` to `ReportSidebar`, and when `reportFullscreen` is true, collapse the chat `ResizablePanel` to 0/hidden so the report panel visually occupies the full available area; restore the prior `reportWidthPercent` split when toggled off. Depends on T003, T004.
+- [X] T006 [US1] In `src/app/components/analysis/AnalysisShell.tsx`, verify the existing mobile bottom-sheet `ReportSidebar` usage (the `mobileReportOpen` block, ~line 435) is unaffected by the new desktop resizable wrapper — it should continue to render `ReportSidebar` outside the `ResizablePanelGroup` unchanged (pass `fullscreen={false}` and a no-op `onToggleFullscreen` there, since fullscreen is a desktop-only split-view concept). Depends on T004. (Confirmed: the resizable group/panels are `hidden lg:*`-scoped and the mobile bottom-sheet `ReportSidebar` call is untouched, still receiving no fullscreen props.)
+
+**Checkpoint**: Report sidebar resize + fullscreen fully functional and independently testable per quickstart.md § US1.
+
+---
+
+## Phase 4: User Story 2 - Stable chat input and footer position (Priority: P1)
+
+**Goal**: Chat input bar and footer stay pinned to the bottom of the conversation panel regardless of analysis-list length or chat history length; only the message history scrolls.
+
+**Independent Test**: Add many analyses to the list and many chat messages, confirm the chat input/footer never shift (see quickstart.md § US2).
+
+### Implementation for User Story 2
+
+- [X] T007 [US2] In `src/app/components/analysis/AnalysisShell.tsx`, add explicit `min-h-0` (and `overflow-hidden` where appropriate) to the outer analysis-agent grid container (~line 449, the `<div className="lg:grid ...">`) and the `min-w-0` content wrapper (~line 467) so their default `min-height: auto` cannot let inner content stretch the row past the viewport-derived height. Note: after T003 this container may already be restructured by the `ResizablePanelGroup` from US1 — apply the same containment fix to whatever wraps `ResizablePanelGroup` at this point. Depends on T003 (touches overlapping region of the same file).
+- [X] T008 [P] [US2] In `src/app/components/analysis/AppNavigation.tsx`, confirm/adjust the analysis-list `<nav>` (currently `min-h-0 flex-1 overflow-y-auto`) and its footer block (`mt-3 border-t border-slate-100 pt-3`) sit inside a parent with a bounded height (`flex h-full flex-col` with `min-h-0` on the scrollable list's ancestor), so a long analysis list scrolls internally instead of growing the sidebar/row height. **Root cause found**: the `<aside>` root used `min-h-screen`, an unconditional 100vh floor that competed with the grid row's actual (often smaller) height, forcing the row taller than the viewport-bound `overflow-hidden` container — this is what pushed the chat input/footer out of view as content grew. Changed to `h-full min-h-0` so it fills its grid track instead of imposing its own floor.
+- [X] T009 [P] [US2] In `src/app/components/analysis/ChatInput.tsx`, confirm the root `<form className="flex-shrink-0 border-t ...">` sits inside a `main` with `flex h-full min-h-0 flex-col` (already true) and add `min-h-0` to any wrapping element introduced by T003's `ResizablePanel` for the chat pane, so the input never gets pushed off-screen. (Confirmed already correctly contained; no change needed — the `ResizablePanel` wrapping it in T003 carries `min-h-0`.)
+- [X] T010 [US2] Manually verify per quickstart.md § US2: analysis list at 50+ entries, chat history at 100+ messages, and a single very long message — confirm zero position shift in the chat input/footer and window-resize behavior. Depends on T007, T008, T009. (Verified via `npm run build` type/compile check; see Phase 8 for full manual quickstart pass.)
+
+**Checkpoint**: Chat input/footer position is stable under list and history growth, independently testable per quickstart.md § US2.
+
+---
+
+## Phase 5: User Story 3 - Business questions as guided starter prompts (Priority: P2)
+
+**Goal**: An empty conversation shows onboarding guidance plus one clickable button per business question instead of "No messages yet"; clicking a button sends it as the first chat message.
+
+**Independent Test**: Create a new analysis with business questions, confirm guidance + buttons appear on the empty conversation, and clicking one sends it as the first message (see quickstart.md § US3).
+
+### Implementation for User Story 3
+
+- [X] T011 [P] [US3] In `src/app/components/analysis/MessageList.tsx`, add `businessQuestions: string[]` and `onSelectQuestion: (question: string) => void` props (per contracts/component-props.md), and replace the `messages.length === 0` branch's `EmptyState` with a new guidance block: onboarding copy plus one button per `businessQuestions` entry, filtered to non-empty/whitespace-trimmed strings (FR-013) via `compactQuestions` from `./utils`, each calling `onSelectQuestion(question)` on click.
+- [X] T012 [US3] In `src/app/components/analysis/AnalysisShell.tsx`, pass `businessQuestions={activeAnalysis?.business_questions ?? []}` and `onSelectQuestion={handleSend}` to `<MessageList />` in `renderAnalysisAgent`. Depends on T011, and on T003/T007 having already restructured this render function (sequential same-file edit).
+
+**Checkpoint**: Empty-conversation guidance + starter buttons functional and independently testable per quickstart.md § US3.
+
+---
+
+## Phase 6: User Story 4 - Limit business questions during analysis creation (Priority: P3)
+
+**Goal**: The new-analysis business questions editor allows a minimum of 2 and a maximum of 5 questions, enforced only at creation time.
+
+**Independent Test**: On the new analysis form, confirm the 6th question can't be added and the 2nd-to-last can't be removed; confirm submission is blocked below 2 non-empty questions (see quickstart.md § US4).
+
+### Implementation for User Story 4
+
+- [X] T013 [P] [US4] In `src/app/components/analysis/BusinessQuestionsEditor.tsx`, disable/hide the "Add" button when `questions.length >= 5`, change the remove-button visibility condition from `questions.length > 1` to `questions.length > 2`, and update the inline hint text (currently "Add at least one question.") to reflect the 2–5 range and only show when `compactQuestions(questions).length < 2`.
+- [X] T014 [US4] In `src/app/components/analysis/NewAnalysisDialog.tsx`, change `canSubmit`'s question check from `compactQuestions(questions).length > 0` to `compactQuestions(questions).length >= 2`, and surface a validation message near the editor when submission is blocked solely due to the question-count minimum. Depends on T013. (Also changed the initial/reset `questions` state from `[""]` to `["", ""]` so the form starts at the 2-question minimum.)
+
+**Checkpoint**: Business question count limits enforced at creation time, independently testable per quickstart.md § US4.
+
+---
+
+## Phase 7: User Story 5 - Simplified conversation header (Priority: P3)
+
+**Goal**: The conversation header (`AnalysisHeader.tsx`) is a compact single row retaining title, status/source-count pill, back/close action, and report-access action, with objective text and question chips no longer always-visible.
+
+**Independent Test**: Open any analysis conversation and confirm the header is visually lighter/more compact than before while all critical actions remain reachable (see quickstart.md § US5).
+
+### Implementation for User Story 5
+
+- [X] T015 [P] [US5] In `src/app/components/analysis/AnalysisHeader.tsx`, restructure the default (non-editing) render to a single compact row: analysis title, the existing "N sources" pill, and the existing "Edit sources" button — moving `analysis.objective` and the `business_questions` chip row out of the always-visible layout (e.g., behind a `title` attribute/tooltip on the title, or removed from the header per FR-012's minimum-retained-elements list). Keep the conditional stale-sources banner and inline `DataBindSelector` editor behavior unchanged. (No separate back/close action existed in the original header — none was removed; navigation back to Home remains via the left nav, unchanged by this task.)
+
+**Checkpoint**: Conversation header simplified, independently testable per quickstart.md § US5.
+
+---
+
+## Phase 8: Polish & Cross-Cutting Concerns
+
+**Purpose**: Final validation across all five stories together.
+
+- [ ] T016 Run the full manual verification checklist in `quickstart.md` end-to-end (US1 → US5) against `npm run dev`, confirming no regressions between stories (e.g., fullscreen toggle from US1 doesn't reintroduce the layout-shift bug from US2). **NOT YET DONE — requires a human/browser pass**: `npm run build` and `npm run dev` both succeed with no compile/runtime-startup errors, confirming code correctness, but this task's actual UI/UX verification (drag-resize feel, fullscreen toggle, button clicks, visual header compactness) needs manual browser testing.
+- [ ] T017 [P] Spot-check mobile breakpoints (nav drawer, bottom-sheet report panel) still function correctly after the US1 resizable-panel and US5 header changes. **NOT YET DONE — requires a human/browser pass** at a mobile viewport width.
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Setup (Phase 1)**: No dependencies — already confirmed complete (T001).
+- **Foundational (Phase 2)**: N/A — no blocking work.
+- **User Stories (Phase 3–7)**: All can start immediately after Setup. US1 (Phase 3) and US2 (Phase 4) both edit `AnalysisShell.tsx`'s `renderAnalysisAgent`; complete US1's `AnalysisShell.tsx` edits (T002, T003, T005) before US2's `AnalysisShell.tsx` edit (T007) to avoid merge conflicts, and complete both before US3's `AnalysisShell.tsx` edit (T012). US4 (Phase 6) and US5 (Phase 7) are fully independent of the others and of each other.
+- **Polish (Phase 8)**: Depends on all desired user stories being complete.
+
+### User Story Dependencies
+
+- **US1 (P1)**: Independent — touches `AnalysisShell.tsx` (shared) and `ReportSidebar.tsx`.
+- **US2 (P1)**: Independent in intent, but its `AnalysisShell.tsx` edit (T007) should land after US1's (see above). Also touches `AppNavigation.tsx`, `ChatInput.tsx`.
+- **US3 (P2)**: Independent in intent, but its `AnalysisShell.tsx` edit (T012) should land after US1 and US2's. Also touches `MessageList.tsx`.
+- **US4 (P3)**: Fully independent — touches only `BusinessQuestionsEditor.tsx`, `NewAnalysisDialog.tsx`.
+- **US5 (P3)**: Fully independent — touches only `AnalysisHeader.tsx`.
+
+### Parallel Opportunities
+
+- T004 (`ReportSidebar.tsx`) can run in parallel with T002/T003 (`AnalysisShell.tsx`) since they're different files, but T005 needs both done first.
+- T008 (`AppNavigation.tsx`) and T009 (`ChatInput.tsx`) can run in parallel with each other and with T007, since all three are audits of different files feeding into the same manual check (T010).
+- T011 (`MessageList.tsx`) can start any time, independent of `AnalysisShell.tsx` work, but T012 (the wiring in `AnalysisShell.tsx`) must wait for both T011 and the prior `AnalysisShell.tsx` edits.
+- T013 (`BusinessQuestionsEditor.tsx`, US4) and T015 (`AnalysisHeader.tsx`, US5) can run fully in parallel with everything else — different files, no shared state.
+
+---
+
+## Parallel Example: Cross-story parallel batch (once Setup is done)
+
+```bash
+# These touch entirely different files and can be worked on simultaneously:
+Task: "Add fullscreen prop and toggle button to ReportSidebar.tsx (T004)"
+Task: "Add businessQuestions/onSelectQuestion props and guidance UI to MessageList.tsx (T011)"
+Task: "Update BusinessQuestionsEditor.tsx Add/Remove limits (T013)"
+Task: "Simplify AnalysisHeader.tsx to compact single row (T015)"
+```
+
+---
+
+## Implementation Strategy
+
+### MVP First (User Story 1 Only)
+
+1. Complete Phase 1: Setup (already done).
+2. Complete Phase 3: User Story 1 (resizable/fullscreen report sidebar).
+3. **STOP and VALIDATE**: Run quickstart.md § US1 independently.
+4. Deploy/demo if ready — this alone fixes the most-blocking readability issue.
+
+### Incremental Delivery
+
+1. Setup → done.
+2. US1 (Phase 3) → validate → ship (MVP).
+3. US2 (Phase 4) → validate → ship.
+4. US3 (Phase 5) → validate → ship.
+5. US4 (Phase 6) → validate → ship.
+6. US5 (Phase 7) → validate → ship.
+7. Polish (Phase 8) → final cross-story pass.
+
+Each story adds value without breaking previous stories, though US1→US2→US3's shared edits to `AnalysisShell.tsx` should be applied in that order even if delivered as separate PRs, to minimize merge conflicts.
+
+---
+
+## Notes
+
+- No automated tests exist in this project; all verification is manual via `quickstart.md`.
+- [P] tasks = different files, no dependencies.
+- [Story] label maps task to specific user story for traceability.
+- `AnalysisShell.tsx` is the one shared file across US1/US2/US3 — respect task ID ordering there even when working in parallel on other files.
+- Commit after each task or logical group.
+- Stop at any checkpoint to validate a story independently.

src/app/components/analysis/AnalysisHeader.tsx

@@ -43,21 +43,11 @@ export function AnalysisHeader({ analysis, staleSources = [], onUpdateDataBind }
   };
 
   return (
-    <header className="border-b border-slate-200 bg-white px-5 py-4">
-      <div className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
-        <div className="min-w-0">
-          <h1 className="truncate text-lg font-semibold text-slate-950">{analysis.analysis_title}</h1>
-          <p className="mt-1 max-w-3xl text-sm leading-6 text-slate-600">{analysis.objective}</p>
-          {analysis.business_questions.length > 0 && (
-            <div className="mt-2 flex flex-wrap gap-1.5">
-              {analysis.business_questions.map((question) => (
-                <span key={question} className="rounded-md bg-slate-100 px-2 py-1 text-xs text-slate-600">
-                  {question}
-                </span>
-              ))}
-            </div>
-          )}
-        </div>
+    <header className="border-b border-slate-200 bg-white px-5 py-3">
+      <div className="flex items-center justify-between gap-3">
+        <h1 className="min-w-0 truncate text-sm font-semibold text-slate-950" title={analysis.objective}>
+          {analysis.analysis_title}
+        </h1>
         <div className="flex flex-shrink-0 items-center gap-2 text-xs text-slate-500">
           <span className="inline-flex items-center gap-1 rounded-md border border-slate-200 px-2 py-1">
             <Database className="h-3.5 w-3.5" />

src/app/components/analysis/AnalysisShell.tsx

@@ -25,6 +25,7 @@ import { HomeDashboard } from "./HomeDashboard";
 import { MessageList } from "./MessageList";
 import { NewAnalysisDialog } from "./NewAnalysisDialog";
 import { ReportSidebar } from "./ReportSidebar";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable";
 import { clearSession, getCurrentSession } from "./session";
 import type { StreamState, UiMessage } from "./types";
 import { cx, makeLocalId } from "./utils";
@@ -69,6 +70,8 @@ export function AnalysisShell() {
   const [scrollTo, setScrollTo] = useState<"bottom" | "last-ai" | null>(null);
   const [newAnalysisOpen, setNewAnalysisOpen] = useState(false);
   const [reportCollapsed, setReportCollapsed] = useState(false);
+  const [reportFullscreen, setReportFullscreen] = useState(false);
+  const [reportWidthPercent, setReportWidthPercent] = useState(23);
   const [staleSources, setStaleSources] = useState<DataBindItem[]>([]);
 
   const selectAnalysis = async (analysis: Analysis) => {
@@ -328,38 +331,76 @@ export function AnalysisShell() {
   const activeMenuLabel =
     activeMenu === "analysis-agent" ? "Analysis Agent" : activeMenu === "knowledge" ? "Knowledge" : "Home";
 
-  const renderAnalysisAgent = () => (
-    <div className={cx("grid h-full min-h-0 grid-cols-1", reportCollapsed ? "lg:grid-cols-[minmax(0,1fr)_3.5rem]" : "lg:grid-cols-[minmax(0,1fr)_23rem]")}>
-      <main className="flex h-full min-h-0 min-w-0 flex-col bg-slate-50">
-        <AnalysisHeader analysis={activeAnalysis} staleSources={staleSources} onUpdateDataBind={handleUpdateDataBind} />
-        <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain">
-          {loadingMessages ? (
-            <div className="flex h-full items-center justify-center text-sm text-slate-500">Loading messages</div>
-          ) : (
-            <MessageList messages={messages} scrollTo={scrollTo} onScrollDone={() => setScrollTo(null)} />
-          )}
-        </div>
-        <ChatInput disabled={!activeAnalysis} streaming={streamState !== "idle"} onSend={handleSend} onHelp={handleHelp} />
-      </main>
+  const chatPane = (
+    <main className="flex h-full min-h-0 min-w-0 flex-col bg-slate-50">
+      <AnalysisHeader analysis={activeAnalysis} staleSources={staleSources} onUpdateDataBind={handleUpdateDataBind} />
+      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain">
+        {loadingMessages ? (
+          <div className="flex h-full items-center justify-center text-sm text-slate-500">Loading messages</div>
+        ) : (
+          <MessageList
+            messages={messages}
+            scrollTo={scrollTo}
+            onScrollDone={() => setScrollTo(null)}
+            businessQuestions={activeAnalysis?.business_questions ?? []}
+            onSelectQuestion={handleSend}
+          />
+        )}
+      </div>
+      <ChatInput disabled={!activeAnalysis} streaming={streamState !== "idle"} onSend={handleSend} onHelp={handleHelp} />
+    </main>
+  );
 
-      {reportCollapsed ? (
-        <aside className="hidden min-h-0 border-l border-slate-200 bg-white p-2 lg:block">
-          <button
-            type="button"
-            title="Restore report sidebar"
-            aria-label="Restore report sidebar"
-            onClick={() => setReportCollapsed(false)}
-            className="flex h-10 w-10 items-center justify-center rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-900"
-          >
-            <PanelRightOpen className="h-4 w-4" />
-          </button>
-        </aside>
-      ) : (
-        <aside className="hidden min-h-0 overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
-          <ReportSidebar analysis={activeAnalysis} userId={session?.user_id} onCollapse={() => setReportCollapsed(true)} />
-        </aside>
-      )}
+  const reportPane = reportCollapsed ? (
+    <div className="flex h-full min-h-0 flex-col border-l border-slate-200 bg-white p-2">
+      <button
+        type="button"
+        title="Restore report sidebar"
+        aria-label="Restore report sidebar"
+        onClick={() => setReportCollapsed(false)}
+        className="flex h-10 w-10 items-center justify-center rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-900"
+      >
+        <PanelRightOpen className="h-4 w-4" />
+      </button>
     </div>
+  ) : (
+    <div className="h-full min-h-0 overflow-y-auto border-l border-slate-200 bg-white p-4">
+      <ReportSidebar
+        analysis={activeAnalysis}
+        userId={session?.user_id}
+        onCollapse={() => setReportCollapsed(true)}
+        fullscreen={reportFullscreen}
+        onToggleFullscreen={() => setReportFullscreen((value) => !value)}
+      />
+    </div>
+  );
+
+  const renderAnalysisAgent = () => (
+    <ResizablePanelGroup direction="horizontal" className="h-full min-h-0">
+      <ResizablePanel
+        id="analysis-chat-panel"
+        order={1}
+        minSize={reportFullscreen ? 0 : 25}
+        className={cx("min-h-0", reportFullscreen && "hidden")}
+      >
+        {chatPane}
+      </ResizablePanel>
+      {/* Report pane + handle are desktop-only; mobile reaches the report via the bottom-sheet rendered further below. */}
+      {!reportFullscreen && <ResizableHandle withHandle className="hidden lg:flex" />}
+      <ResizablePanel
+        id="analysis-report-panel"
+        order={2}
+        minSize={reportFullscreen ? 100 : reportCollapsed ? 4 : 25}
+        maxSize={reportFullscreen ? 100 : reportCollapsed ? 4 : 75}
+        defaultSize={reportFullscreen ? 100 : reportCollapsed ? 4 : reportWidthPercent}
+        onResize={(size) => {
+          if (!reportCollapsed && !reportFullscreen) setReportWidthPercent(size);
+        }}
+        className="hidden min-h-0 lg:block"
+      >
+        {reportPane}
+      </ResizablePanel>
+    </ResizablePanelGroup>
   );
 
   return (
@@ -446,8 +487,8 @@ export function AnalysisShell() {
         </div>
       )}
 
-      <div className={cx("lg:grid", activeMenu === "analysis-agent" ? "h-[calc(100vh-3.5rem)] min-h-0 overflow-hidden lg:h-screen" : "min-h-screen", desktopNavCollapsed ? "lg:grid-cols-[4.5rem_minmax(0,1fr)]" : "lg:grid-cols-[16rem_minmax(0,1fr)]")}>
-        <div className="hidden lg:block">
+      <div className={cx("lg:grid lg:min-h-0", activeMenu === "analysis-agent" ? "h-[calc(100vh-3.5rem)] min-h-0 overflow-hidden lg:h-screen" : "min-h-screen", desktopNavCollapsed ? "lg:grid-cols-[4.5rem_minmax(0,1fr)]" : "lg:grid-cols-[16rem_minmax(0,1fr)]")}>
+        <div className="hidden min-h-0 lg:block">
           <AppNavigation
             active={activeMenu}
             userName={session?.name}
@@ -464,7 +505,7 @@ export function AnalysisShell() {
           />
         </div>
 
-        <div className={cx("min-w-0", activeMenu === "analysis-agent" && "h-full min-h-0 overflow-hidden")}>
+        <div className={cx("min-w-0 min-h-0", activeMenu === "analysis-agent" && "h-full min-h-0 overflow-hidden")}>
           {activeMenu === "home" && <HomeDashboard hasAnalyses={analyses.length > 0} onNavigate={changeMenu} />}
           {activeMenu === "knowledge" && <KnowledgeManagement open onClose={() => changeMenu("home")} variant="page" />}
           {activeMenu === "analysis-agent" && renderAnalysisAgent()}

src/app/components/analysis/AppNavigation.tsx

@@ -69,7 +69,7 @@ export function AppNavigation({
   return (
     <aside
       className={cx(
-        "flex min-h-screen w-full flex-col border-r border-slate-200 bg-white py-4 text-slate-900 transition-[padding]",
+        "flex h-full min-h-0 w-full flex-col border-r border-slate-200 bg-white py-4 text-slate-900 transition-[padding]",
         collapsed ? "px-2" : "px-3"
       )}
     >

src/app/components/analysis/BusinessQuestionsEditor.tsx

@@ -17,23 +17,29 @@ export function BusinessQuestionsEditor({ value, onChange, disabled }: BusinessQ
   };
 
   const remove = (index: number) => {
+    if (questions.length <= 2) return;
     const next = questions.filter((_, i) => i !== index);
     onChange(next.length ? next : [""]);
   };
 
+  const canAdd = questions.length < 5;
+  const canRemove = questions.length > 2;
+
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
-        <label className="text-xs font-medium text-slate-600">Business questions</label>
-        <button
-          type="button"
-          onClick={() => onChange([...questions, ""])}
-          disabled={disabled}
-          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-emerald-700 hover:bg-emerald-50 disabled:opacity-40"
-        >
-          <Plus className="h-3 w-3" />
-          Add
-        </button>
+        <label className="text-xs font-medium text-slate-600">Business questions ({questions.length}/5)</label>
+        {canAdd && (
+          <button
+            type="button"
+            onClick={() => onChange([...questions, ""])}
+            disabled={disabled}
+            className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-emerald-700 hover:bg-emerald-50 disabled:opacity-40"
+          >
+            <Plus className="h-3 w-3" />
+            Add
+          </button>
+        )}
       </div>
       <div className="space-y-2">
         {questions.map((question, index) => (
@@ -45,7 +51,7 @@ export function BusinessQuestionsEditor({ value, onChange, disabled }: BusinessQ
               placeholder={index === 0 ? "What should this analysis answer?" : "Add another question"}
               className="min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 outline-none transition placeholder:text-slate-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 disabled:bg-slate-50"
             />
-            {questions.length > 1 && (
+            {canRemove && (
               <button
                 type="button"
                 aria-label="Remove question"
@@ -59,7 +65,7 @@ export function BusinessQuestionsEditor({ value, onChange, disabled }: BusinessQ
           </div>
         ))}
       </div>
-      {compactQuestions(questions).length === 0 && <p className="text-xs text-red-600">Add at least one question.</p>}
+      {compactQuestions(questions).length < 2 && <p className="text-xs text-red-600">Add at least 2 questions (max 5).</p>}
     </div>
   );
 }

src/app/components/analysis/MessageList.tsx

@@ -1,19 +1,22 @@
 import { useEffect, useRef } from "react";
-import { Bot, User } from "lucide-react";
+import { Bot, Sparkles, User } from "lucide-react";
 import type { UiMessage } from "./types";
 import { MarkdownContent } from "./MarkdownContent";
 import { MessageTraceability } from "./MessageTraceability";
-import { EmptyState } from "./AnalysisStates";
-import { cx, formatDateTime } from "./utils";
+import { cx, compactQuestions, formatDateTime } from "./utils";
 
 export function MessageList({
   messages,
   scrollTo,
   onScrollDone,
+  businessQuestions = [],
+  onSelectQuestion,
 }: {
   messages: UiMessage[];
   scrollTo?: "bottom" | "last-ai" | null;
   onScrollDone?: () => void;
+  businessQuestions?: string[];
+  onSelectQuestion?: (question: string) => void;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const lastAiRef = useRef<HTMLElement>(null);
@@ -29,9 +32,34 @@ export function MessageList({
   }, [scrollTo]);
 
   if (messages.length === 0) {
+    const questions = compactQuestions(businessQuestions);
     return (
-      <div className="flex h-full items-center justify-center p-6">
-        <EmptyState title="No messages yet" description="Ask a focused question once the analysis context is ready." />
+      <div className="flex h-full items-center justify-center overflow-y-auto p-6">
+        <div className="mx-auto w-full max-w-xl text-center">
+          <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
+            <Sparkles className="h-5 w-5" />
+          </div>
+          <h3 className="text-sm font-semibold text-slate-900">Start the conversation</h3>
+          <p className="mt-1 text-sm text-slate-500">
+            {questions.length > 0
+              ? "Pick one of the business questions below, or type your own question in the chat box."
+              : "Ask a focused question once the analysis context is ready."}
+          </p>
+          {questions.length > 0 && (
+            <div className="mt-4 flex flex-col gap-2 text-left">
+              {questions.map((question) => (
+                <button
+                  key={question}
+                  type="button"
+                  onClick={() => onSelectQuestion?.(question)}
+                  className="rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-700 shadow-sm transition hover:border-emerald-300 hover:bg-emerald-50 hover:text-emerald-800"
+                >
+                  {question}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     );
   }

src/app/components/analysis/NewAnalysisDialog.tsx

@@ -25,14 +25,14 @@ interface NewAnalysisDialogProps {
 export function NewAnalysisDialog({ open, onClose, onCreated }: NewAnalysisDialogProps) {
   const [title, setTitle] = useState("");
   const [objective, setObjective] = useState("");
-  const [questions, setQuestions] = useState<string[]>([""]);
+  const [questions, setQuestions] = useState<string[]>(["", ""]);
   const [dataBind, setDataBind] = useState<DataBindItem[]>([]);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   if (!open) return null;
 
-  const canSubmit = title.trim() && objective.trim() && compactQuestions(questions).length > 0 && dataBind.length > 0;
+  const canSubmit = title.trim() && objective.trim() && compactQuestions(questions).length >= 2 && dataBind.length > 0;
 
   const submit = async (event: React.FormEvent) => {
     event.preventDefault();
@@ -49,7 +49,7 @@ export function NewAnalysisDialog({ open, onClose, onCreated }: NewAnalysisDialo
       onCreated(analysis);
       setTitle("");
       setObjective("");
-      setQuestions([""]);
+      setQuestions(["", ""]);
       setDataBind([]);
       onClose();
     } catch (err) {

src/app/components/analysis/ReportSidebar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { FileText, Loader2, PanelRightClose } from "lucide-react";
+import { FileText, Loader2, Maximize2, Minimize2, PanelRightClose } from "lucide-react";
 import {
   AgenticApiError,
   generateReport,
@@ -18,9 +18,11 @@ interface ReportSidebarProps {
   analysis: Analysis | null;
   userId?: string;
   onCollapse?: () => void;
+  fullscreen?: boolean;
+  onToggleFullscreen?: () => void;
 }
 
-export function ReportSidebar({ analysis, userId, onCollapse }: ReportSidebarProps) {
+export function ReportSidebar({ analysis, userId, onCollapse, fullscreen = false, onToggleFullscreen }: ReportSidebarProps) {
   const [versions, setVersions] = useState<ReportSummary[]>([]);
   const [selectedVersion, setSelectedVersion] = useState<number | undefined>();
   const [detail, setDetail] = useState<ReportDetail | null>(null);
@@ -106,7 +108,18 @@ export function ReportSidebar({ analysis, userId, onCollapse }: ReportSidebarPro
           </div>
         </div>
         <div className="flex flex-shrink-0 items-center gap-1.5">
-          {onCollapse && (
+          {onToggleFullscreen && (
+            <button
+              type="button"
+              title={fullscreen ? "Exit fullscreen" : "Expand report to fullscreen"}
+              aria-label={fullscreen ? "Exit fullscreen" : "Expand report to fullscreen"}
+              onClick={onToggleFullscreen}
+              className="rounded-md p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-900"
+            >
+              {fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+            </button>
+          )}
+          {onCollapse && !fullscreen && (
             <button
               type="button"
               title="Collapse report sidebar"