import React, { useState } from 'react'; import { ChevronRight, ChevronDown, Wrench, MessageSquare, AlertCircle, Brain, Loader2, } from 'lucide-react'; import { Card } from '@/components/ui/card'; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@/components/ui/collapsible'; import { Tooltip, TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip'; import type { Step, ChildRun, ParseJson, ParsedInput, ParsedOutput, ParsedUsage, PromptMessage, ContentPart, } from '../types'; import { getStepSummary, getStepInputSummary, getInputTokenBreakdown, getOutputTokenBreakdown, formatInputTokens, formatOutputTokens, } from '../utils'; import { StepConfigBar, RawDataSection, TokenBreakdownTooltip, } from './shared-components'; import { InputPanel } from './message-components'; import { OutputDisplay } from './output-components'; export function StepCard({ step, index, steps, isRunInProgress, expandedSteps, toggleStep, parseJson, formatDuration, childRuns, depth, }: { step: Step; index: number; steps: Step[]; isRunInProgress: boolean; expandedSteps: Set; toggleStep: (id: string) => void; parseJson: ParseJson; formatDuration: (ms: number | null) => string; childRuns: ChildRun[]; depth: number; }) { const isExpanded = expandedSteps.has(step.id); const isLastStep = index === steps.length - 1; const isActiveStep = isLastStep && isRunInProgress; const input = parseJson(step.input) as ParsedInput | null; const output = parseJson(step.output) as ParsedOutput | null; const usage = parseJson(step.usage) as ParsedUsage | null; const summary = getStepSummary(output, step.error); const isFirstStep = index === 0; const inputSummary = getStepInputSummary(input, isFirstStep); return ( toggleStep(step.id)}> ); } export function StepDetailContent({ step, index, steps, isRunInProgress, parseJson, formatDuration, childRuns, expandedSteps, toggleStep, depth, }: { step: Step; index: number; steps: Step[]; isRunInProgress: boolean; parseJson: ParseJson; formatDuration: (ms: number | null) => string; childRuns: ChildRun[]; expandedSteps?: Set; toggleStep?: (id: string) => void; depth: number; }) { const isLastStep = index === steps.length - 1; const isActiveStep = isLastStep && isRunInProgress; const input = parseJson(step.input) as ParsedInput | null; const output = parseJson(step.output) as ParsedOutput | null; const usage = parseJson(step.usage) as ParsedUsage | null; const nextStep = steps[index + 1]; const nextInput = nextStep ? (parseJson(nextStep.input) as ParsedInput | null) : null; const toolResults: ContentPart[] = nextInput?.prompt ?.filter((msg: PromptMessage) => msg.role === 'tool') ?.flatMap((msg: PromptMessage) => Array.isArray(msg.content) ? msg.content : [], ) ?? []; return ( <> | null } usage={usage} />

Output

{step.error ? (

{step.error}

) : output ? ( ) : isActiveStep ? (

Waiting for response...

) : (

No output

)}

{childRuns.length > 0 && expandedSteps && toggleStep && ( )} ); } function NestedChildRuns({ childRuns, expandedSteps, toggleStep, parseJson, formatDuration, depth, }: { childRuns: ChildRun[]; expandedSteps: Set; toggleStep: (id: string) => void; parseJson: ParseJson; formatDuration: (ms: number | null) => string; depth: number; }) { return (

Sub-agent {childRuns.length === 1 ? 'call' : 'calls'} ( {childRuns.length})

{childRuns.map(childRun => ( ))}

); } function NestedRunCard({ childRun, expandedSteps, toggleStep, parseJson, formatDuration, depth, }: { childRun: ChildRun; expandedSteps: Set; toggleStep: (id: string) => void; parseJson: ParseJson; formatDuration: (ms: number | null) => string; depth: number; }) { const [expanded, setExpanded] = useState(false); const firstStep = childRun.steps[0]; const firstInput = firstStep ? (parseJson(firstStep.input) as ParsedInput | null) : null; const promptMessages = firstInput?.prompt ?? []; const userMsg = [...promptMessages] .reverse() .find((m: PromptMessage) => m.role === 'user'); let label = 'Sub-agent call'; if (userMsg) { const content = typeof userMsg.content === 'string' ? userMsg.content : Array.isArray(userMsg.content) ? userMsg.content.find( (p): p is { type: 'text'; text: string } => p.type === 'text', )?.text || '' : ''; label = content.length > 60 ? content.slice(0, 60) + '...' : content; } const totalDuration = childRun.steps.reduce( (acc, s) => acc + (s.duration_ms || 0), 0, ); const modelId = firstStep?.model_id; return (

{expanded && (

{childRun.steps.map((step, index) => { const nestedChildRuns = (childRun.childRuns ?? []).filter( cr => cr.run.parent_step_id === step.id, ); return ( ); })}

)}

); }