CUB-46: Implement Quick‑Jump Button Component

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

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

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

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

frontend/src/app/components/index.ts

@@ -0,0 +1 @@
+export * from './quick-jump-button/quick-jump-button.component';

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

@@ -0,0 +1,8 @@
+<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

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

@@ -0,0 +1,32 @@
+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);
+  }
+}