Compare commits
1 Commits
agent/rex/
...
agent/dex/
| Author | SHA1 | Date | |
|---|---|---|---|
|
38b7d13312 |
21
backend/.gitignore
vendored
Normal file
21
backend/.gitignore
vendored
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
## .NET
|
||||||
|
bin/
|
||||||
|
obj/
|
||||||
|
*.user
|
||||||
|
*.suo
|
||||||
|
*.cache
|
||||||
|
*.dll
|
||||||
|
*.pdb
|
||||||
|
|
||||||
|
## IDE
|
||||||
|
.vs/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*~
|
||||||
|
|
||||||
|
## OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
## Environment
|
||||||
|
.env
|
||||||
13
backend/ControlCenter.Api.csproj
Normal file
13
backend/ControlCenter.Api.csproj
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<Project Sdk="Microsoft.NET.Sdk.Web">
|
||||||
|
|
||||||
|
<PropertyGroup>
|
||||||
|
<TargetFramework>net9.0</TargetFramework>
|
||||||
|
<Nullable>enable</Nullable>
|
||||||
|
<ImplicitUsings>enable</ImplicitUsings>
|
||||||
|
</PropertyGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.14" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
|
</Project>
|
||||||
52
backend/Hubs/AgentStatusHub.cs
Normal file
52
backend/Hubs/AgentStatusHub.cs
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
using Microsoft.AspNetCore.SignalR;
|
||||||
|
|
||||||
|
namespace ControlCenter.Api.Hubs;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// SignalR hub for broadcasting agent status updates to connected clients.
|
||||||
|
///
|
||||||
|
/// <para>
|
||||||
|
/// Clients connect to this hub at the <c>/hub</c> endpoint to receive
|
||||||
|
/// real-time agent state changes. A background service subscribes to
|
||||||
|
/// OpenClaw Gateway events and pushes them through this hub.
|
||||||
|
/// </para>
|
||||||
|
///
|
||||||
|
/// <para>
|
||||||
|
/// Architecture note: This hub bridges OpenClaw Gateway events to SignalR clients.
|
||||||
|
/// The full typed client interface and extension methods will be added in a
|
||||||
|
/// subsequent task (CUB-55).
|
||||||
|
/// </para>
|
||||||
|
/// </summary>
|
||||||
|
public class AgentStatusHub : Hub
|
||||||
|
{
|
||||||
|
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>
|
||||||
|
/// Overrides <see cref="Hub.OnConnectedAsync"/> to log new connections.
|
||||||
|
/// </summary>
|
||||||
|
public override Task OnConnectedAsync()
|
||||||
|
{
|
||||||
|
_logger.LogDebug("Client connected: {ConnectionId}", Context.ConnectionId);
|
||||||
|
return base.OnConnectedAsync();
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Overrides <see cref="Hub.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("Client disconnected: {ConnectionId}", Context.ConnectionId);
|
||||||
|
return base.OnDisconnectedAsync(exception);
|
||||||
|
}
|
||||||
|
}
|
||||||
24
backend/Program.cs
Normal file
24
backend/Program.cs
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
using ControlCenter.Api.Hubs;
|
||||||
|
|
||||||
|
var builder = WebApplication.CreateBuilder(args);
|
||||||
|
|
||||||
|
// Add services to the container.
|
||||||
|
builder.Services.AddOpenApi();
|
||||||
|
|
||||||
|
// Register SignalR for real-time agent status updates
|
||||||
|
builder.Services.AddSignalR();
|
||||||
|
|
||||||
|
var app = builder.Build();
|
||||||
|
|
||||||
|
// Configure the HTTP request pipeline.
|
||||||
|
if (app.Environment.IsDevelopment())
|
||||||
|
{
|
||||||
|
app.MapOpenApi();
|
||||||
|
}
|
||||||
|
|
||||||
|
app.UseHttpsRedirection();
|
||||||
|
|
||||||
|
// Map SignalR hub endpoint
|
||||||
|
app.MapHub<AgentStatusHub>("/hub");
|
||||||
|
|
||||||
|
app.Run();
|
||||||
23
backend/Properties/launchSettings.json
Normal file
23
backend/Properties/launchSettings.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
8
backend/appsettings.Development.json
Normal file
8
backend/appsettings.Development.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"Logging": {
|
||||||
|
"LogLevel": {
|
||||||
|
"Default": "Information",
|
||||||
|
"Microsoft.AspNetCore": "Warning"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
9
backend/appsettings.json
Normal file
9
backend/appsettings.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"Logging": {
|
||||||
|
"LogLevel": {
|
||||||
|
"Default": "Information",
|
||||||
|
"Microsoft.AspNetCore": "Warning"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"AllowedHosts": "*"
|
||||||
|
}
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
<article
|
|
||||||
class="agent-card"
|
|
||||||
[class]="'agent-card--' + status()"
|
|
||||||
[attr.aria-label]="'Agent card: ' + statusLabel() + ' status'"
|
|
||||||
[style.--agent-status-color]="statusColorVar()"
|
|
||||||
[style.--agent-status-bg]="statusBgVar()"
|
|
||||||
>
|
|
||||||
<!-- Left border accent (4px, matching status color) -->
|
|
||||||
<div class="agent-card__accent"></div>
|
|
||||||
|
|
||||||
<!-- Card body -->
|
|
||||||
<div class="agent-card__body">
|
|
||||||
<!-- Header row: status dot + status label + channel + last activity -->
|
|
||||||
<div class="agent-card__header">
|
|
||||||
<div class="agent-card__status-row">
|
|
||||||
<span
|
|
||||||
class="status-dot agent-card__dot"
|
|
||||||
[ngClass]="[statusDotClass()]"
|
|
||||||
[attr.aria-label]="statusLabel() + ' status indicator'"
|
|
||||||
role="status"
|
|
||||||
></span>
|
|
||||||
<span class="agent-card__status-label" [style.color]="statusColorVar()">
|
|
||||||
{{ statusLabel() }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="agent-card__meta">
|
|
||||||
@if (channel()) {
|
|
||||||
<span class="agent-card__channel text-mono">
|
|
||||||
<mat-icon class="agent-card__channel-icon" fontIcon="forum" [inline]="true"></mat-icon>
|
|
||||||
{{ channel() }}
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
<span class="agent-card__last-activity text-mono">{{ lastActivityText() }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Task description -->
|
|
||||||
@if (task()) {
|
|
||||||
<p class="agent-card__task">{{ task() }}</p>
|
|
||||||
}
|
|
||||||
|
|
||||||
<!-- Progress bar -->
|
|
||||||
@if (showProgress()) {
|
|
||||||
<div class="agent-card__progress">
|
|
||||||
<mat-progress-bar
|
|
||||||
mode="determinate"
|
|
||||||
[value]="progress()"
|
|
||||||
[attr.aria-label]="'Task progress: ' + progress() + '%'"
|
|
||||||
></mat-progress-bar>
|
|
||||||
<div class="agent-card__progress-info">
|
|
||||||
<span class="text-mono">{{ progress() }}%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<!-- Footer: session key (truncated) + jump button -->
|
|
||||||
<div class="agent-card__footer">
|
|
||||||
<span class="agent-card__session text-mono" [matTooltip]="sessionKey()">
|
|
||||||
{{ sessionKey().length > 28 ? sessionKey().substring(0, 28) + '…' : sessionKey() }}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
mat-icon-button
|
|
||||||
class="agent-card__jump"
|
|
||||||
[attr.aria-label]="'Jump to agent session'"
|
|
||||||
matTooltip="Jump to session"
|
|
||||||
>
|
|
||||||
<mat-icon>arrow_forward</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
@@ -1,277 +0,0 @@
|
|||||||
// ============================================================================
|
|
||||||
// Agent Card Styles — M3 Tactical Dark
|
|
||||||
// Per spec Section 7.3: Agent Card Component
|
|
||||||
// Section 7.5: Animation Specs
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Card Shell
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.agent-card {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
min-width: var(--cc-card-min-width, 320px);
|
|
||||||
border-radius: var(--cc-card-border-radius, 16px);
|
|
||||||
background-color: var(--cc-surface-container);
|
|
||||||
overflow: hidden;
|
|
||||||
transition: background-color 150ms ease, box-shadow 150ms ease;
|
|
||||||
|
|
||||||
// M3 state layer overlay on hover (8% primary)
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
background-color: rgba(255, 255, 255, 0.08);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 150ms ease;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::after {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Focus-visible outline for keyboard navigation
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 3px solid var(--status-active);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Left-border accent (4px, matching status color)
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.agent-card__accent {
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 4px;
|
|
||||||
background-color: var(--agent-status-color);
|
|
||||||
border-radius: 4px 0 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Card Body
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.agent-card__body {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
padding: var(--cc-card-padding, 20px);
|
|
||||||
min-width: 0; // Prevent flex blowout for long text
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Header Row
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.agent-card__header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__status-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__dot {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__status-label {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
color: var(--cc-on-surface-variant);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__channel {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__channel-icon {
|
|
||||||
font-size: 14px;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__last-activity {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Task Description
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.agent-card__task {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: var(--cc-on-surface);
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Progress Bar
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.agent-card__progress {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__progress-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--cc-on-surface-variant);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Override M3 progress bar track to use status color
|
|
||||||
.agent-card__progress .mat-mdc-progress-bar {
|
|
||||||
--mdc-linear-progress-active-indicator-color: var(--agent-status-color);
|
|
||||||
--mdc-linear-progress-track-color: var(--agent-status-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Footer Row
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.agent-card__footer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: auto; // Push footer to bottom
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__session {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--cc-on-surface-variant);
|
|
||||||
opacity: 0.6;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Quick-Jump Button — M3 FilledTonalIconButton style
|
|
||||||
// Per spec: → Jump button using M3 FilledTonalIconButton
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.agent-card__jump {
|
|
||||||
// M3 FilledTonal style: secondary container color
|
|
||||||
--mdc-icon-button-icon-color: var(--cc-on-surface);
|
|
||||||
background-color: var(--cc-surface-container-high);
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
// State layer overlay on hover (8% primary)
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: rgba(255, 255, 255, 0.08);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 150ms ease;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Focus-visible ring
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 3px solid var(--status-active);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Active state
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-icon {
|
|
||||||
font-size: 20px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Status-specific card backgrounds (subtle tint)
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.agent-card--active {
|
|
||||||
background-color: var(--status-active-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card--thinking {
|
|
||||||
background-color: var(--status-thinking-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card--error {
|
|
||||||
background-color: var(--status-error-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Idle and offline use default surface-container
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Touch-First Targets
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Minimum touch target: 48px (M3 standard)
|
|
||||||
.agent-card__jump {
|
|
||||||
min-width: 48px;
|
|
||||||
min-height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Accessibility: Reduced Motion
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.agent-card {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__jump {
|
|
||||||
transition: none;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Responsive: Mobile adjustments
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
@media (max-width: 599px) {
|
|
||||||
.agent-card {
|
|
||||||
min-width: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card__body {
|
|
||||||
padding: 16px;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
// ============================================================================
|
|
||||||
// Agent Card Component
|
|
||||||
// Per spec Section 7.3: Agent Card Component Interface
|
|
||||||
// Section 7.5: Animation Specs
|
|
||||||
// ============================================================================
|
|
||||||
import { ChangeDetectionStrategy, Component, input, computed } from '@angular/core';
|
|
||||||
import { CommonModule } from '@angular/common';
|
|
||||||
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 displays a single agent's status in the Command Hub grid.
|
|
||||||
*
|
|
||||||
* Inputs:
|
|
||||||
* - status: AgentStatus — current agent status
|
|
||||||
* - task: string — current task description
|
|
||||||
* - progress: number — task progress percentage (0–100)
|
|
||||||
* - sessionKey: string — full session key
|
|
||||||
* - channel: string — communication channel (e.g., "telegram")
|
|
||||||
* - lastActivity: Date — timestamp of last activity
|
|
||||||
*
|
|
||||||
* Accessibility:
|
|
||||||
* - role="article" on the card element
|
|
||||||
* - aria-labels for status badge and interactive elements
|
|
||||||
* - focus-visible outlines for keyboard navigation
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
selector: 'app-agent-card',
|
|
||||||
standalone: true,
|
|
||||||
imports: [
|
|
||||||
CommonModule,
|
|
||||||
MatIconModule,
|
|
||||||
MatButtonModule,
|
|
||||||
MatProgressBarModule,
|
|
||||||
MatTooltipModule,
|
|
||||||
],
|
|
||||||
templateUrl: './agent-card.component.html',
|
|
||||||
styleUrl: './agent-card.component.scss',
|
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
||||||
})
|
|
||||||
export class AgentCardComponent {
|
|
||||||
/** Current agent status */
|
|
||||||
readonly status = input.required<AgentStatus>();
|
|
||||||
|
|
||||||
/** Current task description */
|
|
||||||
readonly task = input<string>('');
|
|
||||||
|
|
||||||
/** Task progress percentage (0–100) */
|
|
||||||
readonly progress = input<number>(0);
|
|
||||||
|
|
||||||
/** Full session key */
|
|
||||||
readonly sessionKey = input.required<string>();
|
|
||||||
|
|
||||||
/** Communication channel (e.g., "telegram") */
|
|
||||||
readonly channel = input<string>('');
|
|
||||||
|
|
||||||
/** Timestamp of last activity */
|
|
||||||
readonly lastActivity = input<Date>(new Date());
|
|
||||||
|
|
||||||
/** Map status to CSS custom property name for dynamic color binding */
|
|
||||||
readonly statusColorVar = 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()];
|
|
||||||
});
|
|
||||||
|
|
||||||
/** Map status to background tint CSS variable */
|
|
||||||
readonly statusBgVar = computed(() => {
|
|
||||||
const map: Record<AgentStatus, string> = {
|
|
||||||
active: 'var(--status-active-bg)',
|
|
||||||
idle: 'var(--status-idle-bg)',
|
|
||||||
thinking: 'var(--status-thinking-bg)',
|
|
||||||
error: 'var(--status-error-bg)',
|
|
||||||
offline: 'var(--cc-surface-container)',
|
|
||||||
};
|
|
||||||
return map[this.status()];
|
|
||||||
});
|
|
||||||
|
|
||||||
/** Human-readable status label */
|
|
||||||
readonly statusLabel = computed(() => {
|
|
||||||
const map: Record<AgentStatus, string> = {
|
|
||||||
active: 'Active',
|
|
||||||
idle: 'Idle',
|
|
||||||
thinking: 'Thinking',
|
|
||||||
error: 'Error',
|
|
||||||
offline: 'Offline',
|
|
||||||
};
|
|
||||||
return map[this.status()];
|
|
||||||
});
|
|
||||||
|
|
||||||
/** CSS class for status dot animation */
|
|
||||||
readonly statusDotClass = computed(() => `status-dot--${this.status()}`);
|
|
||||||
|
|
||||||
/** Format last activity as relative time string */
|
|
||||||
readonly lastActivityText = computed(() => {
|
|
||||||
const now = Date.now();
|
|
||||||
const then = this.lastActivity().getTime();
|
|
||||||
const diffMs = now - then;
|
|
||||||
const diffMin = Math.floor(diffMs / 60000);
|
|
||||||
if (diffMin < 1) return 'Just now';
|
|
||||||
if (diffMin < 60) return `${diffMin}m ago`;
|
|
||||||
const diffHr = Math.floor(diffMin / 60);
|
|
||||||
if (diffHr < 24) return `${diffHr}h ago`;
|
|
||||||
return `${Math.floor(diffHr / 24)}d ago`;
|
|
||||||
});
|
|
||||||
|
|
||||||
/** Whether to show progress bar */
|
|
||||||
readonly showProgress = computed(() => {
|
|
||||||
const s = this.status();
|
|
||||||
return (s === 'active' || s === 'thinking') && this.progress() > 0;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { AgentCardComponent } from './agent-card.component';
|
|
||||||
@@ -1,88 +1,26 @@
|
|||||||
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||||
import { AgentCardComponent } from '../../components/agent-card/agent-card.component';
|
|
||||||
import { AgentCardData } from '../../models/agent.model';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-hub-page',
|
selector: 'app-hub-page',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [AgentCardComponent],
|
imports: [],
|
||||||
template: `
|
template: `
|
||||||
<div class="hub-page">
|
<div class="hub-page">
|
||||||
<div class="hub-page__grid">
|
<p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
|
||||||
@for (agent of agents(); track agent.id) {
|
|
||||||
<app-agent-card
|
|
||||||
[status]="agent.status"
|
|
||||||
[task]="agent.currentTask ?? ''"
|
|
||||||
[progress]="agent.taskProgress ?? 0"
|
|
||||||
[sessionKey]="agent.sessionKey"
|
|
||||||
[channel]="agent.channel"
|
|
||||||
[lastActivity]="agent.lastActivity"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
styles: [`
|
styles: [`
|
||||||
.hub-page {
|
.hub-page {
|
||||||
padding: var(--cc-section-padding, 24px);
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
.hub-page__placeholder {
|
||||||
.hub-page__grid {
|
color: var(--cc-on-surface-variant);
|
||||||
display: grid;
|
font-size: 16px;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(var(--cc-card-min-width, 320px), 1fr));
|
|
||||||
gap: var(--cc-card-gap, 16px);
|
|
||||||
}
|
}
|
||||||
`],
|
`],
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
})
|
})
|
||||||
export class HubPageComponent {
|
export class HubPageComponent {}
|
||||||
/** Demo agents for development — will be replaced by SignalR data */
|
|
||||||
protected readonly agents = signal<AgentCardData[]>([
|
|
||||||
{
|
|
||||||
id: 'otto',
|
|
||||||
displayName: 'Otto',
|
|
||||||
role: 'Orchestrator',
|
|
||||||
status: 'active',
|
|
||||||
currentTask: 'Reviewing PR #42',
|
|
||||||
taskProgress: 65,
|
|
||||||
taskElapsed: '04m 12s',
|
|
||||||
sessionKey: 'agent:otto:telegram:direct:8787451565',
|
|
||||||
channel: 'telegram',
|
|
||||||
lastActivity: new Date(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'rex',
|
|
||||||
displayName: 'Rex',
|
|
||||||
role: 'Frontend Specialist',
|
|
||||||
status: 'thinking',
|
|
||||||
currentTask: 'Building AgentCard component',
|
|
||||||
taskProgress: 30,
|
|
||||||
taskElapsed: '02m 45s',
|
|
||||||
sessionKey: 'agent:rex:subagent:0cdbf600',
|
|
||||||
channel: 'telegram',
|
|
||||||
lastActivity: new Date(Date.now() - 120000),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'dex',
|
|
||||||
displayName: 'Dex',
|
|
||||||
role: 'Backend Engineer',
|
|
||||||
status: 'idle',
|
|
||||||
sessionKey: 'agent:dex:slack:channel:C01234567',
|
|
||||||
channel: 'slack',
|
|
||||||
lastActivity: new Date(Date.now() - 300000),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'hex',
|
|
||||||
displayName: 'Hex',
|
|
||||||
role: 'Database Architect',
|
|
||||||
status: 'error',
|
|
||||||
currentTask: 'Migration failed — rollback',
|
|
||||||
taskProgress: 0,
|
|
||||||
taskElapsed: '00m 00s',
|
|
||||||
sessionKey: 'agent:hex:slack:channel:C01234568',
|
|
||||||
channel: 'slack',
|
|
||||||
lastActivity: new Date(Date.now() - 1800000),
|
|
||||||
errorMessage: 'Connection timeout',
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user