Activity Control Ui

🎨 Anime-style real-time activity dashboard with virtual avatar for OpenClaw. Displays current agent activities, session status, token usage, and ongoing tas...

Activity Control UI - 动漫风格实时控制面板

给你的 OpenClaw Agent 一个可视化身体！动漫风格渐变背景 + Q 版虚拟头像，实时显示 Agent 正在做什么。

✨ Features

• 🎨 Anime style UI: Gradient starry background with floating particles, full anime aesthetic
• 👧 Virtual avatar: Inline SVG chibi character with blinking animation and breathing glow
• 💬 Live speech bubble: Shows what the agent is doing right now, updates in real-time
• 📊 Context meter: Beautiful visual indicator for context window usage with color gradient
• 📜 Real-time activity feed: Historical log of all activities
• ✅ Task tracking: Lists current ongoing tasks with status
• ⚡ Auto-refresh: Automatically updates status every 30 seconds
• 🎯 Quick actions: One-click refresh / compact context

What it does

This skill provides a local web server with:

1. Visual dashboard - See at a glance what the agent is working on
2. Avatar with personality - Cute chibi style that blinks and breathes
3. Context monitoring - Color-coded progress bar warns you before hitting the limit
4. Real-time updates - WebSocket pushes new activities instantly
5. Trigger maintenance - Compact context directly from the UI

Screenshot

Usage

Start the dashboard

cd activity-control-ui && npm install
node scripts/start-server.js [port]

Default port: 8080 → open http://localhost:8080

Requirements

• Node.js with ws package (installed automatically with npm install)

API

• GET /api/status - Get current session status JSON
• WS /ws/activity - Real-time activity stream
• Use node scripts/broadcast.js "message" [type] to broadcast new activities from the agent

Author

Created with ❤️ by rudagebil11-jpg

Resources

• assets/control-ui.html - Main dashboard HTML with inline SVG avatar
• scripts/start-server.js - HTTP + WebSocket server
• scripts/broadcast.js - CLI tool for broadcasting activities