@liguoshuai/pi-web-chat 2.15.4 → 2.16.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "2.15.4",
+  "version": "2.16.5",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",
@@ -42,8 +42,8 @@
   "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.16.5",
+    "@liguoshuai/pi-chat-server": "2.16.5"
   },
   "scripts": {
     "build": "node --check server.js && node --check bin/pi-web-chat.js && node --check public/markdown.js && node --check public/app.js",

package/public/app.js

@@ -81,6 +81,7 @@ const state = {
   attachedImages: [], // Array of { data: string (base64), mimeType: string, url: string }
   turnStartedAt: null,
   streamingMsgDurationEl: null,
+  lastSessions: [],
 };
 
 let toastTimer = null;
@@ -308,9 +309,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) {
@@ -396,10 +399,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);
+    }
   }
 }
 
@@ -527,6 +534,7 @@ function startNewSession() {
     window.history.replaceState({}, "", window.location.pathname);
   } catch {}
   $("#topSessionName").textContent = "新对话";
+  updatePageTitle(null);
   if (wasStreaming) {
     showToast("前一个会话已转入后台继续运行");
   }
@@ -534,8 +542,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 +561,7 @@ async function deleteSession(file, title) {
       return;
     }
     showToast("会话已删除");
-    if (state.currentSessionFile === file) {
+    if (sameSession(state.currentSessionFile, file)) {
       startNewSession();
     } else {
       await refreshSessions();
@@ -586,6 +594,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 +630,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 +640,8 @@ async function syncSessionHistory(file, force = false) {
       for (const m of msgs) {
         appendMessageNode(m.role, m);
       }
-      scrollBottom();
+      userScrolledUp = false;
+      scrollBottom(true);
       refreshSessions();
     }
   } catch (e) {
@@ -681,16 +697,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 +744,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 +794,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 "";
@@ -1025,6 +1064,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) {
@@ -1388,10 +1443,25 @@ function summaryArgs(name, args) {
   } 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;
 }
 
@@ -1873,6 +1943,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" });
@@ -2838,6 +2921,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 +2967,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 = [];
@@ -2898,6 +2985,7 @@ function submitPrompt() {
   if (state.currentSessionFile == null && 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
@@ -2929,8 +3017,18 @@ function submitPrompt() {
     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 +3240,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");

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>

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,