feat(eco-view-system): add memory usage history, process metrics, and top processes display with loading fallback

changelog.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 2026-01-12 - 3.39.0 - feat(eco-view-system)
+add memory usage history, process metrics, and top processes display with loading fallback
+
+- Add memoryUsageHistory state and update it in setMetrics to track memory usage trend
+- Introduce process state: processTotal, processRunning, processSleeping, processBlocked, and topProcesses
+- Extend setProcesses signature to accept blocked and a typed process list and store values in state
+- Use reactive state values in UI tiles (memory trend, process tiles) instead of hardcoded placeholders
+- Replace 'Threads' tile with 'Blocked' tile and update its icon and color
+- Render top processes from state and show a 'Loading...' fallback when the list is empty
+
 ## 2026-01-12 - 3.38.0 - feat(eco-view-system)
 add extended system metrics and display formatted total network usage in eco system view
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@ecobridge.xyz/catalog',
-  version: '3.38.0',
+  version: '3.39.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/views/eco-view-system/eco-view-system.ts

@@ -246,6 +246,25 @@ export class EcoViewSystem extends DeesElement {
   @state()
   accessor networkOutHistory: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 
+  @state()
+  accessor memoryUsageHistory: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+
+  // Process data
+  @state()
+  accessor processTotal = 0;
+
+  @state()
+  accessor processRunning = 0;
+
+  @state()
+  accessor processSleeping = 0;
+
+  @state()
+  accessor processBlocked = 0;
+
+  @state()
+  accessor topProcesses: Array<{ name: string; pid: number; cpu: number; memory: number; state: string }> = [];
+
   // Public method to update metrics from backend
   public setMetrics(metrics: {
     cpu: { usage: number; cores: number; physicalCores?: number; model: string; speed: number; speedMax?: number; loadAvg: number[]; coreLoads?: number[] };
@@ -275,6 +294,9 @@ export class EcoViewSystem extends DeesElement {
     this.swapTotal = metrics.memory.swapTotal || 0;
     this.swapUsed = metrics.memory.swapUsed || 0;
 
+    // Update memory usage history for trend chart
+    this.memoryUsageHistory = [...this.memoryUsageHistory.slice(1), metrics.memory.usagePercent];
+
     // Disk metrics
     if (metrics.disk) {
       this.diskUsage = metrics.disk.usagePercent;
@@ -308,8 +330,12 @@ export class EcoViewSystem extends DeesElement {
   }
 
   // Method to set processes data
-  public setProcesses(data: { total: number; running: number; sleeping: number; list: any[] }): void {
-    // Could store and display process data if needed
+  public setProcesses(data: { total: number; running: number; sleeping: number; blocked?: number; list: Array<{ name: string; pid: number; cpu: number; memory: number; state: string }> }): void {
+    this.processTotal = data.total;
+    this.processRunning = data.running;
+    this.processSleeping = data.sleeping;
+    this.processBlocked = data.blocked || 0;
+    this.topProcesses = data.list || [];
   }
 
   // Helper to format bytes
@@ -692,7 +718,7 @@ export class EcoViewSystem extends DeesElement {
         value: `${this.memoryUsage}%`,
         type: 'trend' as const,
         icon: 'lucide:trendingUp',
-        trendData: [58, 62, 65, 63, 68, 72, 70, 65, this.memoryUsage],
+        trendData: this.memoryUsageHistory,
         description: 'Recent usage',
       },
       {
@@ -853,14 +879,14 @@ export class EcoViewSystem extends DeesElement {
       {
         id: 'total-processes',
         title: 'Total Processes',
-        value: 247,
+        value: this.processTotal,
         type: 'number' as const,
         icon: 'lucide:layers',
       },
       {
         id: 'running',
         title: 'Running',
-        value: 12,
+        value: this.processRunning,
         type: 'number' as const,
         icon: 'lucide:play',
         color: 'hsl(142 71% 45%)',
@@ -868,30 +894,21 @@ export class EcoViewSystem extends DeesElement {
       {
         id: 'sleeping',
         title: 'Sleeping',
-        value: 235,
+        value: this.processSleeping,
         type: 'number' as const,
         icon: 'lucide:moon',
         color: 'hsl(217 91% 60%)',
       },
       {
-        id: 'threads',
-        title: 'Threads',
-        value: 1842,
+        id: 'blocked',
+        title: 'Blocked',
+        value: this.processBlocked,
         type: 'number' as const,
-        icon: 'lucide:gitBranch',
+        icon: 'lucide:pauseCircle',
+        color: 'hsl(0 84% 60%)',
       },
     ];
 
-    const topProcesses = [
-      { name: 'node', pid: 1234, cpu: 12.5, memory: 8.2 },
-      { name: 'chrome', pid: 2345, cpu: 8.3, memory: 15.4 },
-      { name: 'code', pid: 3456, cpu: 5.2, memory: 12.1 },
-      { name: 'docker', pid: 4567, cpu: 4.8, memory: 6.8 },
-      { name: 'postgres', pid: 5678, cpu: 3.2, memory: 4.5 },
-      { name: 'nginx', pid: 6789, cpu: 1.5, memory: 2.1 },
-      { name: 'redis', pid: 7890, cpu: 0.8, memory: 1.8 },
-    ];
-
     return html`
       <div class="panel-header">
         <div class="panel-title">Processes</div>
@@ -915,14 +932,14 @@ export class EcoViewSystem extends DeesElement {
             <span>CPU %</span>
             <span>Memory %</span>
           </div>
-          ${topProcesses.map(proc => html`
+          ${this.topProcesses.length > 0 ? this.topProcesses.map(proc => html`
             <div class="process-row">
               <span class="process-name">${proc.name}</span>
               <span class="process-value">${proc.pid}</span>
               <span class="process-value ${proc.cpu > 10 ? 'high' : ''}">${proc.cpu}%</span>
               <span class="process-value ${proc.memory > 10 ? 'high' : ''}">${proc.memory}%</span>
             </div>
-          `)}
+          `) : html`<div class="process-row"><span class="process-name">Loading...</span></div>`}
         </div>
       </div>
     `;