feat(CUB-55): add SendStatusUpdate method to AgentStatusHub

backend/ControlCenter/Hubs/AgentStatusHub.cs

@@ -37,6 +37,33 @@ public class AgentStatusHub : Hub<IAgentStatusClient>
         _logger = logger;
     }
 
+    /// <summary>
+    /// Broadcasts an agent status update to all connected clients.
+    ///
+    /// <para>
+    /// Any connected client (or server-side caller) can invoke this method
+    /// to push a status update to every subscriber. The DTO is converted to
+    /// an <see cref="AgentStatusUpdate"/> record and relayed through the
+    /// <see cref="IAgentStatusClient.AgentStatusChanged"/> callback.
+    /// </para>
+    /// </summary>
+    /// <param name="update">The agent status update DTO to broadcast.</param>
+    public async Task SendStatusUpdate(AgentStatusUpdateDto update)
+    {
+        _logger.LogInformation(
+            "Broadcasting status update for agent {AgentId}: {Status}",
+            update.AgentId, update.Status);
+
+        var agentUpdate = update.ToUpdate();
+
+        // Broadcast to all connected clients
+        await Clients.All.AgentStatusChanged(agentUpdate);
+
+        // Also push to the specific agent's group
+        var agentGroup = AgentGroupName(update.AgentId);
+        await Clients.Group(agentGroup).AgentStatusChanged(agentUpdate);
+    }
+
     /// <summary>
     /// Adds the calling connection to the fleet group.
     /// Once joined, the client will receive all agent status changes

backend/ControlCenter/Hubs/Models/AgentStatusModels.cs

@@ -72,6 +72,80 @@ public record TaskProgressUpdate(
     string? Elapsed
 );
 
+/// <summary>
+/// Data transfer object for broadcasting agent status updates
+/// to all connected SignalR clients via the hub's SendStatusUpdate method.
+///
+/// <para>This DTO provides a mutable, serialization-friendly alternative to
+/// <see cref="AgentStatusUpdate"/> for callers that construct updates
+/// from external data sources (e.g., HTTP API payloads).</para>
+/// </summary>
+public class AgentStatusUpdateDto
+{
+    /// <summary>
+    /// Agent identifier, e.g. "otto", "dex", "rex".
+    /// </summary>
+    public string AgentId { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Human-readable display name, e.g. "Otto", "Dex".
+    /// </summary>
+    public string DisplayName { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Role description, e.g. "Orchestrator Agent", "Backend Specialist".
+    /// </summary>
+    public string Role { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Current operational status of the agent as lowercase string:
+    /// "active", "idle", "thinking", "error".
+    /// </summary>
+    public string Status { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Description of the agent's current task, if any.
+    /// </summary>
+    public string? CurrentTask { get; set; }
+
+    /// <summary>
+    /// Full session key, e.g. "agent:otto:telegram:direct:8787451565".
+    /// </summary>
+    public string SessionKey { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Communication channel, e.g. "telegram", "discord", "slack".
+    /// </summary>
+    public string Channel { get; set; } = string.Empty;
+
+    /// <summary>
+    /// ISO 8601 timestamp of the agent's last activity.
+    /// </summary>
+    public string LastActivity { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Error message when the agent status is "error".
+    /// </summary>
+    public string? ErrorMessage { get; set; }
+
+    /// <summary>
+    /// Converts this DTO to an immutable <see cref="AgentStatusUpdate"/> record
+    /// for use with the typed SignalR client interface.
+    /// </summary>
+    /// <returns>An <see cref="AgentStatusUpdate"/> with equivalent field values.</returns>
+    public AgentStatusUpdate ToUpdate() => new(
+        AgentId,
+        DisplayName,
+        Role,
+        Status,
+        CurrentTask,
+        SessionKey,
+        Channel,
+        LastActivity,
+        ErrorMessage
+    );
+}
+
 /// <summary>
 /// Snapshot of an agent's full card data, sent on initial connection
 /// or when the fleet state is requested.

frontend/src/app/components/index.ts

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

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

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

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

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