Mission Control 🚀
A real-time dashboard showing what your OpenClaw agent is doing, cron job health, issues requiring attention, and recent activity. Check it from anywhere — your phone, your laptop, wherever.
Quick Start
Tier 1 — Canvas (Zero Setup) ⚡
No external services. The agent renders the dashboard directly in your OpenClaw session.
How to use:
CODEBLOCK0
The agent will:
- 1. Gather current state (active tasks, crons, etc.)
- Generate a dashboard using the canvas tool
- Present it inline in your session
That's it. No deploy, no accounts, nothing to configure.
Tier 2 — GitHub Pages + Polling (Recommended) 🌐
Free hosting with 30-second auto-refresh. Takes 2 minutes to set up.
Setup:
- 1. Create a repo:
CODEBLOCK1
- 2. Copy the dashboard:
CODEBLOCK2
- 3. Edit
index.html:
- Change
YOUR_PIN_HERE to your chosen PIN
- 4. Enable GitHub Pages:
- Go to repo Settings → Pages
- Source: Deploy from branch
main
- Folder: INLINECODE3
- 5. Deploy:
CODEBLOCK3
Your dashboard is now live at https://YOUR_USERNAME.github.io/mission-control/
Tier 3 — Supabase Realtime + Vercel (Premium) ⚡🔥
True websocket realtime — updates appear in under 1 second.
Prerequisites:
- - Supabase account (free tier works)
- Vercel account (free tier works)
Step 1: Create Supabase Table
In your Supabase SQL Editor, run assets/templates/setup-supabase.sql.
Step 2: Get Your Keys
From Supabase Dashboard → Settings → API:
- - Copy
SUPABASE_URL (Project URL) - Copy
SUPABASE_ANON_KEY (anon public key)
That's it — no service_role key needed. The anon key handles both reads (dashboard) and writes (push script) via table-specific RLS.
Step 3: Edit the Dashboard
In tier3-realtime.html:
- 1. Replace
YOUR_SUPABASE_URL with your project URL - Replace
YOUR_SUPABASE_ANON_KEY with your anon key - Replace
YOUR_PIN_HERE with your chosen PIN
Step 4: Deploy to Vercel
CODEBLOCK4
Step 5: Configure Push Script
CODEBLOCK5
🔄 Keeping It Fresh — Auto-Update Mechanism
The dashboard updates itself automatically. Here's how:
1. Cron Auto-Update (Every 30 Minutes)
Set up a cron job that collects data from OpenClaw APIs and pushes it:
CODEBLOCK6
Data sources: Only OpenClaw built-in APIs (cron list, sessions_list). No local files are read. Action items and recent activity are added manually via the "Manual Update" command below.
Sample cron configuration:
CODEBLOCK7
2. Real-Time Event Pushes
Beyond the periodic cron, the agent pushes updates immediately when significant events happen:
- - ✅ Task starts or finishes
- ❌ Errors or failures
- 🚀 Deploys complete
- 📧 Important notifications arrive
This means the dashboard reflects changes within seconds, not just every 30 minutes.
How to enable: When you start a major task, tell the agent:
CODEBLOCK8
3. Force Update Button
Every dashboard tier includes a 🔄 Update button in the header:
- - Tier 2: Re-fetches
dashboard-data.json immediately - Tier 3: Re-fetches from Supabase immediately
- Resets the "Updated X ago" timer
- Shows loading spinner while fetching
Use this when you want to confirm the latest state without waiting for auto-refresh.
The Result
The combination of periodic cron + real-time pushes + manual refresh keeps your dashboard accurate at all times. You'll always see what your agent is actually doing.
Dashboard Features
🚨 Action Required
Urgent items that need your attention. Highlighted at the top with priority badges (high/medium/low).
⚡ Active Now
What the agent is currently working on, with model name and duration.
📊 Products
Your product cards with live/testing/down status badges.
⏰ Cron Jobs
Table showing all scheduled jobs with status, last run time, and error counts. Click to expand error details.
📋 Recent Activity
Timeline of recent events and accomplishments.
🔴 Live Indicator (Tier 3 only)
Green pulsing dot shows websocket is connected. Flash animation when data updates.
Requirements by Tier
| Tier | Tools Needed | External Accounts | Env Vars |
|---|
| Tier 1 | None | None | None |
| Tier 2 |
git,
gh CLI | GitHub (free) |
DASHBOARD_PIN |
|
Tier 3 |
curl | Supabase (free), Vercel (free) | See below |
Environment Variables
| Variable | Required | Tier | Purpose |
|---|
| INLINECODE19 | No | All | PIN code for dashboard access (set directly in HTML config) |
| INLINECODE20 |
Yes | Tier 3 only | Your Supabase project URL |
|
SUPABASE_ANON_KEY | Yes | Tier 3 only | Supabase anon key — used for both dashboard reads AND push script writes |
Tier 1 needs zero env vars. Tier 2 needs only a GitHub repo. Tier 3 needs only SUPABASE_URL and SUPABASE_ANON_KEY — no service_role key required.
Permissions Used by OpenClaw
| Tier | Permissions | Why |
|---|
| Tier 1 | None | Canvas is built into OpenClaw |
| Tier 2 |
exec | To run
git push to YOUR GitHub repo |
| Tier 3 |
exec | To run
curl to YOUR Supabase project |
No other permissions are used. No read permission needed — this skill does not access local files.
Data Schema
The dashboard expects JSON in this format:
CODEBLOCK9
Field Reference
| Field | Type | Description |
|---|
| INLINECODE29 | ISO-8601 | When data was last refreshed |
| INLINECODE30 |
high\|medium\|low | Urgency level |
|
products[].status |
live\|testing\|down | Product health |
|
crons[].status |
ok\|error\|paused | Job status |
Security & Privacy
This is an instruction-only skill — no executable code, no install scripts, no third-party dependencies.
What This Skill Does and Doesn't Do
| ✅ Does | ❌ Doesn't |
|---|
| Render HTML dashboards | Read local files (no HEARTBEAT.md, no memory files, no source code) |
| Push operational status to YOUR services |
Send data to third-party services |
| Read OpenClaw APIs only (cron list, sessions_list) | Store, log, or transmit credentials |
| Use YOUR Supabase/GitHub accounts | Require service_role or admin keys |
Exactly What Data Gets Pushed (Tier 2 & 3)
The dashboard pushes ONLY these fields — nothing else:
| Field | Example | Contains secrets? |
|---|
| INLINECODE36 | "Review PR #42" | ❌ No |
| INLINECODE37 |
"Deploying v2.0" | ❌ No |
|
products[].name | "My App" | ❌ No |
|
products[].url | "https://myapp.com" | ❌ No (public URLs only) |
|
products[].status | "live" | ❌ No |
|
crons[].name | "Daily Report" | ❌ No |
|
crons[].status | "ok" / "error" | ❌ No |
|
crons[].lastError | "timeout after 30s" | ❌ No (error messages only) |
|
recentActivity[].event | "✅ Deployed v2.1" | ❌ No |
Never pushed: passwords, API keys, tokens, file contents, database credentials, user data, or PII. The agent builds the JSON from operational status only — task names, timestamps, and status codes.
What Data the Agent Reads
The auto-update cron uses ONLY OpenClaw built-in APIs:
| Source | What it extracts | Sensitive? |
|---|
| INLINECODE45 (OpenClaw API) | Job names, status, error counts | ❌ No |
| INLINECODE46 (OpenClaw API) |
Active task labels, models | ❌ No |
No local files are read. The cron does not access HEARTBEAT.md, memory files, source code, or any other files on disk. Action items and recent activity are added manually by the user via the "Manual Update" command.
No Service Role Key Required
This skill does NOT require a Supabase service_role key. The anon key handles both reads and writes via table-specific RLS:
- - The
dashboard_state table allows anon SELECT and UPDATE (via RLS policy) - The anon key can ONLY read/write this single table — it cannot access any other tables
- Worst case if someone gets your anon key: they can overwrite dashboard status data (not sensitive)
- The anon key is the same one already embedded in your client-side Supabase app
Row Level Security (Tier 3)
The provided SQL (setup-supabase.sql) configures table-specific RLS:
- -
SELECT: Allowed for anon — dashboard can read status UPDATE: Allowed for anon on dashboard_state table only — push script can update status- Other tables: Unaffected — the anon key's existing RLS policies on all other tables remain unchanged
- No
DELETE: Anon cannot delete the dashboard row
PIN Protection — Limitations
The client-side PIN prevents casual access, NOT determined attackers.
For stronger protection:
- - Tier 2: Make your GitHub Pages repo private (GitHub Pro)
- Tier 3: Use Vercel's password protection (Pro plan) or add Supabase Auth
- All tiers: The dashboard only contains operational status — no secrets to steal even if accessed
Files Included
CODEBLOCK10
Troubleshooting
Dashboard shows "Disconnected" (Tier 3)
- - Check Supabase project is running
- Verify anon key is correct
- Ensure realtime is enabled on the table
Data not updating (Tier 2)
- - Check GitHub Pages is enabled
- Verify
data/dashboard-data.json was pushed - Hard refresh the page (Ctrl+Shift+R)
- Click the Force Update button to confirm data is stale
PIN not working
- - PINs are case-sensitive
- Check you're using the same PIN in HTML config
Cron status not accurate
- - Ensure your Dashboard Update cron is running (
cron list) - Check for errors in the cron output
- Manually run the update: "Update my Mission Control dashboard now"
Credits
Built for the OpenClaw community. MIT License.
任务控制中心 🚀
一个实时仪表盘,展示您的OpenClaw代理正在执行的操作、定时任务健康状况、需要关注的问题以及近期活动。随时随地查看——手机、笔记本电脑,任何地方都可以。
快速开始
第一层 — Canvas(零配置)⚡
无需外部服务。代理直接在您的OpenClaw会话中渲染仪表盘。
使用方法:
显示任务控制仪表盘
代理将:
- 1. 收集当前状态(活跃任务、定时任务等)
- 使用canvas工具生成仪表盘
- 在您的会话中内联展示
就是这样。无需部署、无需账户、无需任何配置。
第二层 — GitHub Pages + 轮询(推荐)🌐
免费托管,30秒自动刷新。只需2分钟即可完成设置。
设置步骤:
- 1. 创建仓库:
bash
gh repo create mission-control --public --clone
cd mission-control
- 2. 复制仪表盘文件:
bash
mkdir -p data
# 将 tier2-github.html 复制为 index.html
# 将 assets/templates/dashboard-data.json 复制到 data/
- 3. 编辑 index.html:
- 将 YOUR
PINHERE 替换为您选择的PIN码
- 4. 启用GitHub Pages:
- 进入仓库 Settings → Pages
- Source: Deploy from branch main
- Folder: / (root)
- 5. 部署:
bash
git add -A && git commit -m Initial deploy && git push
您的仪表盘现已上线,访问地址为 https://YOUR_USERNAME.github.io/mission-control/
第三层 — Supabase Realtime + Vercel(高级版)⚡🔥
真正的WebSocket实时更新——更新在1秒内显示。
前置条件:
- - Supabase账户(免费版即可)
- Vercel账户(免费版即可)
步骤1:创建Supabase表
在Supabase SQL编辑器中运行 assets/templates/setup-supabase.sql。
步骤2:获取密钥
从Supabase Dashboard → Settings → API:
- - 复制 SUPABASEURL(项目URL)
- 复制 SUPABASEANON_KEY(匿名公钥)
就是这样——无需service_role密钥。匿名密钥通过表特定的行级安全策略(RLS)处理读取(仪表盘)和写入(推送脚本)。
步骤3:编辑仪表盘
在 tier3-realtime.html 中:
- 1. 将 YOURSUPABASEURL 替换为您的项目URL
- 将 YOURSUPABASEANONKEY 替换为您的匿名密钥
- 将 YOURPIN_HERE 替换为您选择的PIN码
步骤4:部署到Vercel
bash
mkdir mission-control && cd mission-control
将 tier3-realtime.html 复制为 index.html
vercel deploy --prod
步骤5:配置推送脚本
bash
export SUPABASEURL=https://YOURPROJECT.supabase.co
export SUPABASEANONKEY=eyJ... # 与仪表盘使用的匿名密钥相同
🔄 保持更新 — 自动更新机制
仪表盘会自动更新。 具体方式如下:
1. 定时任务自动更新(每30分钟)
设置一个定时任务,从OpenClaw API收集数据并推送:
创建一个名为Dashboard Update的定时任务,每30分钟运行一次。
它应该:
- 1. 运行 cron list 获取所有定时任务状态、错误次数、上次运行时间
- 运行 sessions_list 查找活跃的子代理及其当前任务
- 从这些API数据构建仪表盘JSON
- 推送到Supabase(第二层则执行git push)
数据来源: 仅限OpenClaw内置API(cron list、sessions_list)。不读取本地文件。操作项和近期活动通过下方的手动更新命令手动添加。
示例定时任务配置:
yaml
name: Dashboard Update
schedule: /30 * # 每30分钟
model: sonnet # 快速模型用于快速更新
prompt: |
更新任务控制仪表盘:
1. 运行 cron list 获取任务名称、状态、错误次数、上次运行时间
2. 运行 sessions_list 查找活跃的子代理及其任务
3. 仅从API数据构建符合仪表盘模式的JSON
4. 推送到Supabase或GitHub
不要读取本地文件。仅使用cron list和sessions_list数据。
2. 实时事件推送
除了定期定时任务外,代理会在重要事件发生时立即推送更新:
- - ✅ 任务开始或完成
- ❌ 错误或失败
- 🚀 部署完成
- 📧 重要通知到达
这意味着仪表盘在几秒内就能反映变化,而不仅仅是每30分钟更新一次。
如何启用: 当您开始一个主要任务时,告诉代理:
这个部署完成后,向任务控制中心推送更新。
3. 强制更新按钮
每个仪表盘层级都包含一个 🔄 更新 按钮在顶部:
- - 第二层: 立即重新获取 dashboard-data.json
- 第三层: 立即从Supabase重新获取
- 重置X时间前更新计时器
- 获取时显示加载旋转图标
当您想确认最新状态而不等待自动刷新时,可以使用此按钮。
最终效果
定期定时任务 + 实时推送 + 手动刷新的组合让您的仪表盘始终保持准确。您随时都能看到代理实际在做什么。
仪表盘功能
🚨 需要操作
需要您关注的紧急事项。在顶部高亮显示,带有优先级标签(高/中/低)。
⚡ 当前活跃
代理当前正在处理的任务,显示模型名称和持续时间。
📊 产品
您的产品卡片,带有在线/测试/离线状态标签。
⏰ 定时任务
表格显示所有计划任务的状态、上次运行时间和错误次数。点击可展开错误详情。
📋 近期活动
近期事件和成就的时间线。
🔴 实时指示器(仅第三层)
绿色脉冲点表示WebSocket已连接。数据更新时显示闪烁动画。
各层级要求
git、gh CLI | GitHub(免费) | DASHBOARD_PIN |
|
第三层 | curl | Supabase(免费)、Vercel(免费) | 见下方 |
环境变量
| 变量 | 是否必需 | 层级 | 用途 |
|---|
| DASHBOARDPIN | 否 | 所有 | 仪表盘访问PIN码(直接在HTML配置中设置) |
| SUPABASEURL |
是 | 仅第三层 | 您的Supabase项目URL |
| SUPABASE
ANONKEY | 是 | 仅第三层 | Supabase匿名密钥——用于仪表盘读取和推送脚本写入 |
第一层需要零个环境变量。 第二层只需要一个GitHub仓库。第三层只需要 SUPABASEURL 和 SUPABASEANONKEY——无需servicerole密钥。
OpenClaw使用的权限
| 层级 | 权限 | 原因 |
|---|
| 第一层 | 无 | Canvas内置于OpenClaw |
| 第二层 |
exec | 用于对您的GitHub仓库执行 git push |
| 第三层 | exec | 用于对您的Supabase项目执行 curl |
不使用其他权限。不需要 read 权限——此技能不访问本地文件。
数据模式
仪表盘期望JSON格式如下:
json
{
lastUpdated: 2024-01-15T12:00:00Z,
actionRequired: [
{
title: Review PR #42,
url: https://github.com/you/repo/pull/42,
priority: high
}
],
activeNow: [
{
task: Deploying new feature,
model: opus,
startedAt: 2024-01-15T11:45:00Z
}
],
products: [
{
name: My App,
url: https://myapp.example.com,
status: live,
lastChecked: 2024-01-15T12:00:00Z
}
],
crons: [
{
name: