CUB-26: Quick-jump drawer and modal components

frontend/src/app/layout/layout-shell/layout-shell.component.ts

@@ -1,32 +1,75 @@
-import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { ChangeDetectionStrategy, Component, HostListener, OnDestroy, signal, ViewChild } from '@angular/core';
+import { Router, RouterOutlet } from '@angular/router';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Subscription } from 'rxjs';
 import { NavRailComponent } from '../nav-rail/nav-rail.component';
 import { BottomNavComponent } from '../bottom-nav/bottom-nav.component';
 import { HeaderBarComponent } from '../header-bar/header-bar.component';
 import { QuickJumpDrawerComponent } from '../../components/quick-jump-drawer/index';
+import { AgentSessionDrawerComponent } from '../../components/agent-session-drawer/index';
+import { AgentCardData } from '../../models/agent.model';
 
 /**
  * Layout Shell — wraps the main content area with adaptive navigation.
  * Desktop/Kiosk: Nav Rail (left) + Header + Content
  * Mobile: Header + Content + Bottom Nav
  * Per spec Section 3.1 (kiosk) and 3.2 (mobile).
+ * CUB-26: Hosts the Agent Session Drawer for quick-jump navigation.
  */
 @Component({
   selector: 'app-layout-shell',
   standalone: true,
-  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent],
+  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent, AgentSessionDrawerComponent],
   templateUrl: './layout-shell.component.html',
   styleUrl: './layout-shell.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LayoutShellComponent {
+export class LayoutShellComponent implements OnDestroy {
   @ViewChild(QuickJumpDrawerComponent) quickJumpDrawer!: QuickJumpDrawerComponent;
+  @ViewChild(AgentSessionDrawerComponent) sessionDrawer!: AgentSessionDrawerComponent;
+
+  /** Whether the viewport is mobile-sized. */
+  readonly isMobile = signal(false);
+
+  private readonly breakpointSub: Subscription;
+
+  constructor(
+    private readonly breakpointObserver: BreakpointObserver,
+    private readonly router: Router,
+  ) {
+    this.breakpointSub = this.breakpointObserver
+      .observe([Breakpoints.Handset, Breakpoints.Small])
+      .subscribe((result) => {
+        this.isMobile.set(result.matches);
+      });
+  }
 
   /** Open the quick-jump drawer from anywhere in the layout. */
   openQuickJump(): void {
     this.quickJumpDrawer?.open();
   }
 
+  /** Open the session drawer for a specific agent. */
+  openSessionDrawer(agent: AgentCardData): void {
+    this.sessionDrawer?.open(agent);
+  }
+
+  /** Open the session log page directly (long-press bypass). */
+  openSessionLog(sessionKey: string): void {
+    this.router.navigate(['/sessions'], { queryParams: { key: sessionKey } });
+  }
+
+  /** Handle "Open Full Session" action from session drawer. */
+  onOpenSession(sessionKey: string): void {
+    this.router.navigate(['/sessions'], { queryParams: { key: sessionKey } });
+  }
+
+  /** Handle "Pin to Dashboard" action from session drawer. */
+  onPinToDashboard(sessionKey: string): void {
+    // TODO: Implement pin-to-dashboard logic
+    console.log('[LayoutShell] Pin to dashboard:', sessionKey);
+  }
+
   /** Global keyboard shortcut: Ctrl+K or Cmd+K opens the quick-jump drawer. */
   @HostListener('document:keydown', ['$event'])
   onGlobalKeydown(event: KeyboardEvent): void {
@@ -35,4 +78,8 @@ export class LayoutShellComponent {
       this.quickJumpDrawer?.toggle();
     }
   }
+
+  ngOnDestroy(): void {
+    this.breakpointSub.unsubscribe();
+  }
 }