import React, { useState, useMemo, useCallback, useRef } from 'react'; import { Wrench, MessageSquare, AlertCircle, Brain, Zap } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Card } from '@/components/ui/card'; import { Tooltip, TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip'; import type { RunDetail, Step, ChildRun, SpanKind, TraceSpan, ParseJson, ParsedOutput, ContentPart, ToolCallContentPart, ToolResultContentPart, } from '../types'; import { buildTraceSpans, safeParseJson, SPAN_COLORS, SPAN_COLORS_MUTED, } from '../utils'; import { JsonBlock } from './shared-components'; import { StepDetailContent } from './step-card'; export function TraceTimeline({ runDetail, parseJson, formatDuration, }: { runDetail: RunDetail; parseJson: ParseJson; formatDuration: (ms: number | null) => string; }) { const [selectedSpanId, setSelectedSpanId] = useState(null); const [labelWidth, setLabelWidth] = useState(280); const isResizingLabel = useRef(false); const spans = useMemo( () => buildTraceSpans(runDetail, parseJson), [runDetail, parseJson], ); const allSteps = useMemo(() => { const steps: Step[] = []; function collectSteps(runSteps: Step[], children: ChildRun[]) { steps.push(...runSteps); for (const cr of children) { collectSteps(cr.steps, cr.childRuns ?? []); } } collectSteps(runDetail.steps, runDetail.childRuns ?? []); return steps; }, [runDetail]); const allChildRuns = useMemo(() => { const runs: ChildRun[] = []; function collectRuns(children: ChildRun[]) { for (const cr of children) { runs.push(cr); collectRuns(cr.childRuns ?? []); } } collectRuns(runDetail.childRuns ?? []); return runs; }, [runDetail]); const handleLabelResizeStart = useCallback( (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); isResizingLabel.current = true; const startX = e.clientX; const startWidth = labelWidth; const onMouseMove = (moveEvent: MouseEvent) => { if (!isResizingLabel.current) return; const newWidth = Math.min( Math.max(startWidth + (moveEvent.clientX - startX), 120), 600, ); setLabelWidth(newWidth); }; const onMouseUp = () => { isResizingLabel.current = false; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); document.body.style.cursor = ''; document.body.style.userSelect = ''; }; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none'; }, [labelWidth], ); if (spans.length === 0) return null; const totalDurationMs = Math.max( ...spans.map(s => s.startMs + s.durationMs), 1, ); const tickCount = 5; const ticks = Array.from({ length: tickCount + 1 }, (_, i) => { const ms = (totalDurationMs / tickCount) * i; return { ms, label: ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`, }; }); const ROW_HEIGHT = 28; const handleSpanClick = (spanId: string) => { setSelectedSpanId(prev => (prev === spanId ? null : spanId)); }; const selectedSpan = selectedSpanId ? spans.find(s => s.id === selectedSpanId) : null; const resolvedStepId = selectedSpan?.stepId ?? selectedSpanId; const selectedStep = resolvedStepId ? allSteps.find(s => s.id === resolvedStepId) : null; const selectedStepIndex = selectedStep ? (() => { if (runDetail.steps.find(s => s.id === selectedStep.id)) { return runDetail.steps.findIndex(s => s.id === selectedStep.id); } const cr = allChildRuns.find(cr => cr.steps.some(s => s.id === selectedStep.id), ); return cr?.steps.findIndex(s => s.id === selectedStep.id) ?? 0; })() : 0; const selectedStepSiblings = selectedStep ? (() => { if (runDetail.steps.find(s => s.id === selectedStep.id)) { return runDetail.steps; } const cr = allChildRuns.find(cr => cr.steps.some(s => s.id === selectedStep.id), ); return cr?.steps ?? runDetail.steps; })() : runDetail.steps; const selectedStepChildRuns = selectedStep ? allChildRuns.filter(cr => cr.run.parent_step_id === selectedStep.id) : []; const spanIcon = (kind: SpanKind) => { switch (kind) { case 'child-run': return ; case 'thinking': return ; case 'tool-call': return ; case 'text': return ; case 'error': return ; default: return ; } }; return (

Trace Timeline {formatDuration(totalDurationMs)}

{/* Time axis */}

{ticks.map((tick, i) => ( {tick.label} ))}

{/* Span rows */} {spans.map(span => { const leftPct = (span.startMs / totalDurationMs) * 100; const widthPct = Math.max( (span.durationMs / totalDurationMs) * 100, 0.3, ); const isSelected = selectedSpanId === span.id; return (

handleSpanClick(span.id)} > {/* Label column */}

{spanIcon(span.kind)} {span.label} {span.sublabel && ( {span.sublabel} )} {formatDuration(span.durationMs || null)} {span.tokens && ( {span.tokens.input}→{span.tokens.output} )}

{/* Resize handle */}

{/* Bar column */}

{ticks.map((tick, i) => (

))}

{span.label}

{span.sublabel && (

{span.sublabel}

)} {span.modelId && span.modelId !== span.label && (

{span.modelId}

)}

{formatDuration(span.durationMs || null)} {span.tokens && ( {span.tokens.input} in → {span.tokens.output}{' '} out )}

Click to {isSelected ? 'deselect' : 'view details'}

); })}

{/* Selected span detail */} {selectedStep && selectedSpan && (

{spanIcon(selectedSpan.kind)} Step {selectedStepIndex + 1} {selectedSpan.kind !== 'step' && ( {selectedSpan.kind} )} {selectedSpan.label} {selectedStep.provider && ( {selectedStep.provider} )}

)}

); } function SpanDetailPanel({ span, step, stepIndex, steps, runDetail, parseJson, formatDuration, childRuns, }: { span: TraceSpan; step: Step; stepIndex: number; steps: Step[]; runDetail: RunDetail; parseJson: ParseJson; formatDuration: (ms: number | null) => string; childRuns: ChildRun[]; }) { const output = parseJson(step.output) as ParsedOutput | null; const contentParts: ContentPart[] = (output?.content as ContentPart[] | undefined) ?? []; if (span.kind === 'tool-call' && span.toolCallId) { const toolCall = contentParts.find( (p): p is ToolCallContentPart => p.type === 'tool-call' && 'toolCallId' in p && p.toolCallId === span.toolCallId, ); const toolResult = contentParts.find( (p): p is ToolResultContentPart => p.type === 'tool-result' && 'toolCallId' in p && p.toolCallId === span.toolCallId, ); const args = toolCall?.input ?? toolCall?.args; const parsedArgs = typeof args === 'string' ? safeParseJson(args) : args; const resultData = toolResult?.output ?? toolResult?.result; const parsedResult = typeof resultData === 'string' ? safeParseJson(resultData) : resultData; return (

{span.label}

{parsedArgs != null && (

Input

)} {parsedResult != null && (

Output

)} {!parsedArgs && !parsedResult && (

No data available for this tool call.

)}

); } if (span.kind === 'thinking' && span.thinkingText) { return (

Thinking

{span.thinkingText}

); } if (span.kind === 'text' && span.textContent) { return (

Text Response

{span.textContent}

); } if (span.kind === 'error') { return (

Error

{step.error}

); } return ( ); }