A Vibecraft-inspired 3D dashboard for OpenClaw AI agent workspaces
Divan is the command centre for your OpenClaw AI agent workspace — named after the Ottoman imperial council where viziers reported to the sultan. Your agents report here.
| Dashboard | Memory Browser |
|---|---|
 |
 |
| Cron Manager | Team View |
|---|---|
 |
 |
- 🏛️ 3D Divan Scene — Live animated 3D/2.5D isometric view of your agents in their "rooms", powered by Three.js + React Three Fiber
- 🧠 Memory Browser — Full-text search and date-filtered view of
MEMORY.mdand dailymemory/*.mdfiles with collapsible section cards - 🎯 Goal Tree — Visualize
goals.yamlas a pressured goal tree with colour-coded priority/delta values - ⏱️ Cron Management — Read and monitor OpenClaw cron jobs; view run history and status at a glance
- 👥 Team View — Auto-discovered agent profiles (from
~/.openclaw/agents/), session status, last activity, and sub-agent spawn history - 🌍 i18n Ready — Locale-aware time formatting; designed for multilingual workspaces
- ⚡ Activity Feed — Real-time git log + memory file change stream for instant workspace situational awareness
- 📂 File Browser — In-dashboard workspace file browser with read/edit support and automatic backups
- Node.js 20+ (tested on Node 24)
- OpenClaw workspace (the
clawd/directory) - A running OpenClaw Gateway (
openclaw gateway start)
# 1. Clone the repo
git clone https://github.com/talhaorak/divan.git
cd divan
# 2. Install dependencies
npm install
# 3. Configure environment
cp .env.example .env.local
# Edit .env.local with your workspace path and gateway token
# 4. Start the development server
npm run devOpen http://localhost:3000 — your Divan awaits.
Copy .env.example to .env.local and fill in your values:
# Path to your OpenClaw workspace (the clawd/ directory)
OPENCLAW_WORKSPACE=/path/to/your/clawd
# OpenClaw Gateway WebSocket URL
OPENCLAW_GATEWAY_URL=ws://127.0.0.1:18009
# OpenClaw Gateway HTTP URL (for health checks)
OPENCLAW_GATEWAY_HTTP=http://127.0.0.1:18009
# Your gateway auth token (from ~/.openclaw/config or openclaw token)
OPENCLAW_GATEWAY_TOKEN=your-gateway-token-hereSecurity: Never commit
.env.local. It is git-ignored by default.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, TypeScript) |
| 3D Rendering | Three.js + @react-three/fiber + @react-three/drei |
| Animation | Framer Motion 12 |
| Styling | Tailwind CSS 4 |
| Data | OpenClaw workspace files (YAML, Markdown) + Gateway WebSocket |
| Runtime | Node.js 20+ |
Design philosophy: Vibecraft-inspired spatial UI — dark theme with Ottoman-accented colours (deep crimson, gold, navy). Every agent has a "room". Information-dense but never boring.
| File | Purpose |
|---|---|
| SPEC.md | Original design specification |
| CONTRIBUTING.md | Contributor guide (branch naming, commit style, PR workflow) |
| CLAUDE.md | Instructions for AI coding agents (Claude Code, Cursor, Copilot) |
| llms.txt | Machine-readable project description for LLM agents |
Contributions are welcome! Please read CONTRIBUTING.md first.
# Fork & clone, then:
git checkout -b feat/your-feature
npm run dev
# make changes, then:
npm run lint
git commit -m "feat: describe your change"
git push origin feat/your-feature
# open a Pull RequestMIT © 2026 Talha Orak — see LICENSE for details.
