@liguoshuai/pi-web-chat 2.19.1 → 2.20.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "2.19.1",
+  "version": "2.20.7",
   "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.19.1",
-    "@liguoshuai/pi-chat-server": "2.19.1"
+    "@liguoshuai/pi-chat-protocol": "2.20.7",
+    "@liguoshuai/pi-chat-server": "2.20.7"
   },
   "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

@@ -150,7 +150,7 @@ function saveRecentModel(model) {
   state.recentModels = filtered.slice(0, 4);
   try {
     localStorage.setItem("pi_recent_models", JSON.stringify(state.recentModels));
-  } catch {}
+  } catch (e) { console.warn("[models] localStorage save failed:", e); }
 }
 
 async function loadServerConfig() {
@@ -186,7 +186,7 @@ async function loadServerConfig() {
         state.thinkingLevel = data.defaultModel.thinkingLevel;
       }
     }
-  } catch {}
+  } catch (e) { console.warn("[loadServerConfig] failed:", e); }
   if (!state.cwd) {
     state.cwd = state.serverCwd || state.homeDir || "";
   }
@@ -215,7 +215,7 @@ async function openCwdModal() {
       quicks.push({ label: "服务启动目录", path: state.serverCwd });
     }
     let recents = [];
-    try { recents = JSON.parse(localStorage.getItem("pi_recent_cwds") || "[]"); } catch {}
+    try { recents = JSON.parse(localStorage.getItem("pi_recent_cwds") || "[]"); } catch (e) { console.warn("[cwd] recents parse failed:", e); }
     recents.forEach(r => {
       if (r && r !== state.homeDir && r !== state.serverCwd && !quicks.some(q => q.path === r)) {
         quicks.push({ label: formatCwdDisplay(r), path: r });
@@ -251,7 +251,7 @@ async function confirmCwdChange() {
     const data = await res.json();
     if (data.ok && data.path) {
       let recents = [];
-      try { recents = JSON.parse(localStorage.getItem("pi_recent_cwds") || "[]"); } catch {}
+      try { recents = JSON.parse(localStorage.getItem("pi_recent_cwds") || "[]"); } catch (e) { console.warn("[cwd] recents parse failed:", e); }
       recents = [data.path, ...recents.filter(r => r !== data.path)].slice(0, 8);
       localStorage.setItem("pi_recent_cwds", JSON.stringify(recents));
 
@@ -282,7 +282,7 @@ if (typeof copyToClipboard === "undefined") {
     if (!text) return false;
     try {
       if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(text); return true; }
-    } catch {}
+    } catch (e) { console.warn("[cwd] save failed:", e); }
     return false;
   };
 }
@@ -292,14 +292,15 @@ if (typeof renderMarkdown === "undefined") {
 
 // ---- DOM helpers ----
 const $ = (sel, root = document) => root.querySelector(sel);
+const SVG_TAGS = new Set(["svg","rect","path","circle","line","polyline","polygon","ellipse","g","defs","use","text","tspan","linearGradient","radialGradient","stop","clipPath","mask","pattern","filter","feGaussianBlur","feOffset","feMerge","feMergeNode","animate","animateTransform","animateMotion"]);
 const el = (tag, props = {}, children = []) => {
-  const SVG_TAGS = new Set(["svg","rect","path","circle","line","polyline","polygon","ellipse","g","defs","use","text","tspan","linearGradient","radialGradient","stop","clipPath","mask","pattern","filter","feGaussianBlur","feOffset","feMerge","feMergeNode","animate","animateTransform","animateMotion"]);
   const n = SVG_TAGS.has(tag) ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag);
   for (const [k, v] of Object.entries(props)) {
-    if (k === "class") n.className = v;
+    if (k === "class") n.setAttribute("class", v);
     else if (k === "html") n.innerHTML = v;
     else if (k === "text") n.textContent = v;
     else if (k.startsWith("on") && typeof v === "function") n.addEventListener(k.slice(2).toLowerCase(), v);
+    else if (k.startsWith("on")) { /* non-function on* — silently ignore to prevent inline handler injection */ }
     else if (k === "dataset") Object.assign(n.dataset, v);
     else n.setAttribute(k, v);
   }
@@ -367,16 +368,18 @@ function formatDuration(ms) {
 let liveTimerInterval = null;
 function startStreamingTimer() {
   if (liveTimerInterval) return;
+  let tickCount = 0;
   liveTimerInterval = setInterval(() => {
     const now = Date.now();
+    // Refresh cache once per second (every 5th tick) instead of every 200ms
+    if (++tickCount % 5 === 0) refreshLiveDurationCache();
     if (state.turnStartedAt && state.streamingMsgDurationEl) {
       state.streamingMsgDurationEl.textContent = formatDuration(now - state.turnStartedAt);
     }
-    // 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");
+    // PE-3: Use cached live elements instead of querySelectorAll every 200ms
+    const liveEls = state._cachedLiveDurations || [];
     liveEls.forEach((el) => {
-      if (el._startedAt) {
+      if (el._startedAt && el.isConnected) {
         el.textContent = formatDuration(now - el._startedAt);
         el.style.display = "";
       }
@@ -417,7 +420,7 @@ function updateUrlSession(sessionFile) {
     const query = params.toString();
     const newUrl = query ? `${window.location.pathname}?${query}` : window.location.pathname;
     window.history.replaceState({ session: sessionFile }, "", newUrl);
-  } catch {}
+  } catch (e) { console.warn("[config] load failed:", e); }
 }
 
 function sameSession(a, b) {
@@ -447,6 +450,11 @@ async function refreshSessions() {
 function renderSidebar(sessions) {
   const list = $("#sessionList");
   if (!list) return;
+  // S14: Skip full DOM rebuild if session list hasn't changed (by file+name+count)
+  const sig = sessions.map(s => `${s.file}|${s.sessionName || s.firstUser || ""}|${s.messageCount || 0}|${s.isStreaming ? 1 : 0}`).join("\n");
+  if (list._lastSig === sig && list._lastCurrent === state.currentSessionFile) return;
+  list._lastSig = sig;
+  list._lastCurrent = state.currentSessionFile;
   list.innerHTML = "";
 
   const hasCurrentInSessions = Boolean(state.currentSessionFile && sessions.some(s => sameSession(s.file, state.currentSessionFile)));
@@ -467,11 +475,16 @@ function renderSidebar(sessions) {
 
     const draftItem = el("div", {
       class: "session-item active draft-session",
+      role: "button",
+      tabindex: "0",
       dataset: { file: state.currentSessionFile || "" },
       title: state.currentSessionFile || "新对话",
       onclick: () => {
         if (state.currentSessionFile) loadSession(state.currentSessionFile);
       },
+      onkeydown: (e) => {
+        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (state.currentSessionFile) loadSession(state.currentSessionFile); }
+      },
     }, [
       el("div", { class: "title" }, [
         titleEl,
@@ -514,9 +527,14 @@ function renderSidebar(sessions) {
 
     const item = el("div", {
       class: "session-item" + (sameSession(s.file, state.currentSessionFile) ? " active" : ""),
+      role: "button",
+      tabindex: "0",
       dataset: { file: s.file },
       title: s.file,                       // hover tooltip = raw jsonl path
       onclick: () => loadSession(s.file),
+      onkeydown: (e) => {
+        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); loadSession(s.file); }
+      },
     }, [
       el("div", { class: "title" }, [
         titleEl,
@@ -571,7 +589,7 @@ function startNewSession() {
     const query = params.toString();
     const newUrl = query ? `${window.location.pathname}?${query}` : window.location.pathname;
     window.history.replaceState({}, "", newUrl);
-  } catch {}
+  } catch (e) { console.warn("[sidebar] render failed:", e); }
   $("#topSessionName").textContent = "新对话";
   updatePageTitle(null);
   if (wasStreaming) {
@@ -827,7 +845,7 @@ function reconstructFromEntries(entries, timing = null) {
         try {
           const parsed = JSON.parse(errMsg);
           if (parsed.error?.message) errMsg = parsed.error.message;
-        } catch {}
+        } catch (e) { console.warn("[stream] parse failed:", e); }
         content.push({ type: "text", text: `⚠️ **生成失败**: ${errMsg}` });
       }
       out.push({ role: "assistant", content, ts: msgTs, turnDurationMs, usage: m.usage });
@@ -953,6 +971,11 @@ function detectImageMimeType(file) {
 
 async function processImageFile(file) {
   const mimeType = detectImageMimeType(file);
+  // P1-23: Reject images larger than 20MB to prevent tab crash
+  if (file.size > 20 * 1024 * 1024) {
+    showToast("图片过大（超过 20MB），请压缩后上传");
+    return null;
+  }
   const dataUrl = await new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => resolve(reader.result);
@@ -1574,16 +1597,22 @@ function updatePageTitle(title) {
   }
 }
 
+let _scrollRafId = 0;
 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;
+  // PE-2: Throttle via requestAnimationFrame to avoid layout thrashing on every streaming token
+  if (!force && _scrollRafId) return; // already scheduled
+  if (_scrollRafId) cancelAnimationFrame(_scrollRafId);
+  _scrollRafId = requestAnimationFrame(() => {
+    _scrollRafId = 0;
+    const chat = $("#chat");
+    if (!chat) return;
+    if (!force && userScrolledUp && state.streaming) {
+      return;
+    }
+    chat.scrollTop = chat.scrollHeight;
+  });
 }
 
 function getStreamingFullText() {
@@ -1826,7 +1855,7 @@ function startPingInterval() {
       }
       try {
         state.ws.send(JSON.stringify({ type: "ping" }));
-      } catch {}
+      } catch (e) { console.warn("[ws] close failed:", e); }
     }
   }, 15000);
 }
@@ -1880,7 +1909,7 @@ function connectWs(opts = {}) {
       // while a new socket is opening.
       state.ws._suppressOnclose = true;
       state.ws.close();
-    } catch {}
+    } catch (e) { console.warn("[ws] reconnect failed:", e); }
   }
 
   isConnecting = true;
@@ -1908,9 +1937,21 @@ function connectWs(opts = {}) {
   }
 
   const token = getAuthToken();
-  const tokParam = token ? `&token=${encodeURIComponent(token)}` : "";
-  const url = `${proto}://${location.host}/ws?cwd=${cwd}${sess}${tokParam}`;
-  const ws = new WebSocket(url);
+  const url = `${proto}://${location.host}/ws?cwd=${cwd}${sess}`;
+  if (!state.wsConnected && !reconnectAttempts) {
+    setConnStatus("reconnecting", "连接中…");
+  }
+  let ws;
+  try {
+    ws = new WebSocket(url);
+  } catch (err) {
+    console.error("[WS] constructor failed:", err);
+    isConnecting = false;
+    wasDisconnected = true;
+    setConnStatus("disconnected", "连接失败");
+    scheduleReconnect();
+    return;
+  }
   state.ws = ws;
   ws._gen = myGen;
 
@@ -1920,6 +1961,11 @@ function connectWs(opts = {}) {
     setConnStatus("connected");
     startPingInterval();
 
+    // Send auth token via in-band message (not URL query param) for security
+    if (token) {
+      sendWs({ type: "auth", token });
+    }
+
     const isReconnecting = wasDisconnected || reconnectAttempts > 0 || opts.isReconnect;
     if (isReconnecting) {
       showToast("网络连接已恢复");
@@ -1956,6 +2002,13 @@ function connectWs(opts = {}) {
       }
     }
 
+    // If the agent was actively streaming, show a hint so the user knows
+    // the task may still be running on the server — reconnection will either
+    // restore the streaming state via backfill or finalize it via get_state.
+    if (state.streaming) {
+      showToast("连接中断，正在重连…", "warn");
+    }
+
     wasDisconnected = true;
     setConnStatus("disconnected");
     scheduleReconnect();
@@ -1984,7 +2037,19 @@ function connectWs(opts = {}) {
       }
       return;
     }
-    handlePiMessage(obj);
+    try {
+      handlePiMessage(obj);
+    } catch (e) {
+      console.error("[WS] handlePiMessage error:", e, obj);
+      // Reset streaming state on unexpected errors to avoid permanent lockup
+      if (state.streaming) {
+        state.streaming = false;
+        state.streamingItems = [];
+        state.streamingMsg = null;
+        state.activeToolCalls.clear();
+        updateComposer();
+      }
+    }
   };
 }
 
@@ -2185,7 +2250,7 @@ function handlePiMessage(obj) {
         try {
           const parsed = JSON.parse(errMsg);
           if (parsed.error?.message) errMsg = parsed.error.message;
-        } catch {}
+        } catch (e) { console.warn("[msg] handle failed:", e); }
         state.streamingItems.push({ type: "text", text: `⚠️ **${errMsg}**` });
         refreshStreamingContent();
       }
@@ -3289,7 +3354,7 @@ function initSidebarResize() {
     isDragging = false;
     try {
       resizer.releasePointerCapture(e.pointerId);
-    } catch {}
+    } catch (e) { console.warn("[image] process failed:", e); }
     document.body.classList.remove("is-resizing");
 
     const finalWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--sidebar-width"), 10);
@@ -3703,10 +3768,10 @@ async function init() {
   initSidebarResize();
 
   refreshSessions();
-  // start in the disconnected state; connectWs will flip to green on open.
+  // start in the connecting state; connectWs will flip to green on open.
   const initDot = $("#connDot");
   const initLabel = $("#connLabel");
-  if (initDot) initDot.style.color = "var(--danger)";
+  if (initDot) initDot.style.color = "var(--warning)";
   if (initLabel) initLabel.textContent = "连接中…";
   $("#sendBtn").disabled = true;
 

package/public/index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self' ws: wss:; font-src 'self';">
   <meta name="theme-color" content="#18181b">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
@@ -173,7 +174,7 @@
   </div>
 
   <!-- Toast notification -->
-  <div class="toast" id="toast"></div>
+  <div class="toast" id="toast" role="status" aria-live="polite"></div>
   <script src="/markdown.js"></script>
   <script src="/app.js"></script>
 </body>

package/public/style.css

@@ -9,7 +9,7 @@
   --border: #3a3a3a;
   --text: #ececec;
   --text-muted: #9b9b9b;
-  --text-dim: #6f6f6f;
+  --text-dim: #848484;
   --accent: #10a37f;
   --accent-hover: #0e8c6d;
   --user-text: #ececec;