feat(examples-chat): App-mode cockpit layout (map bg + itinerary overlay + sidenav→drawer)

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

Author: blove

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

@@ -218,3 +218,39 @@
 .demo-shell__app-toggle.is-on .demo-shell__app-toggle-thumb {
   background: var(--tplane-chat-on-primary);
 }
+
+/* App-mode layout: full-bleed map with the itinerary panel floating as an
+ * overlay card (top-left) and the chat sidebar alongside via router-outlet. */
+.demo-shell__app-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  position: relative;
+  display: flex;
+}
+/* Popup mode only: the map is the full-bleed backdrop with the chat bubble
+   floating over it. (Sidebar mode renders the map inside the chat-sidebar's
+   flex content slot instead — see SidebarMode, Task 12 — so it gets its
+   column there.) */
+.demo-shell__map {
+  position: absolute;
+  inset: 0;
+}
+.demo-shell__itinerary-overlay {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  width: min(360px, 36vw);
+  max-height: calc(100vh - 120px);
+  overflow-y: auto;
+  background: var(--tplane-chat-bg);
+  border: 1px solid var(--tplane-chat-separator);
+  border-radius: var(--tplane-chat-radius-card);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+  z-index: 10;
+}
+.demo-shell__app-body .demo-shell__main {
+  position: relative;
+  z-index: 5;
+  flex: 1 1 auto;
+  min-width: 0;
+}

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

@@ -123,17 +123,38 @@
     </button>
   </chat-sidenav>
 
-  <div
-    class="demo-shell__main"
-    [attr.data-sidenav-mode]="sidenavMode() !== 'drawer' ? sidenavMode() : null"
-  >
-    <router-outlet />
-    @if (agent.interrupt && agent.interrupt()) {
-      <div class="demo-shell__interrupt-panel" role="region" aria-label="Approval required">
-        <chat-interrupt-panel [agent]="agent" (action)="onInterruptAction($event)" />
+  @if (appMode() === 'on') {
+    <div class="demo-shell__app-body">
+      <!-- Sidebar mode renders the map inside the chat-sidebar's flex content
+           slot (see SidebarMode, Task 12). Popup mode has no content slot, so
+           the map is the full-bleed backdrop here, with the chat bubble
+           floating over it. -->
+      @if (mode() === 'popup') {
+        <app-map-canvas class="demo-shell__map" />
+      }
+      <app-itinerary-panel class="demo-shell__itinerary-overlay" />
+      <div class="demo-shell__main">
+        <router-outlet />
+        @if (agent.interrupt && agent.interrupt()) {
+          <div class="demo-shell__interrupt-panel" role="region" aria-label="Approval required">
+            <chat-interrupt-panel [agent]="agent" (action)="onInterruptAction($event)" />
+          </div>
+        }
       </div>
-    }
-  </div>
+    </div>
+  } @else {
+    <div
+      class="demo-shell__main"
+      [attr.data-sidenav-mode]="sidenavMode() !== 'drawer' ? sidenavMode() : null"
+    >
+      <router-outlet />
+      @if (agent.interrupt && agent.interrupt()) {
+        <div class="demo-shell__interrupt-panel" role="region" aria-label="Approval required">
+          <chat-interrupt-panel [agent]="agent" (action)="onInterruptAction($event)" />
+        </div>
+      }
+    </div>
+  }
 
   <chat-history-search-palette
     [(open)]="paletteOpen"

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

@@ -468,6 +468,49 @@ describe('DemoShell — App mode routing', () => {
   });
 });
 
+describe('DemoShell — App-mode cockpit layout', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    TestBed.configureTestingModule({
+      providers: [
+        threadsAdapterProvider,
+        ItineraryStore,
+        provideRouter([
+          { path: 'embed', component: DemoShell },
+          { path: 'popup', component: DemoShell },
+          { path: 'sidebar', component: DemoShell },
+          { path: '', pathMatch: 'full', redirectTo: 'embed' },
+          { path: '**', redirectTo: 'embed' },
+        ]),
+      ],
+    });
+  });
+
+  it('renders the map backdrop + itinerary overlay and forces drawer sidenav in popup App mode', async () => {
+    const router = TestBed.inject(Router);
+    await router.navigateByUrl('/popup');
+    const fx = TestBed.createComponent(DemoShell);
+    fx.detectChanges();
+
+    const cmp = fx.componentInstance as unknown as {
+      appMode: { (): 'on' | 'off'; set(v: 'on' | 'off'): void };
+      sidenavMode: () => string;
+    };
+
+    cmp.appMode.set('on');
+    fx.detectChanges();
+
+    // App mode collapses the sidenav to its hamburger drawer.
+    expect(cmp.sidenavMode()).toBe('drawer');
+
+    // Popup App mode renders the full-bleed map backdrop + floating itinerary.
+    const el = fx.nativeElement as HTMLElement;
+    expect(el.querySelector('.demo-shell__app-body')).toBeTruthy();
+    expect(el.querySelector('app-map-canvas')).toBeTruthy();
+    expect(el.querySelector('app-itinerary-panel')).toBeTruthy();
+  });
+});
+
 // ── Itinerary ↔ checkpoint sync (Task 9) ────────────────────────────────────
 
 /** A FakeStreamTransport that records the payload of the most recent

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

@@ -41,6 +41,8 @@ import {
 } from '@threadplane/chat';
 import { PalettePersistence } from './palette-persistence.service';
 import { ProjectsService } from './projects.service';
+import { MapCanvasComponent } from '../map-canvas.component';
+import { ItineraryPanelComponent } from '../itinerary-panel.component';
 import { DEMO_AGENT } from './shell-tokens';
 import { createCanonicalDemoRuntimeTelemetrySink } from './runtime-telemetry';
 import { environment } from '../../environments/environment';
@@ -117,6 +119,8 @@ export function extractItinerary(value: unknown): ItineraryStop[] | null {
     ChatSidenavScrimComponent,
     ChatHistorySearchPaletteComponent,
     ChatSelectComponent,
+    MapCanvasComponent,
+    ItineraryPanelComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './demo-shell.component.html',
@@ -402,10 +406,13 @@ export class DemoShell {
     (this.persistence.read('sidenavMode') as 'expanded' | 'collapsed' | null) ?? 'expanded',
   );
 
-  /** Computed sidenav mode: viewport forces drawer below 768px, else user preference. */
-  protected readonly sidenavMode = computed<ChatSidenavMode>(() =>
-    this.viewportWidth() >= 768 ? this.storedDesktopMode() : 'drawer',
-  );
+  /** Computed sidenav mode: App mode forces drawer (the cockpit reclaims the
+   *  full width for the map + overlay), then viewport forces drawer below
+   *  768px, else user preference. */
+  protected readonly sidenavMode = computed<ChatSidenavMode>(() => {
+    if (this.appMode() === 'on') return 'drawer';
+    return this.viewportWidth() >= 768 ? this.storedDesktopMode() : 'drawer';
+  });
 
   /** Active threads filtered by the selected project (or all when none selected). */
   protected readonly visibleThreads = computed<Thread[]>(() => {