test: stabilize chat example e2e controls

Author: blove

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

@@ -24,15 +24,21 @@ 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 switches 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);
+  const previousThreadId = await page.evaluate(() => {
+    const raw = localStorage.getItem('ngaf-chat-demo:palette');
+    return raw
+      ? (JSON.parse(raw) as { threadId?: string | null }).threadId
+      : undefined;
+  });
 
-  await page.getByRole('button', { name: 'New conversation' }).click();
+  await page.getByRole('button', { name: 'New chat' }).click();
 
   await expect(
     page.getByRole('heading', { name: 'How can I help?' })
@@ -44,7 +50,8 @@ test('lifecycle: new conversation clears local thread and restores welcome state
       ? (JSON.parse(raw) as { threadId?: string | null }).threadId
       : undefined;
   });
-  expect(threadId ?? null).toBeNull();
+  expect(threadId).toBeTruthy();
+  expect(threadId).not.toBe(previousThreadId);
 });
 
 test('lifecycle: selecting a welcome suggestion submits and clears welcome state', async ({

examples/chat/angular/e2e/model-picker.spec.ts

@@ -17,10 +17,7 @@ test('model picker: configured models render, persist, and reach backend state',
   const modelTrigger = toolbarSelect(page, 'Model');
   // 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('chat-select .chat-select__menu');
+  const modelMenu = page.getByRole('listbox', { name: 'Model' });
   await expect(modelMenu.locator('.chat-select__option')).toHaveText([
     'gpt-5',
     'gpt-5-mini',

examples/chat/angular/e2e/test-helpers.ts

@@ -53,9 +53,8 @@ export function sendButton(page: Page): Locator {
  */
 export function toolbarSelect(page: Page, label: string): Locator {
   return page
-    .locator('.demo-shell__field')
-    .filter({ hasText: label })
-    .locator('chat-select .chat-select__trigger');
+    .getByRole('toolbar', { name: 'Demo controls' })
+    .getByRole('button', { name: new RegExp(`^${escapeRegExp(label)}:`) });
 }
 
 /**
@@ -73,10 +72,7 @@ export async function selectToolbarOption(
 ): Promise<void> {
   const trigger = toolbarSelect(page, label);
   await trigger.click();
-  const menu = page
-    .locator('.demo-shell__field')
-    .filter({ hasText: label })
-    .locator('chat-select .chat-select__menu');
+  const menu = page.getByRole('listbox', { name: label });
   await menu.waitFor({ state: 'visible' });
   const optionButton = menu
     .locator('.chat-select__option')

examples/chat/angular/src/app/shell/demo-shell.component.css

@@ -40,6 +40,7 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+  box-sizing: border-box;
 }
 .demo-shell__main[data-sidenav-mode="expanded"] {
   padding-left: var(--ngaf-chat-sidenav-width-expanded, 280px);
@@ -132,8 +133,50 @@
 
 @media (max-width: 767px) {
   .demo-shell__toolbar {
+    flex-wrap: wrap;
+    align-items: stretch;
+    gap: 8px;
     padding-left: 60px;
   }
+
+  .demo-shell__field--first {
+    margin-left: 0;
+  }
+
+  .demo-shell__segmented,
+  .demo-shell__field {
+    flex: 1 1 calc(50% - 4px);
+    min-width: 0;
+  }
+
+  .demo-shell__field ::ng-deep chat-select,
+  .demo-shell__field ::ng-deep chat-select .chat-select__trigger {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .demo-shell__field ::ng-deep chat-select .chat-select__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+  .demo-shell__toolbar {
+    flex-wrap: wrap;
+    align-items: stretch;
+  }
+
+  .demo-shell__field--first {
+    margin-left: 0;
+  }
+
+  .demo-shell__field {
+    flex: 1 1 120px;
+    min-width: 0;
+  }
 }
 
 .demo-shell__interrupt-panel {

libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts

@@ -43,7 +43,7 @@ import { CHAT_HOST_TOKENS, ensureChatRootStyles } from '../../styles/chat-tokens
       box-shadow: -8px 0 32px rgba(0,0,0,.08);
       transform: translateX(100%);
       transition: transform 200ms ease-out, bottom 200ms ease-out;
-      z-index: 30;
+      z-index: 60;
       display: flex;
       flex-direction: column;
     }

libs/chat/src/lib/primitives/chat-select/chat-select.component.spec.ts

@@ -47,6 +47,14 @@ describe('ChatSelectComponent', () => {
     expect(host.querySelector('.chat-select__label')?.textContent).toContain('Alpha');
   });
 
+  it('labels the trigger with the control name and current value', () => {
+    setSignalInput(fixture, 'menuLabel', 'Model');
+    fixture.detectChanges();
+    expect(
+      host.querySelector<HTMLButtonElement>('.chat-select__trigger')?.getAttribute('aria-label'),
+    ).toBe('Model: Alpha');
+  });
+
   it('falls back to placeholder when value not in options', () => {
     setSignalInput(fixture, 'value', '');
     setSignalInput(fixture, 'placeholder', 'Pick one');

libs/chat/src/lib/primitives/chat-select/chat-select.component.ts

@@ -44,6 +44,7 @@ export interface ChatSelectOption {
       class="chat-select__trigger"
       [class.is-open]="open()"
       [disabled]="disabled()"
+      [attr.aria-label]="triggerLabel()"
       [attr.aria-haspopup]="'listbox'"
       [attr.aria-expanded]="open()"
       (click)="toggle()"
@@ -94,6 +95,11 @@ export class ChatSelectComponent {
     return match?.label ?? this.placeholder();
   });
 
+  protected readonly triggerLabel = computed(() => {
+    const label = this.menuLabel() ?? this.placeholder();
+    return `${label}: ${this.currentLabel()}`;
+  });
+
   private readonly hostEl = inject(ElementRef).nativeElement as HTMLElement;
   private readonly document = inject(DOCUMENT);
   private readonly destroyRef = inject(DestroyRef);