pixel-office-openclaw 0.1.0

package/dist/assets/index-DHX1xfjO.css

@@ -0,0 +1 @@
+@font-face{font-family:FS Pixel Sans;font-style:normal;font-weight:400;font-display:swap;src:url(./FSPixelSansUnicode-Regular-D9-dh-Uo.ttf) format("truetype")}:root{--pixel-bg: #1e1e2e;--pixel-border: #4a4a6a;--pixel-border-light: #6a6a8a;--pixel-accent: #5a8cff;--pixel-green: #5ac88c;--pixel-shadow: 2px 2px 0px #0a0a14;--pixel-text: rgba(255, 255, 255, .8);--pixel-text-dim: rgba(255, 255, 255, .7);--pixel-btn-bg: rgba(255, 255, 255, .08);--pixel-btn-hover-bg: rgba(255, 255, 255, .15);--pixel-btn-disabled-opacity: .35;--pixel-active-bg: rgba(90, 140, 255, .25);--pixel-agent-bg: rgba(90, 200, 140, .15);--pixel-agent-hover-bg: rgba(90, 200, 140, .3);--pixel-agent-border: #5ac88c;--pixel-agent-text: rgba(200, 255, 220, .95);--pixel-close-text: rgba(255, 255, 255, .5);--pixel-close-hover: #e55;--pixel-hint-bg: #3278c8;--pixel-reset-text: #ecc;--pixel-danger-bg: #a33;--pixel-vignette: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .6) 100%);--pixel-status-permission: #cca700;--pixel-status-active: #3794ff;--vscode-charts-yellow: #cca700;--vscode-charts-blue: #3794ff;--vscode-charts-green: #89d185;--vscode-foreground: rgba(255, 255, 255, .85);--vscode-editor-background: #1e1e2e;--vscode-widget-border: rgba(255, 255, 255, .12);--pixel-overlay-z: 100;--pixel-overlay-selected-z: 110;--pixel-controls-z: 50}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden;font-family:FS Pixel Sans,sans-serif;background:var(--pixel-bg);color:var(--vscode-foreground)}*{font-family:FS Pixel Sans,sans-serif}.pixel-status-bar{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:4px 10px;background:#0a0a14bf;border-bottom:1px solid var(--pixel-border);font-size:18px;pointer-events:auto}.pixel-status-bar-left{display:flex;align-items:center;gap:8px}.pixel-status-dot{width:6px;height:6px;border-radius:50%;background:var(--pixel-green);flex-shrink:0}.pixel-status-text{color:#fff9;white-space:nowrap}.pixel-status-separator{width:1px;height:12px;background:#fff3}.pixel-status-disconnect{border:none;font-size:18px;cursor:pointer;padding:2px 8px;font-family:FS Pixel Sans,sans-serif}.pixel-toast-container{position:absolute;top:36px;right:10px;z-index:60;display:flex;flex-direction:column;gap:6px;max-width:340px}.pixel-toast{display:flex;align-items:flex-start;gap:6px;padding:6px 10px;background:var(--pixel-bg);border:2px solid var(--pixel-border);box-shadow:var(--pixel-shadow);font-size:16px;animation:pixel-toast-slide .2s ease-out}.pixel-toast-error{border-color:#c8323280;background:#280f0fe6}.pixel-toast-message{color:#fffc;word-break:break-word;flex:1}.pixel-toast-close{background:none;border:none;color:#fff6;cursor:pointer;padding:0 2px;font-size:18px;font-family:FS Pixel Sans,sans-serif;flex-shrink:0}.pixel-toast-close:hover{color:#fffc}@keyframes pixel-toast-slide{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media(max-width:640px){.pixel-status-bar{font-size:14px;padding:3px 6px}.pixel-status-bar-left{gap:4px;overflow:hidden}.pixel-status-text{font-size:14px;overflow:hidden;text-overflow:ellipsis}.pixel-status-disconnect{font-size:14px;padding:4px 8px;min-height:32px}.pixel-toast-container{left:10px;right:10px;max-width:none}.pixel-toast{font-size:14px}.pixel-toast-close{min-width:28px;min-height:28px;display:flex;align-items:center;justify-content:center}}@media(pointer:coarse){.pixel-status-disconnect{min-height:44px;min-width:44px;padding:8px 12px}.pixel-toast-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}}@media(pointer:coarse){#root{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}}

package/dist/assets/mockProvider-CjnCG90O.js

@@ -0,0 +1 @@
+import{e}from"./index-D7SaYitc.js";const v=["Reading file: src/index.ts","Writing file: src/app.tsx","Editing file: src/utils.ts","Running command: npm test","Searching for: useEffect","Globbing: **/*.tsx","Fetching: https://api.example.com/data"];let y=0;function T(){return`mock-tool-${++y}`}function r(n){return n[Math.floor(Math.random()*n.length)]}function M(){const n=[],i=[];u();function u(){d().then(()=>{const t=setTimeout(()=>l(),400);n.push(t);const o=setTimeout(()=>m(),1500);n.push(o)})}async function d(){try{const o=await(await fetch("./assets/default-layout.json")).json();e.emit("layoutLoaded",{layout:o}),console.log("[MockProvider] Layout loaded")}catch(t){console.warn("[MockProvider] Could not load default-layout.json, using null layout:",t),e.emit("layoutLoaded",{layout:null})}}function l(){const t=[{id:1,name:"Coder",model:"claude-opus-4",kind:"coder"},{id:2,name:"Researcher",model:"gpt-4o",kind:"researcher"},{id:3,name:"Planner",model:"claude-sonnet",kind:"agent"}];for(const o of t)e.emit("agentCreated",{id:o.id,name:o.name,model:o.model,kind:o.kind}),console.log(`[MockProvider] Agent #${o.id} (${o.name}) created`);e.emit("agentStatus",{id:1,status:"active"}),e.emit("agentStatus",{id:2,status:"active"}),e.emit("agentStatus",{id:3,status:"waiting"})}function m(){const t=[1,2,3];for(const a of t)c(a);const o=setInterval(()=>{const a=r(t),s=Math.random()>.3?"active":"waiting";e.emit("agentStatus",{id:a,status:s})},8e3);i.push(o)}function c(t){const o=2e3+Math.random()*4e3,a=setTimeout(()=>{const s=T(),f=r(v);e.emit("agentToolStart",{id:t,toolId:s,status:f}),e.emit("agentStatus",{id:t,status:"active"});const g=1500+Math.random()*2500,h=setTimeout(()=>{e.emit("agentToolDone",{id:t,toolId:s});const p=setTimeout(()=>{e.emit("agentToolsClear",{id:t}),c(t)},500+Math.random()*1e3);n.push(p)},g);n.push(h)},o);n.push(a)}return()=>{for(const t of n)clearTimeout(t);for(const t of i)clearInterval(t)}}export{M as startMockProvider};

package/dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>Pixel Office</title>
+    <script type="module" crossorigin src="./assets/index-D7SaYitc.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-DHX1xfjO.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "pixel-office-openclaw",
+  "version": "0.1.0",
+  "description": "Watch your OpenClaw AI agents work in a pixel-art virtual office",
+  "type": "module",
+  "bin": {
+    "pixel-office-openclaw": "cli.js",
+    "pixel-office": "cli.js"
+  },
+  "main": "server.js",
+  "files": [
+    "cli.js",
+    "server.js",
+    "dist/**",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "start": "node cli.js",
+    "serve": "node server.js",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "VITE_GATEWAY_URL=/ VITE_GATEWAY_TOKEN=bridge npm run build"
+  },
+  "keywords": [
+    "openclaw",
+    "ai-agents",
+    "pixel-art",
+    "office",
+    "visualization",
+    "dashboard"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/neomatrix25/pixel-office"
+  },
+  "author": "Tridents Lab",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^5.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/server.js

@@ -0,0 +1,370 @@
+#!/usr/bin/env node
+/**
+ * Pixel Office production server.
+ * Serves the built static files and bridges session data from
+ * OpenClaw agent session stores to the browser via GET /sessions_list.
+ *
+ * Environment variables:
+ *   PORT                 — HTTP port (default: 3002)
+ *   OPENCLAW_HOME        — OpenClaw home directory (default: ~/.openclaw)
+ *   OPENCLAW_ACTIVE_MIN  — Active window in minutes for session filtering (default: 60)
+ *   OPENCLAW_AGENTS      — Comma-separated agent IDs to scan (default: auto-detect)
+ *
+ * Usage:
+ *   npm run build && node server.js
+ */
+
+import express from 'express'
+import { readFileSync, writeFileSync, mkdirSync, readdirSync, existsSync, statSync, unlinkSync } from 'fs'
+import { execFileSync } from 'child_process'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+import { homedir } from 'os'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const PORT = parseInt(process.env.PORT || '3002', 10)
+const HOST = process.env.PIXEL_OFFICE_HOST || '127.0.0.1'
+const OPENCLAW_HOME = process.env.OPENCLAW_HOME || join(homedir(), '.openclaw')
+const ACTIVE_MINUTES = parseInt(process.env.OPENCLAW_ACTIVE_MIN || '60', 10)
+const CHAT_DISABLED = process.env.PIXEL_OFFICE_NO_CHAT === '1'
+const AGENT_IDS = process.env.OPENCLAW_AGENTS
+  ? process.env.OPENCLAW_AGENTS.split(',').map((s) => s.trim())
+  : null // null = auto-detect from directory listing
+
+const app = express()
+app.use(express.json())
+
+// ── Sessions Bridge (File Store → HTTP) ──────────────────────────
+
+/**
+ * Discover agent IDs by scanning the agents directory.
+ * Returns array of directory names under OPENCLAW_HOME/agents/.
+ */
+function discoverAgents() {
+  const agentsDir = join(OPENCLAW_HOME, 'agents')
+  if (!existsSync(agentsDir)) return []
+  try {
+    return readdirSync(agentsDir, { withFileTypes: true })
+      .filter((d) => d.isDirectory())
+      .map((d) => d.name)
+  } catch {
+    return []
+  }
+}
+
+/**
+ * Read all sessions from an agent's session store file.
+ * Returns array of session objects with agentId injected.
+ */
+function readAgentSessions(agentId) {
+  const sessionsFile = join(OPENCLAW_HOME, 'agents', agentId, 'sessions', 'sessions.json')
+  if (!existsSync(sessionsFile)) return []
+
+  try {
+    // Guard against oversized files (max 10MB)
+    const fstat = statSync(sessionsFile)
+    if (fstat.size > 10 * 1024 * 1024) {
+      console.warn(`[bridge] Skipping ${agentId} — sessions.json too large (${fstat.size} bytes)`)
+      return []
+    }
+    const raw = readFileSync(sessionsFile, 'utf-8')
+    const data = JSON.parse(raw)
+
+    // The file is a flat dict keyed by session key
+    const sessions = []
+    const now = Date.now()
+    const cutoff = now - ACTIVE_MINUTES * 60 * 1000
+
+    for (const [key, session] of Object.entries(data)) {
+      const s = session
+      const updatedAt = s.updatedAt || 0
+
+      // Filter by activity window
+      if (updatedAt < cutoff) continue
+
+      sessions.push({
+        sessionKey: key,
+        kind: s.kind || 'agent',
+        name: s.displayName || agentId,
+        model: s.model || 'unknown',
+        lastActivity: updatedAt,
+        status: deriveStatus(s, now),
+        agentId,
+        lastMessage: extractLastMessage(s) || null,
+      })
+    }
+
+    return sessions
+  } catch (err) {
+    console.error(`[bridge] Error reading ${agentId} sessions:`, err.message)
+    return []
+  }
+}
+
+/**
+ * Derive agent status from session data.
+ */
+function deriveStatus(session, now) {
+  // If updated within last 60 seconds, consider active
+  if (session.updatedAt && (now - session.updatedAt) < 60000) {
+    return 'active'
+  }
+
+  // Check last message for tool activity
+  const messages = session.messages || session.last_messages
+  const lastMsg = Array.isArray(messages) ? messages[0] : null
+  if (lastMsg) {
+    if (lastMsg.role === 'assistant') {
+      const content = Array.isArray(lastMsg.content) ? lastMsg.content : []
+      const hasToolCall = content.some((c) => c.type === 'toolCall' || c.type === 'tool_use')
+      return hasToolCall ? 'active' : 'waiting'
+    }
+    return 'waiting'
+  }
+
+  return 'idle'
+}
+
+/**
+ * Extract the last meaningful message from session data.
+ * Returns a short summary string, or null if nothing found.
+ */
+function extractLastMessage(session) {
+  const messages = session.messages || session.last_messages || []
+  if (!Array.isArray(messages) || messages.length === 0) return null
+
+  // Walk backwards to find last assistant message with text
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i]
+    if (msg.role === 'assistant') {
+      if (typeof msg.content === 'string') return msg.content.slice(0, 200)
+      if (Array.isArray(msg.content)) {
+        const text = msg.content.find((c) => c.type === 'text')
+        if (text && text.text) return text.text.slice(0, 200)
+      }
+    }
+  }
+  return null
+}
+
+// Simple in-memory cache for session list (avoid I/O spam from rapid polling)
+let sessionCache = { data: null, ts: 0 }
+const CACHE_TTL_MS = 3000
+
+app.get('/sessions_list', (_req, res) => {
+  try {
+    // Return cached result if fresh
+    const now = Date.now()
+    if (sessionCache.data && (now - sessionCache.ts) < CACHE_TTL_MS) {
+      return res.json(sessionCache.data)
+    }
+
+    const agents = AGENT_IDS || discoverAgents()
+    const allSessions = []
+
+    for (const agentId of agents) {
+      const sessions = readAgentSessions(agentId)
+      allSessions.push(...sessions)
+    }
+
+    // Dedup: one entry per agentId, keep the most recent session
+    const byAgent = new Map()
+    for (const s of allSessions) {
+      const key = s.agentId
+      const existing = byAgent.get(key)
+      if (!existing || (s.lastActivity || 0) > (existing.lastActivity || 0)) {
+        byAgent.set(key, s)
+      }
+    }
+    const dedupedSessions = [...byAgent.values()]
+
+    const result = { sessions: dedupedSessions }
+    sessionCache = { data: result, ts: Date.now() }
+    res.json(result)
+  } catch (err) {
+    console.error('[bridge] Error:', err.message || err)
+    res.status(500).json({ error: 'Session store read failed' })
+  }
+})
+
+// Also serve at /api/sessions as an alias
+app.get('/api/sessions', (req, res) => {
+  req.url = '/sessions_list'
+  app.handle(req, res)
+})
+
+// ── Chat Bridge (Send Message → Agent) ───────────────────────────
+
+/**
+ * Get the most recent active session key for an agent.
+ * Routes pixel office chat into the same session as Slack.
+ */
+function getActiveSessionKey(agentId) {
+  const sessionsFile = join(OPENCLAW_HOME, 'agents', agentId, 'sessions', 'sessions.json')
+  if (!existsSync(sessionsFile)) return null
+
+  try {
+    const raw = readFileSync(sessionsFile, 'utf-8')
+    const data = JSON.parse(raw)
+
+    let bestKey = null
+    let bestTime = 0
+
+    for (const [key, session] of Object.entries(data)) {
+      const updatedAt = session.updatedAt || 0
+      if (updatedAt > bestTime) {
+        bestTime = updatedAt
+        bestKey = key
+      }
+    }
+
+    return bestKey
+  } catch {
+    return null
+  }
+}
+
+app.post('/api/send', async (req, res) => {
+  if (CHAT_DISABLED) {
+    return res.status(403).json({ error: 'Chat is disabled. Start with --no-chat removed to enable.' })
+  }
+  const { agentId, message } = req.body || {}
+  if (!agentId || !message) {
+    return res.status(400).json({ error: 'Missing agentId or message' })
+  }
+
+  const safeAgentId = String(agentId).replace(/[^a-zA-Z0-9_-]/g, '')
+  const safeMessage = String(message).slice(0, 2000)
+
+  // Use OpenClaw gateway API to send message to the agent's session
+  const GATEWAY_URL = process.env.OPENCLAW_GATEWAY_URL || 'http://127.0.0.1:18789'
+  const GATEWAY_TOKEN = process.env.OPENCLAW_GATEWAY_TOKEN || ''
+
+  // Find the agent's most recent session key
+  const sessionKey = getActiveSessionKey(safeAgentId)
+
+  try {
+    // Use sessions_send via the gateway API
+    const payload = {
+      message: safeMessage,
+      ...(sessionKey ? { label: safeAgentId } : { label: safeAgentId }),
+    }
+
+    const resp = await fetch(`${GATEWAY_URL}/api/sessions/send`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(GATEWAY_TOKEN ? { 'Authorization': `Bearer ${GATEWAY_TOKEN}` } : {}),
+      },
+      body: JSON.stringify(payload),
+    })
+
+    if (!resp.ok) {
+      const body = await resp.text()
+      console.error(`[bridge] Gateway send failed for ${safeAgentId}: ${resp.status} ${body.slice(0, 200)}`)
+      // Fallback to CLI — use --json to capture the agent's reply
+      try {
+        const cliResult = execFileSync('openclaw', ['agent', '--agent', safeAgentId, '--message', safeMessage, '--json'],
+          { timeout: 120000, stdio: ['pipe', 'pipe', 'pipe'], encoding: 'utf-8' }
+        )
+        console.log(`[bridge] Sent to ${safeAgentId} (CLI): ${safeMessage.slice(0, 50)}...`)
+        try {
+          const parsed = JSON.parse(cliResult)
+          // OpenClaw CLI returns { result: { payloads: [{ text: "..." }] } }
+          const reply = parsed.result?.payloads?.[0]?.text
+            || parsed.reply || parsed.text || parsed.result || cliResult.trim()
+          return res.json({ ok: true, agentId: safeAgentId, reply })
+        } catch {
+          return res.json({ ok: true, agentId: safeAgentId, reply: cliResult.trim() })
+        }
+      } catch (cliErr) {
+        return res.status(500).json({ error: 'Failed to send message', detail: cliErr.message?.slice(0, 200) || body.slice(0, 200) })
+      }
+    }
+
+    const result = await resp.json()
+    console.log(`[bridge] Sent to ${safeAgentId} via gateway: ${safeMessage.slice(0, 50)}...`)
+    res.json({ ok: true, agentId: safeAgentId, reply: result.reply || result.text || null })
+  } catch (err) {
+    const detail = err.message || 'Send failed'
+    console.error(`[bridge] Send error for ${safeAgentId}:`, detail)
+    res.status(500).json({ error: 'Failed to send message', detail: detail.slice(0, 200) })
+  }
+})
+
+// ── Layout Persistence (Save/Load to Disk) ──────────────────────
+
+const LAYOUT_DIR = join(OPENCLAW_HOME, 'pixel-office')
+const LAYOUT_FILE = join(LAYOUT_DIR, 'layout.json')
+
+app.get('/api/layout', (_req, res) => {
+  // If ?reset query param, skip saved layout entirely
+  if (_req.query.reset === 'true') {
+    return res.status(404).json({ error: 'Reset requested' })
+  }
+  try {
+    if (!existsSync(LAYOUT_FILE)) {
+      return res.status(404).json({ error: 'No saved layout' })
+    }
+    const raw = readFileSync(LAYOUT_FILE, 'utf-8')
+    const layout = JSON.parse(raw)
+    // Sanity check: reject corrupted layouts (too many rows)
+    if (layout.rows > 30) {
+      console.warn(`[bridge] Rejecting corrupted layout (${layout.rows} rows), falling back to default`)
+      unlinkSync(LAYOUT_FILE)
+      return res.status(404).json({ error: 'Corrupted layout removed' })
+    }
+    res.json({ layout })
+  } catch (err) {
+    console.error('[bridge] Error reading layout:', err.message)
+    res.status(500).json({ error: 'Failed to read layout' })
+  }
+})
+
+app.post('/api/layout', (req, res) => {
+  const { layout } = req.body || {}
+  if (!layout || !layout.version || !Array.isArray(layout.tiles)) {
+    return res.status(400).json({ error: 'Invalid layout' })
+  }
+
+  try {
+    if (!existsSync(LAYOUT_DIR)) {
+      mkdirSync(LAYOUT_DIR, { recursive: true })
+    }
+    writeFileSync(LAYOUT_FILE, JSON.stringify(layout, null, 2), 'utf-8')
+    console.log(`[bridge] Layout saved (${layout.cols}x${layout.rows}, ${layout.furniture?.length || 0} items)`)
+    res.json({ ok: true })
+  } catch (err) {
+    console.error('[bridge] Error saving layout:', err.message)
+    res.status(500).json({ error: 'Failed to save layout' })
+  }
+})
+
+// ── Static Files ────────────────────────────────────────────────
+
+const distPath = join(__dirname, 'dist')
+app.use(express.static(distPath, {
+  setHeaders: (res, path) => {
+    // Prevent caching of HTML so new JS hashes always load
+    if (path.endsWith('.html')) {
+      res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
+    }
+  }
+}))
+
+// SPA fallback — serve index.html for all non-API routes (Express 5 syntax)
+app.get('/{*path}', (_req, res) => {
+  res.sendFile(join(distPath, 'index.html'))
+})
+
+// ── Start ───────────────────────────────────────────────────────
+
+app.listen(PORT, HOST, () => {
+  const agents = AGENT_IDS || discoverAgents()
+  console.log(`[server] Pixel Office running at http://${HOST}:${PORT}`)
+  console.log(`[server] Session store: ${OPENCLAW_HOME}/agents/`)
+  console.log(`[server] Scanning ${agents.length} agents: ${agents.join(', ')}`)
+  console.log(`[server] Activity window: ${ACTIVE_MINUTES} minutes`)
+})