fix(mothership): prune composer contexts during render so fast typing cannot trip the update-depth limit (#8702)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts

@@ -1175,7 +1175,7 @@ export function usePromptEditor({
 
     // Portable chip links (`[label](sim:kind/id)`) re-create their chip on
     // paste-back. Rewrite each link span to its `@label ` token (the trailing
-    // space is REQUIRED so useContextManagement's sync effect doesn't purge the
+    // space is REQUIRED so useContextManagement's pruning doesn't purge the
     // freshly-added context) and register the contexts directly.
     const pastedText = pastedPlainText
     const links = contextsEnabledRef.current ? parseChipLinks(pastedText) : []
@@ -1198,7 +1198,7 @@ export function usePromptEditor({
         pastedContexts.push(ctx)
         // Insert the kind-correct token (skill EM-SPACE sentinel, slash `/`, `@`
         // else) so the chip re-renders with its proper trigger glyph and the
-        // context-sync effect (keyed on the same per-kind prefix) keeps it. Append
+        // context pruning (keyed on the same per-kind prefix) keeps it. Append
         // a single separator ONLY when the next source char is non-whitespace
         // (chip→chip / chip→word); existing whitespace and end-of-string already
         // supply the boundary, so re-pasting never accumulates spaces.
@@ -1312,7 +1312,7 @@ export function usePromptEditor({
     (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
       // When the selection holds a portable chip (skill or resource) we take over
       // the clipboard, so the selected text must be removed here (default prevented).
-      // Either way the context-sync effect prunes contexts whose token is now gone.
+      // Either way the context pruning drops contexts whose token is now gone.
       if (!writeSanitizedClipboard(e)) return
       const textarea = e.currentTarget
       const start = textarea.selectionStart ?? 0

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-context-management.test.tsx

@@ -1,9 +1,9 @@
 /**
  * @vitest-environment jsdom
  */
-import { act } from 'react'
+import { act, type ChangeEvent, useState } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { useContextManagement } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-context-management'
 import type { ChatContext } from '@/stores/panel'
 
@@ -80,3 +80,84 @@ describe('useContextManagement label sync', () => {
     expect(latest.selectedContexts.map((c) => c.label)).toEqual(['notes.md:12', 'notes.md:12-40'])
   })
 })
+
+describe('useContextManagement while the user types', () => {
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+    vi.restoreAllMocks()
+  })
+
+  /**
+   * Under CPU load the browser runs each keystroke's input task before React's
+   * scheduler task, so a keystroke commit must leave no render pending. React
+   * counts every commit that leaves an update pending, and the 51st such commit
+   * in a row makes the next `setState` anywhere throw "Maximum update depth
+   * exceeded" (#185); in the chat that next `setState` was the Enter that queues
+   * the follow-up, which was then lost. Keystrokes here are separate input
+   * events with only microtasks between them, so the scheduler never runs: the
+   * same ordering a loaded browser produces.
+   */
+  it('submits a long message typed faster than the React scheduler runs', async () => {
+    const thrown: unknown[] = []
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+    let submitted = ''
+
+    function Composer() {
+      const [message, setMessage] = useState('')
+      const [lastSubmitted, setLastSubmitted] = useState('')
+      useContextManagement({ message })
+      submitted = lastSubmitted
+      const guard = (update: () => void) => {
+        try {
+          update()
+        } catch (error) {
+          thrown.push(error)
+        }
+      }
+      return (
+        <textarea
+          value={message}
+          onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
+            guard(() => setMessage(event.target.value))
+          }
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') guard(() => setLastSubmitted(message))
+          }}
+        />
+      )
+    }
+
+    act(() => {
+      root.render(<Composer />)
+    })
+    const textarea = container.querySelector('textarea')
+    if (!textarea) throw new Error('composer did not render')
+    const setNativeValue = Object.getOwnPropertyDescriptor(
+      HTMLTextAreaElement.prototype,
+      'value'
+    )?.set
+    if (!setNativeValue) throw new Error('textarea value setter missing')
+
+    const followUp = 'please also summarize the second quarter numbers by region and team'
+    for (let i = 1; i <= followUp.length; i++) {
+      setNativeValue.call(textarea, followUp.slice(0, i))
+      textarea.dispatchEvent(new Event('input', { bubbles: true }))
+      await Promise.resolve()
+    }
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    await Promise.resolve()
+
+    expect(thrown).toEqual([])
+    expect(
+      consoleError.mock.calls.filter((call) => String(call[0]).includes('Maximum update depth'))
+    ).toEqual([])
+    expect(submitted).toBe(followUp)
+  })
+})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-context-management.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useState } from 'react'
 import {
   filterContextsPresentInMessage,
   filterOutContext,
@@ -21,7 +21,23 @@ interface UseContextManagementProps {
  * @returns Context state and management functions
  */
 export function useContextManagement({ message, initialContexts }: UseContextManagementProps) {
-  const [selectedContexts, setSelectedContexts] = useState<ChatContext[]>(initialContexts ?? [])
+  const [selectedContexts, setSelectedContexts] = useState<ChatContext[]>(() =>
+    filterContextsPresentInMessage(initialContexts ?? [], message)
+  )
+  const [prunedForMessage, setPrunedForMessage] = useState(message)
+
+  /**
+   * Drops contexts whose inline @label or /label token left the message, during
+   * render. An effect here re-rendered after every keystroke; when keystrokes
+   * outpace React's scheduler (a loaded machine), React counts those commits as
+   * nested updates and the next `setState` (the Enter that submits) throws
+   * "Maximum update depth exceeded".
+   */
+  if (prunedForMessage !== message) {
+    setPrunedForMessage(message)
+    const present = filterContextsPresentInMessage(selectedContexts, message)
+    if (present !== selectedContexts) setSelectedContexts(present)
+  }
 
   /**
    * Adds a context to the selected contexts list, avoiding duplicates
@@ -52,16 +68,6 @@ export function useContextManagement({ message, initialContexts }: UseContextMan
     setSelectedContexts((prev) => (prev.length === 0 ? prev : []))
   }, [])
 
-  /**
-   * Synchronizes selected contexts with inline @label or /label tokens in the message.
-   * Removes contexts whose labels are no longer present in the message.
-   */
-  useEffect(() => {
-    setSelectedContexts((prev) => {
-      return filterContextsPresentInMessage(prev, message)
-    })
-  }, [message])
-
   return {
     selectedContexts,
     setSelectedContexts,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-mention-tokens.ts

@@ -28,7 +28,7 @@ export interface MentionRange {
  * locating the range at a caret, and deleting a token's text atomically.
  *
  * Context lifetime is intentionally NOT managed here — `useContextManagement`'s
- * sync effect owns it, removing a context exactly when its last matching token
+ * pruning owns it, removing a context exactly when its last matching token
  * disappears from the message. That keeps duplicate-label chips (two `@sub` for
  * the same resource) correct: deleting one token leaves the other, so the
  * shared context survives.
@@ -113,7 +113,7 @@ export function useMentionTokens({
 
   /**
    * Atomically deletes a single mention token's text. The context is left to
-   * `useContextManagement`'s sync effect, which prunes it only once no matching
+   * `useContextManagement`'s pruning, which drops it only once no matching
    * token remains — so deleting one of two duplicate chips keeps the other.
    *
    * @param range - The range to delete