improvement(settings): unify save/discard across editable surfaces

.claude/rules/sim-settings-pages.md

@@ -167,11 +167,32 @@ Any settings surface with editable state uses **one** shared stack — never
 hand-roll a Save button, a Discard button, a `beforeunload`, or an "Unsaved
 changes" modal:
 
-- **`saveDiscardActions(config)`** (`…/components/save-discard-actions/save-discard-actions`)
-  — returns the canonical dirty-gated **Discard + Save** `SettingsAction[]` (empty
-  when not dirty). Spread it into a `SettingsPanel` `actions` array, beside any
+- **`saveDiscardActions(config)`** (`@/components/settings/save-discard-actions`)
+  — returns the canonical **Discard + Save** `SettingsAction[]`. **Save is always
+  rendered** (primary), disabled until there is something to save, so every
+  editable surface announces its primary action in the same place and a create
+  form is never a page with no visible way to commit it; **Discard appears only
+  when dirty**. Spread it into a `SettingsPanel` `actions` array, beside any
   sibling actions (a detail view's Delete / Remove override). Config: `dirty`,
-  `saving`, `onSave`, `onDiscard`, `saveDisabled?`, `saveLabel?`, `savingLabel?`.
+  `saving`, `onSave`, `onDiscard`, `saveDisabled?`, `saveTooltip?`, `creating?`,
+  `saveLabel?`, `savingLabel?`. Create flows pass `creating` — the
+  Create / Creating... labels come as a pair and can never drift apart.
+  `saveLabel`/`savingLabel` are only for genuinely bespoke wording (SSO's
+  `Update`); never hand-roll the pair to get a create label.
+- **`<SaveDiscardChips {...config} />`** (same module) — the identical rule
+  rendered as chips, for surfaces whose header takes a `ReactNode` instead of
+  action data (`CredentialDetailLayout`: skills, secrets, connected credentials).
+  Both stacks derive from the one function; never hand-roll a Save chip.
+
+`CredentialDetailLayout` stays slot-driven for exactly two reasons: its back
+control is a real `<ChipLink href>` (deep-linkable / middle-clickable, which
+`SettingsBackAction`'s `onSelect` cannot express), and actions like
+`SkillImportButton` own a hidden file input and their own pending state.
+**Everything else in one of those headers should be `SettingsAction` data**
+rendered through `<SettingsActionChips actions={…} />` from
+`@/components/settings/settings-header` — that is the shared chip path, and it
+is what keeps tone/icon/variant/tooltip handling from drifting between the two
+shells. Reach for it before hand-rolling a `Chip`.
 - **`useSettingsUnsavedGuard({ isDirty })`** (`…/settings/hooks/use-settings-unsaved-guard`)
   — syncs the page's local `isDirty` into the shared `useSettingsDirtyStore` (so
   the sidebar's **section-switch** confirm + the centralized `beforeunload` both

apps/sim/app/workspace/[workspaceId]/components/credential-detail/hooks/use-credential-detail-form.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -30,11 +30,21 @@ export function useCredentialDetailForm({
 
   const [displayNameDraft, setDisplayNameDraft] = useState('')
   const [descriptionDraft, setDescriptionDraft] = useState('')
+  const [seededCredentialId, setSeededCredentialId] = useState<string | null>(null)
 
-  useEffect(() => {
-    setDisplayNameDraft(credential?.displayName ?? '')
-    setDescriptionDraft(credential?.description ?? '')
-  }, [credential?.id, credential?.displayName, credential?.description])
+  // Seed drafts when the credential first resolves (or the route id changes); a
+  // background refetch of the same credential must not clobber an in-progress
+  // edit — Discard is the one way to reset.
+  /** Applies a credential to both drafts — the one definition of "reset to server state". */
+  const seedDrafts = useCallback((source: WorkspaceCredential) => {
+    setDisplayNameDraft(source.displayName)
+    setDescriptionDraft(source.description ?? '')
+  }, [])
+
+  if (credential && credential.id !== seededCredentialId) {
+    setSeededCredentialId(credential.id)
+    seedDrafts(credential)
+  }
 
   const isDisplayNameDirty = credential ? displayNameDraft !== credential.displayName : false
   const isDescriptionDirty = credential
@@ -68,16 +78,22 @@ export function useCredentialDetailForm({
     isDescriptionDirty,
     displayNameDraft,
     descriptionDraft,
-    updateCredential,
+    updateCredential.mutateAsync,
+    updateCredential.isPending,
   ])
 
+  const discard = useCallback(() => {
+    if (credential) seedDrafts(credential)
+  }, [credential, seedDrafts])
+
   return {
     displayNameDraft,
     setDisplayNameDraft,
     descriptionDraft,
     setDescriptionDraft,
     isDirty,
     save,
+    discard,
     isSaving: updateCredential.isPending,
     handleBackClick: guard.handleBackClick,
     showUnsavedAlert: guard.showUnsavedAlert,

apps/sim/app/workspace/[workspaceId]/components/invite-modal/invite-modal.tsx

@@ -40,8 +40,7 @@ const MEMBERSHIP_OPTIONS = [
 
 type Membership = (typeof MEMBERSHIP_OPTIONS)[number]['value']
 
-const MEMBERSHIP_HINTS: Record<Membership, string> = {
-  member: 'Joins your organization. Adds a seat.',
+const MEMBERSHIP_HINTS: Partial<Record<Membership, string>> = {
   admin: 'Joins your organization and can manage it. Adds a seat.',
   external:
     'Access to the selected workspaces only — no seat. Only available for people already on a paid Sim plan.',

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

@@ -15,6 +15,7 @@ import { ArrowLeft } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
+import { SaveDiscardChips } from '@/components/settings/save-discard-actions'
 import { writeOAuthReturnContext } from '@/lib/credentials/client-state'
 import { resolveCredentialDisplay } from '@/lib/integrations'
 import {
@@ -204,9 +205,12 @@ export function ConnectedCredentialDetail({
         >
           Disconnect
         </Chip>
-        <Chip onClick={form.save} disabled={!form.isDirty || form.isSaving}>
-          {form.isSaving ? 'Saving...' : 'Save'}
-        </Chip>
+        <SaveDiscardChips
+          dirty={form.isDirty}
+          saving={form.isSaving}
+          onSave={form.save}
+          onDiscard={form.discard}
+        />
       </>
     ) : null
 

apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/components/custom-tool-detail/custom-tool-detail.tsx

@@ -5,6 +5,7 @@ import { ChipConfirmModal, toast } from '@sim/emcn'
 import { ArrowLeft, Wrench } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
+import { saveDiscardActions } from '@/components/settings/save-discard-actions'
 import { ResourceTile } from '@/app/workspace/[workspaceId]/components'
 import {
   CredentialDetailHeading,
@@ -23,8 +24,6 @@ import {
   useSchemaGeneration,
   validateCustomToolSchema,
 } from '@/app/workspace/[workspaceId]/components/custom-tool-editor'
-import { saveDiscardActions } from '@/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions'
-import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useSettingsUnsavedGuard } from '@/app/workspace/[workspaceId]/settings/hooks/use-settings-unsaved-guard'
@@ -50,9 +49,9 @@ interface CustomToolDetailProps {
 
 /**
  * Full-page custom tool editor rendered as a settings detail sub-view: a back
- * chip, dirty-gated Discard/Save, Delete, and the Schema and Code editors
- * stacked (no tabs — the page has room for both). Uses the same fields as the
- * canvas modal so the two surfaces never drift.
+ * chip, Save/Discard, Delete, and the Schema and Code editors stacked (no tabs —
+ * the page has room for both). Uses the same fields as the canvas modal so the
+ * two surfaces never drift.
  */
 export function CustomToolDetail({
   workspaceId,
@@ -200,22 +199,6 @@ export function CustomToolDetail({
     }
   }
 
-  /**
-   * On create, the primary action is always visible so the page announces what
-   * it is for — disabled until the schema is a valid function definition.
-   * (`saveDiscardActions` is dirty-gated and would render nothing on an empty
-   * draft.) Discard still only appears once there is something to discard.
-   */
-  const createToolActions: SettingsAction[] = [
-    ...(dirty ? [{ text: 'Discard', onSelect: handleDiscard, disabled: saving }] : []),
-    {
-      text: saving ? 'Creating...' : 'Create',
-      variant: 'primary' as const,
-      onSelect: handleSave,
-      disabled: saving || streaming || !isSchemaValid,
-    },
-  ]
-
   return (
     <>
       <SettingsPanel
@@ -224,15 +207,14 @@ export function CustomToolDetail({
         actions={[
           ...(readOnly
             ? []
-            : isEditing
-              ? saveDiscardActions({
-                  dirty,
-                  saving,
-                  onSave: handleSave,
-                  onDiscard: handleDiscard,
-                  saveDisabled: !isSchemaValid || streaming,
-                })
-              : createToolActions),
+            : saveDiscardActions({
+                dirty,
+                saving,
+                onSave: handleSave,
+                onDiscard: handleDiscard,
+                saveDisabled: !isSchemaValid || streaming,
+                creating: !isEditing,
+              })),
           ...(tool && !readOnly
             ? [
                 {

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

@@ -8,6 +8,7 @@ import { useParams } from 'next/navigation'
 import { useQueryState } from 'nuqs'
 import { CodeIcon } from '@/components/icons'
 import { canMutateWorkspaceSettingsSection } from '@/components/settings/navigation'
+import { saveDiscardActions } from '@/components/settings/save-discard-actions'
 import type { SandboxDependencyIssue } from '@/lib/api/contracts/sandboxes'
 import { UnsavedChangesModal } from '@/app/workspace/[workspaceId]/components/credential-detail'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -29,7 +30,6 @@ import {
   type SandboxDraft,
   toSubmittedLines,
 } from '@/app/workspace/[workspaceId]/settings/components/sandboxes/utils'
-import { saveDiscardActions } from '@/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
 import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
@@ -202,6 +202,7 @@ export function Sandboxes() {
                 setIssues([])
               },
               saveDisabled: !canAdmin || current.name.trim().length === 0,
+              creating: isCreating,
             }),
             ...(selected && canAdmin
               ? [

apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx

@@ -6,6 +6,7 @@ import { createLogger } from '@sim/logger'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams, useRouter } from 'next/navigation'
 import { canMutateWorkspaceSettingsSection } from '@/components/settings/navigation'
+import { saveDiscardActions } from '@/components/settings/save-discard-actions'
 import {
   clearPendingCredentialCreateRequest,
   PENDING_CREDENTIAL_CREATE_REQUEST_EVENT,
@@ -17,7 +18,6 @@ import { UnsavedChangesModal } from '@/app/workspace/[workspaceId]/components/cr
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import { SecretValueField } from '@/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
-import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
 import { useSettingsSearch } from '@/app/workspace/[workspaceId]/settings/components/use-settings-search'
 import { isValidEnvVarName } from '@/executor/constants'
@@ -981,27 +981,18 @@ export function SecretsManager() {
           onChange: setSearchTerm,
           placeholder: 'Search secrets...',
         }}
-        actions={[
-          ...(hasChanges
-            ? [
-                {
-                  text: 'Discard',
-                  onSelect: handleCancel,
-                  disabled: isListSaving,
-                } satisfies SettingsAction,
-              ]
-            : []),
-          {
-            text: isListSaving ? 'Saving...' : 'Save',
-            onSelect: handleSave,
-            disabled: hasConflicts || hasInvalidKeys || isLoading || !hasChanges || isListSaving,
-            tooltip: hasConflicts
-              ? 'Resolve all conflicts before saving'
-              : hasInvalidKeys
-                ? 'Fix invalid variable names before saving'
-                : undefined,
-          },
-        ]}
+        actions={saveDiscardActions({
+          dirty: hasChanges,
+          saving: isListSaving,
+          onSave: handleSave,
+          onDiscard: handleCancel,
+          saveDisabled: hasConflicts || hasInvalidKeys || isLoading,
+          saveTooltip: hasConflicts
+            ? 'Resolve all conflicts before saving'
+            : hasInvalidKeys
+              ? 'Fix invalid variable names before saving'
+              : undefined,
+        })}
       >
         {!isLoading && (
           <div className='flex flex-col gap-7'>

apps/sim/app/workspace/[workspaceId]/settings/components/secrets/hooks/use-secret-value.ts

@@ -97,5 +97,16 @@ export function useSecretValue({ workspaceId, credential }: UseSecretValueParams
     }
   }
 
-  return { value: draft, setValue: setDraft, canEdit, isConflicted, isDirty, save, isSaving }
+  const discard = () => setDraft(currentValue)
+
+  return {
+    value: draft,
+    setValue: setDraft,
+    canEdit,
+    isConflicted,
+    isDirty,
+    save,
+    discard,
+    isSaving,
+  }
 }

apps/sim/app/workspace/[workspaceId]/settings/secrets/[credentialId]/secret-detail.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { Chip, ChipCopyInput, ChipLink, Send } from '@sim/emcn'
 import { ArrowLeft, Key } from '@sim/emcn/icons'
+import { SaveDiscardChips } from '@/components/settings/save-discard-actions'
 import {
   AddPeopleModal,
   CredentialDetailHeading,
@@ -51,9 +52,12 @@ export function SecretDetail({ workspaceId, credentialId }: SecretDetailProps) {
           </Chip>
         )}
         {canEditValue && (
-          <Chip onClick={valueField.save} disabled={!valueField.isDirty || valueField.isSaving}>
-            {valueField.isSaving ? 'Saving...' : 'Save'}
-          </Chip>
+          <SaveDiscardChips
+            dirty={valueField.isDirty}
+            saving={valueField.isSaving}
+            onSave={valueField.save}
+            onDiscard={valueField.discard}
+          />
         )}
       </>
     ) : null