CUB-46: Implement Quick‑Jump Button Component

frontend/src/app/components/agent-status-badge/agent-status-badge.component.html

@@ -1,8 +0,0 @@
-<span class="badge"
-      [class]="statusClass"
-      [class.badge--pulse]="hasPulse"
-      [attr.aria-label]="'Agent status: ' + displayLabel"
-      role="status">
-  <span class="badge__dot"></span>
-  <span class="badge__label">{{ displayLabel }}</span>
-</span>

frontend/src/app/components/agent-status-badge/agent-status-badge.component.scss

@@ -1,146 +0,0 @@
-// ============================================================================
-// Agent Status Badge — per spec Section 7.3
-// Colored pill with dot indicator and optional pulse animation.
-// ============================================================================
-
-$badge-height: 24px;
-$dot-size: 8px;
-$border-radius: 12px;
-$font-size: 12px;
-$font-weight: 500;
-$padding-x: 8px;
-$gap: 6px;
-
-@use 'sass:color';
-
-// Status color palette
-$color-active: #22c55e;   // green-500
-$color-idle: #9ca3af;     // gray-400
-$color-thinking: #3b82f6; // blue-500
-$color-error: #ef4444;    // red-500
-$color-offline: #9ca3af;  // gray-400
-
-// Background tints (12% opacity for soft pill background)
-$bg-active: rgba($color-active, 0.12);
-$bg-idle: rgba($color-idle, 0.12);
-$bg-thinking: rgba($color-thinking, 0.12);
-$bg-error: rgba($color-error, 0.12);
-$bg-offline: rgba($color-offline, 0.12);
-
-// ---------------------------------------------------------------------------
-// Base pill
-// ---------------------------------------------------------------------------
-.badge {
-  display: inline-flex;
-  align-items: center;
-  height: $badge-height;
-  padding: 0 $padding-x;
-  border-radius: $border-radius;
-  gap: $gap;
-  font-size: $font-size;
-  font-weight: $font-weight;
-  line-height: 1;
-  white-space: nowrap;
-  user-select: none;
-}
-
-// ---------------------------------------------------------------------------
-// Dot indicator
-// ---------------------------------------------------------------------------
-.badge__dot {
-  width: $dot-size;
-  height: $dot-size;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-// ---------------------------------------------------------------------------
-// Label text
-// ---------------------------------------------------------------------------
-.badge__label {
-  line-height: 1;
-}
-
-// ---------------------------------------------------------------------------
-// Status color variants
-// ---------------------------------------------------------------------------
-.badge--active {
-  background: $bg-active;
-  color: color.adjust($color-active, $lightness: -10%);
-
-  .badge__dot {
-    background: $color-active;
-  }
-}
-
-.badge--idle {
-  background: $bg-idle;
-  color: color.adjust($color-idle, $lightness: -15%);
-
-  .badge__dot {
-    background: $color-idle;
-  }
-}
-
-.badge--thinking {
-  background: $bg-thinking;
-  color: color.adjust($color-thinking, $lightness: -10%);
-
-  .badge__dot {
-    background: $color-thinking;
-  }
-}
-
-.badge--error {
-  background: $bg-error;
-  color: color.adjust($color-error, $lightness: -10%);
-
-  .badge__dot {
-    background: $color-error;
-  }
-}
-
-.badge--offline {
-  background: $bg-offline;
-  color: color.adjust($color-offline, $lightness: -15%);
-
-  .badge__dot {
-    background: $color-offline;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Pulse animation — applied when status is active, thinking, or error
-// ---------------------------------------------------------------------------
-.badge--pulse {
-  .badge__dot {
-    animation: pulse-dot 2s ease-in-out infinite;
-  }
-}
-
-// Active: 2s pulse
-.badge--active.badge--pulse .badge__dot {
-  animation-duration: 2s;
-}
-
-// Thinking: 3s pulse
-.badge--thinking.badge--pulse .badge__dot {
-  animation-duration: 3s;
-}
-
-// Error: 0.8s pulse (fast, urgent)
-.badge--error.badge--pulse .badge__dot {
-  animation-duration: 0.8s;
-}
-
-@keyframes pulse-dot {
-  0%,
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.4;
-    transform: scale(1.5);
-  }
-}

frontend/src/app/components/agent-status-badge/agent-status-badge.component.ts

@@ -1,54 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { AgentStatus } from '../../models/agent.model';
-
-/**
- * Agent Status Badge component.
- * Displays a colored pill with a pulse animation indicating the agent's current status.
- * Per spec Section 7.3: Agent Card Component Interface — status indicator.
- *
- * Color mapping:
- * - Active → green
- * - Idle → gray
- * - Thinking → blue
- * - Error → red
- * - Offline → gray (no pulse)
- *
- * Pulse animations:
- * - Active → 2s
- * - Error → 0.8s
- * - Thinking → 3s
- * - Idle / Offline → no pulse
- */
-@Component({
-  selector: 'app-agent-status-badge',
-  standalone: true,
-  imports: [],
-  templateUrl: './agent-status-badge.component.html',
-  styleUrl: './agent-status-badge.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AgentStatusBadgeComponent {
-  /** Current agent status — binds to the AgentStatus type from the model. */
-  readonly status = input.required<AgentStatus>();
-
-  /** Label text shown inside the badge. Defaults to title-cased status. */
-  readonly label = input<string>();
-
-  get displayLabel(): string {
-    return this.label() ?? this.titleCase(this.status());
-  }
-
-  /** CSS class driven by the current status value. */
-  get statusClass(): string {
-    return `badge--${this.status()}`;
-  }
-
-  /** Whether the pulse animation should be active for the current status. */
-  get hasPulse(): boolean {
-    return this.status() === 'active' || this.status() === 'thinking' || this.status() === 'error';
-  }
-
-  private titleCase(value: string): string {
-    return value.charAt(0).toUpperCase() + value.slice(1);
-  }
-}

frontend/src/app/components/agent-status-badge/index.ts

@@ -1 +0,0 @@
-export { AgentStatusBadgeComponent } from './agent-status-badge.component';

frontend/src/app/components/index.ts

@@ -1 +1 @@
-export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
+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);
+  }
+}