@liguoshuai/pi-web-chat 1.1.0 → 1.5.0

package/CHANGELOG.md

@@ -7,6 +7,73 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.5.0] - 2026-07-26
+
+### Added
+- **Idle timeout & concurrency control (内存保护增强)**：
+  - 新增 `IDLE_TIMEOUT_MS` 环境变量，可配置浏览器断开后保留 pi RPC 子进程的时间（默认 300000ms = 5 分钟，设为 0 即关闭自动清理）。
+  - 新增 `MAX_CONCURRENT_AGENTS` 环境变量，限制并发 pi 代理进程数（默认 0 = 无限制）。超限时新 WebSocket 连接返回 1013 (capacity) 并在控制台警告，防止多标签页把小内存机器挤爆。
+  - 新增 `IDLE_DROP_HEAP=1` 环境变量，空闲时尝试调用 `global.gc()` 主动释放 V8 堆，配合 `--expose-gc` 让内存更快回收到 OS，而非被动 swap。
+
+### Changed
+- `bin/pi-web-chat.js` 启动 server 时加入 `--expose-gc` 标志，支持上述主动内存释放。
+
+---
+
+## [1.4.2] - 2026-07-26
+
+### Fixed
+- **移动端顶栏常驻与布局优化 (Sticky Topbar & Mobile Layout)**：
+  - 顶栏 `.topbar` 设置 `position: sticky; top: 0; flex-shrink: 0; z-index: 20;`，确保在手机端滚动聊天、弹起软键盘或屏高变化时**始终常驻固定在屏幕最上方**，绝不随聊天区域滚动或被挤压。
+  - 采用 Dynamic Viewport Height（`100dvh`），解决 iOS Safari 与 Android 移动浏览器地址栏/底部导航栏显示隐藏时的页面抖动与错位。
+  - 优化移动端工作目录胶囊（CWD Pill）、模型胶囊（Model Pill）与会话标题的宽度挤压与弹性截断（`text-overflow: ellipsis`），小屏手机下依然精致美观。
+
+---
+
+## [1.4.1] - 2026-07-26
+
+### Fixed
+- **切换/加载历史会话模型精准显示**：
+  - 修复加载历史会话时由于后台进程启动时与 `get_state` 异步竞态导致右上角模型 Pill 显示不准确的问题。
+  - REST `/api/session` 接口现在自动从该会话的 JSONL 历史链中精确提取最后使用的模型 (`model`)。
+  - 切换会话时，前端能够零延迟（Instant）同步并渲染该会话对应的正确模型，同时支持 `model_select` 事件实时联动。
+
+---
+
+## [1.4.0] - 2026-07-26
+
+### Added
+- **多端与多浏览器同步协同 (Multi-Device & Multi-Browser Session Sharing)**：
+  - **WebSocket 多连接池**：服务端 `PiAgent` 进程升级为多连接池（`Set<WebSocket>`），电脑、手机、平板可同时挂载到同一个正在运行的会话，所有端实时同步接收 AI 流式回答。
+  - **多端消息双向广播**：手机端发送 Prompt 或插入指导指令（Steer）时，电脑端无需刷新即可实时呈现用户消息并同步流式输出 AI 答复。
+  - **URL 参数关联与一键分享**：选择会话时自动更新浏览器 URL 参数（`?session=...`），分享 URL 或在手机侧边栏选中同个会话即可直接加入同一会话同步协同。
+
+---
+
+## [1.3.0] - 2026-07-26
+
+### Added
+- **运行时实时插入/拦截指令 (Steer Instructions During Agent Turns)**：
+  - AI 正在思考、读取文件或执行命令（`streaming`）时，可以在输入框输入补充或修正要求。
+  - 输入框右侧会自动展示 **`🧭 插入指令`** 按钮，按 Enter 或点击按钮可实时将指令发送给 `pi` 代理进程（发送 `steer` 消息）。
+  - 聊天界面中插入的指令会展示带 **`🧭 指导指令`** 徽章的突出气泡，`pi` 接收后能在当前轮次中即时调整执行方向。
+  - 未输入内容时，按钮保持原有的 `■` 停止按钮功能。
+
+---
+
+## [1.2.0] - 2026-07-26
+
+### Added
+- **断线自动重连 (Auto Reconnect with Exponential Backoff)**：网页连接断开后前端启动指数退避自动重连（1s ~ 15s），并在侧边栏底部指示灯实时显示重连状态（`重连中 (x)`）。重连成功弹出“网络连接已恢复”提示。
+- **双向心跳检测 (Heartbeat Ping/Pong)**：服务端每 30 秒发送 WS Protocol Ping 清理僵尸连接，前端每 15 秒发送应用层 Ping，超时 45 秒无响应自动切断重连。
+- **重连会话状态同步 (State Restoration)**：重连后自动向服务端获取 `isStreaming` 状态。若生成已在后台完成则载入最新对话历史，若仍生成中则自动平滑接续流式输出。
+- **一键复制功能 (Copy Buttons)**：
+  - **代码块/命令复制**：所有 Markdown 渲染的代码块顶部增加语言标签与“复制”按钮。
+  - **工具调用指令复制**：在工具调用（如 `bash` 命令执行）卡片标题栏增加“复制”按钮，方便快速复制命令。
+  - **回答全文复制**：在 `pi` 角色标签右侧新增“复制全文”按钮。
+
+---
+
 ## [1.1.0] - 2026-07-26
 
 ### Added
@@ -30,27 +97,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **工具调用参数显示不全**：新增 `toolcall_delta` / `toolcall_end` 处理，用 `toolcall_end` 的最终 `toolCall.arguments` 刷新头部 args 显示。
 - **同一 agent 多轮 agent message 互相污染**：`message_start`(assistant) 重置本块的 text/thinking 累加器，避免上一轮工具调用与下一轮文本串到一起。
 
-### Added
-- 会话切换时右侧完整历史恢复（通过 REST `/api/session` 重建 parent 链）
-- 模型切换器（顶栏 pill，支持所有 pi 配置的模型）
-- Tool-call 折叠块（实时输出、可展开/折叠）
-- Thinking 折叠块
-- 发送按钮双态（发送/停止）+ 红色停止态
-- 新会话后侧边栏在 `agent_settled` 立即刷新（无需手动刷新页面）
-
-### Changed
-- 侧边栏会话项去除无意义的 `●` 圆点，改为 tooltip 显示完整 jsonl 路径
-- 发送按钮禁用逻辑：仅在 wsConnected=false 时禁用，而非 streaming 时
-
 ---
 
 ## [0.2.0] - 2026-07-19
 
 ### Added
-- **新建会话流程修复**：`btnNew` 点击后刷新侧边栏、清理流式状态、生成新 ws 代次
-- **WebSocket 代次机制**：`wsGen` 防止旧 socket 消息污染新上下文
-- **输入框红边提示**：ws 未连时提交会有 350ms 红色 flash
-- **连接状态文本动态更新**：「连接中…」→「已连接」/「已断开」
+- **新建会话流程修复**：`btnNew` 点击后刷新侧边栏、清理流式状态、生成新 ws 代次。
+- **WebSocket 代次机制**：`wsGen` 防止旧 socket 消息污染新上下文。
+- **输入框红边提示**：ws 未连时提交会有 350ms 红色 flash。
+- **连接状态文本动态更新**：「连接中…」→「已连接」/「已断开」。
 - **提交**：`5a8f036` "Fix new-session flow: ws generation guard + sidebar refresh + drop input"
 
 ### Fixed
@@ -96,4 +151,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 | **Deprecated** | 即将移除 |
 | **Removed**  | 已移除 |
 | **Fixed**    | Bug 修复 |
-| **Security** | 安全相关修复 |
+| **Security** | 安全相关修复 |

package/bin/pi-web-chat.js

@@ -52,7 +52,8 @@ function parseArgs(argv) {
 const opts = parseArgs(process.argv.slice(2));
 
 // Spawn server.js as a child so we can forward signals cleanly.
-const child = spawn("node", [SERVER], {
+// Use --expose-gc so idle agents can call global.gc() to release heap (IDLE_DROP_HEAP=1).
+const child = spawn("node", ["--expose-gc", SERVER], {
   cwd: opts.cwd,
   env: { ...process.env, PORT: String(opts.port) },
   stdio: "inherit",

package/package.json

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

@@ -172,7 +172,35 @@ async function confirmCwdChange() {
 
 // ---- Markdown render (small, safe renderer) ----
 function escapeHtml(s) {
-  return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+async function copyToClipboard(text) {
+  if (!text) return false;
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch (e) {
+      console.warn("navigator.clipboard.writeText failed:", e);
+    }
+  }
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.left = "-9999px";
+    ta.style.top = "-9999px";
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  } catch (e) {
+    console.error("Fallback copy error:", e);
+    return false;
+  }
 }
 
 function renderMarkdown(md) {
@@ -206,7 +234,18 @@ function renderMarkdown(md) {
   let html = "";
   for (const p of parts) {
     if (p.kind === "code") {
-      html += `<pre><code data-lang="${escapeHtml(p.lang)}">${escapeHtml(p.code)}</code></pre>`;
+      const lang = p.lang || "";
+      const displayLang = lang || "code";
+      html += `<div class="code-block-wrapper">` +
+        `<div class="code-block-header">` +
+          `<span class="code-block-lang">${escapeHtml(displayLang)}</span>` +
+          `<button class="btn-copy-code" type="button" aria-label="复制代码" title="复制代码">` +
+            `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>` +
+            `<span>复制</span>` +
+          `</button>` +
+        `</div>` +
+        `<pre><code data-lang="${escapeHtml(lang)}">${escapeHtml(p.code)}</code></pre>` +
+      `</div>`;
     } else {
       html += renderInlineMd(p.text);
     }
@@ -394,6 +433,10 @@ function closeSidebar() {
 
 async function loadSession(file) {
   state.currentSessionFile = file;
+  try {
+    const newUrl = window.location.pathname + "?session=" + encodeURIComponent(file);
+    window.history.replaceState({ session: file }, "", newUrl);
+  } catch {}
   // Mobile: close sidebar on selection
   if (window.innerWidth <= 768) {
     closeSidebar();
@@ -401,6 +444,12 @@ async function loadSession(file) {
   // pull transcript from REST then connect a fresh WS pointed at this session
   const res = await fetch(`${API}/api/session?file=${encodeURIComponent(file)}`);
   const data = await res.json();
+
+  if (data.model) {
+    state.currentModel = data.model;
+    renderModelPill();
+  }
+
   clearChat();
   document.querySelector("#emptyState").style.display = "none";
   const chat = $("#chat-inner");
@@ -479,9 +528,13 @@ function showEmptyState(show) {
 
 function appendMessageNode(role, m) {
   if (role === "user") {
-    const node = el("div", { class: "msg user" }, [
-      el("div", { class: "bubble", text: m.text }),
+    const isSteer = m.isSteer || false;
+    const steerBadge = isSteer ? el("span", { class: "steer-badge", text: "🧭 指导指令" }) : null;
+    const bubble = el("div", { class: "bubble" + (isSteer ? " steer" : "") }, [
+      steerBadge,
+      document.createTextNode(m.text || "")
     ]);
+    const node = el("div", { class: "msg user" }, [bubble]);
     $("#chat-inner").appendChild(node);
     scrollBottom();
     return node;
@@ -491,8 +544,27 @@ function appendMessageNode(role, m) {
 
 function renderAssistantBlock(m) {
   // m.content is array of {type:text|thinking|toolCall}
+  const fullText = extractContentText(m.content);
+  const copyMsgBtn = el("button", {
+    class: "btn-copy-msg",
+    type: "button",
+    title: "复制回答全文",
+    onclick: async (e) => {
+      e.stopPropagation();
+      if (await copyToClipboard(fullText)) {
+        showToast("已复制回答全文");
+      }
+    }
+  }, [
+    el("svg", { html: '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>' }),
+    el("span", { text: "复制全文" })
+  ]);
+
   const node = el("div", { class: "msg assistant" }, [
-    el("div", { class: "role-tag", text: "pi" }),
+    el("div", { class: "role-tag" }, [
+      el("span", { text: "pi" }),
+      copyMsgBtn
+    ]),
     el("div", { class: "content" }),
   ]);
   const content = node.querySelector(".content");
@@ -544,6 +616,19 @@ function makeThinkingBlock(thinkingText, isActivelyThinking = false) {
   return block;
 }
 
+function getToolCommandToCopy(call) {
+  if (!call) return "";
+  const args = call.arguments;
+  if (typeof args === "string") return args;
+  if (args && typeof args === "object") {
+    if (args.command) return String(args.command);
+    if (args.cmd) return String(args.cmd);
+    if (args.path) return String(args.path);
+    if (args.code) return String(args.code);
+  }
+  return summaryArgs(call.name, call.arguments);
+}
+
 function makeToolBlockFromCall(call) {
   const block = el("div", { class: "tool-block" });
   const hasResult = Boolean(call.result);
@@ -557,10 +642,33 @@ function makeToolBlockFromCall(call) {
   const stateText = hasResult ? (isError ? "错误" : "完成") : "…";
   const stateClass = "state" + (hasResult && isError ? " error" : "");
 
+  const cmdToCopy = getToolCommandToCopy(call);
+  const copyBtn = cmdToCopy ? el("button", {
+    class: "btn-copy-tool",
+    type: "button",
+    title: "复制指令/参数",
+    onclick: async (e) => {
+      e.stopPropagation();
+      if (await copyToClipboard(cmdToCopy)) {
+        copyBtn.classList.add("copied");
+        const span = copyBtn.querySelector("span");
+        if (span) span.textContent = "已复制";
+        setTimeout(() => {
+          copyBtn.classList.remove("copied");
+          if (span) span.textContent = "复制";
+        }, 1500);
+      }
+    }
+  }, [
+    el("svg", { html: '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>' }),
+    el("span", { text: "复制" })
+  ]) : null;
+
   const head = el("div", { class: "tool-head" }, [
     el("span", { class: "ic", text: "⚙" }),
     el("span", { class: "name", text: call.name }),
     el("span", { class: "args", text: summaryArgs(call.name, call.arguments) }),
+    copyBtn,
     el("span", { class: stateClass, text: stateText }),
   ]);
 
@@ -609,7 +717,26 @@ function ensureStreamingMsg() {
   if (state.streamingMsg) return state.streamingMsg;
   showEmptyState(false);
   const node = el("div", { class: "msg assistant" }, [
-    el("div", { class: "role-tag", text: "pi" }),
+    el("div", { class: "role-tag" }, [
+      el("span", { text: "pi" }),
+      el("button", {
+        class: "btn-copy-msg",
+        type: "button",
+        title: "复制回答全文",
+        onclick: async (e) => {
+          e.stopPropagation();
+          const contentEl = node.querySelector(".content");
+          if (!contentEl) return;
+          const text = contentEl.textContent || "";
+          if (await copyToClipboard(text)) {
+            showToast("已复制回答全文");
+          }
+        }
+      }, [
+        el("svg", { html: '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>' }),
+        el("span", { text: "复制全文" })
+      ])
+    ]),
     el("div", { class: "content" }),
   ]);
   state.streamingMsg = node;
@@ -672,8 +799,113 @@ function finalizeStreamingMsg() {
 // Each generation of WebSocket gets its own id; late stragglers from
 // a previous-generation ws are silently dropped to keep state consistent.
 let wsGen = 0;
+let pingTimer = null;
+let reconnectTimer = null;
+let reconnectAttempts = 0;
+let lastPongTime = Date.now();
+let isConnecting = false;
+let wasDisconnected = false;
+
+function setConnStatus(status, text) {
+  // status: 'connected', 'reconnecting', 'disconnected'
+  state.wsConnected = (status === "connected");
+  const dot = $("#connDot");
+  const label = $("#connLabel");
+  const connStatus = $("#connStatus");
+
+  if (dot) {
+    if (status === "connected") {
+      dot.style.color = "var(--accent)";
+    } else if (status === "reconnecting") {
+      dot.style.color = "var(--warning)";
+    } else {
+      dot.style.color = "var(--danger)";
+    }
+  }
+
+  if (label) {
+    if (text) {
+      label.textContent = text;
+    } else if (status === "connected") {
+      label.textContent = "已连接";
+    } else if (status === "reconnecting") {
+      label.textContent = "正在重连…";
+    } else {
+      label.textContent = "已断开";
+    }
+  }
+
+  if (connStatus) {
+    connStatus.title = status === "connected" ? "WebSocket 已连接" : "连接已断开，点击尝试重连";
+    connStatus.style.cursor = status === "connected" ? "default" : "pointer";
+  }
+
+  const btn = $("#sendBtn");
+  if (btn && !state.streaming) {
+    btn.disabled = (status !== "connected");
+  }
+}
+
+function startPingInterval() {
+  stopPingInterval();
+  lastPongTime = Date.now();
+  pingTimer = setInterval(() => {
+    if (state.ws && state.ws.readyState === WebSocket.OPEN) {
+      if (Date.now() - lastPongTime > 45000) {
+        console.warn("WebSocket 心跳超时，尝试断开并重连…");
+        try { state.ws.close(); } catch {}
+        return;
+      }
+      try {
+        state.ws.send(JSON.stringify({ type: "ping" }));
+      } catch {}
+    }
+  }, 15000);
+}
+
+function stopPingInterval() {
+  if (pingTimer) {
+    clearInterval(pingTimer);
+    pingTimer = null;
+  }
+}
+
+function scheduleReconnect(delayMs) {
+  if (reconnectTimer) {
+    if (delayMs === 0) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    } else {
+      return;
+    }
+  }
+
+  if (delayMs === undefined) {
+    reconnectAttempts++;
+    const base = Math.min(1000 * Math.pow(1.5, reconnectAttempts - 1), 15000);
+    const jitter = Math.random() * 500;
+    delayMs = Math.round(base + jitter);
+  }
+
+  setConnStatus("reconnecting", reconnectAttempts > 0 ? `重连中 (${reconnectAttempts})` : "正在重连…");
+
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    performReconnect();
+  }, delayMs);
+}
+
+function performReconnect() {
+  if (isConnecting) return;
+  connectWs({ isReconnect: true });
+}
 
 function connectWs(opts = {}) {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+
   if (state.ws) {
     try {
       // Suppress onclose so the connection indicator doesn't flicker to red
@@ -682,43 +914,78 @@ function connectWs(opts = {}) {
       state.ws.close();
     } catch {}
   }
+
+  isConnecting = true;
   const myGen = ++wsGen;
   const proto = location.protocol === "https:" ? "wss" : "ws";
   const cwd = encodeURIComponent(state.cwd || "");
-  const sess = opts.session ? `&session=${encodeURIComponent(opts.session)}` : "";
+
+  // Preserve active session if not explicitly cleared or provided
+  let targetSession = opts.session;
+  if (opts.explicitNewSession) {
+    targetSession = null;
+  } else if (targetSession === undefined) {
+    targetSession = state.currentSessionFile;
+  }
+
+  const sess = targetSession ? `&session=${encodeURIComponent(targetSession)}` : "";
+
   // When user clicks "new session", pre-flush any "stuck streaming" state
   // from the previous connection so the new connection starts clean.
-  if (!opts.session) {
+  if (opts.explicitNewSession) {
     state.streaming = false;
     state.streamingText = "";
     state.streamingThinking = "";
     state.streamingMsg = null;
     state.activeToolCalls.clear();
   }
+
   const url = `${proto}://${location.host}/ws?cwd=${cwd}${sess}`;
   const ws = new WebSocket(url);
   state.ws = ws;
   ws._gen = myGen;
-  const setConn = (ok) => {
-    if (ws._gen !== wsGen) return; // ignore stragglers from a previous socket
-    state.wsConnected = ok;
-    const dot = $("#connDot");
-    const label = $("#connLabel");
-    if (dot) dot.style.color = ok ? "var(--accent)" : "var(--danger)";
-    if (label) label.textContent = ok ? "已连接" : "已断开";
-    const btn = $("#sendBtn");
-    if (btn && !state.streaming) btn.disabled = !ok;
+
+  ws.onopen = () => {
+    if (ws._gen !== wsGen) return;
+    isConnecting = false;
+    setConnStatus("connected");
+    startPingInterval();
+
+    if (wasDisconnected || reconnectAttempts > 0) {
+      showToast("网络连接已恢复");
+    }
+    wasDisconnected = false;
+    reconnectAttempts = 0;
+
+    setTimeout(() => sendWs({ type: "get_state" }), 300);
+    setTimeout(() => sendWs({ type: "get_available_models" }), 500);
   };
-  ws.onopen = () => setConn(true);
+
   ws.onclose = () => {
+    stopPingInterval();
+    if (ws._gen !== wsGen) return;
+    isConnecting = false;
     if (ws._suppressOnclose) return;
-    setConn(false);
+
+    wasDisconnected = true;
+    setConnStatus("disconnected");
+    scheduleReconnect();
+  };
+
+  ws.onerror = () => {
+    stopPingInterval();
+    if (ws._gen !== wsGen) return;
+    isConnecting = false;
+    wasDisconnected = true;
+    setConnStatus("disconnected");
   };
-  ws.onerror = () => setConn(false);
+
   ws.onmessage = (ev) => {
-    if (ws._gen !== wsGen) return; // drop stragglers
+    if (ws._gen !== wsGen) return;
+    lastPongTime = Date.now();
     let obj;
     try { obj = JSON.parse(ev.data); } catch { return; }
+    if (obj.type === "pong") return;
     handlePiMessage(obj);
   };
 }
@@ -764,6 +1031,16 @@ function handlePiMessage(obj) {
   }
   // Events from pi.
   switch (obj.type) {
+    case "model_select":
+      if (obj.model) {
+        state.currentModel = obj.model;
+        renderModelPill();
+        renderModelMenu();
+      }
+      break;
+    case "remote_user_prompt":
+      appendMessageNode("user", { text: obj.message, isSteer: obj.isSteer });
+      break;
     case "agent_start":
       state.streaming = true;
       setComposerAborting(true);
@@ -919,11 +1196,31 @@ function updateState(d) {
   if (d?.model) { state.currentModel = d.model; renderModelPill(); }
   if (d?.thinkingLevel) state.thinkingLevel = d.thinkingLevel;
   $("#topSessionName").textContent = d?.sessionName || (d?.sessionFile ? baseName(d.sessionFile) : "新对话");
+
+  // Sync streaming state upon state updates (e.g. after reconnect)
+  if (d && typeof d.isStreaming === "boolean") {
+    if (d.isStreaming) {
+      if (!state.streaming) {
+        state.streaming = true;
+        setComposerAborting(true);
+        ensureStreamingMsg();
+      }
+    } else if (state.streaming) {
+      finalizeStreamingMsg();
+      state.streaming = false;
+      setComposerAborting(false);
+      if (state.currentSessionFile) {
+        loadSession(state.currentSessionFile);
+      }
+      refreshSessions();
+    }
+  }
 }
 
 function updateModels(models) {
   state.models = models;
   renderModelMenu();
+  renderModelPill();
 }
 
 function renderModelPill() {
@@ -931,7 +1228,14 @@ function renderModelPill() {
   const pill = $("#modelPill");
   if (!m) { pill.textContent = "选择模型"; return; }
   const provider = m.provider || "?";
-  const name = m.name || m.id;
+  let name = m.name || m.id;
+  if (state.models && state.models.length > 0) {
+    const found = state.models.find(item => item.id === m.id && item.provider === m.provider) ||
+                  state.models.find(item => item.id === m.id);
+    if (found && found.name) {
+      name = found.name;
+    }
+  }
   pill.textContent = `${provider} / ${name}`;
   pill.title = `当前模型: ${provider} / ${name} (${m.id})`;
 }
@@ -970,17 +1274,69 @@ function baseName(p) {
 }
 
 // ---- Composer ----
-function setComposerAborting(yes) {
-  const btn = $("#sendBtn");
-  if (yes) {
-    btn.classList.add("stop");
-    btn.disabled = false;
-    btn.textContent = "■";
+function updateComposerUI() {
+  const ta = $("#composer");
+  const text = ta ? ta.value.trim() : "";
+  const sendBtn = $("#sendBtn");
+  const steerBtn = $("#steerBtn");
+
+  if (state.streaming) {
+    if (sendBtn) {
+      sendBtn.classList.add("stop");
+      sendBtn.disabled = !state.wsConnected;
+      sendBtn.textContent = "■";
+      sendBtn.title = "中止当前生成";
+    }
+    if (steerBtn) {
+      if (text.length > 0) {
+        steerBtn.style.display = "inline-flex";
+        steerBtn.disabled = !state.wsConnected;
+      } else {
+        steerBtn.style.display = "none";
+      }
+    }
+    if (ta) ta.placeholder = "AI 正在运行中… 可在此输入补充/指导指令，按 Enter 或点击【插入指令】实时调整";
   } else {
-    btn.classList.remove("stop");
-    btn.disabled = false;
-    btn.textContent = "↑";
+    if (sendBtn) {
+      sendBtn.classList.remove("stop");
+      sendBtn.disabled = !state.wsConnected;
+      sendBtn.textContent = "↑";
+      sendBtn.title = "发送消息";
+    }
+    if (steerBtn) {
+      steerBtn.style.display = "none";
+    }
+    if (ta) ta.placeholder = "给 pi 发消息…  (Enter 发送，Shift+Enter 换行)";
+  }
+}
+
+function setComposerAborting(yes) {
+  updateComposerUI();
+}
+
+function submitSteer() {
+  const ta = $("#composer");
+  const text = ta.value.trim();
+  const hint = $(".composer-hint");
+  if (!text) return;
+
+  if (!state.wsConnected) {
+    if (hint) hint.textContent = "发送失败：WebSocket 未连接。正在尝试重连…";
+    scheduleReconnect(0);
+    return;
   }
+
+  appendMessageNode("user", { text, isSteer: true });
+  ta.value = "";
+  autoResize();
+  updateComposerUI();
+
+  if (hint) hint.textContent = "已插入指导指令！pi 将在当前轮次中实时接收并调整方向。";
+  setTimeout(() => {
+    if (hint) hint.textContent = "pi 会执行命令与读写你的文件 —— 请注意操作内容。";
+  }, 4000);
+
+  sendWs({ type: "steer", message: text });
 }
 
 function submitPrompt() {
@@ -990,11 +1346,16 @@ function submitPrompt() {
   if (!text) return;
   if (!state.wsConnected) {
     if (hint) hint.textContent = "发送失败：WebSocket 未连接。正在尝试重连…";
+    scheduleReconnect(0);
     const box = $("#composerInner");
     if (box) { box.style.boxShadow = "0 0 0 2px var(--danger)"; setTimeout(() => { box.style.boxShadow = ""; }, 350); }
     return;
   }
   if (state.streaming) {
+    if (text) {
+      submitSteer();
+      return;
+    }
     if (hint) hint.textContent = "中止当前生成中…";
     sendWs({ type: "abort" });
     return;
@@ -1038,21 +1399,50 @@ function init() {
     }
     clearChat();
     showEmptyState(true);
-    connectWs({}); // no session -> pi creates a new one
-    $("#topSessionName").textContent = "新对话";
     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();
   });
 
-  $("#sendBtn").addEventListener("click", submitPrompt);
+  $("#sendBtn").addEventListener("click", () => {
+    if (state.streaming) {
+      const ta = $("#composer");
+      if (ta && ta.value.trim()) {
+        submitSteer();
+      } else {
+        submitPrompt();
+      }
+    } else {
+      submitPrompt();
+    }
+  });
+
+  const steerBtnEl = $("#steerBtn");
+  if (steerBtnEl) {
+    steerBtnEl.addEventListener("click", submitSteer);
+  }
+
   const ta = $("#composer");
-  ta.addEventListener("input", autoResize);
+  ta.addEventListener("input", () => {
+    autoResize();
+    updateComposerUI();
+  });
   ta.addEventListener("keydown", (e) => {
     if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
       e.preventDefault();
-      submitPrompt();
+      if (state.streaming) {
+        if (ta.value.trim()) {
+          submitSteer();
+        }
+      } else {
+        submitPrompt();
+      }
     }
   });
 
@@ -1146,6 +1536,63 @@ function init() {
   // Load server config & restore saved CWD
   loadServerConfig();
 
+  // Status badge click to reconnect
+  const connStatusEl = $("#connStatus");
+  if (connStatusEl) {
+    connStatusEl.addEventListener("click", () => {
+      if (!state.wsConnected) {
+        showToast("正在尝试重新连接…");
+        reconnectAttempts = 0;
+        scheduleReconnect(0);
+      }
+    });
+  }
+
+  // Auto reconnect on network status / visibility change
+  window.addEventListener("online", () => {
+    if (!state.wsConnected) {
+      reconnectAttempts = 0;
+      scheduleReconnect(0);
+    }
+  });
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") {
+      if (!state.wsConnected) {
+        reconnectAttempts = 0;
+        scheduleReconnect(0);
+      } else {
+        try { state.ws.send(JSON.stringify({ type: "ping" })); } catch {}
+      }
+    }
+  });
+
+  // Global event delegation for code block copy buttons
+  document.addEventListener("click", async (e) => {
+    const btn = e.target.closest(".btn-copy-code");
+    if (!btn) return;
+    e.stopPropagation();
+
+    const wrapper = btn.closest(".code-block-wrapper");
+    if (!wrapper) return;
+
+    const codeEl = wrapper.querySelector("pre code");
+    if (!codeEl) return;
+
+    const codeText = codeEl.textContent;
+    if (await copyToClipboard(codeText)) {
+      btn.classList.add("copied");
+      const span = btn.querySelector("span");
+      if (span) span.textContent = "已复制!";
+      setTimeout(() => {
+        btn.classList.remove("copied");
+        if (span) span.textContent = "复制";
+      }, 1500);
+    } else {
+      showToast("复制失败");
+    }
+  });
+
   refreshSessions();
   // start in the disconnected state; connectWs will flip to green on open.
   const initDot = $("#connDot");
@@ -1153,8 +1600,15 @@ function init() {
   if (initDot) initDot.style.color = "var(--danger)";
   if (initLabel) initLabel.textContent = "连接中…";
   $("#sendBtn").disabled = true;
-  connectWs({});
-  showEmptyState(true);
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const initialSession = urlParams.get("session") || urlParams.get("file");
+  if (initialSession) {
+    loadSession(initialSession);
+  } else {
+    connectWs({});
+    showEmptyState(true);
+  }
   // Pull the current pi state (model, session id, thinking level) once the
   // socket is open. connectWs() registers onopen asynchronously; defer long
   // enough that the writable is ready. (An earlier version wrote the `\n` as

package/public/index.html

@@ -22,7 +22,7 @@
       </div>
       <div class="session-list" id="sessionList"></div>
       <div class="sidebar-bottom">
-        <div><span id="connDot" style="color: var(--danger);">●</span>&nbsp; <span id="connLabel">连接中…</span></div>
+        <div id="connStatus" class="conn-status" title="点击可重新连接"><span id="connDot" style="color: var(--danger);">●</span>&nbsp;<span id="connLabel">连接中…</span></div>
         <div style="margin-top:4px;"><a href="https://pi.dev" target="_blank" rel="noopener">pi.dev</a></div>
       </div>
     </aside>
@@ -68,6 +68,10 @@
       <div class="composer">
         <div class="composer-inner" id="composerInner">
           <textarea id="composer" rows="1" placeholder="给 pi 发消息…  (Enter 发送，Shift+Enter 换行)"></textarea>
+          <button class="steer-btn" id="steerBtn" title="在 AI 运行过程中插入指导指令" style="display:none;">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>
+            <span>插入指令</span>
+          </button>
           <button class="send-btn" id="sendBtn" title="发送">↑</button>
         </div>
         <div class="composer-hint">pi 会执行命令与读写你的文件 —— 请注意操作内容。</div>

package/public/style.css

@@ -17,6 +17,7 @@
   --thinking-bg: #1c1c1c;
   --thinking-border: #444;
   --danger: #ef4444;
+  --warning: #f59e0b;
   --radius: 14px;
 }
 
@@ -34,6 +35,7 @@ body {
   display: flex;
   width: 100vw;
   height: 100vh;
+  height: 100dvh;
   overflow: hidden;
   position: relative;
   background: var(--bg);
@@ -139,6 +141,15 @@ body {
 }
 .sidebar-bottom a { color: var(--text-muted); text-decoration: none; }
 .sidebar-bottom a:hover { color: var(--text); }
+.conn-status {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  transition: opacity 0.15s ease;
+}
+.conn-status[style*="cursor: pointer"]:hover {
+  opacity: 0.85;
+}
 
 /* ---------- Sidebar Overlay (mobile-only drawer backdrop) ---------- */
 .sidebar-overlay {
@@ -163,8 +174,10 @@ body {
   padding: 0 16px;
   gap: 12px;
   background: var(--bg);
-  z-index: 2;
-  position: relative;
+  z-index: 20;
+  position: sticky;
+  top: 0;
+  flex-shrink: 0;
 }
 .topbar .session-name {
   font-size: 15px;
@@ -254,6 +267,17 @@ body {
   line-height: 1.55;
   font-size: 15px;
 }
+.msg.user .bubble.steer {
+  border: 1px solid var(--accent);
+  background: rgba(16, 163, 127, 0.12);
+}
+.steer-badge {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  margin-bottom: 4px;
+}
 .msg.assistant { align-items: stretch; }
 .msg.assistant .role-tag {
   font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: .3px;
@@ -278,6 +302,73 @@ body {
   background: #2a2a2a; padding: 2px 6px; border-radius: 4px;
 }
 .msg.assistant .content pre code { background: transparent; padding: 0; }
+
+/* Code block wrapper and copy button */
+.code-block-wrapper {
+  position: relative;
+  background: #0d0d0d;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  margin: 12px 0;
+  overflow: hidden;
+}
+.code-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  background: #181818;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-dim);
+  user-select: none;
+}
+.code-block-lang {
+  font-family: "SF Mono", Menlo, Consolas, monospace;
+  font-size: 11px;
+  text-transform: lowercase;
+  color: var(--text-muted);
+}
+.code-block-wrapper pre {
+  margin: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  padding: 12px 14px;
+  overflow-x: auto;
+}
+
+.btn-copy-code, .btn-copy-msg, .btn-copy-tool {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+.btn-copy-msg, .btn-copy-tool {
+  color: var(--text-dim);
+}
+.btn-copy-msg {
+  margin-left: auto;
+}
+.btn-copy-code:hover, .btn-copy-msg:hover, .btn-copy-tool:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.btn-copy-code.copied, .btn-copy-msg.copied, .btn-copy-tool.copied {
+  color: var(--accent);
+}
+.btn-copy-code svg, .btn-copy-msg svg, .btn-copy-tool svg {
+  width: 12px;
+  height: 12px;
+}
 .msg.assistant .content ul, .msg.assistant .content ol { margin: 8px 0 12px 24px; }
 .msg.assistant .content li { margin: 4px 0; }
 .msg.assistant .content h1, .msg.assistant .content h2, .msg.assistant .content h3 {
@@ -457,6 +548,35 @@ body {
 }
 .composer .send-btn:disabled { background: #3a3a3a; color: #6f6f6f; cursor: not-allowed; }
 .composer .send-btn.stop { background: var(--danger); }
+.composer .steer-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 32px;
+  border-radius: 16px;
+  border: none;
+  cursor: pointer;
+  background: var(--accent);
+  color: #fff;
+  padding: 0 12px;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  transition: background .15s, opacity .15s, transform .1s;
+  user-select: none;
+}
+.composer .steer-btn:hover {
+  background: var(--accent-hover);
+}
+.composer .steer-btn:disabled {
+  background: #3a3a3a;
+  color: #6f6f6f;
+  cursor: not-allowed;
+}
+.composer .steer-btn svg {
+  width: 13px;
+  height: 13px;
+}
 .composer-hint {
   text-align: center; color: var(--text-dim); font-size: 11px; margin-top: 10px; max-width: 820px; margin-left: auto; margin-right: auto;
 }
@@ -689,40 +809,53 @@ body {
 
   /* Topbar Mobile Adjustments */
   .topbar {
-    height: 52px;
-    padding: 0 12px;
-    gap: 8px;
+    height: 50px;
+    padding: 0 8px;
+    gap: 6px;
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background: var(--bg);
   }
 
   .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 2px;
   }
 
   #cwdPillWrap {
-    padding: 5px 8px;
+    padding: 4px 8px;
     font-size: 11px;
-    max-width: 110px;
+    max-width: 95px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .model-pill {
-    padding: 5px 10px;
+    padding: 4px 8px;
     font-size: 11px;
-    max-width: 100px;
+    max-width: 105px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    flex-shrink: 0;
   }
 
   /* Model Dropdown Menu Mobile Adjustments */
   .model-menu {
-    width: calc(100vw - 24px);
-    right: 12px;
-    left: 12px;
-    top: 48px;
+    width: calc(100vw - 16px);
+    right: 8px;
+    left: 8px;
+    top: 46px;
     max-height: 280px;
   }
 

package/server.js

@@ -42,12 +42,47 @@ 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.
+const IDLE_TIMEOUT_MS = (() => {
+  const raw = process.env.IDLE_TIMEOUT_MS;
+  if (raw === undefined || raw === "") return 5 * 60 * 1000;
+  const n = Number(raw);
+  if (!Number.isFinite(n) || n < 0) {
+    console.warn(`[pi-web-chat] Invalid IDLE_TIMEOUT_MS="${raw}", falling back to 300000`);
+    return 5 * 60 * 1000;
+  }
+  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.
+const MAX_CONCURRENT_AGENTS = (() => {
+  const raw = process.env.MAX_CONCURRENT_AGENTS;
+  if (raw === undefined || raw === "") return 0; // 0 = unlimited (back-compat)
+  const n = Number(raw);
+  if (!Number.isInteger(n) || n < 0) {
+    console.warn(`[pi-web-chat] Invalid MAX_CONCURRENT_AGENTS="${raw}", falling back to 0 (unlimited)`);
+    return 0;
+  }
+  return n;
+})();
+
+// If true, when pi becomes idle (no WebSocket attached) we attempt to give the
+// OS an early hint that this agent's memory is reclaimable. Node has no direct
+// API for this, but --expose-gc + global.gc() drops the V8 heap lazily. When
+// enabled, idle agents will voluntarily release heap before being killed by the
+// 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";
+
 // Active pi RPC processes pooled by session key (`${cwd}:${resolvedSessionPath}`)
 const activeAgents = new Map();
 
 class PiAgent {
   constructor(cwd) {
-    this.ws = null;
+    this.sockets = new Set();
     this.cwd = normalizeCwd(cwd);
     this.sessionKey = null;
     this.reqId = 0;
@@ -59,15 +94,23 @@ class PiAgent {
   }
 
   attachWs(ws) {
-    this.ws = ws;
+    this.sockets.add(ws);
     this.cancelCleanup();
   }
 
   detachWs(ws) {
-    if (this.ws === ws) {
-      this.ws = null;
-      // Keep process alive for 5 minutes in case browser refreshes or reconnects
-      this.scheduleCleanup(5 * 60 * 1000);
+    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.
+        try { if (typeof global.gc === "function") global.gc(); } catch {}
+      }
     }
   }
 
@@ -84,8 +127,19 @@ class PiAgent {
 
   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 (key=${this.sessionKey || "unkeyed"})`);
+      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.
+      if (IDLE_DROP_HEAP) {
+        try { if (typeof global.gc === "function") global.gc(); } catch {}
+      }
       this.stop();
     }, delayMs);
   }
@@ -108,7 +162,8 @@ class PiAgent {
       this.alive = false;
       console.error(`[pi spawn error]`, err);
       this.wsSend({ type: "pi_exit", error: err.message });
-      try { this.ws && this.ws.close(); } catch {}
+      for (const s of this.sockets) { try { s.close(); } catch {} }
+      this.sockets.clear();
     });
     this.proc.stdout.on("data", (d) => this.onStdout(d));
     this.proc.stderr.on("data", (d) => {
@@ -119,7 +174,8 @@ class PiAgent {
       console.log(`pi exited (code=${code})`);
       this.wsSend({ type: "pi_exit", code });
       if (this.sessionKey) activeAgents.delete(this.sessionKey);
-      try { this.ws && this.ws.close(); } catch {}
+      for (const s of this.sockets) { try { s.close(); } catch {} }
+      this.sockets.clear();
     });
   }
 
@@ -174,12 +230,15 @@ class PiAgent {
     this.proc.stdin.write(JSON.stringify(cmd) + "\n");
   }
 
-  wsSend(obj) {
-    if (this.ws && this.ws.readyState === 1) {
-      try {
-        this.ws.send(JSON.stringify(obj));
-      } catch (e) {
-        console.error("wsSend error", e);
+  wsSend(obj, excludeSocket = null) {
+    const payload = typeof obj === "string" ? obj : JSON.stringify(obj);
+    for (const ws of this.sockets) {
+      if (ws !== excludeSocket && ws.readyState === 1) {
+        try {
+          ws.send(payload);
+        } catch (e) {
+          console.error("wsSend error", e);
+        }
       }
     }
   }
@@ -190,6 +249,8 @@ class PiAgent {
     if (this.sessionKey) {
       activeAgents.delete(this.sessionKey);
     }
+    for (const s of this.sockets) { try { s.close(); } catch {} }
+    this.sockets.clear();
     try { this.proc && this.proc.kill("SIGTERM"); } catch {}
   }
 }
@@ -353,7 +414,30 @@ app.get("/api/session", async (req, res) => {
       entryChain.unshift(e);
       cur = e.parentId;
     }
-    res.json({ header, entries: entryChain });
+
+    // Extract the active model used in this session chain
+    let sessionModel = null;
+    for (let i = entryChain.length - 1; i >= 0; i--) {
+      const e = entryChain[i];
+      if (e.type === "model_change" && (e.modelId || e.model)) {
+        sessionModel = {
+          provider: e.provider || "",
+          id: e.modelId || e.model,
+          name: e.modelId || e.model
+        };
+        break;
+      }
+      if (e.type === "message" && e.message && e.message.role === "assistant" && e.message.model) {
+        sessionModel = {
+          provider: e.message.provider || e.provider || "",
+          id: e.message.model,
+          name: e.message.model
+        };
+        break;
+      }
+    }
+
+    res.json({ header, entries: entryChain, model: sessionModel });
   } catch (e) {
     console.error(e);
     res.status(500).json({ error: String(e) });
@@ -366,7 +450,32 @@ const httpServer = app.listen(PORT, () => {
 });
 
 const wss = new WebSocketServer({ server: httpServer, path: "/ws" });
+
+// WebSocket server heartbeat (ping/pong at protocol level)
+const heartbeatInterval = setInterval(() => {
+  wss.clients.forEach((ws) => {
+    if (ws.isAlive === false) {
+      console.log("Terminating unresponsive WebSocket client");
+      if (ws.piAgent) {
+        ws.piAgent.detachWs(ws);
+      }
+      return ws.terminate();
+    }
+    ws.isAlive = false;
+    try { ws.ping(); } catch {}
+  });
+}, 30000);
+
+wss.on("close", () => {
+  clearInterval(heartbeatInterval);
+});
+
 wss.on("connection", (ws, req) => {
+  ws.isAlive = true;
+  ws.on("pong", () => {
+    ws.isAlive = true;
+  });
+
   const url = new URL(req.url, "http://x");
   const cwd = normalizeCwd(url.searchParams.get("cwd"));
   const session = url.searchParams.get("session") || null;
@@ -378,6 +487,23 @@ wss.on("connection", (ws, req) => {
     console.log(`ws re-attaching to existing pi process for key=${key}`);
     agent.attachWs(ws);
   } else {
+    // Enforce concurrent-agent cap before spawn. We count *all* live agents,
+    // not just this key, because each represents one pi RPC subprocess in
+    // memory. The cap protects small-memory hosts from runaway browser tabs.
+    if (MAX_CONCURRENT_AGENTS > 0) {
+      let live = 0;
+      for (const a of activeAgents.values()) if (a.alive) live++;
+      if (live >= MAX_CONCURRENT_AGENTS) {
+        const msg = `Server is at capacity (${live}/${MAX_CONCURRENT_AGENTS} pi agents). ` +
+                    `Close another tab or raise MAX_CONCURRENT_AGENTS.`;
+        console.warn(`[pi-web-chat] refusing new ws: ${msg}`);
+        try {
+          ws.send(JSON.stringify({ type: "error", code: "capacity", message: msg }));
+        } catch {}
+        try { ws.close(1013, "capacity"); } catch {} // 1013 = "try again later"
+        return;
+      }
+    }
     agent = new PiAgent(cwd);
     agent.start();
     agent.attachWs(ws);
@@ -392,8 +518,14 @@ wss.on("connection", (ws, req) => {
   ws.on("message", (raw) => {
     let msg;
     try { msg = JSON.parse(raw.toString()); } catch { return; }
+    if (msg.type === "ping") {
+      try { ws.send(JSON.stringify({ type: "pong" })); } catch {}
+      return;
+    }
     switch (msg.type) {
       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.send({ type: "prompt", message: msg.message, images: msg.images });
         break;
       case "abort":
@@ -407,6 +539,8 @@ wss.on("connection", (ws, req) => {
         agent.send({ type: "switch_session", sessionPath: msg.sessionPath });
         break;
       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.send({ type: "steer", message: msg.message });
         break;
       case "set_session_name":