Skip to content

improvement(trace-span): make tool calls separately collect in the tracespan #673

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
icecrasher321 merged 3 commits into from
Jul 12, 2025
Merged

improvement(trace-span): make tool calls separately collect in the tracespan #673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b4b6895
add tool calls to trace span
Jul 12, 2025
027614f
improvement(trace-span): make tool calls separately display in trace …
Jul 12, 2025
6967ac0
improve UI
Jul 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 89 additions & 34 deletions apps/sim/app/workspace/[workspaceId]/logs/components/trace-spans/trace-spans-display.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,22 @@ function transformBlockData(data: any, blockType: string, isInput: boolean) {
if (isInput) {
const cleanInput = { ...data }

// Remove sensitive fields
// Remove sensitive fields (common API keys and tokens)
if (cleanInput.apiKey) {
cleanInput.apiKey = '***'
}
if (cleanInput.azureApiKey) {
cleanInput.azureApiKey = '***'
}
if (cleanInput.token) {
cleanInput.token = '***'
}
if (cleanInput.accessToken) {
cleanInput.accessToken = '***'
}
if (cleanInput.authorization) {
cleanInput.authorization = '***'
}

// Remove null/undefined values for cleaner display
Object.keys(cleanInput).forEach((key) => {
Expand Down Expand Up @@ -73,6 +82,10 @@ function transformBlockData(data: any, blockType: string, isInput: boolean) {
headers: response.headers,
}

case 'tool':
// For tool calls, show the result data directly
return response

default:
// For other block types, show the response content
return response
Expand All @@ -82,6 +95,70 @@ function transformBlockData(data: any, blockType: string, isInput: boolean) {
return data
}

// Collapsible Input/Output component
interface CollapsibleInputOutputProps {
span: TraceSpan
spanId: string
}

function CollapsibleInputOutput({ span, spanId }: CollapsibleInputOutputProps) {
const [inputExpanded, setInputExpanded] = useState(false)
const [outputExpanded, setOutputExpanded] = useState(false)

return (
<div className='mt-2 mr-4 mb-4 ml-8 space-y-3 overflow-hidden'>
{/* Input Data - Collapsible */}
{span.input && (
<div>
<button
onClick={() => setInputExpanded(!inputExpanded)}
className='flex items-center gap-2 mb-2 font-medium text-muted-foreground text-xs hover:text-foreground transition-colors'
>
{inputExpanded ? (
<ChevronDown className='h-3 w-3' />
) : (
<ChevronRight className='h-3 w-3' />
)}
Input
</button>
{inputExpanded && (
<div className='mb-2 overflow-hidden rounded-md bg-secondary/30 p-3'>
<BlockDataDisplay data={span.input} blockType={span.type} isInput={true} />
</div>
)}
</div>
)}

{/* Output Data - Collapsible */}
{span.output && (
<div>
<button
onClick={() => setOutputExpanded(!outputExpanded)}
className='flex items-center gap-2 mb-2 font-medium text-muted-foreground text-xs hover:text-foreground transition-colors'
>
{outputExpanded ? (
<ChevronDown className='h-3 w-3' />
) : (
<ChevronRight className='h-3 w-3' />
)}
{span.status === 'error' ? 'Error Details' : 'Output'}
</button>
{outputExpanded && (
<div className='mb-2 overflow-hidden rounded-md bg-secondary/30 p-3'>
<BlockDataDisplay
data={span.output}
blockType={span.type}
isInput={false}
isError={span.status === 'error'}
/>
</div>
)}
</div>
)}
</div>
)
}

// Component to display block input/output data in a clean, readable format
function BlockDataDisplay({
data,
Expand Down Expand Up @@ -531,37 +608,8 @@ function TraceSpanItem({
{/* Expanded content */}
{expanded && (
<div>
{/* Block Input/Output Data */}
{(span.input || span.output) && (
<div className='mt-2 mr-4 mb-4 ml-8 space-y-3 overflow-hidden'>
{/* Input Data */}
{span.input && (
<div>
<h4 className='mb-2 font-medium text-muted-foreground text-xs'>Input</h4>
<div className='mb-2 overflow-hidden rounded-md bg-secondary/30 p-3'>
<BlockDataDisplay data={span.input} blockType={span.type} isInput={true} />
</div>
</div>
)}

{/* Output Data */}
{span.output && (
<div>
<h4 className='mb-2 font-medium text-muted-foreground text-xs'>
{span.status === 'error' ? 'Error Details' : 'Output'}
</h4>
<div className='mb-2 overflow-hidden rounded-md bg-secondary/30 p-3'>
<BlockDataDisplay
data={span.output}
blockType={span.type}
isInput={false}
isError={span.status === 'error'}
/>
</div>
</div>
)}
</div>
)}
{/* Block Input/Output Data - Collapsible */}
{(span.input || span.output) && <CollapsibleInputOutput span={span} spanId={spanId} />}

{/* Children and tool calls */}
{/* Render child spans */}
Expand Down Expand Up @@ -613,9 +661,16 @@ function TraceSpanItem({
startTime: new Date(toolStartTime).toISOString(),
endTime: new Date(toolEndTime).toISOString(),
status: toolCall.error ? 'error' : 'success',
// Include tool call arguments as input and result as output
input: toolCall.input,
output: toolCall.error
? { error: toolCall.error, ...(toolCall.output || {}) }
: toolCall.output,
}

// Tool calls typically don't have sub-items
// Tool calls now have input/output data to display
const hasToolCallData = Boolean(toolCall.input || toolCall.output || toolCall.error)

return (
<TraceSpanItem
key={`tool-${index}`}
Expand All @@ -627,7 +682,7 @@ function TraceSpanItem({
workflowStartTime={workflowStartTime}
onToggle={onToggle}
expandedSpans={expandedSpans}
hasSubItems={false}
hasSubItems={hasToolCallData}
/>
)
})}
Expand Down
Loading