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,31 +0,0 @@
-<!-- Backdrop overlay — click to dismiss -->
-<div class="global-action-modal__backdrop" #backdrop (click)="onBackdropClick()"></div>
-
-<!-- Modal panel -->
-<div class="global-action-modal__panel" (click)="onModalClick($event)" role="dialog" aria-modal="true" aria-label="Global Actions">
-
-  <!-- Header -->
-  <div class="global-action-modal__header">
-    <h2 class="global-action-modal__title">Global Actions</h2>
-    <button matIconButton
-            class="global-action-modal__close"
-            aria-label="Close modal"
-            (click)="onClose()">
-      <mat-icon>close</mat-icon>
-    </button>
-  </div>
-
-  <!-- Action grid -->
-  <div class="global-action-modal__actions">
-    @for (action of actions; track action.key) {
-      <button class="global-action-modal__action-btn global-action-modal__action-btn--{{ action.color }}"
-              (click)="onAction(action)">
-        <div class="global-action-modal__action-icon">
-          <mat-icon>{{ action.icon }}</mat-icon>
-        </div>
-        <span class="global-action-modal__action-label">{{ action.label }}</span>
-        <span class="global-action-modal__action-desc">{{ action.description }}</span>
-      </button>
-    }
-  </div>
-</div>

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

@@ -1,198 +0,0 @@
-// ============================================================================
-// Global Action Modal — Tactical Dark Mode Styling
-// Uses Control Center design tokens from styles.scss
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Backdrop
-// ---------------------------------------------------------------------------
-:host {
-  display: block;
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-}
-
-.global-action-modal__backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-}
-
-// ---------------------------------------------------------------------------
-// Modal Panel
-// ---------------------------------------------------------------------------
-.global-action-modal__panel {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: min(560px, calc(100vw - 48px));
-  background: var(--cc-surface-container);
-  border: 1px solid var(--cc-outline);
-  border-radius: var(--cc-card-border-radius);
-  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-}
-
-// ---------------------------------------------------------------------------
-// Header
-// ---------------------------------------------------------------------------
-.global-action-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px 12px;
-}
-
-.global-action-modal__title {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--cc-on-surface);
-  letter-spacing: 0.01em;
-}
-
-.global-action-modal__close {
-  --mat-icon-button-state-layer-color: transparent;
-  color: var(--cc-on-surface-variant);
-
-  &:hover {
-    color: var(--cc-on-surface);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Action Grid
-// ---------------------------------------------------------------------------
-.global-action-modal__actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  padding: 12px 24px 24px;
-}
-
-// ---------------------------------------------------------------------------
-// Action Button
-// ---------------------------------------------------------------------------
-.global-action-modal__action-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 20px 16px;
-  border: 1px solid var(--cc-outline);
-  border-radius: 12px;
-  background: var(--cc-surface);
-  color: var(--cc-on-surface);
-  cursor: pointer;
-  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
-  font-family: inherit;
-  text-align: center;
-
-  &:hover {
-    background: var(--cc-surface-container-high);
-    border-color: var(--cc-on-surface-variant);
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--mat-sys-primary, #38BDF8);
-    outline-offset: 2px;
-  }
-}
-
-// Action icon wrapper
-.global-action-modal__action-icon {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-
-  .mat-icon {
-    width: 28px;
-    height: 28px;
-    font-size: 28px;
-  }
-}
-
-// Action label
-.global-action-modal__action-label {
-  font-size: 15px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-}
-
-// Action description
-.global-action-modal__action-desc {
-  font-size: 12px;
-  color: var(--cc-on-surface-variant);
-  line-height: 1.4;
-}
-
-// ---------------------------------------------------------------------------
-// Color Variants — per-action accent colors
-// ---------------------------------------------------------------------------
-.global-action-modal__action-btn--deploy {
-  .global-action-modal__action-icon {
-    background: var(--status-active-bg);
-    color: var(--status-active);
-  }
-
-  &:hover {
-    border-color: var(--status-active);
-  }
-}
-
-.global-action-modal__action-btn--pause {
-  .global-action-modal__action-icon {
-    background: var(--status-idle-bg);
-    color: var(--status-idle);
-  }
-
-  &:hover {
-    border-color: var(--status-idle);
-  }
-}
-
-.global-action-modal__action-btn--emergency {
-  .global-action-modal__action-icon {
-    background: var(--status-error-bg);
-    color: var(--status-error);
-  }
-
-  &:hover {
-    border-color: var(--status-error);
-  }
-
-  .global-action-modal__action-label {
-    color: var(--status-error);
-  }
-}
-
-.global-action-modal__action-btn--add {
-  .global-action-modal__action-icon {
-    background: var(--status-thinking-bg);
-    color: var(--status-thinking);
-  }
-
-  &:hover {
-    border-color: var(--status-thinking);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Responsive — stack single column on narrow viewports
-// ---------------------------------------------------------------------------
-@media (max-width: 400px) {
-  .global-action-modal__actions {
-    grid-template-columns: 1fr;
-  }
-}

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

@@ -1,87 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-
-/**
- * Global Action Modal — overlay for fleet-wide commands.
- *
- * Four main actions: Deploy All, Pause All, Emergency Stop, Add Agent.
- * Tactical Dark Mode styling using Control Center design tokens.
- * Dismisses on backdrop click or close button.
- */
-@Component({
-  selector: 'app-global-action-modal',
-  standalone: true,
-  imports: [MatIconModule, MatButtonModule],
-  templateUrl: './global-action-modal.component.html',
-  styleUrl: './global-action-modal.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class GlobalActionModalComponent {
-  /** Emitted when any action button is clicked. Payload is the action key. */
-  @Output() readonly actionSelected = new EventEmitter<GlobalAction>();
-
-  /** Emitted when the modal is dismissed (backdrop click or close button). */
-  @Output() readonly dismissed = new EventEmitter<void>();
-
-  @ViewChild('backdrop') backdropEl!: ElementRef<HTMLElement>;
-
-  /** All available global actions. */
-  readonly actions: GlobalActionDef[] = [
-    {
-      key: 'deploy-all',
-      label: 'Deploy All',
-      description: 'Deploy all agents in the fleet',
-      icon: 'rocket_launch',
-      color: 'deploy',
-    },
-    {
-      key: 'pause-all',
-      label: 'Pause All',
-      description: 'Pause all running agents',
-      icon: 'pause_circle',
-      color: 'pause',
-    },
-    {
-      key: 'emergency-stop',
-      label: 'Emergency Stop',
-      description: 'Immediately halt all agents',
-      icon: 'emergency',
-      color: 'emergency',
-    },
-    {
-      key: 'add-agent',
-      label: 'Add Agent',
-      description: 'Register a new agent to the fleet',
-      icon: 'person_add',
-      color: 'add',
-    },
-  ];
-
-  onBackdropClick(): void {
-    this.dismissed.emit();
-  }
-
-  onModalClick(event: Event): void {
-    // Prevent clicks inside the modal panel from closing it
-    event.stopPropagation();
-  }
-
-  onClose(): void {
-    this.dismissed.emit();
-  }
-
-  onAction(action: GlobalActionDef): void {
-    this.actionSelected.emit(action.key);
-  }
-}
-
-export type GlobalAction = 'deploy-all' | 'pause-all' | 'emergency-stop' | 'add-agent';
-
-export interface GlobalActionDef {
-  key: GlobalAction;
-  label: string;
-  description: string;
-  icon: string;
-  color: 'deploy' | 'pause' | 'emergency' | 'add';
-}

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;