improvement(execution-snapshot): enhance workflow preview in logs and deploy modal (#2742)

* added larger live deployment preview

* edited subblock UI

* removed comments

* removed carrot

* updated styling to match existing subblocks

* enriched workflow preview

* fix connetion in log preview

* cleanup

* ack PR comments

* more PR comments

* more

* cleanup

* use reactquery cache in deploy modal

* ack comments

* ack PR comment

---------

Co-authored-by: aadamgough <adam@sim.ai>

apps/sim/app/chat/[identifier]/chat.tsx

@@ -175,7 +175,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
       const distanceFromBottom = scrollHeight - scrollTop - clientHeight
       setShowScrollButton(distanceFromBottom > 100)
 
-      // Track if user is manually scrolling during streaming
       if (isStreamingResponse && !isUserScrollingRef.current) {
         setUserHasScrolled(true)
       }
@@ -191,13 +190,10 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     return () => container.removeEventListener('scroll', handleScroll)
   }, [handleScroll])
 
-  // Reset user scroll tracking when streaming starts
   useEffect(() => {
     if (isStreamingResponse) {
-      // Reset userHasScrolled when streaming starts
       setUserHasScrolled(false)
 
-      // Give a small delay to distinguish between programmatic scroll and user scroll
       isUserScrollingRef.current = true
       setTimeout(() => {
         isUserScrollingRef.current = false
@@ -215,7 +211,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
       })
 
       if (!response.ok) {
-        // Check if auth is required
         if (response.status === 401) {
           const errorData = await response.json()
 
@@ -236,7 +231,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
         throw new Error(`Failed to load chat configuration: ${response.status}`)
       }
 
-      // Reset auth required state when authentication is successful
       setAuthRequired(null)
 
       const data = await response.json()
@@ -260,7 +254,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     }
   }
 
-  // Fetch chat config on mount and generate new conversation ID
   useEffect(() => {
     fetchChatConfig()
     setConversationId(uuidv4())
@@ -285,7 +278,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     }, 800)
   }
 
-  // Handle sending a message
   const handleSendMessage = async (
     messageParam?: string,
     isVoiceInput = false,
@@ -308,7 +300,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
       filesCount: files?.length,
     })
 
-    // Reset userHasScrolled when sending a new message
     setUserHasScrolled(false)
 
     const userMessage: ChatMessage = {
@@ -325,24 +316,20 @@ export default function ChatClient({ identifier }: { identifier: string }) {
       })),
     }
 
-    // Add the user's message to the chat
     setMessages((prev) => [...prev, userMessage])
     setInputValue('')
     setIsLoading(true)
 
-    // Scroll to show only the user's message and loading indicator
     setTimeout(() => {
       scrollToMessage(userMessage.id, true)
     }, 100)
 
-    // Create abort controller for request cancellation
     const abortController = new AbortController()
     const timeoutId = setTimeout(() => {
       abortController.abort()
     }, CHAT_REQUEST_TIMEOUT_MS)
 
     try {
-      // Send structured payload to maintain chat context
       const payload: any = {
         input:
           typeof userMessage.content === 'string'
@@ -351,7 +338,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
         conversationId,
       }
 
-      // Add files if present (convert to base64 for JSON transmission)
       if (files && files.length > 0) {
         payload.files = await Promise.all(
           files.map(async (file) => ({
@@ -379,7 +365,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
         signal: abortController.signal,
       })
 
-      // Clear timeout since request succeeded
       clearTimeout(timeoutId)
 
       if (!response.ok) {
@@ -392,7 +377,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
         throw new Error('Response body is missing')
       }
 
-      // Use the streaming hook with audio support
       const shouldPlayAudio = isVoiceInput || isVoiceFirstMode
       const audioHandler = shouldPlayAudio
         ? createAudioStreamHandler(
@@ -421,7 +405,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
         }
       )
     } catch (error: any) {
-      // Clear timeout in case of error
       clearTimeout(timeoutId)
 
       if (error.name === 'AbortError') {
@@ -442,7 +425,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     }
   }
 
-  // Stop audio when component unmounts or when streaming is stopped
   useEffect(() => {
     return () => {
       stopAudio()
@@ -452,28 +434,23 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     }
   }, [stopAudio])
 
-  // Voice interruption - stop audio when user starts speaking
   const handleVoiceInterruption = useCallback(() => {
     stopAudio()
 
-    // Stop any ongoing streaming response
     if (isStreamingResponse) {
       stopStreaming(setMessages)
     }
   }, [isStreamingResponse, stopStreaming, setMessages, stopAudio])
 
-  // Handle voice mode activation
   const handleVoiceStart = useCallback(() => {
     setIsVoiceFirstMode(true)
   }, [])
 
-  // Handle exiting voice mode
   const handleExitVoiceMode = useCallback(() => {
     setIsVoiceFirstMode(false)
-    stopAudio() // Stop any playing audio when exiting
+    stopAudio()
   }, [stopAudio])
 
-  // Handle voice transcript from voice-first interface
   const handleVoiceTranscript = useCallback(
     (transcript: string) => {
       logger.info('Received voice transcript:', transcript)
@@ -482,14 +459,11 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     [handleSendMessage]
   )
 
-  // If error, show error message using the extracted component
   if (error) {
     return <ChatErrorState error={error} starCount={starCount} />
   }
 
-  // If authentication is required, use the extracted components
   if (authRequired) {
-    // Get title and description from the URL params or use defaults
     const title = new URLSearchParams(window.location.search).get('title') || 'chat'
     const primaryColor =
       new URLSearchParams(window.location.search).get('color') || 'var(--brand-primary-hover-hex)'
@@ -526,12 +500,10 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     }
   }
 
-  // Loading state while fetching config using the extracted component
   if (!chatConfig) {
     return <ChatLoadingState />
   }
 
-  // Voice-first mode interface
   if (isVoiceFirstMode) {
     return (
       <VoiceInterface
@@ -551,7 +523,6 @@ export default function ChatClient({ identifier }: { identifier: string }) {
     )
   }
 
-  // Standard text-based chat interface
   return (
     <div className='fixed inset-0 z-[100] flex flex-col bg-white text-foreground'>
       {/* Header component */}

apps/sim/app/templates/[id]/template.tsx

@@ -36,7 +36,7 @@ import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import type { CredentialRequirement } from '@/lib/workflows/credentials/credential-extractor'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import { useStarTemplate, useTemplate } from '@/hooks/queries/templates'
 

apps/sim/app/templates/components/template-card.tsx

@@ -4,7 +4,7 @@ import { Star, User } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { VerifiedBadge } from '@/components/ui/verified-badge'
 import { cn } from '@/lib/core/utils/cn'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import { useStarTemplate } from '@/hooks/queries/templates'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'

apps/sim/app/workspace/[workspaceId]/logs/components/index.ts

@@ -1,7 +1,7 @@
 export { Dashboard } from './dashboard'
 export { LogDetails } from './log-details'
+export { ExecutionSnapshot } from './log-details/components/execution-snapshot'
 export { FileCards } from './log-details/components/file-download'
-export { FrozenCanvas } from './log-details/components/frozen-canvas'
 export { TraceSpans } from './log-details/components/trace-spans'
 export { LogRowContextMenu } from './log-row-context-menu'
 export { LogsList } from './logs-list'

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

@@ -0,0 +1,224 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { AlertCircle, Loader2 } from 'lucide-react'
+import { Modal, ModalBody, ModalContent, ModalHeader } from '@/components/emcn'
+import { redactApiKeys } from '@/lib/core/security/redaction'
+import { cn } from '@/lib/core/utils/cn'
+import {
+  BlockDetailsSidebar,
+  WorkflowPreview,
+} from '@/app/workspace/[workspaceId]/w/components/preview'
+import { useExecutionSnapshot } from '@/hooks/queries/logs'
+import type { WorkflowState } from '@/stores/workflows/workflow/types'
+
+interface TraceSpan {
+  blockId?: string
+  input?: unknown
+  output?: unknown
+  status?: string
+  duration?: number
+  children?: TraceSpan[]
+}
+
+interface BlockExecutionData {
+  input: unknown
+  output: unknown
+  status: string
+  durationMs: number
+}
+
+interface MigratedWorkflowState extends WorkflowState {
+  _migrated: true
+  _note?: string
+}
+
+function isMigratedWorkflowState(state: WorkflowState): state is MigratedWorkflowState {
+  return (state as MigratedWorkflowState)._migrated === true
+}
+
+interface ExecutionSnapshotProps {
+  executionId: string
+  traceSpans?: TraceSpan[]
+  className?: string
+  height?: string | number
+  width?: string | number
+  isModal?: boolean
+  isOpen?: boolean
+  onClose?: () => void
+}
+
+export function ExecutionSnapshot({
+  executionId,
+  traceSpans,
+  className,
+  height = '100%',
+  width = '100%',
+  isModal = false,
+  isOpen = false,
+  onClose = () => {},
+}: ExecutionSnapshotProps) {
+  const { data, isLoading, error } = useExecutionSnapshot(executionId)
+  const [pinnedBlockId, setPinnedBlockId] = useState<string | null>(null)
+
+  const blockExecutions = useMemo(() => {
+    if (!traceSpans || !Array.isArray(traceSpans)) return {}
+
+    const blockExecutionMap: Record<string, BlockExecutionData> = {}
+
+    const collectBlockSpans = (spans: TraceSpan[]): TraceSpan[] => {
+      const blockSpans: TraceSpan[] = []
+
+      for (const span of spans) {
+        if (span.blockId) {
+          blockSpans.push(span)
+        }
+        if (span.children && Array.isArray(span.children)) {
+          blockSpans.push(...collectBlockSpans(span.children))
+        }
+      }
+
+      return blockSpans
+    }
+
+    const allBlockSpans = collectBlockSpans(traceSpans)
+
+    for (const span of allBlockSpans) {
+      if (span.blockId && !blockExecutionMap[span.blockId]) {
+        blockExecutionMap[span.blockId] = {
+          input: redactApiKeys(span.input || {}),
+          output: redactApiKeys(span.output || {}),
+          status: span.status || 'unknown',
+          durationMs: span.duration || 0,
+        }
+      }
+    }
+
+    return blockExecutionMap
+  }, [traceSpans])
+
+  useEffect(() => {
+    setPinnedBlockId(null)
+  }, [executionId])
+
+  const workflowState = data?.workflowState as WorkflowState | undefined
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div
+          className={cn('flex items-center justify-center', className)}
+          style={{ height, width }}
+        >
+          <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+            <Loader2 className='h-[16px] w-[16px] animate-spin' />
+            <span className='text-[13px]'>Loading execution snapshot...</span>
+          </div>
+        </div>
+      )
+    }
+
+    if (error) {
+      return (
+        <div
+          className={cn('flex items-center justify-center', className)}
+          style={{ height, width }}
+        >
+          <div className='flex items-center gap-[8px] text-[var(--text-error)]'>
+            <AlertCircle className='h-[16px] w-[16px]' />
+            <span className='text-[13px]'>Failed to load execution snapshot: {error.message}</span>
+          </div>
+        </div>
+      )
+    }
+
+    if (!data || !workflowState) {
+      return (
+        <div
+          className={cn('flex items-center justify-center', className)}
+          style={{ height, width }}
+        >
+          <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+            <Loader2 className='h-[16px] w-[16px] animate-spin' />
+            <span className='text-[13px]'>Loading execution snapshot...</span>
+          </div>
+        </div>
+      )
+    }
+
+    if (isMigratedWorkflowState(workflowState)) {
+      return (
+        <div
+          className={cn('flex flex-col items-center justify-center gap-[16px] p-[32px]', className)}
+          style={{ height, width }}
+        >
+          <div className='flex items-center gap-[12px] text-[var(--text-warning)]'>
+            <AlertCircle className='h-[20px] w-[20px]' />
+            <span className='font-medium text-[15px]'>Logged State Not Found</span>
+          </div>
+          <div className='max-w-md text-center text-[13px] text-[var(--text-secondary)]'>
+            This log was migrated from the old logging system. The workflow state at execution time
+            is not available.
+          </div>
+          <div className='text-[12px] text-[var(--text-tertiary)]'>Note: {workflowState._note}</div>
+        </div>
+      )
+    }
+
+    return (
+      <div
+        style={{ height, width }}
+        className={cn(
+          'flex overflow-hidden rounded-[4px] border border-[var(--border)]',
+          className
+        )}
+      >
+        <div className='h-full flex-1'>
+          <WorkflowPreview
+            workflowState={workflowState}
+            showSubBlocks={true}
+            isPannable={true}
+            defaultPosition={{ x: 0, y: 0 }}
+            defaultZoom={0.8}
+            onNodeClick={(blockId) => {
+              setPinnedBlockId((prev) => (prev === blockId ? null : blockId))
+            }}
+            cursorStyle='pointer'
+            executedBlocks={blockExecutions}
+          />
+        </div>
+        {pinnedBlockId && workflowState.blocks[pinnedBlockId] && (
+          <BlockDetailsSidebar
+            block={workflowState.blocks[pinnedBlockId]}
+            executionData={blockExecutions[pinnedBlockId]}
+            allBlockExecutions={blockExecutions}
+            workflowBlocks={workflowState.blocks}
+            isExecutionMode
+          />
+        )}
+      </div>
+    )
+  }
+
+  if (isModal) {
+    return (
+      <Modal
+        open={isOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setPinnedBlockId(null)
+            onClose()
+          }
+        }}
+      >
+        <ModalContent size='full' className='flex h-[90vh] flex-col'>
+          <ModalHeader>Workflow State</ModalHeader>
+
+          <ModalBody className='!p-0 min-h-0 flex-1'>{renderContent()}</ModalBody>
+        </ModalContent>
+      </Modal>
+    )
+  }
+
+  return renderContent()
+}

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/index.ts

@@ -0,0 +1 @@
+export { ExecutionSnapshot } from './execution-snapshot'

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

@@ -1,657 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { createLogger } from '@sim/logger'
-import {
-  AlertCircle,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  Clock,
-  DollarSign,
-  Hash,
-  Loader2,
-  Maximize2,
-  X,
-  Zap,
-} from 'lucide-react'
-import { Badge, Modal, ModalBody, ModalContent, ModalHeader } from '@/components/emcn'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { redactApiKeys } from '@/lib/core/security/redaction'
-import { cn } from '@/lib/core/utils/cn'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
-
-const logger = createLogger('FrozenCanvas')
-
-function ExpandableDataSection({ title, data }: { title: string; data: any }) {
-  const [isExpanded, setIsExpanded] = useState(false)
-  const [isModalOpen, setIsModalOpen] = useState(false)
-
-  const jsonString = JSON.stringify(data, null, 2)
-  const isLargeData = jsonString.length > 500 || jsonString.split('\n').length > 10
-
-  return (
-    <>
-      <div>
-        <div className='mb-[6px] flex items-center justify-between'>
-          <h4 className='font-medium text-[13px] text-[var(--text-primary)]'>{title}</h4>
-          <div className='flex items-center gap-[4px]'>
-            {isLargeData && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className='rounded-[4px] p-[4px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-3)] hover:text-[var(--text-primary)]'
-                title='Expand in modal'
-                type='button'
-              >
-                <Maximize2 className='h-[14px] w-[14px]' />
-              </button>
-            )}
-            <button
-              onClick={() => setIsExpanded(!isExpanded)}
-              className='rounded-[4px] p-[4px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-3)] hover:text-[var(--text-primary)]'
-              type='button'
-            >
-              {isExpanded ? (
-                <ChevronUp className='h-[14px] w-[14px]' />
-              ) : (
-                <ChevronDown className='h-[14px] w-[14px]' />
-              )}
-            </button>
-          </div>
-        </div>
-        <div
-          className={cn(
-            'overflow-y-auto rounded-[4px] border border-[var(--border)] bg-[var(--surface-3)] p-[12px] font-mono text-[12px] transition-all duration-200',
-            isExpanded ? 'max-h-96' : 'max-h-32'
-          )}
-        >
-          <pre className='whitespace-pre-wrap break-words text-[var(--text-primary)]'>
-            {jsonString}
-          </pre>
-        </div>
-      </div>
-
-      {isModalOpen && (
-        <div className='fixed inset-0 z-[200] flex items-center justify-center bg-black/50'>
-          <div className='mx-[16px] flex h-[80vh] w-full max-w-4xl flex-col overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] shadow-lg'>
-            <div className='flex items-center justify-between border-[var(--border)] border-b p-[16px]'>
-              <h3 className='font-medium text-[15px] text-[var(--text-primary)]'>{title}</h3>
-              <button
-                onClick={() => setIsModalOpen(false)}
-                className='rounded-[4px] p-[4px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-3)] hover:text-[var(--text-primary)]'
-                type='button'
-              >
-                <X className='h-[16px] w-[16px]' />
-              </button>
-            </div>
-            <div className='flex-1 overflow-auto p-[16px]'>
-              <pre className='whitespace-pre-wrap break-words font-mono text-[13px] text-[var(--text-primary)]'>
-                {jsonString}
-              </pre>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  )
-}
-
-function formatExecutionData(executionData: any) {
-  const {
-    inputData,
-    outputData,
-    cost,
-    tokens,
-    durationMs,
-    status,
-    blockName,
-    blockType,
-    errorMessage,
-    errorStackTrace,
-  } = executionData
-
-  return {
-    blockName: blockName || 'Unknown Block',
-    blockType: blockType || 'unknown',
-    status,
-    duration: durationMs ? `${durationMs}ms` : 'N/A',
-    input: redactApiKeys(inputData || {}),
-    output: redactApiKeys(outputData || {}),
-    errorMessage,
-    errorStackTrace,
-    cost: cost
-      ? {
-          input: cost.input || 0,
-          output: cost.output || 0,
-          total: cost.total || 0,
-        }
-      : null,
-    tokens: tokens
-      ? {
-          input: tokens.input || tokens.prompt || 0,
-          output: tokens.output || tokens.completion || 0,
-          total: tokens.total || 0,
-        }
-      : null,
-  }
-}
-
-function getCurrentIterationData(blockExecutionData: any) {
-  if (blockExecutionData.iterations && Array.isArray(blockExecutionData.iterations)) {
-    const currentIndex = blockExecutionData.currentIteration ?? 0
-    return {
-      executionData: blockExecutionData.iterations[currentIndex],
-      currentIteration: currentIndex,
-      totalIterations: blockExecutionData.totalIterations ?? blockExecutionData.iterations.length,
-      hasMultipleIterations: blockExecutionData.iterations.length > 1,
-    }
-  }
-
-  return {
-    executionData: blockExecutionData,
-    currentIteration: 0,
-    totalIterations: 1,
-    hasMultipleIterations: false,
-  }
-}
-
-function PinnedLogs({
-  executionData,
-  blockId,
-  workflowState,
-  onClose,
-}: {
-  executionData: any | null
-  blockId: string
-  workflowState: any
-  onClose: () => void
-}) {
-  const [currentIterationIndex, setCurrentIterationIndex] = useState(0)
-
-  useEffect(() => {
-    setCurrentIterationIndex(0)
-  }, [executionData])
-
-  if (!executionData) {
-    const blockInfo = workflowState?.blocks?.[blockId]
-    const formatted = {
-      blockName: blockInfo?.name || 'Unknown Block',
-      blockType: blockInfo?.type || 'unknown',
-      status: 'not_executed',
-    }
-
-    return (
-      <Card className='fixed top-[16px] right-[16px] z-[100] max-h-[calc(100vh-8rem)] w-96 overflow-y-auto rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] shadow-lg'>
-        <CardHeader className='pb-[12px]'>
-          <div className='flex items-center justify-between'>
-            <CardTitle className='flex items-center gap-[8px] text-[15px] text-[var(--text-primary)]'>
-              <Zap className='h-[16px] w-[16px]' />
-              {formatted.blockName}
-            </CardTitle>
-            <button
-              onClick={onClose}
-              className='rounded-[4px] p-[4px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-3)] hover:text-[var(--text-primary)]'
-              type='button'
-            >
-              <X className='h-[16px] w-[16px]' />
-            </button>
-          </div>
-          <div className='flex items-center gap-[8px]'>
-            <Badge variant='gray-secondary'>{formatted.blockType}</Badge>
-            <Badge variant='outline'>not executed</Badge>
-          </div>
-        </CardHeader>
-
-        <CardContent className='space-y-[16px]'>
-          <div className='rounded-[4px] border border-[var(--border)] bg-[var(--surface-3)] p-[16px] text-center'>
-            <div className='text-[13px] text-[var(--text-secondary)]'>
-              This block was not executed because the workflow failed before reaching it.
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  const iterationInfo = getCurrentIterationData({
-    ...executionData,
-    currentIteration: currentIterationIndex,
-  })
-
-  const formatted = formatExecutionData(iterationInfo.executionData)
-  const totalIterations = executionData.iterations?.length || 1
-
-  const goToPreviousIteration = () => {
-    if (currentIterationIndex > 0) {
-      setCurrentIterationIndex(currentIterationIndex - 1)
-    }
-  }
-
-  const goToNextIteration = () => {
-    if (currentIterationIndex < totalIterations - 1) {
-      setCurrentIterationIndex(currentIterationIndex + 1)
-    }
-  }
-
-  return (
-    <Card className='fixed top-[16px] right-[16px] z-[100] max-h-[calc(100vh-8rem)] w-96 overflow-y-auto rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] shadow-lg'>
-      <CardHeader className='pb-[12px]'>
-        <div className='flex items-center justify-between'>
-          <CardTitle className='flex items-center gap-[8px] text-[15px] text-[var(--text-primary)]'>
-            <Zap className='h-[16px] w-[16px]' />
-            {formatted.blockName}
-          </CardTitle>
-          <button
-            onClick={onClose}
-            className='rounded-[4px] p-[4px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-3)] hover:text-[var(--text-primary)]'
-            type='button'
-          >
-            <X className='h-[16px] w-[16px]' />
-          </button>
-        </div>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[8px]'>
-            <Badge variant={formatted.status === 'success' ? 'default' : 'red'}>
-              {formatted.blockType}
-            </Badge>
-            <Badge variant='outline'>{formatted.status}</Badge>
-          </div>
-
-          {iterationInfo.hasMultipleIterations && (
-            <div className='flex items-center gap-[4px]'>
-              <button
-                onClick={goToPreviousIteration}
-                disabled={currentIterationIndex === 0}
-                className='rounded-[4px] p-[4px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-3)] hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-50'
-                type='button'
-              >
-                <ChevronLeft className='h-[14px] w-[14px]' />
-              </button>
-              <span className='px-[8px] text-[12px] text-[var(--text-tertiary)]'>
-                {iterationInfo.totalIterations !== undefined
-                  ? `${currentIterationIndex + 1} / ${iterationInfo.totalIterations}`
-                  : `${currentIterationIndex + 1}`}
-              </span>
-              <button
-                onClick={goToNextIteration}
-                disabled={currentIterationIndex === totalIterations - 1}
-                className='rounded-[4px] p-[4px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-3)] hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-50'
-                type='button'
-              >
-                <ChevronRight className='h-[14px] w-[14px]' />
-              </button>
-            </div>
-          )}
-        </div>
-      </CardHeader>
-
-      <CardContent className='space-y-[16px]'>
-        <div className='grid grid-cols-2 gap-[12px]'>
-          <div className='flex items-center gap-[8px]'>
-            <Clock className='h-[14px] w-[14px] text-[var(--text-secondary)]' />
-            <span className='text-[13px] text-[var(--text-primary)]'>{formatted.duration}</span>
-          </div>
-
-          {formatted.cost && formatted.cost.total > 0 && (
-            <div className='flex items-center gap-[8px]'>
-              <DollarSign className='h-[14px] w-[14px] text-[var(--text-secondary)]' />
-              <span className='text-[13px] text-[var(--text-primary)]'>
-                ${formatted.cost.total.toFixed(5)}
-              </span>
-            </div>
-          )}
-
-          {formatted.tokens && formatted.tokens.total > 0 && (
-            <div className='flex items-center gap-[8px]'>
-              <Hash className='h-[14px] w-[14px] text-[var(--text-secondary)]' />
-              <span className='text-[13px] text-[var(--text-primary)]'>
-                {formatted.tokens.total} tokens
-              </span>
-            </div>
-          )}
-        </div>
-
-        <ExpandableDataSection title='Input' data={formatted.input} />
-
-        <ExpandableDataSection title='Output' data={formatted.output} />
-
-        {formatted.cost && formatted.cost.total > 0 && (
-          <div>
-            <h4 className='mb-[6px] font-medium text-[13px] text-[var(--text-primary)]'>
-              Cost Breakdown
-            </h4>
-            <div className='space-y-[4px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-3)] p-[12px] text-[13px]'>
-              <div className='flex justify-between text-[var(--text-primary)]'>
-                <span>Input:</span>
-                <span>${formatted.cost.input.toFixed(5)}</span>
-              </div>
-              <div className='flex justify-between text-[var(--text-primary)]'>
-                <span>Output:</span>
-                <span>${formatted.cost.output.toFixed(5)}</span>
-              </div>
-              <div className='flex justify-between border-[var(--border)] border-t pt-[4px] font-medium text-[var(--text-primary)]'>
-                <span>Total:</span>
-                <span>${formatted.cost.total.toFixed(5)}</span>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {formatted.tokens && formatted.tokens.total > 0 && (
-          <div>
-            <h4 className='mb-[6px] font-medium text-[13px] text-[var(--text-primary)]'>
-              Token Usage
-            </h4>
-            <div className='space-y-[4px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-3)] p-[12px] text-[13px]'>
-              <div className='flex justify-between text-[var(--text-primary)]'>
-                <span>Input:</span>
-                <span>{formatted.tokens.input}</span>
-              </div>
-              <div className='flex justify-between text-[var(--text-primary)]'>
-                <span>Output:</span>
-                <span>{formatted.tokens.output}</span>
-              </div>
-              <div className='flex justify-between border-[var(--border)] border-t pt-[4px] font-medium text-[var(--text-primary)]'>
-                <span>Total:</span>
-                <span>{formatted.tokens.total}</span>
-              </div>
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-interface FrozenCanvasData {
-  executionId: string
-  workflowId: string
-  workflowState: WorkflowState
-  executionMetadata: {
-    trigger: string
-    startedAt: string
-    endedAt?: string
-    totalDurationMs?: number
-
-    cost: {
-      total: number | null
-      input: number | null
-      output: number | null
-    }
-    totalTokens: number | null
-  }
-}
-
-interface FrozenCanvasProps {
-  executionId: string
-  traceSpans?: any[]
-  className?: string
-  height?: string | number
-  width?: string | number
-  isModal?: boolean
-  isOpen?: boolean
-  onClose?: () => void
-}
-
-export function FrozenCanvas({
-  executionId,
-  traceSpans,
-  className,
-  height = '100%',
-  width = '100%',
-  isModal = false,
-  isOpen = false,
-  onClose,
-}: FrozenCanvasProps) {
-  const [data, setData] = useState<FrozenCanvasData | null>(null)
-  const [blockExecutions, setBlockExecutions] = useState<Record<string, any>>({})
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  const [pinnedBlockId, setPinnedBlockId] = useState<string | null>(null)
-
-  // Process traceSpans to create blockExecutions map
-  useEffect(() => {
-    if (traceSpans && Array.isArray(traceSpans)) {
-      const blockExecutionMap: Record<string, any> = {}
-
-      logger.debug('Processing trace spans for frozen canvas:', { traceSpans })
-
-      // Recursively collect all spans with blockId from the trace spans tree
-      const collectBlockSpans = (spans: any[]): any[] => {
-        const blockSpans: any[] = []
-
-        for (const span of spans) {
-          // If this span has a blockId, it's a block execution
-          if (span.blockId) {
-            blockSpans.push(span)
-          }
-
-          // Recursively check children
-          if (span.children && Array.isArray(span.children)) {
-            blockSpans.push(...collectBlockSpans(span.children))
-          }
-        }
-
-        return blockSpans
-      }
-
-      const allBlockSpans = collectBlockSpans(traceSpans)
-      logger.debug('Collected all block spans:', allBlockSpans)
-
-      // Group spans by blockId
-      const traceSpansByBlockId = allBlockSpans.reduce((acc: any, span: any) => {
-        if (span.blockId) {
-          if (!acc[span.blockId]) {
-            acc[span.blockId] = []
-          }
-          acc[span.blockId].push(span)
-        }
-        return acc
-      }, {})
-
-      logger.debug('Grouped trace spans by blockId:', traceSpansByBlockId)
-
-      for (const [blockId, spans] of Object.entries(traceSpansByBlockId)) {
-        const spanArray = spans as any[]
-
-        const iterations = spanArray.map((span: any) => {
-          // Extract error information from span output if status is error
-          let errorMessage = null
-          let errorStackTrace = null
-
-          if (span.status === 'error' && span.output) {
-            // Error information can be in different formats in the output
-            if (typeof span.output === 'string') {
-              errorMessage = span.output
-            } else if (span.output.error) {
-              errorMessage = span.output.error
-              errorStackTrace = span.output.stackTrace || span.output.stack
-            } else if (span.output.message) {
-              errorMessage = span.output.message
-              errorStackTrace = span.output.stackTrace || span.output.stack
-            } else {
-              // Fallback: stringify the entire output for error cases
-              errorMessage = JSON.stringify(span.output)
-            }
-          }
-
-          return {
-            id: span.id,
-            blockId: span.blockId,
-            blockName: span.name,
-            blockType: span.type,
-            status: span.status,
-            startedAt: span.startTime,
-            endedAt: span.endTime,
-            durationMs: span.duration,
-            inputData: span.input,
-            outputData: span.output,
-            errorMessage,
-            errorStackTrace,
-            cost: span.cost || {
-              input: null,
-              output: null,
-              total: null,
-            },
-            tokens: span.tokens || {
-              input: null,
-              output: null,
-              total: null,
-            },
-            modelUsed: span.model || null,
-            metadata: {},
-          }
-        })
-
-        blockExecutionMap[blockId] = {
-          iterations,
-          currentIteration: 0,
-          totalIterations: iterations.length,
-        }
-      }
-
-      setBlockExecutions(blockExecutionMap)
-    }
-  }, [traceSpans])
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoading(true)
-        setError(null)
-
-        const response = await fetch(`/api/logs/execution/${executionId}`)
-        if (!response.ok) {
-          throw new Error(`Failed to fetch frozen canvas data: ${response.statusText}`)
-        }
-
-        const result = await response.json()
-        setData(result)
-        logger.debug(`Loaded frozen canvas data for execution: ${executionId}`)
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Unknown error'
-        logger.error('Failed to fetch frozen canvas data:', err)
-        setError(errorMessage)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchData()
-  }, [executionId])
-
-  const renderContent = () => {
-    if (loading) {
-      return (
-        <div
-          className={cn('flex items-center justify-center', className)}
-          style={{ height, width }}
-        >
-          <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
-            <Loader2 className='h-[16px] w-[16px] animate-spin' />
-            <span className='text-[13px]'>Loading frozen canvas...</span>
-          </div>
-        </div>
-      )
-    }
-
-    if (error) {
-      return (
-        <div
-          className={cn('flex items-center justify-center', className)}
-          style={{ height, width }}
-        >
-          <div className='flex items-center gap-[8px] text-[var(--text-error)]'>
-            <AlertCircle className='h-[16px] w-[16px]' />
-            <span className='text-[13px]'>Failed to load frozen canvas: {error}</span>
-          </div>
-        </div>
-      )
-    }
-
-    if (!data) {
-      return (
-        <div
-          className={cn('flex items-center justify-center', className)}
-          style={{ height, width }}
-        >
-          <div className='text-[13px] text-[var(--text-secondary)]'>No data available</div>
-        </div>
-      )
-    }
-
-    const isMigratedLog = (data.workflowState as any)?._migrated === true
-    if (isMigratedLog) {
-      return (
-        <div
-          className={cn('flex flex-col items-center justify-center gap-[16px] p-[32px]', className)}
-          style={{ height, width }}
-        >
-          <div className='flex items-center gap-[12px] text-[var(--text-warning)]'>
-            <AlertCircle className='h-[20px] w-[20px]' />
-            <span className='font-medium text-[15px]'>Logged State Not Found</span>
-          </div>
-          <div className='max-w-md text-center text-[13px] text-[var(--text-secondary)]'>
-            This log was migrated from the old logging system. The workflow state at execution time
-            is not available.
-          </div>
-          <div className='text-[12px] text-[var(--text-tertiary)]'>
-            Note: {(data.workflowState as any)?._note}
-          </div>
-        </div>
-      )
-    }
-
-    return (
-      <>
-        <div
-          style={{ height, width }}
-          className={cn('frozen-canvas-mode h-full w-full', className)}
-        >
-          <WorkflowPreview
-            workflowState={data.workflowState}
-            showSubBlocks={true}
-            isPannable={true}
-            defaultPosition={{ x: 0, y: 0 }}
-            defaultZoom={0.8}
-            onNodeClick={(blockId) => {
-              setPinnedBlockId(blockId)
-            }}
-          />
-        </div>
-
-        {pinnedBlockId && (
-          <PinnedLogs
-            executionData={blockExecutions[pinnedBlockId] || null}
-            blockId={pinnedBlockId}
-            workflowState={data.workflowState}
-            onClose={() => setPinnedBlockId(null)}
-          />
-        )}
-      </>
-    )
-  }
-
-  if (isModal) {
-    return (
-      <Modal open={isOpen} onOpenChange={onClose}>
-        <ModalContent size='xl' className='flex h-[90vh] flex-col'>
-          <ModalHeader>Workflow State</ModalHeader>
-
-          <ModalBody className='min-h-0 flex-1'>
-            <div className='flex h-full flex-col'>
-              <div className='min-h-0 flex-1 overflow-hidden rounded-[4px] border border-[var(--border)]'>
-                {renderContent()}
-              </div>
-            </div>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    )
-  }
-
-  return renderContent()
-}

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/frozen-canvas/index.ts

@@ -1 +0,0 @@
-export { FrozenCanvas } from './frozen-canvas'

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

@@ -5,7 +5,11 @@ import { ChevronUp, X } from 'lucide-react'
 import { Button, Eye } from '@/components/emcn'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
-import { FileCards, FrozenCanvas, TraceSpans } from '@/app/workspace/[workspaceId]/logs/components'
+import {
+  ExecutionSnapshot,
+  FileCards,
+  TraceSpans,
+} from '@/app/workspace/[workspaceId]/logs/components'
 import { useLogDetailsResize } from '@/app/workspace/[workspaceId]/logs/hooks'
 import {
   formatDate,
@@ -49,7 +53,7 @@ export const LogDetails = memo(function LogDetails({
   hasNext = false,
   hasPrev = false,
 }: LogDetailsProps) {
-  const [isFrozenCanvasOpen, setIsFrozenCanvasOpen] = useState(false)
+  const [isExecutionSnapshotOpen, setIsExecutionSnapshotOpen] = useState(false)
   const scrollAreaRef = useRef<HTMLDivElement>(null)
   const panelWidth = useLogDetailsUIStore((state) => state.panelWidth)
   const { handleMouseDown } = useLogDetailsResize()
@@ -266,7 +270,7 @@ export const LogDetails = memo(function LogDetails({
                       Workflow State
                     </span>
                     <button
-                      onClick={() => setIsFrozenCanvasOpen(true)}
+                      onClick={() => setIsExecutionSnapshotOpen(true)}
                       className='flex items-center justify-between rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px] transition-colors hover:bg-[var(--surface-4)]'
                     >
                       <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
@@ -363,12 +367,12 @@ export const LogDetails = memo(function LogDetails({
 
         {/* Frozen Canvas Modal */}
         {log?.executionId && (
-          <FrozenCanvas
+          <ExecutionSnapshot
             executionId={log.executionId}
             traceSpans={log.executionData?.traceSpans}
             isModal
-            isOpen={isFrozenCanvasOpen}
-            onClose={() => setIsFrozenCanvasOpen(false)}
+            isOpen={isExecutionSnapshotOpen}
+            onClose={() => setIsExecutionSnapshotOpen(false)}
           />
         )}
       </div>

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

@@ -18,6 +18,7 @@ interface LogRowContextMenuProps {
   log: WorkflowLog | null
   onCopyExecutionId: () => void
   onOpenWorkflow: () => void
+  onOpenPreview: () => void
   onToggleWorkflowFilter: () => void
   onClearAllFilters: () => void
   isFilteredByThisWorkflow: boolean
@@ -36,6 +37,7 @@ export function LogRowContextMenu({
   log,
   onCopyExecutionId,
   onOpenWorkflow,
+  onOpenPreview,
   onToggleWorkflowFilter,
   onClearAllFilters,
   isFilteredByThisWorkflow,
@@ -78,6 +80,15 @@ export function LogRowContextMenu({
         >
           Open Workflow
         </PopoverItem>
+        <PopoverItem
+          disabled={!hasExecutionId}
+          onClick={() => {
+            onOpenPreview()
+            onClose()
+          }}
+        >
+          Open Preview
+        </PopoverItem>
 
         {/* Filter actions */}
         <PopoverDivider />

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

@@ -18,6 +18,7 @@ import type { WorkflowLog } from '@/stores/logs/filters/types'
 import { useUserPermissionsContext } from '../providers/workspace-permissions-provider'
 import {
   Dashboard,
+  ExecutionSnapshot,
   LogDetails,
   LogRowContextMenu,
   LogsList,
@@ -59,8 +60,7 @@ export default function Logs() {
     setWorkspaceId(workspaceId)
   }, [workspaceId, setWorkspaceId])
 
-  const [selectedLog, setSelectedLog] = useState<WorkflowLog | null>(null)
-  const [selectedLogIndex, setSelectedLogIndex] = useState<number>(-1)
+  const [selectedLogId, setSelectedLogId] = useState<string | null>(null)
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
   const selectedRowRef = useRef<HTMLTableRowElement | null>(null)
   const loaderRef = useRef<HTMLDivElement>(null)
@@ -90,6 +90,12 @@ export default function Logs() {
   const [contextMenuLog, setContextMenuLog] = useState<WorkflowLog | null>(null)
   const contextMenuRef = useRef<HTMLDivElement>(null)
 
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false)
+  const [previewLogId, setPreviewLogId] = useState<string | null>(null)
+
+  const activeLogId = isPreviewOpen ? previewLogId : selectedLogId
+  const activeLogQuery = useLogDetail(activeLogId ?? undefined)
+
   const logFilters = useMemo(
     () => ({
       timeRange,
@@ -129,19 +135,23 @@ export default function Logs() {
     refetchInterval: isLive ? 5000 : false,
   })
 
-  const logDetailQuery = useLogDetail(selectedLog?.id)
-
-  const mergedSelectedLog = useMemo(() => {
-    if (!selectedLog) return null
-    if (!logDetailQuery.data) return selectedLog
-    return { ...selectedLog, ...logDetailQuery.data }
-  }, [selectedLog, logDetailQuery.data])
-
   const logs = useMemo(() => {
     if (!logsQuery.data?.pages) return []
     return logsQuery.data.pages.flatMap((page) => page.logs)
   }, [logsQuery.data?.pages])
 
+  const selectedLogIndex = useMemo(
+    () => (selectedLogId ? logs.findIndex((l) => l.id === selectedLogId) : -1),
+    [logs, selectedLogId]
+  )
+  const selectedLogFromList = selectedLogIndex >= 0 ? logs[selectedLogIndex] : null
+
+  const selectedLog = useMemo(() => {
+    if (!selectedLogFromList) return null
+    if (!activeLogQuery.data || isPreviewOpen) return selectedLogFromList
+    return { ...selectedLogFromList, ...activeLogQuery.data }
+  }, [selectedLogFromList, activeLogQuery.data, isPreviewOpen])
+
   useFolders(workspaceId)
 
   useEffect(() => {
@@ -150,89 +160,40 @@ export default function Logs() {
     }
   }, [debouncedSearchQuery, setStoreSearchQuery])
 
-  const prevSelectedLogRef = useRef<WorkflowLog | null>(null)
-
   useEffect(() => {
-    if (!selectedLog?.id || logs.length === 0) return
-
-    const updatedLog = logs.find((l) => l.id === selectedLog.id)
-    if (!updatedLog) return
-
-    const prevLog = prevSelectedLogRef.current
-
-    const hasStatusChange =
-      prevLog?.id === updatedLog.id &&
-      (updatedLog.duration !== prevLog.duration || updatedLog.status !== prevLog.status)
-
-    if (updatedLog !== selectedLog) {
-      setSelectedLog(updatedLog)
-      prevSelectedLogRef.current = updatedLog
-    }
-
-    const newIndex = logs.findIndex((l) => l.id === selectedLog.id)
-    if (newIndex !== selectedLogIndex) {
-      setSelectedLogIndex(newIndex)
-    }
-
-    if (hasStatusChange) {
-      logDetailQuery.refetch()
-    }
-  }, [logs, selectedLog?.id, selectedLogIndex, logDetailQuery])
-
-  useEffect(() => {
-    if (!isLive || !selectedLog?.id) return
-
-    const interval = setInterval(() => {
-      logDetailQuery.refetch()
-    }, 5000)
-
+    if (!isLive || !selectedLogId) return
+    const interval = setInterval(() => activeLogQuery.refetch(), 5000)
     return () => clearInterval(interval)
-  }, [isLive, selectedLog?.id, logDetailQuery])
+  }, [isLive, selectedLogId, activeLogQuery])
 
   const handleLogClick = useCallback(
     (log: WorkflowLog) => {
-      if (selectedLog?.id === log.id && isSidebarOpen) {
+      if (selectedLogId === log.id && isSidebarOpen) {
         setIsSidebarOpen(false)
-        setSelectedLog(null)
-        setSelectedLogIndex(-1)
-        prevSelectedLogRef.current = null
+        setSelectedLogId(null)
         return
       }
-
-      setSelectedLog(log)
-      prevSelectedLogRef.current = log
-      const index = logs.findIndex((l) => l.id === log.id)
-      setSelectedLogIndex(index)
+      setSelectedLogId(log.id)
       setIsSidebarOpen(true)
     },
-    [selectedLog?.id, isSidebarOpen, logs]
+    [selectedLogId, isSidebarOpen]
   )
 
   const handleNavigateNext = useCallback(() => {
     if (selectedLogIndex < logs.length - 1) {
-      const nextIndex = selectedLogIndex + 1
-      setSelectedLogIndex(nextIndex)
-      const nextLog = logs[nextIndex]
-      setSelectedLog(nextLog)
-      prevSelectedLogRef.current = nextLog
+      setSelectedLogId(logs[selectedLogIndex + 1].id)
     }
   }, [selectedLogIndex, logs])
 
   const handleNavigatePrev = useCallback(() => {
     if (selectedLogIndex > 0) {
-      const prevIndex = selectedLogIndex - 1
-      setSelectedLogIndex(prevIndex)
-      const prevLog = logs[prevIndex]
-      setSelectedLog(prevLog)
-      prevSelectedLogRef.current = prevLog
+      setSelectedLogId(logs[selectedLogIndex - 1].id)
     }
   }, [selectedLogIndex, logs])
 
   const handleCloseSidebar = useCallback(() => {
     setIsSidebarOpen(false)
-    setSelectedLog(null)
-    setSelectedLogIndex(-1)
-    prevSelectedLogRef.current = null
+    setSelectedLogId(null)
   }, [])
 
   const handleLogContextMenu = useCallback((e: React.MouseEvent, log: WorkflowLog) => {
@@ -271,6 +232,13 @@ export default function Logs() {
     setSearchQuery('')
   }, [resetFilters, setSearchQuery])
 
+  const handleOpenPreview = useCallback(() => {
+    if (contextMenuLog?.id) {
+      setPreviewLogId(contextMenuLog.id)
+      setIsPreviewOpen(true)
+    }
+  }, [contextMenuLog])
+
   const contextMenuWorkflowId = contextMenuLog?.workflow?.id || contextMenuLog?.workflowId
   const isFilteredByThisWorkflow = Boolean(
     contextMenuWorkflowId && workflowIds.length === 1 && workflowIds[0] === contextMenuWorkflowId
@@ -298,10 +266,10 @@ export default function Logs() {
     setIsVisuallyRefreshing(true)
     setTimeout(() => setIsVisuallyRefreshing(false), REFRESH_SPINNER_DURATION_MS)
     logsQuery.refetch()
-    if (selectedLog?.id) {
-      logDetailQuery.refetch()
+    if (selectedLogId) {
+      activeLogQuery.refetch()
     }
-  }, [logsQuery, logDetailQuery, selectedLog?.id])
+  }, [logsQuery, activeLogQuery, selectedLogId])
 
   const handleToggleLive = useCallback(() => {
     const newIsLive = !isLive
@@ -393,9 +361,7 @@ export default function Logs() {
 
       if (selectedLogIndex === -1 && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
         e.preventDefault()
-        setSelectedLogIndex(0)
-        setSelectedLog(logs[0])
-        prevSelectedLogRef.current = logs[0]
+        setSelectedLogId(logs[0].id)
         return
       }
 
@@ -409,7 +375,7 @@ export default function Logs() {
         handleNavigateNext()
       }
 
-      if (e.key === 'Enter' && selectedLog) {
+      if (e.key === 'Enter' && selectedLogId) {
         e.preventDefault()
         setIsSidebarOpen(!isSidebarOpen)
       }
@@ -417,7 +383,7 @@ export default function Logs() {
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [logs, selectedLogIndex, isSidebarOpen, selectedLog, handleNavigateNext, handleNavigatePrev])
+  }, [logs, selectedLogIndex, isSidebarOpen, selectedLogId, handleNavigateNext, handleNavigatePrev])
 
   const isDashboardView = viewMode === 'dashboard'
 
@@ -509,7 +475,7 @@ export default function Logs() {
                 ) : (
                   <LogsList
                     logs={logs}
-                    selectedLogId={selectedLog?.id ?? null}
+                    selectedLogId={selectedLogId}
                     onLogClick={handleLogClick}
                     onLogContextMenu={handleLogContextMenu}
                     selectedRowRef={selectedRowRef}
@@ -524,7 +490,7 @@ export default function Logs() {
 
             {/* Log Details - rendered inside table container */}
             <LogDetails
-              log={mergedSelectedLog}
+              log={selectedLog}
               isOpen={isSidebarOpen}
               onClose={handleCloseSidebar}
               onNavigateNext={handleNavigateNext}
@@ -550,11 +516,25 @@ export default function Logs() {
         log={contextMenuLog}
         onCopyExecutionId={handleCopyExecutionId}
         onOpenWorkflow={handleOpenWorkflow}
+        onOpenPreview={handleOpenPreview}
         onToggleWorkflowFilter={handleToggleWorkflowFilter}
         onClearAllFilters={handleClearAllFilters}
         isFilteredByThisWorkflow={isFilteredByThisWorkflow}
         hasActiveFilters={filtersActive}
       />
+
+      {isPreviewOpen && activeLogQuery.data?.executionId && (
+        <ExecutionSnapshot
+          executionId={activeLogQuery.data.executionId}
+          traceSpans={activeLogQuery.data.executionData?.traceSpans}
+          isModal
+          isOpen={isPreviewOpen}
+          onClose={() => {
+            setIsPreviewOpen(false)
+            setPreviewLogId(null)
+          }}
+        />
+      )}
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx

@@ -1,16 +1,13 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
 import { Star, User } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { VerifiedBadge } from '@/components/ui/verified-badge'
 import { cn } from '@/lib/core/utils/cn'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import { useStarTemplate } from '@/hooks/queries/templates'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
-const logger = createLogger('TemplateCard')
-
 interface TemplateCardProps {
   id: string
   title: string

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx

@@ -3,8 +3,8 @@
 import { memo, useMemo } from 'react'
 import { useViewport } from 'reactflow'
 import { useSession } from '@/lib/auth/auth-client'
+import { getUserColor } from '@/lib/workspaces/colors'
 import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
-import { getUserColor } from '@/app/workspace/[workspaceId]/w/utils/get-user-color'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 
 interface CursorPoint {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { Maximize2 } from 'lucide-react'
 import {
   Button,
   Label,
@@ -10,10 +11,15 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  Tooltip,
 } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import {
+  BlockDetailsSidebar,
+  WorkflowPreview,
+} from '@/app/workspace/[workspaceId]/w/components/preview'
+import { useDeploymentVersionState, useRevertToVersion } from '@/hooks/queries/workflows'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 import { Versions } from './components'
 
@@ -49,48 +55,26 @@ export function GeneralDeploy({
   const [previewMode, setPreviewMode] = useState<PreviewMode>('active')
   const [showLoadDialog, setShowLoadDialog] = useState(false)
   const [showPromoteDialog, setShowPromoteDialog] = useState(false)
+  const [showExpandedPreview, setShowExpandedPreview] = useState(false)
+  const [expandedSelectedBlockId, setExpandedSelectedBlockId] = useState<string | null>(null)
   const [versionToLoad, setVersionToLoad] = useState<number | null>(null)
   const [versionToPromote, setVersionToPromote] = useState<number | null>(null)
 
-  const versionCacheRef = useRef<Map<number, WorkflowState>>(new Map())
-  const [, forceUpdate] = useState({})
-
   const selectedVersionInfo = versions.find((v) => v.version === selectedVersion)
   const versionToPromoteInfo = versions.find((v) => v.version === versionToPromote)
   const versionToLoadInfo = versions.find((v) => v.version === versionToLoad)
 
-  const cachedSelectedState =
-    selectedVersion !== null ? versionCacheRef.current.get(selectedVersion) : null
+  const { data: selectedVersionState } = useDeploymentVersionState(workflowId, selectedVersion)
 
-  const fetchSelectedVersionState = useCallback(
-    async (version: number) => {
-      if (!workflowId) return
-      if (versionCacheRef.current.has(version)) return
-
-      try {
-        const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`)
-        if (res.ok) {
-          const data = await res.json()
-          if (data.deployedState) {
-            versionCacheRef.current.set(version, data.deployedState)
-            forceUpdate({})
-          }
-        }
-      } catch (error) {
-        logger.error('Error fetching version state:', error)
-      }
-    },
-    [workflowId]
-  )
+  const revertMutation = useRevertToVersion()
 
   useEffect(() => {
     if (selectedVersion !== null) {
-      fetchSelectedVersionState(selectedVersion)
       setPreviewMode('selected')
     } else {
       setPreviewMode('active')
     }
-  }, [selectedVersion, fetchSelectedVersionState])
+  }, [selectedVersion])
 
   const handleSelectVersion = useCallback((version: number | null) => {
     setSelectedVersion(version)
@@ -109,20 +93,12 @@ export function GeneralDeploy({
   const confirmLoadDeployment = async () => {
     if (!workflowId || versionToLoad === null) return
 
-    // Close modal immediately for snappy UX
     setShowLoadDialog(false)
     const version = versionToLoad
     setVersionToLoad(null)
 
     try {
-      const response = await fetch(`/api/workflows/${workflowId}/deployments/${version}/revert`, {
-        method: 'POST',
-      })
-
-      if (!response.ok) {
-        throw new Error('Failed to load deployment')
-      }
-
+      await revertMutation.mutateAsync({ workflowId, version })
       onLoadDeploymentComplete()
     } catch (error) {
       logger.error('Failed to load deployment:', error)
@@ -132,7 +108,6 @@ export function GeneralDeploy({
   const confirmPromoteToLive = async () => {
     if (versionToPromote === null) return
 
-    // Close modal immediately for snappy UX
     setShowPromoteDialog(false)
     const version = versionToPromote
     setVersionToPromote(null)
@@ -145,15 +120,14 @@ export function GeneralDeploy({
   }
 
   const workflowToShow = useMemo(() => {
-    if (previewMode === 'selected' && cachedSelectedState) {
-      return cachedSelectedState
+    if (previewMode === 'selected' && selectedVersionState) {
+      return selectedVersionState
     }
     return deployedState
-  }, [previewMode, cachedSelectedState, deployedState])
+  }, [previewMode, selectedVersionState, deployedState])
 
   const showToggle = selectedVersion !== null && deployedState
 
-  // Only show skeleton on initial load when we have no deployed data
   const hasDeployedData = deployedState && Object.keys(deployedState.blocks || {}).length > 0
   const showLoadingSkeleton = isLoadingDeployedState && !hasDeployedData
 
@@ -219,15 +193,31 @@ export function GeneralDeploy({
             }}
           >
             {workflowToShow ? (
-              <WorkflowPreview
-                workflowState={workflowToShow}
-                showSubBlocks={true}
-                height='100%'
-                width='100%'
-                isPannable={true}
-                defaultPosition={{ x: 0, y: 0 }}
-                defaultZoom={0.6}
-              />
+              <>
+                <WorkflowPreview
+                  workflowState={workflowToShow}
+                  showSubBlocks={true}
+                  height='100%'
+                  width='100%'
+                  isPannable={true}
+                  defaultPosition={{ x: 0, y: 0 }}
+                  defaultZoom={0.6}
+                />
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button
+                      type='button'
+                      variant='default'
+                      size='sm'
+                      onClick={() => setShowExpandedPreview(true)}
+                      className='absolute top-[8px] right-[8px] z-10'
+                    >
+                      <Maximize2 className='h-[14px] w-[14px]' />
+                    </Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='bottom'>Expand preview</Tooltip.Content>
+                </Tooltip.Root>
+              </>
             ) : (
               <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
                 Deploy your workflow to see a preview
@@ -304,6 +294,51 @@ export function GeneralDeploy({
           </ModalFooter>
         </ModalContent>
       </Modal>
+
+      {workflowToShow && (
+        <Modal
+          open={showExpandedPreview}
+          onOpenChange={(open) => {
+            if (!open) {
+              setExpandedSelectedBlockId(null)
+            }
+            setShowExpandedPreview(open)
+          }}
+        >
+          <ModalContent size='full' className='flex h-[90vh] flex-col'>
+            <ModalHeader>
+              {previewMode === 'selected' && selectedVersionInfo
+                ? selectedVersionInfo.name || `v${selectedVersion}`
+                : 'Live Workflow'}
+            </ModalHeader>
+            <ModalBody className='!p-0 min-h-0 flex-1'>
+              <div className='flex h-full w-full overflow-hidden'>
+                <div className='h-full flex-1'>
+                  <WorkflowPreview
+                    workflowState={workflowToShow}
+                    showSubBlocks={true}
+                    isPannable={true}
+                    defaultPosition={{ x: 0, y: 0 }}
+                    defaultZoom={0.6}
+                    onNodeClick={(blockId) => {
+                      setExpandedSelectedBlockId(
+                        expandedSelectedBlockId === blockId ? null : blockId
+                      )
+                    }}
+                    cursorStyle='pointer'
+                  />
+                </div>
+                {expandedSelectedBlockId && workflowToShow.blocks?.[expandedSelectedBlockId] && (
+                  <BlockDetailsSidebar
+                    block={workflowToShow.blocks[expandedSelectedBlockId]}
+                    onClose={() => setExpandedSelectedBlockId(null)}
+                  />
+                )}
+              </div>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      )}
     </>
   )
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx

@@ -18,7 +18,7 @@ import { Skeleton, TagInput } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import { captureAndUploadOGImage, OG_IMAGE_HEIGHT, OG_IMAGE_WIDTH } from '@/lib/og'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import {
   useCreateTemplate,
   useDeleteTemplate,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx

@@ -332,7 +332,10 @@ export function LongInput({
               />
               <div
                 ref={overlayRef}
-                className='pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-[8px] py-[8px] font-medium font-sans text-sm'
+                className={cn(
+                  'pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-[8px] py-[8px] font-medium font-sans text-sm',
+                  (isPreview || disabled) && 'opacity-50'
+                )}
                 style={{
                   fontFamily: 'inherit',
                   lineHeight: 'inherit',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx

@@ -374,7 +374,8 @@ export function ShortInput({
                   ref={overlayRef}
                   className={cn(
                     'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-                    showCopyButton ? 'pr-14' : 'pr-3'
+                    showCopyButton ? 'pr-14' : 'pr-3',
+                    (isPreview || disabled) && 'opacity-50'
                   )}
                 >
                   <div className='min-w-fit whitespace-pre'>{formattedText}</div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slider-input/slider-input.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 import { Slider } from '@/components/emcn/components/slider/slider'
+import { cn } from '@/lib/core/utils/cn'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 
 interface SliderInputProps {
@@ -58,15 +59,17 @@ export function SliderInput({
 
   const percentage = ((normalizedValue - min) / (max - min)) * 100
 
+  const isDisabled = isPreview || disabled
+
   return (
-    <div className='relative pt-2 pb-[22px]'>
+    <div className={cn('relative pt-2 pb-[22px]', isDisabled && 'opacity-50')}>
       <Slider
         value={[normalizedValue]}
         min={min}
         max={max}
         step={integer ? 1 : step}
         onValueChange={handleValueChange}
-        disabled={isPreview || disabled}
+        disabled={isDisabled}
       />
       <div
         className='absolute top-6 text-muted-foreground text-sm'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -949,7 +949,9 @@ export const WorkflowBlock = memo(function WorkflowBlock({
           </div>
         )}
 
-        <ActionBar blockId={id} blockType={type} disabled={!userPermissions.canEdit} />
+        {!data.isPreview && (
+          <ActionBar blockId={id} blockType={type} disabled={!userPermissions.canEdit} />
+        )}
 
         {shouldShowDefaultHandles && <Connections blockId={id} />}
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx

@@ -55,9 +55,11 @@ const WorkflowEdgeComponent = ({
 
   const dataSourceHandle = (data as { sourceHandle?: string } | undefined)?.sourceHandle
   const isErrorEdge = (sourceHandle ?? dataSourceHandle) === 'error'
-  const edgeRunStatus = lastRunEdges.get(id)
+  const previewExecutionStatus = (
+    data as { executionStatus?: 'success' | 'error' | 'not-executed' } | undefined
+  )?.executionStatus
+  const edgeRunStatus = previewExecutionStatus || lastRunEdges.get(id)
 
-  // Memoize diff status calculation to avoid recomputing on every render
   const edgeDiffStatus = useMemo((): EdgeDiffStatus => {
     if (data?.isDeleted) return 'deleted'
     if (!diffAnalysis?.edge_diff || !isDiffReady) return null
@@ -84,21 +86,39 @@ const WorkflowEdgeComponent = ({
     targetHandle,
   ])
 
-  // Memoize edge style to prevent object recreation
   const edgeStyle = useMemo(() => {
     let color = 'var(--workflow-edge)'
-    if (edgeDiffStatus === 'deleted') color = 'var(--text-error)'
-    else if (isErrorEdge) color = 'var(--text-error)'
-    else if (edgeDiffStatus === 'new') color = 'var(--brand-tertiary)'
-    else if (edgeRunStatus === 'success') color = 'var(--border-success)'
-    else if (edgeRunStatus === 'error') color = 'var(--text-error)'
+    let opacity = 1
+
+    if (edgeDiffStatus === 'deleted') {
+      color = 'var(--text-error)'
+      opacity = 0.7
+    } else if (isErrorEdge) {
+      color = 'var(--text-error)'
+    } else if (edgeDiffStatus === 'new') {
+      color = 'var(--brand-tertiary)'
+    } else if (edgeRunStatus === 'success') {
+      color = 'var(--border-success)'
+    } else if (edgeRunStatus === 'error') {
+      color = 'var(--text-error)'
+    }
+
+    if (isSelected) {
+      opacity = 0.5
+    }
 
     return {
       ...(style ?? {}),
-      strokeWidth: edgeDiffStatus ? 3 : isSelected ? 2.5 : 2,
+      strokeWidth: edgeDiffStatus
+        ? 3
+        : edgeRunStatus === 'success' || edgeRunStatus === 'error'
+          ? 2.5
+          : isSelected
+            ? 2.5
+            : 2,
       stroke: color,
       strokeDasharray: edgeDiffStatus === 'deleted' ? '10,5' : undefined,
-      opacity: edgeDiffStatus === 'deleted' ? 0.7 : isSelected ? 0.5 : 1,
+      opacity,
     }
   }, [style, edgeDiffStatus, isSelected, isErrorEdge, edgeRunStatus])
 
@@ -137,7 +157,6 @@ const WorkflowEdgeComponent = ({
               e.stopPropagation()
 
               if (data?.onDelete) {
-                // Pass this specific edge's ID to the delete function
                 data.onDelete(id)
               }
             }}

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx

@@ -0,0 +1,680 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { ChevronDown as ChevronDownIcon, X } from 'lucide-react'
+import { ReactFlowProvider } from 'reactflow'
+import { Badge, Button, ChevronDown, Code } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
+import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components'
+import { getBlock } from '@/blocks'
+import type { BlockConfig, BlockIcon, SubBlockConfig } from '@/blocks/types'
+import { normalizeName } from '@/executor/constants'
+import { navigatePath } from '@/executor/variables/resolvers/reference'
+import type { BlockState } from '@/stores/workflows/workflow/types'
+
+/**
+ * Evaluate whether a subblock's condition is met based on current values.
+ */
+function evaluateCondition(
+  condition: SubBlockConfig['condition'],
+  subBlockValues: Record<string, { value: unknown } | unknown>
+): boolean {
+  if (!condition) return true
+
+  const actualCondition = typeof condition === 'function' ? condition() : condition
+
+  const fieldValueObj = subBlockValues[actualCondition.field]
+  const fieldValue =
+    fieldValueObj && typeof fieldValueObj === 'object' && 'value' in fieldValueObj
+      ? (fieldValueObj as { value: unknown }).value
+      : fieldValueObj
+
+  const conditionValues = Array.isArray(actualCondition.value)
+    ? actualCondition.value
+    : [actualCondition.value]
+
+  let isMatch = conditionValues.some((v) => v === fieldValue)
+
+  if (actualCondition.not) {
+    isMatch = !isMatch
+  }
+
+  if (actualCondition.and && isMatch) {
+    const andFieldValueObj = subBlockValues[actualCondition.and.field]
+    const andFieldValue =
+      andFieldValueObj && typeof andFieldValueObj === 'object' && 'value' in andFieldValueObj
+        ? (andFieldValueObj as { value: unknown }).value
+        : andFieldValueObj
+
+    const andConditionValues = Array.isArray(actualCondition.and.value)
+      ? actualCondition.and.value
+      : [actualCondition.and.value]
+
+    let andMatch = andConditionValues.some((v) => v === andFieldValue)
+
+    if (actualCondition.and.not) {
+      andMatch = !andMatch
+    }
+
+    isMatch = isMatch && andMatch
+  }
+
+  return isMatch
+}
+
+/**
+ * Format a value for display as JSON string
+ */
+function formatValueAsJson(value: unknown): string {
+  if (value === null || value === undefined || value === '') {
+    return '—'
+  }
+  if (typeof value === 'object') {
+    try {
+      return JSON.stringify(value, null, 2)
+    } catch {
+      return String(value)
+    }
+  }
+  return String(value)
+}
+
+interface ResolvedConnection {
+  blockId: string
+  blockName: string
+  blockType: string
+  fields: Array<{ path: string; value: string; tag: string }>
+}
+
+/**
+ * Extract all variable references from nested subblock values
+ */
+function extractAllReferencesFromSubBlocks(subBlockValues: Record<string, unknown>): string[] {
+  const refs = new Set<string>()
+
+  const processValue = (value: unknown) => {
+    if (typeof value === 'string') {
+      const extracted = extractReferencePrefixes(value)
+      extracted.forEach((ref) => refs.add(ref.raw))
+    } else if (Array.isArray(value)) {
+      value.forEach(processValue)
+    } else if (value && typeof value === 'object') {
+      if ('value' in value) {
+        processValue((value as { value: unknown }).value)
+      } else {
+        Object.values(value).forEach(processValue)
+      }
+    }
+  }
+
+  Object.values(subBlockValues).forEach(processValue)
+  return Array.from(refs)
+}
+
+/**
+ * Format a value for inline display (single line, truncated)
+ */
+function formatInlineValue(value: unknown): string {
+  if (value === null || value === undefined) return 'null'
+  if (typeof value === 'string') return value
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+  if (typeof value === 'object') {
+    try {
+      return JSON.stringify(value)
+    } catch {
+      return String(value)
+    }
+  }
+  return String(value)
+}
+
+interface ExecutionDataSectionProps {
+  title: string
+  data: unknown
+  isError?: boolean
+}
+
+/**
+ * Collapsible section for execution data (input/output)
+ * Uses Code.Viewer for proper syntax highlighting matching the logs UI
+ */
+function ExecutionDataSection({ title, data, isError = false }: ExecutionDataSectionProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const jsonString = useMemo(() => {
+    if (!data) return ''
+    return formatValueAsJson(data)
+  }, [data])
+
+  const isEmpty = jsonString === '—' || jsonString === ''
+
+  return (
+    <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
+      <div
+        className='group flex cursor-pointer items-center justify-between'
+        onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setIsExpanded(!isExpanded)
+          }
+        }}
+        role='button'
+        tabIndex={0}
+        aria-expanded={isExpanded}
+        aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${title.toLowerCase()}`}
+      >
+        <span
+          className={cn(
+            'font-medium text-[12px] transition-colors',
+            isError
+              ? 'text-[var(--text-error)]'
+              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+          )}
+        >
+          {title}
+        </span>
+        <ChevronDown
+          className={cn(
+            'h-[10px] w-[10px] text-[var(--text-tertiary)] transition-colors transition-transform group-hover:text-[var(--text-primary)]'
+          )}
+          style={{
+            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+          }}
+        />
+      </div>
+
+      {isExpanded && (
+        <>
+          {isEmpty ? (
+            <div className='rounded-[6px] bg-[var(--surface-3)] px-[10px] py-[8px]'>
+              <span className='text-[12px] text-[var(--text-tertiary)]'>No data</span>
+            </div>
+          ) : (
+            <Code.Viewer
+              code={jsonString}
+              language='json'
+              className='!bg-[var(--surface-3)] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+              wrapText
+            />
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Section showing resolved variable references - styled like the connections section in editor
+ */
+function ResolvedConnectionsSection({ connections }: { connections: ResolvedConnection[] }) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [expandedBlocks, setExpandedBlocks] = useState<Set<string>>(new Set())
+
+  useEffect(() => {
+    setExpandedBlocks(new Set(connections.map((c) => c.blockId)))
+  }, [connections])
+
+  if (connections.length === 0) return null
+
+  const toggleBlock = (blockId: string) => {
+    setExpandedBlocks((prev) => {
+      const next = new Set(prev)
+      if (next.has(blockId)) {
+        next.delete(blockId)
+      } else {
+        next.add(blockId)
+      }
+      return next
+    })
+  }
+
+  return (
+    <div className='flex flex-shrink-0 flex-col border-[var(--border)] border-t'>
+      {/* Header with Chevron */}
+      <div
+        className='flex flex-shrink-0 cursor-pointer items-center gap-[8px] px-[10px] pt-[5px] pb-[5px]'
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setIsCollapsed(!isCollapsed)
+          }
+        }}
+        role='button'
+        tabIndex={0}
+        aria-label={isCollapsed ? 'Expand connections' : 'Collapse connections'}
+      >
+        <ChevronDownIcon
+          className={cn('h-[14px] w-[14px] transition-transform', !isCollapsed && 'rotate-180')}
+        />
+        <div className='font-medium text-[13px] text-[var(--text-primary)]'>Connections</div>
+      </div>
+
+      {/* Content - styled like ConnectionBlocks */}
+      {!isCollapsed && (
+        <div className='space-y-[2px] px-[6px] pb-[8px]'>
+          {connections.map((connection) => {
+            const blockConfig = getBlock(connection.blockType)
+            const Icon = blockConfig?.icon
+            const bgColor = blockConfig?.bgColor || '#6B7280'
+            const isExpanded = expandedBlocks.has(connection.blockId)
+            const hasFields = connection.fields.length > 0
+
+            return (
+              <div key={connection.blockId} className='mb-[2px] last:mb-0'>
+                {/* Block header - styled like ConnectionItem */}
+                <div
+                  className={cn(
+                    'group flex h-[26px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]',
+                    hasFields && 'cursor-pointer'
+                  )}
+                  onClick={() => hasFields && toggleBlock(connection.blockId)}
+                >
+                  <div
+                    className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                    style={{ background: bgColor }}
+                  >
+                    {Icon && (
+                      <Icon
+                        className={cn(
+                          'text-white transition-transform duration-200',
+                          hasFields && 'group-hover:scale-110',
+                          '!h-[9px] !w-[9px]'
+                        )}
+                      />
+                    )}
+                  </div>
+                  <span
+                    className={cn(
+                      'truncate font-medium',
+                      'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
+                    )}
+                  >
+                    {connection.blockName}
+                  </span>
+                  {hasFields && (
+                    <ChevronDownIcon
+                      className={cn(
+                        'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+                        'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
+                        isExpanded && 'rotate-180'
+                      )}
+                    />
+                  )}
+                </div>
+
+                {/* Fields - styled like FieldItem but showing resolved values */}
+                {isExpanded && hasFields && (
+                  <div className='relative mt-[2px] ml-[12px] space-y-[2px] pl-[10px]'>
+                    <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+                    {connection.fields.map((field) => (
+                      <div
+                        key={field.tag}
+                        className='group flex h-[26px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+                      >
+                        <span
+                          className={cn(
+                            'flex-shrink-0 font-medium',
+                            'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
+                          )}
+                        >
+                          {field.path}
+                        </span>
+                        <span className='min-w-0 flex-1 truncate text-[var(--text-tertiary)]'>
+                          {field.value}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Icon component for rendering block icons
+ */
+function IconComponent({
+  icon: Icon,
+  className,
+}: {
+  icon: BlockIcon | undefined
+  className?: string
+}) {
+  if (!Icon) return null
+  return <Icon className={className} />
+}
+
+interface ExecutionData {
+  input?: unknown
+  output?: unknown
+  status?: string
+  durationMs?: number
+}
+
+interface BlockDetailsSidebarProps {
+  block: BlockState
+  executionData?: ExecutionData
+  /** All block execution data for resolving variable references */
+  allBlockExecutions?: Record<string, ExecutionData>
+  /** All workflow blocks for mapping block names to IDs */
+  workflowBlocks?: Record<string, BlockState>
+  /** When true, shows "Not Executed" badge if no executionData is provided */
+  isExecutionMode?: boolean
+  /** Optional close handler - if not provided, no close button is shown */
+  onClose?: () => void
+}
+
+/**
+ * Format duration for display
+ */
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+/**
+ * Readonly sidebar panel showing block configuration using SubBlock components.
+ */
+function BlockDetailsSidebarContent({
+  block,
+  executionData,
+  allBlockExecutions,
+  workflowBlocks,
+  isExecutionMode = false,
+  onClose,
+}: BlockDetailsSidebarProps) {
+  const blockConfig = getBlock(block.type) as BlockConfig | undefined
+  const subBlockValues = block.subBlocks || {}
+
+  const blockNameToId = useMemo(() => {
+    const map = new Map<string, string>()
+    if (workflowBlocks) {
+      for (const [blockId, blockData] of Object.entries(workflowBlocks)) {
+        if (blockData.name) {
+          map.set(normalizeName(blockData.name), blockId)
+        }
+      }
+    }
+    return map
+  }, [workflowBlocks])
+
+  const resolveReference = useMemo(() => {
+    return (reference: string): unknown => {
+      if (!allBlockExecutions || !workflowBlocks) return undefined
+      if (!reference.startsWith('<') || !reference.endsWith('>')) return undefined
+
+      const inner = reference.slice(1, -1) // Remove < and >
+      const parts = inner.split('.')
+      if (parts.length < 1) return undefined
+
+      const [blockName, ...pathParts] = parts
+      const normalizedBlockName = normalizeName(blockName)
+
+      const blockId = blockNameToId.get(normalizedBlockName)
+      if (!blockId) return undefined
+
+      const blockExecution = allBlockExecutions[blockId]
+      if (!blockExecution?.output) return undefined
+
+      if (pathParts.length === 0) {
+        return blockExecution.output
+      }
+
+      return navigatePath(blockExecution.output, pathParts)
+    }
+  }, [allBlockExecutions, workflowBlocks, blockNameToId])
+
+  // Group resolved variables by source block for display
+  const resolvedConnections = useMemo((): ResolvedConnection[] => {
+    if (!allBlockExecutions || !workflowBlocks) return []
+
+    const allRefs = extractAllReferencesFromSubBlocks(subBlockValues)
+    const seen = new Set<string>()
+    const blockMap = new Map<string, ResolvedConnection>()
+
+    for (const ref of allRefs) {
+      if (seen.has(ref)) continue
+
+      // Parse reference: <blockName.path.to.value>
+      const inner = ref.slice(1, -1)
+      const parts = inner.split('.')
+      if (parts.length < 1) continue
+
+      const [blockName, ...pathParts] = parts
+      const normalizedBlockName = normalizeName(blockName)
+      const blockId = blockNameToId.get(normalizedBlockName)
+      if (!blockId) continue
+
+      const sourceBlock = workflowBlocks[blockId]
+      if (!sourceBlock) continue
+
+      const resolvedValue = resolveReference(ref)
+      if (resolvedValue === undefined) continue
+
+      seen.add(ref)
+
+      // Get or create block entry
+      if (!blockMap.has(blockId)) {
+        blockMap.set(blockId, {
+          blockId,
+          blockName: sourceBlock.name || blockName,
+          blockType: sourceBlock.type,
+          fields: [],
+        })
+      }
+
+      const connection = blockMap.get(blockId)!
+      connection.fields.push({
+        path: pathParts.join('.') || 'output',
+        value: formatInlineValue(resolvedValue),
+        tag: ref,
+      })
+    }
+
+    return Array.from(blockMap.values())
+  }, [subBlockValues, allBlockExecutions, workflowBlocks, blockNameToId, resolveReference])
+
+  if (!blockConfig) {
+    return (
+      <div className='flex h-full w-80 flex-col overflow-hidden rounded-r-[8px] border-[var(--border)] border-l bg-[var(--surface-1)]'>
+        <div className='flex items-center gap-[8px] bg-[var(--surface-4)] px-[12px] py-[8px]'>
+          <div className='flex h-[18px] w-[18px] items-center justify-center rounded-[4px] bg-[var(--surface-3)]' />
+          <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+            {block.name || 'Unknown Block'}
+          </span>
+        </div>
+        <div className='p-[12px]'>
+          <p className='text-[13px] text-[var(--text-secondary)]'>Block configuration not found.</p>
+        </div>
+      </div>
+    )
+  }
+
+  const visibleSubBlocks = blockConfig.subBlocks.filter((subBlock) => {
+    if (subBlock.hidden || subBlock.hideFromPreview) return false
+    if (subBlock.mode === 'trigger') return false
+    if (subBlock.condition) {
+      return evaluateCondition(subBlock.condition, subBlockValues)
+    }
+    return true
+  })
+
+  const statusVariant =
+    executionData?.status === 'error'
+      ? 'red'
+      : executionData?.status === 'success'
+        ? 'green'
+        : 'gray'
+
+  return (
+    <div className='flex h-full w-80 flex-col overflow-hidden rounded-r-[8px] border-[var(--border)] border-l bg-[var(--surface-1)]'>
+      {/* Header - styled like editor */}
+      <div className='flex flex-shrink-0 items-center gap-[8px] bg-[var(--surface-4)] px-[12px] py-[8px]'>
+        <div
+          className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+          style={{ backgroundColor: blockConfig.bgColor }}
+        >
+          <IconComponent
+            icon={blockConfig.icon}
+            className='h-[12px] w-[12px] text-[var(--white)]'
+          />
+        </div>
+        <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+          {block.name || blockConfig.name}
+        </span>
+        {block.enabled === false && (
+          <Badge variant='red' size='sm'>
+            Disabled
+          </Badge>
+        )}
+        {onClose && (
+          <Button variant='ghost' className='!p-[4px] flex-shrink-0' onClick={onClose}>
+            <X className='h-[14px] w-[14px]' />
+          </Button>
+        )}
+      </div>
+
+      {/* Scrollable content */}
+      <div className='flex-1 overflow-y-auto'>
+        {/* Not Executed Banner - shown when in execution mode but block wasn't executed */}
+        {isExecutionMode && !executionData && (
+          <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
+            <div className='flex items-center justify-between'>
+              <Badge variant='gray-secondary' size='sm' dot>
+                Not Executed
+              </Badge>
+            </div>
+          </div>
+        )}
+
+        {/* Execution Input/Output (if provided) */}
+        {executionData &&
+        (executionData.input !== undefined || executionData.output !== undefined) ? (
+          <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
+            {/* Execution Status & Duration Header */}
+            {(executionData.status || executionData.durationMs !== undefined) && (
+              <div className='flex items-center justify-between'>
+                {executionData.status && (
+                  <Badge variant={statusVariant} size='sm' dot>
+                    <span className='capitalize'>{executionData.status}</span>
+                  </Badge>
+                )}
+                {executionData.durationMs !== undefined && (
+                  <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    {formatDuration(executionData.durationMs)}
+                  </span>
+                )}
+              </div>
+            )}
+
+            {/* Divider between Status/Duration and Input/Output */}
+            {(executionData.status || executionData.durationMs !== undefined) &&
+              (executionData.input !== undefined || executionData.output !== undefined) && (
+                <div className='border-[var(--border)] border-t border-dashed' />
+              )}
+
+            {/* Input Section */}
+            {executionData.input !== undefined && (
+              <ExecutionDataSection title='Input' data={executionData.input} />
+            )}
+
+            {/* Divider between Input and Output */}
+            {executionData.input !== undefined && executionData.output !== undefined && (
+              <div className='border-[var(--border)] border-t border-dashed' />
+            )}
+
+            {/* Output Section */}
+            {executionData.output !== undefined && (
+              <ExecutionDataSection
+                title={executionData.status === 'error' ? 'Error' : 'Output'}
+                data={executionData.output}
+                isError={executionData.status === 'error'}
+              />
+            )}
+          </div>
+        ) : null}
+
+        {/* Subblock Values - Using SubBlock components in preview mode */}
+        <div className='readonly-preview px-[8px] py-[8px]'>
+          {/* CSS override to show full opacity and prevent interaction instead of dimmed disabled state */}
+          <style>{`
+            .readonly-preview,
+            .readonly-preview * {
+              cursor: default !important;
+            }
+            .readonly-preview [disabled],
+            .readonly-preview [data-disabled],
+            .readonly-preview input,
+            .readonly-preview textarea,
+            .readonly-preview [role="combobox"],
+            .readonly-preview [role="slider"],
+            .readonly-preview [role="switch"],
+            .readonly-preview [role="checkbox"] {
+              opacity: 1 !important;
+              pointer-events: none;
+            }
+            .readonly-preview .opacity-50 {
+              opacity: 1 !important;
+            }
+          `}</style>
+          {visibleSubBlocks.length > 0 ? (
+            <div className='flex flex-col'>
+              {visibleSubBlocks.map((subBlockConfig, index) => (
+                <div key={subBlockConfig.id} className='subblock-row'>
+                  <SubBlock
+                    blockId={block.id}
+                    config={subBlockConfig}
+                    isPreview={true}
+                    subBlockValues={subBlockValues}
+                    disabled={true}
+                  />
+                  {index < visibleSubBlocks.length - 1 && (
+                    <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                      <div
+                        className='h-[1.25px]'
+                        style={{
+                          backgroundImage:
+                            'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className='py-[16px] text-center'>
+              <p className='text-[13px] text-[var(--text-secondary)]'>
+                No configurable fields for this block.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Resolved Variables Section - Pinned at bottom, outside scrollable area */}
+      {resolvedConnections.length > 0 && (
+        <ResolvedConnectionsSection connections={resolvedConnections} />
+      )}
+    </div>
+  )
+}
+
+/**
+ * Block details sidebar wrapped in ReactFlowProvider for hook compatibility.
+ */
+export function BlockDetailsSidebar(props: BlockDetailsSidebarProps) {
+  return (
+    <ReactFlowProvider>
+      <BlockDetailsSidebarContent {...props} />
+    </ReactFlowProvider>
+  )
+}

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block.tsx

@@ -3,7 +3,7 @@
 import { memo, useMemo } from 'react'
 import { Handle, type NodeProps, Position } from 'reactflow'
 import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
-import { getBlock } from '@/blocks/registry'
+import { getBlock } from '@/blocks'
 
 interface WorkflowPreviewBlockData {
   type: string
@@ -29,10 +29,8 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
   }
 
   const IconComponent = blockConfig.icon
-  // Hide input handle for triggers, starters, or blocks in trigger mode
   const isStarterOrTrigger = blockConfig.category === 'triggers' || type === 'starter' || isTrigger
 
-  // Get visible subblocks from config (no fetching, just config structure)
   const visibleSubBlocks = useMemo(() => {
     if (!blockConfig.subBlocks) return []
 
@@ -48,7 +46,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
   const hasSubBlocks = visibleSubBlocks.length > 0
   const showErrorRow = !isStarterOrTrigger
 
-  // Handle styles based on orientation
   const horizontalHandleClass = '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-[2px]'
   const verticalHandleClass = '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-[2px]'
 

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/subflow.tsx

@@ -26,11 +26,9 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
   const blockIconBg = isLoop ? '#2FB3FF' : '#FEE12B'
   const blockName = name || (isLoop ? 'Loop' : 'Parallel')
 
-  // Handle IDs matching the actual subflow component
   const startHandleId = isLoop ? 'loop-start-source' : 'parallel-start-source'
   const endHandleId = isLoop ? 'loop-end-source' : 'parallel-end-source'
 
-  // Handle styles matching the workflow-block component
   const leftHandleClass =
     '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none'
   const rightHandleClass =

apps/sim/app/workspace/[workspaceId]/w/components/preview/index.ts

@@ -0,0 +1,2 @@
+export { BlockDetailsSidebar } from './components/block-details-sidebar'
+export { WorkflowPreview } from './preview'

apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx

@@ -18,13 +18,16 @@ import { NoteBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/componen
 import { SubflowNodeComponent } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node'
 import { WorkflowBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block'
 import { WorkflowEdge } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge'
-import { WorkflowPreviewBlock } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-block'
-import { WorkflowPreviewSubflow } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-subflow'
+import { WorkflowPreviewBlock } from '@/app/workspace/[workspaceId]/w/components/preview/components/block'
+import { WorkflowPreviewSubflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/subflow'
 import { getBlock } from '@/blocks'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
 const logger = createLogger('WorkflowPreview')
 
+/** Execution status for edges/nodes in the preview */
+type ExecutionStatus = 'success' | 'error' | 'not-executed'
+
 interface WorkflowPreviewProps {
   workflowState: WorkflowState
   showSubBlocks?: boolean
@@ -40,6 +43,8 @@ interface WorkflowPreviewProps {
   lightweight?: boolean
   /** Cursor style to show when hovering the canvas */
   cursorStyle?: 'default' | 'pointer' | 'grab'
+  /** Map of executed block IDs to their status for highlighting the execution path */
+  executedBlocks?: Record<string, { status: string }>
 }
 
 /**
@@ -105,10 +110,9 @@ export function WorkflowPreview({
   onNodeClick,
   lightweight = false,
   cursorStyle = 'grab',
+  executedBlocks,
 }: WorkflowPreviewProps) {
-  // Use lightweight node types for better performance in template cards
   const nodeTypes = lightweight ? lightweightNodeTypes : fullNodeTypes
-  // Check if the workflow state is valid
   const isValidWorkflowState = workflowState?.blocks && workflowState.edges
 
   const blocksStructure = useMemo(() => {
@@ -178,9 +182,7 @@ export function WorkflowPreview({
 
       const absolutePosition = calculateAbsolutePosition(block, workflowState.blocks)
 
-      // Lightweight mode: create minimal node data for performance
       if (lightweight) {
-        // Handle loops and parallels as subflow nodes
         if (block.type === 'loop' || block.type === 'parallel') {
           nodeArray.push({
             id: blockId,
@@ -197,7 +199,6 @@ export function WorkflowPreview({
           return
         }
 
-        // Regular blocks
         nodeArray.push({
           id: blockId,
           type: 'workflowBlock',
@@ -214,10 +215,9 @@ export function WorkflowPreview({
         return
       }
 
-      // Full mode: create detailed node data for interactive previews
       if (block.type === 'loop') {
         nodeArray.push({
-          id: block.id,
+          id: blockId,
           type: 'subflowNode',
           position: absolutePosition,
           parentId: block.data?.parentId,
@@ -238,7 +238,7 @@ export function WorkflowPreview({
 
       if (block.type === 'parallel') {
         nodeArray.push({
-          id: block.id,
+          id: blockId,
           type: 'subflowNode',
           position: absolutePosition,
           parentId: block.data?.parentId,
@@ -265,11 +265,31 @@ export function WorkflowPreview({
 
       const nodeType = block.type === 'note' ? 'noteBlock' : 'workflowBlock'
 
+      let executionStatus: ExecutionStatus | undefined
+      if (executedBlocks) {
+        const blockExecution = executedBlocks[blockId]
+        if (blockExecution) {
+          if (blockExecution.status === 'error') {
+            executionStatus = 'error'
+          } else if (blockExecution.status === 'success') {
+            executionStatus = 'success'
+          } else {
+            executionStatus = 'not-executed'
+          }
+        } else {
+          executionStatus = 'not-executed'
+        }
+      }
+
       nodeArray.push({
         id: blockId,
         type: nodeType,
         position: absolutePosition,
         draggable: false,
+        className:
+          executionStatus && executionStatus !== 'not-executed'
+            ? `execution-${executionStatus}`
+            : undefined,
         data: {
           type: block.type,
           config: blockConfig,
@@ -278,43 +298,9 @@ export function WorkflowPreview({
           canEdit: false,
           isPreview: true,
           subBlockValues: block.subBlocks ?? {},
+          executionStatus,
         },
       })
-
-      if (block.type === 'loop') {
-        const childBlocks = Object.entries(workflowState.blocks || {}).filter(
-          ([_, childBlock]) => childBlock.data?.parentId === blockId
-        )
-
-        childBlocks.forEach(([childId, childBlock]) => {
-          const childConfig = getBlock(childBlock.type)
-
-          if (childConfig) {
-            const childNodeType = childBlock.type === 'note' ? 'noteBlock' : 'workflowBlock'
-
-            nodeArray.push({
-              id: childId,
-              type: childNodeType,
-              position: {
-                x: block.position.x + 50,
-                y: block.position.y + (childBlock.position?.y || 100),
-              },
-              data: {
-                type: childBlock.type,
-                config: childConfig,
-                name: childBlock.name,
-                blockState: childBlock,
-                showSubBlocks,
-                isChild: true,
-                parentId: blockId,
-                canEdit: false,
-                isPreview: true,
-              },
-              draggable: false,
-            })
-          }
-        })
-      }
     })
 
     return nodeArray
@@ -326,21 +312,42 @@ export function WorkflowPreview({
     workflowState.blocks,
     isValidWorkflowState,
     lightweight,
+    executedBlocks,
   ])
 
   const edges: Edge[] = useMemo(() => {
     if (!isValidWorkflowState) return []
 
-    return (workflowState.edges || []).map((edge) => ({
-      id: edge.id,
-      source: edge.source,
-      target: edge.target,
-      sourceHandle: edge.sourceHandle,
-      targetHandle: edge.targetHandle,
-    }))
-  }, [edgesStructure, workflowState.edges, isValidWorkflowState])
+    return (workflowState.edges || []).map((edge) => {
+      let executionStatus: ExecutionStatus | undefined
+      if (executedBlocks) {
+        const sourceExecuted = executedBlocks[edge.source]
+        const targetExecuted = executedBlocks[edge.target]
+
+        if (sourceExecuted && targetExecuted) {
+          if (targetExecuted.status === 'error') {
+            executionStatus = 'error'
+          } else if (sourceExecuted.status === 'success' && targetExecuted.status === 'success') {
+            executionStatus = 'success'
+          } else {
+            executionStatus = 'not-executed'
+          }
+        } else {
+          executionStatus = 'not-executed'
+        }
+      }
+
+      return {
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        sourceHandle: edge.sourceHandle,
+        targetHandle: edge.targetHandle,
+        data: executionStatus ? { executionStatus } : undefined,
+      }
+    })
+  }, [edgesStructure, workflowState.edges, isValidWorkflowState, executedBlocks])
 
-  // Handle migrated logs that don't have complete workflow state
   if (!isValidWorkflowState) {
     return (
       <div
@@ -363,13 +370,19 @@ export function WorkflowPreview({
         style={{ height, width, backgroundColor: 'var(--bg)' }}
         className={cn('preview-mode', className)}
       >
-        {cursorStyle && (
-          <style>{`
-            .preview-mode .react-flow__pane {
-              cursor: ${cursorStyle} !important;
-            }
-          `}</style>
-        )}
+        <style>{`
+          ${cursorStyle ? `.preview-mode .react-flow__pane { cursor: ${cursorStyle} !important; }` : ''}
+
+          /* Execution status styling for nodes */
+          .preview-mode .react-flow__node.execution-success {
+            border-radius: 8px;
+            box-shadow: 0 0 0 4px var(--border-success);
+          }
+          .preview-mode .react-flow__node.execution-error {
+            border-radius: 8px;
+            box-shadow: 0 0 0 4px var(--text-error);
+          }
+        `}</style>
         <ReactFlow
           nodes={nodes}
           edges={edges}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credential-sets/credential-sets.tsx

@@ -24,9 +24,9 @@ import { getSubscriptionStatus } from '@/lib/billing/client'
 import { cn } from '@/lib/core/utils/cn'
 import { getProviderDisplayName, type PollingProvider } from '@/lib/credential-sets/providers'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
+import { getUserColor } from '@/lib/workspaces/colors'
 import { getUserRole } from '@/lib/workspaces/organization'
-import { EmailTag } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components'
-import { getUserColor } from '@/app/workspace/[workspaceId]/w/utils/get-user-color'
+import { EmailTag } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal'
 import {
   type CredentialSet,
   useAcceptCredentialSetInvitation,

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-members/team-members.tsx

@@ -3,8 +3,8 @@
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Avatar, AvatarFallback, AvatarImage, Badge, Button } from '@/components/emcn'
+import { getUserColor } from '@/lib/workspaces/colors'
 import type { Invitation, Member, Organization } from '@/lib/workspaces/organization'
-import { getUserColor } from '@/app/workspace/[workspaceId]/w/utils/get-user-color'
 import {
   useCancelInvitation,
   useOrganizationMembers,

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars.tsx

@@ -4,7 +4,7 @@ import { type CSSProperties, useEffect, useMemo, useState } from 'react'
 import Image from 'next/image'
 import { Tooltip } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
-import { getUserColor } from '@/app/workspace/[workspaceId]/w/utils/get-user-color'
+import { getUserColor } from '@/lib/workspaces/colors'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 
 interface AvatarsProps {

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/index.ts

@@ -1,5 +0,0 @@
-export * from './email-tag'
-export * from './permission-selector'
-export * from './permissions-table'
-export * from './permissions-table-skeleton'
-export * from './types'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/index.ts

@@ -0,0 +1,6 @@
+export { EmailTag } from './components/email-tag'
+export { PermissionSelector } from './components/permission-selector'
+export { PermissionsTable } from './components/permissions-table'
+export { PermissionsTableSkeleton } from './components/permissions-table-skeleton'
+export type { PermissionType, UserPermissions } from './components/types'
+export { InviteModal } from './invite-modal'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx

@@ -18,9 +18,10 @@ import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { useWorkspacePermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { EmailTag } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/email-tag'
+import { PermissionsTable } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table'
 import { API_ENDPOINTS } from '@/stores/constants'
-import type { PermissionType, UserPermissions } from './components'
-import { EmailTag, PermissionsTable } from './components'
+import type { PermissionType, UserPermissions } from './components/types'
 
 const logger = createLogger('InviteModal')
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx

@@ -17,7 +17,7 @@ import {
 } from '@/components/emcn'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
-import { InviteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal'
+import { InviteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal'
 
 const logger = createLogger('WorkspaceHeader')
 

apps/sim/app/workspace/[workspaceId]/w/utils/get-user-color.ts

@@ -1,54 +0,0 @@
-/**
- * User color palette matching terminal.tsx RUN_ID_COLORS
- * These colors are used consistently across cursors, avatars, and terminal run IDs
- */
-export const USER_COLORS = [
-  '#4ADE80', // Green
-  '#F472B6', // Pink
-  '#60C5FF', // Blue
-  '#FF8533', // Orange
-  '#C084FC', // Purple
-  '#FCD34D', // Yellow
-] as const
-
-/**
- * Hash a user ID to generate a consistent numeric index
- *
- * @param userId - The user ID to hash
- * @returns A positive integer
- */
-function hashUserId(userId: string): number {
-  return Math.abs(Array.from(userId).reduce((acc, char) => acc + char.charCodeAt(0), 0))
-}
-
-/**
- * Gets a consistent color for a user based on their ID.
- * The same user will always get the same color across cursors, avatars, and terminal.
- *
- * @param userId - The unique user identifier
- * @returns A hex color string
- */
-export function getUserColor(userId: string): string {
-  const hash = hashUserId(userId)
-  return USER_COLORS[hash % USER_COLORS.length]
-}
-
-/**
- * Creates a stable mapping of user IDs to color indices for a list of users.
- * Useful when you need to maintain consistent color assignments across renders.
- *
- * @param userIds - Array of user IDs to map
- * @returns Map of user ID to color index
- */
-export function createUserColorMap(userIds: string[]): Map<string, number> {
-  const colorMap = new Map<string, number>()
-  let colorIndex = 0
-
-  for (const userId of userIds) {
-    if (!colorMap.has(userId)) {
-      colorMap.set(userId, colorIndex++)
-    }
-  }
-
-  return colorMap
-}

apps/sim/components/emcn/components/checkbox/checkbox.tsx

@@ -23,7 +23,7 @@ import { cn } from '@/lib/core/utils/cn'
  * ```
  */
 const checkboxVariants = cva(
-  'peer shrink-0 rounded-sm border border-[var(--border-1)] bg-[var(--surface-4)] ring-offset-background transition-colors hover:border-[var(--border-muted)] hover:bg-[var(--surface-7)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-[var(--text-muted)] data-[state=checked]:bg-[var(--text-muted)] data-[state=checked]:text-white dark:bg-[var(--surface-5)] dark:data-[state=checked]:border-[var(--surface-7)] dark:data-[state=checked]:bg-[var(--surface-7)] dark:data-[state=checked]:text-[var(--text-primary)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]',
+  'peer shrink-0 rounded-sm border border-[var(--border-1)] bg-[var(--surface-4)] ring-offset-background transition-colors hover:border-[var(--border-muted)] hover:bg-[var(--surface-7)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[state=checked]:border-[var(--text-muted)] data-[state=checked]:bg-[var(--text-muted)] data-[state=checked]:text-white dark:bg-[var(--surface-5)] dark:data-[state=checked]:border-[var(--surface-7)] dark:data-[state=checked]:bg-[var(--surface-7)] dark:data-[state=checked]:text-[var(--text-primary)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]',
   {
     variants: {
       size: {

apps/sim/components/emcn/components/combobox/combobox.tsx

@@ -467,7 +467,12 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                     {...inputProps}
                   />
                   {(overlayContent || SelectedIcon) && (
-                    <div className='pointer-events-none absolute top-0 right-[42px] bottom-0 left-0 flex items-center bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'>
+                    <div
+                      className={cn(
+                        'pointer-events-none absolute top-0 right-[42px] bottom-0 left-0 flex items-center bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+                        disabled && 'opacity-50'
+                      )}
+                    >
                       {overlayContent ? (
                         overlayContent
                       ) : (
@@ -505,6 +510,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                   className={cn(
                     comboboxVariants({ variant, size }),
                     'relative cursor-pointer items-center justify-between',
+                    disabled && 'cursor-not-allowed opacity-50',
                     className
                   )}
                   onClick={handleToggle}

apps/sim/components/emcn/components/date-picker/date-picker.tsx

@@ -844,6 +844,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
             className={cn(
               datePickerVariants({ variant, size }),
               'relative cursor-pointer items-center justify-between',
+              disabled && 'cursor-not-allowed opacity-50',
               className
             )}
             onClick={handleTriggerClick}

apps/sim/components/emcn/components/slider/slider.tsx

@@ -16,12 +16,13 @@ export interface SliderProps extends React.ComponentPropsWithoutRef<typeof Slide
  * ```
  */
 const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, disabled, ...props }, ref) => (
     <SliderPrimitive.Root
       ref={ref}
+      disabled={disabled}
       className={cn(
         'relative flex w-full touch-none select-none items-center',
-        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
         className
       )}
       {...props}

apps/sim/components/emcn/components/switch/switch.tsx

@@ -12,10 +12,12 @@ import { cn } from '@/lib/core/utils/cn'
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+>(({ className, disabled, ...props }, ref) => (
   <SwitchPrimitives.Root
+    disabled={disabled}
     className={cn(
-      'peer inline-flex h-[17px] w-[30px] shrink-0 cursor-pointer items-center rounded-[20px] transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      'peer inline-flex h-[17px] w-[30px] shrink-0 cursor-pointer items-center rounded-[20px] transition-colors focus-visible:outline-none',
+      'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
       'bg-[var(--border-1)] data-[state=checked]:bg-[var(--text-primary)]',
       className
     )}

apps/sim/hooks/queries/logs.ts

@@ -12,6 +12,9 @@ export const logKeys = {
   detail: (logId: string | undefined) => [...logKeys.details(), logId ?? ''] as const,
   dashboard: (workspaceId: string | undefined, filters: Record<string, unknown>) =>
     [...logKeys.all, 'dashboard', workspaceId ?? '', filters] as const,
+  executionSnapshots: () => [...logKeys.all, 'executionSnapshot'] as const,
+  executionSnapshot: (executionId: string | undefined) =>
+    [...logKeys.executionSnapshots(), executionId ?? ''] as const,
 }
 
 interface LogFilters {
@@ -196,3 +199,45 @@ export function useDashboardLogs(
     placeholderData: keepPreviousData,
   })
 }
+
+export interface ExecutionSnapshotData {
+  executionId: string
+  workflowId: string
+  workflowState: Record<string, unknown>
+  executionMetadata: {
+    trigger: string
+    startedAt: string
+    endedAt?: string
+    totalDurationMs?: number
+    cost: {
+      total: number | null
+      input: number | null
+      output: number | null
+    }
+    totalTokens: number | null
+  }
+}
+
+async function fetchExecutionSnapshot(executionId: string): Promise<ExecutionSnapshotData> {
+  const response = await fetch(`/api/logs/execution/${executionId}`)
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch execution snapshot: ${response.statusText}`)
+  }
+
+  const data = await response.json()
+  if (!data) {
+    throw new Error('No execution snapshot data returned')
+  }
+
+  return data
+}
+
+export function useExecutionSnapshot(executionId: string | undefined) {
+  return useQuery({
+    queryKey: logKeys.executionSnapshot(executionId),
+    queryFn: () => fetchExecutionSnapshot(executionId as string),
+    enabled: Boolean(executionId),
+    staleTime: 5 * 60 * 1000, // 5 minutes - execution snapshots don't change
+  })
+}

apps/sim/hooks/queries/workflows.ts

@@ -13,6 +13,7 @@ import {
   getNextWorkflowColor,
 } from '@/stores/workflows/registry/utils'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
+import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
 const logger = createLogger('WorkflowQueries')
 
@@ -20,6 +21,9 @@ export const workflowKeys = {
   all: ['workflows'] as const,
   lists: () => [...workflowKeys.all, 'list'] as const,
   list: (workspaceId: string | undefined) => [...workflowKeys.lists(), workspaceId ?? ''] as const,
+  deploymentVersions: () => [...workflowKeys.all, 'deploymentVersion'] as const,
+  deploymentVersion: (workflowId: string | undefined, version: number | undefined) =>
+    [...workflowKeys.deploymentVersions(), workflowId ?? '', version ?? 0] as const,
 }
 
 function mapWorkflow(workflow: any): WorkflowMetadata {
@@ -339,3 +343,60 @@ export function useDuplicateWorkflowMutation() {
     },
   })
 }
+
+interface DeploymentVersionStateResponse {
+  deployedState: WorkflowState
+}
+
+async function fetchDeploymentVersionState(
+  workflowId: string,
+  version: number
+): Promise<WorkflowState> {
+  const response = await fetch(`/api/workflows/${workflowId}/deployments/${version}`)
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch deployment version: ${response.statusText}`)
+  }
+
+  const data: DeploymentVersionStateResponse = await response.json()
+  if (!data.deployedState) {
+    throw new Error('No deployed state returned')
+  }
+
+  return data.deployedState
+}
+
+/**
+ * Hook for fetching the workflow state of a specific deployment version.
+ * Used in the deploy modal to preview historical versions.
+ */
+export function useDeploymentVersionState(workflowId: string | null, version: number | null) {
+  return useQuery({
+    queryKey: workflowKeys.deploymentVersion(workflowId ?? undefined, version ?? undefined),
+    queryFn: () => fetchDeploymentVersionState(workflowId as string, version as number),
+    enabled: Boolean(workflowId) && version !== null,
+    staleTime: 5 * 60 * 1000, // 5 minutes - deployment versions don't change
+  })
+}
+
+interface RevertToVersionVariables {
+  workflowId: string
+  version: number
+}
+
+/**
+ * Mutation hook for reverting (loading) a deployment version into the current workflow.
+ */
+export function useRevertToVersion() {
+  return useMutation({
+    mutationFn: async ({ workflowId, version }: RevertToVersionVariables): Promise<void> => {
+      const response = await fetch(`/api/workflows/${workflowId}/deployments/${version}/revert`, {
+        method: 'POST',
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to load deployment')
+      }
+    },
+  })
+}

apps/sim/lib/workspaces/colors.ts

@@ -7,6 +7,19 @@ const APP_COLORS = [
   { from: '#F59E0B', to: '#F97316' }, // amber to orange
 ]
 
+/**
+ * User color palette matching terminal.tsx RUN_ID_COLORS
+ * These colors are used consistently across cursors, avatars, and terminal run IDs
+ */
+export const USER_COLORS = [
+  '#4ADE80', // Green
+  '#F472B6', // Pink
+  '#60C5FF', // Blue
+  '#FF8533', // Orange
+  '#C084FC', // Purple
+  '#FCD34D', // Yellow
+] as const
+
 interface PresenceColorPalette {
   gradient: string
   accentColor: string
@@ -80,3 +93,35 @@ export function getPresenceColors(
     baseColor: colorPair.from,
   }
 }
+
+/**
+ * Gets a consistent color for a user based on their ID.
+ * The same user will always get the same color across cursors, avatars, and terminal.
+ *
+ * @param userId - The unique user identifier
+ * @returns A hex color string
+ */
+export function getUserColor(userId: string): string {
+  const hash = hashIdentifier(userId)
+  return USER_COLORS[hash % USER_COLORS.length]
+}
+
+/**
+ * Creates a stable mapping of user IDs to color indices for a list of users.
+ * Useful when you need to maintain consistent color assignments across renders.
+ *
+ * @param userIds - Array of user IDs to map
+ * @returns Map of user ID to color index
+ */
+export function createUserColorMap(userIds: string[]): Map<string, number> {
+  const colorMap = new Map<string, number>()
+  let colorIndex = 0
+
+  for (const userId of userIds) {
+    if (!colorMap.has(userId)) {
+      colorMap.set(userId, colorIndex++)
+    }
+  }
+
+  return colorMap
+}