@liguoshuai/pi-web-chat 2.15.4 → 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.15.4",
+  "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.15.4",
-    "@liguoshuai/pi-chat-server": "2.15.4"
+    "@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,8 @@ 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: [],
 };
 
 let toastTimer = null;
@@ -308,9 +310,11 @@ const makeCopyIconSvg = () => el("svg", {
   stroke: "currentColor",
   "stroke-width": "2",
   "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  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>'
-});
+  "stroke-linejoin": "round"
+}, [
+  el("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+  el("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+]);
 
 // ---- Message Time Formatter ----
 function formatMessageTime(ts) {
@@ -359,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 = "";
@@ -373,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);
 }
 
@@ -383,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;
@@ -396,10 +430,14 @@ async function refreshSessions() {
   try {
     const res = await authFetch(`${API}/api/sessions?cwd=${encodeURIComponent(cwd)}`);
     const data = await res.json();
-    renderSidebar(data.sessions || []);
+    state.lastSessions = data.sessions || [];
+    renderSidebar(state.lastSessions);
   } catch (err) {
     console.warn("refreshSessions error:", err);
-    renderSidebar([]);
+    // Preserve existing sessions list rather than blanking out the sidebar on error
+    if (state.lastSessions && state.lastSessions.length > 0) {
+      renderSidebar(state.lastSessions);
+    }
   }
 }
 
@@ -524,9 +562,15 @@ 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);
   if (wasStreaming) {
     showToast("前一个会话已转入后台继续运行");
   }
@@ -534,8 +578,8 @@ function startNewSession() {
   if (window.innerWidth <= 768) closeSidebar();
 
   connectWs({ explicitNewSession: true }); // no session -> pi creates a new one
-  // Instantly render optimistic new session at the top of left sidebar
-  renderSidebar([]);
+  // Keep existing sessions in sidebar and immediately display new draft item
+  renderSidebar(state.lastSessions || []);
   refreshSessions();
 }
 
@@ -553,7 +597,7 @@ async function deleteSession(file, title) {
       return;
     }
     showToast("会话已删除");
-    if (state.currentSessionFile === file) {
+    if (sameSession(state.currentSessionFile, file)) {
       startNewSession();
     } else {
       await refreshSessions();
@@ -586,6 +630,12 @@ function initMobileToolbarFab() {
     } else {
       fab.classList.remove("visible");
     }
+    const distanceFromBottom = chat.scrollHeight - chat.scrollTop - chat.clientHeight;
+    if (distanceFromBottom <= 80) {
+      userScrolledUp = false;
+    } else if (distanceFromBottom > 150) {
+      userScrolledUp = true;
+    }
   };
 
   chat.addEventListener("scroll", onScroll);
@@ -616,6 +666,7 @@ async function syncSessionHistory(file, force = false) {
 
     const topName = data.sessionName || data.firstUser || "新对话";
     $("#topSessionName").textContent = topName;
+    updatePageTitle(topName);
 
     // Only overwrite chat if not actively backfilling
     if (!state.isBackfilling && (force || !state.streaming)) {
@@ -625,7 +676,8 @@ async function syncSessionHistory(file, force = false) {
       for (const m of msgs) {
         appendMessageNode(m.role, m);
       }
-      scrollBottom();
+      userScrolledUp = false;
+      scrollBottom(true);
       refreshSessions();
     }
   } catch (e) {
@@ -643,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();
@@ -681,16 +730,39 @@ function reconstructFromEntries(entries, timing = null) {
     }
   }
 
+  // Precompute which entry indices are the last assistant message in their turn.
+  // A turn is delimited by user messages; the last assistant message before the
+  // next user message (or end of entries) is the last in its turn.
+  // We only show the total turn duration on this final message, not on every
+  // intermediate assistant message (e.g. tool-call messages within the same turn).
+  const lastAssistantInTurn = new Set();
+  let lastAssistantIdx = null;
+  for (let i = 0; i < entries.length; i++) {
+    const e = entries[i];
+    if (e.type !== "message" || !e.message) continue;
+    if (e.message.role === "assistant") {
+      lastAssistantIdx = i;
+    } else if (e.message.role === "user" && lastAssistantIdx != null) {
+      lastAssistantInTurn.add(lastAssistantIdx);
+      lastAssistantIdx = null;
+    }
+  }
+  if (lastAssistantIdx != null) lastAssistantInTurn.add(lastAssistantIdx);
+
   const out = [];
   let lastUserTs = null;
-  let assistantMsgCount = 0;
-  for (const e of entries) {
+  let turnIndex = -1;          // incremented per user message — aligns with timing[] (one entry per turn)
+  let thinkingIdx = 0;          // accumulated across assistant messages within the same turn
+  for (let i = 0; i < entries.length; i++) {
+    const e = entries[i];
     if (e.type !== "message") continue;
     const m = e.message;
     if (!m || m.role === "bashExecution") continue;
     const msgTs = parseEntryTimestamp(m.timestamp || e.timestamp);
     if (m.role === "user") {
       lastUserTs = msgTs;
+      turnIndex++;
+      thinkingIdx = 0;          // reset thinking index for the new turn
       // Extract optional images from user message content array
       let images = [];
       if (Array.isArray(m.content)) {
@@ -705,17 +777,19 @@ function reconstructFromEntries(entries, timing = null) {
       out.push({ role: "user", text: extractContentText(m.content), images, ts: msgTs });
     } else if (m.role === "assistant") {
       let turnDurationMs = null;
-      // Try timing data first, then fall back to timestamp heuristic
-      const turnTiming = timing ? timing[assistantMsgCount] : null;
-      if (turnTiming?.turnDuration != null) {
-        turnDurationMs = turnTiming.turnDuration;
-      } else if (lastUserTs && msgTs && msgTs >= lastUserTs) {
-        const diff = msgTs - lastUserTs;
-        if (diff > 0 && diff < 15 * 60 * 1000) {
-          turnDurationMs = diff;
+      // Try timing data first, then fall back to timestamp heuristic.
+      // Only show turn duration on the last assistant message of the turn.
+      const turnTiming = timing ? timing[turnIndex] : null;
+      if (lastAssistantInTurn.has(i)) {
+        if (turnTiming?.turnDuration != null) {
+          turnDurationMs = turnTiming.turnDuration;
+        } else if (lastUserTs && msgTs && msgTs >= lastUserTs) {
+          const diff = msgTs - lastUserTs;
+          if (diff > 0 && diff < 15 * 60 * 1000) {
+            turnDurationMs = diff;
+          }
         }
       }
-      let thinkingIdx = 0;
       const rawContent = Array.isArray(m.content) ? m.content : (m.content ? [{ type: "text", text: String(m.content) }] : []);
       const content = rawContent.map(part => {
         if (part && part.type === "thinking") {
@@ -753,13 +827,11 @@ function reconstructFromEntries(entries, timing = null) {
         content.push({ type: "text", text: `⚠️ **生成失败**: ${errMsg}` });
       }
       out.push({ role: "assistant", content, ts: msgTs, turnDurationMs, usage: m.usage });
-      assistantMsgCount++;
     }
     // toolResult entries are attached directly to assistant toolCall parts, so they don't produce standalone messages
   }
   return out;
 }
-
 function extractContentText(content) {
   if (typeof content === "string") return content;
   if (!Array.isArray(content)) return "";
@@ -787,6 +859,7 @@ function clearChat() {
   chatInner.innerHTML = "";
   state.streamingMsg = null;
   state.streamingItems = [];
+  lastRenderedItemCount = 0;
   state.thinkingOpen = true;
   state.thinkingUserToggled = false;
   state.activeToolCalls.clear();
@@ -1025,6 +1098,22 @@ async function handleIncomingFiles(files) {
 
 const handleImageFiles = handleIncomingFiles;
 
+/**
+ * 手动压缩当前会话上下文，释放长会话累积的 token，缓解越聊越慢。
+ * 触发后由 pi 端执行 compaction，返回结果通过 response 事件回显。
+ */
+function compactContext() {
+  if (state.streaming) {
+    showToast("请等待当前任务结束后再压缩上下文");
+    return;
+  }
+  if (!sendWs({ type: "compact" })) {
+    showToast("连接不可用，无法压缩上下文");
+    return;
+  }
+  showToast("正在压缩上下文…");
+}
+
 function exportCurrentSession() {
   const chatInner = $("#chat-inner");
   if (!chatInner || chatInner.children.length === 0) {
@@ -1281,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);
@@ -1344,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";
@@ -1360,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;
@@ -1378,20 +1540,36 @@ 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 ""; }
 }
 
-function scrollBottom() {
+let userScrolledUp = false;
+
+function updatePageTitle(title) {
+  if (!title || title === "新对话") {
+    document.title = "pi-chat";
+  } else {
+    document.title = `${title} · pi-chat`;
+  }
+}
+
+function scrollBottom(force = false) {
   // Don't fight the user during a background-event replay (backfill).
   if (state.isBackfilling) return;
   const chat = $("#chat");
+  if (!chat) return;
+  // If streaming and user manually scrolled up to read history, don't hijack scroll unless forced!
+  if (!force && userScrolledUp && state.streaming) {
+    return;
+  }
   chat.scrollTop = chat.scrollHeight;
 }
 
@@ -1406,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);
@@ -1463,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;
@@ -1494,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) {
@@ -1771,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
@@ -1873,6 +2074,19 @@ function handlePiMessage(obj) {
       state.aborting = false;
       setComposerStreaming(false);
     }
+    else if (obj.command === "compact") {
+      if (obj.success) {
+        const after = obj.data?.estimatedTokensAfter;
+        const msg = typeof after === "number"
+          ? `上下文已压缩（预估剩余约 ${after} tokens）`
+          : "上下文已压缩";
+        showToast(msg);
+        appendSystemNotice(msg);
+        sendWs({ type: "get_state" });
+      } else {
+        showToast(`压缩上下文失败: ${obj.error || "未知错误"}`);
+      }
+    }
     else if (obj.command === "switch_session" && obj.success) {
       // ask pi for current state so we can get session id, name
       sendWs({ type: "get_state" });
@@ -2021,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;
@@ -2057,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;
     }
@@ -2076,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;
     }
@@ -2084,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;
@@ -2099,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;
@@ -2174,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();
@@ -2838,6 +3080,8 @@ function submitSteer() {
   appendMessageNode("user", { text, isSteer: true, ts: Date.now() });
   ta.value = "";
   autoResize();
+  userScrolledUp = false;
+  scrollBottom(true);
   updateComposerUI();
 
   if (hint) hint.textContent = "已插入指导指令！pi 将在当前轮次中实时接收并调整方向。";
@@ -2882,6 +3126,8 @@ function submitPrompt() {
   const now = Date.now();
   // Render the user's message locally for instant feedback.
   appendMessageNode("user", { text, images: state.attachedImages ? [...state.attachedImages] : [], ts: now });
+  userScrolledUp = false;
+  scrollBottom(true);
   
   ta.value = "";
   state.attachedImages = [];
@@ -2894,10 +3140,26 @@ 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);
     sendWs({ type: "set_session_name", name: promptTitle });
 
     // Update draft session item in sidebar immediately
@@ -2925,12 +3187,23 @@ 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; }
     state.streamingItems = [];
+    // Restore user input and attachments so text is not lost
+    if (ta) {
+      ta.value = text;
+      autoResize();
+      ta.focus();
+    }
+    if (imagesToSend && imagesToSend.length > 0) {
+      state.attachedImages = imagesToSend;
+      renderImagePreviews();
+    }
     const hint = $(".composer-hint");
-    if (hint) hint.textContent = "发送失败：WebSocket 连接已断开。正在尝试重连…";
+    if (hint) hint.textContent = "发送失败：WebSocket 连接已断开，已为你恢复输入内容。正在尝试重连…";
     scheduleReconnect(0);
   }
 }
@@ -3142,6 +3415,12 @@ async function init() {
     exportBtn.addEventListener("click", exportCurrentSession);
   }
 
+  // Compact context button (manual compaction for long/slow sessions)
+  const compactBtn = $("#btnCompactChat");
+  if (compactBtn) {
+    compactBtn.addEventListener("click", compactContext);
+  }
+
   // Image and file attach / picker / paste / drag-and-drop
   const btnAttach = $("#btnAttachImage");
   const fileInput = $("#imageFileInput");
@@ -3350,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

@@ -76,6 +76,14 @@
           </svg>
           <span class="topbar-action-label">导出</span>
         </button>
+        <button class="btn-topbar-action" id="btnCompactChat" title="压缩当前上下文（长会话变慢时使用）">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="4 7 4 4 20 4 20 7"></polyline>
+            <line x1="9" y1="20" x2="15" y2="20"></line>
+            <line x1="12" y1="4" x2="12" y2="20"></line>
+          </svg>
+          <span class="topbar-action-label">压缩</span>
+        </button>
         <div class="model-menu" id="modelMenu"></div>
         <div class="thinking-menu" id="thinkingMenu"></div>
       </div>
@@ -111,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/markdown.js

@@ -42,7 +42,7 @@
   function sanitizeUrl(url) {
     if (!url) return "#";
     const trimmed = url.trim();
-    if (/^(https?:\/\/|mailto:)/i.test(trimmed)) {
+    if (/^(https?:\/\/|mailto:|#)/i.test(trimmed)) {
       return trimmed.replace(/"/g, """).replace(/'/g, "'");
     }
     return "#";
@@ -111,6 +111,7 @@
     }
     let outHtml = "";
     let para = [];
+    let quoteLines = [];
     let linkListOpen = null;
     let linkListOrdered = null;
 
@@ -122,6 +123,13 @@
       }
     }
 
+    function flushQuote() {
+      if (quoteLines.length === 0) return;
+      const block = quoteLines.map(l => mdInlineBlock(l)).join("<br>");
+      quoteLines = [];
+      outHtml += `<blockquote>${block}</blockquote>`;
+    }
+
     function flushPara() {
       if (para.length === 0) return;
       const block = para.join("\n").trim();
@@ -132,30 +140,35 @@
       if (seg.kind === "table") {
         flushPara();
         flushList();
+        flushQuote();
         outHtml += mdTable(seg.lines);
       } else if (seg.kind === "line") {
         // horizontal rule
         if (/^\s*([-*_])\s*\1\s*\1[\s\-_*]*$/.test(seg.text)) {
           flushPara();
           flushList();
+          flushQuote();
           outHtml += "<hr>";
         } else if (/^(#{1,6})\s+(.*)$/.test(seg.text)) {
           // headings
           const m = seg.text.match(/^(#{1,6})\s+(.*)$/);
           flushPara();
           flushList();
+          flushQuote();
           const level = m[1].length;
           outHtml += `<h${level}>${mdInlineBlock(m[2])}</h${level}>`;
         } else if (/^\s*$/.test(seg.text)) {
           flushPara();
           flushList();
+          flushQuote();
         } else if (/^>\s?/.test(seg.text)) {
-          // blockquote line
+          // blockquote line (accumulate adjacent lines into a single blockquote)
           flushPara();
           flushList();
-          outHtml += `<blockquote>${mdInlineBlock(seg.text.replace(/^>\s?/, ""))}</blockquote>`;
+          quoteLines.push(seg.text.replace(/^>\s?/, ""));
         } else if (/^\s*[-*+]\s+/.test(seg.text) || /^\s*\d+\.\s+/.test(seg.text)) {
           // list item
+          flushQuote();
           const isOrdered = /^\s*\d+\.\s+/.test(seg.text);
           if (!linkListOpen || linkListOrdered !== isOrdered) {
             flushPara();
@@ -176,11 +189,13 @@
           outHtml += `<li>${taskPrefix}${mdInlineBlock(itemText)}</li>`;
         } else {
           flushList();
+          flushQuote();
           para.push(seg.text);
         }
       }
     }
     flushList();
+    flushQuote();
     flushPara();
     // restore inline code
     outHtml = outHtml.replace(/\u0000CODE(\d+)\u0000/g, (_, n) => {

package/public/style.css

@@ -741,6 +741,9 @@ body {
   stroke-linejoin: round;
   flex-shrink: 0;
 }
+.btn-copy-code svg *, .btn-copy-msg svg *, .btn-copy-tool svg * {
+  fill: none;
+}
 .msg.assistant .content ul, .msg.assistant .content ol { margin: 8px 0 12px 24px; }
 .msg.assistant .content li { margin: 4px 0; }
 .msg.assistant .content h1, .msg.assistant .content h2, .msg.assistant .content h3,
@@ -801,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 {