opencode-pixel-office 1.0.11 → 1.2.0

package/README.md

@@ -1,150 +1,125 @@
 # Pixel Office
 
-Pixel Office is an OpenCode plugin that visualizes agent activity (LLM thoughts, tool usage, file modifications) in a live, retro-style office scene.
-<img width="1455" height="824" alt="Screenshot 2026-02-04 at 7 03 58 PM" src="https://github.com/user-attachments/assets/e20e2e68-a032-4747-a027-aacca0f274e5" />
-https://www.npmjs.com/package/opencode-pixel-office
-
-## Overview
-
-The system consists of three main parts:
-1.  **OpenCode Plugin**: Captures events from the IDE/Agent execution.
-2.  **Server**: A Node.js Express/WebSocket server that aggregates state.
-3.  **Client**: A React + PixiJS dashboard that renders the "Office" and "HUD".
-
-## System Architecture
-
-```mermaid
-graph TD
-    A[OpenCode IDE] -->|Plugin Events via HTTP| B(Pixel Office Server :5100)
-    B -->|Broadcast State via WebSocket| C[React Client]
-    C -->|Render| D[PixiJS Scene]
-    C -->|Render| E[HUD / Sidebar]
-    
-    subgraph Server
-    B1[Event Ingestion /events]
-    B2[State Manager]
-    B3[WebSocket Server]
-    B1 --> B2 --> B3
-    end
-```
+A pixel-art office visualization for AI coding assistants. Works with both **OpenCode** and **Claude Code** simultaneously.
 
-## Project Structure
+<img width="1455" height="824" alt="Pixel Office Screenshot" src="https://github.com/user-attachments/assets/e20e2e68-a032-4747-a027-aacca0f274e5" />
 
-```text
-pixel-opencode/
-├── client/                 # Frontend Dashboard
-│   ├── src/
-│   │   ├── components/     # UI Components (HUD, Panels)
-│   │   ├── PixiScene.tsx   # Core Game Loop & Rendering (PixiJS)
-│   │   ├── useOfficeState.ts # State Management & WebSocket Hook
-│   │   └── styles.css      # Retro Theme Styles (Tailwind + CSS Variables)
-│   └── vite.config.ts      # Client Build Config
-├── server/                 # Backend
-│   └── index.ts            # Express App & Event Handling
-├── plugin/                 # OpenCode Integration
-│   └── pixel-office.js     # Script to forward IDE events
-└── bin/                    # Executable binaries
-```
+[![npm version](https://img.shields.io/npm/v/opencode-pixel-office.svg)](https://www.npmjs.com/package/opencode-pixel-office)
 
-## Key Components
+## Features
 
-### 1. `PixiScene.tsx`
-The heart of the visualization. It handles:
--   **Sprite Management**: Rendering agents, furniture, and effects.
--   **Pathfinding**: A* algorithm for agent movement (using `pathfinding.ts`).
--   **Game Loop**: Updates positions and animations at 60fps.
+- **Dual Support**: Works with both OpenCode and Claude Code CLI
+- **Live Visualization**: Real-time pixel-art office showing agent activity
+- **Tabbed Interface**: Switch between OpenCode Office and Claude Office views
+- **Mobile Ready**: Connect via local network + QR code
+- **Session Tracking**: Monitor multiple sessions across different repos
 
-### 2. `useOfficeState.ts`
-A custom React hook that:
--   Maintains the WebSocket connection.
--   Merges incoming event deltas into the current `OfficeState`.
--   Manage active sessions, todos, and agent statuses.
+## Quick Start
 
-### 3. `plugin/pixel-office.js`
-A standard OpenCode plugin script that hooks into the event bus:
--   `agent` events (thoughts, tools)
--   `session` events (status changes)
--   `fs` events (file modifications)
+```bash
+# Install globally
+npm install -g opencode-pixel-office
 
-## 📱 Mobile Support
+# Install for both OpenCode and Claude Code
+opencode-pixel-office install
 
-Monitor your agents from your phone or tablet!
+# Start the server
+opencode-pixel-office start
+```
 
--   **Network Access**: The server automatically binds to your LAN IP.
--   **QR Code**: In the dashboard, click the Network URL in the top-right corner to reveal a QR code. Scan it to instantly connect.
--   **Responsive Design**: The dashboard adapts to portrait and landscape modes on mobile devices.
+That's it! The dashboard opens at `http://localhost:5100`.
 
-<img src="https://github.com/user-attachments/assets/c5420d78-9c87-4062-b034-21ae3defd52f" width="375" alt="Mobile View" />
+## CLI Commands
 
-## Installation
+| Command | Description |
+|---------|-------------|
+| `install` | Install plugin + hooks for both OpenCode and Claude Code |
+| `start` | Start the Pixel Office server |
+| `stop` | Stop the server |
+| `status` | Show installation status |
+| `uninstall` | Remove everything |
 
-### 🚀 For Users (The Easy Way)
+### Options
 
-1.  **Install the Global Package**:
-    ```bash
-    npm install -g opencode-pixel-office
-    ```
+- `--port <number>` - Set server port (default: 5100)
+- `--version, -v` - Show version number
 
-2.  **Run the Installer**:
-    ```bash
-    opencode-pixel-office install
-    ```
-    This sets up the standalone app in `~/.opencode/pixel-office` and installs the `pixel-office.js` plugin script to `~/.opencode/plugins/`.
+## How It Works
 
-3.  **Start OpenCode**:
-    Simply open your IDE. Pixel Office will auto-launch in your browser at `http://localhost:5100`.
+```
+┌─────────────┐     ┌─────────────┐
+│  OpenCode   │     │ Claude Code │
+│   Plugin    │     │    Hooks    │
+└──────┬──────┘     └──────┬──────┘
+       │                   │
+       │   HTTP POST       │
+       └───────┬───────────┘
+               ▼
+       ┌───────────────┐
+       │ Pixel Office  │
+       │    Server     │
+       │   :5100       │
+       └───────┬───────┘
+               │ WebSocket
+               ▼
+       ┌───────────────┐
+       │    Browser    │
+       │   Dashboard   │
+       └───────────────┘
+```
 
-### CLI Commands
+- **OpenCode Plugin** → `~/.opencode/plugins/pixel-office.js`
+- **Claude Code Hooks** → `~/.claude/hooks/` + `~/.claude/settings.json`
+- **Server/App** → `~/.opencode/pixel-office/`
+
+## 📱 Mobile Support
 
--   **Install**: `opencode-pixel-office install [--port <number>]`
--   **Uninstall**: `opencode-pixel-office uninstall`
--   **Stop Server**: `opencode-pixel-office stop` (Manually kills the server process on the configured port)
+Monitor your agents from your phone!
 
-### 🛠️ For Developers
+1. Click the Network URL in the top-right corner
+2. Scan the QR code
+3. Watch agents work from anywhere on your network
 
-If you want to modify the source code or contribute:
+<img src="https://github.com/user-attachments/assets/c5420d78-9c87-4062-b034-21ae3defd52f" width="375" alt="Mobile View" />
+
+## Development
 
-#### 1. Clone & Install
 ```bash
-git clone https://github.com/your-username/opencode-pixel-office.git
+# Clone the repo
+git clone https://github.com/anthropics/opencode-pixel-office.git
 cd opencode-pixel-office
 npm install
-```
 
-#### 2. Start the Server (Dev Mode)
-```bash
+# Run server (dev mode)
 npm start
-# Server runs on http://localhost:5100, watching for changes
-```
 
-#### 3. Start the Client (Dev Mode)
-In a separate terminal:
-```bash
+# Run client (dev mode, separate terminal)
 npm run dev:client
-```
 
-#### 4. Install the Plugin (Dev Mode)
-To use your *local* version instead of the global one:
-```bash
-mkdir -p ~/.opencode/plugins
-cp plugin/pixel-office.js ~/.opencode/plugins/
+# Build client for production
+npm run build:client
 ```
-(The plugin automatically prefers your local `server/` if you are opening the `pixel-opencode` project in OpenCode.)
 
-#### 2. Install the Plugin (Dev Mode)
-Copy the plugin script to your OpenCode configuration:
-```bash
-mkdir -p .opencode/plugins
-cp plugin/pixel-office.js .opencode/plugins/
-```
-Restart OpenCode to activate.
-
-## Development
+## Project Structure
 
--   **Client Dev**: `npm run dev:client` (Vite dev server)
--   **Server Dev**: `npm start` (Runs via `tsx`)
+```
+pixel-opencode/
+├── client/                 # React + PixiJS Frontend
+│   └── src/
+│       ├── App.tsx         # Main app with tabs
+│       ├── PixiScene.tsx   # Pixel art rendering
+│       └── useOfficeState.ts
+├── server/
+│   └── index.ts            # Express + WebSocket server
+├── plugin/
+│   └── pixel-office.js     # OpenCode plugin
+└── bin/
+    ├── opencode-pixel-office.js  # CLI
+    └── claude-code-hook.js       # Claude Code hook
+```
 
 ## Credits
--   **Tileset**: [Office Tileset by DonArg](https://donarg.itch.io/officetileset)
--   **Icons**: Lucide React
--   **Engine**: PixiJS
+
+- **Tileset**: [Office Tileset by DonArg](https://donarg.itch.io/officetileset)
+- **Icons**: Lucide React
+- **Engine**: PixiJS

package/bin/claude-code-hook.js

@@ -19,22 +19,22 @@ const postEvent = async (endpoint, event) => {
       body: JSON.stringify(event),
     });
   } catch (error) {
-    const logPath = path.join(os.homedir(), ".claude", "pixel-office-hook.log");
-    fs.appendFileSync(logPath, `${new Date().toISOString()} ${String(error)}\n`);
+    // Silently ignore - server might not be running
   }
 };
 
-const readMode = () => {
-  try {
-    const configPath = path.join(os.homedir(), ".opencode", "pixel-office", "config.json");
-    if (fs.existsSync(configPath)) {
-      const data = JSON.parse(fs.readFileSync(configPath, "utf8"));
-      return data.mode || "opencode";
-    }
-  } catch (error) {
-    return "opencode";
-  }
-  return "opencode";
+const getProjectName = (cwd) => {
+  if (!cwd) return "Claude Code";
+  const parts = cwd.split(path.sep).filter(Boolean);
+  return parts[parts.length - 1] || "Claude Code";
+};
+
+const getModelFromEnv = () => {
+  const model = process.env.ANTHROPIC_MODEL || process.env.CLAUDE_MODEL || "";
+  if (model.includes("opus")) return "claude-opus";
+  if (model.includes("sonnet")) return "claude-sonnet";
+  if (model.includes("haiku")) return "claude-haiku";
+  return "claude";
 };
 
 const mapHookToEvent = (input) => {
@@ -43,76 +43,169 @@ const mapHookToEvent = (input) => {
   const cwd = input.cwd || "";
   const toolName = input.tool_name || "";
   const toolInput = input.tool_input || {};
+  const toolOutput = input.tool_output || {};
   const prompt = input.prompt || input.user_prompt || "";
   const permission = input.permission || {};
+  const message = input.message || "";
+
+  const projectName = getProjectName(cwd);
+  const agentId = sessionId || `claude-${Date.now()}`;
+  const modelId = getModelFromEnv();
 
   const info = {
-    id: sessionId || `claude-${Date.now()}`,
+    id: agentId,
     sessionID: sessionId,
     agent: "Claude",
-    title: cwd || "Claude Code",
-    model: { modelID: "claude", providerID: "anthropic" },
+    title: projectName,
+    directory: cwd,
+    model: {
+      modelID: modelId,
+      providerID: "anthropic",
+    },
   };
 
+  let event = null;
+
   switch (hook) {
     case "SessionStart":
-      return {
+      event = {
         type: "session.created",
-        properties: { info },
+        properties: {
+          info: {
+            ...info,
+            title: projectName,
+            slug: projectName.toLowerCase().replace(/[^a-z0-9]/g, "-"),
+          },
+        },
       };
+      break;
+
     case "SessionEnd":
-      return {
+      event = {
         type: "session.deleted",
-        properties: { sessionID: sessionId },
+        properties: {
+          sessionID: sessionId,
+          info,
+        },
       };
+      break;
+
     case "UserPromptSubmit":
-      return {
+      event = {
         type: "message.updated",
         properties: {
           info: { ...info, role: "user" },
-          message: { content: prompt, role: "user" },
+          message: {
+            id: `msg-${Date.now()}`,
+            content: prompt,
+            role: "user",
+            status: "pending",
+          },
         },
       };
+      break;
+
     case "PreToolUse":
-      return {
+      event = {
         type: "tool.execute.before",
-        properties: { info, tool: { name: toolName, input: toolInput } },
+        properties: {
+          info,
+          tool: { name: toolName, input: toolInput },
+        },
       };
+      break;
+
     case "PostToolUse":
+      event = {
+        type: "tool.execute.after",
+        properties: {
+          info,
+          tool: { name: toolName, input: toolInput, output: toolOutput },
+          status: "success",
+        },
+      };
+      break;
+
     case "PostToolUseFailure":
-      return {
+      event = {
         type: "tool.execute.after",
-        properties: { info, tool: { name: toolName, input: toolInput } },
+        properties: {
+          info,
+          tool: { name: toolName, input: toolInput, output: toolOutput },
+          status: "error",
+        },
       };
+      break;
+
     case "PermissionRequest":
-      return {
+      event = {
         type: "permission.asked",
-        properties: { info, permission },
+        properties: {
+          info,
+          permission: { ...permission, tool: toolName },
+        },
       };
+      break;
+
     case "Notification":
-      return {
+      event = {
         type: "tui.toast.show",
-        properties: { info, message: input.message || "" },
+        properties: { info, message },
       };
+      break;
+
     case "PreCompact":
-      return {
+      event = {
         type: "session.compacted",
         properties: { info },
       };
+      break;
+
     case "Stop":
-      return {
+      event = {
         type: "session.status",
-        properties: { sessionID: sessionId, status: { type: "idle" } },
+        properties: {
+          sessionID: sessionId,
+          info,
+          status: { type: "idle" },
+        },
       };
+      break;
+
     case "SubagentStart":
-    case "SubagentStop":
-      return {
+      event = {
         type: "session.updated",
-        properties: { info },
+        properties: {
+          info: {
+            ...info,
+            agent: input.subagent_type || "Subagent",
+            title: `${projectName} (${input.subagent_type || "Task"})`,
+          },
+          parentSessionId: sessionId,
+        },
       };
+      break;
+
+    case "SubagentStop":
+      event = {
+        type: "session.idle",
+        properties: {
+          sessionID: input.subagent_id || sessionId,
+          info,
+        },
+      };
+      break;
+
     default:
       return null;
   }
+
+  // Add source tag to identify this is from Claude Code
+  if (event) {
+    event.source = "claude";
+  }
+
+  return event;
 };
 
 const main = async () => {
@@ -120,15 +213,21 @@ const main = async () => {
   if (!raw) {
     process.exit(0);
   }
-  const input = JSON.parse(raw);
-  const endpoint = process.env.PIXEL_OFFICE_URL || "http://localhost:5100/events";
-  if (readMode() !== "claude-code") {
+
+  let input;
+  try {
+    input = JSON.parse(raw);
+  } catch {
     process.exit(0);
   }
+
+  const endpoint = process.env.PIXEL_OFFICE_URL || "http://localhost:5100/events";
   const event = mapHookToEvent(input);
+
   if (!event) {
     process.exit(0);
   }
+
   await postEvent(endpoint, event);
   process.exit(0);
 };