From 12d529d0457969bfb19e0d079be979f374055ec2 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <78010029+emir-karabeg@users.noreply.github.com>
Date: Wed, 28 Jan 2026 15:41:46 -0800
Subject: [PATCH] fix: terminal spacing, subflow disabled in preview (#3055)

* fix: terminal spacing, subflow disabled in preview

* addressed comments
---
 .../components/terminal/terminal.tsx          |  4 +--
 .../components/subflow/subflow.tsx            | 25 ++++++++++++++++---
 .../preview-workflow/preview-workflow.tsx     |  1 +
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index 342d5e131..abe60c6a4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
+++ b/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}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
index 848e93c7f..e939b592a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
+++ b/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 */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/preview-workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/preview-workflow.tsx
index 68de80b5c..0e6948ac4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/preview-workflow.tsx
+++ b/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,