Merge branch 'dev' into agent/rex/CUB-50-adaptive-navigation

Reviewed-on: #15
Reviewed-by: Otto the Minion <otto@code.cubecraftcreations.com>

.gitignore

@@ -1 +0,0 @@
-backend/

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,24 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <!-- Exclude the separate ControlCenter sub-project from this project's compilation -->
+  <ItemGroup>
+    <Compile Remove="ControlCenter/**/*.cs" />
+  </ItemGroup>
+
+  <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" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="10.1.7" />
+  </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,211 @@
+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>
+    /// Broadcasts an agent status update to all connected clients.
+    ///
+    /// <para>
+    /// Any connected client (or server-side caller) can invoke this method
+    /// to push a status update to every subscriber. The DTO is converted to
+    /// an <see cref="AgentStatusUpdate"/> record and relayed through the
+    /// <see cref="IAgentStatusClient.AgentStatusChanged"/> callback.
+    /// </para>
+    /// </summary>
+    /// <param name="update">The agent status update DTO to broadcast.</param>
+    public async Task SendStatusUpdate(AgentStatusUpdateDto update)
+    {
+        _logger.LogInformation(
+            "Broadcasting status update for agent {AgentId}: {Status}",
+            update.AgentId, update.Status);
+
+        var agentUpdate = update.ToUpdate();
+
+        // Broadcast to all connected clients
+        await Clients.All.AgentStatusChanged(agentUpdate);
+
+        // Also push to the specific agent's group
+        var agentGroup = AgentGroupName(update.AgentId);
+        await Clients.Group(agentGroup).AgentStatusChanged(agentUpdate);
+    }
+
+    /// <summary>
+    /// Adds the calling connection to the fleet group.
+    /// Once joined, the client will receive all agent status changes
+    /// 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,166 @@
+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>
+/// Data transfer object for broadcasting agent status updates
+/// to all connected SignalR clients via the hub's SendStatusUpdate method.
+///
+/// <para>This DTO provides a mutable, serialization-friendly alternative to
+/// <see cref="AgentStatusUpdate"/> for callers that construct updates
+/// from external data sources (e.g., HTTP API payloads).</para>
+/// </summary>
+public class AgentStatusUpdateDto
+{
+    /// <summary>
+    /// Agent identifier, e.g. "otto", "dex", "rex".
+    /// </summary>
+    public string AgentId { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Human-readable display name, e.g. "Otto", "Dex".
+    /// </summary>
+    public string DisplayName { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Role description, e.g. "Orchestrator Agent", "Backend Specialist".
+    /// </summary>
+    public string Role { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Current operational status of the agent as lowercase string:
+    /// "active", "idle", "thinking", "error".
+    /// </summary>
+    public string Status { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Description of the agent's current task, if any.
+    /// </summary>
+    public string? CurrentTask { get; set; }
+
+    /// <summary>
+    /// Full session key, e.g. "agent:otto:telegram:direct:8787451565".
+    /// </summary>
+    public string SessionKey { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Communication channel, e.g. "telegram", "discord", "slack".
+    /// </summary>
+    public string Channel { get; set; } = string.Empty;
+
+    /// <summary>
+    /// ISO 8601 timestamp of the agent's last activity.
+    /// </summary>
+    public string LastActivity { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Error message when the agent status is "error".
+    /// </summary>
+    public string? ErrorMessage { get; set; }
+
+    /// <summary>
+    /// Converts this DTO to an immutable <see cref="AgentStatusUpdate"/> record
+    /// for use with the typed SignalR client interface.
+    /// </summary>
+    /// <returns>An <see cref="AgentStatusUpdate"/> with equivalent field values.</returns>
+    public AgentStatusUpdate ToUpdate() => new(
+        AgentId,
+        DisplayName,
+        Role,
+        Status,
+        CurrentTask,
+        SessionKey,
+        Channel,
+        LastActivity,
+        ErrorMessage
+    );
+}
+
+/// <summary>
+/// Snapshot of an agent's full card data, sent on initial connection
+/// or when the fleet state is requested.
+/// 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/Models/AgentMinionMapping.cs

@@ -0,0 +1,72 @@
+namespace ControlCenter.Models;
+
+/// <summary>
+/// Defines which side of the Control Center dashboard a minion occupies.
+/// </summary>
+public enum MinionSide
+{
+    /// <summary>Development side — Rex, Dex, Hex.</summary>
+    Dev,
+
+    /// <summary>Business side — Larry, Mel, Buzz.</summary>
+    Business
+}
+
+/// <summary>
+/// Visual state of a minion sprite, derived from the agent's
+/// <see cref="AgentStatus"/>. Maps Active/Idle/Thinking/Error
+/// to frontend animation states.
+/// </summary>
+public enum MinionState
+{
+    /// <summary>Agent is actively processing — minion shows working animation.</summary>
+    Active,
+
+    /// <summary>Agent is idle — minion shows idle/patrolling animation.</summary>
+    Idle,
+
+    /// <summary>Agent is thinking (LLM call in flight) — minion shows thinking animation.</summary>
+    Thinking,
+
+    /// <summary>Agent encountered an error — minion shows error/distress animation.</summary>
+    Error
+}
+
+/// <summary>
+/// Static mapping entry that associates an agent ID with a minion's
+/// display side and position index within that side.
+///
+/// <para>Position indices are zero-based within each side. The dev side
+/// has Rex at 0, Dex at 1, and Hex at 2. The business side has
+/// Larry at 0, Mel at 1, and Buzz at 2.</para>
+/// </summary>
+/// <param name="AgentId">Agent identifier, e.g. "rex", "dex".</param>
+/// <param name="Side">Which side of the dashboard the minion occupies.</param>
+/// <param name="PositionIndex">Zero-based position index within the side.</param>
+/// <param name="DisplayName">Human-readable name, e.g. "Rex".</param>
+public record AgentMinionMapping(
+    string AgentId,
+    MinionSide Side,
+    int PositionIndex,
+    string DisplayName
+);
+
+/// <summary>
+/// Real-time minion state update pushed to SignalR clients
+/// when an agent's status changes. Combines the static mapping
+/// (who/where) with the dynamic state (what the minion is doing).
+/// </summary>
+/// <param name="AgentId">Agent identifier, e.g. "rex".</param>
+/// <param name="DisplayName">Human-readable minion name, e.g. "Rex".</param>
+/// <param name="Side">Which side of the dashboard — Dev or Business.</param>
+/// <param name="PositionIndex">Position within the side (0-based).</param>
+/// <param name="State">Current minion animation state.</param>
+/// <param name="Timestamp">ISO 8601 timestamp of the state change.</param>
+public record MinionStateUpdate(
+    string AgentId,
+    string DisplayName,
+    MinionSide Side,
+    int PositionIndex,
+    MinionState State,
+    string Timestamp
+);

backend/ControlCenter/Program.cs

@@ -0,0 +1,77 @@
+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>());
+
+// ── Agent-Minion Mapper Service ────────────────────────────
+// Maps agents to minion sprites/positions and publishes state
+// updates through SignalR.
+builder.Services.AddSingleton<AgentMinionMapperService>();
+
+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/AgentMinionMapperService.cs

@@ -0,0 +1,193 @@
+using ControlCenter.Hubs;
+using ControlCenter.Models;
+using Microsoft.AspNetCore.SignalR;
+
+namespace ControlCenter.Services;
+
+/// <summary>
+/// Service that maps Linear agents to minion sprites and positions
+/// in the Control Center dashboard.
+///
+/// <para>Static mappings define where each minion appears:</para>
+/// <list type="bullet">
+///   <item>Dev side: Rex (0), Dex (1), Hex (2)</item>
+///   <item>Business side: Larry (0), Mel (1), Buzz (2)</item>
+/// </list>
+///
+/// <para>Dynamic state is derived from the agent's <see cref="AgentStatus"/>:</para>
+/// <list type="bullet">
+///   <item><c>Active</c> → <see cref="MinionState.Active"/></item>
+///   <item><c>Idle</c> → <see cref="MinionState.Idle"/></item>
+///   <item><c>Thinking</c> → <see cref="MinionState.Thinking"/></item>
+///   <item><c>Error</c> → <see cref="MinionState.Error"/></item>
+/// </list>
+///
+/// <para>State updates are published through the <see cref="AgentStatusHub"/>
+/// SignalR hub so that connected clients can animate minion sprites
+/// in real time.</para>
+/// </summary>
+public class AgentMinionMapperService
+{
+    private readonly ILogger<AgentMinionMapperService> _logger;
+    private readonly IHubContext<AgentStatusHub, IAgentStatusClient> _hubContext;
+
+    /// <summary>
+    /// Static agent-to-minion mapping table. Defines which side and position
+    /// each agent's minion occupies on the dashboard.
+    /// </summary>
+    private static readonly Dictionary<string, AgentMinionMapping> Mappings = new()
+    {
+        // ── Dev Side ──────────────────────────────────
+        ["rex"] = new AgentMinionMapping("rex", MinionSide.Dev, 0, "Rex"),
+        ["dex"] = new AgentMinionMapping("dex", MinionSide.Dev, 1, "Dex"),
+        ["hex"] = new AgentMinionMapping("hex", MinionSide.Dev, 2, "Hex"),
+
+        // ── Business Side ─────────────────────────────
+        ["larry"] = new AgentMinionMapping("larry", MinionSide.Business, 0, "Larry"),
+        ["mel"]   = new AgentMinionMapping("mel",   MinionSide.Business, 1, "Mel"),
+        ["buzz"]  = new AgentMinionMapping("buzz",  MinionSide.Business, 2, "Buzz"),
+    };
+
+    /// <summary>
+    /// Maps <see cref="AgentStatus"/> string values to <see cref="MinionState"/>.
+    /// </summary>
+    private static readonly Dictionary<string, MinionState> StatusToMinionState = new()
+    {
+        ["active"]   = MinionState.Active,
+        ["idle"]     = MinionState.Idle,
+        ["thinking"] = MinionState.Thinking,
+        ["error"]    = MinionState.Error,
+    };
+
+    public AgentMinionMapperService(
+        ILogger<AgentMinionMapperService> logger,
+        IHubContext<AgentStatusHub, IAgentStatusClient> hubContext)
+    {
+        _logger = logger;
+        _hubContext = hubContext;
+    }
+
+    /// <summary>
+    /// Gets the minion mapping for a given agent ID.
+    /// Returns null if the agent is not mapped to a minion position.
+    /// </summary>
+    /// <param name="agentId">The agent identifier, e.g. "rex", "dex".</param>
+    /// <returns>The mapping record, or null if unmapped.</returns>
+    public AgentMinionMapping? GetMapping(string agentId)
+    {
+        return Mappings.GetValueOrDefault(agentId?.ToLowerInvariant() ?? string.Empty);
+    }
+
+    /// <summary>
+    /// Gets all minion mappings, ordered by side then position index.
+    /// </summary>
+    /// <returns>All mappings, sorted for consistent display order.</returns>
+    public IReadOnlyList<AgentMinionMapping> GetAllMappings()
+    {
+        return Mappings.Values
+            .OrderBy(m => m.Side)
+            .ThenBy(m => m.PositionIndex)
+            .ToList();
+    }
+
+    /// <summary>
+    /// Converts an agent status string to a <see cref="MinionState"/>.
+    /// Falls back to <see cref="MinionState.Idle"/> for unrecognized statuses.
+    /// </summary>
+    /// <param name="status">Agent status string: "active", "idle", "thinking", or "error".</param>
+    /// <returns>The corresponding minion state.</returns>
+    public MinionState StatusToState(string status)
+    {
+        return StatusToMinionState.GetValueOrDefault(
+            status?.ToLowerInvariant() ?? string.Empty,
+            MinionState.Idle);
+    }
+
+    /// <summary>
+    /// Publishes a minion state update through SignalR when an agent's
+    /// status changes. Only publishes for agents that have a minion mapping.
+    ///
+    /// <para>This is the primary integration point: the
+    /// <see cref="GatewayEventBridgeService"/> calls this method
+    /// whenever it detects a status change from the OpenClaw Gateway.</para>
+    /// </summary>
+    /// <param name="agentId">The agent whose status changed, e.g. "dex".</param>
+    /// <param name="status">The new status string: "active", "idle", "thinking", or "error".</param>
+    /// <returns>A task that completes when the SignalR message has been sent.</returns>
+    public async Task PublishMinionStateUpdateAsync(string agentId, string status)
+    {
+        var mapping = GetMapping(agentId);
+        if (mapping is null)
+        {
+            _logger.LogDebug("No minion mapping for agent {AgentId}; skipping state update", agentId);
+            return;
+        }
+
+        var minionState = StatusToState(status);
+        var update = new MinionStateUpdate(
+            AgentId: mapping.AgentId,
+            DisplayName: mapping.DisplayName,
+            Side: mapping.Side,
+            PositionIndex: mapping.PositionIndex,
+            State: minionState,
+            Timestamp: DateTime.UtcNow.ToString("o")
+        );
+
+        // Broadcast to the fleet group (all subscribers)
+        await _hubContext.Clients.Group(AgentStatusHub.FleetGroupName)
+            .AgentStatusChanged(ToAgentStatusUpdate(agentId, status));
+
+        // Also push to the specific agent's group
+        var agentGroup = AgentStatusHub.AgentGroupName(agentId);
+        await _hubContext.Clients.Group(agentGroup)
+            .AgentStatusChanged(ToAgentStatusUpdate(agentId, status));
+
+        _logger.LogInformation(
+            "Minion state update: {AgentId} → {State} (Side: {Side}, Position: {Index})",
+            agentId, minionState, mapping.Side, mapping.PositionIndex);
+    }
+
+    /// <summary>
+    /// Gets the current minion state for all mapped agents, suitable
+    /// for building an initial fleet snapshot.
+    /// </summary>
+    /// <returns>All minion mappings with their current (idle) state.</returns>
+    public IReadOnlyList<MinionStateUpdate> GetFullMinionState()
+    {
+        return Mappings.Values
+            .OrderBy(m => m.Side)
+            .ThenBy(m => m.PositionIndex)
+            .Select(m => new MinionStateUpdate(
+                AgentId: m.AgentId,
+                DisplayName: m.DisplayName,
+                Side: m.Side,
+                PositionIndex: m.PositionIndex,
+                State: MinionState.Idle,
+                Timestamp: DateTime.UtcNow.ToString("o")))
+            .ToList();
+    }
+
+    /// <summary>
+    /// Converts a status string to an <see cref="AgentStatusUpdate"/>
+    /// for SignalR push. Uses the mapping table for display names and roles.
+    /// </summary>
+    private AgentStatusUpdate ToAgentStatusUpdate(string agentId, string status)
+    {
+        var mapping = GetMapping(agentId);
+        var displayName = mapping?.DisplayName ?? char.ToUpperInvariant(agentId[0]) + agentId[1..];
+
+        return new AgentStatusUpdate(
+            AgentId: agentId,
+            DisplayName: displayName,
+            Role: mapping is not null
+                ? $"{mapping.Side} Agent"
+                : "Agent",
+            Status: status,
+            CurrentTask: null,
+            SessionKey: string.Empty,
+            Channel: string.Empty,
+            LastActivity: DateTime.UtcNow.ToString("o"),
+            ErrorMessage: status == "error" ? "Agent encountered an error" : null
+        );
+    }
+}

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/Models/AgentState.cs

@@ -0,0 +1,19 @@
+namespace ControlCenter.Api.Models;
+
+/// <summary>
+/// Read-only model representing an agent's current state.
+/// Used as the return type from the Agent State Repository
+/// to decouple consumers from the persistence layer.
+/// </summary>
+public class AgentState
+{
+    public Guid Id { get; set; }
+    public string Status { get; set; } = string.Empty;
+    public string? Task { get; set; }
+    public int? Progress { get; set; }
+    public string SessionKey { get; set; } = string.Empty;
+    public string Channel { get; set; } = string.Empty;
+    public DateTime LastActivity { get; set; }
+    public DateTime CreatedAt { get; set; }
+    public DateTime UpdatedAt { get; set; }
+}

backend/Program.cs

@@ -0,0 +1,42 @@
+using ControlCenter.Api.Data;
+using ControlCenter.Api.Hubs;
+using ControlCenter.Api.Repositories;
+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 Agent State Repository
+builder.Services.AddScoped<IAgentStateRepository, AgentStateRepository>();
+
+// 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/Repositories/AgentStateRepository.cs

@@ -0,0 +1,76 @@
+using ControlCenter.Api.Data;
+using ControlCenter.Api.Entities;
+using ControlCenter.Api.Models;
+using Microsoft.EntityFrameworkCore;
+
+namespace ControlCenter.Api.Repositories;
+
+/// <summary>
+/// EF Core implementation of the Agent State Repository.
+/// Maps between the persisted <see cref="Agent"/> entity and the
+/// read-oriented <see cref="AgentState"/> model.
+/// </summary>
+public class AgentStateRepository : IAgentStateRepository
+{
+    private readonly AppDbContext _db;
+
+    public AgentStateRepository(AppDbContext db)
+    {
+        _db = db;
+    }
+
+    /// <inheritdoc />
+    public async Task<IReadOnlyList<AgentState>> GetAllAsync(CancellationToken ct = default)
+    {
+        var agents = await _db.Agents
+            .AsNoTracking()
+            .OrderByDescending(a => a.LastActivity)
+            .ToListAsync(ct);
+
+        return agents.Select(ToModel).ToList();
+    }
+
+    /// <inheritdoc />
+    public async Task<AgentState?> GetBySessionKeyAsync(string sessionKey, CancellationToken ct = default)
+    {
+        var agent = await _db.Agents
+            .AsNoTracking()
+            .FirstOrDefaultAsync(a => a.SessionKey == sessionKey, ct);
+
+        return agent is null ? null : ToModel(agent);
+    }
+
+    /// <inheritdoc />
+    public async Task<bool> UpdateStatusAsync(Guid id, string status, CancellationToken ct = default)
+    {
+        if (!Enum.TryParse<AgentStatus>(status, ignoreCase: true, out var parsedStatus))
+            return false;
+
+        var agent = await _db.Agents.FindAsync([id], ct);
+        if (agent is null)
+            return false;
+
+        agent.Status = parsedStatus;
+        agent.UpdatedAt = DateTime.UtcNow;
+        agent.LastActivity = DateTime.UtcNow;
+
+        await _db.SaveChangesAsync(ct);
+        return true;
+    }
+
+    /// <summary>
+    /// Maps a persisted <see cref="Agent"/> entity to a <see cref="AgentState"/> model.
+    /// </summary>
+    private static AgentState ToModel(Agent agent) => new()
+    {
+        Id = agent.Id,
+        Status = agent.Status.ToString(),
+        Task = agent.Task,
+        Progress = agent.Progress,
+        SessionKey = agent.SessionKey,
+        Channel = agent.Channel,
+        LastActivity = agent.LastActivity,
+        CreatedAt = agent.CreatedAt,
+        UpdatedAt = agent.UpdatedAt,
+    };
+}

backend/Repositories/IAgentStateRepository.cs

@@ -0,0 +1,27 @@
+using ControlCenter.Api.Models;
+
+namespace ControlCenter.Api.Repositories;
+
+/// <summary>
+/// Repository interface for accessing and mutating Agent State.
+/// Provides a clean abstraction over the EF Core data access layer.
+/// </summary>
+public interface IAgentStateRepository
+{
+    /// <summary>
+    /// Retrieve all agent states.
+    /// </summary>
+    Task<IReadOnlyList<AgentState>> GetAllAsync(CancellationToken ct = default);
+
+    /// <summary>
+    /// Retrieve a single agent state by its session key.
+    /// Returns null if no agent is found with the given session key.
+    /// </summary>
+    Task<AgentState?> GetBySessionKeyAsync(string sessionKey, CancellationToken ct = default);
+
+    /// <summary>
+    /// Update the status of an agent by its primary key.
+    /// Returns true if the agent was found and updated, false otherwise.
+    /// </summary>
+    Task<bool> UpdateStatusAsync(Guid id, string status, CancellationToken ct = default);
+}

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/public/scene/breakroom.svg

@@ -1,273 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
-  <defs>
-    <!-- Floor pattern -->
-    <pattern id="floor-tiles" x="0" y="0" width="64" height="64" patternUnits="userSpaceOnUse">
-      <rect width="64" height="64" fill="#1A1E24"/>
-      <rect width="32" height="32" fill="#1C2027" x="0" y="0"/>
-      <rect width="32" height="32" fill="#1C2027" x="32" y="32"/>
-    </pattern>
-
-    <!-- Desk gradient -->
-    <linearGradient id="desk-top" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#3A4255"/>
-      <stop offset="100%" stop-color="#2D3748"/>
-    </linearGradient>
-
-    <!-- Screen glow -->
-    <linearGradient id="screen-glow" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#38BDF8" stop-opacity="0.15"/>
-      <stop offset="100%" stop-color="#38BDF8" stop-opacity="0.02"/>
-    </linearGradient>
-
-    <!-- Couch gradient -->
-    <linearGradient id="couch-fabric" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#4A5568"/>
-      <stop offset="100%" stop-color="#2D3748"/>
-    </linearGradient>
-
-    <!-- TV screen glow -->
-    <radialGradient id="tv-glow" cx="50%" cy="50%" r="60%">
-      <stop offset="0%" stop-color="#38BDF8" stop-opacity="0.3"/>
-      <stop offset="100%" stop-color="#0A1628" stop-opacity="0"/>
-    </radialGradient>
-
-    <!-- Banana bowl gradient -->
-    <linearGradient id="bowl-gradient" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#8B7355"/>
-      <stop offset="100%" stop-color="#6B5740"/>
-    </linearGradient>
-  </defs>
-
-  <!-- ===== BACKGROUND ===== -->
-  <rect width="1920" height="1080" fill="url(#floor-tiles)"/>
-
-  <!-- Back wall -->
-  <rect x="0" y="0" width="1920" height="640" fill="#13161A" opacity="0.6"/>
-
-  <!-- Wall trim line -->
-  <rect x="0" y="636" width="1920" height="4" fill="#2D3748"/>
-
-  <!-- ===== CENTER DIVIDER ===== -->
-  <rect x="956" y="0" width="8" height="1080" fill="#2D3748"/>
-  <rect x="958" y="0" width="4" height="1080" fill="#38BDF8" opacity="0.4"/>
-  <!-- Divider glow -->
-  <rect x="948" y="0" width="24" height="1080" fill="url(#screen-glow)" opacity="0.3"/>
-
-  <!-- ===== SIDE LABELS ===== -->
-  <!-- Dev label -->
-  <text x="480" y="52" fill="#38BDF8" font-family="'Inter','Roboto',sans-serif" font-size="28" font-weight="700" text-anchor="middle" letter-spacing="0.1em">DEVELOPMENT</text>
-  <text x="480" y="80" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="16" font-weight="400" text-anchor="middle" letter-spacing="0.05em">Dev Minions</text>
-
-  <!-- Business label -->
-  <text x="1440" y="52" fill="#2DD4BF" font-family="'Inter','Roboto',sans-serif" font-size="28" font-weight="700" text-anchor="middle" letter-spacing="0.1em">BUSINESS</text>
-  <text x="1440" y="80" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="16" font-weight="400" text-anchor="middle" letter-spacing="0.05em">Business Minions</text>
-
-  <!-- ===== DEV SIDE DESKS (3 desks) ===== -->
-  <!-- Desk 1 -->
-  <g transform="translate(60, 300)">
-    <!-- Desk shadow -->
-    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
-    <!-- Desk surface -->
-    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
-    <!-- Desk edge -->
-    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
-    <!-- Laptop -->
-    <g transform="translate(90, 30)">
-      <!-- Screen -->
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
-      <!-- Screen content lines -->
-      <rect x="8" y="10" width="50" height="2" rx="1" fill="#38BDF8" opacity="0.6"/>
-      <rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
-      <rect x="8" y="22" width="42" height="2" rx="1" fill="#38BDF8" opacity="0.5"/>
-      <!-- Screen glow -->
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
-      <!-- Base -->
-      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
-    </g>
-    <!-- Chair -->
-    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
-    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
-  </g>
-
-  <!-- Desk 2 -->
-  <g transform="translate(60, 520)">
-    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
-    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
-    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
-    <g transform="translate(90, 30)">
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
-      <rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
-      <rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
-      <rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
-      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
-    </g>
-    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
-    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
-  </g>
-
-  <!-- Desk 3 -->
-  <g transform="translate(340, 300)">
-    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
-    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
-    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
-    <g transform="translate(90, 30)">
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
-      <rect x="8" y="10" width="50" height="2" rx="1" fill="#38BDF8" opacity="0.6"/>
-      <rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
-      <rect x="8" y="22" width="42" height="2" rx="1" fill="#38BDF8" opacity="0.5"/>
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
-      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
-    </g>
-    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
-    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
-  </g>
-
-  <!-- ===== BUSINESS SIDE DESKS (3 desks, mirrored) ===== -->
-  <!-- Desk 1 -->
-  <g transform="translate(620, 300)">
-    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
-    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
-    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
-    <g transform="translate(90, 30)">
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
-      <rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
-      <rect x="8" y="16" width="35" height="2" rx="1" fill="#F87171" opacity="0.4"/>
-      <rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
-      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
-    </g>
-    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
-    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
-  </g>
-
-  <!-- Desk 2 -->
-  <g transform="translate(620, 520)">
-    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
-    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
-    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
-    <g transform="translate(90, 30)">
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
-      <rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
-      <rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
-      <rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
-      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
-    </g>
-    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
-    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
-  </g>
-
-  <!-- Desk 3 -->
-  <g transform="translate(900, 300)">
-    <rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
-    <rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
-    <rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
-    <g transform="translate(90, 30)">
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
-      <rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
-      <rect x="8" y="16" width="35" height="2" rx="1" fill="#F87171" opacity="0.4"/>
-      <rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
-      <rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
-      <rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
-    </g>
-    <rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
-    <rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
-  </g>
-
-  <!-- ===== DEV BREAKROOM (bottom-left) ===== -->
-  <!-- Couch -->
-  <g transform="translate(60, 800)">
-    <!-- Couch back -->
-    <rect x="0" y="0" width="280" height="80" rx="12" fill="url(#couch-fabric)" stroke="#4A5568" stroke-width="2"/>
-    <!-- Cushion -->
-    <rect x="10" y="10" width="260" height="60" rx="8" fill="#374151" stroke="#4A5568" stroke-width="1"/>
-    <!-- Cushion dividers -->
-    <rect x="95" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
-    <rect x="185" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
-    <!-- Armrests -->
-    <rect x="0" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
-    <rect x="260" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
-    <!-- Couch label -->
-    <text x="140" y="50" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="12" text-anchor="middle" opacity="0.6">COMFY SOFA</text>
-  </g>
-
-  <!-- TV -->
-  <g transform="translate(400, 780)">
-    <!-- TV frame -->
-    <rect x="0" y="0" width="160" height="100" rx="6" fill="#1A1E24" stroke="#3A4255" stroke-width="2"/>
-    <!-- TV screen -->
-    <rect x="8" y="8" width="144" height="76" rx="4" fill="#0A1628"/>
-    <!-- TV content - code lines -->
-    <rect x="16" y="20" width="80" height="2" rx="1" fill="#38BDF8" opacity="0.5"/>
-    <rect x="16" y="28" width="60" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
-    <rect x="16" y="36" width="90" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
-    <rect x="16" y="44" width="50" height="2" rx="1" fill="#38BDF8" opacity="0.4"/>
-    <rect x="16" y="52" width="70" height="2" rx="1" fill="#F87171" opacity="0.3"/>
-    <!-- TV glow -->
-    <rect x="8" y="8" width="144" height="76" rx="4" fill="url(#tv-glow)" opacity="0.6"/>
-    <!-- TV stand -->
-    <rect x="70" y="100" width="20" height="16" fill="#3A4255"/>
-    <rect x="55" y="112" width="50" height="4" rx="2" fill="#3A4255"/>
-    <!-- TV label -->
-    <text x="80" y="138" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="11" text-anchor="middle" opacity="0.5">MONITOR</text>
-  </g>
-
-  <!-- Banana Bowl (Dev side) -->
-  <g transform="translate(200, 950)">
-    <!-- Bowl -->
-    <ellipse cx="0" cy="0" rx="36" ry="20" fill="url(#bowl-gradient)" stroke="#5A4A3A" stroke-width="2"/>
-    <ellipse cx="0" cy="-4" rx="30" ry="14" fill="#8B7355" opacity="0.6"/>
-    <!-- Bananas -->
-    <path d="M-12,-8 Q-8,-20 -2,-12" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
-    <path d="M2,-10 Q8,-22 14,-10" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
-    <path d="M-6,-14 Q-2,-24 4,-14" fill="#FFEC6E" stroke="#DAA520" stroke-width="1"/>
-    <!-- Label -->
-    <text x="0" y="32" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="10" text-anchor="middle" opacity="0.5">🍌 BANANA BOWL</text>
-  </g>
-
-  <!-- ===== BUSINESS BREAKROOM (bottom-right, mirrored) ===== -->
-  <!-- Couch (mirrored position) -->
-  <g transform="translate(1080, 800)">
-    <rect x="0" y="0" width="280" height="80" rx="12" fill="url(#couch-fabric)" stroke="#4A5568" stroke-width="2"/>
-    <rect x="10" y="10" width="260" height="60" rx="8" fill="#374151" stroke="#4A5568" stroke-width="1"/>
-    <rect x="95" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
-    <rect x="185" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
-    <rect x="0" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
-    <rect x="260" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
-    <text x="140" y="50" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="12" text-anchor="middle" opacity="0.6">COMFY SOFA</text>
-  </g>
-
-  <!-- TV (Business side) -->
-  <g transform="translate(1420, 780)">
-    <rect x="0" y="0" width="160" height="100" rx="6" fill="#1A1E24" stroke="#3A4255" stroke-width="2"/>
-    <rect x="8" y="8" width="144" height="76" rx="4" fill="#0A1628"/>
-    <!-- Business chart content -->
-    <rect x="16" y="60" width="12" height="20" fill="#2DD4BF" opacity="0.5" rx="1"/>
-    <rect x="32" y="45" width="12" height="35" fill="#2DD4BF" opacity="0.6" rx="1"/>
-    <rect x="48" y="35" width="12" height="45" fill="#2DD4BF" opacity="0.7" rx="1"/>
-    <rect x="64" y="50" width="12" height="30" fill="#2DD4BF" opacity="0.5" rx="1"/>
-    <rect x="80" y="40" width="12" height="40" fill="#2DD4BF" opacity="0.6" rx="1"/>
-    <rect x="96" y="55" width="12" height="25" fill="#2DD4BF" opacity="0.4" rx="1"/>
-    <rect x="8" y="8" width="144" height="76" rx="4" fill="url(#tv-glow)" opacity="0.6"/>
-    <rect x="70" y="100" width="20" height="16" fill="#3A4255"/>
-    <rect x="55" y="112" width="50" height="4" rx="2" fill="#3A4255"/>
-    <text x="80" y="138" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="11" text-anchor="middle" opacity="0.5">MONITOR</text>
-  </g>
-
-  <!-- Banana Bowl (Business side) -->
-  <g transform="translate(1220, 950)">
-    <ellipse cx="0" cy="0" rx="36" ry="20" fill="url(#bowl-gradient)" stroke="#5A4A3A" stroke-width="2"/>
-    <ellipse cx="0" cy="-4" rx="30" ry="14" fill="#8B7355" opacity="0.6"/>
-    <path d="M-12,-8 Q-8,-20 -2,-12" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
-    <path d="M2,-10 Q8,-22 14,-10" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
-    <path d="M-6,-14 Q-2,-24 4,-14" fill="#FFEC6E" stroke="#DAA520" stroke-width="1"/>
-    <text x="0" y="32" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="10" text-anchor="middle" opacity="0.5">🍌 BANANA BOWL</text>
-  </g>
-
-  <!-- ===== AMBIENT LIGHTING ===== -->
-  <!-- Dev side ceiling light -->
-  <circle cx="480" cy="0" r="300" fill="url(#tv-glow)" opacity="0.15"/>
-  <!-- Business side ceiling light -->
-  <circle cx="1440" cy="0" r="300" fill="url(#tv-glow)" opacity="0.15"/>
-</svg>

frontend/src/app/app.routes.ts

@@ -5,7 +5,6 @@ import { ProjectsPageComponent } from './pages/projects/projects-page.component'
 import { SessionsPageComponent } from './pages/sessions/sessions-page.component';
 import { LogsPageComponent } from './pages/logs/logs-page.component';
 import { SettingsPageComponent } from './pages/settings/settings-page.component';
-import { BreakroomPageComponent } from './pages/breakroom/breakroom-page.component';
 
 export const routes: Routes = [
   {
@@ -18,7 +17,6 @@ export const routes: Routes = [
       { path: 'sessions', component: SessionsPageComponent },
       { path: 'logs', component: LogsPageComponent },
       { path: 'settings', component: SettingsPageComponent },
-      { path: 'breakroom', component: BreakroomPageComponent },
     ],
   },
 ];

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

@@ -0,0 +1,82 @@
+<!-- ========================================================================== -->
+<!-- AgentCard — per spec Section 7.3                                            -->
+<!-- Integrates: Status Badge · Task Progress Bar · Quick‑Jump Button           -->
+<!-- Left‑border accent matches status color. role="article" + aria‑labels.     -->
+<!-- ========================================================================== -->
+<article
+  class="agent-card"
+  role="article"
+  [attr.aria-label]="displayName + ' — ' + statusLabel()"
+  [style.border-left-color]="statusBorderColor()"
+>
+
+  <!-- ── Header: status badge + agent info ── -->
+  <div class="agent-card__header">
+    <div class="agent-card__badge" [attr.aria-label]="'Status: ' + statusLabel()">
+      <span
+        class="status-dot"
+        [ngClass]="[statusDotClass()]"
+      ></span>
+      <span class="agent-card__status-label">{{ statusLabel() }}</span>
+    </div>
+
+    <div class="agent-card__identity">
+      <span class="agent-card__name">{{ displayName || agentId }}</span>
+      <span class="agent-card__role">{{ role }}</span>
+    </div>
+  </div>
+
+  <!-- ── Body: current task ── -->
+  <div class="agent-card__body" *ngIf="task || status === 'error'">
+    <p
+      class="agent-card__task"
+      [attr.aria-label]="'Current task: ' + (status === 'error' ? errorMessage : task)"
+    >
+      {{ status === 'error' ? errorMessage || task : task }}
+    </p>
+  </div>
+
+  <!-- ── Task Progress Bar ── -->
+  <div
+    class="agent-card__progress"
+    *ngIf="progress > 0 && status !== 'error'"
+    [attr.aria-label]="'Task progress: ' + progress + '%'"
+  >
+    <mat-progress-bar
+      mode="determinate"
+      [value]="progress"
+      [aria-label]="'Progress ' + progress + '% complete'"
+    ></mat-progress-bar>
+    <span class="agent-card__progress-label text-mono">{{ progress }}%</span>
+  </div>
+
+  <!-- ── Footer: channel + last activity + quick‑jump ── -->
+  <div class="agent-card__footer">
+    <div class="agent-card__meta">
+      <span
+        class="agent-card__channel text-mono"
+        [attr.aria-label]="'Channel: ' + channel"
+      >
+        <mat-icon aria-hidden="true">{{ channelIcon() }}</mat-icon>
+        {{ channel }}
+      </span>
+      <span
+        class="agent-card__last-activity text-mono"
+        [attr.aria-label]="'Last activity: ' + lastActivityLabel()"
+      >
+        {{ lastActivityLabel() }}
+      </span>
+    </div>
+
+    <!-- Quick‑Jump Button -->
+    <a
+      class="agent-card__jump"
+      mat-button
+      [routerLink]="jumpRoute()"
+      [attr.aria-label]="'Jump to session for ' + (displayName || agentId)"
+      matTooltip="Jump to session"
+    >
+      <mat-icon aria-hidden="true">arrow_forward</mat-icon>
+    </a>
+  </div>
+</article>

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

@@ -0,0 +1,234 @@
+// ============================================================================
+// AgentCard — M3 tactical dark styling
+// Per spec Section 7.3: left‑border accent, status‑aware coloring,
+// responsive card layout with 320px min‑width.
+// ============================================================================
+
+.agent-card {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--cc-card-min-width);
+  padding: var(--cc-card-padding);
+  background-color: var(--cc-surface-container);
+  border-radius: var(--cc-card-border-radius);
+  border-left: 4px solid var(--status-offline); // default; overridden by [style]
+  border-top: 1px solid var(--cc-outline);
+  border-right: 1px solid var(--cc-outline);
+  border-bottom: 1px solid var(--cc-outline);
+  gap: 16px;
+  transition: border-left-color 0.3s ease, box-shadow 0.2s ease;
+  cursor: default;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  &:focus-within {
+    outline: 2px solid var(--status-active);
+    outline-offset: 2px;
+  }
+}
+
+// ── Header ──
+.agent-card__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.agent-card__badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 12px;
+  background-color: var(--status-active-bg); // overridden per status below
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--cc-on-surface);
+
+  // Per‑status background tints
+  .status-dot--active + & {
+    background-color: var(--status-active-bg);
+  }
+}
+
+.agent-card__status-label {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--cc-on-surface-variant);
+}
+
+.agent-card__identity {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.agent-card__name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--cc-on-surface);
+  line-height: 1.2;
+}
+
+.agent-card__role {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--cc-on-surface-variant);
+}
+
+// ── Body ──
+.agent-card__body {
+  padding: 4px 0;
+}
+
+.agent-card__task {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--cc-on-surface);
+  line-height: 1.4;
+
+  // Error messages get distinct styling
+  .agent-card--error & {
+    color: var(--status-error);
+  }
+}
+
+// ── Progress Bar ──
+.agent-card__progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.agent-card__progress-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--cc-on-surface-variant);
+  white-space: nowrap;
+  min-width: 36px;
+}
+
+// Override mat-progress-bar to match tactical dark theme
+.agent-card__progress ::ng-deep .mat-mdc-progress-bar {
+  height: 4px;
+  border-radius: 2px;
+
+  .mdc-linear-progress__bar-inner {
+    background-color: var(--status-active);
+  }
+
+  .mdc-linear-progress__track {
+    background-color: var(--cc-outline);
+  }
+}
+
+// ── Footer ──
+.agent-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: auto; // push footer to bottom
+}
+
+.agent-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.agent-card__channel {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--cc-on-surface-variant);
+}
+
+.agent-card__channel-icon,
+.agent-card__channel .mat-icon {
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+}
+
+.agent-card__last-activity {
+  font-size: 12px;
+  color: var(--cc-on-surface-variant);
+}
+
+// ── Quick‑Jump Button ──
+.agent-card__jump {
+  flex-shrink: 0;
+
+  // Match M3 text button sizing
+  .mat-mdc-button {
+    min-width: 36px;
+    padding: 0 8px;
+    color: var(--status-active);
+  }
+
+  .mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+// ── Status‑specific background tints for badge ──
+// We use the global status-dot classes from styles.scss and pair them
+// with contextual background-color overrides here.
+
+.agent-card[data-status="active"] .agent-card__badge,
+.agent-card .status-dot--active ~ .agent-card__badge {
+  background-color: var(--status-active-bg);
+}
+
+.agent-card[data-status="idle"] .agent-card__badge {
+  background-color: var(--status-idle-bg);
+}
+
+.agent-card[data-status="thinking"] .agent-card__badge {
+  background-color: var(--status-thinking-bg);
+}
+
+.agent-card[data-status="error"] .agent-card__badge {
+  background-color: var(--status-error-bg);
+}
+
+// ── Responsive ──
+@media (max-width: 599px) {
+  .agent-card {
+    min-width: unset;
+    padding: 16px;
+  }
+
+  .agent-card__header {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .agent-card__footer {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .agent-card__meta {
+    gap: 8px;
+  }
+}
+
+// ── Accessibility: reduced motion ──
+@media (prefers-reduced-motion: reduce) {
+  .agent-card {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,127 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  computed,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+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';
+
+// ============================================================================
+// AgentCard Component
+// Per spec Section 7.3: Composes Agent Status Badge, Task Progress Bar,
+// and Quick‑Jump Button into a card with left‑border status accent.
+// ============================================================================
+
+@Component({
+  selector: 'app-agent-card',
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    MatIconModule,
+    MatButtonModule,
+    MatProgressBarModule,
+    MatTooltipModule,
+  ],
+  templateUrl: './agent-card.component.html',
+  styleUrl: './agent-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AgentCardComponent {
+  // --- Six required inputs per spec ---
+
+  /** Agent status — drives badge color and left‑border accent */
+  @Input({ required: true }) status!: AgentStatus;
+
+  /** Current task description, e.g. "Reviewing PR #42" */
+  @Input() task = '';
+
+  /** Task progress percentage 0–100 */
+  @Input() progress = 0;
+
+  /** Full session key for quick‑jump navigation */
+  @Input({ required: true }) sessionKey = '';
+
+  /** Communication channel, e.g. "telegram" */
+  @Input({ required: true }) channel = '';
+
+  /** Timestamp of last agent activity */
+  @Input({ required: true }) lastActivity!: Date;
+
+  // --- Additional display inputs ---
+
+  /** Short agent ID, e.g. "otto" */
+  @Input() agentId = '';
+
+  /** Display name, e.g. "Otto" */
+  @Input() displayName = '';
+
+  /** Role description, e.g. "Orchestrator Agent" */
+  @Input() role = '';
+
+  /** Error message (shown only when status is 'error') */
+  @Input() errorMessage = '';
+
+  // --- Computed values ---
+
+  /** Map status → CSS custom property for the left‑border accent */
+  readonly statusBorderColor = computed(() => {
+    const map: Record<AgentStatus, string> = {
+      active: 'var(--status-active)',
+      idle: 'var(--status-idle)',
+      thinking: 'var(--status-thinking)',
+      error: 'var(--status-error)',
+      offline: 'var(--status-offline)',
+    };
+    return map[this.status] ?? 'var(--status-offline)';
+  });
+
+  /** Human‑readable status label */
+  readonly statusLabel = computed(() => {
+    const labels: Record<AgentStatus, string> = {
+      active: 'Active',
+      idle: 'Idle',
+      thinking: 'Thinking…',
+      error: 'Error',
+      offline: 'Offline',
+    };
+    return labels[this.status] ?? this.status;
+  });
+
+  /** CSS class suffix for the status badge dot */
+  readonly statusDotClass = computed(() => `status-dot--${this.status}`);
+
+  /** Material icon name for the channel */
+  readonly channelIcon = computed(() => {
+    const icons: Record<string, string> = {
+      telegram: 'telegram',  // falls back to font icon if no SVG registered
+      slack: 'chat',
+      discord: 'forum',
+      whatsapp: 'chat',
+      webchat: 'language',
+      email: 'email',
+    };
+    return icons[this.channel] ?? 'chat';
+  });
+
+  /** Relative time string for lastActivity */
+  readonly lastActivityLabel = computed(() => {
+    if (!this.lastActivity) return '';
+    const now = Date.now();
+    const then = this.lastActivity.getTime();
+    const diffSec = Math.max(0, Math.floor((now - then) / 1000));
+    if (diffSec < 60) return 'just now';
+    if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
+    if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
+    return `${Math.floor(diffSec / 86400)}d ago`;
+  });
+
+  /** Quick‑jump route derived from sessionKey */
+  readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
+}

frontend/src/app/command-hub/components/index.ts

@@ -0,0 +1 @@
+export * from './agent-card/agent-card.component';

frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.html

@@ -0,0 +1,112 @@
+<!-- ======================================================================== -->
+<!-- Adaptive Navigation — Desktop sidebar / Mobile header                    -->
+<!-- Desktop (≥768px): 72px sidebar with full navigation items                -->
+<!-- Mobile (<768px):  56px compact header with hamburger menu                -->
+<!-- ======================================================================== -->
+
+<!-- ======================= DESKTOP SIDEBAR (≥768px) ======================= -->
+<aside class="adaptive-nav__sidebar" aria-label="Navigation sidebar">
+  <!-- Brand / Toggle header -->
+  <div class="adaptive-nav__sidebar-header">
+    <span class="adaptive-nav__brand">OC</span>
+  </div>
+
+  <!-- Navigation destinations -->
+  <nav class="adaptive-nav__sidebar-nav">
+    @for (dest of destinations; track dest.route) {
+      <a
+        class="adaptive-nav__sidebar-item"
+        [routerLink]="dest.route"
+        routerLinkActive="adaptive-nav__sidebar-item--active"
+        [attr.aria-label]="dest.label"
+      >
+        <mat-icon
+          [matBadge]="dest.badge ?? 0"
+          [matBadgeHidden]="!dest.badge"
+          matBadgePosition="above after"
+          matBadgeSize="small"
+        >
+          {{ dest.icon }}
+        </mat-icon>
+        <span class="adaptive-nav__sidebar-label">{{ dest.label }}</span>
+      </a>
+    }
+  </nav>
+
+  <!-- Sidebar footer: LIVE indicator + action buttons -->
+  <div class="adaptive-nav__sidebar-footer">
+    <div class="adaptive-nav__live" [class.adaptive-nav__live--connected]="isConnected()">
+      <span
+        class="adaptive-nav__live-dot"
+        [class.adaptive-nav__live-dot--connected]="isConnected()"
+      ></span>
+      <mat-chip
+        class="adaptive-nav__live-chip"
+        [highlighted]="isConnected()"
+        [disabled]="!isConnected()"
+      >
+        {{ isConnected() ? 'LIVE' : 'OFFLINE' }}
+      </mat-chip>
+    </div>
+
+    <!-- Action buttons (placeholder) -->
+    <div class="adaptive-nav__sidebar-actions">
+      <button mat-icon-button aria-label="Notifications">
+        <mat-icon>notifications</mat-icon>
+      </button>
+      <button mat-icon-button aria-label="Settings">
+        <mat-icon>settings</mat-icon>
+      </button>
+    </div>
+  </div>
+</aside>
+
+<!-- ======================= MOBILE HEADER (<768px) ======================== -->
+<header class="adaptive-nav__mobile-header" role="banner">
+  <!-- Hamburger menu button -->
+  <button
+    class="adaptive-nav__hamburger"
+    mat-icon-button
+    [attr.aria-label]="mobileMenuOpen() ? 'Close menu' : 'Open menu'"
+    [attr.aria-expanded]="mobileMenuOpen()"
+    (click)="toggleMobileMenu()"
+  >
+    <mat-icon>{{ mobileMenuOpen() ? 'close' : 'menu' }}</mat-icon>
+  </button>
+
+  <!-- Title -->
+  <h1 class="adaptive-nav__mobile-title">Command Hub</h1>
+
+  <!-- LIVE indicator (always visible on mobile) -->
+  <div class="adaptive-nav__live adaptive-nav__live--mobile" [class.adaptive-nav__live--connected]="isConnected()">
+    <span
+      class="adaptive-nav__live-dot"
+      [class.adaptive-nav__live-dot--connected]="isConnected()"
+    ></span>
+    <span class="adaptive-nav__live-text">{{ isConnected() ? 'LIVE' : 'OFFLINE' }}</span>
+  </div>
+
+  <!-- Mobile action buttons (placeholder) -->
+  <button class="adaptive-nav__mobile-action" mat-icon-button aria-label="Notifications">
+    <mat-icon>notifications</mat-icon>
+  </button>
+</header>
+
+<!-- ======================= MOBILE DRAWER OVERLAY ========================= -->
+@if (mobileMenuOpen()) {
+  <div class="adaptive-nav__overlay" (click)="closeMobileMenu()" role="presentation"></div>
+  <nav class="adaptive-nav__mobile-drawer" aria-label="Mobile navigation menu">
+    @for (dest of destinations; track dest.route) {
+      <a
+        class="adaptive-nav__drawer-item"
+        [routerLink]="dest.route"
+        routerLinkActive="adaptive-nav__drawer-item--active"
+        [attr.aria-label]="dest.label"
+        (click)="closeMobileMenu()"
+      >
+        <mat-icon>{{ dest.icon }}</mat-icon>
+        <span class="adaptive-nav__drawer-label">{{ dest.label }}</span>
+      </a>
+    }
+  </nav>
+}

frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.scss

@@ -0,0 +1,316 @@
+// ============================================================================
+// Adaptive Navigation — Desktop sidebar / Mobile header
+// Desktop (≥768px): 72px sidebar with full navigation items
+// Mobile (<768px):  56px compact header with hamburger menu
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Desktop Sidebar (visible ≥768px)
+// ---------------------------------------------------------------------------
+.adaptive-nav__sidebar {
+  display: flex;
+  flex-direction: column;
+  width: var(--cc-nav-rail-collapsed-width, 72px);
+  min-height: 100vh;
+  background-color: var(--cc-surface-container-high);
+  border-right: 1px solid var(--cc-outline);
+  z-index: 10;
+}
+
+.adaptive-nav__sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 64px;
+  border-bottom: 1px solid var(--cc-outline);
+}
+
+.adaptive-nav__brand {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--status-active);
+  letter-spacing: 0.04em;
+}
+
+.adaptive-nav__sidebar-nav {
+  flex: 1;
+  padding-top: 8px;
+}
+
+.adaptive-nav__sidebar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 56px;
+  padding: 8px 0;
+  margin: 2px 8px;
+  border-radius: 28px;
+  color: var(--cc-on-surface-variant);
+  text-decoration: none;
+  transition: background-color 150ms ease, color 150ms ease;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+    color: var(--cc-on-surface);
+  }
+
+  &--active {
+    background-color: var(--status-active-bg);
+    color: var(--status-active);
+
+    .adaptive-nav__sidebar-label {
+      font-weight: 500;
+    }
+  }
+}
+
+.adaptive-nav__sidebar-label {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar Footer — LIVE indicator + action buttons
+// ---------------------------------------------------------------------------
+.adaptive-nav__sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0 20px;
+  border-top: 1px solid var(--cc-outline);
+}
+
+.adaptive-nav__sidebar-actions {
+  display: flex;
+  gap: 4px;
+
+  .mat-mdc-icon-button {
+    color: var(--cc-on-surface-variant) !important;
+    --mdc-icon-button-icon-size: 20px;
+
+    &:hover {
+      color: var(--cc-on-surface) !important;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// LIVE Status Indicator
+// ---------------------------------------------------------------------------
+.adaptive-nav__live {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: 16px;
+  transition: background-color 200ms ease;
+
+  &--connected {
+    background-color: var(--status-active-bg);
+  }
+}
+
+.adaptive-nav__live-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  border-radius: 50%;
+  background-color: var(--status-error);
+  transition: background-color 200ms ease;
+
+  &--connected {
+    background-color: var(--status-active);
+    animation: pulse-active 2s ease-in-out infinite;
+  }
+}
+
+.adaptive-nav__live-chip {
+  font-size: 11px !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.06em;
+  height: 24px !important;
+  min-height: 24px !important;
+  padding: 0 8px !important;
+  color: var(--status-active) !important;
+  --mdc-chip-elevated-container-color: transparent;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.adaptive-nav__live-text {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--status-active);
+}
+
+// ---------------------------------------------------------------------------
+// Mobile Header (visible <768px)
+// ---------------------------------------------------------------------------
+.adaptive-nav__mobile-header {
+  display: none; // Hidden on desktop, shown on mobile via media query
+  align-items: center;
+  height: 56px;
+  padding: 0 12px;
+  background-color: var(--cc-surface-container-high);
+  border-bottom: 1px solid var(--cc-outline);
+  z-index: 20;
+  gap: 8px;
+}
+
+.adaptive-nav__hamburger {
+  color: var(--cc-on-surface-variant) !important;
+
+  &:hover {
+    color: var(--cc-on-surface) !important;
+  }
+}
+
+.adaptive-nav__mobile-title {
+  flex: 1;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--cc-on-surface);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.adaptive-nav__live--mobile {
+  padding: 4px 10px;
+  border-radius: 16px;
+
+  .adaptive-nav__live-text {
+    font-size: 11px;
+    font-weight: 700;
+  }
+}
+
+.adaptive-nav__mobile-action {
+  color: var(--cc-on-surface-variant) !important;
+
+  &:hover {
+    color: var(--cc-on-surface) !important;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Mobile Drawer
+// ---------------------------------------------------------------------------
+.adaptive-nav__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 40;
+}
+
+.adaptive-nav__mobile-drawer {
+  position: fixed;
+  top: 56px; // Below header
+  left: 0;
+  bottom: 0;
+  width: 280px;
+  max-width: 80vw;
+  background-color: var(--cc-surface-container);
+  border-right: 1px solid var(--cc-outline);
+  z-index: 50;
+  padding: 12px 0;
+  overflow-y: auto;
+  animation: slide-in-left 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.adaptive-nav__drawer-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 48px;
+  padding: 0 20px;
+  color: var(--cc-on-surface-variant);
+  text-decoration: none;
+  transition: background-color 150ms ease, color 150ms ease;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+    color: var(--cc-on-surface);
+  }
+
+  &--active {
+    background-color: var(--status-active-bg);
+    color: var(--status-active);
+
+    .adaptive-nav__drawer-label {
+      font-weight: 500;
+    }
+  }
+}
+
+.adaptive-nav__drawer-label {
+  font-size: 14px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+// ---------------------------------------------------------------------------
+// Drawer slide-in animation
+// ---------------------------------------------------------------------------
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Media Queries — Layout Switch
+// ---------------------------------------------------------------------------
+// Desktop (≥768px): Show sidebar, hide mobile header
+// Mobile (<768px):  Hide sidebar, show compact header
+// ---------------------------------------------------------------------------
+@media (min-width: 768px) {
+  .adaptive-nav__sidebar {
+    display: flex;
+  }
+
+  .adaptive-nav__mobile-header {
+    display: none;
+  }
+
+  // Hide mobile drawer and overlay on desktop
+  .adaptive-nav__overlay,
+  .adaptive-nav__mobile-drawer {
+    display: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .adaptive-nav__sidebar {
+    display: none;
+  }
+
+  .adaptive-nav__mobile-header {
+    display: flex;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Accessibility: Reduced Motion
+// ---------------------------------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .adaptive-nav__live-dot--connected {
+    animation: none;
+  }
+
+  .adaptive-nav__mobile-drawer {
+    animation: none;
+  }
+}

frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.ts

@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatBadgeModule } from '@angular/material/badge';
+import { NAV_DESTINATIONS } from '../../models/nav.model';
+
+/**
+ * Adaptive Navigation Component — switches between desktop sidebar
+ * and mobile header layouts using CSS media queries.
+ *
+ * Desktop (≥768px): 72px sidebar with full navigation items.
+ * Mobile (<768px):  56px compact header with hamburger menu.
+ *
+ * The LIVE status indicator is visible in both layouts.
+ * Per spec Section 3.1 (kiosk) and 3.2 (mobile).
+ */
+@Component({
+  selector: 'app-adaptive-navigation',
+  standalone: true,
+  imports: [
+    RouterLink,
+    RouterLinkActive,
+    MatIconModule,
+    MatButtonModule,
+    MatChipsModule,
+    MatBadgeModule,
+  ],
+  templateUrl: './adaptive-navigation.component.html',
+  styleUrl: './adaptive-navigation.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdaptiveNavigationComponent {
+  /** Navigation destinations shared with other nav components */
+  protected readonly destinations = NAV_DESTINATIONS;
+
+  /** Whether the mobile drawer is open */
+  protected readonly mobileMenuOpen = signal(false);
+
+  /** Live connection status */
+  protected readonly isConnected = signal(true);
+
+  /** Toggle mobile menu */
+  toggleMobileMenu(): void {
+    this.mobileMenuOpen.update((v) => !v);
+  }
+
+  /** Close mobile menu (e.g. on nav) */
+  closeMobileMenu(): void {
+    this.mobileMenuOpen.set(false);
+  }
+}

frontend/src/app/components/adaptive-navigation/index.ts

@@ -0,0 +1 @@
+export * from './adaptive-navigation.component';

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

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

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

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

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

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

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

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

frontend/src/app/components/breakroom-scene/breakroom-scene.component.html

@@ -1,224 +0,0 @@
-<!-- ============================================================================
-  Breakroom Scene — 16-bit Office Layout
-  Per CUB-61: Left=Dev, Right=Business, Center=Divider
-  ============================================================================ -->
-
-<div class="scene">
-  <!-- Background SVG layer -->
-  <div class="scene__background">
-    <img
-      src="scene/breakroom.svg"
-      alt="Breakroom background"
-      class="scene__bg-image"
-      aria-hidden="true"
-    />
-  </div>
-
-  <!-- Center divider line (drawn over the SVG for precise control) -->
-  <div class="scene__divider" aria-hidden="true">
-    <div class="scene__divider-glow"></div>
-    <div class="scene__divider-line"></div>
-  </div>
-
-  <!-- ===== DEV SIDE (Left) ===== -->
-  <section class="scene__side scene__side--dev" aria-label="Dev minion area">
-
-    <!-- Side header -->
-    <header class="scene__side-header">
-      <h2 class="scene__side-title scene__side-title--dev">DEVELOPMENT</h2>
-      <span class="scene__side-subtitle">Dev Minions</span>
-    </header>
-
-    <!-- Desks area (3 desks in grid) -->
-    <div class="scene__desks">
-      @for (deskIndex of [0, 1, 2]; track deskIndex) {
-        <div
-          class="scene__desk"
-          [class.scene__desk--occupied]="!!getDeskOccupant('dev', deskIndex)"
-          [class.scene__desk--empty]="!getDeskOccupant('dev', deskIndex)"
-        >
-          <!-- Desk label -->
-          <span class="scene__desk-label">Desk {{ deskIndex + 1 }}</span>
-
-          <!-- Empty desk indicator -->
-          @if (!getDeskOccupant('dev', deskIndex)) {
-            <div class="scene__desk-empty">
-              <span class="scene__desk-empty-icon">💻</span>
-              <span class="scene__desk-empty-text">Empty</span>
-            </div>
-          }
-
-          <!-- Minion at desk (working or walking) -->
-          @if (getDeskOccupant('dev', deskIndex); as occupant) {
-            <app-minion
-              [agentName]="occupant.agentName"
-              [side]="occupant.side"
-              [deskIndex]="occupant.deskIndex"
-              [state]="occupant.state"
-              [progress]="occupant.progress"
-              [displayName]="occupant.displayName"
-              [currentTask]="occupant.currentTask ?? ''"
-            />
-          }
-        </div>
-      }
-    </div>
-
-    <!-- Dev Breakroom area (idle + returning minions) -->
-    <div class="scene__breakroom scene__breakroom--dev">
-      <header class="scene__breakroom-header">
-        <span class="scene__breakroom-icon">🛋️</span>
-        <span class="scene__breakroom-label">Dev Breakroom</span>
-      </header>
-
-      <!-- Breakroom furniture indicators -->
-      <div class="scene__breakroom-furniture">
-        <div class="scene__furniture-item scene__furniture-item--couch">
-          <span class="scene__furniture-emoji">🛋️</span>
-          <span class="scene__furniture-label">Couch</span>
-        </div>
-        <div class="scene__furniture-item scene__furniture-item--tv">
-          <span class="scene__furniture-emoji">📺</span>
-          <span class="scene__furniture-label">TV</span>
-        </div>
-        <div class="scene__furniture-item scene__furniture-item--bananas">
-          <span class="scene__furniture-emoji">🍌</span>
-          <span class="scene__furniture-label">Bananas</span>
-        </div>
-      </div>
-
-      <!-- Idle minions in breakroom -->
-      <div class="scene__breakroom-minions">
-        @for (minion of devBreakroomMinions(); track minion.agentName) {
-          <app-minion
-            [agentName]="minion.agentName"
-            [side]="minion.side"
-            [deskIndex]="minion.deskIndex"
-            [state]="minion.state"
-            [progress]="minion.progress"
-            [displayName]="minion.displayName"
-          />
-        }
-
-        <!-- Returning minions (walking back to breakroom) -->
-        @for (minion of devReturningMinions(); track minion.agentName) {
-          <app-minion
-            [agentName]="minion.agentName"
-            [side]="minion.side"
-            [deskIndex]="minion.deskIndex"
-            [state]="minion.state"
-            [progress]="minion.progress"
-            [displayName]="minion.displayName"
-          />
-        }
-
-        @if (devBreakroomMinions().length === 0 && devReturningMinions().length === 0) {
-          <div class="scene__breakroom-empty">
-            <span>No minions on break 🍌</span>
-          </div>
-        }
-      </div>
-    </div>
-  </section>
-
-  <!-- ===== BUSINESS SIDE (Right) ===== -->
-  <section class="scene__side scene__side--business" aria-label="Business minion area">
-
-    <!-- Side header -->
-    <header class="scene__side-header">
-      <h2 class="scene__side-title scene__side-title--business">BUSINESS</h2>
-      <span class="scene__side-subtitle">Business Minions</span>
-    </header>
-
-    <!-- Desks area (3 desks in grid) -->
-    <div class="scene__desks">
-      @for (deskIndex of [0, 1, 2]; track deskIndex) {
-        <div
-          class="scene__desk"
-          [class.scene__desk--occupied]="!!getDeskOccupant('business', deskIndex)"
-          [class.scene__desk--empty]="!getDeskOccupant('business', deskIndex)"
-        >
-          <!-- Desk label -->
-          <span class="scene__desk-label">Desk {{ deskIndex + 1 }}</span>
-
-          <!-- Empty desk indicator -->
-          @if (!getDeskOccupant('business', deskIndex)) {
-            <div class="scene__desk-empty">
-              <span class="scene__desk-empty-icon">💻</span>
-              <span class="scene__desk-empty-text">Empty</span>
-            </div>
-          }
-
-          <!-- Minion at desk (working or walking) -->
-          @if (getDeskOccupant('business', deskIndex); as occupant) {
-            <app-minion
-              [agentName]="occupant.agentName"
-              [side]="occupant.side"
-              [deskIndex]="occupant.deskIndex"
-              [state]="occupant.state"
-              [progress]="occupant.progress"
-              [displayName]="occupant.displayName"
-              [currentTask]="occupant.currentTask ?? ''"
-            />
-          }
-        </div>
-      }
-    </div>
-
-    <!-- Business Breakroom area -->
-    <div class="scene__breakroom scene__breakroom--business">
-      <header class="scene__breakroom-header">
-        <span class="scene__breakroom-icon">🛋️</span>
-        <span class="scene__breakroom-label">Business Breakroom</span>
-      </header>
-
-      <!-- Breakroom furniture indicators -->
-      <div class="scene__breakroom-furniture">
-        <div class="scene__furniture-item scene__furniture-item--couch">
-          <span class="scene__furniture-emoji">🛋️</span>
-          <span class="scene__furniture-label">Couch</span>
-        </div>
-        <div class="scene__furniture-item scene__furniture-item--tv">
-          <span class="scene__furniture-emoji">📺</span>
-          <span class="scene__furniture-label">TV</span>
-        </div>
-        <div class="scene__furniture-item scene__furniture-item--bananas">
-          <span class="scene__furniture-emoji">🍌</span>
-          <span class="scene__furniture-label">Bananas</span>
-        </div>
-      </div>
-
-      <!-- Idle minions in breakroom -->
-      <div class="scene__breakroom-minions">
-        @for (minion of businessBreakroomMinions(); track minion.agentName) {
-          <app-minion
-            [agentName]="minion.agentName"
-            [side]="minion.side"
-            [deskIndex]="minion.deskIndex"
-            [state]="minion.state"
-            [progress]="minion.progress"
-            [displayName]="minion.displayName"
-          />
-        }
-
-        <!-- Returning minions -->
-        @for (minion of businessReturningMinions(); track minion.agentName) {
-          <app-minion
-            [agentName]="minion.agentName"
-            [side]="minion.side"
-            [deskIndex]="minion.deskIndex"
-            [state]="minion.state"
-            [progress]="minion.progress"
-            [displayName]="minion.displayName"
-          />
-        }
-
-        @if (businessBreakroomMinions().length === 0 && businessReturningMinions().length === 0) {
-          <div class="scene__breakroom-empty">
-            <span>No minions on break 🍌</span>
-          </div>
-        }
-      </div>
-    </div>
-  </section>
-</div>

frontend/src/app/components/breakroom-scene/breakroom-scene.component.scss

@@ -1,536 +0,0 @@
-// ============================================================================
-// Breakroom Scene Styles — 16-bit Office Scene Layout
-// Per CUB-61: CSS Grid layout, 1920×1080 viewport, touch-optimized
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Layout Constants
-// ---------------------------------------------------------------------------
-$scene-width: 1920px;
-$scene-height: 1080px;
-$divider-width: 4px;
-$desk-count: 3;
-$pixel: 4px;
-
-// ---------------------------------------------------------------------------
-// Colors — Tactical Dark + Retro Accents
-// ---------------------------------------------------------------------------
-$scene-bg: #0D0F12;
-$scene-surface: #13161A;
-$scene-container: #1C2027;
-$scene-container-high: #252B33;
-$scene-outline: #2D3748;
-$scene-on-surface: #E2E8F0;
-$scene-on-surface-variant: #8A9BB0;
-
-$dev-accent: #38BDF8;
-$dev-accent-dim: rgba(56, 189, 248, 0.15);
-$business-accent: #2DD4BF;
-$business-accent-dim: rgba(45, 212, 191, 0.15);
-
-$desk-surface: #1E2430;
-$desk-border: #2D3748;
-$desk-hover: #252B33;
-$breakroom-bg: rgba(45, 212, 191, 0.04);
-
-// ---------------------------------------------------------------------------
-// Animations
-// ---------------------------------------------------------------------------
-@keyframes dividerPulse {
-  0%, 100% { opacity: 0.6; }
-  50% { opacity: 1; }
-}
-
-@keyframes emptyDeskPulse {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 0.7; }
-}
-
-@keyframes slideInFromBottom {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Scene Root — Full viewport container
-// ---------------------------------------------------------------------------
-.scene {
-  position: relative;
-  width: 100%;
-  max-width: $scene-width;
-  height: 100%;
-  min-height: 600px;
-  aspect-ratio: 16 / 9;
-  display: grid;
-  grid-template-columns: 1fr $divider-width 1fr;
-  grid-template-rows: 1fr;
-  overflow: hidden;
-  background-color: $scene-bg;
-  border-radius: var(--cc-card-border-radius, 16px);
-  image-rendering: pixelated;
-}
-
-// ---------------------------------------------------------------------------
-// Background Image Layer
-// ---------------------------------------------------------------------------
-.scene__background {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.scene__bg-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  opacity: 0.35;
-}
-
-// ---------------------------------------------------------------------------
-// Center Divider — Glowing neon line
-// ---------------------------------------------------------------------------
-.scene__divider {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: $divider-width;
-  height: 100%;
-  z-index: 10;
-  pointer-events: none;
-}
-
-.scene__divider-glow {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 24px;
-  height: 100%;
-  background: linear-gradient(
-    180deg,
-    rgba(56, 189, 248, 0.08) 0%,
-    rgba(56, 189, 248, 0.25) 20%,
-    rgba(56, 189, 248, 0.25) 80%,
-    rgba(56, 189, 248, 0.08) 100%
-  );
-  filter: blur(6px);
-  animation: dividerPulse 4s ease-in-out infinite;
-}
-
-.scene__divider-line {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: $divider-width;
-  height: 100%;
-  background: linear-gradient(
-    180deg,
-    rgba(56, 189, 248, 0.3) 0%,
-    rgba(56, 189, 248, 0.8) 15%,
-    rgba(56, 189, 248, 0.8) 85%,
-    rgba(56, 189, 248, 0.3) 100%
-  );
-  box-shadow:
-    0 0 8px rgba(56, 189, 248, 0.6),
-    0 0 16px rgba(56, 189, 248, 0.3);
-}
-
-// ---------------------------------------------------------------------------
-// Side Sections — Left (Dev) & Right (Business)
-// ---------------------------------------------------------------------------
-.scene__side {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  gap: 20px;
-  overflow-y: auto;
-
-  &--dev {
-    grid-column: 1;
-    background: linear-gradient(
-      135deg,
-      rgba(56, 189, 248, 0.03) 0%,
-      transparent 60%
-    );
-  }
-
-  &--business {
-    grid-column: 3;
-    background: linear-gradient(
-      135deg,
-      rgba(45, 212, 191, 0.03) 0%,
-      transparent 60%
-    );
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Side Header
-// ---------------------------------------------------------------------------
-.scene__side-header {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid $scene-outline;
-}
-
-.scene__side-title {
-  font-family: 'Inter', 'Roboto', sans-serif;
-  font-size: 24px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  margin: 0;
-
-  &--dev {
-    color: $dev-accent;
-    text-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
-  }
-
-  &--business {
-    color: $business-accent;
-    text-shadow: 0 0 12px rgba(45, 212, 191, 0.4);
-  }
-}
-
-.scene__side-subtitle {
-  font-size: 12px;
-  color: $scene-on-surface-variant;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-// ---------------------------------------------------------------------------
-// Desks Area — 3-column grid
-// ---------------------------------------------------------------------------
-.scene__desks {
-  display: grid;
-  grid-template-columns: repeat($desk-count, 1fr);
-  gap: 16px;
-  flex-shrink: 0;
-}
-
-// ---------------------------------------------------------------------------
-// Individual Desk
-// ---------------------------------------------------------------------------
-.scene__desk {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 180px;
-  background-color: $desk-surface;
-  border: 2px solid $desk-border;
-  border-radius: 12px;
-  padding: 12px;
-  transition: border-color 0.2s ease, background-color 0.2s ease;
-
-  &--occupied {
-    border-color: $dev-accent;
-    background-color: rgba(56, 189, 248, 0.06);
-    box-shadow: 0 0 12px rgba(56, 189, 248, 0.1);
-  }
-
-  &--empty {
-    border-style: dashed;
-  }
-}
-
-// Business side desk accent
-.scene__side--business .scene__desk--occupied {
-  border-color: $business-accent;
-  background-color: rgba(45, 212, 191, 0.06);
-  box-shadow: 0 0 12px rgba(45, 212, 191, 0.1);
-}
-
-.scene__desk-label {
-  position: absolute;
-  top: 6px;
-  left: 8px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: $scene-on-surface-variant;
-  opacity: 0.6;
-}
-
-// Empty desk placeholder
-.scene__desk-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  opacity: 0.4;
-  animation: emptyDeskPulse 3s ease-in-out infinite;
-}
-
-.scene__desk-empty-icon {
-  font-size: 32px;
-}
-
-.scene__desk-empty-text {
-  font-size: 12px;
-  color: $scene-on-surface-variant;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-// ---------------------------------------------------------------------------
-// Breakroom Area (bottom of each side)
-// ---------------------------------------------------------------------------
-.scene__breakroom {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px;
-  background-color: $breakroom-bg;
-  border: 1px solid $scene-outline;
-  border-radius: 12px;
-  min-height: 200px;
-
-  &--dev {
-    border-top: 2px solid rgba(56, 189, 248, 0.2);
-  }
-
-  &--business {
-    border-top: 2px solid rgba(45, 212, 191, 0.2);
-  }
-}
-
-.scene__breakroom-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.scene__breakroom-icon {
-  font-size: 20px;
-}
-
-.scene__breakroom-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: $scene-on-surface;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-// ---------------------------------------------------------------------------
-// Breakroom Furniture (emoji placeholders)
-// ---------------------------------------------------------------------------
-.scene__breakroom-furniture {
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.scene__furniture-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  background-color: rgba(255, 255, 255, 0.05);
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.scene__furniture-emoji {
-  font-size: 16px;
-}
-
-.scene__furniture-label {
-  font-size: 11px;
-  color: $scene-on-surface-variant;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-// ---------------------------------------------------------------------------
-// Breakroom Minions Container
-// ---------------------------------------------------------------------------
-.scene__breakroom-minions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: flex-end;
-  justify-content: center;
-  flex: 1;
-  min-height: 100px;
-  padding: 12px;
-  background-color: rgba(0, 0, 0, 0.15);
-  border-radius: 8px;
-  border: 1px dashed rgba(255, 255, 255, 0.06);
-}
-
-.scene__breakroom-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 24px;
-  color: $scene-on-surface-variant;
-  font-size: 14px;
-  font-style: italic;
-  opacity: 0.6;
-}
-
-// ---------------------------------------------------------------------------
-// Minion slide-in animation
-// ---------------------------------------------------------------------------
-.scene__breakroom-minions app-minion {
-  animation: slideInFromBottom 0.3s ease-out;
-}
-
-.scene__desks app-minion {
-  animation: slideInFromBottom 0.3s ease-out;
-}
-
-// ---------------------------------------------------------------------------
-// Touch optimization
-// ---------------------------------------------------------------------------
-.scene__desk {
-  min-width: 48px;
-  min-height: 48px;
-
-  // Ensure the desk area is touch-friendly
-  &:active {
-    transform: scale(0.98);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Responsive — Scale down on smaller viewports
-// ---------------------------------------------------------------------------
-@media (max-width: 1200px) {
-  .scene {
-    aspect-ratio: auto;
-    min-height: 800px;
-  }
-
-  .scene__side {
-    padding: 16px;
-    gap: 12px;
-  }
-
-  .scene__side-title {
-    font-size: 20px;
-  }
-
-  .scene__desks {
-    gap: 12px;
-  }
-
-  .scene__desk {
-    min-height: 140px;
-    padding: 8px;
-  }
-}
-
-@media (max-width: 900px) {
-  .scene {
-    // Switch to single column on mobile
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    aspect-ratio: auto;
-  }
-
-  .scene__divider {
-    display: none;
-  }
-
-  .scene__side {
-    &--dev {
-      grid-column: 1;
-    }
-
-    &--business {
-      grid-column: 1;
-    }
-  }
-
-  .scene__desks {
-    grid-template-columns: repeat($desk-count, 1fr);
-    gap: 8px;
-  }
-
-  .scene__desk {
-    min-height: 120px;
-  }
-}
-
-@media (max-width: 599px) {
-  .scene {
-    border-radius: 0;
-  }
-
-  .scene__side {
-    padding: 12px;
-    gap: 8px;
-  }
-
-  .scene__side-title {
-    font-size: 16px;
-  }
-
-  .scene__desk {
-    min-height: 100px;
-    padding: 6px;
-  }
-
-  .scene__breakroom {
-    padding: 12px;
-    min-height: 140px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Accessibility: Reduced Motion
-// ---------------------------------------------------------------------------
-@media (prefers-reduced-motion: reduce) {
-  .scene__divider-glow {
-    animation: none;
-  }
-
-  .scene__desk-empty {
-    animation: none;
-  }
-
-  .scene__breakroom-minions app-minion,
-  .scene__desks app-minion {
-    animation: none;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// High contrast mode
-// ---------------------------------------------------------------------------
-@media (prefers-contrast: high) {
-  .scene__desk {
-    border-width: 3px;
-  }
-
-  .scene__divider-line {
-    background: $dev-accent;
-    box-shadow: 0 0 16px $dev-accent;
-  }
-
-  .scene__desk-label {
-    opacity: 1;
-  }
-}

frontend/src/app/components/breakroom-scene/breakroom-scene.component.ts

@@ -1,115 +0,0 @@
-// ============================================================================
-// Breakroom Scene Component — 16-bit Office Scene Layout
-// Per CUB-61: Breakroom & Desk Scene Layout
-// ============================================================================
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  signal,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MinionComponent } from '../minion/minion.component';
-import { MinionStateService } from '../../services/minion-state.service';
-import { MinionData, MinionSide } from '../../models/minion.model';
-
-/**
- * Configuration for a desk slot in the scene.
- * Each desk has a fixed position index and assigned side.
- */
-interface DeskSlot {
-  side: MinionSide;
-  index: number;
-  /** Grid area identifier for CSS Grid placement */
-  gridArea: string;
-}
-
-/**
- * BreakroomSceneComponent renders the full 16-bit office layout:
- *
- * ┌─────────────────┬─────────────────┐
- * │   DEV SIDE       │  BUSINESS SIDE   │
- * │                  │                  │
- * │  [Desk 0] [Desk 2]│[Desk 0] [Desk 2]│
- * │  [Desk 1]        │[Desk 1]        │
- * │                  │                  │
- * │  🛋️ Breakroom   │  🛋️ Breakroom   │
- * │  📺 TV 🍌 Bowl  │  📺 TV 🍌 Bowl  │
- * └─────────────────┴─────────────────┘
- *
- * Minions are positioned at their assigned desk or in the breakroom
- * area based on their current state (idle → breakroom, working → desk).
- */
-@Component({
-  selector: 'app-breakroom-scene',
-  standalone: true,
-  imports: [CommonModule, MinionComponent],
-  templateUrl: './breakroom-scene.component.html',
-  styleUrl: './breakroom-scene.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BreakroomSceneComponent {
-  private readonly minionStateService = inject(MinionStateService);
-
-  /** All minion data from the state service */
-  readonly minions = this.minionStateService.minionList;
-
-  /** Dev-side minions (idle or in breakroom) */
-  readonly devBreakroomMinions = computed(() =>
-    this.minions().filter((m) => m.side === 'dev' && m.state === 'idle'),
-  );
-
-  /** Business-side minions (idle or in breakroom) */
-  readonly businessBreakroomMinions = computed(() =>
-    this.minions().filter((m) => m.side === 'business' && m.state === 'idle'),
-  );
-
-  /** Dev-side minions currently at desks (working or walking to desk) */
-  readonly devDeskMinions = computed(() =>
-    this.minions().filter(
-      (m) => m.side === 'dev' && (m.state === 'working' || m.state === 'walking'),
-    ),
-  );
-
-  /** Business-side minions currently at desks (working or walking to desk) */
-  readonly businessDeskMinions = computed(() =>
-    this.minions().filter(
-      (m) =>
-        m.side === 'business' &&
-        (m.state === 'working' || m.state === 'walking'),
-    ),
-  );
-
-  /** Dev-side minions returning to breakroom */
-  readonly devReturningMinions = computed(() =>
-    this.minions().filter((m) => m.side === 'dev' && m.state === 'returning'),
-  );
-
-  /** Business-side minions returning to breakroom */
-  readonly businessReturningMinions = computed(() =>
-    this.minions().filter(
-      (m) => m.side === 'business' && m.state === 'returning',
-    ),
-  );
-
-  /**
-   * Check if a desk slot is occupied.
-   * Returns the minion data if occupied, undefined if empty.
-   */
-  getDeskOccupant(side: MinionSide, deskIndex: number): MinionData | undefined {
-    return this.minions().find(
-      (m) =>
-        m.side === side &&
-        m.deskIndex === deskIndex &&
-        (m.state === 'working' || m.state === 'walking'),
-    );
-  }
-
-  /**
-   * Track minions by agent name for efficient @for rendering.
-   */
-  trackByAgentName(_index: number, minion: MinionData): string {
-    return minion.agentName;
-  }
-}

frontend/src/app/components/index.ts

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

frontend/src/app/components/minion/minion.component.html

@@ -1,120 +0,0 @@
-<!-- ============================================================================
-  Minion Component Template — 16-bit Breakroom Minion
-  Per CUB-60: Minion State & Animation System
-  ============================================================================ -->
-
-<div
-  class="minion"
-  [ngClass]="[stateClass(), sideClass()]"
-  [style.--desk-index]="deskPosition()"
-  [attr.aria-label]="displayLabel() + ' — ' + stateLabel()"
-  role="img"
->
-  <!-- Progress bar (only shown when working) -->
-  @if (showProgress()) {
-    <div class="minion__progress-bar">
-      <mat-progress-bar
-        mode="determinate"
-        [value]="currentProgress()"
-        [attr.aria-label]="'Task progress: ' + currentProgress() + '%'"
-      ></mat-progress-bar>
-    </div>
-  }
-
-  <!-- Name label above the minion -->
-  <div class="minion__label">{{ displayLabel() }}</div>
-
-  <!-- Minion sprite container -->
-  <div
-    class="minion__sprite"
-    (animationend)="onAnimationEnd($event)"
-  >
-    <!-- Idle state: banana-eating / TV-watching minion -->
-    @if (currentState() === 'idle') {
-      <div class="minion__character minion__character--idle">
-        <div class="minion__body">
-          <div class="minion__head">
-            <div class="minion__eye minion__eye--left"></div>
-            <div class="minion__eye minion__eye--right"></div>
-            <div class="minion__mouth minion__mouth--smile"></div>
-          </div>
-          <div class="minion__torso"></div>
-          <div class="minion__arm minion__arm--left minion__arm--eating"></div>
-          <div class="minion__arm minion__arm--right"></div>
-          <div class="minion__leg minion__leg--left"></div>
-          <div class="minion__leg minion__leg--right"></div>
-        </div>
-        <!-- Banana in hand -->
-        <div class="minion__banana minion__banana--idle"></div>
-      </div>
-    }
-
-    <!-- Walking state: minion walking to desk -->
-    @if (currentState() === 'walking') {
-      <div class="minion__character minion__character--walking">
-        <div class="minion__body">
-          <div class="minion__head">
-            <div class="minion__eye minion__eye--left"></div>
-            <div class="minion__eye minion__eye--right"></div>
-            <div class="minion__mouth minion__mouth--determined"></div>
-          </div>
-          <div class="minion__torso"></div>
-          <div class="minion__arm minion__arm--left minion__arm--swing"></div>
-          <div class="minion__arm minion__arm--right minion__arm--swing minion__arm--swing-alt"></div>
-          <div class="minion__leg minion__leg--left minion__leg--walk"></div>
-          <div class="minion__leg minion__leg--right minion__leg--walk minion__leg--walk-alt"></div>
-        </div>
-      </div>
-    }
-
-    <!-- Working state: minion at desk typing -->
-    @if (currentState() === 'working') {
-      <div class="minion__character minion__character--working">
-        <div class="minion__body">
-          <div class="minion__head">
-            <div class="minion__eye minion__eye--left minion__eye--focused"></div>
-            <div class="minion__eye minion__eye--right minion__eye--focused"></div>
-            <div class="minion__mouth minion__mouth--focused"></div>
-          </div>
-          <div class="minion__torso"></div>
-          <div class="minion__arm minion__arm--left minion__arm--typing"></div>
-          <div class="minion__arm minion__arm--right minion__arm--typing minion__arm--typing-alt"></div>
-        </div>
-        <!-- Laptop -->
-        <div class="minion__laptop">
-          <div class="minion__laptop-screen">
-            <div class="minion__laptop-code minion__laptop-code--1"></div>
-            <div class="minion__laptop-code minion__laptop-code--2"></div>
-            <div class="minion__laptop-code minion__laptop-code--3"></div>
-          </div>
-          <div class="minion__laptop-base"></div>
-        </div>
-      </div>
-    }
-
-    <!-- Returning state: minion walking back to breakroom -->
-    @if (currentState() === 'returning') {
-      <div class="minion__character minion__character--returning">
-        <div class="minion__body">
-          <div class="minion__head">
-            <div class="minion__eye minion__eye--left"></div>
-            <div class="minion__eye minion__eye--right"></div>
-            <div class="minion__mouth minion__mouth--happy"></div>
-          </div>
-          <div class="minion__torso"></div>
-          <div class="minion__arm minion__arm--left minion__arm--swing minion__arm--swing-alt"></div>
-          <div class="minion__arm minion__arm--right minion__arm--swing"></div>
-          <div class="minion__leg minion__leg--left minion__leg--walk minion__leg--walk-alt"></div>
-          <div class="minion__leg minion__leg--right minion__leg--walk"></div>
-        </div>
-        <!-- Banana (excited to be back!) -->
-        <div class="minion__banana minion__banana--carried"></div>
-      </div>
-    }
-  </div>
-
-  <!-- Task description (shown when working) -->
-  @if (currentState() === 'working' && currentTaskLabel()) {
-    <div class="minion__task-label">{{ currentTaskLabel() }}</div>
-  }
-</div>

frontend/src/app/components/minion/minion.component.scss

@@ -1,747 +0,0 @@
-// ============================================================================
-// Minion Component Styles — 16-bit Breakroom Animation System
-// Per CUB-60: Minion State & Animation System
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Pixel Art Scale & Dimensions
-// ---------------------------------------------------------------------------
-$pixel: 4px; // Base pixel unit for 16-bit aesthetic
-$minion-width: 48px;
-$minion-height: 64px;
-$head-size: 24px;
-$body-width: 32px;
-$body-height: 24px;
-$leg-width: 8px;
-$leg-height: 16px;
-$arm-width: 6px;
-$arm-height: 16px;
-
-// ---------------------------------------------------------------------------
-// Colors — Retro Palette
-// ---------------------------------------------------------------------------
-$minion-skin: #FFD93D;
-$minion-skin-shadow: #E6B800;
-$minion-overalls: #4169E1;
-$minion-overalls-shadow: #2E4FA0;
-$minion-goggle: #C0C0C0;
-$minion-goggle-strap: #333333;
-$minion-eye: #FFFFFF;
-$minion-pupil: #1A1A1A;
-$minion-mouth: #8B0000;
-$minion-banana: #FFE135;
-$minion-banana-shadow: #DAA520;
-$minion-laptop: #2D2D2D;
-$minion-laptop-screen: #0A1628;
-$minion-laptop-code: #38BDF8;
-
-$walk-duration: 2s;
-$type-duration: 0.4s;
-$eat-duration: 1.2s;
-$return-duration: 2s;
-
-// ---------------------------------------------------------------------------
-// Keyframe Animations
-// ---------------------------------------------------------------------------
-
-// Walking animation — bounce + translate right
-@keyframes minionWalkRight {
-  0% {
-    transform: translateX(0) translateY(0);
-  }
-  12.5% {
-    transform: translateX(12.5%) translateY(-3px);
-  }
-  25% {
-    transform: translateX(25%) translateY(0);
-  }
-  37.5% {
-    transform: translateX(37.5%) translateY(-3px);
-  }
-  50% {
-    transform: translateX(50%) translateY(0);
-  }
-  62.5% {
-    transform: translateX(62.5%) translateY(-3px);
-  }
-  75% {
-    transform: translateX(75%) translateY(0);
-  }
-  87.5% {
-    transform: translateX(87.5%) translateY(-3px);
-  }
-  100% {
-    transform: translateX(100%) translateY(0);
-  }
-}
-
-// Returning animation — bounce + translate left
-@keyframes minionWalkLeft {
-  0% {
-    transform: translateX(0) translateY(0);
-  }
-  12.5% {
-    transform: translateX(-12.5%) translateY(-3px);
-  }
-  25% {
-    transform: translateX(-25%) translateY(0);
-  }
-  37.5% {
-    transform: translateX(-37.5%) translateY(-3px);
-  }
-  50% {
-    transform: translateX(-50%) translateY(0);
-  }
-  62.5% {
-    transform: translateX(-62.5%) translateY(-3px);
-  }
-  75% {
-    transform: translateX(-75%) translateY(0);
-  }
-  87.5% {
-    transform: translateX(-87.5%) translateY(-3px);
-  }
-  100% {
-    transform: translateX(-100%) translateY(0);
-  }
-}
-
-// Typing animation — alternate arm bob
-@keyframes minionType {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-2px);
-  }
-}
-
-// Arm swing during walking
-@keyframes armSwing {
-  0%, 100% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(25deg);
-  }
-  75% {
-    transform: rotate(-25deg);
-  }
-}
-
-// Alternate arm swing (opposite phase)
-@keyframes armSwingAlt {
-  0%, 100% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(-25deg);
-  }
-  75% {
-    transform: rotate(25deg);
-  }
-}
-
-// Leg walk cycle
-@keyframes legWalk {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-4px);
-  }
-}
-
-// Alternate leg walk cycle
-@keyframes legWalkAlt {
-  0%, 100% {
-    transform: translateY(-4px);
-  }
-  50% {
-    transform: translateY(0);
-  }
-}
-
-// Banana eating — arm to mouth bob
-@keyframes bananaEat {
-  0%, 100% {
-    transform: rotate(-15deg) translateY(0);
-  }
-  50% {
-    transform: rotate(-15deg) translateY(-4px);
-  }
-}
-
-// Mouth chewing
-@keyframes mouthChew {
-  0%, 40%, 100% {
-    transform: scaleY(1);
-  }
-  20% {
-    transform: scaleY(0.6);
-  }
-}
-
-// Happy mouth (returning)
-@keyframes mouthHappy {
-  0%, 100% {
-    transform: scaleY(1);
-  }
-  50% {
-    transform: scaleY(1.15);
-  }
-}
-
-// Laptop code blink
-@keyframes codeBlink {
-  0%, 40%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.3;
-  }
-}
-
-// Determined face blink
-@keyframes eyeBlink {
-  0%, 90%, 100% {
-    transform: scaleY(1);
-  }
-  95% {
-    transform: scaleY(0.1);
-  }
-}
-
-// Idle float (subtle bounce)
-@keyframes idleFloat {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-2px);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Minion Root Container
-// ---------------------------------------------------------------------------
-.minion {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  width: 80px;
-  image-rendering: pixelated;
-}
-
-// ---------------------------------------------------------------------------
-// Progress Bar (above head)
-// ---------------------------------------------------------------------------
-.minion__progress-bar {
-  width: 60px;
-  margin-bottom: 4px;
-
-  .mat-mdc-progress-bar {
-    --mdc-linear-progress-active-indicator-color: var(--status-active);
-    --mdc-linear-progress-track-color: var(--cc-surface-container-high);
-    height: 4px;
-    border-radius: 2px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Name Label
-// ---------------------------------------------------------------------------
-.minion__label {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--cc-on-surface);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 2px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  max-width: 80px;
-  text-align: center;
-}
-
-// ---------------------------------------------------------------------------
-// Sprite Container
-// ---------------------------------------------------------------------------
-.minion__sprite {
-  position: relative;
-  width: $minion-width;
-  height: $minion-height;
-  overflow: visible;
-}
-
-// ---------------------------------------------------------------------------
-// Character Base
-// ---------------------------------------------------------------------------
-.minion__character {
-  position: absolute;
-  width: $minion-width;
-  height: $minion-height;
-}
-
-// ---------------------------------------------------------------------------
-// Idle State — Banana eating, gentle bounce
-// ---------------------------------------------------------------------------
-.minion__character--idle {
-  animation: idleFloat 3s ease-in-out infinite;
-
-  .minion__body {
-    animation: idleFloat 3s ease-in-out infinite;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Walking State — Move right to desk
-// ---------------------------------------------------------------------------
-.minion__character--walking {
-  animation: minionWalkRight $walk-duration ease-in-out forwards;
-}
-
-// ---------------------------------------------------------------------------
-// Working State — At desk, typing
-// ---------------------------------------------------------------------------
-.minion__character--working {
-  // No movement animation — static at desk
-}
-
-// ---------------------------------------------------------------------------
-// Returning State — Move left back to breakroom
-// ---------------------------------------------------------------------------
-.minion__character--returning {
-  animation: minionWalkLeft $return-duration ease-in-out forwards;
-}
-
-// ---------------------------------------------------------------------------
-// Body Parts — 16-bit Pixel Art
-// ---------------------------------------------------------------------------
-.minion__body {
-  position: relative;
-  width: $minion-width;
-  height: $minion-height;
-}
-
-// Head — yellow capsule with goggles
-.minion__head {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: $head-size;
-  height: $head-size;
-  background-color: $minion-skin;
-  border-radius: 50% 50% 40% 40%;
-  border: 2px solid $minion-skin-shadow;
-  overflow: hidden;
-  z-index: 2;
-
-  // Goggle strap
-  &::before {
-    content: '';
-    position: absolute;
-    top: 30%;
-    left: -2px;
-    right: -2px;
-    height: 10px;
-    background-color: $minion-goggle-strap;
-    border-radius: 2px;
-  }
-}
-
-// Eyes (inside goggle area)
-.minion__eye {
-  position: absolute;
-  top: 35%;
-  width: 8px;
-  height: 8px;
-  background-color: $minion-eye;
-  border-radius: 50%;
-  border: 1px solid #666;
-  z-index: 3;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 4px;
-    height: 4px;
-    background-color: $minion-pupil;
-    border-radius: 50%;
-  }
-
-  &--left {
-    left: 3px;
-  }
-
-  &--right {
-    right: 3px;
-  }
-
-  // Focused eyes (squint) for working state
-  &--focused {
-    height: 6px;
-    animation: eyeBlink 4s step-end infinite;
-  }
-}
-
-// Mouth expressions
-.minion__mouth {
-  position: absolute;
-  bottom: 4px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 8px;
-  height: 4px;
-  border-radius: 0 0 4px 4px;
-  z-index: 3;
-
-  &--smile {
-    background-color: $minion-mouth;
-    border-radius: 0 0 50% 50%;
-    animation: mouthChew $eat-duration ease-in-out infinite;
-  }
-
-  &--determined {
-    background-color: $minion-mouth;
-    width: 10px;
-    height: 3px;
-    border-radius: 0;
-  }
-
-  &--focused {
-    background-color: $minion-mouth;
-    width: 6px;
-    height: 3px;
-    border-radius: 0;
-  }
-
-  &--happy {
-    background-color: $minion-mouth;
-    width: 10px;
-    height: 5px;
-    border-radius: 0 0 50% 50%;
-    animation: mouthHappy 1.5s ease-in-out infinite;
-  }
-}
-
-// Torso / Overalls
-.minion__torso {
-  position: absolute;
-  top: $head-size - 4px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: $body-width;
-  height: $body-height;
-  background-color: $minion-overalls;
-  border: 2px solid $minion-overalls-shadow;
-  border-radius: 4px 4px 2px 2px;
-  z-index: 1;
-
-  // Overall strap left
-  &::before {
-    content: '';
-    position: absolute;
-    top: -4px;
-    left: 6px;
-    width: 3px;
-    height: 8px;
-    background-color: $minion-overalls;
-    border-radius: 1px;
-  }
-
-  // Overall strap right
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4px;
-    right: 6px;
-    width: 3px;
-    height: 8px;
-    background-color: $minion-overalls;
-    border-radius: 1px;
-  }
-}
-
-// Arms
-.minion__arm {
-  position: absolute;
-  top: $head-size;
-  width: $arm-width;
-  height: $arm-height;
-  background-color: $minion-skin;
-  border: 1px solid $minion-skin-shadow;
-  border-radius: 3px;
-  z-index: 0;
-  transform-origin: top center;
-
-  &--left {
-    left: 2px;
-  }
-
-  &--right {
-    right: 2px;
-  }
-
-  // Arm swing during walking
-  &--swing {
-    animation: armSwing $walk-duration * 0.5 ease-in-out infinite;
-  }
-
-  &--swing-alt {
-    animation: armSwingAlt $walk-duration * 0.5 ease-in-out infinite;
-  }
-
-  // Arm raised for eating banana
-  &--eating {
-    transform: rotate(-15deg);
-    animation: bananaEat $eat-duration ease-in-out infinite;
-  }
-
-  // Arms typing on laptop
-  &--typing {
-    transform: rotate(10deg) translateY(2px);
-
-    &.minion__arm--typing-alt {
-      transform: rotate(-10deg) translateY(2px);
-      animation: minionType $type-duration ease-in-out infinite;
-    }
-  }
-}
-
-// Legs
-.minion__leg {
-  position: absolute;
-  bottom: 0;
-  width: $leg-width;
-  height: $leg-height;
-  background-color: $minion-overalls;
-  border: 1px solid $minion-overalls-shadow;
-  border-radius: 2px 2px 3px 3px;
-  z-index: 0;
-
-  &--left {
-    left: calc(50% - #{$leg-width} - 2px);
-  }
-
-  &--right {
-    right: calc(50% - #{$leg-width} - 2px);
-  }
-
-  // Walking cycle
-  &--walk {
-    animation: legWalk $walk-duration * 0.25 ease-in-out infinite;
-
-    &.minion__leg--walk-alt {
-      animation: legWalkAlt $walk-duration * 0.25 ease-in-out infinite;
-    }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Banana
-// ---------------------------------------------------------------------------
-.minion__banana {
-  position: absolute;
-  width: 8px;
-  height: 5px;
-  z-index: 4;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 8px;
-    height: 5px;
-    background-color: $minion-banana;
-    border: 1px solid $minion-banana-shadow;
-    border-radius: 50% 50% 20% 20%;
-  }
-
-  // Banana in hand during idle
-  &--idle {
-    top: $head-size - 2px;
-    right: 0;
-  }
-
-  // Banana carried while returning
-  &--carried {
-    top: 8px;
-    left: -2px;
-    transform: rotate(20deg);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Laptop (working state)
-// ---------------------------------------------------------------------------
-.minion__laptop {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 40px;
-  z-index: 2;
-}
-
-.minion__laptop-screen {
-  width: 36px;
-  height: 20px;
-  background-color: $minion-laptop-screen;
-  border: 2px solid $minion-laptop;
-  border-radius: 3px 3px 0 0;
-  margin: 0 auto;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 2px;
-  padding: 3px;
-}
-
-.minion__laptop-code {
-  height: 2px;
-  background-color: $minion-laptop-code;
-  border-radius: 1px;
-  opacity: 0.8;
-
-  &--1 {
-    width: 80%;
-    animation: codeBlink 2s ease-in-out infinite;
-  }
-
-  &--2 {
-    width: 60%;
-    animation: codeBlink 2s ease-in-out infinite 0.3s;
-  }
-
-  &--3 {
-    width: 70%;
-    animation: codeBlink 2s ease-in-out infinite 0.6s;
-  }
-}
-
-.minion__laptop-base {
-  width: 40px;
-  height: 3px;
-  background-color: $minion-laptop;
-  border-radius: 0 0 2px 2px;
-  margin: 0 auto;
-}
-
-// ---------------------------------------------------------------------------
-// Task Label (below minion)
-// ---------------------------------------------------------------------------
-.minion__task-label {
-  font-size: 9px;
-  color: var(--cc-on-surface-variant);
-  text-align: center;
-  max-width: 80px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-top: 2px;
-  font-family: var(--cc-font-mono);
-}
-
-// ---------------------------------------------------------------------------
-// Side-specific adjustments
-// ---------------------------------------------------------------------------
-// Dev minions face right (walk right to desk)
-.minion--dev .minion__character--walking {
-  animation-name: minionWalkRight;
-}
-
-// Business minions face left (walk left to desk)
-.minion--business .minion__character--walking {
-  animation-name: minionWalkRight;
-  transform: scaleX(-1);
-}
-
-// Returning always walks back toward breakroom
-.minion--dev .minion__character--returning {
-  animation-name: minionWalkLeft;
-}
-
-.minion--business .minion__character--returning {
-  animation-name: minionWalkLeft;
-  transform: scaleX(-1);
-}
-
-// ---------------------------------------------------------------------------
-// Walking sprite shows walking animation
-// ---------------------------------------------------------------------------
-.minion--walking .minion__sprite {
-  animation: minionWalkRight $walk-duration ease-in-out forwards;
-}
-
-.minion--returning .minion__sprite {
-  animation: minionWalkLeft $return-duration ease-in-out forwards;
-}
-
-// ---------------------------------------------------------------------------
-// Accessibility: Reduced Motion
-// ---------------------------------------------------------------------------
-@media (prefers-reduced-motion: reduce) {
-  .minion__character--idle,
-  .minion__character--walking,
-  .minion__character--returning,
-  .minion--walking .minion__sprite,
-  .minion--returning .minion__sprite {
-    animation: none;
-  }
-
-  .minion__arm--swing,
-  .minion__arm--swing-alt,
-  .minion__arm--eating,
-  .minion__arm--typing.minion__arm--typing-alt,
-  .minion__leg--walk,
-  .minion__leg--walk-alt,
-  .minion__mouth--smile,
-  .minion__mouth--happy,
-  .minion__eye--focused,
-  .minion__laptop-code--1,
-  .minion__laptop-code--2,
-  .minion__laptop-code--3 {
-    animation: none;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Touch-friendly sizing
-// ---------------------------------------------------------------------------
-.minion {
-  min-width: 80px;
-  min-height: 100px;
-
-  // Ensure touch targets are at least 48px
-  .minion__sprite {
-    min-width: 48px;
-    min-height: 48px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Responsive: Smaller on mobile
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  $mobile-scale: 0.85;
-
-  .minion {
-    width: 68px;
-  }
-
-  .minion__sprite {
-    transform: scale($mobile-scale);
-    transform-origin: top center;
-  }
-
-  .minion__label {
-    font-size: 10px;
-  }
-}

frontend/src/app/components/minion/minion.component.ts

@@ -1,182 +0,0 @@
-// ============================================================================
-// Minion Component — 16-bit Breakroom Minion with State Animations
-// Per CUB-60: Minion State & Animation System
-// ============================================================================
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnDestroy,
-  OnInit,
-  input,
-  output,
-  signal,
-  computed,
-  effect,
-  inject,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MinionState, MinionSide } from '../../models/minion.model';
-import { MinionStateService } from '../../services/minion-state.service';
-
-/**
- * MinionComponent renders a single 16-bit minion character with four visual states:
- * - idle:      In breakroom — eating bananas, watching TV
- * - walking:   Moving from breakroom to desk (2s animation, then auto → working)
- * - working:   At desk — typing on laptop, progress bar overhead
- * - returning: Walking back to breakroom (2s animation, then auto → idle)
- *
- * The component reads its state from MinionStateService and emits events
- * when animations complete so the service can advance the state machine.
- */
-@Component({
-  selector: 'app-minion',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatIconModule,
-    MatProgressBarModule,
-    MatTooltipModule,
-  ],
-  templateUrl: './minion.component.html',
-  styleUrl: './minion.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MinionComponent implements OnInit, OnDestroy {
-  /** Agent name — used to look up state from MinionStateService */
-  readonly agentName = input.required<string>();
-
-  /** Which side of the office: dev or business */
-  readonly side = input<MinionSide>('dev');
-
-  /** Desk index on the assigned side (0-based) */
-  readonly deskIndex = input<number>(0);
-
-  /** Override state (for standalone demo use, otherwise read from service) */
-  readonly state = input<MinionState>('idle');
-
-  /** Override progress (for standalone demo use) */
-  readonly progress = input<number>(0);
-
-  /** Override display name (for standalone demo use) */
-  readonly displayName = input<string>('');
-
-  /** Override task description (for standalone demo use) */
-  readonly currentTask = input<string>('');
-
-  /** Emits when the walking animation completes */
-  readonly walkingComplete = output<string>();
-
-  /** Emits when the returning animation completes */
-  readonly returningComplete = output<string>();
-
-  private readonly minionStateService = inject(MinionStateService);
-
-  /** Track whether to use service data or input data */
-  private readonly useServiceData = signal(false);
-
-  /** Animation state — tracks which animation is active */
-  readonly animationState = signal<MinionState | 'none'>('none');
-
-  /** Computed: current state (from service if available, otherwise input) */
-  readonly currentState = computed<MinionState>(() => {
-    if (this.useServiceData()) {
-      const minion = this.minionStateService.getMinion(this.agentName());
-      return minion?.state ?? this.state();
-    }
-    return this.state();
-  });
-
-  /** Computed: current progress */
-  readonly currentProgress = computed(() => {
-    if (this.useServiceData()) {
-      const minion = this.minionStateService.getMinion(this.agentName());
-      return minion?.progress ?? this.progress();
-    }
-    return this.progress();
-  });
-
-  /** Computed: display name */
-  readonly displayLabel = computed(() => {
-    if (this.useServiceData()) {
-      const minion = this.minionStateService.getMinion(this.agentName());
-      return minion?.displayName ?? this.displayName() ?? this.agentName();
-    }
-    return this.displayName() || this.agentName();
-  });
-
-  /** Computed: current task */
-  readonly currentTaskLabel = computed(() => {
-    if (this.useServiceData()) {
-      const minion = this.minionStateService.getMinion(this.agentName());
-      return minion?.currentTask ?? this.currentTask() ?? '';
-    }
-    return this.currentTask();
-  });
-
-  /** Computed: CSS class based on current state */
-  readonly stateClass = computed(() => `minion--${this.currentState()}`);
-
-  /** Computed: whether to show the progress bar */
-  readonly showProgress = computed(() => this.currentState() === 'working' && this.currentProgress() > 0);
-
-  /** Computed: side class */
-  readonly sideClass = computed(() => `minion--${this.side()}`);
-
-  /** Computed: position style for desk assignment */
-  readonly deskPosition = computed(() => this.deskIndex());
-
-  /** Computed: human-readable state label */
-  readonly stateLabel = computed(() => {
-    const labels: Record<MinionState, string> = {
-      idle: 'On Break',
-      walking: 'Heading to Desk',
-      working: 'Working',
-      returning: 'Returning to Breakroom',
-    };
-    return labels[this.currentState()];
-  });
-
-  ngOnInit(): void {
-    // If the service has data for this agent, use it
-    const minion = this.minionStateService.getMinion(this.agentName());
-    if (minion) {
-      this.useServiceData.set(true);
-    }
-
-    // Sync animation state with current state
-    this.animationState.set(this.currentState());
-  }
-
-  /**
-   * Handle animation end events from CSS animations.
-   * Only fires for walking/returning which have finite durations.
-   */
-  onAnimationEnd(event: AnimationEvent): void {
-    const state = this.currentState();
-
-    if (state === 'walking' && event.animationName === 'minionWalkRight') {
-      this.walkingComplete.emit(this.agentName());
-      // Auto-transition walking → working via service
-      if (this.useServiceData()) {
-        this.minionStateService.onWalkingComplete(this.agentName());
-      }
-      this.animationState.set('working');
-    }
-
-    if (state === 'returning' && event.animationName === 'minionWalkLeft') {
-      this.returningComplete.emit(this.agentName());
-      // Auto-transition returning → idle via service
-      if (this.useServiceData()) {
-        this.minionStateService.onReturningComplete(this.agentName());
-      }
-      this.animationState.set('idle');
-    }
-  }
-
-  ngOnDestroy(): void {
-    // Cleanup handled by service if needed
-  }
-}

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/app/models/index.ts

@@ -1,3 +1,2 @@
 export * from './agent.model';
-export * from './minion.model';
 export * from './nav.model';

frontend/src/app/models/minion.model.ts

@@ -1,81 +0,0 @@
-// ============================================================================
-// Minion State & Animation Types
-// Per CUB-60: Minion State & Animation System
-// ============================================================================
-
-/**
- * The four minion states in the breakroom UI state machine.
- *
- * State transitions:
- *   idle → walking → working → returning → idle
- *
- * idle:     In breakroom — eating bananas, watching TV
- * walking:  Moving from breakroom to desk
- * working:  At desk — typing on laptop, progress bar overhead
- * returning: Walking back to breakroom after task completion
- */
-export type MinionState = 'idle' | 'walking' | 'working' | 'returning';
-
-/**
- * Which side of the office the minion belongs to.
- * Dev minions walk to dev desks, Business minions to business desks.
- */
-export type MinionSide = 'dev' | 'business';
-
-/**
- * Event types that trigger state transitions in the MinionStateService.
- */
-export type MinionEvent = 'spawn' | 'task_complete' | 'task_error' | 'reset';
-
-/**
- * Represents the full state of a single minion in the breakroom.
- */
-export interface MinionData {
-  /** Unique agent name, e.g., "otto", "rex" */
-  agentName: string;
-
-  /** Current minion state */
-  state: MinionState;
-
-  /** Task progress percentage (0–100), only meaningful when state === 'working' */
-  progress: number;
-
-  /** Which side of the office: dev or business */
-  side: MinionSide;
-
-  /** Desk index on the assigned side (0-based) */
-  deskIndex: number;
-
-  /** Display name for the minion, e.g., "Otto" */
-  displayName: string;
-
-  /** Current task description */
-  currentTask?: string;
-
-  /** Timestamp of last state transition */
-  lastTransition: Date;
-}
-
-/**
- * State machine transition map.
- * Defines valid transitions: current state → event → next state.
- */
-export const MINION_TRANSITIONS: Record<MinionState, Partial<Record<MinionEvent, MinionState>>> = {
-  idle: {
-    spawn: 'walking',
-  },
-  walking: {
-    // walking → working happens automatically via animation end
-    task_error: 'idle',
-    reset: 'idle',
-  },
-  working: {
-    task_complete: 'returning',
-    task_error: 'returning',
-    reset: 'idle',
-  },
-  returning: {
-    // returning → idle happens automatically via animation end
-    reset: 'idle',
-  },
-};

frontend/src/app/pages/breakroom/breakroom-page.component.html

@@ -1,76 +0,0 @@
-<!-- ============================================================================
-  Breakroom Page — Scene layout with demo controls
-  Per CUB-61: Uses BreakroomSceneComponent for the visual layout
-  ============================================================================ -->
-
-<div class="breakroom-page">
-  <!-- Scene layout (full width) -->
-  <app-breakroom-scene class="breakroom-page__scene" />
-
-  <!-- Control panel for testing (collapsible) -->
-  <section class="breakroom-page__controls">
-    <header class="breakroom-page__controls-header" (click)="controlsExpanded.set(!controlsExpanded())">
-      <h2 class="breakroom-page__controls-title">
-        <mat-icon>gamepad</mat-icon>
-        Controls
-      </h2>
-      <mat-icon>{{ controlsExpanded() ? 'expand_less' : 'expand_more' }}</mat-icon>
-    </header>
-
-    @if (controlsExpanded()) {
-      <p class="breakroom-page__controls-hint">
-        Spawn minions and control their state transitions
-      </p>
-
-      <div class="breakroom-page__button-grid">
-        @for (demo of demoMinions; track demo.agentName) {
-          <div class="breakroom-page__control-row">
-            <span class="breakroom-page__agent-name">{{ demo.displayName }}</span>
-            <span class="breakroom-page__agent-side" [class]="'breakroom-page__agent-side--' + demo.side">
-              {{ demo.side }}
-            </span>
-
-            @if (!isSpawned(demo.agentName)) {
-              <button mat-raised-button color="primary" (click)="spawnMinion(demo)">
-                <mat-icon>play_arrow</mat-icon>
-                Spawn
-              </button>
-            } @else {
-              <span class="breakroom-page__state-chip">{{ getStateLabel(demo.agentName) }}</span>
-
-              <button mat-stroked-button
-                [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
-                (click)="completeTask(demo.agentName)">
-                <mat-icon>check_circle</mat-icon>
-                Complete
-              </button>
-
-              <button mat-stroked-button
-                [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
-                (click)="taskError(demo.agentName)">
-                <mat-icon>error</mat-icon>
-                Error
-              </button>
-
-              <button mat-stroked-button
-                [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
-                (click)="bumpProgress(demo.agentName)">
-                <mat-icon>trending_up</mat-icon>
-                +15%
-              </button>
-
-              <button mat-stroked-button color="warn" (click)="resetMinion(demo.agentName)">
-                <mat-icon>replay</mat-icon>
-                Reset
-              </button>
-
-              <button mat-icon-button color="warn" (click)="removeMinion(demo.agentName)">
-                <mat-icon>close</mat-icon>
-              </button>
-            }
-          </div>
-        }
-      </div>
-    }
-  </section>
-</div>

frontend/src/app/pages/breakroom/breakroom-page.component.scss

@@ -1,159 +0,0 @@
-// ============================================================================
-// Breakroom Page Styles
-// Per CUB-61: Updated for scene-based layout with collapsible controls
-// ============================================================================
-
-.breakroom-page {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: var(--cc-section-padding, 24px);
-  min-height: 100%;
-}
-
-// ---------------------------------------------------------------------------
-// Scene container
-// ---------------------------------------------------------------------------
-.breakroom-page__scene {
-  width: 100%;
-  border-radius: var(--cc-card-border-radius, 16px);
-  overflow: hidden;
-  box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.3),
-    0 4px 16px rgba(0, 0, 0, 0.2);
-}
-
-// ---------------------------------------------------------------------------
-// Controls section (collapsible)
-// ---------------------------------------------------------------------------
-.breakroom-page__controls {
-  background-color: var(--cc-surface-container);
-  border-radius: var(--cc-card-border-radius, 16px);
-  padding: var(--cc-card-padding, 20px);
-}
-
-.breakroom-page__controls-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  user-select: none;
-  padding: 4px 0;
-
-  &:hover {
-    opacity: 0.9;
-  }
-}
-
-.breakroom-page__controls-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--cc-on-surface);
-
-  .mat-icon {
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
-  }
-}
-
-.breakroom-page__controls-hint {
-  font-size: 13px;
-  color: var(--cc-on-surface-variant);
-  margin: 0 0 16px;
-}
-
-// ---------------------------------------------------------------------------
-// Button Grid
-// ---------------------------------------------------------------------------
-.breakroom-page__button-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.breakroom-page__control-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  padding: 8px 12px;
-  background-color: var(--cc-surface);
-  border-radius: 8px;
-  min-height: 48px;
-}
-
-.breakroom-page__agent-name {
-  font-weight: 600;
-  font-size: 14px;
-  min-width: 60px;
-  color: var(--cc-on-surface);
-}
-
-.breakroom-page__agent-side {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 2px 8px;
-  border-radius: 10px;
-  color: #fff;
-
-  &--dev {
-    background-color: rgba(56, 189, 248, 0.25);
-    color: #38BDF8;
-  }
-
-  &--business {
-    background-color: rgba(45, 212, 191, 0.25);
-    color: #2DD4BF;
-  }
-}
-
-.breakroom-page__state-chip {
-  font-size: 12px;
-  font-family: var(--cc-font-mono);
-  padding: 4px 10px;
-  border-radius: 12px;
-  background-color: var(--cc-surface-container-high);
-  color: var(--cc-on-surface-variant);
-  border: 1px solid var(--cc-outline);
-}
-
-// Button sizing for touch
-.breakroom-page__control-row .mat-mdc-raised-button,
-.breakroom-page__control-row .mat-mdc-outlined-button {
-  min-height: 40px;
-  min-width: 48px;
-  font-size: 13px;
-
-  .mat-icon {
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-    margin-right: 4px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Responsive
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  .breakroom-page {
-    padding: 12px;
-    gap: 12px;
-  }
-
-  .breakroom-page__control-row {
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .breakroom-page__agent-name {
-    min-width: 50px;
-  }
-}

frontend/src/app/pages/breakroom/breakroom-page.component.ts

@@ -1,105 +0,0 @@
-// ============================================================================
-// Breakroom Page — Hosts the BreakroomSceneComponent with demo controls
-// Per CUB-61: Updated to use scene layout with integrated controls
-// ============================================================================
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatChipsModule } from '@angular/material/chips';
-import { BreakroomSceneComponent } from '../../components/breakroom-scene/breakroom-scene.component';
-import { MinionStateService } from '../../services/minion-state.service';
-
-interface DemoMinion {
-  agentName: string;
-  displayName: string;
-  side: 'dev' | 'business';
-  deskIndex: number;
-}
-
-@Component({
-  selector: 'app-breakroom-page',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatIconModule,
-    MatChipsModule,
-    BreakroomSceneComponent,
-  ],
-  templateUrl: './breakroom-page.component.html',
-  styleUrl: './breakroom-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BreakroomPageComponent {
-  protected readonly minionStateService = inject(MinionStateService);
-
-  /** Whether the controls panel is expanded */
-  readonly controlsExpanded = signal(true);
-
-  /** Predefined demo minions */
-  readonly demoMinions: DemoMinion[] = [
-    { agentName: 'otto', displayName: 'Otto', side: 'dev', deskIndex: 0 },
-    { agentName: 'rex', displayName: 'Rex', side: 'dev', deskIndex: 1 },
-    { agentName: 'dex', displayName: 'Dex', side: 'dev', deskIndex: 2 },
-    { agentName: 'hex', displayName: 'Hex', side: 'business', deskIndex: 0 },
-    { agentName: 'pip', displayName: 'Pip', side: 'business', deskIndex: 1 },
-    { agentName: 'nano', displayName: 'Nano', side: 'business', deskIndex: 2 },
-    { agentName: 'sketch', displayName: 'Sketch', side: 'dev', deskIndex: 3 },
-    { agentName: 'flip', displayName: 'Flip', side: 'business', deskIndex: 3 },
-  ];
-
-  /** All minions currently in the state service */
-  readonly minions = this.minionStateService.minionList;
-
-  /** Spawn a demo minion (idle → walking → working) */
-  spawnMinion(demo: DemoMinion): void {
-    this.minionStateService.spawn(demo.agentName, demo.displayName, demo.side, demo.deskIndex);
-  }
-
-  /** Complete a minion's task (working → returning → idle) */
-  completeTask(agentName: string): void {
-    this.minionStateService.completeTask(agentName);
-  }
-
-  /** Simulate a task error (working → returning → idle) */
-  taskError(agentName: string): void {
-    this.minionStateService.taskError(agentName);
-  }
-
-  /** Reset a minion to idle */
-  resetMinion(agentName: string): void {
-    this.minionStateService.resetMinion(agentName);
-  }
-
-  /** Remove a minion entirely */
-  removeMinion(agentName: string): void {
-    this.minionStateService.removeMinion(agentName);
-  }
-
-  /** Update progress (simulate for testing) */
-  bumpProgress(agentName: string): void {
-    const minion = this.minionStateService.getMinion(agentName);
-    if (minion) {
-      this.minionStateService.updateProgress(agentName, Math.min(100, minion.progress + 15));
-    }
-  }
-
-  /** Get state label for a minion */
-  getStateLabel(agentName: string): string {
-    const minion = this.minionStateService.getMinion(agentName);
-    if (!minion) return '—';
-    const labels: Record<string, string> = {
-      idle: '🍌 Idle',
-      walking: '🚶 Walking',
-      working: '💻 Working',
-      returning: '🔙 Returning',
-    };
-    return labels[minion.state] ?? minion.state;
-  }
-
-  /** Check if a minion is spawned */
-  isSpawned(agentName: string): boolean {
-    return !!this.minionStateService.getMinion(agentName);
-  }
-}

frontend/src/app/pages/hub/hub-page.component.scss

@@ -0,0 +1,28 @@
+// ============================================================================
+// Hub Page — Responsive AgentCard Grid
+// Desktop (≥1024px): 2×2 grid
+// Mobile (<1024px): single-column stack
+// ============================================================================
+
+.hub-page {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: var(--cc-section-padding, 16px);
+  min-height: 400px;
+  overflow-x: hidden;
+}
+
+.hub-page__placeholder {
+  color: var(--cc-on-surface-variant);
+  font-size: 16px;
+  text-align: center;
+  padding: 24px 0;
+}
+
+// Desktop / kiosk breakpoint — 2-column grid
+@media (min-width: 1024px) {
+  .hub-page {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

frontend/src/app/pages/hub/hub-page.component.ts

@@ -9,18 +9,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       <p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
     </div>
   `,
-  styles: [`
-    .hub-page {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 400px;
-    }
-    .hub-page__placeholder {
-      color: var(--cc-on-surface-variant);
-      font-size: 16px;
-    }
-  `],
+  styleUrl: './hub-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HubPageComponent {}

frontend/src/app/services/minion-state.service.ts

@@ -1,213 +0,0 @@
-// ============================================================================
-// Minion State Service
-// Per CUB-60: State machine managing minion transitions
-// idle → walking → working → returning → idle
-// ============================================================================
-import { Injectable, signal, computed } from '@angular/core';
-import {
-  MinionData,
-  MinionEvent,
-  MinionState,
-  MINION_TRANSITIONS,
-} from '../models/minion.model';
-
-/**
- * Manages the state machine for all minions in the breakroom.
- *
- * Each minion follows: idle → walking → working → returning → idle
- * Transitions are triggered by events (spawn, task_complete, task_error, reset)
- * or automatically when walking/returning animations complete.
- *
- * Usage:
- *   service.spawn('otto', 'Otto', 'dev', 0);          // idle → walking → working
- *   service.completeTask('otto');                        // working → returning → idle
- *   service.dispatch('otto', 'reset');                   // any → idle
- */
-@Injectable({ providedIn: 'root' })
-export class MinionStateService {
-  /** Internal map of agent name → minion data */
-  private readonly _minions = signal<Map<string, MinionData>>(new Map());
-
-  /** Readonly map of all minions */
-  readonly minions = this._minions.asReadonly();
-
-  /** Computed array of minions sorted by desk position */
-  readonly minionList = computed(() => {
-    const map = this._minions();
-    return Array.from(map.values()).sort((a, b) => {
-      if (a.side !== b.side) return a.side.localeCompare(b.side);
-      return a.deskIndex - b.deskIndex;
-    });
-  });
-
-  /** Get a single minion by agent name */
-  getMinion(agentName: string): MinionData | undefined {
-    return this._minions().get(agentName);
-  }
-
-  /**
-   * Spawn a minion: creates entry in 'idle' state, then immediately
-   * transitions to 'walking' (which auto-transitions to 'working').
-   */
-  spawn(agentName: string, displayName: string, side: 'dev' | 'business', deskIndex: number): void {
-    const minion: MinionData = {
-      agentName,
-      displayName,
-      state: 'idle',
-      progress: 0,
-      side,
-      deskIndex,
-      lastTransition: new Date(),
-    };
-    this._minions.update(map => {
-      const next = new Map(map);
-      next.set(agentName, minion);
-      return next;
-    });
-    // Immediately transition idle → walking
-    this.dispatch(agentName, 'spawn');
-  }
-
-  /**
-   * Dispatch an event to transition a minion's state.
-   * Follows the MINION_TRANSITIONS map. Invalid transitions are ignored.
-   */
-  dispatch(agentName: string, event: MinionEvent): void {
-    this._minions.update(map => {
-      const minion = map.get(agentName);
-      if (!minion) return map;
-
-      const validTransitions = MINION_TRANSITIONS[minion.state];
-      const nextState = validTransitions[event];
-      if (!nextState) return map; // Invalid transition — ignore
-
-      const updated: MinionData = {
-        ...minion,
-        state: nextState,
-        lastTransition: new Date(),
-      };
-
-      const next = new Map(map);
-      next.set(agentName, updated);
-      return next;
-    });
-  }
-
-  /**
-   * Complete a task: transitions working → returning.
-   * After returning animation, the minion auto-transitions to idle.
-   */
-  completeTask(agentName: string): void {
-    this.dispatch(agentName, 'task_complete');
-  }
-
-  /**
-   * Report a task error: transitions working → returning (same visual, different reason).
-   * After returning animation, the minion auto-transitions to idle.
-   */
-  taskError(agentName: string): void {
-    this.dispatch(agentName, 'task_error');
-  }
-
-  /**
-   * Called by the MinionComponent when the walking animation completes.
-   * Transitions walking → working and sets initial progress to 0.
-   */
-  onWalkingComplete(agentName: string): void {
-    this._minions.update(map => {
-      const minion = map.get(agentName);
-      if (!minion || minion.state !== 'walking') return map;
-
-      const updated: MinionData = {
-        ...minion,
-        state: 'working',
-        progress: 0,
-        lastTransition: new Date(),
-      };
-
-      const next = new Map(map);
-      next.set(agentName, updated);
-      return next;
-    });
-  }
-
-  /**
-   * Called by the MinionComponent when the returning animation completes.
-   * Transitions returning → idle.
-   */
-  onReturningComplete(agentName: string): void {
-    this._minions.update(map => {
-      const minion = map.get(agentName);
-      if (!minion || minion.state !== 'returning') return map;
-
-      const updated: MinionData = {
-        ...minion,
-        state: 'idle',
-        progress: 0,
-        currentTask: undefined,
-        lastTransition: new Date(),
-      };
-
-      const next = new Map(map);
-      next.set(agentName, updated);
-      return next;
-    });
-  }
-
-  /**
-   * Update task progress for a working minion.
-   */
-  updateProgress(agentName: string, progress: number): void {
-    this._minions.update(map => {
-      const minion = map.get(agentName);
-      if (!minion || minion.state !== 'working') return map;
-
-      const updated: MinionData = {
-        ...minion,
-        progress: Math.min(100, Math.max(0, progress)),
-        lastTransition: new Date(),
-      };
-
-      const next = new Map(map);
-      next.set(agentName, updated);
-      return next;
-    });
-  }
-
-  /**
-   * Update the current task description for a minion.
-   */
-  updateTask(agentName: string, taskDescription: string): void {
-    this._minions.update(map => {
-      const minion = map.get(agentName);
-      if (!minion) return map;
-
-      const updated: MinionData = {
-        ...minion,
-        currentTask: taskDescription,
-      };
-
-      const next = new Map(map);
-      next.set(agentName, updated);
-      return next;
-    });
-  }
-
-  /**
-   * Remove a minion entirely from the state map.
-   */
-  removeMinion(agentName: string): void {
-    this._minions.update(map => {
-      const next = new Map(map);
-      next.delete(agentName);
-      return next;
-    });
-  }
-
-  /**
-   * Reset a minion back to idle state.
-   */
-  resetMinion(agentName: string): void {
-    this.dispatch(agentName, 'reset');
-  }
-}

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;