@liguoshuai/pi-web-chat 2.16.5 → 2.17.8

package/README.md

@@ -181,7 +181,7 @@ Web 服务启动后，在浏览器中访问：
 | `PORT` | `3000` | Web 服务监听端口 |
 | `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` 为禁用回收） |
+| `IDLE_TIMEOUT_MS` | `1800000` (30分钟) | 真正空闲（无连接+非流式）后的进程回收超时（`0` 为禁用回收） |
 | `MAX_AGENT_LIFETIME_MS` | `0` (无上限) | 单个 Agent 进程后台生存硬上限（`0` 为禁用） |
 | `EVENT_BUFFER_SIZE` | `5000` | 离线环形 Buffer 允许缓存的最大事件条数 |
 | `MAX_CONCURRENT_AGENTS` | `0` (无限制) | 进程池最大并发 Agent 进程数量 |

package/package.json

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

package/public/app.js

@@ -81,6 +81,7 @@ const state = {
   attachedImages: [], // Array of { data: string (base64), mimeType: string, url: string }
   turnStartedAt: null,
   streamingMsgDurationEl: null,
+  streamingWatchdog: null, // 5-min timeout for stuck streaming
   lastSessions: [],
 };
 
@@ -362,8 +363,10 @@ function startStreamingTimer() {
     if (state.turnStartedAt && state.streamingMsgDurationEl) {
       state.streamingMsgDurationEl.textContent = formatDuration(now - state.turnStartedAt);
     }
-    const liveThinking = document.querySelectorAll(".thinking-duration.live");
-    liveThinking.forEach((el) => {
+    // Single combined query instead of two separate querySelectorAll calls.
+    // Interval at 200ms (5 scans/sec) is still smooth for duration display.
+    const liveEls = document.querySelectorAll(".thinking-duration.live, .tool-duration.live");
+    liveEls.forEach((el) => {
       if (el._startedAt) {
         el.textContent = formatDuration(now - el._startedAt);
         el.style.display = "";
@@ -376,6 +379,20 @@ function startStreamingTimer() {
         el.style.display = "";
       }
     });
+    // Live update for the thinking placeholder spinner label before first delta arrives
+    const placeholder = document.querySelector(".thinking-placeholder");
+    if (placeholder && state.turnStartedAt) {
+      const elapsed = Math.max(0, now - state.turnStartedAt);
+      const labelEl = placeholder.querySelector(".thinking-label");
+      if (labelEl) {
+        const durStr = formatDuration(elapsed);
+        if (elapsed > 2500) {
+          labelEl.textContent = `正在深度推理中… (${durStr})`;
+        } else {
+          labelEl.textContent = `正在思考中… (${durStr})`;
+        }
+      }
+    }
   }, 100);
 }
 
@@ -386,6 +403,20 @@ function stopStreamingTimer() {
   }
 }
 
+function updateUrlSession(sessionFile) {
+  if (!sessionFile) return;
+  try {
+    const params = new URLSearchParams(window.location.search);
+    params.set("session", sessionFile);
+    if (state.cwd && !params.has("cwd")) {
+      params.set("cwd", state.cwd);
+    }
+    const query = params.toString();
+    const newUrl = query ? `${window.location.pathname}?${query}` : window.location.pathname;
+    window.history.replaceState({ session: sessionFile }, "", newUrl);
+  } catch {}
+}
+
 function sameSession(a, b) {
   if (!a || !b) return false;
   if (a === b) return true;
@@ -531,7 +562,12 @@ function startNewSession() {
   state.activeToolCalls.clear();
   setComposerStreaming(false);
   try {
-    window.history.replaceState({}, "", window.location.pathname);
+    const params = new URLSearchParams(window.location.search);
+    params.delete("session");
+    params.delete("file");
+    const query = params.toString();
+    const newUrl = query ? `${window.location.pathname}?${query}` : window.location.pathname;
+    window.history.replaceState({}, "", newUrl);
   } catch {}
   $("#topSessionName").textContent = "新对话";
   updatePageTitle(null);
@@ -659,10 +695,7 @@ async function loadSession(file) {
   state.streamingMsg = null;
   state.activeToolCalls.clear();
   setComposerStreaming(false);
-  try {
-    const newUrl = window.location.pathname + "?session=" + encodeURIComponent(file);
-    window.history.replaceState({ session: file }, "", newUrl);
-  } catch {}
+  updateUrlSession(file);
   // Mobile: close sidebar on selection
   if (window.innerWidth <= 768) {
     closeSidebar();
@@ -826,6 +859,7 @@ function clearChat() {
   chatInner.innerHTML = "";
   state.streamingMsg = null;
   state.streamingItems = [];
+  lastRenderedItemCount = 0;
   state.thinkingOpen = true;
   state.thinkingUserToggled = false;
   state.activeToolCalls.clear();
@@ -1336,6 +1370,79 @@ function updateToolBlockCopyBtn(tc, call) {
   tc.head._cmdToCopy = cmd;
 }
 
+function formatToolCommandText(name, args) {
+  if (!args) return "";
+  let obj = args;
+  if (typeof args === "string") {
+    try { obj = JSON.parse(args); } catch { return args; }
+  }
+  if (!obj || typeof obj !== "object") return String(args);
+  if (name === "bash" && obj.command) {
+    return `$ ${obj.command}`;
+  }
+  if (name === "read" && obj.path) {
+    let s = `read ${obj.path}`;
+    if (obj.offset != null) s += ` (offset: ${obj.offset})`;
+    if (obj.limit != null) s += ` (limit: ${obj.limit})`;
+    return s;
+  }
+  if (name === "write" && obj.path) {
+    let s = `write ${obj.path}`;
+    if (obj.content) {
+      const preview = obj.content.length > 500 ? obj.content.slice(0, 500) + "\n... (truncated)" : obj.content;
+      s += `\n\n--- 写入内容预览 ---\n${preview}`;
+    }
+    return s;
+  }
+  if (name === "edit" && obj.path) {
+    return `edit ${obj.path}`;
+  }
+  if (name === "ls" && obj.path) {
+    return `ls ${obj.path}`;
+  }
+  if (name === "grep") {
+    return `grep "${obj.pattern || ""}" ${obj.path || ""}`;
+  }
+  if (name === "find") {
+    return `find ${obj.path || "."} -name "${obj.pattern || ""}"`;
+  }
+  try {
+    return JSON.stringify(obj, null, 2);
+  } catch {
+    return String(args);
+  }
+}
+
+function renderToolBlockContent(bodyEl, call, resultText, isRunning, isError) {
+  if (!bodyEl) return;
+  bodyEl.innerHTML = "";
+  const cmdText = formatToolCommandText(call?.name, call?.arguments ?? call?.args);
+
+  // 1. 指令 / 参数区域 (有命令就立即提前显示，无需等待输出)
+  if (cmdText) {
+    const cmdSec = el("div", { class: "tool-section tool-cmd-section" }, [
+      el("div", { class: "tool-section-header" }, [
+        el("span", { class: "tool-section-title", text: "执行指令" }),
+      ]),
+      el("pre", { class: "tool-code-block", text: cmdText }),
+    ]);
+    bodyEl.appendChild(cmdSec);
+  }
+
+  // 2. 输出区域 (执行中显示实时状态/输出，执行完显示最终结果)
+  const outSec = el("div", { class: "tool-section tool-out-section" });
+  const outHeader = el("div", { class: "tool-section-header" }, [
+    el("span", { class: "tool-section-title", text: isRunning ? "实时状态" : "输出结果" }),
+    isRunning ? el("span", { class: "tool-running-pulse", text: "正在执行…" }) : null,
+  ]);
+  outSec.appendChild(outHeader);
+
+  const displayOut = resultText || (isRunning ? "(命令正在执行中，请稍候…)" : "(无输出)");
+  const outPre = el("pre", { class: "tool-output-block" + (isError ? " is-error" : ""), text: displayOut });
+  outSec.appendChild(outPre);
+  bodyEl.appendChild(outSec);
+}
+
 function makeToolBlockFromCall(call, ts = null) {
   const block = el("div", { class: "tool-block" });
   const hasResult = Boolean(call.result);
@@ -1399,9 +1506,9 @@ function makeToolBlockFromCall(call, ts = null) {
   ]);
   head._cmdToCopy = cmdToCopy;
 
-  const bodyText = hasResult ? (resultText || "(无输出)") : "执行中…";
-  const body = el("div", { class: "tool-body", html: escapeHtml(bodyText) });
+  const body = el("div", { class: "tool-body" });
   body.style.display = "none";
+  renderToolBlockContent(body, call, resultText, !hasResult, isError);
 
   head.addEventListener("click", () => {
     body.style.display = body.style.display === "none" ? "block" : "none";
@@ -1415,7 +1522,7 @@ function makeToolBlockFromCall(call, ts = null) {
   block._durationEl = durationEl;
 
   if (!hasResult && call.id) {
-    state.activeToolCalls.set(call.id, { block, body, head, durationEl, startedAt: call.startedAt || Date.now() });
+    state.activeToolCalls.set(call.id, { block, body, head, durationEl, startedAt: call.startedAt || Date.now(), name: call.name, args: call.arguments });
   }
 
   return block;
@@ -1433,13 +1540,14 @@ function summaryArgs(name, args) {
     if (name === "write" && obj.path) return obj.path;
     if (name === "edit" && obj.path) return obj.path;
     if (name === "ls" && obj.path) return obj.path;
-    if (name === "grep") return obj.pattern || "";
-    if (name === "find") return obj.pattern || obj.path || "";
+    if (name === "grep") return obj.pattern ? `${obj.pattern}${obj.path ? ` · ${obj.path}` : ""}` : (obj.path || "");
+    if (name === "find") return obj.pattern ? `${obj.pattern}${obj.path ? ` · ${obj.path}` : ""}` : (obj.path || "");
     if (typeof obj === "object" && obj !== null) {
       const keys = Object.keys(obj);
       if (keys.length === 1 && typeof obj[keys[0]] === "string") return obj[keys[0]];
+      return JSON.stringify(obj);
     }
-    return "";
+    return String(obj);
   } catch { return ""; }
 }
 
@@ -1476,6 +1584,7 @@ function getStreamingFullText() {
 function ensureStreamingMsg(ts = Date.now()) {
   if (state.streamingMsg) return state.streamingMsg;
   showEmptyState(false);
+  lastRenderedItemCount = 0;
   state.turnStartedAt = ts || Date.now();
   startStreamingTimer();
   const timeStr = formatMessageTime(ts);
@@ -1533,26 +1642,47 @@ function refreshStreamingContentDebounced() {
   });
 }
 
+let lastRenderedItemCount = 0;
 function refreshStreamingContent() {
   const node = state.streamingMsg;
   if (!node) return;
   const content = node.querySelector(".content");
-  content.innerHTML = "";
+  const items = state.streamingItems;
 
-  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: "正在思考中…" })
-      ]));
+  if (items.length === 0) {
+    if (content.children.length === 0 || !content.querySelector(".thinking-placeholder")) {
+      content.innerHTML = "";
+      if (state.streaming) {
+        content.appendChild(el("div", { class: "thinking-placeholder" }, [
+          el("span", { class: "thinking-spinner" }),
+          el("span", { class: "thinking-label", text: "正在思考中…" })
+        ]));
+      }
     }
     scrollBottom();
     return;
   }
 
-  const lastIdx = state.streamingItems.length - 1;
-  for (let i = 0; i < state.streamingItems.length; i++) {
-    const item = state.streamingItems[i];
+  // Fast path: if item count unchanged and last item is text, only update its innerHTML.
+  // This avoids O(n²) rebuilding on every text delta for long messages with many tool calls.
+  if (items.length === lastRenderedItemCount && items.length > 0) {
+    const lastItem = items[items.length - 1];
+    if (lastItem.type === "text") {
+      const lastEl = content.lastElementChild;
+      if (lastEl && !lastEl.classList.contains("thinking-block") && !lastEl.classList.contains("tool-block")) {
+        const showCursor = state.streaming;
+        lastEl.innerHTML = renderMarkdown(lastItem.text) + (showCursor ? '<span class="typing-cursor"></span>' : "");
+        scrollBottom();
+        return;
+      }
+    }
+  }
+
+  // Full rebuild (new items added or structure changed)
+  content.innerHTML = "";
+  const lastIdx = items.length - 1;
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
     const isLast = (i === lastIdx);
     if (item.type === "thinking") {
       const isActivelyThinking = state.streaming && isLast && item.isStreaming !== false;
@@ -1564,11 +1694,14 @@ function refreshStreamingContent() {
       content.appendChild(el("div", { html: renderMarkdown(item.text) + (showCursor ? '<span class="typing-cursor"></span>' : "") }));
     }
   }
+  lastRenderedItemCount = items.length;
   scrollBottom();
 }
 
 function finalizeStreamingMsg() {
   state.streaming = false;
+  if (state.streamingWatchdog) { clearTimeout(state.streamingWatchdog); state.streamingWatchdog = null; }
+  lastRenderedItemCount = 0;
   stopStreamingTimer();
   if (state.streamingMsg) {
     for (const item of state.streamingItems) {
@@ -1841,15 +1974,13 @@ function sendWs(obj) {
 function handlePiMessage(obj) {
   // Automatically bind to the session file as soon as pi allocates it on disk
   const sessionFile = obj.data?.sessionFile || obj.sessionFile || obj.data?.sessionPath || obj.sessionPath;
-  if (sessionFile && !sameSession(sessionFile, state.currentSessionFile)) {
+  if (sessionFile) {
+    const isDifferent = !sameSession(sessionFile, state.currentSessionFile);
     state.currentSessionFile = sessionFile;
-    try {
-      const newUrl = window.location.pathname + "?session=" + encodeURIComponent(sessionFile);
-      window.history.replaceState({ session: sessionFile }, "", newUrl);
-    } catch {}
-    // Do not set baseName(sessionFile) as title — it's a session ID, not a user-friendly summary.
-    // The proper title will be set by syncSessionHistory (via firstUser) or by the user prompt.
-    refreshSessions();
+    if (state.streaming || isDifferent) {
+      updateUrlSession(sessionFile);
+      refreshSessions();
+    }
   }
 
   // Backfill markers emitted by the server when it replays buffered events
@@ -2104,27 +2235,36 @@ function handlePiMessage(obj) {
           activeThinking.durationMs = Math.max(0, activeThinking.endedAt - (activeThinking.startedAt || activeThinking.ts || Date.now()));
         }
         ensureStreamingMsg();
-        const call = ev.toolCall || { id: obj.toolCallId || ev.id, name: obj.toolName, arguments: obj.args };
-        // args may be incomplete until toolcall_end; we fill what we have now
-        // and patch the head display on toolcall_end.
-        ensureToolBlock(call.id, call.name, call.arguments, Date.now());
+        const callId = ev.toolCall?.id || ev.id || obj.toolCallId;
+        const callName = ev.toolCall?.name || ev.toolName || obj.toolName;
+        const callArgs = ev.toolCall?.arguments || obj.args;
+        if (callId) {
+          ensureToolBlock(callId, callName, callArgs, Date.now());
+        }
       } else if (ev.type === "toolcall_delta") {
-        // Streaming function-call argument JSON. We don't render it live
-        // (JSON fragments are not useful UX), but make sure the tool block
-        // exists so toolcall_end has somewhere to write into.
-        const id = obj.toolCallId || ev.id;
-        ensureToolBlock(id, obj.toolName || ev.toolCall?.name, obj.args, Date.now());
+        // Streaming function-call argument JSON. We do not create dummy tool blocks
+        // with undefined ID here to prevent empty tasks from appearing.
       } else if (ev.type === "toolcall_end") {
-        // Authoritative final toolCall object (with full arguments). Patch
-        // the block head so the displayed args are the final ones, not the
-        // partial ones we got at toolcall_start.
-        const call = ev.toolCall || { id: obj.toolCallId, name: obj.toolName, arguments: obj.args };
-        const id = call.id || obj.toolCallId;
-        const tc = state.activeToolCalls.get(id);
-        if (tc) {
-          const argsEl = tc.head.querySelector(".args");
-          if (argsEl) argsEl.textContent = summaryArgs(call.name, call.arguments);
-          updateToolBlockCopyBtn(tc, call);
+        // Authoritative final toolCall object (with full arguments).
+        // Update the block head so the displayed args and copy button are final,
+        // and pre-render the command in the block body immediately!
+        const call = ev.toolCall || { id: obj.toolCallId || ev.id, name: obj.toolName || ev.toolName, arguments: obj.args };
+        const id = call.id || obj.toolCallId || ev.id;
+        if (id) {
+          let tc = state.activeToolCalls.get(id);
+          if (!tc) {
+            tc = ensureToolBlock(id, call.name, call.arguments, Date.now());
+          }
+          if (tc) {
+            tc.name = call.name || tc.name;
+            tc.args = call.arguments || tc.args;
+            const nameEl = tc.head.querySelector(".name");
+            if (nameEl && tc.name) nameEl.textContent = tc.name;
+            const argsEl = tc.head.querySelector(".args");
+            if (argsEl) argsEl.textContent = summaryArgs(tc.name, tc.args);
+            updateToolBlockCopyBtn(tc, { name: tc.name, arguments: tc.args });
+            renderToolBlockContent(tc.body, { name: tc.name, arguments: tc.args }, "", true, false);
+          }
         }
       }
       break;
@@ -2140,18 +2280,26 @@ function handlePiMessage(obj) {
       const tc = ensureToolBlock(obj.toolCallId, obj.toolName, obj.args, Date.now());
       if (tc) {
         tc.startedAt = Date.now();
+        tc.name = obj.toolName || tc.name;
+        tc.args = obj.args || tc.args;
         if (tc.durationEl) {
           tc.durationEl.className = "tool-duration live";
           tc.durationEl._startedAt = tc.startedAt;
           tc.durationEl.textContent = "0.0s";
           tc.durationEl.style.display = "";
         }
+        const nameEl = tc.head.querySelector(".name");
+        if (nameEl && tc.name) nameEl.textContent = tc.name;
+        const argsEl = tc.head.querySelector(".args");
+        if (argsEl) argsEl.textContent = summaryArgs(tc.name, tc.args);
         const stateEl = tc.head.querySelector(".state");
         if (stateEl) {
           stateEl.className = "state running";
           stateEl.textContent = "执行中…";
         }
-        updateToolBlockCopyBtn(tc, { name: obj.toolName, arguments: obj.args });
+        updateToolBlockCopyBtn(tc, { name: tc.name, arguments: tc.args });
+        // Immediately render the command code block in body so user sees it right away!
+        renderToolBlockContent(tc.body, { name: tc.name, arguments: tc.args }, "", true, false);
       }
       break;
     }
@@ -2159,7 +2307,12 @@ function handlePiMessage(obj) {
       const tc = state.activeToolCalls.get(obj.toolCallId);
       if (tc) {
         const text = extractContentText(obj.partialResult?.content);
-        tc.body.innerHTML = escapeHtml(text) || "(执行中…)";
+        const outPre = tc.body.querySelector(".tool-output-block");
+        if (outPre) {
+          outPre.textContent = text || "(执行中…)";
+        } else {
+          renderToolBlockContent(tc.body, { name: tc.name, arguments: tc.args }, text, true, false);
+        }
       }
       break;
     }
@@ -2167,7 +2320,6 @@ function handlePiMessage(obj) {
       const tc = state.activeToolCalls.get(obj.toolCallId);
       if (tc) {
         const text = extractContentText(obj.result?.content);
-        tc.body.innerHTML = escapeHtml(text) || "(无输出)";
         tc.endedAt = Date.now();
         const dur = Math.max(0, tc.endedAt - (tc.startedAt || tc.endedAt));
         tc.durationMs = dur;
@@ -2182,9 +2334,8 @@ function handlePiMessage(obj) {
           stateEl.textContent = obj.isError ? "错误" : "完成";
           stateEl.className = "state" + (obj.isError ? " error" : "");
         }
+        renderToolBlockContent(tc.body, { name: tc.name, arguments: tc.args }, text, false, Boolean(obj.isError));
         // Remove from activeToolCalls so stale entries don't accumulate.
-        // Previously only cleared wholesale in finalizeStreamingMsg/clearChat/etc,
-        // which meant a missed tool_execution_end left tools stuck in "执行中…" forever.
         state.activeToolCalls.delete(obj.toolCallId);
       }
       break;
@@ -2257,9 +2408,17 @@ function handleExtensionUiRequest(req) {
 }
 
 function ensureToolBlock(toolCallId, name, args, ts = Date.now()) {
-  if (state.activeToolCalls.has(toolCallId)) return state.activeToolCalls.get(toolCallId);
+  if (!toolCallId) return null;
+  if (state.activeToolCalls.has(toolCallId)) {
+    const existing = state.activeToolCalls.get(toolCallId);
+    if (name && !existing.name) existing.name = name;
+    if (args && (!existing.args || existing.args === "{}")) existing.args = args;
+    return existing;
+  }
   const block = makeToolBlockFromCall({ id: toolCallId, name, arguments: args, startedAt: ts }, ts);
-  const entry = state.activeToolCalls.get(toolCallId) || { block, body: block._body, head: block._head, durationEl: block._durationEl, startedAt: ts };
+  const entry = state.activeToolCalls.get(toolCallId) || { block, body: block._body, head: block._head, durationEl: block._durationEl, startedAt: ts, name, args };
+  entry.name = name;
+  entry.args = args;
   state.activeToolCalls.set(toolCallId, entry);
   state.streamingItems.push({ type: "tool", id: toolCallId, tc: entry });
   refreshStreamingContentDebounced();
@@ -2981,8 +3140,23 @@ function submitPrompt() {
   ensureStreamingMsg(now);
   refreshStreamingContent();
 
+  // Streaming watchdog: if no agent_end in 5 minutes, auto-finalize
+  if (state.streamingWatchdog) clearTimeout(state.streamingWatchdog);
+  state.streamingWatchdog = setTimeout(() => {
+    if (state.streaming) {
+      toast("生成超时（5 分钟无响应），已自动结束。", "warn");
+      finalizeStreamingMsg();
+    }
+  }, 5 * 60 * 1000);
+
+  // If sessionFile is already known, immediately anchor it to browser URL so page reloads don't lose the active conversation
+  if (state.currentSessionFile) {
+    updateUrlSession(state.currentSessionFile);
+  }
+
   // Set session name from the first prompt of a brand-new session.
-  if (state.currentSessionFile == null && text) {
+  const isFirstPrompt = ($("#chat-inner")?.querySelectorAll(".msg").length || 0) <= 2;
+  if (isFirstPrompt && text) {
     const promptTitle = text.slice(0, 60).replace(/\s+/g, " ");
     $("#topSessionName").textContent = promptTitle;
     updatePageTitle(promptTitle);
@@ -3013,6 +3187,7 @@ function submitPrompt() {
     state.aborting = false;
     setComposerStreaming(false);
     stopStreamingTimer();
+    if (state.streamingWatchdog) { clearTimeout(state.streamingWatchdog); state.streamingWatchdog = null; }
     state.turnStartedAt = null;
     state.streamingMsgDurationEl = null;
     if (state.streamingMsg) { state.streamingMsg.remove(); state.streamingMsg = null; }
@@ -3454,12 +3629,16 @@ async function init() {
     }
   });
 
-  // Background session status polling
+  // Background session status polling — refresh every 15s when page is visible.
+  // Skip when sidebar is collapsed on mobile to avoid unnecessary API calls.
   setInterval(() => {
     if (document.visibilityState === "visible") {
-      refreshSessions();
+      const isSidebarVisible = window.innerWidth > 768 || $(".app").classList.contains("sidebar-open");
+      if (isSidebarVisible || state.streaming) {
+        refreshSessions();
+      }
     }
-  }, 10000);
+  }, 15000);
 
   // Global event delegation for code block copy buttons
   document.addEventListener("click", async (e) => {

package/public/index.html

@@ -119,7 +119,7 @@
       <div class="composer">
         <div class="image-preview-bar" id="imagePreviewBar" style="display:none;"></div>
         <div class="composer-inner" id="composerInner">
-          <input type="file" id="imageFileInput" class="sr-only-file-input" accept="image/*,.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg,.heic,.heif,.ico,.avif,text/*,.txt,.md,.json,.js,.ts,.py,.sh,.html,.css,.yaml,.yml,.toml,.xml,.sql,.log,.csv" multiple>
+          <input type="file" id="imageFileInput" class="sr-only-file-input" multiple>
           <label class="attach-btn" id="btnAttachImage" for="imageFileInput" role="button" tabindex="0" title="添加附件 / 图片 (支持拖拽与截图粘贴)">
             <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>

package/public/style.css

@@ -804,10 +804,48 @@ body {
 .tool-head .state.error { color: var(--danger); background: #3a1a1a; }
 .tool-body {
   padding: 12px 14px; border-top: 1px solid var(--tool-border);
-  max-height: 280px; overflow-y: auto;
-  white-space: pre-wrap; word-break: break-word;
+  max-height: 380px; overflow-y: auto;
   font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: #cfcfcf;
 }
+.tool-section {
+  margin-bottom: 12px;
+}
+.tool-section:last-child {
+  margin-bottom: 0;
+}
+.tool-section-header {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 6px;
+}
+.tool-section-title {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.5px; color: var(--text-muted);
+}
+.tool-running-pulse {
+  font-size: 11px; color: var(--accent);
+  animation: pulse-op 1.4s infinite ease-in-out;
+}
+@keyframes pulse-op {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+.tool-code-block, .tool-output-block {
+  margin: 0; padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  white-space: pre-wrap; word-break: break-word;
+  font-family: inherit; font-size: 12px; line-height: 1.45;
+  color: #e5e5e5;
+}
+.tool-code-block {
+  color: #93c5fd;
+  border-left: 2px solid var(--accent);
+}
+.tool-output-block.is-error {
+  color: var(--danger);
+  border-left: 2px solid var(--danger);
+}
 
 /* Thinking blocks */
 .thinking-block {