diff --git a/apps/website/content/docs/chat/api/api-docs.json b/apps/website/content/docs/chat/api/api-docs.json
index 1ea5dfd14..2ab3e7a01 100644
--- a/apps/website/content/docs/chat/api/api-docs.json
+++ b/apps/website/content/docs/chat/api/api-docs.json
@@ -3249,6 +3249,12 @@
         "description": "",
         "optional": false
       },
+      {
+        "name": "closeOnEscape",
+        "type": "InputSignal<boolean>",
+        "description": "Close the sidebar on Escape (default true).",
+        "optional": false
+      },
       {
         "name": "forkRequested",
         "type": "OutputEmitterRef<string>",
diff --git a/examples/chat/angular/e2e/README.md b/examples/chat/angular/e2e/README.md
index de15b6330..154d8c290 100644
--- a/examples/chat/angular/e2e/README.md
+++ b/examples/chat/angular/e2e/README.md
@@ -33,7 +33,32 @@ Re-records each committed fixture against real OpenAI and reports byte-level dif
 - `scripts/record.ts` — dev-only fixture-capture CLI.
 - `scripts/drift.ts` — CI fixture-drift comparison.
 - `playwright.config.ts` — Playwright config with globalSetup that boots aimock + LangGraph + Angular dev server.
-- `smoke.spec.ts` — Phase 2a smoke test (one scenario: "hi").
+- `initial-render.spec.ts` — checklist pre-flight browser hygiene and welcome-state render.
+- `send-receive.spec.ts` — basic deterministic send/receive and stream completion.
+- `stop-streaming.spec.ts` — skipped harness pilot for stop-button abort behavior.
+- `markdown-surfaces.spec.ts` — final-state markdown matrix.
+- `regenerate.spec.ts` — regenerate replacement and server-state invariants.
+- `mode-routing.spec.ts` — embed/popup/sidebar routing and cross-mode persistence.
+- `model-picker.spec.ts` — model picker persistence and backend state.
+- `debug-devtools.spec.ts` — chat-debug accessibility plus sidebar coexistence.
+- `control-palette.spec.ts` — palette default/collapsed state and route controls.
+- `color-scheme.spec.ts` — light/dark persistence and A2UI theme sync.
+- `keyboard-accessibility.spec.ts` — keyboard send/newline, Escape, and core button names.
+- `error-handling.spec.ts` — network-failure alert and recovery.
+- `lifecycle.spec.ts` — reload reconnect, new conversation, welcome suggestion submit.
+- `browser-hygiene.spec.ts` — pilot automation for repeated mode-switch hygiene.
+- `visual-polish.spec.ts` — responsive overflow checks at checklist widths.
+- `a2ui-single-bubble.spec.ts`, `interrupt-approval.spec.ts`, `research-subagent.spec.ts` — capability smoke coverage for GenUI, HITL, and subagents.
+
+## Checklist coverage
+
+The suite mirrors `examples/chat/smoke/CHECKLIST.md` by section. Items that
+need live-model semantics or visual judgment stay represented by deterministic
+proxies here and by the smoke checklist for manual release validation. The
+browser-hygiene coverage has graduated into CI-grade assertions using Chromium
+performance metrics and repeated route churn. The remaining skipped pilot is
+stop-streaming, which needs the harness to expose an in-flight stream state
+reliably enough for deterministic abort assertions.
 
 ## Env vars
 
diff --git a/examples/chat/angular/e2e/browser-hygiene.spec.ts b/examples/chat/angular/e2e/browser-hygiene.spec.ts
new file mode 100644
index 000000000..88186d076
--- /dev/null
+++ b/examples/chat/angular/e2e/browser-hygiene.spec.ts
@@ -0,0 +1,43 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import { attachBrowserHygiene, openDemo } from './test-helpers';
+
+test('browser hygiene pilot: repeated mode switches do not leak visible chat DOM', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  const hygiene = attachBrowserHygiene(page);
+
+  const client = await page.context().newCDPSession(page);
+  await client.send('Performance.enable');
+  const before = await client.send('Performance.getMetrics');
+
+  for (let i = 0; i < 10; i++) {
+    await page
+      .locator('.demo-shell__segmented-button', { hasText: 'Popup' })
+      .click();
+    await expect(page).toHaveURL(/\/popup$/);
+    await page
+      .locator('.demo-shell__segmented-button', { hasText: 'Sidebar' })
+      .click();
+    await expect(page).toHaveURL(/\/sidebar$/);
+    await page
+      .locator('.demo-shell__segmented-button', { hasText: 'Embed' })
+      .click();
+    await expect(page).toHaveURL(/\/embed$/);
+  }
+
+  const after = await client.send('Performance.getMetrics');
+  const jsHeapBefore =
+    before.metrics.find((m) => m.name === 'JSHeapUsedSize')?.value ?? 0;
+  const jsHeapAfter =
+    after.metrics.find((m) => m.name === 'JSHeapUsedSize')?.value ?? 0;
+
+  await expect(page.locator('embed-mode')).toHaveCount(1);
+  await expect(page.locator('popup-mode')).toHaveCount(0);
+  await expect(page.locator('sidebar-mode')).toHaveCount(0);
+  await expect(page.locator('chat-message')).toHaveCount(0);
+  expect(jsHeapAfter).toBeLessThan(jsHeapBefore + 20_000_000);
+  expect(hygiene.consoleErrors).toEqual([]);
+  expect(hygiene.failedRequests).toEqual([]);
+});
diff --git a/examples/chat/angular/e2e/color-scheme.spec.ts b/examples/chat/angular/e2e/color-scheme.spec.ts
new file mode 100644
index 000000000..8d5da70a2
--- /dev/null
+++ b/examples/chat/angular/e2e/color-scheme.spec.ts
@@ -0,0 +1,77 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import {
+  attachBrowserHygiene,
+  openDemo,
+  selectToolbarOption,
+} from './test-helpers';
+
+test('color scheme: dark default, light toggle persists and syncs default A2UI theme', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  const hygiene = attachBrowserHygiene(page);
+
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-color-scheme',
+    'dark'
+  );
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-ngaf-chat-theme',
+    'dark'
+  );
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-theme',
+    'default-dark'
+  );
+
+  await page.getByRole('button', { name: 'Switch to light theme' }).click();
+
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-color-scheme',
+    'light'
+  );
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-ngaf-chat-theme',
+    'light'
+  );
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-theme',
+    'default-light'
+  );
+
+  await page.reload();
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-color-scheme',
+    'light'
+  );
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-ngaf-chat-theme',
+    'light'
+  );
+
+  expect(hygiene.consoleErrors).toEqual([]);
+});
+
+test('color scheme: material A2UI theme override wins over scheme sync', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+
+  await selectToolbarOption(page, 'Theme', 'Material dark');
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-theme',
+    'material-dark'
+  );
+
+  await page.getByRole('button', { name: 'Switch to light theme' }).click();
+
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-color-scheme',
+    'light'
+  );
+  await expect(page.locator('html')).toHaveAttribute(
+    'data-theme',
+    'material-dark'
+  );
+});
diff --git a/examples/chat/angular/e2e/control-palette.spec.ts b/examples/chat/angular/e2e/control-palette.spec.ts
new file mode 100644
index 000000000..eb45495d6
--- /dev/null
+++ b/examples/chat/angular/e2e/control-palette.spec.ts
@@ -0,0 +1,71 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import {
+  openChatDevtools,
+  openDemo,
+  selectToolbarOption,
+  toolbarSelect,
+} from './test-helpers';
+
+test('control palette: toolbar renders defaults and persists selected controls', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+
+  await expect(
+    page.getByRole('toolbar', { name: 'Demo controls' })
+  ).toBeVisible();
+  await expect(
+    page.locator('.demo-shell__segmented-button.is-active', {
+      hasText: 'Embed',
+    })
+  ).toBeVisible();
+  await expect(toolbarSelect(page, 'Model')).toHaveValue('gpt-5-mini');
+  await expect(toolbarSelect(page, 'Effort')).toHaveValue('minimal');
+  await expect(toolbarSelect(page, 'Gen UI')).toHaveValue('a2ui');
+  await expect(toolbarSelect(page, 'Theme')).toHaveValue('default-dark');
+
+  await selectToolbarOption(page, 'Model', 'gpt-5-nano');
+  await selectToolbarOption(page, 'Effort', 'low');
+  await selectToolbarOption(page, 'Gen UI', 'json-render');
+  await selectToolbarOption(page, 'Theme', 'Material dark');
+
+  await page.reload();
+  await expect(toolbarSelect(page, 'Model')).toHaveValue('gpt-5-nano');
+  await expect(toolbarSelect(page, 'Effort')).toHaveValue('low');
+  await expect(toolbarSelect(page, 'Gen UI')).toHaveValue('json-render');
+  await expect(toolbarSelect(page, 'Theme')).toHaveValue('material-dark');
+});
+
+test('control palette: devtools opens on demand and closes back to launcher', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+
+  await openChatDevtools(page);
+  await expect(
+    page.getByRole('region', { name: 'Chat devtools' })
+  ).toBeVisible();
+  await expect(page.locator('.panel.panel--right')).toBeVisible();
+
+  await page.getByRole('button', { name: 'Close' }).click();
+  await expect(page.locator('chat-debug .panel')).toHaveCount(0);
+  await expect(
+    page.getByRole('button', { name: 'Open chat devtools' })
+  ).toBeVisible();
+});
+
+test('control palette: mode segmented control changes routes', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  await page
+    .locator('.demo-shell__segmented-button', { hasText: 'Sidebar' })
+    .click();
+  await expect(page).toHaveURL(/\/sidebar$/);
+  await expect(
+    page.locator('.demo-shell__segmented-button.is-active', {
+      hasText: 'Sidebar',
+    })
+  ).toBeVisible();
+});
diff --git a/examples/chat/angular/e2e/sidebar-mode-coexistence.spec.ts b/examples/chat/angular/e2e/debug-devtools.spec.ts
similarity index 55%
rename from examples/chat/angular/e2e/sidebar-mode-coexistence.spec.ts
rename to examples/chat/angular/e2e/debug-devtools.spec.ts
index 239e0c28b..ef438b93a 100644
--- a/examples/chat/angular/e2e/sidebar-mode-coexistence.spec.ts
+++ b/examples/chat/angular/e2e/debug-devtools.spec.ts
@@ -1,26 +1,52 @@
 // SPDX-License-Identifier: MIT
 import { test, expect } from '@playwright/test';
+import { openChatDevtools, openDemo } from './test-helpers';
+
+test('chat-debug devtools: opens from the sidenav with accessible controls and closes cleanly', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  await openChatDevtools(page);
+
+  const panel = page.getByRole('region', { name: 'Chat devtools' });
+  await expect(panel).toBeVisible();
+  await expect(panel.getByRole('tab', { name: 'Timeline' })).toBeVisible();
+  await expect(panel.getByRole('tab', { name: 'State' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Close' }).click();
+  await expect(page.locator('chat-debug .panel')).toHaveCount(0);
+  await expect(
+    page.getByRole('button', { name: 'Open chat devtools' })
+  ).toBeVisible();
+});
 
 test.describe('chat-debug × chat-sidebar coexistence', () => {
-  test('sidebar launcher remains reachable while chat-debug is open', async ({ page }) => {
-    await page.goto('/sidebar');
+  test('sidebar launcher remains reachable while chat-debug is open', async ({
+    page,
+  }) => {
+    await openDemo(page, '/sidebar');
     await expect(page.locator('chat-sidebar')).toBeAttached();
 
     // Open chat-debug from the sidenav footer.
-    await page.locator('.chat-sidenav__debug').click();
+    await openChatDevtools(page);
 
     // Debug auto-picks bottom dock because <chat-sidebar> is present.
     const debugPanel = page.locator('.panel.panel--bottom');
     await expect(debugPanel).toBeVisible();
 
     // The edge-claim attribute on <html> reflects the dock.
-    await expect(page.locator('html')).toHaveAttribute('data-ngaf-chat-debug', 'bottom');
+    await expect(page.locator('html')).toHaveAttribute(
+      'data-ngaf-chat-debug',
+      'bottom'
+    );
 
     // Sidebar launcher remains visible (the bottom dock did not cover it).
     // Click the actual <button> inside <chat-launcher-button> rather than the
     // wrapping div — avoids any hit-test ambiguity between the wrapper and
     // the higher-z-index debug panel.
-    const sidebarLauncherButton = page.locator('.chat-sidebar__launcher button.chat-launcher-button');
+    const sidebarLauncherButton = page.locator(
+      '.chat-sidebar__launcher button.chat-launcher-button'
+    );
     await expect(sidebarLauncherButton).toBeVisible();
     await sidebarLauncherButton.click();
 
@@ -30,16 +56,25 @@ test.describe('chat-debug × chat-sidebar coexistence', () => {
     await expect(sidebarPanel).toBeVisible();
 
     // Once the sidebar is open, the edge-claim attribute reflects it too.
-    await expect(page.locator('html')).toHaveAttribute('data-ngaf-chat-sidebar', 'open');
+    await expect(page.locator('html')).toHaveAttribute(
+      'data-ngaf-chat-sidebar',
+      'open'
+    );
   });
 
-  test('user override survives mode switch: explicit right-dock stays right', async ({ page }) => {
-    await page.goto('/embed');
-    await page.locator('.chat-sidenav__debug').click();
+  test('user override survives mode switch: explicit right-dock stays right', async ({
+    page,
+  }) => {
+    await openDemo(page, '/embed');
+    await openChatDevtools(page);
     // Click right-dock explicitly — sets userDockOverride.
     await page.locator('.panel__dock-btn').nth(2).click(); // 0=left, 1=bottom, 2=right
     // Switch to sidebar mode via the demo-owned top toolbar.
-    await page.locator('.demo-shell__segmented-button', { hasText: 'Sidebar' }).click();
+    await page
+      .locator('.demo-shell__segmented-button', { hasText: 'Sidebar' })
+      .click();
+    await openChatDevtools(page);
+
     // Debug stays right-docked despite chat-sidebar now being on the page.
     await expect(page.locator('.panel.panel--right')).toBeVisible();
     await expect(page.locator('.panel.panel--bottom')).not.toBeVisible();
diff --git a/examples/chat/angular/e2e/error-handling.spec.ts b/examples/chat/angular/e2e/error-handling.spec.ts
new file mode 100644
index 000000000..2f13d0603
--- /dev/null
+++ b/examples/chat/angular/e2e/error-handling.spec.ts
@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import { messageInput, openDemo, sendButton, waitForFinalAssistant } from './test-helpers';
+
+test('error handling: failed stream surfaces an alert and the next send recovers', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+
+  await page.route('**/runs/stream', async (route) => {
+    await route.abort('failed');
+  });
+
+  await messageInput(page).fill('say hi briefly');
+  await sendButton(page).click();
+  await expect(page.getByRole('alert')).toContainText(/fail|error/i, { timeout: 15_000 });
+
+  await page.unroute('**/runs/stream');
+  await expect(messageInput(page)).toBeEnabled();
+  await messageInput(page).fill('say hi briefly');
+  await sendButton(page).click();
+  const bubble = await waitForFinalAssistant(page);
+  await expect(bubble).toContainText(/hi/i);
+});
diff --git a/examples/chat/angular/e2e/fixtures/markdown.json b/examples/chat/angular/e2e/fixtures/markdown.json
index 12e8dda38..4fa49a08e 100644
--- a/examples/chat/angular/e2e/fixtures/markdown.json
+++ b/examples/chat/angular/e2e/fixtures/markdown.json
@@ -11,6 +11,12 @@
     {
       "match": { "userMessage": "respond with a bullet list" },
       "response": { "content": "Three things:\n\n- alpha\n- beta\n- gamma" }
+    },
+    {
+      "match": { "userMessage": "respond with the markdown checklist kitchen sink" },
+      "response": {
+        "content": "# Heading One\n\n## Heading Two\n\n### Heading Three\n\nA paragraph with **bold text**, *italic text*, and `inline code`.\n\n- parent item\n  - nested child\n- second parent\n\n1. first ordered\n2. second ordered\n\n- [ ] unchecked task\n- [x] checked task\n\n```typescript\nconst answer = 42;\n```\n\n| Name | Mental model | When to use |\n| --- | --- | --- |\n| Signals | value graph | local state |\n| RxJS | event stream | async events |\n\n> This is a blockquote.\n\n[Angular](https://angular.dev)\n\n---\n\n<script>alert('xss')</script>"
+      }
     }
   ]
 }
diff --git a/examples/chat/angular/e2e/fixtures/streaming.json b/examples/chat/angular/e2e/fixtures/streaming.json
new file mode 100644
index 000000000..5b4fd9ad9
--- /dev/null
+++ b/examples/chat/angular/e2e/fixtures/streaming.json
@@ -0,0 +1,12 @@
+{
+  "fixtures": [
+    {
+      "match": { "userMessage": "stream a long deterministic answer" },
+      "chunkSize": 128,
+      "streamingProfile": { "ttft": 500, "tps": 6 },
+      "response": {
+        "content": "Streaming smoke response begins. This deterministic response is intentionally long enough to cross the aimock chunk boundary so Playwright can observe the loading state, stop button, and final idle state. Section one repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section two repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section three repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section four repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section five repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section six repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section seven repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section eight repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section nine repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section ten repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section eleven repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section twelve repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section thirteen repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section fourteen repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Section fifteen repeats useful words about Angular signals, chat rendering, markdown stability, scroll anchoring, deterministic replay, and user feedback. Final marker: complete."
+      }
+    }
+  ]
+}
diff --git a/examples/chat/angular/e2e/initial-render.spec.ts b/examples/chat/angular/e2e/initial-render.spec.ts
new file mode 100644
index 000000000..271aa93a5
--- /dev/null
+++ b/examples/chat/angular/e2e/initial-render.spec.ts
@@ -0,0 +1,50 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import {
+  attachBrowserHygiene,
+  messageInput,
+  openDemo,
+  sendButton,
+  toolbarSelect,
+} from './test-helpers';
+
+test('initial render: root route redirects to welcome-state embed mode', async ({
+  page,
+}) => {
+  await openDemo(page, '/');
+  const hygiene = attachBrowserHygiene(page);
+
+  await expect(page).toHaveURL(/\/embed$/);
+  await expect(
+    page.getByRole('heading', { name: 'How can I help?' })
+  ).toBeVisible();
+  await expect(
+    page.getByRole('button', { name: /Demo: render a contact form/i })
+  ).toBeVisible();
+  await expect(
+    page.getByRole('button', { name: 'More prompts' })
+  ).toBeVisible();
+  await expect(messageInput(page)).toBeVisible();
+  await expect(sendButton(page)).toBeDisabled();
+
+  await expect(
+    page.locator('.demo-shell__segmented-button.is-active', {
+      hasText: 'Embed',
+    })
+  ).toBeVisible();
+  await expect(toolbarSelect(page, 'Model')).toHaveValue('gpt-5-mini');
+  await expect(
+    page.getByRole('button', { name: 'Open chat devtools' })
+  ).toBeVisible();
+
+  expect(hygiene.consoleErrors).toEqual([]);
+  expect(hygiene.failedRequests).toEqual([]);
+});
+
+test('initial render: unknown route redirects back to embed', async ({
+  page,
+}) => {
+  await openDemo(page, '/definitely-not-a-mode');
+  await expect(page).toHaveURL(/\/embed$/);
+  await expect(page.locator('embed-mode chat')).toBeVisible();
+});
diff --git a/examples/chat/angular/e2e/interrupt-approval.spec.ts b/examples/chat/angular/e2e/interrupt-approval.spec.ts
index 75fa90ff5..030e6a5b2 100644
--- a/examples/chat/angular/e2e/interrupt-approval.spec.ts
+++ b/examples/chat/angular/e2e/interrupt-approval.spec.ts
@@ -1,5 +1,6 @@
 // SPDX-License-Identifier: MIT
 import { test, expect } from '@playwright/test';
+import { openDemo } from './test-helpers';
 
 const PROMPT =
   'I want to clean up old database backups older than 90 days. Walk me through ' +
@@ -9,7 +10,7 @@ const PROMPT =
 test('interrupt approval: pause renders the interrupt panel with the captured reason', async ({
   page,
 }) => {
-  await page.goto('/embed');
+  await openDemo(page, '/embed');
 
   const input = page.getByRole('textbox', { name: /message|prompt/i });
   await input.fill(PROMPT);
@@ -33,4 +34,9 @@ test('interrupt approval: pause renders the interrupt panel with the captured re
     async () => (await panel.innerText()).toLowerCase(),
     { timeout: 30_000 },
   ).toMatch(/approval|delete|backup/i);
+
+  await expect(panel.getByRole('button', { name: /accept/i })).toBeVisible();
+  await expect(panel.getByRole('button', { name: /edit|respond/i }).first()).toBeVisible();
+  await expect(panel.getByRole('button', { name: /ignore/i })).toBeVisible();
+  await expect(page.locator('chat-message').filter({ has: panel })).toHaveCount(0);
 });
diff --git a/examples/chat/angular/e2e/keyboard-accessibility.spec.ts b/examples/chat/angular/e2e/keyboard-accessibility.spec.ts
new file mode 100644
index 000000000..d487c98d3
--- /dev/null
+++ b/examples/chat/angular/e2e/keyboard-accessibility.spec.ts
@@ -0,0 +1,59 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import {
+  closeChatDevtools,
+  messageInput,
+  openDemo,
+  sendButton,
+  waitForFinalAssistant,
+} from './test-helpers';
+
+test('keyboard: Enter sends and Shift+Enter inserts a newline', async ({ page }) => {
+  await openDemo(page, '/embed');
+
+  const input = messageInput(page);
+  await input.fill('first line');
+  await input.focus();
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Enter');
+  await page.keyboard.up('Shift');
+  await page.keyboard.type('second line');
+  await expect(input).toHaveValue('first line\nsecond line');
+
+  await input.fill('say hi briefly');
+  await input.press('Enter');
+  await waitForFinalAssistant(page);
+  await expect(page.locator('chat-message[data-role="user"]')).toContainText('say hi briefly');
+});
+
+test('accessibility: core controls expose expected accessible names', async ({ page }) => {
+  await openDemo(page, '/embed');
+
+  await expect(sendButton(page)).toHaveAttribute('aria-label', 'Send message');
+
+  await messageInput(page).fill('stream a long deterministic answer');
+  await sendButton(page).click();
+
+  await waitForFinalAssistant(page);
+  await expect(page.getByRole('button', { name: 'Regenerate response' }).first()).toBeVisible();
+  const copy = page.getByRole('button', { name: 'Copy to clipboard' }).first();
+  await expect(copy).toBeVisible();
+  await copy.click();
+  await expect(page.getByRole('button', { name: 'Copied' }).first()).toBeVisible();
+});
+
+test('keyboard: Escape closes popup and sidebar panels', async ({ page }) => {
+  await openDemo(page, '/popup');
+  await closeChatDevtools(page);
+  await page.locator('.chat-popup__launcher button.chat-launcher-button').click();
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await page.keyboard.press('Escape');
+  await expect(page.locator('.chat-popup__window[data-open="true"]')).toHaveCount(0);
+
+  await page.goto('/sidebar');
+  await closeChatDevtools(page);
+  await page.locator('.chat-sidebar__launcher button.chat-launcher-button').click();
+  await expect(page.getByRole('complementary')).toHaveAttribute('aria-hidden', 'false');
+  await page.keyboard.press('Escape');
+  await expect(page.locator('.chat-sidebar__panel')).toHaveAttribute('aria-hidden', 'true');
+});
diff --git a/examples/chat/angular/e2e/lifecycle.spec.ts b/examples/chat/angular/e2e/lifecycle.spec.ts
new file mode 100644
index 000000000..b09c85332
--- /dev/null
+++ b/examples/chat/angular/e2e/lifecycle.spec.ts
@@ -0,0 +1,64 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import {
+  messageInput,
+  openDemo,
+  sendButton,
+  waitForFinalAssistant,
+} from './test-helpers';
+
+test('lifecycle: reload reconnects to the active conversation', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  await messageInput(page).fill('say hi briefly');
+  await sendButton(page).click();
+  await waitForFinalAssistant(page);
+
+  await page.reload();
+  await expect(page.locator('chat-message[data-role="user"]')).toContainText(
+    'say hi briefly'
+  );
+  await expect(
+    page.locator('chat-message[data-role="assistant"]')
+  ).toContainText(/hi/i);
+});
+
+test('lifecycle: new conversation clears local thread and restores welcome state', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  await messageInput(page).fill('say hi briefly');
+  await sendButton(page).click();
+  await waitForFinalAssistant(page);
+
+  await page.getByRole('button', { name: 'New conversation' }).click();
+
+  await expect(
+    page.getByRole('heading', { name: 'How can I help?' })
+  ).toBeVisible();
+  await expect(page.locator('chat-message')).toHaveCount(0);
+  const threadId = await page.evaluate(() => {
+    const raw = localStorage.getItem('ngaf-chat-demo:palette');
+    return raw
+      ? (JSON.parse(raw) as { threadId?: string | null }).threadId
+      : undefined;
+  });
+  expect(threadId ?? null).toBeNull();
+});
+
+test('lifecycle: selecting a welcome suggestion submits and clears welcome state', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  await page
+    .getByRole('button', { name: /Demo: render a contact form/i })
+    .click();
+
+  await expect(
+    page.getByRole('heading', { name: 'How can I help?' })
+  ).toHaveCount(0);
+  await expect(page.locator('chat-message[data-role="user"]')).toContainText(
+    'Show me a contact form'
+  );
+});
diff --git a/examples/chat/angular/e2e/markdown-surfaces.spec.ts b/examples/chat/angular/e2e/markdown-surfaces.spec.ts
new file mode 100644
index 000000000..55f10a275
--- /dev/null
+++ b/examples/chat/angular/e2e/markdown-surfaces.spec.ts
@@ -0,0 +1,55 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import { sendPromptAndWait } from './test-helpers';
+
+test('heading: assistant bubble renders an <h1>', async ({ page }) => {
+  const bubble = await sendPromptAndWait(page, 'respond with a heading');
+  await expect(bubble.locator('h1')).toBeVisible();
+  await expect(bubble.locator('h1')).toContainText(/heading one/i);
+});
+
+test('code fence: assistant bubble renders <pre><code>', async ({ page }) => {
+  const bubble = await sendPromptAndWait(page, 'respond with a code fence');
+  const codeBlock = bubble.locator('pre code');
+  await expect(codeBlock).toBeVisible();
+  await expect(codeBlock).toContainText('const answer = 42');
+});
+
+test('bullet list: assistant bubble renders <ul> with three <li>', async ({ page }) => {
+  const bubble = await sendPromptAndWait(page, 'respond with a bullet list');
+  const list = bubble.locator('ul');
+  await expect(list).toBeVisible();
+  await expect(list.locator('li')).toHaveCount(3);
+  await expect(list.locator('li').nth(0)).toContainText('alpha');
+  await expect(list.locator('li').nth(1)).toContainText('beta');
+  await expect(list.locator('li').nth(2)).toContainText('gamma');
+});
+
+test('markdown checklist matrix: rich markdown renders with escaped html', async ({ page }) => {
+  const bubble = await sendPromptAndWait(page, 'respond with the markdown checklist kitchen sink');
+
+  await expect(bubble.locator('h1')).toContainText('Heading One');
+  await expect(bubble.locator('h2')).toContainText('Heading Two');
+  await expect(bubble.locator('h3')).toContainText('Heading Three');
+  await expect(bubble.locator('strong')).toContainText('bold text');
+  await expect(bubble.locator('em')).toContainText('italic text');
+  await expect(bubble.locator('p code')).toContainText('inline code');
+  await expect(bubble.locator('ul').first()).toContainText('parent item');
+  await expect(bubble.locator('ul').first()).toContainText('nested child');
+  await expect(bubble.locator('ul').first()).toContainText('second parent');
+  await expect(bubble.locator('ol li')).toHaveText(['first ordered', 'second ordered']);
+  await expect(bubble.locator('input[type="checkbox"]')).toHaveCount(2);
+  await expect(bubble.locator('code').filter({ hasText: 'const answer = 42' })).toBeVisible();
+  await expect(bubble.locator('table')).toBeVisible();
+  await expect(bubble.locator('thead th')).toHaveText(['Name', 'Mental model', 'When to use']);
+  await expect(bubble.locator('tbody tr')).toHaveCount(2);
+  await expect(bubble.locator('blockquote')).toBeVisible();
+  await expect(bubble).toContainText('This is a blockquote.');
+  await expect(bubble.locator('a', { hasText: 'Angular' })).toHaveAttribute(
+    'href',
+    'https://angular.dev',
+  );
+  await expect(bubble.locator('hr')).toBeVisible();
+  await expect(bubble.locator('script')).toHaveCount(0);
+  await expect(bubble).toContainText("<script>alert('xss')</script>");
+});
diff --git a/examples/chat/angular/e2e/markdown.spec.ts b/examples/chat/angular/e2e/markdown.spec.ts
deleted file mode 100644
index e66ec7e1b..000000000
--- a/examples/chat/angular/e2e/markdown.spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// SPDX-License-Identifier: MIT
-import { test, expect } from '@playwright/test';
-import { sendPromptAndWait } from './test-helpers';
-
-test('heading: assistant bubble renders an <h1>', async ({ page }) => {
-  const bubble = await sendPromptAndWait(page, 'respond with a heading');
-  await expect(bubble.locator('h1')).toBeVisible();
-  await expect(bubble.locator('h1')).toContainText(/heading one/i);
-});
-
-test('code fence: assistant bubble renders <pre><code>', async ({ page }) => {
-  const bubble = await sendPromptAndWait(page, 'respond with a code fence');
-  const codeBlock = bubble.locator('pre code');
-  await expect(codeBlock).toBeVisible();
-  await expect(codeBlock).toContainText('const answer = 42');
-});
-
-test('bullet list: assistant bubble renders <ul> with three <li>', async ({ page }) => {
-  const bubble = await sendPromptAndWait(page, 'respond with a bullet list');
-  const list = bubble.locator('ul');
-  await expect(list).toBeVisible();
-  await expect(list.locator('li')).toHaveCount(3);
-  await expect(list.locator('li').nth(0)).toContainText('alpha');
-  await expect(list.locator('li').nth(1)).toContainText('beta');
-  await expect(list.locator('li').nth(2)).toContainText('gamma');
-});
diff --git a/examples/chat/angular/e2e/mode-routing.spec.ts b/examples/chat/angular/e2e/mode-routing.spec.ts
new file mode 100644
index 000000000..153741db0
--- /dev/null
+++ b/examples/chat/angular/e2e/mode-routing.spec.ts
@@ -0,0 +1,76 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import {
+  closeChatDevtools,
+  messageInput,
+  openDemo,
+  sendButton,
+  waitForFinalAssistant,
+} from './test-helpers';
+
+test('mode routing: embed, popup, and sidebar expose the expected landmarks', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  await expect(page.locator('embed-mode chat')).toBeVisible();
+
+  await page.goto('/popup');
+  await expect(page.locator('popup-mode chat-popup')).toBeVisible();
+  await closeChatDevtools(page);
+  await page.locator('.chat-popup__launcher button.chat-launcher-button').click();
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await page.locator('.chat-popup__close').click();
+  await expect(page).toHaveURL(/\/popup$/);
+
+  await page.goto('/sidebar');
+  await expect(page.locator('sidebar-mode chat-sidebar')).toBeVisible();
+  await closeChatDevtools(page);
+  await page.locator('.chat-sidebar__launcher button.chat-launcher-button').click();
+  const sidebar = page.getByRole('complementary');
+  await expect(sidebar).toBeVisible();
+  await expect(sidebar).toHaveAttribute('aria-hidden', 'false');
+  await page.locator('.chat-sidebar__close').click();
+  await expect(page).toHaveURL(/\/sidebar$/);
+  await expect(page.locator('.chat-sidebar__panel')).toHaveAttribute('aria-hidden', 'true');
+});
+
+test('cross-mode persistence: conversation follows embed, popup, and sidebar', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  await messageInput(page).fill('say hi briefly');
+  await sendButton(page).click();
+  await waitForFinalAssistant(page);
+
+  await page.goto('/popup');
+  await closeChatDevtools(page);
+  await page.locator('.chat-popup__launcher button.chat-launcher-button').click();
+  await expect(
+    page.getByRole('dialog').locator('chat-message[data-role="assistant"]'),
+  ).toContainText(/hi/i, { timeout: 30_000 });
+
+  await page.goto('/sidebar');
+  await closeChatDevtools(page);
+  await page.locator('.chat-sidebar__launcher button.chat-launcher-button').click();
+  await expect(
+    page.getByRole('complementary').locator('chat-message[data-role="assistant"]'),
+  ).toContainText(/hi/i, { timeout: 30_000 });
+
+  await page.goto('/embed');
+  await expect(page.locator('embed-mode chat-message[data-role="assistant"]')).toContainText(/hi/i, {
+    timeout: 30_000,
+  });
+});
+
+test('mode routing: browser back and forward move between modes', async ({ page }) => {
+  await openDemo(page, '/embed');
+  await page.goto('/popup');
+  await page.goto('/sidebar');
+
+  await page.goBack();
+  await expect(page).toHaveURL(/\/popup$/);
+  await page.goBack();
+  await expect(page).toHaveURL(/\/embed$/);
+  await page.goForward();
+  await expect(page).toHaveURL(/\/popup$/);
+});
diff --git a/examples/chat/angular/e2e/model-picker.spec.ts b/examples/chat/angular/e2e/model-picker.spec.ts
new file mode 100644
index 000000000..56c1ddb46
--- /dev/null
+++ b/examples/chat/angular/e2e/model-picker.spec.ts
@@ -0,0 +1,52 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import {
+  messageInput,
+  openDemo,
+  sendButton,
+  selectToolbarOption,
+  toolbarSelect,
+  waitForFinalAssistant,
+} from './test-helpers';
+
+test('model picker: configured models render, persist, and reach backend state', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+
+  const modelSelect = toolbarSelect(page, 'Model');
+  await expect(modelSelect.locator('option')).toHaveText([
+    'gpt-5',
+    'gpt-5-mini',
+    'gpt-5-nano',
+  ]);
+
+  await selectToolbarOption(page, 'Model', 'gpt-5-nano');
+  await expect(modelSelect).toHaveValue('gpt-5-nano');
+
+  await page.reload();
+  await expect(toolbarSelect(page, 'Model')).toHaveValue('gpt-5-nano');
+
+  await page
+    .locator('.demo-shell__segmented-button', { hasText: 'Popup' })
+    .click();
+  await expect(page).toHaveURL(/\/popup$/);
+  await expect(toolbarSelect(page, 'Model')).toHaveValue('gpt-5-nano');
+
+  await page.goto('/embed');
+  await messageInput(page).fill('say hi briefly');
+  await sendButton(page).click();
+  await waitForFinalAssistant(page);
+
+  const threadId = await page.evaluate(() => {
+    const raw = localStorage.getItem('ngaf-chat-demo:palette');
+    return raw
+      ? (JSON.parse(raw) as { threadId?: string }).threadId
+      : undefined;
+  });
+  expect(threadId).toBeTruthy();
+  const state = await fetch(
+    `http://localhost:2024/threads/${threadId}/state`
+  ).then((r) => r.json() as Promise<{ values?: { model?: string } }>);
+  expect(state.values?.model).toBe('gpt-5-nano');
+});
diff --git a/examples/chat/angular/e2e/regenerate.spec.ts b/examples/chat/angular/e2e/regenerate.spec.ts
index 73348cc3e..6a9af1d66 100644
--- a/examples/chat/angular/e2e/regenerate.spec.ts
+++ b/examples/chat/angular/e2e/regenerate.spec.ts
@@ -35,4 +35,36 @@ test('regenerate: re-running keeps 1 user / 1 assistant in the conversation', as
   // (the assistant message is replaced in place, not appended).
   await expect(userMessages).toHaveCount(1);
   await expect(assistantMessages).toHaveCount(1);
+
+  const threadId = await page.evaluate(() => {
+    const raw = localStorage.getItem('ngaf-chat-demo:palette');
+    return raw ? (JSON.parse(raw) as { threadId?: string }).threadId : undefined;
+  });
+  expect(threadId).toBeTruthy();
+  const state = await fetch(`http://localhost:2024/threads/${threadId}/state`).then((r) =>
+    r.json() as Promise<{ values?: { messages?: unknown[] }; next?: unknown[] }>,
+  );
+  expect(state.values?.messages).toHaveLength(2);
+  expect(state.next ?? []).toEqual([]);
+});
+
+test('regenerate: repeated regenerate keeps the same 1 user / 1 assistant shape', async ({
+  page,
+}) => {
+  await sendPromptAndWait(page, 'say hi briefly');
+
+  for (let i = 0; i < 3; i++) {
+    await page.getByRole('button', { name: 'Regenerate response' }).first().click();
+    await expect
+      .poll(
+        async () =>
+          page
+            .locator('chat-message[data-role="assistant"][data-streaming="false"]')
+            .count(),
+        { timeout: 45_000 },
+      )
+      .toBeGreaterThan(0);
+    await expect(page.locator('chat-message[data-role="user"]')).toHaveCount(1);
+    await expect(page.locator('chat-message[data-role="assistant"]')).toHaveCount(1);
+  }
 });
diff --git a/examples/chat/angular/e2e/research-subagent.spec.ts b/examples/chat/angular/e2e/research-subagent.spec.ts
index f2bfb64a1..9c47a72a2 100644
--- a/examples/chat/angular/e2e/research-subagent.spec.ts
+++ b/examples/chat/angular/e2e/research-subagent.spec.ts
@@ -1,5 +1,6 @@
 // SPDX-License-Identifier: MIT
 import { test, expect } from '@playwright/test';
+import { openDemo } from './test-helpers';
 
 const PROMPT =
   'Use the research subagent to investigate the history and motivation behind ' +
@@ -8,7 +9,7 @@ const PROMPT =
 test('research subagent: parent dispatches research, subagent content surfaces in the bubble', async ({
   page,
 }) => {
-  await page.goto('/embed');
+  await openDemo(page, '/embed');
 
   const input = page.getByRole('textbox', { name: /message|prompt/i });
   await input.fill(PROMPT);
diff --git a/examples/chat/angular/e2e/send-receive.spec.ts b/examples/chat/angular/e2e/send-receive.spec.ts
new file mode 100644
index 000000000..c17791d88
--- /dev/null
+++ b/examples/chat/angular/e2e/send-receive.spec.ts
@@ -0,0 +1,48 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import {
+  attachBrowserHygiene,
+  messageInput,
+  openDemo,
+  sendButton,
+  sendPromptAndWait,
+  waitForFinalAssistant,
+} from './test-helpers';
+
+test('hi: assistant bubble renders non-empty text from the replayed fixture', async ({ page }) => {
+  const bubble = await sendPromptAndWait(page, 'say hi briefly');
+  const finalText = await bubble.innerText();
+  expect(finalText.trim()).toMatch(/hi/i);
+});
+
+test('send and receive: input clears, user renders immediately, stream completes idle', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  const hygiene = attachBrowserHygiene(page);
+
+  const input = messageInput(page);
+  await input.fill('stream a long deterministic answer');
+  await sendButton(page).click();
+
+  await expect(input).toHaveValue('');
+  await expect(page.locator('chat-message[data-role="user"]')).toContainText(
+    'stream a long deterministic answer',
+  );
+
+  const bubble = await waitForFinalAssistant(page);
+  await expect(bubble).toContainText('Streaming smoke response begins');
+  await expect(sendButton(page)).toBeDisabled();
+  await input.fill('ready for another prompt');
+  await expect(sendButton(page)).toBeEnabled();
+
+  const scroll = page.locator('.chat-scroll');
+  await expect
+    .poll(async () =>
+      scroll.evaluate((el) => Math.ceil(el.scrollTop + el.clientHeight) >= el.scrollHeight - 4),
+    )
+    .toBe(true);
+
+  expect(hygiene.consoleErrors).toEqual([]);
+  expect(hygiene.failedRequests).toEqual([]);
+});
diff --git a/examples/chat/angular/e2e/smoke.spec.ts b/examples/chat/angular/e2e/smoke.spec.ts
deleted file mode 100644
index a24f64737..000000000
--- a/examples/chat/angular/e2e/smoke.spec.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// SPDX-License-Identifier: MIT
-import { test, expect } from '@playwright/test';
-import { sendPromptAndWait } from './test-helpers';
-
-test('hi: assistant bubble renders non-empty text from the replayed fixture', async ({ page }) => {
-  const bubble = await sendPromptAndWait(page, 'say hi briefly');
-  const finalText = await bubble.innerText();
-  expect(finalText.trim()).toMatch(/hi/i);
-});
diff --git a/examples/chat/angular/e2e/stop-streaming.spec.ts b/examples/chat/angular/e2e/stop-streaming.spec.ts
new file mode 100644
index 000000000..f3e0d9d8f
--- /dev/null
+++ b/examples/chat/angular/e2e/stop-streaming.spec.ts
@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import { attachBrowserHygiene, messageInput, openDemo, sendButton } from './test-helpers';
+
+test.skip('stop mid-stream: stop button aborts the run and leaves the partial response', async ({
+  page,
+}) => {
+  await openDemo(page, '/embed');
+  const hygiene = attachBrowserHygiene(page);
+
+  await messageInput(page).fill('stream a long deterministic answer');
+  await sendButton(page).click();
+
+  const stop = page.getByRole('button', { name: 'Stop generating' });
+  await expect(stop).toBeVisible({ timeout: 10_000 });
+  await stop.click();
+
+  await expect(stop).toBeHidden({ timeout: 15_000 });
+  await expect(page.locator('chat-message[data-role="assistant"]').last()).toBeAttached();
+  await expect(messageInput(page)).toBeVisible();
+
+  expect(hygiene.consoleErrors).toEqual([]);
+});
diff --git a/examples/chat/angular/e2e/test-helpers.ts b/examples/chat/angular/e2e/test-helpers.ts
index f0aaa99f2..1223559fe 100644
--- a/examples/chat/angular/e2e/test-helpers.ts
+++ b/examples/chat/angular/e2e/test-helpers.ts
@@ -1,6 +1,130 @@
 // SPDX-License-Identifier: MIT
 import { expect, type Locator, type Page } from '@playwright/test';
 
+export function attachBrowserHygiene(page: Page): {
+  consoleErrors: string[];
+  failedRequests: string[];
+} {
+  const consoleErrors: string[] = [];
+  const failedRequests: string[] = [];
+
+  page.on('console', (msg) => {
+    if (msg.type() !== 'error') return;
+    const text = msg.text();
+    if (/PostHog|ERR_NAME_NOT_RESOLVED|license/i.test(text)) return;
+    consoleErrors.push(text);
+  });
+  page.on('pageerror', (err) => {
+    consoleErrors.push(err.message);
+  });
+  page.on('requestfailed', (request) => {
+    const failure = request.failure()?.errorText ?? '';
+    const url = request.url();
+    if (/runs\/stream/.test(url) && /abort|ERR_ABORTED/i.test(failure)) return;
+    failedRequests.push(`${request.method()} ${url} ${failure}`.trim());
+  });
+
+  return { consoleErrors, failedRequests };
+}
+
+export async function openDemo(page: Page, path = '/embed'): Promise<void> {
+  await page.goto(path);
+  await page.evaluate(() => {
+    localStorage.clear();
+    sessionStorage.clear();
+  });
+  await page.goto(path);
+}
+
+export function messageInput(page: Page): Locator {
+  return page.getByRole('textbox', { name: /type a message|message|prompt/i });
+}
+
+export function sendButton(page: Page): Locator {
+  return page.getByRole('button', { name: 'Send message' });
+}
+
+export function toolbarSelect(page: Page, label: string): Locator {
+  return page
+    .locator('.demo-shell__field')
+    .filter({ hasText: label })
+    .locator('select');
+}
+
+export async function selectToolbarOption(
+  page: Page,
+  label: string,
+  option: string
+): Promise<void> {
+  await toolbarSelect(page, label).selectOption({ label: option });
+}
+
+async function isVisible(locator: Locator): Promise<boolean> {
+  try {
+    return await locator.first().isVisible();
+  } catch {
+    return false;
+  }
+}
+
+export async function openChatDevtools(page: Page): Promise<void> {
+  const region = page.getByRole('region', { name: 'Chat devtools' });
+  const launcher = page.getByRole('button', { name: 'Open chat devtools' });
+
+  await expect
+    .poll(
+      async () => (await isVisible(region)) || (await isVisible(launcher)),
+      {
+        timeout: 5_000,
+      }
+    )
+    .toBe(true);
+
+  if (await isVisible(region)) return;
+
+  await launcher.first().click();
+  await expect(region).toBeVisible();
+}
+
+export async function closeChatDevtools(page: Page): Promise<void> {
+  const region = page.getByRole('region', { name: 'Chat devtools' });
+  const launcher = page.getByRole('button', { name: 'Open chat devtools' });
+
+  await expect
+    .poll(
+      async () => (await isVisible(region)) || (await isVisible(launcher)),
+      {
+        timeout: 5_000,
+      }
+    )
+    .toBe(true);
+
+  if (!(await isVisible(region))) return;
+
+  const close = page
+    .locator('chat-debug')
+    .getByRole('button', { name: 'Close' });
+  await close.first().click();
+  await expect(region).toHaveCount(0);
+  await expect(launcher.first()).toBeVisible();
+}
+
+export async function waitForFinalAssistant(page: Page): Promise<Locator> {
+  const finalizedAssistant = page
+    .locator('chat-message[data-role="assistant"][data-streaming="false"]')
+    .last();
+  await expect(finalizedAssistant).toBeAttached({ timeout: 45_000 });
+  await expect
+    .poll(
+      async () => ((await finalizedAssistant.innerText()) ?? '').trim().length,
+      {
+        timeout: 30_000,
+      }
+    )
+    .toBeGreaterThan(0);
+  return finalizedAssistant;
+}
+
 /**
  * Send a user prompt and wait for the assistant bubble to finalize.
  *
@@ -13,20 +137,14 @@ import { expect, type Locator, type Page } from '@playwright/test';
  * code fences, etc.) is the source of e2e flake — always wait on this
  * attribute before counting or text-matching downstream of the assistant turn.
  */
-export async function sendPromptAndWait(page: Page, prompt: string): Promise<Locator> {
-  await page.goto('/embed');
-  const input = page.getByRole('textbox', { name: /message|prompt/i });
+export async function sendPromptAndWait(
+  page: Page,
+  prompt: string
+): Promise<Locator> {
+  await openDemo(page, '/embed');
+  const input = messageInput(page);
   await input.fill(prompt);
-  await page.getByRole('button', { name: /send/i }).click();
+  await sendButton(page).click();
 
-  const finalizedAssistant = page
-    .locator('chat-message[data-role="assistant"][data-streaming="false"]')
-    .last();
-  await expect(finalizedAssistant).toBeAttached({ timeout: 45_000 });
-  await expect
-    .poll(async () => ((await finalizedAssistant.innerText()) ?? '').trim().length, {
-      timeout: 30_000,
-    })
-    .toBeGreaterThan(0);
-  return finalizedAssistant;
+  return waitForFinalAssistant(page);
 }
diff --git a/examples/chat/angular/e2e/visual-polish.spec.ts b/examples/chat/angular/e2e/visual-polish.spec.ts
new file mode 100644
index 000000000..3c1b87b23
--- /dev/null
+++ b/examples/chat/angular/e2e/visual-polish.spec.ts
@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import { openDemo } from './test-helpers';
+
+for (const width of [1440, 1024, 768, 480]) {
+  test(`visual polish: ${width}px viewport has no horizontal overflow`, async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width, height: 900 });
+    await openDemo(page, '/embed');
+
+    await expect(
+      page.getByRole('heading', { name: 'How can I help?' })
+    ).toBeVisible();
+    const overflow = await page.evaluate(() => ({
+      body: document.body.scrollWidth - document.documentElement.clientWidth,
+      html:
+        document.documentElement.scrollWidth -
+        document.documentElement.clientWidth,
+    }));
+    expect(Math.max(overflow.body, overflow.html)).toBeLessThanOrEqual(1);
+    await expect(
+      page.getByRole('button', { name: 'Open chat devtools' })
+    ).toBeVisible();
+  });
+}
diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.css b/examples/chat/angular/src/app/shell/demo-shell.component.css
index a3a48eced..d253c899b 100644
--- a/examples/chat/angular/src/app/shell/demo-shell.component.css
+++ b/examples/chat/angular/src/app/shell/demo-shell.component.css
@@ -27,28 +27,37 @@
   justify-content: center;
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
 }
-.demo-shell__hamburger:hover { background: #232730; }
+.demo-shell__hamburger:hover {
+  background: #232730;
+}
 
 @media (max-width: 767px) {
-  .demo-shell__hamburger { width: 44px; height: 44px; }
+  .demo-shell__hamburger {
+    width: 44px;
+    height: 44px;
+  }
 }
 
 .demo-shell__main {
   height: 100%;
-  transition: padding-left 200ms ease;
+  transition: padding-left 200ms ease, padding-right 200ms ease;
   padding-left: 0;
+  padding-right: var(--ngaf-chat-debug-claim-right, 0px);
+  padding-bottom: var(--ngaf-chat-debug-claim-bottom, 0px);
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
-.demo-shell__main[data-sidenav-mode="expanded"] {
+.demo-shell__main[data-sidenav-mode='expanded'] {
   padding-left: var(--ngaf-chat-sidenav-width-expanded, 280px);
 }
-.demo-shell__main[data-sidenav-mode="collapsed"] {
+.demo-shell__main[data-sidenav-mode='collapsed'] {
   padding-left: var(--ngaf-chat-sidenav-width-collapsed, 56px);
 }
 @media (max-width: 1023px) {
-  .demo-shell__main[data-sidenav-mode] { padding-left: 0; }
+  .demo-shell__main[data-sidenav-mode] {
+    padding-left: 0;
+  }
 }
 
 .demo-shell__toolbar {
@@ -58,7 +67,8 @@
   align-items: center;
   gap: 10px;
   padding: 8px 14px;
-  border-bottom: 1px solid color-mix(in srgb, var(--ngaf-chat-text, #e6e9ef) 12%, transparent);
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--ngaf-chat-text, #e6e9ef) 12%, transparent);
   background: color-mix(in srgb, var(--ngaf-chat-bg, #0f1115) 94%, transparent);
   color: var(--ngaf-chat-text, #e6e9ef);
   box-sizing: border-box;
@@ -71,8 +81,13 @@
   gap: 2px;
   padding: 2px;
   border-radius: 8px;
-  border: 1px solid color-mix(in srgb, var(--ngaf-chat-text, #e6e9ef) 14%, transparent);
-  background: color-mix(in srgb, var(--ngaf-chat-text, #e6e9ef) 4%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--ngaf-chat-text, #e6e9ef) 14%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--ngaf-chat-text, #e6e9ef) 4%,
+    transparent
+  );
   flex: 0 0 auto;
 }
 
@@ -110,7 +125,8 @@
 .demo-shell__field select {
   height: 30px;
   border-radius: 7px;
-  border: 1px solid color-mix(in srgb, var(--ngaf-chat-text, #e6e9ef) 14%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--ngaf-chat-text, #e6e9ef) 14%, transparent);
   background: var(--ngaf-chat-bg, #0f1115);
   padding: 0 26px 0 8px;
 }
@@ -118,7 +134,8 @@
 .demo-shell__toolbar-action {
   height: 30px;
   border-radius: 7px;
-  border: 1px solid color-mix(in srgb, var(--ngaf-chat-text, #e6e9ef) 18%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--ngaf-chat-text, #e6e9ef) 18%, transparent);
   background: transparent;
   padding: 0 10px;
   cursor: pointer;
@@ -127,7 +144,11 @@
 
 .demo-shell__toolbar-action:hover,
 .demo-shell__segmented-button:hover:not(.is-active) {
-  background: color-mix(in srgb, var(--ngaf-chat-text, #e6e9ef) 8%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--ngaf-chat-text, #e6e9ef) 8%,
+    transparent
+  );
 }
 
 @media (max-width: 767px) {
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 8ff2c1d8b..fd9290c45 100644
--- a/examples/chat/angular/src/app/shell/demo-shell.component.html
+++ b/examples/chat/angular/src/app/shell/demo-shell.component.html
@@ -1,12 +1,14 @@
 <div class="demo-shell">
   @if (sidenavMode() === 'drawer' && !drawerOpen()) {
-    <button
-      type="button"
-      class="demo-shell__hamburger"
-      aria-label="Open conversations"
-      [attr.aria-expanded]="drawerOpen()"
-      (click)="toggleSidenav()"
-    >☰</button>
+  <button
+    type="button"
+    class="demo-shell__hamburger"
+    aria-label="Open conversations"
+    [attr.aria-expanded]="drawerOpen()"
+    (click)="toggleSidenav()"
+  >
+    ☰
+  </button>
   }
 
   <chat-sidenav
@@ -35,25 +37,49 @@
       sidenavFooterRight
       type="button"
       class="demo-shell__theme-toggle"
-      [attr.aria-label]="colorScheme() === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'"
+      [attr.aria-label]="
+        colorScheme() === 'dark'
+          ? 'Switch to light theme'
+          : 'Switch to dark theme'
+      "
       (click)="onColorSchemeChange(colorScheme() === 'dark' ? 'light' : 'dark')"
     >
       @if (colorScheme() === 'dark') {
-        <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">
-          <circle cx="12" cy="12" r="5"/>
-          <line x1="12" y1="1" x2="12" y2="3"/>
-          <line x1="12" y1="21" x2="12" y2="23"/>
-          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
-          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-          <line x1="1" y1="12" x2="3" y2="12"/>
-          <line x1="21" y1="12" x2="23" y2="12"/>
-          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
-          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-        </svg>
+      <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"
+      >
+        <circle cx="12" cy="12" r="5" />
+        <line x1="12" y1="1" x2="12" y2="3" />
+        <line x1="12" y1="21" x2="12" y2="23" />
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+        <line x1="1" y1="12" x2="3" y2="12" />
+        <line x1="21" y1="12" x2="23" y2="12" />
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+      </svg>
       } @else {
-        <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">
-          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-        </svg>
+      <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"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      </svg>
       }
     </button>
   </chat-sidenav>
@@ -65,67 +91,106 @@
     <div class="demo-shell__toolbar" role="toolbar" aria-label="Demo controls">
       <div class="demo-shell__segmented" aria-label="Mode">
         @for (option of modeOptions; track option.value) {
-          <button
-            type="button"
-            class="demo-shell__segmented-button"
-            [class.is-active]="mode() === option.value"
-            [attr.aria-pressed]="mode() === option.value"
-            (click)="onModeChange(option.value)"
-          >{{ option.label }}</button>
+        <button
+          type="button"
+          class="demo-shell__segmented-button"
+          [class.is-active]="mode() === option.value"
+          [attr.aria-pressed]="mode() === option.value"
+          (click)="onModeChange(option.value)"
+        >
+          {{ option.label }}
+        </button>
         }
       </div>
 
       <label class="demo-shell__field">
         <span>Model</span>
-        <select [value]="model()" (change)="onModelChange($any($event.target).value)">
+        <select
+          [value]="model()"
+          (change)="onModelChange($any($event.target).value)"
+        >
           @for (option of modelOptions(); track option.value) {
-            <option [value]="option.value">{{ option.label }}</option>
+          <option [value]="option.value" [selected]="model() === option.value">
+            {{ option.label }}
+          </option>
           }
         </select>
       </label>
 
       <label class="demo-shell__field">
         <span>Effort</span>
-        <select [value]="effort()" (change)="onEffortChange($any($event.target).value)">
+        <select
+          [value]="effort()"
+          (change)="onEffortChange($any($event.target).value)"
+        >
           @for (option of effortOptions(); track option.value) {
-            <option [value]="option.value">{{ option.label }}</option>
+          <option [value]="option.value" [selected]="effort() === option.value">
+            {{ option.label }}
+          </option>
           }
         </select>
       </label>
 
       <label class="demo-shell__field">
         <span>Gen UI</span>
-        <select [value]="genUiMode()" (change)="onGenUiModeChange($any($event.target).value)">
+        <select
+          [value]="genUiMode()"
+          (change)="onGenUiModeChange($any($event.target).value)"
+        >
           @for (option of genUiOptions(); track option.value) {
-            <option [value]="option.value">{{ option.label }}</option>
+          <option
+            [value]="option.value"
+            [selected]="genUiMode() === option.value"
+          >
+            {{ option.label }}
+          </option>
           }
         </select>
       </label>
 
       <label class="demo-shell__field">
         <span>Theme</span>
-        <select [value]="theme()" (change)="onThemeChange($any($event.target).value)">
+        <select
+          [value]="theme()"
+          (change)="onThemeChange($any($event.target).value)"
+        >
           @for (option of themeOptions(); track option.value) {
-            <option [value]="option.value">{{ option.label }}</option>
+          <option [value]="option.value" [selected]="theme() === option.value">
+            {{ option.label }}
+          </option>
           }
         </select>
       </label>
 
-      <button type="button" class="demo-shell__toolbar-action" (click)="onNewConversation()">
+      <button
+        type="button"
+        class="demo-shell__toolbar-action"
+        (click)="onNewConversation()"
+      >
         New conversation
       </button>
     </div>
 
     <router-outlet />
     @if (agent.interrupt && agent.interrupt()) {
-      <div class="demo-shell__interrupt-panel" role="region" aria-label="Approval required">
-        <chat-interrupt-panel [agent]="agent" (action)="onInterruptAction($event)" />
-      </div>
-    }
-    @if (agent.subagents && agent.subagents().size > 0) {
-      <div class="demo-shell__subagents" role="region" aria-label="Active subagents">
-        <chat-subagents [agent]="agent" />
-      </div>
+    <div
+      class="demo-shell__interrupt-panel"
+      role="region"
+      aria-label="Approval required"
+    >
+      <chat-interrupt-panel
+        [agent]="agent"
+        (action)="onInterruptAction($event)"
+      />
+    </div>
+    } @if (agent.subagents && agent.subagents().size > 0) {
+    <div
+      class="demo-shell__subagents"
+      role="region"
+      aria-label="Active subagents"
+    >
+      <chat-subagents [agent]="agent" />
+    </div>
     }
   </div>
 
diff --git a/libs/chat/debug/src/lib/compositions/chat-debug/chat-debug.component.ts b/libs/chat/debug/src/lib/compositions/chat-debug/chat-debug.component.ts
index 343d96857..9e807fc04 100644
--- a/libs/chat/debug/src/lib/compositions/chat-debug/chat-debug.component.ts
+++ b/libs/chat/debug/src/lib/compositions/chat-debug/chat-debug.component.ts
@@ -6,9 +6,9 @@ import {
   effect,
   ElementRef,
   HostListener,
+  afterNextRender,
   inject,
   input,
-  OnInit,
   output,
   signal,
 } from '@angular/core';
@@ -27,7 +27,9 @@ interface TabEntry {
   readonly kind: 'builtin-timeline' | 'builtin-state';
 }
 
-function hasHistory(agent: DebugAgent | DebugAgentWithHistory): agent is DebugAgentWithHistory {
+function hasHistory(
+  agent: DebugAgent | DebugAgentWithHistory
+): agent is DebugAgentWithHistory {
   return typeof (agent as DebugAgentWithHistory).history === 'function';
 }
 
@@ -39,299 +41,403 @@ function hasHistory(agent: DebugAgent | DebugAgentWithHistory): agent is DebugAg
   styles: [
     CHAT_DEBUG_TOKENS,
     `
-    :host { display: contents; }
+      :host {
+        display: contents;
+      }
 
-    /* ── Status pill launcher ─────────────────────────────────────── */
-    .launcher {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 36px;
-      border-radius: var(--ngaf-chat-debug-radius-pill);
-      background: var(--ngaf-chat-debug-bg);
-      border: 1px solid var(--ngaf-chat-debug-border);
-      color: var(--ngaf-chat-debug-text);
-      cursor: pointer;
-      z-index: 990;
-      box-shadow: var(--ngaf-chat-debug-shadow-pill);
-      transition: background 120ms ease, border-color 120ms ease;
-      padding: 0;
-    }
-    .launcher:hover {
-      background: var(--ngaf-chat-debug-surface);
-      border-color: var(--ngaf-chat-debug-border-strong);
-    }
-    .launcher__dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--ngaf-chat-debug-success);
-      box-shadow: 0 0 8px color-mix(in srgb, var(--ngaf-chat-debug-success) 60%, transparent);
-    }
-    .launcher__dot--streaming {
-      background: var(--ngaf-chat-debug-accent);
-      box-shadow: 0 0 8px color-mix(in srgb, var(--ngaf-chat-debug-accent) 70%, transparent);
-      animation: chat-debug-pill-pulse 1.2s ease-in-out infinite;
-    }
-    @keyframes chat-debug-pill-pulse {
-      0%, 100% { opacity: 1; transform: scale(1); }
-      50%      { opacity: 0.6; transform: scale(0.85); }
-    }
+      /* ── Status pill launcher ─────────────────────────────────────── */
+      .launcher {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border-radius: var(--ngaf-chat-debug-radius-pill);
+        background: var(--ngaf-chat-debug-bg);
+        border: 1px solid var(--ngaf-chat-debug-border);
+        color: var(--ngaf-chat-debug-text);
+        cursor: pointer;
+        z-index: 990;
+        box-shadow: var(--ngaf-chat-debug-shadow-pill);
+        transition: background 120ms ease, border-color 120ms ease;
+        padding: 0;
+      }
+      .launcher:hover {
+        background: var(--ngaf-chat-debug-surface);
+        border-color: var(--ngaf-chat-debug-border-strong);
+      }
+      .launcher__dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--ngaf-chat-debug-success);
+        box-shadow: 0 0 8px
+          color-mix(in srgb, var(--ngaf-chat-debug-success) 60%, transparent);
+      }
+      .launcher__dot--streaming {
+        background: var(--ngaf-chat-debug-accent);
+        box-shadow: 0 0 8px
+          color-mix(in srgb, var(--ngaf-chat-debug-accent) 70%, transparent);
+        animation: chat-debug-pill-pulse 1.2s ease-in-out infinite;
+      }
+      @keyframes chat-debug-pill-pulse {
+        0%,
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+        50% {
+          opacity: 0.6;
+          transform: scale(0.85);
+        }
+      }
 
-    /* ── Docked panel ─────────────────────────────────────────────── */
-    .panel {
-      position: fixed;
-      background: var(--ngaf-chat-debug-bg);
-      color: var(--ngaf-chat-debug-text);
-      border: 1px solid var(--ngaf-chat-debug-border);
-      z-index: 991;
-      display: flex;
-      flex-direction: column;
-      box-shadow: var(--ngaf-chat-debug-shadow-panel);
-      animation: chat-debug-panel-enter 120ms ease;
-    }
-    .panel--right {
-      top: 0;
-      right: var(--ngaf-chat-sidebar-claim-right, 0);
-      bottom: 0;
-      width: var(--panel-size, 420px);
-      border-right: 0;
-      border-top-left-radius: var(--ngaf-chat-debug-radius-panel);
-      border-bottom-left-radius: var(--ngaf-chat-debug-radius-panel);
-      transform-origin: bottom right;
-      transition: right 200ms ease-out;
-    }
-    .panel--left {
-      top: 0; left: 0; bottom: 0;
-      width: var(--panel-size, 420px);
-      border-left: 0;
-      border-top-right-radius: var(--ngaf-chat-debug-radius-panel);
-      border-bottom-right-radius: var(--ngaf-chat-debug-radius-panel);
-      transform-origin: bottom left;
-    }
-    .panel--bottom {
-      left: 0;
-      right: var(--ngaf-chat-sidebar-claim-right, 0);
-      bottom: 0;
-      height: var(--panel-size, 40vh);
-      border-bottom: 0;
-      border-top-left-radius: var(--ngaf-chat-debug-radius-panel);
-      border-top-right-radius: var(--ngaf-chat-debug-radius-panel);
-      transform-origin: bottom right;
-      transition: right 200ms ease-out;
-    }
-    /* Mobile breakpoint: when an edge-claimer occupies the right and
+      /* ── Docked panel ─────────────────────────────────────────────── */
+      .panel {
+        position: fixed;
+        background: var(--ngaf-chat-debug-bg);
+        color: var(--ngaf-chat-debug-text);
+        border: 1px solid var(--ngaf-chat-debug-border);
+        z-index: 991;
+        display: flex;
+        flex-direction: column;
+        box-shadow: var(--ngaf-chat-debug-shadow-panel);
+        animation: chat-debug-panel-enter 120ms ease;
+      }
+      .panel--right {
+        top: 0;
+        right: var(--ngaf-chat-sidebar-claim-right, 0);
+        bottom: 0;
+        width: var(--panel-size, 420px);
+        border-right: 0;
+        border-top-left-radius: var(--ngaf-chat-debug-radius-panel);
+        border-bottom-left-radius: var(--ngaf-chat-debug-radius-panel);
+        transform-origin: bottom right;
+        transition: right 200ms ease-out;
+      }
+      .panel--left {
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: var(--panel-size, 420px);
+        border-left: 0;
+        border-top-right-radius: var(--ngaf-chat-debug-radius-panel);
+        border-bottom-right-radius: var(--ngaf-chat-debug-radius-panel);
+        transform-origin: bottom left;
+      }
+      .panel--bottom {
+        left: 0;
+        right: var(--ngaf-chat-sidebar-claim-right, 0);
+        bottom: 0;
+        height: var(--panel-size, 40vh);
+        border-bottom: 0;
+        border-top-left-radius: var(--ngaf-chat-debug-radius-panel);
+        border-top-right-radius: var(--ngaf-chat-debug-radius-panel);
+        transform-origin: bottom right;
+        transition: right 200ms ease-out;
+      }
+      /* Mobile breakpoint: when an edge-claimer occupies the right and
        the device is narrow, the bottom strip's effective width is
        ~zero. Explicitly hide it so it doesn't intercept pointer events
        on the sidebar drawer. The chat-debug launcher remains visible. */
-    @media (max-width: 767px) {
-      .panel--bottom { display: none; }
-    }
-    @keyframes chat-debug-panel-enter {
-      from { opacity: 0; transform: scale(0.96); }
-      to   { opacity: 1; transform: scale(1); }
-    }
+      @media (max-width: 767px) {
+        .panel--bottom {
+          display: none;
+        }
+      }
+      @keyframes chat-debug-panel-enter {
+        from {
+          opacity: 0;
+          transform: scale(0.96);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
 
-    .panel__header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--ngaf-chat-debug-border);
-      min-height: 44px;
-      box-sizing: border-box;
-    }
-    .panel__title {
-      margin: 0;
-      font-size: 13px;
-      font-weight: 600;
-      letter-spacing: -0.01em;
-      color: var(--ngaf-chat-debug-text);
-    }
-    .panel__actions { display: flex; align-items: center; gap: 4px; }
+      .panel__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--ngaf-chat-debug-border);
+        min-height: 44px;
+        box-sizing: border-box;
+      }
+      .panel__title {
+        margin: 0;
+        font-size: 13px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        color: var(--ngaf-chat-debug-text);
+      }
+      .panel__actions {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
 
-    .panel__dock-group {
-      display: inline-flex;
-      gap: 0;
-      padding: 2px;
-      background: var(--ngaf-chat-debug-bg-deep);
-      border: 1px solid var(--ngaf-chat-debug-border);
-      border-radius: 6px;
-    }
-    .panel__dock-btn {
-      appearance: none;
-      background: transparent;
-      border: 0;
-      border-radius: 4px;
-      width: 24px;
-      height: 22px;
-      padding: 0;
-      color: var(--ngaf-chat-debug-text-subtle);
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 120ms ease, color 120ms ease;
-    }
-    .panel__dock-btn:hover { color: var(--ngaf-chat-debug-text); }
-    .panel__dock-btn.is-active {
-      background: var(--ngaf-chat-debug-border);
-      color: var(--ngaf-chat-debug-text);
-    }
-    .panel__dock-btn svg { display: block; }
+      .panel__dock-group {
+        display: inline-flex;
+        gap: 0;
+        padding: 2px;
+        background: var(--ngaf-chat-debug-bg-deep);
+        border: 1px solid var(--ngaf-chat-debug-border);
+        border-radius: 6px;
+      }
+      .panel__dock-btn {
+        appearance: none;
+        background: transparent;
+        border: 0;
+        border-radius: 4px;
+        width: 24px;
+        height: 22px;
+        padding: 0;
+        color: var(--ngaf-chat-debug-text-subtle);
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 120ms ease, color 120ms ease;
+      }
+      .panel__dock-btn:hover {
+        color: var(--ngaf-chat-debug-text);
+      }
+      .panel__dock-btn.is-active {
+        background: var(--ngaf-chat-debug-border);
+        color: var(--ngaf-chat-debug-text);
+      }
+      .panel__dock-btn svg {
+        display: block;
+      }
 
-    .panel__close {
-      appearance: none;
-      background: transparent;
-      border: 0;
-      border-radius: 6px;
-      width: 26px;
-      height: 26px;
-      margin-left: 4px;
-      color: var(--ngaf-chat-debug-text-subtle);
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 120ms ease, color 120ms ease;
-    }
-    .panel__close:hover {
-      background: var(--ngaf-chat-debug-surface);
-      color: var(--ngaf-chat-debug-text);
-    }
+      .panel__close {
+        appearance: none;
+        background: transparent;
+        border: 0;
+        border-radius: 6px;
+        width: 26px;
+        height: 26px;
+        margin-left: 4px;
+        color: var(--ngaf-chat-debug-text-subtle);
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 120ms ease, color 120ms ease;
+      }
+      .panel__close:hover {
+        background: var(--ngaf-chat-debug-surface);
+        color: var(--ngaf-chat-debug-text);
+      }
 
-    .panel__controls {
-      border-bottom: 1px solid var(--ngaf-chat-debug-border);
-      overflow-y: auto;
-      max-height: 50%;
-      background: var(--ngaf-chat-debug-bg);
-    }
-    .panel__controls:empty { display: none; }
+      .panel__controls {
+        border-bottom: 1px solid var(--ngaf-chat-debug-border);
+        overflow-y: auto;
+        max-height: 50%;
+        background: var(--ngaf-chat-debug-bg);
+      }
+      .panel__controls:empty {
+        display: none;
+      }
 
-    .panel__tabs {
-      display: flex;
-      gap: 4px;
-      border-bottom: 1px solid var(--ngaf-chat-debug-border);
-      padding: 0 12px;
-      background: var(--ngaf-chat-debug-bg);
-    }
-    .panel__tab {
-      appearance: none;
-      background: transparent;
-      border: 0;
-      border-bottom: 2px solid transparent;
-      padding: 10px 8px;
-      font: inherit;
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--ngaf-chat-debug-text-muted);
-      cursor: pointer;
-      transition: color 120ms ease, border-color 120ms ease;
-      margin-bottom: -1px;
-    }
-    .panel__tab:hover { color: var(--ngaf-chat-debug-text); }
-    .panel__tab.is-active {
-      color: var(--ngaf-chat-debug-text);
-      border-bottom-color: var(--ngaf-chat-debug-accent);
-    }
+      .panel__tabs {
+        display: flex;
+        gap: 4px;
+        border-bottom: 1px solid var(--ngaf-chat-debug-border);
+        padding: 0 12px;
+        background: var(--ngaf-chat-debug-bg);
+      }
+      .panel__tab {
+        appearance: none;
+        background: transparent;
+        border: 0;
+        border-bottom: 2px solid transparent;
+        padding: 10px 8px;
+        font: inherit;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--ngaf-chat-debug-text-muted);
+        cursor: pointer;
+        transition: color 120ms ease, border-color 120ms ease;
+        margin-bottom: -1px;
+      }
+      .panel__tab:hover {
+        color: var(--ngaf-chat-debug-text);
+      }
+      .panel__tab.is-active {
+        color: var(--ngaf-chat-debug-text);
+        border-bottom-color: var(--ngaf-chat-debug-accent);
+      }
 
-    .panel__body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--ngaf-chat-debug-bg); }
+      .panel__body {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        background: var(--ngaf-chat-debug-bg);
+      }
     `,
   ],
   template: `
     @if (!open() && launcher() === 'floating') {
-      <button
-        type="button"
-        class="launcher"
-        title="Open chat debug"
-        aria-label="Open chat debug"
-        [attr.aria-pressed]="false"
-        (click)="setOpen(true)"
-      >
-        <span
-          class="launcher__dot"
-          [class.launcher__dot--streaming]="isStreaming()"
-          aria-hidden="true"
-        ></span>
-      </button>
-    } @else if (agent(); as currentAgent) {
-      <div
-        class="panel"
-        [class.panel--right]="dockState() === 'right'"
-        [class.panel--bottom]="dockState() === 'bottom'"
-        [class.panel--left]="dockState() === 'left'"
-        role="region"
-        aria-label="Chat debug"
-      >
-        <div class="panel__header">
-          <h3 class="panel__title">Chat Debug</h3>
-          <div class="panel__actions">
-            <div class="panel__dock-group" role="group" aria-label="Dock position">
-              <button type="button" class="panel__dock-btn"
-                [class.is-active]="dockState() === 'left'"
-                (click)="setDock('left')"
-                aria-label="Dock left">
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="2.5" width="11" height="9" rx="1.2"/><line x1="5.5" y1="2.5" x2="5.5" y2="11.5"/></svg>
-              </button>
-              <button type="button" class="panel__dock-btn"
-                [class.is-active]="dockState() === 'bottom'"
-                (click)="setDock('bottom')"
-                aria-label="Dock bottom">
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="2.5" width="11" height="9" rx="1.2"/><line x1="1.5" y1="8.5" x2="12.5" y2="8.5"/></svg>
-              </button>
-              <button type="button" class="panel__dock-btn"
-                [class.is-active]="dockState() === 'right'"
-                (click)="setDock('right')"
-                aria-label="Dock right">
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="2.5" width="11" height="9" rx="1.2"/><line x1="8.5" y1="2.5" x2="8.5" y2="11.5"/></svg>
-              </button>
-            </div>
-            <button type="button" class="panel__close" (click)="setOpen(false)" aria-label="Close">
-              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="3" x2="11" y2="11"/><line x1="11" y1="3" x2="3" y2="11"/></svg>
+    <button
+      type="button"
+      class="launcher"
+      title="Open chat devtools"
+      aria-label="Open chat devtools"
+      [attr.aria-pressed]="false"
+      (click)="setOpen(true)"
+    >
+      <span
+        class="launcher__dot"
+        [class.launcher__dot--streaming]="isStreaming()"
+        aria-hidden="true"
+      ></span>
+    </button>
+    } @else if (open() && agent(); as currentAgent) {
+    <div
+      class="panel"
+      [class.panel--right]="dockState() === 'right'"
+      [class.panel--bottom]="dockState() === 'bottom'"
+      [class.panel--left]="dockState() === 'left'"
+      role="region"
+      aria-label="Chat devtools"
+    >
+      <div class="panel__header">
+        <h3 class="panel__title">Chat Devtools</h3>
+        <div class="panel__actions">
+          <div
+            class="panel__dock-group"
+            role="group"
+            aria-label="Dock position"
+          >
+            <button
+              type="button"
+              class="panel__dock-btn"
+              [class.is-active]="dockState() === 'left'"
+              (click)="setDock('left')"
+              aria-label="Dock left"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="1.5" y="2.5" width="11" height="9" rx="1.2" />
+                <line x1="5.5" y1="2.5" x2="5.5" y2="11.5" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="panel__dock-btn"
+              [class.is-active]="dockState() === 'bottom'"
+              (click)="setDock('bottom')"
+              aria-label="Dock bottom"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="1.5" y="2.5" width="11" height="9" rx="1.2" />
+                <line x1="1.5" y1="8.5" x2="12.5" y2="8.5" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="panel__dock-btn"
+              [class.is-active]="dockState() === 'right'"
+              (click)="setDock('right')"
+              aria-label="Dock right"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="1.5" y="2.5" width="11" height="9" rx="1.2" />
+                <line x1="8.5" y1="2.5" x2="8.5" y2="11.5" />
+              </svg>
             </button>
           </div>
+          <button
+            type="button"
+            class="panel__close"
+            (click)="setOpen(false)"
+            aria-label="Close"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="3" y1="3" x2="11" y2="11" />
+              <line x1="11" y1="3" x2="3" y2="11" />
+            </svg>
+          </button>
         </div>
+      </div>
 
-        @if (tabs().length > 1) {
-          <div class="panel__tabs" role="tablist">
-            @for (tab of tabs(); track tab.id) {
-              <button
-                type="button"
-                role="tab"
-                class="panel__tab"
-                [class.is-active]="tab.id === activeTabId()"
-                [attr.aria-selected]="tab.id === activeTabId()"
-                (click)="setActiveTab(tab.id)"
-              >{{ tab.label }}</button>
-            }
-          </div>
+      @if (tabs().length > 1) {
+      <div class="panel__tabs" role="tablist">
+        @for (tab of tabs(); track tab.id) {
+        <button
+          type="button"
+          role="tab"
+          class="panel__tab"
+          [class.is-active]="tab.id === activeTabId()"
+          [attr.aria-selected]="tab.id === activeTabId()"
+          (click)="setActiveTab(tab.id)"
+        >
+          {{ tab.label }}
+        </button>
         }
+      </div>
+      }
 
-        <div class="panel__body">
-          @switch (activeTab()?.kind) {
-            @case ('builtin-timeline') {
-              @if (historyAgent(); as history) {
-                <chat-debug-timeline-inspector
-                  [agent]="history"
-                  (replayRequested)="replayRequested.emit($event)"
-                  (forkRequested)="forkRequested.emit($event)"
-                />
-              }
-            }
-            @case ('builtin-state') {
-              <chat-debug-state-tab [agent]="currentAgent" />
-            }
-          }
-        </div>
+      <div class="panel__body">
+        @switch (activeTab()?.kind) { @case ('builtin-timeline') { @if
+        (historyAgent(); as history) {
+        <chat-debug-timeline-inspector
+          [agent]="history"
+          (replayRequested)="replayRequested.emit($event)"
+          (forkRequested)="forkRequested.emit($event)"
+        />
+        } } @case ('builtin-state') {
+        <chat-debug-state-tab [agent]="currentAgent" />
+        } }
       </div>
+    </div>
     }
   `,
 })
-export class ChatDebugComponent implements OnInit {
+export class ChatDebugComponent {
   readonly agent = input<DebugAgent | DebugAgentWithHistory | null>(null);
   readonly dock = input<DockPosition>('right');
   readonly defaultOpen = input<boolean>(false);
@@ -354,6 +460,7 @@ export class ChatDebugComponent implements OnInit {
     const agent = this.agent();
     return agent && hasHistory(agent) ? agent : null;
   });
+  private readonly hydrated = signal(false);
 
   /** Reads `agent.status()` reactively for the launcher dot. */
   protected readonly isStreaming = computed(() => {
@@ -365,14 +472,20 @@ export class ChatDebugComponent implements OnInit {
     if (!this.agent()) return [];
     return [
       ...(this.historyAgent()
-        ? [{ id: 'timeline', label: 'Timeline', kind: 'builtin-timeline' } satisfies TabEntry]
+        ? [
+            {
+              id: 'timeline',
+              label: 'Timeline',
+              kind: 'builtin-timeline',
+            } satisfies TabEntry,
+          ]
         : []),
       { id: 'state', label: 'State', kind: 'builtin-state' },
     ];
   });
 
   protected readonly activeTab = computed(() =>
-    this.tabs().find((t) => t.id === this.activeTabId()),
+    this.tabs().find((t) => t.id === this.activeTabId())
   );
 
   private readonly hostEl: ElementRef<HTMLElement> = inject(ElementRef);
@@ -390,9 +503,27 @@ export class ChatDebugComponent implements OnInit {
       this.activeTabId.set(tabs[0].id);
     });
 
+    // Restore once after Angular has assigned bound input values. Doing this
+    // synchronously in the constructor reads input defaults, then immediately
+    // writes those defaults to storage and masks a consumer-provided
+    // defaultOpen=true on first load.
+    afterNextRender(() => {
+      const restore = createPersistence(this.storageKey());
+      const persistedOpen = restore.read<boolean>('open');
+      if (!this.open()) {
+        this.open.set(persistedOpen ?? this.defaultOpen());
+      }
+      const persistedDock = restore.read<DockPosition>('dock');
+      this.dockState.set(persistedDock ?? this.dock());
+      const persistedTab = restore.read<string>('tab');
+      if (persistedTab) this.activeTabId.set(persistedTab);
+      this.hydrated.set(true);
+    });
+
     // Write-through effect — reads each writable signal so subsequent
     // changes trigger a fresh run that writes them all to storage.
     effect(() => {
+      if (!this.hydrated()) return;
       const p = createPersistence(this.storageKey());
       p.write('open', this.open());
       p.write('dock', this.dockState());
@@ -426,18 +557,6 @@ export class ChatDebugComponent implements OnInit {
     });
   }
 
-  ngOnInit(): void {
-    // Restore once after inputs are initialized; rebinding storageKey/defaults
-    // later is intentionally not supported.
-    const restore = createPersistence(this.storageKey());
-    const persistedOpen = restore.read<boolean>('open');
-    this.open.set(persistedOpen ?? this.defaultOpen());
-    const persistedDock = restore.read<DockPosition>('dock');
-    this.dockState.set(persistedDock ?? this.dock());
-    const persistedTab = restore.read<string>('tab');
-    if (persistedTab) this.activeTabId.set(persistedTab);
-  }
-
   setOpen(value: boolean): void {
     this.open.set(value);
     this.openChange.emit(value);
diff --git a/libs/chat/src/lib/compositions/chat-debug-secondary.spec.ts b/libs/chat/src/lib/compositions/chat-debug-secondary.spec.ts
index 588823e0c..6a85d5f19 100644
--- a/libs/chat/src/lib/compositions/chat-debug-secondary.spec.ts
+++ b/libs/chat/src/lib/compositions/chat-debug-secondary.spec.ts
@@ -30,6 +30,6 @@ describe('chat debug secondary entrypoint', () => {
 
     const fixture = TestBed.createComponent(Host);
     fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('[aria-label="Chat debug"]')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('[aria-label="Chat devtools"]')).not.toBeNull();
   });
 });
diff --git a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
index a791b9fc2..2d17169c3 100644
--- a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
+++ b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
@@ -1,6 +1,15 @@
 // libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
 // SPDX-License-Identifier: MIT
-import { Component, ChangeDetectionStrategy, effect, input, model, output } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  DOCUMENT,
+  effect,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
 import type { Agent } from '../../agent';
 import type { ViewRegistry } from '@ngaf/render';
 import { ChatComponent } from '../chat/chat.component';
@@ -99,10 +108,14 @@ export class ChatSidebarComponent {
   /** Two-way bound current model value. */
   readonly selectedModel = model<string>('');
   readonly open = model(false);
+  /** Close the sidebar on Escape (default true). */
+  readonly closeOnEscape = input<boolean>(true);
   readonly pushContent = input<boolean>(false);
   readonly replayRequested = output<string>();
   readonly forkRequested = output<string>();
 
+  private readonly document = inject(DOCUMENT);
+
   constructor() {
     // Inject chat lib root CSS custom properties — see ChatComponent
     // for the full rationale. Idempotent + lifecycle-guaranteed.
@@ -118,6 +131,18 @@ export class ChatSidebarComponent {
         delete html.dataset['ngafChatSidebar'];
       }
     });
+    effect((onCleanup) => {
+      const closeOnEscape = this.closeOnEscape();
+      const win = this.document.defaultView;
+      if (!win) return;
+      const handler = (e: KeyboardEvent): void => {
+        if (closeOnEscape && this.open() && e.key === 'Escape') {
+          this.closeWindow();
+        }
+      };
+      win.addEventListener('keydown', handler);
+      onCleanup(() => win.removeEventListener('keydown', handler));
+    });
   }
 
   toggle(): void { this.open.update((v) => !v); }
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 8a0375168..bb1e0f594 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
@@ -6,35 +6,48 @@ import { describe, expect, it } from 'vitest';
 import { ChatSidenavComponent } from './chat-sidenav.component';
 import { mockAgent } from '../../testing/mock-agent';
 
-function render(opts: {
-  mode?: 'expanded' | 'collapsed' | 'drawer';
-  open?: boolean;
-  threads?: unknown[] | null;
-  agent?: ReturnType<typeof mockAgent> | null;
-  debug?: boolean;
-} = {}) {
+function render(
+  opts: {
+    mode?: 'expanded' | 'collapsed' | 'drawer';
+    open?: boolean;
+    threads?: unknown[] | null;
+    agent?: ReturnType<typeof mockAgent> | null;
+    debug?: boolean;
+  } = {}
+) {
   const fixture = TestBed.createComponent(ChatSidenavComponent);
   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);
-  if (opts.agent !== undefined) fixture.componentRef.setInput('agent', opts.agent);
-  if (opts.debug !== undefined) fixture.componentRef.setInput('debug', opts.debug);
+  if (opts.threads !== undefined)
+    fixture.componentRef.setInput('threads', opts.threads);
+  if (opts.agent !== undefined)
+    fixture.componentRef.setInput('agent', opts.agent);
+  if (opts.debug !== undefined)
+    fixture.componentRef.setInput('debug', opts.debug);
   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');
+    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;
+    const btn = fixture.nativeElement.querySelector(
+      '.chat-sidenav__action--new'
+    ) as HTMLButtonElement;
     btn.click();
     expect(emits).toBe(1);
   });
@@ -43,7 +56,9 @@ describe('ChatSidenavComponent', () => {
     const fixture = render();
     let emits = 0;
     fixture.componentInstance.searchOpened.subscribe(() => emits++);
-    const btn = fixture.nativeElement.querySelector('.chat-sidenav__action--search') as HTMLButtonElement;
+    const btn = fixture.nativeElement.querySelector(
+      '.chat-sidenav__action--search'
+    ) as HTMLButtonElement;
     btn.click();
     expect(emits).toBe(1);
   });
@@ -52,7 +67,9 @@ describe('ChatSidenavComponent', () => {
     const fixture = render();
     let emits = 0;
     fixture.componentInstance.searchOpened.subscribe(() => emits++);
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'k', metaKey: true })
+    );
     expect(emits).toBe(1);
   });
 
@@ -60,7 +77,9 @@ describe('ChatSidenavComponent', () => {
     const fixture = render();
     let emits = 0;
     fixture.componentInstance.searchOpened.subscribe(() => emits++);
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }));
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'k', ctrlKey: true })
+    );
     expect(emits).toBe(1);
   });
 
@@ -71,14 +90,18 @@ describe('ChatSidenavComponent', () => {
     input.focus();
     let emits = 0;
     fixture.componentInstance.searchOpened.subscribe(() => emits++);
-    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, bubbles: true }));
+    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();
+    expect(
+      fixture.nativeElement.querySelector('chat-thread-list')
+    ).not.toBeNull();
   });
 
   it('suppresses threads section when threads input is null', () => {
@@ -89,40 +112,57 @@ describe('ChatSidenavComponent', () => {
   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;
+    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();
+    expect(
+      fixture.nativeElement.querySelector('.chat-sidenav__scrim')
+    ).toBeNull();
   });
 
   it('archivedThreads=null renders no archived heading', () => {
     const fixture = render({ threads: [{ id: 't1' }] });
-    expect(fixture.nativeElement.querySelector('.chat-sidenav__archived')).toBeNull();
+    expect(
+      fixture.nativeElement.querySelector('.chat-sidenav__archived')
+    ).toBeNull();
   });
 
   it('archivedThreads=[] renders the heading; clicking expands to show empty state', () => {
     const fixture = render({ threads: [{ id: 't1' }] });
     fixture.componentRef.setInput('archivedThreads', []);
     fixture.detectChanges();
-    const heading = fixture.nativeElement.querySelector('.chat-sidenav__archived-heading') as HTMLButtonElement;
+    const heading = fixture.nativeElement.querySelector(
+      '.chat-sidenav__archived-heading'
+    ) as HTMLButtonElement;
     expect(heading).not.toBeNull();
     expect(heading.getAttribute('aria-expanded')).toBe('false');
     heading.click();
     fixture.detectChanges();
     expect(heading.getAttribute('aria-expanded')).toBe('true');
-    expect(fixture.nativeElement.querySelector('.chat-sidenav__archived-empty')).not.toBeNull();
+    expect(
+      fixture.nativeElement.querySelector('.chat-sidenav__archived-empty')
+    ).not.toBeNull();
   });
 
   it('archivedThreads=[t1,t2] renders the heading; expanding shows a chat-thread-list with mode="archived"', () => {
     const fixture = render({ threads: [{ id: 't1' }] });
-    fixture.componentRef.setInput('archivedThreads', [{ id: 'a1', title: 'A1' }, { id: 'a2', title: 'A2' }]);
+    fixture.componentRef.setInput('archivedThreads', [
+      { id: 'a1', title: 'A1' },
+      { id: 'a2', title: 'A2' },
+    ]);
     fixture.detectChanges();
-    const heading = fixture.nativeElement.querySelector('.chat-sidenav__archived-heading') as HTMLButtonElement;
+    const heading = fixture.nativeElement.querySelector(
+      '.chat-sidenav__archived-heading'
+    ) as HTMLButtonElement;
     heading.click();
     fixture.detectChanges();
     const lists = fixture.nativeElement.querySelectorAll('chat-thread-list');
@@ -132,60 +172,90 @@ describe('ChatSidenavComponent', () => {
 
   it('renders the collapse chevron in expanded mode with "Collapse sidenav" label', () => {
     const fixture = render({ mode: 'expanded' });
-    const btn = fixture.nativeElement.querySelector('.chat-sidenav__toggle') as HTMLButtonElement;
+    const btn = fixture.nativeElement.querySelector(
+      '.chat-sidenav__toggle'
+    ) as HTMLButtonElement;
     expect(btn).not.toBeNull();
     expect(btn.getAttribute('aria-label')).toBe('Collapse sidenav');
   });
 
   it('renders the expand chevron in collapsed mode with "Expand sidenav" label', () => {
     const fixture = render({ mode: 'collapsed' });
-    const btn = fixture.nativeElement.querySelector('.chat-sidenav__toggle') as HTMLButtonElement;
+    const btn = fixture.nativeElement.querySelector(
+      '.chat-sidenav__toggle'
+    ) as HTMLButtonElement;
     expect(btn).not.toBeNull();
     expect(btn.getAttribute('aria-label')).toBe('Expand sidenav');
   });
 
   it('omits the collapse chevron in drawer mode', () => {
     const fixture = render({ mode: 'drawer' });
-    expect(fixture.nativeElement.querySelector('.chat-sidenav__toggle')).toBeNull();
+    expect(
+      fixture.nativeElement.querySelector('.chat-sidenav__toggle')
+    ).toBeNull();
   });
 
   it('renders a topbar containing the new-chat button in expanded mode', () => {
     const fixture = render({ mode: 'expanded' });
-    const topbar = fixture.nativeElement.querySelector('.chat-sidenav__topbar') as HTMLElement;
+    const topbar = fixture.nativeElement.querySelector(
+      '.chat-sidenav__topbar'
+    ) as HTMLElement;
     expect(topbar).not.toBeNull();
     expect(topbar.querySelector('.chat-sidenav__action--new')).not.toBeNull();
   });
 
   it('search button is the only action in .chat-sidenav__actions row', () => {
     const fixture = render({ mode: 'expanded' });
-    const actions = fixture.nativeElement.querySelector('.chat-sidenav__actions') as HTMLElement;
+    const actions = fixture.nativeElement.querySelector(
+      '.chat-sidenav__actions'
+    ) as HTMLElement;
     const buttons = actions.querySelectorAll('button');
     expect(buttons.length).toBe(1);
-    expect(buttons[0].classList.contains('chat-sidenav__action--search')).toBe(true);
+    expect(buttons[0].classList.contains('chat-sidenav__action--search')).toBe(
+      true
+    );
   });
 
   it('drawer mode: renders a close button in the topbar that emits openChange(false)', () => {
     const fixture = render({ mode: 'drawer', open: true });
-    const topbar = fixture.nativeElement.querySelector('.chat-sidenav__topbar') as HTMLElement;
-    const close = topbar.querySelector('.chat-sidenav__action--close') as HTMLButtonElement;
+    const topbar = fixture.nativeElement.querySelector(
+      '.chat-sidenav__topbar'
+    ) as HTMLElement;
+    const close = topbar.querySelector(
+      '.chat-sidenav__action--close'
+    ) as HTMLButtonElement;
     expect(close).not.toBeNull();
     expect(close.getAttribute('aria-label')).toBe('Close conversations');
     let lastOpen: boolean | undefined;
-    fixture.componentInstance.openChange.subscribe((v: boolean) => { lastOpen = v; });
+    fixture.componentInstance.openChange.subscribe((v: boolean) => {
+      lastOpen = v;
+    });
     close.click();
     expect(lastOpen).toBe(false);
   });
 
   it('non-drawer modes: no close button is rendered', () => {
-    expect(render({ mode: 'expanded' }).nativeElement.querySelector('.chat-sidenav__action--close')).toBeNull();
-    expect(render({ mode: 'collapsed' }).nativeElement.querySelector('.chat-sidenav__action--close')).toBeNull();
+    expect(
+      render({ mode: 'expanded' }).nativeElement.querySelector(
+        '.chat-sidenav__action--close'
+      )
+    ).toBeNull();
+    expect(
+      render({ mode: 'collapsed' }).nativeElement.querySelector(
+        '.chat-sidenav__action--close'
+      )
+    ).toBeNull();
   });
 
   it('clicking the chevron in expanded mode emits modeChange="collapsed"', () => {
     const fixture = render({ mode: 'expanded' });
     let last: string | undefined;
-    fixture.componentInstance.modeChange.subscribe((m: string) => { last = m; });
-    const btn = fixture.nativeElement.querySelector('.chat-sidenav__toggle') as HTMLButtonElement;
+    fixture.componentInstance.modeChange.subscribe((m: string) => {
+      last = m;
+    });
+    const btn = fixture.nativeElement.querySelector(
+      '.chat-sidenav__toggle'
+    ) as HTMLButtonElement;
     btn.click();
     expect(last).toBe('collapsed');
   });
@@ -193,8 +263,12 @@ describe('ChatSidenavComponent', () => {
   it('clicking the chevron in collapsed mode emits modeChange="expanded"', () => {
     const fixture = render({ mode: 'collapsed' });
     let last: string | undefined;
-    fixture.componentInstance.modeChange.subscribe((m: string) => { last = m; });
-    const btn = fixture.nativeElement.querySelector('.chat-sidenav__toggle') as HTMLButtonElement;
+    fixture.componentInstance.modeChange.subscribe((m: string) => {
+      last = m;
+    });
+    const btn = fixture.nativeElement.querySelector(
+      '.chat-sidenav__toggle'
+    ) as HTMLButtonElement;
     btn.click();
     expect(last).toBe('expanded');
   });
@@ -202,24 +276,36 @@ describe('ChatSidenavComponent', () => {
   it('Cmd+B in expanded mode emits modeChange="collapsed"', () => {
     const fixture = render({ mode: 'expanded' });
     let last: string | undefined;
-    fixture.componentInstance.modeChange.subscribe((m: string) => { last = m; });
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'b', metaKey: true }));
+    fixture.componentInstance.modeChange.subscribe((m: string) => {
+      last = m;
+    });
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'b', metaKey: true })
+    );
     expect(last).toBe('collapsed');
   });
 
   it('Cmd+B in collapsed mode emits modeChange="expanded"', () => {
     const fixture = render({ mode: 'collapsed' });
     let last: string | undefined;
-    fixture.componentInstance.modeChange.subscribe((m: string) => { last = m; });
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'b', metaKey: true }));
+    fixture.componentInstance.modeChange.subscribe((m: string) => {
+      last = m;
+    });
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'b', metaKey: true })
+    );
     expect(last).toBe('expanded');
   });
 
   it('Cmd+B is a no-op in drawer mode', () => {
     const fixture = render({ mode: 'drawer' });
     let emits = 0;
-    fixture.componentInstance.modeChange.subscribe(() => { emits++; });
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'b', metaKey: true }));
+    fixture.componentInstance.modeChange.subscribe(() => {
+      emits++;
+    });
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'b', metaKey: true })
+    );
     expect(emits).toBe(0);
   });
 
@@ -227,7 +313,9 @@ describe('ChatSidenavComponent', () => {
     const fixture = render({ threads: [{ id: 't1' }] });
     fixture.componentRef.setInput('archivedThreads', []);
     fixture.detectChanges();
-    const heading = fixture.nativeElement.querySelector('.chat-sidenav__archived-heading') as HTMLButtonElement;
+    const heading = fixture.nativeElement.querySelector(
+      '.chat-sidenav__archived-heading'
+    ) as HTMLButtonElement;
     expect(heading.getAttribute('aria-expanded')).toBe('false');
     heading.click();
     fixture.detectChanges();
@@ -239,24 +327,38 @@ describe('ChatSidenavComponent', () => {
 
   it('projects=null renders no Projects section', () => {
     const fixture = render({ threads: [{ id: 't1' }] });
-    expect(fixture.nativeElement.querySelector('.chat-sidenav__projects')).toBeNull();
+    expect(
+      fixture.nativeElement.querySelector('.chat-sidenav__projects')
+    ).toBeNull();
   });
 
   it('projects=[p1,p2] renders the Projects section with two rows', () => {
     const fixture = render({ threads: [{ id: 't1' }] });
-    fixture.componentRef.setInput('projects', [{ id: 'p1', name: 'Work' }, { id: 'p2', name: 'Personal' }]);
+    fixture.componentRef.setInput('projects', [
+      { id: 'p1', name: 'Work' },
+      { id: 'p2', name: 'Personal' },
+    ]);
     fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('.chat-sidenav__projects')).not.toBeNull();
-    const rows = fixture.nativeElement.querySelectorAll('.chat-project-list__item');
+    expect(
+      fixture.nativeElement.querySelector('.chat-sidenav__projects')
+    ).not.toBeNull();
+    const rows = fixture.nativeElement.querySelectorAll(
+      '.chat-project-list__item'
+    );
     expect(rows.length).toBe(2);
   });
 
   it('selectedProjectId highlights the matching project row', () => {
     const fixture = render({ threads: [{ id: 't1' }] });
-    fixture.componentRef.setInput('projects', [{ id: 'p1', name: 'Work' }, { id: 'p2', name: 'Personal' }]);
+    fixture.componentRef.setInput('projects', [
+      { id: 'p1', name: 'Work' },
+      { id: 'p2', name: 'Personal' },
+    ]);
     fixture.componentRef.setInput('selectedProjectId', 'p2');
     fixture.detectChanges();
-    const rows = fixture.nativeElement.querySelectorAll('.chat-project-list__item');
+    const rows = fixture.nativeElement.querySelectorAll(
+      '.chat-project-list__item'
+    );
     expect(rows[0].getAttribute('data-active')).toBeNull();
     expect(rows[1].getAttribute('data-active')).toBe('true');
   });
@@ -264,11 +366,17 @@ describe('ChatSidenavComponent', () => {
   it('projectActions.create shows "+ New project" and emits newProjectRequested on click', () => {
     const fixture = render({ threads: [{ id: 't1' }] });
     fixture.componentRef.setInput('projects', []);
-    fixture.componentRef.setInput('projectActions', { create: async () => ({ id: 'x' }) });
+    fixture.componentRef.setInput('projectActions', {
+      create: async () => ({ id: 'x' }),
+    });
     fixture.detectChanges();
     let emits = 0;
-    fixture.componentInstance.newProjectRequested.subscribe(() => { emits++; });
-    const btn = fixture.nativeElement.querySelector('.chat-project-list__new') as HTMLButtonElement;
+    fixture.componentInstance.newProjectRequested.subscribe(() => {
+      emits++;
+    });
+    const btn = fixture.nativeElement.querySelector(
+      '.chat-project-list__new'
+    ) as HTMLButtonElement;
     expect(btn).not.toBeNull();
     btn.click();
     fixture.detectChanges();
@@ -281,39 +389,54 @@ describe('ChatSidenavComponent — footer slots', () => {
     @Component({
       standalone: true,
       imports: [ChatSidenavComponent],
-      template: `<chat-sidenav><span sidenavFooterLeft data-test="left-slot">L</span></chat-sidenav>`,
+      template: `<chat-sidenav
+        ><span sidenavFooterLeft data-test="left-slot">L</span></chat-sidenav
+      >`,
     })
     class HostLeft {}
     TestBed.configureTestingModule({});
     const fx = TestBed.createComponent(HostLeft);
     fx.detectChanges();
-    const leftContainer = fx.nativeElement.querySelector('.chat-sidenav__footer-left');
+    const leftContainer = fx.nativeElement.querySelector(
+      '.chat-sidenav__footer-left'
+    );
     expect(leftContainer).toBeTruthy();
-    expect(leftContainer.querySelector('[data-test="left-slot"]')?.textContent).toBe('L');
+    expect(
+      leftContainer.querySelector('[data-test="left-slot"]')?.textContent
+    ).toBe('L');
   });
 
   it('renders [sidenavFooterRight] projected content in the right footer position', () => {
     @Component({
       standalone: true,
       imports: [ChatSidenavComponent],
-      template: `<chat-sidenav><span sidenavFooterRight data-test="right-slot">R</span></chat-sidenav>`,
+      template: `<chat-sidenav
+        ><span sidenavFooterRight data-test="right-slot">R</span></chat-sidenav
+      >`,
     })
     class HostRight {}
     TestBed.configureTestingModule({});
     const fx = TestBed.createComponent(HostRight);
     fx.detectChanges();
-    const rightContainer = fx.nativeElement.querySelector('.chat-sidenav__footer-right');
+    const rightContainer = fx.nativeElement.querySelector(
+      '.chat-sidenav__footer-right'
+    );
     expect(rightContainer).toBeTruthy();
-    expect(rightContainer.querySelector('[data-test="right-slot"]')?.textContent).toBe('R');
+    expect(
+      rightContainer.querySelector('[data-test="right-slot"]')?.textContent
+    ).toBe('R');
   });
 
   it('renders the collapse toggle as the last child of the right footer container', () => {
     TestBed.configureTestingModule({ imports: [ChatSidenavComponent] });
     const fx = TestBed.createComponent(ChatSidenavComponent);
     fx.detectChanges();
-    const rightContainer = fx.nativeElement.querySelector('.chat-sidenav__footer-right');
+    const rightContainer = fx.nativeElement.querySelector(
+      '.chat-sidenav__footer-right'
+    );
     expect(rightContainer).toBeTruthy();
-    const lastChild = rightContainer.children[rightContainer.children.length - 1];
+    const lastChild =
+      rightContainer.children[rightContainer.children.length - 1];
     expect(lastChild?.classList?.contains('chat-sidenav__toggle')).toBe(true);
   });
 
@@ -322,7 +445,9 @@ describe('ChatSidenavComponent — footer slots', () => {
     const fx = TestBed.createComponent(ChatSidenavComponent);
     fx.detectChanges();
     const topbar = fx.nativeElement.querySelector('.chat-sidenav__topbar');
-    expect(topbar?.querySelector('.chat-sidenav__action--collapse')).toBeFalsy();
+    expect(
+      topbar?.querySelector('.chat-sidenav__action--collapse')
+    ).toBeFalsy();
   });
 
   it('clicking the new footer toggle emits modeChange', () => {
@@ -331,7 +456,9 @@ describe('ChatSidenavComponent — footer slots', () => {
     fx.detectChanges();
     let captured: string | null = null;
     fx.componentInstance.modeChange.subscribe((m) => (captured = m));
-    const toggle = fx.nativeElement.querySelector('.chat-sidenav__toggle') as HTMLButtonElement;
+    const toggle = fx.nativeElement.querySelector(
+      '.chat-sidenav__toggle'
+    ) as HTMLButtonElement;
     toggle.click();
     expect(captured).toBe('collapsed');
   });
@@ -340,25 +467,33 @@ describe('ChatSidenavComponent — footer slots', () => {
 describe('ChatSidenavComponent — debug footer affordance', () => {
   it('omits the debug footer button when no agent is provided', () => {
     const fixture = render();
-    expect(fixture.nativeElement.querySelector('.chat-sidenav__debug')).toBeNull();
+    expect(
+      fixture.nativeElement.querySelector('.chat-sidenav__debug')
+    ).toBeNull();
   });
 
   it('omits the debug footer button when debug is disabled', () => {
     const fixture = render({ agent: mockAgent(), debug: false });
-    expect(fixture.nativeElement.querySelector('.chat-sidenav__debug')).toBeNull();
+    expect(
+      fixture.nativeElement.querySelector('.chat-sidenav__debug')
+    ).toBeNull();
   });
 
   it('renders a labeled debug button in expanded mode when an agent is provided', () => {
     const fixture = render({ mode: 'expanded', agent: mockAgent() });
-    const button = fixture.nativeElement.querySelector('.chat-sidenav__debug') as HTMLButtonElement | null;
+    const button = fixture.nativeElement.querySelector(
+      '.chat-sidenav__debug'
+    ) as HTMLButtonElement | null;
     expect(button).not.toBeNull();
-    expect(button?.getAttribute('aria-label')).toBe('Open chat debug');
-    expect(button?.textContent?.trim()).toBe('Debug');
+    expect(button?.getAttribute('aria-label')).toBe('Open chat devtools');
+    expect(button?.textContent?.trim()).toBe('Devtools');
   });
 
   it('renders the debug button without visible label in collapsed mode', () => {
     const fixture = render({ mode: 'collapsed', agent: mockAgent() });
-    const button = fixture.nativeElement.querySelector('.chat-sidenav__debug') as HTMLButtonElement | null;
+    const button = fixture.nativeElement.querySelector(
+      '.chat-sidenav__debug'
+    ) as HTMLButtonElement | null;
     expect(button).not.toBeNull();
     expect(button?.textContent?.trim()).toBe('');
   });
@@ -366,16 +501,24 @@ describe('ChatSidenavComponent — debug footer affordance', () => {
   it('marks the debug status dot as streaming while the agent is running', () => {
     const agent = mockAgent({ status: 'running' });
     const fixture = render({ agent });
-    expect(fixture.nativeElement.querySelector('.chat-sidenav__debug-dot--streaming')).not.toBeNull();
+    expect(
+      fixture.nativeElement.querySelector('.chat-sidenav__debug-dot--streaming')
+    ).not.toBeNull();
   });
 });
 
 describe('ChatSidenavComponent — New chat primary CTA', () => {
   it('renders the new-chat button with a monochrome text-color CTA token', () => {
     // Styles array is the second member of @Component decorator metadata.
-    const styles = (ChatSidenavComponent as unknown as { ɵcmp: { styles: string[] } }).ɵcmp.styles.join('\n');
+    const styles = (
+      ChatSidenavComponent as unknown as { ɵcmp: { styles: string[] } }
+    ).ɵcmp.styles.join('\n');
     // Monochrome CTA: late-cascade block uses text/bg for contrast.
-    expect(styles).toMatch(/\.chat-sidenav__action\.chat-sidenav__action--new[^{]*\{[^}]*background:\s*var\(--ngaf-chat-text/);
-    expect(styles).toMatch(/\.chat-sidenav__action--new[^{]*\{[^}]*border-radius:\s*8px/);
+    expect(styles).toMatch(
+      /\.chat-sidenav__action\.chat-sidenav__action--new[^{]*\{[^}]*background:\s*var\(--ngaf-chat-text/
+    );
+    expect(styles).toMatch(
+      /\.chat-sidenav__action--new[^{]*\{[^}]*border-radius:\s*8px/
+    );
   });
 });
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 752456167..792d42af4 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
@@ -39,10 +39,18 @@ type ChatDebugDock = 'right' | 'bottom' | 'left';
 interface ChatDebugInstance {
   setOpen(value: boolean): void;
   setDock?(dock: ChatDebugDock): void;
-  replayRequested?: { subscribe(callback: (checkpointId: string) => void): OutputRefSubscription };
-  forkRequested?: { subscribe(callback: (checkpointId: string) => void): OutputRefSubscription };
-  openChange?: { subscribe(callback: (open: boolean) => void): OutputRefSubscription };
-  dockChange?: { subscribe(callback: (dock: ChatDebugDock) => void): OutputRefSubscription };
+  replayRequested?: {
+    subscribe(callback: (checkpointId: string) => void): OutputRefSubscription;
+  };
+  forkRequested?: {
+    subscribe(callback: (checkpointId: string) => void): OutputRefSubscription;
+  };
+  openChange?: {
+    subscribe(callback: (open: boolean) => void): OutputRefSubscription;
+  };
+  dockChange?: {
+    subscribe(callback: (dock: ChatDebugDock) => void): OutputRefSubscription;
+  };
 }
 
 @Component({
@@ -57,12 +65,12 @@ interface ChatDebugInstance {
   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>
+    <button
+      type="button"
+      class="chat-sidenav__scrim"
+      aria-label="Close conversations"
+      (click)="openChange.emit(false)"
+    ></button>
     }
     <nav
       class="chat-sidenav"
@@ -82,26 +90,44 @@ interface ChatDebugInstance {
           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
+            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>
         @if (mode() === 'drawer') {
-          <button
-            type="button"
-            class="chat-sidenav__action chat-sidenav__action--close"
-            (click)="openChange.emit(false)"
-            aria-label="Close conversations"
-            title="Close conversations"
+        <button
+          type="button"
+          class="chat-sidenav__action chat-sidenav__action--close"
+          (click)="openChange.emit(false)"
+          aria-label="Close conversations"
+          title="Close conversations"
+        >
+          <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"
           >
-            <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="18" y1="6" x2="6" y2="18"/>
-              <line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-            <span class="chat-sidenav__action-label">Close</span>
-          </button>
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+          <span class="chat-sidenav__action-label">Close</span>
+        </button>
         }
       </div>
 
@@ -113,9 +139,18 @@ interface ChatDebugInstance {
           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
+            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>
@@ -126,66 +161,73 @@ interface ChatDebugInstance {
       </div>
 
       @if (projects() !== null) {
-        <div class="chat-sidenav__projects">
-          <div class="chat-sidenav__threads-heading">Projects</div>
-          <chat-project-list
-            [projects]="projects()!"
-            [activeProjectId]="selectedProjectId()"
-            [showNewProjectButton]="!!projectActions()?.create"
-            [actions]="projectActions()"
-            (projectSelected)="projectSelected.emit($event)"
-            (newProjectRequested)="newProjectRequested.emit()"
-          />
-        </div>
-      }
-
-      @if (threads() !== null) {
-        <div class="chat-sidenav__threads">
-          <div class="chat-sidenav__threads-heading">Recent</div>
+      <div class="chat-sidenav__projects">
+        <div class="chat-sidenav__threads-heading">Projects</div>
+        <chat-project-list
+          [projects]="projects()!"
+          [activeProjectId]="selectedProjectId()"
+          [showNewProjectButton]="!!projectActions()?.create"
+          [actions]="projectActions()"
+          (projectSelected)="projectSelected.emit($event)"
+          (newProjectRequested)="newProjectRequested.emit()"
+        />
+      </div>
+      } @if (threads() !== null) {
+      <div class="chat-sidenav__threads">
+        <div class="chat-sidenav__threads-heading">Recent</div>
+        <chat-thread-list
+          [threads]="threads()!"
+          [activeThreadId]="activeThreadId() ?? ''"
+          [actions]="actions()"
+          [projects]="projects()"
+          (threadSelected)="threadSelected.emit($event)"
+        />
+      </div>
+      } @if (archivedThreads() !== null) {
+      <div
+        class="chat-sidenav__archived"
+        [attr.data-open]="archivedOpen() ? 'true' : 'false'"
+      >
+        <button
+          type="button"
+          class="chat-sidenav__archived-heading"
+          [attr.aria-expanded]="archivedOpen() ? 'true' : 'false'"
+          aria-controls="chat-sidenav__archived-list"
+          (click)="archivedOpen.set(!archivedOpen())"
+        >
+          <svg
+            class="chat-sidenav__archived-chevron"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="9 6 15 12 9 18" />
+          </svg>
+          <span>Archived</span>
+        </button>
+        @if (archivedOpen()) {
+        <div id="chat-sidenav__archived-list">
+          @if (archivedThreads()!.length === 0) {
+          <div class="chat-sidenav__archived-empty">
+            No archived conversations.
+          </div>
+          } @else {
           <chat-thread-list
-            [threads]="threads()!"
+            mode="archived"
+            [threads]="archivedThreads()!"
             [activeThreadId]="activeThreadId() ?? ''"
             [actions]="actions()"
             [projects]="projects()"
             (threadSelected)="threadSelected.emit($event)"
           />
-        </div>
-      }
-
-      @if (archivedThreads() !== null) {
-        <div
-          class="chat-sidenav__archived"
-          [attr.data-open]="archivedOpen() ? 'true' : 'false'"
-        >
-          <button
-            type="button"
-            class="chat-sidenav__archived-heading"
-            [attr.aria-expanded]="archivedOpen() ? 'true' : 'false'"
-            aria-controls="chat-sidenav__archived-list"
-            (click)="archivedOpen.set(!archivedOpen())"
-          >
-            <svg class="chat-sidenav__archived-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <polyline points="9 6 15 12 9 18"/>
-            </svg>
-            <span>Archived</span>
-          </button>
-          @if (archivedOpen()) {
-            <div id="chat-sidenav__archived-list">
-              @if (archivedThreads()!.length === 0) {
-                <div class="chat-sidenav__archived-empty">No archived conversations.</div>
-              } @else {
-                <chat-thread-list
-                  mode="archived"
-                  [threads]="archivedThreads()!"
-                  [activeThreadId]="activeThreadId() ?? ''"
-                  [actions]="actions()"
-                  [projects]="projects()"
-                  (threadSelected)="threadSelected.emit($event)"
-                />
-              }
-            </div>
           }
         </div>
+        }
+      </div>
       }
 
       <div class="chat-sidenav__sections">
@@ -195,45 +237,68 @@ interface ChatDebugInstance {
       <div class="chat-sidenav__footer">
         <div class="chat-sidenav__footer-left">
           @if (showDebugButton()) {
-            <button
-              type="button"
-              class="chat-sidenav__debug"
-              aria-label="Open chat debug"
-              title="Open chat debug"
-              (click)="openDebug($event)"
-            >
-              <span
-                class="chat-sidenav__debug-dot"
-                [class.chat-sidenav__debug-dot--streaming]="isDebugStreaming()"
-                aria-hidden="true"
-              ></span>
-              @if (mode() !== 'collapsed') {
-                <span class="chat-sidenav__debug-label">Debug</span>
-              }
-            </button>
+          <button
+            type="button"
+            class="chat-sidenav__debug"
+            aria-label="Open chat devtools"
+            title="Open chat devtools"
+            (click)="openDebug($event)"
+          >
+            <span
+              class="chat-sidenav__debug-dot"
+              [class.chat-sidenav__debug-dot--streaming]="isDebugStreaming()"
+              aria-hidden="true"
+            ></span>
+            @if (mode() !== 'collapsed') {
+            <span class="chat-sidenav__debug-label">Devtools</span>
+            }
+          </button>
           }
           <ng-content select="[sidenavFooterLeft]" />
         </div>
         <div class="chat-sidenav__footer-right">
           <ng-content select="[sidenavFooterRight]" />
           @if (mode() !== 'drawer') {
-            <button
-              type="button"
-              class="chat-sidenav__toggle"
-              (click)="onCollapseToggle()"
-              [attr.aria-label]="mode() === 'collapsed' ? 'Expand sidenav' : 'Collapse sidenav'"
-              [attr.title]="(mode() === 'collapsed' ? 'Expand sidenav' : 'Collapse sidenav') + ' (⌘B)'"
+          <button
+            type="button"
+            class="chat-sidenav__toggle"
+            (click)="onCollapseToggle()"
+            [attr.aria-label]="
+              mode() === 'collapsed' ? 'Expand sidenav' : 'Collapse sidenav'
+            "
+            [attr.title]="
+              (mode() === 'collapsed' ? 'Expand sidenav' : 'Collapse sidenav') +
+              ' (⌘B)'
+            "
+          >
+            @if (mode() === 'collapsed') {
+            <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"
+            >
+              <polyline points="9 6 15 12 9 18" />
+            </svg>
+            } @else {
+            <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"
             >
-              @if (mode() === 'collapsed') {
-                <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">
-                  <polyline points="9 6 15 12 9 18"/>
-                </svg>
-              } @else {
-                <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">
-                  <polyline points="15 6 9 12 15 18"/>
-                </svg>
-              }
-            </button>
+              <polyline points="15 6 9 12 15 18" />
+            </svg>
+            }
+          </button>
           }
         </div>
         <!-- Legacy slot kept for back-compat — see chat-sidenav.styles.ts for visibility rules -->
@@ -269,16 +334,18 @@ export class ChatSidenavComponent {
   readonly forkRequested = output<string>();
 
   protected readonly archivedOpen = signal<boolean>(false);
-  protected readonly showDebugButton = computed(() =>
-    CHAT_DEBUG_INCLUDED && this.debug() && this.agent() !== null,
+  protected readonly showDebugButton = computed(
+    () => CHAT_DEBUG_INCLUDED && this.debug() && this.agent() !== null
   );
-  protected readonly isDebugStreaming = computed(() =>
-    this.agent()?.status?.() === 'running',
+  protected readonly isDebugStreaming = computed(
+    () => this.agent()?.status?.() === 'running'
   );
 
   private readonly destroyRef = inject(DestroyRef);
   private readonly injector = inject(Injector);
-  private readonly debugHost = viewChild('debugHost', { read: ViewContainerRef });
+  private readonly debugHost = viewChild('debugHost', {
+    read: ViewContainerRef,
+  });
   private debugRef: ComponentRef<ChatDebugInstance> | null = null;
   private debugOutputSubscriptions: OutputRefSubscription[] = [];
   private currentDebugDock: ChatDebugDock = 'right';
@@ -305,7 +372,8 @@ export class ChatSidenavComponent {
         const t = e.target as HTMLElement | null;
         if (t) {
           const tag = t.tagName;
-          if (tag === 'INPUT' || tag === 'TEXTAREA' || t.isContentEditable) return;
+          if (tag === 'INPUT' || tag === 'TEXTAREA' || t.isContentEditable)
+            return;
         }
         if (key === 'k') {
           e.preventDefault();
@@ -315,7 +383,9 @@ export class ChatSidenavComponent {
         // Cmd/Ctrl+B: toggle expanded ↔ collapsed (no-op in drawer mode).
         if (this.mode() === 'drawer') return;
         e.preventDefault();
-        this.modeChange.emit(this.mode() === 'collapsed' ? 'expanded' : 'collapsed');
+        this.modeChange.emit(
+          this.mode() === 'collapsed' ? 'expanded' : 'collapsed'
+        );
       });
   }
 
@@ -358,12 +428,16 @@ export class ChatSidenavComponent {
       this.debugRef.setInput('storageKey', 'chat-sidenav-debug');
       const initialDock = this.defaultDebugDock();
       this.debugRef.setInput('dock', initialDock);
-      const replaySub = this.debugRef.instance.replayRequested?.subscribe((checkpointId) => {
-        this.replayRequested.emit(checkpointId);
-      });
-      const forkSub = this.debugRef.instance.forkRequested?.subscribe((checkpointId) => {
-        this.forkRequested.emit(checkpointId);
-      });
+      const replaySub = this.debugRef.instance.replayRequested?.subscribe(
+        (checkpointId) => {
+          this.replayRequested.emit(checkpointId);
+        }
+      );
+      const forkSub = this.debugRef.instance.forkRequested?.subscribe(
+        (checkpointId) => {
+          this.forkRequested.emit(checkpointId);
+        }
+      );
       const openSub = this.debugRef.instance.openChange?.subscribe((open) => {
         if (open) {
           this.setDebugEdgeClaim(this.currentDebugDock);
@@ -375,7 +449,12 @@ export class ChatSidenavComponent {
         this.currentDebugDock = dock;
         this.setDebugEdgeClaim(dock);
       });
-      this.debugOutputSubscriptions = [replaySub, forkSub, openSub, dockSub].filter((sub): sub is OutputRefSubscription => !!sub);
+      this.debugOutputSubscriptions = [
+        replaySub,
+        forkSub,
+        openSub,
+        dockSub,
+      ].filter((sub): sub is OutputRefSubscription => !!sub);
       this.currentDebugDock = initialDock;
       this.setDebugEdgeClaim(initialDock);
     }