🎁 Get the FREE AI Skills Starter Guide — Subscribe →
BytesAgainBytesAgain
BytesAgain › Skills › Agent Kanban
🦀 ClawHub

Agent Kanban

by @dyh

OpenClaw Agent Dashboard - A Bloomberg Terminal-style web interface for real-time monitoring of all Agent status, session history, and session file sizes. Us...

Versionv1.1.1
Downloads1,806
#data#writing#legal#education
TERMINAL
clawhub install agent-kanban

📖 About This Skill

name: agent-kanban description: OpenClaw Agent Dashboard - A Bloomberg Terminal-style web interface for real-time monitoring of all Agent status, session history, and session file sizes. Use this skill when users need to monitor agents, view agent status, or deploy a kanban dashboard.

Agent Kanban

OpenClaw Agent Dashboard - Bloomberg Terminal Style Interface.

Features

  • Real-time Monitoring - View all Agent online status and last active time
  • Auto Grouping - Group by project prefix (main, pmo, alpha, beta)
  • Heartbeat Display - Show agent heartbeat interval from openclaw.json
  • Session History - Click cards to view recent conversation history
  • File Viewer - View Agent's OKR.md, SOUL.md, HEARTBEAT.md
  • Session Size Monitor - Display .jsonl file size with threshold warnings
  • Send Message - Send messages to agents directly from the UI
  • Font Size Control - 10px-24px with reset button (R)
  • Bloomberg Style - Bloomberg Terminal style interface
  • Auto Config Reload - Hot reload when openclaw.json changes
  • Configurable Timeouts - All timeouts and paths configurable via config.js

    • Tech Stack

  • Backend: Node.js + Express
  • Frontend: React 18 (CDN)
  • Avatar: DiceBear Pixel Art API
  • API: OpenClaw Gateway HTTP API

    • Quick Start

    1. Deploy

    # Copy project to destination
cp -r assets/agent-kanban /path/to/destination/
cd /path/to/destination/agent-kanban
    Install dependencies
    
npm install

    2. Start (No Manual Config Needed!)

    # Ensure Gateway is running
openclaw gateway start
    Start Kanban
    
npm start
    Access
    

    http://localhost:3100

    Gateway Token is auto-loaded from ~/.openclaw/openclaw.json - no manual configuration required!

    3. (Optional) Custom Config

    cp config.js config.local.js

    Edit config.local.js if needed

    Config options:

    module.exports = {
  server: { port: 3100, host: '0.0.0.0' },
  gateway: {
    url: 'http://127.0.0.1:18789',
    token: ''  // Leave empty to auto-load from openclaw.json
  },
  openclaw: {
    homeDir: '.openclaw',
    configFilename: 'openclaw.json',
    binPath: '/home/dyh/.nvm/versions/node/v22.18.0/bin/openclaw',
    nodePath: '/home/dyh/.nvm/versions/node/v22.18.0/bin'
  },
  timeout: {
    gatewayHealth: 5000,
    gatewayInvoke: 30000,
    sendMessage: 120
  },
  frontend: {
    refreshInterval: 30000,
    highlightThreshold: 60000,
    activeThreshold: 300000
  },
  refreshInterval: 60000,
  sessionSizeThresholds: { warning: 500, danger: 1024 }
};

    Prerequisites

    1. OpenClaw installed and running 2. Gateway started (openclaw gateway start) 3. Node.js 18+ installed

    UI Operations

    | Action | Description | |--------|-------------| | Click agent card | View details (files + messages) | | - / + button | Adjust font size (10-24px) | | R button | Reset font size to 13px | | CLOSE button | Close agent + hide right panel | | HIDE button | Hide right panel | | Input box + SEND | Send message to selected agent |

    Send Message to Agent

    Click on an agent card, then use the input box at the bottom of the right panel to send messages directly to the agent.

  • Uses openclaw agent --agent --message CLI command
  • Message appears in agent's session history
  • Agent responds based on its role and context

    • Error Handling

    | Error | Code | Solution | |-------|------|----------| | Gateway 未启动 | GATEWAY_NOT_RUNNING | Run openclaw gateway start | | Gateway 响应超时 | GATEWAY_TIMEOUT | Check Gateway health | | Gateway Token 无效 | TOKEN_INVALID | Check token in openclaw.json | | Gateway Token 未配置 | TOKEN_MISSING | Run openclaw wizard | | 网络错误 | NETWORK_ERROR | Check network connection |

    Security

  • Local Access Only: Gateway URL must be localhost or private IP
  • CORS Protected: Only allows requests from localhost:3100
  • Token Validation: Validates Gateway token before API calls

    • Get Gateway Token

    # Method 1: From config file
cat ~/.openclaw/openclaw.json | jq '.gateway.auth.token'
    Method 2: From CLI
    
openclaw gateway status

    Agent Kanban（中文）

    OpenClaw Agent 状态监控面板 - Bloomberg Terminal 风格界面。

    功能特性

  • 实时监控 - 显示所有 Agent 的在线状态、最后活跃时间
  • 自动分组 - 按项目前缀自动分组（main、pmo、alpha、beta）
  • 心跳显示 - 从 openclaw.json 读取并显示 Agent 心跳间隔
  • 会话历史 - 点击卡片查看最近的对话记录
  • 文件查看 - 查看 Agent 的 OKR.md、SOUL.md、HEARTBEAT.md
  • Session 大小监控 - 显示 .jsonl 文件大小，超过阈值高亮警告
  • 发送消息 - 直接从界面给 Agent 发送消息
  • 字号调节 - 10px-24px，带重置按钮
  • 彭博风格 - Bloomberg Terminal 风格界面
  • 配置热更新 - 自动检测 openclaw.json 变化并重新加载
  • 可配置超时 - 所有超时和路径可通过 config.js 配置

    • 快速开始

    1. 部署

    cp -r assets/agent-kanban /path/to/destination/
cd /path/to/destination/agent-kanban
npm install

    2. 启动（无需手动配置！）

    openclaw gateway start
npm start

    访问 http://localhost:3100

    Gateway Token 自动从 ~/.openclaw/openclaw.json 读取，无需手动配置！

    获取 Gateway Token

    cat ~/.openclaw/openclaw.json | jq '.gateway.auth.token'

    Changelog

    2026-03-31

  • New Feature: Send message to agent from UI
  • New Feature: /api/config endpoint for frontend configuration
  • Improvement: All hardcoded values moved to config.js
  • Fix: File expand height improved

    • More Documentation

    See references/README.md for full documentation.

    💡 Examples

    1. Deploy

    # Copy project to destination
cp -r assets/agent-kanban /path/to/destination/
cd /path/to/destination/agent-kanban
    Install dependencies
    
npm install

    2. Start (No Manual Config Needed!)

    # Ensure Gateway is running
openclaw gateway start
    Start Kanban
    
npm start
    Access
    

    http://localhost:3100

    Gateway Token is auto-loaded from ~/.openclaw/openclaw.json - no manual configuration required!

    3. (Optional) Custom Config

    cp config.js config.local.js

    Edit config.local.js if needed

    Config options:

    module.exports = {
  server: { port: 3100, host: '0.0.0.0' },
  gateway: {
    url: 'http://127.0.0.1:18789',
    token: ''  // Leave empty to auto-load from openclaw.json
  },
  openclaw: {
    homeDir: '.openclaw',
    configFilename: 'openclaw.json',
    binPath: '/home/dyh/.nvm/versions/node/v22.18.0/bin/openclaw',
    nodePath: '/home/dyh/.nvm/versions/node/v22.18.0/bin'
  },
  timeout: {
    gatewayHealth: 5000,
    gatewayInvoke: 30000,
    sendMessage: 120
  },
  frontend: {
    refreshInterval: 30000,
    highlightThreshold: 60000,
    activeThreshold: 300000
  },
  refreshInterval: 60000,
  sessionSizeThresholds: { warning: 500, danger: 1024 }
};

    ⚙️ Configuration

    1. OpenClaw installed and running 2. Gateway started (openclaw gateway start) 3. Node.js 18+ installed