fix: terminal spacing, subflow disabled in preview (#3055)

* fix: terminal spacing, subflow disabled in preview

* addressed comments

Author: emir-karabeg

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

@@ -411,10 +411,10 @@ const ExecutionGroupRow = memo(function ExecutionGroupRow({
   return (
     <div className='flex flex-col px-[6px]'>
       {/* Separator between executions */}
-      {showSeparator && <div className='mx-[4px] my-[4px] border-[var(--border)] border-t' />}
+      {showSeparator && <div className='mx-[4px] mb-[6px] border-[var(--border)] border-t' />}
 
       {/* Entry tree */}
-      <div className='ml-[4px] flex flex-col gap-[2px] pb-[4px]'>
+      <div className='ml-[4px] flex flex-col gap-[2px] pb-[6px]'>
         {group.entryTree.map((node) => (
           <EntryNodeRow
             key={node.entry.id}

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

@@ -3,6 +3,8 @@
 import { memo } from 'react'
 import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { Handle, type NodeProps, Position } from 'reactflow'
+import { Badge } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
 import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 
 /** Execution status for subflows in preview mode */
@@ -13,6 +15,8 @@ interface WorkflowPreviewSubflowData {
   width?: number
   height?: number
   kind: 'loop' | 'parallel'
+  /** Whether this subflow is enabled */
+  enabled?: boolean
   /** Whether this subflow is selected in preview mode */
   isPreviewSelected?: boolean
   /** Execution status for highlighting the subflow container */
@@ -27,7 +31,15 @@ interface WorkflowPreviewSubflowData {
  * or interactive features.
  */
 function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowData>) {
-  const { name, width = 500, height = 300, kind, isPreviewSelected = false, executionStatus } = data
+  const {
+    name,
+    width = 500,
+    height = 300,
+    kind,
+    enabled = true,
+    isPreviewSelected = false,
+    executionStatus,
+  } = data
 
   const isLoop = kind === 'loop'
   const BlockIcon = isLoop ? RepeatIcon : SplitIcon
@@ -84,14 +96,21 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
         <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
           <div
             className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
-            style={{ backgroundColor: blockIconBg }}
+            style={{ backgroundColor: enabled ? blockIconBg : 'var(--surface-4)' }}
           >
             <BlockIcon className='h-[16px] w-[16px] text-white' />
           </div>
-          <span className='font-medium text-[16px]' title={blockName}>
+          <span
+            className={cn(
+              'truncate font-medium text-[16px]',
+              !enabled && 'text-[var(--text-muted)]'
+            )}
+            title={blockName}
+          >
             {blockName}
           </span>
         </div>
+        {!enabled && <Badge variant='gray-secondary'>disabled</Badge>}
       </div>
 
       {/* Content area - matches workflow structure */}

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

@@ -361,6 +361,7 @@ export function PreviewWorkflow({
             width: dimensions.width,
             height: dimensions.height,
             kind: block.type as 'loop' | 'parallel',
+            enabled: block.enabled ?? true,
             isPreviewSelected: isSelected,
             executionStatus: subflowExecutionStatus,
             lightweight,