fix(workspace-forking): resolve a custom block's inputs against the target environment, and stop a re-sync wiping its uploads

A repointed custom block's inputs are configured at sync time, but the modal
drew them as bare text fields against no environment at all:

- `{{SECRET}}` had no completion, and no way to know which secrets exist in the
  workspace the value is written INTO.
- `<block.output>` had no completion. The canvas dropdown reads the workflow
  open in the editor; on the fork settings page there is none, and the workflow
  that matters is the target's.
- A `file[]` input has no control here (it is an upload on the canvas), so it
  had no stored override — and the block was rebuilt from overrides alone, so
  every sync silently dropped the target's uploaded files.

`WorkflowReferenceScope` lets a surface supply the workflow a reference resolves
against. Absent a provider, the hooks read the live editor stores exactly as
before, so the canvas is unchanged. The scope splits graph from values on
purpose: reachability cannot change with the text being typed, and the
validation hook runs in every reference-aware sub-block editor at once, so
subscribing it to live sub-block values would re-render all of them on every
keystroke. A test pins that split.

`replaceCustomBlockInputs` now seeds from the target block when it is ALREADY
the mapped type, layering the configured values on top. That keeps an input the
modal cannot offer a control for, and leaves a field the user simply did not
touch alone; a field they explicitly emptied stores `''`, which is an override
and still wins. Under a DIFFERENT current type nothing is carried over — those
values are keyed by another block's field ids, which is the orphaning this
function exists to prevent.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: icecrasher321

apps/sim/app/api/workspaces/[id]/fork/diff/route.ts

@@ -154,7 +154,7 @@ export const GET = withRouteHandler(
             forkDependentValueKey(field.targetWorkflowId, field.targetBlockId, field.subBlockKey)
           ) ??
           readTargetDraftDependentValue(
-            targetDraftByWorkflow.get(field.targetWorkflowId)?.get(field.targetBlockId),
+            targetDraftByWorkflow.get(field.targetWorkflowId)?.get(field.targetBlockId)?.subBlocks,
             sourceBlocksByTarget.get(field.targetWorkflowId)?.get(field.targetBlockId),
             field.subBlockKey
           ),

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx

@@ -39,7 +39,7 @@ interface EnvVarDropdownProps {
   /** Maximum height for the dropdown */
   maxHeight?: string
   /** Reference to the input element for caret positioning */
-  inputRef?: React.RefObject<HTMLTextAreaElement | HTMLInputElement>
+  inputRef?: React.RefObject<HTMLTextAreaElement | HTMLInputElement | null>
 }
 
 /**

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

@@ -11,9 +11,6 @@ import {
   PopoverSection,
   usePopoverContext,
 } from '@sim/emcn'
-import { isEqual } from 'es-toolkit'
-import { useShallow } from 'zustand/react/shallow'
-import { useStoreWithEqualityFn } from 'zustand/traditional'
 import {
   getEffectiveBlockOutputType,
   getOutputPathsFromSchema,
@@ -28,19 +25,14 @@ import type {
   NestedTagChild,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/types'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
+import { useWorkflowReferenceScope } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/workflow-reference-scope'
 import { getBlock } from '@/blocks'
 import { BlockTile } from '@/blocks/block-tile'
 import type { BlockConfig } from '@/blocks/types'
 import { normalizeName } from '@/executor/constants'
-import { useVariablesStore } from '@/stores/variables/store'
 import type { Variable } from '@/stores/variables/types'
-import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { EMPTY_SUBBLOCK_VALUES, useSubBlockStore } from '@/stores/workflows/subblock/store'
-import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { BlockState } from '@/stores/workflows/workflow/types'
 
-const EMPTY_VARIABLES: Variable[] = []
-
 /**
  * Context for sharing nested navigation state between components.
  * This enables unlimited nesting depth with a single back button.
@@ -89,7 +81,7 @@ interface TagDropdownProps {
   /** Custom styles for positioning */
   style?: React.CSSProperties
   /** Reference to the input element for caret positioning */
-  inputRef?: React.RefObject<HTMLTextAreaElement | HTMLInputElement>
+  inputRef?: React.RefObject<HTMLTextAreaElement | HTMLInputElement | null>
 }
 
 interface TagComputationResult {
@@ -197,16 +189,13 @@ const ensureRootTag = (tags: string[], rootTag: string): string[] => {
 const getOutputTypeForPath = (
   block: BlockState,
   blockConfig: BlockConfig | null,
-  blockId: string,
   outputPath: string,
-  mergedSubBlocksOverride?: Record<string, any>
+  subBlocks: Record<string, any>
 ): string => {
   if (block?.type === 'variables') {
     return 'any'
   }
 
-  const subBlocks =
-    mergedSubBlocksOverride ?? useWorkflowStore.getState().blocks[blockId]?.subBlocks
   const isTriggerCapable = blockConfig ? hasTriggerCapability(blockConfig) : false
   const triggerMode = Boolean(block?.triggerMode && isTriggerCapable)
 
@@ -472,13 +461,7 @@ const FolderContentsInner: React.FC<FolderContentsProps> = ({
           const blockConfig = getBlock(block.type)
           const mergedSubBlocks = getMergedSubBlocks(group.blockId)
 
-          childType = getOutputTypeForPath(
-            block,
-            blockConfig || null,
-            group.blockId,
-            outputPath,
-            mergedSubBlocks
-          )
+          childType = getOutputTypeForPath(block, blockConfig || null, outputPath, mergedSubBlocks)
         }
 
         return (
@@ -667,13 +650,7 @@ const NestedTagRenderer: React.FC<NestedTagRendererProps> = ({
       const blockConfig = getBlock(block.type)
       const mergedSubBlocks = getMergedSubBlocks(group.blockId)
 
-      tagDescription = getOutputTypeForPath(
-        block,
-        blockConfig || null,
-        group.blockId,
-        outputPath,
-        mergedSubBlocks
-      )
+      tagDescription = getOutputTypeForPath(block, blockConfig || null, outputPath, mergedSubBlocks)
     }
   }
 
@@ -950,27 +927,24 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
   inputValueRef.current = inputValue
   cursorPositionRef.current = cursorPosition
 
-  const { blocks, edges, loops, parallels } = useWorkflowStore(
-    useShallow((state) => ({
-      blocks: state.blocks,
-      edges: state.edges,
-      loops: state.loops || {},
-      parallels: state.parallels || {},
-    }))
-  )
-
-  const workflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
+  // The workflow being referenced — the editor's own on the canvas, a supplied one on a
+  // surface configuring a block that lives in another workflow (see `WorkflowReferenceScope`).
+  const {
+    blocks,
+    edges,
+    loops,
+    parallels,
+    workflowId,
+    subBlockValues: workflowSubBlockValues,
+    variables: workflowVariables,
+  } = useWorkflowReferenceScope()
   const rawAccessiblePrefixes = useAccessibleReferencePrefixes(blockId)
 
   const combinedAccessiblePrefixes = useMemo(() => {
     if (!rawAccessiblePrefixes) return new Set<string>()
     return new Set<string>(rawAccessiblePrefixes)
   }, [rawAccessiblePrefixes])
 
-  const workflowSubBlockValues = useSubBlockStore(
-    (state) => (workflowId ? state.workflowValues[workflowId] : undefined) ?? EMPTY_SUBBLOCK_VALUES
-  )
-
   const getMergedSubBlocks = useCallback(
     (targetBlockId: string): Record<string, any> => {
       const base = blocks[targetBlockId]?.subBlocks || {}
@@ -984,18 +958,6 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
     [blocks, workflowSubBlockValues]
   )
 
-  const workflowVariables = useStoreWithEqualityFn(
-    useVariablesStore,
-    useCallback(
-      (state) =>
-        workflowId
-          ? Object.values(state.variables).filter((variable) => variable.workflowId === workflowId)
-          : EMPTY_VARIABLES,
-      [workflowId]
-    ),
-    isEqual
-  )
-
   const searchTerm = useMemo(
     () => getTagSearchTerm(inputValue, cursorPosition),
     [inputValue, cursorPosition]
@@ -1479,17 +1441,11 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
       const parts = tag.split('.')
       if (parts.length >= 3 && blockGroup) {
         const arrayFieldName = parts[1]
-        const block = useWorkflowStore.getState().blocks[blockGroup.blockId]
+        const block = blocks[blockGroup.blockId]
         const blockConfig = block ? (getBlock(block.type) ?? null) : null
         const mergedSubBlocks = getMergedSubBlocks(blockGroup.blockId)
 
-        const fieldType = getOutputTypeForPath(
-          block,
-          blockConfig,
-          blockGroup.blockId,
-          arrayFieldName,
-          mergedSubBlocks
-        )
+        const fieldType = getOutputTypeForPath(block, blockConfig, arrayFieldName, mergedSubBlocks)
 
         if (fieldType === 'file' || fieldType === 'file[]' || fieldType === 'array') {
           const blockName = parts[0]

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
+import {
+  buildWorkflowReferenceScope,
+  type WorkflowReferenceScope,
+  WorkflowReferenceScopeProvider,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/workflow-reference-scope'
+import { normalizeName } from '@/executor/constants'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useSubBlockStore } from '@/stores/workflows/subblock/store'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+import type { BlockState } from '@/stores/workflows/workflow/types'
+
+const WORKFLOW_ID = 'wf-1'
+
+function block(id: string, name: string): BlockState {
+  return { id, name, type: 'agent', subBlocks: {} } as unknown as BlockState
+}
+
+/** A → B → C, so only A is upstream of B and only A/B are upstream of C. */
+const GRAPH = {
+  blocks: { a: block('a', 'Alpha'), b: block('b', 'Bravo'), c: block('c', 'Charlie') },
+  edges: [
+    { id: 'e1', source: 'a', target: 'b' },
+    { id: 'e2', source: 'b', target: 'c' },
+  ],
+}
+
+interface Harness {
+  result: () => Set<string> | undefined
+  renderCount: () => number
+  unmount: () => void
+}
+
+function renderPrefixes(blockId: string | undefined, scope?: WorkflowReferenceScope): Harness {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  const container = document.createElement('div')
+  const root: Root = createRoot(container)
+  let latest: Set<string> | undefined
+  let renders = 0
+
+  function Probe() {
+    renders += 1
+    latest = useAccessibleReferencePrefixes(blockId)
+    return null
+  }
+
+  act(() => {
+    root.render(
+      scope ? (
+        <WorkflowReferenceScopeProvider scope={scope}>
+          <Probe />
+        </WorkflowReferenceScopeProvider>
+      ) : (
+        <Probe />
+      )
+    )
+  })
+
+  return {
+    result: () => latest,
+    renderCount: () => renders,
+    unmount: () => act(() => root.unmount()),
+  }
+}
+
+describe('useAccessibleReferencePrefixes', () => {
+  beforeEach(() => {
+    useWorkflowStore.setState({ ...GRAPH, loops: {}, parallels: {} })
+    useWorkflowRegistry.setState({ activeWorkflowId: WORKFLOW_ID })
+    useSubBlockStore.setState({ workflowValues: { [WORKFLOW_ID]: {} } })
+  })
+
+  it('offers only the referencing block and its ancestors on the canvas', () => {
+    const harness = renderPrefixes('c')
+    const prefixes = harness.result()
+    expect(prefixes?.has(normalizeName('Alpha'))).toBe(true)
+    expect(prefixes?.has(normalizeName('Bravo'))).toBe(true)
+    expect(prefixes?.has(normalizeName('Charlie'))).toBe(true)
+    harness.unmount()
+  })
+
+  it('excludes a block that is downstream of the referencing one', () => {
+    const harness = renderPrefixes('a')
+    expect(harness.result()?.has(normalizeName('Bravo'))).toBe(false)
+    harness.unmount()
+  })
+
+  it('does not re-render when a sub-block VALUE changes', () => {
+    // Reachability cannot change with the text being typed, and this hook runs in every
+    // reference-aware sub-block editor at once. Subscribing it to the sub-block store would
+    // re-render all of them on every keystroke anywhere in the workflow.
+    const harness = renderPrefixes('c')
+    const before = harness.renderCount()
+    act(() => {
+      useSubBlockStore.setState({ workflowValues: { [WORKFLOW_ID]: { a: { prompt: 'typing' } } } })
+    })
+    expect(harness.renderCount()).toBe(before)
+    harness.unmount()
+  })
+
+  it('still re-renders when the graph itself changes', () => {
+    const harness = renderPrefixes('c')
+    const before = harness.renderCount()
+    act(() => {
+      useWorkflowStore.setState({
+        blocks: { ...GRAPH.blocks, a: block('a', 'Renamed') },
+      })
+    })
+    expect(harness.renderCount()).toBeGreaterThan(before)
+    expect(harness.result()?.has(normalizeName('Renamed'))).toBe(true)
+    harness.unmount()
+  })
+
+  it('resolves against a supplied graph instead of the editor’s', () => {
+    const scope = buildWorkflowReferenceScope({
+      workflowId: 'other-wf',
+      blocks: { x: block('x', 'Extract'), y: block('y', 'Load') },
+      edges: [{ id: 'e', source: 'x', target: 'y' }],
+      referencingBlockId: 'y',
+    })
+    const harness = renderPrefixes('y', scope)
+    const prefixes = harness.result()
+    expect(prefixes?.has(normalizeName('Extract'))).toBe(true)
+    // The editor's own workflow must not leak in.
+    expect(prefixes?.has(normalizeName('Alpha'))).toBe(false)
+    harness.unmount()
+  })
+
+  it('offers every block when the referencing one is absent from the supplied graph', () => {
+    // A block this sync is about to ADD has no position in the target workflow yet; the
+    // ancestor walk would return nothing and suggest nothing at all.
+    const scope = buildWorkflowReferenceScope({
+      workflowId: 'other-wf',
+      blocks: { x: block('x', 'Extract'), y: block('y', 'Load') },
+      edges: [{ id: 'e', source: 'x', target: 'y' }],
+      referencingBlockId: 'not-in-this-workflow',
+    })
+    const harness = renderPrefixes('not-in-this-workflow', scope)
+    const prefixes = harness.result()
+    expect(prefixes?.has(normalizeName('Extract'))).toBe(true)
+    expect(prefixes?.has(normalizeName('Load'))).toBe(true)
+    harness.unmount()
+  })
+})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes.ts

@@ -1,29 +1,31 @@
 import { useMemo } from 'react'
-import { useShallow } from 'zustand/react/shallow'
 import { BlockPathCalculator } from '@/lib/workflows/blocks/block-path-calculator'
 import { SYSTEM_REFERENCE_PREFIXES } from '@/lib/workflows/sanitization/references'
+import { useWorkflowReferenceGraph } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/workflow-reference-scope'
 import { normalizeName } from '@/executor/constants'
-import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { Loop, Parallel } from '@/stores/workflows/workflow/types'
 
 export function useAccessibleReferencePrefixes(blockId?: string | null): Set<string> | undefined {
-  const { blocks, edges, loops, parallels } = useWorkflowStore(
-    useShallow((state) => ({
-      blocks: state.blocks,
-      edges: state.edges,
-      loops: state.loops || {},
-      parallels: state.parallels || {},
-    }))
-  )
+  // The GRAPH only — this runs on every keystroke in every reference-aware sub-block editor,
+  // and reachability cannot change with the values being typed.
+  const { blocks, edges, loops, parallels, unrestricted } = useWorkflowReferenceGraph()
 
   return useMemo(() => {
     if (!blockId) {
       return undefined
     }
 
-    const graphEdges = edges.map((edge) => ({ source: edge.source, target: edge.target }))
-    const ancestorIds = BlockPathCalculator.findAllPathNodes(graphEdges, blockId)
-    const accessibleIds = new Set<string>(ancestorIds)
+    const accessibleIds = new Set<string>()
+    if (unrestricted) {
+      // The referencing block is not in this graph, so there is no path to walk. Every block
+      // is offered instead of none — see `WorkflowReferenceScope.unrestricted`.
+      Object.keys(blocks).forEach((id) => accessibleIds.add(id))
+    } else {
+      const graphEdges = edges.map((edge) => ({ source: edge.source, target: edge.target }))
+      BlockPathCalculator.findAllPathNodes(graphEdges, blockId).forEach((id) =>
+        accessibleIds.add(id)
+      )
+    }
     accessibleIds.add(blockId)
 
     Object.values(loops as Record<string, Loop>).forEach((loop) => {
@@ -46,5 +48,5 @@ export function useAccessibleReferencePrefixes(blockId?: string | null): Set<str
     SYSTEM_REFERENCE_PREFIXES.forEach((prefix) => prefixes.add(prefix))
 
     return prefixes
-  }, [blockId, blocks, edges, loops, parallels])
+  }, [blockId, blocks, edges, loops, parallels, unrestricted])
 }