Built at Hack on OpenClaw w/ Codex

SlackClaw

OpenClaw Mission Control What We Built Mission Control is an OpenClaw plugin that gives you a real-time browser dashboard to monitor, control, and interact with your AI agent — all while your users talk to it via Slack. You get three things in one plugin: Slack Setup Wizard — A step-by-step UI to connect your OpenClaw bot to Slack (Bot Token + App Token). No config file editing required. Live Agent Feed — A real-time stream of every message sent and received, plus every tool call the agent makes — with a pulsing "working" indicator while the agent is active. Approval Rail — When the agent tries to run a risky action (bash commands, file writes, emails, browser control), it pauses and surfaces the request to you. You approve or block it with one click before it executes. The Problem Running an AI agent that your users talk to via Slack is powerful — but completely opaque. You have no visibility into what the agent is doing, and no way to intervene before it runs a destructive command. The only tools available are raw log files. How It Works Architecture User in Slack ↓ Slack Socket Mode → OpenClaw Gateway ↓ Plugin Hook: message_received Plugin Hook: before_tool_call ← gates risky actions Plugin Hook: after_tool_call ↓ In-memory Event Bus ↙ ↘ Ring Buffer HTTP Handler (500 events) /mission-control/ ↓ React Dashboard (polling every 1s) Key Technical Decisions Polling over SSE — The Fly.io/VSCode proxy environment buffers streaming HTTP responses, making Server-Sent Events unreliable. We built a server-side ring buffer (500 events) and a GET /api/poll?since=<seq> endpoint. The client polls every second — zero connection issues, works behind any proxy. Middleware HTTP handler — OpenClaw's api.registerHttpHandler injects a middleware into the gateway's HTTP server. A single function handles all routes: the poll endpoint, approvals REST API, Slack config API, static assets, and SPA fallback. Approval gate — before_tool_call hook returns { block: true, blockReason } to hard-block tool execution. A Promise-based queue holds each risky call until the dashboard resolves it — the agent literally pauses mid-thought waiting for your decision. Relative Vite base — Built with base: "./" so all asset URLs are relative. This makes the app work transparently behind any path prefix (VSCode proxy, nginx, etc.) without any server-side path rewriting. Tech Stack Layer Technology AI Agent Google Gemini 2.5 Flash Agent Gateway OpenClaw (self-hosted) Channel Slack (Socket Mode) Plugin Runtime TypeScript / Node.js Dashboard React + Tailwind CSS + Vite Deployment Fly.io cloud VM Features Zero-config Slack wizard — Paste two tokens, click Connect, done Live event feed — Messages, tool call start/end, approvals — all in real time Human-in-the-loop approvals — Agent pauses before: bash, exec, write, delete, email, browser, fetch REST API — GET /api/messages?role=assistant to fetch agent replies programmatically; integrates with any external tool Proxy-compatible — Works behind VSCode devtunnel, nginx, Cloudflare — any path prefix Plugin architecture — Installs as a single openclaw plugins install command; no gateway code changes Live Demo Dashboard: https://ide-cmhkvwgz5000-prod.fly.dev/proxy/18789/mission-control/ Agent messages API: GET /proxy/18789/mission-control/api/messages?role=assistant&limit=1 Talk to the agent: DM slackclaw in Slack → watch it appear live in the feed → approve any tool calls from the dashboard. What's Next Persistent message history (SQLite) Multi-agent support (switch between agents from the sidebar) Telegram / Discord channel setup wizards Webhook trigger for external approval flows (PagerDuty, etc.)