From 9fc4532c0a6b13f757d3ba79cb92e9b2c6ce20fd Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Sun, 11 Jan 2026 02:08:33 +1000
Subject: [PATCH] fix: render embedded tool calls from ASSISTANT messages on
 page refresh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, tool calls only rendered during streaming. Now they also
render when loading conversation history from the database, where
tool calls are embedded in ASSISTANT messages.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../agents/[id]/chat/[chatId]/page.tsx        | 90 +++++++++++++------
 1 file changed, 64 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/app/dashboard/agents/[id]/chat/[chatId]/page.tsx b/apps/web/src/app/dashboard/agents/[id]/chat/[chatId]/page.tsx
index 7842c18..8735a60 100644
--- a/apps/web/src/app/dashboard/agents/[id]/chat/[chatId]/page.tsx
+++ b/apps/web/src/app/dashboard/agents/[id]/chat/[chatId]/page.tsx
@@ -17,6 +17,12 @@ interface Agent {
   modelId: string;
 }
 
+interface MessageToolCall {
+  toolCallId: string;
+  toolName: string;
+  args?: Record<string, unknown>;
+}
+
 interface Message {
   id: string;
   role: 'USER' | 'ASSISTANT' | 'TOOL';
@@ -24,6 +30,7 @@ interface Message {
   toolName?: string;
   toolCallId?: string;
   toolResult?: unknown;
+  toolCalls?: MessageToolCall[] | null;
   createdAt: string;
 }
 
@@ -608,35 +615,66 @@ export default function AgentChatPage(): React.ReactElement {
                 }
               };
 
+              // Check if this ASSISTANT message has embedded tool calls
+              const hasEmbeddedToolCalls =
+                message.role === 'ASSISTANT' &&
+                message.toolCalls &&
+                Array.isArray(message.toolCalls) &&
+                message.toolCalls.length > 0;
+
               return (
-                <div
-                  key={message.id}
-                  className={`flex ${message.role === 'USER' ? 'justify-end' : 'justify-start'}`}
-                >
-                  {message.role === 'TOOL' ? (
-                    <div className="max-w-[80%]">
-                      <ToolCallCard
-                        toolCall={{
-                          toolCallId: message.toolCallId || message.id,
-                          toolName: message.toolName || 'Unknown Tool',
-                          output: getToolOutput(),
-                          status: 'success',
-                        }}
-                        isExpanded={expandedToolCalls.has(message.toolCallId || message.id)}
-                        onToggle={() => toggleToolCall(message.toolCallId || message.id)}
-                      />
-                    </div>
-                  ) : (
-                    <div
-                      className={`max-w-[80%] rounded-lg p-4 ${
-                        message.role === 'USER'
-                          ? 'bg-primary text-primary-foreground'
-                          : 'bg-surface-secondary'
-                      }`}
-                    >
-                      <p className="whitespace-pre-wrap text-sm">{message.content}</p>
+                <div key={message.id} className="space-y-2">
+                  {/* Render embedded tool calls from ASSISTANT messages */}
+                  {hasEmbeddedToolCalls && (
+                    <div className="space-y-2">
+                      {message.toolCalls!.map((tc) => (
+                        <div key={tc.toolCallId} className="flex justify-start">
+                          <div className="max-w-[80%]">
+                            <ToolCallCard
+                              toolCall={{
+                                toolCallId: tc.toolCallId,
+                                toolName: tc.toolName,
+                                input: tc.args,
+                                status: 'success',
+                              }}
+                              isExpanded={expandedToolCalls.has(tc.toolCallId)}
+                              onToggle={() => toggleToolCall(tc.toolCallId)}
+                            />
+                          </div>
+                        </div>
+                      ))}
                     </div>
                   )}
+
+                  {/* Render the message content */}
+                  <div
+                    className={`flex ${message.role === 'USER' ? 'justify-end' : 'justify-start'}`}
+                  >
+                    {message.role === 'TOOL' ? (
+                      <div className="max-w-[80%]">
+                        <ToolCallCard
+                          toolCall={{
+                            toolCallId: message.toolCallId || message.id,
+                            toolName: message.toolName || 'Unknown Tool',
+                            output: getToolOutput(),
+                            status: 'success',
+                          }}
+                          isExpanded={expandedToolCalls.has(message.toolCallId || message.id)}
+                          onToggle={() => toggleToolCall(message.toolCallId || message.id)}
+                        />
+                      </div>
+                    ) : (
+                      <div
+                        className={`max-w-[80%] rounded-lg p-4 ${
+                          message.role === 'USER'
+                            ? 'bg-primary text-primary-foreground'
+                            : 'bg-surface-secondary'
+                        }`}
+                      >
+                        <p className="whitespace-pre-wrap text-sm">{message.content}</p>
+                      </div>
+                    )}
+                  </div>
                 </div>
               );
             })}