task-monitor – OpenClaw Skill

---

name: task-monitor description: Real-time web dashboard for OpenClaw sessions and background tasks. Mobile-responsive with auto-refresh. version: 0.1.0

Task Monitor v0.1

Real-time monitoring dashboard for OpenClaw with web interface.

Features

• 🌐 Web Dashboard - Beautiful, responsive UI accessible from any device
• 📱 Mobile-First - Optimized for phones and tablets
• 🔄 Auto-Refresh - Updates every 60 seconds
• 🎨 Modern Design - Gradient UI with dark theme
• 📊 Live Data - Main session, Discord, sub-agents, cron jobs
• 🚀 Fast API - JSON endpoint with intelligent caching (30s TTL)
• ⚡ Performance - <100ms response time (cached), ~15s cold cache

Installation

cd skills/task-monitor
npm install

Usage

Start Web Server

./scripts/start-server.sh

Server will run on port 3030 (accessible on LAN).

Access URLs:

• Local: http://localhost:3030
• LAN: http://<your-ip>:3030

Stop Server

./scripts/stop-server.sh

API Endpoint

curl http://localhost:3030/api/status

Returns JSON with:

• Main session stats
• Discord session stats
• Active sub-agents (with descriptions)
• Recent cron job history

Generate Markdown (v0.1)

Legacy markdown generator still available:

./scripts/generate-dashboard.js

Updates DASHBOARD.md in workspace root.

Automation

CRON job runs every 5 minutes to update markdown dashboard: */5 * * * * -> Executes generate-dashboard.js

Architecture

• Backend: Node.js + Express
• Frontend: Pure HTML/CSS/JS (no frameworks)
• Data Source: openclaw sessions list --json + openclaw cron list --json
• Caching: In-memory cache with 30-second TTL
  • Pre-warmed on server startup
  • Async background refresh when expired
  • Stale-while-revalidate pattern for optimal UX
• Refresh: Client-side polling (60s interval)

Performance

Without cache:

• API response time: ~15 seconds (blocking)
• Problem: Each request blocks Node.js event loop

With cache:

• Cache hit: <100ms (~365x faster)
• Cache miss: ~15s (first request only)
• Stale cache: <100ms while refreshing in background
• Cache TTL: 30 seconds

The caching system ensures:

• Lightning-fast responses for most requests
• No blocking of concurrent requests
• Graceful degradation when cache expires

🤖 Task Monitor v0.1

Real-time web dashboard for monitoring OpenClaw sessions and background tasks with a beautiful, mobile-responsive interface.

✨ Features

• 🌐 Web Dashboard - Beautiful, responsive UI accessible from any device (desktop, tablet, mobile)
• 📱 Mobile-First Design - Optimized touch-friendly interface for phones and tablets
• 🔄 Auto-Refresh - Live updates every 60 seconds without manual intervention
• 🎨 Modern UI - Gradient design with dark theme and glassmorphism effects
• 📊 Comprehensive Monitoring - Track main session, Discord, sub-agents, and cron jobs
• 🚀 Fast API - JSON endpoint with intelligent caching (30s TTL)
• ⚡ High Performance - <100ms response time (cached), ~15s cold cache
• 💾 Smart Caching - Stale-while-revalidate pattern ensures fast responses even when cache expires

📋 Prerequisites

• Node.js 14.0.0 or higher
• OpenClaw CLI installed and configured
• Access to openclaw sessions list and openclaw cron list commands

🚀 Installation

1. Navigate to the skill directory:

cd skills/task-monitor

2. Install dependencies:

npm install

📖 Usage

Start the Web Server

./scripts/start-server.sh

The server will start on port 3030 and be accessible on your local network.

Access URLs:

• Local: http://localhost:3030
• LAN: http://<your-ip>:3030

To find your IP address:

• Linux/Mac: hostname -I or ifconfig
• Windows: ipconfig

Stop the Server

./scripts/stop-server.sh

View Server Logs

tail -f ~/.openclaw/task-monitor-server.log

API Endpoint

The dashboard exposes a JSON API endpoint:

curl http://localhost:3030/api/status

Response Example:

{
  "timestamp": "2024-02-01T23:15:00.000Z",
  "totalSessions": 5,
  "main": {
    "model": "anthropic/claude-sonnet-4",
    "totalTokens": 125000,
    "contextTokens": 50000,
    "ageMs": 3600000
  },
  "discord": {
    "model": "anthropic/claude-sonnet-4",
    "totalTokens": 85000,
    "contextTokens": 35000,
    "ageMs": 7200000
  },
  "subagents": [
    {
      "sessionId": "abc123...",
      "description": "Processing user request...",
      "model": "anthropic/claude-sonnet-4",
      "totalTokens": 15000,
      "ageMs": 300000
    }
  ],
  "recentCrons": [
    {
      "name": "heartbeat-check",
      "updatedAt": 1706827500000,
      "model": "anthropic/claude-sonnet-4"
    }
  ],
  "cached": true,
  "cacheAge": 15
}

Legacy Markdown Generator (v0.1)

The original markdown generator is still available:

./scripts/generate-dashboard.js

This creates/updates DASHBOARD.md in your workspace root.

🏗️ Architecture

Technology Stack

• Backend: Node.js + Express
• Frontend: Pure HTML/CSS/JavaScript (no frameworks required)
• Data Source: OpenClaw CLI (sessions list, cron list)
• Caching: In-memory cache with 30-second TTL

Caching Strategy

• Pre-warmed on startup - Cache loaded immediately when server starts
• Async background refresh - Non-blocking cache updates
• Stale-while-revalidate - Returns stale data while fetching fresh data
• Separate cron cache - Cron jobs cached for 5 minutes (they rarely change)

Performance Metrics

Scenario	Response Time	Notes
Cache Hit	<100ms	~365x faster than cold fetch
Cache Miss	~15s	First request or expired cache
Stale Cache	<100ms	Returns stale data while refreshing

📱 Mobile Experience

The dashboard is fully optimized for mobile devices:

• Touch-friendly card-based layout
• Responsive grid that adapts to screen size
• Readable fonts on small screens
• No horizontal scrolling
• Optimized for portrait and landscape modes

🔧 Configuration

Change Port

Edit server.js and modify:

const PORT = 3030; // Change to your desired port

Adjust Cache TTL

Edit server.js:

const CACHE_TTL_MS = 30000; // 30 seconds (adjust as needed)
const CRON_CACHE_TTL_MS = 300000; // 5 minutes (adjust as needed)

Customize UI

The HTML dashboard is embedded in server.js. You can modify:

• Color scheme (CSS gradients)
• Refresh interval (JavaScript: setInterval)
• Card layout and content
• Typography and spacing

🔄 Automation

Optional: CRON Integration

You can set up a cron job to keep the markdown dashboard updated:

openclaw cron add "*/5 * * * *" "cd ~/clawd/skills/task-monitor && ./scripts/generate-dashboard.js" --name "dashboard-update"

This updates DASHBOARD.md every 5 minutes.

🐛 Troubleshooting

Server won't start

• Check if port 3030 is already in use: lsof -i :3030
• Verify Node.js is installed: node --version
• Check logs: cat ~/.openclaw/task-monitor-server.log

Empty dashboard

• Ensure OpenClaw CLI is working: openclaw sessions list --json
• Verify you have active sessions
• Check browser console for JavaScript errors

Performance issues

• Increase cache TTL if data freshness isn't critical
• Check if openclaw commands are slow (try running manually)
• Monitor server logs for errors

📝 License

MIT License - Free to use, modify, and distribute.

🤝 Contributing

Contributions welcome! This skill is part of the OpenClaw ecosystem.

🔗 Related Skills

• session-manager - Manage OpenClaw sessions
• cron-helper - Advanced cron job management
• log-viewer - View and search OpenClaw logs

📚 Learn More

• OpenClaw Documentation
• ClawHub
• OpenClaw GitHub