CUB-122: Scaffold Control Center React frontend

frontend-legacy/src/app/layout/layout-shell/layout-shell.component.html

@@ -0,0 +1,27 @@
+<div class="layout-shell">
+  <!-- Desktop/Kiosk: Nav Rail on the left -->
+  <app-nav-rail class="layout-shell__nav-rail" />
+
+  <div class="layout-shell__main">
+    <!-- Header bar at top of content area -->
+    <app-header-bar class="layout-shell__header" (openQuickJump)="openQuickJump()" />
+
+    <!-- Scrollable content area -->
+    <main class="layout-shell__content">
+      <router-outlet />
+    </main>
+  </div>
+
+  <!-- Mobile: Bottom Navigation Bar -->
+  <app-bottom-nav class="layout-shell__bottom-nav" />
+</div>
+
+<!-- Quick-Jump Drawer (global overlay) -->
+<app-quick-jump-drawer />
+
+<!-- Agent Session Drawer (CUB-26) — desktop: side drawer, mobile: bottom sheet -->
+<app-agent-session-drawer
+  [isMobile]="isMobile()"
+  (openSession)="onOpenSession($event)"
+  (pinToDashboard)="onPinToDashboard($event)"
+/>

frontend-legacy/src/app/layout/layout-shell/layout-shell.component.scss

@@ -0,0 +1,73 @@
+// ============================================================================
+// Layout Shell — Adaptive layout container
+// Per CUB-27 spec breakpoints:
+//   Compact  (0–599px):  Header + Content + Bottom Nav (stacked)
+//   Medium   (600–1023px): Collapsed Nav Rail + Header + Content
+//   Expanded (≥1024px):  Expandable Nav Rail + Header + Content
+// ============================================================================
+
+.layout-shell {
+  display: flex;
+  min-height: 100vh;
+  background-color: var(--cc-background);
+}
+
+.layout-shell__nav-rail {
+  flex-shrink: 0;
+}
+
+.layout-shell__main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // Prevent flex overflow
+  overflow: hidden;
+}
+
+.layout-shell__header {
+  flex-shrink: 0;
+}
+
+.layout-shell__content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--cc-section-padding);
+}
+
+.layout-shell__bottom-nav {
+  flex-shrink: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Compact (0–599px): Stack layout vertically, bottom nav visible
+// ---------------------------------------------------------------------------
+@media (max-width: 599px) {
+  .layout-shell {
+    flex-direction: column;
+  }
+
+  .layout-shell__content {
+    padding: var(--cc-section-padding-compact);
+    // Account for bottom nav bar height
+    padding-bottom: calc(var(--cc-bottom-nav-height) + 16px);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Medium (600–1023px): Sidebar + content, collapsed nav rail
+// ---------------------------------------------------------------------------
+@media (min-width: 600px) and (max-width: 1023px) {
+  .layout-shell__content {
+    padding: 20px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Expanded (≥1024px): Full nav rail with expandable behavior
+// ---------------------------------------------------------------------------
+@media (min-width: 1024px) {
+  .layout-shell__content {
+    padding: var(--cc-section-padding);
+  }
+}

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

@@ -0,0 +1,85 @@
+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, AgentSessionDrawerComponent],
+  templateUrl: './layout-shell.component.html',
+  styleUrl: './layout-shell.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+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 {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+      event.preventDefault();
+      this.quickJumpDrawer?.toggle();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.breakpointSub.unsubscribe();
+  }
+}