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

backend/.gitignore

@@ -0,0 +1,21 @@
+## .NET
+bin/
+obj/
+*.user
+*.suo
+*.cache
+*.dll
+*.pdb
+
+## IDE
+.vs/
+.idea/
+*.swp
+*~
+
+## OS
+.DS_Store
+Thumbs.db
+
+## Environment
+.env

backend/Configurations/AgentConfiguration.cs

@@ -0,0 +1,88 @@
+using ControlCenter.Api.Entities;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Metadata.Builders;
+
+namespace ControlCenter.Api.Configurations;
+
+/// <summary>
+/// EF Core entity type configuration for the agents table.
+/// Enforces snake_case naming, required fields, and index design.
+/// </summary>
+public class AgentConfiguration : IEntityTypeConfiguration<Agent>
+{
+    public void Configure(EntityTypeBuilder<Agent> builder)
+    {
+        // Table name — snake_case
+        builder.ToTable("agents");
+
+        // Primary key
+        builder.HasKey(a => a.Id);
+        builder.Property(a => a.Id)
+            .HasColumnName("id")
+            .ValueGeneratedOnAdd();
+
+        // Status — stored as PostgreSQL enum via Npgsql
+        builder.Property(a => a.Status)
+            .HasColumnName("status")
+            .HasColumnType("agent_status")
+            .IsRequired();
+
+        // Task — nullable text
+        builder.Property(a => a.Task)
+            .HasColumnName("task")
+            .HasColumnType("text");
+
+        // Progress — nullable integer (0–100)
+        builder.Property(a => a.Progress)
+            .HasColumnName("progress");
+
+        // Session key — required, not null
+        builder.Property(a => a.SessionKey)
+            .HasColumnName("session_key")
+            .HasColumnType("text")
+            .IsRequired();
+
+        // Channel — required, not null
+        builder.Property(a => a.Channel)
+            .HasColumnName("channel")
+            .HasColumnType("text")
+            .IsRequired();
+
+        // Last activity — required, defaults to now()
+        builder.Property(a => a.LastActivity)
+            .HasColumnName("last_activity")
+            .HasColumnType("timestamptz")
+            .IsRequired();
+
+        // Created at — auto-set on insert
+        builder.Property(a => a.CreatedAt)
+            .HasColumnName("created_at")
+            .HasColumnType("timestamptz")
+            .IsRequired()
+            .HasDefaultValueSql("now()");
+
+        // Updated at — auto-set on insert and update
+        builder.Property(a => a.UpdatedAt)
+            .HasColumnName("updated_at")
+            .HasColumnType("timestamptz")
+            .IsRequired()
+            .HasDefaultValueSql("now()");
+
+        // Indexes
+        // Sessions are looked up by session_key frequently
+        builder.HasIndex(a => a.SessionKey)
+            .HasDatabaseName("ix_agents_session_key")
+            .IsUnique();
+
+        // Agents are filtered by channel for channel-specific queries
+        builder.HasIndex(a => a.Channel)
+            .HasDatabaseName("ix_agents_channel");
+
+        // Agents are filtered by status for fleet health monitoring
+        builder.HasIndex(a => a.Status)
+            .HasDatabaseName("ix_agents_status");
+
+        // Check constraint: progress must be 0–100 if present
+        builder.ToTable(t => t.HasCheckConstraint("ck_agents_progress_range", "progress IS NULL OR (progress >= 0 AND progress <= 100)"));
+    }
+}

backend/ControlCenter.Api.csproj

@@ -0,0 +1,18 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.14" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.4">
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+      <PrivateAssets>all</PrivateAssets>
+    </PackageReference>
+    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
+  </ItemGroup>
+
+</Project>

backend/ControlCenter.Api.http

@@ -0,0 +1,6 @@
+@ControlCenter.Api_HostAddress = http://localhost:5178
+
+GET {{ControlCenter.Api_HostAddress}}/weatherforecast/
+Accept: application/json
+
+###

backend/ControlCenter/.gitignore

@@ -0,0 +1,18 @@
+## .NET
+bin/
+obj/
+*.user
+*.suo
+*.cache
+*.dll
+*.pdb
+*.xml
+
+## IDE
+.vs/
+.vscode/
+.idea/
+
+## OS
+.DS_Store
+Thumbs.db

backend/ControlCenter/ControlCenter.csproj

@@ -0,0 +1,17 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <GenerateDocumentationFile>true</GenerateDocumentationFile>
+    <NoWarn>CS1591</NoWarn>
+    <RootNamespace>ControlCenter</RootNamespace>
+    <AssemblyName>ControlCenter</AssemblyName>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="10.1.7" />
+  </ItemGroup>
+
+</Project>

backend/ControlCenter/Controllers/AgentsController.cs

@@ -0,0 +1,71 @@
+using Microsoft.AspNetCore.Mvc;
+using ControlCenter.Services;
+
+namespace ControlCenter.Controllers;
+
+/// <summary>
+/// REST API for querying agent fleet status.
+/// Provides the initial data load for the Command Hub,
+/// while real-time updates flow through the AgentStatus SignalR hub.
+///
+/// <para>API contract for Rex (Frontend):</para>
+/// <list type="bullet">
+///   <item><c>GET /api/agents</c> — Returns all known agents with current status</item>
+///   <item><c>GET /api/agents/{agentId}</c> — Returns a specific agent's status</item>
+/// </list>
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class AgentsController : ControllerBase
+{
+    private readonly ILogger<AgentsController> _logger;
+    private readonly GatewayEventBridgeService _bridgeService;
+
+    public AgentsController(
+        ILogger<AgentsController> logger,
+        GatewayEventBridgeService bridgeService)
+    {
+        _logger = logger;
+        _bridgeService = bridgeService;
+    }
+
+    /// <summary>
+    /// Gets the current fleet status — all known agents with their latest state.
+    /// This is the initial load endpoint; subsequent updates arrive via SignalR.
+    /// </summary>
+    /// <returns>An array of agent card data for the entire fleet.</returns>
+    /// <response code="200">Returns the fleet snapshot.</response>
+    [HttpGet]
+    [ProducesResponseType(typeof(AgentCardData[]), StatusCodes.Status200OK)]
+    public IActionResult GetAgents()
+    {
+        var snapshot = _bridgeService.GetFleetSnapshot();
+        _logger.LogDebug("Fleet snapshot requested: {Count} agents", snapshot.Length);
+        return Ok(snapshot);
+    }
+
+    /// <summary>
+    /// Gets the current status of a specific agent.
+    /// </summary>
+    /// <param name="agentId">The agent identifier, e.g. "otto", "dex".</param>
+    /// <returns>The agent's current card data.</returns>
+    /// <response code="200">Returns the agent's status.</response>
+    /// <response code="404">Agent not found in the fleet state.</response>
+    [HttpGet("{agentId}")]
+    [ProducesResponseType(typeof(AgentCardData), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    public IActionResult GetAgent(string agentId)
+    {
+        var snapshot = _bridgeService.GetFleetSnapshot();
+        var agent = snapshot.FirstOrDefault(a =>
+            a.Id.Equals(agentId, StringComparison.OrdinalIgnoreCase));
+
+        if (agent is null)
+        {
+            _logger.LogWarning("Agent not found: {AgentId}", agentId);
+            return NotFound(new { error = $"Agent '{agentId}' not found" });
+        }
+
+        return Ok(agent);
+    }
+}

backend/ControlCenter/Controllers/CommandController.cs

@@ -0,0 +1,122 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace ControlCenter.Controllers;
+
+/// <summary>
+/// REST API for sending control commands to agents.
+/// Provides the Command Hub's action endpoints for agent lifecycle control.
+///
+/// <para>API contract for Rex (Frontend):</para>
+/// <list type="bullet">
+///   <item><c>POST /api/command/stop/{agentId}</c> — Stop/abort an agent's active session</item>
+///   <item><c>POST /api/command/restart/{agentId}</c> — Restart an agent</item>
+///   <item><c>POST /api/command/steer/{agentId}</c> — Inject a message into an agent's session</item>
+/// </list>
+///
+/// <para>Commands are forwarded to the OpenClaw Gateway via the
+/// WebSocket bridge service. The Gateway handles the actual execution.</para>
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class CommandController : ControllerBase
+{
+    private readonly ILogger<CommandController> _logger;
+
+    public CommandController(ILogger<CommandController> logger)
+    {
+        _logger = logger;
+    }
+
+    /// <summary>
+    /// Stops (aborts) an agent's active session.
+    /// Sends an abort command to the OpenClaw Gateway.
+    /// </summary>
+    /// <param name="agentId">The agent identifier to stop.</param>
+    /// <returns>Confirmation of the stop command.</returns>
+    /// <response code="200">Stop command sent successfully.</response>
+    /// <response code="404">No active session found for the agent.</response>
+    [HttpPost("stop/{agentId}")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    public IActionResult StopAgent(string agentId)
+    {
+        _logger.LogInformation("Stop command received for agent {AgentId}", agentId);
+
+        // TODO: Forward to Gateway via bridge service
+        // await _bridgeService.SendRpcAsync("sessions.abort", new { sessionKey = ... });
+
+        return Ok(new
+        {
+            agentId,
+            command = "stop",
+            status = "sent",
+            timestamp = DateTime.UtcNow.ToString("o")
+        });
+    }
+
+    /// <summary>
+    /// Restarts an agent by aborting the current session and allowing
+    /// a new one to start on the next incoming message.
+    /// </summary>
+    /// <param name="agentId">The agent identifier to restart.</param>
+    /// <returns>Confirmation of the restart command.</returns>
+    /// <response code="200">Restart command sent successfully.</response>
+    [HttpPost("restart/{agentId}")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    public IActionResult RestartAgent(string agentId)
+    {
+        _logger.LogInformation("Restart command received for agent {AgentId}", agentId);
+
+        // TODO: Forward to Gateway — abort current session + signal restart
+
+        return Ok(new
+        {
+            agentId,
+            command = "restart",
+            status = "sent",
+            timestamp = DateTime.UtcNow.ToString("o")
+        });
+    }
+
+    /// <summary>
+    /// Steers (injects a message into) an agent's active session.
+    /// Used by operators to redirect an agent's task mid-execution.
+    /// </summary>
+    /// <param name="agentId">The agent identifier to steer.</param>
+    /// <param name="request">The steering message to inject.</param>
+    /// <returns>Confirmation of the steer command.</returns>
+    /// <response code="200">Steer command sent successfully.</response>
+    /// <response code="400">Missing or empty message.</response>
+    [HttpPost("steer/{agentId}")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    public IActionResult SteerAgent(string agentId, [FromBody] SteerRequest request)
+    {
+        if (string.IsNullOrWhiteSpace(request.Message))
+        {
+            return BadRequest(new { error = "Message is required" });
+        }
+
+        _logger.LogInformation("Steer command received for agent {AgentId}: {Message}",
+            agentId, request.Message.Length > 100
+                ? request.Message[..100] + "..." : request.Message);
+
+        // TODO: Forward to Gateway via bridge service
+        // await _bridgeService.SendRpcAsync("sessions.steer", new { sessionKey = ..., message = request.Message });
+
+        return Ok(new
+        {
+            agentId,
+            command = "steer",
+            message = request.Message,
+            status = "sent",
+            timestamp = DateTime.UtcNow.ToString("o")
+        });
+    }
+}
+
+/// <summary>
+/// Request body for the steer command.
+/// </summary>
+/// <param name="Message">The message to inject into the agent's session.</param>
+public record SteerRequest(string Message);

backend/ControlCenter/Controllers/LogsController.cs

@@ -0,0 +1,87 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace ControlCenter.Controllers;
+
+/// <summary>
+/// REST API for querying agent session logs.
+/// Provides historical message and tool call logs for a specific agent.
+///
+/// <para>API contract for Rex (Frontend):</para>
+/// <list type="bullet">
+///   <item><c>GET /api/logs/{agentId}</c> — Returns recent logs for an agent</item>
+///   <item><c>GET /api/logs/{agentId}/tools</c> — Returns recent tool calls for an agent</item>
+/// </list>
+///
+/// <para>Log data is sourced from the OpenClaw Gateway's transcript files.
+/// The Gateway's <c>logs.tail</c> RPC provides the raw data, and this
+/// controller formats it for the frontend.</para>
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class LogsController : ControllerBase
+{
+    private readonly ILogger<LogsController> _logger;
+
+    public LogsController(ILogger<LogsController> logger)
+    {
+        _logger = logger;
+    }
+
+    /// <summary>
+    /// Gets recent session logs for a specific agent.
+    /// Returns the last N messages from the agent's active session transcript.
+    /// </summary>
+    /// <param name="agentId">The agent identifier, e.g. "otto", "dex".</param>
+    /// <param name="limit">Maximum number of log entries to return (default: 50, max: 200).</param>
+    /// <returns>An array of log entries for the agent.</returns>
+    /// <response code="200">Returns the agent's recent logs.</response>
+    /// <response code="404">No active session found for the agent.</response>
+    [HttpGet("{agentId}")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    public IActionResult GetLogs(string agentId, [FromQuery] int limit = 50)
+    {
+        limit = Math.Clamp(limit, 1, 200);
+
+        _logger.LogDebug("Logs requested for agent {AgentId}, limit {Limit}", agentId, limit);
+
+        // TODO: Implement log retrieval by calling the Gateway's logs.tail RPC
+        // or reading transcript files. For now, return an empty array as the
+        // bridge service will provide this data when fully integrated.
+        return Ok(new
+        {
+            agentId,
+            logs = Array.Empty<object>(),
+            count = 0,
+            hasMore = false
+        });
+    }
+
+    /// <summary>
+    /// Gets recent tool call logs for a specific agent.
+    /// Returns the last N tool invocations from the agent's session.
+    /// </summary>
+    /// <param name="agentId">The agent identifier.</param>
+    /// <param name="limit">Maximum number of tool entries to return (default: 20, max: 100).</param>
+    /// <returns>An array of tool call entries for the agent.</returns>
+    /// <response code="200">Returns the agent's recent tool calls.</response>
+    /// <response code="404">No active session found for the agent.</response>
+    [HttpGet("{agentId}/tools")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    public IActionResult GetToolLogs(string agentId, [FromQuery] int limit = 20)
+    {
+        limit = Math.Clamp(limit, 1, 100);
+
+        _logger.LogDebug("Tool logs requested for agent {AgentId}, limit {Limit}", agentId, limit);
+
+        // TODO: Implement tool log retrieval. Return empty for now.
+        return Ok(new
+        {
+            agentId,
+            tools = Array.Empty<object>(),
+            count = 0,
+            hasMore = false
+        });
+    }
+}

backend/ControlCenter/Hubs/AgentStatusHub.cs

@@ -0,0 +1,184 @@
+using Microsoft.AspNetCore.SignalR;
+
+namespace ControlCenter.Hubs;
+
+/// <summary>
+/// SignalR hub for real-time agent status updates in the Command Hub.
+///
+/// <para>Usage flow:</para>
+/// <list type="number">
+///   <item>Client connects to <c>/hubs/agent-status</c></item>
+///   <item>Client calls <see cref="JoinFleet"/> to subscribe to all agent updates</item>
+///   <item>Client calls <see cref="JoinAgentGroup"/> to subscribe to a specific agent</item>
+///   <item>Server pushes <see cref="IAgentStatusClient.AgentStatusChanged"/>
+///         and <see cref="IAgentStatusClient.AgentTaskProgress"/> events</item>
+///   <item>Client calls <see cref="GetFleetSnapshot"/> for initial state on connect</item>
+/// </list>
+///
+/// <para>Group naming:</para>
+/// <list type="bullet">
+///   <item>Fleet group: <c>fleet</c> — receives all agent updates</item>
+///   <item>Agent group: <c>agent:{agentId}</c> — receives updates for one agent</item>
+/// </list>
+///
+/// <para>Typed client: <see cref="IAgentStatusClient"/> — all server-to-client
+/// calls go through this interface for compile-time safety.</para>
+///
+/// <para>Architecture note: This hub bridges OpenClaw Gateway WebSocket events
+/// to SignalR clients. A background service (<see cref="Services.GatewayEventBridgeService"/>)
+/// subscribes to Gateway events and pushes them through this hub's extension methods.</para>
+/// </summary>
+public class AgentStatusHub : Hub<IAgentStatusClient>
+{
+    private readonly ILogger<AgentStatusHub> _logger;
+
+    public AgentStatusHub(ILogger<AgentStatusHub> logger)
+    {
+        _logger = logger;
+    }
+
+    /// <summary>
+    /// Adds the calling connection to the fleet group.
+    /// Once joined, the client will receive all agent status changes
+    /// and task progress updates across the entire fleet.
+    /// </summary>
+    public async Task JoinFleet()
+    {
+        await Groups.AddToGroupAsync(Context.ConnectionId, FleetGroupName);
+        _logger.LogDebug("Connection {ConnectionId} joined fleet group", Context.ConnectionId);
+    }
+
+    /// <summary>
+    /// Removes the calling connection from the fleet group.
+    /// </summary>
+    public async Task LeaveFleet()
+    {
+        await Groups.RemoveFromGroupAsync(Context.ConnectionId, FleetGroupName);
+        _logger.LogDebug("Connection {ConnectionId} left fleet group", Context.ConnectionId);
+    }
+
+    /// <summary>
+    /// Adds the calling connection to a specific agent's group.
+    /// Once joined, the client will receive updates only for that agent.
+    /// </summary>
+    /// <param name="agentId">The agent identifier, e.g. "otto", "dex".</param>
+    /// <exception cref="HubException">Thrown if agentId is null or empty.</exception>
+    public async Task JoinAgentGroup(string agentId)
+    {
+        if (string.IsNullOrWhiteSpace(agentId))
+            throw new HubException("agentId is required");
+
+        var groupName = AgentGroupName(agentId);
+        await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
+        _logger.LogDebug("Connection {ConnectionId} joined agent group {GroupName}",
+            Context.ConnectionId, groupName);
+    }
+
+    /// <summary>
+    /// Removes the calling connection from a specific agent's group.
+    /// </summary>
+    /// <param name="agentId">The agent identifier.</param>
+    public async Task LeaveAgentGroup(string agentId)
+    {
+        if (string.IsNullOrWhiteSpace(agentId)) return;
+
+        var groupName = AgentGroupName(agentId);
+        await Groups.RemoveFromGroupAsync(Context.ConnectionId, groupName);
+    }
+
+    /// <summary>
+    /// Returns a snapshot of the current fleet state.
+    /// Called by clients on initial connection to get the full picture
+    /// before incremental updates begin arriving.
+    /// </summary>
+    /// <returns>An array of <see cref="AgentCardData"/> representing all known agents.</returns>
+    public Task<AgentCardData[]> GetFleetSnapshot()
+    {
+        // The fleet state is managed by the GatewayEventBridgeService.
+        // For now, return an empty array — the bridge service will push
+        // updates as they arrive from the Gateway.
+        _logger.LogDebug("Fleet snapshot requested by {ConnectionId}", Context.ConnectionId);
+        return Task.FromResult(Array.Empty<AgentCardData>());
+    }
+
+    /// <summary>
+    /// Overrides <see cref="Hub.OnDisconnectedAsync"/> to perform cleanup.
+    /// SignalR automatically removes disconnected connections from all groups.
+    /// </summary>
+    /// <param name="exception">Exception that caused the disconnection, if any.</param>
+    public override Task OnDisconnectedAsync(Exception? exception)
+    {
+        _logger.LogDebug("Connection {ConnectionId} disconnected", Context.ConnectionId);
+        return base.OnDisconnectedAsync(exception);
+    }
+
+    /// <summary>
+    /// The SignalR group name for the entire fleet (all agents).
+    /// </summary>
+    internal const string FleetGroupName = "fleet";
+
+    /// <summary>
+    /// Returns the SignalR group name for a specific agent.
+    /// Format: <c>agent:{agentId}</c> (lowercase for consistency).
+    /// </summary>
+    /// <param name="agentId">The agent identifier.</param>
+    internal static string AgentGroupName(string agentId) =>
+        $"agent:{agentId.ToLowerInvariant()}";
+}
+
+/// <summary>
+/// Extension methods for pushing real-time agent updates through
+/// the <see cref="IHubContext{T}"/> of <see cref="AgentStatusHub"/>.
+///
+/// <para>These methods are intended to be called from background services
+/// (e.g., <see cref="Services.GatewayEventBridgeService"/>) or other
+/// server-side code that detects an agent state change.</para>
+/// </summary>
+public static class AgentStatusHubExtensions
+{
+    /// <summary>
+    /// Pushes an agent status change to all clients subscribed to
+    /// the fleet group and the specific agent's group.
+    ///
+    /// <para>Call this from any background service when an agent's
+    /// operational status changes (e.g., the Gateway reports a
+    /// session transition from "running" to "done").</para>
+    /// </summary>
+    /// <param name="hubContext">The hub context injected via DI.</param>
+    /// <param name="update">The agent status update payload.</param>
+    /// <returns>A Task that completes when the message has been sent to all group members.</returns>
+    public static async Task PushAgentStatusAsync(
+        this IHubContext<AgentStatusHub, IAgentStatusClient> hubContext,
+        AgentStatusUpdate update)
+    {
+        // Broadcast to the fleet group (all subscribers)
+        await hubContext.Clients.Group(AgentStatusHub.FleetGroupName)
+            .AgentStatusChanged(update);
+
+        // Also push to the specific agent's group
+        var agentGroup = AgentStatusHub.AgentGroupName(update.AgentId);
+        await hubContext.Clients.Group(agentGroup)
+            .AgentStatusChanged(update);
+    }
+
+    /// <summary>
+    /// Pushes a task progress update to all clients subscribed to
+    /// the fleet group and the specific agent's group.
+    /// </summary>
+    /// <param name="hubContext">The hub context injected via DI.</param>
+    /// <param name="progress">The task progress update payload.</param>
+    /// <returns>A Task that completes when the message has been sent to all group members.</returns>
+    public static async Task PushTaskProgressAsync(
+        this IHubContext<AgentStatusHub, IAgentStatusClient> hubContext,
+        TaskProgressUpdate progress)
+    {
+        // Broadcast to the fleet group
+        await hubContext.Clients.Group(AgentStatusHub.FleetGroupName)
+            .AgentTaskProgress(progress);
+
+        // Also push to the specific agent's group
+        var agentGroup = AgentStatusHub.AgentGroupName(progress.AgentId);
+        await hubContext.Clients.Group(agentGroup)
+            .AgentTaskProgress(progress);
+    }
+}

backend/ControlCenter/Hubs/IAgentStatusClient.cs

@@ -0,0 +1,30 @@
+namespace ControlCenter.Hubs;
+
+/// <summary>
+/// Strongly-typed client interface for the AgentStatus SignalR hub.
+/// Defines the methods the server can invoke on connected clients
+/// to push real-time agent status and task progress updates.
+/// 
+/// <para>All server-to-client calls go through this interface for
+/// compile-time safety — matching the pattern used by the
+/// Extrudex PrinterHub.</para>
+/// </summary>
+public interface IAgentStatusClient
+{
+    /// <summary>
+    /// Pushes an agent status change to all subscribed clients.
+    /// Fired whenever an agent's operational status changes
+    /// (e.g., idle → active, active → thinking, active → error).
+    /// </summary>
+    /// <param name="update">The full status update payload.</param>
+    /// <returns>A Task that completes when the client has processed the update.</returns>
+    Task AgentStatusChanged(AgentStatusUpdate update);
+
+    /// <summary>
+    /// Pushes a task progress update to all subscribed clients.
+    /// Fired when an agent reports progress on its current task.
+    /// </summary>
+    /// <param name="progress">The task progress update payload.</param>
+    /// <returns>A Task that completes when the client has processed the update.</returns>
+    Task AgentTaskProgress(TaskProgressUpdate progress);
+}

backend/ControlCenter/Hubs/Models/AgentStatusModels.cs

@@ -0,0 +1,92 @@
+namespace ControlCenter;
+
+/// <summary>
+/// Agent operational status derived from OpenClaw Gateway session activity.
+/// Maps to the frontend AgentStatus type: 'active' | 'idle' | 'thinking' | 'error'.
+/// </summary>
+public enum AgentStatus
+{
+    /// <summary>Agent is currently processing a turn.</summary>
+    Active,
+
+    /// <summary>Agent completed its last turn; no active work.</summary>
+    Idle,
+
+    /// <summary>LLM call in flight; tokens streaming.</summary>
+    Thinking,
+
+    /// <summary>Agent encountered an unhandled error.</summary>
+    Error
+}
+
+/// <summary>
+/// Extended lifecycle status including offline — not all agents have active sessions.
+/// Used internally; clients only see <see cref="AgentStatus"/> (offline maps to idle).
+/// </summary>
+public enum AgentLifecycleStatus
+{
+    Active,
+    Idle,
+    Thinking,
+    Error,
+    Offline
+}
+
+/// <summary>
+/// Pushed to SignalR clients when an agent's status changes.
+/// Matches the TypeScript <c>AgentStatusUpdate</c> interface from the design spec.
+/// </summary>
+/// <param name="AgentId">Agent identifier, e.g. "otto", "dex".</param>
+/// <param name="DisplayName">Human-readable name, e.g. "Otto".</param>
+/// <param name="Role">Role description, e.g. "Orchestrator Agent".</param>
+/// <param name="Status">Current operational status.</param>
+/// <param name="CurrentTask">Description of the current task, if any.</param>
+/// <param name="SessionKey">Full session key, e.g. "agent:otto:telegram:direct:8787451565".</param>
+/// <param name="Channel">Channel the agent is operating on, e.g. "telegram".</param>
+/// <param name="LastActivity">ISO 8601 timestamp of last activity.</param>
+/// <param name="ErrorMessage">Error message when status is 'error'.</param>
+public record AgentStatusUpdate(
+    string AgentId,
+    string DisplayName,
+    string Role,
+    string Status,
+    string? CurrentTask,
+    string SessionKey,
+    string Channel,
+    string LastActivity,
+    string? ErrorMessage = null
+);
+
+/// <summary>
+/// Pushed to SignalR clients when an agent's task progress updates.
+/// Matches the TypeScript <c>TaskProgressUpdate</c> interface from the design spec.
+/// </summary>
+/// <param name="AgentId">Agent identifier.</param>
+/// <param name="TaskDescription">Description of the current task.</param>
+/// <param name="Progress">Task progress percentage (0–100), if trackable.</param>
+/// <param name="Elapsed">Elapsed time string, e.g. "04m 12s".</param>
+public record TaskProgressUpdate(
+    string AgentId,
+    string TaskDescription,
+    int? Progress,
+    string? Elapsed
+);
+
+/// <summary>
+/// Snapshot of an agent's full card data, sent on initial connection
+/// or when the fleet state is requested.
+/// Matches the TypeScript <c>AgentCardData</c> interface from the design spec.
+/// </summary>
+public record AgentCardData(
+    string Id,
+    string DisplayName,
+    string Role,
+    string Status,
+    string? CurrentTask,
+    int? TaskProgress,
+    string? TaskElapsed,
+    string SessionKey,
+    string Channel,
+    string LastActivity,
+    string? ErrorMessage
+);

backend/ControlCenter/Program.cs

@@ -0,0 +1,72 @@
+using System.Reflection;
+using ControlCenter.Hubs;
+using ControlCenter.Services;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// ── API Services ───────────────────────────────────────────
+builder.Services.AddControllers();
+builder.Services.AddEndpointsApiExplorer();
+builder.Services.AddSwaggerGen(c =>
+{
+    c.SwaggerDoc("v1", new()
+    {
+        Title = "Control Center API",
+        Version = "v1",
+        Description = "OpenClaw Control Center — Command Hub backend with SignalR real-time updates"
+    });
+
+    // Include XML doc comments in Swagger output
+    var xmlFile = $"{Assembly.GetExecutingAssembly().GetName().Name}.xml";
+    var xmlPath = Path.Combine(AppContext.BaseDirectory, xmlFile);
+    if (File.Exists(xmlPath))
+    {
+        c.IncludeXmlComments(xmlPath);
+    }
+});
+
+// ── CORS (kiosk + remote browser) ─────────────────────────
+// The Control Center frontend runs on a different origin than the backend.
+// SignalR requires credentials for WebSocket transport, so we use
+// specific origins rather than AllowAnyOrigin.
+var corsOrigins = builder.Configuration.GetSection("Cors:AllowedOrigins")
+    .Get<string[]>() ?? new[] { "http://localhost:4200", "http://localhost:5000" };
+
+builder.Services.AddCors(options =>
+{
+    options.AddDefaultPolicy(policy =>
+    {
+        policy.WithOrigins(corsOrigins)
+              .AllowAnyMethod()
+              .AllowAnyHeader()
+              .AllowCredentials(); // Required for SignalR WebSocket
+    });
+});
+
+// ── SignalR (real-time agent status updates) ───────────────
+builder.Services.AddSignalR();
+
+// ── Gateway Bridge Service ────────────────────────────────
+// Background service that connects to the OpenClaw Gateway WebSocket
+// and bridges events to the AgentStatus SignalR hub.
+builder.Services.AddSingleton<GatewayEventBridgeService>();
+builder.Services.AddHostedService(sp => sp.GetRequiredService<GatewayEventBridgeService>());
+
+var app = builder.Build();
+
+// ── Middleware ──────────────────────────────────────────────
+if (app.Environment.IsDevelopment())
+{
+    app.UseSwagger();
+    app.UseSwaggerUI();
+}
+
+app.UseCors();
+app.UseAuthorization();
+app.MapControllers();
+
+// ── Hub Endpoints ───────────────────────────────────────────
+// Agent status hub at /hubs/agent-status (matches the design spec)
+app.MapHub<AgentStatusHub>("/hubs/agent-status");
+
+app.Run();

backend/ControlCenter/Properties/launchSettings.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "applicationUrl": "http://localhost:5053",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

backend/ControlCenter/Services/GatewayEventBridgeService.cs

@@ -0,0 +1,523 @@
+using System.Collections.Concurrent;
+using System.Net.WebSockets;
+using System.Text;
+using System.Text.Json;
+using ControlCenter.Hubs;
+using Microsoft.AspNetCore.SignalR;
+
+namespace ControlCenter.Services;
+
+/// <summary>
+/// Background service that connects to the OpenClaw Gateway WebSocket
+/// and bridges Gateway events to the <see cref="Hubs.AgentStatusHub"/>.
+///
+/// <para>Architecture:</para>
+/// <list type="number">
+///   <item>Connects to the Gateway WS endpoint (configurable via appsettings)</item>
+///   <item>Handles the v3 protocol handshake (challenge → connect → hello-ok)</item>
+///   <item>Subscribes to <c>sessions.changed</c> and related events</item>
+///   <item>Translates session state changes into <see cref="AgentStatusUpdate"/>
+///         and <see cref="TaskProgressUpdate"/> objects</item>
+///   <item>Pushes updates through the <see cref="Hubs.AgentStatusHub"/> SignalR hub</item>
+/// </list>
+///
+/// <para>This is the server-side bridge that allows Angular clients to
+/// receive real-time updates via SignalR instead of connecting directly
+/// to the Gateway WebSocket.</para>
+/// </summary>
+public class GatewayEventBridgeService : BackgroundService
+{
+    private readonly ILogger<GatewayEventBridgeService> _logger;
+    private readonly IHubContext<Hubs.AgentStatusHub, Hubs.IAgentStatusClient> _hubContext;
+    private readonly IConfiguration _configuration;
+
+    /// <summary>
+    /// In-memory fleet state — maps agent IDs to their latest card data.
+    /// Updated on every <c>sessions.changed</c> event from the Gateway.
+    /// </summary>
+    private readonly ConcurrentDictionary<string, AgentCardData> _fleetState = new();
+
+    /// <summary>
+    /// Known agent roles for display in the Command Hub.
+    /// Maps agent IDs to their functional descriptions.
+    /// </summary>
+    private static readonly Dictionary<string, string> AgentRoles = new()
+    {
+        ["main"] = "Primary Assistant",
+        ["otto"] = "Orchestrator Agent",
+        ["dave"] = "Network Admin Agent",
+        ["bob"] = "Content Writer Agent",
+        ["stuart"] = "Image & Creative Agent",
+        ["phil"] = "Home Automation Agent",
+        ["carl"] = "Security Agent",
+        ["larry"] = "Business Agent",
+        ["mel"] = "E-Commerce Agent",
+        ["norbert"] = "Product Agent",
+        ["jerry"] = "Market Research Agent",
+        ["rex"] = "Frontend Dev Agent",
+        ["dex"] = "Backend Dev Agent",
+        ["hex"] = "Database Agent",
+        ["pip"] = "Raspberry Pi Agent",
+        ["nano"] = "ESP32/Firmware Agent",
+        ["axiom"] = "Utility Agent",
+        ["bonnie"] = "Music Agent",
+        ["sketch"] = "UI/UX Design Agent",
+        ["flip"] = "Mobile Dev Agent",
+        ["buzz"] = "SEO Agent",
+        ["aries"] = "Companion Agent"
+    };
+
+    /// <summary>
+    /// Maps OpenClaw session status to <see cref="AgentStatus"/>.
+    /// </summary>
+    private static string MapSessionStatus(string? sessionStatus) => sessionStatus switch
+    {
+        "running" => "active",
+        "streaming" => "thinking",
+        "error" or "aborted" => "error",
+        "done" => "idle",
+        _ => "idle"
+    };
+
+    public GatewayEventBridgeService(
+        ILogger<GatewayEventBridgeService> logger,
+        IHubContext<Hubs.AgentStatusHub, Hubs.IAgentStatusClient> hubContext,
+        IConfiguration configuration)
+    {
+        _logger = logger;
+        _hubContext = hubContext;
+        _configuration = configuration;
+    }
+
+    /// <summary>
+    /// Returns the current fleet state snapshot.
+    /// Used by the hub's <c>GetFleetSnapshot</c> method and by the
+    /// <c>AgentsController</c> REST endpoint.
+    /// </summary>
+    public AgentCardData[] GetFleetSnapshot() =>
+        _fleetState.Values.ToArray();
+
+    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
+    {
+        _logger.LogInformation("Gateway Event Bridge service starting");
+
+        while (!stoppingToken.IsCancellationRequested)
+        {
+            try
+            {
+                await ConnectAndListenAsync(stoppingToken);
+            }
+            catch (OperationCanceledException) when (stoppingToken.IsCancellationRequested)
+            {
+                _logger.LogInformation("Gateway Event Bridge service stopping");
+                break;
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Gateway connection lost, reconnecting in 5 seconds...");
+                await Task.Delay(TimeSpan.FromSeconds(5), stoppingToken);
+            }
+        }
+    }
+
+    /// <summary>
+    /// Connects to the OpenClaw Gateway WebSocket and processes events
+    /// until the connection is lost or cancellation is requested.
+    /// </summary>
+    private async Task ConnectAndListenAsync(CancellationToken stoppingToken)
+    {
+        var gatewayUrl = _configuration["Gateway:WebSocketUrl"]
+            ?? "ws://localhost:3271/ws";
+        var authToken = _configuration["Gateway:AuthToken"] ?? string.Empty;
+
+        _logger.LogInformation("Connecting to Gateway at {Url}", gatewayUrl);
+
+        using var ws = new ClientWebSocket();
+
+        // Set auth header if available
+        if (!string.IsNullOrEmpty(authToken))
+        {
+            ws.Options.SetRequestHeader("Authorization", $"Bearer {authToken}");
+        }
+
+        await ws.ConnectAsync(new Uri(gatewayUrl), stoppingToken);
+        _logger.LogInformation("Connected to Gateway WebSocket");
+
+        // Start receiving messages
+        await ReceiveMessagesAsync(ws, stoppingToken);
+    }
+
+    /// <summary>
+    /// Receives and processes WebSocket messages from the Gateway.
+    /// Handles the v3 protocol handshake and dispatches events.
+    /// </summary>
+    private async Task ReceiveMessagesAsync(ClientWebSocket ws, CancellationToken stoppingToken)
+    {
+        var buffer = new byte[8192];
+        var messageBuilder = new StringBuilder();
+
+        while (ws.State == WebSocketState.Open && !stoppingToken.IsCancellationRequested)
+        {
+            WebSocketReceiveResult result;
+            try
+            {
+                result = await ws.ReceiveAsync(buffer, stoppingToken);
+            }
+            catch (WebSocketException ex)
+            {
+                _logger.LogWarning(ex, "WebSocket receive error");
+                break;
+            }
+
+            if (result.MessageType == WebSocketMessageType.Close)
+            {
+                _logger.LogInformation("Gateway WebSocket closed by server");
+                break;
+            }
+
+            messageBuilder.Append(Encoding.UTF8.GetString(buffer, 0, result.Count));
+
+            if (result.EndOfMessage)
+            {
+                var message = messageBuilder.ToString();
+                messageBuilder.Clear();
+                await ProcessMessageAsync(ws, message, stoppingToken);
+            }
+        }
+    }
+
+    /// <summary>
+    /// Processes a single WebSocket message from the Gateway.
+    /// Routes based on the message type: event, response, or challenge.
+    /// </summary>
+    private async Task ProcessMessageAsync(
+        ClientWebSocket ws, string message, CancellationToken stoppingToken)
+    {
+        try
+        {
+            using var doc = JsonDocument.Parse(message);
+            var root = doc.RootElement;
+
+            var type = root.GetProperty("type").GetString();
+
+            switch (type)
+            {
+                case "event":
+                    await HandleGatewayEventAsync(root);
+                    break;
+
+                case "res":
+                    HandleGatewayResponse(root);
+                    break;
+            }
+
+            // Special handling for connect.challenge events
+            if (root.TryGetProperty("event", out var eventName) &&
+                eventName.GetString() == "connect.challenge")
+            {
+                await HandleConnectChallengeAsync(ws, root, stoppingToken);
+            }
+        }
+        catch (JsonException ex)
+        {
+            _logger.LogWarning(ex, "Failed to parse Gateway message: {Message}",
+                message.Length > 200 ? message[..200] + "..." : message);
+        }
+    }
+
+    /// <summary>
+    /// Handles the Gateway connect.challenge event by sending
+    /// a connect request with authentication credentials.
+    /// </summary>
+    private async Task HandleConnectChallengeAsync(
+        ClientWebSocket ws, JsonElement root, CancellationToken stoppingToken)
+    {
+        _logger.LogInformation("Received connect.challenge from Gateway");
+
+        var connectRequest = new
+        {
+            type = "req",
+            id = $"bridge-{Guid.NewGuid():N}",
+            method = "connect",
+            @params = new
+            {
+                minProtocol = 3,
+                maxProtocol = 3,
+                client = new
+                {
+                    id = "control-center-backend",
+                    version = "1.0.0",
+                    platform = "server",
+                    mode = "operator"
+                },
+                role = "operator",
+                scopes = new[] { "operator.read", "operator.write" },
+                auth = new
+                {
+                    token = _configuration["Gateway:AuthToken"] ?? string.Empty
+                },
+                locale = "en-US",
+                userAgent = "control-center-backend/1.0.0"
+            }
+        };
+
+        var json = JsonSerializer.Serialize(connectRequest);
+        var bytes = Encoding.UTF8.GetBytes(json);
+        await ws.SendAsync(bytes, WebSocketMessageType.Text, true, stoppingToken);
+    }
+
+    /// <summary>
+    /// Handles a Gateway event message by dispatching to the
+    /// appropriate handler based on event name.
+    /// </summary>
+    private async Task HandleGatewayEventAsync(JsonElement root)
+    {
+        if (!root.TryGetProperty("event", out var eventProp)) return;
+        var eventName = eventProp.GetString();
+
+        _logger.LogDebug("Gateway event: {Event}", eventName);
+
+        switch (eventName)
+        {
+            case "sessions.changed":
+                await HandleSessionsChangedAsync(root);
+                break;
+
+            case "session.message":
+                HandleSessionMessage(root);
+                break;
+
+            case "session.tool":
+                HandleSessionTool(root);
+                break;
+
+            case "health":
+                HandleHealthEvent(root);
+                break;
+        }
+    }
+
+    /// <summary>
+    /// Handles a sessions.changed event from the Gateway.
+    /// Updates the fleet state and pushes status changes through SignalR.
+    /// </summary>
+    private async Task HandleSessionsChangedAsync(JsonElement root)
+    {
+        if (!root.TryGetProperty("payload", out var payload)) return;
+
+        // The payload may contain a snapshot of all sessions
+        if (payload.TryGetProperty("snapshot", out var snapshot) &&
+            snapshot.ValueKind == JsonValueKind.Array)
+        {
+            foreach (var session in snapshot.EnumerateArray())
+            {
+                var cardData = SessionToCardData(session);
+                if (cardData is null) continue;
+
+                _fleetState[cardData.Id] = cardData;
+
+                var update = new AgentStatusUpdate(
+                    AgentId: cardData.Id,
+                    DisplayName: cardData.DisplayName,
+                    Role: cardData.Role,
+                    Status: cardData.Status,
+                    CurrentTask: cardData.CurrentTask,
+                    SessionKey: cardData.SessionKey,
+                    Channel: cardData.Channel,
+                    LastActivity: cardData.LastActivity,
+                    ErrorMessage: cardData.ErrorMessage
+                );
+
+                await _hubContext.PushAgentStatusAsync(update);
+            }
+        }
+
+        // Handle individual updates/added/removed
+        if (payload.TryGetProperty("updated", out var updated) &&
+            updated.ValueKind == JsonValueKind.Array)
+        {
+            foreach (var sessionKey in updated.EnumerateArray())
+            {
+                _logger.LogDebug("Session updated: {Key}", sessionKey.GetString());
+            }
+        }
+    }
+
+    /// <summary>
+    /// Handles a session.message event. Updates the agent's last activity
+    /// and pushes a status update if the status changed.
+    /// </summary>
+    private void HandleSessionMessage(JsonElement root)
+    {
+        if (!root.TryGetProperty("payload", out var payload)) return;
+        if (!payload.TryGetProperty("sessionKey", out var sessionKeyProp)) return;
+
+        var sessionKey = sessionKeyProp.GetString() ?? string.Empty;
+        var agentId = ExtractAgentId(sessionKey);
+
+        if (string.IsNullOrEmpty(agentId)) return;
+
+        // Update last activity timestamp
+        if (_fleetState.TryGetValue(agentId, out var existing))
+        {
+            _fleetState[agentId] = existing with
+            {
+                LastActivity = DateTime.UtcNow.ToString("o"),
+                Status = "active"
+            };
+        }
+    }
+
+    /// <summary>
+    /// Handles a session.tool event. Extracts tool progress information
+    /// and pushes a <see cref="TaskProgressUpdate"/> through SignalR.
+    /// </summary>
+    private void HandleSessionTool(JsonElement root)
+    {
+        if (!root.TryGetProperty("payload", out var payload)) return;
+        if (!payload.TryGetProperty("sessionKey", out var sessionKeyProp)) return;
+
+        var sessionKey = sessionKeyProp.GetString() ?? string.Empty;
+        var agentId = ExtractAgentId(sessionKey);
+
+        if (string.IsNullOrEmpty(agentId)) return;
+
+        var toolName = payload.TryGetProperty("toolName", out var tn) ? tn.GetString() : null;
+        var toolStatus = payload.TryGetProperty("status", out var ts) ? ts.GetString() : null;
+
+        if (toolName is null || toolStatus is null) return;
+
+        var progress = toolStatus switch
+        {
+            "started" => 0,
+            "completed" => 100,
+            _ => (int?)null
+        };
+
+        var update = new TaskProgressUpdate(
+            AgentId: agentId,
+            TaskDescription: $"{toolName} ({toolStatus})",
+            Progress: progress,
+            Elapsed: null
+        );
+
+        // Fire and forget — don't block the event loop
+        _ = _hubContext.PushTaskProgressAsync(update);
+    }
+
+    /// <summary>
+    /// Handles a health event from the Gateway.
+    /// Logs the health status for diagnostics.
+    /// </summary>
+    private void HandleHealthEvent(JsonElement root)
+    {
+        if (!root.TryGetProperty("payload", out var payload)) return;
+
+        var ok = payload.TryGetProperty("ok", out var okProp) && okProp.GetBoolean();
+        var status = payload.TryGetProperty("status", out var s) ? s.GetString() : "unknown";
+
+        _logger.LogInformation("Gateway health: ok={Ok}, status={Status}", ok, status);
+    }
+
+    /// <summary>
+    /// Handles a Gateway response message. Currently only logs for diagnostics.
+    /// </summary>
+    private void HandleGatewayResponse(JsonElement root)
+    {
+        if (root.TryGetProperty("ok", out var okProp) && okProp.GetBoolean())
+        {
+            _logger.LogDebug("Gateway RPC response OK");
+
+            // Check for hello-ok after connect
+            if (root.TryGetProperty("payload", out var payload) &&
+                payload.TryGetProperty("type", out var typeProp) &&
+                typeProp.GetString() == "hello-ok")
+            {
+                _logger.LogInformation("Gateway handshake complete (hello-ok received)");
+            }
+        }
+        else if (root.TryGetProperty("error", out var error))
+        {
+            var errorMsg = error.TryGetProperty("message", out var msg)
+                ? msg.GetString() : "unknown error";
+            _logger.LogWarning("Gateway RPC error: {Error}", errorMsg);
+        }
+    }
+
+    /// <summary>
+    /// Converts a raw Gateway session JSON element into an
+    /// <see cref="AgentCardData"/> record.
+    /// </summary>
+    private AgentCardData? SessionToCardData(JsonElement session)
+    {
+        // Extract agent ID from session key or agentId field
+        string? agentId = null;
+        if (session.TryGetProperty("agentId", out var aid))
+            agentId = aid.GetString();
+        else if (session.TryGetProperty("key", out var key))
+            agentId = ExtractAgentId(key.GetString() ?? string.Empty);
+
+        if (string.IsNullOrEmpty(agentId)) return null;
+
+        var sessionKey = session.TryGetProperty("key", out var sk)
+            ? sk.GetString() ?? string.Empty : string.Empty;
+
+        var status = session.TryGetProperty("status", out var s)
+            ? MapSessionStatus(s.GetString()) : "idle";
+
+        var channel = ExtractChannel(session);
+
+        var lastActivity = session.TryGetProperty("updatedAt", out var ua)
+            ? DateTimeOffset.FromUnixTimeMilliseconds(ua.GetInt64()).ToString("o")
+            : DateTime.UtcNow.ToString("o");
+
+        var displayName = char.ToUpperInvariant(agentId![0]) + agentId[1..];
+        var role = AgentRoles.GetValueOrDefault(agentId!, "Agent");
+
+        return new AgentCardData(
+            Id: agentId!,
+            DisplayName: displayName,
+            Role: role,
+            Status: status,
+            CurrentTask: null,
+            TaskProgress: null,
+            TaskElapsed: null,
+            SessionKey: sessionKey,
+            Channel: channel,
+            LastActivity: lastActivity,
+            ErrorMessage: status == "error" ? "Agent encountered an error" : null
+        );
+    }
+
+    /// <summary>
+    /// Extracts the agent ID from a session key.
+    /// Session key format: "agent:{agentId}:{channel}:..."
+    /// </summary>
+    private static string? ExtractAgentId(string sessionKey)
+    {
+        if (string.IsNullOrEmpty(sessionKey)) return null;
+
+        var parts = sessionKey.Split(':');
+        if (parts.Length >= 2 && parts[0] == "agent")
+            return parts[1];
+
+        return null;
+    }
+
+    /// <summary>
+    /// Extracts the channel from a session element.
+    /// </summary>
+    private static string ExtractChannel(JsonElement session)
+    {
+        // Try direct "channel" property
+        if (session.TryGetProperty("channel", out var ch))
+            return ch.GetString() ?? "unknown";
+
+        // Try origin.provider
+        if (session.TryGetProperty("origin", out var origin) &&
+            origin.TryGetProperty("provider", out var provider))
+            return provider.GetString() ?? "unknown";
+
+        return "unknown";
+    }
+}

backend/ControlCenter/appsettings.Development.json

@@ -0,0 +1,19 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Debug",
+      "Microsoft.AspNetCore": "Information",
+      "ControlCenter": "Debug"
+    }
+  },
+  "Gateway": {
+    "WebSocketUrl": "ws://localhost:3271/ws",
+    "AuthToken": ""
+  },
+  "Cors": {
+    "AllowedOrigins": [
+      "http://localhost:4200",
+      "http://localhost:5000"
+    ]
+  }
+}

backend/ControlCenter/appsettings.json

@@ -0,0 +1,22 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning",
+      "ControlCenter": "Debug"
+    }
+  },
+  "AllowedHosts": "*",
+
+  "Gateway": {
+    "WebSocketUrl": "ws://localhost:3271/ws",
+    "AuthToken": ""
+  },
+
+  "Cors": {
+    "AllowedOrigins": [
+      "http://localhost:4200",
+      "http://localhost:5000"
+    ]
+  }
+}

backend/Data/AppDbContext.cs

@@ -0,0 +1,29 @@
+using ControlCenter.Api.Configurations;
+using ControlCenter.Api.Entities;
+using Microsoft.EntityFrameworkCore;
+
+namespace ControlCenter.Api.Data;
+
+/// <summary>
+/// EF Core DbContext for the Control Center database.
+/// All table and column names use snake_case via explicit HasColumnName configuration.
+/// </summary>
+public class AppDbContext : DbContext
+{
+    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
+
+    public DbSet<Agent> Agents => Set<Agent>();
+
+    protected override void OnModelCreating(ModelBuilder modelBuilder)
+    {
+        // Apply all entity type configurations from the Configurations namespace
+        modelBuilder.ApplyConfigurationsFromAssembly(typeof(AgentConfiguration).Assembly);
+
+        // Map the AgentStatus enum to a PostgreSQL enum type named "agent_status"
+        // This must be called after ApplyConfigurations to ensure the model is built
+        // before the enum mapping is applied.
+        modelBuilder.HasPostgresEnum<AgentStatus>();
+
+        base.OnModelCreating(modelBuilder);
+    }
+}

backend/Data/AppDbContextFactory.cs

@@ -0,0 +1,27 @@
+using Microsoft.EntityFrameworkCore;
+using ControlCenter.Api.Entities;
+
+namespace ControlCenter.Api.Data;
+
+/// <summary>
+/// Design-time factory for AppDbContext, used by EF Core tools (dotnet ef)
+/// to create migrations without requiring a running application.
+/// </summary>
+public class AppDbContextFactory : Microsoft.EntityFrameworkCore.Design.IDesignTimeDbContextFactory<AppDbContext>
+{
+    public AppDbContext CreateDbContext(string[] args)
+    {
+        var optionsBuilder = new DbContextOptionsBuilder<AppDbContext>();
+
+        // Connection string for design-time operations (migrations).
+        // In production, this comes from appsettings / environment variables.
+        var connectionString = "Host=localhost;Database=control_center;Username=postgres;Password=postgres";
+
+        optionsBuilder.UseNpgsql(connectionString, npgsqlOptions =>
+        {
+            npgsqlOptions.MigrationsAssembly(typeof(AppDbContext).Assembly.FullName);
+        });
+
+        return new AppDbContext(optionsBuilder.Options);
+    }
+}

backend/Dtos/AgentStatusUpdateDto.cs

@@ -0,0 +1,75 @@
+namespace ControlCenter.Api.Dtos;
+
+/// <summary>
+/// Data transfer object for broadcasting agent status updates
+/// to all connected SignalR clients.
+/// </summary>
+public class AgentStatusUpdateDto
+{
+    /// <summary>
+    /// Agent identifier, e.g. "otto", "dex", "rex".
+    /// Not null — every update must identify the agent it refers to.
+    /// </summary>
+    public string AgentId { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Human-readable display name, e.g. "Otto", "Dex".
+    /// Not null — used by clients to render agent cards.
+    /// </summary>
+    public string DisplayName { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Role description, e.g. "Orchestrator Agent", "Backend Specialist".
+    /// Not null — provides context for the agent's function.
+    /// </summary>
+    public string Role { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Current operational status of the agent.
+    /// Maps to <see cref="Entities.AgentStatus"/> values as lowercase strings:
+    /// "active", "idle", "thinking", "error".
+    /// </summary>
+    public string Status { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Description of the agent's current task, if any.
+    /// Null when the agent is idle with no active task.
+    /// </summary>
+    public string? CurrentTask { get; set; }
+
+    /// <summary>
+    /// Task progress percentage (0–100).
+    /// Null when progress is not trackable for the current task.
+    /// </summary>
+    public int? TaskProgress { get; set; }
+
+    /// <summary>
+    /// Elapsed time string for the current task, e.g. "04m 12s".
+    /// Null when no task is active.
+    /// </summary>
+    public string? TaskElapsed { get; set; }
+
+    /// <summary>
+    /// Full session key, e.g. "agent:otto:telegram:direct:8787451565".
+    /// Not null — uniquely identifies the agent session.
+    /// </summary>
+    public string SessionKey { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Communication channel the agent is operating on, e.g. "telegram", "discord", "slack".
+    /// Not null — every agent session operates on exactly one channel.
+    /// </summary>
+    public string Channel { get; set; } = string.Empty;
+
+    /// <summary>
+    /// ISO 8601 timestamp of the agent's last activity.
+    /// Not null — used by clients to detect stale connections.
+    /// </summary>
+    public string LastActivity { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Error message when the agent status is "error".
+    /// Null when the agent is not in an error state.
+    /// </summary>
+    public string? ErrorMessage { get; set; }
+}

backend/Entities/Agent.cs

@@ -0,0 +1,59 @@
+namespace ControlCenter.Api.Entities;
+
+/// <summary>
+/// Represents an agent's current state in the Control Center.
+/// Each row tracks one agent session's status, task, and activity.
+/// </summary>
+public class Agent
+{
+    /// <summary>
+    /// Primary key — UUID generated on insert.
+    /// </summary>
+    public Guid Id { get; set; }
+
+    /// <summary>
+    /// Current operational status of the agent.
+    /// Stored as an enum in PostgreSQL via Npgsql.
+    /// </summary>
+    public AgentStatus Status { get; set; } = AgentStatus.Idle;
+
+    /// <summary>
+    /// Description of the agent's current task, if any.
+    /// Nullable — not all agents have an active task.
+    /// </summary>
+    public string? Task { get; set; }
+
+    /// <summary>
+    /// Task progress percentage (0–100).
+    /// Nullable — progress is only meaningful when an agent has a trackable task.
+    /// </summary>
+    public int? Progress { get; set; }
+
+    /// <summary>
+    /// Full session key, e.g. "agent:otto:telegram:direct:8787451565".
+    /// Not null — every agent row must be associated with a session.
+    /// </summary>
+    public string SessionKey { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Communication channel the agent is operating on, e.g. "telegram", "discord", "slack".
+    /// Not null — every agent session operates on exactly one channel.
+    /// </summary>
+    public string Channel { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Timestamp of the agent's last activity.
+    /// Default: current UTC timestamp on insert.
+    /// </summary>
+    public DateTime LastActivity { get; set; } = DateTime.UtcNow;
+
+    /// <summary>
+    /// Row creation timestamp. Set automatically on insert.
+    /// </summary>
+    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
+
+    /// <summary>
+    /// Row last-update timestamp. Updated automatically on any modification.
+    /// </summary>
+    public DateTime UpdatedAt { get; set; } = DateTime.UtcNow;
+}

backend/Entities/AgentStatus.cs

@@ -0,0 +1,13 @@
+namespace ControlCenter.Api.Entities;
+
+/// <summary>
+/// Agent operational status enum.
+/// Maps to the agent_status enum type in PostgreSQL.
+/// </summary>
+public enum AgentStatus
+{
+    Active = 0,
+    Idle = 1,
+    Thinking = 2,
+    Error = 3
+}

backend/Hubs/AgentStatusHub.cs

@@ -0,0 +1,155 @@
+using ControlCenter.Api.Dtos;
+using Microsoft.AspNetCore.SignalR;
+
+namespace ControlCenter.Api.Hubs;
+
+/// <summary>
+/// SignalR hub for broadcasting agent status updates to connected clients.
+///
+/// <para>
+/// Clients call <see cref="SendStatusUpdate"/> to broadcast a status change,
+/// and the hub relays it to all connected clients via the
+/// <see cref="IAgentStatusClient.AgentStatusChanged"/> callback.
+/// </para>
+///
+/// <para>
+/// Server-side code should use <see cref="AgentStatusHubExtensions.PushStatusUpdateAsync"/>
+/// via <c>IHubContext&lt;AgentStatusHub, IAgentStatusClient&gt;</c> for background-service broadcasts.
+/// </para>
+///
+/// <para>
+/// Architecture note: This hub bridges OpenClaw Gateway events to SignalR clients.
+/// A background service subscribes to Gateway events and pushes them through
+/// this hub's extension methods.
+/// </para>
+/// </summary>
+public class AgentStatusHub : Hub<IAgentStatusClient>
+{
+    private readonly ILogger<AgentStatusHub> _logger;
+
+    /// <summary>
+    /// Initializes a new instance of the <see cref="AgentStatusHub"/> class.
+    /// </summary>
+    /// <param name="logger">Logger for diagnostic output.</param>
+    public AgentStatusHub(ILogger<AgentStatusHub> logger)
+    {
+        _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 update is relayed
+    /// through the <see cref="IAgentStatusClient.AgentStatusChanged"/> callback.
+    /// </para>
+    /// </summary>
+    /// <param name="update">The agent status update payload to broadcast.</param>
+    public async Task SendStatusUpdate(AgentStatusUpdateDto update)
+    {
+        _logger.LogInformation(
+            "Broadcasting status update for agent {AgentId}: {Status}",
+            update.AgentId, update.Status);
+
+        await Clients.All.AgentStatusChanged(update);
+    }
+
+    /// <summary>
+    /// Adds the calling connection to the fleet group.
+    /// Once joined, the client will receive all agent status updates.
+    /// </summary>
+    public async Task JoinFleet()
+    {
+        await Groups.AddToGroupAsync(Context.ConnectionId, FleetGroupName);
+        _logger.LogDebug("Connection {ConnectionId} joined fleet group", Context.ConnectionId);
+    }
+
+    /// <summary>
+    /// Removes the calling connection from the fleet group.
+    /// </summary>
+    public async Task LeaveFleet()
+    {
+        await Groups.RemoveFromGroupAsync(Context.ConnectionId, FleetGroupName);
+        _logger.LogDebug("Connection {ConnectionId} left fleet group", Context.ConnectionId);
+    }
+
+    /// <summary>
+    /// Overrides <see cref="Hub{T}.OnDisconnectedAsync"/> to log disconnections.
+    /// SignalR automatically removes disconnected connections from all groups.
+    /// </summary>
+    /// <param name="exception">Exception that caused the disconnection, if any.</param>
+    public override Task OnDisconnectedAsync(Exception? exception)
+    {
+        _logger.LogDebug("Connection {ConnectionId} disconnected", Context.ConnectionId);
+        return base.OnDisconnectedAsync(exception);
+    }
+
+    /// <summary>
+    /// The SignalR group name for the entire fleet (all agents).
+    /// </summary>
+    internal const string FleetGroupName = "fleet";
+}
+
+/// <summary>
+/// Strongly-typed client interface for the AgentStatus SignalR hub.
+/// Defines the methods the server can invoke on connected clients
+/// to push real-time agent status updates.
+/// </summary>
+public interface IAgentStatusClient
+{
+    /// <summary>
+    /// Pushes an agent status change to all subscribed clients.
+    /// Fired whenever an agent's operational status changes
+    /// (e.g., idle → active, active → thinking, active → error).
+    /// </summary>
+    /// <param name="update">The full status update payload.</param>
+    /// <returns>A Task that completes when the client has processed the update.</returns>
+    Task AgentStatusChanged(AgentStatusUpdateDto update);
+}
+
+/// <summary>
+/// Extension methods for pushing real-time agent updates through
+/// the <see cref="IHubContext{T}"/> of <see cref="AgentStatusHub"/>.
+///
+/// <para>
+/// These methods are intended to be called from background services
+/// or other server-side code that detects an agent state change,
+/// using the injected <c>IHubContext&lt;AgentStatusHub, IAgentStatusClient&gt;</c>.
+/// </para>
+/// </summary>
+public static class AgentStatusHubExtensions
+{
+    /// <summary>
+    /// Pushes an agent status update to all connected clients.
+    ///
+    /// <para>
+    /// Call this from any background service when an agent's
+    /// operational status changes (e.g., the Gateway reports a
+    /// session transition from "running" to "done").
+    /// </para>
+    /// </summary>
+    /// <param name="hubContext">The hub context injected via DI.</param>
+    /// <param name="update">The agent status update payload.</param>
+    /// <returns>A Task that completes when the message has been sent to all clients.</returns>
+    public static async Task PushStatusUpdateAsync(
+        this IHubContext<AgentStatusHub, IAgentStatusClient> hubContext,
+        AgentStatusUpdateDto update)
+    {
+        await hubContext.Clients.All.AgentStatusChanged(update);
+    }
+
+    /// <summary>
+    /// Pushes an agent status update to clients subscribed to the fleet group.
+    /// </summary>
+    /// <param name="hubContext">The hub context injected via DI.</param>
+    /// <param name="update">The agent status update payload.</param>
+    /// <returns>A Task that completes when the message has been sent to the fleet group.</returns>
+    public static async Task PushStatusUpdateToFleetAsync(
+        this IHubContext<AgentStatusHub, IAgentStatusClient> hubContext,
+        AgentStatusUpdateDto update)
+    {
+        await hubContext.Clients.Group(AgentStatusHub.FleetGroupName)
+            .AgentStatusChanged(update);
+    }
+}

backend/Migrations/20260426101703_CreateAgentsTable.Designer.cs

@@ -0,0 +1,94 @@
+// <auto-generated />
+using System;
+using ControlCenter.Api.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace ControlCenter.Api.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20260426101703_CreateAgentsTable")]
+    partial class CreateAgentsTable
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.4")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.HasPostgresEnum(modelBuilder, "agent_status", new[] { "active", "idle", "thinking", "error" });
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("ControlCenter.Api.Entities.Agent", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid")
+                        .HasColumnName("id");
+
+                    b.Property<string>("Channel")
+                        .IsRequired()
+                        .HasColumnType("text")
+                        .HasColumnName("channel");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("created_at")
+                        .HasDefaultValueSql("now()");
+
+                    b.Property<DateTime>("LastActivity")
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("last_activity");
+
+                    b.Property<int?>("Progress")
+                        .HasColumnType("integer")
+                        .HasColumnName("progress");
+
+                    b.Property<string>("SessionKey")
+                        .IsRequired()
+                        .HasColumnType("text")
+                        .HasColumnName("session_key");
+
+                    b.Property<int>("Status")
+                        .HasColumnType("agent_status")
+                        .HasColumnName("status");
+
+                    b.Property<string>("Task")
+                        .HasColumnType("text")
+                        .HasColumnName("task");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("updated_at")
+                        .HasDefaultValueSql("now()");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Channel")
+                        .HasDatabaseName("ix_agents_channel");
+
+                    b.HasIndex("SessionKey")
+                        .IsUnique()
+                        .HasDatabaseName("ix_agents_session_key");
+
+                    b.HasIndex("Status")
+                        .HasDatabaseName("ix_agents_status");
+
+                    b.ToTable("agents", null, t =>
+                        {
+                            t.HasCheckConstraint("ck_agents_progress_range", "progress IS NULL OR (progress >= 0 AND progress <= 100)");
+                        });
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

backend/Migrations/20260426101703_CreateAgentsTable.cs

@@ -0,0 +1,61 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace ControlCenter.Api.Migrations
+{
+    /// <inheritdoc />
+    public partial class CreateAgentsTable : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AlterDatabase()
+                .Annotation("Npgsql:Enum:agent_status", "active,idle,thinking,error");
+
+            migrationBuilder.CreateTable(
+                name: "agents",
+                columns: table => new
+                {
+                    id = table.Column<Guid>(type: "uuid", nullable: false),
+                    status = table.Column<int>(type: "agent_status", nullable: false),
+                    task = table.Column<string>(type: "text", nullable: true),
+                    progress = table.Column<int>(type: "integer", nullable: true),
+                    session_key = table.Column<string>(type: "text", nullable: false),
+                    channel = table.Column<string>(type: "text", nullable: false),
+                    last_activity = table.Column<DateTime>(type: "timestamptz", nullable: false),
+                    created_at = table.Column<DateTime>(type: "timestamptz", nullable: false, defaultValueSql: "now()"),
+                    updated_at = table.Column<DateTime>(type: "timestamptz", nullable: false, defaultValueSql: "now()")
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_agents", x => x.id);
+                    table.CheckConstraint("ck_agents_progress_range", "progress IS NULL OR (progress >= 0 AND progress <= 100)");
+                });
+
+            migrationBuilder.CreateIndex(
+                name: "ix_agents_channel",
+                table: "agents",
+                column: "channel");
+
+            migrationBuilder.CreateIndex(
+                name: "ix_agents_session_key",
+                table: "agents",
+                column: "session_key",
+                unique: true);
+
+            migrationBuilder.CreateIndex(
+                name: "ix_agents_status",
+                table: "agents",
+                column: "status");
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "agents");
+        }
+    }
+}

backend/Migrations/AppDbContextModelSnapshot.cs

@@ -0,0 +1,91 @@
+// <auto-generated />
+using System;
+using ControlCenter.Api.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace ControlCenter.Api.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    partial class AppDbContextModelSnapshot : ModelSnapshot
+    {
+        protected override void BuildModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.4")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.HasPostgresEnum(modelBuilder, "agent_status", new[] { "active", "idle", "thinking", "error" });
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("ControlCenter.Api.Entities.Agent", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid")
+                        .HasColumnName("id");
+
+                    b.Property<string>("Channel")
+                        .IsRequired()
+                        .HasColumnType("text")
+                        .HasColumnName("channel");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("created_at")
+                        .HasDefaultValueSql("now()");
+
+                    b.Property<DateTime>("LastActivity")
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("last_activity");
+
+                    b.Property<int?>("Progress")
+                        .HasColumnType("integer")
+                        .HasColumnName("progress");
+
+                    b.Property<string>("SessionKey")
+                        .IsRequired()
+                        .HasColumnType("text")
+                        .HasColumnName("session_key");
+
+                    b.Property<int>("Status")
+                        .HasColumnType("agent_status")
+                        .HasColumnName("status");
+
+                    b.Property<string>("Task")
+                        .HasColumnType("text")
+                        .HasColumnName("task");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("updated_at")
+                        .HasDefaultValueSql("now()");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Channel")
+                        .HasDatabaseName("ix_agents_channel");
+
+                    b.HasIndex("SessionKey")
+                        .IsUnique()
+                        .HasDatabaseName("ix_agents_session_key");
+
+                    b.HasIndex("Status")
+                        .HasDatabaseName("ix_agents_status");
+
+                    b.ToTable("agents", null, t =>
+                        {
+                            t.HasCheckConstraint("ck_agents_progress_range", "progress IS NULL OR (progress >= 0 AND progress <= 100)");
+                        });
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

backend/Program.cs

@@ -0,0 +1,38 @@
+using ControlCenter.Api.Data;
+using ControlCenter.Api.Hubs;
+using Microsoft.EntityFrameworkCore;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddOpenApi();
+
+// Register SignalR for real-time agent status updates
+builder.Services.AddSignalR();
+
+// Register DbContext with PostgreSQL
+builder.Services.AddDbContext<AppDbContext>(options =>
+{
+    var connectionString = builder.Configuration.GetConnectionString("DefaultConnection")
+        ?? "Host=localhost;Database=control_center;Username=postgres;Password=postgres";
+
+    options.UseNpgsql(connectionString, npgsqlOptions =>
+    {
+        npgsqlOptions.MigrationsAssembly(typeof(AppDbContext).Assembly.FullName);
+    });
+});
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (app.Environment.IsDevelopment())
+{
+    app.MapOpenApi();
+}
+
+app.UseHttpsRedirection();
+
+// Map SignalR hubs
+app.MapHub<AgentStatusHub>("/hubs/agent-status");
+
+app.Run();

backend/Properties/launchSettings.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "applicationUrl": "http://localhost:5178",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "applicationUrl": "https://localhost:7041;http://localhost:5178",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

backend/appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

backend/appsettings.json

@@ -0,0 +1,12 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*",
+  "ConnectionStrings": {
+    "DefaultConnection": "Host=localhost;Database=control_center;Username=postgres;Password=postgres"
+  }
+}

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

@@ -1,6 +1,7 @@
 <article
   class="agent-card"
   [class]="'agent-card--' + status()"
+  role="article"
   [attr.aria-label]="'Agent card: ' + statusLabel() + ' status'"
   [style.--agent-status-color]="statusColorVar()"
   [style.--agent-status-bg]="statusBgVar()"
@@ -10,18 +11,14 @@
 
   <!-- Card body -->
   <div class="agent-card__body">
-    <!-- Header row: status dot + status label + channel + last activity -->
+    <!-- Header row: status badge + channel + last activity -->
     <div class="agent-card__header">
       <div class="agent-card__status-row">
-        <span
-          class="status-dot agent-card__dot"
-          [ngClass]="[statusDotClass()]"
-          [attr.aria-label]="statusLabel() + ' status indicator'"
-          role="status"
-        ></span>
-        <span class="agent-card__status-label" [style.color]="statusColorVar()">
-          {{ statusLabel() }}
-        </span>
+        <!-- Agent Status Badge (CUB-48) -->
+        <app-agent-status-badge
+          [status]="status()"
+          [showLabel]="true"
+        ></app-agent-status-badge>
       </div>
       <div class="agent-card__meta">
         @if (channel()) {
@@ -39,33 +36,23 @@
       <p class="agent-card__task">{{ task() }}</p>
     }
 
-    <!-- Progress bar -->
+    <!-- Task Progress Bar (CUB-44) -->
     @if (showProgress()) {
-      <div class="agent-card__progress">
-        <mat-progress-bar
-          mode="determinate"
-          [value]="progress()"
-          [attr.aria-label]="'Task progress: ' + progress() + '%'"
-        ></mat-progress-bar>
-        <div class="agent-card__progress-info">
-          <span class="text-mono">{{ progress() }}%</span>
-        </div>
-      </div>
+      <app-task-progress-bar
+        [progress]="progress()"
+        [showElapsed]="false"
+      ></app-task-progress-bar>
     }
 
-    <!-- Footer: session key (truncated) + jump button -->
+    <!-- Footer: session key (truncated) + Quick-Jump Button (CUB-46) -->
     <div class="agent-card__footer">
       <span class="agent-card__session text-mono" [matTooltip]="sessionKey()">
         {{ sessionKey().length > 28 ? sessionKey().substring(0, 28) + '…' : sessionKey() }}
       </span>
-      <button
-        mat-icon-button
-        class="agent-card__jump"
-        [attr.aria-label]="'Jump to agent session'"
-        matTooltip="Jump to session"
-      >
-        <mat-icon>arrow_forward</mat-icon>
-      </button>
+      <app-quick-jump-button
+        [sessionKey]="sessionKey()"
+        (jumpClick)="jumpClick.emit($event)"
+      ></app-quick-jump-button>
     </div>
   </div>
 </article>

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;
-    }
-  }
 }
 
 // ---------------------------------------------------------------------------

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

@@ -1,19 +1,31 @@
 // ============================================================================
-// Agent Card Component
-// Per spec Section 7.3: Agent Card Component Interface
-// Section 7.5: Animation Specs
+// Agent Card Component — Final Integration
+// Per CUB-45: Compose AgentCard from all sub-components.
+//   - AgentStatusBadge (CUB-48) for status display
+//   - TaskProgressBar (CUB-44) for progress indication
+//   - QuickJumpButton (CUB-46) for session navigation
+// Layout: left-border accent, aria-labels, role="article"
 // ============================================================================
-import { ChangeDetectionStrategy, Component, input, computed } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, input, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { AgentStatus } from '../../models/agent.model';
+
+// Sub-components (CUB-48, CUB-44, CUB-46)
+import { AgentStatusBadgeComponent } from '../agent-status-badge';
+import { TaskProgressBarComponent } from '../task-progress-bar';
+import { QuickJumpButtonComponent } from '../quick-jump-button';
+
+import { AgentStatus } from '../../models';
 
 /**
  * AgentCard displays a single agent's status in the Command Hub grid.
  *
+ * Composes three sub-components:
+ *  - AgentStatusBadge: colored pill with pulse animation (CUB-48)
+ *  - TaskProgressBar: determinate progress with optional elapsed time (CUB-44)
+ *  - QuickJumpButton: M3 FilledTonal icon button for session navigation (CUB-46)
+ *
  * Inputs:
  * - status: AgentStatus — current agent status
  * - task: string — current task description
@@ -22,9 +34,14 @@ import { AgentStatus } from '../../models/agent.model';
  * - channel: string — communication channel (e.g., "telegram")
  * - lastActivity: Date — timestamp of last activity
  *
+ * Outputs:
+ * - jumpClick: string — emitted when Quick-Jump button is clicked, carries sessionKey
+ *
  * Accessibility:
  * - role="article" on the card element
- * - aria-labels for status badge and interactive elements
+ * - aria-label on the card summarizing status
+ * - aria-label on the progress bar (via TaskProgressBar)
+ * - aria-label on the Quick-Jump button (via QuickJumpButton)
  * - focus-visible outlines for keyboard navigation
  */
 @Component({
@@ -33,15 +50,21 @@ import { AgentStatus } from '../../models/agent.model';
   imports: [
     CommonModule,
     MatIconModule,
-    MatButtonModule,
-    MatProgressBarModule,
     MatTooltipModule,
+    // Sub-components
+    AgentStatusBadgeComponent,
+    TaskProgressBarComponent,
+    QuickJumpButtonComponent,
   ],
   templateUrl: './agent-card.component.html',
   styleUrl: './agent-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AgentCardComponent {
+  // ---------------------------------------------------------------------------
+  // Inputs (all 6 required by CUB-45 definition of done)
+  // ---------------------------------------------------------------------------
+
   /** Current agent status */
   readonly status = input.required<AgentStatus>();
 
@@ -60,6 +83,17 @@ export class AgentCardComponent {
   /** Timestamp of last activity */
   readonly lastActivity = input<Date>(new Date());
 
+  // ---------------------------------------------------------------------------
+  // Outputs
+  // ---------------------------------------------------------------------------
+
+  /** Emitted when the Quick-Jump button is clicked with the session key. */
+  @Output() readonly jumpClick = new EventEmitter<string>();
+
+  // ---------------------------------------------------------------------------
+  // Computed values
+  // ---------------------------------------------------------------------------
+
   /** Map status to CSS custom property name for dynamic color binding */
   readonly statusColorVar = computed(() => {
     const map: Record<AgentStatus, string> = {
@@ -84,7 +118,7 @@ export class AgentCardComponent {
     return map[this.status()];
   });
 
-  /** Human-readable status label */
+  /** Human-readable status label (delegates to AgentStatusBadgeComponent) */
   readonly statusLabel = computed(() => {
     const map: Record<AgentStatus, string> = {
       active: 'Active',
@@ -96,9 +130,6 @@ export class AgentCardComponent {
     return map[this.status()];
   });
 
-  /** CSS class for status dot animation */
-  readonly statusDotClass = computed(() => `status-dot--${this.status()}`);
-
   /** Format last activity as relative time string */
   readonly lastActivityText = computed(() => {
     const now = Date.now();

frontend/src/app/components/agent-card/index.ts

@@ -1 +1,6 @@
+// ============================================================================
+// Agent Card — Barrel Export
+// CUB-45: Final integration with sub-components
+// ============================================================================
+
 export { AgentCardComponent } from './agent-card.component';

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

@@ -0,0 +1,12 @@
+<!-- Agent Status Badge: colored pill with pulse animation -->
+<span
+  class="status-badge"
+  [class]="statusClass"
+  [attr.aria-label]="statusLabels[status] + ' status'"
+  [attr.role]="'status'"
+>
+  <span class="status-badge__dot"></span>
+  <span *ngIf="showLabel" class="status-badge__label">
+    {{ statusLabels[status] }}
+  </span>
+</span>

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

@@ -0,0 +1,143 @@
+// ============================================================================
+// Agent Status Badge — Pill Style with Pulse Animation
+// Per CUB-48: Color mapping + animation durations:
+//   Active   → --color-primary   (#38BDF8)  2s pulse
+//   Idle     → --color-secondary (#2DD4BF)  no animation
+//   Thinking → --color-accent     (#A78BFA)  3s pulse
+//   Error    → --color-danger    (#F87171)  0.8s pulse
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Badge Container
+// ---------------------------------------------------------------------------
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+
+  // --- Status-specific backgrounds & text ---
+  &--active {
+    background-color: var(--status-active-bg);
+    color: var(--status-active);
+  }
+
+  &--idle {
+    background-color: var(--status-idle-bg);
+    color: var(--status-idle);
+  }
+
+  &--thinking {
+    background-color: var(--status-thinking-bg);
+    color: var(--status-thinking);
+  }
+
+  &--error {
+    background-color: var(--status-error-bg);
+    color: var(--status-error);
+  }
+
+  &--offline {
+    background-color: rgba(100, 116, 139, 0.12);
+    color: var(--status-offline);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Status Dot (inner indicator circle)
+// ---------------------------------------------------------------------------
+.status-badge__dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+
+  .status-badge--active & {
+    background-color: var(--status-active);
+    animation: badge-pulse-active 2s ease-in-out infinite;
+  }
+
+  .status-badge--idle & {
+    background-color: var(--status-idle);
+    // Idle: no animation — steady dot
+  }
+
+  .status-badge--thinking & {
+    background-color: var(--status-thinking);
+    animation: badge-pulse-thinking 3s ease-in-out infinite;
+  }
+
+  .status-badge--error & {
+    background-color: var(--status-error);
+    animation: badge-pulse-error 0.8s ease-in-out infinite;
+  }
+
+  .status-badge--offline & {
+    background-color: var(--status-offline);
+    // Offline: no animation
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Label Text
+// ---------------------------------------------------------------------------
+.status-badge__label {
+  color: inherit;
+}
+
+// ---------------------------------------------------------------------------
+// Badge Pulse Keyframes
+// ---------------------------------------------------------------------------
+// These are scoped to the badge component rather than reusing the global
+// .status-dot animations, because the badge pulse is subtler (scale + opacity
+// blend for a pill context vs. standalone dot context).
+// ---------------------------------------------------------------------------
+
+@keyframes badge-pulse-active {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.3);
+  }
+}
+
+@keyframes badge-pulse-thinking {
+  0%,
+  100% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes badge-pulse-error {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Accessibility: Reduced Motion
+// ---------------------------------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .status-badge__dot {
+    animation: none !important;
+  }
+}

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

@@ -0,0 +1,51 @@
+// ============================================================================
+// Agent Status Badge Component
+// Per CUB-48: Colored pill badge with pulse animation for agent statuses.
+// Displays Active, Idle, Thinking, or Error with correct color mapping.
+// ============================================================================
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AgentStatus } from '../../models';
+
+/**
+ * Reusable status badge that renders a colored pill with label text
+ * and a subtle pulse animation for Active, Thinking, and Error states.
+ *
+ * Usage:
+ * ```html
+ * <app-agent-status-badge status="active" />
+ * <app-agent-status-badge status="error" />
+ * ```
+ */
+@Component({
+  selector: 'app-agent-status-badge',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './agent-status-badge.component.html',
+  styleUrl: './agent-status-badge.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AgentStatusBadgeComponent {
+  /** Agent status to display. Maps to a color and animation. */
+  @Input({ required: true })
+  status!: AgentStatus;
+
+  /** Whether to show the status label text alongside the dot. Defaults to true. */
+  @Input()
+  showLabel = true;
+
+  /** Mapping from status to human-readable label. */
+  readonly statusLabels: Record<AgentStatus, string> = {
+    active: 'Active',
+    idle: 'Idle',
+    thinking: 'Thinking',
+    error: 'Error',
+    offline: 'Offline',
+  };
+
+  /** CSS class string for the badge container based on current status. */
+  get statusClass(): string {
+    return `status-badge--${this.status}`;
+  }
+}

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

@@ -0,0 +1,6 @@
+// ============================================================================
+// Agent Status Badge — Barrel Export
+// CUB-48
+// ============================================================================
+
+export { AgentStatusBadgeComponent } from './agent-status-badge.component';

frontend/src/app/components/index.ts

@@ -0,0 +1,8 @@
+// ============================================================================
+// Components Barrel Export
+// ============================================================================
+
+export * from './agent-card';
+export * from './agent-status-badge';
+export * from './task-progress-bar';
+export * from './quick-jump-button';

frontend/src/app/components/quick-jump-button/index.ts

@@ -0,0 +1,6 @@
+// ============================================================================
+// Quick-Jump Button — Barrel Export
+// CUB-46
+// ============================================================================
+
+export { QuickJumpButtonComponent } from './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,33 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, 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 {
+  /** The session key to navigate to. Set by the parent agent card. */
+  @Input()
+  sessionKey = '';
+
+  /** Emitted when the button is clicked, carrying the session key for navigation. */
+  @Output() jumpClick = new EventEmitter<string>();
+
+  onJumpClick(): void {
+    this.jumpClick.emit(this.sessionKey);
+  }
+}

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

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

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

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

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

frontend/src/styles.scss

@@ -48,6 +48,17 @@ html {
 // These are NOT part of the M3 tonal palette; they are semantic overrides.
 // ---------------------------------------------------------------------------
 :root {
+  // --- Tactical Dark Mode color palette (CUB-47) ---
+  --color-surface: #0F172A;
+  --color-surface-light: #1E293B;
+  --color-primary: #38BDF8;
+  --color-secondary: #2DD4BF;
+  --color-accent: #A78BFA;
+  --color-danger: #F87171;
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #94A3B8;
+  --color-border: #334155;
+
   // --- Status colors ---
   --status-active: #38BDF8;
   --status-idle: #2DD4BF;
@@ -90,7 +101,7 @@ html {
 // Global Body Styles
 // ---------------------------------------------------------------------------
 body {
-  background-color: var(--cc-background);
+  background-color: var(--color-surface);
   color: var(--cc-on-surface);
   font-family: 'Inter', 'Roboto', sans-serif;
   margin: 0;