Fix tool usage billing for streamed outputs

Author: Theodore Li

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -598,6 +598,24 @@ export const LogDetails = memo(function LogDetails({
                             {formatCost(log.cost?.output || 0)}
                           </span>
                         </div>
+                        {(() => {
+                          const models = (log.cost as Record<string, unknown>)?.models as
+                            | Record<string, { toolCost?: number }>
+                            | undefined
+                          const totalToolCost = models
+                            ? Object.values(models).reduce((sum, m) => sum + (m?.toolCost || 0), 0)
+                            : 0
+                          return totalToolCost > 0 ? (
+                            <div className='flex items-center justify-between'>
+                              <span className='font-medium text-[var(--text-tertiary)] text-caption'>
+                                Tool Usage:
+                              </span>
+                              <span className='font-medium text-[var(--text-secondary)] text-caption'>
+                                {formatCost(totalToolCost)}
+                              </span>
+                            </div>
+                          ) : null
+                        })()}
                       </div>
 
                       <div className='border-[var(--border)] border-t' />
@@ -626,7 +644,7 @@ export const LogDetails = memo(function LogDetails({
                     <div className='flex items-center justify-center rounded-md bg-[var(--surface-2)] p-2 text-center'>
                       <p className='font-medium text-[var(--text-subtle)] text-xs'>
                         Total cost includes a base execution charge of{' '}
-                        {formatCost(BASE_EXECUTION_CHARGE)} plus any model usage costs.
+                        {formatCost(BASE_EXECUTION_CHARGE)} plus any model and tool usage costs.
                       </p>
                     </div>
                   </div>

apps/sim/providers/index.ts

@@ -62,9 +62,9 @@ const ZERO_COST = Object.freeze({
 })
 
 /**
- * Prevents streaming callbacks from writing non-zero cost for BYOK users.
- * The property is frozen via defineProperty because providers set cost inside
- * streaming callbacks that fire after this function returns.
+ * Prevents streaming callbacks from writing non-zero model cost for BYOK users
+ * while preserving tool costs. The property is frozen via defineProperty because
+ * providers set cost inside streaming callbacks that fire after this function returns.
  */
 function zeroCostForBYOK(response: StreamingExecution): void {
   const output = response.execution?.output
@@ -73,9 +73,14 @@ function zeroCostForBYOK(response: StreamingExecution): void {
     return
   }
 
+  let toolCost = 0
   Object.defineProperty(output, 'cost', {
-    get: () => ZERO_COST,
-    set: () => {},
+    get: () => (toolCost > 0 ? { ...ZERO_COST, toolCost, total: toolCost } : ZERO_COST),
+    set: (value: Record<string, unknown>) => {
+      if (value?.toolCost && typeof value.toolCost === 'number') {
+        toolCost = value.toolCost
+      }
+    },
     configurable: true,
     enumerable: true,
   })