CUB-60: implement minion state machine and animation system

- Add MinionState type and MinionData model with four states (idle, walking, working, returning)
- Add MinionStateService with full state machine: spawn → walking → working → returning → idle
- Create MinionComponent with 16-bit pixel art CSS animations:
  - idle: banana-eating loop animation with gentle float
  - walking: 2s translate-right walk cycle with arm/leg swing
  - working: typing keyframe animation with laptop and progress bar
  - returning: 2s translate-left walk-back animation
- Add MinionState transition map with event-driven dispatch
- Create BreakroomPage demo with spawn/complete/error/reset controls
- Add /breakroom route for testing state transitions
- Touch-optimized: 48px min targets, responsive scaling
- Full reduced-motion accessibility support
- TypeScript strict: no any, all inputs typed

backend/.gitignore

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

backend/Configurations/AgentConfiguration.cs

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

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

backend/ControlCenter.Api.http

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

backend/ControlCenter/.gitignore

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

backend/ControlCenter/ControlCenter.csproj

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

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

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

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

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

backend/ControlCenter/Hubs/IAgentStatusClient.cs

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

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

backend/ControlCenter/Program.cs

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

backend/ControlCenter/Properties/launchSettings.json

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

backend/ControlCenter/Services/GatewayEventBridgeService.cs

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

@@ -1,19 +0,0 @@
-{
-  "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

@@ -1,22 +0,0 @@
-{
-  "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

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

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

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

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

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

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

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

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

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

backend/Program.cs

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

backend/Properties/launchSettings.json

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

backend/appsettings.Development.json

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

backend/appsettings.json

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

frontend/src/app/app.routes.ts

@@ -5,6 +5,7 @@ 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 = [
   {
@@ -17,6 +18,7 @@ export const routes: Routes = [
       { path: 'sessions', component: SessionsPageComponent },
       { path: 'logs', component: LogsPageComponent },
       { path: 'settings', component: SettingsPageComponent },
+      { path: 'breakroom', component: BreakroomPageComponent },
     ],
   },
 ];

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

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

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

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

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

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

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

@@ -1,109 +0,0 @@
-// ============================================================================
-// 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,2 +1,3 @@
 export * from './agent.model';
+export * from './minion.model';
 export * from './nav.model';

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

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

@@ -0,0 +1,136 @@
+<!-- ============================================================================
+  Breakroom Page — Demo/Test for Minion State & Animation
+  Per CUB-60: Validation page with spawn/transition/reset controls
+  ============================================================================ -->
+<div class="breakroom">
+  <!-- Breakroom area (idle minions) -->
+  <section class="breakroom__zone breakroom__zone--breakroom">
+    <h2 class="breakroom__zone-title">
+      <mat-icon>weekend</mat-icon>
+      Breakroom
+    </h2>
+    <div class="breakroom__minions breakroom__minions--idle">
+      @for (minion of minions(); track minion.agentName) {
+        @if (minion.state === 'idle') {
+          <app-minion
+            [agentName]="minion.agentName"
+            [side]="minion.side"
+            [deskIndex]="minion.deskIndex"
+            [state]="minion.state"
+            [progress]="minion.progress"
+            [displayName]="minion.displayName"
+          />
+        }
+      }
+    </div>
+  </section>
+
+  <!-- Office area (working desks) -->
+  <section class="breakroom__zone breakroom__zone--office">
+    <div class="breakroom__office-header">
+      <h2 class="breakroom__zone-title">
+        <mat-icon>computer</mat-icon>
+        Office
+      </h2>
+    </div>
+
+    <!-- Dev side -->
+    <div class="breakroom__desk-row">
+      <h3 class="breakroom__desk-label">Dev Desks</h3>
+      <div class="breakroom__desks">
+        @for (minion of minions(); track minion.agentName) {
+          @if (minion.side === 'dev' && (minion.state === 'working' || minion.state === 'walking')) {
+            <div class="breakroom__desk" [style.--desk-index]="minion.deskIndex">
+              <app-minion
+                [agentName]="minion.agentName"
+                [side]="minion.side"
+                [deskIndex]="minion.deskIndex"
+                [state]="minion.state"
+                [progress]="minion.progress"
+                [displayName]="minion.displayName"
+                [currentTask]="minion.currentTask ?? ''"
+              />
+            </div>
+          }
+        }
+      </div>
+    </div>
+
+    <!-- Business side -->
+    <div class="breakroom__desk-row">
+      <h3 class="breakroom__desk-label">Business Desks</h3>
+      <div class="breakroom__desks">
+        @for (minion of minions(); track minion.agentName) {
+          @if (minion.side === 'business' && (minion.state === 'working' || minion.state === 'walking')) {
+            <div class="breakroom__desk" [style.--desk-index]="minion.deskIndex">
+              <app-minion
+                [agentName]="minion.agentName"
+                [side]="minion.side"
+                [deskIndex]="minion.deskIndex"
+                [state]="minion.state"
+                [progress]="minion.progress"
+                [displayName]="minion.displayName"
+              />
+            </div>
+          }
+        }
+      </div>
+    </div>
+  </section>
+
+  <!-- Control panel for testing -->
+  <section class="breakroom__controls">
+    <h2 class="breakroom__zone-title">
+      <mat-icon>gamepad</mat-icon>
+      Controls
+    </h2>
+    <p class="breakroom__controls-hint">Spawn minions and control their state transitions</p>
+
+    <div class="breakroom__button-grid">
+      @for (demo of demoMinions; track demo.agentName) {
+        <div class="breakroom__control-row">
+          <span class="breakroom__agent-name">{{ demo.displayName }}</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__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

@@ -0,0 +1,209 @@
+// ============================================================================
+// Breakroom Page Styles
+// Per CUB-60: Demo/test page for minion state & animation
+// ============================================================================
+
+.breakroom {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: var(--cc-section-padding, 24px);
+  min-height: 100%;
+}
+
+// ---------------------------------------------------------------------------
+// Zone (breakroom or office area)
+// ---------------------------------------------------------------------------
+.breakroom__zone {
+  background-color: var(--cc-surface-container);
+  border-radius: var(--cc-card-border-radius, 16px);
+  padding: var(--cc-card-padding, 20px);
+}
+
+.breakroom__zone-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 16px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--cc-on-surface);
+
+  .mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Breakroom zone (idle minions)
+// ---------------------------------------------------------------------------
+.breakroom__zone--breakroom {
+  background: linear-gradient(
+    135deg,
+    var(--cc-surface-container) 0%,
+    rgba(45, 212, 191, 0.06) 100%
+  );
+  min-height: 120px;
+}
+
+.breakroom__minions--idle {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+  min-height: 80px;
+  align-items: flex-end;
+
+  &:empty::after {
+    content: 'No minions on break 🍌';
+    color: var(--cc-on-surface-variant);
+    font-size: 14px;
+    text-align: center;
+    padding: 20px;
+    display: block;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Office zone (working minions)
+// ---------------------------------------------------------------------------
+.breakroom__zone--office {
+  background: linear-gradient(
+    135deg,
+    var(--cc-surface-container) 0%,
+    rgba(56, 189, 248, 0.06) 100%
+  );
+}
+
+.breakroom__desk-row {
+  margin-bottom: 16px;
+}
+
+.breakroom__desk-label {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cc-on-surface-variant);
+  margin: 0 0 8px;
+}
+
+.breakroom__desks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  min-height: 100px;
+  padding: 12px;
+  border: 2px dashed var(--cc-outline);
+  border-radius: 12px;
+  background-color: rgba(0, 0, 0, 0.1);
+  align-items: flex-end;
+
+  &:empty::after {
+    content: 'No minions at their desks 💻';
+    color: var(--cc-on-surface-variant);
+    font-size: 14px;
+    text-align: center;
+    padding: 20px;
+    display: block;
+    width: 100%;
+  }
+}
+
+.breakroom__desk {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 90px;
+  min-height: 110px;
+  background-color: var(--cc-surface-container-high);
+  border-radius: 8px;
+  padding: 8px 4px 4px;
+  border: 1px solid var(--cc-outline);
+}
+
+// ---------------------------------------------------------------------------
+// Controls section
+// ---------------------------------------------------------------------------
+.breakroom__controls {
+  background-color: var(--cc-surface-container);
+  border-radius: var(--cc-card-border-radius, 16px);
+  padding: var(--cc-card-padding, 20px);
+}
+
+.breakroom__controls-hint {
+  font-size: 13px;
+  color: var(--cc-on-surface-variant);
+  margin: 0 0 16px;
+}
+
+.breakroom__button-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.breakroom__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__agent-name {
+  font-weight: 600;
+  font-size: 14px;
+  min-width: 60px;
+  color: var(--cc-on-surface);
+}
+
+.breakroom__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__control-row .mat-mdc-raised-button,
+.breakroom__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 {
+    padding: 16px;
+    gap: 16px;
+  }
+
+  .breakroom__control-row {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .breakroom__agent-name {
+    min-width: 50px;
+  }
+}

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

@@ -0,0 +1,102 @@
+// ============================================================================
+// Breakroom Page — Demo/Test Page for Minion State & Animation
+// Per CUB-60: Validation page with spawn/transition/reset controls
+// ============================================================================
+import { ChangeDetectionStrategy, Component, inject } 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 { MinionComponent } from '../../components/minion/minion.component';
+import { MinionStateService } from '../../services/minion-state.service';
+import { MinionData } from '../../models/minion.model';
+
+interface DemoMinion {
+  agentName: string;
+  displayName: string;
+  side: 'dev' | 'business';
+  deskIndex: number;
+}
+
+@Component({
+  selector: 'app-breakroom-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatChipsModule,
+    MinionComponent,
+  ],
+  templateUrl: './breakroom-page.component.html',
+  styleUrl: './breakroom-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreakroomPageComponent {
+  protected readonly minionStateService = inject(MinionStateService);
+
+  /** 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: 'dev', deskIndex: 3 },
+    { agentName: 'pip', displayName: 'Pip', side: 'business', deskIndex: 0 },
+    { agentName: 'nano', displayName: 'Nano', side: 'business', deskIndex: 1 },
+    { agentName: 'flip', displayName: 'Flip', side: 'business', deskIndex: 2 },
+  ];
+
+  /** 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/services/minion-state.service.ts

@@ -0,0 +1,213 @@
+// ============================================================================
+// 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');
+  }
+}