# CopilotPanel

## 2026-06-17 — Chat history as an in-panel bottom sheet

**Prompted by:** Hellen (put chat history in the Copilot drawer; open as a bottom sheet from the history icon)

### What changed
- Added a controls row above the composer with a **history (clock)** icon and an optional **new chat (+)** icon.
- Tapping the history icon slides `CopilotChatHistory` up as a **bottom sheet within the panel** (absolute overlay + dimmed backdrop), so history lives in the same drawer rather than a separate screen.
- New props: `conversations`, `currentConversationId`, `onSelectConversation`, `onRenameConversation`, `onDeleteConversation`, `onNewChat`. Selecting a conversation closes the sheet.

### Why
- Matches the production Copilot: history is reached from an icon and overlays the chat as a bottom sheet.

### Affected tokens / files
- `packages/shadcn/src/components/ui/copilot-panel.tsx`
- Panel root is now `relative` to host the absolute bottom sheet; uses `animate-in slide-in-from-bottom`.

## 2026-06-17 — Thinking turn uses shared CopilotThinkingSteps (reasoning)

**Prompted by:** Hellen (reuse the existing agent-thinking pattern, not a one-off)

### What changed
- The `thinking` thread item now renders the shared `CopilotThinkingSteps` (agent reasoning steps) instead of a streaming bot bubble with a single label. Thread item gains `steps?: string[]` (falls back to `label`).

### Why
- A copilot agent reasons in steps; the shared CopilotThinkingSteps (ported from the policy-AI pattern) is the right reusable display.

### Affected tokens / files
- `packages/shadcn/src/components/ui/copilot-panel.tsx`

## 2026-06-17 — Thinking turn reuses ChatWidgetMessage (bot bubble)

**Prompted by:** Hellen (does the typing state map into the thread; is the user chat component reused?)

### What changed
- The `thinking` thread item now renders via `ChatWidgetMessage` (role="bot", isStreaming, streamingLabel) — same avatar/bubble/alignment as bot messages — instead of a bespoke box.
- (User and bot messages already reuse `ChatWidgetMessage`; this brings the thinking turn in line.)

### Why
- The standalone thinking box had no Bot avatar and sat flush-left, misaligned with the rest of the thread.

### Affected tokens / files
- `packages/shadcn/src/components/ui/copilot-panel.tsx`

## 2026-06-17 — Use ChatInputArea (markdown composer) instead of the plain input

**Prompted by:** Hellen (the library already has a markdown-capable chat input)

### What changed
- The composer now uses the DS `ChatInputArea` (textarea + markdown toolbar: Bold / Italic / Code / Code block) instead of the single-line `ChatWidgetInputBar`.
- New panel props: `showMarkdownToolbar` (default `true`) and `onAttachFile` (shows the attach button when provided).

### Why
- Brokers compose richer prompts; the existing `ChatInputArea` already supports markdown, so reuse it rather than the plain input.

### Affected tokens / files
- `packages/shadcn/src/components/ui/copilot-panel.tsx`

## 2026-06-17 — Fill-parent sizing for the browser extension side panel

**Prompted by:** Hellen (Copilot ships as a Chrome/Edge extension side panel)

### What changed
- `CopilotPanel` now fills its container (`h-full w-full`, no fixed `400×640`, no outer border/shadow) so it can dock inside the browser extension side panel.
- Demos updated to present it as a right-anchored side panel (DS `Sheet side="right"`, `showCloseButton={false}`, panel header's minimize closes it). Standalone state stories wrap it in a bordered frame.

### Why
- The extension renders in the browser `sidePanel` (docked right, full height); a fixed-size floating box didn't represent that. Sizing now comes from the host container.

### Affected tokens / files
- `packages/shadcn/src/components/ui/copilot-panel.tsx`

## 2026-06-17 — New template: full broker Copilot extension panel

**Prompted by:** Copilot extension design work (Hellen)

### What changed
- New template `CopilotPanel` assembles the whole broker Copilot extension surface: branded header (ChatWidgetHeader), a body that switches across `not-installed` / `connecting` / `signed-out` / `empty` / `chat` states, and a composer (ChatWidgetInputBar).
- The chat thread renders a typed `CopilotThreadItem[]` that composes every Copilot atom/molecule: messages (plain/markdown) with source citations, thinking indicator, action / data / suggestion / context / meeting-note cards, and error / rate-limit notices. Context cards align right (user-shared); agent cards align left.

### Why
- A single composition hub demonstrates the full Copilot flow and gives the app a ready layout to drive with real data + events.

### Affected tokens / files
- `packages/shadcn/src/components/ui/copilot-panel.tsx`
- Reuses ChatWidget header/message/typing/input primitives + all copilot-* components. Layout-only; driven by mock/placeholder data via props.