OpenClaw Mission Control Dashboard — Build Prompt

Give this prompt to your OpenClaw agent and it will build a full Mission Control dashboard for you.

Prerequisites

Build a Mission Control dashboard for my OpenClaw agent using Next.js (App Router), Tailwind CSS, and TypeScript.

Setup:

Create the project at ~/projects/mission-control/
Store the gateway URL and token in .env.local (never expose to the browser)
All gateway calls go server-side through API routes using the /tools/invoke endpoint

Architecture:

Create src/lib/openclaw.ts — a server-side client that POSTs to {GATEWAY_URL}/tools/invoke with { tool, args } and Bearer token auth
The gateway wraps responses in an envelope: { ok, result: { content: [{ type: "text", text: "<JSON>" }], details } } — write an unwrap helper to extract the actual data
Gateway timestamps are epoch milliseconds, not seconds

Pages:

/feed (default) — Activity feed
- Fetch session list + full history for each session via sessions_list and sessions_history tools
- Parse messages: content is an array of { type: "text"|"toolCall", text?, name?, arguments? } parts, not plain strings
- Display as a reverse-chronological timeline with colored dots (blue=tool, green=user, purple=assistant)
- Filter buttons: All, Tools, Assistant, User
- Auto-refresh every 30 seconds
/calendar — Cron calendar
- Fetch jobs via cron tool with action: "list"
- Schedule is an object { kind: "cron", expr: "0 5 * * *", tz: "..." }, not a plain string — extract the expr for parsing
- Weekly grid view with prev/next navigation, today highlighted
- Click jobs to expand and show run history via cron tool with action: "runs"
/search — Global search
- Debounced input that searches in parallel: memory_search, workspace grep via exec, sessions_list, and cron list
- Group results into Memories, Files, Conversations, Tasks sections
- Highlight matching terms

Agent Banner (top of every page):

Show agent name, version (parsed from session_status tool output), and whether it's up to date (check npm registry for latest openclaw version)
Stats row: model, context usage, active sessions, runtime mode
Connected Resources section: badges for each API key/service available
Capabilities section: badges for each tool category (Web Browse, Shell Exec, File System, etc.)
Sub-Agents section: list all sessions with keys matching :subagent: or :cron:, show label, model, token count, running status (pulsing green dot if updated <2min ago), and task description
Quick info: human name, GitHub username, workspace path, secrets manager
Collapsible — click header to toggle

Nav:

Sticky top bar with 🦀 logo, page links, and gateway status indicator (green/red dot, polls /health every 30s)

Theme:

If the feed shows 0 entries, the gateway response envelope isn't being unwrapped properly. Check that your unwrap helper parses result.content[0].text as JSON.
If timestamps look wrong (dates in the year 55000+), you're treating milliseconds as seconds. Don't multiply by 1000 if the value is already > 1e12.
Cron schedule comes back as an object, not a string. Extract schedule.expr before parsing.
The content field on messages can be a string OR an array of typed parts — handle both.

Built with OpenClaw 🦀