@liguoshuai/pi-web-chat 1.7.0 → 1.7.2

package/README.md

@@ -25,14 +25,102 @@
 
 ## 🚀 快速开始
 
+### 1. 环境准备
+- **Node.js**: `>= 18.0.0`
+- **操作系统**: Linux / macOS / WSL (Windows)
+
+---
+
+### 2. 安装 pi 编程代理 (pi agent)
+
+`pi-web-chat` 通过 RPC 模式 (`pi --mode rpc`) 与底层 `pi` 命令行 Agent 子进程通信。若系统中尚未安装 `pi`，请选择以下任一方式进行全局安装：
+
+#### 方式 A：通过 npm / pnpm 全局安装（推荐）
+
+```bash
+npm install -g --ignore-scripts @earendil-works/pi-coding-agent
+```
+> 💡 `--ignore-scripts` 可跳过依赖包中的生命周期脚本，安装更干净高效。
+
+#### 方式 B：通过 Shell 官方安装脚本
+
+```bash
+curl -fsSL https://pi.dev/install.sh | sh
+```
+
+#### 验证安装
+安装完成后，在终端运行以下命令验证：
+
+```bash
+pi --version
+# 输出版本号（例如 0.82.1）即表示安装成功
+```
+
+---
+
+### 3. 配置模型 Provider 与 API Key
+
+`pi` 支持 Anthropic、OpenAI、OpenRouter、DeepSeek、SiliconFlow 等多种 LLM 模型 Provider。在使用前需配置好 API Key 或授权凭证：
+
+#### 方法 A：设置环境变量（推荐）
+在终端或 Shell 配置文件（如 `~/.bashrc` 或 `~/.zshrc`）中导出对应的 API Key：
+
 ```bash
+# 使用 Anthropic (Claude)
+export ANTHROPIC_API_KEY="sk-ant-..."
+
+# 使用 OpenRouter
+export OPENROUTER_API_KEY="sk-or-v1-..."
+
+# 使用 OpenAI / DeepSeek / 其它 OpenAI 兼容 API
+export OPENAI_API_KEY="sk-..."
+```
+
+#### 方法 B：使用 pi CLI 交互式登录
+在终端输入 `pi` 命令启动交互模式，然后输入 `/login` 按照提示选择 Provider 并绑定账号或密钥：
+
+```bash
+pi
+# 进入交互界面后输入：
+/login
+# 按照提示选择 Provider 并输入 Key，配置完成后输入 /quit 退出
+```
+
+---
+
+### 4. 克隆与启动 pi-web-chat
+
+#### 克隆仓库与安装依赖
+
+```bash
+git clone https://github.com/liguoshuai-1990/pi-web-chat.git
 cd pi-web-chat
 npm install
+```
 
-# 确保 pi 已安装并已配置好至少一个 provider：
-#   pi         （交互模式 → 运行 /login 选择 provider，或设置 API key）
+#### 启动 Web 服务
+
+```bash
 npm start
-# → http://localhost:3000
+```
+
+#### 打开浏览器体验
+在浏览器中访问：
+👉 **http://localhost:3000**
+
+---
+
+### 5. 命令行启动选项与全局 CLI（可选）
+
+你也可以通过 `bin/pi-web-chat.js` 指定工作目录或监听端口：
+
+```bash
+# 指定端口和工作目录 (cwd)
+node bin/pi-web-chat.js --port 8080 --cwd /path/to/your/project
+
+# 或通过 npm 全局安装后在任意目录下启动
+npm install -g .
+pi-web-chat --port 8080
 ```
 
 ---
@@ -42,7 +130,7 @@ npm start
 | 变量 | 默认值 | 说明 |
 | ---- | ------ | ---- |
 | `PORT` | `3000` | Web 服务监听端口 |
-| `PI_BIN` | 自动探测（`~/.npm-global/bin/pi` 等） | 显式指定 pi 可执行文件绝对路径 |
+| `PI_BIN` | 自动探测（`~/.npm-global/bin/pi`、`/usr/local/bin/pi` 或 `PATH`） | 显式指定 pi 可执行文件绝对路径 |
 | `PI_SESSIONS_DIR` | `~/.pi/agent/sessions` | pi 的 session 存储目录 |
 | `IDLE_TIMEOUT_MS` | `300000` (5分钟) | 真正空闲（无连接+非流式）后的进程回收超时（0 为禁用回收） |
 | `MAX_AGENT_LIFETIME_MS` | `1800000` (30分钟) | 单个 Agent 进程后台生存硬上限（0 为无上限） |

package/bin/pi-web-chat.js

@@ -5,6 +5,7 @@
 import { fileURLToPath } from "url";
 import { dirname, resolve } from "path";
 import { spawn } from "child_process";
+import os from "os";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -49,7 +50,16 @@ function parseArgs(argv) {
   return opts;
 }
 
+function normalizeCwd(dir) {
+  if (!dir) return os.homedir();
+  if (dir.startsWith("~")) {
+    return resolve(os.homedir(), dir.slice(1).replace(/^[/\\]/, ""));
+  }
+  return resolve(dir);
+}
+
 const opts = parseArgs(process.argv.slice(2));
+opts.cwd = normalizeCwd(opts.cwd);
 
 // Spawn server.js as a child so we can forward signals cleanly.
 // Use --expose-gc so idle agents can call global.gc() to release heap (IDLE_DROP_HEAP=1).

package/docs/ARCHITECTURE.md

@@ -1,6 +1,6 @@
 # 架构设计文档
 
-> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.6.0 版本）。
+> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.7.0 版本）。
 
 ---
 
@@ -42,6 +42,7 @@
 - **离线事件环形缓存与回放（Ring Buffer & Backfill）**：无客户端连接时，pi 输出的事件自动存入环形 Buffer（默认 2000 条）。客户端重连时通过 `backfill_start` → 离线事件 → `backfill_end` 进行增量补齐。
 - **真正空闲回收（True-Idle Timeout）**：仅在“无 WebSocket 连接”且“进程彻底进入 idle（非 streaming、无挂起 RPC）”时，才启动 `IDLE_TIMEOUT_MS` 空闲回收倒计时。
 - **磁盘 JSONL 为唯一真理（Single Source of Truth）**：会话历史与树状分支全由 pi 本身维护在磁盘 `.jsonl` 文件中，Web 端通过 REST 接口与 RPC 消息与文件保持同步。
+- **`pi` 可执行文件自动探查与派生**：服务端通过 `resolvePiBin()` 自动定位全局安装的 `pi` 可执行文件（优先使用 `PI_BIN` 环境变量 -> 检查 `~/.npm-global/bin/pi` -> `/usr/local/bin/pi` -> `/usr/bin/pi` -> 系统 `PATH`），派生 `pi --mode rpc --session-dir ...` 子进程。
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",

package/public/app.js

@@ -29,8 +29,7 @@ const state = {
   currentSessionFile: null,
   // entriesByCallId: for live assistant messages we accumulate tool calls + text
   streamingMsg: null,   // DOM node for the in-progress assistant message
-  streamingText: "",    // accumulated text deltas
-  streamingThinking: "",
+  streamingItems: [],   // Array of { type: "thinking"|"text"|"tool", text?, tc? } in chronological sequence
   thinkingOpen: true,
   thinkingUserToggled: false,
   activeToolCalls: new Map(), // toolCallId -> { node, body, state }
@@ -88,6 +87,11 @@ async function loadServerConfig() {
     const data = await res.json();
     if (data.home) state.homeDir = data.home;
     if (data.serverCwd) state.serverCwd = data.serverCwd;
+    if (data.version) {
+      state.version = data.version;
+      const verEl = $("#appVersion");
+      if (verEl) verEl.textContent = `v${data.version}`;
+    }
   } catch {}
   if (!state.cwd) {
     state.cwd = localStorage.getItem("pi_cwd") || state.serverCwd || state.homeDir || "";
@@ -205,6 +209,8 @@ async function copyToClipboard(text) {
 }
 
 function renderMarkdown(md) {
+  if (!md) return "";
+  if (typeof md !== "string") md = String(md);
   // Strip headings of # etc. and convert to proper elements with escaping.
   // We do a fenced-code-first approach so we don't process markdown inside code.
   const parts = [];
@@ -273,11 +279,8 @@ function renderInlineMd(text) {
     if (lines[i].includes("|") && i + 1 < lines.length && /^\s*\|?[\s\-:|]+\|?\s*$/.test(lines[i + 1]) && lines[i+1].includes("-")) {
       // collect table block
       const header = lines[i];
-      let rows = [];
-      let j = i;
-      out.push({ kind: "blockskip", range: [i, j] });
       const tblLines = [header, lines[i + 1]];
-      j = i + 2;
+      let j = i + 2;
       while (j < lines.length && lines[j].includes("|")) { tblLines.push(lines[j]); j++; }
       out.push({ kind: "table", lines: tblLines });
       i = j;
@@ -288,6 +291,17 @@ function renderInlineMd(text) {
   }
   let outHtml = "";
   let para = [];
+  let linkListOpen = null;
+  let linkListOrdered = null;
+
+  function flushList() {
+    if (linkListOpen) {
+      outHtml += linkListOpen === "ol" ? "</ol>" : "</ul>";
+      linkListOpen = null;
+      linkListOrdered = null;
+    }
+  }
+
   function flushPara() {
     if (para.length === 0) return;
     const block = para.join("\n").trim();
@@ -297,39 +311,43 @@ function renderInlineMd(text) {
   for (const seg of out) {
     if (seg.kind === "table") {
       flushPara();
+      flushList();
       outHtml += mdTable(seg.lines);
     } else if (seg.kind === "line") {
       // headings
       const m = seg.text.match(/^(#{1,6})\s+(.*)$/);
       if (m) {
         flushPara();
+        flushList();
         const level = m[1].length;
         outHtml += `<h${level}>${mdInlineBlock(m[2])}</h${level}>`;
       } else if (/^\s*$/.test(seg.text)) {
         flushPara();
+        flushList();
       } else if (/^>\s?/.test(seg.text)) {
         // blockquote line — group simple consecutive ones
         flushPara();
+        flushList();
         outHtml += `<blockquote>${mdInlineBlock(seg.text.replace(/^>\s?/, ""))}</blockquote>`;
       } else if (/^\s*[-*]\s+/.test(seg.text) || /^\s*\d+\.\s+/.test(seg.text)) {
         // list item — group consecutive into ul/ol
         // simple inline handling: wrap each list item line.
         const isOrdered = /^\s*\d+\.\s+/.test(seg.text);
-        if (!out.linkListOpen || out.linkListOrdered !== isOrdered) {
+        if (!linkListOpen || linkListOrdered !== isOrdered) {
           flushPara();
-          if (out.linkListOpen) outHtml += out.linkListOpen === "ol" ? "</ol>" : "</ul>";
-          out.linkListOpen = isOrdered ? "ol" : "ul";
-          out.linkListOrdered = isOrdered;
-          outHtml += "<" + out.linkListOpen + ">";
+          flushList();
+          linkListOpen = isOrdered ? "ol" : "ul";
+          linkListOrdered = isOrdered;
+          outHtml += "<" + linkListOpen + ">";
         }
         outHtml += `<li>${mdInlineBlock(seg.text.replace(/^\s*([-*]|\d+\.)\s+/, ""))}</li>`;
       } else {
-        if (out.linkListOpen) { outHtml += out.linkListOpen === "ol" ? "</ol>" : "</ul>"; out.linkListOpen = null; }
+        flushList();
         para.push(seg.text);
       }
     }
   }
-  if (out.linkListOpen) { outHtml += out.linkListOpen === "ol" ? "</ol>" : "</ul>"; out.linkListOpen = null; }
+  flushList();
   flushPara();
   // restore inline code
   outHtml = outHtml.replace(/\u0000CODE(\d+)\u0000/g, (_, n) => `<code>${escapeHtml(codeChunks[+n].slice(1, -1))}</code>`);
@@ -454,6 +472,11 @@ function initMobileToolbarFab() {
 
 async function loadSession(file) {
   state.currentSessionFile = file;
+  state.streaming = false;
+  state.streamingItems = [];
+  state.streamingMsg = null;
+  state.activeToolCalls.clear();
+  setComposerAborting(false);
   try {
     const newUrl = window.location.pathname + "?session=" + encodeURIComponent(file);
     window.history.replaceState({ session: file }, "", newUrl);
@@ -515,6 +538,14 @@ function reconstructFromEntries(entries) {
         }
         return part;
       });
+      if (m.stopReason === "error" && content.length === 0) {
+        let errMsg = m.errorMessage || "生成失败（模型返回错误）";
+        try {
+          const parsed = JSON.parse(errMsg);
+          if (parsed.error?.message) errMsg = parsed.error.message;
+        } catch {}
+        content.push({ type: "text", text: `⚠️ **生成失败**: ${errMsg}` });
+      }
       out.push({ role: "assistant", content, ts: m.timestamp, usage: m.usage });
     }
     // toolResult entries are attached directly to assistant toolCall parts, so they don't produce standalone messages
@@ -536,8 +567,7 @@ function clearChat() {
   const chatInner = $("#chat-inner");
   chatInner.innerHTML = "";
   state.streamingMsg = null;
-  state.streamingText = "";
-  state.streamingThinking = "";
+  state.streamingItems = [];
   state.thinkingOpen = true;
   state.thinkingUserToggled = false;
   state.activeToolCalls.clear();
@@ -650,6 +680,39 @@ function getToolCommandToCopy(call) {
   return summaryArgs(call.name, call.arguments);
 }
 
+function updateToolBlockCopyBtn(tc, call) {
+  if (!tc || !tc.head) return;
+  const cmd = getToolCommandToCopy(call);
+  if (!cmd) return;
+  let btn = tc.head.querySelector(".btn-copy-tool");
+  if (!btn) {
+    btn = el("button", {
+      class: "btn-copy-tool",
+      type: "button",
+      title: "复制指令/参数",
+      onclick: async (e) => {
+        e.stopPropagation();
+        const curCmd = tc.head._cmdToCopy || cmd;
+        if (await copyToClipboard(curCmd)) {
+          btn.classList.add("copied");
+          const span = btn.querySelector("span");
+          if (span) span.textContent = "已复制";
+          setTimeout(() => {
+            btn.classList.remove("copied");
+            if (span) span.textContent = "复制";
+          }, 1500);
+        }
+      }
+    }, [
+      el("svg", { html: '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>' }),
+      el("span", { text: "复制" })
+    ]);
+    const stateEl = tc.head.querySelector(".state");
+    tc.head.insertBefore(btn, stateEl);
+  }
+  tc.head._cmdToCopy = cmd;
+}
+
 function makeToolBlockFromCall(call) {
   const block = el("div", { class: "tool-block" });
   const hasResult = Boolean(call.result);
@@ -670,7 +733,8 @@ function makeToolBlockFromCall(call) {
     title: "复制指令/参数",
     onclick: async (e) => {
       e.stopPropagation();
-      if (await copyToClipboard(cmdToCopy)) {
+      const curCmd = head._cmdToCopy || cmdToCopy;
+      if (await copyToClipboard(curCmd)) {
         copyBtn.classList.add("copied");
         const span = copyBtn.querySelector("span");
         if (span) span.textContent = "已复制";
@@ -692,6 +756,7 @@ function makeToolBlockFromCall(call) {
     copyBtn,
     el("span", { class: stateClass, text: stateText }),
   ]);
+  head._cmdToCopy = cmdToCopy;
 
   const bodyText = hasResult ? (resultText || "(无输出)") : "执行中…";
   const body = el("div", { class: "tool-body", html: escapeHtml(bodyText) });
@@ -735,6 +800,13 @@ function scrollBottom() {
   chat.scrollTop = chat.scrollHeight;
 }
 
+function getStreamingFullText() {
+  return state.streamingItems
+    .filter(it => it.type === "text" && it.text)
+    .map(it => it.text)
+    .join("\n\n");
+}
+
 // ---- Streaming: handle live assistant message ----
 function ensureStreamingMsg() {
   if (state.streamingMsg) return state.streamingMsg;
@@ -748,9 +820,7 @@ function ensureStreamingMsg() {
         title: "复制回答全文",
         onclick: async (e) => {
           e.stopPropagation();
-          const contentEl = node.querySelector(".content");
-          if (!contentEl) return;
-          const text = contentEl.textContent || "";
+          const text = getStreamingFullText();
           if (await copyToClipboard(text)) {
             showToast("已复制回答全文");
           }
@@ -763,8 +833,7 @@ function ensureStreamingMsg() {
     el("div", { class: "content" }),
   ]);
   state.streamingMsg = node;
-  state.streamingText = "";
-  state.streamingThinking = "";
+  state.streamingItems = [];
   state.thinkingOpen = true;
   state.thinkingUserToggled = false;
   state.activeToolCalls.clear();
@@ -789,29 +858,30 @@ function refreshStreamingContent() {
   const content = node.querySelector(".content");
   content.innerHTML = "";
 
-  const hasThinking = Boolean(state.streamingThinking);
-  const hasText = Boolean(state.streamingText);
-  const hasTools = state.activeToolCalls.size > 0;
-
-  // Immediate visual feedback placeholder while waiting for LLM first token
-  if (state.streaming && !hasThinking && !hasText && !hasTools) {
-    content.appendChild(el("div", { class: "thinking-placeholder" }, [
-      el("span", { class: "thinking-spinner" }),
-      el("span", { class: "thinking-label", text: "正在思考中…" })
-    ]));
+  if (state.streamingItems.length === 0) {
+    if (state.streaming) {
+      content.appendChild(el("div", { class: "thinking-placeholder" }, [
+        el("span", { class: "thinking-spinner" }),
+        el("span", { class: "thinking-label", text: "正在思考中…" })
+      ]));
+    }
     scrollBottom();
     return;
   }
 
-  if (state.streamingThinking) {
-    const isActivelyThinking = state.streaming && !hasText && !hasTools;
-    content.appendChild(makeThinkingBlock(state.streamingThinking, isActivelyThinking));
-  }
-  for (const v of state.activeToolCalls.values()) {
-    content.appendChild(v.block);
-  }
-  if (state.streamingText) {
-    content.appendChild(el("div", { html: renderMarkdown(state.streamingText) + (state.streaming ? '<span class="typing-cursor"></span>' : "") }));
+  const lastIdx = state.streamingItems.length - 1;
+  for (let i = 0; i < state.streamingItems.length; i++) {
+    const item = state.streamingItems[i];
+    const isLast = (i === lastIdx);
+    if (item.type === "thinking") {
+      const isActivelyThinking = state.streaming && isLast;
+      content.appendChild(makeThinkingBlock(item.text, isActivelyThinking));
+    } else if (item.type === "tool") {
+      if (item.tc?.block) content.appendChild(item.tc.block);
+    } else if (item.type === "text") {
+      const showCursor = state.streaming && isLast;
+      content.appendChild(el("div", { html: renderMarkdown(item.text) + (showCursor ? '<span class="typing-cursor"></span>' : "") }));
+    }
   }
   scrollBottom();
 }
@@ -820,10 +890,19 @@ function finalizeStreamingMsg() {
   state.streaming = false;
   if (state.streamingMsg) {
     refreshStreamingContent();
+    const finalFullText = getStreamingFullText();
+    const btn = state.streamingMsg.querySelector(".btn-copy-msg");
+    if (btn) {
+      btn.onclick = async (e) => {
+        e.stopPropagation();
+        if (await copyToClipboard(finalFullText)) {
+          showToast("已复制回答全文");
+        }
+      };
+    }
   }
   state.streamingMsg = null;
-  state.streamingText = "";
-  state.streamingThinking = "";
+  state.streamingItems = [];
   state.thinkingOpen = true;
   state.thinkingUserToggled = false;
   state.activeToolCalls.clear();
@@ -967,8 +1046,7 @@ function connectWs(opts = {}) {
   // from the previous connection so the new connection starts clean.
   if (opts.explicitNewSession) {
     state.streaming = false;
-    state.streamingText = "";
-    state.streamingThinking = "";
+    state.streamingItems = [];
     state.streamingMsg = null;
     state.activeToolCalls.clear();
   }
@@ -1119,18 +1197,6 @@ function handlePiMessage(obj) {
       const m = obj.message;
       if (m && m.role !== "assistant") break;
       ensureStreamingMsg();
-      // Each turn within one agent reply gets its own message_start, so reset
-      // the text/thinking accumulators here so text_end's overwrite (and
-      // text_delta accumulation) only reflect THIS message, not a stale
-      // one from the previous turn. Tool-call blocks persist across the
-      // whole reply (keyed by toolCallId) and stay visible.
-      state.streamingText = "";
-      state.streamingThinking = "";
-      // NOTE: do NOT pre-fill streamingText from message.content here.
-      // pi sends the full content on message_start for assistant turns but
-      // then also streams the same text via text_delta → pre-filling would
-      // duplicate it ("WS_OKWS_OK"). We rely on text_delta for incremental
-      // display and on text_end.content for the final, authoritative text.
       break;
     }
     case "message_end": {
@@ -1141,8 +1207,13 @@ function handlePiMessage(obj) {
       // those failures explicitly so the user isn't left staring at
       // an empty reply.
       const m = obj.message;
-      if (m && m.role === "assistant" && m.stopReason === "error" && !state.streamingText) {
-        state.streamingText = "⚠️ 生成失败（模型返回错误）。可能是当前模型不可用，请从右上角切换一个模型后重试。";
+      if (m && m.role === "assistant" && m.stopReason === "error") {
+        let errMsg = m.errorMessage || "生成失败（模型返回错误）。可能是当前模型不可用，请从右上角切换一个模型后重试。";
+        try {
+          const parsed = JSON.parse(errMsg);
+          if (parsed.error?.message) errMsg = parsed.error.message;
+        } catch {}
+        state.streamingItems.push({ type: "text", text: `⚠️ **${escapeHtml(errMsg)}**` });
         refreshStreamingContent();
       }
       break;
@@ -1151,22 +1222,35 @@ function handlePiMessage(obj) {
       const ev = obj.assistantMessageEvent;
       if (!ev) break;
       if (ev.type === "text_delta") {
-        state.streamingText += ev.delta;
+        const last = state.streamingItems[state.streamingItems.length - 1];
+        if (last && last.type === "text") {
+          last.text += ev.delta;
+        } else {
+          state.streamingItems.push({ type: "text", text: ev.delta });
+        }
         refreshStreamingContentDebounced();
       } else if (ev.type === "text_end") {
-        // Authoritative final text for this content slot. Overwrite any
-        // accumulated/delta text so we display exactly what the model
-        // produced (handles non-streamed replies where deltas never come,
-        // and avoids duplicates when both message_start.content and deltas
-        // carried the same string).
-        if (typeof ev.content === "string") state.streamingText = ev.content;
+        // Authoritative final text for this content slot.
+        if (typeof ev.content === "string") {
+          const last = state.streamingItems[state.streamingItems.length - 1];
+          if (last && last.type === "text") {
+            last.text = ev.content;
+          } else if (ev.content) {
+            state.streamingItems.push({ type: "text", text: ev.content });
+          }
+        }
         refreshStreamingContent();
       } else if (ev.type === "thinking_delta" || ev.type === "thinking_start" || ev.type === "thinking_end") {
         // For thinking we accumulate deltas; thinking_delta carries .delta
-        if (ev.type === "thinking_delta") {
-          state.streamingThinking += ev.delta || "";
+        if (ev.type === "thinking_delta" && ev.delta) {
+          const last = state.streamingItems[state.streamingItems.length - 1];
+          if (last && last.type === "thinking") {
+            last.text += ev.delta;
+          } else {
+            state.streamingItems.push({ type: "thinking", text: ev.delta });
+          }
+          refreshStreamingContentDebounced();
         }
-        refreshStreamingContentDebounced();
       } else if (ev.type === "toolcall_start") {
         ensureStreamingMsg();
         const call = ev.toolCall || { id: obj.toolCallId || ev.id, name: obj.toolName, arguments: obj.args };
@@ -1189,14 +1273,17 @@ function handlePiMessage(obj) {
         if (tc) {
           const argsEl = tc.head.querySelector(".args");
           if (argsEl) argsEl.textContent = summaryArgs(call.name, call.arguments);
+          updateToolBlockCopyBtn(tc, call);
         }
       }
       break;
     }
-    case "tool_execution_start":
+    case "tool_execution_start": {
       ensureStreamingMsg();
-      ensureToolBlock(obj.toolCallId, obj.toolName, obj.args);
+      const tc = ensureToolBlock(obj.toolCallId, obj.toolName, obj.args);
+      if (tc) updateToolBlockCopyBtn(tc, { name: obj.toolName, arguments: obj.args });
       break;
+    }
     case "tool_execution_update": {
       const tc = state.activeToolCalls.get(obj.toolCallId);
       if (tc) {
@@ -1217,6 +1304,9 @@ function handlePiMessage(obj) {
       }
       break;
     }
+    case "extension_ui_request":
+      handleExtensionUiRequest(obj);
+      break;
     case "pi_exit":
       finalizeStreamingMsg();
       state.streaming = false;
@@ -1229,11 +1319,58 @@ function handlePiMessage(obj) {
   }
 }
 
+function handleExtensionUiRequest(req) {
+  const { id, method, title, message, options, placeholder, prefill, notifyType } = req;
+  if (method === "notify") {
+    showToast((notifyType === "warning" ? "⚠️ " : notifyType === "error" ? "❌ " : "ℹ️ ") + (message || ""));
+    return;
+  }
+  if (method === "confirm") {
+    const text = (title ? title + "\n" : "") + (message || "");
+    const confirmed = window.confirm(text || "是否确认？");
+    sendWs({ type: "extension_ui_response", id, confirmed });
+    return;
+  }
+  if (method === "select") {
+    const promptText = (title ? title + "\n" : "") + (options || []).map((o, idx) => `${idx + 1}. ${o}`).join("\n");
+    const res = window.prompt(promptText, "1");
+    if (res === null) {
+      sendWs({ type: "extension_ui_response", id, cancelled: true });
+    } else {
+      const idx = parseInt(res.trim(), 10) - 1;
+      const val = (options && options[idx]) ? options[idx] : res.trim();
+      sendWs({ type: "extension_ui_response", id, value: val });
+    }
+    return;
+  }
+  if (method === "input") {
+    const res = window.prompt(title || "请输入：", placeholder || "");
+    if (res === null) {
+      sendWs({ type: "extension_ui_response", id, cancelled: true });
+    } else {
+      sendWs({ type: "extension_ui_response", id, value: res });
+    }
+    return;
+  }
+  if (method === "editor") {
+    const res = window.prompt((title || "编辑内容") + " (多行内容可用 \\n 分隔)：", prefill || "");
+    if (res === null) {
+      sendWs({ type: "extension_ui_response", id, cancelled: true });
+    } else {
+      sendWs({ type: "extension_ui_response", id, value: res });
+    }
+    return;
+  }
+}
+
 function ensureToolBlock(toolCallId, name, args) {
   if (state.activeToolCalls.has(toolCallId)) return state.activeToolCalls.get(toolCallId);
-  makeToolBlockFromCall({ id: toolCallId, name, arguments: args });
+  const block = makeToolBlockFromCall({ id: toolCallId, name, arguments: args });
+  const entry = state.activeToolCalls.get(toolCallId) || { block, body: block._body, head: block._head };
+  state.activeToolCalls.set(toolCallId, entry);
+  state.streamingItems.push({ type: "tool", id: toolCallId, tc: entry });
   refreshStreamingContentDebounced();
-  return state.activeToolCalls.get(toolCallId);
+  return entry;
 }
 
 // We render incoming session entries (for live new messages we use streaming
@@ -1261,9 +1398,6 @@ function updateState(d) {
       finalizeStreamingMsg();
       state.streaming = false;
       setComposerAborting(false);
-      if (state.currentSessionFile) {
-        loadSession(state.currentSessionFile);
-      }
       refreshSessions();
     }
   }
@@ -1664,13 +1798,6 @@ function init() {
     connectWs({});
     showEmptyState(true);
   }
-  // Pull the current pi state (model, session id, thinking level) once the
-  // socket is open. connectWs() registers onopen asynchronously; defer long
-  // enough that the writable is ready. (An earlier version wrote the `\n` as
-  // literal backslash-n inside a single-line comment, so setTimeout never ran
-  // and the model pill never populated.)
-  setTimeout(() => sendWs({ type: "get_state" }), 400);
-  setTimeout(() => sendWs({ type: "get_available_models" }), 600);
 }
 
 document.addEventListener("DOMContentLoaded", init);

package/public/index.html

@@ -23,7 +23,10 @@
       <div class="session-list" id="sessionList"></div>
       <div class="sidebar-bottom">
         <div id="connStatus" class="conn-status" title="点击可重新连接"><span id="connDot" style="color: var(--danger);">●</span>&nbsp;<span id="connLabel">连接中…</span></div>
-        <div style="margin-top:4px;"><a href="https://pi.dev" target="_blank" rel="noopener">pi.dev</a></div>
+        <div class="sidebar-bottom-meta">
+          <a href="https://pi.dev" target="_blank" rel="noopener">pi.dev</a>
+          <span id="appVersion" class="app-version" title="pi-web-chat 版本"></span>
+        </div>
       </div>
     </aside>
 

package/public/style.css

@@ -141,6 +141,17 @@ body {
 }
 .sidebar-bottom a { color: var(--text-muted); text-decoration: none; }
 .sidebar-bottom a:hover { color: var(--text); }
+.sidebar-bottom-meta {
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.app-version {
+  font-size: 11px;
+  color: var(--text-dim);
+  user-select: none;
+}
 .conn-status {
   display: inline-flex;
   align-items: center;

package/server.js

@@ -4,7 +4,8 @@
 import { spawn } from "child_process";
 import { randomUUID } from "crypto";
 import { readFile, readdir, stat } from "fs/promises";
-import { existsSync } from "fs";
+import { readFileSync, existsSync } from "fs";
+import { StringDecoder } from "string_decoder";
 import express from "express";
 import { WebSocketServer } from "ws";
 import path from "path";
@@ -14,6 +15,12 @@ import { dirname } from "path";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
+let PKG_VERSION = "1.0.0";
+try {
+  const pkg = JSON.parse(readFileSync(path.join(__dirname, "package.json"), "utf8"));
+  if (pkg.version) PKG_VERSION = pkg.version;
+} catch {}
+
 // Resolve pi binary: prefer PI_BIN env, else search PATH, else fall back to ~/.npm-global/bin/pi
 function resolvePiBin() {
   if (process.env.PI_BIN && existsSync(process.env.PI_BIN)) return process.env.PI_BIN;
@@ -109,6 +116,8 @@ const nowMs = () => Date.now();
 
 // Active pi RPC processes pooled by session key (`${cwd}:${resolvedSessionPath}`)
 const activeAgents = new Map();
+// Master set of all live PiAgent instances (both keyed and unkeyed)
+const allAgents = new Set();
 
 class PiAgent {
   constructor(cwd) {
@@ -119,6 +128,7 @@ class PiAgent {
     this.pending = new Map();      // reqId -> resolve()
     this.proc = null;
     this.buffer = "";
+    this.decoder = new StringDecoder("utf8");
     this.alive = false;
     // lifecycle / background-task state
     this.state = "idle";            // "idle" | "streaming"
@@ -149,6 +159,9 @@ class PiAgent {
   detachWs(ws) {
     this.sockets.delete(ws);
     if (this.sockets.size === 0) {
+      // Reset event buffer so we only capture events that happen while nobody is connected
+      this.eventBuffer = [];
+      this.bufferHead = 0;
       // Browser closed. We do NOT kill the subprocess here: a background task
       // keeps running. We only arm the idle-kill, which fires once the agent
       // is truly idle (no streaming, no pending requests) for IDLE_TIMEOUT_MS.
@@ -228,6 +241,7 @@ class PiAgent {
       env: { ...process.env, PI_SKIP_VERSION_CHECK: "1" },
     });
     this.alive = true;
+    allAgents.add(this);
     this.startedAt = nowMs();
     this.lastActivityAt = this.startedAt;
     if (MAX_AGENT_LIFETIME_MS > 0) {
@@ -238,17 +252,27 @@ class PiAgent {
     }
     this.proc.on("error", (err) => {
       this.alive = false;
+      allAgents.delete(this);
+      if (this.sessionKey) activeAgents.delete(this.sessionKey);
+      this.cancelIdleKill();
+      if (this.lifetimeTimer) { clearTimeout(this.lifetimeTimer); this.lifetimeTimer = null; }
       console.error(`[pi spawn error]`, err);
       this.wsSend({ type: "pi_exit", error: err.message });
       for (const s of this.sockets) { try { s.close(); } catch {} }
       this.sockets.clear();
     });
+    if (this.proc.stdin) {
+      this.proc.stdin.on("error", (err) => {
+        console.warn(`[pi stdin error]`, err.message);
+      });
+    }
     this.proc.stdout.on("data", (d) => this.onStdout(d));
     this.proc.stderr.on("data", (d) => {
       process.stderr.write(`[pi stderr] ${d}`);
     });
     this.proc.on("exit", (code) => {
       this.alive = false;
+      allAgents.delete(this);
       console.log(`pi exited (code=${code})`);
       this.wsSend({ type: "pi_exit", code });
       if (this.sessionKey) activeAgents.delete(this.sessionKey);
@@ -260,7 +284,7 @@ class PiAgent {
   }
 
   onStdout(chunk) {
-    this.buffer += chunk.toString("utf8");
+    this.buffer += this.decoder.write(chunk);
     while (true) {
       const nl = this.buffer.indexOf("\n");
       if (nl === -1) break;
@@ -283,7 +307,11 @@ class PiAgent {
     switch (obj.type) {
       case "agent_start": this.setStreaming(true); break;
       case "agent_end": this.setStreaming(false); break;
-      case "agent_settled": this.setStreaming(false); break;
+      case "agent_settled":
+        this.setStreaming(false);
+        this.eventBuffer = [];
+        this.bufferHead = 0;
+        break;
       case "pi_exit": this.state = "idle"; break;
     }
     // Capture the most recent user prompt for the background-task dashboard.
@@ -325,16 +353,26 @@ class PiAgent {
       try { ws.send(JSON.stringify(ev)); } catch {}
     }
     try { ws.send(JSON.stringify({ type: "backfill_end", streaming: this.isBusy, state: this.state })); } catch {}
+    // Clear buffer once consumed by the reconnecting client
+    this.eventBuffer = [];
+    this.bufferHead = 0;
   }
 
   send(cmd) {
-    return new Promise((resolve, reject) => {
-      if (!this.alive) return reject(new Error("pi process not alive"));
+    return new Promise((resolve) => {
+      if (!this.alive || !this.proc || !this.proc.stdin || this.proc.stdin.destroyed) {
+        return resolve({ type: "response", id: cmd.id || "0", success: false, error: "pi process not alive" });
+      }
       const id = String(++this.reqId);
       const payload = { ...cmd, id };
       this.pending.set(id, resolve);
       this.markActivity();
-      this.proc.stdin.write(JSON.stringify(payload) + "\n");
+      try {
+        this.proc.stdin.write(JSON.stringify(payload) + "\n");
+      } catch (err) {
+        this.pending.delete(id);
+        return resolve({ type: "response", id, success: false, error: err.message });
+      }
       // Safety: timeout so a dropped response doesn't leak the promise.
       setTimeout(() => {
         if (this.pending.has(id)) {
@@ -347,9 +385,13 @@ class PiAgent {
   }
 
   sendNoReply(cmd) {
-    if (!this.alive) throw new Error("pi process not alive");
+    if (!this.alive || !this.proc || !this.proc.stdin || this.proc.stdin.destroyed) return;
     this.markActivity();
-    this.proc.stdin.write(JSON.stringify(cmd) + "\n");
+    try {
+      this.proc.stdin.write(JSON.stringify(cmd) + "\n");
+    } catch (e) {
+      console.error("[pi sendNoReply error]", e);
+    }
   }
 
   wsSend(obj, excludeSocket = null) {
@@ -390,6 +432,7 @@ class PiAgent {
 
   stop() {
     this.alive = false;
+    allAgents.delete(this);
     this.cancelIdleKill();
     if (this.lifetimeTimer) { clearTimeout(this.lifetimeTimer); this.lifetimeTimer = null; }
     if (this.sessionKey) {
@@ -419,6 +462,7 @@ app.get("/api/config", (req, res) => {
   res.json({
     home: home(),
     serverCwd: process.cwd(),
+    version: PKG_VERSION,
   });
 });
 
@@ -441,9 +485,9 @@ app.get("/api/validate-dir", async (req, res) => {
 // Shows which sessions are still running headlessly after the browser closed.
 app.get("/api/agents", (req, res) => {
   const agents = [];
-  for (const [key, a] of activeAgents.entries()) {
+  for (const a of allAgents) {
     if (!a.alive) continue;
-    agents.push({ key, ...a.status() });
+    agents.push({ key: a.sessionKey || "unkeyed", ...a.status() });
   }
   res.json({ count: agents.length, idleTimeoutMs: IDLE_TIMEOUT_MS, maxLifetimeMs: MAX_AGENT_LIFETIME_MS, agents });
 });
@@ -554,7 +598,8 @@ app.get("/api/session", async (req, res) => {
     // Security check: ensure the file path is within SESSIONS_DIR
     const resolvedFile = path.resolve(file);
     const resolvedSessionsDir = path.resolve(SESSIONS_DIR);
-    if (!resolvedFile.startsWith(resolvedSessionsDir)) {
+    const relPath = path.relative(resolvedSessionsDir, resolvedFile);
+    if (relPath.startsWith("..") || path.isAbsolute(relPath)) {
       return res.status(403).json({ error: "Access denied" });
     }
 
@@ -673,7 +718,7 @@ wss.on("connection", (ws, req) => {
     // memory. The cap protects small-memory hosts from runaway browser tabs.
     if (MAX_CONCURRENT_AGENTS > 0) {
       let live = 0;
-      for (const a of activeAgents.values()) if (a.alive) live++;
+      for (const a of allAgents) if (a.alive) live++;
       if (live >= MAX_CONCURRENT_AGENTS) {
         const msg = `Server is at capacity (${live}/${MAX_CONCURRENT_AGENTS} pi agents). ` +
                     `Close another tab or raise MAX_CONCURRENT_AGENTS.`;
@@ -714,6 +759,13 @@ wss.on("connection", (ws, req) => {
         agent.sendNoReply({ type: "abort" });
         break;
       case "new_session":
+        if (agent.sessionKey) {
+          activeAgents.delete(agent.sessionKey);
+          agent.sessionKey = null;
+        }
+        agent.lastUserPrompt = null;
+        agent.eventBuffer = [];
+        agent.bufferHead = 0;
         agent.send({ type: "new_session" });
         break;
       case "switch_session":
@@ -741,6 +793,9 @@ wss.on("connection", (ws, req) => {
       case "set_model":
         agent.send({ type: "set_model", provider: msg.provider, modelId: msg.modelId });
         break;
+      case "extension_ui_response":
+        agent.sendNoReply({ type: "extension_ui_response", ...msg });
+        break;
       default:
         // Unknown — just forward, might be a raw RPC command.
         agent.send(msg);
@@ -762,8 +817,8 @@ wss.on("connection", (ws, req) => {
 
 // ---- Graceful shutdown: stop all background pi agents on exit ----
 function shutdownAllAgents(reason) {
-  console.log(`\n[pi-web-chat] ${reason}: stopping ${activeAgents.size} background pi agent(s)…`);
-  for (const a of [...activeAgents.values()]) {
+  console.log(`\n[pi-web-chat] ${reason}: stopping ${allAgents.size} background pi agent(s)…`);
+  for (const a of [...allAgents]) {
     try { a.stop(); } catch {}
   }
   clearInterval(heartbeatInterval);
@@ -774,7 +829,7 @@ process.on("SIGINT", () => { shutdownAllAgents("SIGINT"); process.exit(0); });
 process.on("SIGTERM", () => { shutdownAllAgents("SIGTERM"); process.exit(0); });
 process.on("exit", () => {
   // best-effort: kill any still-living children synchronously on hard exit
-  for (const a of activeAgents.values()) {
+  for (const a of allAgents) {
     try { a.proc && a.proc.kill("SIGKILL"); } catch {}
   }
 });