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

2026-04-26 13:50:45 +00:00
3 changed files with 384 additions and 204 deletions
--- a/frontend/src/app/components/global-action-modal/global-action-modal.component.html
+++ b/frontend/src/app/components/global-action-modal/global-action-modal.component.html
@@ -1,31 +1,78 @@
-<!-- Backdrop overlay — click to dismiss -->
-<div class="global-action-modal__backdrop" #backdrop (click)="onBackdropClick()"></div>
+<!-- ============================================================================
+  Global Action Modal (CUB-49)
+  Four primary actions with tactical dark mode styling.
+  Close button (×) and backdrop click both dismiss.
+  ========================================================================== -->

-<!-- Modal panel -->
-<div class="global-action-modal__panel" (click)="onModalClick($event)" role="dialog" aria-modal="true" aria-label="Global Actions">
+<!-- Close button -->
+<button
+  class="global-action-modal__close"
+  mat-icon-button
+  aria-label="Close modal"
+  (click)="close()"
+>
+  <mat-icon>close</mat-icon>
+</button>

-  <!-- 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>
+<!-- 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>

-  <!-- 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>
--- a/frontend/src/app/components/global-action-modal/global-action-modal.component.scss
+++ b/frontend/src/app/components/global-action-modal/global-action-modal.component.scss
@@ -1,66 +1,70 @@
 // ============================================================================
-// Global Action Modal — Tactical Dark Mode Styling
-// Uses Control Center design tokens from styles.scss
+// 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.
 // ============================================================================

 // ---------------------------------------------------------------------------
-// Backdrop
+// Dialog Container Override
 // ---------------------------------------------------------------------------
+// Override the MatDialog container to use tactical dark styling.
+// ---------------------------------------------------------------------------
+
 :host {
  display: block;
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
+  position: relative;
+  outline: none;
 }

-.global-action-modal__backdrop {
+// ---------------------------------------------------------------------------
+// Close Button
+// ---------------------------------------------------------------------------
+.global-action-modal__close {
  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
+  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;
+  }
 }

 // ---------------------------------------------------------------------------
-// Modal Panel
+// Title & Subtitle
 // ---------------------------------------------------------------------------
-.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 {
+.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;
-  justify-content: space-between;
-  padding: 20px 24px 12px;
+  gap: 10px;
+  letter-spacing: -0.01em;
 }

-.global-action-modal__title {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--cc-on-surface);
-  letter-spacing: 0.01em;
+.global-action-modal__title-icon {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  color: var(--color-primary);
 }

-.global-action-modal__close {
-  --mat-icon-button-state-layer-color: transparent;
+.global-action-modal__subtitle {
+  margin: 0 0 24px 0;
+  font-size: 14px;
  color: var(--cc-on-surface-variant);
-
-  &:hover {
-    color: var(--cc-on-surface);
-  }
+  line-height: 1.5;
 }

 // ---------------------------------------------------------------------------
@@ -69,130 +73,237 @@
 .global-action-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  padding: 12px 24px 24px;
+  gap: 16px;
 }

 // ---------------------------------------------------------------------------
-// Action Button
+// Action Buttons
 // ---------------------------------------------------------------------------
-.global-action-modal__action-btn {
+.global-action-modal__action {
  display: flex;
  flex-direction: column;
  align-items: center;
+  justify-content: 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;
+  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 {
-    background: var(--cc-surface-container-high);
-    border-color: var(--cc-on-surface-variant);
-    transform: translateY(-1px);
+    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(--mat-sys-primary, #38BDF8);
+    outline: 2px solid var(--color-primary);
    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;
+// ---------------------------------------------------------------------------
+// Action Variants — each with distinct color personality
+// ---------------------------------------------------------------------------

-  .mat-icon {
-    width: 28px;
-    height: 28px;
-    font-size: 28px;
+// 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);
  }
 }

-// Action label
+// 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: 15px;
+  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
 }

-// Action description
 .global-action-modal__action-desc {
  font-size: 12px;
-  color: var(--cc-on-surface-variant);
+  opacity: 0.7;
  line-height: 1.4;
 }

 // ---------------------------------------------------------------------------
-// Color Variants — per-action accent colors
+// MatDialog Overlay — tactical dark theme overrides
+// ---------------------------------------------------------------------------
+// These selectors target the Angular Material dialog overlay container
+// and panel to apply our custom styling.
 // ---------------------------------------------------------------------------
-.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);
+::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);
  }
 }

-.global-action-modal__action-btn--pause {
-  .global-action-modal__action-icon {
-    background: var(--status-idle-bg);
-    color: var(--status-idle);
+@keyframes modalFadeScaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
  }
-
-  &: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);
+  to {
+    opacity: 0;
+    transform: scale(0.92);
  }
 }

 // ---------------------------------------------------------------------------
-// Responsive — stack single column on narrow viewports
+// Responsive: Mobile adjustments — single column on narrow screens
 // ---------------------------------------------------------------------------
-@media (max-width: 400px) {
+@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;
  }
 }
--- a/frontend/src/app/components/global-action-modal/global-action-modal.component.ts
+++ b/frontend/src/app/components/global-action-modal/global-action-modal.component.ts
@@ -1,87 +1,109 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
+// ============================================================================
+// 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';

 /**
- * Global Action Modal — overlay for fleet-wide commands.
+ * GlobalActionModal presents four primary control-center actions in a
+ * modal overlay with tactical dark mode styling.
 *
- * 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.
+ * 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: [MatIconModule, MatButtonModule],
+  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 any action button is clicked. Payload is the action key. */
-  @Output() readonly actionSelected = new EventEmitter<GlobalAction>();
+  /** Emitted when Deploy All is clicked. */
+  @Output()
+  readonly deployAll = new EventEmitter<void>();

-  /** Emitted when the modal is dismissed (backdrop click or close button). */
-  @Output() readonly dismissed = new EventEmitter<void>();
+  /** Emitted when Pause All is clicked. */
+  @Output()
+  readonly pauseAll = new EventEmitter<void>();

-  @ViewChild('backdrop') backdropEl!: ElementRef<HTMLElement>;
+  /** Emitted when Emergency Stop is clicked. */
+  @Output()
+  readonly emergencyStop = new EventEmitter<void>();

-  /** 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',
-    },
-  ];
+  /** Emitted when Add Agent is clicked. */
+  @Output()
+  readonly addAgent = new EventEmitter<void>();

-  onBackdropClick(): void {
-    this.dismissed.emit();
+  /** 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();
  }

-  onModalClick(event: Event): void {
-    // Prevent clicks inside the modal panel from closing it
-    event.stopPropagation();
+  /** Pause All — emit and close. */
+  onPauseAll(): void {
+    this.pauseAll.emit();
+    this.close();
  }

-  onClose(): void {
-    this.dismissed.emit();
+  /** Emergency Stop — emit and close. */
+  onEmergencyStop(): void {
+    this.emergencyStop.emit();
+    this.close();
  }

-  onAction(action: GlobalActionDef): void {
-    this.actionSelected.emit(action.key);
+  /** Add Agent — emit and close. */
+  onAddAgent(): void {
+    this.addAgent.emit();
+    this.close();
  }
-}

-export type GlobalAction = 'deploy-all' | 'pause-all' | 'emergency-stop' | 'add-agent';
+  // ---------------------------------------------------------------------------
+  // Close Handling
+  // ---------------------------------------------------------------------------

-export interface GlobalActionDef {
-  key: GlobalAction;
-  label: string;
-  description: string;
-  icon: string;
-  color: 'deploy' | 'pause' | 'emergency' | 'add';
+  /** 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();
+  }
 }