@liguoshuai/pi-web-chat 2.5.1 → 2.11.2

package/docs/CHANGELOG.md

@@ -7,6 +7,175 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [2.11.2] - 2026-09-03
+
+### Fixed
+- **Web 端 `submitSteer` 发送失败静默丢弃 (`clients/web/public/app.js`)**：`sendWs` 返回值未检查，WebSocket 在检查与发送之间断开时，指导指令被静默丢弃但 UI 已显示"已插入指导指令"。现先检查 `sendWs` 返回值，失败时提示用户并触发重连，不再乐观更新 UI。
+- **Web 端 `abortGeneration` 发送失败导致 UI 锁死 (`clients/web/public/app.js`)**：`sendWs({ type: "abort" })` 返回值未检查，发送失败时 `state.aborting` 永久为 `true`，UI 锁定在中止状态。现检查返回值，失败时回退 `state.aborting` 并提示用户。
+- **Web 端 `submitPrompt` 失败回退遗漏定时器清理 (`clients/web/public/app.js`)**：发送失败回退时未调用 `stopStreamingTimer()` 且未重置 `turnStartedAt` / `streamingMsgDurationEl`，导致 100ms 定时器持续向已分离 DOM 节点写入。现已补充清理。
+- **Android `sendSteer` / `abort` / `switchSession` 发送返回值未检查 (`clients/android/.../ChatRepository.kt`)**：`sendRaw` 返回的 `Boolean` 被忽略。`abort` 无条件设置 `_isStreaming = false` 即使中止未送达服务端；`switchSession` 在发送前清空消息列表，发送失败时导致状态不同步。现均检查返回值并在失败时回退。
+- **HarmonyOS `abort` / `newSession` / `switchSession` 发送返回值未检查 (`clients/harmony/.../ChatViewModel.ets`)**：与 Android 同类问题。`abort` 无条件重置 `isStreaming`；`newSession` / `switchSession` 在发送前清空消息，发送失败时导致状态不同步。现均检查 `wsManager.send()` 返回值并在失败时回退。
+- **HarmonyOS `remote_user_prompt` 消息重复 (`clients/harmony/.../ChatViewModel.ets`)**：本地已发送的用户消息与服务端 `remote_user_prompt` 回声重复添加。现增加去重检查，若倒数第二条用户消息内容相同则跳过。
+- **HarmonyOS `init()` 未重置流式状态 (`clients/harmony/.../ChatViewModel.ets`)**：切换服务器 URL 重新初始化时，残留的 `isStreaming = true` 导致孤立流式气泡。现 `init()` 中重置 `isStreaming = false`。
+- **Android 编译失败修复 (`clients/android/.../ChatScreen.kt`)**：补充 `SmartToy` 与 `Psychology` 图标的 `import` 声明，修复替顶部胶囊换用 Material 图标后因缺失导入导致的 `Unresolved reference`，`assembleDebug` 可正常产出 APK。
+- **服务端单元测试 CI 挂起修复 (`server/test/server.test.js` + `server/fixtures/pi-stub.mjs`)**：CI runner 未安装 `pi` CLI，`PiAgent.start()` 执行 `spawn("pi")` 时报 `ENOENT`，导致 `WebSocket gateway NEW_SESSION` 断言失败、HTTP 服务未关闭，最终使 `node --test` 进程长时间挂起。现引入无操作长驻 stub 并重写 `config.piBin`，使网关单测自包含、不再依赖外部 `pi` 二进制。
+
+### Changed
+- 全端版本号统一递增至 2.11.2（Monorepo Lockstep：Root / Protocol / Server / Web / Android / HarmonyOS）。
+
+---
+
+## [2.11.1] - 2026-09-03
+
+### Fixed
+- **Android 构建失败修复 (`clients/android/.../ChatRepository.kt`)**：修复 `connect` 函数声明被写坏导致的语法错误（`fun connectcwd: String = ...` → `fun connect(cwd: String = ..., sessionPath: String? = null)`），该错误导致 `compileDebugKotlin` 失败、APK 无法产出，并连带触发 `ChatViewModel` 中多处 `Unresolved reference 'connect'`。修复后 Android Debug APK 可正常构建。
+
+### Changed
+- 全端版本号统一递增至 2.11.1（Monorepo Lockstep：Root / Protocol / Server / Web / Android / HarmonyOS）。
+
+---
+
+## [2.11.0] - 2026-09-03
+
+### Changed & Beautified (Android)
+- **应用图标焕新 (`clients/android`)**：弃用系统默认图标，新增基于 π 品牌图形与翡翠绿渐变的 **自适应启动图标 (Adaptive Icon)**，包含背景渐变、白色圆角 π 字形与点缀色，支持普通与圆形图标形态。
+- **顶部胶囊图标美化 (TopBar Pills)**：将模型选择 (🤖) 与思考级别 (🧠) 的简单 Emoji 替换为 **彩色圆形徽章 + Material 图标**（`SmartToy` 机器人 / `Psychology` 大脑），并同步美化工作目录胶囊图标，视觉更加精致统一。
+- **对话框气泡美化 (Message Bubbles)**：
+  - 用户消息气泡升级为 **翡翠绿渐变背景 + 护色描边**，圆角更柔和、内边距更舒适。
+  - 助手头像由扁平半透明圆形升级为 **彩色渐变圆形徽章**（白色 π），辨识度与质感更佳。
+- **样例提示词间距优化 (Suggestion Chips)**：解决提示词芯片过于紧凑的问题，引入图标 + 标签的卡片式芯片，并增大水平与垂直间距、内边距，视觉更舒展。
+
+### Changed
+- 全端版本号统一递增至 2.11.0（Monorepo Lockstep：Root / Protocol / Server / Web / Android / HarmonyOS）。
+
+---
+
+## [2.10.1] - 2026-09-03
+
+### Fixed
+- **HarmonyOS 监听器泄漏修复 (`clients/harmony/.../ChatViewModel.ets`)**：`init()` 每次调用都新增 WebSocket 状态与消息监听器但不移除旧的，导致重复调用时监听器堆积、消息被重复处理。现已保存监听器引用并在重新初始化时先移除旧监听器。
+- **HarmonyOS WebSocket 重连竞争修复 (`clients/harmony/.../WebSocketManager.ets`)**：`connect()` 替换已有连接时，旧 socket 的异步 `on('close')` 回调仍会触发 `scheduleReconnect()`，导致连接抖动。现已通过捕获 ws 实例引用，在陈旧回调中跳过重连逻辑。
+- **Android WebSocket 连接泄漏修复 (`clients/android/.../WebSocketClient.kt`)**：`connect()` 未关闭已有 WebSocket 连接，在重连场景下旧连接资源泄漏。现已在 `connect()` 开头主动关闭并清理旧连接。
+- **Android 协程作用域泄漏修复 (`clients/android/.../ChatRepository.kt` / `ChatViewModel.kt`)**：`reconnect()` 创建新 `ChatRepository` 但未取消旧实例的协程作用域，导致协程泄漏。现已新增 `close()` 方法并在重连时调用。
+- **协议层冗余代码清理 (`packages/protocol/src/index.js`)**：`formatDuration` 函数前两个条件分支完全相同，移除冗余的 `ms < 1000` 分支。
+- **HarmonyOS 冗余代码清理 (`clients/harmony/.../Index.ets`)**：同步移除 `formatDuration` 中相同的冗余分支。
+- **Web 端 Token 泄漏防护 (`clients/web/public/app.js`)**：从 URL 提取 auth token 后立即使用 `history.replaceState` 清除 URL 中的 token 参数，防止通过 Referer 头、截图或分享链接泄漏。
+- **Web 端代码围栏匹配修复 (`clients/web/public/app.js`)**：`renderMarkdown` 中 ```` 围栏匹配改为仅在行首匹配，避免将行内三反引号误判为代码围栏。
+- **Web 端 SVG 元素命名空间修复 (`clients/web/public/app.js`)**：DOM 辅助函数 `el()` 对 SVG 标签使用 `createElementNS` 创建，修复 SVG 图标渲染问题。
+- **Web 端发送失败处理增强 (`clients/web/public/app.js`)**：`sendWs` 返回布尔值，`submitPrompt` 在 WebSocket 断开时回退流式状态并提示用户，`setComposerAborting(true)` 正确设置 `state.aborting`。
+- **Android API 基址规范化 (`clients/android/.../ApiService.kt`)**：构造函数中自动去除 `baseUrl` 尾部斜杠，避免拼接出双斜杠 URL。
+
+### Changed
+- 全端版本号统一递增至 2.10.1（Monorepo Lockstep：Root / Protocol / Server / Web / Android / HarmonyOS）。
+---
+
+## [2.10.0] - 2026-09-02
+
+### Added & Aligned
+- **Android 原生客户端与移动 Web 端全要素对齐 (`clients/android`)**：
+  - **顶部栏元素完整对齐 (TopBar Alignment)**：
+    - 新增 **工作目录胶囊按钮 (CWD Pill)**：展示当前工作目录，点击弹出工作目录切换对话框（包含路径输入与 `~`, `~/.pi`, `/tmp` 快捷芯片）。
+    - 新增 **模型选择胶囊按钮 (Model Pill)**：展示当前模型名称与 `★ 默认` 徽章，点击弹出支持搜索、厂商归类、能力标签（🧠 推理、👁️ 视觉、🛠️ 工具）的模型选择对话框。
+    - 新增 **深度思考级别胶囊按钮 (Thinking Pill)**：展示当前思考深度，点击弹出 `Off`、`Minimal`、`Low`、`Medium`、`High`、`Max` 等推理级别选择对话框。
+    - 新增 **会话导出按钮 (Export Chat)**：一键将完整对话导出为标准 Markdown 格式并唤起系统分享。
+    - **设置入口单点统一**：移除侧边抽屉顶部多余的重复设置按钮，保留顶部栏统一单一设置入口，避免操作歧义。
+  - **空白引导页全要素对齐 (Empty State Alignment)**：
+    - 引入 `π` 经典头像与提示文案。
+    - 引入 **当前模型信息横幅 (Empty Model Banner)**：展示当前模型名称、默认徽章、🧠 思考 / 👁️ 视觉 / 🛠️ 工具能力标签及“切换模型”快捷按钮。
+    - 引入 **快捷指令芯片 (Suggestion Chips)**：提供“列出当前目录文件”、“总结这个项目”、“代码审查”等一键触发指令。
+  - **底部输入区域与富文本展示对齐 (Composer & Message Bubbles)**：
+    - 增加待发送附件预览栏（带缩略图与删除 `✕` 按钮）。
+    - 增加图片全屏查看画廊模式 (Image Lightbox Modal)。
+    - 助手回复内容 Markdown 解析优化，代码块增加语言标签与“复制代码”独立按钮。
+    - 增加底部操作提示文案：“pi 会执行命令与读写你的文件 —— 请注意操作内容。”
+
+### Changed
+- 全端版本号统一递增至 2.10.0（Monorepo Lockstep：Root / Protocol / Server / Web / Android / HarmonyOS）。
+
+---
+
+## [2.9.1] - 2026-09-02
+
+### Fixed & Optimized
+- **网关路由健壮性增强 (`server/src/routes.js`)**：修复 `/api/sessions` 历史会话列表中若存在数值格式时间戳导致 `localeCompare` 抛错的问题，优化为安全兼容数字与 ISO 字符串的多格式时间戳倒序排列。
+- **Web 前端异常流式保护 (`clients/web/public/app.js`)**：在 WebSocket 消息处理中补充对 `error` 与 `pi_exit` 事件的完备响应，遇到异常时自动终结流式状态、解除输入框锁定并提示用户。
+- **Android 原生端异常退出流式重置 (`clients/android`)**：`ChatRepository.kt` 补充对 `error` 和 `pi_exit` 事件的处理，避免在子进程异常退出时状态滞留在流式中。
+- **HarmonyOS 原生端异常流式重置 (`clients/harmony`)**：`ChatViewModel.ets` 补充对 `error` 和 `pi_exit` 事件的处理，确保鸿蒙界面在异常中断时能正常完成并释放输入。
+- **跨端通信协议 Schema 完备性更新 (`packages/protocol/src/schema.json`)**：补充 `remote_user_steer` 与 `extension_ui_request` 到服务端消息类型枚举定义。
+
+### Changed
+- 全端版本号统一递增至 2.9.1（Monorepo Lockstep：Root / Protocol / Server / Web / Android / HarmonyOS）。
+
+---
+
+## [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
@@ -556,4 +725,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 | **Deprecated** | 即将移除 |
 | **Removed**  | 已移除 |
 | **Fixed**    | Bug 修复 |
-| **Security** | 安全相关修复 |
+| **Security** | 安全相关修复 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "2.5.1",
+  "version": "2.11.2",
   "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-server": "2.11.2",
+    "@liguoshuai/pi-chat-protocol": "2.11.2"
   },
   "scripts": {
     "build": "node --check server.js && node --check bin/pi-web-chat.js && node --check public/app.js",

package/public/app.js

@@ -26,6 +26,10 @@ function getAuthToken() {
     const urlToken = new URLSearchParams(window.location.search).get("token");
     if (urlToken) {
       localStorage.setItem("pi_auth_token", urlToken);
+      // Strip token from URL to prevent leakage via Referer, screenshots, or shared links
+      const cleanUrl = new URL(window.location.href);
+      cleanUrl.searchParams.delete("token");
+      window.history.replaceState({}, "", cleanUrl.toString());
       return urlToken;
     }
     return localStorage.getItem("pi_auth_token") || "";
@@ -75,6 +79,8 @@ const state = {
   isBackfilling: false,
   aborting: false,
   attachedImages: [], // Array of { data: string (base64), mimeType: string, url: string }
+  turnStartedAt: null,
+  streamingMsgDurationEl: null,
 };
 
 let toastTimer = null;
@@ -300,11 +306,14 @@ function renderMarkdown(md) {
   const parts = [];
   let rest = md;
   while (rest.length) {
-    const fenceIdx = rest.search(/```/);
-    if (fenceIdx === -1) {
+    // Only match ``` at the beginning of a line (or start of string) to avoid
+    // misinterpreting inline triple-backticks as code fences.
+    const fenceMatch = rest.match(/(?:^|\n)```/);
+    if (!fenceMatch) {
       parts.push({ kind: "md", text: rest });
       rest = "";
     } else {
+      const fenceIdx = fenceMatch.index + (fenceMatch[0].length - 3);
       if (fenceIdx > 0) parts.push({ kind: "md", text: rest.slice(0, fenceIdx) });
       rest = rest.slice(fenceIdx + 3);
       // optional language on this line
@@ -503,7 +512,8 @@ function mdTable(lines) {
 // ---- DOM helpers ----
 const $ = (sel, root = document) => root.querySelector(sel);
 const el = (tag, props = {}, children = []) => {
-  const n = document.createElement(tag);
+  const SVG_TAGS = new Set(["svg","rect","path","circle","line","polyline","polygon","ellipse","g","defs","use","text","tspan","linearGradient","radialGradient","stop","clipPath","mask","pattern","filter","feGaussianBlur","feOffset","feMerge","feMergeNode","animate","animateTransform","animateMotion"]);
+  const n = SVG_TAGS.has(tag) ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag);
   for (const [k, v] of Object.entries(props)) {
     if (k === "class") n.className = v;
     else if (k === "html") n.innerHTML = v;
@@ -547,6 +557,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 +878,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 +892,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 +920,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 +953,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 +1358,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 +1375,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 +1387,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 +1415,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 +1481,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 +1491,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 +1536,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 +1557,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 +1606,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 +1627,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 +1643,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 +1685,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 +1699,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 +1729,8 @@ function finalizeStreamingMsg() {
       };
     }
   }
+  state.turnStartedAt = null;
+  state.streamingMsgDurationEl = null;
   state.streamingMsg = null;
   state.streamingItems = [];
   state.thinkingOpen = true;
@@ -1797,8 +1947,9 @@ function connectWs(opts = {}) {
 }
 
 function sendWs(obj) {
-  if (!state.ws || state.ws.readyState !== 1) return;
+  if (!state.ws || state.ws.readyState !== 1) return false;
   state.ws.send(JSON.stringify(obj));
+  return true;
 }
 
 function handlePiMessage(obj) {
@@ -1833,6 +1984,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 +2127,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 +2143,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 +2157,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 +2216,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,14 +2254,33 @@ 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;
     }
     case "extension_ui_request":
       handleExtensionUiRequest(obj);
       break;
+    case "error":
+      finalizeStreamingMsg();
+      state.streaming = false;
+      state.aborting = false;
+      setComposerAborting(false);
+      showToast(`⚠️ ${obj.message || obj.code || "发生错误"}`);
+      break;
     case "pi_exit":
       finalizeStreamingMsg();
       state.streaming = false;
@@ -2112,10 +2338,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();
@@ -2716,7 +2942,9 @@ function updateComposerUI() {
 }
 
 function setComposerAborting(yes) {
-  if (!yes) {
+  if (yes) {
+    state.aborting = true;
+  } else {
     state.aborting = false;
     const inner = $("#composerInner");
     if (inner) inner.classList.remove("aborting");
@@ -2741,7 +2969,12 @@ function abortGeneration() {
   updateComposerUI();
   const hint = $(".composer-hint");
   if (hint) hint.textContent = "中止当前任务中…";
-  sendWs({ type: "abort" });
+  if (!sendWs({ type: "abort" })) {
+    state.aborting = false;
+    updateComposerUI();
+    if (hint) hint.textContent = "中止失败：WebSocket 连接已断开。正在尝试重连…";
+    scheduleReconnect(0);
+  }
 }
 
 function submitSteer() {
@@ -2756,6 +2989,12 @@ function submitSteer() {
     return;
   }
 
+  if (!sendWs({ type: "steer", message: text })) {
+    if (hint) hint.textContent = "发送失败：WebSocket 连接已断开。正在尝试重连…";
+    scheduleReconnect(0);
+    return;
+  }
+
   appendMessageNode("user", { text, isSteer: true, ts: Date.now() });
   ta.value = "";
   autoResize();
@@ -2765,8 +3004,6 @@ function submitSteer() {
   setTimeout(() => {
     if (hint) hint.textContent = "pi 会执行命令与读写你的文件 —— 请注意操作内容。";
   }, 4000);
-
-  sendWs({ type: "steer", message: text });
 }
 
 function submitPrompt() {
@@ -2843,7 +3080,19 @@ function submitPrompt() {
       }
     }
   }
-  sendWs({ type: "prompt", message: text, images: imagesToSend });
+  if (!sendWs({ type: "prompt", message: text, images: imagesToSend })) {
+    state.streaming = false;
+    state.aborting = false;
+    setComposerAborting(false);
+    stopStreamingTimer();
+    state.turnStartedAt = null;
+    state.streamingMsgDurationEl = null;
+    if (state.streamingMsg) { state.streamingMsg.remove(); state.streamingMsg = null; }
+    state.streamingItems = [];
+    const hint = $(".composer-hint");
+    if (hint) hint.textContent = "发送失败：WebSocket 连接已断开。正在尝试重连…";
+    scheduleReconnect(0);
+  }
 }
 
 function autoResize() {
@@ -2996,7 +3245,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;