@liguoshuai/pi-web-chat 2.14.12 → 2.16.5

package/README.md

@@ -212,9 +212,7 @@ pi-web-chat/
 │   └── uninstall-service.sh        一键卸载脚本
 └── docs/                           项目文档库
     ├── ARCHITECTURE.md             架构设计文档
-    ├── DESIGN.md                   详细设计与决策文档
-    ├── ISSUES.md                   历次问题排查与修补记录
-    └── CHANGELOG.md                版本变更日志
+    └── DESIGN.md                   详细设计与决策文档
 ```
 
 ---

package/docs/ARCHITECTURE.md

@@ -1,6 +1,6 @@
 # 架构设计文档
 
-> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v2.14.5 版本）。
+> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v2.14.13 版本）。
 
 ---
 
@@ -164,7 +164,6 @@ Browser                         server.js                       pi RPC 子进程
 pi-web-chat/
 ├── README.md                       # 主说明文档
 ├── package.json
-├── package-lock.json
 ├── server.js                       # Express + WebSocket 服务器与 PiAgent 管理
 ├── bin/
 │   └── pi-web-chat.js              # 可执行入口
@@ -172,11 +171,9 @@ pi-web-chat/
 │   ├── index.html                  # 单页 UI
 │   ├── app.js                      # 前端逻辑与状态机
 │   └── style.css                   # CSS 样式
-├── docs/                           # 所有文档统一收纳
+├── docs/                           # 本模块文档（CHANGELOG / ISSUES 已移至项目根 docs/）
 │   ├── ARCHITECTURE.md             # 架构设计文档（本文件）
-│   ├── DESIGN.md                   # 详细设计与决策文档
-│   ├── ISSUES.md                   # 排查与修补记录
-│   └── CHANGELOG.md                # 版本变更日志
+│   └── DESIGN.md                   # 详细设计与决策文档
 └── scripts/                        # 服务安装/卸载脚本
     ├── install-service.sh
     ├── uninstall-service.sh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "2.14.12",
+  "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,11 +42,11 @@
   "dependencies": {
     "express": "^4.21.2",
     "ws": "^8.18.0",
-    "@liguoshuai/pi-chat-protocol": "2.14.12",
-    "@liguoshuai/pi-chat-server": "2.14.12"
+    "@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/app.js",
+    "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"

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;
@@ -261,252 +262,22 @@ async function confirmCwdChange() {
   }
 }
 
-// ---- Markdown render (small, safe renderer) ----
-function escapeHtml(s) {
-  return s.replace(/&/g, "&")
-          .replace(/</g, "&lt;")
-          .replace(/>/g, "&gt;")
-          .replace(/"/g, "&quot;")
-          .replace(/'/g, "&#39;");
+// ---- Markdown & Clipboard helpers (modularized in /markdown.js) ----
+// Fallbacks in case markdown.js failed to load
+if (typeof escapeHtml === "undefined") {
+  window.escapeHtml = (s) => (s || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-
-async function copyToClipboard(text) {
-  if (!text) return false;
-  if (navigator.clipboard && navigator.clipboard.writeText) {
+if (typeof copyToClipboard === "undefined") {
+  window.copyToClipboard = async (text) => {
+    if (!text) return false;
     try {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch (e) {
-      console.warn("navigator.clipboard.writeText failed:", e);
-    }
-  }
-  try {
-    const ta = document.createElement("textarea");
-    ta.value = text;
-    ta.style.position = "fixed";
-    ta.style.left = "-9999px";
-    ta.style.top = "-9999px";
-    document.body.appendChild(ta);
-    ta.focus();
-    ta.select();
-    const ok = document.execCommand("copy");
-    document.body.removeChild(ta);
-    return ok;
-  } catch (e) {
-    console.error("Fallback copy error:", e);
+      if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(text); return true; }
+    } catch {}
     return false;
-  }
+  };
 }
-
-function renderMarkdown(md) {
-  if (!md) return "";
-  if (typeof md !== "string") md = String(md);
-  // Strip headings of # etc. and convert to proper elements with escaping.
-  // We do a fenced-code-first approach so we don't process markdown inside code.
-  const parts = [];
-  let rest = md;
-  while (rest.length) {
-    // Only match ``` at the beginning of a line (or start of string) to avoid
-    // misinterpreting inline triple-backticks as code fences.
-    const fenceMatch = rest.match(/(?:^|\n)```/);
-    if (!fenceMatch) {
-      parts.push({ kind: "md", text: rest });
-      rest = "";
-    } else {
-      const fenceIdx = fenceMatch.index + (fenceMatch[0].length - 3);
-      if (fenceIdx > 0) parts.push({ kind: "md", text: rest.slice(0, fenceIdx) });
-      rest = rest.slice(fenceIdx + 3);
-      // optional language on this line
-      const nl = rest.indexOf("\n");
-      let lang = "";
-      if (nl !== -1) {
-        const firstLine = rest.slice(0, nl).trim();
-        if (firstLine && !firstLine.includes("```")) lang = firstLine;
-        rest = rest.slice(nl + 1);
-      }
-      const closeIdx = rest.indexOf("```");
-      let code;
-      if (closeIdx === -1) { code = rest; rest = ""; }
-      else { code = rest.slice(0, closeIdx); rest = rest.slice(closeIdx + 3).replace(/^\n/, ""); }
-      parts.push({ kind: "code", lang, code });
-    }
-  }
-  let html = "";
-  for (const p of parts) {
-    if (p.kind === "code") {
-      const lang = p.lang || "";
-      const displayLang = lang || "code";
-      html += `<div class="code-block-wrapper">` +
-        `<div class="code-block-header">` +
-          `<span class="code-block-lang">${escapeHtml(displayLang)}</span>` +
-          `<button class="btn-copy-code" type="button" aria-label="复制代码" title="复制代码">` +
-            `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></svg>` +
-            `<span>复制</span>` +
-          `</button>` +
-        `</div>` +
-        `<pre><code data-lang="${escapeHtml(lang)}">${escapeHtml(p.code)}</code></pre>` +
-      `</div>`;
-    } else {
-      html += renderInlineMd(p.text);
-    }
-  }
-  return html;
-}
-
-function renderInlineMd(text) {
-  // tables, then markdown-ish transforms. Escape first.
-  // Split out inline code first using placeholders to protect them.
-  const codeChunks = [];
-  let t = text.replace(/`([^`\n]+)`/g, (m) => {
-    const i = codeChunks.length;
-    codeChunks.push(m);
-    return `\u0000CODE${i}\u0000`;
-  });
-
-  // Tables: a block of consecutive lines delimited by blank lines,
-  // where the second line is like |---|---|.
-  const lines = t.split("\n");
-  const out = [];
-  let i = 0;
-  while (i < lines.length) {
-    if (lines[i].includes("|") && i + 1 < lines.length && /^\s*\|?[\s\-:|]+\|?\s*$/.test(lines[i + 1]) && lines[i+1].includes("-")) {
-      // collect table block
-      const header = lines[i];
-      const tblLines = [header, lines[i + 1]];
-      let j = i + 2;
-      while (j < lines.length && lines[j].includes("|")) { tblLines.push(lines[j]); j++; }
-      out.push({ kind: "table", lines: tblLines });
-      i = j;
-      continue;
-    }
-    out.push({ kind: "line", text: lines[i] });
-    i++;
-  }
-  let outHtml = "";
-  let para = [];
-  let linkListOpen = null;
-  let linkListOrdered = null;
-
-  function flushList() {
-    if (linkListOpen) {
-      outHtml += linkListOpen === "ol" ? "</ol>" : "</ul>";
-      linkListOpen = null;
-      linkListOrdered = null;
-    }
-  }
-
-  function flushPara() {
-    if (para.length === 0) return;
-    const block = para.join("\n").trim();
-    para = [];
-    outHtml += "<p>" + mdInlineBlock(block).replace(/\n/g, "<br>") + "</p>";
-  }
-  for (const seg of out) {
-    if (seg.kind === "table") {
-      flushPara();
-      flushList();
-      outHtml += mdTable(seg.lines);
-    } else if (seg.kind === "line") {
-      // horizontal rule
-      if (/^\s*([-*_])\s*\1\s*\1[\s\-_*]*$/.test(seg.text)) {
-        flushPara();
-        flushList();
-        outHtml += "<hr>";
-      } else if (/^(#{1,6})\s+(.*)$/.test(seg.text)) {
-        // headings
-        const m = seg.text.match(/^(#{1,6})\s+(.*)$/);
-        flushPara();
-        flushList();
-        const level = m[1].length;
-        outHtml += `<h${level}>${mdInlineBlock(m[2])}</h${level}>`;
-      } else if (/^\s*$/.test(seg.text)) {
-        flushPara();
-        flushList();
-      } else if (/^>\s?/.test(seg.text)) {
-        // blockquote line — group simple consecutive ones
-        flushPara();
-        flushList();
-        outHtml += `<blockquote>${mdInlineBlock(seg.text.replace(/^>\s?/, ""))}</blockquote>`;
-      } else if (/^\s*[-*+]\s+/.test(seg.text) || /^\s*\d+\.\s+/.test(seg.text)) {
-        // list item — group consecutive into ul/ol
-        // simple inline handling: wrap each list item line.
-        const isOrdered = /^\s*\d+\.\s+/.test(seg.text);
-        if (!linkListOpen || linkListOrdered !== isOrdered) {
-          flushPara();
-          flushList();
-          linkListOpen = isOrdered ? "ol" : "ul";
-          linkListOrdered = isOrdered;
-          outHtml += "<" + linkListOpen + ">";
-        }
-        let itemText = seg.text.replace(/^\s*([-*+]|\d+\.)\s+/, "");
-        let taskPrefix = "";
-        if (/^\[ \]\s+/.test(itemText)) {
-          taskPrefix = '<input type="checkbox" disabled class="task-list-item-checkbox"> ';
-          itemText = itemText.replace(/^\[ \]\s+/, "");
-        } else if (/^\[[xX]\]\s+/.test(itemText)) {
-          taskPrefix = '<input type="checkbox" checked disabled class="task-list-item-checkbox"> ';
-          itemText = itemText.replace(/^\[[xX]\]\s+/, "");
-        }
-        outHtml += `<li>${taskPrefix}${mdInlineBlock(itemText)}</li>`;
-      } else {
-        flushList();
-        para.push(seg.text);
-      }
-    }
-  }
-  flushList();
-  flushPara();
-  // restore inline code
-  outHtml = outHtml.replace(/\u0000CODE(\d+)\u0000/g, (_, n) => {
-    const chunk = codeChunks[+n];
-    return chunk ? `<code>${escapeHtml(chunk.slice(1, -1))}</code>` : "";
-  });
-  return outHtml;
-}
-
-function sanitizeUrl(url) {
-  if (!url) return "#";
-  const trimmed = url.trim();
-  if (/^(https?:\/\/|mailto:)/i.test(trimmed)) {
-    return trimmed.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-  }
-  return "#";
-}
-
-// helper state bag attached to the function during line scan
-function mdInlineBlock(text) {
-  let s = escapeHtml(text);
-  // bold
-  s = s.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
-  s = s.replace(/__(.+?)__/g, "<strong>$1</strong>");
-  // strikethrough
-  s = s.replace(/~~(.+?)~~/g, "<del>$1</del>");
-  // italic (asterisk)
-  s = s.replace(/(^|[^*])\*([^*\s](?:[^*]*?[^*\s])?)\*(?!\*)/g, "$1<em>$2</em>");
-  // italic (underscore): only match boundary/space so identifier_names are preserved
-  s = s.replace(/(^|[\s(\[<,;:])_([^_\s](?:[^_]*?[^_\s])?)_(?=[\s)\]>,;:!?.]|$)/g, "$1<em>$2</em>");
-  // links [txt](url) - strictly sanitize URL
-  s = s.replace(/\[([^\]]+)\]\(((?:https?:\/\/|mailto:)[^\s)]+)\)/g, (match, txt, url) => {
-    const safeUrl = sanitizeUrl(url);
-    return `<a href="${safeUrl}" target="_blank" rel="noopener">${txt}</a>`;
-  });
-  return s;
-}
-
-function mdTable(lines) {
-  const parseRow = (l) => l.split("|").map(c => c.trim()).filter((_, i, arr) => !(i === 0 && arr[0] === "") && !(i === arr.length - 1 && arr[arr.length - 1] === ""));
-  const header = parseRow(lines[0]);
-  const body = lines.slice(2).filter(l => l.trim()).map(parseRow);
-  let h = '<table><thead><tr>';
-  header.forEach((c) => h += `<th>${mdInlineBlock(c)}</th>`);
-  h += '</tr></thead><tbody>';
-  body.forEach((r) => {
-    h += '<tr>';
-    r.forEach((c) => h += `<td>${mdInlineBlock(c)}</td>`);
-    h += '</tr>';
-  });
-  h += '</tbody></table>';
-  return h;
+if (typeof renderMarkdown === "undefined") {
+  window.renderMarkdown = (md) => escapeHtml(md || "").replace(/\n/g, "<br>");
 }
 
 // ---- DOM helpers ----
@@ -530,6 +301,20 @@ const el = (tag, props = {}, children = []) => {
   return n;
 };
 
+const makeCopyIconSvg = () => el("svg", {
+  viewBox: "0 0 24 24",
+  width: "12",
+  height: "12",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "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) {
   if (!ts) return "";
@@ -614,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);
+    }
   }
 }
 
@@ -745,6 +534,7 @@ function startNewSession() {
     window.history.replaceState({}, "", window.location.pathname);
   } catch {}
   $("#topSessionName").textContent = "新对话";
+  updatePageTitle(null);
   if (wasStreaming) {
     showToast("前一个会话已转入后台继续运行");
   }
@@ -752,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();
 }
 
@@ -771,7 +561,7 @@ async function deleteSession(file, title) {
       return;
     }
     showToast("会话已删除");
-    if (state.currentSessionFile === file) {
+    if (sameSession(state.currentSessionFile, file)) {
       startNewSession();
     } else {
       await refreshSessions();
@@ -804,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);
@@ -834,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)) {
@@ -843,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) {
@@ -899,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)) {
@@ -923,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") {
@@ -971,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 "";
@@ -1243,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) {
@@ -1366,7 +1203,7 @@ function renderAssistantBlock(m) {
       }
     }
   }, [
-    el("svg", { 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>' }),
+    makeCopyIconSvg(),
     el("span", { text: "复制全文" })
   ]);
 
@@ -1490,7 +1327,7 @@ function updateToolBlockCopyBtn(tc, call) {
         }
       }
     }, [
-      el("svg", { 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>' }),
+      makeCopyIconSvg(),
       el("span", { text: "复制" })
     ]);
     const stateEl = tc.head.querySelector(".state");
@@ -1547,7 +1384,7 @@ function makeToolBlockFromCall(call, ts = null) {
       }
     }
   }, [
-    el("svg", { 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>' }),
+    makeCopyIconSvg(),
     el("span", { text: "复制" })
   ]) : null;
 
@@ -1606,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;
 }
 
@@ -1641,7 +1493,7 @@ function ensureStreamingMsg(ts = Date.now()) {
       }
     }
   }, [
-    el("svg", { 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>' }),
+    makeCopyIconSvg(),
     el("span", { text: "复制全文" })
   ]);
 
@@ -2091,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" });
@@ -3056,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 将在当前轮次中实时接收并调整方向。";
@@ -3100,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 = [];
@@ -3116,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
@@ -3147,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);
   }
 }
@@ -3360,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");