@liguoshuai/pi-web-chat 2.14.12 → 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.12",
+  "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.12",
-    "@liguoshuai/pi-chat-server": "2.14.12"
+    "@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: "复制全文" })
   ]);
 

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>

package/public/markdown.js

@@ -0,0 +1,263 @@
+// markdown.js — Lightweight, safe Markdown renderer for pi-web-chat
+// Handles code fence blocks, tables, lists, task checkboxes, headers, blockquotes, inline formatting, and safe URLs.
+
+(function (global) {
+  function escapeHtml(s) {
+    if (!s) return "";
+    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) {
+      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);
+      return false;
+    }
+  }
+
+  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 "#";
+  }
+
+  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;
+  }
+
+  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`;
+    });
+
+    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("-")) {
+        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
+          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
+          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 renderMarkdown(md) {
+    if (!md) return "";
+    if (typeof md !== "string") md = String(md);
+    const parts = [];
+    let rest = md;
+    while (rest.length) {
+      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);
+        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;
+  }
+
+  // Export to global scope & Node/module exports
+  const PiMarkdown = {
+    escapeHtml,
+    copyToClipboard,
+    sanitizeUrl,
+    mdInlineBlock,
+    mdTable,
+    renderInlineMd,
+    renderMarkdown
+  };
+
+  if (typeof exports === "object" && typeof module !== "undefined") {
+    module.exports = PiMarkdown;
+  }
+  const root = typeof window !== "undefined" ? window : (typeof globalThis !== "undefined" ? globalThis : global);
+  root.PiMarkdown = PiMarkdown;
+  root.escapeHtml = escapeHtml;
+  root.copyToClipboard = copyToClipboard;
+  root.sanitizeUrl = sanitizeUrl;
+  root.renderMarkdown = renderMarkdown;
+})(typeof window !== "undefined" ? window : (typeof globalThis !== "undefined" ? globalThis : this));

package/public/style.css

@@ -734,6 +734,12 @@ body {
 .btn-copy-code svg, .btn-copy-msg svg, .btn-copy-tool svg {
   width: 12px;
   height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
 }
 .msg.assistant .content ul, .msg.assistant .content ol { margin: 8px 0 12px 24px; }
 .msg.assistant .content li { margin: 4px 0; }