Build Your Own Mission Control Dashboard with Claude Code

The Problem

Your agent is running 24/7. Messages come in on Telegram and Discord. Files get processed. Tasks get completed. But you have no visibility. Did the research query from last night finish? Did the file automation hit an error? You're scrolling through chat histories and log files like a detective.

What You're Building

A local mission control dashboard — one screen that shows everything your agent is doing, everything it did, and lets you send commands directly from the browser.

Milestone 1: Scaffold the Dashboard

Let's build the shell of your mission control.

Create a new Next.js project called "openclaw-dashboard" in my ~/Dev folder. Set it up with TypeScript, Tailwind CSS, and the App Router. Create a single-page layout with a header that says "Mission Control" and three placeholder sections: Status, Task History, and Command Bar. Keep it minimal — we'll fill in the real data next.

What Claude Code does: It scaffolds a complete Next.js project with a clean layout in one prompt. Next.js App Router gives you server-side rendering and API routes in one framework — perfect for a dashboard that needs to fetch data from your local OpenClaw instance.

Try it: Run npm run dev in the project folder and open http://localhost:3000. You should see a clean dashboard skeleton with three empty sections.

Milestone 2: Connect to OpenClaw's Status API

The dashboard looks nice but shows nothing. Let's wire it to your actual agent.

Add a server-side API route to my dashboard that connects to the OpenClaw gateway at localhost:18789. Fetch the current gateway status — connected channels, active agents, uptime, and model configuration. Display this data in the Status section of the dashboard. Include connection state indicators (green dot for connected, red for disconnected). If I set up an auth token in my OpenClaw config, include it in the API requests.

What Claude Code does: It creates an API route that queries OpenClaw's local gateway and renders the response. OpenClaw's gateway exposes a status API on the same port — your dashboard reads from it like any REST endpoint. Because it's server-side, credentials stay on the server.

Try it: Refresh your dashboard. The Status section should show your gateway's uptime, connected channels, and active models. Green dots mean everything's running.

Milestone 3: Build the Task History View

Status tells you what's happening now. History tells you what happened while you were sleeping.

Add a Task History section to my dashboard. Query the OpenClaw session logs and display the last 50 interactions — showing timestamp, channel source (Telegram/Discord), the user message, and a preview of the agent's response. Add filters for channel and date range. Make it look like a clean activity feed, newest first.

What Claude Code does: It reads from OpenClaw's session log files (sessions/YYYY-MM-DD-<slug>.md) and renders them as a feed. Session transcripts are markdown files — every conversation your agent has is logged with timestamps, channel info, and full message content.

Try it: Your Task History should show recent conversations. Filter by "Telegram" — only Telegram messages. Filter by today — just today's activity.

Milestone 4: Add a Live Status Indicator

You need to know at a glance: is the agent idle or working?

Add a real-time status indicator to the dashboard header. It should poll the OpenClaw gateway every 5 seconds and show: "Idle" (gray) when no requests are being processed, "Working..." (blue pulse) when the agent is handling a message, and "Error" (red) if the gateway is unreachable. Add a small badge showing the number of messages processed today.

What Claude Code does: It adds a polling mechanism that checks the gateway's current state. The gateway reports whether it's currently processing a request — your dashboard turns this into a visual indicator. The daily message count gives you a usage snapshot.

Try it: Send a long message to your bot on Telegram. Watch the indicator switch from "Idle" to "Working..." and back.

Milestone 5: Add a Quick Command Bar

Sometimes you want to talk to your agent without opening Telegram or Discord.

Add a command bar at the bottom of the dashboard. It should have a text input where I can type a message, a send button, and a response area below. When I type a message and hit Enter, it sends the message to my OpenClaw agent via the gateway API, and displays the response below the input. Make it feel like a mini chat — show both my message and the agent's response.

What Claude Code does: It creates a lightweight chat interface that communicates directly with the OpenClaw gateway. The gateway accepts messages via its API — the dashboard sends your text and displays the response inline. Fast agent interaction without switching apps.

Try it: Type a question in the command bar and press Enter. Your agent's response should appear within seconds.

Milestone 6: Make It Beautiful (Dark Mode)

The dashboard works. Let's make it look like a real mission control.

Restyle my dashboard with a dark mode theme. Use a dark background (#0a0a0a), muted borders, green accent for active states, blue for processing, red for errors. Make the font monospace for the command bar. Add subtle animations for the status indicator pulse. Make it responsive so it works on mobile too. Think NASA ground control meets developer tools.

What Claude Code does: It applies a cohesive dark theme across all components. Tailwind's dark mode utilities make this a config change, not a rewrite — the layout stays the same, only colors and typography change.

Try it: Refresh the dashboard. It should look clean, professional, and distinctly yours.

What You Built

Remember checking agent activity by scrolling through Telegram messages? You now have a proper mission control:

• Live status showing all connected channels and models
• Task history with filterable activity feed
• Real-time processing indicator
• Command bar for direct agent interaction
• Dark mode that looks like it belongs in a space program

Bookmark localhost:3000 — it's your new home base.

Take It Further

• Add cost tracking — display daily/weekly API spend from the gateway stats
• Add notifications — browser push when the agent encounters an error
• Deploy on your network — run it on a Mac Mini so any device on your WiFi can access it