From f653e029a18acb9a7ab0af36b3ef09d8a24f525b Mon Sep 17 00:00:00 2001
From: Ahmad Tash <144666528+AhmadTash@users.noreply.github.com>
Date: Wed, 23 Sep 2026 11:58:27 +0300
Subject: [PATCH 1/4] feat(web): gate paid features at the action instead of
 the page (#15562)

---
 .../engineering/ci-pr-review-hygiene.md       |   3 +
 .../engineering/web-feature-anatomy.md        |   9 +-
 .../ee-platform-plans-billing.md              |   3 +
 .../web/public/locales/en/translation.json    | 150 ++++++++++-
 .../web/src/app/components/feature-teaser.tsx | 138 ++++++++++
 .../app/components/locked-feature-guard.tsx   |  97 ++-----
 .../project-settings/pieces/index.tsx         |   2 +-
 .../routes/mcp-server/pieces/pieces-tab.tsx   |   2 +-
 .../routes/platform/infra/workers/index.tsx   |   4 +-
 .../routes/platform/setup/pieces/index.tsx    |   2 +-
 .../src/app/routes/platform/users/index.tsx   |  31 ++-
 .../components/custom/data-table/index.tsx    |  11 +-
 .../billing}/components/request-trial.tsx     |   0
 .../billing/hooks/use-feature-gate.tsx        | 128 +++++++++
 .../billing/hooks/use-seat-limit-guard.tsx    |  23 +-
 .../hooks/use-team-project-limit-guard.tsx    | 157 ++++++-----
 packages/web/src/features/billing/index.ts    |   7 +
 .../features/billing/utils/feature-tier.ts    |   6 +
 .../billing/utils/platform-features.ts        | 145 +++++++++++
 .../platform-admin/hooks/api-key-hooks.ts     |  11 +-
 .../platform-admin/hooks/signing-key-hooks.ts |  11 +-
 .../components/create-project-button.tsx      |  64 +++--
 .../components/new-project-dialog.tsx         |  77 ++++--
 .../test/app/billing/feature-gating.test.tsx  | 244 ++++++++++++++++++
 24 files changed, 1108 insertions(+), 217 deletions(-)
 create mode 100644 packages/web/src/app/components/feature-teaser.tsx
 rename packages/web/src/{app => features/billing}/components/request-trial.tsx (100%)
 create mode 100644 packages/web/src/features/billing/hooks/use-feature-gate.tsx
 create mode 100644 packages/web/src/features/billing/utils/feature-tier.ts
 create mode 100644 packages/web/src/features/billing/utils/platform-features.ts
 create mode 100644 packages/web/test/app/billing/feature-gating.test.tsx

diff --git a/brain/knowledge/engineering/ci-pr-review-hygiene.md b/brain/knowledge/engineering/ci-pr-review-hygiene.md
index 00a16b5ebcef..e8a0e431fc7c 100644
--- a/brain/knowledge/engineering/ci-pr-review-hygiene.md
+++ b/brain/knowledge/engineering/ci-pr-review-hygiene.md
@@ -48,6 +48,7 @@ Enforcement is the **`Codeowners review` repository ruleset** (active on the def
 - **`@activepieces/shared` re-exports from `@activepieces/core-execution`, so a partial rebuild produces phantom "has no exported member" errors in unrelated files.** Rebuilding `core/shared` against a stale `core/execution` dist drops those re-exports, and the API typecheck then fails in `ee/agent/*` on symbols like `GetPersonalizationConfigRequest` — which live in `core/execution/src/lib/workers/worker-contract.ts`, not in shared at all. It reads exactly like a bad merge. The dependency order that actually works is `core/utils` → `core/piece-types` → `core/formula` → `core/execution` → `core/shared` → `server/utils` → `pieces/framework` → `core/ai-providers`; skipping a link silently poisons everything downstream of it. The same staleness makes an editor report missing enum members that exist in the source. **There is no api typecheck "error baseline" — rebuild first, then trust it.** A stale `core/shared/dist` reliably yields a handful of `ee/agent` errors that look permanent enough to be waved off as known, which is how a real error hides among them; after `npx turbo run build --filter=@activepieces/shared`, `tsc --noEmit -p packages/server/api/tsconfig.app.json` comes back completely clean. The same staleness invents errors in files a rebase just touched, so during a conflict resolution rebuild before concluding you resolved it wrong.
 - **To pull a file back out of a PR, restore it from the merge-base, never from `origin/main`.** A PR's diff is computed against the merge-base, so `git checkout origin/main -- <file>` does not "revert" the file — it imports every change `main` made to it since the fork and attributes them to you. Dropping one web file from [#15001](https://github.com/activepieces/activepieces/pull/15001) that way would have silently added 82 insertions / 44 deletions of somebody else's work. `git checkout $(git merge-base origin/main HEAD) -- <file>` makes it byte-identical to where the branch started, so it leaves the diff entirely and merges cleanly instead of conflicting. Verify with `git diff --quiet $(git merge-base origin/main HEAD) -- <file>` before committing, and read `git status` first — a `bun.lock` left dirty by an earlier `bun install` loves to ride along on a commit like this.
 - **Retargeting a stacked PR to `main` does not drop its base branch — it merges the whole thing.** A PR opened against a long-lived feature branch shows a small diff *relative to that base*, but `gh pr edit --base main` only moves the target; the branch still contains every commit of its old base. [#14593](https://github.com/activepieces/activepieces/pull/14593) read as 2 docs files against `feat/autumn-billing-integration` and as 198 commits / 211 files / +12k lines against `main`. Check with `git diff --stat origin/main...<branch>` **before** retargeting, and if it disagrees with the PR page, cherry-pick that PR's own commits onto `main` and force-push instead. A "conflict" on such a PR is often against the feature base only — those same commits can apply to `main` cleanly.
+- **Each link of a stack runs CI against its own base, so verifying the top proves nothing about the ones below it.** A refactor that lands on the bottom branch and is repaired two branches up is green where you tested and red on the PR that actually carries it, and the failure reads as unrelated because the file it names was fine when you last looked at it. Before pushing a stack, check out each branch in turn and run the package's typecheck, lint and full test suite there, not just at the tip; the suites legitimately differ (this stack's tip runs two more web tests than its base). Do the same after any rebase, since a conflict resolved in one replay can leave a lower branch importing something only a higher one defines.
 - **A deliberately stacked PR is charged only for its own delta, but each link pays its own `@activepieces/shared` bump.** `pr-size-check.ts` diffs `HEAD^1...HEAD^2` on the `pull_request` merge commit precisely so an ancestor PR is not re-counted — a stack member measures the same whether reviewed against `main` or against the PR below it, so splitting a large change into a stack really does buy budget rather than just moving it. Two things the split still costs you. Every PR in the stack that touches `packages/core/shared` needs its **own** version increment (0.158.0 then 0.159.0, not the same bump twice), and `bun.lock` records each workspace's version, so edit that one line **by hand** in each — regenerating sweeps `main`'s pending drift into your diff, per the regenerator trap above. And prove the split is faithful before pushing: tag the pre-split commit, then `git diff <tag>..<stack tip>` must come back empty apart from those intentional version lines. A file that lands partially in one PR and grows in the next (a service that gains its read side, a test file that gains its endpoint cases) is exactly where a hand-split silently drops a hunk.
 - **A migration-check failure in a stack names the PR that *introduced* the file, which is usually not the branch you are sitting on.** `check-migration-rollback.ts` lists candidates with `git diff --name-only --diff-filter=A origin/$GITHUB_BASE_REF...HEAD`, so a migration is only ever scanned on the stack member that **adds** it; every branch above inherits the file and its CI stays green on that check. So the pasted failure belongs to the lowest link, and editing the file on the tip you happen to have checked out fixes nothing the gate looks at. Confirm ownership before touching anything — `gh pr view <n> --json headRefName` for the branch the number really points at, then `git cat-file -e <branch>:<path>` across the stack for the first branch holding the file — fix it there, and rebase upward. Two things make that cheap: the file is usually byte-identical across the stack (`git diff <lower> <upper> -- <path>` comes back empty), and `git rebase` reports `skipped previously applied commit` for the lower branch's pre-rebase commits, which is the expected signal rather than a lost commit. Verify each link the same way the split rule above does — tag the old tip, then `git diff <tag> <rebased branch>` must show only the intended delta. Hit on PR 15240 (`feat/mcp-activity-recording`) while its own migration read as a failure on `feat/mcp-activity-serve` two links up.
 - **A decision authored on a long-lived branch will collide on its number.** `brain/decisions/` numbers are assigned once and never reused, but the next free number is only knowable against `main` — two branches in flight both grab it. #14593 carried a `000024` that `main` had since filled, and `000025` too, so it landed as `000026`. Renumber against `main` at merge time and update every referring link; nothing in CI catches a duplicate number or a dead decision link.
@@ -75,3 +76,5 @@ Enforcement is the **`Codeowners review` repository ruleset** (active on the def
 - **Merging up a stacked chain, a parent's rename reaches a child's call sites as a clean auto-merge — only the typecheck finds it.** Git conflicts on lines both sides edited, so a symbol renamed on the parent merges silently into a child that merely *calls* the old name: `feat/barrier-service` renamed `barrierService.receive` → `receiveSignal`, and `feat/barrier-edges`' `resume-controller.ts` kept calling `.receive(...)` with no conflict marker. Worse, both sides can each be right and still merge wrong — the same commit renamed `findPreCompletedByFlowRunId` while the child had rewritten that function's *body* to fix a real bug, so the conflict exposed only the signature and taking either side whole silently dropped work. Two habits: typecheck **every** branch in the chain after its merge rather than trusting a conflict-free result, and before picking a side run `git log --oneline $(git merge-base HEAD MERGE_HEAD)..HEAD -- <file>` on both to read what each side was actually doing. Stacks here run deep (the waitpoints → process-in-batches chain was 17 PRs), so one missed rename propagates through every branch above it.
 - **Docs videos belong on `cdn.activepieces.com/videos/docs/`, never in the repo — and `docs/resources/` is the legacy path that suggests otherwise.** Every `<video>` already in the wiki points at that CDN prefix, but `docs/resources/` still holds ~43 MB of in-repo gifs from before the convention, so the tree itself gives mixed signals and a contributor reasonably copies the wrong one. [#15399](https://github.com/activepieces/activepieces/pull/15399) added a fresh `docs/videos/` folder with 155 MB of `.mp4` against an 880 MB `.git`, including one byte-identical duplicate. Nothing in CI catches it: `PR size` exempts unmatched areas and counts lines, not bytes, and a binary blob contributes zero lines. Review the *file list* of a docs PR, not just its diff. Once such a branch is pushed the blobs are already on the remote — dropping them at the tip only keeps them out of `main` if the PR is **squash**-merged and the branch deleted, so a merge commit ships them permanently. Because the blobs stay reachable until the branch is deleted, nobody has to re-request the assets from whoever recorded them — pull them straight back out of history with `git archive <commit> docs/videos | tar -x --strip-components=2 -C <dir>`, picking the commit *before* the removal, which is also how you get them under the post-rename filenames the pages already reference.
 - **Mintlify-editor PRs arrive with `untitled-page*.mdx` at the docs root and `(1)`/`(2)`-suffixed media, wired into `docs.json` under those names.** The bot commits whatever the web editor autosaved, so pages land as `docs/untitled-page-5.mdx` rather than in the folder their nav group implies, and re-uploaded assets keep the browser's download-collision suffix (`data-flow-(1).mp4`, `01---insert-panel-(1.2x).mp4`). Mintlify's own link check passes — the names are internally consistent — so nothing flags it. Rename the files, fix the `docs.json` entries, then diff the *flattened nav tree* against `main` rather than reading the raw JSON diff: the editor also reindents, which buried a real change (the Enterprise Control `Security` group demoted to a child of `Guides`) inside 242 lines of whitespace churn on that PR.
+- **After rewriting a lower branch of a stack, the `--onto` upstream you need is that branch's *old* tip, and `<branch>@{1}` is where to read it.** Every commit above a rewritten branch has to be replayed with `git rebase --onto <new lower tip> <old lower tip> <upper>`, and the old tip stops being reachable by name the moment the rebase finishes. Guessing a SHA from an earlier terminal scroll either fails outright with `invalid upstream` or, worse, succeeds against the wrong base and replays a handful of commits instead of all of them, which surfaces as a pile of conflicts the branch has with itself. `git rev-parse <branch>@{1}` reads it from the reflog every time. Re-run the whole `--onto` chain top-down after any lower-branch amend, and confirm afterwards that `git log --format=%s main..<top>` has no duplicate subjects.
+- **Never commit a shared file onto a lower branch of a stack by copying it in from the stack top — you drag the upper branches' edits down with it.** Adding one gotcha bullet to a brain page while sitting on the top branch, then `git checkout <stash-or-top> -- <file>` after switching to the base branch, brings the *whole* file across, so every bullet the upper branches added to that page is silently duplicated onto the base. The commit stat is the tell: a one-line edit that reports six insertions is not a one-line edit. Switch branches first, re-apply the edit against **that branch's own copy** of the file, and re-check the stat before committing.
diff --git a/brain/knowledge/engineering/web-feature-anatomy.md b/brain/knowledge/engineering/web-feature-anatomy.md
index 99e41456eee8..3067340f59cd 100644
--- a/brain/knowledge/engineering/web-feature-anatomy.md
+++ b/brain/knowledge/engineering/web-feature-anatomy.md
@@ -62,6 +62,12 @@ Every customer-facing surface must be checked on all five edition paths — CE,
 
 A default local dev instance runs `edition=ce` (check `/api/v1/flags`), and most of the platform-admin surface is unreachable there — Global Connections, Pieces, Templates, Billing, Usage, Embedding, SSO, Project Roles, API Keys, Secret Managers, Audit Logs and Event Streaming all render `LockedFeatureGuard` instead of their body, and the AI Center's Capabilities tab is not rendered at all. So a change to any of those cannot be seen locally without first flipping the `platform_plan` flags in the dev Postgres; Embedding needs more than that, since `useEmbedSubdomain` is gated on `edition === CLOUD` and so needs `AP_EDITION=cloud` and a restart. Plan for that before promising a screenshot of a gated page.
 
+Running one frontend per edition side by side (a vite port each against its own backend) is the quickest
+way to check all of them, but **every port serves the same working tree**, so checking out another branch
+changes the code under all three at once. Comparing editions and comparing branches are therefore the same
+gesture, and the give-away is a UI that looks a release behind on every port at once rather than on one.
+Read the edition off `/api/v1/flags`, not off the port you think you started.
+
 Verify with `npx turbo run lint --filter=web`, or `npm run lint-dev` for the whole repo.
 
 ## Gotchas
@@ -125,4 +131,5 @@ Verify with `npx turbo run lint --filter=web`, or `npm run lint-dev` for the who
 
 - **A `.ts` and a `.tsx` of the same name can both sit in the tree, and every importer silently binds to the `.ts`.** `hooks/use-mobile.ts` and `hooks/use-mobile.tsx` were byte-for-byte identical for months: the `.ts` arrived with #11554 and nothing removed the `.tsx` that #11440 had left. Both TypeScript's Node resolution and Vite try `.ts` before `.tsx`, so all five importers of `@/hooks/use-mobile` resolved to the `.ts` and the `.tsx` was unreachable — while still being edited, linted and typechecked like live code. Nothing flags this: the import resolves, tsc is happy, and a `grep` for the symbol shows five healthy importers, which reads as proof the file is *used*. Only a reachability tool sees it. When a file looks dead but its symbol has importers, check for a same-named sibling with the other extension before concluding the tool is wrong.
 - **`knip` is the reachability check for `packages/web`; `npm run knip` must exit clean.** Config in `knip.json` at the repo root, every rule at its default `error` severity — nothing is muted, so a non-zero exit means real dead code, not noise. Two settings carry the weight. `src/features/*/index.ts` are **entry points**, because a feature barrel is that feature's public surface (see *Feature folder* above) and is meant to export more than today's callers import; without that, reachability reports the convention itself as dead. `ignoreExportsUsedInFile: true` means anything it does report is referenced *nowhere*, not even in its own file. The two `ignore*` lists cover what knip genuinely cannot see: `tailwindcss`/`tw-animate-css` arrive via `@import` in `styles.css` (knip does not follow CSS), and `dwebp`/`sips`/`cwebp` are system binaries shelled out to by `scripts/generate-usecase-images.mjs`.
-- **When knip flags an export whose name clearly has live callers, look for a second symbol of that name before concluding knip is wrong.** This codebase repeatedly grew duplicates — something was moved or re-implemented and the old copy stayed — so a `grep` for the symbol finds the *other* one and reads as proof the finding is bogus. Every instance checked was knip being right: `use-mobile.ts` vs `.tsx` (identical files, resolution silently picks `.ts`), `cursor-position-context.tsx` duplicated under `flow-canvas/` and `state/` (two separate `createContext()` calls), `parseAnswerPairs` shared vs a local copy in `assistant-message.tsx`, and `FlowApprovalRequestState`/`PieceSelectorTabConfig` re-exported locally while every consumer imports them from `@activepieces/shared`. knip also resolves this repo's dynamic imports correctly, including `React.lazy(() => import(x))` (needs `default`) and `import(x).then(m => ({default: m.Named}))` (needs the named export) — do not assume it is guessing. Verify a finding by reading the importing file's actual `import` statement, never by counting `grep` hits on the name.
\ No newline at end of file
+- **When knip flags an export whose name clearly has live callers, look for a second symbol of that name before concluding knip is wrong.** This codebase repeatedly grew duplicates — something was moved or re-implemented and the old copy stayed — so a `grep` for the symbol finds the *other* one and reads as proof the finding is bogus. Every instance checked was knip being right: `use-mobile.ts` vs `.tsx` (identical files, resolution silently picks `.ts`), `cursor-position-context.tsx` duplicated under `flow-canvas/` and `state/` (two separate `createContext()` calls), `parseAnswerPairs` shared vs a local copy in `assistant-message.tsx`, and `FlowApprovalRequestState`/`PieceSelectorTabConfig` re-exported locally while every consumer imports them from `@activepieces/shared`. knip also resolves this repo's dynamic imports correctly, including `React.lazy(() => import(x))` (needs `default`) and `import(x).then(m => ({default: m.Named}))` (needs the named export) — do not assume it is guessing. Verify a finding by reading the importing file's actual `import` statement, never by counting `grep` hits on the name.
+- **Rewriting a shared component silently drops whatever props it stops destructuring, and optional props make the compiler complicit.** Replacing `LockedFeatureGuard`'s body took the `RequestTrial` sales form off 17 pages at once: every caller still passed `featureKey` and `showContactSales`, the new component just never read them, and because both stayed `?:` in the props type nothing failed to compile and no call site changed in the diff. The prop a rewrite must not lose is the one to make **required** — the moment `featureKey` was, `tsc` listed exactly the call sites that had dropped it, across all three branches of the stack. When a component's props feed a business surface rather than styling, review the destructure, not the prop list.
diff --git a/brain/knowledge/platform-editions-ee/ee-platform-plans-billing.md b/brain/knowledge/platform-editions-ee/ee-platform-plans-billing.md
index 4e8a0afa8acd..83060a63be2c 100644
--- a/brain/knowledge/platform-editions-ee/ee-platform-plans-billing.md
+++ b/brain/knowledge/platform-editions-ee/ee-platform-plans-billing.md
@@ -26,6 +26,9 @@ Billing and entitlements are powered by [Autumn](https://useautumn.com). Each pl
 - The daily report's directory, service, and telemetry symbols are named `license-key-usage-report`, but its **persisted system-job name is still `billing-usage-report`** (`BILLING_USAGE_REPORT` in `system-jobs/common.ts`), and its emitted event names are unchanged too. Both strings are keys that outlive a deploy — the job name identifies the already-scheduled row, the event names identify history already captured — so renaming either orphans what is out there instead of renaming it. They read as leftovers of the rename; they are not.
 - Never read entitlements inline from Autumn on a request path — always the `platform_plan` projection + Redis caches (`isBillingEnforced` is a plain Redis read defaulting to `false`, i.e. fail open).
 - Active flows are unlimited in the new plans (projected `null`); `checkActiveFlowsExceededLimit` still runs on flow enable/publish but only binds when a limit is set.
+- **`billedTeamProjectsLimit: 0` hides the create-project control rather than crowning it.** The primary rail's `RailPinnedProjects` renders its create button only when the limit is non-zero, so a plan with no team projects at all shows no button in the rail — only the platform admin table keeps a crowned one. Testing a crowned rail control therefore needs a limit above zero that is fully consumed, not a limit of zero. `null` is unlimited, `0` is none, and the two read alike in a plan row.
+- **`openDialog()` from `useManagePlanDialogStore` is a silent no-op on Community, so any upgrade button wired to it is dead there.** `<ManagePlanDialog />` is mounted behind `edition !== ApEdition.COMMUNITY` in all three layouts (`platform-layout`, `project-layout`, `builder-layout`), while the store is a plain Zustand flag that any caller can flip with nothing listening, so the click closes what it was in and shows nothing. Every upgrade surface therefore has to branch on `isCommunity` itself and offer the sales route instead. `FeatureSample`, `FeatureTeaser` and `useTeamProjectLimitGuard` all do; the last of those did not until the team-project limit dialog was fixed, having shipped a dead `Explore plans` on self-hosted installs since well before the platform admin redesign. Check the branch exists whenever you add one.
+- **`RequestTrial` lives in `features/billing/components/`, not `app/components/`.** Anything under `features/*` that needs the sales call to action - the plan guards and the upgrade dialog - cannot reach into `app/`, because the `import/no-restricted-paths` zone is one-directional. Keeping it in billing lets both layers use it, since every `app/` caller is importing downward. It exports `FeatureKey`, the union the `activepieces.com/sales` page reads from the query string, and every `PLATFORM_FEATURES` entry carries one so a gated surface can hand over the right key.
 - Initial plan by edition: CE/EE → `OPEN_SOURCE_PLAN`, Cloud → `AUTUMN_FREE_PLAN`. CE and `TESTING` environments skip enrollment/sync entirely.
 - **Running billing locally means pointing a local backend at a *console*, not standing up Autumn.** Three gates must all pass or the provider is the empty no-op: `AP_EDITION` must be `cloud` or `ee` (`app.ts` sets `autumnBillingProvider` only there; Community returns `{ total: 0, byProject: [] }`), `AP_ENVIRONMENT` must **not** be `testing` (`triggerLazyBillingProviderSync`/`enrollBillingProviderOnCreate` early-return on it), and Redis must be up (billing reads/writes go through Redis caches). Enrollment is lazy — the first read of a billing/usage route fires `ensureEnrolled` → `enrollFree({ ownerEmail })` against `AUTUMN_CONSOLE_URL`. That prop **defaults to the production console** (`https://console.activepieces.com`), so an unconfigured local box enrolls a *real* customer keyed by the owner email; point it at the testing console instead. A freshly enrolled free customer has no events, so all usage aggregations read `0` until real `flow_run`/`ai`/`chat` credit events are metered for it. To merely eyeball the usage page with real data, `serve --filter=web -- --mode=cloud` against the cloud backend is far less setup than local billing.
 - **Hand-editing `platform_plan` flags to unlock a feature locally does not stick, and the revert looks like the feature breaking itself.** The lazy entitlement projection above rewrites the plan columns from Autumn on any plan read, so a flag you set by hand survives only until the next sync. Because the throttle is 15 minutes and the web app leaves TanStack Query's `refetchOnWindowFocus` at its default `true`, the trigger in practice is *returning to the tab after a break*: alt-tab quickly and the flag survives, come back later and it is gone — which reads as an intermittent bug in whatever feature the flag gated, not as billing. `triggerLazyBillingProviderSync` is fire-and-forget, so nothing in the request that caused it says so. The clean fix for local work is to null **both** `autumnCustomerId` and `autumnApiKey` on the row: `loadAutumnCreds` returns null only when both are nil, `refreshEntitlements` then returns before its `update()`, and hand-set flags stay put. Null exactly one and you hit the worst case — an `error`-level `Autumn credentials incomplete for an enrolled platform` and every billing call silently no-oping.
diff --git a/packages/web/public/locales/en/translation.json b/packages/web/public/locales/en/translation.json
index d3f607d4983c..71bafc1268dd 100644
--- a/packages/web/public/locales/en/translation.json
+++ b/packages/web/public/locales/en/translation.json
@@ -802,6 +802,7 @@
   "templates": "templates",
   "secret managers": "secret managers",
   "AI providers": "AI providers",
+  "capabilities": "capabilities",
   "AI tools": "AI tools",
   "health metrics": "health metrics",
   "projects": "projects",
@@ -2897,5 +2898,152 @@
   "The input and output were not kept for this call.": "The input and output were not kept for this call.",
   "The input and output are no longer available.": "The input and output are no longer available.",
   "Too large to keep in full — some of it was dropped.": "Too large to keep in full — some of it was dropped.",
-  "what the call costs": "what the call costs"
+  "what the call costs": "what the call costs",
+  "Billing & usage": "Billing & usage",
+  "Unlock Billing & Usage": "Unlock Billing & Usage",
+  "Plan": "Plan",
+  "Works with SAML and OIDC providers": "Works with SAML and OIDC providers",
+  "Enforce SSO for everyone on the platform": "Enforce SSO for everyone on the platform",
+  "Control who can self-serve sign up": "Control who can self-serve sign up",
+  "Scope access per project, not per platform": "Scope access per project, not per platform",
+  "Keep production flows safe from accidental edits": "Keep production flows safe from accidental edits",
+  "Assign roles when you invite someone": "Assign roles when you invite someone",
+  "Drive projects, flows and connections from your own tooling": "Drive projects, flows and connections from your own tooling",
+  "Scope a key to the platform, not to a person": "Scope a key to the platform, not to a person",
+  "Revoke a key without touching anyone’s login": "Revoke a key without touching anyone’s login",
+  "AWS, Azure, GCP and HashiCorp Vault": "AWS, Azure, GCP and HashiCorp Vault",
+  "Secrets never leave your infrastructure": "Secrets never leave your infrastructure",
+  "One secure place to rotate everything": "One secure place to rotate everything",
+  "Every user and system action, recorded": "Every user and system action, recorded",
+  "Filter by user, project and event type": "Filter by user, project and event type",
+  "Export for compliance reviews": "Export for compliance reviews",
+  "Stream events to any endpoint": "Stream events to any endpoint",
+  "Wire alerts into Slack, PagerDuty or email": "Wire alerts into Slack, PagerDuty or email",
+  "Build your own monitoring on top": "Build your own monitoring on top",
+  "Create once, use in any project": "Create once, use in any project",
+  "Rotate credentials in a single place": "Rotate credentials in a single place",
+  "Choose which projects can use each connection": "Choose which projects can use each connection",
+  "Publish reusable templates to every project": "Publish reusable templates to every project",
+  "One click from template to running flow": "One click from template to running flow",
+  "Standardize how your teams automate": "Standardize how your teams automate",
+  "Drop the builder into your app with the JS SDK": "Drop the builder into your app with the JS SDK",
+  "Authenticate users with signing keys": "Authenticate users with signing keys",
+  "Your customers automate without leaving your product": "Your customers automate without leaving your product",
+  "Separate flows, connections and members per project": "Separate flows, connections and members per project",
+  "Set credit and user quotas per project": "Set credit and user quotas per project",
+  "Teams work side by side without stepping on each other": "Teams work side by side without stepping on each other",
+  "Read the docs": "Read the docs",
+  "Showing and hiding pieces needs a higher plan. You can browse the catalog, but changes won't stick.": "Showing and hiding pieces needs a higher plan. You can browse the catalog, but changes won't stick.",
+  "This is an Enterprise feature, available on our paid plans.": "This is an Enterprise feature, available on our paid plans.",
+  "AI Center & MCP": "AI Center & MCP",
+  "AI credits this month": "AI credits this month",
+  "API keys": "API keys",
+  "Across {count, plural, =1 {# project} other {# projects}}": "Across {count, plural, =1 {# project} other {# projects}}",
+  "Active platform keys": "Active platform keys",
+  "All checks passed": "All checks passed",
+  "All connected workers match the app release": "All connected workers match the app release",
+  "All connections are healthy": "All connections are healthy",
+  "Allowed email domains": "Allowed email domains",
+  "Any domain": "Any domain",
+  "App: disk, RAM and CPU checks passed": "App: disk, RAM and CPU checks passed",
+  "App: one or more hardware checks failed": "App: one or more hardware checks failed",
+  "Attention": "Attention",
+  "Audit logging is not available on your plan": "Audit logging is not available on your plan",
+  "Audit logging is recording": "Audit logging is recording",
+  "Audit logs": "Audit logs",
+  "Build": "Build",
+  "Change": "Change",
+  "Connections across every project that are expired, revoked or failing.": "Connections across every project that are expired, revoked or failing.",
+  "Credentials, secrets, and the record of what happens on the platform.": "Credentials, secrets, and the record of what happens on the platform.",
+  "Credits spent on AI steps and chat, out of your plan total.": "Credits spent on AI steps and chat, out of your plan total.",
+  "Custom roles on top of the built-in ones.": "Custom roles on top of the built-in ones.",
+  "Default model": "Default model",
+  "Email and password": "Email and password",
+  "Email and password login is enabled alongside Google": "Email and password login is enabled alongside Google",
+  "Event streaming": "Event streaming",
+  "Every app credential in use across the platform, whether owned by a project or shared globally.": "Every app credential in use across the platform, whether owned by a project or shared globally.",
+  "Expose platform tools to external MCP clients": "Expose platform tools to external MCP clients",
+  "External vaults connected": "External vaults connected",
+  "Forward audit events to your own webhook": "Forward audit events to your own webhook",
+  "Global connections": "Global connections",
+  "Google sign-in": "Google sign-in",
+  "Health of the app, workers, queues and triggers running your automations.": "Health of the app, workers, queues and triggers running your automations.",
+  "How people get into this platform. Individual providers are configured under Single sign on.": "How people get into this platform. Individual providers are configured under Single sign on.",
+  "Invites sent from any project that have not been accepted yet.": "Invites sent from any project that have not been accepted yet.",
+  "Locked": "Locked",
+  "Models, assistant capabilities and the MCP server your flows and chat rely on.": "Models, assistant capabilities and the MCP server your flows and chat rely on.",
+  "Most used pieces": "Most used pieces",
+  "Needs attention": "Needs attention",
+  "No API keys issued": "No API keys issued",
+  "No allowed email domains set": "No allowed email domains set",
+  "No connections yet": "No connections yet",
+  "No custom roles. Built-in roles in use.": "No custom roles. Built-in roles in use.",
+  "No external vault connected": "No external vault connected",
+  "No keys issued": "No keys issued",
+  "No pending invitations": "No pending invitations",
+  "No provider enabled for chat": "No provider enabled for chat",
+  "No provider powers chat yet": "No provider powers chat yet",
+  "No workers connected": "No workers connected",
+  "Nothing to rotate": "Nothing to rotate",
+  "One sign-in method is enabled": "One sign-in method is enabled",
+  "Project connections": "Project connections",
+  "Project roles": "Project roles",
+  "Ready": "Ready",
+  "Recommendations based on your current configuration.": "Recommendations based on your current configuration.",
+  "Release notes": "Release notes",
+  "Restrict domains": "Restrict domains",
+  "Review sign-in": "Review sign-in",
+  "Runtime": "Runtime",
+  "Runtime settings for this instance": "Runtime settings for this instance",
+  "SAML connected.": "SAML connected.",
+  "SAML not connected yet.": "SAML not connected yet.",
+  "Secret managers": "Secret managers",
+  "Security checklist": "Security checklist",
+  "Shared credentials available to multiple projects": "Shared credentials available to multiple projects",
+  "Sign-in policy": "Sign-in policy",
+  "Sign-up restricted to {count, plural, =1 {# domain} other {# domains}}": "Sign-up restricted to {count, plural, =1 {# domain} other {# domains}}",
+  "Single sign on": "Single sign on",
+  "Trigger health across the last 14 days": "Trigger health across the last 14 days",
+  "Used by AI steps and the assistant when a flow does not pick a model explicitly.": "Used by AI steps and the assistant when a flow does not pick a model explicitly.",
+  "Users & access": "Users & access",
+  "Version behind latest; see release notes": "Version behind latest; see release notes",
+  "Version unknown": "Version unknown",
+  "Version {current} · latest is {latest}": "Version {current} · latest is {latest}",
+  "Web search, scraping and image generation for the assistant": "Web search, scraping and image generation for the assistant",
+  "Which apps your projects connect to most.": "Which apps your projects connect to most.",
+  "Who can sign in, how they sign in, and what they can do inside projects.": "Who can sign in, how they sign in, and what they can do inside projects.",
+  "Worker hardware checks unavailable": "Worker hardware checks unavailable",
+  "Workers: RAM and CPU checks passed": "Workers: RAM and CPU checks passed",
+  "Workers: one or more hardware checks failed": "Workers: one or more hardware checks failed",
+  "Workspace": "Workspace",
+  "Your plan, credits and how projects consume them.": "Your plan, credits and how projects consume them.",
+  "unknown": "unknown",
+  "used": "used",
+  "{admins, plural, =1 {# admin} other {# admins}} · {members, plural, =1 {# member} other {# members}} · {deactivated} deactivated": "{admins, plural, =1 {# admin} other {# admins}} · {members, plural, =1 {# member} other {# members}} · {deactivated} deactivated",
+  "{connected} of {total}": "{connected} of {total}",
+  "{count, plural, =1 {# API key is} other {# API keys are}} active": "{count, plural, =1 {# API key is} other {# API keys are}} active",
+  "{count, plural, =1 {# connection} other {# connections}}": "{count, plural, =1 {# connection} other {# connections}}",
+  "{count, plural, =1 {# domain} other {# domains}}": "{count, plural, =1 {# domain} other {# domains}}",
+  "{count, plural, =1 {# machine} other {# machines}} connected": "{count, plural, =1 {# machine} other {# machines}} connected",
+  "{count, plural, =1 {# worker is} other {# workers are}} on an incompatible version": "{count, plural, =1 {# worker is} other {# workers are}} on an incompatible version",
+  "{count} of 3": "{count} of 3",
+  "{credits} credits included": "{credits} credits included",
+  "{included} included": "{included} included",
+  "{provider} powers chat": "{provider} powers chat",
+  "{used} of {total} credits used this period": "{used} of {total} credits used this period",
+  "Upgrade to {tier}": "Upgrade to {tier}",
+  "Upgrade to unlock": "Upgrade to unlock",
+  "Included with the {tier} plan and above.": "Included with the {tier} plan and above.",
+  "Favicon": "Favicon",
+  "Your platform name, branding and general settings.": "Your platform name, branding and general settings.",
+  "Your logo, colors and favicon are part of custom branding.": "Your logo, colors and favicon are part of custom branding.",
+  "Group pieces into sets and choose which projects can use each one": "Group pieces into sets and choose which projects can use each one",
+  "Piece sets need a higher plan.": "Piece sets need a higher plan.",
+  "invitations": "invitations",
+  "workers": "workers",
+  "health checks": "health checks",
+  "billing": "billing",
+  "project roles": "project roles",
+  "infrastructure status": "infrastructure status",
+  "Plans, credits and usage tracking are part of the Enterprise and Cloud editions.": "Plans, credits and usage tracking are part of the Enterprise and Cloud editions."
 }
diff --git a/packages/web/src/app/components/feature-teaser.tsx b/packages/web/src/app/components/feature-teaser.tsx
new file mode 100644
index 000000000000..ada0368be07b
--- /dev/null
+++ b/packages/web/src/app/components/feature-teaser.tsx
@@ -0,0 +1,138 @@
+import { ApEdition, ApFlagId } from '@activepieces/shared';
+import { t } from 'i18next';
+import { Check, ExternalLink } from 'lucide-react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  FeatureKey,
+  RequestTrial,
+  useManagePlanDialogStore,
+} from '@/features/billing';
+import {
+  FeatureTier,
+  TIER_LABELS,
+} from '@/features/billing/utils/feature-tier';
+import { flagsHooks } from '@/hooks/flags-hooks';
+
+export function FeatureTeaserContent({
+  title,
+  description,
+  bullets,
+  tier,
+  documentationUrl,
+  videoUrl,
+  featureKey,
+  showContactSales = true,
+}: FeatureTeaserProps) {
+  const { openDialog: openManagePlanDialog } = useManagePlanDialogStore();
+  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
+
+  const showcase =
+    videoUrl === undefined ? null : (
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="w-full rounded-lg"
+        controls={false}
+        src={videoUrl}
+      />
+    );
+
+  if (edition === ApEdition.COMMUNITY) {
+    const docsUrl = documentationUrl ?? ENTERPRISE_DOCUMENTATION_URL;
+    return (
+      <div className="flex max-w-md flex-col gap-2">
+        <h2 className="text-base font-medium">{t(title)}</h2>
+        <p className="text-sm text-muted-foreground">
+          {t('This is an Enterprise feature, available on our paid plans.')}
+        </p>
+        <a
+          href={docsUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex w-fit items-center gap-1 text-sm font-medium text-primary hover:underline"
+        >
+          {t('Read the docs')}
+          <ExternalLink className="size-3.5" />
+        </a>
+        {showContactSales && (
+          <div className="w-fit pt-2">
+            <RequestTrial featureKey={featureKey} />
+          </div>
+        )}
+        {showcase}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex max-w-md flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <h2 className="text-xl font-medium">{t(title)}</h2>
+          {tier !== undefined && (
+            <Badge variant="outline">{TIER_LABELS[tier]}</Badge>
+          )}
+        </div>
+        <p className="text-sm leading-relaxed text-muted-foreground">
+          {t(description)}
+        </p>
+      </div>
+
+      {bullets !== undefined && bullets.length > 0 && (
+        <ul className="flex flex-col gap-2">
+          {bullets.map((bullet) => (
+            <li key={bullet} className="flex items-start gap-2 text-sm">
+              <Check className="mt-0.5 size-4 shrink-0 text-primary" />
+              <span>{t(bullet)}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <div className="flex items-center gap-3">
+        <Button onClick={() => openManagePlanDialog()}>
+          {t('Upgrade plan')}
+        </Button>
+        {documentationUrl !== undefined && (
+          <a
+            href={documentationUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline"
+          >
+            {t('Read the docs')}
+            <ExternalLink className="size-3.5" />
+          </a>
+        )}
+      </div>
+
+      {showcase}
+    </div>
+  );
+}
+
+export function FeatureTeaser(props: FeatureTeaserProps) {
+  return (
+    <div className="flex w-full flex-1 flex-col px-6 pt-8">
+      <FeatureTeaserContent {...props} />
+    </div>
+  );
+}
+
+const ENTERPRISE_DOCUMENTATION_URL =
+  'https://www.activepieces.com/docs/install/configuration/overview#enterprise-edition-optional';
+
+export type FeatureTeaserProps = {
+  featureKey: FeatureKey;
+  showContactSales?: boolean;
+  title: string;
+  description: string;
+  bullets?: string[];
+  tier?: FeatureTier;
+  documentationUrl?: string;
+  videoUrl?: string;
+};
diff --git a/packages/web/src/app/components/locked-feature-guard.tsx b/packages/web/src/app/components/locked-feature-guard.tsx
index e8f2cadbfaee..b55edb365a06 100644
--- a/packages/web/src/app/components/locked-feature-guard.tsx
+++ b/packages/web/src/app/components/locked-feature-guard.tsx
@@ -1,23 +1,8 @@
-import { ApEdition, ApFlagId } from '@activepieces/shared';
-import { t } from 'i18next';
 import React from 'react';
 
-import { Button } from '@/components/ui/button';
-import { useManagePlanDialogStore } from '@/features/billing';
-import { flagsHooks } from '@/hooks/flags-hooks';
+import { FeatureKey, FeatureTier } from '@/features/billing';
 
-import { FeatureKey, RequestTrial } from './request-trial';
-
-type LockedFeatureGuardProps = {
-  children: React.ReactNode;
-  locked: boolean;
-  lockTitle: string;
-  lockDescription: string;
-  lockVideoUrl?: string;
-  lockDocumentationUrl?: string;
-  featureKey: FeatureKey;
-  showContactSales?: boolean;
-};
+import { FeatureTeaser } from './feature-teaser';
 
 export const LockedFeatureGuard = ({
   children,
@@ -26,66 +11,40 @@ export const LockedFeatureGuard = ({
   lockDescription,
   lockVideoUrl,
   lockDocumentationUrl,
+  lockBullets,
+  lockTier,
   featureKey,
   showContactSales = true,
 }: LockedFeatureGuardProps) => {
-  const { openDialog: openManagePlanDialog } = useManagePlanDialogStore();
-  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
-  const isCommunity = edition === ApEdition.COMMUNITY;
-
   if (!locked) {
     return children;
   }
 
   return (
-    <div className="flex w-full flex-col items-center justify-center gap-2">
-      <div className="pt-8 text-center flex flex-col gap-2 justify-center items-center">
-        <h1 className="text-3xl font-bold">{lockTitle}</h1>
-        <div className="text-center w-[485px] my-4 flex flex-col gap-2 justify-center items-center">
-          <p className="text-md leading-relaxed text-muted-foreground">
-            {lockDescription}
-            {lockDocumentationUrl && (
-              <>
-                {' '}
-                <a
-                  href={lockDocumentationUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-primary underline"
-                >
-                  Learn more
-                </a>
-              </>
-            )}
-          </p>
+    <FeatureTeaser
+      title={lockTitle}
+      description={lockDescription}
+      bullets={lockBullets}
+      tier={lockTier}
+      documentationUrl={lockDocumentationUrl}
+      videoUrl={lockVideoUrl}
+      featureKey={featureKey}
+      showContactSales={showContactSales}
+    />
+  );
+};
 
-          {isCommunity ? (
-            showContactSales && (
-              <div className="my-4">
-                <RequestTrial featureKey={featureKey} />
-              </div>
-            )
-          ) : (
-            <div className="my-4">
-              <Button onClick={() => openManagePlanDialog()}>
-                {t('Upgrade plan')}
-              </Button>
-            </div>
-          )}
-        </div>
+export default LockedFeatureGuard;
 
-        {lockVideoUrl && (
-          <video
-            autoPlay
-            loop
-            muted
-            playsInline
-            className="max-w-[70vh] rounded-lg"
-            controls={false}
-            src={lockVideoUrl}
-          />
-        )}
-      </div>
-    </div>
-  );
+type LockedFeatureGuardProps = {
+  children: React.ReactNode;
+  featureKey: FeatureKey;
+  showContactSales?: boolean;
+  locked: boolean;
+  lockTitle: string;
+  lockDescription: string;
+  lockVideoUrl?: string;
+  lockDocumentationUrl?: string;
+  lockBullets?: string[];
+  lockTier?: FeatureTier;
 };
diff --git a/packages/web/src/app/components/project-settings/pieces/index.tsx b/packages/web/src/app/components/project-settings/pieces/index.tsx
index ad456735bf61..2e28f8caf896 100644
--- a/packages/web/src/app/components/project-settings/pieces/index.tsx
+++ b/packages/web/src/app/components/project-settings/pieces/index.tsx
@@ -5,13 +5,13 @@ import { t } from 'i18next';
 import { Info, Package, Puzzle, Tag, Hash, GitBranch } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
-import { RequestTrial } from '@/app/components/request-trial';
 import { DataTable, RowDataWithActions } from '@/components/custom/data-table';
 import { DataTableColumnHeader } from '@/components/custom/data-table/data-table-column-header';
 import { DataTableInputPopover } from '@/components/custom/data-table/data-table-input-popover';
 import { LockedAlert } from '@/components/custom/locked-alert';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
+import { RequestTrial } from '@/features/billing';
 import { pieceSetQueries } from '@/features/piece-sets';
 import { PieceIcon, piecesHooks } from '@/features/pieces';
 import { projectCollectionUtils } from '@/features/projects';
diff --git a/packages/web/src/app/routes/mcp-server/pieces/pieces-tab.tsx b/packages/web/src/app/routes/mcp-server/pieces/pieces-tab.tsx
index adf8f5565f88..85d41bbb5e0c 100644
--- a/packages/web/src/app/routes/mcp-server/pieces/pieces-tab.tsx
+++ b/packages/web/src/app/routes/mcp-server/pieces/pieces-tab.tsx
@@ -8,13 +8,13 @@ import { useDebounce } from 'use-debounce';
 
 import { ProjectSettingsDialog } from '@/app/components/project-settings';
 import { mcpHooks } from '@/app/components/project-settings/mcp-server/utils/mcp-hooks';
-import { RequestTrial } from '@/app/components/request-trial';
 import { LockedAlert } from '@/components/custom/locked-alert';
 import { SearchInput } from '@/components/custom/search-input';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { VirtualizedList } from '@/components/ui/virtualized-list';
+import { RequestTrial } from '@/features/billing';
 import { pieceSetQueries } from '@/features/piece-sets';
 import { piecesHooks } from '@/features/pieces/hooks/pieces-hooks';
 import { projectCollectionUtils } from '@/features/projects';
diff --git a/packages/web/src/app/routes/platform/infra/workers/index.tsx b/packages/web/src/app/routes/platform/infra/workers/index.tsx
index fe7324018c2f..2a6b8ec4a660 100644
--- a/packages/web/src/app/routes/platform/infra/workers/index.tsx
+++ b/packages/web/src/app/routes/platform/infra/workers/index.tsx
@@ -22,8 +22,7 @@ import React from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
-import { RequestTrial } from '@/app/components/request-trial';
+import LockedFeatureGuard from '@/app/components/locked-feature-guard';
 import {
   Alert,
   AlertAction,
@@ -43,6 +42,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { RequestTrial } from '@/features/billing';
 import { workersQueries } from '@/features/platform-admin';
 import { flagsHooks } from '@/hooks/flags-hooks';
 import { platformHooks } from '@/hooks/platform-hooks';
diff --git a/packages/web/src/app/routes/platform/setup/pieces/index.tsx b/packages/web/src/app/routes/platform/setup/pieces/index.tsx
index b938bd0123ff..8d3f5e19a3c2 100644
--- a/packages/web/src/app/routes/platform/setup/pieces/index.tsx
+++ b/packages/web/src/app/routes/platform/setup/pieces/index.tsx
@@ -20,7 +20,6 @@ import { useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
 
 import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
-import { RequestTrial } from '@/app/components/request-trial';
 import { CustomizeSelectorDialog } from '@/app/routes/platform/setup/pieces/customize-selector-dialog';
 import { DownloadPiecesReportButton } from '@/app/routes/platform/setup/pieces/download-pieces-report';
 import { PieceActions } from '@/app/routes/platform/setup/pieces/piece-actions';
@@ -32,6 +31,7 @@ import { ConfirmationDeleteDialog } from '@/components/custom/delete-dialog';
 import { LockedAlert } from '@/components/custom/locked-alert';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { RequestTrial } from '@/features/billing';
 import { oauthAppsQueries } from '@/features/connections';
 import {
   InstallPieceDialog,
diff --git a/packages/web/src/app/routes/platform/users/index.tsx b/packages/web/src/app/routes/platform/users/index.tsx
index 4f314f0ca1c5..2549c6530b98 100644
--- a/packages/web/src/app/routes/platform/users/index.tsx
+++ b/packages/web/src/app/routes/platform/users/index.tsx
@@ -4,11 +4,10 @@ import {
   UserWithMetaInformation,
 } from '@activepieces/shared';
 import { t } from 'i18next';
-import { User } from 'lucide-react';
+import { Crown, User } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
 import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import { DataTable } from '@/components/custom/data-table';
 import { UserRoundPlusIcon } from '@/components/icons/user-round-plus';
 import { Button } from '@/components/ui/button';
@@ -37,7 +36,12 @@ export type UserRowData =
 
 export default function UsersPage() {
   const [inviteOpen, setInviteOpen] = useState(false);
-  const { handleSeatLimitError, seatLimitDialog } = useSeatLimitGuard();
+  const {
+    isOutOfSeats,
+    ensureSeatsAvailable,
+    handleSeatLimitError,
+    seatLimitDialog,
+  } = useSeatLimitGuard();
 
   const {
     data: usersData,
@@ -117,12 +121,7 @@ export default function UsersPage() {
   const columns = createUsersTableColumns();
 
   return (
-    <LockedFeatureGuard
-      featureKey="USERS"
-      locked={false}
-      lockTitle={t('Unlock Users')}
-      lockDescription={t('Manage your users and their access to your projects')}
-    >
+    <>
       <div className="flex flex-col w-full">
         <DashboardPageHeader
           title={t('Users')}
@@ -150,9 +149,17 @@ export default function UsersPage() {
               key="invite"
               className="gap-2"
               size="sm"
-              onClick={() => setInviteOpen(true)}
+              onClick={() => {
+                if (ensureSeatsAvailable(1)) {
+                  setInviteOpen(true);
+                }
+              }}
             >
-              <UserRoundPlusIcon size={16} />
+              {isOutOfSeats ? (
+                <Crown className="size-4 shrink-0 text-primary-foreground/90" />
+              ) : (
+                <UserRoundPlusIcon size={16} />
+              )}
               <span className="text-sm font-medium">{t('Invite')}</span>
             </Button>,
           ]}
@@ -175,6 +182,6 @@ export default function UsersPage() {
         onInviteSuccess={refetch}
       />
       {seatLimitDialog}
-    </LockedFeatureGuard>
+    </>
   );
 }
diff --git a/packages/web/src/components/custom/data-table/index.tsx b/packages/web/src/components/custom/data-table/index.tsx
index 5d8413b6c554..919457fb1d0e 100644
--- a/packages/web/src/components/custom/data-table/index.tsx
+++ b/packages/web/src/components/custom/data-table/index.tsx
@@ -333,6 +333,7 @@ export function DataTable<
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const rows = table.getRowModel().rows;
+  const visibleColumnCount = table.getVisibleLeafColumns().length;
   const virtualizer = useVirtualizer({
     count: rows.length,
     getScrollElement: () => scrollContainerRef.current,
@@ -422,7 +423,7 @@ export function DataTable<
             {isLoading ? (
               <TableRow className="hover:bg-background">
                 <TableCell
-                  colSpan={columns.length}
+                  colSpan={visibleColumnCount}
                   className="h-24 text-center"
                 >
                   <DataTableSkeleton />
@@ -434,7 +435,7 @@ export function DataTable<
                   {virtualizer.getVirtualItems().length > 0 && (
                     <tr>
                       <td
-                        colSpan={columns.length}
+                        colSpan={visibleColumnCount}
                         style={{
                           height: virtualizer.getVirtualItems()[0].start,
                         }}
@@ -528,7 +529,7 @@ export function DataTable<
                   {virtualizer.getVirtualItems().length > 0 && (
                     <tr>
                       <td
-                        colSpan={columns.length}
+                        colSpan={visibleColumnCount}
                         style={{
                           height:
                             virtualizer.getTotalSize() -
@@ -621,7 +622,7 @@ export function DataTable<
             ) : isError ? (
               <TableRow className="hover:bg-transparent">
                 <TableCell
-                  colSpan={columns.length}
+                  colSpan={visibleColumnCount}
                   className="h-[350px] text-center"
                 >
                   <DataFetchErrorState
@@ -633,7 +634,7 @@ export function DataTable<
             ) : (
               <TableRow className="hover:bg-background">
                 <TableCell
-                  colSpan={columns.length}
+                  colSpan={visibleColumnCount}
                   className="h-[350px] text-center"
                 >
                   <div className="flex flex-col items-center justify-center gap-2">
diff --git a/packages/web/src/app/components/request-trial.tsx b/packages/web/src/features/billing/components/request-trial.tsx
similarity index 100%
rename from packages/web/src/app/components/request-trial.tsx
rename to packages/web/src/features/billing/components/request-trial.tsx
diff --git a/packages/web/src/features/billing/hooks/use-feature-gate.tsx b/packages/web/src/features/billing/hooks/use-feature-gate.tsx
new file mode 100644
index 000000000000..34d32228099d
--- /dev/null
+++ b/packages/web/src/features/billing/hooks/use-feature-gate.tsx
@@ -0,0 +1,128 @@
+import { ApEdition, ApFlagId } from '@activepieces/shared';
+import { t } from 'i18next';
+import { Check, Crown, ExternalLink } from 'lucide-react';
+import { ReactNode, useState } from 'react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { flagsHooks } from '@/hooks/flags-hooks';
+
+import { FeatureKey } from '../components/request-trial';
+import { useManagePlanDialogStore } from '../stores/manage-plan-dialog-state';
+import { FeatureTier, TIER_LABELS } from '../utils/feature-tier';
+
+export function useFeatureGate({ locked, feature }: UseFeatureGateParams) {
+  const [open, setOpen] = useState(false);
+
+  return {
+    locked,
+    crown: locked ? (
+      <Crown className="size-3.5 shrink-0 text-primary-foreground/90" />
+    ) : null,
+    open: () => setOpen(true),
+    dialog: (
+      <UpgradeFeatureDialog open={open} onOpenChange={setOpen} {...feature} />
+    ),
+  };
+}
+
+export function UpgradeFeatureDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  bullets,
+  tier,
+  documentationUrl,
+}: UpgradeFeatureDialogProps) {
+  const { openDialog: openManagePlanDialog } = useManagePlanDialogStore();
+  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
+  const isCommunity = edition === ApEdition.COMMUNITY;
+  const docsUrl = documentationUrl ?? ENTERPRISE_DOCUMENTATION_URL;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[28rem]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {t(title)}
+            {tier !== undefined && !isCommunity && (
+              <Badge variant="outline">{TIER_LABELS[tier]}</Badge>
+            )}
+          </DialogTitle>
+          <DialogDescription>
+            {isCommunity
+              ? t('This is an Enterprise feature, available on our paid plans.')
+              : t(description)}
+          </DialogDescription>
+        </DialogHeader>
+
+        {!isCommunity && bullets !== undefined && bullets.length > 0 && (
+          <ul className="flex flex-col gap-2">
+            {bullets.map((bullet) => (
+              <li key={bullet} className="flex items-start gap-2 text-sm">
+                <Check className="mt-0.5 size-4 shrink-0 text-primary" />
+                <span>{t(bullet)}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <DialogFooter className="sm:justify-start">
+          {isCommunity ? (
+            <a
+              href={docsUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline"
+            >
+              {t('Read the docs')}
+              <ExternalLink className="size-3.5" />
+            </a>
+          ) : (
+            <Button
+              onClick={() => {
+                onOpenChange(false);
+                openManagePlanDialog();
+              }}
+            >
+              {t('Upgrade plan')}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const ENTERPRISE_DOCUMENTATION_URL =
+  'https://www.activepieces.com/docs/install/configuration/overview#enterprise-edition-optional';
+
+export type PlatformFeature = {
+  featureKey: FeatureKey;
+  title: string;
+  description: string;
+  bullets?: string[];
+  tier?: FeatureTier;
+  documentationUrl?: string;
+  videoUrl?: string;
+};
+
+export type UseFeatureGateParams = {
+  locked: boolean;
+  feature: PlatformFeature;
+};
+
+export type UpgradeFeatureDialogProps = PlatformFeature & {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children?: ReactNode;
+};
diff --git a/packages/web/src/features/billing/hooks/use-seat-limit-guard.tsx b/packages/web/src/features/billing/hooks/use-seat-limit-guard.tsx
index 08f866246c22..8d95d317913f 100644
--- a/packages/web/src/features/billing/hooks/use-seat-limit-guard.tsx
+++ b/packages/web/src/features/billing/hooks/use-seat-limit-guard.tsx
@@ -52,15 +52,21 @@ export const useSeatLimitGuard = () => {
     return true;
   };
 
-  const ensureSeatsAvailable = (additionalSeats: number): boolean => {
+  const hasSeatsFor = (additionalSeats: number): boolean => {
     if (isNil(info) || !info.billingEnforced || isNil(info.plan.usersLimit)) {
       return true;
     }
-    if (additionalSeats > info.plan.usersLimit - info.usage.users) {
-      openSeatLimit();
-      return false;
+    return additionalSeats <= info.plan.usersLimit - info.usage.users;
+  };
+
+  const isOutOfSeats = !hasSeatsFor(1);
+
+  const ensureSeatsAvailable = (additionalSeats: number): boolean => {
+    if (hasSeatsFor(additionalSeats)) {
+      return true;
     }
-    return true;
+    openSeatLimit();
+    return false;
   };
 
   const seatLimitDialog = isPlatformAdmin ? (
@@ -79,7 +85,12 @@ export const useSeatLimitGuard = () => {
     />
   );
 
-  return { handleSeatLimitError, ensureSeatsAvailable, seatLimitDialog };
+  return {
+    isOutOfSeats,
+    handleSeatLimitError,
+    ensureSeatsAvailable,
+    seatLimitDialog,
+  };
 };
 
 function ContactAdminSeatsDialog({
diff --git a/packages/web/src/features/billing/hooks/use-team-project-limit-guard.tsx b/packages/web/src/features/billing/hooks/use-team-project-limit-guard.tsx
index 7f8ae0825288..f753afec5c99 100644
--- a/packages/web/src/features/billing/hooks/use-team-project-limit-guard.tsx
+++ b/packages/web/src/features/billing/hooks/use-team-project-limit-guard.tsx
@@ -1,31 +1,39 @@
 import { isNil } from '@activepieces/core-utils';
-import { ProjectType, ProjectWithLimits } from '@activepieces/shared';
+import {
+  ApEdition,
+  ApFlagId,
+  ProjectType,
+  ProjectWithLimits,
+} from '@activepieces/shared';
 import { t } from 'i18next';
-import { useState } from 'react';
+import { Check, LayoutGrid } from 'lucide-react';
 
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
-  Dialog,
-  DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
 import { useIsPlatformAdmin } from '@/hooks/authorization-hooks';
+import { flagsHooks } from '@/hooks/flags-hooks';
 import { platformHooks } from '@/hooks/platform-hooks';
 
+import { RequestTrial } from '../components/request-trial';
 import { useManagePlanDialogStore } from '../stores/manage-plan-dialog-state';
+import { TIER_LABELS } from '../utils/feature-tier';
+import { PLATFORM_FEATURES } from '../utils/platform-features';
 
 export const useTeamProjectLimitGuard = ({
   projects,
 }: {
   projects: Pick<ProjectWithLimits, 'type'>[];
 }) => {
-  const [isLimitOpen, setIsLimitOpen] = useState(false);
   const isPlatformAdmin = useIsPlatformAdmin();
   const { platform } = platformHooks.useCurrentPlatform();
   const { openDialog } = useManagePlanDialogStore();
+  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
 
   const limit = platform.plan.billedTeamProjectsLimit;
   const teamProjectsUsed = projects.filter(
@@ -33,22 +41,14 @@ export const useTeamProjectLimitGuard = ({
   ).length;
   const hasReachedLimit = !isNil(limit) && teamProjectsUsed >= limit;
 
-  const ensureTeamProjectAvailable = (): boolean => {
-    if (!hasReachedLimit) {
-      return true;
-    }
-    setIsLimitOpen(true);
-    return false;
-  };
-
-  const teamProjectLimitDialog = (
-    <TeamProjectLimitDialog
-      open={isLimitOpen}
-      onOpenChange={setIsLimitOpen}
+  const teamProjectLimitContent = ({ onClose }: { onClose: () => void }) => (
+    <TeamProjectLimitContent
       limit={limit ?? 0}
       isPlatformAdmin={isPlatformAdmin}
+      isCommunity={edition === ApEdition.COMMUNITY}
+      onClose={onClose}
       onExplorePlans={() => {
-        setIsLimitOpen(false);
+        onClose();
         openDialog();
       }}
     />
@@ -56,67 +56,86 @@ export const useTeamProjectLimitGuard = ({
 
   return {
     hasReachedLimit,
-    ensureTeamProjectAvailable,
-    teamProjectLimitDialog,
+    teamProjectLimitContent,
   };
 };
 
-function TeamProjectLimitDialog({
-  open,
-  onOpenChange,
+function TeamProjectLimitContent({
   limit,
   isPlatformAdmin,
+  isCommunity,
+  onClose,
   onExplorePlans,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  limit: number;
-  isPlatformAdmin: boolean;
-  onExplorePlans: () => void;
-}) {
+}: TeamProjectLimitContentProps) {
+  const feature = PLATFORM_FEATURES.projects;
+  const isFirstTeamProject = limit === 0;
+  const showBenefits = isPlatformAdmin && isFirstTeamProject;
+
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[420px]">
-        <DialogHeader>
-          <DialogTitle>
-            {t("You've reached your team project limit")}
-          </DialogTitle>
-          <DialogDescription>
-            {isPlatformAdmin
-              ? limit === 0
-                ? t(
-                    'Team projects let you group flows and share them with your teammates. Upgrade to add one.',
-                  )
-                : t(
-                    'Your plan includes {count, plural, =1 {1 team project} other {# team projects}}. Upgrade to add more.',
-                    { count: limit },
-                  )
+    <>
+      <DialogHeader>
+        <div className="flex size-10 items-center justify-center rounded-full bg-primary/10">
+          <LayoutGrid className="size-5 text-primary" />
+        </div>
+        <DialogTitle className="flex items-center gap-2">
+          {showBenefits
+            ? t(feature.title)
+            : t("You've reached your team project limit")}
+          {showBenefits && (
+            <Badge variant="outline">{TIER_LABELS[feature.tier]}</Badge>
+          )}
+        </DialogTitle>
+        <DialogDescription>
+          {isPlatformAdmin
+            ? isFirstTeamProject
+              ? t(feature.description)
               : t(
-                  'Contact a platform admin to upgrade the plan and add more team projects.',
-                )}
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          {isPlatformAdmin ? (
-            <>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => onOpenChange(false)}
-              >
-                {t('Cancel')}
-              </Button>
+                  'Your plan includes {count, plural, =1 {1 team project} other {# team projects}}. Upgrade to add more.',
+                  { count: limit },
+                )
+            : t(
+                'Contact a platform admin to upgrade the plan and add more team projects.',
+              )}
+        </DialogDescription>
+      </DialogHeader>
+      {showBenefits && (
+        <ul className="flex flex-col gap-2">
+          {feature.bullets.map((bullet) => (
+            <li key={bullet} className="flex items-start gap-2 text-sm">
+              <Check className="mt-0.5 size-4 shrink-0 text-primary" />
+              <span>{t(bullet)}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+      <DialogFooter>
+        {isPlatformAdmin ? (
+          <>
+            <Button type="button" variant="outline" onClick={onClose}>
+              {t('Cancel')}
+            </Button>
+            {isCommunity ? (
+              <RequestTrial featureKey={feature.featureKey} />
+            ) : (
               <Button type="button" onClick={onExplorePlans}>
                 {t('Explore plans')}
               </Button>
-            </>
-          ) : (
-            <Button type="button" onClick={() => onOpenChange(false)}>
-              {t('Got it')}
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+            )}
+          </>
+        ) : (
+          <Button type="button" onClick={onClose}>
+            {t('Got it')}
+          </Button>
+        )}
+      </DialogFooter>
+    </>
   );
 }
+
+type TeamProjectLimitContentProps = {
+  limit: number;
+  isPlatformAdmin: boolean;
+  isCommunity: boolean;
+  onClose: () => void;
+  onExplorePlans: () => void;
+};
diff --git a/packages/web/src/features/billing/index.ts b/packages/web/src/features/billing/index.ts
index 954f1ab8d8d0..0a56444bd4da 100644
--- a/packages/web/src/features/billing/index.ts
+++ b/packages/web/src/features/billing/index.ts
@@ -30,3 +30,10 @@ export {
 } from './components/plan-selector-utils';
 export { useManagePlanDialogStore } from './stores/manage-plan-dialog-state';
 export { AutomaticTrialActivation } from './components/automatic-trial-activation';
+export { useFeatureGate, UpgradeFeatureDialog } from './hooks/use-feature-gate';
+export type { PlatformFeature } from './hooks/use-feature-gate';
+export { RequestTrial } from './components/request-trial';
+export type { FeatureKey } from './components/request-trial';
+export { TIER_LABELS } from './utils/feature-tier';
+export type { FeatureTier } from './utils/feature-tier';
+export { PLATFORM_FEATURES } from './utils/platform-features';
diff --git a/packages/web/src/features/billing/utils/feature-tier.ts b/packages/web/src/features/billing/utils/feature-tier.ts
new file mode 100644
index 000000000000..6a3442b8957d
--- /dev/null
+++ b/packages/web/src/features/billing/utils/feature-tier.ts
@@ -0,0 +1,6 @@
+export const TIER_LABELS: Record<FeatureTier, string> = {
+  team: 'Team',
+  enterprise: 'Enterprise',
+};
+
+export type FeatureTier = 'team' | 'enterprise';
diff --git a/packages/web/src/features/billing/utils/platform-features.ts b/packages/web/src/features/billing/utils/platform-features.ts
new file mode 100644
index 000000000000..be4e7e213fe1
--- /dev/null
+++ b/packages/web/src/features/billing/utils/platform-features.ts
@@ -0,0 +1,145 @@
+import { PlatformFeature } from '../hooks/use-feature-gate';
+
+export const PLATFORM_FEATURES = {
+  projects: {
+    featureKey: 'PROJECTS',
+    title: 'Unlock Projects',
+    description:
+      'Orchestrate your automation teams across projects with their own flows, connections and usage quotas',
+    tier: 'team',
+    bullets: [
+      'Separate flows, connections and members per project',
+      'Set credit and user quotas per project',
+      'Teams work side by side without stepping on each other',
+    ],
+  },
+  sso: {
+    featureKey: 'SSO',
+    title: 'Enable Single Sign On',
+    description:
+      'Let your users sign in with your current SSO provider or give them self serve sign up access',
+    tier: 'team',
+    bullets: [
+      'Works with SAML and OIDC providers',
+      'Enforce SSO for everyone on the platform',
+      'Control who can self-serve sign up',
+    ],
+  },
+  projectRoles: {
+    featureKey: 'CUSTOM_ROLES',
+    title: 'Project Role Management',
+    description:
+      'Define custom roles and permissions to control what your team members can access and modify',
+    tier: 'team',
+    bullets: [
+      'Scope access per project, not per platform',
+      'Keep production flows safe from accidental edits',
+      'Assign roles when you invite someone',
+    ],
+  },
+  globalConnections: {
+    featureKey: 'GLOBAL_CONNECTIONS',
+    title: 'Enable Global Connections',
+    description: 'Manage platform-wide connections to external systems.',
+    tier: 'team',
+    bullets: [
+      'Create once, use in any project',
+      'Rotate credentials in a single place',
+      'Choose which projects can use each connection',
+    ],
+  },
+  apiKeys: {
+    featureKey: 'API',
+    title: 'Enable API Keys',
+    description: 'Create and manage API keys to access Activepieces APIs.',
+    tier: 'team',
+    bullets: [
+      'Drive projects, flows and connections from your own tooling',
+      'Scope a key to the platform, not to a person',
+      'Revoke a key without touching anyone’s login',
+    ],
+  },
+  secretManagers: {
+    featureKey: 'SECRET_MANAGERS',
+    title: 'Enable Secret Managers',
+    description: 'Manage your secrets from a single and secure place',
+    tier: 'enterprise',
+    bullets: [
+      'AWS, Azure, GCP and HashiCorp Vault',
+      'Secrets never leave your infrastructure',
+      'One secure place to rotate everything',
+    ],
+  },
+  auditLogs: {
+    featureKey: 'AUDIT_LOGS',
+    title: 'Unlock Audit Logs',
+    description:
+      'Comply with internal and external security policies by tracking activities done within your account',
+    tier: 'enterprise',
+    bullets: [
+      'Every user and system action, recorded',
+      'Filter by user, project and event type',
+      'Export for compliance reviews',
+    ],
+  },
+  eventStreaming: {
+    featureKey: 'EVENT_DESTINATIONS',
+    title: 'Unlock Event Streaming',
+    description:
+      'Forward every audit event we emit to a webhook, then handle it in a flow.',
+    tier: 'enterprise',
+    bullets: [
+      'Stream events to any endpoint',
+      'Wire alerts into Slack, PagerDuty or email',
+      'Build your own monitoring on top',
+    ],
+  },
+  templates: {
+    featureKey: 'TEMPLATES',
+    title: 'Unlock Templates',
+    description:
+      'Convert the most common automations into reusable templates 1 click away from your users',
+    tier: 'enterprise',
+    bullets: [
+      'Publish reusable templates to every project',
+      'One click from template to running flow',
+      'Standardize how your teams automate',
+    ],
+  },
+  embedding: {
+    featureKey: 'SIGNING_KEYS',
+    title: 'Unlock Embedding Through JS SDK',
+    description: 'Enable signing keys to access embedding functionalities.',
+    tier: 'enterprise',
+    bullets: [
+      'Drop the builder into your app with the JS SDK',
+      'Authenticate users with signing keys',
+      'Your customers automate without leaving your product',
+    ],
+  },
+  branding: {
+    featureKey: 'BRANDING',
+    title: 'Unlock Branding',
+    description: 'Your name, logo and colors across the entire experience.',
+    tier: 'enterprise',
+    bullets: [
+      'Custom logo, icon, favicon and colors',
+      'Branded emails and sign-in pages',
+      'Your product, not ours',
+    ],
+  },
+  pieces: {
+    featureKey: 'PIECES',
+    title: 'Unlock Piece Management',
+    description:
+      'Curate which pieces your users see, hide the rest, and add your own private pieces.',
+    tier: 'enterprise',
+    bullets: [
+      'Show only the pieces that matter to your users',
+      'Ship private pieces for internal systems',
+      'Keep the catalog on-brand and focused',
+    ],
+  },
+} satisfies Record<string, PlatformFeature>;
+
+export type PlatformFeatureId = keyof typeof PLATFORM_FEATURES;
diff --git a/packages/web/src/features/platform-admin/hooks/api-key-hooks.ts b/packages/web/src/features/platform-admin/hooks/api-key-hooks.ts
index 67d51f1619e2..f9a3e25ec5cb 100644
--- a/packages/web/src/features/platform-admin/hooks/api-key-hooks.ts
+++ b/packages/web/src/features/platform-admin/hooks/api-key-hooks.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
+import { platformHooks } from '@/hooks/platform-hooks';
+
 import { apiKeyApi } from '../api/api-key-api';
 
 export const apiKeyKeys = {
@@ -7,13 +9,16 @@ export const apiKeyKeys = {
 };
 
 export const apiKeyQueries = {
-  useApiKeys: () =>
-    useQuery({
+  useApiKeys: () => {
+    const { platform } = platformHooks.useCurrentPlatform();
+    return useQuery({
       queryKey: apiKeyKeys.all,
       gcTime: 0,
       staleTime: 0,
       queryFn: () => apiKeyApi.list(),
-    }),
+      enabled: platform.plan.apiKeysEnabled,
+    });
+  },
 };
 
 export const apiKeyMutations = {
diff --git a/packages/web/src/features/platform-admin/hooks/signing-key-hooks.ts b/packages/web/src/features/platform-admin/hooks/signing-key-hooks.ts
index c7ce28f1c94a..7ac5ecf57927 100644
--- a/packages/web/src/features/platform-admin/hooks/signing-key-hooks.ts
+++ b/packages/web/src/features/platform-admin/hooks/signing-key-hooks.ts
@@ -4,6 +4,8 @@ import {
 } from '@activepieces/shared';
 import { useMutation, useQuery } from '@tanstack/react-query';
 
+import { platformHooks } from '@/hooks/platform-hooks';
+
 import { signingKeyApi } from '../api/signing-key-api';
 
 export const signingKeyKeys = {
@@ -11,13 +13,16 @@ export const signingKeyKeys = {
 };
 
 export const signingKeyQueries = {
-  useSigningKeys: () =>
-    useQuery({
+  useSigningKeys: () => {
+    const { platform } = platformHooks.useCurrentPlatform();
+    return useQuery({
       queryKey: signingKeyKeys.all,
       gcTime: 0,
       staleTime: 0,
       queryFn: () => signingKeyApi.list(),
-    }),
+      enabled: platform.plan.embeddingEnabled,
+    });
+  },
 };
 
 export const signingKeyMutations = {
diff --git a/packages/web/src/features/projects/components/create-project-button.tsx b/packages/web/src/features/projects/components/create-project-button.tsx
index e668b8bdd439..41bbae7dc9c7 100644
--- a/packages/web/src/features/projects/components/create-project-button.tsx
+++ b/packages/web/src/features/projects/components/create-project-button.tsx
@@ -1,12 +1,17 @@
 import { ProjectWithLimits } from '@activepieces/shared';
 import { t } from 'i18next';
-import { Plus } from 'lucide-react';
+import { Crown, Plus } from 'lucide-react';
+import React from 'react';
 
 import { AnimatedIconButton } from '@/components/custom/animated-icon-button';
 import { PlusIcon } from '@/components/icons/plus';
 import { Button } from '@/components/ui/button';
 import { SidebarMenuButton } from '@/components/ui/sidebar-shadcn';
-import { useTeamProjectLimitGuard } from '@/features/billing';
+import {
+  PLATFORM_FEATURES,
+  useFeatureGate,
+  useTeamProjectLimitGuard,
+} from '@/features/billing';
 import { cn } from '@/lib/utils';
 
 import { NewProjectDialog } from './new-project-dialog';
@@ -17,31 +22,35 @@ export function CreateProjectButton({
   onCreate,
   className,
 }: CreateProjectButtonProps) {
-  const {
-    hasReachedLimit,
-    ensureTeamProjectAvailable,
-    teamProjectLimitDialog,
-  } = useTeamProjectLimitGuard({ projects });
+  const { hasReachedLimit, teamProjectLimitContent } = useTeamProjectLimitGuard(
+    { projects },
+  );
+  const projectsGate = useFeatureGate({
+    locked: hasReachedLimit,
+    feature: PLATFORM_FEATURES.projects,
+  });
 
   const trigger = triggerFor({
     variant,
     className,
-    onClick: hasReachedLimit ? () => ensureTeamProjectAvailable() : undefined,
+    crown: projectsGate.crown,
+    locked: projectsGate.locked,
   });
 
   return (
-    <>
-      {hasReachedLimit ? (
-        trigger
-      ) : (
-        <NewProjectDialog onCreate={onCreate}>{trigger}</NewProjectDialog>
-      )}
-      {teamProjectLimitDialog}
-    </>
+    <NewProjectDialog
+      onCreate={onCreate}
+      gate={{
+        locked: hasReachedLimit,
+        content: teamProjectLimitContent,
+      }}
+    >
+      {trigger}
+    </NewProjectDialog>
   );
 }
 
-function triggerFor({ variant, className, onClick }: TriggerForParams) {
+function triggerFor({ variant, className, crown, locked }: TriggerForParams) {
   switch (variant) {
     case 'icon':
       return (
@@ -49,19 +58,22 @@ function triggerFor({ variant, className, onClick }: TriggerForParams) {
           variant="ghost"
           size="icon"
           className={cn('h-6 w-6 hover:bg-accent', className)}
-          onClick={onClick}
         >
-          <Plus />
+          {locked ? <Crown className="text-primary" /> : <Plus />}
         </Button>
       );
     case 'full':
-      return (
+      return crown ? (
+        <Button size="sm" className={cn('has-[>svg]:px-2.5', className)}>
+          {crown}
+          {t('New Project')}
+        </Button>
+      ) : (
         <AnimatedIconButton
           icon={PlusIcon}
           iconSize={16}
           size="sm"
           className={className}
-          onClick={onClick}
         >
           {t('New Project')}
         </AnimatedIconButton>
@@ -70,9 +82,12 @@ function triggerFor({ variant, className, onClick }: TriggerForParams) {
       return (
         <SidebarMenuButton
           className={cn('text-muted-foreground gap-2', className)}
-          onClick={onClick}
         >
-          <Plus className="size-4" />
+          {locked ? (
+            <Crown className="size-4 text-primary" />
+          ) : (
+            <Plus className="size-4" />
+          )}
           <span>{t('Add team project')}</span>
         </SidebarMenuButton>
       );
@@ -84,7 +99,8 @@ type CreateProjectButtonVariant = 'icon' | 'full' | 'sidebar-menu';
 type TriggerForParams = {
   variant: CreateProjectButtonVariant;
   className?: string;
-  onClick?: () => void;
+  crown: React.ReactNode;
+  locked: boolean;
 };
 
 type CreateProjectButtonProps = {
diff --git a/packages/web/src/features/projects/components/new-project-dialog.tsx b/packages/web/src/features/projects/components/new-project-dialog.tsx
index d3c7753d60d6..09286a20169e 100644
--- a/packages/web/src/features/projects/components/new-project-dialog.tsx
+++ b/packages/web/src/features/projects/components/new-project-dialog.tsx
@@ -7,6 +7,7 @@ import {
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
 import { t } from 'i18next';
+import { Crown } from 'lucide-react';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -43,10 +44,16 @@ import { userHooks } from '@/hooks/user-hooks';
 type NewProjectDialogProps = {
   children: React.ReactNode;
   onCreate?: (project: ProjectWithLimits) => void;
+  gate?: {
+    locked: boolean;
+    content: (args: { onClose: () => void }) => React.ReactNode;
+  };
 };
 
 export const NewProjectDialog = (props: NewProjectDialogProps) => {
   const [open, setOpen] = useState(false);
+  const [blockedOnSubmit, setBlockedOnSubmit] = useState(false);
+  const showGate = props.gate?.locked === true || blockedOnSubmit;
   const { platform } = platformHooks.useCurrentPlatform();
   const globalConnectionsEnabled = platform.plan.globalConnectionsEnabled;
 
@@ -58,28 +65,53 @@ export const NewProjectDialog = (props: NewProjectDialogProps) => {
 
   const globalConnections = globalConnectionsPage?.data ?? [];
 
+  const changeOpen = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      setBlockedOnSubmit(false);
+    }
+  };
+
   return (
-    <Dialog key={open ? 'open' : 'closed'} open={open} onOpenChange={setOpen}>
+    <Dialog
+      key={open ? 'open' : 'closed'}
+      open={open}
+      onOpenChange={changeOpen}
+    >
       <DialogTrigger asChild>{props.children}</DialogTrigger>
       <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t('Create Project')}</DialogTitle>
-          <DialogDescription>
-            {t(
-              'Set up a new project to organize your automations and connections.',
+        {showGate && props.gate !== undefined ? (
+          props.gate.content({ onClose: () => changeOpen(false) })
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>{t('Create Project')}</DialogTitle>
+              <DialogDescription>
+                {t(
+                  'Set up a new project to organize your automations and connections.',
+                )}
+              </DialogDescription>
+            </DialogHeader>
+            {(!isLoadingConnections || !globalConnectionsEnabled) && (
+              <NewProjectForm
+                setOpen={setOpen}
+                globalConnections={globalConnections}
+                globalConnectionsEnabled={globalConnectionsEnabled}
+                onCreate={props.onCreate}
+                gate={
+                  props.gate === undefined
+                    ? undefined
+                    : {
+                        locked: props.gate.locked,
+                        onBlocked: () => setBlockedOnSubmit(true),
+                      }
+                }
+              />
             )}
-          </DialogDescription>
-        </DialogHeader>
-        {(!isLoadingConnections || !globalConnectionsEnabled) && (
-          <NewProjectForm
-            setOpen={setOpen}
-            globalConnections={globalConnections}
-            globalConnectionsEnabled={globalConnectionsEnabled}
-            onCreate={props.onCreate}
-          />
-        )}
-        {isLoadingConnections && globalConnectionsEnabled && (
-          <SkeletonList numberOfItems={3} className="h-10" />
+            {isLoadingConnections && globalConnectionsEnabled && (
+              <SkeletonList numberOfItems={3} className="h-10" />
+            )}
+          </>
         )}
       </DialogContent>
     </Dialog>
@@ -91,10 +123,12 @@ const NewProjectForm = ({
   setOpen,
   globalConnections,
   globalConnectionsEnabled,
-}: Omit<NewProjectDialogProps, 'children'> & {
+  gate,
+}: Omit<NewProjectDialogProps, 'children' | 'gate'> & {
   setOpen: (open: boolean) => void;
   globalConnections: AppConnectionWithoutSensitiveData[];
   globalConnectionsEnabled: boolean;
+  gate?: { locked: boolean; onBlocked: () => void };
 }) => {
   const queryClient = useQueryClient();
   const { platform } = platformHooks.useCurrentPlatform();
@@ -271,9 +305,14 @@ const NewProjectForm = ({
               onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
+                if (gate?.locked === true) {
+                  gate.onBlocked();
+                  return;
+                }
                 form.handleSubmit(handleCreate)(e);
               }}
             >
+              {gate?.locked === true && <Crown className="size-3.5 shrink-0" />}
               {t('Create Project')}
             </Button>
           </DialogFooter>
diff --git a/packages/web/test/app/billing/feature-gating.test.tsx b/packages/web/test/app/billing/feature-gating.test.tsx
new file mode 100644
index 000000000000..2253645177c3
--- /dev/null
+++ b/packages/web/test/app/billing/feature-gating.test.tsx
@@ -0,0 +1,244 @@
+/**
+ * @vitest-environment jsdom
+ */
+/* eslint-disable jest-dom/prefer-in-document -- @testing-library/jest-dom is not a dependency of packages/web */
+/* eslint-disable testing-library/no-container, testing-library/no-node-access -- <video> has no implicit ARIA role */
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, fireEvent } from '@testing-library/react';
+import * as React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+let teamProjectsLimit: number | null = 0;
+let edition = 'cloud';
+const createProject = vi.fn();
+
+vi.mock('i18next', () => ({ t: (key: string) => key }));
+
+vi.mock('lucide-react', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Crown: (props: Record<string, unknown>) =>
+    React.createElement('span', { ...props, 'data-testid': 'crown' }),
+}));
+
+vi.mock('@/hooks/platform-hooks', () => ({
+  platformHooks: {
+    useCurrentPlatform: () => ({
+      platform: {
+        plan: {
+          billedTeamProjectsLimit: teamProjectsLimit,
+          globalConnectionsEnabled: false,
+        },
+      },
+    }),
+  },
+}));
+vi.mock('@/hooks/user-hooks', () => ({
+  userHooks: {
+    getCurrentUserPlatformRole: () => 'ADMIN',
+    useCurrentUser: () => ({ data: undefined }),
+  },
+}));
+vi.mock('@/hooks/authorization-hooks', () => ({
+  useIsPlatformAdmin: () => true,
+}));
+vi.mock('@/hooks/flags-hooks', () => ({
+  flagsHooks: {
+    useFlag: () => ({ data: edition }),
+    useFlags: () => ({ data: {} }),
+  },
+}));
+vi.mock('@/features/billing/stores/manage-plan-dialog-state', () => ({
+  useManagePlanDialogStore: () => ({ openDialog: vi.fn() }),
+}));
+vi.mock('@/features/billing', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  useManagePlanDialogStore: () => ({ openDialog: vi.fn() }),
+}));
+vi.mock('@/features/connections', () => ({
+  globalConnectionsQueries: {
+    useGlobalConnections: () => ({ data: { data: [] }, isLoading: false }),
+  },
+}));
+vi.mock('@/features/projects', () => ({
+  projectCollectionUtils: {
+    invalidate: vi.fn(),
+    useCreateProject: () => ({ mutate: createProject, isPending: false }),
+  },
+}));
+vi.mock('@/components/custom/global-connection-utils', () => ({
+  DefaultTag: () => null,
+}));
+vi.mock('@/components/custom/multi-select-piece-property', () => ({
+  MultiSelectPieceProperty: () => null,
+}));
+vi.mock('@/components/ui/sonner', () => ({ internalErrorToast: vi.fn() }));
+vi.mock('@/components/custom/animated-icon-button', () => ({
+  AnimatedIconButton: ({
+    children,
+    icon: _icon,
+    iconSize: _iconSize,
+    ...rest
+  }: React.PropsWithChildren<Record<string, unknown>>) => (
+    <button {...rest} data-testid="new-project-trigger">
+      {children}
+    </button>
+  ),
+}));
+vi.mock('@/components/icons/plus', () => ({ PlusIcon: () => null }));
+vi.mock('@/components/ui/sidebar-shadcn', () => ({
+  SidebarMenuButton: ({
+    children,
+    ...rest
+  }: React.PropsWithChildren<Record<string, unknown>>) => (
+    <button {...rest}>{children}</button>
+  ),
+}));
+
+import { FeatureTeaser } from '@/app/components/feature-teaser';
+import { CreateProjectButton } from '@/features/projects/components/create-project-button';
+
+const LIMIT_REACHED_COPY = "You've reached your team project limit";
+const SHOWCASE_VIDEO =
+  'https://cdn.activepieces.com/videos/showcase/api-keys.mp4';
+
+const renderWithQueryClient = (ui: React.ReactElement) =>
+  render(
+    <QueryClientProvider
+      client={
+        new QueryClient({ defaultOptions: { queries: { retry: false } } })
+      }
+    >
+      {ui}
+    </QueryClientProvider>,
+  );
+
+const usedTeamProjects = (count: number) =>
+  Array.from({ length: count }, () => ({ type: 'TEAM' })) as never;
+
+beforeEach(() => {
+  teamProjectsLimit = 0;
+  edition = 'cloud';
+  createProject.mockClear();
+});
+
+describe('create project gating', () => {
+  it('crowns the button when the plan includes no team projects', () => {
+    teamProjectsLimit = 0;
+    renderWithQueryClient(
+      <CreateProjectButton variant="full" projects={usedTeamProjects(0)} />,
+    );
+    expect(screen.getByTestId('crown')).toBeDefined();
+  });
+
+  it('crowns the button when the team project allowance is used up', () => {
+    teamProjectsLimit = 3;
+    renderWithQueryClient(
+      <CreateProjectButton variant="full" projects={usedTeamProjects(3)} />,
+    );
+    expect(screen.getByTestId('crown')).toBeDefined();
+  });
+
+  it('crowns every variant, including the sidebar rail', () => {
+    teamProjectsLimit = 0;
+    renderWithQueryClient(
+      <CreateProjectButton variant="icon" projects={usedTeamProjects(0)} />,
+    );
+    expect(screen.getByTestId('crown')).toBeDefined();
+  });
+
+  it('refuses on the click instead of after the form is filled in', () => {
+    teamProjectsLimit = 3;
+    renderWithQueryClient(
+      <CreateProjectButton variant="full" projects={usedTeamProjects(3)} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /new project/i }));
+    expect(screen.getByText(LIMIT_REACHED_COPY)).toBeDefined();
+    expect(screen.queryAllByRole('textbox')).toHaveLength(0);
+    expect(createProject).not.toHaveBeenCalled();
+  });
+
+  it('offers contact sales instead of a dead upgrade button on community', () => {
+    edition = 'ce';
+    teamProjectsLimit = 1;
+    renderWithQueryClient(
+      <CreateProjectButton variant="full" projects={usedTeamProjects(1)} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /new project/i }));
+    expect(screen.getByRole('button', { name: /contact sales/i })).toBeDefined();
+    expect(screen.queryByRole('button', { name: /explore plans/i })).toBeNull();
+  });
+
+  it('keeps explore plans where the plan dialog is actually mounted', () => {
+    edition = 'cloud';
+    teamProjectsLimit = 1;
+    renderWithQueryClient(
+      <CreateProjectButton variant="full" projects={usedTeamProjects(1)} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /new project/i }));
+    expect(screen.getByRole('button', { name: /explore plans/i })).toBeDefined();
+    expect(screen.queryByRole('button', { name: /contact sales/i })).toBeNull();
+  });
+
+  it('still opens the form when the plan has room', () => {
+    teamProjectsLimit = 3;
+    renderWithQueryClient(
+      <CreateProjectButton variant="full" projects={usedTeamProjects(1)} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /new project/i }));
+    expect(screen.queryByText(LIMIT_REACHED_COPY)).toBeNull();
+    expect(screen.queryAllByRole('textbox').length).toBeGreaterThan(0);
+  });
+});
+
+describe('feature teaser', () => {
+  it('plays the showcase video on community, same as every other edition', () => {
+    edition = 'ce';
+    const { container } = render(
+      <FeatureTeaser
+        featureKey="API"
+        title="Enable API Keys"
+        description=""
+        videoUrl={SHOWCASE_VIDEO}
+      />,
+    );
+    expect(container.querySelector('video')?.getAttribute('src')).toBe(
+      SHOWCASE_VIDEO,
+    );
+  });
+
+  it('offers contact sales on community, as the locked page did before', () => {
+    edition = 'ce';
+    render(
+      <FeatureTeaser featureKey="API" title="Enable API Keys" description="" />,
+    );
+    expect(screen.getByRole('button', { name: /contact sales/i })).toBeDefined();
+  });
+
+  it('drops contact sales only where the caller opts out', () => {
+    edition = 'ce';
+    render(
+      <FeatureTeaser
+        featureKey="BILLING"
+        title="Enable Billing"
+        description=""
+        showContactSales={false}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: /contact sales/i })).toBeNull();
+  });
+
+  it('plays the showcase video on cloud', () => {
+    edition = 'cloud';
+    const { container } = render(
+      <FeatureTeaser
+        featureKey="API"
+        title="Enable API Keys"
+        description=""
+        videoUrl={SHOWCASE_VIDEO}
+      />,
+    );
+    expect(container.querySelector('video')?.getAttribute('src')).toBe(
+      SHOWCASE_VIDEO,
+    );
+  });
+});

From 56a3bd64d158cc07b057244b4c56dec10586f39b Mon Sep 17 00:00:00 2001
From: Ahmad Tash <144666528+AhmadTash@users.noreply.github.com>
Date: Wed, 23 Sep 2026 11:58:27 +0300
Subject: [PATCH 2/4] feat(web): reorganise platform administration into fewer,
 clearer pages (#15563)

---
 ...fifteen-pages-derived-from-one-registry.md | 431 +++++++++++++++
 brain/knowledge/engineering/index.md          |   1 +
 .../engineering/web-navigation-shell.md       |  77 +++
 .../src/app/components/billing-page-shell.tsx |   2 +-
 .../web/src/app/components/centered-page.tsx  |  31 +-
 .../web/src/app/components/feature-banner.tsx |  54 ++
 .../app/components/sidebar/platform/index.tsx | 257 ++-------
 .../sidebar/platform/platform-nav-item.tsx    | 113 ++++
 .../src/app/routes/mcp-server/page-band.tsx   |   2 +-
 .../web/src/app/routes/platform-routes.tsx    | 483 +++-------------
 .../src/app/routes/platform/admin-pages.ts    | 520 ++++++++++++++++++
 .../src/app/routes/platform/billing/index.tsx |  91 +--
 .../app/routes/platform/billing/usage-tab.tsx |  46 ++
 .../routes/platform/infra/health/index.tsx    |  15 +-
 .../routes/platform/infra/workers/index.tsx   |  15 +-
 .../routes/platform/overview/ai-overview.tsx  | 177 ++++++
 .../platform/overview/billing-overview.tsx    |  59 ++
 .../overview/connections-overview.tsx         | 165 ++++++
 .../overview/infrastructure-overview.tsx      | 198 +++++++
 .../platform/overview/overview-shell.tsx      | 207 +++++++
 .../platform/overview/security-overview.tsx   | 158 ++++++
 .../platform/overview/users-overview.tsx      | 170 ++++++
 .../app/routes/platform/projects/index.tsx    | 176 +++---
 .../setup/ai/capabilities-tab/index.tsx       |   2 +-
 .../app/routes/platform/setup/ai/index.tsx    | 128 -----
 .../platform/setup/ai/providers-tab/index.tsx |  38 +-
 .../setup/general/appearance-section.tsx      | 431 +++++++--------
 .../routes/platform/setup/general/index.tsx   |   2 +-
 .../app/routes/platform/setup/mcp/index.tsx   |  38 +-
 .../pieces/customize-selector-dialog.tsx      |  21 +-
 .../routes/platform/setup/pieces/index.tsx    | 161 ++----
 .../pieces/piece-sets/piece-sets-tab.tsx      |   9 +
 .../setup/pieces/pieces-locked-banner.tsx     |  20 +
 .../src/app/routes/platform/usage/index.tsx   |  47 --
 .../hooks/ai-tool-config-hooks.ts             |  13 +-
 packages/web/src/styles.css                   |   2 +
 36 files changed, 3031 insertions(+), 1329 deletions(-)
 create mode 100644 brain/knowledge/decisions/000035-platform-admin-is-fifteen-pages-derived-from-one-registry.md
 create mode 100644 brain/knowledge/engineering/web-navigation-shell.md
 create mode 100644 packages/web/src/app/components/feature-banner.tsx
 create mode 100644 packages/web/src/app/components/sidebar/platform/platform-nav-item.tsx
 create mode 100644 packages/web/src/app/routes/platform/admin-pages.ts
 create mode 100644 packages/web/src/app/routes/platform/billing/usage-tab.tsx
 create mode 100644 packages/web/src/app/routes/platform/overview/ai-overview.tsx
 create mode 100644 packages/web/src/app/routes/platform/overview/billing-overview.tsx
 create mode 100644 packages/web/src/app/routes/platform/overview/connections-overview.tsx
 create mode 100644 packages/web/src/app/routes/platform/overview/infrastructure-overview.tsx
 create mode 100644 packages/web/src/app/routes/platform/overview/overview-shell.tsx
 create mode 100644 packages/web/src/app/routes/platform/overview/security-overview.tsx
 create mode 100644 packages/web/src/app/routes/platform/overview/users-overview.tsx
 delete mode 100644 packages/web/src/app/routes/platform/setup/ai/index.tsx
 create mode 100644 packages/web/src/app/routes/platform/setup/pieces/pieces-locked-banner.tsx
 delete mode 100644 packages/web/src/app/routes/platform/usage/index.tsx

diff --git a/brain/knowledge/decisions/000035-platform-admin-is-fifteen-pages-derived-from-one-registry.md b/brain/knowledge/decisions/000035-platform-admin-is-fifteen-pages-derived-from-one-registry.md
new file mode 100644
index 000000000000..1bc5ab820d32
--- /dev/null
+++ b/brain/knowledge/decisions/000035-platform-admin-is-fifteen-pages-derived-from-one-registry.md
@@ -0,0 +1,431 @@
+---
+status: accepted
+---
+
+# Platform admin is fifteen pages derived from one registry
+
+## Decision
+
+The platform admin nav collapses from **22 items in 5 labelled groups to 15 items in 3 unlabelled blocks**,
+and every page, route and gate derives from **one declarative registry** rather than the three unconnected
+places that held them. Six of the fifteen pages have sections: Users & access, Connections, Security,
+AI Center & MCP, Pieces, and Billing & usage.
+
+**A section parent is a page, not an alias for its first child.** Users & access, Connections, AI Center &
+MCP, Security, Billing & usage and Infrastructure each own an overview at their bare path: a card per child
+carrying that child's live count and plan tier, then the few sections that only make sense across the whole
+section (sign-in policy, connection health, AI credits, a security checklist, infrastructure status).
+Children therefore all address an explicit `?tab=`, where the first one used to sit on the bare path. The
+overview is what makes a parent worth clicking; without it the parent row was a lie, navigating somewhere
+its label did not name. This also retires the rule below that a page with its own tabs never becomes a tab:
+`Workers`, `Health`, `Triggers` and `Configurations` are now tabs of `Infrastructure`, which is what let the
+group labels come back over a nav short enough to read.
+
+**Three knobs decide whether a row appears, and they are not interchangeable.** `isLocked` keeps the row
+visible and crowned and the page reachable, because the point is to advertise what a plan would buy.
+`isHidden` removes the row and the route together, for something an edition does not have at all rather
+than has not bought: the AI `capabilities` tab is `isHidden` on Community, matching what
+`setup/ai/index.tsx` did before the registry. `hideInNav` keeps the route and drops only the nav entry, for
+a tab its parent row already stands for. Picking `isHidden` where `isLocked` belongs silently deletes a
+feature from the product tour; picking `isLocked` where `isHidden` belongs advertises something the
+edition can never enable.
+
+**`Pieces` takes the other way out: the parent row IS the first tab.** It has tabs and no overview, and
+rather than invent a landing page over two children, its `pieces` tab carries `hideInNav: true`. The tab
+stays routable and still owns the bare path, but the sidebar does not draw it as a sub-item, so the nav
+reads `Pieces` with one child `Piece Sets`, and clicking the parent opens the pieces table. This satisfies
+the rule above rather than breaking it: the parent row goes where its label says. Reach for it whenever a
+section's first tab is the obvious thing the parent name already promises, and reach for an overview when
+the parent name covers several children equally.
+
+**Those sections live in the sidebar, not in the page.** Each one is an indented sub-item under its parent,
+with a connector line. The counts in this decision's title and first paragraphs were the plan; the registry
+is the truth and has moved since, currently eleven nav parents and twenty children. An in-page tab row was built
+first and rejected: it left the sidebar reading as fifteen flat items with nothing under them, while the
+structure that mattered was hidden inside whichever page you had opened. Sub-items address the same
+`?tab=` the tabs used, so the first section stays on the bare path and every redirect kept working.
+
+**A page that already has its own tabs does not become a tab** was the rule that decided most of the
+shape, and it is now fully retired. It went first for Infrastructure, which absorbed `Workers`, `Health`,
+`Triggers` and `Configurations`, and then for `Pieces`, whose own two tabs became the registry tabs
+`Pieces` and `Piece Sets` while its `:id` child route stayed where it was. What survives of the rule is
+its opposite: an in-page tab row is a **candidate** for promotion, because the sidebar is where sections
+belong. `Templates` and `Embedding` stay separate for their own reasons, so the embed wizard keeps a page
+of its own. `MCP Server` folds into `AI Center & MCP` as a third tab, because its own two tabs are a light
+pill control that reads as a different level rather than a second tab row.
+
+**Promoting an in-page tab row costs no URL change**, which is what makes it cheap. Both conventions are
+the same one: first tab on the bare path, the rest on `?tab=<id>`. `Pieces` was already hand-rolling
+exactly that, deleting a `useSearchParams` handler and a `TabsList` per page promoted.
+
+**Ask the registry which tab is active; never recompute it in the sidebar.** `adminPagesUtils.activeTabId`
+resolves the `?tab=` param, or `null` when the page has an overview, or the first tab otherwise, and the
+nav highlights the parent whenever no visible sub-item owns that answer. That one rule replaced three
+hand-written special cases (`tabs.length === 0`, `hasOverview && tab === null`, `index === 0`), which had
+all silently assumed every routable tab was also a visible sub-item. `hideInNav` broke that assumption, and
+anything else that makes the routable set differ from the nav set will break it again.
+
+**Sample mode mounts the real page, so its plan-gated queries must be `enabled`-guarded.** `FeatureSample` renders the
+locked page ghosted underneath the upgrade card, which means every `useQuery` inside it fires for platforms that lack
+the feature; an endpoint behind `platformMustHaveFeatureEnabled` then answers 402 on every visit (seen 2026-09-14 on
+`/platform/security/embed`: `GET /v1/signing-keys` → 402 until `useSigningKeys` got `enabled: platform.plan.embeddingEnabled`).
+`LockedFeatureGuard` used to hide this by not mounting the page at all. A 31-page smoke run also surfaced three
+pre-existing console warnings the ghosted rows now expose on every plan: a bare `<TooltipTrigger>` around a `<Checkbox>`
+(nested buttons, on projects / templates / project roles), `<DialogTrigger asChild>` wrapping a `<>` fragment in
+`edit-global-connection-dialog.tsx` ("Invalid prop `type` supplied to React.Fragment"), and DataTable filters whose
+`accessorKey` names no column (`pieceName`/`projectIds`/`ownerIds` on connections, `name` on pieces). None are regressions.
+The populated states were verified separately against a 0.90.4 EE backend with seeded data (two pending platform
+invitations, six connections with one in `ERROR`): "Pending invitations" lists the emails, "Needs attention" lists the
+failing connection, "Most used pieces" ranks by count. One nit surfaced there: both connection overview sections label rows
+with the raw package name (`@activepieces/piece-apollo`) instead of the piece display name. Seeding notes: the invitation
+endpoint enforces the seat quota (402 `QUOTA_EXCEEDED`) so `platform_plan.usersLimit` has to be lifted first; a personal
+project refuses project invitations ("Project must be a team project"); connections cannot be inserted by hand because the
+list endpoint decrypts every `value` (`ERR_CRYPTO_INVALID_IV` → 500), and a dev backend with `AP_PIECES_SOURCE` on files
+returns `piece_metadata_not_found` for anything not in `AP_DEV_PIECES`, so seed through `POST /v1/app-connections` with
+`type: NO_AUTH` (skips engine validation) against a backend that knows the piece.
+
+**An overview is gated like any other page, an unknown tab redirects, and a failed query says so.** The overview
+branch of the route resolver wraps in the same `FeatureSample` as component pages, so a locked section (Billing on
+Community, declared with `sample: true` and a teaser in the registry) shows the upgrade card instead of empty values.
+A `?tab=` that is hidden or unknown redirects to the page's bare path rather than silently rendering the first tab,
+and overview cards derive their tab links from `visibleTabs`, never a hardcoded list. `OverviewCard` and
+`OverviewSection` take `isError`/`error` and `isLoading`: a failed fetch renders `DataFetchErrorState`, a pending one a
+skeleton, and only real data can claim "healthy" or "none". The connections overview counts project-scoped
+connections only, so global ones are not counted twice, while "Needs attention" still lists failing global ones.
+Greptile caught all four on the first review of #15526 (2026-09-14).
+
+**Groups never collapse.** Every page with sub-items draws them all the time; there is no chevron and no
+collapse state. A per-page `collapsed` boolean was tried first and left `/platform/users?tab=members` with
+nothing lit up whenever the group had been closed earlier; a per-navigation version fixed that but bought
+little for its state, so it was dropped for always-expanded on 2026-09-13.
+
+**`General` keeps its name and keeps branding inside it.** It holds the platform name, the five plan-gated
+branding assets, the auto-create-personal-projects default, and the Cloud owner's danger zone, as one form
+with one Save. A `Branding` page was split out first and has been folded back: the split was there so each
+of the two pages was wholly gated or not gated at all, but it cost a second nav item and a second form for
+five inputs, and the page it left behind was three fields.
+
+The gated half is marked in place instead, with a `FeatureBanner` above the branding inputs carrying the
+upgrade link while the platform name stays editable. That is the same treatment `Pieces` already uses for a
+partly gated page. `General` therefore wears no crown and is the one admin page where part of the body is
+gated and part is not.
+
+**A paid feature is gated at the action, not at the door.** The page opens, the data loads, the forms
+fill in, and the crown sits on the primary action: on `New Project`, again on `Create Project` inside the
+dialog, and only that final click is refused, with an upgrade dialog explaining the feature. An admin
+evaluating Activepieces can therefore see what a feature is before being asked to pay for it, which the
+earlier full-page teaser made impossible.
+
+**Which click refuses depends on whether the input can still change the answer.** `New Project` defers to
+the final `Create Project` on purpose: the dialog is worth opening because seeing the form is part of
+seeing the feature. `Invite` is the opposite case, because `isOutOfSeats` means zero seats remain, so
+every invitation the admin could type is already going to fail; it refuses on the click and never opens
+the form. Getting this wrong is a half-gate, marker on one control and check on another, which reads as a
+gate and behaves as wasted typing. Ask whether any input reaches a different outcome. If not, refuse where
+the crown is.
+
+**The crown replaces the action's own icon, it does not join it.** A plus and a crown side by side read as
+two separate affordances. `useFeatureGate` returns `crown` as an element when locked and `null` when not,
+so a plain button is `{gate.crown ?? <Plus className="size-4" />}` and only ever shows one icon. The
+exception is `AnimatedIconButton`, whose icon is a prop rather than a child because it animates on hover:
+a crown has no animation to drive, so the locked case renders a plain `Button` instead.
+
+`gate.crown` carries `text-primary-foreground/90`, which is white, so it only reads on the purple primary
+button it was written for and disappears on an `outline` one. `Customize Selector` is outline and renders
+its own `<Crown className="size-3.5 shrink-0 text-primary" />` instead, matching the sidebar crowns, while
+still taking `open` and `dialog` from the hook. Take the behaviour from the gate and the colour from the
+button until the helper learns to inherit `currentColor`.
+
+**A refused submit swaps its dialog's content, it does not trade one dialog for another.** Closing the form
+and opening a second dialog was tried and rejected: each Radix `Dialog` owns an overlay, so the first
+animates out while the second animates in, the backdrop undims between them and the screen visibly
+flashes. Stacking is worse still, leaving a dead form dimmed behind an upsell of a different width. So the
+gate hands over *content* and the host dialog renders it in place of its form, and the overlay element
+never unmounts. Two things to get right: reset the swap flag through the same handler that sets `open`,
+since a footer button calling `setOpen(false)` skips `onOpenChange` and the next open would show the upsell
+instead of the form; and check any two-dialog interaction in the browser, because that is where Radix
+orphans `pointer-events: none` on `<body>` and the page behind stops taking clicks.
+
+**A feature you cannot act on renders as the real page, and the gate moves to the write.**
+`Audit logs` is a table, so there is no action to crown, and opening it freely would show an empty table
+with nothing to explain why. So the page renders at full opacity with nothing over it: real header, real
+toolbar, real rows filled with the sample fixtures. Reads all work against those fixtures, meaning search,
+filters, sorting, pagination and opening a row for its payload. A write, meaning Save, New, Delete, Export
+or a config switch, opens an upgrade popover anchored to the control that was pressed. There is no overlay
+and no scrim anywhere in the flow.
+
+Three non-blocking marks say whose data this is: a `Sample data` pill beside the page title carrying the
+tier, the table header tinted `#f6f3fe` over the data region only, and a rail pinned to the bottom of the
+page holding the one-line pitch and the link out to what the plan adds. On a form page that rail merges
+with the form's own action row, so Discard and Save sit inside it.
+
+Designed in Paper, not yet built: the branch still ships the centred sign-in card described below.
+
+**The presentation was iterated seven times, and the rejected six are the useful record**, because each
+failed for a reason worth not rediscovering. The seventh, the centred **sign-in card** over a quarter
+opacity page, is the one this supersedes: it keeps the whole page visible where a fade shows only its top
+third, but it still puts a wall between the person and the thing they came to look at. **Blur** hides the
+very rows the treatment exists to show. A **strip** above the content said the right words but left the
+page reading as ordinary. A **framed container** read as locked but dominated the page it was previewing. **Chrome merged into the page's own
+header** was too quiet, and needed a React context plus edits to both shared headers and `DataTable` to
+deliver. A **full-bleed banner** announced the paywall before the page had shown anything. A **gradient
+fade** read as one surface but revealed only the top of a page and cut a form mid-field. A Mobbin survey
+found products split between crisp-and-labelled and fade-an-empty-shell, and none sampling a form, so
+there is no direct precedent to defer to here.
+
+**The sample content is live, not inert.** The earlier call here was the opposite: `pointer-events: none`
+on the region, filters and pagination disabled, one live CTA, on the grounds that wiring the controls to
+the fixtures means a second implementation of every filter for customers who have not paid. That is
+reversed. The fixtures already live in the browser, so client-side filtering and sorting of eight rows is
+the cheap half, and a disabled toolbar teaches nobody what the feature does. The cost accepted is that a
+locked write control looks completely ordinary until it is pressed: a person will occasionally press Save
+expecting it to save. A visibly disabled Save was the alternative and it cannot show what the plan buys.
+
+Sample data is **generated in the browser and never crosses the API**. A locked page skips its plan-gated
+query outright rather than letting it answer 402, and the endpoints keep refusing. Serving fabricated rows
+from a gated endpoint was rejected outright: an audit trail that returns fiction is a support and
+compliance hazard, and every API key and script would see it too.
+
+So the rule is: crown the action where there is one, and fill the surface with sample data where there is
+not.
+
+The nav still marks a page when **every** section on it is gated, and marks a gated **section** directly,
+so `Security` stays uncrowned while its API keys section works and its three paid sections each carry a
+crown.
+
+**The route resolves `?tab=`; every section keeps its own header.** The registry entry names the sections,
+the route element picks the active one and renders that component directly, so no page hand-rolls the
+searchParams dance again. But the header stays with the page: a unified `AdminPage` shell was built first
+and rejected, because it stretched the heading across the full page width instead of the content column,
+and it stacked the parent above the section as "AI Center & MCP · Capabilities", which is a breadcrumb the
+sidebar already draws. Each page renders the `DashboardPageHeader` or `CenteredPage` header it had before,
+and the sections that never had one got the same treatment as their neighbours. The parent name lives only
+in the sidebar. `AI Center & MCP` lost the vertical rail it used to ship with, since the sidebar now does
+that job for every page. Community sees the same structure as everyone else, but a gated tab there gets a
+short "available in Enterprise" note with a docs link rather than benefit bullets and a sales button.
+
+It lands as four PRs: the registry and shell with **no visible change** at all, then the cheap merges,
+then gating, then the collapse with its redirects and docs. `/platform` keeps redirecting to Projects: the
+section overviews cover the "where am I" job, so a whole-platform landing page is still deferred.
+
+## Context
+
+22 nav items, 18,588 LOC across 103 files, and 13 items wearing a lock icon that is decorative: the click
+navigates regardless and the destination page is the real gate. What that page does is inconsistent by
+accident, not design. Twelve pages replace their whole body with `LockedFeatureGuard`, Pieces stays usable
+under a banner, the branding fields just set `disabled` with no explanation and no upgrade path at all,
+and AI Center gates on platform role rather than a plan flag.
+
+The nav is a literal inside `PlatformSidebar`, the routes are a flat hand-written array, and each page's
+gate is hardcoded in its own file. Nothing ties the three together, which is why `Embedding` sits under
+Setup while routing to `/platform/security/`, and `Event Streaming` sits under Observability while routing
+to `/platform/infrastructure/`.
+
+The consolidation itself is not new here. AI Center already folded two nav items into one tabbed page with
+a validated `?tab=`, MCP Server was built tab-first, and `setup/general` composes two sections on one page.
+Four pages now hand-roll the same searchParams dance, three with an unsafe cast.
+
+## Why
+
+- **Fifteen, not the eleven the mockup drew.** The line counts and the existing tab rows decide it. `usage` is 47 lines and already sits beside billing on
+  the same gate and the same endpoint, `mcp` is 117, and sso plus api-keys plus project-roles are 401 and
+  already the same `Item` list shape. Against that, Pieces and AI Center are ~3,000 LOC each with their own
+  tabs, so folding them in buys a smaller nav by making two real pages harder to use.
+- **One registry over three sources.** Adding an admin page becomes one entry instead of three edits, the
+  group and URL can no longer disagree, and the nav crown becomes a derived value rather than a maintained
+  boolean. The cost accepted is one file that every admin change touches.
+- **A shell that owns tabs, not the headers.** Eight pages are about to need the tab dance that four pages
+  already copy and three get subtly wrong, so the routing layer absorbs it. Absorbing the headers too was
+  the overreach: the twenty-odd pages already agree on two header shapes, and centralising them traded a
+  layout every page had right for one the shell got wrong everywhere at once.
+- **Three treatments, chosen by what the surface offers.** Once pages carry tabs, a full-page takeover is
+  wrong by construction: it blanks a page whose other tabs work. So a page with a primary action gets a
+  crown on it, a page you only read gets its own UI blurred, and a page that is partly gated keeps working
+  under a `FeatureBanner`. One rule for all three would either hide working controls behind an upsell or
+  leave an empty greyed table reading as broken.
+- **Crown only when the whole page is gated.** A crown on `Users & access` when only SCIM is paid would be a
+  lie, because Members works. Bundling gated tabs beside free ones is what drops thirteen markers to three.
+  `Projects` and `Pieces` shipped breaking this and were corrected on 2026-09-14: both pages load and read
+  fine unpaid, and only one control on each is gated, so the page-level `isLocked` came off and the crown
+  moved onto `New Project` and `Customize Selector`. The test is whether a person who cannot pay still has
+  a reason to open the page. If yes, the sidebar stays clean and the control carries the mark.
+- **Four PRs, each reviewing one idea.** PR #14330 reverted the last big navigation rework, but that revert
+  touched **zero** platform-admin files: 106 files across global search, the builder canvas and the dashboard
+  sidebar. Its real lesson is that it bundled a navigation model change with unrelated surfaces, so nothing
+  could be reverted alone. Scoping this to platform admin and splitting by concern keeps each piece
+  revertable. Rendering the platform nav's item chrome locally rather than editing the shared
+  `ap-sidebar-item` keeps the shared-file count at zero, at the cost of having to re-implement everything
+  that component quietly did. The sidebar icons are the bill: each one in `components/icons/` is a
+  `forwardRef` exposing `startAnimation` / `stopAnimation`, and `ApSidebarItem` drives them from row hover
+  through a ref. `PlatformNavItem` rendered the same components with no ref, so the icons went inert and
+  nothing failed. `pointer-events-none` on the icon is why the self-animating fallback does not cover it
+  either: the icon's own `onMouseEnter` never fires, and the component only marks itself externally
+  controlled once a ref is attached. Restored 2026-09-15. Before copying a shared component's markup,
+  diff it for refs, effects and handlers, not just classes.
+- **A quieter Community.** This is the open-source product, and upsell density there is a brand question and
+  not only a conversion one. The structure stays honest, the pitch does not follow self-hosters around.
+- **No landing page yet.** It is purely additive, blocks nothing, needs five or six separate queries with no
+  aggregate endpoint, and is far easier to design once the twelve-page IA exists.
+
+## Consequences
+
+**A tier label has to name a plan somebody can buy.** The gating UI carries its own two-value vocabulary,
+`FeatureTier = 'team' | 'enterprise'`, entirely separate from `PlanName` in shared. It shipped as
+`'team' | 'ultimate'`, and there is no Ultimate plan: billing sells Free, Plus, Team and Enterprise. So a
+locked page told a Plus admin to "Upgrade to Ultimate", and the Explore plans dialog it opened offered no
+such thing. Renamed to `enterprise` on 2026-09-14. The tier is decorative, meaning nothing maps it to a
+plan id or preselects a plan at checkout, which is exactly why the drift went unnoticed; keep the two
+vocabularies spelled the same so the next drift is visible. `FeatureTier` and `TIER_LABELS` are still
+declared in four places (`lib/feature-tier.ts`, `feature-teaser.tsx`, `use-feature-gate.tsx`, and a fourth
+label map inline in `overview-shell.tsx`), so any future rename has to touch all four.
+
+**The registry trades drift bugs for derivation bugs, and the escape hatches are how you tell whether it
+is still worth it.** Three sources describing the same pages had already disagreed in production, which is
+why this exists, and that class is now impossible: the URL and the nav entry are one object. What replaced
+it is smaller but real, and the first week produced two of them. The registry claimed `?tab=` and silently
+broke the two pages that kept their own inner tabs there, and `isCrowned` miscomputed a page whose lock
+lived on the page rather than its tabs. A hand-maintained boolean can be stale; it cannot be computed
+wrong. Expect that shape of bug from anything derived here.
+
+The signal to watch is the **escape-hatch count**. `AdminPage` carries `isHidden`, `hideInNav`, `overview`
+versus `component` versus `tabs`: four places where the uniform model did not hold, one of which
+(`hideInNav`) was added days after the registry landed because Pieces wanted a routable tab that the nav
+should not draw. Each new one is the model being bent rather than used. If the list keeps growing, the
+answer is not a fifth: it is a thinner registry carrying path, title, nav and gate only, with routes
+composed normally, which keeps most of the benefit because the drift was always between *those* four
+things and never between the JSX blocks.
+
+**An overview's card row fits three, and the fourth wraps.** The cards sit in a
+`repeat(auto-fit, minmax(15rem, 1fr))` grid inside a column capped at 1024px, so three tracks plus gaps
+are all that fit and Security and Infrastructure render three cards plus an orphan. Narrowing the track
+until four fit truncates the longer titles (`Secret mana...`, `Event strea...`), which is worse than the
+wrap, so the wrap stands. Treat four as the point where a section has outgrown a single card row rather
+than something to squeeze. Use `auto-fit`, never `auto-fill`: `auto-fill` keeps the empty tracks alive, so
+a two-card overview renders both at a fifth of the width with dead space beside them.
+
+**A gated query with no `enabled:` puts an error state behind the blur.** The overlay works only because
+the query underneath already carries `enabled: platform.plan.<flag>`, the repo rule for any endpoint behind
+`platformMustHaveFeatureEnabled`. Without it the request fires, answers 402, and `DataFetchErrorState`
+renders "Trouble loading …" under the glass, which reads as broken rather than unpurchased. Check that
+guard before giving any surface an overlay.
+
+**PR 0 describes today's 22-item IA on purpose.** The registry and shell ship deriving the nav and routes
+that already exist, so the diff is reviewable as pure refactor with identical screenshots, and the
+derivation is proven against the IA everyone knows before the data changes under it.
+
+**The quiet Community treatment retires `RequestTrial` from platform admin**, which is currently the only
+in-product path from a self-hosted install to sales, feeding `activepieces.com/sales` from 26 feature keys.
+That is a growth decision as much as a design one and was taken with that understood.
+
+Old deep links must redirect. 22 items becoming 15 means eleven redirects on top of the five
+that exist, and `docs/docs.json` mirrors this IA across about twenty `admin-guide` pages, so a rename lands
+in the same PR as the route change.
+
+`SidebarProvider open={true}` means the admin sidebar never collapses, so the collapsed-state branches in
+the shared item component stay unreachable from here.
+
+PR #15028 tuned the admin nav's widths and spacing to line up with the primary rail by hand, and the rail
+imports none of the sidebar primitives. Any change to admin nav metrics needs re-checking against the rail,
+and nothing will fail if it drifts.
+
+**Folding Branding back into `General` reopens the per-field `brandingLocked` gotcha**, where five inputs
+grey out beside a sixth that works. The banner above them is what keeps it from being the silent version
+the brain records: it names the feature and carries the upgrade link, so the disabled inputs are explained
+rather than merely dead. Whether that is enough on Community, which now sees an uncrowned `General` with a
+banner inside it instead of a crowned `Branding` item, has not been reviewed yet. Revisit before the gating
+PR ships.
+
+Two dead things went with the split: the three file inputs were bound to `logoUrl` / `iconUrl` /
+`faviconUrl` form fields whose values nothing ever read, since the inputs are ref-driven and render
+`platform.fullLogoUrl` directly, and `sampleData.branding` was their only consumer so it never rendered
+either. Both are gone.
+
+**A tab promoted to a section inherits nothing from its old page wrapper.** The AI Center page supplied
+`max-w-6xl px-8 py-6` and the scroll container for its tabs, so `providers-tab` and `capabilities-tab`
+carried no padding of their own; once the route rendered them directly they sat flush against the edge.
+Each section now supplies its own padding, and the layout's `#dashboard-content-container` already
+scrolls, so none of them needs `overflow-auto`. Check the old wrapper before promoting the next tab.
+
+The same bite has a second shape: whatever the old wrapper rendered **above** the tab row now renders on
+no tab at all. The Pieces page held one `DashboardPageHeader` and one `FeatureBanner` for both tabs, so
+promoting them meant giving each tab its own header and extracting the banner into `PiecesLockedBanner`
+for both to call. A banner is the easy one to miss, because losing it leaves the locked tab silently empty
+rather than visibly broken.
+
+**The third shape is the dangerous one: `?tab=` is a single namespace, and a promoted page that keeps its
+own inner tab row in the URL collides with the registry.** `infra/health` reads
+`searchParams.get('tab')` for its `system | runs | queue` row and `infra/workers` for its
+`health | worker-groups` row. Once Infrastructure became a tabbed registry page the router started writing
+`?tab=health`, the page read that same param, matched none of its own panels, and rendered a tab row with
+nothing under it. Worse, clicking an inner tab writes `?tab=runs`, which is not an Infrastructure tab id,
+so the route's unknown-tab guard redirects to the bare path and ejects you to the overview. Triggers and
+Configurations survived only because they have no inner tabs.
+
+Grep the page for `searchParams.get('tab')` before promoting it. **The registry owns `?tab=`; a promoted
+page's own row moves to `?view=`**, exported as `VIEW_QUERY_PARAM` from `admin-pages.ts` so the contract
+sits beside the thing that claims the other half. Promoting the inner tabs instead was the alternative and
+was rejected: it puts six children under one parent, which is what the collapse existed to avoid. Fixed for
+Health and Workers on 2026-09-14; old inner-tab deep links like `?tab=runs` now land on the parent overview
+rather than a blank page.
+
+Both pages had reached for the param with `searchParams.get('tab') as TabValue`, and that cast is what let
+`'health'` through as a legal value of a `system | runs | queue` union. A `parseTabValue` guard that falls
+back to the default is what makes an unknown param render the first panel instead of nothing, which is the
+difference between a wrong link looking wrong and looking broken. The repo bans `as` casts for exactly this.
+
+**A parent crown is the AND of its tabs**, since `isCrowned` returns true only when every visible tab is
+locked. A page whose tabs share one plan flag therefore has to repeat that flag on each tab to keep the
+crown it had as a single item: `Pieces` carries `managePiecesEnabled` on both of its.
+
+**Do not give a section a page header when it already opens with a `SectionHeader`.** Providers and
+Capabilities each led with one, so adding a header above it printed the title twice.
+
+**Sampling every locked page costs two working controls on Single sign on.** `ssoEnabled` gates only
+SAML: `platform.service.ts` checks the plan solely when the payload carries `federatedAuthProviders.saml`,
+and `googleAuthEnabled` is enforced with no plan check at all, so the Google and Allowed Email Login
+toggles genuinely work on a plan without SSO. Sampling the section wholesale, rather than only its SAML
+row, therefore takes two live controls away from EE and Cloud admins who have them today. Taken knowingly,
+for one consistent treatment across all nine locked pages. Community is unaffected, because its
+sign-in enforcement returns early on that edition anyway.
+
+**Sample data does not mean inventing fixtures for audit events.** `buildMockEvent` in
+`@activepieces/shared` already builds realistic `ApplicationEvent` values across forty event names, and the
+web app already calls it for the test-destination flow. Reuse it there; only the other locked surfaces need
+fixtures written by hand.
+
+**Community keeps its quiet copy inside the loud treatment.** It sees the same sample content, but the
+strip names the feature as Enterprise with a docs link in place of the upgrade button, so the open-source
+product still avoids a sales button on a dozen pages.
+
+**Nothing renders the full-page teaser once all nine are sampled.** `LockedFeatureGuard` and the page-level
+`FeatureTeaser` lose their last callers in platform admin, and `overlay: true` in the registry is replaced
+by the sample opt-in. `FeatureTeaserContent` survives inside the upgrade dialog.
+
+**One form, not two.** `appearance-section.tsx` is a single react-hook-form whose submit handler
+deliberately skips the branding fields when locked, and both halves post to the same
+`platformApi.updateWithFormData`. Splitting it was tried and undone; keeping it whole is what gives the page
+one Save.
+
+`Configurations`, added to the nav on 2026-09-07 after the proposal was drawn, becomes Infrastructure's
+fourth tab and carries its Cloud exclusion into its registry entry. It already routed under
+`/platform/infrastructure/`, so nothing moves. The credits meter the admin sidebar lacks is deferred with
+the overview page: additive, and `SidebarUsageLimits` already exists and already returns nothing on
+Community.
+
+The four PRs are scoped in `packages/web`, but the largest single chunk is not there. PR 3 carries roughly
+fourteen route redirects plus the `admin-guide` restructure in `docs/docs.json`, about twenty pages that
+PR #15153 had just expanded.
+
+## Tracking
+
+Grilled 2026-09-07 against the `maybe-chat.activepieces.ai/docs/admin-nav` concept and Langdock's settings
+IA as references.
+
+The sample-data treatment was checked against Mobbin afterwards, and the survey supports dropping the
+blur: every product found picks one side or the other, never both. Later and Churnkey show crisp,
+realistic figures under a labelled band ("just a glimpse", "ANALYTICS PREVIEW"), while Juicebox, Asana
+Admin and Hex fade an essentially empty shell behind a card and teach the reader nothing about the
+feature. Churnkey's one-word "preview" also reads better than a sentence explaining that the data is not
+real. No product in the survey samples a *form*, so our Single sign on, General and Embedding treatment
+has no precedent to lean on, which is worth remembering given it is the same part that costs two working
+controls.
diff --git a/brain/knowledge/engineering/index.md b/brain/knowledge/engineering/index.md
index eeb77e2d8a16..82eac033dbfe 100644
--- a/brain/knowledge/engineering/index.md
+++ b/brain/knowledge/engineering/index.md
@@ -31,6 +31,7 @@ The **Activepieces engineering brain**: how the system works, and *why* it was b
 - **API & Endpoints** — route conventions and the security contract
 - **Server Module Anatomy** — the six files of a server module (entity → migration → repo → service → controller → module), and the manual registration steps nothing auto-discovers
 - **Web Feature Anatomy** — the frontend feature folder, its barrel, route guards, and how a failed primary query reports itself in place
+- **Web Navigation Shell** — the rail, the three sidebars and the layouts that choose between them, which primitives are shared, and why platform admin renders without the rail
 - **Cloud Deployment Paths** — canary → prod, the `cloud-hotfix` override, and the breaking-migration gate that blocks both
 - **Helm Chart** — the Kubernetes install we ship to self-hosters, its two competing paths for an `AP_*` variable, and the secrets it never creates
 - **CI PR Review Hygiene** — draft-first Greptile review, the per-area PR size gate, and the workflow conventions reviewers keep re-litigating
diff --git a/brain/knowledge/engineering/web-navigation-shell.md b/brain/knowledge/engineering/web-navigation-shell.md
new file mode 100644
index 000000000000..b1c7f47c70c1
--- /dev/null
+++ b/brain/knowledge/engineering/web-navigation-shell.md
@@ -0,0 +1,77 @@
+---
+icon: 🧱
+---
+
+# Web Navigation Shell
+
+The frame the web app renders every route inside. Four components, and knowing which is shared matters
+more than knowing what each looks like.
+
+**Primary rail** (`components/primary-rail`) is the chat-first left rail that replaced the project
+sidebar in PR #15005. Chat, Agents, Explore, Impact, plus the projects list and the credits meter.
+
+**Dashboard sidebar** (`components/sidebar/dashboard`) is the older per-project nav the rail replaced
+on most surfaces.
+
+**Platform sidebar** (`components/sidebar/platform`) is the platform-admin nav, and it is the only one
+of the three that understands paid gating. Its groups and items are a literal built inline on every
+render, not a config.
+
+**Layouts** (`components/platform-layout.tsx`, `components/project-layout`) pick which of the above a
+route gets. `PlatformLayout` is 44 lines and mounts the platform sidebar with no rail beside it.
+
+`ap-sidebar-item` and `ap-sidebar-group` are the shared primitives, used by the dashboard and platform
+sidebars only. The rail imports neither.
+
+## Gotchas
+
+- **`workspace-shell/` does not exist, and anything still referring to it is stale.** PR #14330 reverted
+  the four merges that introduced it (#14298, #14303, #14304, #14306) five days after they landed,
+  deleting the folder along with `stage-context.tsx`, `stage-breadcrumb.tsx` and `chat-dock-context.tsx`,
+  and restoring `sidebar/dashboard`. That revert was 106 files and touched **zero** platform-admin files,
+  so it is not a precedent for admin-nav work; what it does show is why it was unrevertable in pieces,
+  since it bundled a navigation model change together with global search and the builder canvas. Keep a
+  navigation change scoped to one surface and it stays revertable on its own.
+- **The rail and the platform admin nav are aligned by hand, not by shared code.** `primary-rail` imports
+  none of the sidebar primitives, so the two columns only look like one system because PR #15028 tuned
+  their widths and spacing to match. Any change to admin nav metrics needs re-checking against the rail,
+  and no type error or test will tell you it drifted.
+- **Platform admin deliberately renders without the rail.** `PlatformLayout` mounts the platform sidebar
+  straight under `SidebarProvider`, because the rail beside it meant two left columns and a narrower admin
+  nav, and the admin nav already carries its own way back out. This is a documented departure from the
+  `design/workspace-redesign` direction, which did show the rail there. Entry in is the rail's platform
+  admin button; the way out is the "Back to app" link in the platform sidebar header, which resolves
+  through `determineDefaultRoute`.
+- **A role check inside a platform admin page is dead code.** `PlatformLayout` calls `useIsPlatformAdmin()`
+  and redirects away when it fails, so every component below it already knows the viewer is a platform
+  admin. AI Center nonetheless wrapped itself in a guard keyed on `platformRole !== PlatformRole.ADMIN`,
+  which can never be true where it sits, and that guard was the only thing standing in for a plan gate on
+  that page: reading it, the page looks gated when nothing gates it. Same shape as the `isCommunity` checks
+  under `BillingPageShell`. Before adding a guard to an admin page, check whether the layout above already
+  decided it.
+
+- **`locked` is a platform-only concept living in a shared primitive.** `ap-sidebar-item` renders the lock
+  icon, but the dashboard sidebar passes `locked` zero times and the platform sidebar passes it fifteen.
+  So a change to lock or badge rendering edits a file two callers share to alter a path one caller uses.
+  Worth rendering platform-specific item chrome in the platform sidebar instead, rather than growing the
+  shared primitive for one consumer.
+- **`/platform` redirects without `replace`, so Back lands you right back on it.** Every other admin
+  redirect (`/platform/setup`, `/platform/security`, `/platform/infrastructure`, `/platform/setup/branding`,
+  `/platform/setup/ai-capabilities`) passes `replace` to `<Navigate>`, but the one on `/platform` does not,
+  so it pushes a history entry and the browser Back button re-enters the redirect instead of leaving the
+  admin. Anyone who opens platform admin from a link to `/platform` rather than a specific page is stuck
+  going forward. Preserved deliberately while the routes were being derived from a registry, so fixing it
+  is a one-word change wherever that redirect is declared.
+
+- **Four platform admin pages already carry their own tabs, so they cannot become tabs of something else without nesting two deep.** `setup/pieces` (Pieces, Piece sets, plus a `piece-sets/:id` child route), `infra/workers` (Health, Worker groups), `infra/health` (System, Runs, Queue) and `setup/mcp` (Connection, Tools). Any plan that groups admin pages under a parent has to answer this for each of them, and the answer decides the item count more than the grouping does: leaving all four as their own nav items lands around seventeen, folding them in lands around thirteen but puts a second tab row inside a tab. Count `TabsTrigger` occurrences per page before promising a number, because the mockups that drive this work are drawn from the nav and cannot see the second level.
+
+- **The active item is a bare prefix match with no query-string awareness.** `pathname.startsWith(item.to)`,
+  plus an optional `isActive` override that the platform sidebar never passes. Any nav that needs to
+  distinguish tabs of one page has to pass that override, because `?tab=` is invisible to the default.
+
+## Key files
+
+- `packages/web/src/app/components/primary-rail`: the chat-first rail
+- `packages/web/src/app/components/sidebar`: `ap-sidebar-item` / `ap-sidebar-group` primitives, plus the `dashboard`, `platform` and `project` navs
+- `packages/web/src/app/components/platform-layout.tsx`: `PlatformLayout`, the admin frame and its admin-role check
+- `packages/web/src/lib/route-utils.ts`: `determineDefaultRoute`, where "Back to app" goes
diff --git a/packages/web/src/app/components/billing-page-shell.tsx b/packages/web/src/app/components/billing-page-shell.tsx
index f9778a289e07..674cc9d9f119 100644
--- a/packages/web/src/app/components/billing-page-shell.tsx
+++ b/packages/web/src/app/components/billing-page-shell.tsx
@@ -27,13 +27,13 @@ export function BillingPageShell({
   return (
     <LockedFeatureGuard
       featureKey="BILLING"
+      showContactSales={false}
       locked={edition === ApEdition.COMMUNITY}
       lockTitle={lockTitle}
       lockDescription={t(
         'Switch to the Enterprise edition to access billing and usage management.',
       )}
       lockDocumentationUrl={LOCK_DOCUMENTATION_URL}
-      showContactSales={false}
     >
       <BillingPageContent errorMessage={errorMessage}>
         {children}
diff --git a/packages/web/src/app/components/centered-page.tsx b/packages/web/src/app/components/centered-page.tsx
index 9f4feb557f4d..7df71a9609ad 100644
--- a/packages/web/src/app/components/centered-page.tsx
+++ b/packages/web/src/app/components/centered-page.tsx
@@ -12,27 +12,30 @@ export const CenteredPage = ({
   children,
   widthClassName = 'max-w-[40rem]',
 }: {
-  title: string;
+  title?: string;
   description?: React.ReactNode;
   actions?: React.ReactNode;
   footer?: React.ReactNode;
   children: React.ReactNode;
   widthClassName?: string;
 }) => {
-  const header = (
-    <>
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex flex-col gap-1">
-          <h1 className="text-xl font-medium">{title}</h1>
-          {description && (
-            <div className="text-sm text-muted-foreground">{description}</div>
-          )}
+  const header =
+    title === undefined && !description && !actions ? null : (
+      <>
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            {title !== undefined && (
+              <h1 className="text-xl font-medium">{title}</h1>
+            )}
+            {description && (
+              <div className="text-sm text-muted-foreground">{description}</div>
+            )}
+          </div>
+          {actions && <div className="shrink-0">{actions}</div>}
         </div>
-        {actions && <div className="shrink-0">{actions}</div>}
-      </div>
-      <Separator className="my-4" />
-    </>
-  );
+        <Separator className="my-4" />
+      </>
+    );
 
   if (!footer) {
     return (
diff --git a/packages/web/src/app/components/feature-banner.tsx b/packages/web/src/app/components/feature-banner.tsx
new file mode 100644
index 000000000000..1d378fd980c7
--- /dev/null
+++ b/packages/web/src/app/components/feature-banner.tsx
@@ -0,0 +1,54 @@
+import { ApEdition, ApFlagId } from '@activepieces/shared';
+import { t } from 'i18next';
+import { ExternalLink } from 'lucide-react';
+
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { useManagePlanDialogStore } from '@/features/billing';
+import { flagsHooks } from '@/hooks/flags-hooks';
+
+export function FeatureBanner({
+  message,
+  documentationUrl,
+  className,
+}: FeatureBannerProps) {
+  const { openDialog: openManagePlanDialog } = useManagePlanDialogStore();
+  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
+  const isCommunity = edition === ApEdition.COMMUNITY;
+  const docsUrl = documentationUrl ?? ENTERPRISE_DOCUMENTATION_URL;
+
+  return (
+    <Alert variant="primary" className={className}>
+      <AlertDescription className="flex flex-wrap items-center gap-x-2 gap-y-1">
+        <span>{message}</span>
+        {isCommunity ? (
+          <a
+            href={docsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
+          >
+            {t('Read the docs')}
+            <ExternalLink className="size-3.5" />
+          </a>
+        ) : (
+          <button
+            type="button"
+            onClick={() => openManagePlanDialog()}
+            className="font-medium text-primary hover:underline"
+          >
+            {t('Upgrade plan')}
+          </button>
+        )}
+      </AlertDescription>
+    </Alert>
+  );
+}
+
+const ENTERPRISE_DOCUMENTATION_URL =
+  'https://www.activepieces.com/docs/install/configuration/overview#enterprise-edition-optional';
+
+export type FeatureBannerProps = {
+  message: string;
+  documentationUrl?: string;
+  className?: string;
+};
diff --git a/packages/web/src/app/components/sidebar/platform/index.tsx b/packages/web/src/app/components/sidebar/platform/index.tsx
index 29662ae666d3..4d96b291867b 100644
--- a/packages/web/src/app/components/sidebar/platform/index.tsx
+++ b/packages/web/src/app/components/sidebar/platform/index.tsx
@@ -1,31 +1,13 @@
 import { ApEdition, ApFlagId } from '@activepieces/shared';
 import { t } from 'i18next';
-import { ComponentType, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { Fragment, useRef } from 'react';
+import { Link, useLocation, useSearchParams } from 'react-router-dom';
 
-import { McpSvg } from '@/assets/img/custom/mcp';
-import { ChartLineIcon } from '@/components/icons/chart-line';
+import { adminPagesUtils } from '@/app/routes/platform/admin-pages';
 import {
   ChevronLeftIcon,
   ChevronLeftIconHandle,
 } from '@/components/icons/chevron-left';
-import { FileHeartIcon } from '@/components/icons/file-heart';
-import { FileJson2Icon } from '@/components/icons/file-json2';
-import { FrameIcon } from '@/components/icons/frame';
-import { KeyRoundIcon } from '@/components/icons/key-round';
-import { LayoutGridIcon } from '@/components/icons/layout-grid';
-import { LogInIcon } from '@/components/icons/log-in';
-import { MousePointerClickIcon } from '@/components/icons/mouse-pointer-click';
-import { PuzzleIcon } from '@/components/icons/puzzle';
-import { ReceiptIcon } from '@/components/icons/receipt';
-import { ServerIcon } from '@/components/icons/server';
-import { SettingsIcon } from '@/components/icons/settings';
-import { Settings2Icon } from '@/components/icons/settings2';
-import { SparklesIcon } from '@/components/icons/sparkles';
-import { SquareDashedBottomCodeIcon } from '@/components/icons/square-dashed-bottom-code';
-import { UnplugIcon } from '@/components/icons/unplug';
-import { UsersIcon } from '@/components/icons/users';
-import { WebhookIcon } from '@/components/icons/webhook';
 import { buttonVariants } from '@/components/ui/button';
 import {
   Sidebar,
@@ -35,8 +17,6 @@ import {
   SidebarHeader,
   SidebarGroup,
   SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarSeparator,
 } from '@/components/ui/sidebar-shadcn';
 import { useAuthorization } from '@/hooks/authorization-hooks';
 import { flagsHooks } from '@/hooks/flags-hooks';
@@ -44,9 +24,10 @@ import { platformHooks } from '@/hooks/platform-hooks';
 import { determineDefaultRoute } from '@/lib/route-utils';
 import { cn } from '@/lib/utils';
 
-import { ApSidebarItem } from '../ap-sidebar-item';
 import { SidebarUser } from '../sidebar-user';
 
+import { PlatformNavItem, PlatformNavSubItem } from './platform-nav-item';
+
 export function PlatformSidebar() {
   const { platform } = platformHooks.useCurrentPlatform();
   const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
@@ -57,170 +38,12 @@ export function PlatformSidebar() {
   });
   const chevronRef = useRef<ChevronLeftIconHandle>(null);
 
-  const setupItems = [
-    {
-      to: '/platform/setup/general',
-      label: t('General'),
-      icon: SettingsIcon,
-    },
-    {
-      to: '/platform/setup/ai',
-      label: t('AI Center'),
-      icon: SparklesIcon,
-    },
-    {
-      to: '/platform/setup/mcp',
-      label: t('MCP Server'),
-      icon: McpSvg,
-    },
-    {
-      to: '/platform/setup/connections',
-      label: t('Global Connections'),
-      icon: UnplugIcon,
-      locked: !platform.plan.globalConnectionsEnabled,
-    },
-    {
-      to: '/platform/setup/pieces',
-      label: t('Pieces'),
-      icon: PuzzleIcon,
-      locked: !platform.plan.managePiecesEnabled,
-    },
-    {
-      to: '/platform/setup/templates',
-      label: t('Templates'),
-      icon: LayoutGridIcon,
-      locked: !platform.plan.manageTemplatesEnabled,
-    },
-    {
-      to: '/platform/setup/billing',
-      label: t('Billing & subscription'),
-      icon: ReceiptIcon,
-      locked: edition === ApEdition.COMMUNITY,
-    },
-    {
-      to: '/platform/setup/usage',
-      label: t('Usage'),
-      icon: ChartLineIcon,
-      locked: edition === ApEdition.COMMUNITY,
-    },
-    {
-      to: '/platform/security/embed',
-      label: t('Embedding'),
-      icon: FrameIcon,
-      locked: !platform.plan.embeddingEnabled,
-    },
-  ];
-
-  const groups: {
-    label: string;
-    items: {
-      to: string;
-      label: string;
-      icon?: ComponentType<{ className?: string }>;
-      locked?: boolean;
-    }[];
-  }[] = [
-    {
-      label: t('General'),
-      items: [
-        {
-          to: '/platform/projects',
-          label: t('Projects'),
-          icon: LayoutGridIcon,
-          locked: platform.plan.billedTeamProjectsLimit === 0,
-        },
-        {
-          to: '/platform/users',
-          label: t('Users'),
-          icon: UsersIcon,
-        },
-        {
-          to: '/platform/connections',
-          label: t('Connections'),
-          icon: UnplugIcon,
-        },
-      ],
-    },
-    {
-      label: t('Setup'),
-      items: setupItems,
-    },
-    {
-      label: t('Security'),
-      items: [
-        {
-          to: '/platform/security/sso',
-          label: t('Single Sign On'),
-          icon: LogInIcon,
-          locked: !platform.plan.ssoEnabled,
-        },
-        {
-          to: '/platform/security/project-roles',
-          label: t('Project Roles'),
-          icon: Settings2Icon,
-          locked: !platform.plan.projectRolesEnabled,
-        },
-        {
-          to: '/platform/security/api-keys',
-          label: t('API Keys'),
-          icon: FileJson2Icon,
-          locked: !platform.plan.apiKeysEnabled,
-        },
-        {
-          to: '/platform/security/secret-managers',
-          label: t('Secret Managers'),
-          icon: KeyRoundIcon,
-          locked: !platform.plan.secretManagersEnabled,
-        },
-      ],
-    },
-    {
-      label: t('Observability'),
-      items: [
-        {
-          to: '/platform/security/audit-logs',
-          label: t('Audit Logs'),
-          icon: SquareDashedBottomCodeIcon,
-          locked: !platform.plan.auditLogEnabled,
-        },
-        {
-          to: '/platform/infrastructure/event-destinations',
-          label: t('Event Streaming'),
-          icon: WebhookIcon,
-          locked: !platform.plan.eventStreamingEnabled,
-        },
-      ],
-    },
-    {
-      label: t('Infrastructure'),
-      items: [
-        {
-          to: '/platform/infrastructure/workers',
-          label: t('Workers'),
-          icon: ServerIcon,
-        },
-        {
-          to: '/platform/infrastructure/health',
-          label: t('Health'),
-          icon: FileHeartIcon,
-        },
-        {
-          to: '/platform/infrastructure/triggers',
-          label: t('Triggers'),
-          icon: MousePointerClickIcon,
-        },
-        ...(edition === ApEdition.CLOUD
-          ? []
-          : [
-              {
-                to: '/platform/infrastructure/configurations',
-                label: t('Configurations'),
-                icon: Settings2Icon,
-              },
-            ]),
-      ],
-    },
-  ];
+  const location = useLocation();
+  const context = { plan: platform.plan, edition };
+  const pages = adminPagesUtils.visibleNavPages(context);
+  const activeId = adminPagesUtils.activePageId(location.pathname);
+  const [searchParams] = useSearchParams();
+  const requestedTabId = searchParams.get('tab');
 
   return (
     <Sidebar className="border-r-0!">
@@ -240,26 +63,44 @@ export function PlatformSidebar() {
       </SidebarHeader>
       <div className="flex-1 overflow-y-auto">
         <SidebarContent className="gap-0">
-          {groups.map((group, idx) => (
-            <SidebarGroup key={group.label} className="cursor-default shrink-0">
-              {idx > 0 && <SidebarSeparator className="mb-3" />}
-              <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
-              <SidebarGroupContent>
-                <SidebarMenu>
-                  {group.items.map((item) => (
-                    <ApSidebarItem
-                      type="link"
-                      key={item.label}
-                      to={item.to}
-                      label={item.label}
-                      icon={item.icon}
-                      locked={item.locked}
-                    />
-                  ))}
-                </SidebarMenu>
-              </SidebarGroupContent>
-            </SidebarGroup>
-          ))}
+          <SidebarGroup className="cursor-default shrink-0">
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {pages.map((page) => {
+                  const tabs = adminPagesUtils.navTabs({ page, context });
+                  const isActivePage = page.id === activeId;
+                  const activeTabId = adminPagesUtils.activeTabId({
+                    page,
+                    context,
+                    requested: requestedTabId,
+                  });
+                  return (
+                    <Fragment key={page.id}>
+                      <PlatformNavItem
+                        to={page.path}
+                        label={t(page.nav.label)}
+                        icon={page.nav.icon}
+                        active={
+                          isActivePage &&
+                          !tabs.some((tab) => tab.id === activeTabId)
+                        }
+                        crowned={adminPagesUtils.isCrowned({ page, context })}
+                      />
+                      {tabs.map((tab) => (
+                        <PlatformNavSubItem
+                          key={tab.id}
+                          to={`${page.path}?tab=${tab.id}`}
+                          label={t(tab.label)}
+                          active={isActivePage && activeTabId === tab.id}
+                          crowned={tab.isLocked?.(context) === true}
+                        />
+                      ))}
+                    </Fragment>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
         </SidebarContent>
       </div>
 
diff --git a/packages/web/src/app/components/sidebar/platform/platform-nav-item.tsx b/packages/web/src/app/components/sidebar/platform/platform-nav-item.tsx
new file mode 100644
index 000000000000..3956605081fd
--- /dev/null
+++ b/packages/web/src/app/components/sidebar/platform/platform-nav-item.tsx
@@ -0,0 +1,113 @@
+import { Crown } from 'lucide-react';
+import React, { ComponentType, useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar-shadcn';
+import { cn } from '@/lib/utils';
+
+export function PlatformNavItem({
+  to,
+  label,
+  icon,
+  active,
+  crowned,
+}: PlatformNavItemProps) {
+  const navigate = useNavigate();
+  const iconRef = useRef<AnimatedIconHandle | null>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (isHovered) {
+      iconRef.current?.startAnimation();
+    } else {
+      iconRef.current?.stopAnimation();
+    }
+  }, [isHovered]);
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        className={cn('pr-1', {
+          'bg-sidebar-accent hover:bg-sidebar-accent!': active,
+        })}
+        onClick={() => navigate(to)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {icon !== undefined &&
+          React.createElement(icon, {
+            className: 'size-4 pointer-events-none',
+            ref: iconRef,
+          })}
+        <span
+          className={cn('flex-1 truncate text-sm', {
+            'font-semibold': active,
+          })}
+        >
+          {label}
+        </span>
+        {crowned && <Crown className="size-3.5! shrink-0 text-primary" />}
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}
+
+export function PlatformNavSubItem({
+  to,
+  label,
+  active,
+  crowned,
+}: PlatformNavSubItemProps) {
+  const navigate = useNavigate();
+
+  return (
+    <SidebarMenuItem>
+      <div className="flex items-stretch">
+        <div className="ml-4 mr-1 w-px shrink-0 bg-sidebar-border" />
+        <SidebarMenuButton
+          className={cn('h-7 flex-1', {
+            'bg-sidebar-accent hover:bg-sidebar-accent!': active,
+          })}
+          onClick={() => navigate(to)}
+        >
+          <span
+            className={cn('text-sm text-muted-foreground', {
+              'font-medium text-foreground': active,
+            })}
+          >
+            {label}
+          </span>
+          {crowned && <Crown className="size-3! ml-auto text-primary" />}
+        </SidebarMenuButton>
+      </div>
+    </SidebarMenuItem>
+  );
+}
+
+export type AnimatedIconHandle = {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+};
+
+export type AnimatedIconComponent = ComponentType<{
+  className?: string;
+  ref?: React.Ref<AnimatedIconHandle>;
+}>;
+
+export type PlatformNavItemProps = {
+  to: string;
+  label: string;
+  icon?: AnimatedIconComponent;
+  active: boolean;
+  crowned: boolean;
+};
+
+export type PlatformNavSubItemProps = {
+  to: string;
+  label: string;
+  active: boolean;
+  crowned: boolean;
+};
diff --git a/packages/web/src/app/routes/mcp-server/page-band.tsx b/packages/web/src/app/routes/mcp-server/page-band.tsx
index 2cc71e41b6a2..948042a1e8fa 100644
--- a/packages/web/src/app/routes/mcp-server/page-band.tsx
+++ b/packages/web/src/app/routes/mcp-server/page-band.tsx
@@ -11,7 +11,7 @@ export function PageBand({
 }) {
   return (
     <div
-      className={cn('mx-auto w-full max-w-[1198px] px-6 lg:px-12', className)}
+      className={cn('mx-auto w-full max-w-page-band px-6 lg:px-12', className)}
     >
       {children}
     </div>
diff --git a/packages/web/src/app/routes/platform-routes.tsx b/packages/web/src/app/routes/platform-routes.tsx
index 8be572f6fd11..0cc07183c056 100644
--- a/packages/web/src/app/routes/platform-routes.tsx
+++ b/packages/web/src/app/routes/platform-routes.tsx
@@ -1,431 +1,90 @@
+import { ApEdition, ApFlagId } from '@activepieces/shared';
 import React, { Suspense } from 'react';
-import { Navigate } from 'react-router-dom';
+import { Navigate, useSearchParams } from 'react-router-dom';
 
 import { PageTitle } from '@/app/components/page-title';
 import { RouteLoadingBar } from '@/components/custom/route-loading-bar';
-import { Error, Success } from '@/features/billing';
+import { flagsHooks } from '@/hooks/flags-hooks';
+import { platformHooks } from '@/hooks/platform-hooks';
 
 import { PlatformLayout } from '../components/platform-layout';
 
-const SettingsBilling = React.lazy(() => import('./platform/billing'));
-const SettingsUsage = React.lazy(() => import('./platform/usage'));
-const EventDestinationsPage = React.lazy(
-  () => import('./platform/infra/event-destinations'),
-);
-const SettingsHealthPage = React.lazy(() => import('./platform/infra/health'));
-const PlatformConfigurationsPage = React.lazy(() =>
-  import('./platform/infra/configurations').then((m) => ({
-    default: m.ConfigurationsPage,
-  })),
-);
-const TriggerHealthPage = React.lazy(() => import('./platform/infra/triggers'));
-const SettingsWorkersPage = React.lazy(
-  () => import('./platform/infra/workers'),
-);
-const ProjectsPage = React.lazy(() => import('./platform/projects'));
-const ApiKeysPage = React.lazy(() =>
-  import('./platform/security/api-keys').then((m) => ({
-    default: m.ApiKeysPage,
-  })),
-);
-const AuditLogsPage = React.lazy(
-  () => import('./platform/security/audit-logs'),
-);
-const ProjectRolePage = React.lazy(() =>
-  import('./platform/security/project-role').then((m) => ({
-    default: m.ProjectRolePage,
-  })),
-);
-const SecretManagersPage = React.lazy(
-  () => import('./platform/security/secret-managers'),
-);
-const EmbedPage = React.lazy(() =>
-  import('./platform/security/embed').then((m) => ({
-    default: m.EmbedPage,
-  })),
-);
-const SSOPage = React.lazy(() =>
-  import('./platform/security/sso').then((m) => ({ default: m.SSOPage })),
-);
-const AIProvidersPage = React.lazy(() => import('./platform/setup/ai'));
-const PlatformMcpPage = React.lazy(() => import('./platform/setup/mcp'));
-const GeneralPage = React.lazy(() =>
-  import('./platform/setup/general').then((m) => ({
-    default: m.GeneralPage,
-  })),
-);
-const GlobalConnectionsTable = React.lazy(() =>
-  import('./platform/setup/connections').then((m) => ({
-    default: m.GlobalConnectionsTable,
-  })),
-);
-const PlatformPiecesPage = React.lazy(() =>
-  import('./platform/setup/pieces').then((m) => ({
-    default: m.PlatformPiecesPage,
-  })),
-);
-const PieceSetDetailsPage = React.lazy(() =>
-  import('./platform/setup/pieces/piece-sets/piece-set-details-page').then(
-    (m) => ({ default: m.PieceSetDetailsPage }),
-  ),
-);
-const PlatformTemplatesPage = React.lazy(() =>
-  import('./platform/setup/templates').then((m) => ({
-    default: m.PlatformTemplatesPage,
-  })),
-);
-const UsersPage = React.lazy(() => import('./platform/users'));
-const PlatformConnectionsPage = React.lazy(
-  () => import('./platform/connections'),
-);
+import {
+  ADMIN_PAGES,
+  ADMIN_REDIRECTS,
+  AdminPage as AdminPageSpec,
+  adminPagesUtils,
+} from './platform/admin-pages';
 
 function SuspenseWrapper({ children }: { children: React.ReactNode }) {
   return <Suspense fallback={<RouteLoadingBar />}>{children}</Suspense>;
 }
 
+function AdminRoute({ page }: { page: AdminPageSpec }) {
+  const { platform } = platformHooks.useCurrentPlatform();
+  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
+  const [searchParams] = useSearchParams();
+  const context = { plan: platform.plan, edition };
+
+  const Page = page.component;
+  if (Page !== undefined) {
+    return (
+      <SuspenseWrapper>
+        <Page />
+      </SuspenseWrapper>
+    );
+  }
+
+  const tabs = adminPagesUtils.visibleTabs({ page, context });
+  const requested = searchParams.get('tab');
+  const Overview = page.overview;
+  if (Overview !== undefined && requested === null) {
+    return (
+      <SuspenseWrapper>
+        <Overview />
+      </SuspenseWrapper>
+    );
+  }
+
+  const requestedTab = tabs.find((tab) => tab.id === requested);
+  if (requested !== null && requestedTab === undefined) {
+    return <Navigate to={page.path} replace />;
+  }
+  const activeTab = requestedTab ?? tabs[0];
+  if (activeTab === undefined) {
+    return null;
+  }
+
+  const TabContent = activeTab.component;
+  return (
+    <SuspenseWrapper>
+      <TabContent />
+    </SuspenseWrapper>
+  );
+}
+
 export const platformRoutes = [
-  {
-    path: '/platform',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Platform">
-          <Navigate to="/platform/projects" />
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/projects',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Projects">
-          <SuspenseWrapper>
-            <ProjectsPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/users',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Users">
-          <SuspenseWrapper>
-            <UsersPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/connections',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Connections">
-          <SuspenseWrapper>
-            <PlatformConnectionsPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Platform Setup">
-          <Navigate to="/platform/setup/ai" replace />
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/ai',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="AI Center">
-          <SuspenseWrapper>
-            <AIProvidersPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/ai-capabilities',
-    element: <Navigate to="/platform/setup/ai?tab=capabilities" replace />,
-  },
-  {
-    path: '/platform/setup/mcp',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="MCP Server">
-          <SuspenseWrapper>
-            <PlatformMcpPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/pieces',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Pieces">
-          <SuspenseWrapper>
-            <PlatformPiecesPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/pieces/piece-sets/:id',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Piece Set">
-          <SuspenseWrapper>
-            <PieceSetDetailsPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/connections',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Connections">
-          <SuspenseWrapper>
-            <GlobalConnectionsTable />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/templates',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Templates">
-          <SuspenseWrapper>
-            <PlatformTemplatesPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/general',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="General">
-          <SuspenseWrapper>
-            <GeneralPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/branding',
-    element: <Navigate to="/platform/setup/general" replace />,
-  },
-  {
-    path: '/platform/setup/billing',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Billing">
-          <SuspenseWrapper>
-            <SettingsBilling />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/usage',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Usage">
-          <SuspenseWrapper>
-            <SettingsUsage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/billing/success',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Billing">
-          <Success />
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/setup/billing/error',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Billing">
-          <Error />
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/security',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Platform Security">
-          <Navigate to="/platform/security/audit-logs" replace />
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/security/api-keys',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="API Keys">
-          <SuspenseWrapper>
-            <ApiKeysPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/security/secret-managers',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Secret managers">
-          <SuspenseWrapper>
-            <SecretManagersPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/security/audit-logs',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Audit Logs">
-          <SuspenseWrapper>
-            <AuditLogsPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/security/embed',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Embedding">
-          <SuspenseWrapper>
-            <EmbedPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/security/sso',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="SSO">
-          <SuspenseWrapper>
-            <SSOPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/security/project-roles',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Project Roles">
-          <SuspenseWrapper>
-            <ProjectRolePage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/infrastructure',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Platform Infrastructure">
-          <Navigate to="/platform/infrastructure/workers" replace />
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/infrastructure/workers',
+  ...ADMIN_PAGES.map((page) => ({
+    path: page.path,
     element: (
       <PlatformLayout>
-        <PageTitle title="Workers">
-          <SuspenseWrapper>
-            <SettingsWorkersPage />
-          </SuspenseWrapper>
+        <PageTitle title={page.title}>
+          <AdminRoute page={page} />
         </PageTitle>
       </PlatformLayout>
     ),
-  },
-  {
-    path: '/platform/infrastructure/health',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Health">
-          <SuspenseWrapper>
-            <SettingsHealthPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/infrastructure/configurations',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Configurations">
-          <SuspenseWrapper>
-            <PlatformConfigurationsPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/infrastructure/triggers',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Trigger Health">
-          <SuspenseWrapper>
-            <TriggerHealthPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
-  {
-    path: '/platform/infrastructure/event-destinations',
-    element: (
-      <PlatformLayout>
-        <PageTitle title="Event Streaming">
-          <SuspenseWrapper>
-            <EventDestinationsPage />
-          </SuspenseWrapper>
-        </PageTitle>
-      </PlatformLayout>
-    ),
-  },
+  })),
+  ...ADMIN_REDIRECTS.map(({ from, to, title, replace = true }) => ({
+    path: from,
+    element:
+      title === undefined ? (
+        <Navigate to={to} replace={replace} />
+      ) : (
+        <PlatformLayout>
+          <PageTitle title={title}>
+            <Navigate to={to} replace={replace} />
+          </PageTitle>
+        </PlatformLayout>
+      ),
+  })),
 ];
diff --git a/packages/web/src/app/routes/platform/admin-pages.ts b/packages/web/src/app/routes/platform/admin-pages.ts
new file mode 100644
index 000000000000..1898fb7f4f45
--- /dev/null
+++ b/packages/web/src/app/routes/platform/admin-pages.ts
@@ -0,0 +1,520 @@
+import { ApEdition, PlatformWithoutSensitiveData } from '@activepieces/shared';
+import React, { ComponentType } from 'react';
+
+import { FeatureTeaserProps } from '@/app/components/feature-teaser';
+import { FrameIcon } from '@/components/icons/frame';
+import { LayoutGridIcon } from '@/components/icons/layout-grid';
+import { PuzzleIcon } from '@/components/icons/puzzle';
+import { ReceiptIcon } from '@/components/icons/receipt';
+import { ServerIcon } from '@/components/icons/server';
+import { SettingsIcon } from '@/components/icons/settings';
+import { ShieldIcon } from '@/components/icons/shield';
+import { SparklesIcon } from '@/components/icons/sparkles';
+import { UnplugIcon } from '@/components/icons/unplug';
+import { UsersIcon } from '@/components/icons/users';
+import { Error as BillingError, Success } from '@/features/billing';
+
+const UsersOverview = React.lazy(() =>
+  import('./overview/users-overview').then((m) => ({
+    default: m.UsersOverview,
+  })),
+);
+const ConnectionsOverview = React.lazy(() =>
+  import('./overview/connections-overview').then((m) => ({
+    default: m.ConnectionsOverview,
+  })),
+);
+const AiOverview = React.lazy(() =>
+  import('./overview/ai-overview').then((m) => ({ default: m.AiOverview })),
+);
+const SecurityOverview = React.lazy(() =>
+  import('./overview/security-overview').then((m) => ({
+    default: m.SecurityOverview,
+  })),
+);
+const BillingOverview = React.lazy(() =>
+  import('./overview/billing-overview').then((m) => ({
+    default: m.BillingOverview,
+  })),
+);
+const InfrastructureOverview = React.lazy(() =>
+  import('./overview/infrastructure-overview').then((m) => ({
+    default: m.InfrastructureOverview,
+  })),
+);
+const ProjectsPage = React.lazy(() => import('./projects'));
+const UsersPage = React.lazy(() => import('./users'));
+const PlatformConnectionsPage = React.lazy(() => import('./connections'));
+const GeneralPage = React.lazy(() =>
+  import('./setup/general').then((m) => ({ default: m.GeneralPage })),
+);
+const ProvidersTab = React.lazy(() =>
+  import('./setup/ai/providers-tab').then((m) => ({ default: m.ProvidersTab })),
+);
+const CapabilitiesTab = React.lazy(() =>
+  import('./setup/ai/capabilities-tab').then((m) => ({
+    default: m.CapabilitiesTab,
+  })),
+);
+const PlatformMcpPage = React.lazy(() => import('./setup/mcp'));
+const GlobalConnectionsTable = React.lazy(() =>
+  import('./setup/connections').then((m) => ({
+    default: m.GlobalConnectionsTable,
+  })),
+);
+const PiecesListTab = React.lazy(() =>
+  import('./setup/pieces').then((m) => ({ default: m.PiecesListTab })),
+);
+const PieceSetsTab = React.lazy(() =>
+  import('./setup/pieces/piece-sets/piece-sets-tab').then((m) => ({
+    default: m.PieceSetsTab,
+  })),
+);
+const PieceSetDetailsPage = React.lazy(() =>
+  import('./setup/pieces/piece-sets/piece-set-details-page').then((m) => ({
+    default: m.PieceSetDetailsPage,
+  })),
+);
+const PlatformTemplatesPage = React.lazy(() =>
+  import('./setup/templates').then((m) => ({
+    default: m.PlatformTemplatesPage,
+  })),
+);
+const BillingPlanTab = React.lazy(() =>
+  import('./billing').then((m) => ({ default: m.BillingPlanTab })),
+);
+const BillingUsageTab = React.lazy(() =>
+  import('./billing').then((m) => ({ default: m.BillingUsageTab })),
+);
+const SSOPage = React.lazy(() =>
+  import('./security/sso').then((m) => ({ default: m.SSOPage })),
+);
+const ProjectRolePage = React.lazy(() =>
+  import('./security/project-role').then((m) => ({
+    default: m.ProjectRolePage,
+  })),
+);
+const ApiKeysPage = React.lazy(() =>
+  import('./security/api-keys').then((m) => ({ default: m.ApiKeysPage })),
+);
+const SecretManagersPage = React.lazy(
+  () => import('./security/secret-managers'),
+);
+const AuditLogsPage = React.lazy(() => import('./security/audit-logs'));
+const EmbedPage = React.lazy(() =>
+  import('./security/embed').then((m) => ({ default: m.EmbedPage })),
+);
+const SettingsWorkersPage = React.lazy(() => import('./infra/workers'));
+const SettingsHealthPage = React.lazy(() => import('./infra/health'));
+const ConfigurationsPage = React.lazy(() =>
+  import('./infra/configurations').then((m) => ({
+    default: m.ConfigurationsPage,
+  })),
+);
+const TriggerHealthPage = React.lazy(() => import('./infra/triggers'));
+const EventDestinationsPage = React.lazy(
+  () => import('./infra/event-destinations'),
+);
+
+function isCommunity({ edition }: AdminPageContext) {
+  return edition === ApEdition.COMMUNITY;
+}
+
+function hasNav(page: AdminPage): page is AdminNavPage {
+  return page.nav !== undefined;
+}
+
+function visibleNavPages(context: AdminPageContext) {
+  return ADMIN_PAGES.filter(hasNav).filter(
+    (page) => page.nav.isHidden?.(context) !== true,
+  );
+}
+
+function visibleTabs({ page, context }: PageInContext) {
+  return (page.tabs ?? []).filter((tab) => tab.isHidden?.(context) !== true);
+}
+
+function navTabs({ page, context }: PageInContext) {
+  return visibleTabs({ page, context }).filter((tab) => tab.hideInNav !== true);
+}
+
+function activeTabId({
+  page,
+  context,
+  requested,
+}: PageInContext & { requested: string | null }) {
+  if (requested !== null) {
+    return requested;
+  }
+  if (page.overview !== undefined) {
+    return null;
+  }
+  return visibleTabs({ page, context })[0]?.id ?? null;
+}
+
+function isCrowned({
+  page,
+  context,
+}: {
+  page: AdminNavPage;
+  context: AdminPageContext;
+}) {
+  if (page.nav.isLocked?.(context) === true) {
+    return true;
+  }
+  const tabs = visibleTabs({ page, context });
+  return (
+    tabs.length > 0 && tabs.every((tab) => tab.isLocked?.(context) === true)
+  );
+}
+
+function activePageId(pathname: string) {
+  const matches = ADMIN_PAGES.filter(
+    (page) => pathname === page.path || pathname.startsWith(page.path + '/'),
+  );
+  const best = matches.reduce<AdminPage | undefined>(
+    (longest, page) =>
+      longest === undefined || page.path.length > longest.path.length
+        ? page
+        : longest,
+    undefined,
+  );
+  return best?.id;
+}
+
+export const adminPagesUtils = {
+  visibleNavPages,
+  visibleTabs,
+  navTabs,
+  activeTabId,
+  isCrowned,
+  activePageId,
+};
+
+export const ADMIN_PAGES: AdminPage[] = [
+  {
+    id: 'general',
+    path: '/platform/setup/general',
+    title: 'General',
+    component: GeneralPage,
+    nav: { label: 'General', icon: SettingsIcon },
+  },
+  {
+    id: 'projects',
+    path: '/platform/projects',
+    title: 'Projects',
+    component: ProjectsPage,
+    nav: {
+      label: 'Projects',
+      icon: LayoutGridIcon,
+    },
+  },
+  {
+    id: 'users',
+    path: '/platform/users',
+    title: 'Users & access',
+    overview: UsersOverview,
+    nav: { label: 'Users & access', icon: UsersIcon },
+    tabs: [
+      { id: 'members', label: 'Members', component: UsersPage },
+      {
+        id: 'sso',
+        label: 'Single sign on',
+        component: SSOPage,
+        isLocked: ({ plan }) => !plan.ssoEnabled,
+      },
+      {
+        id: 'roles',
+        label: 'Project roles',
+        component: ProjectRolePage,
+        isLocked: ({ plan }) => !plan.projectRolesEnabled,
+      },
+    ],
+  },
+  {
+    id: 'connections',
+    path: '/platform/connections',
+    title: 'Connections',
+    overview: ConnectionsOverview,
+    nav: { label: 'Connections', icon: UnplugIcon },
+    tabs: [
+      {
+        id: 'project',
+        label: 'Project connections',
+        component: PlatformConnectionsPage,
+      },
+      {
+        id: 'global',
+        label: 'Global connections',
+        component: GlobalConnectionsTable,
+        isLocked: ({ plan }) => !plan.globalConnectionsEnabled,
+      },
+    ],
+  },
+  {
+    id: 'ai',
+    path: '/platform/setup/ai',
+    title: 'AI Center & MCP',
+    overview: AiOverview,
+    nav: { label: 'AI Center & MCP', icon: SparklesIcon },
+    tabs: [
+      { id: 'providers', label: 'Providers', component: ProvidersTab },
+      {
+        id: 'capabilities',
+        label: 'Capabilities',
+        component: CapabilitiesTab,
+        isHidden: ({ edition }) => edition === ApEdition.COMMUNITY,
+      },
+      {
+        id: 'mcp',
+        label: 'MCP Server',
+        component: PlatformMcpPage,
+      },
+    ],
+  },
+  {
+    id: 'pieces',
+    path: '/platform/setup/pieces',
+    title: 'Pieces',
+    nav: {
+      label: 'Pieces',
+      icon: PuzzleIcon,
+    },
+    tabs: [
+      {
+        id: 'pieces',
+        label: 'Pieces',
+        component: PiecesListTab,
+        hideInNav: true,
+      },
+      {
+        id: 'piece-sets',
+        label: 'Piece Sets',
+        component: PieceSetsTab,
+        isLocked: ({ plan }) => !plan.managePiecesEnabled,
+      },
+    ],
+  },
+  {
+    id: 'templates',
+    path: '/platform/setup/templates',
+    title: 'Templates',
+    component: PlatformTemplatesPage,
+    nav: {
+      label: 'Templates',
+      icon: LayoutGridIcon,
+      isLocked: ({ plan }) => !plan.manageTemplatesEnabled,
+    },
+  },
+  {
+    id: 'embed',
+    path: '/platform/security/embed',
+    title: 'Embedding',
+    component: EmbedPage,
+    nav: {
+      label: 'Embedding',
+      icon: FrameIcon,
+      isLocked: ({ plan }) => !plan.embeddingEnabled,
+    },
+  },
+  {
+    id: 'security',
+    path: '/platform/security',
+    title: 'Security',
+    overview: SecurityOverview,
+    nav: {
+      label: 'Security',
+      icon: ShieldIcon,
+    },
+    tabs: [
+      {
+        id: 'api-keys',
+        label: 'API keys',
+        component: ApiKeysPage,
+        isLocked: ({ plan }) => !plan.apiKeysEnabled,
+      },
+      {
+        id: 'secrets',
+        label: 'Secret managers',
+        component: SecretManagersPage,
+        isLocked: ({ plan }) => !plan.secretManagersEnabled,
+      },
+      {
+        id: 'audit',
+        label: 'Audit logs',
+        component: AuditLogsPage,
+        isLocked: ({ plan }) => !plan.auditLogEnabled,
+      },
+      {
+        id: 'events',
+        label: 'Event streaming',
+        component: EventDestinationsPage,
+        isLocked: ({ plan }) => !plan.eventStreamingEnabled,
+      },
+    ],
+  },
+  {
+    id: 'billing',
+    path: '/platform/setup/billing',
+    title: 'Billing & usage',
+    overview: BillingOverview,
+    nav: {
+      label: 'Billing & usage',
+      icon: ReceiptIcon,
+      isLocked: isCommunity,
+    },
+    tabs: [
+      { id: 'plan', label: 'Plan', component: BillingPlanTab },
+      { id: 'usage', label: 'Usage', component: BillingUsageTab },
+    ],
+  },
+  {
+    id: 'infrastructure',
+    path: '/platform/infrastructure',
+    title: 'Infrastructure',
+    overview: InfrastructureOverview,
+    nav: { label: 'Infrastructure', icon: ServerIcon },
+    tabs: [
+      { id: 'health', label: 'Health', component: SettingsHealthPage },
+      { id: 'workers', label: 'Workers', component: SettingsWorkersPage },
+      { id: 'triggers', label: 'Triggers', component: TriggerHealthPage },
+      {
+        id: 'configurations',
+        label: 'Configurations',
+        component: ConfigurationsPage,
+        isHidden: ({ edition }) => edition === ApEdition.CLOUD,
+      },
+    ],
+  },
+  {
+    id: 'piece-set-details',
+    path: '/platform/setup/pieces/piece-sets/:id',
+    title: 'Piece Set',
+    component: PieceSetDetailsPage,
+  },
+  {
+    id: 'billing-success',
+    path: '/platform/setup/billing/success',
+    title: 'Billing',
+    component: Success,
+  },
+  {
+    id: 'billing-error',
+    path: '/platform/setup/billing/error',
+    title: 'Billing',
+    component: BillingError,
+  },
+];
+
+export const ADMIN_REDIRECTS: AdminRedirect[] = [
+  {
+    from: '/platform',
+    to: '/platform/projects',
+    title: 'Platform',
+    replace: false,
+  },
+  {
+    from: '/platform/setup',
+    to: '/platform/setup/ai',
+    title: 'Platform Setup',
+  },
+  {
+    from: '/platform/setup/ai-capabilities',
+    to: '/platform/setup/ai?tab=capabilities',
+  },
+  {
+    from: '/platform/setup/usage',
+    to: '/platform/setup/billing?tab=usage',
+  },
+  {
+    from: '/platform/setup/branding',
+    to: '/platform/setup/general',
+  },
+  { from: '/platform/setup/mcp', to: '/platform/setup/ai?tab=mcp' },
+  {
+    from: '/platform/security/api-keys',
+    to: '/platform/security?tab=api-keys',
+  },
+  { from: '/platform/security/sso', to: '/platform/users?tab=sso' },
+  { from: '/platform/security/project-roles', to: '/platform/users?tab=roles' },
+  {
+    from: '/platform/setup/connections',
+    to: '/platform/connections?tab=global',
+  },
+  {
+    from: '/platform/security/secret-managers',
+    to: '/platform/security?tab=secrets',
+  },
+  { from: '/platform/security/audit-logs', to: '/platform/security?tab=audit' },
+  {
+    from: '/platform/infrastructure/event-destinations',
+    to: '/platform/security?tab=events',
+  },
+  {
+    from: '/platform/infrastructure/workers',
+    to: '/platform/infrastructure?tab=workers',
+  },
+  {
+    from: '/platform/infrastructure/health',
+    to: '/platform/infrastructure?tab=health',
+  },
+  {
+    from: '/platform/infrastructure/triggers',
+    to: '/platform/infrastructure?tab=triggers',
+  },
+  {
+    from: '/platform/infrastructure/configurations',
+    to: '/platform/infrastructure?tab=configurations',
+  },
+];
+
+type PageInContext = {
+  page: AdminPage;
+  context: AdminPageContext;
+};
+
+export type AdminPageContext = {
+  plan: PlatformWithoutSensitiveData['plan'];
+  edition: ApEdition | null;
+};
+
+export type AdminPageNav = {
+  label: string;
+  icon?: ComponentType<{ className?: string }>;
+  isLocked?: (context: AdminPageContext) => boolean;
+  isHidden?: (context: AdminPageContext) => boolean;
+};
+
+export type AdminPageTabSpec = {
+  id: string;
+  label: string;
+  component: ComponentType;
+  isLocked?: (context: AdminPageContext) => boolean;
+  isHidden?: (context: AdminPageContext) => boolean;
+  hideInNav?: boolean;
+  teaser?: FeatureTeaserProps;
+  sample?: boolean;
+};
+
+export type AdminPage = {
+  id: string;
+  path: string;
+  title: string;
+  component?: ComponentType;
+  overview?: ComponentType;
+  tabs?: AdminPageTabSpec[];
+  nav?: AdminPageNav;
+  sample?: boolean;
+  teaser?: FeatureTeaserProps;
+};
+
+export const VIEW_QUERY_PARAM = 'view';
+
+export type AdminNavPage = AdminPage & { nav: AdminPageNav };
+
+export type AdminRedirect = {
+  from: string;
+  to: string;
+  title?: string;
+  replace?: boolean;
+};
diff --git a/packages/web/src/app/routes/platform/billing/index.tsx b/packages/web/src/app/routes/platform/billing/index.tsx
index f2f86dc7c423..5ffd50d3f17f 100644
--- a/packages/web/src/app/routes/platform/billing/index.tsx
+++ b/packages/web/src/app/routes/platform/billing/index.tsx
@@ -33,20 +33,71 @@ import {
 import { flagsHooks } from '@/hooks/flags-hooks';
 import { platformHooks } from '@/hooks/platform-hooks';
 
-export default function Billing() {
+import { UsageTab } from './usage-tab';
+
+export function BillingPlanTab() {
   return (
     <BillingPageShell
-      lockTitle={t('Unlock Billing Page')}
+      lockTitle={t('Unlock Billing & Usage')}
       errorMessage={t('Failed to load billing information')}
     >
       {({ platform, info }) => (
-        <BillingPageDetails platform={platform} info={info} />
+        <div className="flex w-full flex-col gap-4 p-6">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex flex-col gap-1">
+              <h1 className="text-xl font-medium">
+                {t('Billing & subscription')}
+              </h1>
+              <div className="text-sm text-muted-foreground">
+                {t(
+                  'For questions about billing contact us at support@activepieces.com',
+                )}
+              </div>
+            </div>
+            <BillingRefreshButton />
+          </div>
+          <Separator />
+          <PlanTab platform={platform} info={info} />
+        </div>
       )}
     </BillingPageShell>
   );
 }
 
-function BillingPageDetails({ platform, info }: BillingPageDetailsProps) {
+export function BillingUsageTab() {
+  return (
+    <BillingPageShell
+      lockTitle={t('Unlock Billing & Usage')}
+      errorMessage={t('Failed to load billing information')}
+    >
+      {({ platform, info }) => <UsageTab platform={platform} info={info} />}
+    </BillingPageShell>
+  );
+}
+
+function BillingRefreshButton() {
+  const { mutate: refreshBilling, isPending: isRefreshing } =
+    billingMutations.useRefreshSubscription();
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className="shrink-0"
+      loading={isRefreshing}
+      onClick={() =>
+        refreshBilling(undefined, {
+          onSuccess: () => toast.success(t('Billing information refreshed')),
+        })
+      }
+    >
+      <RefreshCw className="size-4 mr-2" />
+      {t('Refresh')}
+    </Button>
+  );
+}
+
+function PlanTab({ platform, info }: PlanTabProps) {
   const { openDialog } = useManagePlanDialogStore();
   const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
   const isCommunity = edition === ApEdition.COMMUNITY;
@@ -56,8 +107,6 @@ function BillingPageDetails({ platform, info }: BillingPageDetailsProps) {
   const [isCancelOpen, setIsCancelOpen] = useState(false);
   const { cancelWithSeatCheck, deactivateUsersDialog } =
     useCancelSubscriptionGuard();
-  const { mutate: refreshBilling, isPending: isRefreshing } =
-    billingMutations.useRefreshSubscription();
 
   const isCloud = edition === ApEdition.CLOUD;
 
@@ -86,34 +135,6 @@ function BillingPageDetails({ platform, info }: BillingPageDetailsProps) {
 
   return (
     <div className="flex w-full flex-col gap-4 p-6">
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex flex-col gap-1">
-          <h1 className="text-xl font-medium">{t('Billing & subscription')}</h1>
-          <div className="text-sm text-muted-foreground">
-            {t(
-              'For questions about billing contact us at support@activepieces.com',
-            )}
-          </div>
-        </div>
-        {!isCommunity && (
-          <Button
-            variant="outline"
-            size="sm"
-            className="shrink-0"
-            loading={isRefreshing}
-            onClick={() =>
-              refreshBilling(undefined, {
-                onSuccess: () =>
-                  toast.success(t('Billing information refreshed')),
-              })
-            }
-          >
-            <RefreshCw className="size-4 mr-2" />
-            {t('Refresh')}
-          </Button>
-        )}
-      </div>
-      <Separator />
       {info.billingUnavailable && (
         <Alert variant="warning">
           <AlertDescription>
@@ -354,7 +375,7 @@ const LinkButton = ({
   </button>
 );
 
-type BillingPageDetailsProps = {
+type PlanTabProps = {
   platform: ReturnType<typeof platformHooks.useCurrentPlatform>['platform'];
   info: PlatformBillingInformation;
 };
diff --git a/packages/web/src/app/routes/platform/billing/usage-tab.tsx b/packages/web/src/app/routes/platform/billing/usage-tab.tsx
new file mode 100644
index 000000000000..cdee3ae5e82a
--- /dev/null
+++ b/packages/web/src/app/routes/platform/billing/usage-tab.tsx
@@ -0,0 +1,46 @@
+import { PlatformBillingInformation } from '@activepieces/shared';
+import { t } from 'i18next';
+import { Info } from 'lucide-react';
+
+import { Separator } from '@/components/ui/separator';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { FeatureUsageCards, ProjectsUsageTable } from '@/features/billing';
+import { platformHooks } from '@/hooks/platform-hooks';
+
+export function UsageTab({ platform, info }: UsageTabProps) {
+  return (
+    <div className="flex w-full flex-col gap-4 p-6">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-1.5">
+          <h1 className="text-xl font-medium">{t('Usage')}</h1>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Info className="size-3.5 text-muted-foreground cursor-help" />
+            </TooltipTrigger>
+            <TooltipContent side="right" className="max-w-60">
+              <p className="text-sm">
+                {t('Usage figures may be a few minutes out of date.')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+        <div className="text-sm text-muted-foreground">
+          {t('Track your workspace usage across your plan limits.')}
+        </div>
+      </div>
+      <Separator />
+      <FeatureUsageCards platformSubscription={info} />
+      <Separator />
+      <ProjectsUsageTable platformId={platform.id} />
+    </div>
+  );
+}
+
+type UsageTabProps = {
+  platform: ReturnType<typeof platformHooks.useCurrentPlatform>['platform'];
+  info: PlatformBillingInformation;
+};
diff --git a/packages/web/src/app/routes/platform/infra/health/index.tsx b/packages/web/src/app/routes/platform/infra/health/index.tsx
index 1c4b116d7fbe..a43965bbfd95 100644
--- a/packages/web/src/app/routes/platform/infra/health/index.tsx
+++ b/packages/web/src/app/routes/platform/infra/health/index.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
+import { VIEW_QUERY_PARAM } from '@/app/routes/platform/admin-pages';
 import {
   Select,
   SelectContent,
@@ -19,8 +20,6 @@ import { RunsTab } from './components/runs-tab';
 import { SystemHealthTab } from './components/system-health-tab';
 import { healthMetricsQueries } from './lib/health-metrics-hooks';
 
-type TabValue = 'system' | 'runs' | 'queue';
-
 type MonthOption = { value: string; label: string };
 
 function buildMonthOptions(): MonthOption[] {
@@ -37,7 +36,7 @@ function buildMonthOptions(): MonthOption[] {
 export default function SettingsHealthPage() {
   const monthOptions = React.useMemo(buildMonthOptions, []);
   const [searchParams, setSearchParams] = useSearchParams();
-  const activeTab = (searchParams.get('tab') as TabValue) || 'system';
+  const activeTab = parseTabValue(searchParams.get(VIEW_QUERY_PARAM));
   const selectedMonth = searchParams.get('month') || monthOptions[0].value;
 
   const range = React.useMemo(() => {
@@ -60,9 +59,9 @@ export default function SettingsHealthPage() {
   const setTab = (tab: TabValue) => {
     const newParams = new URLSearchParams(searchParams);
     if (tab === 'system') {
-      newParams.delete('tab');
+      newParams.delete(VIEW_QUERY_PARAM);
     } else {
-      newParams.set('tab', tab);
+      newParams.set(VIEW_QUERY_PARAM, tab);
     }
     setSearchParams(newParams, { replace: true });
   };
@@ -136,3 +135,9 @@ export default function SettingsHealthPage() {
     </div>
   );
 }
+
+function parseTabValue(value: string | null): TabValue {
+  return value === 'runs' || value === 'queue' ? value : 'system';
+}
+
+type TabValue = 'system' | 'runs' | 'queue';
diff --git a/packages/web/src/app/routes/platform/infra/workers/index.tsx b/packages/web/src/app/routes/platform/infra/workers/index.tsx
index 2a6b8ec4a660..5a02a786f5a5 100644
--- a/packages/web/src/app/routes/platform/infra/workers/index.tsx
+++ b/packages/web/src/app/routes/platform/infra/workers/index.tsx
@@ -23,6 +23,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
 import LockedFeatureGuard from '@/app/components/locked-feature-guard';
+import { VIEW_QUERY_PARAM } from '@/app/routes/platform/admin-pages';
 import {
   Alert,
   AlertAction,
@@ -53,8 +54,6 @@ import { SandboxesPopover } from './sandboxes-popover';
 import { WorkerAssignmentsTab } from './worker-assignments-tab';
 import { WorkerConfigsPopover } from './worker-configs-popover';
 
-type TabValue = 'health' | 'worker-groups';
-
 export default function WorkersPage() {
   const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
   const { platform } = platformHooks.useCurrentPlatform();
@@ -62,14 +61,14 @@ export default function WorkersPage() {
   const { data: workersData, isLoading } = workersQueries.useWorkerMachines();
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const activeTab = (searchParams.get('tab') as TabValue) || 'health';
+  const activeTab = parseTabValue(searchParams.get(VIEW_QUERY_PARAM));
 
   const setTab = (tab: TabValue) => {
     const newParams = new URLSearchParams(searchParams);
     if (tab === 'health') {
-      newParams.delete('tab');
+      newParams.delete(VIEW_QUERY_PARAM);
     } else {
-      newParams.set('tab', tab);
+      newParams.set(VIEW_QUERY_PARAM, tab);
     }
     setSearchParams(newParams, { replace: true });
   };
@@ -378,3 +377,9 @@ type WorkerCardProps = {
   worker: WorkerMachineWithStatus;
   index: number;
 };
+
+function parseTabValue(value: string | null): TabValue {
+  return value === 'worker-groups' ? value : 'health';
+}
+
+type TabValue = 'health' | 'worker-groups';
diff --git a/packages/web/src/app/routes/platform/overview/ai-overview.tsx b/packages/web/src/app/routes/platform/overview/ai-overview.tsx
new file mode 100644
index 000000000000..f5ec310172a9
--- /dev/null
+++ b/packages/web/src/app/routes/platform/overview/ai-overview.tsx
@@ -0,0 +1,177 @@
+import { AIProviderName } from '@activepieces/core-utils';
+import { ApEdition, ApFlagId } from '@activepieces/shared';
+import { t } from 'i18next';
+import { Link } from 'react-router-dom';
+
+import { Button } from '@/components/ui/button';
+import { SUPPORTED_AI_PROVIDERS } from '@/features/agents';
+import { billingQueries } from '@/features/billing';
+import {
+  aiProviderQueries,
+  aiToolConfigQueries,
+} from '@/features/platform-admin';
+import { flagsHooks } from '@/hooks/flags-hooks';
+import { platformHooks } from '@/hooks/platform-hooks';
+
+import { AI_TOOL_CATALOG } from '../setup/ai-capabilities/catalog';
+
+import {
+  AdminOverview,
+  OverviewCard,
+  OverviewCards,
+  OverviewRow,
+  OverviewRows,
+  OverviewSection,
+} from './overview-shell';
+
+export function AiOverview() {
+  const { platform } = platformHooks.useCurrentPlatform();
+  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
+  const isCommunity = edition === ApEdition.COMMUNITY;
+  const {
+    data: providers,
+    isLoading: isLoadingProviders,
+    isError: isProvidersError,
+    refetch: refetchProviders,
+  } = aiProviderQueries.useAiProviderConfigs();
+  const {
+    data: toolConfigs,
+    isLoading: isLoadingTools,
+    isError: isToolsError,
+  } = aiToolConfigQueries.useAiToolConfigs();
+  const {
+    data: subscription,
+    isError: isSubscriptionError,
+    refetch: refetchSubscription,
+  } = billingQueries.usePlatformSubscription(platform.id, !isCommunity);
+
+  const configured = (providers ?? []).filter(
+    (provider) => provider.provider !== AIProviderName.ACTIVEPIECES,
+  );
+  const chatProvider = (providers ?? []).find(
+    (provider) => provider.enabledForChat,
+  );
+  const connectedTools = (toolConfigs ?? []).filter((config) => config.enabled);
+  const chatProviderName =
+    SUPPORTED_AI_PROVIDERS.find(
+      (info) => info.provider === chatProvider?.provider,
+    )?.name ?? chatProvider?.provider;
+
+  const credits = subscription?.usage.creditsUsed ?? 0;
+  const creditsIncluded = subscription?.plan.includedCredits ?? 0;
+  const creditsPercent =
+    creditsIncluded === 0
+      ? 0
+      : Math.min(100, Math.round((credits / creditsIncluded) * 100));
+
+  return (
+    <AdminOverview
+      title={t('AI Center & MCP')}
+      description={t(
+        'Models, assistant capabilities and the MCP server your flows and chat rely on.',
+      )}
+    >
+      <OverviewCards>
+        <OverviewCard
+          to="/platform/setup/ai?tab=providers"
+          title={t('Providers')}
+          value={configured.length}
+          isLoading={isLoadingProviders}
+          isError={isProvidersError}
+          errorEntity={t('AI providers')}
+          description={
+            chatProvider === undefined
+              ? t('No provider powers chat yet')
+              : t('{provider} powers chat', { provider: chatProviderName })
+          }
+        />
+        {!isCommunity && (
+          <OverviewCard
+            to="/platform/setup/ai?tab=capabilities"
+            title={t('Capabilities')}
+            value={t('{connected} of {total}', {
+              connected: connectedTools.length,
+              total: AI_TOOL_CATALOG.length,
+            })}
+            isLoading={isLoadingTools}
+            isError={isToolsError}
+            errorEntity={t('capabilities')}
+            description={t(
+              'Web search, scraping and image generation for the assistant',
+            )}
+          />
+        )}
+        <OverviewCard
+          to="/platform/setup/ai?tab=mcp"
+          title={t('MCP Server')}
+          value={t('Ready')}
+          description={t('Expose platform tools to external MCP clients')}
+        />
+      </OverviewCards>
+
+      {!isCommunity && (
+        <OverviewSection
+          title={t('AI credits this month')}
+          description={t(
+            'Credits spent on AI steps and chat, out of your plan total.',
+          )}
+          error={
+            isSubscriptionError
+              ? { entity: t('credits'), onRetry: refetchSubscription }
+              : undefined
+          }
+        >
+          <div className="flex flex-col gap-2 rounded-lg border p-4">
+            <div className="flex items-baseline justify-between gap-3">
+              <span className="text-sm">
+                <span className="text-lg font-semibold">
+                  {credits.toLocaleString()}
+                </span>{' '}
+                {t('used')}
+              </span>
+              <span className="text-sm text-muted-foreground">
+                {t('{included} included', {
+                  included: creditsIncluded.toLocaleString(),
+                })}
+              </span>
+            </div>
+            <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+              <div
+                className="h-full rounded-full bg-primary"
+                style={{ width: `${creditsPercent}%` }}
+              />
+            </div>
+          </div>
+        </OverviewSection>
+      )}
+
+      <OverviewSection
+        title={t('Default model')}
+        description={t(
+          'Used by AI steps and the assistant when a flow does not pick a model explicitly.',
+        )}
+        isLoading={isLoadingProviders}
+        error={
+          isProvidersError
+            ? { entity: t('AI providers'), onRetry: refetchProviders }
+            : undefined
+        }
+      >
+        <OverviewRows>
+          <OverviewRow
+            tone={chatProvider === undefined ? 'off' : 'ok'}
+            label={
+              chatProvider === undefined
+                ? t('No provider enabled for chat')
+                : chatProviderName
+            }
+          >
+            <Button variant="outline" size="sm" asChild>
+              <Link to="/platform/setup/ai?tab=providers">{t('Change')}</Link>
+            </Button>
+          </OverviewRow>
+        </OverviewRows>
+      </OverviewSection>
+    </AdminOverview>
+  );
+}
diff --git a/packages/web/src/app/routes/platform/overview/billing-overview.tsx b/packages/web/src/app/routes/platform/overview/billing-overview.tsx
new file mode 100644
index 000000000000..5dbf02b69bb3
--- /dev/null
+++ b/packages/web/src/app/routes/platform/overview/billing-overview.tsx
@@ -0,0 +1,59 @@
+import { ApEdition, ApFlagId } from '@activepieces/shared';
+import { t } from 'i18next';
+
+import { billingQueries } from '@/features/billing';
+import { flagsHooks } from '@/hooks/flags-hooks';
+import { platformHooks } from '@/hooks/platform-hooks';
+
+import { AdminOverview, OverviewCard, OverviewCards } from './overview-shell';
+
+export function BillingOverview() {
+  const { platform } = platformHooks.useCurrentPlatform();
+  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
+  const isCommunity = edition === ApEdition.COMMUNITY;
+  const {
+    data: subscription,
+    isLoading,
+    isError,
+  } = billingQueries.usePlatformSubscription(platform.id, !isCommunity);
+
+  const creditsUsed = subscription?.usage.creditsUsed ?? 0;
+  const creditsLimit = subscription?.plan.includedCredits ?? 0;
+  const usedPercent =
+    creditsLimit === 0
+      ? 0
+      : Math.min(100, Math.round((creditsUsed / creditsLimit) * 100));
+
+  return (
+    <AdminOverview
+      title={t('Billing & usage')}
+      description={t('Your plan, credits and how projects consume them.')}
+    >
+      <OverviewCards>
+        <OverviewCard
+          to="/platform/setup/billing?tab=plan"
+          title={t('Plan')}
+          value={subscription?.autumnPlanName ?? subscription?.plan.plan ?? '—'}
+          isLoading={isLoading}
+          isError={isError}
+          errorEntity={t('billing')}
+          description={t('{credits} credits included', {
+            credits: creditsLimit.toLocaleString(),
+          })}
+        />
+        <OverviewCard
+          to="/platform/setup/billing?tab=usage"
+          title={t('Usage')}
+          value={`${usedPercent}%`}
+          isLoading={isLoading}
+          isError={isError}
+          errorEntity={t('billing')}
+          description={t('{used} of {total} credits used this period', {
+            used: creditsUsed.toLocaleString(),
+            total: creditsLimit.toLocaleString(),
+          })}
+        />
+      </OverviewCards>
+    </AdminOverview>
+  );
+}
diff --git a/packages/web/src/app/routes/platform/overview/connections-overview.tsx b/packages/web/src/app/routes/platform/overview/connections-overview.tsx
new file mode 100644
index 000000000000..38be7e5f05e7
--- /dev/null
+++ b/packages/web/src/app/routes/platform/overview/connections-overview.tsx
@@ -0,0 +1,165 @@
+import { AppConnectionScope, AppConnectionStatus } from '@activepieces/shared';
+import { useQuery } from '@tanstack/react-query';
+import { t } from 'i18next';
+
+import { globalConnectionsQueries } from '@/features/connections';
+import { platformAppConnectionsApi } from '@/features/platform-admin/api/platform-app-connections-api';
+import { projectCollectionUtils } from '@/features/projects';
+import { platformHooks } from '@/hooks/platform-hooks';
+
+import {
+  AdminOverview,
+  OverviewCard,
+  OverviewCards,
+  OverviewEmpty,
+  OverviewRow,
+  OverviewRows,
+  OverviewSection,
+} from './overview-shell';
+
+export function ConnectionsOverview() {
+  const { platform } = platformHooks.useCurrentPlatform();
+  const {
+    data: connections,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ['platform-app-connections', 'overview'],
+    queryFn: () =>
+      platformAppConnectionsApi.list({
+        limit: 1000,
+        scope: AppConnectionScope.PROJECT,
+      }),
+  });
+  const {
+    data: globalConnections,
+    isLoading: isLoadingGlobal,
+    isError: isGlobalError,
+    refetch: refetchGlobal,
+  } = globalConnectionsQueries.useGlobalConnections({
+    request: { limit: 1000 },
+    extraKeys: ['overview'],
+  });
+  const { data: projects } = projectCollectionUtils.useAllPlatformProjects();
+
+  const rows = connections?.data ?? [];
+  const globalRows = platform.plan.globalConnectionsEnabled
+    ? globalConnections?.data ?? []
+    : [];
+  const unhealthy = [...rows, ...globalRows].filter(
+    (connection) => connection.status === AppConnectionStatus.ERROR,
+  );
+  const hasGlobalError =
+    platform.plan.globalConnectionsEnabled && isGlobalError;
+  const isLoadingHealth =
+    isLoading || (platform.plan.globalConnectionsEnabled && isLoadingGlobal);
+  const healthError =
+    isError || hasGlobalError
+      ? {
+          entity: t('connections'),
+          onRetry: () =>
+            Promise.all([
+              ...(isError ? [refetch()] : []),
+              ...(hasGlobalError ? [refetchGlobal()] : []),
+            ]),
+        }
+      : undefined;
+  const usageError = isError
+    ? { entity: t('connections'), onRetry: refetch }
+    : undefined;
+  const byPiece = rows.reduce<Record<string, number>>(
+    (counts, connection) => ({
+      ...counts,
+      [connection.pieceName]: (counts[connection.pieceName] ?? 0) + 1,
+    }),
+    {},
+  );
+  const topPieces: [string, number][] = Object.entries(byPiece)
+    .sort((left, right) => right[1] - left[1])
+    .slice(0, 5);
+
+  return (
+    <AdminOverview
+      title={t('Connections')}
+      description={t(
+        'Every app credential in use across the platform, whether owned by a project or shared globally.',
+      )}
+    >
+      <OverviewCards>
+        <OverviewCard
+          to="/platform/connections?tab=project"
+          title={t('Project connections')}
+          value={rows.length}
+          isLoading={isLoading}
+          isError={isError}
+          errorEntity={t('connections')}
+          description={t(
+            'Across {count, plural, =1 {# project} other {# projects}}',
+            { count: projects?.length ?? 0 },
+          )}
+        />
+        <OverviewCard
+          to="/platform/connections?tab=global"
+          title={t('Global connections')}
+          tier="team"
+          value={
+            platform.plan.globalConnectionsEnabled
+              ? globalConnections?.data.length ?? 0
+              : t('Locked')
+          }
+          isLoading={isLoadingGlobal}
+          isError={hasGlobalError}
+          errorEntity={t('connections')}
+          description={t('Shared credentials available to multiple projects')}
+        />
+      </OverviewCards>
+
+      <OverviewSection
+        title={t('Needs attention')}
+        description={t(
+          'Connections across every project that are expired, revoked or failing.',
+        )}
+        isLoading={isLoadingHealth}
+        error={healthError}
+      >
+        {unhealthy.length === 0 ? (
+          <OverviewEmpty>{t('All connections are healthy')}</OverviewEmpty>
+        ) : (
+          <OverviewRows>
+            {unhealthy.map((connection) => (
+              <OverviewRow
+                key={connection.id}
+                tone="error"
+                label={connection.displayName}
+              >
+                {connection.pieceName}
+              </OverviewRow>
+            ))}
+          </OverviewRows>
+        )}
+      </OverviewSection>
+
+      <OverviewSection
+        title={t('Most used pieces')}
+        description={t('Which apps your projects connect to most.')}
+        isLoading={isLoading}
+        error={usageError}
+      >
+        {topPieces.length === 0 ? (
+          <OverviewEmpty>{t('No connections yet')}</OverviewEmpty>
+        ) : (
+          <OverviewRows>
+            {topPieces.map(([pieceName, count]) => (
+              <OverviewRow key={pieceName} tone="ok" label={pieceName}>
+                {t('{count, plural, =1 {# connection} other {# connections}}', {
+                  count,
+                })}
+              </OverviewRow>
+            ))}
+          </OverviewRows>
+        )}
+      </OverviewSection>
+    </AdminOverview>
+  );
+}
diff --git a/packages/web/src/app/routes/platform/overview/infrastructure-overview.tsx b/packages/web/src/app/routes/platform/overview/infrastructure-overview.tsx
new file mode 100644
index 000000000000..6a8354ac3c9d
--- /dev/null
+++ b/packages/web/src/app/routes/platform/overview/infrastructure-overview.tsx
@@ -0,0 +1,198 @@
+import { isNil } from '@activepieces/core-utils';
+import { ApEdition, ApFlagId } from '@activepieces/shared';
+import { t } from 'i18next';
+import semver from 'semver';
+
+import { healthQueries, workersQueries } from '@/features/platform-admin';
+import { flagsHooks } from '@/hooks/flags-hooks';
+import { platformHooks } from '@/hooks/platform-hooks';
+
+import { ADMIN_PAGES, adminPagesUtils } from '../admin-pages';
+
+import {
+  AdminOverview,
+  OverviewCard,
+  OverviewCards,
+  OverviewRow,
+  OverviewRows,
+  OverviewSection,
+} from './overview-shell';
+
+export function InfrastructureOverview() {
+  const { platform } = platformHooks.useCurrentPlatform();
+  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
+  const {
+    data: health,
+    isLoading: isLoadingHealth,
+    isError: isHealthError,
+    refetch: refetchHealth,
+  } = healthQueries.useSystemHealth();
+  const {
+    data: workers,
+    isLoading: isLoadingWorkers,
+    isError: isWorkersError,
+    refetch: refetchWorkers,
+  } = workersQueries.useWorkerMachines();
+  const infrastructurePage = ADMIN_PAGES.find(
+    (page) => page.id === 'infrastructure',
+  );
+  const showConfigurations =
+    infrastructurePage !== undefined &&
+    adminPagesUtils
+      .visibleTabs({
+        page: infrastructurePage,
+        context: { plan: platform.plan, edition },
+      })
+      .some((tab) => tab.id === 'configurations');
+  const statusError =
+    isHealthError || isWorkersError
+      ? {
+          entity: t('infrastructure status'),
+          onRetry: () => Promise.all([refetchHealth(), refetchWorkers()]),
+        }
+      : undefined;
+
+  const currentVersion = health?.release?.current;
+  const latestVersion = health?.latestVersion;
+  const isUpToDate =
+    currentVersion !== undefined &&
+    latestVersion !== undefined &&
+    semver.gte(currentVersion, latestVersion);
+  const appChecksPassed =
+    health?.disk === true && health?.appRam === true && health?.appCpu === true;
+  const workerCount = workers?.length ?? 0;
+  const mismatched = health?.release?.workers.versionMismatched ?? 0;
+
+  const workerChecksReported =
+    !isNil(health?.workerRam) && !isNil(health?.workerCpu);
+  const workerChecksPassed =
+    health?.workerRam === true && health?.workerCpu === true;
+  const needsAttention =
+    !isUpToDate ||
+    !appChecksPassed ||
+    mismatched > 0 ||
+    (workerChecksReported && !workerChecksPassed);
+
+  return (
+    <AdminOverview
+      title={t('Infrastructure')}
+      description={t(
+        'Health of the app, workers, queues and triggers running your automations.',
+      )}
+    >
+      <OverviewCards>
+        <OverviewCard
+          to="/platform/infrastructure?tab=health"
+          title={t('Health')}
+          value={needsAttention ? t('Attention') : t('Healthy')}
+          isLoading={isLoadingHealth}
+          isError={isHealthError}
+          errorEntity={t('health checks')}
+          description={
+            health === undefined
+              ? ''
+              : !needsAttention
+              ? t('All checks passed')
+              : !isUpToDate
+              ? t('Version behind latest; see release notes')
+              : t('Some checks are failing')
+          }
+        />
+        <OverviewCard
+          to="/platform/infrastructure?tab=workers"
+          title={t('Workers')}
+          value={workerCount}
+          isLoading={isLoadingWorkers}
+          isError={isWorkersError}
+          errorEntity={t('workers')}
+          description={
+            workerCount === 0
+              ? t('No workers connected')
+              : t(
+                  '{count, plural, =1 {# machine} other {# machines}} connected',
+                  {
+                    count: workerCount,
+                  },
+                )
+          }
+        />
+        <OverviewCard
+          to="/platform/infrastructure?tab=triggers"
+          title={t('Triggers')}
+          value="—"
+          description={t('Trigger health across the last 14 days')}
+        />
+        {showConfigurations && (
+          <OverviewCard
+            to="/platform/infrastructure?tab=configurations"
+            title={t('Configurations')}
+            value={t('Runtime')}
+            description={t('Runtime settings for this instance')}
+          />
+        )}
+      </OverviewCards>
+
+      <OverviewSection
+        title={t('Status')}
+        isLoading={isLoadingHealth || isLoadingWorkers}
+        error={statusError}
+      >
+        <OverviewRows>
+          <OverviewRow
+            tone={isUpToDate ? 'ok' : 'error'}
+            label={
+              currentVersion === undefined
+                ? t('Version unknown')
+                : t('Version {current} · latest is {latest}', {
+                    current: currentVersion,
+                    latest: latestVersion ?? t('unknown'),
+                  })
+            }
+          >
+            <a
+              href="https://github.com/activepieces/activepieces/releases"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm font-medium text-primary hover:underline"
+            >
+              {t('Release notes')}
+            </a>
+          </OverviewRow>
+          <OverviewRow
+            tone={appChecksPassed ? 'ok' : 'warn'}
+            label={
+              appChecksPassed
+                ? t('App: disk, RAM and CPU checks passed')
+                : t('App: one or more hardware checks failed')
+            }
+          />
+          <OverviewRow
+            tone={workerCount === 0 ? 'off' : mismatched > 0 ? 'warn' : 'ok'}
+            label={
+              workerCount === 0
+                ? t('No workers connected')
+                : mismatched > 0
+                ? t(
+                    '{count, plural, =1 {# worker is} other {# workers are}} on an incompatible version',
+                    { count: mismatched },
+                  )
+                : t('All connected workers match the app release')
+            }
+          />
+          <OverviewRow
+            tone={
+              !workerChecksReported ? 'off' : workerChecksPassed ? 'ok' : 'warn'
+            }
+            label={
+              !workerChecksReported
+                ? t('Worker hardware checks unavailable')
+                : workerChecksPassed
+                ? t('Workers: RAM and CPU checks passed')
+                : t('Workers: one or more hardware checks failed')
+            }
+          />
+        </OverviewRows>
+      </OverviewSection>
+    </AdminOverview>
+  );
+}
diff --git a/packages/web/src/app/routes/platform/overview/overview-shell.tsx b/packages/web/src/app/routes/platform/overview/overview-shell.tsx
new file mode 100644
index 000000000000..83c7bce13f69
--- /dev/null
+++ b/packages/web/src/app/routes/platform/overview/overview-shell.tsx
@@ -0,0 +1,207 @@
+import { t } from 'i18next';
+import { ChevronRight } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+
+import { DataFetchErrorState } from '@/components/custom/data-fetch-error-state';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { FeatureTier, TIER_LABELS } from '@/features/billing';
+import { cn } from '@/lib/utils';
+
+export function AdminOverview({
+  title,
+  description,
+  action,
+  children,
+}: AdminOverviewProps) {
+  return (
+    <div className="mx-auto flex w-full max-w-5xl flex-col gap-8 px-6 py-8">
+      <div className="flex items-start justify-between gap-6 border-b pb-5">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-xl font-medium">{title}</h1>
+          {description !== undefined && (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          )}
+        </div>
+        {action}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export function OverviewCards({ children }: { children: ReactNode }) {
+  return (
+    <div className="grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] gap-3 [&>*:only-child]:max-w-60">
+      {children}
+    </div>
+  );
+}
+
+export function OverviewCard({
+  to,
+  title,
+  tier,
+  value,
+  description,
+  isLoading = false,
+  isError = false,
+  errorEntity,
+}: OverviewCardProps) {
+  return (
+    <Link
+      to={to}
+      className="group flex flex-col gap-2.5 rounded-lg border bg-background p-4 transition-colors hover:border-ring/40 hover:bg-muted/40"
+    >
+      <div className="flex items-center gap-2">
+        <span className="flex-1 truncate font-medium">{title}</span>
+        {tier !== undefined && (
+          <Badge variant="outline">{TIER_LABELS[tier]}</Badge>
+        )}
+        <ChevronRight className="size-3.5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+      </div>
+      {isLoading ? (
+        <Skeleton className="h-7 w-16" />
+      ) : (
+        <div className="text-2xl font-semibold leading-none tracking-tight">
+          {isError ? '—' : value}
+        </div>
+      )}
+      <div className="text-sm text-muted-foreground">
+        {isLoading ? (
+          <Skeleton className="h-4 w-32" />
+        ) : isError ? (
+          t('Trouble loading {entity}', { entity: errorEntity ?? title })
+        ) : (
+          description
+        )}
+      </div>
+    </Link>
+  );
+}
+
+export function OverviewSection({
+  title,
+  description,
+  isLoading = false,
+  error,
+  children,
+}: OverviewSectionProps) {
+  return (
+    <section className="flex flex-col gap-3">
+      <div className="flex flex-col gap-1">
+        <h2 className="text-base font-semibold">{title}</h2>
+        {description !== undefined && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {error !== undefined ? (
+        <div className="rounded-lg border">
+          <DataFetchErrorState
+            entity={error.entity}
+            onRetry={error.onRetry}
+            className="py-8"
+          />
+        </div>
+      ) : isLoading ? (
+        <Skeleton className="h-24 w-full rounded-lg" />
+      ) : (
+        children
+      )}
+    </section>
+  );
+}
+
+export function OverviewEmpty({ children }: { children: ReactNode }) {
+  return (
+    <div className="rounded-lg border border-dashed p-7 text-center text-sm text-muted-foreground">
+      {children}
+    </div>
+  );
+}
+
+export function OverviewRows({ children }: { children: ReactNode }) {
+  return (
+    <div className="divide-y overflow-hidden rounded-lg border">{children}</div>
+  );
+}
+
+export function OverviewRow({ tone, label, children }: OverviewRowProps) {
+  return (
+    <div className="flex items-center gap-3 px-4 py-3">
+      <span
+        className={cn('size-2 shrink-0 rounded-full', TONE_CLASS[tone])}
+        aria-hidden
+      />
+      <span className="flex-1 text-sm">{label}</span>
+      {children !== undefined && (
+        <span className="shrink-0 text-sm text-muted-foreground">
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function OverviewRowLink({ to, children }: OverviewRowLinkProps) {
+  return (
+    <Link
+      to={to}
+      className="shrink-0 text-sm font-medium text-primary hover:underline"
+    >
+      {children ?? t('Review')}
+    </Link>
+  );
+}
+
+const TONE_CLASS: Record<OverviewRowTone, string> = {
+  ok: 'bg-emerald-500',
+  warn: 'bg-amber-500',
+  error: 'bg-destructive',
+  off: 'bg-muted-foreground/35',
+};
+
+export type OverviewRowTone = 'ok' | 'warn' | 'error' | 'off';
+
+export type AdminOverviewProps = {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  children: ReactNode;
+};
+
+export type OverviewCardProps = {
+  to: string;
+  title: string;
+  tier?: FeatureTier;
+  value: ReactNode;
+  description: ReactNode;
+  isLoading?: boolean;
+  isError?: boolean;
+  errorEntity?: string;
+};
+
+export type OverviewSectionError = {
+  entity: string;
+  onRetry?: () => unknown;
+};
+
+export type OverviewSectionProps = {
+  title: string;
+  description?: string;
+  isLoading?: boolean;
+  error?: OverviewSectionError;
+  children: ReactNode;
+};
+
+export type OverviewRowProps = {
+  tone: OverviewRowTone;
+  label: ReactNode;
+  children?: ReactNode;
+};
+
+export type OverviewRowLinkProps = {
+  to: string;
+  children?: ReactNode;
+};
diff --git a/packages/web/src/app/routes/platform/overview/security-overview.tsx b/packages/web/src/app/routes/platform/overview/security-overview.tsx
new file mode 100644
index 000000000000..8213ebfb2a8c
--- /dev/null
+++ b/packages/web/src/app/routes/platform/overview/security-overview.tsx
@@ -0,0 +1,158 @@
+import { t } from 'i18next';
+
+import { apiKeyQueries } from '@/features/platform-admin';
+import { secretManagersHooks } from '@/features/secret-managers';
+import { platformHooks } from '@/hooks/platform-hooks';
+
+import {
+  AdminOverview,
+  OverviewCard,
+  OverviewCards,
+  OverviewRow,
+  OverviewRowLink,
+  OverviewRows,
+  OverviewSection,
+} from './overview-shell';
+
+export function SecurityOverview() {
+  const { platform } = platformHooks.useCurrentPlatform();
+  const {
+    data: apiKeys,
+    isLoading: isLoadingKeys,
+    isError: isKeysError,
+  } = apiKeyQueries.useApiKeys();
+  const {
+    data: secretManagers,
+    isLoading: isLoadingSecrets,
+    isError: isSecretsError,
+  } = secretManagersHooks.useListSecretManagerConnections({
+    listForPlatform: true,
+  });
+
+  const keysKnown =
+    platform.plan.apiKeysEnabled && !isLoadingKeys && !isKeysError;
+  const keyCount = apiKeys?.data.length ?? 0;
+  const secretCount = secretManagers?.length ?? 0;
+  const domains = platform.allowedAuthDomains ?? [];
+  const bothLoginsOn = platform.googleAuthEnabled && platform.emailAuthEnabled;
+
+  return (
+    <AdminOverview
+      title={t('Security')}
+      description={t(
+        'Credentials, secrets, and the record of what happens on the platform.',
+      )}
+    >
+      <OverviewCards>
+        <OverviewCard
+          to="/platform/security?tab=api-keys"
+          title={t('API keys')}
+          tier="team"
+          value={platform.plan.apiKeysEnabled ? keyCount : t('Locked')}
+          isLoading={isLoadingKeys}
+          isError={isKeysError}
+          errorEntity={t('API keys')}
+          description={
+            keyCount === 0 ? t('No keys issued') : t('Active platform keys')
+          }
+        />
+        <OverviewCard
+          to="/platform/security?tab=secrets"
+          title={t('Secret managers')}
+          tier="enterprise"
+          value={
+            platform.plan.secretManagersEnabled ? secretCount : t('Locked')
+          }
+          isLoading={isLoadingSecrets}
+          isError={isSecretsError}
+          errorEntity={t('secret managers')}
+          description={
+            secretCount === 0
+              ? t('No external vault connected')
+              : t('External vaults connected')
+          }
+        />
+        <OverviewCard
+          to="/platform/security?tab=audit"
+          title={t('Audit logs')}
+          tier="enterprise"
+          value={platform.plan.auditLogEnabled ? t('On') : t('Locked')}
+          description={t('Every user and system action, recorded')}
+        />
+        <OverviewCard
+          to="/platform/security?tab=events"
+          title={t('Event streaming')}
+          tier="enterprise"
+          value={platform.plan.eventStreamingEnabled ? t('On') : t('Locked')}
+          description={t('Forward audit events to your own webhook')}
+        />
+      </OverviewCards>
+
+      <OverviewSection
+        title={t('Security checklist')}
+        description={t('Recommendations based on your current configuration.')}
+      >
+        <OverviewRows>
+          <OverviewRow
+            tone={bothLoginsOn ? 'warn' : 'ok'}
+            label={
+              bothLoginsOn
+                ? t('Email and password login is enabled alongside Google')
+                : t('One sign-in method is enabled')
+            }
+          >
+            <OverviewRowLink to="/platform/users?tab=sso">
+              {t('Review sign-in')}
+            </OverviewRowLink>
+          </OverviewRow>
+          <OverviewRow
+            tone={domains.length > 0 ? 'ok' : 'warn'}
+            label={
+              domains.length > 0
+                ? t(
+                    'Sign-up restricted to {count, plural, =1 {# domain} other {# domains}}',
+                    {
+                      count: domains.length,
+                    },
+                  )
+                : t('No allowed email domains set')
+            }
+          >
+            <OverviewRowLink to="/platform/users?tab=sso">
+              {t('Restrict domains')}
+            </OverviewRowLink>
+          </OverviewRow>
+          <OverviewRow
+            tone={!keysKnown ? 'off' : keyCount === 0 ? 'ok' : 'warn'}
+            label={
+              !keysKnown
+                ? t('API keys')
+                : keyCount === 0
+                ? t('No API keys issued')
+                : t(
+                    '{count, plural, =1 {# API key is} other {# API keys are}} active',
+                    { count: keyCount },
+                  )
+            }
+          >
+            {keysKnown && keyCount === 0 ? t('Nothing to rotate') : undefined}
+          </OverviewRow>
+          <OverviewRow
+            tone={platform.plan.auditLogEnabled ? 'ok' : 'off'}
+            label={
+              platform.plan.auditLogEnabled
+                ? t('Audit logging is recording')
+                : t('Audit logging is not available on your plan')
+            }
+          >
+            {platform.plan.auditLogEnabled ? undefined : (
+              <OverviewRowLink to="/platform/security?tab=audit">
+                {t('Upgrade')}
+              </OverviewRowLink>
+            )}
+          </OverviewRow>
+        </OverviewRows>
+      </OverviewSection>
+    </AdminOverview>
+  );
+}
diff --git a/packages/web/src/app/routes/platform/overview/users-overview.tsx b/packages/web/src/app/routes/platform/overview/users-overview.tsx
new file mode 100644
index 000000000000..174fd9fa99f7
--- /dev/null
+++ b/packages/web/src/app/routes/platform/overview/users-overview.tsx
@@ -0,0 +1,170 @@
+import { isNil, RoleType } from '@activepieces/core-utils';
+import { PlatformRole, UserStatus } from '@activepieces/shared';
+import { t } from 'i18next';
+
+import {
+  platformUserHooks,
+  projectRoleQueries,
+} from '@/features/platform-admin';
+import { platformHooks } from '@/hooks/platform-hooks';
+
+import {
+  AdminOverview,
+  OverviewCard,
+  OverviewCards,
+  OverviewEmpty,
+  OverviewRow,
+  OverviewRows,
+  OverviewSection,
+} from './overview-shell';
+
+export function UsersOverview() {
+  const { platform } = platformHooks.useCurrentPlatform();
+  const {
+    data: users,
+    isLoading: isLoadingUsers,
+    isError: isUsersError,
+  } = platformUserHooks.useUsers();
+  const {
+    data: invitations,
+    isLoading: isLoadingInvitations,
+    isError: isInvitationsError,
+    refetch: refetchInvitations,
+  } = platformUserHooks.usePlatformInvitations();
+  const {
+    data: roles,
+    isLoading: isLoadingRoles,
+    isError: isRolesError,
+  } = projectRoleQueries.useProjectRoles(platform.plan.projectRolesEnabled);
+  const invitationsError = isInvitationsError
+    ? { entity: t('invitations'), onRetry: refetchInvitations }
+    : undefined;
+
+  const allUsers = users?.data ?? [];
+  const admins = allUsers.filter(
+    (user) => user.platformRole === PlatformRole.ADMIN,
+  ).length;
+  const deactivated = allUsers.filter(
+    (user) => user.status === UserStatus.INACTIVE,
+  ).length;
+  const members = allUsers.length - admins;
+
+  const googleEnabled = platform.googleAuthEnabled;
+  const samlEnabled = !isNil(platform.federatedAuthProviders?.saml);
+  const domains = platform.allowedAuthDomains ?? [];
+  const signInMethods = [
+    googleEnabled,
+    platform.emailAuthEnabled,
+    samlEnabled,
+  ].filter(Boolean).length;
+
+  const customRoles = (roles?.data ?? []).filter(
+    (role) => role.type === RoleType.CUSTOM,
+  ).length;
+  const pending = invitations ?? [];
+
+  return (
+    <AdminOverview
+      title={t('Users & access')}
+      description={t(
+        'Who can sign in, how they sign in, and what they can do inside projects.',
+      )}
+    >
+      <OverviewCards>
+        <OverviewCard
+          to="/platform/users?tab=members"
+          title={t('Members')}
+          value={allUsers.length}
+          isLoading={isLoadingUsers}
+          isError={isUsersError}
+          errorEntity={t('members')}
+          description={t(
+            '{admins, plural, =1 {# admin} other {# admins}} · {members, plural, =1 {# member} other {# members}} · {deactivated} deactivated',
+            { admins, members, deactivated },
+          )}
+        />
+        <OverviewCard
+          to="/platform/users?tab=sso"
+          title={t('Single sign on')}
+          tier="team"
+          value={t('{count} of 3', { count: signInMethods })}
+          description={
+            samlEnabled ? t('SAML connected.') : t('SAML not connected yet.')
+          }
+        />
+        <OverviewCard
+          to="/platform/users?tab=roles"
+          title={t('Project roles')}
+          tier="team"
+          value={platform.plan.projectRolesEnabled ? customRoles : t('Locked')}
+          isLoading={isLoadingRoles}
+          isError={platform.plan.projectRolesEnabled && isRolesError}
+          errorEntity={t('project roles')}
+          description={
+            customRoles === 0
+              ? t('No custom roles. Built-in roles in use.')
+              : t('Custom roles on top of the built-in ones.')
+          }
+        />
+      </OverviewCards>
+
+      <OverviewSection
+        title={t('Sign-in policy')}
+        description={t(
+          'How people get into this platform. Individual providers are configured under Single sign on.',
+        )}
+      >
+        <OverviewRows>
+          <OverviewRow
+            tone={googleEnabled ? 'ok' : 'off'}
+            label={t('Google sign-in')}
+          >
+            {googleEnabled ? t('Enabled') : t('Off')}
+          </OverviewRow>
+          <OverviewRow
+            tone={platform.emailAuthEnabled ? 'ok' : 'off'}
+            label={t('Email and password')}
+          >
+            {platform.emailAuthEnabled ? t('Enabled') : t('Off')}
+          </OverviewRow>
+          <OverviewRow tone={samlEnabled ? 'ok' : 'off'} label={t('SAML 2.0')}>
+            {samlEnabled ? t('Enabled') : t('Off')}
+          </OverviewRow>
+          <OverviewRow
+            tone={domains.length > 0 ? 'ok' : 'off'}
+            label={t('Allowed email domains')}
+          >
+            {domains.length > 0
+              ? t('{count, plural, =1 {# domain} other {# domains}}', {
+                  count: domains.length,
+                })
+              : t('Any domain')}
+          </OverviewRow>
+        </OverviewRows>
+      </OverviewSection>
+
+      <OverviewSection
+        title={t('Pending invitations')}
+        description={t(
+          'Invites sent from any project that have not been accepted yet.',
+        )}
+        isLoading={isLoadingInvitations}
+        error={invitationsError}
+      >
+        {pending.length === 0 ? (
+          <OverviewEmpty>{t('No pending invitations')}</OverviewEmpty>
+        ) : (
+          <OverviewRows>
+            {pending.map((invitation) => (
+              <OverviewRow
+                key={invitation.id}
+                tone="warn"
+                label={invitation.email}
+              />
+            ))}
+          </OverviewRows>
+        )}
+      </OverviewSection>
+    </AdminOverview>
+  );
+}
diff --git a/packages/web/src/app/routes/platform/projects/index.tsx b/packages/web/src/app/routes/platform/projects/index.tsx
index aef8d9480552..f5df2b753c31 100644
--- a/packages/web/src/app/routes/platform/projects/index.tsx
+++ b/packages/web/src/app/routes/platform/projects/index.tsx
@@ -9,7 +9,6 @@ import { toast } from 'sonner';
 
 import { platformApi } from '@/api/platforms-api';
 import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import {
   DataTable,
   RowDataWithActions,
@@ -50,7 +49,6 @@ export default function ProjectsPage() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
-  const isEnabled = platform.plan.billedTeamProjectsLimit !== 0;
   const { project: currentProject } =
     projectCollectionUtils.useCurrentProject();
 
@@ -362,98 +360,88 @@ export default function ProjectsPage() {
   ];
 
   return (
-    <LockedFeatureGuard
-      featureKey="PROJECTS"
-      locked={!isEnabled}
-      lockTitle={t('Unlock Projects')}
-      lockDescription={t(
-        'Orchestrate your automation teams across projects with their own flows, connections and usage quotas',
-      )}
-      lockVideoUrl="https://cdn.activepieces.com/videos/showcase/projects.mp4"
-    >
-      <div className="flex flex-col w-full">
-        <DashboardPageHeader
-          title={t('Projects')}
-          description={t('Manage your automation projects')}
-        />
-        <div className="px-6 pt-4">
-          <Item variant="outline">
-            <ItemMedia variant="icon">
-              <UserCircle />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>{t('Automatic personal project creation')}</ItemTitle>
-              <ItemDescription>
-                {t(
-                  'Create a personal project for every new user on signup. Turn off if you provision users into team projects manually (e.g. via SSO or SCIM).',
-                )}
-              </ItemDescription>
-            </ItemContent>
-            <ItemActions>
-              <Switch
-                checked={platform.autoCreatePersonalProjects}
-                onCheckedChange={(checked) =>
-                  toggleAutoCreatePersonalProjects(checked)
-                }
-                disabled={isAutoCreatePersonalProjectsPending}
-              />
-            </ItemActions>
-          </Item>
-        </div>
-        <DataTable
-          emptyStateTextTitle={t('No projects found')}
-          emptyStateTextDescription={t(
-            'Start by creating projects to manage your automation teams',
-          )}
-          emptyStateIcon={<Package className="size-14" />}
-          onRowClick={async (project) => {
-            await projectCollectionUtils.setCurrentProject(project.id);
-            navigate('/');
-          }}
-          filters={[
-            {
-              type: 'input',
-              title: t('Name'),
-              accessorKey: 'displayName',
-              icon: CheckIcon,
-            },
-            {
-              type: 'select',
-              title: t('Type'),
-              accessorKey: 'type',
-              options: Object.values(ProjectType).map((type) => {
-                return {
-                  label:
-                    formatUtils.convertEnumToHumanReadable(type) + ' Project',
-                  value: type,
-                };
-              }),
-              icon: CheckIcon,
-            },
-          ]}
-          columns={columnsWithCheckbox}
-          page={{
-            data: allProjectsWithGlobalConnectionsCount,
-            next: null,
-            previous: null,
-          }}
-          isLoading={false}
-          isError={false}
-          errorStateEntity={t('projects')}
-          clientPagination={true}
-          bulkActions={bulkActions}
-          toolbarButtons={toolbarButtons}
-          actions={actions}
-        />
-        <EditProjectDialog
-          open={editDialogOpen}
-          onClose={() => {
-            setEditDialogOpen(false);
-          }}
-          initialValues={editDialogInitialValues}
-          projectId={editDialogProjectId}
-        />
+    <div className="flex flex-col w-full">
+      <DashboardPageHeader
+        title={t('Projects')}
+        description={t('Manage your automation projects')}
+      />
+      <div className="px-6 pt-4">
+        <Item variant="outline">
+          <ItemMedia variant="icon">
+            <UserCircle />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>{t('Automatic personal project creation')}</ItemTitle>
+            <ItemDescription>
+              {t(
+                'Create a personal project for every new user on signup. Turn off if you provision users into team projects manually (e.g. via SSO or SCIM).',
+              )}
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Switch
+              checked={platform.autoCreatePersonalProjects}
+              onCheckedChange={(checked) =>
+                toggleAutoCreatePersonalProjects(checked)
+              }
+              disabled={isAutoCreatePersonalProjectsPending}
+            />
+          </ItemActions>
+        </Item>
       </div>
-    </LockedFeatureGuard>
+      <DataTable
+        emptyStateTextTitle={t('No projects found')}
+        emptyStateTextDescription={t(
+          'Start by creating projects to manage your automation teams',
+        )}
+        emptyStateIcon={<Package className="size-14" />}
+        onRowClick={async (project) => {
+          await projectCollectionUtils.setCurrentProject(project.id);
+          navigate('/');
+        }}
+        filters={[
+          {
+            type: 'input',
+            title: t('Name'),
+            accessorKey: 'displayName',
+            icon: CheckIcon,
+          },
+          {
+            type: 'select',
+            title: t('Type'),
+            accessorKey: 'type',
+            options: Object.values(ProjectType).map((type) => {
+              return {
+                label:
+                  formatUtils.convertEnumToHumanReadable(type) + ' Project',
+                value: type,
+              };
+            }),
+            icon: CheckIcon,
+          },
+        ]}
+        columns={columnsWithCheckbox}
+        page={{
+          data: allProjectsWithGlobalConnectionsCount,
+          next: null,
+          previous: null,
+        }}
+        isLoading={false}
+        isError={false}
+        errorStateEntity={t('projects')}
+        clientPagination={true}
+        bulkActions={bulkActions}
+        toolbarButtons={toolbarButtons}
+        actions={actions}
+      />
+      <EditProjectDialog
+        open={editDialogOpen}
+        onClose={() => {
+          setEditDialogOpen(false);
+        }}
+        initialValues={editDialogInitialValues}
+        projectId={editDialogProjectId}
+      />
+    </div>
   );
 }
diff --git a/packages/web/src/app/routes/platform/setup/ai/capabilities-tab/index.tsx b/packages/web/src/app/routes/platform/setup/ai/capabilities-tab/index.tsx
index fe4feccc3f69..4dd2d380817c 100644
--- a/packages/web/src/app/routes/platform/setup/ai/capabilities-tab/index.tsx
+++ b/packages/web/src/app/routes/platform/setup/ai/capabilities-tab/index.tsx
@@ -48,7 +48,7 @@ export function CapabilitiesTab() {
   });
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex w-full mx-auto max-w-6xl flex-col gap-4 px-6 py-6">
       <SectionHeader
         title={t('Assistant capabilities')}
         count={AI_TOOL_CATALOG.length}
diff --git a/packages/web/src/app/routes/platform/setup/ai/index.tsx b/packages/web/src/app/routes/platform/setup/ai/index.tsx
deleted file mode 100644
index 02145a08ad4e..000000000000
--- a/packages/web/src/app/routes/platform/setup/ai/index.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { ApEdition, ApFlagId, PlatformRole } from '@activepieces/shared';
-import { t } from 'i18next';
-import { Bot, WandSparkles } from 'lucide-react';
-import { useSearchParams } from 'react-router-dom';
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { flagsHooks } from '@/hooks/flags-hooks';
-import { userHooks } from '@/hooks/user-hooks';
-import { cn } from '@/lib/utils';
-
-import { LockedFeatureGuard } from '../../../../components/locked-feature-guard';
-
-import { CapabilitiesTab } from './capabilities-tab';
-import { ProvidersTab } from './providers-tab';
-
-export default function AIProvidersPage() {
-  const { data: currentUser } = userHooks.useCurrentUser();
-
-  return (
-    <LockedFeatureGuard
-      featureKey="UNIVERSAL_AI"
-      locked={currentUser?.platformRole !== PlatformRole.ADMIN}
-      lockTitle={t('Unlock AI')}
-      lockDescription={t(
-        'Set your AI providers so your users enjoy a seamless building experience with our universal AI pieces',
-      )}
-    >
-      <AICenter />
-    </LockedFeatureGuard>
-  );
-}
-
-function AICenter() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
-  const capabilitiesEnabled = edition !== ApEdition.COMMUNITY;
-
-  const rawTab = searchParams.get('tab');
-  const requestedTab = isTabValue(rawTab) ? rawTab : 'providers';
-  const activeTab =
-    requestedTab === 'capabilities' && !capabilitiesEnabled
-      ? 'providers'
-      : requestedTab;
-
-  const setTab = (tab: TabValue) => {
-    const newParams = new URLSearchParams(searchParams);
-    if (tab === 'providers') {
-      newParams.delete('tab');
-    } else {
-      newParams.set('tab', tab);
-    }
-    setSearchParams(newParams, { replace: true });
-  };
-
-  const navItems: { value: TabValue; label: string; icon: typeof Bot }[] = [
-    { value: 'providers', label: t('Providers'), icon: Bot },
-    ...(capabilitiesEnabled
-      ? [
-          {
-            value: 'capabilities' as const,
-            label: t('Capabilities'),
-            icon: WandSparkles,
-          },
-        ]
-      : []),
-  ];
-
-  return (
-    <Tabs
-      value={activeTab}
-      orientation="vertical"
-      onValueChange={(value) => {
-        const next = TAB_VALUES.find((candidate) => candidate === value);
-        if (next) {
-          setTab(next);
-        }
-      }}
-      className="flex w-full flex-1 min-h-0"
-    >
-      <aside className="flex w-60 shrink-0 flex-col min-h-0 border-r">
-        <div className="flex flex-col gap-1 px-4 pt-6 pb-4">
-          <h1 className="text-lg font-semibold tracking-tight">
-            {t('AI Center')}
-          </h1>
-          <p className="text-xs text-muted-foreground">
-            {t('Providers and capabilities for your platform.')}
-          </p>
-        </div>
-        <TabsList className="flex-col items-stretch h-auto gap-1 bg-transparent p-2">
-          {navItems.map((item) => (
-            <TabsTrigger
-              key={item.value}
-              value={item.value}
-              className={cn(
-                'w-full justify-start gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground',
-                'hover:bg-sidebar-accent/60 hover:text-foreground',
-                'data-[state=active]:bg-sidebar-accent data-[state=active]:font-medium data-[state=active]:text-foreground',
-              )}
-            >
-              <item.icon className="size-4 shrink-0" />
-              {item.label}
-            </TabsTrigger>
-          ))}
-        </TabsList>
-      </aside>
-      <div className="flex-1 min-w-0 overflow-auto">
-        <div className="flex min-h-full w-full max-w-6xl flex-col px-8 py-6">
-          <TabsContent value="providers" className="mt-0 flex flex-1 flex-col">
-            <ProvidersTab />
-          </TabsContent>
-          {capabilitiesEnabled && (
-            <TabsContent value="capabilities" className="mt-0">
-              <CapabilitiesTab />
-            </TabsContent>
-          )}
-        </div>
-      </div>
-    </Tabs>
-  );
-}
-
-function isTabValue(value: string | null): value is TabValue {
-  return TAB_VALUES.some((tab) => tab === value);
-}
-
-const TAB_VALUES = ['providers', 'capabilities'] as const;
-
-type TabValue = (typeof TAB_VALUES)[number];
diff --git a/packages/web/src/app/routes/platform/setup/ai/providers-tab/index.tsx b/packages/web/src/app/routes/platform/setup/ai/providers-tab/index.tsx
index 769c6ecf41a8..89c7e8f0adfa 100644
--- a/packages/web/src/app/routes/platform/setup/ai/providers-tab/index.tsx
+++ b/packages/web/src/app/routes/platform/setup/ai/providers-tab/index.tsx
@@ -167,23 +167,25 @@ export function ProvidersTab() {
   if (activeConfig && activeInfo && allowWrite) {
     return (
       <>
-        <ConfigDetail
-          key={`${activeConfig.id}:${credentialsVersion}`}
-          config={activeConfig}
-          info={activeInfo}
-          projects={projects}
-          isSaving={isSaving}
-          onSave={(request) =>
-            tryCatch(() =>
-              updateProvider({ providerId: activeConfig.id, request }),
-            )
-          }
-          onDelete={() => deleteProvider(activeConfig.id)}
-          onReplaceCredentials={() => openReplaceCredentials(activeConfig)}
-          isRechecking={isRechecking}
-          onRecheck={() => recheckProvider(activeConfig.id)}
-          onBack={closeConfig}
-        />
+        <div className="flex min-h-full w-full max-w-6xl flex-col px-8 py-6">
+          <ConfigDetail
+            key={`${activeConfig.id}:${credentialsVersion}`}
+            config={activeConfig}
+            info={activeInfo}
+            projects={projects}
+            isSaving={isSaving}
+            onSave={(request) =>
+              tryCatch(() =>
+                updateProvider({ providerId: activeConfig.id, request }),
+              )
+            }
+            onDelete={() => deleteProvider(activeConfig.id)}
+            onReplaceCredentials={() => openReplaceCredentials(activeConfig)}
+            isRechecking={isRechecking}
+            onRecheck={() => recheckProvider(activeConfig.id)}
+            onBack={closeConfig}
+          />
+        </div>
         <ConnectProviderDialog
           open={dialogOpen}
           onOpenChange={setDialogOpen}
@@ -197,7 +199,7 @@ export function ProvidersTab() {
 
   return (
     <>
-      <div className="flex flex-col gap-6">
+      <div className="flex w-full mx-auto max-w-6xl flex-col gap-6 px-6 py-6">
         <div className="flex items-start justify-between gap-3">
           <SectionHeader
             title={t('Providers')}
diff --git a/packages/web/src/app/routes/platform/setup/general/appearance-section.tsx b/packages/web/src/app/routes/platform/setup/general/appearance-section.tsx
index d4e4cbe53876..71807f04e0c7 100644
--- a/packages/web/src/app/routes/platform/setup/general/appearance-section.tsx
+++ b/packages/web/src/app/routes/platform/setup/general/appearance-section.tsx
@@ -1,5 +1,5 @@
 import { isNil } from '@activepieces/core-utils';
-import { HEX_COLOR_PATTERN } from '@activepieces/shared';
+import { formErrors, HEX_COLOR_PATTERN } from '@activepieces/shared';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
 import { t } from 'i18next';
@@ -9,6 +9,7 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { platformApi } from '@/api/platforms-api';
+import { FeatureBanner } from '@/app/components/feature-banner';
 import { ColorPicker } from '@/components/custom/color-picker';
 import { Button } from '@/components/ui/button';
 import {
@@ -20,73 +21,21 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { flagsHooks } from '@/hooks/flags-hooks';
 import { platformHooks } from '@/hooks/platform-hooks';
 
-const hexColor = z.string().regex(HEX_COLOR_PATTERN, 'invalidHexColor');
-
-const ThemeColorsSchema = z.object({
-  avatar: hexColor,
-  'blue-link': hexColor,
-  danger: hexColor,
-  selection: hexColor,
-  primary: z.object({
-    dark: hexColor,
-    light: hexColor,
-    medium: hexColor,
-  }),
-  warn: z.object({
-    default: hexColor,
-    light: hexColor,
-    dark: hexColor,
-  }),
-  success: z.object({
-    default: hexColor,
-    light: hexColor,
-  }),
-});
-
-const FromSchema = z.object({
-  name: z.string(),
-  logoUrl: z.string(),
-  iconUrl: z.string(),
-  faviconUrl: z.string(),
-  color: z.string(),
-  customThemeColors: z.boolean(),
-  themeColors: ThemeColorsSchema,
-});
-
-type FromSchema = z.infer<typeof FromSchema>;
-
-const THEME_COLOR_FIELDS: { name: FieldPath<FromSchema>; label: string }[] = [
-  { name: 'themeColors.primary.dark', label: 'Primary Dark' },
-  { name: 'themeColors.primary.light', label: 'Primary Light' },
-  { name: 'themeColors.primary.medium', label: 'Primary Medium' },
-  { name: 'themeColors.danger', label: 'Danger' },
-  { name: 'themeColors.warn.default', label: 'Warning' },
-  { name: 'themeColors.warn.light', label: 'Warning Light' },
-  { name: 'themeColors.warn.dark', label: 'Warning Dark' },
-  { name: 'themeColors.success.default', label: 'Success' },
-  { name: 'themeColors.success.light', label: 'Success Light' },
-  { name: 'themeColors.blue-link', label: 'Link' },
-  { name: 'themeColors.avatar', label: 'Avatar' },
-  { name: 'themeColors.selection', label: 'Selection' },
-];
-
 export const AppearanceSection = () => {
   const { platform } = platformHooks.useCurrentPlatform();
   const branding = flagsHooks.useWebsiteBranding();
   const brandingLocked = !platform.plan.customAppearanceEnabled;
 
-  const form = useForm<FromSchema>({
+  const form = useForm<PlatformAppearanceSchema>({
     defaultValues: {
-      name: platform?.name,
-      logoUrl: platform?.fullLogoUrl,
-      iconUrl: platform?.logoIconUrl,
-      faviconUrl: platform?.favIconUrl,
-      color: platform?.primaryColor,
-      customThemeColors: !isNil(platform?.themeColors),
+      name: platform.name,
+      color: platform.primaryColor,
+      customThemeColors: !isNil(platform.themeColors),
       themeColors: {
         avatar: branding.colors.avatar,
         'blue-link': branding.colors['blue-link'],
@@ -108,8 +57,10 @@ export const AppearanceSection = () => {
         },
       },
     },
-    resolver: zodResolver(FromSchema),
+    resolver: zodResolver(PlatformAppearanceSchema),
+    mode: 'onChange',
   });
+
   const logoRef = useRef<HTMLInputElement>(null);
   const iconRef = useRef<HTMLInputElement>(null);
   const faviconRef = useRef<HTMLInputElement>(null);
@@ -138,190 +89,216 @@ export const AppearanceSection = () => {
       window.location.reload();
     },
     onSuccess: () => {
-      toast.success(t('Your changes have been saved.'), {
-        duration: 3000,
-      });
+      toast.success(t('Your changes have been saved.'), { duration: 3000 });
       form.reset(form.getValues());
     },
   });
 
   return (
-    <>
-      <div className="grid gap-4">
-        <Form {...form}>
-          <form
-            className="grid space-y-4 mt-4"
-            onSubmit={form.handleSubmit(() => updatePlatform())}
-          >
-            <div className="max-w-[600px] grid space-y-4">
-              <FormField
-                name="name"
-                render={({ field }) => (
-                  <FormItem className="grid space-y-2">
-                    <FormLabel htmlFor="name">{t('Platform Name')}</FormLabel>
-                    <Input
-                      {...field}
-                      required
-                      id="name"
-                      placeholder={t('Platform Name')}
-                      className="rounded-sm"
-                    />
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+    <div className="grid gap-4">
+      <Form {...form}>
+        <form
+          className="grid space-y-4 mt-4"
+          onSubmit={form.handleSubmit(() => updatePlatform())}
+        >
+          <div className="max-w-[600px] grid space-y-4">
+            <FormField
+              name="name"
+              render={({ field }) => (
+                <FormItem className="grid space-y-2">
+                  <FormLabel htmlFor="name">{t('Platform Name')}</FormLabel>
+                  <Input
+                    {...field}
+                    required
+                    id="name"
+                    placeholder={t('Platform Name')}
+                    className="rounded-sm"
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-              <FormField
-                name="logoUrl"
-                render={() => (
-                  <FormItem className="grid space-y-2">
-                    <FormLabel htmlFor="logoFile">{t('Logo')}</FormLabel>
-                    <div className="flex flex-row gap-2 items-center">
-                      <Input
-                        type="file"
-                        ref={logoRef}
-                        defaultFileName={platform?.fullLogoUrl}
-                        accept="image/*"
-                        id="logoFile"
-                        disabled={brandingLocked}
-                        className="rounded-sm"
-                      />
-                    </div>
-                    <FormMessage />
-                  </FormItem>
+            {brandingLocked && (
+              <FeatureBanner
+                message={t(
+                  'Your logo, colors and favicon are part of custom branding.',
                 )}
               />
-              <FormField
-                name="iconUrl"
-                render={() => (
-                  <FormItem className="grid space-y-2">
-                    <FormLabel htmlFor="iconFile">{t('Icon')}</FormLabel>
-                    <div className="flex flex-row gap-2 items-center">
-                      <Input
-                        type="file"
-                        ref={iconRef}
-                        defaultFileName={platform?.logoIconUrl}
-                        accept="image/*"
-                        id="iconFile"
-                        disabled={brandingLocked}
-                        className="rounded-sm"
-                      />
-                    </div>
-                    <FormMessage />
-                  </FormItem>
-                )}
+            )}
+
+            <div className="grid space-y-2">
+              <Label htmlFor="logoFile">{t('Logo')}</Label>
+              <Input
+                type="file"
+                ref={logoRef}
+                defaultFileName={platform.fullLogoUrl}
+                accept="image/*"
+                id="logoFile"
+                disabled={brandingLocked}
+                className="rounded-sm"
               />
-              <FormField
-                name="faviconUrl"
-                render={() => (
-                  <FormItem className="grid space-y-2">
-                    <FormLabel htmlFor="faviconUrl">
-                      {t('Favicon URL')}
-                    </FormLabel>
-                    <div className="flex flex-row gap-2 items-center">
-                      <Input
-                        type="file"
-                        ref={faviconRef}
-                        defaultFileName={platform?.favIconUrl}
-                        accept="image/*"
-                        id="faviconFile"
-                        disabled={brandingLocked}
-                        className="rounded-sm"
-                      />
-                    </div>
-                    <FormMessage />
-                  </FormItem>
-                )}
+            </div>
+            <div className="grid space-y-2">
+              <Label htmlFor="iconFile">{t('Icon')}</Label>
+              <Input
+                type="file"
+                ref={iconRef}
+                defaultFileName={platform.logoIconUrl}
+                accept="image/*"
+                id="iconFile"
+                disabled={brandingLocked}
+                className="rounded-sm"
               />
-
-              <FormField
-                name="color"
-                render={({ field }) => (
-                  <FormItem className="grid space-y-2">
-                    <FormLabel htmlFor="color">{t('Primary Color')}</FormLabel>
-                    <div className="flex flex-row gap-2 items-center">
-                      <ColorPicker
-                        disabled={brandingLocked}
-                        value={field.value as string}
-                        onChange={(color: string) => field.onChange(color)}
-                        className="flex flex-row gap-2 items-center"
-                      ></ColorPicker>
-                      <FormMessage />
-                    </div>
-                  </FormItem>
-                )}
+            </div>
+            <div className="grid space-y-2">
+              <Label htmlFor="faviconFile">{t('Favicon')}</Label>
+              <Input
+                type="file"
+                ref={faviconRef}
+                defaultFileName={platform.favIconUrl}
+                accept="image/*"
+                id="faviconFile"
+                disabled={brandingLocked}
+                className="rounded-sm"
               />
+            </div>
 
-              <FormField
-                control={form.control}
-                name="customThemeColors"
-                render={({ field }) => (
-                  <FormItem className="grid space-y-2">
-                    <FormLabel htmlFor="customThemeColors">
-                      {t('Customize theme colors')}
-                    </FormLabel>
-                    <div className="flex flex-row gap-2 items-center">
-                      <Switch
-                        id="customThemeColors"
-                        disabled={brandingLocked}
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
-                    </div>
-                    <FormDescription>
-                      {t(
-                        'When disabled, theme colors are derived from your primary color.',
-                      )}
-                    </FormDescription>
-                  </FormItem>
-                )}
-              />
+            <FormField
+              name="color"
+              render={({ field }) => (
+                <FormItem className="grid space-y-2">
+                  <FormLabel htmlFor="color">{t('Primary Color')}</FormLabel>
+                  <div className="flex flex-row gap-2 items-center">
+                    <ColorPicker
+                      disabled={brandingLocked}
+                      value={field.value}
+                      onChange={(color: string) => field.onChange(color)}
+                      className="flex flex-row gap-2 items-center"
+                    ></ColorPicker>
+                    <FormMessage />
+                  </div>
+                </FormItem>
+              )}
+            />
 
-              {form.watch('customThemeColors') && !brandingLocked && (
-                <div className="grid grid-cols-3 gap-4">
-                  {THEME_COLOR_FIELDS.map(({ name, label }) => (
-                    <FormField
-                      key={name}
-                      control={form.control}
-                      name={name}
-                      render={({ field }) => (
-                        <FormItem className="grid space-y-2">
-                          <FormLabel>{t(label)}</FormLabel>
-                          <div className="flex flex-row gap-2 items-center">
-                            <ColorPicker
-                              value={field.value as string}
-                              onChange={(color: string) =>
-                                field.onChange(color)
-                              }
-                              className="flex flex-row gap-2 items-center"
-                            ></ColorPicker>
-                            <FormMessage />
-                          </div>
-                        </FormItem>
-                      )}
+            <FormField
+              control={form.control}
+              name="customThemeColors"
+              render={({ field }) => (
+                <FormItem className="grid space-y-2">
+                  <FormLabel htmlFor="customThemeColors">
+                    {t('Customize theme colors')}
+                  </FormLabel>
+                  <div className="flex flex-row gap-2 items-center">
+                    <Switch
+                      id="customThemeColors"
+                      disabled={brandingLocked}
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
                     />
-                  ))}
-                </div>
+                  </div>
+                  <FormDescription>
+                    {t(
+                      'When disabled, theme colors are derived from your primary color.',
+                    )}
+                  </FormDescription>
+                </FormItem>
               )}
-            </div>
+            />
 
-            {form?.formState?.errors?.root?.serverError && (
-              <FormMessage>
-                {form.formState.errors.root.serverError.message}
-              </FormMessage>
+            {form.watch('customThemeColors') && !brandingLocked && (
+              <div className="grid grid-cols-3 gap-4">
+                {THEME_COLOR_FIELDS.map(({ name, label }) => (
+                  <FormField
+                    key={name}
+                    control={form.control}
+                    name={name}
+                    render={({ field }) => (
+                      <FormItem className="grid space-y-2">
+                        <FormLabel>{t(label)}</FormLabel>
+                        <div className="flex flex-row gap-2 items-center">
+                          <ColorPicker
+                            value={field.value as string}
+                            onChange={(color: string) => field.onChange(color)}
+                            className="flex flex-row gap-2 items-center"
+                          ></ColorPicker>
+                          <FormMessage />
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                ))}
+              </div>
             )}
-            <div className="flex gap-2 justify-end mt-4">
-              <Button
-                type="submit"
-                loading={isPending}
-                disabled={!form.formState.isValid}
-              >
-                {t('Save')}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </div>
-    </>
+          </div>
+
+          {form?.formState?.errors?.root?.serverError && (
+            <FormMessage>
+              {form.formState.errors.root.serverError.message}
+            </FormMessage>
+          )}
+          <div className="flex gap-2 justify-end mt-4">
+            <Button
+              type="submit"
+              loading={isPending}
+              disabled={!form.formState.isValid}
+            >
+              {t('Save')}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
   );
 };
+
+const hexColor = z.string().regex(HEX_COLOR_PATTERN, 'invalidHexColor');
+
+const ThemeColorsSchema = z.object({
+  avatar: hexColor,
+  'blue-link': hexColor,
+  danger: hexColor,
+  selection: hexColor,
+  primary: z.object({
+    dark: hexColor,
+    light: hexColor,
+    medium: hexColor,
+  }),
+  warn: z.object({
+    default: hexColor,
+    light: hexColor,
+    dark: hexColor,
+  }),
+  success: z.object({
+    default: hexColor,
+    light: hexColor,
+  }),
+});
+
+const PlatformAppearanceSchema = z.object({
+  name: z.string().min(1, formErrors.required),
+  color: z.string(),
+  customThemeColors: z.boolean(),
+  themeColors: ThemeColorsSchema,
+});
+
+const THEME_COLOR_FIELDS: {
+  name: FieldPath<PlatformAppearanceSchema>;
+  label: string;
+}[] = [
+  { name: 'themeColors.primary.dark', label: 'Primary Dark' },
+  { name: 'themeColors.primary.light', label: 'Primary Light' },
+  { name: 'themeColors.primary.medium', label: 'Primary Medium' },
+  { name: 'themeColors.danger', label: 'Danger' },
+  { name: 'themeColors.warn.default', label: 'Warning' },
+  { name: 'themeColors.warn.light', label: 'Warning Light' },
+  { name: 'themeColors.warn.dark', label: 'Warning Dark' },
+  { name: 'themeColors.success.default', label: 'Success' },
+  { name: 'themeColors.success.light', label: 'Success Light' },
+  { name: 'themeColors.blue-link', label: 'Link' },
+  { name: 'themeColors.avatar', label: 'Avatar' },
+  { name: 'themeColors.selection', label: 'Selection' },
+];
+
+type PlatformAppearanceSchema = z.infer<typeof PlatformAppearanceSchema>;
diff --git a/packages/web/src/app/routes/platform/setup/general/index.tsx b/packages/web/src/app/routes/platform/setup/general/index.tsx
index f7b9e1f05e07..6e0cfd91b63b 100644
--- a/packages/web/src/app/routes/platform/setup/general/index.tsx
+++ b/packages/web/src/app/routes/platform/setup/general/index.tsx
@@ -21,7 +21,7 @@ export const GeneralPage = () => {
   return (
     <CenteredPage
       title={t('General')}
-      description={t('Change the settings for your platform.')}
+      description={t('Your platform name, branding and general settings.')}
     >
       <AppearanceSection />
       {canDeletePlatform && (
diff --git a/packages/web/src/app/routes/platform/setup/mcp/index.tsx b/packages/web/src/app/routes/platform/setup/mcp/index.tsx
index 596064ed5b25..7fafecca35cf 100644
--- a/packages/web/src/app/routes/platform/setup/mcp/index.tsx
+++ b/packages/web/src/app/routes/platform/setup/mcp/index.tsx
@@ -1,13 +1,14 @@
 import { ApFlagId } from '@activepieces/shared';
 import { t } from 'i18next';
+import React from 'react';
 
-import { CenteredPage } from '@/app/components/centered-page';
 import { McpTools } from '@/app/components/project-settings/mcp-server/mcp-tools';
 import { ActivityFeed } from '@/app/routes/mcp-server/activity/activity-feed';
 import { CopyToClipboardInput } from '@/components/custom/clipboard/copy-to-clipboard';
 import { CollapsibleJson } from '@/components/custom/collapsible-json';
 import { DataFetchErrorState } from '@/components/custom/data-fetch-error-state';
 import { LoadingSpinner } from '@/components/custom/spinner';
+import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { flagsHooks } from '@/hooks/flags-hooks';
 
@@ -26,8 +27,7 @@ export default function PlatformMcpPage() {
 
   if (isLoading) {
     return (
-      <CenteredPage
-        title={t('Platform MCP Server')}
+      <McpSection
         description={t(
           'Configure the platform-wide MCP server used by the AI Chat assistant and external MCP clients.',
         )}
@@ -35,20 +35,19 @@ export default function PlatformMcpPage() {
         <div className="flex items-center justify-center py-20">
           <LoadingSpinner />
         </div>
-      </CenteredPage>
+      </McpSection>
     );
   }
 
   if (isError) {
     return (
-      <CenteredPage
-        title={t('Platform MCP Server')}
+      <McpSection
         description={t(
           'Configure the platform-wide MCP server used by the AI Chat assistant and external MCP clients.',
         )}
       >
         <DataFetchErrorState entity={t('the MCP server')} onRetry={refetch} />
-      </CenteredPage>
+      </McpSection>
     );
   }
 
@@ -63,9 +62,7 @@ export default function PlatformMcpPage() {
   };
 
   return (
-    <CenteredPage
-      widthClassName="max-w-[1198px]"
-      title={t('Platform MCP Server')}
+    <McpSection
       description={t(
         'Configure the platform-wide MCP server used by the AI Chat assistant and external MCP clients.',
       )}
@@ -141,6 +138,25 @@ export default function PlatformMcpPage() {
           </Tabs>
         )}
       </div>
-    </CenteredPage>
+    </McpSection>
+  );
+}
+
+function McpSection({
+  description,
+  children,
+}: {
+  description: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="w-full mx-auto max-w-page-band py-6">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-xl font-medium">{t('Platform MCP Server')}</h1>
+        <div className="text-sm text-muted-foreground">{description}</div>
+      </div>
+      <Separator className="my-4" />
+      {children}
+    </div>
   );
 }
diff --git a/packages/web/src/app/routes/platform/setup/pieces/customize-selector-dialog.tsx b/packages/web/src/app/routes/platform/setup/pieces/customize-selector-dialog.tsx
index 347bce647bd1..68eab4bfb8e0 100644
--- a/packages/web/src/app/routes/platform/setup/pieces/customize-selector-dialog.tsx
+++ b/packages/web/src/app/routes/platform/setup/pieces/customize-selector-dialog.tsx
@@ -8,6 +8,7 @@ import { t } from 'i18next';
 import {
   CheckIcon,
   ChevronDownIcon,
+  Crown,
   EyeIcon,
   EyeOffIcon,
   GripVerticalIcon,
@@ -51,6 +52,7 @@ import {
   SortableDragHandle,
   SortableItem,
 } from '@/components/ui/sortable';
+import { PLATFORM_FEATURES, useFeatureGate } from '@/features/billing';
 import {
   PieceIcon,
   pieceSelectorCustomization,
@@ -70,10 +72,27 @@ export const CustomizeSelectorDialog = ({
   isEnabled: boolean;
 }) => {
   const [open, setOpen] = useState(false);
+  const gate = useFeatureGate({
+    locked: !isEnabled,
+    feature: PLATFORM_FEATURES.pieces,
+  });
+
+  if (gate.locked) {
+    return (
+      <>
+        <Button variant="outline" size="sm" onClick={gate.open}>
+          <Crown className="size-3.5 shrink-0 text-primary" />
+          {t('Customize Selector')}
+        </Button>
+        {gate.dialog}
+      </>
+    );
+  }
+
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button variant="outline" size="sm" disabled={!isEnabled}>
+        <Button variant="outline" size="sm">
           <Settings2Icon className="size-4 mr-2" />
           {t('Customize Selector')}
         </Button>
diff --git a/packages/web/src/app/routes/platform/setup/pieces/index.tsx b/packages/web/src/app/routes/platform/setup/pieces/index.tsx
index 8d3f5e19a3c2..c1df3d100e4a 100644
--- a/packages/web/src/app/routes/platform/setup/pieces/index.tsx
+++ b/packages/web/src/app/routes/platform/setup/pieces/index.tsx
@@ -11,7 +11,6 @@ import {
   Package,
   Hash,
   GitBranch,
-  Layers,
   Puzzle,
   Trash,
 } from 'lucide-react';
@@ -23,15 +22,13 @@ import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
 import { CustomizeSelectorDialog } from '@/app/routes/platform/setup/pieces/customize-selector-dialog';
 import { DownloadPiecesReportButton } from '@/app/routes/platform/setup/pieces/download-pieces-report';
 import { PieceActions } from '@/app/routes/platform/setup/pieces/piece-actions';
+import { PiecesLockedBanner } from '@/app/routes/platform/setup/pieces/pieces-locked-banner';
 import { SyncPiecesButton } from '@/app/routes/platform/setup/pieces/sync-pieces';
 import { ConfigurePieceOAuth2Dialog } from '@/app/routes/platform/setup/pieces/update-oauth2-dialog';
 import { DataTable, RowDataWithActions } from '@/components/custom/data-table';
 import { DataTableColumnHeader } from '@/components/custom/data-table/data-table-column-header';
 import { ConfirmationDeleteDialog } from '@/components/custom/delete-dialog';
-import { LockedAlert } from '@/components/custom/locked-alert';
 import { Button } from '@/components/ui/button';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { RequestTrial } from '@/features/billing';
 import { oauthAppsQueries } from '@/features/connections';
 import {
   InstallPieceDialog,
@@ -42,11 +39,7 @@ import {
 import { platformHooks } from '@/hooks/platform-hooks';
 import { api } from '@/lib/api';
 
-import { PieceSetsTab } from './piece-sets/piece-sets-tab';
-
-type TabValue = 'pieces' | 'piece-sets';
-
-const PiecesListTab = () => {
+export const PiecesListTab = () => {
   const { platform } = platformHooks.useCurrentPlatform();
   const isEnabled = platform.plan.managePiecesEnabled;
   const [searchParams] = useSearchParams();
@@ -178,124 +171,58 @@ const PiecesListTab = () => {
       [isEnabled, refetchPieces, refetchPiecesOAuth2AppsMap],
     );
 
-  return (
-    <DataTable
-      emptyStateTextTitle={t('No pieces found')}
-      emptyStateTextDescription={t(
-        'Start by installing pieces that you want to use in your automations',
-      )}
-      emptyStateIcon={<Package className="size-14" />}
-      columns={columns}
-      filters={[
-        {
-          type: 'input',
-          title: t('Piece Name'),
-          accessorKey: 'name',
-          icon: CheckIcon,
-        },
-      ]}
-      page={{
-        data: pieces ?? [],
-        next: null,
-        previous: null,
-      }}
-      isLoading={isLoading}
-      isError={isError}
-      errorStateEntity={t('pieces')}
-      onRetry={refetchPieces}
-      toolbarButtons={[
-        <CustomizeSelectorDialog key="customize" isEnabled={isEnabled} />,
-        <DownloadPiecesReportButton key="download-report" />,
-        <SyncPiecesButton key="sync" />,
-        <InstallPieceDialog
-          key="install"
-          onInstallPiece={() => refetchPieces()}
-          scope={PieceScope.PLATFORM}
-        />,
-      ]}
-      virtualizeRows={true}
-      hidePagination={true}
-    />
-  );
-};
-
-const PlatformPiecesPage = () => {
-  const { platform } = platformHooks.useCurrentPlatform();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const activeTab = (searchParams.get('tab') as TabValue) || 'pieces';
-
-  const setTab = (tab: TabValue) => {
-    const newParams = new URLSearchParams(searchParams);
-    if (tab === 'pieces') {
-      newParams.delete('tab');
-    } else {
-      newParams.set('tab', tab);
-    }
-    setSearchParams(newParams, { replace: true });
-  };
-
   return (
     <>
       <DashboardPageHeader
-        description={t('Manage the pieces that are available to your users')}
         title={t('Pieces')}
+        description={t('Manage the pieces that are available to your users')}
       />
-      <div className="mx-auto w-full flex flex-col flex-1 min-h-0">
-        {!platform.plan.managePiecesEnabled && (
-          <div className="px-4 shrink-0">
-            <LockedAlert
-              title={t('Control Pieces')}
-              description={t(
-                "Show the pieces that matter most to your users and hide the ones you don't like.",
-              )}
-              button={
-                <RequestTrial
-                  featureKey="ENTERPRISE_PIECES"
-                  buttonVariant="basic"
-                />
-              }
-            />
-          </div>
+      <PiecesLockedBanner
+        message={t(
+          "Showing and hiding pieces needs a higher plan. You can browse the catalog, but changes won't stick.",
         )}
-        <Tabs
-          value={activeTab}
-          onValueChange={(v) => setTab(v as TabValue)}
-          className="flex flex-col flex-1 min-h-0 min-w-0"
-        >
-          <TabsList
-            variant="outline"
-            className="border-b w-full rounded-none justify-start shrink-0"
-          >
-            <TabsTrigger variant="outline" value="pieces">
-              <Puzzle className="size-4 mr-2" />
-              {t('Pieces')}
-            </TabsTrigger>
-            <TabsTrigger variant="outline" value="piece-sets">
-              <Layers className="size-4 mr-2" />
-              {t('Piece Sets')}
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent
-            value="pieces"
-            className="flex-1 min-h-0 flex flex-col mt-0 min-w-0"
-          >
-            <PiecesListTab />
-          </TabsContent>
-          <TabsContent
-            value="piece-sets"
-            className="flex-1 min-h-0 flex flex-col mt-0 min-w-0"
-          >
-            <PieceSetsTab />
-          </TabsContent>
-        </Tabs>
-      </div>
+      />
+      <DataTable
+        emptyStateTextTitle={t('No pieces found')}
+        emptyStateTextDescription={t(
+          'Start by installing pieces that you want to use in your automations',
+        )}
+        emptyStateIcon={<Package className="size-14" />}
+        columns={columns}
+        filters={[
+          {
+            type: 'input',
+            title: t('Piece Name'),
+            accessorKey: 'name',
+            icon: CheckIcon,
+          },
+        ]}
+        page={{
+          data: pieces ?? [],
+          next: null,
+          previous: null,
+        }}
+        isLoading={isLoading}
+        isError={isError}
+        errorStateEntity={t('pieces')}
+        onRetry={refetchPieces}
+        toolbarButtons={[
+          <CustomizeSelectorDialog key="customize" isEnabled={isEnabled} />,
+          <DownloadPiecesReportButton key="download-report" />,
+          <SyncPiecesButton key="sync" />,
+          <InstallPieceDialog
+            key="install"
+            onInstallPiece={() => refetchPieces()}
+            scope={PieceScope.PLATFORM}
+          />,
+        ]}
+        virtualizeRows={true}
+        hidePagination={true}
+      />
     </>
   );
 };
 
-PlatformPiecesPage.displayName = 'PlatformPiecesPage';
-export { PlatformPiecesPage };
-
 function shouldShowOauth2SettingForPiece(piece: PieceMetadataModelSummary) {
   const pieceAuth = Array.isArray(piece.auth)
     ? piece.auth.find((auth) => auth.type === PropertyType.OAUTH2)
diff --git a/packages/web/src/app/routes/platform/setup/pieces/piece-sets/piece-sets-tab.tsx b/packages/web/src/app/routes/platform/setup/pieces/piece-sets/piece-sets-tab.tsx
index c71657c15c2a..09c0237daa64 100644
--- a/packages/web/src/app/routes/platform/setup/pieces/piece-sets/piece-sets-tab.tsx
+++ b/packages/web/src/app/routes/platform/setup/pieces/piece-sets/piece-sets-tab.tsx
@@ -14,6 +14,8 @@ import {
 import { useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
+import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
+import { PiecesLockedBanner } from '@/app/routes/platform/setup/pieces/pieces-locked-banner';
 import {
   CURSOR_QUERY_PARAM,
   DataTable,
@@ -167,6 +169,13 @@ export const PieceSetsTab = () => {
 
   return (
     <>
+      <DashboardPageHeader
+        title={t('Piece Sets')}
+        description={t(
+          'Group pieces into sets and choose which projects can use each one',
+        )}
+      />
+      <PiecesLockedBanner message={t('Piece sets need a higher plan.')} />
       <DataTable
         emptyStateTextTitle={t('No piece sets found')}
         emptyStateTextDescription={t(
diff --git a/packages/web/src/app/routes/platform/setup/pieces/pieces-locked-banner.tsx b/packages/web/src/app/routes/platform/setup/pieces/pieces-locked-banner.tsx
new file mode 100644
index 000000000000..4b269e000fa6
--- /dev/null
+++ b/packages/web/src/app/routes/platform/setup/pieces/pieces-locked-banner.tsx
@@ -0,0 +1,20 @@
+import { FeatureBanner } from '@/app/components/feature-banner';
+import { platformHooks } from '@/hooks/platform-hooks';
+
+export function PiecesLockedBanner({ message }: PiecesLockedBannerProps) {
+  const { platform } = platformHooks.useCurrentPlatform();
+
+  if (platform.plan.managePiecesEnabled) {
+    return null;
+  }
+
+  return (
+    <div className="px-6 shrink-0 pb-4">
+      <FeatureBanner message={message} />
+    </div>
+  );
+}
+
+export type PiecesLockedBannerProps = {
+  message: string;
+};
diff --git a/packages/web/src/app/routes/platform/usage/index.tsx b/packages/web/src/app/routes/platform/usage/index.tsx
deleted file mode 100644
index 8152d708cb1f..000000000000
--- a/packages/web/src/app/routes/platform/usage/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { t } from 'i18next';
-import { Info } from 'lucide-react';
-
-import { BillingPageShell } from '@/app/components/billing-page-shell';
-import { Separator } from '@/components/ui/separator';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { FeatureUsageCards, ProjectsUsageTable } from '@/features/billing';
-
-export default function Usage() {
-  return (
-    <BillingPageShell
-      lockTitle={t('Unlock Usage Page')}
-      errorMessage={t('Failed to load usage information')}
-    >
-      {({ platform, info }) => (
-        <div className="flex w-full flex-col gap-4 p-6">
-          <div className="flex flex-col gap-1">
-            <div className="flex items-center gap-1.5">
-              <h1 className="text-xl font-medium">{t('Usage')}</h1>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Info className="size-3.5 text-muted-foreground cursor-help" />
-                </TooltipTrigger>
-                <TooltipContent side="right" className="max-w-[240px]">
-                  <p className="text-sm">
-                    {t('Usage figures may be a few minutes out of date.')}
-                  </p>
-                </TooltipContent>
-              </Tooltip>
-            </div>
-            <div className="text-sm text-muted-foreground">
-              {t('Track your workspace usage across your plan limits.')}
-            </div>
-          </div>
-          <Separator />
-          <FeatureUsageCards platformSubscription={info} />
-          <Separator />
-          <ProjectsUsageTable platformId={platform.id} />
-        </div>
-      )}
-    </BillingPageShell>
-  );
-}
diff --git a/packages/web/src/features/platform-admin/hooks/ai-tool-config-hooks.ts b/packages/web/src/features/platform-admin/hooks/ai-tool-config-hooks.ts
index 19c639fd87a9..1dba7d627930 100644
--- a/packages/web/src/features/platform-admin/hooks/ai-tool-config-hooks.ts
+++ b/packages/web/src/features/platform-admin/hooks/ai-tool-config-hooks.ts
@@ -1,10 +1,14 @@
 import {
+  ApEdition,
+  ApFlagId,
   CreateAiToolConfigRequest,
   UpdateAiToolConfigRequest,
 } from '@activepieces/shared';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
+import { flagsHooks } from '@/hooks/flags-hooks';
+
 import { aiToolConfigApi } from '../api/ai-tool-config-api';
 
 export const aiToolConfigKeys = {
@@ -12,11 +16,14 @@ export const aiToolConfigKeys = {
 };
 
 export const aiToolConfigQueries = {
-  useAiToolConfigs: () =>
-    useQuery({
+  useAiToolConfigs: () => {
+    const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
+    return useQuery({
       queryKey: aiToolConfigKeys.all,
       queryFn: () => aiToolConfigApi.list(),
-    }),
+      enabled: edition !== ApEdition.COMMUNITY,
+    });
+  },
 };
 
 export const aiToolConfigMutations = {
diff --git a/packages/web/src/styles.css b/packages/web/src/styles.css
index fcc8a13e3579..a061eefae4fa 100644
--- a/packages/web/src/styles.css
+++ b/packages/web/src/styles.css
@@ -157,6 +157,8 @@
   --radius-xs: calc(var(--radius) - 8px);
   --radius-xss: calc(var(--radius) - 10px);
 
+  --container-page-band: 1198px;
+
   --text-xss: 0.65rem;
   --text-3xl: 1.75rem;
   --text-4xl: 2rem;

From 0d5e080078efc4e3ad4a6f1772e9782216b2620d Mon Sep 17 00:00:00 2001
From: Ahmad Tash <144666528+AhmadTash@users.noreply.github.com>
Date: Wed, 23 Sep 2026 11:58:27 +0300
Subject: [PATCH 3/4] feat(web): show sample data on the pages a plan has not
 unlocked (#15564)

---
 ...fifteen-pages-derived-from-one-registry.md |  38 +-
 .../engineering/web-feature-anatomy.md        |  54 ++-
 .../ee-platform-plans-billing.md              |   6 +-
 .../web/src/app/components/feature-sample.tsx | 108 +++++
 .../web/src/app/routes/agents/id/index.tsx    |   2 +-
 packages/web/src/app/routes/agents/index.tsx  |   2 +-
 .../web/src/app/routes/platform-routes.tsx    |  51 +-
 .../src/app/routes/platform/admin-pages.ts    | 112 +++++
 .../infra/event-destinations/index.tsx        |  98 ++--
 .../src/app/routes/platform/sample-data.ts    | 216 +++++++++
 .../platform/security/api-keys/index.tsx      | 190 ++++----
 .../platform/security/audit-logs/index.tsx    | 436 +++++++++---------
 .../routes/platform/security/embed/index.tsx  | 123 +++--
 .../platform/security/project-role/index.tsx  |  37 +-
 .../security/secret-managers/index.tsx        |  68 ++-
 .../routes/platform/security/sso/index.tsx    | 226 +++++----
 .../platform/setup/connections/index.tsx      |  60 +--
 .../routes/platform/setup/templates/index.tsx | 112 ++---
 .../test/app/billing/feature-gating.test.tsx  |  23 +
 19 files changed, 1220 insertions(+), 742 deletions(-)
 create mode 100644 packages/web/src/app/components/feature-sample.tsx
 create mode 100644 packages/web/src/app/routes/platform/sample-data.ts

diff --git a/brain/knowledge/decisions/000035-platform-admin-is-fifteen-pages-derived-from-one-registry.md b/brain/knowledge/decisions/000035-platform-admin-is-fifteen-pages-derived-from-one-registry.md
index 1bc5ab820d32..a36376c7cd0a 100644
--- a/brain/knowledge/decisions/000035-platform-admin-is-fifteen-pages-derived-from-one-registry.md
+++ b/brain/knowledge/decisions/000035-platform-admin-is-fifteen-pages-derived-from-one-registry.md
@@ -173,13 +173,20 @@ fade** read as one surface but revealed only the top of a page and cut a form mi
 found products split between crisp-and-labelled and fade-an-empty-shell, and none sampling a form, so
 there is no direct precedent to defer to here.
 
-**The sample content is live, not inert.** The earlier call here was the opposite: `pointer-events: none`
-on the region, filters and pagination disabled, one live CTA, on the grounds that wiring the controls to
-the fixtures means a second implementation of every filter for customers who have not paid. That is
-reversed. The fixtures already live in the browser, so client-side filtering and sorting of eight rows is
-the cheap half, and a disabled toolbar teaches nobody what the feature does. The cost accepted is that a
-locked write control looks completely ordinary until it is pressed: a person will occasionally press Save
-expecting it to save. A visibly disabled Save was the alternative and it cannot show what the plan buys.
+**The sample content is inert, and that is load bearing.** An "explore freely, upgrade on write" version
+was designed, where filters filter and sorting sorts against the fixtures and only a write is refused. It
+was not built. What ships ghosts the whole region at a quarter opacity and refuses every interaction,
+because the fixtures are rendered by the real components: the controls in there are the live ones, wired
+to the live mutations.
+
+**Ghosting is not withholding.** `LockedFeatureGuard` returned a teaser *instead of* its children, so
+nothing was mounted. `FeatureSample` mounts them and dims them, which is what makes the preview worth
+looking at and also what puts live controls in the page. `aria-hidden` and `pointer-events: none` do not
+remove anything from the tab order, so Tab reached those controls and Enter activated them, and a
+portalled dialog then rendered *outside* the ghosted subtree at full opacity. `inert` is the attribute that
+actually removes a subtree from focus, pointer and accessibility handling; `pointer-events: none` stays
+underneath it only as the fallback for browsers without it. Treat the server as a backstop you have not
+verified rather than one you have, and never reintroduce interactivity here without re-deciding this.
 
 Sample data is **generated in the browser and never crosses the API**. A locked page skips its plan-gated
 query outright rather than letting it answer 402, and the endpoints keep refusing. Serving fabricated rows
@@ -313,9 +320,12 @@ guard before giving any surface an overlay.
 that already exist, so the diff is reviewable as pure refactor with identical screenshots, and the
 derivation is proven against the IA everyone knows before the data changes under it.
 
-**The quiet Community treatment retires `RequestTrial` from platform admin**, which is currently the only
-in-product path from a self-hosted install to sales, feeding `activepieces.com/sales` from 26 feature keys.
-That is a growth decision as much as a design one and was taken with that understood.
+**The quiet Community treatment was reversed in review: `RequestTrial` stays.** Retiring it would have
+closed the only in-product path from a self-hosted install to sales, feeding `activepieces.com/sales` from
+26 feature keys, and doing that inside a design refactor made it a growth decision smuggled in as one. Both
+locked surfaces render it again on Community, gated by `showContactSales`, which only the billing shell
+sets to `false` exactly as before. Each registry teaser therefore carries the `featureKey` the sales page
+expects; a surface with no teaser shows no form rather than one tagged with the wrong feature.
 
 Old deep links must redirect. 22 items becoming 15 means eleven redirects on top of the five
 that exist, and `docs/docs.json` mirrors this IA across about twenty `admin-guide` pages, so a rename lands
@@ -393,9 +403,11 @@ sign-in enforcement returns early on that edition anyway.
 web app already calls it for the test-destination flow. Reuse it there; only the other locked surfaces need
 fixtures written by hand.
 
-**Community keeps its quiet copy inside the loud treatment.** It sees the same sample content, but the
-strip names the feature as Enterprise with a docs link in place of the upgrade button, so the open-source
-product still avoids a sales button on a dozen pages.
+**Community gets its own call to action inside the loud treatment.** It sees the same sample content, but
+where paid editions show `Upgrade to {tier}` and an `Included with the {tier} plan and above.` footer,
+Community gets Contact Sales above a docs link, because a self-hosted install has no plan to buy in-app.
+The tier is named only on the paid branch, so a Community reader is told what the feature is but never
+which plan it belongs to.
 
 **Nothing renders the full-page teaser once all nine are sampled.** `LockedFeatureGuard` and the page-level
 `FeatureTeaser` lose their last callers in platform admin, and `overlay: true` in the registry is replaced
diff --git a/brain/knowledge/engineering/web-feature-anatomy.md b/brain/knowledge/engineering/web-feature-anatomy.md
index 3067340f59cd..8f933b3efd0d 100644
--- a/brain/knowledge/engineering/web-feature-anatomy.md
+++ b/brain/knowledge/engineering/web-feature-anatomy.md
@@ -50,6 +50,8 @@ Routes are registered in `app/routes/project-routes.tsx`, composed from `Project
 
 The page component itself is `React.lazy()`-imported. `requiredPermissions` takes a single `Permission` or an array. Guards live in `app/guards/` — `permission-guard.tsx`, `flag-route-guard.tsx`, `project-route-wrapper.tsx`.
 
+The platform-admin tree is a different shape and does not use any of that. `app/routes/platform-routes.tsx` is a flat array of hand-written entries, each repeating `PlatformLayout` > `PageTitle` > `SuspenseWrapper` by hand, with no React Router layout route and no `Outlet`. The admin check is not a guard in `app/guards/` either: `useIsPlatformAdmin()` is called inside `PlatformLayout` itself, which renders `<Navigate to="/" />` when it fails. So the guard holds only because every single route remembers to wrap in that layout, and a new admin route that forgets it is reachable by any logged-in user. The nav is a literal in one function, `PlatformSidebar` in `app/components/sidebar/platform/index.tsx`, so a route and its nav entry are edited in two unconnected places.
+
 ## Flags, gating, translations
 
 - Feature flags: `flagsHooks.useFlag()`, or `<FlagGuard>` / `flag-route-guard.tsx` for whole routes.
@@ -68,10 +70,17 @@ changes the code under all three at once. Comparing editions and comparing branc
 gesture, and the give-away is a UI that looks a release behind on every port at once rather than on one.
 Read the edition off `/api/v1/flags`, not off the port you think you started.
 
-Verify with `npx turbo run lint --filter=web`, or `npm run lint-dev` for the whole repo.
+Verify with `npx turbo run lint --filter=web`, or `npm run lint-dev` for the whole repo. Run it from
+`packages/web` or through turbo, never `npx eslint --fix <paths>` from the repo root: the root resolves a
+different config, reports thousands of errors against files it should not be linting, and `--fix` rewrites
+every one it touches. One such run reformatted 84 files that the change had never touched, and the only
+way back was to stash the handful of intended edits, `git checkout` the package, and restore them.
 
 ## Gotchas
 
+- **A disabled TanStack query keeps `isPending: true` forever, so a skeleton driven by it never resolves.** `enabled: false` means "has no data and is not fetching", and `isPending` only reports the first half — the spinner spins for the life of the page. Drive loading UI off `isLoading` (`isPending && isFetching`), which is false while disabled. This bites hardest on the plan-gated queries the repo requires an `enabled: platform.plan.<flag>` on: every one of them is permanently pending for a platform without the feature. Also decide what the surface shows in that state — a count rendered from `data ?? 0` reads as a real zero, when the honest answer is that the feature is not on the plan.
+- **The `showcase/*.mp4` upsell videos on the CDN are all from 2024 and show the retired Admin Console.** `cdn.activepieces.com/videos/showcase/` holds seven of them (projects, templates, pieces, appearance, api-keys, alerts, flow-issues), last touched March-June 2024, and every frame is the old sidebar, the old tables and the old purple buttons. `FeatureTeaser` renders whatever `videoUrl`/`lockVideoUrl` it is handed, and the Templates locked page still passes `templates.mp4`, so a customer on the paywall watches a product that no longer exists. Do not reach for these when building an upsell surface — either reshoot or leave the video out. Pull a frame with ffmpeg before trusting any CDN asset whose name sounds right.
+- **`Button` tightens its own horizontal padding when a direct child is an `<svg>`, and the animated icons defeat it.** Every size variant carries a `has-[>svg]:px-*` pair (`sm` is `px-2.5 has-[>svg]:px-2`, so 10px normally and 8px with an icon) to stop an icon button reading as over-padded. The components in `components/icons/` wrap their `motion.svg` in a `<div>` to own the hover handlers, so `has-[>svg]` never matches and any `AnimatedIconButton` silently keeps the wider padding. Two buttons meant to look alike will differ by 2px a side the moment one uses a bare lucide icon and the other an animated one, so check the computed padding before assuming a diff caused it. To match the animated width deliberately, pass `cn('has-[>svg]:px-2.5', className)` — `Button` runs `cn(buttonVariants({ ..., className }))`, so tailwind-merge drops the variant's own value rather than leaving a specificity fight with `:has()`.
 - **A `packages/web` test runs in the `node` environment by default, so importing anything that touches `window` at module load fails at collection.** `vitest.config.ts` sets `environment: 'node'`; ~26 suites opt into a DOM with a `// @vitest-environment jsdom` docblock on line 1. The failure is a bare `ReferenceError: window is not defined` pointing at a *transitive* import (`embed-provider.tsx` reading `window.opener`, reached via `@/features/projects`), not at the test — so read the stack, don't hunt in your own file. Missing the docblock is why `chunk-reducer.test.ts` was red for as long as it was: CI did not run the web suite at all, so nothing surfaced it.
 - **Clicking through a Radix/cmdk component in a jsdom test needs the React root mounted on `document.body`, or the click never reaches React.** `createRoot(container)` attaches React's delegated listeners to `container`, but Radix `Popover` portals its content to `document.body` — a sibling of a nested root div — so synthetic events bubble body-ward, away from the listener. Items are queryable in the DOM and everything *looks* wired: the handler simply never runs, the assertion passes vacuously, and nothing tells you. `createRoot(document.body)` puts the portal inside the root container and the same dispatch fires. Three shims are needed first, each surfacing as an unrelated-looking error: `ResizeObserver` (cmdk, at mount), `Element.prototype.scrollIntoView` (cmdk, on open), and `PointerEvent` (absent in jsdom — alias it to `MouseEvent`). **And a throw inside an event handler is not a test failure.** React error boundaries only catch render/lifecycle errors, so an event-handler `TypeError` is re-thrown outside the act() call: `expect(...).toThrow()` sees nothing, the suite reports *passed*, and the only trace is vitest's `Unhandled Errors` block after the summary — which is easy to scroll past and which a `grep` for `passed|failed` hides completely. Grep the run for `Unhandled` too, and read that block as a failure. This is exactly how a crash in the multi-select property stayed invisible to a 101/101-green suite.
 - **A panel that hand-rolls its draft state gets none of the form validation the rest of the app assumes.** react-hook-form + `zodResolver` is what surfaces `formErrors.required` and friends; a `useState` draft with a Save button has no schema, so the usual mistake is to *substitute* a fallback for an empty field (`name.trim().length > 0 ? name.trim() : existing.name`) instead of rejecting it. That reads as a silent failure: the request succeeds, the old value returns, and nothing explains why. When a surface cannot use react-hook-form, derive the invalid state, render the message next to the field, and disable the submit — do not paper over the empty value. Bit the AI Center key-detail panel while its sibling connect dialog, on a zod resolver, was correct. The second failure mode is that such a draft never resyncs: seeded once from a prop, it outlives any refetch of the row it mirrors, so a mutation that changes the row without changing its `key` (the AI Center replaces a key's credentials, and the panel is keyed on the config id) leaves the draft describing the old row — phantom "unsaved changes", and a save that reverts what the mutation just wrote. Bump a version segment into the `key` at the site that performs the mutation rather than diffing props inside the panel: TanStack Query hands back a new object identity on every refetch, so a naive identity comparison discards the admin's unsaved edits on a window refocus.
@@ -84,11 +93,13 @@ Verify with `npx turbo run lint --filter=web`, or `npm run lint-dev` for the who
 
 - **`api.isApError` throws on any error that has no response.** It reads `(error.response?.data as ApErrorParams).code` — optional-chaining the `response` but then dereferencing `.code` on the `undefined` that comes back, so a network failure, a timeout, or a CORS rejection raises a `TypeError` from inside whatever error handler called it. `queryClient`'s `mutationCache.onError` calls it unguarded on every mutation error, so a mutation that fails offline crashes there rather than showing its toast. When you need the `ApErrorParams` code on a path that can see transport failures, read it defensively (`(error.response?.data as ApErrorParams | undefined)?.code`) instead of reaching for the helper.
 
+- **`refetch()` ignores `enabled`, so a retry handler walks straight through a plan gate.** `enabled: platform.plan.<flag>` stops the automatic fetch and nothing else; a manual `refetch()` fires the request whatever the flag says. A combined retry is where this bites, because the handler usually refetches every query the section draws from: on Connections the overview's Needs-attention retry called `refetchGlobal()` unconditionally, so a platform without Global Connections that hit Retry on an unrelated *project*-connections failure sent a guaranteed 402 to the gated endpoint. Nothing showed, since the error state was already gated on the flag, so the only trace is the failed request and the Sentry report behind it. The fix that generalises is to retry only what actually failed (`...(isError ? [refetch()] : [])`) rather than everything the section reads: the already-gated error flag then keeps the gated refetch unreachable, and a healthy query stops being re-requested because its neighbour broke. Read the repo's `enabled: platform.plan.<flag>` rule as covering both halves, the declaration and every hand-written refetch.
 - **`isLoading` is false while a failed query is retrying, so a retry button gated on it looks dead.** React Query sets `isLoading = isPending && isFetching`; once a query has errored its status is `error`, not `pending`, so `refetch()` raises only `isFetching`. Any skeleton or spinner keyed on `isLoading` therefore never fires on a retry — the user clicks and nothing visibly happens until the request resolves. `DataFetchErrorState` handles this itself rather than pushing `isFetching` out to every caller: it awaits whatever `onRetry` returns and drives the `Button`'s own `loading` prop, which is also the only option that works on the surfaces that have no skeleton branch to reuse. A retry wired to `invalidateQueries` needs the promise returned (`return Promise.all([...])`), or the spinner flashes for a single tick.
 
 - **`useWarnBeforeLosingChanges`'s `standDown` ref has to be set *after* the destructive request succeeds, not before it.** `components/custom/leave-without-saving.tsx` guards a dirty panel against navigation and `beforeunload`; `standDown` is how a deliberate exit (deleting the thing being edited) avoids prompting on its own way out. Setting it before `await`ing the delete disarms the guard for the whole request, so a refresh or tab close mid-flight discards the draft silently — and if the delete then fails, the row is still there and the edits are not. A `finally` that restores the ref does not help: the window has already passed. The ordering only works if the mutation and the navigation are separable, so the panel can stand down between them — keep the delete prop to the mutation alone and let the panel call its own `onBack`, rather than handing it one callback that does both.
 - **`Button`'s `keyboardShortcut` does not stop firing while the button is loading, and its listener lags a render behind.** Two separate gaps in `components/ui/button.tsx`. The element gets `disabled={disabled || loading}`, but `useKeyboardShortcut` was handed the raw `disabled` prop, so a button mid-request still ran its handler on ⌘/Ctrl+key — latent for years because every caller before the AI Center Save button was a non-loading `variant="outline"` button. Fixing that still leaves a window: the listener is registered in a passive effect, which runs after paint, so between a click and the effect re-running the old closure keeps `disabled=false`. Anything whose handler must not run twice (a mutation) needs its own guard set synchronously inside the handler — a ref, not a `disabled` prop — because no prop can close an effect-timing window. Separately, `Shortcut` renders in `text-muted-foreground`, which is invisible on a filled button; `Button` now tints it per variant, so pass nothing.
 - **Exported types and constants belong at the *end* of the file**, after the components and logic. Reading a file should start with what it does, not its type declarations.
+- **The lock icon on a platform-admin nav item is decorative, and paid gating is done four different ways behind it.** `ApSidebarItem` renders a `LockKeyhole` when `item.locked`, but the click handler ignores `locked` entirely and navigates anyway, so the real gate is always whatever the destination page does. What that page does is not consistent: twelve pages wrap their whole body in `LockedFeatureGuard`, Pieces instead keeps the page fully usable under a `LockedAlert` banner, the branding fields in `setup/general` only set `disabled` with no explanation and no upgrade path at all, and AI Center gates on `PlatformRole.ADMIN` rather than a plan flag (`aiProvidersEnabled` gates the connect button inside it, not the page). Two of the thirteen locked nav items have no in-page hook at all. So reading the sidebar tells you a feature is paid but not what the user will actually meet, and "remove the locks" is a smaller change than it looks while "make gating consistent" is a much larger one. The active-item check is `pathname.startsWith(item.to)` with no `?tab=` awareness, so folding pages into tabs needs the `isActive` override that prop already offers and the platform sidebar never passes.
 - **The web has two independent "something went wrong" surfaces, and they cover different failures.** `GlobalErrorBoundary` (`app/components/global-error-boundary.tsx`) is a React error boundary: it catches *render* crashes and replaces the page with a reload/go-home fallback. It structurally cannot see a React Query failure — a failed query is stored as state, not thrown during render, unless the query opts into `throwOnError` or Suspense. Nothing global covers that async gap any more: a failed primary query is reported by the surface itself, through `DataFetchErrorState`. The two landed independently (the query surface first, in #12476 for tables; the boundary later, in #13743) and were never calibrated against each other, so for a long stretch a single 404 got a *blocking modal with raw JSON* while an actual app crash got a friendly reload button. Keep that ordering right: a failed fetch on a page that still renders is an in-place placeholder, a dead render tree is the full-page fallback. A modal is only correct when the error payload is something the user must read and copy — flow publish showing the trigger piece's stderr (`flow-hooks.tsx`) is the one case that still earns `ApErrorDialog`.
 - **`FriendlyErrorView` is the one renderer for a `FriendlyPieceError` — reach for it before hand-rolling a message line.** `app/builder/data-display/friendly-error-view.tsx` already turns the parsed payload into a status-keyed headline and hint (401 → "Authentication failed" + "Try reconnecting the account…"), an `HTTP {status}` badge, a labelled message block that prefers `apiMessage` over `message`, and its own `Technical Details` disclosure; it is wired to the run-details and test-step panels. For an auth failure the status-keyed *hint* is the part that actually prevents a misdiagnosis — naming whose credentials to fix beats quoting the third party's own sentence, which is what made a rejected Linear key read to a customer as their Activepieces session expiring (Pylon 5833). Three things make it non-trivial to drop into `ApErrorDialog` and all three are local fixes: it renders a second `Technical Details` next to the dialog's own, its disclosure shows `raw ?? payload` so it drops `standardOutput` (the piece's stderr, often the useful half of a failed trigger enable), and `useChangeFlowStatus` has only `flowId` so `pieceDisplayName` falls back to "What the service said". Fix those rather than growing a parallel renderer — a second one means the `message`-is-JSON trap (see *building pieces*) has to be fixed twice.
 - **Stubbing Radix `Select` in a jsdom test: render each `SelectItem` as a button that calls the real `onValueChange`, and never match a click by button text alone.** The component under test passes `onValueChange` to `Select`, so a stub that captures it in a `vi.hoisted` box and has `SelectItem` call it with its own `value` gives you the real state update without Radix's portal, pointer and `ResizeObserver` machinery. The trap is finding the button afterwards: the dropdown items and the UI they control often carry the same words (a Text/Image type picker next to chips whose badge also reads "Text"), and a `textContent` match takes whichever comes first in the DOM — silently clicking the dropdown item and asserting a no-op. Match on something structural (`button[title="Model Type"]` inside the chip) and give each helper a name that says which one it clicks. Also note `expect(value, 'message')` — valid vitest — is rejected by the repo's `vitest/valid-expect` lint rule, so put the identifying detail in the helper name rather than the assertion message.
@@ -106,13 +117,50 @@ Verify with `npx turbo run lint --filter=web`, or `npm run lint-dev` for the who
 - **`--mode=cloud` also floods the terminal with `[vite] http proxy error: /ingest/... ETIMEDOUT 127.0.0.1:3000`.** The mode only redirects the API (`API_BASE_URL` → `https://cloud.activepieces.com` in `lib/api.ts`); PostHog still posts to the *relative* `api_host: '/ingest'` (a same-origin reverse proxy so ad blockers don't drop ingestion — `providers/telemetry-provider.tsx`, mirrored in prod by the `fastifyHttpProxy` in `server.ts`). Vite proxies `/ingest` to `127.0.0.1:3000`, which isn't running. Cloud flags also turn telemetry *on* (`TELEMETRY_ENABLED` + `EDITION=cloud`), unlike a local CE backend — so posthog-js keeps polling `/ingest/flags` and flushing `/ingest/e` every few seconds. Harmless, but note the same setup sends real dev clicks to production PostHog whenever `/ingest` does resolve; the clean fix is skipping `posthog.init` under `import.meta.env.DEV`.
 - **A motion `layout` animation fired from inside a mutation's `.then()` fast-forwards and reads as a jump — defer the state write two frames.** Motion measures the FLIP offset at the commit that reorders the DOM, then tweens from the first animation frame. When the write happens synchronously after a mutation resolves, that frame arrives tens of ms late (the same commit is refetching a table, tearing down a dialog, re-rendering the page), motion sees a huge time delta and skips most of the tween: a rail row travelling 228px was measured collapsing to 103px in one 6ms frame, then limping through 13 frames. Wrapping the write in `requestAnimationFrame(() => requestAnimationFrame(write))` lets the mutation's re-render settle first, and the same interaction then gives up only 7.6% on the first frame and eases properly. Two traps when checking this: driving the write yourself from a console eval runs on a *quiet* main thread and always looks smooth, so it proves nothing — reproduce through the real UI action; and a route change in the same tick (creating a flow navigates straight to the builder) interrupts the projection outright, which no deferral fixes.
 - **`projectCollection` runs on its own private `QueryClient`, fetches once, and never refetches — so any server-derived field on `ProjectWithLimits` is frozen at page load.** `features/projects/stores/project-collection.ts` builds the collection with `queryCollectionOptions({ queryKey: ['projects'], queryClient: collectionQueryClient })`, where `collectionQueryClient` is a `new QueryClient()` local to that module, *not* the app's. So `invalidateQueries(['projects'])` from anywhere else is a no-op, there is no `refetchOnWindowFocus`, and a field like `analytics.lastFlowUpdated` keeps its page-load value until something calls `projectCollectionUtils.refetchProjects()`. Two ways to keep such a field live, and the choice matters: `refetchProjects()` refetches every project (fine for a rare event like a piece-set change — its four existing callers — but wrong on a hot path such as the builder's per-edit autosave), or `projectCollection.utils.writeUpdate({ ...project, ... })` patches the row locally with no request, letting the next natural refetch restore server truth. Note `projectCollection.update()` is a *different* thing: it routes through `onUpdate` and POSTs, and its field allowlist silently drops anything not named there. **A local patch of a server-side *aggregate* also has to reproduce that aggregate's semantics, or it desyncs in two directions.** `analytics.lastFlowUpdated` is a `MAX(flow.updated)` over living flows, so: stamp the value from the mutation response, never `new Date()` (a skewed browser clock reorders against every server-supplied sibling); write only when the incoming value is *newer*, because concurrent mutations on one project resolve out of timestamp order — builder autosaves, and the bulk paths in `use-automations-mutations.ts` that fan out `flowIds.map(id => flowsApi.update(...))` — and an unconditional write lets a late older response move the row backwards; and when the aggregate can *decrease*, a local patch cannot express it at all, so refetch instead (deleting the newest flow lowers the MAX to a value only the server knows — cheap there because deletes are user-initiated, unlike autosave). And if the patch is *deferred* at all — it is here, by two frames, so the reorder animation does not fast-forward — a refetch that lands inside that window must invalidate it, or the pending write reapplies the pre-refetch value over the authoritative one and the newer-than guard happily waves it through; stamp each scheduled write with a generation the refetch bumps.
-- **Never format `packages/web` with bare `prettier` — the web formatting contract lives in the eslint rule, not in `.prettierrc`.** Root `.prettierrc` sets only `singleQuote`, while `packages/web/.eslintrc.json` configures `prettier/prettier` with `trailingComma: "all"`, `printWidth: 80`, `tabWidth: 2`. The repo pins prettier **2.8.4**, whose default `trailingComma` is `es5` — so `npx prettier --write` on a web file silently **strips the trailing commas out of every multi-line function call it touches**, including lines you never edited, turning a 15-line change into a 130-line diff that reviewers have to read past. Format with `npx turbo run lint --filter=web --force -- --fix` instead; that is also what `npm run lint-dev` runs. If you already ran bare prettier, `git checkout` the file and redo the edit rather than trying to hand-restore the commas.
+- **Never format `packages/web` with bare `prettier` — the web formatting contract lives in the eslint rule, not in `.prettierrc`.** Root `.prettierrc` sets only `singleQuote`, while `packages/web/.eslintrc.json` configures `prettier/prettier` with `trailingComma: "all"`, `printWidth: 80`, `tabWidth: 2`. The repo pins prettier **2.8.4**, whose default `trailingComma` is `es5` — so `npx prettier --write` on a web file silently **strips the trailing commas out of every multi-line function call it touches**, including lines you never edited, turning a 15-line change into a 130-line diff that reviewers have to read past. Format with `npx turbo run lint --filter=web --force -- --fix` instead; that is also what `npm run lint-dev` runs. If you already ran bare prettier, `git checkout` the file and redo the edit rather than trying to hand-restore the commas. **And `lint-dev` repairs rather than reports, so a green run is not a verification on its own.** It runs `--fix`, so running it *after* `git commit` writes the correction into the working tree and leaves the broken content in the commit you push: the terminal says 33 tasks successful while CI fails on the pushed code. Run it before staging, and treat `git status` immediately afterwards as the real check. Clean tree means lint found nothing; a modified file means it just fixed something that is not in your commit.
 - **`packages/web`'s lint script only globs `src/**`, so nothing under `packages/web/test/` is ever linted** — not by CI's `lint` job, not by `npm run lint-dev`. Running `npx eslint 'test/**/*.{ts,tsx}'` from `packages/web` today reports 21 errors nobody has seen, so a new web test needs a manual eslint pass or it ships with errors. Most common trap: `testing-library/render-result-naming-convention` fires on any local helper whose name merely *starts with* `render` even when testing-library is not involved — renaming `render` to `renderTabText` does not silence it, only a name that doesn't begin with `render` does. **The trap compounds with the rule that sends tests there.** `packages/web/CLAUDE.md` requires a test under `packages/web/test/`, mirroring its source path, so tests do not ship in the app bundle — but `test/` is exactly what lint does not glob. So the moment you move a test out of `src/`, it leaves the lint pass, and `npx turbo run lint --filter=web` (or `--fix`) then reports **0 errors for a file it never opened**. Seen in one session: two `prettier/prettier` errors were live in a test at `src/...`, the file was moved to `test/...`, the next `lint --fix` went green, and both errors were still there — `npx eslint 'test/**'` from `packages/web` found them. Lint the moved path directly after any such move; a green turbo run is not the check. Note the conventions pull against each other: five test files still sit under `src/` (`src/lib/test/`, `src/app/builder/data-selector/`, `src/features/projects/stores/`), which is why a new test tends to land there by precedent — those five *are* linted, which is the only reason nobody has noticed.
 - **A settings page gets its always-visible Save bar by passing `footer` to `CenteredPage`, and passing it switches the whole layout mode.** Without `footer` the page is the original `py-6` block that scrolls with the dashboard container; with it, the page becomes `h-full flex flex-col`, children move into a `ScrollArea`, and the footer pins below — so the Save button stays reachable however long the settings list grows. The wrapper around it has to be a flex child with a definite height (`flex flex-1 flex-col min-h-0` on the `<form>`), because `PlatformLayout` hands the route a `flex-1 overflow-auto` container and an `h-full` that cannot resolve just collapses. Reach for the prop rather than hand-rolling a second page shell; the six pages that omit it render byte-identically.
+- **A `DataTable` row that spans all columns must count `table.getVisibleLeafColumns()`, never the authored
+  `columns` array.** The two differ: the component prepends a select column and appends an actions column,
+  and TanStack can hide others, so the authored length overshoots what the header renders. The loading,
+  error and empty rows all render one `TableCell colSpan={...}`, and when that span is too high the table
+  gains a column with no header. Because the table is `table-layout: fixed`, that phantom column is handed
+  the leftover width, so on the platform Projects table the header covered 720px of a 1725px table and
+  stopped two thirds of the way across, then looked fine the moment a row arrived, because real per-column
+  cells override the phantom. It hid at laptop widths where the declared sizes were close to the container
+  and only looked broken on a wide screen. Fixed in `components/custom/data-table`; the trap is reaching
+  for `columns.length` again in a new spanning row.
+
+- **Platform admin screens come in two alignments, and it follows the section rather than the page.**
+  A settings screen is a centred `mx-auto max-w-[40rem]` column, a table screen is full width at the
+  container's inset, and that split predates the redesign: on `CenteredPage` the title lived inside the
+  centred column while `DashboardPageHeader` pages had a full-width one. Hoisting the title into a shared
+  shell therefore has to carry the alignment with it, or the title lands at the inset while the content
+  centres. `Security` is why the flag cannot live on the page: its API keys and Event streaming sections
+  are centred lists while Secret managers and Audit logs are full-width tables, so the header has to
+  re-align as you move between sections of one page.
+
+- **`DataTable` carries its own spacing, so a table page wants no page padding.** It brings the toolbar,
+  the filter row and the pagination footer with their insets already applied, and it is built to run edge
+  to edge inside its container. Wrapping one in `px-6 pt-6` therefore pushes the table in from its own
+  controls and opens a dead band between the page header and the toolbar. That padding belongs on the
+  surfaces that have no spacing of their own, a card grid or a form, and not on a table. Bit the Projects
+  and Users pages during the admin alignment pass, where the table was inset while its own toolbar was not.
+
+- **Those two shells carry the page's layout, not just its header, so removing a header moves the content.**
+  `CenteredPage` supplies `mx-auto` centring and a 40rem column; `DashboardPageHeader` supplies nothing, so
+  its pages run flush to the container edge. Take the header away to hoist the title somewhere shared and
+  the body keeps whichever of those it had: a `CenteredPage` body ends up centred hundreds of pixels right
+  of the new header, a table body ends up flush left of it, and the page reads as broken without any one
+  file looking wrong. Check the left edge of every converted page against its heading, not just that the
+  heading renders.
+
+- **Platform admin has two page shells that disagree, and one settings-row primitive that got cloned five times.** `DashboardPageHeader` (over `components/custom/page-header.tsx`) is `sticky top-0 z-30`, `text-base font-semibold`, full width, and respects `embedState.hidePageHeader`; `CenteredPage` is `max-w-[40rem] mx-auto py-6`, `text-xl font-medium`, and follows itself with a `Separator`. Twelve admin pages take the first, six the second, and four (billing, usage, embed, AI Center) hand-roll their own `h1` instead. Nothing marks which a new page should use, so the choice has been made per-page by whoever copied the nearest neighbour. Same story one level down: `components/custom/item.tsx` (`Item` / `ItemGroup` / `ItemTitle` / `ItemDescription` / `ItemActions`) is the intended label-left, control-right settings row and has nine call sites, eight of them in platform admin, with SSO the clearest reference. But five local re-implementations sit beside it and reuse none of it: `BillingSection` in `billing/index.tsx`, `HealthCard` plus `HealthRowItem` in `infra/health/components/system-health-tab.tsx` (a near-clone of `Item` + `ItemGroup` + `ItemSeparator`), `SectionHeader` under `setup/ai/components/`, an open-coded `Item variant="outline"` in `setup/general/danger-zone-section.tsx`, and `AutoIncludePill` in `piece-set-details-page.tsx`. Reach for `Item` before writing a row, and check whether the clone next to you is one of those five. The real outlier is `appearance-section.tsx`, which is a vertically stacked `FormItem` form rather than a row list, so it is the one file a standardisation pass has to decide about rather than mechanically convert.
 - **`packages/web/public/locales/en/translation.json` contains duplicate keys, so no JSON tool may rewrite it — edit it as text.** `agentMoveLosesConnections`, `No projects yet`, `All projects` and `Model` each appear twice today. Any parse-and-dump round-trip (Python's `json`, `jq`, a formatter) silently keeps only the last of each pair and drops the rest, and will additionally unescape every `\uXXXX` sequence in the file — one such round-trip to add a single key produced a 36-line diff with a key deletion buried in it. Add or rename a key with a targeted string replacement and check `git diff --stat` says 1 insertion.
+- **Resolving a `translation.json` merge conflict is where that rule is hardest to keep and most worth keeping.** Both sides append to a flat map, so any long-lived web branch conflicts here, and the obvious resolution is to parse both sides and dump the union. That loses the duplicates and escapes exactly as above. It also has a three-way trap of its own: keeping every key that is in *ours* resurrects the keys main **deleted**, because our side never removed them either. Merge as main's bytes plus only the keys our side actually added (`in ours, not in the merge base`), appended as text before the closing brace, then confirm `git diff origin/main` is purely additive. Anything else and a reviewer sees deletions in a file they expected to grow.
 - **`AllowOnlyLoggedInUserOnlyGuard` calls its hooks after two early returns, and the linter only lets it.** `react-hooks/rules-of-hooks` does not flag member-expression calls, so `platformHooks.useCurrentPlatform()` / `flagsHooks.useFlags()` sail past it — but add a bare `useSomething()` there and the rule fires, correctly: `isLoggedIn()` can change between renders, so those calls really are conditional. Anything new that needs to run once a session is authenticated belongs in a null-rendering component placed inside the returned `<SocketProvider>` subtree, which mounts only after the guard passes. That is why automatic trial activation is `<AutomaticTrialActivation />` and not a hook.
 - **The layering is lint-enforced, not just a convention.** `packages/web/.eslintrc.json` has an `import/no-restricted-paths` zone making the codebase unidirectional: `src/app` may import `src/features`, and both may import `src/lib`/`hooks`/`components`/`types`/`utils` — never the reverse (the one exception is `app/query-client.ts`). So a hook that a public route needs belongs in `src/lib`, but anything rendering a feature's components has to live in that feature; you cannot keep the pair in one `lib` file. It fails as an `import/no-restricted-paths` **error**, not a warning, so it blocks lint.
-- **Arbitrary Tailwind values for type, tracking and radius get sent back in review — `packages/web` has its own scale and it is not stock Tailwind.** There is no `tailwind.config.js`; this is Tailwind v4 and the theme lives in the `@theme` block of `src/styles.css`, which *adds* `--text-xss: 0.65rem`, *overrides* `--text-3xl` to 1.75rem and `--text-4xl` to 2rem (both smaller than stock), and derives `--radius-{sm,md,lg,xs,xss}` from a single `--radius: 0.5rem`. So `text-[13px]`, `tracking-[-0.025em]` and `rounded-[11px]` are not just style nits — they sit *between* real tokens and drift the page off the scale. Map them: 10–11px → `text-xss`, 11.5–12.5px → `text-xs`, 13–13.5px → `text-sm`, 15–15.5px → `text-base`; negative tracking → `tracking-tight`, uppercase-eyebrow tracking → `tracking-wide`/`wider`; any `rounded-[9–11px]` → `rounded-md`. Layout constraints are the exception and stay arbitrary — `max-w-[628px]` for a reading measure or `lg:w-[344px]` for a sidebar have no token equivalent and are idiomatic. Fractional spacing (`size-5.5`, `size-8.5`, `size-13`) is valid in v4 and beats `size-[22px]`. Neither eslint nor `tsc` catches any of this, so it only ever surfaces in review — the mapping is written up in the *Tailwind / Styling* section of `packages/web/AGENTS.md` so agents meet it before writing the class. Above 15.5px there is no px mapping, because heading sizes are a per-surface decision: copy the token the neighbouring heading on the same page already uses (a `text-[22px]` page heading becomes the `text-xl` its sibling section headings use) rather than rounding to the closest number.
+- **Arbitrary Tailwind values for type, tracking and radius get sent back in review — `packages/web` has its own scale and it is not stock Tailwind.** There is no `tailwind.config.js`; this is Tailwind v4 and the theme lives in the `@theme` block of `src/styles.css`, which *adds* `--text-xss: 0.65rem`, *overrides* `--text-3xl` to 1.75rem and `--text-4xl` to 2rem (both smaller than stock), and derives `--radius-{sm,md,lg,xs,xss}` from a single `--radius: 0.5rem`. So `text-[13px]`, `tracking-[-0.025em]` and `rounded-[11px]` are not just style nits — they sit *between* real tokens and drift the page off the scale. Map them: 10–11px → `text-xss`, 11.5–12.5px → `text-xs`, 13–13.5px → `text-sm`, 15–15.5px → `text-base`; negative tracking → `tracking-tight`, uppercase-eyebrow tracking → `tracking-wide`/`wider`; any `rounded-[9–11px]` → `rounded-md`. **A colour handed over as a hex is usually a token at low opacity, and hardcoding it breaks dark mode**: `styles.css` redefines `--primary` inside `.dark` (violet `257 74% 57%` becomes blue `210 90% 50%`), so a light-mode lavender sits under dark-mode text unchanged. Composite the hex against the background before reaching for `bg-[#...]`; a design handing over `#f6f3fe` turned out to be `bg-primary/6` to within one unit per channel. Layout constraints are the exception and stay arbitrary — `max-w-[628px]` for a reading measure or `lg:w-[344px]` for a sidebar have no token equivalent and are idiomatic. Fractional spacing (`size-5.5`, `size-8.5`, `size-13`) is valid in v4 and beats `size-[22px]`, but **only at half-steps** — v4 generates `.5` and whole numbers, so a finer fraction like `ml-3.9` produces no rule at all and the property computes to `0`, with no build error and no lint error to say so. If a measured value falls between half-steps, either derive it from the geometry and round to the nearest real step, or use the arbitrary value; never invent a decimal and assume it took. Read the computed style back in the browser rather than trusting the class name. Neither eslint nor `tsc` catches any of this, so it only ever surfaces in review — the mapping is written up in the *Tailwind / Styling* section of `packages/web/AGENTS.md` so agents meet it before writing the class. Above 15.5px there is no px mapping, because heading sizes are a per-surface decision: copy the token the neighbouring heading on the same page already uses (a `text-[22px]` page heading becomes the `text-xl` its sibling section headings use) rather than rounding to the closest number.
 - **`npx prettier --check` lies about `packages/web` — it flags files nobody has touched, so never treat it as a gate.** Prettier is not in any CI workflow, and the root `.prettierrc` is a single `{"singleQuote": true}` while the resolved binary is prettier **2.8.4**, whose `trailingComma` default is `es5`. The checked-in code is formatted by prettier 3 (via the editor / eslint integration), which defaults to `all` — so every multi-line call with a trailing comma reads as a "code style issue". Running `--check` on a file straight out of `git show HEAD:` reproduces it. If you want to know whether your own edit is formatted, diff `npx prettier <file>` against the file and check the hunks are yours; the pass/fail verdict is meaningless. `npx turbo run lint --filter=web` is the real gate.
 - **A date test with hardcoded `Z` fixtures is a false green — CI runs UTC, and both `dayjs().isSame(x, 'day')` and `formatUtils.formatDate` are *local*.** Freezing the clock with `vi.setSystemTime(new Date('…Z'))` and then asserting against a literal `'2025-09-15T00:30:00Z'` only holds where local time is UTC. `grant-utils.test.ts` on [#15079](https://github.com/activepieces/activepieces/pull/15079) was 3/3 green in CI and on `TZ=UTC`, 1 failed on `TZ=America/New_York` (`00:30Z` is the *previous* local day, so "Active today" flips to "Last used Yesterday"), 2 failed on `TZ=Pacific/Honolulu` (the second being `formatDate` rendering `Aug 11` where the test asserted `Aug 12`). Nobody in the Americas can run the suite clean, and nothing in CI will ever tell you. Derive every fixture from the frozen clock instead of writing a literal — `dayjs(NOW).startOf('day').add(30, 'minute')`, `dayjs(NOW).subtract(34, 'day')` — and assert with the same local formatter the code uses (`earlier.format('MMM D')`), so fixture and assertion move together in any zone. Check any new date test with `TZ=America/New_York` and `TZ=Pacific/Honolulu` before pushing; those two straddle UTC on both sides and catch it. The production `isSame(…, 'day')` is *correct* — a user's "today" is their own day — so the bug is always in the test, never in the formatter.
 - **`ConfirmationDeleteDialog`'s `entityName` is a required prop that renders nowhere unless you also pass `showToast` — 25 of its 30 call sites compute a label and throw it away.** `components/custom/delete-dialog.tsx` mentions `entityName` three times: the prop type, the destructure, and one `toast.success(t('Removed {entityName}', …))` sitting inside `if (showToast)`. `showToast` is optional and there is no default, so every caller that omits it (or passes `false`) gets no toast and no other use of the value. The dialog body renders `title` and `message` only, so the confirmation never names what is about to be deleted. `project-member-card.tsx` builds `` `${firstName} ${lastName}` `` for nothing; `api-keys/index.tsx` passes `t('API Key')` for nothing. Nothing catches it — the prop is required, so TypeScript is satisfied, and lint has no opinion. Caught on [#15079](https://github.com/activepieces/activepieces/pull/15079), where it also made a newly added `revokedGrants` ICU plural rule unreachable in every locale — a dead translation key that `i18n:extract` will happily keep regenerating. When you want the name on screen, interpolate it into `message` yourself (`t('Revoking {entityName}. …', { entityName: label })`); passing `entityName` alone does nothing. Before adding a translation key for a dialog label, grep for where the prop you are feeding actually renders.
diff --git a/brain/knowledge/platform-editions-ee/ee-platform-plans-billing.md b/brain/knowledge/platform-editions-ee/ee-platform-plans-billing.md
index 83060a63be2c..cd283ce77875 100644
--- a/brain/knowledge/platform-editions-ee/ee-platform-plans-billing.md
+++ b/brain/knowledge/platform-editions-ee/ee-platform-plans-billing.md
@@ -31,7 +31,9 @@ Billing and entitlements are powered by [Autumn](https://useautumn.com). Each pl
 - **`RequestTrial` lives in `features/billing/components/`, not `app/components/`.** Anything under `features/*` that needs the sales call to action - the plan guards and the upgrade dialog - cannot reach into `app/`, because the `import/no-restricted-paths` zone is one-directional. Keeping it in billing lets both layers use it, since every `app/` caller is importing downward. It exports `FeatureKey`, the union the `activepieces.com/sales` page reads from the query string, and every `PLATFORM_FEATURES` entry carries one so a gated surface can hand over the right key.
 - Initial plan by edition: CE/EE → `OPEN_SOURCE_PLAN`, Cloud → `AUTUMN_FREE_PLAN`. CE and `TESTING` environments skip enrollment/sync entirely.
 - **Running billing locally means pointing a local backend at a *console*, not standing up Autumn.** Three gates must all pass or the provider is the empty no-op: `AP_EDITION` must be `cloud` or `ee` (`app.ts` sets `autumnBillingProvider` only there; Community returns `{ total: 0, byProject: [] }`), `AP_ENVIRONMENT` must **not** be `testing` (`triggerLazyBillingProviderSync`/`enrollBillingProviderOnCreate` early-return on it), and Redis must be up (billing reads/writes go through Redis caches). Enrollment is lazy — the first read of a billing/usage route fires `ensureEnrolled` → `enrollFree({ ownerEmail })` against `AUTUMN_CONSOLE_URL`. That prop **defaults to the production console** (`https://console.activepieces.com`), so an unconfigured local box enrolls a *real* customer keyed by the owner email; point it at the testing console instead. A freshly enrolled free customer has no events, so all usage aggregations read `0` until real `flow_run`/`ai`/`chat` credit events are metered for it. To merely eyeball the usage page with real data, `serve --filter=web -- --mode=cloud` against the cloud backend is far less setup than local billing.
-- **Hand-editing `platform_plan` flags to unlock a feature locally does not stick, and the revert looks like the feature breaking itself.** The lazy entitlement projection above rewrites the plan columns from Autumn on any plan read, so a flag you set by hand survives only until the next sync. Because the throttle is 15 minutes and the web app leaves TanStack Query's `refetchOnWindowFocus` at its default `true`, the trigger in practice is *returning to the tab after a break*: alt-tab quickly and the flag survives, come back later and it is gone — which reads as an intermittent bug in whatever feature the flag gated, not as billing. `triggerLazyBillingProviderSync` is fire-and-forget, so nothing in the request that caused it says so. The clean fix for local work is to null **both** `autumnCustomerId` and `autumnApiKey` on the row: `loadAutumnCreds` returns null only when both are nil, `refreshEntitlements` then returns before its `update()`, and hand-set flags stay put. Null exactly one and you hit the worst case — an `error`-level `Autumn credentials incomplete for an enrolled platform` and every billing call silently no-oping.
+- **Hand-editing `platform_plan` flags to unlock a feature locally does not stick, and the revert looks like the feature breaking itself.** The lazy entitlement projection above rewrites the plan columns from Autumn on any plan read, so a flag you set by hand survives only until the next sync. Because the throttle is 15 minutes and the web app leaves TanStack Query's `refetchOnWindowFocus` at its default `true`, the trigger in practice is *returning to the tab after a break*: alt-tab quickly and the flag survives, come back later and it is gone, which reads as an intermittent bug in whatever feature the flag gated, not as billing. `triggerLazyBillingProviderSync` is fire-and-forget, so nothing in the request that caused it says so.
+- **To pin hand-set flags, set `autumnCustomerId` to any sentinel and leave `autumnApiKey` NULL.** `loadAutumnCreds` returns null whenever exactly one is missing, so `refreshEntitlements` returns before its `update()` and nothing overwrites the row. The cost is one `error`-level `Autumn credentials incomplete for an enrolled platform` per plan read, which is the no-op announcing itself and is harmless locally.
+- **Do NOT null both credentials to achieve that**, even though `loadAutumnCreds` also returns null in that state. `ensureEnrolled` keys off `autumnCustomerId` alone: seeing it nil it treats the platform as never enrolled, calls the console's `enrollFree`, writes fresh credentials, and calls `refreshEntitlements` inline. Nulling both therefore *causes* the sync it was meant to prevent, and the free-plan flags come back within a minute or two along with a real Autumn customer. Verified 2026-09-14 on a local EE stack: flags reverted and both credential columns were repopulated.
 - **On `AP_EDITION=ce` the `platform_plan` row is ignored entirely, so there is nothing to hand-edit.** `platform.service.ts`'s `getPlan` returns the `OPEN_SOURCE_PLAN` literal for Community before it ever reads the DB — the row still exists (`createInitialBilling` writes it) and still shows the value you set, which is what makes SQL look like the fix. Unlocking a flag locally on CE means editing that literal in `packages/core/shared/src/lib/ee/billing/index.ts`; for a limit, `null` is unlimited on both sides (`isNil` short-circuits the frontend guard and `assertMaximumNumberOfProjectsReachedByEdition`), while `0` means *not available on this plan* and additionally hides the feature's UI. Two traps: the edit needs `packages/core/shared/dist/` patched too or rebuilt, because **the API resolves `@activepieces/shared` through node_modules to `main: ./dist/src/index.js` while the web app resolves it through the tsconfig path to `src/`** — edit only `src` and the browser flips while the API keeps enforcing the old value, which reads as a frontend/backend disagreement; and `src` is tracked, so revert it before committing.
 - The console base URL defaults to the production console and is overridable by an internal system prop (trailing slashes stripped) so our testing instance can point at the testing console. Deliberately absent from the self-hosting env-var reference: a self-hoster has no reason to change it, and the default must always be the one that works with zero setup. The Autumn SDK's own base URL is **not** configurable — nothing passes `serverURL` — so the console override cannot redirect entitlement reads.
 - Credit metering for managed AI happens post-run in centralized worker execution (decision 000016), so in-flight spend is invisible to the gate.
@@ -64,6 +66,8 @@ Billing and entitlements are powered by [Autumn](https://useautumn.com). Each pl
 - **The `Required<>` in both guards is load-bearing.** `Nullable()` is `z.optional(z.nullable(...))`, so a column declared that way arrives as an *optional* key in the `Pick` and would slip past an unwrapped `Pick` unnoticed.
 - **Those build errors only appear once `@activepieces/shared` has been rebuilt.** `tsc -p packages/server/api/tsconfig.app.json` has `paths: {}` and resolves the package to `packages/core/shared/dist/src/index.d.ts`, not its source, so editing the schema and typechecking the API without a shared build proves nothing. vitest is the opposite — it aliases `@activepieces/shared` to `src`, so tests see schema edits immediately. Build shared first, and remember `tsc` does not clean `dist`, so a deleted module lingers there until you remove it.
 
+- **Inside `BillingPageShell` every `isCommunity` check is dead code, and the billing page is full of them.** The shell wraps its children in `LockedFeatureGuard` keyed on `edition === COMMUNITY`, so nothing below it ever renders on Community. The billing page nonetheless computes `isCommunity` and guards its Current-subscription, Credits and Seats sections plus its Refresh button with `!isCommunity &&`, all of which is unreachable. Harmless, but it reads as if those sections were conditional when the only thing deciding them is a gate one level up, and it makes the page look edition-aware where it is not. Worth knowing before adding another guard in the same style, or before concluding a section is Community-visible because a check exists for it.
+
 ### Key files
 Entry point: `platformPlanService` (`platform-plan.service.ts`) for projection, usage, and seat checks; `billingProvider.get(log)` for everything billing.
 
diff --git a/packages/web/src/app/components/feature-sample.tsx b/packages/web/src/app/components/feature-sample.tsx
new file mode 100644
index 000000000000..151e07fe9b78
--- /dev/null
+++ b/packages/web/src/app/components/feature-sample.tsx
@@ -0,0 +1,108 @@
+import { ApEdition, ApFlagId } from '@activepieces/shared';
+import { t } from 'i18next';
+import { ExternalLink, Lock } from 'lucide-react';
+import { ReactNode } from 'react';
+
+import { Button } from '@/components/ui/button';
+import {
+  FeatureKey,
+  FeatureTier,
+  RequestTrial,
+  TIER_LABELS,
+  useManagePlanDialogStore,
+} from '@/features/billing';
+import { flagsHooks } from '@/hooks/flags-hooks';
+
+export function FeatureSample({
+  locked,
+  title,
+  description,
+  tier,
+  documentationUrl,
+  featureKey,
+  showContactSales = true,
+  children,
+}: FeatureSampleProps) {
+  const { openDialog: openManagePlanDialog } = useManagePlanDialogStore();
+  const { data: edition } = flagsHooks.useFlag<ApEdition>(ApFlagId.EDITION);
+
+  if (!locked) {
+    return children;
+  }
+
+  const isCommunity = edition === ApEdition.COMMUNITY;
+
+  return (
+    <div className="relative flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden">
+      <div
+        inert
+        aria-hidden
+        className="flex flex-1 min-h-0 min-w-0 flex-col pointer-events-none select-none opacity-25"
+      >
+        {children}
+      </div>
+
+      <div className="absolute inset-0 grid place-items-center overflow-auto p-6">
+        <div className="pointer-events-auto flex w-full max-w-md flex-col items-center gap-5 rounded-2xl border bg-background px-8 py-9 text-center shadow-xl">
+          <div className="grid size-12 place-items-center rounded-xl bg-primary/10">
+            <Lock className="size-5.5 text-primary" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <h2 className="text-lg font-semibold">{t(title)}</h2>
+            {description !== undefined && description !== '' && (
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                {t(description)}
+              </p>
+            )}
+          </div>
+          {isCommunity ? (
+            <div className="flex flex-col items-center gap-3">
+              {showContactSales && featureKey !== undefined && (
+                <RequestTrial featureKey={featureKey} />
+              )}
+              <a
+                href={documentationUrl ?? ENTERPRISE_DOCUMENTATION_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline"
+              >
+                {t('Read the docs')}
+                <ExternalLink className="size-3.5" />
+              </a>
+            </div>
+          ) : (
+            <Button className="w-full" onClick={() => openManagePlanDialog()}>
+              {tier === undefined
+                ? t('Upgrade to unlock')
+                : t('Upgrade to {tier}', { tier: TIER_LABELS[tier] })}
+            </Button>
+          )}
+          {tier !== undefined && !isCommunity && (
+            <>
+              <div className="h-px w-full bg-border" />
+              <span className="text-xs text-muted-foreground">
+                {t('Included with the {tier} plan and above.', {
+                  tier: TIER_LABELS[tier],
+                })}
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ENTERPRISE_DOCUMENTATION_URL =
+  'https://www.activepieces.com/docs/install/configuration/overview#enterprise-edition-optional';
+
+export type FeatureSampleProps = {
+  locked: boolean;
+  featureKey?: FeatureKey;
+  showContactSales?: boolean;
+  title: string;
+  description?: string;
+  tier?: FeatureTier;
+  documentationUrl?: string;
+  children: ReactNode;
+};
diff --git a/packages/web/src/app/routes/agents/id/index.tsx b/packages/web/src/app/routes/agents/id/index.tsx
index 141c9786a8da..df9616812ed8 100644
--- a/packages/web/src/app/routes/agents/id/index.tsx
+++ b/packages/web/src/app/routes/agents/id/index.tsx
@@ -291,10 +291,10 @@ const AgentEditorPage = () => {
   const agentsAvailable = useAgentsAvailable();
   return (
     <LockedFeatureGuard
+      featureKey="AGENTS"
       locked={!agentsAvailable}
       lockTitle={t('Unlock Agents')}
       lockDescription={t('Build an agent once, then use it in any flow.')}
-      featureKey="AGENTS"
     >
       <AgentEditorContent />
     </LockedFeatureGuard>
diff --git a/packages/web/src/app/routes/agents/index.tsx b/packages/web/src/app/routes/agents/index.tsx
index fc2e84dd8cb6..6abefc4f832c 100644
--- a/packages/web/src/app/routes/agents/index.tsx
+++ b/packages/web/src/app/routes/agents/index.tsx
@@ -101,10 +101,10 @@ const AgentsPage = () => {
   const agentsAvailable = useAgentsAvailable();
   return (
     <LockedFeatureGuard
+      featureKey="AGENTS"
       locked={!agentsAvailable}
       lockTitle={t('Unlock Agents')}
       lockDescription={t('Build an agent once, then use it in any flow.')}
-      featureKey="AGENTS"
     >
       <AgentsPageContent />
     </LockedFeatureGuard>
diff --git a/packages/web/src/app/routes/platform-routes.tsx b/packages/web/src/app/routes/platform-routes.tsx
index 0cc07183c056..1f1b611364f5 100644
--- a/packages/web/src/app/routes/platform-routes.tsx
+++ b/packages/web/src/app/routes/platform-routes.tsx
@@ -2,6 +2,7 @@ import { ApEdition, ApFlagId } from '@activepieces/shared';
 import React, { Suspense } from 'react';
 import { Navigate, useSearchParams } from 'react-router-dom';
 
+import { FeatureSample } from '@/app/components/feature-sample';
 import { PageTitle } from '@/app/components/page-title';
 import { RouteLoadingBar } from '@/components/custom/route-loading-bar';
 import { flagsHooks } from '@/hooks/flags-hooks';
@@ -29,9 +30,19 @@ function AdminRoute({ page }: { page: AdminPageSpec }) {
   const Page = page.component;
   if (Page !== undefined) {
     return (
-      <SuspenseWrapper>
-        <Page />
-      </SuspenseWrapper>
+      <FeatureSample
+        locked={page.sample === true && page.nav?.isLocked?.(context) === true}
+        title={page.teaser?.title ?? page.nav?.label ?? page.title}
+        description={page.teaser?.description}
+        tier={page.teaser?.tier}
+        documentationUrl={page.teaser?.documentationUrl}
+        featureKey={page.teaser?.featureKey}
+        showContactSales={page.teaser?.showContactSales}
+      >
+        <SuspenseWrapper>
+          <Page />
+        </SuspenseWrapper>
+      </FeatureSample>
     );
   }
 
@@ -40,9 +51,19 @@ function AdminRoute({ page }: { page: AdminPageSpec }) {
   const Overview = page.overview;
   if (Overview !== undefined && requested === null) {
     return (
-      <SuspenseWrapper>
-        <Overview />
-      </SuspenseWrapper>
+      <FeatureSample
+        locked={page.sample === true && page.nav?.isLocked?.(context) === true}
+        title={page.teaser?.title ?? page.nav?.label ?? page.title}
+        description={page.teaser?.description}
+        tier={page.teaser?.tier}
+        documentationUrl={page.teaser?.documentationUrl}
+        featureKey={page.teaser?.featureKey}
+        showContactSales={page.teaser?.showContactSales}
+      >
+        <SuspenseWrapper>
+          <Overview />
+        </SuspenseWrapper>
+      </FeatureSample>
     );
   }
 
@@ -57,9 +78,21 @@ function AdminRoute({ page }: { page: AdminPageSpec }) {
 
   const TabContent = activeTab.component;
   return (
-    <SuspenseWrapper>
-      <TabContent />
-    </SuspenseWrapper>
+    <FeatureSample
+      locked={
+        activeTab.sample === true && activeTab.isLocked?.(context) === true
+      }
+      title={activeTab.teaser?.title ?? activeTab.label}
+      description={activeTab.teaser?.description}
+      tier={activeTab.teaser?.tier}
+      documentationUrl={activeTab.teaser?.documentationUrl}
+      featureKey={activeTab.teaser?.featureKey}
+      showContactSales={activeTab.teaser?.showContactSales}
+    >
+      <SuspenseWrapper>
+        <TabContent />
+      </SuspenseWrapper>
+    </FeatureSample>
   );
 }
 
diff --git a/packages/web/src/app/routes/platform/admin-pages.ts b/packages/web/src/app/routes/platform/admin-pages.ts
index 1898fb7f4f45..bfe653a070f7 100644
--- a/packages/web/src/app/routes/platform/admin-pages.ts
+++ b/packages/web/src/app/routes/platform/admin-pages.ts
@@ -222,12 +222,38 @@ export const ADMIN_PAGES: AdminPage[] = [
         label: 'Single sign on',
         component: SSOPage,
         isLocked: ({ plan }) => !plan.ssoEnabled,
+        sample: true,
+        teaser: {
+          featureKey: 'SSO',
+          title: 'Enable Single Sign On',
+          description:
+            'Let your users sign in with your current SSO provider or give them self serve sign up access',
+          tier: 'team',
+          bullets: [
+            'Works with SAML and OIDC providers',
+            'Enforce SSO for everyone on the platform',
+            'Control who can self-serve sign up',
+          ],
+        },
       },
       {
         id: 'roles',
         label: 'Project roles',
         component: ProjectRolePage,
         isLocked: ({ plan }) => !plan.projectRolesEnabled,
+        sample: true,
+        teaser: {
+          featureKey: 'CUSTOM_ROLES',
+          title: 'Project Role Management',
+          description:
+            'Define custom roles and permissions to control what your team members can access and modify',
+          tier: 'team',
+          bullets: [
+            'Scope access per project, not per platform',
+            'Keep production flows safe from accidental edits',
+            'Assign roles when you invite someone',
+          ],
+        },
       },
     ],
   },
@@ -248,6 +274,18 @@ export const ADMIN_PAGES: AdminPage[] = [
         label: 'Global connections',
         component: GlobalConnectionsTable,
         isLocked: ({ plan }) => !plan.globalConnectionsEnabled,
+        sample: true,
+        teaser: {
+          featureKey: 'GLOBAL_CONNECTIONS',
+          title: 'Enable Global Connections',
+          description: 'Manage platform-wide connections to external systems.',
+          tier: 'team',
+          bullets: [
+            'Create once, use in any project',
+            'Rotate credentials in a single place',
+            'Choose which projects can use each connection',
+          ],
+        },
       },
     ],
   },
@@ -297,6 +335,14 @@ export const ADMIN_PAGES: AdminPage[] = [
   },
   {
     id: 'templates',
+    sample: true,
+    teaser: {
+      featureKey: 'TEMPLATES',
+      title: 'Unlock Templates',
+      description:
+        'Convert the most common automations into reusable templates 1 click away from your users',
+      tier: 'enterprise',
+    },
     path: '/platform/setup/templates',
     title: 'Templates',
     component: PlatformTemplatesPage,
@@ -308,6 +354,13 @@ export const ADMIN_PAGES: AdminPage[] = [
   },
   {
     id: 'embed',
+    sample: true,
+    teaser: {
+      featureKey: 'SIGNING_KEYS',
+      title: 'Unlock Embedding Through JS SDK',
+      description: 'Enable signing keys to access embedding functionalities.',
+      tier: 'enterprise',
+    },
     path: '/platform/security/embed',
     title: 'Embedding',
     component: EmbedPage,
@@ -332,29 +385,88 @@ export const ADMIN_PAGES: AdminPage[] = [
         label: 'API keys',
         component: ApiKeysPage,
         isLocked: ({ plan }) => !plan.apiKeysEnabled,
+        sample: true,
+        teaser: {
+          featureKey: 'API',
+          title: 'Enable API Keys',
+          description:
+            'Create and manage API keys to access Activepieces APIs.',
+          tier: 'team',
+          bullets: [
+            'Drive projects, flows and connections from your own tooling',
+            'Scope a key to the platform, not to a person',
+            'Revoke a key without touching anyone\u2019s login',
+          ],
+        },
       },
       {
         id: 'secrets',
         label: 'Secret managers',
         component: SecretManagersPage,
         isLocked: ({ plan }) => !plan.secretManagersEnabled,
+        sample: true,
+        teaser: {
+          featureKey: 'SECRET_MANAGERS',
+          title: 'Enable Secret Managers',
+          description: 'Manage your secrets from a single and secure place',
+          tier: 'enterprise',
+          bullets: [
+            'AWS, Azure, GCP and HashiCorp Vault',
+            'Secrets never leave your infrastructure',
+            'One secure place to rotate everything',
+          ],
+        },
       },
       {
         id: 'audit',
         label: 'Audit logs',
         component: AuditLogsPage,
         isLocked: ({ plan }) => !plan.auditLogEnabled,
+        sample: true,
+        teaser: {
+          featureKey: 'AUDIT_LOGS',
+          title: 'Unlock Audit Logs',
+          description:
+            'Comply with internal and external security policies by tracking activities done within your account',
+          tier: 'enterprise',
+          bullets: [
+            'Every user and system action, recorded',
+            'Filter by user, project and event type',
+            'Export for compliance reviews',
+          ],
+        },
       },
       {
         id: 'events',
         label: 'Event streaming',
         component: EventDestinationsPage,
         isLocked: ({ plan }) => !plan.eventStreamingEnabled,
+        sample: true,
+        teaser: {
+          featureKey: 'EVENT_DESTINATIONS',
+          title: 'Unlock Event Streaming',
+          description:
+            'Forward every audit event we emit to a webhook, then handle it in a flow.',
+          tier: 'enterprise',
+          bullets: [
+            'Stream events to any endpoint',
+            'Wire alerts into Slack, PagerDuty or email',
+            'Build your own monitoring on top',
+          ],
+        },
       },
     ],
   },
   {
     id: 'billing',
+    sample: true,
+    teaser: {
+      featureKey: 'BILLING',
+      showContactSales: false,
+      title: 'Billing & usage',
+      description:
+        'Plans, credits and usage tracking are part of the Enterprise and Cloud editions.',
+    },
     path: '/platform/setup/billing',
     title: 'Billing & usage',
     overview: BillingOverview,
diff --git a/packages/web/src/app/routes/platform/infra/event-destinations/index.tsx b/packages/web/src/app/routes/platform/infra/event-destinations/index.tsx
index 38200b941a42..2fcd365786bb 100644
--- a/packages/web/src/app/routes/platform/infra/event-destinations/index.tsx
+++ b/packages/web/src/app/routes/platform/infra/event-destinations/index.tsx
@@ -5,7 +5,6 @@ import { Workflow } from 'lucide-react';
 import { useMemo } from 'react';
 
 import { CenteredPage } from '@/app/components/centered-page';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import { AnimatedIconButton } from '@/components/custom/animated-icon-button';
 import { PlusIcon } from '@/components/icons/plus';
 import { ItemGroup } from '@/components/ui/item';
@@ -14,6 +13,8 @@ import { flowsApi } from '@/features/flows';
 import { flagsHooks } from '@/hooks/flags-hooks';
 import { platformHooks } from '@/hooks/platform-hooks';
 
+import { sampleData } from '../../sample-data';
+
 import { EventDestinationDialog } from './components/event-destination-dialog';
 import { EventDestinationRow } from './components/event-destination-row';
 import { eventDestinationsCollectionUtils } from './lib/event-destinations-collection';
@@ -23,8 +24,12 @@ import { useEventLabels } from './lib/use-event-labels';
 const EventDestinationsPage = () => {
   const { platform } = platformHooks.useCurrentPlatform();
   const isEnabled = platform.plan.eventStreamingEnabled;
-  const { data: destinations, isLoading } =
+  const { data: liveDestinations, isLoading } =
     eventDestinationsCollectionUtils.useAll(isEnabled);
+  const isSample = !isEnabled;
+  const destinations = isSample
+    ? sampleData.eventDestinations()
+    : liveDestinations;
   const { data: webhookPrefixUrl } = flagsHooks.useFlag<string>(
     ApFlagId.WEBHOOK_URL_PREFIX,
   );
@@ -75,59 +80,50 @@ const EventDestinationsPage = () => {
   }, [flowQueries, flowIds]);
 
   return (
-    <LockedFeatureGuard
-      featureKey="EVENT_DESTINATIONS"
-      locked={!isEnabled}
-      lockTitle={t('Unlock Event Streaming')}
-      lockDescription={t(
-        'Forward every audit event we emit to a webhook, then handle it in a flow — wire it to Slack, Gmail, PagerDuty, or anywhere else.',
+    <CenteredPage
+      title={t('Event Streaming')}
+      description={t(
+        'Send a webhook for every audit event and build fully customizable alerts on top.',
       )}
+      actions={
+        <EventDestinationDialog destination={null}>
+          <AnimatedIconButton icon={PlusIcon} iconSize={16} size="sm">
+            {t('New Destination')}
+          </AnimatedIconButton>
+        </EventDestinationDialog>
+      }
     >
-      <CenteredPage
-        title={t('Event Streaming')}
-        description={t(
-          'Send a webhook for every audit event and build fully customizable alerts on top.',
-        )}
-        actions={
-          <EventDestinationDialog destination={null}>
-            <AnimatedIconButton icon={PlusIcon} iconSize={16} size="sm">
-              {t('New Destination')}
-            </AnimatedIconButton>
-          </EventDestinationDialog>
-        }
-      >
-        {isLoading && (
-          <SkeletonList numberOfItems={3} className="w-full h-[72px]" />
-        )}
+      {isLoading && (
+        <SkeletonList numberOfItems={3} className="w-full h-[72px]" />
+      )}
 
-        {!isLoading && parsedDestinations.length === 0 && (
-          <div className="flex flex-col items-center gap-3 py-12 text-muted-foreground">
-            <Workflow className="size-10" />
-            <p className="text-sm">
-              {t('No destinations yet. Create one to get started.')}
-            </p>
-          </div>
-        )}
+      {!isLoading && parsedDestinations.length === 0 && (
+        <div className="flex flex-col items-center gap-3 py-12 text-muted-foreground">
+          <Workflow className="size-10" />
+          <p className="text-sm">
+            {t('No destinations yet. Create one to get started.')}
+          </p>
+        </div>
+      )}
 
-        {!isLoading && parsedDestinations.length > 0 && (
-          <ItemGroup className="gap-2">
-            {parsedDestinations.map(({ destination, parsed }) => (
-              <EventDestinationRow
-                key={destination.id}
-                destination={destination}
-                parsed={parsed}
-                flowDisplayName={
-                  parsed.kind === 'flow'
-                    ? flowDisplayNameById.get(parsed.flowId)
-                    : undefined
-                }
-                eventLabels={eventLabels}
-              />
-            ))}
-          </ItemGroup>
-        )}
-      </CenteredPage>
-    </LockedFeatureGuard>
+      {!isLoading && parsedDestinations.length > 0 && (
+        <ItemGroup className="gap-2">
+          {parsedDestinations.map(({ destination, parsed }) => (
+            <EventDestinationRow
+              key={destination.id}
+              destination={destination}
+              parsed={parsed}
+              flowDisplayName={
+                parsed.kind === 'flow'
+                  ? flowDisplayNameById.get(parsed.flowId)
+                  : undefined
+              }
+              eventLabels={eventLabels}
+            />
+          ))}
+        </ItemGroup>
+      )}
+    </CenteredPage>
   );
 };
 
diff --git a/packages/web/src/app/routes/platform/sample-data.ts b/packages/web/src/app/routes/platform/sample-data.ts
new file mode 100644
index 000000000000..f6328e1e2c3a
--- /dev/null
+++ b/packages/web/src/app/routes/platform/sample-data.ts
@@ -0,0 +1,216 @@
+import { RoleType } from '@activepieces/core-utils';
+import {
+  ApiKeyResponseWithoutValue,
+  AppConnectionScope,
+  AppConnectionStatus,
+  AppConnectionType,
+  AppConnectionWithoutSensitiveData,
+  ApplicationEvent,
+  ApplicationEventName,
+  buildMockEvent,
+  EventDestination,
+  EventDestinationScope,
+  ProjectRole,
+  SecretManagerConnectionScope,
+  SecretManagerConnectionWithStatus,
+  SecretManagerProviderId,
+  KeyAlgorithm,
+  SeekPage,
+  SigningKey,
+  Template,
+  TemplateStatus,
+  TemplateType,
+} from '@activepieces/shared';
+
+const SAMPLE_PLATFORM_ID = 'sample-platform';
+const SAMPLE_PROJECT_ID = 'sample-project';
+const MINUTE_MS = 60 * 1000;
+
+const SAMPLE_EVENT_NAMES: ApplicationEventName[] = [
+  ApplicationEventName.FLOW_PUBLISHED,
+  ApplicationEventName.CONNECTION_UPSERTED,
+  ApplicationEventName.FLOW_UPDATED,
+  ApplicationEventName.FLOW_CREATED,
+  ApplicationEventName.FLOW_DELETED,
+  ApplicationEventName.PROJECT_ROLE_CREATED,
+  ApplicationEventName.FLOW_RUN_STARTED,
+  ApplicationEventName.SIGNING_KEY_CREATED,
+];
+
+function agedTimestamps(minutesAgo: number) {
+  const at = new Date(Date.now() - minutesAgo * MINUTE_MS).toISOString();
+  return { created: at, updated: at };
+}
+
+function toPage<T>(data: T[]): SeekPage<T> {
+  return { data, next: null, previous: null };
+}
+
+function auditEvents(): ApplicationEvent[] {
+  return SAMPLE_EVENT_NAMES.map((event, index) => ({
+    ...buildMockEvent({
+      event,
+      platformId: SAMPLE_PLATFORM_ID,
+      projectId: SAMPLE_PROJECT_ID,
+    }),
+    ...agedTimestamps((index + 1) * 37),
+  }));
+}
+
+function globalConnections(): AppConnectionWithoutSensitiveData[] {
+  return [
+    { displayName: 'Slack', pieceName: '@activepieces/piece-slack' },
+    {
+      displayName: 'Google Sheets',
+      pieceName: '@activepieces/piece-google-sheets',
+    },
+    { displayName: 'Salesforce', pieceName: '@activepieces/piece-salesforce' },
+    { displayName: 'HubSpot', pieceName: '@activepieces/piece-hubspot' },
+  ].map((entry, index) => ({
+    id: `sample-connection-${index}`,
+    ...agedTimestamps((index + 2) * 26 * 60),
+    externalId: `sample-connection-${index}`,
+    displayName: entry.displayName,
+    type: AppConnectionType.SECRET_TEXT,
+    pieceName: entry.pieceName,
+    pieceVersion: '0.0.1',
+    projectIds: [],
+    platformId: SAMPLE_PLATFORM_ID,
+    scope: AppConnectionScope.PLATFORM,
+    status:
+      index === 3 ? AppConnectionStatus.ERROR : AppConnectionStatus.ACTIVE,
+    ownerId: null,
+    owner: null,
+    metadata: null,
+    flowIds: null,
+    preSelectForNewProjects: false,
+    usingSecretManager: false,
+  }));
+}
+
+function projectRoles(): ProjectRole[] {
+  return [
+    { name: 'Release Manager', userCount: 3 },
+    { name: 'Support Read Only', userCount: 8 },
+    { name: 'Finance Auditor', userCount: 2 },
+  ].map((entry, index) => ({
+    id: `sample-role-${index}`,
+    ...agedTimestamps((index + 1) * 9 * 24 * 60),
+    name: entry.name,
+    permissions: ['READ_FLOW', 'READ_RUN', 'READ_APP_CONNECTION'],
+    platformId: SAMPLE_PLATFORM_ID,
+    type: RoleType.CUSTOM,
+    userCount: entry.userCount,
+  }));
+}
+
+function eventDestinations(): EventDestination[] {
+  return [
+    'https://splunk.acme.com/services/collector',
+    'https://http-intake.logs.datadoghq.com/api/v2/logs',
+    'https://siem.acme.com/hooks/activepieces',
+  ].map((url, index) => ({
+    id: `sample-destination-${index}`,
+    ...agedTimestamps((index + 1) * 5 * 24 * 60),
+    platformId: SAMPLE_PLATFORM_ID,
+    scope: EventDestinationScope.PLATFORM,
+    url,
+    events: SAMPLE_EVENT_NAMES.slice(0, 4),
+  }));
+}
+
+function secretManagers(): SecretManagerConnectionWithStatus[] {
+  return [
+    { name: 'Production vault', providerId: SecretManagerProviderId.AWS },
+    {
+      name: 'Shared secrets',
+      providerId: SecretManagerProviderId.HASHICORP,
+    },
+    { name: 'Legacy store', providerId: SecretManagerProviderId.ONEPASSWORD },
+  ].map((entry, index) => ({
+    id: `sample-secret-manager-${index}`,
+    ...agedTimestamps((index + 1) * 12 * 24 * 60),
+    platformId: SAMPLE_PLATFORM_ID,
+    providerId: entry.providerId,
+    name: entry.name,
+    scope: SecretManagerConnectionScope.PLATFORM,
+    connection: { configured: true, connected: index !== 2 },
+  }));
+}
+
+function apiKeys(): ApiKeyResponseWithoutValue[] {
+  return [
+    { displayName: 'CI deploy key', truncatedValue: 'sk_live_4f2c' },
+    { displayName: 'Analytics export', truncatedValue: 'sk_live_9ab1' },
+    { displayName: 'Terraform', truncatedValue: 'sk_live_c7d0' },
+  ].map((entry, index) => ({
+    id: `sample-api-key-${index}`,
+    ...agedTimestamps((index + 1) * 21 * 24 * 60),
+    platformId: SAMPLE_PLATFORM_ID,
+    displayName: entry.displayName,
+    truncatedValue: entry.truncatedValue,
+    lastUsedAt: new Date(
+      Date.now() - (index + 1) * 90 * MINUTE_MS,
+    ).toISOString(),
+  }));
+}
+
+function templates(): Template[] {
+  return [
+    {
+      name: 'New lead to Salesforce',
+      summary: 'Push every qualified form submission into Salesforce.',
+      pieces: ['@activepieces/piece-forms', '@activepieces/piece-salesforce'],
+    },
+    {
+      name: 'Weekly revenue digest',
+      summary: 'Post a Monday summary of closed deals to Slack.',
+      pieces: [
+        '@activepieces/piece-slack',
+        '@activepieces/piece-google-sheets',
+      ],
+    },
+    {
+      name: 'Onboard a new hire',
+      summary: 'Create accounts and send the welcome pack on day one.',
+      pieces: ['@activepieces/piece-gmail', '@activepieces/piece-hubspot'],
+    },
+  ].map((entry, index) => ({
+    id: `sample-template-${index}`,
+    ...agedTimestamps((index + 1) * 6 * 24 * 60),
+    name: entry.name,
+    type: TemplateType.CUSTOM,
+    summary: entry.summary,
+    description: entry.summary,
+    tags: [],
+    blogUrl: null,
+    metadata: null,
+    author: 'Acme Automation Team',
+    categories: [],
+    pieces: entry.pieces,
+    platformId: SAMPLE_PLATFORM_ID,
+    status: TemplateStatus.PUBLISHED,
+  }));
+}
+
+function signingKeys(): SigningKey[] {
+  return ['Customer portal', 'Partner dashboard'].map((displayName, index) => ({
+    id: `sample-signing-key-${index}`,
+    ...agedTimestamps((index + 1) * 30 * 24 * 60),
+    platformId: SAMPLE_PLATFORM_ID,
+    displayName,
+    publicKey: 'LS0tLS1CRUdJTiBQVUJMSUMgS0VZLS0tLS1zYW1wbGU=',
+    algorithm: KeyAlgorithm.RSA,
+  }));
+}
+
+export const sampleData = {
+  signingKeys,
+  templatesPage: () => toPage(templates()),
+  apiKeysPage: () => toPage(apiKeys()),
+  auditEventsPage: () => toPage(auditEvents()),
+  globalConnectionsPage: () => toPage(globalConnections()),
+  projectRolesPage: () => toPage(projectRoles()),
+  eventDestinations,
+  secretManagers,
+};
diff --git a/packages/web/src/app/routes/platform/security/api-keys/index.tsx b/packages/web/src/app/routes/platform/security/api-keys/index.tsx
index b59cd49b8003..ebf2f091bfff 100644
--- a/packages/web/src/app/routes/platform/security/api-keys/index.tsx
+++ b/packages/web/src/app/routes/platform/security/api-keys/index.tsx
@@ -3,7 +3,6 @@ import { t } from 'i18next';
 import { Key, MoreHorizontal, Trash } from 'lucide-react';
 
 import { CenteredPage } from '@/app/components/centered-page';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import { NewApiKeyDialog } from '@/app/routes/platform/security/api-keys/new-api-key-dialog';
 import { AnimatedIconButton } from '@/components/custom/animated-icon-button';
 import { ConfirmationDeleteDialog } from '@/components/custom/delete-dialog';
@@ -30,114 +29,105 @@ import { apiKeyApi, apiKeyQueries } from '@/features/platform-admin';
 import { platformHooks } from '@/hooks/platform-hooks';
 import { formatUtils } from '@/lib/format-utils';
 
+import { sampleData } from '../../sample-data';
+
 const ApiKeysPage = () => {
   const { platform } = platformHooks.useCurrentPlatform();
-
   const { data, isLoading, refetch } = apiKeyQueries.useApiKeys();
-
-  const keys: ApiKeyResponseWithoutValue[] = data?.data ?? [];
+  const isSample = !platform.plan.apiKeysEnabled;
+  const keys: ApiKeyResponseWithoutValue[] = isSample
+    ? sampleData.apiKeysPage().data
+    : data?.data ?? [];
 
   return (
-    <LockedFeatureGuard
-      featureKey="API"
-      locked={!platform.plan.apiKeysEnabled}
-      lockTitle={t('Enable API Keys')}
-      lockDescription={t(
-        'Create and manage API keys to access Activepieces APIs.',
-      )}
-      lockVideoUrl="https://cdn.activepieces.com/videos/showcase/api-keys.mp4"
+    <CenteredPage
+      title={t('API Keys')}
+      description={t('Manage API keys to access Activepieces APIs.')}
+      actions={
+        <NewApiKeyDialog onCreate={() => refetch()}>
+          <AnimatedIconButton icon={PlusIcon} iconSize={16} size="sm">
+            {t('New API Key')}
+          </AnimatedIconButton>
+        </NewApiKeyDialog>
+      }
     >
-      <CenteredPage
-        title={t('API Keys')}
-        description={t('Manage API keys to access Activepieces APIs.')}
-        actions={
-          <NewApiKeyDialog onCreate={() => refetch()}>
-            <AnimatedIconButton icon={PlusIcon} iconSize={16} size="sm">
-              {t('New API Key')}
-            </AnimatedIconButton>
-          </NewApiKeyDialog>
-        }
-      >
-        {isLoading && (
-          <SkeletonList numberOfItems={3} className="w-full h-[72px]" />
-        )}
+      {isLoading && !isSample && (
+        <SkeletonList numberOfItems={3} className="w-full h-[72px]" />
+      )}
 
-        {!isLoading && keys.length === 0 && (
-          <div className="flex flex-col items-center gap-3 py-12 text-muted-foreground">
-            <Key className="size-10" />
-            <p className="text-sm">
-              {t('No API keys yet. Create one to get started.')}
-            </p>
-          </div>
-        )}
+      {!isLoading && keys.length === 0 && (
+        <div className="flex flex-col items-center gap-3 py-12 text-muted-foreground">
+          <Key className="size-10" />
+          <p className="text-sm">
+            {t('No API keys yet. Create one to get started.')}
+          </p>
+        </div>
+      )}
 
-        {!isLoading && keys.length > 0 && (
-          <ItemGroup className="gap-2">
-            {keys.map((apiKey) => (
-              <Item key={apiKey.id} variant="outline" size="sm">
-                <ItemMedia variant="icon">
-                  <Key />
-                </ItemMedia>
-                <ItemContent>
-                  <ItemTitle>{apiKey.displayName}</ItemTitle>
-                  <ItemDescription className="text-xs">
-                    <span className="font-mono">
-                      sk-...{apiKey.truncatedValue}
-                    </span>
-                    {' · '}
-                    {t('Created')}{' '}
-                    {formatUtils.formatDateToAgo(new Date(apiKey.created))}
-                    {apiKey.lastUsedAt ? (
-                      <>
-                        {' '}
-                        · {t('Last used')}{' '}
-                        {formatUtils.formatDateToAgo(
-                          new Date(apiKey.lastUsedAt),
-                        )}
-                      </>
-                    ) : (
-                      <> · {t('Never used')}</>
-                    )}
-                  </ItemDescription>
-                </ItemContent>
-                <ItemActions>
-                  <DropdownMenu modal={true}>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" size="sm" className="size-8 p-0">
-                        <MoreHorizontal className="size-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <ConfirmationDeleteDialog
-                        title={t('Revoke API Key')}
-                        message={t(
-                          'Revoking this API key will immediately break any integrations using it. This action cannot be undone.',
-                        )}
-                        entityName={t('API Key')}
-                        buttonText={t('Revoke')}
-                        mutationFn={async () => {
-                          await apiKeyApi.delete(apiKey.id);
-                          refetch();
-                        }}
-                        onError={() => internalErrorToast()}
+      {!isLoading && keys.length > 0 && (
+        <ItemGroup className="gap-2">
+          {keys.map((apiKey) => (
+            <Item key={apiKey.id} variant="outline" size="sm">
+              <ItemMedia variant="icon">
+                <Key />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>{apiKey.displayName}</ItemTitle>
+                <ItemDescription className="text-xs">
+                  <span className="font-mono">
+                    sk-...{apiKey.truncatedValue}
+                  </span>
+                  {' · '}
+                  {t('Created')}{' '}
+                  {formatUtils.formatDateToAgo(new Date(apiKey.created))}
+                  {apiKey.lastUsedAt ? (
+                    <>
+                      {' '}
+                      · {t('Last used')}{' '}
+                      {formatUtils.formatDateToAgo(new Date(apiKey.lastUsedAt))}
+                    </>
+                  ) : (
+                    <> · {t('Never used')}</>
+                  )}
+                </ItemDescription>
+              </ItemContent>
+              <ItemActions>
+                <DropdownMenu modal={true}>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm" className="size-8 p-0">
+                      <MoreHorizontal className="size-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <ConfirmationDeleteDialog
+                      title={t('Revoke API Key')}
+                      message={t(
+                        'Revoking this API key will immediately break any integrations using it. This action cannot be undone.',
+                      )}
+                      entityName={t('API Key')}
+                      buttonText={t('Revoke')}
+                      mutationFn={async () => {
+                        await apiKeyApi.delete(apiKey.id);
+                        refetch();
+                      }}
+                      onError={() => internalErrorToast()}
+                    >
+                      <DropdownMenuItem
+                        className="text-destructive focus:text-destructive"
+                        onSelect={(e) => e.preventDefault()}
                       >
-                        <DropdownMenuItem
-                          className="text-destructive focus:text-destructive"
-                          onSelect={(e) => e.preventDefault()}
-                        >
-                          <Trash className="size-4 mr-2 text-destructive" />
-                          {t('Revoke API Key')}
-                        </DropdownMenuItem>
-                      </ConfirmationDeleteDialog>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </ItemActions>
-              </Item>
-            ))}
-          </ItemGroup>
-        )}
-      </CenteredPage>
-    </LockedFeatureGuard>
+                        <Trash className="size-4 mr-2 text-destructive" />
+                        {t('Revoke API Key')}
+                      </DropdownMenuItem>
+                    </ConfirmationDeleteDialog>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </ItemActions>
+            </Item>
+          ))}
+        </ItemGroup>
+      )}
+    </CenteredPage>
   );
 };
 
diff --git a/packages/web/src/app/routes/platform/security/audit-logs/index.tsx b/packages/web/src/app/routes/platform/security/audit-logs/index.tsx
index 2a8c31a1fb23..a383bf5bcece 100644
--- a/packages/web/src/app/routes/platform/security/audit-logs/index.tsx
+++ b/packages/web/src/app/routes/platform/security/audit-logs/index.tsx
@@ -30,7 +30,6 @@ import { Fragment, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import { DataTable, DataTableFilters } from '@/components/custom/data-table';
 import { DataTableColumnHeader } from '@/components/custom/data-table/data-table-column-header';
 import { FormattedDate } from '@/components/custom/formatted-date';
@@ -49,6 +48,8 @@ import { projectCollectionUtils } from '@/features/projects';
 import { platformHooks } from '@/hooks/platform-hooks';
 import { formatUtils } from '@/lib/format-utils';
 
+import { sampleData } from '../../sample-data';
+
 export default function AuditLogsPage() {
   const { platform } = platformHooks.useCurrentPlatform();
   const [selectedEvent, setSelectedEvent] = useState<ApplicationEvent | null>(
@@ -111,244 +112,229 @@ export default function AuditLogsPage() {
     isError,
     refetch,
   } = auditLogQueries.useAuditLogs();
+  const isSample = !platform.plan.auditLogEnabled;
+  const rows = isSample ? sampleData.auditEventsPage() : auditLogsData;
 
-  const isEnabled = platform.plan.auditLogEnabled;
   return (
-    <LockedFeatureGuard
-      featureKey="AUDIT_LOGS"
-      locked={!isEnabled}
-      lockTitle={t('Unlock Audit Logs')}
-      lockDescription={t(
-        'Comply with internal and external security policies by tracking activities done within your account',
-      )}
-    >
-      <div className="flex flex-col  w-full">
-        <DashboardPageHeader
-          description={t('Track activities done within your platform')}
-          title={t('Audit Logs')}
-        />
-        <DataTable
-          emptyStateTextTitle={t('No audit logs found')}
-          emptyStateTextDescription={t(
-            'Come back later when you have some activity to audit',
-          )}
-          emptyStateIcon={<History className="size-14" />}
-          filters={filters}
-          columns={[
-            {
-              accessorKey: 'action',
-              size: 180,
-              header: ({ column }) => (
-                <DataTableColumnHeader
-                  column={column}
-                  title={t('Action')}
-                  icon={Wand}
-                />
-              ),
-              cell: ({ row }) => {
-                const icon = convertToIcon(row.original);
-                return (
-                  <div className="text-left flex items-center gap-2">
-                    {!isNil(icon?.icon) && (
-                      <span className="text-muted-foreground shrink-0">
-                        {icon.icon}
-                      </span>
-                    )}
-                    {formatUtils.convertEnumToHumanReadable(
-                      row.original.action,
-                    )}
-                  </div>
-                );
-              },
-            },
-            {
-              accessorKey: 'details',
-              size: 320,
-              header: ({ column }) => (
-                <DataTableColumnHeader
-                  column={column}
-                  title={t('Details')}
-                  icon={FileText}
-                />
-              ),
-              cell: ({ row }) => {
-                return (
-                  <div className="text-left">
-                    {convertToDetails(row.original)}
-                  </div>
-                );
-              },
+    <div className="flex flex-col w-full">
+      <DashboardPageHeader
+        description={t('Track activities done within your platform')}
+        title={t('Audit Logs')}
+      />
+      <DataTable
+        emptyStateTextTitle={t('No audit logs found')}
+        emptyStateTextDescription={t(
+          'Come back later when you have some activity to audit',
+        )}
+        emptyStateIcon={<History className="size-14" />}
+        filters={filters}
+        columns={[
+          {
+            accessorKey: 'action',
+            size: 180,
+            header: ({ column }) => (
+              <DataTableColumnHeader
+                column={column}
+                title={t('Action')}
+                icon={Wand}
+              />
+            ),
+            cell: ({ row }) => {
+              const icon = convertToIcon(row.original);
+              return (
+                <div className="text-left flex items-center gap-2">
+                  {!isNil(icon?.icon) && (
+                    <span className="text-muted-foreground shrink-0">
+                      {icon.icon}
+                    </span>
+                  )}
+                  {formatUtils.convertEnumToHumanReadable(row.original.action)}
+                </div>
+              );
             },
-            {
-              accessorKey: 'userId',
-              size: 200,
-              header: ({ column }) => (
-                <DataTableColumnHeader
-                  column={column}
-                  title={t('Performed By')}
-                  icon={User}
-                />
-              ),
-              cell: ({ row }) => {
-                return (
-                  <div className="text-left">{row.original.userEmail}</div>
-                );
-              },
+          },
+          {
+            accessorKey: 'details',
+            size: 320,
+            header: ({ column }) => (
+              <DataTableColumnHeader
+                column={column}
+                title={t('Details')}
+                icon={FileText}
+              />
+            ),
+            cell: ({ row }) => {
+              return (
+                <div className="text-left">
+                  {convertToDetails(row.original)}
+                </div>
+              );
             },
-            {
-              accessorKey: 'projectId',
-              size: 130,
-              header: ({ column }) => (
-                <DataTableColumnHeader
-                  column={column}
-                  title={t('Project')}
-                  icon={Folder}
-                />
-              ),
-              cell: ({ row }) => {
-                return row.original.projectId &&
-                  'project' in row.original.data ? (
-                  <Link to={`/projects/${row.original.projectId}`}>
-                    <div className="text-left text-primary hover:underline">
-                      {row.original.data.project?.displayName}
-                    </div>
-                  </Link>
-                ) : (
-                  <div className="text-left">{t('N/A')}</div>
-                );
-              },
+          },
+          {
+            accessorKey: 'userId',
+            size: 200,
+            header: ({ column }) => (
+              <DataTableColumnHeader
+                column={column}
+                title={t('Performed By')}
+                icon={User}
+              />
+            ),
+            cell: ({ row }) => {
+              return <div className="text-left">{row.original.userEmail}</div>;
             },
-            {
-              accessorKey: 'created',
-              size: 110,
-              header: ({ column }) => (
-                <DataTableColumnHeader
-                  column={column}
-                  title={t('Created')}
-                  icon={Clock}
-                />
-              ),
-              cell: ({ row }) => {
-                return (
-                  <div className="text-left">
-                    <FormattedDate date={new Date(row.original.created)} />
+          },
+          {
+            accessorKey: 'projectId',
+            size: 130,
+            header: ({ column }) => (
+              <DataTableColumnHeader
+                column={column}
+                title={t('Project')}
+                icon={Folder}
+              />
+            ),
+            cell: ({ row }) => {
+              return row.original.projectId &&
+                'project' in row.original.data ? (
+                <Link to={`/projects/${row.original.projectId}`}>
+                  <div className="text-left text-primary hover:underline">
+                    {row.original.data.project?.displayName}
                   </div>
-                );
-              },
+                </Link>
+              ) : (
+                <div className="text-left">{t('N/A')}</div>
+              );
             },
-            {
-              id: 'view',
-              size: 50,
-              cell: ({ row }) => (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="size-8"
-                  onClick={() => {
-                    setSelectedEvent(row.original);
-                    setIsSheetOpen(true);
-                  }}
-                >
-                  <Eye className="size-4 text-muted-foreground" />
-                </Button>
-              ),
+          },
+          {
+            accessorKey: 'created',
+            size: 110,
+            header: ({ column }) => (
+              <DataTableColumnHeader
+                column={column}
+                title={t('Created')}
+                icon={Clock}
+              />
+            ),
+            cell: ({ row }) => {
+              return (
+                <div className="text-left">
+                  <FormattedDate date={new Date(row.original.created)} />
+                </div>
+              );
             },
-          ]}
-          page={auditLogsData}
-          isLoading={isLoading}
-          isError={isError}
-          errorStateEntity={t('audit logs')}
-          onRetry={refetch}
-        />
-        <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
-          <SheetContent className="w-[480px] sm:max-w-[480px] flex flex-col p-0">
-            <SheetHeader className="px-6 py-4 border-b shrink-0">
-              <SheetTitle className="text-base">
-                {formatUtils.convertEnumToHumanReadable(
-                  selectedEvent?.action ?? '',
-                )}
-              </SheetTitle>
-              <p className="text-sm text-muted-foreground mt-1">
-                {selectedEvent && convertToDetails(selectedEvent)}
+          },
+          {
+            id: 'view',
+            size: 50,
+            cell: ({ row }) => (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-8"
+                onClick={() => {
+                  setSelectedEvent(row.original);
+                  setIsSheetOpen(true);
+                }}
+              >
+                <Eye className="size-4 text-muted-foreground" />
+              </Button>
+            ),
+          },
+        ]}
+        page={rows}
+        isLoading={isSample ? false : isLoading}
+        isError={isSample ? false : isError}
+        errorStateEntity={t('audit logs')}
+        onRetry={refetch}
+      />
+      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <SheetContent className="w-[480px] sm:max-w-[480px] flex flex-col p-0">
+          <SheetHeader className="px-6 py-4 border-b shrink-0">
+            <SheetTitle className="text-base">
+              {formatUtils.convertEnumToHumanReadable(
+                selectedEvent?.action ?? '',
+              )}
+            </SheetTitle>
+            <p className="text-sm text-muted-foreground mt-1">
+              {selectedEvent && convertToDetails(selectedEvent)}
+            </p>
+          </SheetHeader>
+          <div className="flex-1 overflow-y-auto">
+            <div className="px-6 py-5 flex flex-col gap-4">
+              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                {t('Who & When')}
               </p>
-            </SheetHeader>
-            <div className="flex-1 overflow-y-auto">
-              <div className="px-6 py-5 flex flex-col gap-4">
-                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-                  {t('Who & When')}
-                </p>
-                <div className="grid grid-cols-[150px_1fr] gap-y-3 text-sm">
-                  {selectedEvent?.userEmail && (
-                    <>
-                      <span className="text-muted-foreground">
-                        {t('Performed By')}
-                      </span>
-                      <span className="font-medium">
-                        {selectedEvent.userEmail}
-                      </span>
-                    </>
-                  )}
-                  {selectedEvent?.projectDisplayName && (
-                    <>
-                      <span className="text-muted-foreground">
-                        {t('Project')}
-                      </span>
-                      <span className="font-medium">
-                        {selectedEvent.projectDisplayName}
-                      </span>
-                    </>
-                  )}
-                  {selectedEvent?.ip && (
-                    <>
-                      <span className="text-muted-foreground">
-                        {t('IP Address')}
-                      </span>
-                      <span className="font-medium">{selectedEvent.ip}</span>
-                    </>
-                  )}
-                  <span className="text-muted-foreground">{t('Created')}</span>
-                  <span className="font-medium">
-                    {selectedEvent && (
-                      <FormattedDate date={new Date(selectedEvent.created)} />
-                    )}
-                  </span>
-                </div>
-              </div>
-              {selectedEvent &&
-                extractEventDetails(selectedEvent).length > 0 && (
+              <div className="grid grid-cols-[150px_1fr] gap-y-3 text-sm">
+                {selectedEvent?.userEmail && (
                   <>
-                    <Separator />
-                    <div className="px-6 py-5 flex flex-col gap-4">
-                      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-                        {t('Event Details')}
-                      </p>
-                      <div className="grid grid-cols-[150px_1fr] gap-y-3 text-sm">
-                        {extractEventDetails(selectedEvent).map(
-                          ({ label, value }) => (
-                            <Fragment key={label}>
-                              <span className="text-muted-foreground">
-                                {label}
-                              </span>
-                              <span className="font-medium">{value}</span>
-                            </Fragment>
-                          ),
-                        )}
-                      </div>
-                    </div>
+                    <span className="text-muted-foreground">
+                      {t('Performed By')}
+                    </span>
+                    <span className="font-medium">
+                      {selectedEvent.userEmail}
+                    </span>
                   </>
                 )}
-              <Separator />
-              <div className="px-6 py-5 flex flex-col gap-4">
-                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-                  {t('Full Payload')}
-                </p>
-                <SimpleJsonViewer data={selectedEvent?.data ?? {}} />
+                {selectedEvent?.projectDisplayName && (
+                  <>
+                    <span className="text-muted-foreground">
+                      {t('Project')}
+                    </span>
+                    <span className="font-medium">
+                      {selectedEvent.projectDisplayName}
+                    </span>
+                  </>
+                )}
+                {selectedEvent?.ip && (
+                  <>
+                    <span className="text-muted-foreground">
+                      {t('IP Address')}
+                    </span>
+                    <span className="font-medium">{selectedEvent.ip}</span>
+                  </>
+                )}
+                <span className="text-muted-foreground">{t('Created')}</span>
+                <span className="font-medium">
+                  {selectedEvent && (
+                    <FormattedDate date={new Date(selectedEvent.created)} />
+                  )}
+                </span>
               </div>
             </div>
-          </SheetContent>
-        </Sheet>
-      </div>
-    </LockedFeatureGuard>
+            {selectedEvent && extractEventDetails(selectedEvent).length > 0 && (
+              <>
+                <Separator />
+                <div className="px-6 py-5 flex flex-col gap-4">
+                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    {t('Event Details')}
+                  </p>
+                  <div className="grid grid-cols-[150px_1fr] gap-y-3 text-sm">
+                    {extractEventDetails(selectedEvent).map(
+                      ({ label, value }) => (
+                        <Fragment key={label}>
+                          <span className="text-muted-foreground">{label}</span>
+                          <span className="font-medium">{value}</span>
+                        </Fragment>
+                      ),
+                    )}
+                  </div>
+                </div>
+              </>
+            )}
+            <Separator />
+            <div className="px-6 py-5 flex flex-col gap-4">
+              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                {t('Full Payload')}
+              </p>
+              <SimpleJsonViewer data={selectedEvent?.data ?? {}} />
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
   );
 }
 
diff --git a/packages/web/src/app/routes/platform/security/embed/index.tsx b/packages/web/src/app/routes/platform/security/embed/index.tsx
index b9851abe6388..974e77ab14a3 100644
--- a/packages/web/src/app/routes/platform/security/embed/index.tsx
+++ b/packages/web/src/app/routes/platform/security/embed/index.tsx
@@ -14,7 +14,6 @@ import {
 } from 'lucide-react';
 import { useState } from 'react';
 
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import { DataFetchErrorState } from '@/components/custom/data-fetch-error-state';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -26,6 +25,8 @@ import {
 import { flagsHooks } from '@/hooks/flags-hooks';
 import { platformHooks } from '@/hooks/platform-hooks';
 
+import { sampleData } from '../../sample-data';
+
 import { Stepper, StepKind, StepDef } from './stepper';
 import { AllowedDomainsStep } from './steps/allowed-domains-step';
 import { DnsStep } from './steps/dns-step';
@@ -48,7 +49,10 @@ const EmbedPage = () => {
     isLoading: isKeysLoading,
     refetch,
   } = signingKeyQueries.useSigningKeys();
-  const signingKeys: SigningKey[] = data?.data ?? [];
+  const isSample = !platform.plan.embeddingEnabled;
+  const signingKeys: SigningKey[] = isSample
+    ? sampleData.signingKeys()
+    : data?.data ?? [];
 
   const isLoading = (isCloud && isSubdomainLoading) || isKeysLoading;
 
@@ -126,72 +130,63 @@ const EmbedPage = () => {
     (displayedStep?.kind === 'hostname' || displayedStep?.kind === 'dns');
 
   return (
-    <LockedFeatureGuard
-      featureKey="SIGNING_KEYS"
-      locked={!platform.plan.embeddingEnabled}
-      lockTitle={t('Unlock Embedding Through JS SDK')}
-      lockDescription={t(
-        'Enable signing keys to access embedding functionalities.',
-      )}
-    >
-      <div className="w-full max-w-4/5 2xl:max-w-6xl mx-auto py-6">
-        <div className="flex flex-col gap-1">
-          <h1 className="text-xl font-medium">{t('Embed Onboarding')}</h1>
-          <div className="text-sm text-muted-foreground">
-            {description}
-            <Button
-              variant="link"
-              size="sm"
-              className="h-auto p-0 mt-0.5 ml-1"
-              asChild
+    <div className="w-full max-w-4/5 2xl:max-w-6xl mx-auto py-6">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-xl font-medium">{t('Embed Onboarding')}</h1>
+        <div className="text-sm text-muted-foreground">
+          {description}
+          <Button
+            variant="link"
+            size="sm"
+            className="h-auto p-0 mt-0.5 ml-1"
+            asChild
+          >
+            <a
+              href="https://www.activepieces.com/docs/embedding/overview"
+              target="_blank"
+              rel="noopener noreferrer"
             >
-              <a
-                href="https://www.activepieces.com/docs/embedding/overview"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {t('Read more')}
-                <ExternalLink className="size-3" />
-              </a>
-            </Button>
-          </div>
+              {t('Read more')}
+              <ExternalLink className="size-3" />
+            </a>
+          </Button>
         </div>
-        <Separator className="mt-4 mb-12" />
-
-        <div className="grid grid-cols-[16rem_1fr] gap-16">
-          <Stepper
-            steps={steps}
-            completion={stepCompletion}
-            activeStepIndex={activeStepIndex}
-            displayedIndex={displayedIndex}
-            onStepClick={handleStepClick}
-          />
-
-          <div className="min-w-0">
-            {isLoading ? (
-              <SkeletonList numberOfItems={3} className="w-full h-[72px]" />
-            ) : subdomainStepFailed ? (
-              <DataFetchErrorState
-                entity={t('the embed subdomain')}
-                onRetry={refetchSubdomain}
-              />
-            ) : displayedStep?.kind === 'hostname' ? (
-              <HostnameStep subdomain={subdomain} />
-            ) : displayedStep?.kind === 'dns' ? (
-              <DnsStep subdomain={subdomain} />
-            ) : displayedStep?.kind === 'allowed-domains' ? (
-              <AllowedDomainsStep allowedEmbedOrigins={allowedEmbedOrigins} />
-            ) : displayedStep?.kind === 'signing-keys' ? (
-              <SigningKeysStep
-                signingKeys={signingKeys}
-                isLoading={isKeysLoading}
-                refetch={refetch}
-              />
-            ) : null}
-          </div>
+      </div>
+      <Separator className="mt-4 mb-12" />
+
+      <div className="grid grid-cols-[16rem_1fr] gap-16">
+        <Stepper
+          steps={steps}
+          completion={stepCompletion}
+          activeStepIndex={activeStepIndex}
+          displayedIndex={displayedIndex}
+          onStepClick={handleStepClick}
+        />
+
+        <div className="min-w-0">
+          {isLoading ? (
+            <SkeletonList numberOfItems={3} className="w-full h-[72px]" />
+          ) : subdomainStepFailed ? (
+            <DataFetchErrorState
+              entity={t('the embed subdomain')}
+              onRetry={refetchSubdomain}
+            />
+          ) : displayedStep?.kind === 'hostname' ? (
+            <HostnameStep subdomain={subdomain} />
+          ) : displayedStep?.kind === 'dns' ? (
+            <DnsStep subdomain={subdomain} />
+          ) : displayedStep?.kind === 'allowed-domains' ? (
+            <AllowedDomainsStep allowedEmbedOrigins={allowedEmbedOrigins} />
+          ) : displayedStep?.kind === 'signing-keys' ? (
+            <SigningKeysStep
+              signingKeys={signingKeys}
+              isLoading={isKeysLoading}
+              refetch={refetch}
+            />
+          ) : null}
         </div>
       </div>
-    </LockedFeatureGuard>
+    </div>
   );
 };
 
diff --git a/packages/web/src/app/routes/platform/security/project-role/index.tsx b/packages/web/src/app/routes/platform/security/project-role/index.tsx
index 0812a096d29e..a860409d1419 100644
--- a/packages/web/src/app/routes/platform/security/project-role/index.tsx
+++ b/packages/web/src/app/routes/platform/security/project-role/index.tsx
@@ -1,7 +1,6 @@
 import { t } from 'i18next';
 
 import { CenteredPage } from '@/app/components/centered-page';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import { AnimatedIconButton } from '@/components/custom/animated-icon-button';
 import { PlusIcon } from '@/components/icons/plus';
 import {
@@ -12,6 +11,8 @@ import {
 import { projectRoleQueries } from '@/features/platform-admin';
 import { platformHooks } from '@/hooks/platform-hooks';
 
+import { sampleData } from '../../sample-data';
+
 import { ProjectRoleDialog } from './project-role-dialog';
 import { ProjectRolesTable } from './project-roles-table';
 
@@ -21,6 +22,8 @@ const ProjectRolePage = () => {
   const { data, isLoading, refetch } = projectRoleQueries.useProjectRoles(
     platform.plan.projectRolesEnabled,
   );
+  const isSample = !platform.plan.projectRolesEnabled;
+  const roles = isSample ? sampleData.projectRolesPage() : data;
 
   const newRoleButton = !platform.plan.customRolesEnabled ? (
     <Tooltip>
@@ -46,29 +49,19 @@ const ProjectRolePage = () => {
   );
 
   return (
-    <LockedFeatureGuard
-      featureKey="TEAM"
-      locked={!platform.plan.projectRolesEnabled}
-      lockTitle={t('Project Role Management')}
-      lockDescription={t(
-        'Define custom roles and permissions to control what your team members can access and modify',
+    <CenteredPage
+      title={t('Project Role Management')}
+      description={t(
+        'Define custom roles and permissions that can be assigned to your team members',
       )}
-      lockVideoUrl="https://cdn.activepieces.com/videos/showcase/roles.mp4"
+      actions={newRoleButton}
     >
-      <CenteredPage
-        title={t('Project Role Management')}
-        description={t(
-          'Define custom roles and permissions that can be assigned to your team members',
-        )}
-        actions={newRoleButton}
-      >
-        <ProjectRolesTable
-          projectRoles={data}
-          isLoading={isLoading}
-          refetch={refetch}
-        />
-      </CenteredPage>
-    </LockedFeatureGuard>
+      <ProjectRolesTable
+        projectRoles={roles}
+        isLoading={isSample ? false : isLoading}
+        refetch={refetch}
+      />
+    </CenteredPage>
   );
 };
 
diff --git a/packages/web/src/app/routes/platform/security/secret-managers/index.tsx b/packages/web/src/app/routes/platform/security/secret-managers/index.tsx
index 7aa4ad96844a..8dba1f1bdd9b 100644
--- a/packages/web/src/app/routes/platform/security/secret-managers/index.tsx
+++ b/packages/web/src/app/routes/platform/security/secret-managers/index.tsx
@@ -16,7 +16,6 @@ import {
 } from 'lucide-react';
 
 import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import { AnimatedIconButton } from '@/components/custom/animated-icon-button';
 import { DataTable, RowDataWithActions } from '@/components/custom/data-table';
 import { DataTableColumnHeader } from '@/components/custom/data-table/data-table-column-header';
@@ -34,6 +33,8 @@ import { PieceIcon } from '@/features/pieces';
 import { secretManagersHooks } from '@/features/secret-managers';
 import { platformHooks } from '@/hooks/platform-hooks';
 
+import { sampleData } from '../../sample-data';
+
 import AddEditSecretManagerConnectionDialog from './connect-secret-manager-dialog';
 
 const SecretManagersPage = () => {
@@ -51,9 +52,9 @@ const SecretManagersPage = () => {
 
   const isLoading = isLoadingConnections;
 
-  const page = connections
-    ? { data: connections, next: null, previous: null }
-    : undefined;
+  const isSample = !platform.plan.secretManagersEnabled;
+  const rows = isSample ? sampleData.secretManagers() : connections;
+  const page = rows ? { data: rows, next: null, previous: null } : undefined;
 
   const columns: ColumnDef<
     RowDataWithActions<SecretManagerConnectionWithStatus>,
@@ -191,39 +192,32 @@ const SecretManagersPage = () => {
   ];
 
   return (
-    <LockedFeatureGuard
-      featureKey="SECRET_MANAGERS"
-      locked={!platform.plan.secretManagersEnabled}
-      lockTitle={t('Enable Secret Managers')}
-      lockDescription={t('Manage your secrets from a single and secure place')}
-    >
-      <div className="flex-col w-full">
-        <DashboardPageHeader
-          title={t('Secret Managers')}
-          description={t('Manage Secret Manager connections')}
-        >
-          <AddEditSecretManagerConnectionDialog>
-            <AnimatedIconButton icon={PlusIcon} iconSize={16} size="sm">
-              {t('New Connection')}
-            </AnimatedIconButton>
-          </AddEditSecretManagerConnectionDialog>
-        </DashboardPageHeader>
-        <DataTable
-          emptyStateTextTitle={t('No connections found')}
-          emptyStateTextDescription={t(
-            'Add a secret manager connection to manage your secrets',
-          )}
-          emptyStateIcon={<KeyRound className="size-14" />}
-          columns={columns}
-          page={page}
-          isLoading={isLoading}
-          isError={isConnectionsError}
-          errorStateEntity={t('secret managers')}
-          onRetry={refetchConnections}
-          hidePagination={true}
-        />
-      </div>
-    </LockedFeatureGuard>
+    <div className="flex-col w-full">
+      <DashboardPageHeader
+        title={t('Secret Managers')}
+        description={t('Manage Secret Manager connections')}
+      >
+        <AddEditSecretManagerConnectionDialog>
+          <AnimatedIconButton icon={PlusIcon} iconSize={16} size="sm">
+            {t('New Connection')}
+          </AnimatedIconButton>
+        </AddEditSecretManagerConnectionDialog>
+      </DashboardPageHeader>
+      <DataTable
+        emptyStateTextTitle={t('No connections found')}
+        emptyStateTextDescription={t(
+          'Add a secret manager connection to manage your secrets',
+        )}
+        emptyStateIcon={<KeyRound className="size-14" />}
+        columns={columns}
+        page={page}
+        isLoading={isSample ? false : isLoading}
+        isError={isSample ? false : isConnectionsError}
+        errorStateEntity={t('secret managers')}
+        onRetry={refetchConnections}
+        hidePagination={true}
+      />
+    </div>
   );
 };
 
diff --git a/packages/web/src/app/routes/platform/security/sso/index.tsx b/packages/web/src/app/routes/platform/security/sso/index.tsx
index 38b5a549f09e..328e9c8ff1c5 100644
--- a/packages/web/src/app/routes/platform/security/sso/index.tsx
+++ b/packages/web/src/app/routes/platform/security/sso/index.tsx
@@ -4,7 +4,6 @@ import { CheckCircle, LockIcon, MailIcon, Earth } from 'lucide-react';
 import { toast } from 'sonner';
 
 import { CenteredPage } from '@/app/components/centered-page';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import { AllowedDomainDialog } from '@/app/routes/platform/security/sso/allowed-domain';
 import { ConfigureSamlDialog } from '@/app/routes/platform/security/sso/saml-dialog';
 import { Badge } from '@/components/ui/badge';
@@ -50,129 +49,118 @@ const SSOPage = () => {
     });
 
   return (
-    <LockedFeatureGuard
-      featureKey="SSO"
-      locked={!platform.plan.ssoEnabled}
-      lockTitle={t('Enable Single Sign On')}
-      lockDescription={t(
-        'Let your users sign in with your current SSO provider or give them self serve sign up access',
-      )}
+    <CenteredPage
+      title={t('Single Sign On')}
+      description={t('Manage single sign on providers')}
     >
-      <CenteredPage
-        title={t('Single Sign On')}
-        description={t('Manage single sign on providers')}
-      >
-        <div className="flex flex-col gap-4">
-          <Item variant="outline">
-            <ItemMedia variant="icon">
-              <Earth />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>{t('Allowed Domains')}</ItemTitle>
-              <ItemDescription>
-                {t('Restrict authentication to specific email domains.')}
-              </ItemDescription>
-              {(platform?.allowedAuthDomains ?? []).length > 0 && (
-                <div className="mt-1 gap-2 flex">
-                  {(platform?.allowedAuthDomains ?? []).map((text, index) => (
-                    <Badge key={index} variant={'outline'}>
-                      {text}
-                    </Badge>
-                  ))}
-                </div>
-              )}
-            </ItemContent>
-            <ItemActions>
-              <AllowedDomainDialog platform={platform} refetch={refetch} />
-            </ItemActions>
-          </Item>
+      <div className="flex flex-col gap-4">
+        <Item variant="outline">
+          <ItemMedia variant="icon">
+            <Earth />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>{t('Allowed Domains')}</ItemTitle>
+            <ItemDescription>
+              {t('Restrict authentication to specific email domains.')}
+            </ItemDescription>
+            {(platform?.allowedAuthDomains ?? []).length > 0 && (
+              <div className="mt-1 gap-2 flex">
+                {(platform?.allowedAuthDomains ?? []).map((text, index) => (
+                  <Badge key={index} variant={'outline'}>
+                    {text}
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </ItemContent>
+          <ItemActions>
+            <AllowedDomainDialog platform={platform} refetch={refetch} />
+          </ItemActions>
+        </Item>
 
-          <Item variant="outline">
-            <ItemMedia variant="icon">
-              <img className="size-6" src={GoogleIcon} alt="icon" />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>Google</ItemTitle>
-              <ItemDescription>
-                {t(
-                  "Allow logins through google's single sign-on functionality.",
-                )}
-              </ItemDescription>
-            </ItemContent>
-            <ItemActions>
-              <Switch
-                checked={platform.googleAuthEnabled}
-                onCheckedChange={() =>
-                  toggleGoogleAuth({
-                    googleAuthEnabled: !platform.googleAuthEnabled,
-                  })
-                }
-                disabled={isGoogleAuthPending}
-              />
-            </ItemActions>
-          </Item>
+        <Item variant="outline">
+          <ItemMedia variant="icon">
+            <img className="size-6" src={GoogleIcon} alt="icon" />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Google</ItemTitle>
+            <ItemDescription>
+              {t("Allow logins through google's single sign-on functionality.")}
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Switch
+              checked={platform.googleAuthEnabled}
+              onCheckedChange={() =>
+                toggleGoogleAuth({
+                  googleAuthEnabled: !platform.googleAuthEnabled,
+                })
+              }
+              disabled={isGoogleAuthPending}
+            />
+          </ItemActions>
+        </Item>
 
-          <Item variant="outline">
-            <ItemMedia variant="icon">
-              <LockIcon />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>{t('SAML 2.0')}</ItemTitle>
-              <ItemDescription>
-                {t(
-                  "Allow logins through saml 2.0's single sign-on functionality.",
-                )}
-              </ItemDescription>
-              {platform.ssoDomain && (
-                <div className="mt-1 gap-2 flex items-center">
-                  <Badge variant="outline">{platform.ssoDomain}</Badge>
-                  {ssoDomainVerified ? (
-                    <span className="flex items-center gap-1 text-xs text-success-600">
-                      <CheckCircle className="size-3" />
-                      {t('Verified')}
-                    </span>
-                  ) : (
-                    <span className="text-xs text-warning">
-                      {t('Pending verification')}
-                    </span>
-                  )}
-                </div>
+        <Item variant="outline">
+          <ItemMedia variant="icon">
+            <LockIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>{t('SAML 2.0')}</ItemTitle>
+            <ItemDescription>
+              {t(
+                "Allow logins through saml 2.0's single sign-on functionality.",
               )}
-            </ItemContent>
-            <ItemActions>
-              <ConfigureSamlDialog
-                platform={platform}
-                refetch={refetch}
-                connected={samlConnected}
-              />
-            </ItemActions>
-          </Item>
+            </ItemDescription>
+            {platform.ssoDomain && (
+              <div className="mt-1 gap-2 flex items-center">
+                <Badge variant="outline">{platform.ssoDomain}</Badge>
+                {ssoDomainVerified ? (
+                  <span className="flex items-center gap-1 text-xs text-success-600">
+                    <CheckCircle className="size-3" />
+                    {t('Verified')}
+                  </span>
+                ) : (
+                  <span className="text-xs text-warning">
+                    {t('Pending verification')}
+                  </span>
+                )}
+              </div>
+            )}
+          </ItemContent>
+          <ItemActions>
+            <ConfigureSamlDialog
+              platform={platform}
+              refetch={refetch}
+              connected={samlConnected}
+            />
+          </ItemActions>
+        </Item>
 
-          <Item variant="outline">
-            <ItemMedia variant="icon">
-              <MailIcon />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>{t('Allowed Email Login')}</ItemTitle>
-              <ItemDescription>
-                {t('Allow logins through email and password.')}
-              </ItemDescription>
-            </ItemContent>
-            <ItemActions>
-              <Switch
-                checked={emailAuthEnabled}
-                onCheckedChange={() =>
-                  toggleEmailAuthentication({
-                    emailAuthEnabled: !platform.emailAuthEnabled,
-                  })
-                }
-                disabled={isEmailAuthPending}
-              />
-            </ItemActions>
-          </Item>
-        </div>
-      </CenteredPage>
-    </LockedFeatureGuard>
+        <Item variant="outline">
+          <ItemMedia variant="icon">
+            <MailIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>{t('Allowed Email Login')}</ItemTitle>
+            <ItemDescription>
+              {t('Allow logins through email and password.')}
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Switch
+              checked={emailAuthEnabled}
+              onCheckedChange={() =>
+                toggleEmailAuthentication({
+                  emailAuthEnabled: !platform.emailAuthEnabled,
+                })
+              }
+              disabled={isEmailAuthPending}
+            />
+          </ItemActions>
+        </Item>
+      </div>
+    </CenteredPage>
   );
 };
 
diff --git a/packages/web/src/app/routes/platform/setup/connections/index.tsx b/packages/web/src/app/routes/platform/setup/connections/index.tsx
index 8b9337c3e4c6..44efc266948a 100644
--- a/packages/web/src/app/routes/platform/setup/connections/index.tsx
+++ b/packages/web/src/app/routes/platform/setup/connections/index.tsx
@@ -19,7 +19,6 @@ import { useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import { NewConnectionDialog } from '@/app/connections/new-connection-dialog';
 import { ReconnectButtonDialog } from '@/app/connections/reconnect-button-dialog';
 import { AnimatedIconButton } from '@/components/custom/animated-icon-button';
@@ -53,6 +52,8 @@ import { useAuthorization } from '@/hooks/authorization-hooks';
 import { platformHooks } from '@/hooks/platform-hooks';
 import { formatUtils } from '@/lib/format-utils';
 
+import { sampleData } from '../../sample-data';
+
 const STATUS_QUERY_PARAM = 'status';
 const filters: DataTableFilters<keyof AppConnectionWithoutSensitiveData>[] = [
   {
@@ -76,13 +77,13 @@ const filters: DataTableFilters<keyof AppConnectionWithoutSensitiveData>[] = [
 ];
 
 const GlobalConnectionsTable = () => {
+  const { platform } = platformHooks.useCurrentPlatform();
   const [refresh, setRefresh] = useState(0);
   const [selectedRows, setSelectedRows] = useState<
     Array<AppConnectionWithoutSensitiveData>
   >([]);
   const { checkAccess } = useAuthorization();
   const location = useLocation();
-  const { platform } = platformHooks.useCurrentPlatform();
 
   const columns: ColumnDef<
     RowDataWithActions<AppConnectionWithoutSensitiveData>,
@@ -229,6 +230,7 @@ const GlobalConnectionsTable = () => {
     staleTime: 0,
     gcTime: 0,
   });
+  const isSample = !platform.plan.globalConnectionsEnabled;
 
   const userHasPermissionToWriteAppConnection = checkAccess(
     Permission.WRITE_APP_CONNECTION,
@@ -308,40 +310,28 @@ const GlobalConnectionsTable = () => {
 
   return (
     <div className="flex-col w-full">
-      <LockedFeatureGuard
-        featureKey="GLOBAL_CONNECTIONS"
-        locked={!platform.plan.globalConnectionsEnabled}
-        lockTitle={t('Enable Global Connections')}
-        lockDescription={t(
-          'Manage platform-wide connections to external systems.',
+      <DashboardPageHeader
+        description={t('Manage platform-wide connections to external systems.')}
+        title={t('Global Connections')}
+      />
+      <DataTable
+        emptyStateTextTitle={t('No global connections found')}
+        emptyStateTextDescription={t(
+          'Create a global connection that can be shared to multiple projects',
         )}
-        lockVideoUrl="https://cdn.activepieces.com/videos/showcase/global-connections.mp4"
-      >
-        <DashboardPageHeader
-          description={t(
-            'Manage platform-wide connections to external systems.',
-          )}
-          title={t('Global Connections')}
-        />
-        <DataTable
-          emptyStateTextTitle={t('No global connections found')}
-          emptyStateTextDescription={t(
-            'Create a global connection that can be shared to multiple projects',
-          )}
-          emptyStateIcon={<Globe className="size-14" />}
-          columns={columns}
-          page={globalConnections}
-          isLoading={isLoadingGlobalConnections}
-          isError={isGlobalConnectionsError}
-          errorStateEntity={t('connections')}
-          onRetry={refetchGlobalConnections}
-          filters={filters}
-          selectColumn={true}
-          onSelectedRowsChange={setSelectedRows}
-          bulkActions={bulkActions}
-          toolbarButtons={toolbarButtons}
-        />
-      </LockedFeatureGuard>
+        emptyStateIcon={<Globe className="size-14" />}
+        columns={columns}
+        page={isSample ? sampleData.globalConnectionsPage() : globalConnections}
+        isLoading={isSample ? false : isLoadingGlobalConnections}
+        isError={isGlobalConnectionsError}
+        errorStateEntity={t('connections')}
+        onRetry={refetchGlobalConnections}
+        filters={filters}
+        selectColumn={true}
+        onSelectedRowsChange={setSelectedRows}
+        bulkActions={bulkActions}
+        toolbarButtons={toolbarButtons}
+      />
     </div>
   );
 };
diff --git a/packages/web/src/app/routes/platform/setup/templates/index.tsx b/packages/web/src/app/routes/platform/setup/templates/index.tsx
index 4cb45d79d53d..df4971797b81 100644
--- a/packages/web/src/app/routes/platform/setup/templates/index.tsx
+++ b/packages/web/src/app/routes/platform/setup/templates/index.tsx
@@ -8,7 +8,6 @@ import { useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
 
 import { DashboardPageHeader } from '@/app/components/dashboard-page-header';
-import { LockedFeatureGuard } from '@/app/components/locked-feature-guard';
 import { AnimatedIconButton } from '@/components/custom/animated-icon-button';
 import {
   DataTable,
@@ -30,13 +29,15 @@ import { PieceIconList } from '@/features/pieces';
 import { templatesApi, templatesMutations } from '@/features/templates';
 import { platformHooks } from '@/hooks/platform-hooks';
 
+import { sampleData } from '../../sample-data';
+
 import { CreateTemplateDialog } from './create-template-dialog';
 import { UpdateTemplateDialog } from './update-template-dialog';
 
 const PlatformTemplatesPage = () => {
-  const { platform } = platformHooks.useCurrentPlatform();
-
   const [searchParams] = useSearchParams();
+  const { platform } = platformHooks.useCurrentPlatform();
+  const isSample = !platform.plan.manageTemplatesEnabled;
   const { data, isLoading, isError, refetch } = useQuery({
     queryKey: ['templates', searchParams.toString()],
     staleTime: 0,
@@ -204,65 +205,54 @@ const PlatformTemplatesPage = () => {
     [refetch],
   );
 
-  const isEnabled = platform.plan.manageTemplatesEnabled;
   return (
-    <LockedFeatureGuard
-      featureKey="TEMPLATES"
-      locked={!isEnabled}
-      lockTitle={t('Unlock Templates')}
-      lockDescription={t(
-        'Convert the most common automations into reusable templates 1 click away from your users',
-      )}
-      lockVideoUrl="https://cdn.activepieces.com/videos/showcase/templates.mp4"
-    >
-      <div className="flex flex-col w-full">
-        <DashboardPageHeader
-          description={t(
-            'Convert the most common automations into reusable templates',
-          )}
-          title={t('Templates')}
-        />
-        <DataTable
-          emptyStateTextTitle={t('No templates found')}
-          emptyStateTextDescription={t(
-            'Create a template for your user to inspire them',
-          )}
-          emptyStateIcon={<FileText className="size-14" />}
-          columns={columnsWithCheckbox}
-          page={data}
-          hidePagination={true}
-          isLoading={isLoading}
-          isError={isError}
-          errorStateEntity={t('templates')}
-          onRetry={refetch}
-          bulkActions={bulkActions}
-          toolbarButtons={toolbarButtons}
-          actions={[
-            (row) => {
-              return (
-                <div className="flex items-end justify-end">
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <UpdateTemplateDialog
-                        onDone={() => refetch()}
-                        template={row}
-                      >
-                        <Button variant="ghost" className="size-8 p-0">
-                          <Pencil className="size-4" />
-                        </Button>
-                      </UpdateTemplateDialog>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom">
-                      {t('Edit template')}
-                    </TooltipContent>
-                  </Tooltip>
-                </div>
-              );
-            },
-          ]}
-        />
-      </div>
-    </LockedFeatureGuard>
+    <div className="flex flex-col w-full">
+      <DashboardPageHeader
+        description={t(
+          'Convert the most common automations into reusable templates',
+        )}
+        title={t('Templates')}
+      />
+      <DataTable
+        emptyStateTextTitle={t('No templates found')}
+        emptyStateTextDescription={t(
+          'Create a template for your user to inspire them',
+        )}
+        emptyStateIcon={<FileText className="size-14" />}
+        columns={columnsWithCheckbox}
+        page={isSample ? sampleData.templatesPage() : data}
+        hidePagination={true}
+        isLoading={isLoading}
+        isError={isError}
+        errorStateEntity={t('templates')}
+        onRetry={refetch}
+        bulkActions={bulkActions}
+        toolbarButtons={toolbarButtons}
+        actions={[
+          (row) => {
+            return (
+              <div className="flex items-end justify-end">
+                <Tooltip>
+                  <TooltipTrigger>
+                    <UpdateTemplateDialog
+                      onDone={() => refetch()}
+                      template={row}
+                    >
+                      <Button variant="ghost" className="size-8 p-0">
+                        <Pencil className="size-4" />
+                      </Button>
+                    </UpdateTemplateDialog>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    {t('Edit template')}
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            );
+          },
+        ]}
+      />
+    </div>
   );
 };
 
diff --git a/packages/web/test/app/billing/feature-gating.test.tsx b/packages/web/test/app/billing/feature-gating.test.tsx
index 2253645177c3..0481637c8b8d 100644
--- a/packages/web/test/app/billing/feature-gating.test.tsx
+++ b/packages/web/test/app/billing/feature-gating.test.tsx
@@ -94,6 +94,7 @@ vi.mock('@/components/ui/sidebar-shadcn', () => ({
   ),
 }));
 
+import { FeatureSample } from '@/app/components/feature-sample';
 import { FeatureTeaser } from '@/app/components/feature-teaser';
 import { CreateProjectButton } from '@/features/projects/components/create-project-button';
 
@@ -242,3 +243,25 @@ describe('feature teaser', () => {
     );
   });
 });
+
+describe('feature sample', () => {
+  it('offers contact sales on community', () => {
+    edition = 'ce';
+    render(
+      <FeatureSample locked title="Unlock Audit Logs" featureKey="AUDIT_LOGS">
+        <div />
+      </FeatureSample>,
+    );
+    expect(screen.getByRole('button', { name: /contact sales/i })).toBeDefined();
+  });
+
+  it('shows no sales form for a surface with no feature key', () => {
+    edition = 'ce';
+    render(
+      <FeatureSample locked title="Unlock Audit Logs">
+        <div />
+      </FeatureSample>,
+    );
+    expect(screen.queryByRole('button', { name: /contact sales/i })).toBeNull();
+  });
+});

From 85099ba4370edaac459fcc25be637c7ff352bda9 Mon Sep 17 00:00:00 2001
From: Othman Abu Ajamieh <52608229+othmanemad@users.noreply.github.com>
Date: Wed, 23 Sep 2026 12:18:28 +0300
Subject: [PATCH 4/4] ci(pr-size): give tests their own exempt category
 (#15674)

---
 .../engineering/ci-pr-review-hygiene.md       |  5 ++-
 tools/scripts/pr-size-check.test.ts           | 43 +++++++++++++++++++
 tools/scripts/pr-size-check.ts                | 11 +++++
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/brain/knowledge/engineering/ci-pr-review-hygiene.md b/brain/knowledge/engineering/ci-pr-review-hygiene.md
index e8a0e431fc7c..bb5df7218db4 100644
--- a/brain/knowledge/engineering/ci-pr-review-hygiene.md
+++ b/brain/knowledge/engineering/ci-pr-review-hygiene.md
@@ -10,7 +10,9 @@ The CI gates that shape *how a PR is reviewed*, as opposed to whether it builds.
 We open PRs as drafts so no human reviewer is auto-assigned until "Ready for review". Greptile's **Review draft pull requests** setting is enabled, so its first pass lands on draft open with no CI glue — first-pass AI review while it is still a draft, human review after. Unlike a once-per-PR CI nudge, the native setting also re-reviews as commits land on the draft.
 
 ## Per-area size gate
-`pr-size.yml` + `tools/scripts/pr-size-check.ts` count **meaningful lines** (additions + deletions, minus lockfiles, `i18n/translation.json`, `locales/**`, snapshots, `dist`) per area and fail when a gated area is over budget: engine+worker+execution combined 300, `core/shared` 250, `server/api` 600, `packages/web` 1200. `packages/pieces` and everything unmatched are measured but exempt — a line count can't tell a cohesive new piece from a codemod, and pieces are self-contained with low blast radius. Bypass with the `large-pr-ok` label or a `revert:` title. Budgets were calibrated from the distribution of recently merged PRs.
+`pr-size.yml` + `tools/scripts/pr-size-check.ts` count **meaningful lines** (additions + deletions, minus lockfiles, `i18n/translation.json`, `locales/**`, snapshots, `dist`) per area and fail when a gated area is over budget: engine+worker+execution combined 300, `core/shared` 250, `server/api` 600, `packages/web` 1200. `packages/pieces`, `tests` and everything unmatched are measured but exempt — a line count can't tell a cohesive new piece from a codemod, and pieces are self-contained with low blast radius. Bypass with the `large-pr-ok` label or a `revert:` title. Budgets were calibrated from the distribution of recently merged PRs.
+
+**Tests are their own area and are never charged to the code they cover.** `TEST_PATTERNS` is the first bucket, and first match wins, so `packages/server/api/test/**` lands in `tests`, not `server/api`. It matches a `test`/`tests`/`__tests__`/`__mocks__`/`__snapshots__` path *segment*, a `.test.`/`.spec.` suffix, a `vitest`/`jest`/`playwright`/`checkly` config, `packages/tests-e2e/`, and `smoke-test/`. Otherwise the gate taxes the one thing it should be encouraging: 60% of recently merged PRs carry test lines, and 8 of the last 150 were over budget *only* because of theirs. The budgets were calibrated against diffs that included tests, so this makes them somewhat looser than measured — retune from the new distribution rather than assuming the old numbers still bind the same way.
 
 The diff comes from local `git diff --numstat`, not the `/files` API, so it is immune to GitHub's 3,000-file response cap — a mega-PR cannot under-count its way past the gate.
 
@@ -20,6 +22,7 @@ Which team gets asked to review comes entirely from `.github/CODEOWNERS` — the
 Enforcement is the **`Codeowners review` repository ruleset** (active on the default branch), not classic branch protection: `require_code_owner_review: true` plus `required_approving_review_count: 1` and `required_review_thread_resolution: true`. Eight bypass actors are configured, which is why an owner-team request can look non-blocking on some PRs.
 
 ## Gotchas
+- **The tests bucket keys off a path *segment*, so a feature folder named `test-step` is not mistaken for tests.** `packages/web/src/app/builder/test-step/` and `latest-test.ts` stay in `packages/web`; the regex requires `test/` as a whole segment or a `.test.`/`.spec.` suffix. The one deliberate overlap is `packages/pieces/framework/src/lib/test/index.ts` — shipped `createMockActionContext` helpers, counted as tests, and exempt either way because pieces are exempt.
 - **A job-level `env:` in `ci.yml` does not reach anything turbo runs.** Turbo 2.x defaults to `--env-mode=strict`: a task's process only receives variables named in `globalPassThroughEnv` / `passThroughEnv` / `env`, plus turbo's own system list. Everything else is dropped silently, so the task falls back to whatever `packages/server/api/.env.tests` set (dotenv there runs without `override`, so a real env var would otherwise win). Symptom: the workflow clearly sets the variable and the test still uses the old value. Add the name to `globalPassThroughEnv` in `turbo.json` — that is why `AP_DB_TYPE` and `AP_POSTGRES_*` are already listed. Jobs that call `npx vitest` directly, like `tool-search-postgres`, are unaffected, which is what makes the difference easy to miss. Verify with a throwaway test that `console.log`s the variable through `npx turbo run <task> --filter=<pkg>`.
 - **A GitHub service container is not reachable by its name from a non-container job.** `services:` attaches the container to a docker network with a `--network-alias`, but the runner itself is on the host, so the alias does not resolve (`getaddrinfo EAI_AGAIN redis`) and only the published `ports:` mapping on `localhost` works. `.env.tests` pins `AP_REDIS_HOST=redis` for `docker-compose`, so any test that opens a real connection needs `localhost` forced past it.
 - **Never use `git stash` to prove a new test fails without its fix. Use `git checkout <base> -- <file>` instead.** `git stash push -- <path>` on a path with no uncommitted changes saves nothing and creates no entry, so a following `git stash pop` silently pops whoever's stash is at `stash@{0}` instead. This repo carries long-lived stashes from other branches, so the pop conflicts, is kept, and still writes that stash's untracked files into the working tree, which then look like your own new files. It has happened at least twice, and `stash@{1}` is literally named *"recovered: AGENTS.md agent-skills section (accidentally popped by claude)"*. Reverting one committed file to its base version and running the test there is the same proof with no shared state: `git checkout <merge-base> -- <file>`, run, then `git checkout HEAD -- <file>`. If a stash pop does go wrong, the entry survives the conflict, so the recovery is to delete the stray untracked files after confirming they belong to it with `git stash show --include-untracked --name-only stash@{0}`.
diff --git a/tools/scripts/pr-size-check.test.ts b/tools/scripts/pr-size-check.test.ts
index 278c449b572f..a8eb17307656 100644
--- a/tools/scripts/pr-size-check.test.ts
+++ b/tools/scripts/pr-size-check.test.ts
@@ -52,6 +52,37 @@ describe('bucketFor', () => {
         expect(prSizeCheck.bucketFor({ path: 'packages/core/shared/src/index.ts' }).name).toBe('core/shared')
     })
 
+    it('charges test code to the tests bucket, not the area it covers', () => {
+        const areas = [
+            'packages/server/api/test/integration/ce/flows/flow.test.ts',
+            'packages/server/engine/test/handler/loop-executor.test.ts',
+            'packages/core/shared/test/ee/index.test.ts',
+            'packages/web/test/features/chat/lib/messages.test.ts',
+            'packages/web/src/app/builder/data-selector/path-helpers.test.ts',
+            'packages/core/execution/src/lib/step.spec.ts',
+            'packages/pieces/community/simplyprint/src/lib/common/__tests__/client.ts',
+            'packages/server/api/vitest.config.ts',
+            'packages/tests-e2e/scenarios/sign-up.spec.ts',
+            'smoke-test/verify-delay.sh',
+        ].map((path) => prSizeCheck.bucketFor({ path }).name)
+        expect(new Set(areas)).toEqual(new Set(['tests']))
+    })
+
+    it('exempts the tests bucket so adding tests never blocks a PR', () => {
+        expect(prSizeCheck.bucketFor({ path: 'packages/server/api/test/integration/ce/flows/flow.test.ts' }).budget).toBeNull()
+    })
+
+    it('keeps product code whose path merely contains "test" in its own area', () => {
+        const paths = {
+            'packages/web/src/app/builder/test-step/test-trigger-section.tsx': 'packages/web',
+            'packages/server/api/src/app/flow/step-run/step-run.service.ts': 'server/api',
+            'packages/web/src/features/flows/lib/latest-test.ts': 'packages/web',
+        }
+        for (const [path, area] of Object.entries(paths)) {
+            expect(prSizeCheck.bucketFor({ path }).name).toBe(area)
+        }
+    })
+
     it('exempts pieces and anything unmatched', () => {
         expect(prSizeCheck.bucketFor({ path: 'packages/pieces/community/slack/src/index.ts' }).budget).toBeNull()
         expect(prSizeCheck.bucketFor({ path: 'docs/install/overview.mdx' }).name).toBe('other (default)')
@@ -92,6 +123,18 @@ describe('collectSizes', () => {
         expect(report.meaningfulTotal).toBe(10)
     })
 
+    it('keeps test lines out of the budgeted area totals', () => {
+        const numstat = numstatOf([
+            [2_000, 0, 'packages/server/api/test/integration/ce/flows/flow.test.ts'],
+            [10, 5, 'packages/server/api/src/app/flow/flow.service.ts'],
+        ])
+        const report = prSizeCheck.collectSizes({ numstat })
+        expect(linesOf({ numstat, area: 'server/api' })).toBe(15)
+        expect(linesOf({ numstat, area: 'tests' })).toBe(2_000)
+        expect(report.rows.some((row) => row.over)).toBe(false)
+        expect(report.meaningfulTotal).toBe(2_015)
+    })
+
     it('counts renamed files under their destination area', () => {
         const numstat = numstatOf([[40, 0, 'packages/{shared => core/shared}/src/index.ts']])
         expect(linesOf({ numstat, area: 'core/shared' })).toBe(40)
diff --git a/tools/scripts/pr-size-check.ts b/tools/scripts/pr-size-check.ts
index 21e73206a86c..f101d97f2c55 100644
--- a/tools/scripts/pr-size-check.ts
+++ b/tools/scripts/pr-size-check.ts
@@ -11,10 +11,21 @@ const EXCLUDE_PATTERNS: RegExp[] = [
     /(^|\/)dist\//,
 ]
 
+// Test code, wherever it lives. This bucket is listed first so a test file is charged here
+// instead of the product area it covers: a budget that counts tests taxes the PR for adding them.
+const TEST_PATTERNS: RegExp[] = [
+    /\.(test|spec)\.[cm]?[jt]sx?$/,
+    /(^|\/)(test|tests|__tests__|__mocks__|__snapshots__)\//,
+    /(^|\/)(vitest|jest|playwright|checkly)\.config\.[cm]?[jt]s$/,
+    /^packages\/tests-e2e\//,
+    /^smoke-test\//,
+]
+
 // First matching bucket wins; `budget: null` means the area is exempt (measured, never gated).
 // packages/pieces is exempt on purpose: line count can't tell a cohesive new piece from a
 // codemod or a schema dump, and pieces are @pieces-owned, self-contained, and low blast radius.
 const BUCKETS: SizeBucket[] = [
+    { name: 'tests', tests: TEST_PATTERNS, budget: null },
     {
         name: 'engine / worker / execution',
         tests: [/^packages\/server\/engine\//, /^packages\/server\/worker\//, /^packages\/core\/execution\//],