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:

来源于7w4.net。

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，带重置按钮
• 彭博风格 - 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 运行状态的用户使用。