CUB-49: Global Action Modal component with tactical dark mode styling

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

@@ -0,0 +1,78 @@
+<!-- ============================================================================
+  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

@@ -0,0 +1,309 @@
+// ============================================================================
+// 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

@@ -0,0 +1,109 @@
+// ============================================================================
+// 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();
+  }
+}