Merge pull request #673 from simstudioai/fix/trace-spans-tool-calls

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

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/logs/components/trace-spans/trace-spans-display.tsx

@@ -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) => {
@@ -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
@@ -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,
@@ -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 */}
@@ -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}`}
@@ -627,7 +682,7 @@ function TraceSpanItem({
                     workflowStartTime={workflowStartTime}
                     onToggle={onToggle}
                     expandedSpans={expandedSpans}
-                    hasSubItems={false}
+                    hasSubItems={hasToolCallData}
                   />
                 )
               })}