CUB-45: Final AgentCard component integration

- Replaced inline status dot/label with AgentStatusBadgeComponent (CUB-48)
- Replaced inline mat-progress-bar with TaskProgressBarComponent (CUB-44)
- Replaced inline jump button with QuickJumpButtonComponent (CUB-46)
- Left-border accent remains, driven by --agent-status-color CSS variable
- All 6 inputs working: status, task, progress, sessionKey, channel, lastActivity
- Added jumpClick output that forwards QuickJumpButton events
- role=article and aria-label on card element
- Fixed QuickJumpButton sessionKey to be @Input() for proper Angular binding
- Added barrel export for quick-jump-button
- Updated components barrel export for all sub-components
- Build and type-check pass cleanly

frontend/src/app/components/agent-card/agent-card.component.scss

@@ -1,7 +1,9 @@
 // ============================================================================
-// Agent Card Styles — M3 Tactical Dark
-// Per spec Section 7.3: Agent Card Component
-// Section 7.5: Animation Specs
+// Agent Card Styles — M3 Tactical Dark (Final Integration, CUB-45)
+// Uses sub-components:
+//   - AgentStatusBadge (CUB-48) for status display
+//   - TaskProgressBar (CUB-44) for progress
+//   - QuickJumpButton (CUB-46) for navigation
 // ============================================================================
 
 // ---------------------------------------------------------------------------
@@ -78,17 +80,6 @@
   gap: 8px;
 }
 
-.agent-card__dot {
-  flex-shrink: 0;
-}
-
-.agent-card__status-label {
-  font-size: 14px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
 .agent-card__meta {
   display: flex;
   align-items: center;
@@ -129,23 +120,11 @@
 }
 
 // ---------------------------------------------------------------------------
-// Progress Bar
+// Task Progress Bar (CUB-44 sub-component)
+// Override the sub-component's progress bar colors to match status color
 // ---------------------------------------------------------------------------
-.agent-card__progress {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.agent-card__progress-info {
-  display: flex;
-  justify-content: flex-end;
-  font-size: 12px;
-  color: var(--cc-on-surface-variant);
-}
-
-// Override M3 progress bar track to use status color
-.agent-card__progress .mat-mdc-progress-bar {
+:host ::ng-deep .task-progress-bar .mat-mdc-progress-bar,
+.agent-card .mat-mdc-progress-bar {
   --mdc-linear-progress-active-indicator-color: var(--agent-status-color);
   --mdc-linear-progress-track-color: var(--agent-status-bg);
 }
@@ -172,53 +151,6 @@
   min-width: 0;
 }
 
-// ---------------------------------------------------------------------------
-// Quick-Jump Button — M3 FilledTonalIconButton style
-// Per spec: → Jump button using M3 FilledTonalIconButton
-// ---------------------------------------------------------------------------
-.agent-card__jump {
-  // M3 FilledTonal style: secondary container color
-  --mdc-icon-button-icon-color: var(--cc-on-surface);
-  background-color: var(--cc-surface-container-high);
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  flex-shrink: 0;
-
-  // State layer overlay on hover (8% primary)
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.08);
-    opacity: 0;
-    transition: opacity 150ms ease;
-    pointer-events: none;
-  }
-
-  &:hover::before {
-    opacity: 1;
-  }
-
-  // Focus-visible ring
-  &:focus-visible {
-    outline: 3px solid var(--status-active);
-    outline-offset: 2px;
-  }
-
-  // Active state
-  &:active {
-    transform: scale(0.95);
-  }
-
-  .mat-icon {
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
-  }
-}
-
 // ---------------------------------------------------------------------------
 // Status-specific card backgrounds (subtle tint)
 // ---------------------------------------------------------------------------
@@ -236,15 +168,6 @@
 
 // Idle and offline use default surface-container
 
-// ---------------------------------------------------------------------------
-// Touch-First Targets
-// ---------------------------------------------------------------------------
-// Minimum touch target: 48px (M3 standard)
-.agent-card__jump {
-  min-width: 48px;
-  min-height: 48px;
-}
-
 // ---------------------------------------------------------------------------
 // Accessibility: Reduced Motion
 // ---------------------------------------------------------------------------
@@ -252,14 +175,6 @@
   .agent-card {
     transition: none;
   }
-
-  .agent-card__jump {
-    transition: none;
-
-    &:active {
-      transform: none;
-    }
-  }
 }
 
 // ---------------------------------------------------------------------------