diff --git a/frontend/.dockerignore b/frontend/.dockerignore new file mode 100644 index 0000000..1625b0d --- /dev/null +++ b/frontend/.dockerignore @@ -0,0 +1,33 @@ +# 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 \ No newline at end of file diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 0000000..4ef33cf --- /dev/null +++ b/frontend/Dockerfile @@ -0,0 +1,38 @@ +# ============================================================ +# 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;"] \ No newline at end of file diff --git a/frontend/angular.json b/frontend/angular.json index 8c5cf7c..7285303 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -56,7 +56,8 @@ ], "stylePreprocessorOptions": { "includePaths": [ - "src" +"src", + "src/styles" ] } }, diff --git a/frontend/nginx.conf b/frontend/nginx.conf new file mode 100644 index 0000000..e36d2d7 --- /dev/null +++ b/frontend/nginx.conf @@ -0,0 +1,54 @@ +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; + } +} \ No newline at end of file diff --git a/frontend/src/app/command-hub/components/agent-card/agent-card.component.html b/frontend/src/app/command-hub/components/agent-card/agent-card.component.html index 6b49bfc..42be39a 100644 --- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.html +++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.html @@ -2,11 +2,13 @@ +
-
+

- {{ status === 'error' ? errorMessage || task : task }} + {{ isError() ? errorMessage || task : task }}

{{ progress }}%
+ +
+ + {{ taskElapsed }} +
+
diff --git a/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss b/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss index 450eba6..d651f4b 100644 --- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss +++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss @@ -2,15 +2,18 @@ // 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: var(--cc-card-min-width); - padding: var(--cc-card-padding); + min-width: tokens.$cc-card-min-width; + padding: tokens.$cc-card-padding; background-color: var(--cc-surface-container); - border-radius: var(--cc-card-border-radius); + border-radius: tokens.$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); @@ -56,11 +59,6 @@ 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 { @@ -102,8 +100,7 @@ color: var(--cc-on-surface); line-height: 1.4; - // Error messages get distinct styling - .agent-card--error & { + &--error { color: var(--status-error); } } @@ -117,6 +114,7 @@ } .agent-card__progress-label { + font-family: var(--cc-font-mono); font-size: 12px; font-weight: 500; color: var(--cc-on-surface-variant); @@ -138,6 +136,23 @@ } } +// ── 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; @@ -161,7 +176,6 @@ color: var(--cc-on-surface-variant); } -.agent-card__channel-icon, .agent-card__channel .mat-icon { font-size: 14px; width: 14px; @@ -177,7 +191,6 @@ .agent-card__jump { flex-shrink: 0; - // Match M3 text button sizing .mat-mdc-button { min-width: 36px; padding: 0 8px; @@ -192,11 +205,9 @@ } // ── Status‑specific background tints for badge ── -// We use the global status-dot classes from styles.scss and pair them -// with contextual background-color overrides here. +// Using data-status attribute selectors for clean styling. -.agent-card[data-status="active"] .agent-card__badge, -.agent-card .status-dot--active ~ .agent-card__badge { +.agent-card[data-status="active"] .agent-card__badge { background-color: var(--status-active-bg); } @@ -212,8 +223,22 @@ 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: 599px) { +@media (max-width: tokens.$cc-breakpoint-mobile) { .agent-card { min-width: unset; padding: 16px; diff --git a/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts b/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts index e1c44b4..05e5b01 100644 --- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts +++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts @@ -3,8 +3,12 @@ import { Component, EventEmitter, Input, + OnDestroy, Output, computed, + effect, + inject, + signal, } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; @@ -14,12 +18,18 @@ 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({ @@ -38,7 +48,7 @@ import { LongPressDirective } from '../../../directives/long-press.directive'; styleUrl: './agent-card.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AgentCardComponent { +export class AgentCardComponent implements OnDestroy { // --- Six required inputs per spec --- /** Agent status — drives badge color and left‑border accent */ @@ -73,6 +83,9 @@ export class AgentCardComponent { /** 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. */ @@ -81,7 +94,15 @@ export class AgentCardComponent { /** Emitted when the card is long-pressed — bypasses drawer, opens session log directly. */ @Output() readonly cardLongPress = new EventEmitter(); - // --- Computed values --- + // --- Internal state --- + + /** Timer for refreshing relative-time label */ + private _timer: ReturnType | null = null; + + /** Internal signal to trigger relative-time recomputation */ + private readonly _tick = signal(0); + + // --- Computed values using design tokens --- /** Map status → CSS custom property for the left‑border accent */ readonly statusBorderColor = computed(() => { @@ -95,46 +116,68 @@ export class AgentCardComponent { return map[this.status] ?? 'var(--status-offline)'; }); - /** Human‑readable status label */ - readonly statusLabel = computed(() => { - const labels: Record = { - active: 'Active', - idle: 'Idle', - thinking: 'Thinking…', - error: 'Error', - offline: 'Offline', - }; - return labels[this.status] ?? this.status; - }); + /** Human‑readable status label (from design tokens) */ + readonly statusLabel = computed(() => STATUS_LABELS[this.status] ?? this.status); /** CSS class suffix for the status badge dot */ readonly statusDotClass = computed(() => `status-dot--${this.status}`); - /** Material icon name for the channel */ - readonly channelIcon = computed(() => { - const icons: Record = { - telegram: 'telegram', // falls back to font icon if no SVG registered - slack: 'chat', - discord: 'forum', - whatsapp: 'chat', - webchat: 'language', - email: 'email', - }; - return icons[this.channel] ?? 'chat'; + /** 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); }); - /** Relative time string for lastActivity */ - readonly lastActivityLabel = computed(() => { - if (!this.lastActivity) return ''; + /** 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 ''; const now = Date.now(); - const then = this.lastActivity.getTime(); + const then = date.getTime(); const diffSec = Math.max(0, Math.floor((now - then) / 1000)); if (diffSec < 60) return 'just now'; if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`; if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`; return `${Math.floor(diffSec / 86400)}d ago`; - }); + } - /** Quick‑jump route derived from sessionKey */ - readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`); + 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; + } + } } \ No newline at end of file diff --git a/frontend/src/app/design/tokens.ts b/frontend/src/app/design/tokens.ts index 1029c9b..b2633b2 100644 --- a/frontend/src/app/design/tokens.ts +++ b/frontend/src/app/design/tokens.ts @@ -94,6 +94,92 @@ 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 = { + active: '#38BDF8', + idle: '#2DD4BF', + thinking: '#A78BFA', + error: '#F87171', + offline: '#64748B', +}; + +/** Status background tints (12% opacity) */ +export const STATUS_BG_COLORS: Record = { + 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 = { + 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 = { + active: 'Active', + idle: 'Idle', + thinking: 'Thinking…', + error: 'Error', + offline: 'Offline', +}; + // --------------------------------------------------------------------------- // Typography // --------------------------------------------------------------------------- @@ -263,9 +349,6 @@ 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', diff --git a/frontend/src/app/pages/hub/hub-page.component.scss b/frontend/src/app/pages/hub/hub-page.component.scss index 1355b88..9371319 100644 --- a/frontend/src/app/pages/hub/hub-page.component.scss +++ b/frontend/src/app/pages/hub/hub-page.component.scss @@ -12,6 +12,7 @@ gap: 16px; min-height: 400px; overflow-x: hidden; + padding: var(--cc-section-padding); } .hub-page__title { diff --git a/frontend/src/styles/_tokens.scss b/frontend/src/styles/_tokens.scss index a430661..6f14453 100644 --- a/frontend/src/styles/_tokens.scss +++ b/frontend/src/styles/_tokens.scss @@ -434,4 +434,41 @@ $min-body-font: 16px; @mixin touch-target($min-size: $min-touch-target) { min-width: $min-size; min-height: $min-size; -} \ No newline at end of file +} +// ============================================================================ +// 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;