@liguoshuai/pi-web-chat 1.8.0 → 1.8.3

package/docs/ARCHITECTURE.md

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

package/docs/CHANGELOG.md

@@ -7,6 +7,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.8.3] - 2026-07-26
+
+### Fixed
+- **移动端工作目录切换弹窗按钮溢出修复 (CWD Modal Mobile Overflow & Input Sizing)**：
+  - 修复手机端切换工作目录弹窗中“确定切换”按钮超出卡片右侧边框的问题。
+  - 为 `.input-group input` 添加 `min-width: 0` 和 `box-sizing: border-box`，消除原生 input 元素的内在最小宽度导致的 Flexbox 溢出。
+  - 适配移动端弹窗内边距与间距（padding 降至 16px），并在 `<= 380px` 窄屏设备上自适应将按钮折行全宽呈现，防止水平溢出。
+
+---
+
+## [1.8.2] - 2026-07-26
+
+### Fixed
+- **移动端顶栏空间挤压与思考胶囊截断修复 (Mobile Topbar Layout & Thinking Pill Overflow)**：
+  - 移除移动端 `.model-pill-container` 的固定 `max-width: 130px` 宽度限制，修复深度思考胶囊被挤压截断、只显示一半图标的问题。
+  - 优化移动端顶栏各元素间距与自适应弹性缩放：侧边栏菜单按钮调整为 36px，工作目录胶囊最大宽度限制为 75px，模型胶囊适度收敛文字并隐藏默认徽章，思考胶囊保留完整图标与级别文本。
+  - 增加对 `<= 360px` 极窄小屏设备的精细化响应式适配规则，保障全尺寸移动端设备顶部操作栏整齐美观且不换行、不溢出。
+
+---
+
+## [1.8.1] - 2026-07-26
+
+### Fixed
+- **模型切换系统通知未定义函数报错修复 (Missing appendSystemNotice ReferenceError)**：补充前端 `appendSystemNotice` 函数实现，使用 `.system-notice-divider` 与 `.system-notice-text` 渲染模型变更系统提示，解决切换模型时触发 `ReferenceError` 的问题。
+- **思考深度循环切换响应数据字段适配 (cycle_thinking_level Response Handling)**：兼容 Pi RPC 响应中返回的 `data.level` 字段，避免因字段名不匹配导致思考深度未能及时更新。
+- **会话自定义命名解析与侧边栏即时呈现 (Session Name & session_info Extraction)**：服务端 `/api/sessions` 与 `/api/session` 增加对 `session_info` 记录的解析，支持读取用户通过 `set_session_name` 设置的会话名称并在侧边栏和顶栏直观显示。
+- **默认模型设为已启用模型列表防回退保护 (enabledModels Sync on Set Default)**：在写入 `defaultModel` 时同步检查并加入 `enabledModels` 列表，防止 Pi core 启动时回退至 `enabledModels[0]`。
+- **会话历史加载异常容错与提示 (Session Load Error Handling)**：`loadSession` 增加网络及文件读取异常判断与 Toast 友好提示，避免读取异常会话文件时界面卡死。
+- **Systemd User 单元文件权限沙箱配置优化 (Systemd Unit Workspace Access)**：移除 `ProtectHome=read-only`，确保作为用户级服务启动时 Pi Agent 可以正常读写和编辑工作区项目文件。
+
+---
+
 ## [1.8.0] - 2026-07-26
 
 ### Added

package/docs/ISSUES.md

@@ -146,5 +146,71 @@
 - 修改 `detachWs`，当所有连接断开但 Agent 仍在生成中时，保留 `eventBuffer` 保证继续录制。
 - 修改 `replayBuffered`，在 Agent 仍处于 busy 状态时消费后不清空缓存，使多个设备/多个 Tab 可多次或同时连入并安全回溯追平全部生成细节，并在流式终止时通过 `agent_settled` 进行最终的统一清理。
 
+---
+
+## 14. 切换模型时触发 `appendSystemNotice is not defined` 报错
+
+**症状**：在顶部模型下拉菜单中切换模型后，控制台报错 `ReferenceError: appendSystemNotice is not defined`，并在 `/api/log-error` 中记录错误日志。
+
+**根因**：前端 `app.js` 在处理模型切换和接收 `set_model` 响应时调用了 `appendSystemNotice` 函数在消息流中插入切换提醒，但在重构时该辅助函数未被声明。
+
+**修复**：在 `app.js` 中补充 `appendSystemNotice(text)` 实现，利用 CSS 中已定义好的 `.system-notice-divider` 与 `.system-notice-text` 类在聊天区尾部安全插入居中分割标签。
+
+---
+
+## 15. `cycle_thinking_level` 响应字段未正确更新思考深度
+
+**症状**：通过 RPC 调用循环切换思考级别后，前端状态与顶栏思考胶囊未实时更新。
+
+**根因**：Pi RPC 模式下 `cycle_thinking_level` 返回的响应数据为 `{ level: ThinkingLevel }`，而前端代码按 `obj.data?.thinkingLevel` 读取导致取得 `undefined`。
+
+**修复**：在 `app.js` 中改为 `const newLevel = obj.data?.level || obj.data?.thinkingLevel;`，兼容标准 RPC 返回格式。
+
+---
+
+## 16. 自定义会话名称 (`session_info`) 无法在侧边栏与顶栏显示
+
+**症状**：通过 `set_session_name` 重命名会话后，侧边栏列表中依然只展示第一条用户 prompt 提取出的简略标题。
+
+**根因**：服务端 `getSessionMetadata` 和 `/api/session` 在逐行扫描 `.jsonl` 时只查找了 `type === "session"` 和 `type === "message"`，忽略了 `type === "session_info"` 记录。
+
+**修复**：
+- 服务端解析 `.jsonl` 时提取最新的 `session_info.name` 作为 `sessionName` 返回。
+- 前端 `renderSidebar` 优先使用 `s.sessionName || s.firstUser || "新对话"` 进行渲染。
+
+---
+
+## 17. Systemd 用户服务中 `ProtectHome=read-only` 导致 Agent 读写工作区报错
+
+**症状**：通过 `install-service.sh` 将服务安装至 systemd user 后，Pi 编程代理在用户项目目录中执行 `write` 或 `edit` 工具时触发 `EACCES` 权限拒绝错误。
+
+**根因**：服务单元模板设置了 `ProtectHome=read-only` 并仅将 `~/.pi` 和 `~/.npm-global` 列入白名单，导致 Agent 无法在 `$HOME/projects` 等工作区目录下创建或修改文件。
+
+**修复**：移除该限制，让 User-level 服务在常规用户权限上下文下直接操作工作区。
+
+---
+
+## 19. 移动端切换工作目录弹窗按钮超出边框
+
+**症状**：在手机端点击顶栏切换工作目录（CWD Modal）时，右侧的“确定切换”按钮超出了弹窗白色/暗色卡片右边框。
+
+**根因**：
+1. 原生 `<input>` 元素具有默认的内在 `size`（`min-width: auto` 相当于约 180px~200px）。在小屏手机上，input 的内在最小宽度加上“确定切换”按钮宽度和弹窗内边距超出了视口总可用宽度。
+2. 移动端没有针对 `.modal` 和 `.input-group` 进行专门的响应式约束和内边距收敛。
+
+**修复**：
+- 给 `.input-group input` 添加 `min-width: 0; box-sizing: border-box;`，确保其在 flex 容器中可以自由收缩。
+- 在移动端媒体查询中调整弹窗内边距为 16px，优化输入框与按钮的 padding。
+- 在 `<= 380px` 超窄屏设备上自适应将输入框与操作按钮上下垂直排列（`flex-direction: column`），确保彻底杜绝横向溢出。
+
+**症状**：在手机端竖屏打开页面时，顶栏右侧的“深度思考 / 推理级别”（`🧠 High`）胶囊被挤压，只能看到一半的脑花图标，文本完全不可见。
+
+**根因**：移动端媒体查询中为 `.model-pill-container` 设置了 `max-width: 130px` 的硬限制。由于模型胶囊占据了大部分宽度，容器剩余宽度不足以完整容纳思考胶囊，导致其被裁剪。
+
+**修复**：
+- 移除移动端 `.model-pill-container` 的 `max-width: 130px` 限制，改为弹性无约束容器。
+- 优化顶栏各按钮尺寸与间距：缩小菜单按钮为 36px，工作目录胶囊限制最大 75px，模型胶囊适度缩略模型名并隐藏手机端冗余的“默认”徽章，为思考胶囊留出充足显示空间。
+- 追加 `<= 360px` 极窄屏响应式规则，确保在 iPhone SE 等小屏设备上也能完整显示。
+
 
 

package/package.json

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

@@ -465,7 +465,7 @@ function renderSidebar(sessions) {
     return;
   }
   sessions.forEach((s) => {
-    const title = s.firstUser || "新对话";
+    const title = s.sessionName || s.firstUser || "新对话";
     const when = s.timestamp ? new Date(s.timestamp).toLocaleString("zh-CN", { month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit" }) : "";
     const item = el("div", {
       class: "session-item" + (s.file === state.currentSessionFile ? " active" : ""),
@@ -533,11 +533,21 @@ async function loadSession(file) {
   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");
@@ -601,11 +611,22 @@ function extractContentText(content) {
   if (typeof content === "string") return content;
   if (!Array.isArray(content)) return "";
   return content
-    .filter(c => c.type === "text" || typeof c === "string")
-    .map(c => typeof c === "string" ? c : c.text)
+    .filter(c => c && (c.type === "text" || typeof c === "string"))
+    .map(c => typeof c === "string" ? c : (c.text || ""))
     .join("");
 }
 
+function appendSystemNotice(text) {
+  if (!text) return;
+  const chatInner = $("#chat-inner");
+  if (!chatInner) return;
+  const node = el("div", { class: "system-notice-divider" }, [
+    el("span", { class: "system-notice-text", text })
+  ]);
+  chatInner.appendChild(node);
+  scrollBottom();
+}
+
 // ---- Chat rendering ----
 function clearChat() {
   const chatInner = $("#chat-inner");
@@ -1213,8 +1234,9 @@ function handlePiMessage(obj) {
       }
     }
     else if (obj.command === "cycle_thinking_level" && obj.success) {
-      if (obj.data?.thinkingLevel) {
-        state.thinkingLevel = obj.data.thinkingLevel;
+      const newLevel = obj.data?.level || obj.data?.thinkingLevel;
+      if (newLevel) {
+        state.thinkingLevel = newLevel;
         renderThinkingPill();
         updateEmptyStateModelInfo();
       }
@@ -1264,6 +1286,7 @@ function handlePiMessage(obj) {
       finalizeStreamingMsg();
       state.streaming = false;
       setComposerAborting(false);
+      sendWs({ type: "get_state" });
       refreshSessions(); // titles may have changed
       break;
     case "message_start": {

package/public/style.css

@@ -811,9 +811,12 @@ body {
 .input-group {
   display: flex;
   gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
 }
 .input-group input {
   flex: 1;
+  min-width: 0;
   background: var(--bg-input);
   border: 1px solid var(--border);
   border-radius: 10px;
@@ -822,6 +825,7 @@ body {
   font-size: 13px;
   font-family: "SF Mono", Menlo, Consolas, monospace;
   outline: none;
+  box-sizing: border-box;
 }
 .input-group input:focus {
   border-color: var(--text-dim);
@@ -837,6 +841,8 @@ body {
   cursor: pointer;
   white-space: nowrap;
   transition: background 0.15s;
+  flex-shrink: 0;
+  box-sizing: border-box;
 }
 .btn-primary:hover { background: var(--accent-hover); }
 
@@ -1205,9 +1211,9 @@ body {
 
   /* Topbar Mobile Adjustments — fixed, taller, shadowed so it is always findable */
   .topbar {
-    height: 54px;
-    padding: 0 12px;
-    gap: 8px;
+    height: 52px;
+    padding: 0 8px;
+    gap: 6px;
     position: fixed;
     top: 0;
     left: 0;
@@ -1219,36 +1225,37 @@ body {
   }
 
   .main {
-    padding-top: 54px;
+    padding-top: 52px;
   }
 
   .topbar .session-name {
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     min-width: 0;
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    padding: 0 4px;
+    padding: 0 2px;
   }
 
   .btn-toggle-sidebar {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     color: var(--text);
     background: var(--bg-hover);
+    flex-shrink: 0;
   }
   .btn-toggle-sidebar svg {
-    width: 22px;
-    height: 22px;
+    width: 20px;
+    height: 20px;
   }
 
   #cwdPillWrap {
-    padding: 5px 9px;
+    padding: 4px 7px;
     font-size: 11px;
-    max-width: 90px;
+    max-width: 75px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1256,25 +1263,65 @@ body {
   }
 
   .model-pill-container {
-    max-width: 130px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+    max-width: none;
   }
 
   .model-pill {
-    padding: 5px 8px;
+    padding: 4px 8px;
     font-size: 11px;
-    max-width: 90px;
+    max-width: 105px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     flex-shrink: 0;
+    gap: 4px;
   }
   .model-pill-name {
-    max-width: 50px;
+    max-width: 65px;
+  }
+  .model-pill-badge {
+    display: none !important;
   }
 
   .thinking-pill {
-    padding: 5px 7px;
+    padding: 4px 7px;
     font-size: 11px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    gap: 3px;
+    display: inline-flex;
+    align-items: center;
+  }
+  .thinking-pill .thinking-icon {
+    font-size: 12px;
+  }
+  .thinking-pill .thinking-label {
+    font-size: 11px;
+    font-weight: 500;
+  }
+
+  @media (max-width: 360px) {
+    .topbar {
+      padding: 0 4px;
+      gap: 4px;
+    }
+    #cwdPillWrap {
+      max-width: 50px;
+      padding: 4px 5px;
+    }
+    .model-pill {
+      max-width: 90px;
+    }
+    .model-pill-name {
+      max-width: 50px;
+    }
+    .thinking-pill {
+      padding: 4px 5px;
+    }
   }
 
   /* Model & Thinking Dropdown Menu Mobile Adjustments */
@@ -1395,6 +1442,58 @@ body {
     height: 32px;
   }
 
+  /* CWD Modal Mobile Adjustments */
+  .modal {
+    width: 92%;
+    max-width: 440px;
+    padding: 16px;
+    border-radius: 14px;
+    gap: 12px;
+    box-sizing: border-box;
+  }
+  .modal-header h3 {
+    font-size: 15px;
+  }
+  .modal-desc {
+    font-size: 12px;
+  }
+  .input-group {
+    display: flex;
+    flex-direction: row;
+    gap: 6px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .input-group input {
+    font-size: 13px;
+    padding: 9px 10px;
+    min-width: 0;
+  }
+  .btn-primary {
+    padding: 0 14px;
+    font-size: 12px;
+    height: 38px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .quick-dirs .chips .chip {
+    font-size: 11px;
+    padding: 5px 8px;
+    word-break: break-all;
+  }
+
+  @media (max-width: 380px) {
+    .input-group {
+      flex-direction: column;
+      gap: 8px;
+    }
+    .btn-primary {
+      width: 100%;
+    }
+  }
+
   .composer-hint {
     font-size: 10px;
     margin-top: 6px;

package/server.js

@@ -551,6 +551,19 @@ app.post("/api/set-default-model", async (req, res) => {
       current.defaultThinkingLevel = thinkingLevel;
     }
 
+    // If enabledModels is configured in settings.json, ensure the new default model
+    // is in the enabledModels list, otherwise Pi core startup logic will fall back
+    // to enabledModels[0] instead of using defaultModel.
+    if (Array.isArray(current.enabledModels) && current.enabledModels.length > 0) {
+      const fullId = `${provider}/${modelId}`;
+      const inList = current.enabledModels.some(item =>
+        item === fullId || item === modelId || item === `${provider}/*` || item === "*"
+      );
+      if (!inList) {
+        current.enabledModels.unshift(fullId);
+      }
+    }
+
     await writeFile(settingsPath, JSON.stringify(current, null, 2), "utf8");
 
     res.json({
@@ -604,11 +617,13 @@ async function listAllSessionFiles() {
   // Root-level .jsonl files (created when we pass --session-dir to pi).
   const top = await readdir(SESSIONS_DIR, { withFileTypes: true }).catch(() => []);
   for (const e of top) {
-    if (e.isFile() && e.name.endsWith(".jsonl")) files.push(path.join(SESSIONS_DIR, e.name));
+    if ((e.isFile() || e.isSymbolicLink()) && e.name.endsWith(".jsonl")) {
+      files.push(path.join(SESSIONS_DIR, e.name));
+    }
   }
 
   // Subdirectory .jsonl files (created by pi itself when cwd is encoded).
-  const subdirs = top.filter(d => d.isDirectory());
+  const subdirs = top.filter(d => d.isDirectory() || d.isSymbolicLink());
   for (const d of subdirs) {
     const dp = path.join(SESSIONS_DIR, d.name);
     const names = (await readdir(dp).catch(() => [])).filter(f => f.endsWith(".jsonl"));
@@ -629,11 +644,14 @@ async function getSessionMetadata(file) {
 
   const content = await readFile(file, "utf8");
   const lines = content.split("\n").filter(Boolean);
-  let header = null, title = null, msgCount = 0;
+  let header = null, title = null, sessionName = null, msgCount = 0;
   for (const line of lines) {
     let o;
     try { o = JSON.parse(line); } catch { continue; }
     if (o.type === "session") header = o;
+    if (o.type === "session_info" && o.name) {
+      sessionName = o.name.trim();
+    }
     if (o.type === "message" && o.message && o.message.role === "user" && !title) {
       title = extractText(o.message.content).slice(0, 80);
     }
@@ -649,6 +667,7 @@ async function getSessionMetadata(file) {
       file,
       name: path.basename(file),
       id: header.id,
+      sessionName: sessionName || null,
       timestamp: header.timestamp,
       firstUser: title,
       messageCount: msgCount,
@@ -662,15 +681,18 @@ app.get("/api/sessions", async (req, res) => {
   try {
     const cwd = normalizeCwd(req.query.cwd);
     const all = await listAllSessionFiles();
-    const sessions = [];
-    for (const full of all) {
-      try {
-        const meta = await getSessionMetadata(full);
-        if (meta && meta.cwd === cwd) {
-          sessions.push(meta.sessionInfo);
-        }
-      } catch {}
-    }
+    const results = await Promise.all(
+      all.map(async (full) => {
+        try {
+          const meta = await getSessionMetadata(full);
+          if (meta && meta.cwd === cwd) {
+            return meta.sessionInfo;
+          }
+        } catch {}
+        return null;
+      })
+    );
+    const sessions = results.filter(Boolean);
     sessions.sort((a, b) => (b.timestamp || "").localeCompare(a.timestamp || ""));
     res.json({ cwd, sessions });
   } catch (e) {
@@ -684,7 +706,7 @@ function extractText(content) {
   if (!Array.isArray(content)) return "";
   return content
     .filter(c => c && (c.type === "text" || typeof c === "string"))
-    .map(c => typeof c === "string" ? c : c.text)
+    .map(c => typeof c === "string" ? c : (c.text || ""))
     .join("");
 }
 
@@ -695,7 +717,11 @@ 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
-    const resolvedFile = path.resolve(file);
+    let resolvedFile = file;
+    if (resolvedFile.startsWith("~")) {
+      resolvedFile = path.join(home(), resolvedFile.slice(1));
+    }
+    resolvedFile = path.resolve(resolvedFile);
     const resolvedSessionsDir = path.resolve(SESSIONS_DIR);
     const relPath = path.relative(resolvedSessionsDir, resolvedFile);
     if (relPath.startsWith("..") || path.isAbsolute(relPath)) {
@@ -706,9 +732,13 @@ app.get("/api/session", async (req, res) => {
     const lines = content.split("\n").filter(Boolean);
     const entries = [];
     let header = null;
+    let sessionName = null;
     for (const line of lines) {
       let o; try { o = JSON.parse(line); } catch { continue; }
       if (o.type === "session") header = o;
+      if (o.type === "session_info" && o.name) {
+        sessionName = o.name.trim();
+      }
       entries.push(o);
     }
     // Build a map and reconstruct the active path from root -> leaf.
@@ -762,7 +792,7 @@ app.get("/api/session", async (req, res) => {
       }
     }
 
-    res.json({ header, entries: entryChain, model: sessionModel });
+    res.json({ header, entries: entryChain, model: sessionModel, sessionName });
   } catch (e) {
     console.error(e);
     res.status(500).json({ error: String(e) });