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 * from './quick-jump-button/quick-jump-button.component';

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

@@ -1,8 +0,0 @@
-<button
-  mat-icon-button
-  class="quick-jump-button"
-  [attr.aria-label]="'Jump to agent session'"
-  (click)="onJumpClick()"
->
-  <mat-icon>arrow_forward</mat-icon>
-</button>

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

@@ -1,68 +0,0 @@
-// ============================================================================
-// Quick-Jump Button — M3 FilledTonalIconButton
-// Per spec Section 7.3: Agent Card Quick-Jump action
-// M3 spec: FilledTonalIconButton uses secondary container color
-// with 8% state layer overlay for hover/focus.
-// ============================================================================
-
-.quick-jump-button {
-  // M3 FilledTonalIconButton: secondary-container background
-  // Angular Material mat-icon-button sets up the base shape (40x40, round).
-  // We override the color tokens to match FilledTonal style.
-  --mdc-icon-button-icon-color: var(--mat-sys-on-secondary-container);
-  background-color: var(--mat-sys-secondary-container);
-  border-radius: 50%;
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  // M3 State Layer: 8% overlay on hover
-  &:hover {
-    background-color: var(--mat-sys-secondary-container);
-    // State layer overlay using a pseudo-element for precise 8% opacity
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: 50%;
-      background-color: var(--mat-sys-on-secondary-container);
-      opacity: 0.08;
-      pointer-events: none;
-    }
-  }
-
-  // M3 State Layer: 12% overlay on focus-visible (slightly stronger for accessibility)
-  &:focus-visible {
-    background-color: var(--mat-sys-secondary-container);
-    outline: 3px solid var(--status-active);
-    outline-offset: 2px;
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: 50%;
-      background-color: var(--mat-sys-on-secondary-container);
-      opacity: 0.12;
-      pointer-events: none;
-    }
-  }
-
-  // M3 State Layer: 12% overlay on active/pressed
-  &:active {
-    background-color: var(--mat-sys-secondary-container);
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: 50%;
-      background-color: var(--mat-sys-on-secondary-container);
-      opacity: 0.12;
-      pointer-events: none;
-    }
-  }
-
-  // Icon color stays on-secondary-container across all states
-  .mat-icon {
-    color: var(--mat-sys-on-secondary-container);
-  }
-}

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

@@ -1,32 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-
-/**
- * Quick-Jump Button — M3 FilledTonalIconButton
- *
- * An icon button that emits a navigation event for jumping to an agent session.
- * Uses the Material Design 3 FilledTonalIconButton style with 8% state layer
- * overlay on hover and focus.
- *
- * Per spec Section 7.3: Agent Card Component Interface
- */
-@Component({
-  selector: 'app-quick-jump-button',
-  standalone: true,
-  imports: [MatIconButton, MatIcon],
-  templateUrl: './quick-jump-button.component.html',
-  styleUrl: './quick-jump-button.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class QuickJumpButtonComponent {
-  /** Emitted when the button is clicked, carrying the session key for navigation. */
-  @Output() jumpClick = new EventEmitter<string>();
-
-  /** The session key to navigate to. Set by the parent agent card. */
-  sessionKey = '';
-
-  onJumpClick(): void {
-    this.jumpClick.emit(this.sessionKey);
-  }
-}

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;