simstudioai · emir-karabeg · Jan 22, 2026 · Jan 22, 2026
diff --git a/apps/sim/app/templates/components/template-card.tsx b/apps/sim/app/templates/components/template-card.tsx
@@ -207,7 +207,6 @@ function TemplateCardInner({
             isPannable={false}
             defaultZoom={0.8}
             fitPadding={0.2}
-            lightweight
           />
         ) : (
           <div className='h-full w-full bg-[var(--surface-4)]' />

diff --git a/...spaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx b/...spaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
@@ -16,8 +16,8 @@ import {
 import { redactApiKeys } from '@/lib/core/security/redaction'
 import { cn } from '@/lib/core/utils/cn'
 import {
-  BlockDetailsSidebar,
   getLeftmostBlockId,
+  PreviewEditor,
   WorkflowPreview,
 } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useExecutionSnapshot } from '@/hooks/queries/logs'
@@ -248,11 +248,10 @@ export function ExecutionSnapshot({
             cursorStyle='pointer'
             executedBlocks={blockExecutions}
             selectedBlockId={pinnedBlockId}
-            lightweight
           />
         </div>
         {pinnedBlockId && workflowState.blocks[pinnedBlockId] && (
-          <BlockDetailsSidebar
+          <PreviewEditor
             block={workflowState.blocks[pinnedBlockId]}
             executionData={blockExecutions[pinnedBlockId]}
             allBlockExecutions={blockExecutions}

diff --git a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
@@ -213,7 +213,6 @@ function TemplateCardInner({
             isPannable={false}
             defaultZoom={0.8}
             fitPadding={0.2}
-            lightweight
             cursorStyle='pointer'
           />
         ) : (

diff --git a/...components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/...components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -18,8 +18,8 @@ import {
 import { Skeleton } from '@/components/ui'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
 import {
-  BlockDetailsSidebar,
   getLeftmostBlockId,
+  PreviewEditor,
   WorkflowPreview,
 } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useDeploymentVersionState, useRevertToVersion } from '@/hooks/queries/workflows'
@@ -337,7 +337,7 @@ export function GeneralDeploy({
                   />
                 </div>
                 {expandedSelectedBlockId && workflowToShow.blocks?.[expandedSelectedBlockId] && (
-                  <BlockDetailsSidebar
+                  <PreviewEditor
                     block={workflowToShow.blocks[expandedSelectedBlockId]}
                     workflowVariables={workflowToShow.variables}
                     loops={workflowToShow.loops}

diff --git a/...mponents/panel/components/deploy/components/deploy-modal/components/template/template.tsx b/...mponents/panel/components/deploy/components/deploy-modal/components/template/template.tsx
@@ -446,7 +446,6 @@ const OGCaptureContainer = forwardRef<HTMLDivElement>((_, ref) => {
         isPannable={false}
         defaultZoom={0.8}
         fitPadding={0.2}
-        lightweight
       />
     </div>
   )

diff --git a/...s/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx b/...s/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
@@ -2,12 +2,13 @@ import { useMemo, useRef, useState } from 'react'
 import { Badge, Input } from '@/components/emcn'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
+import { extractInputFieldsFromBlocks } from '@/lib/workflows/input-format'
 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 { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
-import { useWorkflowInputFields } from '@/hooks/queries/workflows'
+import { useWorkflowState } from '@/hooks/queries/workflows'
 
 /**
  * Props for the InputMappingField component
@@ -70,7 +71,11 @@ export function InputMapping({
   const overlayRefs = useRef<Map<string, HTMLDivElement>>(new Map())
 
   const workflowId = typeof selectedWorkflowId === 'string' ? selectedWorkflowId : undefined
-  const { data: childInputFields = [], isLoading } = useWorkflowInputFields(workflowId)
+  const { data: workflowState, isLoading } = useWorkflowState(workflowId)
+  const childInputFields = useMemo(
+    () => (workflowState?.blocks ? extractInputFieldsFromBlocks(workflowState.blocks) : []),
+    [workflowState?.blocks]
+  )
   const [collapsedFields, setCollapsedFields] = useState<Record<string, boolean>>({})
 
   const valueObj: Record<string, string> = useMemo(() => {

diff --git a/...ponents/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/...ponents/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -29,6 +29,7 @@ import {
   type OAuthProvider,
   type OAuthService,
 } from '@/lib/oauth'
+import { extractInputFieldsFromBlocks } from '@/lib/workflows/input-format'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import {
   CheckboxList,
@@ -65,7 +66,7 @@ import { useForceRefreshMcpTools, useMcpServers, useStoredMcpTools } from '@/hoo
 import {
   useChildDeploymentStatus,
   useDeployChildWorkflow,
-  useWorkflowInputFields,
+  useWorkflowState,
   useWorkflows,
 } from '@/hooks/queries/workflows'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
@@ -771,7 +772,11 @@ function WorkflowInputMapperSyncWrapper({
   disabled: boolean
   workflowId: string
 }) {
-  const { data: inputFields = [], isLoading } = useWorkflowInputFields(workflowId)
+  const { data: workflowState, isLoading } = useWorkflowState(workflowId)
+  const inputFields = useMemo(
+    () => (workflowState?.blocks ? extractInputFieldsFromBlocks(workflowState.blocks) : []),
+    [workflowState?.blocks]
+  )
 
   const parsedValue = useMemo(() => {
     try {

diff --git a/...rkflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/...rkflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -68,7 +68,7 @@ export function SubflowEditor({
     <div className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
       {/* Subflow Editor Section */}
       <div ref={subBlocksRef} className='subblocks-section flex flex-1 flex-col overflow-hidden'>
-        <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[5px] pb-[8px]'>
+        <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[9px] pb-[8px]'>
           {/* Type Selection */}
           <div>
             <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>

diff --git a/.../app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/.../app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -2,7 +2,16 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { isEqual } from 'lodash'
-import { BookOpen, Check, ChevronDown, ChevronUp, Pencil } from 'lucide-react'
+import {
+  BookOpen,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Loader2,
+  Pencil,
+} from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { useShallow } from 'zustand/react/shallow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 import { Button, Tooltip } from '@/components/emcn'
@@ -29,8 +38,10 @@ import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/component
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
 import { getSubBlockStableKey } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import type { SubBlockType } from '@/blocks/types'
+import { useWorkflowState } from '@/hooks/queries/workflows'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { usePanelEditorStore } from '@/stores/panel'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -85,6 +96,14 @@ export function Editor() {
   // Get subflow display properties from configs
   const subflowConfig = isSubflow ? (currentBlock.type === 'loop' ? LoopTool : ParallelTool) : null
 
+  // Check if selected block is a workflow block
+  const isWorkflowBlock =
+    currentBlock && (currentBlock.type === 'workflow' || currentBlock.type === 'workflow_input')
+
+  // Get workspace ID from params
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
+
   // Refs for resize functionality
   const subBlocksRef = useRef<HTMLDivElement>(null)
 
@@ -254,11 +273,11 @@ export function Editor() {
 
   // Trigger rename mode when signaled from context menu
   useEffect(() => {
-    if (shouldFocusRename && currentBlock && !isSubflow) {
+    if (shouldFocusRename && currentBlock) {
       handleStartRename()
       setShouldFocusRename(false)
     }
-  }, [shouldFocusRename, currentBlock, isSubflow, handleStartRename, setShouldFocusRename])
+  }, [shouldFocusRename, currentBlock, handleStartRename, setShouldFocusRename])
 
   /**
    * Handles opening documentation link in a new secure tab.
@@ -270,6 +289,22 @@ export function Editor() {
     }
   }
 
+  // Get child workflow ID for workflow blocks
+  const childWorkflowId = isWorkflowBlock ? blockSubBlockValues?.workflowId : null
+
+  // Fetch child workflow state for preview (only for workflow blocks with a selected workflow)
+  const { data: childWorkflowState, isLoading: isLoadingChildWorkflow } =
+    useWorkflowState(childWorkflowId)
+
+  /**
+   * Handles opening the child workflow in a new tab.
+   */
+  const handleOpenChildWorkflow = useCallback(() => {
+    if (childWorkflowId && workspaceId) {
+      window.open(`/workspace/${workspaceId}/w/${childWorkflowId}`, '_blank', 'noopener,noreferrer')
+    }
+  }, [childWorkflowId, workspaceId])
+
   // Determine if connections are at minimum height (collapsed state)
   const isConnectionsAtMinHeight = connectionsHeight <= 35
 
@@ -322,7 +357,7 @@ export function Editor() {
         </div>
         <div className='flex shrink-0 items-center gap-[8px]'>
           {/* Rename button */}
-          {currentBlock && !isSubflow && (
+          {currentBlock && (
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <Button
@@ -408,7 +443,66 @@ export function Editor() {
             className='subblocks-section flex flex-1 flex-col overflow-hidden'
           >
             <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[12px] pb-[8px] [overflow-anchor:none]'>
-              {subBlocks.length === 0 ? (
+              {/* Workflow Preview - only for workflow blocks with a selected child workflow */}
+              {isWorkflowBlock && childWorkflowId && (
+                <>
+                  <div className='subblock-content flex flex-col gap-[9.5px]'>
+                    <div className='pl-[2px] font-medium text-[13px] text-[var(--text-primary)] leading-none'>
+                      Workflow Preview
+                    </div>
+                    <div className='relative h-[160px] overflow-hidden rounded-[4px] border border-[var(--border)]'>
+                      {isLoadingChildWorkflow ? (
+                        <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
+                          <Loader2 className='h-5 w-5 animate-spin text-[var(--text-tertiary)]' />
+                        </div>
+                      ) : childWorkflowState ? (
+                        <>
+                          <div className='[&_*:active]:!cursor-grabbing [&_*]:!cursor-grab [&_.react-flow__handle]:!hidden h-full w-full'>
+                            <WorkflowPreview
+                              workflowState={childWorkflowState}
+                              height={160}
+                              width='100%'
+                              isPannable={true}
+                              defaultZoom={0.6}
+                              fitPadding={0.15}
+                              cursorStyle='grab'
+                            />
+                          </div>
+                          <Tooltip.Root>
+                            <Tooltip.Trigger asChild>
+                              <Button
+                                type='button'
+                                variant='ghost'
+                                onClick={handleOpenChildWorkflow}
+                                className='absolute right-[6px] bottom-[6px] z-10 h-[24px] w-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover:bg-[var(--surface-4)]'
+                              >
+                                <ExternalLink className='h-[12px] w-[12px]' />
+                              </Button>
+                            </Tooltip.Trigger>
+                            <Tooltip.Content side='top'>Open workflow</Tooltip.Content>
+                          </Tooltip.Root>
+                        </>
+                      ) : (
+                        <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
+                          <span className='text-[13px] text-[var(--text-tertiary)]'>
+                            Unable to load preview
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                    <div
+                      className='h-[1.25px]'
+                      style={{
+                        backgroundImage:
+                          'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
+                      }}
+                    />
+                  </div>
+                </>
+              )}
+              {subBlocks.length === 0 && !isWorkflowBlock ? (
                 <div className='flex h-full items-center justify-center text-center text-[#8D8D8D] text-[13px]'>
                   This block has no subblocks
                 </div>

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block.tsx
@@ -21,11 +21,9 @@ interface WorkflowPreviewBlockData {
 }
 
 /**
- * Lightweight block component for workflow previews.
- * Renders block header, dummy subblocks skeleton, and handles.
- * Respects horizontalHandles and enabled state from workflow.
- * No heavy hooks, store subscriptions, or interactive features.
- * Used in template cards and other preview contexts for performance.
+ * Preview block component for workflow visualization.
+ * Renders block header, subblocks skeleton, and handles without
+ * hooks, store subscriptions, or interactive features.
  */
 function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>) {
   const {

diff --git a/...view/components/block-details-sidebar.tsx → ...nts/preview/components/preview-editor.tsx b/...view/components/block-details-sidebar.tsx → ...nts/preview/components/preview-editor.tsx
@@ -685,7 +685,7 @@ interface WorkflowVariable {
   value: unknown
 }
 
-interface BlockDetailsSidebarProps {
+interface PreviewEditorProps {
   block: BlockState
   executionData?: ExecutionData
   /** All block execution data for resolving variable references */
@@ -722,7 +722,7 @@ const DEFAULT_CONNECTIONS_HEIGHT = 150
 /**
  * Readonly sidebar panel showing block configuration using SubBlock components.
  */
-function BlockDetailsSidebarContent({
+function PreviewEditorContent({
   block,
   executionData,
   allBlockExecutions,
@@ -732,7 +732,7 @@ function BlockDetailsSidebarContent({
   parallels,
   isExecutionMode = false,
   onClose,
-}: BlockDetailsSidebarProps) {
+}: PreviewEditorProps) {
   // Convert Record<string, Variable> to Array<Variable> for iteration
   const normalizedWorkflowVariables = useMemo(() => {
     if (!workflowVariables) return []
@@ -998,6 +998,22 @@ function BlockDetailsSidebarContent({
     })
   }, [extractedRefs.envVars])
 
+  const rawValues = useMemo(() => {
+    return Object.entries(subBlockValues).reduce<Record<string, unknown>>((acc, [key, entry]) => {
+      if (entry && typeof entry === 'object' && 'value' in entry) {
+        acc[key] = (entry as { value: unknown }).value
+      } else {
+        acc[key] = entry
+      }
+      return acc
+    }, {})
+  }, [subBlockValues])
+
+  const canonicalIndex = useMemo(
+    () => buildCanonicalIndex(blockConfig?.subBlocks || []),
+    [blockConfig?.subBlocks]
+  )
+
   // Check if this is a subflow block (loop or parallel)
   const isSubflow = block.type === 'loop' || block.type === 'parallel'
   const loopConfig = block.type === 'loop' ? loops?.[block.id] : undefined
@@ -1079,21 +1095,6 @@ function BlockDetailsSidebarContent({
     )
   }
 
-  const rawValues = useMemo(() => {
-    return Object.entries(subBlockValues).reduce<Record<string, unknown>>((acc, [key, entry]) => {
-      if (entry && typeof entry === 'object' && 'value' in entry) {
-        acc[key] = (entry as { value: unknown }).value
-      } else {
-        acc[key] = entry
-      }
-      return acc
-    }, {})
-  }, [subBlockValues])
-
-  const canonicalIndex = useMemo(
-    () => buildCanonicalIndex(blockConfig.subBlocks),
-    [blockConfig.subBlocks]
-  )
   const canonicalModeOverrides = block.data?.canonicalModes
   const effectiveAdvanced =
     (block.advancedMode ?? false) ||
@@ -1371,12 +1372,12 @@ function BlockDetailsSidebarContent({
 }
 
 /**
- * Block details sidebar wrapped in ReactFlowProvider for hook compatibility.
+ * Preview editor wrapped in ReactFlowProvider for hook compatibility.
  */
-export function BlockDetailsSidebar(props: BlockDetailsSidebarProps) {
+export function PreviewEditor(props: PreviewEditorProps) {
   return (
     <ReactFlowProvider>
-      <BlockDetailsSidebarContent {...props} />
+      <PreviewEditorContent {...props} />
     </ReactFlowProvider>
   )
 }