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',