@liguoshuai/pi-web-chat 2.2.0 → 2.4.0

package/docs/ARCHITECTURE.md

@@ -1,6 +1,6 @@
 # 架构设计文档
 
-> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.8.5 版本）。
+> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v2.3.0 版本）。
 
 ---
 
@@ -39,7 +39,7 @@
 **核心设计原则**：
 - **按 Session Key 池化进程**：以 `${cwd}:${resolvedSessionPath}` 作为唯一 Key，多标签页或多设备连接同一个 Session 时共享同一个后台 `PiAgent` 进程。
 - **后台持久化运行（Headless Persistence）**：网页断开（如关闭标签页）不会立即终止进程。只要 Agent 处于流式生成或有未响应请求状态，后台进程会坚持跑完当前任务。
-- **离线事件环形缓存与回放（Ring Buffer & Backfill）**：无客户端连接时，pi 输出的事件自动存入环形 Buffer（默认 2000 条）。客户端重连时通过 `backfill_start` → 离线事件 → `backfill_end` 进行增量补齐。
+- **离线事件环形缓存与回放（Ring Buffer & Backfill）**：无客户端连接时，pi 输出的事件自动存入环形 Buffer（默认 5000 条）。客户端重连时通过 `backfill_start` → 离线事件 → `backfill_end` 进行增量补齐。
 - **真正空闲回收（True-Idle Timeout）**：仅在“无 WebSocket 连接”且“进程彻底进入 idle（非 streaming、无挂起 RPC）”时，才启动 `IDLE_TIMEOUT_MS` 空闲回收倒计时。
 - **磁盘 JSONL 为唯一真理（Single Source of Truth）**：会话历史与树状分支全由 pi 本身维护在磁盘 `.jsonl` 文件中，Web 端通过 REST 接口与 RPC 消息与文件保持同步。
 - **`pi` 可执行文件自动探查与派生**：服务端通过 `resolvePiBin()` 自动定位全局安装的 `pi` 可执行文件（优先使用 `PI_BIN` 环境变量 -> 检查 `~/.npm-global/bin/pi` -> `/usr/local/bin/pi` -> `/usr/bin/pi` -> 系统 `PATH`），派生 `pi --mode rpc --session-dir ...` 子进程。

package/docs/CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [2.3.0] - 2026-08-31
+
+### Fixed & Improved
+- **后台异步长任务稳定性与持久化机制全面强化 (Background Async Persistence & Lifetime Fix)**：
+  - **移除 30 分钟无条件强杀定时器**：将 `MAX_AGENT_LIFETIME_MS` 默认设为 `0`（禁用硬超时杀进程）。若用户配置了正数生命周期上限，也会严格判断 `isBusy`（正在生成/执行工具中）与 `hasListeners`（仍有客户端监听），任务执行期间绝不强杀子进程。
+  - **扩大离线事件环形缓冲区**：将 `EVENT_BUFFER_SIZE` 默认容量从 2000 提升至 5000，保障长时间后台离线输出不丢帧。
+- **Web 端平滑多任务切换与静默转入后台 (Seamless Background Session Switch)**：
+  - 移除了在生成过程中新建会话（`startNewSession`）或侧边栏切换会话（`loadSession`）时的强制中断（`abortGeneration()`）逻辑。
+  - 切换或新建会话时，原会话平滑转入后台静默继续执行，并弹出轻提示告知用户。
+  - 修复了断线重连（`ws.onopen`）与离线事件增量回放（Backfill）之间的 DOM 渲染竞态条件，避免流式内容被意外清除。
+- **侧边栏会话后台执行状态感知 (Sidebar Background Execution Indicator)**：
+  - 服务端 `/api/sessions` 接口扩展返回 `isStreaming` 状态字段，精准反馈每个会话对应的后台 Agent 是否正在忙碌。
+  - Web 端侧边栏为正在后台生成中的会话实时展示 `⚡ 运行中` 呼吸动画状态徽标。
+  - 页面可见性恢复（`visibilitychange`）及定时后台状态轮询自动刷新各会话状态。
+
+---
+
 ## [2.2.0] - 2026-08-30
 
 ### Fixed & Improved

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",
@@ -40,12 +40,13 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@liguoshuai/pi-chat-protocol": "2.2.0",
-    "@liguoshuai/pi-chat-server": "2.2.0",
+    "@liguoshuai/pi-chat-protocol": "2.4.0",
+    "@liguoshuai/pi-chat-server": "2.4.0",
     "express": "^4.21.2",
     "ws": "^8.18.0"
   },
   "scripts": {
+    "build": "node --check server.js && node --check bin/pi-web-chat.js && node --check public/app.js",
     "start": "node server.js",
     "dev": "node --watch server.js",
     "test": "node --test"

package/public/app.js

@@ -448,7 +448,10 @@ function renderInlineMd(text) {
   flushList();
   flushPara();
   // restore inline code
-  outHtml = outHtml.replace(/\u0000CODE(\d+)\u0000/g, (_, n) => `<code>${escapeHtml(codeChunks[+n].slice(1, -1))}</code>`);
+  outHtml = outHtml.replace(/\u0000CODE(\d+)\u0000/g, (_, n) => {
+    const chunk = codeChunks[+n];
+    return chunk ? `<code>${escapeHtml(chunk.slice(1, -1))}</code>` : "";
+  });
   return outHtml;
 }
 
@@ -517,22 +520,90 @@ const el = (tag, props = {}, children = []) => {
   return n;
 };
 
+// ---- Message Time Formatter ----
+function formatMessageTime(ts) {
+  if (!ts) return "";
+  const d = (typeof ts === "number" || typeof ts === "string") ? new Date(ts) : ts;
+  if (!d || isNaN(d.getTime())) return "";
+
+  const now = new Date();
+  const isToday = d.getFullYear() === now.getFullYear() &&
+                  d.getMonth() === now.getMonth() &&
+                  d.getDate() === now.getDate();
+
+  const timeStr = d.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false });
+  if (isToday) {
+    return timeStr;
+  }
+  const isThisYear = d.getFullYear() === now.getFullYear();
+  if (isThisYear) {
+    const month = d.getMonth() + 1;
+    const date = d.getDate();
+    return `${month}月${date}日 ${timeStr}`;
+  }
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const date = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${date} ${timeStr}`;
+}
+
 // ---- Sidebar / sessions ----
 async function refreshSessions() {
   const cwd = state.cwd || "";
-  const res = await authFetch(`${API}/api/sessions?cwd=${encodeURIComponent(cwd)}`);
-  const data = await res.json();
-  renderSidebar(data.sessions || []);
+  try {
+    const res = await authFetch(`${API}/api/sessions?cwd=${encodeURIComponent(cwd)}`);
+    const data = await res.json();
+    renderSidebar(data.sessions || []);
+  } catch (err) {
+    console.warn("refreshSessions error:", err);
+    renderSidebar([]);
+  }
 }
 
 function renderSidebar(sessions) {
   const list = $("#sessionList");
+  if (!list) return;
   list.innerHTML = "";
-  if (sessions.length === 0) {
+
+  const hasCurrentInSessions = Boolean(state.currentSessionFile && sessions.some(s => s.file === state.currentSessionFile));
+
+  // If current session is a new/draft session not yet in the session list from REST API:
+  if (!hasCurrentInSessions && (!state.currentSessionFile || $("#emptyState")?.style.display !== "none" || state.streaming)) {
+    const draftTitle = $("#topSessionName")?.textContent || "新对话";
+    const isRunning = Boolean(state.streaming);
+    const runningBadge = isRunning ? el("span", { class: "session-running-badge", title: "任务正在后台生成中…" }, [
+      el("span", { class: "spinner-dot" }),
+      el("span", { text: "运行中" }),
+    ]) : null;
+
+    const titleEl = el("div", { class: "session-item-name" }, [
+      el("span", { text: draftTitle }),
+      ...(runningBadge ? [runningBadge] : []),
+    ]);
+
+    const draftItem = el("div", {
+      class: "session-item active draft-session",
+      dataset: { file: state.currentSessionFile || "" },
+      title: state.currentSessionFile || "新对话",
+      onclick: () => {
+        if (state.currentSessionFile) loadSession(state.currentSessionFile);
+      },
+    }, [
+      el("div", { class: "title" }, [
+        titleEl,
+        el("div", { class: "meta", text: `刚刚 · ${state.streaming ? 1 : 0} 条` }),
+      ]),
+    ]);
+    list.appendChild(draftItem);
+  }
+
+  if (sessions.length === 0 && list.children.length === 0) {
     list.appendChild(el("div", { class: "sidebar-empty", text: "没有会话记录" }));
     return;
   }
+
   sessions.forEach((s) => {
+    if (s.file === state.currentSessionFile && !hasCurrentInSessions) return;
     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" }) : "";
     
@@ -546,6 +617,17 @@ function renderSidebar(sessions) {
       },
     });
 
+    const isRunning = Boolean(s.isStreaming || (s.file === state.currentSessionFile && state.streaming));
+    const runningBadge = isRunning ? el("span", { class: "session-running-badge", title: "任务正在后台生成中…" }, [
+      el("span", { class: "spinner-dot" }),
+      el("span", { text: "运行中" }),
+    ]) : null;
+
+    const titleEl = el("div", { class: "session-item-name" }, [
+      el("span", { text: title }),
+      ...(runningBadge ? [runningBadge] : []),
+    ]);
+
     const item = el("div", {
       class: "session-item" + (s.file === state.currentSessionFile ? " active" : ""),
       dataset: { file: s.file },
@@ -553,7 +635,7 @@ function renderSidebar(sessions) {
       onclick: () => loadSession(s.file),
     }, [
       el("div", { class: "title" }, [
-        el("div", { class: "session-item-name", text: title }),
+        titleEl,
         el("div", { class: "meta", text: `${when} · ${s.messageCount || 0} 条` }),
       ]),
       btnDelete,
@@ -587,21 +669,36 @@ function filterSessions(query) {
   }
 }
 
-function startNewSession(askConfirm = true) {
-  if (state.streaming) {
-    if (askConfirm && !confirm("正在生成中，新建会话会终止当前操作，确定吗？")) return;
-    abortGeneration();
-  }
+function startNewSession() {
+  const wasStreaming = state.streaming;
   clearChat();
   showEmptyState(true);
   state.currentSessionFile = null;
+  state.streaming = false;
+  state.aborting = false;
+  state.streamingItems = [];
+  state.streamingMsg = null;
+  state.activeToolCalls.clear();
+  setComposerAborting(false);
   try {
     window.history.replaceState({}, "", window.location.pathname);
   } catch {}
-  connectWs({ explicitNewSession: true }); // no session -> pi creates a new one
   $("#topSessionName").textContent = "新对话";
+  if (wasStreaming) {
+    showToast("前一个会话已转入后台继续运行");
+  }
   // Mobile: close sidebar on new session
   if (window.innerWidth <= 768) closeSidebar();
+
+  // If WebSocket is already live, request new session directly without reconnect overhead
+  if (state.ws && state.ws.readyState === 1) {
+    sendWs({ type: "new_session" });
+    sendWs({ type: "get_state" });
+  } else {
+    connectWs({ explicitNewSession: true }); // no session -> pi creates a new one
+  }
+  // Instantly render optimistic new session at the top of left sidebar
+  renderSidebar([]);
   refreshSessions();
 }
 
@@ -683,8 +780,8 @@ async function syncSessionHistory(file, force = false) {
     const topName = data.sessionName || (data.header?.id ? baseName(file) : "新对话");
     $("#topSessionName").textContent = topName;
 
-    // Only overwrite chat if force is true or we're not actively streaming mid-turn live
-    if (force || !state.streaming) {
+    // Only overwrite chat if not actively backfilling
+    if (!state.isBackfilling && (force || !state.streaming)) {
       clearChat();
       const msgs = reconstructFromEntries(data.entries || []);
       showEmptyState(msgs.length === 0);
@@ -700,9 +797,8 @@ async function syncSessionHistory(file, force = false) {
 }
 
 async function loadSession(file) {
-  if (state.streaming) {
-    abortGeneration();
-  }
+  if (file === state.currentSessionFile) return;
+  const wasStreaming = state.streaming;
   state.currentSessionFile = file;
   state.streaming = false;
   state.aborting = false;
@@ -721,6 +817,9 @@ async function loadSession(file) {
   await syncSessionHistory(file, true);
   // Reconnect websocket pointed at this session so new prompts continue history.
   connectWs({ session: file });
+  if (wasStreaming) {
+    showToast("前一个会话已转入后台继续运行");
+  }
 }
 
 function reconstructFromEntries(entries) {
@@ -752,7 +851,7 @@ function reconstructFromEntries(entries) {
             url: c.data ? `data:${c.mimeType || "image/png"};base64,${c.data}` : (c.url || "")
           }));
       }
-      out.push({ role: "user", text: extractContentText(m.content), images, ts: m.timestamp });
+      out.push({ role: "user", text: extractContentText(m.content), images, ts: m.timestamp || e.timestamp });
     } else if (m.role === "assistant") {
       const rawContent = Array.isArray(m.content) ? m.content : (m.content ? [{ type: "text", text: String(m.content) }] : []);
       const content = rawContent.map(part => {
@@ -770,7 +869,7 @@ function reconstructFromEntries(entries) {
         } catch {}
         content.push({ type: "text", text: `⚠️ **生成失败**: ${errMsg}` });
       }
-      out.push({ role: "assistant", content, ts: m.timestamp, usage: m.usage });
+      out.push({ role: "assistant", content, ts: m.timestamp || e.timestamp, usage: m.usage });
     }
     // toolResult entries are attached directly to assistant toolCall parts, so they don't produce standalone messages
   }
@@ -1061,13 +1160,15 @@ function exportCurrentSession() {
 
   const msgs = chatInner.querySelectorAll(".msg");
   msgs.forEach(msg => {
+    const time = msg.querySelector(".msg-time")?.innerText || "";
+    const timeInfo = time ? ` (${time})` : "";
     if (msg.classList.contains("user")) {
       const isSteer = !!msg.querySelector(".steer-badge");
       const bubble = msg.querySelector(".bubble");
       const text = bubble ? bubble.innerText.replace("🧭 指导指令", "").trim() : "";
-      md += `### 👤 User${isSteer ? " (🧭 指导指令)" : ""}\n\n${text}\n\n`;
+      md += `### 👤 user${timeInfo}${isSteer ? " (🧭 指导指令)" : ""}\n\n${text}\n\n`;
     } else if (msg.classList.contains("assistant")) {
-      md += `### 🤖 pi\n\n`;
+      md += `### 🤖 pi${timeInfo}\n\n`;
       const thinking = msg.querySelector(".thinking-body");
       if (thinking && thinking.innerText.trim()) {
         md += `<details><summary>💭 思考过程</summary>\n\n${thinking.innerText.trim()}\n\n</details>\n\n`;
@@ -1102,6 +1203,10 @@ function exportCurrentSession() {
 function appendMessageNode(role, m) {
   if (role === "user") {
     const isSteer = m.isSteer || false;
+    const ts = m.ts || m.timestamp || Date.now();
+    const timeStr = formatMessageTime(ts);
+    const fullTimeStr = (ts && !isNaN(new Date(ts).getTime())) ? new Date(ts).toLocaleString("zh-CN") : "";
+
     const steerBadge = isSteer ? el("span", { class: "steer-badge", text: "🧭 指导指令" }) : null;
     const bubbleChildren = [steerBadge];
     if (m.text) {
@@ -1124,7 +1229,16 @@ function appendMessageNode(role, m) {
       bubbleChildren.push(imgsContainer);
     }
     const bubble = el("div", { class: "bubble" + (isSteer ? " steer" : "") }, bubbleChildren);
-    const node = el("div", { class: "msg user" }, [bubble]);
+
+    const roleChildren = [
+      el("span", { class: "role-name", text: "user" }),
+    ];
+    if (timeStr) {
+      roleChildren.push(el("span", { class: "msg-time", text: timeStr, title: fullTimeStr }));
+    }
+    const roleTag = el("div", { class: "role-tag user-role-tag" }, roleChildren);
+
+    const node = el("div", { class: "msg user" }, [roleTag, bubble]);
     $("#chat-inner").appendChild(node);
     scrollBottom();
     return node;
@@ -1133,6 +1247,10 @@ function appendMessageNode(role, m) {
 }
 
 function renderAssistantBlock(m) {
+  const ts = m.ts || m.timestamp || null;
+  const timeStr = formatMessageTime(ts);
+  const fullTimeStr = (ts && !isNaN(new Date(ts).getTime())) ? new Date(ts).toLocaleString("zh-CN") : "";
+
   // m.content is array of {type:text|thinking|toolCall}
   const fullText = extractContentText(m.content);
   const copyMsgBtn = el("button", {
@@ -1150,11 +1268,16 @@ function renderAssistantBlock(m) {
     el("span", { text: "复制全文" })
   ]);
 
+  const roleChildren = [
+    el("span", { class: "role-name", text: "pi" }),
+  ];
+  if (timeStr) {
+    roleChildren.push(el("span", { class: "msg-time", text: timeStr, title: fullTimeStr }));
+  }
+  roleChildren.push(copyMsgBtn);
+
   const node = el("div", { class: "msg assistant" }, [
-    el("div", { class: "role-tag" }, [
-      el("span", { text: "pi" }),
-      copyMsgBtn
-    ]),
+    el("div", { class: "role-tag" }, roleChildren),
     el("div", { class: "content" }),
   ]);
   const content = node.querySelector(".content");
@@ -1355,28 +1478,38 @@ function getStreamingFullText() {
 }
 
 // ---- Streaming: handle live assistant message ----
-function ensureStreamingMsg() {
+function ensureStreamingMsg(ts = Date.now()) {
   if (state.streamingMsg) return state.streamingMsg;
   showEmptyState(false);
+  const timeStr = formatMessageTime(ts);
+  const fullTimeStr = (ts && !isNaN(new Date(ts).getTime())) ? new Date(ts).toLocaleString("zh-CN") : "";
+
+  const copyBtn = el("button", {
+    class: "btn-copy-msg",
+    type: "button",
+    title: "复制回答全文",
+    onclick: async (e) => {
+      e.stopPropagation();
+      const text = getStreamingFullText();
+      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: "复制全文" })
+  ]);
+
+  const roleChildren = [
+    el("span", { class: "role-name", text: "pi" }),
+  ];
+  if (timeStr) {
+    roleChildren.push(el("span", { class: "msg-time", text: timeStr, title: fullTimeStr }));
+  }
+  roleChildren.push(copyBtn);
+
   const node = el("div", { class: "msg assistant" }, [
-    el("div", { class: "role-tag" }, [
-      el("span", { text: "pi" }),
-      el("button", {
-        class: "btn-copy-msg",
-        type: "button",
-        title: "复制回答全文",
-        onclick: async (e) => {
-          e.stopPropagation();
-          const text = getStreamingFullText();
-          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: "role-tag" }, roleChildren),
     el("div", { class: "content" }),
   ]);
   state.streamingMsg = node;
@@ -1621,8 +1754,8 @@ function connectWs(opts = {}) {
     wasDisconnected = false;
     reconnectAttempts = 0;
 
-    setTimeout(() => sendWs({ type: "get_state" }), 300);
-    setTimeout(() => sendWs({ type: "get_available_models" }), 500);
+    sendWs({ type: "get_state" });
+    sendWs({ type: "get_available_models" });
   };
 
   ws.onclose = () => {
@@ -1670,14 +1803,15 @@ function sendWs(obj) {
 
 function handlePiMessage(obj) {
   // Automatically bind to the session file as soon as pi allocates it on disk
-  if (obj.data?.sessionFile && obj.data.sessionFile !== state.currentSessionFile) {
-    state.currentSessionFile = obj.data.sessionFile;
+  const sessionFile = obj.data?.sessionFile || obj.sessionFile || obj.data?.sessionPath || obj.sessionPath;
+  if (sessionFile && sessionFile !== state.currentSessionFile) {
+    state.currentSessionFile = sessionFile;
     try {
-      const newUrl = window.location.pathname + "?session=" + encodeURIComponent(obj.data.sessionFile);
-      window.history.replaceState({ session: obj.data.sessionFile }, "", newUrl);
+      const newUrl = window.location.pathname + "?session=" + encodeURIComponent(sessionFile);
+      window.history.replaceState({ session: sessionFile }, "", newUrl);
     } catch {}
     if ($("#topSessionName").textContent === "新对话") {
-      $("#topSessionName").textContent = baseName(obj.data.sessionFile);
+      $("#topSessionName").textContent = baseName(sessionFile);
     }
     refreshSessions();
   }
@@ -1780,7 +1914,7 @@ function handlePiMessage(obj) {
       }
       break;
     case "remote_user_prompt":
-      appendMessageNode("user", { text: obj.message, images: obj.images, isSteer: obj.isSteer });
+      appendMessageNode("user", { text: obj.message, images: obj.images, isSteer: obj.isSteer, ts: obj.timestamp || Date.now() });
       break;
     case "agent_start":
       state.streaming = true;
@@ -2624,7 +2758,7 @@ function submitSteer() {
     return;
   }
 
-  appendMessageNode("user", { text, isSteer: true });
+  appendMessageNode("user", { text, isSteer: true, ts: Date.now() });
   ta.value = "";
   autoResize();
   updateComposerUI();
@@ -2670,8 +2804,9 @@ function submitPrompt() {
   }
 
   if (hint) hint.textContent = "pi 会执行命令与读写你的文件 —— 请注意操作内容。"; // restore default
+  const now = Date.now();
   // Render the user's message locally for instant feedback.
-  appendMessageNode("user", { text, images: state.attachedImages ? [...state.attachedImages] : [] });
+  appendMessageNode("user", { text, images: state.attachedImages ? [...state.attachedImages] : [], ts: now });
   
   ta.value = "";
   state.attachedImages = [];
@@ -2681,12 +2816,34 @@ function submitPrompt() {
   state.streaming = true;
   state.aborting = false;
   setComposerAborting(true);
-  ensureStreamingMsg();
+  ensureStreamingMsg(now);
   refreshStreamingContent();
 
   // Set session name from the first prompt of a brand-new session.
   if (state.currentSessionFile == null && text) {
-    sendWs({ type: "set_session_name", name: text.slice(0, 60).replace(/\s+/g, " ") });
+    const promptTitle = text.slice(0, 60).replace(/\s+/g, " ");
+    $("#topSessionName").textContent = promptTitle;
+    sendWs({ type: "set_session_name", name: promptTitle });
+
+    // Update draft session item in sidebar immediately
+    const list = $("#sessionList");
+    if (list) {
+      const draftItem = list.querySelector(".session-item.draft-session") || list.querySelector(".session-item.active");
+      if (draftItem) {
+        const nameSpan = draftItem.querySelector(".session-item-name span");
+        if (nameSpan) nameSpan.textContent = promptTitle;
+        let badge = draftItem.querySelector(".session-running-badge");
+        if (!badge) {
+          badge = el("span", { class: "session-running-badge", title: "任务正在后台生成中…" }, [
+            el("span", { class: "spinner-dot" }),
+            el("span", { text: "运行中" }),
+          ]);
+          draftItem.querySelector(".session-item-name")?.appendChild(badge);
+        }
+        const meta = draftItem.querySelector(".meta");
+        if (meta) meta.textContent = "刚刚 · 1 条";
+      }
+    }
   }
   sendWs({ type: "prompt", message: text, images: imagesToSend });
 }
@@ -2786,12 +2943,15 @@ async function init() {
   }
 
   const ta = $("#composer");
+  let isComposing = false;
+  ta.addEventListener("compositionstart", () => { isComposing = true; });
+  ta.addEventListener("compositionend", () => { isComposing = false; });
   ta.addEventListener("input", () => {
     autoResize();
     updateComposerUI();
   });
   ta.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" && !e.shiftKey && !e.isComposing && e.keyCode !== 229) {
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing && !isComposing && e.keyCode !== 229) {
       e.preventDefault();
       if (state.streaming) {
         if (ta.value.trim()) {
@@ -3080,6 +3240,7 @@ async function init() {
 
   document.addEventListener("visibilitychange", () => {
     if (document.visibilityState === "visible") {
+      refreshSessions();
       if (!state.wsConnected) {
         reconnectAttempts = 0;
         scheduleReconnect(0);
@@ -3093,6 +3254,7 @@ async function init() {
   });
 
   window.addEventListener("pageshow", () => {
+    refreshSessions();
     if (!state.wsConnected) {
       reconnectAttempts = 0;
       scheduleReconnect(0);
@@ -3101,6 +3263,13 @@ async function init() {
     }
   });
 
+  // Background session status polling
+  setInterval(() => {
+    if (document.visibilityState === "visible") {
+      refreshSessions();
+    }
+  }, 10000);
+
   // Global event delegation for code block copy buttons
   document.addEventListener("click", async (e) => {
     const btn = e.target.closest(".btn-copy-code");

package/public/style.css

@@ -141,9 +141,44 @@ body {
   line-height: 1.35;
 }
 .session-item .session-item-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-item .session-item-name > span:first-child {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+.session-running-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--accent, #3b82f6);
+  background: rgba(59, 130, 246, 0.12);
+  border: 1px solid rgba(59, 130, 246, 0.25);
+  padding: 2px 5px;
+  border-radius: 9999px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.session-running-badge .spinner-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--accent, #3b82f6);
+  animation: pulse-dot 1.2s infinite ease-in-out;
+}
+@keyframes pulse-dot {
+  0%, 100% { opacity: 0.3; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1.2); }
 }
 .session-item .meta {
   font-size: 11px;
@@ -494,6 +529,17 @@ body {
 .msg.user {
   align-items: flex-end;
 }
+.msg.user .role-tag {
+  font-size: 12px;
+  color: var(--text-dim);
+  font-weight: 600;
+  letter-spacing: .3px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 2px;
+  padding-right: 4px;
+}
 .msg.user .bubble {
   background: var(--bg-user-bubble);
   color: var(--user-text);
@@ -519,9 +565,19 @@ body {
 .msg.assistant { align-items: stretch; }
 .msg.assistant .role-tag {
   font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: .3px;
-  display: flex; align-items: center; gap: 6px;
+  display: flex; align-items: center; gap: 8px;
   margin-bottom: 2px;
 }
+.role-name {
+  font-weight: 600;
+}
+.msg-time {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-muted);
+  letter-spacing: 0;
+  user-select: none;
+}
 .msg.assistant .content {
   font-size: 15px; line-height: 1.65; color: var(--text);
   max-width: 100%; min-width: 0;
@@ -1760,10 +1816,15 @@ body {
     border-radius: 16px;
   }
 
+  .msg.user .role-tag,
   .msg.assistant .role-tag {
     font-size: 11px;
   }
 
+  .msg-time {
+    font-size: 10px;
+  }
+
   .msg.assistant .content {
     font-size: 14px;
     line-height: 1.6;