From 4748ba0306a307f0755008a737ff4d9a53998e5d Mon Sep 17 00:00:00 2001
From: "cubecraft-agents[bot]"
<3458173+cubecraft-agents[bot]@users.noreply.github.com>
Date: Sun, 26 Apr 2026 13:50:45 +0000
Subject: [PATCH] CUB-49: Global Action Modal component with tactical dark mode
styling
---
.../global-action-modal.component.html | 78 +++++
.../global-action-modal.component.scss | 309 ++++++++++++++++++
.../global-action-modal.component.ts | 109 ++++++
3 files changed, 496 insertions(+)
create mode 100644 frontend/src/app/components/global-action-modal/global-action-modal.component.html
create mode 100644 frontend/src/app/components/global-action-modal/global-action-modal.component.scss
create mode 100644 frontend/src/app/components/global-action-modal/global-action-modal.component.ts
diff --git 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
new file mode 100644
index 0000000..bf7e5ad
--- /dev/null
+++ b/frontend/src/app/components/global-action-modal/global-action-modal.component.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+ terminal
+ Command Center
+
+
+
+ Select an action to execute across all agents.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git 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
new file mode 100644
index 0000000..9b6ffc4
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git 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
new file mode 100644
index 0000000..0b278c6
--- /dev/null
+++ b/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();
+
+ /** Emitted when Pause All is clicked. */
+ @Output()
+ readonly pauseAll = new EventEmitter();
+
+ /** Emitted when Emergency Stop is clicked. */
+ @Output()
+ readonly emergencyStop = new EventEmitter();
+
+ /** Emitted when Add Agent is clicked. */
+ @Output()
+ readonly addAgent = new EventEmitter();
+
+ /** MatDialogRef injected when opened as a Material dialog. */
+ private readonly dialogRef = inject(MatDialogRef, { 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();
+ }
+}
\ No newline at end of file
--
2.53.0