refactor(settings): chip design-system consistency pass across all tabs

Extract a shared chip-field shell (CHIP_FIELD_SHELL/CHIP_FIELD_INPUT) mirroring
Input variant='chip' and route secrets, credential detail, and integrations
credential detail through it (30px height, font-medium, focus ring). Add a
Discard action to the secrets header when dirty. Group BYOK providers into
Models/Search & web/Enrichment sections and align its tiles to the integrations
tile.

Normalize list-row typography to text-[14px]/text-[12px] and icon tiles to
rounded-xl + border across api-keys, copilot, custom-tools, mcp,
workflow-mcp-servers, credential-sets, and access-control. Tone the secrets
Details chip and per-row affordances to ghost. Fix token correctness: raw
tailwind colors to design tokens (data-drains), missing chip variant on the
Snowflake role input, ColorInput chip-field reuse (whitelabeling), error token
and icon sizes (workflow-mcp-servers), border token (mcp), no-results sizing
(secrets), row chrome (recently-deleted), hover token and Button to Chip
(access-control), and deduped textarea chrome (sso).

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/chip-field.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared chip-field chrome for the credential and secret detail surfaces.
+ *
+ * These mirror `Input variant='chip'` exactly (30px tall, `rounded-lg`,
+ * `border-1`, `surface-5`/`surface-4`, `font-medium` body text, and a
+ * `border-focus` ring on focus) but as a wrapper + inner-input pair, so a field
+ * can host a borderless input alongside a trailing slot (a copy button, a
+ * reveal toggle). Using one definition keeps every chip field — list rows,
+ * copyable IDs, secret values, display-name/description editors — pixel-identical
+ * to the canonical chip input instead of each re-deriving the tokens.
+ */
+
+/** Pill wrapper. Override height/alignment (e.g. a textarea) via `cn`. */
+export const CHIP_FIELD_SHELL =
+  'flex h-[30px] items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 transition-colors focus-within:border-[var(--border-focus)] dark:bg-[var(--surface-4)]'
+
+/** Borderless input/textarea hosted inside {@link CHIP_FIELD_SHELL}. */
+export const CHIP_FIELD_INPUT =
+  'h-full w-full bg-transparent font-medium text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'

apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/copyable-value-field.tsx

@@ -3,6 +3,11 @@
 import { useState } from 'react'
 import { Button, Tooltip } from '@/components/emcn'
 import { Check, Duplicate } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
+import {
+  CHIP_FIELD_INPUT,
+  CHIP_FIELD_SHELL,
+} from '@/app/workspace/[workspaceId]/components/credential-detail/components/chip-field'
 
 interface CopyableValueFieldProps {
   value: string
@@ -19,13 +24,8 @@ export function CopyableValueField({ value, copyLabel, id }: CopyableValueFieldP
   const [copied, setCopied] = useState(false)
 
   return (
-    <div className='flex h-[30px] items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
-      <input
-        id={id}
-        readOnly
-        value={value}
-        className='h-full w-full cursor-default bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
-      />
+    <div className={CHIP_FIELD_SHELL}>
+      <input id={id} readOnly value={value} className={cn(CHIP_FIELD_INPUT, 'cursor-default')} />
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
           <Button

apps/sim/app/workspace/[workspaceId]/components/credential-detail/index.ts

@@ -1,4 +1,5 @@
 export { AddPeopleModal } from './components/add-people-modal'
+export { CHIP_FIELD_INPUT, CHIP_FIELD_SHELL } from './components/chip-field'
 export { CopyableValueField } from './components/copyable-value-field'
 export { CredentialDetailHeading } from './components/credential-detail-heading'
 export { CredentialDetailLayout } from './components/credential-detail-layout'

apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx

@@ -15,11 +15,14 @@ import {
   toast,
 } from '@/components/emcn'
 import { ArrowLeft } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
 import { writeOAuthReturnContext } from '@/lib/credentials/client-state'
 import { INTEGRATIONS } from '@/lib/integrations'
 import { getServiceConfigByProviderId } from '@/lib/oauth'
 import {
   AddPeopleModal,
+  CHIP_FIELD_INPUT,
+  CHIP_FIELD_SHELL,
   CopyableValueField,
   CredentialDetailHeading,
   CredentialDetailLayout,
@@ -263,21 +266,21 @@ export function ConnectedCredentialDetail({
         </DetailSection>
 
         <DetailSection title='Display Name'>
-          <div className='flex h-[30px] items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
+          <div className={CHIP_FIELD_SHELL}>
             <input
               id='credential-display-name'
               value={form.displayNameDraft}
               onChange={(event) => form.setDisplayNameDraft(event.target.value)}
               autoComplete='off'
               data-lpignore='true'
               disabled={!isAdmin}
-              className='h-full w-full bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+              className={cn(CHIP_FIELD_INPUT, 'disabled:cursor-not-allowed disabled:opacity-60')}
             />
           </div>
         </DetailSection>
 
         <DetailSection title='Description'>
-          <div className='flex items-start gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 dark:bg-[var(--surface-4)]'>
+          <div className={cn(CHIP_FIELD_SHELL, 'h-auto items-start py-2')}>
             <textarea
               id='credential-description'
               rows={4}
@@ -288,7 +291,10 @@ export function ConnectedCredentialDetail({
               autoComplete='off'
               data-lpignore='true'
               disabled={!isAdmin}
-              className='w-full resize-none bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+              className={cn(
+                CHIP_FIELD_INPUT,
+                'h-auto resize-none disabled:cursor-not-allowed disabled:opacity-60'
+              )}
             />
           </div>
         </DetailSection>

apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx

@@ -163,14 +163,14 @@ export function ApiKeys() {
                         <div key={key.id} className='flex items-center justify-between gap-3'>
                           <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
                             <div className='flex items-center gap-1.5'>
-                              <span className='max-w-[280px] truncate font-medium text-base'>
+                              <span className='max-w-[280px] truncate text-[14px] text-[var(--text-body)]'>
                                 {key.name}
                               </span>
                               <span className='text-[var(--text-secondary)] text-sm'>
                                 (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                               </span>
                             </div>
-                            <p className='truncate text-[var(--text-muted)] text-sm'>
+                            <p className='truncate text-[12px] text-[var(--text-muted)]'>
                               {key.displayKey || key.key}
                             </p>
                           </div>
@@ -197,14 +197,14 @@ export function ApiKeys() {
                       <div key={key.id} className='flex items-center justify-between gap-3'>
                         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
                           <div className='flex items-center gap-1.5'>
-                            <span className='max-w-[280px] truncate font-medium text-base'>
+                            <span className='max-w-[280px] truncate text-[14px] text-[var(--text-body)]'>
                               {key.name}
                             </span>
                             <span className='text-[var(--text-secondary)] text-sm'>
                               (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                             </span>
                           </div>
-                          <p className='truncate text-[var(--text-muted)] text-sm'>
+                          <p className='truncate text-[12px] text-[var(--text-muted)]'>
                             {key.displayKey || key.key}
                           </p>
                         </div>
@@ -234,14 +234,14 @@ export function ApiKeys() {
                           <div className='flex items-center justify-between gap-3'>
                             <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
                               <div className='flex items-center gap-1.5'>
-                                <span className='max-w-[280px] truncate font-medium text-base'>
+                                <span className='max-w-[280px] truncate text-[14px] text-[var(--text-body)]'>
                                   {key.name}
                                 </span>
                                 <span className='text-[var(--text-secondary)] text-sm'>
                                   (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                                 </span>
                               </div>
-                              <p className='truncate text-[var(--text-muted)] text-sm'>
+                              <p className='truncate text-[12px] text-[var(--text-muted)]'>
                                 {key.displayKey || key.key}
                               </p>
                             </div>

apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx

@@ -42,6 +42,7 @@ import {
   TogetherIcon,
   WizaIcon,
 } from '@/components/icons'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import {
   type BYOKKey,
   useBYOKKeys,
@@ -222,6 +223,45 @@ const PROVIDERS: {
   },
 ]
 
+/**
+ * Provider groupings rendered as labeled sections. Every provider id in
+ * {@link PROVIDERS} belongs to exactly one section; rows keep their
+ * {@link PROVIDERS} order within each group.
+ */
+const PROVIDER_SECTIONS: { label: string; ids: BYOKProviderId[] }[] = [
+  {
+    label: 'Models',
+    ids: [
+      'openai',
+      'anthropic',
+      'google',
+      'mistral',
+      'fireworks',
+      'together',
+      'baseten',
+      'ollama-cloud',
+      'falai',
+    ],
+  },
+  {
+    label: 'Search & web',
+    ids: [
+      'firecrawl',
+      'exa',
+      'serper',
+      'linkup',
+      'parallel_ai',
+      'perplexity',
+      'jina',
+      'google_cloud',
+    ],
+  },
+  {
+    label: 'Enrichment',
+    ids: ['brandfetch', 'hunter', 'peopledatalabs', 'findymail', 'prospeo', 'wiza'],
+  },
+]
+
 export function BYOK() {
   const params = useParams()
   const workspaceId = (params?.workspaceId as string) || ''
@@ -249,6 +289,11 @@ export function BYOK() {
     )
   }, [searchTerm])
 
+  const filteredIds = useMemo(
+    () => new Set(filteredProviders.map((p) => p.id)),
+    [filteredProviders]
+  )
+
   const showNoResults = searchTerm.trim() && filteredProviders.length === 0
 
   const getKeyForProvider = (providerId: BYOKProviderId): BYOKKey | undefined => {
@@ -307,44 +352,63 @@ export function BYOK() {
             disabled={isLoading}
           />
 
-          {isLoading ? null : (
-            <div className='flex flex-col gap-2'>
-              {filteredProviders.map((provider) => {
-                const existingKey = getKeyForProvider(provider.id)
-                const Icon = provider.icon
+          {isLoading ? null : showNoResults ? (
+            <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
+              No providers found matching "{searchTerm}"
+            </div>
+          ) : (
+            <div className='flex flex-col gap-7'>
+              {PROVIDER_SECTIONS.map((section) => {
+                const rows = PROVIDERS.filter(
+                  (p) => section.ids.includes(p.id) && filteredIds.has(p.id)
+                )
+                if (rows.length === 0) return null
 
                 return (
-                  <div key={provider.id} className='flex items-center justify-between gap-3'>
-                    <div className='flex items-center gap-3'>
-                      <div className='flex size-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-md bg-[var(--surface-6)]'>
-                        <Icon className='size-4' />
-                      </div>
-                      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <span className='font-medium text-base'>{provider.name}</span>
-                        <p className='truncate text-[var(--text-muted)] text-sm'>
-                          {provider.description}
-                        </p>
-                      </div>
-                    </div>
+                  <SettingsSection key={section.label} label={section.label}>
+                    <div className='flex flex-col gap-2'>
+                      {rows.map((provider) => {
+                        const existingKey = getKeyForProvider(provider.id)
+                        const Icon = provider.icon
+
+                        return (
+                          <div
+                            key={provider.id}
+                            className='flex items-center justify-between gap-2.5'
+                          >
+                            <div className='flex min-w-0 items-center gap-2.5'>
+                              <div className='flex size-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border-1)] bg-[var(--bg)]'>
+                                <Icon className='size-5' />
+                              </div>
+                              <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                                <span className='truncate text-[14px] text-[var(--text-body)]'>
+                                  {provider.name}
+                                </span>
+                                <span className='truncate text-[12px] text-[var(--text-muted)]'>
+                                  {provider.description}
+                                </span>
+                              </div>
+                            </div>
 
-                    {existingKey ? (
-                      <div className='flex flex-shrink-0 items-center gap-2'>
-                        <Chip onClick={() => openEditModal(provider.id)}>Update</Chip>
-                        <Chip onClick={() => setDeleteConfirmProvider(provider.id)}>Delete</Chip>
-                      </div>
-                    ) : (
-                      <Chip variant='primary' onClick={() => openEditModal(provider.id)}>
-                        Add Key
-                      </Chip>
-                    )}
-                  </div>
+                            {existingKey ? (
+                              <div className='flex flex-shrink-0 items-center gap-2'>
+                                <Chip onClick={() => openEditModal(provider.id)}>Update</Chip>
+                                <Chip onClick={() => setDeleteConfirmProvider(provider.id)}>
+                                  Delete
+                                </Chip>
+                              </div>
+                            ) : (
+                              <Chip variant='primary' onClick={() => openEditModal(provider.id)}>
+                                Add Key
+                              </Chip>
+                            )}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </SettingsSection>
                 )
               })}
-              {showNoResults && (
-                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
-                  No providers found matching "{searchTerm}"
-                </div>
-              )}
             </div>
           )}
         </div>

apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx

@@ -213,14 +213,16 @@ export function Copilot() {
                   <div key={key.id} className='flex items-center justify-between gap-3'>
                     <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
                       <div className='flex items-center gap-1.5'>
-                        <span className='max-w-[280px] truncate font-medium text-base'>
+                        <span className='max-w-[280px] truncate text-[14px] text-[var(--text-body)]'>
                           {key.name || 'Unnamed Key'}
                         </span>
                         <span className='text-[var(--text-secondary)] text-sm'>
                           (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                         </span>
                       </div>
-                      <p className='truncate text-[var(--text-muted)] text-sm'>{key.displayKey}</p>
+                      <p className='truncate text-[12px] text-[var(--text-muted)]'>
+                        {key.displayKey}
+                      </p>
                     </div>
                     <Chip
                       className='flex-shrink-0'