@ai-sdk/devtools 1.0.0-beta.8 → 1.0.0-canary.20

package/src/viewer/client/app.tsx

@@ -1,287 +1,48 @@
 import React, { useState, useEffect } from 'react';
 import {
-  ChevronRight,
   RefreshCw,
   Trash2,
-  Copy,
-  Check,
   Zap,
-  Wrench,
   MessageSquare,
   AlertCircle,
-  ChevronDown,
-  Settings,
-  Brain,
   Loader2,
-  BarChart3,
+  GanttChart,
 } from 'lucide-react';
 import { AISDKLogo } from '@/components/icons';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Card } from '@/components/ui/card';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@/components/ui/collapsible';
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from '@/components/ui/drawer';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-
-interface Run {
-  id: string;
-  started_at: string;
-  stepCount: number;
-  firstMessage?: string;
-  hasError?: boolean;
-  isInProgress?: boolean;
-  type?: 'generate' | 'stream';
-}
-
-interface Step {
-  id: string;
-  run_id: string;
-  step_number: number;
-  type: 'generate' | 'stream';
-  model_id: string;
-  provider: string | null;
-  started_at: string;
-  duration_ms: number | null;
-  input: string;
-  output: string | null;
-  usage: string | null;
-  error: string | null;
-  raw_request: string | null;
-  raw_response: string | null;
-  raw_chunks: string | null;
-  provider_options: string | null;
-}
-
-interface RunDetail {
-  run: { id: string; started_at: string; isInProgress?: boolean };
-  steps: Step[];
-}
-
-type StepType = 'tool-calls' | 'response' | 'error';
-
-interface StepSummary {
-  type: StepType;
-  icon: 'wrench' | 'message' | 'alert';
-  label: string;
-  toolDetails?: string;
-}
-
-function summarizeToolCalls(toolCalls: any[]): {
-  label: string;
-  details: string;
-} {
-  // Count occurrences of each tool
-  const counts = toolCalls.reduce((acc: Record<string, number>, call: any) => {
-    acc[call.toolName] = (acc[call.toolName] || 0) + 1;
-    return acc;
-  }, {});
-
-  const uniqueTools = Object.keys(counts);
-
-  // Format tool name with count if > 1
-  const formatTool = (name: string) => {
-    const count = counts[name] ?? 0;
-    return count > 1 ? `${name} (x${count})` : name;
-  };
-
-  const allToolsFormatted = uniqueTools.map(formatTool);
-
-  // Single tool type
-  if (uniqueTools.length === 1 && uniqueTools[0]) {
-    return {
-      label: formatTool(uniqueTools[0]),
-      details: '', // No tooltip needed
-    };
-  }
-
-  // Two tools - show both
-  if (uniqueTools.length === 2) {
-    return {
-      label: `${formatTool(uniqueTools[0])}, ${formatTool(uniqueTools[1])}`,
-      details: allToolsFormatted.join(', '),
-    };
-  }
-
-  // 3+ tools: show first two + ellipsis
-  return {
-    label: `${formatTool(uniqueTools[0])}, ${formatTool(uniqueTools[1])}, ...`,
-    details: allToolsFormatted.join(', '),
-  };
-}
-
-interface StepInputSummary {
-  type: 'user' | 'tool';
-  label: string;
-  fullText?: string; // For tooltip on user messages
-  toolDetails?: string; // For tooltip on tool results
-}
-
-function getStepInputSummary(
-  input: any,
-  isFirstStep: boolean,
-): StepInputSummary | null {
-  const prompt = input?.prompt;
-  if (!Array.isArray(prompt)) return null;
-
-  // For first step: always show the last user message (what kicked off this run)
-  if (isFirstStep) {
-    const userMessages = prompt.filter((msg: any) => msg.role === 'user');
-    const lastUserMessage = userMessages[userMessages.length - 1];
-
-    if (lastUserMessage) {
-      const content = lastUserMessage.content;
-      let text: string | null = null;
-
-      if (typeof content === 'string') {
-        text = content;
-      } else if (Array.isArray(content)) {
-        const textPart = content.find((part: any) => part.type === 'text');
-        if (textPart?.text) {
-          text = textPart.text;
-        }
-      }
-
-      if (text) {
-        return {
-          type: 'user',
-          label: `"${truncateText(text)}"`,
-          fullText: text,
-        };
-      }
-    }
-    return null;
-  }
-
-  // For subsequent steps: show the last tool results
-  const toolMessages = prompt.filter((msg: any) => msg.role === 'tool');
-  if (toolMessages.length > 0) {
-    // Only get tool names from the last tool message (the most recent tool results)
-    const lastToolMessage = toolMessages[toolMessages.length - 1];
-    const toolCounts: Record<string, number> = {};
-
-    const content = lastToolMessage.content;
-    if (Array.isArray(content)) {
-      for (const part of content) {
-        if (part.type === 'tool-result' && part.toolName) {
-          toolCounts[part.toolName] = (toolCounts[part.toolName] || 0) + 1;
-        }
-      }
-    }
-
-    const uniqueTools = Object.keys(toolCounts);
-    if (uniqueTools.length === 0) {
-      return { type: 'tool', label: 'tool result' };
-    }
-
-    // Format tool name with count if > 1
-    const formatTool = (name: string) => {
-      const count = toolCounts[name];
-      return count > 1 ? `${name} (x${count})` : name;
-    };
-
-    const allToolsFormatted = uniqueTools.map(formatTool);
-
-    if (uniqueTools.length === 1) {
-      return { type: 'tool', label: formatTool(uniqueTools[0]) };
-    }
-
-    if (uniqueTools.length === 2) {
-      return {
-        type: 'tool',
-        label: `${formatTool(uniqueTools[0])}, ${formatTool(uniqueTools[1])}`,
-        toolDetails: allToolsFormatted.join(', '),
-      };
-    }
-
-    // 3+ tools: show first two + ellipsis
-    return {
-      type: 'tool',
-      label: `${formatTool(uniqueTools[0])}, ${formatTool(uniqueTools[1])}, ...`,
-      toolDetails: allToolsFormatted.join(', '),
-    };
-  }
-
-  // Fall back to last user message
-  const userMessages = prompt.filter((msg: any) => msg.role === 'user');
-  const lastUserMessage = userMessages[userMessages.length - 1];
-
-  if (!lastUserMessage) return null;
-
-  // Extract text content from the message
-  const content = lastUserMessage.content;
-  let text: string | null = null;
-
-  if (typeof content === 'string') {
-    text = content;
-  } else if (Array.isArray(content)) {
-    const textPart = content.find((part: any) => part.type === 'text');
-    if (textPart?.text) {
-      text = textPart.text;
-    }
-  }
-
-  if (!text) return null;
-
-  return {
-    type: 'user',
-    label: `"${truncateText(text)}"`,
-    fullText: text,
-  };
-}
-
-function truncateText(text: string, maxLength: number = 30): string {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength).trim() + '…';
-}
-
-function getStepSummary(output: any, error: string | null): StepSummary {
-  if (error) {
-    return { type: 'error', icon: 'alert', label: 'Error' };
-  }
-
-  // finishReason can be a string or an object with {unified, raw} properties
-  const finishReason =
-    typeof output?.finishReason === 'string'
-      ? output.finishReason
-      : output?.finishReason?.unified;
-
-  if (finishReason === 'tool-calls') {
-    const toolCalls =
-      output?.toolCalls ||
-      output?.content?.filter((p: any) => p.type === 'tool-call') ||
-      [];
-    const { label, details } = summarizeToolCalls(toolCalls);
-    return {
-      type: 'tool-calls',
-      icon: 'wrench',
-      label,
-      toolDetails: details || undefined,
-    };
-  }
-
-  return { type: 'response', icon: 'message', label: 'Response' };
-}
+import type {
+  Run,
+  RunDetail,
+  Step,
+  ParsedInput,
+  ParsedUsage,
+  PromptMessage,
+  InputTokenBreakdown,
+  OutputTokenBreakdown,
+} from './types';
+import {
+  getInputTokenBreakdown,
+  getOutputTokenBreakdown,
+  formatInputTokens,
+  formatOutputTokens,
+} from './utils';
+import { TokenBreakdownTooltip } from './components/shared-components';
+import { StepCard } from './components/step-card';
+import { TraceTimeline } from './components/trace-timeline';
 
 function App() {
   const [runs, setRuns] = useState<Run[]>([]);
   const [selectedRun, setSelectedRun] = useState<RunDetail | null>(null);
   const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set());
   const [loading, setLoading] = useState(true);
+  const [showTimeline, setShowTimeline] = useState(false);
 
   const fetchRuns = async () => {
     try {
@@ -301,12 +62,10 @@ function App() {
     setSelectedRun(null);
   };
 
-  // Initial fetch
   useEffect(() => {
     fetchRuns();
   }, []);
 
-  // SSE connection for real-time updates
   useEffect(() => {
     let eventSource: EventSource | null = null;
     let reconnectTimeout: NodeJS.Timeout | null = null;
@@ -319,9 +78,7 @@ function App() {
       });
 
       eventSource.addEventListener('update', () => {
-        // Refresh the runs list when data changes
         fetchRuns();
-        // Also refresh selected run if one is selected
         if (selectedRun) {
           fetch(`/api/runs/${selectedRun.run.id}`)
             .then(res => res.json())
@@ -334,14 +91,11 @@ function App() {
         }
       });
 
-      eventSource.addEventListener('heartbeat', () => {
-        // Connection is alive
-      });
+      eventSource.addEventListener('heartbeat', () => {});
 
       eventSource.onerror = () => {
         console.log('[DevTools] SSE connection lost, reconnecting...');
         eventSource?.close();
-        // Reconnect after 2 seconds
         reconnectTimeout = setTimeout(connect, 2000);
       };
     };
@@ -360,7 +114,6 @@ function App() {
     const res = await fetch(`/api/runs/${runId}`);
     const data = await res.json();
     setSelectedRun(data);
-    // Start with all steps collapsed
     setExpandedSteps(new Set());
   };
 
@@ -382,7 +135,7 @@ function App() {
     return `${(ms / 1000).toFixed(2)}s`;
   };
 
-  const parseJson = (str: string | null) => {
+  const parseJson = (str: string | null): unknown => {
     if (!str) return null;
     try {
       return JSON.parse(str);
@@ -394,13 +147,19 @@ function App() {
   const getFirstUserMessage = (steps: Step[]): string => {
     const firstStep = steps[0];
     if (!firstStep) return 'Empty run';
-    const input = parseJson(firstStep.input);
-    const userMsg = input?.prompt?.find((m: any) => m.role === 'user');
+    const input = parseJson(firstStep.input) as ParsedInput | null;
+    const userMsg = input?.prompt?.find(
+      (m: PromptMessage) => m.role === 'user',
+    );
     if (userMsg) {
       const content =
         typeof userMsg.content === 'string'
           ? userMsg.content
-          : userMsg.content?.[0]?.text || '';
+          : Array.isArray(userMsg.content)
+            ? userMsg.content.find(
+                (p): p is { type: 'text'; text: string } => p.type === 'text',
+              )?.text || ''
+            : '';
       return content.slice(0, 50) + (content.length > 50 ? '...' : '');
     }
     return 'No user message';
@@ -419,7 +178,7 @@ function App() {
   ): { input: InputTokenBreakdown; output: OutputTokenBreakdown } => {
     return steps.reduce(
       (acc, s) => {
-        const usage = parseJson(s.usage);
+        const usage = parseJson(s.usage) as ParsedUsage | null;
         const inputBreakdown = getInputTokenBreakdown(usage?.inputTokens);
         const outputBreakdown = getOutputTokenBreakdown(usage?.outputTokens);
 
@@ -427,7 +186,6 @@ function App() {
           total: acc.input.total + inputBreakdown.total,
         };
 
-        // Only add breakdown properties if they exist in either accumulator or current breakdown
         if (
           acc.input.noCache !== undefined ||
           inputBreakdown.noCache !== undefined
@@ -454,7 +212,6 @@ function App() {
           total: acc.output.total + outputBreakdown.total,
         };
 
-        // Only add breakdown properties if they exist in either accumulator or current breakdown
         if (
           acc.output.text !== undefined ||
           outputBreakdown.text !== undefined
@@ -542,9 +299,16 @@ function App() {
                         ) : (
                           <MessageSquare className="size-3.5 text-muted-foreground mt-0.5 shrink-0" />
                         )}
-                        <span className="text-[13px] text-foreground leading-tight line-clamp-1 break-all">
-                          {run.firstMessage || 'Loading...'}
-                        </span>
+                        <div className="min-w-0">
+                          {run.function_id && (
+                            <span className="text-[11px] font-mono text-sidebar-primary block truncate">
+                              {run.function_id}
+                            </span>
+                          )}
+                          <span className="text-[13px] text-foreground leading-tight line-clamp-1 break-all">
+                            {run.firstMessage || 'Loading...'}
+                          </span>
+                        </div>
                       </div>
                       <div className="flex items-center gap-2 ml-5.5 text-[11px] text-muted-foreground">
                         {run.type && (
@@ -643,246 +407,63 @@ function App() {
                     <span>
                       {new Date(selectedRun.run.started_at).toLocaleString()}
                     </span>
+                    <span className="px-3 text-muted-foreground/30">·</span>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          onClick={() => setShowTimeline(prev => !prev)}
+                          className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-[11px] font-medium transition-colors ${
+                            showTimeline
+                              ? 'bg-accent text-foreground'
+                              : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+                          }`}
+                        >
+                          <GanttChart className="size-3.5" />
+                          Timeline
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {showTimeline
+                          ? 'Switch to steps view'
+                          : 'Switch to timeline view'}
+                      </TooltipContent>
+                    </Tooltip>
                   </div>
                 </div>
 
-                {/* Steps */}
-                <div className="flex flex-col gap-3">
-                  {selectedRun.steps.map((step, index) => {
-                    const isExpanded = expandedSteps.has(step.id);
-                    const isLastStep = index === selectedRun.steps.length - 1;
-                    const isActiveStep =
-                      isLastStep && selectedRun.run.isInProgress;
-                    const input = parseJson(step.input);
-                    const output = parseJson(step.output);
-                    const usage = parseJson(step.usage);
-
-                    // Get tool results from next step's input
-                    const nextStep = selectedRun.steps[index + 1];
-                    const nextInput = nextStep
-                      ? parseJson(nextStep.input)
-                      : null;
-                    const toolResults =
-                      nextInput?.prompt
-                        ?.filter((msg: any) => msg.role === 'tool')
-                        ?.flatMap((msg: any) => msg.content) ?? [];
-
-                    const summary = getStepSummary(output, step.error);
-                    const isFirstStep = index === 0;
-                    const inputSummary = getStepInputSummary(
-                      input,
-                      isFirstStep,
-                    );
-
-                    return (
-                      <Collapsible
-                        key={step.id}
-                        open={isExpanded}
-                        onOpenChange={() => toggleStep(step.id)}
-                      >
-                        <Card
-                          className={`overflow-hidden py-0 gap-0 ${isActiveStep ? 'ring-2 ring-blue-500/50 ring-offset-1 ring-offset-background' : ''}`}
-                        >
-                          {/* Step Header */}
-                          <CollapsibleTrigger asChild>
-                            <button
-                              className={`w-full flex items-center justify-between px-4 py-3 text-left transition-colors hover:bg-accent/50 ${
-                                isExpanded ? 'border-b border-border' : ''
-                              }`}
-                            >
-                              <div className="flex items-center gap-3">
-                                <span className="text-xs text-muted-foreground font-mono w-4">
-                                  {step.step_number}
-                                </span>
-                                <div className="flex items-center gap-2">
-                                  {/* Input side */}
-                                  {inputSummary && (
-                                    <>
-                                      {inputSummary.type === 'user' ? (
-                                        <MessageSquare className="size-3.5 text-muted-foreground" />
-                                      ) : (
-                                        <Wrench className="size-3.5 text-muted-foreground" />
-                                      )}
-                                      {inputSummary.fullText ||
-                                      inputSummary.toolDetails ? (
-                                        <Tooltip>
-                                          <TooltipTrigger asChild>
-                                            <span
-                                              className={`text-sm text-muted-foreground ${inputSummary.type === 'tool' ? 'font-mono' : ''}`}
-                                            >
-                                              {inputSummary.label}
-                                            </span>
-                                          </TooltipTrigger>
-                                          <TooltipContent
-                                            side="bottom"
-                                            className="max-w-sm max-h-40 overflow-hidden"
-                                          >
-                                            <span className="line-clamp-6">
-                                              {inputSummary.fullText ||
-                                                inputSummary.toolDetails}
-                                            </span>
-                                          </TooltipContent>
-                                        </Tooltip>
-                                      ) : (
-                                        <span
-                                          className={`text-sm text-muted-foreground ${inputSummary.type === 'tool' ? 'font-mono' : ''}`}
-                                        >
-                                          {inputSummary.label}
-                                        </span>
-                                      )}
-                                      <span className="text-muted-foreground/50 mx-1">
-                                        →
-                                      </span>
-                                    </>
-                                  )}
-
-                                  {/* Output side */}
-                                  {summary.icon === 'wrench' && (
-                                    <Wrench className="size-3.5 text-muted-foreground" />
-                                  )}
-                                  {summary.icon === 'message' && (
-                                    <MessageSquare className="size-3.5 text-muted-foreground" />
-                                  )}
-                                  {summary.icon === 'alert' && (
-                                    <AlertCircle className="size-3.5 text-destructive" />
-                                  )}
-
-                                  {summary.toolDetails ? (
-                                    <Tooltip>
-                                      <TooltipTrigger asChild>
-                                        <span className="text-sm font-medium font-mono">
-                                          {summary.label}
-                                        </span>
-                                      </TooltipTrigger>
-                                      <TooltipContent>
-                                        {summary.toolDetails}
-                                      </TooltipContent>
-                                    </Tooltip>
-                                  ) : (
-                                    <span
-                                      className={`text-sm font-medium ${
-                                        summary.icon === 'wrench'
-                                          ? 'font-mono'
-                                          : ''
-                                      }`}
-                                    >
-                                      {summary.label}
-                                    </span>
-                                  )}
-                                </div>
-                              </div>
-
-                              <div className="flex items-center gap-4">
-                                {isActiveStep ? (
-                                  <span className="text-[11px] text-blue-400 font-medium flex items-center gap-1.5">
-                                    <Loader2 className="size-3 animate-spin" />
-                                    streaming
-                                  </span>
-                                ) : (
-                                  <span className="text-[11px] text-muted-foreground font-mono">
-                                    {formatDuration(step.duration_ms)}
-                                  </span>
-                                )}
-                                {usage && (
-                                  <Tooltip>
-                                    <TooltipTrigger asChild>
-                                      <span className="text-[11px] font-mono text-muted-foreground cursor-help">
-                                        {formatInputTokens(
-                                          getInputTokenBreakdown(
-                                            usage.inputTokens,
-                                          ),
-                                        )}{' '}
-                                        <span className="text-muted-foreground/50">
-                                          →
-                                        </span>{' '}
-                                        {formatOutputTokens(
-                                          getOutputTokenBreakdown(
-                                            usage.outputTokens,
-                                          ),
-                                        )}
-                                      </span>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                      <TokenBreakdownTooltip
-                                        input={getInputTokenBreakdown(
-                                          usage.inputTokens,
-                                        )}
-                                        output={getOutputTokenBreakdown(
-                                          usage.outputTokens,
-                                        )}
-                                        raw={usage.raw}
-                                      />
-                                    </TooltipContent>
-                                  </Tooltip>
-                                )}
-                                <ChevronDown
-                                  className={`size-4 text-muted-foreground transition-transform ${
-                                    isExpanded ? 'rotate-180' : ''
-                                  }`}
-                                />
-                              </div>
-                            </button>
-                          </CollapsibleTrigger>
-
-                          {/* Step Content */}
-                          <CollapsibleContent>
-                            {/* Config Bar */}
-                            <StepConfigBar
-                              modelId={step.model_id}
-                              provider={step.provider}
-                              input={input}
-                              providerOptions={parseJson(step.provider_options)}
-                              usage={usage}
-                            />
-
-                            {/* Two Panel Layout */}
-                            <div className="grid grid-cols-2 divide-x divide-border">
-                              {/* INPUT Panel */}
-                              <div className="bg-card/50">
-                                <InputPanel input={input} />
-                              </div>
-
-                              {/* OUTPUT Panel */}
-                              <div className="p-4 bg-background min-h-full">
-                                <h3 className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-3">
-                                  Output
-                                </h3>
-
-                                {step.error ? (
-                                  <div className="p-3 rounded-md bg-destructive/10 border border-destructive/30 text-sm text-destructive-foreground font-mono">
-                                    {step.error}
-                                  </div>
-                                ) : output ? (
-                                  <OutputDisplay
-                                    output={output}
-                                    toolResults={toolResults}
-                                  />
-                                ) : isActiveStep ? (
-                                  <div className="flex items-center gap-2 text-sm text-blue-400">
-                                    <Loader2 className="size-4 animate-spin" />
-                                    <span>Waiting for response...</span>
-                                  </div>
-                                ) : (
-                                  <p className="text-sm text-muted-foreground">
-                                    No output
-                                  </p>
-                                )}
-                              </div>
-                            </div>
-
-                            {/* Raw Data Toggle */}
-                            <RawDataSection
-                              rawRequest={step.raw_request}
-                              rawResponse={step.raw_response}
-                              rawChunks={step.raw_chunks}
-                              isStream={step.type === 'stream'}
-                            />
-                          </CollapsibleContent>
-                        </Card>
-                      </Collapsible>
-                    );
-                  })}
-                </div>
+                {showTimeline ? (
+                  <TraceTimeline
+                    runDetail={selectedRun}
+                    parseJson={parseJson}
+                    formatDuration={formatDuration}
+                  />
+                ) : (
+                  <div className="flex flex-col gap-3">
+                    {selectedRun.steps.map((step, index) => {
+                      const childRunsForStep = (
+                        selectedRun.childRuns ?? []
+                      ).filter(cr => cr.run.parent_step_id === step.id);
+
+                      return (
+                        <StepCard
+                          key={step.id}
+                          step={step}
+                          index={index}
+                          steps={selectedRun.steps}
+                          isRunInProgress={
+                            selectedRun.run.isInProgress ?? false
+                          }
+                          expandedSteps={expandedSteps}
+                          toggleStep={toggleStep}
+                          parseJson={parseJson}
+                          formatDuration={formatDuration}
+                          childRuns={childRunsForStep}
+                          depth={0}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
               </div>
             )}
           </ScrollArea>
@@ -892,1366 +473,4 @@ function App() {
   );
 }
 
-function StepConfigBar({
-  modelId,
-  provider,
-  input,
-  providerOptions,
-  usage,
-}: {
-  modelId?: string;
-  provider?: string | null;
-  input: any;
-  providerOptions?: any;
-  usage?: any;
-}) {
-  const toolCount = input?.tools?.length ?? 0;
-
-  // Collect parameters
-  const params: { label: string; value: string }[] = [];
-  if (input?.temperature != null)
-    params.push({ label: 'temp', value: String(input.temperature) });
-  if (input?.maxOutputTokens != null)
-    params.push({ label: 'max tokens', value: String(input.maxOutputTokens) });
-  if (input?.topP != null)
-    params.push({ label: 'topP', value: String(input.topP) });
-  if (input?.topK != null)
-    params.push({ label: 'topK', value: String(input.topK) });
-  if (input?.toolChoice != null) {
-    const choice =
-      typeof input.toolChoice === 'string'
-        ? input.toolChoice
-        : input.toolChoice.type;
-    params.push({ label: 'tool choice', value: choice });
-  }
-
-  return (
-    <div className="flex items-center gap-2 px-4 py-2 bg-muted/20 border-b border-border text-[11px] text-muted-foreground">
-      {provider && (
-        <span className="px-1.5 py-0.5 rounded bg-sidebar-primary/10 text-sidebar-primary text-[10px] font-medium">
-          {provider}
-        </span>
-      )}
-      <span className="font-mono">{modelId}</span>
-
-      {params.length > 0 && (
-        <>
-          <span className="text-muted-foreground/30">·</span>
-          {params.map((p, i) => (
-            <span key={i}>
-              {p.label}: <span className="text-foreground">{p.value}</span>
-              {i < params.length - 1 && (
-                <span className="text-muted-foreground/30 mx-1">·</span>
-              )}
-            </span>
-          ))}
-        </>
-      )}
-
-      {toolCount > 0 && (
-        <>
-          <span className="text-muted-foreground/30">·</span>
-          <Drawer direction="right">
-            <DrawerTrigger asChild>
-              <button className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer">
-                <Wrench className="size-3" />
-                {toolCount} available {toolCount === 1 ? 'tool' : 'tools'}
-              </button>
-            </DrawerTrigger>
-            <DrawerContent className="h-full w-[800px] sm:max-w-[800px] overflow-hidden">
-              <DrawerHeader className="border-b border-border shrink-0">
-                <DrawerTitle>Available Tools ({toolCount})</DrawerTitle>
-              </DrawerHeader>
-              <div className="flex-1 overflow-y-auto p-4">
-                <div className="space-y-3">
-                  {input?.tools?.map((tool: any, i: number) => (
-                    <ToolItem key={i} tool={tool} />
-                  ))}
-                </div>
-              </div>
-            </DrawerContent>
-          </Drawer>
-        </>
-      )}
-
-      {providerOptions && Object.keys(providerOptions).length > 0 && (
-        <>
-          <span className="text-muted-foreground/30">·</span>
-          <Drawer direction="right">
-            <DrawerTrigger asChild>
-              <button className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer">
-                <Settings className="size-3" />
-                Provider options
-              </button>
-            </DrawerTrigger>
-            <DrawerContent className="h-full w-[800px] sm:max-w-[800px] overflow-hidden">
-              <DrawerHeader className="border-b border-border shrink-0">
-                <DrawerTitle>Provider Options</DrawerTitle>
-              </DrawerHeader>
-              <div className="flex-1 overflow-y-auto p-4">
-                <JsonBlock data={providerOptions} size="lg" />
-              </div>
-            </DrawerContent>
-          </Drawer>
-        </>
-      )}
-
-      {usage && (
-        <>
-          <span className="text-muted-foreground/30">·</span>
-          <Drawer direction="right">
-            <DrawerTrigger asChild>
-              <button className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer">
-                <BarChart3 className="size-3" />
-                Usage
-              </button>
-            </DrawerTrigger>
-            <DrawerContent className="h-full w-[800px] sm:max-w-[800px] overflow-hidden">
-              <DrawerHeader className="border-b border-border shrink-0">
-                <DrawerTitle>Token Usage</DrawerTitle>
-              </DrawerHeader>
-              <div className="flex-1 overflow-y-auto p-4">
-                <UsageDetails usage={usage} />
-              </div>
-            </DrawerContent>
-          </Drawer>
-        </>
-      )}
-    </div>
-  );
-}
-
-function InputPanel({ input }: { input: any }) {
-  const messages = input?.prompt ?? [];
-  const messageCount = messages.length;
-
-  // Get last two messages to display
-  const lastTwoMessages = messages.slice(-2);
-  const previousMessageCount = Math.max(0, messageCount - 2);
-
-  return (
-    <Drawer direction="right">
-      <DrawerTrigger asChild>
-        <button className="w-full h-full text-left p-4 hover:bg-accent/30 transition-colors cursor-pointer flex flex-col justify-start">
-          <h3 className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-3">
-            Input
-          </h3>
-
-          <div className="space-y-3">
-            {/* Previous messages indicator */}
-            {previousMessageCount > 0 && (
-              <div className="text-[11px] text-muted-foreground/60 text-center py-1.5 rounded-md bg-muted/30">
-                + {previousMessageCount} previous{' '}
-                {previousMessageCount === 1 ? 'message' : 'messages'}
-              </div>
-            )}
-
-            {/* Last two messages displayed inline */}
-            {lastTwoMessages.map((msg: any, i: number) => (
-              <InputMessagePreview
-                key={i}
-                message={msg}
-                index={previousMessageCount + i + 1}
-              />
-            ))}
-
-            {/* Empty state */}
-            {messageCount === 0 && (
-              <p className="text-sm text-muted-foreground">No messages</p>
-            )}
-          </div>
-        </button>
-      </DrawerTrigger>
-      <DrawerContent className="h-full w-[800px] sm:max-w-[800px] overflow-hidden">
-        <DrawerHeader className="border-b border-border shrink-0">
-          <DrawerTitle>All Messages ({messageCount})</DrawerTitle>
-        </DrawerHeader>
-        <div className="flex-1 overflow-y-auto p-4">
-          <div className="space-y-3">
-            {messages.map((msg: any, i: number) => (
-              <MessageBubble key={i} message={msg} index={i + 1} />
-            ))}
-          </div>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  );
-}
-
-function InputMessagePreview({
-  message,
-  index,
-}: {
-  message: any;
-  index?: number;
-}) {
-  const role = message.role;
-  const content = message.content;
-
-  const roleLabels: Record<string, string> = {
-    user: 'User',
-    assistant: 'Assistant',
-    system: 'System',
-    tool: 'Tool',
-  };
-
-  // Get text content
-  const getTextContent = (content: any): string => {
-    if (typeof content === 'string') return content;
-    if (Array.isArray(content)) {
-      return content
-        .filter(p => p.type === 'text')
-        .map(p => p.text)
-        .join('');
-    }
-    return '';
-  };
-
-  // Get tool calls from assistant message
-  const getToolCalls = (content: any): any[] => {
-    if (Array.isArray(content)) {
-      return content.filter(p => p.type === 'tool-call');
-    }
-    return [];
-  };
-
-  // Get tool results from tool message
-  const getToolResults = (content: any): any[] => {
-    if (Array.isArray(content)) {
-      return content.filter(p => p.type === 'tool-result');
-    }
-    return [];
-  };
-
-  // Get reasoning/thinking content
-  const getReasoningContent = (content: any): string => {
-    if (Array.isArray(content)) {
-      return content
-        .filter(p => p.type === 'thinking' || p.type === 'reasoning')
-        .map(p => p.thinking || p.text || p.reasoning)
-        .join('');
-    }
-    return '';
-  };
-
-  const textContent = getTextContent(content);
-  const toolCalls = getToolCalls(content);
-  const toolResults = getToolResults(content);
-  const reasoningContent = getReasoningContent(content);
-
-  // Count total parts
-  const partCount =
-    (textContent ? 1 : 0) +
-    (reasoningContent ? 1 : 0) +
-    toolCalls.length +
-    toolResults.length;
-
-  return (
-    <div className="rounded-md border border-border/50 bg-background/50 p-2.5 space-y-2">
-      <div className="flex items-center gap-2">
-        {index && (
-          <span className="text-[10px] font-mono text-muted-foreground/50">
-            {index}
-          </span>
-        )}
-        <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-          {roleLabels[role] || role}
-        </span>
-        {partCount > 1 && (
-          <span className="text-[10px] text-muted-foreground/60">
-            {partCount} parts
-          </span>
-        )}
-      </div>
-
-      {/* Reasoning/Thinking content */}
-      {reasoningContent && (
-        <div className="text-xs text-amber-500/60">[thinking]</div>
-      )}
-
-      {/* Text content */}
-      {textContent && (
-        <div className="text-xs text-foreground/90 line-clamp-3">
-          {textContent}
-        </div>
-      )}
-
-      {/* Tool calls (from assistant) */}
-      {toolCalls.length > 0 && (
-        <div className="space-y-1">
-          {toolCalls.slice(0, 3).map((call: any, i: number) => {
-            const args = call.args ?? call.input;
-            const parsedArgs =
-              typeof args === 'string' ? safeParseJson(args) : args;
-            return (
-              <div
-                key={i}
-                className="text-[11px] font-mono text-muted-foreground truncate"
-              >
-                {call.toolName}({formatToolParamsInline(parsedArgs)})
-              </div>
-            );
-          })}
-          {toolCalls.length > 3 && (
-            <div className="text-[11px] text-muted-foreground/60">
-              +{toolCalls.length - 3} more tool{' '}
-              {toolCalls.length - 3 === 1 ? 'call' : 'calls'}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Tool results */}
-      {toolResults.length > 0 && (
-        <div className="space-y-1">
-          {toolResults.slice(0, 3).map((result: any, i: number) => {
-            const resultContent = result.result ?? result.output ?? result;
-            const resultPreview = formatResultPreview(resultContent);
-            return (
-              <div
-                key={i}
-                className="text-[11px] font-mono text-muted-foreground truncate"
-              >
-                {result.toolName || 'tool'}(…) =&gt; {resultPreview}
-              </div>
-            );
-          })}
-          {toolResults.length > 3 && (
-            <div className="text-[11px] text-muted-foreground/60">
-              +{toolResults.length - 3} more tool{' '}
-              {toolResults.length - 3 === 1 ? 'result' : 'results'}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Empty content fallback */}
-      {!textContent &&
-        !reasoningContent &&
-        toolCalls.length === 0 &&
-        toolResults.length === 0 && (
-          <div className="text-[11px] text-muted-foreground italic">
-            Empty message
-          </div>
-        )}
-    </div>
-  );
-}
-
-function ToolItem({ tool }: { tool: any }) {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <div className="rounded-md border border-border bg-background overflow-hidden">
-      <button
-        className="w-full flex items-center justify-between p-2.5 hover:bg-accent/50 transition-colors"
-        onClick={() => setExpanded(!expanded)}
-      >
-        <span className="text-sm font-mono text-purple">{tool.name}</span>
-        {tool.parameters && (
-          <ChevronRight
-            className={`size-3 text-muted-foreground transition-transform ${
-              expanded ? 'rotate-90' : ''
-            }`}
-          />
-        )}
-      </button>
-      {expanded && tool.parameters && (
-        <div className="px-2.5 pb-2.5 border-t border-border">
-          {tool.description && (
-            <p className="text-xs text-muted-foreground mb-2 pt-2">
-              {tool.description}
-            </p>
-          )}
-          <JsonBlock data={tool.parameters} compact />
-        </div>
-      )}
-      {!expanded && tool.description && (
-        <div className="px-2.5 pb-2 -mt-1">
-          <p className="text-[11px] text-muted-foreground truncate">
-            {tool.description}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function CollapsibleToolCall({
-  toolName,
-  toolCallId,
-  data,
-}: {
-  toolName: string;
-  toolCallId?: string;
-  data: any;
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const parsedData = typeof data === 'string' ? safeParseJson(data) : data;
-
-  return (
-    <div className="rounded-md border border-purple/30 overflow-hidden">
-      <button
-        className="w-full flex items-center gap-2 px-3 py-2 bg-purple/10 hover:bg-purple/20 transition-colors"
-        onClick={() => setExpanded(!expanded)}
-      >
-        <ChevronRight
-          className={`size-3 text-purple transition-transform shrink-0 ${
-            expanded ? 'rotate-90' : ''
-          }`}
-        />
-        <Wrench className="size-3 text-purple shrink-0" />
-        <span className="text-xs font-mono font-medium text-purple">
-          {toolName}
-        </span>
-        {!expanded && parsedData && (
-          <span className="text-[11px] font-mono text-purple/70 truncate">
-            {formatToolParams(parsedData)}
-          </span>
-        )}
-        {toolCallId && (
-          <span className="text-[10px] font-mono text-muted-foreground/60 ml-auto shrink-0">
-            {toolCallId}
-          </span>
-        )}
-      </button>
-      {expanded && (
-        <div className="p-3 bg-card/50 border-t border-purple/30">
-          <JsonBlock data={parsedData} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function CollapsibleToolResult({
-  toolName,
-  toolCallId,
-  data,
-}: {
-  toolName?: string;
-  toolCallId?: string;
-  data: any;
-}) {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <div className="rounded-md border border-success/30 overflow-hidden">
-      <button
-        className="w-full flex items-center gap-2 px-3 py-2 bg-success/10 hover:bg-success/20 transition-colors"
-        onClick={() => setExpanded(!expanded)}
-      >
-        <ChevronRight
-          className={`size-3 text-success transition-transform shrink-0 ${
-            expanded ? 'rotate-90' : ''
-          }`}
-        />
-        <span className="text-xs font-medium text-success">Result</span>
-        {toolName && (
-          <span className="text-[11px] font-mono text-muted-foreground">
-            {toolName}
-          </span>
-        )}
-        {toolCallId && (
-          <span className="text-[10px] font-mono text-muted-foreground/60 ml-auto shrink-0">
-            {toolCallId}
-          </span>
-        )}
-      </button>
-      {expanded && (
-        <div className="p-3 bg-card/50 border-t border-success/30">
-          <JsonBlock data={data} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function MessageBubble({ message, index }: { message: any; index?: number }) {
-  const role = message.role;
-  const content = message.content;
-
-  const roleLabels: Record<string, string> = {
-    user: 'User',
-    assistant: 'Assistant',
-    system: 'System',
-    tool: 'Tool',
-  };
-
-  const getTextContent = (content: any): string => {
-    if (typeof content === 'string') return content;
-    if (Array.isArray(content)) {
-      return content
-        .filter(p => p.type === 'text')
-        .map(p => p.text)
-        .join('');
-    }
-    return '';
-  };
-
-  const getToolCalls = (content: any): any[] => {
-    if (Array.isArray(content)) {
-      return content.filter(p => p.type === 'tool-call');
-    }
-    return [];
-  };
-
-  const getToolResults = (content: any): any[] => {
-    if (Array.isArray(content)) {
-      return content.filter(p => p.type === 'tool-result');
-    }
-    return [];
-  };
-
-  const getReasoningContent = (content: any): string => {
-    if (Array.isArray(content)) {
-      return content
-        .filter(p => p.type === 'thinking' || p.type === 'reasoning')
-        .map(p => p.thinking || p.text || p.reasoning)
-        .join('');
-    }
-    return '';
-  };
-
-  const textContent = getTextContent(content);
-  const toolCalls = getToolCalls(content);
-  const toolResults = getToolResults(content);
-  const reasoningContent = getReasoningContent(content);
-
-  // Count total parts
-  const partCount =
-    (textContent ? 1 : 0) +
-    (reasoningContent ? 1 : 0) +
-    toolCalls.length +
-    toolResults.length;
-
-  return (
-    <div className="rounded-md border border-border/50 bg-background/50 p-3 space-y-2">
-      <div className="flex items-center gap-2">
-        {index && (
-          <span className="text-[10px] font-mono text-muted-foreground/50">
-            {index}
-          </span>
-        )}
-        <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-          {roleLabels[role] || role}
-        </span>
-        {partCount > 1 && (
-          <span className="text-[10px] text-muted-foreground/60">
-            {partCount} parts
-          </span>
-        )}
-      </div>
-
-      {/* Reasoning/Thinking content - full display */}
-      {reasoningContent && <ReasoningBlock content={reasoningContent} />}
-
-      {/* Full text content */}
-      {textContent && (
-        <TextBlock
-          content={textContent}
-          defaultExpanded={
-            !reasoningContent &&
-            toolCalls.length === 0 &&
-            toolResults.length === 0
-          }
-          isSystem={role === 'system'}
-        />
-      )}
-
-      {/* Tool calls */}
-      {toolCalls.length > 0 && (
-        <div className="space-y-2">
-          {toolCalls.map((call: any, i: number) => (
-            <CollapsibleToolCall
-              key={i}
-              toolName={call.toolName}
-              toolCallId={call.toolCallId}
-              data={call.args ?? call.input}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* Tool results */}
-      {toolResults.length > 0 && (
-        <div className="space-y-2">
-          {toolResults.map((result: any, i: number) => (
-            <CollapsibleToolResult
-              key={i}
-              toolName={result.toolName}
-              toolCallId={result.toolCallId}
-              data={result.result ?? result.output ?? result}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* Empty content fallback */}
-      {!textContent &&
-        !reasoningContent &&
-        toolCalls.length === 0 &&
-        toolResults.length === 0 && (
-          <div className="text-[11px] text-muted-foreground italic">
-            Empty message
-          </div>
-        )}
-    </div>
-  );
-}
-
-function OutputDisplay({
-  output,
-  toolResults = [],
-}: {
-  output: any;
-  toolResults?: any[];
-}) {
-  const getToolResult = (toolCallId: string) => {
-    return toolResults.find((r: any) => r.toolCallId === toolCallId);
-  };
-
-  const toolCalls =
-    output?.toolCalls ||
-    output?.content?.filter((p: any) => p.type === 'tool-call') ||
-    [];
-
-  const textParts =
-    output?.textParts ||
-    output?.content?.filter((p: any) => p.type === 'text') ||
-    [];
-
-  // Get reasoning/thinking parts
-  const reasoningParts =
-    output?.reasoningParts ||
-    output?.content?.filter(
-      (p: any) => p.type === 'thinking' || p.type === 'reasoning',
-    ) ||
-    [];
-
-  const textContent = textParts.map((p: any) => p.text).join('');
-  const reasoningContent = reasoningParts.map((p: any) => p.text).join('');
-
-  // Check if text is the only content
-  const isTextOnly = textContent && !reasoningContent && toolCalls.length === 0;
-
-  return (
-    <div className="space-y-3">
-      {/* Reasoning/Thinking */}
-      {reasoningContent && <ReasoningBlock content={reasoningContent} />}
-
-      {/* Text Response */}
-      {textContent && (
-        <TextBlock content={textContent} defaultExpanded={isTextOnly} />
-      )}
-
-      {/* Tool Calls with Results */}
-      {toolCalls.map((call: any, i: number) => {
-        const result = getToolResult(call.toolCallId);
-        return (
-          <ToolCallCard
-            key={i}
-            toolName={call.toolName}
-            args={call.args ?? call.input}
-            result={result?.output ?? result?.result}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-function ToolCallCard({
-  toolName,
-  args,
-  result,
-}: {
-  toolName: string;
-  args: any;
-  result?: any;
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const parsedArgs = typeof args === 'string' ? safeParseJson(args) : args;
-  const parsedResult =
-    typeof result === 'string' ? safeParseJson(result) : result;
-
-  return (
-    <div className="rounded-md border border-purple/30 overflow-hidden">
-      {/* Tool Call Header */}
-      <button
-        className="w-full flex items-center gap-2 px-3 py-2 bg-purple/10 hover:bg-purple/20 transition-colors"
-        onClick={() => setExpanded(!expanded)}
-      >
-        <ChevronRight
-          className={`size-3 text-purple transition-transform shrink-0 ${
-            expanded ? 'rotate-90' : ''
-          }`}
-        />
-        <Wrench className="size-3 text-purple shrink-0" />
-        <span className="text-xs font-mono font-medium text-purple">
-          {toolName}
-        </span>
-        {!expanded && parsedArgs && (
-          <span className="text-[11px] font-mono text-purple/70 truncate">
-            {formatToolParams(parsedArgs)}
-          </span>
-        )}
-      </button>
-
-      {expanded && (
-        <>
-          {/* Arguments */}
-          <div className="p-3 bg-card/50 border-t border-purple/30">
-            <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-2">
-              Input
-            </div>
-            <JsonBlock data={parsedArgs} />
-          </div>
-
-          {/* Result */}
-          {parsedResult && (
-            <div className="p-3 border-t border-border bg-success/5">
-              <div className="text-[10px] font-medium uppercase tracking-wider text-success mb-2">
-                Output
-              </div>
-              <JsonBlock data={parsedResult} />
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-function ReasoningBlock({ content }: { content: string }) {
-  const [expanded, setExpanded] = useState(false);
-
-  // Truncate preview to first 200 characters
-  const previewContent =
-    content.length > 200 ? content.slice(0, 200) + '…' : content;
-
-  return (
-    <div className="rounded-md border border-amber-500/30 overflow-hidden">
-      <button
-        className="w-full flex items-center gap-2 px-3 py-2 bg-amber-500/10 hover:bg-amber-500/20 transition-colors"
-        onClick={() => setExpanded(!expanded)}
-      >
-        <ChevronRight
-          className={`size-3 text-amber-500 transition-transform shrink-0 ${
-            expanded ? 'rotate-90' : ''
-          }`}
-        />
-        <Brain className="size-3 text-amber-500 shrink-0" />
-        <span className="text-xs font-medium text-amber-500">Thinking</span>
-        {!expanded && (
-          <span className="text-[11px] text-amber-500/70 truncate ml-1">
-            {previewContent}
-          </span>
-        )}
-      </button>
-
-      {expanded && (
-        <div className="p-3 bg-card/50 border-t border-amber-500/30">
-          <div className="text-xs text-foreground/80 leading-relaxed whitespace-pre-wrap">
-            {content}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function TextBlock({
-  content,
-  defaultExpanded = false,
-  isSystem = false,
-}: {
-  content: string;
-  defaultExpanded?: boolean;
-  isSystem?: boolean;
-}) {
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const [copied, setCopied] = useState(false);
-
-  // Truncate preview to first 200 characters
-  const previewContent =
-    content.length > 200 ? content.slice(0, 200) + '…' : content;
-
-  const borderColor = isSystem ? 'border-blue-500/30' : 'border-border';
-  const bgColor = isSystem ? 'bg-blue-500/10' : 'bg-muted/30';
-  const hoverBgColor = isSystem ? 'hover:bg-blue-500/20' : 'hover:bg-muted/50';
-  const iconColor = isSystem ? 'text-blue-400' : 'text-muted-foreground';
-  const labelColor = isSystem ? 'text-blue-400' : 'text-foreground';
-
-  const handleCopy = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    await navigator.clipboard.writeText(content);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <div className={`rounded-md border ${borderColor} overflow-hidden`}>
-      <button
-        className={`w-full flex items-center gap-2 px-3 py-2 ${bgColor} ${hoverBgColor} transition-colors`}
-        onClick={() => setExpanded(!expanded)}
-      >
-        <ChevronRight
-          className={`size-3 ${iconColor} transition-transform shrink-0 ${
-            expanded ? 'rotate-90' : ''
-          }`}
-        />
-        <MessageSquare className={`size-3 ${iconColor} shrink-0`} />
-        <span className={`text-xs font-medium ${labelColor}`}>Text</span>
-        {!expanded && (
-          <span
-            className={`text-[11px] ${isSystem ? 'text-blue-400/70' : 'text-muted-foreground'} truncate ml-1`}
-          >
-            {previewContent}
-          </span>
-        )}
-      </button>
-
-      {expanded && (
-        <div
-          className={`p-3 bg-card/50 border-t ${borderColor} group relative`}
-        >
-          <button
-            onClick={handleCopy}
-            className="absolute top-1.5 right-1.5 p-1.5 rounded-md border border-border bg-background opacity-0 group-hover:opacity-100 transition-opacity z-10"
-            title="Copy to clipboard"
-          >
-            {copied ? (
-              <Check className="size-3 text-success" />
-            ) : (
-              <Copy className="size-3 text-muted-foreground" />
-            )}
-          </button>
-          <div className="text-xs text-foreground leading-relaxed whitespace-pre-wrap max-h-60 overflow-y-auto">
-            {content}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function JsonBlock({
-  data,
-  compact = false,
-  size = 'sm',
-}: {
-  data: any;
-  compact?: boolean;
-  size?: 'sm' | 'base' | 'lg';
-}) {
-  const [copied, setCopied] = useState(false);
-
-  const jsonString = JSON.stringify(data, null, 2);
-  const displayString =
-    compact && jsonString.length > 200 ? JSON.stringify(data) : jsonString;
-
-  const sizeClasses = {
-    sm: 'text-xs',
-    base: 'text-sm',
-    lg: 'text-base',
-  };
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(jsonString);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <div className="relative group">
-      <button
-        onClick={handleCopy}
-        className="absolute top-1.5 right-1.5 p-1.5 rounded-md border border-border bg-background opacity-0 group-hover:opacity-100 transition-opacity z-10"
-        title="Copy to clipboard"
-      >
-        {copied ? (
-          <Check className="size-3 text-success" />
-        ) : (
-          <Copy className="size-3 text-muted-foreground" />
-        )}
-      </button>
-      <pre
-        className={`font-mono ${sizeClasses[size]} text-muted-foreground whitespace-pre-wrap wrap-break-words bg-background rounded p-2 ${
-          compact ? 'max-h-20 overflow-hidden' : ''
-        }`}
-      >
-        {displayString}
-      </pre>
-    </div>
-  );
-}
-
-function RawDataSection({
-  rawRequest,
-  rawResponse,
-  rawChunks,
-  isStream,
-}: {
-  rawRequest: string | null;
-  rawResponse: string | null;
-  rawChunks: string | null;
-  isStream: boolean;
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const [responseView, setResponseView] = useState<'parsed' | 'raw'>('parsed');
-
-  if (!rawRequest && !rawResponse) return null;
-
-  const hasRawChunks = isStream && rawChunks;
-
-  return (
-    <div className="border-t border-border">
-      <button
-        className="w-full flex items-center gap-2 px-4 py-2.5 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
-        onClick={() => setExpanded(!expanded)}
-      >
-        <ChevronRight
-          className={`size-3 transition-transform ${expanded ? 'rotate-90' : ''}`}
-        />
-        <span className="font-medium uppercase tracking-wider">
-          Request / Response
-        </span>
-      </button>
-
-      {expanded && (
-        <div className="px-4 pb-4 grid grid-cols-2 gap-4">
-          {rawRequest && (
-            <div className="flex flex-col">
-              <div className="h-7 flex items-end mb-2">
-                <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-                  Request
-                </span>
-              </div>
-              <div className="max-h-[400px] overflow-auto rounded-md border border-border">
-                <JsonBlock data={safeParseJson(rawRequest)} />
-              </div>
-            </div>
-          )}
-          {(rawResponse || rawChunks) && (
-            <div className="flex flex-col">
-              <div className="h-7 flex items-end justify-between mb-2">
-                <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-                  {isStream ? 'Stream' : 'Response'}
-                </span>
-                {hasRawChunks && (
-                  <div className="inline-flex rounded-md border border-border bg-muted/30 p-0.5">
-                    <button
-                      onClick={() => setResponseView('parsed')}
-                      className={`px-2 py-0.5 text-[10px] font-medium rounded transition-colors ${
-                        responseView === 'parsed'
-                          ? 'bg-background text-foreground shadow-sm'
-                          : 'text-muted-foreground hover:text-foreground'
-                      }`}
-                    >
-                      AI SDK
-                    </button>
-                    <button
-                      onClick={() => setResponseView('raw')}
-                      className={`px-2 py-0.5 text-[10px] font-medium rounded transition-colors ${
-                        responseView === 'raw'
-                          ? 'bg-background text-foreground shadow-sm'
-                          : 'text-muted-foreground hover:text-foreground'
-                      }`}
-                    >
-                      Provider
-                    </button>
-                  </div>
-                )}
-              </div>
-              <div className="max-h-[400px] overflow-auto rounded-md border border-border">
-                <JsonBlock
-                  data={safeParseJson(
-                    hasRawChunks && responseView === 'raw'
-                      ? rawChunks
-                      : rawResponse,
-                  )}
-                />
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function UsageDetails({ usage }: { usage: any }) {
-  const inputBreakdown = getInputTokenBreakdown(usage?.inputTokens);
-  const outputBreakdown = getOutputTokenBreakdown(usage?.outputTokens);
-
-  return (
-    <div className="space-y-6">
-      {/* Summary Cards */}
-      <div className="grid grid-cols-2 gap-4">
-        <div className="rounded-lg border border-border bg-card p-4">
-          <div className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">
-            Input Tokens
-          </div>
-          <div className="text-2xl font-semibold">{inputBreakdown.total}</div>
-          {(inputBreakdown.cacheRead !== undefined ||
-            inputBreakdown.cacheWrite !== undefined) && (
-            <div className="mt-3 space-y-1 text-sm text-muted-foreground">
-              {inputBreakdown.cacheRead !== undefined && (
-                <div className="flex justify-between">
-                  <span>Cache read</span>
-                  <span className="font-mono">{inputBreakdown.cacheRead}</span>
-                </div>
-              )}
-              {inputBreakdown.cacheWrite !== undefined && (
-                <div className="flex justify-between">
-                  <span>Cache write</span>
-                  <span className="font-mono">{inputBreakdown.cacheWrite}</span>
-                </div>
-              )}
-              {inputBreakdown.noCache !== undefined && (
-                <div className="flex justify-between">
-                  <span>No cache</span>
-                  <span className="font-mono">{inputBreakdown.noCache}</span>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        <div className="rounded-lg border border-border bg-card p-4">
-          <div className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">
-            Output Tokens
-          </div>
-          <div className="text-2xl font-semibold">{outputBreakdown.total}</div>
-          {(outputBreakdown.text !== undefined ||
-            outputBreakdown.reasoning !== undefined) && (
-            <div className="mt-3 space-y-1 text-sm text-muted-foreground">
-              {outputBreakdown.text !== undefined && (
-                <div className="flex justify-between">
-                  <span>Text</span>
-                  <span className="font-mono">{outputBreakdown.text}</span>
-                </div>
-              )}
-              {outputBreakdown.reasoning !== undefined && (
-                <div className="flex justify-between">
-                  <span>Reasoning</span>
-                  <span className="font-mono">{outputBreakdown.reasoning}</span>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Raw Usage Data */}
-      {usage?.raw && (
-        <div>
-          <div className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">
-            Raw Provider Usage
-          </div>
-          <JsonBlock data={usage.raw} size="sm" />
-        </div>
-      )}
-
-      {/* Full Usage Object */}
-      <div>
-        <div className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">
-          Full Usage Object
-        </div>
-        <JsonBlock data={usage} size="sm" />
-      </div>
-    </div>
-  );
-}
-
-function TokenBreakdownTooltip({
-  input,
-  output,
-  raw,
-}: {
-  input: InputTokenBreakdown;
-  output: OutputTokenBreakdown;
-  raw?: unknown;
-}) {
-  // Check if we have any breakdown metadata (even if values are 0)
-  const hasInputBreakdown =
-    input.noCache !== undefined ||
-    input.cacheRead !== undefined ||
-    input.cacheWrite !== undefined;
-  const hasOutputBreakdown =
-    output.text !== undefined || output.reasoning !== undefined;
-  const hasBreakdown = hasInputBreakdown || hasOutputBreakdown;
-
-  if (!hasBreakdown) {
-    return (
-      <div className="text-xs">
-        <div>Input: {input.total}</div>
-        <div>Output: {output.total}</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="text-xs space-y-2">
-      <div>
-        <div className="font-medium mb-1">Input: {input.total}</div>
-        {input.cacheRead !== undefined && (
-          <div className="text-muted-foreground ml-2">
-            Cache read: {input.cacheRead}
-          </div>
-        )}
-        {input.cacheWrite !== undefined && (
-          <div className="text-muted-foreground ml-2">
-            Cache write: {input.cacheWrite}
-          </div>
-        )}
-      </div>
-      <div>
-        <div className="font-medium mb-1">Output: {output.total}</div>
-        {output.text !== undefined && (
-          <div className="text-muted-foreground ml-2">Text: {output.text}</div>
-        )}
-        {output.reasoning !== undefined && (
-          <div className="text-muted-foreground ml-2">
-            Reasoning: {output.reasoning}
-          </div>
-        )}
-      </div>
-      {raw !== undefined && (
-        <div className="pt-1 border-t border-border mt-1">
-          <div className="text-muted-foreground/70 font-mono text-[10px] max-w-[200px] truncate">
-            Raw: {JSON.stringify(raw)}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function safeParseJson(value: any): any {
-  if (typeof value === 'string') {
-    try {
-      return JSON.parse(value);
-    } catch {
-      return value;
-    }
-  }
-  return value;
-}
-
-/**
- * Token usage can be either a number (old format) or an object with breakdown (ai@6.0.0-beta.139+).
- * Old format: inputTokens: 4456
- * New format for input: { total: 4456, noCache: 9, cacheRead: 4100, cacheWrite: 347 }
- * New format for output: { total: 1262, text: 1262, reasoning: 0 }
- */
-interface InputTokenBreakdown {
-  total: number;
-  noCache?: number;
-  cacheRead?: number;
-  cacheWrite?: number;
-}
-
-interface OutputTokenBreakdown {
-  total: number;
-  text?: number;
-  reasoning?: number;
-}
-
-function getInputTokenBreakdown(
-  tokens: number | InputTokenBreakdown | null | undefined,
-): InputTokenBreakdown {
-  if (tokens == null) return { total: 0 };
-  if (typeof tokens === 'number') return { total: tokens };
-  if (typeof tokens === 'object') {
-    // Handle case where total might be missing or not a number
-    const total =
-      'total' in tokens && typeof tokens.total === 'number' ? tokens.total : 0;
-    return {
-      total,
-      // Only include cache fields if they are actual numbers
-      ...(typeof tokens.noCache === 'number' && { noCache: tokens.noCache }),
-      ...(typeof tokens.cacheRead === 'number' && {
-        cacheRead: tokens.cacheRead,
-      }),
-      ...(typeof tokens.cacheWrite === 'number' && {
-        cacheWrite: tokens.cacheWrite,
-      }),
-    };
-  }
-  return { total: 0 };
-}
-
-function getOutputTokenBreakdown(
-  tokens: number | OutputTokenBreakdown | null | undefined,
-): OutputTokenBreakdown {
-  if (tokens == null) return { total: 0 };
-  if (typeof tokens === 'number') return { total: tokens };
-  if (typeof tokens === 'object') {
-    // Handle case where total might be missing or not a number
-    const total =
-      'total' in tokens && typeof tokens.total === 'number' ? tokens.total : 0;
-    return {
-      total,
-      // Only include text/reasoning if they are actual numbers
-      ...(typeof tokens.text === 'number' && { text: tokens.text }),
-      ...(typeof tokens.reasoning === 'number' && {
-        reasoning: tokens.reasoning,
-      }),
-    };
-  }
-  return { total: 0 };
-}
-
-/**
- * Formats input token count with cache info in parentheses if available.
- * e.g., "4456" or "4456 (4100 cached)"
- */
-function formatInputTokens(breakdown: InputTokenBreakdown): string {
-  const { total, cacheRead } = breakdown;
-  if (cacheRead && cacheRead > 0) {
-    return `${total} (${cacheRead} cached)`;
-  }
-  return String(total);
-}
-
-/**
- * Formats output token count with reasoning info if available.
- * e.g., "1054" or "1054 (500 reasoning)"
- */
-function formatOutputTokens(breakdown: OutputTokenBreakdown): string {
-  const { total, reasoning } = breakdown;
-  if (reasoning && reasoning > 0) {
-    return `${total} (${reasoning} reasoning)`;
-  }
-  return String(total);
-}
-
-/**
- * Truncates tool call parameters for preview display.
- */
-function formatToolParams(args: any, maxLength = 40): string {
-  if (!args || typeof args !== 'object') return '';
-
-  const entries = Object.entries(args);
-  if (entries.length === 0) return '';
-
-  const formatValue = (value: any, maxLen = 20): string => {
-    if (value === null) return 'null';
-    if (value === undefined) return 'undefined';
-    if (typeof value === 'object') {
-      if (Array.isArray(value)) {
-        return `[${value.length}]`;
-      }
-      return '{…}';
-    }
-    if (typeof value === 'string') {
-      if (value.length > maxLen) {
-        return `"${value.slice(0, maxLen)}…"`;
-      }
-      return `"${value}"`;
-    }
-    return String(value);
-  };
-
-  const firstEntry = entries[0];
-  if (!firstEntry) return '';
-
-  const [firstKey, firstValue] = firstEntry;
-  const firstFormatted = `${firstKey}: ${formatValue(firstValue)}`;
-
-  if (entries.length === 1) {
-    return `{ ${firstFormatted} }`;
-  }
-
-  return `{ ${firstFormatted}, … }`;
-}
-
-/**
- * Formats tool params inline for JS-like syntax: { key: "value", … }
- */
-function formatToolParamsInline(args: any): string {
-  if (!args || typeof args !== 'object') return '';
-
-  const entries = Object.entries(args);
-  if (entries.length === 0) return '';
-
-  const formatValue = (value: any, maxLen = 20): string => {
-    if (value === null) return 'null';
-    if (value === undefined) return 'undefined';
-    if (typeof value === 'object') {
-      if (Array.isArray(value)) {
-        return `[${value.length}]`;
-      }
-      return '{…}';
-    }
-    if (typeof value === 'string') {
-      if (value.length > maxLen) {
-        return `"${value.slice(0, maxLen)}…"`;
-      }
-      return `"${value}"`;
-    }
-    return String(value);
-  };
-
-  const firstEntry = entries[0];
-  if (!firstEntry) return '';
-
-  const [firstKey, firstValue] = firstEntry;
-  const firstFormatted = `${firstKey}: ${formatValue(firstValue)}`;
-
-  if (entries.length === 1) {
-    return `{ ${firstFormatted} }`;
-  }
-
-  return `{ ${firstFormatted}, … }`;
-}
-
-/**
- * Formats tool result for preview display in JS-like syntax
- */
-function formatResultPreview(result: any): string {
-  if (result === null) return 'null';
-  if (result === undefined) return 'undefined';
-
-  if (typeof result === 'string') {
-    if (result.length > 30) {
-      return `"${result.slice(0, 30)}…"`;
-    }
-    return `"${result}"`;
-  }
-
-  if (Array.isArray(result)) {
-    return `[${result.length}]`;
-  }
-
-  if (typeof result === 'object') {
-    const entries = Object.entries(result);
-    if (entries.length === 0) return '{}';
-
-    const firstEntry = entries[0];
-    if (!firstEntry) return '{…}';
-
-    const [firstKey, firstValue] = firstEntry;
-    let valueStr: string;
-    if (typeof firstValue === 'string' && firstValue.length > 15) {
-      valueStr = `"${firstValue.slice(0, 15)}…"`;
-    } else if (typeof firstValue === 'string') {
-      valueStr = `"${firstValue}"`;
-    } else if (typeof firstValue === 'object') {
-      valueStr = Array.isArray(firstValue) ? `[${firstValue.length}]` : '{…}';
-    } else {
-      valueStr = String(firstValue);
-    }
-
-    if (entries.length === 1) {
-      return `{ ${firstKey}: ${valueStr} }`;
-    }
-    return `{ ${firstKey}: ${valueStr}, … }`;
-  }
-
-  return String(result);
-}
-
 export default App;