pi-web-ui 0.2.15 → 0.4.0

package/dist/server/agent-service.js

@@ -10,8 +10,8 @@
  * so reconnects just re-request a snapshot.
  */
 import { spawn } from "node:child_process";
-import { existsSync, readFileSync, writeFileSync, mkdirSync } from "node:fs";
-import { join } from "node:path";
+import { existsSync, readFileSync, statSync, writeFileSync, mkdirSync, } from "node:fs";
+import { dirname, join } from "node:path";
 import { createAgentSessionFromServices, createAgentSessionRuntime, createAgentSessionServices, getAgentDir, SessionManager, } from "@earendil-works/pi-coding-agent";
 import { serializeMessage, serializeStreamingMessage, } from "./serialize.js";
 import { loadCommands, saveCommandsFile, TerminalManager, } from "./terminals.js";
@@ -20,6 +20,163 @@ const WIDGET_REFRESH_MS = 2000;
 const WIDGET_WIDTH = 80;
 /** Preview panel cap: only the first 512KB of a file is ever read/sent. */
 const MAX_PREVIEW_BYTES = 512 * 1024;
+const PREVIEW_IMAGE_EXTS = new Set([
+    "png",
+    "jpg",
+    "jpeg",
+    "gif",
+    "webp",
+    "svg",
+    "bmp",
+    "ico",
+    "avif",
+    "jfif",
+    "tif",
+    "tiff",
+]);
+const PREVIEW_VIDEO_EXTS = new Set([
+    "mp4",
+    "webm",
+    "mov",
+    "mkv",
+    "avi",
+    "m4v",
+    "ogv",
+    "mpg",
+    "mpeg",
+    "wmv",
+    "flv",
+]);
+const PREVIEW_TEXT_EXTS = new Set([
+    // code
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "mjs",
+    "cjs",
+    "jsm",
+    "es6",
+    "vue",
+    "svelte",
+    "py",
+    "pyw",
+    "ipynb",
+    "go",
+    "rs",
+    "c",
+    "h",
+    "cpp",
+    "hpp",
+    "cc",
+    "cxx",
+    "hh",
+    "csh",
+    "java",
+    "kt",
+    "kts",
+    "scala",
+    "sc",
+    "cs",
+    "fs",
+    "fsx",
+    "fsi",
+    "sh",
+    "bash",
+    "zsh",
+    "fish",
+    "bat",
+    "cmd",
+    "ps1",
+    "psd1",
+    "psm1",
+    "rb",
+    "php",
+    "pl",
+    "pm",
+    "tcl",
+    "lua",
+    "r",
+    "rmd",
+    "sql",
+    "swift",
+    "dart",
+    "groovy",
+    "gradle",
+    "tf",
+    "tfvars",
+    "hcl",
+    "nim",
+    "zig",
+    "v",
+    "vala",
+    "d",
+    "clj",
+    "cljs",
+    "cljc",
+    "edn",
+    "ex",
+    "exs",
+    "erl",
+    "hrl",
+    "ml",
+    "mli",
+    // markup / config / data
+    "json",
+    "jsonc",
+    "json5",
+    "md",
+    "mdx",
+    "markdown",
+    "html",
+    "htm",
+    "xhtml",
+    "css",
+    "scss",
+    "sass",
+    "less",
+    "styl",
+    "xml",
+    "dtd",
+    "yaml",
+    "yml",
+    "toml",
+    "ini",
+    "cfg",
+    "conf",
+    "properties",
+    "env",
+    "log",
+    "txt",
+    "text",
+    "csv",
+    "tsv",
+    "lock",
+    "sqlite",
+    "graphql",
+    "gql",
+    "proto",
+    "prisma",
+    "asm",
+    "s",
+]);
+/**
+ * Classify a file name into its preview category. Files with no extension
+ * (README, Makefile, .gitignore, …) are treated as text. Everything not in an
+ * allowlist (exe, jar, dll, zip, …) is "none" — never previewed.
+ */
+export function previewKind(name) {
+    const dot = name.lastIndexOf(".");
+    // A leading dot with nothing after it (.gitignore, .env) counts as no ext.
+    const ext = dot > 0 ? name.slice(dot + 1).toLowerCase() : "";
+    if (PREVIEW_IMAGE_EXTS.has(ext))
+        return "image";
+    if (PREVIEW_VIDEO_EXTS.has(ext))
+        return "video";
+    if (ext === "" || PREVIEW_TEXT_EXTS.has(ext))
+        return "text";
+    return "none";
+}
 // ---------------------------------------------------------------------------
 // Web UI context adapter — bridges extension UI calls (setWidget/notify) to the
 // browser. Extensions like rpiv-todo render a TUI widget via
@@ -271,15 +428,65 @@ function extractPartialText(partial) {
     }
     return null;
 }
+/**
+ * Persists which workspace each browser client last used + which workspaces it
+ * has opened, so a server restart / page reload restores the same project and
+ * the UI can offer a one-click recent-project list. File I/O is best-effort:
+ * persistence problems must never crash the server or block a session.
+ */
+class ClientStateStore {
+    filePath;
+    cache = null;
+    constructor(filePath) {
+        this.filePath = filePath;
+    }
+    load() {
+        if (this.cache)
+            return this.cache;
+        try {
+            const parsed = JSON.parse(readFileSync(this.filePath, "utf8"));
+            this.cache = parsed && typeof parsed === "object" ? parsed : {};
+        }
+        catch {
+            this.cache = {};
+        }
+        return this.cache;
+    }
+    save() {
+        try {
+            mkdirSync(dirname(this.filePath), { recursive: true });
+            writeFileSync(this.filePath, JSON.stringify(this.cache, null, 2) + "\n");
+        }
+        catch {
+            // best effort
+        }
+    }
+    get(clientId) {
+        return this.load()[clientId] ?? { projects: [] };
+    }
+    /** Remember which workspace a client last used; bumps its project entry. */
+    remember(clientId, cwd) {
+        const all = this.load();
+        const state = (all[clientId] ??= { projects: [] });
+        state.lastCwd = cwd;
+        const now = Date.now();
+        state.projects = [
+            { path: cwd, lastUsed: now },
+            ...state.projects.filter((p) => p.path !== cwd),
+        ].slice(0, 30);
+        this.save();
+    }
+}
 export class ClientSession {
     clientId;
     cwd;
-    /** Immutable workspace root the commands file (.pi/commands.json) is anchored to. */
-    workspaceRoot;
+    /** Absolute per-client session directory.
     /** Absolute per-client session directory. */
     sessionDir;
     /** pi config dir (auth/models/skills). */
     agentDir;
+    /** Persisted per-client UI state (last workspace + recent projects). */
+    stateStore;
     runtime;
     session;
     /** PTY terminals for this client (killed when the last socket detaches). */
@@ -313,16 +520,16 @@ export class ClientSession {
     disposed = false;
     /** pi-config readiness check, cached briefly so 60ms snapshots don't hit disk. */
     piCheckCache = null;
-    constructor(clientId, cwd, sessionDir, agentDir, runtime) {
+    constructor(clientId, cwd, sessionDir, agentDir, runtime, stateStore) {
         this.clientId = clientId;
         this.cwd = cwd;
-        this.workspaceRoot = cwd;
         this.sessionDir = sessionDir;
         this.agentDir = agentDir;
         this.runtime = runtime;
         this.session = runtime.session;
+        this.stateStore = stateStore;
     }
-    static async create(clientId, cwd, sessionDir) {
+    static async create(clientId, cwd, sessionDir, stateStore) {
         const agentDir = process.env.PI_CODING_AGENT_DIR ?? getAgentDir();
         const runtime = await createAgentSessionRuntime(ClientSession.runtimeFactory, {
             cwd,
@@ -331,7 +538,7 @@ export class ClientSession {
             // or start a fresh one on first visit.
             sessionManager: SessionManager.continueRecent(cwd, sessionDir),
         });
-        const cs = new ClientSession(clientId, cwd, sessionDir, agentDir, runtime);
+        const cs = new ClientSession(clientId, cwd, sessionDir, agentDir, runtime, stateStore);
         for (const d of runtime.diagnostics) {
             if (d.type !== "info") {
                 cs.pendingNotices.push({
@@ -1322,6 +1529,118 @@ export class ClientSession {
         }
         this.flushSnapshot();
     }
+    /**
+     * Map a rendered user-message id (`u-<timestamp>-<seq>`, assigned in
+     * serialize.ts) back to its append-only session entry id. The seq handles
+     * two user messages sharing the same millisecond timestamp.
+     */
+    resolveUserMessageEntryId(messageId) {
+        const m = /^u-(\d+)(?:-(\d+))?$/.exec(messageId);
+        if (!m)
+            return null;
+        const ts = Number(m[1]);
+        const seq = m[2] ? Number(m[2]) : 1;
+        let count = 0;
+        for (const entry of this.session.sessionManager.getEntries()) {
+            if (entry.type !== "message")
+                continue;
+            const msg = entry.message;
+            if (!msg || msg.role !== "user" || msg.timestamp !== ts)
+                continue;
+            count += 1;
+            if (count === seq)
+                return entry.id;
+        }
+        return null;
+    }
+    /**
+     * Edit a past user question and re-ask it: forks a NEW session file that
+     * keeps everything up to (but not including) that question, then sends the
+     * edited text there. The original thread is untouched and stays in the
+     * session list, so nothing is ever lost.
+     */
+    async editMessage(messageId, text) {
+        const trimmed = text.trim();
+        if (!trimmed) {
+            this.emit({
+                type: "notice",
+                level: "warning",
+                text: "编辑内容为空，已取消",
+            });
+            this.flushSnapshot();
+            return;
+        }
+        const entryId = this.resolveUserMessageEntryId(messageId);
+        if (!entryId) {
+            this.emit({
+                type: "notice",
+                level: "error",
+                text: "找不到要编辑的消息（可能已被压缩或不在当前分支）",
+            });
+            this.flushSnapshot();
+            return;
+        }
+        try {
+            const result = await this.runtime.fork(entryId);
+            if (result.cancelled) {
+                this.emit({
+                    type: "notice",
+                    level: "info",
+                    text: "已取消编辑重问",
+                });
+                this.flushSnapshot();
+                return;
+            }
+            await this.bindSession();
+            await this.prompt(trimmed);
+            this.emit({
+                type: "notice",
+                level: "info",
+                text: "已从该问题重新提问（原对话保留在会话列表中）",
+            });
+        }
+        catch (err) {
+            this.emit({
+                type: "notice",
+                level: "error",
+                text: `编辑重问失败：${err.message}`,
+            });
+        }
+        this.flushSnapshot();
+    }
+    /**
+     * Push the recent-project list (persisted per client, merged with every cwd
+     * that has persisted sessions in this client's session store — so workspaces
+     * opened before the recent-list feature existed still show up).
+     */
+    async pushProjects() {
+        try {
+            const saved = this.stateStore.get(this.clientId);
+            const map = new Map();
+            for (const p of saved.projects)
+                map.set(p.path, p.lastUsed);
+            const all = await SessionManager.listAll(this.sessionDir);
+            for (const s of all) {
+                if (s.cwd) {
+                    const t = s.modified.getTime();
+                    const prev = map.get(s.cwd);
+                    if (prev === undefined || t > prev)
+                        map.set(s.cwd, t);
+                }
+            }
+            // Only keep directories that still exist — a deleted/unmounted workspace
+            // is useless in the picker.
+            const projects = [...map.entries()]
+                .filter(([path]) => existsSync(path))
+                .map(([path, lastUsed]) => ({ path, lastUsed }))
+                .sort((a, b) => b.lastUsed - a.lastUsed)
+                .slice(0, 20);
+            this.emit({ type: "projects", projects });
+        }
+        catch {
+            this.emit({ type: "projects", projects: [] });
+        }
+    }
     /** List a workspace directory (relative to the configured cwd). */
     async listFiles(relPath) {
         try {
@@ -1341,11 +1660,16 @@ export class ClientSession {
             const dirents = await fs.readdir(target, { withFileTypes: true });
             const entries = dirents
                 .filter((d) => !IGNORED_ENTRIES.has(d.name))
-                .map((d) => ({
-                name: d.name,
-                path: rel === "" ? d.name : `${rel}/${d.name}`,
-                type: (d.isDirectory() ? "dir" : "file"),
-            }))
+                .map((d) => {
+                const entry = {
+                    name: d.name,
+                    path: rel === "" ? d.name : `${rel}/${d.name}`,
+                    type: (d.isDirectory() ? "dir" : "file"),
+                };
+                if (!d.isDirectory())
+                    entry.kind = previewKind(d.name);
+                return entry;
+            })
                 .sort((a, b) => a.type === b.type
                 ? a.name.localeCompare(b.name)
                 : a.type === "dir"
@@ -1396,14 +1720,46 @@ export class ClientSession {
                 });
                 return;
             }
-            // Read only the first MAX_PREVIEW_BYTES so huge files can't exhaust
-            // memory or flood the socket.
+            const name = relPath.split("/").pop() ?? relPath;
+            const kind = previewKind(name);
+            // Not previewable (exe, jar, archives, …) — never read or sent.
+            if (kind === "none") {
+                this.emit({
+                    type: "file_content",
+                    path: rel,
+                    name,
+                    text: "",
+                    truncated: false,
+                    binary: true,
+                    kind: "none",
+                    lines: 0,
+                    size: stat.size,
+                });
+                return;
+            }
+            // Media previews stream over the /api/file HTTP endpoint, so only
+            // metadata is sent here — the raw bytes never touch the socket.
+            if (kind === "image" || kind === "video") {
+                this.emit({
+                    type: "file_content",
+                    path: rel,
+                    name,
+                    text: "",
+                    truncated: false,
+                    binary: true,
+                    kind,
+                    lines: 0,
+                    size: stat.size,
+                });
+                return;
+            }
+            // Text: read only the first MAX_PREVIEW_BYTES so huge files can't
+            // exhaust memory or flood the socket.
             const handle = await fs.open(abs, "r");
             try {
                 const buf = Buffer.alloc(Math.min(stat.size, MAX_PREVIEW_BYTES));
                 const { bytesRead } = await handle.read(buf, 0, buf.length, 0);
                 const data = buf.subarray(0, bytesRead);
-                const name = relPath.split("/").pop() ?? relPath;
                 if (data.includes(0)) {
                     this.emit({
                         type: "file_content",
@@ -1412,6 +1768,7 @@ export class ClientSession {
                         text: "",
                         truncated: false,
                         binary: true,
+                        kind: "text",
                         lines: 0,
                         size: stat.size,
                     });
@@ -1424,6 +1781,7 @@ export class ClientSession {
                     text: data.toString("utf8"),
                     truncated: bytesRead < stat.size,
                     binary: false,
+                    kind: "text",
                     lines: countLines(data),
                     size: stat.size,
                 });
@@ -1547,6 +1905,9 @@ export class ClientSession {
             const oldRuntime = this.runtime;
             this.runtime = newRuntime;
             this.cwd = abs;
+            // Remember the new workspace (restore target + recent-project entry).
+            this.stateStore.remember(this.clientId, abs);
+            void this.pushProjects();
             this.unsubscribe?.();
             this.unsubscribe = undefined;
             await this.bindSession();
@@ -1563,6 +1924,8 @@ export class ClientSession {
             });
             void this.refreshSessions();
             void this.listFiles(undefined);
+            // Commands are per-project (.pi/commands.json in the current cwd).
+            void this.listCommands();
         }
         catch (err) {
             this.emit({
@@ -1647,7 +2010,7 @@ export class ClientSession {
     }
     /** Push the user command list (.pi/commands.json) to the client. */
     async listCommands() {
-        const { commands, path, warning } = await loadCommands(this.workspaceRoot);
+        const { commands, path, warning } = await loadCommands(this.cwd);
         if (warning) {
             this.emit({ type: "notice", level: "warning", text: warning });
         }
@@ -1655,7 +2018,7 @@ export class ClientSession {
     }
     /** Persist the user command list (.pi/commands.json). */
     async saveCommands(commands) {
-        const { path, error } = await saveCommandsFile(this.workspaceRoot, commands);
+        const { path, error } = await saveCommandsFile(this.cwd, commands);
         if (error) {
             this.emit({ type: "notice", level: "error", text: error });
             return;
@@ -1694,9 +2057,11 @@ export class AgentService {
     sessionDirRoot;
     clients = new Map();
     pending = new Map();
-    constructor(cwd, sessionDirRoot) {
+    stateStore;
+    constructor(cwd, sessionDirRoot, stateFile) {
         this.cwd = cwd;
         this.sessionDirRoot = sessionDirRoot;
+        this.stateStore = new ClientStateStore(stateFile);
     }
     /** Get or create the session for a client, racing attach calls safely. */
     async attach(clientId, send) {
@@ -1707,12 +2072,34 @@ export class AgentService {
                 cs = await inflight;
             }
             else {
-                const creating = ClientSession.create(clientId, this.cwd, join(this.sessionDirRoot, sanitizeId(clientId))).finally(() => {
+                // Restore this client's last-used workspace when it still exists;
+                // otherwise fall back to the server's configured default cwd.
+                let cwd = this.cwd;
+                const saved = this.stateStore.get(clientId);
+                if (saved.lastCwd && saved.lastCwd !== this.cwd) {
+                    try {
+                        if (statSync(saved.lastCwd).isDirectory())
+                            cwd = saved.lastCwd;
+                    }
+                    catch {
+                        // gone (unmounted drive / deleted) — fall back to the default
+                    }
+                }
+                const creating = ClientSession.create(clientId, cwd, join(this.sessionDirRoot, sanitizeId(clientId)), this.stateStore).finally(() => {
                     this.pending.delete(clientId);
                 });
                 this.pending.set(clientId, creating);
                 cs = await creating;
                 this.clients.set(clientId, cs);
+                // Make sure the restored/default workspace appears in the project list.
+                this.stateStore.remember(clientId, cwd);
+                if (cwd !== this.cwd) {
+                    send({
+                        type: "notice",
+                        level: "info",
+                        text: `已恢复上次的工作目录：${cwd}`,
+                    });
+                }
             }
         }
         cs.attachSink(send);

package/dist/server/index.js

@@ -13,14 +13,15 @@
  *   PI_CODING_AGENT_DIR  pi config dir (auth/models/skills) — passed to the SDK
  */
 import { existsSync } from "node:fs";
+import { stat } from "node:fs/promises";
 import { createServer } from "node:http";
-import { dirname, join, resolve } from "node:path";
+import { basename, dirname, join, relative, resolve, sep } 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";
+import { AgentService, previewKind } 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"));
@@ -30,6 +31,38 @@ app.use(express.json({ limit: "10mb" }));
 app.get("/api/health", (_req, res) => {
     res.json({ ok: true, piVersion: VERSION, cwd: CWD, pid: process.pid });
 });
+/**
+ * Stream a workspace file for the media preview (image/video). Path is
+ * validated against the workspace root and only image/video kinds are served —
+ * text goes over the WebSocket, and exe/jar/etc. are never exposed here.
+ * express's sendFile handles Range requests, so video seeking works.
+ */
+app.get("/api/file", async (req, res) => {
+    try {
+        const raw = typeof req.query.path === "string" ? req.query.path : "";
+        const abs = resolve(CWD, raw);
+        const rel = relative(CWD, abs);
+        if (rel.startsWith("..") || rel.includes(`${sep}..`)) {
+            res.status(400).end("path outside workspace");
+            return;
+        }
+        const name = basename(abs);
+        const kind = previewKind(name);
+        if (kind !== "image" && kind !== "video") {
+            res.status(400).end("not a previewable media file");
+            return;
+        }
+        const st = await stat(abs);
+        if (!st.isFile()) {
+            res.status(400).end("not a file");
+            return;
+        }
+        res.sendFile(abs);
+    }
+    catch {
+        res.status(404).end("not found");
+    }
+});
 // 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.
@@ -54,7 +87,9 @@ const heartbeatTimer = setInterval(() => {
         }
     }
 }, 10_000);
-const service = new AgentService(CWD, SESSION_DIR_ROOT);
+const service = new AgentService(CWD, SESSION_DIR_ROOT, 
+// Per-client persisted UI state: last-used workspace + recent projects.
+join(DATA_DIR, "client-state.json"));
 wss.on("connection", (ws) => {
     let clientId = null;
     let closed = false;
@@ -86,6 +121,9 @@ wss.on("connection", (ws) => {
             case "new_chat":
                 void cs.newChat();
                 break;
+            case "edit_message":
+                void cs.editMessage(msg.messageId, msg.text);
+                break;
             case "cycle_model":
                 void cs.cycleModel();
                 break;
@@ -98,6 +136,9 @@ wss.on("connection", (ws) => {
             case "list_sessions":
                 void cs.refreshSessions();
                 break;
+            case "list_projects":
+                void cs.pushProjects();
+                break;
             case "switch_session":
                 void cs.switchSession(msg.path);
                 break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-web-ui",
-  "version": "0.2.15",
+  "version": "0.4.0",
   "description": "Web chat interface for the pi coding agent, powered by the pi SDK (@earendil-works/pi-coding-agent) — one-command run, Docker/systemd/launchd deployable",
   "license": "MIT",
   "type": "module",