@liguoshuai/pi-web-chat 2.1.0 → 2.3.0

package/docs/CHANGELOG.md

@@ -7,6 +7,44 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [2.3.0] - 2026-08-31
+
+### Fixed & Improved
+- **后台异步长任务稳定性与持久化机制全面强化 (Background Async Persistence & Lifetime Fix)**：
+  - **移除 30 分钟无条件强杀定时器**：将 `MAX_AGENT_LIFETIME_MS` 默认设为 `0`（禁用硬超时杀进程）。若用户配置了正数生命周期上限，也会严格判断 `isBusy`（正在生成/执行工具中）与 `hasListeners`（仍有客户端监听），任务执行期间绝不强杀子进程。
+  - **扩大离线事件环形缓冲区**：将 `EVENT_BUFFER_SIZE` 默认容量从 2000 提升至 5000，保障长时间后台离线输出不丢帧。
+- **Web 端平滑多任务切换与静默转入后台 (Seamless Background Session Switch)**：
+  - 移除了在生成过程中新建会话（`startNewSession`）或侧边栏切换会话（`loadSession`）时的强制中断（`abortGeneration()`）逻辑。
+  - 切换或新建会话时，原会话平滑转入后台静默继续执行，并弹出轻提示告知用户。
+  - 修复了断线重连（`ws.onopen`）与离线事件增量回放（Backfill）之间的 DOM 渲染竞态条件，避免流式内容被意外清除。
+- **侧边栏会话后台执行状态感知 (Sidebar Background Execution Indicator)**：
+  - 服务端 `/api/sessions` 接口扩展返回 `isStreaming` 状态字段，精准反馈每个会话对应的后台 Agent 是否正在忙碌。
+  - Web 端侧边栏为正在后台生成中的会话实时展示 `⚡ 运行中` 呼吸动画状态徽标。
+  - 页面可见性恢复（`visibilitychange`）及定时后台状态轮询自动刷新各会话状态。
+
+---
+
+## [2.2.0] - 2026-08-30
+
+### Fixed & Improved
+- **服务端会话路径解析与遍历安全加固 (Session Path Resolution & Security)**：
+  - 修复了 `/api/session`（GET 与 DELETE）在处理会话相对路径时由于错误相对路径基准导致的误拦截（403 Forbidden），增强为相对于 `config.sessionsDir` 的安全解析并保留严格的路径越界校验与符号链接真实路径防穿透防护。
+  - 会话扫描增强为多层级安全目录递归遍历（`listAllSessionFiles`），支持更深的会话目录结构与符号链接解析。
+  - 为服务端 `sessionMetadataCache` 增加 LRU/最大条目上限限制（5000条），防止长期运行内存泄漏。
+- **服务端网关稳健性与跨平台优化 (Gateway Robustness & Cross-Platform)**：
+  - 完善了 WebSocket 握手鉴权响应对请求 `id` 的透传关联，优化了 `PING`/`heartbeat` 的 ID 支持。
+  - 规范了 `PROMPT` 消息中的 `message` 字符串与 `images` 数组格式，防止向 Pi 进程传递 `undefined`。
+  - 改进了 SSE 客户端异常断开时的错误捕获与失效监听器及时清理。
+  - 增强了 `resolvePiBin` 的跨平台检测路径，支持 macOS Homebrew、Linux `~/.local/bin`、`~/.cargo/bin` 等常见环境。
+- **Web 端多端同步与渲染优化 (Web UI & Markdown Rendering)**：
+  - 修复了 `remote_user_prompt` 事件未同步呈现多端上传的 `images` 附件的问题。
+  - 修复了 Markdown 解析器中 URL 包含查询参数时因多次转义造成的双重转义（Double Escaping）问题，并支持 `mailto:` 链接解析。
+- **协议库与 TypeScript 类型定义完善 (`@liguoshuai/pi-chat-protocol`)**：
+  - 新增 `createSetSessionNameMessage`、`createGetEntriesMessage`、`createGetStateMessage`、`createGetAvailableModelsMessage`、`createExtensionUiResponseMessage` 辅助构造方法。
+  - 增强了 `SET_SESSION_NAME` 与 `SET_THINKING_LEVEL` 的数据校验与 TypeScript 类型声明。
+
+---
+
 ## [2.1.0] - 2026-08-30
 
 ### Fixed & Improved

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",
@@ -40,12 +40,13 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@liguoshuai/pi-chat-protocol": "2.1.0",
-    "@liguoshuai/pi-chat-server": "2.1.0",
+    "@liguoshuai/pi-chat-protocol": "2.3.0",
+    "@liguoshuai/pi-chat-server": "2.3.0",
     "express": "^4.21.2",
     "ws": "^8.18.0"
   },
   "scripts": {
+    "build": "node --check server.js && node --check bin/pi-web-chat.js && node --check public/app.js",
     "start": "node server.js",
     "dev": "node --watch server.js",
     "test": "node --test"

package/public/app.js

@@ -456,7 +456,7 @@ function sanitizeUrl(url) {
   if (!url) return "#";
   const trimmed = url.trim();
   if (/^(https?:\/\/|mailto:)/i.test(trimmed)) {
-    return escapeHtml(trimmed);
+    return trimmed.replace(/"/g, """).replace(/'/g, "'");
   }
   return "#";
 }
@@ -474,7 +474,7 @@ function mdInlineBlock(text) {
   // italic (underscore): only match boundary/space so identifier_names are preserved
   s = s.replace(/(^|[\s(\[<,;:])_([^_\s](?:[^_]*?[^_\s])?)_(?=[\s)\]>,;:!?.]|$)/g, "$1<em>$2</em>");
   // links [txt](url) - strictly sanitize URL
-  s = s.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, (match, txt, url) => {
+  s = s.replace(/\[([^\]]+)\]\(((?:https?:\/\/|mailto:)[^\s)]+)\)/g, (match, txt, url) => {
     const safeUrl = sanitizeUrl(url);
     return `<a href="${safeUrl}" target="_blank" rel="noopener">${txt}</a>`;
   });
@@ -546,6 +546,17 @@ function renderSidebar(sessions) {
       },
     });
 
+    const isRunning = Boolean(s.isStreaming || (s.file === state.currentSessionFile && state.streaming));
+    const runningBadge = isRunning ? el("span", { class: "session-running-badge", title: "任务正在后台生成中…" }, [
+      el("span", { class: "spinner-dot" }),
+      el("span", { text: "运行中" }),
+    ]) : null;
+
+    const titleEl = el("div", { class: "session-item-name" }, [
+      el("span", { text: title }),
+      ...(runningBadge ? [runningBadge] : []),
+    ]);
+
     const item = el("div", {
       class: "session-item" + (s.file === state.currentSessionFile ? " active" : ""),
       dataset: { file: s.file },
@@ -553,7 +564,7 @@ function renderSidebar(sessions) {
       onclick: () => loadSession(s.file),
     }, [
       el("div", { class: "title" }, [
-        el("div", { class: "session-item-name", text: title }),
+        titleEl,
         el("div", { class: "meta", text: `${when} · ${s.messageCount || 0} 条` }),
       ]),
       btnDelete,
@@ -587,19 +598,25 @@ function filterSessions(query) {
   }
 }
 
-function startNewSession(askConfirm = true) {
-  if (state.streaming) {
-    if (askConfirm && !confirm("正在生成中，新建会话会终止当前操作，确定吗？")) return;
-    abortGeneration();
-  }
+function startNewSession() {
+  const wasStreaming = state.streaming;
   clearChat();
   showEmptyState(true);
   state.currentSessionFile = null;
+  state.streaming = false;
+  state.aborting = false;
+  state.streamingItems = [];
+  state.streamingMsg = null;
+  state.activeToolCalls.clear();
+  setComposerAborting(false);
   try {
     window.history.replaceState({}, "", window.location.pathname);
   } catch {}
   connectWs({ explicitNewSession: true }); // no session -> pi creates a new one
   $("#topSessionName").textContent = "新对话";
+  if (wasStreaming) {
+    showToast("前一个会话已转入后台继续运行");
+  }
   // Mobile: close sidebar on new session
   if (window.innerWidth <= 768) closeSidebar();
   refreshSessions();
@@ -683,8 +700,8 @@ async function syncSessionHistory(file, force = false) {
     const topName = data.sessionName || (data.header?.id ? baseName(file) : "新对话");
     $("#topSessionName").textContent = topName;
 
-    // Only overwrite chat if force is true or we're not actively streaming mid-turn live
-    if (force || !state.streaming) {
+    // Only overwrite chat if not actively backfilling
+    if (!state.isBackfilling && (force || !state.streaming)) {
       clearChat();
       const msgs = reconstructFromEntries(data.entries || []);
       showEmptyState(msgs.length === 0);
@@ -700,9 +717,8 @@ async function syncSessionHistory(file, force = false) {
 }
 
 async function loadSession(file) {
-  if (state.streaming) {
-    abortGeneration();
-  }
+  if (file === state.currentSessionFile) return;
+  const wasStreaming = state.streaming;
   state.currentSessionFile = file;
   state.streaming = false;
   state.aborting = false;
@@ -721,6 +737,9 @@ async function loadSession(file) {
   await syncSessionHistory(file, true);
   // Reconnect websocket pointed at this session so new prompts continue history.
   connectWs({ session: file });
+  if (wasStreaming) {
+    showToast("前一个会话已转入后台继续运行");
+  }
 }
 
 function reconstructFromEntries(entries) {
@@ -1670,14 +1689,15 @@ function sendWs(obj) {
 
 function handlePiMessage(obj) {
   // Automatically bind to the session file as soon as pi allocates it on disk
-  if (obj.data?.sessionFile && obj.data.sessionFile !== state.currentSessionFile) {
-    state.currentSessionFile = obj.data.sessionFile;
+  const sessionFile = obj.data?.sessionFile || obj.sessionFile || obj.data?.sessionPath || obj.sessionPath;
+  if (sessionFile && sessionFile !== state.currentSessionFile) {
+    state.currentSessionFile = sessionFile;
     try {
-      const newUrl = window.location.pathname + "?session=" + encodeURIComponent(obj.data.sessionFile);
-      window.history.replaceState({ session: obj.data.sessionFile }, "", newUrl);
+      const newUrl = window.location.pathname + "?session=" + encodeURIComponent(sessionFile);
+      window.history.replaceState({ session: sessionFile }, "", newUrl);
     } catch {}
     if ($("#topSessionName").textContent === "新对话") {
-      $("#topSessionName").textContent = baseName(obj.data.sessionFile);
+      $("#topSessionName").textContent = baseName(sessionFile);
     }
     refreshSessions();
   }
@@ -1780,7 +1800,7 @@ function handlePiMessage(obj) {
       }
       break;
     case "remote_user_prompt":
-      appendMessageNode("user", { text: obj.message, isSteer: obj.isSteer });
+      appendMessageNode("user", { text: obj.message, images: obj.images, isSteer: obj.isSteer });
       break;
     case "agent_start":
       state.streaming = true;
@@ -2786,12 +2806,15 @@ async function init() {
   }
 
   const ta = $("#composer");
+  let isComposing = false;
+  ta.addEventListener("compositionstart", () => { isComposing = true; });
+  ta.addEventListener("compositionend", () => { isComposing = false; });
   ta.addEventListener("input", () => {
     autoResize();
     updateComposerUI();
   });
   ta.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" && !e.shiftKey && !e.isComposing && e.keyCode !== 229) {
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing && !isComposing && e.keyCode !== 229) {
       e.preventDefault();
       if (state.streaming) {
         if (ta.value.trim()) {
@@ -3080,6 +3103,7 @@ async function init() {
 
   document.addEventListener("visibilitychange", () => {
     if (document.visibilityState === "visible") {
+      refreshSessions();
       if (!state.wsConnected) {
         reconnectAttempts = 0;
         scheduleReconnect(0);
@@ -3093,6 +3117,7 @@ async function init() {
   });
 
   window.addEventListener("pageshow", () => {
+    refreshSessions();
     if (!state.wsConnected) {
       reconnectAttempts = 0;
       scheduleReconnect(0);
@@ -3101,6 +3126,13 @@ async function init() {
     }
   });
 
+  // Background session status polling
+  setInterval(() => {
+    if (document.visibilityState === "visible") {
+      refreshSessions();
+    }
+  }, 10000);
+
   // Global event delegation for code block copy buttons
   document.addEventListener("click", async (e) => {
     const btn = e.target.closest(".btn-copy-code");

package/public/style.css

@@ -141,10 +141,45 @@ body {
   line-height: 1.35;
 }
 .session-item .session-item-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.session-item .session-item-name > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+.session-running-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--accent, #3b82f6);
+  background: rgba(59, 130, 246, 0.12);
+  border: 1px solid rgba(59, 130, 246, 0.25);
+  padding: 2px 5px;
+  border-radius: 9999px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.session-running-badge .spinner-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--accent, #3b82f6);
+  animation: pulse-dot 1.2s infinite ease-in-out;
+}
+@keyframes pulse-dot {
+  0%, 100% { opacity: 0.3; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
 .session-item .meta {
   font-size: 11px;
   color: var(--text-dim);