@liguoshuai/pi-web-chat 1.8.5 → 1.8.8

package/docs/CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.8.8] - 2026-08-29
+
+### Fixed
+- **消息发送框确认按钮上下居中与正圆对齐优化 (Composer Send Button Alignment & Circular Sizing)**：
+  - 修复默认单行输入状态下，发送按钮因与 `textarea` 存在高度差并在 `flex-end` 布局下导致严重偏下、没有垂直居中的问题。
+  - 精准对齐单行 `textarea` 高度（32px）与按钮高度（32px），使单行状态下发送/确认按钮在输入框内绝对垂直居中，多行输入时依然平滑吸底。
+  - 将桌面端发送按钮修正为标准正圆（`32px × 32px`，`border-radius: 50%`），并补充字号与行高约束，确保图标居中且不影响手机侧及响应式体验。
+
+---
+
 ## [1.8.5] - 2026-08-23
 
 ### Fixed

package/package.json

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

@@ -1959,14 +1959,12 @@ function renderModelList(listContainer) {
     const opt = el("div", {
       class: "opt" + (active ? " active" : ""),
       onclick: () => {
-        const prev = state.currentModel;
         $("#modelPillName").textContent = "切换中…";
         sendWs({ type: "set_model", provider: m.provider, modelId: m.id });
         saveRecentModel(m);
         $("#modelMenu").classList.remove("open");
-        if (prev && (prev.id !== m.id || prev.provider !== m.provider)) {
-          appendSystemNotice(`已切换模型至 ${m.provider ? m.provider + " / " : ""}${m.name || m.id}`);
-        }
+        // 成功后的“已切换模型至 …”提示统一由 set_model 的 response 处理逻辑弹出，
+        // 避免在这里乐观提示一次、响应到达后 pi 再提示一次（重复提示）。
       },
     }, [
       el("span", { class: "check", html: active ? "✓" : "" }),
@@ -2316,7 +2314,7 @@ async function init() {
       toggleModelMenu();
     } else if (e.key === "Escape" && state.streaming) {
       const isMenuOpen = $("#modelMenu")?.classList.contains("open") || $("#thinkingMenu")?.classList.contains("open");
-      const isModalOpen = $("#cwdModal")?.style.display === "flex";
+      const isModalOpen = $("#cwdModal")?.classList.contains("open");
       if (!isMenuOpen && !isModalOpen) {
         abortGeneration();
       }

package/public/style.css

@@ -356,7 +356,11 @@ body {
   font-size: 15px; line-height: 1.65; color: var(--text);
   max-width: 100%; min-width: 0;
 }
-.msg.assistant .content p { margin-bottom: 12px; }
+.msg.assistant .content p {
+  margin-bottom: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
 .msg.assistant .content p:last-child { margin-bottom: 0; }
 .msg.assistant .content pre {
   background: #0d0d0d; border: 1px solid var(--border);
@@ -714,13 +718,14 @@ body {
 }
 .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;
-  padding: 10px 0; max-height: 200px; min-height: 24px;
+  color: var(--text); font-family: inherit; font-size: 15px; line-height: 20px;
+  padding: 6px 0; max-height: 200px; min-height: 32px;
 }
 .composer .send-btn {
-  width: 36px; height: 32px; border-radius: 18px; border: none; cursor: pointer;
+  width: 32px; height: 32px; border-radius: 50%; 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, transform .1s;
+  flex-shrink: 0; font-size: 16px; font-weight: 600; line-height: 1;
+  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); }
@@ -1449,20 +1454,23 @@ body {
   }
 
   .composer-inner {
-    padding: 4px 6px 4px 12px;
-    border-radius: 20px;
+    padding: 6px 8px 6px 14px;
+    border-radius: 22px;
     gap: 6px;
   }
 
   .composer textarea {
-    padding: 8px 0;
+    padding: 6px 0;
     font-size: 14px;
+    line-height: 20px;
+    min-height: 32px;
     max-height: 160px;
   }
 
   .composer .send-btn {
     width: 32px;
     height: 32px;
+    border-radius: 50%;
   }
 
   /* CWD Modal Mobile Adjustments */

package/scripts/install-service.sh

@@ -22,11 +22,12 @@ 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}"
+PORT="3000"
 RESTART_NOW="no"
 for arg in "$@"; do
   case "$arg" in
     --restart|--now) RESTART_NOW="yes" ;;
+    [0-9]*) PORT="$arg" ;;
   esac
 done
 

package/server.js

@@ -3,7 +3,7 @@
 // for listing sessions and reading session history from the JSONL store.
 import { spawn } from "child_process";
 import { randomUUID } from "crypto";
-import { readFile, readdir, stat, writeFile, mkdir } from "fs/promises";
+import { readFile, readdir, stat, writeFile, mkdir, realpath as fsRealpath } from "fs/promises";
 import { readFileSync, existsSync } from "fs";
 import { StringDecoder } from "string_decoder";
 import express from "express";
@@ -213,14 +213,14 @@ class PiAgent {
   maybeScheduleIdleKill() {
     // Only arm the reclamation timer when: no client attached AND truly idle.
     // A background task that is still running must never be killed here.
-    if (this.hasWs || this.isBusy) return;
+    if (!this.alive || this.hasWs || this.isBusy) return;
     if (IDLE_TIMEOUT_MS === 0) return; // disabled
     this.cancelIdleKill();
     const ms = IDLE_TIMEOUT_MS;
     this.idleTimer = setTimeout(() => {
       this.idleTimer = null;
       // re-check at fire time — a reconnect or new task may have started.
-      if (this.hasWs || this.isBusy) return;
+      if (!this.alive || this.hasWs || this.isBusy) return;
       console.log(`Reclaiming truly-idle pi agent after ${Math.round(ms / 1000)}s (key=${this.sessionKey || "unkeyed"})`);
       if (IDLE_DROP_HEAP) {
         try { if (typeof global.gc === "function") global.gc(); } catch {}
@@ -271,6 +271,10 @@ class PiAgent {
       if (this.sessionKey) activeAgents.delete(this.sessionKey);
       this.cancelIdleKill();
       if (this.lifetimeTimer) { clearTimeout(this.lifetimeTimer); this.lifetimeTimer = null; }
+      for (const [id, resolve] of this.pending) {
+        resolve({ type: "response", id, success: false, error: err.message });
+      }
+      this.pending.clear();
       console.error(`[pi spawn error]`, err);
       this.wsSend({ type: "pi_exit", error: err.message });
       for (const s of this.sockets) { try { s.close(); } catch {} }
@@ -291,6 +295,10 @@ class PiAgent {
       console.log(`pi exited (code=${code})`);
       this.wsSend({ type: "pi_exit", code });
       if (this.sessionKey) activeAgents.delete(this.sessionKey);
+      for (const [id, resolve] of this.pending) {
+        resolve({ type: "response", id, success: false, error: "pi exited" });
+      }
+      this.pending.clear();
       for (const s of this.sockets) { try { s.close(); } catch {} }
       this.sockets.clear();
       this.cancelIdleKill();
@@ -326,6 +334,10 @@ class PiAgent {
         this.setStreaming(false);
         this.eventBuffer = [];
         this.bufferHead = 0;
+        // If unkeyed, actively query state from pi so sessionKey is recorded
+        if (!this.sessionKey) {
+          this.send({ type: "get_state" });
+        }
         break;
       case "pi_exit": this.state = "idle"; break;
     }
@@ -386,7 +398,22 @@ class PiAgent {
       }
       const id = String(++this.reqId);
       const payload = { ...cmd, id };
-      this.pending.set(id, resolve);
+      // Long-running commands (prompt/steer) are tracked for their whole
+      // lifetime: pi's response may legitimately take many minutes, and the
+      // pending entry doubles as the isBusy guard that protects a working
+      // agent from idle-kill. Fire-and-forget queries (get_state etc.) keep a
+      // safety timeout so a dropped response doesn't leak the promise.
+      const longRunning = cmd.type === "prompt" || cmd.type === "steer";
+      let timeoutId = null;
+      const settled = { done: false };
+      const complete = (obj) => {
+        if (settled.done) return;
+        settled.done = true;
+        this.pending.delete(id);
+        if (timeoutId) { clearTimeout(timeoutId); timeoutId = null; }
+        resolve(obj);
+      };
+      this.pending.set(id, complete);
       this.markActivity();
       try {
         this.proc.stdin.write(JSON.stringify(payload) + "\n");
@@ -394,14 +421,14 @@ class PiAgent {
         this.pending.delete(id);
         return resolve({ type: "response", id, success: false, error: err.message });
       }
-      // Safety: timeout so a dropped response doesn't leak the promise.
-      setTimeout(() => {
-        if (this.pending.has(id)) {
-          this.pending.delete(id);
-          this.markActivity();
-          resolve({ type: "response", id, success: false, error: "timeout" });
-        }
-      }, 60000);
+      if (!longRunning) {
+        timeoutId = setTimeout(() => {
+          if (this.pending.has(id)) {
+            this.pending.delete(id);
+            resolve({ type: "response", id, success: false, error: "timeout" });
+          }
+        }, 60000);
+      }
     });
   }
 
@@ -459,6 +486,10 @@ class PiAgent {
     if (this.sessionKey) {
       activeAgents.delete(this.sessionKey);
     }
+    for (const [id, resolve] of this.pending) {
+      resolve({ type: "response", id, success: false, error: "pi process stopped" });
+    }
+    this.pending.clear();
     for (const s of this.sockets) { try { s.close(); } catch {} }
     this.sockets.clear();
     try { this.proc && this.proc.kill("SIGTERM"); } catch {}
@@ -727,13 +758,34 @@ app.get("/api/session", async (req, res) => {
     const file = req.query.file;
     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 = normalizePath(file);
+    // Security check: ensure the file path is within SESSIONS_DIR. We resolve the
+    // canonical (real) path rather than just the lexical one, otherwise a
+    // symlink placed inside SESSIONS_DIR could point outside and let a caller
+    // read arbitrary .jsonl files via the traversal check above.
     const resolvedSessionsDir = normalizePath(SESSIONS_DIR);
-    const relPath = path.relative(resolvedSessionsDir, resolvedFile);
+    const requestedPath = normalizePath(file);
+    const relPath = path.relative(resolvedSessionsDir, requestedPath);
     if (relPath.startsWith("..") || path.isAbsolute(relPath)) {
       return res.status(403).json({ error: "Access denied" });
     }
+    // Canonicalize both target file and sessions directory to verify the real
+    // target still lives under the real SESSIONS_DIR even when symlinks exist.
+    let resolvedFile;
+    try {
+      resolvedFile = await fsRealpath(requestedPath);
+    } catch {
+      // Fall back to the lexical path if realpath fails (e.g. missing file);
+      // the read below will surface the actual error.
+      resolvedFile = requestedPath;
+    }
+    let canonicalSessionsDir = resolvedSessionsDir;
+    try {
+      canonicalSessionsDir = await fsRealpath(resolvedSessionsDir);
+    } catch {}
+    const realRel = path.relative(canonicalSessionsDir, resolvedFile);
+    if (realRel.startsWith("..") || path.isAbsolute(realRel)) {
+      return res.status(403).json({ error: "Access denied" });
+    }
 
     const content = await readFile(resolvedFile, "utf8");
     const lines = content.split("\n").filter(Boolean);
@@ -751,11 +803,6 @@ app.get("/api/session", async (req, res) => {
     // Build a map and reconstruct the active path from root -> leaf.
     const byId = new Map();
     for (const e of entries) if (e.id) byId.set(e.id, e);
-    let leaf = null;
-    for (const e of entries) {
-      // a leaf is one that nobody else has as parentId (and isn't a non-message like header)
-      if (e.type === "message" || e.type === "message_summary") leaf = e.id;
-    }
     // find true leaf = last entry with no children
     const childCount = new Map();
     for (const e of entries) {
@@ -905,7 +952,8 @@ wss.on("connection", (ws, req) => {
         agent.send({ type: "new_session" });
         break;
       case "switch_session":
-        if (msg.sessionPath) agent.setSessionKey(cwd, msg.sessionPath);
+        if (!msg.sessionPath) break; // refuse malformed request; never forward an undefined path to pi
+        agent.setSessionKey(cwd, msg.sessionPath);
         agent.send({ type: "switch_session", sessionPath: msg.sessionPath });
         break;
       case "steer":