CUB-46: Implement Quick‑Jump Button Component

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);
+  }
+}

frontend/src/app/components/task-progress-bar/index.ts

@@ -1,6 +0,0 @@
-// ============================================================================
-// Task Progress Bar — Barrel Export
-// CUB-44
-// ============================================================================
-
-export { TaskProgressBarComponent } from './task-progress-bar.component';

frontend/src/app/components/task-progress-bar/task-progress-bar.component.html

@@ -1,18 +0,0 @@
-<!-- Task Progress Bar: determinate progress with optional elapsed time -->
-<div class="task-progress-bar">
-  <!-- Info row: percentage + optional elapsed -->
-  <div class="task-progress-bar__info">
-    <span class="task-progress-bar__percent">{{ clampedProgress }}%</span>
-    <span *ngIf="showElapsed" class="task-progress-bar__elapsed">
-      {{ elapsedText }}
-    </span>
-  </div>
-
-  <!-- Angular Material determinate progress bar -->
-  <mat-progress-bar
-    class="task-progress-bar__bar"
-    mode="determinate"
-    [value]="clampedProgress"
-    aria-label="Task progress"
-  ></mat-progress-bar>
-</div>

frontend/src/app/components/task-progress-bar/task-progress-bar.component.scss

@@ -1,77 +0,0 @@
-// ============================================================================
-// Task Progress Bar — Tactical Dark Theme Styling
-// Per CUB-44: Uses --color-primary for bar fill and --color-surface-light
-// for track background, mapped to the Control Center's M3 dark tokens.
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Container
-// ---------------------------------------------------------------------------
-.task-progress-bar {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  width: 100%;
-}
-
-// ---------------------------------------------------------------------------
-// Info row: percentage label + elapsed time
-// ---------------------------------------------------------------------------
-.task-progress-bar__info {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.task-progress-bar__percent {
-  font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--cc-on-surface, #E2E8F0);
-  letter-spacing: 0.02em;
-}
-
-.task-progress-bar__elapsed {
-  font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--cc-on-surface-variant, #8A9BB0);
-  letter-spacing: 0.01em;
-}
-
-// ---------------------------------------------------------------------------
-// Material Progress Bar Overrides
-// ---------------------------------------------------------------------------
-// Map the spec's --color-primary and --color-surface-light to the Control
-// Center's actual theme tokens. This ensures the bar uses the tactical dark
-// palette while respecting the spec's variable naming.
-// ---------------------------------------------------------------------------
-
-.task-progress-bar__bar {
-  // Override the track (background) to use the surface container
-  --mat-progress-bar-track-height: 6px;
-  --mat-progress-bar-active-indicator-height: 6px;
-
-  // Bar fill color: primary (cyan/sky blue per tactical dark theme)
-  --mat-progress-bar-active-indicator-color: var(--color-primary, var(--mat-sys-primary, #38BDF8));
-
-  // Track background: surface container (dark slate)
-  --mat-progress-bar-track-color: var(--color-surface-light, var(--cc-surface-container, #1C2027));
-
-  // Border radius for a softer bar
-  border-radius: 3px;
-
-  // Smooth transition on value changes
-  transition: none;
-}
-
-// Rounded ends on the progress bar fill
-:host ::ng-deep .mdc-linear-progress__bar-inner {
-  border-radius: 3px;
-}
-
-// Rounded track background
-:host ::ng-deep .mdc-linear-progress__track {
-  border-radius: 3px;
-}

frontend/src/app/components/task-progress-bar/task-progress-bar.component.ts

@@ -1,109 +0,0 @@
-// ============================================================================
-// Task Progress Bar Component
-// Per CUB-44: Determinate progress bar with optional elapsed time display.
-// Uses Angular Material mat-progress-bar in determinate mode with tactical
-// dark theme styling via CSS custom properties.
-// ============================================================================
-
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-
-/**
- * Displays a determinate progress bar with an optional elapsed time indicator.
- *
- * Usage:
- * ```html
- * <app-task-progress-bar [progress]="65" />
- * <app-task-progress-bar [progress]="42" [showElapsed]="true" />
- * ```
- */
-@Component({
-  selector: 'app-task-progress-bar',
-  standalone: true,
-  imports: [CommonModule, MatProgressBarModule],
-  templateUrl: './task-progress-bar.component.html',
-  styleUrl: './task-progress-bar.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TaskProgressBarComponent implements OnInit, OnDestroy {
-  // ---------------------------------------------------------------------------
-  // Inputs
-  // ---------------------------------------------------------------------------
-
-  /** Current progress percentage (0–100). Required. */
-  @Input({ required: true })
-  progress!: number;
-
-  /** Whether to show elapsed time next to the percentage. Defaults to false. */
-  @Input()
-  showElapsed = false;
-
-  // ---------------------------------------------------------------------------
-  // Internal state
-  // ---------------------------------------------------------------------------
-
-  /** Timestamp when the component initialized — used for elapsed calculation. */
-  startTime = Date.now();
-
-  /** Formatted elapsed time string, e.g. "2m 15s ago". */
-  elapsedText = '';
-
-  /** Interval timer for updating the elapsed display. */
-  private timer: ReturnType<typeof setInterval> | null = null;
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  // ---------------------------------------------------------------------------
-  // Lifecycle
-  // ---------------------------------------------------------------------------
-
-  ngOnInit(): void {
-    this.updateElapsed();
-
-    if (this.showElapsed) {
-      // Update elapsed time every second
-      this.timer = setInterval(() => {
-        this.updateElapsed();
-        this.cdr.markForCheck();
-      }, 1000);
-    }
-  }
-
-  ngOnDestroy(): void {
-    if (this.timer) {
-      clearInterval(this.timer);
-      this.timer = null;
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Helpers
-  // ---------------------------------------------------------------------------
-
-  /** Clamp progress to 0–100 for safety. */
-  get clampedProgress(): number {
-    return Math.max(0, Math.min(100, this.progress ?? 0));
-  }
-
-  /** Recalculate the elapsed time string. */
-  private updateElapsed(): void {
-    const elapsedMs = Date.now() - this.startTime;
-    const totalSeconds = Math.floor(elapsedMs / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-
-    if (minutes > 0) {
-      this.elapsedText = `${minutes}m ${seconds}s ago`;
-    } else {
-      this.elapsedText = `${seconds}s ago`;
-    }
-  }
-}