@liguoshuai/pi-web-chat 1.8.9 → 1.9.0

package/docs/CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.9.0] - 2026-08-29
+
+### Added
+- **历史对话删除功能 (Session Deletion & Auto Process Cleanup)**：
+  - 后端新增 `DELETE /api/session` 接口，支持通过文件路径删除历史 JSONL 会话记录，并带有严格的会话目录越界与路径穿越安全校验。
+  - 删除会话时自动清理后端内存元数据缓存，并自动停止与回收当前会话所绑定的常驻后台 Pi 代理子进程。
+  - 前端侧边栏会话列表新增垃圾桶删除按钮（桌面端 Hover 显示，移动端常驻展示），点击后带有确认拦截提示，防止误删。
+  - 删除当前正在查看/进行的会话时，自动重置为空白新会话并清理 URL 参数与流式状态；删除其他会话时无感刷新会话列表。
+- **左侧栏拖拽缩放宽度特性 (Resizable Sidebar with Dragging)**：
+  - 左侧边栏新增右侧边缘拖拽把手（`#sidebarResizer`），支持鼠标及触控指针拖拽自由调节侧边栏宽度（180px - 自适应上限）。
+  - 基于 Pointer Capture API 与 `--sidebar-width` 动态 CSS 变量实现 60fps 丝滑拖拽缩放体验，并消除文本误选与拖动延迟。
+  - 侧边栏折叠与展开动画完全自适应动态设置的侧边栏宽度，避免折叠时发生截断或残留。
+  - 支持双击拖拽把手快速重置回默认宽度（260px），并通过 `localStorage` 自动持久化保存用户自定宽度偏好。
+  - 优化移动端响应式，移动端抽屉侧栏下自动禁用并隐藏桌面端拖拽把手。
+
+---
+
 ## [1.8.9] - 2026-08-29
 
 ### Fixed

package/package.json

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

@@ -491,6 +491,17 @@ function renderSidebar(sessions) {
   sessions.forEach((s) => {
     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 btnDelete = el("button", {
+      class: "btn-delete-session",
+      title: "删除会话",
+      html: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>`,
+      onclick: (e) => {
+        e.stopPropagation();
+        deleteSession(s.file, title);
+      },
+    });
+
     const item = el("div", {
       class: "session-item" + (s.file === state.currentSessionFile ? " active" : ""),
       dataset: { file: s.file },
@@ -498,14 +509,57 @@ function renderSidebar(sessions) {
       onclick: () => loadSession(s.file),
     }, [
       el("div", { class: "title" }, [
-        el("div", { text: title }),
+        el("div", { class: "session-item-name", text: title }),
         el("div", { class: "meta", text: `${when} · ${s.messageCount || 0} 条` }),
       ]),
+      btnDelete,
     ]);
     list.appendChild(item);
   });
 }
 
+function startNewSession(askConfirm = true) {
+  if (state.streaming) {
+    if (askConfirm && !confirm("正在生成中，新建会话会终止当前操作，确定吗？")) return;
+    abortGeneration();
+  }
+  clearChat();
+  showEmptyState(true);
+  state.currentSessionFile = null;
+  try {
+    window.history.replaceState({}, "", window.location.pathname);
+  } catch {}
+  connectWs({ explicitNewSession: true }); // no session -> pi creates a new one
+  $("#topSessionName").textContent = "新对话";
+  // Mobile: close sidebar on new session
+  if (window.innerWidth <= 768) closeSidebar();
+  refreshSessions();
+}
+
+async function deleteSession(file, title) {
+  if (!confirm(`确定要删除此会话记录吗？\n「${title || "新对话"}」\n删除后不可恢复。`)) {
+    return;
+  }
+  try {
+    const res = await fetch(`${API}/api/session?file=${encodeURIComponent(file)}`, {
+      method: "DELETE",
+    });
+    const data = await res.json();
+    if (!res.ok || data.error) {
+      showToast(`删除失败: ${data.error || "未知错误"}`);
+      return;
+    }
+    showToast("会话已删除");
+    if (state.currentSessionFile === file) {
+      startNewSession(false);
+    } else {
+      await refreshSessions();
+    }
+  } catch (err) {
+    showToast(`删除失败: ${err.message || "网络错误"}`);
+  }
+}
+
 async function toggleSidebar() {
   const app = $(".app");
   const isOpen = app.classList.toggle("sidebar-open");
@@ -2224,6 +2278,70 @@ function autoResize() {
   ta.style.height = Math.min(ta.scrollHeight, 220) + "px";
 }
 
+function initSidebarResize() {
+  const resizer = $("#sidebarResizer");
+  if (!resizer) return;
+
+  // Restore saved width from localStorage
+  const savedWidth = parseInt(localStorage.getItem("sidebarWidth"), 10);
+  if (savedWidth && savedWidth >= 180 && savedWidth <= 800) {
+    document.documentElement.style.setProperty("--sidebar-width", `${savedWidth}px`);
+  }
+
+  let isDragging = false;
+  let startX = 0;
+  let startWidth = 260;
+
+  resizer.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0) return; // Only primary button
+    if (window.innerWidth <= 768) return; // Ignore on mobile
+
+    isDragging = true;
+    startX = e.clientX;
+    const currentWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--sidebar-width"), 10) || $(".sidebar")?.offsetWidth || 260;
+    startWidth = currentWidth;
+
+    resizer.setPointerCapture(e.pointerId);
+    document.body.classList.add("is-resizing");
+    e.preventDefault();
+  });
+
+  resizer.addEventListener("pointermove", (e) => {
+    if (!isDragging) return;
+    const deltaX = e.clientX - startX;
+    let newWidth = startWidth + deltaX;
+
+    const minWidth = 180;
+    const maxWidth = Math.min(650, Math.max(300, window.innerWidth - 250));
+    newWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
+
+    document.documentElement.style.setProperty("--sidebar-width", `${newWidth}px`);
+  });
+
+  const endDrag = (e) => {
+    if (!isDragging) return;
+    isDragging = false;
+    try {
+      resizer.releasePointerCapture(e.pointerId);
+    } catch {}
+    document.body.classList.remove("is-resizing");
+
+    const finalWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--sidebar-width"), 10);
+    if (finalWidth) {
+      localStorage.setItem("sidebarWidth", finalWidth);
+    }
+  };
+
+  resizer.addEventListener("pointerup", endDrag);
+  resizer.addEventListener("pointercancel", endDrag);
+
+  // Double-click to reset width to default 260px
+  resizer.addEventListener("dblclick", () => {
+    document.documentElement.style.setProperty("--sidebar-width", "260px");
+    localStorage.removeItem("sidebarWidth");
+  });
+}
+
 // ---- Init ----
 async function init() {
   // Default cwd to home (server uses home default too).
@@ -2233,23 +2351,7 @@ async function init() {
   await loadServerConfig();
 
   // event listeners
-  $("#btnNew").addEventListener("click", () => {
-    if (state.streaming) {
-      if (!confirm("正在生成中，新建会话会终止当前操作，确定吗？")) return;
-      abortGeneration();
-    }
-    clearChat();
-    showEmptyState(true);
-    state.currentSessionFile = null;
-    try {
-      window.history.replaceState({}, "", window.location.pathname);
-    } catch {}
-    connectWs({ explicitNewSession: true }); // no session -> pi creates a new one
-    $("#topSessionName").textContent = "新对话";
-    // Mobile: close sidebar on new session
-    if (window.innerWidth <= 768) closeSidebar();
-    refreshSessions();
-  });
+  $("#btnNew").addEventListener("click", () => startNewSession(true));
 
   $("#sendBtn").addEventListener("click", () => {
     if (state.streaming) {
@@ -2348,7 +2450,9 @@ async function init() {
   $("#sidebarSearch").addEventListener("input", (e) => {
     const q = e.target.value.toLowerCase();
     document.querySelectorAll(".session-item").forEach((it) => {
-      it.style.display = it.textContent.toLowerCase().includes(q) ? "" : "none";
+      const titleEl = it.querySelector(".title");
+      const text = titleEl ? titleEl.textContent.toLowerCase() : it.textContent.toLowerCase();
+      it.style.display = text.includes(q) ? "" : "none";
     });
   });
 
@@ -2479,6 +2583,9 @@ async function init() {
   // Mobile: floating button to jump back to the toolbar after long scrolls
   initMobileToolbarFab();
 
+  // Sidebar resizer
+  initSidebarResize();
+
   refreshSessions();
   // start in the disconnected state; connectWs will flip to green on open.
   const initDot = $("#connDot");

package/public/index.html

@@ -28,6 +28,7 @@
           <span id="appVersion" class="app-version" title="pi-web-chat 版本"></span>
         </div>
       </div>
+      <div class="sidebar-resizer" id="sidebarResizer" title="拖拽调整侧边栏宽度，双击恢复默认"></div>
     </aside>
 
     <!-- Sidebar Overlay -->

package/public/style.css

@@ -1,4 +1,5 @@
 :root {
+  --sidebar-width: 260px;
   --bg: #212121;
   --bg-sidebar: #171717;
   --bg-hover: #2a2a2a;
@@ -42,7 +43,7 @@ body {
 }
 
 .sidebar {
-  width: 260px;
+  width: var(--sidebar-width);
   flex-shrink: 0;
   background: var(--bg-sidebar);
   border-right: 1px solid var(--border);
@@ -52,11 +53,12 @@ body {
   transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 100;
   overflow: hidden;
+  position: relative;
 }
 
 /* Sidebar collapsed state on desktop */
 .app:not(.sidebar-open) .sidebar {
-  margin-left: -260px;
+  margin-left: calc(-1 * var(--sidebar-width));
 }
 
 .main {
@@ -117,23 +119,103 @@ body {
   padding: 4px 8px 16px;
 }
 .session-item {
-  padding: 9px 10px;
+  padding: 8px 10px;
   border-radius: 10px;
   cursor: pointer;
   font-size: 13px;
   color: var(--text);
   display: flex;
-  align-items: flex-start;
+  align-items: center;
+  justify-content: space-between;
   gap: 8px;
   margin-bottom: 2px;
   transition: background .12s;
   word-break: break-word;
+  position: relative;
 }
 .session-item:hover { background: var(--bg-hover); }
 .session-item.active { background: var(--bg-hover); }
-.session-item .title { flex: 1; line-height: 1.35; }
+.session-item .title {
+  flex: 1;
+  min-width: 0;
+  line-height: 1.35;
+}
+.session-item .session-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .session-item .meta {
-  font-size: 11px; color: var(--text-dim); margin-top: 3px;
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.btn-delete-session {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  border-radius: 6px;
+  cursor: pointer;
+  opacity: 0;
+  flex-shrink: 0;
+  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
+}
+.session-item:hover .btn-delete-session,
+.session-item:focus-within .btn-delete-session {
+  opacity: 1;
+}
+.btn-delete-session:hover {
+  color: var(--danger, #ef4444);
+  background: rgba(239, 68, 68, 0.15);
+}
+
+/* Sidebar Resizer */
+.sidebar-resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 102;
+  user-select: none;
+  transition: background-color 0.15s ease;
+}
+.sidebar-resizer::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background: transparent;
+  transition: background-color 0.15s ease;
+}
+.sidebar-resizer:hover::after,
+.is-resizing .sidebar-resizer::after {
+  background: var(--accent);
+}
+.sidebar-resizer:hover,
+.is-resizing .sidebar-resizer {
+  background: rgba(16, 163, 127, 0.12);
+}
+
+.is-resizing,
+.is-resizing * {
+  user-select: none !important;
+  cursor: col-resize !important;
+}
+.is-resizing .sidebar {
+  transition: none !important;
 }
 .sidebar-empty { color: var(--text-dim); font-size: 13px; padding: 20px 12px; text-align: center; }
 
@@ -1217,6 +1299,16 @@ body {
     z-index: 105;
   }
 
+  .sidebar-resizer {
+    display: none !important;
+  }
+
+  .btn-delete-session {
+    opacity: 0.7;
+    width: 30px;
+    height: 30px;
+  }
+
   .sidebar-bottom {
     flex-shrink: 0;
     padding: 12px 14px;

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, realpath as fsRealpath } from "fs/promises";
+import { readFile, readdir, stat, writeFile, mkdir, realpath as fsRealpath, unlink } from "fs/promises";
 import { readFileSync, existsSync } from "fs";
 import { StringDecoder } from "string_decoder";
 import express from "express";
@@ -853,6 +853,65 @@ app.get("/api/session", async (req, res) => {
   }
 });
 
+// Delete a session file from disk and clean up in-memory caches / active agents
+app.delete("/api/session", async (req, res) => {
+  try {
+    const file = req.query.file || req.body?.file;
+    if (!file || !file.endsWith(".jsonl")) {
+      return res.status(400).json({ error: "bad file" });
+    }
+
+    const resolvedSessionsDir = normalizePath(SESSIONS_DIR);
+    const requestedPath = normalizePath(file);
+    const relPath = path.relative(resolvedSessionsDir, requestedPath);
+    if (relPath.startsWith("..") || path.isAbsolute(relPath)) {
+      return res.status(403).json({ error: "Access denied" });
+    }
+
+    let resolvedFile;
+    try {
+      resolvedFile = await fsRealpath(requestedPath);
+    } catch (err) {
+      if (err.code === "ENOENT") {
+        return res.status(404).json({ error: "File not found" });
+      }
+      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" });
+    }
+
+    // Stop and unpool any active PiAgent managing this session
+    for (const [key, agent] of activeAgents.entries()) {
+      if (key.endsWith(`:${requestedPath}`) || key.endsWith(`:${resolvedFile}`)) {
+        activeAgents.delete(key);
+        try {
+          agent.stop();
+        } catch {}
+      }
+    }
+
+    // Invalidate session cache
+    sessionMetadataCache.delete(requestedPath);
+    sessionMetadataCache.delete(resolvedFile);
+
+    // Delete the session JSONL file
+    await unlink(resolvedFile);
+
+    res.json({ success: true, file: requestedPath });
+  } catch (e) {
+    console.error("Delete session error:", e);
+    res.status(500).json({ error: String(e) });
+  }
+});
+
 // ---- WebSocket: 1 browser conn = 1 pi RPC conn (with process persistence) ----
 const httpServer = app.listen(PORT, () => {
   console.log(`pi-web-chat on http://localhost:${PORT}`);