From 45217c0f02dd41a1a2400837697fb3124a95e139 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 1 Jul 2026 11:30:30 -0700
Subject: [PATCH 1/2] improvement(settings): react-doctor perf & correctness
 pass

- combine multi-pass array iterations into single passes (api-keys, credential-sets, secrets-manager, team-management)
- cache/hoist Intl formatters to module scope (billing); hoist pure functions and inline-default constants
- stabilize react-query array fallbacks so memos stop recomputing while loading (api-keys, byok, workflow-mcp)
- fix create-workflow-mcp modal reset via render-phase prevOpen compare instead of a state-adjusting effect
- accessibility: aria-labels on real inputs, aria-hidden on autofill decoys, native <button> for clickable rows
- immutable in-place sort where the array is already a fresh copy
---
 .../settings/components/api-keys/api-keys.tsx | 47 ++++++++++++-------
 .../create-api-key-modal.tsx                  |  1 +
 .../settings/components/billing/billing.tsx   | 19 ++++++--
 .../usage-limit-field/usage-limit-field.tsx   | 20 ++++----
 .../components/byok/byok-key-manager.tsx      |  3 ++
 .../settings/components/byok/byok.tsx         |  5 +-
 .../settings/components/copilot/copilot.tsx   | 11 +++--
 .../credential-sets/credential-sets.tsx       | 21 +++++----
 .../settings/components/general/general.tsx   | 11 ++---
 .../inbox-enable-toggle.tsx                   | 21 ++++-----
 .../inbox-settings-tab/inbox-settings-tab.tsx |  6 +--
 .../inbox-task-list/inbox-task-list.tsx       | 17 ++-----
 .../mcp-server-form-modal.tsx                 |  2 +
 .../recently-deleted/recently-deleted.tsx     |  2 +-
 .../secrets-manager/secrets-manager.tsx       | 24 ++++++----
 .../no-organization-view.tsx                  |  4 ++
 .../organization-invite-modal.tsx             |  6 ++-
 .../organization-member-lists.tsx             |  8 ++--
 .../team-management/team-management.tsx       | 33 ++++++-------
 .../create-workflow-mcp-server-modal.tsx      | 18 +++----
 .../workflow-mcp-servers.tsx                  |  2 +-
 21 files changed, 159 insertions(+), 122 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index 1fefe86ba36..cda535f095a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
@@ -24,12 +24,22 @@ import { CreateApiKeyModal } from './components'
 
 const logger = createLogger('ApiKeys')
 
+/** Stable empty references so memoized derivations don't re-run while data loads. */
+const EMPTY_KEYS: ApiKey[] = []
+const EMPTY_KEY_NAMES: string[] = []
+
 /** Copies an API key's name and confirms with a toast. */
 function copyKeyName(name: string) {
   void navigator.clipboard.writeText(name)
   toast.success('Copied name to clipboard')
 }
 
+/** Formats an API key's last-used timestamp, or "Never" when unused. */
+function formatLastUsed(dateString?: string | null): string {
+  if (!dateString) return 'Never'
+  return formatDate(new Date(dateString))
+}
+
 interface ApiKeyRowMenuProps {
   keyName: string
   onDelete: () => void
@@ -73,9 +83,9 @@ export function ApiKeys() {
   const deleteApiKeyMutation = useDeleteApiKey()
   const updateSettingsMutation = useUpdateWorkspaceApiKeySettings()
 
-  const workspaceKeys = apiKeysData?.workspaceKeys || []
-  const personalKeys = apiKeysData?.personalKeys || []
-  const conflicts = apiKeysData?.conflicts || []
+  const workspaceKeys = apiKeysData?.workspaceKeys ?? EMPTY_KEYS
+  const personalKeys = apiKeysData?.personalKeys ?? EMPTY_KEYS
+  const conflicts = apiKeysData?.conflicts ?? EMPTY_KEY_NAMES
   const isLoading = isLoadingKeys || isLoadingSettings
 
   const allowPersonalApiKeys =
@@ -90,21 +100,27 @@ export function ApiKeys() {
   const createButtonDisabled = isLoading || (!allowPersonalApiKeys && !canManageWorkspaceKeys)
 
   const filteredWorkspaceKeys = useMemo(() => {
-    if (!searchTerm.trim()) {
-      return workspaceKeys.map((key, index) => ({ key, originalIndex: index }))
+    const term = searchTerm.trim().toLowerCase()
+    const result: { key: ApiKey; originalIndex: number }[] = []
+    for (let index = 0; index < workspaceKeys.length; index++) {
+      const key = workspaceKeys[index]
+      if (term === '' || key.name.toLowerCase().includes(term)) {
+        result.push({ key, originalIndex: index })
+      }
     }
-    return workspaceKeys
-      .map((key, index) => ({ key, originalIndex: index }))
-      .filter(({ key }) => key.name.toLowerCase().includes(searchTerm.toLowerCase()))
+    return result
   }, [workspaceKeys, searchTerm])
 
   const filteredPersonalKeys = useMemo(() => {
-    if (!searchTerm.trim()) {
-      return personalKeys.map((key, index) => ({ key, originalIndex: index }))
+    const term = searchTerm.trim().toLowerCase()
+    const result: { key: ApiKey; originalIndex: number }[] = []
+    for (let index = 0; index < personalKeys.length; index++) {
+      const key = personalKeys[index]
+      if (term === '' || key.name.toLowerCase().includes(term)) {
+        result.push({ key, originalIndex: index })
+      }
     }
-    return personalKeys
-      .map((key, index) => ({ key, originalIndex: index }))
-      .filter(({ key }) => key.name.toLowerCase().includes(searchTerm.toLowerCase()))
+    return result
   }, [personalKeys, searchTerm])
 
   const handleDeleteKey = async () => {
@@ -128,11 +144,6 @@ export function ApiKeys() {
     }
   }
 
-  const formatLastUsed = (dateString?: string | null) => {
-    if (!dateString) return 'Never'
-    return formatDate(new Date(dateString))
-  }
-
   const actions: SettingsAction[] = [
     {
       text: 'Create API key',
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 b8dfb6d975b..bd85229e898 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
@@ -143,6 +143,7 @@ export function CreateApiKeyModal({
             type='text'
             name='fakeusernameremembered'
             autoComplete='username'
+            aria-hidden='true'
             style={{
               position: 'absolute',
               left: '-9999px',
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
index 3dc0ca2b8b7..d4ffc001032 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
@@ -90,12 +90,23 @@ function formatInvoiceDate(createdSeconds: number): string {
   })
 }
 
+/** Cached currency formatters, keyed by upper-cased ISO currency code. */
+const invoiceAmountFormatters = new Map<string, Intl.NumberFormat>()
+
+/** Resolve (and memoize) an `Intl.NumberFormat` for a currency code. */
+function getInvoiceAmountFormatter(currency: string): Intl.NumberFormat {
+  const code = currency.toUpperCase()
+  let formatter = invoiceAmountFormatters.get(code)
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(undefined, { style: 'currency', currency: code })
+    invoiceAmountFormatters.set(code, formatter)
+  }
+  return formatter
+}
+
 /** Format a minor-unit (e.g. cents) amount as a localized currency string. */
 function formatInvoiceAmount(amountMinor: number, currency: string): string {
-  return new Intl.NumberFormat(undefined, {
-    style: 'currency',
-    currency: currency.toUpperCase(),
-  }).format(amountMinor / 100)
+  return getInvoiceAmountFormatter(currency).format(amountMinor / 100)
 }
 
 export function Billing() {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/billing/components/usage-limit-field/usage-limit-field.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/billing/components/usage-limit-field/usage-limit-field.tsx
index fd56bcd442c..48b198dc5b0 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/billing/components/usage-limit-field/usage-limit-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/billing/components/usage-limit-field/usage-limit-field.tsx
@@ -13,6 +13,15 @@ import { useDebounce } from '@/hooks/use-debounce'
 /** Delay before a usage-limit edit is auto-saved once the user stops typing. */
 const AUTOSAVE_DELAY_MS = 1000
 
+/** Static help accessory for the usage-limit header; hoisted so it's a stable reference. */
+const USAGE_LIMIT_INFO = (
+  <Info side='top' className='text-[var(--text-muted)]'>
+    {
+      "Max usage to consume per month, set in credits — Sim's usage unit (1,000 credits = $5). By default, it's your plan's included usage, but you can set it beyond."
+    }
+  </Info>
+)
+
 interface UsageLimitFieldProps {
   /** Current monthly usage limit, in dollars. */
   currentLimit: number
@@ -111,16 +120,7 @@ export function UsageLimitField({
   }, [debouncedDraft, minimumLimit, canEdit, context, organizationId, saveOrgLimit, saveUserLimit])
 
   return (
-    <SettingsSection
-      label='Usage limit'
-      headerAccessory={
-        <Info side='top' className='text-[var(--text-muted)]'>
-          {
-            "Max usage to consume per month, set in credits — Sim's usage unit (1,000 credits = $5). By default, it's your plan's included usage, but you can set it beyond."
-          }
-        </Info>
-      }
-    >
+    <SettingsSection label='Usage limit' headerAccessory={USAGE_LIMIT_INFO}>
       <ChipInput
         type='number'
         inputMode='numeric'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-key-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-key-manager.tsx
index 20fa47d396a..5ae372eddd8 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-key-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-key-manager.tsx
@@ -299,6 +299,7 @@ export function BYOKKeyManager(props: BYOKKeyManagerProps) {
               strokeWidth={2}
             />
             <input
+              aria-label='Search providers'
               placeholder='Search providers...'
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
@@ -380,6 +381,7 @@ export function BYOKKeyManager(props: BYOKKeyManagerProps) {
               type='text'
               name='fakeusernameremembered'
               autoComplete='username'
+              aria-hidden='true'
               style={{
                 position: 'absolute',
                 left: '-9999px',
@@ -391,6 +393,7 @@ export function BYOKKeyManager(props: BYOKKeyManagerProps) {
             />
             <div className={CHIP_FIELD_SHELL}>
               <input
+                aria-label='API Key'
                 type={showApiKey ? 'text' : 'password'}
                 value={apiKeyInput}
                 onChange={(e) => {
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 985734b6ba5..c365196abcd 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
@@ -325,19 +325,18 @@ export function BYOK() {
   const workspaceId = (params?.workspaceId as string) || ''
 
   const { data, isLoading } = useBYOKKeys(workspaceId)
-  const keys = data?.keys ?? []
   const upsertKey = useUpsertBYOKKey()
   const deleteKey = useDeleteBYOKKey()
 
   const keysByProvider = useMemo(() => {
     const grouped = new Map<string, BYOKManagerKey[]>()
-    for (const key of keys) {
+    for (const key of data?.keys ?? []) {
       const providerKeys = grouped.get(key.providerId) ?? []
       providerKeys.push({ id: key.id, name: key.name, maskedKey: key.maskedKey })
       grouped.set(key.providerId, providerKeys)
     }
     return grouped
-  }, [keys])
+  }, [data?.keys])
 
   return (
     <SettingsPanel>
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 b02be972520..6d17bf41545 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
@@ -27,6 +27,12 @@ import {
 
 const logger = createLogger('CopilotSettings')
 
+/** Formats a key's last-used timestamp, falling back to "Never" when unset. */
+function formatLastUsed(dateString?: string | null): string {
+  if (!dateString) return 'Never'
+  return formatDate(new Date(dateString))
+}
+
 /**
  * Copilot Keys management component for handling API keys used with the Copilot feature.
  * Provides functionality to create, view, and delete copilot API keys.
@@ -95,11 +101,6 @@ export function Copilot() {
     }
   }
 
-  const formatLastUsed = (dateString?: string | null) => {
-    if (!dateString) return 'Never'
-    return formatDate(new Date(dateString))
-  }
-
   const hasKeys = keys.length > 0
   const showEmptyState = !hasKeys
   const showNoResults = searchTerm.trim() && filteredKeys.length === 0 && keys.length > 0
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
index bb285ffdd02..e55a36eafe7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
@@ -57,6 +57,11 @@ import { useSubscriptionData } from '@/hooks/queries/subscription'
 
 const logger = createLogger('EmailPolling')
 
+function getProviderIcon(providerId: string | null) {
+  if (providerId === 'outlook') return <OutlookIcon className='size-4' />
+  return <GmailIcon className='size-4' />
+}
+
 export function CredentialSets() {
   const { data: session } = useSession()
   const { data: organizationsData } = useOrganizations()
@@ -240,10 +245,13 @@ export function CredentialSets() {
     }
   }, [newSetName, newSetDescription, newSetProvider, activeOrganization?.id, createCredentialSet])
 
-  const validEmails = useMemo(
-    () => emailItems.filter((item) => item.isValid).map((item) => item.value),
-    [emailItems]
-  )
+  const validEmails = useMemo(() => {
+    const result: string[] = []
+    for (const item of emailItems) {
+      if (item.isValid) result.push(item.value)
+    }
+    return result
+  }, [emailItems])
 
   const handleInviteMembers = useCallback(async () => {
     if (!viewingSet?.id) return
@@ -367,11 +375,6 @@ export function CredentialSets() {
     }
   }, [deletingSet, activeOrganization?.id, deleteCredentialSet])
 
-  const getProviderIcon = (providerId: string | null) => {
-    if (providerId === 'outlook') return <OutlookIcon className='size-4' />
-    return <GmailIcon className='size-4' />
-  }
-
   const activeMemberships = useMemo(
     () => memberships.filter((m) => m.status === 'active'),
     [memberships]
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
index 4d38140a26b..0c0aa46005c 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -10,7 +10,6 @@ import {
   ChipModalFooter,
   ChipModalHeader,
   ChipSelect,
-  handleKeyboardActivation,
   Input,
   Label,
   Switch,
@@ -293,12 +292,11 @@ export function General() {
           <div className='flex flex-col gap-3'>
             <div className='flex items-center gap-3'>
               <div className='relative'>
-                <div
-                  role='button'
-                  tabIndex={0}
+                <button
+                  type='button'
+                  aria-label='Change profile picture'
                   className={`group relative flex size-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full transition-all hover-hover:bg-[var(--bg)] ${!imageUrl ? 'border border-[var(--border)]' : ''}`}
                   onClick={handleProfilePictureClick}
-                  onKeyDown={(event) => handleKeyboardActivation(event, handleProfilePictureClick)}
                 >
                   {(() => {
                     if (imageUrl) {
@@ -334,7 +332,7 @@ export function General() {
                       <Camera className='size-4 text-white' />
                     )}
                   </div>
-                </div>
+                </button>
                 <Input
                   type='file'
                   accept='image/png,image/jpeg,image/jpg'
@@ -357,6 +355,7 @@ export function General() {
                         </span>
                         <input
                           ref={inputRef}
+                          aria-label='Your name'
                           value={name}
                           onChange={(e) => setName(e.target.value)}
                           onKeyDown={handleKeyDown}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-enable-toggle/inbox-enable-toggle.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-enable-toggle/inbox-enable-toggle.tsx
index f3976f33415..b8eb1683031 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-enable-toggle/inbox-enable-toggle.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-enable-toggle/inbox-enable-toggle.tsx
@@ -27,16 +27,13 @@ export function InboxEnableToggle() {
   const [isDisableOpen, setIsDisableOpen] = useState(false)
   const [enableUsername, setEnableUsername] = useState('')
 
-  const handleToggle = useCallback(
-    async (checked: boolean) => {
-      if (checked) {
-        setIsEnableOpen(true)
-        return
-      }
-      setIsDisableOpen(true)
-    },
-    [workspaceId]
-  )
+  const handleToggle = useCallback(async (checked: boolean) => {
+    if (checked) {
+      setIsEnableOpen(true)
+      return
+    }
+    setIsDisableOpen(true)
+  }, [])
 
   const handleDisable = useCallback(async () => {
     try {
@@ -45,7 +42,7 @@ export function InboxEnableToggle() {
     } catch (error) {
       logger.error('Failed to disable inbox', { error })
     }
-  }, [workspaceId])
+  }, [workspaceId, toggleInbox.mutateAsync])
 
   const handleEnable = useCallback(async () => {
     try {
@@ -59,7 +56,7 @@ export function InboxEnableToggle() {
     } catch (error) {
       logger.error('Failed to enable inbox', { error })
     }
-  }, [workspaceId, enableUsername])
+  }, [workspaceId, enableUsername, toggleInbox.mutateAsync])
 
   return (
     <>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
index 942fd5d8acd..4bb93b6a2ba 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
@@ -65,7 +65,7 @@ export function InboxSettingsTab() {
     } catch (error) {
       setEditAddressError(getErrorMessage(error, 'Failed to update address'))
     }
-  }, [workspaceId, newUsername])
+  }, [workspaceId, newUsername, updateAddress.mutateAsync])
 
   const handleAddSender = useCallback(async () => {
     if (!newSenderEmail.trim()) return
@@ -82,7 +82,7 @@ export function InboxSettingsTab() {
     } catch (error) {
       setAddSenderError(getErrorMessage(error, 'Failed to add sender'))
     }
-  }, [workspaceId, newSenderEmail, newSenderLabel])
+  }, [workspaceId, newSenderEmail, newSenderLabel, addSender.mutateAsync])
 
   const handleRemoveSender = useCallback(
     async (senderId: string) => {
@@ -93,7 +93,7 @@ export function InboxSettingsTab() {
         setRemoveSenderError(getErrorMessage(error, 'Failed to remove sender'))
       }
     },
-    [workspaceId]
+    [workspaceId, removeSender.mutateAsync]
   )
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
index 3b52de1ea3f..de8232f90c8 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
@@ -134,23 +134,16 @@ export function InboxTaskList() {
               const isClickable =
                 task.chatId && (task.status === 'completed' || task.status === 'failed')
               return (
-                <div
+                <button
                   key={task.id}
-                  className={`flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors ${
+                  type='button'
+                  disabled={!isClickable}
+                  className={`flex w-full items-center gap-2.5 rounded-lg p-2 text-left transition-colors ${
                     isClickable
                       ? 'cursor-pointer hover-hover:bg-[var(--surface-active)]'
                       : 'cursor-default'
                   }`}
-                  role='button'
-                  aria-disabled={!isClickable}
-                  tabIndex={isClickable ? 0 : undefined}
                   onClick={() => handleTaskClick(task)}
-                  onKeyDown={(e) => {
-                    if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
-                      e.preventDefault()
-                      handleTaskClick(task)
-                    }
-                  }}
                 >
                   <div className='flex min-w-0 flex-1 flex-col'>
                     <div className='flex min-w-0 items-center gap-1.5'>
@@ -202,7 +195,7 @@ export function InboxTaskList() {
                       <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
                     )}
                   </div>
-                </div>
+                </button>
               )
             })}
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
index a7bbfc7d4a0..9c93dd8fa01 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
@@ -672,6 +672,7 @@ export function McpServerFormModal({
               type='text'
               name='fakeusernameremembered'
               autoComplete='username'
+              aria-hidden='true'
               style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
               tabIndex={-1}
               readOnly
@@ -680,6 +681,7 @@ export function McpServerFormModal({
               type='password'
               name='fakepasswordremembered'
               autoComplete='current-password'
+              aria-hidden='true'
               style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
               tabIndex={-1}
               readOnly
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
index 78f91e8510e..e1f79ef2cd5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
@@ -303,7 +303,7 @@ export function RecentlyDeleted() {
     }
     const col = (activeSort ?? DEFAULT_SORT).column
     const dir = (activeSort ?? DEFAULT_SORT).direction
-    items = [...items].sort((a, b) => {
+    items.sort((a, b) => {
       let cmp = 0
       switch (col) {
         case 'name':
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
index 84b226c14ea..b49c4e801e5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
@@ -173,10 +173,14 @@ function parseEnvVarLine(line: string): UIEnvironmentVariable | null {
 
 /** Parses an array of raw text lines, returning only valid non-empty KEY=VALUE entries. */
 function parseValidEnvVars(lines: string[]): UIEnvironmentVariable[] {
-  return lines
-    .map(parseEnvVarLine)
-    .filter((parsed): parsed is UIEnvironmentVariable => parsed !== null)
-    .filter(({ key, value }) => key && value)
+  const result: UIEnvironmentVariable[] = []
+  for (const line of lines) {
+    const parsed = parseEnvVarLine(line)
+    if (parsed?.key && parsed.value) {
+      result.push(parsed)
+    }
+  }
+  return result
 }
 
 interface WorkspaceVariableRowProps {
@@ -771,9 +775,10 @@ export function SecretsManager() {
     }
 
     const personalChanged = (() => {
-      const initialMap = new Map(
-        initialVarsRef.current.filter((v) => v.key && v.value).map((v) => [v.key, v.value])
-      )
+      const initialMap = new Map<string, string>()
+      for (const v of initialVarsRef.current) {
+        if (v.key && v.value) initialMap.set(v.key, v.value)
+      }
       const currentKeys = Object.keys(validVariables)
       if (initialMap.size !== currentKeys.length) return true
       for (const [key, value] of Object.entries(validVariables)) {
@@ -912,13 +917,14 @@ export function SecretsManager() {
 
   return (
     <>
-      <div className='hidden'>
+      <div className='hidden' aria-hidden='true'>
         <input
           type='text'
           name='fakeusernameremembered'
           autoComplete='username'
           tabIndex={-1}
           readOnly
+          aria-hidden='true'
         />
         <input
           type='password'
@@ -926,6 +932,7 @@ export function SecretsManager() {
           autoComplete='current-password'
           tabIndex={-1}
           readOnly
+          aria-hidden='true'
         />
         <input
           type='email'
@@ -933,6 +940,7 @@ export function SecretsManager() {
           autoComplete='email'
           tabIndex={-1}
           readOnly
+          aria-hidden='true'
         />
       </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
index f3f30c7bca0..5b91277a2aa 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
@@ -65,6 +65,8 @@ export function NoOrganizationView({
               style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
               tabIndex={-1}
               readOnly
+              aria-hidden='true'
+              aria-label='Ignore this field'
             />
             <div>
               <Label htmlFor='team-name-field' className='font-medium text-small'>
@@ -137,6 +139,8 @@ export function NoOrganizationView({
               style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
               tabIndex={-1}
               readOnly
+              aria-hidden='true'
+              aria-label='Ignore this field'
             />
             <ChipModalField
               type='input'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-invite-modal/organization-invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-invite-modal/organization-invite-modal.tsx
index 79c64a81d0b..3ce2435a734 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-invite-modal/organization-invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-invite-modal/organization-invite-modal.tsx
@@ -25,6 +25,8 @@ const ROLE_OPTIONS = [
   { value: 'read', label: 'Read' },
 ] as const
 
+const EMPTY_EMAILS: string[] = []
+
 interface OrganizationInviteModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -54,8 +56,8 @@ export function OrganizationInviteModal({
   onOpenChange,
   organizationId,
   workspaces,
-  externalEmails = [],
-  pendingEmails = [],
+  externalEmails = EMPTY_EMAILS,
+  pendingEmails = EMPTY_EMAILS,
 }: OrganizationInviteModalProps) {
   const [emails, setEmails] = useState<string[]>([])
   const [selectedWorkspaceIds, setSelectedWorkspaceIds] = useState<string[]>([])
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
index 23582d801eb..2e1f6c61d08 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
@@ -66,6 +66,10 @@ function copyToClipboard(text: string) {
   void navigator.clipboard.writeText(text)
 }
 
+function buildActionsMenu(actions: RowAction[]) {
+  return <RowActionsMenu label='Member actions' actions={actions} />
+}
+
 interface OrganizationMemberListsProps {
   organizationId: string
   roster: OrganizationRoster | null | undefined
@@ -109,10 +113,6 @@ export function OrganizationMemberLists({
 
   const isActiveSearch = q.length > 0
 
-  const buildActionsMenu = (actions: RowAction[]) => (
-    <RowActionsMenu label='Member actions' actions={actions} />
-  )
-
   const renderOrgMemberRow = (member: RosterMember) => {
     const isSelf = member.userId === currentUserId
     const isOwner = member.role === 'owner'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
index 334d9f32e37..0955294757a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
@@ -96,13 +96,13 @@ export function TeamManagement() {
       }
     : null
 
-  const externalEmails = useMemo(
-    () =>
-      (roster?.members ?? [])
-        .filter((member) => member.role === 'external')
-        .map((member) => member.email),
-    [roster]
-  )
+  const externalEmails = useMemo(() => {
+    const emails: string[] = []
+    for (const member of roster?.members ?? []) {
+      if (member.role === 'external') emails.push(member.email)
+    }
+    return emails
+  }, [roster])
 
   /**
    * Pending invitations for emails that already belong to a member are
@@ -111,14 +111,15 @@ export function TeamManagement() {
    * blocked in the invite modal.
    */
   const pendingEmails = useMemo(() => {
-    const memberEmailSet = new Set(
-      (roster?.members ?? [])
-        .filter((member) => member.role !== 'external')
-        .map((member) => member.email.toLowerCase())
-    )
-    return (roster?.pendingInvitations ?? [])
-      .map((invitation) => invitation.email)
-      .filter((email) => !memberEmailSet.has(email.toLowerCase()))
+    const memberEmailSet = new Set<string>()
+    for (const member of roster?.members ?? []) {
+      if (member.role !== 'external') memberEmailSet.add(member.email.toLowerCase())
+    }
+    const emails: string[] = []
+    for (const invitation of roster?.pendingInvitations ?? []) {
+      if (!memberEmailSet.has(invitation.email.toLowerCase())) emails.push(invitation.email)
+    }
+    return emails
   }, [roster])
 
   useEffect(() => {
@@ -150,7 +151,7 @@ export function TeamManagement() {
     } catch (error) {
       logger.error('Failed to create organization', error)
     }
-  }, [orgName, orgSlug, createOrgMutation])
+  }, [orgName, orgSlug, createOrgMutation, session?.user])
 
   const handleRemoveMember = useCallback(
     async (member: Member) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx
index a130cb3c418..d5063475eee 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useState } from 'react'
 import {
   ButtonGroup,
   ButtonGroupItem,
@@ -44,12 +44,14 @@ export function CreateWorkflowMcpServerModal({
 
   const isFormValid = formData.name.trim().length > 0
 
-  useEffect(() => {
-    if (open) {
-      setFormData({ ...INITIAL_FORM_DATA })
-      setSelectedWorkflowIds([])
-    }
-  }, [open])
+  const [prevOpen, setPrevOpen] = useState(false)
+  if (open && !prevOpen) {
+    setFormData({ ...INITIAL_FORM_DATA })
+    setSelectedWorkflowIds([])
+  }
+  if (open !== prevOpen) {
+    setPrevOpen(open)
+  }
 
   const handleCreateServer = useCallback(async () => {
     if (!formData.name.trim()) return
@@ -66,7 +68,7 @@ export function CreateWorkflowMcpServerModal({
     } catch (err) {
       logger.error('Failed to create server:', err)
     }
-  }, [formData, selectedWorkflowIds, workspaceId, onOpenChange])
+  }, [formData, selectedWorkflowIds, workspaceId, onOpenChange, createServerMutation.mutateAsync])
 
   const showWorkflows = workflowOptions !== undefined
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index bd6121440b3..f97f9a0cc11 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -217,7 +217,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
     return !descriptionChanged && !paramDescriptionsChanged
   })()
 
-  const tools = data?.tools ?? []
+  const tools = useMemo(() => data?.tools ?? [], [data?.tools])
 
   const availableWorkflows = useMemo(() => {
     const existingWorkflowIds = new Set(tools.map((t) => t.workflowId))

From eafaab9861410bdd80fe294d748b8dcfc5163a9a Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 1 Jul 2026 11:38:45 -0700
Subject: [PATCH 2/2] fix(settings): render non-clickable inbox rows as div,
 not disabled button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses review: a native disabled <button> can inherit browser disabled
styling (dimmed text / lower contrast) on non-navigable task rows. Render an
interactive <button> only when the row is clickable; otherwise a plain <div>
with identical layout — preserving the semantic-button a11y win without the
disabled-state visual regression.
---
 .../inbox-task-list/inbox-task-list.tsx       | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
index de8232f90c8..6b4e88013c2 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
@@ -133,18 +133,13 @@ export function InboxTaskList() {
               const statusBadge = STATUS_BADGES[task.status] || STATUS_BADGES.received
               const isClickable =
                 task.chatId && (task.status === 'completed' || task.status === 'failed')
-              return (
-                <button
-                  key={task.id}
-                  type='button'
-                  disabled={!isClickable}
-                  className={`flex w-full items-center gap-2.5 rounded-lg p-2 text-left transition-colors ${
-                    isClickable
-                      ? 'cursor-pointer hover-hover:bg-[var(--surface-active)]'
-                      : 'cursor-default'
-                  }`}
-                  onClick={() => handleTaskClick(task)}
-                >
+              const rowClassName = `flex w-full items-center gap-2.5 rounded-lg p-2 text-left transition-colors ${
+                isClickable
+                  ? 'cursor-pointer hover-hover:bg-[var(--surface-active)]'
+                  : 'cursor-default'
+              }`
+              const rowContent = (
+                <>
                   <div className='flex min-w-0 flex-1 flex-col'>
                     <div className='flex min-w-0 items-center gap-1.5'>
                       <span className='truncate text-[14px] text-[var(--text-body)]'>
@@ -195,7 +190,22 @@ export function InboxTaskList() {
                       <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
                     )}
                   </div>
+                </>
+              )
+
+              return isClickable ? (
+                <button
+                  key={task.id}
+                  type='button'
+                  className={rowClassName}
+                  onClick={() => handleTaskClick(task)}
+                >
+                  {rowContent}
                 </button>
+              ) : (
+                <div key={task.id} className={rowClassName}>
+                  {rowContent}
+                </div>
               )
             })}
           </div>