improvement(preview): render nested values like input format correctly in workflow execution preview (#3154)

* improvement(preview): nested workflow snapshots/preview when not executed

* improvements to resolve nested subblock values

* few more things

* add try catch

* fix fallback case

* deps

Author: icecrasher321

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

@@ -35,6 +35,7 @@ interface CredentialSelectorProps {
   disabled?: boolean
   isPreview?: boolean
   previewValue?: any | null
+  previewContextValues?: Record<string, unknown>
 }
 
 export function CredentialSelector({
@@ -43,6 +44,7 @@ export function CredentialSelector({
   disabled = false,
   isPreview = false,
   previewValue,
+  previewContextValues,
 }: CredentialSelectorProps) {
   const [showOAuthModal, setShowOAuthModal] = useState(false)
   const [editingValue, setEditingValue] = useState('')
@@ -67,7 +69,11 @@ export function CredentialSelector({
     canUseCredentialSets
   )
 
-  const { depsSatisfied, dependsOn } = useDependsOnGate(blockId, subBlock, { disabled, isPreview })
+  const { depsSatisfied, dependsOn } = useDependsOnGate(blockId, subBlock, {
+    disabled,
+    isPreview,
+    previewContextValues,
+  })
   const hasDependencies = dependsOn.length > 0
 
   const effectiveDisabled = disabled || (hasDependencies && !depsSatisfied)

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

@@ -5,6 +5,7 @@ import { Tooltip } from '@/components/emcn'
 import { SelectorCombobox } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
+import { resolvePreviewContextValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import type { SubBlockConfig } from '@/blocks/types'
 import type { SelectorContext } from '@/hooks/selectors/types'
 
@@ -33,7 +34,9 @@ export function DocumentSelector({
     previewContextValues,
   })
   const [knowledgeBaseIdFromStore] = useSubBlockValue(blockId, 'knowledgeBaseId')
-  const knowledgeBaseIdValue = previewContextValues?.knowledgeBaseId ?? knowledgeBaseIdFromStore
+  const knowledgeBaseIdValue = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.knowledgeBaseId)
+    : knowledgeBaseIdFromStore
   const normalizedKnowledgeBaseId =
     typeof knowledgeBaseIdValue === 'string' && knowledgeBaseIdValue.trim().length > 0
       ? knowledgeBaseIdValue

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx

@@ -17,6 +17,7 @@ import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
+import { resolvePreviewContextValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useKnowledgeBaseTagDefinitions } from '@/hooks/kb/use-knowledge-base-tag-definitions'
@@ -77,7 +78,9 @@ export function DocumentTagEntry({
   })
 
   const [knowledgeBaseIdFromStore] = useSubBlockValue(blockId, 'knowledgeBaseId')
-  const knowledgeBaseIdValue = previewContextValues?.knowledgeBaseId ?? knowledgeBaseIdFromStore
+  const knowledgeBaseIdValue = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.knowledgeBaseId)
+    : knowledgeBaseIdFromStore
   const knowledgeBaseId =
     typeof knowledgeBaseIdValue === 'string' && knowledgeBaseIdValue.trim().length > 0
       ? knowledgeBaseIdValue

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

@@ -9,6 +9,7 @@ import { SelectorCombobox } from '@/app/workspace/[workspaceId]/w/[workflowId]/c
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import { useForeignCredential } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-foreign-credential'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
+import { resolvePreviewContextValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import { getBlock } from '@/blocks/registry'
 import type { SubBlockConfig } from '@/blocks/types'
 import { isDependency } from '@/blocks/utils'
@@ -62,42 +63,56 @@ export function FileSelectorInput({
 
   const [domainValueFromStore] = useSubBlockValue(blockId, 'domain')
 
-  const connectedCredential = previewContextValues?.credential ?? blockValues.credential
-  const domainValue = previewContextValues?.domain ?? domainValueFromStore
+  const connectedCredential = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.credential)
+    : blockValues.credential
+  const domainValue = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.domain)
+    : domainValueFromStore
 
   const teamIdValue = useMemo(
     () =>
-      previewContextValues?.teamId ??
-      resolveDependencyValue('teamId', blockValues, canonicalIndex, canonicalModeOverrides),
-    [previewContextValues?.teamId, blockValues, canonicalIndex, canonicalModeOverrides]
+      previewContextValues
+        ? resolvePreviewContextValue(previewContextValues.teamId)
+        : resolveDependencyValue('teamId', blockValues, canonicalIndex, canonicalModeOverrides),
+    [previewContextValues, blockValues, canonicalIndex, canonicalModeOverrides]
   )
 
   const siteIdValue = useMemo(
     () =>
-      previewContextValues?.siteId ??
-      resolveDependencyValue('siteId', blockValues, canonicalIndex, canonicalModeOverrides),
-    [previewContextValues?.siteId, blockValues, canonicalIndex, canonicalModeOverrides]
+      previewContextValues
+        ? resolvePreviewContextValue(previewContextValues.siteId)
+        : resolveDependencyValue('siteId', blockValues, canonicalIndex, canonicalModeOverrides),
+    [previewContextValues, blockValues, canonicalIndex, canonicalModeOverrides]
   )
 
   const collectionIdValue = useMemo(
     () =>
-      previewContextValues?.collectionId ??
-      resolveDependencyValue('collectionId', blockValues, canonicalIndex, canonicalModeOverrides),
-    [previewContextValues?.collectionId, blockValues, canonicalIndex, canonicalModeOverrides]
+      previewContextValues
+        ? resolvePreviewContextValue(previewContextValues.collectionId)
+        : resolveDependencyValue(
+            'collectionId',
+            blockValues,
+            canonicalIndex,
+            canonicalModeOverrides
+          ),
+    [previewContextValues, blockValues, canonicalIndex, canonicalModeOverrides]
   )
 
   const projectIdValue = useMemo(
     () =>
-      previewContextValues?.projectId ??
-      resolveDependencyValue('projectId', blockValues, canonicalIndex, canonicalModeOverrides),
-    [previewContextValues?.projectId, blockValues, canonicalIndex, canonicalModeOverrides]
+      previewContextValues
+        ? resolvePreviewContextValue(previewContextValues.projectId)
+        : resolveDependencyValue('projectId', blockValues, canonicalIndex, canonicalModeOverrides),
+    [previewContextValues, blockValues, canonicalIndex, canonicalModeOverrides]
   )
 
   const planIdValue = useMemo(
     () =>
-      previewContextValues?.planId ??
-      resolveDependencyValue('planId', blockValues, canonicalIndex, canonicalModeOverrides),
-    [previewContextValues?.planId, blockValues, canonicalIndex, canonicalModeOverrides]
+      previewContextValues
+        ? resolvePreviewContextValue(previewContextValues.planId)
+        : resolveDependencyValue('planId', blockValues, canonicalIndex, canonicalModeOverrides),
+    [previewContextValues, blockValues, canonicalIndex, canonicalModeOverrides]
   )
 
   const normalizedCredentialId =

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

@@ -6,6 +6,7 @@ import { SelectorCombobox } from '@/app/workspace/[workspaceId]/w/[workflowId]/c
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import { useForeignCredential } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-foreign-credential'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
+import { resolvePreviewContextValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import type { SubBlockConfig } from '@/blocks/types'
 import { resolveSelectorForSubBlock } from '@/hooks/selectors/resolution'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
@@ -17,6 +18,7 @@ interface FolderSelectorInputProps {
   disabled?: boolean
   isPreview?: boolean
   previewValue?: any | null
+  previewContextValues?: Record<string, unknown>
 }
 
 export function FolderSelectorInput({
@@ -25,9 +27,13 @@ export function FolderSelectorInput({
   disabled = false,
   isPreview = false,
   previewValue,
+  previewContextValues,
 }: FolderSelectorInputProps) {
   const [storeValue] = useSubBlockValue(blockId, subBlock.id)
-  const [connectedCredential] = useSubBlockValue(blockId, 'credential')
+  const [credentialFromStore] = useSubBlockValue(blockId, 'credential')
+  const connectedCredential = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.credential)
+    : credentialFromStore
   const { collaborativeSetSubblockValue } = useCollaborativeWorkflow()
   const { activeWorkflowId } = useWorkflowRegistry()
   const [selectedFolderId, setSelectedFolderId] = useState<string>('')
@@ -47,7 +53,11 @@ export function FolderSelectorInput({
   )
 
   // Central dependsOn gating
-  const { finalDisabled } = useDependsOnGate(blockId, subBlock, { disabled, isPreview })
+  const { finalDisabled } = useDependsOnGate(blockId, subBlock, {
+    disabled,
+    isPreview,
+    previewContextValues,
+  })
 
   // Get the current value from the store or prop value if in preview mode
   useEffect(() => {

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

@@ -7,6 +7,7 @@ import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
+import { resolvePreviewContextValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { useWorkflowState } from '@/hooks/queries/workflows'
 
@@ -37,6 +38,8 @@ interface InputMappingProps {
   isPreview?: boolean
   previewValue?: Record<string, unknown>
   disabled?: boolean
+  /** Sub-block values from the preview context for resolving sibling sub-block values */
+  previewContextValues?: Record<string, unknown>
 }
 
 /**
@@ -50,9 +53,13 @@ export function InputMapping({
   isPreview = false,
   previewValue,
   disabled = false,
+  previewContextValues,
 }: InputMappingProps) {
   const [mapping, setMapping] = useSubBlockValue(blockId, subBlockId)
-  const [selectedWorkflowId] = useSubBlockValue(blockId, 'workflowId')
+  const [storeWorkflowId] = useSubBlockValue(blockId, 'workflowId')
+  const selectedWorkflowId = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.workflowId)
+    : storeWorkflowId
 
   const inputController = useSubBlockInput({
     blockId,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx

@@ -17,6 +17,7 @@ import { type FilterFieldType, getOperatorsForFieldType } from '@/lib/knowledge/
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
+import { resolvePreviewContextValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useKnowledgeBaseTagDefinitions } from '@/hooks/kb/use-knowledge-base-tag-definitions'
@@ -69,7 +70,9 @@ export function KnowledgeTagFilters({
   const overlayRefs = useRef<Record<string, HTMLDivElement>>({})
 
   const [knowledgeBaseIdFromStore] = useSubBlockValue(blockId, 'knowledgeBaseId')
-  const knowledgeBaseIdValue = previewContextValues?.knowledgeBaseId ?? knowledgeBaseIdFromStore
+  const knowledgeBaseIdValue = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.knowledgeBaseId)
+    : knowledgeBaseIdFromStore
   const knowledgeBaseId =
     typeof knowledgeBaseIdValue === 'string' && knowledgeBaseIdValue.trim().length > 0
       ? knowledgeBaseIdValue

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx

@@ -6,6 +6,7 @@ import { cn } from '@/lib/core/utils/cn'
 import { LongInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input'
 import { ShortInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
+import { resolvePreviewContextValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useMcpTools } from '@/hooks/mcp/use-mcp-tools'
 import { formatParameterLabel } from '@/tools/params'
@@ -18,6 +19,7 @@ interface McpDynamicArgsProps {
   disabled?: boolean
   isPreview?: boolean
   previewValue?: any
+  previewContextValues?: Record<string, unknown>
 }
 
 /**
@@ -47,12 +49,19 @@ export function McpDynamicArgs({
   disabled = false,
   isPreview = false,
   previewValue,
+  previewContextValues,
 }: McpDynamicArgsProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const { mcpTools, isLoading } = useMcpTools(workspaceId)
-  const [selectedTool] = useSubBlockValue(blockId, 'tool')
-  const [cachedSchema] = useSubBlockValue(blockId, '_toolSchema')
+  const [toolFromStore] = useSubBlockValue(blockId, 'tool')
+  const selectedTool = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.tool)
+    : toolFromStore
+  const [schemaFromStore] = useSubBlockValue(blockId, '_toolSchema')
+  const cachedSchema = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues._toolSchema)
+    : schemaFromStore
   const [toolArgs, setToolArgs] = useSubBlockValue(blockId, subBlockId)
 
   const selectedToolConfig = mcpTools.find((tool) => tool.id === selectedTool)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { useParams } from 'next/navigation'
 import { Combobox } from '@/components/emcn/components'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
+import { resolvePreviewContextValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useMcpTools } from '@/hooks/mcp/use-mcp-tools'
 
@@ -13,6 +14,7 @@ interface McpToolSelectorProps {
   disabled?: boolean
   isPreview?: boolean
   previewValue?: string | null
+  previewContextValues?: Record<string, unknown>
 }
 
 export function McpToolSelector({
@@ -21,6 +23,7 @@ export function McpToolSelector({
   disabled = false,
   isPreview = false,
   previewValue,
+  previewContextValues,
 }: McpToolSelectorProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
@@ -31,7 +34,10 @@ export function McpToolSelector({
   const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlock.id)
   const [, setSchemaCache] = useSubBlockValue(blockId, '_toolSchema')
 
-  const [serverValue] = useSubBlockValue(blockId, 'server')
+  const [serverFromStore] = useSubBlockValue(blockId, 'server')
+  const serverValue = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.server)
+    : serverFromStore
 
   const label = subBlock.placeholder || 'Select tool'
 

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

@@ -9,6 +9,7 @@ import { SelectorCombobox } from '@/app/workspace/[workspaceId]/w/[workflowId]/c
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import { useForeignCredential } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-foreign-credential'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
+import { resolvePreviewContextValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import { getBlock } from '@/blocks/registry'
 import type { SubBlockConfig } from '@/blocks/types'
 import { resolveSelectorForSubBlock } from '@/hooks/selectors/resolution'
@@ -55,14 +56,19 @@ export function ProjectSelectorInput({
     return (workflowValues as Record<string, Record<string, unknown>>)[blockId] || {}
   })
 
-  const connectedCredential = previewContextValues?.credential ?? blockValues.credential
-  const jiraDomain = previewContextValues?.domain ?? jiraDomainFromStore
+  const connectedCredential = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.credential)
+    : blockValues.credential
+  const jiraDomain = previewContextValues
+    ? resolvePreviewContextValue(previewContextValues.domain)
+    : jiraDomainFromStore
 
   const linearTeamId = useMemo(
     () =>
-      previewContextValues?.teamId ??
-      resolveDependencyValue('teamId', blockValues, canonicalIndex, canonicalModeOverrides),
-    [previewContextValues?.teamId, blockValues, canonicalIndex, canonicalModeOverrides]
+      previewContextValues
+        ? resolvePreviewContextValue(previewContextValues.teamId)
+        : resolveDependencyValue('teamId', blockValues, canonicalIndex, canonicalModeOverrides),
+    [previewContextValues, blockValues, canonicalIndex, canonicalModeOverrides]
   )
 
   const serviceId = subBlock.serviceId || ''