feat(ag-ui): app mode + Google Map cockpit (phase 2) (#732)

* build(ag-ui): wire Google Maps API key via gitignored generated-keys.local.ts

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(ag-ui): add lat/lng to ItineraryStop; seed Paris coords

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(ag-ui): GeocodingService wrapping google.maps.Geocoder

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(ag-ui): geocode at the add_stop client-tool seam

* feat(ag-ui): App-mode signal with persistence and sidebar-mode lock

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(ag-ui): toolbar App-mode toggle with key-gating + sidebar lock

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(ag-ui): MapCanvasComponent with dark style, day-colored markers, per-day polylines

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(ag-ui): App-mode layout — full map + floating overlay + chat sidebar

* feat(ag-ui): info window with Remove on marker click + pan-to-focus

* feat(ag-ui): row click focuses the map; focused row highlights

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(ag-ui): collapsible itinerary panel (overlay minimize)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix(ag-ui): collapse overlay actually hides content (:host selector)

Live map smoke caught that the collapse toggled the host class but the
day content stayed visible: `.itin--collapsed [cdkDropListGroup]` can't
match a host-level class under Angular emulated encapsulation (the
selector gets _ngcontent appended; the host carries _nghost). Use
:host(.itin--collapsed) so the descendant hide-rules apply. The P2.11
unit test only asserted the host class toggles, not that content hides,
so it passed while the visual collapse was broken.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: blove

.gitignore

@@ -62,3 +62,6 @@ libs/licensing/src/lib/license-public-key.generated.ts
 .superpowers/
 # TypeScript incremental build caches (any project)
 *.tsbuildinfo
+
+# AG-UI example generated API keys (injected from .env at build time)
+examples/ag-ui/angular/src/environments/generated-keys.local.ts

examples/ag-ui/angular/project.json

@@ -5,8 +5,18 @@
   "projectType": "application",
   "prefix": "app",
   "targets": {
+    "inject-env": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "node examples/ag-ui/angular/scripts/inject-env.mjs",
+        "cwd": "{workspaceRoot}"
+      }
+    },
     "build": {
       "executor": "@angular/build:application",
+      "dependsOn": [
+        "inject-env"
+      ],
       "outputs": [
         "{options.outputPath.base}"
       ],
@@ -53,6 +63,10 @@
             {
               "replace": "examples/ag-ui/angular/src/environments/environment.ts",
               "with": "examples/ag-ui/angular/src/environments/environment.development.ts"
+            },
+            {
+              "replace": "examples/ag-ui/angular/src/environments/generated-keys.ts",
+              "with": "examples/ag-ui/angular/src/environments/generated-keys.local.ts"
             }
           ]
         }

examples/ag-ui/angular/scripts/inject-env.mjs

@@ -0,0 +1,32 @@
+// SPDX-License-Identifier: MIT
+import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(__dirname, '../../../..');
+
+function readDotEnv() {
+  const envPath = resolve(repoRoot, '.env');
+  if (!existsSync(envPath)) return {};
+  const raw = readFileSync(envPath, 'utf8');
+  const out = {};
+  for (const line of raw.split('\n')) {
+    const m = line.match(/^([A-Z_][A-Z0-9_]*)=(.*)$/);
+    if (m) out[m[1]] = m[2].replace(/^"|"$/g, '');
+  }
+  return out;
+}
+
+const env = { ...readDotEnv(), ...process.env };
+const key = env.GOOGLE_MAPS_API_KEY ?? '';
+
+const targetPath = resolve(__dirname, '../src/environments/generated-keys.local.ts');
+const contents = `// SPDX-License-Identifier: MIT
+// AUTO-GENERATED by scripts/inject-env.mjs. Do not edit by hand.
+export const GENERATED_KEYS = {
+  googleMaps: ${JSON.stringify(key)},
+} as const;
+`;
+writeFileSync(targetPath, contents);
+console.log(`[inject-env] wrote generated-keys.local.ts (key length: ${key.length})`);

examples/ag-ui/angular/src/app/app.config.ts

@@ -2,6 +2,7 @@
 import {
   ApplicationConfig,
   provideBrowserGlobalErrorListeners,
+  provideEnvironmentInitializer,
   provideZonelessChangeDetection,
 } from '@angular/core';
 import { provideRouter } from '@angular/router';
@@ -34,6 +35,21 @@ export const appConfig: ApplicationConfig = {
     // Typed agent provider: flows ItineraryState through DI so every
     // injectAgent(ITINERARY_AGENT) call returns AgUiAgent<ItineraryState>.
     provideAgent(ITINERARY_AGENT, { url: environment.agentUrl }),
+    // Load the Google Maps JS API once at bootstrap so the map canvas and the
+    // GeocodingService both run against the same loaded script. Skips cleanly
+    // when no key is configured (the googleMapsApiKey is '' in that case).
+    provideEnvironmentInitializer(() => {
+      const key = (environment.googleMapsApiKey as string) ?? '';
+      if (!key) return;
+      const g = globalThis as { google?: unknown };
+      if (g.google) return;
+      if (document.querySelector('script[data-google-maps]')) return;
+      const script = document.createElement('script');
+      script.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(key)}&libraries=geocoding`;
+      script.async = true;
+      script.setAttribute('data-google-maps', '');
+      document.head.appendChild(script);
+    }),
     provideChat({ license: environment.license }),
     // The frontend-owned itinerary is a single shared instance: the panel,
     // the App component, and the client-tool ask component all inject it, so

examples/ag-ui/angular/src/app/client-tools.ts

@@ -3,6 +3,7 @@ import { inject } from '@angular/core';
 import { tools, action, view, ask, type ClientToolRegistry, createAgentRef } from '@threadplane/chat';
 import { z } from 'zod/v4';
 import { ItineraryStore } from './itinerary-store';
+import { GeocodingService } from './geocoding.service';
 import { DayCardComponent, DAY_CARD_SCHEMA } from './day-card.component';
 import { ClearDayConfirmComponent } from './clear-day-confirm.component';
 
@@ -35,6 +36,7 @@ export const CLEAR_DAY_SCHEMA = z.object({ day: z.number().int().min(1) });
  *  steering the model gets — no system-prompt coaching (by design). */
 export function itineraryClientTools(): ClientToolRegistry {
   const store = inject(ItineraryStore);
+  const geocoding = inject(GeocodingService);
   return tools({
     get_itinerary: action(
       "Read the user's trip itinerary: every planned stop grouped by day (with ids).",
@@ -44,7 +46,10 @@ export function itineraryClientTools(): ClientToolRegistry {
     add_stop: action(
       'Add a stop to a day of the trip itinerary. Afterwards, show the updated day with day_card.',
       z.object({ day: z.number().int().min(1), place: z.string(), note: z.string().optional() }),
-      async ({ day, place, note }) => ({ added: store.add(day, place, note) }),
+      async ({ day, place, note }) => {
+        const coords = (await geocoding.geocode(place)) ?? undefined;
+        return { added: store.add(day, place, note, coords ? { coords } : undefined) };
+      },
     ),
     move_stop: action(
       'Move an existing stop (matched by place name) to another day. Afterwards, show the updated day with day_card.',

examples/ag-ui/angular/src/app/geocoding.service.spec.ts

@@ -0,0 +1,49 @@
+// SPDX-License-Identifier: MIT
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { GeocodingService } from './geocoding.service';
+
+beforeEach(() => {
+  (globalThis as any).google = {
+    maps: {
+      Geocoder: class {
+        async geocode({ address }: { address: string }) {
+          if (address === 'fail') throw new Error('boom');
+          if (address === 'empty') return { results: [] };
+          return {
+            results: [
+              { geometry: { location: { lat: () => 48.85, lng: () => 2.35 } } },
+            ],
+          };
+        }
+      },
+    },
+  };
+});
+
+afterEach(() => {
+  delete (globalThis as any).google;
+});
+
+describe('GeocodingService', () => {
+  it('resolves an address to { lat, lng }', async () => {
+    const svc = TestBed.inject(GeocodingService);
+    expect(await svc.geocode('Louvre')).toEqual({ lat: 48.85, lng: 2.35 });
+  });
+
+  it('returns null when geocoding throws', async () => {
+    const svc = TestBed.inject(GeocodingService);
+    expect(await svc.geocode('fail')).toBeNull();
+  });
+
+  it('returns null when there are no results', async () => {
+    const svc = TestBed.inject(GeocodingService);
+    expect(await svc.geocode('empty')).toBeNull();
+  });
+
+  it('returns null when google.maps is not loaded', async () => {
+    delete (globalThis as any).google;
+    const svc = TestBed.inject(GeocodingService);
+    expect(await svc.geocode('Louvre')).toBeNull();
+  });
+});

examples/ag-ui/angular/src/app/geocoding.service.ts

@@ -0,0 +1,27 @@
+// SPDX-License-Identifier: MIT
+/// <reference types="google.maps" />
+import { Injectable } from '@angular/core';
+
+/**
+ * Wraps the Google Maps Geocoder to resolve a place string to coordinates.
+ * Returns null on any failure — Maps not loaded, no results, or a thrown
+ * error — so callers can add a stop with no pin rather than break.
+ */
+@Injectable({ providedIn: 'root' })
+export class GeocodingService {
+  private geocoder: google.maps.Geocoder | null = null;
+
+  async geocode(address: string): Promise<{ lat: number; lng: number } | null> {
+    const g = (globalThis as { google?: typeof google }).google;
+    if (!g?.maps?.Geocoder) return null;
+    try {
+      this.geocoder ??= new g.maps.Geocoder();
+      const { results } = await this.geocoder.geocode({ address });
+      const first = results?.[0];
+      if (!first) return null;
+      return { lat: first.geometry.location.lat(), lng: first.geometry.location.lng() };
+    } catch {
+      return null;
+    }
+  }
+}

examples/ag-ui/angular/src/app/itinerary-panel.component.spec.ts

@@ -31,4 +31,51 @@ describe('ItineraryPanelComponent — agent-edit pulse', () => {
     // satisfy lint
     expect(added.id).toBeDefined();
   });
+
+  it('toggles the itin--collapsed host class via the collapse button', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        ItineraryStore,
+        provideAgent(ITINERARY_AGENT, { url: '/__test__' }),
+      ],
+    });
+
+    const fixture = TestBed.createComponent(ItineraryPanelComponent);
+    fixture.detectChanges();
+
+    const host = fixture.nativeElement as HTMLElement;
+    expect(host.classList.contains('itin--collapsed')).toBe(false);
+
+    const toggle = host.querySelector('.itin__collapse') as HTMLButtonElement;
+    expect(toggle).toBeTruthy();
+
+    toggle.click();
+    fixture.detectChanges();
+    expect(host.classList.contains('itin--collapsed')).toBe(true);
+
+    toggle.click();
+    fixture.detectChanges();
+    expect(host.classList.contains('itin--collapsed')).toBe(false);
+  });
+
+  it('highlights the focused row', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        ItineraryStore,
+        provideAgent(ITINERARY_AGENT, { url: '/__test__' }),
+      ],
+    });
+    const store = TestBed.inject(ItineraryStore);
+    const stop = store.stops()[0];
+    store.focus(stop.id);
+
+    const fixture = TestBed.createComponent(ItineraryPanelComponent);
+    fixture.detectChanges();
+
+    const rows = fixture.nativeElement.querySelectorAll('.itin__stop');
+    const pulsing = Array.from(rows).filter((el: any) =>
+      el.classList.contains('itin__stop--pulse'),
+    );
+    expect(pulsing.length).toBe(1);
+  });
 });

examples/ag-ui/angular/src/app/itinerary-panel.component.ts

@@ -10,20 +10,34 @@ import { ItineraryStop, ItineraryStore } from './itinerary-store';
   standalone: true,
   imports: [DragDropModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'itin', role: 'region', 'aria-label': 'Trip itinerary' },
+  host: {
+    class: 'itin',
+    role: 'region',
+    'aria-label': 'Trip itinerary',
+    '[class.itin--collapsed]': 'collapsed()',
+  },
   template: `
     <div class="itin__head">
       <h2 class="itin__title">
         Trip itinerary
         <span class="itin__total">· {{ totalLabel() }}</span>
       </h2>
-      <button
-        type="button"
-        class="itin__overflow"
-        [attr.aria-expanded]="menuOpen()"
-        aria-label="Itinerary actions"
-        (click)="toggleMenu()"
-      >more_vert</button>
+      <div class="itin__head-actions">
+        <button
+          type="button"
+          class="itin__collapse"
+          [attr.aria-expanded]="!collapsed()"
+          aria-label="Toggle itinerary details"
+          (click)="toggleCollapsed()"
+        >{{ collapsed() ? 'expand_more' : 'expand_less' }}</button>
+        <button
+          type="button"
+          class="itin__overflow"
+          [attr.aria-expanded]="menuOpen()"
+          aria-label="Itinerary actions"
+          (click)="toggleMenu()"
+        >more_vert</button>
+      </div>
       @if (menuOpen()) {
         <div class="itin__menu" role="menu">
           <button type="button" class="itin__menu-item" role="menuitem" (click)="reset()">
@@ -59,7 +73,8 @@ import { ItineraryStop, ItineraryStore } from './itinerary-store';
             @for (s of g.stops; track s.id; let i = $index) {
               <li
                 class="itin__stop"
-                [class.itin__stop--pulse]="store.recentlyChangedId() === s.id"
+                [class.itin__stop--pulse]="store.recentlyChangedId() === s.id || store.focusedStopId() === s.id"
+                (click)="onRowClick(s.id, $event)"
                 cdkDrag
                 [cdkDragData]="s"
               >
@@ -421,12 +436,40 @@ import { ItineraryStop, ItineraryStore } from './itinerary-store';
         outline-offset: 2px;
         border-radius: 4px;
       }
+      .itin__head-actions {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+      .itin__collapse {
+        font-family: 'Material Symbols Outlined', sans-serif;
+        font-size: 18px;
+        background: transparent;
+        border: none;
+        color: var(--ngaf-chat-text-muted);
+        cursor: pointer;
+        padding: 4px;
+        line-height: 1;
+        border-radius: var(--ngaf-chat-radius-card);
+      }
+      .itin__collapse:hover {
+        background: var(--ngaf-chat-surface-alt);
+        color: var(--ngaf-chat-text);
+      }
+      :host(.itin--collapsed) [cdkDropListGroup],
+      :host(.itin--collapsed) .itin__add-day-btn {
+        display: none;
+      }
+      :host(.itin--collapsed) .itin__head {
+        margin-bottom: 0;
+      }
     `,
   ],
 })
 export class ItineraryPanelComponent {
   protected readonly store = inject(ItineraryStore);
   protected readonly menuOpen = signal(false);
+  protected readonly collapsed = signal(false);
   protected readonly composer = signal<number | null>(null);
   protected readonly composerText = signal('');
   protected readonly totalLabel = computed(() => {
@@ -444,6 +487,10 @@ export class ItineraryPanelComponent {
     this.menuOpen.update((v) => !v);
   }
 
+  protected toggleCollapsed(): void {
+    this.collapsed.update((v) => !v);
+  }
+
   protected reset(): void {
     this.store.reset({ source: 'user' });
     this.menuOpen.set(false);
@@ -473,6 +520,12 @@ export class ItineraryPanelComponent {
     this.store.remove(id, { source: 'user' });
   }
 
+  protected onRowClick(id: string, event: Event): void {
+    const target = event.target as HTMLElement;
+    if (target.closest('.itin__handle') || target.closest('.itin__remove')) return;
+    this.store.focus(id);
+  }
+
   protected onDrop(event: CdkDragDrop<ItineraryStop[]>, toDay: number): void {
     const stop = event.item.data as ItineraryStop;
     this.store.reorder(stop.id, toDay, event.currentIndex, { source: 'user' });