From 2e0aacdf50a4156ed576539ecfcad81746e19617 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 7 Jun 2026 09:35:48 -0700
Subject: [PATCH 1/9] fix(user-input): atomic chip selection, modifier-key
 handling, and stale overlay ghost

---
 .../user-input/components/constants.ts        |  29 +++--
 .../home/components/user-input/user-input.tsx | 101 +++++++++++++-----
 2 files changed, 97 insertions(+), 33 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
index 3cf2bcc2a4e..0391c28beb5 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
@@ -43,22 +43,35 @@ export interface PlusMenuHandle {
   selectActive: () => boolean
 }
 
+/**
+ * Box and typography shared by the textarea and its mirror overlay — both must
+ * produce identical line wrapping so the overlay text sits exactly over the
+ * (transparent) textarea text.
+ */
+const FIELD_MIRROR_CLASSES = cn(
+  'm-0 box-border min-h-[24px] w-full break-words [overflow-wrap:anywhere] border-0 bg-transparent',
+  'px-1 py-1 font-body text-[15px] leading-[24px] tracking-[-0.015em]'
+)
+
 export const TEXTAREA_BASE_CLASSES = cn(
-  'm-0 box-border h-auto min-h-[24px] w-full resize-none',
-  'overflow-y-auto overflow-x-hidden break-words [overflow-wrap:anywhere] border-0 bg-transparent',
-  'px-1 py-1 font-body text-[15px] leading-[24px] tracking-[-0.015em]',
+  FIELD_MIRROR_CLASSES,
+  'h-auto resize-none overflow-y-auto overflow-x-hidden',
   'text-transparent caret-[var(--text-primary)] outline-none',
   'placeholder:font-[380] placeholder:text-[var(--text-subtle)]',
   'focus-visible:ring-0 focus-visible:ring-offset-0',
   '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
 )
 
+/**
+ * Pinned to the textarea's box (`inset-0`) and clipped (`overflow-hidden`) so
+ * stale paints can never escape the input. Not a scroll container — it mirrors
+ * the textarea's scroll position via programmatic `scrollTop`, which works on
+ * `overflow: hidden` boxes.
+ */
 export const OVERLAY_CLASSES = cn(
-  'pointer-events-none absolute top-0 left-0 m-0 box-border h-auto w-full resize-none',
-  'overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words [overflow-wrap:anywhere] border-0 bg-transparent',
-  'px-1 py-1 font-body text-[15px] leading-[24px] tracking-[-0.015em]',
-  'text-[var(--text-primary)] outline-none',
-  '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+  FIELD_MIRROR_CLASSES,
+  'pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap',
+  'text-[var(--text-primary)]'
 )
 
 export const SEND_BUTTON_BASE = 'h-[28px] w-[28px] rounded-full border-0 p-0 transition-colors'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index baa7b2683cf..291c499a496 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -834,7 +834,18 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
         }
       }
 
-      if (selectionLength === 0 && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+      // Hop chips on plain arrows only: Shift/Cmd/Alt/Ctrl variants and IME
+      // composition keep native handling; the select handler snaps any
+      // resulting edge inside a chip to a chip boundary.
+      if (
+        selectionLength === 0 &&
+        (e.key === 'ArrowLeft' || e.key === 'ArrowRight') &&
+        !e.shiftKey &&
+        !e.metaKey &&
+        !e.altKey &&
+        !e.ctrlKey &&
+        !e.nativeEvent.isComposing
+      ) {
         if (textarea) {
           if (e.key === 'ArrowLeft') {
             const nextPos = Math.max(0, selStart - 1)
@@ -858,7 +869,9 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
         }
       }
 
-      if (e.key.length === 1 || e.key === 'Space') {
+      // Block typing inside a chip (snap to its end instead). Cmd/Ctrl
+      // shortcuts (Cmd+A, Cmd+C, ...) don't insert text and must pass through.
+      if (e.key.length === 1 && !e.metaKey && !e.ctrlKey) {
         const blocked =
           selectionLength === 0 && !!mentionTokensWithContext.findRangeContaining(selStart)
         if (blocked) {
@@ -1017,20 +1030,70 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     ]
   )
 
+  /** Last observed selection; tells which edge of a range moved, and which way. */
+  const lastSelectionRef = useRef<{ start: number; end: number }>({ start: 0, end: 0 })
+
+  /**
+   * Keeps mention chips atomic under every selection gesture. A collapsed
+   * caret inside a chip snaps to the nearest edge; a ranged selection edge
+   * inside a chip snaps to a chip boundary — never collapsed — so select-all,
+   * Shift+arrows, drag, and double-click all select chips whole.
+   */
   const handleSelectAdjust = useCallback(() => {
     const textarea = textareaRef.current
     if (!textarea) return
-    const pos = textarea.selectionStart ?? 0
-    const r = mentionTokensWithContext.findRangeContaining(pos)
-    if (r) {
-      const snapPos = pos - r.start < r.end - pos ? r.start : r.end
+    const start = textarea.selectionStart ?? 0
+    const end = textarea.selectionEnd ?? 0
+    const prev = lastSelectionRef.current
+
+    // Deferred so in-flight click/drag processing can't override the write;
+    // bails if the selection moved again first (a newer event supersedes it).
+    const applySelection = (nextStart: number, nextEnd: number) => {
+      const direction = textarea.selectionDirection ?? undefined
       setTimeout(() => {
-        textarea.setSelectionRange(snapPos, snapPos)
+        if (textarea.selectionStart !== start || textarea.selectionEnd !== end) return
+        textarea.setSelectionRange(nextStart, nextEnd, direction)
       }, 0)
+    }
+
+    if (start !== end) {
+      const startRange = mentionTokensWithContext.findRangeContaining(start)
+      const endRange = mentionTokensWithContext.findRangeContaining(end)
+      // A lone moved edge (keyboard extend/shrink, drag) snaps in its direction
+      // of travel: growing absorbs the chip, shrinking releases it. Fresh
+      // selections (double-click, select-all) expand outward.
+      const singleEdgeMoved = (start !== prev.start) !== (end !== prev.end)
+      let newStart = startRange
+        ? singleEdgeMoved && start > prev.start
+          ? startRange.end
+          : startRange.start
+        : start
+      const newEnd = endRange
+        ? singleEdgeMoved && end < prev.end
+          ? endRange.start
+          : endRange.end
+        : end
+      // A selection contained in one chip snaps both edges; don't let it invert.
+      if (newStart > newEnd) {
+        newStart = newEnd
+      }
+      lastSelectionRef.current = { start: newStart, end: newEnd }
+      if (newStart !== start || newEnd !== end) {
+        applySelection(newStart, newEnd)
+      }
+      return
+    }
+
+    const r = mentionTokensWithContext.findRangeContaining(start)
+    if (r) {
+      const snapPos = start - r.start < r.end - start ? r.start : r.end
+      lastSelectionRef.current = { start: snapPos, end: snapPos }
+      applySelection(snapPos, snapPos)
       return
     }
-    syncMentionState(textarea, textarea.value, pos)
-    syncSlashState(textarea, textarea.value, pos)
+    lastSelectionRef.current = { start, end }
+    syncMentionState(textarea, textarea.value, start)
+    syncSlashState(textarea, textarea.value, start)
   }, [textareaRef, mentionTokensWithContext, syncMentionState, syncSlashState])
 
   const handleInput = useCallback(
@@ -1230,12 +1293,8 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
       elements.push(
         <span key={`mention-${i}-${range.start}-${range.end}`}>
           <span className='relative'>
-            {/* Spacer reserves the real trigger glyph's width so the overlay's
-                advance matches the transparent textarea char-for-char —
-                hardcoding a width here would drift the text. For '@' the glyph is
-                ~1em; skill chips store an EM SPACE sentinel (SKILL_CHIP_TRIGGER)
-                in place of the narrow '/' so the centered 12px icon fits its slot
-                exactly like '@' does. */}
+            {/* Invisible trigger glyph keeps the overlay's advance identical to
+                the transparent textarea; the icon centers over its slot. */}
             <span className='invisible'>{range.token.charAt(0)}</span>
             {mentionIconNode}
           </span>
@@ -1274,16 +1333,8 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
         onRemoveFile={handleRemoveFile}
       />
 
-      {/* Clip the absolutely-positioned mirror overlay to the textarea's box.
-          The overlay is `h-auto`, so its content (e.g. the trailing-newline
-          sentinel on Shift+Enter) can exceed the textarea height and would
-          otherwise paint over the toolbar below. */}
-      <div className='relative overflow-hidden'>
-        <div
-          ref={overlayRef}
-          className={cn(OVERLAY_CLASSES, isInitialView ? 'max-h-[30vh]' : 'max-h-[200px]')}
-          aria-hidden='true'
-        >
+      <div className='relative'>
+        <div ref={overlayRef} className={OVERLAY_CLASSES} aria-hidden='true'>
           {overlayContent}
         </div>
 

From 9567adf3890f8fc84e539e491928d1891dec0b2c Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 7 Jun 2026 09:43:45 -0700
Subject: [PATCH 2/9] fix(user-input): track raw selection in ref and sync
 mention menus on ranged selections

---
 .../home/components/user-input/user-input.tsx | 56 +++++++++----------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 291c499a496..676bea52c36 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -1030,7 +1030,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     ]
   )
 
-  /** Last observed selection; tells which edge of a range moved, and which way. */
+  /** Last selection reported by the DOM; tells which edge of a range moved, and which way. */
   const lastSelectionRef = useRef<{ start: number; end: number }>({ start: 0, end: 0 })
 
   /**
@@ -1045,17 +1045,12 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     const start = textarea.selectionStart ?? 0
     const end = textarea.selectionEnd ?? 0
     const prev = lastSelectionRef.current
+    // Always track the raw observed selection — never an intended write that
+    // may get superseded — so edge-movement inference stays true to the DOM.
+    lastSelectionRef.current = { start, end }
 
-    // Deferred so in-flight click/drag processing can't override the write;
-    // bails if the selection moved again first (a newer event supersedes it).
-    const applySelection = (nextStart: number, nextEnd: number) => {
-      const direction = textarea.selectionDirection ?? undefined
-      setTimeout(() => {
-        if (textarea.selectionStart !== start || textarea.selectionEnd !== end) return
-        textarea.setSelectionRange(nextStart, nextEnd, direction)
-      }, 0)
-    }
-
+    let newStart = start
+    let newEnd = end
     if (start !== end) {
       const startRange = mentionTokensWithContext.findRangeContaining(start)
       const endRange = mentionTokensWithContext.findRangeContaining(end)
@@ -1063,37 +1058,40 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
       // of travel: growing absorbs the chip, shrinking releases it. Fresh
       // selections (double-click, select-all) expand outward.
       const singleEdgeMoved = (start !== prev.start) !== (end !== prev.end)
-      let newStart = startRange
+      newStart = startRange
         ? singleEdgeMoved && start > prev.start
           ? startRange.end
           : startRange.start
         : start
-      const newEnd = endRange
-        ? singleEdgeMoved && end < prev.end
-          ? endRange.start
-          : endRange.end
-        : end
+      newEnd = endRange ? (singleEdgeMoved && end < prev.end ? endRange.start : endRange.end) : end
       // A selection contained in one chip snaps both edges; don't let it invert.
       if (newStart > newEnd) {
         newStart = newEnd
       }
-      lastSelectionRef.current = { start: newStart, end: newEnd }
-      if (newStart !== start || newEnd !== end) {
-        applySelection(newStart, newEnd)
+    } else {
+      const r = mentionTokensWithContext.findRangeContaining(start)
+      if (r) {
+        const snapPos = start - r.start < r.end - start ? r.start : r.end
+        newStart = snapPos
+        newEnd = snapPos
       }
-      return
     }
 
-    const r = mentionTokensWithContext.findRangeContaining(start)
-    if (r) {
-      const snapPos = start - r.start < r.end - start ? r.start : r.end
-      lastSelectionRef.current = { start: snapPos, end: snapPos }
-      applySelection(snapPos, snapPos)
+    if (newStart !== start || newEnd !== end) {
+      // Deferred so in-flight click/drag processing can't override the write;
+      // bails if the selection moved again first (a newer event supersedes it).
+      // The write re-fires this handler, which then syncs the menus below.
+      const direction = textarea.selectionDirection ?? undefined
+      setTimeout(() => {
+        if (textarea.selectionStart !== start || textarea.selectionEnd !== end) return
+        textarea.setSelectionRange(newStart, newEnd, direction)
+      }, 0)
       return
     }
-    lastSelectionRef.current = { start, end }
-    syncMentionState(textarea, textarea.value, start)
-    syncSlashState(textarea, textarea.value, start)
+
+    const focusPos = textarea.selectionDirection === 'backward' ? start : end
+    syncMentionState(textarea, textarea.value, focusPos)
+    syncSlashState(textarea, textarea.value, focusPos)
   }, [textareaRef, mentionTokensWithContext, syncMentionState, syncSlashState])
 
   const handleInput = useCallback(

From d1b356285670d8428a4b03276b25cca3ff292030 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 7 Jun 2026 10:05:51 -0700
Subject: [PATCH 3/9] fix(user-input): translate overlay content instead of
 scrolling the overlay box

---
 .../user-input/components/constants.ts        |  8 ++--
 .../home/components/user-input/user-input.tsx | 42 +++++++++++--------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
index 0391c28beb5..edddfc8fd57 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
@@ -63,10 +63,10 @@ export const TEXTAREA_BASE_CLASSES = cn(
 )
 
 /**
- * Pinned to the textarea's box (`inset-0`) and clipped (`overflow-hidden`) so
- * stale paints can never escape the input. Not a scroll container — it mirrors
- * the textarea's scroll position via programmatic `scrollTop`, which works on
- * `overflow: hidden` boxes.
+ * Pinned to the textarea's box (`inset-0`) and clipped (`overflow-hidden`).
+ * The box itself never scrolls — its content is translated to mirror the
+ * textarea's scroll offset, so the compositor never holds scrolled textures
+ * for it (a scrolled box can ghost stale paint after its content is cleared).
  */
 export const OVERLAY_CLASSES = cn(
   FIELD_MIRROR_CLASSES,
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 676bea52c36..797f832adc5 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -171,7 +171,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
   })
   const valueRef = useRef(value)
   valueRef.current = value
-  const overlayRef = useRef<HTMLDivElement>(null)
+  const overlayContentRef = useRef<HTMLDivElement>(null)
   const plusMenuRef = useRef<PlusMenuHandle>(null)
   const skillsMenuRef = useRef<SkillsMenuHandle>(null)
 
@@ -477,16 +477,26 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     ]
   )
 
+  /**
+   * Mirrors the textarea's scroll offset by translating the overlay content.
+   * The overlay box itself never scrolls — a scrolled box (even with
+   * `overflow: hidden`) is a compositor scroll container whose stale textures
+   * can ghost cleared content; a transform always repaints cleanly and never
+   * clamps, so the mirror tracks the textarea offset exactly.
+   */
+  const syncOverlayScroll = useCallback((scrollTop: number) => {
+    const content = overlayContentRef.current
+    if (content) content.style.transform = `translateY(${-scrollTop}px)`
+  }, [])
+
   useLayoutEffect(() => {
     const textarea = textareaRef.current
     if (!textarea) return
     const maxHeight = isInitialView ? window.innerHeight * 0.3 : MAX_CHAT_TEXTAREA_HEIGHT
     textarea.style.height = 'auto'
     textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`
-    if (overlayRef.current) {
-      overlayRef.current.scrollTop = textarea.scrollTop
-    }
-  }, [value, isInitialView, textareaRef])
+    syncOverlayScroll(textarea.scrollTop)
+  }, [value, isInitialView, textareaRef, syncOverlayScroll])
 
   const handleResourceSelect = useCallback(
     (resource: MothershipResource) => {
@@ -1098,12 +1108,9 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     (e: React.FormEvent<HTMLTextAreaElement>) => {
       const maxHeight = isInitialView ? window.innerHeight * 0.3 : MAX_CHAT_TEXTAREA_HEIGHT
       autoResizeTextarea(e, maxHeight)
-
-      if (overlayRef.current) {
-        overlayRef.current.scrollTop = (e.target as HTMLTextAreaElement).scrollTop
-      }
+      syncOverlayScroll((e.target as HTMLTextAreaElement).scrollTop)
     },
-    [isInitialView]
+    [isInitialView, syncOverlayScroll]
   )
 
   const handlePaste = useCallback((e: React.ClipboardEvent<HTMLTextAreaElement>) => {
@@ -1190,11 +1197,12 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     filesRef.current.processFiles(dt.files)
   }, [])
 
-  const handleScroll = useCallback((e: React.UIEvent<HTMLTextAreaElement>) => {
-    if (overlayRef.current) {
-      overlayRef.current.scrollTop = e.currentTarget.scrollTop
-    }
-  }, [])
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLTextAreaElement>) => {
+      syncOverlayScroll(e.currentTarget.scrollTop)
+    },
+    [syncOverlayScroll]
+  )
 
   /**
    * On copy/cut, write a portable representation of the selection to the
@@ -1332,8 +1340,8 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
       />
 
       <div className='relative'>
-        <div ref={overlayRef} className={OVERLAY_CLASSES} aria-hidden='true'>
-          {overlayContent}
+        <div className={OVERLAY_CLASSES} aria-hidden='true'>
+          <div ref={overlayContentRef}>{overlayContent}</div>
         </div>
 
         <textarea

From 1a2e63fdc0eb06da4d7e0396aecd104df4d020d1 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 7 Jun 2026 10:15:33 -0700
Subject: [PATCH 4/9] fix(user-input): read selection direction at apply time,
 document edge heuristic

---
 .../home/components/user-input/user-input.tsx          | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 797f832adc5..2ffbe94c62c 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -1066,7 +1066,11 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
       const endRange = mentionTokensWithContext.findRangeContaining(end)
       // A lone moved edge (keyboard extend/shrink, drag) snaps in its direction
       // of travel: growing absorbs the chip, shrinking releases it. Fresh
-      // selections (double-click, select-all) expand outward.
+      // selections (double-click, select-all) expand outward. A fresh selection
+      // sharing one edge with `prev` (e.g. select-all from a caret at 0) takes
+      // the single-edge path, but a grown edge snaps outward there too — the
+      // two paths only differ for a shrinking edge, which implies a real
+      // single-edge gesture.
       const singleEdgeMoved = (start !== prev.start) !== (end !== prev.end)
       newStart = startRange
         ? singleEdgeMoved && start > prev.start
@@ -1091,10 +1095,10 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
       // Deferred so in-flight click/drag processing can't override the write;
       // bails if the selection moved again first (a newer event supersedes it).
       // The write re-fires this handler, which then syncs the menus below.
-      const direction = textarea.selectionDirection ?? undefined
+      // Direction is read at apply time so it's never stale.
       setTimeout(() => {
         if (textarea.selectionStart !== start || textarea.selectionEnd !== end) return
-        textarea.setSelectionRange(newStart, newEnd, direction)
+        textarea.setSelectionRange(newStart, newEnd, textarea.selectionDirection ?? undefined)
       }, 0)
       return
     }

From 6997d3e288007ae88ab766fa171a013474cc5f1e Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 7 Jun 2026 11:18:11 -0700
Subject: [PATCH 5/9] fix(user-input): reconcile textarea DOM with state on
 selection events

---
 .../home/components/user-input/user-input.tsx            | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 2ffbe94c62c..80f862c9009 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -1052,6 +1052,15 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
   const handleSelectAdjust = useCallback(() => {
     const textarea = textareaRef.current
     if (!textarea) return
+    // Controlled-value reconciliation: state and DOM can only drift when an
+    // edit's change event is lost (programmatic edits pair setValue
+    // synchronously). The DOM is the user's intent — adopt it and let the
+    // render rebuild the overlay; selection logic resumes on the next event.
+    if (textarea.value !== valueRef.current) {
+      valueRef.current = textarea.value
+      setValue(textarea.value)
+      return
+    }
     const start = textarea.selectionStart ?? 0
     const end = textarea.selectionEnd ?? 0
     const prev = lastSelectionRef.current

From 35a2591f1c7556f050abd2effffee2576c11366f Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 7 Jun 2026 11:30:50 -0700
Subject: [PATCH 6/9] fix(user-input): keep Cmd+Backspace native instead of
 single-chip delete

---
 .../[workspaceId]/home/components/user-input/user-input.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 80f862c9009..484131b32c5 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -829,8 +829,9 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
 
       // Single-chip delete: remove the token's text atomically. A selection
       // delete falls through to the native edit; either way the context-sync
-      // effect prunes contexts whose last token is gone.
-      if ((e.key === 'Backspace' || e.key === 'Delete') && selectionLength === 0) {
+      // effect prunes contexts whose last token is gone. Cmd+Backspace
+      // (delete to line start) stays native — it spans more than one chip.
+      if ((e.key === 'Backspace' || e.key === 'Delete') && selectionLength === 0 && !e.metaKey) {
         const ranges = mentionTokensWithContext.mentionRanges
         const target =
           e.key === 'Backspace'

From 7c3e298c7e3d7a16b59ee3f113c3d276c741ecbd Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 7 Jun 2026 11:37:47 -0700
Subject: [PATCH 7/9] fix(user-input): record observed selection before
 reconcile early-return

---
 .../home/components/user-input/user-input.tsx       | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 484131b32c5..863e41d6efe 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -1053,6 +1053,13 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
   const handleSelectAdjust = useCallback(() => {
     const textarea = textareaRef.current
     if (!textarea) return
+    const start = textarea.selectionStart ?? 0
+    const end = textarea.selectionEnd ?? 0
+    const prev = lastSelectionRef.current
+    // Always track the raw observed selection — never an intended write that
+    // may get superseded — so edge-movement inference stays true to the DOM.
+    lastSelectionRef.current = { start, end }
+
     // Controlled-value reconciliation: state and DOM can only drift when an
     // edit's change event is lost (programmatic edits pair setValue
     // synchronously). The DOM is the user's intent — adopt it and let the
@@ -1062,12 +1069,6 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
       setValue(textarea.value)
       return
     }
-    const start = textarea.selectionStart ?? 0
-    const end = textarea.selectionEnd ?? 0
-    const prev = lastSelectionRef.current
-    // Always track the raw observed selection — never an intended write that
-    // may get superseded — so edge-movement inference stays true to the DOM.
-    lastSelectionRef.current = { start, end }
 
     let newStart = start
     let newEnd = end

From 5b027985ea6f6e0dd2de34eb7d8a32e1c767d7af Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 7 Jun 2026 11:58:10 -0700
Subject: [PATCH 8/9] refactor(user-input): extract adoptDomValue; drop
 flushSync pre-paint reconcile

---
 .../home/components/user-input/user-input.tsx | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 863e41d6efe..c072df6a17a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -752,6 +752,16 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     }
   }, [onSubmit, textareaRef, resetTranscript])
 
+  /**
+   * Adopts the textarea's DOM value into state. State and DOM can only drift
+   * when an edit's input event is lost (programmatic edits pair setValue
+   * synchronously) — the DOM is the user's intent.
+   */
+  const adoptDomValue = useCallback((textarea: HTMLTextAreaElement) => {
+    valueRef.current = textarea.value
+    setValue(textarea.value)
+  }, [])
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (mentionRangeRef.current && !e.nativeEvent.isComposing) {
@@ -1060,13 +1070,10 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     // may get superseded — so edge-movement inference stays true to the DOM.
     lastSelectionRef.current = { start, end }
 
-    // Controlled-value reconciliation: state and DOM can only drift when an
-    // edit's change event is lost (programmatic edits pair setValue
-    // synchronously). The DOM is the user's intent — adopt it and let the
-    // render rebuild the overlay; selection logic resumes on the next event.
+    // Reconciliation backstop for non-keyboard mutations; the render rebuilds
+    // the overlay and selection logic resumes on the next event.
     if (textarea.value !== valueRef.current) {
-      valueRef.current = textarea.value
-      setValue(textarea.value)
+      adoptDomValue(textarea)
       return
     }
 
@@ -1117,7 +1124,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     const focusPos = textarea.selectionDirection === 'backward' ? start : end
     syncMentionState(textarea, textarea.value, focusPos)
     syncSlashState(textarea, textarea.value, focusPos)
-  }, [textareaRef, mentionTokensWithContext, syncMentionState, syncSlashState])
+  }, [textareaRef, mentionTokensWithContext, adoptDomValue, syncMentionState, syncSlashState])
 
   const handleInput = useCallback(
     (e: React.FormEvent<HTMLTextAreaElement>) => {

From 31c66fa5958fb214ee94a64561f3d0bbc4e4e121 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 7 Jun 2026 12:09:16 -0700
Subject: [PATCH 9/9] refactor(user-input): native co-scroll for textarea +
 overlay, remove JS scroll-sync

---
 .../user-input/components/constants.ts        | 32 +++----
 .../components/user-input/components/index.ts |  3 +-
 .../home/components/user-input/user-input.tsx | 83 +++++++------------
 3 files changed, 46 insertions(+), 72 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
index edddfc8fd57..76cb3079af3 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
@@ -53,41 +53,43 @@ const FIELD_MIRROR_CLASSES = cn(
   'px-1 py-1 font-body text-[15px] leading-[24px] tracking-[-0.015em]'
 )
 
+/**
+ * The textarea grows to its full content height (`h-auto`, no internal scroll);
+ * the shared scroller clips and scrolls it. Its text is transparent so the
+ * mirror overlay shows through; only the caret paints.
+ */
 export const TEXTAREA_BASE_CLASSES = cn(
   FIELD_MIRROR_CLASSES,
-  'h-auto resize-none overflow-y-auto overflow-x-hidden',
+  'block h-auto resize-none overflow-hidden',
   'text-transparent caret-[var(--text-primary)] outline-none',
   'placeholder:font-[380] placeholder:text-[var(--text-subtle)]',
-  'focus-visible:ring-0 focus-visible:ring-offset-0',
-  '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+  'focus-visible:ring-0 focus-visible:ring-offset-0'
 )
 
 /**
- * Pinned to the textarea's box (`inset-0`) and clipped (`overflow-hidden`).
- * The box itself never scrolls — its content is translated to mirror the
- * textarea's scroll offset, so the compositor never holds scrolled textures
- * for it (a scrolled box can ghost stale paint after its content is cleared).
+ * Pinned over the full-height textarea (`inset-0` of the sizer). Both are flow
+ * children of the same scroller, so they scroll together natively — no JS
+ * scroll-sync, so the caret and mirrored text never drift apart.
  */
 export const OVERLAY_CLASSES = cn(
   FIELD_MIRROR_CLASSES,
-  'pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap',
+  'pointer-events-none absolute inset-0 whitespace-pre-wrap',
   'text-[var(--text-primary)]'
 )
 
+/** Single scroll container for the textarea + overlay; caps height and hides its scrollbar. */
+export const SCROLLER_CLASSES = cn(
+  'relative overflow-y-auto overflow-x-hidden',
+  '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+)
+
 export const SEND_BUTTON_BASE = 'h-[28px] w-[28px] rounded-full border-0 p-0 transition-colors'
 export const SEND_BUTTON_ACTIVE =
   'bg-[#383838] hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
 export const SEND_BUTTON_DISABLED = 'bg-[#808080] dark:bg-[#808080]'
 
-export const MAX_CHAT_TEXTAREA_HEIGHT = 200
 export const SPEECH_RECOGNITION_LANG = 'en-US'
 
-export function autoResizeTextarea(e: React.FormEvent<HTMLTextAreaElement>, maxHeight: number) {
-  const target = e.target as HTMLTextAreaElement
-  target.style.height = 'auto'
-  target.style.height = `${Math.min(target.scrollHeight, maxHeight)}px`
-}
-
 /**
  * Maps a {@link MothershipResource} (resource-picker domain) to a
  * {@link ChatContext} (chat-input domain). Keyed by `MothershipResourceType`
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/index.ts
index 9b1c2d4d3e4..9ea5a44d428 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/index.ts
@@ -15,10 +15,9 @@ export type {
   WindowWithSpeech,
 } from './constants'
 export {
-  autoResizeTextarea,
-  MAX_CHAT_TEXTAREA_HEIGHT,
   mapResourceToContext,
   OVERLAY_CLASSES,
+  SCROLLER_CLASSES,
   SPEECH_RECOGNITION_LANG,
   TEXTAREA_BASE_CLASSES,
 } from './constants'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index c072df6a17a..53e62c05a7e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -27,16 +27,15 @@ import type {
 import {
   AnimatedPlaceholderEffect,
   AttachedFilesList,
-  autoResizeTextarea,
   chipDisplayToken,
   chipLinkToContext,
   DropOverlay,
-  MAX_CHAT_TEXTAREA_HEIGHT,
   MicButton,
   mapResourceToContext,
   OVERLAY_CLASSES,
   PlusMenuDropdown,
   parseChipLinks,
+  SCROLLER_CLASSES,
   SendButton,
   SkillsMenuDropdown,
   serializeSelectionForClipboard,
@@ -171,7 +170,6 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
   })
   const valueRef = useRef(value)
   valueRef.current = value
-  const overlayContentRef = useRef<HTMLDivElement>(null)
   const plusMenuRef = useRef<PlusMenuHandle>(null)
   const skillsMenuRef = useRef<SkillsMenuHandle>(null)
 
@@ -477,26 +475,14 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     ]
   )
 
-  /**
-   * Mirrors the textarea's scroll offset by translating the overlay content.
-   * The overlay box itself never scrolls — a scrolled box (even with
-   * `overflow: hidden`) is a compositor scroll container whose stale textures
-   * can ghost cleared content; a transform always repaints cleanly and never
-   * clamps, so the mirror tracks the textarea offset exactly.
-   */
-  const syncOverlayScroll = useCallback((scrollTop: number) => {
-    const content = overlayContentRef.current
-    if (content) content.style.transform = `translateY(${-scrollTop}px)`
-  }, [])
-
   useLayoutEffect(() => {
     const textarea = textareaRef.current
     if (!textarea) return
-    const maxHeight = isInitialView ? window.innerHeight * 0.3 : MAX_CHAT_TEXTAREA_HEIGHT
+    // Grow the textarea to its full content height; the scroller caps the
+    // visible height and scrolls textarea + overlay together natively.
     textarea.style.height = 'auto'
-    textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`
-    syncOverlayScroll(textarea.scrollTop)
-  }, [value, isInitialView, textareaRef, syncOverlayScroll])
+    textarea.style.height = `${textarea.scrollHeight}px`
+  }, [value, textareaRef])
 
   const handleResourceSelect = useCallback(
     (resource: MothershipResource) => {
@@ -1126,15 +1112,6 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     syncSlashState(textarea, textarea.value, focusPos)
   }, [textareaRef, mentionTokensWithContext, adoptDomValue, syncMentionState, syncSlashState])
 
-  const handleInput = useCallback(
-    (e: React.FormEvent<HTMLTextAreaElement>) => {
-      const maxHeight = isInitialView ? window.innerHeight * 0.3 : MAX_CHAT_TEXTAREA_HEIGHT
-      autoResizeTextarea(e, maxHeight)
-      syncOverlayScroll((e.target as HTMLTextAreaElement).scrollTop)
-    },
-    [isInitialView, syncOverlayScroll]
-  )
-
   const handlePaste = useCallback((e: React.ClipboardEvent<HTMLTextAreaElement>) => {
     const textarea = e.currentTarget
 
@@ -1219,13 +1196,6 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     filesRef.current.processFiles(dt.files)
   }, [])
 
-  const handleScroll = useCallback(
-    (e: React.UIEvent<HTMLTextAreaElement>) => {
-      syncOverlayScroll(e.currentTarget.scrollTop)
-    },
-    [syncOverlayScroll]
-  )
-
   /**
    * On copy/cut, write a portable representation of the selection to the
    * clipboard. Portable resource chips (table/file/folder/etc.) become
@@ -1361,27 +1331,30 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
         onRemoveFile={handleRemoveFile}
       />
 
-      <div className='relative'>
-        <div className={OVERLAY_CLASSES} aria-hidden='true'>
-          <div ref={overlayContentRef}>{overlayContent}</div>
+      {/* Single scroller for textarea + overlay so they co-scroll natively;
+          the sizer is sized by the full-height textarea, and the overlay fills
+          it via `inset-0`. */}
+      <div className={cn(SCROLLER_CLASSES, isInitialView ? 'max-h-[30vh]' : 'max-h-[200px]')}>
+        <div className='relative'>
+          <div className={OVERLAY_CLASSES} aria-hidden='true'>
+            {overlayContent}
+          </div>
+
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            onCopy={handleCopy}
+            onCut={handleCut}
+            onSelect={handleSelectAdjust}
+            onMouseUp={handleSelectAdjust}
+            placeholder='Ask Sim to '
+            rows={1}
+            className={TEXTAREA_BASE_CLASSES}
+          />
         </div>
-
-        <textarea
-          ref={textareaRef}
-          value={value}
-          onChange={handleInputChange}
-          onKeyDown={handleKeyDown}
-          onInput={handleInput}
-          onPaste={handlePaste}
-          onCopy={handleCopy}
-          onCut={handleCut}
-          onSelect={handleSelectAdjust}
-          onMouseUp={handleSelectAdjust}
-          onScroll={handleScroll}
-          placeholder='Ask Sim to '
-          rows={1}
-          className={cn(TEXTAREA_BASE_CLASSES, isInitialView ? 'max-h-[30vh]' : 'max-h-[200px]')}
-        />
       </div>
 
       <div className='flex items-center justify-between'>