fix(settings): correct row bleed, delete-confirm binding, and avatar seeding

Follow-up from review of the consolidation.

The sandbox delete confirmation was boolean-only state. Browser Back unmounts
the modal without closing it, so opening another sandbox re-opened it already
confirmed — against the wrong sandbox. Reset it where the draft guard already
handles the same history hazard.

RESOURCE_LIST_GRID kept an 8px column gap after the bleed moved onto the row,
so neighbouring cards overlapped by exactly the gutter and the right-hand card's
stretched hit area won it: clicking between two cards opened the wrong one.
Budget the gap for the bleed instead.

Also: restore the `group` the template-icon hover outlines depend on; add a
`flush` row for headings and overflow boxes; seed MemberAvatar identically on
every surface; keep the MCP transport label visible in all row states; give the
Delete chip a stable id so it doesn't remount mid-delete; and stop an empty
subtitle rendering a phantom line.

Docs: widen the rule's path globs to the surfaces it now governs, drop the
`text-[14px]` example that contradicted the token rule, and add a Mode C for
migrating rows onto the primitive.

Author: waleedlatif1

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

@@ -1,6 +1,9 @@
 ---
 paths:
   - "apps/sim/app/workspace/*/settings/**"
+  - "apps/sim/app/workspace/*/{integrations,skills,upgrade}/**"
+  - "apps/sim/app/workspace/*/components/{resource-tile,credential-detail}/**"
+  - "apps/sim/components/{settings,permissions}/**"
   - "apps/sim/ee/**/components/**"
 ---
 
@@ -173,8 +176,10 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
   `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.
+  prefetch, middle-click, and open-in-new-tab. Always pass `clickLabel` with
+  either — the overlay holds no text, so it is the control's *only* accessible
+  name. The prop is optional in the type (nothing enforces it), so omitting it
+  ships a nameless button rather than failing the build.
 - `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
@@ -187,9 +192,13 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
   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.
+  is the opposite — there the container owns the bleed. A row inside a
+  fixed-height `overflow-y-auto` box, or a heading that must line up with the
+  section labels under it, passes `flush` to drop the bleed and padding.
+  `RESOURCE_LIST_GRID` budgets its column gap for the bleed (24px of track gap
+  minus 16px of bleed = an 8px gutter); narrowing that gap makes neighbouring
+  rows — and their stretched hit areas — overlap, so a click in the gutter opens
+  the wrong card.
 
 **Three-dots vs. chevron** is not a taste call:
 
@@ -221,7 +230,8 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
   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
+  (`app/workspace/[workspaceId]/components/resource-tile` — note: *not* under
+  `settings/`, unlike the other `…/` paths on this page) — 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.
@@ -316,7 +326,7 @@ A settings page is design-system-clean when:
 - [ ] Its `NavigationItem` has an accurate, consistent-length `description`.
 - [ ] Detail sub-views and entitlement/loading gates keep their own chrome (intentional).
 - [ ] 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 business logic, handlers, or conditional rendering changed by the migration — except where the shared primitive makes a gate structural (a permission gate becomes `onClick={can ? … : undefined}` + `navigable={can}`, which renders a plain non-interactive row).
 - [ ] 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.

.claude/rules/sim-styling.md

@@ -8,9 +8,13 @@ paths:
 
 ## Tailwind
 
-1. **No inline styles** - Use Tailwind classes
+1. **No inline styles** - Use Tailwind classes. Exception: a genuinely dynamic
+   value (a hashed avatar colour, a brand tile background) that cannot be a class.
 2. **No duplicate dark classes** - Skip `dark:` when value matches light mode
-3. **Exact values** - `text-[14px]`, `h-[26px]`
+3. **Exact values over approximations** - `h-[26px]`, not `h-6`. But **type size is
+   always a named token** (`text-sm`, `text-caption`) — never `text-[14px]`, which
+   sets font-size only and inherits a different line-height. See
+   `sim-settings-pages.md` for the scale.
 4. **Transitions** - `transition-colors` for interactive states
 
 ## Conditional Classes

.claude/skills/add-settings-page/SKILL.md

@@ -53,7 +53,7 @@ For each page component, confirm the checklist in `.claude/rules/sim-settings-pa
 3. Find literal pixel text sizes (should be 0 — see "Text-scale tokens" in
    `.claude/rules/sim-settings-pages.md` for the token map and the row
    title/subtitle pairing convention):
-   `git grep -n "text-\[1[0-8]px\]" -- 'apps/sim/**/settings/' 'apps/sim/ee/'`
+   `git grep -nE "text-\[[0-9]+px\]" -- 'apps/sim/**/settings/' 'apps/sim/ee/'`
 4. Confirm each page imports `SettingsPanel` and that its `NavigationItem` has an
    accurate `description` of consistent length with its peers.
    - Editable pages: confirm Save/Discard go through `SaveDiscardActions` and
@@ -77,3 +77,31 @@ For each page component, confirm the checklist in `.claude/rules/sim-settings-pa
 8. **Verify the whole sweep:** `tsc --noEmit`, `biome check` on every touched
    file, and run the affected pages' tests. Diff each file against the base and
    confirm the change is purely structural before shipping.
+
+## Mode C — Migrate list rows to `SettingsResourceRow`
+
+Read "The resource row" in `.claude/rules/sim-settings-pages.md` first — it is the
+contract. Then, per page:
+
+1. Find hand-rolled rows:
+   `git grep -n "truncate text-\[var(--text-body)\] text-sm" -- 'apps/sim/app/workspace/' 'apps/sim/ee/'`
+   Every match outside `settings-resource-row.tsx` is either a row to migrate or a
+   genuinely different shape (multi-line body, tabular columns, a grid) that stays
+   bespoke — decide which, and say so.
+2. Replace the row *and* its wrapper: a `<button>`/`<Link>` around the row becomes
+   `onClick`/`href` on the row itself. Wrapping the row is what the primitive
+   exists to stop — it is also invalid HTML once `trailing` holds a control.
+3. Sort the trailing content: interactive → `trailing`, decorative → `badge`.
+   Getting this backwards makes the row's right edge a dead zone.
+4. Add `navigable` only if the row opens a detail page, and `clickLabel` always.
+5. Drop the container's `-mx-2` — the row now owns the bleed. Use
+   `RESOURCE_LIST_STACK` / `RESOURCE_LIST_GRID`; do not hand-write the gap.
+6. Unlike Mode B, this migration **may** change conditional rendering: a
+   `<button disabled={!can}>` becomes `onClick={can ? … : undefined}` +
+   `navigable={can}`, which renders a plain non-interactive row. Verify the gated
+   state has no clickable affordance left.
+7. Check what the old row rendered *beside* the title (a badge, a timestamp, a
+   transport label). The row's title truncates as one unit, so anything folded
+   into it can be ellipsised away — move it to `description` or `badge`.
+8. Verify: `tsc --noEmit`, `biome check`, the page's tests, and a diff read of
+   every converted block for lost props, conditions, and `key` placement.

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

@@ -219,6 +219,7 @@ export function CustomToolDetail({
           ...(tool && !readOnly
             ? [
                 {
+                  id: 'delete',
                   text: deleteTool.isPending ? 'Deleting...' : 'Delete',
                   variant: 'destructive' as const,
                   onSelect: () => setShowDeleteConfirm(true),

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

@@ -117,15 +117,16 @@ function ServerListItem({
   const serverName = server.name || 'Unnamed server'
   // Transport rides on the description rather than beside the name — inside the
   // row's truncating title a long name would clip it away entirely.
-  const statusLabel = isConnecting
+  const statusText = isConnecting
     ? 'Waiting for authorization...'
     : isRefreshing
       ? 'Refreshing...'
       : isLoadingTools && tools.length === 0
         ? 'Loading...'
         : showDiscoveryError
           ? discoveryError
-          : `${transportLabel} · ${toolsLabel}`
+          : toolsLabel
+  const statusLabel = `${transportLabel} · ${statusText}`
 
   return (
     <SettingsResourceRow
@@ -444,6 +445,7 @@ export function MCP() {
                   onSelect: () => setEditingServerId(server.id),
                 },
                 {
+                  id: 'delete',
                   text: deletingServers.has(server.id) ? 'Deleting...' : 'Delete',
                   variant: 'destructive' as const,
                   onSelect: () => handleRemoveServer(server.id),

apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx

@@ -30,7 +30,7 @@ interface MemberRowProps {
 export function MemberRow({ name, email, image, status, roleControl, menu }: MemberRowProps) {
   return (
     <div className={ROW_CLASSES}>
-      <MemberAvatar name={name} image={image} />
+      <MemberAvatar name={name} image={image} colorSeed={email || name} />
       <span className={ROW_EMAIL_CLASSES}>{email}</span>
       <span className={ROW_STATUS_CLASSES}>{status}</span>
       {roleControl}

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

@@ -80,6 +80,10 @@ export function Sandboxes() {
       setDraft(null)
       setIssues([])
     }
+    // The confirmation belongs to the sandbox that opened it. Browser Back unmounts
+    // the modal without closing it, so leaving this set would re-open it against
+    // whichever sandbox is selected next — and delete that one instead.
+    setShowDeleteConfirm(false)
     // Creating and having one open are mutually exclusive, and history can land on
     // a sandbox while create mode is still set — Forward after starting a new one.
     // Leaving both on renders an empty "New sandbox" form whose Delete still points
@@ -211,6 +215,7 @@ export function Sandboxes() {
             ...(selected && canAdmin
               ? [
                   {
+                    id: 'delete',
                     text: deleteSandbox.isPending ? 'Deleting...' : 'Delete',
                     variant: 'destructive' as const,
                     onSelect: () => setShowDeleteConfirm(true),

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

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import {
   RESOURCE_TILE_BASE,
   RESOURCE_TILE_FILL,
+  RESOURCE_TILE_PLAIN,
 } from '@/app/workspace/[workspaceId]/components/resource-tile'
 
 /**
@@ -84,6 +85,12 @@ interface SettingsResourceRowProps {
    * `lucide-react` and `@sim/emcn/icons` ship visibly different ones.
    */
   navigable?: boolean
+  /**
+   * Drops the row's `-mx-2` bleed and padding. For a row that is not in a list —
+   * a detail heading — or one inside a fixed-height `overflow-y-auto` box, where
+   * the bleed would force a horizontal scrollbar.
+   */
+  flush?: boolean
 }
 
 /** The one navigation chevron for every settings resource row. */
@@ -95,9 +102,14 @@ export const RESOURCE_ROW_ARROW_CLASSES = 'size-4 flex-shrink-0 text-[var(--text
  */
 export const RESOURCE_LIST_STACK = 'flex flex-col gap-y-0.5'
 
-/** Responsive two-up card grid worn by the skills, integrations, and passwords lists. */
+/**
+ * Responsive two-up card grid worn by the skills, integrations, and passwords
+ * lists. The column gap budgets for the rows' own `-mx-2`: 24px of track gap
+ * minus 16px of combined bleed leaves the same 8px gutter a stack row gets.
+ * Narrowing it makes neighbouring rows — and their hit areas — overlap.
+ */
 export const RESOURCE_LIST_GRID =
-  'grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-x-2 gap-y-0.5'
+  'grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-x-6 gap-y-0.5'
 
 const PLAIN_BASE =
   'flex size-[14px] flex-shrink-0 items-center justify-center text-[var(--text-icon)] [&_svg]:size-[14px] [&_img]:size-[14px]'
@@ -115,6 +127,7 @@ export function SettingsResourceRow({
   href,
   clickLabel,
   navigable = false,
+  flush = false,
 }: SettingsResourceRowProps) {
   const isTile = iconVariant === 'tile'
   const cluster = (
@@ -127,7 +140,7 @@ export function SettingsResourceRow({
             isTile
               ? cn(
                   RESOURCE_TILE_BASE,
-                  iconFilled ? RESOURCE_TILE_FILL : 'bg-[var(--bg)]',
+                  iconFilled ? RESOURCE_TILE_FILL : RESOURCE_TILE_PLAIN,
                   iconFill ? '[&_img]:size-full' : '[&_img]:size-5'
                 )
               : PLAIN_BASE
@@ -161,7 +174,7 @@ export function SettingsResourceRow({
 
   // Row geometry is identical whether or not the row is activatable, so a list
   // mixing clickable and static rows keeps one height and one inset.
-  const rowClass = '-mx-2 flex items-center justify-between gap-2.5 rounded-lg p-2'
+  const rowClass = cn('flex items-center justify-between gap-2.5', !flush && '-mx-2 rounded-lg p-2')
 
   if (!onClick && !href) {
     return (
@@ -182,7 +195,10 @@ export function SettingsResourceRow({
   // list) while `trailing` — which may hold its own buttons — stacks above it.
   return (
     <div
-      className={cn(rowClass, 'relative transition-colors hover-hover:bg-[var(--surface-active)]')}
+      className={cn(
+        rowClass,
+        'group relative transition-colors hover-hover:bg-[var(--surface-active)]'
+      )}
     >
       {href ? (
         <Link href={href} aria-label={clickLabel} className={overlayClass} />

apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx

@@ -416,6 +416,7 @@ function ServerDetailView({
                 ...(onDelete
                   ? [
                       {
+                        id: 'delete',
                         text: isDeleting ? 'Deleting...' : 'Delete',
                         variant: 'destructive' as const,
                         onSelect: onDelete,

apps/sim/app/workspace/[workspaceId]/skills/skills.tsx

@@ -6,7 +6,7 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { Plus } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
-import { AgentSkillsIcon } from '@/components/icons'
+import { SkillTile } from '@/app/workspace/[workspaceId]/components'
 import { IntegrationTabsHeader } from '@/app/workspace/[workspaceId]/integrations/components/integration-tabs-header'
 import { ShowcaseWithExplore } from '@/app/workspace/[workspaceId]/integrations/components/showcase-with-explore'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
@@ -111,8 +111,8 @@ export function Skills() {
                   {filteredSkills.map((s) => (
                     <SettingsResourceRow
                       key={s.id}
-                      icon={<AgentSkillsIcon className='text-[var(--text-icon)]' />}
-                      iconFilled
+                      iconVariant='custom'
+                      icon={<SkillTile />}
                       title={s.name}
                       description={s.description || undefined}
                       onClick={() => router.push(`${skillsHref}/${s.id}`)}