@liguoshuai/pi-web-chat 2.5.1 → 2.9.0

package/docs/CHANGELOG.md

@@ -7,6 +7,74 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [2.9.0] - 2026-09-02
+
+### Added
+- **思考耗时与执行耗时多端展示特性 (Thinking & Execution Duration Display)**：
+  - **Web 端 (`clients/web`)**：
+    - 思考过程块 (`.thinking-block`)：流式思考进行中实时显示动态耗时（例如 `3.2s`），思考完成显示完整用时徽章（例如 `用时 3.2s`）。
+    - 工具执行块 (`.tool-block`)：执行中显示动态计时（例如 `执行中 · 1.2s`），执行完毕显示最终耗时（例如 `完成 · 1.2s` 或 `错误 · 0.8s`）。
+    - 助手回复消息头部 (`.role-tag`)：实时显示本次回答生成总耗时，并在生成完成后展示总耗时（例如 `耗时 4.5s`）。
+    - 历史会话加载 (`reconstructFromEntries`)：支持自动从历史日志计算各工具调用耗时与助手生成总耗时并渲染。
+  - **Android 原生端 (`clients/android`)**：
+    - `ChatMessage` 与 `ToolCall` 模型扩充思考用时 (`thinkingDurationMs`) 与执行耗时 (`durationMs`, `turnDurationMs`) 属性。
+    - Compose 界面中的 `ThinkingBlock`、`ToolCallBlock` 以及 `MessageBubble` 均支持清晰展示思考耗时、工具执行耗时与回答生成总用时。
+    - 历史会话加载支持还原思考与工具执行耗时。
+  - **HarmonyOS 鸿蒙原生端 (`clients/harmony`)**：
+    - `ChatMessage` 增加 `thinkingDuration` 与 `turnDuration` 属性支持。
+    - `Index.ets` 在思考过程与助手回复头部优雅展示思考耗时与执行总耗时。
+  - **跨端协议与公共库 (`@liguoshuai/pi-chat-protocol`)**：
+    - 新增跨端标准耗时格式化函数 `formatDuration(ms)` 与单元测试。
+
+### Changed
+- 全端版本号统一升级至 2.9.0（Monorepo Lockstep：Root / Protocol / Server / Web / Android / HarmonyOS）。
+
+---
+
+## [2.8.0] - 2026-09-02
+
+### Added
+- 前端思考过程与工具调用块时间戳显示：在思考过程块和工具调用块中添加时间戳，格式为当天 HH:mm，跨天 MM-dd HH:mm。
+
+## [2.7.0] - 2026-09-01
+
+### Added
+- **网关 REST CORS 跨域支持与预检支持 (`server`)**：
+  - 在 Express 网关服务中增加标准 CORS 拦截器，支持自定义 `ALLOWED_ORIGINS` 配置与通配放行，支持 `OPTIONS` preflight 预检请求与相关请求头（`Authorization`, `Content-Type`, `x-api-token`）。
+- **服务端环境变量自动检测与多宿主兼容 (`server`)**：
+  - 服务端配置模块增加自动检测并读取根目录或包内 `.env` 文件的能力。
+  - 完善 Windows 宿主机上的 `pi` 执行文件解析（`.cmd` / `.exe`）与 `spawn` 平台兼容性。
+- **Web 端 PWA (Progressive Web App) 支持 (`clients/web`)**：
+  - 新增 `manifest.webmanifest` 与高清矢量 `icon.svg`，支持在手机与桌面浏览器中一键“添加到主屏幕”，享受沉浸式应用体验。
+- **移动端指数退避断线重连 (`clients/android` & `clients/harmony`)**：
+  - Android 原生端 (`WebSocketClient.kt`) 与 HarmonyOS 鸿蒙原生端 (`WebSocketManager.ets`) 统一引入 Exponential Backoff + Jitter（指数退避与随机抖动重连算法），有效防止服务端重启或网络抖动时的瞬时并发重连风暴。
+- **CI 工作流强化 (`.github/workflows/ci.yml`)**：
+  - 在 GitHub Actions 中增加 Android 原生端自动化构建与依赖检查（`gradlew assembleDebug`）。
+
+### Changed
+- 全端版本号统一升级至 2.7.0（Monorepo Lockstep：Root / Protocol / Server / Web / Android / HarmonyOS）。
+
+---
+
+## [2.6.0] - 2026-09-01
+
+### Added
+- **跨端协议增强与强类型声明 (`@liguoshuai/pi-chat-protocol`)**：
+  - 新增 `createBackfillStartMessage` 与 `createBackfillEndMessage` 协议消息构造器，支持在断线重连回放中透传 `overflowed` 标志。
+  - 新增 `ToolCallPayload` 与 `ToolResultPayload` 强类型接口，增强跨端工具调用的类型安全性。
+  - 在 Android (`PiChatProtocol.kt`) 与 HarmonyOS (`PiProtocol.ets`) 客户端协议模型中同步补齐 `overflowed` 等字段。
+- **网关断线溢出检测与客户端自愈补偿 (`server` & `clients/web`)**：
+  - 网关 `PiAgent` 增加事件环形缓冲区溢出状态跟踪（`hasBufferOverflowed`），在客户端重连事件回放结束（`backfill_end`）时明确通知客户端。
+  - Web 客户端侦测到 `overflowed: true` 时，自动在后台触发增量/完整历史记录无感同步（`syncSessionHistory`），彻底杜绝网络严重抖动或长时间离线导致的消息截断。
+- **Web 前端流式渲染性能与快捷键体验优化 (`clients/web`)**：
+  - 流式更新渲染全面统一采用 `requestAnimationFrame` 防抖批量刷新（`refreshStreamingContentDebounced`），消除高频 token 吐出时的页面重排重绘瓶颈。
+  - 新增 `Cmd/Ctrl + Shift + O` 快捷新建会话别名，适配主流 AI 交互习惯。
+
+### Changed
+- 全端版本号统一升级至 2.6.0（Monorepo Lockstep：Root / Protocol / Server / Web / Android / HarmonyOS）。
+
+---
+
 ## [2.5.1] - 2026-09-01
 
 ### Added

package/package.json

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

package/public/app.js

@@ -75,6 +75,8 @@ const state = {
   isBackfilling: false,
   aborting: false,
   attachedImages: [], // Array of { data: string (base64), mimeType: string, url: string }
+  turnStartedAt: null,
+  streamingMsgDurationEl: null,
 };
 
 let toastTimer = null;
@@ -547,6 +549,52 @@ function formatMessageTime(ts) {
   return `${year}-${month}-${date} ${timeStr}`;
 }
 
+// ---- Duration Formatter ----
+function formatDuration(ms) {
+  if (ms == null || isNaN(ms) || ms < 0) return "";
+  if (ms < 1000) {
+    return `${(ms / 1000).toFixed(1)}s`;
+  }
+  if (ms < 60000) {
+    return `${(ms / 1000).toFixed(1)}s`;
+  }
+  const mins = Math.floor(ms / 60000);
+  const secs = Math.round((ms % 60000) / 1000);
+  return `${mins}m ${secs}s`;
+}
+
+let liveTimerInterval = null;
+function startStreamingTimer() {
+  if (liveTimerInterval) return;
+  liveTimerInterval = setInterval(() => {
+    const now = Date.now();
+    if (state.turnStartedAt && state.streamingMsgDurationEl) {
+      state.streamingMsgDurationEl.textContent = formatDuration(now - state.turnStartedAt);
+    }
+    const liveThinking = document.querySelectorAll(".thinking-duration.live");
+    liveThinking.forEach((el) => {
+      if (el._startedAt) {
+        el.textContent = formatDuration(now - el._startedAt);
+        el.style.display = "";
+      }
+    });
+    const liveTools = document.querySelectorAll(".tool-duration.live");
+    liveTools.forEach((el) => {
+      if (el._startedAt) {
+        el.textContent = formatDuration(now - el._startedAt);
+        el.style.display = "";
+      }
+    });
+  }, 100);
+}
+
+function stopStreamingTimer() {
+  if (liveTimerInterval) {
+    clearInterval(liveTimerInterval);
+    liveTimerInterval = null;
+  }
+}
+
 function sameSession(a, b) {
   if (!a || !b) return false;
   if (a === b) return true;
@@ -822,6 +870,13 @@ async function loadSession(file) {
   }
 }
 
+function parseEntryTimestamp(ts) {
+  if (!ts) return null;
+  if (typeof ts === "number") return ts;
+  const parsed = new Date(ts).getTime();
+  return isNaN(parsed) ? null : parsed;
+}
+
 function reconstructFromEntries(entries) {
   // Map toolResults by toolCallId so we can attach them to their toolCall in the assistant message
   const toolResults = new Map();
@@ -829,17 +884,23 @@ function reconstructFromEntries(entries) {
     if (e.type === "message" && e.message?.role === "toolResult") {
       const m = e.message;
       if (m.toolCallId) {
-        toolResults.set(m.toolCallId, m);
+        toolResults.set(m.toolCallId, {
+          ...m,
+          entryTs: parseEntryTimestamp(m.timestamp || e.timestamp)
+        });
       }
     }
   }
 
   const out = [];
+  let lastUserTs = null;
   for (const e of entries) {
     if (e.type !== "message") continue;
     const m = e.message;
     if (!m || m.role === "bashExecution") continue;
+    const msgTs = parseEntryTimestamp(m.timestamp || e.timestamp);
     if (m.role === "user") {
+      lastUserTs = msgTs;
       // Extract optional images from user message content array
       let images = [];
       if (Array.isArray(m.content)) {
@@ -851,13 +912,28 @@ 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 || e.timestamp });
+      out.push({ role: "user", text: extractContentText(m.content), images, ts: msgTs });
     } else if (m.role === "assistant") {
+      let turnDurationMs = null;
+      if (lastUserTs && msgTs && msgTs >= lastUserTs) {
+        const diff = msgTs - lastUserTs;
+        if (diff > 0 && diff < 15 * 60 * 1000) {
+          turnDurationMs = diff;
+        }
+      }
       const rawContent = Array.isArray(m.content) ? m.content : (m.content ? [{ type: "text", text: String(m.content) }] : []);
       const content = rawContent.map(part => {
         if (part && part.type === "toolCall") {
           const res = toolResults.get(part.id);
-          return { ...part, result: res || null };
+          let durationMs = null;
+          if (res) {
+            const startTs = parseEntryTimestamp(part.timestamp || m.timestamp || e.timestamp);
+            const endTs = res.entryTs || parseEntryTimestamp(res.timestamp);
+            if (startTs && endTs && endTs >= startTs) {
+              durationMs = endTs - startTs;
+            }
+          }
+          return { ...part, result: res || null, durationMs };
         }
         return part;
       });
@@ -869,7 +945,7 @@ function reconstructFromEntries(entries) {
         } catch {}
         content.push({ type: "text", text: `⚠️ **生成失败**: ${errMsg}` });
       }
-      out.push({ role: "assistant", content, ts: m.timestamp || e.timestamp, usage: m.usage });
+      out.push({ role: "assistant", content, ts: msgTs, turnDurationMs, usage: m.usage });
     }
     // toolResult entries are attached directly to assistant toolCall parts, so they don't produce standalone messages
   }
@@ -1274,6 +1350,9 @@ function renderAssistantBlock(m) {
   if (timeStr) {
     roleChildren.push(el("span", { class: "msg-time", text: timeStr, title: fullTimeStr }));
   }
+  if (m.turnDurationMs != null && m.turnDurationMs > 0) {
+    roleChildren.push(el("span", { class: "msg-duration", text: `耗时 ${formatDuration(m.turnDurationMs)}`, title: "生成总耗时" }));
+  }
   roleChildren.push(copyMsgBtn);
 
   const node = el("div", { class: "msg assistant" }, [
@@ -1288,7 +1367,7 @@ function renderAssistantBlock(m) {
       const div = el("div", { html: renderMarkdown(c.text) });
       content.appendChild(div);
     } else if (c.type === "thinking") {
-      content.appendChild(makeThinkingBlock(c.thinking));
+      content.appendChild(makeThinkingBlock(c.thinking, false, m.ts, c.durationMs));
     } else if (c.type === "toolCall") {
       content.appendChild(makeToolBlockFromCall(c));
     }
@@ -1300,8 +1379,24 @@ function renderAssistantBlock(m) {
   return node;
 }
 
-function makeThinkingBlock(thinkingText, isActivelyThinking = false) {
+function makeThinkingBlock(thinkingText, isActivelyThinking = false, ts = null, durationMs = null, startedAt = null) {
   const block = el("div", { class: "thinking-block" + (isActivelyThinking ? " active" : "") });
+
+  const curDuration = durationMs != null
+    ? durationMs
+    : (isActivelyThinking && startedAt ? Math.max(0, Date.now() - startedAt) : null);
+
+  const durationText = curDuration != null ? (isActivelyThinking ? formatDuration(curDuration) : `用时 ${formatDuration(curDuration)}`) : "";
+
+  const durationEl = el("span", {
+    class: "thinking-duration" + (isActivelyThinking ? " live" : ""),
+    text: durationText,
+    style: durationText ? "" : "display: none;"
+  });
+  if (isActivelyThinking && startedAt) {
+    durationEl._startedAt = startedAt;
+  }
+
   const head = el("div", {
     class: "thinking-head",
     onclick: () => {
@@ -1312,20 +1407,23 @@ function makeThinkingBlock(thinkingText, isActivelyThinking = false) {
     }
   }, [
     el("span", { class: "thinking-title", text: isActivelyThinking ? "💭 正在思考中…" : "💭 思考过程" }),
+    durationEl,
+    ts ? el("span", { class: "thinking-time", text: formatMessageTime(ts) }) : null,
     isActivelyThinking ? el("span", { class: "thinking-pulse" }) : null,
     el("span", { class: "thinking-toggle-hint", text: "(点击展开/收起)" }),
   ]);
-  
+
   const body = el("div", { class: "thinking-body", html: escapeHtml(thinkingText) });
-  
+
   if (state.thinkingUserToggled) {
     body.style.display = state.thinkingOpen ? "block" : "none";
   } else {
     body.style.display = isActivelyThinking ? "block" : "none";
   }
-  
+
   block.appendChild(head);
   block.appendChild(body);
+  block._durationEl = durationEl;
   return block;
 }
 
@@ -1375,7 +1473,7 @@ function updateToolBlockCopyBtn(tc, call) {
   tc.head._cmdToCopy = cmd;
 }
 
-function makeToolBlockFromCall(call) {
+function makeToolBlockFromCall(call, ts = null) {
   const block = el("div", { class: "tool-block" });
   const hasResult = Boolean(call.result);
   const isError = call.result ? Boolean(call.result.isError) : false;
@@ -1385,8 +1483,24 @@ function makeToolBlockFromCall(call) {
     resultText = extractContentText(call.result.content);
   }
 
-  const stateText = hasResult ? (isError ? "错误" : "完成") : "…";
-  const stateClass = "state" + (hasResult && isError ? " error" : "");
+  const stateText = hasResult ? (isError ? "错误" : "完成") : "执行中…";
+  const stateClass = "state" + (hasResult && isError ? " error" : "") + (!hasResult ? " running" : "");
+
+  const durationMs = call.durationMs != null
+    ? call.durationMs
+    : (call.startedAt && call.endedAt ? Math.max(0, call.endedAt - call.startedAt) : null);
+  const durationText = durationMs != null
+    ? `耗时 ${formatDuration(durationMs)}`
+    : (!hasResult && call.startedAt ? formatDuration(Date.now() - call.startedAt) : "");
+
+  const durationEl = el("span", {
+    class: "tool-duration" + (!hasResult ? " live" : ""),
+    text: durationText,
+    style: durationText ? "" : "display: none;"
+  });
+  if (!hasResult && call.startedAt) {
+    durationEl._startedAt = call.startedAt;
+  }
 
   const cmdToCopy = getToolCommandToCopy(call);
   const copyBtn = cmdToCopy ? el("button", {
@@ -1414,8 +1528,10 @@ function makeToolBlockFromCall(call) {
   const head = el("div", { class: "tool-head" }, [
     el("span", { class: "ic", text: "⚙" }),
     el("span", { class: "name", text: call.name }),
+    ts ? el("span", { class: "tool-time", text: formatMessageTime(ts) }) : null,
     el("span", { class: "args", text: summaryArgs(call.name, call.arguments) }),
     copyBtn,
+    durationEl,
     el("span", { class: stateClass, text: stateText }),
   ]);
   head._cmdToCopy = cmdToCopy;
@@ -1433,9 +1549,10 @@ function makeToolBlockFromCall(call) {
   block._head = head;
   block._body = body;
   block._callId = call.id;
+  block._durationEl = durationEl;
 
   if (!hasResult && call.id) {
-    state.activeToolCalls.set(call.id, { block, body, head });
+    state.activeToolCalls.set(call.id, { block, body, head, durationEl, startedAt: call.startedAt || Date.now() });
   }
 
   return block;
@@ -1481,6 +1598,8 @@ function getStreamingFullText() {
 function ensureStreamingMsg(ts = Date.now()) {
   if (state.streamingMsg) return state.streamingMsg;
   showEmptyState(false);
+  state.turnStartedAt = ts || Date.now();
+  startStreamingTimer();
   const timeStr = formatMessageTime(ts);
   const fullTimeStr = (ts && !isNaN(new Date(ts).getTime())) ? new Date(ts).toLocaleString("zh-CN") : "";
 
@@ -1500,12 +1619,15 @@ function ensureStreamingMsg(ts = Date.now()) {
     el("span", { text: "复制全文" })
   ]);
 
+  const durationEl = el("span", { class: "msg-duration live", text: "0.0s", title: "生成耗时" });
+
   const roleChildren = [
     el("span", { class: "role-name", text: "pi" }),
   ];
   if (timeStr) {
     roleChildren.push(el("span", { class: "msg-time", text: timeStr, title: fullTimeStr }));
   }
+  roleChildren.push(durationEl);
   roleChildren.push(copyBtn);
 
   const node = el("div", { class: "msg assistant" }, [
@@ -1513,6 +1635,7 @@ function ensureStreamingMsg(ts = Date.now()) {
     el("div", { class: "content" }),
   ]);
   state.streamingMsg = node;
+  state.streamingMsgDurationEl = durationEl;
   state.streamingItems = [];
   state.thinkingOpen = true;
   state.thinkingUserToggled = false;
@@ -1554,8 +1677,8 @@ function refreshStreamingContent() {
     const item = state.streamingItems[i];
     const isLast = (i === lastIdx);
     if (item.type === "thinking") {
-      const isActivelyThinking = state.streaming && isLast;
-      content.appendChild(makeThinkingBlock(item.text, isActivelyThinking));
+      const isActivelyThinking = state.streaming && isLast && item.isStreaming !== false;
+      content.appendChild(makeThinkingBlock(item.text, isActivelyThinking, item.ts, item.durationMs, item.startedAt));
     } else if (item.type === "tool") {
       if (item.tc?.block) content.appendChild(item.tc.block);
     } else if (item.type === "text") {
@@ -1568,8 +1691,25 @@ function refreshStreamingContent() {
 
 function finalizeStreamingMsg() {
   state.streaming = false;
+  stopStreamingTimer();
   if (state.streamingMsg) {
+    for (const item of state.streamingItems) {
+      if (item.type === "thinking" && item.isStreaming) {
+        item.isStreaming = false;
+        item.endedAt = Date.now();
+        item.durationMs = Math.max(0, item.endedAt - (item.startedAt || item.ts || Date.now()));
+      }
+    }
     refreshStreamingContent();
+
+    if (state.turnStartedAt) {
+      const turnDuration = Math.max(0, Date.now() - state.turnStartedAt);
+      if (state.streamingMsgDurationEl) {
+        state.streamingMsgDurationEl.className = "msg-duration";
+        state.streamingMsgDurationEl.textContent = `耗时 ${formatDuration(turnDuration)}`;
+      }
+    }
+
     const finalFullText = getStreamingFullText();
     const btn = state.streamingMsg.querySelector(".btn-copy-msg");
     if (btn) {
@@ -1581,6 +1721,8 @@ function finalizeStreamingMsg() {
       };
     }
   }
+  state.turnStartedAt = null;
+  state.streamingMsgDurationEl = null;
   state.streamingMsg = null;
   state.streamingItems = [];
   state.thinkingOpen = true;
@@ -1833,6 +1975,10 @@ function handlePiMessage(obj) {
       setComposerAborting(true);
       ensureStreamingMsg();
       refreshStreamingContent();
+      // If ring buffer overflowed while client was away, sync full session history in background
+      if (obj.overflowed && state.currentSessionFile) {
+        syncSessionHistory(state.currentSessionFile, false);
+      }
     } else {
       finalizeStreamingMsg();
       state.streaming = false;
@@ -1972,6 +2118,13 @@ function handlePiMessage(obj) {
       const ev = obj.assistantMessageEvent;
       if (!ev) break;
       if (ev.type === "text_delta") {
+        // Finalize active thinking duration if transitioning to text
+        const activeThinking = state.streamingItems.find(it => it.type === "thinking" && it.isStreaming);
+        if (activeThinking) {
+          activeThinking.isStreaming = false;
+          activeThinking.endedAt = Date.now();
+          activeThinking.durationMs = Math.max(0, activeThinking.endedAt - (activeThinking.startedAt || activeThinking.ts || Date.now()));
+        }
         const last = state.streamingItems[state.streamingItems.length - 1];
         if (last && last.type === "text") {
           last.text += ev.delta;
@@ -1981,6 +2134,12 @@ function handlePiMessage(obj) {
         refreshStreamingContentDebounced();
       } else if (ev.type === "text_end") {
         // Authoritative final text for this content slot.
+        const activeThinking = state.streamingItems.find(it => it.type === "thinking" && it.isStreaming);
+        if (activeThinking) {
+          activeThinking.isStreaming = false;
+          activeThinking.endedAt = Date.now();
+          activeThinking.durationMs = Math.max(0, activeThinking.endedAt - (activeThinking.startedAt || activeThinking.ts || Date.now()));
+        }
         if (typeof ev.content === "string") {
           const last = state.streamingItems[state.streamingItems.length - 1];
           if (last && last.type === "text") {
@@ -1989,30 +2148,49 @@ function handlePiMessage(obj) {
             state.streamingItems.push({ type: "text", text: ev.content });
           }
         }
-        refreshStreamingContent();
+        refreshStreamingContentDebounced();
       } else if (ev.type === "thinking_delta" || ev.type === "thinking_start" || ev.type === "thinking_end") {
         // For thinking we accumulate deltas; thinking_delta carries .delta
         if (ev.type === "thinking_delta" && ev.delta) {
-          const last = state.streamingItems[state.streamingItems.length - 1];
-          if (last && last.type === "thinking") {
+          let last = state.streamingItems[state.streamingItems.length - 1];
+          if (last && last.type === "thinking" && last.isStreaming !== false) {
             last.text += ev.delta;
+            if (!last.startedAt) last.startedAt = Date.now();
           } else {
-            state.streamingItems.push({ type: "thinking", text: ev.delta });
+            last = { type: "thinking", text: ev.delta, ts: Date.now(), startedAt: Date.now(), isStreaming: true };
+            state.streamingItems.push(last);
+          }
+          refreshStreamingContentDebounced();
+        } else if (ev.type === "thinking_start") {
+          state.streamingItems.push({ type: "thinking", text: "", ts: Date.now(), startedAt: Date.now(), isStreaming: true });
+          refreshStreamingContentDebounced();
+        } else if (ev.type === "thinking_end") {
+          const last = state.streamingItems[state.streamingItems.length - 1];
+          if (last && last.type === "thinking") {
+            last.isStreaming = false;
+            last.endedAt = Date.now();
+            last.durationMs = Math.max(0, last.endedAt - (last.startedAt || last.ts || Date.now()));
           }
           refreshStreamingContentDebounced();
         }
       } else if (ev.type === "toolcall_start") {
+        const activeThinking = state.streamingItems.find(it => it.type === "thinking" && it.isStreaming);
+        if (activeThinking) {
+          activeThinking.isStreaming = false;
+          activeThinking.endedAt = Date.now();
+          activeThinking.durationMs = Math.max(0, activeThinking.endedAt - (activeThinking.startedAt || activeThinking.ts || Date.now()));
+        }
         ensureStreamingMsg();
         const call = ev.toolCall || { id: obj.toolCallId || ev.id, name: obj.toolName, arguments: obj.args };
         // args may be incomplete until toolcall_end; we fill what we have now
         // and patch the head display on toolcall_end.
-        ensureToolBlock(call.id, call.name, call.arguments);
+        ensureToolBlock(call.id, call.name, call.arguments, Date.now());
       } else if (ev.type === "toolcall_delta") {
         // Streaming function-call argument JSON. We don't render it live
         // (JSON fragments are not useful UX), but make sure the tool block
         // exists so toolcall_end has somewhere to write into.
         const id = obj.toolCallId || ev.id;
-        ensureToolBlock(id, obj.toolName || ev.toolCall?.name, obj.args);
+        ensureToolBlock(id, obj.toolName || ev.toolCall?.name, obj.args, Date.now());
       } else if (ev.type === "toolcall_end") {
         // Authoritative final toolCall object (with full arguments). Patch
         // the block head so the displayed args are the final ones, not the
@@ -2029,9 +2207,29 @@ function handlePiMessage(obj) {
       break;
     }
     case "tool_execution_start": {
+      const activeThinking = state.streamingItems.find(it => it.type === "thinking" && it.isStreaming);
+      if (activeThinking) {
+        activeThinking.isStreaming = false;
+        activeThinking.endedAt = Date.now();
+        activeThinking.durationMs = Math.max(0, activeThinking.endedAt - (activeThinking.startedAt || activeThinking.ts || Date.now()));
+      }
       ensureStreamingMsg();
-      const tc = ensureToolBlock(obj.toolCallId, obj.toolName, obj.args);
-      if (tc) updateToolBlockCopyBtn(tc, { name: obj.toolName, arguments: obj.args });
+      const tc = ensureToolBlock(obj.toolCallId, obj.toolName, obj.args, Date.now());
+      if (tc) {
+        tc.startedAt = Date.now();
+        if (tc.durationEl) {
+          tc.durationEl.className = "tool-duration live";
+          tc.durationEl._startedAt = tc.startedAt;
+          tc.durationEl.textContent = "0.0s";
+          tc.durationEl.style.display = "";
+        }
+        const stateEl = tc.head.querySelector(".state");
+        if (stateEl) {
+          stateEl.className = "state running";
+          stateEl.textContent = "执行中…";
+        }
+        updateToolBlockCopyBtn(tc, { name: obj.toolName, arguments: obj.args });
+      }
       break;
     }
     case "tool_execution_update": {
@@ -2047,8 +2245,20 @@ function handlePiMessage(obj) {
       if (tc) {
         const text = extractContentText(obj.result?.content);
         tc.body.innerHTML = escapeHtml(text) || "(无输出)";
-        tc.head.querySelector(".state").textContent = obj.isError ? "错误" : "完成";
-        tc.head.querySelector(".state").classList.toggle("error", !!obj.isError);
+        tc.endedAt = Date.now();
+        const dur = Math.max(0, tc.endedAt - (tc.startedAt || tc.endedAt));
+        tc.durationMs = dur;
+        if (tc.durationEl) {
+          tc.durationEl.className = "tool-duration";
+          tc.durationEl._startedAt = null;
+          tc.durationEl.textContent = `耗时 ${formatDuration(dur)}`;
+          tc.durationEl.style.display = "";
+        }
+        const stateEl = tc.head.querySelector(".state");
+        if (stateEl) {
+          stateEl.textContent = obj.isError ? "错误" : "完成";
+          stateEl.className = "state" + (obj.isError ? " error" : "");
+        }
       }
       break;
     }
@@ -2112,10 +2322,10 @@ function handleExtensionUiRequest(req) {
   }
 }
 
-function ensureToolBlock(toolCallId, name, args) {
+function ensureToolBlock(toolCallId, name, args, ts = Date.now()) {
   if (state.activeToolCalls.has(toolCallId)) return state.activeToolCalls.get(toolCallId);
-  const block = makeToolBlockFromCall({ id: toolCallId, name, arguments: args });
-  const entry = state.activeToolCalls.get(toolCallId) || { block, body: block._body, head: block._head };
+  const block = makeToolBlockFromCall({ id: toolCallId, name, arguments: args, startedAt: ts }, ts);
+  const entry = state.activeToolCalls.get(toolCallId) || { block, body: block._body, head: block._head, durationEl: block._durationEl, startedAt: ts };
   state.activeToolCalls.set(toolCallId, entry);
   state.streamingItems.push({ type: "tool", id: toolCallId, tc: entry });
   refreshStreamingContentDebounced();
@@ -2996,7 +3206,7 @@ async function init() {
     const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
     const isCmdOrCtrl = isMac ? e.metaKey : e.ctrlKey;
 
-    if (isCmdOrCtrl && e.shiftKey && e.key.toLowerCase() === "n") {
+    if (isCmdOrCtrl && e.shiftKey && (e.key.toLowerCase() === "n" || e.key.toLowerCase() === "o")) {
       e.preventDefault();
       startNewSession(true);
       return;

package/public/icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <linearGradient id="piGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#3b82f6"/>
+      <stop offset="100%" stop-color="#8b5cf6"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="128" fill="#18181b"/>
+  <rect x="16" y="16" width="480" height="480" rx="112" fill="none" stroke="url(#piGrad)" stroke-width="8" opacity="0.4"/>
+  <text x="256" y="340" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif" font-size="280" font-weight="bold" fill="url(#piGrad)" text-anchor="middle">π</text>
+</svg>

package/public/index.html

@@ -3,9 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#18181b">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <title>pi · Chat</title>
+  <link rel="manifest" href="/manifest.webmanifest">
+  <link rel="apple-touch-icon" href="/icon.svg">
   <link rel="stylesheet" href="/style.css">
-  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext y='20' font-size='20'%3Eπ%3C/text%3E%3C/svg%3E">
+  <link rel="icon" type="image/svg+xml" href="/icon.svg">
 </head>
 <body data-cwd="">
   <div class="app sidebar-open">

package/public/manifest.webmanifest

@@ -0,0 +1,17 @@
+{
+  "name": "pi-chat",
+  "short_name": "pi-chat",
+  "description": "ChatGPT/Gemini style web UI for the pi coding agent",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#18181b",
+  "theme_color": "#18181b",
+  "icons": [
+    {
+      "src": "/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

package/public/style.css

@@ -578,6 +578,74 @@ body {
   letter-spacing: 0;
   user-select: none;
 }
+.msg-duration {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-muted);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 1px 7px;
+  border-radius: 999px;
+  user-select: none;
+}
+.msg-duration.live {
+  color: var(--accent);
+  background: rgba(16, 163, 127, 0.12);
+  border-color: rgba(16, 163, 127, 0.25);
+  animation: pulse-live-tag 1.5s infinite ease-in-out;
+}
+.thinking-time {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.thinking-duration {
+  font-size: 11px;
+  font-weight: 500;
+  color: #c4b5fd;
+  background: rgba(167, 139, 250, 0.12);
+  border: 1px solid rgba(167, 139, 250, 0.25);
+  padding: 1px 8px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  user-select: none;
+}
+.thinking-duration.live {
+  color: var(--accent);
+  background: rgba(16, 163, 127, 0.12);
+  border-color: rgba(16, 163, 127, 0.3);
+  animation: pulse-live-tag 1.5s infinite ease-in-out;
+}
+.tool-time {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.tool-duration {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-dim);
+  background: #252525;
+  border: 1px solid var(--border);
+  padding: 1px 7px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  user-select: none;
+}
+.tool-duration.live {
+  color: #fbbf24;
+  background: rgba(234, 179, 8, 0.12);
+  border-color: rgba(234, 179, 8, 0.25);
+  animation: pulse-live-tag 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse-live-tag {
+  0%, 100% { opacity: 0.85; }
+  50% { opacity: 1; }
+}
+
 .msg.assistant .content {
   font-size: 15px; line-height: 1.65; color: var(--text);
   max-width: 100%; min-width: 0;