improvement(settings): react-doctor perf & correctness pass (#5327)

* 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

* fix(settings): render non-clickable inbox rows as div, not disabled button

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.

Author: waleedlatif1

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',

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',

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() {

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'

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) => {

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>

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

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]

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}

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 (
     <>