@rotriz/pi-web-ui 1.0.0

package/README.md

@@ -0,0 +1,62 @@
+# pi-web-ui
+
+A browser-based Web UI for the [Pi coding agent](https://github.com/earendil-works/pi-coding-agent). Provides a full-featured interface for managing sessions, workspaces, git operations, and monitoring agent task progress.
+
+## Features
+
+- **Multi-session management** — Browse, switch, and delete sessions grouped by workspace/project
+- **Parallel tabs** — Run multiple independent agent sessions simultaneously
+- **Git integration** — Branch management, selective staging, commit, push/pull, and diff viewing
+- **Task tracking** — Automatically extracts task plans from agent output and shows completion progress
+- **Workspace switching** — Change working directories with automatic session context switching
+- **Real-time streaming** — SSE-based live updates for agent responses, tool calls, and thinking
+- **Dark/light theme** — System-aware with manual override
+- **Responsive design** — Collapsible sidebar, floating panels
+
+## Installation
+
+### As a Pi extension (recommended)
+
+```bash
+pi install npm:pi-web-ui
+```
+
+Or manually clone into your extensions directory:
+
+```bash
+git clone https://github.com/your-repo/pi-web-ui ~/.pi/agent/extensions/pi-web-ui
+cd ~/.pi/agent/extensions/pi-web-ui && npm install
+```
+
+### Standalone
+
+```bash
+git clone https://github.com/your-repo/pi-web-ui
+cd pi-web-ui && npm install
+node server.mjs
+```
+
+Open `http://localhost:3123` in your browser.
+
+## Configuration
+
+| Environment Variable | Default | Description |
+|---------------------|---------|-------------|
+| `PORT` | `3123` | HTTP server port |
+| `PI_WEB_PI_MODULE` | (auto-detected) | Path to `@earendil-works/pi-coding-agent` if auto-detection fails |
+
+## Requirements
+
+- Node.js 20+
+- `@earendil-works/pi-coding-agent` installed (globally or locally)
+- Git (for git integration features)
+
+## Architecture
+
+- `server.mjs` — Node.js HTTP/SSE server that wraps the Pi SDK runtime
+- `index.html` — Single-file frontend (HTML + CSS + JS, no build step)
+- Dependencies: `marked` (markdown rendering), `dompurify` (HTML sanitization)
+
+## License
+
+MIT

package/extension.mjs

@@ -0,0 +1,107 @@
+// pi-web-ui extension entry point for the Pi coding agent.
+// Registers the /web command and starts the HTTP/SSE gateway.
+//
+// When loaded as a Pi extension (via pi.extensions in package.json),
+// this module receives the Pi ExtensionAPI and bridges the host session
+// into the Web UI server.
+
+import { homedir } from "node:os";
+import { dirname, join } from "node:path";
+import { exec, execFile } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { existsSync } from "node:fs";
+
+const PORT = Number(process.env.PI_WEB_PORT || process.env.PORT || 3123);
+
+function openBrowser(url) {
+  const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+  exec(`${cmd} ${JSON.stringify(url)}`, () => {});
+}
+
+export default function (pi) {
+  let serverProcess = null;
+  let origin = `http://localhost:${PORT}`;
+
+  const extDir = (() => {
+    try {
+      return dirname(fileURLToPath(import.meta.url));
+    } catch {
+      return join(homedir(), ".pi", "agent", "extensions", "pi-web-ui");
+    }
+  })();
+
+  function findNode() {
+    // Use the same Node binary that's running pi
+    return process.execPath;
+  }
+
+  async function ensureServer() {
+    if (serverProcess && !serverProcess.killed) return;
+    const serverPath = join(extDir, "server.mjs");
+    if (!existsSync(serverPath)) {
+      throw new Error(`pi-web-ui server not found at ${serverPath}`);
+    }
+    serverProcess = execFile(findNode(), [serverPath], {
+      cwd: process.cwd(),
+      env: { ...process.env, PORT: String(PORT) },
+      stdio: "ignore",
+    });
+    serverProcess.unref();
+    serverProcess.on("exit", () => { serverProcess = null; });
+    // Wait for the server to be ready
+    for (let i = 0; i < 30; i++) {
+      await new Promise((r) => setTimeout(r, 200));
+      try {
+        const res = await fetch(`${origin}/api/tabs`);
+        if (res.ok) return;
+      } catch {}
+    }
+    throw new Error("pi-web-ui server did not start in time");
+  }
+
+  async function stopServer() {
+    if (serverProcess && !serverProcess.killed) {
+      serverProcess.kill();
+      serverProcess = null;
+    }
+  }
+
+  // ── Lifecycle ────────────────────────────────────────────────────────
+  pi.on("session_start", async (_event, ctx) => {
+    try {
+      await ensureServer();
+    } catch (err) {
+      ctx.ui?.notify?.(`pi-web-ui could not start: ${err?.message ?? err}`, "error");
+    }
+  });
+
+  pi.on("session_shutdown", async (event) => {
+    if (event.reason === "reload" || event.reason === "quit") {
+      await stopServer();
+    }
+  });
+
+  // ── Commands ─────────────────────────────────────────────────────────
+  pi.registerCommand("web", {
+    description: "Open the Pi Web UI (pass `stop` to shut down)",
+    getArgumentCompletions: (prefix) => {
+      const items = ["stop"].map((value) => ({ value, label: value }));
+      return items.some((item) => item.value.startsWith(prefix)) ? items : null;
+    },
+    handler: async (args, ctx) => {
+      const arg = String(args ?? "").trim().toLowerCase();
+      if (arg === "stop") {
+        await stopServer();
+        ctx.ui?.notify?.("pi-web-ui stopped", "info");
+        return;
+      }
+      try {
+        await ensureServer();
+        openBrowser(origin);
+        ctx.ui?.notify?.(`pi-web-ui → ${origin}`, "info");
+      } catch (err) {
+        ctx.ui?.notify?.(`pi-web-ui failed to start: ${err?.message ?? err}`, "error");
+      }
+    },
+  });
+}