Merge remote-tracking branch 'origin/staging' into perf/dev-server-memory

# Conflicts:
#	apps/sim/blocks/registry.ts

Author: TheodoreSpeaks

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

@@ -0,0 +1,123 @@
+---
+paths:
+  - "apps/sim/app/workspace/*/settings/**"
+  - "apps/sim/ee/**/components/**"
+---
+
+# Settings Pages
+
+Every settings page renders through the shared **`SettingsPanel`** primitive
+(`@/app/workspace/[workspaceId]/settings/components/settings-panel`). It owns the
+page chrome so pages never hand-roll it: a fixed header bar (right-aligned
+actions), a scroll region, and a centered `max-w-[48rem]` content column led by a
+**title + description that come from navigation metadata**. Pages render only
+their body.
+
+Do NOT hand-roll any of these in a settings page — they are the panel's job:
+
+- `<div className='flex h-full flex-col bg-[var(--bg)]'>` shell
+- the header bar (`flex flex-shrink-0 … px-[16px] pt-[8.5px] pb-[8.5px]`)
+- the scroll container (`min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]`)
+- the content column (`mx-auto … max-w-[48rem] … gap-7`)
+- a title block (`<h1 className='font-medium text-[var(--text-body)] text-lg'>` + `<p className='text-[var(--text-muted)] text-md'>`)
+- the page-level search input
+
+## Canonical page shape
+
+```tsx
+import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
+
+return (
+  <SettingsPanel
+    actions={
+      <Chip leftIcon={Plus} variant='primary' onClick={onCreate}>
+        Create
+      </Chip>
+    }
+    search={{ value: searchTerm, onChange: setSearchTerm, placeholder: 'Search …' }}
+  >
+    {/* body only — sections, lists, forms */}
+  </SettingsPanel>
+)
+```
+
+When the page has modal/dialog siblings, wrap them with the panel in a fragment:
+
+```tsx
+return (
+  <>
+    <SettingsPanel actions={…}>{body}</SettingsPanel>
+    <SomeModal … />
+  </>
+)
+```
+
+## `SettingsPanel` props
+
+- `actions?: ReactNode` — right-aligned header chips. Wrap multiple in a fragment;
+  the slot reserves the 30px chip height even when empty, so vertical rhythm is
+  identical across pages. Conditional actions are fine: `actions={canManage && <Chip…/>}`.
+- `search?: { value; onChange: (value: string) => void; placeholder?; disabled? }` —
+  renders the canonical search field directly below the title. Pass `setSearchTerm`
+  straight to `onChange`. Use this for a standalone search; if search shares a row
+  with other controls (sort, filters, a date picker), render that whole row in
+  `children` instead and omit the prop.
+- `title?` / `description?` — overrides for the nav-driven defaults. **Only** for a
+  detail sub-view that needs a different heading; normal pages never pass these.
+- `scrollContainerRef?: React.Ref<HTMLDivElement>` — forwards a ref to the scroll
+  region (e.g. programmatic scroll-to-bottom).
+- `contentClassName?` — layout/spacing only; reach for it rarely. Prefer the
+  default `gap-7`.
+
+## Title + description live in navigation metadata
+
+`apps/sim/app/workspace/[workspaceId]/settings/navigation.ts` is the single source
+of truth. Every `NavigationItem` carries a one-line `description`; `SettingsPanel`
+resolves both via `getSettingsSectionMeta(section)` and the
+`SettingsSectionProvider` the settings shell wraps around the active section.
+
+Adding a new settings page:
+
+1. Add the `SettingsSection` id + a `NavigationItem` (with `label` **and**
+   `description`) in `navigation.ts`. Keep descriptions verb-first, one line,
+   ~40–55 chars, in the product voice (see `.claude/rules/constitution.md`).
+2. Render the component inside the shell's `effectiveSection` switch in
+   `settings/[section]/settings.tsx`.
+3. Build the component body inside `<SettingsPanel>` — no shell, no title block.
+
+## Other shared settings primitives (do not re-roll these)
+
+- **`SettingsEmptyState`** (`…/components/settings-empty-state`) — the canonical
+  muted status message. `variant='fill'` (default) centers in the available
+  height (empty list, or a not-entitled/loading gate); `variant='inline'` sits in
+  flow (a search "no results"). Never hand-roll
+  `<div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>`
+  or `<div className='py-4 text-center …'>`. It owns the `--text-muted` + `text-sm`
+  tokens, so it also keeps these messages consistent across pages.
+- **`RowActionsMenu`** (`…/components/row-actions-menu`) — the trailing `...`
+  actions menu for a list row. Pass `label` (aria-label) and
+  `actions: RowAction[]` (`{ label, onSelect, destructive?, disabled? }`); the
+  component renders the canonical flush `...` trigger + `DropdownMenuContent`.
+  Conditional items become array spreads: `...(canManage ? [{…}] : [])`. Never
+  hand-roll the `<DropdownMenu>` + `<MoreHorizontal>` trigger per page.
+
+## Detail sub-views (the one exception)
+
+A drill-down view reached from a list row (selected MCP server, workflow MCP
+server, credential set, permission group) keeps its **own** chrome because it
+needs a left-aligned back button (`<Chip leftIcon={ArrowLeft}>`), which the panel
+header (right-actions only) does not model. Leave those returns as hand-rolled
+shells; only the list/main view uses `SettingsPanel`. Gate/early-return states
+(not-entitled, loading, upgrade prompts) also stay as-is.
+
+## Audit checklist
+
+A settings page is design-system-clean when:
+
+- [ ] Its main return is a `<SettingsPanel>` (or `<>…<SettingsPanel>…</>` with modal siblings) — no hand-rolled shell/header/scroll/column.
+- [ ] It renders **no** hand-rolled `<h1>`/description title block — the title comes from nav metadata.
+- [ ] Header chips are in `actions`; a standalone search is in the `search` prop.
+- [ ] Its `NavigationItem` has an accurate, consistent-length `description`.
+- [ ] Detail sub-views and entitlement/loading gates keep their own chrome (intentional).
+- [ ] No business logic, handlers, or conditional rendering changed by the migration.
+- [ ] `tsc`, `biome`, and the page's tests pass.

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

@@ -0,0 +1,57 @@
+---
+name: add-settings-page
+description: Add a new Sim settings page, or audit existing settings pages for design-system compliance with the shared SettingsPanel layout. Use when creating a settings tab, or when asked to check/clean up settings pages so they match the design system (consistent title, header, search, spacing).
+---
+
+# Settings Page (add / audit)
+
+Sim settings pages all render through the shared **`SettingsPanel`** primitive,
+which owns the page chrome and renders a nav-driven title + description. The full
+convention lives in `.claude/rules/sim-settings-pages.md` — read it first; this
+skill is the procedure.
+
+Key paths:
+- Layout primitive: `apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx`
+- Nav metadata (titles + descriptions): `apps/sim/app/workspace/[workspaceId]/settings/navigation.ts`
+- Section switch + provider: `apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx`
+- Pages: `apps/sim/app/workspace/[workspaceId]/settings/components/<name>/<name>.tsx` and EE pages under `apps/sim/ee/<feature>/components/`
+
+## Mode A — Add a new settings page
+
+1. **Navigation.** In `navigation.ts`: add the id to the `SettingsSection` union,
+   then a `NavigationItem` with `label` AND a one-line `description` (verb-first,
+   ~40–55 chars, product voice per `.claude/rules/constitution.md`). Place it in
+   the right `section` group and set any gating flags (`requiresHosted`,
+   `requiresEnterprise`, etc.).
+2. **Wire the switch.** Add the component to the `effectiveSection` render switch
+   in `settings/[section]/settings.tsx` (lazy `dynamic(...)` like its siblings).
+3. **Build the body inside `SettingsPanel`.** Never hand-roll the shell, header
+   bar, scroll region, content column, or title block. Put header buttons in
+   `actions`, a standalone search in `search={{ value, onChange, placeholder }}`,
+   and the page content as `children`. Modals go beside the panel inside a `<>`.
+4. **Verify:** `cd apps/sim && bunx tsc --noEmit`; `bunx biome check --write <file>`.
+
+## Mode B — Audit existing settings pages
+
+For each page component, confirm the checklist in `.claude/rules/sim-settings-pages.md`:
+
+1. Find hand-rolled shells that should be `SettingsPanel`:
+   `git grep -n "flex h-full flex-col bg-\[var(--bg)\]" -- 'apps/sim/**/settings/' 'apps/sim/ee/'`
+   — every match should be either `settings-panel.tsx`, a **detail sub-view**
+   (has a `<Chip leftIcon={ArrowLeft}>` back button), or an entitlement/loading
+   **gate** early-return. Anything else is a page that still needs migrating.
+2. Find hand-rolled title blocks (should be 0 outside detail views):
+   `git grep -n "text-\[var(--text-body)\] text-lg" -- 'apps/sim/**/settings/' 'apps/sim/ee/'`
+3. Confirm each page imports `SettingsPanel` and that its `NavigationItem` has an
+   accurate `description` of consistent length with its peers.
+4. When migrating a page, change ONLY the structural shell→`SettingsPanel` swap:
+   move header chips to `actions`, the standalone search to `search`, delete the
+   `<h1>` title block, replace the three closing `</div>` (column/scroll/shell)
+   with `</SettingsPanel>`, and keep modal siblings in a `<>` fragment. Do NOT
+   touch handlers, state, queries, conditional rendering, or detail/gate returns.
+   Drop per-page `gap-*`/`pt-*` on the content column in favor of the panel default.
+5. Remove now-unused imports (`ChipInput`/`Search`) ONLY after grepping that
+   they are not still used elsewhere in the file (e.g. by a detail view).
+6. **Verify the whole sweep:** `tsc --noEmit`, `biome check` on every touched
+   file, and run the affected pages' tests. Diff each file against the base and
+   confirm the change is purely structural before shipping.

apps/docs/.gitignore

@@ -38,3 +38,6 @@ next-env.d.ts
 # Fumadocs
 /.source/ 
 .plans/
+
+# fumadocs generates .source dirs anywhere a source.config sits
+**/.source/

apps/docs/app/[lang]/[[...slug]]/page.tsx

@@ -75,16 +75,23 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
   }
   const isOpenAPI = '_openapi' in data && data._openapi != null
   const isApiReference = slug?.some((s) => s === 'api-reference') ?? false
+  // Academy lessons are video-first: drop the "On this page" TOC and go full
+  // width so the lesson hero/video gets the room (chapters live in-page instead).
+  const isAcademy = slug?.[0] === 'academy'
 
   const pageTreeRecord = source.pageTree as Record<string, Root>
   const pageTree = pageTreeRecord[lang] ?? pageTreeRecord.en ?? Object.values(pageTreeRecord)[0]
   const rawNeighbours = pageTree ? findNeighbour(pageTree, page.url) : null
-  const neighbours = isApiReference
+  // Academy and API Reference are self-contained sections; keep prev/next inside
+  // the section instead of spilling into the main documentation tree. Match both
+  // the section's pages (`/<slug>/...`) and its index (`/<slug>`).
+  const sectionSlug = isApiReference ? 'api-reference' : isAcademy ? 'academy' : null
+  const inSection = (url?: string) =>
+    url != null && (url.includes(`/${sectionSlug}/`) || url.endsWith(`/${sectionSlug}`))
+  const neighbours = sectionSlug
     ? {
-        previous: rawNeighbours?.previous?.url.includes('/api-reference/')
-          ? rawNeighbours.previous
-          : undefined,
-        next: rawNeighbours?.next?.url.includes('/api-reference/') ? rawNeighbours.next : undefined,
+        previous: inSection(rawNeighbours?.previous?.url) ? rawNeighbours?.previous : undefined,
+        next: inSection(rawNeighbours?.next?.url) ? rawNeighbours?.next : undefined,
       }
     : rawNeighbours
 
@@ -197,18 +204,18 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
       />
       <DocsPage
         toc={data.toc}
-        full={data.full}
+        full={data.full || isAcademy}
         breadcrumb={{
           enabled: false,
         }}
         tableOfContent={{
           style: 'clerk',
-          enabled: true,
+          enabled: !isAcademy,
           single: false,
         }}
         tableOfContentPopover={{
           style: 'clerk',
-          enabled: true,
+          enabled: !isAcademy,
         }}
         footer={{
           enabled: true,

apps/docs/app/[lang]/layout.tsx

@@ -3,6 +3,7 @@ import { defineI18nUI } from 'fumadocs-ui/i18n'
 import { DocsLayout } from 'fumadocs-ui/layouts/docs'
 import { RootProvider } from 'fumadocs-ui/provider/next'
 import { Geist_Mono, Inter } from 'next/font/google'
+import { AskAI } from '@/components/ai/ask-ai'
 import {
   SidebarFolder,
   SidebarItem,
@@ -120,6 +121,7 @@ export default async function Layout({ children, params }: LayoutProps) {
           >
             {children}
           </DocsLayout>
+          <AskAI locale={lang} />
         </RootProvider>
       </body>
     </html>