Merge branch 'dev' into agent/rex/CUB-47-dark-mode-variables

Reviewed-on: #12
Reviewed-by: Otto the Minion <otto@code.cubecraftcreations.com>
Reviewed-by: Joshua <joshua@cnjmail.com>

frontend/src/app/components/index.ts

@@ -1 +0,0 @@
-export { QuickJumpDrawerComponent } from './quick-jump-drawer/index';

frontend/src/app/components/quick-jump-drawer/index.ts

@@ -1 +0,0 @@
-export { QuickJumpDrawerComponent } from './quick-jump-drawer.component';

frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.html

@@ -1,109 +0,0 @@
-<!-- ============================================================================
-  Quick-Jump Drawer — Slide-out panel for fast agent switching
-  Per CUB-51: Slides from right, agent list with status badges,
-  search/filter input, closes via ESC or outside click.
-  ============================================================================-->
-
-<!-- Backdrop overlay -->
-@if (isOpen()) {
-  <div
-    class="quick-jump-backdrop"
-    (click)="onBackdropClick($event)"
-    [@backdropEnter]
-  ></div>
-}
-
-<!-- Drawer panel -->
-<div
-  class="quick-jump-drawer"
-  [class.quick-jump-drawer--open]="isOpen()"
-  (keydown)="onDrawerKeydown($event)"
-  role="dialog"
-  aria-label="Quick jump to agent"
-  [attr.aria-hidden]="!isOpen()"
->
-  <!-- Drawer header -->
-  <div class="quick-jump-drawer__header">
-    <h2 class="quick-jump-drawer__title">Jump to Agent</h2>
-    <button
-      class="quick-jump-drawer__close-btn"
-      type="button"
-      aria-label="Close drawer"
-      (click)="close()"
-    >
-      ✕
-    </button>
-  </div>
-
-  <!-- Search input -->
-  <div class="quick-jump-drawer__search">
-    <span class="quick-jump-drawer__search-icon">search</span>
-    <input
-      #searchInput
-      type="text"
-      class="quick-jump-drawer__search-input"
-      placeholder="Search agents..."
-      [formControl]="searchControl"
-      autocomplete="off"
-      aria-label="Search agents"
-    />
-    @if (searchControl.value) {
-      <button
-        class="quick-jump-drawer__search-clear"
-        type="button"
-        aria-label="Clear search"
-        (click)="searchControl.setValue('')"
-      >
-        ✕
-      </button>
-    }
-  </div>
-
-  <!-- Agent list -->
-  <ul class="quick-jump-drawer__agent-list" role="listbox" aria-label="Agent list">
-    @for (agent of filteredAgents(); track agent.id; let i = $index) {
-      <li
-        [id]="'quick-jump-agent-' + i"
-        class="quick-jump-drawer__agent-item"
-        [class.quick-jump-drawer__agent-item--highlighted]="highlightedIndex() === i"
-        role="option"
-        [attr.aria-selected]="highlightedIndex() === i"
-        (click)="selectAgent(agent)"
-        (mouseenter)="highlightedIndex.set(i)"
-        (mouseleave)="highlightedIndex.set(-1)"
-      >
-        <!-- Status badge -->
-        <span
-          class="status-dot {{ getStatusClass(agent.status) }}"
-          [attr.aria-label]="getStatusLabel(agent.status)"
-        ></span>
-
-        <!-- Agent info -->
-        <div class="quick-jump-drawer__agent-info">
-          <span class="quick-jump-drawer__agent-name">{{ agent.displayName }}</span>
-          <span class="quick-jump-drawer__agent-role">{{ agent.role }}</span>
-        </div>
-
-        <!-- Status label -->
-        <span class="quick-jump-drawer__agent-status-label" [class]="'status-label--' + agent.status">
-          {{ getStatusLabel(agent.status) }}
-        </span>
-      </li>
-    } @empty {
-      <li class="quick-jump-drawer__empty">
-        @if (searchControl.value) {
-          <span>No agents matching "{{ searchControl.value }}"</span>
-        } @else {
-          <span>No agents online</span>
-        }
-      </li>
-    }
-  </ul>
-
-  <!-- Footer hint -->
-  <div class="quick-jump-drawer__footer">
-    <span class="quick-jump-drawer__footer-hint">
-      <kbd>↑↓</kbd> Navigate &nbsp; <kbd>↵</kbd> Select &nbsp; <kbd>Esc</kbd> Close
-    </span>
-  </div>
-</div>

frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.scss

@@ -1,333 +0,0 @@
-// ============================================================================
-// Quick-Jump Drawer — Slide-out panel for fast agent switching
-// Per CUB-51: slides from right, agent list with status badges,
-// search/filter input, closes via ESC or outside click.
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Backdrop
-// ---------------------------------------------------------------------------
-.quick-jump-backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 998;
-  opacity: 0;
-  transition: opacity 200ms ease-out;
-
-  &.backdrop-visible {
-    opacity: 1;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Drawer Panel
-// ---------------------------------------------------------------------------
-.quick-jump-drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 380px;
-  max-width: 90vw;
-  background-color: var(--cc-surface-container);
-  border-left: 1px solid var(--cc-outline);
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  transform: translateX(100%);
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
-
-  &--open {
-    transform: translateX(0);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Header
-// ---------------------------------------------------------------------------
-.quick-jump-drawer__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px 12px;
-  border-bottom: 1px solid var(--cc-outline);
-}
-
-.quick-jump-drawer__title {
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--cc-on-surface);
-  margin: 0;
-  letter-spacing: -0.01em;
-}
-
-.quick-jump-drawer__close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--cc-on-surface-variant);
-  font-size: 18px;
-  cursor: pointer;
-  transition: background-color 150ms ease, color 150ms ease;
-
-  &:hover {
-    background-color: var(--cc-surface-container-high);
-    color: var(--cc-on-surface);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--status-active);
-    outline-offset: 2px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Search
-// ---------------------------------------------------------------------------
-.quick-jump-drawer__search {
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin: 16px 24px 8px;
-  border: 1px solid var(--cc-outline);
-  border-radius: 12px;
-  background-color: var(--cc-surface-container-high);
-  transition: border-color 150ms ease;
-
-  &:focus-within {
-    border-color: var(--status-active);
-  }
-}
-
-.quick-jump-drawer__search-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: 12px;
-  font-family: 'Material Icons';
-  font-size: 20px;
-  color: var(--cc-on-surface-variant);
-  pointer-events: none;
-  user-select: none;
-
-  // Use a simple "search" text since icon font may not be loaded inside
-  // the drawer — rely on Material icon font from the parent app
-  &::before {
-    content: 'search';
-    font-family: 'Material Icons';
-  }
-}
-
-.quick-jump-drawer__search-input {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  padding: 12px 8px;
-  font-size: 15px;
-  font-family: 'Inter', 'Roboto', sans-serif;
-  color: var(--cc-on-surface);
-
-  &::placeholder {
-    color: var(--cc-on-surface-variant);
-    opacity: 0.7;
-  }
-}
-
-.quick-jump-drawer__search-clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  margin-right: 4px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--cc-on-surface-variant);
-  font-size: 14px;
-  cursor: pointer;
-  transition: background-color 150ms ease, color 150ms ease;
-
-  &:hover {
-    background-color: var(--cc-surface-container);
-    color: var(--cc-on-surface);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--status-active);
-    outline-offset: 2px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Agent List
-// ---------------------------------------------------------------------------
-.quick-jump-drawer__agent-list {
-  list-style: none;
-  margin: 0;
-  padding: 8px 12px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.quick-jump-drawer__agent-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: background-color 150ms ease;
-
-  &:hover,
-  &--highlighted {
-    background-color: var(--cc-surface-container-high);
-  }
-
-  &--highlighted {
-    outline: 2px solid var(--status-active);
-    outline-offset: -2px;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--status-active);
-    outline-offset: 2px;
-  }
-}
-
-.quick-jump-drawer__agent-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0; // Allow text truncation
-  flex: 1;
-}
-
-.quick-jump-drawer__agent-name {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--cc-on-surface);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.quick-jump-drawer__agent-role {
-  font-size: 12px;
-  color: var(--cc-on-surface-variant);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.quick-jump-drawer__agent-status-label {
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 3px 8px;
-  border-radius: 6px;
-  white-space: nowrap;
-
-  &.status-label--active {
-    color: var(--status-active);
-    background-color: var(--status-active-bg);
-  }
-
-  &.status-label--idle {
-    color: var(--status-idle);
-    background-color: var(--status-idle-bg);
-  }
-
-  &.status-label--thinking {
-    color: var(--status-thinking);
-    background-color: var(--status-thinking-bg);
-  }
-
-  &.status-label--error {
-    color: var(--status-error);
-    background-color: var(--status-error-bg);
-  }
-
-  &.status-label--offline {
-    color: var(--status-offline);
-    background-color: rgba(100, 116, 139, 0.12);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Empty State
-// ---------------------------------------------------------------------------
-.quick-jump-drawer__empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 24px;
-  color: var(--cc-on-surface-variant);
-  font-size: 14px;
-  text-align: center;
-}
-
-// ---------------------------------------------------------------------------
-// Footer
-// ---------------------------------------------------------------------------
-.quick-jump-drawer__footer {
-  padding: 12px 24px 16px;
-  border-top: 1px solid var(--cc-outline);
-}
-
-.quick-jump-drawer__footer-hint {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  font-size: 11px;
-  color: var(--cc-on-surface-variant);
-  opacity: 0.7;
-
-  kbd {
-    display: inline-block;
-    padding: 2px 6px;
-    font-size: 11px;
-    font-family: var(--cc-font-mono);
-    background-color: var(--cc-surface-container-high);
-    border: 1px solid var(--cc-outline);
-    border-radius: 4px;
-    color: var(--cc-on-surface-variant);
-    line-height: 1.4;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Mobile Adjustments
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  .quick-jump-drawer {
-    width: 100%;
-    max-width: 100vw;
-  }
-
-  .quick-jump-drawer__header {
-    padding: 16px 16px 10px;
-  }
-
-  .quick-jump-drawer__search {
-    margin: 12px 16px 8px;
-  }
-
-  .quick-jump-drawer__agent-list {
-    padding: 4px 8px;
-  }
-
-  .quick-jump-drawer__footer {
-    padding: 10px 16px 14px;
-  }
-}

frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.ts

@@ -1,215 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  OnDestroy,
-  Output,
-  signal,
-  ViewChild,
-} from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { Subject, takeUntil } from 'rxjs';
-import { AgentCardData } from '../../models/agent.model';
-import { AgentStatusService } from '../../services/agent-status.service';
-
-@Component({
-  selector: 'app-quick-jump-drawer',
-  standalone: true,
-  imports: [ReactiveFormsModule],
-  templateUrl: './quick-jump-drawer.component.html',
-  styleUrl: './quick-jump-drawer.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class QuickJumpDrawerComponent implements OnDestroy {
-  /** Emits when the drawer should close (ESC, outside click, or item select). */
-  @Output() readonly drawerClose = new EventEmitter<void>();
-
-  /** Whether the drawer is visible. */
-  readonly isOpen = signal(false);
-
-  /** Search/filter input control. */
-  readonly searchControl = new FormControl('', { nonNullable: true });
-
-  /** Filtered agent list based on search. */
-  readonly filteredAgents = signal<AgentCardData[]>([]);
-
-  /** Track which agent row is highlighted via keyboard navigation. */
-  readonly highlightedIndex = signal(-1);
-
-  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
-  @ViewChild('drawerPanel') drawerPanel!: ElementRef<HTMLElement>;
-
-  private readonly destroy$ = new Subject<void>();
-
-  constructor(private readonly agentStatusService: AgentStatusService) {
-    // Reactively filter agents as the search input changes
-    this.searchControl.valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((query) => this.filterAgents(query));
-
-    // Initial load
-    this.filterAgents('');
-  }
-
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  /** Open the drawer and focus the search input. */
-  open(): void {
-    this.isOpen.set(true);
-    this.searchControl.setValue('', { emitEvent: false });
-    this.highlightedIndex.set(-1);
-    // Focus search input after animation frame (drawer needs to render first)
-    requestAnimationFrame(() => {
-      this.searchInput?.nativeElement?.focus();
-    });
-  }
-
-  /** Close the drawer. */
-  close(): void {
-    this.isOpen.set(false);
-    this.searchControl.setValue('', { emitEvent: false });
-    this.highlightedIndex.set(-1);
-    this.drawerClose.emit();
-  }
-
-  /** Toggle the drawer open/close. */
-  toggle(): void {
-    if (this.isOpen()) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Keyboard Handling
-  // ---------------------------------------------------------------------------
-
-  @HostListener('document:keydown.escape')
-  onEscapeKey(): void {
-    if (this.isOpen()) {
-      this.close();
-    }
-  }
-
-  /** Handle keyboard navigation within the drawer panel. */
-  onDrawerKeydown(event: KeyboardEvent): void {
-    const agents = this.filteredAgents();
-    if (!agents.length) return;
-
-    switch (event.key) {
-      case 'ArrowDown': {
-        event.preventDefault();
-        this.highlightedIndex.update((i) =>
-          i < agents.length - 1 ? i + 1 : 0
-        );
-        this.scrollIntoView();
-        break;
-      }
-      case 'ArrowUp': {
-        event.preventDefault();
-        this.highlightedIndex.update((i) =>
-          i > 0 ? i - 1 : agents.length - 1
-        );
-        this.scrollIntoView();
-        break;
-      }
-      case 'Enter': {
-        const idx = this.highlightedIndex();
-        if (idx >= 0 && idx < agents.length) {
-          this.selectAgent(agents[idx]);
-        }
-        break;
-      }
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Outside Click
-  // ---------------------------------------------------------------------------
-
-  /** Close when clicking on the backdrop (outside the panel). */
-  onBackdropClick(event: MouseEvent): void {
-    if (
-      this.drawerPanel?.nativeElement &&
-      !this.drawerPanel.nativeElement.contains(event.target as Node)
-    ) {
-      this.close();
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Agent Selection
-  // ---------------------------------------------------------------------------
-
-  /** Select an agent — navigates or focuses the agent card. */
-  selectAgent(agent: AgentCardData): void {
-    // TODO: Wire up navigation to the selected agent's detail view
-    // For now, emit close after selection
-    console.log('[QuickJump] Selected agent:', agent.id);
-    this.close();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Status Helpers
-  // ---------------------------------------------------------------------------
-
-  /** Get the CSS class for a given agent status. */
-  getStatusClass(status: string): string {
-    return `status-dot--${status}`;
-  }
-
-  /** Get a human-readable label for an agent status. */
-  getStatusLabel(status: string): string {
-    const labels: Record<string, string> = {
-      active: 'Active',
-      idle: 'Idle',
-      thinking: 'Thinking',
-      error: 'Error',
-      offline: 'Offline',
-    };
-    return labels[status] ?? status;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Lifecycle
-  // ---------------------------------------------------------------------------
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Private
-  // ---------------------------------------------------------------------------
-
-  private filterAgents(query: string): void {
-    const allAgents = this.agentStatusService.agents();
-    const lowerQuery = query.toLowerCase().trim();
-
-    if (!lowerQuery) {
-      this.filteredAgents.set(allAgents);
-      return;
-    }
-
-    const filtered = allAgents.filter(
-      (agent) =>
-        agent.displayName.toLowerCase().includes(lowerQuery) ||
-        agent.id.toLowerCase().includes(lowerQuery) ||
-        agent.role.toLowerCase().includes(lowerQuery)
-    );
-    this.filteredAgents.set(filtered);
-    this.highlightedIndex.set(-1);
-  }
-
-  private scrollIntoView(): void {
-    const idx = this.highlightedIndex();
-    const el = document.getElementById(`quick-jump-agent-${idx}`);
-    el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-  }
-}

frontend/src/app/layout/header-bar/header-bar.component.html

@@ -2,16 +2,6 @@
   <h1 class="header-bar__title">Command Hub</h1>
 
   <div class="header-bar__actions">
-    <!-- Quick-Jump trigger -->
-    <button
-      class="header-bar__action-btn"
-      mat-icon-button
-      aria-label="Jump to agent"
-      (click)="openQuickJump.emit()"
-    >
-      <mat-icon>keyboard_command_key</mat-icon>
-    </button>
-
     <!-- Live indicator -->
     <button
       class="header-bar__action-btn header-bar__live-btn"

frontend/src/app/layout/header-bar/header-bar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatBadgeModule } from '@angular/material/badge';
@@ -17,9 +17,6 @@ import { MatBadgeModule } from '@angular/material/badge';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderBarComponent {
-  /** Emits when the user requests the Quick-Jump drawer. */
-  @Output() readonly openQuickJump = new EventEmitter<void>();
-
   protected readonly notificationCount = signal(3);
   protected readonly isConnected = signal(true);
 

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

@@ -4,7 +4,7 @@
 
   <div class="layout-shell__main">
     <!-- Header bar at top of content area -->
-    <app-header-bar class="layout-shell__header" (openQuickJump)="openQuickJump()" />
+    <app-header-bar class="layout-shell__header" />
 
     <!-- Scrollable content area -->
     <main class="layout-shell__content">
@@ -15,6 +15,3 @@
   <!-- Mobile: Bottom Navigation Bar -->
   <app-bottom-nav class="layout-shell__bottom-nav" />
 </div>
-
-<!-- Quick-Jump Drawer (global overlay) -->
-<app-quick-jump-drawer />

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

@@ -1,9 +1,8 @@
-import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 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';
 
 /**
  * Layout Shell — wraps the main content area with adaptive navigation.
@@ -14,25 +13,9 @@ import { QuickJumpDrawerComponent } from '../../components/quick-jump-drawer/ind
 @Component({
   selector: 'app-layout-shell',
   standalone: true,
-  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent],
+  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent],
   templateUrl: './layout-shell.component.html',
   styleUrl: './layout-shell.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LayoutShellComponent {
+export class LayoutShellComponent {}
-  @ViewChild(QuickJumpDrawerComponent) quickJumpDrawer!: QuickJumpDrawerComponent;
-
-  /** Open the quick-jump drawer from anywhere in the layout. */
-  openQuickJump(): void {
-    this.quickJumpDrawer?.open();
-  }
-
-  /** 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();
-    }
-  }
-}

frontend/src/app/pages/hub/hub-page.component.scss

@@ -0,0 +1,28 @@
+// ============================================================================
+// Hub Page — Responsive AgentCard Grid
+// Desktop (≥1024px): 2×2 grid
+// Mobile (<1024px): single-column stack
+// ============================================================================
+
+.hub-page {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: var(--cc-section-padding, 16px);
+  min-height: 400px;
+  overflow-x: hidden;
+}
+
+.hub-page__placeholder {
+  color: var(--cc-on-surface-variant);
+  font-size: 16px;
+  text-align: center;
+  padding: 24px 0;
+}
+
+// Desktop / kiosk breakpoint — 2-column grid
+@media (min-width: 1024px) {
+  .hub-page {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

frontend/src/app/pages/hub/hub-page.component.ts

@@ -9,18 +9,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       <p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
     </div>
   `,
-  styles: [`
+  styleUrl: './hub-page.component.scss',
-    .hub-page {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 400px;
-    }
-    .hub-page__placeholder {
-      color: var(--cc-on-surface-variant);
-      font-size: 16px;
-    }
-  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HubPageComponent {}

frontend/src/styles.scss

@@ -48,6 +48,17 @@ html {
 // These are NOT part of the M3 tonal palette; they are semantic overrides.
 // ---------------------------------------------------------------------------
 :root {
+  // --- Tactical Dark Mode color palette (CUB-47) ---
+  --color-surface: #0F172A;
+  --color-surface-light: #1E293B;
+  --color-primary: #38BDF8;
+  --color-secondary: #2DD4BF;
+  --color-accent: #A78BFA;
+  --color-danger: #F87171;
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #94A3B8;
+  --color-border: #334155;
+
   // --- Status colors ---
   --status-active: #38BDF8;
   --status-idle: #2DD4BF;
@@ -90,7 +101,7 @@ html {
 // Global Body Styles
 // ---------------------------------------------------------------------------
 body {
-  background-color: var(--cc-background);
+  background-color: var(--color-surface);
   color: var(--cc-on-surface);
   font-family: 'Inter', 'Roboto', sans-serif;
   margin: 0;