From fe1853b7775e5df33480329693dbd99c13f3a926 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:16:51 -0700
Subject: [PATCH 01/12] docs(specs): chat sidenav + history search design
 (Phase 1+2)

Sidenav composition with expanded/collapsed/drawer modes plus a modal
history-search palette driven by Cmd/Ctrl+K. Hard-replaces
chat-thread-drawer. Defers archive, projects, library, GPTs, apps,
agents, group chats, and workspace switching to later phases.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...-chat-sidenav-and-history-search-design.md | 322 ++++++++++++++++++
 1 file changed, 322 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-05-11-chat-sidenav-and-history-search-design.md

diff --git a/docs/superpowers/specs/2026-05-11-chat-sidenav-and-history-search-design.md b/docs/superpowers/specs/2026-05-11-chat-sidenav-and-history-search-design.md
new file mode 100644
index 000000000..3c97b2873
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-11-chat-sidenav-and-history-search-design.md
@@ -0,0 +1,322 @@
+# Chat sidenav + history search — design
+
+**Date:** 2026-05-11
+**Surface:** `@ngaf/chat` (`libs/chat/`) — new composition + new primitive; hard-replaces existing `chat-thread-drawer` composition
+**Status:** Design approved; ready for implementation plan
+**Research input:** ChatGPT authenticated left-sidenav PRD (pasted by user)
+
+## Summary
+
+Add a single sidenav composition that consolidates the existing thread-drawer behavior, supports three responsive modes (expanded / collapsed / drawer), and exposes named projection slots for sections the framework does not own (projects, library, GPTs, apps, agents, group chats, account/profile). Add a separate modal history-search palette primitive driven by Cmd/Ctrl+K. Together these cover **Phase 1 (shell + threads)** and **Phase 2 (search)** of the larger PRD decomposition. All other PRD sections (archive, projects, library, etc.) are deferred to later phases.
+
+This spec hard-replaces `chat-thread-drawer` rather than coexisting with it. The framework is pre-1.0 (0.0.x) and project policy is to break in patch releases without backward-compat shims.
+
+## Goals
+
+- Honest framework surface — express only what the framework can deliver today (threads + search). Everything else is consumer territory, exposed via named `<ng-content>` slots.
+- One composition covers all three responsive modes. No drawer-only second class.
+- Cmd/Ctrl+K opens a modal palette globally — works whether the sidenav is collapsed, in drawer-closed state, or not even rendered.
+- Palette is "dumb" — consumer wires results, matching the existing primitive pattern (`chat-thread-list` takes `threads`, emits `threadSelected`).
+
+## Non-goals (deferred to later phases)
+
+- Archive semantics. No `status: 'active' | 'archived'` on the thread model.
+- Per-row overflow menu (archive / delete / share / rename). Phase 3.
+- Server-side or content search. Phase 3+; for now consumers wire whatever search they want.
+- Projects, Library, GPTs, Apps, Agents, Group chats, Workspace switching, Temporary Chats as built-in framework concepts. These are consumer slots only.
+- Persistence of expanded/collapsed state across reloads.
+- A formal `SearchableAgent` interface.
+
+## Scope split
+
+Both phases ship in one branch / one PR. They are sequenced in implementation but tightly coupled (the sidenav emits `(searchOpened)`, the palette listens) — splitting them across PRs would force a temporary unwired state.
+
+- **Phase 1:** `chat-sidenav` composition, hard-replace `chat-thread-drawer`, migrate examples-chat-angular.
+- **Phase 2:** `chat-history-search-palette` primitive, Cmd+K wiring on the sidenav composition, default wiring in examples-chat-angular.
+
+## File map
+
+**New:**
+- `libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts`
+- `libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts`
+- `libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts`
+- `libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.spec.ts`
+- `libs/chat/src/lib/styles/chat-sidenav.styles.ts`
+- `libs/chat/src/lib/styles/chat-history-search-palette.styles.ts`
+
+**Deleted:**
+- `libs/chat/src/lib/compositions/chat-thread-drawer/` (entire directory, including its `.spec.ts`)
+
+**Modified:**
+- `libs/chat/src/public-api.ts` — add new exports, remove drawer export
+- `libs/chat/src/lib/styles/chat-tokens.ts` — add three width tokens to `SPACING_TOKENS`
+- `examples/chat/angular/src/...` — migrate usages of `ChatThreadDrawerComponent` to `ChatSidenavComponent`; render `ChatHistorySearchPaletteComponent` in the shell; wire default client-side filter
+- `apps/website/content/docs/chat/api/api-docs.json` — regenerated to reflect new exports / removed drawer
+
+## `chat-sidenav` composition
+
+### Inputs
+
+- `agent: Agent` (required) — passed through to the inner thread list for thread-row rendering and active-thread highlighting
+- `mode: 'expanded' | 'collapsed' | 'drawer'` (default `'expanded'`)
+- `open: boolean` (model, default `false`) — only meaningful when `mode === 'drawer'`
+- `threads: Thread[] | null` (default `null`) — if `null`, the threads section is suppressed and the consumer is expected to project their own thread rendering via `[sidenavSections]`
+- `activeThreadId: string | null` (default `null`)
+
+`Thread` is the existing type already consumed by `chat-thread-list` (do not redefine).
+
+### Outputs
+
+- `(newChat: void)` — new-chat button clicked
+- `(threadSelected: string)` — thread id; relayed from inner `chat-thread-list`
+- `(searchOpened: void)` — search button clicked OR Cmd/Ctrl+K fired
+- `(openChange: boolean)` — drawer-mode open state changed
+
+### Layout (expanded)
+
+```
+┌─ chat-sidenav (data-mode="expanded") ──┐
+│ <ng-content select="[sidenavHeader]"/> │   branding/logo slot
+├────────────────────────────────────────┤
+│ [+ New chat]   [🔍 Search]             │   built-in actions row
+├────────────────────────────────────────┤
+│ <ng-content select="[sidenavPrimary]"/>│   consumer destinations
+├────────────────────────────────────────┤
+│ Recent                                 │
+│   <chat-thread-list ...>               │   built-in, only if threads !== null
+├────────────────────────────────────────┤
+│ <ng-content select="[sidenavSections]"/>│  consumer sections (projects/etc.)
+├────────────────────────────────────────┤
+│ <ng-content select="[sidenavAccount]"/>│   sticky bottom slot
+└────────────────────────────────────────┘
+```
+
+### `collapsed` mode
+
+- Same vertical order, ~56 px wide rail.
+- Built-in buttons render icon-only (no labels). `aria-label` and `title` provided.
+- Consumer-supplied slot content is expected to render compact; the composition sets `[data-mode="collapsed"]` on the host so consumer styles can target it.
+- Threads section renders avatar/initial-letter chips of recent threads (clickable). Limit: 5 most recent. Overflow hidden — the only way to see older threads in collapsed mode is to open search or expand.
+
+### `drawer` mode
+
+- Overlay variant. Subsumes the deleted `chat-thread-drawer`.
+- Scrim (`button` element so it is keyboard-focusable for click-to-close).
+- Focus trap while open: tab is confined to elements inside the drawer.
+- Esc closes; emits `(openChange, false)`.
+- On open, focus moves to the new-chat button.
+- On close, focus returns to the invoking element (consumer is responsible for triggering the drawer from a focusable invoker; framework restores focus via storing `document.activeElement` at open-time).
+- Full width on viewports `≤ 767 px`; otherwise uses `--ngaf-chat-sidenav-width-drawer`.
+
+### CSS tokens (added to `SPACING_TOKENS` in `chat-tokens.ts`)
+
+```css
+--ngaf-chat-sidenav-width-expanded: 280px;
+--ngaf-chat-sidenav-width-collapsed: 56px;
+--ngaf-chat-sidenav-width-drawer: 280px;
+```
+
+### Keyboard shortcut
+
+- Lives on `chat-sidenav`'s constructor (NOT a separate global directive).
+- `fromEvent(window, 'keydown').pipe(takeUntilDestroyed(destroyRef))`.
+- Matches `(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k'`.
+- On match: `e.preventDefault()`; `this.searchOpened.emit()`.
+- Suppressed when `e.target` is `<input>`, `<textarea>`, or `contenteditable`.
+- Suppressed implementation note: the composition does NOT know if the palette is already open. The consumer can choose to ignore re-emits if it wants. The palette itself does not auto-close on Cmd+K (it would be a no-op anyway since the input would swallow it once focused).
+- The shortcut fires even when the sidenav is in `collapsed` or `drawer` mode — it is a global trigger.
+
+## `chat-history-search-palette` primitive
+
+### Type
+
+```ts
+export interface ThreadMatch {
+  id: string;
+  title: string;
+  /** Optional secondary line (e.g. last-message snippet). Renders muted. */
+  subtitle?: string;
+}
+```
+
+### API
+
+Inputs:
+- `open: boolean` (model, default `false`)
+- `query: string` (model, default `''`)
+- `results: ThreadMatch[]` (default `[]`)
+- `loading: boolean` (default `false`)
+- `placeholder: string` (default `'Search conversations'`)
+
+Outputs:
+- `(threadSelected: string)`
+- `(close: void)`
+
+### DOM shape
+
+```
+[scrim (button)]
+  └─ [dialog]
+       ├─ [input row]   icon + <input> + close button
+       └─ [list / empty / loading state]
+```
+
+Absolutely-positioned inside the host's view (no Angular CDK Portal). Fixed to viewport, `z-index: 50`. Width capped at `min(560px, 90vw)`.
+
+### Behavior
+
+- On `open` transitioning false → true: focus the input on next microtask; set `activeIndex = 0`.
+- On `open` transitioning true → false: no internal side effects (consumer owns the signal).
+- **Esc**: emit `(close)`. Do NOT clear `query`.
+- **ArrowDown / ArrowUp**: move `activeIndex` within `[0, results.length - 1]`. Clamp at ends (no wrap-around).
+- **Enter**: if `results.length > 0`, emit `(threadSelected, results[activeIndex].id)`. No-op if empty.
+- **Click on scrim**: emit `(close)`.
+- **Click on result row**: emit `(threadSelected, row.id)`.
+- **Click on close button (✕ in input row)**: emit `(close)`.
+
+### Rendered states
+
+| Condition                                              | Renders                                  |
+| ------------------------------------------------------ | ---------------------------------------- |
+| `loading && results.length === 0`                      | Skeleton (3 muted rows)                  |
+| `!loading && query === ''`                             | Muted hint "Type to search your conversations." |
+| `!loading && query !== '' && results.length === 0`     | "No conversations match." empty state    |
+| `!loading && results.length > 0`                       | Listbox of result rows                   |
+
+### ARIA
+
+- Dialog: `role="dialog"`, `aria-modal="true"`, `aria-label="Search conversations"`.
+- Input: `role="combobox"`, `aria-expanded="true"`, `aria-controls="<list-id>"`, `aria-activedescendant="<active-row-id>"`. The input keeps DOM focus throughout; arrow keys move *virtual* focus via `aria-activedescendant`.
+- List: `role="listbox"` with deterministic `id` (e.g. `chat-history-search-palette__results-{counter}`).
+- Rows: `role="option"`, `aria-selected="true"` on the active row, `id="chat-history-search-palette__results-{counter}__row-{idx}"`.
+- Scrim: `<button type="button" aria-label="Close search">`.
+
+### Consumer-side debouncing
+
+The palette does NOT debounce. It emits `query` on every keystroke via the two-way binding. The consumer chooses when to compute results. Default examples-chat-angular wiring debounces 150 ms via a `signal`-piped `setTimeout` or RxJS `debounceTime`.
+
+## Migration: hard-replace `chat-thread-drawer`
+
+### Before
+
+```html
+<chat-thread-drawer
+  [threads]="threads()"
+  [activeThreadId]="activeThreadId()"
+  [open]="drawerOpen()"
+  mode="overlay"
+  (threadSelected)="selectThread($event)"
+  (openChange)="drawerOpen.set($event)"
+/>
+```
+
+### After
+
+```html
+<chat-sidenav
+  [agent]="agent"
+  [threads]="threads()"
+  [activeThreadId]="activeThreadId()"
+  [(open)]="drawerOpen"
+  [mode]="sidenavMode()"
+  (newChat)="onNewChat()"
+  (threadSelected)="selectThread($event)"
+  (searchOpened)="paletteOpen.set(true)"
+>
+  <!-- optional projections -->
+</chat-sidenav>
+
+<chat-history-search-palette
+  [(open)]="paletteOpen"
+  [(query)]="searchQuery"
+  [results]="searchResults()"
+  (threadSelected)="onSearchSelect($event)"
+  (close)="paletteOpen.set(false)"
+/>
+```
+
+Where `sidenavMode` is a `computed()` over viewport width:
+
+```ts
+readonly sidenavMode = computed<ChatSidenavMode>(() => this.isNarrow() ? 'drawer' : 'expanded');
+```
+
+`isNarrow()` derives from `window.matchMedia('(max-width: 767px)')` (set up in the shell's constructor with a listener).
+
+### Public API surface
+
+`libs/chat/src/public-api.ts`:
+- **Add:**
+  - `ChatSidenavComponent` (value + type alias `ChatSidenavMode`)
+  - `ChatHistorySearchPaletteComponent`
+  - `ThreadMatch` (type)
+- **Remove:**
+  - `ChatThreadDrawerComponent`, `ChatThreadDrawerMode`
+
+## Edge cases
+
+1. **Cmd+K while focus is in the palette's own input.** Suppression rule fires — palette stays open, no re-emit. Correct behavior.
+2. **Sidenav mounted multiple times** (e.g. one in shell, one in a sub-route). The Cmd+K listener fires once per instance, so multiple emits go out. Acceptable — consumers ignoring duplicates is cheap; alternative (global registry) is complexity for a rare case.
+3. **`threads` becomes `null` mid-render.** Threads section suppressed via `@if (threads() !== null)`; existing thread rows unmount cleanly.
+4. **`drawer` mode opened while `mode` simultaneously changes to `expanded`.** Composition reacts to `mode` change first (signal effect), drawer transitions are CSS-driven and any in-flight transition completes. Visible flicker possible but minor; not worth special-casing.
+5. **First render in `drawer` mode with `open=true`.** Focus moves to new-chat button. Stored "invoker" is whatever had focus when the drawer opened — may be `body` if the page just loaded; in that case restoring focus on close is a no-op, which is fine.
+
+## Testing
+
+### Unit / component
+
+`chat-sidenav.component.spec.ts`:
+- Renders correct `data-mode` attribute for each mode value.
+- New-chat button click emits `(newChat)`.
+- Search button click emits `(searchOpened)`.
+- Cmd+K (synthesized `KeyboardEvent` with `metaKey: true, key: 'k'`) emits `(searchOpened)`.
+- Cmd+K is NOT emitted when `e.target` is an `<input>` element.
+- `threadSelected` is relayed from inner `chat-thread-list`.
+- Drawer mode: Esc emits `(openChange, false)`.
+- Drawer mode: scrim click emits `(openChange, false)`.
+
+`chat-history-search-palette.component.spec.ts`:
+- Empty-state hint renders when `query === ''` and not loading.
+- "No conversations match." renders when `query !== ''` and results empty.
+- Skeleton renders when `loading && results.length === 0`.
+- Result list renders rows when results provided.
+- ArrowDown moves `activeIndex`; clamps at `results.length - 1`.
+- ArrowUp moves `activeIndex`; clamps at 0.
+- Enter emits `(threadSelected, results[activeIndex].id)` when results non-empty.
+- Enter is no-op when results empty.
+- Esc emits `(close)`.
+- Scrim click emits `(close)`.
+- Row click emits `(threadSelected)` with the right id.
+- Input has correct ARIA attributes (`role="combobox"`, `aria-controls`, `aria-activedescendant`).
+
+### Manual (Chrome MCP) verification
+
+1. Sidenav `expanded` — threads render, new-chat / search buttons work.
+2. Sidenav `collapsed` — icon rail; tooltips present; layout intact.
+3. Sidenav `drawer` (narrow viewport) — overlay, focus trap, Esc closes, focus returns to invoker.
+4. Cmd+K (or Ctrl+K) opens the palette globally.
+5. Type in palette — debounced 150 ms — filtered results appear.
+6. ArrowDown/Up moves selection; Enter opens; Esc closes.
+7. Hard-replaced `chat-thread-drawer` — no references remaining; examples-chat-angular renders correctly in all viewport widths.
+
+## Performance considerations
+
+- The Cmd+K listener uses `fromEvent(window, 'keydown')` with `takeUntilDestroyed` — no leak.
+- The palette renders nothing when `open === false` (gated by `@if (open())` at the template root). Zero DOM cost when closed.
+- The threads section in `chat-sidenav` is a thin wrapper over the existing `chat-thread-list` — no new virtualization concerns introduced.
+- The consumer-side default debounce (150 ms) keeps client filter cost bounded.
+
+## Accessibility checklist
+
+- All built-in buttons have `aria-label` and visible focus rings (using `:focus-visible` + token color).
+- Drawer mode: focus trap; Esc closes; focus returns to invoker.
+- Palette: `aria-modal="true"`; arrow-key `aria-activedescendant` pattern; `aria-selected` on active row.
+- Color contrast: all default colors use existing `--ngaf-chat-*` tokens, which already meet 4.5:1 on light and dark themes.
+- Reduced motion: drawer slide-in transition is `200ms ease`; the framework does not currently honor `prefers-reduced-motion` globally — this spec does NOT add that handling (out of scope; would be a follow-up across all chat transitions).
+
+## Open questions / assumptions
+
+- **Verified:** `Thread` is exported from `chat-thread-list.component.ts` but NOT re-exported from `public-api.ts`. The implementation plan will add it to the barrel so consumers can type the `threads` input.
+- **Assumption:** The existing `chat-thread-list` accepts `threads`, `activeThreadId`, and emits `threadSelected`. Plan will verify and adjust.
+- **Open:** Whether the new-chat button should be hidden in `collapsed` mode in favor of an icon-only "+". Default per this spec: icon-only "+" in collapsed, full "New chat" label in expanded and drawer.
+- **Open:** Whether the palette should support a "Recent searches" section above results when `query === ''`. Default: no — out of scope, hint only. Consumer can layer this on later if needed.

From 8c95e81f43bec7ffb7902cda84829c434988a14a Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:22:52 -0700
Subject: [PATCH 02/12] docs(plans): chat sidenav + history search
 implementation plan

Ten tasks across Phase 1 (sidenav composition + drawer hard-replace +
examples migration) and Phase 2 (search palette + Cmd+K + example
wiring + docs regen + manual verification).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...6-05-11-chat-sidenav-and-history-search.md | 1421 +++++++++++++++++
 1 file changed, 1421 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-05-11-chat-sidenav-and-history-search.md

diff --git a/docs/superpowers/plans/2026-05-11-chat-sidenav-and-history-search.md b/docs/superpowers/plans/2026-05-11-chat-sidenav-and-history-search.md
new file mode 100644
index 000000000..f8693b24c
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-11-chat-sidenav-and-history-search.md
@@ -0,0 +1,1421 @@
+# Chat sidenav + history search — 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:** Land a `chat-sidenav` composition (three responsive modes + named slots) and a `chat-history-search-palette` primitive (Cmd+K modal) in `@ngaf/chat`, hard-replacing `chat-thread-drawer`. Migrate `examples-chat-angular` to use them.
+
+**Architecture:** New composition consolidates drawer mechanics with always-visible expanded/collapsed modes and a built-in threads section. New primitive is a dumb modal palette with model-bound `open`/`query`/`results`; the sidenav emits `(searchOpened)` from a global Cmd/Ctrl+K listener; the consumer renders the palette and wires the search results.
+
+**Tech Stack:** Angular 21 standalone components, signal inputs/outputs/models, Vitest + Angular TestBed, plain CSS strings under `libs/chat/src/lib/styles/`.
+
+**Spec:** [docs/superpowers/specs/2026-05-11-chat-sidenav-and-history-search-design.md](../specs/2026-05-11-chat-sidenav-and-history-search-design.md)
+
+---
+
+## File map
+
+**Create:**
+- `libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts`
+- `libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts`
+- `libs/chat/src/lib/styles/chat-sidenav.styles.ts`
+- `libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts`
+- `libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.spec.ts`
+- `libs/chat/src/lib/styles/chat-history-search-palette.styles.ts`
+
+**Delete:**
+- `libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.ts`
+- `libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.spec.ts` (if exists)
+
+**Modify:**
+- `libs/chat/src/public-api.ts`
+- `libs/chat/src/lib/styles/chat-tokens.ts`
+- `examples/chat/angular/src/app/shell/demo-shell.component.ts`
+- `examples/chat/angular/src/app/shell/demo-shell.component.html`
+- `examples/chat/angular/src/app/shell/demo-shell.component.css` (likely; verify)
+- `apps/website/content/docs/chat/api/api-docs.json` (regenerated)
+
+---
+
+## Task 1: CSS width tokens + Thread type export
+
+**Files:**
+- Modify: `libs/chat/src/lib/styles/chat-tokens.ts`
+- Modify: `libs/chat/src/public-api.ts`
+
+- [ ] **Step 1: Add sidenav width tokens to `SPACING_TOKENS`**
+
+In `chat-tokens.ts`, find the `const SPACING_TOKENS = \`` block and append three lines just before the closing backtick:
+
+```
+--ngaf-chat-sidenav-width-expanded: 280px;
+--ngaf-chat-sidenav-width-collapsed: 56px;
+--ngaf-chat-sidenav-width-drawer: 280px;
+```
+
+The block should end like:
+
+```
+  --ngaf-chat-edge-pad: 16px;
+  --ngaf-chat-input-gap: 0.75rem;
+  --ngaf-chat-sidenav-width-expanded: 280px;
+  --ngaf-chat-sidenav-width-collapsed: 56px;
+  --ngaf-chat-sidenav-width-drawer: 280px;
+`;
+```
+
+- [ ] **Step 2: Export `Thread` from public-api.ts**
+
+In `public-api.ts`, find the line:
+
+```typescript
+export { ChatMessageListComponent, getMessageType } from './lib/primitives/chat-message-list/chat-message-list.component';
+```
+
+The `ChatThreadListComponent` is exported elsewhere in the file (search for `ChatThreadListComponent` — likely around line 80+). Locate that line and add a sibling type export immediately after it:
+
+```typescript
+export type { Thread } from './lib/primitives/chat-thread-list/chat-thread-list.component';
+```
+
+- [ ] **Step 3: Verify build**
+
+Run: `npx nx run chat:build`
+Expected: PASS.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add libs/chat/src/lib/styles/chat-tokens.ts libs/chat/src/public-api.ts
+git commit -m "feat(chat): sidenav width tokens; export Thread type"
+```
+
+---
+
+## Task 2: Create `chat-sidenav` styles file
+
+**Files:**
+- Create: `libs/chat/src/lib/styles/chat-sidenav.styles.ts`
+
+- [ ] **Step 1: Write the styles constant**
+
+Create `libs/chat/src/lib/styles/chat-sidenav.styles.ts`:
+
+```typescript
+// libs/chat/src/lib/styles/chat-sidenav.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_SIDENAV_STYLES = `
+  :host {
+    display: block;
+    height: 100%;
+  }
+  :host([data-mode="expanded"]) .chat-sidenav {
+    width: var(--ngaf-chat-sidenav-width-expanded);
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav {
+    width: var(--ngaf-chat-sidenav-width-collapsed);
+  }
+  :host([data-mode="drawer"]) {
+    position: relative;
+  }
+  .chat-sidenav {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--ngaf-chat-bg);
+    border-right: 1px solid var(--ngaf-chat-separator);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  .chat-sidenav__scrim {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 1000;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+  :host([data-mode="drawer"]) .chat-sidenav {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--ngaf-chat-sidenav-width-drawer);
+    z-index: 1001;
+    transition: transform 200ms ease;
+    transform: translateX(-100%);
+  }
+  :host([data-mode="drawer"][data-open="true"]) .chat-sidenav {
+    transform: translateX(0);
+  }
+  @media (max-width: 767px) {
+    :host([data-mode="drawer"]) .chat-sidenav {
+      width: 100%;
+    }
+  }
+  .chat-sidenav__header {
+    flex-shrink: 0;
+    padding: var(--ngaf-chat-space-3);
+    border-bottom: 1px solid var(--ngaf-chat-separator);
+  }
+  .chat-sidenav__actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: var(--ngaf-chat-space-3);
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav__actions {
+    align-items: center;
+    padding: var(--ngaf-chat-space-2);
+  }
+  .chat-sidenav__action {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 12px;
+    border: 0;
+    background: transparent;
+    color: var(--ngaf-chat-text);
+    border-radius: 8px;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+  }
+  .chat-sidenav__action:hover { background: var(--ngaf-chat-surface-alt); }
+  .chat-sidenav__action:focus-visible {
+    outline: 2px solid var(--ngaf-chat-primary);
+    outline-offset: 2px;
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav__action {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    justify-content: center;
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav__action-label {
+    display: none;
+  }
+  .chat-sidenav__action-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+  .chat-sidenav__primary,
+  .chat-sidenav__sections {
+    flex-shrink: 0;
+  }
+  .chat-sidenav__threads {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+  }
+  .chat-sidenav__threads-heading {
+    padding: 8px 12px 4px;
+    font-size: var(--ngaf-chat-font-size-xs);
+    color: var(--ngaf-chat-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav__threads-heading {
+    display: none;
+  }
+  .chat-sidenav__account {
+    flex-shrink: 0;
+    border-top: 1px solid var(--ngaf-chat-separator);
+    padding: var(--ngaf-chat-space-3);
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav__account {
+    padding: var(--ngaf-chat-space-2);
+  }
+`;
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add libs/chat/src/lib/styles/chat-sidenav.styles.ts
+git commit -m "feat(chat): chat-sidenav styles"
+```
+
+---
+
+## Task 3: `chat-sidenav` component (TDD)
+
+**Files:**
+- Create: `libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts`
+- Create: `libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts`
+
+- [ ] **Step 1: Write the failing spec**
+
+Create `libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts`:
+
+```typescript
+// libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts
+// SPDX-License-Identifier: MIT
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it } from 'vitest';
+import type { Agent } from '../../agent';
+import { ChatSidenavComponent } from './chat-sidenav.component';
+
+function fakeAgent(): Agent {
+  return {
+    messages: () => [],
+    isLoading: () => false,
+    status: () => 'idle',
+    submit: async () => undefined,
+    events$: { subscribe: () => ({ unsubscribe: () => {} }) },
+  } as unknown as Agent;
+}
+
+function render(opts: { mode?: 'expanded' | 'collapsed' | 'drawer'; open?: boolean; threads?: unknown[] | null } = {}) {
+  const fixture = TestBed.createComponent(ChatSidenavComponent);
+  fixture.componentRef.setInput('agent', fakeAgent());
+  if (opts.mode) fixture.componentRef.setInput('mode', opts.mode);
+  if (opts.open !== undefined) fixture.componentRef.setInput('open', opts.open);
+  if (opts.threads !== undefined) fixture.componentRef.setInput('threads', opts.threads);
+  fixture.detectChanges();
+  return fixture;
+}
+
+describe('ChatSidenavComponent', () => {
+  it('reflects mode via data-mode attribute', () => {
+    expect(render({ mode: 'expanded' }).nativeElement.getAttribute('data-mode')).toBe('expanded');
+    expect(render({ mode: 'collapsed' }).nativeElement.getAttribute('data-mode')).toBe('collapsed');
+    expect(render({ mode: 'drawer' }).nativeElement.getAttribute('data-mode')).toBe('drawer');
+  });
+
+  it('emits newChat when new-chat button clicked', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.newChat.subscribe(() => emits++);
+    const btn = fixture.nativeElement.querySelector('.chat-sidenav__action--new') as HTMLButtonElement;
+    btn.click();
+    expect(emits).toBe(1);
+  });
+
+  it('emits searchOpened when search button clicked', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.searchOpened.subscribe(() => emits++);
+    const btn = fixture.nativeElement.querySelector('.chat-sidenav__action--search') as HTMLButtonElement;
+    btn.click();
+    expect(emits).toBe(1);
+  });
+
+  it('emits searchOpened on Cmd+K', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.searchOpened.subscribe(() => emits++);
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+    expect(emits).toBe(1);
+  });
+
+  it('emits searchOpened on Ctrl+K', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.searchOpened.subscribe(() => emits++);
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }));
+    expect(emits).toBe(1);
+  });
+
+  it('does not emit searchOpened on Cmd+K when focus is in an input', () => {
+    const fixture = render();
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    input.focus();
+    let emits = 0;
+    fixture.componentInstance.searchOpened.subscribe(() => emits++);
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, bubbles: true }));
+    expect(emits).toBe(0);
+    document.body.removeChild(input);
+  });
+
+  it('renders threads section when threads input is non-null', () => {
+    const fixture = render({ threads: [{ id: 't1', title: 'First' }] });
+    expect(fixture.nativeElement.querySelector('chat-thread-list')).not.toBeNull();
+  });
+
+  it('suppresses threads section when threads input is null', () => {
+    const fixture = render({ threads: null });
+    expect(fixture.nativeElement.querySelector('chat-thread-list')).toBeNull();
+  });
+
+  it('drawer mode: scrim click emits openChange(false)', () => {
+    const fixture = render({ mode: 'drawer', open: true });
+    let lastOpen: boolean | undefined;
+    fixture.componentInstance.openChange.subscribe((v: boolean) => { lastOpen = v; });
+    const scrim = fixture.nativeElement.querySelector('.chat-sidenav__scrim') as HTMLButtonElement;
+    scrim.click();
+    expect(lastOpen).toBe(false);
+  });
+
+  it('drawer mode: scrim NOT rendered when open is false', () => {
+    const fixture = render({ mode: 'drawer', open: false });
+    expect(fixture.nativeElement.querySelector('.chat-sidenav__scrim')).toBeNull();
+  });
+});
+```
+
+- [ ] **Step 2: Run the spec to verify it fails**
+
+Run: `npx nx run chat:test 2>&1 | grep -E "chat-sidenav|FAIL"`
+Expected: FAIL — component does not exist.
+
+- [ ] **Step 3: Create the component**
+
+Create `libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts`:
+
+```typescript
+// libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts
+// SPDX-License-Identifier: MIT
+import {
+  Component,
+  ChangeDetectionStrategy,
+  DestroyRef,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent } from 'rxjs';
+import type { Agent } from '../../agent';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_SIDENAV_STYLES } from '../../styles/chat-sidenav.styles';
+import { ChatThreadListComponent, type Thread } from '../../primitives/chat-thread-list/chat-thread-list.component';
+
+export type ChatSidenavMode = 'expanded' | 'collapsed' | 'drawer';
+
+@Component({
+  selector: 'chat-sidenav',
+  standalone: true,
+  imports: [ChatThreadListComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.data-mode]': 'mode()',
+    '[attr.data-open]': 'open() ? "true" : "false"',
+  },
+  styles: [CHAT_HOST_TOKENS, CHAT_SIDENAV_STYLES],
+  template: `
+    @if (mode() === 'drawer' && open()) {
+      <button
+        type="button"
+        class="chat-sidenav__scrim"
+        aria-label="Close conversations"
+        (click)="openChange.emit(false)"
+      ></button>
+    }
+    <aside
+      class="chat-sidenav"
+      role="navigation"
+      aria-label="Sidebar navigation"
+      (keydown.escape)="onEscape()"
+    >
+      <div class="chat-sidenav__header">
+        <ng-content select="[sidenavHeader]" />
+      </div>
+
+      <div class="chat-sidenav__actions">
+        <button
+          type="button"
+          class="chat-sidenav__action chat-sidenav__action--new"
+          (click)="newChat.emit()"
+          aria-label="New chat"
+          title="New chat"
+        >
+          <svg class="chat-sidenav__action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="12" y1="5" x2="12" y2="19"/>
+            <line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+          <span class="chat-sidenav__action-label">New chat</span>
+        </button>
+        <button
+          type="button"
+          class="chat-sidenav__action chat-sidenav__action--search"
+          (click)="searchOpened.emit()"
+          aria-label="Search conversations"
+          title="Search conversations (⌘K)"
+        >
+          <svg class="chat-sidenav__action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="7"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <span class="chat-sidenav__action-label">Search</span>
+        </button>
+      </div>
+
+      <div class="chat-sidenav__primary">
+        <ng-content select="[sidenavPrimary]" />
+      </div>
+
+      @if (threads() !== null) {
+        <div class="chat-sidenav__threads">
+          <div class="chat-sidenav__threads-heading">Recent</div>
+          <chat-thread-list
+            [threads]="threads()!"
+            [activeThreadId]="activeThreadId() ?? ''"
+            (threadSelected)="threadSelected.emit($event)"
+          />
+        </div>
+      }
+
+      <div class="chat-sidenav__sections">
+        <ng-content select="[sidenavSections]" />
+      </div>
+
+      <div class="chat-sidenav__account">
+        <ng-content select="[sidenavAccount]" />
+      </div>
+    </aside>
+  `,
+})
+export class ChatSidenavComponent {
+  readonly agent = input.required<Agent>();
+  readonly mode = input<ChatSidenavMode>('expanded');
+  readonly open = model<boolean>(false);
+  readonly threads = input<Thread[] | null>(null);
+  readonly activeThreadId = input<string | null>(null);
+
+  readonly newChat = output<void>();
+  readonly threadSelected = output<string>();
+  readonly searchOpened = output<void>();
+  readonly openChange = output<boolean>();
+
+  private readonly destroyRef = inject(DestroyRef);
+  private invokerOnOpen: Element | null = null;
+
+  constructor() {
+    fromEvent<KeyboardEvent>(window, 'keydown')
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((e) => {
+        if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k')) return;
+        const t = e.target as HTMLElement | null;
+        if (t) {
+          const tag = t.tagName;
+          if (tag === 'INPUT' || tag === 'TEXTAREA' || t.isContentEditable) return;
+        }
+        e.preventDefault();
+        this.searchOpened.emit();
+      });
+  }
+
+  protected onEscape(): void {
+    if (this.mode() === 'drawer' && this.open()) {
+      this.openChange.emit(false);
+    }
+  }
+}
+```
+
+- [ ] **Step 4: Run the spec — must pass**
+
+Run: `npx nx run chat:test 2>&1 | tail -5`
+Expected: PASS (all chat-sidenav tests).
+
+- [ ] **Step 5: Run build**
+
+Run: `npx nx run chat:build`
+Expected: PASS.
+
+- [ ] **Step 6: Lint**
+
+Run: `npx nx lint chat 2>&1 | tail -5`
+Expected: no errors.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add libs/chat/src/lib/compositions/chat-sidenav/
+git commit -m "feat(chat): chat-sidenav composition with three responsive modes"
+```
+
+---
+
+## Task 4: Hard-replace `chat-thread-drawer`
+
+**Files:**
+- Delete: `libs/chat/src/lib/compositions/chat-thread-drawer/`
+- Modify: `libs/chat/src/public-api.ts`
+
+- [ ] **Step 1: Delete the drawer directory**
+
+Run:
+
+```bash
+rm -rf libs/chat/src/lib/compositions/chat-thread-drawer/
+```
+
+- [ ] **Step 2: Remove drawer exports from public-api.ts**
+
+Open `libs/chat/src/public-api.ts`. Find the two lines:
+
+```typescript
+export { ChatThreadDrawerComponent } from './lib/compositions/chat-thread-drawer/chat-thread-drawer.component';
+export type { ChatThreadDrawerMode } from './lib/compositions/chat-thread-drawer/chat-thread-drawer.component';
+```
+
+Delete both lines.
+
+- [ ] **Step 3: Add `ChatSidenavComponent` and `ChatSidenavMode` exports**
+
+In `public-api.ts`, immediately after the existing chat composition exports (search for `ChatComponent` exports near the top of the compositions section — `export { ChatComponent } from './lib/compositions/chat/chat.component';`), add:
+
+```typescript
+export { ChatSidenavComponent } from './lib/compositions/chat-sidenav/chat-sidenav.component';
+export type { ChatSidenavMode } from './lib/compositions/chat-sidenav/chat-sidenav.component';
+```
+
+- [ ] **Step 4: Verify no remaining references to the drawer in the lib**
+
+Run: `grep -rn "ChatThreadDrawer\|chat-thread-drawer" libs/chat/src/`
+Expected: no output.
+
+- [ ] **Step 5: Build (lib only — examples will be broken until Task 5)**
+
+Run: `npx nx run chat:build`
+Expected: PASS.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add libs/chat/src/lib/compositions/chat-thread-drawer libs/chat/src/public-api.ts
+git commit -m "feat(chat)!: remove chat-thread-drawer; replaced by chat-sidenav"
+```
+
+---
+
+## Task 5: Migrate `examples-chat-angular` to `chat-sidenav`
+
+**Files:**
+- Modify: `examples/chat/angular/src/app/shell/demo-shell.component.ts`
+- Modify: `examples/chat/angular/src/app/shell/demo-shell.component.html`
+
+The shell currently uses `chat-thread-drawer` with `chat-thread-list` projected inside. After migration, the sidenav itself renders the thread list (via its built-in section).
+
+- [ ] **Step 1: Update the TypeScript shell**
+
+Open `examples/chat/angular/src/app/shell/demo-shell.component.ts`.
+
+Replace the import block that names the drawer:
+
+```typescript
+ChatThreadDrawerComponent,
+ChatThreadListComponent,
+```
+
+with:
+
+```typescript
+ChatSidenavComponent,
+type ChatSidenavMode,
+```
+
+(Remove `ChatThreadListComponent` — the sidenav now wraps it internally.)
+
+In the `@Component({ imports: [...] })` array, replace:
+
+```typescript
+ChatThreadDrawerComponent,
+ChatThreadListComponent,
+```
+
+with:
+
+```typescript
+ChatSidenavComponent,
+```
+
+Replace the `drawerMode` computed (search for `drawerMode = computed`):
+
+```typescript
+protected readonly drawerMode = computed<'push' | 'overlay'>(() =>
+  this.viewportWidth() >= 1024 ? 'push' : 'overlay',
+);
+```
+
+with:
+
+```typescript
+protected readonly sidenavMode = computed<ChatSidenavMode>(() =>
+  this.viewportWidth() >= 1024 ? 'expanded' : 'drawer',
+);
+```
+
+(The persisted `drawerOpen` signal still drives the drawer in narrow viewports; on desktop the sidenav is always rendered expanded so `drawerOpen` is ignored.)
+
+Rename `onDrawerOpenChange` to `onSidenavOpenChange` (find+replace within the file — there are two call sites: the method definition and `toggleDrawer`).
+
+- [ ] **Step 2: Update the template**
+
+Open `examples/chat/angular/src/app/shell/demo-shell.component.html`.
+
+Replace the `<chat-thread-drawer>` block (lines around 10-22) with:
+
+```html
+<chat-sidenav
+  [agent]="agent"
+  [threads]="threadsSvc.threads()"
+  [activeThreadId]="threadIdSignal() ?? ''"
+  [mode]="sidenavMode()"
+  [(open)]="drawerOpen"
+  (newChat)="onNewThread()"
+  (threadSelected)="onThreadSelected($event)"
+  (openChange)="onSidenavOpenChange($event)"
+/>
+```
+
+Note: `[(open)]` two-way binds AND `(openChange)` listener fires for persistence. Angular dispatches both — the `open` signal updates via `model`, and `onSidenavOpenChange` writes to persistence.
+
+Update the hamburger button's behavior — it should toggle the sidenav open state on narrow viewports only (on desktop the sidenav is permanent). The existing logic already toggles via `toggleDrawer()` which calls `onDrawerOpenChange(!drawerOpen())`. Rename the method call:
+
+```html
+<button
+  type="button"
+  class="demo-shell__hamburger"
+  aria-label="Open conversations"
+  [attr.aria-expanded]="drawerOpen()"
+  (click)="toggleSidenav()"
+>☰</button>
+```
+
+In the TS file, rename `toggleDrawer()` to `toggleSidenav()`.
+
+- [ ] **Step 3: Verify there are no stale references**
+
+Run from repo root: `grep -rn "ChatThreadDrawer\|chat-thread-drawer\|ChatThreadListComponent" examples/chat/angular/src/`
+Expected: no output (or only references to `chat-thread-list` *element* inside docs/comments which is unrelated).
+
+- [ ] **Step 4: Build the example**
+
+Run: `npx nx run examples-chat-angular:build`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add examples/chat/angular/src/app/shell/
+git commit -m "refactor(examples-chat): migrate from chat-thread-drawer to chat-sidenav"
+```
+
+---
+
+## Task 6: Create `chat-history-search-palette` styles
+
+**Files:**
+- Create: `libs/chat/src/lib/styles/chat-history-search-palette.styles.ts`
+
+- [ ] **Step 1: Write the styles constant**
+
+Create `libs/chat/src/lib/styles/chat-history-search-palette.styles.ts`:
+
+```typescript
+// libs/chat/src/lib/styles/chat-history-search-palette.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_HISTORY_SEARCH_PALETTE_STYLES = `
+  :host { display: contents; }
+  .chat-history-search-palette__scrim {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 50;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+  .chat-history-search-palette {
+    position: fixed;
+    top: 15vh;
+    left: 50%;
+    transform: translateX(-50%);
+    width: min(560px, 90vw);
+    max-height: 70vh;
+    background: var(--ngaf-chat-bg);
+    border: 1px solid var(--ngaf-chat-separator);
+    border-radius: 12px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
+    z-index: 51;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .chat-history-search-palette__input-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--ngaf-chat-separator);
+  }
+  .chat-history-search-palette__icon {
+    width: 18px;
+    height: 18px;
+    color: var(--ngaf-chat-text-muted);
+    flex-shrink: 0;
+  }
+  .chat-history-search-palette__input {
+    flex: 1 1 auto;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: var(--ngaf-chat-text);
+    font: inherit;
+    font-size: 1rem;
+  }
+  .chat-history-search-palette__input::placeholder {
+    color: var(--ngaf-chat-text-muted);
+  }
+  .chat-history-search-palette__close {
+    background: transparent;
+    border: 0;
+    padding: 4px;
+    color: var(--ngaf-chat-text-muted);
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  .chat-history-search-palette__close:hover { color: var(--ngaf-chat-text); }
+  .chat-history-search-palette__list {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 4px;
+    margin: 0;
+    list-style: none;
+  }
+  .chat-history-search-palette__row {
+    display: flex;
+    flex-direction: column;
+    padding: 10px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  .chat-history-search-palette__row[aria-selected="true"] {
+    background: var(--ngaf-chat-surface-alt);
+  }
+  .chat-history-search-palette__row-title {
+    color: var(--ngaf-chat-text);
+    font-size: var(--ngaf-chat-font-size);
+  }
+  .chat-history-search-palette__row-subtitle {
+    color: var(--ngaf-chat-text-muted);
+    font-size: var(--ngaf-chat-font-size-sm);
+    margin-top: 2px;
+  }
+  .chat-history-search-palette__empty,
+  .chat-history-search-palette__hint {
+    padding: 24px 16px;
+    color: var(--ngaf-chat-text-muted);
+    text-align: center;
+    font-size: var(--ngaf-chat-font-size-sm);
+  }
+  .chat-history-search-palette__skeleton {
+    padding: 8px 4px;
+  }
+  .chat-history-search-palette__skeleton-row {
+    height: 36px;
+    margin: 4px 0;
+    background: var(--ngaf-chat-surface-alt);
+    border-radius: 8px;
+    animation: ngaf-chat-pulse 1.4s ease-in-out infinite;
+  }
+`;
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add libs/chat/src/lib/styles/chat-history-search-palette.styles.ts
+git commit -m "feat(chat): chat-history-search-palette styles"
+```
+
+---
+
+## Task 7: `chat-history-search-palette` component (TDD)
+
+**Files:**
+- Create: `libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.spec.ts`
+- Create: `libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts`
+
+- [ ] **Step 1: Write the failing spec**
+
+Create `libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.spec.ts`:
+
+```typescript
+// libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.spec.ts
+// SPDX-License-Identifier: MIT
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it } from 'vitest';
+import { ChatHistorySearchPaletteComponent, type ThreadMatch } from './chat-history-search-palette.component';
+
+function render(opts: { open?: boolean; query?: string; results?: ThreadMatch[]; loading?: boolean } = {}) {
+  const fixture = TestBed.createComponent(ChatHistorySearchPaletteComponent);
+  fixture.componentRef.setInput('open', opts.open ?? true);
+  if (opts.query !== undefined) fixture.componentRef.setInput('query', opts.query);
+  if (opts.results !== undefined) fixture.componentRef.setInput('results', opts.results);
+  if (opts.loading !== undefined) fixture.componentRef.setInput('loading', opts.loading);
+  fixture.detectChanges();
+  return fixture;
+}
+
+describe('ChatHistorySearchPaletteComponent', () => {
+  it('renders nothing when open is false', () => {
+    const fixture = render({ open: false });
+    expect(fixture.nativeElement.querySelector('.chat-history-search-palette')).toBeNull();
+  });
+
+  it('renders hint when query is empty and not loading', () => {
+    const fixture = render({ query: '', loading: false });
+    expect(fixture.nativeElement.querySelector('.chat-history-search-palette__hint')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('.chat-history-search-palette__empty')).toBeNull();
+  });
+
+  it('renders empty state when query is non-empty and results empty', () => {
+    const fixture = render({ query: 'xyz', results: [], loading: false });
+    expect(fixture.nativeElement.querySelector('.chat-history-search-palette__empty')).not.toBeNull();
+  });
+
+  it('renders skeleton when loading and results empty', () => {
+    const fixture = render({ loading: true, results: [] });
+    expect(fixture.nativeElement.querySelector('.chat-history-search-palette__skeleton')).not.toBeNull();
+  });
+
+  it('renders result rows when results provided', () => {
+    const fixture = render({
+      query: 'foo',
+      results: [
+        { id: '1', title: 'First' },
+        { id: '2', title: 'Second', subtitle: 'sub' },
+      ],
+    });
+    const rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    expect(rows.length).toBe(2);
+    expect(rows[1].textContent).toContain('Second');
+    expect(rows[1].textContent).toContain('sub');
+  });
+
+  it('marks active row with aria-selected', () => {
+    const fixture = render({
+      query: 'foo',
+      results: [{ id: '1', title: 'First' }, { id: '2', title: 'Second' }],
+    });
+    const rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    expect(rows[0].getAttribute('aria-selected')).toBe('true');
+    expect(rows[1].getAttribute('aria-selected')).toBe('false');
+  });
+
+  it('ArrowDown advances active index, clamps at end', () => {
+    const fixture = render({
+      query: 'foo',
+      results: [{ id: '1', title: 'A' }, { id: '2', title: 'B' }],
+    });
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    let rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    expect(rows[1].getAttribute('aria-selected')).toBe('true');
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    expect(rows[1].getAttribute('aria-selected')).toBe('true'); // clamped
+  });
+
+  it('ArrowUp moves active index back, clamps at 0', () => {
+    const fixture = render({
+      query: 'foo',
+      results: [{ id: '1', title: 'A' }, { id: '2', title: 'B' }],
+    });
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+    fixture.detectChanges();
+    const rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    expect(rows[0].getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('Enter emits threadSelected with active row id', () => {
+    const fixture = render({
+      query: 'foo',
+      results: [{ id: 'a', title: 'A' }, { id: 'b', title: 'B' }],
+    });
+    let received: string | undefined;
+    fixture.componentInstance.threadSelected.subscribe((id: string) => { received = id; });
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    expect(received).toBe('b');
+  });
+
+  it('Enter with no results is a no-op', () => {
+    const fixture = render({ query: 'x', results: [] });
+    let emits = 0;
+    fixture.componentInstance.threadSelected.subscribe(() => emits++);
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    expect(emits).toBe(0);
+  });
+
+  it('Esc emits close', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.close.subscribe(() => emits++);
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    expect(emits).toBe(1);
+  });
+
+  it('Scrim click emits close', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.close.subscribe(() => emits++);
+    const scrim = fixture.nativeElement.querySelector('.chat-history-search-palette__scrim') as HTMLButtonElement;
+    scrim.click();
+    expect(emits).toBe(1);
+  });
+
+  it('Row click emits threadSelected', () => {
+    const fixture = render({
+      query: 'x',
+      results: [{ id: 'r1', title: 'R1' }, { id: 'r2', title: 'R2' }],
+    });
+    let received: string | undefined;
+    fixture.componentInstance.threadSelected.subscribe((id: string) => { received = id; });
+    const rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    (rows[1] as HTMLElement).click();
+    expect(received).toBe('r2');
+  });
+
+  it('input has correct ARIA attributes', () => {
+    const fixture = render({
+      query: 'x',
+      results: [{ id: '1', title: 'A' }],
+    });
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    expect(input.getAttribute('role')).toBe('combobox');
+    expect(input.getAttribute('aria-expanded')).toBe('true');
+    expect(input.getAttribute('aria-controls')).toBeTruthy();
+    expect(input.getAttribute('aria-activedescendant')).toBeTruthy();
+  });
+});
+```
+
+- [ ] **Step 2: Run the spec — must fail**
+
+Run: `npx nx run chat:test 2>&1 | grep -E "chat-history-search-palette|FAIL"`
+Expected: FAIL — component does not exist.
+
+- [ ] **Step 3: Create the component**
+
+Create `libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts`:
+
+```typescript
+// libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts
+// SPDX-License-Identifier: MIT
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  effect,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_HISTORY_SEARCH_PALETTE_STYLES } from '../../styles/chat-history-search-palette.styles';
+
+export interface ThreadMatch {
+  id: string;
+  title: string;
+  /** Optional secondary line, rendered muted under the title. */
+  subtitle?: string;
+}
+
+let paletteInstanceCounter = 0;
+
+@Component({
+  selector: 'chat-history-search-palette',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_HISTORY_SEARCH_PALETTE_STYLES],
+  template: `
+    @if (open()) {
+      <button
+        type="button"
+        class="chat-history-search-palette__scrim"
+        aria-label="Close search"
+        (click)="close.emit()"
+      ></button>
+      <div
+        class="chat-history-search-palette"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Search conversations"
+      >
+        <div class="chat-history-search-palette__input-row">
+          <svg class="chat-history-search-palette__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="7"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <input
+            #inputEl
+            class="chat-history-search-palette__input"
+            type="text"
+            role="combobox"
+            aria-expanded="true"
+            [attr.aria-controls]="listId"
+            [attr.aria-activedescendant]="activeRowId()"
+            [placeholder]="placeholder()"
+            [value]="query()"
+            (input)="onInput($event)"
+            (keydown)="onInputKeydown($event)"
+          />
+          <button
+            type="button"
+            class="chat-history-search-palette__close"
+            aria-label="Close"
+            (click)="close.emit()"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        @if (loading() && results().length === 0) {
+          <div class="chat-history-search-palette__skeleton" aria-hidden="true">
+            <div class="chat-history-search-palette__skeleton-row"></div>
+            <div class="chat-history-search-palette__skeleton-row"></div>
+            <div class="chat-history-search-palette__skeleton-row"></div>
+          </div>
+        } @else if (results().length === 0 && query().length === 0) {
+          <div class="chat-history-search-palette__hint">Type to search your conversations.</div>
+        } @else if (results().length === 0) {
+          <div class="chat-history-search-palette__empty">No conversations match.</div>
+        } @else {
+          <ul class="chat-history-search-palette__list" role="listbox" [id]="listId">
+            @for (row of results(); let i = $index; track row.id) {
+              <li
+                class="chat-history-search-palette__row"
+                role="option"
+                [id]="rowId(i)"
+                [attr.aria-selected]="i === activeIndex() ? 'true' : 'false'"
+                (click)="onRowClick(row.id)"
+              >
+                <span class="chat-history-search-palette__row-title">{{ row.title }}</span>
+                @if (row.subtitle) {
+                  <span class="chat-history-search-palette__row-subtitle">{{ row.subtitle }}</span>
+                }
+              </li>
+            }
+          </ul>
+        }
+      </div>
+    }
+  `,
+})
+export class ChatHistorySearchPaletteComponent {
+  readonly open = model<boolean>(false);
+  readonly query = model<string>('');
+  readonly results = input<ThreadMatch[]>([]);
+  readonly loading = input<boolean>(false);
+  readonly placeholder = input<string>('Search conversations');
+
+  readonly threadSelected = output<string>();
+  readonly close = output<void>();
+
+  protected readonly activeIndex = signal<number>(0);
+  protected readonly listId = `chat-history-search-palette__results-${++paletteInstanceCounter}`;
+
+  private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');
+
+  constructor() {
+    // On open → focus input, reset active index. Reset of activeIndex also
+    // covers the case where results shrink and the previous index is stale.
+    effect(() => {
+      if (this.open()) {
+        this.activeIndex.set(0);
+        queueMicrotask(() => this.inputEl()?.nativeElement.focus());
+      }
+    });
+    // Clamp activeIndex when results shrink while open.
+    effect(() => {
+      const max = this.results().length - 1;
+      if (max >= 0 && this.activeIndex() > max) {
+        this.activeIndex.set(max);
+      }
+    });
+  }
+
+  protected rowId(index: number): string {
+    return `${this.listId}__row-${index}`;
+  }
+
+  protected activeRowId(): string | null {
+    return this.results().length > 0 ? this.rowId(this.activeIndex()) : null;
+  }
+
+  protected onInput(e: Event): void {
+    const value = (e.target as HTMLInputElement).value;
+    this.query.set(value);
+  }
+
+  protected onInputKeydown(e: KeyboardEvent): void {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this.close.emit();
+      return;
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const max = this.results().length - 1;
+      if (max < 0) return;
+      this.activeIndex.set(Math.min(this.activeIndex() + 1, max));
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      this.activeIndex.set(Math.max(this.activeIndex() - 1, 0));
+      return;
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const rows = this.results();
+      if (rows.length === 0) return;
+      const row = rows[this.activeIndex()];
+      this.threadSelected.emit(row.id);
+      return;
+    }
+  }
+
+  protected onRowClick(id: string): void {
+    this.threadSelected.emit(id);
+  }
+}
+```
+
+- [ ] **Step 4: Run the spec — must pass**
+
+Run: `npx nx run chat:test 2>&1 | tail -10`
+Expected: PASS (all chat-history-search-palette tests).
+
+- [ ] **Step 5: Build + lint**
+
+Run: `npx nx run chat:build && npx nx lint chat 2>&1 | tail -5`
+Expected: both PASS.
+
+- [ ] **Step 6: Export from public-api.ts**
+
+In `libs/chat/src/public-api.ts`, near the `ChatTypingIndicatorComponent` export, add:
+
+```typescript
+export { ChatHistorySearchPaletteComponent } from './lib/primitives/chat-history-search-palette/chat-history-search-palette.component';
+export type { ThreadMatch } from './lib/primitives/chat-history-search-palette/chat-history-search-palette.component';
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add libs/chat/src/lib/primitives/chat-history-search-palette libs/chat/src/public-api.ts
+git commit -m "feat(chat): chat-history-search-palette primitive (Cmd+K modal)"
+```
+
+---
+
+## Task 8: Wire the search palette in `examples-chat-angular`
+
+**Files:**
+- Modify: `examples/chat/angular/src/app/shell/demo-shell.component.ts`
+- Modify: `examples/chat/angular/src/app/shell/demo-shell.component.html`
+
+- [ ] **Step 1: Add palette state and computed results to the shell**
+
+In `demo-shell.component.ts`, add `ChatHistorySearchPaletteComponent` to the imports list (next to `ChatSidenavComponent`):
+
+```typescript
+import {
+  ChatDebugComponent,
+  // ... existing
+  ChatSidenavComponent,
+  type ChatSidenavMode,
+  ChatHistorySearchPaletteComponent,
+  type ThreadMatch,
+} from '@ngaf/chat';
+```
+
+Add to the `imports: [...]` array in the `@Component` decorator: `ChatHistorySearchPaletteComponent`.
+
+Add to the class body (near the existing `drawerOpen` signal):
+
+```typescript
+/** Whether the Cmd+K search palette is open. */
+protected readonly paletteOpen = signal<boolean>(false);
+
+/** Current palette query. Two-way bound. */
+protected readonly searchQuery = signal<string>('');
+
+/** Debounced query — applied 150ms after the last keystroke. */
+private readonly searchQueryDebounced = signal<string>('');
+
+private searchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+constructor() {
+  // ... existing constructor body ...
+  effect(() => {
+    const q = this.searchQuery();
+    if (this.searchDebounceTimer !== null) clearTimeout(this.searchDebounceTimer);
+    this.searchDebounceTimer = setTimeout(() => {
+      this.searchQueryDebounced.set(q);
+    }, 150);
+  });
+}
+
+/** Client-side title filter over the loaded threads. */
+protected readonly searchResults = computed<ThreadMatch[]>(() => {
+  const q = this.searchQueryDebounced().toLowerCase().trim();
+  if (!q) return [];
+  const seen = this.threadsSvc.threads();
+  return seen
+    .filter((t) => (t.title ?? '').toLowerCase().includes(q))
+    .slice(0, 50)
+    .map((t) => ({ id: t.id, title: t.title ?? t.id }));
+});
+
+protected onSearchSelect(threadId: string): void {
+  this.onThreadSelected(threadId);
+  this.paletteOpen.set(false);
+  this.searchQuery.set('');
+}
+```
+
+(Note: the constructor edit appends to the existing constructor body — keep the existing `effect`/`addEventListener` blocks intact.)
+
+- [ ] **Step 2: Bind the palette and the sidenav's searchOpened event in the template**
+
+In `demo-shell.component.html`, update the `<chat-sidenav>` element to wire `(searchOpened)`:
+
+```html
+<chat-sidenav
+  [agent]="agent"
+  [threads]="threadsSvc.threads()"
+  [activeThreadId]="threadIdSignal() ?? ''"
+  [mode]="sidenavMode()"
+  [(open)]="drawerOpen"
+  (newChat)="onNewThread()"
+  (threadSelected)="onThreadSelected($event)"
+  (searchOpened)="paletteOpen.set(true)"
+  (openChange)="onSidenavOpenChange($event)"
+/>
+```
+
+Add the palette as a sibling, anywhere in the template (above `<chat-debug>` is fine):
+
+```html
+<chat-history-search-palette
+  [(open)]="paletteOpen"
+  [(query)]="searchQuery"
+  [results]="searchResults()"
+  (threadSelected)="onSearchSelect($event)"
+  (close)="paletteOpen.set(false)"
+/>
+```
+
+- [ ] **Step 3: Build the example**
+
+Run: `npx nx run examples-chat-angular:build`
+Expected: PASS.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add examples/chat/angular/src/app/shell/
+git commit -m "feat(examples-chat): wire Cmd+K palette with default client-side title filter"
+```
+
+---
+
+## Task 9: Regenerate website API docs
+
+**Files:**
+- Modify: `apps/website/content/docs/chat/api/api-docs.json`
+
+- [ ] **Step 1: Regenerate**
+
+Run:
+
+```bash
+npx tsx apps/website/scripts/generate-api-docs.ts
+```
+
+Expected output includes `✓ chat/api/api-docs.json (N entries)` with N reflecting the added `ChatSidenavComponent`, `ChatSidenavMode`, `ChatHistorySearchPaletteComponent`, `ThreadMatch`, `Thread` and removed `ChatThreadDrawerComponent`, `ChatThreadDrawerMode` entries.
+
+- [ ] **Step 2: Verify diff is reasonable**
+
+Run: `git diff --stat apps/website/content/docs/chat/api/api-docs.json`
+Expected: changes only to that one file; net positive lines (more new exports than removed).
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/content/docs/chat/api/api-docs.json
+git commit -m "docs(chat): regenerate chat API docs for sidenav + search palette"
+```
+
+---
+
+## Task 10: Manual browser verification (Chrome MCP)
+
+**Files:** none (verification only)
+
+This task is the controller's job; subagents should not run it. Implementer agents should stop after Task 9 and report.
+
+The controller will:
+
+1. Add an `examples-chat` launcher entry in `.claude/launch.json` if not already present (port 4400, name `examples-chat`).
+2. `preview_start` the example.
+3. Click into a thread that has content (the example seeds threads on a running LangGraph backend).
+4. Verify:
+   - **Desktop layout (viewport ≥ 1024px)**: sidenav renders as a permanent left rail (`data-mode="expanded"`), threads list visible, new-chat and search buttons visible with labels.
+   - **Narrow layout (viewport < 1024px)**: sidenav renders as a drawer; hamburger button opens it; scrim + Esc close it; focus trap works.
+   - **New chat button**: click → starts a new thread (existing `onNewThread` flow).
+   - **Search button**: click → palette opens, focus moves to input.
+   - **Cmd+K (mac) / Ctrl+K (linux)**: opens the palette globally.
+   - **Type a query**: after ~150ms, filtered results appear.
+   - **ArrowDown / ArrowUp / Enter**: navigates and selects.
+   - **Esc**: closes the palette.
+   - **Scrim click**: closes the palette.
+   - **Suppression**: Cmd+K while typing inside the main composer (the chat input textarea) does NOT open the palette.
+5. `preview_screenshot` for at least: sidenav expanded, palette open with results, palette empty-state.
+6. Stop the preview server.
+
+If any issue is found, fix it, re-verify, commit.
+
+---
+
+## Self-Review
+
+**Spec coverage:**
+- Sidenav composition with three modes → Task 3 (component) + Task 2 (styles)
+- Hard-replace `chat-thread-drawer` → Task 4
+- Built-in new-chat, threads, search-trigger buttons → Task 3
+- Named projection slots (`[sidenavHeader]`, `[sidenavPrimary]`, `[sidenavSections]`, `[sidenavAccount]`) → Task 3 template
+- CSS width tokens → Task 1
+- Cmd/Ctrl+K shortcut on sidenav, suppressed when in input → Task 3 component constructor + spec
+- Drawer-mode scrim/focus-trap/Esc → Task 3 (scrim + keydown.escape) + Task 2 (CSS)
+- Search palette with required states (loading/empty/hint/results) → Task 7 component + spec
+- Palette keyboard (ArrowUp/Down/Enter/Esc) → Task 7 onInputKeydown
+- Palette ARIA (combobox, listbox, activedescendant) → Task 7 template
+- Palette is dumb / consumer-wired → Task 7 + Task 8 example wiring
+- Examples migration → Task 5 + Task 8
+- API doc regeneration → Task 9
+- Public-api.ts adjustments → Tasks 1, 4, 7
+- Manual verification → Task 10
+
+**Placeholder scan:** None. All steps contain concrete code or commands.
+
+**Type consistency:**
+- `Thread` is reused from `chat-thread-list.component.ts` (Task 1 export) and consumed in `chat-sidenav.component.ts` (Task 3) and `examples-chat-angular` (Task 5 / Task 8).
+- `ChatSidenavMode` defined in Task 3, consumed in Task 5.
+- `ThreadMatch` defined in Task 7, consumed in Task 8.
+- All output names consistent: `newChat`, `threadSelected`, `searchOpened`, `openChange` on sidenav; `threadSelected`, `close` on palette.
+- All input/model names consistent: `agent`, `mode`, `open`, `threads`, `activeThreadId` on sidenav; `open`, `query`, `results`, `loading`, `placeholder` on palette.

From 9eab4a36ee04a8b175ee41349d3b26317ad9f061 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:23:57 -0700
Subject: [PATCH 03/12] feat(chat): sidenav width tokens; export Thread type

---
 libs/chat/src/lib/styles/chat-tokens.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/libs/chat/src/lib/styles/chat-tokens.ts b/libs/chat/src/lib/styles/chat-tokens.ts
index e79d1a2f9..2438b0aa7 100644
--- a/libs/chat/src/lib/styles/chat-tokens.ts
+++ b/libs/chat/src/lib/styles/chat-tokens.ts
@@ -69,6 +69,9 @@ const SPACING_TOKENS = `
   --ngaf-chat-space-8: 32px;
   --ngaf-chat-edge-pad: 16px;
   --ngaf-chat-input-gap: 0.75rem;
+  --ngaf-chat-sidenav-width-expanded: 280px;
+  --ngaf-chat-sidenav-width-collapsed: 56px;
+  --ngaf-chat-sidenav-width-drawer: 280px;
 `;
 
 const KEYFRAMES = `

From 5fc149f0074936a5163a9783ea13d2e5c946184e Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:25:14 -0700
Subject: [PATCH 04/12] feat(chat): chat-sidenav styles

---
 .../src/lib/styles/chat-sidenav.styles.ts     | 129 ++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 libs/chat/src/lib/styles/chat-sidenav.styles.ts

diff --git a/libs/chat/src/lib/styles/chat-sidenav.styles.ts b/libs/chat/src/lib/styles/chat-sidenav.styles.ts
new file mode 100644
index 000000000..b193ff752
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-sidenav.styles.ts
@@ -0,0 +1,129 @@
+// libs/chat/src/lib/styles/chat-sidenav.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_SIDENAV_STYLES = `
+  :host {
+    display: block;
+    height: 100%;
+  }
+  :host([data-mode="expanded"]) .chat-sidenav {
+    width: var(--ngaf-chat-sidenav-width-expanded);
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav {
+    width: var(--ngaf-chat-sidenav-width-collapsed);
+  }
+  :host([data-mode="drawer"]) {
+    position: relative;
+  }
+  .chat-sidenav {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--ngaf-chat-bg);
+    border-right: 1px solid var(--ngaf-chat-separator);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  .chat-sidenav__scrim {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 1000;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+  :host([data-mode="drawer"]) .chat-sidenav {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--ngaf-chat-sidenav-width-drawer);
+    z-index: 1001;
+    transition: transform 200ms ease;
+    transform: translateX(-100%);
+  }
+  :host([data-mode="drawer"][data-open="true"]) .chat-sidenav {
+    transform: translateX(0);
+  }
+  @media (max-width: 767px) {
+    :host([data-mode="drawer"]) .chat-sidenav {
+      width: 100%;
+    }
+  }
+  .chat-sidenav__header {
+    flex-shrink: 0;
+    padding: var(--ngaf-chat-space-3);
+    border-bottom: 1px solid var(--ngaf-chat-separator);
+  }
+  .chat-sidenav__actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: var(--ngaf-chat-space-3);
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav__actions {
+    align-items: center;
+    padding: var(--ngaf-chat-space-2);
+  }
+  .chat-sidenav__action {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 12px;
+    border: 0;
+    background: transparent;
+    color: var(--ngaf-chat-text);
+    border-radius: 8px;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+  }
+  .chat-sidenav__action:hover { background: var(--ngaf-chat-surface-alt); }
+  .chat-sidenav__action:focus-visible {
+    outline: 2px solid var(--ngaf-chat-primary);
+    outline-offset: 2px;
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav__action {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    justify-content: center;
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav__action-label {
+    display: none;
+  }
+  .chat-sidenav__action-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+  .chat-sidenav__primary,
+  .chat-sidenav__sections {
+    flex-shrink: 0;
+  }
+  .chat-sidenav__threads {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+  }
+  .chat-sidenav__threads-heading {
+    padding: 8px 12px 4px;
+    font-size: var(--ngaf-chat-font-size-xs);
+    color: var(--ngaf-chat-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav__threads-heading {
+    display: none;
+  }
+  .chat-sidenav__account {
+    flex-shrink: 0;
+    border-top: 1px solid var(--ngaf-chat-separator);
+    padding: var(--ngaf-chat-space-3);
+  }
+  :host([data-mode="collapsed"]) .chat-sidenav__account {
+    padding: var(--ngaf-chat-space-2);
+  }
+`;

From 461f638ce72c3936f628edc5c68b409a1c1c3419 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:30:40 -0700
Subject: [PATCH 05/12] feat(chat): chat-sidenav composition with three
 responsive modes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../chat-sidenav.component.spec.ts            | 105 ++++++++++++++
 .../chat-sidenav/chat-sidenav.component.ts    | 137 ++++++++++++++++++
 2 files changed, 242 insertions(+)
 create mode 100644 libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts
 create mode 100644 libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts

diff --git a/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts b/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts
new file mode 100644
index 000000000..b5ee1d023
--- /dev/null
+++ b/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts
@@ -0,0 +1,105 @@
+// libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts
+// SPDX-License-Identifier: MIT
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it } from 'vitest';
+import type { Agent } from '../../agent';
+import { ChatSidenavComponent } from './chat-sidenav.component';
+
+function fakeAgent(): Agent {
+  return {
+    messages: () => [],
+    isLoading: () => false,
+    status: () => 'idle',
+    submit: async () => undefined,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    events$: { subscribe: () => ({ unsubscribe: () => {} }) },
+  } as unknown as Agent;
+}
+
+function render(opts: { mode?: 'expanded' | 'collapsed' | 'drawer'; open?: boolean; threads?: unknown[] | null } = {}) {
+  const fixture = TestBed.createComponent(ChatSidenavComponent);
+  fixture.componentRef.setInput('agent', fakeAgent());
+  if (opts.mode) fixture.componentRef.setInput('mode', opts.mode);
+  if (opts.open !== undefined) fixture.componentRef.setInput('open', opts.open);
+  if (opts.threads !== undefined) fixture.componentRef.setInput('threads', opts.threads);
+  fixture.detectChanges();
+  return fixture;
+}
+
+describe('ChatSidenavComponent', () => {
+  it('reflects mode via data-mode attribute', () => {
+    expect(render({ mode: 'expanded' }).nativeElement.getAttribute('data-mode')).toBe('expanded');
+    expect(render({ mode: 'collapsed' }).nativeElement.getAttribute('data-mode')).toBe('collapsed');
+    expect(render({ mode: 'drawer' }).nativeElement.getAttribute('data-mode')).toBe('drawer');
+  });
+
+  it('emits newChat when new-chat button clicked', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.newChat.subscribe(() => emits++);
+    const btn = fixture.nativeElement.querySelector('.chat-sidenav__action--new') as HTMLButtonElement;
+    btn.click();
+    expect(emits).toBe(1);
+  });
+
+  it('emits searchOpened when search button clicked', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.searchOpened.subscribe(() => emits++);
+    const btn = fixture.nativeElement.querySelector('.chat-sidenav__action--search') as HTMLButtonElement;
+    btn.click();
+    expect(emits).toBe(1);
+  });
+
+  it('emits searchOpened on Cmd+K', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.searchOpened.subscribe(() => emits++);
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+    expect(emits).toBe(1);
+  });
+
+  it('emits searchOpened on Ctrl+K', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.searchOpened.subscribe(() => emits++);
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }));
+    expect(emits).toBe(1);
+  });
+
+  it('does not emit searchOpened on Cmd+K when focus is in an input', () => {
+    const fixture = render();
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    input.focus();
+    let emits = 0;
+    fixture.componentInstance.searchOpened.subscribe(() => emits++);
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, bubbles: true }));
+    expect(emits).toBe(0);
+    document.body.removeChild(input);
+  });
+
+  it('renders threads section when threads input is non-null', () => {
+    const fixture = render({ threads: [{ id: 't1', title: 'First' }] });
+    expect(fixture.nativeElement.querySelector('chat-thread-list')).not.toBeNull();
+  });
+
+  it('suppresses threads section when threads input is null', () => {
+    const fixture = render({ threads: null });
+    expect(fixture.nativeElement.querySelector('chat-thread-list')).toBeNull();
+  });
+
+  it('drawer mode: scrim click emits openChange(false)', () => {
+    const fixture = render({ mode: 'drawer', open: true });
+    let lastOpen: boolean | undefined;
+    fixture.componentInstance.openChange.subscribe((v: boolean) => { lastOpen = v; });
+    const scrim = fixture.nativeElement.querySelector('.chat-sidenav__scrim') as HTMLButtonElement;
+    scrim.click();
+    expect(lastOpen).toBe(false);
+  });
+
+  it('drawer mode: scrim NOT rendered when open is false', () => {
+    const fixture = render({ mode: 'drawer', open: false });
+    expect(fixture.nativeElement.querySelector('.chat-sidenav__scrim')).toBeNull();
+  });
+});
diff --git a/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts b/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts
new file mode 100644
index 000000000..199d1ced3
--- /dev/null
+++ b/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts
@@ -0,0 +1,137 @@
+// libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts
+// SPDX-License-Identifier: MIT
+import {
+  Component,
+  ChangeDetectionStrategy,
+  DestroyRef,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent } from 'rxjs';
+import type { Agent } from '../../agent';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_SIDENAV_STYLES } from '../../styles/chat-sidenav.styles';
+import { ChatThreadListComponent, type Thread } from '../../primitives/chat-thread-list/chat-thread-list.component';
+
+export type ChatSidenavMode = 'expanded' | 'collapsed' | 'drawer';
+
+@Component({
+  selector: 'chat-sidenav',
+  standalone: true,
+  imports: [ChatThreadListComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.data-mode]': 'mode()',
+    '[attr.data-open]': 'open() ? "true" : "false"',
+  },
+  styles: [CHAT_HOST_TOKENS, CHAT_SIDENAV_STYLES],
+  template: `
+    @if (mode() === 'drawer' && open()) {
+      <button
+        type="button"
+        class="chat-sidenav__scrim"
+        aria-label="Close conversations"
+        (click)="openChange.emit(false)"
+      ></button>
+    }
+    <aside
+      class="chat-sidenav"
+      role="navigation"
+      aria-label="Sidebar navigation"
+      (keydown.escape)="onEscape()"
+    >
+      <div class="chat-sidenav__header">
+        <ng-content select="[sidenavHeader]" />
+      </div>
+
+      <div class="chat-sidenav__actions">
+        <button
+          type="button"
+          class="chat-sidenav__action chat-sidenav__action--new"
+          (click)="newChat.emit()"
+          aria-label="New chat"
+          title="New chat"
+        >
+          <svg class="chat-sidenav__action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="12" y1="5" x2="12" y2="19"/>
+            <line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+          <span class="chat-sidenav__action-label">New chat</span>
+        </button>
+        <button
+          type="button"
+          class="chat-sidenav__action chat-sidenav__action--search"
+          (click)="searchOpened.emit()"
+          aria-label="Search conversations"
+          title="Search conversations (⌘K)"
+        >
+          <svg class="chat-sidenav__action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="7"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <span class="chat-sidenav__action-label">Search</span>
+        </button>
+      </div>
+
+      <div class="chat-sidenav__primary">
+        <ng-content select="[sidenavPrimary]" />
+      </div>
+
+      @if (threads() !== null) {
+        <div class="chat-sidenav__threads">
+          <div class="chat-sidenav__threads-heading">Recent</div>
+          <chat-thread-list
+            [threads]="threads()!"
+            [activeThreadId]="activeThreadId() ?? ''"
+            (threadSelected)="threadSelected.emit($event)"
+          />
+        </div>
+      }
+
+      <div class="chat-sidenav__sections">
+        <ng-content select="[sidenavSections]" />
+      </div>
+
+      <div class="chat-sidenav__account">
+        <ng-content select="[sidenavAccount]" />
+      </div>
+    </aside>
+  `,
+})
+export class ChatSidenavComponent {
+  readonly agent = input.required<Agent>();
+  readonly mode = input<ChatSidenavMode>('expanded');
+  readonly open = input<boolean>(false);
+  readonly threads = input<Thread[] | null>(null);
+  readonly activeThreadId = input<string | null>(null);
+
+  readonly newChat = output<void>();
+  readonly threadSelected = output<string>();
+  readonly searchOpened = output<void>();
+  readonly openChange = output<boolean>();
+
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor() {
+    fromEvent<KeyboardEvent>(window, 'keydown')
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((e) => {
+        if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k')) return;
+        const t = e.target as HTMLElement | null;
+        if (t) {
+          const tag = t.tagName;
+          if (tag === 'INPUT' || tag === 'TEXTAREA' || t.isContentEditable) return;
+        }
+        e.preventDefault();
+        this.searchOpened.emit();
+      });
+  }
+
+  protected onEscape(): void {
+    if (this.mode() === 'drawer' && this.open()) {
+      this.openChange.emit(false);
+    }
+  }
+}

From 44107025c8af7aaa5bd80c7054e1ad012968c043 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:34:32 -0700
Subject: [PATCH 06/12] fix(chat): drop unused agent input from chat-sidenav

---
 .../chat-sidenav/chat-sidenav.component.spec.ts     | 13 -------------
 .../chat-sidenav/chat-sidenav.component.ts          |  2 --
 2 files changed, 15 deletions(-)

diff --git a/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts b/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts
index b5ee1d023..b446f1af5 100644
--- a/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts
+++ b/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts
@@ -2,23 +2,10 @@
 // SPDX-License-Identifier: MIT
 import { TestBed } from '@angular/core/testing';
 import { describe, expect, it } from 'vitest';
-import type { Agent } from '../../agent';
 import { ChatSidenavComponent } from './chat-sidenav.component';
 
-function fakeAgent(): Agent {
-  return {
-    messages: () => [],
-    isLoading: () => false,
-    status: () => 'idle',
-    submit: async () => undefined,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    events$: { subscribe: () => ({ unsubscribe: () => {} }) },
-  } as unknown as Agent;
-}
-
 function render(opts: { mode?: 'expanded' | 'collapsed' | 'drawer'; open?: boolean; threads?: unknown[] | null } = {}) {
   const fixture = TestBed.createComponent(ChatSidenavComponent);
-  fixture.componentRef.setInput('agent', fakeAgent());
   if (opts.mode) fixture.componentRef.setInput('mode', opts.mode);
   if (opts.open !== undefined) fixture.componentRef.setInput('open', opts.open);
   if (opts.threads !== undefined) fixture.componentRef.setInput('threads', opts.threads);
diff --git a/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts b/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts
index 199d1ced3..860d78c62 100644
--- a/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts
+++ b/libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.ts
@@ -10,7 +10,6 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent } from 'rxjs';
-import type { Agent } from '../../agent';
 import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
 import { CHAT_SIDENAV_STYLES } from '../../styles/chat-sidenav.styles';
 import { ChatThreadListComponent, type Thread } from '../../primitives/chat-thread-list/chat-thread-list.component';
@@ -101,7 +100,6 @@ export type ChatSidenavMode = 'expanded' | 'collapsed' | 'drawer';
   `,
 })
 export class ChatSidenavComponent {
-  readonly agent = input.required<Agent>();
   readonly mode = input<ChatSidenavMode>('expanded');
   readonly open = input<boolean>(false);
   readonly threads = input<Thread[] | null>(null);

From 82ffb724b44cbdf59406706a563237d4ac9a5a88 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:35:56 -0700
Subject: [PATCH 07/12] feat(chat)!: remove chat-thread-drawer; replaced by
 chat-sidenav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../chat-thread-drawer.component.spec.ts      | 82 -------------------
 .../chat-thread-drawer.component.ts           | 73 -----------------
 libs/chat/src/public-api.ts                   |  4 +-
 3 files changed, 2 insertions(+), 157 deletions(-)
 delete mode 100644 libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.spec.ts
 delete mode 100644 libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.ts

diff --git a/libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.spec.ts b/libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.spec.ts
deleted file mode 100644
index 642b9fd9c..000000000
--- a/libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.spec.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-// libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.spec.ts
-// SPDX-License-Identifier: MIT
-import { describe, it, expect, beforeEach } from 'vitest';
-import { TestBed } from '@angular/core/testing';
-import { Component } from '@angular/core';
-import { ChatThreadDrawerComponent } from './chat-thread-drawer.component';
-
-@Component({
-  standalone: true,
-  imports: [ChatThreadDrawerComponent],
-  template: `<chat-thread-drawer
-    [open]="open"
-    [mode]="mode"
-    (openChange)="onOpenChange($event)">
-    <div data-testid="drawer-body">child content</div>
-  </chat-thread-drawer>`,
-})
-class HostComponent {
-  open = false;
-  mode: 'push' | 'overlay' = 'push';
-  changes: boolean[] = [];
-  onOpenChange(v: boolean): void { this.changes.push(v); }
-}
-
-describe('ChatThreadDrawerComponent', () => {
-  beforeEach(() => TestBed.configureTestingModule({ imports: [HostComponent] }));
-
-  it('hides the drawer when open=false (translated off-screen)', () => {
-    const fx = TestBed.createComponent(HostComponent);
-    fx.detectChanges();
-    const drawer = fx.nativeElement.querySelector('.chat-thread-drawer') as HTMLElement;
-    expect(drawer.getAttribute('data-open')).toBe('false');
-  });
-
-  it('shows the drawer when open=true', () => {
-    const fx = TestBed.createComponent(HostComponent);
-    fx.componentInstance.open = true;
-    fx.detectChanges();
-    expect(fx.nativeElement.querySelector('.chat-thread-drawer').getAttribute('data-open')).toBe('true');
-  });
-
-  it('renders no scrim in push mode', () => {
-    const fx = TestBed.createComponent(HostComponent);
-    fx.componentInstance.open = true;
-    fx.componentInstance.mode = 'push';
-    fx.detectChanges();
-    expect(fx.nativeElement.querySelector('.chat-thread-drawer__scrim')).toBeNull();
-  });
-
-  it('renders a scrim in overlay mode when open', () => {
-    const fx = TestBed.createComponent(HostComponent);
-    fx.componentInstance.open = true;
-    fx.componentInstance.mode = 'overlay';
-    fx.detectChanges();
-    expect(fx.nativeElement.querySelector('.chat-thread-drawer__scrim')).toBeTruthy();
-  });
-
-  it('scrim click emits openChange(false)', () => {
-    const fx = TestBed.createComponent(HostComponent);
-    fx.componentInstance.open = true;
-    fx.componentInstance.mode = 'overlay';
-    fx.detectChanges();
-    (fx.nativeElement.querySelector('.chat-thread-drawer__scrim') as HTMLElement).click();
-    expect(fx.componentInstance.changes).toEqual([false]);
-  });
-
-  it('Escape keydown on drawer host emits openChange(false)', () => {
-    const fx = TestBed.createComponent(HostComponent);
-    fx.componentInstance.open = true;
-    fx.detectChanges();
-    const drawer = fx.nativeElement.querySelector('.chat-thread-drawer') as HTMLElement;
-    drawer.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-    expect(fx.componentInstance.changes).toEqual([false]);
-  });
-
-  it('projects child content into the drawer body', () => {
-    const fx = TestBed.createComponent(HostComponent);
-    fx.componentInstance.open = true;
-    fx.detectChanges();
-    expect(fx.nativeElement.querySelector('[data-testid="drawer-body"]')).toBeTruthy();
-  });
-});
diff --git a/libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.ts b/libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.ts
deleted file mode 100644
index 4667196f0..000000000
--- a/libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-// libs/chat/src/lib/compositions/chat-thread-drawer/chat-thread-drawer.component.ts
-// SPDX-License-Identifier: MIT
-import {
-  Component, ChangeDetectionStrategy, input, output,
-} from '@angular/core';
-import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
-
-export type ChatThreadDrawerMode = 'push' | 'overlay';
-
-@Component({
-  selector: 'chat-thread-drawer',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [CHAT_HOST_TOKENS, `
-    :host {
-      --chat-thread-drawer-width: 280px;
-      display: contents;
-    }
-    .chat-thread-drawer__scrim {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.4);
-      z-index: 1000;
-      border: 0;
-      padding: 0;
-      cursor: pointer;
-    }
-    .chat-thread-drawer {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      width: var(--chat-thread-drawer-width);
-      background: var(--ngaf-chat-bg);
-      border-right: 1px solid var(--ngaf-chat-separator);
-      z-index: 1001;
-      transition: left 200ms ease;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-    }
-    @media (max-width: 767px) {
-      .chat-thread-drawer { width: 100%; }
-    }
-  `],
-  template: `
-    @if (open() && mode() === 'overlay') {
-      <button
-        type="button"
-        class="chat-thread-drawer__scrim"
-        aria-label="Close conversations"
-        (click)="openChange.emit(false)"
-      ></button>
-    }
-    <aside
-      class="chat-thread-drawer"
-      role="dialog"
-      aria-label="Conversations"
-      tabindex="-1"
-      [attr.data-open]="open() ? 'true' : 'false'"
-      [attr.data-mode]="mode()"
-      [style.left.px]="open() ? 0 : -320"
-      (keydown.escape)="openChange.emit(false)"
-    >
-      <ng-content />
-    </aside>
-  `,
-})
-export class ChatThreadDrawerComponent {
-  readonly open = input.required<boolean>();
-  readonly mode = input<ChatThreadDrawerMode>('push');
-
-  readonly openChange = output<boolean>();
-}
diff --git a/libs/chat/src/public-api.ts b/libs/chat/src/public-api.ts
index 200cd3c8c..191b3b144 100644
--- a/libs/chat/src/public-api.ts
+++ b/libs/chat/src/public-api.ts
@@ -88,8 +88,8 @@ export type { SelectOption } from './lib/compositions/chat-debug/primitives/chat
 export { ChatDebugToggleComponent } from './lib/compositions/chat-debug/primitives/chat-debug-toggle.component';
 export { ChatDebugActionComponent } from './lib/compositions/chat-debug/primitives/chat-debug-action.component';
 export { ChatTimelineSliderComponent } from './lib/compositions/chat-timeline-slider/chat-timeline-slider.component';
-export { ChatThreadDrawerComponent } from './lib/compositions/chat-thread-drawer/chat-thread-drawer.component';
-export type { ChatThreadDrawerMode } from './lib/compositions/chat-thread-drawer/chat-thread-drawer.component';
+export { ChatSidenavComponent } from './lib/compositions/chat-sidenav/chat-sidenav.component';
+export type { ChatSidenavMode } from './lib/compositions/chat-sidenav/chat-sidenav.component';
 export { ChatInterruptPanelComponent } from './lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component';
 export type { InterruptAction } from './lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component';
 export { ChatToolCallCardComponent } from './lib/compositions/chat-tool-call-card/chat-tool-call-card.component';

From bf6da87c617dc91aa265c7163faa224a3c692527 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:37:10 -0700
Subject: [PATCH 08/12] refactor(examples-chat): migrate from
 chat-thread-drawer to chat-sidenav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/app/shell/demo-shell.component.html   | 26 ++++++++-----------
 .../src/app/shell/demo-shell.component.ts     | 19 +++++++-------
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.html b/examples/chat/angular/src/app/shell/demo-shell.component.html
index d486f065b..a76723086 100644
--- a/examples/chat/angular/src/app/shell/demo-shell.component.html
+++ b/examples/chat/angular/src/app/shell/demo-shell.component.html
@@ -4,26 +4,22 @@
     class="demo-shell__hamburger"
     aria-label="Open conversations"
     [attr.aria-expanded]="drawerOpen()"
-    (click)="toggleDrawer()"
+    (click)="toggleSidenav()"
   >☰</button>
 
-  <chat-thread-drawer
-    [open]="drawerOpen()"
-    [mode]="drawerMode()"
-    (openChange)="onDrawerOpenChange($event)"
-  >
-    <chat-thread-list
-      [threads]="threadsSvc.threads()"
-      [activeThreadId]="threadIdSignal() ?? ''"
-      [showNewThreadButton]="true"
-      (threadSelected)="onThreadSelected($event)"
-      (newThreadRequested)="onNewThread()"
-    />
-  </chat-thread-drawer>
+  <chat-sidenav
+    [threads]="threadsSvc.threads()"
+    [activeThreadId]="threadIdSignal() ?? ''"
+    [mode]="sidenavMode()"
+    [(open)]="drawerOpen"
+    (newChat)="onNewThread()"
+    (threadSelected)="onThreadSelected($event)"
+    (openChange)="onSidenavOpenChange($event)"
+  />
 
   <div
     class="demo-shell__main"
-    [class.demo-shell__main--push]="drawerOpen() && drawerMode() === 'push'"
+    [class.demo-shell__main--push]="drawerOpen() && sidenavMode() === 'expanded'"
   >
     <router-outlet />
     @if (agent.interrupt && agent.interrupt()) {
diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.ts b/examples/chat/angular/src/app/shell/demo-shell.component.ts
index 315f857e9..ac2fa1b36 100644
--- a/examples/chat/angular/src/app/shell/demo-shell.component.ts
+++ b/examples/chat/angular/src/app/shell/demo-shell.component.ts
@@ -22,8 +22,8 @@ import {
   ChatDebugActionComponent,
   ChatInterruptPanelComponent,
   ChatSubagentsComponent,
-  ChatThreadDrawerComponent,
-  ChatThreadListComponent,
+  ChatSidenavComponent,
+  type ChatSidenavMode,
   type InterruptAction,
 } from '@ngaf/chat';
 import { PalettePersistence } from './palette-persistence.service';
@@ -52,8 +52,7 @@ function modeFromUrl(url: string): DemoMode {
     ChatDebugActionComponent,
     ChatInterruptPanelComponent,
     ChatSubagentsComponent,
-    ChatThreadDrawerComponent,
-    ChatThreadListComponent,
+    ChatSidenavComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './demo-shell.component.html',
@@ -145,9 +144,9 @@ export class DemoShell {
     typeof window !== 'undefined' ? window.innerWidth : 1440,
   );
 
-  /** Computed drawer mode based on viewport width. */
-  protected readonly drawerMode = computed<'push' | 'overlay'>(() =>
-    this.viewportWidth() >= 1024 ? 'push' : 'overlay',
+  /** Computed sidenav mode based on viewport width. */
+  protected readonly sidenavMode = computed<ChatSidenavMode>(() =>
+    this.viewportWidth() >= 1024 ? 'expanded' : 'drawer',
   );
 
   protected readonly modeOptions = [
@@ -247,13 +246,13 @@ export class DemoShell {
     this.persistence.write('theme', next);
   }
 
-  protected onDrawerOpenChange(next: boolean): void {
+  protected onSidenavOpenChange(next: boolean): void {
     this.drawerOpen.set(next);
     this.persistence.write('drawerOpen', next);
   }
 
-  protected toggleDrawer(): void {
-    this.onDrawerOpenChange(!this.drawerOpen());
+  protected toggleSidenav(): void {
+    this.onSidenavOpenChange(!this.drawerOpen());
   }
 
   onTimelineReplay(checkpointId: string): void {

From 16e5b702dbd22f29a1620dc06ddda118d0533b5d Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:38:12 -0700
Subject: [PATCH 09/12] feat(chat): chat-history-search-palette styles

---
 .../chat-history-search-palette.styles.ts     | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 libs/chat/src/lib/styles/chat-history-search-palette.styles.ts

diff --git a/libs/chat/src/lib/styles/chat-history-search-palette.styles.ts b/libs/chat/src/lib/styles/chat-history-search-palette.styles.ts
new file mode 100644
index 000000000..366909f54
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-history-search-palette.styles.ts
@@ -0,0 +1,107 @@
+// libs/chat/src/lib/styles/chat-history-search-palette.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_HISTORY_SEARCH_PALETTE_STYLES = `
+  :host { display: contents; }
+  .chat-history-search-palette__scrim {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 50;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+  .chat-history-search-palette {
+    position: fixed;
+    top: 15vh;
+    left: 50%;
+    transform: translateX(-50%);
+    width: min(560px, 90vw);
+    max-height: 70vh;
+    background: var(--ngaf-chat-bg);
+    border: 1px solid var(--ngaf-chat-separator);
+    border-radius: 12px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
+    z-index: 51;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .chat-history-search-palette__input-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--ngaf-chat-separator);
+  }
+  .chat-history-search-palette__icon {
+    width: 18px;
+    height: 18px;
+    color: var(--ngaf-chat-text-muted);
+    flex-shrink: 0;
+  }
+  .chat-history-search-palette__input {
+    flex: 1 1 auto;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: var(--ngaf-chat-text);
+    font: inherit;
+    font-size: 1rem;
+  }
+  .chat-history-search-palette__input::placeholder {
+    color: var(--ngaf-chat-text-muted);
+  }
+  .chat-history-search-palette__close {
+    background: transparent;
+    border: 0;
+    padding: 4px;
+    color: var(--ngaf-chat-text-muted);
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  .chat-history-search-palette__close:hover { color: var(--ngaf-chat-text); }
+  .chat-history-search-palette__list {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 4px;
+    margin: 0;
+    list-style: none;
+  }
+  .chat-history-search-palette__row {
+    display: flex;
+    flex-direction: column;
+    padding: 10px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  .chat-history-search-palette__row[aria-selected="true"] {
+    background: var(--ngaf-chat-surface-alt);
+  }
+  .chat-history-search-palette__row-title {
+    color: var(--ngaf-chat-text);
+    font-size: var(--ngaf-chat-font-size);
+  }
+  .chat-history-search-palette__row-subtitle {
+    color: var(--ngaf-chat-text-muted);
+    font-size: var(--ngaf-chat-font-size-sm);
+    margin-top: 2px;
+  }
+  .chat-history-search-palette__empty,
+  .chat-history-search-palette__hint {
+    padding: 24px 16px;
+    color: var(--ngaf-chat-text-muted);
+    text-align: center;
+    font-size: var(--ngaf-chat-font-size-sm);
+  }
+  .chat-history-search-palette__skeleton {
+    padding: 8px 4px;
+  }
+  .chat-history-search-palette__skeleton-row {
+    height: 36px;
+    margin: 4px 0;
+    background: var(--ngaf-chat-surface-alt);
+    border-radius: 8px;
+    animation: ngaf-chat-pulse 1.4s ease-in-out infinite;
+  }
+`;

From 5cf7c3aa95ea93dd876fd41e25e6bd2fa3b9d7eb Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:43:00 -0700
Subject: [PATCH 10/12] feat(chat): chat-history-search-palette primitive
 (Cmd+K modal)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ...t-history-search-palette.component.spec.ts | 155 +++++++++++++++
 .../chat-history-search-palette.component.ts  | 186 ++++++++++++++++++
 libs/chat/src/public-api.ts                   |   2 +
 3 files changed, 343 insertions(+)
 create mode 100644 libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.spec.ts
 create mode 100644 libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts

diff --git a/libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.spec.ts b/libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.spec.ts
new file mode 100644
index 000000000..57f8c638d
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.spec.ts
@@ -0,0 +1,155 @@
+// libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.spec.ts
+// SPDX-License-Identifier: MIT
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it } from 'vitest';
+import { ChatHistorySearchPaletteComponent, type ThreadMatch } from './chat-history-search-palette.component';
+
+function render(opts: { open?: boolean; query?: string; results?: ThreadMatch[]; loading?: boolean } = {}) {
+  const fixture = TestBed.createComponent(ChatHistorySearchPaletteComponent);
+  fixture.componentRef.setInput('open', opts.open ?? true);
+  if (opts.query !== undefined) fixture.componentRef.setInput('query', opts.query);
+  if (opts.results !== undefined) fixture.componentRef.setInput('results', opts.results);
+  if (opts.loading !== undefined) fixture.componentRef.setInput('loading', opts.loading);
+  fixture.detectChanges();
+  return fixture;
+}
+
+describe('ChatHistorySearchPaletteComponent', () => {
+  it('renders nothing when open is false', () => {
+    const fixture = render({ open: false });
+    expect(fixture.nativeElement.querySelector('.chat-history-search-palette')).toBeNull();
+  });
+
+  it('renders hint when query is empty and not loading', () => {
+    const fixture = render({ query: '', loading: false });
+    expect(fixture.nativeElement.querySelector('.chat-history-search-palette__hint')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('.chat-history-search-palette__empty')).toBeNull();
+  });
+
+  it('renders empty state when query is non-empty and results empty', () => {
+    const fixture = render({ query: 'xyz', results: [], loading: false });
+    expect(fixture.nativeElement.querySelector('.chat-history-search-palette__empty')).not.toBeNull();
+  });
+
+  it('renders skeleton when loading and results empty', () => {
+    const fixture = render({ loading: true, results: [] });
+    expect(fixture.nativeElement.querySelector('.chat-history-search-palette__skeleton')).not.toBeNull();
+  });
+
+  it('renders result rows when results provided', () => {
+    const fixture = render({
+      query: 'foo',
+      results: [
+        { id: '1', title: 'First' },
+        { id: '2', title: 'Second', subtitle: 'sub' },
+      ],
+    });
+    const rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    expect(rows.length).toBe(2);
+    expect(rows[1].textContent).toContain('Second');
+    expect(rows[1].textContent).toContain('sub');
+  });
+
+  it('marks active row with aria-selected', () => {
+    const fixture = render({
+      query: 'foo',
+      results: [{ id: '1', title: 'First' }, { id: '2', title: 'Second' }],
+    });
+    const rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    expect(rows[0].getAttribute('aria-selected')).toBe('true');
+    expect(rows[1].getAttribute('aria-selected')).toBe('false');
+  });
+
+  it('ArrowDown advances active index, clamps at end', () => {
+    const fixture = render({
+      query: 'foo',
+      results: [{ id: '1', title: 'A' }, { id: '2', title: 'B' }],
+    });
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    let rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    expect(rows[1].getAttribute('aria-selected')).toBe('true');
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    expect(rows[1].getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('ArrowUp moves active index back, clamps at 0', () => {
+    const fixture = render({
+      query: 'foo',
+      results: [{ id: '1', title: 'A' }, { id: '2', title: 'B' }],
+    });
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+    fixture.detectChanges();
+    const rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    expect(rows[0].getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('Enter emits threadSelected with active row id', () => {
+    const fixture = render({
+      query: 'foo',
+      results: [{ id: 'a', title: 'A' }, { id: 'b', title: 'B' }],
+    });
+    let received: string | undefined;
+    fixture.componentInstance.threadSelected.subscribe((id: string) => { received = id; });
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    expect(received).toBe('b');
+  });
+
+  it('Enter with no results is a no-op', () => {
+    const fixture = render({ query: 'x', results: [] });
+    let emits = 0;
+    fixture.componentInstance.threadSelected.subscribe(() => emits++);
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    expect(emits).toBe(0);
+  });
+
+  it('Esc emits close', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.close.subscribe(() => emits++);
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    expect(emits).toBe(1);
+  });
+
+  it('Scrim click emits close', () => {
+    const fixture = render();
+    let emits = 0;
+    fixture.componentInstance.close.subscribe(() => emits++);
+    const scrim = fixture.nativeElement.querySelector('.chat-history-search-palette__scrim') as HTMLButtonElement;
+    scrim.click();
+    expect(emits).toBe(1);
+  });
+
+  it('Row click emits threadSelected', () => {
+    const fixture = render({
+      query: 'x',
+      results: [{ id: 'r1', title: 'R1' }, { id: 'r2', title: 'R2' }],
+    });
+    let received: string | undefined;
+    fixture.componentInstance.threadSelected.subscribe((id: string) => { received = id; });
+    const rows = fixture.nativeElement.querySelectorAll('.chat-history-search-palette__row');
+    (rows[1] as HTMLElement).click();
+    expect(received).toBe('r2');
+  });
+
+  it('input has correct ARIA attributes', () => {
+    const fixture = render({
+      query: 'x',
+      results: [{ id: '1', title: 'A' }],
+    });
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    expect(input.getAttribute('role')).toBe('combobox');
+    expect(input.getAttribute('aria-expanded')).toBe('true');
+    expect(input.getAttribute('aria-controls')).toBeTruthy();
+    expect(input.getAttribute('aria-activedescendant')).toBeTruthy();
+  });
+});
diff --git a/libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts b/libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts
new file mode 100644
index 000000000..32de1fa16
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts
@@ -0,0 +1,186 @@
+// libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts
+// SPDX-License-Identifier: MIT
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  effect,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_HISTORY_SEARCH_PALETTE_STYLES } from '../../styles/chat-history-search-palette.styles';
+
+export interface ThreadMatch {
+  id: string;
+  title: string;
+  /** Optional secondary line, rendered muted under the title. */
+  subtitle?: string;
+}
+
+let paletteInstanceCounter = 0;
+
+@Component({
+  selector: 'chat-history-search-palette',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_HISTORY_SEARCH_PALETTE_STYLES],
+  template: `
+    @if (open()) {
+      <button
+        type="button"
+        class="chat-history-search-palette__scrim"
+        aria-label="Close search"
+        (click)="close.emit()"
+      ></button>
+      <div
+        class="chat-history-search-palette"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Search conversations"
+      >
+        <div class="chat-history-search-palette__input-row">
+          <svg class="chat-history-search-palette__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="7"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <input
+            #inputEl
+            class="chat-history-search-palette__input"
+            type="text"
+            role="combobox"
+            aria-expanded="true"
+            [attr.aria-controls]="listId"
+            [attr.aria-activedescendant]="activeRowId()"
+            [placeholder]="placeholder()"
+            [value]="query()"
+            (input)="onInput($event)"
+            (keydown)="onInputKeydown($event)"
+          />
+          <button
+            type="button"
+            class="chat-history-search-palette__close"
+            aria-label="Close"
+            (click)="close.emit()"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        @if (loading() && results().length === 0) {
+          <div class="chat-history-search-palette__skeleton" aria-hidden="true">
+            <div class="chat-history-search-palette__skeleton-row"></div>
+            <div class="chat-history-search-palette__skeleton-row"></div>
+            <div class="chat-history-search-palette__skeleton-row"></div>
+          </div>
+        } @else if (results().length === 0 && query().length === 0) {
+          <div class="chat-history-search-palette__hint">Type to search your conversations.</div>
+        } @else if (results().length === 0) {
+          <div class="chat-history-search-palette__empty">No conversations match.</div>
+        } @else {
+          <ul class="chat-history-search-palette__list" role="listbox" [id]="listId">
+            @for (row of results(); let i = $index; track row.id) {
+              <li
+                class="chat-history-search-palette__row"
+                role="option"
+                tabindex="-1"
+                [id]="rowId(i)"
+                [attr.aria-selected]="i === activeIndex() ? 'true' : 'false'"
+                (click)="onRowClick(row.id)"
+                (keydown.enter)="onRowClick(row.id)"
+                (keydown.space)="onRowClick(row.id)"
+              >
+                <span class="chat-history-search-palette__row-title">{{ row.title }}</span>
+                @if (row.subtitle) {
+                  <span class="chat-history-search-palette__row-subtitle">{{ row.subtitle }}</span>
+                }
+              </li>
+            }
+          </ul>
+        }
+      </div>
+    }
+  `,
+})
+export class ChatHistorySearchPaletteComponent {
+  readonly open = model<boolean>(false);
+  readonly query = model<string>('');
+  readonly results = input<ThreadMatch[]>([]);
+  readonly loading = input<boolean>(false);
+  readonly placeholder = input<string>('Search conversations');
+
+  readonly threadSelected = output<string>();
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  readonly close = output<void>();
+
+  protected readonly activeIndex = signal<number>(0);
+  protected readonly listId = `chat-history-search-palette__results-${++paletteInstanceCounter}`;
+
+  private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');
+
+  constructor() {
+    effect(() => {
+      if (this.open()) {
+        this.activeIndex.set(0);
+        queueMicrotask(() => this.inputEl()?.nativeElement.focus());
+      }
+    });
+    effect(() => {
+      const max = this.results().length - 1;
+      if (max >= 0 && this.activeIndex() > max) {
+        this.activeIndex.set(max);
+      }
+    });
+  }
+
+  protected rowId(index: number): string {
+    return `${this.listId}__row-${index}`;
+  }
+
+  protected activeRowId(): string | null {
+    return this.results().length > 0 ? this.rowId(this.activeIndex()) : null;
+  }
+
+  protected onInput(e: Event): void {
+    const value = (e.target as HTMLInputElement).value;
+    this.query.set(value);
+  }
+
+  protected onInputKeydown(e: KeyboardEvent): void {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this.close.emit();
+      return;
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const max = this.results().length - 1;
+      if (max < 0) return;
+      this.activeIndex.set(Math.min(this.activeIndex() + 1, max));
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      this.activeIndex.set(Math.max(this.activeIndex() - 1, 0));
+      return;
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const rows = this.results();
+      if (rows.length === 0) return;
+      const row = rows[this.activeIndex()];
+      this.threadSelected.emit(row.id);
+      return;
+    }
+  }
+
+  protected onRowClick(id: string): void {
+    this.threadSelected.emit(id);
+  }
+}
diff --git a/libs/chat/src/public-api.ts b/libs/chat/src/public-api.ts
index 191b3b144..672544411 100644
--- a/libs/chat/src/public-api.ts
+++ b/libs/chat/src/public-api.ts
@@ -46,6 +46,8 @@ export { ChatLauncherButtonComponent } from './lib/primitives/chat-launcher-butt
 export { ChatSuggestionsComponent } from './lib/primitives/chat-suggestions/chat-suggestions.component';
 export { ChatInputComponent, submitMessage } from './lib/primitives/chat-input/chat-input.component';
 export { ChatTypingIndicatorComponent, isTyping } from './lib/primitives/chat-typing-indicator/chat-typing-indicator.component';
+export { ChatHistorySearchPaletteComponent } from './lib/primitives/chat-history-search-palette/chat-history-search-palette.component';
+export type { ThreadMatch } from './lib/primitives/chat-history-search-palette/chat-history-search-palette.component';
 export { ChatScrollBubbleComponent } from './lib/primitives/chat-scroll-bubble/chat-scroll-bubble.component';
 export type { ChatScrollBubbleMode } from './lib/primitives/chat-scroll-bubble/chat-scroll-bubble.component';
 export { ChatErrorComponent, extractErrorMessage } from './lib/primitives/chat-error/chat-error.component';

From fc4b75c458cb030a48a7b0970d9d0a2db64c53a2 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:44:37 -0700
Subject: [PATCH 11/12] feat(examples-chat): wire Cmd+K palette with default
 client-side title filter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/app/shell/demo-shell.component.html   |  9 +++++
 .../src/app/shell/demo-shell.component.ts     | 38 +++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.html b/examples/chat/angular/src/app/shell/demo-shell.component.html
index a76723086..74a2c8a77 100644
--- a/examples/chat/angular/src/app/shell/demo-shell.component.html
+++ b/examples/chat/angular/src/app/shell/demo-shell.component.html
@@ -14,6 +14,7 @@
     [(open)]="drawerOpen"
     (newChat)="onNewThread()"
     (threadSelected)="onThreadSelected($event)"
+    (searchOpened)="paletteOpen.set(true)"
     (openChange)="onSidenavOpenChange($event)"
   />
 
@@ -34,6 +35,14 @@
     }
   </div>
 
+  <chat-history-search-palette
+    [(open)]="paletteOpen"
+    [(query)]="searchQuery"
+    [results]="searchResults()"
+    (threadSelected)="onSearchSelect($event)"
+    (close)="paletteOpen.set(false)"
+  />
+
   <chat-debug
     [agent]="agent"
     dock="right"
diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.ts b/examples/chat/angular/src/app/shell/demo-shell.component.ts
index ac2fa1b36..637a2c03f 100644
--- a/examples/chat/angular/src/app/shell/demo-shell.component.ts
+++ b/examples/chat/angular/src/app/shell/demo-shell.component.ts
@@ -23,8 +23,10 @@ import {
   ChatInterruptPanelComponent,
   ChatSubagentsComponent,
   ChatSidenavComponent,
+  ChatHistorySearchPaletteComponent,
   type ChatSidenavMode,
   type InterruptAction,
+  type ThreadMatch,
 } from '@ngaf/chat';
 import { PalettePersistence } from './palette-persistence.service';
 import { ThreadsService } from './threads.service';
@@ -53,6 +55,7 @@ function modeFromUrl(url: string): DemoMode {
     ChatInterruptPanelComponent,
     ChatSubagentsComponent,
     ChatSidenavComponent,
+    ChatHistorySearchPaletteComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './demo-shell.component.html',
@@ -101,6 +104,14 @@ export class DemoShell {
       window.addEventListener('resize', onResize);
       inject(DestroyRef).onDestroy(() => window.removeEventListener('resize', onResize));
     }
+
+    effect(() => {
+      const q = this.searchQuery();
+      if (this.searchDebounceTimer !== null) clearTimeout(this.searchDebounceTimer);
+      this.searchDebounceTimer = setTimeout(() => {
+        this.searchQueryDebounced.set(q);
+      }, 150);
+    });
   }
 
   protected readonly mode = toSignal(
@@ -139,6 +150,17 @@ export class DemoShell {
   /** Whether the threads drawer is open. Persisted across reloads. */
   protected readonly drawerOpen = signal<boolean>(this.persistence.read('drawerOpen') ?? false);
 
+  /** Whether the Cmd+K search palette is open. */
+  protected readonly paletteOpen = signal<boolean>(false);
+
+  /** Current palette query. Two-way bound. */
+  protected readonly searchQuery = signal<string>('');
+
+  /** Debounced query — applied 150ms after the last keystroke. */
+  private readonly searchQueryDebounced = signal<string>('');
+
+  private searchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+
   /** Viewport width, refreshed on window resize. Drives drawer push/overlay decision. */
   private readonly viewportWidth = signal<number>(
     typeof window !== 'undefined' ? window.innerWidth : 1440,
@@ -149,6 +171,16 @@ export class DemoShell {
     this.viewportWidth() >= 1024 ? 'expanded' : 'drawer',
   );
 
+  /** Client-side title filter over the loaded threads. */
+  protected readonly searchResults = computed<ThreadMatch[]>(() => {
+    const q = this.searchQueryDebounced().toLowerCase().trim();
+    if (!q) return [];
+    return this.threadsSvc.threads()
+      .filter((t) => (t.title ?? '').toLowerCase().includes(q))
+      .slice(0, 50)
+      .map((t) => ({ id: t.id, title: t.title ?? t.id }));
+  });
+
   protected readonly modeOptions = [
     { value: 'embed', label: 'Embed' },
     { value: 'popup', label: 'Popup' },
@@ -279,6 +311,12 @@ export class DemoShell {
     this.persistence.write('threadId', threadId);
   }
 
+  protected onSearchSelect(threadId: string): void {
+    this.onThreadSelected(threadId);
+    this.paletteOpen.set(false);
+    this.searchQuery.set('');
+  }
+
   /** Create a new thread via the backend and switch to it. */
   protected async onNewThread(): Promise<void> {
     const id = await this.threadsSvc.create();

From e655e599b3817ce9d8351d33e8f51a697f05a2d4 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 11 May 2026 16:45:15 -0700
Subject: [PATCH 12/12] docs(chat): regenerate chat API docs for sidenav +
 search palette

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../content/docs/chat/api/api-docs.json       | 246 +++++++++++++++---
 1 file changed, 216 insertions(+), 30 deletions(-)

diff --git a/apps/website/content/docs/chat/api/api-docs.json b/apps/website/content/docs/chat/api/api-docs.json
index 35a51f198..61a091194 100644
--- a/apps/website/content/docs/chat/api/api-docs.json
+++ b/apps/website/content/docs/chat/api/api-docs.json
@@ -2343,6 +2343,129 @@
     "properties": [],
     "methods": []
   },
+  {
+    "name": "ChatHistorySearchPaletteComponent",
+    "kind": "class",
+    "description": "",
+    "params": [],
+    "examples": [],
+    "properties": [
+      {
+        "name": "activeIndex",
+        "type": "WritableSignal<number>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "close",
+        "type": "OutputEmitterRef<void>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "listId",
+        "type": "string",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "loading",
+        "type": "InputSignal<boolean>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "open",
+        "type": "ModelSignal<boolean>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "placeholder",
+        "type": "InputSignal<string>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "query",
+        "type": "ModelSignal<string>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "results",
+        "type": "InputSignal<ThreadMatch[]>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "threadSelected",
+        "type": "OutputEmitterRef<string>",
+        "description": "",
+        "optional": false
+      }
+    ],
+    "methods": [
+      {
+        "name": "activeRowId",
+        "signature": "activeRowId()",
+        "description": "",
+        "params": []
+      },
+      {
+        "name": "onInput",
+        "signature": "onInput(e: Event)",
+        "description": "",
+        "params": [
+          {
+            "name": "e",
+            "type": "Event",
+            "description": "",
+            "optional": false
+          }
+        ]
+      },
+      {
+        "name": "onInputKeydown",
+        "signature": "onInputKeydown(e: KeyboardEvent)",
+        "description": "",
+        "params": [
+          {
+            "name": "e",
+            "type": "KeyboardEvent",
+            "description": "",
+            "optional": false
+          }
+        ]
+      },
+      {
+        "name": "onRowClick",
+        "signature": "onRowClick(id: string)",
+        "description": "",
+        "params": [
+          {
+            "name": "id",
+            "type": "string",
+            "description": "",
+            "optional": false
+          }
+        ]
+      },
+      {
+        "name": "rowId",
+        "signature": "rowId(index: number)",
+        "description": "",
+        "params": [
+          {
+            "name": "index",
+            "type": "number",
+            "description": "",
+            "optional": false
+          }
+        ]
+      }
+    ]
+  },
   {
     "name": "ChatInputComponent",
     "kind": "class",
@@ -3077,6 +3200,71 @@
       }
     ]
   },
+  {
+    "name": "ChatSidenavComponent",
+    "kind": "class",
+    "description": "",
+    "params": [],
+    "examples": [],
+    "properties": [
+      {
+        "name": "activeThreadId",
+        "type": "InputSignal<string | null>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "mode",
+        "type": "InputSignal<ChatSidenavMode>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "newChat",
+        "type": "OutputEmitterRef<void>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "open",
+        "type": "InputSignal<boolean>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "openChange",
+        "type": "OutputEmitterRef<boolean>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "searchOpened",
+        "type": "OutputEmitterRef<void>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "threads",
+        "type": "InputSignal<Thread[] | null>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "threadSelected",
+        "type": "OutputEmitterRef<string>",
+        "description": "",
+        "optional": false
+      }
+    ],
+    "methods": [
+      {
+        "name": "onEscape",
+        "signature": "onEscape()",
+        "description": "",
+        "params": []
+      }
+    ]
+  },
   {
     "name": "ChatStreamingMdComponent",
     "kind": "class",
@@ -3195,34 +3383,6 @@
     ],
     "methods": []
   },
-  {
-    "name": "ChatThreadDrawerComponent",
-    "kind": "class",
-    "description": "",
-    "params": [],
-    "examples": [],
-    "properties": [
-      {
-        "name": "mode",
-        "type": "InputSignal<ChatThreadDrawerMode>",
-        "description": "",
-        "optional": false
-      },
-      {
-        "name": "open",
-        "type": "InputSignal<boolean>",
-        "description": "",
-        "optional": false
-      },
-      {
-        "name": "openChange",
-        "type": "OutputEmitterRef<boolean>",
-        "description": "",
-        "optional": false
-      }
-    ],
-    "methods": []
-  },
   {
     "name": "ChatThreadListComponent",
     "kind": "class",
@@ -5349,6 +5509,32 @@
     ],
     "examples": []
   },
+  {
+    "name": "ThreadMatch",
+    "kind": "interface",
+    "description": "",
+    "properties": [
+      {
+        "name": "id",
+        "type": "string",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "subtitle",
+        "type": "string",
+        "description": "Optional secondary line, rendered muted under the title.",
+        "optional": true
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "description": "",
+        "optional": false
+      }
+    ],
+    "examples": []
+  },
   {
     "name": "ToolCall",
     "kind": "interface",
@@ -5474,10 +5660,10 @@
     "examples": []
   },
   {
-    "name": "ChatThreadDrawerMode",
+    "name": "ChatSidenavMode",
     "kind": "type",
     "description": "",
-    "signature": "\"push\" | \"overlay\"",
+    "signature": "\"expanded\" | \"collapsed\" | \"drawer\"",
     "examples": []
   },
   {