updated surveillance system

src/app/components/performance-hud/performance-hud.component.html

@@ -65,25 +65,40 @@
 
         <!-- Per-service rows -->
         @for (svc of metrics()!.services; track trackByService($index, svc)) {
+          @let cfg = statusConfig(svc.status);
           <div class="hud-row">
-            <div class="hud-service-name">{{ svc.service }}</div>
 
+            <!-- Service name + status pill on one line -->
+            <div class="hud-service-header">
+              <span class="hud-service-name">{{ svc.service }}</span>
+              <span class="hud-status-pill" [style.color]="cfg.color" [style.border-color]="cfg.color">
+                {{ cfg.label }}
+              </span>
+            </div>
+
+            <!-- CPU — bar hidden when OFFLINE, '—' label instead of 0% -->
             <div class="hud-metric-block">
               <div class="hud-metric-label">CPU</div>
-              <div class="hud-bar-track">
-                <div
-                  class="hud-bar-fill"
-                  [style.width]="cpuBarWidth(svc.cpu)"
-                  [style.background]="cpuColor(svc.cpu)">
+              @if (cfg.showBar) {
+                <div class="hud-bar-track">
+                  <div class="hud-bar-fill"
+                       [style.width]="cpuBarWidth(svc.cpu)"
+                       [style.background]="cfg.color">
+                  </div>
                 </div>
-              </div>
-              <div class="hud-metric-value">{{ svc.cpu.toFixed(1) }}%</div>
+                <div class="hud-metric-value">{{ svc.cpu.toFixed(1) }}%</div>
+              } @else {
+                <div class="hud-bar-track hud-bar-track--dead"></div>
+                <div class="hud-metric-value hud-metric-value--muted">—</div>
+              }
             </div>
 
+            <!-- RAM — suppressed when OFFLINE -->
             <div class="hud-metric-block">
               <div class="hud-metric-label">RAM</div>
-              <div class="hud-ram-value">{{ svc.online ? formatBytes(svc.memory) : '—' }}</div>
+              <div class="hud-ram-value">{{ cfg.showBar ? formatBytes(svc.memory) : '—' }}</div>
             </div>
+
           </div>
         }
 

src/app/components/performance-hud/performance-hud.component.scss

@@ -176,15 +176,45 @@
   }
 }
 
+// Name + status pill on one flex line
+.hud-service-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
 .hud-service-name {
   font-size: 0.72rem;
   font-weight: 700;
   color: #ffd700;
-  margin-bottom: 6px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
+// Coloured status pill — color and border-color are set inline from statusConfig()
+.hud-status-pill {
+  font-size: 0.55rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 1px 6px;
+  border-radius: 8px;
+  border: 1px solid;
+  background: transparent;
+  transition: color 0.3s ease, border-color 0.3s ease;
+}
+
+// Dead bar slot — keeps layout stable when bar is hidden
+.hud-bar-track--dead {
+  background: #111;
+  opacity: 0.4;
+}
+
+// Muted value label used for OFFLINE state
+.hud-metric-value--muted {
+  color: #333;
+}
+
 .hud-metric-block {
   display: flex;
   align-items: center;

src/app/components/performance-hud/performance-hud.component.ts

@@ -14,7 +14,19 @@ import { CommonModule } from '@angular/common';
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { VisionSocketService } from '../../services/vision-socket.service';
-import { ServiceStatus } from '../../core/interfaces/system-metrics.interface';
+import { ServiceStatus, ServiceStatusType } from '../../core/interfaces/system-metrics.interface';
+
+export interface StatusConfig {
+  color:   string;  // CSS color for the status pill and bar
+  label:   string;  // Human-readable state label
+  showBar: boolean; // Whether to render the CPU progress bar at all
+}
+
+const STATUS_CONFIG: Record<ServiceStatusType, StatusConfig> = {
+  ACTIVE:  { color: '#00a651', label: 'ACTIVE',  showBar: true  },
+  IDLE:    { color: '#ffc107', label: 'IDLE',     showBar: true  },
+  OFFLINE: { color: '#555555', label: 'OFFLINE',  showBar: false },
+};
 
 @Component({
   selector: 'app-performance-hud',
@@ -33,8 +45,13 @@ export class PerformanceHudComponent {
     this.collapsed.update(v => !v);
   }
 
+  /** Returns the full rendering config for a service status — no branching in the template. */
+  statusConfig(status: ServiceStatusType): StatusConfig {
+    return STATUS_CONFIG[status];
+  }
+
   formatBytes(bytes: number): string {
-    if (bytes === 0) return '0 B';
+    if (bytes === 0) return '—';
     const mb = bytes / (1024 * 1024);
     return `${mb.toFixed(1)} MB`;
   }

src/app/core/interfaces/system-metrics.interface.ts

@@ -1,7 +1,9 @@
+export type ServiceStatusType = 'ACTIVE' | 'IDLE' | 'OFFLINE';
+
 export interface ServiceStatus {
   service: string;
   pid: number | null;
-  online: boolean;
+  status: ServiceStatusType;
   cpu: number;    // %
   memory: number; // bytes
 }

src/environments/environment.ts

@@ -1,6 +1,6 @@
 export const environment = {
   production: false,
-  apiUrl: 'https://192.168.100.100:3000',
-  nestWsUrl: 'https://192.168.100.100:3000',   // Socket.io host (monitor + vision + embedding)
+  apiUrl: 'https://localhost:3000',
+  nestWsUrl: 'https://localhost:3000',   // Socket.io host (monitor + vision + embedding)
   n8nWebhookUrl: 'http://localhost:5678/webhook/rag-query', // n8n RAG entry webhook
 };