fix(trace): normalize keyed tool names and show credits in trace view

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

@@ -19,26 +19,26 @@ import {
   Search as SearchIcon,
   Tooltip,
 } from '@/components/emcn'
-import { AgentSkillsIcon, WorkflowIcon } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { TraceSpan } from '@/lib/logs/types'
-import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config'
-import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
-import { getBlock, getBlockByToolName } from '@/blocks'
+import {
+  formatCostAmount,
+  formatTokensSummary,
+  formatTps,
+  formatTtft,
+  getBlockIconAndColor,
+  getDisplayName,
+  hasErrorInTree,
+  hasUnhandledErrorInTree,
+  isIterationType,
+  parseTime,
+} from '@/app/workspace/[workspaceId]/logs/components/log-details/utils'
 import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 
 interface TraceSpansProps {
   traceSpans?: TraceSpan[]
 }
 
-/**
- * Checks if a span type is a loop or parallel iteration
- */
-function isIterationType(type: string): boolean {
-  const lower = type?.toLowerCase() || ''
-  return lower === 'loop-iteration' || lower === 'parallel-iteration'
-}
-
 /**
  * Creates a toggle handler for Set-based state
  */
@@ -59,124 +59,9 @@ function useSetToggle() {
   )
 }
 
-/**
- * Formats a token count with locale-aware thousands separators.
- * Returns `undefined` for missing or non-positive counts so callers can
- * filter them out before rendering.
- */
-function formatTokenCount(value: number | undefined): string | undefined {
-  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) return undefined
-  return value.toLocaleString('en-US')
-}
-
-/**
- * Builds a compact, dot-separated token summary for a span:
- * `"1,234 in · 567 out · 1,801 total"` with cache/reasoning appended when
- * present. Returns `undefined` when the span has no meaningful token data.
- */
-function formatTokensSummary(tokens: TraceSpan['tokens']): string | undefined {
-  if (!tokens) return undefined
-  const parts: string[] = []
-  const input = formatTokenCount(tokens.input)
-  const output = formatTokenCount(tokens.output)
-  const total = formatTokenCount(tokens.total)
-  const cacheRead = formatTokenCount(tokens.cacheRead)
-  const cacheWrite = formatTokenCount(tokens.cacheWrite)
-  const reasoning = formatTokenCount(tokens.reasoning)
-  if (input) parts.push(`${input} in`)
-  if (cacheRead) parts.push(`${cacheRead} cached`)
-  if (cacheWrite) parts.push(`${cacheWrite} cache write`)
-  if (output) parts.push(`${output} out`)
-  if (reasoning) parts.push(`${reasoning} reasoning`)
-  if (total) parts.push(`${total} total`)
-  return parts.length > 0 ? parts.join(' · ') : undefined
-}
-
-/**
- * Formats a USD cost value for display. Shows `<$0.0001` for non-zero sub-cent
- * amounts so the user sees it was counted.
- */
-function formatCostAmount(value: number | undefined): string | undefined {
-  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) return undefined
-  if (value < 0.0001) return '<$0.0001'
-  return `$${value.toFixed(4)}`
-}
-
-/**
- * Builds a compact cost summary: `"$0.0023 · $0.0001 in · $0.0022 out"`.
- * Falls back to whichever parts are present.
- */
 function formatCostSummary(cost: TraceSpan['cost']): string | undefined {
   if (!cost) return undefined
-  const parts: string[] = []
-  const total = formatCostAmount(cost.total)
-  const input = formatCostAmount(cost.input)
-  const output = formatCostAmount(cost.output)
-  if (total) parts.push(total)
-  if (input) parts.push(`${input} in`)
-  if (output) parts.push(`${output} out`)
-  return parts.length > 0 ? parts.join(' · ') : undefined
-}
-
-/**
- * Derives tokens-per-second from output tokens over segment duration.
- * Returns `undefined` when inputs are missing or non-positive.
- */
-function formatTps(outputTokens: number | undefined, durationMs: number): string | undefined {
-  if (typeof outputTokens !== 'number' || !(outputTokens > 0)) return undefined
-  if (!(durationMs > 0)) return undefined
-  const tps = Math.round(outputTokens / (durationMs / 1000))
-  if (!(tps > 0)) return undefined
-  return `${tps.toLocaleString('en-US')} tok/s`
-}
-
-/**
- * Formats time-to-first-token. Uses `ms` below 1000, `s` above.
- */
-function formatTtft(ms: number | undefined): string | undefined {
-  if (typeof ms !== 'number' || !Number.isFinite(ms) || ms < 0) return undefined
-  if (ms < 1000) return `${Math.round(ms)}ms`
-  return `${(ms / 1000).toFixed(2)}s`
-}
-
-/**
- * Parses a time value to milliseconds
- */
-function parseTime(value?: string | number | null): number {
-  if (!value) return 0
-  const ms = typeof value === 'number' ? value : new Date(value).getTime()
-  return Number.isFinite(ms) ? ms : 0
-}
-
-/**
- * Checks if a span or any of its descendants has an error (any error).
- */
-function hasErrorInTree(span: TraceSpan): boolean {
-  if (span.status === 'error') return true
-  if (span.children && span.children.length > 0) {
-    return span.children.some((child) => hasErrorInTree(child))
-  }
-  if (span.toolCalls && span.toolCalls.length > 0) {
-    return span.toolCalls.some((tc) => tc.error)
-  }
-  return false
-}
-
-/**
- * Checks if a span or any of its descendants has an unhandled error.
- * Spans with errorHandled: true (including containers that propagate it)
- * are skipped. Used only for the root workflow span to match the actual
- * workflow status.
- */
-function hasUnhandledErrorInTree(span: TraceSpan): boolean {
-  if (span.status === 'error' && !span.errorHandled) return true
-  if (span.children && span.children.length > 0) {
-    return span.children.some((child) => hasUnhandledErrorInTree(child))
-  }
-  if (span.toolCalls && span.toolCalls.length > 0 && !span.errorHandled) {
-    return span.toolCalls.some((tc) => tc.error)
-  }
-  return false
+  return formatCostAmount(cost.total)
 }
 
 /**
@@ -201,53 +86,6 @@ function normalizeAndSortSpans(spans: TraceSpan[]): TraceSpan[] {
     })
 }
 
-const DEFAULT_BLOCK_COLOR = '#6b7280'
-
-/**
- * Gets icon and color for a span type using block config
- */
-function getBlockIconAndColor(
-  type: string,
-  toolName?: string
-): {
-  icon: React.ComponentType<{ className?: string }> | null
-  bgColor: string
-} {
-  const lowerType = type.toLowerCase()
-
-  // Check for tool by name first (most specific)
-  if (lowerType === 'tool' && toolName) {
-    // Handle load_skill tool with the AgentSkillsIcon
-    if (toolName === 'load_skill') {
-      return { icon: AgentSkillsIcon, bgColor: '#8B5CF6' }
-    }
-    const toolBlock = getBlockByToolName(toolName)
-    if (toolBlock) {
-      return { icon: toolBlock.icon, bgColor: toolBlock.bgColor }
-    }
-  }
-
-  // Special types not in block registry
-  if (lowerType === 'loop' || lowerType === 'loop-iteration') {
-    return { icon: LoopTool.icon, bgColor: LoopTool.bgColor }
-  }
-  if (lowerType === 'parallel' || lowerType === 'parallel-iteration') {
-    return { icon: ParallelTool.icon, bgColor: ParallelTool.bgColor }
-  }
-  if (lowerType === 'workflow') {
-    return { icon: WorkflowIcon, bgColor: '#6366F1' }
-  }
-
-  // Look up from block registry (model maps to agent)
-  const blockType = lowerType === 'model' ? 'agent' : lowerType
-  const blockConfig = getBlock(blockType)
-  if (blockConfig) {
-    return { icon: blockConfig.icon, bgColor: blockConfig.bgColor }
-  }
-
-  return { icon: null, bgColor: DEFAULT_BLOCK_COLOR }
-}
-
 /**
  * Renders the progress bar showing execution timeline
  */
@@ -403,10 +241,10 @@ function InputOutputSection({
           {label}
         </span>
         <ChevronDown
-          className='h-[8px] w-[8px] text-[var(--text-tertiary)] transition-colors transition-transform group-hover:text-[var(--text-primary)]'
-          style={{
-            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-          }}
+          className={cn(
+            'h-[8px] w-[8px] text-[var(--text-tertiary)] transition-colors transition-transform duration-100 group-hover:text-[var(--text-primary)]',
+            isExpanded && 'rotate-180'
+          )}
         />
       </div>
       {isExpanded && (
@@ -684,7 +522,7 @@ const TraceSpanNode = memo(function TraceSpanNode({
             className='min-w-0 max-w-[180px] truncate font-medium text-caption'
             style={{ color: showErrorStyle ? 'var(--text-error)' : 'var(--text-secondary)' }}
           >
-            {span.name}
+            {getDisplayName(span)}
           </span>
           {isToggleable && (
             <ChevronDown