opencode-pixel-office 1.0.7 → 1.0.9

package/README.md

@@ -15,7 +15,7 @@ The system consists of three main parts:
 
 ```mermaid
 graph TD
-    A[OpenCode IDE] -->|Plugin Events via HTTP| B(Pixel Office Server :5100)
+    A[OpenCode IDE] -->|Plugin Events via HTTP| B(Pixel Office Server :3000)
     B -->|Broadcast State via WebSocket| C[React Client]
     C -->|Render| D[PixiJS Scene]
     C -->|Render| E[HUD / Sidebar]
@@ -92,7 +92,7 @@ Monitor your agents from your phone or tablet!
     This sets up the standalone app in `~/.opencode/pixel-office` and installs the `pixel-office.js` plugin script to `~/.opencode/plugins/`.
 
 3.  **Start OpenCode**:
-    Simply open your IDE. Pixel Office will auto-launch in your browser at `http://localhost:5100`.
+    Simply open your IDE. Pixel Office will auto-launch in your browser at `http://localhost:3000`.
 
 ### CLI Commands
 
@@ -114,7 +114,7 @@ npm install
 #### 2. Start the Server (Dev Mode)
 ```bash
 npm start
-# Server runs on http://localhost:5100, watching for changes
+# Server runs on http://localhost:3000, watching for changes
 ```
 
 #### 3. Start the Client (Dev Mode)

package/bin/claude-code-hook.js

@@ -0,0 +1,134 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import os from "node:os";
+
+const readStdin = async () => {
+  const chunks = [];
+  for await (const chunk of process.stdin) {
+    chunks.push(chunk);
+  }
+  return Buffer.concat(chunks).toString("utf8");
+};
+
+const postEvent = async (endpoint, event) => {
+  try {
+    await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      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`);
+  }
+};
+
+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 mapHookToEvent = (input) => {
+  const hook = input.hook_event_name || "";
+  const sessionId = input.session_id || "";
+  const cwd = input.cwd || "";
+  const toolName = input.tool_name || "";
+  const toolInput = input.tool_input || {};
+  const prompt = input.prompt || input.user_prompt || "";
+  const permission = input.permission || {};
+
+  const info = {
+    id: sessionId || `claude-${Date.now()}`,
+    sessionID: sessionId || "",
+    role: "user",
+  };
+
+  switch (hook) {
+    case "SessionStart":
+      return {
+        type: "session.created",
+        properties: { info: { id: sessionId, title: cwd } },
+      };
+    case "SessionEnd":
+      return {
+        type: "session.deleted",
+        properties: { sessionID: sessionId },
+      };
+    case "UserPromptSubmit":
+      return {
+        type: "message.updated",
+        properties: {
+          info,
+          message: { content: prompt },
+        },
+      };
+    case "PreToolUse":
+      return {
+        type: "tool.execute.before",
+        properties: { tool: { name: toolName, input: toolInput } },
+      };
+    case "PostToolUse":
+    case "PostToolUseFailure":
+      return {
+        type: "tool.execute.after",
+        properties: { tool: { name: toolName, input: toolInput } },
+      };
+    case "PermissionRequest":
+      return {
+        type: "permission.asked",
+        properties: { permission },
+      };
+    case "Notification":
+      return {
+        type: "tui.toast.show",
+        properties: { message: input.message || "" },
+      };
+    case "PreCompact":
+      return {
+        type: "session.compacted",
+        properties: { info: { id: sessionId } },
+      };
+    case "Stop":
+      return {
+        type: "session.status",
+        properties: { sessionID: sessionId, status: { type: "idle" } },
+      };
+    case "SubagentStart":
+    case "SubagentStop":
+      return {
+        type: "session.updated",
+        properties: { info: { id: sessionId } },
+      };
+    default:
+      return null;
+  }
+};
+
+const main = async () => {
+  const raw = await readStdin();
+  if (!raw) {
+    process.exit(0);
+  }
+  const input = JSON.parse(raw);
+  const endpoint = process.env.PIXEL_OFFICE_URL || "http://localhost:3000/events";
+  if (readMode() !== "claude-code") {
+    process.exit(0);
+  }
+  const event = mapHookToEvent(input);
+  if (!event) {
+    process.exit(0);
+  }
+  await postEvent(endpoint, event);
+  process.exit(0);
+};
+
+main().catch(() => process.exit(0));

package/bin/opencode-pixel-office.js

@@ -17,8 +17,12 @@ const DEFAULT_CONFIG_PATH = path.join(os.homedir(), ".config", "opencode", "open
 const PIXEL_OFFICE_CONFIG_PATH = path.join(DEFAULT_APP_DIR, "config.json");
 
 const args = process.argv.slice(2);
-const shouldInstall = args.includes("install");
+const shouldInstall = args.includes("install") && !args.includes("claude-code") && !args.includes("switch");
+const shouldInstallClaude = args[0] === "claude-code" && args[1] === "install";
+const shouldSwitch = args[0] === "switch";
+const switchTarget = shouldSwitch ? args[1] : null;
 const shouldUninstall = args.includes("uninstall");
+const shouldStart = args[0] === "start";
 const yesFlag = args.includes("--yes") || args.includes("-y");
 const skipJson = args.includes("--no-json");
 const portIndex = args.findIndex((arg) => arg === "--port");
@@ -28,14 +32,62 @@ const printHelp = () => {
   console.log("opencode-pixel-office installer\n");
   console.log("Usage:");
   console.log("  opencode-pixel-office install [--yes] [--port <number>]");
+  console.log("  opencode-pixel-office claude-code install");
+  console.log("  opencode-pixel-office switch <opencode|claude-code>");
+  console.log("  opencode-pixel-office start");
   console.log("  opencode-pixel-office uninstall");
   console.log("  opencode-pixel-office stop");
   console.log("\nOptions:");
-  console.log("  --port <number> Configure the server port (default: 5100)");
+  console.log("  --port <number> Configure the server port (default: 3000)");
   console.log("  --no-json       Skip updating opencode.json");
   console.log("  --yes, -y       Overwrite without prompting");
 };
 
+const installClaudeCodeHooks = () => {
+  const claudeDir = path.join(os.homedir(), ".claude");
+  const hookDir = path.join(claudeDir, "hooks");
+  const settingsPath = path.join(claudeDir, "settings.json");
+  fs.mkdirSync(hookDir, { recursive: true });
+
+  const hookSource = path.resolve(__dirname, "claude-code-hook.js");
+  const hookTarget = path.join(hookDir, "opencode-pixel-office-hook.js");
+  fs.copyFileSync(hookSource, hookTarget);
+
+  const hookCommand = `node ${hookTarget}`;
+  const hooksConfig = {
+    SessionStart: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    UserPromptSubmit: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    PreToolUse: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    PostToolUse: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    PostToolUseFailure: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    PermissionRequest: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    Notification: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    SubagentStart: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    SubagentStop: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    Stop: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    PreCompact: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+    SessionEnd: [{ matcher: "", hooks: [{ type: "command", command: hookCommand }] }],
+  };
+
+  let settings = { hooks: {} };
+  if (fs.existsSync(settingsPath)) {
+    try {
+      settings = JSON.parse(fs.readFileSync(settingsPath, "utf8"));
+    } catch {
+      settings = { hooks: {} };
+    }
+  }
+
+  settings.hooks = settings.hooks || {};
+  Object.entries(hooksConfig).forEach(([eventName, value]) => {
+    settings.hooks[eventName] = value;
+  });
+
+  fs.writeFileSync(settingsPath, `${JSON.stringify(settings, null, 2)}\n`, "utf8");
+  console.log(`✓ Installed Claude Code hooks into ${settingsPath}`);
+  console.log("Claude Code will now stream events to Pixel Office.");
+};
+
 const loadConfig = () => {
   try {
     if (fs.existsSync(PIXEL_OFFICE_CONFIG_PATH)) {
@@ -45,6 +97,11 @@ const loadConfig = () => {
   return {};
 };
 
+const saveConfig = (config) => {
+  fs.mkdirSync(DEFAULT_APP_DIR, { recursive: true });
+  fs.writeFileSync(PIXEL_OFFICE_CONFIG_PATH, JSON.stringify(config, null, 2), "utf8");
+};
+
 const prompt = async (question) => {
   const rl = readline.createInterface({
     input: process.stdin,
@@ -75,6 +132,23 @@ const copyRecursiveSync = (src, dest) => {
 };
 
 const run = async () => {
+  if (shouldSwitch) {
+    if (switchTarget !== "opencode" && switchTarget !== "claude-code") {
+      console.error("Switch target must be 'opencode' or 'claude-code'.");
+      process.exit(1);
+    }
+    const config = loadConfig();
+    config.mode = switchTarget;
+    saveConfig(config);
+    console.log(`✓ Mode set to ${switchTarget}`);
+    process.exit(0);
+  }
+
+  if (shouldInstallClaude) {
+    installClaudeCodeHooks();
+    process.exit(0);
+  }
+
   if (shouldUninstall) {
     const targetPluginPath = path.join(DEFAULT_PLUGIN_DIR, PLUGIN_NAME);
 
@@ -116,9 +190,69 @@ const run = async () => {
     process.exit(0);
   }
 
+  if (shouldStart) {
+    const config = loadConfig();
+    const port = portArg ? parseInt(portArg, 10) : (config.port || 3000);
+    const serverScript = "server/index.ts";
+
+    const rootSource = path.resolve(__dirname, "..");
+    const localServerPath = path.join(rootSource, "server", "index.ts");
+    const globalServerPath = path.join(DEFAULT_APP_DIR, "server", "index.ts");
+
+    let serverCwd;
+    let useGlobal = false;
+    if (fs.existsSync(localServerPath)) {
+      serverCwd = rootSource;
+    } else if (fs.existsSync(globalServerPath)) {
+      serverCwd = DEFAULT_APP_DIR;
+      useGlobal = true;
+    } else {
+      console.error("Server not found. Run 'opencode-pixel-office install' first.");
+      process.exit(1);
+    }
+
+    try {
+      const pidOutput = execSync(`lsof -t -i :${port} 2>/dev/null`).toString().trim();
+      if (pidOutput) {
+        console.log(`Pixel Office is already running on port ${port} (PID: ${pidOutput})`);
+        const url = `http://localhost:${port}`;
+        const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+        try { execSync(`${openCmd} ${url}`); } catch { }
+        console.log(`Opened ${url}`);
+        process.exit(0);
+      }
+    } catch { }
+
+    let tsxBin = "tsx";
+    if (useGlobal) {
+      const globalTsx = path.join(serverCwd, "node_modules", ".bin", "tsx");
+      if (fs.existsSync(globalTsx)) {
+        tsxBin = globalTsx;
+      }
+    }
+
+    const { spawn } = await import("node:child_process");
+    const child = spawn(tsxBin, [serverScript], {
+      cwd: serverCwd,
+      env: { ...process.env, PORT: String(port) },
+      detached: true,
+      stdio: "ignore",
+    });
+    child.unref();
+
+    console.log(`Pixel Office server started on port ${port} (PID: ${child.pid})`);
+
+    await new Promise((r) => setTimeout(r, 1500));
+    const url = `http://localhost:${port}`;
+    const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+    try { execSync(`${openCmd} ${url}`); } catch { }
+    console.log(`Opened ${url}`);
+    process.exit(0);
+  }
+
   if (args.includes("stop")) {
     const config = loadConfig();
-    const port = config.port || 5100;
+    const port = config.port || 3000;
 
     console.log(`Stopping Pixel Office server on port ${port}...`);
     try {
@@ -198,19 +332,20 @@ const run = async () => {
   fs.copyFileSync(path.join(rootSource, "package.json"), path.join(DEFAULT_APP_DIR, "package.json"));
 
   // Save Port Config if specified
+  const configData = loadConfig();
   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");
+      configData.port = port;
       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.
   }
+  if (!configData.mode) {
+    configData.mode = "opencode";
+  }
+  saveConfig(configData);
 
   // npm install
   console.log("  - Installing production dependencies...");
@@ -232,6 +367,3 @@ run().catch((error) => {
   console.error("Installer failed:", error);
   process.exit(1);
 });
-
-
-