improvement(logs): improved logs ui bugs, added subflow disable UI (#2910)

* improvement(logs): improved logs ui bugs, added subflow disable UI

* added duplicate to action bar for subflows

Author: waleedlatif1

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

@@ -234,7 +234,7 @@ function ProgressBar({
       {segments.map((segment, index) => (
         <div
           key={index}
-          className='absolute h-full'
+          className='absolute h-full opacity-70'
           style={{
             left: `${segment.startPercent}%`,
             width: `${segment.widthPercent}%`,

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

@@ -257,7 +257,7 @@ export const LogDetails = memo(function LogDetails({
                         Version
                       </span>
                       <div className='flex w-0 flex-1 justify-end'>
-                        <span className='max-w-full truncate rounded-[6px] bg-[#14291B] px-[9px] py-[2px] font-medium text-[#86EFAC] text-[12px]'>
+                        <span className='max-w-full truncate rounded-[6px] bg-[#bbf7d0] px-[9px] py-[2px] font-medium text-[#15803d] text-[12px] dark:bg-[#14291B] dark:text-[#86EFAC]'>
                           {log.deploymentVersionName || `v${log.deploymentVersion}`}
                         </span>
                       </div>

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

@@ -19,6 +19,7 @@ import { DatePicker } from '@/components/emcn/components/date-picker/date-picker
 import { cn } from '@/lib/core/utils/cn'
 import { hasActiveFilters } from '@/lib/logs/filters'
 import { getTriggerOptions } from '@/lib/logs/get-trigger-options'
+import { type LogStatus, STATUS_CONFIG } from '@/app/workspace/[workspaceId]/logs/utils'
 import { getBlock } from '@/blocks/registry'
 import { useFolderStore } from '@/stores/folders/store'
 import { useFilterStore } from '@/stores/logs/filters/store'
@@ -211,12 +212,12 @@ export function LogsToolbar({
   }, [level])
 
   const statusOptions: ComboboxOption[] = useMemo(
-    () => [
-      { value: 'error', label: 'Error', icon: getColorIcon('var(--text-error)') },
-      { value: 'info', label: 'Info', icon: getColorIcon('var(--terminal-status-info-color)') },
-      { value: 'running', label: 'Running', icon: getColorIcon('#22c55e') },
-      { value: 'pending', label: 'Pending', icon: getColorIcon('#f59e0b') },
-    ],
+    () =>
+      (Object.keys(STATUS_CONFIG) as LogStatus[]).map((status) => ({
+        value: status,
+        label: STATUS_CONFIG[status].label,
+        icon: getColorIcon(STATUS_CONFIG[status].color),
+      })),
     []
   )
 
@@ -242,12 +243,8 @@ export function LogsToolbar({
 
   const selectedStatusColor = useMemo(() => {
     if (selectedStatuses.length !== 1) return null
-    const status = selectedStatuses[0]
-    if (status === 'error') return 'var(--text-error)'
-    if (status === 'info') return 'var(--terminal-status-info-color)'
-    if (status === 'running') return '#22c55e'
-    if (status === 'pending') return '#f59e0b'
-    return null
+    const status = selectedStatuses[0] as LogStatus
+    return STATUS_CONFIG[status]?.color ?? null
   }, [selectedStatuses])
 
   const workflowOptions: ComboboxOption[] = useMemo(

apps/sim/app/workspace/[workspaceId]/logs/utils.ts

@@ -5,7 +5,6 @@ import { getIntegrationMetadata } from '@/lib/logs/get-trigger-options'
 import { getBlock } from '@/blocks/registry'
 import { CORE_TRIGGER_TYPES } from '@/stores/logs/filters/types'
 
-/** Column configuration for logs table - shared between header and rows */
 export const LOG_COLUMNS = {
   date: { width: 'w-[8%]', minWidth: 'min-w-[70px]', label: 'Date' },
   time: { width: 'w-[12%]', minWidth: 'min-w-[90px]', label: 'Time' },
@@ -16,10 +15,8 @@ export const LOG_COLUMNS = {
   duration: { width: 'w-[20%]', minWidth: 'min-w-[100px]', label: 'Duration' },
 } as const
 
-/** Type-safe column key derived from LOG_COLUMNS */
 export type LogColumnKey = keyof typeof LOG_COLUMNS
 
-/** Ordered list of column keys for rendering table headers */
 export const LOG_COLUMN_ORDER: readonly LogColumnKey[] = [
   'date',
   'time',
@@ -30,7 +27,6 @@ export const LOG_COLUMN_ORDER: readonly LogColumnKey[] = [
   'duration',
 ] as const
 
-/** Possible execution status values for workflow logs */
 export type LogStatus = 'error' | 'pending' | 'running' | 'info' | 'cancelled'
 
 /**
@@ -53,30 +49,28 @@ export function getDisplayStatus(status: string | null | undefined): LogStatus {
   }
 }
 
-/** Configuration mapping log status to Badge variant and display label */
-const STATUS_VARIANT_MAP: Record<
+export const STATUS_CONFIG: Record<
   LogStatus,
-  { variant: React.ComponentProps<typeof Badge>['variant']; label: string }
+  { variant: React.ComponentProps<typeof Badge>['variant']; label: string; color: string }
 > = {
-  error: { variant: 'red', label: 'Error' },
-  pending: { variant: 'amber', label: 'Pending' },
-  running: { variant: 'green', label: 'Running' },
-  cancelled: { variant: 'gray', label: 'Cancelled' },
-  info: { variant: 'gray', label: 'Info' },
+  error: { variant: 'red', label: 'Error', color: 'var(--text-error)' },
+  pending: { variant: 'amber', label: 'Pending', color: '#f59e0b' },
+  running: { variant: 'green', label: 'Running', color: '#22c55e' },
+  cancelled: { variant: 'orange', label: 'Cancelled', color: '#f97316' },
+  info: { variant: 'gray', label: 'Info', color: 'var(--terminal-status-info-color)' },
 }
 
-/** Configuration mapping core trigger types to Badge color variants */
 const TRIGGER_VARIANT_MAP: Record<string, React.ComponentProps<typeof Badge>['variant']> = {
   manual: 'gray-secondary',
   api: 'blue',
   schedule: 'green',
   chat: 'purple',
   webhook: 'orange',
+  mcp: 'cyan',
   a2a: 'teal',
 }
 
 interface StatusBadgeProps {
-  /** The execution status to display */
   status: LogStatus
 }
 
@@ -86,14 +80,13 @@ interface StatusBadgeProps {
  * @returns A Badge with dot indicator and status label
  */
 export const StatusBadge = React.memo(({ status }: StatusBadgeProps) => {
-  const config = STATUS_VARIANT_MAP[status]
+  const config = STATUS_CONFIG[status]
   return React.createElement(Badge, { variant: config.variant, dot: true }, config.label)
 })
 
 StatusBadge.displayName = 'StatusBadge'
 
 interface TriggerBadgeProps {
-  /** The trigger type identifier (e.g., 'manual', 'api', or integration block type) */
   trigger: string
 }
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -142,7 +142,7 @@ export const ActionBar = memo(
           </Tooltip.Root>
         )}
 
-        {!isStartBlock && !isResponseBlock && !isSubflowBlock && (
+        {!isStartBlock && !isResponseBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
@@ -213,6 +213,29 @@ export const ActionBar = memo(
           </Tooltip.Root>
         )}
 
+        {isSubflowBlock && (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (!disabled) {
+                    collaborativeBatchToggleBlockEnabled([blockId])
+                  }
+                }}
+                className={ACTION_BUTTON_STYLES}
+                disabled={disabled}
+              >
+                {isEnabled ? <Circle className={ICON_SIZE} /> : <CircleOff className={ICON_SIZE} />}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>
+              {getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
+            </Tooltip.Content>
+          </Tooltip.Root>
+        )}
+
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Button

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx

@@ -1,6 +1,7 @@
 import { memo, useMemo, useRef } from 'react'
 import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { Handle, type NodeProps, Position, useReactFlow } from 'reactflow'
+import { Badge } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 import { type DiffStatus, hasDiffStatus } from '@/lib/workflows/diff/types'
@@ -78,6 +79,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
       ? currentBlock.is_diff
       : undefined
 
+  const isEnabled = currentBlock?.enabled ?? true
   const isPreview = data?.isPreview || false
 
   // Focus state
@@ -184,14 +186,21 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
             <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: isEnabled ? blockIconBg : 'gray' }}
               >
                 <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]',
+                  !isEnabled && 'text-[var(--text-muted)]'
+                )}
+                title={blockName}
+              >
                 {blockName}
               </span>
             </div>
+            {!isEnabled && <Badge variant='gray-secondary'>disabled</Badge>}
           </div>
 
           {!isPreview && (

apps/sim/components/emcn/components/badge/badge.tsx

@@ -25,7 +25,7 @@ const badgeVariants = cva(
         orange: `${STATUS_BASE} bg-[#fed7aa] text-[#c2410c] dark:bg-[rgba(249,115,22,0.2)] dark:text-[#fdba74]`,
         amber: `${STATUS_BASE} bg-[#fde68a] text-[#a16207] dark:bg-[rgba(245,158,11,0.2)] dark:text-[#fcd34d]`,
         teal: `${STATUS_BASE} bg-[#99f6e4] text-[#0f766e] dark:bg-[rgba(20,184,166,0.2)] dark:text-[#5eead4]`,
-        cyan: `${STATUS_BASE} bg-[#a5f3fc] text-[#0e7490] dark:bg-[rgba(14,165,233,0.2)] dark:text-[#7dd3fc]`,
+        cyan: `${STATUS_BASE} bg-[var(--surface-4)] text-[#0891b2] dark:bg-[rgba(14,165,233,0.2)] dark:text-[#7dd3fc]`,
         'gray-secondary': `${STATUS_BASE} bg-[var(--surface-4)] text-[var(--text-secondary)]`,
       },
       size: {

apps/sim/lib/workflows/persistence/utils.test.ts

@@ -376,6 +376,7 @@ describe('Database Helpers', () => {
         forEachItems: '',
         doWhileCondition: '',
         whileCondition: '',
+        enabled: true,
       })
 
       expect(result?.parallels['parallel-1']).toEqual({
@@ -384,6 +385,7 @@ describe('Database Helpers', () => {
         count: 5,
         distribution: ['item1', 'item2'],
         parallelType: 'count',
+        enabled: true,
       })
     })
 

apps/sim/lib/workflows/persistence/utils.ts

@@ -273,6 +273,7 @@ export async function loadWorkflowFromNormalizedTables(
           forEachItems: (config as Loop).forEachItems ?? '',
           whileCondition: (config as Loop).whileCondition ?? '',
           doWhileCondition: (config as Loop).doWhileCondition ?? '',
+          enabled: migratedBlocks[subflow.id]?.enabled ?? true,
         }
         loops[subflow.id] = loop
 
@@ -301,6 +302,7 @@ export async function loadWorkflowFromNormalizedTables(
             (config as Parallel).parallelType === 'collection'
               ? (config as Parallel).parallelType
               : 'count',
+          enabled: migratedBlocks[subflow.id]?.enabled ?? true,
         }
         parallels[subflow.id] = parallel
       } else {

apps/sim/stores/logs/filters/types.ts

@@ -172,7 +172,14 @@ export type TimeRange =
   | 'All time'
   | 'Custom range'
 
-export type LogLevel = 'error' | 'info' | 'running' | 'pending' | 'all' | (string & {})
+export type LogLevel =
+  | 'error'
+  | 'info'
+  | 'running'
+  | 'pending'
+  | 'cancelled'
+  | 'all'
+  | (string & {})
 /** Core trigger types for workflow execution */
 export const CORE_TRIGGER_TYPES = [
   'manual',