cleanup

Author: waleedlatif1

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

@@ -14,6 +14,15 @@ import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
 const logger = createLogger('ExecutionSnapshot')
 
+interface TraceSpan {
+  blockId?: string
+  input?: unknown
+  output?: unknown
+  status?: string
+  duration?: number
+  children?: TraceSpan[]
+}
+
 interface BlockExecutionData {
   input: unknown
   output: unknown
@@ -42,7 +51,7 @@ interface ExecutionSnapshotData {
 
 interface ExecutionSnapshotProps {
   executionId: string
-  traceSpans?: any[]
+  traceSpans?: TraceSpan[]
   className?: string
   height?: string | number
   width?: string | number
@@ -59,7 +68,7 @@ export function ExecutionSnapshot({
   width = '100%',
   isModal = false,
   isOpen = false,
-  onClose,
+  onClose = () => {},
 }: ExecutionSnapshotProps) {
   const [data, setData] = useState<ExecutionSnapshotData | null>(null)
   const [blockExecutions, setBlockExecutions] = useState<Record<string, BlockExecutionData>>({})
@@ -71,8 +80,8 @@ export function ExecutionSnapshot({
     if (traceSpans && Array.isArray(traceSpans)) {
       const blockExecutionMap: Record<string, BlockExecutionData> = {}
 
-      const collectBlockSpans = (spans: any[]): any[] => {
-        const blockSpans: any[] = []
+      const collectBlockSpans = (spans: TraceSpan[]): TraceSpan[] => {
+        const blockSpans: TraceSpan[] = []
 
         for (const span of spans) {
           if (span.blockId) {

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

@@ -375,7 +375,7 @@ export function ShortInput({
                   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',
-                    disabled && 'opacity-50'
+                    (isPreview || disabled) && 'opacity-50'
                   )}
                 >
                   <div className='min-w-fit whitespace-pre'>{formattedText}</div>

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

@@ -1,15 +1,14 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import clsx from 'clsx'
 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, SubBlockConfig } from '@/blocks/types'
+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'
@@ -81,14 +80,6 @@ function formatValueAsJson(value: unknown): string {
   return String(value)
 }
 
-interface ResolvedVariable {
-  tag: string
-  value: string
-  blockName: string
-  blockType: string
-  fieldPath: string
-}
-
 interface ResolvedConnection {
   blockId: string
   blockName: string
@@ -255,7 +246,7 @@ function ResolvedConnectionsSection({ connections }: { connections: ResolvedConn
         aria-label={isCollapsed ? 'Expand connections' : 'Collapse connections'}
       >
         <ChevronDownIcon
-          className={clsx('h-[14px] w-[14px] transition-transform', !isCollapsed && 'rotate-180')}
+          className={cn('h-[14px] w-[14px] transition-transform', !isCollapsed && 'rotate-180')}
         />
         <div className='font-medium text-[13px] text-[var(--text-primary)]'>Connections</div>
       </div>
@@ -274,7 +265,7 @@ function ResolvedConnectionsSection({ connections }: { connections: ResolvedConn
               <div key={connection.blockId} className='mb-[2px] last:mb-0'>
                 {/* Block header - styled like ConnectionItem */}
                 <div
-                  className={clsx(
+                  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'
                   )}
@@ -286,7 +277,7 @@ function ResolvedConnectionsSection({ connections }: { connections: ResolvedConn
                   >
                     {Icon && (
                       <Icon
-                        className={clsx(
+                        className={cn(
                           'text-white transition-transform duration-200',
                           hasFields && 'group-hover:scale-110',
                           '!h-[9px] !w-[9px]'
@@ -295,7 +286,7 @@ function ResolvedConnectionsSection({ connections }: { connections: ResolvedConn
                     )}
                   </div>
                   <span
-                    className={clsx(
+                    className={cn(
                       'truncate font-medium',
                       'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
                     )}
@@ -304,7 +295,7 @@ function ResolvedConnectionsSection({ connections }: { connections: ResolvedConn
                   </span>
                   {hasFields && (
                     <ChevronDownIcon
-                      className={clsx(
+                      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'
@@ -323,7 +314,7 @@ function ResolvedConnectionsSection({ connections }: { connections: ResolvedConn
                         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={clsx(
+                          className={cn(
                             'flex-shrink-0 font-medium',
                             'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
                           )}
@@ -349,7 +340,13 @@ function ResolvedConnectionsSection({ connections }: { connections: ResolvedConn
 /**
  * Icon component for rendering block icons
  */
-function IconComponent({ icon: Icon, className }: { icon: any; className?: string }) {
+function IconComponent({
+  icon: Icon,
+  className,
+}: {
+  icon: BlockIcon | undefined
+  className?: string
+}) {
   if (!Icon) return null
   return <Icon className={className} />
 }

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

@@ -217,7 +217,7 @@ export function WorkflowPreview({
 
       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,14 +265,12 @@ export function WorkflowPreview({
 
       const nodeType = block.type === 'note' ? 'noteBlock' : 'workflowBlock'
 
-      // Determine execution status for this block
       let executionStatus: ExecutionStatus | undefined
       if (executedBlocks) {
         const blockExecution = executedBlocks[blockId]
         if (blockExecution) {
           executionStatus = blockExecution.status === 'error' ? 'error' : 'success'
         } else {
-          // Block exists but wasn't executed
           executionStatus = 'not-executed'
         }
       }
@@ -294,41 +292,6 @@ export function WorkflowPreview({
           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
@@ -347,22 +310,18 @@ export function WorkflowPreview({
     if (!isValidWorkflowState) return []
 
     return (workflowState.edges || []).map((edge) => {
-      // Determine if this edge was part of the execution path
       let executionStatus: ExecutionStatus | undefined
       if (executedBlocks) {
         const sourceExecuted = executedBlocks[edge.source]
         const targetExecuted = executedBlocks[edge.target]
 
-        // Edge was traversed if both source and target blocks were executed
         if (sourceExecuted && targetExecuted) {
-          // If the target had an error, mark the edge leading to it as error
           if (targetExecuted.status === 'error') {
             executionStatus = 'error'
           } else {
             executionStatus = 'success'
           }
         } else {
-          // Edge wasn't traversed
           executionStatus = 'not-executed'
         }
       }