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/global-action-modal/global-action-modal.component.html

@@ -1,78 +0,0 @@
-<!-- ============================================================================
-  Global Action Modal (CUB-49)
-  Four primary actions with tactical dark mode styling.
-  Close button (×) and backdrop click both dismiss.
-  ========================================================================== -->
-
-<!-- Close button -->
-<button
-  class="global-action-modal__close"
-  mat-icon-button
-  aria-label="Close modal"
-  (click)="close()"
->
-  <mat-icon>close</mat-icon>
-</button>
-
-<!-- Modal header -->
-<h2 class="global-action-modal__title">
-  <mat-icon class="global-action-modal__title-icon" aria-hidden="true">terminal</mat-icon>
-  Command Center
-</h2>
-
-<p class="global-action-modal__subtitle">
-  Select an action to execute across all agents.
-</p>
-
-<!-- Action grid -->
-<div class="global-action-modal__actions">
-
-  <!-- Deploy All -->
-  <button
-    class="global-action-modal__action global-action-modal__action--deploy"
-    mat-flat-button
-    aria-label="Deploy all agents"
-    (click)="onDeployAll()"
-  >
-    <mat-icon class="global-action-modal__action-icon" aria-hidden="true">rocket_launch</mat-icon>
-    <span class="global-action-modal__action-label">Deploy All</span>
-    <span class="global-action-modal__action-desc">Activate all idle agents</span>
-  </button>
-
-  <!-- Pause All -->
-  <button
-    class="global-action-modal__action global-action-modal__action--pause"
-    mat-flat-button
-    aria-label="Pause all agents"
-    (click)="onPauseAll()"
-  >
-    <mat-icon class="global-action-modal__action-icon" aria-hidden="true">pause_circle</mat-icon>
-    <span class="global-action-modal__action-label">Pause All</span>
-    <span class="global-action-modal__action-desc">Suspend all running agents</span>
-  </button>
-
-  <!-- Emergency Stop -->
-  <button
-    class="global-action-modal__action global-action-modal__action--emergency"
-    mat-flat-button
-    aria-label="Emergency stop all agents"
-    (click)="onEmergencyStop()"
-  >
-    <mat-icon class="global-action-modal__action-icon" aria-hidden="true">emergency</mat-icon>
-    <span class="global-action-modal__action-label">Emergency Stop</span>
-    <span class="global-action-modal__action-desc">Immediately halt all operations</span>
-  </button>
-
-  <!-- Add Agent -->
-  <button
-    class="global-action-modal__action global-action-modal__action--add"
-    mat-flat-button
-    aria-label="Add a new agent"
-    (click)="onAddAgent()"
-  >
-    <mat-icon class="global-action-modal__action-icon" aria-hidden="true">add_circle</mat-icon>
-    <span class="global-action-modal__action-label">Add Agent</span>
-    <span class="global-action-modal__action-desc">Register a new agent to the fleet</span>
-  </button>
-
-</div>

frontend/src/app/components/global-action-modal/global-action-modal.component.scss

@@ -1,309 +0,0 @@
-// ============================================================================
-// Global Action Modal Styles — M3 Tactical Dark (CUB-49)
-// Uses CUB-47 CSS custom properties for palette consistency.
-// Smooth fade/scale animation on open/close.
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Dialog Container Override
-// ---------------------------------------------------------------------------
-// Override the MatDialog container to use tactical dark styling.
-// ---------------------------------------------------------------------------
-
-:host {
-  display: block;
-  position: relative;
-  outline: none;
-}
-
-// ---------------------------------------------------------------------------
-// Close Button
-// ---------------------------------------------------------------------------
-.global-action-modal__close {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  z-index: 1;
-  color: var(--cc-on-surface-variant);
-  --mat-icon-button-state-layer-color: transparent;
-
-  &:hover,
-  &:focus {
-    color: var(--color-text-primary);
-    background-color: rgba(255, 255, 255, 0.08);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Title & Subtitle
-// ---------------------------------------------------------------------------
-.global-action-modal__title {
-  margin: 0 0 4px 0;
-  font-size: 22px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  letter-spacing: -0.01em;
-}
-
-.global-action-modal__title-icon {
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-  color: var(--color-primary);
-}
-
-.global-action-modal__subtitle {
-  margin: 0 0 24px 0;
-  font-size: 14px;
-  color: var(--cc-on-surface-variant);
-  line-height: 1.5;
-}
-
-// ---------------------------------------------------------------------------
-// Action Grid
-// ---------------------------------------------------------------------------
-.global-action-modal__actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-}
-
-// ---------------------------------------------------------------------------
-// Action Buttons
-// ---------------------------------------------------------------------------
-.global-action-modal__action {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 24px 16px;
-  border-radius: 16px;
-  min-height: 140px;
-  text-align: center;
-  transition: background-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
-  cursor: pointer;
-  border: 1px solid transparent;
-
-  // Reset default mat-button styles to let our custom styles take over
-  --mat-flat-button-state-layer-color: transparent;
-
-  // Hover lift effect
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  }
-
-  // Active press effect
-  &:active {
-    transform: translateY(0);
-  }
-
-  // Focus-visible for keyboard users
-  &:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Action Variants — each with distinct color personality
-// ---------------------------------------------------------------------------
-
-// Deploy All — Primary/cyan accent
-.global-action-modal__action--deploy {
-  background-color: rgba(56, 189, 248, 0.12);
-  border-color: rgba(56, 189, 248, 0.25);
-  color: var(--color-primary);
-
-  &:hover {
-    background-color: rgba(56, 189, 248, 0.2);
-  }
-
-  .global-action-modal__action-icon {
-    color: var(--color-primary);
-  }
-}
-
-// Pause All — Secondary/teal accent
-.global-action-modal__action--pause {
-  background-color: rgba(45, 212, 191, 0.12);
-  border-color: rgba(45, 212, 191, 0.25);
-  color: var(--color-secondary);
-
-  &:hover {
-    background-color: rgba(45, 212, 191, 0.2);
-  }
-
-  .global-action-modal__action-icon {
-    color: var(--color-secondary);
-  }
-}
-
-// Emergency Stop — Danger/red accent
-.global-action-modal__action--emergency {
-  background-color: rgba(248, 113, 113, 0.12);
-  border-color: rgba(248, 113, 113, 0.25);
-  color: var(--color-danger);
-
-  &:hover {
-    background-color: rgba(248, 113, 113, 0.2);
-  }
-
-  .global-action-modal__action-icon {
-    color: var(--color-danger);
-  }
-}
-
-// Add Agent — Accent/violet
-.global-action-modal__action--add {
-  background-color: rgba(167, 139, 250, 0.12);
-  border-color: rgba(167, 139, 250, 0.25);
-  color: var(--color-accent);
-
-  &:hover {
-    background-color: rgba(167, 139, 250, 0.2);
-  }
-
-  .global-action-modal__action-icon {
-    color: var(--color-accent);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Action Icon
-// ---------------------------------------------------------------------------
-.global-action-modal__action-icon {
-  font-size: 36px;
-  width: 36px;
-  height: 36px;
-}
-
-// ---------------------------------------------------------------------------
-// Action Label & Description
-// ---------------------------------------------------------------------------
-.global-action-modal__action-label {
-  font-size: 16px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-}
-
-.global-action-modal__action-desc {
-  font-size: 12px;
-  opacity: 0.7;
-  line-height: 1.4;
-}
-
-// ---------------------------------------------------------------------------
-// MatDialog Overlay — tactical dark theme overrides
-// ---------------------------------------------------------------------------
-// These selectors target the Angular Material dialog overlay container
-// and panel to apply our custom styling.
-// ---------------------------------------------------------------------------
-
-::ng-deep .mat-mdc-dialog-container {
-  background-color: var(--cc-surface-container) !important;
-  border-radius: 24px !important;
-  padding: 32px !important;
-  border: 1px solid var(--cc-outline);
-  box-shadow:
-    0 24px 80px rgba(0, 0, 0, 0.6),
-    0 8px 32px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-}
-
-::ng-deep .mat-mdc-dialog-surface {
-  background-color: transparent !important;
-  box-shadow: none !important;
-}
-
-// Backdrop overlay styling
-::ng-deep .cdk-overlay-dark-backdrop {
-  background-color: rgba(13, 15, 18, 0.85);
-}
-
-// ---------------------------------------------------------------------------
-// Dialog Animation — fade + scale
-// ---------------------------------------------------------------------------
-// Material Dialog's default animation is overridden here with a
-// smooth scale+fade for a tactical "materializing" effect.
-// ---------------------------------------------------------------------------
-
-::ng-deep .global-action-modal-dialog .mat-mdc-dialog-container {
-  animation: modalFadeScaleIn 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-::ng-deep .global-action-modal-dialog.cdk-dialog-exiting .mat-mdc-dialog-container {
-  animation: modalFadeScaleOut 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
-}
-
-@keyframes modalFadeScaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.92);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes modalFadeScaleOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.92);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Responsive: Mobile adjustments — single column on narrow screens
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  .global-action-modal__actions {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-
-  .global-action-modal__action {
-    min-height: 100px;
-    padding: 16px;
-  }
-
-  .global-action-modal__title {
-    font-size: 18px;
-  }
-
-  ::ng-deep .mat-mdc-dialog-container {
-    padding: 24px !important;
-    border-radius: 20px !important;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Accessibility: Reduced Motion
-// ---------------------------------------------------------------------------
-@media (prefers-reduced-motion: reduce) {
-  .global-action-modal__action {
-    transition: none;
-  }
-
-  ::ng-deep .global-action-modal-dialog .mat-mdc-dialog-container {
-    animation: none;
-  }
-
-  ::ng-deep .global-action-modal-dialog.cdk-dialog-exiting .mat-mdc-dialog-container {
-    animation: none;
-  }
-}

frontend/src/app/components/global-action-modal/global-action-modal.component.ts

@@ -1,109 +0,0 @@
-// ============================================================================
-// Global Action Modal Component (CUB-49)
-// Modal overlay with four primary actions: Deploy All, Pause All,
-// Emergency Stop, and Add Agent. Uses Angular Material Dialog with
-// tactical dark mode styling per CUB-47 CSS variables.
-// ============================================================================
-
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  HostListener,
-  inject,
-  Output,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-
-/**
- * GlobalActionModal presents four primary control-center actions in a
- * modal overlay with tactical dark mode styling.
- *
- * Actions emit dedicated output events:
- * - deployAll   → emit when "Deploy All" is clicked
- * - pauseAll    → emit when "Pause All" is clicked
- * - emergencyStop → emit when "Emergency Stop" is clicked
- * - addAgent    → emit when "Add Agent" is clicked
- *
- * Close button (×) and backdrop click both dismiss the modal.
- * Smooth fade/scale animation on open and close.
- */
-@Component({
-  selector: 'app-global-action-modal',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatIconModule,
-  ],
-  templateUrl: './global-action-modal.component.html',
-  styleUrl: './global-action-modal.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class GlobalActionModalComponent {
-  /** Emitted when Deploy All is clicked. */
-  @Output()
-  readonly deployAll = new EventEmitter<void>();
-
-  /** Emitted when Pause All is clicked. */
-  @Output()
-  readonly pauseAll = new EventEmitter<void>();
-
-  /** Emitted when Emergency Stop is clicked. */
-  @Output()
-  readonly emergencyStop = new EventEmitter<void>();
-
-  /** Emitted when Add Agent is clicked. */
-  @Output()
-  readonly addAgent = new EventEmitter<void>();
-
-  /** MatDialogRef injected when opened as a Material dialog. */
-  private readonly dialogRef = inject(MatDialogRef<GlobalActionModalComponent>, { optional: true });
-
-  // ---------------------------------------------------------------------------
-  // Action Handlers
-  // ---------------------------------------------------------------------------
-
-  /** Deploy All — emit and close. */
-  onDeployAll(): void {
-    this.deployAll.emit();
-    this.close();
-  }
-
-  /** Pause All — emit and close. */
-  onPauseAll(): void {
-    this.pauseAll.emit();
-    this.close();
-  }
-
-  /** Emergency Stop — emit and close. */
-  onEmergencyStop(): void {
-    this.emergencyStop.emit();
-    this.close();
-  }
-
-  /** Add Agent — emit and close. */
-  onAddAgent(): void {
-    this.addAgent.emit();
-    this.close();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Close Handling
-  // ---------------------------------------------------------------------------
-
-  /** Close the modal. Works with MatDialog backdrop click and close button. */
-  close(): void {
-    this.dialogRef?.close();
-  }
-
-  /** Allow Escape key to close the dialog. */
-  @HostListener('document:keydown.escape')
-  onEscapeKey(): void {
-    this.close();
-  }
-}

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;