[feature] adds web_search and fetch_url tool calls

web/src/components/chat/chat-messages-panel.tsx

@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils";
 import type { Message } from "@/lib/api";
 import { MarkdownContent } from "@/components/markdown/markdown-content";
+import { Globe2, Link2, Wrench } from "lucide-preact";
 
 type Props = {
   messages: Message[];
@@ -8,6 +9,33 @@ type Props = {
   isSending: boolean;
 };
 
+type ToolLogMetadata = {
+  kind: "tool_call";
+  toolName?: string;
+  status?: "completed" | "failed";
+  summary?: string;
+};
+
+function asToolLogMetadata(value: unknown): ToolLogMetadata | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const record = value as Record<string, unknown>;
+  if (record.kind !== "tool_call") return null;
+  return record as ToolLogMetadata;
+}
+
+function getToolSummary(message: Message, metadata: ToolLogMetadata) {
+  if (typeof metadata.summary === "string" && metadata.summary.trim()) return metadata.summary.trim();
+  const toolName = metadata.toolName?.trim() || message.name?.trim() || "unknown_tool";
+  return `Ran tool '${toolName}'.`;
+}
+
+function getToolIconName(toolName: string | null | undefined) {
+  const lowered = toolName?.toLowerCase() ?? "";
+  if (lowered.includes("search")) return "search";
+  if (lowered.includes("url") || lowered.includes("fetch") || lowered.includes("http")) return "fetch";
+  return "generic";
+}
+
 export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
   const hasPendingAssistant = messages.some((message) => message.id.startsWith("temp-assistant-") && message.content.trim().length === 0);
 
@@ -16,6 +44,28 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
       {isLoading && messages.length === 0 ? <p className="text-sm text-muted-foreground">Loading messages...</p> : null}
       <div className="mx-auto max-w-3xl space-y-6">
         {messages.map((message) => {
+          const toolLogMetadata = asToolLogMetadata(message.metadata);
+          if (message.role === "tool" && toolLogMetadata) {
+            const iconKind = getToolIconName(toolLogMetadata.toolName ?? message.name);
+            const Icon = iconKind === "search" ? Globe2 : iconKind === "fetch" ? Link2 : Wrench;
+            const isFailed = toolLogMetadata.status === "failed";
+            return (
+              <div key={message.id} className="flex justify-start">
+                <div
+                  className={cn(
+                    "inline-flex max-w-[85%] items-center gap-2 rounded-md border px-3 py-2 text-xs leading-5",
+                    isFailed
+                      ? "border-rose-500/40 bg-rose-950/20 text-rose-200"
+                      : "border-cyan-500/35 bg-cyan-950/20 text-cyan-100"
+                  )}
+                >
+                  <Icon className="h-3.5 w-3.5 shrink-0" />
+                  <span>{getToolSummary(message, toolLogMetadata)}</span>
+                </div>
+              </div>
+            );
+          }
+
           const isUser = message.role === "user";
           const isPendingAssistant = message.id.startsWith("temp-assistant-") && isSending && message.content.trim().length === 0;
           return (