agent-dashboard

OpenClaw 的实时代理仪表板。监控活动任务、cron 作业运行状况、问题、 和来自任何地方的行动项目。三个设置层：(1) 零配置画布渲染 在 OpenClaw 内部，(2) 具有 30 秒轮询功能的 GitHub Pages — 免费，2 分钟设置， (3) Supabase Realtime + Vercel 用于即时 websocket 更新。所有数据都保留在您的 机。受 PIN 码保护。第 1 层不需要外部服务。第 3 层需要 SUPABASE_URL 和 SUPABASE_ANON_KEY（不需要 service_role 键）。仅可操作 推送状态数据（任务名称、cron 状态、时间戳）——从不推送凭据， API 密钥或文件内容。

## 概述（中文）

OpenClaw 的实时代理仪表板。监控活动任务、cron 作业运行状况、问题、
和来自任何地方的行动项目。三个设置层：(1) 零配置画布渲染
在 OpenClaw 内部，(2) 具有 30 秒轮询功能的 GitHub Pages — 免费，2 分钟设置，
(3) Supabase Realtime + Vercel 用于即时 websocket 更新。所有数据都保留在您的
机。受 PIN 码保护。第 1 层不需要外部服务。第 3 层需要
SUPABASE_URL 和 SUPABASE_ANON_KEY（不需要 service_role 键）。仅可操作
推送状态数据（任务名称、cron 状态、时间戳）——从不推送凭据，
API 密钥或文件内容。

## 原文

# 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:**
```
Show me the mission control dashboard
```

The agent will:
1. Gather current state (active tasks, crons, etc.)
2. Generate a dashboard using the canvas tool
3. 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:**
   ```bash
   gh repo create mission-control --public --clone
   cd mission-control
   ```

2. **Copy the dashboard:**
   ```bash
   mkdir -p data
   # Copy tier2-github.html to index.html
   # Copy assets/templates/dashboard-data.json to data/
   ```

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: `/ (root)`

5. **Deploy:**
   ```bash
   git add -A && git commit -m "Initial deploy" && git push
   ```

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
2. Replace `YOUR_SUPABASE_ANON_KEY` with your anon key
3. Replace `YOUR_PIN_HERE` with your chosen PIN

**Step 4: Deploy to Vercel**

```bash
mkdir mission-control && cd mission-control
# Copy tier3-realtime.html as index.html
vercel deploy --prod
```

**Step 5: Configure Push Script**

```bash
export SUPABASE_URL="https://YOUR_PROJECT.supabase.co"
export SUPABASE_ANON_KEY="eyJ..."  # Same anon key used by the dashboard
```

---

## 🔄 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:

```
Create a cron job called "Dashboard Update" that runs every 30 minutes.
It should:
1. Run `cron list` to get all cron job statuses, error counts, last run times
2. Run `sessions_list` to find any active sub-agents and their current tasks
3. Build the dashboard JSON from this API data
4. Push to Supabase (or git push for Tier 2)
```

**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:**
```yaml
name: Dashboard Update
schedule: "*/30 * * * *"  # Every 30 minutes
model: sonnet             # Fast model for quick updates
prompt: |
  Update the Mission Control dashboard:
  
  1. Run `cron list` to get job names, statuses, error counts, last run times
  2. Run `sessions_list` to find active sub-agents and their tasks
  3. Build JSON matching the dashboard schema from API data only
  4. Push to Supabase or GitHub
  
  Do not read local files. Only use cron list and sessions_list data.
```

### 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:
```
After this deploy finishes, push an update to Mission Control.
```

### 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 |
|----------|----------|------|---------|
| `DASHBOARD_PIN` | No | All | PIN code for dashboard access (set directly in HTML config) |
| `SUPABASE_URL` | 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:

```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": "Daily Report",
      "schedule": "9:00 AM daily",
      "lastRun": "2024-01-15T09:00:00Z",
      "status": "ok",
      "errors": 0,
      "lastError": null
    }
  ],
  "recentActivity": [
    {
      "time": "2024-01-15T11:30:00Z",
      "event": "✅ Deployed v2.1.0 to production"
    }
  ]
}
```

### Field Re