pi-web-ui 0.1.1

package/dist/server/index.js

@@ -0,0 +1,214 @@
+/**
+ * pi-web-ui server entry.
+ *
+ * - Serves the built frontend (web/dist) in production; in dev, Vite serves it
+ *   on :5173 and proxies /ws to this server.
+ * - Exposes /api/health and a WebSocket endpoint at /ws carrying the chat
+ *   protocol defined in protocol.ts.
+ *
+ * Env:
+ *   PORT            HTTP port (default 8787)
+ *   PI_WEB_CWD      workspace the agent operates in (default: process.cwd())
+ *   PI_WEB_DATA_DIR where per-client session dirs are stored (default: <cwd>/.pi-web)
+ *   PI_CODING_AGENT_DIR  pi config dir (auth/models/skills) — passed to the SDK
+ */
+import { existsSync } from "node:fs";
+import { createServer } from "node:http";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { randomUUID } from "node:crypto";
+import express from "express";
+import { WebSocket, WebSocketServer } from "ws";
+import { VERSION } from "@earendil-works/pi-coding-agent";
+import { AgentService } from "./agent-service.js";
+const PORT = Number(process.env.PORT ?? 8787);
+const CWD = resolve(process.env.PI_WEB_CWD ?? process.cwd());
+const DATA_DIR = resolve(process.env.PI_WEB_DATA_DIR ?? join(CWD, ".pi-web"));
+const SESSION_DIR_ROOT = join(DATA_DIR, "sessions");
+const app = express();
+app.use(express.json({ limit: "10mb" }));
+app.get("/api/health", (_req, res) => {
+    res.json({ ok: true, piVersion: VERSION, cwd: CWD, pid: process.pid });
+});
+// Production: serve the built frontend from web/dist. Resolve relative to this
+// module so it works when installed as a package (global/npx/Docker), not just
+// from the repo root. In dev, Vite serves the UI on :5173 and proxies /ws.
+const here = dirname(fileURLToPath(import.meta.url)); // <pkg>/dist/server or <pkg>/server
+const pkgRoot = resolve(here, "..", "..");
+const webDist = join(pkgRoot, "web", "dist");
+if (existsSync(webDist)) {
+    app.use(express.static(webDist));
+    app.get(/^\/(?!api\/|ws).*/, (_req, res) => {
+        res.sendFile(join(webDist, "index.html"));
+    });
+}
+const httpServer = createServer(app);
+const wss = new WebSocketServer({ server: httpServer, path: "/ws" });
+// Heartbeat: lets clients detect half-open connections (server killed without
+// closing sockets, sleep/wake, network partitions). Idle connections otherwise
+// carry no traffic and TCP keepalive defaults are far too slow (~2h).
+const heartbeatTimer = setInterval(() => {
+    for (const ws of wss.clients) {
+        if (ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: "heartbeat" }));
+        }
+    }
+}, 10_000);
+const service = new AgentService(CWD, SESSION_DIR_ROOT);
+wss.on("connection", (ws) => {
+    let clientId = null;
+    let closed = false;
+    /** Commands received while the session is still being created — replayed after attach. */
+    let pending = [];
+    const send = (msg) => {
+        if (!closed && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify(msg));
+        }
+    };
+    const dispatch = (msg) => {
+        if (!clientId) {
+            pending.push(msg);
+            return;
+        }
+        const cs = service.get(clientId);
+        if (!cs) {
+            // Session not ready yet (hello processing) — hold the command.
+            pending.push(msg);
+            return;
+        }
+        switch (msg.type) {
+            case "prompt":
+                void cs.prompt(msg.text, msg.attachments);
+                break;
+            case "abort":
+                void cs.abort();
+                break;
+            case "new_chat":
+                void cs.newChat();
+                break;
+            case "cycle_model":
+                void cs.cycleModel();
+                break;
+            case "cycle_thinking":
+                cs.cycleThinking();
+                break;
+            case "get_state":
+                cs.flushSnapshot();
+                break;
+            case "list_sessions":
+                void cs.refreshSessions();
+                break;
+            case "switch_session":
+                void cs.switchSession(msg.path);
+                break;
+            case "list_files":
+                void cs.listFiles(msg.path);
+                break;
+            case "list_models":
+                void cs.listModels();
+                break;
+            case "set_model":
+                void cs.setModel(msg.modelId);
+                break;
+            case "set_thinking":
+                cs.setThinking(msg.level);
+                break;
+            case "set_cwd":
+                void cs.setCwd(msg.path);
+                break;
+            case "complete_path":
+                void cs.completePath(msg.path);
+                break;
+            case "dialog_response":
+                cs.resolveDialog(msg.id, msg.value);
+                break;
+            case "terminal_create":
+                cs.terminals.create(msg.terminalId, msg.cwd, msg.cols, msg.rows, cs.cwd);
+                break;
+            case "terminal_input":
+                cs.terminals.input(msg.terminalId, msg.data);
+                break;
+            case "terminal_resize":
+                cs.terminals.resize(msg.terminalId, msg.cols, msg.rows);
+                break;
+            case "terminal_kill":
+                cs.terminals.kill(msg.terminalId);
+                break;
+            case "run_command":
+                cs.terminals.runCommand(msg.terminalId, msg.command, msg.cols, msg.rows, cs.cwd);
+                break;
+            case "list_commands":
+                void cs.listCommands();
+                break;
+            case "save_commands":
+                void cs.saveCommands(msg.commands);
+                break;
+            default:
+                break;
+        }
+    };
+    ws.on("message", (data) => {
+        let msg;
+        try {
+            msg = JSON.parse(data.toString());
+        }
+        catch {
+            return;
+        }
+        if (msg.type === "hello") {
+            const cid = msg.clientId || randomUUID();
+            clientId = cid;
+            service
+                .attach(cid, send)
+                .then((cs) => {
+                if (closed)
+                    return;
+                send({ type: "ready", clientId: cid, serverVersion: VERSION });
+                cs.flushSnapshot();
+                // Replay anything that arrived while the session was starting.
+                const queued = pending;
+                pending = [];
+                for (const m of queued)
+                    dispatch(m);
+            })
+                .catch((err) => {
+                send({
+                    type: "notice",
+                    level: "error",
+                    text: `会话初始化失败：${err.message}`,
+                });
+            });
+            return;
+        }
+        dispatch(msg);
+    });
+    ws.on("close", () => {
+        closed = true;
+        pending = [];
+        if (clientId)
+            service.detach(clientId, send);
+    });
+});
+httpServer.listen(PORT, () => {
+    console.log("");
+    console.log("  ⚡ pi-web-ui — web chat for the pi coding agent");
+    console.log(`    http://localhost:${PORT}`);
+    console.log(`    workspace   : ${CWD}`);
+    console.log(`    session dir : ${SESSION_DIR_ROOT}`);
+    console.log(`    pi SDK      : v${VERSION}`);
+    console.log("");
+});
+let shuttingDown = false;
+async function shutdown() {
+    if (shuttingDown)
+        return;
+    shuttingDown = true;
+    console.log("\nshutting down…");
+    clearInterval(heartbeatTimer);
+    await service.disposeAll();
+    wss.close();
+    httpServer.close();
+    process.exit(0);
+}
+process.on("SIGINT", () => void shutdown());
+process.on("SIGTERM", () => void shutdown());

package/dist/server/protocol.js

@@ -0,0 +1,6 @@
+/**
+ * Wire protocol between the browser client and the pi-web-ui server.
+ * Pure JSON over WebSocket. The web frontend mirrors these types in
+ * web/src/types.ts (kept in sync by hand — types only, no shared runtime code).
+ */
+export {};

package/dist/server/serialize.js

@@ -0,0 +1,157 @@
+const TEXT_CAP = 200_000;
+const TOOL_OUTPUT_CAP = 100_000;
+const ARGS_CAP = 20_000;
+function truncate(s, cap) {
+    if (s.length <= cap)
+        return { text: s, truncated: false };
+    return { text: `${s.slice(0, cap)}\n\n… [truncated]`, truncated: true };
+}
+function serializeUserContent(content) {
+    if (typeof content === "string")
+        return [{ type: "text", text: content }];
+    return content.map((b) => {
+        if (b.type === "image") {
+            const img = b;
+            // Canonical ImageContent shape is { type, data, mimeType }; tolerate the
+            // legacy { source } wrapper too.
+            if (typeof img.data === "string" && img.data.length > 0) {
+                return {
+                    type: "image",
+                    dataUrl: `data:${img.mimeType ?? "image/png"};base64,${img.data}`,
+                    mimeType: img.mimeType,
+                };
+            }
+            const src = img.source;
+            if (src?.type === "base64" && src.data) {
+                return {
+                    type: "image",
+                    dataUrl: `data:${src.mediaType ?? "image/png"};base64,${src.data}`,
+                    mimeType: src.mediaType,
+                };
+            }
+            return { type: "image", dataUrl: src?.url };
+        }
+        return { type: "text", text: String(b.text ?? "") };
+    });
+}
+function serializeAssistantContent(content) {
+    return content.map((b) => {
+        if (b.type === "text") {
+            const { text, truncated } = truncate(b.text, TEXT_CAP);
+            return { type: "text", text, truncated };
+        }
+        if (b.type === "thinking") {
+            return { type: "thinking", thinking: b.thinking };
+        }
+        if (b.type === "toolCall") {
+            if (b.arguments === undefined) {
+                return { type: "toolCall", id: b.id, name: b.name };
+            }
+            const { text, truncated } = truncate(JSON.stringify(b.arguments), ARGS_CAP);
+            return {
+                type: "toolCall",
+                id: b.id,
+                name: b.name,
+                argumentsText: text,
+                argumentsTruncated: truncated,
+            };
+        }
+        return { type: "unknown", ...b };
+    });
+}
+export function serializeMessage(m, seq) {
+    switch (m.role) {
+        case "user":
+            return {
+                id: `u-${m.timestamp}-${seq}`,
+                role: "user",
+                content: serializeUserContent(m.content),
+                timestamp: m.timestamp,
+            };
+        case "assistant":
+            return {
+                id: `a-${m.timestamp}-${seq}`,
+                role: "assistant",
+                content: serializeAssistantContent(m.content),
+                timestamp: m.timestamp,
+                model: m.model,
+                provider: m.provider,
+                stopReason: m.stopReason,
+                errorMessage: m.errorMessage,
+            };
+        case "toolResult": {
+            const raw = m.content
+                .map((c) => (c.type === "text" ? c.text : "[image result]"))
+                .join("\n");
+            const { text, truncated } = truncate(raw, TOOL_OUTPUT_CAP);
+            return {
+                id: `t-${m.toolCallId}`,
+                role: "toolResult",
+                content: [{ type: "text", text, truncated }],
+                toolCallId: m.toolCallId,
+                toolName: m.toolName,
+                isError: m.isError,
+                timestamp: m.timestamp,
+            };
+        }
+        case "bashExecution": {
+            const { text, truncated } = truncate(m.output, TOOL_OUTPUT_CAP);
+            return {
+                id: `b-${m.timestamp}-${seq}`,
+                role: "bashExecution",
+                content: [
+                    {
+                        type: "bash",
+                        command: m.command,
+                        output: text,
+                        exitCode: m.exitCode,
+                        cancelled: m.cancelled,
+                        truncated,
+                    },
+                ],
+                timestamp: m.timestamp,
+            };
+        }
+        case "custom": {
+            // Third-party extension messages with display:false are UI-hidden
+            // (they still go into LLM context — the SDK handles that).
+            if (m.display === false) {
+                return null;
+            }
+            const content = serializeUserContent(m.content);
+            return {
+                id: `c-${m.timestamp}-${seq}`,
+                role: "custom",
+                content,
+                customType: m.customType,
+                details: m.details,
+                timestamp: m.timestamp,
+            };
+        }
+        case "branchSummary": {
+            const { text, truncated } = truncate(m.summary, TEXT_CAP);
+            return {
+                id: `bs-${m.timestamp}-${seq}`,
+                role: "branchSummary",
+                content: [{ type: "text", text, truncated }],
+                timestamp: m.timestamp,
+            };
+        }
+        case "compactionSummary": {
+            const { text, truncated } = truncate(m.summary, TEXT_CAP);
+            return {
+                id: `cs-${m.timestamp}-${seq}`,
+                role: "compactionSummary",
+                content: [{ type: "text", text, truncated }],
+                timestamp: m.timestamp,
+            };
+        }
+        default:
+            return {
+                id: `x-${seq}`,
+                role: String(m.role ?? "unknown"),
+                content: [],
+                timestamp: m.timestamp,
+            };
+    }
+}

package/dist/server/terminals.js

@@ -0,0 +1,286 @@
+/**
+ * TerminalManager — per-client PTY sessions (node-pty) bridged over the
+ * WebSocket protocol, plus the user command list persisted in
+ * `<workspaceRoot>/.pi/commands.json`.
+ *
+ * Each browser client gets its own manager; terminals are shared across that
+ * client's tabs (they broadcast through the session's emit). When the last
+ * socket for a client detaches, all its PTYs are killed so no orphaned
+ * processes survive a closed tab / dropped connection.
+ *
+ * Commands file format:
+ *   { "commands": [ { "name": "dev", "command": "npm run dev", "cwd": "${pwd}" } ] }
+ * `${pwd}` inside cwd/command resolves to the agent session's current working
+ * directory (the same directory the agent operates in — see set_cwd).
+ */
+import { existsSync } from "node:fs";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import { isAbsolute, join, resolve } from "node:path";
+import { spawn } from "node-pty";
+/** Location of the command list for a project: <workspaceRoot>/.pi/commands.json */
+export function commandsFilePath(workspaceRoot) {
+    return join(workspaceRoot, ".pi", "commands.json");
+}
+/** Expand ${pwd} (and ~) in a cwd/command string against the session's cwd. */
+export function expandPwd(input, pwd) {
+    let out = input.replace(/\$\{pwd\}/g, pwd);
+    if (out === "~")
+        return homedir();
+    if (out.startsWith("~/"))
+        out = join(homedir(), out.slice(2));
+    return out;
+}
+/** Resolve a command's directory: default to the session cwd, expand ${pwd}/~, resolve relative paths. */
+export function resolveCommandCwd(cwd, pwd) {
+    if (!cwd || cwd.trim() === "")
+        return pwd;
+    const expanded = expandPwd(cwd.trim(), pwd);
+    return isAbsolute(expanded) ? expanded : resolve(pwd, expanded);
+}
+/** Read the command list; missing file → empty list; malformed → empty list + warning text. */
+export async function loadCommands(workspaceRoot) {
+    const path = commandsFilePath(workspaceRoot);
+    const { commands, warning } = await readCommandsFile(path);
+    return { commands, path, warning };
+}
+async function readCommandsFile(path) {
+    if (!existsSync(path))
+        return { commands: [] };
+    let raw;
+    try {
+        raw = await readFile(path, "utf8");
+    }
+    catch (err) {
+        return {
+            commands: [],
+            warning: `读取命令文件失败：${err.message}`,
+        };
+    }
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    }
+    catch {
+        return { commands: [], warning: `命令文件不是有效 JSON：${path}` };
+    }
+    if (Array.isArray(parsed)) {
+        // Tolerate a bare array: [{name, command, cwd}]
+        return {
+            commands: parsed
+                .filter((c) => typeof c === "object" &&
+                c !== null &&
+                typeof c.name === "string" &&
+                typeof c.command === "string")
+                .map((c) => ({ name: c.name, command: c.command, cwd: c.cwd })),
+        };
+    }
+    const obj = parsed;
+    if (obj && Array.isArray(obj.commands)) {
+        return {
+            commands: obj.commands
+                .filter((c) => typeof c === "object" &&
+                c !== null &&
+                typeof c.name === "string" &&
+                typeof c.command === "string")
+                .map((c) => ({ name: c.name, command: c.command, cwd: c.cwd })),
+        };
+    }
+    return { commands: [], warning: `命令文件格式不正确：${path}` };
+}
+/** Persist the command list, creating .pi/ if needed. */
+export async function saveCommandsFile(workspaceRoot, commands) {
+    const path = commandsFilePath(workspaceRoot);
+    try {
+        await mkdir(join(workspaceRoot, ".pi"), { recursive: true });
+        const payload = { commands };
+        await writeFile(path, JSON.stringify(payload, null, 2) + "\n", "utf8");
+        return { path };
+    }
+    catch (err) {
+        return { path, error: `保存命令文件失败：${err.message}` };
+    }
+}
+const SHELL = process.env.SHELL || "bash";
+const SHELL_ARGS = ["-i"];
+/**
+ * Owns one or more PTYs for a client. All output is forwarded as
+ * `terminal_output` messages through the provided emit (broadcast to every
+ * socket of the client). Returns false from create/runCommand when the spawn
+ * failed (an error notice + terminal_exit are emitted instead).
+ */
+export class TerminalManager {
+    emit;
+    terms = new Map();
+    seq = 0;
+    constructor(emit) {
+        this.emit = emit;
+    }
+    /** Start a plain interactive shell in the given directory. */
+    create(id, cwd, cols, rows, fallbackCwd) {
+        if (this.terms.has(id))
+            return;
+        this.spawnShell(id, cwd || fallbackCwd, cols, rows, `终端 ${++this.seq}`);
+    }
+    /**
+     * Start a shell in the command's directory and run the command in it.
+     *
+     * If a terminal with this id already exists it is RESTARTED in place: the
+     * running process is killed and a fresh shell runs the command again in the
+     * same terminal (used when re-running a command by clicking its entry).
+     */
+    runCommand(id, def, cols, rows, pwd) {
+        const dir = resolveCommandCwd(def.cwd, pwd);
+        const command = expandPwd(def.command.trim(), pwd);
+        const title = def.name || command || `终端 ${++this.seq}`;
+        const existing = this.terms.get(id);
+        if (existing) {
+            // Re-run in place: interrupt the current process (kill the PTY's
+            // process group) and start a fresh shell with the same id. Keep the
+            // last known size so the replacement matches the xterm's dimensions.
+            if (!existing.exited) {
+                existing.exited = true;
+                try {
+                    existing.pty.kill();
+                }
+                catch {
+                    // already dead
+                }
+            }
+            cols = existing.cols || cols;
+            rows = existing.rows || rows;
+            this.terms.delete(id);
+        }
+        const ok = this.spawnShell(id, dir, cols, rows, title);
+        if (!ok)
+            return;
+        // Clear the previous run's output, then show a banner and run the command
+        // (the PTY input buffer holds it until the shell is ready).
+        this.writeOut(id, "\x1b[2J\x1b[3J\x1b[H");
+        this.writeOut(id, `\x1b[90m> ${command}\x1b[0m  \x1b[90m(${dir})\x1b[0m\r\n`);
+        if (command)
+            this.input(id, command + "\r");
+    }
+    /** Spawn the user's shell as a PTY. Returns false when the spawn failed. */
+    spawnShell(id, cwd, cols, rows, title) {
+        let abs = cwd;
+        if (!abs)
+            abs = homedir();
+        else if (!isAbsolute(abs))
+            abs = resolve(abs);
+        if (!existsSync(abs)) {
+            this.fail(id, `目录不存在：${abs}`);
+            return false;
+        }
+        let pty;
+        try {
+            pty = spawn(SHELL, SHELL_ARGS, {
+                name: "xterm-256color",
+                cols: Math.max(2, Math.floor(cols) || 80),
+                rows: Math.max(2, Math.floor(rows) || 24),
+                cwd: abs,
+                env: { ...process.env, TERM: "xterm-256color" },
+            });
+        }
+        catch (err) {
+            this.fail(id, `启动终端失败：${err.message}`);
+            return false;
+        }
+        const entry = {
+            id,
+            pty,
+            title,
+            cwd: abs,
+            cols: Math.max(2, Math.floor(cols) || 80),
+            rows: Math.max(2, Math.floor(rows) || 24),
+            exited: false,
+        };
+        this.terms.set(id, entry);
+        // The closures capture `entry`: after a restart the map points at the
+        // replacement, so a late event from the OLD pty must be ignored.
+        pty.onData((data) => {
+            if (this.terms.get(id) !== entry)
+                return;
+            this.writeOut(id, data);
+        });
+        pty.onExit(({ exitCode }) => {
+            if (this.terms.get(id) !== entry)
+                return;
+            this.exit(id, exitCode);
+        });
+        return true;
+    }
+    writeOut(id, data) {
+        const entry = this.terms.get(id);
+        if (!entry || entry.exited)
+            return;
+        this.emit({ type: "terminal_output", terminalId: id, data });
+    }
+    /** Emit a terminal failure (bad cwd, spawn error) and mark the terminal dead. */
+    fail(id, text) {
+        this.emit({ type: "notice", level: "error", text });
+        this.emit({
+            type: "terminal_output",
+            terminalId: id,
+            data: `\x1b[91m${text}\x1b[0m\r\n`,
+        });
+        this.emit({ type: "terminal_exit", terminalId: id, exitCode: null });
+    }
+    exit(id, exitCode) {
+        const entry = this.terms.get(id);
+        if (!entry || entry.exited)
+            return;
+        entry.exited = true;
+        this.writeOut(id, `\r\n\x1b[90m[进程已退出，退出码 ${exitCode}]\x1b[0m\r\n`);
+        this.emit({ type: "terminal_exit", terminalId: id, exitCode });
+    }
+    input(id, data) {
+        const entry = this.terms.get(id);
+        if (entry && !entry.exited)
+            entry.pty.write(data);
+    }
+    resize(id, cols, rows) {
+        const entry = this.terms.get(id);
+        if (!entry || entry.exited)
+            return;
+        try {
+            entry.pty.resize(Math.max(2, Math.floor(cols) || 80), Math.max(2, Math.floor(rows) || 24));
+            // Remember the size so an in-place restart spawns at the same dims.
+            entry.cols = Math.max(2, Math.floor(cols) || 80);
+            entry.rows = Math.max(2, Math.floor(rows) || 24);
+        }
+        catch {
+            // PTY already gone — nothing to do.
+        }
+    }
+    /** Kill one terminal (tab closed). The exit event is emitted by node-pty. */
+    kill(id) {
+        const entry = this.terms.get(id);
+        if (!entry || entry.exited)
+            return;
+        entry.exited = true;
+        try {
+            entry.pty.kill();
+        }
+        catch {
+            // already dead
+        }
+        this.terms.delete(id);
+        this.emit({ type: "terminal_exit", terminalId: id, exitCode: null });
+    }
+    /** Kill every terminal of this client (disconnect / dispose). */
+    killAll() {
+        for (const entry of this.terms.values()) {
+            if (entry.exited)
+                continue;
+            entry.exited = true;
+            try {
+                entry.pty.kill();
+            }
+            catch {
+                // already dead
+            }
+        }
+        this.terms.clear();
+    }
+}