improvement(var-resolution): resolve variables with block name check and consolidate code

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/combobox.tsx

@@ -10,6 +10,7 @@ import { checkTagTrigger, TagDropdown } from '@/components/ui/tag-dropdown'
 import { createLogger } from '@/lib/logs/console/logger'
 import { cn } from '@/lib/utils'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
+import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useTagSelection } from '@/hooks/use-tag-selection'
 
@@ -60,6 +61,7 @@ export function ComboBox({
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
 
   const emitTagSelection = useTagSelection(blockId, subBlockId)
+  const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
 
   const inputRef = useRef<HTMLInputElement>(null)
   const overlayRef = useRef<HTMLDivElement>(null)
@@ -432,7 +434,10 @@ export function ComboBox({
           style={{ right: '42px' }}
         >
           <div className='w-full truncate text-foreground' style={{ scrollbarWidth: 'none' }}>
-            {formatDisplayText(displayValue)}
+            {formatDisplayText(displayValue, {
+              accessiblePrefixes,
+              highlightAll: !accessiblePrefixes,
+            })}
           </div>
         </div>
         {/* Chevron button */}

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

@@ -5,6 +5,7 @@ import { Label } from '@/components/ui/label'
 import { checkTagTrigger, TagDropdown } from '@/components/ui/tag-dropdown'
 import { cn } from '@/lib/utils'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
+import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 interface InputFormatField {
@@ -152,6 +153,8 @@ export function InputMapping({
     setMapping(updated)
   }
 
+  const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
+
   if (!selectedWorkflowId) {
     return (
       <div className='flex flex-col items-center justify-center rounded-lg border border-border/50 bg-muted/30 p-8 text-center'>
@@ -213,6 +216,7 @@ export function InputMapping({
             blockId={blockId}
             subBlockId={subBlockId}
             disabled={isPreview || disabled}
+            accessiblePrefixes={accessiblePrefixes}
           />
         )
       })}
@@ -229,6 +233,7 @@ function InputMappingField({
   blockId,
   subBlockId,
   disabled,
+  accessiblePrefixes,
 }: {
   fieldName: string
   fieldType?: string
@@ -237,6 +242,7 @@ function InputMappingField({
   blockId: string
   subBlockId: string
   disabled: boolean
+  accessiblePrefixes: Set<string> | undefined
 }) {
   const [showTags, setShowTags] = useState(false)
   const [cursorPosition, setCursorPosition] = useState(0)
@@ -318,7 +324,10 @@ function InputMappingField({
             className='w-full whitespace-pre'
             style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
           >
-            {formatDisplayText(value)}
+            {formatDisplayText(value, {
+              accessiblePrefixes,
+              highlightAll: !accessiblePrefixes,
+            })}
           </div>
         </div>
 

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

@@ -7,6 +7,7 @@ import { formatDisplayText } from '@/components/ui/formatted-text'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { checkTagTrigger, TagDropdown } from '@/components/ui/tag-dropdown'
+import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useKnowledgeBaseTagDefinitions } from '@/hooks/use-knowledge-base-tag-definitions'
 import { useTagSelection } from '@/hooks/use-tag-selection'
@@ -55,6 +56,9 @@ export function KnowledgeTagFilters({
   // Use KB tag definitions hook to get available tags
   const { tagDefinitions, isLoading } = useKnowledgeBaseTagDefinitions(knowledgeBaseId)
 
+  // Get accessible prefixes for variable highlighting
+  const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
+
   // State for managing tag dropdown
   const [activeTagDropdown, setActiveTagDropdown] = useState<{
     rowIndex: number
@@ -314,7 +318,12 @@ export function KnowledgeTagFilters({
             className='w-full border-0 text-transparent caret-foreground placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
           />
           <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden bg-transparent px-3 text-sm'>
-            <div className='whitespace-pre'>{formatDisplayText(cellValue)}</div>
+            <div className='whitespace-pre'>
+              {formatDisplayText(cellValue, {
+                accessiblePrefixes,
+                highlightAll: !accessiblePrefixes,
+              })}
+            </div>
           </div>
         </div>
       </td>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/long-input.tsx

@@ -11,6 +11,7 @@ import { createLogger } from '@/lib/logs/console/logger'
 import { cn } from '@/lib/utils'
 import { WandPromptBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
+import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { useWand } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useTagSelection } from '@/hooks/use-tag-selection'
@@ -92,6 +93,7 @@ export function LongInput({
   const overlayRef = useRef<HTMLDivElement>(null)
   const [activeSourceBlockId, setActiveSourceBlockId] = useState<string | null>(null)
   const containerRef = useRef<HTMLDivElement>(null)
+  const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
 
   // Use preview value when in preview mode, otherwise use store value or prop value
   const baseValue = isPreview ? previewValue : propValue !== undefined ? propValue : storeValue
@@ -405,7 +407,10 @@ export function LongInput({
             height: `${height}px`,
           }}
         >
-          {formatDisplayText(value?.toString() ?? '')}
+          {formatDisplayText(value?.toString() ?? '', {
+            accessiblePrefixes,
+            highlightAll: !accessiblePrefixes,
+          })}
         </div>
 
         {/* Wand Button */}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/short-input.tsx

@@ -11,6 +11,7 @@ import { createLogger } from '@/lib/logs/console/logger'
 import { cn } from '@/lib/utils'
 import { WandPromptBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
+import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { useWand } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useTagSelection } from '@/hooks/use-tag-selection'
@@ -345,6 +346,8 @@ export function ShortInput({
     }
   }
 
+  const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
+
   return (
     <>
       <WandPromptBar
@@ -417,7 +420,10 @@ export function ShortInput({
           >
             {password && !isFocused
               ? '•'.repeat(value?.toString().length ?? 0)
-              : formatDisplayText(value?.toString() ?? '')}
+              : formatDisplayText(value?.toString() ?? '', {
+                  accessiblePrefixes,
+                  highlightAll: !accessiblePrefixes,
+                })}
           </div>
         </div>
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/starter/input-format.tsx

@@ -22,6 +22,7 @@ import { checkTagTrigger, TagDropdown } from '@/components/ui/tag-dropdown'
 import { Textarea } from '@/components/ui/textarea'
 import { cn } from '@/lib/utils'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
+import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 
 interface Field {
   id: string
@@ -80,6 +81,7 @@ export function FieldFormat({
   const [cursorPosition, setCursorPosition] = useState(0)
   const [activeFieldId, setActiveFieldId] = useState<string | null>(null)
   const [activeSourceBlockId, setActiveSourceBlockId] = useState<string | null>(null)
+  const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
 
   // Use preview value when in preview mode, otherwise use store value
   const value = isPreview ? previewValue : storeValue
@@ -471,7 +473,10 @@ export function FieldFormat({
                                 style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
                               >
                                 {formatDisplayText(
-                                  (localValues[field.id] ?? field.value ?? '')?.toString()
+                                  (localValues[field.id] ?? field.value ?? '')?.toString(),
+                                  accessiblePrefixes
+                                    ? { accessiblePrefixes }
+                                    : { highlightAll: true }
                                 )}
                               </div>
                             </div>

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

@@ -24,6 +24,7 @@ import {
 } from '@/components/ui/select'
 import { createLogger } from '@/lib/logs/console/logger'
 import type { McpTransport } from '@/lib/mcp/types'
+import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { useMcpServerTest } from '@/hooks/use-mcp-server-test'
 import { useMcpServersStore } from '@/stores/mcp-servers/store'
 
@@ -33,6 +34,7 @@ interface McpServerModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   onServerCreated?: () => void
+  blockId: string
 }
 
 interface McpServerFormData {
@@ -42,7 +44,12 @@ interface McpServerFormData {
   headers?: Record<string, string>
 }
 
-export function McpServerModal({ open, onOpenChange, onServerCreated }: McpServerModalProps) {
+export function McpServerModal({
+  open,
+  onOpenChange,
+  onServerCreated,
+  blockId,
+}: McpServerModalProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const [formData, setFormData] = useState<McpServerFormData>({
@@ -262,6 +269,8 @@ export function McpServerModal({ open, onOpenChange, onServerCreated }: McpServe
     workspaceId,
   ])
 
+  const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className='sm:max-w-[600px]'>
@@ -337,7 +346,10 @@ export function McpServerModal({ open, onOpenChange, onServerCreated }: McpServe
                   className='whitespace-nowrap'
                   style={{ transform: `translateX(-${urlScrollLeft}px)` }}
                 >
-                  {formatDisplayText(formData.url || '')}
+                  {formatDisplayText(formData.url || '', {
+                    accessiblePrefixes,
+                    highlightAll: !accessiblePrefixes,
+                  })}
                 </div>
               </div>
             </div>
@@ -389,7 +401,10 @@ export function McpServerModal({ open, onOpenChange, onServerCreated }: McpServe
                           transform: `translateX(-${headerScrollLeft[`key-${index}`] || 0}px)`,
                         }}
                       >
-                        {formatDisplayText(key || '')}
+                        {formatDisplayText(key || '', {
+                          accessiblePrefixes,
+                          highlightAll: !accessiblePrefixes,
+                        })}
                       </div>
                     </div>
                   </div>
@@ -417,7 +432,10 @@ export function McpServerModal({ open, onOpenChange, onServerCreated }: McpServe
                           transform: `translateX(-${headerScrollLeft[`value-${index}`] || 0}px)`,
                         }}
                       >
-                        {formatDisplayText(value || '')}
+                        {formatDisplayText(value || '', {
+                          accessiblePrefixes,
+                          highlightAll: !accessiblePrefixes,
+                        })}
                       </div>
                     </div>
                   </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx

@@ -1977,6 +1977,7 @@ export function ToolInput({
           // Refresh MCP tools when a new server is created
           refreshTools(true)
         }}
+        blockId={blockId}
       />
     </div>
   )

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

@@ -0,0 +1,64 @@
+import { useMemo } from 'react'
+import { shallow } from 'zustand/shallow'
+import { BlockPathCalculator } from '@/lib/block-path-calculator'
+import { SYSTEM_REFERENCE_PREFIXES } from '@/lib/workflows/references'
+import { normalizeBlockName } from '@/stores/workflows/utils'
+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(
+    (state) => ({
+      blocks: state.blocks,
+      edges: state.edges,
+      loops: state.loops || {},
+      parallels: state.parallels || {},
+    }),
+    shallow
+  )
+
+  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)
+    accessibleIds.add(blockId)
+
+    const starterBlock = Object.values(blocks).find((block) => block.type === 'starter')
+    if (starterBlock) {
+      accessibleIds.add(starterBlock.id)
+    }
+
+    const loopValues = Object.values(loops as Record<string, Loop>)
+    loopValues.forEach((loop) => {
+      if (!loop?.nodes) return
+      if (loop.nodes.includes(blockId)) {
+        loop.nodes.forEach((nodeId) => accessibleIds.add(nodeId))
+      }
+    })
+
+    const parallelValues = Object.values(parallels as Record<string, Parallel>)
+    parallelValues.forEach((parallel) => {
+      if (!parallel?.nodes) return
+      if (parallel.nodes.includes(blockId)) {
+        parallel.nodes.forEach((nodeId) => accessibleIds.add(nodeId))
+      }
+    })
+
+    const prefixes = new Set<string>()
+    accessibleIds.forEach((id) => {
+      prefixes.add(normalizeBlockName(id))
+      const block = blocks[id]
+      if (block?.name) {
+        prefixes.add(normalizeBlockName(block.name))
+      }
+    })
+
+    SYSTEM_REFERENCE_PREFIXES.forEach((prefix) => prefixes.add(prefix))
+
+    return prefixes
+  }, [blockId, blocks, edges, loops, parallels])
+}