feat(elements): add eco-provider-frame and dataprovider interfaces; improve virtual keyboard interactions; add demos, exports and bump dev dependencies

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

@@ -149,27 +149,83 @@ export class EcoViewSystem extends DeesElement {
   @property({ type: String })
   accessor activePanel: TSystemPanel = 'overview';
 
-  // Mock system data
-  @state()
-  accessor cpuUsage = 42;
+  // System data (can be set externally)
+  @property({ type: Number })
+  accessor cpuUsage = 0;
+
+  @property({ type: Number })
+  accessor memoryUsage = 0;
+
+  @property({ type: Number })
+  accessor diskUsage = 0;
+
+  @property({ type: Number })
+  accessor cpuTemp = 0;
+
+  @property({ type: String })
+  accessor uptime = '--';
+
+  @property({ type: Number })
+  accessor cpuCores = 0;
+
+  @property({ type: String })
+  accessor cpuModel = 'Unknown';
+
+  @property({ type: Number })
+  accessor cpuSpeed = 0;
+
+  @property({ type: Number })
+  accessor memoryTotal = 0;
+
+  @property({ type: Number })
+  accessor memoryUsed = 0;
+
+  @property({ type: Number })
+  accessor memoryFree = 0;
+
+  @property({ type: String })
+  accessor hostname = 'Unknown';
+
+  @property({ type: String })
+  accessor platform = 'Unknown';
+
+  @property({ type: Array })
+  accessor loadAvg: number[] = [0, 0, 0];
 
   @state()
-  accessor memoryUsage = 67;
+  accessor networkIn = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 
   @state()
-  accessor diskUsage = 54;
+  accessor networkOut = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 
-  @state()
-  accessor cpuTemp = 58;
+  // Public method to update metrics from backend
+  public setMetrics(metrics: {
+    cpu: { usage: number; cores: number; model: string; speed: number; loadAvg: number[] };
+    memory: { total: number; used: number; free: number; usagePercent: number };
+    system: { platform: string; hostname: string; uptimeFormatted: string };
+  }): void {
+    this.cpuUsage = metrics.cpu.usage;
+    this.cpuCores = metrics.cpu.cores;
+    this.cpuModel = metrics.cpu.model;
+    this.cpuSpeed = metrics.cpu.speed;
+    this.loadAvg = metrics.cpu.loadAvg;
+    this.memoryUsage = metrics.memory.usagePercent;
+    this.memoryTotal = metrics.memory.total;
+    this.memoryUsed = metrics.memory.used;
+    this.memoryFree = metrics.memory.free;
+    this.hostname = metrics.system.hostname;
+    this.platform = metrics.system.platform;
+    this.uptime = metrics.system.uptimeFormatted;
+  }
 
-  @state()
-  accessor uptime = '14d 7h 32m';
-
-  @state()
-  accessor networkIn = [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 72];
-
-  @state()
-  accessor networkOut = [32, 28, 35, 42, 38, 45, 52, 48, 55, 62, 58, 65];
+  // Helper to format bytes
+  private formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  }
 
   private getMenuGroups(): ISecondaryMenuGroup[] {
     return [
@@ -299,6 +355,7 @@ export class EcoViewSystem extends DeesElement {
         value: this.memoryUsage,
         type: 'gauge' as const,
         icon: 'lucide:memoryStick',
+        description: this.memoryTotal ? `${this.formatBytes(this.memoryUsed)} of ${this.formatBytes(this.memoryTotal)}` : undefined,
         gaugeOptions: {
           min: 0,
           max: 100,
@@ -373,12 +430,12 @@ export class EcoViewSystem extends DeesElement {
         description: 'Since last reboot',
       },
       {
-        id: 'processes',
-        title: 'Processes',
-        value: 247,
-        type: 'number' as const,
-        icon: 'lucide:layers',
-        description: '12 running, 235 sleeping',
+        id: 'hostname',
+        title: 'Hostname',
+        value: this.hostname,
+        type: 'text' as const,
+        icon: 'lucide:server',
+        description: `${this.platform} - ${this.cpuCores} cores`,
       },
     ];