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
- Avatar with personality - Cute chibi style that blinks and breathes
- Context monitoring - Color-coded progress bar warns you before hitting the limit
- Real-time updates - WebSocket pushes new activities instantly
- Trigger maintenance - Compact context directly from the UI
Screenshot
Usage
Start the dashboard
CODEBLOCK0
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 - INLINECODE3 - 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 - INLINECODE6 - HTTP + WebSocket server
- INLINECODE7 - CLI tool for broadcasting activities
Activity Control UI - 动漫风格实时控制面板
给你的 OpenClaw Agent 一个可视化身体！动漫风格渐变背景 + Q 版虚拟头像，实时显示 Agent 正在做什么。
✨ 功能特性
- - 🎨 动漫风格 UI：渐变星空背景搭配浮动粒子，全动漫美学设计
- 👧 虚拟头像：内嵌 SVG Q 版角色，带有眨眼动画和呼吸光效
- 💬 实时对话气泡：显示 Agent 当前正在执行的操作，实时更新
- 📊 上下文计量器：通过色彩渐变直观显示上下文窗口使用情况
- 📜 实时活动记录：所有活动的历史日志
- ✅ 任务追踪：列出当前正在进行的任务及其状态
- ⚡ 自动刷新：每 30 秒自动更新状态
- 🎯 快捷操作：一键刷新/压缩上下文
功能说明
该技能提供一个本地 Web 服务器，具备以下功能：
- 1. 可视化仪表盘 - 一目了然查看 Agent 当前工作内容
- 个性头像 - 可爱的 Q 版风格，带有眨眼和呼吸效果
- 上下文监控 - 彩色编码进度条，在达到限制前发出警告
- 实时更新 - WebSocket 即时推送新活动
- 触发器维护 - 直接从界面压缩上下文
截图
使用方法
启动仪表盘
bash
cd activity-control-ui && npm install
node scripts/start-server.js [端口号]
默认端口：8080 → 打开 http://localhost:8080
系统要求
- - 安装有 ws 包的 Node.js（通过 npm install 自动安装）
API 接口
- - GET /api/status - 获取当前会话状态 JSON
- WS /ws/activity - 实时活动流
- 使用 node scripts/broadcast.js 消息 [类型] 从 Agent 广播新活动
作者
由 rudagebil11-jpg 用 ❤️ 制作
资源文件
- - assets/control-ui.html - 主仪表盘 HTML，包含内嵌 SVG 头像
- scripts/start-server.js - HTTP + WebSocket 服务器
- scripts/broadcast.js - 用于广播活动的命令行工具
