claw-dashboard 2.0.0 → 2.1.0

package/.github/workflows/ci.yml

@@ -25,10 +25,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
@@ -48,7 +48,7 @@ jobs:
 
       - name: Upload coverage to Codecov
         if: matrix.node-version == 20 && github.event_name != 'pull_request'
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           files: ./coverage/lcov.info
           fail_ci_if_error: false
@@ -63,10 +63,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 20
           cache: 'npm'
@@ -78,7 +78,7 @@ jobs:
         run: npm run build
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: dist
           path: dist/
@@ -92,7 +92,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -117,10 +117,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 20
           cache: 'npm'
@@ -141,7 +141,7 @@ jobs:
           output: 'trivy-results.sarif'
 
       - name: Upload Trivy scan results
-        uses: github/codeql-action/upload-sarif@v3
+        uses: github/codeql-action/upload-sarif@v4
         if: always()
         with:
           sarif_file: 'trivy-results.sarif'

package/.github/workflows/release.yml

@@ -14,10 +14,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 20
           cache: 'npm'

package/.github/workflows/security.yml

@@ -17,10 +17,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 20
           cache: 'npm'
@@ -45,7 +45,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Dependency Review
         uses: actions/dependency-review-action@v4
@@ -68,17 +68,17 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v4
         with:
           languages: ${{ matrix.language }}
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@v4
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v4
         with:
           category: "/language:${{matrix.language}}"

package/index.js

@@ -397,6 +397,22 @@ async function getLatestVersion() {
   } catch { return null; }
 }
 
+async function getLatestDashboardVersion() {
+  try {
+    return await new Promise((resolve) => {
+      https.get('https://api.github.com/repos/spleck/claw-dashboard/releases/latest', {
+        headers: { 'User-Agent': 'claw-dashboard' }
+      }, (res) => {
+        let data = '';
+        res.on('data', chunk => data += chunk);
+        res.on('end', () => {
+          try { resolve(JSON.parse(data).tag_name?.replace(/^v/, '')); } catch { resolve(null); }
+        });
+      }).on('error', () => resolve(null)).setTimeout(3000);
+    });
+  } catch { return null; }
+}
+
 function formatDuration(seconds) {
   if (!seconds || seconds < 0) return '--';
   const days = Math.floor(seconds / 86400);
@@ -836,7 +852,7 @@ class Dashboard {
     // Favorites state
     this.showFavoritesOnly = this.settings.showFavoritesOnly || false;
     this.history = { cpu: new Array(HISTORY_LENGTH).fill(0), memory: new Array(HISTORY_LENGTH).fill(0), netRx: new Array(NETWORK_HISTORY_LENGTH).fill(0), netTx: new Array(NETWORK_HISTORY_LENGTH).fill(0) };
-    this.data = { cpu: [], memory: {}, openclaw: null, gpu: null, network: null, sessions: [], agents: [], version: null, latest: null, sessionTPS: {}, sessionLastTPS: {} };
+    this.data = { cpu: [], memory: {}, openclaw: null, gpu: null, network: null, sessions: [], agents: [], version: null, latest: null, dashboardVersion: DASHBOARD_VERSION, dashboardLatest: null, sessionTPS: {}, sessionLastTPS: {} };
     // Data freshness tracking - stores timestamps when each data type was last successfully fetched
     this.dataTimestamps = { cpu: null, memory: null, gpu: null, network: null, disk: null, system: null, sessions: null };
     this.prev = null;
@@ -1265,6 +1281,13 @@ class Dashboard {
     }).catch(() => {
       this.data.latest = null;
     });
+
+    // Also check for dashboard updates
+    getLatestDashboardVersion().then(latest => {
+      this.data.dashboardLatest = latest;
+    }).catch(() => {
+      this.data.dashboardLatest = null;
+    });
   }
 
   createWidgets() {
@@ -5081,11 +5104,23 @@ class Dashboard {
         }
       }
 
+      // Fetch gateway uptime FIRST - if process isn't running, gateway is down
+      // This must be checked before fetchSessions() since it can succeed via local fallback
+      this.data.gatewayUptime = await getGatewayUptime();
+      const isGatewayProcessRunning = this.data.gatewayUptime !== null;
+
       // Fetch sessions via API (same as clawps) - has displayName and channel
       try {
         const sessions = await timeOperation('Sessions', () => this.fetchSessions(), 5000);
         this.data.sessions = sessions || [];
-        this.data.openclaw = { gateway: { reachable: true } };
+        // Gateway is ONLY reachable if: process is running AND at least one endpoint responds
+        const stats = this.data.gatewayStats;
+        const allUnreachable = stats && stats.totalEndpoints > 0 && stats.reachableEndpoints === 0;
+        if (!isGatewayProcessRunning || allUnreachable) {
+          this.data.openclaw = { gateway: { reachable: false } };
+        } else {
+          this.data.openclaw = { gateway: { reachable: true } };
+        }
         this.dataTimestamps.sessions = now;
 
         // Clean up stale sessionTPS entries for sessions that no longer exist
@@ -5437,7 +5472,18 @@ class Dashboard {
         openclawText = `openclaw ${current}`;
       }
     }
-    this.diffRenderer.setContent('title', this.w.title, `Dashboard ${DASHBOARD_VERSION}, ${openclawText}`);
+
+    // Render dashboard version with update check
+    let dashboardText = `dashboard ${this.data.dashboardVersion}`;
+    if (this.data.dashboardLatest && this.data.dashboardVersion) {
+      if (this.data.dashboardVersion === this.data.dashboardLatest) {
+        dashboardText = `dashboard ${this.data.dashboardVersion} ✓`;
+      } else {
+        dashboardText = `dashboard ${this.data.dashboardVersion} → ${this.data.dashboardLatest}`;
+      }
+    }
+
+    this.diffRenderer.setContent('title', this.w.title, `Claw ${dashboardText}, ${openclawText}`);
 
     // Update clock - show current local time, PAUSED indicator on the right (with differential updates)
     const now = new Date();
@@ -5588,9 +5634,12 @@ class Dashboard {
     const gatewayHealth = gatewayManager.getEndpointHealth();
     const unreachableCount = gatewayHealth.filter(ep => ep.enabled && !ep.reachable).length;
     const enabledCount = gatewayHealth.filter(ep => ep.enabled).length;
+    const isGatewayProcessRunning = this.data.gatewayUptime !== null;
     let gatewayIndicator = '';
     if (enabledCount > 0) {
-      if (unreachableCount === 0) {
+      if (!isGatewayProcessRunning) {
+        gatewayIndicator = '{red-fg}✗ gateway offline{/red-fg}  [G] retry  ';
+      } else if (unreachableCount === 0) {
         gatewayIndicator = '{green-fg}● gateway{/green-fg}  ';
       } else if (unreachableCount === enabledCount) {
         gatewayIndicator = '{red-fg}✗ gateway offline{/red-fg}  [G] retry  ';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claw-dashboard",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A beautiful console dashboard for monitoring OpenClaw instances — inspired by htop/btop/mactop",
   "main": "index.js",
   "exports": {
@@ -60,8 +60,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "blessed": "^0.1.81",
-    "blessed-contrib": "^1.0.11",
+    "@pm2/blessed": "^0.1.81",
     "chalk": "^5.3.0",
     "sql.js": "^1.14.0",
     "systeminformation": "^5.21.22"
@@ -69,7 +68,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "c8": "^11.0.0",
-    "esbuild": "^0.25.12",
+    "esbuild": "^0.27.3",
     "eslint": "^10.0.2",
     "husky": "^9.1.7",
     "jest": "^30.2.0",

package/src/plugin-scaffold.js

@@ -585,7 +585,7 @@ export { ${className} };
 
   chart: {
     name: 'Chart Widget',
-    description: 'Widget with real-time line chart visualization using blessed-contrib',
+    description: 'Widget with real-time line chart visualization using ASCII art',
     manifest: (id, name, author, options = {}) => ({
       id,
       name: name || id.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
@@ -607,7 +607,7 @@ export { ${className} };
 
     widgetCode: (id, className) => `/**
  * ${className} Widget Plugin
- * Chart widget with real-time data visualization using blessed-contrib
+ * Chart widget with real-time data visualization using ASCII art
  */
 
 import { BaseWidget } from 'claw-dashboard/widgets';
@@ -644,14 +644,13 @@ export default class ${className} extends BaseWidget {
   }
 
   /**
-   * Create the widget UI with blessed-contrib line chart
+   * Create the widget UI with ASCII line chart
    * @param {Object} screen - Blessed screen object
    * @param {Object} theme - Theme colors
    */
   async create(screen, theme = {}) {
     const C = theme.colors || {};
     const blessed = await import('blessed');
-    const contrib = await import('blessed-contrib');
 
     this.screen = screen;
     this.theme = theme;
@@ -668,27 +667,15 @@ export default class ${className} extends BaseWidget {
       },
     });
 
-    // Create the line chart using blessed-contrib
-    this.chart = contrib.default.line({
+    // Create ASCII chart area using text element
+    this.chartArea = blessed.default.text({
       parent: this.box,
       top: 1,
       left: 1,
       width: '95%',
-      height: 14,
-      style: {
-        line: C.green || 'green',
-        text: C.white || 'white',
-        baseline: C.gray || 'gray',
-      },
-      xLabelPadding: 3,
-      xPadding: 5,
-      numYLabels: 5,
-      showNthLabel: Math.ceil(this.maxDataPoints / 6),
-      showLegend: this.showLegend,
-      legend: { width: 12 },
-      minY: 0,
-      maxY: 100,
-      wholeNumbersOnly: true,
+      height: 13,
+      tags: true,
+      style: { fg: C.green || 'green' },
     });
 
     // Add info text
@@ -709,6 +696,29 @@ export default class ${className} extends BaseWidget {
     return this;
   }
 
+  /**
+   * Generate ASCII chart from data
+   */
+  _renderAsciiChart(values, width = 60, height = 10) {
+    if (!values || values.length === 0) return 'No data';
+    
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min || 1;
+    
+    let chart = '';
+    for (let row = height - 1; row >= 0; row--) {
+      const threshold = min + (range * row / height);
+      let line = '';
+      for (let i = 0; i < Math.min(values.length, width); i++) {
+        const val = values[i];
+        line += val >= threshold ? '█' : '░';
+      }
+      chart += line + '\n';
+    }
+    return chart;
+  }
+
   /**
    * Generate sample data - customize this for your data source
    */
@@ -748,16 +758,9 @@ export default class ${className} extends BaseWidget {
   render(data) {
     if (!this.chart || !data) return;
 
-    // Prepare chart data
-    const chartData = {
-      title: '${className}',
-      x: data.labels,
-      y: data.values,
-      style: { line: 'green' },
-    };
-
-    // Update the chart
-    this.chart.setData([chartData]);
+    // Generate ASCII chart
+    const asciiChart = this._renderAsciiChart(data.values);
+    this.chartArea.setContent(asciiChart);
 
     // Update info text
     const avg = data.values.length > 0
@@ -1102,7 +1105,6 @@ export default class ${className} extends BaseWidget {
   async create(screen, theme = {}) {
     const C = theme.colors || {};
     const blessed = await import('blessed');
-    const contrib = await import('blessed-contrib');
 
     this.screen = screen;
     this.theme = theme;
@@ -1119,35 +1121,16 @@ export default class ${className} extends BaseWidget {
       },
     });
 
-    // Create gauge based on type
-    if (this.gaugeType === 'circle') {
-      this.gauge = contrib.default.gauge({
-        parent: this.box,
-        top: 1,
-        left: 'center',
-        width: '90%',
-        height: 6,
-        style: {
-          label: { fg: C.white || 'white' },
-          value: { fg: C.green || 'green' },
-        },
-        label: this.name,
-      });
-    } else {
-      // Linear gauge
-      this.gauge = contrib.default.gauge({
-        parent: this.box,
-        top: 2,
-        left: 1,
-        width: '96%',
-        height: 4,
-        style: {
-          label: { fg: C.white || 'white' },
-          value: { fg: C.green || 'green' },
-        },
-        label: this.name,
-      });
-    }
+    // Create ASCII gauge area
+    this.gaugeArea = blessed.default.text({
+      parent: this.box,
+      top: 1,
+      left: 'center',
+      width: '90%',
+      height: 6,
+      tags: true,
+      style: { fg: C.green || 'green' },
+    });
 
     // Value display
     this.valueText = blessed.default.text({
@@ -1167,6 +1150,15 @@ export default class ${className} extends BaseWidget {
     return this;
   }
 
+  /**
+   * Generate ASCII gauge
+   */
+  _renderAsciiGauge(percent, width = 20) {
+    const filled = Math.round((percent / 100) * width);
+    const bar = '█'.repeat(filled) + '░'.repeat(width - filled);
+    return bar;
+  }
+
   /**
    * Generate sample data - customize this for your data source
    */
@@ -1186,14 +1178,11 @@ export default class ${className} extends BaseWidget {
    * Render the gauge with data
    */
   render(result) {
-    if (!this.gauge || !result) return;
-
-    // Set gauge percentage (0-100)
-    this.gauge.setData(result.percentage);
-
-    // Update value text
-    this.valueText.setContent(result.value + this.unit);
+    if (!this.gaugeArea || !result) return;
 
+    // Generate ASCII gauge
+    const asciiGauge = this._renderAsciiGauge(result.percentage);
+    
     // Color based on value
     let color = 'green';
     if (result.percentage > 80) {
@@ -1202,6 +1191,11 @@ export default class ${className} extends BaseWidget {
       color = 'yellow';
     }
 
+    // Update gauge display
+    this.gaugeArea.setContent('{' + color + '-fg}' + asciiGauge + '{/' + color + '-fg}');
+    
+    // Update value text
+    this.valueText.setContent(result.value + this.unit);
     this.valueText.style.fg = this.theme?.colors?.[color] || color;
   }
 
@@ -1242,9 +1236,8 @@ export default class ${className} extends BaseWidget {
   async destroy() {
     this.stopAutoRefresh();
 
-    if (this.gauge) {
-      this.gauge.destroy();
-      this.gauge = null;
+    if (this.gaugeArea) {
+      this.gaugeArea = null;
     }
 
     if (this.box) {

package/src/widgets/builtin-widgets.js

@@ -4,7 +4,6 @@
  */
 
 import blessed from 'blessed';
-import contrib from 'blessed-contrib';
 import { BaseWidget } from './plugin-api.js';
 
 /**