Z I M Z

Multi-Agent Dashboard for OpenClaw
Alternative UI with focus on clarity, real-time monitoring, and full Gateway RPC integration.

---

What is ZIMZ?

ZIMZ is a self-hosted dashboard for managing and monitoring OpenClaw agents. It connects directly to the OpenClaw Gateway via WebSocket RPC — no CLI wrapping, no polling, just a persistent real-time connection.

Built for operators who run OpenClaw on a VPS or homelab and want a clean overview of their agents without SSHing into a terminal.

Screenshots

 

_{Left: Agent Grid with detail bubble  ·  Right: Live Map animation with status transitions  ·  Bottom: Mobile via iOS home button}

Features

Agent Management — Add, inspect, configure, and delete agents directly from the dashboard. Each action maps to a Gateway RPC call (agents.add, agents.list, agents.update, agents.delete).

Live Status — Persistent WebSocket connection to the Gateway streams events (agent, heartbeat, chat, presence) via Server-Sent Events to the browser. Agent cards update in real-time without refresh.

Three Views — Switch between Agent Grid (card layout with detail bubbles), Office Map (agents grouped by status zones with dissolve transitions), and Task Scheduler (cron jobs with create/edit/run/delete).

Agent Bubble — Click any agent card to open a detail overlay with two tabs: Info (current task, live log stream) and Settings (SOUL.md and MEMORY.md editor with live save via Gateway RPC, danger zone for deletion).

Workspace File Editing — Read and write agent workspace files (SOUL.md, MEMORY.md) directly from the dashboard. Changes are persisted through the Gateway via agents.files.get / agents.files.set RPC calls.

Model Assignment — Assign or change the AI model for each agent via the dashboard. Models are fetched from the Gateway's configured provider list.

Task Scheduler — Create and manage cron jobs assigned to specific agents. Supports cron expressions, interval schedules, one-shot timers, delivery/announce options (Telegram, Discord, Slack, WhatsApp, and more), and configurable delivery targets.

Gateway Health — Header shows live connection status (connected/disconnected) and agent count. Status endpoint exposes health and system-presence data.

PWA / Mobile Ready — Installable as Progressive Web App on iOS and Android. Standalone display mode, custom app icon, responsive layout optimized for all screen sizes.

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, SSR)
Frontend	React 19, TypeScript 5
Styling	Tailwind CSS v4 (dark mode, terminal aesthetic)
Animation	Framer Motion
Icons	Lucide React
Gateway	WebSocket RPC via ws (server-side)
Live Events	SSE (Server-Sent Events → browser)

Quickstart

git clone https://github.com/burnshall-ui/ZimZ
cd ZimZ
npm install
npm run dev

Open http://localhost:3000. The dashboard connects to ws://127.0.0.1:18789 by default.

Environment

Create .env.local (local dev) or .env (VPS):

OPENCLAW_GATEWAY_URL=ws://127.0.0.1:18789

# If your Gateway requires auth:
OPENCLAW_GATEWAY_TOKEN=
OPENCLAW_GATEWAY_PASSWORD=

Gateway RPC Integration

All communication with OpenClaw runs through the Gateway WebSocket — no CLI exec, no file reads, no shell commands. The server-side RPC client handles the full protocol handshake (connect.challenge → connect → RPC call → response).

API Routes → RPC Methods

Route	Method	Gateway RPC
GET /api/agents	List agents + workspace files	agents.list + agents.files.get
POST /api/agents	Add agent	agents.add
GET /api/agents/:id	Get agent + workspace files	agents.list + agents.files.get
PATCH /api/agents/:id	Update agent / save files	agents.update + agents.files.set
DELETE /api/agents/:id	Delete agent	agents.delete
GET /api/models	Available models	models.list
GET /api/status	Health + presence	health / system-presence
GET /api/events	SSE event stream	persistent WS subscription
GET /api/cron/jobs	List cron jobs	cron.list
POST /api/cron/jobs	Create cron job	cron.add
PATCH /api/cron/jobs/:id	Update cron job	cron.update
DELETE /api/cron/jobs/:id	Delete cron job	cron.remove
POST /api/cron/jobs/:id/run	Run cron job now	cron.run

The browser never talks to the Gateway directly — all RPC flows through Next.js server-side API routes.

Deploy on Linux VPS

npm ci
npm run build
npm run start

Recommended setup:

  Browser ──HTTPS──▸ Nginx/Caddy ──HTTP──▸ next start (:3000)
                                                │
                                          WebSocket RPC
                                                │
                                     OpenClaw Gateway (:18789)

Run next start behind systemd or pm2, reverse-proxy via Nginx or Caddy inside your Tailnet, keep the Gateway on 127.0.0.1:18789. Step-by-step instructions in DEPLOY.md.

Project Structure

app/
  layout.tsx              # Root layout (dark theme, Orbitron font, PWA metadata)
  page.tsx                # SSR entry — Gateway RPC for agent list + workspace files
  globals.css             # Tailwind + cyberpunk CSS
  api/
    agents/route.ts       # agents.list / agents.add + files enrichment
    agents/[id]/route.ts  # GET / PATCH / DELETE + agents.files.get/set
    models/route.ts       # models.list (Gateway RPC)
    status/route.ts       # health + system-presence (Gateway RPC)
    events/route.ts       # SSE stream — persistent Gateway WS events
    cron/jobs/…           # cron.list / cron.add / cron.update / cron.remove / cron.run

public/
  manifest.json           # PWA manifest (standalone, custom icons)
  apple-touch-icon.png    # iOS home screen icon
  icon-512.png            # Android / PWA icon
  favicon.svg             # Browser tab icon

src/
  lib/
    openclawGateway.ts    # WS RPC client + GatewayEventManager singleton
  hooks/
    useGatewayEvents.ts   # React hook — SSE consumer, live agent status
  components/
    DashboardView.tsx     # Main layout with header, views, live events
    AgentGrid.tsx         # Card grid layout
    AgentCard.tsx         # Individual agent card
    AgentBubble.tsx       # Detail popup (Info + Settings tabs, file save)
    OfficeMap.tsx         # Status zone map with dissolve transitions
    AddAgentModal.tsx     # Agent registration modal
    TasksView.tsx         # Cron job scheduler with delivery options
    ConfirmDialog.tsx     # Reusable confirmation dialog
  types/
    agent.ts              # Agent types (OpenClaw-compatible, incl. soulMd/memoryMd)
    cron.ts               # Cron types (schedules, payloads, delivery channels)
  data/
    mockData.ts           # Fallback agents (when Gateway is offline)

OpenClaw Docs

• Gateway Protocol — WebSocket framing, handshake, auth
• Multi-Agent Routing — Agent isolation, bindings, workspaces
• Gateway Architecture — How the Gateway daemon works
• Configuration Reference — openclaw.json schema

License

MIT