ci: simplify dev pipeline to build-test only (api-client has TS errors, remove for now)

Reviewed-on: #14
Reviewed-by: Otto the Minion <otto@code.cubecraftcreations.com>
Reviewed-by: Joshua <joshua@cnjmail.com>

.gitea/workflows/dev.yml

@@ -0,0 +1,44 @@
+name: Dev Build
+
+on:
+  pull_request:
+    branches: [dev]
+  push:
+    branches: [dev]
+
+jobs:
+  build-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: '9.0.x'
+
+      - name: Restore backend
+        run: dotnet restore
+        working-directory: ./backend
+
+      - name: Build backend
+        run: dotnet build --no-restore --configuration Release
+        working-directory: ./backend
+
+      - name: Test backend
+        run: dotnet test --no-build --configuration Release
+        working-directory: ./backend
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+
+      - name: Install frontend deps
+        run: npm ci
+        working-directory: ./frontend
+
+      - name: Build frontend
+        run: npm run build
+        working-directory: ./frontend

README.md

@@ -0,0 +1,223 @@
+# Control Center
+
+> Real-time agent fleet dashboard for the OpenClaw AI development team.
+
+Control Center monitors and controls the full CubeCraft Creations AI agent fleet — Otto, Rex, Dex, Hex, Pip, Nano, Sketch, Bob, Stuart, Norbert, and Flip. It provides live agent status, task progress, session logs, and a command interface, backed by SignalR for push-based updates directly from the OpenClaw gateway.
+
+---
+
+## Tech Stack
+
+| Layer | Technology |
+|---|---|
+| Backend | ASP.NET Core Web API (.NET 8) |
+| Database | PostgreSQL (snake_case via EF Core) |
+| ORM | Entity Framework Core |
+| Real-time | SignalR (`AgentStatusHub`) |
+| Frontend | Angular (latest), Angular Material, Angular Signals |
+| API Client | TypeScript package (`api-client/`) |
+| Deployment | Docker |
+
+---
+
+## Project Structure
+
+```
+Control-Center/
+├── backend/
+│   ├── ControlCenter/
+│   │   ├── Controllers/            # AgentsController, CommandController, LogsController
+│   │   ├── Hubs/                   # AgentStatusHub, IAgentStatusClient, AgentStatusModels
+│   │   ├── Models/                 # AgentMinionMapping
+│   │   ├── Services/               # AgentMinionMapperService, GatewayEventBridgeService
+│   │   ├── Program.cs
+│   │   └── appsettings.json
+│   ├── Configurations/             # AgentConfiguration
+│   ├── Data/                       # AppDbContext, AppDbContextFactory
+│   ├── Dtos/                       # AgentStatusUpdateDto
+│   ├── Entities/                   # Agent, AgentStatus
+│   ├── Migrations/                 # EF migrations
+│   ├── Models/                     # AgentState
+│   └── Repositories/               # AgentStateRepository, IAgentStateRepository
+├── frontend/
+│   └── src/app/
+│       ├── layout/                 # LayoutShell, HeaderBar, NavRail, BottomNav
+│       ├── pages/                  # hub, logs, projects, sessions, settings
+│       ├── components/             # AgentCard, AgentStatusBadge, TaskProgressBar,
+│       │                           #   QuickJumpButton, QuickJumpDrawer,
+│       │                           #   GlobalActionModal, AdaptiveNavigation
+│       ├── command-hub/            # AgentCard command hub view
+│       ├── models/                 # Agent model, AgentStatus, AgentCardData, Nav
+│       └── services/               # AgentStatusService (Angular Signals)
+├── api-client/                     # Shared TS client (models, SignalR WS, HTTP utils)
+├── design/
+│   ├── command-hub-spec.md
+│   └── mockups/                    # Desktop kiosk, mobile, quick-jump drawer
+└── README.md
+```
+
+---
+
+## Domain Model
+
+### Agent
+
+| Field | Type | Description |
+|---|---|---|
+| `Id` | `Guid` | Primary key |
+| `Status` | `AgentStatus` | Current agent state |
+| `Task` | `string?` | Active task description |
+| `Progress` | `int?` | Task completion % (0–100) |
+| `SessionKey` | `string` | OpenClaw session identifier |
+| `Channel` | `string` | Source channel (telegram, slack, etc.) |
+| `LastActivity` | `DateTime` | Last event timestamp |
+| `CreatedAt` / `UpdatedAt` | `DateTime` | Audit fields |
+
+### AgentStatus enum
+
+| Value | Integer | Meaning |
+|---|---|---|
+| `Active` | 0 | Agent is executing a task |
+| `Idle` | 1 | Agent is waiting for work |
+| `Thinking` | 2 | Agent is reasoning/planning |
+| `Error` | 3 | Agent hit an unrecoverable state |
+
+---
+
+## Key Design Decisions
+
+1. **Angular Signals** — Reactive state management. No NgRx — kept intentionally simple.
+2. **Adaptive layout** — Sidebar nav (NavRail) on desktop/kiosk (≥768px); bottom nav on mobile.
+3. **Tactical Dark Mode** — Theme via CSS custom properties in `styles.scss`.
+4. **SignalR fleet group** — Clients call `JoinFleet()` to subscribe to all agent updates broadcast by the hub.
+5. **Backend push model** — Hub uses `IHubContext<AgentStatusHub, IAgentStatusClient>` extension methods to push to clients; no polling.
+6. **Gateway bridge** — `GatewayEventBridgeService` connects the OpenClaw gateway WebSocket to the SignalR hub.
+
+---
+
+## Getting Started
+
+### Prerequisites
+
+- .NET 8 SDK
+- Node.js 20+
+- Docker
+- PostgreSQL
+- Running OpenClaw gateway (for live agent events)
+
+### Backend
+
+```bash
+cd backend
+
+# Restore and build
+dotnet restore
+dotnet build
+
+# Apply migrations
+dotnet ef database update --project ControlCenter
+
+# Run API
+dotnet run --project ControlCenter
+```
+
+API runs at `http://localhost:5000` · Swagger at `http://localhost:5000/swagger`
+
+### Frontend
+
+```bash
+cd frontend
+npm install
+ng serve
+```
+
+Frontend runs at `http://localhost:4200`
+
+---
+
+## Configuration
+
+`backend/ControlCenter/appsettings.json` — override in `appsettings.Development.json` or environment variables:
+
+| Key | Default | Description |
+|---|---|---|
+| `ConnectionStrings:DefaultConnection` | *(set in dev config)* | PostgreSQL connection string |
+| `Gateway:WebSocketUrl` | `ws://localhost:3271/ws` | OpenClaw gateway WebSocket URL |
+| `Gateway:AuthToken` | `""` | Gateway auth token |
+| `Cors:AllowedOrigins` | `localhost:4200`, `localhost:5000` | Frontend origins for CORS |
+
+---
+
+## Real-Time Events
+
+SignalR hub endpoint: `/hubs/agent-status`
+
+### Hub Methods (server → client)
+
+| Method | Payload | Description |
+|---|---|---|
+| `ReceiveStatusUpdate` | `AgentStatusUpdateDto` | Agent status changed |
+| `ReceiveAgentList` | `Agent[]` | Full fleet snapshot on join |
+
+### Client → Server
+
+| Method | Description |
+|---|---|
+| `JoinFleet()` | Subscribe to all agent updates |
+| `LeaveFleet()` | Unsubscribe |
+| `SendStatusUpdate(dto)` | Push a status update (internal use) |
+
+---
+
+## Pages
+
+| Route | Page | Description |
+|---|---|---|
+| `/hub` | Command Hub | Live agent grid — status, task, progress |
+| `/logs` | Logs | Agent session log viewer |
+| `/projects` | Projects | Linear project tracking view |
+| `/sessions` | Sessions | OpenClaw session browser |
+| `/settings` | Settings | App configuration |
+
+---
+
+## Agent Fleet
+
+| Agent | Role |
+|---|---|
+| Otto | Orchestrator — owns the dev lifecycle |
+| Rex | Frontend (Angular) |
+| Dex | Backend (ASP.NET Core) |
+| Hex | Database (schema, migrations) |
+| Pip | Raspberry Pi / Python |
+| Nano | Arduino / ESP32 / ESPHome |
+| Sketch | UX/UI design |
+| Flip | Mobile development |
+| Bob | Content & marketing copy |
+| Stuart | Concept visualization (images) |
+| Norbert | 3D design (OpenSCAD) |
+
+---
+
+## Branch & PR Rules
+
+- All feature branches target `dev` — **never `main`**
+- Branch naming: `agent/<agent>/CUB-N-short-description`
+- PR titles: `CUB-N: short description`
+- PRs require Otto review before Joshua merges
+
+---
+
+## API Overview
+
+| Route prefix | Resource |
+|---|---|
+| `/api/agents` | Agent registry and status |
+| `/api/command` | Issue commands to agents |
+| `/api/logs` | Session log retrieval |
+
+Full schema at `/swagger` when running in dev.
+
+---
+
+*Built by CubeCraft Creations · Orchestrated by Otto*

backend/.gitignore

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

backend/Configurations/AgentConfiguration.cs

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

backend/ControlCenter.Api.csproj

@@ -0,0 +1,24 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <!-- Exclude the separate ControlCenter sub-project from this project's compilation -->
+  <ItemGroup>
+    <Compile Remove="ControlCenter/**/*.cs" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.14" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.4">
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+      <PrivateAssets>all</PrivateAssets>
+    </PackageReference>
+    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="10.1.7" />
+  </ItemGroup>
+
+</Project>

backend/ControlCenter.Api.http

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

backend/ControlCenter/.gitignore

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

backend/ControlCenter/ControlCenter.csproj

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

backend/ControlCenter/Controllers/AgentsController.cs

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

backend/ControlCenter/Controllers/CommandController.cs

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

backend/ControlCenter/Controllers/LogsController.cs

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

backend/ControlCenter/Hubs/AgentStatusHub.cs

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

backend/ControlCenter/Hubs/IAgentStatusClient.cs

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

backend/ControlCenter/Hubs/Models/AgentStatusModels.cs

@@ -0,0 +1,166 @@
+namespace ControlCenter;
+
+/// <summary>
+/// Agent operational status derived from OpenClaw Gateway session activity.
+/// Maps to the frontend AgentStatus type: 'active' | 'idle' | 'thinking' | 'error'.
+/// </summary>
+public enum AgentStatus
+{
+    /// <summary>Agent is currently processing a turn.</summary>
+    Active,
+
+    /// <summary>Agent completed its last turn; no active work.</summary>
+    Idle,
+
+    /// <summary>LLM call in flight; tokens streaming.</summary>
+    Thinking,
+
+    /// <summary>Agent encountered an unhandled error.</summary>
+    Error
+}
+
+/// <summary>
+/// Extended lifecycle status including offline — not all agents have active sessions.
+/// Used internally; clients only see <see cref="AgentStatus"/> (offline maps to idle).
+/// </summary>
+public enum AgentLifecycleStatus
+{
+    Active,
+    Idle,
+    Thinking,
+    Error,
+    Offline
+}
+
+/// <summary>
+/// Pushed to SignalR clients when an agent's status changes.
+/// Matches the TypeScript <c>AgentStatusUpdate</c> interface from the design spec.
+/// </summary>
+/// <param name="AgentId">Agent identifier, e.g. "otto", "dex".</param>
+/// <param name="DisplayName">Human-readable name, e.g. "Otto".</param>
+/// <param name="Role">Role description, e.g. "Orchestrator Agent".</param>
+/// <param name="Status">Current operational status.</param>
+/// <param name="CurrentTask">Description of the current task, if any.</param>
+/// <param name="SessionKey">Full session key, e.g. "agent:otto:telegram:direct:8787451565".</param>
+/// <param name="Channel">Channel the agent is operating on, e.g. "telegram".</param>
+/// <param name="LastActivity">ISO 8601 timestamp of last activity.</param>
+/// <param name="ErrorMessage">Error message when status is 'error'.</param>
+public record AgentStatusUpdate(
+    string AgentId,
+    string DisplayName,
+    string Role,
+    string Status,
+    string? CurrentTask,
+    string SessionKey,
+    string Channel,
+    string LastActivity,
+    string? ErrorMessage = null
+);
+
+/// <summary>
+/// Pushed to SignalR clients when an agent's task progress updates.
+/// Matches the TypeScript <c>TaskProgressUpdate</c> interface from the design spec.
+/// </summary>
+/// <param name="AgentId">Agent identifier.</param>
+/// <param name="TaskDescription">Description of the current task.</param>
+/// <param name="Progress">Task progress percentage (0–100), if trackable.</param>
+/// <param name="Elapsed">Elapsed time string, e.g. "04m 12s".</param>
+public record TaskProgressUpdate(
+    string AgentId,
+    string TaskDescription,
+    int? Progress,
+    string? Elapsed
+);
+
+/// <summary>
+/// Data transfer object for broadcasting agent status updates
+/// to all connected SignalR clients via the hub's SendStatusUpdate method.
+///
+/// <para>This DTO provides a mutable, serialization-friendly alternative to
+/// <see cref="AgentStatusUpdate"/> for callers that construct updates
+/// from external data sources (e.g., HTTP API payloads).</para>
+/// </summary>
+public class AgentStatusUpdateDto
+{
+    /// <summary>
+    /// Agent identifier, e.g. "otto", "dex", "rex".
+    /// </summary>
+    public string AgentId { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Human-readable display name, e.g. "Otto", "Dex".
+    /// </summary>
+    public string DisplayName { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Role description, e.g. "Orchestrator Agent", "Backend Specialist".
+    /// </summary>
+    public string Role { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Current operational status of the agent as lowercase string:
+    /// "active", "idle", "thinking", "error".
+    /// </summary>
+    public string Status { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Description of the agent's current task, if any.
+    /// </summary>
+    public string? CurrentTask { get; set; }
+
+    /// <summary>
+    /// Full session key, e.g. "agent:otto:telegram:direct:8787451565".
+    /// </summary>
+    public string SessionKey { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Communication channel, e.g. "telegram", "discord", "slack".
+    /// </summary>
+    public string Channel { get; set; } = string.Empty;
+
+    /// <summary>
+    /// ISO 8601 timestamp of the agent's last activity.
+    /// </summary>
+    public string LastActivity { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Error message when the agent status is "error".
+    /// </summary>
+    public string? ErrorMessage { get; set; }
+
+    /// <summary>
+    /// Converts this DTO to an immutable <see cref="AgentStatusUpdate"/> record
+    /// for use with the typed SignalR client interface.
+    /// </summary>
+    /// <returns>An <see cref="AgentStatusUpdate"/> with equivalent field values.</returns>
+    public AgentStatusUpdate ToUpdate() => new(
+        AgentId,
+        DisplayName,
+        Role,
+        Status,
+        CurrentTask,
+        SessionKey,
+        Channel,
+        LastActivity,
+        ErrorMessage
+    );
+}
+
+/// <summary>
+/// Snapshot of an agent's full card data, sent on initial connection
+/// or when the fleet state is requested.
+/// Matches the TypeScript <c>AgentCardData</c> interface from the design spec.
+/// </summary>
+public record AgentCardData(
+    string Id,
+    string DisplayName,
+    string Role,
+    string Status,
+    string? CurrentTask,
+    int? TaskProgress,
+    string? TaskElapsed,
+    string SessionKey,
+    string Channel,
+    string LastActivity,
+    string? ErrorMessage
+);

backend/ControlCenter/Models/AgentMinionMapping.cs

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

backend/ControlCenter/Program.cs

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

backend/ControlCenter/Properties/launchSettings.json

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

backend/ControlCenter/Services/AgentMinionMapperService.cs

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

backend/ControlCenter/Services/GatewayEventBridgeService.cs

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

backend/ControlCenter/appsettings.Development.json

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

backend/ControlCenter/appsettings.json

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

backend/Data/AppDbContext.cs

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

backend/Data/AppDbContextFactory.cs

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

backend/Dtos/AgentStatusUpdateDto.cs

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

backend/Entities/Agent.cs

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

backend/Entities/AgentStatus.cs

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

backend/Hubs/AgentStatusHub.cs

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

backend/Migrations/20260426101703_CreateAgentsTable.Designer.cs

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

backend/Migrations/20260426101703_CreateAgentsTable.cs

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

backend/Migrations/AppDbContextModelSnapshot.cs

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

backend/Models/AgentState.cs

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

backend/Program.cs

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

backend/Properties/launchSettings.json

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

backend/Repositories/AgentStateRepository.cs

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

backend/Repositories/IAgentStateRepository.cs

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

backend/appsettings.Development.json

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

backend/appsettings.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/app/components/global-action-modal/global-action-modal.component.html

@@ -0,0 +1,31 @@
+<!-- Backdrop overlay — click to dismiss -->
+<div class="global-action-modal__backdrop" #backdrop (click)="onBackdropClick()"></div>
+
+<!-- Modal panel -->
+<div class="global-action-modal__panel" (click)="onModalClick($event)" role="dialog" aria-modal="true" aria-label="Global Actions">
+
+  <!-- Header -->
+  <div class="global-action-modal__header">
+    <h2 class="global-action-modal__title">Global Actions</h2>
+    <button matIconButton
+            class="global-action-modal__close"
+            aria-label="Close modal"
+            (click)="onClose()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+
+  <!-- Action grid -->
+  <div class="global-action-modal__actions">
+    @for (action of actions; track action.key) {
+      <button class="global-action-modal__action-btn global-action-modal__action-btn--{{ action.color }}"
+              (click)="onAction(action)">
+        <div class="global-action-modal__action-icon">
+          <mat-icon>{{ action.icon }}</mat-icon>
+        </div>
+        <span class="global-action-modal__action-label">{{ action.label }}</span>
+        <span class="global-action-modal__action-desc">{{ action.description }}</span>
+      </button>
+    }
+  </div>
+</div>

frontend/src/app/components/global-action-modal/global-action-modal.component.scss

@@ -0,0 +1,198 @@
+// ============================================================================
+// Global Action Modal — Tactical Dark Mode Styling
+// Uses Control Center design tokens from styles.scss
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Backdrop
+// ---------------------------------------------------------------------------
+:host {
+  display: block;
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+
+.global-action-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+}
+
+// ---------------------------------------------------------------------------
+// Modal Panel
+// ---------------------------------------------------------------------------
+.global-action-modal__panel {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(560px, calc(100vw - 48px));
+  background: var(--cc-surface-container);
+  border: 1px solid var(--cc-outline);
+  border-radius: var(--cc-card-border-radius);
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+// ---------------------------------------------------------------------------
+// Header
+// ---------------------------------------------------------------------------
+.global-action-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 12px;
+}
+
+.global-action-modal__title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--cc-on-surface);
+  letter-spacing: 0.01em;
+}
+
+.global-action-modal__close {
+  --mat-icon-button-state-layer-color: transparent;
+  color: var(--cc-on-surface-variant);
+
+  &:hover {
+    color: var(--cc-on-surface);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Action Grid
+// ---------------------------------------------------------------------------
+.global-action-modal__actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 12px 24px 24px;
+}
+
+// ---------------------------------------------------------------------------
+// Action Button
+// ---------------------------------------------------------------------------
+.global-action-modal__action-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 20px 16px;
+  border: 1px solid var(--cc-outline);
+  border-radius: 12px;
+  background: var(--cc-surface);
+  color: var(--cc-on-surface);
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
+  font-family: inherit;
+  text-align: center;
+
+  &:hover {
+    background: var(--cc-surface-container-high);
+    border-color: var(--cc-on-surface-variant);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mat-sys-primary, #38BDF8);
+    outline-offset: 2px;
+  }
+}
+
+// Action icon wrapper
+.global-action-modal__action-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+
+  .mat-icon {
+    width: 28px;
+    height: 28px;
+    font-size: 28px;
+  }
+}
+
+// Action label
+.global-action-modal__action-label {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+// Action description
+.global-action-modal__action-desc {
+  font-size: 12px;
+  color: var(--cc-on-surface-variant);
+  line-height: 1.4;
+}
+
+// ---------------------------------------------------------------------------
+// Color Variants — per-action accent colors
+// ---------------------------------------------------------------------------
+.global-action-modal__action-btn--deploy {
+  .global-action-modal__action-icon {
+    background: var(--status-active-bg);
+    color: var(--status-active);
+  }
+
+  &:hover {
+    border-color: var(--status-active);
+  }
+}
+
+.global-action-modal__action-btn--pause {
+  .global-action-modal__action-icon {
+    background: var(--status-idle-bg);
+    color: var(--status-idle);
+  }
+
+  &:hover {
+    border-color: var(--status-idle);
+  }
+}
+
+.global-action-modal__action-btn--emergency {
+  .global-action-modal__action-icon {
+    background: var(--status-error-bg);
+    color: var(--status-error);
+  }
+
+  &:hover {
+    border-color: var(--status-error);
+  }
+
+  .global-action-modal__action-label {
+    color: var(--status-error);
+  }
+}
+
+.global-action-modal__action-btn--add {
+  .global-action-modal__action-icon {
+    background: var(--status-thinking-bg);
+    color: var(--status-thinking);
+  }
+
+  &:hover {
+    border-color: var(--status-thinking);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Responsive — stack single column on narrow viewports
+// ---------------------------------------------------------------------------
+@media (max-width: 400px) {
+  .global-action-modal__actions {
+    grid-template-columns: 1fr;
+  }
+}

frontend/src/app/components/global-action-modal/global-action-modal.component.ts

@@ -0,0 +1,87 @@
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+/**
+ * Global Action Modal — overlay for fleet-wide commands.
+ *
+ * Four main actions: Deploy All, Pause All, Emergency Stop, Add Agent.
+ * Tactical Dark Mode styling using Control Center design tokens.
+ * Dismisses on backdrop click or close button.
+ */
+@Component({
+  selector: 'app-global-action-modal',
+  standalone: true,
+  imports: [MatIconModule, MatButtonModule],
+  templateUrl: './global-action-modal.component.html',
+  styleUrl: './global-action-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GlobalActionModalComponent {
+  /** Emitted when any action button is clicked. Payload is the action key. */
+  @Output() readonly actionSelected = new EventEmitter<GlobalAction>();
+
+  /** Emitted when the modal is dismissed (backdrop click or close button). */
+  @Output() readonly dismissed = new EventEmitter<void>();
+
+  @ViewChild('backdrop') backdropEl!: ElementRef<HTMLElement>;
+
+  /** All available global actions. */
+  readonly actions: GlobalActionDef[] = [
+    {
+      key: 'deploy-all',
+      label: 'Deploy All',
+      description: 'Deploy all agents in the fleet',
+      icon: 'rocket_launch',
+      color: 'deploy',
+    },
+    {
+      key: 'pause-all',
+      label: 'Pause All',
+      description: 'Pause all running agents',
+      icon: 'pause_circle',
+      color: 'pause',
+    },
+    {
+      key: 'emergency-stop',
+      label: 'Emergency Stop',
+      description: 'Immediately halt all agents',
+      icon: 'emergency',
+      color: 'emergency',
+    },
+    {
+      key: 'add-agent',
+      label: 'Add Agent',
+      description: 'Register a new agent to the fleet',
+      icon: 'person_add',
+      color: 'add',
+    },
+  ];
+
+  onBackdropClick(): void {
+    this.dismissed.emit();
+  }
+
+  onModalClick(event: Event): void {
+    // Prevent clicks inside the modal panel from closing it
+    event.stopPropagation();
+  }
+
+  onClose(): void {
+    this.dismissed.emit();
+  }
+
+  onAction(action: GlobalActionDef): void {
+    this.actionSelected.emit(action.key);
+  }
+}
+
+export type GlobalAction = 'deploy-all' | 'pause-all' | 'emergency-stop' | 'add-agent';
+
+export interface GlobalActionDef {
+  key: GlobalAction;
+  label: string;
+  description: string;
+  icon: string;
+  color: 'deploy' | 'pause' | 'emergency' | 'add';
+}

frontend/src/app/components/index.ts

@@ -0,0 +1,3 @@
+export * from './quick-jump-button/quick-jump-button.component';
+export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
+export { QuickJumpDrawerComponent } from './quick-jump-drawer/index';

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

@@ -0,0 +1,8 @@
+<button
+  mat-icon-button
+  class="quick-jump-button"
+  [attr.aria-label]="'Jump to agent session'"
+  (click)="onJumpClick()"
+>
+  <mat-icon>arrow_forward</mat-icon>
+</button>

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

@@ -0,0 +1,68 @@
+// ============================================================================
+// Quick-Jump Button — M3 FilledTonalIconButton
+// Per spec Section 7.3: Agent Card Quick-Jump action
+// M3 spec: FilledTonalIconButton uses secondary container color
+// with 8% state layer overlay for hover/focus.
+// ============================================================================
+
+.quick-jump-button {
+  // M3 FilledTonalIconButton: secondary-container background
+  // Angular Material mat-icon-button sets up the base shape (40x40, round).
+  // We override the color tokens to match FilledTonal style.
+  --mdc-icon-button-icon-color: var(--mat-sys-on-secondary-container);
+  background-color: var(--mat-sys-secondary-container);
+  border-radius: 50%;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  // M3 State Layer: 8% overlay on hover
+  &:hover {
+    background-color: var(--mat-sys-secondary-container);
+    // State layer overlay using a pseudo-element for precise 8% opacity
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background-color: var(--mat-sys-on-secondary-container);
+      opacity: 0.08;
+      pointer-events: none;
+    }
+  }
+
+  // M3 State Layer: 12% overlay on focus-visible (slightly stronger for accessibility)
+  &:focus-visible {
+    background-color: var(--mat-sys-secondary-container);
+    outline: 3px solid var(--status-active);
+    outline-offset: 2px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background-color: var(--mat-sys-on-secondary-container);
+      opacity: 0.12;
+      pointer-events: none;
+    }
+  }
+
+  // M3 State Layer: 12% overlay on active/pressed
+  &:active {
+    background-color: var(--mat-sys-secondary-container);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background-color: var(--mat-sys-on-secondary-container);
+      opacity: 0.12;
+      pointer-events: none;
+    }
+  }
+
+  // Icon color stays on-secondary-container across all states
+  .mat-icon {
+    color: var(--mat-sys-on-secondary-container);
+  }
+}

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

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+
+/**
+ * Quick-Jump Button — M3 FilledTonalIconButton
+ *
+ * An icon button that emits a navigation event for jumping to an agent session.
+ * Uses the Material Design 3 FilledTonalIconButton style with 8% state layer
+ * overlay on hover and focus.
+ *
+ * Per spec Section 7.3: Agent Card Component Interface
+ */
+@Component({
+  selector: 'app-quick-jump-button',
+  standalone: true,
+  imports: [MatIconButton, MatIcon],
+  templateUrl: './quick-jump-button.component.html',
+  styleUrl: './quick-jump-button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class QuickJumpButtonComponent {
+  /** Emitted when the button is clicked, carrying the session key for navigation. */
+  @Output() jumpClick = new EventEmitter<string>();
+
+  /** The session key to navigate to. Set by the parent agent card. */
+  sessionKey = '';
+
+  onJumpClick(): void {
+    this.jumpClick.emit(this.sessionKey);
+  }
+}

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

@@ -0,0 +1 @@
+export { QuickJumpDrawerComponent } from './quick-jump-drawer.component';

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

@@ -0,0 +1,109 @@
+<!-- ============================================================================
+  Quick-Jump Drawer — Slide-out panel for fast agent switching
+  Per CUB-51: Slides from right, agent list with status badges,
+  search/filter input, closes via ESC or outside click.
+  ============================================================================-->
+
+<!-- Backdrop overlay -->
+@if (isOpen()) {
+  <div
+    class="quick-jump-backdrop"
+    (click)="onBackdropClick($event)"
+    [@backdropEnter]
+  ></div>
+}
+
+<!-- Drawer panel -->
+<div
+  class="quick-jump-drawer"
+  [class.quick-jump-drawer--open]="isOpen()"
+  (keydown)="onDrawerKeydown($event)"
+  role="dialog"
+  aria-label="Quick jump to agent"
+  [attr.aria-hidden]="!isOpen()"
+>
+  <!-- Drawer header -->
+  <div class="quick-jump-drawer__header">
+    <h2 class="quick-jump-drawer__title">Jump to Agent</h2>
+    <button
+      class="quick-jump-drawer__close-btn"
+      type="button"
+      aria-label="Close drawer"
+      (click)="close()"
+    >
+      ✕
+    </button>
+  </div>
+
+  <!-- Search input -->
+  <div class="quick-jump-drawer__search">
+    <span class="quick-jump-drawer__search-icon">search</span>
+    <input
+      #searchInput
+      type="text"
+      class="quick-jump-drawer__search-input"
+      placeholder="Search agents..."
+      [formControl]="searchControl"
+      autocomplete="off"
+      aria-label="Search agents"
+    />
+    @if (searchControl.value) {
+      <button
+        class="quick-jump-drawer__search-clear"
+        type="button"
+        aria-label="Clear search"
+        (click)="searchControl.setValue('')"
+      >
+        ✕
+      </button>
+    }
+  </div>
+
+  <!-- Agent list -->
+  <ul class="quick-jump-drawer__agent-list" role="listbox" aria-label="Agent list">
+    @for (agent of filteredAgents(); track agent.id; let i = $index) {
+      <li
+        [id]="'quick-jump-agent-' + i"
+        class="quick-jump-drawer__agent-item"
+        [class.quick-jump-drawer__agent-item--highlighted]="highlightedIndex() === i"
+        role="option"
+        [attr.aria-selected]="highlightedIndex() === i"
+        (click)="selectAgent(agent)"
+        (mouseenter)="highlightedIndex.set(i)"
+        (mouseleave)="highlightedIndex.set(-1)"
+      >
+        <!-- Status badge -->
+        <span
+          class="status-dot {{ getStatusClass(agent.status) }}"
+          [attr.aria-label]="getStatusLabel(agent.status)"
+        ></span>
+
+        <!-- Agent info -->
+        <div class="quick-jump-drawer__agent-info">
+          <span class="quick-jump-drawer__agent-name">{{ agent.displayName }}</span>
+          <span class="quick-jump-drawer__agent-role">{{ agent.role }}</span>
+        </div>
+
+        <!-- Status label -->
+        <span class="quick-jump-drawer__agent-status-label" [class]="'status-label--' + agent.status">
+          {{ getStatusLabel(agent.status) }}
+        </span>
+      </li>
+    } @empty {
+      <li class="quick-jump-drawer__empty">
+        @if (searchControl.value) {
+          <span>No agents matching "{{ searchControl.value }}"</span>
+        } @else {
+          <span>No agents online</span>
+        }
+      </li>
+    }
+  </ul>
+
+  <!-- Footer hint -->
+  <div class="quick-jump-drawer__footer">
+    <span class="quick-jump-drawer__footer-hint">
+      <kbd>↑↓</kbd> Navigate &nbsp; <kbd>↵</kbd> Select &nbsp; <kbd>Esc</kbd> Close
+    </span>
+  </div>
+</div>

frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.scss

@@ -0,0 +1,333 @@
+// ============================================================================
+// Quick-Jump Drawer — Slide-out panel for fast agent switching
+// Per CUB-51: slides from right, agent list with status badges,
+// search/filter input, closes via ESC or outside click.
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Backdrop
+// ---------------------------------------------------------------------------
+.quick-jump-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 998;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+
+  &.backdrop-visible {
+    opacity: 1;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Drawer Panel
+// ---------------------------------------------------------------------------
+.quick-jump-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 380px;
+  max-width: 90vw;
+  background-color: var(--cc-surface-container);
+  border-left: 1px solid var(--cc-outline);
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
+
+  &--open {
+    transform: translateX(0);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Header
+// ---------------------------------------------------------------------------
+.quick-jump-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 12px;
+  border-bottom: 1px solid var(--cc-outline);
+}
+
+.quick-jump-drawer__title {
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--cc-on-surface);
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.quick-jump-drawer__close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--cc-on-surface-variant);
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease;
+
+  &:hover {
+    background-color: var(--cc-surface-container-high);
+    color: var(--cc-on-surface);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--status-active);
+    outline-offset: 2px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Search
+// ---------------------------------------------------------------------------
+.quick-jump-drawer__search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 16px 24px 8px;
+  border: 1px solid var(--cc-outline);
+  border-radius: 12px;
+  background-color: var(--cc-surface-container-high);
+  transition: border-color 150ms ease;
+
+  &:focus-within {
+    border-color: var(--status-active);
+  }
+}
+
+.quick-jump-drawer__search-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 12px;
+  font-family: 'Material Icons';
+  font-size: 20px;
+  color: var(--cc-on-surface-variant);
+  pointer-events: none;
+  user-select: none;
+
+  // Use a simple "search" text since icon font may not be loaded inside
+  // the drawer — rely on Material icon font from the parent app
+  &::before {
+    content: 'search';
+    font-family: 'Material Icons';
+  }
+}
+
+.quick-jump-drawer__search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 12px 8px;
+  font-size: 15px;
+  font-family: 'Inter', 'Roboto', sans-serif;
+  color: var(--cc-on-surface);
+
+  &::placeholder {
+    color: var(--cc-on-surface-variant);
+    opacity: 0.7;
+  }
+}
+
+.quick-jump-drawer__search-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-right: 4px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--cc-on-surface-variant);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease;
+
+  &:hover {
+    background-color: var(--cc-surface-container);
+    color: var(--cc-on-surface);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--status-active);
+    outline-offset: 2px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Agent List
+// ---------------------------------------------------------------------------
+.quick-jump-drawer__agent-list {
+  list-style: none;
+  margin: 0;
+  padding: 8px 12px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.quick-jump-drawer__agent-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+
+  &:hover,
+  &--highlighted {
+    background-color: var(--cc-surface-container-high);
+  }
+
+  &--highlighted {
+    outline: 2px solid var(--status-active);
+    outline-offset: -2px;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--status-active);
+    outline-offset: 2px;
+  }
+}
+
+.quick-jump-drawer__agent-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0; // Allow text truncation
+  flex: 1;
+}
+
+.quick-jump-drawer__agent-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--cc-on-surface);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.quick-jump-drawer__agent-role {
+  font-size: 12px;
+  color: var(--cc-on-surface-variant);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.quick-jump-drawer__agent-status-label {
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 3px 8px;
+  border-radius: 6px;
+  white-space: nowrap;
+
+  &.status-label--active {
+    color: var(--status-active);
+    background-color: var(--status-active-bg);
+  }
+
+  &.status-label--idle {
+    color: var(--status-idle);
+    background-color: var(--status-idle-bg);
+  }
+
+  &.status-label--thinking {
+    color: var(--status-thinking);
+    background-color: var(--status-thinking-bg);
+  }
+
+  &.status-label--error {
+    color: var(--status-error);
+    background-color: var(--status-error-bg);
+  }
+
+  &.status-label--offline {
+    color: var(--status-offline);
+    background-color: rgba(100, 116, 139, 0.12);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Empty State
+// ---------------------------------------------------------------------------
+.quick-jump-drawer__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: var(--cc-on-surface-variant);
+  font-size: 14px;
+  text-align: center;
+}
+
+// ---------------------------------------------------------------------------
+// Footer
+// ---------------------------------------------------------------------------
+.quick-jump-drawer__footer {
+  padding: 12px 24px 16px;
+  border-top: 1px solid var(--cc-outline);
+}
+
+.quick-jump-drawer__footer-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--cc-on-surface-variant);
+  opacity: 0.7;
+
+  kbd {
+    display: inline-block;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-family: var(--cc-font-mono);
+    background-color: var(--cc-surface-container-high);
+    border: 1px solid var(--cc-outline);
+    border-radius: 4px;
+    color: var(--cc-on-surface-variant);
+    line-height: 1.4;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Mobile Adjustments
+// ---------------------------------------------------------------------------
+@media (max-width: 599px) {
+  .quick-jump-drawer {
+    width: 100%;
+    max-width: 100vw;
+  }
+
+  .quick-jump-drawer__header {
+    padding: 16px 16px 10px;
+  }
+
+  .quick-jump-drawer__search {
+    margin: 12px 16px 8px;
+  }
+
+  .quick-jump-drawer__agent-list {
+    padding: 4px 8px;
+  }
+
+  .quick-jump-drawer__footer {
+    padding: 10px 16px 14px;
+  }
+}

frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.ts

@@ -0,0 +1,215 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  OnDestroy,
+  Output,
+  signal,
+  ViewChild,
+} from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+import { AgentCardData } from '../../models/agent.model';
+import { AgentStatusService } from '../../services/agent-status.service';
+
+@Component({
+  selector: 'app-quick-jump-drawer',
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  templateUrl: './quick-jump-drawer.component.html',
+  styleUrl: './quick-jump-drawer.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class QuickJumpDrawerComponent implements OnDestroy {
+  /** Emits when the drawer should close (ESC, outside click, or item select). */
+  @Output() readonly drawerClose = new EventEmitter<void>();
+
+  /** Whether the drawer is visible. */
+  readonly isOpen = signal(false);
+
+  /** Search/filter input control. */
+  readonly searchControl = new FormControl('', { nonNullable: true });
+
+  /** Filtered agent list based on search. */
+  readonly filteredAgents = signal<AgentCardData[]>([]);
+
+  /** Track which agent row is highlighted via keyboard navigation. */
+  readonly highlightedIndex = signal(-1);
+
+  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
+  @ViewChild('drawerPanel') drawerPanel!: ElementRef<HTMLElement>;
+
+  private readonly destroy$ = new Subject<void>();
+
+  constructor(private readonly agentStatusService: AgentStatusService) {
+    // Reactively filter agents as the search input changes
+    this.searchControl.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((query) => this.filterAgents(query));
+
+    // Initial load
+    this.filterAgents('');
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  /** Open the drawer and focus the search input. */
+  open(): void {
+    this.isOpen.set(true);
+    this.searchControl.setValue('', { emitEvent: false });
+    this.highlightedIndex.set(-1);
+    // Focus search input after animation frame (drawer needs to render first)
+    requestAnimationFrame(() => {
+      this.searchInput?.nativeElement?.focus();
+    });
+  }
+
+  /** Close the drawer. */
+  close(): void {
+    this.isOpen.set(false);
+    this.searchControl.setValue('', { emitEvent: false });
+    this.highlightedIndex.set(-1);
+    this.drawerClose.emit();
+  }
+
+  /** Toggle the drawer open/close. */
+  toggle(): void {
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Keyboard Handling
+  // ---------------------------------------------------------------------------
+
+  @HostListener('document:keydown.escape')
+  onEscapeKey(): void {
+    if (this.isOpen()) {
+      this.close();
+    }
+  }
+
+  /** Handle keyboard navigation within the drawer panel. */
+  onDrawerKeydown(event: KeyboardEvent): void {
+    const agents = this.filteredAgents();
+    if (!agents.length) return;
+
+    switch (event.key) {
+      case 'ArrowDown': {
+        event.preventDefault();
+        this.highlightedIndex.update((i) =>
+          i < agents.length - 1 ? i + 1 : 0
+        );
+        this.scrollIntoView();
+        break;
+      }
+      case 'ArrowUp': {
+        event.preventDefault();
+        this.highlightedIndex.update((i) =>
+          i > 0 ? i - 1 : agents.length - 1
+        );
+        this.scrollIntoView();
+        break;
+      }
+      case 'Enter': {
+        const idx = this.highlightedIndex();
+        if (idx >= 0 && idx < agents.length) {
+          this.selectAgent(agents[idx]);
+        }
+        break;
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Outside Click
+  // ---------------------------------------------------------------------------
+
+  /** Close when clicking on the backdrop (outside the panel). */
+  onBackdropClick(event: MouseEvent): void {
+    if (
+      this.drawerPanel?.nativeElement &&
+      !this.drawerPanel.nativeElement.contains(event.target as Node)
+    ) {
+      this.close();
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Agent Selection
+  // ---------------------------------------------------------------------------
+
+  /** Select an agent — navigates or focuses the agent card. */
+  selectAgent(agent: AgentCardData): void {
+    // TODO: Wire up navigation to the selected agent's detail view
+    // For now, emit close after selection
+    console.log('[QuickJump] Selected agent:', agent.id);
+    this.close();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Status Helpers
+  // ---------------------------------------------------------------------------
+
+  /** Get the CSS class for a given agent status. */
+  getStatusClass(status: string): string {
+    return `status-dot--${status}`;
+  }
+
+  /** Get a human-readable label for an agent status. */
+  getStatusLabel(status: string): string {
+    const labels: Record<string, string> = {
+      active: 'Active',
+      idle: 'Idle',
+      thinking: 'Thinking',
+      error: 'Error',
+      offline: 'Offline',
+    };
+    return labels[status] ?? status;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Private
+  // ---------------------------------------------------------------------------
+
+  private filterAgents(query: string): void {
+    const allAgents = this.agentStatusService.agents();
+    const lowerQuery = query.toLowerCase().trim();
+
+    if (!lowerQuery) {
+      this.filteredAgents.set(allAgents);
+      return;
+    }
+
+    const filtered = allAgents.filter(
+      (agent) =>
+        agent.displayName.toLowerCase().includes(lowerQuery) ||
+        agent.id.toLowerCase().includes(lowerQuery) ||
+        agent.role.toLowerCase().includes(lowerQuery)
+    );
+    this.filteredAgents.set(filtered);
+    this.highlightedIndex.set(-1);
+  }
+
+  private scrollIntoView(): void {
+    const idx = this.highlightedIndex();
+    const el = document.getElementById(`quick-jump-agent-${idx}`);
+    el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }
+}

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

@@ -0,0 +1,6 @@
+// ============================================================================
+// Task Progress Bar — Barrel Export
+// CUB-44
+// ============================================================================
+
+export { TaskProgressBarComponent } from './task-progress-bar.component';

frontend/src/app/components/task-progress-bar/task-progress-bar.component.html

@@ -0,0 +1,18 @@
+<!-- Task Progress Bar: determinate progress with optional elapsed time -->
+<div class="task-progress-bar">
+  <!-- Info row: percentage + optional elapsed -->
+  <div class="task-progress-bar__info">
+    <span class="task-progress-bar__percent">{{ clampedProgress }}%</span>
+    <span *ngIf="showElapsed" class="task-progress-bar__elapsed">
+      {{ elapsedText }}
+    </span>
+  </div>
+
+  <!-- Angular Material determinate progress bar -->
+  <mat-progress-bar
+    class="task-progress-bar__bar"
+    mode="determinate"
+    [value]="clampedProgress"
+    aria-label="Task progress"
+  ></mat-progress-bar>
+</div>

frontend/src/app/components/task-progress-bar/task-progress-bar.component.scss

@@ -0,0 +1,77 @@
+// ============================================================================
+// Task Progress Bar — Tactical Dark Theme Styling
+// Per CUB-44: Uses --color-primary for bar fill and --color-surface-light
+// for track background, mapped to the Control Center's M3 dark tokens.
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Container
+// ---------------------------------------------------------------------------
+.task-progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+// ---------------------------------------------------------------------------
+// Info row: percentage label + elapsed time
+// ---------------------------------------------------------------------------
+.task-progress-bar__info {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.task-progress-bar__percent {
+  font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--cc-on-surface, #E2E8F0);
+  letter-spacing: 0.02em;
+}
+
+.task-progress-bar__elapsed {
+  font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--cc-on-surface-variant, #8A9BB0);
+  letter-spacing: 0.01em;
+}
+
+// ---------------------------------------------------------------------------
+// Material Progress Bar Overrides
+// ---------------------------------------------------------------------------
+// Map the spec's --color-primary and --color-surface-light to the Control
+// Center's actual theme tokens. This ensures the bar uses the tactical dark
+// palette while respecting the spec's variable naming.
+// ---------------------------------------------------------------------------
+
+.task-progress-bar__bar {
+  // Override the track (background) to use the surface container
+  --mat-progress-bar-track-height: 6px;
+  --mat-progress-bar-active-indicator-height: 6px;
+
+  // Bar fill color: primary (cyan/sky blue per tactical dark theme)
+  --mat-progress-bar-active-indicator-color: var(--color-primary, var(--mat-sys-primary, #38BDF8));
+
+  // Track background: surface container (dark slate)
+  --mat-progress-bar-track-color: var(--color-surface-light, var(--cc-surface-container, #1C2027));
+
+  // Border radius for a softer bar
+  border-radius: 3px;
+
+  // Smooth transition on value changes
+  transition: none;
+}
+
+// Rounded ends on the progress bar fill
+:host ::ng-deep .mdc-linear-progress__bar-inner {
+  border-radius: 3px;
+}
+
+// Rounded track background
+:host ::ng-deep .mdc-linear-progress__track {
+  border-radius: 3px;
+}

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

@@ -0,0 +1,109 @@
+// ============================================================================
+// Task Progress Bar Component
+// Per CUB-44: Determinate progress bar with optional elapsed time display.
+// Uses Angular Material mat-progress-bar in determinate mode with tactical
+// dark theme styling via CSS custom properties.
+// ============================================================================
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+/**
+ * Displays a determinate progress bar with an optional elapsed time indicator.
+ *
+ * Usage:
+ * ```html
+ * <app-task-progress-bar [progress]="65" />
+ * <app-task-progress-bar [progress]="42" [showElapsed]="true" />
+ * ```
+ */
+@Component({
+  selector: 'app-task-progress-bar',
+  standalone: true,
+  imports: [CommonModule, MatProgressBarModule],
+  templateUrl: './task-progress-bar.component.html',
+  styleUrl: './task-progress-bar.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TaskProgressBarComponent implements OnInit, OnDestroy {
+  // ---------------------------------------------------------------------------
+  // Inputs
+  // ---------------------------------------------------------------------------
+
+  /** Current progress percentage (0–100). Required. */
+  @Input({ required: true })
+  progress!: number;
+
+  /** Whether to show elapsed time next to the percentage. Defaults to false. */
+  @Input()
+  showElapsed = false;
+
+  // ---------------------------------------------------------------------------
+  // Internal state
+  // ---------------------------------------------------------------------------
+
+  /** Timestamp when the component initialized — used for elapsed calculation. */
+  startTime = Date.now();
+
+  /** Formatted elapsed time string, e.g. "2m 15s ago". */
+  elapsedText = '';
+
+  /** Interval timer for updating the elapsed display. */
+  private timer: ReturnType<typeof setInterval> | null = null;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  ngOnInit(): void {
+    this.updateElapsed();
+
+    if (this.showElapsed) {
+      // Update elapsed time every second
+      this.timer = setInterval(() => {
+        this.updateElapsed();
+        this.cdr.markForCheck();
+      }, 1000);
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------------
+
+  /** Clamp progress to 0–100 for safety. */
+  get clampedProgress(): number {
+    return Math.max(0, Math.min(100, this.progress ?? 0));
+  }
+
+  /** Recalculate the elapsed time string. */
+  private updateElapsed(): void {
+    const elapsedMs = Date.now() - this.startTime;
+    const totalSeconds = Math.floor(elapsedMs / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+
+    if (minutes > 0) {
+      this.elapsedText = `${minutes}m ${seconds}s ago`;
+    } else {
+      this.elapsedText = `${seconds}s ago`;
+    }
+  }
+}

frontend/src/app/layout/header-bar/header-bar.component.html

@@ -2,6 +2,16 @@
   <h1 class="header-bar__title">Command Hub</h1>
 
   <div class="header-bar__actions">
+    <!-- Quick-Jump trigger -->
+    <button
+      class="header-bar__action-btn"
+      mat-icon-button
+      aria-label="Jump to agent"
+      (click)="openQuickJump.emit()"
+    >
+      <mat-icon>keyboard_command_key</mat-icon>
+    </button>
+
     <!-- Live indicator -->
     <button
       class="header-bar__action-btn header-bar__live-btn"

frontend/src/app/layout/header-bar/header-bar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, signal } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatBadgeModule } from '@angular/material/badge';
@@ -17,6 +17,9 @@ import { MatBadgeModule } from '@angular/material/badge';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderBarComponent {
+  /** Emits when the user requests the Quick-Jump drawer. */
+  @Output() readonly openQuickJump = new EventEmitter<void>();
+
   protected readonly notificationCount = signal(3);
   protected readonly isConnected = signal(true);
 

frontend/src/app/layout/layout-shell/layout-shell.component.html

@@ -4,7 +4,7 @@
 
   <div class="layout-shell__main">
     <!-- Header bar at top of content area -->
-    <app-header-bar class="layout-shell__header" />
+    <app-header-bar class="layout-shell__header" (openQuickJump)="openQuickJump()" />
 
     <!-- Scrollable content area -->
     <main class="layout-shell__content">
@@ -14,4 +14,7 @@
 
   <!-- Mobile: Bottom Navigation Bar -->
   <app-bottom-nav class="layout-shell__bottom-nav" />
-</div>
+</div>
+
+<!-- Quick-Jump Drawer (global overlay) -->
+<app-quick-jump-drawer />

frontend/src/app/layout/layout-shell/layout-shell.component.ts

@@ -1,8 +1,9 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { NavRailComponent } from '../nav-rail/nav-rail.component';
 import { BottomNavComponent } from '../bottom-nav/bottom-nav.component';
 import { HeaderBarComponent } from '../header-bar/header-bar.component';
+import { QuickJumpDrawerComponent } from '../../components/quick-jump-drawer/index';
 
 /**
  * Layout Shell — wraps the main content area with adaptive navigation.
@@ -13,9 +14,25 @@ import { HeaderBarComponent } from '../header-bar/header-bar.component';
 @Component({
   selector: 'app-layout-shell',
   standalone: true,
-  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent],
+  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent],
   templateUrl: './layout-shell.component.html',
   styleUrl: './layout-shell.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LayoutShellComponent {}
+export class LayoutShellComponent {
+  @ViewChild(QuickJumpDrawerComponent) quickJumpDrawer!: QuickJumpDrawerComponent;
+
+  /** Open the quick-jump drawer from anywhere in the layout. */
+  openQuickJump(): void {
+    this.quickJumpDrawer?.open();
+  }
+
+  /** Global keyboard shortcut: Ctrl+K or Cmd+K opens the quick-jump drawer. */
+  @HostListener('document:keydown', ['$event'])
+  onGlobalKeydown(event: KeyboardEvent): void {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+      event.preventDefault();
+      this.quickJumpDrawer?.toggle();
+    }
+  }
+}

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

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

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

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

frontend/src/styles.scss

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