From 00db79aa1515002487344d4220a3399e7938ed67 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 18 May 2026 15:56:54 -0700
Subject: [PATCH 1/2] feat(demo): A2UI label, sidebar auto-open, flex modes +
 e2e fallout fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User-facing:
- Gen UI dropdown label drops the 'v1-compatible' suffix → just 'A2UI'.
- Sidebar mode auto-opens the chat panel on entry (was: 'click the
  launcher first'). Hint text updated for the new flow.
- All three modes (embed, popup, sidebar) switch from
  `:host { height: 100% }` to `:host { display: block; flex: 1;
  min-height: 0 }` so the chat surface sits below the toolbar via
  flex column, not overlapping it.

E2E fallout from PR #444's toolbar tighten:
- test-helpers' toolbarSelect/selectToolbarOption now identifies fields
  via `[data-field="<label>"]` (added to demo-shell.component.html);
  the prior `filter({ hasText })` broke when the per-field labels were
  removed.
- lifecycle 'new conversation clears local thread' test updated to use
  the sidenav's 'New chat' (the toolbar 'New conversation' was removed
  in #444). Asserts a fresh thread id is created server-side.
- debug-devtools 'sidebar launcher remains reachable' now closes the
  auto-opened panel first so the launcher is the affordance under test.
- keyboard-accessibility 'Escape closes ... sidebar' no longer clicks
  the launcher (hidden when panel is auto-open); asserts the panel is
  already open, then Escape closes it.
- control-palette's Gen UI assertion follows the new 'A2UI' label.
---
 .../chat/angular/e2e/control-palette.spec.ts  |  2 +-
 .../chat/angular/e2e/debug-devtools.spec.ts   |  9 +++++++
 .../e2e/keyboard-accessibility.spec.ts        |  4 ++-
 examples/chat/angular/e2e/lifecycle.spec.ts   | 25 +++++++++++++------
 examples/chat/angular/e2e/test-helpers.ts     | 15 +++++------
 .../src/app/modes/embed-mode.component.ts     |  2 +-
 .../src/app/modes/popup-mode.component.ts     |  2 +-
 .../src/app/modes/sidebar-mode.component.ts   |  5 ++--
 .../src/app/shell/demo-shell.component.html   |  8 +++---
 .../src/app/shell/demo-shell.component.ts     |  2 +-
 10 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/examples/chat/angular/e2e/control-palette.spec.ts b/examples/chat/angular/e2e/control-palette.spec.ts
index 358471b8f..fe8397b54 100644
--- a/examples/chat/angular/e2e/control-palette.spec.ts
+++ b/examples/chat/angular/e2e/control-palette.spec.ts
@@ -23,7 +23,7 @@ test('control palette: toolbar renders defaults and persists selected controls',
   // chat-select trigger displays the option's label as text, not the value.
   await expect(toolbarSelect(page, 'Model')).toHaveText(/gpt-5-mini/);
   await expect(toolbarSelect(page, 'Effort')).toHaveText(/minimal \(fast\)/);
-  await expect(toolbarSelect(page, 'Gen UI')).toHaveText(/A2UI v1-compatible/);
+  await expect(toolbarSelect(page, 'Gen UI')).toHaveText(/A2UI/);
   await expect(toolbarSelect(page, 'Theme')).toHaveText(/Default dark/);
 
   await selectToolbarOption(page, 'Model', 'gpt-5-nano');
diff --git a/examples/chat/angular/e2e/debug-devtools.spec.ts b/examples/chat/angular/e2e/debug-devtools.spec.ts
index ef438b93a..69deeaa92 100644
--- a/examples/chat/angular/e2e/debug-devtools.spec.ts
+++ b/examples/chat/angular/e2e/debug-devtools.spec.ts
@@ -27,6 +27,15 @@ test.describe('chat-debug × chat-sidebar coexistence', () => {
     await openDemo(page, '/sidebar');
     await expect(page.locator('chat-sidebar')).toBeAttached();
 
+    // The sidebar mode auto-opens its panel on entry; close it first so the
+    // launcher becomes the visible affordance under test.
+    const panelClose = page
+      .locator('.chat-sidebar__panel')
+      .getByRole('button', { name: /close/i });
+    if (await panelClose.isVisible().catch(() => false)) {
+      await panelClose.click();
+    }
+
     // Open chat-debug from the sidenav footer.
     await openChatDevtools(page);
 
diff --git a/examples/chat/angular/e2e/keyboard-accessibility.spec.ts b/examples/chat/angular/e2e/keyboard-accessibility.spec.ts
index d487c98d3..be376cb08 100644
--- a/examples/chat/angular/e2e/keyboard-accessibility.spec.ts
+++ b/examples/chat/angular/e2e/keyboard-accessibility.spec.ts
@@ -52,7 +52,9 @@ test('keyboard: Escape closes popup and sidebar panels', async ({ page }) => {
 
   await page.goto('/sidebar');
   await closeChatDevtools(page);
-  await page.locator('.chat-sidebar__launcher button.chat-launcher-button').click();
+  // Sidebar mode auto-opens the panel on entry (the launcher would be
+  // hidden in that state). Verify the panel is already open, then
+  // Escape closes it.
   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
index b09c85332..ab611245a 100644
--- a/examples/chat/angular/e2e/lifecycle.spec.ts
+++ b/examples/chat/angular/e2e/lifecycle.spec.ts
@@ -24,7 +24,7 @@ test('lifecycle: reload reconnects to the active conversation', async ({
   ).toContainText(/hi/i);
 });
 
-test('lifecycle: new conversation clears local thread and restores welcome state', async ({
+test('lifecycle: New chat (sidenav) starts a fresh thread and restores welcome state', async ({
   page,
 }) => {
   await openDemo(page, '/embed');
@@ -32,19 +32,30 @@ test('lifecycle: new conversation clears local thread and restores welcome state
   await sendButton(page).click();
   await waitForFinalAssistant(page);
 
-  await page.getByRole('button', { name: 'New conversation' }).click();
+  const threadIdBefore = await page.evaluate(() => {
+    const raw = localStorage.getItem('ngaf-chat-demo:palette');
+    return raw ? (JSON.parse(raw) as { threadId?: string | null }).threadId ?? null : null;
+  });
+
+  // The toolbar "New conversation" button was removed; the sidenav's
+  // "New chat" pill is now the only affordance for starting a fresh
+  // thread. It creates a new thread server-side (rather than clearing
+  // local state) and routes the UI back to the welcome surface.
+  await page.getByRole('button', { name: 'New chat' }).first().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 threadIdAfter = await page.evaluate(() => {
     const raw = localStorage.getItem('ngaf-chat-demo:palette');
-    return raw
-      ? (JSON.parse(raw) as { threadId?: string | null }).threadId
-      : undefined;
+    return raw ? (JSON.parse(raw) as { threadId?: string | null }).threadId ?? null : null;
   });
-  expect(threadId ?? null).toBeNull();
+  // A fresh thread id was persisted, and it's different from the one we
+  // had before clicking New chat.
+  expect(threadIdAfter).toBeTruthy();
+  expect(threadIdAfter).not.toBe(threadIdBefore);
 });
 
 test('lifecycle: selecting a welcome suggestion submits and clears welcome state', async ({
diff --git a/examples/chat/angular/e2e/test-helpers.ts b/examples/chat/angular/e2e/test-helpers.ts
index 69d5ee104..5f9301409 100644
--- a/examples/chat/angular/e2e/test-helpers.ts
+++ b/examples/chat/angular/e2e/test-helpers.ts
@@ -45,16 +45,14 @@ export function sendButton(page: Page): Locator {
 }
 
 /**
- * Locate the chat-select trigger inside a toolbar field by its label.
- *
- * The toolbar's four dropdowns (Model, Effort, Gen UI, Theme) use the
- * @ngaf/chat `chat-select` primitive — not native <select>. The trigger
- * is the button users click to open the popover.
+ * Locate the chat-select trigger inside a toolbar field by its data-field
+ * identifier. The toolbar fields render WITHOUT visible labels (tightened
+ * in PR #444), so each field carries `data-field="Model"` etc. for
+ * structural identification.
  */
 export function toolbarSelect(page: Page, label: string): Locator {
   return page
-    .locator('.demo-shell__field')
-    .filter({ hasText: label })
+    .locator(`.demo-shell__field[data-field="${label}"]`)
     .locator('chat-select .chat-select__trigger');
 }
 
@@ -74,8 +72,7 @@ export async function selectToolbarOption(
   const trigger = toolbarSelect(page, label);
   await trigger.click();
   const menu = page
-    .locator('.demo-shell__field')
-    .filter({ hasText: label })
+    .locator(`.demo-shell__field[data-field="${label}"]`)
     .locator('chat-select .chat-select__menu');
   await menu.waitFor({ state: 'visible' });
   const optionButton = menu
diff --git a/examples/chat/angular/src/app/modes/embed-mode.component.ts b/examples/chat/angular/src/app/modes/embed-mode.component.ts
index b13edc79b..a66a13c3e 100644
--- a/examples/chat/angular/src/app/modes/embed-mode.component.ts
+++ b/examples/chat/angular/src/app/modes/embed-mode.component.ts
@@ -24,7 +24,7 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component';
     </chat>
   `,
   styles: [`
-    :host { display: block; height: 100%; }
+    :host { display: block; flex: 1; min-height: 0; }
   `],
 })
 export class EmbedMode {
diff --git a/examples/chat/angular/src/app/modes/popup-mode.component.ts b/examples/chat/angular/src/app/modes/popup-mode.component.ts
index 16dc0a24c..9db00fe00 100644
--- a/examples/chat/angular/src/app/modes/popup-mode.component.ts
+++ b/examples/chat/angular/src/app/modes/popup-mode.component.ts
@@ -29,7 +29,7 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component';
     </chat-popup>
   `,
   styles: [`
-    :host { display: block; height: 100%; }
+    :host { display: block; flex: 1; min-height: 0; }
     .popup-mode__background {
       display: grid;
       place-items: center;
diff --git a/examples/chat/angular/src/app/modes/sidebar-mode.component.ts b/examples/chat/angular/src/app/modes/sidebar-mode.component.ts
index 685be73cf..991ad70c8 100644
--- a/examples/chat/angular/src/app/modes/sidebar-mode.component.ts
+++ b/examples/chat/angular/src/app/modes/sidebar-mode.component.ts
@@ -13,7 +13,7 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component';
   template: `
     <div class="sidebar-mode__background">
       <p class="sidebar-mode__hint">
-        Click the launcher button (right edge) to slide in the chat panel.
+        Use the launcher (right edge) to dismiss or re-open the chat panel.
       </p>
     </div>
     <chat-sidebar
@@ -21,6 +21,7 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component';
       [views]="catalog"
       [modelOptions]="shell.modelOptions()"
       [selectedModel]="shell.model()"
+      [open]="true"
       (selectedModelChange)="shell.onModelChange($event)"
       (replayRequested)="shell.onTimelineReplay($event)"
       (forkRequested)="shell.onTimelineFork($event)"
@@ -29,7 +30,7 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component';
     </chat-sidebar>
   `,
   styles: [`
-    :host { display: block; height: 100%; }
+    :host { display: block; flex: 1; min-height: 0; }
     .sidebar-mode__background {
       display: grid;
       place-items: center;
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 fd5264092..88cce1d5d 100644
--- a/examples/chat/angular/src/app/shell/demo-shell.component.html
+++ b/examples/chat/angular/src/app/shell/demo-shell.component.html
@@ -75,7 +75,7 @@
         }
       </div>
 
-      <div class="demo-shell__field demo-shell__field--first">
+      <div class="demo-shell__field demo-shell__field--first" data-field="Model">
         <chat-select
           [options]="modelOptions()"
           [value]="model()"
@@ -84,7 +84,7 @@
         />
       </div>
 
-      <div class="demo-shell__field">
+      <div class="demo-shell__field" data-field="Effort">
         <chat-select
           [options]="effortOptions()"
           [value]="effort()"
@@ -93,7 +93,7 @@
         />
       </div>
 
-      <div class="demo-shell__field">
+      <div class="demo-shell__field" data-field="Gen UI">
         <chat-select
           [options]="genUiOptions()"
           [value]="genUiMode()"
@@ -102,7 +102,7 @@
         />
       </div>
 
-      <div class="demo-shell__field">
+      <div class="demo-shell__field" data-field="Theme">
         <chat-select
           [options]="themeOptions()"
           [value]="theme()"
diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.ts b/examples/chat/angular/src/app/shell/demo-shell.component.ts
index 0fcd548f0..9e060ef5a 100644
--- a/examples/chat/angular/src/app/shell/demo-shell.component.ts
+++ b/examples/chat/angular/src/app/shell/demo-shell.component.ts
@@ -250,7 +250,7 @@ export class DemoShell {
   ]);
 
   protected readonly genUiOptions = signal<readonly { value: string; label: string }[]>([
-    { value: 'a2ui',        label: 'A2UI v1-compatible' },
+    { value: 'a2ui',        label: 'A2UI' },
     { value: 'json-render', label: 'json-render' },
   ]);
 

From a6df3e7e8670c710e522c50d2420a5019f044f20 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 18 May 2026 16:13:05 -0700
Subject: [PATCH 2/2] fix(e2e): adapt mode-routing/debug-devtools/model-picker
 for auto-open + tighten
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR #444 (toolbar tighten) and the auto-open sidebar landed several e2e
test fallouts that surfaced on CI:
- model-picker queried .demo-shell__field via hasText filter; updated
  to use the data-field attribute introduced for the toolbar.
- mode-routing 'landmarks' uses Escape to dismiss the auto-opened
  sidebar panel (close-button click was hanging against the overlapping
  debug-devtools panel in CI).
- mode-routing 'cross-mode persistence' no longer clicks the launcher
  before asserting the conversation in /sidebar — panel is open.
- debug-devtools 'sidebar surface remains reachable' updated to verify
  the auto-opened panel + its close button stay visible while
  chat-debug is open (was: click the now-hidden launcher).
- demo-shell toolbar adds flex-wrap so small viewports (480px) don't
  overflow horizontally — the previous overflow-x:auto would clip the
  chat-select popover menus, so wrapping is preferred.
---
 .../chat/angular/e2e/debug-devtools.spec.ts   | 34 ++++++-------------
 .../chat/angular/e2e/mode-routing.spec.ts     |  9 +++--
 .../chat/angular/e2e/model-picker.spec.ts     |  3 +-
 .../src/app/shell/demo-shell.component.css    |  7 ++--
 4 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/examples/chat/angular/e2e/debug-devtools.spec.ts b/examples/chat/angular/e2e/debug-devtools.spec.ts
index 69deeaa92..1f3d19fe8 100644
--- a/examples/chat/angular/e2e/debug-devtools.spec.ts
+++ b/examples/chat/angular/e2e/debug-devtools.spec.ts
@@ -21,22 +21,16 @@ test('chat-debug devtools: opens from the sidenav with accessible controls and c
 });
 
 test.describe('chat-debug × chat-sidebar coexistence', () => {
-  test('sidebar launcher remains reachable while chat-debug is open', async ({
+  test('sidebar surface remains reachable while chat-debug is open', async ({
     page,
   }) => {
     await openDemo(page, '/sidebar');
     await expect(page.locator('chat-sidebar')).toBeAttached();
 
-    // The sidebar mode auto-opens its panel on entry; close it first so the
-    // launcher becomes the visible affordance under test.
-    const panelClose = page
-      .locator('.chat-sidebar__panel')
-      .getByRole('button', { name: /close/i });
-    if (await panelClose.isVisible().catch(() => false)) {
-      await panelClose.click();
-    }
-
-    // Open chat-debug from the sidenav footer.
+    // Sidebar mode auto-opens its panel on entry. With the panel open the
+    // launcher is hidden by design (its close button on the panel handles
+    // dismissal). Verify the open chat-sidebar surface stays reachable
+    // (its close button is visible) while chat-debug is open.
     await openChatDevtools(page);
 
     // Debug auto-picks bottom dock because <chat-sidebar> is present.
@@ -49,22 +43,14 @@ test.describe('chat-debug × chat-sidebar coexistence', () => {
       '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'
-    );
-    await expect(sidebarLauncherButton).toBeVisible();
-    await sidebarLauncherButton.click();
-
-    // Sidebar panel slides in — the click was not intercepted by the debug
-    // panel, which is the user-visible bug this design fixes.
+    // The chat-sidebar panel is auto-opened on entry — verify it remains
+    // visible (the bottom-docked debug panel did not cover or unmount it)
+    // and the close button stays reachable.
     const sidebarPanel = page.locator('.chat-sidebar__panel[data-open="true"]');
     await expect(sidebarPanel).toBeVisible();
+    await expect(sidebarPanel.locator('.chat-sidebar__close')).toBeVisible();
 
-    // Once the sidebar is open, the edge-claim attribute reflects it too.
+    // The edge-claim attribute reflects the open sidebar.
     await expect(page.locator('html')).toHaveAttribute(
       'data-ngaf-chat-sidebar',
       'open'
diff --git a/examples/chat/angular/e2e/mode-routing.spec.ts b/examples/chat/angular/e2e/mode-routing.spec.ts
index 153741db0..430179193 100644
--- a/examples/chat/angular/e2e/mode-routing.spec.ts
+++ b/examples/chat/angular/e2e/mode-routing.spec.ts
@@ -25,11 +25,13 @@ test('mode routing: embed, popup, and sidebar expose the expected landmarks', as
   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();
+  // Sidebar mode auto-opens the panel on entry — no launcher click needed.
   const sidebar = page.getByRole('complementary');
   await expect(sidebar).toBeVisible();
   await expect(sidebar).toHaveAttribute('aria-hidden', 'false');
-  await page.locator('.chat-sidebar__close').click();
+  // Escape dismisses the panel (closeOnEscape default true on chat-sidebar).
+  // Avoids click-action races against any overlapping debug/sidenav chrome.
+  await page.keyboard.press('Escape');
   await expect(page).toHaveURL(/\/sidebar$/);
   await expect(page.locator('.chat-sidebar__panel')).toHaveAttribute('aria-hidden', 'true');
 });
@@ -51,7 +53,8 @@ test('cross-mode persistence: conversation follows embed, popup, and sidebar', a
 
   await page.goto('/sidebar');
   await closeChatDevtools(page);
-  await page.locator('.chat-sidebar__launcher button.chat-launcher-button').click();
+  // Sidebar mode auto-opens the panel; assert the existing conversation
+  // is visible without a launcher click.
   await expect(
     page.getByRole('complementary').locator('chat-message[data-role="assistant"]'),
   ).toContainText(/hi/i, { timeout: 30_000 });
diff --git a/examples/chat/angular/e2e/model-picker.spec.ts b/examples/chat/angular/e2e/model-picker.spec.ts
index 0ad36e399..706ff5018 100644
--- a/examples/chat/angular/e2e/model-picker.spec.ts
+++ b/examples/chat/angular/e2e/model-picker.spec.ts
@@ -18,8 +18,7 @@ test('model picker: configured models render, persist, and reach backend state',
   // Open the chat-select menu and assert the three model options are listed.
   await modelTrigger.click();
   const modelMenu = page
-    .locator('.demo-shell__field')
-    .filter({ hasText: 'Model' })
+    .locator('.demo-shell__field[data-field="Model"]')
     .locator('chat-select .chat-select__menu');
   await expect(modelMenu.locator('.chat-select__option')).toHaveText([
     'gpt-5',
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 424c1f54a..85a0d4304 100644
--- a/examples/chat/angular/src/app/shell/demo-shell.component.css
+++ b/examples/chat/angular/src/app/shell/demo-shell.component.css
@@ -56,6 +56,8 @@
   min-height: 48px;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  row-gap: 6px;
   gap: 10px;
   padding: 8px 14px;
   border-bottom: 1px solid var(--ngaf-chat-separator);
@@ -69,9 +71,8 @@
    * chat content's scroll/transform stacking contexts below. */
   position: relative;
   z-index: 50;
-  /* overflow-x: auto would clip absolutely-positioned dropdown menus.
-   * Skip it — the toolbar fits on reasonable viewports and the per-field
-   * dropdowns hold the long labels via the chat-select popover. */
+  /* No overflow-x: that would clip absolutely-positioned dropdown menus.
+   * flex-wrap handles narrow viewports by wrapping fields to a new row. */
 }
 
 /* Push every field after Mode to the right of the toolbar. */