pixel-office-openclaw 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tridents Lab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,146 @@
+# 🏢 Pixel Office — by Tridents Lab 🔱
+
+Watch your [OpenClaw](https://openclaw.ai) AI agents work in a pixel-art virtual office.
+
+Each agent gets an animated character that walks around, sits at desks, and shows real-time status as they execute tasks. Click any agent to chat with them directly.
+
+<!-- ![Pixel Office Demo](demo.gif) -->
+
+## Quick Start
+
+```bash
+npx pixel-office-openclaw
+```
+
+That's it. Pixel Office auto-detects your local OpenClaw instance and starts a web server at `http://localhost:3002`.
+
+> **No OpenClaw?** Try `npx pixel-office-openclaw --mock` to see it with simulated agents.
+
+## Features
+
+- 🎮 **Pixel-art office** with animated characters and furniture
+- 🔄 **Real-time status** — agents glow green when working, go idle when done
+- 💬 **Chat** — click any agent to send them a message
+- 🏗️ **Layout editor** — customize the office with desks, plants, bookshelves
+- 🎨 **Role-based sprites** — coders, researchers, planners get distinct looks
+- ✨ **Matrix animations** — spawn/despawn effects when agents come and go
+- 📊 **Activity log** — see what your agents are doing in real-time
+- 🖱️ **Interactive** — click agents to freeze them, hover for status tooltips
+
+## Installation
+
+### Global install (recommended)
+
+```bash
+npm install -g pixel-office-openclaw
+pixel-office-openclaw
+```
+
+### npx (no install)
+
+```bash
+npx pixel-office-openclaw
+```
+
+### From source
+
+```bash
+git clone https://github.com/neomatrix25/pixel-office.git
+cd pixel-office
+npm install
+npm run build
+npm start
+```
+
+## Configuration
+
+Pixel Office auto-detects your OpenClaw setup. Override with CLI flags:
+
+```
+pixel-office-openclaw [options]
+
+Options:
+  -p, --port <number>       Port (default: 3002)
+  --host <address>          Bind address (default: 127.0.0.1)
+  --openclaw-home <path>    OpenClaw home dir (default: ~/.openclaw)
+  --gateway-url <url>       Gateway URL (auto-detected)
+  --gateway-token <token>   Gateway token (auto-detected)
+  --no-chat                 Disable chat endpoint
+  --mock                    Demo mode with simulated agents
+  --open                    Open browser automatically
+```
+
+### Examples
+
+```bash
+# Default — auto-detect everything
+pixel-office-openclaw
+
+# Custom port
+pixel-office-openclaw --port 8080
+
+# Expose to your network (default is localhost only)
+pixel-office-openclaw --host 0.0.0.0
+
+# Demo mode — no OpenClaw needed
+pixel-office-openclaw --mock
+
+# Remote OpenClaw instance
+pixel-office --gateway-url http://myserver:18789 --gateway-token mytoken
+```
+
+### Remote Access
+
+By default, Pixel Office only listens on `127.0.0.1` (localhost). To access from other machines:
+
+```bash
+pixel-office-openclaw --host 0.0.0.0
+```
+
+⚠️ **Security**: When exposed to a network, the server can read your agent sessions and send messages. Only expose on trusted networks.
+
+## How It Works
+
+Pixel Office runs a lightweight Express server that:
+
+1. **Reads agent session stores** from `~/.openclaw/agents/*/sessions/sessions.json`
+2. **Deduplicates sessions** — one character per agent, using the most recently active session
+3. **Serves a React app** that renders a pixel-art office on HTML Canvas
+4. **Polls every 3 seconds** for status updates
+5. **Proxies chat messages** to agents via the OpenClaw gateway API
+
+No data leaves your machine. The gateway token stays server-side and is never sent to the browser.
+
+## Layout Editor
+
+Click the **Edit** button (bottom toolbar) to customize your office:
+
+- 🎨 Paint floor tiles and walls
+- 🪑 Place furniture (desks, chairs, plants, bookshelves)
+- ↩️ Undo/redo (Ctrl+Z / Ctrl+Y)
+- 🔄 Rotate items (R key)
+- 💾 Save your layout
+
+## Requirements
+
+- **Node.js 18+**
+- **OpenClaw** running locally (or use `--mock` for demo)
+
+## Tech Stack
+
+- React 19 + TypeScript
+- Canvas 2D rendering (no WebGL)
+- Vite for builds
+- Express 5 for the bridge server
+- A* pathfinding for character navigation
+
+## License
+
+MIT — see [LICENSE](LICENSE)
+
+## Credits
+
+Built by [Tridents Lab](https://github.com/neomatrix25) 🔱
+
+Character sprites based on [pixel-agents](https://github.com/pablodelucca/pixel-agents) (MIT).
+Office furniture sprites by [2dPig](https://2dpig.itch.io) (CC0 Public Domain).

package/cli.js

@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+/**
+ * Pixel Office CLI — visualize OpenClaw agents in a pixel-art office.
+ *
+ * Usage:
+ *   pixel-office [options]
+ *
+ * Options:
+ *   -p, --port <number>       Port to listen on (default: 3002)
+ *   -h, --host <address>      Bind address (default: 127.0.0.1)
+ *   --openclaw-home <path>    OpenClaw home directory (default: ~/.openclaw)
+ *   --gateway-url <url>       Gateway URL (auto-detected from config)
+ *   --gateway-token <token>   Gateway token (auto-detected from config)
+ *   --no-chat                 Disable chat send endpoint
+ *   --mock                    Start with mock mode (no OpenClaw needed)
+ *   --open                    Open browser after starting
+ *   -v, --version             Show version
+ *   --help                    Show this help
+ */
+
+import { readFileSync, existsSync } from 'fs'
+import { join } from 'path'
+import { homedir } from 'os'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+import { execSync } from 'child_process'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+// ── Argument Parsing ────────────────────────────────────────────
+
+const args = process.argv.slice(2)
+
+function getArg(flags, defaultValue = undefined) {
+  for (let i = 0; i < args.length; i++) {
+    if (flags.includes(args[i]) && i + 1 < args.length) {
+      return args[i + 1]
+    }
+  }
+  return defaultValue
+}
+
+function hasFlag(flags) {
+  return args.some(a => flags.includes(a))
+}
+
+if (hasFlag(['--help'])) {
+  console.log(`
+  Pixel Office — Watch your OpenClaw agents work in a pixel-art office 🦞
+
+  Usage: pixel-office [options]
+
+  Options:
+    -p, --port <number>       Port to listen on (default: 3002)
+    --host <address>          Bind address (default: 127.0.0.1)
+    --openclaw-home <path>    OpenClaw home dir (default: ~/.openclaw)
+    --gateway-url <url>       Gateway URL (auto-detected)
+    --gateway-token <token>   Gateway token (auto-detected)
+    --no-chat                 Disable chat/send endpoint
+    --mock                    Mock mode (no OpenClaw needed)
+    --no-open                 Don't open browser after starting
+    -v, --version             Show version
+    --help                    Show this help
+
+  Examples:
+    pixel-office                        # Auto-detect local OpenClaw
+    pixel-office --port 8080            # Custom port
+    pixel-office --host 0.0.0.0         # Expose to network
+    pixel-office --mock                 # Demo without OpenClaw
+  `)
+  process.exit(0)
+}
+
+if (hasFlag(['-v', '--version'])) {
+  try {
+    const pkg = JSON.parse(readFileSync(join(__dirname, 'package.json'), 'utf-8'))
+    console.log(`pixel-office v${pkg.version}`)
+  } catch {
+    console.log('pixel-office (unknown version)')
+  }
+  process.exit(0)
+}
+
+// ── Configuration ───────────────────────────────────────────────
+
+const PORT = parseInt(getArg(['-p', '--port'], '3002'), 10)
+const HOST = getArg(['--host'], '127.0.0.1')
+const OPENCLAW_HOME = getArg(['--openclaw-home'], join(homedir(), '.openclaw'))
+const CHAT_DISABLED = hasFlag(['--no-chat'])
+const MOCK_MODE = hasFlag(['--mock'])
+const OPEN_BROWSER = !hasFlag(['--no-open'])
+
+// ── Auto-detect Gateway ─────────────────────────────────────────
+
+function autoDetectGateway() {
+  const configPath = join(OPENCLAW_HOME, 'openclaw.json')
+  if (!existsSync(configPath)) return { url: null, token: null }
+
+  try {
+    const config = JSON.parse(readFileSync(configPath, 'utf-8'))
+    const gw = config.gateway || {}
+    const port = gw.port || 18789
+    const token = gw.auth?.token || null
+    const url = `http://127.0.0.1:${port}`
+    return { url, token }
+  } catch (err) {
+    console.warn('[pixel-office] Could not read OpenClaw config:', err.message)
+    return { url: null, token: null }
+  }
+}
+
+let GATEWAY_URL = getArg(['--gateway-url'])
+let GATEWAY_TOKEN = getArg(['--gateway-token'])
+
+if (!GATEWAY_URL || !GATEWAY_TOKEN) {
+  const detected = autoDetectGateway()
+  if (!GATEWAY_URL) GATEWAY_URL = detected.url
+  if (!GATEWAY_TOKEN) GATEWAY_TOKEN = detected.token
+}
+
+// ── Export config and start server ──────────────────────────────
+
+process.env.PORT = String(PORT)
+process.env.PIXEL_OFFICE_HOST = HOST
+process.env.OPENCLAW_HOME = OPENCLAW_HOME
+if (GATEWAY_URL) process.env.OPENCLAW_GATEWAY_URL = GATEWAY_URL
+if (GATEWAY_TOKEN) process.env.OPENCLAW_GATEWAY_TOKEN = GATEWAY_TOKEN
+if (CHAT_DISABLED) process.env.PIXEL_OFFICE_NO_CHAT = '1'
+
+// Print startup banner
+console.log('')
+console.log('  🏢 Pixel Office')
+console.log('  ────────────────────────────────')
+if (MOCK_MODE) {
+  console.log('  Mode:     Mock (no OpenClaw needed)')
+} else {
+  console.log(`  OpenClaw: ${OPENCLAW_HOME}`)
+  console.log(`  Gateway:  ${GATEWAY_URL || '(not detected)'}`)
+  console.log(`  Token:    ${GATEWAY_TOKEN ? '(configured)' : '(not detected)'}`)
+}
+console.log(`  Server:   http://${HOST}:${PORT}`)
+console.log(`  Chat:     ${CHAT_DISABLED ? 'disabled' : 'enabled'}`)
+console.log('  ────────────────────────────────')
+console.log('')
+
+if (!MOCK_MODE && !GATEWAY_URL) {
+  console.warn('  ⚠️  No OpenClaw instance detected.')
+  console.warn('     Make sure OpenClaw is running, or pass --gateway-url and --gateway-token.')
+  console.warn('     Starting anyway — you can connect via the UI.\n')
+}
+
+// Open browser after a short delay
+if (OPEN_BROWSER) {
+  setTimeout(() => {
+    const url = `http://localhost:${PORT}`
+    try {
+      const platform = process.platform
+      if (platform === 'darwin') execSync(`open ${url}`)
+      else if (platform === 'win32') execSync(`start ${url}`)
+      else execSync(`xdg-open ${url} 2>/dev/null || sensible-browser ${url} 2>/dev/null`)
+    } catch { /* ignore */ }
+  }, 1000)
+}
+
+// Import and start the server
+import('./server.js')

package/dist/assets/2dpig-LICENSE.txt

@@ -0,0 +1,7 @@
+This asset pack is released under the Creative Commons Public Domain Dedication License (aka CC0 or CC Zero).
+
+CC0 is a public dedication tool, which allows creators to give up their copyright and put their works into the worldwide public domain. CC0 allows users to distribute, remix, adapt, and build upon the material in any medium or format, with no conditions.
+
+More info here:
+https://creativecommons.org/publicdomain/zero/1.0/
+

package/dist/assets/default-layout.json

@@ -0,0 +1,98 @@
+{
+  "version": 1,
+  "cols": 20,
+  "rows": 12,
+  "tiles": [
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 2, 2, 2, 2, 2, 2, 2, 0, 2, 2, 2, 2, 0, 0, 3, 3, 3, 3, 0,
+    0, 2, 2, 2, 2, 2, 2, 2, 0, 2, 2, 2, 2, 2, 0, 3, 3, 3, 3, 0,
+    0, 2, 2, 2, 2, 2, 2, 2, 0, 2, 2, 2, 2, 2, 0, 3, 3, 3, 3, 0,
+    0, 2, 2, 2, 2, 2, 2, 2, 0, 2, 2, 2, 2, 2, 0, 3, 3, 3, 3, 0,
+    0, 2, 2, 2, 2, 2, 2, 2, 0, 0, 2, 2, 0, 0, 0, 3, 3, 3, 3, 0,
+    0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0,
+    0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0,
+    0, 4, 4, 4, 4, 4, 4, 4, 4, 2, 2, 2, 4, 4, 4, 4, 4, 4, 4, 0,
+    0, 4, 4, 4, 4, 4, 4, 4, 4, 2, 2, 2, 4, 4, 4, 4, 4, 4, 4, 0,
+    0, 4, 4, 4, 4, 4, 4, 4, 4, 2, 2, 2, 4, 4, 4, 4, 4, 4, 4, 0,
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
+  ],
+  "furniture": [
+    {"uid": "desk-1-1", "type": "desk", "col": 1, "row": 1},
+    {"uid": "chair-1-3", "type": "chair", "col": 2, "row": 3},
+    {"uid": "chair-1-4", "type": "chair", "col": 1, "row": 3},
+    {"uid": "pc-1-1", "type": "pc", "col": 1, "row": 1},
+    {"uid": "pc-1-2", "type": "pc", "col": 2, "row": 1},
+
+    {"uid": "desk-4-1", "type": "desk", "col": 4, "row": 1},
+    {"uid": "chair-4-3", "type": "chair", "col": 5, "row": 3},
+    {"uid": "chair-4-4", "type": "chair", "col": 4, "row": 3},
+    {"uid": "pc-4-1", "type": "pc", "col": 4, "row": 1},
+    {"uid": "pc-4-2", "type": "pc", "col": 5, "row": 1},
+
+    {"uid": "desk-1-4", "type": "desk", "col": 1, "row": 4},
+    {"uid": "chair-1-6", "type": "chair", "col": 2, "row": 6},
+    {"uid": "chair-1-7", "type": "chair", "col": 1, "row": 6},
+    {"uid": "pc-1-4", "type": "pc", "col": 1, "row": 4},
+
+    {"uid": "desk-4-4", "type": "desk", "col": 4, "row": 4},
+    {"uid": "chair-4-6", "type": "chair", "col": 5, "row": 6},
+    {"uid": "chair-4-7", "type": "chair", "col": 4, "row": 6},
+    {"uid": "pc-4-4", "type": "pc", "col": 4, "row": 4},
+
+    {"uid": "desk-9-1", "type": "desk", "col": 9, "row": 1},
+    {"uid": "chair-9-3", "type": "chair", "col": 10, "row": 3},
+    {"uid": "chair-9-4", "type": "chair", "col": 9, "row": 3},
+    {"uid": "pc-9-1", "type": "pc", "col": 9, "row": 1},
+    {"uid": "pc-9-2", "type": "pc", "col": 10, "row": 1},
+
+    {"uid": "desk-11-1", "type": "desk", "col": 11, "row": 1},
+    {"uid": "chair-11-3", "type": "chair", "col": 12, "row": 3},
+    {"uid": "chair-11-4", "type": "chair", "col": 11, "row": 3},
+    {"uid": "pc-11-1", "type": "pc", "col": 11, "row": 1},
+    {"uid": "pc-11-2", "type": "pc", "col": 12, "row": 1},
+
+    {"uid": "wb-15-1", "type": "whiteboard", "col": 15, "row": 1},
+    {"uid": "chair-15-3", "type": "chair", "col": 15, "row": 3},
+    {"uid": "chair-16-3", "type": "chair", "col": 16, "row": 3},
+    {"uid": "chair-17-3", "type": "chair", "col": 17, "row": 3},
+    {"uid": "chair-18-3", "type": "chair", "col": 18, "row": 3},
+
+    {"uid": "desk-1-8", "type": "desk", "col": 1, "row": 8},
+    {"uid": "chair-1-8s", "type": "chair", "col": 1, "row": 8},
+    {"uid": "chair-2-8s", "type": "chair", "col": 2, "row": 8},
+    {"uid": "pc-1-8", "type": "pc", "col": 1, "row": 8},
+
+    {"uid": "desk-4-8", "type": "desk", "col": 4, "row": 8},
+    {"uid": "chair-4-8s", "type": "chair", "col": 4, "row": 8},
+    {"uid": "chair-5-8s", "type": "chair", "col": 5, "row": 8},
+    {"uid": "pc-4-8", "type": "pc", "col": 4, "row": 8},
+
+    {"uid": "desk-12-8", "type": "desk", "col": 12, "row": 8},
+    {"uid": "chair-12-8s", "type": "chair", "col": 12, "row": 8},
+    {"uid": "chair-13-8s", "type": "chair", "col": 13, "row": 8},
+    {"uid": "pc-12-8", "type": "pc", "col": 12, "row": 8},
+
+    {"uid": "desk-15-8", "type": "desk", "col": 15, "row": 8},
+    {"uid": "chair-15-8s", "type": "chair", "col": 15, "row": 8},
+    {"uid": "chair-16-8s", "type": "chair", "col": 16, "row": 8},
+    {"uid": "pc-15-8", "type": "pc", "col": 15, "row": 8},
+
+    {"uid": "plant-7-1", "type": "plant", "col": 7, "row": 1},
+    {"uid": "plant-7-6", "type": "plant", "col": 7, "row": 7},
+    {"uid": "plant-14-6", "type": "plant", "col": 14, "row": 7},
+    {"uid": "plant-8-10", "type": "plant", "col": 8, "row": 10},
+    {"uid": "plant-11-10", "type": "plant", "col": 11, "row": 10},
+    {"uid": "plant-1-7", "type": "plant", "col": 1, "row": 7},
+
+    {"uid": "cooler-8-7", "type": "cooler", "col": 9, "row": 7},
+
+    {"uid": "bs-7-8", "type": "bookshelf", "col": 7, "row": 8},
+    {"uid": "bs-7-10", "type": "bookshelf", "col": 7, "row": 10},
+    {"uid": "bs-18-8", "type": "bookshelf", "col": 18, "row": 8},
+    {"uid": "bs-18-10", "type": "bookshelf", "col": 18, "row": 10},
+
+    {"uid": "lamp-13-1", "type": "lamp", "col": 13, "row": 2},
+    {"uid": "lamp-18-7", "type": "lamp", "col": 18, "row": 7},
+    {"uid": "lamp-6-7", "type": "lamp", "col": 6, "row": 7}
+  ]
+}