@liguoshuai/pi-web-chat 1.8.4 → 1.8.7

package/docs/ARCHITECTURE.md

@@ -1,6 +1,6 @@
 # 架构设计文档
 
-> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.8.4 版本）。
+> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.8.5 版本）。
 
 ---
 

package/docs/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.8.5] - 2026-08-23
+
+### Fixed
+- **中止/终止生成按钮逻辑修复 (Abort Button Logic & UX Fix)**：
+  - 修复生成过程中点击终止按钮（`■`）时，因输入框为空触发提前返回（`if (!text) return`）导致无法发出 `abort` 信号的问题。
+  - 抽离独立的 `abortGeneration()` 统一处理中断生成流程，确保点击停止按钮无条件触发任务终止。
+  - 修复输入框有草稿时点击停止按钮误触发 `steer`（插入指令）的问题，明确区分停止按钮与插入指令按钮职责。
+  - 新增中止中即时视觉反馈（按钮变为等待状态 `⏳`，输入框边缘高亮变红，提示文字变更为“中止当前任务中…”），并在底层 `agent_settled` 或 `abort` 响应后安全恢复。
+  - 支持在生成过程中按 `Escape` 键快速中止当前任务（模态框或菜单打开时除外）。
+  - 在新建会话及切换会话时，若当前任务正在运行中，自动先行中断当前流式任务以避免后台状态错乱。
+
+---
+
 ## [1.8.4] - 2026-07-26
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.8.4",
+  "version": "1.8.7",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",

package/public/app.js

@@ -42,6 +42,7 @@ const state = {
   thinkingLevel: "medium",
   sessionId: null,
   isBackfilling: false,
+  aborting: false,
 };
 
 let toastTimer = null;
@@ -576,8 +577,12 @@ async function syncSessionHistory(file, force = false) {
 }
 
 async function loadSession(file) {
+  if (state.streaming) {
+    abortGeneration();
+  }
   state.currentSessionFile = file;
   state.streaming = false;
+  state.aborting = false;
   state.streamingItems = [];
   state.streamingMsg = null;
   state.activeToolCalls.clear();
@@ -1295,6 +1300,9 @@ function handlePiMessage(obj) {
         renderThinkingPill();
         updateEmptyStateModelInfo();
       }
+    } else if (obj.command === "abort") {
+      state.aborting = false;
+      setComposerAborting(false);
     }
     else if (obj.command === "switch_session" && obj.success) {
       // ask pi for current state so we can get session id, name
@@ -1329,6 +1337,7 @@ function handlePiMessage(obj) {
       break;
     case "agent_start":
       state.streaming = true;
+      state.aborting = false;
       setComposerAborting(true);
       ensureStreamingMsg();
       refreshStreamingContent();
@@ -1340,6 +1349,7 @@ function handlePiMessage(obj) {
     case "agent_settled":
       finalizeStreamingMsg();
       state.streaming = false;
+      state.aborting = false;
       setComposerAborting(false);
       sendWs({ type: "get_state" });
       refreshSessions(); // titles may have changed
@@ -1465,6 +1475,7 @@ function handlePiMessage(obj) {
     case "pi_exit":
       finalizeStreamingMsg();
       state.streaming = false;
+      state.aborting = false;
       setComposerAborting(false);
       $("#connDot").style.color = "var(--danger)";
       break;
@@ -1560,6 +1571,7 @@ function updateState(d) {
     } else if (state.streaming) {
       finalizeStreamingMsg();
       state.streaming = false;
+      state.aborting = false;
       setComposerAborting(false);
       if (state.currentSessionFile) {
         syncSessionHistory(state.currentSessionFile, true);
@@ -1947,14 +1959,12 @@ function renderModelList(listContainer) {
     const opt = el("div", {
       class: "opt" + (active ? " active" : ""),
       onclick: () => {
-        const prev = state.currentModel;
         $("#modelPillName").textContent = "切换中…";
         sendWs({ type: "set_model", provider: m.provider, modelId: m.id });
         saveRecentModel(m);
         $("#modelMenu").classList.remove("open");
-        if (prev && (prev.id !== m.id || prev.provider !== m.provider)) {
-          appendSystemNotice(`已切换模型至 ${m.provider ? m.provider + " / " : ""}${m.name || m.id}`);
-        }
+        // 成功后的“已切换模型至 …”提示统一由 set_model 的 response 处理逻辑弹出，
+        // 避免在这里乐观提示一次、响应到达后 pi 再提示一次（重复提示）。
       },
     }, [
       el("span", { class: "check", html: active ? "✓" : "" }),
@@ -2064,8 +2074,24 @@ function updateComposerUI() {
   const text = ta ? ta.value.trim() : "";
   const sendBtn = $("#sendBtn");
   const steerBtn = $("#steerBtn");
+  const inner = $("#composerInner");
 
-  if (state.streaming) {
+  if (inner) {
+    inner.classList.toggle("aborting", !!state.aborting);
+  }
+
+  if (state.aborting) {
+    if (sendBtn) {
+      sendBtn.classList.add("stop");
+      sendBtn.disabled = true;
+      sendBtn.textContent = "⏳";
+      sendBtn.title = "中止中…";
+    }
+    if (steerBtn) {
+      steerBtn.style.display = "none";
+    }
+    if (ta) ta.placeholder = "正在中止当前任务…";
+  } else if (state.streaming) {
     if (sendBtn) {
       sendBtn.classList.add("stop");
       sendBtn.disabled = !state.wsConnected;
@@ -2096,10 +2122,34 @@ function updateComposerUI() {
 }
 
 function setComposerAborting(yes) {
+  if (!yes) {
+    state.aborting = false;
+    const inner = $("#composerInner");
+    if (inner) inner.classList.remove("aborting");
+    const hint = $(".composer-hint");
+    if (hint && hint.textContent.includes("中止")) {
+      hint.textContent = "pi 会执行命令与读写你的文件 —— 请注意操作内容。";
+    }
+  }
   updateComposerUI();
   renderModelPill();
 }
 
+function abortGeneration() {
+  if (!state.streaming && !state.aborting) return;
+  if (!state.wsConnected) {
+    const hint = $(".composer-hint");
+    if (hint) hint.textContent = "操作失败：WebSocket 未连接。正在尝试重连…";
+    scheduleReconnect(0);
+    return;
+  }
+  state.aborting = true;
+  updateComposerUI();
+  const hint = $(".composer-hint");
+  if (hint) hint.textContent = "中止当前任务中…";
+  sendWs({ type: "abort" });
+}
+
 function submitSteer() {
   const ta = $("#composer");
   const text = ta.value.trim();
@@ -2126,8 +2176,19 @@ function submitSteer() {
 }
 
 function submitPrompt() {
+  if (state.streaming) {
+    const ta = $("#composer");
+    const text = ta ? ta.value.trim() : "";
+    if (text) {
+      submitSteer();
+    } else {
+      abortGeneration();
+    }
+    return;
+  }
+
   const ta = $("#composer");
-  const text = ta.value.trim();
+  const text = ta ? ta.value.trim() : "";
   const hint = $(".composer-hint");
   if (!text) return;
   if (!state.wsConnected) {
@@ -2137,16 +2198,7 @@ function submitPrompt() {
     if (box) { box.style.boxShadow = "0 0 0 2px var(--danger)"; setTimeout(() => { box.style.boxShadow = ""; }, 350); }
     return;
   }
-  if (state.streaming) {
-    if (text) {
-      submitSteer();
-      return;
-    }
-    if (hint) hint.textContent = "中止当前生成中…";
-    sendWs({ type: "abort" });
-    return;
-  }
-  
+
   if (hint) hint.textContent = "pi 会执行命令与读写你的文件 —— 请注意操作内容。"; // restore default
   // Render the user's message locally for instant feedback.
   appendMessageNode("user", { text });
@@ -2154,6 +2206,7 @@ function submitPrompt() {
   autoResize();
 
   state.streaming = true;
+  state.aborting = false;
   setComposerAborting(true);
   ensureStreamingMsg();
   refreshStreamingContent();
@@ -2183,7 +2236,7 @@ async function init() {
   $("#btnNew").addEventListener("click", () => {
     if (state.streaming) {
       if (!confirm("正在生成中，新建会话会终止当前操作，确定吗？")) return;
-      sendWs({ type: "abort" });
+      abortGeneration();
     }
     clearChat();
     showEmptyState(true);
@@ -2200,12 +2253,7 @@ async function init() {
 
   $("#sendBtn").addEventListener("click", () => {
     if (state.streaming) {
-      const ta = $("#composer");
-      if (ta && ta.value.trim()) {
-        submitSteer();
-      } else {
-        submitPrompt();
-      }
+      abortGeneration();
     } else {
       submitPrompt();
     }
@@ -2259,11 +2307,17 @@ async function init() {
     });
   }
 
-  // Keyboard shortcut: Ctrl+M / Cmd+M to toggle model selector
+  // Keyboard shortcut: Ctrl+M / Cmd+M to toggle model selector, Escape to abort if streaming
   window.addEventListener("keydown", (e) => {
     if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "m") {
       e.preventDefault();
       toggleModelMenu();
+    } else if (e.key === "Escape" && state.streaming) {
+      const isMenuOpen = $("#modelMenu")?.classList.contains("open") || $("#thinkingMenu")?.classList.contains("open");
+      const isModalOpen = $("#cwdModal")?.classList.contains("open");
+      if (!isMenuOpen && !isModalOpen) {
+        abortGeneration();
+      }
     }
   });
 

package/public/style.css

@@ -356,7 +356,11 @@ body {
   font-size: 15px; line-height: 1.65; color: var(--text);
   max-width: 100%; min-width: 0;
 }
-.msg.assistant .content p { margin-bottom: 12px; }
+.msg.assistant .content p {
+  margin-bottom: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
 .msg.assistant .content p:last-child { margin-bottom: 0; }
 .msg.assistant .content pre {
   background: #0d0d0d; border: 1px solid var(--border);
@@ -708,7 +712,10 @@ body {
   transition: border-color .15s;
 }
 .composer-inner:focus-within { border-color: var(--text-dim); }
-.composer-inner.aborting { border-color: var(--danger); }
+.composer-inner.aborting {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 1px var(--danger);
+}
 .composer textarea {
   flex: 1; background: transparent; border: none; outline: none; resize: none;
   color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.5;
@@ -717,10 +724,12 @@ body {
 .composer .send-btn {
   width: 36px; height: 32px; border-radius: 18px; border: none; cursor: pointer;
   background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
-  flex-shrink: 0; transition: background .15s, opacity .15s;
+  flex-shrink: 0; transition: background .15s, opacity .15s, transform .1s;
 }
 .composer .send-btn:disabled { background: #3a3a3a; color: #6f6f6f; cursor: not-allowed; }
 .composer .send-btn.stop { background: var(--danger); }
+.composer .send-btn.stop:hover:not(:disabled) { background: #f87171; }
+.composer .send-btn.stop:active:not(:disabled) { transform: scale(0.95); }
 .composer .steer-btn {
   display: inline-flex;
   align-items: center;

package/scripts/install-service.sh

@@ -22,11 +22,12 @@ SRC="$HERE/pi-web-chat.service"
 DEST_DIR="${XDG_CONFIG_HOME:-$HOME/.config}/systemd/user"
 DEST="$DEST_DIR/pi-web-chat.service"
 
-PORT="${1:-3000}"
+PORT="3000"
 RESTART_NOW="no"
 for arg in "$@"; do
   case "$arg" in
     --restart|--now) RESTART_NOW="yes" ;;
+    [0-9]*) PORT="$arg" ;;
   esac
 done
 

package/server.js

@@ -3,7 +3,7 @@
 // for listing sessions and reading session history from the JSONL store.
 import { spawn } from "child_process";
 import { randomUUID } from "crypto";
-import { readFile, readdir, stat, writeFile, mkdir } from "fs/promises";
+import { readFile, readdir, stat, writeFile, mkdir, realpath as fsRealpath } from "fs/promises";
 import { readFileSync, existsSync } from "fs";
 import { StringDecoder } from "string_decoder";
 import express from "express";
@@ -213,14 +213,14 @@ class PiAgent {
   maybeScheduleIdleKill() {
     // Only arm the reclamation timer when: no client attached AND truly idle.
     // A background task that is still running must never be killed here.
-    if (this.hasWs || this.isBusy) return;
+    if (!this.alive || this.hasWs || this.isBusy) return;
     if (IDLE_TIMEOUT_MS === 0) return; // disabled
     this.cancelIdleKill();
     const ms = IDLE_TIMEOUT_MS;
     this.idleTimer = setTimeout(() => {
       this.idleTimer = null;
       // re-check at fire time — a reconnect or new task may have started.
-      if (this.hasWs || this.isBusy) return;
+      if (!this.alive || this.hasWs || this.isBusy) return;
       console.log(`Reclaiming truly-idle pi agent after ${Math.round(ms / 1000)}s (key=${this.sessionKey || "unkeyed"})`);
       if (IDLE_DROP_HEAP) {
         try { if (typeof global.gc === "function") global.gc(); } catch {}
@@ -271,6 +271,10 @@ class PiAgent {
       if (this.sessionKey) activeAgents.delete(this.sessionKey);
       this.cancelIdleKill();
       if (this.lifetimeTimer) { clearTimeout(this.lifetimeTimer); this.lifetimeTimer = null; }
+      for (const [id, resolve] of this.pending) {
+        resolve({ type: "response", id, success: false, error: err.message });
+      }
+      this.pending.clear();
       console.error(`[pi spawn error]`, err);
       this.wsSend({ type: "pi_exit", error: err.message });
       for (const s of this.sockets) { try { s.close(); } catch {} }
@@ -291,6 +295,10 @@ class PiAgent {
       console.log(`pi exited (code=${code})`);
       this.wsSend({ type: "pi_exit", code });
       if (this.sessionKey) activeAgents.delete(this.sessionKey);
+      for (const [id, resolve] of this.pending) {
+        resolve({ type: "response", id, success: false, error: "pi exited" });
+      }
+      this.pending.clear();
       for (const s of this.sockets) { try { s.close(); } catch {} }
       this.sockets.clear();
       this.cancelIdleKill();
@@ -326,6 +334,10 @@ class PiAgent {
         this.setStreaming(false);
         this.eventBuffer = [];
         this.bufferHead = 0;
+        // If unkeyed, actively query state from pi so sessionKey is recorded
+        if (!this.sessionKey) {
+          this.send({ type: "get_state" });
+        }
         break;
       case "pi_exit": this.state = "idle"; break;
     }
@@ -386,7 +398,22 @@ class PiAgent {
       }
       const id = String(++this.reqId);
       const payload = { ...cmd, id };
-      this.pending.set(id, resolve);
+      // Long-running commands (prompt/steer) are tracked for their whole
+      // lifetime: pi's response may legitimately take many minutes, and the
+      // pending entry doubles as the isBusy guard that protects a working
+      // agent from idle-kill. Fire-and-forget queries (get_state etc.) keep a
+      // safety timeout so a dropped response doesn't leak the promise.
+      const longRunning = cmd.type === "prompt" || cmd.type === "steer";
+      let timeoutId = null;
+      const settled = { done: false };
+      const complete = (obj) => {
+        if (settled.done) return;
+        settled.done = true;
+        this.pending.delete(id);
+        if (timeoutId) { clearTimeout(timeoutId); timeoutId = null; }
+        resolve(obj);
+      };
+      this.pending.set(id, complete);
       this.markActivity();
       try {
         this.proc.stdin.write(JSON.stringify(payload) + "\n");
@@ -394,14 +421,14 @@ class PiAgent {
         this.pending.delete(id);
         return resolve({ type: "response", id, success: false, error: err.message });
       }
-      // Safety: timeout so a dropped response doesn't leak the promise.
-      setTimeout(() => {
-        if (this.pending.has(id)) {
-          this.pending.delete(id);
-          this.markActivity();
-          resolve({ type: "response", id, success: false, error: "timeout" });
-        }
-      }, 60000);
+      if (!longRunning) {
+        timeoutId = setTimeout(() => {
+          if (this.pending.has(id)) {
+            this.pending.delete(id);
+            resolve({ type: "response", id, success: false, error: "timeout" });
+          }
+        }, 60000);
+      }
     });
   }
 
@@ -459,6 +486,10 @@ class PiAgent {
     if (this.sessionKey) {
       activeAgents.delete(this.sessionKey);
     }
+    for (const [id, resolve] of this.pending) {
+      resolve({ type: "response", id, success: false, error: "pi process stopped" });
+    }
+    this.pending.clear();
     for (const s of this.sockets) { try { s.close(); } catch {} }
     this.sockets.clear();
     try { this.proc && this.proc.kill("SIGTERM"); } catch {}
@@ -727,13 +758,34 @@ app.get("/api/session", async (req, res) => {
     const file = req.query.file;
     if (!file || !file.endsWith(".jsonl")) return res.status(400).json({ error: "bad file" });
     
-    // Security check: ensure the file path is within SESSIONS_DIR
-    let resolvedFile = normalizePath(file);
+    // Security check: ensure the file path is within SESSIONS_DIR. We resolve the
+    // canonical (real) path rather than just the lexical one, otherwise a
+    // symlink placed inside SESSIONS_DIR could point outside and let a caller
+    // read arbitrary .jsonl files via the traversal check above.
     const resolvedSessionsDir = normalizePath(SESSIONS_DIR);
-    const relPath = path.relative(resolvedSessionsDir, resolvedFile);
+    const requestedPath = normalizePath(file);
+    const relPath = path.relative(resolvedSessionsDir, requestedPath);
     if (relPath.startsWith("..") || path.isAbsolute(relPath)) {
       return res.status(403).json({ error: "Access denied" });
     }
+    // Canonicalize both target file and sessions directory to verify the real
+    // target still lives under the real SESSIONS_DIR even when symlinks exist.
+    let resolvedFile;
+    try {
+      resolvedFile = await fsRealpath(requestedPath);
+    } catch {
+      // Fall back to the lexical path if realpath fails (e.g. missing file);
+      // the read below will surface the actual error.
+      resolvedFile = requestedPath;
+    }
+    let canonicalSessionsDir = resolvedSessionsDir;
+    try {
+      canonicalSessionsDir = await fsRealpath(resolvedSessionsDir);
+    } catch {}
+    const realRel = path.relative(canonicalSessionsDir, resolvedFile);
+    if (realRel.startsWith("..") || path.isAbsolute(realRel)) {
+      return res.status(403).json({ error: "Access denied" });
+    }
 
     const content = await readFile(resolvedFile, "utf8");
     const lines = content.split("\n").filter(Boolean);
@@ -751,11 +803,6 @@ app.get("/api/session", async (req, res) => {
     // Build a map and reconstruct the active path from root -> leaf.
     const byId = new Map();
     for (const e of entries) if (e.id) byId.set(e.id, e);
-    let leaf = null;
-    for (const e of entries) {
-      // a leaf is one that nobody else has as parentId (and isn't a non-message like header)
-      if (e.type === "message" || e.type === "message_summary") leaf = e.id;
-    }
     // find true leaf = last entry with no children
     const childCount = new Map();
     for (const e of entries) {
@@ -905,7 +952,8 @@ wss.on("connection", (ws, req) => {
         agent.send({ type: "new_session" });
         break;
       case "switch_session":
-        if (msg.sessionPath) agent.setSessionKey(cwd, msg.sessionPath);
+        if (!msg.sessionPath) break; // refuse malformed request; never forward an undefined path to pi
+        agent.setSessionKey(cwd, msg.sessionPath);
         agent.send({ type: "switch_session", sessionPath: msg.sessionPath });
         break;
       case "steer":