From cbfa3792e93381b503b34ea0a0b6a1affd30df87 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Mon, 29 Jun 2026 19:50:50 -0700
Subject: [PATCH 1/6] improvement(settings): persistent layout + locked-down
 header API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mirror the Resource compound component's locked invariant for settings.

- Move ALL page chrome (header bar, title/description, scroll region, centered
  max-w-[48rem] column, spacing) into the Next.js settings/[section]/layout.tsx
  via SettingsHeaderShell, so it persists across section navigation and never
  re-renders / re-lays-out. SettingsPanel becomes a thin registrar that feeds the
  shell its header data via a React context slot.
- Lock the header API: actions is now SettingsAction[] (data only:
  text/icon/variant/active/onSelect/disabled, rendered as Chips) — no JSX, no
  <div>, no className, so a padding change is structurally impossible. Add a left
  'back' slot for detail sub-views + an 'aside' escape hatch for the rare non-chip
  widget.
- SaveDiscardActions component -> saveDiscardActions() helper returning the
  dirty-gated SettingsAction[].
- Migrate every panel page + the 5 in-section detail views (access-control
  group-detail, data-retention PolicyDetail, mcp, credential-sets, workflow-mcp)
  onto the layout/back-slot; they no longer hand-roll their own shells.
- Chip labels are sentence case (Add override, Create server, ...); the action gap
  is owned once by the shell; no action <div>s.

Documents the new contract in the settings rule + add-settings-page skill.
---
 .claude/rules/sim-settings-pages.md           |  72 +-
 .../settings/[section]/layout.tsx             |  18 +
 .../settings/[section]/settings.tsx           |  46 +-
 .../settings/components/api-keys/api-keys.tsx |  30 +-
 .../settings/components/copilot/copilot.tsx   |  28 +-
 .../credential-sets/credential-sets.tsx       | 346 ++++-----
 .../components/custom-tools/custom-tools.tsx  |  24 +-
 .../settings/components/general/general.tsx   |  37 +-
 .../settings/components/mcp/mcp.tsx           | 382 +++++-----
 .../save-discard-actions.ts                   |  33 +
 .../save-discard-actions.tsx                  |  42 --
 .../secrets-manager/secrets-manager.tsx       |  63 +-
 .../settings-header/settings-header.tsx       | 184 +++++
 .../settings-panel/settings-panel.tsx         | 119 +--
 .../team-management/team-management.tsx       |  22 +-
 .../components/teammates/teammates.tsx        |   2 +-
 .../workflow-mcp-servers.tsx                  | 533 +++++++-------
 .../components/access-control.tsx             |  16 +-
 .../components/group-detail.tsx               | 679 +++++++++---------
 .../components/data-drains-settings.tsx       |  16 +-
 .../components/data-retention-settings.tsx    | 234 +++---
 apps/sim/ee/sso/components/sso-settings.tsx   |  52 +-
 .../components/whitelabeling-settings.tsx     |  18 +-
 23 files changed, 1556 insertions(+), 1440 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/[section]/layout.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx

diff --git a/.claude/rules/sim-settings-pages.md b/.claude/rules/sim-settings-pages.md
index 1f666fc59f2..b479f6d4ae2 100644
--- a/.claude/rules/sim-settings-pages.md
+++ b/.claude/rules/sim-settings-pages.md
@@ -6,14 +6,18 @@ paths:
 
 # Settings Pages
 
-Every settings page renders through the shared **`SettingsPanel`** primitive
-(`@/app/workspace/[workspaceId]/settings/components/settings-panel`). It owns the
-page chrome so pages never hand-roll it: a fixed header bar (right-aligned
-actions), a scroll region, and a centered `max-w-[48rem]` content column led by a
-**title + description that come from navigation metadata**. Pages render only
-their body.
-
-Do NOT hand-roll any of these in a settings page — they are the panel's job:
+The Next.js `settings/[section]/layout.tsx` owns all settings page chrome via
+`SettingsHeaderShell` — a fixed header bar (a left back chip + right-aligned
+action chips), a scroll region, and a centered `max-w-[48rem]` content column led
+by a **title + description from navigation metadata**. The chrome stays mounted
+across section navigation (it never re-renders or re-lays-out). Each section
+renders through the **`SettingsPanel`** registrar
+(`@/app/workspace/[workspaceId]/settings/components/settings-panel`), which feeds
+the shell its header data and renders only the section body. Sections supply
+**data**, never chrome.
+
+Do NOT hand-roll any of these in a settings page — they are owned by the layout
+shell (fed through `SettingsPanel`):
 
 - `<div className='flex h-full flex-col bg-[var(--bg)]'>` shell
 - the header bar (`flex flex-shrink-0 … px-[16px] pt-[8.5px] pb-[8.5px]`)
@@ -29,11 +33,7 @@ import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components
 
 return (
   <SettingsPanel
-    actions={
-      <Chip leftIcon={Plus} variant='primary' onClick={onCreate}>
-        Create
-      </Chip>
-    }
+    actions={[{ text: 'Create', icon: Plus, variant: 'primary', onSelect: onCreate }]}
     search={{ value: searchTerm, onChange: setSearchTerm, placeholder: 'Search …' }}
   >
     {/* body only — sections, lists, forms */}
@@ -54,9 +54,20 @@ return (
 
 ## `SettingsPanel` props
 
-- `actions?: ReactNode` — right-aligned header chips. Wrap multiple in a fragment;
-  the slot reserves the 30px chip height even when empty, so vertical rhythm is
-  identical across pages. Conditional actions are fine: `actions={canManage && <Chip…/>}`.
+- `actions?: SettingsAction[]` — right-aligned header chips, **data only**:
+  `{ text, icon?, variant?: 'primary'|'destructive', active?, onSelect, disabled? }`.
+  The shell renders each as a `Chip` — never pass JSX, a `<div>`, or `className`
+  (the locked contract: it's structurally impossible to vibe-code a padding
+  change). Multiple/conditional actions are a plain array
+  (`[...(canManage ? [{…}] : []), …]`). Labels are **sentence case** (`Add override`,
+  not `Add Override`). Save/Discard pairs come from the `saveDiscardActions()`
+  helper (spread it into `actions`). A widget that genuinely cannot be a chip
+  (tooltip-wrapped chip, custom dropdown) goes in the `aside` escape hatch.
+- `back?: SettingsBackAction` (`{ text, icon?, onSelect }`) — left-aligned back
+  chip for a **detail sub-view** (e.g. a selected MCP server, a permission group,
+  a retention policy). Detail sub-views render through `SettingsPanel` like list
+  pages — they do NOT hand-roll their own shell.
+- `aside?: ReactNode` — escape hatch for the rare non-chip header widget. Keep it rare.
 - `search?: { value; onChange: (value: string) => void; placeholder?; disabled? }` —
   renders the canonical search field directly below the title. Pass `setSearchTerm`
   straight to `onChange`. Use this for a standalone search; if search shares a row
@@ -66,8 +77,6 @@ return (
   detail sub-view that needs a different heading; normal pages never pass these.
 - `scrollContainerRef?: React.Ref<HTMLDivElement>` — forwards a ref to the scroll
   region (e.g. programmatic scroll-to-bottom).
-- `contentClassName?` — layout/spacing only; reach for it rarely. Prefer the
-  default `gap-7`.
 
 ## Title + description live in navigation metadata
 
@@ -107,12 +116,11 @@ 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`** (`…/components/save-discard-actions/save-discard-actions`)
-  — the canonical dirty-gated **Discard + Save** chip pair. Renders nothing when
-  `!dirty`; otherwise a fragment so it composes beside sibling chips (a detail
-  view's Delete / Remove override, a Share chip). Props: `dirty`, `saving`,
-  `onSave`, `onDiscard`, `saveDisabled?`, `saveLabel?`, `savingLabel?`. Put it in
-  the `SettingsPanel actions` slot (top-level pages) or the detail header bar.
+- **`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
+  sibling actions (a detail view's Delete / Remove override). Config: `dirty`,
+  `saving`, `onSave`, `onDiscard`, `saveDisabled?`, `saveLabel?`, `savingLabel?`.
 - **`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
@@ -141,14 +149,18 @@ changes" modal:
   guards real `router.push` navigation + browser Back via a history sentinel);
   it already shares `UnsavedChangesModal`, so copy stays unified.
 
-## Detail sub-views (the one exception)
+## Detail sub-views
 
 A drill-down view reached from a list row (selected MCP server, workflow MCP
-server, credential set, permission group) keeps its **own** chrome because it
-needs a left-aligned back button (`<Chip leftIcon={ArrowLeft}>`), which the panel
-header (right-actions only) does not model. Leave those returns as hand-rolled
-shells; only the list/main view uses `SettingsPanel`. Gate/early-return states
-(not-entitled, loading, upgrade prompts) also stay as-is.
+server, credential set, permission group, retention policy) renders through
+`SettingsPanel` like a list page: pass `back={{ text, icon: ArrowLeft, onSelect }}`
+for the left back chip, `title` (the entity name), and the header `actions`, then
+render the body. Do NOT hand-roll a shell or header bar; a tab bar renders as the
+first body child. Gate/early-return states (not-entitled, loading, upgrade
+prompts) stay as-is.
+
+The route-based credential detail (`settings/secrets/[credentialId]`) is the lone
+exception — it lives outside `[section]` and keeps its own `CredentialDetailLayout`.
 
 ## Audit checklist
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/layout.tsx
new file mode 100644
index 00000000000..6ab029f7f5b
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/layout.tsx
@@ -0,0 +1,18 @@
+import {
+  SettingsHeaderProvider,
+  SettingsHeaderShell,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
+
+/**
+ * Persistent chrome for the settings panel pages. The header bar, title,
+ * description, scroll region, and centered column live in the shell and stay
+ * mounted across section navigation — only the body swaps. Scoped to `[section]`
+ * so detail routes (e.g. `secrets/[credentialId]`) keep their own chrome.
+ */
+export default function SettingsSectionLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <SettingsHeaderProvider>
+      <SettingsHeaderShell>{children}</SettingsHeaderShell>
+    </SettingsHeaderProvider>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
index 7f4dcf3f1f2..b2fc4a7daa5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
@@ -129,30 +129,28 @@ export function SettingsPage({ section }: SettingsPageProps) {
 
   return (
     <SettingsSectionProvider section={effectiveSection}>
-      <div className='flex h-full flex-col'>
-        {effectiveSection === 'general' && <General />}
-        {effectiveSection === 'secrets' && <Secrets />}
-        {effectiveSection === 'credential-sets' && <CredentialSets />}
-        {effectiveSection === 'access-control' && <AccessControl />}
-        {effectiveSection === 'audit-logs' && <AuditLogs />}
-        {effectiveSection === 'apikeys' && <ApiKeys />}
-        {isBillingEnabled && effectiveSection === 'billing' && <Billing />}
-        {effectiveSection === 'teammates' && <Teammates />}
-        {isBillingEnabled && effectiveSection === 'organization' && <TeamManagement />}
-        {effectiveSection === 'sso' && <SSO />}
-        {effectiveSection === 'data-retention' && <DataRetentionSettings />}
-        {effectiveSection === 'data-drains' && <DataDrainsSettings />}
-        {effectiveSection === 'whitelabeling' && <WhitelabelingSettings />}
-        {effectiveSection === 'byok' && <BYOK />}
-        {effectiveSection === 'copilot' && <Copilot />}
-        {effectiveSection === 'mcp' && <MCP />}
-        {effectiveSection === 'custom-tools' && <CustomTools />}
-        {effectiveSection === 'workflow-mcp-servers' && <WorkflowMcpServers />}
-        {effectiveSection === 'inbox' && <Inbox />}
-        {effectiveSection === 'recently-deleted' && <RecentlyDeleted />}
-        {effectiveSection === 'admin' && <Admin />}
-        {effectiveSection === 'mothership' && <Mothership />}
-      </div>
+      {effectiveSection === 'general' && <General />}
+      {effectiveSection === 'secrets' && <Secrets />}
+      {effectiveSection === 'credential-sets' && <CredentialSets />}
+      {effectiveSection === 'access-control' && <AccessControl />}
+      {effectiveSection === 'audit-logs' && <AuditLogs />}
+      {effectiveSection === 'apikeys' && <ApiKeys />}
+      {isBillingEnabled && effectiveSection === 'billing' && <Billing />}
+      {effectiveSection === 'teammates' && <Teammates />}
+      {isBillingEnabled && effectiveSection === 'organization' && <TeamManagement />}
+      {effectiveSection === 'sso' && <SSO />}
+      {effectiveSection === 'data-retention' && <DataRetentionSettings />}
+      {effectiveSection === 'data-drains' && <DataDrainsSettings />}
+      {effectiveSection === 'whitelabeling' && <WhitelabelingSettings />}
+      {effectiveSection === 'byok' && <BYOK />}
+      {effectiveSection === 'copilot' && <Copilot />}
+      {effectiveSection === 'mcp' && <MCP />}
+      {effectiveSection === 'custom-tools' && <CustomTools />}
+      {effectiveSection === 'workflow-mcp-servers' && <WorkflowMcpServers />}
+      {effectiveSection === 'inbox' && <Inbox />}
+      {effectiveSection === 'recently-deleted' && <RecentlyDeleted />}
+      {effectiveSection === 'admin' && <Admin />}
+      {effectiveSection === 'mothership' && <Mothership />}
     </SettingsSectionProvider>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index fa68f11d028..571911f3630 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { Chip, ChipConfirmModal, Switch, Tooltip, toast } from '@sim/emcn'
+import { ChipConfirmModal, Switch, Tooltip, toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { formatDate } from '@sim/utils/formatting'
 import { Info, Plus } from 'lucide-react'
@@ -10,6 +10,7 @@ import { useSession } from '@/lib/auth/auth-client'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 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 { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import {
@@ -132,6 +133,19 @@ export function ApiKeys() {
     return formatDate(new Date(dateString))
   }
 
+  const actions: SettingsAction[] = [
+    {
+      text: 'Create API key',
+      icon: Plus,
+      variant: 'primary',
+      onSelect: () => {
+        if (createButtonDisabled) return
+        setIsCreateDialogOpen(true)
+      },
+      disabled: createButtonDisabled,
+    },
+  ]
+
   return (
     <>
       <SettingsPanel
@@ -140,19 +154,7 @@ export function ApiKeys() {
           onChange: setSearchTerm,
           placeholder: 'Search API keys...',
         }}
-        actions={
-          <Chip
-            leftIcon={Plus}
-            variant='primary'
-            onClick={() => {
-              if (createButtonDisabled) return
-              setIsCreateDialogOpen(true)
-            }}
-            disabled={createButtonDisabled}
-          >
-            Create API Key
-          </Chip>
-        }
+        actions={actions}
       >
         {isLoading ? null : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
           <SettingsEmptyState>Click "Create API Key" above to get started</SettingsEmptyState>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
index d824ffe865f..c29abab3127 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
@@ -16,6 +16,7 @@ import { createLogger } from '@sim/logger'
 import { formatDate } from '@sim/utils/formatting'
 import { Plus } from 'lucide-react'
 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 {
   type CopilotKey,
@@ -103,6 +104,19 @@ export function Copilot() {
   const showEmptyState = !hasKeys
   const showNoResults = searchTerm.trim() && filteredKeys.length === 0 && keys.length > 0
 
+  const actions: SettingsAction[] = [
+    {
+      text: 'Create API key',
+      icon: Plus,
+      variant: 'primary',
+      onSelect: () => {
+        setIsCreateDialogOpen(true)
+        setCreateError(null)
+      },
+      disabled: isLoading,
+    },
+  ]
+
   return (
     <>
       <SettingsPanel
@@ -111,19 +125,7 @@ export function Copilot() {
           onChange: setSearchTerm,
           placeholder: 'Search API keys...',
         }}
-        actions={
-          <Chip
-            leftIcon={Plus}
-            variant='primary'
-            onClick={() => {
-              setIsCreateDialogOpen(true)
-              setCreateError(null)
-            }}
-            disabled={isLoading}
-          >
-            Create API Key
-          </Chip>
-        }
+        actions={actions}
       >
         {isLoading ? null : showEmptyState ? (
           <SettingsEmptyState>Click "Create API Key" above to get started</SettingsEmptyState>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
index ecc76dc6198..d6a07ce04bf 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
@@ -33,6 +33,7 @@ import { getUserColor } from '@/lib/workspaces/colors'
 import { getUserRole } from '@/lib/workspaces/organization'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 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 { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import {
@@ -420,186 +421,180 @@ export function CredentialSets() {
     const totalCount = activeMembers.length + pendingInvitations.length
 
     return (
-      <div className='flex h-full flex-col bg-[var(--bg)]'>
-        <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-          <Chip leftIcon={ArrowLeft} onClick={handleBackToList}>
-            Sim Mailer
-          </Chip>
-          <div />
-        </div>
-
-        <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
-          <div className='mx-auto flex max-w-[48rem] flex-col gap-7 pt-4 pb-6'>
-            <SettingsSection label='Details'>
-              <div className='flex items-center gap-4.5'>
-                <div className='flex items-center gap-2'>
-                  <span className='font-medium text-[var(--text-primary)] text-sm'>Group Name</span>
-                  <span className='text-[var(--text-secondary)] text-sm'>{viewingSet.name}</span>
-                </div>
-                <div className='h-4 w-px bg-[var(--border)]' />
-                <div className='flex items-center gap-2'>
-                  <span className='font-medium text-[var(--text-primary)] text-sm'>Provider</span>
-                  <div className='flex items-center gap-1.5'>
-                    {getProviderIcon(viewingSet.providerId)}
-                    <span className='text-[var(--text-secondary)] text-sm'>
-                      {getProviderDisplayName(viewingSet.providerId as PollingProvider)}
-                    </span>
-                  </div>
-                </div>
+      <SettingsPanel
+        back={{ text: 'Email polling', icon: ArrowLeft, onSelect: handleBackToList }}
+        title={viewingSet.name}
+      >
+        <div className='flex flex-col gap-7'>
+          <SettingsSection label='Details'>
+            <div className='flex items-center gap-4.5'>
+              <div className='flex items-center gap-2'>
+                <span className='font-medium text-[var(--text-primary)] text-sm'>Group Name</span>
+                <span className='text-[var(--text-secondary)] text-sm'>{viewingSet.name}</span>
               </div>
-            </SettingsSection>
-
-            <SettingsSection label='Invite'>
-              <div className='flex flex-col gap-1'>
-                <div className='flex items-center gap-2'>
-                  <TagInput
-                    items={emailItems}
-                    onAdd={(value) => addEmail(value)}
-                    onRemove={removeEmailItem}
-                    placeholder='Enter email addresses'
-                    placeholderWithTags='Add another email'
-                    disabled={createInvitation.isPending}
-                    fileInputOptions={fileInputOptions}
-                    className='flex-1'
-                  />
-                  <Chip
-                    onClick={handleInviteMembers}
-                    disabled={createInvitation.isPending || validEmails.length === 0}
-                  >
-                    {createInvitation.isPending ? 'Sending...' : 'Invite'}
-                  </Chip>
+              <div className='h-4 w-px bg-[var(--border)]' />
+              <div className='flex items-center gap-2'>
+                <span className='font-medium text-[var(--text-primary)] text-sm'>Provider</span>
+                <div className='flex items-center gap-1.5'>
+                  {getProviderIcon(viewingSet.providerId)}
+                  <span className='text-[var(--text-secondary)] text-sm'>
+                    {getProviderDisplayName(viewingSet.providerId as PollingProvider)}
+                  </span>
                 </div>
-                {emailError && <p className='text-[var(--text-error)] text-small'>{emailError}</p>}
               </div>
-            </SettingsSection>
-
-            <SettingsSection label='Members'>
-              {membersLoading || pendingInvitationsLoading ? null : totalCount === 0 ? (
-                <p className='text-[var(--text-muted)] text-sm'>
-                  No members yet. Send invitations above.
-                </p>
-              ) : (
-                <div className='flex flex-col gap-4.5'>
-                  {activeMembers.map((member) => {
-                    const name = member.userName || 'Unknown'
-                    const avatarInitial = name.charAt(0).toUpperCase()
-
-                    return (
-                      <div key={member.id} className='flex items-center justify-between'>
-                        <div className='flex flex-1 items-center gap-3'>
-                          <Avatar size='md'>
-                            {member.userImage && <AvatarImage src={member.userImage} alt={name} />}
-                            <AvatarFallback
-                              style={{
-                                background: getUserColor(member.userId || member.userEmail || ''),
-                              }}
-                              className='border-0 text-white'
-                            >
-                              {avatarInitial}
-                            </AvatarFallback>
-                          </Avatar>
-
-                          <div className='min-w-0'>
-                            <div className='flex items-center gap-2'>
-                              <span className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
-                                {name}
-                              </span>
-                              {member.credentials.length === 0 && (
-                                <Badge variant='red' size='sm'>
-                                  Disconnected
-                                </Badge>
-                              )}
-                            </div>
-                            <div className='truncate text-[var(--text-muted)] text-small'>
-                              {member.userEmail}
-                            </div>
+            </div>
+          </SettingsSection>
+
+          <SettingsSection label='Invite'>
+            <div className='flex flex-col gap-1'>
+              <div className='flex items-center gap-2'>
+                <TagInput
+                  items={emailItems}
+                  onAdd={(value) => addEmail(value)}
+                  onRemove={removeEmailItem}
+                  placeholder='Enter email addresses'
+                  placeholderWithTags='Add another email'
+                  disabled={createInvitation.isPending}
+                  fileInputOptions={fileInputOptions}
+                  className='flex-1'
+                />
+                <Chip
+                  onClick={handleInviteMembers}
+                  disabled={createInvitation.isPending || validEmails.length === 0}
+                >
+                  {createInvitation.isPending ? 'Sending...' : 'Invite'}
+                </Chip>
+              </div>
+              {emailError && <p className='text-[var(--text-error)] text-small'>{emailError}</p>}
+            </div>
+          </SettingsSection>
+
+          <SettingsSection label='Members'>
+            {membersLoading || pendingInvitationsLoading ? null : totalCount === 0 ? (
+              <p className='text-[var(--text-muted)] text-sm'>
+                No members yet. Send invitations above.
+              </p>
+            ) : (
+              <div className='flex flex-col gap-4.5'>
+                {activeMembers.map((member) => {
+                  const name = member.userName || 'Unknown'
+                  const avatarInitial = name.charAt(0).toUpperCase()
+
+                  return (
+                    <div key={member.id} className='flex items-center justify-between'>
+                      <div className='flex flex-1 items-center gap-3'>
+                        <Avatar size='md'>
+                          {member.userImage && <AvatarImage src={member.userImage} alt={name} />}
+                          <AvatarFallback
+                            style={{
+                              background: getUserColor(member.userId || member.userEmail || ''),
+                            }}
+                            className='border-0 text-white'
+                          >
+                            {avatarInitial}
+                          </AvatarFallback>
+                        </Avatar>
+
+                        <div className='min-w-0'>
+                          <div className='flex items-center gap-2'>
+                            <span className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                              {name}
+                            </span>
+                            {member.credentials.length === 0 && (
+                              <Badge variant='red' size='sm'>
+                                Disconnected
+                              </Badge>
+                            )}
+                          </div>
+                          <div className='truncate text-[var(--text-muted)] text-small'>
+                            {member.userEmail}
                           </div>
                         </div>
+                      </div>
 
-                        <div className='ml-4 flex items-center gap-1'>
-                          <RowActionsMenu
-                            label='Member actions'
-                            actions={[
-                              {
-                                label: 'Remove',
-                                destructive: true,
-                                disabled: removeMember.isPending,
-                                onSelect: () => handleRemoveMember(member.id),
-                              },
-                            ]}
-                          />
-                        </div>
+                      <div className='ml-4 flex items-center gap-1'>
+                        <RowActionsMenu
+                          label='Member actions'
+                          actions={[
+                            {
+                              label: 'Remove',
+                              destructive: true,
+                              disabled: removeMember.isPending,
+                              onSelect: () => handleRemoveMember(member.id),
+                            },
+                          ]}
+                        />
                       </div>
-                    )
-                  })}
-
-                  {pendingInvitations.map((invitation) => {
-                    const email = invitation.email || 'Unknown'
-                    const emailPrefix = email.split('@')[0]
-                    const avatarInitial = emailPrefix.charAt(0).toUpperCase()
-
-                    return (
-                      <div key={invitation.id} className='flex items-center justify-between'>
-                        <div className='flex flex-1 items-center gap-3'>
-                          <Avatar size='md'>
-                            <AvatarFallback
-                              style={{ background: getUserColor(email) }}
-                              className='border-0 text-white'
-                            >
-                              {avatarInitial}
-                            </AvatarFallback>
-                          </Avatar>
-
-                          <div className='min-w-0'>
-                            <div className='flex items-center gap-2'>
-                              <span className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
-                                {emailPrefix}
-                              </span>
-                              <Badge variant='gray-secondary' size='sm'>
-                                Pending
-                              </Badge>
-                            </div>
-                            <div className='truncate text-[var(--text-muted)] text-small'>
-                              {email}
-                            </div>
+                    </div>
+                  )
+                })}
+
+                {pendingInvitations.map((invitation) => {
+                  const email = invitation.email || 'Unknown'
+                  const emailPrefix = email.split('@')[0]
+                  const avatarInitial = emailPrefix.charAt(0).toUpperCase()
+
+                  return (
+                    <div key={invitation.id} className='flex items-center justify-between'>
+                      <div className='flex flex-1 items-center gap-3'>
+                        <Avatar size='md'>
+                          <AvatarFallback
+                            style={{ background: getUserColor(email) }}
+                            className='border-0 text-white'
+                          >
+                            {avatarInitial}
+                          </AvatarFallback>
+                        </Avatar>
+
+                        <div className='min-w-0'>
+                          <div className='flex items-center gap-2'>
+                            <span className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                              {emailPrefix}
+                            </span>
+                            <Badge variant='gray-secondary' size='sm'>
+                              Pending
+                            </Badge>
+                          </div>
+                          <div className='truncate text-[var(--text-muted)] text-small'>
+                            {email}
                           </div>
                         </div>
+                      </div>
 
-                        <div className='ml-4 flex items-center gap-1'>
-                          <RowActionsMenu
-                            label='Invitation actions'
-                            actions={[
-                              {
-                                label: resendingInvitations.has(invitation.id)
-                                  ? 'Sending...'
-                                  : resendCooldowns[invitation.id]
-                                    ? `Resend (${resendCooldowns[invitation.id]}s)`
-                                    : 'Resend',
-                                disabled:
-                                  resendingInvitations.has(invitation.id) ||
-                                  (resendCooldowns[invitation.id] ?? 0) > 0,
-                                onSelect: () => handleResendInvitation(invitation.id, email),
-                              },
-                              {
-                                label: cancellingInvitations.has(invitation.id)
-                                  ? 'Cancelling...'
-                                  : 'Cancel',
-                                destructive: true,
-                                disabled: cancellingInvitations.has(invitation.id),
-                                onSelect: () => handleCancelInvitation(invitation.id),
-                              },
-                            ]}
-                          />
-                        </div>
+                      <div className='ml-4 flex items-center gap-1'>
+                        <RowActionsMenu
+                          label='Invitation actions'
+                          actions={[
+                            {
+                              label: resendingInvitations.has(invitation.id)
+                                ? 'Sending...'
+                                : resendCooldowns[invitation.id]
+                                  ? `Resend (${resendCooldowns[invitation.id]}s)`
+                                  : 'Resend',
+                              disabled:
+                                resendingInvitations.has(invitation.id) ||
+                                (resendCooldowns[invitation.id] ?? 0) > 0,
+                              onSelect: () => handleResendInvitation(invitation.id, email),
+                            },
+                            {
+                              label: cancellingInvitations.has(invitation.id)
+                                ? 'Cancelling...'
+                                : 'Cancel',
+                              destructive: true,
+                              disabled: cancellingInvitations.has(invitation.id),
+                              onSelect: () => handleCancelInvitation(invitation.id),
+                            },
+                          ]}
+                        />
                       </div>
-                    )
-                  })}
-                </div>
-              )}
-            </SettingsSection>
-          </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </SettingsSection>
         </div>
-      </div>
+      </SettingsPanel>
     )
   }
 
@@ -612,11 +607,16 @@ export function CredentialSets() {
           placeholder: 'Search polling groups...',
         }}
         actions={
-          canManageCredentialSets && (
-            <Chip leftIcon={Plus} variant='primary' onClick={() => setShowCreateModal(true)}>
-              Create Group
-            </Chip>
-          )
+          canManageCredentialSets
+            ? ([
+                {
+                  text: 'Create group',
+                  icon: Plus,
+                  variant: 'primary',
+                  onSelect: () => setShowCreateModal(true),
+                },
+              ] satisfies SettingsAction[])
+            : undefined
         }
       >
         <div className='relative'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
index c81fd6a8992..3d683fd3dfe 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
@@ -1,13 +1,14 @@
 'use client'
 
 import { useState } from 'react'
-import { Chip, ChipConfirmModal } from '@sim/emcn'
+import { ChipConfirmModal } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 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 { CustomToolModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal'
 import { useCustomTools, useDeleteCustomTool } from '@/hooks/queries/custom-tools'
@@ -86,6 +87,16 @@ export function CustomTools() {
   const showEmptyState = !hasTools && !showAddForm && !editingTool
   const showNoResults = searchTerm.trim() && filteredTools.length === 0 && tools.length > 0
 
+  const actions: SettingsAction[] = [
+    {
+      text: 'Add tool',
+      icon: Plus,
+      variant: 'primary',
+      onSelect: () => setShowAddForm(true),
+      disabled: isLoading,
+    },
+  ]
+
   return (
     <>
       <SettingsPanel
@@ -95,16 +106,7 @@ export function CustomTools() {
           placeholder: 'Search tools...',
           disabled: isLoading,
         }}
-        actions={
-          <Chip
-            leftIcon={Plus}
-            variant='primary'
-            onClick={() => setShowAddForm(true)}
-            disabled={isLoading}
-          >
-            Add Tool
-          </Chip>
-        }
+        actions={actions}
       >
         {error ? (
           <div className='flex h-full flex-col items-center justify-center gap-2'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
index cb66db4945f..4d38140a26b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from 'react'
 import {
   Button,
-  Chip,
   ChipCombobox,
   ChipModal,
   ChipModalBody,
@@ -29,6 +28,7 @@ import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { isHosted } from '@/lib/core/config/env-flags'
 import { getBrowserTimezone, getTimezoneOptions } from '@/lib/core/utils/timezone'
 import { getBaseUrl } from '@/lib/core/utils/urls'
+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 { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/settings/hooks/use-profile-picture-upload'
@@ -269,25 +269,26 @@ export function General() {
     return null
   }
 
+  const actions: SettingsAction[] = [
+    ...(isHosted
+      ? [
+          {
+            text: 'Home page',
+            onSelect: () => window.open('/?home', '_blank', 'noopener,noreferrer'),
+          },
+        ]
+      : []),
+    ...(!isAuthDisabled
+      ? [
+          { text: 'Sign out', onSelect: handleSignOut },
+          { text: 'Reset password', onSelect: () => setShowResetPasswordModal(true) },
+        ]
+      : []),
+  ]
+
   return (
     <>
-      <SettingsPanel
-        actions={
-          <>
-            {isHosted && (
-              <Chip onClick={() => window.open('/?home', '_blank', 'noopener,noreferrer')}>
-                Home Page
-              </Chip>
-            )}
-            {!isAuthDisabled && (
-              <>
-                <Chip onClick={handleSignOut}>Sign out</Chip>
-                <Chip onClick={() => setShowResetPasswordModal(true)}>Reset password</Chip>
-              </>
-            )}
-          </>
-        }
-      >
+      <SettingsPanel actions={actions}>
         <SettingsSection label='Profile'>
           <div className='flex flex-col gap-3'>
             <div className='flex items-center gap-3'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
index bd6049de24b..358a2f0bcb5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -23,6 +23,7 @@ import {
 } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 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 { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useMcpOauthPopup } from '@/hooks/mcp/use-mcp-oauth-popup'
@@ -381,202 +382,194 @@ export function MCP() {
           ? refreshedWorkflowsUpdated
             ? `Synced (${refreshedWorkflowsUpdated} workflow${refreshedWorkflowsUpdated === 1 ? '' : 's'})`
             : 'Refreshed'
-          : 'Refresh Tools'
+          : 'Refresh tools'
 
     return (
-      <div className='flex h-full flex-col bg-[var(--bg)]'>
-        <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-          <Chip leftIcon={ArrowLeft} onClick={handleBackToList}>
-            MCP Tools
-          </Chip>
-          <div className='flex items-center'>
-            <Chip
-              onClick={() => handleRefreshServer(server.id)}
-              disabled={refreshingServerId === server.id || refreshedServerId === server.id}
-            >
-              {refreshLabel}
-            </Chip>
-            <Chip onClick={() => setEditingServerId(server.id)}>Edit</Chip>
-          </div>
-        </div>
+      <SettingsPanel
+        back={{ text: 'MCP Tools', icon: ArrowLeft, onSelect: handleBackToList }}
+        title={server.name || 'Unnamed Server'}
+        actions={
+          [
+            {
+              text: refreshLabel,
+              onSelect: () => handleRefreshServer(server.id),
+              disabled: refreshingServerId === server.id || refreshedServerId === server.id,
+            },
+            {
+              text: 'Edit',
+              onSelect: () => setEditingServerId(server.id),
+            },
+          ] satisfies SettingsAction[]
+        }
+      >
+        <SettingsSection label='Server'>
+          <div className='flex flex-col gap-4.5'>
+            <div className='flex flex-col gap-2'>
+              <span className='text-[12px] text-[var(--text-muted)]'>Server Name</span>
+              <p className='text-[14px] text-[var(--text-body)]'>
+                {server.name || 'Unnamed Server'}
+              </p>
+            </div>
+
+            <div className='flex flex-col gap-2'>
+              <span className='text-[12px] text-[var(--text-muted)]'>Transport</span>
+              <p className='text-[14px] text-[var(--text-body)]'>{transportLabel}</p>
+            </div>
+
+            {server.url && (
+              <div className='flex flex-col gap-2'>
+                <span className='text-[12px] text-[var(--text-muted)]'>URL</span>
+                <p className='break-all text-[14px] text-[var(--text-body)]'>{server.url}</p>
+              </div>
+            )}
 
-        <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
-          <div className='mx-auto flex max-w-[48rem] flex-col gap-7 pt-4 pb-6'>
-            <SettingsSection label='Server'>
-              <div className='flex flex-col gap-4.5'>
-                <div className='flex flex-col gap-2'>
-                  <span className='text-[12px] text-[var(--text-muted)]'>Server Name</span>
-                  <p className='text-[14px] text-[var(--text-body)]'>
-                    {server.name || 'Unnamed Server'}
-                  </p>
-                </div>
+            {server.connectionStatus === 'error' && (
+              <div className='flex flex-col gap-2'>
+                <span className='text-[12px] text-[var(--text-muted)]'>Status</span>
+                <p className='text-[14px] text-[var(--text-error)]'>
+                  {server.lastError || 'Unable to connect'}
+                </p>
+              </div>
+            )}
 
-                <div className='flex flex-col gap-2'>
-                  <span className='text-[12px] text-[var(--text-muted)]'>Transport</span>
-                  <p className='text-[14px] text-[var(--text-body)]'>{transportLabel}</p>
+            {server.authType === 'oauth' && server.connectionStatus !== 'connected' && (
+              <div className='flex flex-col gap-2'>
+                <span className='text-[12px] text-[var(--text-muted)]'>Authentication</span>
+                <div>
+                  <Chip
+                    variant='primary'
+                    disabled={connectingOauthServers.has(server.id)}
+                    onClick={async () => {
+                      await startOauthForServer(server.id)
+                    }}
+                  >
+                    {connectingOauthServers.has(server.id) ? 'Connecting…' : 'Connect with OAuth'}
+                  </Chip>
                 </div>
-
-                {server.url && (
-                  <div className='flex flex-col gap-2'>
-                    <span className='text-[12px] text-[var(--text-muted)]'>URL</span>
-                    <p className='break-all text-[14px] text-[var(--text-body)]'>{server.url}</p>
-                  </div>
-                )}
-
-                {server.connectionStatus === 'error' && (
-                  <div className='flex flex-col gap-2'>
-                    <span className='text-[12px] text-[var(--text-muted)]'>Status</span>
-                    <p className='text-[14px] text-[var(--text-error)]'>
-                      {server.lastError || 'Unable to connect'}
-                    </p>
-                  </div>
-                )}
-
-                {server.authType === 'oauth' && server.connectionStatus !== 'connected' && (
-                  <div className='flex flex-col gap-2'>
-                    <span className='text-[12px] text-[var(--text-muted)]'>Authentication</span>
-                    <div>
-                      <Chip
-                        variant='primary'
-                        disabled={connectingOauthServers.has(server.id)}
-                        onClick={async () => {
-                          await startOauthForServer(server.id)
-                        }}
-                      >
-                        {connectingOauthServers.has(server.id)
-                          ? 'Connecting…'
-                          : 'Connect with OAuth'}
-                      </Chip>
-                    </div>
-                  </div>
-                )}
               </div>
-            </SettingsSection>
-
-            <SettingsSection label={`Tools (${tools.length})`}>
-              {tools.length === 0 ? (
-                <p className='text-[var(--text-muted)] text-sm'>No tools available</p>
-              ) : (
-                <div className='flex flex-col gap-2'>
-                  {tools.map((tool) => {
-                    const issues = getStoredToolIssues(server.id, tool.name)
-                    const affectedWorkflows = issues.map((i) => i.workflowName)
-                    const isExpanded = expandedTools.has(tool.name)
-                    const hasParams =
-                      tool.inputSchema?.properties &&
-                      Object.keys(tool.inputSchema.properties).length > 0
-                    const requiredParams = tool.inputSchema?.required || []
-
-                    return (
-                      <div
-                        key={tool.name}
-                        className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-3)]'
-                      >
-                        <Button
-                          type='button'
-                          variant='ghost'
-                          onClick={() => hasParams && toggleToolExpanded(tool.name)}
+            )}
+          </div>
+        </SettingsSection>
+
+        <SettingsSection label={`Tools (${tools.length})`}>
+          {tools.length === 0 ? (
+            <p className='text-[var(--text-muted)] text-sm'>No tools available</p>
+          ) : (
+            <div className='flex flex-col gap-2'>
+              {tools.map((tool) => {
+                const issues = getStoredToolIssues(server.id, tool.name)
+                const affectedWorkflows = issues.map((i) => i.workflowName)
+                const isExpanded = expandedTools.has(tool.name)
+                const hasParams =
+                  tool.inputSchema?.properties &&
+                  Object.keys(tool.inputSchema.properties).length > 0
+                const requiredParams = tool.inputSchema?.required || []
+
+                return (
+                  <div
+                    key={tool.name}
+                    className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-3)]'
+                  >
+                    <Button
+                      type='button'
+                      variant='ghost'
+                      onClick={() => hasParams && toggleToolExpanded(tool.name)}
+                      className={cn(
+                        'flex h-auto w-full items-start justify-between rounded-none px-2.5 py-2 text-left text-sm',
+                        hasParams && 'cursor-pointer hover-hover:bg-[var(--surface-4)]'
+                      )}
+                      disabled={!hasParams}
+                    >
+                      <div className='flex-1'>
+                        <div className='flex h-[16px] items-center gap-1.5'>
+                          <p className='font-medium text-[var(--text-primary)] text-sm leading-none'>
+                            {tool.name}
+                          </p>
+                          {issues.length > 0 && (
+                            <Tooltip.Root>
+                              <Tooltip.Trigger asChild>
+                                <div className='flex items-center'>
+                                  <Badge variant={getIssueBadgeVariant(issues[0].issue)} size='sm'>
+                                    {getIssueBadgeLabel(issues[0].issue)}
+                                  </Badge>
+                                </div>
+                              </Tooltip.Trigger>
+                              <Tooltip.Content>
+                                Update in: {affectedWorkflows.join(', ')}
+                              </Tooltip.Content>
+                            </Tooltip.Root>
+                          )}
+                        </div>
+                        {tool.description && (
+                          <p className='mt-1 text-[var(--text-tertiary)] text-sm'>
+                            {tool.description}
+                          </p>
+                        )}
+                      </div>
+                      {hasParams && (
+                        <ChevronDown
                           className={cn(
-                            'flex h-auto w-full items-start justify-between rounded-none px-2.5 py-2 text-left text-sm',
-                            hasParams && 'cursor-pointer hover-hover:bg-[var(--surface-4)]'
+                            'mt-0.5 size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-200',
+                            isExpanded && 'rotate-180'
                           )}
-                          disabled={!hasParams}
-                        >
-                          <div className='flex-1'>
-                            <div className='flex h-[16px] items-center gap-1.5'>
-                              <p className='font-medium text-[var(--text-primary)] text-sm leading-none'>
-                                {tool.name}
-                              </p>
-                              {issues.length > 0 && (
-                                <Tooltip.Root>
-                                  <Tooltip.Trigger asChild>
-                                    <div className='flex items-center'>
-                                      <Badge
-                                        variant={getIssueBadgeVariant(issues[0].issue)}
-                                        size='sm'
-                                      >
-                                        {getIssueBadgeLabel(issues[0].issue)}
+                        />
+                      )}
+                    </Button>
+
+                    {isExpanded && hasParams && (
+                      <div className='border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 py-2'>
+                        <p className='mb-1.5 font-medium text-[var(--text-muted)] text-xs uppercase tracking-wide'>
+                          Parameters
+                        </p>
+                        <div className='flex flex-col gap-1.5'>
+                          {Object.entries(tool.inputSchema!.properties!).map(
+                            ([paramName, param]) => {
+                              const isRequired = requiredParams.includes(paramName)
+                              const paramType =
+                                typeof param === 'object' && param !== null
+                                  ? (param as { type?: string }).type || 'any'
+                                  : 'any'
+                              const paramDesc =
+                                typeof param === 'object' && param !== null
+                                  ? (param as { description?: string }).description
+                                  : undefined
+
+                              return (
+                                <div
+                                  key={paramName}
+                                  className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-3)] px-2 py-1.5'
+                                >
+                                  <div className='flex items-center gap-1.5'>
+                                    <span className='font-medium text-[var(--text-primary)] text-small'>
+                                      {paramName}
+                                    </span>
+                                    <Badge variant='outline' size='sm'>
+                                      {paramType}
+                                    </Badge>
+                                    {isRequired && (
+                                      <Badge variant='default' size='sm'>
+                                        required
                                       </Badge>
-                                    </div>
-                                  </Tooltip.Trigger>
-                                  <Tooltip.Content>
-                                    Update in: {affectedWorkflows.join(', ')}
-                                  </Tooltip.Content>
-                                </Tooltip.Root>
-                              )}
-                            </div>
-                            {tool.description && (
-                              <p className='mt-1 text-[var(--text-tertiary)] text-sm'>
-                                {tool.description}
-                              </p>
-                            )}
-                          </div>
-                          {hasParams && (
-                            <ChevronDown
-                              className={cn(
-                                'mt-0.5 size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-200',
-                                isExpanded && 'rotate-180'
-                              )}
-                            />
+                                    )}
+                                  </div>
+                                  {paramDesc && (
+                                    <p className='mt-[3px] text-[var(--text-tertiary)] text-xs leading-relaxed'>
+                                      {paramDesc}
+                                    </p>
+                                  )}
+                                </div>
+                              )
+                            }
                           )}
-                        </Button>
-
-                        {isExpanded && hasParams && (
-                          <div className='border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 py-2'>
-                            <p className='mb-1.5 font-medium text-[var(--text-muted)] text-xs uppercase tracking-wide'>
-                              Parameters
-                            </p>
-                            <div className='flex flex-col gap-1.5'>
-                              {Object.entries(tool.inputSchema!.properties!).map(
-                                ([paramName, param]) => {
-                                  const isRequired = requiredParams.includes(paramName)
-                                  const paramType =
-                                    typeof param === 'object' && param !== null
-                                      ? (param as { type?: string }).type || 'any'
-                                      : 'any'
-                                  const paramDesc =
-                                    typeof param === 'object' && param !== null
-                                      ? (param as { description?: string }).description
-                                      : undefined
-
-                                  return (
-                                    <div
-                                      key={paramName}
-                                      className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-3)] px-2 py-1.5'
-                                    >
-                                      <div className='flex items-center gap-1.5'>
-                                        <span className='font-medium text-[var(--text-primary)] text-small'>
-                                          {paramName}
-                                        </span>
-                                        <Badge variant='outline' size='sm'>
-                                          {paramType}
-                                        </Badge>
-                                        {isRequired && (
-                                          <Badge variant='default' size='sm'>
-                                            required
-                                          </Badge>
-                                        )}
-                                      </div>
-                                      {paramDesc && (
-                                        <p className='mt-[3px] text-[var(--text-tertiary)] text-xs leading-relaxed'>
-                                          {paramDesc}
-                                        </p>
-                                      )}
-                                    </div>
-                                  )
-                                }
-                              )}
-                            </div>
-                          </div>
-                        )}
+                        </div>
                       </div>
-                    )
-                  })}
-                </div>
-              )}
-            </SettingsSection>
-          </div>
-        </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </SettingsSection>
 
         <McpServerFormModal
           open={editingServerId !== null}
@@ -600,7 +593,7 @@ export function MCP() {
           availableEnvVars={availableEnvVars}
           allowedMcpDomains={allowedMcpDomains}
         />
-      </div>
+      </SettingsPanel>
     )
   }
 
@@ -613,14 +606,15 @@ export function MCP() {
           placeholder: 'Search MCPs...',
         }}
         actions={
-          <Chip
-            leftIcon={Plus}
-            variant='primary'
-            onClick={() => setShowAddModal(true)}
-            disabled={serversLoading}
-          >
-            Add Server
-          </Chip>
+          [
+            {
+              text: 'Add server',
+              icon: Plus,
+              variant: 'primary',
+              onSelect: () => setShowAddModal(true),
+              disabled: serversLoading,
+            },
+          ] satisfies SettingsAction[]
         }
       >
         {error ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions.ts b/apps/sim/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions.ts
new file mode 100644
index 00000000000..2afdf280f2c
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions.ts
@@ -0,0 +1,33 @@
+import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
+
+interface SaveDiscardActionsConfig {
+  dirty: boolean
+  saving: boolean
+  onSave: () => void
+  onDiscard: () => void
+  saveDisabled?: boolean
+  savingLabel?: string
+  saveLabel?: string
+}
+
+/** The dirty-gated Discard + Save action pair for settings surfaces — empty when not dirty. */
+export function saveDiscardActions({
+  dirty,
+  saving,
+  onSave,
+  onDiscard,
+  saveDisabled = false,
+  savingLabel = 'Saving...',
+  saveLabel = 'Save',
+}: SaveDiscardActionsConfig): SettingsAction[] {
+  if (!dirty) return []
+  return [
+    { text: 'Discard', onSelect: onDiscard, disabled: saving },
+    {
+      text: saving ? savingLabel : saveLabel,
+      variant: 'primary',
+      onSelect: onSave,
+      disabled: saving || saveDisabled,
+    },
+  ]
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions.tsx
deleted file mode 100644
index e65657017f4..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Chip } from '@sim/emcn'
-
-interface SaveDiscardActionsProps {
-  /** When false, renders nothing. */
-  dirty: boolean
-  /** A save is in flight — disables both chips and shows `savingLabel` on Save. */
-  saving: boolean
-  onSave: () => void
-  onDiscard: () => void
-  /** Disables Save independently of `saving` (e.g. validation errors, empty required field). */
-  saveDisabled?: boolean
-  savingLabel?: string
-  saveLabel?: string
-}
-
-/**
- * The canonical dirty-gated Discard + Save chip pair for settings surfaces.
- * Renders nothing when not `dirty`; otherwise a fragment (no wrapper) so it
- * composes beside sibling chips in a `SettingsPanel` actions slot or a detail
- * header bar (e.g. group-detail's Delete, data-retention's Remove override).
- */
-export function SaveDiscardActions({
-  dirty,
-  saving,
-  onSave,
-  onDiscard,
-  saveDisabled = false,
-  savingLabel = 'Saving...',
-  saveLabel = 'Save',
-}: SaveDiscardActionsProps) {
-  if (!dirty) return null
-  return (
-    <>
-      <Chip onClick={onDiscard} disabled={saving}>
-        Discard
-      </Chip>
-      <Chip variant='primary' onClick={onSave} disabled={saving || saveDisabled}>
-        {saving ? savingLabel : saveLabel}
-      </Chip>
-    </>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
index 13122205697..cbd687df538 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
@@ -17,6 +17,7 @@ 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 { isValidEnvVarName } from '@/executor/constants'
 import { useWorkspaceCredentials, type WorkspaceCredential } from '@/hooks/queries/credentials'
@@ -942,32 +943,42 @@ export function SecretsManager() {
           onChange: setSearchTerm,
           placeholder: 'Search secrets...',
         }}
-        actions={
-          <>
-            {hasChanges && (
-              <Chip onClick={handleCancel} disabled={isListSaving}>
-                Discard
-              </Chip>
-            )}
-            {hasConflicts || hasInvalidKeys ? (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <div className='inline-flex'>
-                    <Chip disabled>Save</Chip>
-                  </div>
-                </Tooltip.Trigger>
-                {hasConflicts ? (
-                  <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>
-                ) : (
-                  <Tooltip.Content>Fix invalid variable names before saving</Tooltip.Content>
-                )}
-              </Tooltip.Root>
-            ) : (
-              <Chip onClick={handleSave} disabled={isLoading || !hasChanges || isListSaving}>
-                {isListSaving ? 'Saving...' : 'Save'}
-              </Chip>
-            )}
-          </>
+        actions={[
+          ...(hasChanges
+            ? [
+                {
+                  text: 'Discard',
+                  onSelect: handleCancel,
+                  disabled: isListSaving,
+                } satisfies SettingsAction,
+              ]
+            : []),
+          ...(hasConflicts || hasInvalidKeys
+            ? []
+            : [
+                {
+                  text: isListSaving ? 'Saving...' : 'Save',
+                  variant: 'primary',
+                  onSelect: handleSave,
+                  disabled: isLoading || !hasChanges || isListSaving,
+                } satisfies SettingsAction,
+              ]),
+        ]}
+        aside={
+          hasConflicts || hasInvalidKeys ? (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <div className='inline-flex'>
+                  <Chip disabled>Save</Chip>
+                </div>
+              </Tooltip.Trigger>
+              {hasConflicts ? (
+                <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>
+              ) : (
+                <Tooltip.Content>Fix invalid variable names before saving</Tooltip.Content>
+              )}
+            </Tooltip.Root>
+          ) : undefined
         }
       >
         {!isLoading && (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
new file mode 100644
index 00000000000..5d79de25809
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
@@ -0,0 +1,184 @@
+'use client'
+
+import {
+  type ComponentType,
+  createContext,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { Chip, ChipInput, ChipLink, Search } from '@sim/emcn'
+
+/** The strict contract for a settings header action — rendered as a {@link Chip}, data only. */
+export interface SettingsAction {
+  text: string
+  icon?: ComponentType<{ className?: string }>
+  variant?: 'primary' | 'destructive'
+  active?: boolean
+  onSelect: () => void
+  disabled?: boolean
+}
+
+export interface SettingsHeaderSearch {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+}
+
+/** Left-aligned back chip for a detail sub-view, returning to the section's list. */
+export interface SettingsBackAction {
+  text: string
+  icon?: ComponentType<{ className?: string }>
+  onSelect: () => void
+}
+
+export interface SettingsHeaderConfig {
+  title?: string
+  description?: string
+  docsLink?: string
+  back?: SettingsBackAction
+  actions?: SettingsAction[]
+  search?: SettingsHeaderSearch
+  /** Forwarded to the scroll region (e.g. for programmatic scroll-to-bottom). */
+  scrollContainerRef?: Ref<HTMLDivElement>
+  /** Escape hatch for a right-aligned widget that genuinely cannot be a chip. */
+  aside?: ReactNode
+}
+
+const EMPTY_CONFIG: SettingsHeaderConfig = {}
+
+const RegisterContext = createContext<((config: SettingsHeaderConfig) => void) | null>(null)
+
+interface ReadContextValue {
+  configRef: { current: SettingsHeaderConfig }
+  signature: string
+}
+
+const ReadContext = createContext<ReadContextValue | null>(null)
+
+/** Visible/structural fields only — callbacks stay in the ref, so registering never loops or serves a stale handler. */
+function computeSignature(c: SettingsHeaderConfig): string {
+  return JSON.stringify({
+    t: c.title ?? '',
+    d: c.description ?? '',
+    k: c.docsLink ?? '',
+    b: c.back ? [c.back.text, c.back.icon ? 1 : 0] : null,
+    a: c.actions?.map((x) => [
+      x.text,
+      x.variant ?? '',
+      x.active ?? false,
+      x.disabled ?? false,
+      x.icon ? 1 : 0,
+    ]),
+    s: c.search ? [c.search.value, c.search.placeholder ?? '', c.search.disabled ?? false] : null,
+    aside: c.aside ? 1 : 0,
+  })
+}
+
+export function SettingsHeaderProvider({ children }: { children: ReactNode }) {
+  const configRef = useRef<SettingsHeaderConfig>(EMPTY_CONFIG)
+  const [signature, setSignature] = useState('')
+
+  const register = useCallback((config: SettingsHeaderConfig) => {
+    configRef.current = config
+    const next = computeSignature(config)
+    setSignature((prev) => (prev === next ? prev : next))
+  }, [])
+
+  const readValue = useMemo<ReadContextValue>(() => ({ configRef, signature }), [signature])
+
+  return (
+    <RegisterContext.Provider value={register}>
+      <ReadContext.Provider value={readValue}>{children}</ReadContext.Provider>
+    </RegisterContext.Provider>
+  )
+}
+
+/** Registers a section's header content into the persistent settings chrome. */
+export function useSettingsHeader(config: SettingsHeaderConfig) {
+  const register = useContext(RegisterContext)
+
+  useEffect(() => {
+    register?.(config)
+  })
+
+  useEffect(() => {
+    return () => register?.(EMPTY_CONFIG)
+  }, [register])
+}
+
+/**
+ * The single owner of settings page chrome: the header bar (back chip, Docs link,
+ * action chips, `aside`), the scroll region, and the centered column led by the
+ * title + description, then search and `{children}`.
+ */
+export function SettingsHeaderShell({ children }: { children: ReactNode }) {
+  const read = useContext(ReadContext)
+  const config = read?.configRef.current ?? EMPTY_CONFIG
+  const { title, description, docsLink, back, actions, search, aside, scrollContainerRef } = config
+
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+        {back ? (
+          <Chip leftIcon={back.icon} onClick={back.onSelect}>
+            {back.text}
+          </Chip>
+        ) : (
+          <div />
+        )}
+        <div className='flex h-[30px] items-center gap-1'>
+          {docsLink && (
+            <ChipLink href={docsLink} target='_blank' rel='noopener noreferrer'>
+              Docs
+            </ChipLink>
+          )}
+          {aside}
+          {actions?.map((action) => (
+            <Chip
+              key={action.text}
+              variant={action.variant}
+              active={action.active}
+              leftIcon={action.icon}
+              onClick={action.onSelect}
+              disabled={action.disabled}
+            >
+              {action.text}
+            </Chip>
+          ))}
+        </div>
+      </div>
+      <div
+        ref={scrollContainerRef}
+        className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'
+      >
+        <div className='mx-auto flex w-full max-w-[48rem] flex-col gap-7 pb-6'>
+          {(title || description) && (
+            <div className='flex flex-col gap-1'>
+              {title && <h1 className='font-medium text-[var(--text-body)] text-lg'>{title}</h1>}
+              {description && <p className='text-[var(--text-muted)] text-md'>{description}</p>}
+            </div>
+          )}
+          {search && (
+            <ChipInput
+              icon={Search}
+              placeholder={search.placeholder ?? 'Search...'}
+              value={search.value}
+              onChange={(event) => search.onChange(event.target.value)}
+              disabled={search.disabled}
+              autoComplete='off'
+              className='w-full'
+            />
+          )}
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx
index 19bb8a7d5dc..cc67b963690 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx
@@ -1,7 +1,12 @@
 'use client'
 
-import { createContext, type ReactNode, useContext } from 'react'
-import { ChipInput, ChipLink, cn, Search } from '@sim/emcn'
+import { createContext, type ReactNode, type Ref, useContext } from 'react'
+import {
+  type SettingsAction,
+  type SettingsBackAction,
+  type SettingsHeaderSearch,
+  useSettingsHeader,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
 import {
   getSettingsSectionMeta,
   type SettingsSection,
@@ -30,105 +35,59 @@ function useSettingsSection(): SettingsSection | null {
   return useContext(SettingsSectionContext)
 }
 
-interface SettingsPanelSearch {
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
-  disabled?: boolean
-}
-
 interface SettingsPanelProps {
   /** Body content rendered below the header in the centered content column. */
   children: ReactNode
-  /** Right-aligned controls in the fixed header bar (e.g. a Create/Invite chip). */
-  actions?: ReactNode
+  /** Strict top-right action chips — data only (`text`/`icon`/`variant`/…), never JSX. */
+  actions?: SettingsAction[]
+  /** Left-aligned back chip for a detail sub-view; omit on list/panel pages. */
+  back?: SettingsBackAction
+  /** Renders the canonical search field directly below the title. */
+  search?: SettingsHeaderSearch
   /** Overrides the nav-driven title (e.g. for a detail sub-view). */
   title?: string
   /** Overrides the nav-driven description. */
   description?: string
-  /** Overrides the nav-driven docs link (the "Docs" link rendered on the title row). */
+  /** Overrides the nav-driven docs link (the "Docs" link rendered in the header bar). */
   docsLink?: string
-  /** Extra classes for the content column (layout/spacing only, e.g. a tighter `gap-*`). */
-  contentClassName?: string
-  /** Ref forwarded to the scroll region (e.g. for programmatic scroll-to-bottom). */
-  scrollContainerRef?: React.Ref<HTMLDivElement>
-  /**
-   * Renders the canonical search field directly below the title. Omit on pages
-   * with no search, or that pair search with extra controls (render that row in
-   * `children` instead).
-   */
-  search?: SettingsPanelSearch
+  /** Escape hatch for a right-aligned widget that genuinely cannot be a chip. Rare. */
+  aside?: ReactNode
+  /** Forwarded to the scroll region (e.g. for programmatic scroll-to-bottom). */
+  scrollContainerRef?: Ref<HTMLDivElement>
 }
 
 /**
- * Standard chrome for a settings page: a fixed header bar (right-aligned
- * `actions`), a scroll region, and a centered content column led by the page
- * title + description. The title/description come from the active section's
- * navigation metadata by default, and can be overridden for sub-views.
- *
- * Pages render only their body as `children`; they no longer hand-roll the
- * shell, header bar, or title block.
+ * Registers a settings section's header content (title, description, docs link,
+ * action chips, search) into the persistent settings layout, then renders the
+ * section body. It owns **no** chrome: the header bar, scroll region, centered
+ * column, and spacing all live in the layout's `SettingsHeaderShell` and stay
+ * mounted across section navigation. Sections supply data only — the structured
+ * `actions` contract makes it impossible to inject a `<div>` or a padding change.
  */
 export function SettingsPanel({
   children,
   actions,
+  back,
+  search,
   title,
   description,
   docsLink,
-  contentClassName,
+  aside,
   scrollContainerRef,
-  search,
 }: SettingsPanelProps) {
   const section = useSettingsSection()
   const meta = section ? getSettingsSectionMeta(section) : null
-  const resolvedTitle = title ?? meta?.label
-  const resolvedDescription = description ?? meta?.description
-  const resolvedDocsLink = docsLink ?? meta?.docsLink
 
-  return (
-    <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-        <div />
-        <div className='flex h-[30px] items-center gap-1'>
-          {resolvedDocsLink && (
-            <ChipLink href={resolvedDocsLink} target='_blank' rel='noopener noreferrer'>
-              Docs
-            </ChipLink>
-          )}
-          {actions}
-        </div>
-      </div>
-      <div
-        ref={scrollContainerRef}
-        className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'
-      >
-        <div
-          className={cn('mx-auto flex w-full max-w-[48rem] flex-col gap-7 pb-6', contentClassName)}
-        >
-          {(resolvedTitle || resolvedDescription) && (
-            <div className='flex flex-col gap-1'>
-              {resolvedTitle && (
-                <h1 className='font-medium text-[var(--text-body)] text-lg'>{resolvedTitle}</h1>
-              )}
-              {resolvedDescription && (
-                <p className='text-[var(--text-muted)] text-md'>{resolvedDescription}</p>
-              )}
-            </div>
-          )}
-          {search && (
-            <ChipInput
-              icon={Search}
-              placeholder={search.placeholder ?? 'Search...'}
-              value={search.value}
-              onChange={(event) => search.onChange(event.target.value)}
-              disabled={search.disabled}
-              autoComplete='off'
-              className='w-full'
-            />
-          )}
-          {children}
-        </div>
-      </div>
-    </div>
-  )
+  useSettingsHeader({
+    title: title ?? meta?.label,
+    description: description ?? meta?.description,
+    docsLink: docsLink ?? meta?.docsLink,
+    back,
+    actions,
+    search,
+    aside,
+    scrollContainerRef,
+  })
+
+  return <>{children}</>
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
index 31d968cc279..dfdd71bb9d3 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { Chip, Plus } from '@sim/emcn'
+import { Plus } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
@@ -313,17 +313,15 @@ export function TeamManagement() {
   return (
     <>
       <SettingsPanel
-        actions={
-          <Chip
-            leftIcon={Plus}
-            variant='primary'
-            onClick={() => setInviteModalOpen(true)}
-            disabled={isInvitationsDisabled}
-            title={isInvitationsDisabled ? 'Invitations are disabled' : undefined}
-          >
-            Invite
-          </Chip>
-        }
+        actions={[
+          {
+            text: 'Invite',
+            icon: Plus,
+            variant: 'primary',
+            onSelect: () => setInviteModalOpen(true),
+            disabled: isInvitationsDisabled,
+          },
+        ]}
       >
         <TeamSeatsOverview
           subscriptionData={orgSubscription}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
index 8ffe2ef35fd..31ed6774ffa 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
@@ -170,7 +170,7 @@ export function Teammates() {
           onChange: setSearchTerm,
           placeholder: 'Search teammates...',
         }}
-        actions={
+        aside={
           <Chip
             leftIcon={Plus}
             variant='primary'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index f33b66e1b3f..4c60795aff1 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -29,8 +29,10 @@ import { Check, Clipboard, Plus, Server } from 'lucide-react'
 import { useParams, useSearchParams } from 'next/navigation'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { CreateApiKeyModal } from '@/app/workspace/[workspaceId]/settings/components/api-keys/components'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 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 { CreateWorkflowMcpServerModal } from '@/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components'
 import { useApiKeys } from '@/hooks/queries/api-keys'
@@ -48,7 +50,6 @@ import {
   type WorkflowMcpTool,
 } from '@/hooks/queries/workflow-mcp-servers'
 import { useWorkspaceSettings } from '@/hooks/queries/workspace'
-import { CreateApiKeyModal } from '../api-keys/components'
 
 const logger = createLogger('WorkflowMcpServers')
 
@@ -355,314 +356,285 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
 
   if (isLoading) {
     return (
-      <div className='flex h-full flex-col bg-[var(--bg)]'>
-        <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-          <Chip onClick={onBack} leftIcon={ArrowLeft}>
-            MCP Servers
-          </Chip>
-        </div>
-      </div>
+      <SettingsPanel back={{ text: 'MCP Servers', icon: ArrowLeft, onSelect: onBack }}>
+        {null}
+      </SettingsPanel>
     )
   }
 
   if (error || !data) {
     return (
-      <div className='flex h-full flex-col bg-[var(--bg)]'>
-        <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-          <Chip onClick={onBack} leftIcon={ArrowLeft}>
-            MCP Servers
-          </Chip>
-        </div>
+      <SettingsPanel back={{ text: 'MCP Servers', icon: ArrowLeft, onSelect: onBack }}>
         <div className='flex min-h-0 flex-1 items-center justify-center'>
           <p className='text-[var(--text-error)] text-xs leading-tight'>
             Failed to load server details
           </p>
         </div>
-      </div>
+      </SettingsPanel>
     )
   }
 
   const { server } = data
 
-  const detailHeaderJsx = (
-    <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-      <Chip onClick={onBack} leftIcon={ArrowLeft}>
-        MCP Servers
-      </Chip>
-      <div className='flex items-center'>
-        <Chip onClick={handleOpenEditServer}>Edit Server</Chip>
-        {showAddDisabledTooltip ? (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <div className='inline-flex'>
-                <Chip leftIcon={Plus} variant='primary' disabled>
-                  Add Workflows
-                </Chip>
-              </div>
-            </Tooltip.Trigger>
-            <Tooltip.Content>
-              All deployed workflows have been added to this server.
-            </Tooltip.Content>
-          </Tooltip.Root>
-        ) : (
-          <Chip
-            leftIcon={Plus}
-            variant='primary'
-            onClick={() => setShowAddWorkflow(true)}
-            disabled={!canAddWorkflow}
-          >
-            Add Workflows
+  const addWorkflowsAside = showAddDisabledTooltip ? (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <div className='inline-flex'>
+          <Chip leftIcon={Plus} variant='primary' disabled>
+            Add workflows
           </Chip>
-        )}
-      </div>
-    </div>
+        </div>
+      </Tooltip.Trigger>
+      <Tooltip.Content>All deployed workflows have been added to this server.</Tooltip.Content>
+    </Tooltip.Root>
+  ) : (
+    <Chip
+      leftIcon={Plus}
+      variant='primary'
+      onClick={() => setShowAddWorkflow(true)}
+      disabled={!canAddWorkflow}
+    >
+      Add workflows
+    </Chip>
   )
 
   return (
     <>
-      <div className='flex h-full flex-col bg-[var(--bg)]'>
-        {detailHeaderJsx}
-        <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
-          <div className='mx-auto flex max-w-[48rem] flex-col pt-4 pb-6'>
-            <div className='flex min-h-0 flex-1 flex-col'>
-              <ChipModalTabs
-                tabs={[
-                  { value: 'details', label: 'Details' },
-                  { value: 'workflows', label: 'Workflows' },
-                ]}
-                value={activeServerTab}
-                onChange={(value) => setActiveServerTab(value as 'workflows' | 'details')}
-              />
-
-              <div className='min-h-[300px] pt-4'>
-                {activeServerTab === 'workflows' && (
-                  <div className='flex flex-col gap-4.5'>
-                    <span className='font-medium text-[var(--text-primary)] text-sm'>
-                      Workflows
-                    </span>
+      <SettingsPanel
+        back={{ text: 'MCP Servers', icon: ArrowLeft, onSelect: onBack }}
+        title={server.name}
+        actions={[{ text: 'Edit server', onSelect: handleOpenEditServer }]}
+        aside={addWorkflowsAside}
+      >
+        <div className='flex min-h-0 flex-1 flex-col'>
+          <ChipModalTabs
+            tabs={[
+              { value: 'details', label: 'Details' },
+              { value: 'workflows', label: 'Workflows' },
+            ]}
+            value={activeServerTab}
+            onChange={(value) => setActiveServerTab(value as 'workflows' | 'details')}
+          />
 
-                    {tools.length === 0 ? (
-                      <p className='text-[var(--text-muted)] text-sm'>
-                        No workflows added yet. Click &quot;Add Workflow&quot; to add a deployed
-                        workflow.
-                      </p>
-                    ) : (
-                      <div className='flex flex-col gap-2'>
-                        {tools.map((tool) => (
-                          <div key={tool.id} className='flex items-center justify-between gap-3'>
-                            <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                              <span className='text-[14px] text-[var(--text-body)]'>
-                                {tool.toolName}
-                              </span>
-                              <p className='truncate text-[12px] text-[var(--text-muted)]'>
-                                {tool.toolDescription || 'No description'}
-                              </p>
-                            </div>
-                            <div className='flex flex-shrink-0 items-center gap-1'>
-                              <RowActionsMenu
-                                label='Tool actions'
-                                actions={[
-                                  { label: 'Edit', onSelect: () => setToolToView(tool) },
-                                  {
-                                    label: 'Remove',
-                                    destructive: true,
-                                    disabled: deleteToolMutation.isPending,
-                                    onSelect: () => setToolToDelete(tool),
-                                  },
-                                ]}
-                              />
-                            </div>
-                          </div>
-                        ))}
+          <div className='min-h-[300px] pt-4'>
+            {activeServerTab === 'workflows' && (
+              <div className='flex flex-col gap-4.5'>
+                <span className='font-medium text-[var(--text-primary)] text-sm'>Workflows</span>
+
+                {tools.length === 0 ? (
+                  <p className='text-[var(--text-muted)] text-sm'>
+                    No workflows added yet. Click &quot;Add Workflow&quot; to add a deployed
+                    workflow.
+                  </p>
+                ) : (
+                  <div className='flex flex-col gap-2'>
+                    {tools.map((tool) => (
+                      <div key={tool.id} className='flex items-center justify-between gap-3'>
+                        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                          <span className='text-[14px] text-[var(--text-body)]'>
+                            {tool.toolName}
+                          </span>
+                          <p className='truncate text-[12px] text-[var(--text-muted)]'>
+                            {tool.toolDescription || 'No description'}
+                          </p>
+                        </div>
+                        <div className='flex flex-shrink-0 items-center gap-1'>
+                          <RowActionsMenu
+                            label='Tool actions'
+                            actions={[
+                              { label: 'Edit', onSelect: () => setToolToView(tool) },
+                              {
+                                label: 'Remove',
+                                destructive: true,
+                                disabled: deleteToolMutation.isPending,
+                                onSelect: () => setToolToDelete(tool),
+                              },
+                            ]}
+                          />
+                        </div>
                       </div>
-                    )}
+                    ))}
+                  </div>
+                )}
 
-                    {deployedWorkflows.length === 0 && !isLoadingWorkflows && (
-                      <p className='mt-1 text-[var(--text-muted)] text-xs'>
-                        Deploy a workflow first to add it to this server.
-                      </p>
-                    )}
+                {deployedWorkflows.length === 0 && !isLoadingWorkflows && (
+                  <p className='mt-1 text-[var(--text-muted)] text-xs'>
+                    Deploy a workflow first to add it to this server.
+                  </p>
+                )}
+              </div>
+            )}
+
+            {activeServerTab === 'details' && (
+              <div className='flex flex-col gap-4.5'>
+                <div className='grid grid-cols-[1fr_1fr_1fr] gap-x-6 gap-y-3.5'>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>
+                      Server Name
+                    </span>
+                    <p className='text-[var(--text-secondary)] text-base'>{server.name}</p>
+                  </div>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>
+                      Transport
+                    </span>
+                    <p className='text-[var(--text-secondary)] text-base'>Streamable-HTTP</p>
+                  </div>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>Access</span>
+                    <p className='text-[var(--text-secondary)] text-base'>
+                      {server.isPublic ? 'Public' : 'API Key'}
+                    </p>
+                  </div>
+                </div>
+
+                {server.description?.trim() && (
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>
+                      Description
+                    </span>
+                    <p className='text-[var(--text-secondary)] text-base'>{server.description}</p>
                   </div>
                 )}
 
-                {activeServerTab === 'details' && (
-                  <div className='flex flex-col gap-4.5'>
-                    <div className='grid grid-cols-[1fr_1fr_1fr] gap-x-6 gap-y-3.5'>
-                      <div className='flex flex-col gap-1'>
-                        <span className='font-medium text-[var(--text-primary)] text-sm'>
-                          Server Name
-                        </span>
-                        <p className='text-[var(--text-secondary)] text-base'>{server.name}</p>
-                      </div>
-                      <div className='flex flex-col gap-1'>
-                        <span className='font-medium text-[var(--text-primary)] text-sm'>
-                          Transport
-                        </span>
-                        <p className='text-[var(--text-secondary)] text-base'>Streamable-HTTP</p>
-                      </div>
-                      <div className='flex flex-col gap-1'>
-                        <span className='font-medium text-[var(--text-primary)] text-sm'>
-                          Access
-                        </span>
-                        <p className='text-[var(--text-secondary)] text-base'>
-                          {server.isPublic ? 'Public' : 'API Key'}
-                        </p>
-                      </div>
-                    </div>
+                <div className='flex flex-col gap-1'>
+                  <span className='font-medium text-[var(--text-primary)] text-sm'>URL</span>
+                  <p className='break-all text-[var(--text-secondary)] text-base'>{mcpServerUrl}</p>
+                </div>
 
-                    {server.description?.trim() && (
-                      <div className='flex flex-col gap-1'>
-                        <span className='font-medium text-[var(--text-primary)] text-sm'>
-                          Description
-                        </span>
-                        <p className='text-[var(--text-secondary)] text-base'>
-                          {server.description}
-                        </p>
-                      </div>
-                    )}
+                <div>
+                  <div className='mb-[6.5px] flex items-center justify-between'>
+                    <span className='block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
+                      MCP Client
+                    </span>
+                  </div>
+                  <ButtonGroup
+                    value={activeConfigTab}
+                    onValueChange={(v) => setActiveConfigTab(v as McpClientType)}
+                  >
+                    <ButtonGroupItem value='cursor'>Cursor</ButtonGroupItem>
+                    <ButtonGroupItem value='claude-code'>Claude Code</ButtonGroupItem>
+                    <ButtonGroupItem value='claude-desktop'>Claude Desktop</ButtonGroupItem>
+                    <ButtonGroupItem value='vscode'>VS Code</ButtonGroupItem>
+                    <ButtonGroupItem value='sim'>Sim</ButtonGroupItem>
+                  </ButtonGroup>
+                </div>
 
-                    <div className='flex flex-col gap-1'>
-                      <span className='font-medium text-[var(--text-primary)] text-sm'>URL</span>
-                      <p className='break-all text-[var(--text-secondary)] text-base'>
-                        {mcpServerUrl}
+                {activeConfigTab === 'sim' ? (
+                  <div className='rounded-lg border border-[var(--border-1)] p-4'>
+                    <div className='flex flex-col gap-3'>
+                      <p className='text-[var(--text-secondary)] text-small'>
+                        Add this MCP server to your workspace so you can use its tools in other
+                        workflows via the MCP block.
                       </p>
+                      <Button
+                        variant='primary'
+                        className='self-start'
+                        disabled={addToWorkspaceMutation.isPending || addedToWorkspace}
+                        onClick={async () => {
+                          try {
+                            const headers: Record<string, string> = server.isPublic
+                              ? {}
+                              : { 'X-API-Key': '{{SIM_API_KEY}}' }
+                            await addToWorkspaceMutation.mutateAsync({
+                              workspaceId,
+                              config: {
+                                name: server.name,
+                                transport: 'streamable-http',
+                                url: mcpServerUrl,
+                                timeout: 30000,
+                                headers,
+                                enabled: true,
+                              },
+                            })
+                            setAddedToWorkspace(true)
+                            addedToWorkspaceTimerRef.current = setTimeout(
+                              () => setAddedToWorkspace(false),
+                              3000
+                            )
+                          } catch (err) {
+                            logger.error('Failed to add server to workspace:', err)
+                          }
+                        }}
+                      >
+                        {addToWorkspaceMutation.isPending ? (
+                          'Adding...'
+                        ) : addedToWorkspace ? (
+                          <>
+                            <Check className='mr-1.5 size-[14px]' />
+                            Added to Workspace
+                          </>
+                        ) : (
+                          <>
+                            <Server className='mr-1.5 size-[14px]' />
+                            Add to Workspace
+                          </>
+                        )}
+                      </Button>
+                      {addToWorkspaceMutation.isError && (
+                        <p className='text-[var(--text-error)] text-xs'>
+                          {addToWorkspaceMutation.error?.message || 'Failed to add server'}
+                        </p>
+                      )}
                     </div>
-
-                    <div>
-                      <div className='mb-[6.5px] flex items-center justify-between'>
-                        <span className='block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
-                          MCP Client
-                        </span>
-                      </div>
-                      <ButtonGroup
-                        value={activeConfigTab}
-                        onValueChange={(v) => setActiveConfigTab(v as McpClientType)}
+                  </div>
+                ) : (
+                  <div>
+                    <div className='mb-[6.5px] flex items-center justify-between'>
+                      <span className='block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
+                        Configuration
+                      </span>
+                      <Button
+                        variant='ghost'
+                        onClick={() => handleCopyConfig(server.isPublic, server.name)}
+                        className='!p-1.5 -my-1.5'
                       >
-                        <ButtonGroupItem value='cursor'>Cursor</ButtonGroupItem>
-                        <ButtonGroupItem value='claude-code'>Claude Code</ButtonGroupItem>
-                        <ButtonGroupItem value='claude-desktop'>Claude Desktop</ButtonGroupItem>
-                        <ButtonGroupItem value='vscode'>VS Code</ButtonGroupItem>
-                        <ButtonGroupItem value='sim'>Sim</ButtonGroupItem>
-                      </ButtonGroup>
+                        {copiedConfig ? (
+                          <Check className='size-[14px]' />
+                        ) : (
+                          <Clipboard className='size-[14px]' />
+                        )}
+                      </Button>
                     </div>
-
-                    {activeConfigTab === 'sim' ? (
-                      <div className='rounded-lg border border-[var(--border-1)] p-4'>
-                        <div className='flex flex-col gap-3'>
-                          <p className='text-[var(--text-secondary)] text-small'>
-                            Add this MCP server to your workspace so you can use its tools in other
-                            workflows via the MCP block.
-                          </p>
-                          <Button
-                            variant='primary'
-                            className='self-start'
-                            disabled={addToWorkspaceMutation.isPending || addedToWorkspace}
-                            onClick={async () => {
-                              try {
-                                const headers: Record<string, string> = server.isPublic
-                                  ? {}
-                                  : { 'X-API-Key': '{{SIM_API_KEY}}' }
-                                await addToWorkspaceMutation.mutateAsync({
-                                  workspaceId,
-                                  config: {
-                                    name: server.name,
-                                    transport: 'streamable-http',
-                                    url: mcpServerUrl,
-                                    timeout: 30000,
-                                    headers,
-                                    enabled: true,
-                                  },
-                                })
-                                setAddedToWorkspace(true)
-                                addedToWorkspaceTimerRef.current = setTimeout(
-                                  () => setAddedToWorkspace(false),
-                                  3000
-                                )
-                              } catch (err) {
-                                logger.error('Failed to add server to workspace:', err)
-                              }
-                            }}
-                          >
-                            {addToWorkspaceMutation.isPending ? (
-                              'Adding...'
-                            ) : addedToWorkspace ? (
-                              <>
-                                <Check className='mr-1.5 size-[14px]' />
-                                Added to Workspace
-                              </>
-                            ) : (
-                              <>
-                                <Server className='mr-1.5 size-[14px]' />
-                                Add to Workspace
-                              </>
-                            )}
-                          </Button>
-                          {addToWorkspaceMutation.isError && (
-                            <p className='text-[var(--text-error)] text-xs'>
-                              {addToWorkspaceMutation.error?.message || 'Failed to add server'}
-                            </p>
-                          )}
-                        </div>
-                      </div>
-                    ) : (
-                      <div>
-                        <div className='mb-[6.5px] flex items-center justify-between'>
-                          <span className='block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
-                            Configuration
-                          </span>
-                          <Button
-                            variant='ghost'
-                            onClick={() => handleCopyConfig(server.isPublic, server.name)}
-                            className='!p-1.5 -my-1.5'
-                          >
-                            {copiedConfig ? (
-                              <Check className='size-[14px]' />
-                            ) : (
-                              <Clipboard className='size-[14px]' />
-                            )}
-                          </Button>
-                        </div>
-                        <div className='relative'>
-                          <Code.Viewer
-                            code={getConfigSnippet(activeConfigTab, server.isPublic, server.name)}
-                            language={activeConfigTab === 'claude-code' ? 'javascript' : 'json'}
-                            wrapText
-                            className='!min-h-0 rounded-sm border border-[var(--border-1)]'
+                    <div className='relative'>
+                      <Code.Viewer
+                        code={getConfigSnippet(activeConfigTab, server.isPublic, server.name)}
+                        language={activeConfigTab === 'claude-code' ? 'javascript' : 'json'}
+                        wrapText
+                        className='!min-h-0 rounded-sm border border-[var(--border-1)]'
+                      />
+                      {activeConfigTab === 'cursor' && (
+                        <a
+                          href={getCursorInstallUrl(server.isPublic, server.name)}
+                          className='absolute top-1.5 right-2 inline-flex rounded-md bg-[var(--surface-5)] ring-1 ring-[var(--border-1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+                        >
+                          <img
+                            src='https://cursor.com/deeplink/mcp-install-dark.svg'
+                            alt='Add to Cursor'
+                            className='h-[26px] rounded-md align-middle'
                           />
-                          {activeConfigTab === 'cursor' && (
-                            <a
-                              href={getCursorInstallUrl(server.isPublic, server.name)}
-                              className='absolute top-1.5 right-2 inline-flex rounded-md bg-[var(--surface-5)] ring-1 ring-[var(--border-1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
-                            >
-                              <img
-                                src='https://cursor.com/deeplink/mcp-install-dark.svg'
-                                alt='Add to Cursor'
-                                className='h-[26px] rounded-md align-middle'
-                              />
-                            </a>
-                          )}
-                        </div>
-                        {!server.isPublic && (
-                          <p className='mt-2 text-[var(--text-muted)] text-xs'>
-                            Replace $SIM_API_KEY with your API key, or{' '}
-                            <button
-                              type='button'
-                              onClick={() => setShowCreateApiKeyModal(true)}
-                              className='underline hover-hover:text-[var(--text-secondary)]'
-                            >
-                              create one now
-                            </button>
-                          </p>
-                        )}
-                      </div>
+                        </a>
+                      )}
+                    </div>
+                    {!server.isPublic && (
+                      <p className='mt-2 text-[var(--text-muted)] text-xs'>
+                        Replace $SIM_API_KEY with your API key, or{' '}
+                        <button
+                          type='button'
+                          onClick={() => setShowCreateApiKeyModal(true)}
+                          className='underline hover-hover:text-[var(--text-secondary)]'
+                        >
+                          create one now
+                        </button>
+                      </p>
                     )}
                   </div>
                 )}
               </div>
-            </div>
+            )}
           </div>
         </div>
-      </div>
+      </SettingsPanel>
 
       <ChipConfirmModal
         open={!!toolToDelete}
@@ -965,6 +937,16 @@ export function WorkflowMcpServers() {
     )
   }
 
+  const actions: SettingsAction[] = [
+    {
+      text: 'Add server',
+      icon: Plus,
+      variant: 'primary',
+      onSelect: () => setShowAddModal(true),
+      disabled: isLoading,
+    },
+  ]
+
   return (
     <>
       <SettingsPanel
@@ -973,16 +955,7 @@ export function WorkflowMcpServers() {
           onChange: setSearchTerm,
           placeholder: 'Search servers...',
         }}
-        actions={
-          <Chip
-            leftIcon={Plus}
-            variant='primary'
-            onClick={() => setShowAddModal(true)}
-            disabled={isLoading}
-          >
-            Add Server
-          </Chip>
-        }
+        actions={actions}
       >
         <div className='min-h-0 flex-1'>
           {error ? (
diff --git a/apps/sim/ee/access-control/components/access-control.tsx b/apps/sim/ee/access-control/components/access-control.tsx
index 99211cc7edd..c01a1a8f30a 100644
--- a/apps/sim/ee/access-control/components/access-control.tsx
+++ b/apps/sim/ee/access-control/components/access-control.tsx
@@ -3,7 +3,6 @@
 import { useCallback, useMemo, useState } from 'react'
 import {
   Checkbox,
-  Chip,
   ChipModal,
   ChipModalBody,
   ChipModalError,
@@ -164,16 +163,19 @@ export function AccessControl() {
           onChange: setSearchTerm,
           placeholder: 'Search permission groups...',
         }}
-        actions={
-          <Chip leftIcon={Plus} variant='primary' onClick={() => setShowCreateModal(true)}>
-            Create Group
-          </Chip>
-        }
+        actions={[
+          {
+            text: 'Create group',
+            icon: Plus,
+            variant: 'primary',
+            onSelect: () => setShowCreateModal(true),
+          },
+        ]}
       >
         <SettingsSection label={`Permission groups (${permissionGroups.length})`}>
           {permissionGroups.length === 0 ? (
             <SettingsEmptyState variant='inline'>
-              No permission groups yet. Click "Create Group" to get started.
+              No permission groups yet. Click "Create group" to get started.
             </SettingsEmptyState>
           ) : filteredGroups.length === 0 ? (
             <SettingsEmptyState variant='inline'>
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index 4c712e60bfc..782e3c48bad 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -35,7 +35,8 @@ import {
   MemberRow,
 } from '@/app/workspace/[workspaceId]/settings/components/member-list'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
-import { SaveDiscardActions } from '@/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions'
+import { saveDiscardActions } from '@/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions'
+import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel/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'
 import { getAllBlocks } from '@/blocks'
@@ -1254,388 +1255,366 @@ export function GroupDetail({
 
   return (
     <>
-      <div className='flex h-full flex-col bg-[var(--bg)]'>
-        <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-          <Chip leftIcon={ArrowLeft} onClick={handleBack}>
-            Access Control
-          </Chip>
-          <div className='flex items-center gap-1'>
-            <SaveDiscardActions
-              dirty={hasConfigChanges}
-              saving={updatePermissionGroup.isPending}
-              onSave={handleSaveConfig}
-              onDiscard={handleDiscardConfig}
-            />
-            <Chip
-              variant='destructive'
-              onClick={() => setShowDeleteConfirm(true)}
-              disabled={deletePermissionGroup.isPending}
-            >
-              {deletePermissionGroup.isPending ? 'Deleting...' : 'Delete'}
-            </Chip>
-          </div>
-        </div>
-
-        <div className='flex flex-shrink-0 justify-center px-6 pb-3'>
-          <div className='w-full max-w-[48rem]'>
-            <ChipModalTabs
-              tabs={tabs}
-              value={configTab}
-              onChange={(value) => setConfigTab(value as ConfigTab)}
-            />
-          </div>
-        </div>
+      <SettingsPanel
+        back={{ text: 'Access Control', icon: ArrowLeft, onSelect: handleBack }}
+        title={viewingGroup.name}
+        description={viewingGroup.description ?? undefined}
+        actions={[
+          ...saveDiscardActions({
+            dirty: hasConfigChanges,
+            saving: updatePermissionGroup.isPending,
+            onSave: handleSaveConfig,
+            onDiscard: handleDiscardConfig,
+          }),
+          {
+            text: deletePermissionGroup.isPending ? 'Deleting...' : 'Delete',
+            variant: 'destructive',
+            onSelect: () => setShowDeleteConfirm(true),
+            disabled: deletePermissionGroup.isPending,
+          },
+        ]}
+      >
+        <ChipModalTabs
+          tabs={tabs}
+          value={configTab}
+          onChange={(value) => setConfigTab(value as ConfigTab)}
+        />
 
-        <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
-          <div className='mx-auto flex w-full max-w-[48rem] flex-col gap-7 pb-6'>
-            <div className='flex flex-col gap-1'>
-              <h1 className='font-medium text-[var(--text-body)] text-lg'>{viewingGroup.name}</h1>
-              {viewingGroup.description && (
-                <p className='text-[var(--text-muted)] text-md'>{viewingGroup.description}</p>
+        {configTab === 'general' && (
+          <>
+            <SettingsSection label='Default group'>
+              <div className='flex items-center justify-between gap-3'>
+                <span className='text-[var(--text-muted)] text-small'>
+                  Applies to everyone in the organization not assigned to another group, including
+                  external workspace members
+                </span>
+                <Switch
+                  checked={viewingGroup.isDefault}
+                  onCheckedChange={(checked) => handleToggleDefault(checked)}
+                  disabled={updatePermissionGroup.isPending}
+                />
+              </div>
+            </SettingsSection>
+
+            <SettingsSection label='Workspaces'>
+              {viewingGroup.isDefault ? (
+                <div className='flex items-center justify-between gap-3'>
+                  <span className='text-[var(--text-muted)] text-small'>
+                    Governs every workspace in the organization
+                  </span>
+                </div>
+              ) : (
+                <div className='flex flex-col gap-3'>
+                  <div className='flex items-center justify-between gap-3'>
+                    <span className='min-w-0 text-[var(--text-muted)] text-small'>
+                      {viewingGroup.workspaces.length > 0
+                        ? `Governs ${viewingGroup.workspaces.length} workspace${
+                            viewingGroup.workspaces.length === 1 ? '' : 's'
+                          }`
+                        : 'Select the workspaces this group governs'}
+                    </span>
+                    <WorkspaceSelect
+                      workspaceIds={viewingGroup.workspaces.map((ws) => ws.id)}
+                      onChange={handleScopeChange}
+                      options={workspaceOptions}
+                      isLoading={workspacesLoading}
+                      allowAllWorkspaces={false}
+                      className='flex-shrink-0'
+                    />
+                  </div>
+                  {viewingGroup.workspaces.length > 0 && (
+                    <div className='-mx-2 flex flex-col gap-y-0.5'>
+                      {viewingGroup.workspaces.map((ws) => (
+                        <MemberRow
+                          key={ws.id}
+                          name={ws.name}
+                          email={ws.name}
+                          image={null}
+                          status=''
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
               )}
-            </div>
+            </SettingsSection>
 
-            {configTab === 'general' && (
-              <>
-                <SettingsSection label='Default group'>
+            {!viewingGroup.isDefault && (
+              <SettingsSection label='Members'>
+                <div className='flex flex-col gap-3'>
                   <div className='flex items-center justify-between gap-3'>
                     <span className='text-[var(--text-muted)] text-small'>
-                      Applies to everyone in the organization not assigned to another group,
-                      including external workspace members
+                      {members.length === 0
+                        ? 'Applies to all members of its workspaces. Add members to restrict it to specific people.'
+                        : `Restricted to ${members.length} member${members.length === 1 ? '' : 's'}`}
                     </span>
-                    <Switch
-                      checked={viewingGroup.isDefault}
-                      onCheckedChange={(checked) => handleToggleDefault(checked)}
-                      disabled={updatePermissionGroup.isPending}
-                    />
+                    <Chip
+                      variant='primary'
+                      leftIcon={Plus}
+                      onClick={handleOpenAddMembersModal}
+                      className='flex-shrink-0'
+                    >
+                      Add
+                    </Chip>
                   </div>
-                </SettingsSection>
-
-                <SettingsSection label='Workspaces'>
-                  {viewingGroup.isDefault ? (
-                    <div className='flex items-center justify-between gap-3'>
-                      <span className='text-[var(--text-muted)] text-small'>
-                        Governs every workspace in the organization
-                      </span>
+                  {membersLoading ? (
+                    <div className='-mx-2 flex flex-col gap-y-0.5'>
+                      {[1, 2].map((i) => (
+                        <div key={i} className='flex items-center gap-2.5 p-2'>
+                          <Skeleton className='size-[14px] flex-shrink-0 rounded-full' />
+                          <Skeleton className='h-[14px] w-[180px]' />
+                        </div>
+                      ))}
                     </div>
                   ) : (
-                    <div className='flex flex-col gap-3'>
-                      <div className='flex items-center justify-between gap-3'>
-                        <span className='min-w-0 text-[var(--text-muted)] text-small'>
-                          {viewingGroup.workspaces.length > 0
-                            ? `Governs ${viewingGroup.workspaces.length} workspace${
-                                viewingGroup.workspaces.length === 1 ? '' : 's'
-                              }`
-                            : 'Select the workspaces this group governs'}
-                        </span>
-                        <WorkspaceSelect
-                          workspaceIds={viewingGroup.workspaces.map((ws) => ws.id)}
-                          onChange={handleScopeChange}
-                          options={workspaceOptions}
-                          isLoading={workspacesLoading}
-                          allowAllWorkspaces={false}
-                          className='flex-shrink-0'
-                        />
+                    members.length > 0 && (
+                      <div className='-mx-2 flex flex-col gap-y-0.5'>
+                        {members.map((member) => (
+                          <MemberRow
+                            key={member.id}
+                            name={member.userName || member.userEmail || 'Unknown'}
+                            email={member.userEmail || member.userName || 'Unknown'}
+                            image={member.userImage}
+                            status={`Added ${new Date(member.assignedAt).toLocaleDateString()}`}
+                            menu={
+                              <RowActionsMenu
+                                label='Member actions'
+                                actions={[
+                                  {
+                                    label: 'Remove',
+                                    onSelect: () => handleRemoveMember(member.id),
+                                    destructive: true,
+                                  },
+                                ]}
+                              />
+                            }
+                          />
+                        ))}
                       </div>
-                      {viewingGroup.workspaces.length > 0 && (
-                        <div className='-mx-2 flex flex-col gap-y-0.5'>
-                          {viewingGroup.workspaces.map((ws) => (
-                            <MemberRow
-                              key={ws.id}
-                              name={ws.name}
-                              email={ws.name}
-                              image={null}
-                              status=''
-                            />
-                          ))}
-                        </div>
-                      )}
-                    </div>
+                    )
                   )}
-                </SettingsSection>
-
-                {!viewingGroup.isDefault && (
-                  <SettingsSection label='Members'>
-                    <div className='flex flex-col gap-3'>
-                      <div className='flex items-center justify-between gap-3'>
-                        <span className='text-[var(--text-muted)] text-small'>
-                          {members.length === 0
-                            ? 'Applies to all members of its workspaces. Add members to restrict it to specific people.'
-                            : `Restricted to ${members.length} member${members.length === 1 ? '' : 's'}`}
-                        </span>
-                        <Chip
-                          variant='primary'
-                          leftIcon={Plus}
-                          onClick={handleOpenAddMembersModal}
-                          className='flex-shrink-0'
-                        >
-                          Add
-                        </Chip>
-                      </div>
-                      {membersLoading ? (
-                        <div className='-mx-2 flex flex-col gap-y-0.5'>
-                          {[1, 2].map((i) => (
-                            <div key={i} className='flex items-center gap-2.5 p-2'>
-                              <Skeleton className='size-[14px] flex-shrink-0 rounded-full' />
-                              <Skeleton className='h-[14px] w-[180px]' />
-                            </div>
-                          ))}
-                        </div>
-                      ) : (
-                        members.length > 0 && (
-                          <div className='-mx-2 flex flex-col gap-y-0.5'>
-                            {members.map((member) => (
-                              <MemberRow
-                                key={member.id}
-                                name={member.userName || member.userEmail || 'Unknown'}
-                                email={member.userEmail || member.userName || 'Unknown'}
-                                image={member.userImage}
-                                status={`Added ${new Date(member.assignedAt).toLocaleDateString()}`}
-                                menu={
-                                  <RowActionsMenu
-                                    label='Member actions'
-                                    actions={[
-                                      {
-                                        label: 'Remove',
-                                        onSelect: () => handleRemoveMember(member.id),
-                                        destructive: true,
-                                      },
-                                    ]}
-                                  />
-                                }
-                              />
-                            ))}
-                          </div>
-                        )
-                      )}
-                    </div>
-                  </SettingsSection>
-                )}
-              </>
+                </div>
+              </SettingsSection>
             )}
+          </>
+        )}
 
-            {configTab === 'providers' && (
-              <div className='flex flex-col gap-7'>
-                <div className='flex items-center gap-2'>
-                  <ChipInput
-                    icon={Search}
-                    placeholder='Search providers...'
-                    value={providerSearchTerm}
-                    onChange={(e) => setProviderSearchTerm(e.target.value)}
-                    className='min-w-0 flex-1'
-                  />
+        {configTab === 'providers' && (
+          <div className='flex flex-col gap-7'>
+            <div className='flex items-center gap-2'>
+              <ChipInput
+                icon={Search}
+                placeholder='Search providers...'
+                value={providerSearchTerm}
+                onChange={(e) => setProviderSearchTerm(e.target.value)}
+                className='min-w-0 flex-1'
+              />
+              <Chip
+                onClick={() => setProvidersAllowed(filteredProviders, !filteredProvidersAllAllowed)}
+              >
+                {filteredProvidersAllAllowed ? 'Deselect All' : 'Select All'}
+              </Chip>
+            </div>
+            <div className='flex flex-col gap-0.5'>
+              {filteredProviders.map((providerId) => (
+                <ProviderRow
+                  key={providerId}
+                  providerId={providerId}
+                  isProviderAllowed={isProviderAllowed(providerId)}
+                  onToggleProvider={() => toggleProvider(providerId)}
+                  deniedCount={deniedCountByProvider[providerId] ?? 0}
+                  workspaceId={workspaceId}
+                  isAllowed={isModelAllowed}
+                  onToggle={toggleModel}
+                  onSetDenied={setModelsDenied}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {configTab === 'blocks' && (
+          <div className='flex flex-col gap-7'>
+            <div className='flex items-center gap-2'>
+              <ChipInput
+                icon={Search}
+                placeholder='Search blocks...'
+                value={integrationSearchTerm}
+                onChange={(e) => setIntegrationSearchTerm(e.target.value)}
+                className='min-w-0 flex-1'
+              />
+            </div>
+            {filteredCoreBlocks.length > 0 && (
+              <SettingsSection
+                label='Core Blocks'
+                action={
                   <Chip
-                    onClick={() =>
-                      setProvidersAllowed(filteredProviders, !filteredProvidersAllAllowed)
-                    }
+                    flush
+                    onClick={() => setBlocksAllowed(filteredCoreBlocks, !coreBlocksAllAllowed)}
                   >
-                    {filteredProvidersAllAllowed ? 'Deselect All' : 'Select All'}
+                    {coreBlocksAllAllowed ? 'Deselect All' : 'Select All'}
                   </Chip>
+                }
+              >
+                <div className='grid grid-cols-3 gap-x-2 gap-y-0.5'>
+                  {filteredCoreBlocks.map((block) => {
+                    const BlockIcon = block.icon
+                    const checkboxId = `block-${block.type}`
+                    return (
+                      <label
+                        key={block.type}
+                        htmlFor={checkboxId}
+                        className='flex cursor-pointer items-center gap-2 rounded-md px-2 py-[5px] transition-colors hover-hover:bg-[var(--surface-active)]'
+                      >
+                        <Checkbox
+                          id={checkboxId}
+                          checked={isIntegrationAllowed(block.type)}
+                          onCheckedChange={() => toggleIntegration(block.type)}
+                        />
+                        <div
+                          className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+                          style={{ background: block.bgColor }}
+                        >
+                          {BlockIcon && <BlockIcon className='!h-[10px] !w-[10px] text-white' />}
+                        </div>
+                        <span className='truncate font-medium text-sm'>{block.name}</span>
+                      </label>
+                    )
+                  })}
                 </div>
+              </SettingsSection>
+            )}
+            {filteredToolBlocks.length > 0 && (
+              <SettingsSection
+                label='Integrations and Triggers'
+                headerAccessory={
+                  <Info side='top'>
+                    Allow a whole integration with its checkbox, then expand it to deny specific
+                    tools while keeping the rest available.
+                  </Info>
+                }
+                action={
+                  <Chip
+                    flush
+                    onClick={() => setBlocksAllowed(filteredToolBlocks, !toolBlocksAllAllowed)}
+                  >
+                    {toolBlocksAllAllowed ? 'Deselect All' : 'Select All'}
+                  </Chip>
+                }
+              >
                 <div className='flex flex-col gap-0.5'>
-                  {filteredProviders.map((providerId) => (
-                    <ProviderRow
-                      key={providerId}
-                      providerId={providerId}
-                      isProviderAllowed={isProviderAllowed(providerId)}
-                      onToggleProvider={() => toggleProvider(providerId)}
-                      deniedCount={deniedCountByProvider[providerId] ?? 0}
-                      workspaceId={workspaceId}
-                      isAllowed={isModelAllowed}
-                      onToggle={toggleModel}
-                      onSetDenied={setModelsDenied}
+                  {filteredToolBlocks.map((block) => (
+                    <BlockToolRow
+                      key={block.type}
+                      block={block}
+                      isBlockAllowed={isIntegrationAllowed(block.type)}
+                      onToggleBlock={() => toggleIntegration(block.type)}
+                      deniedCount={deniedCountByBlock[block.type] ?? 0}
+                      isAllowed={isToolAllowed}
+                      onToggle={toggleTool}
+                      onSetDenied={setToolsDenied}
                     />
                   ))}
                 </div>
-              </div>
+              </SettingsSection>
             )}
+          </div>
+        )}
 
-            {configTab === 'blocks' && (
-              <div className='flex flex-col gap-7'>
-                <div className='flex items-center gap-2'>
-                  <ChipInput
-                    icon={Search}
-                    placeholder='Search blocks...'
-                    value={integrationSearchTerm}
-                    onChange={(e) => setIntegrationSearchTerm(e.target.value)}
-                    className='min-w-0 flex-1'
-                  />
-                </div>
-                {filteredCoreBlocks.length > 0 && (
-                  <SettingsSection
-                    label='Core Blocks'
-                    action={
-                      <Chip
-                        flush
-                        onClick={() => setBlocksAllowed(filteredCoreBlocks, !coreBlocksAllAllowed)}
-                      >
-                        {coreBlocksAllAllowed ? 'Deselect All' : 'Select All'}
-                      </Chip>
-                    }
-                  >
-                    <div className='grid grid-cols-3 gap-x-2 gap-y-0.5'>
-                      {filteredCoreBlocks.map((block) => {
-                        const BlockIcon = block.icon
-                        const checkboxId = `block-${block.type}`
-                        return (
-                          <label
-                            key={block.type}
-                            htmlFor={checkboxId}
-                            className='flex cursor-pointer items-center gap-2 rounded-md px-2 py-[5px] transition-colors hover-hover:bg-[var(--surface-active)]'
-                          >
-                            <Checkbox
-                              id={checkboxId}
-                              checked={isIntegrationAllowed(block.type)}
-                              onCheckedChange={() => toggleIntegration(block.type)}
-                            />
-                            <div
-                              className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
-                              style={{ background: block.bgColor }}
-                            >
-                              {BlockIcon && (
-                                <BlockIcon className='!h-[10px] !w-[10px] text-white' />
-                              )}
-                            </div>
-                            <span className='truncate font-medium text-sm'>{block.name}</span>
-                          </label>
-                        )
-                      })}
-                    </div>
-                  </SettingsSection>
-                )}
-                {filteredToolBlocks.length > 0 && (
-                  <SettingsSection
-                    label='Integrations and Triggers'
-                    headerAccessory={
-                      <Info side='top'>
-                        Allow a whole integration with its checkbox, then expand it to deny specific
-                        tools while keeping the rest available.
-                      </Info>
-                    }
-                    action={
-                      <Chip
-                        flush
-                        onClick={() => setBlocksAllowed(filteredToolBlocks, !toolBlocksAllAllowed)}
+        {configTab === 'platform' && (
+          <div className='flex flex-col gap-7'>
+            <div className='flex items-center gap-2'>
+              <ChipInput
+                icon={Search}
+                placeholder='Search features...'
+                value={platformSearchTerm}
+                onChange={(e) => setPlatformSearchTerm(e.target.value)}
+                className='min-w-0 flex-1'
+              />
+              <Chip
+                onClick={() =>
+                  setEditingConfig((prev) => ({
+                    ...prev,
+                    ...Object.fromEntries(
+                      filteredPlatformFeatures.map((f) => [f.configKey, platformAllVisible])
+                    ),
+                  }))
+                }
+              >
+                {platformAllVisible ? 'Deselect All' : 'Select All'}
+              </Chip>
+            </div>
+            {platformCategorySections.map(({ category, features }) => (
+              <SettingsSection key={category} label={category}>
+                <div className='flex flex-col gap-0.5'>
+                  {features.map((feature) => (
+                    <div key={feature.id} className='flex items-center gap-1.5'>
+                      <label
+                        htmlFor={feature.id}
+                        className='flex flex-1 cursor-pointer items-center gap-2 rounded-md px-2 py-[5px] transition-colors hover-hover:bg-[var(--surface-active)]'
                       >
-                        {toolBlocksAllAllowed ? 'Deselect All' : 'Select All'}
-                      </Chip>
-                    }
-                  >
-                    <div className='flex flex-col gap-0.5'>
-                      {filteredToolBlocks.map((block) => (
-                        <BlockToolRow
-                          key={block.type}
-                          block={block}
-                          isBlockAllowed={isIntegrationAllowed(block.type)}
-                          onToggleBlock={() => toggleIntegration(block.type)}
-                          deniedCount={deniedCountByBlock[block.type] ?? 0}
-                          isAllowed={isToolAllowed}
-                          onToggle={toggleTool}
-                          onSetDenied={setToolsDenied}
+                        <Checkbox
+                          id={feature.id}
+                          checked={!editingConfig[feature.configKey]}
+                          onCheckedChange={(checked) =>
+                            setEditingConfig((prev) => ({
+                              ...prev,
+                              [feature.configKey]: checked !== true,
+                            }))
+                          }
                         />
-                      ))}
+                        <span className='font-normal text-sm'>{feature.label}</span>
+                      </label>
+                      <Info side='top'>{feature.hint}</Info>
                     </div>
-                  </SettingsSection>
-                )}
-              </div>
-            )}
-
-            {configTab === 'platform' && (
-              <div className='flex flex-col gap-7'>
-                <div className='flex items-center gap-2'>
-                  <ChipInput
-                    icon={Search}
-                    placeholder='Search features...'
-                    value={platformSearchTerm}
-                    onChange={(e) => setPlatformSearchTerm(e.target.value)}
-                    className='min-w-0 flex-1'
-                  />
-                  <Chip
-                    onClick={() =>
+                  ))}
+                </div>
+              </SettingsSection>
+            ))}
+            <SettingsSection label='Files'>
+              <div className='flex flex-col gap-1.5'>
+                <label
+                  htmlFor='disable-public-file-sharing'
+                  className='flex cursor-pointer items-center gap-2 rounded-md px-2 py-[5px] transition-colors hover-hover:bg-[var(--surface-active)]'
+                >
+                  <Checkbox
+                    id='disable-public-file-sharing'
+                    checked={!editingConfig.disablePublicFileSharing}
+                    onCheckedChange={(checked) =>
                       setEditingConfig((prev) => ({
                         ...prev,
-                        ...Object.fromEntries(
-                          filteredPlatformFeatures.map((f) => [f.configKey, platformAllVisible])
-                        ),
+                        disablePublicFileSharing: checked !== true,
                       }))
                     }
-                  >
-                    {platformAllVisible ? 'Deselect All' : 'Select All'}
-                  </Chip>
+                  />
+                  <span className='font-normal text-sm'>Public Sharing</span>
+                </label>
+                <div
+                  className={cn(
+                    'flex flex-col gap-1.5 px-2 pt-1',
+                    editingConfig.disablePublicFileSharing && 'opacity-50'
+                  )}
+                >
+                  <span className='text-[var(--text-secondary)] text-xs'>
+                    Auth modes public file-share links may use
+                  </span>
+                  <ChipDropdown
+                    multiple
+                    showAllOption={false}
+                    allLabel='None'
+                    value={fileShareAuthValue}
+                    onChange={setFileShareAuthTypes}
+                    options={FILE_SHARE_AUTH_TYPE_OPTIONS}
+                    disabled={editingConfig.disablePublicFileSharing}
+                    matchTriggerWidth={false}
+                    className='w-[200px]'
+                  />
                 </div>
-                {platformCategorySections.map(({ category, features }) => (
-                  <SettingsSection key={category} label={category}>
-                    <div className='flex flex-col gap-0.5'>
-                      {features.map((feature) => (
-                        <div key={feature.id} className='flex items-center gap-1.5'>
-                          <label
-                            htmlFor={feature.id}
-                            className='flex flex-1 cursor-pointer items-center gap-2 rounded-md px-2 py-[5px] transition-colors hover-hover:bg-[var(--surface-active)]'
-                          >
-                            <Checkbox
-                              id={feature.id}
-                              checked={!editingConfig[feature.configKey]}
-                              onCheckedChange={(checked) =>
-                                setEditingConfig((prev) => ({
-                                  ...prev,
-                                  [feature.configKey]: checked !== true,
-                                }))
-                              }
-                            />
-                            <span className='font-normal text-sm'>{feature.label}</span>
-                          </label>
-                          <Info side='top'>{feature.hint}</Info>
-                        </div>
-                      ))}
-                    </div>
-                  </SettingsSection>
-                ))}
-                <SettingsSection label='Files'>
-                  <div className='flex flex-col gap-1.5'>
-                    <label
-                      htmlFor='disable-public-file-sharing'
-                      className='flex cursor-pointer items-center gap-2 rounded-md px-2 py-[5px] transition-colors hover-hover:bg-[var(--surface-active)]'
-                    >
-                      <Checkbox
-                        id='disable-public-file-sharing'
-                        checked={!editingConfig.disablePublicFileSharing}
-                        onCheckedChange={(checked) =>
-                          setEditingConfig((prev) => ({
-                            ...prev,
-                            disablePublicFileSharing: checked !== true,
-                          }))
-                        }
-                      />
-                      <span className='font-normal text-sm'>Public Sharing</span>
-                    </label>
-                    <div
-                      className={cn(
-                        'flex flex-col gap-1.5 px-2 pt-1',
-                        editingConfig.disablePublicFileSharing && 'opacity-50'
-                      )}
-                    >
-                      <span className='text-[var(--text-secondary)] text-xs'>
-                        Auth modes public file-share links may use
-                      </span>
-                      <ChipDropdown
-                        multiple
-                        showAllOption={false}
-                        allLabel='None'
-                        value={fileShareAuthValue}
-                        onChange={setFileShareAuthTypes}
-                        options={FILE_SHARE_AUTH_TYPE_OPTIONS}
-                        disabled={editingConfig.disablePublicFileSharing}
-                        matchTriggerWidth={false}
-                        className='w-[200px]'
-                      />
-                    </div>
-                  </div>
-                </SettingsSection>
               </div>
-            )}
+            </SettingsSection>
           </div>
-        </div>
-      </div>
+        )}
+      </SettingsPanel>
 
       <AddMembersModal
         open={showAddMembersModal}
diff --git a/apps/sim/ee/data-drains/components/data-drains-settings.tsx b/apps/sim/ee/data-drains/components/data-drains-settings.tsx
index 3b494c0f3ff..82593a5d910 100644
--- a/apps/sim/ee/data-drains/components/data-drains-settings.tsx
+++ b/apps/sim/ee/data-drains/components/data-drains-settings.tsx
@@ -3,7 +3,6 @@
 import { useState } from 'react'
 import {
   Badge,
-  Chip,
   ChipConfirmModal,
   ChipModal,
   ChipModalBody,
@@ -129,11 +128,14 @@ export function DataDrainsSettings() {
   return (
     <>
       <SettingsPanel
-        actions={
-          <Chip leftIcon={Plus} variant='primary' onClick={() => setCreateOpen(true)}>
-            New Drain
-          </Chip>
-        }
+        actions={[
+          {
+            text: 'New drain',
+            icon: Plus,
+            variant: 'primary',
+            onSelect: () => setCreateOpen(true),
+          },
+        ]}
         search={{
           value: searchTerm,
           onChange: setSearchTerm,
@@ -182,7 +184,7 @@ export function DataDrainsSettings() {
                 </SettingsEmptyState>
               )
             ) : (
-              <SettingsEmptyState>Click "New Drain" above to get started</SettingsEmptyState>
+              <SettingsEmptyState>Click "New drain" above to get started</SettingsEmptyState>
             )}
           </div>
         </div>
diff --git a/apps/sim/ee/data-retention/components/data-retention-settings.tsx b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
index af4daade496..c716319c60c 100644
--- a/apps/sim/ee/data-retention/components/data-retention-settings.tsx
+++ b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
@@ -30,8 +30,9 @@ import {
 } from '@/lib/guardrails/pii-entities'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
 import { UnsavedChangesModal } from '@/app/workspace/[workspaceId]/components/credential-detail'
-import { SaveDiscardActions } from '@/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions'
+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 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'
@@ -321,123 +322,117 @@ function PolicyDetail({
     : 'Overrides the organization defaults for the selected workspaces.'
 
   return (
-    <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-        <Chip leftIcon={ArrowLeft} onClick={onBack}>
-          Data retention
-        </Chip>
-        <div className='flex items-center gap-1'>
-          <SaveDiscardActions
-            dirty={changed}
-            saving={isSaving}
-            onSave={onSave}
-            onDiscard={onDiscard}
-            saveDisabled={!isOrg && draft.workspaceIds.length === 0}
-          />
-          {canRemove && (
-            <Chip variant='destructive' onClick={onRemove} disabled={isSaving}>
-              Remove override
-            </Chip>
-          )}
-        </div>
-      </div>
+    <SettingsPanel
+      back={{ text: 'Data retention', icon: ArrowLeft, onSelect: onBack }}
+      title={title}
+      description={description}
+      actions={[
+        ...saveDiscardActions({
+          dirty: changed,
+          saving: isSaving,
+          onSave,
+          onDiscard,
+          saveDisabled: !isOrg && draft.workspaceIds.length === 0,
+        }),
+        ...(canRemove
+          ? [
+              {
+                text: 'Remove override',
+                variant: 'destructive',
+                onSelect: onRemove,
+                disabled: isSaving,
+              } satisfies SettingsAction,
+            ]
+          : []),
+      ]}
+    >
+      {!isOrg && (
+        <SettingsSection label='Workspaces'>
+          <div className='flex items-center justify-between gap-3'>
+            <span className='min-w-0 text-[var(--text-muted)] text-small'>
+              {draft.workspaceIds.length > 0
+                ? `Overrides ${draft.workspaceIds.length} workspace${draft.workspaceIds.length === 1 ? '' : 's'}`
+                : 'Select the workspaces this override applies to'}
+            </span>
+            <ChipDropdown
+              multiple
+              value={draft.workspaceIds}
+              onChange={(workspaceIds) => onChange({ ...draft, workspaceIds })}
+              options={workspaceOptions}
+              placeholder='Select workspaces'
+              className='flex-shrink-0'
+            />
+          </div>
+        </SettingsSection>
+      )}
 
-      <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
-        <div className='mx-auto flex w-full max-w-[48rem] flex-col gap-7 pb-6'>
-          <div className='flex flex-col gap-1'>
-            <h1 className='font-medium text-[var(--text-body)] text-lg'>{title}</h1>
-            <p className='text-[var(--text-muted)] text-md'>{description}</p>
+      <SettingsSection label='Retention'>
+        <div className='flex flex-col gap-3'>
+          <div className='flex items-center justify-between gap-3'>
+            <span className='text-[var(--text-muted)] text-small'>Log retention</span>
+            <RetentionSelect
+              allowInherit={!isOrg}
+              value={draft.logDays}
+              onChange={(logDays) => onChange({ ...draft, logDays })}
+            />
+          </div>
+          <div className='flex items-center justify-between gap-3'>
+            <span className='text-[var(--text-muted)] text-small'>Soft deletion cleanup</span>
+            <RetentionSelect
+              allowInherit={!isOrg}
+              value={draft.softDeleteDays}
+              onChange={(softDeleteDays) => onChange({ ...draft, softDeleteDays })}
+            />
           </div>
+          <div className='flex items-center justify-between gap-3'>
+            <span className='text-[var(--text-muted)] text-small'>Task cleanup</span>
+            <RetentionSelect
+              allowInherit={!isOrg}
+              value={draft.taskCleanupDays}
+              onChange={(taskCleanupDays) => onChange({ ...draft, taskCleanupDays })}
+            />
+          </div>
+        </div>
+      </SettingsSection>
 
-          {!isOrg && (
-            <SettingsSection label='Workspaces'>
+      {piiEnabled && (
+        <SettingsSection label='PII redaction'>
+          <div className='flex flex-col gap-4'>
+            {!isOrg && (
               <div className='flex items-center justify-between gap-3'>
-                <span className='min-w-0 text-[var(--text-muted)] text-small'>
-                  {draft.workspaceIds.length > 0
-                    ? `Overrides ${draft.workspaceIds.length} workspace${draft.workspaceIds.length === 1 ? '' : 's'}`
-                    : 'Select the workspaces this override applies to'}
+                <span className='text-[var(--text-muted)] text-small'>
+                  Inherit the organization defaults or set workspace-specific redaction
                 </span>
-                <ChipDropdown
-                  multiple
-                  value={draft.workspaceIds}
-                  onChange={(workspaceIds) => onChange({ ...draft, workspaceIds })}
-                  options={workspaceOptions}
-                  placeholder='Select workspaces'
-                  className='flex-shrink-0'
+                <ChipSwitch
+                  value={draft.piiOverride ? 'override' : 'inherit'}
+                  onChange={(mode) => onChange({ ...draft, piiOverride: mode === 'override' })}
+                  aria-label='PII redaction override mode'
+                  options={[
+                    { value: 'inherit', label: 'Inherit' },
+                    { value: 'override', label: 'Override' },
+                  ]}
                 />
               </div>
-            </SettingsSection>
-          )}
-
-          <SettingsSection label='Retention'>
-            <div className='flex flex-col gap-3'>
-              <div className='flex items-center justify-between gap-3'>
-                <span className='text-[var(--text-muted)] text-small'>Log retention</span>
-                <RetentionSelect
-                  allowInherit={!isOrg}
-                  value={draft.logDays}
-                  onChange={(logDays) => onChange({ ...draft, logDays })}
-                />
-              </div>
-              <div className='flex items-center justify-between gap-3'>
-                <span className='text-[var(--text-muted)] text-small'>Soft deletion cleanup</span>
-                <RetentionSelect
-                  allowInherit={!isOrg}
-                  value={draft.softDeleteDays}
-                  onChange={(softDeleteDays) => onChange({ ...draft, softDeleteDays })}
-                />
-              </div>
-              <div className='flex items-center justify-between gap-3'>
-                <span className='text-[var(--text-muted)] text-small'>Task cleanup</span>
-                <RetentionSelect
-                  allowInherit={!isOrg}
-                  value={draft.taskCleanupDays}
-                  onChange={(taskCleanupDays) => onChange({ ...draft, taskCleanupDays })}
+            )}
+            {showPiiGrid && (
+              <>
+                <EntityCheckboxGrid
+                  selected={draft.piiEntityTypes}
+                  onChange={(piiEntityTypes) => onChange({ ...draft, piiEntityTypes })}
                 />
-              </div>
-            </div>
-          </SettingsSection>
-
-          {piiEnabled && (
-            <SettingsSection label='PII redaction'>
-              <div className='flex flex-col gap-4'>
-                {!isOrg && (
-                  <div className='flex items-center justify-between gap-3'>
-                    <span className='text-[var(--text-muted)] text-small'>
-                      Inherit the organization defaults or set workspace-specific redaction
-                    </span>
-                    <ChipSwitch
-                      value={draft.piiOverride ? 'override' : 'inherit'}
-                      onChange={(mode) => onChange({ ...draft, piiOverride: mode === 'override' })}
-                      aria-label='PII redaction override mode'
-                      options={[
-                        { value: 'inherit', label: 'Inherit' },
-                        { value: 'override', label: 'Override' },
-                      ]}
-                    />
-                  </div>
-                )}
-                {showPiiGrid && (
-                  <>
-                    <EntityCheckboxGrid
-                      selected={draft.piiEntityTypes}
-                      onChange={(piiEntityTypes) => onChange({ ...draft, piiEntityTypes })}
-                    />
-                    <div className='flex items-center justify-between gap-3'>
-                      <span className='text-[var(--text-muted)] text-small'>Language</span>
-                      <PiiLanguageSelect
-                        value={draft.piiLanguage}
-                        onChange={(piiLanguage) => onChange({ ...draft, piiLanguage })}
-                      />
-                    </div>
-                  </>
-                )}
-              </div>
-            </SettingsSection>
-          )}
-        </div>
-      </div>
-    </div>
+                <div className='flex items-center justify-between gap-3'>
+                  <span className='text-[var(--text-muted)] text-small'>Language</span>
+                  <PiiLanguageSelect
+                    value={draft.piiLanguage}
+                    onChange={(piiLanguage) => onChange({ ...draft, piiLanguage })}
+                  />
+                </div>
+              </>
+            )}
+          </div>
+        </SettingsSection>
+      )}
+    </SettingsPanel>
   )
 }
 
@@ -780,16 +775,15 @@ export function DataRetentionSettings() {
         />
       ) : (
         <SettingsPanel
-          actions={
-            <Chip
-              leftIcon={Plus}
-              variant='primary'
-              onClick={openAddOverride}
-              disabled={freeWorkspaces.length === 0}
-            >
-              Add override
-            </Chip>
-          }
+          actions={[
+            {
+              text: 'Add override',
+              icon: Plus,
+              variant: 'primary',
+              onSelect: openAddOverride,
+              disabled: freeWorkspaces.length === 0,
+            },
+          ]}
         >
           <SettingsSection label='Retention policies'>
             <div className='flex flex-col gap-2'>
diff --git a/apps/sim/ee/sso/components/sso-settings.tsx b/apps/sim/ee/sso/components/sso-settings.tsx
index 457a161b0ea..4a6f8e4a4c4 100644
--- a/apps/sim/ee/sso/components/sso-settings.tsx
+++ b/apps/sim/ee/sso/components/sso-settings.tsx
@@ -3,7 +3,6 @@
 import { type ReactNode, useState } from 'react'
 import {
   Button,
-  Chip,
   ChipCombobox,
   ChipInput,
   ChipSelect,
@@ -24,8 +23,9 @@ import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
 import { isBillingEnabled } from '@/lib/core/config/env-flags'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
-import { SaveDiscardActions } from '@/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions'
+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 type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
 import { useSettingsUnsavedGuard } from '@/app/workspace/[workspaceId]/settings/hooks/use-settings-unsaved-guard'
 import { SSO_TRUSTED_PROVIDERS } from '@/ee/sso/constants'
@@ -449,13 +449,7 @@ export function SSO() {
     const providerCallbackUrl = `${getBaseUrl()}/api/auth/${existingProvider.providerType === 'saml' ? 'sso/saml2/callback' : 'sso/callback'}/${existingProvider.providerId}`
 
     return (
-      <SettingsPanel
-        actions={
-          <Button onClick={handleEdit} variant='primary'>
-            Edit
-          </Button>
-        }
-      >
+      <SettingsPanel actions={[{ text: 'Edit', variant: 'primary', onSelect: handleEdit }]}>
         <div className='flex flex-col gap-4.5'>
           <FormField label='Provider ID'>
             <p className='text-[var(--text-primary)] text-small'>{existingProvider.providerId}</p>
@@ -507,7 +501,7 @@ export function SSO() {
   }
 
   return (
-    <form onSubmit={handleSubmit} autoComplete='off' className='flex h-full flex-col'>
+    <form onSubmit={handleSubmit} autoComplete='off'>
       <input
         type='text'
         name='fakeusernameremembered'
@@ -535,24 +529,26 @@ export function SSO() {
       <input type='text' name='hidden' className='hidden' autoComplete='off' />
 
       <SettingsPanel
-        actions={
-          <>
-            {isEditing && !hasChanges && (
-              <Chip onClick={handleDiscard} disabled={configureSSOMutation.isPending}>
-                Cancel
-              </Chip>
-            )}
-            <SaveDiscardActions
-              dirty={hasChanges}
-              saving={configureSSOMutation.isPending}
-              saveDisabled={hasAnyErrors(errors) || !isFormValid()}
-              saveLabel={isEditing ? 'Update' : 'Save'}
-              savingLabel={isEditing ? 'Updating...' : 'Saving...'}
-              onSave={() => void handleSubmit()}
-              onDiscard={handleDiscard}
-            />
-          </>
-        }
+        actions={[
+          ...(isEditing && !hasChanges
+            ? [
+                {
+                  text: 'Cancel',
+                  onSelect: handleDiscard,
+                  disabled: configureSSOMutation.isPending,
+                } satisfies SettingsAction,
+              ]
+            : []),
+          ...saveDiscardActions({
+            dirty: hasChanges,
+            saving: configureSSOMutation.isPending,
+            saveDisabled: hasAnyErrors(errors) || !isFormValid(),
+            saveLabel: isEditing ? 'Update' : 'Save',
+            savingLabel: isEditing ? 'Updating...' : 'Saving...',
+            onSave: () => void handleSubmit(),
+            onDiscard: handleDiscard,
+          }),
+        ]}
       >
         <div className='flex flex-col gap-4.5'>
           <FormField label='Provider Type'>
diff --git a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
index ae2c82d1296..04f34a50472 100644
--- a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
+++ b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
@@ -17,7 +17,7 @@ import {
   CHIP_FIELD_INPUT,
   CHIP_FIELD_SHELL,
 } from '@/app/workspace/[workspaceId]/components/credential-detail'
-import { SaveDiscardActions } from '@/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions'
+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 { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
@@ -328,15 +328,13 @@ export function WhitelabelingSettings() {
 
   return (
     <SettingsPanel
-      actions={
-        <SaveDiscardActions
-          dirty={hasChanges}
-          saving={updateSettings.isPending}
-          saveDisabled={isUploading}
-          onSave={handleSave}
-          onDiscard={handleDiscard}
-        />
-      }
+      actions={saveDiscardActions({
+        dirty: hasChanges,
+        saving: updateSettings.isPending,
+        saveDisabled: isUploading,
+        onSave: handleSave,
+        onDiscard: handleDiscard,
+      })}
     >
       <SettingsSection label='Brand Identity'>
         <div className='flex flex-col gap-5'>

From a61b2ec071260af819807c876893da36e6256116 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Mon, 29 Jun 2026 20:14:17 -0700
Subject: [PATCH 2/6] =?UTF-8?q?refactor(settings):=20cleanup=20pass=20?=
 =?UTF-8?q?=E2=80=94=20deref=20handlers,=20tooltip=20data=20field,=20parit?=
 =?UTF-8?q?y=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Address /cleanup + /simplify + per-page parity audit findings:

- Foundation: shell dereferences action/back/search handlers from the config ref
  at call time, so a section re-render that changes a closure (e.g. a dirty-form
  onSave) can never leave the shell holding a stale handler.
- Add SettingsAction.tooltip (shell renders the hover tooltip, incl. for disabled
  actions). Migrate the secrets-manager + workflow-mcp 'aside' tooltips to data
  actions — eliminates the per-page <div>-wrapped tooltip chips (Emir's no-div).
- Parity: detail-view description no longer falls back to the section meta blurb
  (empty-description groups render blank again); secrets Save keeps no variant.
- Sentence-case: group-detail back 'Access control'; empty-state prose
  'Create API key' / 'Add tool' / 'Add server'.
- Drop redundant array-level 'satisfies SettingsAction[]'; make SettingsPanel
  children optional (loading detail states drop the {null}).
---
 .../settings/components/api-keys/api-keys.tsx |  2 +-
 .../settings/components/copilot/copilot.tsx   |  2 +-
 .../credential-sets/credential-sets.tsx       |  5 +-
 .../components/custom-tools/custom-tools.tsx  |  2 +-
 .../settings/components/mcp/mcp.tsx           | 47 ++++++++--------
 .../secrets-manager/secrets-manager.tsx       | 38 ++++---------
 .../settings-header/settings-header.tsx       | 54 +++++++++++++------
 .../settings-panel/settings-panel.tsx         | 10 ++--
 .../workflow-mcp-servers.tsx                  | 45 +++++-----------
 .../components/group-detail.tsx               |  2 +-
 10 files changed, 96 insertions(+), 111 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index 571911f3630..1fefe86ba36 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
@@ -157,7 +157,7 @@ export function ApiKeys() {
         actions={actions}
       >
         {isLoading ? null : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
-          <SettingsEmptyState>Click "Create API Key" above to get started</SettingsEmptyState>
+          <SettingsEmptyState>Click "Create API key" above to get started</SettingsEmptyState>
         ) : (
           <div className='flex flex-col gap-6'>
             {!searchTerm.trim() ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
index c29abab3127..b02be972520 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
@@ -128,7 +128,7 @@ export function Copilot() {
         actions={actions}
       >
         {isLoading ? null : showEmptyState ? (
-          <SettingsEmptyState>Click "Create API Key" above to get started</SettingsEmptyState>
+          <SettingsEmptyState>Click "Create API key" above to get started</SettingsEmptyState>
         ) : (
           <div className='flex flex-col gap-2'>
             {filteredKeys.map((key) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
index d6a07ce04bf..acdcc5eb116 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
@@ -33,7 +33,6 @@ import { getUserColor } from '@/lib/workspaces/colors'
 import { getUserRole } from '@/lib/workspaces/organization'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 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 { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import {
@@ -608,14 +607,14 @@ export function CredentialSets() {
         }}
         actions={
           canManageCredentialSets
-            ? ([
+            ? [
                 {
                   text: 'Create group',
                   icon: Plus,
                   variant: 'primary',
                   onSelect: () => setShowCreateModal(true),
                 },
-              ] satisfies SettingsAction[])
+              ]
             : undefined
         }
       >
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
index 3d683fd3dfe..a537708b167 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
@@ -115,7 +115,7 @@ export function CustomTools() {
             </p>
           </div>
         ) : isLoading ? null : showEmptyState ? (
-          <SettingsEmptyState>Click "Add Tool" above to get started</SettingsEmptyState>
+          <SettingsEmptyState>Click "Add tool" above to get started</SettingsEmptyState>
         ) : (
           <div className='flex flex-col gap-2'>
             {filteredTools.map((tool) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
index 358a2f0bcb5..626eb0900d5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -23,7 +23,6 @@ import {
 } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 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 { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useMcpOauthPopup } from '@/hooks/mcp/use-mcp-oauth-popup'
@@ -388,19 +387,17 @@ export function MCP() {
       <SettingsPanel
         back={{ text: 'MCP Tools', icon: ArrowLeft, onSelect: handleBackToList }}
         title={server.name || 'Unnamed Server'}
-        actions={
-          [
-            {
-              text: refreshLabel,
-              onSelect: () => handleRefreshServer(server.id),
-              disabled: refreshingServerId === server.id || refreshedServerId === server.id,
-            },
-            {
-              text: 'Edit',
-              onSelect: () => setEditingServerId(server.id),
-            },
-          ] satisfies SettingsAction[]
-        }
+        actions={[
+          {
+            text: refreshLabel,
+            onSelect: () => handleRefreshServer(server.id),
+            disabled: refreshingServerId === server.id || refreshedServerId === server.id,
+          },
+          {
+            text: 'Edit',
+            onSelect: () => setEditingServerId(server.id),
+          },
+        ]}
       >
         <SettingsSection label='Server'>
           <div className='flex flex-col gap-4.5'>
@@ -605,17 +602,15 @@ export function MCP() {
           onChange: setSearchTerm,
           placeholder: 'Search MCPs...',
         }}
-        actions={
-          [
-            {
-              text: 'Add server',
-              icon: Plus,
-              variant: 'primary',
-              onSelect: () => setShowAddModal(true),
-              disabled: serversLoading,
-            },
-          ] satisfies SettingsAction[]
-        }
+        actions={[
+          {
+            text: 'Add server',
+            icon: Plus,
+            variant: 'primary',
+            onSelect: () => setShowAddModal(true),
+            disabled: serversLoading,
+          },
+        ]}
       >
         {error ? (
           <div className='flex h-full flex-col items-center justify-center gap-2'>
@@ -624,7 +619,7 @@ export function MCP() {
             </p>
           </div>
         ) : serversLoading ? null : !hasServers ? (
-          <SettingsEmptyState>Click &quot;Add Server&quot; above to get started</SettingsEmptyState>
+          <SettingsEmptyState>Click &quot;Add server&quot; above to get started</SettingsEmptyState>
         ) : (
           <div className='flex flex-col gap-2'>
             {filteredServers.map((server) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
index cbd687df538..84b226c14ea 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Chip, ChipInput, cn, Tooltip, toast } from '@sim/emcn'
+import { ChipInput, cn, toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { generateShortId } from '@sim/utils/id'
 import { useQueryClient } from '@tanstack/react-query'
@@ -953,33 +953,17 @@ export function SecretsManager() {
                 } satisfies SettingsAction,
               ]
             : []),
-          ...(hasConflicts || hasInvalidKeys
-            ? []
-            : [
-                {
-                  text: isListSaving ? 'Saving...' : 'Save',
-                  variant: 'primary',
-                  onSelect: handleSave,
-                  disabled: isLoading || !hasChanges || 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,
+          },
         ]}
-        aside={
-          hasConflicts || hasInvalidKeys ? (
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <div className='inline-flex'>
-                  <Chip disabled>Save</Chip>
-                </div>
-              </Tooltip.Trigger>
-              {hasConflicts ? (
-                <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>
-              ) : (
-                <Tooltip.Content>Fix invalid variable names before saving</Tooltip.Content>
-              )}
-            </Tooltip.Root>
-          ) : undefined
-        }
       >
         {!isLoading && (
           <div className='flex flex-col gap-7'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
index 5d79de25809..ae05b6c67f7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
@@ -3,6 +3,7 @@
 import {
   type ComponentType,
   createContext,
+  Fragment,
   type ReactNode,
   type Ref,
   useCallback,
@@ -12,7 +13,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Chip, ChipInput, ChipLink, Search } from '@sim/emcn'
+import { Chip, ChipInput, ChipLink, Search, Tooltip } from '@sim/emcn'
 
 /** The strict contract for a settings header action — rendered as a {@link Chip}, data only. */
 export interface SettingsAction {
@@ -22,6 +23,8 @@ export interface SettingsAction {
   active?: boolean
   onSelect: () => void
   disabled?: boolean
+  /** Hover/focus tooltip (e.g. why the action is disabled) — the shell renders it; no per-page JSX. */
+  tooltip?: string
 }
 
 export interface SettingsHeaderSearch {
@@ -62,7 +65,11 @@ interface ReadContextValue {
 
 const ReadContext = createContext<ReadContextValue | null>(null)
 
-/** Visible/structural fields only — callbacks stay in the ref, so registering never loops or serves a stale handler. */
+/**
+ * Serializes only the visible/structural fields — callbacks stay in the ref and
+ * the shell dereferences them at call time, so registering never loops and never
+ * serves a stale handler. Any new VISIBLE field must be added here too.
+ */
 function computeSignature(c: SettingsHeaderConfig): string {
   return JSON.stringify({
     t: c.title ?? '',
@@ -75,6 +82,7 @@ function computeSignature(c: SettingsHeaderConfig): string {
       x.active ?? false,
       x.disabled ?? false,
       x.icon ? 1 : 0,
+      x.tooltip ?? '',
     ]),
     s: c.search ? [c.search.value, c.search.placeholder ?? '', c.search.disabled ?? false] : null,
     aside: c.aside ? 1 : 0,
@@ -120,14 +128,15 @@ export function useSettingsHeader(config: SettingsHeaderConfig) {
  */
 export function SettingsHeaderShell({ children }: { children: ReactNode }) {
   const read = useContext(ReadContext)
-  const config = read?.configRef.current ?? EMPTY_CONFIG
+  const configRef = read?.configRef
+  const config = configRef?.current ?? EMPTY_CONFIG
   const { title, description, docsLink, back, actions, search, aside, scrollContainerRef } = config
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
       <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
         {back ? (
-          <Chip leftIcon={back.icon} onClick={back.onSelect}>
+          <Chip leftIcon={back.icon} onClick={() => configRef?.current.back?.onSelect()}>
             {back.text}
           </Chip>
         ) : (
@@ -140,18 +149,29 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
             </ChipLink>
           )}
           {aside}
-          {actions?.map((action) => (
-            <Chip
-              key={action.text}
-              variant={action.variant}
-              active={action.active}
-              leftIcon={action.icon}
-              onClick={action.onSelect}
-              disabled={action.disabled}
-            >
-              {action.text}
-            </Chip>
-          ))}
+          {actions?.map((action, index) => {
+            const chip = (
+              <Chip
+                variant={action.variant}
+                active={action.active}
+                leftIcon={action.icon}
+                onClick={() => configRef?.current.actions?.[index]?.onSelect()}
+                disabled={action.disabled}
+              >
+                {action.text}
+              </Chip>
+            )
+            return action.tooltip ? (
+              <Tooltip.Root key={action.text}>
+                <Tooltip.Trigger asChild>
+                  <span className='inline-flex'>{chip}</span>
+                </Tooltip.Trigger>
+                <Tooltip.Content>{action.tooltip}</Tooltip.Content>
+              </Tooltip.Root>
+            ) : (
+              <Fragment key={action.text}>{chip}</Fragment>
+            )
+          })}
         </div>
       </div>
       <div
@@ -170,7 +190,7 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
               icon={Search}
               placeholder={search.placeholder ?? 'Search...'}
               value={search.value}
-              onChange={(event) => search.onChange(event.target.value)}
+              onChange={(event) => configRef?.current.search?.onChange(event.target.value)}
               disabled={search.disabled}
               autoComplete='off'
               className='w-full'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx
index cc67b963690..b6d95c30240 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx
@@ -37,7 +37,7 @@ function useSettingsSection(): SettingsSection | null {
 
 interface SettingsPanelProps {
   /** Body content rendered below the header in the centered content column. */
-  children: ReactNode
+  children?: ReactNode
   /** Strict top-right action chips — data only (`text`/`icon`/`variant`/…), never JSX. */
   actions?: SettingsAction[]
   /** Left-aligned back chip for a detail sub-view; omit on list/panel pages. */
@@ -46,7 +46,11 @@ interface SettingsPanelProps {
   search?: SettingsHeaderSearch
   /** Overrides the nav-driven title (e.g. for a detail sub-view). */
   title?: string
-  /** Overrides the nav-driven description. */
+  /**
+   * Overrides the nav-driven description. When `title` is set (a detail sub-view),
+   * the description is used verbatim — it never falls back to the section's meta
+   * blurb, so an entity with no description renders no description.
+   */
   description?: string
   /** Overrides the nav-driven docs link (the "Docs" link rendered in the header bar). */
   docsLink?: string
@@ -80,7 +84,7 @@ export function SettingsPanel({
 
   useSettingsHeader({
     title: title ?? meta?.label,
-    description: description ?? meta?.description,
+    description: title !== undefined ? description : (description ?? meta?.description),
     docsLink: docsLink ?? meta?.docsLink,
     back,
     actions,
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index 4c60795aff1..8b789de1b1b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -6,7 +6,6 @@ import {
   Button,
   ButtonGroup,
   ButtonGroupItem,
-  Chip,
   ChipConfirmModal,
   ChipInput,
   ChipModal,
@@ -20,7 +19,6 @@ import {
   Code,
   type ComboboxOption,
   Label,
-  Tooltip,
 } from '@sim/emcn'
 import { ArrowLeft } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
@@ -355,11 +353,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
   )
 
   if (isLoading) {
-    return (
-      <SettingsPanel back={{ text: 'MCP Servers', icon: ArrowLeft, onSelect: onBack }}>
-        {null}
-      </SettingsPanel>
-    )
+    return <SettingsPanel back={{ text: 'MCP Servers', icon: ArrowLeft, onSelect: onBack }} />
   }
 
   if (error || !data) {
@@ -376,35 +370,24 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
 
   const { server } = data
 
-  const addWorkflowsAside = showAddDisabledTooltip ? (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <div className='inline-flex'>
-          <Chip leftIcon={Plus} variant='primary' disabled>
-            Add workflows
-          </Chip>
-        </div>
-      </Tooltip.Trigger>
-      <Tooltip.Content>All deployed workflows have been added to this server.</Tooltip.Content>
-    </Tooltip.Root>
-  ) : (
-    <Chip
-      leftIcon={Plus}
-      variant='primary'
-      onClick={() => setShowAddWorkflow(true)}
-      disabled={!canAddWorkflow}
-    >
-      Add workflows
-    </Chip>
-  )
-
   return (
     <>
       <SettingsPanel
         back={{ text: 'MCP Servers', icon: ArrowLeft, onSelect: onBack }}
         title={server.name}
-        actions={[{ text: 'Edit server', onSelect: handleOpenEditServer }]}
-        aside={addWorkflowsAside}
+        actions={[
+          {
+            text: 'Add workflows',
+            icon: Plus,
+            variant: 'primary',
+            onSelect: () => setShowAddWorkflow(true),
+            disabled: !canAddWorkflow,
+            tooltip: showAddDisabledTooltip
+              ? 'All deployed workflows have been added to this server.'
+              : undefined,
+          },
+          { text: 'Edit server', onSelect: handleOpenEditServer },
+        ]}
       >
         <div className='flex min-h-0 flex-1 flex-col'>
           <ChipModalTabs
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index 782e3c48bad..0de72eded39 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -1256,7 +1256,7 @@ export function GroupDetail({
   return (
     <>
       <SettingsPanel
-        back={{ text: 'Access Control', icon: ArrowLeft, onSelect: handleBack }}
+        back={{ text: 'Access control', icon: ArrowLeft, onSelect: handleBack }}
         title={viewingGroup.name}
         description={viewingGroup.description ?? undefined}
         actions={[

From 6b929389c657665dc910e4fcd1bb446f96c89b57 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Mon, 29 Jun 2026 20:16:20 -0700
Subject: [PATCH 3/6] docs(settings): document SettingsAction.tooltip in the
 settings rule

---
 .claude/rules/sim-settings-pages.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/.claude/rules/sim-settings-pages.md b/.claude/rules/sim-settings-pages.md
index b479f6d4ae2..f2e7a5f63b5 100644
--- a/.claude/rules/sim-settings-pages.md
+++ b/.claude/rules/sim-settings-pages.md
@@ -55,14 +55,16 @@ return (
 ## `SettingsPanel` props
 
 - `actions?: SettingsAction[]` — right-aligned header chips, **data only**:
-  `{ text, icon?, variant?: 'primary'|'destructive', active?, onSelect, disabled? }`.
+  `{ text, icon?, variant?: 'primary'|'destructive', active?, onSelect, disabled?, tooltip? }`.
   The shell renders each as a `Chip` — never pass JSX, a `<div>`, or `className`
   (the locked contract: it's structurally impossible to vibe-code a padding
   change). Multiple/conditional actions are a plain array
   (`[...(canManage ? [{…}] : []), …]`). Labels are **sentence case** (`Add override`,
-  not `Add Override`). Save/Discard pairs come from the `saveDiscardActions()`
-  helper (spread it into `actions`). A widget that genuinely cannot be a chip
-  (tooltip-wrapped chip, custom dropdown) goes in the `aside` escape hatch.
+  not `Add Override`). A disabled action that needs to explain itself sets
+  `tooltip` (the shell renders the hover tooltip, disabled chip included) — never
+  hand-roll a tooltip-wrapped chip in `aside`. Save/Discard pairs come from the
+  `saveDiscardActions()` helper (spread it into `actions`). Only a widget that
+  genuinely cannot be a chip (e.g. one needing hover-prefetch) goes in `aside`.
 - `back?: SettingsBackAction` (`{ text, icon?, onSelect }`) — left-aligned back
   chip for a **detail sub-view** (e.g. a selected MCP server, a permission group,
   a retention policy). Detail sub-views render through `SettingsPanel` like list

From 8bb7f5483523f45dc92cf8557bfa29c8718227b1 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Mon, 29 Jun 2026 20:22:13 -0700
Subject: [PATCH 4/6] fix(settings): add key to header action chip (biome
 useJsxKeyInIterable)

---
 .../settings/components/settings-header/settings-header.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
index ae05b6c67f7..3a4e1f29207 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
@@ -3,7 +3,6 @@
 import {
   type ComponentType,
   createContext,
-  Fragment,
   type ReactNode,
   type Ref,
   useCallback,
@@ -152,6 +151,7 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
           {actions?.map((action, index) => {
             const chip = (
               <Chip
+                key={action.text}
                 variant={action.variant}
                 active={action.active}
                 leftIcon={action.icon}
@@ -169,7 +169,7 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
                 <Tooltip.Content>{action.tooltip}</Tooltip.Content>
               </Tooltip.Root>
             ) : (
-              <Fragment key={action.text}>{chip}</Fragment>
+              chip
             )
           })}
         </div>

From d56c0a296374c7dbbbecca54f4565d39bb328760 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Mon, 29 Jun 2026 20:30:22 -0700
Subject: [PATCH 5/6] =?UTF-8?q?fix(settings):=20address=20review=20?=
 =?UTF-8?q?=E2=80=94=20remove=20aside=20footgun,=20sticky=20tabs,=20restor?=
 =?UTF-8?q?e=20tooltips?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove the SettingsHeaderConfig 'aside' escape hatch (the last stale-prone,
  div-admitting path). Add SettingsAction.onPrefetch so the teammates Invite chip
  (hover-prefetch) is pure data — nothing renders header JSX now, so the
  signature-vs-ref staleness cursor flagged is gone.
- useIsomorphicLayoutEffect for header registration: section switches flush the
  new header before paint (no stale/blank header frame).
- group-detail: pin the config tabs (sticky top-0) so they stay visible while the
  detail body scrolls.
- Restore the team-management Invite disabled-reason tooltip via the new
  SettingsAction.tooltip field.
---
 .../settings-header/settings-header.tsx       | 31 +++++++++++++------
 .../settings-panel/settings-panel.tsx         |  4 ---
 .../team-management/team-management.tsx       |  1 +
 .../components/teammates/teammates.tsx        | 24 +++++++-------
 .../components/group-detail.tsx               | 12 ++++---
 5 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
index 3a4e1f29207..14a200d89fb 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
@@ -8,12 +8,16 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
 import { Chip, ChipInput, ChipLink, Search, Tooltip } from '@sim/emcn'
 
+/** `useLayoutEffect` on the client (flush header changes before paint), `useEffect` during SSR. */
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
+
 /** The strict contract for a settings header action — rendered as a {@link Chip}, data only. */
 export interface SettingsAction {
   text: string
@@ -24,6 +28,8 @@ export interface SettingsAction {
   disabled?: boolean
   /** Hover/focus tooltip (e.g. why the action is disabled) — the shell renders it; no per-page JSX. */
   tooltip?: string
+  /** Warm a lazy resource on hover/focus (e.g. prefetch the upgrade flow). */
+  onPrefetch?: () => void
 }
 
 export interface SettingsHeaderSearch {
@@ -49,8 +55,6 @@ export interface SettingsHeaderConfig {
   search?: SettingsHeaderSearch
   /** Forwarded to the scroll region (e.g. for programmatic scroll-to-bottom). */
   scrollContainerRef?: Ref<HTMLDivElement>
-  /** Escape hatch for a right-aligned widget that genuinely cannot be a chip. */
-  aside?: ReactNode
 }
 
 const EMPTY_CONFIG: SettingsHeaderConfig = {}
@@ -82,9 +86,9 @@ function computeSignature(c: SettingsHeaderConfig): string {
       x.disabled ?? false,
       x.icon ? 1 : 0,
       x.tooltip ?? '',
+      x.onPrefetch ? 1 : 0,
     ]),
     s: c.search ? [c.search.value, c.search.placeholder ?? '', c.search.disabled ?? false] : null,
-    aside: c.aside ? 1 : 0,
   })
 }
 
@@ -111,25 +115,25 @@ export function SettingsHeaderProvider({ children }: { children: ReactNode }) {
 export function useSettingsHeader(config: SettingsHeaderConfig) {
   const register = useContext(RegisterContext)
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     register?.(config)
   })
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     return () => register?.(EMPTY_CONFIG)
   }, [register])
 }
 
 /**
  * The single owner of settings page chrome: the header bar (back chip, Docs link,
- * action chips, `aside`), the scroll region, and the centered column led by the
- * title + description, then search and `{children}`.
+ * action chips), the scroll region, and the centered column led by the title +
+ * description, then search and `{children}`.
  */
 export function SettingsHeaderShell({ children }: { children: ReactNode }) {
   const read = useContext(ReadContext)
   const configRef = read?.configRef
   const config = configRef?.current ?? EMPTY_CONFIG
-  const { title, description, docsLink, back, actions, search, aside, scrollContainerRef } = config
+  const { title, description, docsLink, back, actions, search, scrollContainerRef } = config
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
@@ -147,7 +151,6 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
               Docs
             </ChipLink>
           )}
-          {aside}
           {actions?.map((action, index) => {
             const chip = (
               <Chip
@@ -156,6 +159,16 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
                 active={action.active}
                 leftIcon={action.icon}
                 onClick={() => configRef?.current.actions?.[index]?.onSelect()}
+                onMouseEnter={
+                  action.onPrefetch
+                    ? () => configRef?.current.actions?.[index]?.onPrefetch?.()
+                    : undefined
+                }
+                onFocus={
+                  action.onPrefetch
+                    ? () => configRef?.current.actions?.[index]?.onPrefetch?.()
+                    : undefined
+                }
                 disabled={action.disabled}
               >
                 {action.text}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx
index b6d95c30240..9ec6ea696c4 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx
@@ -54,8 +54,6 @@ interface SettingsPanelProps {
   description?: string
   /** Overrides the nav-driven docs link (the "Docs" link rendered in the header bar). */
   docsLink?: string
-  /** Escape hatch for a right-aligned widget that genuinely cannot be a chip. Rare. */
-  aside?: ReactNode
   /** Forwarded to the scroll region (e.g. for programmatic scroll-to-bottom). */
   scrollContainerRef?: Ref<HTMLDivElement>
 }
@@ -76,7 +74,6 @@ export function SettingsPanel({
   title,
   description,
   docsLink,
-  aside,
   scrollContainerRef,
 }: SettingsPanelProps) {
   const section = useSettingsSection()
@@ -89,7 +86,6 @@ export function SettingsPanel({
     back,
     actions,
     search,
-    aside,
     scrollContainerRef,
   })
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
index dfdd71bb9d3..60776f5da79 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
@@ -320,6 +320,7 @@ export function TeamManagement() {
             variant: 'primary',
             onSelect: () => setInviteModalOpen(true),
             disabled: isInvitationsDisabled,
+            tooltip: isInvitationsDisabled ? 'Invitations are disabled' : undefined,
           },
         ]}
       >
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
index 31ed6774ffa..5ecf4da0c52 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { Chip, ChipDropdown, Plus, toast } from '@sim/emcn'
+import { ChipDropdown, Plus, toast } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams, useRouter } from 'next/navigation'
@@ -170,18 +170,16 @@ export function Teammates() {
           onChange: setSearchTerm,
           placeholder: 'Search teammates...',
         }}
-        aside={
-          <Chip
-            leftIcon={Plus}
-            variant='primary'
-            onClick={handleInvite}
-            onMouseEnter={isInvitationsDisabled ? prefetchUpgrade : undefined}
-            onFocus={isInvitationsDisabled ? prefetchUpgrade : undefined}
-            title={inviteDisabledReason ?? undefined}
-          >
-            Invite
-          </Chip>
-        }
+        actions={[
+          {
+            text: 'Invite',
+            icon: Plus,
+            variant: 'primary',
+            onSelect: handleInvite,
+            tooltip: inviteDisabledReason ?? undefined,
+            onPrefetch: isInvitationsDisabled ? prefetchUpgrade : undefined,
+          },
+        ]}
       >
         <MemberSection
           label={`Teammates (${teammates.length})`}
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index 0de72eded39..b538d512b46 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -1274,11 +1274,13 @@ export function GroupDetail({
           },
         ]}
       >
-        <ChipModalTabs
-          tabs={tabs}
-          value={configTab}
-          onChange={(value) => setConfigTab(value as ConfigTab)}
-        />
+        <div className='sticky top-0 z-10 bg-[var(--bg)]'>
+          <ChipModalTabs
+            tabs={tabs}
+            value={configTab}
+            onChange={(value) => setConfigTab(value as ConfigTab)}
+          />
+        </div>
 
         {configTab === 'general' && (
           <>

From f174569d988cccc8f9aef522d3574659680f9831 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Mon, 29 Jun 2026 21:04:53 -0700
Subject: [PATCH 6/6] =?UTF-8?q?refactor(settings):=20final=20audit=20pass?=
 =?UTF-8?q?=20=E2=80=94=20parity,=20sentence-case,=20import=20consistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

From a line-by-line audit (+ React-docs validation of the click-time ref deref and
isomorphic layout-effect patterns):
- workflow-mcp detail: restore origin action order (Edit server, then the primary
  Add workflows) so the primary CTA stays rightmost.
- Sentence-case the detail back-chip labels to match nav ('MCP tools', 'MCP
  servers'); fix the workflow-mcp list empty-state copy ('Add server').
- data-retention: import ArrowLeft from '@sim/emcn/icons' (canonical back-chip icon
  source, matching the other detail views); group-detail: import SettingsPanel from
  the package index, not the deep file path.
- Document that scrollContainerRef is intentionally excluded from the header
  signature (refs are identity-stable).
---
 .../[workspaceId]/settings/components/mcp/mcp.tsx      |  2 +-
 .../components/settings-header/settings-header.tsx     |  4 +++-
 .../workflow-mcp-servers/workflow-mcp-servers.tsx      | 10 +++++-----
 apps/sim/ee/access-control/components/group-detail.tsx |  2 +-
 .../components/data-retention-settings.tsx             |  3 ++-
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
index 626eb0900d5..b0a185065b8 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -385,7 +385,7 @@ export function MCP() {
 
     return (
       <SettingsPanel
-        back={{ text: 'MCP Tools', icon: ArrowLeft, onSelect: handleBackToList }}
+        back={{ text: 'MCP tools', icon: ArrowLeft, onSelect: handleBackToList }}
         title={server.name || 'Unnamed Server'}
         actions={[
           {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
index 14a200d89fb..52d3a19cbd7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx
@@ -71,7 +71,9 @@ const ReadContext = createContext<ReadContextValue | null>(null)
 /**
  * Serializes only the visible/structural fields — callbacks stay in the ref and
  * the shell dereferences them at call time, so registering never loops and never
- * serves a stale handler. Any new VISIBLE field must be added here too.
+ * serves a stale handler. `scrollContainerRef` is intentionally excluded (refs are
+ * identity-stable and ride along with the first content-bearing register). Any new
+ * VISIBLE field must be added here too.
  */
 function computeSignature(c: SettingsHeaderConfig): string {
   return JSON.stringify({
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index 8b789de1b1b..60deec155c3 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -353,12 +353,12 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
   )
 
   if (isLoading) {
-    return <SettingsPanel back={{ text: 'MCP Servers', icon: ArrowLeft, onSelect: onBack }} />
+    return <SettingsPanel back={{ text: 'MCP servers', icon: ArrowLeft, onSelect: onBack }} />
   }
 
   if (error || !data) {
     return (
-      <SettingsPanel back={{ text: 'MCP Servers', icon: ArrowLeft, onSelect: onBack }}>
+      <SettingsPanel back={{ text: 'MCP servers', icon: ArrowLeft, onSelect: onBack }}>
         <div className='flex min-h-0 flex-1 items-center justify-center'>
           <p className='text-[var(--text-error)] text-xs leading-tight'>
             Failed to load server details
@@ -373,9 +373,10 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
   return (
     <>
       <SettingsPanel
-        back={{ text: 'MCP Servers', icon: ArrowLeft, onSelect: onBack }}
+        back={{ text: 'MCP servers', icon: ArrowLeft, onSelect: onBack }}
         title={server.name}
         actions={[
+          { text: 'Edit server', onSelect: handleOpenEditServer },
           {
             text: 'Add workflows',
             icon: Plus,
@@ -386,7 +387,6 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
               ? 'All deployed workflows have been added to this server.'
               : undefined,
           },
-          { text: 'Edit server', onSelect: handleOpenEditServer },
         ]}
       >
         <div className='flex min-h-0 flex-1 flex-col'>
@@ -949,7 +949,7 @@ export function WorkflowMcpServers() {
             </div>
           ) : isLoading ? null : !hasServers ? (
             <SettingsEmptyState>
-              Click &quot;Add Server&quot; above to get started
+              Click &quot;Add server&quot; above to get started
             </SettingsEmptyState>
           ) : (
             <div className='flex flex-col gap-2'>
diff --git a/apps/sim/ee/access-control/components/group-detail.tsx b/apps/sim/ee/access-control/components/group-detail.tsx
index b538d512b46..dc1513346b0 100644
--- a/apps/sim/ee/access-control/components/group-detail.tsx
+++ b/apps/sim/ee/access-control/components/group-detail.tsx
@@ -36,7 +36,7 @@ import {
 } from '@/app/workspace/[workspaceId]/settings/components/member-list'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import { saveDiscardActions } from '@/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions'
-import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel'
+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'
 import { getAllBlocks } from '@/blocks'
diff --git a/apps/sim/ee/data-retention/components/data-retention-settings.tsx b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
index c716319c60c..b9b08e656d9 100644
--- a/apps/sim/ee/data-retention/components/data-retention-settings.tsx
+++ b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
@@ -12,11 +12,12 @@ import {
   Search,
   toast,
 } from '@sim/emcn'
+import { ArrowLeft } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { isOrgAdminRole } from '@sim/platform-authz/predicates'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
-import { ArrowLeft, ArrowRight, Plus } from 'lucide-react'
+import { ArrowRight, Plus } from 'lucide-react'
 import type { UpdateOrganizationDataRetentionBody } from '@/lib/api/contracts/organization'
 import type { RetentionOverride } from '@/lib/api/contracts/primitives'
 import { useSession } from '@/lib/auth/auth-client'