@liguoshuai/pi-web-chat 1.7.3 → 1.7.5

package/README.md

@@ -154,6 +154,10 @@ pi-web-chat/
 │   ├── index.html                  单页 UI
 │   ├── app.js                      前端逻辑与状态机
 │   └── style.css                   ChatGPT/Gemini 风格样式
+├── scripts/                        Systemd 服务安装与管理脚本
+│   ├── pi-web-chat.service         Systemd user unit 模板
+│   ├── install-service.sh          一键安装与启动脚本
+│   └── uninstall-service.sh        一键卸载脚本
 └── docs/                           项目文档库
     ├── ARCHITECTURE.md             架构设计文档
     ├── DESIGN.md                   详细设计与决策文档
@@ -210,6 +214,10 @@ journalctl --user -u pi-web-chat -f
 
 卸载服务：
 ```bash
+# 使用一键卸载脚本
+./scripts/uninstall-service.sh
+
+# 或手动清理：
 systemctl --user disable --now pi-web-chat
 rm ~/.config/systemd/user/pi-web-chat.service
 systemctl --user daemon-reload

package/bin/pi-web-chat.js

@@ -37,15 +37,43 @@ Examples:
 }
 
 function parseArgs(argv) {
-  const opts = { port: process.env.PORT || 3000, cwd: process.env.HOME };
+  const opts = { port: process.env.PORT || 3000, cwd: process.env.HOME || os.homedir() };
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i];
     if (a === "-h" || a === "--help") { printHelp(); process.exit(0); }
-    if (a === "-p" || a === "--port") opts.port = Number(argv[++i]);
-    else if (a.startsWith("--port=")) opts.port = Number(a.split("=")[1]);
-    else if (a === "-c" || a === "--cwd") opts.cwd = argv[++i];
-    else if (a.startsWith("--cwd=")) opts.cwd = a.split("=")[1];
-    else { console.error(`Unknown option: ${a}`); printHelp(); process.exit(1); }
+    if (a === "-p" || a === "--port") {
+      const val = argv[++i];
+      if (!val || isNaN(Number(val))) {
+        console.error(`Error: --port requires a valid number`);
+        process.exit(1);
+      }
+      opts.port = Number(val);
+    } else if (a.startsWith("--port=")) {
+      const val = a.split("=")[1];
+      if (!val || isNaN(Number(val))) {
+        console.error(`Error: --port requires a valid number`);
+        process.exit(1);
+      }
+      opts.port = Number(val);
+    } else if (a === "-c" || a === "--cwd") {
+      const val = argv[++i];
+      if (!val) {
+        console.error(`Error: --cwd requires a path`);
+        process.exit(1);
+      }
+      opts.cwd = val;
+    } else if (a.startsWith("--cwd=")) {
+      const val = a.split("=")[1];
+      if (!val) {
+        console.error(`Error: --cwd requires a path`);
+        process.exit(1);
+      }
+      opts.cwd = val;
+    } else {
+      console.error(`Unknown option: ${a}`);
+      printHelp();
+      process.exit(1);
+    }
   }
   return opts;
 }

package/docs/ARCHITECTURE.md

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

package/docs/CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.7.5] - 2026-07-26
+
+### Fixed
+- **初始化 CWD 配置加载与 WebSocket 建立竞态修复 (Async CWD Init Race Condition)**：
+  - 前端 `init()` 声明为异步函数，优先 `await loadServerConfig()` 完成服务器配置（`serverCwd` / `homeDir`）与本地缓存读取后，再发起 WebSocket 连接或加载会话，彻底消除首次加载时 agent 子进程工作目录与前端显示不一致的问题。
+  - 服务端 `normalizeCwd(dir)` 在 `dir` 为空时默认使用 `process.cwd()`（服务启动目录），保证前后端默认工作目录始终精确统一。
+- **错误信息二次 HTML 转义修复 (Double Escape on Error Messages)**：移除 `message_end` 中冗余的 `escapeHtml()` 调用，避免错误信息包含特殊符号时被 Markdown 渲染器二次转义显示为实体编码字符。
+- **CLI 参数解析健壮性增强 (CLI Arguments Validation)**：`bin/pi-web-chat.js` 增加对 `-p/--port` 与 `-c/--cwd` 选项值的合法性检验与防越界保护，避免 `NaN` 或 `undefined`。
+- **输入法合成事件优化 (IME Keycode Handling)**：输入框 `keydown` 事件追加 `e.keyCode !== 229` 判断，进一步增强各平台中文输入法选词回车时的兼容性。
+- **Systemd 安装脚本优化 (Systemd Absolute ExecStart Path)**：`scripts/install-service.sh` 生成 unit 文件时将 `ExecStart` 明确为绝对路径 `$NODE_BIN "$PROJECT_DIR/server.js"`。
+
+---
+
+## [1.7.4] - 2026-07-26
+
+### Added
+- **模型菜单实时搜索与过滤 (Model Search & Instant Filter)**：
+  - 顶栏模型下拉菜单增加置顶固定的搜索过滤输入框，支持根据 Provider 提供商名称、模型名称、模型 ID 进行多维度实时模糊过滤。
+  - 打开模型下拉框时自动聚焦并全选搜索框，支持一键清空（`×`）、按 `Escape` 快捷关闭、按 `Enter` 快捷选中。
+  - 优化模型列表项布局，同时展示友好显示名与底层 Model ID，解决模型列表过长时翻找困难的问题。
+  - 移动端与桌面端自适应滚动与粘性搜索栏布局。
+
+---
+
 ## [1.7.3] - 2026-07-26
 
 ### Fixed

package/docs/ISSUES.md

@@ -99,4 +99,27 @@
 - 给 `.session-list` 增加 `min-height: 0`，给 `.sidebar-bottom` 增加 `flex-shrink: 0`。
 - 引入 `safe-area-inset-bottom` 底部安全区自适应内边距，并将 z-index 提升至 105，确保手机端完整可见。
 
+---
+
+## 10. 页面初次加载时服务端配置加载与 WebSocket 连接的竞态
+
+**症状**：在未设置 localStorage CWD 时打开页面，前端顶栏胶囊显示为当前服务启动目录（`serverCwd`），但后端生成的 agent 子进程的工作目录实际上是用户的 home 目录（`~`），导致执行文件操作或命令时位置不一致。
+
+**根因**：前端 `init()` 中 `loadServerConfig()` 异步发起 `/api/config` 请求，但没有等待返回就同步调用了 `connectWs({})`。此时 `state.cwd` 尚为空字符串 `""`，WebSocket URL 为 `/ws?cwd=`，后端 fallback 成了 `home()`。等到 fetch 返回后 `state.cwd` 虽被赋予 `serverCwd`，但 WebSocket 连接和 `PiAgent` 已经按 `home()` 创建。
+
+**修复**：
+- 前端 `init()` 改为异步函数，显式 `await loadServerConfig()` 保证配置解析完毕后再建立 WebSocket 连接或加载会话。
+- 后端 `normalizeCwd(dir)` 在 `dir` 为空时优先返回 `process.cwd()`，其次回退到 `home()`，确保前后端默认工作目录始终精确一致。
+
+---
+
+## 11. 模型异常响应错误信息二次转义 (Double Escape)
+
+**症状**：当模型返回错误（如 stopReason="error"）且错误信息中含有 `<`、`&` 等字符时，聊天框中显示为 `&lt;`、`&amp;` 字面量。
+
+**根因**：`public/app.js` 在 `message_end` 处理中对 `errMsg` 调用了一次 `escapeHtml()`，随后 `refreshStreamingContent()` 调用 `renderMarkdown()` 时又内部进行了一次 `escapeHtml()`。
+
+**修复**：移除 `message_end` 中冗余的 `escapeHtml()`，统一由 Markdown 渲染器进行安全转义。
+
+
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "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

@@ -1226,7 +1226,7 @@ function handlePiMessage(obj) {
           const parsed = JSON.parse(errMsg);
           if (parsed.error?.message) errMsg = parsed.error.message;
         } catch {}
-        state.streamingItems.push({ type: "text", text: `⚠️ **${escapeHtml(errMsg)}**` });
+        state.streamingItems.push({ type: "text", text: `⚠️ **${errMsg}**` });
         refreshStreamingContent();
       }
       break;
@@ -1439,29 +1439,112 @@ function renderModelPill() {
   pill.title = `当前模型: ${provider} / ${name} (${m.id})`;
 }
 
+let modelSearchQuery = "";
+
 function renderModelMenu() {
   const menu = $("#modelMenu");
-  menu.innerHTML = "";
-  // group by provider
+  if (!menu) return;
+
+  let searchInput = $("#modelSearchInput", menu);
+  let listContainer = $(".model-menu-list", menu);
+
+  if (!searchInput || !listContainer) {
+    menu.innerHTML = "";
+    const searchWrap = el("div", { class: "model-search-wrap" });
+    searchInput = el("input", {
+      type: "text",
+      id: "modelSearchInput",
+      class: "model-search-input",
+      placeholder: "搜索模型 (如 claude, deepseek, 4o)…",
+      autocomplete: "off",
+      spellcheck: "false",
+      value: modelSearchQuery,
+    });
+
+    searchInput.addEventListener("click", (e) => e.stopPropagation());
+    searchInput.addEventListener("input", (e) => {
+      modelSearchQuery = e.target.value;
+      renderModelList(listContainer);
+      const clearBtn = $(".btn-clear-model-search", searchWrap);
+      if (clearBtn) clearBtn.style.display = modelSearchQuery ? "block" : "none";
+    });
+    searchInput.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        menu.classList.remove("open");
+      } else if (e.key === "Enter") {
+        const visibleOpts = listContainer.querySelectorAll(".opt");
+        if (visibleOpts.length > 0) {
+          visibleOpts[0].click();
+        }
+      }
+    });
+
+    const clearBtn = el("button", {
+      class: "btn-clear-model-search",
+      text: "×",
+      type: "button",
+      title: "清空搜索",
+      style: `display: ${modelSearchQuery ? "block" : "none"}`,
+      onclick: (e) => {
+        e.stopPropagation();
+        modelSearchQuery = "";
+        searchInput.value = "";
+        clearBtn.style.display = "none";
+        searchInput.focus();
+        renderModelList(listContainer);
+      }
+    });
+
+    searchWrap.appendChild(searchInput);
+    searchWrap.appendChild(clearBtn);
+    menu.appendChild(searchWrap);
+
+    listContainer = el("div", { class: "model-menu-list" });
+    menu.appendChild(listContainer);
+  }
+
+  renderModelList(listContainer);
+}
+
+function renderModelList(listContainer) {
+  if (!listContainer) return;
+  listContainer.innerHTML = "";
+  const q = modelSearchQuery.trim().toLowerCase();
+
+  const filteredModels = state.models.filter(m => {
+    if (!q) return true;
+    const idMatch = (m.id || "").toLowerCase().includes(q);
+    const nameMatch = (m.name || "").toLowerCase().includes(q);
+    const providerMatch = (m.provider || "").toLowerCase().includes(q);
+    return idMatch || nameMatch || providerMatch;
+  });
+
+  if (filteredModels.length === 0) {
+    listContainer.appendChild(el("div", { class: "model-empty", text: "未找到匹配的模型" }));
+    return;
+  }
+
   const groups = {};
-  for (const m of state.models) {
+  for (const m of filteredModels) {
     const p = m.provider || "other";
     (groups[p] = groups[p] || []).push(m);
   }
+
   for (const [provider, items] of Object.entries(groups).sort()) {
-    menu.appendChild(el("div", { class: "group-label", text: provider }));
+    listContainer.appendChild(el("div", { class: "group-label", text: provider }));
     for (const m of items) {
       const active = state.currentModel && m.id === state.currentModel.id && m.provider === state.currentModel.provider;
-      menu.appendChild(el("div", {
+      listContainer.appendChild(el("div", {
         class: "opt" + (active ? " active" : ""),
         onclick: () => {
           $("#modelPill").textContent = "切换中…";
           sendWs({ type: "set_model", provider: m.provider, modelId: m.id });
-          menu.classList.remove("open");
+          $("#modelMenu").classList.remove("open");
         },
       }, [
         el("span", { class: "check", html: active ? "✓ " : "" }),
-        document.createTextNode(`${m.name || m.id}`),
+        el("span", { class: "model-name", text: `${m.name || m.id}` }),
+        (m.name && m.id && m.name !== m.id) ? el("span", { class: "model-id-sub", text: m.id }) : null,
       ]));
     }
   }
@@ -1585,11 +1668,13 @@ function autoResize() {
 }
 
 // ---- Init ----
-function init() {
+async function init() {
   // Default cwd to home (server uses home default too).
   state.cwd = document.body.dataset.cwd || "";
 
-  // event listeners
+  // Load server config & restore saved CWD before connecting WebSocket
+  await loadServerConfig();
+
   // event listeners
   $("#btnNew").addEventListener("click", () => {
     if (state.streaming) {
@@ -1633,7 +1718,7 @@ function init() {
     updateComposerUI();
   });
   ta.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing && e.keyCode !== 229) {
       e.preventDefault();
       if (state.streaming) {
         if (ta.value.trim()) {
@@ -1649,7 +1734,18 @@ function init() {
   $("#modelPill").addEventListener("click", (e) => {
     e.stopPropagation();
     sendWs({ type: "get_available_models" });
-    $("#modelMenu").classList.toggle("open");
+    const menu = $("#modelMenu");
+    const willOpen = !menu.classList.contains("open");
+    menu.classList.toggle("open");
+    if (willOpen) {
+      setTimeout(() => {
+        const input = $("#modelSearchInput");
+        if (input) {
+          input.focus();
+          input.select();
+        }
+      }, 50);
+    }
   });
   document.addEventListener("click", (e) => {
     if (!e.target.closest("#modelMenu") && !e.target.closest("#modelPill")) {
@@ -1732,9 +1828,6 @@ function init() {
     });
   }
 
-  // Load server config & restore saved CWD
-  loadServerConfig();
-
   // Status badge click to reconnect
   const connStatusEl = $("#connStatus");
   if (connStatusEl) {

package/public/style.css

@@ -798,18 +798,97 @@ body {
 /* Model selector dropdown */
 .model-menu {
   position: absolute; top: 52px; right: 16px;
-  background: var(--bg-input); border: 1px solid var(--border);
-  border-radius: 12px; padding: 8px; width: 320px; max-height: 360px; overflow-y: auto;
-  box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 200; display: none;
+  background: var(--bg-sidebar); border: 1px solid var(--border);
+  border-radius: 14px; padding: 0; width: 340px; max-height: 440px;
+  box-shadow: 0 12px 32px rgba(0,0,0,.5); z-index: 200; display: none;
+  flex-direction: column; overflow: hidden;
 }
-.model-menu.open { display: block; }
-.model-menu .group-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; padding: 6px 8px 2px; }
-.model-menu .opt {
-  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text);
+.model-menu.open { display: flex; }
+
+.model-search-wrap {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-sidebar);
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.model-search-input {
+  width: 100%;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 7px 12px;
+  padding-right: 28px;
+  color: var(--text);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+.model-search-input:focus {
+  border-color: var(--accent);
+}
+.btn-clear-model-search {
+  position: absolute;
+  right: 18px;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 2px;
+}
+.btn-clear-model-search:hover {
+  color: var(--text);
+}
+
+.model-menu-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px;
+  max-height: 360px;
+}
+.model-menu-list .group-label {
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  padding: 6px 8px 3px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+.model-menu-list .opt {
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: background 0.12s;
+}
+.model-menu-list .opt:hover { background: var(--bg-hover); }
+.model-menu-list .opt.active { background: var(--bg-hover); color: var(--accent); }
+.model-menu-list .opt .check { color: var(--accent); width: 14px; flex-shrink: 0; font-size: 12px; }
+.model-menu-list .opt .model-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-menu-list .opt .model-id-sub {
+  font-size: 11px;
+  color: var(--text-dim);
+  font-family: "SF Mono", Menlo, Consolas, monospace;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.model-empty {
+  padding: 24px 12px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-dim);
 }
-.model-menu .opt:hover { background: var(--bg-hover); }
-.model-menu .opt.active { background: var(--bg-hover); }
-.model-menu .opt .check { color: var(--accent); margin-right: 6px; }
 
 
 /* ==========================================================================
@@ -942,6 +1021,9 @@ body {
     max-height: calc(100dvh - 70px);
     border-radius: 12px;
   }
+  .model-menu-list {
+    max-height: calc(100dvh - 130px);
+  }
 
   .mobile-toolbar-fab {
     display: flex;

package/server.js

@@ -37,7 +37,7 @@ const PI_BIN = resolvePiBin();
 function home() { return os.homedir(); }
 
 function normalizeCwd(dir) {
-  if (!dir) return home();
+  if (!dir) return process.cwd() || home();
   let resolved = dir;
   if (dir.startsWith("~")) {
     resolved = path.join(home(), dir.slice(1));