feat(workflow-block): preview (#2935)

2026-01-22 05:18:08 -05:00 · 2026-01-21 19:12:28 -08:00
parent 900d3ef9ea
commit 2f0f246002
16 changed files with 233 additions and 206 deletions
--- 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)]' />
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/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}
--- 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'
          />
        ) : (
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/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}
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/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>
  )
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/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(() => {
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/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 {
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/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)]'>
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/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>
--- 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 {
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.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>
  )
 }
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/subflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/subflow.tsx
@@ -15,10 +15,9 @@ interface WorkflowPreviewSubflowData {
 }

 /**
- * Lightweight subflow component for workflow previews.
- * Matches the styling of the actual SubflowNodeComponent but without
- * hooks, store subscriptions, or interactive features.
- * Used in template cards and other preview contexts for performance.
+ * Preview subflow component for workflow visualization.
+ * Renders loop/parallel containers without hooks, store subscriptions,
+ * or interactive features.
 */
 function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowData>) {
  const { name, width = 500, height = 300, kind, isPreviewSelected = false } = data
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/index.ts
@@ -1,2 +1,2 @@
-export { BlockDetailsSidebar } from './components/block-details-sidebar'
+export { PreviewEditor } from './components/preview-editor'
 export { getLeftmostBlockId, WorkflowPreview } from './preview'
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
@@ -15,14 +15,10 @@ import 'reactflow/dist/style.css'
 import { createLogger } from '@sim/logger'
 import { cn } from '@/lib/core/utils/cn'
 import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS } from '@/lib/workflows/blocks/block-dimensions'
-import { NoteBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block'
-import { SubflowNodeComponent } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node'
-import { WorkflowBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block'
 import { WorkflowEdge } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge'
 import { estimateBlockDimensions } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
 import { WorkflowPreviewBlock } from '@/app/workspace/[workspaceId]/w/components/preview/components/block'
 import { WorkflowPreviewSubflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/subflow'
-import { getBlock } from '@/blocks'
 import type { BlockState, WorkflowState } from '@/stores/workflows/workflow/types'

 const logger = createLogger('WorkflowPreview')
@@ -134,8 +130,6 @@ interface WorkflowPreviewProps {
  onNodeContextMenu?: (blockId: string, mousePosition: { x: number; y: number }) => void
  /** Callback when the canvas (empty area) is clicked */
  onPaneClick?: () => void
-  /** Use lightweight blocks for better performance in template cards */
-  lightweight?: boolean
  /** Cursor style to show when hovering the canvas */
  cursorStyle?: 'default' | 'pointer' | 'grab'
  /** Map of executed block IDs to their status for highlighting the execution path */
@@ -145,19 +139,10 @@ interface WorkflowPreviewProps {
 }

 /**
- * Full node types with interactive WorkflowBlock for detailed previews
+ * Preview node types using minimal components without hooks or store subscriptions.
+ * This prevents interaction issues while allowing canvas panning and node clicking.
 */
-const fullNodeTypes: NodeTypes = {
-  workflowBlock: WorkflowBlock,
-  noteBlock: NoteBlock,
-  subflowNode: SubflowNodeComponent,
-}
-
-/**
- * Lightweight node types for template cards and other high-volume previews.
- * Uses minimal components without hooks or store subscriptions.
- */
-const lightweightNodeTypes: NodeTypes = {
+const previewNodeTypes: NodeTypes = {
  workflowBlock: WorkflowPreviewBlock,
  noteBlock: WorkflowPreviewBlock,
  subflowNode: WorkflowPreviewSubflow,
@@ -172,17 +157,19 @@ const edgeTypes: EdgeTypes = {
 interface FitViewOnChangeProps {
  nodeIds: string
  fitPadding: number
+  containerRef: React.RefObject<HTMLDivElement | null>
 }

 /**
- * Helper component that calls fitView when the set of nodes changes.
+ * Helper component that calls fitView when the set of nodes changes or when the container resizes.
 * Only triggers on actual node additions/removals, not on selection changes.
 * Must be rendered inside ReactFlowProvider.
 */
-function FitViewOnChange({ nodeIds, fitPadding }: FitViewOnChangeProps) {
+function FitViewOnChange({ nodeIds, fitPadding, containerRef }: FitViewOnChangeProps) {
  const { fitView } = useReactFlow()
  const lastNodeIdsRef = useRef<string | null>(null)

+  // Fit view when nodes change
  useEffect(() => {
    if (!nodeIds.length) return
    const shouldFit = lastNodeIdsRef.current !== nodeIds
@@ -195,6 +182,27 @@ function FitViewOnChange({ nodeIds, fitPadding }: FitViewOnChangeProps) {
    return () => clearTimeout(timeoutId)
  }, [nodeIds, fitPadding, fitView])

+  // Fit view when container resizes (debounced to avoid excessive calls during drag)
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (timeoutId) clearTimeout(timeoutId)
+      timeoutId = setTimeout(() => {
+        fitView({ padding: fitPadding, duration: 150 })
+      }, 100)
+    })
+
+    resizeObserver.observe(container)
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId)
+      resizeObserver.disconnect()
+    }
+  }, [containerRef, fitPadding, fitView])
+
  return null
 }

@@ -210,15 +218,12 @@ export function WorkflowPreview({
  onNodeClick,
  onNodeContextMenu,
  onPaneClick,
-  lightweight = false,
  cursorStyle = 'grab',
  executedBlocks,
  selectedBlockId,
 }: WorkflowPreviewProps) {
-  const nodeTypes = useMemo(
-    () => (lightweight ? lightweightNodeTypes : fullNodeTypes),
-    [lightweight]
-  )
+  const containerRef = useRef<HTMLDivElement>(null)
+  const nodeTypes = previewNodeTypes
  const isValidWorkflowState = workflowState?.blocks && workflowState.edges

  const blocksStructure = useMemo(() => {
@@ -288,119 +293,28 @@ export function WorkflowPreview({

      const absolutePosition = calculateAbsolutePosition(block, workflowState.blocks)

-      if (lightweight) {
-        if (block.type === 'loop' || block.type === 'parallel') {
-          const isSelected = selectedBlockId === blockId
-          const dimensions = calculateContainerDimensions(blockId, workflowState.blocks)
-          nodeArray.push({
-            id: blockId,
-            type: 'subflowNode',
-            position: absolutePosition,
-            draggable: false,
-            data: {
-              name: block.name,
-              width: dimensions.width,
-              height: dimensions.height,
-              kind: block.type as 'loop' | 'parallel',
-              isPreviewSelected: isSelected,
-            },
-          })
-          return
-        }
-
-        const isSelected = selectedBlockId === blockId
-
-        let lightweightExecutionStatus: ExecutionStatus | undefined
-        if (executedBlocks) {
-          const blockExecution = executedBlocks[blockId]
-          if (blockExecution) {
-            if (blockExecution.status === 'error') {
-              lightweightExecutionStatus = 'error'
-            } else if (blockExecution.status === 'success') {
-              lightweightExecutionStatus = 'success'
-            } else {
-              lightweightExecutionStatus = 'not-executed'
-            }
-          } else {
-            lightweightExecutionStatus = 'not-executed'
-          }
-        }
-
-        nodeArray.push({
-          id: blockId,
-          type: 'workflowBlock',
-          position: absolutePosition,
-          draggable: false,
-          // Blocks inside subflows need higher z-index to appear above the container
-          zIndex: block.data?.parentId ? 10 : undefined,
-          data: {
-            type: block.type,
-            name: block.name,
-            isTrigger: block.triggerMode === true,
-            horizontalHandles: block.horizontalHandles ?? false,
-            enabled: block.enabled ?? true,
-            isPreviewSelected: isSelected,
-            executionStatus: lightweightExecutionStatus,
-          },
-        })
-        return
-      }
-
-      if (block.type === 'loop') {
+      // Handle loop/parallel containers
+      if (block.type === 'loop' || block.type === 'parallel') {
        const isSelected = selectedBlockId === blockId
        const dimensions = calculateContainerDimensions(blockId, workflowState.blocks)
        nodeArray.push({
          id: blockId,
          type: 'subflowNode',
          position: absolutePosition,
-          parentId: block.data?.parentId,
-          extent: block.data?.extent || undefined,
          draggable: false,
          data: {
-            ...block.data,
            name: block.name,
            width: dimensions.width,
            height: dimensions.height,
-            state: 'valid',
-            isPreview: true,
+            kind: block.type as 'loop' | 'parallel',
            isPreviewSelected: isSelected,
-            kind: 'loop',
          },
        })
        return
      }

-      if (block.type === 'parallel') {
-        const isSelected = selectedBlockId === blockId
-        const dimensions = calculateContainerDimensions(blockId, workflowState.blocks)
-        nodeArray.push({
-          id: blockId,
-          type: 'subflowNode',
-          position: absolutePosition,
-          parentId: block.data?.parentId,
-          extent: block.data?.extent || undefined,
-          draggable: false,
-          data: {
-            ...block.data,
-            name: block.name,
-            width: dimensions.width,
-            height: dimensions.height,
-            state: 'valid',
-            isPreview: true,
-            isPreviewSelected: isSelected,
-            kind: 'parallel',
-          },
-        })
-        return
-      }
-
-      const blockConfig = getBlock(block.type)
-      if (!blockConfig) {
-        logger.error(`No configuration found for block type: ${block.type}`, { blockId })
-        return
-      }
-
-      const nodeType = block.type === 'note' ? 'noteBlock' : 'workflowBlock'
+      // Handle regular blocks
+      const isSelected = selectedBlockId === blockId

      let executionStatus: ExecutionStatus | undefined
      if (executedBlocks) {
@@ -418,24 +332,20 @@ export function WorkflowPreview({
        }
      }

-      const isSelected = selectedBlockId === blockId
-
      nodeArray.push({
        id: blockId,
-        type: nodeType,
+        type: 'workflowBlock',
        position: absolutePosition,
        draggable: false,
        // Blocks inside subflows need higher z-index to appear above the container
        zIndex: block.data?.parentId ? 10 : undefined,
        data: {
          type: block.type,
-          config: blockConfig,
          name: block.name,
-          blockState: block,
-          canEdit: false,
-          isPreview: true,
+          isTrigger: block.triggerMode === true,
+          horizontalHandles: block.horizontalHandles ?? false,
+          enabled: block.enabled ?? true,
          isPreviewSelected: isSelected,
-          subBlockValues: block.subBlocks ?? {},
          executionStatus,
        },
      })
@@ -448,7 +358,6 @@ export function WorkflowPreview({
    parallelsStructure,
    workflowState.blocks,
    isValidWorkflowState,
-    lightweight,
    executedBlocks,
    selectedBlockId,
  ])
@@ -506,6 +415,7 @@ export function WorkflowPreview({
  return (
    <ReactFlowProvider>
      <div
+        ref={containerRef}
        style={{ height, width, backgroundColor: 'var(--bg)' }}
        className={cn('preview-mode', onNodeClick && 'interactive-nodes', className)}
      >
@@ -516,6 +426,20 @@ export function WorkflowPreview({
          .preview-mode .react-flow__selectionpane { cursor: ${cursorStyle} !important; }
          .preview-mode .react-flow__renderer { cursor: ${cursorStyle}; }

+          /* Active/grabbing cursor when dragging */
+          ${
+            cursorStyle === 'grab'
+              ? `
+          .preview-mode .react-flow:active { cursor: grabbing; }
+          .preview-mode .react-flow__pane:active { cursor: grabbing !important; }
+          .preview-mode .react-flow__selectionpane:active { cursor: grabbing !important; }
+          .preview-mode .react-flow__renderer:active { cursor: grabbing; }
+          .preview-mode .react-flow__node:active { cursor: grabbing !important; }
+          .preview-mode .react-flow__node:active * { cursor: grabbing !important; }
+          `
+              : ''
+          }
+
          /* Node cursor - pointer on nodes when onNodeClick is provided */
          .preview-mode.interactive-nodes .react-flow__node { cursor: pointer !important; }
          .preview-mode.interactive-nodes .react-flow__node > div { cursor: pointer !important; }
@@ -563,7 +487,11 @@ export function WorkflowPreview({
          }
          onPaneClick={onPaneClick}
        />
-        <FitViewOnChange nodeIds={blocksStructure.ids} fitPadding={fitPadding} />
+        <FitViewOnChange
+          nodeIds={blocksStructure.ids}
+          fitPadding={fitPadding}
+          containerRef={containerRef}
+        />
      </div>
    </ReactFlowProvider>
  )
--- a/apps/sim/blocks/blocks/workflow_input.ts
+++ b/apps/sim/blocks/blocks/workflow_input.ts
@@ -24,7 +24,7 @@ export const WorkflowInputBlock: BlockConfig = {
    },
    {
      id: 'inputMapping',
-      title: 'Input Mapping',
+      title: 'Inputs',
      type: 'input-mapping',
      description:
        "Map fields defined in the child workflow's Start block to variables/values in this workflow.",
--- a/apps/sim/hooks/queries/workflows.ts
+++ b/apps/sim/hooks/queries/workflows.ts
@@ -3,7 +3,6 @@ import { createLogger } from '@sim/logger'
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { getNextWorkflowColor } from '@/lib/workflows/colors'
 import { buildDefaultWorkflowArtifacts } from '@/lib/workflows/defaults'
-import { extractInputFieldsFromBlocks, type WorkflowInputField } from '@/lib/workflows/input-format'
 import { deploymentKeys } from '@/hooks/queries/deployments'
 import {
  createOptimisticMutationHandlers,
@@ -26,34 +25,35 @@ export const workflowKeys = {
  deploymentVersions: () => [...workflowKeys.all, 'deploymentVersion'] as const,
  deploymentVersion: (workflowId: string | undefined, version: number | undefined) =>
    [...workflowKeys.deploymentVersions(), workflowId ?? '', version ?? 0] as const,
-  inputFields: (workflowId: string | undefined) =>
-    [...workflowKeys.all, 'inputFields', workflowId ?? ''] as const,
+  state: (workflowId: string | undefined) =>
+    [...workflowKeys.all, 'state', workflowId ?? ''] as const,
 }

 /**
- * Fetches workflow input fields from the workflow state.
+ * Fetches workflow state from the API.
+ * Used as the base query for both state preview and input fields extraction.
 */
-async function fetchWorkflowInputFields(workflowId: string): Promise<WorkflowInputField[]> {
+async function fetchWorkflowState(workflowId: string): Promise<WorkflowState | null> {
  const response = await fetch(`/api/workflows/${workflowId}`)
  if (!response.ok) throw new Error('Failed to fetch workflow')
  const { data } = await response.json()
-  return extractInputFieldsFromBlocks(data?.state?.blocks)
+  return data?.state ?? null
 }

 /**
- * Hook to fetch workflow input fields for configuration.
- * Uses React Query for caching and deduplication.
+ * Hook to fetch workflow state.
+ * Used by workflow blocks to show a preview of the child workflow
+ * and as a base query for input fields extraction.
 *
- * @param workflowId - The workflow ID to fetch input fields for
- * @returns Query result with input fields array
+ * @param workflowId - The workflow ID to fetch state for
+ * @returns Query result with workflow state
 */
-export function useWorkflowInputFields(workflowId: string | undefined) {
+export function useWorkflowState(workflowId: string | undefined) {
  return useQuery({
-    queryKey: workflowKeys.inputFields(workflowId),
-    queryFn: () => fetchWorkflowInputFields(workflowId!),
+    queryKey: workflowKeys.state(workflowId),
+    queryFn: () => fetchWorkflowState(workflowId!),
    enabled: Boolean(workflowId),
-    staleTime: 0,
-    refetchOnMount: 'always',
+    staleTime: 30 * 1000, // 30 seconds
  })
 }

@@ -532,13 +532,19 @@ export interface ChildDeploymentStatus {
 }

 /**
- * Fetches deployment status for a child workflow
+ * Fetches deployment status for a child workflow.
+ * Uses Promise.all to fetch status and deployments in parallel for better performance.
 */
 async function fetchChildDeploymentStatus(workflowId: string): Promise<ChildDeploymentStatus> {
-  const statusRes = await fetch(`/api/workflows/${workflowId}/status`, {
-    cache: 'no-store',
+  const fetchOptions = {
+    cache: 'no-store' as const,
    headers: { 'Cache-Control': 'no-cache' },
-  })
+  }
+
+  const [statusRes, deploymentsRes] = await Promise.all([
+    fetch(`/api/workflows/${workflowId}/status`, fetchOptions),
+    fetch(`/api/workflows/${workflowId}/deployments`, fetchOptions),
+  ])

  if (!statusRes.ok) {
    throw new Error('Failed to fetch workflow status')
@@ -546,11 +552,6 @@ async function fetchChildDeploymentStatus(workflowId: string): Promise<ChildDepl

  const statusData = await statusRes.json()

-  const deploymentsRes = await fetch(`/api/workflows/${workflowId}/deployments`, {
-    cache: 'no-store',
-    headers: { 'Cache-Control': 'no-cache' },
-  })
-
  let activeVersion: number | null = null
  if (deploymentsRes.ok) {
    const deploymentsJson = await deploymentsRes.json()
@@ -580,7 +581,7 @@ export function useChildDeploymentStatus(workflowId: string | undefined) {
    queryKey: workflowKeys.deploymentStatus(workflowId),
    queryFn: () => fetchChildDeploymentStatus(workflowId!),
    enabled: Boolean(workflowId),
-    staleTime: 30 * 1000, // 30 seconds
+    staleTime: 0,
    retry: false,
  })
 }