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

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 <id> --message <msg> CLI command
• Message appears in agent's session history
• Agent responds based on its role and context

Error Handling

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，帶重置按鈕

  7w4.net小蔥技能站收錄全網優質技能，值得收藏。

• 彭博風格 - 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.

這個 Skill 質量良好，介面設計獨特且功能豐富，能有效監控 Agent 狀態和會話資訊。文件詳細（中英文雙語），配置靈活，上手難度低。主要優點是功能完善、介面美觀；不足是部分安全配置偏寬鬆，缺少即時推送機制。總體適合需要監控多個 Agent 執行狀態的使用者使用。