feat: track and display turn and command execution durations in the Codex thread UI

Author: milisp

src/components/agent/codex-agent-card.tsx

@@ -58,7 +58,7 @@ export function CodexAgentCard({
   header,
   isSelected,
 }: CodexAgentCardProps) {
-  const { events, threadStatusMap, activeThreadIds } = useCodexStore();
+  const { events, threadStatusMap, turnTimingMap, activeThreadIds } = useCodexStore();
   const { pendingApprovals } = useApprovalStore();
   const { pendingRequests } = useRequestUserInputStore();
   const { setCurrentAgentCardId, updateCard } = useAgentCenterStore();
@@ -82,20 +82,28 @@ export function CodexAgentCard({
   const canApplyWorktree =
     !!card.worktreePath && !!cwd && !processing && !hasPending && worktreeHasChanges;
 
+  // turnTimingMap is the single source of truth for turn timing (see TurnTiming
+  // in useCodexStore) — driven directly by turn/started + turn/completed + error,
+  // so it stays correct even when a turn ends via error/interrupt, unlike scanning
+  // raw events which could disagree with threadStatusMap's active/idle flip.
+  const turnTiming = turnTimingMap[card.id];
+  const turnInProgress = turnTiming?.status === 'inProgress';
   const [elapsed, setElapsed] = useState(0);
-  const processingStartRef = useRef<number | null>(null);
-  const wasProcessingRef = useRef(processing);
 
-  if (processing && !wasProcessingRef.current) {
-    processingStartRef.current = Date.now();
-  }
-  wasProcessingRef.current = processing;
+  useEffect(() => {
+    if (!turnInProgress || !turnTiming) {
+      setElapsed(0);
+      return;
+    }
+
+    const { startedAtMs } = turnTiming;
+    setElapsed(Date.now() - startedAtMs);
+    const intervalId = setInterval(() => {
+      setElapsed(Date.now() - startedAtMs);
+    }, 200);
 
-  if (processing && processingStartRef.current) {
-    setElapsed(Date.now() - processingStartRef.current);
-  } else if (!processing) {
-    setElapsed(0);
-  }
+    return () => clearInterval(intervalId);
+  }, [turnInProgress, turnTiming]);
 
   useEffect(() => {
     const el = scrollRef.current;
@@ -125,7 +133,7 @@ export function CodexAgentCard({
   }, [card.worktreePath, cwd]);
 
   const handleStop = async () => {
-    const turnId = getCodexActiveTurnId(threadEvents);
+    const turnId = getCodexActiveTurnId(turnTiming);
     if (turnId) await codexService.turnInterrupt(card.id, turnId);
   };
 
@@ -194,9 +202,9 @@ export function CodexAgentCard({
       <div className="flex items-center justify-between px-2 py-1 border-t bg-muted/20 shrink-0">
         <div className="flex items-center gap-2">
           <span
-            className={`text-[10px] font-mono tabular-nums ${processing ? 'text-green-500' : 'text-muted-foreground/50'}`}
+            className={`text-[10px] font-mono tabular-nums ${turnInProgress ? 'text-green-500' : 'text-muted-foreground/50'}`}
           >
-            {processing && fmtElapsed(elapsed)}
+            {turnInProgress && fmtElapsed(elapsed)}
           </span>
           {tokens !== null && (
             <span className="text-[10px] text-muted-foreground/40">{fmtTokens(tokens)} tok</span>

src/components/agent/utils.ts

@@ -1,22 +1,19 @@
 // ─── Codex Utilities ──────────────────────────────────────────────────────
 
 import { ServerNotification } from "@/bindings";
+import type { TurnTiming } from "@/components/codex/stores/useCodexStore";
 
 /**
- * Extracts the current active turn ID from events.
- * Returns null if no active turn found.
+ * Extracts the current active turn ID from a TurnTiming record.
+ * Returns null if there is no in-progress turn.
+ *
+ * Prefer this over scanning raw events: turnTimingMap is updated directly by
+ * turn/started + turn/completed + error, so it can't disagree with itself
+ * the way independently scanning the events array for those same methods can
+ * (e.g. when an error notification arrives without a matching turn/completed).
  */
-export function getCodexActiveTurnId(events: ServerNotification[]): string | null {
-  for (let i = events.length - 1; i >= 0; i--) {
-    const e = events[i];
-    if (e.method === 'turn/started') {
-      return (e.params as { turn: { id: string } }).turn.id;
-    }
-    if (e.method === 'turn/completed' || e.method === 'error') {
-      return null;
-    }
-  }
-  return null;
+export function getCodexActiveTurnId(timing: TurnTiming | undefined): string | null {
+  return timing?.status === 'inProgress' ? timing.turnId : null;
 }
 
 /**
@@ -66,11 +63,12 @@ export function fmtTokens(n: number): string {
 
 /**
  * Formats elapsed time into minutes:seconds.
- * @param s - Elapsed time in seconds.
+ * @param ms - Elapsed time in milliseconds.
  * @returns Formatted string like "5:30" or "0:30".
  */
-export function fmtElapsed(s: number): string {
-  const m = Math.floor(s / 60);
-  const sec = s % 60;
+export function fmtElapsed(ms: number): string {
+  const totalSec = Math.max(0, Math.floor(ms / 1000));
+  const m = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
   return m > 0 ? `${m}:${String(sec).padStart(2, '0')}` : `0:${String(sec).padStart(2, '0')}`;
 }

src/components/codex/CodexThread.tsx

@@ -1,6 +1,5 @@
 import { useRef, useEffect, useState, useMemo, type ReactNode } from 'react';
 import { useCodexStore } from '@/components/codex/stores';
-import { useIsProcessing } from '@/components/codex/hooks';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { renderEvent } from './items';
 import { ApprovalItem } from './items/ApprovalItem';
@@ -12,6 +11,7 @@ import { codexService } from '@/services/codexService';
 import { Button } from '@/components/ui/button';
 import type { CommandAction } from '@/bindings/v2';
 import type { ServerNotification } from '@/bindings';
+import { WorkingIndicator } from './widget/WorkingIndicator';
 
 // Intermediate render item: either a raw event or an aggregated command group.
 type RenderItem =
@@ -96,13 +96,13 @@ function deriveRenderItems(events: ServerNotification[]): RenderItem[] {
 }
 
 export function CodexThread({ hideComposer = false }: { hideComposer?: boolean } = {}) {
-  const { currentThreadId, events, hasAccount, activeThreadIds } = useCodexStore();
+  const { currentThreadId, events, hasAccount, activeThreadIds, turnTimingMap } = useCodexStore();
   const isLive = !!currentThreadId && activeThreadIds.includes(currentThreadId);
-  const isProcessing = useIsProcessing();
   const bottomAnchorRef = useRef<HTMLDivElement>(null);
 
   // Get events for the current thread
   const currentThreadEvents = currentThreadId ? events[currentThreadId] || [] : [];
+  const turnTiming = currentThreadId ? turnTimingMap[currentThreadId] : undefined;
 
   // Auto-scroll to bottom when new events arrive
   useEffect(() => {
@@ -165,9 +165,7 @@ export function CodexThread({ hideComposer = false }: { hideComposer?: boolean }
             ))}
             <ApprovalItem />
             {currentThreadEvents.length === 0 && hasAccount === false && <CodexAuth />}
-            {isProcessing && (
-              <div className="text-sm text-muted-foreground animate-pulse">Thinking</div>
-            )}
+            <WorkingIndicator turnTiming={turnTiming} />
             <RequestUserInputItem currentThreadId={currentThreadId} />
             <div ref={bottomAnchorRef} aria-hidden="true" />
           </div>

src/components/codex/items/McpToolCallItem.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { ThreadItem } from "@/bindings/v2";
 import { Badge } from "@/components/ui/badge";
 import { Loader2, X, ChevronDown, ChevronRight } from "lucide-react";
+import { fmtElapsed } from "@/components/agent/utils";
 
 type Props = {
   item: ThreadItem
@@ -48,6 +49,12 @@ export function McpToolCallItem({ item }: Props) {
             {item.mcpAppResourceUri}
           </div>
         )}
+
+        {status !== 'inProgress' && typeof item.durationMs === 'number' && (
+          <span className="ml-auto text-xs text-neutral-400 font-mono shrink-0">
+            {fmtElapsed(item.durationMs)}
+          </span>
+        )}
       </div>
 
       {isExpanded && hasDetails && (

src/components/codex/items/ShellCommand.tsx

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
 import { useCodexStore } from '@/components/codex/stores';
 import { Badge } from '@/components/ui/badge';
 import { useTranslation } from 'react-i18next';
+import { fmtElapsed } from '@/components/agent/utils';
 
 interface ShellCommandProps {
   command: string;
@@ -47,8 +48,9 @@ export const ShellCommand = ({ command, commandItemId, aggregatedOutput }: Shell
     }
   };
 
-  const { commandStatusMap } = useCodexStore();
+  const { commandStatusMap, commandDurationMap } = useCodexStore();
   const status = commandItemId ? commandStatusMap[commandItemId] : undefined;
+  const durationMs = commandItemId ? commandDurationMap[commandItemId] : undefined;
   const { variant, icon: Icon } = STATUS_STYLE_MAP[status ?? ''] ?? DEFAULT_STYLE;
 
   return (
@@ -114,7 +116,12 @@ export const ShellCommand = ({ command, commandItemId, aggregatedOutput }: Shell
             </div>
           )}
 
-          <div className="flex justify-end p-2">
+          <div className="flex items-center justify-end gap-2 p-2">
+            {typeof durationMs === 'number' && (
+              <span className="text-xs text-muted-foreground/60 font-mono">
+                {fmtElapsed(durationMs)}
+              </span>
+            )}
             <Badge
               variant={variant}
               className="flex items-center gap-1.5 px-2.5 py-1 w-fit"

src/components/codex/stores/useCodexStore.ts

@@ -3,6 +3,28 @@ import type { ServerNotification } from '@/bindings';
 import type { ThreadStatus, CommandExecutionStatus, Thread, ThreadTokenUsage } from '@/bindings/v2';
 import { codexService } from '@/services/codexService';
 
+/**
+ * Per-thread turn timing, tracked as the single source of truth for
+ * "how long is this turn taking / how long did it take".
+ *
+ * Sourced directly from turn/started + turn/completed + error notifications,
+ * independent of thread/status/changed. thread/status/changed only carries
+ * active/idle/error flags with no timestamps, and can race with turn events
+ * (e.g. on error/interrupt), so deriving elapsed time by scanning the raw
+ * events array for turn/started vs turn/completed produced stale/incorrect
+ * timers when the two streams disagreed. Keeping timing here, updated
+ * directly by the turn lifecycle events, removes that race entirely.
+ */
+export interface TurnTiming {
+  turnId: string;
+  /** ms since epoch, from turn/started's turn.startedAt (server clock). */
+  startedAtMs: number;
+  /** Set once the turn completes/fails/is interrupted (turn/completed). */
+  durationMs: number | null;
+  /** Last known turn status; 'inProgress' while active. */
+  status: 'inProgress' | 'completed' | 'interrupted' | 'failed';
+}
+
 type DeltaMethod = 'item/agentMessage/delta';
 
 type DeltaEvent = Extract<ServerNotification, { method: DeltaMethod }>;
@@ -61,8 +83,12 @@ interface CodexStore {
   events: Record<string, ServerNotification[]>; // Events per thread
   /** Per-thread status derived from thread/status/changed (authoritative) and turn events (fallback) */
   threadStatusMap: Record<string, ThreadStatus>;
+  /** Per-thread timing of the most recent turn, see TurnTiming for why this is separate from threadStatusMap. */
+  turnTimingMap: Record<string, TurnTiming>;
   /** Command status map: itemId -> CommandExecutionStatus */
   commandStatusMap: Record<string, CommandExecutionStatus>;
+  /** Command duration map: itemId -> durationMs, populated on item/completed for commandExecution. */
+  commandDurationMap: Record<string, number | null>;
   activeThreadIds: string[]; // Track resumed/active threads
   inputFocusTrigger: number; // Increment to trigger focus in InputArea
   threadListNextCursor: string | null;
@@ -100,7 +126,9 @@ export const useCodexStore = create<CodexStore>((set, get) => ({
   hasAccount: null,
   events: {},
   threadStatusMap: {},
+  turnTimingMap: {},
   commandStatusMap: {},
+  commandDurationMap: {},
   activeThreadIds: [],
   inputFocusTrigger: 0,
   threadListNextCursor: null,
@@ -169,8 +197,57 @@ export const useCodexStore = create<CodexStore>((set, get) => ({
         threadStatusMap = { ...threadStatusMap, [threadId]: event.params.status };
       }
 
+      // Update turn timing map: single source of truth for turn elapsed/duration,
+      // independent of thread/status/changed (see TurnTiming doc comment).
+      let turnTimingMap = state.turnTimingMap;
+      if (event.method === 'turn/started') {
+        const { turn } = event.params;
+        turnTimingMap = {
+          ...turnTimingMap,
+          [threadId]: {
+            turnId: turn.id,
+            startedAtMs: typeof turn.startedAt === 'number' ? turn.startedAt * 1000 : Date.now(),
+            durationMs: null,
+            status: 'inProgress',
+          },
+        };
+      } else if (event.method === 'turn/completed') {
+        const { turn } = event.params;
+        const existing = turnTimingMap[threadId];
+        // Only update if this completion matches the turn we're tracking (or we have none tracked).
+        if (!existing || existing.turnId === turn.id) {
+          turnTimingMap = {
+            ...turnTimingMap,
+            [threadId]: {
+              turnId: turn.id,
+              startedAtMs:
+                existing?.startedAtMs ??
+                (typeof turn.startedAt === 'number' ? turn.startedAt * 1000 : Date.now()),
+              durationMs: turn.durationMs,
+              status: turn.status === 'inProgress' ? 'completed' : turn.status,
+            },
+          };
+        }
+      } else if (event.method === 'error') {
+        // Standalone error notification: if it targets the turn we're tracking
+        // and no turn/completed has landed yet, mark it failed so the UI stops
+        // showing "Working..." even if turn/completed never arrives.
+        const existing = turnTimingMap[threadId];
+        if (existing && existing.turnId === event.params.turnId && existing.status === 'inProgress') {
+          turnTimingMap = {
+            ...turnTimingMap,
+            [threadId]: {
+              ...existing,
+              durationMs: Date.now() - existing.startedAtMs,
+              status: 'failed',
+            },
+          };
+        }
+      }
+
       // Update command status map
       let commandStatusMap = state.commandStatusMap;
+      let commandDurationMap = state.commandDurationMap;
       if (event.method === 'item/started' && event.params.item?.type === 'commandExecution') {
         commandStatusMap = {
           ...commandStatusMap,
@@ -181,12 +258,18 @@ export const useCodexStore = create<CodexStore>((set, get) => ({
           ...commandStatusMap,
           [event.params.item.id]: event.params.item.status,
         };
+        commandDurationMap = {
+          ...commandDurationMap,
+          [event.params.item.id]: event.params.item.durationMs,
+        };
       }
 
       return {
         events: newEvents,
         threadStatusMap,
+        turnTimingMap,
         commandStatusMap,
+        commandDurationMap,
       };
     });
   },