@liguoshuai/pi-web-chat 2.2.0 → 2.3.0

package/docs/CHANGELOG.md

@@ -7,6 +7,23 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "2.2.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.2.0",
-    "@liguoshuai/pi-chat-server": "2.2.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

@@ -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();
   }
@@ -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);