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.

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 (
-    <div className={css.root} data-streaming={streaming || undefined}>
+    <div className={css.root} data-streaming={streaming || undefined} data-time-hover-root>
       <div className={css.body}>
         {blocks.map((block, i) => {
           switch (block.kind) {
@@ -121,6 +124,7 @@ export const AssistantMarkdown = memo(function AssistantMarkdown({
         <MessageIconActions
           text={copyText(blocks)}
           time={time}
+          runMs={runMs}
           clock="end"
           onBranch={onFork === undefined || seq === undefined ? undefined : () => { onFork(seq) }}
           branchUnavailable={forkUnavailable}

packages/client/ui-conversation/src/client/chat/ChatView.module.css

@@ -93,6 +93,15 @@
   animation: dsh-turn-status-shimmer 1.8s linear infinite;
 }
 
+.turnStatusClock {
+  margin-left: 8px;
+  font: var(--dsw-font-xs-13);
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-caption);
+  -webkit-text-fill-color: var(--dsw-alias-label-caption);
+}
+
 @keyframes dsh-turn-status-shimmer {
   to {
     background-position: 0 0;

packages/client/ui-conversation/src/client/chat/ChatView.tsx

@@ -30,7 +30,7 @@ import type {
 import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
 import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatViewSlotProps } from '../contract/slots.ts'
-import { assistantActionsSeqs, deriveChatFlow, messageBranchSeqs, type ChatFlowItem } from './chat-flow.ts'
+import { assistantActionsSeqs, deriveChatFlow, lastInputTime, messageBranchSeqs, turnStartTimes, type ChatFlowItem } from './chat-flow.ts'
 import { AssistantMarkdown } from './AssistantMarkdown.tsx'
 import { GenericCommandCard } from './GenericCommandCard.tsx'
 import { GenericToolCard } from './GenericToolCard.tsx'
@@ -205,10 +205,34 @@ const CommandRow = memo(function CommandRow({ renderSlot, node, t }: {
 })
 
 /** Turn-level model activity label retained across first-token, tool, and streaming phases. */
-function TurnStatus() {
+function TurnStatus({ startTime }: {
+  /** The running turn's logged trigger time; null falls back to mount time
+   *  (input node outside the window), which restarts the clock on reload. */
+  startTime: number | null
+}) {
+  const [mountedAt] = useState(() => Date.now())
+  // Anchored to the logged trigger so a mid-turn reload keeps the real
+  // elapsed time and the final footer's Ran-for label matches this clock.
+  const anchor = startTime ?? mountedAt
+  const [elapsedSeconds, setElapsedSeconds] = useState(() => Math.max(0, Math.floor((Date.now() - anchor) / 1000)))
+  useEffect(() => {
+    const tick = (): void => {
+      setElapsedSeconds(Math.max(0, Math.floor((Date.now() - anchor) / 1000)))
+    }
+    tick()
+    const id = setInterval(tick, 1000)
+    return () => { clearInterval(id) }
+  }, [anchor])
+  const minutes = Math.floor(elapsedSeconds / 60)
+  const seconds = elapsedSeconds % 60
+  const clock = minutes > 0 ? `${minutes}m ${String(seconds).padStart(2, '0')}s` : `${seconds}s`
+  // Short turns keep the plain label; the clock only appears once the turn
+  // has clearly been running for a while.
+  const showClock = elapsedSeconds >= 15
   return (
     <div className={css.turnStatus} role="status" aria-live="polite">
       Deep diving...
+      {showClock && <span className={css.turnStatusClock}>{clock}</span>}
     </div>
   )
 }
@@ -259,6 +283,8 @@ export function ChatView({
   // text (before tools) omits `time` so AssistantMarkdown stays chrome-free.
   const actionSeqs = useMemo(() => assistantActionsSeqs(nodes), [nodes])
   const branchSeqs = useMemo(() => messageBranchSeqs(nodes, turnEnds), [nodes, turnEnds])
+  const turnStarts = useMemo(() => turnStartTimes(nodes), [nodes])
+  const runningTurnStart = useMemo(() => lastInputTime(nodes), [nodes])
 
   const listRef = useRef<HTMLDivElement | null>(null)
   const atBottomRef = useRef(true)
@@ -406,6 +432,7 @@ export function ChatView({
     }
     const node: ConversationNode = item.node
     if (node.kind === 'assistant') {
+      const turnStart = actionSeqs.has(node.seq) ? turnStarts.get(node.turn) : undefined
       return (
         <AssistantMarkdown
           key={item.key}
@@ -413,6 +440,7 @@ export function ChatView({
           streaming={false}
           interrupted={node.interrupted}
           time={actionSeqs.has(node.seq) ? node.time : undefined}
+          runMs={turnStart === undefined ? undefined : Math.max(0, node.time - turnStart)}
           seq={node.seq}
           onFork={forkAt}
           forkUnavailable={!branchSeqs.has(node.seq)}
@@ -481,7 +509,7 @@ export function ChatView({
               double-render the same wait. */}
           {/* Turn-level loading signal: rides the whole running turn (first-token
               wait, tool execution, streaming) so it never flickers per step. */}
-          {running && <TurnStatus />}
+          {running && <TurnStatus startTime={runningTurnStart} />}
           {pendingSteering.map(item => (
             <PendingSteeringBubble key={item.id} content={item.content} t={t} />
           ))}

packages/client/ui-conversation/src/client/chat/MessageIconActions.module.css

@@ -1,5 +1,6 @@
 /* Shared message IconActions row (user + assistant). Parent modules own
-   layout offsets via the composed className. Always visible when mounted. */
+   layout offsets via the composed className. Icons stay visible when mounted;
+   the time label is hover-revealed inside a data-time-hover-root scope. */
 
 .actions {
   display: flex;
@@ -25,6 +26,26 @@
   white-space: nowrap;
 }
 
+/* Separator between the clock and the run-time label (time · Ran for 15s). */
+.runTimeDot {
+  margin: 0 10px;
+}
+
+/* Message containers opt in with data-time-hover-root: the time label fades
+   in on message hover (or keyboard focus within). Opacity keeps the layout
+   stable, and devices without hover keep the label always visible. */
+@media (hover: hover) {
+  [data-time-hover-root] :is(.timeStart, .timeEnd) {
+    opacity: 0;
+    transition: opacity 80ms ease;
+  }
+
+  [data-time-hover-root]:hover :is(.timeStart, .timeEnd),
+  [data-time-hover-root]:focus-within :is(.timeStart, .timeEnd) {
+    opacity: 1;
+  }
+}
+
 .action {
   display: inline-flex;
   align-items: center;

packages/client/ui-conversation/src/client/chat/MessageIconActions.tsx

@@ -6,7 +6,7 @@ import {
   IconBranchOutline16, IconCopyOutline16, Tooltip,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatViewSlotProps } from '../contract/slots.ts'
-import { formatMessageClock, writeClipboard } from './message-chrome.ts'
+import { formatMessageClock, formatRunDuration, writeClipboard } from './message-chrome.ts'
 import { useCalendarDay } from './use-calendar-day.ts'
 import css from './MessageIconActions.module.css'
 
@@ -15,6 +15,8 @@ export interface MessageIconActionsProps {
   text: string
   /** Unix epoch ms for the clock label; omitted for transient messages. */
   time?: number | undefined
+  /** Turn wall time in ms, appended to the clock as `· Ran for 15s`; omitted when the turn's start is unknown. */
+  runMs?: number | undefined
   /** Clock before icons (user) or after (assistant). */
   clock: 'start' | 'end'
   /** Fork the session at this message; omission hides the branch action. */
@@ -35,7 +37,7 @@ export interface MessageIconActionsProps {
  * @returns The actions row element.
  */
 export function MessageIconActions({
-  text, time, clock, onBranch, branchUnavailable = false, showBranch = true, className, t,
+  text, time, runMs, clock, onBranch, branchUnavailable = false, showBranch = true, className, t,
 }: MessageIconActionsProps) {
   const day = useCalendarDay()
   const reasonId = useId()
@@ -45,6 +47,12 @@ export function MessageIconActions({
   const clockEl = time === undefined ? null : (
     <span className={clock === 'start' ? css.timeStart : css.timeEnd}>
       {formatMessageClock(time, t, day)}
+      {runMs !== undefined && (
+        <>
+          <span className={css.runTimeDot} aria-hidden>·</span>
+          {t('message.ranFor', { duration: formatRunDuration(runMs) })}
+        </>
+      )}
     </span>
   )
   return (

packages/client/ui-conversation/src/client/chat/MessageItem.tsx

@@ -183,7 +183,7 @@ function UserStyleBubble({
   const { text, rest } = contentText(content)
   const truncated = (total: number): string => t('json.truncated', { total })
   return (
-    <div className={css.userRow} data-pending-steering={pending || undefined}>
+    <div className={css.userRow} data-pending-steering={pending || undefined} data-time-hover-root>
       <div className={css.bubble}>
         {projectUserText(text)}
         {rest.map((block, i) => <JsonBlock key={i} label={t('message.extraBlock')} payload={block} truncatedLabel={truncated} />)}

packages/client/ui-conversation/src/client/chat/chat-flow.ts

@@ -47,6 +47,43 @@ export function assistantActionsSeqs(nodes: readonly ConversationNode[]): Readon
   return new Set(lastByTurn.values())
 }
 
+/**
+ * Approximate turn start times: turn number -> the time of the nearest
+ * user/steering node preceding the turn's first assistant node. Same
+ * derivation family as the trajectory fold (adjacent logged timestamps, no
+ * dedicated turn/start state); a turn whose triggering input is outside the
+ * loaded window is simply absent.
+ * @param nodes - snapshot nodes in event order.
+ * @returns Unix epoch ms per in-window turn with a visible trigger.
+ */
+export function turnStartTimes(nodes: readonly ConversationNode[]): ReadonlyMap<number, number> {
+  const starts = new Map<number, number>()
+  let lastInputTime: number | null = null
+  for (const node of nodes) {
+    if (node.kind === 'user' || node.kind === 'steering') {
+      lastInputTime = node.time
+    } else if (node.kind === 'assistant' && lastInputTime !== null && !starts.has(node.turn)) {
+      starts.set(node.turn, lastInputTime)
+    }
+  }
+  return starts
+}
+
+/**
+ * Time of the last user/steering node in the window: the running turn's
+ * trigger, anchoring the live TurnStatus clock to the same logged instant the
+ * finalized footer's run time is measured from.
+ * @param nodes - snapshot nodes in event order.
+ * @returns Unix epoch ms, or null when no input node is in-window.
+ */
+export function lastInputTime(nodes: readonly ConversationNode[]): number | null {
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i]
+    if (node?.kind === 'user' || node?.kind === 'steering') return node.time
+  }
+  return null
+}
+
 /**
  * Seq set of message rows that may fork: the last transcript node of a
  * completed turn, when that node owns message chrome. A later tool, reasoning,

packages/client/ui-conversation/src/client/chat/message-chrome.ts

@@ -71,6 +71,19 @@ export function msUntilNextLocalMidnight(ms: number): number {
   return Math.max(next.getTime() - ms, 1)
 }
 
+/**
+ * Compact elapsed-time label for the turn run-time chrome, matching the
+ * running TurnStatus clock format: `15s` under a minute, `2m 05s` from there.
+ * @param ms - Elapsed duration in milliseconds (negatives clamp to zero).
+ * @returns Display string in whole seconds.
+ */
+export function formatRunDuration(ms: number): string {
+  const total = Math.max(0, Math.round(ms / 1000))
+  const minutes = Math.floor(total / 60)
+  const seconds = total % 60
+  return minutes > 0 ? `${minutes}m ${String(seconds).padStart(2, '0')}s` : `${seconds}s`
+}
+
 /**
  * Compact local timestamp for message IconActions. Same calendar day →
  * `HH:mm`; earlier this year → the `clock.md` date template + clock; other

packages/client/ui-conversation/src/client/locales.ts

@@ -68,6 +68,7 @@ export const zh = {
   'message.retry.delay': '重试延迟：',
   'message.retry.failure': '失败原因：',
   'message.turnError': '本轮运行失败',
+  'message.ranFor': '用时 {duration}',
   'command.running': '执行中…',
   'command.failed': '命令失败',
   'command.done': '已完成',
@@ -176,6 +177,7 @@ export const en = {
   'message.retry.delay': 'Retry delay: ',
   'message.retry.failure': 'Failure reason: ',
   'message.turnError': 'This turn failed',
+  'message.ranFor': 'Ran for {duration}',
   'command.running': 'Running…',
   'command.failed': 'Command failed',
   'command.done': 'Completed',

packages/client/ui-conversation/tests/chat-view.spec.tsx

@@ -20,7 +20,8 @@ import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts
 import { createChatStore } from '../src/client/stores.ts'
 import { ChatView } from '../src/client/chat/ChatView.tsx'
 import { zh } from '../src/client/locales.ts'
-import { assistantActionsSeqs, deriveChatFlow, flowKeys, messageBranchSeqs } from '../src/client/chat/chat-flow.ts'
+import { assistantActionsSeqs, deriveChatFlow, flowKeys, lastInputTime, messageBranchSeqs, turnStartTimes } from '../src/client/chat/chat-flow.ts'
+import { formatRunDuration } from '../src/client/chat/message-chrome.ts'
 
 afterEach(cleanup)
 // Keyless create() persists under the bare declared key; clear between cases
@@ -212,6 +213,35 @@ describe('chat-flow derivation', () => {
     expect([...seqs].sort((a, b) => a - b)).toEqual([5, 7])
   })
 
+  it('turnStartTimes anchors each turn to the nearest preceding input node', () => {
+    const starts = turnStartTimes([
+      user(1, 'hi'),
+      assistant(2, 'mid', 1),
+      assistant(5, 'done', 1),
+      {
+        kind: 'steering', messageId: 'st' as never,
+        seq: 6, time: 6_000, turn: 1,
+        content: [{ type: 'text', text: 'also' }], source: null,
+      },
+      assistant(7, 'second turn', 2),
+    ])
+    expect([...starts]).toEqual([[1, 1_000], [2, 6_000]])
+    // No input in-window before the turn's first assistant: the turn is absent.
+    expect(turnStartTimes([assistant(2, 'orphan', 1)]).size).toBe(0)
+  })
+
+  it('formatRunDuration matches the running clock format', () => {
+    expect(formatRunDuration(0)).toBe('0s')
+    expect(formatRunDuration(-500)).toBe('0s')
+    expect(formatRunDuration(15_400)).toBe('15s')
+    expect(formatRunDuration(125_000)).toBe('2m 05s')
+  })
+
+  it('lastInputTime returns the trailing input node time', () => {
+    expect(lastInputTime([user(1, 'hi'), assistant(2, 'mid', 1)])).toBe(1_000)
+    expect(lastInputTime([assistant(2, 'orphan', 1)])).toBeNull()
+  })
+
   it('messageBranchSeqs keeps only message rows at completed transcript tails', () => {
     const interruptedThink: AssistantMessageNode = {
       kind: 'assistant', seq: 4.1, time: 4_100, turn: 1, step: 2,
@@ -447,6 +477,39 @@ describe('ChatView', () => {
     expect(branchButtons.map(button => button.getAttribute('aria-disabled'))).toEqual(['true', null, 'true', null])
   })
 
+  it('the actions-owning assistant footer shows the turn run time', () => {
+    const h = makeHarness({
+      nodes: [
+        user(1, 'hi'), // time 1_000
+        assistant(2, 'mid-turn text'),
+        assistant(16, 'final answer'), // time 16_000 → 15s
+      ],
+      turnEnds: new Map([[1, 16]]),
+    })
+    const view = render(<h.ChatView {...h.props} />)
+    // Only the turn-tail footer carries the label; mid-turn chrome stays bare.
+    expect(view.getAllByText(/用时 15s/)).toHaveLength(1)
+  })
+
+  it('user and assistant message containers scope the hover-revealed time chrome', () => {
+    const h = makeHarness({
+      nodes: [user(1, 'hi'), assistant(2, 'answer')],
+      turnEnds: new Map([[1, 2]]),
+    })
+    const view = render(<h.ChatView {...h.props} />)
+    // One scope per message row; the CSS reveal keys off this attribute.
+    expect(view.container.querySelectorAll('[data-time-hover-root]')).toHaveLength(2)
+  })
+
+  it('the run-time label is withheld when the turn start is outside the window', () => {
+    const h = makeHarness({
+      nodes: [assistant(16, 'tail without trigger')],
+      turnEnds: new Map([[1, 16]]),
+    })
+    const view = render(<h.ChatView {...h.props} />)
+    expect(view.queryByText(/用时/)).toBeNull()
+  })
+
   it('enables fork only on the finalized assistant at the completed transcript tail', () => {
     const h = makeHarness({
       nodes: [user(1, 'question'), assistant(2, 'answer')],
@@ -607,6 +670,14 @@ describe('ChatView', () => {
     expect(view.getByRole('status').textContent).toBe('Deep diving...')
   })
 
+  it('the running TurnStatus clock anchors to the logged trigger time, surviving reload', () => {
+    const trigger: UserMessageNode = { ...user(1, 'go'), time: Date.now() - 125_000 }
+    const h = makeHarness({ nodes: [trigger], running: true })
+    const view = render(<h.ChatView {...h.props} />)
+    // Freshly mounted (as after a reload) yet already past the 15s gate.
+    expect(view.getByRole('status').textContent).toMatch(/^Deep diving\.\.\.2m 0\ds$/)
+  })
+
   it('dispatches each tool row through the keyed slot with the tool name as entryKey', () => {
     const h = makeHarness({ nodes: [toolResult(3, 'a')] })
     const calls: { key: string; entryKey?: string }[] = []