claw-dashboard 1.8.1 → 1.8.4

package/FEATURES.md

@@ -0,0 +1,133 @@
+# Claw Dashboard Feature History
+
+## Features Tried
+
+### Top Processes Widget
+- **Date tried**: 2026-02-11, 2026-02-12
+- **Status**: REMOVED - PERMANENTLY DECLINED
+- **Reason**: Layout issues (squeezed display, overflow problems)
+- **User feedback (2026-02-11)**: Declined for lack of interest
+- **User feedback (2026-02-12)**:
+  1. Redundant to previous rejection
+  2. **Colors render as markup** - blessed color tags showing literally instead of rendering
+  3. **Layout problems**: Split screen makes logs unreadable, limits visible content
+- **Re-added by**: Cron job 2026-02-12 (mistake - should not have been re-added)
+- **Action**: NEVER implement this feature again
+
+## Current Features (Retained)
+- System stats (CPU, memory, GPU, disk, network)
+- OpenClaw sessions list
+- OpenClaw agents list
+- Uptime tracking
+- OpenClaw logs
+- Settings panel
+
+## User Preferences
+- Prefer clean, uncluttered layout
+- Session list format should match `clawps` style
+- Memory calculation should exclude cache (Activity Monitor style)
+- No interest in top processes widget
+
+## Pending Ideas
+- None currently
+
+## Technical Notes
+
+### Color Markup Fix (blessed)
+When colors show as literal text like `{green-fg}text{/green-fg}` instead of rendering:
+- **Cause**: Mixing blessed tags with plain strings, or improper tag formatting
+- **Fix**: Use blessed's `{color-fg}text{/color-fg}` format consistently
+- **Check**: Ensure `tags: true` is set on blessed text elements
+- **Avoid**: Concatenating tagged strings with plain strings incorrectly
+
+### Layout Guidelines
+- Split-screen layouts reduce readability
+- Logs need full width to be useful
+- Avoid squeezing content into narrow columns
+
+### Network Traffic Sparkline
+- **Date tried**: 2026-02-13
+- **Status**: SHIPPED
+- **Description**: Added sparkline visualization to network widget showing upload/download traffic history
+- **Implementation**: Combined RX+TX data displayed as activity sparkline, consistent with CPU/memory widgets
+- **Version**: v1.7.0
+
+### Real-time Clock Widget
+- **Date tried**: 2026-02-13
+- **Status**: SHIPPED
+- **Description**: Added a real-time clock showing current time and date in the top-right corner of the dashboard
+- **Implementation**: Displays HH:MM:SS AM/PM format with date (e.g., "Feb 13"), updates every refresh cycle
+- **Timezone**: America/Chicago (CST) to match user's timezone
+- **Version**: v1.7.1
+
+### Pause/Resume Refresh Feature
+- **Date tried**: 2026-02-14
+- **Status**: SHIPPED
+- **Description**: Added ability to pause and resume auto-refresh with 'p' or Space key
+- **Implementation**: 
+  - Press 'p' or Space to toggle pause state
+  - When paused: clock shows [PAUSED] in yellow, footer shows "▶ running"
+  - When running: footer shows "p pause"
+  - Help panel updated with new key binding
+- **User feedback**: (to be filled in)
+- **Version**: v1.7.2
+
+### Network Traffic Sparkline Visualization
+- **Date tried**: 2026-02-15
+- **Status**: SHIPPED
+- **Description**: Added sparkline visualization to network widget showing combined RX+TX traffic history
+- **Implementation**:
+  - Extended network widget height from 4 to 5 rows to accommodate sparkline
+  - Added combined network activity sparkline (RX + TX data) displayed below interface name
+  - Uses existing network history data (30 data points, ~60 seconds of history)
+  - Adjusted log box position to prevent overlap (top: 23, height: 100%-24)
+- **User feedback**: (to be filled in)
+- **Version**: v1.7.3
+
+### Disk Usage Sparkline
+- **Date tried**: 2026-02-15
+- **Status**: DECLINED
+- **Description**: Added sparkline visualization to disk widget showing disk usage history over time
+- **Reason declined**: Disk usage changes too slowly - sparkline provides no useful insight at 2s refresh intervals
+- **User feedback**: "Disk usage changes slowly. Spark line kind of useless."
+- **Version**: Not shipped
+
+### Load Average Display
+- **Date tried**: 2026-02-15, 2026-02-18
+- **Status**: REJECTED
+- **Description**: Added 1/5/15 minute load average display to CPU widget detail line
+- **Implementation**:
+  - Attempt 1 (2026-02-15): Added as new row in System widget (increased all widget heights)
+  - Attempt 2 (2026-02-18): Moved to CPU box detail line, replacing "X cores" text
+- **Reason rejected**: Feature not needed
+- **User feedback**: "It would be better added to the cpu box to replace the middle line instead of changing the row size" (2026-02-15), then ultimately rejected 2026-02-18
+- **Version**: Not shipped
+
+### Session Sorting Feature
+- **Date tried**: 2026-02-19
+- **Status**: SHIPPED
+- **Description**: Added ability to sort sessions by different criteria using the 'o' key
+- **Sort modes**:
+  - `time`: Most recently updated first (default)
+  - `tokens`: Highest token usage first
+  - `idle`: Longest idle time first
+  - `name`: Alphabetical by agent name
+- **Implementation**:
+  - Press 'o' to cycle through sort modes
+  - Current sort mode shown in footer and session box label
+  - Setting persists across restarts
+  - Updated help panel with new key binding
+- **Version**: v1.8.3
+
+## Version History
+- v1.5.1: Baseline
+- v1.6.0: Session list improvements, memory calculation fix
+- v1.7.0: **REVERT** - top processes added then removed
+- v1.7.0 (new): Network traffic sparkline visualization
+- v1.7.1: Real-time clock widget
+- v1.7.2: Pause/resume refresh feature
+- v1.7.3: Network sparkline widget enhancement
+- v1.7.4: Disk usage sparkline visualization (DECLINED - not useful)
+- v1.7.5: Load average display (REJECTED)
+- v1.8.1: Session list improvements
+- v1.8.2: Session sorting feature

package/README.md

@@ -49,11 +49,21 @@ npm start
 |-----|--------|
 | `q` or `Q` | Quit the dashboard |
 | `r` or `R` | Force refresh data |
+| `p` or `Space` | Pause/resume auto-refresh |
+| `o` | Cycle session sort (time/tokens/idle/name) |
 | `?` or `h` | Toggle help panel |
 | `s` or `S` | Open/close settings panel |
 | `Esc` | Close settings panel (when open) |
 | `Ctrl+C` | Quit gracefully |
 
+### Session Sorting
+
+Press `o` to cycle through different ways to sort the sessions list:
+- **time** (default): Most recently updated sessions first
+- **tokens**: Sessions with highest token usage first
+- **idle**: Sessions with longest idle time first
+- **name**: Alphabetical order by agent name
+
 ## ⚙️ Settings
 
 Press `s` to open the settings panel where you can customize:

package/index.js

@@ -35,7 +35,8 @@ const DEFAULT_SETTINGS = {
   showNetwork: true,
   showGPU: true,
   showDisk: true,
-  logLevelFilter: 'all'
+  logLevelFilter: 'all',
+  sessionSortMode: 'time' // 'time' | 'tokens' | 'idle' | 'name'
 };
 
 function loadSettings() {
@@ -407,9 +408,10 @@ class Dashboard {
     this.w.gpuDetail = blessed.text({ parent: this.w.gpuBox, top: 1, left: 'center', content: '', style: { fg: C.gray } });
     this.w.gpuSpark = blessed.text({ parent: this.w.gpuBox, top: 2, left: 'center', content: '', style: { fg: C.yellow } });
 
-    this.w.sessBox = blessed.box({ parent: this.screen, top: 8, left: 0, width: '100%', height: 10, border: { type: 'line' }, label: ' SESSIONS ', style: { border: { fg: C.blue } } });
+    this.w.sessBox = blessed.box({ parent: this.screen, top: 8, left: 0, width: '100%', height: 10, border: { type: 'line' }, label: ' SESSIONS ', style: { border: { fg: C.blue } }, tags: true });
     this.w.sessHeader = blessed.text({ parent: this.w.sessBox, top: 0, left: 1, content: 'STATUS AGENT                                          MODEL           CONTEXT      IDLE    CHAN', style: { fg: C.brightWhite, bold: true } });
     this.w.sessList = blessed.text({ parent: this.w.sessBox, top: 1, left: 1, width: '98%', height: 7, content: '', style: { fg: C.white }, tags: true });
+    this.w.sessCount = blessed.text({ parent: this.w.sessBox, top: 0, right: 2, content: '', style: { fg: C.gray } });
 
     this.w.sysBox = blessed.box({ parent: this.screen, top: 18, left: 0, width: '25%', height: 4, border: { type: 'line' }, label: ' SYSTEM ', style: { border: { fg: C.gray } } });
     this.w.sysInfoLine1 = blessed.text({ parent: this.w.sysBox, top: 0, left: 'center', content: '...', style: { fg: C.gray } });
@@ -440,6 +442,15 @@ class Dashboard {
     this.screen.key(['?', 'h'], () => this.toggleHelp());
     this.screen.key(['s', 'S'], () => this.toggleSettings());
     this.screen.key(['p', ' '], () => this.togglePause());
+    this.screen.key('o', () => this.cycleSessionSort());
+  }
+
+  cycleSessionSort() {
+    const modes = ['time', 'tokens', 'idle', 'name'];
+    const currentIdx = modes.indexOf(this.settings.sessionSortMode);
+    this.settings.sessionSortMode = modes[(currentIdx + 1) % modes.length];
+    saveSettings(this.settings);
+    this.render();
   }
 
   togglePause() {
@@ -472,6 +483,7 @@ class Dashboard {
       '  {cyan-fg}q{/cyan-fg} or {cyan-fg}Ctrl+C{/cyan-fg}  Quit the dashboard',
       '  {cyan-fg}r{/cyan-fg}              Force refresh all data',
       '  {cyan-fg}p{/cyan-fg} or {cyan-fg}Space{/cyan-fg}    Pause/resume auto-refresh',
+      '  {cyan-fg}o{/cyan-fg}              Cycle session sort (time/tokens/idle/name)',
       '  {cyan-fg}?{/cyan-fg} or {cyan-fg}h{/cyan-fg}        Toggle this help panel',
       '  {cyan-fg}s{/cyan-fg} or {cyan-fg}S{/cyan-fg}        Open settings panel',
       '',
@@ -684,9 +696,7 @@ class Dashboard {
         transcriptPath: session.transcriptPath || ''
       }));
       
-      // Sort by updatedAt descending (most recent first)
-      sessions.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
-      
+      // Sorting is applied in render() based on sessionSortMode setting
       return sessions;
     } catch (err) {
       throw new Error('Failed to read sessions: ' + err.message);
@@ -906,7 +916,26 @@ class Dashboard {
     }
 
     if (this.data.sessions.length) {
-      const lines = this.data.sessions.map(s => {
+      // Sort sessions based on current sort mode
+      const sortMode = this.settings.sessionSortMode || 'time';
+      const sortedSessions = [...this.data.sessions].sort((a, b) => {
+        switch (sortMode) {
+          case 'time':
+            return (b.updatedAt || 0) - (a.updatedAt || 0); // Most recent first
+          case 'tokens':
+            return (b.totalTokens || 0) - (a.totalTokens || 0); // Most tokens first
+          case 'idle':
+            const idleA = a.updatedAt ? Date.now() - a.updatedAt : 0;
+            const idleB = b.updatedAt ? Date.now() - b.updatedAt : 0;
+            return idleB - idleA; // Longest idle first
+          case 'name':
+            return (a.displayName || '').localeCompare(b.displayName || ''); // A-Z
+          default:
+            return (b.updatedAt || 0) - (a.updatedAt || 0);
+        }
+      });
+
+      const lines = sortedSessions.map(s => {
         // Calculate idle time
         const idleMs = s.updatedAt ? Date.now() - s.updatedAt : 0;
 
@@ -953,8 +982,10 @@ class Dashboard {
         return `${statusStr} ${agentName} ${model} ${context} ${idle} ${channel}`;
       });
       this.w.sessList.setContent(lines.join('\n'));
+      this.w.sessCount.setContent(`${this.data.sessions.length} sessions`);
     } else {
       this.w.sessList.setContent('No active sessions');
+      this.w.sessCount.setContent('0 sessions');
     }
 
     // Update logs - colorize by level and filter
@@ -1054,10 +1085,15 @@ class Dashboard {
       this.w.uptimeBox.style.border.fg = C.gray;
     }
 
-    // Update footer with current refresh interval and pause state
+    // Update footer with current refresh interval, pause state, and sort mode
     const refreshSec = Math.round(this.settings.refreshInterval / 1000);
     const pauseIndicator = this.isPaused ? '▶ running' : 'p pause';
-    this.w.footerText.setContent(`q quit  r refresh  ${pauseIndicator}  ? help  s settings  •  ${refreshSec}s refresh`);
+    const sortMode = this.settings.sessionSortMode;
+    this.w.footerText.setContent(`q quit  r refresh  ${pauseIndicator}  o sort:${sortMode}  ? help  s settings  •  ${refreshSec}s refresh`);
+
+    // Update session box label to show sort mode
+    const sortLabel = sortMode === 'time' ? 'TIME' : sortMode === 'tokens' ? 'TOKENS' : sortMode === 'idle' ? 'IDLE' : 'NAME';
+    this.w.sessBox.setLabel(` SESSIONS (${sortLabel}) `);
 
     try {
       this.screen.render();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claw-dashboard",
-  "version": "1.8.1",
+  "version": "1.8.4",
   "description": "A beautiful console dashboard for monitoring OpenClaw instances — inspired by htop/btop/mactop",
   "main": "index.js",
   "bin": {