diff --git a/apps/web/src/app/agents/[id]/chat/[chatId]/page.tsx b/apps/web/src/app/agents/[id]/chat/[chatId]/page.tsx
index 33f1d4b..5c290bc 100644
--- a/apps/web/src/app/agents/[id]/chat/[chatId]/page.tsx
+++ b/apps/web/src/app/agents/[id]/chat/[chatId]/page.tsx
@@ -69,6 +69,13 @@ interface Message {
   toolName?: string;
   toolCallId?: string;
   toolResult?: unknown;
+  toolCalls?: Array<{
+    toolCallId: string;
+    toolName: string;
+    args: unknown;
+  }>;
+  inputTokens?: number;
+  outputTokens?: number;
   createdAt: string;
 }
 
@@ -754,17 +761,34 @@ export default function PublicAgentChatPage(): React.ReactElement {
                     }
                   };
 
+                  // Build a lookup map for tool call inputs from ASSISTANT messages
+                  // This allows us to show the input args when rendering TOOL messages
+                  const getToolCallInput = (toolCallId: string): unknown => {
+                    for (const msg of messages) {
+                      if (msg.role === 'ASSISTANT' && msg.toolCalls) {
+                        const tc = msg.toolCalls.find((t) => t.toolCallId === toolCallId);
+                        if (tc) return tc.args;
+                      }
+                    }
+                    return undefined;
+                  };
+
+                  // Check if a tool call has a corresponding TOOL message (meaning it completed)
+                  const hasToolResult = (toolCallId: string): boolean => {
+                    return messages.some((m) => m.role === 'TOOL' && m.toolCallId === toolCallId);
+                  };
+
                   return (
                     <div className="px-4 py-2">
-                      <div
-                        className={`flex ${message.role === 'USER' ? 'justify-end' : 'justify-start'}`}
-                      >
-                        {message.role === 'TOOL' ? (
+                      {/* TOOL message - shows the result of a tool call */}
+                      {message.role === 'TOOL' && (
+                        <div className="flex justify-start">
                           <div className="max-w-[80%]">
                             <ToolCallCard
                               toolCall={{
                                 toolCallId: message.toolCallId || message.id,
                                 toolName: message.toolName || 'Unknown Tool',
+                                input: getToolCallInput(message.toolCallId || ''),
                                 output: getToolOutput(),
                                 status: 'success',
                               }}
@@ -772,18 +796,64 @@ export default function PublicAgentChatPage(): React.ReactElement {
                               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'
-                            }`}
-                          >
+                        </div>
+                      )}
+
+                      {/* USER message */}
+                      {message.role === 'USER' && (
+                        <div className="flex justify-end">
+                          <div className="max-w-[80%] rounded-lg p-4 bg-primary text-primary-foreground">
                             <p className="whitespace-pre-wrap text-sm">{message.content}</p>
                           </div>
-                        )}
-                      </div>
+                        </div>
+                      )}
+
+                      {/* ASSISTANT message - may contain text and/or tool calls */}
+                      {message.role === 'ASSISTANT' && (
+                        <div className="space-y-2">
+                          {/* Assistant text content */}
+                          {message.content && (
+                            <div className="flex justify-start">
+                              <div className="max-w-[80%] rounded-lg p-4 bg-surface-secondary">
+                                <p className="whitespace-pre-wrap text-sm">{message.content}</p>
+                                {/* Token usage for debugging */}
+                                {(message.inputTokens || message.outputTokens) && (
+                                  <div className="mt-2 pt-2 border-t border-border/50 text-[10px] text-foreground-tertiary font-mono">
+                                    {message.inputTokens && <span>In: {message.inputTokens}</span>}
+                                    {message.inputTokens && message.outputTokens && (
+                                      <span> • </span>
+                                    )}
+                                    {message.outputTokens && (
+                                      <span>Out: {message.outputTokens}</span>
+                                    )}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          )}
+
+                          {/* Show tool calls from this assistant message that don't have results yet */}
+                          {message.toolCalls &&
+                            message.toolCalls
+                              .filter((tc) => !hasToolResult(tc.toolCallId))
+                              .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: 'pending',
+                                      }}
+                                      isExpanded={expandedToolCalls.has(tc.toolCallId)}
+                                      onToggle={() => toggleToolCall(tc.toolCallId)}
+                                    />
+                                  </div>
+                                </div>
+                              ))}
+                        </div>
+                      )}
                     </div>
                   );
                 }}
diff --git a/apps/web/src/app/api/agents/[id]/conversation/[conversationId]/route.ts b/apps/web/src/app/api/agents/[id]/conversation/[conversationId]/route.ts
index 3529b13..b14b313 100644
--- a/apps/web/src/app/api/agents/[id]/conversation/[conversationId]/route.ts
+++ b/apps/web/src/app/api/agents/[id]/conversation/[conversationId]/route.ts
@@ -266,8 +266,9 @@ export async function POST(request: NextRequest, context: RouteContext): Promise
         try {
           const startTime = Date.now();
           let fullContent = '';
-          // biome-ignore lint/suspicious/noExplicitAny: Dynamic tool call structure
-          let allToolCalls: any[] = [];
+          // Accumulate tool calls with their input args
+          const toolCallsMap: Map<string, { toolCallId: string; toolName: string; args: unknown }> =
+            new Map();
           let inputTokens = 0;
           let outputTokens = 0;
 
@@ -278,16 +279,39 @@ export async function POST(request: NextRequest, context: RouteContext): Promise
             tools,
             stopWhen: stepCountIs(agent.maxToolCallsPerTurn),
             onChunk: async ({ chunk }) => {
-              // Stream tool calls as they come in
+              // Stream tool calls as they come in and capture their inputs
               if (chunk.type === 'tool-call') {
+                const input = 'args' in chunk ? chunk.args : chunk.input;
+                // Store tool call with input for later persistence
+                toolCallsMap.set(chunk.toolCallId, {
+                  toolCallId: chunk.toolCallId,
+                  toolName: chunk.toolName,
+                  args: input,
+                });
                 sendEvent('tool_call', {
                   toolCallId: chunk.toolCallId,
                   toolName: chunk.toolName,
-                  input: 'args' in chunk ? chunk.args : chunk.input,
+                  input,
                 });
               }
             },
-            onStepFinish: async ({ toolResults, usage }) => {
+            onStepFinish: async ({ toolCalls, toolResults, usage }) => {
+              // Capture tool calls from step finish (backup in case onChunk missed any)
+              if (toolCalls && Array.isArray(toolCalls)) {
+                for (const tc of toolCalls) {
+                  if (!toolCallsMap.has(tc.toolCallId)) {
+                    // Use 'input' from DynamicToolCall or fall back to type assertion for typed calls
+                    const args =
+                      'input' in tc ? tc.input : 'args' in tc ? (tc as { args: unknown }).args : {};
+                    toolCallsMap.set(tc.toolCallId, {
+                      toolCallId: tc.toolCallId,
+                      toolName: tc.toolName,
+                      args,
+                    });
+                  }
+                }
+              }
+
               // Send tool results
               if (toolResults && toolResults.length > 0) {
                 for (const tr of toolResults) {
@@ -325,17 +349,10 @@ export async function POST(request: NextRequest, context: RouteContext): Promise
           }
 
           // Get final response data
-          const finalResponse = await result.response;
           const finalUsage = await result.usage;
 
-          // Extract tool calls from final response
-          if (finalResponse.messages) {
-            for (const msg of finalResponse.messages) {
-              if ('toolCalls' in msg && msg.toolCalls && Array.isArray(msg.toolCalls)) {
-                allToolCalls = [...allToolCalls, ...(msg.toolCalls as unknown[])];
-              }
-            }
-          }
+          // Convert tool calls map to array for storage
+          const allToolCalls = Array.from(toolCallsMap.values());
 
           // Update token counts from final usage
           if (finalUsage) {
@@ -349,7 +366,11 @@ export async function POST(request: NextRequest, context: RouteContext): Promise
               conversationId: conversation.id,
               role: 'ASSISTANT',
               content: fullContent,
-              toolCalls: allToolCalls.length > 0 ? allToolCalls : Prisma.JsonNull,
+              // Cast to Prisma-compatible JSON type
+              toolCalls:
+                allToolCalls.length > 0
+                  ? (allToolCalls as unknown as Prisma.InputJsonValue)
+                  : Prisma.JsonNull,
               inputTokens,
               outputTokens,
             },