From 1524ec4a489640da99f7a59676aaad6e1d5fc77a Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Mon, 13 Apr 2026 13:49:45 -0700
Subject: [PATCH 1/5] Auto-focus input boxes for modals and copilot

---
 .../home/components/user-input/user-input.tsx |  5 +-
 .../rename-document-modal.tsx                 |  1 -
 .../create-api-key-modal.tsx                  |  1 -
 .../deploy-modal/components/a2a/a2a.tsx       | 15 +++++-
 .../deploy-modal/components/mcp/mcp.tsx       |  1 +
 .../w/[workflowId]/components/panel/panel.tsx | 11 ++++
 .../emcn/components/modal/auto-focus.ts       | 52 +++++++++++++++++++
 .../emcn/components/modal/modal.tsx           |  4 +-
 .../emcn/components/s-modal/s-modal.tsx       |  4 +-
 9 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 apps/sim/components/emcn/components/modal/auto-focus.ts

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 981dc9d0e58..17ea0764d3a 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
@@ -361,6 +361,7 @@ export function UserInput({
         } catch {
           // Invalid JSON — ignore
         }
+        textareaRef.current?.focus()
         return
       }
       const resourceJson = e.dataTransfer.getData(SIM_RESOURCE_DRAG_TYPE)
@@ -374,11 +375,13 @@ export function UserInput({
         } catch {
           // Invalid JSON — ignore
         }
+        textareaRef.current?.focus()
         return
       }
       filesRef.current.handleDrop(e)
+      requestAnimationFrame(() => textareaRef.current?.focus())
     },
-    [handleResourceSelect]
+    [handleResourceSelect, textareaRef]
   )
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
index 33144a19d23..5cd47d45af4 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
@@ -94,7 +94,6 @@ export function RenameDocumentModal({
                   placeholder='Enter document name'
                   className={cn(error && 'border-[var(--text-error)]')}
                   disabled={isSubmitting}
-                  autoFocus
                   maxLength={255}
                   autoComplete='off'
                   autoCorrect='off'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
index 5b6e32aa1c3..269c883ebb0 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
@@ -168,7 +168,6 @@ export function CreateApiKeyModal({
                   }}
                   placeholder='e.g., Development, Production'
                   className='h-9'
-                  autoFocus
                   name='api_key_label'
                   autoComplete='off'
                   autoCorrect='off'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
index a5864aea640..9672e995f4c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Check, Clipboard } from 'lucide-react'
 import { useParams } from 'next/navigation'
@@ -195,8 +195,20 @@ export function A2aDeploy({
     }
   }, [startBlockId, startBlockInputFormat, missingFields, collaborativeSetSubblockValue])
 
+  const nameInputRef = useRef<HTMLInputElement>(null)
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
+
+  useEffect(() => {
+    const id = window.setTimeout(() => {
+      const el = nameInputRef.current
+      if (!el) return
+      el.focus()
+      const end = el.value.length
+      el.setSelectionRange(end, end)
+    }, 0)
+    return () => window.clearTimeout(id)
+  }, [])
   const [authScheme, setAuthScheme] = useState<AuthScheme>('apiKey')
   const [pushNotificationsEnabled, setPushNotificationsEnabled] = useState(false)
   const [skillTags, setSkillTags] = useState<string[]>([])
@@ -720,6 +732,7 @@ console.log(data);`
         </Label>
         <Input
           id='a2a-name'
+          ref={nameInputRef}
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder='Enter agent name'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
index ff08b13ca7c..b67882fffce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -523,6 +523,7 @@ export function McpDeploy({
           Description
         </Label>
         <Textarea
+          autoFocus
           placeholder='Describe what this tool does...'
           className='min-h-[100px] resize-none'
           value={toolDescription}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index da51910789b..d7232aa8cd8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -439,6 +439,17 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
     return () => window.removeEventListener('mothership-send-message', handler)
   }, [setActiveTab, copilotSendMessage])
 
+  useEffect(() => {
+    if (activeTab !== 'copilot') return
+    const id = window.setTimeout(() => {
+      const textarea = document.querySelector<HTMLTextAreaElement>(
+        "[data-tab-content='copilot'] textarea"
+      )
+      textarea?.focus()
+    }, 0)
+    return () => window.clearTimeout(id)
+  }, [activeTab])
+
   /**
    * Handles tab click events
    */
diff --git a/apps/sim/components/emcn/components/modal/auto-focus.ts b/apps/sim/components/emcn/components/modal/auto-focus.ts
new file mode 100644
index 00000000000..df26a3356ad
--- /dev/null
+++ b/apps/sim/components/emcn/components/modal/auto-focus.ts
@@ -0,0 +1,52 @@
+/**
+ * Default `onOpenAutoFocus` handler for emcn modals.
+ *
+ * Radix's native behavior focuses the first focusable descendant — usually the close
+ * button in `ModalHeader`. We instead focus the first visible text-entry control
+ * (input/textarea/contenteditable) inside the dialog, with the caret at the end.
+ *
+ * If no such control exists, we let Radix's default behavior run by not calling
+ * `preventDefault()`.
+ */
+
+const TEXT_INPUT_SELECTOR = [
+  'input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])' +
+    ':not([type="button"]):not([type="submit"]):not([type="reset"])' +
+    ':not([disabled]):not([readonly]):not([tabindex="-1"])',
+  'textarea:not([disabled]):not([readonly]):not([tabindex="-1"])',
+  '[contenteditable="true"]:not([tabindex="-1"])',
+  '[contenteditable=""]:not([tabindex="-1"])',
+].join(',')
+
+function isVisible(el: HTMLElement): boolean {
+  return el.offsetParent !== null || el.getClientRects().length > 0
+}
+
+export function focusFirstTextInput(event: Event): void {
+  const content = event.currentTarget as HTMLElement | null
+  if (!content) return
+
+  const target = Array.from(
+    content.querySelectorAll<HTMLElement>(TEXT_INPUT_SELECTOR)
+  ).find(isVisible)
+  if (!target) return
+
+  event.preventDefault()
+  target.focus({ preventScroll: false })
+
+  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+    const end = target.value.length
+    try {
+      target.setSelectionRange(end, end)
+    } catch {
+      // Some input types (number, email, etc.) reject setSelectionRange — ignore.
+    }
+  } else if (target.isContentEditable) {
+    const range = document.createRange()
+    range.selectNodeContents(target)
+    range.collapse(false)
+    const sel = window.getSelection()
+    sel?.removeAllRanges()
+    sel?.addRange(range)
+  }
+}
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index 91fc76ebd93..717cb50bbd2 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -43,6 +43,7 @@ import { X } from 'lucide-react'
 import { usePathname } from 'next/navigation'
 import { cn } from '@/lib/core/utils/cn'
 import { Button } from '../button/button'
+import { focusFirstTextInput } from './auto-focus'
 
 /**
  * Shared animation classes for modal transitions.
@@ -137,7 +138,7 @@ export interface ModalContentProps
 const ModalContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   ModalContentProps
->(({ className, children, showClose = true, size = 'md', style, ...props }, ref) => {
+>(({ className, children, showClose = true, size = 'md', style, onOpenAutoFocus, ...props }, ref) => {
   const [isInteractionReady, setIsInteractionReady] = React.useState(false)
   const pathname = usePathname()
   const isWorkflowPage = pathname?.includes('/w/') ?? false
@@ -181,6 +182,7 @@ const ModalContent = React.forwardRef<
           onPointerUp={(e) => {
             e.stopPropagation()
           }}
+          onOpenAutoFocus={onOpenAutoFocus ?? focusFirstTextInput}
           {...props}
         >
           {children}
diff --git a/apps/sim/components/emcn/components/s-modal/s-modal.tsx b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
index 9ed6172c27d..face5ea02e3 100644
--- a/apps/sim/components/emcn/components/s-modal/s-modal.tsx
+++ b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -30,6 +30,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { X } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
 import { Button } from '../button/button'
+import { focusFirstTextInput } from '../modal/auto-focus'
 import { Modal, type ModalContentProps, ModalOverlay, ModalPortal } from '../modal/modal'
 
 const ANIMATION_CLASSES =
@@ -59,7 +60,7 @@ const SModalClose = DialogPrimitive.Close
 const SModalContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   ModalContentProps
->(({ className, children, style, ...props }, ref) => {
+>(({ className, children, style, onOpenAutoFocus, ...props }, ref) => {
   const [isInteractionReady, setIsInteractionReady] = React.useState(false)
 
   React.useEffect(() => {
@@ -95,6 +96,7 @@ const SModalContent = React.forwardRef<
         onPointerUp={(e) => {
           e.stopPropagation()
         }}
+        onOpenAutoFocus={onOpenAutoFocus ?? focusFirstTextInput}
         {...props}
       >
         {children}

From 3630d04bd2703fab7177c4885e29746d30f3808d Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Mon, 13 Apr 2026 13:58:45 -0700
Subject: [PATCH 2/5] Fix focus in emcn modal

---
 .../create-schedule-modal/schedule-modal.tsx  |   1 -
 .../settings/components/byok/byok.tsx         |   1 -
 .../settings/components/copilot/copilot.tsx   |   1 -
 .../components/inbox/inbox-enable-toggle.tsx  |   1 -
 .../components/inbox/inbox-settings-tab.tsx   |   2 -
 .../integrations/integrations-manager.tsx     |   3 -
 .../deploy-modal/components/mcp/mcp.tsx       |   1 -
 .../components/invite-modal/invite-modal.tsx  |   1 -
 .../emcn/components/modal/auto-focus.ts       |   6 +-
 .../emcn/components/modal/modal.tsx           | 107 +++++++++---------
 10 files changed, 59 insertions(+), 65 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
index 50806f02a0a..9a3f5d27674 100644
--- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
@@ -324,7 +324,6 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
                 }}
                 placeholder='e.g., Daily report generation'
                 className='h-9'
-                autoFocus
                 autoComplete='off'
               />
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
index 4ae4547a869..b674f385747 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
@@ -354,7 +354,6 @@ export function BYOK() {
                   }}
                   placeholder={PROVIDERS.find((p) => p.id === editingProvider)?.placeholder}
                   className='h-9 pr-9'
-                  autoFocus
                   name='byok_api_key'
                   autoComplete='off'
                   autoCorrect='off'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
index 1d8527f7313..cb14534f5e7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
@@ -279,7 +279,6 @@ export function Copilot() {
                 }}
                 placeholder='e.g., Development, Production'
                 className='h-9'
-                autoFocus
               />
               {createError && (
                 <p className='text-[var(--text-error)] text-small leading-tight'>{createError}</p>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx
index dbc4627e5d6..6b63f36ca41 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx
@@ -95,7 +95,6 @@ export function InboxEnableToggle() {
                 onChange={(e) => setEnableUsername(e.target.value)}
                 placeholder='e.g., acme'
                 className='h-9'
-                autoFocus
               />
               <p className='text-[var(--text-muted)] text-caption'>
                 Leave blank for an auto-generated address.
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
index 93bcf2f98a1..6ba91d7aa3b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
@@ -250,7 +250,6 @@ export function InboxSettingsTab() {
                   }}
                   placeholder='user@example.com'
                   className='h-9'
-                  autoFocus
                 />
               </div>
               <div className='flex flex-col gap-1'>
@@ -304,7 +303,6 @@ export function InboxSettingsTab() {
                 }}
                 placeholder='e.g., new-acme'
                 className='h-9'
-                autoFocus
               />
               {editAddressError && (
                 <p className='text-[var(--text-error)] text-small leading-tight'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
index b62fa6a093b..776fa925acb 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
@@ -785,7 +785,6 @@ export function IntegrationsManager() {
                     value={serviceSearch}
                     onChange={(e) => setServiceSearch(e.target.value)}
                     className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
-                    autoFocus
                   />
                 </div>
                 <div className='flex max-h-[320px] flex-col overflow-y-auto'>
@@ -916,7 +915,6 @@ export function IntegrationsManager() {
                     autoComplete='off'
                     data-lpignore='true'
                     className='mt-1.5'
-                    autoFocus
                   />
                 </div>
                 <div>
@@ -1053,7 +1051,6 @@ export function IntegrationsManager() {
                         'min-h-[120px] resize-none border-0 font-mono text-[12px]',
                         saDragActive && 'opacity-30'
                       )}
-                      autoFocus
                     />
                   </div>
                   <div className='mt-1.5'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
index b67882fffce..ff08b13ca7c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -523,7 +523,6 @@ export function McpDeploy({
           Description
         </Label>
         <Textarea
-          autoFocus
           placeholder='Describe what this tool does...'
           className='min-h-[100px] resize-none'
           value={toolDescription}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
index ef7297e96be..19fe82bb06d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
@@ -529,7 +529,6 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
                       : 'Enter emails'
                   }
                   placeholderWithTags='Add email'
-                  autoFocus={userPerms.canAdmin}
                   disabled={isSubmitting || !userPerms.canAdmin}
                   fileInputOptions={fileInputOptions}
                 />
diff --git a/apps/sim/components/emcn/components/modal/auto-focus.ts b/apps/sim/components/emcn/components/modal/auto-focus.ts
index df26a3356ad..d96d6c64a7d 100644
--- a/apps/sim/components/emcn/components/modal/auto-focus.ts
+++ b/apps/sim/components/emcn/components/modal/auto-focus.ts
@@ -26,9 +26,9 @@ export function focusFirstTextInput(event: Event): void {
   const content = event.currentTarget as HTMLElement | null
   if (!content) return
 
-  const target = Array.from(
-    content.querySelectorAll<HTMLElement>(TEXT_INPUT_SELECTOR)
-  ).find(isVisible)
+  const target = Array.from(content.querySelectorAll<HTMLElement>(TEXT_INPUT_SELECTOR)).find(
+    isVisible
+  )
   if (!target) return
 
   event.preventDefault()
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index 717cb50bbd2..fdf22d3e727 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -138,59 +138,64 @@ export interface ModalContentProps
 const ModalContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   ModalContentProps
->(({ className, children, showClose = true, size = 'md', style, onOpenAutoFocus, ...props }, ref) => {
-  const [isInteractionReady, setIsInteractionReady] = React.useState(false)
-  const pathname = usePathname()
-  const isWorkflowPage = pathname?.includes('/w/') ?? false
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => setIsInteractionReady(true), 100)
-    return () => clearTimeout(timer)
-  }, [])
-
-  return (
-    <ModalPortal>
-      <ModalOverlay />
-      <div
-        className='pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center'
-        style={{
-          paddingLeft: isWorkflowPage
-            ? 'calc(var(--sidebar-width) - var(--panel-width))'
-            : 'var(--sidebar-width)',
-        }}
-      >
-        <DialogPrimitive.Content
-          ref={ref}
-          className={cn(
-            'pointer-events-auto flex max-h-[84vh] flex-col overflow-hidden rounded-xl bg-[var(--bg)] text-small ring-1 ring-foreground/10',
-            ANIMATION_CLASSES,
-            'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 duration-200',
-            MODAL_SIZES[size],
-            className
-          )}
-          style={style}
-          onEscapeKeyDown={(e) => {
-            if (!isInteractionReady) {
-              e.preventDefault()
-              return
-            }
-            e.stopPropagation()
-          }}
-          onPointerDown={(e) => {
-            e.stopPropagation()
+>(
+  (
+    { className, children, showClose = true, size = 'md', style, onOpenAutoFocus, ...props },
+    ref
+  ) => {
+    const [isInteractionReady, setIsInteractionReady] = React.useState(false)
+    const pathname = usePathname()
+    const isWorkflowPage = pathname?.includes('/w/') ?? false
+
+    React.useEffect(() => {
+      const timer = setTimeout(() => setIsInteractionReady(true), 100)
+      return () => clearTimeout(timer)
+    }, [])
+
+    return (
+      <ModalPortal>
+        <ModalOverlay />
+        <div
+          className='pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center'
+          style={{
+            paddingLeft: isWorkflowPage
+              ? 'calc(var(--sidebar-width) - var(--panel-width))'
+              : 'var(--sidebar-width)',
           }}
-          onPointerUp={(e) => {
-            e.stopPropagation()
-          }}
-          onOpenAutoFocus={onOpenAutoFocus ?? focusFirstTextInput}
-          {...props}
         >
-          {children}
-        </DialogPrimitive.Content>
-      </div>
-    </ModalPortal>
-  )
-})
+          <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+              'pointer-events-auto flex max-h-[84vh] flex-col overflow-hidden rounded-xl bg-[var(--bg)] text-small ring-1 ring-foreground/10',
+              ANIMATION_CLASSES,
+              'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 duration-200',
+              MODAL_SIZES[size],
+              className
+            )}
+            style={style}
+            onEscapeKeyDown={(e) => {
+              if (!isInteractionReady) {
+                e.preventDefault()
+                return
+              }
+              e.stopPropagation()
+            }}
+            onPointerDown={(e) => {
+              e.stopPropagation()
+            }}
+            onPointerUp={(e) => {
+              e.stopPropagation()
+            }}
+            onOpenAutoFocus={onOpenAutoFocus ?? focusFirstTextInput}
+            {...props}
+          >
+            {children}
+          </DialogPrimitive.Content>
+        </div>
+      </ModalPortal>
+    )
+  }
+)
 
 ModalContent.displayName = 'ModalContent'
 

From e4c05b8ada596ec08b2d3f7b8dd44cdc068b6e85 Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Mon, 13 Apr 2026 15:55:46 -0700
Subject: [PATCH 3/5] Fix integrations manager focus

---
 .../integrations/integrations-manager.tsx     | 12 +++++++++-
 apps/sim/components/emcn/components/index.ts  |  1 +
 .../emcn/components/modal/auto-focus.ts       | 22 +++++++++++++------
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
index 776fa925acb..5fbe4188648 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
@@ -10,6 +10,7 @@ import {
   Badge,
   Button,
   Combobox,
+  focusFirstTextInputIn,
   Input,
   Label,
   Modal,
@@ -84,6 +85,15 @@ export function IntegrationsManager() {
   const [selectedDescriptionDraft, setSelectedDescriptionDraft] = useState('')
   const [selectedDisplayNameDraft, setSelectedDisplayNameDraft] = useState('')
   const [createStep, setCreateStep] = useState<1 | 2>(1)
+  const createModalContentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!showCreateModal || createStep !== 2) return
+    const id = window.setTimeout(() => {
+      focusFirstTextInputIn(createModalContentRef.current)
+    }, 0)
+    return () => window.clearTimeout(id)
+  }, [showCreateModal, createStep])
   const [serviceSearch, setServiceSearch] = useState('')
   const [copyIdSuccess, setCopyIdSuccess] = useState(false)
   const [credentialToDelete, setCredentialToDelete] = useState<WorkspaceCredential | null>(null)
@@ -769,7 +779,7 @@ export function IntegrationsManager() {
         if (!open) resetCreateForm()
       }}
     >
-      <ModalContent size='md'>
+      <ModalContent size='md' ref={createModalContentRef}>
         {createStep === 1 ? (
           <>
             <ModalHeader>Connect Integration</ModalHeader>
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index f7a6fe5c82d..32f8ebc3334 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -80,6 +80,7 @@ export {
   ModalTitle,
   ModalTrigger,
 } from './modal/modal'
+export { focusFirstTextInput, focusFirstTextInputIn } from './modal/auto-focus'
 export {
   Popover,
   PopoverAnchor,
diff --git a/apps/sim/components/emcn/components/modal/auto-focus.ts b/apps/sim/components/emcn/components/modal/auto-focus.ts
index d96d6c64a7d..fa9bc997643 100644
--- a/apps/sim/components/emcn/components/modal/auto-focus.ts
+++ b/apps/sim/components/emcn/components/modal/auto-focus.ts
@@ -22,16 +22,17 @@ function isVisible(el: HTMLElement): boolean {
   return el.offsetParent !== null || el.getClientRects().length > 0
 }
 
-export function focusFirstTextInput(event: Event): void {
-  const content = event.currentTarget as HTMLElement | null
-  if (!content) return
-
-  const target = Array.from(content.querySelectorAll<HTMLElement>(TEXT_INPUT_SELECTOR)).find(
+/**
+ * Focus the first visible text-entry input within `root`, placing caret at end.
+ * Returns true if an element was focused.
+ */
+export function focusFirstTextInputIn(root: HTMLElement | null): boolean {
+  if (!root) return false
+  const target = Array.from(root.querySelectorAll<HTMLElement>(TEXT_INPUT_SELECTOR)).find(
     isVisible
   )
-  if (!target) return
+  if (!target) return false
 
-  event.preventDefault()
   target.focus({ preventScroll: false })
 
   if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
@@ -49,4 +50,11 @@ export function focusFirstTextInput(event: Event): void {
     sel?.removeAllRanges()
     sel?.addRange(range)
   }
+  return true
+}
+
+export function focusFirstTextInput(event: Event): void {
+  if (focusFirstTextInputIn(event.currentTarget as HTMLElement | null)) {
+    event.preventDefault()
+  }
 }

From 9261f151df6b1cee19257834877c5d03527afd14 Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Mon, 13 Apr 2026 16:15:29 -0700
Subject: [PATCH 4/5] Change modal tabs to auto focus on first text input

---
 .../deploy-modal/components/a2a/a2a.tsx       | 15 +---------
 apps/sim/components/emcn/components/index.ts  |  2 +-
 .../emcn/components/modal/auto-focus.ts       |  4 +--
 .../emcn/components/modal/modal.tsx           | 28 +++++++++++++++++--
 4 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
index 9672e995f4c..a5864aea640 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Check, Clipboard } from 'lucide-react'
 import { useParams } from 'next/navigation'
@@ -195,20 +195,8 @@ export function A2aDeploy({
     }
   }, [startBlockId, startBlockInputFormat, missingFields, collaborativeSetSubblockValue])
 
-  const nameInputRef = useRef<HTMLInputElement>(null)
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
-
-  useEffect(() => {
-    const id = window.setTimeout(() => {
-      const el = nameInputRef.current
-      if (!el) return
-      el.focus()
-      const end = el.value.length
-      el.setSelectionRange(end, end)
-    }, 0)
-    return () => window.clearTimeout(id)
-  }, [])
   const [authScheme, setAuthScheme] = useState<AuthScheme>('apiKey')
   const [pushNotificationsEnabled, setPushNotificationsEnabled] = useState(false)
   const [skillTags, setSkillTags] = useState<string[]>([])
@@ -732,7 +720,6 @@ console.log(data);`
         </Label>
         <Input
           id='a2a-name'
-          ref={nameInputRef}
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder='Enter agent name'
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index 32f8ebc3334..c9148935ac0 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -61,6 +61,7 @@ export { FormField, type FormFieldProps } from './form-field/form-field'
 export { Input, type InputProps, inputVariants } from './input/input'
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp/input-otp'
 export { Label } from './label/label'
+export { focusFirstTextInput, focusFirstTextInputIn } from './modal/auto-focus'
 export {
   MODAL_SIZES,
   Modal,
@@ -80,7 +81,6 @@ export {
   ModalTitle,
   ModalTrigger,
 } from './modal/modal'
-export { focusFirstTextInput, focusFirstTextInputIn } from './modal/auto-focus'
 export {
   Popover,
   PopoverAnchor,
diff --git a/apps/sim/components/emcn/components/modal/auto-focus.ts b/apps/sim/components/emcn/components/modal/auto-focus.ts
index fa9bc997643..8cd4db32b71 100644
--- a/apps/sim/components/emcn/components/modal/auto-focus.ts
+++ b/apps/sim/components/emcn/components/modal/auto-focus.ts
@@ -28,9 +28,7 @@ function isVisible(el: HTMLElement): boolean {
  */
 export function focusFirstTextInputIn(root: HTMLElement | null): boolean {
   if (!root) return false
-  const target = Array.from(root.querySelectorAll<HTMLElement>(TEXT_INPUT_SELECTOR)).find(
-    isVisible
-  )
+  const target = Array.from(root.querySelectorAll<HTMLElement>(TEXT_INPUT_SELECTOR)).find(isVisible)
   if (!target) return false
 
   target.focus({ preventScroll: false })
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index fdf22d3e727..dcca3f3cb69 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -43,7 +43,7 @@ import { X } from 'lucide-react'
 import { usePathname } from 'next/navigation'
 import { cn } from '@/lib/core/utils/cn'
 import { Button } from '../button/button'
-import { focusFirstTextInput } from './auto-focus'
+import { focusFirstTextInput, focusFirstTextInputIn } from './auto-focus'
 
 /**
  * Shared animation classes for modal transitions.
@@ -254,7 +254,27 @@ ModalDescription.displayName = 'ModalDescription'
 /**
  * Modal tabs root component. Wraps tab list and content panels.
  */
-const ModalTabs = TabsPrimitive.Root
+const ModalTabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>(({ onValueChange, ...props }, ref) => {
+  const rootRef = React.useRef<HTMLDivElement>(null)
+  React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement, [])
+
+  const handleValueChange = (value: string) => {
+    onValueChange?.(value)
+    window.requestAnimationFrame(() => {
+      const root = rootRef.current
+      if (!root) return
+      const panel = root.querySelector<HTMLElement>('[role="tabpanel"][data-state="active"]')
+      focusFirstTextInputIn(panel)
+    })
+  }
+
+  return <TabsPrimitive.Root ref={rootRef} onValueChange={handleValueChange} {...props} />
+})
+
+ModalTabs.displayName = 'ModalTabs'
 
 interface ModalTabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
   /** Currently active tab value for indicator positioning */
@@ -353,6 +373,10 @@ ModalTabsTrigger.displayName = 'ModalTabsTrigger'
 /**
  * Modal tab content component. Content panel for each tab.
  * Includes bottom padding for consistent spacing across all tabbed modals.
+ *
+ * When this panel mounts (i.e. its tab becomes active), focus moves to the first
+ * visible text-entry input inside it so typing works immediately. Tabs with no
+ * text input are untouched.
  */
 const ModalTabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,

From faf40da2dfe06a4e46f40a45255ce0e6a7db31c0 Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Mon, 13 Apr 2026 16:24:51 -0700
Subject: [PATCH 5/5] Auto-focus mothership task chats

---
 .../home/components/user-input/user-input.tsx              | 7 ++++---
 1 file changed, 4 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 17ea0764d3a..b50580143e6 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
@@ -410,10 +410,11 @@ export function UserInput({
   }, [isSending, textareaRef])
 
   useEffect(() => {
-    if (isInitialView) {
+    const raf = window.requestAnimationFrame(() => {
       textareaRef.current?.focus()
-    }
-  }, [isInitialView, textareaRef])
+    })
+    return () => window.cancelAnimationFrame(raf)
+  }, [textareaRef])
 
   const handleContainerClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {