@liguoshuai/pi-web-chat 2.14.5 → 2.15.4

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.5",
+  "version": "2.15.4",
   "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.5",
-    "@liguoshuai/pi-chat-server": "2.14.5"
+    "@liguoshuai/pi-chat-protocol": "2.15.4",
+    "@liguoshuai/pi-chat-server": "2.15.4"
   },
   "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

@@ -261,252 +261,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;");
-}
-
-async function copyToClipboard(text) {
-  if (!text) return false;
-  if (navigator.clipboard && navigator.clipboard.writeText) {
+// ---- 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;");
+}
+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 +300,18 @@ 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",
+  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>'
+});
+
 // ---- Message Time Formatter ----
 function formatMessageTime(ts) {
   if (!ts) return "";
@@ -1366,7 +1148,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 +1272,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 +1329,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;
 
@@ -1641,7 +1423,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: "复制全文" })
   ]);
 
@@ -1932,6 +1714,22 @@ function connectWs(opts = {}) {
     isConnecting = false;
     if (ws._suppressOnclose) return;
 
+    // Mark any tool blocks still in "执行中…" as interrupted — otherwise they
+    // stay as zombie "执行中…" blocks forever after a disconnect mid-execution.
+    for (const [, tc] of state.activeToolCalls) {
+      const stateEl = tc.head?.querySelector(".state");
+      if (stateEl && stateEl.classList.contains("running")) {
+        stateEl.className = "state error";
+        stateEl.textContent = "已中断";
+      }
+      if (tc.durationEl && tc.durationEl._startedAt) {
+        const dur = Math.max(0, Date.now() - tc.durationEl._startedAt);
+        tc.durationEl.className = "tool-duration";
+        tc.durationEl._startedAt = null;
+        tc.durationEl.textContent = `耗时 ${formatDuration(dur)}`;
+      }
+    }
+
     wasDisconnected = true;
     setConnStatus("disconnected");
     scheduleReconnect();
@@ -2006,6 +1804,22 @@ function handlePiMessage(obj) {
         syncSessionHistory(state.currentSessionFile, false);
       }
     } else {
+      // Server says not streaming — finalize any stale tool blocks that were
+      // left in "执行中…" by a partial backfill (e.g. buffer overflow lost
+      // the matching tool_execution_end event).
+      for (const [, tc] of state.activeToolCalls) {
+        const stateEl = tc.head?.querySelector(".state");
+        if (stateEl && stateEl.classList.contains("running")) {
+          stateEl.className = "state error";
+          stateEl.textContent = "已中断";
+        }
+        if (tc.durationEl && tc.durationEl._startedAt) {
+          const dur = Math.max(0, Date.now() - tc.durationEl._startedAt);
+          tc.durationEl.className = "tool-duration";
+          tc.durationEl._startedAt = null;
+          tc.durationEl.textContent = `耗时 ${formatDuration(dur)}`;
+        }
+      }
       finalizeStreamingMsg();
       state.streaming = false;
       state.aborting = false;
@@ -2285,6 +2099,10 @@ function handlePiMessage(obj) {
           stateEl.textContent = obj.isError ? "错误" : "完成";
           stateEl.className = "state" + (obj.isError ? " error" : "");
         }
+        // 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;
     }

package/public/index.html

@@ -167,6 +167,7 @@
 
   <!-- Toast notification -->
   <div class="toast" id="toast"></div>
+  <script src="/markdown.js"></script>
   <script src="/app.js"></script>
 </body>
 </html>