Skip to content

ccperdst-lab/openclaw-monitor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

133 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŸข OpenClaw Monitor 3D

Real-time 3D visualization dashboard for OpenClaw AI agents.

Watch your AI agents come alive in a vibrant 3D world โ€” each agent is a continent, each session is a minion walking around. Click to see live conversations, send messages, and monitor your entire agent fleet in real-time.

GitHub Stars Three.js Node.js License: MIT

Demo

โœจ Why OpenClaw Monitor?

Problem Solution
"What is my agent doing right now?" ๐ŸŸก Minions with live thinking bubbles
"Which session is active?" ๐ŸŒ Each session = a minion on its continent
"I want to talk to my agent directly" ๐Ÿ’ฌ Click any minion to open a chat bubble
"Agent dashboards are boring" ๐ŸŽฎ Pokรฉmon-style 3D world with physics

๐ŸŒ 3D World

  • Agent Continents โ€” Each OpenClaw agent gets a procedurally-generated village with houses, trees, flowers, ponds, fences, lamp posts, and benches
  • Dynamic Nature โ€” Wind-swaying grass (600+ blades), fluffy animated trees, rippling water with lily pads, floating cherry blossom petals
  • Clouds & Sky โ€” Volumetric clouds, dynamic lighting
  • Weather Effects โ€” Toggleable rain system
  • Draggable Minions โ€” Pick up any minion and drop them anywhere in the world

๐ŸŸก Minions (Sessions)

Each active OpenClaw session spawns a unique minion character:

  • Unique Characters โ€” Randomized height, width, body color, eye count (1 or 2), hair style, goggles, arms, legs
  • Detailed 3D Model โ€” Capsule body, goggle frames, overalls, shoes โ€” all built from Three.js primitives
  • Chinese Names โ€” Each minion gets a random name (ๅฐๆ˜Ž, ้˜ฟ่Šฑ, ๅคงๅฃฎ...)
  • Physics System โ€” Gravity, ground collision, drag & drop with falling animation
  • Smart Pathfinding โ€” Walk to points of interest: house, table, pond, bench
  • AABB Collision โ€” No walking through walls, furniture, or other minions
  • Live Expressions โ€” Eyes change based on state (thinking ๐Ÿ’›, done โœ…, idle)
  • Thinking Bubbles โ€” Animated "..." + mini speech bubble showing latest activity

๐Ÿ’ฌ Conversation Bubbles

Click any minion to open its conversation bubble โ€” a live window into the agent's mind:

Section What it shows
๐Ÿ’ญ Thinking Extended reasoning content (if model supports it)
๐Ÿ”ง Tool calls Tool name + arguments
๐Ÿ“‹ Tool results Execution output (truncated)
๐Ÿ’ฌ Final reply The actual response sent to the user

Features:

  • Real-time SSE โ€” Updates stream in as the agent works
  • Expandable history โ€” Scroll up to load older messages
  • Collapsible panel โ€” Click header to show/hide activity log
  • Two view modes โ€” Floating bubble (default) or pinned panel (๐Ÿ“Œ)
  • Auto-scroll โ€” Follows new activity while respecting manual scroll
  • Direct chat โ€” Type in the bubble to send a message to that session
  • Abort button โ€” ๐Ÿ›‘ Terminate an active thinking run from the bubble

๐ŸŒ World Chat

Press T to open the world chat panel โ€” broadcast a message to all agents at once, or watch the live feed of all agent activity across every session.


๐Ÿ” Auth & Access Control

When auth.enabled: true, the monitor requires login before accessing the 3D world.

How it works:

  • The first user to register automatically becomes admin โ€” no pre-seeding needed
  • Subsequent registrations require an invite or admin approval
  • Session tokens are stored in localStorage and validated on every API call
  • The admin panel is accessible only at a secret randomized URL (generated on first run, persisted to disk, printed in server logs, and linked from the 3D world UI via a hidden button)

Roles:

Role 3D World Chat Admin Panel User Management
admin โœ… โœ… โœ… โœ…
user โœ… โœ… โŒ โŒ
viewer โœ… โŒ โŒ โŒ

When auth.enabled: false (default): no login required โ€” anyone with port access can use the monitor.


๐Ÿ›ก๏ธ Admin Panel

The admin panel is a separate management UI accessible at the secret URL. It has three sections:

๐Ÿ‘ค Users

  • View all registered users with their role, creation time, and last login
  • Create new users (set username, password, role)
  • Delete users (with confirmation)
  • Change roles on the fly

๐Ÿค– Agents

  • Overview cards: total agents, active sessions, total sessions
  • Sessions table โ€” lists every session with: agent name, session type (group/dm/cron/subagent), channel, and current status
  • Useful for quickly spotting stuck or zombie sessions

โš™๏ธ Settings (coming soon)

  • Runtime config editing without restarting the server

Navigation:

  • Admin panel has its own sidebar with Users / Agents sections
  • "๐ŸŒ ่ฟ”ๅ›ž 3D ไธ–็•Œ" button in the sidebar takes you back to the 3D monitor

๐Ÿ› ๏ธ Quick Start

git clone https://github.com/ccperdst-lab/openclaw-monitor.git
cd openclaw-monitor
npm install
npm start
# Open http://localhost:7777

Requires OpenClaw to be installed and running on the same machine.


โš™๏ธ Configuration

Create config.yaml in the project root:

openclawRoot: ~/.openclaw  # Path to OpenClaw root (auto-detected if omitted)
port: 7777                 # Server port

auth:
  enabled: false           # Set true to require login

display:
  showCron: true           # Show cron sessions as minions
  showSubagent: true       # Show subagent sessions as minions
  recentMinutes: 10        # Only show sessions active in last N minutes

โŒจ๏ธ Keyboard Shortcuts

Key Action
W / A / S / D or Arrow Keys Move camera
Mouse drag Rotate view
Scroll Zoom
T Toggle world chat panel
R Toggle rain
F1 Screenshot mode (hide UI)
Click minion Open conversation bubble
Drag minion Pick up and relocate

๐Ÿ—๏ธ Architecture

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”     SSE      โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  OpenClaw       โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ถ  โ”‚  Monitor     โ”‚
โ”‚  Gateway        โ”‚              โ”‚  Server      โ”‚
โ”‚  ~/.openclaw/   โ”‚ โ—€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€  โ”‚  (Express)   โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜   REST API   โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                                        โ”‚  WebSocket
                                   โ”Œโ”€โ”€โ”€โ”€โ–ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
                                   โ”‚  Three.js   โ”‚
                                   โ”‚  3D World   โ”‚
                                   โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

The monitor server tails OpenClaw's session JSONL files and broadcasts events to all connected browsers via SSE. No modification to OpenClaw is required.


๐Ÿ”ฅ Similar Projects

Project Difference
openclaw-office Isometric view, no physics
Divan Room-based, no minions
agent-monitor Pixel art style

Our edge: Full 3D physics world + per-session minion characters + live thinking bubbles + direct chat + admin panel.


๐Ÿค Contributing

PRs welcome! Check Issues for open tasks.

โญ Star History

Star History Chart

๐Ÿ“ License

MIT