opencode-pixel-office 1.0.0

package/README.md

@@ -0,0 +1,142 @@
+# 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" />
+## 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
+```
+
+## Project Structure
+
+```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
+```
+
+## Key Components
+
+### 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.
+
+### 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.
+
+### 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)
+
+## 📱 Mobile Support
+
+Monitor your agents from your phone or tablet!
+
+-   **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.
+
+<img src="https://github.com/user-attachments/assets/c5420d78-9c87-4062-b034-21ae3defd52f" width="375" alt="Mobile View" />
+
+## Installation
+
+### 🚀 For Users (The Easy Way)
+
+1.  **Install the Global Package**:
+    ```bash
+    npm install -g opencode-pixel-office
+    ```
+
+2.  **Run the Installer**:
+    ```bash
+    opencode-pixel-office install
+    ```
+    This sets up the standalone app in `~/.opencode/pixel-office` and enables the plugin in your `opencode.json`.
+
+3.  **Start OpenCode**:
+    Simply open your IDE. Pixel Office will auto-launch in your browser at `http://localhost:5100`.
+
+### 🛠️ For Developers
+
+If you want to modify the source code or contribute:
+
+#### 1. Clone & Install
+```bash
+git clone https://github.com/your-username/opencode-pixel-office.git
+cd opencode-pixel-office
+npm install
+```
+
+#### 2. Start the Server (Dev Mode)
+```bash
+npm start
+# Server runs on http://localhost:5100, watching for changes
+```
+
+#### 3. Start the Client (Dev Mode)
+In a separate terminal:
+```bash
+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/
+```
+(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
+
+-   **Client Dev**: `npm run dev:client` (Vite dev server)
+-   **Server Dev**: `npm start` (Runs via `tsx`)
+
+## Credits
+-   **Tileset**: [Office Tileset by DonArg](https://donarg.itch.io/officetileset)
+-   **Icons**: Lucide React
+-   **Engine**: PixiJS

package/bin/opencode-pixel-office.js

@@ -0,0 +1,174 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import os from "node:os";
+import { fileURLToPath } from "node:url";
+import readline from "node:readline";
+import { execSync } from "node:child_process";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const PLUGIN_NAME = "pixel-office.js";
+const PLUGIN_ID = "opencode-pixel-office@latest";
+const DEFAULT_PLUGIN_DIR = path.join(os.homedir(), ".opencode", "plugins");
+const DEFAULT_APP_DIR = path.join(os.homedir(), ".opencode", "pixel-office");
+const DEFAULT_CONFIG_PATH = path.join(os.homedir(), ".config", "opencode", "opencode.json");
+const PIXEL_OFFICE_CONFIG_PATH = path.join(DEFAULT_APP_DIR, "config.json");
+
+const args = process.argv.slice(2);
+const shouldInstall = args.includes("install");
+const yesFlag = args.includes("--yes") || args.includes("-y");
+const skipJson = args.includes("--no-json");
+const portIndex = args.findIndex((arg) => arg === "--port");
+const portArg = portIndex !== -1 ? args[portIndex + 1] : null;
+
+const printHelp = () => {
+  console.log("opencode-pixel-office installer\n");
+  console.log("Usage:");
+  console.log("  opencode-pixel-office install [--yes] [--port <number>]");
+  console.log("\nOptions:");
+  console.log("  --port <number> Configure the server port (default: 5100)");
+  console.log("  --no-json       Skip updating opencode.json");
+  console.log("  --yes, -y       Overwrite without prompting");
+};
+
+const prompt = async (question) => {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim().toLowerCase());
+    });
+  });
+};
+
+const copyRecursiveSync = (src, dest) => {
+  const exists = fs.existsSync(src);
+  const stats = exists && fs.statSync(src);
+  const isDirectory = exists && stats.isDirectory();
+  if (isDirectory) {
+    if (!fs.existsSync(dest)) {
+      fs.mkdirSync(dest, { recursive: true });
+    }
+    fs.readdirSync(src).forEach((childItemName) => {
+      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName));
+    });
+  } else if (exists) {
+    fs.copyFileSync(src, dest);
+  }
+};
+
+const run = async () => {
+  if (!shouldInstall) {
+    printHelp();
+    process.exit(0);
+  }
+
+  const rootSource = path.resolve(__dirname, "..");
+  const pluginSource = path.join(rootSource, "plugin", PLUGIN_NAME);
+
+  if (!fs.existsSync(pluginSource)) {
+    console.error(`Plugin file not found: ${pluginSource}`);
+    process.exit(1);
+  }
+
+  // 1. Install Plugin Script
+  fs.mkdirSync(DEFAULT_PLUGIN_DIR, { recursive: true });
+  const targetPluginPath = path.join(DEFAULT_PLUGIN_DIR, PLUGIN_NAME);
+
+  if (fs.existsSync(targetPluginPath) && !yesFlag) {
+    const answer = await prompt(`Overwrite existing ${PLUGIN_NAME}? (y/N): `);
+    if (answer !== "y" && answer !== "yes") {
+      console.log("Aborted.");
+      process.exit(0);
+    }
+  }
+  fs.copyFileSync(pluginSource, targetPluginPath);
+  console.log(`✓ Installed plugin to ${targetPluginPath}`);
+
+  // 2. Install Standalone App (Server + Client)
+  console.log(`Installing standalone app to ${DEFAULT_APP_DIR}...`);
+  if (fs.existsSync(DEFAULT_APP_DIR)) {
+    // rudimentary clean? probably safer to just overwrite
+  } else {
+    fs.mkdirSync(DEFAULT_APP_DIR, { recursive: true });
+  }
+
+  // Copy server
+  console.log("  - Copying server...");
+  copyRecursiveSync(path.join(rootSource, "server"), path.join(DEFAULT_APP_DIR, "server"));
+
+  // Copy client/dist
+  console.log("  - Copying client assets...");
+  const clientDist = path.join(rootSource, "client", "dist");
+  if (fs.existsSync(clientDist)) {
+    copyRecursiveSync(clientDist, path.join(DEFAULT_APP_DIR, "client", "dist"));
+  } else {
+    console.warn("  ! Warning: client/dist not found. Did you run 'npm run build:client'?");
+  }
+
+  // Copy package.json
+  console.log("  - Copying package.json...");
+  fs.copyFileSync(path.join(rootSource, "package.json"), path.join(DEFAULT_APP_DIR, "package.json"));
+
+  // Save Port Config if specified
+  if (portArg) {
+    const port = parseInt(portArg, 10);
+    if (!isNaN(port)) {
+      const configData = { port };
+      fs.writeFileSync(PIXEL_OFFICE_CONFIG_PATH, JSON.stringify(configData, null, 2), "utf8");
+      console.log(`  - Saved port configuration: ${port}`);
+    } else {
+      console.warn("  ! Invalid port number provided. Using default.");
+    }
+  } else if (!fs.existsSync(PIXEL_OFFICE_CONFIG_PATH)) {
+    // Ensure a default config exists or verify if we need one? 
+    // For now, let's leave it minimal. The plugin defaults to 5100.
+  }
+
+  // npm install
+  console.log("  - Installing production dependencies...");
+  try {
+    execSync("npm install --omit=dev --no-package-lock", {
+      cwd: DEFAULT_APP_DIR,
+      stdio: "inherit"
+    });
+  } catch (e) {
+    console.error("  ! Failed to install dependencies:", e.message);
+  }
+
+  console.log(`✓ Standalone app installed to ${DEFAULT_APP_DIR}`);
+
+  await updateConfig();
+  console.log("\nSuccess! Restart OpenCode to launch Pixel Office.");
+};
+
+run().catch((error) => {
+  console.error("Installer failed:", error);
+  process.exit(1);
+});
+
+const updateConfig = async () => {
+  if (skipJson) {
+    return;
+  }
+  if (!fs.existsSync(DEFAULT_CONFIG_PATH)) {
+    return;
+  }
+  try {
+    const raw = fs.readFileSync(DEFAULT_CONFIG_PATH, "utf8");
+    const data = JSON.parse(raw);
+    const list = Array.isArray(data.plugin) ? data.plugin : [];
+    if (!list.includes(PLUGIN_ID)) {
+      data.plugin = [...list, PLUGIN_ID];
+      fs.writeFileSync(DEFAULT_CONFIG_PATH, `${JSON.stringify(data, null, 2)}\n`, "utf8");
+      console.log(`✓ Added ${PLUGIN_ID} to opencode.json`);
+    }
+  } catch (error) {
+    console.warn(`Failed to update ${DEFAULT_CONFIG_PATH}:`, error);
+  }
+};