fix(trace): extract normalizeToolId to client-safe module, consolidate log-details formatting utils

Author: waleedlatif1

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

@@ -22,6 +22,12 @@ import {
 import { AgentSkillsIcon, WorkflowIcon } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { TraceSpan } from '@/lib/logs/types'
+import {
+  formatTokensSummary,
+  formatTps,
+  formatTtft,
+  parseTime,
+} from '@/app/workspace/[workspaceId]/logs/components/log-details/utils'
 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'
@@ -59,53 +65,12 @@ 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[] = []
@@ -118,36 +83,6 @@ function formatCostSummary(cost: TraceSpan['cost']): string | undefined {
   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).
  */

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

@@ -33,12 +33,18 @@ import { AgentSkillsIcon, WorkflowIcon } from '@/components/icons'
 import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { cn } from '@/lib/core/utils/cn'
 import type { TraceSpan } from '@/lib/logs/types'
+import {
+  formatTokenCount,
+  formatTps,
+  formatTtft,
+  parseTime,
+} from '@/app/workspace/[workspaceId]/logs/components/log-details/utils'
 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 { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import { PROVIDER_DEFINITIONS } from '@/providers/models'
-import { normalizeToolId } from '@/tools'
+import { normalizeToolId } from '@/tools/normalize'
 
 const DEFAULT_BLOCK_COLOR = '#6b7280'
 const DEFAULT_TREE_PANE_WIDTH = 360
@@ -64,15 +70,6 @@ interface BlockAppearance {
   bgColor: string
 }
 
-/**
- * Parses a timestamp or numeric ms into milliseconds since epoch.
- */
-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
-}
-
 /**
  * Whether a span type represents a loop or parallel iteration container.
  */
@@ -187,31 +184,13 @@ function iconColorClass(bgColor: string): string {
   return r * 299 + g * 587 + b * 114 > 160_000 ? 'text-[#111111]' : 'text-white'
 }
 
-function formatTokenCount(value: number | undefined): string | undefined {
-  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) return undefined
-  return value.toLocaleString('en-US')
-}
-
 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 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`
-}
-
-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))
-  return tps > 0 ? `${tps.toLocaleString('en-US')} tok/s` : undefined
-}
-
 function getDisplayName(span: TraceSpan): string {
   if (span.type?.toLowerCase() === 'tool') return normalizeToolId(span.name)
   return span.name

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

@@ -0,0 +1,46 @@
+import type { TraceSpan } from '@/lib/logs/types'
+
+export 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
+}
+
+export function formatTokenCount(value: number | undefined): string | undefined {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) return undefined
+  return value.toLocaleString('en-US')
+}
+
+export 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`
+}
+
+export 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))
+  return tps > 0 ? `${tps.toLocaleString('en-US')} tok/s` : undefined
+}
+
+export 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
+}

apps/sim/tools/index.ts

@@ -550,44 +550,7 @@ async function applyHostedKeyCostToResult(
   }
 }
 
-/**
- * Normalizes a tool ID by stripping resource ID suffix (UUID/tableId).
- * Workflow tools: 'workflow_executor_<uuid>' -> 'workflow_executor'
- * Knowledge tools: 'knowledge_search_<uuid>' -> 'knowledge_search'
- * Table tools: 'table_query_rows_<tableId>' -> 'table_query_rows'
- */
-export function normalizeToolId(toolId: string): string {
-  if (toolId.startsWith('workflow_executor_') && toolId.length > 'workflow_executor_'.length) {
-    return 'workflow_executor'
-  }
-
-  const knowledgeOps = ['knowledge_search', 'knowledge_upload_chunk', 'knowledge_create_document']
-  for (const op of knowledgeOps) {
-    if (toolId.startsWith(`${op}_`) && toolId.length > op.length + 1) {
-      return op
-    }
-  }
-
-  const tableOps = [
-    'table_query_rows',
-    'table_insert_row',
-    'table_batch_insert_rows',
-    'table_update_row',
-    'table_update_rows_by_filter',
-    'table_delete_rows_by_filter',
-    'table_upsert_row',
-    'table_get_row',
-    'table_delete_row',
-    'table_get_schema',
-  ]
-  for (const op of tableOps) {
-    if (toolId.startsWith(`${op}_`) && toolId.length > op.length + 1) {
-      return op
-    }
-  }
-
-  return toolId
-}
+export { normalizeToolId } from '@/tools/normalize'
 
 /**
  * Maximum request body size in bytes before we warn/error about size limits.

apps/sim/tools/normalize.ts

@@ -0,0 +1,40 @@
+/**
+ * Normalizes a tool ID by stripping resource ID suffix (UUID/tableId).
+ * Workflow tools: 'workflow_executor_<uuid>' -> 'workflow_executor'
+ * Knowledge tools: 'knowledge_search_<uuid>' -> 'knowledge_search'
+ * Table tools: 'table_query_rows_<tableId>' -> 'table_query_rows'
+ *
+ * Pure string utility — no server dependencies, safe to import in client components.
+ */
+export function normalizeToolId(toolId: string): string {
+  if (toolId.startsWith('workflow_executor_') && toolId.length > 'workflow_executor_'.length) {
+    return 'workflow_executor'
+  }
+
+  const knowledgeOps = ['knowledge_search', 'knowledge_upload_chunk', 'knowledge_create_document']
+  for (const op of knowledgeOps) {
+    if (toolId.startsWith(`${op}_`) && toolId.length > op.length + 1) {
+      return op
+    }
+  }
+
+  const tableOps = [
+    'table_query_rows',
+    'table_insert_row',
+    'table_batch_insert_rows',
+    'table_update_row',
+    'table_update_rows_by_filter',
+    'table_delete_rows_by_filter',
+    'table_upsert_row',
+    'table_get_row',
+    'table_delete_row',
+    'table_get_schema',
+  ]
+  for (const op of tableOps) {
+    if (toolId.startsWith(`${op}_`) && toolId.length > op.length + 1) {
+      return op
+    }
+  }
+
+  return toolId
+}