@liguoshuai/pi-web-chat 1.7.2 → 1.7.3

package/docs/ARCHITECTURE.md

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

package/docs/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.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.3",
   "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") {

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 {
@@ -827,12 +834,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 {

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("");
 }