feat(tui): live per-message response timing

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -7,6 +7,7 @@ import {
   For,
   Match,
   on,
+  onCleanup,
   onMount,
   Show,
   Switch,
@@ -1323,12 +1324,44 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
     return props.message.finish && !["tool-calls", "unknown"].includes(props.message.finish)
   })
 
-  const duration = createMemo(() => {
-    if (!final()) return 0
-    if (!props.message.time.completed) return 0
+  const [now, setNow] = createSignal(Date.now())
+  createEffect(() => {
+    if (final() || props.message.time.completed) return
+    const id = setInterval(() => setNow(Date.now()), 1000)
+    onCleanup(() => clearInterval(id))
+  })
+
+  const parentTime = createMemo(() => {
     const user = messages().find((x) => x.role === "user" && x.id === props.message.parentID)
-    if (!user || !user.time) return 0
-    return props.message.time.completed - user.time.created
+    return user?.time?.created ?? 0
+  })
+
+  const elapsed = createMemo(() => {
+    if (!parentTime()) return 0
+    const end = props.message.time.completed ?? now()
+    return end - parentTime()
+  })
+
+  const duration = createMemo(() => {
+    if (!final() && elapsed() < 1000) return 0
+    return elapsed()
+  })
+
+  const durationText = createMemo(() => {
+    const ms = duration()
+    if (!ms) return ""
+    const s = Math.floor(ms / 1000)
+    if (s === 0) return ""
+    if (s < 60) return `${s}s`
+    const m = Math.floor(s / 60)
+    const sec = s % 60
+    if (m < 60) return sec > 0 ? `${m}m ${sec}s` : `${m}m`
+    const h = Math.floor(m / 60)
+    const min = m % 60
+    if (h < 24) return min > 0 ? `${h}h ${min}m` : `${h}h`
+    const d = Math.floor(h / 24)
+    const hr = h % 24
+    return hr > 0 ? `${d}d ${hr}h` : `${d}d`
   })
 
   const keybind = useKeybind()
@@ -1389,7 +1422,7 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
               <span style={{ fg: theme.text }}>{Locale.titlecase(props.message.mode)}</span>
               <span style={{ fg: theme.textMuted }}> · {props.message.modelID}</span>
               <Show when={duration()}>
-                <span style={{ fg: theme.textMuted }}> · {Locale.duration(duration())}</span>
+                <span style={{ fg: theme.textMuted }}> · {durationText()}</span>
               </Show>
               <Show when={props.message.error?.name === "MessageAbortedError"}>
                 <span style={{ fg: theme.textMuted }}> · interrupted</span>