Compare commits
2 Commits
ea603c3552
...
agent/hex/
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
040d4cb54d | ||
|
|
47cbeed456 |
@@ -8,11 +8,12 @@
|
|||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.14" />
|
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.14" />
|
||||||
<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.4">
|
<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.4">
|
||||||
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
||||||
<PrivateAssets>all</PrivateAssets>
|
<PrivateAssets>all</PrivateAssets>
|
||||||
</PackageReference>
|
</PackageReference>
|
||||||
<PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
|
<PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
|
||||||
|
<PackageReference Include="Swashbuckle.AspNetCore" Version="10.1.7" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
@@ -37,33 +37,6 @@ public class AgentStatusHub : Hub<IAgentStatusClient>
|
|||||||
_logger = 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>
|
/// <summary>
|
||||||
/// Adds the calling connection to the fleet group.
|
/// Adds the calling connection to the fleet group.
|
||||||
/// Once joined, the client will receive all agent status changes
|
/// Once joined, the client will receive all agent status changes
|
||||||
|
|||||||
@@ -72,80 +72,6 @@ public record TaskProgressUpdate(
|
|||||||
string? Elapsed
|
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>
|
/// <summary>
|
||||||
/// Snapshot of an agent's full card data, sent on initial connection
|
/// Snapshot of an agent's full card data, sent on initial connection
|
||||||
/// or when the fleet state is requested.
|
/// or when the fleet state is requested.
|
||||||
|
|||||||
@@ -1,72 +0,0 @@
|
|||||||
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
|
|
||||||
);
|
|
||||||
@@ -52,11 +52,6 @@ builder.Services.AddSignalR();
|
|||||||
builder.Services.AddSingleton<GatewayEventBridgeService>();
|
builder.Services.AddSingleton<GatewayEventBridgeService>();
|
||||||
builder.Services.AddHostedService(sp => sp.GetRequiredService<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();
|
var app = builder.Build();
|
||||||
|
|
||||||
// ── Middleware ──────────────────────────────────────────────
|
// ── Middleware ──────────────────────────────────────────────
|
||||||
|
|||||||
@@ -1,193 +0,0 @@
|
|||||||
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
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,146 +0,0 @@
|
|||||||
// ============================================================================
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { AgentStatusBadgeComponent } from './agent-status-badge.component';
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
// ============================================================================
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -9,7 +9,18 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|||||||
<p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
|
<p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
styleUrl: './hub-page.component.scss',
|
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;
|
||||||
|
}
|
||||||
|
`],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
})
|
})
|
||||||
export class HubPageComponent {}
|
export class HubPageComponent {}
|
||||||
@@ -48,17 +48,6 @@ html {
|
|||||||
// These are NOT part of the M3 tonal palette; they are semantic overrides.
|
// These are NOT part of the M3 tonal palette; they are semantic overrides.
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
:root {
|
: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 colors ---
|
||||||
--status-active: #38BDF8;
|
--status-active: #38BDF8;
|
||||||
--status-idle: #2DD4BF;
|
--status-idle: #2DD4BF;
|
||||||
@@ -101,7 +90,7 @@ html {
|
|||||||
// Global Body Styles
|
// Global Body Styles
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
body {
|
body {
|
||||||
background-color: var(--color-surface);
|
background-color: var(--cc-background);
|
||||||
color: var(--cc-on-surface);
|
color: var(--cc-on-surface);
|
||||||
font-family: 'Inter', 'Roboto', sans-serif;
|
font-family: 'Inter', 'Roboto', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user