From ae0eca2a2b72a68c5523956aff1f8c8fa46308a9 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Thu, 24 Sep 2026 11:25:08 -0700
Subject: [PATCH 1/4] refactor(workflow): share mirrored input and textarea
 editing

---
 .../condition-input/condition-input.tsx       |  33 +--
 .../document-tag-entry/document-tag-entry.tsx |  45 ++--
 .../components/eval-input/eval-input.tsx      |  90 ++++----
 .../components/filter-rule-row.tsx            |  45 ++--
 .../input-mapping/input-mapping.tsx           |  62 ++---
 .../knowledge-tag-filters.tsx                 |  45 ++--
 .../components/long-input/long-input.tsx      |  43 ++--
 .../mirrored-field/mirrored-field.test.tsx    | 110 +++++++++
 .../mirrored-field/mirrored-field.tsx         | 211 ++++++++++++++++++
 .../components/short-input/short-input.tsx    |  26 +--
 .../components/starter/input-format.tsx       | 206 ++++++-----------
 .../variables-input/variables-input.tsx       | 113 ++++------
 .../subflow-editor/subflow-editor.tsx         |  32 +--
 13 files changed, 589 insertions(+), 472 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index c9a550e6345..cb4121fbae1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -8,7 +8,6 @@ import {
   getCodeEditorProps,
   highlight,
   languages,
-  Textarea,
   Tooltip,
 } from '@sim/emcn'
 import { ChevronDown, ChevronsUpDown, ChevronUp, Plus, Trash } from '@sim/emcn/icons'
@@ -31,6 +30,7 @@ import {
   getValidWorkflowSearchRange,
   type WorkflowSearchTextHighlight,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { MirroredTextarea } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import {
   checkTagTrigger,
   TagDropdown,
@@ -1044,7 +1044,7 @@ export function ConditionInput({
                 onDragOver={(e) => e.preventDefault()}
                 onDrop={(e) => handleDrop(block.id, e)}
               >
-                <Textarea
+                <MirroredTextarea
                   ref={(el) => {
                     if (el) inputRefs.current.set(block.id, el)
                   }}
@@ -1093,43 +1093,30 @@ export function ConditionInput({
                       )
                     }, 150)
                   }}
-                  onScroll={(e) => {
-                    const overlay = overlayRefs.current.get(block.id)
-                    if (overlay) {
-                      overlay.scrollTop = e.currentTarget.scrollTop
-                      overlay.scrollLeft = e.currentTarget.scrollLeft
-                    }
-                  }}
                   placeholder='Describe when this route should be taken...'
                   disabled={disabled || isPreview}
-                  className='min-h-[100px] resize-none rounded-none border-0 px-3 py-2 text-sm text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
+                  className='min-h-[100px] resize-none rounded-none border-0 px-3 py-2 text-sm placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
                   rows={4}
                   style={{ height: `${getRouterHeight(block.id)}px` }}
-                />
-                <div
-                  ref={(el) => {
-                    if (el) {
-                      overlayRefs.current.set(block.id, el)
-                    } else {
-                      overlayRefs.current.delete(block.id)
-                    }
+                  overlayRef={(el) => {
+                    if (el) overlayRefs.current.set(block.id, el)
+                    else overlayRefs.current.delete(block.id)
                   }}
-                  className={cn(
+                  overlayClassName={cn(
                     'pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-3 py-2 font-sans text-sm',
                     (isPreview || disabled) && 'opacity-50'
                   )}
-                  style={{
+                  overlayStyle={{
                     fontFamily: 'inherit',
                     lineHeight: 'inherit',
                     height: `${getRouterHeight(block.id)}px`,
                   }}
-                >
-                  {formatDisplayText(block.value, {
+                  overlay={formatDisplayText(block.value, {
                     accessiblePrefixes,
                     highlightAll: !accessiblePrefixes,
                     workflowSearchHighlight,
                   })}
-                </div>
+                />
 
                 {/* Custom resize handle */}
                 {!isPreview && !disabled && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index 9decc0cce59..c73555cd0be 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -8,7 +8,6 @@ import {
   Combobox,
   type ComboboxOption,
   cn,
-  Input,
   Label,
   OverflowText,
   Trash,
@@ -17,6 +16,7 @@ import { Plus } from '@sim/emcn/icons'
 import { generateId } from '@sim/utils/id'
 import { FIELD_TYPE_LABELS, getPlaceholderForFieldType } from '@/lib/knowledge/constants'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { MirroredInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
@@ -203,11 +203,6 @@ export function DocumentTagEntry({
   /**
    * Syncs scroll position between input and overlay
    */
-  const syncOverlayScroll = (tagId: string, scrollLeft: number) => {
-    const overlay = overlayRefs.current[tagId]
-    if (overlay) overlay.scrollLeft = scrollLeft
-  }
-
   if (isPreview) {
     const tagCount = tags.filter((t) => t.tagName?.trim()).length
     return (
@@ -301,7 +296,7 @@ export function DocumentTagEntry({
 
     return (
       <div className='relative'>
-        <Input
+        <MirroredInput
           ref={(el) => {
             if (el) valueInputRefs.current[cellKey] = el
           }}
@@ -311,36 +306,28 @@ export function DocumentTagEntry({
           onDrop={handlers.onDrop}
           onDragOver={handlers.onDragOver}
           onFocus={handlers.onFocus}
-          onScroll={(e) => syncOverlayScroll(cellKey, e.currentTarget.scrollLeft)}
-          onPaste={() =>
-            setTimeout(() => {
-              const input = valueInputRefs.current[cellKey]
-              input && syncOverlayScroll(cellKey, input.scrollLeft)
-            }, 0)
-          }
           disabled={isReadOnly}
           autoComplete='off'
           placeholder={placeholder}
-          className='allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
-        />
-        <div
-          ref={(el) => {
+          className='allow-scroll w-full overflow-auto'
+          overlayRef={(el) => {
             if (el) overlayRefs.current[cellKey] = el
           }}
-          className={cn(
+          overlayClassName={cn(
             'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
-        >
-          <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
-            {formatDisplayText(
-              fieldValue,
-              accessiblePrefixes
-                ? { accessiblePrefixes, workflowSearchHighlight }
-                : { highlightAll: true, workflowSearchHighlight }
-            )}
-          </div>
-        </div>
+          overlay={
+            <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
+              {formatDisplayText(
+                fieldValue,
+                accessiblePrefixes
+                  ? { accessiblePrefixes, workflowSearchHighlight }
+                  : { highlightAll: true, workflowSearchHighlight }
+              )}
+            </div>
+          }
+        />
         {fieldState.showTags && (
           <TagDropdown
             visible={fieldState.showTags}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index a8c87277a31..8794505e4e4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -1,8 +1,12 @@
 import { useMemo, useRef } from 'react'
-import { Button, cn, Input, Label, Textarea, Tooltip } from '@sim/emcn'
+import { Button, cn, Label, Tooltip } from '@sim/emcn'
 import { Plus, Trash } from '@sim/emcn/icons'
 import { generateId } from '@sim/utils/id'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import {
+  MirroredInput,
+  MirroredTextarea,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
@@ -47,7 +51,6 @@ export function EvalInput({
   const [storeValue, setStoreValue] = useSubBlockValue<EvalMetric[]>(blockId, subBlockId)
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
   const descriptionInputRefs = useRef<Record<string, HTMLTextAreaElement>>({})
-  const descriptionOverlayRefs = useRef<Record<string, HTMLDivElement>>({})
 
   // Use the extended hook for field-level management
   const inputController = useSubBlockInput({
@@ -188,28 +191,27 @@ export function EvalInput({
             <div key={`name-${metric.id}`} className='flex flex-col gap-1.5'>
               {renderFieldLabel('Name')}
               <div className='relative'>
-                <Input
+                <MirroredInput
                   name='name'
                   value={metric.name}
                   onChange={(e) => updateMetric(metric.id, 'name', e.target.value)}
                   placeholder='Accuracy'
                   disabled={isPreview || disabled}
-                  className='text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50'
-                />
-                <div
-                  className={cn(
+                  className='placeholder:text-muted-foreground/50'
+                  overlayClassName={cn(
                     'pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm',
                     (isPreview || disabled) && 'opacity-50'
                   )}
-                >
-                  <span className='truncate'>
-                    {formatDisplayText(metric.name || '', {
-                      accessiblePrefixes,
-                      highlightAll: !accessiblePrefixes,
-                      workflowSearchHighlight: getMetricSearchHighlight(index, ['name']),
-                    })}
-                  </span>
-                </div>
+                  overlay={
+                    <span className='truncate'>
+                      {formatDisplayText(metric.name || '', {
+                        accessiblePrefixes,
+                        highlightAll: !accessiblePrefixes,
+                        workflowSearchHighlight: getMetricSearchHighlight(index, ['name']),
+                      })}
+                    </span>
+                  }
+                />
               </div>
             </div>
 
@@ -231,7 +233,7 @@ export function EvalInput({
 
                   return (
                     <>
-                      <Textarea
+                      <MirroredTextarea
                         ref={(el) => {
                           if (el) descriptionInputRefs.current[metric.id] = el
                         }}
@@ -243,30 +245,24 @@ export function EvalInput({
                         onFocus={handlers.onFocus}
                         placeholder='How accurate is the response?'
                         disabled={isPreview || disabled}
-                        className={cn(
-                          'min-h-[80px] whitespace-pre-wrap text-transparent caret-foreground [letter-spacing:inherit]'
-                        )}
+                        className='min-h-[80px] whitespace-pre-wrap'
                         rows={3}
-                      />
-                      <div
-                        ref={(el) => {
-                          if (el) descriptionOverlayRefs.current[metric.id] = el
-                        }}
-                        className={cn(
+                        overlayClassName={cn(
                           'absolute inset-0 overflow-auto bg-transparent px-2 py-2 font-sans text-[var(--code-foreground)] text-sm',
                           !(isPreview || disabled) && 'pointer-events-none'
                         )}
-                      >
-                        <div className='whitespace-pre-wrap'>
-                          {formatDisplayText(metric.description || '', {
-                            accessiblePrefixes,
-                            highlightAll: !accessiblePrefixes,
-                            workflowSearchHighlight: getMetricSearchHighlight(index, [
-                              'description',
-                            ]),
-                          })}
-                        </div>
-                      </div>
+                        overlay={
+                          <div className='whitespace-pre-wrap'>
+                            {formatDisplayText(metric.description || '', {
+                              accessiblePrefixes,
+                              highlightAll: !accessiblePrefixes,
+                              workflowSearchHighlight: getMetricSearchHighlight(index, [
+                                'description',
+                              ]),
+                            })}
+                          </div>
+                        }
+                      />
                       {fieldState.showTags && (
                         <TagDropdown
                           visible={fieldState.showTags}
@@ -291,7 +287,7 @@ export function EvalInput({
               <div className='flex flex-col gap-1.5'>
                 {renderFieldLabel('Min Value')}
                 <div className='relative'>
-                  <Input
+                  <MirroredInput
                     type='text'
                     value={metric.range.min ?? ''}
                     onChange={(e) => updateRange(metric.id, 'min', e.target.value)}
@@ -300,19 +296,17 @@ export function EvalInput({
                     autoComplete='off'
                     data-form-type='other'
                     name='eval-range-min'
-                    className='text-transparent caret-foreground [letter-spacing:inherit]'
-                  />
-                  <div className='pointer-events-none absolute inset-0 flex items-center truncate px-2 py-1.5 font-sans text-sm'>
-                    {formatDisplayText(String(metric.range.min ?? ''), {
+                    overlayClassName='pointer-events-none absolute inset-0 flex items-center truncate px-2 py-1.5 font-sans text-sm'
+                    overlay={formatDisplayText(String(metric.range.min ?? ''), {
                       workflowSearchHighlight: getMetricSearchHighlight(index, ['range', 'min']),
                     })}
-                  </div>
+                  />
                 </div>
               </div>
               <div className='flex flex-col gap-1.5'>
                 {renderFieldLabel('Max Value')}
                 <div className='relative'>
-                  <Input
+                  <MirroredInput
                     type='text'
                     value={metric.range.max ?? ''}
                     onChange={(e) => updateRange(metric.id, 'max', e.target.value)}
@@ -321,13 +315,11 @@ export function EvalInput({
                     autoComplete='off'
                     data-form-type='other'
                     name='eval-range-max'
-                    className='text-transparent caret-foreground [letter-spacing:inherit]'
-                  />
-                  <div className='pointer-events-none absolute inset-0 flex items-center truncate px-2 py-1.5 font-sans text-sm'>
-                    {formatDisplayText(String(metric.range.max ?? ''), {
+                    overlayClassName='pointer-events-none absolute inset-0 flex items-center truncate px-2 py-1.5 font-sans text-sm'
+                    overlay={formatDisplayText(String(metric.range.max ?? ''), {
                       workflowSearchHighlight: getMetricSearchHighlight(index, ['range', 'max']),
                     })}
-                  </div>
+                  />
                 </div>
               </div>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
index 33a1fc95fc7..a49bf565824 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
@@ -6,7 +6,6 @@ import {
   Combobox,
   type ComboboxOption,
   cn,
-  Input,
   Label,
   OverflowText,
   Trash,
@@ -14,6 +13,7 @@ import {
 import { Plus } from '@sim/emcn/icons'
 import type { FilterRule } from '@/lib/table/query-builder/constants'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { MirroredInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import {
   getActiveWorkflowSearchHighlight,
@@ -61,10 +61,6 @@ export function FilterRuleRow({
   const valueInputRef = useRef<HTMLInputElement>(null)
   const overlayRef = useRef<HTMLDivElement>(null)
 
-  const syncOverlayScroll = (scrollLeft: number) => {
-    if (overlayRef.current) overlayRef.current.scrollLeft = scrollLeft
-  }
-
   const cellKey = `filter-${rule.id}-value`
   const fieldState = inputController.fieldHelpers.getFieldState(cellKey)
   const handlers = inputController.fieldHelpers.createFieldHandlers(
@@ -147,7 +143,7 @@ export function FilterRuleRow({
 
   const renderValueInput = () => (
     <div className='relative'>
-      <Input
+      <MirroredInput
         ref={valueInputRef}
         value={rule.value}
         onChange={handlers.onChange}
@@ -155,35 +151,26 @@ export function FilterRuleRow({
         onDrop={handlers.onDrop}
         onDragOver={handlers.onDragOver}
         onFocus={handlers.onFocus}
-        onScroll={(e) => syncOverlayScroll(e.currentTarget.scrollLeft)}
-        onPaste={() =>
-          setTimeout(() => {
-            if (valueInputRef.current) {
-              syncOverlayScroll(valueInputRef.current.scrollLeft)
-            }
-          }, 0)
-        }
         disabled={isReadOnly}
         autoComplete='off'
         placeholder='Enter value'
-        className='allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
-      />
-      <div
-        ref={overlayRef}
-        className={cn(
+        className='allow-scroll w-full overflow-auto'
+        overlayRef={overlayRef}
+        overlayClassName={cn(
           'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
           !isReadOnly && 'pointer-events-none'
         )}
-      >
-        <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
-          {formatDisplayText(
-            rule.value,
-            accessiblePrefixes
-              ? { accessiblePrefixes, workflowSearchHighlight }
-              : { highlightAll: true, workflowSearchHighlight }
-          )}
-        </div>
-      </div>
+        overlay={
+          <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
+            {formatDisplayText(
+              rule.value,
+              accessiblePrefixes
+                ? { accessiblePrefixes, workflowSearchHighlight }
+                : { highlightAll: true, workflowSearchHighlight }
+            )}
+          </div>
+        }
+      />
       {fieldState.showTags && (
         <TagDropdown
           visible={fieldState.showTags}
diff --git 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
index b0b8583cce4..fcacf937f02 100644
--- 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
@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Badge, CollapsibleCard, cn, Input, Label } from '@sim/emcn'
+import { Badge, CollapsibleCard, cn, Label } from '@sim/emcn'
 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 { MirroredInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
@@ -226,17 +227,6 @@ function InputMappingField({
     onChange
   )
 
-  /**
-   * Synchronizes scroll position between input and overlay
-   * @param e - The scroll event
-   */
-  const handleScroll = (e: React.UIEvent<HTMLInputElement>) => {
-    const overlay = overlayRefs.current.get(fieldId)
-    if (overlay) {
-      overlay.scrollLeft = e.currentTarget.scrollLeft
-    }
-  }
-
   return (
     <CollapsibleCard
       title={fieldName}
@@ -253,7 +243,7 @@ function InputMappingField({
       <div className='flex flex-col gap-1.5'>
         <Label>Value</Label>
         <div className='relative'>
-          <Input
+          <MirroredInput
             ref={(el) => {
               if (el) inputRefs.current.set(fieldId, el)
             }}
@@ -264,43 +254,33 @@ function InputMappingField({
             onDrop={handlers.onDrop}
             onDragOver={handlers.onDragOver}
             onFocus={handlers.onFocus}
-            onScroll={(e) => handleScroll(e)}
-            onPaste={() =>
-              setTimeout(() => {
-                const input = inputRefs.current.get(fieldId)
-                input && handleScroll({ currentTarget: input } as any)
-              }, 0)
-            }
             placeholder='Enter value or reference'
             disabled={disabled}
             autoComplete='off'
-            className={cn(
-              'allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
-            )}
+            className='allow-scroll w-full overflow-auto'
             style={{ overflowX: 'auto' }}
-          />
-          <div
-            ref={(el) => {
+            overlayRef={(el) => {
               if (el) overlayRefs.current.set(fieldId, el)
             }}
-            className={cn(
+            overlayClassName={cn(
               'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
               !disabled && 'pointer-events-none'
             )}
-            style={{ overflowX: 'auto' }}
-          >
-            <div
-              className='w-full whitespace-pre'
-              style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-            >
-              {formatDisplayText(
-                value,
-                accessiblePrefixes
-                  ? { accessiblePrefixes, workflowSearchHighlight }
-                  : { highlightAll: true, workflowSearchHighlight }
-              )}
-            </div>
-          </div>
+            overlayStyle={{ overflowX: 'auto' }}
+            overlay={
+              <div
+                className='w-full whitespace-pre'
+                style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
+              >
+                {formatDisplayText(
+                  value,
+                  accessiblePrefixes
+                    ? { accessiblePrefixes, workflowSearchHighlight }
+                    : { highlightAll: true, workflowSearchHighlight }
+                )}
+              </div>
+            }
+          />
           {fieldState.showTags && (
             <TagDropdown
               visible={fieldState.showTags}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index dc4e6b62c34..22a2e969522 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -8,7 +8,6 @@ import {
   Combobox,
   type ComboboxOption,
   cn,
-  Input,
   Label,
   OverflowText,
   Trash,
@@ -18,6 +17,7 @@ import { generateId } from '@sim/utils/id'
 import { FIELD_TYPE_LABELS, getPlaceholderForFieldType } from '@/lib/knowledge/constants'
 import { type FilterFieldType, getOperatorsForFieldType } from '@/lib/knowledge/filters/types'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { MirroredInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
@@ -210,11 +210,6 @@ export function KnowledgeTagFilters({
   /**
    * Syncs scroll position between input and overlay
    */
-  const syncOverlayScroll = (filterId: string, scrollLeft: number) => {
-    const overlay = overlayRefs.current[filterId]
-    if (overlay) overlay.scrollLeft = scrollLeft
-  }
-
   if (isPreview) {
     const appliedFilters = filters.filter((f) => f.tagName.trim() && f.tagValue.trim()).length
 
@@ -305,7 +300,7 @@ export function KnowledgeTagFilters({
 
     return (
       <div className='relative'>
-        <Input
+        <MirroredInput
           ref={(el) => {
             if (el) valueInputRefs.current[cellKey] = el
           }}
@@ -315,36 +310,28 @@ export function KnowledgeTagFilters({
           onDrop={handlers.onDrop}
           onDragOver={handlers.onDragOver}
           onFocus={handlers.onFocus}
-          onScroll={(e) => syncOverlayScroll(cellKey, e.currentTarget.scrollLeft)}
-          onPaste={() =>
-            setTimeout(() => {
-              const input = valueInputRefs.current[cellKey]
-              input && syncOverlayScroll(cellKey, input.scrollLeft)
-            }, 0)
-          }
           disabled={isReadOnly}
           autoComplete='off'
           placeholder={placeholder}
-          className='allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
-        />
-        <div
-          ref={(el) => {
+          className='allow-scroll w-full overflow-auto'
+          overlayRef={(el) => {
             if (el) overlayRefs.current[cellKey] = el
           }}
-          className={cn(
+          overlayClassName={cn(
             'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
-        >
-          <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
-            {formatDisplayText(
-              fieldValue,
-              accessiblePrefixes
-                ? { accessiblePrefixes, workflowSearchHighlight }
-                : { highlightAll: true, workflowSearchHighlight }
-            )}
-          </div>
-        </div>
+          overlay={
+            <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
+              {formatDisplayText(
+                fieldValue,
+                accessiblePrefixes
+                  ? { accessiblePrefixes, workflowSearchHighlight }
+                  : { highlightAll: true, workflowSearchHighlight }
+              )}
+            </div>
+          }
+        />
         {fieldState.showTags && (
           <TagDropdown
             visible={fieldState.showTags}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index e25ac99312f..e7106469faf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -7,10 +7,11 @@ import {
   useRef,
   useState,
 } from 'react'
-import { cn, Textarea } from '@sim/emcn'
+import { cn } from '@sim/emcn'
 import { ChevronsUpDown } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { MirroredTextarea } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import {
   maskSecretText,
   shouldMaskSecretValue,
@@ -236,14 +237,6 @@ export function LongInput({
     }
   }, [rows])
 
-  // Sync scroll position between textarea and overlay
-  const handleScroll = useCallback((e: React.UIEvent<HTMLTextAreaElement>) => {
-    if (overlayRef.current) {
-      overlayRef.current.scrollTop = e.currentTarget.scrollTop
-      overlayRef.current.scrollLeft = e.currentTarget.scrollLeft
-    }
-  }, [])
-
   // Ensure overlay updates when content changes
   useEffect(() => {
     if (textareaRef.current && overlayRef.current) {
@@ -346,10 +339,10 @@ export function LongInput({
               className='group relative w-full'
               style={{ height: `${height}px` }}
             >
-              <Textarea
+              <MirroredTextarea
                 ref={setRefs}
                 className={cn(
-                  'allow-scroll box-border min-h-full w-full resize-none text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50',
+                  'allow-scroll box-border min-h-full w-full resize-none placeholder:text-muted-foreground/50',
                   wandHook.isStreaming && 'pointer-events-none cursor-not-allowed opacity-50'
                 )}
                 rows={rows ?? DEFAULT_ROWS}
@@ -358,7 +351,6 @@ export function LongInput({
                 onChange={handleChange as (e: React.ChangeEvent<HTMLTextAreaElement>) => void}
                 onDrop={onDrop as (e: React.DragEvent<HTMLTextAreaElement>) => void}
                 onDragOver={onDragOver as (e: React.DragEvent<HTMLTextAreaElement>) => void}
-                onScroll={handleScroll}
                 onKeyDown={onKeyDown as (e: React.KeyboardEvent<HTMLTextAreaElement>) => void}
                 onFocus={(e) => {
                   setIsFocused(true)
@@ -373,29 +365,28 @@ export function LongInput({
                   wordBreak: 'break-word',
                   whiteSpace: 'pre-wrap',
                 }}
-              />
-              <div
-                ref={overlayRef}
-                className={cn(
+                overlayRef={overlayRef}
+                overlayClassName={cn(
                   'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 font-sans text-sm',
                   (isPreview || disabled) && 'opacity-50',
                   !(isPreview || disabled) && 'pointer-events-none'
                 )}
-                style={{
+                overlayStyle={{
                   fontFamily: 'inherit',
                   lineHeight: 'inherit',
                   width: '100%',
                   height: `${height}px`,
                 }}
-              >
-                {shouldMask
-                  ? displayValue
-                  : formatDisplayText(value, {
-                      accessiblePrefixes,
-                      highlightAll: !accessiblePrefixes,
-                      workflowSearchHighlight,
-                    })}
-              </div>
+                overlay={
+                  shouldMask
+                    ? displayValue
+                    : formatDisplayText(value, {
+                        accessiblePrefixes,
+                        highlightAll: !accessiblePrefixes,
+                        workflowSearchHighlight,
+                      })
+                }
+              />
 
               {/* Wand Button - only show if not hidden by parent */}
               {isWandEnabled && !isPreview && !wandHook.isStreaming && !hideInternalWand && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx
new file mode 100644
index 00000000000..92a3e42081c
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx
@@ -0,0 +1,110 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, createRef } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  cn: (...classes: unknown[]) => classes.filter(Boolean).join(' '),
+  Input: (
+    props: React.InputHTMLAttributes<HTMLInputElement> & { ref?: React.Ref<HTMLInputElement> }
+  ) => <input {...props} />,
+  Textarea: (
+    props: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+      ref?: React.Ref<HTMLTextAreaElement>
+    }
+  ) => <textarea {...props} />,
+}))
+
+import { MirroredInput, MirroredTextarea } from './mirrored-field'
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+let host: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  vi.restoreAllMocks()
+})
+
+describe('mirrored workflow fields', () => {
+  it.each([
+    ['input', MirroredInput],
+    ['textarea', MirroredTextarea],
+  ] as const)('keeps the %s mirror aligned and composition text visible', (_, Component) => {
+    const controlRef = createRef<HTMLInputElement & HTMLTextAreaElement>()
+    const overlayRef = createRef<HTMLDivElement>()
+    const onCompositionEnd = vi.fn()
+
+    act(() => {
+      root.render(
+        <div className='relative'>
+          <Component
+            ref={controlRef}
+            value='long reference value'
+            readOnly
+            overlay='formatted reference value'
+            overlayClassName='absolute inset-0'
+            overlayRef={overlayRef}
+            onCompositionEnd={onCompositionEnd}
+          />
+        </div>
+      )
+    })
+
+    const control = controlRef.current
+    const overlay = overlayRef.current
+    expect(control).not.toBeNull()
+    expect(overlay).not.toBeNull()
+    expect(overlay?.getAttribute('aria-hidden')).toBe('true')
+
+    control!.scrollLeft = 37
+    control!.scrollTop = 18
+    act(() => control!.dispatchEvent(new Event('scroll', { bubbles: true })))
+    expect(overlay?.scrollLeft).toBe(37)
+    expect(overlay?.scrollTop).toBe(18)
+
+    control!.setSelectionRange(2, 8)
+    act(() => control!.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })))
+    expect(overlay?.style.visibility).toBe('hidden')
+    expect(control?.style.color).toBe('var(--text-primary)')
+    expect(control?.selectionStart).toBe(2)
+    expect(control?.selectionEnd).toBe(8)
+
+    act(() => control!.dispatchEvent(new CompositionEvent('compositionend', { bubbles: true })))
+    expect(onCompositionEnd).toHaveBeenCalledOnce()
+    expect(overlay?.style.visibility).toBe('')
+    expect(control?.style.color).toBe('')
+    expect(control?.selectionStart).toBe(2)
+    expect(control?.selectionEnd).toBe(8)
+  })
+
+  it('synchronizes when a controlled value changes without a scroll event', () => {
+    const controlRef = createRef<HTMLInputElement>()
+    const overlayRef = createRef<HTMLDivElement>()
+    const render = (value: string) => (
+      <MirroredInput
+        ref={controlRef}
+        value={value}
+        readOnly
+        overlay={value}
+        overlayClassName='absolute inset-0'
+        overlayRef={overlayRef}
+      />
+    )
+
+    act(() => root.render(render('first')))
+    controlRef.current!.scrollLeft = 25
+    act(() => root.render(render('second')))
+    expect(overlayRef.current?.scrollLeft).toBe(25)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.tsx
new file mode 100644
index 00000000000..5d53d9d995e
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.tsx
@@ -0,0 +1,211 @@
+import {
+  type CSSProperties,
+  type InputHTMLAttributes,
+  type ReactNode,
+  type Ref,
+  type TextareaHTMLAttributes,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { cn, Input, Textarea } from '@sim/emcn'
+
+interface MirrorProps {
+  overlay: ReactNode
+  overlayClassName: string
+  overlayStyle?: CSSProperties
+  overlayRef?: Ref<HTMLDivElement>
+}
+
+type MirroredInputProps = InputHTMLAttributes<HTMLInputElement> & MirrorProps
+type MirroredTextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & MirrorProps
+
+function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
+  if (typeof ref === 'function') ref(value)
+  else if (ref) ref.current = value
+}
+
+/** Keeps a formatted text mirror aligned with the native editing control. */
+function useMirror<T extends HTMLInputElement | HTMLTextAreaElement>(
+  forwardedRef: Ref<T> | undefined,
+  overlayRef: Ref<HTMLDivElement> | undefined,
+  value: string | number | readonly string[] | undefined
+) {
+  const control = useRef<T | null>(null)
+  const mirror = useRef<HTMLDivElement | null>(null)
+  const animationFrame = useRef<number | null>(null)
+  const [isComposing, setIsComposing] = useState(false)
+
+  const syncScroll = useCallback(() => {
+    if (!control.current || !mirror.current) return
+    mirror.current.scrollLeft = control.current.scrollLeft
+    mirror.current.scrollTop = control.current.scrollTop
+  }, [])
+
+  const scheduleSync = useCallback(() => {
+    if (animationFrame.current !== null) cancelAnimationFrame(animationFrame.current)
+    animationFrame.current = requestAnimationFrame(() => {
+      animationFrame.current = null
+      syncScroll()
+    })
+  }, [syncScroll])
+
+  useEffect(() => {
+    syncScroll()
+  }, [syncScroll, value, isComposing])
+
+  useEffect(
+    () => () => {
+      if (animationFrame.current !== null) cancelAnimationFrame(animationFrame.current)
+    },
+    []
+  )
+
+  const setControlRef = useCallback(
+    (node: T | null) => {
+      control.current = node
+      assignRef(forwardedRef, node)
+    },
+    [forwardedRef]
+  )
+
+  const setOverlayRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      mirror.current = node
+      assignRef(overlayRef, node)
+      syncScroll()
+    },
+    [overlayRef, syncScroll]
+  )
+
+  return { isComposing, setIsComposing, scheduleSync, setControlRef, setOverlayRef, syncScroll }
+}
+
+/** Native single-line editor with an accessible, synchronized formatted-text mirror. */
+export function MirroredInput({
+  overlay,
+  overlayClassName,
+  overlayStyle,
+  overlayRef,
+  className,
+  onScroll,
+  onInput,
+  onPaste,
+  onCompositionStart,
+  onCompositionEnd,
+  style,
+  value,
+  ref,
+  ...props
+}: MirroredInputProps & { ref?: Ref<HTMLInputElement> }) {
+  const mirror = useMirror(ref, overlayRef, value)
+
+  return (
+    <>
+      <Input
+        {...props}
+        ref={mirror.setControlRef}
+        value={value}
+        className={cn(
+          'text-transparent caret-foreground transition-[background-color,border-color,text-decoration-color]',
+          className
+        )}
+        style={{ ...style, ...(mirror.isComposing && { color: 'var(--text-primary)' }) }}
+        onScroll={(event) => {
+          mirror.syncScroll()
+          onScroll?.(event)
+        }}
+        onInput={(event) => {
+          onInput?.(event)
+          mirror.scheduleSync()
+        }}
+        onPaste={(event) => {
+          onPaste?.(event)
+          mirror.scheduleSync()
+        }}
+        onCompositionStart={(event) => {
+          mirror.setIsComposing(true)
+          onCompositionStart?.(event)
+        }}
+        onCompositionEnd={(event) => {
+          onCompositionEnd?.(event)
+          mirror.setIsComposing(false)
+          mirror.scheduleSync()
+        }}
+      />
+      <div
+        ref={mirror.setOverlayRef}
+        aria-hidden='true'
+        className={overlayClassName}
+        style={{ ...overlayStyle, ...(mirror.isComposing && { visibility: 'hidden' }) }}
+      >
+        {overlay}
+      </div>
+    </>
+  )
+}
+
+/** Native multiline editor with the same scroll and composition behavior. */
+export function MirroredTextarea({
+  overlay,
+  overlayClassName,
+  overlayStyle,
+  overlayRef,
+  className,
+  onScroll,
+  onInput,
+  onPaste,
+  onCompositionStart,
+  onCompositionEnd,
+  style,
+  value,
+  ref,
+  ...props
+}: MirroredTextareaProps & { ref?: Ref<HTMLTextAreaElement> }) {
+  const mirror = useMirror(ref, overlayRef, value)
+
+  return (
+    <>
+      <Textarea
+        {...props}
+        ref={mirror.setControlRef}
+        value={value}
+        className={cn(
+          'text-transparent caret-foreground transition-[background-color,border-color,text-decoration-color]',
+          className
+        )}
+        style={{ ...style, ...(mirror.isComposing && { color: 'var(--text-primary)' }) }}
+        onScroll={(event) => {
+          mirror.syncScroll()
+          onScroll?.(event)
+        }}
+        onInput={(event) => {
+          onInput?.(event)
+          mirror.scheduleSync()
+        }}
+        onPaste={(event) => {
+          onPaste?.(event)
+          mirror.scheduleSync()
+        }}
+        onCompositionStart={(event) => {
+          mirror.setIsComposing(true)
+          onCompositionStart?.(event)
+        }}
+        onCompositionEnd={(event) => {
+          onCompositionEnd?.(event)
+          mirror.setIsComposing(false)
+          mirror.scheduleSync()
+        }}
+      />
+      <div
+        ref={mirror.setOverlayRef}
+        aria-hidden='true'
+        className={overlayClassName}
+        style={{ ...overlayStyle, ...(mirror.isComposing && { visibility: 'hidden' }) }}
+      >
+        {overlay}
+      </div>
+    </>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index f74ffd665ae..89df63cf1d3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -1,7 +1,8 @@
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { cn, Input } from '@sim/emcn'
+import { cn } from '@sim/emcn'
 import { useReactFlow } from '@xyflow/react'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { MirroredInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import {
   maskSecretText,
   shouldMaskSecretValue,
@@ -129,8 +130,6 @@ export const ShortInput = memo(function ShortInput({
 
   const isWandEnabled = config.wandConfig?.enabled ?? false
 
-  const overlayRef = useRef<HTMLDivElement>(null)
-
   const reactFlowInstance = useReactFlow()
 
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
@@ -235,12 +234,6 @@ export const ShortInput = memo(function ShortInput({
     }
   }, [baseValue, wandHook.isStreaming])
 
-  const handleScroll = useCallback((e: React.UIEvent<HTMLInputElement>) => {
-    if (overlayRef.current) {
-      overlayRef.current.scrollLeft = e.currentTarget.scrollLeft
-    }
-  }, [])
-
   const handlePaste = useCallback((_e: React.ClipboardEvent<HTMLInputElement>) => {
     justPastedRef.current = true
     setTimeout(() => {
@@ -369,9 +362,9 @@ export const ShortInput = memo(function ShortInput({
 
             return (
               <>
-                <Input
+                <MirroredInput
                   ref={ref as React.RefObject<HTMLInputElement>}
-                  className='allow-scroll w-full overflow-auto text-transparent caret-foreground [-ms-overflow-style:none] [letter-spacing:inherit] [scrollbar-width:none] placeholder:text-muted-foreground/50 [&::-webkit-scrollbar]:hidden'
+                  className='allow-scroll w-full overflow-auto [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground/50 [&::-webkit-scrollbar]:hidden'
                   readOnly={readOnly}
                   placeholder={placeholder ?? ''}
                   type='text'
@@ -384,23 +377,18 @@ export const ShortInput = memo(function ShortInput({
                   onBlur={handleBlur}
                   onDrop={onDrop as (e: React.DragEvent<HTMLInputElement>) => void}
                   onDragOver={onDragOver as (e: React.DragEvent<HTMLInputElement>) => void}
-                  onScroll={handleScroll}
                   onPaste={handlePaste}
                   onWheel={handleWheel}
                   onKeyDown={onKeyDown as (e: React.KeyboardEvent<HTMLInputElement>) => void}
                   autoComplete='off'
                   disabled={disabled}
-                />
-                <div
-                  ref={overlayRef}
-                  className={cn(
+                  overlayClassName={cn(
                     'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 pr-3 font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
                     (isPreview || disabled) && 'opacity-50',
                     !(isPreview || disabled) && 'pointer-events-none'
                   )}
-                >
-                  <div className='min-w-fit whitespace-pre'>{formattedText}</div>
-                </div>
+                  overlay={<div className='min-w-fit whitespace-pre'>{formattedText}</div>}
+                />
               </>
             )
           }}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index a949d97a61b..953dce93308 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -10,7 +10,6 @@ import {
   cn,
   getCodeEditorProps,
   highlight,
-  Input,
   Label,
   languages,
   OverflowText,
@@ -25,6 +24,7 @@ import {
 import { FieldModeToggle } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-mode-toggle/field-mode-toggle'
 import { FileUpload } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { MirroredInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import {
   controlValueToFiles,
   defaultFileFieldMode,
@@ -108,10 +108,6 @@ export function FieldFormat({
   const [storeValue, setStoreValue] = useSubBlockValue<Field[]>(blockId, subBlockId)
   const valueInputRefs = useRef<Record<string, HTMLInputElement | HTMLTextAreaElement>>({})
   const nameInputRefs = useRef<Record<string, HTMLInputElement>>({})
-  const overlayRefs = useRef<Record<string, HTMLDivElement>>({})
-  const nameOverlayRefs = useRef<Record<string, HTMLDivElement>>({})
-  const descriptionInputRefs = useRef<Record<string, HTMLInputElement>>({})
-  const descriptionOverlayRefs = useRef<Record<string, HTMLDivElement>>({})
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
   const [fileFieldModes, setFileFieldModes] = useState<Record<string, 'upload' | 'json'>>({})
 
@@ -253,30 +249,6 @@ export function FieldFormat({
     setStoreValue(fields.map((f) => (f.id === id ? { ...f, collapsed: !f.collapsed } : f)))
   }
 
-  /**
-   * Syncs scroll position between input and overlay for text highlighting
-   */
-  const syncOverlayScroll = (fieldId: string, scrollLeft: number) => {
-    const overlay = overlayRefs.current[fieldId]
-    if (overlay) overlay.scrollLeft = scrollLeft
-  }
-
-  /**
-   * Syncs scroll position between name input and overlay for text highlighting
-   */
-  const syncNameOverlayScroll = (fieldId: string, scrollLeft: number) => {
-    const overlay = nameOverlayRefs.current[fieldId]
-    if (overlay) overlay.scrollLeft = scrollLeft
-  }
-
-  /**
-   * Syncs scroll position between description input and overlay for text highlighting
-   */
-  const syncDescriptionOverlayScroll = (fieldId: string, scrollLeft: number) => {
-    const overlay = descriptionOverlayRefs.current[fieldId]
-    if (overlay) overlay.scrollLeft = scrollLeft
-  }
-
   /**
    * Generates a unique field key for name inputs to avoid collision with value inputs
    */
@@ -307,11 +279,9 @@ export function FieldFormat({
       (newValue) => updateField(field.id, 'name', newValue)
     )
 
-    const inputClassName = cn('text-transparent [letter-spacing:inherit] caret-foreground')
-
     return (
       <>
-        <Input
+        <MirroredInput
           ref={(el) => {
             if (el) nameInputRefs.current[field.id] = el
           }}
@@ -322,40 +292,29 @@ export function FieldFormat({
           onDrop={handlers.onDrop}
           onDragOver={handlers.onDragOver}
           onFocus={handlers.onFocus}
-          onScroll={(e) => syncNameOverlayScroll(field.id, e.currentTarget.scrollLeft)}
-          onPaste={() =>
-            setTimeout(() => {
-              const input = nameInputRefs.current[field.id]
-              input && syncNameOverlayScroll(field.id, input.scrollLeft)
-            }, 0)
-          }
           placeholder={placeholder}
           disabled={isReadOnly}
           autoComplete='off'
-          className={cn('allow-scroll w-full overflow-x-auto overflow-y-hidden', inputClassName)}
-        />
-        <div
-          ref={(el) => {
-            if (el) nameOverlayRefs.current[field.id] = el
-          }}
-          className={cn(
+          className='allow-scroll w-full overflow-x-auto overflow-y-hidden'
+          overlayClassName={cn(
             'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
-          style={{ scrollbarWidth: 'none' }}
-        >
-          <div
-            className='w-full whitespace-pre'
-            style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-          >
-            {formatDisplayText(
-              fieldValue,
-              accessiblePrefixes
-                ? { accessiblePrefixes, workflowSearchHighlight }
-                : { highlightAll: true, workflowSearchHighlight }
-            )}
-          </div>
-        </div>
+          overlayStyle={{ scrollbarWidth: 'none' }}
+          overlay={
+            <div
+              className='w-full whitespace-pre'
+              style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
+            >
+              {formatDisplayText(
+                fieldValue,
+                accessiblePrefixes
+                  ? { accessiblePrefixes, workflowSearchHighlight }
+                  : { highlightAll: true, workflowSearchHighlight }
+              )}
+            </div>
+          }
+        />
         {fieldState.showTags && (
           <TagDropdown
             visible={fieldState.showTags}
@@ -408,8 +367,6 @@ export function FieldFormat({
       (newValue) => updateField(field.id, 'value', newValue)
     )
 
-    const inputClassName = cn('text-transparent [letter-spacing:inherit] caret-foreground')
-
     const tagDropdown = fieldState.showTags && (
       <TagDropdown
         visible={fieldState.showTags}
@@ -555,7 +512,7 @@ export function FieldFormat({
 
     return (
       <>
-        <Input
+        <MirroredInput
           ref={(el) => {
             if (el) valueInputRefs.current[field.id] = el
           }}
@@ -566,40 +523,29 @@ export function FieldFormat({
           onDrop={handlers.onDrop}
           onDragOver={handlers.onDragOver}
           onFocus={handlers.onFocus}
-          onScroll={(e) => syncOverlayScroll(field.id, e.currentTarget.scrollLeft)}
-          onPaste={() =>
-            setTimeout(() => {
-              const input = valueInputRefs.current[field.id] as HTMLInputElement | undefined
-              input && syncOverlayScroll(field.id, input.scrollLeft)
-            }, 0)
-          }
           placeholder={valuePlaceholder}
           disabled={isReadOnly}
           autoComplete='off'
-          className={cn('allow-scroll w-full overflow-x-auto overflow-y-hidden', inputClassName)}
-        />
-        <div
-          ref={(el) => {
-            if (el) overlayRefs.current[field.id] = el
-          }}
-          className={cn(
+          className='allow-scroll w-full overflow-x-auto overflow-y-hidden'
+          overlayClassName={cn(
             'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
-          style={{ scrollbarWidth: 'none' }}
-        >
-          <div
-            className='w-full whitespace-pre'
-            style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-          >
-            {formatDisplayText(
-              fieldValue,
-              accessiblePrefixes
-                ? { accessiblePrefixes, workflowSearchHighlight }
-                : { highlightAll: true, workflowSearchHighlight }
-            )}
-          </div>
-        </div>
+          overlayStyle={{ scrollbarWidth: 'none' }}
+          overlay={
+            <div
+              className='w-full whitespace-pre'
+              style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
+            >
+              {formatDisplayText(
+                fieldValue,
+                accessiblePrefixes
+                  ? { accessiblePrefixes, workflowSearchHighlight }
+                  : { highlightAll: true, workflowSearchHighlight }
+              )}
+            </div>
+          }
+        />
         {tagDropdown}
       </>
     )
@@ -670,61 +616,45 @@ export function FieldFormat({
             <div className='flex flex-col gap-1.5'>
               {renderFieldLabel('Description')}
               <div className='relative'>
-                <Input
-                  ref={(el) => {
-                    if (el) descriptionInputRefs.current[field.id] = el
-                  }}
+                <MirroredInput
                   value={field.description ?? ''}
                   onChange={(e) => updateField(field.id, 'description', e.target.value)}
-                  onScroll={(e) =>
-                    syncDescriptionOverlayScroll(field.id, e.currentTarget.scrollLeft)
-                  }
-                  onPaste={() =>
-                    setTimeout(() => {
-                      const input = descriptionInputRefs.current[field.id]
-                      input && syncDescriptionOverlayScroll(field.id, input.scrollLeft)
-                    }, 0)
-                  }
                   placeholder={descriptionPlaceholder}
                   disabled={isReadOnly}
                   autoComplete='off'
-                  className='allow-scroll w-full overflow-x-auto overflow-y-hidden text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50'
-                />
-                <div
-                  ref={(el) => {
-                    if (el) descriptionOverlayRefs.current[field.id] = el
-                  }}
-                  style={{ scrollbarWidth: 'none' }}
-                  className={cn(
+                  className='allow-scroll w-full overflow-x-auto overflow-y-hidden placeholder:text-muted-foreground/50'
+                  overlayStyle={{ scrollbarWidth: 'none' }}
+                  overlayClassName={cn(
                     'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
                     isReadOnly && 'opacity-50'
                   )}
-                >
-                  <span className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
-                    {formatDisplayText(
-                      field.description ?? '',
-                      accessiblePrefixes
-                        ? {
-                            accessiblePrefixes,
-                            workflowSearchHighlight: getActiveWorkflowSearchHighlight({
-                              activeSearchTarget,
-                              blockId,
-                              subBlockId,
-                              valuePath: [index, 'description'],
-                            }),
-                          }
-                        : {
-                            highlightAll: true,
-                            workflowSearchHighlight: getActiveWorkflowSearchHighlight({
-                              activeSearchTarget,
-                              blockId,
-                              subBlockId,
-                              valuePath: [index, 'description'],
-                            }),
-                          }
-                    )}
-                  </span>
-                </div>
+                  overlay={
+                    <span className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
+                      {formatDisplayText(
+                        field.description ?? '',
+                        accessiblePrefixes
+                          ? {
+                              accessiblePrefixes,
+                              workflowSearchHighlight: getActiveWorkflowSearchHighlight({
+                                activeSearchTarget,
+                                blockId,
+                                subBlockId,
+                                valuePath: [index, 'description'],
+                              }),
+                            }
+                          : {
+                              highlightAll: true,
+                              workflowSearchHighlight: getActiveWorkflowSearchHighlight({
+                                activeSearchTarget,
+                                blockId,
+                                subBlockId,
+                                valuePath: [index, 'description'],
+                              }),
+                            }
+                      )}
+                    </span>
+                  }
+                />
               </div>
             </div>
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 84b832a7cbb..fde95c5e00b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -6,16 +6,18 @@ import {
   Combobox,
   type ComboboxOption,
   cn,
-  Input,
   Label,
   OverflowText,
-  Textarea,
 } from '@sim/emcn'
 import { FileText, Plus, Trash } from '@sim/emcn/icons'
 import { generateId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
 import { FieldModeToggle } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-mode-toggle/field-mode-toggle'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import {
+  MirroredInput,
+  MirroredTextarea,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import {
   checkTagTrigger,
   TagDropdown,
@@ -322,11 +324,6 @@ export function VariablesInput({
     }))
   }
 
-  const syncOverlayScroll = (assignmentId: string, scrollLeft: number) => {
-    const overlay = overlayRefs.current[assignmentId]
-    if (overlay) overlay.scrollLeft = scrollLeft
-  }
-
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     if (e.key === 'Escape') {
       setShowTags(false)
@@ -492,7 +489,7 @@ export function VariablesInput({
                     />
                   ) : assignment.type === 'object' || assignment.type === 'array' ? (
                     <div className='relative'>
-                      <Textarea
+                      <MirroredTextarea
                         ref={(el) => {
                           if (el) valueInputRefs.current[assignment.id] = el
                         }}
@@ -512,13 +509,6 @@ export function VariablesInput({
                             setShowTags(true)
                           }
                         }}
-                        onScroll={(e) => {
-                          const overlay = overlayRefs.current[assignment.id]
-                          if (overlay) {
-                            overlay.scrollTop = e.currentTarget.scrollTop
-                            overlay.scrollLeft = e.currentTarget.scrollLeft
-                          }
-                        }}
                         placeholder={
                           assignment.type === 'object'
                             ? '{\n  "key": "value"\n}'
@@ -526,7 +516,7 @@ export function VariablesInput({
                         }
                         disabled={isReadOnly}
                         className={cn(
-                          'min-h-[120px] font-mono text-sm text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50',
+                          'min-h-[120px] font-mono text-sm placeholder:text-muted-foreground/50',
                           dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
                         )}
                         style={{
@@ -536,29 +526,28 @@ export function VariablesInput({
                         onDrop={(e) => handleDrop(e, assignment.id)}
                         onDragOver={(e) => handleDragOver(e, assignment.id)}
                         onDragLeave={(e) => handleDragLeave(e, assignment.id)}
-                      />
-                      <div
-                        ref={(el) => {
+                        overlayRef={(el) => {
                           if (el) overlayRefs.current[assignment.id] = el
                         }}
-                        className={cn(
+                        overlayClassName={cn(
                           'absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm',
                           !isReadOnly && 'pointer-events-none'
                         )}
-                        style={{ scrollbarWidth: 'none' }}
-                      >
-                        <div className='w-full whitespace-pre-wrap break-words'>
-                          {formatDisplayText(assignment.value || '', {
-                            accessiblePrefixes,
-                            highlightAll: !accessiblePrefixes,
-                            workflowSearchHighlight: valueSearchHighlight,
-                          })}
-                        </div>
-                      </div>
+                        overlayStyle={{ scrollbarWidth: 'none' }}
+                        overlay={
+                          <div className='w-full whitespace-pre-wrap break-words'>
+                            {formatDisplayText(assignment.value || '', {
+                              accessiblePrefixes,
+                              highlightAll: !accessiblePrefixes,
+                              workflowSearchHighlight: valueSearchHighlight,
+                            })}
+                          </div>
+                        }
+                      />
                     </div>
                   ) : (
                     <div className='relative'>
-                      <Input
+                      <MirroredInput
                         ref={(el) => {
                           if (el) valueInputRefs.current[assignment.id] = el
                         }}
@@ -579,58 +568,44 @@ export function VariablesInput({
                             setShowTags(true)
                           }
                         }}
-                        onScroll={(e) =>
-                          syncOverlayScroll(assignment.id, e.currentTarget.scrollLeft)
-                        }
-                        onPaste={() =>
-                          setTimeout(() => {
-                            const input = valueInputRefs.current[assignment.id]
-                            if (input)
-                              syncOverlayScroll(
-                                assignment.id,
-                                (input as HTMLInputElement).scrollLeft
-                              )
-                          }, 0)
-                        }
                         placeholder={`${assignment.type} value`}
                         disabled={isReadOnly}
                         autoComplete='off'
                         className={cn(
-                          'allow-scroll w-full overflow-x-auto overflow-y-hidden text-transparent caret-foreground [letter-spacing:inherit]',
+                          'allow-scroll w-full overflow-x-auto overflow-y-hidden',
                           dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
                         )}
                         onDrop={(e) => handleDrop(e, assignment.id)}
                         onDragOver={(e) => handleDragOver(e, assignment.id)}
                         onDragLeave={(e) => handleDragLeave(e, assignment.id)}
-                      />
-                      <div
-                        ref={(el) => {
+                        overlayRef={(el) => {
                           if (el) overlayRefs.current[assignment.id] = el
                         }}
-                        className={cn(
+                        overlayClassName={cn(
                           'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
                           !isReadOnly && 'pointer-events-none'
                         )}
-                        style={{ scrollbarWidth: 'none' }}
-                      >
-                        <div
-                          className='w-full whitespace-pre'
-                          style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-                        >
-                          {formatDisplayText(
-                            assignment.value || '',
-                            accessiblePrefixes
-                              ? {
-                                  accessiblePrefixes,
-                                  workflowSearchHighlight: valueSearchHighlight,
-                                }
-                              : {
-                                  highlightAll: true,
-                                  workflowSearchHighlight: valueSearchHighlight,
-                                }
-                          )}
-                        </div>
-                      </div>
+                        overlayStyle={{ scrollbarWidth: 'none' }}
+                        overlay={
+                          <div
+                            className='w-full whitespace-pre'
+                            style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
+                          >
+                            {formatDisplayText(
+                              assignment.value || '',
+                              accessiblePrefixes
+                                ? {
+                                    accessiblePrefixes,
+                                    workflowSearchHighlight: valueSearchHighlight,
+                                  }
+                                : {
+                                    highlightAll: true,
+                                    workflowSearchHighlight: valueSearchHighlight,
+                                  }
+                            )}
+                          </div>
+                        }
+                      />
                     </div>
                   )}
 
diff --git 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
index 803279ad760..1d29859ac08 100644
--- 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
@@ -1,13 +1,6 @@
 'use client'
 
-import {
-  Code as CodeEditor,
-  Combobox,
-  FieldDivider,
-  getCodeEditorProps,
-  Input,
-  Label,
-} from '@sim/emcn'
+import { Code as CodeEditor, Combobox, FieldDivider, getCodeEditorProps, Label } from '@sim/emcn'
 import { ChevronUp } from '@sim/emcn/icons'
 import SimpleCodeEditor from 'react-simple-code-editor'
 import { WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS } from '@/lib/workflows/search-replace/subflow-fields'
@@ -15,6 +8,7 @@ import {
   formatDisplayText,
   getValidWorkflowSearchRange,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { MirroredInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider'
@@ -160,19 +154,18 @@ export function SubflowEditor({
 
             {isCountMode ? (
               <div className='relative'>
-                <Input
+                <MirroredInput
                   type='text'
                   value={inputValue}
                   onChange={handleSubflowIterationsChange}
                   onBlur={handleSubflowIterationsBlur}
                   disabled={!userCanEdit}
-                  className='mb-1 text-transparent caret-[var(--text-primary)] [letter-spacing:inherit]'
-                />
-                <div className='pointer-events-none absolute inset-x-0 top-0 flex h-8 items-center overflow-hidden px-2 font-sans text-sm'>
-                  {formatDisplayText(inputValue, {
+                  className='mb-1 caret-[var(--text-primary)]'
+                  overlayClassName='pointer-events-none absolute inset-x-0 top-0 flex h-8 items-center overflow-hidden px-2 font-sans text-sm'
+                  overlay={formatDisplayText(inputValue, {
                     workflowSearchHighlight: configSearchHighlight,
                   })}
-                </div>
+                />
                 <div className='text-[var(--text-muted)] text-micro'>
                   Enter a whole number greater than 0.
                 </div>
@@ -226,19 +219,18 @@ export function SubflowEditor({
               <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
                 Parallel Batch Size
               </Label>
-              <Input
+              <MirroredInput
                 type='text'
                 value={batchSizeValue}
                 onChange={handleParallelBatchSizeChange}
                 onBlur={handleParallelBatchSizeBlur}
                 disabled={!userCanEdit}
-                className='mb-1 text-transparent caret-[var(--text-primary)] [letter-spacing:inherit]'
-              />
-              <div className='pointer-events-none absolute inset-x-0 top-[26px] flex h-8 items-center overflow-hidden px-2 font-sans text-sm'>
-                {formatDisplayText(batchSizeValue, {
+                className='mb-1 caret-[var(--text-primary)]'
+                overlayClassName='pointer-events-none absolute inset-x-0 top-[26px] flex h-8 items-center overflow-hidden px-2 font-sans text-sm'
+                overlay={formatDisplayText(batchSizeValue, {
                   workflowSearchHighlight: batchSizeSearchHighlight,
                 })}
-              </div>
+              />
               <div className='text-[var(--text-muted)] text-micro'>
                 Run 1 to 20 parallel branches at a time.
               </div>

From 70801ca2c77af59ef249823dab0b6634db0d748f Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Thu, 24 Sep 2026 12:16:56 -0700
Subject: [PATCH 2/4] test(workflow): use absolute mirrored field import

---
 .../components/mirrored-field/mirrored-field.test.tsx        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx
index 92a3e42081c..20f82238bcf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx
@@ -17,7 +17,10 @@ vi.mock('@sim/emcn', () => ({
   ) => <textarea {...props} />,
 }))
 
-import { MirroredInput, MirroredTextarea } from './mirrored-field'
+import {
+  MirroredInput,
+  MirroredTextarea,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field'
 
 ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
 

From 07dcb3e07435e4a8dc8d404aba54b79bd5542a53 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Thu, 24 Sep 2026 12:25:13 -0700
Subject: [PATCH 3/4] refactor(workflow): declare mirrored props and class
 states

---
 .../mirrored-field/mirrored-field.test.tsx    |  8 ++---
 .../mirrored-field/mirrored-field.tsx         | 31 ++++++++++++-------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx
index 20f82238bcf..72af19ba3c7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.test.tsx
@@ -78,15 +78,15 @@ describe('mirrored workflow fields', () => {
 
     control!.setSelectionRange(2, 8)
     act(() => control!.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })))
-    expect(overlay?.style.visibility).toBe('hidden')
-    expect(control?.style.color).toBe('var(--text-primary)')
+    expect(overlay?.classList.contains('invisible')).toBe(true)
+    expect(control?.classList.contains('text-[var(--text-primary)]')).toBe(true)
     expect(control?.selectionStart).toBe(2)
     expect(control?.selectionEnd).toBe(8)
 
     act(() => control!.dispatchEvent(new CompositionEvent('compositionend', { bubbles: true })))
     expect(onCompositionEnd).toHaveBeenCalledOnce()
-    expect(overlay?.style.visibility).toBe('')
-    expect(control?.style.color).toBe('')
+    expect(overlay?.classList.contains('invisible')).toBe(false)
+    expect(control?.classList.contains('text-[var(--text-primary)]')).toBe(false)
     expect(control?.selectionStart).toBe(2)
     expect(control?.selectionEnd).toBe(8)
   })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.tsx
index 5d53d9d995e..89107908c21 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mirrored-field/mirrored-field.tsx
@@ -18,8 +18,13 @@ interface MirrorProps {
   overlayRef?: Ref<HTMLDivElement>
 }
 
-type MirroredInputProps = InputHTMLAttributes<HTMLInputElement> & MirrorProps
-type MirroredTextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & MirrorProps
+interface MirroredInputProps extends InputHTMLAttributes<HTMLInputElement>, MirrorProps {
+  ref?: Ref<HTMLInputElement>
+}
+
+interface MirroredTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, MirrorProps {
+  ref?: Ref<HTMLTextAreaElement>
+}
 
 function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
   if (typeof ref === 'function') ref(value)
@@ -98,7 +103,7 @@ export function MirroredInput({
   value,
   ref,
   ...props
-}: MirroredInputProps & { ref?: Ref<HTMLInputElement> }) {
+}: MirroredInputProps) {
   const mirror = useMirror(ref, overlayRef, value)
 
   return (
@@ -109,9 +114,10 @@ export function MirroredInput({
         value={value}
         className={cn(
           'text-transparent caret-foreground transition-[background-color,border-color,text-decoration-color]',
-          className
+          className,
+          mirror.isComposing && 'text-[var(--text-primary)]'
         )}
-        style={{ ...style, ...(mirror.isComposing && { color: 'var(--text-primary)' }) }}
+        style={style}
         onScroll={(event) => {
           mirror.syncScroll()
           onScroll?.(event)
@@ -137,8 +143,8 @@ export function MirroredInput({
       <div
         ref={mirror.setOverlayRef}
         aria-hidden='true'
-        className={overlayClassName}
-        style={{ ...overlayStyle, ...(mirror.isComposing && { visibility: 'hidden' }) }}
+        className={cn(overlayClassName, mirror.isComposing && 'invisible')}
+        style={overlayStyle}
       >
         {overlay}
       </div>
@@ -162,7 +168,7 @@ export function MirroredTextarea({
   value,
   ref,
   ...props
-}: MirroredTextareaProps & { ref?: Ref<HTMLTextAreaElement> }) {
+}: MirroredTextareaProps) {
   const mirror = useMirror(ref, overlayRef, value)
 
   return (
@@ -173,9 +179,10 @@ export function MirroredTextarea({
         value={value}
         className={cn(
           'text-transparent caret-foreground transition-[background-color,border-color,text-decoration-color]',
-          className
+          className,
+          mirror.isComposing && 'text-[var(--text-primary)]'
         )}
-        style={{ ...style, ...(mirror.isComposing && { color: 'var(--text-primary)' }) }}
+        style={style}
         onScroll={(event) => {
           mirror.syncScroll()
           onScroll?.(event)
@@ -201,8 +208,8 @@ export function MirroredTextarea({
       <div
         ref={mirror.setOverlayRef}
         aria-hidden='true'
-        className={overlayClassName}
-        style={{ ...overlayStyle, ...(mirror.isComposing && { visibility: 'hidden' }) }}
+        className={cn(overlayClassName, mirror.isComposing && 'invisible')}
+        style={overlayStyle}
       >
         {overlay}
       </div>

From 926d13a61a122e1ec84b323d9ec5fd5263e9f89c Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Thu, 24 Sep 2026 12:35:28 -0700
Subject: [PATCH 4/4] style(workflow): express mirrored overlay constants as
 classes

---
 .../condition-input/condition-input.tsx       |  8 ++-----
 .../input-mapping/input-mapping.tsx           |  7 +------
 .../components/long-input/long-input.tsx      | 19 ++++-------------
 .../components/starter/input-format.tsx       | 21 ++++++-------------
 .../variables-input/variables-input.tsx       | 17 ++++-----------
 5 files changed, 17 insertions(+), 55 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index cb4121fbae1..7bca8ddcbf1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -1103,14 +1103,10 @@ export function ConditionInput({
                     else overlayRefs.current.delete(block.id)
                   }}
                   overlayClassName={cn(
-                    'pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-3 py-2 font-sans text-sm',
+                    'pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-3 py-2 text-sm [font-family:inherit] [line-height:inherit]',
                     (isPreview || disabled) && 'opacity-50'
                   )}
-                  overlayStyle={{
-                    fontFamily: 'inherit',
-                    lineHeight: 'inherit',
-                    height: `${getRouterHeight(block.id)}px`,
-                  }}
+                  overlayStyle={{ height: `${getRouterHeight(block.id)}px` }}
                   overlay={formatDisplayText(block.value, {
                     accessiblePrefixes,
                     highlightAll: !accessiblePrefixes,
diff --git 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
index fcacf937f02..068a4605420 100644
--- 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
@@ -258,7 +258,6 @@ function InputMappingField({
             disabled={disabled}
             autoComplete='off'
             className='allow-scroll w-full overflow-auto'
-            style={{ overflowX: 'auto' }}
             overlayRef={(el) => {
               if (el) overlayRefs.current.set(fieldId, el)
             }}
@@ -266,12 +265,8 @@ function InputMappingField({
               'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
               !disabled && 'pointer-events-none'
             )}
-            overlayStyle={{ overflowX: 'auto' }}
             overlay={
-              <div
-                className='w-full whitespace-pre'
-                style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-              >
+              <div className='w-full min-w-fit whitespace-pre [scrollbar-width:none]'>
                 {formatDisplayText(
                   value,
                   accessiblePrefixes
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index e7106469faf..ff727d1087f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -342,7 +342,7 @@ export function LongInput({
               <MirroredTextarea
                 ref={setRefs}
                 className={cn(
-                  'allow-scroll box-border min-h-full w-full resize-none placeholder:text-muted-foreground/50',
+                  'allow-scroll box-border min-h-full w-full resize-none whitespace-pre-wrap break-words [font-family:inherit] [line-height:inherit] placeholder:text-muted-foreground/50',
                   wandHook.isStreaming && 'pointer-events-none cursor-not-allowed opacity-50'
                 )}
                 rows={rows ?? DEFAULT_ROWS}
@@ -358,25 +358,14 @@ export function LongInput({
                 }}
                 onBlur={handleBlur}
                 disabled={isPreview || disabled}
-                style={{
-                  fontFamily: 'inherit',
-                  lineHeight: 'inherit',
-                  height: `${height}px`,
-                  wordBreak: 'break-word',
-                  whiteSpace: 'pre-wrap',
-                }}
+                style={{ height: `${height}px` }}
                 overlayRef={overlayRef}
                 overlayClassName={cn(
-                  'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 font-sans text-sm',
+                  'absolute inset-0 box-border w-full overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 text-sm [font-family:inherit] [line-height:inherit]',
                   (isPreview || disabled) && 'opacity-50',
                   !(isPreview || disabled) && 'pointer-events-none'
                 )}
-                overlayStyle={{
-                  fontFamily: 'inherit',
-                  lineHeight: 'inherit',
-                  width: '100%',
-                  height: `${height}px`,
-                }}
+                overlayStyle={{ height: `${height}px` }}
                 overlay={
                   shouldMask
                     ? displayValue
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 953dce93308..f7dc9f7b0ca 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -297,15 +297,11 @@ export function FieldFormat({
           autoComplete='off'
           className='allow-scroll w-full overflow-x-auto overflow-y-hidden'
           overlayClassName={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm [scrollbar-width:none]',
             !isReadOnly && 'pointer-events-none'
           )}
-          overlayStyle={{ scrollbarWidth: 'none' }}
           overlay={
-            <div
-              className='w-full whitespace-pre'
-              style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-            >
+            <div className='w-full min-w-fit whitespace-pre [scrollbar-width:none]'>
               {formatDisplayText(
                 fieldValue,
                 accessiblePrefixes
@@ -528,15 +524,11 @@ export function FieldFormat({
           autoComplete='off'
           className='allow-scroll w-full overflow-x-auto overflow-y-hidden'
           overlayClassName={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm [scrollbar-width:none]',
             !isReadOnly && 'pointer-events-none'
           )}
-          overlayStyle={{ scrollbarWidth: 'none' }}
           overlay={
-            <div
-              className='w-full whitespace-pre'
-              style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-            >
+            <div className='w-full min-w-fit whitespace-pre [scrollbar-width:none]'>
               {formatDisplayText(
                 fieldValue,
                 accessiblePrefixes
@@ -623,13 +615,12 @@ export function FieldFormat({
                   disabled={isReadOnly}
                   autoComplete='off'
                   className='allow-scroll w-full overflow-x-auto overflow-y-hidden placeholder:text-muted-foreground/50'
-                  overlayStyle={{ scrollbarWidth: 'none' }}
                   overlayClassName={cn(
-                    'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
+                    'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm [scrollbar-width:none]',
                     isReadOnly && 'opacity-50'
                   )}
                   overlay={
-                    <span className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
+                    <span className='w-full min-w-fit whitespace-pre'>
                       {formatDisplayText(
                         field.description ?? '',
                         accessiblePrefixes
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index fde95c5e00b..1bb69babc24 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -516,13 +516,9 @@ export function VariablesInput({
                         }
                         disabled={isReadOnly}
                         className={cn(
-                          'min-h-[120px] font-mono text-sm placeholder:text-muted-foreground/50',
+                          'min-h-[120px] whitespace-pre-wrap break-words font-mono text-sm placeholder:text-muted-foreground/50',
                           dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
                         )}
-                        style={{
-                          wordBreak: 'break-word',
-                          whiteSpace: 'pre-wrap',
-                        }}
                         onDrop={(e) => handleDrop(e, assignment.id)}
                         onDragOver={(e) => handleDragOver(e, assignment.id)}
                         onDragLeave={(e) => handleDragLeave(e, assignment.id)}
@@ -530,10 +526,9 @@ export function VariablesInput({
                           if (el) overlayRefs.current[assignment.id] = el
                         }}
                         overlayClassName={cn(
-                          'absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm',
+                          'absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm [scrollbar-width:none]',
                           !isReadOnly && 'pointer-events-none'
                         )}
-                        overlayStyle={{ scrollbarWidth: 'none' }}
                         overlay={
                           <div className='w-full whitespace-pre-wrap break-words'>
                             {formatDisplayText(assignment.value || '', {
@@ -582,15 +577,11 @@ export function VariablesInput({
                           if (el) overlayRefs.current[assignment.id] = el
                         }}
                         overlayClassName={cn(
-                          'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
+                          'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm [scrollbar-width:none]',
                           !isReadOnly && 'pointer-events-none'
                         )}
-                        overlayStyle={{ scrollbarWidth: 'none' }}
                         overlay={
-                          <div
-                            className='w-full whitespace-pre'
-                            style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-                          >
+                          <div className='w-full min-w-fit whitespace-pre [scrollbar-width:none]'>
                             {formatDisplayText(
                               assignment.value || '',
                               accessiblePrefixes