@liguoshuai/pi-web-chat 1.8.3 → 1.8.5

package/docs/ARCHITECTURE.md

@@ -1,6 +1,6 @@
 # 架构设计文档
 
-> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.8.3 版本）。
+> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.8.5 版本）。
 
 ---
 
@@ -176,5 +176,6 @@ pi-web-chat/
 │   └── CHANGELOG.md                # 版本变更日志
 └── scripts/                        # 服务安装/卸载脚本
     ├── install-service.sh
+    ├── uninstall-service.sh
     └── pi-web-chat.service
 ```

package/docs/CHANGELOG.md

@@ -7,6 +7,42 @@ 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
+- **Markdown 渲染能力增强 (Markdown Enhancements: HR, Strikethrough & Task Checkboxes)**：
+  - 支持标准 Markdown 水平分割线（`---`、`***`、`___`）渲染为 `<hr>` 标签。
+  - 支持删除线语法（`~~strikethrough~~`）渲染为 `<del>` 标签。
+  - 支持任务列表复选框（`- [ ]` 与 `- [x]`）及加号无序列表（`+ item`）。
+  - 为 `h4`、`h5`、`h6`、`hr`、`del` 及任务复选框补充了精细的暗色主题 CSS 样式。
+
+### Fixed
+- **移动端息屏/切出恢复后历史消息自动同步 (Mobile Reconnect Session Auto-Sync)**：
+  - 修复手机端在后台挂起或息屏后切回页面时，未能及时同步后台已生成完毕的最新回复内容的问题。
+  - 增加 `syncSessionHistory` 历史同步机制，并在 `ws.onopen`、`visibilitychange` 与 `pageshow` 事件中自动拉取磁盘最新消息渲染至对话区。
+  - 优化 `backfill_start` / `backfill_end` 流式状态重置，保障后台生成途中切回时无缝追平实时生成内容。
+- **未绑定会话孤儿子进程即时回收 (Immediate Cleanup of Unkeyed Idle Agents)**：当客户端打开新建会话页面但未发送消息即关闭或切换时，后端未分配 Session Key 的孤立 `PiAgent` 进程在连接断开后立即释放，避免占用 5 分钟闲置内存。
+- **切换与加载历史会话时工作目录自动同步 (Session CWD Auto-Sync)**：点击侧边栏或通过 URL 参数（`?session=...`）打开会话时，自动将 `state.cwd` 同步为会话真实的 `data.header.cwd`，确保 Agent 执行环境与会话一致。
+- **工作目录变更后项目级默认配置实时重载 (Project Settings Live Reload on CWD Change)**：切换工作目录时重新获取 `/api/config?cwd=...`，确保项目根目录下的 `.pi/settings.json` 模型配置即时生效。
+- **波浪号路径解析规范化 (Tilde `~` Path Resolution Normalization)**：服务端引入统一的 `normalizePath`，确保会话参数与路径校验中包含的 `~` 家目录前缀能被正确展开并绝对化。
+- **历史错误消息展示保护 (Error Notice on Historical Failed Messages)**：修复历史会话中若生成中途报错中断时未能渲染失败提示条的问题。
+- **Package.json 发布字段补充 (Scripts Directory Inclusion)**：在 `package.json` 的 `files` 字段中加入 `scripts/` 目录，确保 Systemd 服务脚本正常打包发布。
+
+---
+
 ## [1.8.3] - 2026-07-26
 
 ### Fixed

package/docs/ISSUES.md

@@ -190,6 +190,19 @@
 
 ---
 
+## 18. 移动端顶栏空间挤压与思考胶囊截断
+
+**症状**：在手机端竖屏打开页面时，顶栏右侧的“深度思考 / 推理级别”（`🧠 High`）胶囊被挤压，只能看到一半的脑花图标，文本完全不可见。
+
+**根因**：移动端媒体查询中为 `.model-pill-container` 设置了 `max-width: 130px` 的硬限制。由于模型胶囊占据了大部分宽度，容器剩余宽度不足以完整容纳思考胶囊，导致其被裁剪。
+
+**修复**：
+- 移除移动端 `.model-pill-container` 的 `max-width: 130px` 限制，改为弹性无约束容器。
+- 优化顶栏各按钮尺寸与间距：缩小菜单按钮为 36px，工作目录胶囊限制最大 75px，模型胶囊适度缩略模型名并隐藏手机端冗余的“默认”徽章，为思考胶囊留出充足显示空间。
+- 追加 `<= 360px` 极窄屏响应式规则，确保在 iPhone SE 等小屏设备上也能完整显示。
+
+---
+
 ## 19. 移动端切换工作目录弹窗按钮超出边框
 
 **症状**：在手机端点击顶栏切换工作目录（CWD Modal）时，右侧的“确定切换”按钮超出了弹窗白色/暗色卡片右边框。
@@ -203,14 +216,53 @@
 - 在移动端媒体查询中调整弹窗内边距为 16px，优化输入框与按钮的 padding。
 - 在 `<= 380px` 超窄屏设备上自适应将输入框与操作按钮上下垂直排列（`flex-direction: column`），确保彻底杜绝横向溢出。
 
-**症状**：在手机端竖屏打开页面时，顶栏右侧的“深度思考 / 推理级别”（`🧠 High`）胶囊被挤压，只能看到一半的脑花图标，文本完全不可见。
+---
 
-**根因**：移动端媒体查询中为 `.model-pill-container` 设置了 `max-width: 130px` 的硬限制。由于模型胶囊占据了大部分宽度，容器剩余宽度不足以完整容纳思考胶囊，导致其被裁剪。
+## 20. 未绑定会话孤儿子进程即时回收
+
+**症状**：客户端打开新建会话页面但未发送任何 Prompt 就关闭页面或切换至其他会话时，后端生成的未分配 Session Key 的孤立 `PiAgent` 子进程会持续占用内存 5 分钟后才被回收。
+
+**根因**：原先 `detachWs` 统一对所有断连进程开启 5 分钟 `IDLE_TIMEOUT_MS` 倒计时。然而未绑定会话 Key 的进程由于没有 Session Key，后续没有任何客户端可以重新挂载接入该进程。
+
+**修复**：在 `detachWs` 中增加判断，若 Agent 未分配 Session Key（`!this.sessionKey`）且处于完全空闲状态（`!this.isBusy`），则在最后一个连接断开时立即调用 `stop()` 释放进程资源，避免无用进程驻留内存。
+
+---
+
+## 21. 切换与直接加载历史会话时工作目录 (CWD) 自动同步
+
+**症状**：通过 URL 参数（如 `?session=...`）或点击侧边栏加载属于其他工作目录的历史会话时，前端工作目录（CWD）未能联动更新，导致后续发送消息时 Agent 在错误的工作目录下执行命令与操作文件。
+
+**根因**：`loadSession` 在从 `/api/session` 接口获取会话详情后，仅解析了 `model` 和消息历史，未读取 `header.cwd` 同步更新 `state.cwd`。
+
+**修复**：在 `loadSession` 中自动比对并应用 `data.header.cwd`，同步更新 `state.cwd`、`localStorage` 及顶栏工作目录显示，确保后续 WebSocket 连接与 Agent 子进程的工作目录与会话原始目录精确一致。
+
+---
+
+## 22. 波浪号 (`~`) 路径解析规范化与 Markdown 渲染增强
+
+**症状**：
+1. 若 WebSocket 会话参数或切换会话传入带有 `~` 的路径，Node 原生 `path.resolve` 无法自动展开用户家目录，导致路径解析不一致。
+2. 模型输出的 Markdown 水平分割线（`---` / `***`）、删除线（`~~strikethrough~~`）、任务复选框（`- [ ]` / `- [x]`）未能正确渲染。
 
 **修复**：
-- 移除移动端 `.model-pill-container` 的 `max-width: 130px` 限制，改为弹性无约束容器。
-- 优化顶栏各按钮尺寸与间距：缩小菜单按钮为 36px，工作目录胶囊限制最大 75px，模型胶囊适度缩略模型名并隐藏手机端冗余的“默认”徽章，为思考胶囊留出充足显示空间。
-- 追加 `<= 360px` 极窄屏响应式规则，确保在 iPhone SE 等小屏设备上也能完整显示。
+- 服务端增加 `normalizePath` 统一处理 `~` 家目录展开与绝对路径规范化。
+- 前端 Markdown 渲染器增加对水平分割线 `<hr>`、删除线 `<del>`、任务列表复选框以及加号无序列表（`+ item`）的完整语法支持与对应样式。
+
+---
+
+## 23. 移动端切出/息屏恢复后会话未同步后台最新对话内容
+
+**症状**：在手机端发送消息或查看对话时，若切出应用或息屏锁定，等待一段时间后再返回页面（WebSocket 提示“网络连接已恢复”），但聊天窗口中仍停留在息屏前的旧状态，未能展示后台已生成完毕的完整回复。
+
+**根因**：
+1. 手机端在息屏或后台挂起时，浏览器暂停 JS 执行并断开 WebSocket。
+2. 任务在服务端后台运行完毕后，pi 将完整消息写入磁盘 `.jsonl` 并触发 `agent_settled`，随后服务端清空了针对该轮次的事件环形 Buffer。
+3. 手机端唤醒并重新建立 WebSocket 连接后，前端仅请求了 `get_state`，未主动从服务端 `/api/session` 重新拉取最新的会话历史消息，导致 DOM 中残留断线前的未完成状态。
+
+**修复**：
+- 抽取通用的 `syncSessionHistory(file)` 历史同步机制。
+- 在 `ws.onopen`（重连成功时）、`visibilitychange`（页面可见性恢复时）以及 `pageshow`（移动端切回页面时）自动触发 `syncSessionHistory`，重新拉取并渲染磁盘最新消息。
+- 完善 `backfill_start` / `backfill_end` 流式状态重置，确保如果在后台仍在流式生成途中切回，能清空旧数据并无缝追平实时流式内容。
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",
@@ -12,6 +12,7 @@
     "bin/",
     "public/",
     "docs/",
+    "scripts/",
     "README.md",
     "LICENSE"
   ],

package/public/app.js

@@ -42,6 +42,7 @@ const state = {
   thinkingLevel: "medium",
   sessionId: null,
   isBackfilling: false,
+  aborting: false,
 };
 
 let toastTimer = null;
@@ -71,9 +72,10 @@ function updateCwdDisplay() {
   if (wrap) wrap.title = `工作目录: ${state.cwd || "~"}`;
 }
 
-function setCwd(newCwd) {
+async function setCwd(newCwd) {
   state.cwd = newCwd;
   localStorage.setItem("pi_cwd", newCwd);
+  await loadServerConfig();
   updateCwdDisplay();
   clearChat();
   showEmptyState(true);
@@ -112,12 +114,18 @@ function saveRecentModel(model) {
 }
 
 async function loadServerConfig() {
+  if (!state.cwd) {
+    state.cwd = localStorage.getItem("pi_cwd") || document.body.dataset.cwd || "";
+  }
   try {
     const cwdParam = state.cwd ? `?cwd=${encodeURIComponent(state.cwd)}` : "";
     const res = await fetch(`${API}/api/config${cwdParam}`);
     const data = await res.json();
     if (data.home) state.homeDir = data.home;
     if (data.serverCwd) state.serverCwd = data.serverCwd;
+    if (!state.cwd) {
+      state.cwd = state.serverCwd || state.homeDir || "";
+    }
     if (data.version) {
       state.version = data.version;
       const verEl = $("#appVersion");
@@ -131,7 +139,7 @@ async function loadServerConfig() {
     }
   } catch {}
   if (!state.cwd) {
-    state.cwd = localStorage.getItem("pi_cwd") || state.serverCwd || state.homeDir || "";
+    state.cwd = state.serverCwd || state.homeDir || "";
   }
   loadRecentModels();
   updateCwdDisplay();
@@ -358,9 +366,14 @@ function renderInlineMd(text) {
       flushList();
       outHtml += mdTable(seg.lines);
     } else if (seg.kind === "line") {
-      // headings
-      const m = seg.text.match(/^(#{1,6})\s+(.*)$/);
-      if (m) {
+      // 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;
@@ -373,7 +386,7 @@ function renderInlineMd(text) {
         flushPara();
         flushList();
         outHtml += `<blockquote>${mdInlineBlock(seg.text.replace(/^>\s?/, ""))}</blockquote>`;
-      } else if (/^\s*[-*]\s+/.test(seg.text) || /^\s*\d+\.\s+/.test(seg.text)) {
+      } 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);
@@ -384,7 +397,16 @@ function renderInlineMd(text) {
           linkListOrdered = isOrdered;
           outHtml += "<" + linkListOpen + ">";
         }
-        outHtml += `<li>${mdInlineBlock(seg.text.replace(/^\s*([-*]|\d+\.)\s+/, ""))}</li>`;
+        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);
@@ -405,6 +427,8 @@ function mdInlineBlock(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
   s = s.replace(/(^|[^*])\*([^*]+)\*/g, "$1<em>$2</em>");
   s = s.replace(/(^|[^_])_([^_]+)_/g, "$1<em>$2</em>");
@@ -514,9 +538,51 @@ function initMobileToolbarFab() {
   });
 }
 
+async function syncSessionHistory(file, force = false) {
+  if (!file) return;
+  try {
+    const res = await fetch(`${API}/api/session?file=${encodeURIComponent(file)}`);
+    if (!res.ok) return;
+    const data = await res.json();
+    if (!data || data.error) return;
+
+    if (data.header?.cwd && data.header.cwd !== state.cwd) {
+      state.cwd = data.header.cwd;
+      localStorage.setItem("pi_cwd", state.cwd);
+      updateCwdDisplay();
+    }
+
+    if (data.model) {
+      state.currentModel = data.model;
+      renderModelPill();
+    }
+
+    const topName = data.sessionName || (data.header?.id ? baseName(file) : "新对话");
+    $("#topSessionName").textContent = topName;
+
+    // Only overwrite chat if force is true or we're not actively streaming mid-turn live
+    if (force || !state.streaming) {
+      clearChat();
+      const msgs = reconstructFromEntries(data.entries || []);
+      showEmptyState(msgs.length === 0);
+      for (const m of msgs) {
+        appendMessageNode(m.role, m);
+      }
+      scrollBottom();
+      refreshSessions();
+    }
+  } catch (e) {
+    console.warn("syncSessionHistory error:", e);
+  }
+}
+
 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();
@@ -529,38 +595,9 @@ async function loadSession(file) {
   if (window.innerWidth <= 768) {
     closeSidebar();
   }
-  // pull transcript from REST then connect a fresh WS pointed at this session
-  const res = await fetch(`${API}/api/session?file=${encodeURIComponent(file)}`);
-  const data = await res.json();
-
-  if (!res.ok || data.error) {
-    showToast(`加载会话失败: ${data.error || "无法读取会话文件"}`);
-    showEmptyState(true);
-    state.currentSessionFile = null;
-    return;
-  }
-
-  if (data.model) {
-    state.currentModel = data.model;
-    renderModelPill();
-  }
-
-  const topName = data.sessionName || (data.header?.id ? baseName(file) : "新对话");
-  $("#topSessionName").textContent = topName;
-
-  clearChat();
-  document.querySelector("#emptyState").style.display = "none";
-  const chat = $("#chat-inner");
-  // Walk through path entries to render messages in order.
-  // We reconstruct assistant/user/toolResult blocks.
-  const msgs = reconstructFromEntries(data.entries || []);
-  for (const m of msgs) {
-    appendMessageNode(m.role, m);
-  }
+  await syncSessionHistory(file, true);
   // Reconnect websocket pointed at this session so new prompts continue history.
   connectWs({ session: file });
-  // Update sidebar active highlight
-  refreshSessions();
 }
 
 function reconstructFromEntries(entries) {
@@ -592,7 +629,7 @@ function reconstructFromEntries(entries) {
         }
         return part;
       });
-      if (m.stopReason === "error" && content.length === 0) {
+      if (m.stopReason === "error") {
         let errMsg = m.errorMessage || "生成失败（模型返回错误）";
         try {
           const parsed = JSON.parse(errMsg);
@@ -613,7 +650,8 @@ function extractContentText(content) {
   return content
     .filter(c => c && (c.type === "text" || typeof c === "string"))
     .map(c => typeof c === "string" ? c : (c.text || ""))
-    .join("");
+    .filter(Boolean)
+    .join("\n\n");
 }
 
 function appendSystemNotice(text) {
@@ -846,14 +884,22 @@ function makeToolBlockFromCall(call) {
 
 function summaryArgs(name, args) {
   if (!args) return "";
+  let obj = args;
+  if (typeof args === "string") {
+    try { obj = JSON.parse(args); } catch { return args; }
+  }
   try {
-    if (name === "bash" && args.command) return args.command;
-    if (name === "read" && args.path) return args.path;
-    if (name === "write" && args.path) return args.path;
-    if (name === "edit" && args.path) return args.path;
-    if (name === "ls" && args.path) return args.path;
-    if (name === "grep") return args.pattern || "";
-    if (name === "find") return args.pattern || args.path || "";
+    if (name === "bash" && obj.command) return obj.command;
+    if (name === "read" && obj.path) return obj.path;
+    if (name === "write" && obj.path) return obj.path;
+    if (name === "edit" && obj.path) return obj.path;
+    if (name === "ls" && obj.path) return obj.path;
+    if (name === "grep") return obj.pattern || "";
+    if (name === "find") return obj.pattern || obj.path || "";
+    if (typeof obj === "object" && obj !== null) {
+      const keys = Object.keys(obj);
+      if (keys.length === 1 && typeof obj[keys[0]] === "string") return obj[keys[0]];
+    }
     return "";
   } catch { return ""; }
 }
@@ -1121,14 +1167,18 @@ function connectWs(opts = {}) {
   state.ws = ws;
   ws._gen = myGen;
 
-  ws.onopen = () => {
+  ws.onopen = async () => {
     if (ws._gen !== wsGen) return;
     isConnecting = false;
     setConnStatus("connected");
     startPingInterval();
 
-    if (wasDisconnected || reconnectAttempts > 0) {
+    const isReconnecting = wasDisconnected || reconnectAttempts > 0 || opts.isReconnect;
+    if (isReconnecting) {
       showToast("网络连接已恢复");
+      if (targetSession) {
+        await syncSessionHistory(targetSession, true);
+      }
     }
     wasDisconnected = false;
     reconnectAttempts = 0;
@@ -1189,6 +1239,11 @@ function handlePiMessage(obj) {
   // that happened in the background while no browser was attached.
   if (obj.type === "backfill_start") {
     state.isBackfilling = true;
+    state.streaming = true;
+    setComposerAborting(true);
+    state.streamingItems = [];
+    state.streamingMsg = null;
+    state.activeToolCalls.clear();
     return;
   }
   if (obj.type === "backfill_end") {
@@ -1199,6 +1254,11 @@ function handlePiMessage(obj) {
       setComposerAborting(true);
       ensureStreamingMsg();
       refreshStreamingContent();
+    } else {
+      finalizeStreamingMsg();
+      state.streaming = false;
+      setComposerAborting(false);
+      refreshSessions();
     }
     // jump to the latest content once the replay is done
     requestAnimationFrame(scrollBottom);
@@ -1240,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
@@ -1274,6 +1337,7 @@ function handlePiMessage(obj) {
       break;
     case "agent_start":
       state.streaming = true;
+      state.aborting = false;
       setComposerAborting(true);
       ensureStreamingMsg();
       refreshStreamingContent();
@@ -1285,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
@@ -1389,8 +1454,7 @@ function handlePiMessage(obj) {
     case "tool_execution_update": {
       const tc = state.activeToolCalls.get(obj.toolCallId);
       if (tc) {
-        const pr = obj.partialResult;
-        const text = pr && pr.content ? (Array.isArray(pr.content) ? pr.content.map(c => c.text || "").join("") : "") : "";
+        const text = extractContentText(obj.partialResult?.content);
         tc.body.innerHTML = escapeHtml(text) || "(执行中…)";
       }
       break;
@@ -1398,8 +1462,7 @@ function handlePiMessage(obj) {
     case "tool_execution_end": {
       const tc = state.activeToolCalls.get(obj.toolCallId);
       if (tc) {
-        const res = obj.result;
-        const text = res && res.content ? (Array.isArray(res.content) ? res.content.map(c => c.text || "").join("") : "") : "";
+        const text = extractContentText(obj.result?.content);
         tc.body.innerHTML = escapeHtml(text) || "(无输出)";
         tc.head.querySelector(".state").textContent = obj.isError ? "错误" : "完成";
         tc.head.querySelector(".state").classList.toggle("error", !!obj.isError);
@@ -1412,6 +1475,7 @@ function handlePiMessage(obj) {
     case "pi_exit":
       finalizeStreamingMsg();
       state.streaming = false;
+      state.aborting = false;
       setComposerAborting(false);
       $("#connDot").style.color = "var(--danger)";
       break;
@@ -1507,8 +1571,13 @@ function updateState(d) {
     } else if (state.streaming) {
       finalizeStreamingMsg();
       state.streaming = false;
+      state.aborting = false;
       setComposerAborting(false);
-      refreshSessions();
+      if (state.currentSessionFile) {
+        syncSessionHistory(state.currentSessionFile, true);
+      } else {
+        refreshSessions();
+      }
     }
   }
 }
@@ -2007,8 +2076,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;
@@ -2039,10 +2124,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();
@@ -2069,8 +2178,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) {
@@ -2080,16 +2200,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 });
@@ -2097,6 +2208,7 @@ function submitPrompt() {
   autoResize();
 
   state.streaming = true;
+  state.aborting = false;
   setComposerAborting(true);
   ensureStreamingMsg();
   refreshStreamingContent();
@@ -2126,7 +2238,7 @@ async function init() {
   $("#btnNew").addEventListener("click", () => {
     if (state.streaming) {
       if (!confirm("正在生成中，新建会话会终止当前操作，确定吗？")) return;
-      sendWs({ type: "abort" });
+      abortGeneration();
     }
     clearChat();
     showEmptyState(true);
@@ -2143,12 +2255,7 @@ async function init() {
 
   $("#sendBtn").addEventListener("click", () => {
     if (state.streaming) {
-      const ta = $("#composer");
-      if (ta && ta.value.trim()) {
-        submitSteer();
-      } else {
-        submitPrompt();
-      }
+      abortGeneration();
     } else {
       submitPrompt();
     }
@@ -2202,11 +2309,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")?.style.display === "flex";
+      if (!isMenuOpen && !isModalOpen) {
+        abortGeneration();
+      }
     }
   });
 
@@ -2323,10 +2436,22 @@ async function init() {
         scheduleReconnect(0);
       } else {
         try { state.ws.send(JSON.stringify({ type: "ping" })); } catch {}
+        if (state.currentSessionFile && !state.streaming) {
+          syncSessionHistory(state.currentSessionFile, true);
+        }
       }
     }
   });
 
+  window.addEventListener("pageshow", () => {
+    if (!state.wsConnected) {
+      reconnectAttempts = 0;
+      scheduleReconnect(0);
+    } else if (state.currentSessionFile && !state.streaming) {
+      syncSessionHistory(state.currentSessionFile, true);
+    }
+  });
+
   // Global event delegation for code block copy buttons
   document.addEventListener("click", async (e) => {
     const btn = e.target.closest(".btn-copy-code");

package/public/style.css

@@ -439,12 +439,30 @@ body {
 }
 .msg.assistant .content ul, .msg.assistant .content ol { margin: 8px 0 12px 24px; }
 .msg.assistant .content li { margin: 4px 0; }
-.msg.assistant .content h1, .msg.assistant .content h2, .msg.assistant .content h3 {
+.msg.assistant .content h1, .msg.assistant .content h2, .msg.assistant .content h3,
+.msg.assistant .content h4, .msg.assistant .content h5, .msg.assistant .content h6 {
   margin: 16px 0 10px; line-height: 1.3;
 }
 .msg.assistant .content h1 { font-size: 20px; }
 .msg.assistant .content h2 { font-size: 18px; }
 .msg.assistant .content h3 { font-size: 16px; }
+.msg.assistant .content h4 { font-size: 14.5px; }
+.msg.assistant .content h5 { font-size: 13.5px; }
+.msg.assistant .content h6 { font-size: 12.5px; }
+.msg.assistant .content hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 16px 0;
+}
+.msg.assistant .content del {
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+.msg.assistant .content .task-list-item-checkbox {
+  margin-right: 6px;
+  vertical-align: -2px;
+  accent-color: var(--accent);
+}
 .msg.assistant .content a { color: #4ea1ff; text-decoration: none; }
 .msg.assistant .content a:hover { text-decoration: underline; }
 .msg.assistant .content table {
@@ -690,7 +708,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;
@@ -699,10 +720,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

@@ -0,0 +1,84 @@
+#!/usr/bin/env bash
+# Install pi-web-chat as a user-level systemd service.
+#
+# Why user-level? pi reads/writes ~/.pi and cwd files under $HOME, and it
+# launches `pi` from ~/.npm-global/bin (or wherever $PI_BIN points). Running
+# as a system unit would either need root or your home dir in a bind mount;
+# user-level systemd (systemd --user) is the obvious fit and needs no sudo.
+#
+# Usage:
+#   ./scripts/install-service.sh [PORT] [--restart]
+#
+# After install:
+#   journalctl --user -u pi-web-chat -f
+#   systemctl --user status pi-web-chat
+#   systemctl --user restart pi-web-chat
+
+set -euo pipefail
+
+HERE="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT="$(cd "$HERE/.." && pwd)"
+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}"
+RESTART_NOW="no"
+for arg in "$@"; do
+  case "$arg" in
+    --restart|--now) RESTART_NOW="yes" ;;
+  esac
+done
+
+# Sanity checks.
+if [[ ! -f "$SRC" ]]; then
+  echo "ERR: unit file not found at $SRC" >&2; exit 1
+fi
+if ! command -v node >/dev/null 2>&1; then
+  echo "ERR: 'node' not on PATH" >&2; exit 1
+fi
+if ! command -v systemctl >/dev/null 2>&1; then
+  echo "ERR: 'systemctl' not on PATH — this installer only supports systemd" >&2; exit 1
+fi
+# User systemd needs linger for services to outlive the login session.
+if ! loginctl show-user "$USER" 2>/dev/null | grep -q '^Linger=yes'; then
+  echo "⚠ Linger is not enabled for $USER — service will stop at logout."
+  echo "  To keep it running after logout, run (one-off, requires sudo):"
+  echo "    sudo loginctl enable-linger $USER"
+fi
+
+mkdir -p "$DEST_DIR"
+
+# Concrete paths. The shipped unit uses %h for portability, but %h is only
+# resolved when the user systemd instance starts — and we want a file that
+# 'systemctl --user status' shows an exact path on, so substitute now.
+USER_HOME="$HOME"
+PROJECT_DIR="$ROOT"
+NODE_BIN="$(command -v node)"
+
+# Read the template and substitute.
+sed \
+  -e "s|^WorkingDirectory=.*|WorkingDirectory=$PROJECT_DIR|" \
+  -e "s|^ExecStart=.*|ExecStart=$NODE_BIN $PROJECT_DIR/server.js|" \
+  -e "s|^Environment=PORT=.*|Environment=PORT=$PORT|" \
+  -e "s|%h/projects/pi-web-chat|$PROJECT_DIR|g" \
+  -e "s|%h/|$USER_HOME/|g" \
+  "$SRC" > "$DEST"
+
+echo "✔ wrote $DEST"
+
+# Reload + (re)enable + start.
+systemctl --user daemon-reload
+systemctl --user enable pi-web-chat.service
+if [[ "$RESTART_NOW" == "yes" ]] || systemctl --user is-active --quiet pi-web-chat.service; then
+  systemctl --user restart pi-web-chat.service
+else
+  systemctl --user start pi-web-chat.service || true
+fi
+
+echo
+echo "Status:"
+systemctl --user --no-pager status pi-web-chat.service || true
+echo
+echo "Logs:"
+echo "  journalctl --user -u pi-web-chat -f"

package/scripts/pi-web-chat.service

@@ -0,0 +1,41 @@
+[Unit]
+Description=pi-web-chat (pi RPC web UI)
+Documentation=https://github.com/liguoshuai-1990/pi-web-chat
+# Run after the user session / network is available (no-op for user systemd
+# units that run after the user logs in).
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=simple
+# Project lives in $HOME/projects/pi-web-chat — override with `WorkingDirectory=`
+# in an override unit or in install-service.sh if you keep it elsewhere.
+# We don't hardcode the path here so the file is portable across machines /
+# forks; the install script substitutes it at install time.
+WorkingDirectory=%h/projects/pi-web-chat
+
+# Same reasoning for the Node binary — prefer what Node.js EnvFile says if
+# the user has nvm/fnm; otherwise rely on /usr/bin/node being on PATH.
+ExecStart=/usr/bin/env node server.js
+
+# Allow overriding via environment files / drop-ins without editing this
+# unit. PORT, PI_BIN, PI_SESSIONS_DIR etc. are honored by server.js.
+Environment=PORT=3000
+Environment=NODE_ENV=production
+Environment=PI_SKIP_VERSION_CHECK=1
+
+# Logging: stdout/stderr go to journald. `journalctl --user -u pi-web-chat -f`.
+StandardOutput=journal
+StandardError=journal
+SyslogIdentifier=pi-web-chat
+
+# Restart on any failure; back off so we don't tight-loop if node is broken.
+Restart=on-failure
+RestartSec=3
+
+# Hardening.
+NoNewPrivileges=true
+PrivateTmp=true
+
+[Install]
+WantedBy=default.target

package/scripts/uninstall-service.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env bash
+# Remove the pi-web-chat user systemd service.
+# Does NOT delete the project directory or sessions.
+
+set -euo pipefail
+
+UNIT_NAME="pi-web-chat.service"
+DEST="${XDG_CONFIG_HOME:-$HOME/.config}/systemd/user/$UNIT_NAME"
+
+if ! command -v systemctl >/dev/null 2>&1; then
+  echo "ERR: 'systemctl' not on PATH" >&2; exit 1
+fi
+
+if systemctl --user list-unit-files "$UNIT_NAME" 2>/dev/null | grep -q "$UNIT_NAME"; then
+  systemctl --user disable --now "$UNIT_NAME" || true
+  echo "✔ disabled $UNIT_NAME"
+fi
+
+if [[ -f "$DEST" ]]; then
+  rm "$DEST"
+  systemctl --user daemon-reload
+  echo "✔ removed $DEST"
+else
+  echo "no unit file at $DEST"
+fi

package/server.js

@@ -36,15 +36,20 @@ function resolvePiBin() {
 const PI_BIN = resolvePiBin();
 function home() { return os.homedir(); }
 
-function normalizeCwd(dir) {
-  if (!dir) return process.cwd() || home();
-  let resolved = dir;
-  if (dir.startsWith("~")) {
-    resolved = path.join(home(), dir.slice(1));
+function normalizePath(p) {
+  if (!p) return "";
+  let resolved = p;
+  if (p.startsWith("~")) {
+    resolved = path.join(home(), p.slice(1));
   }
   return path.resolve(resolved);
 }
 
+function normalizeCwd(dir) {
+  if (!dir) return process.cwd() || home();
+  return normalizePath(dir);
+}
+
 // Where pi stores sessions, organized by cwd-encoded subdirectory.
 const SESSIONS_DIR = process.env.PI_SESSIONS_DIR || path.join(home(), ".pi", "agent", "sessions");
 const PORT = process.env.PORT || 3000;
@@ -172,13 +177,19 @@ class PiAgent {
       if (IDLE_DROP_HEAP) {
         try { if (typeof global.gc === "function") global.gc(); } catch {}
       }
+      // If unkeyed AND truly idle (never had a session assigned and not busy),
+      // no client can ever re-attach to it. Stop immediately to reclaim memory.
+      if (!this.sessionKey && !this.isBusy) {
+        this.stop();
+        return;
+      }
       this.maybeScheduleIdleKill();
     }
   }
 
   setSessionKey(cwd, sessionPath) {
     if (!sessionPath) return;
-    const resolved = path.resolve(sessionPath);
+    const resolved = normalizePath(sessionPath);
     const key = `${cwd}:${resolved}`;
     if (this.sessionKey && this.sessionKey !== key) {
       activeAgents.delete(this.sessionKey);
@@ -623,7 +634,7 @@ async function listAllSessionFiles() {
   }
 
   // Subdirectory .jsonl files (created by pi itself when cwd is encoded).
-  const subdirs = top.filter(d => d.isDirectory() || d.isSymbolicLink());
+  const subdirs = top.filter(d => d.isDirectory() || (d.isSymbolicLink() && !d.name.endsWith(".jsonl")));
   for (const d of subdirs) {
     const dp = path.join(SESSIONS_DIR, d.name);
     const names = (await readdir(dp).catch(() => [])).filter(f => f.endsWith(".jsonl"));
@@ -717,12 +728,8 @@ app.get("/api/session", async (req, res) => {
     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 = file;
-    if (resolvedFile.startsWith("~")) {
-      resolvedFile = path.join(home(), resolvedFile.slice(1));
-    }
-    resolvedFile = path.resolve(resolvedFile);
-    const resolvedSessionsDir = path.resolve(SESSIONS_DIR);
+    let resolvedFile = normalizePath(file);
+    const resolvedSessionsDir = normalizePath(SESSIONS_DIR);
     const relPath = path.relative(resolvedSessionsDir, resolvedFile);
     if (relPath.startsWith("..") || path.isAbsolute(relPath)) {
       return res.status(403).json({ error: "Access denied" });
@@ -834,7 +841,7 @@ wss.on("connection", (ws, req) => {
   const url = new URL(req.url, "http://x");
   const cwd = normalizeCwd(url.searchParams.get("cwd"));
   const session = url.searchParams.get("session") || null;
-  const key = session ? `${cwd}:${path.resolve(session)}` : null;
+  const key = session ? `${cwd}:${normalizePath(session)}` : null;
 
   let agent = null;
   if (key && activeAgents.has(key) && activeAgents.get(key).alive) {