diff --git a/.agents/skills/emcn-design-review/SKILL.md b/.agents/skills/emcn-design-review/SKILL.md
index 04e39da1f8e..b53d3e19582 100644
--- a/.agents/skills/emcn-design-review/SKILL.md
+++ b/.agents/skills/emcn-design-review/SKILL.md
@@ -13,12 +13,12 @@ User arguments: $ARGUMENTS
 
 ## Context
 
-This codebase uses **emcn**, a custom component library built on Radix UI primitives with CVA (class-variance-authority) variants and CSS variable design tokens. All UI must use emcn components and tokens — never raw HTML elements or hardcoded colors.
+This codebase uses **emcn**, a custom component library built on Radix UI primitives with CVA variants and CSS variable design tokens. All UI must use emcn components and tokens.
 
 ## Steps
 
-1. Read the emcn barrel export at `apps/sim/components/emcn/components/index.ts` to know what's available
-2. Read `apps/sim/app/_styles/globals.css` for the full set of CSS variable tokens
+1. Read the emcn public barrel at `apps/sim/components/emcn/index.ts` (re-exports components, Calendar, Table*, and icons) to know what's available; for the full icon set read `apps/sim/components/emcn/icons/index.ts`
+2. Read `apps/sim/app/_styles/globals.css` for CSS variable tokens
 3. Analyze the specified scope against every rule below
 4. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
 
@@ -26,313 +26,59 @@ This codebase uses **emcn**, a custom component library built on Radix UI primit
 
 ## Imports
 
-- Import components from `@/components/emcn`, never from subpaths
-- Import icons from `@/components/emcn/icons` or `lucide-react`
-- Import `cn` from `@/lib/core/utils/cn` for conditional class merging
-- Import app-specific wrappers (Select, VerifiedBadge) from `@/components/ui`
+- Import from `@/components/emcn` barrel, never subpaths
+- Icons from `@/components/emcn/icons` or `lucide-react`
+- Use `cn` from `@/lib/core/utils/cn` for conditional classes
 
-```tsx
-// Good
-import { Button, Modal, Badge } from '@/components/emcn'
-// Bad
-import { Button } from '@/components/emcn/components/button/button'
-```
+## Design Tokens
 
----
-
-## Design Tokens (CSS Variables)
-
-Never use raw color values. Always use CSS variable tokens via Tailwind arbitrary values: `text-[var(--text-primary)]`, not `text-gray-500` or `#333`. The CSS variable pattern is canonical (1,700+ uses) — do not use Tailwind semantic classes like `text-muted-foreground`.
-
-### Text hierarchy
-| Token | Use |
-|-------|-----|
-| `text-[var(--text-primary)]` | Main content text |
-| `text-[var(--text-secondary)]` | Secondary/supporting text |
-| `text-[var(--text-tertiary)]` | Tertiary text |
-| `text-[var(--text-muted)]` | Disabled, placeholder text |
-| `text-[var(--text-icon)]` | Icon tinting |
-| `text-[var(--text-inverse)]` | Text on dark backgrounds |
-| `text-[var(--text-error)]` | Error/warning messages |
-
-### Surfaces (elevation)
-| Token | Use |
-|-------|-----|
-| `bg-[var(--bg)]` | Page background |
-| `bg-[var(--surface-2)]` through `bg-[var(--surface-7)]` | Increasing elevation |
-| `bg-[var(--surface-hover)]` | Hover state backgrounds |
-| `bg-[var(--surface-active)]` | Active/selected backgrounds |
-
-### Borders
-| Token | Use |
-|-------|-----|
-| `border-[var(--border)]` | Default borders |
-| `border-[var(--border-1)]` | Stronger borders (inputs, cards) |
-| `border-[var(--border-muted)]` | Subtle dividers |
-
-### Status
-| Token | Use |
-|-------|-----|
-| `--success` | Success states |
-| `--error` | Error states |
-| `--caution` | Warning states |
-
-### Brand
-| Token | Use |
-|-------|-----|
-| `--brand-secondary` | Brand color |
-| `--brand-accent` | Accent/CTA color |
-
-### Shadows
-Use shadow tokens, never raw box-shadow values:
-- `shadow-subtle`, `shadow-medium`, `shadow-overlay`
-- `shadow-kbd`, `shadow-card`
-
-### Z-Index
-Use z-index tokens for layering:
-- `z-[var(--z-dropdown)]` (100), `z-[var(--z-modal)]` (200), `z-[var(--z-popover)]` (300), `z-[var(--z-tooltip)]` (400), `z-[var(--z-toast)]` (500)
-
----
-
-## Component Usage Rules
-
-### Buttons
-Available variants: `default`, `primary`, `destructive`, `ghost`, `outline`, `active`, `secondary`, `tertiary`, `subtle`, `ghost-secondary`, `3d`
-
-| Action type | Variant | Frequency |
-|-------------|---------|-----------|
-| Toolbar, icon-only, utility actions | `ghost` | Most common (28%) |
-| Primary action (create, save, submit) | `primary` | Very common (24%) |
-| Cancel, close, secondary action | `default` | Common |
-| Delete, remove, destructive action | `destructive` | Targeted use only |
-| Active/selected state | `active` | Targeted use only |
-| Toggle, mode switch | `outline` | Moderate |
-
-Sizes: `sm` (compact, 32% of buttons) or `md` (default, used when no size specified). Never create custom button styles — use an existing variant.
-
-Buttons without an explicit variant prop get `default` styling. This is acceptable for cancel/secondary actions.
-
-### Modals (Dialogs)
-Use `Modal` + subcomponents. Never build custom dialog overlays.
-
-```tsx
-<Modal open={open} onOpenChange={setOpen}>
-  <ModalContent size="sm">
-    <ModalHeader>Title</ModalHeader>
-    <ModalBody>Content</ModalBody>
-    <ModalFooter>
-      <Button variant="default" onClick={() => setOpen(false)}>Cancel</Button>
-      <Button variant="primary" onClick={handleSubmit}>Save</Button>
-    </ModalFooter>
-  </ModalContent>
-</Modal>
-```
-
-Modal sizes by frequency: `sm` (440px, most common — confirmations and simple dialogs), `md` (500px, forms), `lg` (600px, content-heavy), `xl` (800px, rare), `full` (1200px, rare).
-
-Footer buttons: Cancel on left (`variant="default"`), primary action on right. This pattern is followed 100% across the codebase.
-
-### Delete/Remove Confirmations
-Always use Modal with `size="sm"`. The established pattern:
+Use CSS variable pattern (`text-[var(--text-primary)]`), never Tailwind semantics (`text-muted-foreground`) or hardcoded colors (`text-gray-500`, `#333`).
 
-```tsx
-<Modal open={open} onOpenChange={setOpen}>
-  <ModalContent size="sm">
-    <ModalHeader>Delete {itemType}</ModalHeader>
-    <ModalBody>
-      <p>Description of consequences</p>
-      <p className="text-[var(--text-error)]">Warning about irreversibility</p>
-    </ModalBody>
-    <ModalFooter>
-      <Button variant="default" onClick={() => setOpen(false)}>Cancel</Button>
-      <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
-        Delete
-      </Button>
-    </ModalFooter>
-  </ModalContent>
-</Modal>
-```
+**Text**: `--text-primary`, `--text-secondary`, `--text-tertiary`, `--text-muted`, `--text-body` (canonical value text), `--text-icon`, `--text-placeholder`, `--text-subtle`, `--text-inverse`, `--text-error`
+**Surfaces**: `--bg`, `--surface-1` through `--surface-7`, `--surface-hover`, `--surface-active`
+**Borders**: `--border`, `--border-1`, `--border-muted`
+**Brand/accent**: `--brand-secondary`, `--brand-accent`
+**Z-Index**: `--z-dropdown` (100), `--z-modal` (200), `--z-popover` (300), `--z-tooltip` (400), `--z-toast` (500)
+**Shadows**: `shadow-subtle`, `shadow-medium`, `shadow-overlay`, `shadow-card`
+**Badges**: `--badge-*` semantic families (success/error/gray/blue/purple/orange/amber/teal/cyan/pink, each with `-bg`/`-text`)
 
-Rules:
-- Title: "Delete {ItemType}" or "Remove {ItemType}" (use "Remove" for membership/association changes)
-- Include consequence description
-- Use `text-[var(--text-error)]` for warning text when the action is irreversible
-- `variant="destructive"` for the action button (100% compliance)
-- `variant="default"` for cancel (100% compliance)
-- Cancel left, destructive right (100% compliance)
-- For high-risk deletes (workspaces), require typing the name to confirm
-- Include recovery info if soft-delete: "You can restore it from Recently Deleted in Settings"
+## Buttons
 
-### Toast Notifications
-Use the imperative `toast` API from `@/components/emcn`. Never build custom notification UI.
+Intent-to-variant mapping (read the actual `buttonVariants` in `apps/sim/components/emcn/components/button/button.tsx` for the full variant set — it exposes more than listed here):
 
-```tsx
-import { toast } from '@/components/emcn'
+| Action | Variant |
+|--------|---------|
+| Toolbar, icon-only | `ghost` |
+| Create, save, submit | `primary` |
+| Cancel, close | `default` |
+| Delete, remove | `destructive` |
+| Selected state | `active` |
+| Toggle | `outline` |
 
-toast.success('Item saved')
-toast.error('Something went wrong')
-toast.success('Deleted', { action: { label: 'Undo', onClick: handleUndo } })
-```
+## Delete/Remove Confirmations
 
-Variants: `default`, `success`, `error`. Auto-dismiss after 5s. Supports optional action buttons with callbacks.
+`ChipModal` `size='sm'`, title "Delete/Remove {ItemType}", destructive confirm button, plain Cancel (follow the chip footer layout in `.claude/rules/emcn-components.md`). Use `text-[var(--text-error)]` for irreversible warnings.
 
-### Badges
-Use semantic color variants for status:
+## Toast
 
-| Status | Variant | Usage |
-|--------|---------|-------|
-| Error, failed, disconnected | `red` | Most common (15 uses) |
-| Metadata, roles, auth types, scopes | `gray-secondary` | Very common (12 uses) |
-| Type annotations (TS types, field types) | `type` | Very common (12 uses) |
-| Success, active, enabled, running | `green` | Common (7 uses) |
-| Neutral, default, unknown | `gray` | Common (6 uses) |
-| Outline, parameters, public | `outline` | Moderate (6 uses) |
-| Warning, processing | `amber` | Moderate (5 uses) |
-| Paused, warning | `orange` | Occasional |
-| Info, queued | `blue` | Occasional |
-| Data types (arrays) | `purple` | Occasional |
-| Generic with border | `default` | Occasional |
+`toast.success()`, `toast.error()`, `toast()` from `@/components/emcn`. Never custom notification UI.
 
-Use `dot` prop for status indicators (19 instances in codebase). `icon` prop is available but rarely used.
+## Badges
 
-### Tooltips
-Use `Tooltip` from emcn with namespace pattern:
+`red`=error/failed, `gray-secondary`=metadata/roles, `type`=type annotations, `green`=success/active, `gray`=neutral, `amber`=processing, `orange`=paused, `blue`=info. Use `dot` prop for status indicators.
 
-```tsx
-<Tooltip.Root>
-  <Tooltip.Trigger asChild>
-    <Button variant="ghost">{icon}</Button>
-  </Tooltip.Trigger>
-  <Tooltip.Content>Helpful text</Tooltip.Content>
-</Tooltip.Root>
-```
+## Icons
 
-Use tooltips for icon-only buttons and truncated text. Don't tooltip self-explanatory elements.
-
-### Popovers
-Use for filters, option menus, and nested navigation:
-
-```tsx
-<Popover open={open} onOpenChange={setOpen} size="sm">
-  <PopoverTrigger asChild>
-    <Button variant="ghost">Trigger</Button>
-  </PopoverTrigger>
-  <PopoverContent side="bottom" align="end" minWidth={160}>
-    <PopoverSection>Section Title</PopoverSection>
-    <PopoverItem active={isActive} onClick={handleClick}>
-      Item Label
-    </PopoverItem>
-    <PopoverDivider />
-  </PopoverContent>
-</Popover>
-```
-
-### Dropdown Menus
-Use for context menus and action menus:
-
-```tsx
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="ghost">
-      <MoreHorizontal className="size-[14px]" />
-    </Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent align="end">
-    <DropdownMenuItem onClick={handleEdit}>Edit</DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem onClick={handleDelete} className="text-[var(--text-error)]">
-      Delete
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>
-```
-
-Destructive items go last, after a separator, in error color.
-
-### Forms
-Use `FormField` wrapper for labeled inputs:
-
-```tsx
-<FormField label="Name" htmlFor="name" error={errors.name} optional>
-  <Input id="name" value={name} onChange={e => setName(e.target.value)} />
-</FormField>
-```
-
-Rules:
-- Use `Input` from emcn, never raw `<input>` (exception: hidden file inputs)
-- Use `Textarea` from emcn, never raw `<textarea>`
-- Use `FormField` for label + input + error layout
-- Mark optional fields with `optional` prop
-- Show errors inline below the input
-- Use `Combobox` for searchable selects
-- Use `TagInput` for multi-value inputs
-
-### Loading States
-Use `Skeleton` for content placeholders:
-
-```tsx
-<Skeleton className="h-5 w-[200px] rounded-md" />
-```
-
-Rules:
-- Mirror the actual UI structure with skeletons
-- Match exact dimensions of the final content
-- Use `rounded-md` to match component radius
-- Stack multiple skeletons for lists
-
-### Icons
-Standard sizing — use the `size-*` shorthand. `size-[14px]` is the dominant pattern:
-
-```tsx
-<Icon className="size-[14px] text-[var(--text-icon)]" />
-```
-
-Always prefer `size-*` over the legacy `h-* w-*` pair. `size-[14px]` is canonical; treat any `h-[Npx] w-[Npx]` or `h-N w-N` pair as a refactor target.
-
-Size scale (most common first):
-1. `size-[14px]` — default for inline icons
-2. `size-[16px]` — slightly larger inline icons
-3. `size-3` (12px) — compact/tight spaces
-4. `size-4` (16px) — Tailwind equivalent
-5. `size-3.5` (14px) — Tailwind equivalent of 14px
-6. `size-5` (20px) — larger icons, section headers
-
-Use `text-[var(--text-icon)]` for icon color (113+ uses in codebase).
-
----
-
-## Styling Rules
-
-1. **Use `cn()` for conditional classes**: `cn('base', condition && 'conditional')` — never template literal concatenation like `` `base ${condition ? 'active' : ''}` ``
-2. **Inline styles**: Avoid. Exception: dynamic values that can't be expressed as Tailwind classes (e.g., `style={{ width: dynamicVar }}` or CSS variable references). Never use inline styles for colors or static values.
-3. **Never hardcode colors**: Use CSS variable tokens. Never `text-gray-500`, `bg-red-100`, `#fff`, or `rgb()`. Always `text-[var(--text-*)]`, `bg-[var(--surface-*)]`, etc.
-4. **Never use Tailwind semantic color classes**: Use `text-[var(--text-muted)]` not `text-muted-foreground`. The CSS variable pattern is canonical.
-5. **Never use global styles**: Keep all styling local to components
-6. **Hover states**: Use `hover-hover:` pseudo-class for hover-capable devices
-7. **Transitions**: Use `transition-colors` for color changes, `transition-colors duration-100` for fast hover
-8. **Border radius**: `rounded-lg` (large cards), `rounded-md` (medium), `rounded-sm` (small), `rounded-xs` (tiny)
-9. **Typography**: Use semantic sizes — `text-small` (13px), `text-caption` (12px), `text-xs` (11px), `text-micro` (10px)
-10. **Font weight**: Use `font-medium` for emphasis, avoid `font-bold` unless for headings
-11. **Spacing**: Use Tailwind gap/padding utilities. Common patterns: `gap-2`, `gap-3`, `px-4 py-2.5`
-
----
+Default: `size-[14px]`. Color: `text-[var(--text-icon)]`. Scale: 14px > 16px > 12px > 20px. Use the `size-*` shorthand — flag `h-[Npx] w-[Npx]` and `h-N w-N` pairs as refactor targets.
 
 ## Anti-patterns to flag
 
-- Raw HTML `<button>` instead of Button component (exception: inside Radix primitives)
-- Raw HTML `<input>` instead of Input component (exception: hidden file inputs, read-only checkboxes in markdown)
-- Hardcoded Tailwind default colors (`text-gray-*`, `bg-red-*`, `text-blue-*`)
-- Hex values in className (`bg-[#fff]`, `text-[#333]`)
-- Tailwind semantic classes (`text-muted-foreground`) instead of CSS variables (`text-[var(--text-muted)]`)
-- Custom modal/dialog implementations instead of `Modal`
-- Custom toast/notification implementations instead of `toast`
-- Inline styles for colors or static values (dynamic values are acceptable)
-- Template literal className concatenation instead of `cn()`
-- Wrong button variant for the action type
-- Missing loading/skeleton states
-- Missing error states on forms
-- Importing from emcn subpaths instead of barrel export
-- Using arbitrary z-index (`z-50`, `z-[9999]`) instead of z-index tokens
-- Custom shadows instead of shadow tokens
-- Icon sizes that don't follow the established scale (default to `size-[14px]`)
-- Splitting equal height/width into `h-* w-*` pairs instead of the `size-*` shorthand
+- Raw `<button>`/`<input>`, or legacy `Input`/`Textarea`/`Modal`, instead of the canonical chip components (`ChipInput`/`ChipTextarea`/`ChipModal`)
+- Hand-rolled field rows inside a `ChipModalBody` instead of `ChipModalField`
+- Hardcoded colors (`text-gray-*`, `#hex`, `rgb()`)
+- Tailwind semantics (`text-muted-foreground`) instead of CSS variables
+- Template literal className instead of `cn()`
+- Inline styles for colors/static values (dynamic values OK)
+- Importing from emcn subpaths instead of barrel
+- Arbitrary z-index instead of tokens
+- Wrong button variant for action type
diff --git a/.claude/commands/emcn-design-review.md b/.claude/commands/emcn-design-review.md
index 1fb3bfc9637..0c96b074796 100644
--- a/.claude/commands/emcn-design-review.md
+++ b/.claude/commands/emcn-design-review.md
@@ -57,7 +57,7 @@ Intent-to-variant mapping (read the actual `buttonVariants` in `apps/sim/compone
 
 ## Delete/Remove Confirmations
 
-Modal `size="sm"`, title "Delete/Remove {ItemType}", `variant="destructive"` action button, `variant="default"` cancel. Cancel left, action right (100% compliance). Use `text-[var(--text-error)]` for irreversible warnings.
+`ChipModal` `size='sm'`, title "Delete/Remove {ItemType}", destructive confirm button, plain Cancel (follow the chip footer layout in `.claude/rules/emcn-components.md`). Use `text-[var(--text-error)]` for irreversible warnings.
 
 ## Toast
 
@@ -73,7 +73,8 @@ Default: `size-[14px]`. Color: `text-[var(--text-icon)]`. Scale: 14px > 16px > 1
 
 ## Anti-patterns to flag
 
-- Raw `<button>`/`<input>` instead of emcn components
+- Raw `<button>`/`<input>`, or legacy `Input`/`Textarea`/`Modal`, instead of the canonical chip components (`ChipInput`/`ChipTextarea`/`ChipModal`)
+- Hand-rolled field rows inside a `ChipModalBody` instead of `ChipModalField`
 - Hardcoded colors (`text-gray-*`, `#hex`, `rgb()`)
 - Tailwind semantics (`text-muted-foreground`) instead of CSS variables
 - Template literal className instead of `cn()`
diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index 71359361200..9adf86506be 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -5,13 +5,13 @@ paths:
 
 # EMCN Components
 
-Import from `@/components/emcn`, never from subpaths (except CSS files). The **chip family** is the platform's primary chrome — prefer it over the legacy primitives (`Input`, `Textarea`, etc.), which it is progressively replacing.
+Import from `@/components/emcn`, never from subpaths (except CSS files). The **chip family** is the platform's primary chrome — always reach for it over the legacy primitives it is progressively replacing (`Input`→`ChipInput`, `Textarea`→`ChipTextarea`, `Modal`→`ChipModal`, `Select`/`Combobox`→`ChipSelect`/`ChipCombobox`/`ChipDropdown`, `Switch`→`ChipSwitch`, date field→`ChipDatePicker`). For context/action menus the canonical control is `DropdownMenu` — the standard menu (not a chip, and never a hand-rolled popover).
 
 ## Chip chrome — single source of truth
 
 Never hand-roll the chip pill from raw class strings (they go stale). Compose from the canonical sources:
 
-- **Surface + typography tokens:** `chip-input/chip-field-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass`. Text fields and the dropdown search box build on these.
+- **Surface, typography + content tokens:** `chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, and `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells). All are re-exported from the `@/components/emcn` barrel — no subpath import needed.
 - **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipDropdown`, `ChipSelect`, `ChipSwitch`) reuses it for visual parity.
 
 Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border-1` border.
@@ -25,14 +25,15 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default).
 - **`ChipDropdown`** — pill that opens a menu. Single OR multi-select via the discriminated `multiple` prop (one component, not two). Owns its trailing chevron — no `rightIcon`.
 - **`ChipSelect` / `ChipCombobox`** — `Combobox`-backed pickers with search, groups, multi-select; for richer lists than `ChipDropdown`.
-- **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch.
+- **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch. **Every body field MUST be a `ChipModalField`** — never hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds another `px-2`, so each field lands at effective `px-4`, exactly matching the `px-4` header/footer — a hand-rolled row skips that gutter and sits misaligned at `px-2`. For controls the field doesn't cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `type='custom'` with a `title` — it still applies the gutter and renders the canonical `Label`.
 - **`ChipSwitch`** — segmented pill control (built from `chipVariants`).
 - **`ChipTag`** — 20px inline tag/badge (`mono`/`gray`/`invite`), not a pill trigger.
 - **`ChipDatePicker`** — chip-styled date field.
+- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
 
 ## Authoring principles
 
-- **One source of truth for shared chrome.** Compose from `chip-field-chrome.ts` / `chipVariants`; never duplicate the chrome string.
+- **One source of truth for shared chrome.** Compose from `chip-chrome.ts` / `chipVariants`; never duplicate the chrome string.
 - **`cn()` for a single state toggle, CVA for genuine multiple variants.** A lone `error` boolean is `cn()`, not a CVA variant.
 - **Discriminated-union props for modes** (e.g. `multiple`, the modal field `type`) instead of near-duplicate components.
 - **Delete legacy variants after migration** — don't leave dead paths (this paradigm removed `Input variant='chip'` and `ChipMultiSelect`).
diff --git a/.claude/rules/sim-styling.md b/.claude/rules/sim-styling.md
index 9b4d9cb3842..61e4c5d1967 100644
--- a/.claude/rules/sim-styling.md
+++ b/.claude/rules/sim-styling.md
@@ -52,7 +52,7 @@ Value text `--text-body`; muted/placeholder/labels `--text-muted`; icons `--text
 
 ## Chip Components (consumer usage)
 
-`ChipInput`, `ChipTextarea`, `ChipModal*` own their full chrome. Consumers describe intent through PROPS; they never re-style the chrome. The canonical chrome lives in `apps/sim/components/emcn/components/chip-input/chip-field-chrome.ts` — never hand-roll `rounded-lg`/`border`/`bg-[var(--surface-5)]`/`h-[30px]`/`px-2`/`text-sm`/focus rings.
+`ChipInput`, `ChipTextarea`, `ChipModal*` own their full chrome. Consumers describe intent through PROPS; they never re-style the chrome. The canonical chrome lives in `apps/sim/components/emcn/components/chip/chip-chrome.ts` (all tokens are re-exported from the `@/components/emcn` barrel — no subpath import needed) — never hand-roll `rounded-lg`/`border`/`bg-[var(--surface-5)]`/`h-[30px]`/`px-2`/`text-sm`/focus rings.
 
 ### Props over className
 
@@ -71,6 +71,8 @@ Layout/sizing ONLY: `flex-1`, `w-full`, `w-[Npx]`, `min-w-0`, `max-w-*`, margins
 - **Field row** = `ChipModalField`: label↔control `gap-[9px]`, field gutter `px-2` (`px-0` when `flush`). Title = `Label` at `text-small` (13px), muted, normal weight; hint/error at `text-caption` (12px).
 - **Modal body** (`ChipModalBody`): `gap-4` between fields, padding `px-2 pt-4 pb-4.5`.
 - **Header/footer**: horizontal gutter `px-4` (header `pt-3`; footer `px-4 pt-2 pb-2`, tinted bar).
+- **Every body field MUST be a `ChipModalField`** — NEVER hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). WHY: body `px-2` + field `px-2` = effective `px-4`, exactly matching the `px-4` header/footer. A hand-rolled row skips the field gutter, sits at `px-2`, and is visibly misaligned (this bug shipped in the scheduled-tasks "Create new scheduled task" modal). Inline errors go through the `error` prop, not a hand-rolled `<p>`.
+- **Uncovered controls** (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX) → `ChipModalField type='custom'` with a `title`. It still applies the `px-2` gutter and renders the canonical `Label`, so it stays aligned. Never drop such a control into a raw `<div>`, and never add a body-level wrapper `<div>` with a custom `gap-*` that fights `gap-4`.
 - **Page section rhythm** (integrations/skills/settings): muted `text-small` label + `mt-[9px] mb-3 h-px bg-[var(--border)]` divider, sections stacked `gap-7`. Reuse `SettingsSection` (`app/workspace/[workspaceId]/settings/components/settings-section/settings-section.tsx`) rather than re-deriving it.
 
 When a standalone labeled field outside a `ChipModal` needs the same look (e.g. `SkillImport`), match the field rhythm by hand: `flex flex-col gap-[9px]`, muted label, `ChipInput`/`ChipTextarea` control, `text-caption` error below.
diff --git a/.cursor/commands/emcn-design-review.md b/.cursor/commands/emcn-design-review.md
index e51e5bc4445..750f4c4ef2a 100644
--- a/.cursor/commands/emcn-design-review.md
+++ b/.cursor/commands/emcn-design-review.md
@@ -12,7 +12,7 @@ This codebase uses **emcn**, a custom component library built on Radix UI primit
 
 ## Steps
 
-1. Read the emcn barrel export at `apps/sim/components/emcn/components/index.ts` to know what's available
+1. Read the emcn public barrel at `apps/sim/components/emcn/index.ts` (re-exports components, Calendar, Table*, and icons) to know what's available; for the full icon set read `apps/sim/components/emcn/icons/index.ts`
 2. Read `apps/sim/app/_styles/globals.css` for CSS variable tokens
 3. Analyze the specified scope against every rule below
 4. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.
@@ -29,18 +29,22 @@ This codebase uses **emcn**, a custom component library built on Radix UI primit
 
 Use CSS variable pattern (`text-[var(--text-primary)]`), never Tailwind semantics (`text-muted-foreground`) or hardcoded colors (`text-gray-500`, `#333`).
 
-**Text**: `--text-primary`, `--text-secondary`, `--text-tertiary`, `--text-muted`, `--text-icon`, `--text-inverse`, `--text-error`
-**Surfaces**: `--bg`, `--surface-2` through `--surface-7`, `--surface-hover`, `--surface-active`
+**Text**: `--text-primary`, `--text-secondary`, `--text-tertiary`, `--text-muted`, `--text-body` (canonical value text), `--text-icon`, `--text-placeholder`, `--text-subtle`, `--text-inverse`, `--text-error`
+**Surfaces**: `--bg`, `--surface-1` through `--surface-7`, `--surface-hover`, `--surface-active`
 **Borders**: `--border`, `--border-1`, `--border-muted`
+**Brand/accent**: `--brand-secondary`, `--brand-accent`
 **Z-Index**: `--z-dropdown` (100), `--z-modal` (200), `--z-popover` (300), `--z-tooltip` (400), `--z-toast` (500)
 **Shadows**: `shadow-subtle`, `shadow-medium`, `shadow-overlay`, `shadow-card`
+**Badges**: `--badge-*` semantic families (success/error/gray/blue/purple/orange/amber/teal/cyan/pink, each with `-bg`/`-text`)
 
 ## Buttons
 
+Intent-to-variant mapping (read the actual `buttonVariants` in `apps/sim/components/emcn/components/button/button.tsx` for the full variant set — it exposes more than listed here):
+
 | Action | Variant |
 |--------|---------|
-| Toolbar, icon-only | `ghost` (most common, 28%) |
-| Create, save, submit | `primary` (24%) |
+| Toolbar, icon-only | `ghost` |
+| Create, save, submit | `primary` |
 | Cancel, close | `default` |
 | Delete, remove | `destructive` |
 | Selected state | `active` |
@@ -48,7 +52,7 @@ Use CSS variable pattern (`text-[var(--text-primary)]`), never Tailwind semantic
 
 ## Delete/Remove Confirmations
 
-Modal `size="sm"`, title "Delete/Remove {ItemType}", `variant="destructive"` action button, `variant="default"` cancel. Cancel left, action right (100% compliance). Use `text-[var(--text-error)]` for irreversible warnings.
+`ChipModal` `size='sm'`, title "Delete/Remove {ItemType}", destructive confirm button, plain Cancel (follow the chip footer layout in `.claude/rules/emcn-components.md`). Use `text-[var(--text-error)]` for irreversible warnings.
 
 ## Toast
 
@@ -64,7 +68,8 @@ Default: `size-[14px]`. Color: `text-[var(--text-icon)]`. Scale: 14px > 16px > 1
 
 ## Anti-patterns to flag
 
-- Raw `<button>`/`<input>` instead of emcn components
+- Raw `<button>`/`<input>`, or legacy `Input`/`Textarea`/`Modal`, instead of the canonical chip components (`ChipInput`/`ChipTextarea`/`ChipModal`)
+- Hand-rolled field rows inside a `ChipModalBody` instead of `ChipModalField`
 - Hardcoded colors (`text-gray-*`, `#hex`, `rgb()`)
 - Tailwind semantics (`text-muted-foreground`) instead of CSS variables
 - Template literal className instead of `cn()`
diff --git a/.cursor/rules/emcn-components.mdc b/.cursor/rules/emcn-components.mdc
index be34ad31cbb..cfa03764482 100644
--- a/.cursor/rules/emcn-components.mdc
+++ b/.cursor/rules/emcn-components.mdc
@@ -4,13 +4,13 @@ globs: ["apps/sim/components/emcn/**"]
 ---
 # EMCN Components
 
-Import from `@/components/emcn`, never from subpaths (except CSS files). The **chip family** is the platform's primary chrome — prefer it over the legacy primitives (`Input`, `Textarea`, etc.), which it is progressively replacing.
+Import from `@/components/emcn`, never from subpaths (except CSS files). The **chip family** is the platform's primary chrome — always reach for it over the legacy primitives it is progressively replacing (`Input`→`ChipInput`, `Textarea`→`ChipTextarea`, `Modal`→`ChipModal`, `Select`/`Combobox`→`ChipSelect`/`ChipCombobox`/`ChipDropdown`, `Switch`→`ChipSwitch`, date field→`ChipDatePicker`). For context/action menus the canonical control is `DropdownMenu` — the standard menu (not a chip, and never a hand-rolled popover).
 
 ## Chip chrome — single source of truth
 
 Never hand-roll the chip pill from raw class strings (they go stale). Compose from the canonical sources:
 
-- **Surface + typography tokens:** `chip-input/chip-field-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass`. Text fields and the dropdown search box build on these.
+- **Surface, typography + content tokens:** `chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, and `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells). All are re-exported from the `@/components/emcn` barrel — no subpath import needed.
 - **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipDropdown`, `ChipSelect`, `ChipSwitch`) reuses it for visual parity.
 
 Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border-1` border.
@@ -24,14 +24,15 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default).
 - **`ChipDropdown`** — pill that opens a menu. Single OR multi-select via the discriminated `multiple` prop (one component, not two). Owns its trailing chevron — no `rightIcon`.
 - **`ChipSelect` / `ChipCombobox`** — `Combobox`-backed pickers with search, groups, multi-select; for richer lists than `ChipDropdown`.
-- **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch.
+- **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch. **Every body field MUST be a `ChipModalField`** — never hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds another `px-2`, so each field lands at effective `px-4`, exactly matching the `px-4` header/footer — a hand-rolled row skips that gutter and sits misaligned at `px-2`. For controls the field doesn't cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `type='custom'` with a `title` — it still applies the gutter and renders the canonical `Label`.
 - **`ChipSwitch`** — segmented pill control (built from `chipVariants`).
 - **`ChipTag`** — 20px inline tag/badge (`mono`/`gray`/`invite`), not a pill trigger.
 - **`ChipDatePicker`** — chip-styled date field.
+- **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
 
 ## Authoring principles
 
-- **One source of truth for shared chrome.** Compose from `chip-field-chrome.ts` / `chipVariants`; never duplicate the chrome string.
+- **One source of truth for shared chrome.** Compose from `chip-chrome.ts` / `chipVariants`; never duplicate the chrome string.
 - **`cn()` for a single state toggle, CVA for genuine multiple variants.** A lone `error` boolean is `cn()`, not a CVA variant.
 - **Discriminated-union props for modes** (e.g. `multiple`, the modal field `type`) instead of near-duplicate components.
 - **Delete legacy variants after migration** — don't leave dead paths (this paradigm removed `Input variant='chip'` and `ChipMultiSelect`).
diff --git a/.cursor/rules/sim-styling.mdc b/.cursor/rules/sim-styling.mdc
index 8d4c20b87d7..cdf392cd7f4 100644
--- a/.cursor/rules/sim-styling.mdc
+++ b/.cursor/rules/sim-styling.mdc
@@ -50,7 +50,7 @@ Value text `--text-body`; muted/placeholder/labels `--text-muted`; icons `--text
 
 ## Chip Components (consumer usage)
 
-`ChipInput`, `ChipTextarea`, `ChipModal*` own their full chrome. Consumers describe intent through PROPS; they never re-style the chrome. The canonical chrome lives in `apps/sim/components/emcn/components/chip-input/chip-field-chrome.ts` — never hand-roll `rounded-lg`/`border`/`bg-[var(--surface-5)]`/`h-[30px]`/`px-2`/`text-sm`/focus rings.
+`ChipInput`, `ChipTextarea`, `ChipModal*` own their full chrome. Consumers describe intent through PROPS; they never re-style the chrome. The canonical chrome lives in `apps/sim/components/emcn/components/chip/chip-chrome.ts` (all tokens are re-exported from the `@/components/emcn` barrel — no subpath import needed) — never hand-roll `rounded-lg`/`border`/`bg-[var(--surface-5)]`/`h-[30px]`/`px-2`/`text-sm`/focus rings.
 
 ### Props over className
 
@@ -69,6 +69,8 @@ Layout/sizing ONLY: `flex-1`, `w-full`, `w-[Npx]`, `min-w-0`, `max-w-*`, margins
 - **Field row** = `ChipModalField`: label↔control `gap-[9px]`, field gutter `px-2` (`px-0` when `flush`). Title = `Label` at `text-small` (13px), muted, normal weight; hint/error at `text-caption` (12px).
 - **Modal body** (`ChipModalBody`): `gap-4` between fields, padding `px-2 pt-4 pb-4.5`.
 - **Header/footer**: horizontal gutter `px-4` (header `pt-3`; footer `px-4 pt-2 pb-2`, tinted bar).
+- **Every body field MUST be a `ChipModalField`** — NEVER hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). WHY: body `px-2` + field `px-2` = effective `px-4`, exactly matching the `px-4` header/footer. A hand-rolled row skips the field gutter, sits at `px-2`, and is visibly misaligned (this bug shipped in the scheduled-tasks "Create new scheduled task" modal). Inline errors go through the `error` prop, not a hand-rolled `<p>`.
+- **Uncovered controls** (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX) → `ChipModalField type='custom'` with a `title`. It still applies the `px-2` gutter and renders the canonical `Label`, so it stays aligned. Never drop such a control into a raw `<div>`, and never add a body-level wrapper `<div>` with a custom `gap-*` that fights `gap-4`.
 - **Page section rhythm** (integrations/skills/settings): muted `text-small` label + `mt-[9px] mb-3 h-px bg-[var(--border)]` divider, sections stacked `gap-7`. Reuse `SettingsSection` (`app/workspace/[workspaceId]/settings/components/settings-section/settings-section.tsx`) rather than re-deriving it.
 
 When a standalone labeled field outside a `ChipModal` needs the same look (e.g. `SkillImport`), match the field rhythm by hand: `flex flex-col gap-[9px]`, muted label, `ChipInput`/`ChipTextarea` control, `text-caption` error below.
diff --git a/AGENTS.md b/AGENTS.md
index 7afc9dab68e..78feaedb30a 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -45,29 +45,26 @@ apps/
 │   ├── tools/              # Tool definitions
 │   └── triggers/           # Trigger definitions
 └── realtime/               # Bun Socket.IO server (collaborative canvas)
-    └── src/                # auth, config, database, handlers, middleware,
-                            # rooms, routes, internal/webhook-cleanup.ts
 
 packages/
-├── audit/                  # @sim/audit — recordAudit + AuditAction + AuditResourceType
-├── auth/                   # @sim/auth — @sim/auth/verify (shared Better Auth verifier)
+├── audit/                  # @sim/audit
+├── auth/                   # @sim/auth — shared Better Auth verifier
 ├── db/                     # @sim/db — drizzle schema + client
 ├── logger/                 # @sim/logger
-├── realtime-protocol/      # @sim/realtime-protocol — socket operation constants + zod schemas
+├── realtime-protocol/      # @sim/realtime-protocol — socket op constants + zod schemas
 ├── security/               # @sim/security — safeCompare
 ├── tsconfig/               # shared tsconfig presets
 ├── utils/                  # @sim/utils
-├── workflow-authz/         # @sim/workflow-authz — authorizeWorkflowByWorkspacePermission
-├── workflow-persistence/   # @sim/workflow-persistence — raw load/save + subflow helpers
-└── workflow-types/         # @sim/workflow-types — pure BlockState/Loop/Parallel/... types
+├── workflow-authz/         # @sim/workflow-authz
+├── workflow-persistence/   # @sim/workflow-persistence
+└── workflow-types/         # @sim/workflow-types — pure BlockState/Loop/Parallel types
 ```
 
 ### Package boundaries
 
 - `apps/* → packages/*` only. Packages never import from `apps/*`.
-- Each package has explicit subpath `exports` maps; no barrels that accidentally pull in heavy halves.
-- `apps/realtime` intentionally avoids Next.js, React, the block/tool registry, provider SDKs, and the executor. CI enforces this via `scripts/check-monorepo-boundaries.ts` and `scripts/check-realtime-prune-graph.ts`.
-- Auth is shared across services via the Better Auth "Shared Database Session" pattern: both apps read the same `BETTER_AUTH_SECRET` and point at the same DB via `@sim/db`.
+- `apps/realtime` intentionally avoids Next.js, React, the block/tool registry, provider SDKs, and the executor. Do not add imports from `@/lib/webhooks/providers/*`, `@/executor/*`, `@/blocks/*`, or `@/tools/*` to any package consumed by `apps/realtime`. CI enforces this via `scripts/check-monorepo-boundaries.ts` and `scripts/check-realtime-prune-graph.ts`.
+- Auth is shared across both apps via the Better Auth "Shared Database Session" pattern (same `BETTER_AUTH_SECRET`, same DB via `@sim/db`).
 
 ### Naming Conventions
 
@@ -146,7 +143,7 @@ Domain validators that are not HTTP boundaries — tools, blocks, triggers, conn
 
 A small number of legitimate exceptions to the boundary rules are tolerated when annotated. The audit script recognizes four annotation forms:
 
-- `// boundary-raw-fetch: <reason>` — placed on the line directly above a raw `fetch(` call inside `apps/sim/hooks/queries/**`, `apps/sim/hooks/selectors/**`, or any other client/UI source under `apps/sim/**` that targets a same-origin `/api/...` URL outside an API route handler. Use only for documented exceptions: streaming responses, binary downloads, multipart uploads, signed-URL flows, OAuth redirects, and external-origin requests
+- `// boundary-raw-fetch: <reason>` — placed on the line directly above a raw `fetch(` call in client hooks (`apps/sim/hooks/queries/**`, `apps/sim/hooks/selectors/**`) AND any same-origin `/api/...` fetch elsewhere under `apps/sim/**` outside an API route handler. Use only for documented exceptions: streaming responses, binary downloads, multipart uploads, signed-URL flows, OAuth redirects, and external-origin requests
 - `// double-cast-allowed: <reason>` — placed on the line directly above an `as unknown as X` cast outside test files
 - `// boundary-raw-json: <reason>` — placed on the line directly above a raw `await request.json()` / `await req.json()` read in a route handler. Use only when the body is a JSON-RPC envelope, a tolerant `.catch(() => ({}))` parse, or otherwise cannot go through `parseRequest`
 - `// untyped-response: <reason>` — placed on the line directly above a `schema: z.unknown()` response declaration in a contract file. Use only when the response body is genuinely opaque (user-supplied data, third-party passthrough)
@@ -169,7 +166,7 @@ const provider = config as unknown as LegacyProvider
 
 ## API Route Pattern
 
-Every API route handler must be wrapped with `withRouteHandler`. This sets up `AsyncLocalStorage`-based request context so all loggers in the request lifecycle automatically include the request ID. Never export a bare `async function GET/POST/...` — always use `export const METHOD = withRouteHandler(...)`.
+Every API route handler must be wrapped with `withRouteHandler`. This sets up `AsyncLocalStorage`-based request context so all loggers in the request lifecycle automatically include the request ID.
 
 Routes never `import { z } from 'zod'` and never define route-local boundary schemas. They consume the contract from `@/lib/api/contracts/**` and validate with canonical helpers from `@/lib/api/server`:
 
@@ -191,11 +188,11 @@ import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 const logger = createLogger('FoldersAPI')
 
 export const POST = withRouteHandler(async (request: NextRequest) => {
-  const parsed = await parseRequest(createFolderContract, request, {})
-  if (!parsed.success) return parsed.response
-  const { body } = parsed.data
-  logger.info('Creating folder', { workspaceId: body.workspaceId })
-  return NextResponse.json({ ok: true })
+ const parsed = await parseRequest(createFolderContract, request, {})
+ if (!parsed.success) return parsed.response
+ const { body } = parsed.data
+ logger.info('Creating folder', { workspaceId: body.workspaceId })
+ return NextResponse.json({ ok: true })
 })
 ```
 
@@ -209,6 +206,8 @@ export const POST = withRouteHandler(withAdminAuth(async (request) => {
 
 Routes under `apps/sim/app/api/v1/**` use the shared middleware in `apps/sim/app/api/v1/middleware.ts` for auth, rate-limit, and workspace access. Compose contract validation inside that middleware — never reimplement auth/rate-limit per-route.
 
+Never export a bare `async function GET/POST/...` — always use `export const METHOD = withRouteHandler(...)`.
+
 ### Adding a new boundary feature end-to-end
 
 When adding a new route + client surface, follow this order. Each step has one place it lives.
@@ -282,7 +281,7 @@ Hooks consume contracts the same way routes do. Every same-origin JSON call must
 
 - Hooks import named type aliases from `@/lib/api/contracts/**`. Never write `z.input<...>` / `z.output<...>` in hooks, and never `import { z } from 'zod'` in client code
 - `requestJson` parses params, query, body, and headers against the contract on the way out and validates the JSON response on the way back. Hooks always forward `signal` for cancellation
-- Documented exceptions for raw `fetch`: streaming responses, binary downloads, multipart uploads, signed-URL flows, OAuth redirects, and external-origin requests. Mark each raw `fetch` with a TSDoc comment explaining which exception applies
+- Documented exceptions for raw `fetch`: streaming responses, binary downloads, multipart uploads, signed-URL flows, OAuth redirects, and external-origin requests. Mark each raw `fetch` with a TSDoc comment explaining which exception applies. The `// boundary-raw-fetch` annotation is required not only in client hooks but for any same-origin `/api/...` fetch anywhere under `apps/sim/**` outside an API route handler — strict CI flags these regardless of location
 
 ```typescript
 import { keepPreviousData, useQuery } from '@tanstack/react-query'
@@ -388,7 +387,9 @@ On chip components (see "EMCN Components"), drive chrome through PROPS, not `cla
 
 Import from `@/components/emcn`, never from subpaths (except CSS files). Use CVA only when 2+ genuine variants exist; otherwise plain `cn()`.
 
-The chip pill is the canonical UI chrome and is progressively replacing the legacy EMCN primitives — prefer the chip equivalents (`ChipInput`/`ChipTextarea` over `Input`/`Textarea`, plus `Chip`/`ChipLink`, `ChipDropdown`, `ChipSelect`/`ChipCombobox`, `ChipModal`, `ChipSwitch`, `ChipTag`, `ChipDatePicker`). Components OWN their chrome (single source of truth) — consumers pass props, not class overrides. Authoring rules in `.claude/rules/emcn-components.md`; consumer rules in `.claude/rules/sim-styling.md`.
+The chip family is the canonical UI chrome and is progressively replacing the legacy EMCN primitives — always reach for the chip equivalent: `ChipInput` over `Input`, `ChipTextarea` over `Textarea`, `ChipModal`/`ChipModalField` over `Modal`, `ChipSelect`/`ChipCombobox` (searchable) or `ChipDropdown` (simple menu-select) over `Select`/`Combobox`, `ChipSwitch` over `Switch`, `ChipDatePicker` over a raw date field, `Chip`/`ChipLink` for pill buttons/links, `ChipTag` for inline tags/badges. For context/action menus the canonical control is `DropdownMenu` (not a chip, but the standard menu — not a hand-rolled popover). Components OWN their chrome (single source of truth) — consumers pass props, not class overrides. Authoring rules in `.claude/rules/emcn-components.md`; consumer rules in `.claude/rules/sim-styling.md`.
+
+Inside a `ChipModalBody`, EVERY labeled field MUST be a `ChipModalField` — never hand-roll a field row (a raw `<div>` + a hand-rolled `<p>`/`<label>` title + a bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds ANOTHER `px-2`, so each field lands at effective `px-4`, exactly matching `ChipModalHeader`/`ChipModalFooter` (`px-4`). Hand-rolled rows skip the field's gutter and sit at `px-2`, visibly misaligned with the header/footer. For controls `ChipModalField` does not cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `ChipModalField type='custom'` with a `title` — it still applies the `px-2` gutter and renders the canonical `Label`. Drive intent via props (`title`/`value`/`onChange`/`error`/`hint`/`required`/`flush`); never pass `variant`/`className`/`id` to the inner control, and never add a body-level wrapper `<div>` with a custom `gap-*` that fights `ChipModalBody`'s `gap-4`.
 
 ## Design-System Consolidation
 
@@ -408,7 +409,7 @@ Use Vitest. Test files: `feature.ts` → `feature.test.ts`. See `.cursor/rules/s
 
 ### Global Mocks (vitest.setup.ts)
 
-`@sim/db`, `drizzle-orm`, `@sim/logger`, `@/blocks/registry`, `@trigger.dev/sdk`, and store mocks are provided globally. Do NOT re-mock them unless overriding behavior.
+`@sim/db`, `@sim/db/schema`, `drizzle-orm`, `@sim/logger`, `@sim/workflow-authz`, `@/blocks/registry`, `@/lib/auth`, `@/lib/auth/hybrid`, `@/lib/core/utils/request`, `@trigger.dev/sdk`, and store mocks are provided globally. Do NOT re-mock them unless overriding behavior. (The `vi.mock('@/lib/auth', ...)` in the example below is an override of the global mock so `getSession` can be controlled per-test.)
 
 ### Standard Test Pattern
 
@@ -458,126 +459,12 @@ Use `@sim/testing` mocks/factories over local test data.
 
 ## Adding Integrations
 
-New integrations require: **Tools** → **Block** → **Icon** → (optional) **Trigger**
-
-Always look up the service's API docs first.
-
-### 1. Tools (`tools/{service}/`)
-
-```
-tools/{service}/
-├── index.ts      # Barrel export
-├── types.ts      # Params/response types
-└── {action}.ts   # Tool implementation
-```
-
-**Tool structure:**
-
-```typescript
-export const serviceTool: ToolConfig<Params, Response> = {
-  id: 'service_action',
-  name: 'Service Action',
-  description: '...',
-  version: '1.0.0',
-  oauth: { required: true, provider: 'service' },
-  params: { /* ... */ },
-  request: { url: '/api/tools/service/action', method: 'POST', ... },
-  transformResponse: async (response) => { /* ... */ },
-  outputs: { /* ... */ },
-}
-```
-
-Register in `tools/registry.ts`.
-
-### 2. Block (`blocks/blocks/{service}.ts`)
-
-```typescript
-export const ServiceBlock: BlockConfig = {
-  type: 'service',
-  name: 'Service',
-  description: '...',
-  category: 'tools',
-  bgColor: '#hexcolor',
-  icon: ServiceIcon,
-  subBlocks: [ /* see SubBlock Properties */ ],
-  tools: { access: ['service_action'], config: { tool: (p) => `service_${p.operation}`, params: (p) => ({ /* type coercions here */ }) } },
-  inputs: { /* ... */ },
-  outputs: { /* ... */ },
-}
-```
-
-Register in `blocks/registry.ts` (alphabetically).
-
-**Important:** `tools.config.tool` runs during serialization (before variable resolution). Never do `Number()` or other type coercions there — dynamic references like `<Block.output>` will be destroyed. Use `tools.config.params` for type coercions (it runs during execution, after variables are resolved).
-
-**SubBlock Properties:**
-
-```typescript
-{
-  id: 'field', title: 'Label', type: 'short-input', placeholder: '...',
-  required: true,                    // or condition object
-  condition: { field: 'op', value: 'send' },  // show/hide
-  dependsOn: ['credential'],         // clear when dep changes
-  mode: 'basic',                     // 'basic' | 'advanced' | 'both' | 'trigger'
-}
-```
-
-**condition examples:**
-
-- `{ field: 'op', value: 'send' }` - show when op === 'send'
-- `{ field: 'op', value: ['a','b'] }` - show when op is 'a' OR 'b'
-- `{ field: 'op', value: 'x', not: true }` - show when op !== 'x'
-- `{ field: 'op', value: 'x', not: true, and: { field: 'type', value: 'dm', not: true } }` - complex
-
-**dependsOn:** `['field']` or `{ all: ['a'], any: ['b', 'c'] }`
-
-**File Input Pattern (basic/advanced mode):**
-
-```typescript
-// Basic: file-upload UI
-{ id: 'uploadFile', type: 'file-upload', canonicalParamId: 'file', mode: 'basic' },
-// Advanced: reference from other blocks
-{ id: 'fileRef', type: 'short-input', canonicalParamId: 'file', mode: 'advanced' },
-```
-
-In `tools.config.tool`, normalize with:
-
-```typescript
-import { normalizeFileInput } from '@/blocks/utils'
-const file = normalizeFileInput(params.uploadFile || params.fileRef, { single: true })
-if (file) params.file = file
-```
-
-For file uploads, create an internal API route (`/api/tools/{service}/upload`) that uses `downloadFileFromStorage` to get file content from `UserFile` objects.
-
-### 3. Icon (`components/icons.tsx`)
-
-```typescript
-export function ServiceIcon(props: SVGProps<SVGSVGElement>) {
-  return <svg {...props}>/* SVG from brand assets */</svg>
-}
-```
-
-### 4. Trigger (`triggers/{service}/`) - Optional
-
-```
-triggers/{service}/
-├── index.ts      # Barrel export
-├── webhook.ts    # Webhook handler
-└── {event}.ts    # Event-specific handlers
-```
+New integrations are built in order: **Tools** → **Block** → **Icon** → (optional) **Trigger**. Always look up the service's API docs first.
 
-Register in `triggers/registry.ts`.
+Two hard rules that the skills assume:
 
-### Integration Checklist
+- **Tool IDs are `snake_case`** (`service_action`) and must be registered in `tools/registry.ts`; blocks register in `blocks/registry.ts` (alphabetically).
+- **`tools.config.tool` runs during serialization (before variable resolution)** — never do `Number()` or other type coercions there, or dynamic references like `<Block.output>` are destroyed. Put all type coercions in `tools.config.params`, which runs during execution after variables resolve.
 
-- Look up API docs
-- Create `tools/{service}/` with types and tools
-- Register tools in `tools/registry.ts`
-- Add icon to `components/icons.tsx`
-- Create block in `blocks/blocks/{service}.ts`
-- Register block in `blocks/registry.ts`
-- (Optional) Create and register triggers
-- (If file uploads) Create internal API route with `downloadFileFromStorage`
-- (If file uploads) Use `normalizeFileInput` in block config
+For the full authoring instructions — SubBlock property tables, `condition`/`dependsOn`/`required`/`mode`/`canonicalParamId` syntax, required block metadata (`integrationType`, `tags`, `authMode`, `docsLink`, `{Service}BlockMeta`), file-input/`normalizeFileInput` patterns, and checklists — use the skills: `/add-integration` (end-to-end), `/add-tools`, `/add-block`, `/add-trigger`.
 
diff --git a/CLAUDE.md b/CLAUDE.md
index d3012be8b22..78feaedb30a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -387,7 +387,9 @@ On chip components (see "EMCN Components"), drive chrome through PROPS, not `cla
 
 Import from `@/components/emcn`, never from subpaths (except CSS files). Use CVA only when 2+ genuine variants exist; otherwise plain `cn()`.
 
-The chip pill is the canonical UI chrome and is progressively replacing the legacy EMCN primitives — prefer the chip equivalents (`ChipInput`/`ChipTextarea` over `Input`/`Textarea`, plus `Chip`/`ChipLink`, `ChipDropdown`, `ChipSelect`/`ChipCombobox`, `ChipModal`, `ChipSwitch`, `ChipTag`, `ChipDatePicker`). Components OWN their chrome (single source of truth) — consumers pass props, not class overrides. Authoring rules in `.claude/rules/emcn-components.md`; consumer rules in `.claude/rules/sim-styling.md`.
+The chip family is the canonical UI chrome and is progressively replacing the legacy EMCN primitives — always reach for the chip equivalent: `ChipInput` over `Input`, `ChipTextarea` over `Textarea`, `ChipModal`/`ChipModalField` over `Modal`, `ChipSelect`/`ChipCombobox` (searchable) or `ChipDropdown` (simple menu-select) over `Select`/`Combobox`, `ChipSwitch` over `Switch`, `ChipDatePicker` over a raw date field, `Chip`/`ChipLink` for pill buttons/links, `ChipTag` for inline tags/badges. For context/action menus the canonical control is `DropdownMenu` (not a chip, but the standard menu — not a hand-rolled popover). Components OWN their chrome (single source of truth) — consumers pass props, not class overrides. Authoring rules in `.claude/rules/emcn-components.md`; consumer rules in `.claude/rules/sim-styling.md`.
+
+Inside a `ChipModalBody`, EVERY labeled field MUST be a `ChipModalField` — never hand-roll a field row (a raw `<div>` + a hand-rolled `<p>`/`<label>` title + a bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds ANOTHER `px-2`, so each field lands at effective `px-4`, exactly matching `ChipModalHeader`/`ChipModalFooter` (`px-4`). Hand-rolled rows skip the field's gutter and sit at `px-2`, visibly misaligned with the header/footer. For controls `ChipModalField` does not cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `ChipModalField type='custom'` with a `title` — it still applies the `px-2` gutter and renders the canonical `Label`. Drive intent via props (`title`/`value`/`onChange`/`error`/`hint`/`required`/`flush`); never pass `variant`/`className`/`id` to the inner control, and never add a body-level wrapper `<div>` with a custom `gap-*` that fights `ChipModalBody`'s `gap-4`.
 
 ## Design-System Consolidation
 
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx
index da31dfcd20e..4d9c5bcef30 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx
@@ -432,7 +432,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
 
   return (
     <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      {/* Breadcrumb header — matches real ResourceHeader breadcrumb layout */}
+      {/* Breadcrumb header — matches real Resource.Header breadcrumb layout */}
       <div className='border-[var(--border)] border-b px-4 py-[8.5px]'>
         <div className='flex items-center gap-3'>
           <button
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index bd5a2ebb64f..fe041cff403 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -8,7 +8,6 @@ import {
   AvatarFallback,
   AvatarImage,
   Badge,
-  Breadcrumb,
   BubbleChatClose,
   BubbleChatPreview,
   Button,
@@ -812,17 +811,6 @@ export default function PlaygroundPage() {
               </VariantRow>
             </Section>
 
-            {/* Breadcrumb */}
-            <Section title='Breadcrumb'>
-              <Breadcrumb
-                items={[
-                  { label: 'Home', href: '#' },
-                  { label: 'Settings', href: '#' },
-                  { label: 'Profile' },
-                ]}
-              />
-            </Section>
-
             {/* Tooltip */}
             <Section title='Tooltip'>
               <VariantRow label='default'>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/chip-field.ts b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/chip-field.ts
index 8be15eea1a1..7afd46637ae 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/chip-field.ts
+++ b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/chip-field.ts
@@ -10,10 +10,7 @@
  * to the canonical chip input instead of each re-deriving the tokens.
  */
 
-import {
-  chipFieldSurfaceClass,
-  chipFieldTextClass,
-} from '@/components/emcn/components/chip-input/chip-field-chrome'
+import { chipFieldSurfaceClass, chipFieldTextClass } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 
 /** Pill wrapper. Override height/alignment (e.g. a textarea) via `cn`. */
diff --git a/apps/sim/app/workspace/[workspaceId]/components/index.ts b/apps/sim/app/workspace/[workspaceId]/components/index.ts
index 19e2cbd893d..dd30b61d6d1 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/components/index.ts
@@ -4,27 +4,34 @@ export { ErrorShell, ErrorState } from './error'
 export { InlineRenameInput } from './inline-rename-input'
 export { MessageActions } from './message-actions'
 export { ownerCell } from './resource/components/owner-cell'
+export {
+  type ChromeActionSpec,
+  ResourceChromeFallback,
+} from './resource/components/resource-chrome-fallback'
 export type {
+  BreadcrumbEditing,
   BreadcrumbItem,
-  CreateAction,
-  HeaderAction,
+  DropdownOption,
+  ResourceAction,
 } from './resource/components/resource-header'
-export { ResourceHeader } from './resource/components/resource-header'
 export type {
   ColumnOption,
+  FilterConfig,
   FilterTag,
   SearchConfig,
+  SearchTag,
   SortConfig,
-} from './resource/components/resource-options-bar'
-export { ResourceOptionsBar } from './resource/components/resource-options-bar'
+} from './resource/components/resource-options'
+export { SortDropdown } from './resource/components/resource-options'
 export { timeCell } from './resource/components/time-cell'
 export type {
   PaginationConfig,
   ResourceCell,
+  ResourceCellEditing,
   ResourceColumn,
   ResourceRow,
   RowDragDropConfig,
   SelectableConfig,
 } from './resource/resource'
-export { EMPTY_CELL_PLACEHOLDER, Resource, ResourceTable } from './resource/resource'
+export { EMPTY_CELL_PLACEHOLDER, Resource } from './resource/resource'
 export { SkillTile } from './skill-tile'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input/inline-rename-input.tsx b/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input/inline-rename-input.tsx
index f35aa7d33bf..52f9f130ef1 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input/inline-rename-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input/inline-rename-input.tsx
@@ -7,17 +7,45 @@ interface InlineRenameInputProps {
   onChange: (value: string) => void
   onSubmit: () => void
   onCancel: () => void
+  /**
+   * Disables the field while the rename is in flight, mirroring the sidebar's
+   * `disabled={isRenaming}`. Threaded from `useInlineRename`'s `isSaving`.
+   */
+  disabled?: boolean
 }
 
-export function InlineRenameInput({ value, onChange, onSubmit, onCancel }: InlineRenameInputProps) {
+/**
+ * Inline rename field used by every resource rename surface (tables, files,
+ * knowledge), triggered from a context menu. Matches the sidebar workflow rename
+ * (`useItemRename`) input verbatim: same focus-reset className and attribute set
+ * (`maxLength`, autocomplete/correct/capitalize off, spellCheck off), focus +
+ * select on mount, commit on blur, Enter to submit, Escape to cancel, disabled
+ * while saving. The only intentional delta is the table-cell `size={...}`
+ * auto-width, which the sidebar (full-width row) does not need.
+ *
+ * The triggering menu uses `onCloseAutoFocus={(e) => e.preventDefault()}`, so the
+ * Radix focus-scope teardown never steals focus back from this freshly-focused
+ * input. `onSubmit` (from `useInlineRename`) is idempotent via its `doneRef`
+ * guard, so a blur racing an Enter/Escape commit is a harmless no-op.
+ *
+ * TODO: the resource rename still intermittently unfocuses; the deeper re-render
+ * cause (parent remounting the editing cell) is tracked separately. This input is
+ * aligned to the proven sidebar pattern as the first step.
+ */
+export function InlineRenameInput({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  disabled = false,
+}: InlineRenameInputProps) {
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     const el = inputRef.current
-    if (el) {
-      el.focus()
-      el.select()
-    }
+    if (!el) return
+    el.focus()
+    el.select()
   }, [])
 
   return (
@@ -27,13 +55,24 @@ export function InlineRenameInput({ value, onChange, onSubmit, onCancel }: Inlin
       value={value}
       size={Math.max(value.length + 2, 5)}
       onChange={(e) => onChange(e.target.value)}
+      onBlur={onSubmit}
       onKeyDown={(e) => {
-        if (e.key === 'Enter') onSubmit()
-        if (e.key === 'Escape') onCancel()
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          onSubmit()
+        } else if (e.key === 'Escape') {
+          e.preventDefault()
+          onCancel()
+        }
       }}
-      onBlur={onSubmit}
       onClick={(e) => e.stopPropagation()}
-      className='min-w-0 border-0 bg-transparent p-0 font-medium text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0'
+      className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+      maxLength={100}
+      disabled={disabled}
+      autoComplete='off'
+      autoCorrect='off'
+      autoCapitalize='off'
+      spellCheck='false'
     />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
index aa4eff641e5..c5ccfcc4bc6 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
@@ -240,7 +240,7 @@ export const MessageActions = memo(function MessageActions({
       >
         <ChipModalHeader onClose={() => handleModalClose(false)}>Give feedback</ChipModalHeader>
         <ChipModalBody>
-          <div className='flex items-start justify-between gap-2 px-2 pt-1'>
+          <div className='flex items-start justify-between gap-2 px-2'>
             <p className='font-medium text-[var(--text-secondary)] text-sm'>
               {pendingFeedback === 'up' ? 'What did you like?' : 'What could be improved?'}
             </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-chrome-fallback/index.ts b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-chrome-fallback/index.ts
new file mode 100644
index 00000000000..d6ad61338aa
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-chrome-fallback/index.ts
@@ -0,0 +1,2 @@
+export type { ChromeActionSpec } from './resource-chrome-fallback'
+export { ResourceChromeFallback } from './resource-chrome-fallback'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-chrome-fallback/resource-chrome-fallback.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-chrome-fallback/resource-chrome-fallback.tsx
new file mode 100644
index 00000000000..5328e163c47
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-chrome-fallback/resource-chrome-fallback.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import type { ComponentType } from 'react'
+import type { BreadcrumbItem } from '@/app/workspace/[workspaceId]/components/resource/components/resource-header'
+import {
+  Resource,
+  type ResourceColumn,
+} from '@/app/workspace/[workspaceId]/components/resource/resource'
+
+/**
+ * The static visual shape of a header action chip. The loading fallback only
+ * needs the chrome (text/icon/variant/active) — handlers are no-ops during a
+ * route transition — so the dynamic `onSelect`/`disabled` are intentionally
+ * omitted. Mirrors {@link ResourceAction}'s chrome fields.
+ */
+export interface ChromeActionSpec {
+  text: string
+  icon?: ComponentType<{ className?: string }>
+  variant?: 'primary' | 'destructive'
+  active?: boolean
+}
+
+interface ResourceChromeFallbackProps {
+  /** Title-mode icon (list pages) or breadcrumb-root icon (detail pages). */
+  icon?: ComponentType<{ className?: string }>
+  /** Title-mode label. Omit when `breadcrumbs` is supplied. */
+  title?: string
+  /**
+   * Static breadcrumb trail for detail-route fallbacks. The live leaf name is
+   * unknown at load, so pass the known root crumb(s) plus a terminal `…`
+   * placeholder; it fills in once the page mounts.
+   */
+  breadcrumbs?: BreadcrumbItem[]
+  /** Table column headers. Omit on bodies that don't render `Resource.Table` (the table editor). */
+  columns?: ResourceColumn[]
+  /** The page's exact header action chips (handlers wired to a no-op). */
+  actions?: ChromeActionSpec[]
+  /** Search placeholder. Omit to hide the search box (matches a page with no search). */
+  searchPlaceholder?: string
+  /** Paint the Sort chip (its menu never opens during the fallback, so the option list is irrelevant). */
+  hasSort?: boolean
+  /** Paint the Filter chip. */
+  hasFilter?: boolean
+}
+
+const noop = () => {}
+
+/**
+ * Route-transition fallback rendered by each resource route's `loading.tsx`. It
+ * paints the REAL resource chrome — the header (icon/title or breadcrumbs + the
+ * page's exact action chips), the options bar (search + the Filter/Sort chips),
+ * and the table's column headers — with an empty body and no-op handlers, so a
+ * navigation never shows a blank frame or a skeleton. Only the breadcrumb leaf
+ * and the row data are unknown at load; everything else matches the loaded page.
+ */
+export function ResourceChromeFallback({
+  icon,
+  title,
+  breadcrumbs,
+  columns,
+  actions,
+  searchPlaceholder,
+  hasSort = false,
+  hasFilter = false,
+}: ResourceChromeFallbackProps) {
+  return (
+    <Resource>
+      <Resource.Header
+        icon={icon}
+        title={title}
+        breadcrumbs={breadcrumbs}
+        actions={actions?.map((action) => ({
+          text: action.text,
+          icon: action.icon,
+          variant: action.variant,
+          active: action.active,
+          onSelect: noop,
+        }))}
+      />
+      <Resource.Options
+        search={
+          searchPlaceholder !== undefined
+            ? { value: '', onChange: noop, placeholder: searchPlaceholder }
+            : undefined
+        }
+        sort={hasSort ? { options: [], active: null, onSort: noop } : undefined}
+        filter={hasFilter ? { content: null } : undefined}
+      />
+      {columns ? <Resource.Table columns={columns} rows={[]} isLoading /> : null}
+    </Resource>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/index.ts b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/index.ts
index 697f8c9aacc..eaa02307577 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/index.ts
@@ -1,8 +1,7 @@
 export type {
   BreadcrumbEditing,
   BreadcrumbItem,
-  CreateAction,
   DropdownOption,
-  HeaderAction,
+  ResourceAction,
 } from './resource-header'
 export { ResourceHeader } from './resource-header'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 5fa3411e222..375e1c1dada 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -1,16 +1,25 @@
-import { Fragment, forwardRef, memo, useEffect, useRef, useState } from 'react'
+import {
+  type ComponentType,
+  Fragment,
+  forwardRef,
+  memo,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { ArrowUpLeft } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
-  Button,
-  ChevronDown,
+  Chip,
+  ChipChevronDown,
+  chipGeometryClass,
   chipVariants,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
   FloatingTooltip,
-  Plus,
   POPOVER_ANIMATION_CLASSES,
   Popover,
   PopoverAnchor,
@@ -24,8 +33,6 @@ import { cn } from '@/lib/core/utils/cn'
 import { InlineRenameInput } from '@/app/workspace/[workspaceId]/components/inline-rename-input'
 import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
 
-const HEADER_PLUS_ICON = <Plus className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
-
 export interface DropdownOption {
   label: string
   icon?: React.ElementType
@@ -39,6 +46,13 @@ export interface BreadcrumbEditing {
   onChange: (value: string) => void
   onSubmit: () => void
   onCancel: () => void
+  /**
+   * Disables the rename field while the save is in flight, mirroring
+   * {@link ResourceCellEditing.disabled} on table cells. Threaded from
+   * `useInlineRename`'s `isSaving`. Optional so existing consumers keep
+   * working unchanged.
+   */
+  disabled?: boolean
 }
 
 export interface BreadcrumbItem {
@@ -54,17 +68,19 @@ export interface BreadcrumbItem {
   terminal?: boolean
 }
 
-export interface HeaderAction {
-  label: string
-  icon?: React.ElementType
-  onClick: () => void
-  disabled?: boolean
+/**
+ * The single, strict contract for a top-right header action. Every action renders
+ * as a {@link Chip} — consumers describe intent through these fields and nothing
+ * else, so the action row looks identical on every page and cannot drift. Omit
+ * `variant` for the default chip; use `primary`/`destructive` for emphasis. Express
+ * a selected/toggle state with `active` (e.g. the Logs/Dashboard view toggle).
+ */
+export interface ResourceAction {
+  icon?: ComponentType<{ className?: string }>
+  text: string
+  variant?: 'primary' | 'destructive'
   active?: boolean
-}
-
-export interface CreateAction {
-  label: string
-  onClick: () => void
+  onSelect: () => void
   disabled?: boolean
 }
 
@@ -72,32 +88,36 @@ interface ResourceHeaderProps {
   icon?: React.ElementType
   title?: string
   breadcrumbs?: BreadcrumbItem[]
-  create?: CreateAction
-  actions?: HeaderAction[]
-  /** Arbitrary content rendered in the right-aligned actions row, before `actions`. */
-  leadingActions?: React.ReactNode
-  /** Arbitrary content rendered in the right-aligned actions row, before the Create button. */
-  trailingActions?: React.ReactNode
+  /** Strict top-right action chips. List pages use ONLY this. */
+  actions?: ResourceAction[]
   /**
-   * Replaces the default Create button entirely — supply your own trigger (for
-   * example a dropdown) when the create action needs richer UI. When provided,
-   * `create` is ignored.
+   * Supplementary right-aligned content rendered before `actions` — custom
+   * widgets that cannot collapse into the strict {@link ResourceAction} chip
+   * contract, e.g. the table editor's run/stop control, an import-progress
+   * menu, or a create dropdown. Anything that fits the chip contract belongs
+   * in `actions`; never stuff primary actions in here.
    */
-  createTrigger?: React.ReactNode
+  aside?: ReactNode
 }
 
 export const ResourceHeader = memo(function ResourceHeader({
   icon: Icon,
   title,
   breadcrumbs,
-  create,
   actions,
-  leadingActions,
-  trailingActions,
-  createTrigger,
+  aside,
 }: ResourceHeaderProps) {
   const headerRef = useRef<HTMLDivElement>(null)
-  const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0
+  /**
+   * Breadcrumb mode is reserved for nested pages (length > 1). A single-crumb
+   * "breadcrumb" is just the current page, so it falls through to the static
+   * title below — keeping the top-left non-interactive and hover-free,
+   * identical to a title-only page (e.g. the Files root matches the Tables root).
+   */
+  const hasBreadcrumbs = breadcrumbs != null && breadcrumbs.length > 1
+  const rootCrumb = breadcrumbs?.length === 1 ? breadcrumbs[0] : undefined
+  const TitleIcon = Icon ?? rootCrumb?.icon
+  const titleLabel = title ?? rootCrumb?.label
   const terminalBreadcrumbIndex =
     hasBreadcrumbs && breadcrumbs[breadcrumbs.length - 1].terminal ? breadcrumbs.length - 1 : -1
   const currentResourceIndex =
@@ -108,13 +128,7 @@ export const ResourceHeader = memo(function ResourceHeader({
         : -1
 
   return (
-    <div
-      ref={headerRef}
-      className={cn(
-        'border-[var(--border)] border-b',
-        hasBreadcrumbs ? 'px-4 py-[8.5px]' : 'px-6 py-2.5'
-      )}
-    >
+    <div ref={headerRef} className='border-[var(--border)] border-b px-4 py-[8.5px]'>
       <div className='flex min-w-0 items-center justify-between gap-3'>
         <div className='flex min-w-0 flex-1 items-center gap-2 overflow-hidden'>
           {hasBreadcrumbs ? (
@@ -126,6 +140,12 @@ export const ResourceHeader = memo(function ResourceHeader({
                 terminalBreadcrumbIndex
               )
               const LocationIcon = i === 0 ? (crumb.icon ?? Icon) : undefined
+              /**
+               * The first crumb on a nested page opens the hover "path" popover
+               * (back-navigation). Single-crumb roots never reach here — they
+               * render as the static title above.
+               */
+              const showLocationPopover = LocationIcon != null
 
               return (
                 <Fragment key={`${crumb.label}-${i}`}>
@@ -134,7 +154,7 @@ export const ResourceHeader = memo(function ResourceHeader({
                       /
                     </span>
                   )}
-                  {LocationIcon ? (
+                  {showLocationPopover ? (
                     <BreadcrumbLocationPopover
                       icon={LocationIcon}
                       breadcrumbs={breadcrumbs}
@@ -143,7 +163,7 @@ export const ResourceHeader = memo(function ResourceHeader({
                     />
                   ) : (
                     <BreadcrumbSegment
-                      icon={crumb.icon}
+                      icon={LocationIcon ?? crumb.icon}
                       label={crumb.label}
                       onClick={crumb.onClick}
                       dropdownItems={crumb.dropdownItems}
@@ -155,57 +175,39 @@ export const ResourceHeader = memo(function ResourceHeader({
               )
             })
           ) : (
-            <>
-              {Icon && <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />}
-              {title && (
-                <h1 className='min-w-0 flex-1 font-medium text-[var(--text-body)] text-sm'>
-                  <FloatingOverflowText label={title} className='block truncate' />
-                </h1>
+            <span
+              className={cn(
+                chipGeometryClass,
+                'inline-flex min-w-0 max-w-full cursor-default justify-start'
               )}
-            </>
+            >
+              {TitleIcon && <TitleIcon className='size-[14px] shrink-0 text-[var(--text-icon)]' />}
+              {titleLabel && (
+                <FloatingOverflowText
+                  label={titleLabel}
+                  className='block min-w-0 truncate text-[var(--text-body)] text-sm'
+                />
+              )}
+            </span>
           )}
         </div>
-        <div className='flex shrink-0 items-center gap-1.5'>
-          {leadingActions}
-          {actions?.map((action) => {
-            const ActionIcon = action.icon
-            return (
-              <Button
-                key={action.label}
-                onClick={action.onClick}
+        {(aside || (actions && actions.length > 0)) && (
+          <div className='flex shrink-0 items-center'>
+            {aside}
+            {actions?.map((action) => (
+              <Chip
+                key={action.text}
+                variant={action.variant}
+                active={action.active}
+                leftIcon={action.icon}
+                onClick={action.onSelect}
                 disabled={action.disabled}
-                variant='subtle'
-                className={cn(
-                  'whitespace-nowrap px-2 py-1 text-caption',
-                  action.active !== undefined && 'rounded-lg',
-                  action.active === true &&
-                    'bg-[var(--surface-active)] hover-hover:bg-[var(--surface-active)]',
-                  action.active === false && 'hover-hover:bg-[var(--surface-hover)]'
-                )}
               >
-                {ActionIcon && (
-                  <ActionIcon
-                    className={cn('size-[14px] text-[var(--text-icon)]', action.label && 'mr-1.5')}
-                  />
-                )}
-                {action.label}
-              </Button>
-            )
-          })}
-          {trailingActions}
-          {createTrigger ??
-            (create && (
-              <Button
-                onClick={create.onClick}
-                disabled={create.disabled}
-                variant='subtle'
-                className='whitespace-nowrap px-2 py-1 text-caption'
-              >
-                {HEADER_PLUS_ICON}
-                {create.label}
-              </Button>
+                {action.text}
+              </Chip>
             ))}
-        </div>
+          </div>
+        )}
       </div>
     </div>
   )
@@ -264,13 +266,14 @@ const BreadcrumbSegment = memo(function BreadcrumbSegment({
 
   if (editing?.isEditing) {
     return (
-      <span className={cn('inline-flex h-[30px] min-w-0 items-center px-2', className)}>
-        {Icon && <Icon className='mr-3 size-[14px] text-[var(--text-icon)]' />}
+      <span className={cn(chipGeometryClass, 'inline-flex min-w-0 justify-start', className)}>
+        {Icon && <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />}
         <InlineRenameInput
           value={editing.value}
           onChange={editing.onChange}
           onSubmit={editing.onSubmit}
           onCancel={editing.onCancel}
+          disabled={editing.disabled}
         />
       </span>
     )
@@ -282,9 +285,15 @@ const BreadcrumbSegment = memo(function BreadcrumbSegment({
       <BreadcrumbLabel ref={labelRef} isOverflowing={isOverflowing} label={label} />
     </>
   )
+  /**
+   * Interactive crumbs use a plain `<button>` with bare-chip geometry — NEVER
+   * the Button component, whose buttonVariants inject font-medium /
+   * rounded-[5px] / justify-center and break chip parity with the static/title
+   * crumbs.
+   */
   const triggerClassName = cn(
-    chipVariants({ variant: 'ghost', flush: true }),
-    'group min-w-0 max-w-full justify-start font-medium transition-colors'
+    chipVariants({ flush: true }),
+    'group min-w-0 max-w-full justify-start'
   )
 
   if (dropdownItems && dropdownItems.length > 0) {
@@ -293,14 +302,10 @@ const BreadcrumbSegment = memo(function BreadcrumbSegment({
         <DropdownMenu>
           <FloatingTooltip label={label} state={tooltipState} />
           <DropdownMenuTrigger asChild>
-            <Button
-              variant='subtle'
-              className={cn(triggerClassName, className, 'border-0')}
-              {...tooltipHandlers}
-            >
+            <button type='button' className={cn(triggerClassName, className)} {...tooltipHandlers}>
               {content}
-              <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
-            </Button>
+              <ChipChevronDown className='ml-auto' />
+            </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align='start'>
             {dropdownItems.map((item) => {
@@ -322,14 +327,14 @@ const BreadcrumbSegment = memo(function BreadcrumbSegment({
     return (
       <>
         <FloatingTooltip label={label} state={tooltipState} />
-        <Button
-          variant='subtle'
-          className={cn(triggerClassName, className, 'border-0')}
+        <button
+          type='button'
+          className={cn(triggerClassName, className)}
           onClick={onClick}
           {...tooltipHandlers}
         >
           {content}
-        </Button>
+        </button>
       </>
     )
   }
@@ -339,8 +344,8 @@ const BreadcrumbSegment = memo(function BreadcrumbSegment({
       <FloatingTooltip label={label} state={tooltipState} />
       <span
         className={cn(
-          chipVariants({ variant: 'ghost', flush: true }),
-          'group min-w-0 max-w-full cursor-default justify-start font-medium',
+          chipGeometryClass,
+          'group inline-flex min-w-0 max-w-full cursor-default justify-start',
           className
         )}
         {...tooltipHandlers}
@@ -410,8 +415,8 @@ function BreadcrumbLocationPopover({
             onPointerLeave={scheduleClose}
             onPointerMove={openPopover}
             className={cn(
-              chipVariants({ variant: 'ghost', flush: true }),
-              'max-w-none gap-1.5 px-2 font-medium transition-colors',
+              chipVariants({ flush: true }),
+              'max-w-none gap-1.5 px-2 transition-colors',
               open && 'relative z-[var(--z-popover)]',
               className
             )}
@@ -576,7 +581,7 @@ const BreadcrumbLabel = memo(
       <span
         ref={ref}
         className={cn(
-          'min-w-0 truncate',
+          'min-w-0 truncate text-[var(--text-body)]',
           isOverflowing &&
             '[mask-image:linear-gradient(to_right,black_calc(100%-18px),transparent)] group-hover:[mask-image:none] group-focus-visible:[mask-image:none]'
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/index.ts b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/index.ts
deleted file mode 100644
index ca526f68108..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type {
-  ColumnOption,
-  FilterTag,
-  SearchConfig,
-  SearchTag,
-  SortConfig,
-} from './resource-options-bar'
-export { ResourceOptionsBar, SortDropdown } from './resource-options-bar'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/index.ts b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/index.ts
new file mode 100644
index 00000000000..bec6a4f96ce
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/index.ts
@@ -0,0 +1,9 @@
+export type {
+  ColumnOption,
+  FilterConfig,
+  FilterTag,
+  SearchConfig,
+  SearchTag,
+  SortConfig,
+} from './resource-options'
+export { ResourceOptions, SortDropdown } from './resource-options'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx
similarity index 67%
rename from apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
rename to apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx
index 86422493975..545f12e6811 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx
@@ -4,7 +4,7 @@ import {
   ArrowDown,
   ArrowUp,
   ArrowUpDown,
-  Button,
+  Chip,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -19,7 +19,7 @@ import { cn } from '@/lib/core/utils/cn'
 import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
 
 const SEARCH_ICON = (
-  <Search className='pointer-events-none size-[14px] shrink-0 text-[var(--text-icon)]' />
+  <Search className='pointer-events-none size-[14px] shrink-0 text-[var(--text-muted)]' />
 )
 
 const RESOURCE_MENU_EDGE_OFFSET = 6
@@ -66,33 +66,39 @@ export interface SearchConfig {
   dropdownRef?: React.RefObject<HTMLDivElement | null>
 }
 
-interface ResourceOptionsBarProps {
+/**
+ * The Filter control has two shapes, picked by `mode`:
+ * - `popover` (default): list pages pass the filter controls as `content`; the
+ *   button opens them in a popover. `active` highlights the button.
+ * - `toggle`: detail views (e.g. the table editor) that render their filter as a
+ *   separate panel toggle the button instead of opening a popover.
+ */
+export type FilterConfig =
+  | { mode?: 'popover'; content: ReactNode; active?: boolean }
+  | { mode: 'toggle'; active: boolean; onToggle: () => void }
+
+interface ResourceOptionsProps {
   search?: SearchConfig
   sort?: SortConfig
-  /** Popover content — renders inside a Popover (used by logs, etc.) */
-  filter?: ReactNode
-  /** When provided, Filter button acts as a toggle instead of opening a Popover */
-  onFilterToggle?: () => void
-  /** Whether the filter is currently active (highlights the toggle button) */
-  filterActive?: boolean
+  filter?: FilterConfig
   filterTags?: FilterTag[]
-  extras?: ReactNode
-  /** Right-aligned slot. Unlike `extras` (which sits with the left controls),
-   *  `trailing` is pushed to the far right via `justify-between` — used for the
-   *  table's run/stop control opposite the left-aligned filter/sort. */
-  trailing?: ReactNode
+  /**
+   * Supplementary right-aligned slot (pushed opposite the left-aligned
+   * filter/sort via `justify-between`) for lightweight status content — e.g.
+   * the knowledge list's connector badges or the table editor's run/stop
+   * control in embedded mode. Keep it to badges/status widgets; primary
+   * actions belong in the header's `actions`, not here.
+   */
+  aside?: ReactNode
 }
 
-export const ResourceOptionsBar = memo(function ResourceOptionsBar({
+export const ResourceOptions = memo(function ResourceOptions({
   search,
   sort,
   filter,
-  onFilterToggle,
-  filterActive,
   filterTags,
-  extras,
-  trailing,
-}: ResourceOptionsBarProps) {
+  aside,
+}: ResourceOptionsProps) {
   /**
    * Coordinates the Filter popover and Sort menu as a single menu bar: clicking
    * one while the other is open switches to it in a single click. Functional
@@ -101,51 +107,27 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
    */
   const [openMenu, setOpenMenu] = useState<'filter' | 'sort' | null>(null)
 
-  const hasContent =
-    search ||
-    sort ||
-    filter ||
-    onFilterToggle ||
-    extras ||
-    trailing ||
-    (filterTags && filterTags.length > 0)
+  const isToggleFilter = filter?.mode === 'toggle'
+  const popoverFilter = filter && filter.mode !== 'toggle' ? filter : null
+
+  const hasContent = search || sort || filter || aside || (filterTags && filterTags.length > 0)
   if (!hasContent) return null
 
   return (
     <div className={cn('border-[var(--border)] border-b py-2.5', search ? 'px-6' : 'px-4')}>
       <div className='flex items-center justify-between'>
         {search && <SearchSection search={search} />}
-        <div className='flex items-center gap-1.5'>
-          {extras}
+        <div className='flex items-center'>
           {filterTags?.map((tag) => (
-            <Button
-              key={tag.label}
-              variant='subtle'
-              className='max-w-[280px] px-2 py-1 text-caption'
-              onClick={tag.onRemove}
-            >
-              <FloatingOverflowText label={tag.label} className='block truncate' />
-              <span className='ml-1 shrink-0 text-[var(--text-icon)] text-micro'>✕</span>
-            </Button>
+            <Chip key={tag.label} rightIcon={X} onClick={tag.onRemove}>
+              {tag.label}
+            </Chip>
           ))}
-          {onFilterToggle ? (
-            <Button
-              variant='subtle'
-              className={cn(
-                'px-2 py-1 text-caption',
-                filterActive && 'bg-[var(--surface-3)] text-[var(--text-primary)]'
-              )}
-              onClick={onFilterToggle}
-            >
-              <ListFilter
-                className={cn(
-                  'mr-1.5 size-[14px]',
-                  filterActive ? 'text-[var(--text-primary)]' : 'text-[var(--text-icon)]'
-                )}
-              />
+          {isToggleFilter && filter.mode === 'toggle' ? (
+            <Chip active={filter.active} leftIcon={ListFilter} onClick={filter.onToggle}>
               Filter
-            </Button>
-          ) : filter ? (
+            </Chip>
+          ) : popoverFilter ? (
             <PopoverPrimitive.Root
               open={openMenu === 'filter'}
               onOpenChange={(open) =>
@@ -153,12 +135,11 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
               }
             >
               <PopoverPrimitive.Anchor asChild>
-                <div className='flex items-center gap-1.5'>
+                <div className='flex items-center'>
                   <PopoverPrimitive.Trigger asChild>
-                    <Button variant='subtle' className='px-2 py-1 text-caption'>
-                      <ListFilter className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
+                    <Chip active={popoverFilter.active} leftIcon={ListFilter}>
                       Filter
-                    </Button>
+                    </Chip>
                   </PopoverPrimitive.Trigger>
                   {sort && (
                     <SortDropdown
@@ -184,14 +165,14 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
                     'z-50 w-fit origin-[--radix-popover-content-transform-origin] rounded-xl border border-[var(--border)] bg-[var(--bg)] shadow-sm'
                   )}
                 >
-                  {filter}
+                  {popoverFilter.content}
                 </PopoverPrimitive.Content>
               </PopoverPrimitive.Portal>
             </PopoverPrimitive.Root>
           ) : null}
-          {sort && (onFilterToggle || !filter) && <SortDropdown config={sort} />}
+          {sort && (isToggleFilter || !popoverFilter) && <SortDropdown config={sort} />}
         </div>
-        {trailing && <div className='flex shrink-0 items-center gap-1.5'>{trailing}</div>}
+        {aside && <div className='flex shrink-0 items-center gap-1.5'>{aside}</div>}
       </div>
     </div>
   )
@@ -199,24 +180,21 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
 
 const SearchSection = memo(function SearchSection({ search }: { search: SearchConfig }) {
   return (
-    <div className='relative flex flex-1 items-center'>
+    <div className='relative flex flex-1 items-center gap-1.5'>
       {SEARCH_ICON}
-      <div className='flex flex-1 items-center gap-1.5 overflow-x-auto pl-2.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
+      <div className='flex flex-1 items-center gap-1.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
         {search.tags?.map((tag, i) => (
-          <Button
+          <Chip
             key={`${tag.label}-${tag.value}`}
-            variant='subtle'
-            className={cn(
-              'max-w-[280px] shrink-0 px-2 py-1 text-caption',
-              search.highlightedTagIndex === i && 'ring-1 ring-[var(--text-subtle)] ring-offset-1'
-            )}
+            rightIcon={X}
             onClick={tag.onRemove}
+            active={search.highlightedTagIndex === i}
+            className='max-w-[280px] shrink-0'
           >
             <FloatingOverflowText label={`${tag.label}: ${tag.value}`} className='block truncate'>
               {tag.label}: {tag.value}
             </FloatingOverflowText>
-            <span className='ml-1 text-[var(--text-icon)] text-micro'>✕</span>
-          </Button>
+          </Chip>
         ))}
         <input
           ref={search.inputRef}
@@ -227,13 +205,13 @@ const SearchSection = memo(function SearchSection({ search }: { search: SearchCo
           onFocus={search.onFocus}
           onBlur={search.onBlur}
           placeholder={search.tags?.length ? '' : (search.placeholder ?? 'Search...')}
-          className='min-w-[80px] flex-1 bg-transparent py-1 text-[var(--text-secondary)] text-caption outline-none placeholder:text-[var(--text-subtle)]'
+          className='min-w-[80px] flex-1 bg-transparent py-1 text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)]'
         />
       </div>
       {search.tags?.length || search.value ? (
         <button
           type='button'
-          className='mr-0.5 flex size-[14px] shrink-0 items-center justify-center text-[var(--text-subtle)] transition-colors hover-hover:text-[var(--text-secondary)]'
+          className='mr-0.5 flex size-[14px] shrink-0 items-center justify-center text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-body)]'
           onClick={search.onClearAll ?? (() => search.onChange(''))}
         >
           <span className='text-caption'>✕</span>
@@ -269,21 +247,9 @@ export const SortDropdown = memo(function SortDropdown({
   return (
     <DropdownMenu modal={false} open={open} onOpenChange={onOpenChange}>
       <DropdownMenuTrigger asChild>
-        <Button
-          variant='subtle'
-          className={cn(
-            'px-2 py-1 text-caption',
-            active && 'bg-[var(--surface-3)] text-[var(--text-primary)]'
-          )}
-        >
-          <ArrowUpDown
-            className={cn(
-              'mr-1.5 size-[14px]',
-              active ? 'text-[var(--text-primary)]' : 'text-[var(--text-icon)]'
-            )}
-          />
+        <Chip active={Boolean(active)} leftIcon={ArrowUpDown}>
           Sort
-        </Button>
+        </Chip>
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align='end'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
index 4f4785e9a11..f6cadd0a3a1 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
@@ -10,15 +10,22 @@ import {
   useState,
 } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { ArrowDown, ArrowUp, Button, Checkbox, Loader, Plus, Skeleton } from '@/components/emcn'
+import {
+  ArrowDown,
+  ArrowUp,
+  Button,
+  Checkbox,
+  cellIconNodeClass,
+  chipContentGap,
+  chipContentLabelClass,
+  Loader,
+} from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
+import { InlineRenameInput } from '@/app/workspace/[workspaceId]/components/inline-rename-input'
 import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
-import type { BreadcrumbItem, CreateAction, HeaderAction } from './components/resource-header'
 import { ResourceHeader } from './components/resource-header'
-import type { FilterTag, SearchConfig, SortConfig } from './components/resource-options-bar'
-import { ResourceOptionsBar } from './components/resource-options-bar'
-
-const CREATE_ROW_PLUS_ICON = <Plus className='size-[14px] text-[var(--text-subtle)]' />
+import type { SortConfig } from './components/resource-options'
+import { ResourceOptions } from './components/resource-options'
 
 export interface ResourceColumn {
   id: string
@@ -26,10 +33,30 @@ export interface ResourceColumn {
   widthMultiplier?: number
 }
 
+export interface ResourceCellEditing {
+  value: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+  onCancel: () => void
+  /**
+   * Disables the rename field while the save is in flight, mirroring the
+   * sidebar's `disabled={isRenaming}`. Threaded from `useInlineRename`'s
+   * `isSaving`. Optional so existing consumers keep working unchanged.
+   */
+  disabled?: boolean
+}
+
 export interface ResourceCell {
   icon?: ReactNode
   label?: string | null
   content?: ReactNode
+  /**
+   * When set, the cell renders an inline rename field inside the canonical cell
+   * chrome (icon + {@link InlineRenameInput}). Consumers pass structured handlers
+   * instead of hand-rolling a `content` node, so every rename cell matches the
+   * resting cell exactly (same gap, weight, icon size).
+   */
+  editing?: ResourceCellEditing
 }
 
 export interface ResourceRow {
@@ -65,110 +92,36 @@ export interface PaginationConfig {
   onPageChange: (page: number) => void
 }
 
+export const EMPTY_CELL_PLACEHOLDER = '—'
+
 interface ResourceProps {
-  icon: React.ElementType
-  title: string
-  breadcrumbs?: BreadcrumbItem[]
-  create?: CreateAction
-  search?: SearchConfig
-  defaultSort?: string
-  sort?: SortConfig
-  headerActions?: HeaderAction[]
-  leadingActions?: ReactNode
-  columns: ResourceColumn[]
-  rows: ResourceRow[]
-  selectedRowId?: string | null
-  selectable?: SelectableConfig
-  rowDragDrop?: RowDragDropConfig
-  onRowClick?: (rowId: string) => void
-  onRowHover?: (rowId: string) => void
-  onRowContextMenu?: (e: React.MouseEvent, rowId: string) => void
-  isLoading?: boolean
+  children: ReactNode
   onContextMenu?: (e: React.MouseEvent) => void
-  filter?: ReactNode
-  filterTags?: FilterTag[]
-  extras?: ReactNode
-  pagination?: PaginationConfig
-  emptyMessage?: string
-  overlay?: ReactNode
 }
 
-export const EMPTY_CELL_PLACEHOLDER = '—'
-const SKELETON_ROW_COUNT = 5
-
 /**
- * Shared page shell for resource list pages (tables, files, knowledge, schedules, logs).
- * Renders the header, toolbar with search, and a data table from column/row definitions.
+ * Compound page shell for resource pages (tables, files, knowledge, schedules,
+ * logs, and the detail editors). Consumers import only `Resource` and fill the
+ * defined slots as children:
+ *
+ * - `Resource.Header` — required, the top bar (title/breadcrumbs + action chips)
+ * - `Resource.Options` — required, the search/filter/sort toolbar
+ * - `Resource.Table` — optional; swap for any custom body (dashboard, grid, …)
+ *
+ * The shell owns the fixed column layout; the children own their own chrome.
  */
-export const Resource = memo(function Resource({
-  icon,
-  title,
-  breadcrumbs,
-  create,
-  search,
-  defaultSort,
-  sort: sortOverride,
-  headerActions,
-  leadingActions,
-  columns,
-  rows,
-  selectedRowId,
-  selectable,
-  rowDragDrop,
-  onRowClick,
-  onRowHover,
-  onRowContextMenu,
-  isLoading,
-  onContextMenu,
-  filter,
-  filterTags,
-  extras,
-  pagination,
-  emptyMessage,
-  overlay,
-}: ResourceProps) {
+function ResourceRoot({ children, onContextMenu }: ResourceProps) {
   return (
     <div
       className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'
       onContextMenu={onContextMenu}
     >
-      <ResourceHeader
-        icon={icon}
-        title={title}
-        breadcrumbs={breadcrumbs}
-        create={create}
-        actions={headerActions}
-        leadingActions={leadingActions}
-      />
-      <ResourceOptionsBar
-        search={search}
-        sort={sortOverride ?? undefined}
-        filter={filter}
-        filterTags={filterTags}
-        extras={extras}
-      />
-      <ResourceTable
-        columns={columns}
-        rows={rows}
-        defaultSort={defaultSort}
-        sort={sortOverride}
-        selectedRowId={selectedRowId}
-        selectable={selectable}
-        rowDragDrop={rowDragDrop}
-        onRowClick={onRowClick}
-        onRowHover={onRowHover}
-        onRowContextMenu={onRowContextMenu}
-        isLoading={isLoading}
-        create={create}
-        pagination={pagination}
-        emptyMessage={emptyMessage}
-        overlay={overlay}
-      />
+      {children}
     </div>
   )
-})
+}
 
-export interface ResourceTableProps {
+interface ResourceTableProps {
   columns: ResourceColumn[]
   rows: ResourceRow[]
   defaultSort?: string
@@ -180,7 +133,6 @@ export interface ResourceTableProps {
   onRowHover?: (rowId: string) => void
   onRowContextMenu?: (e: React.MouseEvent, rowId: string) => void
   isLoading?: boolean
-  create?: CreateAction
   onLoadMore?: () => void
   hasMore?: boolean
   isLoadingMore?: boolean
@@ -190,10 +142,10 @@ export interface ResourceTableProps {
 }
 
 /**
- * Data table body extracted from Resource for independent composition.
- * Use directly when rendering a table without the Resource header/toolbar.
+ * Data table body, module-private and exposed only as `Resource.Table` — the
+ * compound member is the sole way consumers render it.
  */
-export const ResourceTable = memo(function ResourceTable({
+const ResourceTable = memo(function ResourceTable({
   columns,
   rows,
   defaultSort,
@@ -205,7 +157,6 @@ export const ResourceTable = memo(function ResourceTable({
   onRowHover,
   onRowContextMenu,
   isLoading,
-  create,
   onLoadMore,
   hasMore,
   isLoadingMore,
@@ -283,7 +234,6 @@ export const ResourceTable = memo(function ResourceTable({
   }, [onLoadMore, hasMore])
 
   const hasCheckbox = selectable != null
-  const totalColSpan = columns.length + (hasCheckbox ? 1 : 0)
 
   const handleSelectAll = useCallback(
     (checked: boolean | 'indeterminate') => {
@@ -292,17 +242,12 @@ export const ResourceTable = memo(function ResourceTable({
     [selectable]
   )
 
-  if (isLoading) {
-    return (
-      <DataTableSkeleton
-        columns={columns}
-        rowCount={SKELETON_ROW_COUNT}
-        hasCheckbox={hasCheckbox}
-      />
-    )
-  }
-
-  if (rows.length === 0 && emptyMessage) {
+  /**
+   * While loading, the table chrome (column headers) renders with an empty body
+   * and the rows "just load in" — never a skeleton, and never a false
+   * empty-state (the empty message is gated on `!isLoading`).
+   */
+  if (!isLoading && rows.length === 0 && emptyMessage) {
     return (
       <div className='flex min-h-0 flex-1 items-center justify-center'>
         <span className='text-[var(--text-secondary)] text-small'>{emptyMessage}</span>
@@ -333,7 +278,7 @@ export const ResourceTable = memo(function ResourceTable({
                   return (
                     <th
                       key={col.id}
-                      className='h-10 px-6 py-1.5 text-left align-middle font-base text-[var(--text-muted)] text-caption'
+                      className='h-10 px-6 py-1.5 text-left align-middle font-normal text-[var(--text-muted)] text-small'
                     >
                       {col.header}
                     </th>
@@ -343,9 +288,9 @@ export const ResourceTable = memo(function ResourceTable({
                 const SortIcon = internalSort.direction === 'asc' ? ArrowUp : ArrowDown
                 return (
                   <th key={col.id} className='h-10 px-4 py-1.5 text-left align-middle'>
-                    <Button
-                      variant='subtle'
-                      className='px-2 py-1 text-[var(--text-muted)] hover-hover:text-[var(--text-muted)]'
+                    <button
+                      type='button'
+                      className='inline-flex items-center gap-1 rounded-lg px-2 py-1 font-normal text-[var(--text-muted)] text-small transition-colors hover-hover:bg-[var(--surface-active)]'
                       onClick={() =>
                         handleSort(
                           col.id,
@@ -354,10 +299,8 @@ export const ResourceTable = memo(function ResourceTable({
                       }
                     >
                       {col.header}
-                      {isActive && (
-                        <SortIcon className='ml-1 size-[12px] text-[var(--text-icon)]' />
-                      )}
-                    </Button>
+                      {isActive && <SortIcon className='size-[12px] text-[var(--text-icon)]' />}
+                    </button>
                   </th>
                 )
               })}
@@ -379,7 +322,6 @@ export const ResourceTable = memo(function ResourceTable({
                 hasCheckbox={hasCheckbox}
               />
             ))}
-            {create && <CreateRow create={create} totalColSpan={totalColSpan} />}
           </tbody>
         </table>
         {hasMore && (
@@ -463,23 +405,33 @@ const Pagination = memo(function Pagination({
 })
 
 interface CellContentProps {
+  /** Pre-rendered icon node (svg/img/span avatar); auto-sized to the chip icon size. */
   icon?: ReactNode
   label: string
   content?: ReactNode
-  primary?: boolean
+  editing?: ResourceCellEditing
 }
 
-const CellContent = memo(function CellContent({ icon, label, content, primary }: CellContentProps) {
+const CellContent = memo(function CellContent({ icon, label, content, editing }: CellContentProps) {
+  if (editing) {
+    return (
+      <span className={cn('flex min-w-0 items-center', chipContentGap)}>
+        {icon && <span className={cellIconNodeClass}>{icon}</span>}
+        <InlineRenameInput
+          value={editing.value}
+          onChange={editing.onChange}
+          onSubmit={editing.onSubmit}
+          onCancel={editing.onCancel}
+          disabled={editing.disabled}
+        />
+      </span>
+    )
+  }
   if (content) return <>{content}</>
   return (
-    <span
-      className={cn(
-        'flex min-w-0 items-center gap-3 font-medium text-sm',
-        primary ? 'text-[var(--text-body)]' : 'text-[var(--text-secondary)]'
-      )}
-    >
-      {icon && <span className='flex-shrink-0 text-[var(--text-icon)]'>{icon}</span>}
-      <FloatingOverflowText label={label} className='block truncate' />
+    <span className={cn('flex min-w-0 items-center', chipContentGap)}>
+      {icon && <span className={cellIconNodeClass}>{icon}</span>}
+      <FloatingOverflowText label={label} className={cn('block', chipContentLabelClass)} />
     </span>
   )
 })
@@ -616,7 +568,7 @@ const DataRow = memo(function DataRow({
           />
         </td>
       )}
-      {columns.map((col, colIdx) => {
+      {columns.map((col) => {
         const cell = row.cells[col.id]
         return (
           <td key={col.id} className='px-6 py-2.5 align-middle'>
@@ -624,7 +576,7 @@ const DataRow = memo(function DataRow({
               icon={cell?.icon}
               label={cell?.label || EMPTY_CELL_PLACEHOLDER}
               content={cell?.content}
-              primary={colIdx === 0}
+              editing={cell?.editing}
             />
           </td>
         )
@@ -633,30 +585,6 @@ const DataRow = memo(function DataRow({
   )
 })
 
-interface CreateRowProps {
-  create: CreateAction
-  totalColSpan: number
-}
-
-const CreateRow = memo(function CreateRow({ create, totalColSpan }: CreateRowProps) {
-  return (
-    <tr
-      className={cn(
-        'transition-colors',
-        create.disabled ? 'cursor-not-allowed' : 'cursor-pointer hover-hover:bg-[var(--surface-3)]'
-      )}
-      onClick={create.disabled ? undefined : create.onClick}
-    >
-      <td colSpan={totalColSpan} className='px-6 py-2.5 align-middle'>
-        <span className='flex items-center gap-3 font-medium text-[var(--text-secondary)] text-sm'>
-          {CREATE_ROW_PLUS_ICON}
-          {create.label}
-        </span>
-      </td>
-    </tr>
-  )
-})
-
 interface ResourceColGroupProps {
   columns: ResourceColumn[]
   hasCheckbox?: boolean
@@ -682,60 +610,13 @@ const ResourceColGroup = memo(function ResourceColGroup({
   )
 })
 
-interface DataTableSkeletonProps {
-  columns: ResourceColumn[]
-  rowCount: number
-  hasCheckbox?: boolean
-}
-
-const DataTableSkeleton = memo(function DataTableSkeleton({
-  columns,
-  rowCount,
-  hasCheckbox,
-}: DataTableSkeletonProps) {
-  return (
-    <div className='min-h-0 flex-1 overflow-auto'>
-      <table className='w-full table-fixed text-small'>
-        <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
-        <thead className='sticky top-0 z-10 bg-[var(--bg)] shadow-[inset_0_-1px_0_var(--border)]'>
-          <tr>
-            {hasCheckbox && (
-              <th className='h-10 w-[52px] py-2.5 pr-0 pl-5 text-left align-middle'>
-                <Skeleton className='size-[14px] rounded-xs' />
-              </th>
-            )}
-            {columns.map((col) => (
-              <th
-                key={col.id}
-                className='h-10 px-6 py-2.5 text-left align-middle text-[var(--text-muted)]'
-              >
-                <div className='flex min-h-[20px] items-center'>
-                  <Skeleton className='h-[12px] w-[56px]' />
-                </div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {Array.from({ length: rowCount }, (_, i) => (
-            <tr key={i}>
-              {hasCheckbox && (
-                <td className='w-[52px] py-2.5 pr-0 pl-5 align-middle'>
-                  <Skeleton className='size-[14px] rounded-xs' />
-                </td>
-              )}
-              {columns.map((col, colIdx) => (
-                <td key={col.id} className='px-6 py-2.5 align-middle'>
-                  <span className='flex min-h-[21px] items-center gap-3'>
-                    {colIdx === 0 && <Skeleton className='size-[14px] rounded-xs' />}
-                    <Skeleton className='h-[14px] w-[128px]' />
-                  </span>
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
+/**
+ * The single public entry point. `Resource` is the layout shell; its compound
+ * members are the only building blocks consumers compose. Import `Resource` and
+ * nothing else from this module.
+ */
+export const Resource = Object.assign(ResourceRoot, {
+  Header: ResourceHeader,
+  Options: ResourceOptions,
+  Table: ResourceTable,
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/docx-preview.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/docx-preview.tsx
index 84281727c6d..ce52af4fbf4 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/docx-preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/docx-preview.tsx
@@ -5,7 +5,7 @@ import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { cn } from '@/lib/core/utils/cn'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
-import { PDF_PAGE_SKELETON, PreviewError, resolvePreviewError } from './preview-shared'
+import { PREVIEW_LOADING_OVERLAY, PreviewError, resolvePreviewError } from './preview-shared'
 import { PreviewToolbar } from './preview-toolbar'
 import { bindPreviewWheelZoom } from './preview-wheel-zoom'
 import { useDocPreviewBinary } from './use-doc-preview-binary'
@@ -219,7 +219,7 @@ export const DocxPreview = memo(function DocxPreview({
   const error = resolvePreviewError(preview.error, renderError)
   if (error) return <PreviewError label='document' error={error} />
 
-  const showSkeleton = !hasRenderedPreview && (!fileData || rendering)
+  const showLoadingFrame = !hasRenderedPreview && (!fileData || rendering)
 
   const scrollToPage = (page: number) => {
     const scrollContainer = scrollContainerRef.current
@@ -288,10 +288,11 @@ export const DocxPreview = memo(function DocxPreview({
         ref={scrollContainerRef}
         className='relative min-h-0 flex-1 overflow-auto bg-[var(--surface-1)]'
       >
-        {showSkeleton && (
-          <div className='absolute inset-0 z-10 bg-[var(--surface-1)]'>{PDF_PAGE_SKELETON}</div>
-        )}
-        <div ref={containerRef} className={cn('min-h-full w-full', showSkeleton && 'opacity-0')} />
+        {showLoadingFrame && PREVIEW_LOADING_OVERLAY}
+        <div
+          ref={containerRef}
+          className={cn('min-h-full w-full', showLoadingFrame && 'opacity-0')}
+        />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
index e8e77532305..fa770dada17 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
@@ -3,7 +3,6 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import dynamic from 'next/dynamic'
-import { Skeleton } from '@/components/emcn'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
 import { useWorkspaceFileBinary } from '@/hooks/queries/workspace-files'
@@ -18,7 +17,12 @@ import { ImagePreview } from './image-preview'
 import type { PdfDocumentSource } from './pdf-viewer'
 import { PptxPreview } from './pptx-preview'
 import { resolvePreviewType } from './preview-panel'
-import { PDF_PAGE_SKELETON, PreviewError, resolvePreviewError } from './preview-shared'
+import {
+  PREVIEW_LOADING_OVERLAY,
+  PreviewError,
+  PreviewLoadingFrame,
+  resolvePreviewError,
+} from './preview-shared'
 import { TextEditor } from './text-editor'
 import { XlsxPreview } from './xlsx-preview'
 
@@ -137,7 +141,7 @@ const IframePreview = memo(function IframePreview({
   if (error) return <PreviewError label='PDF' error={error} />
 
   if (!bufferSource) {
-    return <div className='relative flex flex-1 overflow-hidden'>{PDF_PAGE_SKELETON}</div>
+    return <div className='relative flex flex-1 overflow-hidden'>{PREVIEW_LOADING_OVERLAY}</div>
   }
 
   return (
@@ -197,13 +201,7 @@ const AudioPreview = memo(function AudioPreview({
   if (error) return <PreviewError label='audio' error={error} />
 
   if (isLoading && !blobUrl) {
-    return (
-      <div className='flex h-full flex-col items-center justify-center gap-4 bg-[var(--surface-1)] p-8'>
-        <Skeleton className='size-[40px] rounded-full' />
-        <Skeleton className='h-[14px] w-[160px]' />
-        <Skeleton className='h-[40px] w-full max-w-[480px] rounded-lg' />
-      </div>
-    )
+    return <PreviewLoadingFrame className='h-full' tone='surface' />
   }
 
   return (
@@ -244,11 +242,7 @@ const VideoPreview = memo(function VideoPreview({
   if (error) return <PreviewError label='video' error={error} />
 
   if (isLoading && !blobUrl) {
-    return (
-      <div className='flex h-full items-center justify-center bg-[var(--surface-1)] p-8'>
-        <Skeleton className='w-full max-w-[720px]' style={{ aspectRatio: '16 / 9' }} />
-      </div>
-    )
+    return <PreviewLoadingFrame className='h-full' tone='surface' />
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
index 53de47f1057..f45f19fafb5 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
@@ -4,7 +4,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { pdfjs, Document as ReactPdfDocument, Page as ReactPdfPage } from 'react-pdf'
 import 'react-pdf/dist/Page/TextLayer.css'
-import { Skeleton } from '@/components/emcn'
+import { PREVIEW_LOADING_OVERLAY } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared'
 import { PreviewToolbar } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar'
 import { bindPreviewWheelZoom } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom'
 
@@ -31,28 +31,6 @@ interface PdfViewerCoreProps {
   filename: string
 }
 
-const PDF_SKELETON = (
-  <div className='absolute inset-0 flex flex-col items-center gap-4 overflow-y-auto bg-[var(--surface-1)] p-6'>
-    {[0, 1].map((i) => (
-      <div
-        key={i}
-        className='w-full max-w-[640px] shrink-0 rounded-md bg-[var(--surface-2)] p-8 shadow-medium'
-        style={{ aspectRatio: '1 / 1.414' }}
-      >
-        <div className='flex flex-col gap-3'>
-          <Skeleton className='h-[14px] w-[60%]' />
-          <Skeleton className='h-[14px] w-[80%]' />
-          <Skeleton className='h-[14px] w-[55%]' />
-          <Skeleton className='mt-2 h-[14px] w-[75%]' />
-          <Skeleton className='h-[14px] w-[65%]' />
-          <Skeleton className='h-[14px] w-[85%]' />
-          <Skeleton className='h-[14px] w-[50%]' />
-        </div>
-      </div>
-    ))}
-  </div>
-)
-
 function PdfError({ error }: { error: string }) {
   return (
     <div className='flex flex-1 flex-col items-center justify-center gap-[8px]'>
@@ -216,7 +194,7 @@ export const PdfViewerCore = memo(function PdfViewerCore({ source, filename }: P
         ref={containerRef}
         className='relative flex flex-1 items-start overflow-auto bg-[var(--surface-1)]'
       >
-        {!isDocumentReady && PDF_SKELETON}
+        {!isDocumentReady && PREVIEW_LOADING_OVERLAY}
         <ReactPdfDocument
           file={file}
           onLoadSuccess={({ numPages }) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pptx-preview.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pptx-preview.tsx
index ae539a66101..51702331a5f 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pptx-preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pptx-preview.tsx
@@ -2,41 +2,18 @@
 
 import { memo, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Skeleton } from '@/components/emcn'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { PptxSandboxHost } from '@/app/workspace/[workspaceId]/files/components/file-viewer/pptx-sandbox-host'
 import {
+  PREVIEW_LOADING_OVERLAY,
   PreviewError,
+  PreviewLoadingFrame,
   resolvePreviewError,
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared'
 import { useDocPreviewBinary } from '@/app/workspace/[workspaceId]/files/components/file-viewer/use-doc-preview-binary'
 
 const logger = createLogger('PptxPreview')
 
-const PPTX_SLIDE_SKELETON = (
-  <div className='flex flex-1 flex-col items-center gap-4 overflow-y-auto bg-[var(--surface-1)] p-6'>
-    {[0, 1].map((i) => (
-      <div
-        key={i}
-        className='w-full max-w-[720px] shrink-0 rounded-md bg-[var(--surface-2)] p-8 shadow-medium'
-        style={{ aspectRatio: '16 / 9' }}
-      >
-        <div className='flex h-full flex-col justify-between'>
-          <div className='flex flex-col gap-3'>
-            <Skeleton className='h-[18px] w-[50%]' />
-            <Skeleton className='h-[14px] w-[70%]' />
-            <Skeleton className='h-[14px] w-[60%]' />
-          </div>
-          <div className='flex flex-col gap-2'>
-            <Skeleton className='h-[14px] w-[80%]' />
-            <Skeleton className='h-[14px] w-[65%]' />
-          </div>
-        </div>
-      </div>
-    ))}
-  </div>
-)
-
 function pptxCacheKey(fileId: string, dataUpdatedAt: number, byteLength: number): string {
   return `${fileId}:${dataUpdatedAt}:${byteLength}`
 }
@@ -78,7 +55,7 @@ export const PptxPreview = memo(function PptxPreview({
   if (error) return <PreviewError label='presentation' error={error} />
 
   if (!fileData) {
-    return PPTX_SLIDE_SKELETON
+    return <PreviewLoadingFrame className='h-full flex-1' tone='surface' />
   }
 
   return (
@@ -90,7 +67,7 @@ export const PptxPreview = memo(function PptxPreview({
         onRenderComplete={handleRenderComplete}
         onRenderError={handleRenderError}
       />
-      {!hasRendered && <div className='absolute inset-0'>{PPTX_SLIDE_SKELETON}</div>}
+      {!hasRendered && PREVIEW_LOADING_OVERLAY}
     </div>
   )
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
index cecaa5f1c81..23ee5f6b010 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
@@ -21,7 +21,7 @@ import { Streamdown } from 'streamdown'
 import 'streamdown/styles.css'
 import { toError } from '@sim/utils/errors'
 import { generateShortId } from '@sim/utils/id'
-import { Checkbox, highlight, languages, Skeleton } from '@/components/emcn'
+import { Checkbox, highlight, languages } from '@/components/emcn'
 import '@/components/emcn/components/code/code.css'
 import 'prismjs/components/prism-bash'
 import 'prismjs/components/prism-css'
@@ -37,6 +37,7 @@ import { getFileExtension } from '@/lib/uploads/utils/file-utils'
 import { useScrollAnchor } from '@/hooks/use-scroll-anchor'
 import { useSmoothText } from '@/hooks/use-smooth-text'
 import { DataTable } from './data-table'
+import { PreviewLoadingFrame } from './preview-shared'
 import { ZoomablePreview } from './zoomable-preview'
 
 interface HastNode {
@@ -328,19 +329,15 @@ function MermaidSourcePreview({
   )
 }
 
-function MermaidCodeBlockSkeleton() {
+function MermaidCodeBlockFallback() {
   return (
     <div className='my-4 overflow-hidden rounded-lg border border-[var(--border)]'>
       <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-3)] px-3 py-1.5'>
         <span className='text-[11px] text-[var(--text-tertiary)]'>mermaid</span>
         <span className='text-[11px] text-[var(--text-muted)]'>Rendering…</span>
       </div>
-      <div className='code-editor-theme bg-[var(--surface-5)]'>
-        <div className='space-y-2 p-4'>
-          <div className='h-3 w-5/6 animate-pulse rounded bg-[var(--surface-2)]' />
-          <div className='h-3 w-2/3 animate-pulse rounded bg-[var(--surface-2)]' />
-          <div className='h-3 w-3/4 animate-pulse rounded bg-[var(--surface-2)]' />
-        </div>
+      <div className='code-editor-theme min-h-[96px] bg-[var(--surface-5)]'>
+        <div className='p-4' />
       </div>
     </div>
   )
@@ -469,13 +466,9 @@ const MermaidDiagram = memo(function MermaidDiagram({
 
   if (!trimmedDefinition || !svg || renderedDefinition !== trimmedDefinition) {
     if (zoomable) {
-      return (
-        <div className='h-full p-6'>
-          <Skeleton className='h-full w-full rounded-lg' />
-        </div>
-      )
+      return <PreviewLoadingFrame className='h-full' />
     }
-    return <MermaidCodeBlockSkeleton />
+    return <MermaidCodeBlockFallback />
   }
   return null
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx
index 1c2281ebe62..c04898fe39c 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Skeleton } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
 
 export function PreviewError({ label, error }: { label: string; error: string }) {
   return (
@@ -28,24 +28,31 @@ export function resolvePreviewError(
   return renderError
 }
 
-export const PDF_PAGE_SKELETON = (
-  <div className='absolute inset-0 flex flex-col items-center gap-4 overflow-y-auto bg-[var(--surface-1)] p-6'>
-    {[0, 1].map((i) => (
-      <div
-        key={i}
-        className='w-full max-w-[640px] shrink-0 rounded-md bg-[var(--surface-2)] p-8 shadow-medium'
-        style={{ aspectRatio: '1 / 1.414' }}
-      >
-        <div className='flex flex-col gap-3'>
-          <Skeleton className='h-[14px] w-[60%]' />
-          <Skeleton className='h-[14px] w-[80%]' />
-          <Skeleton className='h-[14px] w-[55%]' />
-          <Skeleton className='mt-2 h-[14px] w-[75%]' />
-          <Skeleton className='h-[14px] w-[65%]' />
-          <Skeleton className='h-[14px] w-[85%]' />
-          <Skeleton className='h-[14px] w-[50%]' />
-        </div>
-      </div>
-    ))}
-  </div>
+/**
+ * Canonical blank loading overlay for previews that render into a
+ * `--surface-1` canvas. Absolutely covers the canvas (with `z-10` so it
+ * paints above in-flow render targets) until the preview is ready.
+ */
+export const PREVIEW_LOADING_OVERLAY = (
+  <div className='absolute inset-0 z-10 bg-[var(--surface-1)]' />
 )
+
+interface PreviewLoadingFrameProps {
+  /** Layout/sizing-only classes for the in-flow frame (e.g. `h-full`, `flex-1`). */
+  className?: string
+  /** Background token matching the loaded sibling's canvas. Defaults to `--bg`. */
+  tone?: 'bg' | 'surface'
+}
+
+/**
+ * Canonical in-flow blank loading frame shown while a preview is fetching or
+ * rendering. The `tone` must match the background of the loaded state it is
+ * standing in for, so mount completion does not flash a different token.
+ */
+export function PreviewLoadingFrame({ className, tone = 'bg' }: PreviewLoadingFrameProps) {
+  return (
+    <div
+      className={cn(tone === 'surface' ? 'bg-[var(--surface-1)]' : 'bg-[var(--bg)]', className)}
+    />
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx
index 7e5ab98ab0f..8cdb1cce6f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx
@@ -4,7 +4,6 @@ import { memo, useCallback, useEffect, useReducer, useRef, useState } from 'reac
 import type { OnMount } from '@monaco-editor/react'
 import type { editor as MonacoEditorTypes } from 'monaco-editor'
 import dynamic from 'next/dynamic'
-import { Skeleton } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
@@ -16,6 +15,7 @@ import { useAutosave } from '@/hooks/use-autosave'
 import { EditorContextMenu } from './editor-context-menu'
 import type { PreviewMode } from './file-viewer'
 import { PreviewPanel, resolvePreviewType } from './preview-panel'
+import { PreviewLoadingFrame } from './preview-shared'
 import {
   INITIAL_TEXT_EDITOR_CONTENT_STATE,
   type StreamingMode,
@@ -373,20 +373,6 @@ function toggleMarkdownCheckbox(markdown: string, targetIndex: number, checked:
   })
 }
 
-const DOCUMENT_SKELETON = (
-  <div className='flex flex-1 flex-col gap-[6px] p-[24px]'>
-    <Skeleton className='h-[14px] w-[45%]' />
-    <Skeleton className='h-[14px] w-[70%]' />
-    <Skeleton className='h-[14px] w-[55%]' />
-    <Skeleton className='mt-2 h-[14px] w-[80%]' />
-    <Skeleton className='h-[14px] w-[60%]' />
-    <Skeleton className='h-[14px] w-[75%]' />
-    <Skeleton className='h-[14px] w-[50%]' />
-    <Skeleton className='mt-2 h-[14px] w-[65%]' />
-    <Skeleton className='h-[14px] w-[40%]' />
-  </div>
-)
-
 interface TextEditorProps {
   file: WorkspaceFileRecord
   workspaceId: string
@@ -672,7 +658,7 @@ export const TextEditor = memo(function TextEditor({
   const showPreviewPane = effectiveMode !== 'editor'
 
   if (streamingContent === undefined) {
-    if (isLoading) return DOCUMENT_SKELETON
+    if (isLoading) return <PreviewLoadingFrame className='flex flex-1 flex-col' />
 
     if (error && !isInitialized) {
       return (
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/xlsx-preview.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/xlsx-preview.tsx
index c2faa5da541..acc20afbc9c 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/xlsx-preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/xlsx-preview.tsx
@@ -4,11 +4,11 @@ import { memo, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import type { WorkBook } from 'xlsx'
-import { Button, Skeleton } from '@/components/emcn'
+import { Button } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { DataTable } from './data-table'
-import { PreviewError, resolvePreviewError } from './preview-shared'
+import { PreviewError, PreviewLoadingFrame, resolvePreviewError } from './preview-shared'
 import { useDocPreviewBinary } from './use-doc-preview-binary'
 
 const logger = createLogger('XlsxPreview')
@@ -22,31 +22,6 @@ interface XlsxSheet {
   truncated: boolean
 }
 
-const XLSX_SKELETON = (
-  <div className='flex flex-1 flex-col overflow-hidden'>
-    <div className='flex shrink-0 items-center gap-2 border-[var(--border)] border-b bg-[var(--surface-1)] px-3 py-2'>
-      <Skeleton className='h-[22px] w-[60px] rounded' />
-      <Skeleton className='h-[22px] w-[48px] rounded' />
-    </div>
-    <div className='flex-1 overflow-auto p-6'>
-      <div className='overflow-hidden rounded-md border border-[var(--border)]'>
-        <div className='flex gap-4 bg-[var(--surface-2)] px-3 py-2'>
-          {[1, 1, 1, 1].map((_, i) => (
-            <Skeleton key={i} className='h-[12px] flex-1' />
-          ))}
-        </div>
-        {[...Array(7)].map((_, i) => (
-          <div key={i} className='flex gap-4 border-[var(--border)] border-t px-3 py-2'>
-            {[1, 1, 1, 1].map((_, j) => (
-              <Skeleton key={j} className='h-[12px] flex-1' />
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  </div>
-)
-
 export const XlsxPreview = memo(function XlsxPreview({
   file,
   workspaceId,
@@ -134,7 +109,9 @@ export const XlsxPreview = memo(function XlsxPreview({
 
   const error = resolvePreviewError(preview.error, renderError)
   if (error) return <PreviewError label='spreadsheet' error={error} />
-  if (!fileData || currentSheet === null) return XLSX_SKELETON
+  if (!fileData || currentSheet === null) {
+    return <PreviewLoadingFrame className='flex flex-1 flex-col overflow-hidden' />
+  }
 
   return (
     <div className='flex flex-1 flex-col overflow-hidden'>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
index 7f025310208..2358d61182f 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
@@ -17,6 +17,7 @@ import {
   FolderPlus,
   Loader,
   Pencil,
+  Plus,
   Trash,
   toast,
   Upload,
@@ -45,7 +46,7 @@ import {
 import type {
   BreadcrumbItem,
   FilterTag,
-  HeaderAction,
+  ResourceAction,
   ResourceColumn,
   ResourceRow,
   RowDragDropConfig,
@@ -54,10 +55,8 @@ import type {
 } from '@/app/workspace/[workspaceId]/components'
 import {
   EMPTY_CELL_PLACEHOLDER,
-  InlineRenameInput,
   ownerCell,
   Resource,
-  ResourceHeader,
   timeCell,
 } from '@/app/workspace/[workspaceId]/components'
 import { FilesActionBar } from '@/app/workspace/[workspaceId]/files/components/action-bar'
@@ -275,23 +274,19 @@ export function Files() {
     onSave: (rowId, name) => {
       const parsed = parseRowId(rowId)
       if (parsed.kind === 'folder') {
-        updateFolder.mutate({ workspaceId, folderId: parsed.id, updates: { name } })
-        return
+        return updateFolder.mutateAsync({ workspaceId, folderId: parsed.id, updates: { name } })
       }
-      renameFile.mutate({ workspaceId, fileId: parsed.id, name })
+      return renameFile.mutateAsync({ workspaceId, fileId: parsed.id, name })
     },
   })
 
   const headerRename = useInlineRename({
-    onSave: (fileId, name) => {
-      renameFile.mutate({ workspaceId, fileId, name })
-    },
+    onSave: (fileId, name) => renameFile.mutateAsync({ workspaceId, fileId, name }),
   })
 
   const breadcrumbRename = useInlineRename({
-    onSave: (folderId, name) => {
-      updateFolder.mutate({ workspaceId, folderId, updates: { name } })
-    },
+    onSave: (folderId, name) =>
+      updateFolder.mutateAsync({ workspaceId, folderId, updates: { name } }),
   })
 
   const selectedFile = useMemo(
@@ -491,33 +486,24 @@ export function Files() {
     if (!listRename.editingId) return baseRows
     return baseRows.map((row) => {
       if (row.id !== listRename.editingId) return row
-      const parsed = parseRowId(row.id)
-      const file = parsed.kind === 'file' ? filteredFiles.find((f) => f.id === parsed.id) : null
-      const Icon = file ? getDocumentIcon(file.type || '', file.name) : Folder
       return {
         ...row,
         cells: {
           ...row.cells,
           name: {
             ...row.cells.name,
-            content: (
-              <span className='flex min-w-0 items-center gap-3 font-medium text-[var(--text-body)] text-sm'>
-                <span className='flex-shrink-0 text-[var(--text-icon)]'>
-                  <Icon className='size-[14px]' />
-                </span>
-                <InlineRenameInput
-                  value={listRename.editValue}
-                  onChange={listRename.setEditValue}
-                  onSubmit={listRename.submitRename}
-                  onCancel={listRename.cancelRename}
-                />
-              </span>
-            ),
+            editing: {
+              value: listRename.editValue,
+              onChange: listRename.setEditValue,
+              onSubmit: listRename.submitRename,
+              onCancel: listRename.cancelRename,
+              disabled: listRename.isSaving,
+            },
           },
         },
       }
     })
-  }, [baseRows, listRename.editingId, listRename.editValue, filteredFiles])
+  }, [baseRows, listRename.editingId, listRename.editValue, listRename.isSaving])
 
   const visibleRowIds = useMemo(() => rows.map((row) => row.id), [rows])
 
@@ -1412,7 +1398,7 @@ export function Files() {
     setPreviewMode((prev) => (prev === 'preview' ? 'editor' : 'preview'))
   }, [])
 
-  const fileActions = useMemo<HeaderAction[]>(() => {
+  const fileActions = useMemo<ResourceAction[]>(() => {
     if (!selectedFile) return []
     const canEditText = isTextEditable(selectedFile)
     const canPreview = isPreviewable(selectedFile)
@@ -1436,8 +1422,8 @@ export function Files() {
       ...(canEditText
         ? [
             {
-              label: saveLabel,
-              onClick: handleSave,
+              text: saveLabel,
+              onSelect: handleSave,
               disabled:
                 (!isDirty && saveStatus === 'idle') ||
                 saveStatus === 'saving' ||
@@ -1448,31 +1434,31 @@ export function Files() {
       ...(hasSplitView
         ? [
             {
-              label: nextModeLabel,
+              text: nextModeLabel,
               icon: nextModeIcon,
-              onClick: handleCyclePreviewMode,
+              onSelect: handleCyclePreviewMode,
             },
           ]
         : canPreview
           ? [
               {
-                label: previewMode === 'preview' ? 'Edit' : 'Preview',
+                text: previewMode === 'preview' ? 'Edit' : 'Preview',
                 icon: previewMode === 'preview' ? Pencil : Eye,
-                onClick: handleTogglePreview,
+                onSelect: handleTogglePreview,
               },
             ]
           : []),
       {
-        label: 'Download',
+        text: 'Download',
         icon: Download,
-        onClick: handleDownloadSelected,
+        onSelect: handleDownloadSelected,
       },
       ...(canEdit
         ? [
             {
-              label: 'Delete',
+              text: 'Delete',
               icon: Trash,
-              onClick: handleDeleteSelected,
+              onSelect: handleDeleteSelected,
             },
           ]
         : []),
@@ -1525,12 +1511,6 @@ export function Files() {
     placeholder: 'Search files...',
   }
 
-  const createConfig = {
-    label: 'New file',
-    onClick: handleCreateFile,
-    disabled: uploading || creatingFile || !canEdit,
-  }
-
   const uploadButtonLabel =
     uploading && uploadProgress.total > 0
       ? uploadProgress.currentPercent > 0 && uploadProgress.currentPercent < 100
@@ -1540,22 +1520,38 @@ export function Files() {
         ? 'Uploading...'
         : 'Upload'
 
-  const headerActionsConfig = useMemo(
+  const headerActionsConfig = useMemo<ResourceAction[]>(
     () => [
       {
-        label: uploadButtonLabel,
+        text: uploadButtonLabel,
         icon: Upload,
-        onClick: handleUploadClick,
+        onSelect: handleUploadClick,
         disabled: uploading || !canEdit,
       },
       {
-        label: 'New folder',
+        text: 'New folder',
         icon: FolderPlus,
-        onClick: handleCreateFolder,
+        onSelect: handleCreateFolder,
         disabled: createFolder.isPending || !canEdit,
       },
+      {
+        text: 'New file',
+        icon: Plus,
+        onSelect: handleCreateFile,
+        disabled: uploading || creatingFile || !canEdit,
+        variant: 'primary',
+      },
     ],
-    [uploadButtonLabel, handleUploadClick, handleCreateFolder, createFolder.isPending, canEdit]
+    [
+      uploadButtonLabel,
+      handleUploadClick,
+      handleCreateFolder,
+      handleCreateFile,
+      createFolder.isPending,
+      canEdit,
+      uploading,
+      creatingFile,
+    ]
   )
 
   const handleNavigateToFiles = useCallback(() => {
@@ -1840,7 +1836,7 @@ export function Files() {
   if (fileIdFromRoute && !selectedFile && isLoading) {
     return (
       <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-        <ResourceHeader icon={FilesIcon} breadcrumbs={loadingBreadcrumbs} />
+        <Resource.Header icon={FilesIcon} breadcrumbs={loadingBreadcrumbs} />
         <div className='flex flex-1 items-center justify-center bg-[var(--surface-1)]'>
           <Loader className='size-[20px] text-[var(--text-secondary)]' animate />
         </div>
@@ -1852,7 +1848,7 @@ export function Files() {
     return (
       <>
         <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-          <ResourceHeader
+          <Resource.Header
             icon={FilesIcon}
             breadcrumbs={fileDetailBreadcrumbs}
             actions={fileActions}
@@ -1901,51 +1897,56 @@ export function Files() {
       onDragOver={canEdit ? handleDragOver : undefined}
       onDrop={canEdit ? handleDrop : undefined}
     >
-      <Resource
-        icon={FilesIcon}
-        title='Files'
-        breadcrumbs={listBreadcrumbs}
-        create={createConfig}
-        search={searchConfig}
-        sort={sortConfig}
-        filter={filterContent}
-        filterTags={filterTags}
-        headerActions={headerActionsConfig}
-        columns={COLUMNS}
-        rows={rows}
-        selectable={selectableConfig}
-        rowDragDrop={rowDragDropConfig}
-        onRowClick={handleRowClick}
-        onRowContextMenu={handleRowContextMenu}
-        isLoading={isLoading || foldersLoading}
-        onContextMenu={handleContentContextMenu}
-        emptyMessage={emptyMessage}
-        overlay={
-          <>
-            <FilesActionBar
-              selectedCount={selectedRowIds.size}
-              onDownload={handleBulkDownload}
-              onMove={canEdit ? handleContextMenuMove : undefined}
-              moveOptions={canEdit ? contextMenuMoveOptions : undefined}
-              onDelete={canEdit ? handleBulkDelete : undefined}
-              isLoading={bulkArchiveItems.isPending || moveItems.isPending}
-            />
-            {isDraggingOver ? (
-              <div className='pointer-events-none absolute inset-0 z-[var(--z-dropdown)] flex flex-col items-center justify-center gap-2 border border-[var(--brand-secondary)] border-dashed bg-[var(--surface-4)] transition-colors'>
-                <Upload className='size-5 text-[var(--brand-secondary)]' />
-                <div className='flex flex-col gap-0.5 text-center'>
-                  <p className='font-medium text-[14px] text-[var(--brand-secondary)]'>
-                    Drop to upload
-                  </p>
-                  <p className='text-[11px] text-[var(--text-tertiary)]'>
-                    Release files here to add them to this workspace
-                  </p>
+      <Resource onContextMenu={handleContentContextMenu}>
+        <Resource.Header
+          icon={FilesIcon}
+          title='Files'
+          breadcrumbs={listBreadcrumbs}
+          actions={headerActionsConfig}
+        />
+        <Resource.Options
+          search={searchConfig}
+          sort={sortConfig}
+          filterTags={filterTags}
+          filter={filterContent ? { content: filterContent } : undefined}
+        />
+        <Resource.Table
+          columns={COLUMNS}
+          rows={rows}
+          sort={sortConfig}
+          selectable={selectableConfig}
+          rowDragDrop={rowDragDropConfig}
+          onRowClick={handleRowClick}
+          onRowContextMenu={handleRowContextMenu}
+          isLoading={isLoading || foldersLoading}
+          emptyMessage={emptyMessage}
+          overlay={
+            <>
+              <FilesActionBar
+                selectedCount={selectedRowIds.size}
+                onDownload={handleBulkDownload}
+                onMove={canEdit ? handleContextMenuMove : undefined}
+                moveOptions={canEdit ? contextMenuMoveOptions : undefined}
+                onDelete={canEdit ? handleBulkDelete : undefined}
+                isLoading={bulkArchiveItems.isPending || moveItems.isPending}
+              />
+              {isDraggingOver ? (
+                <div className='pointer-events-none absolute inset-0 z-[var(--z-dropdown)] flex flex-col items-center justify-center gap-2 border border-[var(--brand-secondary)] border-dashed bg-[var(--surface-4)] transition-colors'>
+                  <Upload className='size-5 text-[var(--brand-secondary)]' />
+                  <div className='flex flex-col gap-0.5 text-center'>
+                    <p className='font-medium text-[14px] text-[var(--brand-secondary)]'>
+                      Drop to upload
+                    </p>
+                    <p className='text-[11px] text-[var(--text-tertiary)]'>
+                      Release files here to add them to this workspace
+                    </p>
+                  </div>
                 </div>
-              </div>
-            ) : null}
-          </>
-        }
-      />
+              ) : null}
+            </>
+          }
+        />
+      </Resource>
 
       <FilesListContextMenu
         isOpen={isListContextMenuOpen}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/loading.tsx b/apps/sim/app/workspace/[workspaceId]/files/loading.tsx
index d144399770a..486b03004f9 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/loading.tsx
@@ -1,62 +1,36 @@
-import { Skeleton } from '@/components/emcn'
+'use client'
 
-const SKELETON_ROW_COUNT = 5
-const COLUMN_COUNT = 6
+import { File as FilesIcon, FolderPlus, Plus, Upload } from '@/components/emcn'
+import {
+  type ChromeActionSpec,
+  ResourceChromeFallback,
+} from '@/app/workspace/[workspaceId]/components'
+
+const COLUMNS = [
+  { id: 'name', header: 'Name', widthMultiplier: 1.15 },
+  { id: 'size', header: 'Size', widthMultiplier: 0.85 },
+  { id: 'type', header: 'Type', widthMultiplier: 1.0 },
+  { id: 'created', header: 'Created' },
+  { id: 'owner', header: 'Owner' },
+  { id: 'updated', header: 'Last Updated' },
+]
+
+const ACTIONS: ChromeActionSpec[] = [
+  { text: 'Upload', icon: Upload },
+  { text: 'New folder', icon: FolderPlus },
+  { text: 'New file', icon: Plus, variant: 'primary' },
+]
 
 export default function FilesLoading() {
   return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[32px] rounded-[4px]' />
-          </div>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[28px] w-[72px] rounded-[6px]' />
-            <Skeleton className='h-[28px] w-[64px] rounded-[6px]' />
-          </div>
-        </div>
-      </div>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center'>
-          <Skeleton className='size-[14px] rounded-[2px]' />
-          <Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
-        </div>
-      </div>
-      <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full'>
-          <thead>
-            <tr className='border-[var(--border)] border-b'>
-              <th className='w-[40px] px-[12px] py-[8px]'>
-                <Skeleton className='size-[14px] rounded-[2px]' />
-              </th>
-              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
-                <th key={i} className='px-[12px] py-[8px] text-left'>
-                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-[var(--border)] border-b'>
-                <td className='w-[40px] px-[12px] py-[10px]'>
-                  <Skeleton className='size-[14px] rounded-[2px]' />
-                </td>
-                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
-                  <td key={colIndex} className='px-[12px] py-[10px]'>
-                    <Skeleton
-                      className='h-[14px] rounded-[4px]'
-                      style={{ width: colIndex === 0 ? '128px' : '80px' }}
-                    />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <ResourceChromeFallback
+      icon={FilesIcon}
+      title='Files'
+      columns={COLUMNS}
+      actions={ACTIONS}
+      searchPlaceholder='Search files...'
+      hasSort
+      hasFilter
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/files/page.tsx b/apps/sim/app/workspace/[workspaceId]/files/page.tsx
index 242b7e92913..514662f7a78 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/page.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/page.tsx
@@ -1,15 +1,22 @@
 import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import { Files } from './files'
+import FilesLoading from './loading'
 
 export const metadata: Metadata = {
   title: 'Files',
   robots: { index: false },
 }
 
+/**
+ * Files page entry. `Files` reads `useSearchParams`, so it must sit under a
+ * Suspense boundary. The fallback renders the real chrome (header + options +
+ * table headers) so a suspend never shows a blank frame; the route-level
+ * `loading.tsx` covers the navigation/chunk-load transition the same way.
+ */
 export default function FilesPage() {
   return (
-    <Suspense fallback={null}>
+    <Suspense fallback={<FilesLoading />}>
       <Files />
     </Suspense>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
index f1fda6c482a..e71c4ed5fae 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
@@ -382,7 +382,7 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
           aria-hidden={!expanded}
           tabIndex={expanded ? undefined : -1}
           className={cn(
-            chipVariants({ variant: 'ghost', flush: true }),
+            chipVariants({ flush: true }),
             '-mr-2 gap-1.5 transition-opacity duration-150 ease-out motion-reduce:transition-none',
             expanded ? 'opacity-100' : 'pointer-events-none opacity-0'
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section.tsx
index 91cb688b9c7..8b40a489734 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section.tsx
@@ -32,7 +32,7 @@ function SkillRow({ skill, added, pending, disabled, onAdd }: SkillRowProps) {
         <span className='truncate text-[12px] text-[var(--text-muted)]'>{skill.description}</span>
       </div>
       {added ? (
-        <Chip variant='filled' leftIcon={Check} disabled flush>
+        <Chip leftIcon={Check} disabled flush>
           Added
         </Chip>
       ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx
index ed632532daf..73666025dec 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx
@@ -30,7 +30,6 @@ export function ShowcaseWithExplore({ prompt }: ShowcaseWithExploreProps) {
     <div className='relative'>
       <IntegrationsShowcase />
       <Chip
-        variant='filled'
         rightIcon={ArrowRight}
         onClick={() => {
           storeCuratedPrompt(prompt)
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
index c309f5c9ad5..e4564019fa6 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -9,6 +9,7 @@ import {
   ChipInput,
   ChipModal,
   ChipModalBody,
+  ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
   DatePicker,
@@ -389,10 +390,8 @@ export function DocumentTagsModal({
       </ChipModalHeader>
 
       <ChipModalBody>
-        <div className='min-h-0 flex-1 overflow-y-auto'>
+        <ChipModalField type='custom' title='Tags'>
           <div className='space-y-2'>
-            <Label>Tags</Label>
-
             {documentTags.map((tag, index) => (
               <div key={tag.displayName} className='space-y-2'>
                 <div
@@ -738,7 +737,7 @@ export function DocumentTagsModal({
               </div>
             )}
           </div>
-        </div>
+        </ChipModalField>
       </ChipModalBody>
 
       <ChipModalFooter
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
index 26b61c5ce2c..3ccdc46f638 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } fro
 import { createLogger } from '@sim/logger'
 import { ChevronDown, ChevronUp, FileText, Pencil, Tag } from 'lucide-react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
-import { Badge, ChipCombobox, ChipConfirmModal, Trash } from '@/components/emcn'
+import { Badge, ChipCombobox, ChipConfirmModal, Plus, Trash } from '@/components/emcn'
 import { Database } from '@/components/emcn/icons'
 import { SearchHighlight } from '@/components/ui/search-highlight'
 import type { ChunkData } from '@/lib/knowledge/types'
@@ -12,19 +12,15 @@ import { formatTokenCount } from '@/lib/tokenization'
 import type {
   BreadcrumbItem,
   FilterTag,
-  HeaderAction,
   PaginationConfig,
+  ResourceAction,
   ResourceColumn,
   ResourceRow,
   SearchConfig,
   SelectableConfig,
   SortConfig,
 } from '@/app/workspace/[workspaceId]/components'
-import {
-  EMPTY_CELL_PLACEHOLDER,
-  Resource,
-  ResourceHeader,
-} from '@/app/workspace/[workspaceId]/components'
+import { EMPTY_CELL_PLACEHOLDER, Resource } from '@/app/workspace/[workspaceId]/components'
 import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
 import {
   ChunkContextMenu,
@@ -258,7 +254,7 @@ export function Document({
   const { mutate: updateChunkMutation } = useUpdateChunk()
   const { mutate: deleteDocumentMutation, isPending: isDeletingDocument } = useDeleteDocument()
   const { mutate: bulkChunkMutation, isPending: isBulkOperating } = useBulkChunkOperation()
-  const { mutate: updateDocumentMutation } = useUpdateDocument()
+  const { mutateAsync: updateDocumentMutation } = useUpdateDocument()
 
   const docRename = useInlineRename({
     onSave: (docId, filename) =>
@@ -476,6 +472,7 @@ export function Document({
                     onChange: docRename.setEditValue,
                     onSubmit: docRename.submitRename,
                     onCancel: docRename.cancelRename,
+                    disabled: docRename.isSaving,
                   }
                 : undefined,
               dropdownItems: [
@@ -501,6 +498,7 @@ export function Document({
       docRename.setEditValue,
       docRename.submitRename,
       docRename.cancelRename,
+      docRename.isSaving,
       userPermissions.canEdit,
       handleStartDocRename,
       handleShowTags,
@@ -1008,36 +1006,36 @@ export function Document({
     [handleNavigateChunk]
   )
 
-  const createActions = useMemo<HeaderAction[]>(
+  const createActions = useMemo<ResourceAction[]>(
     () => [
       {
-        label: saveLabel,
-        onClick: handleSaveClick,
+        text: saveLabel,
+        onSelect: handleSaveClick,
         disabled: !isDirty || saveStatus === 'saving',
       },
     ],
     [saveLabel, handleSaveClick, isDirty, saveStatus]
   )
 
-  const editorActions = useMemo<HeaderAction[]>(() => {
-    const actions: HeaderAction[] = [
+  const editorActions = useMemo<ResourceAction[]>(() => {
+    const actions: ResourceAction[] = [
       {
-        label: 'Previous chunk',
+        text: 'Previous chunk',
         icon: ChevronUp,
-        onClick: handleNavigatePrev,
+        onSelect: handleNavigatePrev,
         disabled: !canNavigatePrev,
       },
       {
-        label: 'Next chunk',
+        text: 'Next chunk',
         icon: ChevronDown,
-        onClick: handleNavigateNextChunk,
+        onSelect: handleNavigateNextChunk,
         disabled: !canNavigateNext,
       },
     ]
     if (canEdit && !isConnectorDocument) {
       actions.push({
-        label: saveLabel,
-        onClick: handleSaveClick,
+        text: saveLabel,
+        onSelect: handleSaveClick,
         disabled: !isDirty || saveStatus === 'saving',
       })
     }
@@ -1059,7 +1057,7 @@ export function Document({
     return (
       <>
         <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-          <ResourceHeader
+          <Resource.Header
             icon={FileText}
             breadcrumbs={newChunkBreadcrumbs}
             actions={createActions}
@@ -1091,7 +1089,7 @@ export function Document({
     if (!selectedChunk || !documentData) {
       return (
         <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-          <ResourceHeader icon={FileText} breadcrumbs={loadingBreadcrumbs} />
+          <Resource.Header icon={FileText} breadcrumbs={loadingBreadcrumbs} />
           <div className='flex flex-1 items-center justify-center'>
             <span className='text-[var(--text-muted)] text-sm'>Loading chunk…</span>
           </div>
@@ -1102,7 +1100,7 @@ export function Document({
     return (
       <>
         <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-          <ResourceHeader
+          <Resource.Header
             icon={FileText}
             breadcrumbs={editChunkBreadcrumbs}
             actions={editorActions}
@@ -1131,25 +1129,39 @@ export function Document({
 
   return (
     <>
-      <Resource
-        icon={FileText}
-        title={effectiveDocumentName}
-        breadcrumbs={breadcrumbs}
-        create={createAction}
-        search={combinedError ? undefined : searchConfig}
-        columns={CHUNK_COLUMNS}
-        rows={combinedError ? [] : chunkRows}
-        selectable={combinedError ? undefined : selectableConfig}
-        onRowClick={isCompleted ? handleChunkClick : undefined}
-        onRowContextMenu={isCompleted ? handleChunkContextMenu : undefined}
-        onContextMenu={handleEmptyContextMenu}
-        isLoading={isLoadingDocument || isFetchingNewDoc}
-        pagination={paginationConfig}
-        emptyMessage={emptyMessage}
-        filter={combinedError ? undefined : filterContent}
-        filterTags={combinedError ? undefined : filterTags}
-        sort={combinedError ? undefined : sortConfig}
-      />
+      <Resource onContextMenu={handleEmptyContextMenu}>
+        <Resource.Header
+          icon={FileText}
+          title={effectiveDocumentName}
+          breadcrumbs={breadcrumbs}
+          actions={[
+            {
+              text: createAction.label,
+              icon: Plus,
+              onSelect: createAction.onClick,
+              disabled: createAction.disabled,
+              variant: 'primary',
+            },
+          ]}
+        />
+        <Resource.Options
+          search={combinedError ? undefined : searchConfig}
+          sort={combinedError ? undefined : sortConfig}
+          filterTags={combinedError ? undefined : filterTags}
+          filter={combinedError ? undefined : { content: filterContent }}
+        />
+        <Resource.Table
+          columns={CHUNK_COLUMNS}
+          rows={combinedError ? [] : chunkRows}
+          sort={combinedError ? undefined : sortConfig}
+          selectable={combinedError ? undefined : selectableConfig}
+          onRowClick={isCompleted ? handleChunkClick : undefined}
+          onRowContextMenu={isCompleted ? handleChunkContextMenu : undefined}
+          isLoading={isLoadingDocument || isFetchingNewDoc}
+          pagination={paginationConfig}
+          emptyMessage={emptyMessage}
+        />
+      </Resource>
 
       <DocumentTagsModal
         open={showTagsModal}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/loading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/loading.tsx
index f1bdbe17002..0bdb64ee9a0 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/loading.tsx
@@ -1,67 +1,41 @@
-import { Skeleton } from '@/components/emcn'
+'use client'
 
-const SKELETON_ROW_COUNT = 5
-const COLUMN_COUNT = 4
+import { FileText } from 'lucide-react'
+import { Plus } from '@/components/emcn'
+import { Database } from '@/components/emcn/icons'
+import {
+  type BreadcrumbItem,
+  type ChromeActionSpec,
+  ResourceChromeFallback,
+} from '@/app/workspace/[workspaceId]/components'
+
+const noop = () => {}
+
+const COLUMNS = [
+  { id: 'content', header: 'Content' },
+  { id: 'index', header: 'Index', widthMultiplier: 0.6 },
+  { id: 'tokens', header: 'Tokens', widthMultiplier: 0.6 },
+  { id: 'status', header: 'Status', widthMultiplier: 0.75 },
+]
+
+const ACTIONS: ChromeActionSpec[] = [{ text: 'New chunk', icon: Plus, variant: 'primary' }]
+
+const BREADCRUMBS: BreadcrumbItem[] = [
+  { label: 'Knowledge Base', icon: Database, onClick: noop },
+  { label: '…' },
+  { label: '…', terminal: true },
+]
 
 export default function DocumentLoading() {
   return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-[var(--border)] border-b px-[16px] py-[8.5px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[8px]'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[96px] rounded-[4px]' />
-            <Skeleton className='h-[14px] w-[8px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[100px] rounded-[4px]' />
-            <Skeleton className='h-[14px] w-[8px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
-          </div>
-        </div>
-      </div>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
-          </div>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
-          </div>
-        </div>
-      </div>
-      <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full'>
-          <thead>
-            <tr className='border-[var(--border)] border-b'>
-              <th className='w-[40px] px-[12px] py-[8px]'>
-                <Skeleton className='size-[14px] rounded-[2px]' />
-              </th>
-              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
-                <th key={i} className='px-[12px] py-[8px] text-left'>
-                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-[var(--border)] border-b'>
-                <td className='w-[40px] px-[12px] py-[10px]'>
-                  <Skeleton className='size-[14px] rounded-[2px]' />
-                </td>
-                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
-                  <td key={colIndex} className='px-[12px] py-[10px]'>
-                    <Skeleton
-                      className='h-[14px] rounded-[4px]'
-                      style={{ width: colIndex === 0 ? '200px' : '80px' }}
-                    />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <ResourceChromeFallback
+      icon={FileText}
+      breadcrumbs={BREADCRUMBS}
+      columns={COLUMNS}
+      actions={ACTIONS}
+      searchPlaceholder='Search chunks...'
+      hasSort
+      hasFilter
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
index e1122f786d1..f0bbc811cec 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -19,6 +19,9 @@ import {
   ChipModal,
   ChipModalBody,
   ChipModalHeader,
+  cellIconNodeClass,
+  chipContentGap,
+  chipContentLabelClass,
   chipVariants,
   Loader,
   Tooltip,
@@ -37,7 +40,7 @@ import { formatFileSize } from '@/lib/uploads/utils/file-utils'
 import type {
   BreadcrumbItem,
   FilterTag,
-  HeaderAction,
+  ResourceAction,
   ResourceCell,
   ResourceColumn,
   ResourceRow,
@@ -225,7 +228,7 @@ export function KnowledgeBase({
   const { mutate: deleteDocumentMutation } = useDeleteDocument()
   const { mutate: deleteKnowledgeBaseMutation, isPending: isDeleting } =
     useDeleteKnowledgeBase(workspaceId)
-  const { mutate: updateKnowledgeBaseMutation } = useUpdateKnowledgeBase(workspaceId)
+  const { mutateAsync: updateKnowledgeBaseMutation } = useUpdateKnowledgeBase(workspaceId)
 
   const kbRename = useInlineRename({
     onSave: (kbId, name) =>
@@ -809,6 +812,7 @@ export function KnowledgeBase({
             onChange: kbRename.setEditValue,
             onSubmit: kbRename.submitRename,
             onCancel: kbRename.cancelRename,
+            disabled: kbRename.isSaving,
           }
         : undefined,
       dropdownItems: [
@@ -838,14 +842,14 @@ export function KnowledgeBase({
     },
   ]
 
-  const headerActions: HeaderAction[] = [
+  const headerActions: ResourceAction[] = [
     ...(userPermissions.canEdit || userPermissions.isLoading
       ? [
           {
-            label: 'New connector',
+            text: 'New connector',
             icon: Plus,
             disabled: !userPermissions.canEdit,
-            onClick: () => setShowAddConnectorModal(true),
+            onSelect: () => setShowAddConnectorModal(true),
           },
         ]
       : []),
@@ -1065,11 +1069,14 @@ export function KnowledgeBase({
           cells: {
             name: {
               content: (
-                <span className='flex min-w-0 items-center gap-3 font-medium text-[var(--text-body)] text-sm'>
-                  <span className='flex-shrink-0 text-[var(--text-icon)]'>
+                <span className={cn('flex min-w-0 items-center', chipContentGap)}>
+                  <span className={cellIconNodeClass}>
                     <DocIcon className='size-[14px]' />
                   </span>
-                  <FloatingOverflowText label={doc.filename} className='block truncate'>
+                  <FloatingOverflowText
+                    label={doc.filename}
+                    className={cn('block', chipContentLabelClass)}
+                  >
                     <SearchHighlight text={doc.filename} searchQuery={searchQuery} />
                   </FloatingOverflowText>
                 </span>
@@ -1133,61 +1140,71 @@ export function KnowledgeBase({
 
   return (
     <>
-      <Resource
-        icon={Database}
-        title='Knowledge Base'
-        breadcrumbs={breadcrumbs}
-        create={{
-          label: 'New documents',
-          onClick: handleAddDocuments,
-          disabled: userPermissions.canEdit !== true,
-        }}
-        headerActions={headerActions}
-        sort={sortConfig}
-        search={{
-          value: searchQuery,
-          onChange: handleSearchChange,
-          placeholder: 'Search documents...',
-        }}
-        filter={filterContent}
-        filterTags={filterTags}
-        extras={connectorBadges}
-        columns={DOCUMENT_COLUMNS}
-        rows={documentRows}
-        selectable={selectableConfig}
-        onRowClick={handleDocumentClick}
-        onRowContextMenu={handleDocumentContextMenu}
-        onContextMenu={handleEmptyContextMenu}
-        isLoading={
-          isInitialLoad || isFetchingNewKB || (isLoadingDocuments && documents.length === 0)
-        }
-        pagination={{
-          currentPage,
-          totalPages,
-          onPageChange: (page) => setCurrentPage(page),
-        }}
-        emptyMessage={emptyMessage}
-        overlay={
-          <ActionBar
-            className={totalPages > 1 ? 'bottom-[72px]' : undefined}
-            selectedCount={selectedDocuments.size}
-            onEnable={disabledCount > 0 ? handleBulkEnable : undefined}
-            onDisable={enabledCount > 0 ? handleBulkDisable : undefined}
-            onDelete={handleBulkDelete}
-            enabledCount={enabledCount}
-            disabledCount={disabledCount}
-            isLoading={isBulkOperating}
-            totalCount={pagination.total}
-            isAllPageSelected={isAllSelected}
-            isAllSelected={isSelectAllMode}
-            onSelectAll={() => setIsSelectAllMode(true)}
-            onClearSelectAll={() => {
-              setIsSelectAllMode(false)
-              setSelectedDocuments(new Set())
-            }}
-          />
-        }
-      />
+      <Resource onContextMenu={handleEmptyContextMenu}>
+        <Resource.Header
+          icon={Database}
+          title='Knowledge Base'
+          breadcrumbs={breadcrumbs}
+          actions={[
+            ...headerActions,
+            {
+              text: 'New documents',
+              icon: Plus,
+              onSelect: handleAddDocuments,
+              disabled: userPermissions.canEdit !== true,
+              variant: 'primary',
+            },
+          ]}
+        />
+        <Resource.Options
+          search={{
+            value: searchQuery,
+            onChange: handleSearchChange,
+            placeholder: 'Search documents...',
+          }}
+          sort={sortConfig}
+          filter={filterContent ? { content: filterContent } : undefined}
+          filterTags={filterTags}
+          aside={connectorBadges}
+        />
+        <Resource.Table
+          columns={DOCUMENT_COLUMNS}
+          rows={documentRows}
+          sort={sortConfig}
+          selectable={selectableConfig}
+          onRowClick={handleDocumentClick}
+          onRowContextMenu={handleDocumentContextMenu}
+          isLoading={
+            isInitialLoad || isFetchingNewKB || (isLoadingDocuments && documents.length === 0)
+          }
+          pagination={{
+            currentPage,
+            totalPages,
+            onPageChange: (page) => setCurrentPage(page),
+          }}
+          emptyMessage={emptyMessage}
+          overlay={
+            <ActionBar
+              className={totalPages > 1 ? 'bottom-[72px]' : undefined}
+              selectedCount={selectedDocuments.size}
+              onEnable={disabledCount > 0 ? handleBulkEnable : undefined}
+              onDisable={enabledCount > 0 ? handleBulkDisable : undefined}
+              onDelete={handleBulkDelete}
+              enabledCount={enabledCount}
+              disabledCount={disabledCount}
+              isLoading={isBulkOperating}
+              totalCount={pagination.total}
+              isAllPageSelected={isAllSelected}
+              isAllSelected={isSelectAllMode}
+              onSelectAll={() => setIsSelectAllMode(true)}
+              onClearSelectAll={() => {
+                setIsSelectAllMode(false)
+                setSelectedDocuments(new Set())
+              }}
+            />
+          }
+        />
+      </Resource>
 
       <BaseTagsModal open={showTagsModal} onOpenChange={setShowTagsModal} knowledgeBaseId={id} />
 
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
index 703d9c23e38..d0d6d21d783 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { ArrowLeft, ArrowLeftRight, Info, Plus } from 'lucide-react'
+import { ArrowLeft, Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   ArrowRight,
@@ -13,12 +13,12 @@ import {
   ChipInput,
   ChipModal,
   ChipModalBody,
+  ChipModalError,
+  ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
   type ComboboxOption,
-  Label,
   Search,
-  Tooltip,
 } from '@/components/emcn'
 import { getSubscriptionAccessState } from '@/lib/billing/client'
 import { cn } from '@/lib/core/utils/cn'
@@ -30,19 +30,17 @@ import {
   type OAuthProvider,
 } from '@/lib/oauth'
 import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
-import { ConnectorSelectorField } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field'
+import { ConnectorConfigFields } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields'
 import { SYNC_INTERVALS } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/consts'
 import { MaxBadge } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/max-badge'
-import type { ConfigFieldValue } from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
 import { useConnectorConfigFields } from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
 import { isBillingEnabled } from '@/app/workspace/[workspaceId]/settings/navigation'
 import { getBlock } from '@/blocks'
 import { CONNECTOR_REGISTRY } from '@/connectors/registry'
-import type { ConnectorConfig, ConnectorConfigField } from '@/connectors/types'
+import type { ConnectorConfig } from '@/connectors/types'
 import { useCreateConnector } from '@/hooks/queries/kb/connectors'
 import { useOAuthCredentials } from '@/hooks/queries/oauth/oauth-credentials'
 import { useSubscriptionData } from '@/hooks/queries/subscription'
-import type { SelectorKey } from '@/hooks/selectors/types'
 import { useCredentialRefreshTriggers } from '@/hooks/use-credential-refresh-triggers'
 
 const CONNECTOR_ENTRIES = Object.entries(CONNECTOR_REGISTRY)
@@ -249,12 +247,10 @@ export function AddConnectorModal({
         </ChipModalHeader>
 
         <ChipModalBody
-          className={
-            step === 'select-type' ? 'max-h-[520px] pt-2 pb-3' : 'h-[80vh] max-h-[560px] pb-3'
-          }
+          className={step === 'select-type' ? 'max-h-[520px] pb-0' : 'h-[80vh] max-h-[560px]'}
         >
           {step === 'select-type' ? (
-            <div className='flex min-h-0 flex-col gap-2.5'>
+            <div className='flex min-h-0 flex-col px-2'>
               <ChipInput
                 icon={Search}
                 placeholder='Search sources...'
@@ -262,7 +258,7 @@ export function AddConnectorModal({
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
               <div className='max-h-[390px] min-h-0 overflow-y-auto [scrollbar-gutter:stable]'>
-                <div className='flex flex-col gap-0.5 pr-1'>
+                <div className='flex flex-col gap-0.5 pt-2.5 pr-1 pb-4.5'>
                   {filteredEntries.map(([type, config]) => (
                     <ConnectorTypeCard
                       key={type}
@@ -282,14 +278,16 @@ export function AddConnectorModal({
               </div>
             </div>
           ) : connectorConfig ? (
-            <div className='flex flex-col gap-3'>
+            <>
               {isApiKeyMode ? (
-                <div className='flex flex-col gap-2'>
-                  <Label>
-                    {connectorConfig.auth.mode === 'apiKey' && connectorConfig.auth.label
+                <ChipModalField
+                  type='custom'
+                  title={
+                    connectorConfig.auth.mode === 'apiKey' && connectorConfig.auth.label
                       ? connectorConfig.auth.label
-                      : 'API Key'}
-                  </Label>
+                      : 'API Key'
+                  }
+                >
                   <ChipInput
                     type={apiKeyFocused ? 'text' : 'password'}
                     autoComplete='new-password'
@@ -303,10 +301,9 @@ export function AddConnectorModal({
                         : 'Enter API key'
                     }
                   />
-                </div>
+                </ChipModalField>
               ) : (
-                <div className='flex flex-col gap-2'>
-                  <Label>Account</Label>
+                <ChipModalField type='custom' title='Account'>
                   <ChipCombobox
                     options={[
                       ...credentials.map(
@@ -334,144 +331,65 @@ export function AddConnectorModal({
                     placeholder={`Select ${connectorConfig.name} account`}
                     isLoading={credentialsLoading}
                   />
-                </div>
+                </ChipModalField>
               )}
 
-              {connectorConfig.configFields.map((field) => {
-                if (!isFieldVisible(field)) return null
-
-                const canonicalId = field.canonicalParamId
-                const hasCanonicalPair =
-                  canonicalId && (canonicalGroups.get(canonicalId)?.length ?? 0) === 2
-
-                return (
-                  <div key={field.id} className='flex flex-col gap-2'>
-                    <div className='flex items-center justify-between'>
-                      <div className='flex items-center gap-1'>
-                        <Label>
-                          {field.title}
-                          {field.required && <span className='ml-0.5'>*</span>}
-                        </Label>
-                        {field.description && (
-                          <Tooltip.Root>
-                            <Tooltip.Trigger asChild>
-                              <Button
-                                type='button'
-                                variant='ghost'
-                                className='flex size-[14px] cursor-help items-center justify-center p-0 text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-secondary)]'
-                                aria-label={`About ${field.title}`}
-                              >
-                                <Info className='size-[12px]' />
-                              </Button>
-                            </Tooltip.Trigger>
-                            <Tooltip.Content side='top'>{field.description}</Tooltip.Content>
-                          </Tooltip.Root>
-                        )}
-                      </div>
-                      {hasCanonicalPair && canonicalId && (
-                        <Tooltip.Root>
-                          <Tooltip.Trigger asChild>
-                            <Button
-                              type='button'
-                              variant='ghost'
-                              className='flex size-[18px] items-center justify-center rounded-[3px] p-0 text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-3)] hover-hover:text-[var(--text-secondary)]'
-                              onClick={() => toggleCanonicalMode(canonicalId)}
-                            >
-                              <ArrowLeftRight className='size-[12px]' />
-                            </Button>
-                          </Tooltip.Trigger>
-                          <Tooltip.Content side='top'>
-                            {field.mode === 'basic'
-                              ? 'Switch to manual input'
-                              : 'Switch to selector'}
-                          </Tooltip.Content>
-                        </Tooltip.Root>
-                      )}
-                    </div>
-                    {field.type === 'selector' && field.selectorKey ? (
-                      <ConnectorSelectorField
-                        field={field as ConnectorConfigField & { selectorKey: SelectorKey }}
-                        value={sourceConfig[field.id] ?? (field.multi ? [] : '')}
-                        onChange={(value: ConfigFieldValue) => handleFieldChange(field.id, value)}
-                        credentialId={effectiveCredentialId}
-                        sourceConfig={sourceConfig}
-                        configFields={connectorConfig.configFields}
-                        canonicalModes={canonicalModes}
-                        disabled={isCreating}
-                      />
-                    ) : field.type === 'dropdown' && field.options ? (
-                      <ChipCombobox
-                        options={field.options.map((opt) => ({
-                          label: opt.label,
-                          value: opt.id,
-                        }))}
-                        value={
-                          typeof sourceConfig[field.id] === 'string'
-                            ? (sourceConfig[field.id] as string) || undefined
-                            : undefined
-                        }
-                        onChange={(value) => handleFieldChange(field.id, value)}
-                        placeholder={field.placeholder || `Select ${field.title.toLowerCase()}`}
-                      />
-                    ) : (
-                      <ChipInput
-                        value={
-                          Array.isArray(sourceConfig[field.id])
-                            ? (sourceConfig[field.id] as string[]).join(', ')
-                            : (sourceConfig[field.id] as string) || ''
-                        }
-                        onChange={(e) => handleFieldChange(field.id, e.target.value)}
-                        placeholder={field.placeholder}
-                      />
-                    )}
-                  </div>
-                )
-              })}
+              <ConnectorConfigFields
+                connectorConfig={connectorConfig}
+                sourceConfig={sourceConfig}
+                credentialId={effectiveCredentialId}
+                canonicalGroups={canonicalGroups}
+                canonicalModes={canonicalModes}
+                isFieldVisible={isFieldVisible}
+                onFieldChange={handleFieldChange}
+                onToggleCanonicalMode={toggleCanonicalMode}
+                disabled={isCreating}
+              />
 
               {connectorConfig.tagDefinitions && connectorConfig.tagDefinitions.length > 0 && (
-                <div className='flex flex-col gap-2'>
-                  <Label>Metadata Tags</Label>
-                  {connectorConfig.tagDefinitions.map((tagDef) => (
-                    <div
-                      key={tagDef.id}
-                      role='checkbox'
-                      aria-checked={!disabledTagIds.has(tagDef.id)}
-                      tabIndex={0}
-                      className='flex cursor-pointer items-center gap-2 rounded-sm p-0.5 text-small'
-                      onClick={() => toggleTagDefinition(tagDef.id)}
-                      onKeyDown={(event) => {
-                        if (event.target !== event.currentTarget) return
-                        handleKeyboardActivation(event, () => toggleTagDefinition(tagDef.id))
-                      }}
-                    >
-                      <Checkbox
-                        checked={!disabledTagIds.has(tagDef.id)}
-                        onClick={(e) => e.stopPropagation()}
-                        onCheckedChange={(checked) => {
-                          setDisabledTagIds((prev) => {
-                            const next = new Set(prev)
-                            if (checked) {
-                              next.delete(tagDef.id)
-                            } else {
-                              next.add(tagDef.id)
-                            }
-                            return next
-                          })
+                <ChipModalField type='custom' title='Metadata Tags'>
+                  <div className='flex flex-col gap-2'>
+                    {connectorConfig.tagDefinitions.map((tagDef) => (
+                      <div
+                        key={tagDef.id}
+                        role='checkbox'
+                        aria-checked={!disabledTagIds.has(tagDef.id)}
+                        tabIndex={0}
+                        className='flex cursor-pointer items-center gap-2 rounded-sm p-0.5 text-small'
+                        onClick={() => toggleTagDefinition(tagDef.id)}
+                        onKeyDown={(event) => {
+                          if (event.target !== event.currentTarget) return
+                          handleKeyboardActivation(event, () => toggleTagDefinition(tagDef.id))
                         }}
-                      />
-                      <span className='min-w-0 flex-1 truncate text-[var(--text-primary)]'>
-                        {tagDef.displayName}
-                      </span>
-                      <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
-                        ({tagDef.fieldType})
-                      </span>
-                    </div>
-                  ))}
-                </div>
+                      >
+                        <Checkbox
+                          checked={!disabledTagIds.has(tagDef.id)}
+                          onClick={(e) => e.stopPropagation()}
+                          onCheckedChange={(checked) => {
+                            setDisabledTagIds((prev) => {
+                              const next = new Set(prev)
+                              if (checked) {
+                                next.delete(tagDef.id)
+                              } else {
+                                next.add(tagDef.id)
+                              }
+                              return next
+                            })
+                          }}
+                        />
+                        <span className='min-w-0 flex-1 truncate text-[var(--text-primary)]'>
+                          {tagDef.displayName}
+                        </span>
+                        <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
+                          ({tagDef.fieldType})
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </ChipModalField>
               )}
 
-              <div className='flex flex-col gap-2'>
-                <Label>Sync Frequency</Label>
+              <ChipModalField type='custom' title='Sync Frequency'>
                 <ButtonGroup
                   value={String(syncInterval)}
                   onValueChange={(val) => setSyncInterval(Number(val))}
@@ -487,12 +405,10 @@ export function AddConnectorModal({
                     </ButtonGroupItem>
                   ))}
                 </ButtonGroup>
-              </div>
+              </ChipModalField>
 
-              {error && (
-                <p className='text-[var(--text-error)] text-caption leading-tight'>{error}</p>
-              )}
-            </div>
+              <ChipModalError>{error}</ChipModalError>
+            </>
           ) : null}
         </ChipModalBody>
 
@@ -565,8 +481,8 @@ function ConnectorTypeCard({ type, config, onClick }: ConnectorTypeCardProps) {
         </div>
       </div>
       <div className='flex min-w-0 flex-1 flex-col'>
-        <span className='truncate text-[14px] text-[var(--text-body)]'>{config.name}</span>
-        <span className='truncate text-[12px] text-[var(--text-muted)]'>{config.description}</span>
+        <span className='truncate text-[var(--text-body)] text-sm'>{config.name}</span>
+        <span className='truncate text-[var(--text-muted)] text-caption'>{config.description}</span>
       </div>
       <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
     </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
index 547daf19d8c..4b6967a3552 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
@@ -12,7 +12,6 @@ import {
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  Label,
   Loader,
 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
@@ -22,10 +21,6 @@ import { useKnowledgeUpload } from '@/app/workspace/[workspaceId]/knowledge/hook
 
 const logger = createLogger('AddDocumentsModal')
 
-interface FileWithPreview extends File {
-  preview: string
-}
-
 interface AddDocumentsModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -45,7 +40,7 @@ export function AddDocumentsModal({
 }: AddDocumentsModalProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
-  const [files, setFiles] = useState<FileWithPreview[]>([])
+  const [files, setFiles] = useState<File[]>([])
   const [fileError, setFileError] = useState<string | null>(null)
   const [retryingIndexes, setRetryingIndexes] = useState<Set<number>>(() => new Set())
 
@@ -53,16 +48,6 @@ export function AddDocumentsModal({
     workspaceId,
   })
 
-  useEffect(() => {
-    return () => {
-      files.forEach((file) => {
-        if (file.preview) {
-          URL.revokeObjectURL(file.preview)
-        }
-      })
-    }
-  }, [files])
-
   useEffect(() => {
     if (open) {
       setFiles([])
@@ -97,7 +82,7 @@ export function AddDocumentsModal({
     if (!selectedFiles || selectedFiles.length === 0) return
 
     try {
-      const newFiles: FileWithPreview[] = []
+      const newFiles: File[] = []
       let hasError = false
 
       for (const file of selectedFiles) {
@@ -108,11 +93,7 @@ export function AddDocumentsModal({
           continue
         }
 
-        const fileWithPreview = Object.assign(file, {
-          preview: URL.createObjectURL(file),
-        }) as FileWithPreview
-
-        newFiles.push(fileWithPreview)
+        newFiles.push(file)
       }
 
       if (!hasError && newFiles.length > 0) {
@@ -125,10 +106,7 @@ export function AddDocumentsModal({
   }
 
   const removeFile = (index: number) => {
-    setFiles((prev) => {
-      URL.revokeObjectURL(prev[index].preview)
-      return prev.filter((_, i) => i !== index)
-    })
+    setFiles((prev) => prev.filter((_, i) => i !== index))
   }
 
   const handleRetryFile = async (index: number) => {
@@ -172,88 +150,80 @@ export function AddDocumentsModal({
       <ChipModalHeader onClose={() => handleOpenChange(false)}>New Documents</ChipModalHeader>
 
       <ChipModalBody>
-        <div className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='space-y-3'>
-            {fileError && (
-              <p className='text-[var(--text-error)] text-caption leading-tight'>{fileError}</p>
-            )}
-
-            <ChipModalField
-              type='file'
-              title='Upload Documents'
-              accept={ACCEPT_ATTRIBUTE}
-              multiple
-              onChange={processFiles}
-              description='PDF, DOC, DOCX, TXT, CSV, XLS, XLSX, MD, PPT, PPTX, HTML, JSONL (max 100MB each)'
-              flush
-            />
-
-            {files.length > 0 && (
-              <div className='space-y-2'>
-                <Label>Selected Files</Label>
-                <div className='space-y-2'>
-                  {files.map((file, index) => {
-                    const fileStatus = uploadProgress.fileStatuses?.[index]
-                    const isFailed = fileStatus?.status === 'failed'
-                    const isRetrying = retryingIndexes.has(index)
-                    const isProcessing = fileStatus?.status === 'uploading' || isRetrying
-
-                    return (
-                      <div
-                        key={`${file.name}-${file.size}`}
-                        className={cn(
-                          'flex items-center gap-2 rounded-sm border p-2',
-                          isFailed && !isRetrying && 'border-[var(--text-error)]'
-                        )}
-                      >
-                        <span
-                          className={cn(
-                            'min-w-0 flex-1 truncate text-caption',
-                            isFailed && !isRetrying && 'text-[var(--text-error)]'
-                          )}
-                          title={file.name}
-                        >
-                          {file.name}
-                        </span>
-                        <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
-                          {formatFileSize(file.size)}
-                        </span>
-                        <div className='flex flex-shrink-0 items-center gap-1'>
-                          {isProcessing ? (
-                            <Loader className='size-4 text-[var(--text-muted)]' animate />
-                          ) : (
-                            <>
-                              {isFailed && (
-                                <Button
-                                  type='button'
-                                  variant='ghost'
-                                  className='size-4 p-0'
-                                  onClick={() => handleRetryFile(index)}
-                                  disabled={isUploading}
-                                >
-                                  <RotateCcw className='size-3' />
-                                </Button>
-                              )}
-                              <Button
-                                type='button'
-                                variant='ghost'
-                                className='size-4 p-0'
-                                onClick={() => removeFile(index)}
-                                disabled={isUploading}
-                              >
-                                <X className='size-3.5' />
-                              </Button>
-                            </>
+        <ChipModalField
+          type='file'
+          title='Upload Documents'
+          accept={ACCEPT_ATTRIBUTE}
+          multiple
+          onChange={processFiles}
+          description='PDF, DOC, DOCX, TXT, CSV, XLS, XLSX, MD, PPT, PPTX, HTML, JSONL (max 100MB each)'
+          error={fileError}
+        />
+
+        {files.length > 0 && (
+          <ChipModalField type='custom' title='Selected Files'>
+            <div className='flex flex-col gap-2'>
+              {files.map((file, index) => {
+                const fileStatus = uploadProgress.fileStatuses?.[index]
+                const isFailed = fileStatus?.status === 'failed'
+                const isRetrying = retryingIndexes.has(index)
+                const isProcessing = fileStatus?.status === 'uploading' || isRetrying
+
+                return (
+                  <div
+                    key={`${file.name}-${file.size}`}
+                    className={cn(
+                      'flex items-center gap-2 rounded-sm border p-2',
+                      isFailed && !isRetrying && 'border-[var(--text-error)]'
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        'min-w-0 flex-1 truncate text-caption',
+                        isFailed && !isRetrying && 'text-[var(--text-error)]'
+                      )}
+                      title={file.name}
+                    >
+                      {file.name}
+                    </span>
+                    <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
+                      {formatFileSize(file.size)}
+                    </span>
+                    <div className='flex flex-shrink-0 items-center gap-1'>
+                      {isProcessing ? (
+                        <Loader className='size-4 text-[var(--text-muted)]' animate />
+                      ) : (
+                        <>
+                          {isFailed && (
+                            <Button
+                              type='button'
+                              variant='ghost'
+                              className='size-4 p-0'
+                              onClick={() => handleRetryFile(index)}
+                              disabled={isUploading}
+                            >
+                              <RotateCcw className='size-3' />
+                            </Button>
                           )}
-                        </div>
-                      </div>
-                    )
-                  })}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
+                          <Button
+                            type='button'
+                            variant='ghost'
+                            className='size-4 p-0'
+                            onClick={() => removeFile(index)}
+                            disabled={isUploading}
+                          >
+                            <X className='size-3.5' />
+                          </Button>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </ChipModalField>
+        )}
+
         {uploadError && <ChipModalError>{uploadError.message}</ChipModalError>}
       </ChipModalBody>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
index 2716a64d172..38f87b5948e 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import {
   Button,
@@ -9,14 +9,13 @@ import {
   ChipInput,
   ChipModal,
   ChipModalBody,
+  ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
   type ComboboxOption,
-  Label,
   Trash,
 } from '@/components/emcn'
-import { requestJson } from '@/lib/api/client/request'
-import { getTagUsageContract, type TagUsageData } from '@/lib/api/contracts/knowledge'
+import type { TagUsageData } from '@/lib/api/contracts/knowledge'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { SUPPORTED_FIELD_TYPES, TAG_SLOT_CONFIG } from '@/lib/knowledge/constants'
 import { getDocumentIcon } from '@/app/workspace/[workspaceId]/knowledge/components'
@@ -24,7 +23,11 @@ import {
   type TagDefinition,
   useKnowledgeBaseTagDefinitions,
 } from '@/hooks/kb/use-knowledge-base-tag-definitions'
-import { useCreateTagDefinition, useDeleteTagDefinition } from '@/hooks/queries/kb/knowledge'
+import {
+  useCreateTagDefinition,
+  useDeleteTagDefinition,
+  useTagUsageQuery,
+} from '@/hooks/queries/kb/knowledge'
 
 const logger = createLogger('BaseTagsModal')
 
@@ -58,7 +61,7 @@ function DocumentList({ documents, totalCount }: DocumentListProps) {
               {doc.tagValue && (
                 <>
                   <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
-                  <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-xs'>
+                  <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-caption'>
                     {doc.tagValue}
                   </span>
                 </>
@@ -67,7 +70,7 @@ function DocumentList({ documents, totalCount }: DocumentListProps) {
           )
         })}
         {hasMore && (
-          <div className='p-2 text-[var(--text-muted)] text-xs'>
+          <div className='p-2 text-[var(--text-muted)] text-caption'>
             and {totalCount - displayLimit} more documents
           </div>
         )}
@@ -91,33 +94,15 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
   const [deleteTagDialogOpen, setDeleteTagDialogOpen] = useState(false)
   const [selectedTag, setSelectedTag] = useState<TagDefinition | null>(null)
   const [viewDocumentsDialogOpen, setViewDocumentsDialogOpen] = useState(false)
-  const [tagUsageData, setTagUsageData] = useState<TagUsageData[]>([])
   const [isCreatingTag, setIsCreatingTag] = useState(false)
   const [createTagForm, setCreateTagForm] = useState({
     displayName: '',
     fieldType: 'text',
   })
 
-  const fetchTagUsage = useCallback(async () => {
-    if (!knowledgeBaseId) return
-
-    try {
-      const result = await requestJson(getTagUsageContract, {
-        params: { id: knowledgeBaseId },
-      })
-      if (result.success) {
-        setTagUsageData(result.data)
-      }
-    } catch (error) {
-      logger.error('Error fetching tag usage:', error)
-    }
-  }, [knowledgeBaseId])
-
-  useEffect(() => {
-    if (open) {
-      fetchTagUsage()
-    }
-  }, [open, fetchTagUsage])
+  const { data: tagUsageData = [], refetch: refetchTagUsage } = useTagUsageQuery(knowledgeBaseId, {
+    enabled: open,
+  })
 
   const getTagUsage = (tagSlot: string): TagUsageData => {
     return (
@@ -132,13 +117,13 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
 
   const handleDeleteTagClick = async (tag: TagDefinition) => {
     setSelectedTag(tag)
-    await fetchTagUsage()
+    await refetchTagUsage()
     setDeleteTagDialogOpen(true)
   }
 
   const handleViewDocuments = async (tag: TagDefinition) => {
     setSelectedTag(tag)
-    await fetchTagUsage()
+    await refetchTagUsage()
     setViewDocumentsDialogOpen(true)
   }
 
@@ -208,8 +193,6 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
         fieldType: createTagForm.fieldType,
       })
 
-      await fetchTagUsage()
-
       setCreateTagForm({
         displayName: '',
         fieldType: 'text',
@@ -220,6 +203,11 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
     }
   }
 
+  const closeDeleteTagDialog = () => {
+    setDeleteTagDialogOpen(false)
+    setSelectedTag(null)
+  }
+
   const confirmDeleteTag = async () => {
     if (!selectedTag) return
 
@@ -229,10 +217,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
         tagDefinitionId: selectedTag.id,
       })
 
-      await fetchTagUsage()
-
-      setDeleteTagDialogOpen(false)
-      setSelectedTag(null)
+      closeDeleteTagDialog()
     } catch (error) {
       logger.error('Error deleting tag definition:', error)
     }
@@ -261,15 +246,18 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
         </ChipModalHeader>
 
         <ChipModalBody>
-          <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='space-y-2'>
-              <Label>
+          <ChipModalField
+            type='custom'
+            title={
+              <>
                 Tags:{' '}
                 <span className='pl-1.5 text-[var(--text-tertiary)]'>
                   {kbTagDefinitions.length} defined
                 </span>
-              </Label>
-
+              </>
+            }
+          >
+            <div className='flex flex-col gap-2'>
               {kbTagDefinitions.length === 0 && !isCreatingTag && (
                 <div className='rounded-md border p-4 text-center'>
                   <p className='text-[var(--text-tertiary)] text-caption'>
@@ -299,7 +287,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                       {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
                     </span>
                     <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
-                    <span className='min-w-0 flex-1 text-[var(--text-muted)] text-xs'>
+                    <span className='min-w-0 flex-1 text-[var(--text-muted)] text-caption'>
                       {usage.documentCount} document{usage.documentCount !== 1 ? 's' : ''}
                     </span>
                     <div className='flex flex-shrink-0 items-center gap-1'>
@@ -331,10 +319,13 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
 
               {isCreatingTag && (
                 <div className='space-y-2 rounded-md border p-3'>
-                  <div className='flex flex-col gap-2'>
-                    <Label htmlFor='tagName'>Tag Name</Label>
+                  <ChipModalField
+                    type='custom'
+                    title='Tag Name'
+                    flush
+                    error={tagNameConflict ? 'A tag with this name already exists' : undefined}
+                  >
                     <ChipInput
-                      id='tagName'
                       value={createTagForm.displayName}
                       onChange={(e) =>
                         setCreateTagForm({ ...createTagForm, displayName: e.target.value })
@@ -352,27 +343,25 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                         }
                       }}
                     />
-                    {tagNameConflict && (
-                      <span className='text-[var(--text-error)] text-caption'>
-                        A tag with this name already exists
-                      </span>
-                    )}
-                  </div>
-
-                  <div className='flex flex-col gap-2'>
-                    <Label htmlFor='tagType'>Type</Label>
+                  </ChipModalField>
+
+                  <ChipModalField
+                    type='custom'
+                    title='Type'
+                    flush
+                    error={
+                      !hasAvailableSlots(createTagForm.fieldType)
+                        ? 'No available slots for this type. Choose a different type.'
+                        : undefined
+                    }
+                  >
                     <ChipCombobox
                       options={fieldTypeOptions}
                       value={createTagForm.fieldType}
                       onChange={(value) => setCreateTagForm({ ...createTagForm, fieldType: value })}
                       placeholder='Select type'
                     />
-                    {!hasAvailableSlots(createTagForm.fieldType) && (
-                      <span className='text-[var(--text-error)] text-caption'>
-                        No available slots for this type. Choose a different type.
-                      </span>
-                    )}
-                  </div>
+                  </ChipModalField>
 
                   <div className='flex gap-2'>
                     <Button variant='default' onClick={cancelCreatingTag} className='flex-1'>
@@ -394,7 +383,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                 </div>
               )}
             </div>
-          </div>
+          </ChipModalField>
         </ChipModalBody>
 
         <ChipModalFooter
@@ -406,9 +395,12 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
       {/* Delete Tag Confirmation Dialog */}
       <ChipConfirmModal
         open={deleteTagDialogOpen}
-        onOpenChange={(open) => {
-          setDeleteTagDialogOpen(open)
-          if (!open) setSelectedTag(null)
+        onOpenChange={(openState) => {
+          if (openState) {
+            setDeleteTagDialogOpen(true)
+          } else {
+            closeDeleteTagDialog()
+          }
         }}
         srTitle='Delete Tag'
         title='Delete Tag'
@@ -432,13 +424,12 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
         }}
       >
         {selectedTagUsage && selectedTagUsage.documentCount > 0 && (
-          <div className='flex flex-col gap-2 px-2'>
-            <Label>Affected documents:</Label>
+          <ChipModalField type='custom' title='Affected documents'>
             <DocumentList
               documents={selectedTagUsage.documents}
               totalCount={selectedTagUsage.documentCount}
             />
-          </div>
+          </ChipModalField>
         )}
       </ChipConfirmModal>
 
@@ -453,7 +444,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
           Documents using "{selectedTag?.displayName}"
         </ChipModalHeader>
         <ChipModalBody>
-          <div className='space-y-2'>
+          <div className='flex flex-col gap-2 px-2'>
             <p className='text-[var(--text-secondary)]'>
               {selectedTagUsage?.documentCount || 0} document
               {selectedTagUsage?.documentCount !== 1 ? 's are' : ' is'} currently using this tag
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
new file mode 100644
index 00000000000..43383449ac6
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import { ArrowLeftRight, Info } from 'lucide-react'
+import { Button, ChipCombobox, ChipInput, ChipModalField, Tooltip } from '@/components/emcn'
+import { ConnectorSelectorField } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field'
+import type {
+  ConfigFieldMap,
+  ConfigFieldValue,
+} from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
+import type { ConnectorConfig, ConnectorConfigField } from '@/connectors/types'
+import type { SelectorKey } from '@/hooks/selectors/types'
+
+export interface ConnectorConfigFieldsProps {
+  /** Registry definition whose `configFields` drive the rendered rows. */
+  connectorConfig: ConnectorConfig
+  /** Current values keyed by field ID. */
+  sourceConfig: ConfigFieldMap
+  /** OAuth credential backing selector fields, when available. */
+  credentialId: string | null
+  /** Canonical-pair groups keyed by `canonicalParamId`. */
+  canonicalGroups: Map<string, ConnectorConfigField[]>
+  /** Active mode per canonical pair. */
+  canonicalModes: Record<string, 'basic' | 'advanced'>
+  /** Visibility predicate honoring `condition` / canonical mode. */
+  isFieldVisible: (field: ConnectorConfigField) => boolean
+  /** Field value change handler. */
+  onFieldChange: (fieldId: string, value: ConfigFieldValue) => void
+  /** Swaps a canonical pair between selector and manual input. */
+  onToggleCanonicalMode: (canonicalId: string) => void
+  /** Disables selector fields during submission. */
+  disabled: boolean
+}
+
+/**
+ * Renders the connector's dynamic configuration fields as canonical
+ * `ChipModalField` rows. Shared by the add- and edit-connector modals so the
+ * label + info tooltip + canonical-pair toggle + selector/dropdown/input
+ * switch stays identical in both flows.
+ */
+export function ConnectorConfigFields({
+  connectorConfig,
+  sourceConfig,
+  credentialId,
+  canonicalGroups,
+  canonicalModes,
+  isFieldVisible,
+  onFieldChange,
+  onToggleCanonicalMode,
+  disabled,
+}: ConnectorConfigFieldsProps) {
+  return (
+    <>
+      {connectorConfig.configFields.map((field) => {
+        if (!isFieldVisible(field)) return null
+
+        const canonicalId = field.canonicalParamId
+        const hasCanonicalPair =
+          canonicalId && (canonicalGroups.get(canonicalId)?.length ?? 0) === 2
+
+        return (
+          <ChipModalField
+            key={field.id}
+            type='custom'
+            title={
+              /**
+               * Buttons inside the field's `Label` would become its labeled
+               * control, so a click on the title text would forward to them.
+               * Cancelling the click's default action keeps label clicks
+               * inert without affecting the buttons' own handlers.
+               */
+              <span
+                className='flex w-full items-center justify-between'
+                onClick={(event) => event.preventDefault()}
+              >
+                <span className='flex items-center gap-1'>
+                  <span>
+                    {field.title}
+                    {field.required && <span className='ml-0.5'>*</span>}
+                  </span>
+                  {field.description && (
+                    <Tooltip.Root>
+                      <Tooltip.Trigger asChild>
+                        <Button
+                          type='button'
+                          variant='ghost'
+                          className='flex size-[14px] cursor-help items-center justify-center p-0 text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-secondary)]'
+                          aria-label={`About ${field.title}`}
+                        >
+                          <Info className='size-[12px]' />
+                        </Button>
+                      </Tooltip.Trigger>
+                      <Tooltip.Content side='top'>{field.description}</Tooltip.Content>
+                    </Tooltip.Root>
+                  )}
+                </span>
+                {hasCanonicalPair && canonicalId && (
+                  <Tooltip.Root>
+                    <Tooltip.Trigger asChild>
+                      <Button
+                        type='button'
+                        variant='ghost'
+                        className='flex size-[18px] items-center justify-center rounded-[3px] p-0 text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-3)] hover-hover:text-[var(--text-secondary)]'
+                        onClick={() => onToggleCanonicalMode(canonicalId)}
+                      >
+                        <ArrowLeftRight className='size-[12px]' />
+                      </Button>
+                    </Tooltip.Trigger>
+                    <Tooltip.Content side='top'>
+                      {field.mode === 'basic' ? 'Switch to manual input' : 'Switch to selector'}
+                    </Tooltip.Content>
+                  </Tooltip.Root>
+                )}
+              </span>
+            }
+          >
+            {field.type === 'selector' && field.selectorKey ? (
+              <ConnectorSelectorField
+                field={field as ConnectorConfigField & { selectorKey: SelectorKey }}
+                value={sourceConfig[field.id] ?? (field.multi ? [] : '')}
+                onChange={(value: ConfigFieldValue) => onFieldChange(field.id, value)}
+                credentialId={credentialId}
+                sourceConfig={sourceConfig}
+                configFields={connectorConfig.configFields}
+                canonicalModes={canonicalModes}
+                disabled={disabled}
+              />
+            ) : field.type === 'dropdown' && field.options ? (
+              <ChipCombobox
+                options={field.options.map((opt) => ({
+                  label: opt.label,
+                  value: opt.id,
+                }))}
+                value={
+                  typeof sourceConfig[field.id] === 'string'
+                    ? (sourceConfig[field.id] as string) || undefined
+                    : undefined
+                }
+                onChange={(value) => onFieldChange(field.id, value)}
+                placeholder={field.placeholder || `Select ${field.title.toLowerCase()}`}
+              />
+            ) : (
+              <ChipInput
+                value={
+                  Array.isArray(sourceConfig[field.id])
+                    ? (sourceConfig[field.id] as string[]).join(', ')
+                    : (sourceConfig[field.id] as string) || ''
+                }
+                onChange={(e) => onFieldChange(field.id, e.target.value)}
+                placeholder={field.placeholder}
+              />
+            )}
+          </ChipModalField>
+        )
+      })}
+    </>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/index.ts b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/index.ts
new file mode 100644
index 00000000000..17b1192f432
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/index.ts
@@ -0,0 +1 @@
+export { ConnectorConfigFields } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
index 5bb2470bb7e..3e2b9fea59b 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
@@ -15,15 +15,7 @@ import {
   Trash,
   XCircle,
 } from 'lucide-react'
-import {
-  Badge,
-  Button,
-  Checkbox,
-  ChipConfirmModal,
-  Loader,
-  Skeleton,
-  Tooltip,
-} from '@/components/emcn'
+import { Badge, Button, Checkbox, ChipConfirmModal, Loader, Tooltip } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { consumeOAuthReturnContext, writeOAuthReturnContext } from '@/lib/credentials/client-state'
 import { getCanonicalScopesForProvider, getProviderIdFromServiceId } from '@/lib/oauth'
@@ -204,22 +196,7 @@ export function ConnectorsSection({
       {error && <p className='mt-2 text-[var(--text-error)] text-caption leading-tight'>{error}</p>}
 
       {isLoading ? (
-        <div className='mt-2 flex flex-col gap-1'>
-          {Array.from({ length: 2 }).map((_, i) => (
-            <div key={i} className='rounded-lg px-2 py-2'>
-              <div className='flex items-center gap-2.5'>
-                <Skeleton className='size-9 flex-shrink-0 rounded-lg' />
-                <div className='flex min-w-0 flex-1 flex-col gap-1'>
-                  <div className='flex items-center gap-2'>
-                    <Skeleton className='h-[14px] w-[100px]' />
-                    <Skeleton className='h-[18px] w-[52px] rounded-full' />
-                  </div>
-                  <Skeleton className='h-[12px] w-[180px]' />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
+        <div className='mt-2' />
       ) : connectors.length === 0 ? (
         <p className='mt-2 text-[var(--text-muted)] text-small'>
           No connected sources yet. Connect an external source to automatically sync documents.
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
index 38df4f7b435..458a7719cba 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
@@ -2,24 +2,23 @@
 
 import { useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowLeftRight, ExternalLink, Info, RotateCcw } from 'lucide-react'
+import { ExternalLink, RotateCcw } from 'lucide-react'
 import {
   Button,
   ButtonGroup,
   ButtonGroupItem,
-  ChipCombobox,
-  ChipInput,
   ChipModal,
   ChipModalBody,
+  ChipModalError,
+  ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
   ChipModalTabs,
-  Label,
   Skeleton,
   Tooltip,
 } from '@/components/emcn'
 import { getSubscriptionAccessState } from '@/lib/billing/client'
-import { ConnectorSelectorField } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field'
+import { ConnectorConfigFields } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields'
 import { SYNC_INTERVALS } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/consts'
 import { MaxBadge } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/max-badge'
 import type {
@@ -38,7 +37,6 @@ import {
   useUpdateConnector,
 } from '@/hooks/queries/kb/connectors'
 import { useSubscriptionData } from '@/hooks/queries/subscription'
-import type { SelectorKey } from '@/hooks/selectors/types'
 
 const logger = createLogger('EditConnectorModal')
 
@@ -281,7 +279,7 @@ export function EditConnectorModal({
         Edit {displayName}
       </ChipModalHeader>
 
-      <ChipModalBody className='pb-3'>
+      <ChipModalBody>
         <ChipModalTabs
           tabs={[
             { value: 'settings', label: 'Settings' },
@@ -289,6 +287,7 @@ export function EditConnectorModal({
           ]}
           value={activeTab}
           onChange={setActiveTab}
+          className='mx-2'
         />
 
         {activeTab === 'settings' ? (
@@ -359,98 +358,22 @@ function SettingsTab({
   error,
 }: SettingsTabProps) {
   return (
-    <div className='flex flex-col gap-3'>
-      {connectorConfig?.configFields.map((field) => {
-        if (!isFieldVisible(field)) return null
-
-        const canonicalId = field.canonicalParamId
-        const hasCanonicalPair =
-          canonicalId && (canonicalGroups.get(canonicalId)?.length ?? 0) === 2
-
-        return (
-          <div key={field.id} className='flex flex-col gap-2'>
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-1'>
-                <Label>
-                  {field.title}
-                  {field.required && <span className='ml-0.5'>*</span>}
-                </Label>
-                {field.description && (
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Button
-                        type='button'
-                        variant='ghost'
-                        className='flex size-[14px] cursor-help items-center justify-center p-0 text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-secondary)]'
-                        aria-label={`About ${field.title}`}
-                      >
-                        <Info className='size-[12px]' />
-                      </Button>
-                    </Tooltip.Trigger>
-                    <Tooltip.Content side='top'>{field.description}</Tooltip.Content>
-                  </Tooltip.Root>
-                )}
-              </div>
-              {hasCanonicalPair && canonicalId && (
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Button
-                      type='button'
-                      variant='ghost'
-                      className='flex size-[18px] items-center justify-center rounded-[3px] p-0 text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-3)] hover-hover:text-[var(--text-secondary)]'
-                      onClick={() => onToggleCanonicalMode(canonicalId)}
-                    >
-                      <ArrowLeftRight className='size-[12px]' />
-                    </Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content side='top'>
-                    {field.mode === 'basic' ? 'Switch to manual input' : 'Switch to selector'}
-                  </Tooltip.Content>
-                </Tooltip.Root>
-              )}
-            </div>
-            {field.type === 'selector' && field.selectorKey ? (
-              <ConnectorSelectorField
-                field={field as ConnectorConfigField & { selectorKey: SelectorKey }}
-                value={sourceConfig[field.id] ?? (field.multi ? [] : '')}
-                onChange={(value: ConfigFieldValue) => onFieldChange(field.id, value)}
-                credentialId={credentialId}
-                sourceConfig={sourceConfig}
-                configFields={connectorConfig.configFields}
-                canonicalModes={canonicalModes}
-                disabled={isSaving}
-              />
-            ) : field.type === 'dropdown' && field.options ? (
-              <ChipCombobox
-                options={field.options.map((opt) => ({
-                  label: opt.label,
-                  value: opt.id,
-                }))}
-                value={
-                  typeof sourceConfig[field.id] === 'string'
-                    ? (sourceConfig[field.id] as string) || undefined
-                    : undefined
-                }
-                onChange={(value) => onFieldChange(field.id, value)}
-                placeholder={field.placeholder || `Select ${field.title.toLowerCase()}`}
-              />
-            ) : (
-              <ChipInput
-                value={
-                  Array.isArray(sourceConfig[field.id])
-                    ? (sourceConfig[field.id] as string[]).join(', ')
-                    : (sourceConfig[field.id] as string) || ''
-                }
-                onChange={(e) => onFieldChange(field.id, e.target.value)}
-                placeholder={field.placeholder}
-              />
-            )}
-          </div>
-        )
-      })}
+    <>
+      {connectorConfig && (
+        <ConnectorConfigFields
+          connectorConfig={connectorConfig}
+          sourceConfig={sourceConfig}
+          credentialId={credentialId}
+          canonicalGroups={canonicalGroups}
+          canonicalModes={canonicalModes}
+          isFieldVisible={isFieldVisible}
+          onFieldChange={onFieldChange}
+          onToggleCanonicalMode={onToggleCanonicalMode}
+          disabled={isSaving}
+        />
+      )}
 
-      <div className='flex flex-col gap-2'>
-        <Label>Sync Frequency</Label>
+      <ChipModalField type='custom' title='Sync Frequency'>
         <ButtonGroup
           value={String(syncInterval)}
           onValueChange={(val) => setSyncInterval(Number(val))}
@@ -466,10 +389,10 @@ function SettingsTab({
             </ButtonGroupItem>
           ))}
         </ButtonGroup>
-      </div>
+      </ChipModalField>
 
-      {error && <p className='text-[var(--text-error)] text-caption leading-tight'>{error}</p>}
-    </div>
+      <ChipModalError>{error}</ChipModalError>
+    </>
   )
 }
 
@@ -497,7 +420,7 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
 
   if (isLoading) {
     return (
-      <div className='flex flex-col gap-2'>
+      <div className='flex flex-col gap-2 px-2'>
         <Skeleton className='h-7 w-[180px] rounded-md' />
         <Skeleton className='h-[30px] w-full rounded-lg' />
         <Skeleton className='h-[30px] w-full rounded-lg' />
@@ -507,7 +430,7 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
   }
 
   return (
-    <div className='flex flex-col gap-3'>
+    <div className='flex flex-col gap-3 px-2'>
       <ButtonGroup value={filter} onValueChange={(val) => setFilter(val as 'active' | 'excluded')}>
         <ButtonGroupItem value='active'>Active ({counts.active})</ButtonGroupItem>
         <ButtonGroupItem value='excluded'>Excluded ({counts.excluded})</ButtonGroupItem>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/loading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/loading.tsx
index 9c4a1f624d5..b1ea25f26b5 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/loading.tsx
@@ -1,69 +1,45 @@
-import { Skeleton } from '@/components/emcn'
+'use client'
 
-const SKELETON_ROW_COUNT = 5
-const COLUMN_COUNT = 7
+import { Plus } from '@/components/emcn'
+import { Database } from '@/components/emcn/icons'
+import {
+  type BreadcrumbItem,
+  type ChromeActionSpec,
+  ResourceChromeFallback,
+} from '@/app/workspace/[workspaceId]/components'
+
+const noop = () => {}
+
+const COLUMNS = [
+  { id: 'name', header: 'Name', widthMultiplier: 0.8 },
+  { id: 'size', header: 'Size', widthMultiplier: 0.75 },
+  { id: 'tokens', header: 'Tokens', widthMultiplier: 0.75 },
+  { id: 'chunks', header: 'Chunks', widthMultiplier: 0.75 },
+  { id: 'uploaded', header: 'Uploaded' },
+  { id: 'status', header: 'Status', widthMultiplier: 0.75 },
+  { id: 'tags', header: 'Tags' },
+]
+
+const ACTIONS: ChromeActionSpec[] = [
+  { text: 'New connector', icon: Plus },
+  { text: 'New documents', icon: Plus, variant: 'primary' },
+]
+
+const BREADCRUMBS: BreadcrumbItem[] = [
+  { label: 'Knowledge Base', icon: Database, onClick: noop },
+  { label: '…', terminal: true },
+]
 
 export default function KnowledgeBaseLoading() {
   return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-[var(--border)] border-b px-[16px] py-[8.5px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[8px]'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[96px] rounded-[4px]' />
-            <Skeleton className='h-[14px] w-[8px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[120px] rounded-[4px]' />
-          </div>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[28px] w-[112px] rounded-[6px]' />
-          </div>
-        </div>
-      </div>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='ml-[10px] h-[14px] w-[140px] rounded-[4px]' />
-          </div>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
-            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
-          </div>
-        </div>
-      </div>
-      <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full'>
-          <thead>
-            <tr className='border-[var(--border)] border-b'>
-              <th className='w-[40px] px-[12px] py-[8px]'>
-                <Skeleton className='size-[14px] rounded-[2px]' />
-              </th>
-              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
-                <th key={i} className='px-[12px] py-[8px] text-left'>
-                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-[var(--border)] border-b'>
-                <td className='w-[40px] px-[12px] py-[10px]'>
-                  <Skeleton className='size-[14px] rounded-[2px]' />
-                </td>
-                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
-                  <td key={colIndex} className='px-[12px] py-[10px]'>
-                    <Skeleton
-                      className='h-[14px] rounded-[4px]'
-                      style={{ width: colIndex === 0 ? '128px' : '80px' }}
-                    />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <ResourceChromeFallback
+      icon={Database}
+      breadcrumbs={BREADCRUMBS}
+      columns={COLUMNS}
+      actions={ACTIONS}
+      searchPlaceholder='Search documents...'
+      hasSort
+      hasFilter
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
index 1cda4ec9917..e1d4c1814ca 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useState } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { RotateCcw, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -21,7 +21,6 @@ import {
   ChipModalHeader,
   ChipTextarea,
   type ComboboxOption,
-  Label,
   Loader,
 } from '@/components/emcn'
 import type { StrategyOptions } from '@/lib/chunkers/types'
@@ -33,10 +32,6 @@ import { useCreateKnowledgeBase, useDeleteKnowledgeBase } from '@/hooks/queries/
 
 const logger = createLogger('CreateBaseModal')
 
-interface FileWithPreview extends File {
-  preview: string
-}
-
 interface CreateBaseModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -132,11 +127,8 @@ export const CreateBaseModal = memo(function CreateBaseModal({
   const deleteKnowledgeBaseMutation = useDeleteKnowledgeBase(workspaceId)
 
   const [submitStatus, setSubmitStatus] = useState<SubmitStatus | null>(null)
-  const [files, setFiles] = useState<FileWithPreview[]>([])
+  const [files, setFiles] = useState<File[]>([])
   const [fileError, setFileError] = useState<string | null>(null)
-  const [retryingIndexes, setRetryingIndexes] = useState<Set<number>>(() => new Set())
-
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
 
   const { uploadFiles, isUploading, uploadProgress, uploadError, clearError } = useKnowledgeUpload({
     workspaceId,
@@ -149,16 +141,6 @@ export const CreateBaseModal = memo(function CreateBaseModal({
     onOpenChange(open)
   }
 
-  useEffect(() => {
-    return () => {
-      files.forEach((file) => {
-        if (file.preview) {
-          URL.revokeObjectURL(file.preview)
-        }
-      })
-    }
-  }, [files])
-
   const {
     register,
     handleSubmit,
@@ -191,7 +173,6 @@ export const CreateBaseModal = memo(function CreateBaseModal({
       setSubmitStatus(null)
       setFileError(null)
       setFiles([])
-      setRetryingIndexes(new Set())
       reset({
         name: '',
         description: '',
@@ -212,7 +193,7 @@ export const CreateBaseModal = memo(function CreateBaseModal({
     if (!selectedFiles || selectedFiles.length === 0) return
 
     try {
-      const newFiles: FileWithPreview[] = []
+      const newFiles: File[] = []
       let hasError = false
 
       for (const file of selectedFiles) {
@@ -223,11 +204,7 @@ export const CreateBaseModal = memo(function CreateBaseModal({
           continue
         }
 
-        const fileWithPreview = Object.assign(file, {
-          preview: URL.createObjectURL(file),
-        }) as FileWithPreview
-
-        newFiles.push(fileWithPreview)
+        newFiles.push(file)
       }
 
       if (!hasError && newFiles.length > 0) {
@@ -240,10 +217,7 @@ export const CreateBaseModal = memo(function CreateBaseModal({
   }
 
   const removeFile = (index: number) => {
-    setFiles((prev) => {
-      URL.revokeObjectURL(prev[index].preview)
-      return prev.filter((_, i) => i !== index)
-    })
+    setFiles((prev) => prev.filter((_, i) => i !== index))
   }
 
   const isSubmitting =
@@ -302,7 +276,6 @@ export const CreateBaseModal = memo(function CreateBaseModal({
         }
       }
 
-      files.forEach((file) => URL.revokeObjectURL(file.preview))
       setFiles([])
 
       handleClose(false)
@@ -321,259 +294,215 @@ export const CreateBaseModal = memo(function CreateBaseModal({
 
       <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
         <button type='submit' hidden disabled={isSubmitting || !nameValue?.trim()} />
-        <ChipModalBody className='max-h-[70vh] overflow-y-auto'>
-          <div ref={scrollContainerRef} className='min-h-0 flex-1'>
-            <div className='space-y-3'>
-              <div className='flex flex-col gap-2'>
-                <Label htmlFor='kb-name'>Name</Label>
-                <input
-                  type='text'
-                  name='fakeusernameremembered'
-                  autoComplete='username'
-                  style={{
-                    position: 'absolute',
-                    left: '-9999px',
-                    opacity: 0,
-                    pointerEvents: 'none',
-                  }}
-                  tabIndex={-1}
-                  readOnly
-                />
-                <ChipInput
-                  id='kb-name'
-                  placeholder='Enter knowledge base name'
-                  {...register('name')}
-                  error={Boolean(errors.name)}
-                  autoComplete='off'
-                  autoCorrect='off'
-                  autoCapitalize='off'
-                  data-lpignore='true'
-                  data-form-type='other'
-                />
-              </div>
-
-              <div className='flex flex-col gap-2'>
-                <Label htmlFor='description'>Description</Label>
-                <ChipTextarea
-                  id='description'
-                  placeholder='Describe this knowledge base (optional)'
-                  rows={4}
-                  {...register('description')}
-                  error={Boolean(errors.description)}
-                />
-              </div>
-
-              <div className='grid grid-cols-2 gap-3'>
-                <div className='flex flex-col gap-2'>
-                  <Label htmlFor='minChunkSize'>Min Chunk Size (characters)</Label>
-                  <ChipInput
-                    id='minChunkSize'
-                    type='number'
-                    min={1}
-                    max={2000}
-                    step={1}
-                    placeholder='100'
-                    {...register('minChunkSize', { valueAsNumber: true })}
-                    error={Boolean(errors.minChunkSize)}
-                    autoComplete='off'
-                    data-form-type='other'
-                  />
-                </div>
-
-                <div className='flex flex-col gap-2'>
-                  <Label htmlFor='maxChunkSize'>Max Chunk Size (tokens)</Label>
-                  <ChipInput
-                    id='maxChunkSize'
-                    type='number'
-                    min={100}
-                    max={4000}
-                    step={1}
-                    placeholder='1024'
-                    {...register('maxChunkSize', { valueAsNumber: true })}
-                    error={Boolean(errors.maxChunkSize)}
-                    autoComplete='off'
-                    data-form-type='other'
-                  />
-                </div>
-              </div>
+        <ChipModalBody>
+          <input
+            type='text'
+            name='fakeusernameremembered'
+            autoComplete='username'
+            className='-left-[9999px] pointer-events-none absolute opacity-0'
+            tabIndex={-1}
+            readOnly
+          />
+
+          <ChipModalField type='custom' title='Name'>
+            <ChipInput
+              placeholder='Enter knowledge base name'
+              {...register('name')}
+              error={Boolean(errors.name)}
+              autoComplete='off'
+              autoCorrect='off'
+              autoCapitalize='off'
+              data-lpignore='true'
+              data-form-type='other'
+            />
+          </ChipModalField>
+
+          <ChipModalField type='custom' title='Description'>
+            <ChipTextarea
+              placeholder='Describe this knowledge base (optional)'
+              rows={4}
+              {...register('description')}
+              error={Boolean(errors.description)}
+            />
+          </ChipModalField>
+
+          <div className='flex gap-3'>
+            <ChipModalField type='custom' title='Min Chunk Size (characters)' className='flex-1'>
+              <ChipInput
+                type='number'
+                min={1}
+                max={2000}
+                step={1}
+                placeholder='100'
+                {...register('minChunkSize', { valueAsNumber: true })}
+                error={Boolean(errors.minChunkSize)}
+                autoComplete='off'
+                data-form-type='other'
+              />
+            </ChipModalField>
+
+            <ChipModalField type='custom' title='Max Chunk Size (tokens)' className='flex-1'>
+              <ChipInput
+                type='number'
+                min={100}
+                max={4000}
+                step={1}
+                placeholder='1024'
+                {...register('maxChunkSize', { valueAsNumber: true })}
+                error={Boolean(errors.maxChunkSize)}
+                autoComplete='off'
+                data-form-type='other'
+              />
+            </ChipModalField>
+          </div>
 
-              <div className='flex flex-col gap-2'>
-                <Label htmlFor='overlapSize'>Overlap (tokens)</Label>
+          <ChipModalField
+            type='custom'
+            title='Overlap (tokens)'
+            hint='1 token ≈ 4 characters. Max chunk size and overlap are in tokens.'
+          >
+            <ChipInput
+              type='number'
+              min={0}
+              max={500}
+              step={1}
+              placeholder='200'
+              {...register('overlapSize', { valueAsNumber: true })}
+              error={Boolean(errors.overlapSize)}
+              autoComplete='off'
+              data-form-type='other'
+            />
+          </ChipModalField>
+
+          <ChipModalField
+            type='custom'
+            title='Chunking Strategy'
+            hint='Auto detects the best strategy based on file content type.'
+          >
+            <ChipCombobox
+              options={STRATEGY_COMBOBOX_OPTIONS}
+              value={strategyValue}
+              onChange={(value) => setValue('strategy', value as FormValues['strategy'])}
+              dropdownWidth='trigger'
+              align='start'
+            />
+          </ChipModalField>
+
+          {strategyValue === 'regex' && (
+            <>
+              <ChipModalField
+                type='custom'
+                title='Regex Pattern'
+                error={errors.regexPattern?.message}
+                hint='Text will be split at each match of this regex pattern.'
+              >
                 <ChipInput
-                  id='overlapSize'
-                  type='number'
-                  min={0}
-                  max={500}
-                  step={1}
-                  placeholder='200'
-                  {...register('overlapSize', { valueAsNumber: true })}
-                  error={Boolean(errors.overlapSize)}
+                  placeholder='e.g. \\n\\n or (?<=\\})\\s*(?=\\{)'
+                  {...register('regexPattern')}
+                  error={Boolean(errors.regexPattern)}
                   autoComplete='off'
                   data-form-type='other'
                 />
-                <p className='text-[var(--text-muted)] text-xs'>
-                  1 token ≈ 4 characters. Max chunk size and overlap are in tokens.
-                </p>
-              </div>
+              </ChipModalField>
 
-              <div className='flex flex-col gap-2'>
-                <Label>Chunking Strategy</Label>
-                <ChipCombobox
-                  options={STRATEGY_COMBOBOX_OPTIONS}
-                  value={strategyValue}
-                  onChange={(value) => setValue('strategy', value as FormValues['strategy'])}
-                  dropdownWidth='trigger'
-                  align='start'
-                />
-                <p className='text-[var(--text-muted)] text-xs'>
-                  Auto detects the best strategy based on file content type.
-                </p>
-              </div>
-
-              {strategyValue === 'regex' && (
-                <div className='flex flex-col gap-2'>
-                  <Label htmlFor='regexPattern'>Regex Pattern</Label>
-                  <ChipInput
-                    id='regexPattern'
-                    placeholder='e.g. \\n\\n or (?<=\\})\\s*(?=\\{)'
-                    {...register('regexPattern')}
-                    error={Boolean(errors.regexPattern)}
-                    autoComplete='off'
-                    data-form-type='other'
+              <ChipModalField
+                type='custom'
+                title='Chunk Boundaries'
+                hint='Preserve boundaries exactly. Recommended when each match is a discrete record (e.g. one QA pair per chunk).'
+              >
+                <label
+                  htmlFor='regexStrictBoundaries'
+                  className='flex cursor-pointer items-center gap-2'
+                >
+                  <Checkbox
+                    id='regexStrictBoundaries'
+                    checked={regexStrictBoundariesValue}
+                    onCheckedChange={(checked) =>
+                      setValue('regexStrictBoundaries', checked === true)
+                    }
                   />
-                  {errors.regexPattern && (
-                    <p className='text-[var(--text-error)] text-xs'>
-                      {errors.regexPattern.message}
-                    </p>
-                  )}
-                  <p className='text-[var(--text-muted)] text-xs'>
-                    Text will be split at each match of this regex pattern.
-                  </p>
-                  <label
-                    htmlFor='regexStrictBoundaries'
-                    className='mt-1 flex cursor-pointer items-start gap-2'
-                  >
-                    <Checkbox
-                      id='regexStrictBoundaries'
-                      checked={regexStrictBoundariesValue}
-                      onCheckedChange={(checked) =>
-                        setValue('regexStrictBoundaries', checked === true)
-                      }
-                      className='mt-0.5'
-                    />
-                    <div className='flex flex-col gap-0.5'>
-                      <span className='text-[var(--text-primary)] text-sm'>
-                        Each match is its own chunk (don&apos;t merge)
+                  <span className='text-[var(--text-primary)] text-sm'>
+                    Each match is its own chunk (don&apos;t merge)
+                  </span>
+                </label>
+              </ChipModalField>
+            </>
+          )}
+
+          {strategyValue === 'recursive' && (
+            <ChipModalField
+              type='custom'
+              title='Custom Separators (optional)'
+              hint='Comma-separated list of delimiters in priority order. Leave empty for default separators.'
+            >
+              <ChipInput
+                placeholder='e.g. \n\n, \n, . ,  '
+                {...register('customSeparators')}
+                autoComplete='off'
+                data-form-type='other'
+              />
+            </ChipModalField>
+          )}
+
+          <ChipModalField
+            type='file'
+            title='Upload Documents'
+            accept={ACCEPT_ATTRIBUTE}
+            multiple
+            onChange={processFiles}
+            description='PDF, DOC, DOCX, TXT, CSV, XLS, XLSX, MD, PPT, PPTX, HTML, JSONL (max 100MB each)'
+            error={fileError}
+          />
+
+          {files.length > 0 && (
+            <ChipModalField type='custom' title='Selected Files'>
+              <div className='space-y-2'>
+                {files.map((file, index) => {
+                  const fileStatus = uploadProgress.fileStatuses?.[index]
+                  const isFailed = fileStatus?.status === 'failed'
+                  const isProcessing = fileStatus?.status === 'uploading'
+
+                  return (
+                    <div
+                      key={`${file.name}-${file.size}`}
+                      className={cn(
+                        'flex items-center gap-2 rounded-sm border p-2',
+                        isFailed && 'border-[var(--text-error)]'
+                      )}
+                    >
+                      <span
+                        className={cn(
+                          'min-w-0 flex-1 truncate text-caption',
+                          isFailed && 'text-[var(--text-error)]'
+                        )}
+                        title={file.name}
+                      >
+                        {file.name}
                       </span>
-                      <span className='text-[var(--text-muted)] text-xs'>
-                        Preserve boundaries exactly. Recommended when each match is a discrete
-                        record (e.g. one QA pair per chunk).
+                      <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
+                        {formatFileSize(file.size)}
                       </span>
-                    </div>
-                  </label>
-                </div>
-              )}
-
-              {strategyValue === 'recursive' && (
-                <div className='flex flex-col gap-2'>
-                  <Label htmlFor='customSeparators'>Custom Separators (optional)</Label>
-                  <ChipInput
-                    id='customSeparators'
-                    placeholder='e.g. \n\n, \n, . ,  '
-                    {...register('customSeparators')}
-                    autoComplete='off'
-                    data-form-type='other'
-                  />
-                  <p className='text-[var(--text-muted)] text-xs'>
-                    Comma-separated list of delimiters in priority order. Leave empty for default
-                    separators.
-                  </p>
-                </div>
-              )}
-
-              <ChipModalField
-                type='file'
-                title='Upload Documents'
-                accept={ACCEPT_ATTRIBUTE}
-                multiple
-                onChange={processFiles}
-                description='PDF, DOC, DOCX, TXT, CSV, XLS, XLSX, MD, PPT, PPTX, HTML, JSONL (max 100MB each)'
-                flush
-              />
-
-              {files.length > 0 && (
-                <div className='space-y-2'>
-                  <Label>Selected Files</Label>
-                  <div className='space-y-2'>
-                    {files.map((file, index) => {
-                      const fileStatus = uploadProgress.fileStatuses?.[index]
-                      const isFailed = fileStatus?.status === 'failed'
-                      const isRetrying = retryingIndexes.has(index)
-                      const isProcessing = fileStatus?.status === 'uploading' || isRetrying
-
-                      return (
-                        <div
-                          key={`${file.name}-${file.size}`}
-                          className={cn(
-                            'flex items-center gap-2 rounded-sm border p-2',
-                            isFailed && !isRetrying && 'border-[var(--text-error)]'
-                          )}
-                        >
-                          <span
-                            className={cn(
-                              'min-w-0 flex-1 truncate text-caption',
-                              isFailed && !isRetrying && 'text-[var(--text-error)]'
-                            )}
-                            title={file.name}
+                      <div className='flex flex-shrink-0 items-center gap-1'>
+                        {isProcessing ? (
+                          <Loader className='size-4 text-[var(--text-muted)]' animate />
+                        ) : (
+                          <Button
+                            type='button'
+                            variant='ghost'
+                            className='size-4 p-0'
+                            onClick={() => removeFile(index)}
+                            disabled={isUploading}
                           >
-                            {file.name}
-                          </span>
-                          <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
-                            {formatFileSize(file.size)}
-                          </span>
-                          <div className='flex flex-shrink-0 items-center gap-1'>
-                            {isProcessing ? (
-                              <Loader className='size-4 text-[var(--text-muted)]' animate />
-                            ) : (
-                              <>
-                                {isFailed && (
-                                  <Button
-                                    type='button'
-                                    variant='ghost'
-                                    className='size-4 p-0'
-                                    onClick={() => {
-                                      setRetryingIndexes((prev) => new Set(prev).add(index))
-                                      removeFile(index)
-                                    }}
-                                    disabled={isUploading}
-                                  >
-                                    <RotateCcw className='size-3' />
-                                  </Button>
-                                )}
-                                <Button
-                                  type='button'
-                                  variant='ghost'
-                                  className='size-4 p-0'
-                                  onClick={() => removeFile(index)}
-                                  disabled={isUploading}
-                                >
-                                  <X className='size-3.5' />
-                                </Button>
-                              </>
-                            )}
-                          </div>
-                        </div>
-                      )
-                    })}
-                  </div>
-                </div>
-              )}
-
-              {fileError && (
-                <p className='text-[var(--text-error)] text-caption leading-tight'>{fileError}</p>
-              )}
-            </div>
-          </div>
+                            <X className='size-3.5' />
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </ChipModalField>
+          )}
 
           <ChipModalError>{uploadError?.message || submitStatus?.message}</ChipModalError>
         </ChipModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
index 41b1e3a192e..6bc272ffddc 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
@@ -4,12 +4,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams, useRouter } from 'next/navigation'
 import type { ChipDropdownOption } from '@/components/emcn'
-import { Button, ChipDropdown, Tooltip } from '@/components/emcn'
+import { Button, ChipDropdown, Plus, Tooltip } from '@/components/emcn'
 import { Database } from '@/components/emcn/icons'
 import type { KnowledgeBaseData } from '@/lib/knowledge/types'
 import type {
-  CreateAction,
   FilterTag,
+  ResourceAction,
   ResourceCell,
   ResourceColumn,
   ResourceRow,
@@ -386,12 +386,16 @@ export function Knowledge() {
 
   const canEdit = userPermissions.canEdit === true
 
-  const createAction: CreateAction = useMemo(
-    () => ({
-      label: 'New base',
-      onClick: handleOpenCreateModal,
-      disabled: !canEdit,
-    }),
+  const headerActions: ResourceAction[] = useMemo(
+    () => [
+      {
+        text: 'New base',
+        icon: Plus,
+        onSelect: handleOpenCreateModal,
+        disabled: !canEdit,
+        variant: 'primary',
+      },
+    ],
     [handleOpenCreateModal, canEdit]
   )
 
@@ -552,21 +556,23 @@ export function Knowledge() {
 
   return (
     <>
-      <Resource
-        icon={Database}
-        title='Knowledge Base'
-        create={createAction}
-        search={searchConfig}
-        sort={sortConfig}
-        filter={filterContent}
-        filterTags={filterTags}
-        columns={COLUMNS}
-        rows={rows}
-        onRowClick={handleRowClick}
-        onRowContextMenu={handleRowContextMenu}
-        isLoading={isLoading}
-        onContextMenu={handleContentContextMenu}
-      />
+      <Resource onContextMenu={handleContentContextMenu}>
+        <Resource.Header icon={Database} title='Knowledge Base' actions={headerActions} />
+        <Resource.Options
+          search={searchConfig}
+          sort={sortConfig}
+          filterTags={filterTags}
+          filter={{ content: filterContent }}
+        />
+        <Resource.Table
+          columns={COLUMNS}
+          rows={rows}
+          sort={sortConfig}
+          onRowClick={handleRowClick}
+          onRowContextMenu={handleRowContextMenu}
+          isLoading={isLoading}
+        />
+      </Resource>
 
       <KnowledgeListContextMenu
         isOpen={isListContextMenuOpen}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx
index 911fe03c6e5..aba09ccb463 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx
@@ -1,63 +1,34 @@
-import { Skeleton } from '@/components/emcn'
+'use client'
 
-const SKELETON_ROW_COUNT = 5
-const COLUMN_COUNT = 7
+import { Plus } from '@/components/emcn'
+import { Database } from '@/components/emcn/icons'
+import {
+  type ChromeActionSpec,
+  ResourceChromeFallback,
+} from '@/app/workspace/[workspaceId]/components'
 
-export default function KnowledgeLoading() {
-  return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[96px] rounded-[4px]' />
-          </div>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[28px] w-[80px] rounded-[6px]' />
-          </div>
-        </div>
-      </div>
+const COLUMNS = [
+  { id: 'name', header: 'Name' },
+  { id: 'documents', header: 'Documents', widthMultiplier: 0.6 },
+  { id: 'tokens', header: 'Tokens', widthMultiplier: 0.6 },
+  { id: 'connectors', header: 'Connectors', widthMultiplier: 0.7 },
+  { id: 'created', header: 'Created' },
+  { id: 'owner', header: 'Owner' },
+  { id: 'updated', header: 'Last Updated' },
+]
 
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center'>
-          <Skeleton className='size-[14px] rounded-[2px]' />
-          <Skeleton className='ml-[10px] h-[14px] w-[160px] rounded-[4px]' />
-        </div>
-      </div>
+const ACTIONS: ChromeActionSpec[] = [{ text: 'New base', icon: Plus, variant: 'primary' }]
 
-      <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full'>
-          <thead>
-            <tr className='border-[var(--border)] border-b'>
-              <th className='w-[40px] px-[12px] py-[8px]'>
-                <Skeleton className='size-[14px] rounded-[2px]' />
-              </th>
-              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
-                <th key={i} className='px-[12px] py-[8px] text-left'>
-                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-[var(--border)] border-b'>
-                <td className='w-[40px] px-[12px] py-[10px]'>
-                  <Skeleton className='size-[14px] rounded-[2px]' />
-                </td>
-                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
-                  <td key={colIndex} className='px-[12px] py-[10px]'>
-                    <Skeleton
-                      className='h-[14px] rounded-[4px]'
-                      style={{ width: colIndex === 0 ? '128px' : '80px' }}
-                    />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+export default function KnowledgeLoading() {
+  return (
+    <ResourceChromeFallback
+      icon={Database}
+      title='Knowledge Base'
+      columns={COLUMNS}
+      actions={ACTIONS}
+      searchPlaceholder='Search knowledge bases...'
+      hasSort
+      hasFilter
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
index fcb7db1237e..3ecaa4c2251 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
@@ -3,7 +3,7 @@
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { useParams } from 'next/navigation'
 import { useShallow } from 'zustand/react/shallow'
-import { Loader, Skeleton } from '@/components/emcn'
+import { Loader } from '@/components/emcn'
 import { formatLatency } from '@/app/workspace/[workspaceId]/logs/utils'
 import type { DashboardStatsResponse, WorkflowStats } from '@/hooks/queries/logs'
 import { useWorkflows } from '@/hooks/queries/workflows'
@@ -27,93 +27,8 @@ interface WorkflowExecution {
   overallSuccessRate: number
 }
 
-const SKELETON_BAR_HEIGHTS = [
-  45, 72, 38, 85, 52, 68, 30, 90, 55, 42, 78, 35, 88, 48, 65, 28, 82, 58, 40, 75, 32, 95, 50, 70,
-]
-
-function GraphCardSkeleton({ title }: { title: string }) {
-  return (
-    <div className='flex flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
-      <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
-        <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
-          {title}
-        </span>
-        <Skeleton className='h-[20px] w-[40px]' />
-      </div>
-      <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
-        <div className='flex h-[166px] flex-col justify-end gap-1'>
-          <div className='flex items-end gap-0.5'>
-            {SKELETON_BAR_HEIGHTS.map((height, i) => (
-              <Skeleton
-                key={i}
-                className='flex-1'
-                style={{
-                  height: `${height}%`,
-                }}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function WorkflowRowSkeleton() {
-  return (
-    <div className='flex h-[44px] items-center gap-4 px-6'>
-      <div className='flex w-[160px] flex-shrink-0 items-center gap-2 pr-2'>
-        <Skeleton className='size-[10px] flex-shrink-0 rounded-[3px]' />
-        <Skeleton className='h-[16px] flex-1' />
-      </div>
-      <div className='flex-1'>
-        <Skeleton className='h-[24px] w-full rounded-sm' />
-      </div>
-      <div className='w-[100px] flex-shrink-0 pl-4'>
-        <Skeleton className='h-[16px] w-[50px]' />
-      </div>
-    </div>
-  )
-}
-
-function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) {
-  return (
-    <div className='flex h-full flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
-      <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-6 py-2.5 dark:bg-[var(--surface-3)]'>
-        <div className='flex items-center gap-4'>
-          <span className='w-[160px] flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
-            Workflow
-          </span>
-          <span className='flex-1 font-medium text-[var(--text-tertiary)] text-caption'>Logs</span>
-          <span className='w-[100px] flex-shrink-0 pl-4 font-medium text-[var(--text-tertiary)] text-caption'>
-            Success Rate
-          </span>
-        </div>
-      </div>
-      <div className='min-h-0 flex-1 overflow-y-auto overflow-x-hidden'>
-        {Array.from({ length: rowCount }).map((_, i) => (
-          <WorkflowRowSkeleton key={i} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function DashboardSkeleton() {
-  return (
-    <div className='mt-6 flex min-h-0 flex-1 flex-col pb-6'>
-      <div className='mb-4 flex-shrink-0'>
-        <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
-          <GraphCardSkeleton title='Runs' />
-          <GraphCardSkeleton title='Errors' />
-          <GraphCardSkeleton title='Latency' />
-        </div>
-      </div>
-      <div className='min-h-0 flex-1 overflow-hidden'>
-        <WorkflowsListSkeleton rowCount={14} />
-      </div>
-    </div>
-  )
+function DashboardFallback() {
+  return <div className='mt-6 flex min-h-0 flex-1 flex-col bg-[var(--bg)] pb-6' />
 }
 
 interface DashboardProps {
@@ -449,7 +364,7 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
   }
 
   if (isLoading) {
-    return <DashboardSkeleton />
+    return <DashboardFallback />
   }
 
   if (error) {
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
index 0ecfcd77fd3..4e65092dd69 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
@@ -10,16 +10,14 @@ import {
   Button,
   ChipCombobox,
   ChipConfirmModal,
+  ChipInput,
   ChipModal,
   ChipModalBody,
+  ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
   ChipModalTabs,
-  Input as EmcnInput,
-  Label,
   Skeleton,
-  TagInput,
-  type TagItem,
 } from '@/components/emcn'
 import { SlackIcon } from '@/components/icons'
 import type {
@@ -29,7 +27,6 @@ import type {
 } from '@/lib/api/contracts/notifications'
 import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { getTriggerOptions } from '@/lib/logs/get-trigger-options'
-import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import {
   type NotificationSubscription,
   useCreateNotification,
@@ -201,8 +198,6 @@ export const NotificationSettings = memo(function NotificationSettings({
     errorCountThreshold: 10,
   })
 
-  const [emailItems, setEmailItems] = useState<TagItem[]>([])
-
   const [formErrors, setFormErrors] = useState<Record<string, string>>({})
 
   const { data: subscriptions = [], isLoading } = useNotifications(open ? workspaceId : undefined)
@@ -267,7 +262,6 @@ export const NotificationSettings = memo(function NotificationSettings({
     })
     setFormErrors({})
     setEditingId(null)
-    setEmailItems([])
   }, [])
 
   const handleClose = useCallback(() => {
@@ -277,45 +271,10 @@ export const NotificationSettings = memo(function NotificationSettings({
     onOpenChange(false)
   }, [onOpenChange, resetForm])
 
-  const addEmail = useCallback(
-    (email: string): boolean => {
-      if (!email.trim()) return false
-
-      const normalized = email.trim().toLowerCase()
-      const validation = quickValidateEmail(normalized)
-
-      if (emailItems.some((item) => item.value === normalized)) {
-        return false
-      }
-
-      setEmailItems((prev) => [...prev, { value: normalized, isValid: validation.isValid }])
-
-      if (validation.isValid) {
-        setFormErrors((prev) => ({ ...prev, emailRecipients: '' }))
-        setFormData((prev) => ({
-          ...prev,
-          emailRecipients: [...prev.emailRecipients, normalized],
-        }))
-      }
-
-      return validation.isValid
-    },
-    [emailItems]
-  )
-
-  const handleRemoveEmailItem = useCallback(
-    (_value: string, index: number, isValid: boolean) => {
-      const itemToRemove = emailItems[index]
-      setEmailItems((prev) => prev.filter((_, i) => i !== index))
-      if (isValid && itemToRemove) {
-        setFormData((prev) => ({
-          ...prev,
-          emailRecipients: prev.emailRecipients.filter((e) => e !== itemToRemove.value),
-        }))
-      }
-    },
-    [emailItems]
-  )
+  const handleEmailRecipientsChange = useCallback((next: string[]) => {
+    setFormData((prev) => ({ ...prev, emailRecipients: next }))
+    setFormErrors((prev) => ({ ...prev, emailRecipients: '' }))
+  }, [])
 
   const validateForm = (): boolean => {
     const errors: Record<string, string> = {}
@@ -353,12 +312,6 @@ export const NotificationSettings = memo(function NotificationSettings({
       } else if (formData.emailRecipients.length > 10) {
         errors.emailRecipients = 'Maximum 10 email recipients allowed'
       }
-      const invalidEmailValues = emailItems
-        .filter((item) => !item.isValid)
-        .map((item) => item.value)
-      if (invalidEmailValues.length > 0) {
-        errors.emailRecipients = `Invalid email addresses: ${invalidEmailValues.join(', ')}`
-      }
     }
 
     if (activeTab === 'slack') {
@@ -546,9 +499,6 @@ export const NotificationSettings = memo(function NotificationSettings({
       inactivityHours: subscription.alertConfig?.inactivityHours || 24,
       errorCountThreshold: subscription.alertConfig?.errorCountThreshold || 10,
     })
-    setEmailItems(
-      (subscription.emailRecipients || []).map((email) => ({ value: email, isValid: true }))
-    )
     setShowForm(true)
   }
 
@@ -673,57 +623,53 @@ export const NotificationSettings = memo(function NotificationSettings({
 
           {activeTab === 'webhook' && (
             <>
-              <div className='flex flex-col gap-2'>
-                <Label>Webhook URL</Label>
-                <EmcnInput
-                  type='url'
-                  placeholder='https://your-app.com/webhook'
-                  autoComplete='off'
-                  value={formData.webhookUrl}
-                  onChange={(e) => {
-                    setFormData({ ...formData, webhookUrl: e.target.value })
-                    setFormErrors({ ...formErrors, webhookUrl: '' })
-                  }}
-                />
-                {formErrors.webhookUrl && (
-                  <p className='text-[var(--text-error)] text-caption'>{formErrors.webhookUrl}</p>
-                )}
-              </div>
-              <div className='flex flex-col gap-2'>
-                <Label>Secret (optional)</Label>
-                <EmcnInput
-                  type='password'
-                  placeholder='Webhook secret for signature verification'
-                  autoComplete='new-password'
-                  value={formData.webhookSecret}
-                  onChange={(e) => setFormData({ ...formData, webhookSecret: e.target.value })}
-                />
-              </div>
+              <ChipModalField
+                flush
+                type='input'
+                inputType='url'
+                title='Webhook URL'
+                placeholder='https://your-app.com/webhook'
+                autoComplete='off'
+                value={formData.webhookUrl}
+                onChange={(value) => {
+                  setFormData({ ...formData, webhookUrl: value })
+                  setFormErrors({ ...formErrors, webhookUrl: '' })
+                }}
+                error={formErrors.webhookUrl}
+              />
+              <ChipModalField
+                flush
+                type='input'
+                inputType='password'
+                title='Secret (optional)'
+                placeholder='Webhook secret for signature verification'
+                autoComplete='new-password'
+                value={formData.webhookSecret}
+                onChange={(value) => setFormData({ ...formData, webhookSecret: value })}
+              />
             </>
           )}
 
           {activeTab === 'email' && (
-            <div className='flex flex-col gap-2'>
-              <Label>Email Recipients</Label>
-              <TagInput
-                items={emailItems}
-                onAdd={(value) => addEmail(value)}
-                onRemove={handleRemoveEmailItem}
-                placeholder='Enter emails'
-                placeholderWithTags='Add email'
-              />
-              {formErrors.emailRecipients && (
-                <p className='text-[var(--text-error)] text-caption'>
-                  {formErrors.emailRecipients}
-                </p>
-              )}
-            </div>
+            <ChipModalField
+              flush
+              type='emails'
+              title='Email Recipients'
+              placeholder='Enter emails'
+              value={formData.emailRecipients}
+              onChange={handleEmailRecipientsChange}
+              error={formErrors.emailRecipients}
+            />
           )}
 
           {activeTab === 'slack' && (
             <>
-              <div className='flex flex-col gap-2'>
-                <Label>Slack Account</Label>
+              <ChipModalField
+                flush
+                type='custom'
+                title='Slack Account'
+                error={formErrors.slackAccountId}
+              >
                 {isLoadingSlackAccounts ? (
                   <Skeleton className='h-[34px] w-full rounded-md' />
                 ) : slackAccounts.length === 0 ? (
@@ -761,15 +707,9 @@ export const NotificationSettings = memo(function NotificationSettings({
                     placeholder='Select account...'
                   />
                 )}
-                {formErrors.slackAccountId && (
-                  <p className='text-[var(--text-error)] text-caption'>
-                    {formErrors.slackAccountId}
-                  </p>
-                )}
-              </div>
+              </ChipModalField>
               {slackAccounts.length > 0 && (
-                <div className='flex flex-col gap-2'>
-                  <Label>Channel</Label>
+                <ChipModalField flush type='custom' title='Channel'>
                   <SlackChannelSelector
                     accountId={formData.slackAccountId}
                     value={formData.slackChannelId}
@@ -784,13 +724,17 @@ export const NotificationSettings = memo(function NotificationSettings({
                     disabled={!formData.slackAccountId}
                     error={formErrors.slackChannelId}
                   />
-                </div>
+                </ChipModalField>
               )}
             </>
           )}
 
-          <div className='flex flex-col gap-2'>
-            <Label>Log Level Filters</Label>
+          <ChipModalField
+            flush
+            type='custom'
+            title='Log Level Filters'
+            error={formErrors.levelFilter}
+          >
             <ChipCombobox
               options={LOG_LEVELS.map((level) => ({
                 label: level.charAt(0).toUpperCase() + level.slice(1),
@@ -830,13 +774,14 @@ export const NotificationSettings = memo(function NotificationSettings({
               showAllOption
               allOptionLabel='All levels'
             />
-            {formErrors.levelFilter && (
-              <p className='text-[var(--text-error)] text-caption'>{formErrors.levelFilter}</p>
-            )}
-          </div>
-
-          <div className='flex flex-col gap-2'>
-            <Label>Trigger Type Filters</Label>
+          </ChipModalField>
+
+          <ChipModalField
+            flush
+            type='custom'
+            title='Trigger Type Filters'
+            error={formErrors.triggerFilter}
+          >
             <ChipCombobox
               options={TRIGGER_OPTIONS.map((t) => ({
                 label: t.label,
@@ -881,13 +826,9 @@ export const NotificationSettings = memo(function NotificationSettings({
               showAllOption
               allOptionLabel='All triggers'
             />
-            {formErrors.triggerFilter && (
-              <p className='text-[var(--text-error)] text-caption'>{formErrors.triggerFilter}</p>
-            )}
-          </div>
+          </ChipModalField>
 
-          <div className='flex flex-col gap-2'>
-            <Label>Include in Payload</Label>
+          <ChipModalField flush type='custom' title='Include in Payload'>
             <ChipCombobox
               options={[
                 { label: 'Final Output', value: 'includeFinalOutput' },
@@ -961,10 +902,14 @@ export const NotificationSettings = memo(function NotificationSettings({
               showAllOption
               allOptionLabel='None'
             />
-          </div>
-
-          <div className='flex flex-col gap-2'>
-            <Label>Rule</Label>
+          </ChipModalField>
+
+          <ChipModalField
+            flush
+            type='custom'
+            title='Rule'
+            hint={ALERT_RULES.find((r) => r.value === formData.alertRule)?.description}
+          >
             <ChipCombobox
               options={ALERT_RULES.map((rule) => ({
                 value: rule.value,
@@ -974,18 +919,20 @@ export const NotificationSettings = memo(function NotificationSettings({
               onChange={(value) => setFormData({ ...formData, alertRule: value as AlertRule })}
               placeholder='Select rule'
             />
-            <p className='text-[var(--text-muted)] text-caption'>
-              {ALERT_RULES.find((r) => r.value === formData.alertRule)?.description}
-            </p>
-          </div>
+          </ChipModalField>
 
           {formData.alertRule === 'consecutive_failures' && (
-            <div className='flex flex-col gap-2'>
-              <Label>Failure Count</Label>
-              <EmcnInput
+            <ChipModalField
+              flush
+              type='custom'
+              title='Failure Count'
+              error={formErrors.consecutiveFailures}
+            >
+              <ChipInput
                 type='number'
                 min={1}
                 max={100}
+                error={Boolean(formErrors.consecutiveFailures)}
                 value={formData.consecutiveFailures}
                 onChange={(e) =>
                   setFormData({
@@ -994,22 +941,23 @@ export const NotificationSettings = memo(function NotificationSettings({
                   })
                 }
               />
-              {formErrors.consecutiveFailures && (
-                <p className='text-[var(--text-error)] text-caption'>
-                  {formErrors.consecutiveFailures}
-                </p>
-              )}
-            </div>
+            </ChipModalField>
           )}
 
           {formData.alertRule === 'failure_rate' && (
-            <div className='flex gap-2'>
-              <div className='flex flex-1 flex-col gap-2'>
-                <Label>Failure Rate (%)</Label>
-                <EmcnInput
+            <div className='flex gap-4'>
+              <ChipModalField
+                flush
+                type='custom'
+                title='Failure Rate (%)'
+                error={formErrors.failureRatePercent}
+                className='flex-1'
+              >
+                <ChipInput
                   type='number'
                   min={1}
                   max={100}
+                  error={Boolean(formErrors.failureRatePercent)}
                   value={formData.failureRatePercent}
                   onChange={(e) =>
                     setFormData({
@@ -1018,18 +966,19 @@ export const NotificationSettings = memo(function NotificationSettings({
                     })
                   }
                 />
-                {formErrors.failureRatePercent && (
-                  <p className='text-[var(--text-error)] text-caption'>
-                    {formErrors.failureRatePercent}
-                  </p>
-                )}
-              </div>
-              <div className='flex flex-1 flex-col gap-2'>
-                <Label>Window (hours)</Label>
-                <EmcnInput
+              </ChipModalField>
+              <ChipModalField
+                flush
+                type='custom'
+                title='Window (hours)'
+                error={formErrors.windowHours}
+                className='flex-1'
+              >
+                <ChipInput
                   type='number'
                   min={1}
                   max={168}
+                  error={Boolean(formErrors.windowHours)}
                   value={formData.windowHours}
                   onChange={(e) =>
                     setFormData({
@@ -1038,20 +987,22 @@ export const NotificationSettings = memo(function NotificationSettings({
                     })
                   }
                 />
-                {formErrors.windowHours && (
-                  <p className='text-[var(--text-error)] text-caption'>{formErrors.windowHours}</p>
-                )}
-              </div>
+              </ChipModalField>
             </div>
           )}
 
           {formData.alertRule === 'latency_threshold' && (
-            <div className='flex flex-col gap-2'>
-              <Label>Duration Threshold (seconds)</Label>
-              <EmcnInput
+            <ChipModalField
+              flush
+              type='custom'
+              title='Duration Threshold (seconds)'
+              error={formErrors.durationThresholdMs}
+            >
+              <ChipInput
                 type='number'
                 min={1}
                 max={3600}
+                error={Boolean(formErrors.durationThresholdMs)}
                 value={Math.round(formData.durationThresholdMs / 1000)}
                 onChange={(e) =>
                   setFormData({
@@ -1060,22 +1011,23 @@ export const NotificationSettings = memo(function NotificationSettings({
                   })
                 }
               />
-              {formErrors.durationThresholdMs && (
-                <p className='text-[var(--text-error)] text-caption'>
-                  {formErrors.durationThresholdMs}
-                </p>
-              )}
-            </div>
+            </ChipModalField>
           )}
 
           {formData.alertRule === 'latency_spike' && (
-            <div className='flex gap-2'>
-              <div className='flex flex-1 flex-col gap-2'>
-                <Label>Above Average (%)</Label>
-                <EmcnInput
+            <div className='flex gap-4'>
+              <ChipModalField
+                flush
+                type='custom'
+                title='Above Average (%)'
+                error={formErrors.latencySpikePercent}
+                className='flex-1'
+              >
+                <ChipInput
                   type='number'
                   min={10}
                   max={1000}
+                  error={Boolean(formErrors.latencySpikePercent)}
                   value={formData.latencySpikePercent}
                   onChange={(e) =>
                     setFormData({
@@ -1084,18 +1036,19 @@ export const NotificationSettings = memo(function NotificationSettings({
                     })
                   }
                 />
-                {formErrors.latencySpikePercent && (
-                  <p className='text-[var(--text-error)] text-caption'>
-                    {formErrors.latencySpikePercent}
-                  </p>
-                )}
-              </div>
-              <div className='flex flex-1 flex-col gap-2'>
-                <Label>Window (hours)</Label>
-                <EmcnInput
+              </ChipModalField>
+              <ChipModalField
+                flush
+                type='custom'
+                title='Window (hours)'
+                error={formErrors.windowHours}
+                className='flex-1'
+              >
+                <ChipInput
                   type='number'
                   min={1}
                   max={168}
+                  error={Boolean(formErrors.windowHours)}
                   value={formData.windowHours}
                   onChange={(e) =>
                     setFormData({
@@ -1104,21 +1057,23 @@ export const NotificationSettings = memo(function NotificationSettings({
                     })
                   }
                 />
-                {formErrors.windowHours && (
-                  <p className='text-[var(--text-error)] text-caption'>{formErrors.windowHours}</p>
-                )}
-              </div>
+              </ChipModalField>
             </div>
           )}
 
           {formData.alertRule === 'cost_threshold' && (
-            <div className='flex flex-col gap-2'>
-              <Label>Cost Threshold ($)</Label>
-              <EmcnInput
+            <ChipModalField
+              flush
+              type='custom'
+              title='Cost Threshold ($)'
+              error={formErrors.costThresholdDollars}
+            >
+              <ChipInput
                 type='number'
                 min={0.01}
                 max={1000}
                 step={0.01}
+                error={Boolean(formErrors.costThresholdDollars)}
                 value={formData.costThresholdDollars}
                 onChange={(e) =>
                   setFormData({
@@ -1127,21 +1082,21 @@ export const NotificationSettings = memo(function NotificationSettings({
                   })
                 }
               />
-              {formErrors.costThresholdDollars && (
-                <p className='text-[var(--text-error)] text-caption'>
-                  {formErrors.costThresholdDollars}
-                </p>
-              )}
-            </div>
+            </ChipModalField>
           )}
 
           {formData.alertRule === 'no_activity' && (
-            <div className='flex flex-col gap-2'>
-              <Label>Inactivity Period (hours)</Label>
-              <EmcnInput
+            <ChipModalField
+              flush
+              type='custom'
+              title='Inactivity Period (hours)'
+              error={formErrors.inactivityHours}
+            >
+              <ChipInput
                 type='number'
                 min={1}
                 max={168}
+                error={Boolean(formErrors.inactivityHours)}
                 value={formData.inactivityHours}
                 onChange={(e) =>
                   setFormData({
@@ -1150,22 +1105,23 @@ export const NotificationSettings = memo(function NotificationSettings({
                   })
                 }
               />
-              {formErrors.inactivityHours && (
-                <p className='text-[var(--text-error)] text-caption'>
-                  {formErrors.inactivityHours}
-                </p>
-              )}
-            </div>
+            </ChipModalField>
           )}
 
           {formData.alertRule === 'error_count' && (
-            <div className='flex gap-2'>
-              <div className='flex flex-1 flex-col gap-2'>
-                <Label>Error Count</Label>
-                <EmcnInput
+            <div className='flex gap-4'>
+              <ChipModalField
+                flush
+                type='custom'
+                title='Error Count'
+                error={formErrors.errorCountThreshold}
+                className='flex-1'
+              >
+                <ChipInput
                   type='number'
                   min={1}
                   max={1000}
+                  error={Boolean(formErrors.errorCountThreshold)}
                   value={formData.errorCountThreshold}
                   onChange={(e) =>
                     setFormData({
@@ -1174,18 +1130,19 @@ export const NotificationSettings = memo(function NotificationSettings({
                     })
                   }
                 />
-                {formErrors.errorCountThreshold && (
-                  <p className='text-[var(--text-error)] text-caption'>
-                    {formErrors.errorCountThreshold}
-                  </p>
-                )}
-              </div>
-              <div className='flex flex-1 flex-col gap-2'>
-                <Label>Window (hours)</Label>
-                <EmcnInput
+              </ChipModalField>
+              <ChipModalField
+                flush
+                type='custom'
+                title='Window (hours)'
+                error={formErrors.windowHours}
+                className='flex-1'
+              >
+                <ChipInput
                   type='number'
                   min={1}
                   max={168}
+                  error={Boolean(formErrors.windowHours)}
                   value={formData.windowHours}
                   onChange={(e) =>
                     setFormData({
@@ -1194,10 +1151,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                     })
                   }
                 />
-                {formErrors.windowHours && (
-                  <p className='text-[var(--text-error)] text-caption'>{formErrors.windowHours}</p>
-                )}
-              </div>
+              </ChipModalField>
             </div>
           )}
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx b/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx
index f8e038af1b2..518c280d2cf 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx
@@ -1,71 +1,39 @@
-import { Skeleton } from '@/components/emcn'
+'use client'
 
-const SKELETON_ROW_COUNT = 5
-const COLUMN_COUNT = 6
+import { Bell, Library, RefreshCw } from '@/components/emcn'
+import { Download } from '@/components/emcn/icons'
+import {
+  type ChromeActionSpec,
+  ResourceChromeFallback,
+} from '@/app/workspace/[workspaceId]/components'
+
+const COLUMNS = [
+  { id: 'workflow', header: 'Workflow' },
+  { id: 'date', header: 'Date' },
+  { id: 'status', header: 'Status' },
+  { id: 'cost', header: 'Cost' },
+  { id: 'trigger', header: 'Trigger' },
+  { id: 'duration', header: 'Duration' },
+]
+
+const ACTIONS: ChromeActionSpec[] = [
+  { text: 'Export', icon: Download },
+  { text: 'Notifications', icon: Bell },
+  { text: 'Refresh', icon: RefreshCw },
+  { text: 'Logs', active: true },
+  { text: 'Dashboard' },
+]
 
 export default function LogsLoading() {
   return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[32px] rounded-[4px]' />
-          </div>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[28px] w-[64px] rounded-[6px]' />
-            <Skeleton className='h-[28px] w-[96px] rounded-[6px]' />
-            <Skeleton className='size-[28px] rounded-[6px]' />
-            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
-            <Skeleton className='h-[28px] w-[72px] rounded-[6px]' />
-          </div>
-        </div>
-      </div>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
-          </div>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
-            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
-          </div>
-        </div>
-      </div>
-      <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full'>
-          <thead>
-            <tr className='border-[var(--border)] border-b'>
-              <th className='w-[40px] px-[12px] py-[8px]'>
-                <Skeleton className='size-[14px] rounded-[2px]' />
-              </th>
-              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
-                <th key={i} className='px-[12px] py-[8px] text-left'>
-                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-[var(--border)] border-b'>
-                <td className='w-[40px] px-[12px] py-[10px]'>
-                  <Skeleton className='size-[14px] rounded-[2px]' />
-                </td>
-                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
-                  <td key={colIndex} className='px-[12px] py-[10px]'>
-                    <Skeleton
-                      className='h-[14px] rounded-[4px]'
-                      style={{ width: colIndex === 0 ? '128px' : '80px' }}
-                    />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <ResourceChromeFallback
+      icon={Library}
+      title='Logs'
+      columns={COLUMNS}
+      actions={ACTIONS}
+      searchPlaceholder='Search logs...'
+      hasSort
+      hasFilter
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index e53e7d8eaf0..1e6d70d4d0a 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -46,17 +46,13 @@ import {
 } from '@/lib/logs/search-suggestions'
 import type {
   FilterTag,
-  HeaderAction,
+  ResourceAction,
   ResourceColumn,
   ResourceRow,
   SearchConfig,
   SortConfig,
 } from '@/app/workspace/[workspaceId]/components'
-import {
-  ResourceHeader,
-  ResourceOptionsBar,
-  ResourceTable,
-} from '@/app/workspace/[workspaceId]/components'
+import { Resource } from '@/app/workspace/[workspaceId]/components'
 import { useSearchState } from '@/app/workspace/[workspaceId]/logs/hooks/use-search-state'
 import type { Suggestion } from '@/app/workspace/[workspaceId]/logs/types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -759,7 +755,6 @@ export default function Logs() {
           id: log.id,
           cells: {
             workflow: {
-              icon: <Workflow className='size-[14px] text-[var(--text-icon)]' />,
               label: workflowName,
             },
             date: { label: `${formattedDate.compactDate} ${formattedDate.compactTime}` },
@@ -1076,33 +1071,33 @@ export default function Logs() {
 
   const refreshIcon = isVisuallyRefreshing ? SpinningRefreshCw : RefreshCw
 
-  const headerActions = useMemo<HeaderAction[]>(
+  const headerActions = useMemo<ResourceAction[]>(
     () => [
       {
-        label: 'Export',
+        text: 'Export',
         icon: Download,
-        onClick: handleExport,
+        onSelect: handleExport,
         disabled: !userPermissions.canEdit || isExporting || logs.length === 0,
       },
       {
-        label: 'Notifications',
+        text: 'Notifications',
         icon: Bell,
-        onClick: handleOpenNotificationSettings,
+        onSelect: handleOpenNotificationSettings,
       },
       {
-        label: 'Refresh',
+        text: 'Refresh',
         icon: refreshIcon,
-        onClick: handleRefresh,
+        onSelect: handleRefresh,
         disabled: isVisuallyRefreshing,
       },
       {
-        label: 'Logs',
-        onClick: () => setViewMode('logs'),
+        text: 'Logs',
+        onSelect: () => setViewMode('logs'),
         active: !isDashboardView,
       },
       {
-        label: 'Dashboard',
-        onClick: () => setViewMode('dashboard'),
+        text: 'Dashboard',
+        onSelect: () => setViewMode('dashboard'),
         active: isDashboardView,
       },
     ],
@@ -1122,14 +1117,16 @@ export default function Logs() {
 
   return (
     <>
-      <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-        <ResourceHeader icon={Library} title='Logs' actions={headerActions} />
-        <ResourceOptionsBar
+      <Resource>
+        <Resource.Header icon={Library} title='Logs' actions={headerActions} />
+        <Resource.Options
           search={searchConfig}
           sort={sortConfig}
-          filter={
-            <LogsFilterPanel searchQuery={searchQuery} onSearchQueryChange={setSearchQuery} />
-          }
+          filter={{
+            content: (
+              <LogsFilterPanel searchQuery={searchQuery} onSearchQueryChange={setSearchQuery} />
+            ),
+          }}
           filterTags={filterTags}
         />
         {isDashboardView ? (
@@ -1144,7 +1141,7 @@ export default function Logs() {
             {sidebarOverlay}
           </div>
         ) : (
-          <ResourceTable
+          <Resource.Table
             columns={LOG_COLUMNS}
             rows={rows}
             selectedRowId={selectedLogId}
@@ -1159,7 +1156,7 @@ export default function Logs() {
             overlay={sidebarOverlay}
           />
         )}
-      </div>
+      </Resource>
 
       <NotificationSettings
         workspaceId={workspaceId}
@@ -1371,9 +1368,9 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
   }
 
   return (
-    <div className='flex w-[240px] flex-col gap-3 p-3'>
-      <div className='flex flex-col gap-1.5'>
-        <span className='font-medium text-[var(--text-secondary)] text-caption'>Status</span>
+    <div className='flex w-[240px] flex-col gap-4 p-3'>
+      <div className='flex flex-col gap-[9px]'>
+        <span className='text-[var(--text-muted)] text-small'>Status</span>
         <ChipCombobox
           options={statusOptions}
           multiSelect
@@ -1397,8 +1394,8 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
         />
       </div>
 
-      <div className='flex flex-col gap-1.5'>
-        <span className='font-medium text-[var(--text-secondary)] text-caption'>Workflow</span>
+      <div className='flex flex-col gap-[9px]'>
+        <span className='text-[var(--text-muted)] text-small'>Workflow</span>
         <ChipCombobox
           options={workflowOptions}
           multiSelect
@@ -1421,8 +1418,8 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
         />
       </div>
 
-      <div className='flex flex-col gap-1.5'>
-        <span className='font-medium text-[var(--text-secondary)] text-caption'>Folder</span>
+      <div className='flex flex-col gap-[9px]'>
+        <span className='text-[var(--text-muted)] text-small'>Folder</span>
         <ChipCombobox
           options={folderOptions}
           multiSelect
@@ -1440,8 +1437,8 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
         />
       </div>
 
-      <div className='flex flex-col gap-1.5'>
-        <span className='font-medium text-[var(--text-secondary)] text-caption'>Trigger</span>
+      <div className='flex flex-col gap-[9px]'>
+        <span className='text-[var(--text-muted)] text-small'>Trigger</span>
         <ChipCombobox
           options={triggerOptions}
           multiSelect
@@ -1459,8 +1456,8 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
         />
       </div>
 
-      <div className='flex flex-col gap-1.5'>
-        <span className='font-medium text-[var(--text-secondary)] text-caption'>Time Range</span>
+      <div className='flex flex-col gap-[9px]'>
+        <span className='text-[var(--text-muted)] text-small'>Time Range</span>
         <div className='relative'>
           <ChipCombobox
             options={TIME_RANGE_OPTIONS}
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
index ed0559cb552..d02c322c6e1 100644
--- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
@@ -10,9 +10,10 @@ import {
   ChipInput,
   ChipModal,
   ChipModalBody,
+  ChipModalError,
+  ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  ChipTextarea,
   DatePicker,
   TimePicker,
 } from '@/components/emcn'
@@ -215,10 +216,7 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
     ]
   )
 
-  const showTimezone = useMemo(
-    () => scheduleType !== 'minutes' && scheduleType !== 'hourly',
-    [scheduleType]
-  )
+  const showTimezone = scheduleType !== 'minutes' && scheduleType !== 'hourly'
 
   const resolvedTimezone = showTimezone ? timezone : 'UTC'
 
@@ -232,14 +230,12 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
     }
   }, [computedCron, resolvedTimezone])
 
-  const isFormValid = useMemo(
-    () =>
-      title.trim() &&
+  const isFormValid = Boolean(
+    title.trim() &&
       prompt.trim() &&
       computedCron &&
       schedulePreview &&
-      !('error' in schedulePreview),
-    [title, prompt, computedCron, schedulePreview]
+      !('error' in schedulePreview)
   )
 
   const resetForm = () => {
@@ -261,9 +257,19 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
     setSubmitError(null)
   }
 
+  /**
+   * Single close/open handler for every close path (footer Cancel, header X,
+   * Esc, and overlay click). The create-mode instance stays mounted between
+   * opens, so any close must also reset the draft to avoid stale values
+   * reappearing on the next open.
+   */
+  const handleOpenChange = (nextOpen: boolean) => {
+    onOpenChange(nextOpen)
+    if (!nextOpen) resetForm()
+  }
+
   const handleClose = () => {
-    onOpenChange(false)
-    resetForm()
+    handleOpenChange(false)
   }
 
   const handleSubmit = async () => {
@@ -305,209 +311,201 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
   const modalTitle = isEditing ? 'Edit scheduled task' : 'Create new scheduled task'
 
   return (
-    <ChipModal open={open} onOpenChange={onOpenChange} srTitle={modalTitle} size='lg'>
-      <ChipModalHeader onClose={() => onOpenChange(false)}>{modalTitle}</ChipModalHeader>
-      <ChipModalBody className='max-h-[70vh] overflow-y-auto'>
-        <div className='flex flex-col gap-4.5'>
-          <div className='flex flex-col gap-2'>
-            <p className='font-medium text-[var(--text-secondary)] text-sm'>Title</p>
+    <ChipModal open={open} onOpenChange={handleOpenChange} srTitle={modalTitle} size='lg'>
+      <ChipModalHeader onClose={handleClose}>{modalTitle}</ChipModalHeader>
+      <ChipModalBody>
+        <ChipModalField
+          type='input'
+          title='Title'
+          value={title}
+          onChange={(value) => {
+            setTitle(value)
+            if (submitError) setSubmitError(null)
+          }}
+          placeholder='e.g., Daily report generation'
+          autoComplete='off'
+          onSubmit={handleSubmit}
+        />
+
+        <ChipModalField
+          type='textarea'
+          title='Task description'
+          value={prompt}
+          onChange={(value) => {
+            setPrompt(value)
+            if (submitError) setSubmitError(null)
+          }}
+          placeholder='Describe what this scheduled task should do...'
+          minHeight={80}
+        />
+
+        <ChipModalField type='custom' title='Run frequency'>
+          <ChipCombobox
+            options={SCHEDULE_TYPE_OPTIONS}
+            value={scheduleType}
+            onChange={(v) => setScheduleType(v as ScheduleType)}
+            placeholder='Select frequency'
+          />
+        </ChipModalField>
+
+        {scheduleType === 'minutes' && (
+          <ChipModalField type='custom' title='Interval (minutes)'>
             <ChipInput
-              value={title}
-              onChange={(e) => {
-                setTitle(e.target.value)
-                if (submitError) setSubmitError(null)
-              }}
-              placeholder='e.g., Daily report generation'
-              autoComplete='off'
+              type='number'
+              value={minutesInterval}
+              onChange={(e) => setMinutesInterval(e.target.value)}
+              placeholder='15'
+              min={1}
+              max={1440}
             />
-          </div>
+          </ChipModalField>
+        )}
 
-          <div className='flex flex-col gap-2'>
-            <p className='font-medium text-[var(--text-secondary)] text-sm'>Task description</p>
-            <ChipTextarea
-              value={prompt}
-              onChange={(e) => {
-                setPrompt(e.target.value)
-                if (submitError) setSubmitError(null)
-              }}
-              placeholder='Describe what this scheduled task should do...'
-              className='min-h-[80px]'
-            />
-          </div>
-
-          <div className='flex flex-col gap-2'>
-            <p className='font-medium text-[var(--text-secondary)] text-sm'>Run frequency</p>
-            <ChipCombobox
-              options={SCHEDULE_TYPE_OPTIONS}
-              value={scheduleType}
-              onChange={(v) => setScheduleType(v as ScheduleType)}
-              placeholder='Select frequency'
+        {scheduleType === 'hourly' && (
+          <ChipModalField type='custom' title='Minute of hour'>
+            <ChipInput
+              type='number'
+              value={hourlyMinute}
+              onChange={(e) => setHourlyMinute(e.target.value)}
+              placeholder='0'
+              min={0}
+              max={59}
             />
+          </ChipModalField>
+        )}
+
+        {scheduleType === 'daily' && (
+          <ChipModalField type='custom' title='Time'>
+            <TimePicker value={dailyTime} onChange={setDailyTime} />
+          </ChipModalField>
+        )}
+
+        {scheduleType === 'weekly' && (
+          <div className='flex gap-3'>
+            <ChipModalField type='custom' title='Day of week' className='flex-1'>
+              <ChipCombobox options={WEEKDAY_OPTIONS} value={weeklyDay} onChange={setWeeklyDay} />
+            </ChipModalField>
+            <ChipModalField type='custom' title='Time' className='flex-1'>
+              <TimePicker value={weeklyDayTime} onChange={setWeeklyDayTime} />
+            </ChipModalField>
           </div>
+        )}
 
-          {scheduleType === 'minutes' && (
-            <div className='flex flex-col gap-2'>
-              <p className='font-medium text-[var(--text-secondary)] text-sm'>Interval (minutes)</p>
+        {scheduleType === 'monthly' && (
+          <div className='flex gap-3'>
+            <ChipModalField type='custom' title='Day of month' className='flex-1'>
               <ChipInput
                 type='number'
-                value={minutesInterval}
-                onChange={(e) => setMinutesInterval(e.target.value)}
-                placeholder='15'
+                value={monthlyDay}
+                onChange={(e) => setMonthlyDay(e.target.value)}
+                placeholder='1'
                 min={1}
-                max={1440}
+                max={31}
               />
-            </div>
-          )}
-
-          {scheduleType === 'hourly' && (
-            <div className='flex flex-col gap-2'>
-              <p className='font-medium text-[var(--text-secondary)] text-sm'>Minute of hour</p>
-              <ChipInput
-                type='number'
-                value={hourlyMinute}
-                onChange={(e) => setHourlyMinute(e.target.value)}
-                placeholder='0'
-                min={0}
-                max={59}
-              />
-            </div>
-          )}
-
-          {scheduleType === 'daily' && (
-            <div className='flex flex-col gap-2'>
-              <p className='font-medium text-[var(--text-secondary)] text-sm'>Time</p>
-              <TimePicker value={dailyTime} onChange={setDailyTime} />
-            </div>
-          )}
-
-          {scheduleType === 'weekly' && (
-            <div className='flex gap-3'>
-              <div className='flex flex-1 flex-col gap-2'>
-                <p className='font-medium text-[var(--text-secondary)] text-sm'>Day of week</p>
-                <ChipCombobox options={WEEKDAY_OPTIONS} value={weeklyDay} onChange={setWeeklyDay} />
-              </div>
-              <div className='flex flex-1 flex-col gap-2'>
-                <p className='font-medium text-[var(--text-secondary)] text-sm'>Time</p>
-                <TimePicker value={weeklyDayTime} onChange={setWeeklyDayTime} />
-              </div>
-            </div>
-          )}
-
-          {scheduleType === 'monthly' && (
-            <div className='flex gap-3'>
-              <div className='flex flex-1 flex-col gap-2'>
-                <p className='font-medium text-[var(--text-secondary)] text-sm'>Day of month</p>
-                <ChipInput
-                  type='number'
-                  value={monthlyDay}
-                  onChange={(e) => setMonthlyDay(e.target.value)}
-                  placeholder='1'
-                  min={1}
-                  max={31}
-                />
-              </div>
-              <div className='flex flex-1 flex-col gap-2'>
-                <p className='font-medium text-[var(--text-secondary)] text-sm'>Time</p>
-                <TimePicker value={monthlyTime} onChange={setMonthlyTime} />
-              </div>
-            </div>
-          )}
+            </ChipModalField>
+            <ChipModalField type='custom' title='Time' className='flex-1'>
+              <TimePicker value={monthlyTime} onChange={setMonthlyTime} />
+            </ChipModalField>
+          </div>
+        )}
 
-          {scheduleType === 'custom' && (
-            <div className='flex flex-col gap-2'>
-              <p className='font-medium text-[var(--text-secondary)] text-sm'>Cron expression</p>
-              <ChipInput
-                value={cronExpression}
-                onChange={(e) => setCronExpression(e.target.value)}
-                placeholder='0 9 * * *'
-                inputClassName='font-mono'
-                autoComplete='off'
-              />
-            </div>
-          )}
-
-          {showTimezone && (
-            <div className='flex flex-col gap-2'>
-              <p className='font-medium text-[var(--text-secondary)] text-sm'>Timezone</p>
-              <ChipCombobox
-                options={TIMEZONE_OPTIONS}
-                value={timezone}
-                onChange={setTimezone}
-                searchable
-                searchPlaceholder='Search timezones...'
-                maxHeight={240}
-              />
-            </div>
-          )}
+        {scheduleType === 'custom' && (
+          <ChipModalField type='custom' title='Cron expression'>
+            <ChipInput
+              value={cronExpression}
+              onChange={(e) => setCronExpression(e.target.value)}
+              placeholder='0 9 * * *'
+              inputClassName='font-mono'
+              autoComplete='off'
+            />
+          </ChipModalField>
+        )}
 
-          {!isEditing && (
-            <div className='flex flex-col gap-2'>
-              <p className='font-medium text-[var(--text-secondary)] text-sm'>
+        {showTimezone && (
+          <ChipModalField type='custom' title='Timezone'>
+            <ChipCombobox
+              options={TIMEZONE_OPTIONS}
+              value={timezone}
+              onChange={setTimezone}
+              searchable
+              searchPlaceholder='Search timezones...'
+              maxHeight={240}
+            />
+          </ChipModalField>
+        )}
+
+        {!isEditing && (
+          <ChipModalField
+            type='custom'
+            title={
+              <>
                 Start date
                 <span className='ml-1 font-normal text-[var(--text-muted)]'>(optional)</span>
-              </p>
-              <DatePicker
-                value={startDate}
-                onChange={setStartDate}
-                placeholder='Starts immediately'
-              />
-            </div>
-          )}
-
-          <div className='flex flex-col gap-2'>
-            <p className='font-medium text-[var(--text-secondary)] text-sm'>Lifecycle</p>
-            <ButtonGroup
-              value={lifecycle}
-              onValueChange={(value) => setLifecycle(value as 'persistent' | 'until_complete')}
-            >
-              <ButtonGroupItem value='persistent'>Recurring</ButtonGroupItem>
-              <ButtonGroupItem value='until_complete'>Number of runs</ButtonGroupItem>
-            </ButtonGroup>
-          </div>
-
-          {lifecycle === 'until_complete' && (
-            <div className='flex flex-col gap-2'>
-              <p className='font-medium text-[var(--text-secondary)] text-sm'>
+              </>
+            }
+          >
+            <DatePicker
+              value={startDate}
+              onChange={setStartDate}
+              placeholder='Starts immediately'
+            />
+          </ChipModalField>
+        )}
+
+        <ChipModalField type='custom' title='Lifecycle'>
+          <ButtonGroup
+            value={lifecycle}
+            onValueChange={(value) => setLifecycle(value as 'persistent' | 'until_complete')}
+          >
+            <ButtonGroupItem value='persistent'>Recurring</ButtonGroupItem>
+            <ButtonGroupItem value='until_complete'>Number of runs</ButtonGroupItem>
+          </ButtonGroup>
+        </ChipModalField>
+
+        {lifecycle === 'until_complete' && (
+          <ChipModalField
+            type='custom'
+            title={
+              <>
                 Max runs
                 <span className='ml-1 font-normal text-[var(--text-muted)]'>(optional)</span>
-              </p>
-              <ChipInput
-                type='number'
-                value={maxRuns}
-                onChange={(e) => setMaxRuns(e.target.value)}
-                placeholder='No limit'
-                min={1}
-              />
-            </div>
-          )}
-
-          {computedCron && schedulePreview && (
-            <div>
-              {'error' in schedulePreview ? (
-                <p className='text-[var(--text-error)] text-small'>{schedulePreview.error}</p>
-              ) : (
-                <div className='flex flex-col gap-1'>
-                  <p className='text-[var(--text-secondary)] text-small'>
-                    {schedulePreview.humanReadable}
+              </>
+            }
+          >
+            <ChipInput
+              type='number'
+              value={maxRuns}
+              onChange={(e) => setMaxRuns(e.target.value)}
+              placeholder='No limit'
+              min={1}
+            />
+          </ChipModalField>
+        )}
+
+        {computedCron && schedulePreview && (
+          <div className='px-2'>
+            {'error' in schedulePreview ? (
+              <p className='text-[var(--text-error)] text-caption'>{schedulePreview.error}</p>
+            ) : (
+              <div className='flex flex-col gap-1'>
+                <p className='text-[var(--text-secondary)] text-small'>
+                  {schedulePreview.humanReadable}
+                </p>
+                {schedulePreview.nextRun && (
+                  <p className='text-[var(--text-muted)] text-caption'>
+                    Next run:{' '}
+                    {schedulePreview.nextRun.toLocaleString(undefined, {
+                      dateStyle: 'medium',
+                      timeStyle: 'short',
+                    })}
                   </p>
-                  {schedulePreview.nextRun && (
-                    <p className='text-[var(--text-muted)] text-caption'>
-                      Next run:{' '}
-                      {schedulePreview.nextRun.toLocaleString(undefined, {
-                        dateStyle: 'medium',
-                        timeStyle: 'short',
-                      })}
-                    </p>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-
-          {submitError && (
-            <p className='text-[var(--text-error)] text-small leading-tight'>{submitError}</p>
-          )}
-        </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        <ChipModalError>{submitError}</ChipModalError>
       </ChipModalBody>
 
       <ChipModalFooter
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/loading.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/loading.tsx
index 2e642134d89..9b6359786a7 100644
--- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/loading.tsx
@@ -1,63 +1,31 @@
-import { Skeleton } from '@/components/emcn'
+'use client'
 
-const SKELETON_ROW_COUNT = 5
-const COLUMN_COUNT = 4
+import { Plus } from '@/components/emcn'
+import { Calendar } from '@/components/emcn/icons'
+import {
+  type ChromeActionSpec,
+  ResourceChromeFallback,
+} from '@/app/workspace/[workspaceId]/components'
+
+const COLUMNS = [
+  { id: 'task', header: 'Task' },
+  { id: 'schedule', header: 'Schedule' },
+  { id: 'nextRun', header: 'Next Run' },
+  { id: 'lastRun', header: 'Last Run' },
+]
+
+const ACTIONS: ChromeActionSpec[] = [{ text: 'New scheduled task', icon: Plus, variant: 'primary' }]
 
 export default function ScheduledTasksLoading() {
   return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[104px] rounded-[4px]' />
-          </div>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[28px] w-[136px] rounded-[6px]' />
-          </div>
-        </div>
-      </div>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center'>
-          <Skeleton className='size-[14px] rounded-[2px]' />
-          <Skeleton className='ml-[10px] h-[14px] w-[160px] rounded-[4px]' />
-        </div>
-      </div>
-      <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full'>
-          <thead>
-            <tr className='border-[var(--border)] border-b'>
-              <th className='w-[40px] px-[12px] py-[8px]'>
-                <Skeleton className='size-[14px] rounded-[2px]' />
-              </th>
-              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
-                <th key={i} className='px-[12px] py-[8px] text-left'>
-                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-[var(--border)] border-b'>
-                <td className='w-[40px] px-[12px] py-[10px]'>
-                  <Skeleton className='size-[14px] rounded-[2px]' />
-                </td>
-                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
-                  <td key={colIndex} className='px-[12px] py-[10px]'>
-                    <Skeleton
-                      className='h-[14px] rounded-[4px]'
-                      style={{
-                        width: colIndex === 0 ? '128px' : colIndex === 1 ? '160px' : '80px',
-                      }}
-                    />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <ResourceChromeFallback
+      icon={Calendar}
+      title='Scheduled Tasks'
+      columns={COLUMNS}
+      actions={ACTIONS}
+      searchPlaceholder='Search scheduled tasks...'
+      hasSort
+      hasFilter
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
index ec8980d2041..65180ff5b4e 100644
--- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
@@ -4,11 +4,11 @@ import { useCallback, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { formatAbsoluteDate } from '@sim/utils/formatting'
 import { useParams } from 'next/navigation'
-import { ChipCombobox, ChipConfirmModal } from '@/components/emcn'
-import { Calendar } from '@/components/emcn/icons'
+import { Calendar, ChipCombobox, ChipConfirmModal, Plus } from '@/components/emcn'
 import { parseCronToHumanReadable } from '@/lib/workflows/schedules/utils'
 import type {
   FilterTag,
+  ResourceAction,
   ResourceColumn,
   ResourceRow,
   SortConfig,
@@ -360,6 +360,18 @@ export function ScheduledTasks() {
     ]
   )
 
+  const headerActions: ResourceAction[] = useMemo(
+    () => [
+      {
+        text: 'New scheduled task',
+        icon: Plus,
+        onSelect: () => setIsCreateModalOpen(true),
+        variant: 'primary',
+      },
+    ],
+    []
+  )
+
   const filterTags: FilterTag[] = useMemo(() => {
     const tags: FilterTag[] = []
     if (scheduleTypeFilter.length > 0) {
@@ -384,27 +396,26 @@ export function ScheduledTasks() {
 
   return (
     <>
-      <Resource
-        icon={Calendar}
-        title='Scheduled Tasks'
-        create={{
-          label: 'New scheduled task',
-          onClick: () => setIsCreateModalOpen(true),
-        }}
-        search={{
-          value: searchQuery,
-          onChange: setSearchQuery,
-          placeholder: 'Search scheduled tasks...',
-        }}
-        sort={sortConfig}
-        filter={filterContent}
-        filterTags={filterTags}
-        columns={COLUMNS}
-        rows={rows}
-        onRowContextMenu={handleRowContextMenu}
-        isLoading={isLoading}
-        onContextMenu={handleContentContextMenu}
-      />
+      <Resource onContextMenu={handleContentContextMenu}>
+        <Resource.Header icon={Calendar} title='Scheduled Tasks' actions={headerActions} />
+        <Resource.Options
+          search={{
+            value: searchQuery,
+            onChange: setSearchQuery,
+            placeholder: 'Search scheduled tasks...',
+          }}
+          sort={sortConfig}
+          filter={{ content: filterContent }}
+          filterTags={filterTags}
+        />
+        <Resource.Table
+          columns={COLUMNS}
+          rows={rows}
+          sort={sortConfig}
+          onRowContextMenu={handleRowContextMenu}
+          isLoading={isLoading}
+        />
+      </Resource>
 
       <ScheduleListContextMenu
         isOpen={isListContextMenuOpen}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
index 691296e3fdd..a30e7071bb1 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.tsx
@@ -517,7 +517,6 @@ export function Billing() {
                 <div className='flex items-center justify-between'>
                   <span className='text-[var(--text-body)] text-small'>Payment method</span>
                   <Chip
-                    variant='filled'
                     flush
                     disabled={!canManageBilling || openBillingPortal.isPending}
                     onClick={handleOpenBillingPortal}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
index 07f1dcafef4..c711a497fae 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
@@ -193,7 +193,6 @@ export function InboxSettingsTab() {
                         )}
                       </div>
                       <Chip
-                        variant='ghost'
                         flush
                         leftIcon={Trash2}
                         aria-label='Remove sender'
@@ -219,7 +218,6 @@ export function InboxSettingsTab() {
             )}
 
             <Chip
-              variant='ghost'
               className='mt-1 w-fit'
               leftIcon={Plus}
               onClick={() => {
@@ -289,22 +287,18 @@ export function InboxSettingsTab() {
               The old address will stop receiving emails immediately.
             </span>
           </p>
-          <div className='mt-4 flex flex-col gap-1 px-2'>
-            <p className='font-medium text-[var(--text-secondary)] text-sm'>New email prefix</p>
-            <ChipInput
-              value={newUsername}
-              onChange={(e) => {
-                setNewUsername(e.target.value)
-                if (editAddressError) setEditAddressError(null)
-              }}
-              placeholder='e.g., new-acme'
-            />
-            {editAddressError && (
-              <p className='text-[var(--text-error)] text-small leading-tight'>
-                {editAddressError}
-              </p>
-            )}
-          </div>
+          <ChipModalField
+            type='input'
+            title='New email prefix'
+            value={newUsername}
+            onChange={(value) => {
+              setNewUsername(value)
+              if (editAddressError) setEditAddressError(null)
+            }}
+            onSubmit={handleEditAddress}
+            placeholder='e.g., new-acme'
+            error={editAddressError}
+          />
         </ChipModalBody>
         <ChipModalFooter
           onCancel={() => setIsEditAddressOpen(false)}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx
deleted file mode 100644
index cad5381d1d2..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Label } from '@/components/emcn'
-
-interface FormFieldProps {
-  label: string
-  children: React.ReactNode
-  optional?: boolean
-}
-
-export function FormField({ label, children, optional }: FormFieldProps) {
-  return (
-    <div className='flex items-center justify-between gap-3'>
-      <Label className='w-[116px] shrink-0 font-medium text-[var(--text-secondary)] text-sm'>
-        {label}
-        {optional && (
-          <span className='ml-1 font-normal text-[var(--text-muted)] text-xs'>(optional)</span>
-        )}
-      </Label>
-      <div className='relative flex-1'>{children}</div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/index.ts b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/index.ts
deleted file mode 100644
index b5a73ed2442..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FormField } from './form-field'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/index.ts b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/index.ts
index 7aea96e753f..787b3822142 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/index.ts
@@ -1,4 +1,3 @@
-export { FormField } from './form-field'
 export {
   type McpServerFormConfig,
   McpServerFormModal,
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
index bb2c7911c7e..ec014a17eb9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
@@ -9,10 +9,11 @@ import {
   ChipInput,
   ChipModal,
   ChipModalBody,
+  ChipModalError,
+  ChipModalField,
   ChipModalFooter,
   type ChipModalFooterAction,
   ChipModalHeader,
-  ChipTextarea,
   SecretInput,
 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
@@ -23,7 +24,6 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { useMcpServerTest } from '@/hooks/queries/mcp'
-import { FormField } from '../form-field/form-field'
 
 const logger = createLogger('McpServerFormModal')
 
@@ -649,24 +649,25 @@ export function McpServerFormModal({
   return (
     <ChipModal open={open} onOpenChange={onOpenChange} srTitle={title} size='lg'>
       <ChipModalHeader onClose={() => onOpenChange(false)}>{title}</ChipModalHeader>
-      <ChipModalBody className='max-h-[82vh] min-h-0 overflow-y-auto'>
+      <ChipModalBody>
         {formMode === 'json' ? (
-          <div className='flex flex-col gap-2'>
-            <ChipTextarea
-              placeholder={`{\n  "mcpServers": {\n    "server-name": {\n      "url": "https://...",\n      "headers": {\n        "X-API-Key": "..."\n      }\n    }\n  }\n}`}
-              value={jsonInput}
-              onChange={(e) => {
-                setJsonInput(e.target.value)
-                if (jsonError) setJsonError(null)
-                if (testResult) clearTestResult()
-                if (submitError) setSubmitError(null)
-              }}
-              className='min-h-[280px] font-mono text-small leading-5'
-            />
-            {jsonError && <p className='text-[var(--text-error)] text-caption'>{jsonError}</p>}
-          </div>
+          <ChipModalField
+            type='textarea'
+            title='Configuration'
+            value={jsonInput}
+            onChange={(value) => {
+              setJsonInput(value)
+              if (jsonError) setJsonError(null)
+              if (testResult) clearTestResult()
+              if (submitError) setSubmitError(null)
+            }}
+            placeholder={`{\n  "mcpServers": {\n    "server-name": {\n      "url": "https://...",\n      "headers": {\n        "X-API-Key": "..."\n      }\n    }\n  }\n}`}
+            minHeight={280}
+            resizable
+            error={jsonError}
+          />
         ) : (
-          <div className='flex flex-col gap-3'>
+          <>
             <input
               type='text'
               name='fakeusernameremembered'
@@ -683,19 +684,23 @@ export function McpServerFormModal({
               tabIndex={-1}
               readOnly
             />
-            <FormField label='Server Name'>
-              <ChipInput
-                placeholder='e.g., My MCP Server'
-                value={formData.name}
-                onChange={(e) => {
-                  if (testResult) clearTestResult()
-                  if (submitError) setSubmitError(null)
-                  setFormData((prev) => ({ ...prev, name: e.target.value }))
-                }}
-              />
-            </FormField>
+            <ChipModalField
+              type='input'
+              title='Server Name'
+              value={formData.name}
+              onChange={(value) => {
+                if (testResult) clearTestResult()
+                if (submitError) setSubmitError(null)
+                setFormData((prev) => ({ ...prev, name: value }))
+              }}
+              placeholder='e.g., My MCP Server'
+            />
 
-            <FormField label='Server URL'>
+            <ChipModalField
+              type='custom'
+              title='Server URL'
+              error={isDomainBlocked ? 'Domain not permitted by server policy' : undefined}
+            >
               <FormattedInput
                 ref={urlInputRef}
                 placeholder='https://mcp.server.dev/{{YOUR_API_KEY}}/sse'
@@ -713,14 +718,9 @@ export function McpServerFormModal({
                 onChange={(e) => handleInputChange('url', e.target.value)}
                 onScroll={setUrlScrollLeft}
               />
-              {isDomainBlocked && (
-                <p className='mt-1 text-[var(--text-error)] text-caption'>
-                  Domain not permitted by server policy
-                </p>
-              )}
-            </FormField>
+            </ChipModalField>
 
-            <FormField label='Headers'>
+            <ChipModalField type='custom' title='Headers'>
               <div className='flex max-h-[140px] flex-col gap-2 overflow-y-auto'>
                 {(formData.headers || []).map((header, index) => (
                   <HeaderRow
@@ -742,13 +742,13 @@ export function McpServerFormModal({
                   />
                 ))}
               </div>
-            </FormField>
+            </ChipModalField>
 
             <Button
               type='button'
               variant='ghost'
               onClick={() => setShowAdvanced((v) => !v)}
-              className='mt-1 gap-1 self-start px-0 py-0 text-small'
+              className='gap-1 self-start px-2 py-0 text-small'
             >
               {showAdvanced ? (
                 <ChevronDown className='size-[14px]' />
@@ -758,8 +758,8 @@ export function McpServerFormModal({
               Advanced settings
             </Button>
             {showAdvanced && (
-              <div className='flex flex-col gap-2'>
-                <FormField label='Client ID'>
+              <>
+                <ChipModalField type='custom' title='Client ID'>
                   <ChipInput
                     placeholder='OAuth Client ID (optional)'
                     value={formData.oauthClientId || ''}
@@ -775,8 +775,12 @@ export function McpServerFormModal({
                       setFormData((prev) => ({ ...prev, oauthClientId: e.target.value }))
                     }}
                   />
-                </FormField>
-                <FormField label='Client Secret'>
+                </ChipModalField>
+                <ChipModalField
+                  type='custom'
+                  title='Client Secret'
+                  hint="Only needed for servers that don't support automatic client registration."
+                >
                   <SecretInput
                     placeholder='OAuth Client Secret (optional)'
                     value={formData.oauthClientSecret || ''}
@@ -793,15 +797,12 @@ export function McpServerFormModal({
                       setFormData((prev) => ({ ...prev, oauthClientSecret: value }))
                     }}
                   />
-                </FormField>
-                <p className='text-[var(--text-tertiary)] text-caption'>
-                  Only needed for servers that don't support automatic client registration.
-                </p>
-              </div>
+                </ChipModalField>
+              </>
             )}
-          </div>
+          </>
         )}
-        {submitError && <p className='w-full text-[var(--text-error)] text-small'>{submitError}</p>}
+        <ChipModalError>{submitError}</ChipModalError>
       </ChipModalBody>
       <ChipModalFooter
         onCancel={() => onOpenChange(false)}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
index 569aa32ff79..55ed0468db2 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
@@ -6,10 +6,7 @@ import { formatDate } from '@sim/utils/formatting'
 import { useParams, useRouter } from 'next/navigation'
 import { Button, ChipInput, ChipModalTabs } from '@/components/emcn'
 import { Folder, Search, Workflow } from '@/components/emcn/icons'
-import {
-  type ColumnOption,
-  SortDropdown,
-} from '@/app/workspace/[workspaceId]/components/resource/components/resource-options-bar'
+import { type ColumnOption, SortDropdown } from '@/app/workspace/[workspaceId]/components'
 import { RESOURCE_REGISTRY } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
 import type { MothershipResourceType } from '@/app/workspace/[workspaceId]/home/types'
 import { useFolders, useRestoreFolder } from '@/hooks/queries/folders'
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 ced01d7b50a..b36fe42ba98 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
@@ -205,7 +205,6 @@ function WorkspaceVariableRow({
         name={`workspace_env_value_${envKey}_${generateShortId()}`}
       />
       <Chip
-        variant='ghost'
         onClick={() => onViewDetails(envKey)}
         disabled={!hasCredential}
         className={cn('ml-2', !hasCredential && 'opacity-40')}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
index 1ea8749da87..bb07a332c48 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/organization-member-lists/organization-member-lists.tsx
@@ -109,11 +109,7 @@ export function OrganizationMemberLists({
   const buildActionsMenu = (children: React.ReactNode) => (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button
-          type='button'
-          aria-label='Member actions'
-          className={chipVariants({ variant: 'ghost', flush: true })}
-        >
+        <button type='button' aria-label='Member actions' className={chipVariants({ flush: true })}>
           <MoreHorizontal className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
         </button>
       </DropdownMenuTrigger>
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 2cf87bb1f04..ea442e0e9de 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx
@@ -232,7 +232,7 @@ export function Teammates() {
                       <button
                         type='button'
                         aria-label='Teammate actions'
-                        className={chipVariants({ variant: 'ghost', flush: true })}
+                        className={chipVariants({ flush: true })}
                       >
                         <MoreHorizontal className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
                       </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx
index 51d61522792..51b1a33a46c 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx
@@ -103,6 +103,7 @@ export function CreateWorkflowMcpServerModal({
               searchPlaceholder='Search workflows...'
               disabled={createServerMutation.isPending}
               fullWidth
+              dropdownWidth='trigger'
               align='start'
               displayLabel={
                 selectedWorkflowIds.length > 0
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 dd86d5158a3..79d517b888b 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
@@ -814,6 +814,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
               searchPlaceholder='Search workflows...'
               disabled={addToolMutation.isPending}
               fullWidth
+              dropdownWidth='trigger'
               align='start'
               displayLabel={selectedWorkflow?.name}
             />
diff --git a/apps/sim/app/workspace/[workspaceId]/skills/components/skill-import/skill-import.tsx b/apps/sim/app/workspace/[workspaceId]/skills/components/skill-import/skill-import.tsx
index 7d3d5db1d06..968b63b3819 100644
--- a/apps/sim/app/workspace/[workspaceId]/skills/components/skill-import/skill-import.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/skills/components/skill-import/skill-import.tsx
@@ -220,7 +220,6 @@ export function SkillImport({ onImport }: SkillImportProps) {
             className='flex-1'
           />
           <Chip
-            variant='filled'
             flush
             onClick={handleGithubImport}
             disabled={githubState === 'loading' || !githubUrl.trim()}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx
index 045e44390f2..50c240a13cb 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx
@@ -2,14 +2,17 @@
 
 import { Sparkles } from 'lucide-react'
 import {
-  Button,
+  ChipChevronDown,
+  chipContentIconClass,
+  chipContentLabelClass,
+  chipVariants,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Plus,
 } from '@/components/emcn'
-import { Plus } from '@/components/emcn/icons'
 import { isWorkflowColumnsEnabledClient } from '@/lib/core/config/feature-flags'
 import type { ColumnDefinition } from '@/lib/table'
 import { COLUMN_TYPE_OPTIONS } from '../column-config-sidebar'
@@ -21,8 +24,6 @@ const VISIBLE_COLUMN_TYPE_OPTIONS = isWorkflowColumnsEnabledClient
 const CELL_HEADER =
   'border-[var(--border)] border-r border-b bg-[var(--bg)] px-2 py-[7px] text-left align-middle'
 
-const HEADER_ADD_COLUMN_ICON = <Plus className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
-
 interface NewColumnDropdownProps {
   /** `'header'` renders the page-header trigger (subtle Button); `'inline-header'` renders
    *  the in-table column-header `<th>` trigger. Same dropdown content either way. */
@@ -49,10 +50,11 @@ export function NewColumnDropdown({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         {trigger === 'header' ? (
-          <Button variant='subtle' className='px-2 py-1 text-caption' disabled={disabled}>
-            {HEADER_ADD_COLUMN_ICON}
-            New column
-          </Button>
+          <button type='button' className={chipVariants()} disabled={disabled}>
+            <Plus className={chipContentIconClass} />
+            <span className={chipContentLabelClass}>New column</span>
+            <ChipChevronDown />
+          </button>
         ) : (
           <button
             type='button'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
index a9e93ae1566..17ac4992c59 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
@@ -1,34 +1,29 @@
 'use client'
 
-import { useState } from 'react'
+import { useId, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useParams } from 'next/navigation'
 import {
   Checkbox,
   ChipConfirmModal,
-  ChipInput,
   ChipModal,
   ChipModalBody,
+  ChipModalError,
+  ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  ChipTextarea,
   DatePicker,
   Label,
 } from '@/components/emcn'
 import type { ColumnDefinition, TableInfo, TableRow } from '@/lib/table'
-import {
-  useCreateTableRow,
-  useDeleteTableRow,
-  useDeleteTableRows,
-  useUpdateTableRow,
-} from '@/hooks/queries/tables'
+import { useDeleteTableRow, useDeleteTableRows, useUpdateTableRow } from '@/hooks/queries/tables'
 import { cleanCellValue, formatValueForInput } from '../../utils'
 
 const logger = createLogger('RowModal')
 
 export interface RowModalProps {
-  mode: 'add' | 'edit' | 'delete'
+  mode: 'edit' | 'delete'
   isOpen: boolean
   onClose: () => void
   table: TableInfo
@@ -37,18 +32,6 @@ export interface RowModalProps {
   onSuccess: () => void
 }
 
-function createInitialRowData(columns: ColumnDefinition[]): Record<string, unknown> {
-  const initial: Record<string, unknown> = {}
-  columns.forEach((col) => {
-    if (col.type === 'boolean') {
-      initial[col.name] = false
-    } else {
-      initial[col.name] = ''
-    }
-  })
-  return initial
-}
-
 function cleanRowData(
   columns: ColumnDefinition[],
   rowData: Record<string, unknown>
@@ -67,20 +50,14 @@ function cleanRowData(
   return cleanData
 }
 
-function getInitialRowData(
-  mode: RowModalProps['mode'],
-  columns: ColumnDefinition[],
-  row?: TableRow
-): Record<string, unknown> {
-  if (mode === 'add' && columns.length > 0) {
-    return createInitialRowData(columns)
-  }
-  if (mode === 'edit' && row) {
-    return row.data
-  }
-  return {}
-}
-
+/**
+ * Modal for editing a row's values or confirming row deletion.
+ *
+ * `rowData` is initialized from the `row` prop at mount time only. Both call-sites
+ * conditionally mount this component per open, so each open gets fresh state. If a
+ * call-site ever keeps it mounted across target-row changes, it must supply a `key`
+ * prop (e.g. the row id) so React remounts with the new row's values.
+ */
 export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess }: RowModalProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
@@ -90,18 +67,14 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
   const columns = schema?.columns || []
 
   const [rowData, setRowData] = useState<Record<string, unknown>>(() =>
-    getInitialRowData(mode, columns, row)
+    mode === 'edit' && row ? row.data : {}
   )
   const [error, setError] = useState<string | null>(null)
-  const createRowMutation = useCreateTableRow({ workspaceId, tableId })
   const updateRowMutation = useUpdateTableRow({ workspaceId, tableId })
   const deleteRowMutation = useDeleteTableRow({ workspaceId, tableId })
   const deleteRowsMutation = useDeleteTableRows({ workspaceId, tableId })
   const isSubmitting =
-    createRowMutation.isPending ||
-    updateRowMutation.isPending ||
-    deleteRowMutation.isPending ||
-    deleteRowsMutation.isPending
+    updateRowMutation.isPending || deleteRowMutation.isPending || deleteRowsMutation.isPending
 
   const handleFormSubmit = async (e?: React.FormEvent) => {
     e?.preventDefault()
@@ -110,16 +83,14 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
     try {
       const cleanData = cleanRowData(columns, rowData)
 
-      if (mode === 'add') {
-        await createRowMutation.mutateAsync({ data: cleanData })
-      } else if (mode === 'edit' && row) {
+      if (row) {
         await updateRowMutation.mutateAsync({ rowId: row.id, data: cleanData })
       }
 
       onSuccess()
     } catch (err) {
-      logger.error(`Failed to ${mode} row:`, err)
-      setError(getErrorMessage(err, `Failed to ${mode} row`))
+      logger.error('Failed to edit row:', err)
+      setError(getErrorMessage(err, 'Failed to edit row'))
     }
   }
 
@@ -143,7 +114,6 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
   }
 
   const handleClose = () => {
-    setRowData({})
     setError(null)
     onClose()
   }
@@ -160,11 +130,6 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
         title={`Delete ${isSingleRow ? 'Row' : `${deleteCount} Rows`}`}
         description={
           <>
-            {error && (
-              <span className='mb-3 block rounded-lg border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-3.5 py-3 text-[var(--status-error-text)] text-small'>
-                {error}
-              </span>
-            )}
             Are you sure you want to delete {isSingleRow ? 'this row' : `these ${deleteCount} rows`}
             ?{' '}
             <span className='text-[var(--text-error)]'>
@@ -179,32 +144,21 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
           pending: isSubmitting,
           pendingLabel: 'Deleting...',
         }}
-      />
+      >
+        <ChipModalError>{error}</ChipModalError>
+      </ChipConfirmModal>
     )
   }
 
-  const isAddMode = mode === 'add'
-
   return (
-    <ChipModal
-      open={isOpen}
-      onOpenChange={handleClose}
-      srTitle={isAddMode ? 'Add New Row' : 'Edit Row'}
-      size='lg'
-    >
-      <ChipModalHeader onClose={() => handleClose()}>
-        <div className='flex flex-col gap-1'>
-          <h2 className='font-semibold text-md'>{isAddMode ? 'Add New Row' : 'Edit Row'}</h2>
-          <p className='font-normal text-[var(--text-tertiary)] text-small'>
-            {isAddMode ? 'Fill in the values for' : 'Update values for'} {table?.name ?? 'table'}
-          </p>
-        </div>
-      </ChipModalHeader>
-      <ChipModalBody className='max-h-[60vh] overflow-y-auto'>
-        <form onSubmit={handleFormSubmit} className='flex flex-col gap-4'>
+    <ChipModal open={isOpen} onOpenChange={handleClose} srTitle='Edit Row' size='lg'>
+      <ChipModalHeader onClose={handleClose}>Edit Row</ChipModalHeader>
+      <ChipModalBody>
+        <p className='px-2 text-[var(--text-tertiary)] text-small'>
+          Update values for {table?.name ?? 'table'}
+        </p>
+        <form onSubmit={handleFormSubmit} className='contents'>
           <button type='submit' hidden disabled={isSubmitting} />
-          <ErrorMessage error={error} />
-
           {columns.map((column) => (
             <ColumnField
               key={column.name}
@@ -214,19 +168,14 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
             />
           ))}
         </form>
+        <ChipModalError>{error}</ChipModalError>
       </ChipModalBody>
       <ChipModalFooter
         onCancel={handleClose}
         cancelDisabled={isSubmitting}
         primaryAction={{
-          label: isSubmitting
-            ? isAddMode
-              ? 'Adding...'
-              : 'Updating...'
-            : isAddMode
-              ? 'Add Row'
-              : 'Update Row',
-          onClick: handleFormSubmit,
+          label: isSubmitting ? 'Updating...' : 'Update Row',
+          onClick: () => handleFormSubmit(),
           disabled: isSubmitting,
         }}
       />
@@ -234,16 +183,6 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
   )
 }
 
-function ErrorMessage({ error }: { error: string | null }) {
-  if (!error) return null
-
-  return (
-    <div className='rounded-lg border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-3.5 py-3 text-[var(--status-error-text)] text-small'>
-      {error}
-    </div>
-  )
-}
-
 interface ColumnFieldProps {
   column: ColumnDefinition
   value: unknown
@@ -251,62 +190,76 @@ interface ColumnFieldProps {
 }
 
 function ColumnField({ column, value, onChange }: ColumnFieldProps) {
-  return (
-    <div className='flex flex-col gap-2'>
-      <Label htmlFor={column.name} className='font-medium text-small'>
-        {column.name}
-        {column.required && <span className='text-[var(--text-error)]'> *</span>}
-        {column.unique && (
-          <span className='ml-1.5 font-normal text-[var(--text-tertiary)] text-xs'>(unique)</span>
-        )}
-      </Label>
+  const checkboxId = useId()
+  const title = (
+    <>
+      {column.name}
+      {column.unique && (
+        <span className='ml-1.5 font-normal text-[var(--text-tertiary)] text-xs'>(unique)</span>
+      )}
+    </>
+  )
+  const hint = `Type: ${column.type}${column.required ? '' : ' (optional)'}`
 
-      {column.type === 'boolean' ? (
+  if (column.type === 'boolean') {
+    return (
+      <ChipModalField type='custom' title={title} required={column.required} hint={hint}>
         <div className='flex items-center gap-2'>
           <Checkbox
-            id={column.name}
+            id={checkboxId}
             checked={Boolean(value)}
             onCheckedChange={(checked) => onChange(checked === true)}
           />
           <Label
-            htmlFor={column.name}
+            htmlFor={checkboxId}
             className='font-normal text-[var(--text-tertiary)] text-small'
           >
             {value ? 'True' : 'False'}
           </Label>
         </div>
-      ) : column.type === 'json' ? (
-        <ChipTextarea
-          id={column.name}
-          value={formatValueForInput(value, column.type)}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder='{"key": "value"}'
-          rows={4}
-          className='font-mono text-caption'
-          required={column.required}
-        />
-      ) : column.type === 'date' ? (
+      </ChipModalField>
+    )
+  }
+
+  if (column.type === 'json') {
+    return (
+      <ChipModalField
+        type='textarea'
+        title={title}
+        required={column.required}
+        hint={hint}
+        mono
+        value={formatValueForInput(value, column.type)}
+        onChange={onChange}
+        placeholder='{"key": "value"}'
+        rows={4}
+      />
+    )
+  }
+
+  if (column.type === 'date') {
+    return (
+      <ChipModalField type='custom' title={title} required={column.required} hint={hint}>
         <DatePicker
           mode='single'
           value={formatValueForInput(value, column.type) || undefined}
           onChange={(dateStr) => onChange(dateStr)}
           placeholder='Select date'
         />
-      ) : (
-        <ChipInput
-          id={column.name}
-          type={column.type === 'number' ? 'number' : 'text'}
-          value={formatValueForInput(value, column.type)}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={`Enter ${column.name}`}
-          required={column.required}
-        />
-      )}
+      </ChipModalField>
+    )
+  }
 
-      <div className='text-[var(--text-tertiary)] text-caption'>
-        Type: {column.type}
-        {!column.required && ' (optional)'}
-      </div>
-    </div>
+  return (
+    <ChipModalField
+      type='input'
+      title={title}
+      required={column.required}
+      hint={hint}
+      inputType={column.type === 'number' ? 'number' : 'text'}
+      value={formatValueForInput(value, column.type)}
+      onChange={onChange}
+      placeholder={`Enter ${column.name}`}
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/constants.ts b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/constants.ts
index 74168a26a25..7ccc298fca9 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/constants.ts
@@ -12,9 +12,6 @@ export const ADD_COL_WIDTH = 120
  *  and the table's reserved padding-right while a sidebar is open. */
 export const COLUMN_SIDEBAR_WIDTH = 400
 
-/** Number of skeleton rows shown while the table body is loading. */
-export const SKELETON_ROW_COUNT = 10
-
 export const CELL =
   'border-[var(--border)] border-r border-b px-2 py-[7px] align-middle select-none'
 export const CELL_CHECKBOX =
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
index 39c02e8c16c..9705169c036 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
@@ -6,7 +6,7 @@ import { createLogger } from '@sim/logger'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
-import { Skeleton, toast, useToast } from '@/components/emcn'
+import { toast, useToast } from '@/components/emcn'
 import { Loader, TableX } from '@/components/emcn/icons'
 import type { RunLimit, RunMode, TableFindMatch } from '@/lib/api/contracts/tables'
 import { cn } from '@/lib/core/utils/cn'
@@ -44,16 +44,11 @@ import { ContextMenu } from '../context-menu'
 import { NewColumnDropdown } from '../new-column-dropdown'
 import type { WorkflowConfig } from '../workflow-sidebar'
 import { ExpandedCellPopover } from './cells'
-import { ADD_COL_WIDTH, CELL_HEADER_CHECKBOX, COL_WIDTH, SELECTION_TINT_BG } from './constants'
+import { ADD_COL_WIDTH, COL_WIDTH, SELECTION_TINT_BG } from './constants'
 import { DataRow } from './data-row'
 import { ColumnHeaderMenu, WorkflowGroupMetaCell } from './headers'
 import { TableFind } from './table-find'
-import {
-  AddRowButton,
-  SelectAllCheckbox,
-  TableBodySkeleton,
-  TableColGroup,
-} from './table-primitives'
+import { AddRowButton, SelectAllCheckbox, TableColGroup } from './table-primitives'
 import type { DisplayColumn } from './types'
 import {
   buildHeaderGroups,
@@ -81,12 +76,8 @@ const EMPTY_FIND_MATCHES: readonly TableFindMatch[] = Object.freeze([])
 
 const COL_WIDTH_MIN = 80
 const COL_WIDTH_AUTO_FIT_MAX = 1000
-const SKELETON_COL_COUNT = 4
 const ROW_HEIGHT_ESTIMATE = 35
 
-const CELL_HEADER =
-  'border-[var(--border)] border-r border-b bg-[var(--bg)] px-2 py-[7px] text-left align-middle'
-
 /**
  * Snapshot of grid selection state the wrapper needs to render `<TableActionBar>`.
  * Fired from a `useEffect` so the callback identity doesn't drive re-renders.
@@ -641,13 +632,13 @@ export function TableGrid({
     [selectionAnchor, selectionFocus]
   )
 
-  const displayColCount = isLoadingTable ? SKELETON_COL_COUNT : displayColumns.length
   const tableWidth = useMemo(() => {
-    const colsWidth = isLoadingTable
-      ? displayColCount * COL_WIDTH
-      : displayColumns.reduce((sum, col) => sum + (columnWidths[col.key] ?? COL_WIDTH), 0)
+    const colsWidth = displayColumns.reduce(
+      (sum, col) => sum + (columnWidths[col.key] ?? COL_WIDTH),
+      0
+    )
     return checkboxColWidth + colsWidth + ADD_COL_WIDTH
-  }, [isLoadingTable, displayColCount, displayColumns, columnWidths, checkboxColWidth])
+  }, [displayColumns, columnWidths, checkboxColWidth])
 
   const resizeIndicatorLeft = useMemo(() => {
     if (!resizingColumn) return 0
@@ -1219,7 +1210,7 @@ export function TableGrid({
     handleClearSelection()
   }
 
-  // Populate the wrapper's table-rename undo sink. The wrapper's <ResourceHeader>
+  // Populate the wrapper's table-rename undo sink. The wrapper's <Resource.Header>
   // breadcrumb rename calls back here so the rename is part of the grid's undo
   // stack (Cmd-Z restores the previous name).
   pushTableRenameUndoSinkRef.current = (previousName: string, newName: string) => {
@@ -3484,45 +3475,13 @@ export function TableGrid({
               className='table-fixed border-separate border-spacing-0 text-small'
               style={{ width: `${tableWidth}px` }}
             >
-              {isLoadingTable ? (
-                <colgroup>
-                  <col style={{ width: checkboxColWidth }} />
-                  {Array.from({ length: SKELETON_COL_COUNT }).map((_, i) => (
-                    <col key={i} style={{ width: COL_WIDTH }} />
-                  ))}
-                  <col style={{ width: ADD_COL_WIDTH }} />
-                </colgroup>
-              ) : (
-                <TableColGroup
-                  columns={displayColumns}
-                  columnWidths={columnWidths}
-                  checkboxColWidth={checkboxColWidth}
-                />
-              )}
+              <TableColGroup
+                columns={displayColumns}
+                columnWidths={columnWidths}
+                checkboxColWidth={checkboxColWidth}
+              />
               <thead ref={theadRef} className='sticky top-0 z-10'>
-                {isLoadingTable ? (
-                  <tr>
-                    <th className={CELL_HEADER_CHECKBOX}>
-                      <div className='flex items-center justify-center'>
-                        <Skeleton className='size-[14px] rounded-xs' />
-                      </div>
-                    </th>
-                    {Array.from({ length: SKELETON_COL_COUNT }).map((_, i) => (
-                      <th key={i} className={CELL_HEADER}>
-                        <div className='flex h-[20px] min-w-0 items-center gap-1.5'>
-                          <Skeleton className='size-[14px] shrink-0 rounded-xs' />
-                          <Skeleton className='h-[14px]' style={{ width: `${56 + i * 16}px` }} />
-                        </div>
-                      </th>
-                    ))}
-                    <th className={CELL_HEADER}>
-                      <div className='flex h-[20px] items-center gap-2'>
-                        <Skeleton className='size-[14px] shrink-0 rounded-xs' />
-                        <Skeleton className='h-[14px] w-[72px]' />
-                      </div>
-                    </th>
-                  </tr>
-                ) : (
+                {isLoadingTable ? null : (
                   <>
                     {hasWorkflowGroup && (
                       <tr>
@@ -3680,103 +3639,101 @@ export function TableGrid({
                 )}
               </thead>
               <tbody ref={tbodyRef}>
-                {isLoadingTable || isLoadingRows ? (
-                  <TableBodySkeleton colCount={displayColCount} />
-                ) : (
-                  (() => {
-                    const virtualItems = rowVirtualizer.getVirtualItems()
-                    // `item.start`/`item.end` include `scrollMargin` (the sticky-header
-                    // offset) but `getTotalSize()` already nets it out, so both spacer
-                    // heights are computed relative to `scrollMargin`.
-                    const scrollMargin = rowVirtualizer.options.scrollMargin
-                    const paddingTop =
-                      virtualItems.length > 0 ? virtualItems[0].start - scrollMargin : 0
-                    const paddingBottom =
-                      virtualItems.length > 0
-                        ? rowVirtualizer.getTotalSize() -
-                          (virtualItems[virtualItems.length - 1].end - scrollMargin)
-                        : 0
-                    return (
-                      <>
-                        {paddingTop > 0 && (
-                          <tr aria-hidden>
-                            <td
-                              colSpan={displayColumns.length + 1}
-                              style={{ height: paddingTop }}
-                            />
-                          </tr>
-                        )}
-                        {virtualItems.map((virtualRow) => {
-                          const index = virtualRow.index
-                          const row = rows[index]
-                          if (!row) return null
-                          return (
-                            <DataRow
-                              key={row.id}
-                              row={row}
-                              columns={displayColumns}
-                              workspaceId={workspaceId}
-                              rowIndex={index}
-                              isFirstRow={index === 0}
-                              editingColumnName={
-                                editingCell?.rowId === row.id ? editingCell.columnName : null
-                              }
-                              initialCharacter={
-                                editingCell?.rowId === row.id ? initialCharacter : null
-                              }
-                              pendingCellValue={
-                                pendingUpdate && pendingUpdate.rowId === row.id
-                                  ? pendingUpdate.data
-                                  : null
-                              }
-                              normalizedSelection={normalizedSelection}
-                              onClick={handleCellClick}
-                              onDoubleClick={handleCellDoubleClick}
-                              onSave={handleInlineSave}
-                              onCancel={handleInlineCancel}
-                              onContextMenu={handleRowContextMenu}
-                              onCellMouseDown={handleCellMouseDown}
-                              onCellMouseEnter={handleCellMouseEnter}
-                              isRowChecked={rowSelectionIncludes(rowSelection, row.id)}
-                              onRowToggle={handleRowToggle}
-                              onRowMouseDown={handleRowMouseDown}
-                              onRowMouseEnter={handleRowMouseEnter}
-                              runningCount={runningByRowId[row.id] ?? 0}
-                              hasWorkflowColumns={hasWorkflowColumns}
-                              numRegionWidth={numRegionWidth}
-                              onStopRow={onStopRow}
-                              onRunRow={onRunRow}
-                              workflowGroups={tableWorkflowGroups}
-                              activeDispatches={activeDispatches}
-                              pinnedOffsets={pinnedOffsets.size > 0 ? pinnedOffsets : undefined}
-                              lastPinnedColKey={lastPinnedColKey}
-                            />
-                          )
-                        })}
-                        {paddingBottom > 0 && (
-                          <tr aria-hidden>
-                            <td
-                              colSpan={displayColumns.length + 1}
-                              style={{ height: paddingBottom }}
-                            />
-                          </tr>
-                        )}
-                        {isFetchingNextPage && (
-                          <tr>
-                            <td colSpan={displayColumns.length + 1} className='h-[35px] p-0'>
-                              <div className='flex items-center justify-center'>
-                                <Loader
-                                  animate
-                                  className='size-[14px] shrink-0 text-[var(--text-tertiary)]'
-                                />
-                              </div>
-                            </td>
-                          </tr>
-                        )}
-                      </>
-                    )
-                  })()
-                )}
+                {isLoadingTable || isLoadingRows
+                  ? null
+                  : (() => {
+                      const virtualItems = rowVirtualizer.getVirtualItems()
+                      // `item.start`/`item.end` include `scrollMargin` (the sticky-header
+                      // offset) but `getTotalSize()` already nets it out, so both spacer
+                      // heights are computed relative to `scrollMargin`.
+                      const scrollMargin = rowVirtualizer.options.scrollMargin
+                      const paddingTop =
+                        virtualItems.length > 0 ? virtualItems[0].start - scrollMargin : 0
+                      const paddingBottom =
+                        virtualItems.length > 0
+                          ? rowVirtualizer.getTotalSize() -
+                            (virtualItems[virtualItems.length - 1].end - scrollMargin)
+                          : 0
+                      return (
+                        <>
+                          {paddingTop > 0 && (
+                            <tr aria-hidden>
+                              <td
+                                colSpan={displayColumns.length + 1}
+                                style={{ height: paddingTop }}
+                              />
+                            </tr>
+                          )}
+                          {virtualItems.map((virtualRow) => {
+                            const index = virtualRow.index
+                            const row = rows[index]
+                            if (!row) return null
+                            return (
+                              <DataRow
+                                key={row.id}
+                                row={row}
+                                columns={displayColumns}
+                                workspaceId={workspaceId}
+                                rowIndex={index}
+                                isFirstRow={index === 0}
+                                editingColumnName={
+                                  editingCell?.rowId === row.id ? editingCell.columnName : null
+                                }
+                                initialCharacter={
+                                  editingCell?.rowId === row.id ? initialCharacter : null
+                                }
+                                pendingCellValue={
+                                  pendingUpdate && pendingUpdate.rowId === row.id
+                                    ? pendingUpdate.data
+                                    : null
+                                }
+                                normalizedSelection={normalizedSelection}
+                                onClick={handleCellClick}
+                                onDoubleClick={handleCellDoubleClick}
+                                onSave={handleInlineSave}
+                                onCancel={handleInlineCancel}
+                                onContextMenu={handleRowContextMenu}
+                                onCellMouseDown={handleCellMouseDown}
+                                onCellMouseEnter={handleCellMouseEnter}
+                                isRowChecked={rowSelectionIncludes(rowSelection, row.id)}
+                                onRowToggle={handleRowToggle}
+                                onRowMouseDown={handleRowMouseDown}
+                                onRowMouseEnter={handleRowMouseEnter}
+                                runningCount={runningByRowId[row.id] ?? 0}
+                                hasWorkflowColumns={hasWorkflowColumns}
+                                numRegionWidth={numRegionWidth}
+                                onStopRow={onStopRow}
+                                onRunRow={onRunRow}
+                                workflowGroups={tableWorkflowGroups}
+                                activeDispatches={activeDispatches}
+                                pinnedOffsets={pinnedOffsets.size > 0 ? pinnedOffsets : undefined}
+                                lastPinnedColKey={lastPinnedColKey}
+                              />
+                            )
+                          })}
+                          {paddingBottom > 0 && (
+                            <tr aria-hidden>
+                              <td
+                                colSpan={displayColumns.length + 1}
+                                style={{ height: paddingBottom }}
+                              />
+                            </tr>
+                          )}
+                          {isFetchingNextPage && (
+                            <tr>
+                              <td colSpan={displayColumns.length + 1} className='h-[35px] p-0'>
+                                <div className='flex items-center justify-center'>
+                                  <Loader
+                                    animate
+                                    className='size-[14px] shrink-0 text-[var(--text-tertiary)]'
+                                  />
+                                </div>
+                              </td>
+                            </tr>
+                          )}
+                        </>
+                      )
+                    })()}
               </tbody>
             </table>
             {resizingColumn && (
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-primitives.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-primitives.tsx
index 5bb8f0c1ace..79730174d9e 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-primitives.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-primitives.tsx
@@ -1,17 +1,10 @@
 'use client'
 
 import React from 'react'
-import { Button, Checkbox, Skeleton } from '@/components/emcn'
+import { Button, Checkbox } from '@/components/emcn'
 import { Plus } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
-import {
-  ADD_COL_WIDTH,
-  CELL,
-  CELL_CHECKBOX,
-  CELL_HEADER_CHECKBOX,
-  COL_WIDTH,
-  SKELETON_ROW_COUNT,
-} from './constants'
+import { ADD_COL_WIDTH, CELL_HEADER_CHECKBOX, COL_WIDTH } from './constants'
 import type { DisplayColumn } from './types'
 
 export const TableColGroup = React.memo(function TableColGroup({
@@ -34,38 +27,6 @@ export const TableColGroup = React.memo(function TableColGroup({
   )
 })
 
-export const TableBodySkeleton = React.memo(function TableBodySkeleton({
-  colCount,
-}: {
-  colCount: number
-}) {
-  return (
-    <>
-      {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-        <tr key={rowIndex}>
-          <td className={cn(CELL_CHECKBOX, 'text-center')}>
-            <div className='flex min-h-[20px] items-center justify-center'>
-              <span className='text-[var(--text-tertiary)] text-xs tabular-nums'>
-                {rowIndex + 1}
-              </span>
-            </div>
-          </td>
-          {Array.from({ length: colCount }).map((_, colIndex) => {
-            const width = 72 + ((rowIndex + colIndex) % 4) * 24
-            return (
-              <td key={colIndex} className={CELL}>
-                <div className='flex min-h-[20px] items-center'>
-                  <Skeleton className='h-[16px]' style={{ width: `${width}px` }} />
-                </div>
-              </td>
-            )
-          })}
-        </tr>
-      ))}
-    </>
-  )
-})
-
 export const SelectAllCheckbox = React.memo(function SelectAllCheckbox({
   checked,
   onCheckedChange,
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx
index 12873f78309..c10ab133ac2 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx
@@ -1,51 +1,21 @@
-import { Skeleton } from '@/components/emcn'
+'use client'
 
-const SKELETON_ROW_COUNT = 8
-const COLUMN_COUNT = 5
+import { Table as TableIcon } from '@/components/emcn'
+import {
+  type BreadcrumbItem,
+  ResourceChromeFallback,
+} from '@/app/workspace/[workspaceId]/components'
 
-export default function TableDetailLoading() {
-  return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-[var(--border)] border-b px-[16px] py-[8.5px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[8px]'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[44px] rounded-[4px]' />
-            <Skeleton className='h-[14px] w-[8px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[100px] rounded-[4px]' />
-          </div>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[28px] w-[80px] rounded-[6px]' />
-          </div>
-        </div>
-      </div>
-      <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full'>
-          <thead>
-            <tr className='border-[var(--border)] border-b'>
-              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
-                <th key={i} className='px-[12px] py-[8px] text-left'>
-                  <Skeleton className='h-[12px] w-[72px] rounded-[4px]' />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-[var(--border)] border-b'>
-                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
-                  <td key={colIndex} className='px-[12px] py-[10px]'>
-                    <Skeleton
-                      className='h-[14px] rounded-[4px]'
-                      style={{ width: `${80 + (colIndex % 3) * 40}px` }}
-                    />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  )
+const noop = () => {}
+
+const BREADCRUMBS: BreadcrumbItem[] = [
+  { label: 'Tables', icon: TableIcon, onClick: noop },
+  { label: '…', terminal: true },
+]
+
+export default function TableLoading() {
+  // The table editor's header has no static actions at load (import/run controls
+  // are data-gated) and its options bar is sort + filter with no search. The grid
+  // body fills in once the editor mounts, so no table chrome is rendered here.
+  return <ResourceChromeFallback icon={TableIcon} breadcrumbs={BREADCRUMBS} hasSort hasFilter />
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx
index 236a52ea621..57a68a8485f 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx
@@ -4,7 +4,7 @@ import { useCallback, useMemo, useReducer, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
-import { ChipConfirmModal, toast } from '@/components/emcn'
+import { Chip, ChipConfirmModal, toast } from '@/components/emcn'
 import { Download, Pencil, Table as TableIcon, Trash, Upload } from '@/components/emcn/icons'
 import type { RunLimit, RunMode } from '@/lib/api/contracts/tables'
 import { captureEvent } from '@/lib/posthog/client'
@@ -12,8 +12,7 @@ import type { ColumnDefinition, Filter, TableRow as TableRowType, WorkflowGroup
 import { getColumnId } from '@/lib/table/column-keys'
 import {
   type ColumnOption,
-  ResourceHeader,
-  ResourceOptionsBar,
+  Resource,
   type SortConfig,
 } from '@/app/workspace/[workspaceId]/components'
 import { LogDetails } from '@/app/workspace/[workspaceId]/logs/components'
@@ -171,7 +170,7 @@ export function Table({
   }, [])
   const onCloseSlideout = () => dispatch({ type: 'CLOSE' })
   const onOpenRowModal = (row: TableRowType) => setEditingRow(row)
-  // useCallback because <ResourceHeader> is memo-wrapped — these flow into
+  // useCallback because <Resource.Header> is memo-wrapped — these flow into
   // the breadcrumbs / headerActions memos, whose identity drives that re-render.
   const onRequestDeleteTable = useCallback(() => setShowDeleteTableConfirm(true), [])
   const onRequestImportCsv = useCallback(() => setIsImportCsvOpen(true), [])
@@ -344,7 +343,7 @@ export function Table({
     onSave: (_id, name) => {
       const data = tableDataRef.current
       if (data) pushTableRenameUndoSinkRef.current?.(data.name, name)
-      renameTableMutation.mutate({ tableId, name })
+      return renameTableMutation.mutateAsync({ tableId, name })
     },
   })
 
@@ -528,13 +527,11 @@ export function Table({
   return (
     <div className='relative flex h-full flex-col overflow-hidden'>
       {!embedded && (
-        <ResourceHeader
+        <Resource.Header
           icon={TableIcon}
           breadcrumbs={breadcrumbs}
-          createTrigger={createTrigger}
-          actions={headerActions}
-          leadingActions={
-            <>
+          aside={
+            <div className='flex items-center gap-1.5'>
               <ImportProgressMenu workspaceId={workspaceId} tableId={tableId} />
               {selection.totalRunning > 0 || selection.hasActiveDispatch ? (
                 <RunStatusControl
@@ -543,18 +540,32 @@ export function Table({
                   isStopping={cancelRunsMutation.isPending}
                 />
               ) : null}
-            </>
+              {headerActions?.map((action) => (
+                <Chip
+                  key={action.label}
+                  leftIcon={action.icon}
+                  onClick={action.onClick}
+                  disabled={action.disabled}
+                >
+                  {action.label}
+                </Chip>
+              ))}
+              {createTrigger}
+            </div>
           }
         />
       )}
       {/* Sort + filter render in both modes (left-aligned). In embedded (mothership)
-          mode there's no ResourceHeader, so the run/stop control rides in the options
-          bar's right-aligned `trailing` slot — opposite the left-aligned filter/sort. */}
-      <ResourceOptionsBar
+          mode there's no Resource.Header, so the run/stop control rides in the options
+          bar's right-aligned `aside` slot — opposite the left-aligned filter/sort. */}
+      <Resource.Options
         sort={sortConfig}
-        onFilterToggle={() => setFilterOpen((prev) => !prev)}
-        filterActive={filterOpen || !!queryOptions.filter}
-        trailing={
+        filter={{
+          mode: 'toggle',
+          active: filterOpen || !!queryOptions.filter,
+          onToggle: () => setFilterOpen((prev) => !prev),
+        }}
+        aside={
           embedded && (selection.totalRunning > 0 || selection.hasActiveDispatch) ? (
             <RunStatusControl
               running={selection.totalRunning}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/components/import-csv-dialog/import-csv-dialog.tsx b/apps/sim/app/workspace/[workspaceId]/tables/components/import-csv-dialog/import-csv-dialog.tsx
index 987f7db6e92..a718f010cc7 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/components/import-csv-dialog/import-csv-dialog.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/components/import-csv-dialog/import-csv-dialog.tsx
@@ -10,11 +10,11 @@ import {
   ChipCombobox,
   ChipModal,
   ChipModalBody,
+  ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
   type ComboboxOption,
-  Label,
   Table,
   TableBody,
   TableCell,
@@ -379,7 +379,6 @@ export function ImportCsvDialog({
         {!parsed ? (
           <ChipModalField
             type='file'
-            flush
             title='Import CSV'
             accept='.csv,.tsv'
             disabled={parsing}
@@ -389,38 +388,38 @@ export function ImportCsvDialog({
             error={parseError ?? undefined}
           />
         ) : (
-          <div className='flex flex-col gap-4'>
-            <div className='flex items-center justify-between gap-3 rounded-sm border border-[var(--border)] p-2'>
-              <div className='flex min-w-0 flex-col'>
-                <span className='truncate text-[var(--text-primary)] text-caption'>
-                  {parsed.file.name}
-                </span>
-                <span className='text-[var(--text-tertiary)] text-xs'>
-                  {parsed.headers.length} columns
-                </span>
+          <>
+            <ChipModalField type='custom' title='File'>
+              <div className='flex items-center justify-between gap-3 rounded-sm border border-[var(--border)] p-2'>
+                <div className='flex min-w-0 flex-col'>
+                  <span className='truncate text-[var(--text-primary)] text-caption'>
+                    {parsed.file.name}
+                  </span>
+                  <span className='text-[var(--text-tertiary)] text-xs'>
+                    {parsed.headers.length} columns
+                  </span>
+                </div>
+                <Button variant='ghost' size='sm' onClick={resetState}>
+                  Change file
+                </Button>
               </div>
-              <Button variant='ghost' size='sm' onClick={resetState}>
-                Change file
-              </Button>
-            </div>
+            </ChipModalField>
 
-            <div className='flex flex-col gap-2'>
-              <Label>Mode</Label>
+            <ChipModalField type='custom' title='Mode'>
               <ButtonGroup value={mode} onValueChange={handleModeChange}>
                 <ButtonGroupItem value='append'>Append</ButtonGroupItem>
                 <ButtonGroupItem value='replace'>Replace all rows</ButtonGroupItem>
               </ButtonGroup>
-            </div>
+            </ChipModalField>
 
-            <div className='flex flex-col gap-2'>
-              <div className='flex items-center justify-between'>
-                <Label>Column mapping</Label>
-                {skipCount > 0 && (
+            <ChipModalField type='custom' title='Column mapping'>
+              {skipCount > 0 && (
+                <div className='flex justify-end'>
                   <Button variant='ghost' size='sm' onClick={handleCreateAllUnmapped}>
                     Create columns for {skipCount} unmapped
                   </Button>
-                )}
-              </div>
+                </div>
+              )}
               <div className='overflow-hidden rounded-sm border border-[var(--border)]'>
                 <div className='max-h-[320px] overflow-auto'>
                   <Table>
@@ -480,39 +479,28 @@ export function ImportCsvDialog({
                 {' · '}
                 {skipCount} skipped
               </span>
-            </div>
-
-            {hasWarning && (
-              <div className='flex flex-col gap-1'>
-                {missingRequired.length > 0 && (
-                  <p className='text-[var(--text-error)] text-caption leading-tight'>
-                    Missing required column(s): {missingRequired.join(', ')}
-                  </p>
-                )}
-                {duplicateTargets.length > 0 && (
-                  <p className='text-[var(--text-error)] text-caption leading-tight'>
-                    Multiple CSV columns target: {duplicateTargets.join(', ')} (pick one)
-                  </p>
-                )}
-              </div>
+            </ChipModalField>
+
+            {missingRequired.length > 0 && (
+              <ChipModalError>
+                Missing required column(s): {missingRequired.join(', ')}
+              </ChipModalError>
+            )}
+            {duplicateTargets.length > 0 && (
+              <ChipModalError>
+                Multiple CSV columns target: {duplicateTargets.join(', ')} (pick one)
+              </ChipModalError>
             )}
 
             {mode === 'replace' && !hasWarning && (
-              <p className='text-[var(--text-error)] text-caption leading-tight'>
+              <ChipModalError>
                 Replace will permanently delete the {table.rowCount.toLocaleString()} existing
                 row(s) before inserting the new rows.
-              </p>
+              </ChipModalError>
             )}
 
-            {submitError && (
-              <p
-                className='text-[var(--text-error)] text-caption leading-tight'
-                title={submitError}
-              >
-                {submitError}
-              </p>
-            )}
-          </div>
+            <ChipModalError title={submitError ?? undefined}>{submitError}</ChipModalError>
+          </>
         )}
       </ChipModalBody>
       <ChipModalFooter
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx b/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx
index 335030a6cce..4307a8bc121 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx
@@ -1,55 +1,35 @@
-import { Skeleton } from '@/components/emcn'
+'use client'
 
-const SKELETON_ROW_COUNT = 5
-const COLUMN_COUNT = 6
+import { Plus, Table as TableIcon, Upload } from '@/components/emcn'
+import {
+  type ChromeActionSpec,
+  ResourceChromeFallback,
+} from '@/app/workspace/[workspaceId]/components'
+
+const COLUMNS = [
+  { id: 'name', header: 'Name' },
+  { id: 'columns', header: 'Columns' },
+  { id: 'rows', header: 'Rows' },
+  { id: 'created', header: 'Created' },
+  { id: 'owner', header: 'Owner' },
+  { id: 'updated', header: 'Last Updated' },
+]
+
+const ACTIONS: ChromeActionSpec[] = [
+  { text: 'Import CSV', icon: Upload },
+  { text: 'New table', icon: Plus, variant: 'primary' },
+]
 
 export default function TablesLoading() {
   return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='size-[14px] rounded-[2px]' />
-            <Skeleton className='h-[14px] w-[44px] rounded-[4px]' />
-          </div>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[28px] w-[80px] rounded-[6px]' />
-          </div>
-        </div>
-      </div>
-      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
-        <div className='flex items-center'>
-          <Skeleton className='size-[14px] rounded-[2px]' />
-          <Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
-        </div>
-      </div>
-      <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full'>
-          <thead>
-            <tr className='border-[var(--border)] border-b'>
-              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
-                <th key={i} className='px-[12px] py-[8px] text-left'>
-                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-[var(--border)] border-b'>
-                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
-                  <td key={colIndex} className='px-[12px] py-[10px]'>
-                    <Skeleton
-                      className='h-[14px] rounded-[4px]'
-                      style={{ width: colIndex === 0 ? '128px' : '80px' }}
-                    />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <ResourceChromeFallback
+      icon={TableIcon}
+      title='Tables'
+      columns={COLUMNS}
+      actions={ACTIONS}
+      searchPlaceholder='Search tables...'
+      hasSort
+      hasFilter
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx b/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
index 19523e94a14..676fd3b6724 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
@@ -5,23 +5,19 @@ import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
 import { useParams, useRouter } from 'next/navigation'
 import type { ComboboxOption } from '@/components/emcn'
-import { ChipCombobox, ChipConfirmModal, toast, Upload } from '@/components/emcn'
+import { ChipCombobox, ChipConfirmModal, Plus, toast, Upload } from '@/components/emcn'
 import { Columns3, Rows3, Table as TableIcon } from '@/components/emcn/icons'
 import type { TableDefinition } from '@/lib/table'
 import { CSV_ASYNC_IMPORT_THRESHOLD_BYTES, generateUniqueTableName } from '@/lib/table/constants'
 import type {
   FilterTag,
+  ResourceAction,
   ResourceColumn,
   ResourceRow,
   SearchConfig,
   SortConfig,
 } from '@/app/workspace/[workspaceId]/components'
-import {
-  InlineRenameInput,
-  ownerCell,
-  Resource,
-  timeCell,
-} from '@/app/workspace/[workspaceId]/components'
+import { ownerCell, Resource, timeCell } from '@/app/workspace/[workspaceId]/components'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import {
   ImportCsvDialog,
@@ -84,7 +80,7 @@ export function Tables() {
   const importCsvAsync = useImportCsvAsync()
 
   const tableRename = useInlineRename({
-    onSave: (tableId, name) => renameTable.mutate({ tableId, name }),
+    onSave: (tableId, name) => renameTable.mutateAsync({ tableId, name }),
   })
 
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
@@ -171,20 +167,15 @@ export function Tables() {
           name: {
             icon: <TableIcon className='size-[14px]' />,
             label: table.name,
-            content:
-              tableRename.editingId === table.id ? (
-                <span className='flex min-w-0 items-center gap-3 font-medium text-[var(--text-body)] text-sm'>
-                  <span className='flex-shrink-0 text-[var(--text-icon)]'>
-                    <TableIcon className='size-[14px]' />
-                  </span>
-                  <InlineRenameInput
-                    value={tableRename.editValue}
-                    onChange={tableRename.setEditValue}
-                    onSubmit={tableRename.submitRename}
-                    onCancel={tableRename.cancelRename}
-                  />
-                </span>
-              ) : undefined,
+            editing:
+              tableRename.editingId === table.id
+                ? {
+                    value: tableRename.editValue,
+                    onChange: tableRename.setEditValue,
+                    onSubmit: tableRename.submitRename,
+                    onCancel: tableRename.cancelRename,
+                  }
+                : undefined,
           },
           columns: {
             icon: <Columns3 className='size-[14px]' />,
@@ -544,36 +535,54 @@ export function Tables() {
     }
   }, [tables, createTable, router, workspaceId])
 
+  const headerActions: ResourceAction[] = useMemo(
+    () => [
+      {
+        text: uploadButtonLabel,
+        icon: Upload,
+        onSelect: () => csvInputRef.current?.click(),
+        disabled: uploading || userPermissions.canEdit !== true,
+      },
+      {
+        text: 'New table',
+        icon: Plus,
+        onSelect: handleCreateTable,
+        disabled: uploading || userPermissions.canEdit !== true || createTable.isPending,
+        variant: 'primary',
+      },
+    ],
+    [
+      uploadButtonLabel,
+      uploading,
+      userPermissions.canEdit,
+      handleCreateTable,
+      createTable.isPending,
+    ]
+  )
+
   return (
     <>
-      <Resource
-        icon={TableIcon}
-        title='Tables'
-        create={{
-          label: 'New table',
-          onClick: handleCreateTable,
-          disabled: uploading || userPermissions.canEdit !== true || createTable.isPending,
-        }}
-        search={searchConfig}
-        sort={sortConfig}
-        filter={filterContent}
-        filterTags={filterTags}
-        leadingActions={<ImportProgressMenu workspaceId={workspaceId} />}
-        headerActions={[
-          {
-            label: uploadButtonLabel,
-            icon: Upload,
-            onClick: () => csvInputRef.current?.click(),
-            disabled: uploading || userPermissions.canEdit !== true,
-          },
-        ]}
-        columns={COLUMNS}
-        rows={rows}
-        onRowClick={handleRowClick}
-        onRowContextMenu={handleRowContextMenu}
-        isLoading={isLoading}
-        onContextMenu={handleContentContextMenu}
-      />
+      <Resource onContextMenu={handleContentContextMenu}>
+        <Resource.Header
+          icon={TableIcon}
+          title='Tables'
+          actions={headerActions}
+          aside={<ImportProgressMenu workspaceId={workspaceId} />}
+        />
+        <Resource.Options
+          search={searchConfig}
+          sort={sortConfig}
+          filterTags={filterTags}
+          filter={{ content: filterContent }}
+        />
+        <Resource.Table
+          columns={COLUMNS}
+          rows={rows}
+          onRowClick={handleRowClick}
+          onRowContextMenu={handleRowContextMenu}
+          isLoading={isLoading}
+        />
+      </Resource>
 
       <input
         ref={csvInputRef}
diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx b/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
index f3ce8a9f53f..13113084393 100644
--- a/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
@@ -143,7 +143,7 @@ export function Upgrade({ workspaceId }: UpgradeProps) {
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
       <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-        <Chip variant='ghost' leftIcon={ArrowLeft} onClick={handleBack}>
+        <Chip leftIcon={ArrowLeft} onClick={handleBack}>
           Back
         </Chip>
       </div>
@@ -211,7 +211,6 @@ export function Upgrade({ workspaceId }: UpgradeProps) {
               {/* Show / Hide all features */}
               <div className='flex flex-col items-center gap-6'>
                 <Chip
-                  variant='ghost'
                   onClick={() => setShowAllFeatures((prev) => !prev)}
                   aria-expanded={showAllFeatures}
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx
index 260fc24f88d..782ae929cbc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx
@@ -2,7 +2,6 @@
 
 import { useRef, useState } from 'react'
 import {
-  Chip,
   ChipConfirmModal,
   ChipModal,
   ChipModalBody,
@@ -97,39 +96,21 @@ export function VersionDescriptionModal({
         <ChipModalHeader onClose={() => handleCloseAttempt()}>Version Description</ChipModalHeader>
         <ChipModalBody>
           <ChipModalField
-            type='custom'
+            type='textarea'
             title={
-              <div className='flex items-center justify-between'>
-                <span>
-                  {currentDescription ? 'Edit the' : 'Add a'} description for{' '}
-                  <span className='font-medium text-[var(--text-primary)]'>{versionName}</span>
-                </span>
-                <Chip
-                  variant='filled'
-                  flush
-                  onClick={handleGenerateDescription}
-                  disabled={isGenerating || updateMutation.isPending}
-                >
-                  {isGenerating ? 'Generating...' : 'Generate'}
-                </Chip>
-              </div>
+              <span>
+                {currentDescription ? 'Edit the' : 'Add a'} description for{' '}
+                <span className='font-medium text-[var(--text-primary)]'>{versionName}</span>
+              </span>
             }
-            flush
-          >
-            <div className='flex flex-col gap-1.5'>
-              <textarea
-                placeholder='Describe the changes in this deployment version...'
-                className='min-h-[120px] w-full resize-none rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-medium font-sans text-[var(--text-primary)] text-sm outline-none transition-colors placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50 dark:bg-[var(--surface-4)]'
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                maxLength={2000}
-                disabled={isGenerating}
-              />
-              <p className='text-right text-[var(--text-tertiary)] text-xs'>
-                {description.length}/2000
-              </p>
-            </div>
-          </ChipModalField>
+            value={description}
+            onChange={setDescription}
+            placeholder='Describe the changes in this deployment version...'
+            maxLength={2000}
+            minHeight={120}
+            disabled={isGenerating}
+            hint={`${description.length}/2000`}
+          />
           <ChipModalError>
             {updateMutation.error?.message || generateMutation.error?.message}
           </ChipModalError>
@@ -137,6 +118,11 @@ export function VersionDescriptionModal({
         <ChipModalFooter
           onCancel={handleCloseAttempt}
           cancelDisabled={updateMutation.isPending || isGenerating}
+          secondaryAction={{
+            label: isGenerating ? 'Generating...' : 'Generate',
+            onClick: handleGenerateDescription,
+            disabled: isGenerating || updateMutation.isPending,
+          }}
           primaryAction={{
             label: updateMutation.isPending ? 'Saving...' : 'Save',
             onClick: handleSave,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index 0c2f8397cc3..5bc937da752 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -2,7 +2,14 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Settings2 } from 'lucide-react'
-import { Button, Checkbox, ChipModal, ChipModalBody, ChipModalHeader } from '@/components/emcn'
+import {
+  Button,
+  Checkbox,
+  ChipModal,
+  ChipModalBody,
+  ChipModalField,
+  ChipModalHeader,
+} from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
@@ -138,61 +145,49 @@ export function GroupedCheckboxList({
           count={selectedValues.length}
         />
       </Button>
-      <ChipModal
-        open={open}
-        onOpenChange={setOpen}
-        srTitle='Select PII Types to Detect'
-        size='lg'
-        className='flex max-h-[80vh] flex-col'
-      >
+      <ChipModal open={open} onOpenChange={setOpen} srTitle='Select PII Types to Detect' size='lg'>
         <ChipModalHeader onClose={() => setOpen(false)}>Select PII Types to Detect</ChipModalHeader>
-        <ChipModalBody className='min-h-0 flex-1 px-4' onWheel={(e) => e.stopPropagation()}>
-          <p className='text-[var(--text-muted)] text-sm'>
-            Choose which types of personally identifiable information to detect and block.
-          </p>
-
-          {/* Header with Select All and Clear */}
-          <div className='flex items-center justify-between border-b pb-3'>
-            <div className='flex items-center gap-2'>
-              <Checkbox
-                id='select-all'
-                checked={allSelected}
-                onCheckedChange={(checked) => {
-                  if (checked) {
-                    handleSelectAll()
-                  } else {
-                    handleClear()
-                  }
-                }}
-                disabled={disabled}
-              />
-              <label
-                htmlFor='select-all'
-                className='cursor-pointer font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-              >
-                Select all entities
-              </label>
-            </div>
-            <Button variant='ghost' onClick={handleClear} disabled={disabled || noneSelected}>
-              <span className='flex items-center gap-1'>
-                Clear{!noneSelected && <span>({selectedValues.length})</span>}
-              </span>
-            </Button>
-          </div>
-
-          {/* Scrollable grouped checkboxes */}
-          <div
-            className='flex-1 overflow-y-auto pr-4'
-            onWheel={(e) => e.stopPropagation()}
-            style={{ maxHeight: '60vh' }}
+        <ChipModalBody onWheel={(e) => e.stopPropagation()}>
+          <ChipModalField
+            type='custom'
+            title='PII types'
+            hint='Choose which types of personally identifiable information to detect and block.'
           >
-            <div className='space-y-6'>
+            <div className='flex items-center justify-between border-[var(--border)] border-b pb-3'>
+              <div className='flex items-center gap-2'>
+                <Checkbox
+                  id='select-all'
+                  checked={allSelected}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      handleSelectAll()
+                    } else {
+                      handleClear()
+                    }
+                  }}
+                  disabled={disabled}
+                />
+                <label
+                  htmlFor='select-all'
+                  className='cursor-pointer font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+                >
+                  Select all entities
+                </label>
+              </div>
+              <Button variant='ghost' onClick={handleClear} disabled={disabled || noneSelected}>
+                <span className='flex items-center gap-1'>
+                  Clear{!noneSelected && <span>({selectedValues.length})</span>}
+                </span>
+              </Button>
+            </div>
+
+            <div className='flex flex-col gap-6'>
               {Object.entries(groupedOptions).map(([groupName, groupOptions]) => (
                 <div key={groupName}>
                   <h3 className='mb-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider'>
                     {groupName}
                   </h3>
-                  <div className='space-y-3'>
+                  <div className='flex flex-col gap-3'>
                     {groupOptions.map((option) => {
                       const optionIndex = options.findIndex(
                         (candidate) => candidate.id === option.id
@@ -231,7 +226,7 @@ export function GroupedCheckboxList({
                 </div>
               ))}
             </div>
-          </div>
+          </ChipModalField>
         </ChipModalBody>
       </ChipModal>
     </>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
index 909971e75a6..4fa50c4dc63 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
@@ -255,97 +255,92 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
 
       <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
         <button type='submit' hidden disabled={helpMutation.isPending || isProcessing} />
-        <ChipModalBody className='min-h-0'>
-          <div
-            ref={scrollContainerRef}
-            className='flex max-h-[60vh] min-h-0 flex-1 flex-col gap-4 overflow-y-auto'
-          >
-            <Controller
-              name='type'
-              control={control}
-              render={({ field, fieldState }) => (
-                <ChipModalField
-                  type='dropdown'
-                  title='Request'
-                  value={field.value}
-                  onChange={field.onChange}
-                  options={REQUEST_TYPE_OPTIONS}
-                  placeholder='Select a request type'
-                  error={fieldState.error?.message}
-                />
-              )}
-            />
-            <Controller
-              name='subject'
-              control={control}
-              render={({ field, fieldState }) => (
-                <ChipModalField
-                  type='input'
-                  title='Subject'
-                  value={field.value}
-                  onChange={field.onChange}
-                  placeholder='Brief description of your request'
-                  error={fieldState.error?.message}
-                />
-              )}
-            />
-            <Controller
-              name='message'
-              control={control}
-              render={({ field, fieldState }) => (
-                <ChipModalField
-                  type='textarea'
-                  title='Message'
-                  value={field.value}
-                  onChange={field.onChange}
-                  placeholder='Please provide details about your request...'
-                  rows={6}
-                  error={fieldState.error?.message}
-                />
-              )}
-            />
-            <ChipModalField
-              type='file'
-              title='Attach images (optional)'
-              label='Drop images here or click to browse'
-              description='PNG, JPEG, WebP, GIF (max 20MB each)'
-              accept={ACCEPTED_IMAGE_TYPES.join(',')}
-              multiple
-              onChange={processFiles}
-            />
-
-            {images.length > 0 && (
-              <ChipModalField type='custom' title='Uploaded images'>
-                <div className='grid grid-cols-2 gap-3'>
-                  {images.map((image, index) => (
-                    <div
-                      className='group relative overflow-hidden rounded-sm border'
-                      key={image.preview}
-                    >
-                      <div className='relative flex max-h-[120px] min-h-[80px] w-full items-center justify-center'>
-                        <Image
-                          src={image.preview}
-                          alt={`Preview ${index + 1}`}
-                          fill
-                          unoptimized
-                          sizes='(max-width: 768px) 100vw, 50vw'
-                          className='object-contain'
-                        />
-                        <button
-                          type='button'
-                          className='absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100'
-                          onClick={() => removeImage(index)}
-                        >
-                          <X className='size-[18px] text-white' />
-                        </button>
-                      </div>
-                      <div className='truncate p-1.5 text-caption'>{image.name}</div>
-                    </div>
-                  ))}
-                </div>
-              </ChipModalField>
+        <ChipModalBody ref={scrollContainerRef} className='max-h-[60vh]'>
+          <Controller
+            name='type'
+            control={control}
+            render={({ field, fieldState }) => (
+              <ChipModalField
+                type='dropdown'
+                title='Request'
+                value={field.value}
+                onChange={field.onChange}
+                options={REQUEST_TYPE_OPTIONS}
+                placeholder='Select a request type'
+                error={fieldState.error?.message}
+              />
+            )}
+          />
+          <Controller
+            name='subject'
+            control={control}
+            render={({ field, fieldState }) => (
+              <ChipModalField
+                type='input'
+                title='Subject'
+                value={field.value}
+                onChange={field.onChange}
+                placeholder='Brief description of your request'
+                error={fieldState.error?.message}
+              />
             )}
-          </div>
+          />
+          <Controller
+            name='message'
+            control={control}
+            render={({ field, fieldState }) => (
+              <ChipModalField
+                type='textarea'
+                title='Message'
+                value={field.value}
+                onChange={field.onChange}
+                placeholder='Please provide details about your request...'
+                rows={6}
+                error={fieldState.error?.message}
+              />
+            )}
+          />
+          <ChipModalField
+            type='file'
+            title='Attach images (optional)'
+            label='Drop images here or click to browse'
+            description='PNG, JPEG, WebP, GIF (max 20MB each)'
+            accept={ACCEPTED_IMAGE_TYPES.join(',')}
+            multiple
+            onChange={processFiles}
+          />
+
+          {images.length > 0 && (
+            <ChipModalField type='custom' title='Uploaded images'>
+              <div className='grid grid-cols-2 gap-3'>
+                {images.map((image, index) => (
+                  <div
+                    className='group relative overflow-hidden rounded-sm border'
+                    key={image.preview}
+                  >
+                    <div className='relative flex max-h-[120px] min-h-[80px] w-full items-center justify-center'>
+                      <Image
+                        src={image.preview}
+                        alt={`Preview ${index + 1}`}
+                        fill
+                        unoptimized
+                        sizes='(max-width: 768px) 100vw, 50vw'
+                        className='object-contain'
+                      />
+                      <button
+                        type='button'
+                        className='absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100'
+                        onClick={() => removeImage(index)}
+                      >
+                        <X className='size-[18px] text-white' />
+                      </button>
+                    </div>
+                    <div className='truncate p-1.5 text-caption'>{image.name}</div>
+                  </div>
+                ))}
+              </div>
+            </ChipModalField>
+          )}
         </ChipModalBody>
 
         <ChipModalFooter
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
index 8d0b438a467..4b887150453 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
@@ -271,8 +271,9 @@ export function DeleteModal({
           type='input'
           title={
             <span>
-              Type <span className='font-medium text-[var(--text-primary)]'>{workspaceName}</span>{' '}
-              to confirm
+              Type&nbsp;
+              <span className='font-medium text-[var(--text-primary)]'>{workspaceName}</span>
+              &nbsp;to confirm
             </span>
           }
           value={confirmationText}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
index 70963a2b227..600d7776a1f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
@@ -158,6 +158,7 @@ export function InviteModal({
           onChange={handleEmailsChange}
           validate={validateEmail}
           error={errorMessage}
+          hint={fieldHint}
           placeholder={
             !canInviteMembers
               ? inviteDisabledReason || 'Only administrators can invite new teammates'
@@ -165,9 +166,6 @@ export function InviteModal({
           }
           disabled={isSubmitting || !canInviteMembers}
         />
-        {fieldHint && (
-          <p className='-mt-1 px-2 text-[var(--text-muted)] text-caption'>{fieldHint}</p>
-        )}
         <ChipModalField
           type='dropdown'
           title='Invite as'
diff --git a/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx b/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
deleted file mode 100644
index 931c6ca51ec..00000000000
--- a/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type * as React from 'react'
-import { ChevronRight } from 'lucide-react'
-import Link from 'next/link'
-import { cn } from '@/lib/core/utils/cn'
-
-interface BreadcrumbItem {
-  label: string
-  href?: string
-}
-
-interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
-  items: BreadcrumbItem[]
-}
-
-/**
- * Breadcrumb navigation component following emcn design patterns
- */
-function Breadcrumb({ items, className, ...props }: BreadcrumbProps) {
-  return (
-    <nav aria-label='Breadcrumb' className={cn('flex items-center gap-1.5', className)} {...props}>
-      {items.map((item, index) => {
-        const isLast = index === items.length - 1
-
-        return (
-          <div key={item.label} className='flex items-center gap-1.5'>
-            {item.href && !isLast ? (
-              <Link
-                href={item.href}
-                className='block max-w-[200px] truncate font-medium text-[var(--text-tertiary)] text-sm transition-colors hover-hover:text-[var(--text-primary)]'
-              >
-                {item.label}
-              </Link>
-            ) : (
-              <span
-                className={cn(
-                  'block max-w-[200px] truncate font-medium text-sm',
-                  isLast ? 'text-[var(--text-primary)]' : 'text-[var(--text-tertiary)]'
-                )}
-              >
-                {item.label}
-              </span>
-            )}
-
-            {!isLast && <ChevronRight className='size-[14px] text-[var(--text-muted)]' />}
-          </div>
-        )
-      })}
-    </nav>
-  )
-}
-
-export { Breadcrumb }
diff --git a/apps/sim/components/emcn/components/callout/callout.tsx b/apps/sim/components/emcn/components/callout/callout.tsx
deleted file mode 100644
index e4826c5b129..00000000000
--- a/apps/sim/components/emcn/components/callout/callout.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
-import { cn } from '@/lib/core/utils/cn'
-
-const calloutVariants = cva('flex items-center gap-2 rounded-lg border p-2.5 text-[12px]', {
-  variants: {
-    variant: {
-      default: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
-      info: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
-      success:
-        'border-[color-mix(in_srgb,var(--badge-success-text)_30%,transparent)] bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]',
-      warning:
-        'border-[color-mix(in_srgb,var(--badge-amber-text)_30%,transparent)] bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]',
-      destructive:
-        'border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)]',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-})
-
-const DEFAULT_ICONS = {
-  default: Info,
-  info: Info,
-  success: CheckCircle2,
-  warning: AlertTriangle,
-  destructive: AlertTriangle,
-} as const
-
-interface CalloutProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof calloutVariants> {
-  /** Icon component shown before the content. Pass `null` to hide. Defaults per variant. */
-  icon?: React.ComponentType<{ className?: string }> | null
-}
-
-/**
- * Inline note used to highlight short pieces of context inside a page or section.
- *
- * @example
- * ```tsx
- * <Callout>Applies organization-wide</Callout>
- * <Callout variant='warning'>This action is irreversible</Callout>
- * ```
- */
-function Callout({ className, variant, icon, children, role = 'note', ...props }: CalloutProps) {
-  const variantKey = (variant ?? 'default') as keyof typeof DEFAULT_ICONS
-  const Icon = icon === null ? null : (icon ?? DEFAULT_ICONS[variantKey])
-
-  return (
-    <div role={role} className={cn(calloutVariants({ variant }), className)} {...props}>
-      {Icon && <Icon className='size-[14px] shrink-0' />}
-      <span>{children}</span>
-    </div>
-  )
-}
-
-export { Callout, calloutVariants }
diff --git a/apps/sim/components/emcn/components/chip-date-picker/chip-date-picker.tsx b/apps/sim/components/emcn/components/chip-date-picker/chip-date-picker.tsx
index 3bccd7df0ad..50800f4a2ec 100644
--- a/apps/sim/components/emcn/components/chip-date-picker/chip-date-picker.tsx
+++ b/apps/sim/components/emcn/components/chip-date-picker/chip-date-picker.tsx
@@ -3,7 +3,7 @@
 import { forwardRef, useState } from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { Calendar, formatDateLabel } from '@/components/emcn/components/calendar/calendar'
-import { chipVariants } from '@/components/emcn/components/chip/chip'
+import { chipVariants, TRIGGER_BORDER_CLASS } from '@/components/emcn/components/chip/chip'
 import { POPOVER_ANIMATION_CLASSES } from '@/components/emcn/components/popover/popover-animation'
 import { ChevronDown } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
@@ -58,7 +58,11 @@ const ChipDatePicker = forwardRef<HTMLButtonElement, ChipDatePickerProps>(functi
           ref={ref}
           type='button'
           disabled={disabled}
-          className={cn(chipVariants({ variant: 'filled', fullWidth, flush }), className)}
+          className={cn(
+            chipVariants({ variant: 'filled', fullWidth, flush }),
+            TRIGGER_BORDER_CLASS,
+            className
+          )}
         >
           <span
             className={cn(
diff --git a/apps/sim/components/emcn/components/chip-input/chip-field-chrome.ts b/apps/sim/components/emcn/components/chip-input/chip-field-chrome.ts
deleted file mode 100644
index 02174d3fb69..00000000000
--- a/apps/sim/components/emcn/components/chip-input/chip-field-chrome.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/** The bare filled-surface tokens shared by `chipVariants` filled and the chip text fields. */
-export const chipFilledSurfaceTokens =
-  'border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-4)]'
-/** Filled surface shared by the chip text fields ({@link ChipInput}, {@link ChipTextarea}) — aligned with `Chip` / `ChipDropdown`. */
-export const chipFieldSurfaceClass = `rounded-lg ${chipFilledSurfaceTokens} transition-colors`
-/** Typography shared by the chip text fields — normal weight, `--text-body`, muted placeholder, no focus outline. */
-export const chipFieldTextClass =
-  'text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)]'
diff --git a/apps/sim/components/emcn/components/chip-input/chip-input.tsx b/apps/sim/components/emcn/components/chip-input/chip-input.tsx
index ffc2ea7fc5c..65c8017bd84 100644
--- a/apps/sim/components/emcn/components/chip-input/chip-input.tsx
+++ b/apps/sim/components/emcn/components/chip-input/chip-input.tsx
@@ -29,7 +29,7 @@ import * as React from 'react'
 import {
   chipFieldSurfaceClass,
   chipFieldTextClass,
-} from '@/components/emcn/components/chip-input/chip-field-chrome'
+} from '@/components/emcn/components/chip/chip-chrome'
 import { cn } from '@/lib/core/utils/cn'
 
 type ChipInputIcon = React.ComponentType<{ className?: string }>
diff --git a/apps/sim/components/emcn/components/chip-modal/chip-modal.tsx b/apps/sim/components/emcn/components/chip-modal/chip-modal.tsx
index 6b0bb4486d0..d6047abf56c 100644
--- a/apps/sim/components/emcn/components/chip-modal/chip-modal.tsx
+++ b/apps/sim/components/emcn/components/chip-modal/chip-modal.tsx
@@ -298,6 +298,13 @@ interface ChipModalInputFieldProps extends ChipModalFieldBaseProps {
   autoComplete?: string
   /** Native input type override. Defaults to `'text'`. */
   inputType?: 'text' | 'password' | 'url' | 'tel' | 'search' | 'number'
+  /**
+   * Renders the value in the monospace stack (`font-mono`). Use for
+   * code-like values (identifiers, keys, snippets) where the proportional
+   * stack hurts legibility.
+   * @default false
+   */
+  mono?: boolean
   /**
    * Called when the user presses Enter in the field. Wire this to the
    * modal's primary action so the field behaves like a form submit.
@@ -333,6 +340,13 @@ interface ChipModalTextareaFieldProps extends ChipModalFieldBaseProps {
    * the user benefits from controlling height.
    */
   resizable?: boolean
+  /**
+   * Renders the value in the monospace stack (`font-mono`). Use for
+   * code-like content (JSON payloads, env blobs) where alignment and
+   * character distinction matter.
+   * @default false
+   */
+  mono?: boolean
 }
 
 interface ChipModalDropdownFieldProps extends ChipModalFieldBaseProps {
@@ -492,6 +506,7 @@ function renderChipModalControl(
           maxLength={props.type === 'input' ? props.maxLength : undefined}
           autoComplete={props.autoComplete}
           disabled={props.disabled}
+          inputClassName={props.type === 'input' && props.mono ? 'font-mono' : undefined}
           {...aria}
         />
       )
@@ -506,6 +521,7 @@ function renderChipModalControl(
           rows={props.rows}
           disabled={props.disabled}
           resizable={props.resizable}
+          className={props.mono ? 'font-mono' : undefined}
           style={props.minHeight ? { minHeight: props.minHeight } : undefined}
           {...aria}
         />
@@ -750,11 +766,11 @@ export interface ChipModalFooterAction {
   /** Disables the button. */
   disabled?: boolean
   /**
-   * Chip variant, restricted to the three footer-appropriate options so a
+   * Chip variant, restricted to the footer-appropriate options so a
    * footer can never drift from the design system.
-   * @default 'primary' for `primaryAction`, 'filled' for `secondaryAction`
+   * @default 'primary' for `primaryAction`, the bare default chip for `secondaryAction`
    */
-  variant?: Extract<ChipProps['variant'], 'primary' | 'destructive' | 'filled'>
+  variant?: Extract<ChipProps['variant'], 'primary' | 'destructive'>
 }
 
 export interface ChipModalFooterProps {
@@ -832,7 +848,7 @@ function ChipModalFooter({
       leftSlot={
         secondaryAction ? (
           <Chip
-            variant={secondaryAction.variant ?? 'filled'}
+            variant={secondaryAction.variant}
             flush
             onClick={secondaryAction.onClick}
             disabled={secondaryAction.disabled}
@@ -842,7 +858,7 @@ function ChipModalFooter({
         ) : undefined
       }
     >
-      <Chip variant='filled' flush onClick={onCancel} disabled={cancelDisabled}>
+      <Chip flush onClick={onCancel} disabled={cancelDisabled}>
         Cancel
       </Chip>
       <Chip
@@ -876,7 +892,7 @@ export interface ChipConfirmAction {
    * "Promote to live").
    * @default 'destructive'
    */
-  variant?: Extract<ChipProps['variant'], 'primary' | 'destructive' | 'filled'>
+  variant?: Extract<ChipProps['variant'], 'primary' | 'destructive'>
   /**
    * Marks the action in-flight: disables both the confirm and dismiss buttons
    * and, when {@link ChipConfirmAction.pendingLabel} is set, shows it in place
@@ -986,7 +1002,7 @@ function ChipConfirmModal({
         {children}
       </ChipModalBody>
       <ChipModalFooterShell>
-        <Chip variant='filled' flush onClick={dismiss} disabled={confirm.pending}>
+        <Chip flush onClick={dismiss} disabled={confirm.pending}>
           {dismissLabel}
         </Chip>
         <Chip
diff --git a/apps/sim/components/emcn/components/chip-select/chip-select.tsx b/apps/sim/components/emcn/components/chip-select/chip-select.tsx
index 46170df76d3..370326361ff 100644
--- a/apps/sim/components/emcn/components/chip-select/chip-select.tsx
+++ b/apps/sim/components/emcn/components/chip-select/chip-select.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { chipVariants } from '@/components/emcn/components/chip/chip'
+import { chipVariants, TRIGGER_BORDER_CLASS } from '@/components/emcn/components/chip/chip'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -164,9 +164,15 @@ export function ChipSelect({
     }
   }
 
+  /**
+   * Inline size constraints for the menu surface. When an explicit
+   * `dropdownWidth` is set it must also lift the menu's generic
+   * `max-w-[220px]` cap, otherwise the requested width would be clamped.
+   */
   const contentStyle: React.CSSProperties = {}
   if (dropdownWidth === 'trigger') contentStyle.width = 'var(--radix-dropdown-menu-trigger-width)'
   else if (typeof dropdownWidth === 'number') contentStyle.width = dropdownWidth
+  if (dropdownWidth != null) contentStyle.maxWidth = 'none'
   if (typeof maxHeight === 'number') contentStyle.maxHeight = maxHeight
 
   const renderOption = (opt: ChipSelectOption) => {
@@ -212,6 +218,7 @@ export function ChipSelect({
           aria-label={ariaLabel}
           className={cn(
             chipVariants({ variant: 'filled', flush: true, fullWidth }),
+            TRIGGER_BORDER_CLASS,
             fullWidth ? 'w-full justify-between' : 'w-fit max-w-[240px]',
             className
           )}
diff --git a/apps/sim/components/emcn/components/chip-switch/chip-switch.tsx b/apps/sim/components/emcn/components/chip-switch/chip-switch.tsx
index ab626860964..2635b8ca208 100644
--- a/apps/sim/components/emcn/components/chip-switch/chip-switch.tsx
+++ b/apps/sim/components/emcn/components/chip-switch/chip-switch.tsx
@@ -79,7 +79,7 @@ export function ChipSwitch<T extends string>({
             onClick={() => onChange(option.value)}
             className={cn(
               chipVariants({
-                variant: isActive ? 'border-shadow' : 'ghost',
+                variant: isActive ? 'border-shadow' : 'default',
                 flush: true,
               }),
               'justify-center',
diff --git a/apps/sim/components/emcn/components/chip-textarea/chip-textarea.tsx b/apps/sim/components/emcn/components/chip-textarea/chip-textarea.tsx
index 734d4852e17..67ff14c78b0 100644
--- a/apps/sim/components/emcn/components/chip-textarea/chip-textarea.tsx
+++ b/apps/sim/components/emcn/components/chip-textarea/chip-textarea.tsx
@@ -23,7 +23,7 @@ import * as React from 'react'
 import {
   chipFieldSurfaceClass,
   chipFieldTextClass,
-} from '@/components/emcn/components/chip-input/chip-field-chrome'
+} from '@/components/emcn/components/chip/chip-chrome'
 import { cn } from '@/lib/core/utils/cn'
 
 export interface ChipTextareaProps
diff --git a/apps/sim/components/emcn/components/chip/chip-chevron.tsx b/apps/sim/components/emcn/components/chip/chip-chevron.tsx
new file mode 100644
index 00000000000..6b2e9fcdc67
--- /dev/null
+++ b/apps/sim/components/emcn/components/chip/chip-chevron.tsx
@@ -0,0 +1,34 @@
+import { ChevronDown } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
+
+interface ChipChevronDownProps {
+  /** Layout-only extras (e.g. `ml-auto` to push the chevron flush right). Never chrome. */
+  className?: string
+}
+
+/**
+ * Canonical trailing chevron adornment for chip-style dropdown triggers — a
+ * 16px hidden-from-AT slot centering the 10×6 {@link ChevronDown} glyph in
+ * `--text-icon`, matching the chevron `ChipDropdown` owns internally. Use it
+ * inside hand-built `chipVariants` triggers (breadcrumb dropdowns, header
+ * "New column"-style buttons) instead of re-deriving the span + icon markup.
+ *
+ * @example
+ * <button type='button' className={chipVariants()}>
+ *   <span className={chipContentLabelClass}>New column</span>
+ *   <ChipChevronDown />
+ * </button>
+ */
+export function ChipChevronDown({ className }: ChipChevronDownProps) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        'inline-flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]',
+        className
+      )}
+    >
+      <ChevronDown className='h-[6px] w-[10px]' />
+    </span>
+  )
+}
diff --git a/apps/sim/components/emcn/components/chip/chip-chrome.ts b/apps/sim/components/emcn/components/chip/chip-chrome.ts
new file mode 100644
index 00000000000..9b3205f984d
--- /dev/null
+++ b/apps/sim/components/emcn/components/chip/chip-chrome.ts
@@ -0,0 +1,50 @@
+/** The filled FILL (surface only, no border) — used by the borderless `filled` chip variant. */
+export const chipFilledFillTokens = 'bg-[var(--surface-5)] dark:bg-[var(--surface-4)]'
+/**
+ * The filled surface WITH a `--border-1` border, for chip FIELDS ({@link ChipInput},
+ * {@link ChipTextarea}). The `filled` chip variant itself is borderless
+ * ({@link chipFilledFillTokens}); pill triggers (`ChipDropdown`/`ChipSelect`/
+ * `ChipDatePicker`) opt into the border via `TRIGGER_BORDER_CLASS`.
+ */
+export const chipFilledSurfaceTokens = `border border-[var(--border-1)] ${chipFilledFillTokens}`
+/** Filled surface shared by the chip text fields ({@link ChipInput}, {@link ChipTextarea}) — aligned with `Chip` / `ChipDropdown`. */
+export const chipFieldSurfaceClass = `rounded-lg ${chipFilledSurfaceTokens} transition-colors`
+/** Typography shared by the chip text fields — normal weight, `--text-body`, muted placeholder, no focus outline. */
+export const chipFieldTextClass =
+  'text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)]'
+
+/**
+ * Icon↔label gap of the canonical chip-content row — the icon↔label pair inside
+ * a chip pill. Single source for `chipVariants`' base gap and for any non-chip
+ * surface that must visually match chip content (e.g. resource table cells).
+ * Like every token in this module, never re-derive the literal; import it.
+ */
+export const chipContentGap = 'gap-1.5'
+/**
+ * Chip pill geometry — height, centering, gap, radius, padding, text size — with
+ * NO interactivity (no `cursor-pointer`, no hover). `chipVariants` composes this
+ * for its base; static, chip-aligned surfaces (e.g. the resource header's
+ * current-location label or a non-navigable breadcrumb) reuse it directly to
+ * match a chip's shape without inheriting its hover.
+ */
+export const chipGeometryClass = `h-[30px] items-center ${chipContentGap} rounded-lg px-2 text-left text-sm`
+/** Chip-content icon (non-inverse): 16px, non-shrinking, `--text-icon`. Inverse chip variants override the color to `currentColor`. */
+export const chipContentIconClass = 'size-[16px] flex-shrink-0 text-[var(--text-icon)]'
+/** Chip-content label (non-inverse): truncating `--text-body` at `text-sm`. Inverse chip variants override the color to `currentColor`. */
+export const chipContentLabelClass = 'min-w-0 truncate text-[var(--text-body)] text-sm'
+/**
+ * Force-sizes a PRE-RENDERED icon node (`<svg>`/`<img>`/`<span>` avatar) to the
+ * 14px resource-row standard + `--text-icon` color — regardless of the size the
+ * consumer passed — so every table-row icon across every consumer matches (the
+ * resource rows run the app's default 14px icons, not the 16px chip-pill icon).
+ * Element-type child selectors out-specify the node's own `size-*`, so it wins
+ * without editing any consumer cell builder.
+ *
+ * This token serves resource-table ROW CELLS, not chip content itself. It lives
+ * in this module deliberately: the same cell builders compose it with
+ * {@link chipContentGap} to keep table cells visually aligned with chip
+ * content, and chip-chrome is the single home for that shared icon/label
+ * chrome — do not relocate it to a table-specific module.
+ */
+export const cellIconNodeClass =
+  'inline-flex flex-shrink-0 items-center text-[var(--text-icon)] [&>svg]:size-[14px] [&>img]:size-[14px] [&>span]:size-[14px]'
diff --git a/apps/sim/components/emcn/components/chip/chip.tsx b/apps/sim/components/emcn/components/chip/chip.tsx
index e9c71bc24f1..14310ad8a46 100644
--- a/apps/sim/components/emcn/components/chip/chip.tsx
+++ b/apps/sim/components/emcn/components/chip/chip.tsx
@@ -9,7 +9,12 @@ import {
 } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import Link, { type LinkProps } from 'next/link'
-import { chipFilledSurfaceTokens } from '@/components/emcn/components/chip-input/chip-field-chrome'
+import {
+  chipContentIconClass,
+  chipContentLabelClass,
+  chipFilledFillTokens,
+  chipGeometryClass,
+} from '@/components/emcn/components/chip/chip-chrome'
 import { cn } from '@/lib/core/utils/cn'
 
 /**
@@ -21,20 +26,23 @@ import { cn } from '@/lib/core/utils/cn'
  * - `chipVariants({...})` → any other element (`<div role='button'>`, `<DropdownMenuTrigger asChild>` inner, etc.)
  *
  * @remarks
- * Variants: `ghost` (transparent → `--surface-active` hover), `filled` (`--surface-active` → `--surface-6` hover),
- * `primary` (inverse surface), `destructive` (error-token surface, `--text-error`),
- * `border-shadow` (raised card-like surface with `--border-1` border and `--shadow-card`).
- * `active` renders ghost/filled in their selected state. `fullWidth` swaps `inline-flex` for block-level `flex`.
- * `flush` removes the default horizontal margin (`mx-0.5`) used by chip clusters — use when a single chip sits
- * inside its own layout slot (grid cell, table cell) where the cluster spacing is unwanted.
+ * The implicit **default** variant is the bare pill — transparent, `--surface-active` on hover. Omit `variant`
+ * to get it (shadcn-style); never write `variant='default'`. Named variants:
+ * `filled` (`--surface-5` light / `--surface-4` dark fill, `--surface-active` hover) — a borderless surface reserved for
+ * chip FIELDS/TRIGGERS ({@link ChipInput}/{@link ChipDropdown}/{@link ChipSelect}/{@link ChipDatePicker}), **never `Chip`
+ * itself**; those triggers add the `--border-1` outline themselves via `TRIGGER_BORDER_CLASS`;
+ * `primary` (inverse surface), `destructive` (error-token surface), `border-shadow` (raised card-like surface).
+ * `active` renders the default/filled chip in its selected state — `--surface-active` at rest, one surface darker
+ * (`--surface-6`) on hover. `fullWidth` swaps `inline-flex` for block-level `flex`. `flush` removes the default
+ * `mx-0.5` cluster margin — use when a single chip sits in its own layout slot (grid/table cell).
  */
 const chipVariants = cva(
-  'group h-[30px] cursor-pointer items-center gap-1.5 rounded-lg px-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60',
+  `group cursor-pointer ${chipGeometryClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
   {
     variants: {
       variant: {
-        ghost: 'hover-hover:bg-[var(--surface-active)]',
-        filled: `${chipFilledSurfaceTokens} hover-hover:bg-[var(--surface-active)]`,
+        default: 'hover-hover:bg-[var(--surface-active)]',
+        filled: `${chipFilledFillTokens} hover-hover:bg-[var(--surface-active)]`,
         primary:
           'bg-[var(--text-primary)] text-[var(--text-inverse)] hover-hover:bg-[var(--text-body)] hover-hover:text-[var(--text-inverse)] dark:bg-white dark:text-[var(--bg)] dark:hover-hover:bg-[var(--text-secondary)] dark:hover-hover:text-[var(--bg)]',
         destructive:
@@ -47,16 +55,33 @@ const chipVariants = cva(
       flush: { true: 'mx-0', false: 'mx-0.5' },
     },
     compoundVariants: [
-      { variant: 'ghost', active: true, className: 'bg-[var(--surface-active)]' },
-      { variant: 'filled', active: true, className: 'bg-[var(--surface-active)]' },
+      {
+        variant: 'default',
+        active: true,
+        className: 'bg-[var(--surface-active)] hover-hover:bg-[var(--surface-6)]',
+      },
+      {
+        variant: 'filled',
+        active: true,
+        className: 'bg-[var(--surface-active)] hover-hover:bg-[var(--surface-6)]',
+      },
     ],
-    defaultVariants: { variant: 'ghost', active: false, fullWidth: false, flush: false },
+    defaultVariants: { variant: 'default', active: false, fullWidth: false, flush: false },
   }
 )
 
 type ChipIcon = ComponentType<{ className?: string }>
 
-interface ChipBaseProps extends VariantProps<typeof chipVariants> {
+/**
+ * Variants a `Chip`/`ChipLink` may render. The `default` (bare) chip is implicit
+ * — omit `variant` to get it — and `filled` is excluded by design: it is reserved
+ * for chip fields/triggers, never `Chip` itself. For a selected/toggle chip use
+ * the `active` prop, not a variant.
+ */
+type ChipVariant = 'primary' | 'destructive' | 'border-shadow'
+
+interface ChipBaseProps extends Omit<VariantProps<typeof chipVariants>, 'variant'> {
+  variant?: ChipVariant
   /** Icon component rendered before the label. */
   leftIcon?: ChipIcon
   /** Icon component rendered after the label. */
@@ -66,8 +91,8 @@ interface ChipBaseProps extends VariantProps<typeof chipVariants> {
 
 /**
  * `primary` and `destructive` set text color on the chip itself — their icon
- * and label inherit via `currentColor`. `ghost` and `filled` need explicit
- * icon (`--text-icon`) and label (`--text-body`) colors.
+ * and label inherit via `currentColor`. The default and `filled` chips need
+ * explicit icon (`--text-icon`) and label (`--text-body`) colors.
  */
 function ChipContent({
   variant,
@@ -76,8 +101,8 @@ function ChipContent({
   children,
 }: ChipBaseProps) {
   const isInverse = variant === 'primary' || variant === 'destructive'
-  const iconClass = cn('size-[16px] flex-shrink-0', !isInverse && 'text-[var(--text-icon)]')
-  const labelClass = cn('min-w-0 flex-1 truncate', !isInverse && 'text-[var(--text-body)]')
+  const iconClass = cn(chipContentIconClass, isInverse && 'text-current')
+  const labelClass = cn(chipContentLabelClass, 'flex-1', isInverse && 'text-current')
   return (
     <>
       {LeftIcon ? <LeftIcon className={iconClass} /> : null}
@@ -140,7 +165,7 @@ const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
 })
 
 /**
- * 1px border applied to `filled` and `ghost` chip triggers to read as
+ * 1px border applied to `filled` and default chip triggers to read as
  * interactive form controls rather than static pills. Omitted on `primary`,
  * `destructive`, and `border-shadow` variants which carry their own surface
  * treatment.
diff --git a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
index f8db30090e3..b1a37fb400e 100644
--- a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
+++ b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
@@ -23,7 +23,7 @@
 import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { Check, ChevronRight, Circle, Search } from 'lucide-react'
-import { chipFieldSurfaceClass } from '@/components/emcn/components/chip-input/chip-field-chrome'
+import { chipFieldSurfaceClass } from '@/components/emcn/components/chip/chip-chrome'
 import { cn } from '@/lib/core/utils/cn'
 
 const ANIMATION_CLASSES =
diff --git a/apps/sim/components/emcn/components/form-field/form-field.tsx b/apps/sim/components/emcn/components/form-field/form-field.tsx
deleted file mode 100644
index 69b9c5c5290..00000000000
--- a/apps/sim/components/emcn/components/form-field/form-field.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import { Label } from '@/components/emcn'
-
-export interface FormFieldProps {
-  label: ReactNode
-  children: ReactNode
-  htmlFor?: string
-  optional?: boolean
-  error?: ReactNode
-}
-
-/**
- * Standard labeled field wrapper for forms and modals.
- */
-export function FormField({ label, children, htmlFor, optional = false, error }: FormFieldProps) {
-  return (
-    <div className='flex flex-col gap-2'>
-      <Label htmlFor={htmlFor}>
-        {label}
-        {optional ? <span className='ml-1 text-[var(--text-muted)]'>(optional)</span> : null}
-      </Label>
-      {children}
-      {error ? <p className='text-[12px] text-[var(--text-error)]'>{error}</p> : null}
-    </div>
-  )
-}
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index 7f961dcf6ff..134733fd363 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -1,30 +1,23 @@
-export {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  avatarStatusVariants,
-  avatarVariants,
-} from './avatar/avatar'
+export { Avatar, AvatarFallback, AvatarImage } from './avatar/avatar'
 export { Badge } from './badge/badge'
 export { Banner } from './banner/banner'
-export { Breadcrumb } from './breadcrumb/breadcrumb'
 export { Button, buttonVariants } from './button/button'
+export { ButtonGroup, ButtonGroupItem } from './button-group/button-group'
+export { Checkbox } from './checkbox/checkbox'
+export { Chip, ChipLink, chipVariants } from './chip/chip'
+export { ChipChevronDown } from './chip/chip-chevron'
 export {
-  ButtonGroup,
-  ButtonGroupItem,
-  buttonGroupItemVariants,
-  buttonGroupVariants,
-} from './button-group/button-group'
-export { Calendar, type CalendarProps, formatDateLabel, parseDateValue } from './calendar/calendar'
-export { Callout, calloutVariants } from './callout/callout'
-export {
-  Checkbox,
-  checkboxIconVariants,
-  checkboxVariants,
-} from './checkbox/checkbox'
-export { Chip, ChipLink, type ChipLinkProps, type ChipProps, chipVariants } from './chip/chip'
+  cellIconNodeClass,
+  chipContentGap,
+  chipContentIconClass,
+  chipContentLabelClass,
+  chipFieldSurfaceClass,
+  chipFieldTextClass,
+  chipFilledSurfaceTokens,
+  chipGeometryClass,
+} from './chip/chip-chrome'
 export { ChipCombobox } from './chip-combobox/chip-combobox'
-export { ChipDatePicker, type ChipDatePickerProps } from './chip-date-picker/chip-date-picker'
+export { ChipDatePicker } from './chip-date-picker/chip-date-picker'
 export {
   ChipDropdown,
   type ChipDropdownOption,
@@ -98,7 +91,6 @@ export {
 } from './dropdown-menu/dropdown-menu'
 export { Expandable, ExpandableContent } from './expandable/expandable'
 export { FieldDivider } from './field-divider/field-divider'
-export { FormField } from './form-field/form-field'
 export { Info } from './info/info'
 export {
   InfoCard,
@@ -145,7 +137,7 @@ export {
   usePopoverContext,
 } from './popover/popover'
 export { POPOVER_ANIMATION_CLASSES } from './popover/popover-animation'
-export { ProgressItem, progressItemVariants } from './progress-item/progress-item'
+export { ProgressItem } from './progress-item/progress-item'
 export { SecretInput } from './secret-input/secret-input'
 export { SecretReveal } from './secret-reveal/secret-reveal'
 export { Skeleton } from './skeleton/skeleton'
@@ -161,12 +153,7 @@ export {
   TableHeader,
   TableRow,
 } from './table/table'
-export {
-  type FileInputOptions,
-  TagInput,
-  type TagItem,
-  tagInputVariants,
-} from './tag-input/tag-input'
+export { type FileInputOptions, TagInput, type TagItem } from './tag-input/tag-input'
 export { Textarea } from './textarea/textarea'
 export { TimePicker, timePickerVariants } from './time-picker/time-picker'
 export { ToastProvider, toast, useToast } from './toast/toast'
diff --git a/apps/sim/components/emcn/components/toast/toast.tsx b/apps/sim/components/emcn/components/toast/toast.tsx
index bb41a3f2b23..34c218915de 100644
--- a/apps/sim/components/emcn/components/toast/toast.tsx
+++ b/apps/sim/components/emcn/components/toast/toast.tsx
@@ -372,7 +372,6 @@ function ToastItem({ toast: t, geometry, reduceMotion, onDismiss, onMeasure }: T
         </div>
         {t.action ? (
           <Chip
-            variant='filled'
             fullWidth
             flush
             onClick={() => {
diff --git a/apps/sim/components/emcn/index.ts b/apps/sim/components/emcn/index.ts
index 87e587339f1..6fcac7d268f 100644
--- a/apps/sim/components/emcn/index.ts
+++ b/apps/sim/components/emcn/index.ts
@@ -1,5 +1,4 @@
 export * from './components'
-export { Calendar } from './components/calendar/calendar'
 export {
   Table,
   TableBody,
diff --git a/apps/sim/ee/access-control/components/access-control.tsx b/apps/sim/ee/access-control/components/access-control.tsx
index 4f8f426aced..ad235559f80 100644
--- a/apps/sim/ee/access-control/components/access-control.tsx
+++ b/apps/sim/ee/access-control/components/access-control.tsx
@@ -158,7 +158,7 @@ function AddMembersModal({
                   onChange={(e) => setSearchTerm(e.target.value)}
                   className='min-w-0 flex-1'
                 />
-                <Chip variant='filled' onClick={handleToggleAll}>
+                <Chip onClick={handleToggleAll}>
                   {allFilteredSelected ? 'Deselect All' : 'Select All'}
                 </Chip>
               </div>
@@ -277,10 +277,7 @@ function ModelCheckboxGrid({
           onChange={(e) => setSearch(e.target.value)}
           className='min-w-0 flex-1'
         />
-        <Chip
-          variant='filled'
-          onClick={() => onSetModelsDenied(filteredModels, allFilteredAllowed)}
-        >
+        <Chip onClick={() => onSetModelsDenied(filteredModels, allFilteredAllowed)}>
           {allFilteredAllowed ? 'Block All' : 'Allow All'}
         </Chip>
       </div>
@@ -1111,7 +1108,6 @@ export function AccessControl() {
                           </div>
 
                           <Chip
-                            variant='ghost'
                             onClick={() => handleRemoveMember(member.id)}
                             disabled={removeMember.isPending}
                             className='flex-shrink-0'
@@ -1159,7 +1155,7 @@ export function AccessControl() {
           >
             Configure Permissions
           </ChipModalHeader>
-          <ChipModalBody className='max-h-[70vh] overflow-y-auto'>
+          <ChipModalBody>
             <ChipModalTabs
               tabs={[
                 { value: 'providers', label: 'Model Providers' },
@@ -1180,7 +1176,6 @@ export function AccessControl() {
                     className='min-w-0 flex-1'
                   />
                   <Chip
-                    variant='filled'
                     onClick={() => {
                       const allAllowed =
                         editingConfig?.allowedModelProviders === null ||
@@ -1226,7 +1221,6 @@ export function AccessControl() {
                     className='min-w-0 flex-1'
                   />
                   <Chip
-                    variant='filled'
                     onClick={() => {
                       const allAllowed =
                         editingConfig?.allowedIntegrations === null ||
@@ -1332,7 +1326,6 @@ export function AccessControl() {
                     className='min-w-0 flex-1'
                   />
                   <Chip
-                    variant='filled'
                     onClick={() => {
                       const allVisible = platformFeatures.every(
                         (f) => !editingConfig?.[f.configKey]
diff --git a/apps/sim/ee/components/info-note.tsx b/apps/sim/ee/components/info-note.tsx
new file mode 100644
index 00000000000..4b195c981e3
--- /dev/null
+++ b/apps/sim/ee/components/info-note.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react'
+import { Info } from 'lucide-react'
+
+interface InfoNoteProps {
+  children: ReactNode
+}
+
+/**
+ * Inline informational note for ee settings pages — a bordered, filled bar
+ * with a leading info icon and muted caption text.
+ */
+export function InfoNote({ children }: InfoNoteProps) {
+  return (
+    <div
+      role='note'
+      className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] p-2.5 text-[var(--text-muted)] text-caption'
+    >
+      <Info className='size-[14px] shrink-0' />
+      <span>{children}</span>
+    </div>
+  )
+}
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 56991f00b36..dc08b9b157e 100644
--- a/apps/sim/ee/data-drains/components/data-drains-settings.tsx
+++ b/apps/sim/ee/data-drains/components/data-drains-settings.tsx
@@ -7,7 +7,6 @@ import { ChevronDown, Plus } from 'lucide-react'
 import {
   Badge,
   Button,
-  Callout,
   Chip,
   ChipConfirmModal,
   ChipInput,
@@ -38,6 +37,7 @@ import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import { CADENCE_TYPES, DESTINATION_TYPES, SOURCE_TYPES } from '@/lib/data-drains/types'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
+import { InfoNote } from '@/ee/components/info-note'
 import { DESTINATION_FORM_REGISTRY } from '@/ee/data-drains/destinations/registry'
 import {
   useCreateDataDrain,
@@ -144,10 +144,10 @@ export function DataDrainsSettings() {
 
       <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-4.5 pt-4 pb-6'>
-          <Callout>
+          <InfoNote>
             Drains continuously export Sim data to your own storage on a schedule. Combine with Data
             Retention to satisfy long-term compliance archives.
-          </Callout>
+          </InfoNote>
 
           <ChipInput
             icon={Search}
@@ -198,7 +198,7 @@ export function DataDrainsSettings() {
               )
             ) : (
               <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
-                Click "New drain" above to get started
+                Click "New Drain" above to get started
               </div>
             )}
           </div>
@@ -292,7 +292,7 @@ function DrainRow({ drain, organizationId, expanded, onToggleExpand }: DrainRowP
           <Badge>{DESTINATION_LABELS[drain.destinationType]}</Badge>
         </TableCell>
         <TableCell>{CADENCE_LABELS[drain.scheduleCadence]}</TableCell>
-        <TableCell className='text-[13px] text-[var(--text-muted)]' suppressHydrationWarning>
+        <TableCell className='text-[var(--text-muted)] text-small' suppressHydrationWarning>
           {drain.lastRunAt ? new Date(drain.lastRunAt).toLocaleString() : 'Never'}
         </TableCell>
         <TableCell onClick={(e) => e.stopPropagation()}>
@@ -360,15 +360,15 @@ function DrainRunsPanel({ organizationId, drainId }: DrainRunsPanelProps) {
   const { data: runs, isLoading } = useDataDrainRuns(organizationId, drainId, 10)
 
   if (isLoading) {
-    return <div className='text-[13px] text-[var(--text-muted)]'>Loading runs...</div>
+    return <div className='text-[var(--text-muted)] text-small'>Loading runs...</div>
   }
   if (!runs || runs.length === 0) {
-    return <div className='text-[13px] text-[var(--text-muted)]'>No runs yet.</div>
+    return <div className='text-[var(--text-muted)] text-small'>No runs yet.</div>
   }
 
   return (
     <div className='flex flex-col gap-2'>
-      <div className='font-medium text-[13px] text-[var(--text-primary)]'>Recent runs</div>
+      <div className='font-medium text-[var(--text-primary)] text-small'>Recent runs</div>
       {runs.map((run) => (
         <RunRow key={run.id} run={run} />
       ))}
@@ -384,7 +384,7 @@ function RunRow({ run }: { run: DataDrainRun }) {
         ? 'text-[var(--text-error)]'
         : 'text-[var(--text-muted)]'
   return (
-    <div className='flex items-start justify-between gap-4 rounded-lg border border-[var(--border)] px-3 py-2 text-[12px]'>
+    <div className='flex items-start justify-between gap-4 rounded-lg border border-[var(--border)] px-3 py-2 text-caption'>
       <div className='flex flex-col gap-0.5'>
         <div className='flex items-center gap-2'>
           <span className={cn('font-medium', statusColor)}>{run.status}</span>
@@ -488,7 +488,7 @@ function CreateDrainModal({ organizationId, onClose }: CreateDrainModalProps) {
           />
         </ChipModalField>
 
-        <section className='flex flex-col gap-3 px-2'>
+        <section className='flex flex-col gap-4 px-2'>
           <spec.FormFields state={destState} setState={setDestState} />
         </section>
         <ChipModalError>{submitError}</ChipModalError>
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 c31dc64532a..4e3bff54a35 100644
--- a/apps/sim/ee/data-retention/components/data-retention-settings.tsx
+++ b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
@@ -3,11 +3,12 @@
 import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Callout, Chip, ChipSelect, toast } from '@/components/emcn'
+import { Chip, ChipSelect, toast } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { isBillingEnabled } from '@/lib/core/config/feature-flags'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
+import { InfoNote } from '@/ee/components/info-note'
 import { SettingRow } from '@/ee/components/setting-row'
 import {
   useOrganizationRetention,
@@ -173,7 +174,7 @@ export function DataRetentionSettings() {
       </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-8 pt-6 pb-6'>
-          <Callout>Applies organization-wide</Callout>
+          <InfoNote>Applies organization-wide</InfoNote>
           <SettingsSection label='Data Retention'>
             <div className='flex flex-col gap-5'>
               <SettingRow
diff --git a/apps/sim/ee/sso/components/sso-settings.tsx b/apps/sim/ee/sso/components/sso-settings.tsx
index f3df66ebaee..e3840b7492c 100644
--- a/apps/sim/ee/sso/components/sso-settings.tsx
+++ b/apps/sim/ee/sso/components/sso-settings.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { type ReactNode, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { Check, ChevronDown, Clipboard, Eye, EyeOff } from 'lucide-react'
@@ -12,10 +12,11 @@ import {
   ChipTextarea,
   Expandable,
   ExpandableContent,
-  FormField,
+  Label,
   Switch,
   toast,
 } from '@/components/emcn'
+import type { SsoRegistrationBody } from '@/lib/api/contracts/auth'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
 import { isBillingEnabled } from '@/lib/core/config/feature-flags'
@@ -29,6 +30,30 @@ import { useSubscriptionData } from '@/hooks/queries/subscription'
 
 const logger = createLogger('SSO')
 
+interface FormFieldProps {
+  label: ReactNode
+  children: ReactNode
+  optional?: boolean
+  error?: ReactNode
+}
+
+/**
+ * Page-level labeled-field row for the SSO settings form, matching the
+ * standalone-field rhythm: muted label, control, then a caption-sized error.
+ */
+function FormField({ label, children, optional = false, error }: FormFieldProps) {
+  return (
+    <div className='flex flex-col gap-[9px]'>
+      <Label className='font-normal text-[var(--text-muted)]'>
+        {label}
+        {optional ? <span className='ml-1'>(optional)</span> : null}
+      </Label>
+      {children}
+      {error ? <p className='text-[var(--text-error)] text-caption'>{error}</p> : null}
+    </div>
+  )
+}
+
 interface SSOProvider {
   id: string
   providerId: string
@@ -95,7 +120,7 @@ export function SSO() {
   const hasEnterprisePlan = subscriptionAccess.hasUsableEnterpriseAccess
 
   const isSSOProviderOwner =
-    !isBillingEnabled && userId ? providers.some((p: any) => p.userId === userId) : null
+    !isBillingEnabled && userId ? providers.some((p) => p.userId === userId) : null
 
   const configureSSOMutation = useConfigureSSO()
 
@@ -270,38 +295,42 @@ export function SSO() {
     try {
       const providerType = formData.providerType || 'oidc'
 
-      const requestBody: any = {
-        providerId: formData.providerId,
-        issuer: formData.issuerUrl,
-        domain: formData.domain,
-        providerType,
-        orgId: activeOrganization?.id,
-        mapping: {
-          id: 'sub',
-          email: 'email',
-          name: 'name',
-          image: 'picture',
-        },
-      }
-
-      if (providerType === 'oidc') {
-        requestBody.clientId = formData.clientId
-        requestBody.clientSecret = formData.clientSecret
-        requestBody.scopes = formData.scopes.split(',').map((s) => s.trim())
-      } else if (providerType === 'saml') {
-        requestBody.entryPoint = formData.entryPoint
-        requestBody.cert = formData.cert
-        requestBody.wantAssertionsSigned = formData.wantAssertionsSigned
-        if (formData.callbackUrl) requestBody.callbackUrl = formData.callbackUrl
-        if (formData.audience) requestBody.audience = formData.audience
-        if (formData.idpMetadata) requestBody.idpMetadata = formData.idpMetadata
-
-        requestBody.mapping = {
-          id: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier',
-          email: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress',
-          name: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name',
-        }
-      }
+      const requestBody: SsoRegistrationBody =
+        providerType === 'oidc'
+          ? {
+              providerType: 'oidc',
+              providerId: formData.providerId,
+              issuer: formData.issuerUrl,
+              domain: formData.domain,
+              orgId: activeOrganization?.id,
+              mapping: {
+                id: 'sub',
+                email: 'email',
+                name: 'name',
+                image: 'picture',
+              },
+              clientId: formData.clientId,
+              clientSecret: formData.clientSecret,
+              scopes: formData.scopes.split(',').map((s) => s.trim()),
+            }
+          : {
+              providerType: 'saml',
+              providerId: formData.providerId,
+              issuer: formData.issuerUrl,
+              domain: formData.domain,
+              orgId: activeOrganization?.id,
+              mapping: {
+                id: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier',
+                email: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress',
+                name: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name',
+              },
+              entryPoint: formData.entryPoint,
+              cert: formData.cert,
+              wantAssertionsSigned: formData.wantAssertionsSigned,
+              ...(formData.callbackUrl ? { callbackUrl: formData.callbackUrl } : {}),
+              ...(formData.audience ? { audience: formData.audience } : {}),
+              ...(formData.idpMetadata ? { idpMetadata: formData.idpMetadata } : {}),
+            }
 
       await configureSSOMutation.mutateAsync(requestBody)
 
@@ -320,17 +349,14 @@ export function SSO() {
   }
 
   const handleInputChange = (field: keyof typeof formData, value: string | boolean) => {
-    setFormData((prev) => {
-      const next = { ...prev, [field]: value }
-
-      if (field === 'providerType') {
-        setShowErrors(false)
-      }
+    const next = { ...formData, [field]: value }
 
-      validateAll(next)
+    if (field === 'providerType') {
+      setShowErrors(false)
+    }
 
-      return next
-    })
+    setFormData(next)
+    validateAll(next)
   }
 
   const isSaml = formData.providerType === 'saml'
@@ -499,7 +525,7 @@ export function SSO() {
         tabIndex={-1}
         readOnly
       />
-      <input type='text' name='hidden' className='hidden' autoComplete='false' />
+      <input type='text' name='hidden' className='hidden' autoComplete='off' />
 
       <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
         <div />
@@ -581,9 +607,6 @@ export function SSO() {
               }))}
               placeholder='Select or enter a provider ID'
               editable
-              className={cn(
-                showErrors && errors.providerId.length > 0 && 'border-[var(--text-error)]'
-              )}
             />
           </FormField>
 
@@ -684,11 +707,7 @@ export function SSO() {
                   }}
                   onBlurCapture={() => setShowClientSecret(false)}
                   onChange={(e) => handleInputChange('clientSecret', e.target.value)}
-                  style={
-                    !showClientSecret
-                      ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
-                      : undefined
-                  }
+                  inputClassName={!showClientSecret ? '[-webkit-text-security:disc]' : undefined}
                   error={showErrors && errors.clientSecret.length > 0}
                   endAdornment={
                     <Button
diff --git a/apps/sim/hooks/queries/kb/knowledge.ts b/apps/sim/hooks/queries/kb/knowledge.ts
index 160c5dff381..8978dd8e52d 100644
--- a/apps/sim/hooks/queries/kb/knowledge.ts
+++ b/apps/sim/hooks/queries/kb/knowledge.ts
@@ -23,6 +23,7 @@ import {
   deleteTagDefinitionContract,
   getKnowledgeBaseContract,
   getKnowledgeDocumentContract,
+  getTagUsageContract,
   type KnowledgeBaseData,
   type KnowledgeChunksResponse,
   type KnowledgeDocumentsResponse,
@@ -38,6 +39,7 @@ import {
   type SaveDocumentTagDefinitionsResult,
   saveDocumentTagDefinitionsContract,
   type TagDefinitionData,
+  type TagUsageData,
   updateKnowledgeBaseContract,
   updateKnowledgeChunkContract,
   updateKnowledgeDocumentContract,
@@ -56,6 +58,7 @@ export type {
   KnowledgeChunksResponse,
   KnowledgeDocumentsResponse,
   TagDefinitionData,
+  TagUsageData,
 }
 
 export const knowledgeKeys = {
@@ -67,6 +70,8 @@ export const knowledgeKeys = {
     [...knowledgeKeys.all, 'detail', knowledgeBaseId ?? ''] as const,
   tagDefinitions: (knowledgeBaseId: string) =>
     [...knowledgeKeys.detail(knowledgeBaseId), 'tagDefinitions'] as const,
+  tagUsage: (knowledgeBaseId: string) =>
+    [...knowledgeKeys.detail(knowledgeBaseId), 'tagUsage'] as const,
   documents: (knowledgeBaseId: string, paramsKey: string) =>
     [...knowledgeKeys.detail(knowledgeBaseId), 'documents', paramsKey] as const,
   document: (knowledgeBaseId: string, documentId: string) =>
@@ -783,6 +788,27 @@ export function useTagDefinitionsQuery(knowledgeBaseId?: string | null) {
   })
 }
 
+async function fetchTagUsage(
+  knowledgeBaseId: string,
+  signal?: AbortSignal
+): Promise<TagUsageData[]> {
+  const result = await requestJson(getTagUsageContract, {
+    params: { id: knowledgeBaseId },
+    signal,
+  })
+
+  return result.data
+}
+
+export function useTagUsageQuery(knowledgeBaseId?: string | null, options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: knowledgeKeys.tagUsage(knowledgeBaseId ?? ''),
+    queryFn: ({ signal }) => fetchTagUsage(knowledgeBaseId as string, signal),
+    enabled: Boolean(knowledgeBaseId) && (options?.enabled ?? true),
+    staleTime: 60 * 1000,
+  })
+}
+
 interface CreateTagDefinitionParams {
   knowledgeBaseId: string
   displayName: string
@@ -843,6 +869,9 @@ export function useCreateTagDefinition() {
       queryClient.invalidateQueries({
         queryKey: knowledgeKeys.tagDefinitions(knowledgeBaseId),
       })
+      queryClient.invalidateQueries({
+        queryKey: knowledgeKeys.tagUsage(knowledgeBaseId),
+      })
     },
   })
 }
@@ -870,6 +899,9 @@ export function useDeleteTagDefinition() {
       queryClient.invalidateQueries({
         queryKey: knowledgeKeys.tagDefinitions(knowledgeBaseId),
       })
+      queryClient.invalidateQueries({
+        queryKey: knowledgeKeys.tagUsage(knowledgeBaseId),
+      })
     },
   })
 }
diff --git a/apps/sim/hooks/use-inline-rename.ts b/apps/sim/hooks/use-inline-rename.ts
index 1e1d4e144ca..87c819e1a3b 100644
--- a/apps/sim/hooks/use-inline-rename.ts
+++ b/apps/sim/hooks/use-inline-rename.ts
@@ -1,9 +1,29 @@
 import { useCallback, useRef, useState } from 'react'
+import { createLogger } from '@sim/logger'
+
+const logger = createLogger('useInlineRename')
 
 interface UseInlineRenameProps {
-  onSave: (id: string, newName: string) => void
+  /**
+   * Persists the new name. Return the mutation promise (e.g. React Query's
+   * `mutateAsync(...)`) — NOT a fire-and-forget `mutate(...)` — so `isSaving`
+   * spans the in-flight request and a rejection can revive the edit session.
+   */
+  onSave: (id: string, newName: string) => void | Promise<unknown>
 }
 
+/**
+ * Multiplexed (id-keyed) inline rename, used across resource rows (tables, files,
+ * knowledge) via {@link ResourceCell.editing}. This is the across-rows variant of
+ * the sidebar's single-item `useItemRename`; it mirrors that hook's save flow:
+ * `submitRename` is async and flips an `isSaving` flag during `await onSave`
+ * (the analogue of `useItemRename`'s `isRenaming`), while the `doneRef` guard keeps
+ * a blur racing an Enter/Escape commit a harmless no-op.
+ *
+ * TODO: the resource rename still intermittently unfocuses; the deeper re-render
+ * cause (parent remounting the editing cell) is tracked separately. This hook is
+ * aligned to the proven sidebar pattern as the first step.
+ */
 export function useInlineRename({ onSave }: UseInlineRenameProps) {
   const onSaveRef = useRef(onSave)
   onSaveRef.current = onSave
@@ -16,22 +36,60 @@ export function useInlineRename({ onSave }: UseInlineRenameProps) {
   const [editValue, setEditValue] = useState('')
   const editValueRef = useRef(editValue)
   editValueRef.current = editValue
+  const [isSaving, setIsSaving] = useState(false)
 
   const startRename = useCallback((id: string, currentName: string) => {
     doneRef.current = false
     setEditingId(id)
+    /**
+     * Sync the ref eagerly (not just via the render-time assignment) so an
+     * in-flight save's `finally` that resolves before the next render still
+     * sees this id as the active edit and leaves the new session alone.
+     */
+    editingIdRef.current = id
     setEditValue(currentName)
     originalNameRef.current = currentName
+    setIsSaving(false)
   }, [])
 
-  const submitRename = useCallback(() => {
+  const submitRename = useCallback(async () => {
     if (doneRef.current) return
     doneRef.current = true
     const id = editingIdRef.current
     const trimmed = editValueRef.current.trim()
-    setEditingId(null)
-    if (!id || !trimmed || trimmed === originalNameRef.current) return
-    onSaveRef.current(id, trimmed)
+    if (!id || !trimmed || trimmed === originalNameRef.current) {
+      setEditingId(null)
+      return
+    }
+    setIsSaving(true)
+    try {
+      await onSaveRef.current(id, trimmed)
+      /**
+       * Only clear editing state if this submit still owns the edit session.
+       * Without the guard, a slow save for row A would tear down a rename of
+       * row B started while A's save was in flight. A superseded submit's
+       * cleanup is a no-op — `startRename` already reset `isSaving` for the
+       * new session, and the new session's own submit handles its lifecycle.
+       */
+      if (editingIdRef.current === id) {
+        setEditingId(null)
+      }
+    } catch (error) {
+      logger.error('Failed to rename item', { error, id, newName: trimmed })
+      /**
+       * Mirror `useItemRename`'s failure path: stay in edit mode with the
+       * original name restored (no silent data loss, no unhandled rejection)
+       * and re-arm `doneRef` so the revived session can submit or cancel again.
+       */
+      if (editingIdRef.current === id) {
+        setEditValue(originalNameRef.current)
+        doneRef.current = false
+      }
+    } finally {
+      if (editingIdRef.current === id) {
+        setIsSaving(false)
+      }
+    }
   }, [])
 
   const cancelRename = useCallback(() => {
@@ -42,6 +100,7 @@ export function useInlineRename({ onSave }: UseInlineRenameProps) {
   return {
     editingId,
     editValue,
+    isSaving,
     setEditValue,
     startRename,
     submitRename,
diff --git a/bun.lock b/bun.lock
index 6ccdd5bd67f..7498ac72abf 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "simstudio",