@liguoshuai/pi-web-chat 1.7.2 → 1.7.4

package/docs/ARCHITECTURE.md

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

package/docs/CHANGELOG.md

@@ -5,6 +5,27 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+---
+
+## [1.7.4] - 2026-07-26
+
+### Added
+- **模型菜单实时搜索与过滤 (Model Search & Instant Filter)**：
+  - 顶栏模型下拉菜单增加置顶固定的搜索过滤输入框，支持根据 Provider 提供商名称、模型名称、模型 ID 进行多维度实时模糊过滤。
+  - 打开模型下拉框时自动聚焦并全选搜索框，支持一键清空（`×`）、按 `Escape` 快捷关闭、按 `Enter` 快捷选中。
+  - 优化模型列表项布局，同时展示友好显示名与底层 Model ID，解决模型列表过长时翻找困难的问题。
+  - 移动端与桌面端自适应滚动与粘性搜索栏布局。
+
+---
+
+## [1.7.3] - 2026-07-26
+
+### Fixed
+- **新建会话即时绑定会话文件与 URL (Instant Session Binding)**：在 `public/app.js` 中自动捕获 RPC 消息中的 `sessionFile`，新建会话发送第一条 Prompt 后立即更新浏览器 URL、当前状态与侧边栏高亮，防止页面刷新丢失当前对话。
+- **服务端历史文本提取空指针保护 (Null Safety in extractText)**：在 `server.js` 的 `extractText` 增加对分片项为 null/undefined 的防守式过滤，避免异常历史记录导致元数据读取崩溃。
+- **移动端侧边栏底部连接状态与版本号显示修复 (Mobile Sidebar Bottom & Safe Area)**：修复手机端侧边栏 `100vh` 溢出导致底部“已连接/版本号”不可见的问题；增加 `100dvh`、`min-height: 0`、`flex-shrink: 0` 及全面屏 `safe-area-inset-bottom` 适配。
+
+
 ---
 
 ## [1.7.0] - 2026-07-26

package/docs/ISSUES.md

@@ -64,3 +64,39 @@
 **修复**：
 - 以 Session Key 为粒度管理 `PiAgent` 实例。
 - 任何一个客户端发送 `prompt` 或 `steer` 指令时，通过 `agent.wsSend(..., senderWs)` 广播同步给连入该 Session 的其他客户端。
+
+---
+
+## 7. 新建会话时 URL、侧边栏高亮与会话状态未即时绑定
+
+**症状**：新建对话并发送消息后，底层已生成 session jsonl，但浏览器 URL 仍为 `/`，`state.currentSessionFile` 为空，刷新页面后丢失当前会话视图，侧边栏也无法立即高亮当前项。
+
+**根因**：前端仅在显式点击侧边栏会话或调用 `switch_session` 时才绑定 `state.currentSessionFile`，未在 `prompt` 返回包含 `sessionFile` 的 RPC 数据时即时同步。
+
+**修复**：在前端 `handlePiMessage` 入口增加对 `obj.data?.sessionFile` 的自动感知与绑定，一旦检测到新分配的 sessionFile，即时更新 `state.currentSessionFile`、通过 `history.replaceState` 同步浏览器 URL 并刷新侧边栏高亮。
+
+---
+
+## 8. 历史会话内容反序列化时潜在的 null 分片过滤崩溃
+
+**症状**：当历史会话 jsonl 中偶发由于中断或格式异常导致 content 数组中包含 `null`/`undefined` 元素时，`extractText` 会触发 `TypeError: Cannot read properties of null (reading 'type')`。
+
+**修复**：在 `server.js` 的 `extractText` 过滤器中加入判空保护 `c && (c.type === "text" || typeof c === "string")`。
+
+---
+
+## 9. 移动端侧边栏底部连接状态与版本号被遮挡/不可见
+
+**症状**：在手机端浏览器打开左侧抽屉（Sidebar）时，底部的“已连接 / 版本号”信息看不到或被系统手势栏/底栏遮挡。
+
+**根因**：
+1. 移动端 `.sidebar` 样式设置了固定 `height: 100vh`，而手机浏览器 `100vh` 包含了底部工具栏高度，导致底部区域被挤出屏幕外。
+2. `.session-list` 缺少 `min-height: 0` 约束，会话数量多时 flexbox 未能限制高度，将 `.sidebar-bottom` 顶出视口。
+3. 缺少 `env(safe-area-inset-bottom)` 安全区域边距，导致贴底元素被全面屏手势条遮挡。
+
+**修复**：
+- 移动端 `.sidebar` 改用 `height: 100dvh; max-height: 100dvh; overflow: hidden;`。
+- 给 `.session-list` 增加 `min-height: 0`，给 `.sidebar-bottom` 增加 `flex-shrink: 0`。
+- 引入 `safe-area-inset-bottom` 底部安全区自适应内边距，并将 z-index 提升至 105，确保手机端完整可见。
+
+

package/package.json

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

@@ -1107,6 +1107,19 @@ function sendWs(obj) {
 }
 
 function handlePiMessage(obj) {
+  // Automatically bind to the session file as soon as pi allocates it on disk
+  if (obj.data?.sessionFile && obj.data.sessionFile !== state.currentSessionFile) {
+    state.currentSessionFile = obj.data.sessionFile;
+    try {
+      const newUrl = window.location.pathname + "?session=" + encodeURIComponent(obj.data.sessionFile);
+      window.history.replaceState({ session: obj.data.sessionFile }, "", newUrl);
+    } catch {}
+    if ($("#topSessionName").textContent === "新对话") {
+      $("#topSessionName").textContent = baseName(obj.data.sessionFile);
+    }
+    refreshSessions();
+  }
+
   // Backfill markers emitted by the server when it replays buffered events
   // that happened in the background while no browser was attached.
   if (obj.type === "backfill_start") {
@@ -1426,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,
       ]));
     }
   }
@@ -1636,7 +1732,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")) {

package/public/style.css

@@ -51,6 +51,7 @@ body {
   height: 100%;
   transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 100;
+  overflow: hidden;
 }
 
 /* Sidebar collapsed state on desktop */
@@ -74,6 +75,7 @@ body {
   display: flex;
   gap: 8px;
   align-items: center;
+  flex-shrink: 0;
 }
 .btn-new {
   flex: 1;
@@ -94,6 +96,7 @@ body {
 
 .sidebar-search {
   padding: 0 10px 8px;
+  flex-shrink: 0;
 }
 .sidebar-search input {
   width: 100%;
@@ -109,6 +112,7 @@ body {
 
 .session-list {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 4px 8px 16px;
 }
@@ -134,10 +138,13 @@ body {
 .sidebar-empty { color: var(--text-dim); font-size: 13px; padding: 20px 12px; text-align: center; }
 
 .sidebar-bottom {
+  flex-shrink: 0;
   border-top: 1px solid var(--border);
-  padding: 10px;
+  padding: 10px 12px;
+  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
   font-size: 12px;
   color: var(--text-muted);
+  background: var(--bg-sidebar);
 }
 .sidebar-bottom a { color: var(--text-muted); text-decoration: none; }
 .sidebar-bottom a:hover { color: var(--text); }
@@ -149,7 +156,7 @@ body {
 }
 .app-version {
   font-size: 11px;
-  color: var(--text-dim);
+  color: var(--text-muted);
   user-select: none;
 }
 .conn-status {
@@ -791,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: 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);
 }
-.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);
+.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; }
 
 
 /* ==========================================================================
@@ -827,12 +913,26 @@ body {
     left: 0;
     bottom: 0;
     width: 280px; /* Wider and more usable drawer on mobile */
+    height: 100%;
     height: 100vh;
+    height: 100dvh;
+    max-height: 100dvh;
     margin-left: 0 !important; /* Cancel desktop margin-left sliding */
     transform: translateX(-100%);
     transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 4px 0 25px rgba(0, 0, 0, 0.5);
     border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 105;
+  }
+
+  .sidebar-bottom {
+    flex-shrink: 0;
+    padding: 12px 14px;
+    padding-bottom: max(16px, calc(10px + env(safe-area-inset-bottom, 0px)));
+    background: var(--bg-sidebar);
   }
 
   .app.sidebar-open .sidebar {
@@ -921,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

@@ -584,7 +584,7 @@ function extractText(content) {
   if (typeof content === "string") return content;
   if (!Array.isArray(content)) return "";
   return content
-    .filter(c => c.type === "text" || typeof c === "string")
+    .filter(c => c && (c.type === "text" || typeof c === "string"))
     .map(c => typeof c === "string" ? c : c.text)
     .join("");
 }