From 72e4fd59601f9bf9a1028cc304bb70b2ec7926b9 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 24 Feb 2026 10:19:52 -0800
Subject: [PATCH 1/8] improvement(credentials): ui

---
 .../credentials/credentials-manager.tsx       | 1276 +++++++++--------
 1 file changed, 689 insertions(+), 587 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
index c2e6960f34..9fdb7ce5cb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
@@ -2,7 +2,7 @@
 
 import { createElement, useCallback, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { AlertTriangle, Check, Copy, Plus, RefreshCw, Search, Share2, Trash2 } from 'lucide-react'
+import { AlertTriangle, Check, Copy, Plus, RefreshCw, Search, Share2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
@@ -20,9 +20,8 @@ import {
   Textarea,
   Tooltip,
 } from '@/components/emcn'
-import { Skeleton } from '@/components/ui'
+import { Skeleton, Input as UiInput } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
-import { cn } from '@/lib/core/utils/cn'
 import {
   clearPendingCredentialCreateRequest,
   PENDING_CREDENTIAL_CREATE_REQUEST_EVENT,
@@ -151,9 +150,9 @@ function typeBadgeVariant(type: WorkspaceCredential['type']): 'blue' | 'amber' |
 }
 
 function typeLabel(type: WorkspaceCredential['type']): string {
-  if (type === 'oauth') return 'OAuth'
-  if (type === 'env_workspace') return 'Workspace Secret'
-  return 'Personal Secret'
+  if (type === 'oauth') return 'oauth'
+  if (type === 'env_workspace') return 'workspace secret'
+  return 'personal secret'
 }
 
 function normalizeEnvKeyInput(raw: string): string {
@@ -162,6 +161,21 @@ function normalizeEnvKeyInput(raw: string): string {
   return wrappedMatch ? wrappedMatch[1] : trimmed
 }
 
+function CredentialSkeleton() {
+  return (
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <Skeleton className='h-[14px] w-[100px]' />
+        <Skeleton className='h-[13px] w-[200px]' />
+      </div>
+      <div className='flex flex-shrink-0 items-center gap-[8px]'>
+        <Skeleton className='h-[30px] w-[54px] rounded-[4px]' />
+        <Skeleton className='h-[30px] w-[50px] rounded-[4px]' />
+      </div>
+    </div>
+  )
+}
+
 export function CredentialsManager() {
   const params = useParams()
   const workspaceId = (params?.workspaceId as string) || ''
@@ -188,6 +202,8 @@ export function CredentialsManager() {
   const [selectedDisplayNameDraft, setSelectedDisplayNameDraft] = useState('')
   const [showCreateOAuthRequiredModal, setShowCreateOAuthRequiredModal] = useState(false)
   const [copyIdSuccess, setCopyIdSuccess] = useState(false)
+  const [credentialToDelete, setCredentialToDelete] = useState<WorkspaceCredential | null>(null)
+  const [showDeleteConfirmDialog, setShowDeleteConfirmDialog] = useState(false)
   const { data: session } = useSession()
   const currentUserId = session?.user?.id || ''
 
@@ -773,6 +789,44 @@ export function CredentialsManager() {
     }
   }
 
+  const handleDeleteClick = (credential: WorkspaceCredential) => {
+    setCredentialToDelete(credential)
+    setShowDeleteConfirmDialog(true)
+  }
+
+  const handleConfirmDelete = async () => {
+    if (!credentialToDelete) return
+    setShowDeleteConfirmDialog(false)
+
+    try {
+      if (credentialToDelete.type === 'oauth') {
+        if (credentialToDelete.accountId && credentialToDelete.providerId) {
+          await disconnectOAuthService.mutateAsync({
+            provider: credentialToDelete.providerId.split('-')[0] || credentialToDelete.providerId,
+            providerId: credentialToDelete.providerId,
+            serviceId: credentialToDelete.providerId,
+            accountId: credentialToDelete.accountId,
+          })
+          await refetchCredentials()
+          window.dispatchEvent(
+            new CustomEvent('oauth-credentials-updated', {
+              detail: { providerId: credentialToDelete.providerId, workspaceId },
+            })
+          )
+        }
+      } else {
+        await deleteCredential.mutateAsync(credentialToDelete.id)
+      }
+      if (selectedCredentialId === credentialToDelete.id) {
+        setSelectedCredentialId(null)
+      }
+    } catch (error) {
+      logger.error('Failed to delete credential', error)
+    } finally {
+      setCredentialToDelete(null)
+    }
+  }
+
   const [isPromoting, setIsPromoting] = useState(false)
   const [isShareingWithWorkspace, setIsSharingWithWorkspace] = useState(false)
 
@@ -964,81 +1018,359 @@ export function CredentialsManager() {
     }
   }
 
-  return (
-    <div className='flex h-full min-h-0 gap-[16px]'>
-      <div className='flex w-[320px] min-w-[320px] flex-col gap-[12px] border-[var(--border-1)] border-r pr-[16px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='relative flex-1'>
-            <Search className='-translate-y-1/2 absolute top-1/2 left-[10px] h-[14px] w-[14px] text-[var(--text-tertiary)]' />
-            <Input
-              value={searchTerm}
-              onChange={(event) => setSearchTerm(event.target.value)}
-              placeholder='Search credentials...'
-              className='pl-[32px]'
-            />
-          </div>
-          <Button variant='active' onClick={() => setShowCreateModal(true)}>
-            <Plus className='h-[14px] w-[14px]' />
-          </Button>
-        </div>
-
-        <div className='min-h-0 flex-1 overflow-y-auto'>
-          {credentialsLoading ? (
-            <div className='flex flex-col gap-[8px]'>
-              <Skeleton className='h-[64px] w-full rounded-[8px]' />
-              <Skeleton className='h-[64px] w-full rounded-[8px]' />
-              <Skeleton className='h-[64px] w-full rounded-[8px]' />
-            </div>
-          ) : sortedCredentials.length === 0 ? (
-            <div className='rounded-[8px] border border-[var(--border-1)] px-[12px] py-[10px] text-[12px] text-[var(--text-tertiary)]'>
-              No credentials available for this workspace.
+  const hasCredentials = credentials && credentials.length > 0
+  const showNoResults =
+    searchTerm.trim() && sortedCredentials.length === 0 && credentials.length > 0
+
+  const createModalJsx = (
+    <Modal
+      open={showCreateModal}
+      onOpenChange={(open) => {
+        setShowCreateModal(open)
+        if (!open) resetCreateForm()
+      }}
+    >
+      <ModalContent size='md'>
+        <ModalHeader>Create Credential</ModalHeader>
+        <ModalBody>
+          <div className='flex flex-col gap-[12px]'>
+            <div>
+              <Label>Type</Label>
+              <div className='mt-[6px]'>
+                <Combobox
+                  options={createTypeOptions.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                  }))}
+                  value={
+                    createTypeOptions.find((option) => option.value === createType)?.label || ''
+                  }
+                  selectedValue={createType}
+                  onChange={(value) => {
+                    setCreateType(value as CreateCredentialType)
+                    setCreateError(null)
+                  }}
+                  placeholder='Select credential type'
+                />
+              </div>
             </div>
-          ) : (
-            <div className='flex flex-col gap-[8px]'>
-              {sortedCredentials.map((credential) => (
-                <button
-                  key={credential.id}
-                  type='button'
-                  className={cn(
-                    'w-full rounded-[8px] border px-[10px] py-[10px] text-left transition-colors',
-                    selectedCredentialId === credential.id
-                      ? 'border-[var(--brand-9)] bg-[var(--surface-3)]'
-                      : 'border-[var(--border-1)] hover:bg-[var(--surface-2)]'
-                  )}
-                  onClick={() => handleSelectCredential(credential)}
-                >
-                  <div className='mb-[6px] flex items-center justify-between gap-[8px]'>
-                    <p className='min-w-0 truncate font-medium text-[13px] text-[var(--text-primary)]'>
-                      {credential.displayName}
-                    </p>
-                    <Badge
-                      variant={typeBadgeVariant(credential.type)}
-                      className='shrink-0 whitespace-nowrap'
+
+            {createType === 'oauth' ? (
+              <div className='flex flex-col gap-[10px]'>
+                <div>
+                  <Label>Display name</Label>
+                  <Input
+                    value={createDisplayName}
+                    onChange={(event) => setCreateDisplayName(event.target.value)}
+                    placeholder='Credential name'
+                    autoComplete='off'
+                    className='mt-[6px]'
+                  />
+                </div>
+                <div>
+                  <Label>Description</Label>
+                  <Textarea
+                    value={createDescription}
+                    onChange={(event) => setCreateDescription(event.target.value)}
+                    placeholder='Optional description'
+                    maxLength={500}
+                    autoComplete='off'
+                    className='mt-[6px] min-h-[80px] resize-none'
+                  />
+                </div>
+                <div>
+                  <Label>OAuth service</Label>
+                  <div className='mt-[6px]'>
+                    <Combobox
+                      options={oauthServiceOptions}
+                      value={
+                        oauthServiceOptions.find((option) => option.value === createOAuthProviderId)
+                          ?.label || ''
+                      }
+                      selectedValue={createOAuthProviderId}
+                      onChange={setCreateOAuthProviderId}
+                      placeholder='Select OAuth service'
+                    />
+                  </div>
+                </div>
+                {existingOAuthDisplayName && (
+                  <div className='rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
+                    <div className='flex items-start gap-[10px]'>
+                      <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
+                      <p className='text-[12px] text-red-700 dark:text-red-300'>
+                        A credential named{' '}
+                        <span className='font-medium'>{existingOAuthDisplayName.displayName}</span>{' '}
+                        already exists.
+                      </p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className='flex flex-col gap-[10px]'>
+                <div>
+                  <Label className='block'>Scope</Label>
+                  <div className='mt-[6px]'>
+                    <ButtonGroup
+                      value={createSecretScope}
+                      onValueChange={(value) => setCreateSecretScope(value as SecretScope)}
                     >
-                      {typeLabel(credential.type)}
-                    </Badge>
+                      <ButtonGroupItem
+                        value='workspace'
+                        className='h-[28px] min-w-[80px] px-[10px] py-0 text-[12px]'
+                      >
+                        Workspace
+                      </ButtonGroupItem>
+                      <ButtonGroupItem
+                        value='personal'
+                        className='h-[28px] min-w-[72px] px-[10px] py-0 text-[12px]'
+                      >
+                        Personal
+                      </ButtonGroupItem>
+                    </ButtonGroup>
                   </div>
-                  <p className='truncate text-[12px] text-[var(--text-tertiary)]'>
-                    {credential.type === 'oauth'
-                      ? resolveProviderLabel(credential.providerId)
-                      : credential.envKey || credential.id}
-                  </p>
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
+                </div>
+                <div>
+                  <Label className='block'>Mode</Label>
+                  <div className='mt-[6px]'>
+                    <ButtonGroup
+                      value={createSecretInputMode}
+                      onValueChange={(value) => {
+                        setCreateSecretInputMode(value as SecretInputMode)
+                        setCreateError(null)
+                      }}
+                    >
+                      <ButtonGroupItem
+                        value='single'
+                        className='h-[28px] min-w-[56px] px-[10px] py-0 text-[12px]'
+                      >
+                        Single
+                      </ButtonGroupItem>
+                      <ButtonGroupItem
+                        value='bulk'
+                        className='h-[28px] min-w-[56px] px-[10px] py-0 text-[12px]'
+                      >
+                        Bulk
+                      </ButtonGroupItem>
+                    </ButtonGroup>
+                  </div>
+                </div>
 
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        {!selectedCredential ? (
-          <div className='rounded-[8px] border border-[var(--border-1)] px-[14px] py-[12px] text-[13px] text-[var(--text-tertiary)]'>
-            Select a credential to manage members.
+                {createSecretInputMode === 'single' ? (
+                  <>
+                    <div>
+                      <Label>Secret key</Label>
+                      <Input
+                        value={createEnvKey}
+                        onChange={(event) => {
+                          setCreateEnvKey(event.target.value)
+                        }}
+                        placeholder='API_KEY'
+                        autoComplete='off'
+                        autoCapitalize='none'
+                        autoCorrect='off'
+                        spellCheck={false}
+                        data-lpignore='true'
+                        data-1p-ignore='true'
+                        className='mt-[6px]'
+                      />
+                      <p className='mt-[4px] text-[11px] text-[var(--text-tertiary)]'>
+                        Use it in blocks as {'{{KEY}}'}, for example {'{{API_KEY}}'}.
+                      </p>
+                    </div>
+                    <div>
+                      <Label>Secret value</Label>
+                      <Input
+                        type='password'
+                        value={createEnvValue}
+                        onChange={(event) => setCreateEnvValue(event.target.value)}
+                        placeholder='Enter secret value'
+                        autoComplete='new-password'
+                        autoCapitalize='none'
+                        autoCorrect='off'
+                        spellCheck={false}
+                        data-lpignore='true'
+                        data-1p-ignore='true'
+                        className='mt-[6px]'
+                      />
+                    </div>
+                    <div>
+                      <Label>Description</Label>
+                      <Textarea
+                        value={createDescription}
+                        onChange={(event) => setCreateDescription(event.target.value)}
+                        placeholder='Optional description'
+                        maxLength={500}
+                        autoComplete='off'
+                        className='mt-[6px] min-h-[80px] resize-none'
+                      />
+                    </div>
+
+                    {selectedExistingEnvCredential && (
+                      <div className='rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
+                        <div className='flex items-start gap-[10px]'>
+                          <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
+                          <p className='text-[12px] text-red-700 dark:text-red-300'>
+                            A secret with key{' '}
+                            <span className='font-medium'>
+                              {selectedExistingEnvCredential.displayName}
+                            </span>{' '}
+                            already exists.
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                    {!selectedExistingEnvCredential && crossScopeEnvConflict && (
+                      <div className='rounded-[8px] border border-amber-500/50 bg-amber-50 p-[12px] dark:bg-amber-950/30'>
+                        <div className='flex items-start gap-[10px]'>
+                          <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-amber-600 dark:text-amber-400' />
+                          <p className='text-[12px] text-amber-700 dark:text-amber-300'>
+                            A workspace secret with key{' '}
+                            <span className='font-medium'>{crossScopeEnvConflict.envKey}</span>{' '}
+                            already exists. Workspace secrets take precedence at runtime.
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <div>
+                    <Label>Secrets</Label>
+                    <Textarea
+                      value={createBulkText}
+                      onChange={(event) => {
+                        setCreateBulkText(event.target.value)
+                        setCreateError(null)
+                      }}
+                      placeholder={
+                        'OPENAI_API_KEY=sk-abc123\nANTHROPIC_API_KEY=sk-ant-xyz\nSTRIPE_SECRET=sk_live_...'
+                      }
+                      autoComplete='off'
+                      spellCheck={false}
+                      className='mt-[6px] min-h-[160px] resize-none font-mono text-[12px]'
+                    />
+                    <p className='mt-[4px] text-[11px] text-[var(--text-tertiary)]'>
+                      Paste KEY=VALUE pairs, one per line. Lines starting with # are ignored.
+                    </p>
+                    {createBulkText.trim()
+                      ? (() => {
+                          const { entries } = parseEnvText(createBulkText)
+                          return entries.length > 0 ? (
+                            <p className='mt-[2px] text-[11px] text-[var(--text-secondary)]'>
+                              {entries.length} secret{entries.length === 1 ? '' : 's'} detected
+                            </p>
+                          ) : null
+                        })()
+                      : null}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {createError && (
+              <div className='rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
+                <div className='flex items-start gap-[10px]'>
+                  <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
+                  <p className='whitespace-pre-wrap text-[12px] text-red-700 dark:text-red-300'>
+                    {createError}
+                  </p>
+                </div>
+              </div>
+            )}
           </div>
-        ) : (
-          <div className='flex flex-col gap-[16px]'>
-            <div className='rounded-[8px] border border-[var(--border-1)] p-[12px]'>
-              <div className='mb-[10px] flex items-center justify-between gap-[12px]'>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant='default' onClick={() => setShowCreateModal(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant='tertiary'
+            onClick={handleCreateCredential}
+            disabled={
+              (createType === 'oauth'
+                ? !createOAuthProviderId ||
+                  !createDisplayName.trim() ||
+                  connectOAuthService.isPending ||
+                  Boolean(existingOAuthDisplayName)
+                : createSecretInputMode === 'bulk'
+                  ? !createBulkText.trim()
+                  : !createEnvKey.trim() ||
+                    !createEnvValue.trim() ||
+                    Boolean(selectedExistingEnvCredential)) ||
+              createCredential.isPending ||
+              savePersonalEnvironment.isPending ||
+              upsertWorkspaceEnvironment.isPending ||
+              disconnectOAuthService.isPending
+            }
+          >
+            {createType === 'oauth'
+              ? connectOAuthService.isPending
+                ? 'Connecting...'
+                : 'Connect'
+              : createSecretInputMode === 'bulk'
+                ? createCredential.isPending ||
+                  savePersonalEnvironment.isPending ||
+                  upsertWorkspaceEnvironment.isPending
+                  ? 'Importing...'
+                  : 'Import all'
+                : 'Create'}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+
+  const oauthRequiredModalJsx = showCreateOAuthRequiredModal && createOAuthProviderId && (
+    <OAuthRequiredModal
+      isOpen={showCreateOAuthRequiredModal}
+      onClose={() => setShowCreateOAuthRequiredModal(false)}
+      provider={createOAuthProviderId as OAuthProvider}
+      toolName={resolveProviderLabel(createOAuthProviderId)}
+      requiredScopes={createOAuthRequiredScopes}
+      newScopes={[]}
+      serviceId={selectedOAuthService?.id || createOAuthProviderId}
+      onConnect={async () => {
+        await handleConnectOAuthService()
+      }}
+    />
+  )
+
+  const deleteConfirmDialogJsx = (
+    <Modal open={showDeleteConfirmDialog} onOpenChange={setShowDeleteConfirmDialog}>
+      <ModalContent size='sm'>
+        <ModalHeader>
+          {credentialToDelete?.type === 'oauth' ? 'Disconnect Credential' : 'Delete Credential'}
+        </ModalHeader>
+        <ModalBody>
+          <p className='text-[12px] text-[var(--text-secondary)]'>
+            Are you sure you want to{' '}
+            {credentialToDelete?.type === 'oauth' ? 'disconnect' : 'delete'}{' '}
+            <span className='font-medium text-[var(--text-primary)]'>
+              {credentialToDelete?.displayName}
+            </span>
+            ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant='default' onClick={() => setShowDeleteConfirmDialog(false)}>
+            Cancel
+          </Button>
+          <Button variant='destructive' onClick={handleConfirmDelete}>
+            {credentialToDelete?.type === 'oauth' ? 'Disconnect' : 'Delete'}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+
+  if (selectedCredential) {
+    return (
+      <>
+        <div className='flex h-full flex-col gap-[16px]'>
+          <div className='min-h-0 flex-1 overflow-y-auto'>
+            <div className='flex flex-col gap-[16px]'>
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-primary)]'>Type</span>
                 <div className='flex items-center gap-[8px]'>
                   <Badge variant={typeBadgeVariant(selectedCredential.type)}>
                     {typeLabel(selectedCredential.type)}
@@ -1051,91 +1383,15 @@ export function CredentialsManager() {
                     </Badge>
                   )}
                 </div>
-                {isSelectedAdmin && (
-                  <div className='flex items-center gap-[8px]'>
-                    <Button
-                      variant='tertiary'
-                      onClick={handleSaveDetails}
-                      disabled={!isDetailsDirty || isSavingDetails}
-                    >
-                      {isSavingDetails ? 'Saving...' : 'Save'}
-                    </Button>
-                    {selectedCredential.type === 'oauth' && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Button
-                            variant='ghost'
-                            onClick={handleReconnectOAuth}
-                            disabled={connectOAuthService.isPending}
-                          >
-                            <RefreshCw className='h-[14px] w-[14px]' />
-                          </Button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content>Reconnect account</Tooltip.Content>
-                      </Tooltip.Root>
-                    )}
-                    {selectedCredential.type === 'env_personal' && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Button
-                            variant='ghost'
-                            onClick={handlePromoteToWorkspace}
-                            disabled={isPromoting || deleteCredential.isPending}
-                          >
-                            <Share2 className='h-[14px] w-[14px]' />
-                          </Button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content>Promote to Workspace Secret</Tooltip.Content>
-                      </Tooltip.Root>
-                    )}
-                    {selectedCredential.type === 'oauth' &&
-                      (workspaceUserOptions.length > 0 || isShareingWithWorkspace) && (
-                        <Tooltip.Root>
-                          <Tooltip.Trigger asChild>
-                            <Button
-                              variant='ghost'
-                              onClick={handleShareWithWorkspace}
-                              disabled={
-                                isShareingWithWorkspace || workspaceUserOptions.length === 0
-                              }
-                            >
-                              <Share2 className='h-[14px] w-[14px]' />
-                            </Button>
-                          </Tooltip.Trigger>
-                          <Tooltip.Content>
-                            {isShareingWithWorkspace ? 'Sharing...' : 'Share with workspace'}
-                          </Tooltip.Content>
-                        </Tooltip.Root>
-                      )}
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Button
-                          variant='destructive'
-                          onClick={handleDeleteCredential}
-                          disabled={
-                            deleteCredential.isPending ||
-                            isPromoting ||
-                            disconnectOAuthService.isPending
-                          }
-                        >
-                          <Trash2 className='h-[14px] w-[14px]' />
-                        </Button>
-                      </Tooltip.Trigger>
-                      <Tooltip.Content>
-                        {selectedCredential.type === 'oauth'
-                          ? 'Disconnect account'
-                          : 'Delete credential'}
-                      </Tooltip.Content>
-                    </Tooltip.Root>
-                  </div>
-                )}
               </div>
 
               {selectedCredential.type === 'oauth' ? (
-                <div className='flex flex-col gap-[10px]'>
-                  <div>
+                <>
+                  <div className='flex flex-col gap-[8px]'>
                     <div className='flex items-center gap-[6px]'>
-                      <Label htmlFor='credential-display-name'>Display Name</Label>
+                      <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                        Display Name
+                      </span>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
                           <Button
@@ -1163,11 +1419,13 @@ export function CredentialsManager() {
                       onChange={(event) => setSelectedDisplayNameDraft(event.target.value)}
                       autoComplete='off'
                       disabled={!isSelectedAdmin}
-                      className='mt-[6px]'
                     />
                   </div>
-                  <div>
-                    <Label htmlFor='credential-description'>Description</Label>
+
+                  <div className='flex flex-col gap-[8px]'>
+                    <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                      Description
+                    </span>
                     <Textarea
                       id='credential-description'
                       value={selectedDescriptionDraft}
@@ -1176,12 +1434,15 @@ export function CredentialsManager() {
                       maxLength={500}
                       autoComplete='off'
                       disabled={!isSelectedAdmin}
-                      className='mt-[6px] min-h-[60px] resize-none'
+                      className='min-h-[60px] resize-none'
                     />
                   </div>
-                  <div>
-                    <Label>Connected service</Label>
-                    <div className='mt-[6px] flex items-center gap-[10px] rounded-[8px] border border-[var(--border-1)] px-[10px] py-[8px]'>
+
+                  <div className='flex flex-col gap-[8px]'>
+                    <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                      Connected service
+                    </span>
+                    <div className='flex items-center gap-[10px] rounded-[8px] border border-[var(--border-1)] px-[10px] py-[8px]'>
                       <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-[6px] bg-[var(--surface-5)]'>
                         {selectedOAuthServiceConfig ? (
                           createElement(selectedOAuthServiceConfig.icon, { className: 'h-4 w-4' })
@@ -1196,21 +1457,27 @@ export function CredentialsManager() {
                       </span>
                     </div>
                   </div>
-                </div>
+                </>
               ) : (
-                <div className='flex flex-col gap-[10px]'>
-                  <Label htmlFor='credential-env-key'>Secret key</Label>
-                  <Input
-                    id='credential-env-key'
-                    value={selectedCredential.envKey || ''}
-                    readOnly
-                    disabled
-                    autoComplete='off'
-                    className='mt-[6px]'
-                  />
-                  <div>
+                <>
+                  <div className='flex flex-col gap-[8px]'>
+                    <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                      Secret key
+                    </span>
+                    <Input
+                      id='credential-env-key'
+                      value={selectedCredential.envKey || ''}
+                      readOnly
+                      disabled
+                      autoComplete='off'
+                    />
+                  </div>
+
+                  <div className='flex flex-col gap-[8px]'>
                     <div className='flex items-center justify-between'>
-                      <Label htmlFor='credential-env-value'>Secret value</Label>
+                      <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                        Secret value
+                      </span>
                       {canEditSelectedEnvValue && (
                         <Button
                           variant='ghost'
@@ -1238,11 +1505,13 @@ export function CredentialsManager() {
                       data-1p-ignore='true'
                       readOnly={!canEditSelectedEnvValue || !isEditingEnvValue}
                       disabled={!canEditSelectedEnvValue}
-                      className='mt-[6px]'
                     />
                   </div>
-                  <div>
-                    <Label htmlFor='credential-description'>Description</Label>
+
+                  <div className='flex flex-col gap-[8px]'>
+                    <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                      Description
+                    </span>
                     <Textarea
                       id='credential-description'
                       value={selectedDescriptionDraft}
@@ -1251,442 +1520,275 @@ export function CredentialsManager() {
                       maxLength={500}
                       autoComplete='off'
                       disabled={!isSelectedAdmin}
-                      className='mt-[6px] min-h-[60px] resize-none'
+                      className='min-h-[60px] resize-none'
                     />
                   </div>
-                </div>
+                </>
               )}
+
               {detailsError && (
-                <div className='mt-[8px] rounded-[8px] border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-[10px] py-[8px] text-[12px] text-[var(--status-red)]'>
+                <div className='rounded-[8px] border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-[10px] py-[8px] text-[12px] text-[var(--status-red)]'>
                   {detailsError}
                 </div>
               )}
-            </div>
 
-            <div className='rounded-[8px] border border-[var(--border-1)] p-[12px]'>
-              <h3 className='mb-[10px] font-medium text-[13px] text-[var(--text-primary)]'>
-                Members
-              </h3>
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                  Members ({activeMembers.length})
+                </span>
 
-              {membersLoading ? (
-                <div className='flex flex-col gap-[8px]'>
-                  <Skeleton className='h-[44px] w-full rounded-[8px]' />
-                  <Skeleton className='h-[44px] w-full rounded-[8px]' />
-                </div>
-              ) : (
-                <div className='flex flex-col gap-[8px]'>
-                  {activeMembers.map((member) => (
-                    <div
-                      key={member.id}
-                      className='grid grid-cols-[1fr_120px_auto] items-center gap-[8px] rounded-[8px] border border-[var(--border-1)] px-[10px] py-[8px]'
-                    >
-                      <div className='min-w-0'>
-                        <p className='truncate font-medium text-[12px] text-[var(--text-primary)]'>
-                          {member.userName || member.userEmail || member.userId}
-                        </p>
-                        <p className='truncate text-[11px] text-[var(--text-tertiary)]'>
-                          {member.userEmail || member.userId}
-                        </p>
-                      </div>
+                {membersLoading ? (
+                  <div className='flex flex-col gap-[8px]'>
+                    <Skeleton className='h-[44px] w-full rounded-[8px]' />
+                    <Skeleton className='h-[44px] w-full rounded-[8px]' />
+                  </div>
+                ) : (
+                  <div className='flex flex-col gap-[8px]'>
+                    {activeMembers.map((member) => (
+                      <div
+                        key={member.id}
+                        className='grid grid-cols-[1fr_120px_auto] items-center gap-[8px] rounded-[8px] border border-[var(--border-1)] px-[10px] py-[8px]'
+                      >
+                        <div className='min-w-0'>
+                          <p className='truncate font-medium text-[12px] text-[var(--text-primary)]'>
+                            {member.userName || member.userEmail || member.userId}
+                          </p>
+                          <p className='truncate text-[11px] text-[var(--text-tertiary)]'>
+                            {member.userEmail || member.userId}
+                          </p>
+                        </div>
 
-                      {isSelectedAdmin ? (
-                        <>
-                          <Combobox
-                            options={roleOptions.map((option) => ({
-                              value: option.value,
-                              label: option.label,
-                            }))}
-                            value={
-                              roleOptions.find((option) => option.value === member.role)?.label ||
-                              ''
-                            }
-                            selectedValue={member.role}
-                            onChange={(value) =>
-                              handleChangeMemberRole(
-                                member.userId,
-                                value as WorkspaceCredentialRole
-                              )
-                            }
-                            placeholder='Role'
-                            disabled={member.role === 'admin' && adminMemberCount <= 1}
-                            size='sm'
-                          />
-                          {selectedCredential.type !== 'env_workspace' ? (
-                            <Button
-                              variant='ghost'
-                              onClick={() => handleRemoveMember(member.userId)}
+                        {isSelectedAdmin ? (
+                          <>
+                            <Combobox
+                              options={roleOptions.map((option) => ({
+                                value: option.value,
+                                label: option.label,
+                              }))}
+                              value={
+                                roleOptions.find((option) => option.value === member.role)?.label ||
+                                ''
+                              }
+                              selectedValue={member.role}
+                              onChange={(value) =>
+                                handleChangeMemberRole(
+                                  member.userId,
+                                  value as WorkspaceCredentialRole
+                                )
+                              }
+                              placeholder='Role'
                               disabled={member.role === 'admin' && adminMemberCount <= 1}
-                            >
-                              Remove
-                            </Button>
-                          ) : (
+                              size='sm'
+                            />
+                            {selectedCredential.type !== 'env_workspace' ? (
+                              <Button
+                                variant='ghost'
+                                onClick={() => handleRemoveMember(member.userId)}
+                                disabled={member.role === 'admin' && adminMemberCount <= 1}
+                              >
+                                Remove
+                              </Button>
+                            ) : (
+                              <div />
+                            )}
+                          </>
+                        ) : (
+                          <>
+                            <Badge variant={member.role === 'admin' ? 'blue' : 'gray-secondary'}>
+                              {member.role}
+                            </Badge>
                             <div />
-                          )}
-                        </>
-                      ) : (
-                        <>
-                          <Badge variant={member.role === 'admin' ? 'blue' : 'gray-secondary'}>
-                            {member.role}
-                          </Badge>
-                          <div />
-                        </>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {isSelectedAdmin && selectedCredential.type !== 'env_workspace' && (
-                <div className='mt-[10px] rounded-[8px] border border-[var(--border-1)] p-[10px]'>
-                  <Label>Add member</Label>
-                  <div className='mt-[6px] grid grid-cols-[1fr_120px_auto] gap-[8px]'>
-                    <Combobox
-                      options={workspaceUserOptions}
-                      value={
-                        workspaceUserOptions.find((option) => option.value === memberUserId)
-                          ?.label || ''
-                      }
-                      selectedValue={memberUserId}
-                      onChange={setMemberUserId}
-                      placeholder='Select user'
-                    />
-                    <Combobox
-                      options={roleOptions.map((option) => ({
-                        value: option.value,
-                        label: option.label,
-                      }))}
-                      value={roleOptions.find((option) => option.value === memberRole)?.label || ''}
-                      selectedValue={memberRole}
-                      onChange={(value) => setMemberRole(value as WorkspaceCredentialRole)}
-                      placeholder='Role'
-                    />
-                    <Button
-                      variant='active'
-                      onClick={handleAddMember}
-                      disabled={!memberUserId || upsertMember.isPending}
-                    >
-                      Add
-                    </Button>
+                          </>
+                        )}
+                      </div>
+                    ))}
                   </div>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-
-      <Modal
-        open={showCreateModal}
-        onOpenChange={(open) => {
-          setShowCreateModal(open)
-          if (!open) resetCreateForm()
-        }}
-      >
-        <ModalContent size='md'>
-          <ModalHeader>Create Credential</ModalHeader>
-          <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
-              <div>
-                <Label>Type</Label>
-                <div className='mt-[6px]'>
-                  <Combobox
-                    options={createTypeOptions.map((option) => ({
-                      value: option.value,
-                      label: option.label,
-                    }))}
-                    value={
-                      createTypeOptions.find((option) => option.value === createType)?.label || ''
-                    }
-                    selectedValue={createType}
-                    onChange={(value) => {
-                      setCreateType(value as CreateCredentialType)
-                      setCreateError(null)
-                    }}
-                    placeholder='Select credential type'
-                  />
-                </div>
-              </div>
+                )}
 
-              {createType === 'oauth' ? (
-                <div className='flex flex-col gap-[10px]'>
-                  <div>
-                    <Label>Display name</Label>
-                    <Input
-                      value={createDisplayName}
-                      onChange={(event) => setCreateDisplayName(event.target.value)}
-                      placeholder='Credential name'
-                      autoComplete='off'
-                      className='mt-[6px]'
-                    />
-                  </div>
-                  <div>
-                    <Label>Description</Label>
-                    <Textarea
-                      value={createDescription}
-                      onChange={(event) => setCreateDescription(event.target.value)}
-                      placeholder='Optional description'
-                      maxLength={500}
-                      autoComplete='off'
-                      className='mt-[6px] min-h-[80px] resize-none'
-                    />
-                  </div>
-                  <div>
-                    <Label>OAuth service</Label>
-                    <div className='mt-[6px]'>
+                {isSelectedAdmin && selectedCredential.type !== 'env_workspace' && (
+                  <div className='rounded-[8px] border border-[var(--border-1)] p-[10px]'>
+                    <Label>Add member</Label>
+                    <div className='mt-[6px] grid grid-cols-[1fr_120px_auto] gap-[8px]'>
                       <Combobox
-                        options={oauthServiceOptions}
+                        options={workspaceUserOptions}
                         value={
-                          oauthServiceOptions.find(
-                            (option) => option.value === createOAuthProviderId
-                          )?.label || ''
+                          workspaceUserOptions.find((option) => option.value === memberUserId)
+                            ?.label || ''
                         }
-                        selectedValue={createOAuthProviderId}
-                        onChange={setCreateOAuthProviderId}
-                        placeholder='Select OAuth service'
+                        selectedValue={memberUserId}
+                        onChange={setMemberUserId}
+                        placeholder='Select user'
                       />
-                    </div>
-                  </div>
-                  {existingOAuthDisplayName && (
-                    <div className='rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
-                      <div className='flex items-start gap-[10px]'>
-                        <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
-                        <p className='text-[12px] text-red-700 dark:text-red-300'>
-                          A credential named{' '}
-                          <span className='font-medium'>
-                            {existingOAuthDisplayName.displayName}
-                          </span>{' '}
-                          already exists.
-                        </p>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              ) : (
-                <div className='flex flex-col gap-[10px]'>
-                  <div>
-                    <Label className='block'>Scope</Label>
-                    <div className='mt-[6px]'>
-                      <ButtonGroup
-                        value={createSecretScope}
-                        onValueChange={(value) => setCreateSecretScope(value as SecretScope)}
-                      >
-                        <ButtonGroupItem
-                          value='workspace'
-                          className='h-[28px] min-w-[80px] px-[10px] py-0 text-[12px]'
-                        >
-                          Workspace
-                        </ButtonGroupItem>
-                        <ButtonGroupItem
-                          value='personal'
-                          className='h-[28px] min-w-[72px] px-[10px] py-0 text-[12px]'
-                        >
-                          Personal
-                        </ButtonGroupItem>
-                      </ButtonGroup>
-                    </div>
-                  </div>
-                  <div>
-                    <Label className='block'>Mode</Label>
-                    <div className='mt-[6px]'>
-                      <ButtonGroup
-                        value={createSecretInputMode}
-                        onValueChange={(value) => {
-                          setCreateSecretInputMode(value as SecretInputMode)
-                          setCreateError(null)
-                        }}
+                      <Combobox
+                        options={roleOptions.map((option) => ({
+                          value: option.value,
+                          label: option.label,
+                        }))}
+                        value={
+                          roleOptions.find((option) => option.value === memberRole)?.label || ''
+                        }
+                        selectedValue={memberRole}
+                        onChange={(value) => setMemberRole(value as WorkspaceCredentialRole)}
+                        placeholder='Role'
+                      />
+                      <Button
+                        variant='active'
+                        onClick={handleAddMember}
+                        disabled={!memberUserId || upsertMember.isPending}
                       >
-                        <ButtonGroupItem
-                          value='single'
-                          className='h-[28px] min-w-[56px] px-[10px] py-0 text-[12px]'
-                        >
-                          Single
-                        </ButtonGroupItem>
-                        <ButtonGroupItem
-                          value='bulk'
-                          className='h-[28px] min-w-[56px] px-[10px] py-0 text-[12px]'
-                        >
-                          Bulk
-                        </ButtonGroupItem>
-                      </ButtonGroup>
+                        Add
+                      </Button>
                     </div>
                   </div>
+                )}
+              </div>
+            </div>
+          </div>
 
-                  {createSecretInputMode === 'single' ? (
-                    <>
-                      <div>
-                        <Label>Secret key</Label>
-                        <Input
-                          value={createEnvKey}
-                          onChange={(event) => {
-                            setCreateEnvKey(event.target.value)
-                          }}
-                          placeholder='API_KEY'
-                          autoComplete='off'
-                          autoCapitalize='none'
-                          autoCorrect='off'
-                          spellCheck={false}
-                          data-lpignore='true'
-                          data-1p-ignore='true'
-                          className='mt-[6px]'
-                        />
-                        <p className='mt-[4px] text-[11px] text-[var(--text-tertiary)]'>
-                          Use it in blocks as {'{{KEY}}'}, for example {'{{API_KEY}}'}.
-                        </p>
-                      </div>
-                      <div>
-                        <Label>Secret value</Label>
-                        <Input
-                          type='password'
-                          value={createEnvValue}
-                          onChange={(event) => setCreateEnvValue(event.target.value)}
-                          placeholder='Enter secret value'
-                          autoComplete='new-password'
-                          autoCapitalize='none'
-                          autoCorrect='off'
-                          spellCheck={false}
-                          data-lpignore='true'
-                          data-1p-ignore='true'
-                          className='mt-[6px]'
-                        />
-                      </div>
-                      <div>
-                        <Label>Description</Label>
-                        <Textarea
-                          value={createDescription}
-                          onChange={(event) => setCreateDescription(event.target.value)}
-                          placeholder='Optional description'
-                          maxLength={500}
-                          autoComplete='off'
-                          className='mt-[6px] min-h-[80px] resize-none'
-                        />
-                      </div>
-
-                      {selectedExistingEnvCredential && (
-                        <div className='rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
-                          <div className='flex items-start gap-[10px]'>
-                            <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
-                            <p className='text-[12px] text-red-700 dark:text-red-300'>
-                              A secret with key{' '}
-                              <span className='font-medium'>
-                                {selectedExistingEnvCredential.displayName}
-                              </span>{' '}
-                              already exists.
-                            </p>
-                          </div>
-                        </div>
-                      )}
-                      {!selectedExistingEnvCredential && crossScopeEnvConflict && (
-                        <div className='rounded-[8px] border border-amber-500/50 bg-amber-50 p-[12px] dark:bg-amber-950/30'>
-                          <div className='flex items-start gap-[10px]'>
-                            <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-amber-600 dark:text-amber-400' />
-                            <p className='text-[12px] text-amber-700 dark:text-amber-300'>
-                              A workspace secret with key{' '}
-                              <span className='font-medium'>{crossScopeEnvConflict.envKey}</span>{' '}
-                              already exists. Workspace secrets take precedence at runtime.
-                            </p>
-                          </div>
-                        </div>
-                      )}
-                    </>
-                  ) : (
-                    <div>
-                      <Label>Secrets</Label>
-                      <Textarea
-                        value={createBulkText}
-                        onChange={(event) => {
-                          setCreateBulkText(event.target.value)
-                          setCreateError(null)
-                        }}
-                        placeholder={
-                          'OPENAI_API_KEY=sk-abc123\nANTHROPIC_API_KEY=sk-ant-xyz\nSTRIPE_SECRET=sk_live_...'
-                        }
-                        autoComplete='off'
-                        spellCheck={false}
-                        className='mt-[6px] min-h-[160px] resize-none font-mono text-[12px]'
-                      />
-                      <p className='mt-[4px] text-[11px] text-[var(--text-tertiary)]'>
-                        Paste KEY=VALUE pairs, one per line. Lines starting with # are ignored.
-                      </p>
-                      {createBulkText.trim()
-                        ? (() => {
-                            const { entries } = parseEnvText(createBulkText)
-                            return entries.length > 0 ? (
-                              <p className='mt-[2px] text-[11px] text-[var(--text-secondary)]'>
-                                {entries.length} secret{entries.length === 1 ? '' : 's'} detected
-                              </p>
-                            ) : null
-                          })()
-                        : null}
-                    </div>
+          <div className='mt-auto flex items-center justify-between'>
+            <div className='flex items-center gap-[8px]'>
+              {isSelectedAdmin && (
+                <>
+                  <Button
+                    variant='default'
+                    onClick={handleSaveDetails}
+                    disabled={!isDetailsDirty || isSavingDetails}
+                  >
+                    {isSavingDetails ? 'Saving...' : 'Save'}
+                  </Button>
+                  {selectedCredential.type === 'oauth' && (
+                    <Button
+                      variant='default'
+                      onClick={handleReconnectOAuth}
+                      disabled={connectOAuthService.isPending}
+                    >
+                      <RefreshCw className='mr-[6px] h-[13px] w-[13px]' />
+                      Reconnect
+                    </Button>
                   )}
-                </div>
+                  {selectedCredential.type === 'env_personal' && (
+                    <Button
+                      variant='default'
+                      onClick={handlePromoteToWorkspace}
+                      disabled={isPromoting || deleteCredential.isPending}
+                    >
+                      <Share2 className='mr-[6px] h-[13px] w-[13px]' />
+                      Promote
+                    </Button>
+                  )}
+                  {selectedCredential.type === 'oauth' &&
+                    (workspaceUserOptions.length > 0 || isShareingWithWorkspace) && (
+                      <Button
+                        variant='default'
+                        onClick={handleShareWithWorkspace}
+                        disabled={isShareingWithWorkspace || workspaceUserOptions.length === 0}
+                      >
+                        <Share2 className='mr-[6px] h-[13px] w-[13px]' />
+                        {isShareingWithWorkspace ? 'Sharing...' : 'Share'}
+                      </Button>
+                    )}
+                  <Button
+                    variant='ghost'
+                    onClick={handleDeleteCredential}
+                    disabled={
+                      deleteCredential.isPending || isPromoting || disconnectOAuthService.isPending
+                    }
+                  >
+                    {selectedCredential.type === 'oauth' ? 'Disconnect' : 'Delete'}
+                  </Button>
+                </>
               )}
+            </div>
+            <Button onClick={() => setSelectedCredentialId(null)} variant='tertiary'>
+              Back
+            </Button>
+          </div>
+        </div>
 
-              {createError && (
-                <div className='rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
-                  <div className='flex items-start gap-[10px]'>
-                    <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
-                    <p className='whitespace-pre-wrap text-[12px] text-red-700 dark:text-red-300'>
-                      {createError}
+        {createModalJsx}
+        {oauthRequiredModalJsx}
+        {deleteConfirmDialogJsx}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
+        <div className='flex items-center gap-[8px]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+            <Search
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              strokeWidth={2}
+            />
+            <UiInput
+              placeholder='Search credentials...'
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              disabled={credentialsLoading}
+              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'
+            />
+          </div>
+          <Button
+            onClick={() => setShowCreateModal(true)}
+            disabled={credentialsLoading}
+            variant='tertiary'
+          >
+            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            Add
+          </Button>
+        </div>
+
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          {credentialsLoading ? (
+            <div className='flex flex-col gap-[8px]'>
+              <CredentialSkeleton />
+              <CredentialSkeleton />
+              <CredentialSkeleton />
+            </div>
+          ) : !hasCredentials ? (
+            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+              Click "Add" above to get started
+            </div>
+          ) : (
+            <div className='flex flex-col gap-[8px]'>
+              {sortedCredentials.map((credential) => (
+                <div key={credential.id} className='flex items-center justify-between gap-[12px]'>
+                  <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                    <span className='truncate font-medium text-[14px]'>
+                      {credential.displayName}
+                    </span>
+                    <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                      {credential.description || 'No description'}
                     </p>
                   </div>
+                  <div className='flex flex-shrink-0 items-center gap-[4px]'>
+                    <Button variant='default' onClick={() => handleSelectCredential(credential)}>
+                      Details
+                    </Button>
+                    <Button
+                      variant='ghost'
+                      onClick={() => handleDeleteClick(credential)}
+                      disabled={deleteCredential.isPending || disconnectOAuthService.isPending}
+                    >
+                      Delete
+                    </Button>
+                  </div>
+                </div>
+              ))}
+              {showNoResults && (
+                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                  No credentials found matching &ldquo;{searchTerm}&rdquo;
                 </div>
               )}
             </div>
-          </ModalBody>
-          <ModalFooter>
-            <Button variant='default' onClick={() => setShowCreateModal(false)}>
-              Cancel
-            </Button>
-            <Button
-              variant='tertiary'
-              onClick={handleCreateCredential}
-              disabled={
-                (createType === 'oauth'
-                  ? !createOAuthProviderId ||
-                    !createDisplayName.trim() ||
-                    connectOAuthService.isPending ||
-                    Boolean(existingOAuthDisplayName)
-                  : createSecretInputMode === 'bulk'
-                    ? !createBulkText.trim()
-                    : !createEnvKey.trim() ||
-                      !createEnvValue.trim() ||
-                      Boolean(selectedExistingEnvCredential)) ||
-                createCredential.isPending ||
-                savePersonalEnvironment.isPending ||
-                upsertWorkspaceEnvironment.isPending ||
-                disconnectOAuthService.isPending
-              }
-            >
-              {createType === 'oauth'
-                ? connectOAuthService.isPending
-                  ? 'Connecting...'
-                  : 'Connect'
-                : createSecretInputMode === 'bulk'
-                  ? createCredential.isPending ||
-                    savePersonalEnvironment.isPending ||
-                    upsertWorkspaceEnvironment.isPending
-                    ? 'Importing...'
-                    : 'Import all'
-                  : 'Create'}
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-      {showCreateOAuthRequiredModal && createOAuthProviderId && (
-        <OAuthRequiredModal
-          isOpen={showCreateOAuthRequiredModal}
-          onClose={() => setShowCreateOAuthRequiredModal(false)}
-          provider={createOAuthProviderId as OAuthProvider}
-          toolName={resolveProviderLabel(createOAuthProviderId)}
-          requiredScopes={createOAuthRequiredScopes}
-          newScopes={[]}
-          serviceId={selectedOAuthService?.id || createOAuthProviderId}
-          onConnect={async () => {
-            await handleConnectOAuthService()
-          }}
-        />
-      )}
-    </div>
+          )}
+        </div>
+      </div>
+
+      {createModalJsx}
+      {oauthRequiredModalJsx}
+      {deleteConfirmDialogJsx}
+    </>
   )
 }

From 67f51a7a61a117bd9db8307eeb640d96e3fe376a Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 24 Feb 2026 11:56:35 -0800
Subject: [PATCH 2/8] fix: credentials logic

---
 .../credentials/credentials-manager.tsx       | 57 ++++---------------
 1 file changed, 10 insertions(+), 47 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
index 9fdb7ce5cb..f4460111a6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
@@ -775,20 +775,6 @@ export function CredentialsManager() {
     }
   }
 
-  const handleDeleteCredential = async () => {
-    if (!selectedCredential) return
-    if (selectedCredential.type === 'oauth') {
-      await handleDisconnectSelectedCredential()
-      return
-    }
-    try {
-      await deleteCredential.mutateAsync(selectedCredential.id)
-      setSelectedCredentialId(null)
-    } catch (error) {
-      logger.error('Failed to delete credential', error)
-    }
-  }
-
   const handleDeleteClick = (credential: WorkspaceCredential) => {
     setCredentialToDelete(credential)
     setShowDeleteConfirmDialog(true)
@@ -905,31 +891,6 @@ export function CredentialsManager() {
     }
   }
 
-  const handleDisconnectSelectedCredential = async () => {
-    if (!selectedCredential || selectedCredential.type !== 'oauth' || !selectedCredential.accountId)
-      return
-    if (!selectedCredential.providerId) return
-
-    try {
-      await disconnectOAuthService.mutateAsync({
-        provider: selectedCredential.providerId.split('-')[0] || selectedCredential.providerId,
-        providerId: selectedCredential.providerId,
-        serviceId: selectedCredential.providerId,
-        accountId: selectedCredential.accountId,
-      })
-
-      setSelectedCredentialId(null)
-      await refetchCredentials()
-      window.dispatchEvent(
-        new CustomEvent('oauth-credentials-updated', {
-          detail: { providerId: selectedCredential.providerId, workspaceId },
-        })
-      )
-    } catch (error) {
-      logger.error('Failed to disconnect credential account', error)
-    }
-  }
-
   const handleReconnectOAuth = async () => {
     if (
       !selectedCredential ||
@@ -1689,7 +1650,7 @@ export function CredentialsManager() {
                     )}
                   <Button
                     variant='ghost'
-                    onClick={handleDeleteCredential}
+                    onClick={() => handleDeleteClick(selectedCredential)}
                     disabled={
                       deleteCredential.isPending || isPromoting || disconnectOAuthService.isPending
                     }
@@ -1766,13 +1727,15 @@ export function CredentialsManager() {
                     <Button variant='default' onClick={() => handleSelectCredential(credential)}>
                       Details
                     </Button>
-                    <Button
-                      variant='ghost'
-                      onClick={() => handleDeleteClick(credential)}
-                      disabled={deleteCredential.isPending || disconnectOAuthService.isPending}
-                    >
-                      Delete
-                    </Button>
+                    {credential.role === 'admin' && (
+                      <Button
+                        variant='ghost'
+                        onClick={() => handleDeleteClick(credential)}
+                        disabled={deleteCredential.isPending || disconnectOAuthService.isPending}
+                      >
+                        Delete
+                      </Button>
+                    )}
                   </div>
                 </div>
               ))}

From 795302296c5bc25087b061dac920cb23725aa05a Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 24 Feb 2026 12:22:25 -0800
Subject: [PATCH 3/8] improvement(credentials): ui

---
 .../credentials/credentials-manager.tsx       | 211 +++++++++++-------
 1 file changed, 127 insertions(+), 84 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
index f4460111a6..393c13d52c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
@@ -277,6 +277,7 @@ export function CredentialsManager() {
       oauthConnections.map((service) => ({
         value: service.providerId,
         label: service.name,
+        icon: getServiceConfigByProviderId(service.providerId)?.icon,
       })),
     [oauthConnections]
   )
@@ -786,20 +787,22 @@ export function CredentialsManager() {
 
     try {
       if (credentialToDelete.type === 'oauth') {
-        if (credentialToDelete.accountId && credentialToDelete.providerId) {
-          await disconnectOAuthService.mutateAsync({
-            provider: credentialToDelete.providerId.split('-')[0] || credentialToDelete.providerId,
-            providerId: credentialToDelete.providerId,
-            serviceId: credentialToDelete.providerId,
-            accountId: credentialToDelete.accountId,
-          })
-          await refetchCredentials()
-          window.dispatchEvent(
-            new CustomEvent('oauth-credentials-updated', {
-              detail: { providerId: credentialToDelete.providerId, workspaceId },
-            })
-          )
+        if (!credentialToDelete.accountId || !credentialToDelete.providerId) {
+          logger.error('Cannot disconnect OAuth credential: missing accountId or providerId')
+          return
         }
+        await disconnectOAuthService.mutateAsync({
+          provider: credentialToDelete.providerId.split('-')[0] || credentialToDelete.providerId,
+          providerId: credentialToDelete.providerId,
+          serviceId: credentialToDelete.providerId,
+          accountId: credentialToDelete.accountId,
+        })
+        await refetchCredentials()
+        window.dispatchEvent(
+          new CustomEvent('oauth-credentials-updated', {
+            detail: { providerId: credentialToDelete.providerId, workspaceId },
+          })
+        )
       } else {
         await deleteCredential.mutateAsync(credentialToDelete.id)
       }
@@ -1016,10 +1019,33 @@ export function CredentialsManager() {
               </div>
             </div>
 
+            {createType === 'secret' && (
+              <div>
+                <Label>Mode</Label>
+                <div className='mt-[6px]'>
+                  <Combobox
+                    options={[
+                      { value: 'single', label: 'Single' },
+                      { value: 'bulk', label: 'Bulk' },
+                    ]}
+                    value={createSecretInputMode === 'single' ? 'Single' : 'Bulk'}
+                    selectedValue={createSecretInputMode}
+                    onChange={(value) => {
+                      setCreateSecretInputMode(value as SecretInputMode)
+                      setCreateError(null)
+                    }}
+                    placeholder='Select mode'
+                  />
+                </div>
+              </div>
+            )}
+
             {createType === 'oauth' ? (
               <div className='flex flex-col gap-[10px]'>
                 <div>
-                  <Label>Display name</Label>
+                  <Label>
+                    Display name<span className='ml-1'>*</span>
+                  </Label>
                   <Input
                     value={createDisplayName}
                     onChange={(event) => setCreateDisplayName(event.target.value)}
@@ -1040,7 +1066,7 @@ export function CredentialsManager() {
                   />
                 </div>
                 <div>
-                  <Label>OAuth service</Label>
+                  <Label>Account</Label>
                   <div className='mt-[6px]'>
                     <Combobox
                       options={oauthServiceOptions}
@@ -1051,6 +1077,27 @@ export function CredentialsManager() {
                       selectedValue={createOAuthProviderId}
                       onChange={setCreateOAuthProviderId}
                       placeholder='Select OAuth service'
+                      searchable
+                      searchPlaceholder='Search services...'
+                      overlayContent={
+                        createOAuthProviderId
+                          ? (() => {
+                              const config = getServiceConfigByProviderId(createOAuthProviderId)
+                              const label =
+                                oauthServiceOptions.find((o) => o.value === createOAuthProviderId)
+                                  ?.label || ''
+                              return (
+                                <div className='flex items-center gap-[8px]'>
+                                  {config &&
+                                    createElement(config.icon, {
+                                      className: 'h-[14px] w-[14px] flex-shrink-0',
+                                    })}
+                                  <span className='truncate'>{label}</span>
+                                </div>
+                              )
+                            })()
+                          : undefined
+                      }
                     />
                   </div>
                 </div>
@@ -1071,56 +1118,36 @@ export function CredentialsManager() {
               <div className='flex flex-col gap-[10px]'>
                 <div>
                   <Label className='block'>Scope</Label>
-                  <div className='mt-[6px]'>
-                    <ButtonGroup
-                      value={createSecretScope}
-                      onValueChange={(value) => setCreateSecretScope(value as SecretScope)}
+                  <ButtonGroup
+                    value={createSecretScope}
+                    onValueChange={(value) => setCreateSecretScope(value as SecretScope)}
+                    className='mt-[6px]'
+                  >
+                    <ButtonGroupItem
+                      value='workspace'
+                      className='h-[28px] min-w-[80px] px-[10px] py-0 text-[12px]'
                     >
-                      <ButtonGroupItem
-                        value='workspace'
-                        className='h-[28px] min-w-[80px] px-[10px] py-0 text-[12px]'
-                      >
-                        Workspace
-                      </ButtonGroupItem>
-                      <ButtonGroupItem
-                        value='personal'
-                        className='h-[28px] min-w-[72px] px-[10px] py-0 text-[12px]'
-                      >
-                        Personal
-                      </ButtonGroupItem>
-                    </ButtonGroup>
-                  </div>
-                </div>
-                <div>
-                  <Label className='block'>Mode</Label>
-                  <div className='mt-[6px]'>
-                    <ButtonGroup
-                      value={createSecretInputMode}
-                      onValueChange={(value) => {
-                        setCreateSecretInputMode(value as SecretInputMode)
-                        setCreateError(null)
-                      }}
+                      Workspace
+                    </ButtonGroupItem>
+                    <ButtonGroupItem
+                      value='personal'
+                      className='h-[28px] min-w-[72px] px-[10px] py-0 text-[12px]'
                     >
-                      <ButtonGroupItem
-                        value='single'
-                        className='h-[28px] min-w-[56px] px-[10px] py-0 text-[12px]'
-                      >
-                        Single
-                      </ButtonGroupItem>
-                      <ButtonGroupItem
-                        value='bulk'
-                        className='h-[28px] min-w-[56px] px-[10px] py-0 text-[12px]'
-                      >
-                        Bulk
-                      </ButtonGroupItem>
-                    </ButtonGroup>
-                  </div>
+                      Personal
+                    </ButtonGroupItem>
+                  </ButtonGroup>
+                  <p className='mt-[4px] text-[11px] text-[var(--text-tertiary)]'>
+                    {createSecretScope === 'workspace'
+                      ? 'Shared across the workspace. All members can use it.'
+                      : 'Only visible to you. Other members cannot use it.'}
+                  </p>
                 </div>
-
                 {createSecretInputMode === 'single' ? (
                   <>
                     <div>
-                      <Label>Secret key</Label>
+                      <Label>
+                        Secret key<span className='ml-1'>*</span>
+                      </Label>
                       <Input
                         value={createEnvKey}
                         onChange={(event) => {
@@ -1140,7 +1167,9 @@ export function CredentialsManager() {
                       </p>
                     </div>
                     <div>
-                      <Label>Secret value</Label>
+                      <Label>
+                        Secret value<span className='ml-1'>*</span>
+                      </Label>
                       <Input
                         type='password'
                         value={createEnvValue}
@@ -1713,32 +1742,46 @@ export function CredentialsManager() {
             </div>
           ) : (
             <div className='flex flex-col gap-[8px]'>
-              {sortedCredentials.map((credential) => (
-                <div key={credential.id} className='flex items-center justify-between gap-[12px]'>
-                  <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <span className='truncate font-medium text-[14px]'>
-                      {credential.displayName}
-                    </span>
-                    <p className='truncate text-[13px] text-[var(--text-muted)]'>
-                      {credential.description || 'No description'}
-                    </p>
-                  </div>
-                  <div className='flex flex-shrink-0 items-center gap-[4px]'>
-                    <Button variant='default' onClick={() => handleSelectCredential(credential)}>
-                      Details
-                    </Button>
-                    {credential.role === 'admin' && (
-                      <Button
-                        variant='ghost'
-                        onClick={() => handleDeleteClick(credential)}
-                        disabled={deleteCredential.isPending || disconnectOAuthService.isPending}
-                      >
-                        Delete
+              {sortedCredentials.map((credential) => {
+                const serviceConfig =
+                  credential.type === 'oauth' && credential.providerId
+                    ? getServiceConfigByProviderId(credential.providerId)
+                    : null
+
+                return (
+                  <div key={credential.id} className='flex items-center justify-between gap-[12px]'>
+                    <div className='flex min-w-0 items-center gap-[10px]'>
+                      {serviceConfig && (
+                        <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
+                          {createElement(serviceConfig.icon, { className: 'h-4 w-4' })}
+                        </div>
+                      )}
+                      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                        <span className='truncate font-medium text-[14px]'>
+                          {credential.displayName}
+                        </span>
+                        <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                          {credential.description || 'No description'}
+                        </p>
+                      </div>
+                    </div>
+                    <div className='flex flex-shrink-0 items-center gap-[4px]'>
+                      <Button variant='default' onClick={() => handleSelectCredential(credential)}>
+                        Details
                       </Button>
-                    )}
+                      {credential.role === 'admin' && (
+                        <Button
+                          variant='ghost'
+                          onClick={() => handleDeleteClick(credential)}
+                          disabled={deleteCredential.isPending || disconnectOAuthService.isPending}
+                        >
+                          Delete
+                        </Button>
+                      )}
+                    </div>
                   </div>
-                </div>
-              ))}
+                )
+              })}
               {showNoResults && (
                 <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
                   No credentials found matching &ldquo;{searchTerm}&rdquo;

From e2f25d3ecafc319f4a6bfae800212078403d94f3 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 24 Feb 2026 12:24:15 -0800
Subject: [PATCH 4/8] improvement(credentials): members UI

---
 .../components/credentials/credentials-manager.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
index 393c13d52c..2ee1d04a77 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
@@ -1537,7 +1537,7 @@ export function CredentialsManager() {
                     {activeMembers.map((member) => (
                       <div
                         key={member.id}
-                        className='grid grid-cols-[1fr_120px_auto] items-center gap-[8px] rounded-[8px] border border-[var(--border-1)] px-[10px] py-[8px]'
+                        className='grid grid-cols-[1fr_120px_auto] items-center gap-[8px]'
                       >
                         <div className='min-w-0'>
                           <p className='truncate font-medium text-[12px] text-[var(--text-primary)]'>

From 6651be79e0624e444aa1344cc56137539d56d019 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 24 Feb 2026 14:11:47 -0800
Subject: [PATCH 5/8] improvement(secrets): ui

---
 .../components/api-keys/api-keys.tsx          |  12 +-
 .../create-api-key-modal.tsx                  |  18 +-
 .../credentials/credentials-manager.tsx       | 390 ++++++++++--------
 .../settings-modal/settings-modal.tsx         |   8 +-
 apps/sim/components/emcn/icons/index.ts       |   1 +
 .../components/emcn/icons/terminal-window.tsx |  26 ++
 6 files changed, 265 insertions(+), 190 deletions(-)
 create mode 100644 apps/sim/components/emcn/icons/terminal-window.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx
index cc7e925499..a3c5be94ec 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx
@@ -142,7 +142,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
             strokeWidth={2}
           />
           <Input
-            placeholder='Search API keys...'
+            placeholder='Search Sim keys...'
             value={searchTerm}
             onChange={(e) => setSearchTerm(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'
@@ -195,7 +195,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
                   </div>
                   {workspaceKeys.length === 0 ? (
                     <div className='text-[13px] text-[var(--text-muted)]'>
-                      No workspace API keys yet
+                      No workspace Sim keys yet
                     </div>
                   ) : (
                     workspaceKeys.map((key) => (
@@ -301,7 +301,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
                         </div>
                         {isConflict && (
                           <div className='text-[12px] text-[var(--text-error)] leading-tight'>
-                            Workspace API key with the same name overrides this. Rename your
+                            Workspace Sim key with the same name overrides this. Rename your
                             personal key to use it.
                           </div>
                         )}
@@ -317,7 +317,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
                 filteredWorkspaceKeys.length === 0 &&
                 (personalKeys.length > 0 || workspaceKeys.length > 0) && (
                   <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
-                    No API keys found matching "{searchTerm}"
+                    No Sim keys found matching "{searchTerm}"
                   </div>
                 )}
             </>
@@ -331,7 +331,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
           <div className='mt-auto flex items-center justify-between'>
             <div className='flex items-center gap-[8px]'>
               <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                Allow personal API keys
+                Allow personal Sim keys
               </span>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
@@ -383,7 +383,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
       {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
         <ModalContent size='sm'>
-          <ModalHeader>Delete API key</ModalHeader>
+          <ModalHeader>Delete Sim key</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
               Deleting{' '}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
index 439280bf25..12b0692159 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
@@ -62,8 +62,8 @@ export function CreateApiKeyModal({
     if (isDuplicate) {
       setCreateError(
         keyType === 'workspace'
-          ? `A workspace API key named "${trimmedName}" already exists. Please choose a different name.`
-          : `A personal API key named "${trimmedName}" already exists. Please choose a different name.`
+          ? `A workspace Sim key named "${trimmedName}" already exists. Please choose a different name.`
+          : `A personal Sim key named "${trimmedName}" already exists. Please choose a different name.`
       )
       return
     }
@@ -86,11 +86,11 @@ export function CreateApiKeyModal({
     } catch (error: unknown) {
       logger.error('API key creation failed:', { error })
       const errorMessage =
-        error instanceof Error ? error.message : 'Failed to create API key. Please try again.'
+        error instanceof Error ? error.message : 'Failed to create Sim key. Please try again.'
       if (errorMessage.toLowerCase().includes('already exists')) {
         setCreateError(errorMessage)
       } else {
-        setCreateError('Failed to create API key. Please check your connection and try again.')
+        setCreateError('Failed to create Sim key. Please check your connection and try again.')
       }
     }
   }
@@ -113,7 +113,7 @@ export function CreateApiKeyModal({
       {/* Create API Key Dialog */}
       <Modal open={open} onOpenChange={onOpenChange}>
         <ModalContent size='sm'>
-          <ModalHeader>Create new API key</ModalHeader>
+          <ModalHeader>Create new Sim key</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
               {keyType === 'workspace'
@@ -125,7 +125,7 @@ export function CreateApiKeyModal({
               {canManageWorkspaceKeys && (
                 <div className='flex flex-col gap-[8px]'>
                   <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                    API Key Type
+                    Sim Key Type
                   </p>
                   <ButtonGroup
                     value={keyType}
@@ -143,7 +143,7 @@ export function CreateApiKeyModal({
               )}
               <div className='flex flex-col gap-[8px]'>
                 <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                  Enter a name for your API key to help you identify it later.
+                  Enter a name for your Sim key to help you identify it later.
                 </p>
                 {/* Hidden decoy fields to prevent browser autofill */}
                 <input
@@ -216,10 +216,10 @@ export function CreateApiKeyModal({
         }}
       >
         <ModalContent size='sm'>
-          <ModalHeader>Your API key has been created</ModalHeader>
+          <ModalHeader>Your Sim key has been created</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
-              This is the only time you will see your API key.{' '}
+              This is the only time you will see your Sim key.{' '}
               <span className='font-semibold text-[var(--text-primary)]'>
                 Copy it now and store it securely.
               </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
index 2ee1d04a77..fca26aedee 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
@@ -2,7 +2,7 @@
 
 import { createElement, useCallback, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { AlertTriangle, Check, Copy, Plus, RefreshCw, Search, Share2 } from 'lucide-react'
+import { AlertTriangle, Check, Copy, Plus, RefreshCw, Search, Share2, X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
@@ -71,8 +71,8 @@ type SecretScope = 'workspace' | 'personal'
 type SecretInputMode = 'single' | 'bulk'
 
 const createTypeOptions = [
-  { value: 'oauth', label: 'OAuth Account' },
   { value: 'secret', label: 'Secret' },
+  { value: 'oauth', label: 'OAuth Account' },
 ] as const
 
 interface ParsedEnvEntry {
@@ -185,7 +185,7 @@ export function CredentialsManager() {
   const [memberRole, setMemberRole] = useState<WorkspaceCredentialRole>('admin')
   const [memberUserId, setMemberUserId] = useState('')
   const [showCreateModal, setShowCreateModal] = useState(false)
-  const [createType, setCreateType] = useState<CreateCredentialType>('oauth')
+  const [createType, setCreateType] = useState<CreateCredentialType>('secret')
   const [createSecretScope, setCreateSecretScope] = useState<SecretScope>('workspace')
   const [createDisplayName, setCreateDisplayName] = useState('')
   const [createDescription, setCreateDescription] = useState('')
@@ -193,7 +193,7 @@ export function CredentialsManager() {
   const [createEnvValue, setCreateEnvValue] = useState('')
   const [createOAuthProviderId, setCreateOAuthProviderId] = useState('')
   const [createSecretInputMode, setCreateSecretInputMode] = useState<SecretInputMode>('single')
-  const [createBulkText, setCreateBulkText] = useState('')
+  const [createBulkEntries, setCreateBulkEntries] = useState<ParsedEnvEntry[]>([])
   const [createError, setCreateError] = useState<string | null>(null)
   const [detailsError, setDetailsError] = useState<string | null>(null)
   const [selectedEnvValueDraft, setSelectedEnvValueDraft] = useState('')
@@ -550,14 +550,14 @@ export function CredentialsManager() {
   }, [selectedCredential])
 
   const resetCreateForm = () => {
-    setCreateType('oauth')
+    setCreateType('secret')
     setCreateSecretScope('workspace')
     setCreateSecretInputMode('single')
     setCreateDisplayName('')
     setCreateDescription('')
     setCreateEnvKey('')
     setCreateEnvValue('')
-    setCreateBulkText('')
+    setCreateBulkEntries([])
     setCreateOAuthProviderId('')
     setCreateError(null)
     setShowCreateOAuthRequiredModal(false)
@@ -656,7 +656,7 @@ export function CredentialsManager() {
       setShowCreateModal(false)
       resetCreateForm()
     } catch (error: unknown) {
-      const message = error instanceof Error ? error.message : 'Failed to create credential'
+      const message = error instanceof Error ? error.message : 'Failed to create secret'
       setCreateError(message)
       logger.error('Failed to create credential', error)
     }
@@ -666,14 +666,40 @@ export function CredentialsManager() {
     if (!workspaceId) return
     setCreateError(null)
 
-    const { entries, errors } = parseEnvText(createBulkText)
-    if (errors.length > 0) {
-      setCreateError(errors.join('\n'))
+    const entries = createBulkEntries
+      .map((e) => ({ key: e.key.trim(), value: e.value.trim() }))
+      .filter((e) => e.key || e.value)
+
+    if (entries.length === 0) {
+      setCreateError('Add at least one secret.')
       return
     }
 
-    if (entries.length === 0) {
-      setCreateError('No valid KEY=VALUE pairs found. Add one per line, e.g. API_KEY=sk-abc123')
+    const errors: string[] = []
+    const seenKeys = new Set<string>()
+    for (let i = 0; i < entries.length; i++) {
+      const { key, value } = entries[i]
+      if (!key) {
+        errors.push(`Row ${i + 1}: empty key`)
+        continue
+      }
+      if (!isValidEnvVarName(key)) {
+        errors.push(`Row ${i + 1}: "${key}" must contain only letters, numbers, and underscores`)
+        continue
+      }
+      if (!value) {
+        errors.push(`Row ${i + 1}: "${key}" has an empty value`)
+        continue
+      }
+      if (seenKeys.has(key.toUpperCase())) {
+        errors.push(`Row ${i + 1}: duplicate key "${key}"`)
+        continue
+      }
+      seenKeys.add(key.toUpperCase())
+    }
+
+    if (errors.length > 0) {
+      setCreateError(errors.join('\n'))
       return
     }
 
@@ -994,8 +1020,8 @@ export function CredentialsManager() {
         if (!open) resetCreateForm()
       }}
     >
-      <ModalContent size='md'>
-        <ModalHeader>Create Credential</ModalHeader>
+      <ModalContent size='lg'>
+        <ModalHeader>Create Secret</ModalHeader>
         <ModalBody>
           <div className='flex flex-col gap-[12px]'>
             <div>
@@ -1014,32 +1040,11 @@ export function CredentialsManager() {
                     setCreateType(value as CreateCredentialType)
                     setCreateError(null)
                   }}
-                  placeholder='Select credential type'
+                  placeholder='Select type'
                 />
               </div>
             </div>
 
-            {createType === 'secret' && (
-              <div>
-                <Label>Mode</Label>
-                <div className='mt-[6px]'>
-                  <Combobox
-                    options={[
-                      { value: 'single', label: 'Single' },
-                      { value: 'bulk', label: 'Bulk' },
-                    ]}
-                    value={createSecretInputMode === 'single' ? 'Single' : 'Bulk'}
-                    selectedValue={createSecretInputMode}
-                    onChange={(value) => {
-                      setCreateSecretInputMode(value as SecretInputMode)
-                      setCreateError(null)
-                    }}
-                    placeholder='Select mode'
-                  />
-                </div>
-              </div>
-            )}
-
             {createType === 'oauth' ? (
               <div className='flex flex-col gap-[10px]'>
                 <div>
@@ -1049,7 +1054,7 @@ export function CredentialsManager() {
                   <Input
                     value={createDisplayName}
                     onChange={(event) => setCreateDisplayName(event.target.value)}
-                    placeholder='Credential name'
+                    placeholder='Secret name'
                     autoComplete='off'
                     className='mt-[6px]'
                   />
@@ -1106,7 +1111,7 @@ export function CredentialsManager() {
                     <div className='flex items-start gap-[10px]'>
                       <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
                       <p className='text-[12px] text-red-700 dark:text-red-300'>
-                        A credential named{' '}
+                        A secret named{' '}
                         <span className='font-medium'>{existingOAuthDisplayName.displayName}</span>{' '}
                         already exists.
                       </p>
@@ -1116,73 +1121,58 @@ export function CredentialsManager() {
               </div>
             ) : (
               <div className='flex flex-col gap-[10px]'>
-                <div>
-                  <Label className='block'>Scope</Label>
-                  <ButtonGroup
-                    value={createSecretScope}
-                    onValueChange={(value) => setCreateSecretScope(value as SecretScope)}
-                    className='mt-[6px]'
-                  >
-                    <ButtonGroupItem
-                      value='workspace'
-                      className='h-[28px] min-w-[80px] px-[10px] py-0 text-[12px]'
-                    >
-                      Workspace
-                    </ButtonGroupItem>
-                    <ButtonGroupItem
-                      value='personal'
-                      className='h-[28px] min-w-[72px] px-[10px] py-0 text-[12px]'
-                    >
-                      Personal
-                    </ButtonGroupItem>
-                  </ButtonGroup>
-                  <p className='mt-[4px] text-[11px] text-[var(--text-tertiary)]'>
-                    {createSecretScope === 'workspace'
-                      ? 'Shared across the workspace. All members can use it.'
-                      : 'Only visible to you. Other members cannot use it.'}
-                  </p>
-                </div>
                 {createSecretInputMode === 'single' ? (
                   <>
                     <div>
-                      <Label>
-                        Secret key<span className='ml-1'>*</span>
-                      </Label>
-                      <Input
-                        value={createEnvKey}
-                        onChange={(event) => {
-                          setCreateEnvKey(event.target.value)
-                        }}
-                        placeholder='API_KEY'
-                        autoComplete='off'
-                        autoCapitalize='none'
-                        autoCorrect='off'
-                        spellCheck={false}
-                        data-lpignore='true'
-                        data-1p-ignore='true'
-                        className='mt-[6px]'
-                      />
-                      <p className='mt-[4px] text-[11px] text-[var(--text-tertiary)]'>
-                        Use it in blocks as {'{{KEY}}'}, for example {'{{API_KEY}}'}.
-                      </p>
-                    </div>
-                    <div>
-                      <Label>
-                        Secret value<span className='ml-1'>*</span>
-                      </Label>
-                      <Input
-                        type='password'
-                        value={createEnvValue}
-                        onChange={(event) => setCreateEnvValue(event.target.value)}
-                        placeholder='Enter secret value'
-                        autoComplete='new-password'
-                        autoCapitalize='none'
-                        autoCorrect='off'
-                        spellCheck={false}
-                        data-lpignore='true'
-                        data-1p-ignore='true'
-                        className='mt-[6px]'
-                      />
+                      <div className='grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)] items-end'>
+                        <Label>
+                          Key<span className='ml-1'>*</span>
+                        </Label>
+                        <div />
+                        <Label>
+                          Value<span className='ml-1'>*</span>
+                        </Label>
+                      </div>
+                      <div className='mt-[8px] grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)] items-center'>
+                        <Input
+                          value={createEnvKey}
+                          onChange={(event) => {
+                            setCreateEnvKey(event.target.value)
+                          }}
+                          onPaste={(event) => {
+                            const pasted = event.clipboardData.getData('text')
+                            if (pasted.includes('=') && pasted.includes('\n')) {
+                              event.preventDefault()
+                              const { entries } = parseEnvText(pasted)
+                              if (entries.length > 0) {
+                                setCreateSecretInputMode('bulk')
+                                setCreateBulkEntries(entries)
+                                setCreateError(null)
+                              }
+                            }
+                          }}
+                          placeholder='API_KEY'
+                          autoComplete='off'
+                          autoCapitalize='none'
+                          autoCorrect='off'
+                          spellCheck={false}
+                          data-lpignore='true'
+                          data-1p-ignore='true'
+                        />
+                        <div />
+                        <Input
+                          type='password'
+                          value={createEnvValue}
+                          onChange={(event) => setCreateEnvValue(event.target.value)}
+                          placeholder='Value'
+                          autoComplete='new-password'
+                          autoCapitalize='none'
+                          autoCorrect='off'
+                          spellCheck={false}
+                          data-lpignore='true'
+                          data-1p-ignore='true'
+                        />
+                      </div>
                     </div>
                     <div>
                       <Label>Description</Label>
@@ -1195,63 +1185,119 @@ export function CredentialsManager() {
                         className='mt-[6px] min-h-[80px] resize-none'
                       />
                     </div>
-
-                    {selectedExistingEnvCredential && (
-                      <div className='rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
-                        <div className='flex items-start gap-[10px]'>
-                          <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
-                          <p className='text-[12px] text-red-700 dark:text-red-300'>
-                            A secret with key{' '}
-                            <span className='font-medium'>
-                              {selectedExistingEnvCredential.displayName}
-                            </span>{' '}
-                            already exists.
-                          </p>
-                        </div>
-                      </div>
-                    )}
-                    {!selectedExistingEnvCredential && crossScopeEnvConflict && (
-                      <div className='rounded-[8px] border border-amber-500/50 bg-amber-50 p-[12px] dark:bg-amber-950/30'>
-                        <div className='flex items-start gap-[10px]'>
-                          <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-amber-600 dark:text-amber-400' />
-                          <p className='text-[12px] text-amber-700 dark:text-amber-300'>
-                            A workspace secret with key{' '}
-                            <span className='font-medium'>{crossScopeEnvConflict.envKey}</span>{' '}
-                            already exists. Workspace secrets take precedence at runtime.
-                          </p>
-                        </div>
-                      </div>
-                    )}
                   </>
                 ) : (
                   <div>
-                    <Label>Secrets</Label>
-                    <Textarea
-                      value={createBulkText}
-                      onChange={(event) => {
-                        setCreateBulkText(event.target.value)
-                        setCreateError(null)
-                      }}
-                      placeholder={
-                        'OPENAI_API_KEY=sk-abc123\nANTHROPIC_API_KEY=sk-ant-xyz\nSTRIPE_SECRET=sk_live_...'
-                      }
-                      autoComplete='off'
-                      spellCheck={false}
-                      className='mt-[6px] min-h-[160px] resize-none font-mono text-[12px]'
-                    />
-                    <p className='mt-[4px] text-[11px] text-[var(--text-tertiary)]'>
-                      Paste KEY=VALUE pairs, one per line. Lines starting with # are ignored.
-                    </p>
-                    {createBulkText.trim()
-                      ? (() => {
-                          const { entries } = parseEnvText(createBulkText)
-                          return entries.length > 0 ? (
-                            <p className='mt-[2px] text-[11px] text-[var(--text-secondary)]'>
-                              {entries.length} secret{entries.length === 1 ? '' : 's'} detected
-                            </p>
-                          ) : null
-                        })()
-                      : null}
+                    <Label>Secrets ({createBulkEntries.length})</Label>
+                    <div className='mt-[6px] grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_28px] items-end'>
+                      <span className='text-[11px] text-[var(--text-secondary)]'>Key</span>
+                      <div />
+                      <span className='text-[11px] text-[var(--text-secondary)]'>Value</span>
+                      <div />
+                    </div>
+                    <div className='mt-[4px] flex max-h-[240px] flex-col gap-[4px] overflow-y-auto'>
+                      {createBulkEntries.map((entry, index) => (
+                        <div
+                          key={index}
+                          className='grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_28px] items-center'
+                        >
+                          <Input
+                            value={entry.key}
+                            onChange={(event) => {
+                              const updated = [...createBulkEntries]
+                              updated[index] = { ...entry, key: event.target.value }
+                              setCreateBulkEntries(updated)
+                            }}
+                            placeholder='KEY'
+                            autoComplete='off'
+                            autoCapitalize='none'
+                            autoCorrect='off'
+                            spellCheck={false}
+                            data-lpignore='true'
+                            data-1p-ignore='true'
+                          />
+                          <div />
+                          <Input
+                            type='password'
+                            value={entry.value}
+                            onChange={(event) => {
+                              const updated = [...createBulkEntries]
+                              updated[index] = { ...entry, value: event.target.value }
+                              setCreateBulkEntries(updated)
+                            }}
+                            placeholder='Value'
+                            autoComplete='new-password'
+                            autoCapitalize='none'
+                            autoCorrect='off'
+                            spellCheck={false}
+                            data-lpignore='true'
+                            data-1p-ignore='true'
+                          />
+                          <Button
+                            variant='ghost'
+                            className='h-[28px] w-[28px] p-0'
+                            onClick={() => {
+                              const updated = createBulkEntries.filter((_, i) => i !== index)
+                              if (updated.length === 0) {
+                                setCreateSecretInputMode('single')
+                              }
+                              setCreateBulkEntries(updated)
+                            }}
+                          >
+                            <X className='h-[12px] w-[12px]' />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                <div>
+                  <Label className='block'>Scope</Label>
+                  <div className='mt-[8px]'>
+                    <ButtonGroup
+                      value={createSecretScope}
+                      onValueChange={(value) => setCreateSecretScope(value as SecretScope)}
+                    >
+                      <ButtonGroupItem
+                        value='workspace'
+                        className='h-[28px] min-w-[80px] px-[10px] py-0 text-[12px]'
+                      >
+                        Workspace
+                      </ButtonGroupItem>
+                      <ButtonGroupItem
+                        value='personal'
+                        className='h-[28px] min-w-[72px] px-[10px] py-0 text-[12px]'
+                      >
+                        Personal
+                      </ButtonGroupItem>
+                    </ButtonGroup>
+                  </div>
+                </div>
+
+                {selectedExistingEnvCredential && (
+                  <div className='rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
+                    <div className='flex items-start gap-[10px]'>
+                      <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
+                      <p className='text-[12px] text-red-700 dark:text-red-300'>
+                        A secret with key{' '}
+                        <span className='font-medium'>
+                          {selectedExistingEnvCredential.displayName}
+                        </span>{' '}
+                        already exists.
+                      </p>
+                    </div>
+                  </div>
+                )}
+                {!selectedExistingEnvCredential && crossScopeEnvConflict && (
+                  <div className='rounded-[8px] border border-amber-500/50 bg-amber-50 p-[12px] dark:bg-amber-950/30'>
+                    <div className='flex items-start gap-[10px]'>
+                      <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-amber-600 dark:text-amber-400' />
+                      <p className='text-[12px] text-amber-700 dark:text-amber-300'>
+                        A workspace secret with key{' '}
+                        <span className='font-medium'>{crossScopeEnvConflict.envKey}</span> already
+                        exists. Workspace secrets take precedence at runtime.
+                      </p>
+                    </div>
                   </div>
                 )}
               </div>
@@ -1283,7 +1329,7 @@ export function CredentialsManager() {
                   connectOAuthService.isPending ||
                   Boolean(existingOAuthDisplayName)
                 : createSecretInputMode === 'bulk'
-                  ? !createBulkText.trim()
+                  ? createBulkEntries.length === 0
                   : !createEnvKey.trim() ||
                     !createEnvValue.trim() ||
                     Boolean(selectedExistingEnvCredential)) ||
@@ -1329,7 +1375,7 @@ export function CredentialsManager() {
     <Modal open={showDeleteConfirmDialog} onOpenChange={setShowDeleteConfirmDialog}>
       <ModalContent size='sm'>
         <ModalHeader>
-          {credentialToDelete?.type === 'oauth' ? 'Disconnect Credential' : 'Delete Credential'}
+          {credentialToDelete?.type === 'oauth' ? 'Disconnect Secret' : 'Delete Secret'}
         </ModalHeader>
         <ModalBody>
           <p className='text-[12px] text-[var(--text-secondary)]'>
@@ -1400,7 +1446,7 @@ export function CredentialsManager() {
                             )}
                           </Button>
                         </Tooltip.Trigger>
-                        <Tooltip.Content>Copy credential ID</Tooltip.Content>
+                        <Tooltip.Content>Copy secret ID</Tooltip.Content>
                       </Tooltip.Root>
                     </div>
                     <Input
@@ -1637,15 +1683,11 @@ export function CredentialsManager() {
 
           <div className='mt-auto flex items-center justify-between'>
             <div className='flex items-center gap-[8px]'>
+              <Button onClick={() => setSelectedCredentialId(null)} variant='active'>
+                Back
+              </Button>
               {isSelectedAdmin && (
                 <>
-                  <Button
-                    variant='default'
-                    onClick={handleSaveDetails}
-                    disabled={!isDetailsDirty || isSavingDetails}
-                  >
-                    {isSavingDetails ? 'Saving...' : 'Save'}
-                  </Button>
                   {selectedCredential.type === 'oauth' && (
                     <Button
                       variant='default'
@@ -1689,9 +1731,15 @@ export function CredentialsManager() {
                 </>
               )}
             </div>
-            <Button onClick={() => setSelectedCredentialId(null)} variant='tertiary'>
-              Back
-            </Button>
+            {isSelectedAdmin && (
+              <Button
+                variant='tertiary'
+                onClick={handleSaveDetails}
+                disabled={!isDetailsDirty || isSavingDetails}
+              >
+                {isSavingDetails ? 'Saving...' : 'Save'}
+              </Button>
+            )}
           </div>
         </div>
 
@@ -1712,7 +1760,7 @@ export function CredentialsManager() {
               strokeWidth={2}
             />
             <UiInput
-              placeholder='Search credentials...'
+              placeholder='Search secrets...'
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               disabled={credentialsLoading}
@@ -1784,7 +1832,7 @@ export function CredentialsManager() {
               })}
               {showNoResults && (
                 <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
-                  No credentials found matching &ldquo;{searchTerm}&rdquo;
+                  No secrets found matching &ldquo;{searchTerm}&rdquo;
                 </div>
               )}
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx
index 9c04f96113..0956f6a6d0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx
@@ -19,7 +19,6 @@ import {
 } from 'lucide-react'
 import {
   Card,
-  Connections,
   HexSimple,
   Key,
   SModal,
@@ -32,6 +31,7 @@ import {
   SModalSidebarItem,
   SModalSidebarSection,
   SModalSidebarSectionTitle,
+  TerminalWindow,
 } from '@/components/emcn'
 import { AgentSkillsIcon, McpIcon } from '@/components/icons'
 import { useSession } from '@/lib/auth/auth-client'
@@ -153,11 +153,11 @@ const allNavigationItems: NavigationItem[] = [
     requiresHosted: true,
     requiresTeam: true,
   },
-  { id: 'credentials', label: 'Credentials', icon: Connections, section: 'account' },
+  { id: 'credentials', label: 'Secrets', icon: Key, section: 'account' },
   { id: 'custom-tools', label: 'Custom Tools', icon: Wrench, section: 'tools' },
   { id: 'skills', label: 'Skills', icon: AgentSkillsIcon, section: 'tools' },
   { id: 'mcp', label: 'MCP Tools', icon: McpIcon, section: 'tools' },
-  { id: 'apikeys', label: 'API Keys', icon: Key, section: 'system' },
+  { id: 'apikeys', label: 'Sim Keys', icon: TerminalWindow, section: 'system' },
   { id: 'workflow-mcp-servers', label: 'MCP Servers', icon: Server, section: 'system' },
   {
     id: 'byok',
@@ -461,7 +461,7 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
         </VisuallyHidden.Root>
         <VisuallyHidden.Root>
           <DialogPrimitive.Description>
-            Configure your workspace settings, credentials, and preferences
+            Configure your workspace settings, secrets, and preferences
           </DialogPrimitive.Description>
         </VisuallyHidden.Root>
 
diff --git a/apps/sim/components/emcn/icons/index.ts b/apps/sim/components/emcn/icons/index.ts
index 2318757ca0..9248425634 100644
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -24,6 +24,7 @@ export { PanelLeft } from './panel-left'
 export { Play, PlayOutline } from './play'
 export { Redo } from './redo'
 export { Rocket } from './rocket'
+export { TerminalWindow } from './terminal-window'
 export { Trash } from './trash'
 export { Trash2 } from './trash2'
 export { Undo } from './undo'
diff --git a/apps/sim/components/emcn/icons/terminal-window.tsx b/apps/sim/components/emcn/icons/terminal-window.tsx
new file mode 100644
index 0000000000..670c8c83c7
--- /dev/null
+++ b/apps/sim/components/emcn/icons/terminal-window.tsx
@@ -0,0 +1,26 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Terminal window icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function TerminalWindow(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='16'
+      height='14'
+      viewBox='0 0 16 14'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M3 0C1.34315 0 0 1.34315 0 3V11C0 12.6569 1.34315 14 3 14H13C14.6569 14 16 12.6569 16 11V3C16 1.34315 14.6569 0 13 0H3ZM1 3C1 1.89543 1.89543 1 3 1H13C14.1046 1 15 1.89543 15 3V4H1V3ZM1 5H15V11C15 12.1046 14.1046 13 13 13H3C1.89543 13 1 12.1046 1 11V5Z'
+        fill='currentColor'
+      />
+      <circle cx='3.5' cy='2.5' r='0.75' fill='currentColor' />
+      <circle cx='5.75' cy='2.5' r='0.75' fill='currentColor' />
+      <circle cx='8' cy='2.5' r='0.75' fill='currentColor' />
+    </svg>
+  )
+}

From b9b7f52e6e08a490810284c88fe57854752d6fc1 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 24 Feb 2026 22:19:46 +0000
Subject: [PATCH 6/8] fix(credentials): show error when OAuth deletion fails
 due to missing fields

- Add deleteError state to track and display deletion errors
- Keep confirmation dialog open when deletion fails
- Show user-friendly error message when accountId or providerId is missing
- Add loading state to delete button during deletion
- Display error message in confirmation dialog with proper styling

Co-authored-by: Emir Karabeg <emir-karabeg@users.noreply.github.com>
---
 .../credentials/credentials-manager.tsx       | 42 +++++++++++++++----
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
index fca26aedee..532222c8f4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
@@ -204,6 +204,7 @@ export function CredentialsManager() {
   const [copyIdSuccess, setCopyIdSuccess] = useState(false)
   const [credentialToDelete, setCredentialToDelete] = useState<WorkspaceCredential | null>(null)
   const [showDeleteConfirmDialog, setShowDeleteConfirmDialog] = useState(false)
+  const [deleteError, setDeleteError] = useState<string | null>(null)
   const { data: session } = useSession()
   const currentUserId = session?.user?.id || ''
 
@@ -804,16 +805,19 @@ export function CredentialsManager() {
 
   const handleDeleteClick = (credential: WorkspaceCredential) => {
     setCredentialToDelete(credential)
+    setDeleteError(null)
     setShowDeleteConfirmDialog(true)
   }
 
   const handleConfirmDelete = async () => {
     if (!credentialToDelete) return
-    setShowDeleteConfirmDialog(false)
+    setDeleteError(null)
 
     try {
       if (credentialToDelete.type === 'oauth') {
         if (!credentialToDelete.accountId || !credentialToDelete.providerId) {
+          const errorMessage = 'Cannot disconnect: missing account information. Please try reconnecting this credential first.'
+          setDeleteError(errorMessage)
           logger.error('Cannot disconnect OAuth credential: missing accountId or providerId')
           return
         }
@@ -835,10 +839,12 @@ export function CredentialsManager() {
       if (selectedCredentialId === credentialToDelete.id) {
         setSelectedCredentialId(null)
       }
+      setShowDeleteConfirmDialog(false)
+      setCredentialToDelete(null)
     } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to delete credential'
+      setDeleteError(message)
       logger.error('Failed to delete credential', error)
-    } finally {
-      setCredentialToDelete(null)
     }
   }
 
@@ -1371,8 +1377,14 @@ export function CredentialsManager() {
     />
   )
 
+  const handleCloseDeleteDialog = () => {
+    setShowDeleteConfirmDialog(false)
+    setCredentialToDelete(null)
+    setDeleteError(null)
+  }
+
   const deleteConfirmDialogJsx = (
-    <Modal open={showDeleteConfirmDialog} onOpenChange={setShowDeleteConfirmDialog}>
+    <Modal open={showDeleteConfirmDialog} onOpenChange={(open) => !open && handleCloseDeleteDialog()}>
       <ModalContent size='sm'>
         <ModalHeader>
           {credentialToDelete?.type === 'oauth' ? 'Disconnect Secret' : 'Delete Secret'}
@@ -1386,13 +1398,29 @@ export function CredentialsManager() {
             </span>
             ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
           </p>
+          {deleteError && (
+            <div className='mt-[12px] rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
+              <div className='flex items-start gap-[10px]'>
+                <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
+                <p className='text-[12px] text-red-700 dark:text-red-300'>{deleteError}</p>
+              </div>
+            </div>
+          )}
         </ModalBody>
         <ModalFooter>
-          <Button variant='default' onClick={() => setShowDeleteConfirmDialog(false)}>
+          <Button variant='default' onClick={handleCloseDeleteDialog}>
             Cancel
           </Button>
-          <Button variant='destructive' onClick={handleConfirmDelete}>
-            {credentialToDelete?.type === 'oauth' ? 'Disconnect' : 'Delete'}
+          <Button
+            variant='destructive'
+            onClick={handleConfirmDelete}
+            disabled={deleteCredential.isPending || disconnectOAuthService.isPending}
+          >
+            {deleteCredential.isPending || disconnectOAuthService.isPending
+              ? 'Deleting...'
+              : credentialToDelete?.type === 'oauth'
+                ? 'Disconnect'
+                : 'Delete'}
           </Button>
         </ModalFooter>
       </ModalContent>

From a9921e49d27583f2d8c147c2f931191762e6ca5a Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 24 Feb 2026 14:35:02 -0800
Subject: [PATCH 7/8] ran lint

---
 .claude/worktrees/lucid-bassi                             | 1 +
 .../components/credentials/credentials-manager.tsx        | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 160000 .claude/worktrees/lucid-bassi

diff --git a/.claude/worktrees/lucid-bassi b/.claude/worktrees/lucid-bassi
new file mode 160000
index 0000000000..5e3c43ff83
--- /dev/null
+++ b/.claude/worktrees/lucid-bassi
@@ -0,0 +1 @@
+Subproject commit 5e3c43ff83a7488ec2e45ab406e975d3d1ee3e08
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
index 532222c8f4..036f280675 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credentials/credentials-manager.tsx
@@ -816,7 +816,8 @@ export function CredentialsManager() {
     try {
       if (credentialToDelete.type === 'oauth') {
         if (!credentialToDelete.accountId || !credentialToDelete.providerId) {
-          const errorMessage = 'Cannot disconnect: missing account information. Please try reconnecting this credential first.'
+          const errorMessage =
+            'Cannot disconnect: missing account information. Please try reconnecting this credential first.'
           setDeleteError(errorMessage)
           logger.error('Cannot disconnect OAuth credential: missing accountId or providerId')
           return
@@ -1384,7 +1385,10 @@ export function CredentialsManager() {
   }
 
   const deleteConfirmDialogJsx = (
-    <Modal open={showDeleteConfirmDialog} onOpenChange={(open) => !open && handleCloseDeleteDialog()}>
+    <Modal
+      open={showDeleteConfirmDialog}
+      onOpenChange={(open) => !open && handleCloseDeleteDialog()}
+    >
       <ModalContent size='sm'>
         <ModalHeader>
           {credentialToDelete?.type === 'oauth' ? 'Disconnect Secret' : 'Delete Secret'}

From 0c966e48f2c1066654d10bdfe52af79c89279434 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 24 Feb 2026 14:39:15 -0800
Subject: [PATCH 8/8] removed worktree file

---
 .claude/worktrees/lucid-bassi | 1 -
 1 file changed, 1 deletion(-)
 delete mode 160000 .claude/worktrees/lucid-bassi

diff --git a/.claude/worktrees/lucid-bassi b/.claude/worktrees/lucid-bassi
deleted file mode 160000
index 5e3c43ff83..0000000000
--- a/.claude/worktrees/lucid-bassi
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 5e3c43ff83a7488ec2e45ab406e975d3d1ee3e08