refactor(trace): move formatCostAmount and getDisplayName to shared utils, normalize tool names in trace-spans

Author: waleedlatif1

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

@@ -19,14 +19,15 @@ import {
   Search as SearchIcon,
   Tooltip,
 } from '@/components/emcn'
-import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { cn } from '@/lib/core/utils/cn'
 import type { TraceSpan } from '@/lib/logs/types'
 import {
+  formatCostAmount,
   formatTokensSummary,
   formatTps,
   formatTtft,
   getBlockIconAndColor,
+  getDisplayName,
   hasErrorInTree,
   hasUnhandledErrorInTree,
   isIterationType,
@@ -58,13 +59,6 @@ function useSetToggle() {
   )
 }
 
-function formatCostAmount(value: number | undefined): string | undefined {
-  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) return undefined
-  const credits = dollarsToCredits(value)
-  if (credits <= 0) return '<1 credit'
-  return `${credits.toLocaleString('en-US')} ${credits === 1 ? 'credit' : 'credits'}`
-}
-
 function formatCostSummary(cost: TraceSpan['cost']): string | undefined {
   if (!cost) return undefined
   const parts: string[] = []
@@ -535,7 +529,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

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

@@ -29,21 +29,21 @@ import {
   Search as SearchIcon,
   Tooltip,
 } from '@/components/emcn'
-import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { cn } from '@/lib/core/utils/cn'
 import type { TraceSpan } from '@/lib/logs/types'
 import {
+  formatCostAmount,
   formatTokenCount,
   formatTps,
   formatTtft,
   getBlockIconAndColor,
+  getDisplayName,
   hasErrorInTree,
   hasUnhandledErrorInTree,
   isIterationType,
   parseTime,
 } from '@/app/workspace/[workspaceId]/logs/components/log-details/utils'
 import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
-import { normalizeToolId } from '@/tools/normalize'
 
 const DEFAULT_TREE_PANE_WIDTH = 360
 const MIN_TREE_PANE_WIDTH = 200
@@ -120,18 +120,6 @@ function iconColorClass(bgColor: string): string {
   return r * 299 + g * 587 + b * 114 > 160_000 ? 'text-[#111111]' : 'text-white'
 }
 
-function formatCostAmount(value: number | undefined): string | undefined {
-  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) return undefined
-  const credits = dollarsToCredits(value)
-  if (credits <= 0) return '<1 credit'
-  return `${credits.toLocaleString('en-US')} ${credits === 1 ? 'credit' : 'credits'}`
-}
-
-function getDisplayName(span: TraceSpan): string {
-  if (span.type?.toLowerCase() === 'tool') return normalizeToolId(span.name)
-  return span.name
-}
-
 /**
  * Flattens the visible (expanded) span tree into a linear list for keyboard
  * navigation, carrying depth, the chain of parent ids for indent drawing, and

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

@@ -1,5 +1,6 @@
 import type React from 'react'
 import { AgentSkillsIcon, WorkflowIcon } from '@/components/icons'
+import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 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'
@@ -88,6 +89,18 @@ export function formatTps(
   return tps > 0 ? `${tps.toLocaleString('en-US')} tok/s` : undefined
 }
 
+export function getDisplayName(span: TraceSpan): string {
+  if (span.type?.toLowerCase() === 'tool') return normalizeToolId(span.name)
+  return span.name
+}
+
+export function formatCostAmount(value: number | undefined): string | undefined {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) return undefined
+  const credits = dollarsToCredits(value)
+  if (credits <= 0) return '<1 credit'
+  return `${credits.toLocaleString('en-US')} ${credits === 1 ? 'credit' : 'credits'}`
+}
+
 export function formatTokensSummary(tokens: TraceSpan['tokens']): string | undefined {
   if (!tokens) return undefined
   const parts: string[] = []