CUB-49: [Control Center] Global Action Modal Component

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

@@ -1,78 +1,31 @@
-<!-- ============================================================================
+<!-- Backdrop overlay — click to dismiss -->
-  Global Action Modal (CUB-49)
+<div class="global-action-modal__backdrop" #backdrop (click)="onBackdropClick()"></div>
-  Four primary actions with tactical dark mode styling.
-  Close button (×) and backdrop click both dismiss.
-  ========================================================================== -->
 
-<!-- Close button -->
+<!-- Modal panel -->
-<button
+<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"
-  mat-icon-button
             aria-label="Close modal"
-  (click)="close()"
+            (click)="onClose()">
->
       <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>
+  </div>
 
-  <!-- Pause All -->
+  <!-- Action grid -->
-  <button
+  <div class="global-action-modal__actions">
-    class="global-action-modal__action global-action-modal__action--pause"
+    @for (action of actions; track action.key) {
-    mat-flat-button
+      <button class="global-action-modal__action-btn global-action-modal__action-btn--{{ action.color }}"
-    aria-label="Pause all agents"
+              (click)="onAction(action)">
-    (click)="onPauseAll()"
+        <div class="global-action-modal__action-icon">
-  >
+          <mat-icon>{{ action.icon }}</mat-icon>
-    <mat-icon class="global-action-modal__action-icon" aria-hidden="true">pause_circle</mat-icon>
+        </div>
-    <span class="global-action-modal__action-label">Pause All</span>
+        <span class="global-action-modal__action-label">{{ action.label }}</span>
-    <span class="global-action-modal__action-desc">Suspend all running agents</span>
+        <span class="global-action-modal__action-desc">{{ action.description }}</span>
       </button>
-
+    }
-  <!-- Emergency Stop -->
+  </div>
-  <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,70 +1,66 @@
 // ============================================================================
-// Global Action Modal Styles — M3 Tactical Dark (CUB-49)
+// Global Action Modal — Tactical Dark Mode Styling
-// Uses CUB-47 CSS custom properties for palette consistency.
+// Uses Control Center design tokens from styles.scss
-// Smooth fade/scale animation on open/close.
 // ============================================================================
 
 // ---------------------------------------------------------------------------
-// Dialog Container Override
+// Backdrop
 // ---------------------------------------------------------------------------
-// Override the MatDialog container to use tactical dark styling.
-// ---------------------------------------------------------------------------
-
 :host {
   display: block;
-  position: relative;
+  position: fixed;
-  outline: none;
+  inset: 0;
+  z-index: 1000;
 }
 
-// ---------------------------------------------------------------------------
+.global-action-modal__backdrop {
-// Close Button
-// ---------------------------------------------------------------------------
-.global-action-modal__close {
   position: absolute;
-  top: 12px;
+  inset: 0;
-  right: 12px;
+  background: rgba(0, 0, 0, 0.6);
-  z-index: 1;
+  backdrop-filter: blur(4px);
-  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
+// Modal Panel
 // ---------------------------------------------------------------------------
-.global-action-modal__title {
+.global-action-modal__panel {
-  margin: 0 0 4px 0;
+  position: absolute;
-  font-size: 22px;
+  top: 50%;
-  font-weight: 600;
+  left: 50%;
-  color: var(--color-text-primary);
+  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;
-  gap: 10px;
+  justify-content: space-between;
-  letter-spacing: -0.01em;
+  padding: 20px 24px 12px;
 }
 
-.global-action-modal__title-icon {
+.global-action-modal__title {
-  font-size: 24px;
+  margin: 0;
-  width: 24px;
+  font-size: 20px;
-  height: 24px;
+  font-weight: 600;
-  color: var(--color-primary);
+  color: var(--cc-on-surface);
+  letter-spacing: 0.01em;
 }
 
-.global-action-modal__subtitle {
+.global-action-modal__close {
-  margin: 0 0 24px 0;
+  --mat-icon-button-state-layer-color: transparent;
-  font-size: 14px;
   color: var(--cc-on-surface-variant);
-  line-height: 1.5;
+
+  &:hover {
+    color: var(--cc-on-surface);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -73,237 +69,130 @@
 .global-action-modal__actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  gap: 12px;
+  padding: 12px 24px 24px;
 }
 
 // ---------------------------------------------------------------------------
-// Action Buttons
+// Action Button
 // ---------------------------------------------------------------------------
-.global-action-modal__action {
+.global-action-modal__action-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   gap: 8px;
-  padding: 24px 16px;
+  padding: 20px 16px;
-  border-radius: 16px;
+  border: 1px solid var(--cc-outline);
-  min-height: 140px;
+  border-radius: 12px;
-  text-align: center;
+  background: var(--cc-surface);
-  transition: background-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
+  color: var(--cc-on-surface);
   cursor: pointer;
-  border: 1px solid transparent;
+  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
+  font-family: inherit;
+  text-align: center;
 
-  // 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);
+    background: var(--cc-surface-container-high);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    border-color: var(--cc-on-surface-variant);
+    transform: translateY(-1px);
   }
 
-  // Active press effect
   &:active {
     transform: translateY(0);
   }
 
-  // Focus-visible for keyboard users
   &:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--mat-sys-primary, #38BDF8);
     outline-offset: 2px;
   }
 }
 
-// ---------------------------------------------------------------------------
+// Action icon wrapper
-// 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: 48px;
-  width: 36px;
+  height: 48px;
-  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+
+  .mat-icon {
+    width: 28px;
+    height: 28px;
+    font-size: 28px;
+  }
 }
 
-// ---------------------------------------------------------------------------
+// Action label
-// Action Label & Description
-// ---------------------------------------------------------------------------
 .global-action-modal__action-label {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   letter-spacing: 0.01em;
 }
 
+// Action description
 .global-action-modal__action-desc {
   font-size: 12px;
-  opacity: 0.7;
+  color: var(--cc-on-surface-variant);
   line-height: 1.4;
 }
 
 // ---------------------------------------------------------------------------
-// MatDialog Overlay — tactical dark theme overrides
+// Color Variants — per-action accent colors
 // ---------------------------------------------------------------------------
-// These selectors target the Angular Material dialog overlay container
+.global-action-modal__action-btn--deploy {
-// and panel to apply our custom styling.
+  .global-action-modal__action-icon {
-// ---------------------------------------------------------------------------
+    background: var(--status-active-bg);
-
+    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;
+  &:hover {
-    transform: scale(1);
+    border-color: var(--status-active);
   }
 }
 
-@keyframes modalFadeScaleOut {
+.global-action-modal__action-btn--pause {
-  from {
+  .global-action-modal__action-icon {
-    opacity: 1;
+    background: var(--status-idle-bg);
-    transform: scale(1);
+    color: var(--status-idle);
   }
-  to {
+
-    opacity: 0;
+  &:hover {
-    transform: scale(0.92);
+    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: Mobile adjustments — single column on narrow screens
+// Responsive — stack single column on narrow viewports
 // ---------------------------------------------------------------------------
-@media (max-width: 599px) {
+@media (max-width: 400px) {
   .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 +1,87 @@
-// ============================================================================
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
-// 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';
+import { MatButtonModule } from '@angular/material/button';
 
 /**
- * GlobalActionModal presents four primary control-center actions in a
+ * Global Action Modal — overlay for fleet-wide commands.
- * modal overlay with tactical dark mode styling.
  *
- * Actions emit dedicated output events:
+ * Four main actions: Deploy All, Pause All, Emergency Stop, Add Agent.
- * - deployAll   → emit when "Deploy All" is clicked
+ * Tactical Dark Mode styling using Control Center design tokens.
- * - pauseAll    → emit when "Pause All" is clicked
+ * Dismisses on backdrop click or close button.
- * - 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: [
+  imports: [MatIconModule, MatButtonModule],
-    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. */
+  /** Emitted when any action button is clicked. Payload is the action key. */
-  @Output()
+  @Output() readonly actionSelected = new EventEmitter<GlobalAction>();
-  readonly deployAll = new EventEmitter<void>();
 
-  /** Emitted when Pause All is clicked. */
+  /** Emitted when the modal is dismissed (backdrop click or close button). */
-  @Output()
+  @Output() readonly dismissed = new EventEmitter<void>();
-  readonly pauseAll = new EventEmitter<void>();
 
-  /** Emitted when Emergency Stop is clicked. */
+  @ViewChild('backdrop') backdropEl!: ElementRef<HTMLElement>;
-  @Output()
-  readonly emergencyStop = new EventEmitter<void>();
 
-  /** Emitted when Add Agent is clicked. */
+  /** All available global actions. */
-  @Output()
+  readonly actions: GlobalActionDef[] = [
-  readonly addAgent = new EventEmitter<void>();
+    {
+      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',
+    },
+  ];
 
-  /** MatDialogRef injected when opened as a Material dialog. */
+  onBackdropClick(): void {
-  private readonly dialogRef = inject(MatDialogRef<GlobalActionModalComponent>, { optional: true });
+    this.dismissed.emit();
-
-  // ---------------------------------------------------------------------------
-  // Action Handlers
-  // ---------------------------------------------------------------------------
-
-  /** Deploy All — emit and close. */
-  onDeployAll(): void {
-    this.deployAll.emit();
-    this.close();
   }
 
-  /** Pause All — emit and close. */
+  onModalClick(event: Event): void {
-  onPauseAll(): void {
+    // Prevent clicks inside the modal panel from closing it
-    this.pauseAll.emit();
+    event.stopPropagation();
-    this.close();
   }
 
-  /** Emergency Stop — emit and close. */
+  onClose(): void {
-  onEmergencyStop(): void {
+    this.dismissed.emit();
-    this.emergencyStop.emit();
-    this.close();
   }
 
-  /** Add Agent — emit and close. */
+  onAction(action: GlobalActionDef): void {
-  onAddAgent(): void {
+    this.actionSelected.emit(action.key);
-    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();
   }
 }
+
+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';
+}