enriched workflow preview

Author: waleedlatif1

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'

…mponents/frozen-canvas/frozen-canvas.tsx …xecution-snapshot/execution-snapshot.tsxapps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/frozen-canvas/frozen-canvas.tsx renamed to apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/frozen-canvas/frozen-canvas.tsx renamed to apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx

@@ -6,11 +6,13 @@ 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 { PinnedSubBlocks } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/components/pinned-sub-blocks'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import {
+  BlockDetailsSidebar,
+  WorkflowPreview,
+} from '@/app/workspace/[workspaceId]/w/components/preview'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
-const logger = createLogger('FrozenCanvas')
+const logger = createLogger('ExecutionSnapshot')
 
 interface BlockExecutionData {
   input: unknown
@@ -19,7 +21,7 @@ interface BlockExecutionData {
   durationMs: number
 }
 
-interface FrozenCanvasData {
+interface ExecutionSnapshotData {
   executionId: string
   workflowId: string
   workflowState: WorkflowState
@@ -38,7 +40,7 @@ interface FrozenCanvasData {
   }
 }
 
-interface FrozenCanvasProps {
+interface ExecutionSnapshotProps {
   executionId: string
   traceSpans?: any[]
   className?: string
@@ -49,7 +51,7 @@ interface FrozenCanvasProps {
   onClose?: () => void
 }
 
-export function FrozenCanvas({
+export function ExecutionSnapshot({
   executionId,
   traceSpans,
   className,
@@ -58,8 +60,8 @@ export function FrozenCanvas({
   isModal = false,
   isOpen = false,
   onClose,
-}: FrozenCanvasProps) {
-  const [data, setData] = useState<FrozenCanvasData | null>(null)
+}: ExecutionSnapshotProps) {
+  const [data, setData] = useState<ExecutionSnapshotData | null>(null)
   const [blockExecutions, setBlockExecutions] = useState<Record<string, BlockExecutionData>>({})
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -109,15 +111,15 @@ export function FrozenCanvas({
 
         const response = await fetch(`/api/logs/execution/${executionId}`)
         if (!response.ok) {
-          throw new Error(`Failed to fetch frozen canvas data: ${response.statusText}`)
+          throw new Error(`Failed to fetch execution snapshot data: ${response.statusText}`)
         }
 
         const result = await response.json()
         setData(result)
-        logger.debug(`Loaded frozen canvas data for execution: ${executionId}`)
+        logger.debug(`Loaded execution snapshot data for execution: ${executionId}`)
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Unknown error'
-        logger.error('Failed to fetch frozen canvas data:', err)
+        logger.error('Failed to fetch execution snapshot data:', err)
         setError(errorMessage)
       } finally {
         setLoading(false)
@@ -136,7 +138,7 @@ export function FrozenCanvas({
         >
           <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>
+            <span className='text-[13px]'>Loading execution snapshot...</span>
           </div>
         </div>
       )
@@ -150,7 +152,7 @@ export function FrozenCanvas({
         >
           <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>
+            <span className='text-[13px]'>Failed to load execution snapshot: {error}</span>
           </div>
         </div>
       )
@@ -190,27 +192,35 @@ export function FrozenCanvas({
     }
 
     return (
-      <div style={{ height, width }} className={cn('flex', className)}>
-        {/* Canvas area */}
-        <div className='frozen-canvas-mode h-full flex-1 overflow-hidden border-[var(--border)] border-r'>
+      <div
+        style={{ height, width }}
+        className={cn(
+          'flex overflow-hidden rounded-[4px] border border-[var(--border)]',
+          className
+        )}
+      >
+        <div className='h-full flex-1'>
           <WorkflowPreview
             workflowState={data.workflowState}
             showSubBlocks={true}
             isPannable={true}
             defaultPosition={{ x: 0, y: 0 }}
             defaultZoom={0.8}
             onNodeClick={(blockId) => {
-              setPinnedBlockId(blockId)
+              // Toggle: clicking same block closes sidebar, clicking different block switches
+              setPinnedBlockId((prev) => (prev === blockId ? null : blockId))
             }}
+            cursorStyle='pointer'
+            executedBlocks={blockExecutions}
           />
         </div>
-
-        {/* Sidebar - attached to right side */}
         {pinnedBlockId && data.workflowState.blocks[pinnedBlockId] && (
-          <PinnedSubBlocks
+          <BlockDetailsSidebar
             block={data.workflowState.blocks[pinnedBlockId]}
-            onClose={() => setPinnedBlockId(null)}
             executionData={blockExecutions[pinnedBlockId]}
+            allBlockExecutions={blockExecutions}
+            workflowBlocks={data.workflowState.blocks}
+            isExecutionMode
           />
         )}
       </div>

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/index.ts

@@ -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-details/log-details.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 />