feat: show elapsed time for tool calls and reasoning box in AI chat - #508

packages/ai-core/src/components/ToolCallInfo.tsx (1)

62-80: Give the disclosure trigger explicit button semantics.

Line 62 toggles a collapsible region, but the trigger still lacks type="button" and doesn't expose its open state. Adding type="button" plus aria-expanded (and ideally aria-controls) makes this safe inside forms and announces the expand/collapse state to assistive tech.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ai-core/src/components/ToolCallInfo.tsx` around lines 62 - 80, The
disclosure button in ToolCallInfo (the <button> that calls toggle and renders
ChevronDownIcon/ChevronRightIcon using isExpanded, toolName, showElapsed,
elapsedText) needs explicit button semantics: add type="button" to prevent
accidental form submissions, add aria-expanded={isExpanded} to expose open
state, and add aria-controls pointing to the collapsible region's id (create or
reuse a stable id for the content panel) so assistive tech can associate the
trigger with the controlled region.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

packages/ai-core/src/hooks/useToolGrouping.tsx (1)

34-35: Avoid a fresh {} default for toolDisplayNames.

Because AnalysisResult forwards this prop as undefined when it is omitted, the default object here is recreated on every render. That makes the useMemo dependency change every time, so regrouping reruns unconditionally.

♻️ Proposed fix

+const EMPTY_TOOL_DISPLAY_NAMES: Record<string, string> = {};
+
 export function useToolGrouping(
   uiMessageParts: UIMessagePart[],
   containerWidth: number = 0,
   exclude: string[] = [],
-  toolDisplayNames: Record<string, string> = {},
+  toolDisplayNames: Record<string, string> = EMPTY_TOOL_DISPLAY_NAMES,
 ): ToolGroup[] {

Also applies to: 199-199

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ai-core/src/hooks/useToolGrouping.tsx` around lines 34 - 35, The
default parameter toolDisplayNames: Record<string,string> = {} in
useToolGrouping creates a new object each render; change the signature to accept
toolDisplayNames?: Record<string,string> (or default to a module‑level constant)
and introduce a single stable EMPTY_TOOL_DISPLAY_NAMES = Object.freeze({}) at
top scope, then use that constant inside useToolGrouping (referencing
toolDisplayNames ?? EMPTY_TOOL_DISPLAY_NAMES) so the memo deps are stable; make
the same change for the other occurrence that uses the same default for
toolDisplayNames.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

packages/ai-core/src/chatTransport.ts (1)

39-78: Consider documenting the mutation expectation or returning a new array.

This function mutates msg.metadata in-place. It works correctly because all call sites pass the result of fixIncompleteToolCalls(), which returns cloned message objects. However, this implicit contract could be fragile if a future caller passes the original messages array.

Consider either:

1. Adding a JSDoc note that the function mutates messages and expects cloned input, or
2. Returning a new array with updated metadata (more defensive but adds allocation overhead)

The current implementation is functional—this is just a suggestion for maintainability.

📝 Option 1: Add documentation

 /**
  * Write tool timings from the store into assistant message metadata so they
  * survive serialization.
+ *
+ * **Note:** This function mutates `messages` in place. Callers should pass
+ * cloned messages (e.g., from `fixIncompleteToolCalls`).
  */
 function writeToolTimingsToMetadata(

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ai-core/src/chatTransport.ts` around lines 39 - 78, The function
writeToolTimingsToMetadata mutates each UIMessage's msg.metadata in-place and
relies on callers (currently fixIncompleteToolCalls) to supply cloned messages;
add a clear JSDoc above writeToolTimingsToMetadata stating that it mutates the
messages array and expects cloned UIMessage objects (reference UIMessage,
AssistantMessageMetadata, and fixIncompleteToolCalls) so callers know not to
pass original arrays, or alternatively refactor writeToolTimingsToMetadata to be
pure by returning a new UIMessage[] with updated metadata (update call sites
accordingly) if you prefer the defensive non-mutating approach.

packages/ai-core/src/components/ReasoningBox.tsx (2)

69-94: Agent name formatting is duplicated.

The name formatting logic (lines 80-83) is identical to ReasoningBox.tsx lines 80-83. Consider extracting to a shared utility:

♻️ Extract shared formatter

// In a shared utils file
export function formatAgentName(toolName: string): string {
  return toolName
    .replace(/-/g, ' ')
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/\b\w/g, (c) => c.toUpperCase());
}

This is the same pattern as formatToolNameFallback in useToolGrouping.tsx (lines 220-225), so you could potentially reuse that function.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ai-core/src/components/ReasoningBox.tsx` around lines 69 - 94,
Extract the duplicated agent name formatting from latestSubReasoning into a
shared utility (e.g., formatAgentName) and replace the inline logic inside
latestSubReasoning with a call to that utility; update any other places using
the same pattern (refer to formatToolNameFallback in useToolGrouping.tsx) to
reuse the new function, ensuring latestSubReasoning still calls
truncateToFit(reasoning, containerWidth, prefix.length) with prefix =
`${formatAgentName(tc.toolName)}: ` and that agentProgress and containerWidth
remain in the useMemo dependency array.

---

39-43: Selecting entire toolTimings object may cause excess re-renders.

Line 39 selects the entire s.ai.toolTimings record. Any timing update to any tool call will trigger a re-render of this component, even if none of the toolCallIds for this box changed. Consider selecting only the relevant entries:

♻️ Scoped timing selection

-  const toolTimings = useStoreWithAi((s) => s.ai.toolTimings);
+  const relevantTimings = useStoreWithAi((s) => {
+    if (!toolCallIds?.length) return undefined;
+    const result: Record<string, { startedAt: number; completedAt?: number }> = {};
+    for (const id of toolCallIds) {
+      const t = s.ai.toolTimings[id];
+      if (t) result[id] = t;
+    }
+    return result;
+  });

Then update the useMemo to use relevantTimings instead of toolTimings. Note: The selector now derives an object, so you should use a shallow-equality check or move the derivation to useMemo with raw IDs as dependency. A cleaner approach per coding guidelines:

+  // Select raw timing entries individually to avoid selector-derived objects
+  const timingEntries = useMemo(() => {
+    if (!toolCallIds?.length) return [];
+    return toolCallIds.map((id) => toolTimings[id]).filter(Boolean);
+  }, [toolCallIds, toolTimings]);

This keeps the selector simple while the derivation happens in React.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ai-core/src/components/ReasoningBox.tsx` around lines 39 - 43, The
component currently selects the entire s.ai.toolTimings via useStoreWithAi which
causes unnecessary re-renders; change the selector to only read the raw tool
call IDs needed (e.g., select s.ai.toolTimings keys or the array of toolCallIds)
and move the derivation of relevantTimings into a useMemo that depends on those
raw IDs and the full toolTimings accessor, or alternatively adjust the selector
to return only the specific entries for this box; update the useMemo that
currently uses toolTimings to use relevantTimings (or the memoized subset) and
ensure any selector returning derived objects uses shallow equality to avoid
re-renders (refer to useStoreWithAi, toolTimings, agentToolCallId, and the
existing useMemo that computes relevantTimings).

packages/ai-core/src/components/ToolPartRenderer.tsx (2)

128-138: Consider extracting the reasoning type guard.

The inline type checking for toolCall.input.reasoning is repeated here and in ToolPartRenderer (lines 301-304) and ReasoningBox.tsx. A shared helper like getToolCallReasoning(input: unknown): string | undefined would reduce duplication.

♻️ Optional helper extraction

// In a shared utils file
export function getToolCallReasoning(input: unknown): string | undefined {
  if (
    input instanceof Object &&
    'reasoning' in input &&
    typeof (input as Record<string, unknown>).reasoning === 'string'
  ) {
    return (input as Record<string, unknown>).reasoning as string;
  }
  return undefined;
}

Then usage becomes:

-              {toolCall.input instanceof Object &&
-              'reasoning' in toolCall.input &&
-              typeof (toolCall.input as Record<string, unknown>).reasoning ===
-                'string' ? (
-                <div className="mb-1 text-sm text-gray-500">
-                  {
-                    (toolCall.input as Record<string, unknown>)
-                      .reasoning as string
-                  }
-                </div>
-              ) : null}
+              {getToolCallReasoning(toolCall.input) && (
+                <div className="mb-1 text-sm text-gray-500">
+                  {getToolCallReasoning(toolCall.input)}
+                </div>
+              )}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ai-core/src/components/ToolPartRenderer.tsx` around lines 128 - 138,
Extract the repeated inline type-guard into a shared helper named
getToolCallReasoning(input: unknown): string | undefined and replace the
duplicated checks in ToolPartRenderer (the JSX block rendering
toolCall.input.reasoning) and ReasoningBox.tsx with calls to this helper;
specifically, implement getToolCallReasoning to return the reasoning string when
input is an Object with a string "reasoning" property and undefined otherwise,
then import and use getToolCallReasoning(toolCall.input) in the conditional
render and any other locations instead of repeating the
instanceof/'reasoning'/'typeof' checks.

---

214-217: Passing empty agentToolCalls when liveProgress is used is confusing.

When liveProgress exists, the component passes agentToolCalls={[]} but AgentProgressRenderer ignores it via displayCalls = liveProgress ?? agentToolCalls. This works but obscures the data flow. Consider passing liveProgress directly:

♻️ Clearer prop passing

   if (liveProgress && liveProgress.length > 0) {
     return (
-      <AgentProgressRenderer toolCallId={toolCallId} agentToolCalls={[]} />
+      <AgentProgressRenderer toolCallId={toolCallId} agentToolCalls={liveProgress} />
     );
   }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/ai-core/src/components/ToolPartRenderer.tsx` around lines 214 - 217,
ToolPartRenderer currently passes agentToolCalls={[]} when liveProgress exists,
which obscures data flow; change the call in ToolPartRenderer to pass the actual
liveProgress (e.g., AgentProgressRenderer toolCallId={toolCallId}
agentToolCalls={liveProgress}) so AgentProgressRenderer's internal displayCalls
= liveProgress ?? agentToolCalls receives the data directly and avoids the
confusing empty-array override.