@liguoshuai/pi-web-chat 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -7,6 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.6.0] - 2026-07-26
+
+### Added
+- **后台任务继续运行 (Background Task Persistence)**：
+  - 关闭浏览器/标签页不再强制中止正在生成的 pi 任务：后台 pi RPC 子进程保持**跑完当前这一轮**；重连后可看到完整结果。
+  - `PiAgent` 跟踪 `state`（`idle`/`streaming`）与 `pending` 请求。只有在“**无 WebSocket 且真正空闲**”（无 streaming 也无未响应请求）时才启动空闲回收计时。
+  - 时长型缓冲区：在后台期间渲染器产出的事件会被**离线缓存**到 `EVENT_BUFFER_SIZE`（默认 2000 条）的环形 buffer。新连接上来时自动 **回放**为 `backfill_start` → N 条原始事件 → `backfill_end` 三个阶段包裹的消息，便于前端精确“追到哪儿”。
+  - 新增 REST 端点 `GET /api/agents`：查看所有存活后台 pi 代理（`state`, `alive`, `busy`, `hasClients`, `uptimeMs`, `bufferedEvents`, 最近一条用户提示等）。常驻 npm 下载、上传、调试或后台 面板都可以利用。
+  - 新增环境变量：`MAX_AGENT_LIFETIME_MS`（默认 1800000 = 30分钟，硬上限超出强制 `SIGTERM`；设为 0 禁用）。防止后台代理失控常驻。
+
+### Changed
+- **`IDLE_TIMEOUT_MS` 语义重要变更**：从“**断开后多久**杀进程”变为“**真正空闲后多久**才回收”（默认还是 5min）。如果断开后还在 streaming 或有余未完成的 RPC 请求，定时器不会触发，任务不会被中断。
+- 首页顶栏重连后会同步服务器状态：收到 `backfill_end` 后会自动滚动到底，并恢复 `streaming` 状态（如仍在后台继续）。
+- 首页增加优雅关闭：`SIGINT`/`SIGTERM` 会“逐个停止所有后台 pi 进程”后再退出，防止 server 重启时留下 zombie 进程。
+- 不再支持“`IDLE_TIMEOUT_MS=0` 断开即杀”告诉——该环境变量现在表示“**禁用空闲回收**”。需要立刻释放内存，请改为正数（如 `5000`）或重启 server。
+
+### 技术说明
+- `PiAgent` 生命周期事件：`agent_start → state=streaming`；`agent_end/agent_settled → state=idle`；`pi_exit → state=idle`。这是“背景继续跑完”的关键开关。
+
+---
+
 ## [1.5.0] - 2026-07-26
 
 ### Added

package/package.json

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

@@ -40,6 +40,7 @@ const state = {
   currentModel: null,
   thinkingLevel: "medium",
   sessionId: null,
+  isBackfilling: false,
 };
 
 let toastTimer = null;
@@ -431,6 +432,26 @@ function closeSidebar() {
   $(".app").classList.remove("sidebar-open");
 }
 
+function initMobileToolbarFab() {
+  const chat = $("#chat");
+  const fab = $("#mobileToolbarFab");
+  if (!chat || !fab) return;
+
+  const onScroll = () => {
+    if (chat.scrollTop > 250) {
+      fab.classList.add("visible");
+    } else {
+      fab.classList.remove("visible");
+    }
+  };
+
+  chat.addEventListener("scroll", onScroll);
+  fab.addEventListener("click", () => {
+    chat.scrollTo({ top: 0, behavior: "smooth" });
+    fab.classList.remove("visible");
+  });
+}
+
 async function loadSession(file) {
   state.currentSessionFile = file;
   try {
@@ -708,6 +729,8 @@ function summaryArgs(name, args) {
 }
 
 function scrollBottom() {
+  // Don't fight the user during a background-event replay (backfill).
+  if (state.isBackfilling) return;
   const chat = $("#chat");
   chat.scrollTop = chat.scrollHeight;
 }
@@ -996,6 +1019,25 @@ function sendWs(obj) {
 }
 
 function handlePiMessage(obj) {
+  // 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") {
+    state.isBackfilling = true;
+    return;
+  }
+  if (obj.type === "backfill_end") {
+    state.isBackfilling = false;
+    // After replay, sync the composer / streaming state to what the server thinks.
+    if (obj.streaming) {
+      state.streaming = true;
+      setComposerAborting(true);
+      ensureStreamingMsg();
+      refreshStreamingContent();
+    }
+    // jump to the latest content once the replay is done
+    requestAnimationFrame(scrollBottom);
+    return;
+  }
   // Responses to commands we issued (get_state etc.) come back with success+data.
   if (obj.type === "response") {
     if (obj.command === "get_state" && obj.success) updateState(obj.data);
@@ -1593,6 +1635,9 @@ function init() {
     }
   });
 
+  // Mobile: floating button to jump back to the toolbar after long scrolls
+  initMobileToolbarFab();
+
   refreshSessions();
   // start in the disconnected state; connectWs will flip to green on open.
   const initDot = $("#connDot");

package/public/index.html

@@ -101,6 +101,14 @@
     </div>
   </div>
 
+  <!-- Mobile toolbar reveal / scroll-to-top FAB -->
+  <button class="mobile-toolbar-fab" id="mobileToolbarFab" title="回到顶部">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="12" y1="19" x2="12" y2="5"></line>
+      <polyline points="5 12 12 5 19 12"></polyline>
+    </svg>
+  </button>
+
   <!-- Toast notification -->
   <div class="toast" id="toast"></div>
   <script src="/app.js"></script>

package/public/style.css

@@ -746,6 +746,37 @@ body {
   transform: translateX(-50%) translateY(0);
 }
 
+/* Mobile toolbar reveal / scroll-to-top FAB */
+.mobile-toolbar-fab {
+  position: fixed;
+  right: 16px;
+  bottom: 90px;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--bg-input);
+  color: var(--text);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  cursor: pointer;
+  z-index: 50;
+  opacity: 0;
+  transform: translateY(10px);
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
+}
+.mobile-toolbar-fab.visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.mobile-toolbar-fab:active {
+  background: var(--bg-hover);
+}
+
 /* Model selector dropdown */
 .model-menu {
   position: absolute; top: 52px; right: 16px;
@@ -807,33 +838,52 @@ body {
     opacity: 1;
   }
 
-  /* Topbar Mobile Adjustments */
+  /* Topbar Mobile Adjustments — fixed, taller, shadowed so it is always findable */
   .topbar {
-    height: 50px;
-    padding: 0 8px;
-    gap: 6px;
-    flex-shrink: 0;
-    position: sticky;
+    height: 54px;
+    padding: 0 12px;
+    gap: 8px;
+    position: fixed;
     top: 0;
-    z-index: 20;
+    left: 0;
+    right: 0;
+    z-index: 101;
     background: var(--bg);
+    border-bottom: 1px solid var(--border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  }
+
+  .main {
+    padding-top: 54px;
   }
 
   .topbar .session-name {
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 500;
     min-width: 0;
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    padding: 0 2px;
+    padding: 0 4px;
+  }
+
+  .btn-toggle-sidebar {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    color: var(--text);
+    background: var(--bg-hover);
+  }
+  .btn-toggle-sidebar svg {
+    width: 22px;
+    height: 22px;
   }
 
   #cwdPillWrap {
-    padding: 4px 8px;
+    padding: 5px 9px;
     font-size: 11px;
-    max-width: 95px;
+    max-width: 90px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -841,22 +891,28 @@ body {
   }
 
   .model-pill {
-    padding: 4px 8px;
+    padding: 5px 10px;
     font-size: 11px;
-    max-width: 105px;
+    max-width: 100px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     flex-shrink: 0;
   }
 
-  /* Model Dropdown Menu Mobile Adjustments */
+  /* Model Dropdown Menu Mobile Adjustments — fixed so it never detaches from topbar */
   .model-menu {
-    width: calc(100vw - 16px);
-    right: 8px;
+    position: fixed;
+    top: 54px;
     left: 8px;
-    top: 46px;
-    max-height: 280px;
+    right: 8px;
+    width: auto;
+    max-height: calc(100dvh - 70px);
+    border-radius: 12px;
+  }
+
+  .mobile-toolbar-fab {
+    display: flex;
   }
 
   /* Chat area mobile adjustments */

package/server.js

@@ -42,9 +42,13 @@ function normalizeCwd(dir) {
 const SESSIONS_DIR = process.env.PI_SESSIONS_DIR || path.join(home(), ".pi", "agent", "sessions");
 const PORT = process.env.PORT || 3000;
 
-// Idle timeout (ms) before a detached (browser closed) pi RPC subprocess is killed.
-// Replaces the previous hardcoded 5-minute timeout. Lower values free memory faster
-// on memory-constrained hosts; set IDLE_TIMEOUT_MS=0 to disable cleanup entirely.
+// Idle timeout (ms). When a pi agent has NO WebSocket attached AND is truly
+// idle (no streaming/pending tasks), after this many ms the subprocess is
+// killed to reclaim memory. Browser-close alone does NOT trigger this — only
+// true idleness does — so a task that is mid-flight keeps running in the
+// background after you close the tab, and survives until it finishes.
+// Set IDLE_TIMEOUT_MS=0 to disable idle reclamation entirely (agents live
+// until MAX_AGENT_LIFETIME_MS or server shutdown).
 const IDLE_TIMEOUT_MS = (() => {
   const raw = process.env.IDLE_TIMEOUT_MS;
   if (raw === undefined || raw === "") return 5 * 60 * 1000;
@@ -56,6 +60,30 @@ const IDLE_TIMEOUT_MS = (() => {
   return n;
 })();
 
+// Hard ceiling on how long a background pi agent may live, even if still busy.
+// Protects against runaway agents that never terminate. 0 = unlimited.
+const MAX_AGENT_LIFETIME_MS = (() => {
+  const raw = process.env.MAX_AGENT_LIFETIME_MS;
+  if (raw === undefined || raw === "") return 30 * 60 * 1000; // 30 min
+  const n = Number(raw);
+  if (!Number.isFinite(n) || n < 0) {
+    console.warn(`[pi-web-chat] Invalid MAX_AGENT_LIFETIME_MS="${raw}", falling back to 1800000`);
+    return 30 * 60 * 1000;
+  }
+  return n;
+})();
+
+// How many pi->browser events to buffer while no WebSocket is attached, so a
+// reconnecting client can replay what happened in the background after they
+// closed the tab. Ring buffer; oldest events are dropped on overflow.
+const EVENT_BUFFER_SIZE = (() => {
+  const raw = process.env.EVENT_BUFFER_SIZE;
+  if (raw === undefined || raw === "") return 2000;
+  const n = Number(raw);
+  if (!Number.isInteger(n) || n < 0) return 2000;
+  return n;
+})();
+
 // Maximum number of concurrently-pooled pi RPC subprocesses. New WebSocket
 // connections beyond the cap are rejected with a clear message instead of
 // silently exhausting memory. Set MAX_CONCURRENT_AGENTS=0 to disable.
@@ -77,6 +105,8 @@ const MAX_CONCURRENT_AGENTS = (() => {
 // idle timer, reducing pressure on small-memory hosts. Default: false.
 const IDLE_DROP_HEAP = process.env.IDLE_DROP_HEAP === "1" || process.env.IDLE_DROP_HEAP === "true";
 
+const nowMs = () => Date.now();
+
 // Active pi RPC processes pooled by session key (`${cwd}:${resolvedSessionPath}`)
 const activeAgents = new Map();
 
@@ -90,27 +120,41 @@ class PiAgent {
     this.proc = null;
     this.buffer = "";
     this.alive = false;
-    this.cleanupTimer = null;
+    // lifecycle / background-task state
+    this.state = "idle";            // "idle" | "streaming"
+    this.idleTimer = null;         // true-idle reclamation timer
+    this.lifetimeTimer = null;     // hard max-lifetime kill
+    this.startedAt = 0;
+    this.lastActivityAt = 0;
+    // ring buffer of pi->browser events while no socket is attached, so a
+    // reconnecting client can replay what happened in the background.
+    this.eventBuffer = [];
+    // lightweight summary of the task currently running in background, for
+    // the /api/agents dashboard and reconnecting clients.
+    this.lastUserPrompt = null;
   }
 
+  get hasWs() { return this.sockets.size > 0; }
+  get isBusy() { return this.state === "streaming" || this.pending.size > 0; }
+
   attachWs(ws) {
     this.sockets.add(ws);
-    this.cancelCleanup();
+    this.cancelIdleKill();
+    // Replay buffered background events to the newly attached client so it can
+    // catch up on whatever pi produced while no one was watching.
+    this.replayBuffered(ws);
   }
 
   detachWs(ws) {
     this.sockets.delete(ws);
     if (this.sockets.size === 0) {
-      // Keep process alive for IDLE_TIMEOUT_MS so a browser refresh/reconnect
-      // can re-attach to the same pi RPC subprocess. If IDLE_TIMEOUT_MS is 0,
-      // scheduleCleanup still runs but stops the process immediately.
-      const idleMs = IDLE_TIMEOUT_MS === 0 ? 0 : IDLE_TIMEOUT_MS;
-      this.scheduleCleanup(idleMs);
-      if (IDLE_DROP_HEAP && idleMs > 0) {
-        // Give the OS a hint that this process is a candidate for early
-        // reclamation before the idle timer fires. Cheaper than swap pressure.
+      // Browser closed. We do NOT kill the subprocess here: a background task
+      // keeps running. We only arm the idle-kill, which fires once the agent
+      // is truly idle (no streaming, no pending requests) for IDLE_TIMEOUT_MS.
+      if (IDLE_DROP_HEAP) {
         try { if (typeof global.gc === "function") global.gc(); } catch {}
       }
+      this.maybeScheduleIdleKill();
     }
   }
 
@@ -125,32 +169,57 @@ class PiAgent {
     activeAgents.set(key, this);
   }
 
-  scheduleCleanup(delayMs = 300000) {
-    this.cancelCleanup();
-    // delayMs === 0 means "kill the subprocess right now" — used when an
-    // explicit teardown is requested without bypassing the cleanup pipeline.
-    if (delayMs === 0) {
-      console.log(`Cleaning up pi agent immediately (key=${this.sessionKey || "unkeyed"})`);
-      this.stop();
-      return;
-    }
-    this.cleanupTimer = setTimeout(() => {
-      console.log(`Cleaning up inactive pi agent after ${Math.round(delayMs / 1000)}s idle (key=${this.sessionKey || "unkeyed"})`);
-      // One final heap drop just before we kill the subprocess.
+  markActivity() {
+    this.lastActivityAt = nowMs();
+    // any activity cancels a pending idle-kill; it will be re-armed when idle.
+    this.cancelIdleKill();
+    if (!this.hasWs && !this.isBusy) this.maybeScheduleIdleKill();
+  }
+
+  setStreaming(streaming) {
+    this.state = streaming ? "streaming" : "idle";
+    this.markActivity();
+  }
+
+  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 (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;
+      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 {}
       }
       this.stop();
-    }, delayMs);
+    }, ms);
   }
 
-  cancelCleanup() {
-    if (this.cleanupTimer) {
-      clearTimeout(this.cleanupTimer);
-      this.cleanupTimer = null;
+  cancelIdleKill() {
+    if (this.idleTimer) {
+      clearTimeout(this.idleTimer);
+      this.idleTimer = null;
     }
   }
 
+  // Back-compat shim for any caller that used the old name.
+  scheduleCleanup(delayMs = 300000) {
+    this.cancelIdleKill();
+    if (delayMs === 0) { this.stop(); return; }
+    // treat as immediate idle-kill after the given delay only if truly idle
+    this.idleTimer = setTimeout(() => {
+      this.idleTimer = null;
+      if (this.hasWs || this.isBusy) return;
+      this.stop();
+    }, delayMs);
+  }
+  cancelCleanup() { this.cancelIdleKill(); }
+
   start() {
     const args = [PI_BIN, "--mode", "rpc", "--session-dir", SESSIONS_DIR];
     this.proc = spawn(args[0], args.slice(1), {
@@ -158,6 +227,14 @@ class PiAgent {
       env: { ...process.env, PI_SKIP_VERSION_CHECK: "1" },
     });
     this.alive = true;
+    this.startedAt = nowMs();
+    this.lastActivityAt = this.startedAt;
+    if (MAX_AGENT_LIFETIME_MS > 0) {
+      this.lifetimeTimer = setTimeout(() => {
+        console.warn(`pi agent hit MAX_AGENT_LIFETIME_MS (${Math.round(MAX_AGENT_LIFETIME_MS / 1000)}s), force-stopping (key=${this.sessionKey || "unkeyed"})`);
+        this.stop();
+      }, MAX_AGENT_LIFETIME_MS);
+    }
     this.proc.on("error", (err) => {
       this.alive = false;
       console.error(`[pi spawn error]`, err);
@@ -176,6 +253,8 @@ class PiAgent {
       if (this.sessionKey) activeAgents.delete(this.sessionKey);
       for (const s of this.sockets) { try { s.close(); } catch {} }
       this.sockets.clear();
+      this.cancelIdleKill();
+      if (this.lifetimeTimer) { clearTimeout(this.lifetimeTimer); this.lifetimeTimer = null; }
     });
   }
 
@@ -199,13 +278,46 @@ class PiAgent {
     if (obj.data?.sessionFile) {
       this.setSessionKey(this.cwd, obj.data.sessionFile);
     }
+    // Track streaming lifecycle so background tasks are not killed mid-flight.
+    switch (obj.type) {
+      case "agent_start": this.setStreaming(true); break;
+      case "agent_end": this.setStreaming(false); break;
+      case "agent_settled": this.setStreaming(false); break;
+      case "pi_exit": this.state = "idle"; break;
+    }
+    // Capture the most recent user prompt for the background-task dashboard.
+    if (obj.type === "remote_user_prompt" || obj.type === "remote_user_steer") {
+      this.lastUserPrompt = { text: obj.message, isSteer: !!obj.isSteer, at: nowMs() };
+    }
     // RPC responses carry `id`; events do not.
     if (obj.type === "response" && obj.id) {
       const res = this.pending.get(obj.id);
       if (res) { this.pending.delete(obj.id); res(obj); }
+      this.markActivity();
     }
-    // Forward every event / response to the browser as-is.
+    // Forward every event / response to connected browsers as-is.
     this.wsSend(obj);
+    // If nobody is listening, remember it so a reconnect can replay.
+    if (!this.hasWs) this.bufferEvent(obj);
+  }
+
+  bufferEvent(obj) {
+    if (EVENT_BUFFER_SIZE <= 0) return;
+    this.eventBuffer.push(obj);
+    if (this.eventBuffer.length > EVENT_BUFFER_SIZE) {
+      this.eventBuffer.shift();
+    }
+  }
+
+  replayBuffered(ws) {
+    if (this.eventBuffer.length === 0) return;
+    if (ws.readyState !== 1) return;
+    // Send a marker so the client knows the next burst is backfill, not live.
+    try { ws.send(JSON.stringify({ type: "backfill_start", count: this.eventBuffer.length })); } catch {}
+    for (const ev of this.eventBuffer) {
+      try { ws.send(JSON.stringify(ev)); } catch {}
+    }
+    try { ws.send(JSON.stringify({ type: "backfill_end", streaming: this.isBusy, state: this.state })); } catch {}
   }
 
   send(cmd) {
@@ -214,11 +326,13 @@ class PiAgent {
       const id = String(++this.reqId);
       const payload = { ...cmd, id };
       this.pending.set(id, resolve);
+      this.markActivity();
       this.proc.stdin.write(JSON.stringify(payload) + "\n");
       // 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);
@@ -227,6 +341,7 @@ class PiAgent {
 
   sendNoReply(cmd) {
     if (!this.alive) throw new Error("pi process not alive");
+    this.markActivity();
     this.proc.stdin.write(JSON.stringify(cmd) + "\n");
   }
 
@@ -243,9 +358,28 @@ class PiAgent {
     }
   }
 
+  status() {
+    return {
+      cwd: this.cwd,
+      sessionKey: this.sessionKey,
+      alive: this.alive,
+      state: this.state,
+      busy: this.isBusy,
+      hasClients: this.hasWs,
+      clientCount: this.sockets.size,
+      pendingRequests: this.pending.size,
+      startedAt: this.startedAt || null,
+      lastActivityAt: this.lastActivityAt || null,
+      uptimeMs: this.startedAt ? nowMs() - this.startedAt : 0,
+      bufferedEvents: this.eventBuffer.length,
+      lastUserPrompt: this.lastUserPrompt,
+    };
+  }
+
   stop() {
     this.alive = false;
-    this.cancelCleanup();
+    this.cancelIdleKill();
+    if (this.lifetimeTimer) { clearTimeout(this.lifetimeTimer); this.lifetimeTimer = null; }
     if (this.sessionKey) {
       activeAgents.delete(this.sessionKey);
     }
@@ -291,6 +425,17 @@ app.get("/api/validate-dir", async (req, res) => {
   }
 });
 
+// Endpoint listing all live background pi agents (for dashboards / debug).
+// Shows which sessions are still running headlessly after the browser closed.
+app.get("/api/agents", (req, res) => {
+  const agents = [];
+  for (const [key, a] of activeAgents.entries()) {
+    if (!a.alive) continue;
+    agents.push({ key, ...a.status() });
+  }
+  res.json({ count: agents.length, idleTimeoutMs: IDLE_TIMEOUT_MS, maxLifetimeMs: MAX_AGENT_LIFETIME_MS, agents });
+});
+
 // Scan SESSIONS_DIR for .jsonl files in BOTH the root AND every subdirectory.
 // Why both? Because pi stores sessions under a cwd-encoded subdir (e.g.
 // `--home-zrlgs--`) when left to its own device, but our server passes
@@ -526,6 +671,7 @@ wss.on("connection", (ws, req) => {
       case "prompt":
         // Sync prompt to other connected clients in the same session
         agent.wsSend({ type: "remote_user_prompt", message: msg.message, images: msg.images }, ws);
+        agent.lastUserPrompt = { text: msg.message, isSteer: false, at: nowMs() };
         agent.send({ type: "prompt", message: msg.message, images: msg.images });
         break;
       case "abort":
@@ -541,6 +687,7 @@ wss.on("connection", (ws, req) => {
       case "steer":
         // Sync steer instruction to other connected clients in the same session
         agent.wsSend({ type: "remote_user_prompt", message: msg.message, isSteer: true }, ws);
+        agent.lastUserPrompt = { text: msg.message, isSteer: true, at: nowMs() };
         agent.send({ type: "steer", message: msg.message });
         break;
       case "set_session_name":
@@ -576,3 +723,22 @@ wss.on("connection", (ws, req) => {
     }
   });
 });
+
+// ---- Graceful shutdown: stop all background pi agents on exit ----
+function shutdownAllAgents(reason) {
+  console.log(`\n[pi-web-chat] ${reason}: stopping ${activeAgents.size} background pi agent(s)…`);
+  for (const a of [...activeAgents.values()]) {
+    try { a.stop(); } catch {}
+  }
+  clearInterval(heartbeatInterval);
+  try { wss.close(); } catch {}
+  try { httpServer.close(); } catch {}
+}
+process.on("SIGINT", () => { shutdownAllAgents("SIGINT"); process.exit(0); });
+process.on("SIGTERM", () => { shutdownAllAgents("SIGTERM"); process.exit(0); });
+process.on("exit", () => {
+  // best-effort: kill any still-living children synchronously on hard exit
+  for (const a of activeAgents.values()) {
+    try { a.proc && a.proc.kill("SIGKILL"); } catch {}
+  }
+});