Clawbot Mission Control

AI Agent Orchestration Dashboard
Connect your Claw Bots. Deploy agents. Take control.

Live Demo • Features • Screenshots • Quick Start • Architecture • Shell System • Multi-Claw • Changelog

Live Demo Next.js 16 TypeScript Tailwind Zustand MIT License

Clawbot Mission Control is an open-source AI agent orchestration dashboard. It serves as the command center for your AI workforce -- a persistent workspace where you connect Claw Bot instances, deploy AI agents, manage tasks, content pipelines, schedules, and memories.

Key differentiators:

• Zero-State Architecture -- App starts empty and builds up as users connect real bots and deploy agents. No fake demo data.
• Setup Wizard -- Guided connection flow with preset templates (Local Dev, Production API, ESP32/Hardware, MQTT, Cloud Agent, Custom).
• Real Connection Manager -- WebSocket, REST, and MQTT protocols with connection testing, latency monitoring, and auth token support.
• Shell System -- Swap the entire visual theme with one click. Four built-in themes with support for custom community shells.
• Multi-Claw Architecture -- Multiple independent bot instances can connect to a single Mission Control, each with their own agents.
• Dark Glassmorphism UI -- Frosted glass panels, ambient lighting orbs, and neon accent glows. All icons are premium SVGs (Lucide React).
• Ten Mission Screens -- Dashboard, Task Board, Content Pipeline, Calendar, Memory Bank, Team Structure, Digital Office, Shell Themes, Claw Manager, Setup Wizard.
• Fully Persistent -- All state is persisted via Zustand with localStorage, surviving page refreshes and sessions.

control-center-xi.vercel.app

The live demo starts with the Setup Wizard. All data is stored locally in your browser. Connect a Claw Bot (or skip through the wizard) to explore the full dashboard.

Screenshots captured on mobile -- the UI is fully responsive across all screen sizes.

New users are automatically directed to the Setup Wizard on first launch. The wizard guides through:

1. Welcome -- Overview of what's needed (endpoint, auth token, protocol)
2. Protocol Selection -- 6 preset templates: Local Dev Server, Production API, ESP32/Hardware, MQTT Broker, Cloud Agent (OpenClaw), Custom Setup
3. Endpoint Configuration -- Host, port, path, TLS toggle, auth token
4. Connection Test -- Live connection test with real-time log output and latency measurement
5. Bot Configuration -- Name, description, color theme
6. Summary -- Review and complete setup

• Connect multiple independent Claw Bot instances via the Setup Wizard
• Each Claw has its own agents, color identity, and connection configuration
• Real connection management with connect/disconnect toggle
• Connection status monitoring (Connected, Connecting, Disconnected, Error)
• Latency tracking and message counters
• Agents are assigned to specific Claws
• All Claws share the same task, memory, and content pools

All icons throughout the application use Lucide React -- a premium open-source SVG icon library. No emojis are used anywhere in the UI. Icons include:

• Navigation: LayoutDashboard, KanbanSquare, Play, CalendarDays, Brain, Users, Building2, Palette, Bot, Link
• Actions: Bell, Search, Menu, X, ChevronLeft, ChevronRight, Plus, Settings
• Roles: Code2, PenTool, Palette, Microscope, Rocket, TrendingUp
• Pipeline: Lightbulb, Search, FileText, File, Image, Scissors, CalendarCheck, Rocket
• Memory: Settings, ClipboardList, Brain, FolderOpen, Scale, MessageSquare, Database
• Wizard: Monitor, Globe, Plug, Radio, Cloud, Settings, Key, Wifi, CheckCircle2, XCircle

• Node.js >= 20.9.0
• npm, yarn, or pnpm

# Clone the repository
git clone https://github.com/BEKO2210/Control-Center.git
cd Control-Center
# Install dependencies
npm install
# Start the development server
npm run dev

Open http://localhost:3000 in your browser. You will be greeted by the Setup Wizard.

Control-Center/
├── public/ # Static assets
│ └── favicon.svg
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── layout.tsx # Root layout with shell injection
│ │ ├── page.tsx # Main page with wizard gate logic
│ │ └── globals.css # Global styles + glass components
│ ├── components/
│ │ ├── layout/
│ │ │ ├── Sidebar.tsx # Navigation sidebar with Lucide icons
│ │ │ └── Header.tsx # Top bar with search & notifications
│ │ └── screens/
│ │ ├── Dashboard.tsx # Overview dashboard (with empty state)
│ │ ├── TaskBoard.tsx # Kanban task management
│ │ ├── ContentPipeline.tsx # Content lifecycle management
│ │ ├── Calendar.tsx # Calendar & event scheduling
│ │ ├── MemoryScreen.tsx # AI memory bank (with empty state)
│ │ ├── TeamStructure.tsx # Agent team organization (with empty state)
│ │ ├── DigitalOffice.tsx # Visual agent workspace (with empty state)
│ │ ├── ShellSelector.tsx # Theme/shell switcher
│ │ ├── ClawManager.tsx # Multi-claw management (with empty state)
│ │ └── SetupWizard.tsx # 6-step connection wizard
│ ├── lib/
│ │ ├── types/index.ts # All TypeScript type definitions
│ │ ├── store/index.ts # Zustand global state store
│ │ ├── services/
│ │ │ └── connectionService.ts # WebSocket/REST/MQTT connection manager
│ │ └── utils/index.ts # Utility functions
│ ├── shells/
│ │ └── registry.ts # Shell definitions & CSS variable system
│ └── agents/
│ └── defaults.ts # Default agent config (empty by default)
├── data/ # Data storage directory
├── docs/ # Documentation assets
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── postcss.config.js
├── next.config.js
└── README.md

First Launch
 |
 Setup Wizard (gated)
 |
 Connect Claw Bot (WebSocket/REST/MQTT)
 |
 Create Agents & Configure
 |
 Full Dashboard Access
 |
 React Components (screens/)
 |
 Zustand Store (lib/store/)
 |
 localStorage (persist middleware)
 |
 Shell System (shells/registry.ts)
 |
 CSS Custom Properties
 |
 Tailwind + Global Styles

The command center overview. Shows:

• Empty State -- When no claws are connected, displays a welcome card with a "Connect Your First Claw" button
• Stats Grid -- Total tasks, completed tasks, active agents, memories, content items, scheduled events (all Lucide SVG icons)
• Recent Tasks -- Last 5 updated tasks with status and assignee
• Active Agents -- Currently working agents with activity indicators
• Connected Claws -- All connected Claw instances with status

A full-featured Kanban board with 5 columns:

Features: Drag-and-drop, priority badges (Critical/High/Medium/Low), quick-move buttons, tags, assignee tracking, timestamps.

An 8-stage content lifecycle manager:

Ideas -> Research -> Outline -> Script -> Assets -> Editing -> Scheduled -> Published

Each stage has a Lucide SVG icon (Lightbulb, Search, FileText, File, Image, Scissors, CalendarCheck, Rocket).

Monthly calendar with event types: Task, Recurring, Cron, Deadline, Publish. Color-coded events, upcoming events sidebar, today highlighting, month navigation with Lucide chevron icons.

Searchable memory storage with 6 categories (each with a Lucide SVG icon): Preferences (Settings), Context (ClipboardList), Learned (Brain), Project (FolderOpen), Decisions (Scale), Conversations (MessageSquare).

Agent organization by role division. Each role has a dedicated Lucide icon:

• Developer -- Code2
• Writer -- PenTool
• Designer -- Palette
• Researcher -- Microscope
• Operator -- Rocket
• Growth -- TrendingUp

Includes agent creation form with Claw assignment, performance stats, and activity toggle. Empty state shown when no agents are deployed.

Visual workspace with agent workstations. Activity states: Idle (gray), Thinking (yellow), Building (blue), Reviewing (purple), Blocked (red). Ambient glow effects, activity legend, quick activity switcher. Empty state with create agents / connect claw actions.

6-step guided connection flow:

1. Welcome -- Requirements checklist and protocol overview
2. Protocol -- 6 preset templates with Lucide icons (Monitor, Globe, Plug, Radio, Cloud, Settings)
3. Endpoint -- Host, port, path, TLS toggle, auth token, URL preview
4. Test -- Connection testing with real-time log output
5. Configure -- Bot name, description, color theme, live preview
6. Summary -- Configuration review with next steps

One-click theme switcher with gradient previews. Four built-in shells (Deep Space, Cyber Neon, Ocean Depths, Ember Forge). Custom shells can be added via src/shells/registry.ts.

Full bot instance management: connect via wizard, quick add, connect/disconnect toggle, connection status monitoring, latency display, agent roster per claw, remove claws. Empty state with wizard/quick add options.

Shells are theme definitions that control the entire visual identity. Switching a shell updates CSS custom properties on the root element, causing a cascading visual transformation.

Shell Definition (registry.ts)
 |
getShellCSSVariables() -> Record<string, string>
 |
document.documentElement.style.setProperty()
 |
CSS Variables (--claw-*, --glass-*, --surface-*, --accent-*)
 |
Tailwind config references variables
 |
Entire UI transforms

1. Open src/shells/registry.ts
2. Add a new entry to the shells object:

'my-custom-shell': {
 id: 'my-custom-shell',
 name: 'My Custom Shell',
 description: 'A custom theme for my workflow.',
 author: 'Your Name',
 version: '1.0.0',
 preview: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
 colors: {
 claw: {
 50: '#...', // Lightest
 // ... 100-900
 950: '#...', // Darkest
 },
 glass: {
 light: 'rgba(R, G, B, 0.03)',
 medium: 'rgba(R, G, B, 0.06)',
 heavy: 'rgba(R, G, B, 0.1)',
 border: 'rgba(R, G, B, 0.08)',
 },
 surface: {
 primary: '#...',
 secondary: '#...',
 elevated: '#...',
 },
 accent: {
 primary: '#...',
 secondary: '#...',
 glow: 'rgba(R, G, B, 0.4)',
 },
 gradient: 'linear-gradient(135deg, ...)',
 background: '#...',
 },
},

3. Your shell will automatically appear in the Shell Selector screen.

Multiple independent Claw Bot instances can connect to a single Mission Control, each bringing their own agents and capabilities.

 +------------------+
 | Mission Control |
 | (Dashboard) |
 +--------+---------+
 |
 +----------------+----------------+
 | | |
 +------+------+ +-----+------+ +------+------+
 | Claw Alpha | | Claw Beta | | Claw Gamma |
 | WebSocket | | REST API | | MQTT |
 | 3 agents | | 5 agents | | 2 agents |
 +-------------+ +------------+ +-------------+

1. Launch the app -- the Setup Wizard opens automatically on first use
2. Choose a preset template (Local Dev, Production, ESP32, MQTT, Cloud, Custom)
3. Configure the endpoint (host, port, path, TLS, auth token)
4. Test the connection with real-time logs and latency measurement
5. Name your bot and choose a color theme
6. Complete setup -- redirected to Claw Manager

Additional claws can be connected anytime via the Setup Wizard (accessible from the sidebar).

All state is managed through a single Zustand store with localStorage persistence:

import { useMissionControl } from '@/lib/store';
// Read state
const tasks = useMissionControl((s) => s.tasks);
const agents = useMissionControl((s) => s.agents);
const claws = useMissionControl((s) => s.claws);
// Write state
const addTask = useMissionControl((s) => s.addTask);
const addClaw = useMissionControl((s) => s.addClaw);
const resetToEmpty = useMissionControl((s) => s.resetToEmpty);

• addTask(task) -- Create a new task
• updateTask(id, updates) -- Update task fields
• moveTask(id, status) -- Move task to a different column
• deleteTask(id) -- Remove a task

• addContentItem(item) -- Add content to pipeline
• updateContentItem(id, updates) -- Update content fields
• moveContentItem(id, stage) -- Move content to a different stage
• deleteContentItem(id) -- Remove content

• addEvent(event) -- Schedule a new event
• updateEvent(id, updates) -- Update event details
• deleteEvent(id) -- Remove an event

• addMemory(memory) -- Store a new memory
• updateMemory(id, updates) -- Update memory content
• deleteMemory(id) -- Delete a memory

• addAgent(agent) -- Deploy a new agent
• updateAgent(id, updates) -- Update agent fields
• setAgentActivity(id, activity) -- Change agent activity state
• deleteAgent(id) -- Remove an agent

• addClaw(claw) -- Connect a new Claw
• updateClaw(id, updates) -- Update Claw details
• removeClaw(id) -- Disconnect and remove a Claw

• addConnection(connection) -- Add a connection configuration
• updateConnection(id, updates) -- Update connection state
• removeConnection(id) -- Remove a connection

• setActiveShell(id) -- Switch to a different shell theme

• setWizardCompleted(completed) -- Mark wizard as completed

• resetToEmpty() -- Reset entire store to empty state (clears all data, reopens wizard)
• addNotification(notification) -- Push a notification
• markNotificationRead(id) -- Mark as read
• clearNotifications() -- Clear all notifications

The app starts completely empty. No mock data, no fake agents, no simulated activity. Everything is real -- users build their workspace from scratch by connecting actual Claw Bot instances.

Every panel uses frosted glass effects with semi-transparent backgrounds, subtle borders, and backdrop blur. This creates depth without heaviness.

All icons use Lucide React -- a consistent, high-quality SVG icon library. No emojis anywhere in the UI for a professional, clean appearance.

Floating gradient orbs in the background create atmosphere. Active elements emit soft glows in the accent color.

Every color in the UI flows from shell CSS variables. Switching shells transforms everything -- backgrounds, borders, accents, glows, and text colors.

Complex actions are hidden behind hover states. Cards reveal move buttons, delete actions, and activity toggles only when you interact with them.

Every screen handles the empty case gracefully, guiding users toward the right action (connect a claw, create agents, add tasks).

• Backend API -- REST/WebSocket API for real-time multi-user sync
• Database -- SQLite/PostgreSQL persistence instead of localStorage
• Authentication -- User auth with GitHub OAuth
• Real Agent Integration -- Connect to OpenAI, Anthropic, and other AI APIs
• Webhook System -- Agent completion notifications
• Custom Shell Marketplace -- Community shell sharing
• Keyboard Shortcuts -- Power user navigation
• Plugin System -- Extensible screen/widget architecture
• Export/Import -- Backup and restore Mission Control state

All changes to Clawbot Mission Control, listed in reverse chronological order.

Testing: first unit-test harness (Vitest), 38 tests

Major: Next.js 14 → 16, React 19, zero npm vulnerabilities

Security: AI key moves server-side + dependency audit

Architecture: the data actually flows now

This release closes eight fundamental architecture defects. The headline: the app was a beautiful shell that received data over the wire and threw it away. There was no path from the ConnectionManager into the Zustand store, so React never re-rendered and agents never changed state on their own. That path now exists.

Bug Fixes & Code Quality

Reset to Empty State & Wizard-First Setup

Real Claw Bot Connection Wizard

Mobile Responsive, Bug Fixes & Documentation

Initial Release

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m "Add amazing feature"
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

• Use TypeScript strict mode -- no any types
• Follow the existing component patterns
• Use Lucide React icons -- no emojis in the UI
• Add new shells to src/shells/registry.ts
• Test all screen components before submitting
• Ensure empty states are handled for new screens

This project is licensed under the MIT License -- see the LICENSE file for details.

Built by BEKO2210