Fix reasoning section elapsed timers (#4629)

Fix reasoning-section elapsed timers so each thinking block measures
from when that block starts, not from the beginning of the run. This
prevents later “Thought for …” sections in long tool-using runs from
showing inflated durations that grow across the whole run.

## Root Cause

`ReasoningBlock` received the parent run timestamp and used it for both
the live elapsed timer and the final collapsed `Thought for …` label. In
multi-step runs, later reasoning rows can start well after the run
begins — for example after a tool call returns — so anchoring every row
to the run start made each new reasoning section inherit all prior run
time.

## Approach

- Make `ReasoningBlock` own its timing anchor locally.
- Capture the first render where that reasoning row is live.
- Use that captured timestamp for the live `ElapsedTime` display.
- Snapshot the final duration when the row transitions from `streaming`
to `completed`.
- Remove the misleading parent `timestamp` prop from the reasoning block
API.

Rows that mount already completed still render as bare `Thought`,
because the UI does not know their true start/end duration.

## Key Invariants

- A reasoning block’s elapsed time is scoped to that block, not the
whole run.
- Later reasoning blocks must not inherit time spent in previous
thinking, text, or tool-call sections.
- Historical/completed reasoning rows should not invent durations from
incomplete client-side timing data.
- The parent response timestamp remains available for response-level
metadata, but not for per-reasoning timing.

## Non-goals

- This does not persist reasoning start/end timestamps in the backend
schema.
- This does not change response-level `✓ done in …` timing.
- This does not alter reasoning ordering, markdown rendering, or
redacted reasoning behavior.

## Trade-offs

This uses the client-observed first-live-render time rather than a
persisted provider/server timestamp. That is intentionally scoped: it
fixes the live UI inflation bug without adding schema or event-model
changes. Historical rows still avoid showing made-up durations.

## Verification

```bash
cd packages/agents-server-ui
pnpm test src/components/ReasoningSection.test.tsx
pnpm typecheck
```

Also validated changeset coverage:

```bash
GITHUB_BASE_REF=main node scripts/check-changeset.mjs
```

## Files changed

- `.changeset/fix-reasoning-timers.md`
  - Adds a patch changeset for `@electric-ax/agents-server-ui`.

- `packages/agents-server-ui/src/components/AgentResponse.tsx`
  - Stops passing the parent run timestamp into `ReasoningBlock`.

- `packages/agents-server-ui/src/components/ReasoningSection.tsx`
  - Captures per-reasoning-row live start time.
- Uses that local start time for live and settled reasoning duration
labels.
  - Removes the `timestamp` prop from `ReasoningBlock`.

- `packages/agents-server-ui/src/components/ReasoningSection.test.tsx`
- Adds regression coverage proving live reasoning timers do not start
from the run timestamp.
- Adds client-rendered coverage for the live → completed transition
producing `Thought for Ns`.

Author: KyleAMathews

.changeset/fix-reasoning-timers.md

@@ -0,0 +1,5 @@
+---
+'@electric-ax/agents-server-ui': patch
+---
+
+Fix reasoning section elapsed timers so each thinking block measures from when that block starts, rather than from the beginning of the run.

packages/agents-server-ui/src/components/AgentResponse.tsx

@@ -666,7 +666,6 @@ export const AgentResponseLive = memo(function AgentResponseLive({
               key={entry.key}
               entry={entry.reasoning}
               isStreaming={isStreaming}
-              timestamp={timestamp}
               expanded={Boolean(expandedReasoning[entry.key])}
               onToggle={toggleReasoning}
             />

packages/agents-server-ui/src/components/ReasoningSection.test.tsx

@@ -0,0 +1,92 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ReasoningBlock, type ReasoningEntry } from './ReasoningSection'
+
+beforeAll(() => {
+  ;(
+    globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  ).IS_REACT_ACT_ENVIRONMENT = true
+})
+
+const streamingEntry: ReasoningEntry = {
+  key: `reasoning-1`,
+  order: `1`,
+  content: `Inspecting the code.`,
+  status: `streaming`,
+  summary_title: `Inspecting code`,
+}
+
+function renderReasoningBlock(
+  root: Root,
+  entry: ReasoningEntry,
+  isStreaming: boolean
+): void {
+  act(() => {
+    root.render(
+      <ReasoningBlock
+        entry={entry}
+        isStreaming={isStreaming}
+        expanded={false}
+        onToggle={() => {}}
+      />
+    )
+  })
+}
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe(`ReasoningBlock`, () => {
+  it(`anchors live thinking elapsed time to the reasoning block start, not the run start`, () => {
+    vi.useFakeTimers()
+    try {
+      const runStartedAt = new Date(`2026-01-01T00:00:00.000Z`).getTime()
+      vi.setSystemTime(runStartedAt + 5 * 60 * 1000)
+
+      const markup = renderToStaticMarkup(
+        <ReasoningBlock
+          entry={streamingEntry}
+          isStreaming={true}
+          expanded={false}
+          onToggle={() => {}}
+        />
+      )
+
+      expect(markup).toContain(`Elapsed time: 0s`)
+      expect(markup).not.toContain(`Elapsed time: 5m`)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it(`snapshots the reasoning duration when a live block completes`, () => {
+    vi.useFakeTimers()
+    const container = document.createElement(`div`)
+    document.body.appendChild(container)
+    const root = createRoot(container)
+
+    try {
+      const startedAt = new Date(`2026-01-01T00:00:00.000Z`).getTime()
+      vi.setSystemTime(startedAt)
+      renderReasoningBlock(root, streamingEntry, true)
+
+      vi.setSystemTime(startedAt + 3_000)
+      renderReasoningBlock(
+        root,
+        { ...streamingEntry, status: `completed` },
+        false
+      )
+
+      expect(container.textContent).toContain(`Thought for 3s`)
+    } finally {
+      act(() => root.unmount())
+      container.remove()
+      vi.useRealTimers()
+    }
+  })
+})

packages/agents-server-ui/src/components/ReasoningSection.tsx

@@ -8,7 +8,7 @@ import {
 import { Stack, Text } from '../ui'
 import { ThinkingIndicator } from './ThinkingIndicator'
 import { ElapsedTime } from './ElapsedTime'
-import { formatElapsedDuration, toMillis } from '../lib/formatTime'
+import { formatElapsedDuration } from '../lib/formatTime'
 import styles from './ReasoningSection.module.css'
 
 /**
@@ -63,13 +63,11 @@ export type ReasoningEntry = {
 export function ReasoningBlock({
   entry,
   isStreaming,
-  timestamp,
   expanded,
   onToggle,
 }: {
   entry: ReasoningEntry
   isStreaming: boolean
-  timestamp?: number | null
   expanded: boolean
   onToggle: (key: string) => void
 }): React.ReactElement {
@@ -79,26 +77,24 @@ export function ReasoningBlock({
     [entry.key, onToggle]
   )
 
-  // Snapshot the elapsed duration at the moment streaming flips to
-  // `completed`, the same `sawStreamingRef` trick used for "done in
-  // Xs" on `AgentResponse`. For reasoning rows that were already
-  // settled on first mount (page reload, scrollback into older
-  // turns) we don't have a real end timestamp, so the closure stays
-  // a bare "Thought" without a duration — better than printing a
-  // wildly-wrong number from `now() - userMessageTime`.
-  const sawStreamingRef = useRef<boolean>(isLive)
-  if (isLive) sawStreamingRef.current = true
+  // Capture this reasoning row's first live render time. Later rows
+  // may start after tool calls, so using the parent run timestamp
+  // overstates their duration. Rows mounted already completed keep a
+  // bare "Thought" label because we do not know their actual end time.
+  const liveStartedAtMsRef = useRef<number | null>(null)
+  if (isLive && liveStartedAtMsRef.current == null) {
+    liveStartedAtMsRef.current = Date.now()
+  }
   const [finalDurationMs, setFinalDurationMs] = useState<number | null>(null)
   useEffect(() => {
     if (
       entry.status === `completed` &&
-      sawStreamingRef.current &&
-      timestamp != null &&
+      liveStartedAtMsRef.current != null &&
       finalDurationMs == null
     ) {
-      setFinalDurationMs(Math.max(0, Date.now() - toMillis(timestamp)))
+      setFinalDurationMs(Math.max(0, Date.now() - liveStartedAtMsRef.current))
     }
-  }, [entry.status, timestamp, finalDurationMs])
+  }, [entry.status, finalDurationMs])
 
   // Redacted thinking — opaque payload, nothing to render.
   if (entry.encrypted && entry.content.trim().length === 0) {
@@ -126,12 +122,12 @@ export function ReasoningBlock({
               </Text>
             </>
           )}
-          {timestamp != null && (
+          {liveStartedAtMsRef.current != null && (
             <>
               <Text size={1} tone="muted" className={styles.separator}>
                 ·
               </Text>
-              <ElapsedTime ts={timestamp} enabled={isLive} />
+              <ElapsedTime ts={liveStartedAtMsRef.current} enabled={isLive} />
             </>
           )}
         </Stack>