Compare commits
1 Commits
ab19a7ccde
...
agent/rex/
| Author | SHA1 | Date | |
|---|---|---|---|
| f29eaa9685 |
@@ -1,33 +0,0 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
yarn-error.log
|
||||
|
||||
# Build output (rebuilt in container)
|
||||
dist/
|
||||
out-tsc/
|
||||
|
||||
# Angular cache
|
||||
.angular/cache/
|
||||
|
||||
# IDE
|
||||
.idea/
|
||||
.vscode/
|
||||
*.sublime-workspace
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Git
|
||||
.git/
|
||||
.gitignore
|
||||
|
||||
# Docker
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
|
||||
# Misc
|
||||
coverage/
|
||||
tmp/
|
||||
*.log
|
||||
@@ -1,38 +0,0 @@
|
||||
# ============================================================
|
||||
# Control Center Frontend — Multi-stage Docker Build
|
||||
# Angular 21 + nginx for static serving + API proxy
|
||||
# ============================================================
|
||||
|
||||
# --- Build Stage ---
|
||||
FROM node:22-slim AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Install dependencies first (layer caching)
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
|
||||
# Copy source and build production bundle
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
# --- Runtime Stage ---
|
||||
FROM nginx:1.27-alpine AS runtime
|
||||
|
||||
# Remove default nginx config
|
||||
RUN rm /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Copy custom nginx config
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Copy built Angular app from builder stage
|
||||
COPY --from=builder /app/dist/frontend/browser /usr/share/nginx/html
|
||||
|
||||
# Expose HTTP port
|
||||
EXPOSE 80
|
||||
|
||||
# Health check — confirm nginx is serving
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||
CMD wget -qO- http://localhost/ || exit 1
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@@ -56,8 +56,7 @@
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"src",
|
||||
"src/styles"
|
||||
"src"
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Gzip compression
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_proxied any;
|
||||
gzip_comp_level 6;
|
||||
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
|
||||
|
||||
# Cache static assets (Angular uses content hashes)
|
||||
location /assets/ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# Cache hashed JS/CSS bundles
|
||||
location ~* \.(js|css)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# Proxy API requests to backend
|
||||
location /api/ {
|
||||
proxy_pass http://backend:8080/api/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# Proxy SignalR WebSocket connections to backend
|
||||
location /hubs/ {
|
||||
proxy_pass http://backend:8080/hubs/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_read_timeout 86400;
|
||||
}
|
||||
|
||||
# Angular SPA — all other routes fall back to index.html
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
@@ -2,13 +2,11 @@
|
||||
<!-- AgentCard — per spec Section 7.3 -->
|
||||
<!-- Integrates: Status Badge · Task Progress Bar · Quick‑Jump Button -->
|
||||
<!-- Left‑border accent matches status color. role="article" + aria‑labels. -->
|
||||
<!-- Enhanced: data-status attribute, elapsed time, design tokens. -->
|
||||
<!-- ========================================================================== -->
|
||||
<article
|
||||
class="agent-card"
|
||||
role="article"
|
||||
[attr.data-status]="status"
|
||||
[attr.aria-label]="(displayName || agentId) + ' — ' + statusLabel()"
|
||||
[attr.aria-label]="displayName + ' — ' + statusLabel()"
|
||||
[style.border-left-color]="statusBorderColor()"
|
||||
(click)="cardClick.emit(sessionKey)"
|
||||
appLongPress
|
||||
@@ -34,20 +32,19 @@
|
||||
</div>
|
||||
|
||||
<!-- ── Body: current task ── -->
|
||||
<div class="agent-card__body" *ngIf="task || isError()">
|
||||
<div class="agent-card__body" *ngIf="task || status === 'error'">
|
||||
<p
|
||||
class="agent-card__task"
|
||||
[class.agent-card__task--error]="isError()"
|
||||
[attr.aria-label]="'Current task: ' + (isError() ? errorMessage || task : task)"
|
||||
[attr.aria-label]="'Current task: ' + (status === 'error' ? errorMessage : task)"
|
||||
>
|
||||
{{ isError() ? errorMessage || task : task }}
|
||||
{{ status === 'error' ? errorMessage || task : task }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- ── Task Progress Bar ── -->
|
||||
<div
|
||||
class="agent-card__progress"
|
||||
*ngIf="showProgress()"
|
||||
*ngIf="progress > 0 && status !== 'error'"
|
||||
[attr.aria-label]="'Task progress: ' + progress + '%'"
|
||||
>
|
||||
<mat-progress-bar
|
||||
@@ -58,16 +55,6 @@
|
||||
<span class="agent-card__progress-label text-mono">{{ progress }}%</span>
|
||||
</div>
|
||||
|
||||
<!-- ── Elapsed Time ── -->
|
||||
<div
|
||||
class="agent-card__elapsed"
|
||||
*ngIf="taskElapsed && isActiveLike()"
|
||||
[attr.aria-label]="'Elapsed: ' + taskElapsed"
|
||||
>
|
||||
<mat-icon aria-hidden="true" class="agent-card__elapsed-icon">schedule</mat-icon>
|
||||
<span class="text-mono">{{ taskElapsed }}</span>
|
||||
</div>
|
||||
|
||||
<!-- ── Footer: channel + last activity + quick‑jump ── -->
|
||||
<div class="agent-card__footer">
|
||||
<div class="agent-card__meta">
|
||||
|
||||
@@ -2,18 +2,15 @@
|
||||
// AgentCard — M3 tactical dark styling
|
||||
// Per spec Section 7.3: left‑border accent, status‑aware coloring,
|
||||
// responsive card layout with 320px min‑width.
|
||||
// Enhanced: data-status selectors, elapsed time, design token imports.
|
||||
// ============================================================================
|
||||
|
||||
@use 'tokens' as tokens;
|
||||
|
||||
.agent-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: tokens.$cc-card-min-width;
|
||||
padding: tokens.$cc-card-padding;
|
||||
min-width: var(--cc-card-min-width);
|
||||
padding: var(--cc-card-padding);
|
||||
background-color: var(--cc-surface-container);
|
||||
border-radius: tokens.$cc-card-border-radius;
|
||||
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);
|
||||
@@ -59,6 +56,11 @@
|
||||
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 {
|
||||
@@ -100,7 +102,8 @@
|
||||
color: var(--cc-on-surface);
|
||||
line-height: 1.4;
|
||||
|
||||
&--error {
|
||||
// Error messages get distinct styling
|
||||
.agent-card--error & {
|
||||
color: var(--status-error);
|
||||
}
|
||||
}
|
||||
@@ -114,7 +117,6 @@
|
||||
}
|
||||
|
||||
.agent-card__progress-label {
|
||||
font-family: var(--cc-font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--cc-on-surface-variant);
|
||||
@@ -136,23 +138,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ── Elapsed Time ──
|
||||
.agent-card__elapsed {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.agent-card__elapsed-icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--status-thinking);
|
||||
}
|
||||
|
||||
// ── Footer ──
|
||||
.agent-card__footer {
|
||||
display: flex;
|
||||
@@ -176,6 +161,7 @@
|
||||
color: var(--cc-on-surface-variant);
|
||||
}
|
||||
|
||||
.agent-card__channel-icon,
|
||||
.agent-card__channel .mat-icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
@@ -191,6 +177,7 @@
|
||||
.agent-card__jump {
|
||||
flex-shrink: 0;
|
||||
|
||||
// Match M3 text button sizing
|
||||
.mat-mdc-button {
|
||||
min-width: 36px;
|
||||
padding: 0 8px;
|
||||
@@ -205,9 +192,11 @@
|
||||
}
|
||||
|
||||
// ── Status‑specific background tints for badge ──
|
||||
// Using data-status attribute selectors for clean styling.
|
||||
// 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[data-status="active"] .agent-card__badge,
|
||||
.agent-card .status-dot--active ~ .agent-card__badge {
|
||||
background-color: var(--status-active-bg);
|
||||
}
|
||||
|
||||
@@ -223,22 +212,8 @@
|
||||
background-color: var(--status-error-bg);
|
||||
}
|
||||
|
||||
.agent-card[data-status="offline"] .agent-card__badge {
|
||||
background-color: var(--cc-surface-container-high);
|
||||
}
|
||||
|
||||
// ── Active‑like pulse on card border ──
|
||||
.agent-card[data-status="active"],
|
||||
.agent-card[data-status="thinking"] {
|
||||
border-left-width: 4px;
|
||||
}
|
||||
|
||||
.agent-card[data-status="error"] {
|
||||
border-left-color: var(--status-error);
|
||||
}
|
||||
|
||||
// ── Responsive ──
|
||||
@media (max-width: tokens.$cc-breakpoint-mobile) {
|
||||
@media (max-width: 599px) {
|
||||
.agent-card {
|
||||
min-width: unset;
|
||||
padding: 16px;
|
||||
|
||||
@@ -3,12 +3,8 @@ import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnDestroy,
|
||||
Output,
|
||||
computed,
|
||||
effect,
|
||||
inject,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
@@ -18,18 +14,12 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { AgentStatus } from '../../../models/agent.model';
|
||||
import { LongPressDirective } from '../../../directives/long-press.directive';
|
||||
import {
|
||||
STATUS_COLORS,
|
||||
STATUS_LABELS,
|
||||
CHANNEL_ICONS,
|
||||
} from '../../../design/tokens';
|
||||
|
||||
// ============================================================================
|
||||
// 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.
|
||||
// CUB-26: Emits cardClick and cardLongPress for drawer/modal integration.
|
||||
// Enhanced with data-status attribute, elapsed time, and design tokens.
|
||||
// ============================================================================
|
||||
|
||||
@Component({
|
||||
@@ -48,7 +38,7 @@ import {
|
||||
styleUrl: './agent-card.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AgentCardComponent implements OnDestroy {
|
||||
export class AgentCardComponent {
|
||||
// --- Six required inputs per spec ---
|
||||
|
||||
/** Agent status — drives badge color and left‑border accent */
|
||||
@@ -83,9 +73,6 @@ export class AgentCardComponent implements OnDestroy {
|
||||
/** Error message (shown only when status is 'error') */
|
||||
@Input() errorMessage = '';
|
||||
|
||||
/** Elapsed time string, e.g. "04m 12s" */
|
||||
@Input() taskElapsed = '';
|
||||
|
||||
// --- CUB-26: Outputs for drawer/modal integration ---
|
||||
|
||||
/** Emitted when the card is clicked — opens the session drawer. */
|
||||
@@ -94,15 +81,7 @@ export class AgentCardComponent implements OnDestroy {
|
||||
/** Emitted when the card is long-pressed — bypasses drawer, opens session log directly. */
|
||||
@Output() readonly cardLongPress = new EventEmitter<string>();
|
||||
|
||||
// --- Internal state ---
|
||||
|
||||
/** Timer for refreshing relative-time label */
|
||||
private _timer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
/** Internal signal to trigger relative-time recomputation */
|
||||
private readonly _tick = signal(0);
|
||||
|
||||
// --- Computed values using design tokens ---
|
||||
// --- Computed values ---
|
||||
|
||||
/** Map status → CSS custom property for the left‑border accent */
|
||||
readonly statusBorderColor = computed(() => {
|
||||
@@ -116,68 +95,46 @@ export class AgentCardComponent implements OnDestroy {
|
||||
return map[this.status] ?? 'var(--status-offline)';
|
||||
});
|
||||
|
||||
/** Human‑readable status label (from design tokens) */
|
||||
readonly statusLabel = computed(() => STATUS_LABELS[this.status] ?? this.status);
|
||||
/** Human‑readable status label */
|
||||
readonly statusLabel = computed(() => {
|
||||
const labels: Record<AgentStatus, string> = {
|
||||
active: 'Active',
|
||||
idle: 'Idle',
|
||||
thinking: 'Thinking…',
|
||||
error: 'Error',
|
||||
offline: 'Offline',
|
||||
};
|
||||
return labels[this.status] ?? this.status;
|
||||
});
|
||||
|
||||
/** CSS class suffix for the status badge dot */
|
||||
readonly statusDotClass = computed(() => `status-dot--${this.status}`);
|
||||
|
||||
/** Material icon name for the channel (from design tokens) */
|
||||
readonly channelIcon = computed(() => CHANNEL_ICONS[this.channel] ?? 'chat');
|
||||
|
||||
/** Relative time string for lastActivity, refreshed every 30s */
|
||||
readonly lastActivityLabel = computed(() => {
|
||||
// Read tick to create dependency that forces recomputation
|
||||
this._tick();
|
||||
return this._relativeTime(this.lastActivity);
|
||||
/** Material icon name for the channel */
|
||||
readonly channelIcon = computed(() => {
|
||||
const icons: Record<string, string> = {
|
||||
telegram: 'telegram', // falls back to font icon if no SVG registered
|
||||
slack: 'chat',
|
||||
discord: 'forum',
|
||||
whatsapp: 'chat',
|
||||
webchat: 'language',
|
||||
email: 'email',
|
||||
};
|
||||
return icons[this.channel] ?? 'chat';
|
||||
});
|
||||
|
||||
/** Quick‑jump route derived from sessionKey */
|
||||
readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
|
||||
|
||||
/** Whether progress bar should show */
|
||||
readonly showProgress = computed(() => this.progress > 0 && this.status !== 'error');
|
||||
|
||||
/** Whether error state is active */
|
||||
readonly isError = computed(() => this.status === 'error');
|
||||
|
||||
/** Whether card is in an active-like state (active or thinking) */
|
||||
readonly isActiveLike = computed(() => this.status === 'active' || this.status === 'thinking');
|
||||
|
||||
constructor() {
|
||||
// Start the relative-time refresh timer
|
||||
this._startTimer();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this._stopTimer();
|
||||
}
|
||||
|
||||
// --- Private helpers ---
|
||||
|
||||
private _relativeTime(date: Date | null | undefined): string {
|
||||
if (!date) return '';
|
||||
/** Relative time string for lastActivity */
|
||||
readonly lastActivityLabel = computed(() => {
|
||||
if (!this.lastActivity) return '';
|
||||
const now = Date.now();
|
||||
const then = date.getTime();
|
||||
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`;
|
||||
}
|
||||
});
|
||||
|
||||
private _startTimer(): void {
|
||||
this._stopTimer();
|
||||
this._timer = setInterval(() => {
|
||||
// Increment tick to force lastActivityLabel recomputation
|
||||
this._tick.update(v => v + 1);
|
||||
}, 30_000);
|
||||
}
|
||||
|
||||
private _stopTimer(): void {
|
||||
if (this._timer) {
|
||||
clearInterval(this._timer);
|
||||
this._timer = null;
|
||||
}
|
||||
}
|
||||
/** Quick‑jump route derived from sessionKey */
|
||||
readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
<!-- ============================================================================
|
||||
Dashboard Summary Component Template
|
||||
Displays total active agents, status breakdown, and system health.
|
||||
============================================================================ -->
|
||||
|
||||
<section class="dashboard-summary" role="region" aria-label="Dashboard summary">
|
||||
|
||||
<!-- Total Agents -->
|
||||
<div class="summary-total">
|
||||
<span class="summary-total__count">{{ totalAgents() }}</span>
|
||||
<span class="summary-total__label">Total Agents</span>
|
||||
</div>
|
||||
|
||||
<!-- Status Breakdown -->
|
||||
<div class="summary-breakdown" role="list" aria-label="Agent status breakdown">
|
||||
@for (item of statusItems(); track item.status) {
|
||||
<div class="status-item {{ statusClass(item.status) }}" role="listitem">
|
||||
<span class="status-item__dot" [attr.aria-hidden]="true"></span>
|
||||
<span class="status-item__label">{{ item.label }}</span>
|
||||
<span class="status-item__count">{{ item.count }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- System Health Indicator -->
|
||||
<div class="health-indicator {{ healthClass() }}" role="status" aria-label="System health: {{ healthLabel() }}">
|
||||
<span class="health-indicator__dot" [attr.aria-hidden]="true"></span>
|
||||
<span class="health-indicator__label">System</span>
|
||||
<span class="health-indicator__value">{{ healthLabel() }}</span>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,218 @@
|
||||
// ============================================================================
|
||||
// Dashboard Summary Component Styles
|
||||
// Uses design tokens from styles/_tokens.scss (CUB-21)
|
||||
// ============================================================================
|
||||
|
||||
@use '../../../styles/tokens' as tokens;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Host block
|
||||
// ---------------------------------------------------------------------------
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Summary container
|
||||
// ---------------------------------------------------------------------------
|
||||
.dashboard-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: tokens.$spacing-5;
|
||||
padding: tokens.$spacing-6;
|
||||
background-color: tokens.$color-surface-medium;
|
||||
border-radius: tokens.$card-border-radius;
|
||||
border: 1px solid tokens.$color-surface-lighter;
|
||||
box-shadow: tokens.$shadow-level-1;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Total agents
|
||||
// ---------------------------------------------------------------------------
|
||||
.summary-total {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: tokens.$spacing-1;
|
||||
padding-bottom: tokens.$spacing-4;
|
||||
border-bottom: 1px solid tokens.$color-surface-lighter;
|
||||
|
||||
&__count {
|
||||
font-family: tokens.$font-family-brand;
|
||||
font-size: tokens.$font-size-display-small;
|
||||
font-weight: tokens.$font-weight-heavy;
|
||||
line-height: tokens.$line-height-tight;
|
||||
color: tokens.$color-on-surface;
|
||||
letter-spacing: tokens.$letter-spacing-tight;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-family: tokens.$font-family-body;
|
||||
font-size: tokens.$font-size-label-large;
|
||||
font-weight: tokens.$font-weight-medium;
|
||||
color: tokens.$color-on-surface-variant;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: tokens.$letter-spacing-wide;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Status breakdown
|
||||
// ---------------------------------------------------------------------------
|
||||
.summary-breakdown {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: tokens.$spacing-3;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Individual status item
|
||||
// ---------------------------------------------------------------------------
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: tokens.$spacing-2;
|
||||
padding: tokens.$spacing-3 tokens.$spacing-4;
|
||||
border-radius: tokens.$radius-md;
|
||||
background-color: tokens.$color-surface-dark;
|
||||
border: 1px solid tokens.$color-surface-lighter;
|
||||
transition: background-color tokens.$duration-short tokens.$easing-standard;
|
||||
|
||||
&__dot {
|
||||
width: tokens.$status-dot-size;
|
||||
height: tokens.$status-dot-size;
|
||||
border-radius: tokens.$radius-full;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: 1;
|
||||
font-family: tokens.$font-family-body;
|
||||
font-size: tokens.$font-size-body-medium;
|
||||
font-weight: tokens.$font-weight-medium;
|
||||
color: tokens.$color-on-surface-variant;
|
||||
}
|
||||
|
||||
&__count {
|
||||
font-family: tokens.$font-family-mono;
|
||||
font-size: tokens.$font-size-body-large;
|
||||
font-weight: tokens.$font-weight-bold;
|
||||
color: tokens.$color-on-surface;
|
||||
}
|
||||
|
||||
// Status-specific colors using the token map
|
||||
&--active {
|
||||
.status-item__dot {
|
||||
background-color: tokens.$status-active;
|
||||
animation: pulse-active tokens.$duration-standard tokens.$easing-standard infinite;
|
||||
}
|
||||
.status-item__count { color: tokens.$status-active; }
|
||||
}
|
||||
|
||||
&--idle {
|
||||
.status-item__dot {
|
||||
background-color: tokens.$status-idle;
|
||||
}
|
||||
.status-item__count { color: tokens.$status-idle; }
|
||||
}
|
||||
|
||||
&--thinking {
|
||||
.status-item__dot {
|
||||
background-color: tokens.$status-thinking;
|
||||
animation: pulse-thinking 3s tokens.$easing-standard infinite;
|
||||
}
|
||||
.status-item__count { color: tokens.$status-thinking; }
|
||||
}
|
||||
|
||||
&--error {
|
||||
.status-item__dot {
|
||||
background-color: tokens.$status-error;
|
||||
animation: pulse-error tokens.$duration-fast tokens.$easing-standard infinite;
|
||||
}
|
||||
.status-item__count { color: tokens.$status-error; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// System health indicator
|
||||
// ---------------------------------------------------------------------------
|
||||
.health-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: tokens.$spacing-2;
|
||||
padding: tokens.$spacing-3 tokens.$spacing-4;
|
||||
border-radius: tokens.$radius-md;
|
||||
border: 1px solid tokens.$color-surface-lighter;
|
||||
|
||||
&__dot {
|
||||
width: tokens.$status-dot-size;
|
||||
height: tokens.$status-dot-size;
|
||||
border-radius: tokens.$radius-full;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-family: tokens.$font-family-body;
|
||||
font-size: tokens.$font-size-body-medium;
|
||||
font-weight: tokens.$font-weight-medium;
|
||||
color: tokens.$color-on-surface-variant;
|
||||
}
|
||||
|
||||
&__value {
|
||||
margin-left: auto;
|
||||
font-family: tokens.$font-family-mono;
|
||||
font-size: tokens.$font-size-body-medium;
|
||||
font-weight: tokens.$font-weight-bold;
|
||||
letter-spacing: tokens.$letter-spacing-mono;
|
||||
}
|
||||
|
||||
&--healthy {
|
||||
.health-indicator__dot {
|
||||
background-color: tokens.$status-active;
|
||||
animation: pulse-active tokens.$duration-standard tokens.$easing-standard infinite;
|
||||
}
|
||||
.health-indicator__value { color: tokens.$status-active; }
|
||||
}
|
||||
|
||||
&--degraded {
|
||||
.health-indicator__dot {
|
||||
background-color: tokens.$status-error;
|
||||
animation: pulse-error tokens.$duration-fast tokens.$easing-standard infinite;
|
||||
}
|
||||
.health-indicator__value { color: tokens.$status-error; }
|
||||
}
|
||||
|
||||
&--unknown {
|
||||
.health-indicator__dot {
|
||||
background-color: tokens.$status-offline;
|
||||
}
|
||||
.health-indicator__value { color: tokens.$status-offline; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Pulse animations (from the design system)
|
||||
// ---------------------------------------------------------------------------
|
||||
@keyframes pulse-active {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.6; transform: scale(0.85); }
|
||||
}
|
||||
|
||||
@keyframes pulse-thinking {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(0.9); }
|
||||
}
|
||||
|
||||
@keyframes pulse-error {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.7; transform: scale(0.8); }
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Responsive: stack on compact screens
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (max-width: tokens.$breakpoint-compact) {
|
||||
.summary-breakdown {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
|
||||
import { AgentStatusService } from '../../services/agent-status.service';
|
||||
import { AgentStatus } from '../../models/agent.model';
|
||||
|
||||
/**
|
||||
* Dashboard Summary Component.
|
||||
* Displays total active agents, status breakdown (Active, Idle, Thinking, Error),
|
||||
* and a system health indicator.
|
||||
*
|
||||
* Binds to AgentStatusService.agents signal — no hardcoded values.
|
||||
* Uses design tokens from CUB-21 (styles/_tokens.scss, app/design/tokens.ts).
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-dashboard-summary',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './dashboard-summary.component.html',
|
||||
styleUrl: './dashboard-summary.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class DashboardSummaryComponent {
|
||||
private readonly agentStatusService = inject(AgentStatusService);
|
||||
|
||||
/** All agents from the reactive signal */
|
||||
readonly agents = this.agentStatusService.agents;
|
||||
|
||||
/** Total number of agents */
|
||||
readonly totalAgents = computed(() => this.agents().length);
|
||||
|
||||
/** Count of agents per status */
|
||||
readonly statusCounts = computed(() => {
|
||||
const agents = this.agents();
|
||||
const counts: Record<AgentStatus, number> = {
|
||||
active: 0,
|
||||
idle: 0,
|
||||
thinking: 0,
|
||||
error: 0,
|
||||
offline: 0,
|
||||
};
|
||||
for (const agent of agents) {
|
||||
counts[agent.status]++;
|
||||
}
|
||||
return counts;
|
||||
});
|
||||
|
||||
/** Status items for template iteration */
|
||||
readonly statusItems = computed(() => {
|
||||
const counts = this.statusCounts();
|
||||
const total = this.totalAgents();
|
||||
return [
|
||||
{ status: 'active' as AgentStatus, count: counts.active, label: 'Active' },
|
||||
{ status: 'idle' as AgentStatus, count: counts.idle, label: 'Idle' },
|
||||
{ status: 'thinking' as AgentStatus, count: counts.thinking, label: 'Thinking' },
|
||||
{ status: 'error' as AgentStatus, count: counts.error, label: 'Error' },
|
||||
] as const;
|
||||
});
|
||||
|
||||
/**
|
||||
* System health indicator:
|
||||
* - 'healthy' → no errors, at least one active agent
|
||||
* - 'degraded' → has errors OR no active agents but some agents exist
|
||||
* - 'unknown' → no agents registered
|
||||
*/
|
||||
readonly systemHealth = computed((): 'healthy' | 'degraded' | 'unknown' => {
|
||||
const agents = this.agents();
|
||||
if (agents.length === 0) return 'unknown';
|
||||
const counts = this.statusCounts();
|
||||
if (counts.error > 0) return 'degraded';
|
||||
if (counts.active > 0) return 'healthy';
|
||||
return 'degraded';
|
||||
});
|
||||
|
||||
readonly healthLabel = computed(() => {
|
||||
const health = this.systemHealth();
|
||||
switch (health) {
|
||||
case 'healthy': return 'Healthy';
|
||||
case 'degraded': return 'Degraded';
|
||||
case 'unknown': return 'Unknown';
|
||||
}
|
||||
});
|
||||
|
||||
/** Get the CSS class for a given status */
|
||||
statusClass(status: AgentStatus): string {
|
||||
return `status-item--${status}`;
|
||||
}
|
||||
|
||||
/** Get the CSS class for system health */
|
||||
healthClass(): string {
|
||||
return `health-indicator--${this.systemHealth()}`;
|
||||
}
|
||||
}
|
||||
1
frontend/src/app/components/dashboard-summary/index.ts
Normal file
1
frontend/src/app/components/dashboard-summary/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { DashboardSummaryComponent } from './dashboard-summary.component';
|
||||
@@ -2,4 +2,5 @@ export * from './quick-jump-button/quick-jump-button.component';
|
||||
export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
|
||||
export { QuickJumpDrawerComponent } from './quick-jump-drawer/index';
|
||||
export { AgentSessionDrawerComponent } from './agent-session-drawer/index';
|
||||
export type { SessionLogLine, SessionMessage } from './agent-session-drawer/index';
|
||||
export type { SessionLogLine, SessionMessage } from './agent-session-drawer/index';
|
||||
export { DashboardSummaryComponent } from './dashboard-summary/index';
|
||||
@@ -94,92 +94,6 @@ export const CcStatusColors = {
|
||||
offline: { fg: '#64748b', bg: 'rgba(100, 116, 139, 0.12)', border: 'rgba(100, 116, 139, 0.40)' },
|
||||
} as const;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Convenience exports for component usage (CUB-20)
|
||||
// ---------------------------------------------------------------------------
|
||||
/** Status colors — maps AgentStatus to hex values */
|
||||
export const STATUS_COLORS: Record<string, string> = {
|
||||
active: '#38BDF8',
|
||||
idle: '#2DD4BF',
|
||||
thinking: '#A78BFA',
|
||||
error: '#F87171',
|
||||
offline: '#64748B',
|
||||
};
|
||||
|
||||
/** Status background tints (12% opacity) */
|
||||
export const STATUS_BG_COLORS: Record<string, string> = {
|
||||
active: 'rgba(56, 189, 248, 0.12)',
|
||||
idle: 'rgba(45, 212, 191, 0.12)',
|
||||
thinking: 'rgba(167, 139, 250, 0.12)',
|
||||
error: 'rgba(248, 113, 113, 0.12)',
|
||||
offline: 'rgba(100, 116, 139, 0.12)',
|
||||
};
|
||||
|
||||
/** Surface overrides (CUB-20 convenience) */
|
||||
export const SURFACE = {
|
||||
background: '#0D0F12',
|
||||
surface: '#13161A',
|
||||
container: '#1C2027',
|
||||
containerHigh: '#252B33',
|
||||
onSurface: '#E2E8F0',
|
||||
onSurfaceVariant: '#8A9BB0',
|
||||
outline: '#2D3748',
|
||||
} as const;
|
||||
|
||||
/** Tactical Dark Mode color palette (CUB-20 convenience) */
|
||||
export const COLORS = {
|
||||
surface: '#0F172A',
|
||||
surfaceLight: '#1E293B',
|
||||
primary: '#38BDF8',
|
||||
secondary: '#2DD4BF',
|
||||
accent: '#A78BFA',
|
||||
danger: '#F87171',
|
||||
textPrimary: '#FFFFFF',
|
||||
textSecondary: '#94A3B8',
|
||||
border: '#334155',
|
||||
} as const;
|
||||
|
||||
/** Layout constants (CUB-20 convenience) */
|
||||
export const LAYOUT = {
|
||||
navRailCollapsedWidth: 72,
|
||||
navRailExpandedWidth: 256,
|
||||
headerHeight: 64,
|
||||
bottomNavHeight: 80,
|
||||
cardBorderRadius: 16,
|
||||
cardMinWidth: 320,
|
||||
cardGap: 16,
|
||||
cardPadding: 20,
|
||||
sectionPadding: 24,
|
||||
spacingUnit: 8,
|
||||
} as const;
|
||||
|
||||
/** Breakpoints (px) (CUB-20 convenience) */
|
||||
export const BREAKPOINTS = {
|
||||
mobile: 599,
|
||||
tablet: 1023,
|
||||
desktop: 1024,
|
||||
} as const;
|
||||
|
||||
/** Channel icon mapping (CUB-20) */
|
||||
export const CHANNEL_ICONS: Record<string, string> = {
|
||||
telegram: 'telegram',
|
||||
slack: 'chat',
|
||||
discord: 'forum',
|
||||
whatsapp: 'chat',
|
||||
webchat: 'language',
|
||||
email: 'email',
|
||||
mqtt: 'sensors',
|
||||
};
|
||||
|
||||
/** Human-readable status labels (CUB-20) */
|
||||
export const STATUS_LABELS: Record<string, string> = {
|
||||
active: 'Active',
|
||||
idle: 'Idle',
|
||||
thinking: 'Thinking…',
|
||||
error: 'Error',
|
||||
offline: 'Offline',
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Typography
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -349,6 +263,9 @@ export const CcTokens = {
|
||||
// ---------------------------------------------------------------------------
|
||||
// CSS Custom Property Names
|
||||
// ---------------------------------------------------------------------------
|
||||
// Use these constants when setting styles programmatically via Renderer2
|
||||
// or ElementRef.style, e.g.: el.style.setProperty(CcCssProps.colorPrimary, '#fff')
|
||||
// ---------------------------------------------------------------------------
|
||||
export const CcCssProps = {
|
||||
// Color
|
||||
colorPrimary: '--cc-color-primary',
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
gap: 16px;
|
||||
min-height: 400px;
|
||||
overflow-x: hidden;
|
||||
padding: var(--cc-section-padding);
|
||||
}
|
||||
|
||||
.hub-page__title {
|
||||
|
||||
@@ -434,41 +434,4 @@ $min-body-font: 16px;
|
||||
@mixin touch-target($min-size: $min-touch-target) {
|
||||
min-width: $min-size;
|
||||
min-height: $min-size;
|
||||
}
|
||||
// ============================================================================
|
||||
// CUB-20 / CUB-27 CONVENIENCE ALIASES
|
||||
// ============================================================================
|
||||
// Short aliases used by agent-card, hub-page, and other components.
|
||||
// These map to the canonical M3 tokens above.
|
||||
|
||||
$cc-background: $color-surface-darkest;
|
||||
$cc-surface: $color-surface-dark;
|
||||
$cc-surface-container: $color-surface-medium;
|
||||
$cc-surface-container-high: $color-surface-light;
|
||||
$cc-on-surface: $color-on-surface;
|
||||
$cc-on-surface-variant: $color-on-surface-variant;
|
||||
$cc-outline: $color-surface-lighter;
|
||||
|
||||
$cc-font-mono: $font-family-mono;
|
||||
$cc-font-family: $font-family-brand;
|
||||
|
||||
$cc-nav-rail-collapsed-width: $nav-rail-collapsed-width;
|
||||
$cc-nav-rail-expanded-width: $nav-rail-expanded-width;
|
||||
$cc-header-height: $header-height;
|
||||
$cc-bottom-nav-height: $bottom-nav-height;
|
||||
$cc-card-border-radius: $card-border-radius;
|
||||
$cc-card-min-width: $card-min-width;
|
||||
$cc-card-gap: $spacing-card-gap;
|
||||
$cc-card-padding: $spacing-card-pad;
|
||||
$cc-section-padding: $spacing-section;
|
||||
$cc-spacing-unit: $spacing-unit;
|
||||
|
||||
$cc-breakpoint-mobile: $breakpoint-compact;
|
||||
$cc-breakpoint-tablet: $breakpoint-medium;
|
||||
$cc-breakpoint-desktop: $breakpoint-expanded;
|
||||
|
||||
$cc-surface-darkest: $color-surface-darkest;
|
||||
$cc-surface-dark: $color-surface-dark;
|
||||
$cc-surface-medium: $color-surface-medium;
|
||||
$cc-surface-light: $color-surface-light;
|
||||
$cc-surface-lighter: $color-surface-lighter;
|
||||
}
|
||||
Reference in New Issue
Block a user