From 6ec5a6136b05f308145104f404c6ff13cca22a2c Mon Sep 17 00:00:00 2001 From: Yif <877193178@qq.com> Date: Mon, 3 Aug 2026 19:58:58 +0800 Subject: [PATCH] feat(web): show turn run time with hover-revealed time chrome Derive turn wall time from adjacent logged timestamps (no new session events): the actions-owning assistant footer gains a localized "Ran for {duration}" label, and the running TurnStatus label gains a live elapsed clock anchored to the same logged trigger so a mid-turn reload keeps the real elapsed time. Message time chrome is now hover-revealed on hover-capable devices, keeping icons visible and layout stable. --- .../2026-08-03-web-turn-run-time.i18n.yaml | 6 ++ .../feature/2026-08-03-web-turn-run-time.md | 27 +++++++ .../2026-08-03-web-turn-run-time.zh.md | 27 +++++++ .../src/client/chat/AssistantMarkdown.tsx | 8 +- .../src/client/chat/ChatView.module.css | 9 +++ .../src/client/chat/ChatView.tsx | 34 ++++++++- .../client/chat/MessageIconActions.module.css | 23 +++++- .../src/client/chat/MessageIconActions.tsx | 12 ++- .../src/client/chat/MessageItem.tsx | 2 +- .../src/client/chat/chat-flow.ts | 37 ++++++++++ .../src/client/chat/message-chrome.ts | 13 ++++ .../ui-conversation/src/client/locales.ts | 2 + .../ui-conversation/tests/chat-view.spec.tsx | 73 ++++++++++++++++++- 13 files changed, 263 insertions(+), 10 deletions(-) create mode 100644 .agents/notes/implemented/feature/2026-08-03-web-turn-run-time.i18n.yaml create mode 100644 .agents/notes/implemented/feature/2026-08-03-web-turn-run-time.md create mode 100644 .agents/notes/implemented/feature/2026-08-03-web-turn-run-time.zh.md diff --git a/.agents/notes/implemented/feature/2026-08-03-web-turn-run-time.i18n.yaml b/.agents/notes/implemented/feature/2026-08-03-web-turn-run-time.i18n.yaml new file mode 100644 index 0000000000..c404d7797c --- /dev/null +++ b/.agents/notes/implemented/feature/2026-08-03-web-turn-run-time.i18n.yaml @@ -0,0 +1,6 @@ +# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each +# side as of the last confirmed-consistent state. Both languages carry equal authority; +# after editing either side, bring the other along and re-record with: +# pnpm run verify-translation-pairing --write .agents/notes/implemented/feature/2026-08-03-web-turn-run-time.md +2026-08-03-web-turn-run-time.md: 456cc75279bdeeadb67f0d8a1fe7f281e3e87d30 +2026-08-03-web-turn-run-time.zh.md: a9c78997e79530047b9d5edba2cc3a1018b90f15 diff --git a/.agents/notes/implemented/feature/2026-08-03-web-turn-run-time.md b/.agents/notes/implemented/feature/2026-08-03-web-turn-run-time.md new file mode 100644 index 0000000000..456cc75279 --- /dev/null +++ b/.agents/notes/implemented/feature/2026-08-03-web-turn-run-time.md @@ -0,0 +1,27 @@ +# Agent Note: Web turn run time and hover-revealed time chrome + +Status: implemented + +English | [中文](2026-08-03-web-turn-run-time.zh.md) + +## Problem + +The Web chat shows when a message arrived but not how long the agent worked on it. Long turns give no live progress signal beyond the static activity label, and after the turn settles the wall time is not recoverable from the UI. Meanwhile the always-visible clock row adds visual noise to every message. + +## Decision + +Turn wall time derives from adjacent logged timestamps, with no new session events: `turnStartTimes` maps each turn to the nearest preceding user/steering node's time, and the actions-owning assistant footer renders `time - turnStart` as a `Ran for {duration}` label next to the clock. The running `TurnStatus` label gains a live elapsed clock anchored to `lastInputTime` — the same logged instant the footer measures from — so a mid-turn reload keeps the real elapsed time and the final label matches the live clock. The clock appears only after 15 seconds so short turns keep the plain label. + +Time chrome (clock and run time) is hover-revealed: message containers opt in with a `data-time-hover-root` attribute, and `MessageIconActions.module.css` fades the time label in on container `:hover`/`:focus-within`. The rule is scoped to `@media (hover: hover)`, so touch devices keep the always-visible label; opacity (not display) keeps the layout stable. Copy/branch icons stay always visible. + +## Alternatives considered + +**A dedicated turn-start session event.** Precise, but adds a model-invisible event type solely for UI display; the adjacent-timestamp fold matches the trajectory table's existing derivation family and needs no log change. A turn whose trigger is outside the loaded window simply omits the label. + +**Anchoring the live clock to component mount.** Simpler, but a mid-turn reload would restart the clock at zero and disagree with the eventual footer label. Mount time remains only the fallback when no input node is in-window. + +**Hiding the whole actions row until hover.** Rejected in review: copy/branch are affordances worth discovering, and row-level show/hide risks layout shift. Only the passive time text is hover-gated. + +## Consequences + +Turn duration is visible live and after settlement without new session state, and the two readings agree by construction. The run-time label is absent for turns whose triggering input fell outside the loaded window. Time chrome no longer competes with message content at rest; ARIA-tree snapshots are unaffected because the label stays in the DOM. diff --git a/.agents/notes/implemented/feature/2026-08-03-web-turn-run-time.zh.md b/.agents/notes/implemented/feature/2026-08-03-web-turn-run-time.zh.md new file mode 100644 index 0000000000..a9c78997e7 --- /dev/null +++ b/.agents/notes/implemented/feature/2026-08-03-web-turn-run-time.zh.md @@ -0,0 +1,27 @@ +# Agent Note: Web 轮次运行时长与悬停显示的时间附属元素 + +Status: implemented + +[English](2026-08-03-web-turn-run-time.md) | 中文 + +## 问题 + +Web 聊天界面会显示消息的到达时间,却不显示 agent(智能体)处理这条消息花了多久。长轮次除静态活动标签外没有任何实时进度信号,轮次结束后也无法从 UI 中还原实际耗时。与此同时,始终可见的时钟行给每条消息都增加了视觉噪音。 + +## 决策 + +轮次实际耗时(wall time)由相邻的已记录时间戳推导,不新增任何会话事件:`turnStartTimes` 把每个轮次映射到其前方最近的用户或 steering(中途引导)节点的时间,承载操作图标的 assistant 页脚在时钟旁把 `time - turnStart` 渲染为 `Ran for {duration}` 标签。运行中的 `TurnStatus` 标签新增一个实时已用时长时钟,锚定在 `lastInputTime` 上(即页脚计时所依据的同一已记录时刻),因此轮次进行中重新加载页面仍能保留真实的已用时长,最终标签也与实时时钟一致。该时钟在 15 秒后才出现,短轮次因此仍显示不带时钟的普通标签。 + +时钟与运行时长这类时间附属元素(time chrome)在悬停时才显示:消息容器通过 `data-time-hover-root` 属性显式启用该行为,`MessageIconActions.module.css` 在容器处于 `:hover`/`:focus-within` 时以淡入方式显示时间标签。该规则限定在 `@media (hover: hover)` 之内,触屏设备因此保持标签始终可见;显隐通过 opacity(而非 display)实现,布局保持稳定。复制与分支图标始终可见。 + +## 考虑过的替代方案 + +**专门的轮次开始会话事件。** 精确,但会仅为 UI 展示就新增一种模型不可见的事件类型;基于相邻时间戳的推导与轨迹表既有的推导方式属于同一族,且无需改动日志。若轮次的触发节点位于已加载窗口之外,则直接省略该标签。 + +**将实时时钟锚定到组件挂载时刻。** 更简单,但轮次进行中重新加载会让时钟从零重新计时,并与最终的页脚标签不一致。挂载时刻仅作为窗口内没有输入节点时的回退。 + +**将整个操作行隐藏至悬停时才显示。** 在评审中被否决:复制与分支是值得让用户发现的操作入口,而整行级别的显隐切换有布局偏移的风险。只有被动的时间文本由悬停控制显隐。 + +## 后果 + +轮次时长在运行中和结束后都可见,且不需要新的会话状态,两处读数在机制上必然一致。触发输入落在已加载窗口之外的轮次没有运行时长标签。未交互时,时间附属元素不再与消息内容争夺注意力;标签始终保留在 DOM 中,因此 ARIA 树快照不受影响。 diff --git a/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx b/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx index 3f87e40e8b..de882e8bb2 100644 --- a/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx +++ b/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx @@ -27,6 +27,9 @@ export interface AssistantMarkdownProps { /** Unix epoch ms for the IconActions clock; omitted while streaming or when * the parent withholds chrome (mid-turn content assistants). */ time?: number | undefined + /** Turn wall time in ms for the IconActions run-time label; omitted when the + * turn's triggering input is outside the loaded window. */ + runMs?: number | undefined /** Event sequence used as the fork boundary; omitted while streaming. */ seq?: number | undefined /** Fork the session through this finalized message's completed turn when eligible. */ @@ -79,7 +82,7 @@ function ThinkRow({ text, running, t }: { text: string; running: boolean; t: Ass } export const AssistantMarkdown = memo(function AssistantMarkdown({ - blocks, streaming, interrupted, time, seq, onFork, forkUnavailable, t, + blocks, streaming, interrupted, time, runMs, seq, onFork, forkUnavailable, t, }: AssistantMarkdownProps) { // Stable per locale revision (t identity changes on switch): a fresh object // per render would rebuild MarkdownText's component table every chunk. @@ -95,7 +98,7 @@ export const AssistantMarkdown = memo(function AssistantMarkdown({ // Footer only under settled content text; Think-only / streaming omit it. const showActions = !streaming && time !== undefined && hasContentText(blocks) return ( -