Distinguish OpenAI function calls in logs

Author: k0ngk0ng

web/src/components/EventLogModal.tsx

@@ -1032,6 +1032,9 @@ function StructuredContentPart({ part, index }: { part: Record<string, unknown>;
   if (type === "tool_use") {
     return <ToolUsePart part={part} index={index} />;
   }
+  if (type === "function_call" || type === "custom_tool_call") {
+    return <FunctionCallPart part={part} type={type} />;
+  }
   if (type === "tool_result") {
     return <ToolResultPart part={part} />;
   }
@@ -1097,6 +1100,24 @@ function ToolUsePart({ part, index }: { part: Record<string, unknown>; index: nu
   );
 }
 
+function FunctionCallPart({ part, type }: { part: Record<string, unknown>; type: string }) {
+  const name = stringRecordValue(part.name) || "function";
+  const id = stringRecordValue(part.call_id) || stringRecordValue(part.id);
+  const input = type === "custom_tool_call" ? part.input : part.arguments;
+  return (
+    <div className="tool-use-card">
+      <div className="tool-use-header">
+        <div className="tool-use-title">
+          <span className="part-type-badge">{type}</span>
+          <span className="tool-name">{name}</span>
+        </div>
+        {id && <span className="tool-id">{id}</span>}
+      </div>
+      <JsonValueBlock label={type === "custom_tool_call" ? "Input" : "Arguments"} value={input ?? {}} />
+    </div>
+  );
+}
+
 function ToolResultPart({ part }: { part: Record<string, unknown> }) {
   const id = stringRecordValue(part.tool_use_id) || stringRecordValue(part.id) || stringRecordValue(part.call_id);
   return (
@@ -1187,13 +1208,41 @@ function JsonValueBlock({ label, value }: { label: string; value: unknown }) {
 
 function visualContentParts(turn: Turn): Record<string, unknown>[] | null {
   const raw = isRecord(turn.raw) ? turn.raw : null;
+  const rawType = stringRecordValue(raw?.type);
+  if (raw && isStandaloneVisualPart(rawType)) return [raw];
+
   const content = raw?.content;
-  if (!Array.isArray(content)) return null;
-  const parts = content.filter(isRecord);
+  const output = raw?.output;
+  const parts = Array.isArray(content)
+    ? content.filter(isRecord)
+    : Array.isArray(output)
+      ? output.flatMap(responsesOutputVisualParts)
+      : [];
   if (parts.length === 0) return null;
   return parts.some((part) => !isPlainTextPart(part)) ? parts : null;
 }
 
+function responsesOutputVisualParts(item: unknown): Record<string, unknown>[] {
+  if (!isRecord(item)) return [];
+  const type = stringRecordValue(item.type);
+  if (type === "message" && Array.isArray(item.content)) {
+    return item.content.filter(isRecord);
+  }
+  return isStandaloneVisualPart(type) ? [item] : [];
+}
+
+function isStandaloneVisualPart(type: string): boolean {
+  return (
+    type === "function_call" ||
+    type === "custom_tool_call" ||
+    type === "function_call_output" ||
+    type === "custom_tool_call_output" ||
+    type === "image_generation_call" ||
+    type === "web_search_call" ||
+    type === "reasoning"
+  );
+}
+
 function isPlainTextPart(part: Record<string, unknown>): boolean {
   const type = stringRecordValue(part.type);
   return (type === "text" || type === "input_text" || type === "output_text") && typeof part.text === "string";
@@ -1293,15 +1342,20 @@ function startsWithCollapsibleBlock(text: string): boolean {
 }
 
 function startsWithToolBlock(text: string): boolean {
-  return text.startsWith("**[tool_use ") || text.startsWith("**[tool_result");
+  return (
+    text.startsWith("**[tool_use ") ||
+    text.startsWith("**[tool_result") ||
+    text.startsWith("**[function_call ") ||
+    text.startsWith("**[custom_tool_call ")
+  );
 }
 
 function startsWithWebSearchCallBlock(text: string): boolean {
   return text.startsWith("**[web_search_call ");
 }
 
 function chatPreview(turn: Turn): string {
-  const text = turnText(turn).replace(/[`*_#>\[\]()]/g, "").replace(/\s+/g, " ").trim();
+  const text = turnText(turn).replace(/[`*#>\[\]()]/g, "").replace(/\s+/g, " ").trim();
   if (!text) return "(empty)";
   return text.length > 160 ? text.slice(0, 160) + "..." : text;
 }

web/src/lib/protocol.ts

@@ -430,7 +430,7 @@ function responsesInputToTurn(raw: unknown): Turn {
     const json = formatPartialJSON(args);
     return {
       role: "assistant",
-      text: toolUseMarkdown(name, m.call_id, json, "json"),
+      text: functionCallMarkdown("function_call", name, m.call_id, json, "json"),
       raw: m,
     };
   }
@@ -439,7 +439,7 @@ function responsesInputToTurn(raw: unknown): Turn {
     const input = typeof m.input === "string" ? m.input : JSON.stringify(m.input ?? "", null, 2);
     return {
       role: "assistant",
-      text: toolUseMarkdown(name, m.call_id, input, customToolLanguage(name, input)),
+      text: functionCallMarkdown("custom_tool_call", name, m.call_id, input, customToolLanguage(name, input)),
       raw: m,
     };
   }
@@ -560,6 +560,16 @@ function toolUseMarkdown(name: string, rawCallID: unknown, input: string, langua
   return `**[tool_use ${name}${callIDSuffix(rawCallID)}]**\n\n${codeFence(input, language)}`;
 }
 
+function functionCallMarkdown(
+  type: "function_call" | "custom_tool_call",
+  name: string,
+  rawCallID: unknown,
+  input: string,
+  language = "",
+): string {
+  return `**[${type} ${name}${callIDSuffix(rawCallID)}]**\n\n${codeFence(input, language)}`;
+}
+
 function toolResultMarkdown(rawCallID: unknown, output: string): string {
   return `**[tool_result${callIDSuffix(rawCallID)}]**\n\n${codeFence(output)}`;
 }
@@ -978,7 +988,7 @@ export function extractResponseStream(text: string): StreamExtraction {
     const language = c.custom ? customToolLanguage(c.name, input) : "json";
     responseItems.push({
       order: c.order,
-      markdown: toolUseMarkdown(c.name, c.callID, input, language),
+      markdown: functionCallMarkdown(c.custom ? "custom_tool_call" : "function_call", c.name, c.callID, input, language),
     });
   }
   responseItems.sort((a, b) => a.order - b.order);
@@ -1168,15 +1178,15 @@ export function extractResponseJSON(rawJson: string): StreamExtraction | null {
         const args = typeof it.arguments === "string" ? (it.arguments as string) : JSON.stringify(it.arguments ?? {});
         const json = formatPartialJSON(args);
         const sep = out.content ? "\n\n" : "";
-        out.content += sep + toolUseMarkdown(name, it.call_id, json, "json");
+        out.content += sep + functionCallMarkdown("function_call", name, it.call_id, json, "json");
         out.detected = true;
         continue;
       }
       if (it.type === "custom_tool_call") {
         const name = String(it.name || "tool");
         const input = typeof it.input === "string" ? it.input : JSON.stringify(it.input ?? "", null, 2);
         const sep = out.content ? "\n\n" : "";
-        out.content += sep + toolUseMarkdown(name, it.call_id, input, customToolLanguage(name, input));
+        out.content += sep + functionCallMarkdown("custom_tool_call", name, it.call_id, input, customToolLanguage(name, input));
         out.detected = true;
         continue;
       }