demo: A2UI label, sidebar auto-open, flex modes + e2e fixes (#448)

* feat(demo): A2UI label, sidebar auto-open, flex modes + e2e fallout fixes

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.

* fix(e2e): adapt mode-routing/debug-devtools/model-picker for auto-open + tighten

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.

Author: blove

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');

examples/chat/angular/e2e/debug-devtools.spec.ts

@@ -21,13 +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();
 
-    // 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.
@@ -40,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'

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');

examples/chat/angular/e2e/lifecycle.spec.ts

@@ -24,27 +24,38 @@ 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');
   await messageInput(page).fill('say hi briefly');
   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 ({

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 });

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 {

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;

examples/chat/angular/src/app/modes/sidebar-mode.component.ts

@@ -13,14 +13,15 @@ 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
       [agent]="agent"
       [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;

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. */

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' },
   ]);