pi-web-ui 0.6.2 → 0.8.0

package/dist/server/agent-service.js

@@ -490,6 +490,42 @@ class ClientStateStore {
         this.save();
     }
 }
+/** Cap on simultaneously open conversations (each keeps a full runtime alive). */
+const MAX_OPEN_CONVERSATIONS = 8;
+const DEFAULT_CONV_TITLE = "新对话";
+/** First user text in a session, truncated for the conversation list. */
+function conversationTitle(session) {
+    try {
+        for (const m of session.agent.state.messages) {
+            if (m.role !== "user")
+                continue;
+            const content = m.content;
+            let text = "";
+            if (typeof content === "string") {
+                text = content;
+            }
+            else if (Array.isArray(content)) {
+                for (const p of content) {
+                    if (p &&
+                        typeof p === "object" &&
+                        p.type === "text" &&
+                        typeof p.text === "string") {
+                        text = p.text;
+                        break;
+                    }
+                }
+            }
+            const trimmed = text.trim().replace(/\s+/g, " ");
+            if (trimmed.length > 0) {
+                return trimmed.length > 30 ? `${trimmed.slice(0, 30)}…` : trimmed;
+            }
+        }
+    }
+    catch {
+        // best-effort
+    }
+    return DEFAULT_CONV_TITLE;
+}
 export class ClientSession {
     clientId;
     cwd;
@@ -500,8 +536,31 @@ export class ClientSession {
     agentDir;
     /** Persisted per-client UI state (last workspace + recent projects). */
     stateStore;
-    runtime;
-    session;
+    /** Open conversations — each owns its OWN runtime, so starting a new chat
+     *  or switching chats never interrupts an in-flight run. `runtime` and
+     *  `session` accessors below target the ACTIVE conversation. */
+    convs = new Map();
+    activeId = "";
+    convSeq = 0;
+    /** One ModelRuntime shared by all conversations — the model chosen in the
+     *  top bar applies to every chat, not just the one that set it. Seeded by
+     *  the first conversation and reused by later ones. */
+    sharedModelRuntime;
+    /** The active conversation (all session operations target it). */
+    get conv() {
+        const conv = this.convs.get(this.activeId);
+        if (!conv)
+            throw new Error("no active conversation");
+        return conv;
+    }
+    /** Runtime of the active conversation. */
+    get runtime() {
+        return this.conv.runtime;
+    }
+    /** Session of the active conversation. */
+    get session() {
+        return this.conv.session;
+    }
     /** PTY terminals for this client (killed when the last socket detaches). */
     terminals = new TerminalManager((msg) => this.emit(msg));
     /** Web-facing extension UI context (widgets, notifications). */
@@ -510,48 +569,40 @@ export class ClientSession {
     /** Connected sockets for this client (multiple tabs share the session). */
     sinks = new Set();
     pendingNotices = [];
-    unsubscribe;
     snapshotTimer = null;
     sessionsTimer = null;
     version = 0;
     /**
-     * Stable per-message ids: assigned once per (role, timestamp) so snapshot ids
-     * don't change every 60ms — changing ids would remount the whole list in
-     * React (collapse open thinking blocks, reset scroll, jank on long chats).
+     * Per-conversation serialization caches (stable message ids, UiMessage
+     * object cache, message-array signature, queue counts) live inside each
+     * Conversation — see Conversation above.
      */
-    msgIds = new Map();
-    nextMsgId = 1;
-    /** Serialized UiMessage cache — object-reference-stable across snapshots, so
-     *  the frontend's React.memo can skip unchanged messages entirely. */
-    uiMessageCache = new Map();
-    /** Reused when the message set didn't change, keeping state.messages
-     *  reference-stable so the frontend can memoize derived maps. */
-    lastMessagesSig = "";
-    lastMessagesArray = [];
-    queueSteering = 0;
-    queueFollowUp = 0;
     disposed = false;
     /** pi-config readiness check, cached briefly so 60ms snapshots don't hit disk. */
     piCheckCache = null;
-    constructor(clientId, cwd, sessionDir, agentDir, runtime, stateStore) {
+    constructor(clientId, cwd, sessionDir, agentDir, stateStore) {
         this.clientId = clientId;
         this.cwd = cwd;
         this.sessionDir = sessionDir;
         this.agentDir = agentDir;
-        this.runtime = runtime;
-        this.session = runtime.session;
         this.stateStore = stateStore;
     }
     static async create(clientId, cwd, sessionDir, stateStore) {
         const agentDir = process.env.PI_CODING_AGENT_DIR ?? getAgentDir();
-        const runtime = await createAgentSessionRuntime(ClientSession.runtimeFactory, {
+        const cs = new ClientSession(clientId, cwd, sessionDir, agentDir, stateStore);
+        const runtime = await createAgentSessionRuntime(cs.makeRuntimeFactory(), {
             cwd,
             agentDir,
             // Resume the most recent session for this client's private session dir,
             // or start a fresh one on first visit.
             sessionManager: SessionManager.continueRecent(cwd, sessionDir),
         });
-        const cs = new ClientSession(clientId, cwd, sessionDir, agentDir, runtime, stateStore);
+        // First conversation = the resumed session; it also seeds the shared
+        // ModelRuntime that every later conversation reuses.
+        cs.sharedModelRuntime = runtime.services.modelRuntime;
+        const conv = cs.makeConversation(runtime);
+        cs.convs.set(conv.id, conv);
+        cs.activeId = conv.id;
         for (const d of runtime.diagnostics) {
             if (d.type !== "info") {
                 cs.pendingNotices.push({
@@ -564,15 +615,42 @@ export class ClientSession {
         await cs.bindSession();
         return cs;
     }
-    /** Builds a full cwd-bound runtime for the given working directory. */
-    static runtimeFactory = async ({ cwd: effectiveCwd, sessionManager, }) => {
-        const services = await createAgentSessionServices({ cwd: effectiveCwd });
+    /**
+     * Factory for cwd-bound runtimes. All conversations share ONE ModelRuntime
+     * (the model choice is client-wide), so later conversations reuse the
+     * instance created with the first one.
+     */
+    makeRuntimeFactory() {
+        return async ({ cwd: effectiveCwd, sessionManager }) => {
+            const services = await createAgentSessionServices({
+                cwd: effectiveCwd,
+                modelRuntime: this.sharedModelRuntime,
+            });
+            return {
+                ...(await createAgentSessionFromServices({ services, sessionManager })),
+                services,
+                diagnostics: services.diagnostics,
+            };
+        };
+    }
+    /** Wrap a fresh runtime as a new conversation record. */
+    makeConversation(runtime) {
         return {
-            ...(await createAgentSessionFromServices({ services, sessionManager })),
-            services,
-            diagnostics: services.diagnostics,
+            id: `c${++this.convSeq}`,
+            title: conversationTitle(runtime.session),
+            runtime,
+            session: runtime.session,
+            cwd: runtime.cwd,
+            createdAt: Date.now(),
+            msgIds: new Map(),
+            nextMsgId: 1,
+            uiMessageCache: new Map(),
+            lastMessagesSig: "",
+            lastMessagesArray: [],
+            queueSteering: 0,
+            queueFollowUp: 0,
         };
-    };
+    }
     /** Add a socket to this client's broadcast set; flushes buffered startup notices. */
     attachSink(send) {
         this.sinks.add(send);
@@ -587,6 +665,9 @@ export class ClientSession {
         const statuses = this.webUi.statusSnapshot();
         if (statuses.length > 0)
             send({ type: "statuses", statuses });
+        // Reconnect: push the open-conversation list so the left panel shows
+        // every chat (a fresh socket never got the newChat/switch pushes).
+        this.emitConversations();
     }
     detachSink(send) {
         this.sinks.delete(send);
@@ -602,18 +683,19 @@ export class ClientSession {
         for (const sink of [...this.sinks])
             sink(msg);
     }
-    /** (Re)attach event plumbing to the active session — also used after new_chat. */
+    /** (Re)attach event plumbing to the ACTIVE conversation's session. */
     async bindSession() {
-        this.unsubscribe?.();
-        this.session = this.runtime.session;
-        await this.session.bindExtensions({
+        const conv = this.conv;
+        conv.unsubscribe?.();
+        conv.session = conv.runtime.session;
+        await conv.session.bindExtensions({
             mode: "rpc",
             uiContext: this.webUi,
             onError: (err) => {
                 this.emit({ type: "notice", level: "error", text: err.error });
             },
         });
-        this.unsubscribe = this.session.subscribe((event) => this.onEvent(event));
+        conv.unsubscribe = conv.session.subscribe((event) => this.onEvent(conv, event));
         this.scheduleSnapshot();
         this.webUi.refresh();
         this.startWidgetsTimer();
@@ -627,7 +709,7 @@ export class ClientSession {
                 this.webUi.refresh();
         }, WIDGET_REFRESH_MS);
     }
-    onEvent(event) {
+    onEvent(conv, event) {
         switch (event.type) {
             case "bash_execution_update": {
                 if (event.id) {
@@ -653,8 +735,8 @@ export class ClientSession {
                 break;
             }
             case "queue_update":
-                this.queueSteering = event.steering.length;
-                this.queueFollowUp = event.followUp.length;
+                conv.queueSteering = event.steering.length;
+                conv.queueFollowUp = event.followUp.length;
                 break;
             // A run finished or a new entry was persisted — keep the session list fresh
             // (new chat + first message, completed turns, compaction, etc.).
@@ -667,37 +749,41 @@ export class ClientSession {
         }
         this.scheduleSnapshot();
     }
-    /** Debounced push of the persisted session list to the client. */
+    /** Debounced push of the persisted session list + open conversations. */
     scheduleSessionsRefresh() {
         if (this.sessionsTimer)
             return;
         this.sessionsTimer = setTimeout(() => {
             this.sessionsTimer = null;
-            if (!this.disposed)
-                void this.pushSessions();
+            if (this.disposed)
+                return;
+            this.emitConversations();
+            void this.pushSessions();
         }, 800);
     }
     /** Serialize a persisted message with a STABLE id + cached object reference. */
     serializeCached(m) {
+        const conv = this.conv;
         const key = m.role === "toolResult"
             ? `t:${m.toolCallId}`
             : `${m.role}:${m.timestamp}`;
-        let n = this.msgIds.get(key);
+        let n = conv.msgIds.get(key);
         if (n === undefined) {
-            n = this.nextMsgId++;
-            this.msgIds.set(key, n);
+            n = conv.nextMsgId++;
+            conv.msgIds.set(key, n);
         }
         const cacheKey = `${key}#${n}`;
-        const cached = this.uiMessageCache.get(cacheKey);
+        const cached = conv.uiMessageCache.get(cacheKey);
         if (cached)
             return cached;
         const msg = serializeMessage(m, n);
         if (msg)
-            this.uiMessageCache.set(cacheKey, msg);
+            conv.uiMessageCache.set(cacheKey, msg);
         return msg;
     }
     snapshot() {
-        const state = this.session.agent.state;
+        const conv = this.conv;
+        const state = conv.session.agent.state;
         const model = state.model;
         let stats = {
             totalMessages: 0,
@@ -730,14 +816,15 @@ export class ClientSession {
         // cached (reference-stable) anyway, and a stable array reference lets the
         // frontend memoize derived maps instead of rebuilding them every 60ms.
         const sig = rawMessages.map((m) => m.id).join("\u0001");
-        const messages = sig === this.lastMessagesSig ? this.lastMessagesArray : rawMessages;
-        this.lastMessagesSig = sig;
-        this.lastMessagesArray = rawMessages;
+        const messages = conv.lastMessagesSig === sig ? conv.lastMessagesArray : rawMessages;
+        conv.lastMessagesSig = sig;
+        conv.lastMessagesArray = rawMessages;
         return {
             clientId: this.clientId,
             cwd: this.cwd,
             sessionId: this.session.sessionId,
             sessionFile: this.session.sessionFile,
+            conversationId: this.activeId,
             messages,
             // The in-progress assistant message lives in state.streamingMessage
             // (the SDK only pushes it into state.messages at message_end). Surfacing
@@ -751,7 +838,7 @@ export class ClientSession {
                 ? { id: model.id, name: model.name, provider: model.provider }
                 : null,
             thinkingLevel: state.thinkingLevel,
-            queue: { steering: this.queueSteering, followUp: this.queueFollowUp },
+            queue: { steering: conv.queueSteering, followUp: conv.queueFollowUp },
             errorMessage: state.errorMessage,
             tools: state.tools.map((t) => t.name),
             version: ++this.version,
@@ -1288,6 +1375,13 @@ export class ClientSession {
                 text: `提示发送失败：${err.message}`,
             });
         }
+        // Name the conversation after its first user prompt.
+        const conv = this.conv;
+        if (conv.title === DEFAULT_CONV_TITLE && text.trim()) {
+            const trimmed = text.trim().replace(/\s+/g, " ");
+            conv.title = trimmed.length > 30 ? `${trimmed.slice(0, 30)}…` : trimmed;
+            this.emitConversations();
+        }
         this.flushSnapshot();
     }
     /**
@@ -1574,9 +1668,25 @@ export class ClientSession {
         this.flushSnapshot();
     }
     async newChat() {
+        if (this.convs.size >= MAX_OPEN_CONVERSATIONS) {
+            this.emit({
+                type: "notice",
+                level: "warning",
+                text: `打开的对话已达上限（${MAX_OPEN_CONVERSATIONS} 个），请先切换或重载页面关闭`,
+            });
+            return;
+        }
         try {
-            await this.runtime.newSession();
+            const runtime = await createAgentSessionRuntime(this.makeRuntimeFactory(), {
+                cwd: this.cwd,
+                agentDir: this.agentDir,
+                sessionManager: SessionManager.create(this.cwd, this.sessionDir),
+            });
+            const conv = this.makeConversation(runtime);
+            this.convs.set(conv.id, conv);
+            this.activeId = conv.id;
             await this.bindSession();
+            this.emitConversations();
         }
         catch (err) {
             this.emit({
@@ -1587,6 +1697,44 @@ export class ClientSession {
         }
         this.flushSnapshot();
     }
+    /** Switch the ACTIVE conversation without interrupting any other chat. */
+    async switchConversation(id) {
+        if (!this.convs.has(id) || id === this.activeId)
+            return;
+        this.activeId = id;
+        this.cwd = this.conv.cwd;
+        this.webUi.refresh();
+        this.emitConversations();
+        // Workspace-bound panels (session list / file tree / commands) follow
+        // the active conversation's cwd.
+        void this.refreshSessions();
+        void this.listFiles(undefined);
+        void this.listCommands();
+        this.flushSnapshot();
+    }
+    /** Push the open-conversation list to the client. */
+    emitConversations() {
+        const conversations = [];
+        for (const conv of this.convs.values()) {
+            let messageCount = 0;
+            let isStreaming = false;
+            try {
+                messageCount = conv.session.getSessionStats().totalMessages;
+                isStreaming = conv.session.isStreaming;
+            }
+            catch {
+                // session being replaced — report defaults
+            }
+            conversations.push({
+                id: conv.id,
+                title: conv.title,
+                cwd: conv.cwd,
+                messageCount,
+                isStreaming,
+            });
+        }
+        this.emit({ type: "conversations", conversations, activeId: this.activeId });
+    }
     /** List persisted sessions for this client, newest first. */
     /** Push the persisted session list to the client (client-requested). */
     async refreshSessions() {
@@ -1642,6 +1790,12 @@ export class ClientSession {
         try {
             await this.runtime.switchSession(path);
             await this.bindSession();
+            // The resumed session carries its own cwd — sync it into the ACTIVE
+            // conversation (other open conversations are untouched).
+            this.conv.cwd = this.runtime.cwd;
+            this.cwd = this.runtime.cwd;
+            this.conv.title = conversationTitle(this.runtime.session);
+            this.emitConversations();
         }
         catch (err) {
             this.emit({
@@ -2018,20 +2172,24 @@ export class ClientSession {
                 this.flushSnapshot();
                 return;
             }
-            // Build the new runtime first — only swap on success.
-            const newRuntime = await createAgentSessionRuntime(ClientSession.runtimeFactory, {
+            // Build the new runtime first — only swap the ACTIVE conversation on
+            // success (other open conversations keep their own cwd + runtime).
+            const newRuntime = await createAgentSessionRuntime(this.makeRuntimeFactory(), {
                 cwd: abs,
                 agentDir: this.agentDir,
                 sessionManager: SessionManager.continueRecent(abs, this.sessionDir),
             });
-            const oldRuntime = this.runtime;
-            this.runtime = newRuntime;
+            const conv = this.conv;
+            const oldRuntime = conv.runtime;
+            conv.runtime = newRuntime;
+            conv.session = newRuntime.session;
+            conv.cwd = abs;
             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;
+            conv.unsubscribe?.();
+            conv.unsubscribe = undefined;
             await this.bindSession();
             await oldRuntime.dispose().catch(() => { });
             for (const d of newRuntime.diagnostics) {
@@ -2044,6 +2202,7 @@ export class ClientSession {
                 level: "info",
                 text: `已切换到工作目录：${abs}`,
             });
+            this.emitConversations();
             void this.refreshSessions();
             void this.listFiles(undefined);
             // Commands are per-project (.pi/commands.json in the current cwd).
@@ -2164,13 +2323,14 @@ export class ClientSession {
             this.widgetsTimer = null;
         }
         this.webUi.dispose();
-        this.unsubscribe?.();
-        this.unsubscribe = undefined;
-        try {
-            await this.runtime.dispose();
-        }
-        catch {
-            // best effort
+        for (const conv of this.convs.values()) {
+            conv.unsubscribe?.();
+            try {
+                await conv.runtime.dispose();
+            }
+            catch {
+                // best effort
+            }
         }
     }
 }

package/dist/server/index.js

@@ -12,12 +12,13 @@
  *   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 { stat } from "node:fs/promises";
+import { createWriteStream, existsSync } from "node:fs";
+import { mkdir, stat } from "node:fs/promises";
 import { createServer } from "node:http";
-import { basename, dirname, join, resolve } from "node:path";
+import { basename, dirname, extname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { randomUUID } from "node:crypto";
+import { pipeline } from "node:stream/promises";
 import express from "express";
 import { WebSocket, WebSocketServer } from "ws";
 import { VERSION } from "@earendil-works/pi-coding-agent";
@@ -32,10 +33,15 @@ 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 —
+ * Stream a workspace file over HTTP.
+ *
+ * Media preview (no download param): 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.
+ *
+ * Download (?download=1): any file kind is served with
+ * Content-Disposition: attachment so the browser saves it instead of
+ * rendering. Path is validated against the workspace root either way.
  */
 app.get("/api/file", async (req, res) => {
     try {
@@ -54,7 +60,8 @@ app.get("/api/file", async (req, res) => {
         const abs = wp.abs;
         const name = basename(abs);
         const kind = previewKind(name);
-        if (kind !== "image" && kind !== "video") {
+        const isDownload = req.query.download === "1";
+        if (!isDownload && kind !== "image" && kind !== "video") {
             res.status(400).end("not a previewable media file");
             return;
         }
@@ -63,12 +70,96 @@ app.get("/api/file", async (req, res) => {
             res.status(400).end("not a file");
             return;
         }
-        res.sendFile(abs);
+        if (isDownload) {
+            // res.download sets Content-Disposition: attachment and RFC 5987
+            // filename* encoding for non-ASCII names.
+            res.download(abs, name);
+        }
+        else {
+            res.sendFile(abs);
+        }
     }
     catch {
         res.status(404).end("not found");
     }
 });
+/**
+ * Save an uploaded file into the client's workspace (drag & drop from the OS
+ * file manager). Query params:
+ *   clientId  client session — resolves the workspace root (falls back to CWD)
+ *   destDir   workspace-relative target directory ("" = workspace root)
+ * Request body is the raw file bytes (streamed to disk); headers:
+ *   X-File-Name       original file name (URI-encoded)
+ *   X-File-Rel-Path   optional path of the file within the drop (URI-encoded)
+ *                     — its directory part is recreated under destDir, so
+ *                     dropping a whole folder keeps its structure. The final
+ *                     segment is used as the file name.
+ * Paths are validated against the workspace root; existing files get a
+ * "name (1).ext" suffix instead of being overwritten.
+ */
+app.post("/api/upload", async (req, res) => {
+    const fail = (status, error) => res.status(status).json({ ok: false, error });
+    try {
+        const cid = typeof req.query.clientId === "string" ? req.query.clientId : "";
+        const rawDest = typeof req.query.destDir === "string" ? req.query.destDir : "";
+        const cs = cid ? service.get(cid) : undefined;
+        const wp = workspacePath(cs?.cwd ?? CWD, rawDest);
+        if (!wp) {
+            fail(400, "目标目录不在工作区内");
+            return;
+        }
+        const nameRaw = typeof req.headers["x-file-name"] === "string"
+            ? decodeURIComponent(req.headers["x-file-name"])
+            : "";
+        const relRaw = typeof req.headers["x-file-rel-path"] === "string"
+            ? decodeURIComponent(req.headers["x-file-rel-path"])
+            : "";
+        // Sanitize every path segment: strip separators/traversal, drop empties.
+        const clean = (s) => {
+            const seg = basename(s).replace(/[\\/]/g, "");
+            return seg && seg !== "." && seg !== ".." ? seg : null;
+        };
+        const relDirs = relRaw
+            .split("/")
+            .map(clean)
+            .filter((s) => s !== null);
+        const name = clean(relDirs.length > 0 ? relDirs[relDirs.length - 1] : nameRaw);
+        if (!name) {
+            fail(400, "无效文件名");
+            return;
+        }
+        // Ensure the destination directory exists (and is a directory).
+        const destAbs = join(wp.abs, ...relDirs.slice(0, -1));
+        const destSt = await stat(wp.abs).catch(() => null);
+        if (destSt && !destSt.isDirectory()) {
+            fail(400, "目标不是目录");
+            return;
+        }
+        await mkdir(destAbs, { recursive: true });
+        // Never overwrite: "name (1).ext", "name (2).ext", …
+        const ext = extname(name);
+        const stem = name.slice(0, name.length - ext.length);
+        let finalName = name;
+        for (let i = 1; existsSync(join(destAbs, finalName)); i++) {
+            finalName = `${stem} (${i})${ext}`;
+        }
+        const finalAbs = join(destAbs, finalName);
+        // Stream the request body straight to disk.
+        let size = 0;
+        const out = createWriteStream(finalAbs);
+        req.on("data", (chunk) => {
+            size += chunk.length;
+        });
+        await pipeline(req, out);
+        const relOut = [rawDest, ...relDirs.slice(0, -1), finalName]
+            .filter(Boolean)
+            .join("/");
+        res.json({ ok: true, path: relOut, name: finalName, size });
+    }
+    catch {
+        fail(500, "上传失败");
+    }
+});
 // 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.
@@ -148,6 +239,9 @@ wss.on("connection", (ws) => {
             case "switch_session":
                 void cs.switchSession(msg.path);
                 break;
+            case "switch_conversation":
+                void cs.switchConversation(msg.id);
+                break;
             case "list_files":
                 void cs.listFiles(msg.path);
                 break;