refactor(logs): migrate stores/components to contract types

Replace the legacy `WorkflowLog` / `LogsResponse` / `WorkflowData` /
`CostMetadata` / `ToolCallMetadata` shapes in
`stores/logs/filters/types.ts` with direct use of the contract types
`WorkflowLogSummary`, `WorkflowLogDetail`, and a new `WorkflowLogRow`
alias for surfaces that render either form. Removes the
`summaryToWorkflowLog` / `detailToWorkflowLog` bridge in the React
Query layer along with their double-cast annotations.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: waleedlatif1

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

@@ -22,9 +22,11 @@ import {
   SModalTabsTrigger,
   Tooltip,
 } from '@/components/emcn'
+import type { WorkflowLogRow } from '@/lib/api/contracts/logs'
 import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
 import { cn } from '@/lib/core/utils/cn'
 import { filterHiddenOutputKeys } from '@/lib/logs/execution/trace-spans/trace-spans'
+import type { TraceSpan } from '@/lib/logs/types'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
 import {
   ExecutionSnapshot,
@@ -43,7 +45,6 @@ import {
 import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { formatCost } from '@/providers/utils'
-import type { WorkflowLog } from '@/stores/logs/filters/types'
 import { useLogDetailsUIStore } from '@/stores/logs/store'
 import { MAX_LOG_DETAILS_WIDTH_RATIO, MIN_LOG_DETAILS_WIDTH } from '@/stores/logs/utils'
 
@@ -258,7 +259,7 @@ export type LogDetailsTab = 'overview' | 'trace'
 
 interface LogDetailsContentProps {
   /** The log to display */
-  log: WorkflowLog
+  log: WorkflowLogRow
   /** Fires when the active tab changes, so embedders can gate their own keyboard handlers */
   onActiveTabChange?: (tab: LogDetailsTab) => void
 }
@@ -309,7 +310,8 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
     !permissionConfig.hideTraceSpans
 
   const showTraceTab = !permissionConfig.hideTraceSpans && isLikelyExecution
-  const traceSpans = log.executionData?.traceSpans
+  // double-cast-allowed: contract trace span schema is intentionally permissive (optional duration/startTime/endTime to tolerate legacy persisted JSON); the canonical TraceSpan used by TraceView/ExecutionSnapshot requires them, and runtime data from the executor always supplies them.
+  const traceSpans = log.executionData?.traceSpans as unknown as TraceSpan[] | undefined
 
   const resolvedTab: LogDetailsTab = activeTab === 'trace' && !showTraceTab ? 'overview' : activeTab
 
@@ -621,7 +623,7 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
       {log.executionId && (
         <ExecutionSnapshot
           executionId={log.executionId}
-          traceSpans={log.executionData?.traceSpans}
+          traceSpans={traceSpans}
           isModal
           isOpen={isExecutionSnapshotOpen}
           onClose={() => setIsExecutionSnapshotOpen(false)}
@@ -633,7 +635,7 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
 
 interface LogDetailsProps {
   /** The log to display details for */
-  log: WorkflowLog | null
+  log: WorkflowLogRow | null
   /** Whether the sidebar is open */
   isOpen: boolean
   /** Callback when closing the sidebar */

apps/sim/app/workspace/[workspaceId]/logs/components/log-row-context-menu/log-row-context-menu.tsx

@@ -15,13 +15,13 @@ import {
   SquareArrowUpRight,
   X,
 } from '@/components/emcn'
-import type { WorkflowLog } from '@/stores/logs/filters/types'
+import type { WorkflowLogSummary } from '@/lib/api/contracts/logs'
 
 interface LogRowContextMenuProps {
   isOpen: boolean
   position: { x: number; y: number }
   onClose: () => void
-  log: WorkflowLog | null
+  log: WorkflowLogSummary | null
   onCopyExecutionId: () => void
   onCopyLink: () => void
   onOpenWorkflow: () => void

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

@@ -6,6 +6,7 @@ import { ArrowUpRight } from 'lucide-react'
 import Link from 'next/link'
 import { List, type RowComponentProps, useListRef } from 'react-window'
 import { Badge, buttonVariants, Loader } from '@/components/emcn'
+import type { WorkflowLogSummary } from '@/lib/api/contracts/logs'
 import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { cn } from '@/lib/core/utils/cn'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
@@ -18,16 +19,15 @@ import {
   StatusBadge,
   TriggerBadge,
 } from '@/app/workspace/[workspaceId]/logs/utils'
-import type { WorkflowLog } from '@/stores/logs/filters/types'
 
 const LOG_ROW_HEIGHT = 44 as const
 
 interface LogRowProps {
-  log: WorkflowLog
+  log: WorkflowLogSummary
   isSelected: boolean
-  onClick: (log: WorkflowLog) => void
-  onHover?: (log: WorkflowLog) => void
-  onContextMenu?: (e: React.MouseEvent, log: WorkflowLog) => void
+  onClick: (log: WorkflowLogSummary) => void
+  onHover?: (log: WorkflowLogSummary) => void
+  onContextMenu?: (e: React.MouseEvent, log: WorkflowLogSummary) => void
   selectedRowRef: React.RefObject<HTMLTableRowElement | null> | null
 }
 
@@ -56,7 +56,7 @@ const LogRow = memo(
       ? '#ec4899'
       : isDeletedWorkflow
         ? DELETED_WORKFLOW_COLOR
-        : log.workflow?.color
+        : (log.workflow?.color ?? undefined)
 
     const handleClick = () => onClick(log)
     const handleMouseEnter = () => onHover?.(log)
@@ -164,11 +164,11 @@ const LogRow = memo(
 )
 
 interface RowProps {
-  logs: WorkflowLog[]
+  logs: WorkflowLogSummary[]
   selectedLogId: string | null
-  onLogClick: (log: WorkflowLog) => void
-  onLogHover?: (log: WorkflowLog) => void
-  onLogContextMenu?: (e: React.MouseEvent, log: WorkflowLog) => void
+  onLogClick: (log: WorkflowLogSummary) => void
+  onLogHover?: (log: WorkflowLogSummary) => void
+  onLogContextMenu?: (e: React.MouseEvent, log: WorkflowLogSummary) => void
   selectedRowRef: React.RefObject<HTMLTableRowElement | null>
   isFetchingNextPage: boolean
   loaderRef: React.RefObject<HTMLDivElement | null>
@@ -225,11 +225,11 @@ function Row({
 }
 
 export interface LogsListProps {
-  logs: WorkflowLog[]
+  logs: WorkflowLogSummary[]
   selectedLogId: string | null
-  onLogClick: (log: WorkflowLog) => void
-  onLogHover?: (log: WorkflowLog) => void
-  onLogContextMenu?: (e: React.MouseEvent, log: WorkflowLog) => void
+  onLogClick: (log: WorkflowLogSummary) => void
+  onLogHover?: (log: WorkflowLogSummary) => void
+  onLogContextMenu?: (e: React.MouseEvent, log: WorkflowLogSummary) => void
   selectedRowRef: React.RefObject<HTMLTableRowElement | null>
   hasNextPage: boolean
   isFetchingNextPage: boolean

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -16,6 +16,11 @@ import {
   RefreshCw,
   toast,
 } from '@/components/emcn'
+import type {
+  WorkflowLogDetail,
+  WorkflowLogRow,
+  WorkflowLogSummary,
+} from '@/lib/api/contracts/logs'
 import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { cn } from '@/lib/core/utils/cn'
 import {
@@ -65,7 +70,6 @@ import {
 import { useWorkflowMap, useWorkflows } from '@/hooks/queries/workflows'
 import { useDebounce } from '@/hooks/use-debounce'
 import { useFilterStore } from '@/stores/logs/filters/store'
-import type { WorkflowLog } from '@/stores/logs/filters/types'
 import { CORE_TRIGGER_TYPES } from '@/stores/logs/filters/types'
 import {
   Dashboard,
@@ -286,7 +290,7 @@ export default function Logs() {
   const [isVisuallyRefreshing, setIsVisuallyRefreshing] = useState(false)
   const [isExporting, setIsExporting] = useState(false)
   const refreshTimersRef = useRef(new Set<number>())
-  const logsRef = useRef<WorkflowLog[]>([])
+  const logsRef = useRef<WorkflowLogSummary[]>([])
   const selectedLogIndexRef = useRef(-1)
   const selectedLogIdRef = useRef<string | null>(null)
   const shouldScrollIntoViewRef = useRef(false)
@@ -303,14 +307,14 @@ export default function Logs() {
 
   const [contextMenuOpen, setContextMenuOpen] = useState(false)
   const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
-  const [contextMenuLog, setContextMenuLog] = useState<WorkflowLog | null>(null)
+  const [contextMenuLog, setContextMenuLog] = useState<WorkflowLogSummary | null>(null)
 
   const [previewLogId, setPreviewLogId] = useState<string | null>(null)
 
   const queryClient = useQueryClient()
 
   const refetchInterval = useCallback(
-    (query: { state: { data?: WorkflowLog } }) => {
+    (query: { state: { data?: WorkflowLogDetail } }) => {
       if (!isLive) return false
       const status = query.state.data?.status
       return status === 'running' || status === 'pending' ? 3000 : false
@@ -528,7 +532,7 @@ export default function Logs() {
   }, [contextMenuLog])
 
   const retryLog = useCallback(
-    async (log: WorkflowLog | null) => {
+    async (log: WorkflowLogRow | null) => {
       const workflowId = log?.workflow?.id || log?.workflowId
       const logId = log?.id
       if (!workflowId || !logId) return

apps/sim/app/workspace/[workspaceId]/logs/utils.ts

@@ -2,9 +2,9 @@ import React from 'react'
 import { formatDuration } from '@sim/utils/formatting'
 import { format } from 'date-fns'
 import { Badge } from '@/components/emcn'
+import type { WorkflowLogDetail } from '@/lib/api/contracts/logs'
 import { getIntegrationMetadata } from '@/lib/logs/get-trigger-options'
 import { getBlock } from '@/blocks/registry'
-import type { WorkflowLog } from '@/stores/logs/filters/types'
 import { CORE_TRIGGER_TYPES } from '@/stores/logs/filters/types'
 
 export const LOG_COLUMNS = {
@@ -449,15 +449,15 @@ export const formatDate = (dateString: string) => {
  * Prefers the persisted `workflowInput` field (new logs), falls back to
  * reconstructing from `executionState.blockStates` (old logs).
  */
-export function extractRetryInput(log: WorkflowLog): unknown | undefined {
-  const execData = log.executionData as Record<string, unknown> | undefined
+export function extractRetryInput(log: WorkflowLogDetail): unknown | undefined {
+  const execData = log.executionData
   if (!execData) return undefined
 
   if (execData.workflowInput !== undefined) {
     return execData.workflowInput
   }
 
-  const executionState = execData.executionState as
+  const executionState = (execData as Record<string, unknown>).executionState as
     | {
         blockStates?: Record<
           string,

apps/sim/hooks/queries/logs.ts

@@ -24,7 +24,7 @@ import {
 } from '@/lib/api/contracts/logs'
 import { getEndDateFromTimeRange, getStartDateFromTimeRange } from '@/lib/logs/filters'
 import { parseQuery, queryToApiParams } from '@/lib/logs/query-parser'
-import type { TimeRange, WorkflowLog } from '@/stores/logs/filters/types'
+import type { TimeRange } from '@/stores/logs/filters/types'
 
 export type { DashboardStatsResponse, SegmentStats, WorkflowStats }
 
@@ -63,11 +63,6 @@ export interface LogFilters {
   sortOrder: LogSortOrder
 }
 
-// double-cast-allowed: bridge from contract type to legacy WorkflowLog used by stores/components
-const summaryToWorkflowLog = (log: WorkflowLogSummary): WorkflowLog => log as unknown as WorkflowLog
-// double-cast-allowed: bridge from contract type to legacy WorkflowLog used by stores/components
-const detailToWorkflowLog = (log: WorkflowLogDetail): WorkflowLog => log as unknown as WorkflowLog
-
 function applyFilterParams(
   params: URLSearchParams,
   filters: Omit<LogFilters, 'limit' | 'sortBy' | 'sortOrder'>
@@ -123,7 +118,7 @@ function buildListQuery(workspaceId: string, filters: LogFilters, cursor: string
 }
 
 interface LogsPage {
-  logs: WorkflowLog[]
+  logs: WorkflowLogSummary[]
   nextCursor: string | null
 }
 
@@ -139,7 +134,7 @@ async function fetchLogsPage(
   })
 
   return {
-    logs: apiData.data.map(summaryToWorkflowLog),
+    logs: apiData.data,
     nextCursor: apiData.nextCursor,
   }
 }
@@ -148,13 +143,13 @@ export async function fetchLogDetail(
   logId: string,
   workspaceId: string,
   signal?: AbortSignal
-): Promise<WorkflowLog> {
+): Promise<WorkflowLogDetail> {
   const { data } = await requestJson(getLogDetailContract, {
     params: { id: logId },
     query: { workspaceId },
     signal,
   })
-  return detailToWorkflowLog(data)
+  return data
 }
 
 interface UseLogsListOptions {
@@ -185,7 +180,7 @@ interface UseLogDetailOptions {
   refetchInterval?:
     | number
     | false
-    | ((query: { state: { data?: WorkflowLog } }) => number | false | undefined)
+    | ((query: { state: { data?: WorkflowLogDetail } }) => number | false | undefined)
 }
 
 export function useLogDetail(
@@ -220,9 +215,8 @@ export function useLogByExecutionId(
         query: { workspaceId: workspaceId as string },
         signal,
       })
-      const log = detailToWorkflowLog(data)
-      queryClient.setQueryData(logKeys.detail(log.id), log)
-      return log
+      queryClient.setQueryData(logKeys.detail(data.id), data)
+      return data
     },
     enabled: Boolean(workspaceId) && Boolean(executionId),
     staleTime: 30 * 1000,
@@ -339,11 +333,11 @@ export function useCancelExecution() {
         }
       })
 
-      let previousDetail: WorkflowLog | undefined
+      let previousDetail: WorkflowLogDetail | undefined
       if (affectedLogId) {
-        previousDetail = queryClient.getQueryData<WorkflowLog>(logKeys.detail(affectedLogId))
+        previousDetail = queryClient.getQueryData<WorkflowLogDetail>(logKeys.detail(affectedLogId))
         if (previousDetail) {
-          queryClient.setQueryData<WorkflowLog>(logKeys.detail(affectedLogId), {
+          queryClient.setQueryData<WorkflowLogDetail>(logKeys.detail(affectedLogId), {
             ...previousDetail,
             status: 'cancelling',
           })

apps/sim/lib/api/contracts/logs.ts

@@ -243,6 +243,13 @@ export const workflowLogDetailSchema = workflowLogSummarySchema.extend({
 export type WorkflowLogSummary = z.output<typeof workflowLogSummarySchema>
 export type WorkflowLogDetail = z.output<typeof workflowLogDetailSchema>
 
+/**
+ * A row that may be either a list-view summary or a fully loaded detail. Used by
+ * UI surfaces that render the same log before and after its detail query resolves.
+ */
+export type WorkflowLogRow = WorkflowLogSummary &
+  Partial<Pick<WorkflowLogDetail, 'executionData' | 'files'>>
+
 export const listLogsResponseSchema = z.object({
   data: z.array(workflowLogSummarySchema),
   nextCursor: z.string().nullable(),