From d5a85c4ed0e552e1594dd0dccbf647b1c4ada406 Mon Sep 17 00:00:00 2001 From: "cubecraft-agents[bot]" <3458173+cubecraft-agents[bot]@users.noreply.github.com> Date: Sun, 26 Apr 2026 12:54:25 +0000 Subject: [PATCH 1/9] CUB-47: Implement Tactical Dark Mode CSS Variables --- frontend/src/styles.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index af13a84..a581a28 100644 --- a/frontend/src/styles.scss +++ b/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; From 47cbeed456ac9ad063e502fc43125ce9c39d0d77 Mon Sep 17 00:00:00 2001 From: "cubecraft-agents[bot]" <3458173+cubecraft-agents[bot]@users.noreply.github.com> Date: Sun, 26 Apr 2026 22:07:05 +0000 Subject: [PATCH 2/9] feat(CUB-56): [Control Center] Agent State Database Migration --- backend/ControlCenter.Api.csproj | 7 +++--- backend/Program.cs | 38 -------------------------------- 2 files changed, 4 insertions(+), 41 deletions(-) delete mode 100644 backend/Program.cs diff --git a/backend/ControlCenter.Api.csproj b/backend/ControlCenter.Api.csproj index d2896da..7d43500 100644 --- a/backend/ControlCenter.Api.csproj +++ b/backend/ControlCenter.Api.csproj @@ -8,11 +8,12 @@ - - runtime; build; native; contentfiles; analyzers; buildtransitive - all + + runtime; build; native; contentfiles; analyzers; buildtransitive + all + diff --git a/backend/Program.cs b/backend/Program.cs deleted file mode 100644 index c45c355..0000000 --- a/backend/Program.cs +++ /dev/null @@ -1,38 +0,0 @@ -using ControlCenter.Api.Data; -using ControlCenter.Api.Hubs; -using Microsoft.EntityFrameworkCore; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddOpenApi(); - -// Register SignalR for real-time agent status updates -builder.Services.AddSignalR(); - -// Register DbContext with PostgreSQL -builder.Services.AddDbContext(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("/hubs/agent-status"); - -app.Run(); \ No newline at end of file From 040d4cb54d08f41d37a3c95e7965fb1d84cd3d5f Mon Sep 17 00:00:00 2001 From: "cubecraft-agents[bot]" <3458173+cubecraft-agents[bot]@users.noreply.github.com> Date: Mon, 27 Apr 2026 02:24:51 +0000 Subject: [PATCH 3/9] fix(CUB-56): Restore Program.cs deletion - PR should only add Swashbuckle package --- backend/Program.cs | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 backend/Program.cs diff --git a/backend/Program.cs b/backend/Program.cs new file mode 100644 index 0000000..c45c355 --- /dev/null +++ b/backend/Program.cs @@ -0,0 +1,38 @@ +using ControlCenter.Api.Data; +using ControlCenter.Api.Hubs; +using Microsoft.EntityFrameworkCore; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddOpenApi(); + +// Register SignalR for real-time agent status updates +builder.Services.AddSignalR(); + +// Register DbContext with PostgreSQL +builder.Services.AddDbContext(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("/hubs/agent-status"); + +app.Run(); \ No newline at end of file From f170def0eabafa4a854ee63910ea379bd73b546b Mon Sep 17 00:00:00 2001 From: "cubecraft-agents[bot]" <3458173+cubecraft-agents[bot]@users.noreply.github.com> Date: Mon, 27 Apr 2026 04:10:18 +0000 Subject: [PATCH 4/9] feat(CUB-54): implement Agent State Repository with EF Core MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add AgentState read model (Models/AgentState.cs) - Add IAgentStateRepository interface with GetAllAsync, GetBySessionKeyAsync, UpdateStatusAsync - Add AgentStateRepository EF Core implementation mapping Agent entity → AgentState model - Register IAgentStateRepository in DI (Program.cs) - Exclude ControlCenter sub-project from Api compilation Build: 0 warnings, 0 errors --- backend/ControlCenter.Api.csproj | 5 ++ backend/Models/AgentState.cs | 19 +++++ backend/Program.cs | 4 + backend/Repositories/AgentStateRepository.cs | 76 +++++++++++++++++++ backend/Repositories/IAgentStateRepository.cs | 27 +++++++ 5 files changed, 131 insertions(+) create mode 100644 backend/Models/AgentState.cs create mode 100644 backend/Repositories/AgentStateRepository.cs create mode 100644 backend/Repositories/IAgentStateRepository.cs diff --git a/backend/ControlCenter.Api.csproj b/backend/ControlCenter.Api.csproj index 7d43500..a509f52 100644 --- a/backend/ControlCenter.Api.csproj +++ b/backend/ControlCenter.Api.csproj @@ -6,6 +6,11 @@ enable + + + + + diff --git a/backend/Models/AgentState.cs b/backend/Models/AgentState.cs new file mode 100644 index 0000000..7c5f4a6 --- /dev/null +++ b/backend/Models/AgentState.cs @@ -0,0 +1,19 @@ +namespace ControlCenter.Api.Models; + +/// +/// 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. +/// +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; } +} \ No newline at end of file diff --git a/backend/Program.cs b/backend/Program.cs index c45c355..d23abf3 100644 --- a/backend/Program.cs +++ b/backend/Program.cs @@ -1,5 +1,6 @@ using ControlCenter.Api.Data; using ControlCenter.Api.Hubs; +using ControlCenter.Api.Repositories; using Microsoft.EntityFrameworkCore; var builder = WebApplication.CreateBuilder(args); @@ -10,6 +11,9 @@ builder.Services.AddOpenApi(); // Register SignalR for real-time agent status updates builder.Services.AddSignalR(); +// Register Agent State Repository +builder.Services.AddScoped(); + // Register DbContext with PostgreSQL builder.Services.AddDbContext(options => { diff --git a/backend/Repositories/AgentStateRepository.cs b/backend/Repositories/AgentStateRepository.cs new file mode 100644 index 0000000..ca452ff --- /dev/null +++ b/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; + +/// +/// EF Core implementation of the Agent State Repository. +/// Maps between the persisted entity and the +/// read-oriented model. +/// +public class AgentStateRepository : IAgentStateRepository +{ + private readonly AppDbContext _db; + + public AgentStateRepository(AppDbContext db) + { + _db = db; + } + + /// + public async Task> GetAllAsync(CancellationToken ct = default) + { + var agents = await _db.Agents + .AsNoTracking() + .OrderByDescending(a => a.LastActivity) + .ToListAsync(ct); + + return agents.Select(ToModel).ToList(); + } + + /// + public async Task 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); + } + + /// + public async Task UpdateStatusAsync(Guid id, string status, CancellationToken ct = default) + { + if (!Enum.TryParse(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; + } + + /// + /// Maps a persisted entity to a model. + /// + 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, + }; +} \ No newline at end of file diff --git a/backend/Repositories/IAgentStateRepository.cs b/backend/Repositories/IAgentStateRepository.cs new file mode 100644 index 0000000..4c0c2b9 --- /dev/null +++ b/backend/Repositories/IAgentStateRepository.cs @@ -0,0 +1,27 @@ +using ControlCenter.Api.Models; + +namespace ControlCenter.Api.Repositories; + +/// +/// Repository interface for accessing and mutating Agent State. +/// Provides a clean abstraction over the EF Core data access layer. +/// +public interface IAgentStateRepository +{ + /// + /// Retrieve all agent states. + /// + Task> GetAllAsync(CancellationToken ct = default); + + /// + /// Retrieve a single agent state by its session key. + /// Returns null if no agent is found with the given session key. + /// + Task GetBySessionKeyAsync(string sessionKey, CancellationToken ct = default); + + /// + /// Update the status of an agent by its primary key. + /// Returns true if the agent was found and updated, false otherwise. + /// + Task UpdateStatusAsync(Guid id, string status, CancellationToken ct = default); +} \ No newline at end of file From 82c12554d0dae27662096c69e5b568fc2392e152 Mon Sep 17 00:00:00 2001 From: "cubecraft-agents[bot]" <3458173+cubecraft-agents[bot]@users.noreply.github.com> Date: Mon, 27 Apr 2026 09:11:30 +0000 Subject: [PATCH 5/9] feat(CUB-62): [Control Center] Agent-to-Minion Mapping Service --- .../Models/AgentMinionMapping.cs | 72 +++++++ backend/ControlCenter/Program.cs | 5 + .../Services/AgentMinionMapperService.cs | 193 ++++++++++++++++++ 3 files changed, 270 insertions(+) create mode 100644 backend/ControlCenter/Models/AgentMinionMapping.cs create mode 100644 backend/ControlCenter/Services/AgentMinionMapperService.cs diff --git a/backend/ControlCenter/Models/AgentMinionMapping.cs b/backend/ControlCenter/Models/AgentMinionMapping.cs new file mode 100644 index 0000000..c9886dd --- /dev/null +++ b/backend/ControlCenter/Models/AgentMinionMapping.cs @@ -0,0 +1,72 @@ +namespace ControlCenter.Models; + +/// +/// Defines which side of the Control Center dashboard a minion occupies. +/// +public enum MinionSide +{ + /// Development side — Rex, Dex, Hex. + Dev, + + /// Business side — Larry, Mel, Buzz. + Business +} + +/// +/// Visual state of a minion sprite, derived from the agent's +/// . Maps Active/Idle/Thinking/Error +/// to frontend animation states. +/// +public enum MinionState +{ + /// Agent is actively processing — minion shows working animation. + Active, + + /// Agent is idle — minion shows idle/patrolling animation. + Idle, + + /// Agent is thinking (LLM call in flight) — minion shows thinking animation. + Thinking, + + /// Agent encountered an error — minion shows error/distress animation. + Error +} + +/// +/// Static mapping entry that associates an agent ID with a minion's +/// display side and position index within that side. +/// +/// 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. +/// +/// Agent identifier, e.g. "rex", "dex". +/// Which side of the dashboard the minion occupies. +/// Zero-based position index within the side. +/// Human-readable name, e.g. "Rex". +public record AgentMinionMapping( + string AgentId, + MinionSide Side, + int PositionIndex, + string DisplayName +); + +/// +/// 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). +/// +/// Agent identifier, e.g. "rex". +/// Human-readable minion name, e.g. "Rex". +/// Which side of the dashboard — Dev or Business. +/// Position within the side (0-based). +/// Current minion animation state. +/// ISO 8601 timestamp of the state change. +public record MinionStateUpdate( + string AgentId, + string DisplayName, + MinionSide Side, + int PositionIndex, + MinionState State, + string Timestamp +); \ No newline at end of file diff --git a/backend/ControlCenter/Program.cs b/backend/ControlCenter/Program.cs index 757b20a..2b322ab 100644 --- a/backend/ControlCenter/Program.cs +++ b/backend/ControlCenter/Program.cs @@ -52,6 +52,11 @@ builder.Services.AddSignalR(); builder.Services.AddSingleton(); builder.Services.AddHostedService(sp => sp.GetRequiredService()); +// ── Agent-Minion Mapper Service ──────────────────────────── +// Maps agents to minion sprites/positions and publishes state +// updates through SignalR. +builder.Services.AddSingleton(); + var app = builder.Build(); // ── Middleware ────────────────────────────────────────────── diff --git a/backend/ControlCenter/Services/AgentMinionMapperService.cs b/backend/ControlCenter/Services/AgentMinionMapperService.cs new file mode 100644 index 0000000..0dd82ef --- /dev/null +++ b/backend/ControlCenter/Services/AgentMinionMapperService.cs @@ -0,0 +1,193 @@ +using ControlCenter.Hubs; +using ControlCenter.Models; +using Microsoft.AspNetCore.SignalR; + +namespace ControlCenter.Services; + +/// +/// Service that maps Linear agents to minion sprites and positions +/// in the Control Center dashboard. +/// +/// Static mappings define where each minion appears: +/// +/// Dev side: Rex (0), Dex (1), Hex (2) +/// Business side: Larry (0), Mel (1), Buzz (2) +/// +/// +/// Dynamic state is derived from the agent's : +/// +/// Active → +/// Idle → +/// Thinking → +/// Error → +/// +/// +/// State updates are published through the +/// SignalR hub so that connected clients can animate minion sprites +/// in real time. +/// +public class AgentMinionMapperService +{ + private readonly ILogger _logger; + private readonly IHubContext _hubContext; + + /// + /// Static agent-to-minion mapping table. Defines which side and position + /// each agent's minion occupies on the dashboard. + /// + private static readonly Dictionary 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"), + }; + + /// + /// Maps string values to . + /// + private static readonly Dictionary StatusToMinionState = new() + { + ["active"] = MinionState.Active, + ["idle"] = MinionState.Idle, + ["thinking"] = MinionState.Thinking, + ["error"] = MinionState.Error, + }; + + public AgentMinionMapperService( + ILogger logger, + IHubContext hubContext) + { + _logger = logger; + _hubContext = hubContext; + } + + /// + /// Gets the minion mapping for a given agent ID. + /// Returns null if the agent is not mapped to a minion position. + /// + /// The agent identifier, e.g. "rex", "dex". + /// The mapping record, or null if unmapped. + public AgentMinionMapping? GetMapping(string agentId) + { + return Mappings.GetValueOrDefault(agentId?.ToLowerInvariant() ?? string.Empty); + } + + /// + /// Gets all minion mappings, ordered by side then position index. + /// + /// All mappings, sorted for consistent display order. + public IReadOnlyList GetAllMappings() + { + return Mappings.Values + .OrderBy(m => m.Side) + .ThenBy(m => m.PositionIndex) + .ToList(); + } + + /// + /// Converts an agent status string to a . + /// Falls back to for unrecognized statuses. + /// + /// Agent status string: "active", "idle", "thinking", or "error". + /// The corresponding minion state. + public MinionState StatusToState(string status) + { + return StatusToMinionState.GetValueOrDefault( + status?.ToLowerInvariant() ?? string.Empty, + MinionState.Idle); + } + + /// + /// Publishes a minion state update through SignalR when an agent's + /// status changes. Only publishes for agents that have a minion mapping. + /// + /// This is the primary integration point: the + /// calls this method + /// whenever it detects a status change from the OpenClaw Gateway. + /// + /// The agent whose status changed, e.g. "dex". + /// The new status string: "active", "idle", "thinking", or "error". + /// A task that completes when the SignalR message has been sent. + 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); + } + + /// + /// Gets the current minion state for all mapped agents, suitable + /// for building an initial fleet snapshot. + /// + /// All minion mappings with their current (idle) state. + public IReadOnlyList 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(); + } + + /// + /// Converts a status string to an + /// for SignalR push. Uses the mapping table for display names and roles. + /// + 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 + ); + } +} \ No newline at end of file From fb88eab4d11d57601848e0aeaa17e6e444232078 Mon Sep 17 00:00:00 2001 From: "cubecraft-agents[bot]" <3458173+cubecraft-agents[bot]@users.noreply.github.com> Date: Mon, 27 Apr 2026 10:07:07 +0000 Subject: [PATCH 6/9] feat(CUB-55): add SendStatusUpdate method to AgentStatusHub --- backend/ControlCenter/Hubs/AgentStatusHub.cs | 27 +++++++ .../Hubs/Models/AgentStatusModels.cs | 74 +++++++++++++++++++ 2 files changed, 101 insertions(+) diff --git a/backend/ControlCenter/Hubs/AgentStatusHub.cs b/backend/ControlCenter/Hubs/AgentStatusHub.cs index f0d4497..c790b29 100644 --- a/backend/ControlCenter/Hubs/AgentStatusHub.cs +++ b/backend/ControlCenter/Hubs/AgentStatusHub.cs @@ -37,6 +37,33 @@ public class AgentStatusHub : Hub _logger = logger; } + /// + /// Broadcasts an agent status update to all connected clients. + /// + /// + /// 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 record and relayed through the + /// callback. + /// + /// + /// The agent status update DTO to broadcast. + 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); + } + /// /// Adds the calling connection to the fleet group. /// Once joined, the client will receive all agent status changes diff --git a/backend/ControlCenter/Hubs/Models/AgentStatusModels.cs b/backend/ControlCenter/Hubs/Models/AgentStatusModels.cs index 3c9c97d..3edb603 100644 --- a/backend/ControlCenter/Hubs/Models/AgentStatusModels.cs +++ b/backend/ControlCenter/Hubs/Models/AgentStatusModels.cs @@ -72,6 +72,80 @@ public record TaskProgressUpdate( string? Elapsed ); +/// +/// Data transfer object for broadcasting agent status updates +/// to all connected SignalR clients via the hub's SendStatusUpdate method. +/// +/// This DTO provides a mutable, serialization-friendly alternative to +/// for callers that construct updates +/// from external data sources (e.g., HTTP API payloads). +/// +public class AgentStatusUpdateDto +{ + /// + /// Agent identifier, e.g. "otto", "dex", "rex". + /// + public string AgentId { get; set; } = string.Empty; + + /// + /// Human-readable display name, e.g. "Otto", "Dex". + /// + public string DisplayName { get; set; } = string.Empty; + + /// + /// Role description, e.g. "Orchestrator Agent", "Backend Specialist". + /// + public string Role { get; set; } = string.Empty; + + /// + /// Current operational status of the agent as lowercase string: + /// "active", "idle", "thinking", "error". + /// + public string Status { get; set; } = string.Empty; + + /// + /// Description of the agent's current task, if any. + /// + public string? CurrentTask { get; set; } + + /// + /// Full session key, e.g. "agent:otto:telegram:direct:8787451565". + /// + public string SessionKey { get; set; } = string.Empty; + + /// + /// Communication channel, e.g. "telegram", "discord", "slack". + /// + public string Channel { get; set; } = string.Empty; + + /// + /// ISO 8601 timestamp of the agent's last activity. + /// + public string LastActivity { get; set; } = string.Empty; + + /// + /// Error message when the agent status is "error". + /// + public string? ErrorMessage { get; set; } + + /// + /// Converts this DTO to an immutable record + /// for use with the typed SignalR client interface. + /// + /// An with equivalent field values. + public AgentStatusUpdate ToUpdate() => new( + AgentId, + DisplayName, + Role, + Status, + CurrentTask, + SessionKey, + Channel, + LastActivity, + ErrorMessage + ); +} + /// /// Snapshot of an agent's full card data, sent on initial connection /// or when the fleet state is requested. From c8ca182af0a3e2ccc2409d2733c953d7daf6b443 Mon Sep 17 00:00:00 2001 From: "cubecraft-agents[bot]" <3458173+cubecraft-agents[bot]@users.noreply.github.com> Date: Mon, 27 Apr 2026 12:40:29 +0000 Subject: [PATCH 7/9] =?UTF-8?q?CUB-52:=20responsive=20hub=20grid=20CSS=20?= =?UTF-8?q?=E2=80=94=20extract=20styles=20to=20SCSS,=20add=202-col=20deskt?= =?UTF-8?q?op=20/=201-col=20mobile=20breakpoint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/pages/hub/hub-page.component.scss | 28 +++++++++++++++++++ .../src/app/pages/hub/hub-page.component.ts | 13 +-------- 2 files changed, 29 insertions(+), 12 deletions(-) create mode 100644 frontend/src/app/pages/hub/hub-page.component.scss diff --git a/frontend/src/app/pages/hub/hub-page.component.scss b/frontend/src/app/pages/hub/hub-page.component.scss new file mode 100644 index 0000000..1b2c65f --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/frontend/src/app/pages/hub/hub-page.component.ts b/frontend/src/app/pages/hub/hub-page.component.ts index 7819be4..1749b94 100644 --- a/frontend/src/app/pages/hub/hub-page.component.ts +++ b/frontend/src/app/pages/hub/hub-page.component.ts @@ -9,18 +9,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';

Command Hub — Fleet status grid will render here

`, - styles: [` - .hub-page { - display: flex; - align-items: center; - justify-content: center; - min-height: 400px; - } - .hub-page__placeholder { - color: var(--cc-on-surface-variant); - font-size: 16px; - } - `], + styleUrl: './hub-page.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) export class HubPageComponent {} \ No newline at end of file From 5375d117922e0c40b6d0203418e2fd5f431fe268 Mon Sep 17 00:00:00 2001 From: rex-bot Date: Mon, 27 Apr 2026 14:17:04 +0000 Subject: [PATCH 8/9] CUB-48: Agent Status Badge component with pulse animations --- .../agent-status-badge.component.html | 8 + .../agent-status-badge.component.scss | 146 ++++++++++++++++++ .../agent-status-badge.component.ts | 54 +++++++ .../components/agent-status-badge/index.ts | 1 + frontend/src/app/components/index.ts | 1 + 5 files changed, 210 insertions(+) create mode 100644 frontend/src/app/components/agent-status-badge/agent-status-badge.component.html create mode 100644 frontend/src/app/components/agent-status-badge/agent-status-badge.component.scss create mode 100644 frontend/src/app/components/agent-status-badge/agent-status-badge.component.ts create mode 100644 frontend/src/app/components/agent-status-badge/index.ts create mode 100644 frontend/src/app/components/index.ts diff --git a/frontend/src/app/components/agent-status-badge/agent-status-badge.component.html b/frontend/src/app/components/agent-status-badge/agent-status-badge.component.html new file mode 100644 index 0000000..e88ea86 --- /dev/null +++ b/frontend/src/app/components/agent-status-badge/agent-status-badge.component.html @@ -0,0 +1,8 @@ + + + {{ displayLabel }} + \ No newline at end of file diff --git a/frontend/src/app/components/agent-status-badge/agent-status-badge.component.scss b/frontend/src/app/components/agent-status-badge/agent-status-badge.component.scss new file mode 100644 index 0000000..331d6f9 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/frontend/src/app/components/agent-status-badge/agent-status-badge.component.ts b/frontend/src/app/components/agent-status-badge/agent-status-badge.component.ts new file mode 100644 index 0000000..a246d63 --- /dev/null +++ b/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(); + + /** Label text shown inside the badge. Defaults to title-cased status. */ + readonly label = input(); + + 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); + } +} \ No newline at end of file diff --git a/frontend/src/app/components/agent-status-badge/index.ts b/frontend/src/app/components/agent-status-badge/index.ts new file mode 100644 index 0000000..e531d31 --- /dev/null +++ b/frontend/src/app/components/agent-status-badge/index.ts @@ -0,0 +1 @@ +export { AgentStatusBadgeComponent } from './agent-status-badge.component'; \ No newline at end of file diff --git a/frontend/src/app/components/index.ts b/frontend/src/app/components/index.ts new file mode 100644 index 0000000..09c8fb9 --- /dev/null +++ b/frontend/src/app/components/index.ts @@ -0,0 +1 @@ +export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component'; \ No newline at end of file From 2a21cad431a6b3ed5474b1fb6b146a517e7d80cf Mon Sep 17 00:00:00 2001 From: rex-bot Date: Mon, 27 Apr 2026 14:36:14 +0000 Subject: [PATCH 9/9] feat(CUB-45): [Control Center] AgentCard Component Final Integration --- .../agent-card/agent-card.component.html | 82 ++++++ .../agent-card/agent-card.component.scss | 234 ++++++++++++++++++ .../agent-card/agent-card.component.ts | 127 ++++++++++ .../src/app/command-hub/components/index.ts | 1 + 4 files changed, 444 insertions(+) create mode 100644 frontend/src/app/command-hub/components/agent-card/agent-card.component.html create mode 100644 frontend/src/app/command-hub/components/agent-card/agent-card.component.scss create mode 100644 frontend/src/app/command-hub/components/agent-card/agent-card.component.ts create mode 100644 frontend/src/app/command-hub/components/index.ts diff --git a/frontend/src/app/command-hub/components/agent-card/agent-card.component.html b/frontend/src/app/command-hub/components/agent-card/agent-card.component.html new file mode 100644 index 0000000..8140132 --- /dev/null +++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.html @@ -0,0 +1,82 @@ + + + + + +
+ + +
+
+ + {{ statusLabel() }} +
+ +
+ {{ displayName || agentId }} + {{ role }} +
+
+ + +
+

+ {{ status === 'error' ? errorMessage || task : task }} +

+
+ + +
+ + {{ progress }}% +
+ + +
+
+ + + {{ channel }} + + + {{ lastActivityLabel() }} + +
+ + + + + +
+
\ No newline at end of file diff --git a/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss b/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss new file mode 100644 index 0000000..2846e74 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts b/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts new file mode 100644 index 0000000..a378e62 --- /dev/null +++ b/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 = { + 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 = { + 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 = { + 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}`); +} \ No newline at end of file diff --git a/frontend/src/app/command-hub/components/index.ts b/frontend/src/app/command-hub/components/index.ts new file mode 100644 index 0000000..39f0d45 --- /dev/null +++ b/frontend/src/app/command-hub/components/index.ts @@ -0,0 +1 @@ +export * from './agent-card/agent-card.component'; \ No newline at end of file