Toolbar tighten: drop labels + New conversation, right-align fields, fix dropdown z-index

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

@@ -64,7 +64,19 @@
   font-family: inherit;
   font-size: var(--ngaf-chat-font-size-sm);
   box-sizing: border-box;
-  overflow-x: auto;
+  /* Toolbar establishes its own stacking context so the chat-select
+   * dropdown menus (z-index 10 inside the primitive) render above the
+   * 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. */
+}
+
+/* Push every field after Mode to the right of the toolbar. */
+.demo-shell__field--first {
+  margin-left: auto;
 }
 
 .demo-shell__segmented {
@@ -78,8 +90,7 @@
   flex: 0 0 auto;
 }
 
-.demo-shell__segmented-button,
-.demo-shell__toolbar-action {
+.demo-shell__segmented-button {
   font: inherit;
   color: var(--ngaf-chat-text);
 }
@@ -106,21 +117,6 @@
   flex: 0 0 auto;
 }
 
-.demo-shell__toolbar-action {
-  border: 0;
-  background: var(--ngaf-chat-surface-alt);
-  color: var(--ngaf-chat-text);
-  border-radius: 8px;
-  padding: 8px 12px;
-  min-height: 32px;
-  cursor: pointer;
-  flex: 0 0 auto;
-}
-
-.demo-shell__toolbar-action:hover {
-  background: color-mix(in srgb, var(--ngaf-chat-text) 8%, var(--ngaf-chat-surface-alt));
-}
-
 .demo-shell__segmented-button:hover:not(.is-active) {
   background: color-mix(in srgb, var(--ngaf-chat-text) 8%, transparent);
 }

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

@@ -75,49 +75,41 @@
         }
       </div>
 
-      <label class="demo-shell__field">
-        <span>Model</span>
+      <div class="demo-shell__field demo-shell__field--first">
         <chat-select
           [options]="modelOptions()"
           [value]="model()"
           menuLabel="Model"
           (valueChange)="onModelChange($event)"
         />
-      </label>
+      </div>
 
-      <label class="demo-shell__field">
-        <span>Effort</span>
+      <div class="demo-shell__field">
         <chat-select
           [options]="effortOptions()"
           [value]="effort()"
           menuLabel="Effort"
           (valueChange)="onEffortChange($event)"
         />
-      </label>
+      </div>
 
-      <label class="demo-shell__field">
-        <span>Gen UI</span>
+      <div class="demo-shell__field">
         <chat-select
           [options]="genUiOptions()"
           [value]="genUiMode()"
           menuLabel="Gen UI"
           (valueChange)="onGenUiModeChange($event)"
         />
-      </label>
+      </div>
 
-      <label class="demo-shell__field">
-        <span>Theme</span>
+      <div class="demo-shell__field">
         <chat-select
           [options]="themeOptions()"
           [value]="theme()"
           menuLabel="Theme"
           (valueChange)="onThemeChange($event)"
         />
-      </label>
-
-      <button type="button" class="demo-shell__toolbar-action" (click)="onNewConversation()">
-        New conversation
-      </button>
+      </div>
     </div>
 
     <router-outlet />

examples/chat/angular/src/app/shell/demo-shell.component.spec.ts

@@ -44,8 +44,8 @@ describe('DemoShell — mode signal', () => {
   });
 });
 
-describe('DemoShell — "New conversation" button styling', () => {
-  it('renders the action as a surface-alt pill with 8px radius and no border', () => {
+describe('DemoShell — toolbar layout', () => {
+  it('no longer renders the "New conversation" button (removed for tightness)', () => {
     TestBed.configureTestingModule({
       providers: [
         provideRouter([
@@ -57,14 +57,27 @@ describe('DemoShell — "New conversation" button styling', () => {
     });
     const fx = TestBed.createComponent(DemoShell);
     fx.detectChanges();
-    const btn = fx.nativeElement.querySelector('.demo-shell__toolbar-action') as HTMLElement;
-    expect(btn).toBeTruthy();
-    expect(btn.textContent?.trim()).toBe('New conversation');
-    // CSS values are verified via chrome MCP at the manual smoke step (JSDOM
-    // does not apply component-scoped external `styleUrl` CSS files, and
-    // raw-imports are not configured in this project's vitest setup). The
-    // rendering check above guarantees the button is present; visual styling
-    // is verified live.
+    expect(fx.nativeElement.querySelector('.demo-shell__toolbar-action')).toBeNull();
+  });
+
+  it('renders fields without visible per-field labels (tighter toolbar)', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideRouter([
+          { path: 'embed', component: DemoShell },
+          { path: '', pathMatch: 'full', redirectTo: 'embed' },
+          { path: '**', redirectTo: 'embed' },
+        ]),
+      ],
+    });
+    const fx = TestBed.createComponent(DemoShell);
+    fx.detectChanges();
+    const fields = fx.nativeElement.querySelectorAll('.demo-shell__field');
+    expect(fields.length).toBe(4);
+    for (const field of Array.from(fields) as HTMLElement[]) {
+      // No <span> sibling labels remain inside fields.
+      expect(field.querySelector(':scope > span')).toBeNull();
+    }
   });
 });
 

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

@@ -445,16 +445,6 @@ export class DemoShell {
     }
   }
 
-  /**
-   * Clear persisted thread id and drop the signal. The next submit
-   * causes the SDK to create a fresh thread server-side; onThreadId
-   * fires and re-persists it.
-   */
-  protected onNewConversation(): void {
-    this.persistence.write('threadId', null);
-    this.threadIdSignal.set(null);
-  }
-
   /**
    * Translates the four-action vocabulary from chat-interrupt-panel
    * into Command(resume=value) submissions. Phase 3A demo affordance: