refactor(settings): fold verified domains into SSO, move group-detail state to nuqs, design-system cleanup (#5950)

* refactor(settings): fold verified domains into SSO and use shared primitives

Verified domains only gates SSO, so managing it on a separate page meant
discovering the requirement after filling out the whole IdP form and then
navigating away mid-setup. Move it into the SSO page as a section above the
provider config and drop the standalone page, its nav entry, and both route
branches.

Align the surfaces with the shared settings primitives rather than bespoke
chrome, matching whitelabeling/custom-blocks/access-control:
- SSO's local FormField (muted labels) is replaced by the shared SettingRow, so
  its fields read like every other settings page. SettingRow gains optional
  `optional` and `error` props to absorb what FormField did — additive, so
  existing consumers are untouched.
- The domains section is built from SettingsSection, SettingRow,
  SettingsResourceRow, and SettingsEmptyState instead of hand-rolled cards.

Also drop the redundant Upload/Change buttons in whitelabeling: the logo and
wordmark thumbnails were already clickable, so the button was a second control
for the same action. Remove still appears once an image is set.

* fix(settings): move group-detail view state to nuqs and clean up design-system drift

Access control's group detail kept its tab, three search boxes, and three status
filters in useState, so a `?group-id=` link always landed on General and a filter
was lost on reload — the parent already puts the group id in the URL. The three
tabs never render together, so search and status share one param each rather than
carrying three mutually-exclusive keys, and switching tabs resets both. Closing
the detail clears all three alongside group-id in one batched write, so nothing
lingers on the list URL.

Design-system fixes from a cleanup pass over the surfaces this branch touched:
- Restore accessible names lost when the whitelabeling Upload buttons were
  removed. The thumbnail is now the only click target, and it contained just an
  icon, so it announced as an unlabeled button; the icon-only Remove had the same
  problem. Both now carry aria-labels reflecting their state.
- Use Chip, not the legacy Button, for the domain actions — Button is ~26px
  against the 30px ChipInput beside it, so "Add domain" sat visibly short.
- SettingRow now uses the emcn Info component; a bare svg as Tooltip.Trigger was
  neither focusable nor nameable. It also stops re-specifying Label's own default
  styling.
- Use the new SettingRow error prop for the group name instead of a hand-rolled
  error paragraph, which is what the prop was added for.
- Hoist the block-category lookup out of a sort comparator, size-* over h/w, name
  the staleTime constants the rules require, and import RowActionsMenu from its
  barrel.

* fix(settings): alias the old /settings/domains path to SSO

Folding verified domains into the SSO page dropped /settings/domains, so
bookmarks and shared links 404'd instead of landing where domains now live. Both
alias maps already exist for exactly this (organization/'members',
subscription/'billing'); add domains -> sso to each.

* chore(settings): adopt ChipCopyInput, named staleTime constants, and a11y labels

* fix(settings): reset group detail params on open and drop issuer mono styling

Author: waleedlatif1

apps/docs/content/docs/en/platform/enterprise/verified-domains.mdx

@@ -16,7 +16,7 @@ Verified Domains let organization owners and admins on Enterprise plans prove th
 
 ## Verify a domain
 
-Go to **Settings → Security → Verified domains** in your organization settings.
+Go to **Settings → Security → Single sign-on** in your organization settings. Domains are managed in the **Verified domains** section at the top of that page, directly above the identity provider configuration.
 
 1. Enter the domain, for example `acme.com`, and click **Add domain**.
 2. Sim shows a DNS **TXT record** to publish — a host (`_sim-challenge.acme.com`) and a unique value (`sim-domain-verification=…`).

apps/sim/app/api/auth/sso/register/route.ts

@@ -148,7 +148,7 @@ export const POST = withRouteHandler(async (request: NextRequest) => {
     const domainNotVerifiedResponse = () =>
       NextResponse.json(
         {
-          error: `Verify ownership of ${domain} under Settings → Verified domains before configuring SSO for it.`,
+          error: `Verify ownership of ${domain} under Verified domains above before configuring SSO for it.`,
           code: 'SSO_DOMAIN_NOT_VERIFIED',
         },
         { status: 403 }

apps/sim/app/workspace/[workspaceId]/settings/[section]/page.tsx

@@ -36,6 +36,8 @@ const SECTION_ALIASES: Readonly<Record<string, SettingsSection>> = {
   subscription: 'billing',
   team: 'organization',
   'api-keys': 'apikeys',
+  // Verified domains moved into the SSO page; keep old links working.
+  domains: 'sso',
 }
 
 const TOP_LEVEL_REDIRECTS: Readonly<Record<string, (workspaceId: string) => string>> = {

apps/sim/app/workspace/[workspaceId]/settings/[section]/search-params.ts

@@ -80,6 +80,57 @@ export const groupIdUrlKeys = {
   clearOnDefault: true,
 } as const
 
+/**
+ * `group-tab` is the active tab inside the deep-linked permission-group detail
+ * view, so a shared `group-id` link can land on the same tab (mirrors
+ * `server-tab` on the workflow MCP server detail).
+ */
+export const groupTabParam = {
+  key: 'group-tab',
+  parser: parseAsStringLiteral(['general', 'providers', 'blocks', 'platform'] as const).withDefault(
+    'general'
+  ),
+} as const
+
+/** Tab view-state: clean URLs, no back-stack churn. */
+export const groupTabUrlKeys = {
+  history: 'replace',
+  clearOnDefault: true,
+} as const
+
+/**
+ * `group-search` is the search box inside the permission-group detail view. The
+ * provider/block/platform tabs never render together, so they share one param
+ * rather than carrying three mutually-exclusive keys; the tab handler clears it
+ * so a query cannot bleed across tabs. Distinct from the list's shared
+ * `?search=` (`useSettingsSearch`), which belongs to the group list behind it.
+ */
+export const groupSearchParam = {
+  key: 'group-search',
+  parser: parseAsString.withDefault(''),
+} as const
+
+/** Search view-state: clean URLs, no back-stack churn. */
+export const groupSearchUrlKeys = {
+  history: 'replace',
+  clearOnDefault: true,
+} as const
+
+/**
+ * `group-status` filters the permission-group detail's toggle lists by enabled
+ * state. Shared across the tabs for the same reason as `group-search`.
+ */
+export const groupStatusParam = {
+  key: 'group-status',
+  parser: parseAsStringLiteral(['all', 'enabled', 'disabled'] as const).withDefault('all'),
+} as const
+
+/** Filter view-state: clean URLs, no back-stack churn. */
+export const groupStatusUrlKeys = {
+  history: 'replace',
+  clearOnDefault: true,
+} as const
+
 /**
  * `custom-block-id` deep-links the Custom Blocks settings tab to a specific
  * block's detail sub-view. The "create new" flow stays in local state — only

apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx

@@ -81,9 +81,6 @@ const AuditLogs = dynamic(() =>
   import('@/ee/audit-logs/components/audit-logs').then((m) => m.AuditLogs)
 )
 const SSO = dynamic(() => import('@/ee/sso/components/sso-settings').then((m) => m.SSO))
-const DomainSettings = dynamic(() =>
-  import('@/ee/sso/components/domain-settings').then((m) => m.DomainSettings)
-)
 const SessionPolicySettings = dynamic(() =>
   import('@/ee/session-policy/components/session-policy-settings').then(
     (m) => m.SessionPolicySettings
@@ -166,9 +163,6 @@ export function SettingsPage({ section }: SettingsPageProps) {
         />
       )}
       {effectiveSection === 'sso' && organizationId && <SSO organizationId={organizationId} />}
-      {effectiveSection === 'domains' && organizationId && (
-        <DomainSettings key={organizationId} organizationId={organizationId} />
-      )}
       {effectiveSection === 'sessions' && organizationId && (
         <SessionPolicySettings key={organizationId} organizationId={organizationId} />
       )}

apps/sim/app/workspace/[workspaceId]/settings/navigation.test.ts

@@ -39,7 +39,6 @@ describe('unified settings navigation', () => {
       { id: 'inbox', label: 'Sim mailer', section: 'system' },
       { id: 'recently-deleted', label: 'Recently deleted', section: 'system' },
       { id: 'sso', label: 'Single sign-on', section: 'enterprise' },
-      { id: 'domains', label: 'Verified domains', section: 'enterprise' },
       { id: 'sessions', label: 'Session policies', section: 'enterprise' },
       { id: 'data-retention', label: 'Data retention', section: 'enterprise' },
       { id: 'data-drains', label: 'Data drains', section: 'enterprise' },

apps/sim/components/settings/navigation.test.ts

@@ -42,7 +42,6 @@ describe('settings navigation boundaries', () => {
       'inbox',
       'recently-deleted',
       'sso',
-      'domains',
       'sessions',
       'data-retention',
       'data-drains',
@@ -65,7 +64,6 @@ describe('settings navigation boundaries', () => {
       'access-control',
       'audit-logs',
       'sso',
-      'domains',
       'sessions',
       'data-retention',
       'data-drains',
@@ -121,7 +119,6 @@ describe('settings navigation boundaries', () => {
       'billing',
       'data-drains',
       'data-retention',
-      'domains',
       'organization',
       'sessions',
       'sso',

apps/sim/components/settings/navigation.ts

@@ -6,7 +6,6 @@ import {
   HexSimple,
   Key,
   KeySquare,
-  Link,
   Lock,
   LogIn,
   Palette,
@@ -43,7 +42,6 @@ export type OrganizationSettingsSection =
   | 'access-control'
   | 'audit-logs'
   | 'sso'
-  | 'domains'
   | 'sessions'
   | 'data-retention'
   | 'data-drains'
@@ -90,7 +88,6 @@ export type UnifiedSettingsSection =
   | 'teammates'
   | 'organization'
   | 'sso'
-  | 'domains'
   | 'whitelabeling'
   | 'copilot'
   | 'forks'
@@ -223,6 +220,8 @@ export const ACCOUNT_SETTINGS_PATH_ALIASES = {
 
 export const ORGANIZATION_SETTINGS_PATH_ALIASES = {
   organization: 'members',
+  // Verified domains moved into the SSO page; keep old links working.
+  domains: 'sso',
 } as const satisfies Readonly<Record<string, OrganizationSettingsSection>>
 
 export const WORKSPACE_SETTINGS_PATH_ALIASES = {
@@ -544,22 +543,6 @@ export const SETTINGS_SECTION_REGISTRY: readonly SettingsSectionRegistryEntry[]
       organization: { id: 'sso', group: 'security', order: 4 },
     },
   },
-  {
-    label: 'Verified domains',
-    icon: Link,
-    docsLink: 'https://docs.sim.ai/platform/enterprise/verified-domains',
-    unified: {
-      id: 'domains',
-      description: 'Prove ownership of your email domains before configuring SSO.',
-      group: 'enterprise',
-      requiresHosted: true,
-      requiresEnterprise: true,
-      selfHostedOverride: SETTINGS_SELF_HOSTED_OVERRIDES.sso,
-    },
-    planes: {
-      organization: { id: 'domains', group: 'security', order: 5 },
-    },
-  },
   {
     label: 'Session policies',
     icon: Clock,
@@ -573,7 +556,7 @@ export const SETTINGS_SECTION_REGISTRY: readonly SettingsSectionRegistryEntry[]
       selfHostedOverride: SETTINGS_SELF_HOSTED_OVERRIDES.sessionPolicies,
     },
     planes: {
-      organization: { id: 'sessions', group: 'security', order: 6 },
+      organization: { id: 'sessions', group: 'security', order: 5 },
     },
   },
   {
@@ -590,7 +573,7 @@ export const SETTINGS_SECTION_REGISTRY: readonly SettingsSectionRegistryEntry[]
       selfHostedOverride: SETTINGS_SELF_HOSTED_OVERRIDES.dataRetention,
     },
     planes: {
-      organization: { id: 'data-retention', group: 'enterprise', order: 7 },
+      organization: { id: 'data-retention', group: 'enterprise', order: 6 },
     },
   },
   {
@@ -606,7 +589,7 @@ export const SETTINGS_SECTION_REGISTRY: readonly SettingsSectionRegistryEntry[]
       selfHostedOverride: SETTINGS_SELF_HOSTED_OVERRIDES.dataDrains,
     },
     planes: {
-      organization: { id: 'data-drains', group: 'enterprise', order: 8 },
+      organization: { id: 'data-drains', group: 'enterprise', order: 7 },
     },
   },
   {
@@ -622,7 +605,7 @@ export const SETTINGS_SECTION_REGISTRY: readonly SettingsSectionRegistryEntry[]
       selfHostedOverride: SETTINGS_SELF_HOSTED_OVERRIDES.whitelabeling,
     },
     planes: {
-      organization: { id: 'whitelabeling', group: 'enterprise', order: 9 },
+      organization: { id: 'whitelabeling', group: 'enterprise', order: 8 },
     },
   },
   {
@@ -758,7 +741,6 @@ export function getOrganizationSettingsFeatures(
       'access-control': SETTINGS_SELF_HOSTED_OVERRIDES.accessControl,
       'audit-logs': SETTINGS_SELF_HOSTED_OVERRIDES.auditLogs,
       sso: SETTINGS_SELF_HOSTED_OVERRIDES.sso,
-      domains: SETTINGS_SELF_HOSTED_OVERRIDES.sso,
       sessions: SETTINGS_SELF_HOSTED_OVERRIDES.sessionPolicies,
       'data-retention': SETTINGS_SELF_HOSTED_OVERRIDES.dataRetention,
       'data-drains': SETTINGS_SELF_HOSTED_OVERRIDES.dataDrains,

apps/sim/components/settings/organization-settings-renderer.tsx

@@ -23,9 +23,6 @@ const AuditLogs = dynamic(() =>
   import('@/ee/audit-logs/components/audit-logs').then((module) => module.AuditLogs)
 )
 const SSO = dynamic(() => import('@/ee/sso/components/sso-settings').then((module) => module.SSO))
-const DomainSettings = dynamic(() =>
-  import('@/ee/sso/components/domain-settings').then((module) => module.DomainSettings)
-)
 const SessionPolicySettings = dynamic(() =>
   import('@/ee/session-policy/components/session-policy-settings').then(
     (module) => module.SessionPolicySettings
@@ -71,9 +68,6 @@ export function OrganizationSettingsRenderer({
   }
   if (section === 'audit-logs') return <AuditLogs organizationId={organizationId} />
   if (section === 'sso') return <SSO organizationId={organizationId} />
-  if (section === 'domains') {
-    return <DomainSettings key={organizationId} organizationId={organizationId} />
-  }
   if (section === 'sessions') {
     return <SessionPolicySettings key={organizationId} organizationId={organizationId} />
   }

apps/sim/ee/access-control/components/access-control.tsx

@@ -22,6 +22,12 @@ import { getEnv, isTruthy } from '@/lib/core/config/env'
 import {
   groupIdParam,
   groupIdUrlKeys,
+  groupSearchParam,
+  groupSearchUrlKeys,
+  groupStatusParam,
+  groupStatusUrlKeys,
+  groupTabParam,
+  groupTabUrlKeys,
 } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
@@ -85,6 +91,45 @@ export function AccessControl({ isOrganizationAdmin, organizationId }: AccessCon
     ...groupIdParam.parser,
     ...groupIdUrlKeys,
   })
+
+  // Params scoped to the detail sub-view are cleared alongside the group id, so
+  // a tab/search/filter can't linger on the list URL after going back. nuqs
+  // batches these same-tick writes into a single URL update.
+  const [, setGroupTab] = useQueryState(groupTabParam.key, {
+    ...groupTabParam.parser,
+    ...groupTabUrlKeys,
+  })
+  const [, setGroupSearch] = useQueryState(groupSearchParam.key, {
+    ...groupSearchParam.parser,
+    ...groupSearchUrlKeys,
+  })
+  const [, setGroupStatus] = useQueryState(groupStatusParam.key, {
+    ...groupStatusParam.parser,
+    ...groupStatusUrlKeys,
+  })
+
+  /**
+   * The detail view's tab/search/status params are scoped to one group, so both
+   * transitions reset them — otherwise a stale `group-id` that never resolves
+   * leaves them in the URL and the next group opens on the previous group's tab
+   * and filters. nuqs batches these same-tick writes into one URL update.
+   */
+  const openGroupDetail = useCallback(
+    (groupId: string) => {
+      void setSelectedGroupId(groupId)
+      void setGroupTab(null)
+      void setGroupSearch(null)
+      void setGroupStatus(null)
+    },
+    [setSelectedGroupId, setGroupTab, setGroupSearch, setGroupStatus]
+  )
+
+  const closeGroupDetail = useCallback(() => {
+    void setSelectedGroupId(null, { history: 'replace' })
+    void setGroupTab(null)
+    void setGroupSearch(null)
+    void setGroupStatus(null)
+  }, [setSelectedGroupId, setGroupTab, setGroupSearch, setGroupStatus])
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [newGroupName, setNewGroupName] = useState('')
   const [newGroupDescription, setNewGroupDescription] = useState('')
@@ -169,8 +214,8 @@ export function AccessControl({ isOrganizationAdmin, organizationId }: AccessCon
         workspaceOptions={workspaceOptions}
         organizationWorkspaces={organizationWorkspaces}
         workspacesLoading={workspacesLoading}
-        onBack={() => void setSelectedGroupId(null, { history: 'replace' })}
-        onDeleted={() => void setSelectedGroupId(null, { history: 'replace' })}
+        onBack={closeGroupDetail}
+        onDeleted={closeGroupDetail}
       />
     )
   }
@@ -207,7 +252,7 @@ export function AccessControl({ isOrganizationAdmin, organizationId }: AccessCon
                 <button
                   key={group.id}
                   type='button'
-                  onClick={() => void setSelectedGroupId(group.id)}
+                  onClick={() => openGroupDetail(group.id)}
                   className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
                 >
                   <div className='flex min-w-0 flex-1 flex-col'>