improvement(settings): consolidate resource UI onto shared primitives

Sandboxes, MCP tools, and MCP servers each modeled their list rows and
detail headers differently. Collapse them — and the surfaces they drifted
from — onto one set of primitives.

SettingsResourceRow now owns the row entirely: tile, title/subtitle tokens,
padding and bleed, hover band, hit area, focus ring, and the one navigation
chevron. Adds onClick/href (a stretched overlay, so interactive trailing
controls keep their clicks), navigable, iconVariant='custom', and a badge
slot for decoration that must not swallow row clicks.

Rows that open a detail page get a chevron and a whole-row click; flat
records keep the "..." menu. Delete moves to the detail header as a
destructive chip behind a confirm modal — sandboxes previously deleted with
no confirmation at all.

Also folds in SettingsField (new), SettingsEmptyState tone='error',
RESOURCE_LIST_STACK/GRID, RESOURCE_TILE_PLAIN, and a shared MemberAvatar;
deletes DetailIconTile (byte-identical to ResourceTile); and standardizes
on the emcn ArrowRight, which is a visibly different glyph from lucide's.

Author: waleedlatif1

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

@@ -107,19 +107,14 @@ token (if the pixel value matches one exactly) or a sign the page never migrated
 grep `text-\[1[0-8]px\]` under `apps/sim/app/workspace/*/settings/**` and
 `apps/sim/ee/**` to find stragglers.
 
-For a two-line list row (title/value on top, a muted subtitle below — a name +
-email, a tool name + description, a server name + status), the established
-pairing is:
+Watch `text-xs`: it is 11px here, so a "caption" written as `text-xs` is a pixel
+short. See `sim-styling.md` for the full scale.
 
-- **Title / row value**: `text-[var(--text-body)] text-sm`
-- **Subtitle / muted description**: `text-[var(--text-muted)] text-caption`
-
-This is not a stylistic guess — it is the tokenized form of the literal-pixel
-pairing (`text-[14px] text-[var(--text-body)]` / `text-[12px]
-text-[var(--text-muted)]`) already used for this exact row shape across
-`member-list.tsx`, `api-keys.tsx`, `mcp.tsx`, `billing.tsx`,
-`workflow-mcp-servers.tsx`, and others — keep new rows consistent with it rather
-than inventing a new size pairing.
+The two-line list row (title over a muted subtitle — a name + email, a tool name
++ description, a server name + status) is **not something you build**: it is
+`SettingsResourceRow`, which owns the pairing
+(`text-[var(--text-body)] text-sm` over `text-[var(--text-muted)] text-caption`).
+See "The resource row" below.
 
 For a toggle row (a `Switch` with a title and optional description), use the emcn
 `Label` component for the title — never a hand-rolled `<span>` — paired with
@@ -145,21 +140,98 @@ independently-defined tokens (not interchangeable — they resolve to different
 colors) and both see legitimate use across settings pages; this rule only pins
 down the **row title/subtitle** shape above, not every text element on every page.
 
+## The resource row
+
+**`SettingsResourceRow`** (`…/components/settings-resource-row`) is *the* list row
+for every settings resource — and for skills, integrations, and the `ee/` surfaces
+too. It owns the tile, the title/subtitle tokens, the row padding and bleed
+(`-mx-2 … rounded-lg p-2`), the hover band, the hit area, the focus ring, and the
+navigation chevron. Never hand-roll any of it, and never wrap the row in your own
+`<button>` or `<Link>` — that is what `onClick`/`href` are for.
+
+```tsx
+<div className={RESOURCE_LIST_STACK}>
+  {items.map((item) => (
+    <SettingsResourceRow
+      key={item.id}
+      icon={<Wrench className='text-[var(--text-icon)]' />}
+      iconFilled
+      title={item.name}
+      description={item.summary}
+      onClick={() => open(item.id)}   // or href={`…/${item.id}`}
+      clickLabel={`Open ${item.name}`}
+      navigable
+    />
+  ))}
+</div>
+```
+
+- `icon?` + `iconVariant` — `tile` (default, the 36px bordered tile), `plain` (a
+  bare 14px glyph), `custom` (you supply the whole tile, e.g. the brand-tinted
+  `IntegrationTile`). Omit `icon` entirely for resources with no identity glyph
+  (an API key, a permission group). `iconFilled` uses the skills/tools fill;
+  `iconFill` lets an uploaded image reach the tile edge.
+- `onClick` / `href` — makes the **whole row** activatable via a stretched
+  overlay. Prefer `href` when the destination is a route, so the row keeps
+  prefetch, middle-click, and open-in-new-tab. `clickLabel` is the accessible
+  name and is **required** alongside either: the overlay has no text of its own.
+- `navigable` — appends the one canonical chevron. Set it on rows that open a
+  detail page; leave it off when `onClick` acts in place (revealing a folder).
+  Never import an arrow yourself: `lucide-react` and `@sim/emcn/icons` ship
+  visibly different glyphs, and the row already picked one.
+- `trailing` vs `badge` — `trailing` is for **interactive** controls (a `Chip`, a
+  `RowActionsMenu`) and sits above the hit area. `badge` is for **decoration** (a
+  status tag) and is click-through. Putting a badge in `trailing` turns the row's
+  right edge into a dead zone.
+- `RESOURCE_LIST_STACK` / `RESOURCE_LIST_GRID` — the single-column and two-up
+  containers. A `SettingsResourceRow` carries its own `-mx-2` bleed and padding,
+  so a container holding one only sets rhythm: never add a second `-mx-2` (they
+  stack into a 16px bleed) and never a different gap. A list of hand-rolled rows
+  is the opposite — there the container owns the bleed. Note `-mx-2` inside a
+  fixed-height `overflow-y-auto` box forces a horizontal scrollbar; drop the
+  bleed there.
+
+**Three-dots vs. chevron** is not a taste call:
+
+- Opens a **detail page** → `navigable` + a whole-row click, and no `Delete` in
+  the row (it lives in the detail header).
+- **No detail page** → a `RowActionsMenu` in `trailing`, and no `navigable`
+  chevron. The row may still take an `onClick` for an in-place action — a folder
+  mount reveals itself in Finder and also carries a `...` menu — but a row must
+  never offer both a chevron and a menu.
+
 ## Other shared settings primitives (do not re-roll these)
 
+- **`SettingsSection`** (`…/components/settings-section`) — muted label, hairline
+  divider, body. Also carries `headerAccessory` and `action` slots. Never
+  re-derive the label/divider chrome; `sim-styling.md` owns those tokens.
+- **`SettingsField`** (`…/components/settings-field`) — a read-only label/value
+  pair in a detail body: muted caption over the value. Pair it with
+  `SETTINGS_FIELD_VALUE_CLASSES` for the value text.
 - **`SettingsEmptyState`** (`…/components/settings-empty-state`) — the canonical
-  muted status message. `variant='fill'` (default) centers in the available
-  height (empty list, or a not-entitled/loading gate); `variant='inline'` sits in
-  flow (a search "no results"). Never hand-roll
-  `<div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>`
-  or `<div className='py-4 text-center …'>`. It owns the `--text-muted` + `text-sm`
-  tokens, so it also keeps these messages consistent across pages.
+  muted status message, for empty lists, "no results", loading gates, **and
+  failed loads** (`tone='error'`). `variant='fill'` (default) centers in the
+  available height; `variant='inline'` sits in flow. Never hand-roll
+  `<div className='flex h-full items-center justify-center …'>` or
+  `<div className='py-4 text-center …'>`.
 - **`RowActionsMenu`** (`…/components/row-actions-menu`) — the trailing `...`
   actions menu for a list row. Pass `label` (aria-label) and
   `actions: RowAction[]` (`{ label, onSelect, destructive?, disabled? }`); the
   component renders the canonical flush `...` trigger + `DropdownMenuContent`.
   Conditional items become array spreads: `...(canManage ? [{…}] : [])`. Never
   hand-roll the `<DropdownMenu>` + `<MoreHorizontal>` trigger per page.
+- **`RESOURCE_TILE_BASE`** + one of `RESOURCE_TILE_FILL` / `RESOURCE_TILE_PLAIN`
+  (`…/components/resource-tile`) — the 36px tile chrome, for the rare tile
+  outside a row (a detail heading). `ResourceTile` wraps the filled pairing.
+- **`MemberAvatar`** (`@/components/permissions/member-avatar`) — the one avatar
+  for any member row.
+
+## Deleting a resource
+
+Delete lives in the **detail header**, as
+`{ text: 'Delete', variant: 'destructive', onSelect: … }` behind a
+`ChipConfirmModal` — never `textTone: 'error'`, never a bare `Chip`, and never
+unconfirmed. A list row does not carry Delete when the resource has a detail page.
 
 ## Save / Discard + unsaved-changes guard
 
@@ -246,4 +318,9 @@ A settings page is design-system-clean when:
 - [ ] If it has editable state: Save/Discard go through `SaveDiscardActions`, dirty is wired via `useSettingsUnsavedGuard` (called before any early-return gate), and there is **no** hand-rolled Save button / `beforeunload` / "Unsaved changes" modal.
 - [ ] No business logic, handlers, or conditional rendering changed by the migration.
 - [ ] No literal `text-[Npx]` classes — named scale tokens only (see "Text-scale tokens" above).
+- [ ] Every **resource** list row (a thing with an identity — a tool, a server, a key, a credential) is a `SettingsResourceRow` in a `RESOURCE_LIST_STACK`/`RESOURCE_LIST_GRID` — no wrapper `<button>`/`<Link>`, no hand-passed arrow, no re-derived title/subtitle spans. Rows with a genuinely different shape stay bespoke: multi-line bodies (inbox tasks), tabular columns (billing invoices, credit usage), and grids (secrets).
+- [ ] Rows that open a detail page use `navigable` + `clickLabel`; flat records use `RowActionsMenu`. Not both.
+- [ ] Decorative trailing content is in `badge`, not `trailing`.
+- [ ] Labeled sections use `SettingsSection`; read-only fields use `SettingsField`; empty/loading/error use `SettingsEmptyState`.
+- [ ] Delete is a `destructive` header action behind a `ChipConfirmModal`.
 - [ ] `tsc`, `biome`, and the page's tests pass.

apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-heading.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 
 interface CredentialDetailHeadingProps {
   /** Leading visual (icon tile or brand tile). */
@@ -8,23 +9,16 @@ interface CredentialDetailHeadingProps {
 }
 
 /**
- * Header row shared by credential detail surfaces: a leading visual beside a
- * title over a muted subtitle.
+ * Header row shared by credential detail surfaces. A thin alias over the static
+ * {@link SettingsResourceRow} — the heading and the list row the user arrived
+ * from are the same object, so they must not drift.
  */
 export function CredentialDetailHeading({
   leading,
   title,
   subtitle,
 }: CredentialDetailHeadingProps) {
   return (
-    <div className='flex items-center gap-2.5'>
-      {leading}
-      <div className='flex min-w-0 flex-1 flex-col'>
-        <span className='truncate text-[14px] text-[var(--text-body)]'>{title}</span>
-        {subtitle ? (
-          <span className='truncate text-[12px] text-[var(--text-muted)]'>{subtitle}</span>
-        ) : null}
-      </div>
-    </div>
+    <SettingsResourceRow iconVariant='custom' icon={leading} title={title} description={subtitle} />
   )
 }

apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-layout.tsx

@@ -21,10 +21,10 @@ export function CredentialDetailLayout({ back, actions, children }: CredentialDe
     <div className='flex h-full flex-col bg-[var(--bg)]'>
       <div className={cn(PAGE_HEADER_BAR, 'justify-between')}>
         {back}
-        {actions ? <div className='flex items-center'>{actions}</div> : null}
+        {actions ? <div className='flex h-[30px] items-center gap-1'>{actions}</div> : null}
       </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 pb-3'>{children}</div>
+        <div className='mx-auto flex w-full max-w-[48rem] flex-col gap-7 pb-6'>{children}</div>
       </div>
     </div>
   )

apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/detail-icon-tile.tsx

@@ -1,21 +1,16 @@
 import type { ReactNode } from 'react'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
 interface DetailSectionProps {
   title: ReactNode
   children: ReactNode
 }
 
 /**
- * Labeled section with a muted title and a thin inset divider above the body.
- * Shared by the credential detail surfaces so every section keeps the same
- * vertical rhythm without repeating markup at the callsites.
+ * Labeled section for the credential detail surfaces. A thin alias over the
+ * shared {@link SettingsSection} so credential pages and settings pages cannot
+ * drift apart; kept for its `title` naming at the existing callsites.
  */
 export function DetailSection({ title, children }: DetailSectionProps) {
-  return (
-    <section className='flex flex-col'>
-      <span className='pl-0.5 text-[var(--text-muted)] text-small'>{title}</span>
-      <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
-      {children}
-    </section>
-  )
+  return <SettingsSection label={title}>{children}</SettingsSection>
 }

apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/detail-section.tsx

@@ -3,7 +3,6 @@ export { CHIP_FIELD_INPUT, CHIP_FIELD_SHELL } from './components/chip-field'
 export { CredentialDetailHeading } from './components/credential-detail-heading'
 export { CredentialDetailLayout } from './components/credential-detail-layout'
 export { CredentialMembersSection } from './components/credential-members-section'
-export { DetailIconTile } from './components/detail-icon-tile'
 export { DetailSection } from './components/detail-section'
 export { UnsavedChangesModal } from './components/unsaved-changes-modal'
 export { useCredentialDetailForm } from './hooks/use-credential-detail-form'

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

@@ -1,5 +1,6 @@
 export {
   RESOURCE_TILE_BASE,
   RESOURCE_TILE_FILL,
+  RESOURCE_TILE_PLAIN,
   ResourceTile,
 } from '@/app/workspace/[workspaceId]/components/resource-tile/resource-tile'

apps/sim/app/workspace/[workspaceId]/components/resource-tile/index.ts

@@ -17,6 +17,9 @@ export const RESOURCE_TILE_BASE =
 /** Filled treatment worn by the skills and custom tools resource tiles. */
 export const RESOURCE_TILE_FILL = 'bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
 
+/** Page-background fill, for tiles holding a brand logo or a site favicon. */
+export const RESOURCE_TILE_PLAIN = 'bg-[var(--bg)]'
+
 /**
  * Square glyph tile identifying a workspace resource — the leading visual on a
  * resource's row and on its detail heading.

apps/sim/app/workspace/[workspaceId]/components/resource-tile/resource-tile.tsx

@@ -2,8 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Chip, ChipDropdown, ChipLink, cn } from '@sim/emcn'
-import { ArrowLeft, ArrowRight, Plus } from 'lucide-react'
-import Link from 'next/link'
+import { ArrowLeft, Plus } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
 import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
@@ -16,6 +15,7 @@ import {
 } from '@/lib/integrations'
 import { credentialProviderMatchesService } from '@/lib/oauth'
 import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
+import { RESOURCE_TILE_BASE } from '@/app/workspace/[workspaceId]/components/resource-tile'
 import { IntegrationSkillsSection } from '@/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section'
 import { connectParam } from '@/app/workspace/[workspaceId]/integrations/[block]/search-params'
 import {
@@ -26,6 +26,11 @@ import { IntegrationSection } from '@/app/workspace/[workspaceId]/integrations/c
 import { IntegrationTile } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
 import { CONNECT_MODE } from '@/app/workspace/[workspaceId]/integrations/connect-route'
 import { useScrollRestoration } from '@/app/workspace/[workspaceId]/integrations/hooks/use-scroll-restoration'
+import {
+  RESOURCE_LIST_STACK,
+  SettingsResourceRow,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { getTileIconColorClass } from '@/blocks/icon-color'
 import { storeCuratedPrompt } from '@/blocks/integration-matcher'
 import {
@@ -198,10 +203,7 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
               <IntegrationTile blockType={integration.type} icon={Icon} />
             ) : (
               <div
-                className={cn(
-                  'flex size-9 flex-shrink-0 items-center justify-center rounded-xl border border-[var(--border-1)]',
-                  getTileIconColorClass(integration.bgColor)
-                )}
+                className={cn(RESOURCE_TILE_BASE, getTileIconColorClass(integration.bgColor))}
                 style={{ background: integration.bgColor }}
               >
                 {integration.name.charAt(0)}
@@ -216,22 +218,18 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
           {connectedCredentials.length > 0 && (
             <IntegrationSection label='Connected'>
               {connectedCredentials.map((credential) => (
-                <Link
+                <SettingsResourceRow
                   key={credential.id}
+                  iconVariant='custom'
+                  icon={Icon && <IntegrationTile blockType={integration.type} icon={Icon} />}
+                  title={credential.displayName}
+                  description={
+                    credential.description || resolveCredentialDisplay(credential).subtitle
+                  }
                   href={`/workspace/${workspaceId}/integrations/connected/${credential.id}`}
-                  className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-                >
-                  {Icon && <IntegrationTile blockType={integration.type} icon={Icon} />}
-                  <div className='flex min-w-0 flex-1 flex-col'>
-                    <span className='truncate text-[14px] text-[var(--text-body)]'>
-                      {credential.displayName}
-                    </span>
-                    <span className='truncate text-[12px] text-[var(--text-muted)]'>
-                      {credential.description || resolveCredentialDisplay(credential).subtitle}
-                    </span>
-                  </div>
-                  <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
-                </Link>
+                  clickLabel={`Open ${credential.displayName}`}
+                  navigable
+                />
               ))}
             </IntegrationSection>
           )}
@@ -274,10 +272,8 @@ function TemplatesSection({ integration, templates, workspaceId }: TemplatesSect
   }
 
   return (
-    <section className='flex flex-col'>
-      <span className='pl-0.5 text-[var(--text-muted)] text-small'>Templates</span>
-      <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
-      <div className='-mx-2 flex flex-col gap-y-0.5'>
+    <SettingsSection label='Templates'>
+      <div className={RESOURCE_LIST_STACK}>
         {templates.map((template) => {
           const blockTypes = [integration.type, ...template.otherBlockTypes].slice(
             0,
@@ -294,7 +290,7 @@ function TemplatesSection({ integration, templates, workspaceId }: TemplatesSect
           )
         })}
       </div>
-    </section>
+    </SettingsSection>
   )
 }
 
@@ -306,25 +302,21 @@ interface TemplateRowProps {
 }
 
 /**
- * Template row that mirrors `IntegrationItem` from the integrations index
- * byte-for-byte (icon cluster · title · description · trailing `ArrowRight`).
- * Renders as a `<button>` because click seeds the home page chat with `prompt`
- * and navigates to the workspace home, matching the `ShowcaseWithExplore` flow.
+ * Template row. Click seeds the home page chat with `prompt` and navigates to the
+ * workspace home, matching the `ShowcaseWithExplore` flow — so it activates rather
+ * than links, and its leading visual is an overlapping block cluster.
  */
 function TemplateRow({ blockTypes, title, prompt, onSelect }: TemplateRowProps) {
   return (
-    <button
-      type='button'
+    <SettingsResourceRow
+      iconVariant='custom'
+      icon={<TemplateIcons blockTypes={blockTypes} />}
+      title={title}
+      description={prompt}
       onClick={() => onSelect(prompt)}
-      className='group flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-    >
-      <TemplateIcons blockTypes={blockTypes} />
-      <div className='flex min-w-0 flex-1 flex-col'>
-        <span className='truncate text-[14px] text-[var(--text-body)]'>{title}</span>
-        <span className='truncate text-[12px] text-[var(--text-muted)]'>{prompt}</span>
-      </div>
-      <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
-    </button>
+      clickLabel={`Use template ${title}`}
+      navigable
+    />
   )
 }