@liguoshuai/pi-web-chat 2.18.13 → 2.20.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "2.18.13",
+  "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-server": "2.18.13",
-    "@liguoshuai/pi-chat-protocol": "2.18.13"
+    "@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() {
@@ -168,8 +168,17 @@ async function loadServerConfig() {
     }
     if (data.version) {
       state.version = data.version;
-      const verEl = $("#appVersion");
-      if (verEl) verEl.textContent = `v${data.version}`;
+    }
+    if (data.piVersion) {
+      state.piVersion = data.piVersion;
+    }
+    const piVerEl = $("#piVersion");
+    if (piVerEl) {
+      piVerEl.textContent = state.piVersion ? ` v${state.piVersion}` : "";
+    }
+    const verEl = $("#appVersion");
+    if (verEl) {
+      verEl.textContent = state.version ? ` v${state.version}` : "";
     }
     if (data.defaultModel) {
       state.defaultModel = data.defaultModel;
@@ -177,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 || "";
   }
@@ -206,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 });
@@ -242,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));
 
@@ -273,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;
   };
 }
@@ -283,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);
   }
@@ -358,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 = "";
       }
@@ -408,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) {
@@ -438,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)));
@@ -458,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,
@@ -505,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,
@@ -562,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) {
@@ -757,6 +784,7 @@ function reconstructFromEntries(entries, timing = null) {
       lastUserTs = msgTs;
       turnIndex++;
       thinkingIdx = 0;          // reset thinking index for the new turn
+      const isSteer = Boolean(m.isSteer || e.isSteer || e.customType === "steer" || m.customType === "steer");
       // Extract optional images from user message content array
       let images = [];
       if (Array.isArray(m.content)) {
@@ -768,7 +796,7 @@ function reconstructFromEntries(entries, timing = null) {
             url: c.data ? `data:${c.mimeType || "image/png"};base64,${c.data}` : (c.url || "")
           }));
       }
-      out.push({ role: "user", text: extractContentText(m.content), images, ts: msgTs });
+      out.push({ role: "user", text: extractContentText(m.content), images, ts: msgTs, isSteer });
     } else if (m.role === "assistant") {
       let turnDurationMs = null;
       // Try timing data first, then fall back to timestamp heuristic.
@@ -817,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 });
@@ -836,10 +864,19 @@ function extractContentText(content) {
     .join("\n\n");
 }
 
-function appendSystemNotice(text) {
+function appendSystemNotice(text, replaceIfLast = true) {
   if (!text) return;
   const chatInner = $("#chat-inner");
   if (!chatInner) return;
+  const lastChild = chatInner.lastElementChild;
+  if (replaceIfLast && lastChild && lastChild.classList.contains("system-notice-divider")) {
+    const textEl = lastChild.querySelector(".system-notice-text");
+    if (textEl) {
+      textEl.textContent = text;
+      scrollBottom();
+      return;
+    }
+  }
   const node = el("div", { class: "system-notice-divider" }, [
     el("span", { class: "system-notice-text", text })
   ]);
@@ -934,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);
@@ -1555,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() {
@@ -1651,6 +1699,9 @@ function refreshStreamingContent() {
           el("span", { class: "thinking-spinner" }),
           el("span", { class: "thinking-label", text: "正在思考中…" })
         ]));
+        content.appendChild(el("div", { class: "streaming-cursor-row" }, [
+          el("span", { class: "typing-cursor" })
+        ]));
       }
     }
     scrollBottom();
@@ -1663,7 +1714,7 @@ function refreshStreamingContent() {
     const lastItem = items[items.length - 1];
     if (lastItem.type === "text") {
       const lastEl = content.lastElementChild;
-      if (lastEl && !lastEl.classList.contains("thinking-block") && !lastEl.classList.contains("tool-block")) {
+      if (lastEl && !lastEl.classList.contains("thinking-block") && !lastEl.classList.contains("tool-block") && !lastEl.classList.contains("streaming-cursor-row")) {
         const showCursor = state.streaming;
         lastEl.innerHTML = renderMarkdown(lastItem.text) + (showCursor ? '<span class="typing-cursor"></span>' : "");
         scrollBottom();
@@ -1675,6 +1726,7 @@ function refreshStreamingContent() {
   // Full rebuild (new items added or structure changed)
   content.innerHTML = "";
   const lastIdx = items.length - 1;
+  let hasText = false;
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
     const isLast = (i === lastIdx);
@@ -1684,10 +1736,16 @@ function refreshStreamingContent() {
     } else if (item.type === "tool") {
       if (item.tc?.block) content.appendChild(item.tc.block);
     } else if (item.type === "text") {
+      hasText = true;
       const showCursor = state.streaming && isLast;
       content.appendChild(el("div", { html: renderMarkdown(item.text) + (showCursor ? '<span class="typing-cursor"></span>' : "") }));
     }
   }
+  if (state.streaming && !hasText) {
+    content.appendChild(el("div", { class: "streaming-cursor-row" }, [
+      el("span", { class: "typing-cursor" })
+    ]));
+  }
   lastRenderedItemCount = items.length;
   scrollBottom();
 }
@@ -1797,7 +1855,7 @@ function startPingInterval() {
       }
       try {
         state.ws.send(JSON.stringify({ type: "ping" }));
-      } catch {}
+      } catch (e) { console.warn("[ws] close failed:", e); }
     }
   }, 15000);
 }
@@ -1851,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;
@@ -1879,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;
 
@@ -1891,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("网络连接已恢复");
@@ -1927,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();
@@ -1955,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();
+      }
+    }
   };
 }
 
@@ -2156,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();
       }
@@ -3071,6 +3165,13 @@ function submitSteer() {
     return;
   }
 
+  // If there was an active streaming assistant block before steering, finalize it
+  // so that subsequent assistant chunks render in a new block below this steer message!
+  if (state.streamingMsg) {
+    finalizeStreamingMsg();
+    state.streaming = true; // resume streaming flag for subsequent response
+  }
+
   appendMessageNode("user", { text, isSteer: true, ts: Date.now() });
   ta.value = "";
   autoResize();
@@ -3253,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);
@@ -3667,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">
@@ -30,11 +31,10 @@
         <div id="connStatus" class="conn-status" title="点击可重新连接"><span id="connDot" style="color: var(--danger);">●</span>&nbsp;<span id="connLabel">连接中…</span></div>
         <div class="sidebar-bottom-meta">
           <div class="sidebar-bottom-links">
-            <a href="https://pi.dev" target="_blank" rel="noopener">pi.dev</a>
+            <a href="https://pi.dev" target="_blank" rel="noopener">pi<span id="piVersion"></span></a>
             <span class="sidebar-link-sep">·</span>
-            <a href="https://github.com/liguoshuai-1990/pi-web-chat" target="_blank" rel="noopener">pi-web-chat</a>
+            <a href="https://github.com/liguoshuai-1990/pi-chat" target="_blank" rel="noopener">pi-chat<span id="appVersion"></span></a>
           </div>
-          <span id="appVersion" class="app-version" title="pi-web-chat 版本"></span>
         </div>
       </div>
       <div class="sidebar-resizer" id="sidebarResizer" title="拖拽调整侧边栏宽度，双击恢复默认"></div>
@@ -174,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;
@@ -342,7 +342,6 @@ body {
   margin-top: 6px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
 }
 .sidebar-bottom-links {
@@ -928,6 +927,13 @@ body {
   to { opacity: 1; transform: scale(1.25); }
 }
 
+.streaming-cursor-row {
+  margin-top: 6px;
+  line-height: 1;
+}
+.streaming-cursor-row .typing-cursor::after {
+  margin-left: 0;
+}
 .typing-cursor::after {
   content: "▋"; display: inline-block; margin-left: 2px;
   animation: blink 1s steps(2) infinite; color: var(--accent);