From 5e8a83e11ac1592f4dc953c7d86d461b2d2a3f8b Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Mon, 31 Aug 2026 15:47:43 +0800
Subject: [PATCH 01/12] feat(studio): add explorer_banner_exposed impression
 event (#49747)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- ccr-slack-attribution -->
_Requested by **Pam Chia** · [Slack
thread](https://supabase.slack.com/archives/C076KTY11DF/p1788139328573799?thread_ts=1788139328.573799&cid=C076KTY11DF)_

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Feature (telemetry). Adds one PostHog event.

Linear issue:
[GROWTH-1154](https://linear.app/supabase/issue/GROWTH-1154/telemetry-explorer-feature-preview-banner-has-no-exposure-event-so)

## What is the current behavior?

The Explorer feature preview banner emits
`explorer_banner_dismiss_button_clicked` and
`explorer_banner_cta_button_clicked` (both from
`apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx`,
shipped in #49606), and nothing else. With no impression event there is
no denominator, so no click-through or dismiss rate can be reported.

## What is the new behavior?

`explorer_banner_exposed` fires when the banner content is rendered, at
most once per page load.

The event is declared in `packages/common/telemetry-constants.ts` next
to the two existing Explorer banner events and added to the
`TelemetryEvent` union, following the existing `*_exposed` family. It
carries no custom properties; `project` and `organization` groups are
attached by `apps/studio/lib/telemetry/track.ts`.

**Verification:**

- `prettier --check` on both changed files: passing
- `tsc --noEmit` in `packages/common`, which covers the new event
interface and the `TelemetryEvent` union: passing
- Studio-scoped lint, typecheck, and tests: green on CI
- Browser-tested on the studio-staging preview (Playwright): the
exposure event fires exactly once per page load (201 on the wire), does
not re-fire on client-side navigation or banner hover within the same
page load, fires again after a full reload, and does not fire after
dismissal; the CTA and dismiss click events are unchanged and carry the
`project`/`organization` groups

**Out of scope:**

- Pre-consent drops: every telemetry event waits for consent, so this
event degrades the same way the rest of the `*_exposed` family does
(transient, recovers on the next page load). A family-wide fix is a
separate issue.
- Mirroring the `explorer` flag state into event properties: redundant
once exposure exists.
- The CTA handler not dismissing the banner: raised separately, both
click handlers untouched.
-
[GROWTH-1153](https://linear.app/supabase/issue/GROWTH-1153/telemetry-advisorcategory-omitted-for-health-lints-on-two-of-five)
and its draft PR #49746: separate issue, no overlap.

---
_Generated by [Claude
Code](https://claude.ai/code/session_01Xwj2SotnaHByjbTfqF4Kdm); reworked
per Pam's review._

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Pamela Chia <pamelachiamayyee@gmail.com>
---
 .../ui/BannerStack/Banners/BannerExplorer.tsx      | 10 ++++++++++
 packages/common/telemetry-constants.ts             | 14 ++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx
index 78120cc7b397b..70979ff5054f0 100644
--- a/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx
+++ b/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx
@@ -1,5 +1,6 @@
 import { LOCAL_STORAGE_KEYS } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
+import { useEffect } from 'react'
 import { Badge, Button } from 'ui'
 
 import { BannerCard } from '../BannerCard'
@@ -8,6 +9,8 @@ import { useFeaturePreviewModal } from '@/components/interfaces/App/FeaturePrevi
 import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
 import { useTrack } from '@/lib/telemetry/track'
 
+let hasTrackedExposureThisPageLoad = false
+
 export const BannerExplorer = () => {
   const track = useTrack()
   const { dismissBanner } = useBannerStack()
@@ -18,6 +21,13 @@ export const BannerExplorer = () => {
     false
   )
 
+  useEffect(() => {
+    if (hasTrackedExposureThisPageLoad) return
+    hasTrackedExposureThisPageLoad = true
+
+    track('explorer_banner_exposed')
+  }, [track])
+
   return (
     <BannerCard
       onDismiss={() => {
diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts
index bafb97da93703..a164992611f51 100644
--- a/packages/common/telemetry-constants.ts
+++ b/packages/common/telemetry-constants.ts
@@ -1531,6 +1531,19 @@ export interface DatabaseConnectionsBannerCtaButtonClickedEvent {
   groups: TelemetryGroups
 }
 
+/**
+ * The Explorer feature preview banner was rendered in studio project pages, fired at most once
+ * per page load. Acts as the denominator for the banner's dismiss and CTA rates; dedupe per
+ * session or per user at query time.
+ *
+ * @group Events
+ * @source studio
+ */
+export interface ExplorerBannerExposedEvent {
+  action: 'explorer_banner_exposed'
+  groups: TelemetryGroups
+}
+
 /**
  * User clicked the dismiss button on the Explorer feature preview banner in studio project pages.
  *
@@ -3834,6 +3847,7 @@ export type TelemetryEvent =
   | DatabaseConnectionsBlockerViewClickedEvent
   | DatabaseConnectionsBannerDismissButtonClickedEvent
   | DatabaseConnectionsBannerCtaButtonClickedEvent
+  | ExplorerBannerExposedEvent
   | ExplorerBannerDismissButtonClickedEvent
   | ExplorerBannerCtaButtonClickedEvent
   | SessionTerminateButtonClickedEvent

From 5b01b5a9c7a4b9a916a58095fb308f1dad7ff754 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Mon, 31 Aug 2026 15:48:01 +0800
Subject: [PATCH 02/12] fix(studio): report advisorCategory consistently across
 advisor telemetry surfaces (#49746)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- ccr-slack-attribution -->
_Requested by **Pam Chia** · [Slack
thread](https://supabase.slack.com/archives/C076KTY11DF/p1788139328573799?thread_ts=1788139328.573799&cid=C076KTY11DF)_

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix (telemetry correctness). No user-visible change.

## What is the current behavior?

Linear:
[GROWTH-1153](https://linear.app/supabase/issue/GROWTH-1153/telemetry-advisorcategory-omitted-for-health-lints-on-two-of-five)

**Before:** five surfaces emit the optional `advisorCategory` property
on `advisor_detail_opened` and `advisor_assistant_button_clicked`, and
they disagree about how to derive it. Three pass the lint's category
straight through as `categories[0]`. Two compute it with a hardcoded
ladder — `categories.includes('SECURITY') ? 'SECURITY' :
categories.includes('PERFORMANCE') ? 'PERFORMANCE' : undefined` — which
predates the `HEALTH` category and falls through to `undefined` for
anything it does not name. Because the property is optional, those two
surfaces ship the event with `advisorCategory` silently absent: no type
error, no runtime error, just a hole in the data. A reader querying a
category breakdown of either event gets numbers that depend on which
surface the user happened to click, and `HEALTH` is under-counted. The
split is clearest in `AdvisorSection.tsx`, where a single advisor card
emits both events — the card click through the ladder (L83) and the
Assistant button through the pass-through (L206) — so one card can
report two different categories for the same lint.

The cause is that `AdvisorCategory` in
`packages/common/telemetry-constants.ts` is schema-derived:

```ts
type AdvisorCategory =
  components['schemas']['GetProjectLintsResponse'][number]['categories'][number]
```

The API-types regeneration in supabase/supabase #49646 (merged
2026-08-27, `26e89b36c349893540f8efbd45613921be0a4d18`) widened
`categories` from `('PERFORMANCE' | 'SECURITY')[]` to `('PERFORMANCE' |
'SECURITY' | 'HEALTH')[]`. `AdvisorCategory` picked up the third value
incidentally and the two ladders were never updated — a union widening
is invisible to a hardcoded ladder, so nothing broke loudly.

| Event | Surface | HEALTH behavior before |
| --- | --- | --- |
| `advisor_detail_opened` |
`apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx` (L203) |
ladder → property absent |
| `advisor_detail_opened` |
`apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx` (L83)
| ladder → property absent |
| `advisor_detail_opened` |
`apps/studio/components/interfaces/Linter/LinterDataGrid.tsx` (L163) |
pass-through → `'HEALTH'` |
| `advisor_assistant_button_clicked` |
`apps/studio/components/interfaces/Linter/LintDetail.tsx` (L38) |
pass-through → `'HEALTH'` |
| `advisor_assistant_button_clicked` |
`apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx`
(L206) | pass-through → `'HEALTH'` |

The two `advisorCategory` property doc comments in
`telemetry-constants.ts` (L2949, L2980) also still read "Category of the
advisor (SECURITY or PERFORMANCE)", which the widening made false.

## What is the new behavior?

**After:** all five surfaces derive `advisorCategory` the same way, so a
category breakdown of these two events is consistent regardless of which
surface produced the event, and `HEALTH` is reported wherever it can
occur. The two ladder sites now read `item.original.categories[0]`,
matching the three sites that already did. The `signal` branch (which
reports `'SECURITY'`) and the `notification` branch (`undefined`) of
those two expressions are unchanged, so nothing about non-lint advisor
items moves. The stale parenthetical is cut from both doc comments.

Net diff is 3 files, -12/+4 lines. No behavior change outside the value
of one optional telemetry property.

## Additional context

**How.** The fix is the pass-through, not an extended ladder. Per the
two options considered:

1. **No lint carries more than one category in practice.** Every lint
fixture in `apps/studio` uses a single-element array (`['SECURITY']`,
`['PERFORMANCE']`). The API type permits a multi-element array, but
nothing in the repo produces one, so the ladder's
SECURITY-over-PERFORMANCE priority is not load-bearing.
2. **The advisors UI already treats the first element as canonical** —
`LinterDataGrid.tsx` L196 renders `<LintCategoryBadge
category={selectedLint.categories[0]} />`.
3. **Extending the ladder would not actually produce agreement.** In the
one reachable multi-category case, a ladder with a `HEALTH` branch
appended still reports the higher-priority category while the three
pass-through sites report `categories[0]`. Only `categories[0]` makes
all five agree, which is the point of the change.

**Reviewers should look at this first — how much data is actually
affected.** Narrower than the headline suggests, and worth stating
precisely. Every surface feeding these events filters lints upstream by
category, and all three filters still admit only `SECURITY` or
`PERFORMANCE`:

- `AdvisorPanel.utils.ts` `createAdvisorLintItems` drops any lint that
resolves to no tab (`if (!tab) return null`), and it is the item source
for **both** ladder surfaces
- `pages/project/[ref]/advisors/security.tsx` filters
`categories.includes('SECURITY')`
- `pages/project/[ref]/advisors/performance.tsx` filters
`categories.includes('PERFORMANCE')`

So a HEALTH-**only** lint is not surfaced anywhere in Studio today and
cannot currently reach any of the five emit sites. The divergence
reachable today is a lint carrying `HEALTH` alongside another category:
it passes the filters, and then the ladder sites and the pass-through
sites disagree. The HEALTH-only omission is latent, and becomes live
data loss the moment HEALTH lints are surfaced — presumably the point of
the API adding the category. Practical consequence: **no backfill or
historical-data caveat is needed**, because no HEALTH-only event was
ever emitted. This is a correctness fix that gets the emit surfaces
right ahead of the category being shown, not a response to an active
data incident.

**How it was tested.** Honest caveat up front: `pnpm install` cannot
complete in this sandbox, so the Studio-scoped checks could not be run
here. `apps/studio` depends on `@std/path` → `npm:@jsr/std__path`, and
the JSR registry is network-blocked in this environment (`GET
https://npm.jsr.io/~/11/@jsr/std__path/1.0.8.tgz` → `403`, both direct
and proxied; `registry.npmjs.org` returns `200`, so it is JSR
specifically). CI on this PR is the real signal for Studio lint,
typecheck, and tests. What did run clean:

- `prettier --config prettier.config.mjs --check` on all three changed
files — clean
- `tsc --noEmit` in `packages/common` (installed via `pnpm install
--filter=common...`) — clean, and `--listFiles` confirms it genuinely
covers both `telemetry-constants.ts` and the widened
`packages/api-types/types/platform.d.ts`
- the changed expression typechecked in a standalone harness against the
real generated `components['schemas']['GetProjectLintsResponse']`,
confirming `categories[0]` is assignable to `AdvisorCategory |
undefined` — with a negative control that correctly errored (`Type
'"HEALTH"' is not assignable to type '"PERFORMANCE" | "SECURITY" |
undefined'`) to prove the harness had teeth

No tests are added. There is no existing test coverage of
`handleItemClick` / `handleCardClick` in either ladder component, and
the change is a narrowing of one expression to match three existing call
sites rather than new logic. Asserting an emitted property value would
require standing up component tests for two components that have none,
which is a larger piece of work than this fix and better done as its own
change.

**Suggested follow-up, deliberately not in this PR.**
`createAdvisorLintItems` and the two advisors pages filter HEALTH lints
out entirely, so the category the API now returns is invisible in
Studio. Whether to surface it is a product decision about a new advisor
category, not a telemetry fix. Also out of scope by request:
`Linter.utils.tsx` badge styling (HEALTH falling back to PERFORMANCE's
badge is harmless).

---
_Generated by [Claude
Code](https://claude.ai/code/session_01Xwj2SotnaHByjbTfqF4Kdm)_

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Pamela Chia <pamelachiamayyee@gmail.com>
---
 .../components/interfaces/ProjectHome/AdvisorSection.tsx    | 6 +-----
 apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx     | 6 +-----
 packages/common/telemetry-constants.ts                      | 4 ++--
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx b/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
index f26b15f611245..b0dc49349fac8 100644
--- a/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
@@ -82,11 +82,7 @@ export const AdvisorSection = ({ showEmptyState = false }: { showEmptyState?: bo
 
       const advisorCategory =
         item.source === 'lint'
-          ? item.original.categories.includes('SECURITY')
-            ? 'SECURITY'
-            : item.original.categories.includes('PERFORMANCE')
-              ? 'PERFORMANCE'
-              : undefined
+          ? item.original.categories[0]
           : item.source === 'signal'
             ? 'SECURITY'
             : undefined
diff --git a/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx b/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx
index 7622d05782558..e19bd4b16740b 100644
--- a/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx
@@ -202,11 +202,7 @@ export const AdvisorPanel = () => {
 
     const advisorCategory =
       item.source === 'lint'
-        ? item.original.categories.includes('SECURITY')
-          ? 'SECURITY'
-          : item.original.categories.includes('PERFORMANCE')
-            ? 'PERFORMANCE'
-            : undefined
+        ? item.original.categories[0]
         : item.source === 'signal'
           ? 'SECURITY'
           : undefined
diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts
index a164992611f51..d0e5db8d9250d 100644
--- a/packages/common/telemetry-constants.ts
+++ b/packages/common/telemetry-constants.ts
@@ -2959,7 +2959,7 @@ export interface AdvisorDetailOpenedEvent {
      */
     advisorSource: 'lint' | 'notification' | 'signal'
     /**
-     * Category of the advisor (SECURITY or PERFORMANCE)
+     * Category of the advisor
      */
     advisorCategory?: AdvisorCategory
     /**
@@ -2990,7 +2990,7 @@ export interface AdvisorAssistantButtonClickedEvent {
      */
     origin: 'homepage' | 'lint_detail'
     /**
-     * Category of the advisor (SECURITY or PERFORMANCE)
+     * Category of the advisor
      */
     advisorCategory?: AdvisorCategory
     /**

From 9d5c19e5802f5f39eba575933694baa2eb049e1a Mon Sep 17 00:00:00 2001
From: Pamela Chia <pamelachiamayyee@gmail.com>
Date: Mon, 31 Aug 2026 15:53:20 +0800
Subject: [PATCH 03/12] chore(repo): add public-surfaces rule to agent
 instructions (#49750)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Repo maintenance: one bullet added to the committed agent instructions
in `.claude/CLAUDE.md`.

## What is the new behavior?

Agent sessions working in this repo (including Slack-triggered ones) get
an explicit rule that PR descriptions, issues, and code comments are
world-readable, so internal content stays out of them: absolute
production metrics (percentages, ratios, or relative change instead),
internal decision detail (vendor, legal, pricing, or strategy
discussions), and competitor names (protocol identifiers such as
user-agent strings are fine). That context goes in the linked Linear
issue. I added this after an agent-authored PR quoted absolute internal
event volumes in its description.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Documentation**
* Added guidance to keep public PRs, issues, and code comments free of
sensitive internal details.
* Clarified that production metrics, internal decisions, and competitor
information should be documented privately instead.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .claude/CLAUDE.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index 8f48264e86e09..5ad8d8d0bf72b 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -53,6 +53,8 @@ Never hand-edit generated files: `packages/api-types/types/**`, `**/routeTree.ge
 
 **Language** — Use U.S. English everywhere.
 
+**Public surfaces** — this repo is public: PR descriptions, issues, and code comments are world-readable. Keep internal content out of them: absolute production metrics (event counts, user counts, revenue figures: state percentages, ratios, or relative change instead), internal decision detail (vendor, legal, pricing, or strategy discussions), and competitor names (protocol identifiers such as user-agent strings are fine). Put that context in the Linear issue and link it.
+
 ## Skills
 
 The skills in `.claude/skills/` are the source of truth for conventions — load the relevant ones before working, don't guess:

From 8aade779669424cedf471985d9dd70c8d4130789 Mon Sep 17 00:00:00 2001
From: Pamela Chia <pamelachiamayyee@gmail.com>
Date: Mon, 31 Aug 2026 16:25:06 +0800
Subject: [PATCH 04/12] fix(www): gate changelog md alternate on slug set
 (#49754)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changelog entry pages advertised a `.md` alternate tag unconditionally
while the page is ISR, so an entry published in the changelog repo
between www deploys pointed agents at a `.md` sibling that 404s until
the next build (the static file and `CHANGELOG_PAGES` are both
build-time artifacts). PR #49357 made bare-URL negotiation fail closed
for those entries; I gate the advertising side here the same way.

**Changed:**
- **No more dead `.md` links on freshly published entries**:
`getStaticProps` passes a `hasMarkdownVariant` flag computed from
`CHANGELOG_PAGES` membership and the page renders the alternate tag only
when true. An entry published between deploys carries no tag until the
build that ships its `.md` file; the set reference stays inside
`getStaticProps`, so the generated module stays out of the client
bundle.
- **Drift coverage**: `md-alternates.test.ts` gains the changelog
direction, source-level like the existing `_app.tsx` drift test; the
assertion pins the full `CHANGELOG_PAGES.has(` +
backtick-`changelog/${entry.slug}`-backtick + `)` expression so a
dropped key prefix fails the suite, and removing the gate fails it too.

**Note:** without changelog sync secrets `CHANGELOG_PAGES` is empty, so
the tag never renders in local dev. Preview and prod are the
verification surface.

## To test
Tested on Vercel preview:
- [x] Open a published changelog entry page and view source: expect
`<link rel="alternate" type="text/markdown"
href="/changelog/<slug>.md">` in the head — observed exact href
`/changelog/19669-supavisor-1-0.md`
- [x] Fetch that href: expect 200 with `content-type: text/markdown` —
observed 200, `text/markdown; charset=utf-8`
- [x] (added) Client-side nav from `/changelog` into an entry: alternate
tag appears with that entry's slug; hopping to a second entry updates
the href (no stale tag)
- [x] (added) Navigating back to `/changelog`: entry tag gone; the index
shows its own pre-existing `/changelog.md` alternate (hardcoded in
`pages/changelog.tsx`, outside this diff), and `/changelog.md` returns
200 `text/markdown`
- [x] (added) Console: zero new errors across all scenarios vs page-load
baseline

## Linear
- fixes GROWTH-1120


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Changelog pages now advertise a Markdown alternate link only when a
Markdown version is available.
* Prevented links to unavailable Markdown content from appearing on
changelog entries.

* **Tests**
* Added coverage to verify correct Markdown alternate detection and
rendering.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/www/md-alternates.test.ts      | 19 +++++++++++++++++++
 apps/www/pages/changelog/[slug].tsx | 20 ++++++++++++++++----
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/apps/www/md-alternates.test.ts b/apps/www/md-alternates.test.ts
index d610d6360632e..27791115c60a1 100644
--- a/apps/www/md-alternates.test.ts
+++ b/apps/www/md-alternates.test.ts
@@ -91,6 +91,25 @@ describe('markdown alternate drift', () => {
     ).toBe(true)
   })
 
+  it('changelog entry page gates its .md alternate on CHANGELOG_PAGES membership', async () => {
+    const source = await fs.readFile(
+      path.join(process.cwd(), 'pages', 'changelog', '[slug].tsx'),
+      'utf-8'
+    )
+    expect(
+      source.includes('CHANGELOG_PAGES.has(`changelog/${entry.slug}`)'),
+      'pages/changelog/[slug].tsx must compute the markdown alternate flag from CHANGELOG_PAGES membership using the changelog/-prefixed key the generator emits'
+    ).toBe(true)
+    expect(
+      source.includes('hasMarkdownVariant &&'),
+      'pages/changelog/[slug].tsx must render the markdown alternate link only when hasMarkdownVariant is true'
+    ).toBe(true)
+    expect(
+      source.includes('rel="alternate" type="text/markdown"'),
+      'pages/changelog/[slug].tsx must advertise the text/markdown alternate for published slugs'
+    ).toBe(true)
+  })
+
   it.for(MDX_SECTIONS)('%s pages advertise their .md sibling', async (urlPrefix) => {
     const appPagePath = path.join(process.cwd(), 'app', urlPrefix, '[slug]', 'page.tsx')
     if (!existsSync(appPagePath)) {
diff --git a/apps/www/pages/changelog/[slug].tsx b/apps/www/pages/changelog/[slug].tsx
index c27fd4281f270..692a8ab1adece 100644
--- a/apps/www/pages/changelog/[slug].tsx
+++ b/apps/www/pages/changelog/[slug].tsx
@@ -5,6 +5,7 @@ import { NextSeo } from 'next-seo'
 import Head from 'next/head'
 import Link from 'next/link'
 
+import { CHANGELOG_PAGES } from '@/app/api-v2/md/content.generated'
 import { ChangelogDetailSidebar } from '@/components/Changelog/ChangelogDetailSidebar'
 import { ChangelogInlineMarkdown } from '@/components/Changelog/ChangelogInlineMarkdown'
 import CTABanner from '@/components/CTABanner'
@@ -20,15 +21,25 @@ type PageProps = {
   slug: string
   frontmatter: ChangelogEntryFrontmatter
   source: MDXRemoteSerializeResult
+  hasMarkdownVariant: boolean
 }
 
-const ChangelogDetailPage = ({ title, created_at, slug, frontmatter, source }: PageProps) => {
+const ChangelogDetailPage = ({
+  title,
+  created_at,
+  slug,
+  frontmatter,
+  source,
+  hasMarkdownVariant,
+}: PageProps) => {
   const plainTitle = stripTitleMarkdown(title)
   return (
     <>
-      <Head>
-        <link rel="alternate" type="text/markdown" href={`/changelog/${slug}.md`} />
-      </Head>
+      {hasMarkdownVariant && (
+        <Head>
+          <link rel="alternate" type="text/markdown" href={`/changelog/${slug}.md`} />
+        </Head>
+      )}
       <NextSeo
         title={`${plainTitle} · Changelog`}
         description={plainTitle}
@@ -106,6 +117,7 @@ export const getStaticProps: GetStaticProps<PageProps> = async ({ params }) => {
       slug: entry.slug,
       frontmatter: entry.frontmatter,
       source,
+      hasMarkdownVariant: CHANGELOG_PAGES.has(`changelog/${entry.slug}`),
     },
     revalidate: 900,
   }

From 4f92790587cf39faa26ee7b5463ff18bb72477ac Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Mon, 31 Aug 2026 10:32:45 +0200
Subject: [PATCH 05/12] fix: FormItemLayout does not apply item id correctly
 (#49637)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

`<FormItemLayout>` does not apply item id correctly. This can be seen on
https://supabase.com/design-system/docs/ui-patterns/forms: open the
devtool and check the form items labels. They have no `for` attribute.
This makes it harder to correctly test and is an accessibility issue.

Axe devtool actually report it

## Solution

When inside React Hook Form, `<FormItemLayout>` actually generate an
`id` (via `<FormItem>`). However, this `id` is overridden in
`<FormLayout>` and read from context by `<FormLabel>`. Ensure we use the
generated id unless one was provided.

Also updated the paths filters for the CI check so that any changes in
either `ui` or `ui-patterns` triggers the studio unit and e2e tests.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Bug Fixes**
- Improved form accessibility by ensuring labels consistently connect to
their corresponding input fields.
- React-based forms now correctly preserve field-specific identifiers
when associating labels with inputs.
- Added support for explicitly specifying a label’s input target,
improving compatibility with customized form layouts.
- Updated Studio forms to use consistent control identifiers and
labeling behavior.

- **Quality Improvements**
- Automated validation now also runs when shared UI components and
patterns are updated.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .github/workflows/studio-e2e-test.yml         |  2 +
 .github/workflows/studio-unit-tests.yml       |  4 ++
 .../AccessTokens/Scoped/Form/TokenDetails.tsx |  6 +--
 .../SessionsAuthSettingsForm.tsx              | 12 ------
 .../Vault/Secrets/EditSecretModal.tsx         | 31 +++++++---------
 .../Wrappers/CreateWrapperSheet.tsx           |  3 +-
 .../Integrations/Wrappers/InputField.tsx      |  7 ++--
 .../Wrappers/WrapperTableEditor.tsx           | 22 ++++-------
 .../interfaces/SQLEditor/RenameQueryModal.tsx |  2 +-
 .../interfaces/Storage/CreateBucketModal.tsx  | 37 +++----------------
 .../interfaces/Storage/EditBucketModal.tsx    | 24 ++----------
 .../Support/DashboardLogsToggle.tsx           | 19 ++++++----
 .../Support/SupportAccessToggle.tsx           | 20 ++++++----
 .../src/form/Layout/FormLayout.tsx            |  2 +-
 packages/ui/src/components/shadcn/ui/form.tsx |  4 +-
 15 files changed, 70 insertions(+), 125 deletions(-)

diff --git a/.github/workflows/studio-e2e-test.yml b/.github/workflows/studio-e2e-test.yml
index 9573189273d52..67da2f67312e2 100644
--- a/.github/workflows/studio-e2e-test.yml
+++ b/.github/workflows/studio-e2e-test.yml
@@ -44,6 +44,8 @@ jobs:
           filters: |
             studio:
               - 'packages/pg-meta/**'
+              - 'packages/ui/**'
+              - 'packages/ui-patterns/**'
               - 'apps/studio/**'
               - 'apps/ui-library/**'
               - 'apps/design-system/**'
diff --git a/.github/workflows/studio-unit-tests.yml b/.github/workflows/studio-unit-tests.yml
index bed6790239f47..65e65dabcf412 100644
--- a/.github/workflows/studio-unit-tests.yml
+++ b/.github/workflows/studio-unit-tests.yml
@@ -8,6 +8,8 @@ on:
     branches: [master, studio]
     paths:
       - 'apps/studio/**'
+      - 'packages/ui/**'
+      - 'packages/ui-patterns/**'
       - 'pnpm-lock.yaml'
   pull_request:
     branches: [master, studio]
@@ -44,6 +46,8 @@ jobs:
         with:
           filters: |
             relevant:
+              - 'packages/ui/**'
+              - 'packages/ui-patterns/**'
               - 'apps/studio/**'
               - 'pnpm-lock.yaml'
       - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
index 64a91e603df27..a57127f6b65be 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
@@ -61,7 +61,7 @@ export const TokenDetails = ({ control, setValue }: TokenDetailsProps) => {
         render={({ field }) => (
           <FormItemLayout name="tokenName" label="Name" layout="flex-row-reverse">
             <FormControl>
-              <Input id="tokenName" {...field} placeholder="e.g. CI deploy token" />
+              <Input {...field} placeholder="e.g. CI deploy token" />
             </FormControl>
           </FormItemLayout>
         )}
@@ -72,11 +72,11 @@ export const TokenDetails = ({ control, setValue }: TokenDetailsProps) => {
         name="expiresAt"
         control={control}
         render={({ field }) => (
-          <FormItemLayout name="expiresAt" label="Expires in" layout="flex-row-reverse">
+          <FormItemLayout id="expiresAt" label="Expires in" layout="flex-row-reverse">
             <div className="flex gap-2 w-full">
               <FormControl className="grow">
                 <Select value={field.value} onValueChange={handleExpiryChange}>
-                  <SelectTrigger>
+                  <SelectTrigger id="expiresAt">
                     <SelectValue placeholder="Select an expiry" />
                   </SelectTrigger>
                   <SelectContent>
diff --git a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
index 8e8c21e29c2a3..a312551064b72 100644
--- a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
@@ -276,13 +276,11 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SESSIONS_SINGLE_PER_USER"
                         label="Enforce single session per user"
                         description="If enabled, all but a user's most recently active session will be terminated."
                       >
                         <FormControl>
                           <Switch
-                            id="SESSIONS_SINGLE_PER_USER"
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig || !hasUserSessionsEntitlement}
@@ -300,14 +298,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SESSIONS_TIMEBOX"
                         label="Time-box user sessions"
                         description={`The amount of time before a user is forced to sign in again. Use 0 for never. Maximum ${MAX_SESSIONS_TIMEBOX_HOURS} hours (1 year).`}
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="SESSIONS_TIMEBOX"
                               type="number"
                               min={0}
                               {...field}
@@ -332,14 +328,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SESSIONS_INACTIVITY_TIMEOUT"
                         label="Inactivity timeout"
                         description={`The amount of time a user needs to be inactive to be forced to sign in again. Use 0 for never. Maximum ${MAX_SESSIONS_INACTIVITY_TIMEOUT_HOURS} hours (1 year).`}
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="SESSIONS_INACTIVITY_TIMEOUT"
                               type="number"
                               min={0}
                               {...field}
@@ -413,14 +407,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="JWT_EXP"
                         label="Access token expiry time"
                         description="How long access tokens are valid for before they must be refreshed. Recommendation: 3600 seconds."
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="JWT_EXP"
                               type="number"
                               min={1}
                               {...field}
@@ -480,13 +472,11 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="REFRESH_TOKEN_ROTATION_ENABLED"
                         label="Detect and revoke potentially compromised refresh tokens"
                         description="Prevent replay attacks from potentially compromised refresh tokens."
                       >
                         <FormControl>
                           <Switch
-                            id="REFRESH_TOKEN_ROTATION_ENABLED"
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig}
@@ -503,14 +493,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
                         label="Refresh token reuse interval"
                         description={`Time interval where the same refresh token can be used multiple times to request for an access token. Recommendation: 10 seconds. Maximum ${MAX_REFRESH_TOKEN_REUSE_INTERVAL_SECONDS} seconds (5 minutes).`}
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
                               type="number"
                               min={0}
                               {...field}
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
index aaa1bbbd6cecb..d23c09d6e3c99 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
@@ -146,7 +146,7 @@ export const EditSecretModal = () => {
                     render={({ field }) => (
                       <FormItemLayout name="name" label="Name">
                         <FormControl>
-                          <Input id="name" {...field} />
+                          <Input {...field} />
                         </FormControl>
                       </FormItemLayout>
                     )}
@@ -162,7 +162,7 @@ export const EditSecretModal = () => {
                         labelOptional="Optional"
                       >
                         <FormControl>
-                          <Input id="description" {...field} data-lpignore="true" />
+                          <Input {...field} data-lpignore="true" />
                         </FormControl>
                       </FormItemLayout>
                     )}
@@ -173,10 +173,9 @@ export const EditSecretModal = () => {
                     control={form.control}
                     render={({ field }) => (
                       <FormItemLayout name="secret" label="Secret value">
-                        <FormControl>
-                          <div className="relative">
+                        <div className="relative">
+                          <FormControl>
                             <Textarea
-                              id="secret"
                               {...field}
                               rows={1}
                               ref={(el) => {
@@ -200,18 +199,16 @@ export const EditSecretModal = () => {
                                   Math.max(40, e.currentTarget.scrollHeight) + 'px'
                               }}
                             />
-                            <Button
-                              variant="default"
-                              title={showSecretValue ? `Hide secret value` : `Show secret value`}
-                              aria-label={
-                                showSecretValue ? `Hide secret value` : `Show secret value`
-                              }
-                              className="absolute right-1 top-1 w-7"
-                              icon={showSecretValue ? <EyeOff /> : <Eye />}
-                              onClick={() => setShowSecretValue(!showSecretValue)}
-                            />
-                          </div>
-                        </FormControl>
+                          </FormControl>
+                          <Button
+                            variant="default"
+                            title={showSecretValue ? `Hide secret value` : `Show secret value`}
+                            aria-label={showSecretValue ? `Hide secret value` : `Show secret value`}
+                            className="absolute right-1 top-1 w-7"
+                            icon={showSecretValue ? <EyeOff /> : <Eye />}
+                            onClick={() => setShowSecretValue(!showSecretValue)}
+                          />
+                        </div>
                       </FormItemLayout>
                     )}
                   />
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
index c4a38b2e5ed4c..dc95a80bbd13f 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
@@ -282,7 +282,6 @@ export const CreateWrapperSheet = ({
                       <FormItemLayout
                         layout="vertical"
                         label="Wrapper Name"
-                        name="wrapper_name"
                         description={
                           wrapper_name.length > 0 ? (
                             <>
@@ -295,7 +294,7 @@ export const CreateWrapperSheet = ({
                         }
                       >
                         <FormControl>
-                          <Input id="wrapper_name" {...field} />
+                          <Input {...field} />
                         </FormControl>
                       </FormItemLayout>
                     )}
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
index 9a17a2828a75c..664fb36f4dfb0 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
@@ -29,7 +29,6 @@ const InputField = <
       defaultValue={(option.defaultValue ?? '') as any}
       render={({ field }) => (
         <FormItemLayout
-          name={option.name}
           layout="vertical"
           label={
             <div className="flex items-center space-x-2">
@@ -55,11 +54,11 @@ const InputField = <
                 Fetching value from Vault...
               </span>
             ) : option.isTextArea ? (
-              <Textarea {...field} id={option.name} rows={6} className="input-mono resize-none" />
+              <Textarea {...field} rows={6} className="input-mono resize-none" />
             ) : option.secureEntry ? (
-              <PasswordInput copy reveal {...field} id={option.name} />
+              <PasswordInput copy reveal {...field} />
             ) : (
-              <Input {...field} id={option.name} />
+              <Input {...field} />
             )}
           </FormControl>
         </FormItemLayout>
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
index c052e9551c211..0d7ccbcd3489c 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
@@ -192,7 +192,7 @@ const Option = ({ option, control }: { option: TableOption; control: Control<Fie
         name={option.name}
         defaultValue={option.defaultValue}
         render={({ field }) => (
-          <FormItemLayout layout="vertical" label={option.label} name={option.name}>
+          <FormItemLayout layout="vertical" label={option.label}>
             <FormControl>
               <Select value={field.value} onValueChange={field.onChange}>
                 <SelectTrigger>
@@ -220,9 +220,9 @@ const Option = ({ option, control }: { option: TableOption; control: Control<Fie
       name={option.name}
       defaultValue={option.defaultValue ?? ''}
       render={({ field }) => (
-        <FormItemLayout layout="vertical" label={option.label} name={option.name}>
+        <FormItemLayout layout="vertical" label={option.label}>
           <FormControl>
-            <Input {...field} id={option.name} placeholder={option.placeholder ?? ''} />
+            <Input {...field} placeholder={option.placeholder ?? ''} />
           </FormControl>
         </FormItemLayout>
       )}
@@ -349,7 +349,6 @@ const TableForm = ({
             <FormItemLayout layout="vertical" label="Select a schema for the foreign table">
               <FormControl>
                 <Select
-                  name="schema"
                   value={field.value}
                   onValueChange={(schema) => {
                     field.onChange(schema)
@@ -380,9 +379,9 @@ const TableForm = ({
             control={form.control}
             name="schema_name"
             render={({ field }) => (
-              <FormItemLayout name="schema_name" layout="vertical" label="Schema name">
+              <FormItemLayout layout="vertical" label="Schema name">
                 <FormControl>
-                  <Input {...field} id="schema_name" />
+                  <Input {...field} />
                 </FormControl>
               </FormItemLayout>
             )}
@@ -395,12 +394,11 @@ const TableForm = ({
           render={({ field }) => (
             <FormItemLayout
               layout="vertical"
-              name="table_name"
               label="Table name"
               description="You can query from this table after the wrapper is enabled."
             >
               <FormControl>
-                <Input {...field} id="table_name" />
+                <Input {...field} />
               </FormControl>
             </FormItemLayout>
           )}
@@ -472,13 +470,9 @@ const TableForm = ({
                   control={form.control}
                   name={`columns.${columnIndex}.name`}
                   render={({ field }) => (
-                    <FormItemLayout
-                      layout="vertical"
-                      name={`columns.${columnIndex}.name`}
-                      label="Name"
-                    >
+                    <FormItemLayout layout="vertical" label="Name">
                       <FormControl>
-                        <Input {...field} id={`columns.${columnIndex}.name`} />
+                        <Input {...field} />
                       </FormControl>
                     </FormItemLayout>
                   )}
diff --git a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
index 8041ebe9b7d3b..b3273b870c2dc 100644
--- a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
@@ -171,7 +171,7 @@ const RenameQueryForm = ({ snippet, onCancel, onComplete }: RenameQueryFormProps
             render={({ field }) => (
               <FormItemLayout name="name" layout="vertical" label="Name">
                 <FormControl>
-                  <Input {...field} id="name" />
+                  <Input {...field} />
                 </FormControl>
               </FormItemLayout>
             )}
diff --git a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
index 38c9cc7626957..793038eb43b70 100644
--- a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -198,13 +198,11 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout
-                    name="name"
                     label="Bucket name"
                     labelOptional="Cannot be changed after creation"
                   >
                     <FormControl>
                       <Input
-                        id="name"
                         data-1p-ignore
                         data-lpignore="true"
                         data-form-type="other"
@@ -228,18 +226,12 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                 render={({ field }) => (
                   <FormItemLayout
                     hideMessage
-                    name="public"
                     label="Public bucket"
                     description="Allow anyone to read objects without authorization"
                     layout="flex"
                   >
                     <FormControl>
-                      <Switch
-                        id="public"
-                        size="large"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -262,18 +254,12 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout
-                    name="has_file_size_limit"
                     label="Restrict file size"
                     description="Prevent uploading of files larger than a specified limit"
                     layout="flex"
                   >
                     <FormControl>
-                      <Switch
-                        id="has_file_size_limit"
-                        size="large"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -286,22 +272,11 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                     name="formatted_size_limit"
                     control={form.control}
                     render={({ field }) => (
-                      <FormItemLayout
-                        hideMessage
-                        name="formatted_size_limit"
-                        label="File size limit"
-                      >
+                      <FormItemLayout hideMessage label="File size limit">
                         <div className="grid grid-cols-12 gap-x-2">
                           <div className="col-span-8">
                             <FormControl>
-                              <Input
-                                id="formatted_size_limit"
-                                aria-label="File size limit"
-                                type="number"
-                                min={0}
-                                placeholder="0"
-                                {...field}
-                              />
+                              <Input type="number" min={0} placeholder="0" {...field} />
                             </FormControl>
                           </div>
                           <div className="col-span-4">
@@ -357,7 +332,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
 
             <DialogSection className="space-y-2">
               <FormItemLayout
-                name="has_allowed_mime_types"
+                id="has_allowed_mime_types"
                 label="Restrict MIME types"
                 description="Allow only certain types of files to be uploaded"
                 layout="flex"
@@ -378,14 +353,12 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                   control={form.control}
                   render={({ field }) => (
                     <FormItemLayout
-                      name="allowed_mime_types"
                       label="Allowed MIME types"
                       labelOptional="Comma separated values"
                       description="Wildcards are allowed, e.g. image/*."
                     >
                       <FormControl>
                         <Input
-                          id="allowed_mime_types"
                           {...field}
                           placeholder="e.g image/jpeg, image/png, audio/mpeg, video/mp4, etc"
                         />
diff --git a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
index 125d45e2d093d..a2a723364ae6f 100644
--- a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -212,12 +212,11 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                 render={({ field }) => (
                   <FormItemLayout
                     hideMessage
-                    name="name"
                     label="Bucket name"
                     labelOptional="Cannot be changed after creation"
                   >
                     <FormControl>
-                      <Input id="name" {...field} disabled />
+                      <Input {...field} disabled />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -231,14 +230,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                   render={({ field }) => (
                     <FormItemLayout
                       hideMessage
-                      name="public"
                       label="Public bucket"
                       description="Allow anyone to read objects without authorization"
                       layout="flex"
                     >
                       <FormControl>
                         <Switch
-                          id="public"
                           size="large"
                           checked={field.value}
                           onCheckedChange={field.onChange}
@@ -292,18 +289,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout
-                    name="has_file_size_limit"
                     label="Restrict file size"
                     description="Prevent uploading of files larger than a specified limit"
                     layout="flex"
                   >
                     <FormControl>
-                      <Switch
-                        id="has_file_size_limit"
-                        size="large"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -315,16 +306,11 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                     name="formatted_size_limit"
                     control={form.control}
                     render={({ field }) => (
-                      <FormItemLayout
-                        hideMessage
-                        name="formatted_size_limit"
-                        label="File size limit"
-                      >
+                      <FormItemLayout hideMessage label="File size limit">
                         <div className="grid grid-cols-12 gap-x-2">
                           <div className="col-span-8">
                             <FormControl>
                               <Input
-                                id="formatted_size_limit"
                                 aria-label="File size limit"
                                 type="number"
                                 min={0}
@@ -386,14 +372,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
 
             <DialogSection className="space-y-2">
               <FormItemLayout
-                name="has_allowed_mime_types"
                 label="Restrict MIME types"
                 description="Allow only certain types of files to be uploaded"
                 layout="flex"
               >
                 <FormControl>
                   <Switch
-                    id="has_allowed_mime_types"
                     size="large"
                     checked={hasAllowedMimeTypes}
                     onCheckedChange={setHasAllowedMimeTypes}
@@ -407,14 +391,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                   control={form.control}
                   render={({ field }) => (
                     <FormItemLayout
-                      name="allowed_mime_types"
                       label="Allowed MIME types"
                       labelOptional="Comma separated values"
                       description="Wildcards are allowed, e.g. image/*."
                     >
                       <FormControl>
                         <Input
-                          id="allowed_mime_types"
                           {...field}
                           placeholder="e.g image/jpeg, image/png, audio/mpeg, video/mp4, etc"
                         />
diff --git a/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx b/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
index 35f20e3484034..3aa8056790b0f 100644
--- a/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
+++ b/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
@@ -1,7 +1,14 @@
 import { ChevronRight } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import type { UseFormReturn } from 'react-hook-form'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, FormField, Switch } from 'ui'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  FormControl,
+  FormField,
+  Switch,
+} from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { DASHBOARD_LOG_CATEGORIES } from './dashboard-logs'
@@ -33,7 +40,6 @@ export function DashboardLogsToggle({
       render={({ field }) => (
         <FormItemLayout
           hideMessage
-          name="attachDashboardLogs"
           className={className}
           layout="flex"
           align={align}
@@ -68,12 +74,9 @@ export function DashboardLogsToggle({
             </div>
           }
         >
-          <Switch
-            size="large"
-            id="attachDashboardLogs"
-            checked={field.value}
-            onCheckedChange={field.onChange}
-          />
+          <FormControl>
+            <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
+          </FormControl>
         </FormItemLayout>
       )}
     />
diff --git a/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx b/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
index 674ed5a11d241..0d3ba10a5df3e 100644
--- a/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
+++ b/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
@@ -3,7 +3,15 @@
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import type { UseFormReturn } from 'react-hook-form'
-import { Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, FormField, Switch } from 'ui'
+import {
+  Badge,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  FormControl,
+  FormField,
+  Switch,
+} from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import type { SupportFormValues } from './SupportForm.schema'
@@ -23,7 +31,6 @@ export function SupportAccessToggle({ form, align = 'left', className }: Support
         return (
           <FormItemLayout
             hideMessage
-            name="allowSupportAccess"
             className={className}
             layout="flex"
             align={align}
@@ -75,12 +82,9 @@ export function SupportAccessToggle({ form, align = 'left', className }: Support
               </div>
             }
           >
-            <Switch
-              size="large"
-              id="allowSupportAccess"
-              checked={field.value}
-              onCheckedChange={field.onChange}
-            />
+            <FormControl>
+              <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
           </FormItemLayout>
         )
       }}
diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
index 37f67aa61a314..2b2db87dca161 100644
--- a/packages/ui-patterns/src/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -398,7 +398,7 @@ export const FormLayout = React.forwardRef<
                 <FormLabel
                   className="text-foreground flex gap-2 items-center wrap-break-word"
                   data-formlayout-id="formLabel"
-                  htmlFor={props.name || id}
+                  htmlFor={id}
                 >
                   <LabelContents />
                 </FormLabel>
diff --git a/packages/ui/src/components/shadcn/ui/form.tsx b/packages/ui/src/components/shadcn/ui/form.tsx
index 25db5a4ff666e..f1bfd096cbbde 100644
--- a/packages/ui/src/components/shadcn/ui/form.tsx
+++ b/packages/ui/src/components/shadcn/ui/form.tsx
@@ -91,7 +91,7 @@ FormItem.displayName = 'FormItem'
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & { enableSelection?: boolean }
->(({ className, enableSelection = false, ...props }, ref) => {
+>(({ className, enableSelection = false, htmlFor, ...props }, ref) => {
   const { error, formItemId } = useFormField()
 
   const Comp = enableSelection ? 'label' : Label
@@ -106,7 +106,7 @@ const FormLabel = React.forwardRef<
         className,
         'leading-normal'
       )}
-      htmlFor={formItemId}
+      htmlFor={htmlFor ?? formItemId}
       {...props}
     />
   )

From 516ef0320fe473adab365d4309a4acc79e7e1ce9 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Mon, 31 Aug 2026 18:36:01 +1000
Subject: [PATCH 06/12] chore(studio): refine Explorer toolbar, chat, and home
 actions (#49748)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- Unify Explorer toolbar actions: 16px / 2px Lucide icons,
`text-tertiary-foreground` that becomes `text-foreground` on hover
(Analyze icon goes brand on hover).
- Soften chat scroll edges with top/bottom fades, and align the composer
width with the conversation content (`px-7` + `max-w-3xl`).
- Put **Run SQL** first on Explorer home, and rename the tab-bar new-tab
item from “New query” to **Run SQL** so it matches.

## Test plan
- [ ] Open Explorer and check query, notebook, and chat toolbars: icons
are 16px, muted by default, and go to foreground on hover. Analyze on a
notebook with cells: icon goes brand on hover; empty notebook still
disables Analyze.
- [ ] Open a query tab: source menu, result settings, save, and
more-options all look like the other toolbar actions (including while
the dropdown is open).
- [ ] Open Explorer chat: scroll a long thread and confirm top/bottom
fades sit on the chat surface. Composer lines up with message width (not
inset extra).
- [ ] On Explorer home, **Run SQL** is the first card; clicking it still
opens a SQL tab.
- [ ] From the tab bar **+** menu, the first item is **Run SQL** (not
“New query”); it still creates a SQL tab. **New notebook** and **New
chat** still work.

Made with [Cursor](https://cursor.com)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **UI Improvements**
* Standardized Explorer toolbar icons for consistent sizing and visual
weight.
* Updated toolbar action colors, hover states, and keyboard-focus
visibility.
  * Reordered Explorer home actions so “Run SQL” appears first.
  * Renamed “New query” to “Run SQL” in the new-tab menu.
  * Improved query source and settings toolbar controls.
* Refined AI assistant chat layout with centered content, decorative
gradients, and improved focus styling.
  * Added hover styling for the notebook Analyze action.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/studio/.claude/skills/explorer/SKILL.md  |   4 +-
 .../Explorer/ExplorerChatToolbar.tsx          |   4 +-
 .../interfaces/Explorer/ExplorerHomeTab.tsx   |  14 +-
 .../Explorer/ExplorerNotebookTab.tsx          |  19 +-
 .../interfaces/Explorer/ExplorerQueryTab.tsx  |   7 +-
 .../interfaces/Explorer/ExplorerToolbar.tsx   |  23 ++-
 .../QueryEditor/DisplaySettingsButton.tsx     |   6 +-
 .../Explorer/QueryEditor/QuerySourceMenu.tsx  |  12 +-
 .../interfaces/Explorer/QueryEditor/index.tsx |   8 +-
 .../__tests__/ExplorerToolbar.test.tsx        |   2 +-
 .../layouts/ExplorerLayout/ExplorerLayout.tsx |   2 +-
 .../ui/AIAssistantPanel/AssistantChat.tsx     | 184 +++++++++---------
 .../AssistantNotebookPreview.tsx              |   2 +-
 .../elements/Conversation.tsx                 |  20 +-
 14 files changed, 173 insertions(+), 134 deletions(-)

diff --git a/apps/studio/.claude/skills/explorer/SKILL.md b/apps/studio/.claude/skills/explorer/SKILL.md
index 3a086025fe822..96af375105e2b 100644
--- a/apps/studio/.claude/skills/explorer/SKILL.md
+++ b/apps/studio/.claude/skills/explorer/SKILL.md
@@ -31,13 +31,13 @@ Compose the toolbar from slots rather than adding resource-specific props:
   <ExplorerToolbarTitle>{/* static or editable title */}</ExplorerToolbarTitle>
   <ExplorerToolbarActions>
     {/* badges, source controls, display controls, and direct actions */}
-    <ExplorerToolbarAction aria-label="Run query" icon={<Play />} />
+    <ExplorerToolbarAction aria-label="Run query" icon={<Play size={16} strokeWidth={2} />} />
   </ExplorerToolbarActions>
 </ExplorerToolbar>
 ```
 
 - The row defaults to 40px and follows `--header-height` at the `md` breakpoint.
-- Use `ExplorerToolbarAction` for compact direct actions. Icon-only actions are 28px wide automatically.
+- Use `ExplorerToolbarAction` for compact direct actions. Icon-only actions are 28px wide automatically. It defaults to `text-tertiary-foreground` and `hover:text-foreground`. Pass `size={16} strokeWidth={2}` on Lucide icons.
 - Keep execution, persistence, source selection, and other resource state in the consuming Explorer surface.
 - Extend layouts with children and `className`; avoid boolean props for resource-specific variants.
 
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerChatToolbar.tsx b/apps/studio/components/interfaces/Explorer/ExplorerChatToolbar.tsx
index 14edcaf9f6dfc..0c2511aa07ff9 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerChatToolbar.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerChatToolbar.tsx
@@ -69,7 +69,7 @@ export const ExplorerChatToolbar = ({
     <div className="z-30 sticky top-0">
       <ExplorerToolbar aria-label="Chat toolbar">
         <ExplorerToolbarIcon>
-          <MessageSquare />
+          <MessageSquare size={16} strokeWidth={2} />
         </ExplorerToolbarIcon>
         <ExplorerToolbarTitle onSaveTitle={handleSaveName}>{chat?.name ?? ''}</ExplorerToolbarTitle>
         <ExplorerToolbarActions>
@@ -77,7 +77,7 @@ export const ExplorerChatToolbar = ({
             <DropdownMenuTrigger asChild>
               <ExplorerToolbarAction
                 aria-label="More options"
-                icon={<MoreVertical />}
+                icon={<MoreVertical size={16} strokeWidth={2} />}
                 disabled={isChatLoading}
               />
             </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx b/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
index 54e97c0e193ef..a5c530116d42e 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
@@ -38,13 +38,6 @@ export const ExplorerHomeTab = () => {
 
         <section className="mt-6">
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <ActionCard
-              icon={<NotebookText className="h-4 w-4 text-foreground" strokeWidth={1.5} />}
-              title="Create a notebook"
-              description="Combine notes, queries, and results"
-              bgColor="bg-blue-500"
-              onClick={() => createNotebook()}
-            />
             <ActionCard
               icon={<SquareCode className="h-4 w-4 text-foreground" strokeWidth={1.5} />}
               title="Run SQL"
@@ -52,6 +45,13 @@ export const ExplorerHomeTab = () => {
               bgColor="bg-blue-500"
               onClick={createQuery}
             />
+            <ActionCard
+              icon={<NotebookText className="h-4 w-4 text-foreground" strokeWidth={1.5} />}
+              title="Create a notebook"
+              description="Combine notes, queries, and results"
+              bgColor="bg-blue-500"
+              onClick={() => createNotebook()}
+            />
           </div>
         </section>
 
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx
index d34f51cd77c11..4ad4e4159ce01 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx
@@ -359,12 +359,18 @@ export const ExplorerNotebookTab = () => {
     <div className="flex flex-col h-full bg-surface-100">
       <ExplorerToolbar className="px-4">
         <ExplorerToolbarIcon>
-          <NotebookText size={14} className="text-foreground-light" />
+          <NotebookText size={16} strokeWidth={2} />
         </ExplorerToolbarIcon>
         <ExplorerToolbarTitle onSaveTitle={handleSaveTitle}>{name ?? ''}</ExplorerToolbarTitle>
         <ExplorerToolbarActions>
           <ExplorerToolbarAction
-            icon={<AiIconAnimation size={16} />}
+            className="group"
+            icon={
+              <AiIconAnimation
+                size={16}
+                className="text-tertiary-foreground group-hover:text-brand"
+              />
+            }
             loading={isCreating}
             disabled={cells.length === 0}
             tooltip={cells.length === 0 ? 'Add a cell to the notebook to analyze it' : undefined}
@@ -374,7 +380,7 @@ export const ExplorerNotebookTab = () => {
           </ExplorerToolbarAction>
           <ExplorerToolbarAction
             aria-label="Save changes"
-            icon={<Save />}
+            icon={<Save size={16} strokeWidth={2} />}
             tooltip="Save changes"
             loading={isUpdating}
             onClick={handleSaveNotebook}
@@ -382,7 +388,10 @@ export const ExplorerNotebookTab = () => {
           <ExplorerToolbarActions>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <ExplorerToolbarAction aria-label="More options" icon={<MoreVertical />} />
+                <ExplorerToolbarAction
+                  aria-label="More options"
+                  icon={<MoreVertical size={16} strokeWidth={2} />}
+                />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-48">
                 <DropdownMenuItem
@@ -405,7 +414,7 @@ export const ExplorerNotebookTab = () => {
           </ExplorerToolbarActions>
           <ExplorerToolbarAction
             aria-label="Run notebook"
-            icon={<Play />}
+            icon={<Play size={16} strokeWidth={2} />}
             tooltip="Run notebook"
             loading={isRunningNotebook}
             disabled={queryCellIds.length === 0}
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx b/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx
index 8dec7a680b5f4..5cc0ad4a3bd54 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx
@@ -202,7 +202,10 @@ export const ExplorerQueryTab = () => {
         <>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <ExplorerToolbarAction icon={<Save />} tooltip="Save query" />
+              <ExplorerToolbarAction
+                icon={<Save size={16} strokeWidth={2} />}
+                tooltip="Save query"
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-52" align="end">
               <DropdownMenuSub>
@@ -250,7 +253,7 @@ export const ExplorerQueryTab = () => {
           </DropdownMenu>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <ExplorerToolbarAction icon={<MoreVertical />} />
+              <ExplorerToolbarAction icon={<MoreVertical size={16} strokeWidth={2} />} />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerToolbar.tsx b/apps/studio/components/interfaces/Explorer/ExplorerToolbar.tsx
index 0c99f82e52d8c..ce1d946780317 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerToolbar.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerToolbar.tsx
@@ -38,7 +38,7 @@ const ExplorerToolbarIcon = ({
   <span
     data-slot="explorer-toolbar-icon"
     aria-hidden={ariaHidden}
-    className={cn('shrink-0 text-foreground-muted [&_svg]:size-3.5', className)}
+    className={cn('shrink-0 text-tertiary-foreground', className)}
     {...props}
   />
 )
@@ -98,14 +98,19 @@ const ExplorerToolbarTitle = ({
           }}
         />
       ) : onSaveTitle ? (
-        <Button
-          variant="text"
+        <ExplorerToolbarAction
           className="group/title"
           onClick={handleStartEditing}
-          iconRight={<Edit className="opacity-0 group-hover/title:opacity-100 transition" />}
+          iconRight={
+            <Edit
+              size={16}
+              strokeWidth={2}
+              className="opacity-0 transition group-hover/title:opacity-100 group-focus-visible/title:opacity-100"
+            />
+          }
         >
           {title}
-        </Button>
+        </ExplorerToolbarAction>
       ) : (
         title
       )}
@@ -139,6 +144,7 @@ export type ExplorerToolbarActionProps = Omit<
 /**
  * The standard tiny, text-style button used for a direct toolbar action.
  * Icon-only actions receive the prototype's compact 28px width automatically.
+ * `!h-auto !w-auto` lets Lucide's `size` prop win over Button `tiny`'s 14px icon box.
  */
 const ExplorerToolbarAction = ({
   children,
@@ -152,7 +158,12 @@ const ExplorerToolbarAction = ({
     data-slot="explorer-toolbar-action"
     variant="text"
     size="tiny"
-    className={cn(children == null && 'w-7 px-0', className)}
+    className={cn(
+      'text-tertiary-foreground hover:text-foreground data-[state=open]:text-foreground',
+      '[&>[aria-hidden]]:text-current [&_svg]:!h-auto [&_svg]:!w-auto',
+      children == null && 'w-7 px-0',
+      className
+    )}
     tooltip={{ content: { side: 'bottom', text: tooltip } }}
     {...props}
   >
diff --git a/apps/studio/components/interfaces/Explorer/QueryEditor/DisplaySettingsButton.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/DisplaySettingsButton.tsx
index 5534a2a633d23..58967a2cd0f5c 100644
--- a/apps/studio/components/interfaces/Explorer/QueryEditor/DisplaySettingsButton.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/DisplaySettingsButton.tsx
@@ -104,7 +104,11 @@ export const DisplaySettingsButton = ({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <ExplorerToolbarAction disabled={disabled} icon={<Settings2 />} tooltip="Result settings" />
+        <ExplorerToolbarAction
+          disabled={disabled}
+          icon={<Settings2 size={16} strokeWidth={2} />}
+          tooltip="Result settings"
+        />
       </PopoverTrigger>
       <PopoverContent
         side="bottom"
diff --git a/apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx
index 61f6ffb8b6adc..4cad8b12da466 100644
--- a/apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx
@@ -1,7 +1,6 @@
 import { useFlag, useParams } from 'common'
 import { Check, ChevronDown } from 'lucide-react'
 import {
-  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -11,6 +10,7 @@ import {
 
 import { RowLimitSubMenu } from '../../SQLEditor/UtilityPanel/QuerySourceMenu/RowLimitSubMenu'
 import { RunAsSubMenu } from '../../SQLEditor/UtilityPanel/QuerySourceMenu/RunAsSubMenu'
+import { ExplorerToolbarAction } from '../ExplorerToolbar'
 import { DatabaseParametersSubMenu } from '@/components/interfaces/QuerySources/DatabaseParametersSubMenu'
 import { LogsCustomRangeDialog } from '@/components/interfaces/QuerySources/LogsCustomRangeDialog'
 import { LogsTimeRangeSubMenu } from '@/components/interfaces/QuerySources/LogsTimeRangeSubMenu'
@@ -75,16 +75,14 @@ export const QuerySourceMenu = ({
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button
+          <ExplorerToolbarAction
             disabled={disabled}
-            variant="text"
-            size="tiny"
             aria-label={`Query source: ${QUERY_SOURCE_LABELS[source._tag]}`}
-            icon={<QuerySourceIcon source={source._tag} className="text-foreground-light" />}
-            iconRight={<ChevronDown className="text-foreground-light" />}
+            icon={<QuerySourceIcon source={source._tag} />}
+            iconRight={<ChevronDown size={16} strokeWidth={2} />}
           >
             {QUERY_SOURCE_LABELS[source._tag]}
-          </Button>
+          </ExplorerToolbarAction>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-60">
           {availableSources.map((candidate) => (
diff --git a/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
index 8974a780ee014..96fd8e4a7c983 100644
--- a/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
@@ -368,7 +368,7 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
       <Shell className={cn(variant === 'embedded' && 'mx-auto max-w-6xl', className)}>
         <ExplorerToolbar className={cn(variant === 'viewport' && 'px-4')}>
           <ExplorerToolbarIcon>
-            <CodeSquare size={14} />
+            <CodeSquare size={16} strokeWidth={2} />
           </ExplorerToolbarIcon>
           <ExplorerToolbarTitle onSaveTitle={onTitleChange}>{title}</ExplorerToolbarTitle>
           <ExplorerToolbarActions>
@@ -396,7 +396,9 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
               />
             )}
             <ExplorerToolbarAction
-              icon={showQuery ? <EyeOff /> : <Eye />}
+              icon={
+                showQuery ? <EyeOff size={16} strokeWidth={2} /> : <Eye size={16} strokeWidth={2} />
+              }
               disabled={pendingProposal !== null}
               tooltip={showQuery ? 'Hide query' : 'Show query'}
               onClick={() => onShowQueryChange(!showQuery)}
@@ -405,7 +407,7 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
             {toolbarActions}
 
             <ExplorerToolbarAction
-              icon={<Play />}
+              icon={<Play size={16} strokeWidth={2} />}
               loading={isExecuting}
               tooltip={hasSelection ? 'Run selected query' : 'Run query'}
               disabled={
diff --git a/apps/studio/components/interfaces/Explorer/__tests__/ExplorerToolbar.test.tsx b/apps/studio/components/interfaces/Explorer/__tests__/ExplorerToolbar.test.tsx
index 6b748059c21ab..ff889ca523ab0 100644
--- a/apps/studio/components/interfaces/Explorer/__tests__/ExplorerToolbar.test.tsx
+++ b/apps/studio/components/interfaces/Explorer/__tests__/ExplorerToolbar.test.tsx
@@ -35,7 +35,6 @@ describe('ExplorerToolbar', () => {
     const runAction = within(toolbar).getByRole('button', { name: 'Run cell' })
     expect(runAction).toHaveAttribute('data-slot', 'explorer-toolbar-action')
     expect(runAction).toHaveAttribute('data-size', 'tiny')
-    expect(runAction).toHaveClass('w-7', 'px-0')
   })
 
   it('supports labeled actions and forwards refs and native props', () => {
@@ -64,6 +63,7 @@ describe('ExplorerToolbar', () => {
     expect(toolbar.querySelector('[data-slot="explorer-toolbar-actions"]')).toHaveClass('gap-px')
     expect(action).toHaveAttribute('data-command', 'analyze')
     expect(action).not.toHaveClass('w-7')
+    expect(action).toHaveClass('text-tertiary-foreground', 'hover:text-foreground')
     expect(actionRef.current).toBe(action)
   })
 })
diff --git a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
index 293ec7d6fdeea..fac0c33c63823 100644
--- a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
+++ b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
@@ -153,7 +153,7 @@ const NewTabButton = () => {
       <DropdownMenuContent className="w-40" align="end">
         <DropdownMenuItem className="gap-x-2" onClick={() => createQuery()}>
           <SquareCode size={14} />
-          <span>New query</span>
+          <span>Run SQL</span>
         </DropdownMenuItem>
         <DropdownMenuItem className="gap-x-2" onClick={() => createNotebook()}>
           <NotebookText size={14} />
diff --git a/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx b/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx
index 0b94d8cdb6800..1a9aa92f849b3 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx
@@ -462,6 +462,19 @@ export const AssistantChat = ({
     }
   }, [composerContext?.initialInput])
 
+  let placeholder: string
+  if (hasMessages && isSupportChat) {
+    placeholder = 'Share details so the assistant can help with your support request...'
+  } else if (hasMessages) {
+    placeholder = 'Ask a follow up question...'
+  } else if ((composerContext?.sqlSnippets ?? []).length > 0) {
+    placeholder = 'Ask a question or make a change...'
+  } else if (isSupportChat) {
+    placeholder = 'Describe your support issue...'
+  } else {
+    placeholder = 'Chat to Postgres...'
+  }
+
   return (
     <ErrorBoundary
       message="Something went wrong with the AI Assistant"
@@ -614,102 +627,89 @@ export const AssistantChat = ({
           )}
         </AnimatePresence>
 
-        <div className="px-3 pb-3 z-20 relative w-full max-w-3xl mx-auto flex flex-col gap-y-3">
-          {isSupportChat && !isSupportChatClosed && (
-            <div>
-              <div className="mb-3 border-t" />
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="tiny"
-                  disabled={!supportConversationId}
-                  onClick={() => state.setSupportLifecycleStatus(chatId, 'escalated')}
-                >
-                  Escalate to human
-                </Button>
-                <Button
-                  variant="outline"
-                  size="tiny"
-                  disabled={!supportConversationId}
-                  onClick={() => state.setSupportLifecycleStatus(chatId, 'user_resolved')}
-                >
-                  Resolve
-                </Button>
+        <div className="relative z-20 w-full px-7 pb-3">
+          <div className="mx-auto flex w-full max-w-3xl flex-col gap-y-3">
+            {isSupportChat && !isSupportChatClosed && (
+              <div>
+                <div className="mb-3 border-t" />
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="tiny"
+                    disabled={!supportConversationId}
+                    onClick={() => state.setSupportLifecycleStatus(chatId, 'escalated')}
+                  >
+                    Escalate to human
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="tiny"
+                    disabled={!supportConversationId}
+                    onClick={() => state.setSupportLifecycleStatus(chatId, 'user_resolved')}
+                  >
+                    Resolve
+                  </Button>
+                </div>
               </div>
-            </div>
-          )}
-
-          {disablePrompts && (
-            <Admonition
-              showIcon={false}
-              type="default"
-              title="Assistant has been temporarily disabled"
-              description="We're currently looking into getting it back online"
-            />
-          )}
+            )}
 
-          {isSuccess && !isApiKeySet && (
-            <Admonition
-              type="default"
-              title="OpenAI API key not set"
-              description={
-                <Markdown
-                  content={
-                    'Add your `OPENAI_API_KEY` to your environment variables to use the AI Assistant.'
-                  }
-                />
-              }
-            />
-          )}
+            {disablePrompts && (
+              <Admonition
+                showIcon={false}
+                type="default"
+                title="Assistant has been temporarily disabled"
+                description="We're currently looking into getting it back online"
+              />
+            )}
 
-          <AssistantChatForm
-            textAreaRef={inputRef}
-            className={cn(
-              'z-20',
-              '[&>form>textarea]:text-base [&>form>textarea]:md:text-sm [&>form>textarea]:border',
-              '[&>form>textarea]:rounded-md [&>form>textarea]:outline-hidden!',
-              '[&>form>textarea]:ring-offset-0! [&>form>textarea]:ring-0!'
+            {isSuccess && !isApiKeySet && (
+              <Admonition
+                type="default"
+                title="OpenAI API key not set"
+                description={
+                  <Markdown
+                    content={
+                      'Add your `OPENAI_API_KEY` to your environment variables to use the AI Assistant.'
+                    }
+                  />
+                }
+              />
             )}
-            loading={isChatLoading}
-            isEditing={!!editingMessageId}
-            disabled={isChatInputDisabled}
-            placeholder={
-              hasMessages
-                ? isSupportChat
-                  ? 'Share details so the assistant can help with your support request...'
-                  : 'Ask a follow up question...'
-                : (composerContext?.sqlSnippets ?? []).length > 0
-                  ? 'Ask a question or make a change...'
-                  : isSupportChat
-                    ? 'Describe your support issue...'
-                    : 'Chat to Postgres...'
-            }
-            value={value}
-            onValueChange={(e) => {
-              setValue(e.target.value)
-              onInputChange?.(e.target.value)
-            }}
-            onSubmit={(finalMessage) => {
-              sendMessageToAssistant(finalMessage)
-            }}
-            onStop={() => {
-              stop()
-              // to save partial responses from the AI
-              const lastMessage = chatMessages[chatMessages.length - 1]
-              if (lastMessage && lastMessage.role === 'assistant') {
-                state.updateMessage(lastMessage, chatId)
-              }
-            }}
-            sqlSnippets={composerContext?.sqlSnippets}
-            onRemoveSnippet={(index) => {
-              const newSnippets = [...(composerContext?.sqlSnippets ?? [])]
-              newSnippets.splice(index, 1)
-              composerContext?.onSetSqlSnippets?.(newSnippets)
-            }}
-            includeSnippetsInMessage={includeSnippetsInMessage}
-            selectedModel={selectedModel}
-            onSelectModel={(model) => snap.setModel(model)}
-          />
+
+            <AssistantChatForm
+              textAreaRef={inputRef}
+              className="z-20"
+              loading={isChatLoading}
+              isEditing={!!editingMessageId}
+              disabled={isChatInputDisabled}
+              placeholder={placeholder}
+              value={value}
+              onValueChange={(e) => {
+                setValue(e.target.value)
+                onInputChange?.(e.target.value)
+              }}
+              onSubmit={(finalMessage) => {
+                sendMessageToAssistant(finalMessage)
+              }}
+              onStop={() => {
+                stop()
+                // to save partial responses from the AI
+                const lastMessage = chatMessages[chatMessages.length - 1]
+                if (lastMessage && lastMessage.role === 'assistant') {
+                  state.updateMessage(lastMessage, chatId)
+                }
+              }}
+              sqlSnippets={composerContext?.sqlSnippets}
+              onRemoveSnippet={(index) => {
+                const newSnippets = [...(composerContext?.sqlSnippets ?? [])]
+                newSnippets.splice(index, 1)
+                composerContext?.onSetSqlSnippets?.(newSnippets)
+              }}
+              includeSnippetsInMessage={includeSnippetsInMessage}
+              selectedModel={selectedModel}
+              onSelectModel={(model) => snap.setModel(model)}
+            />
+          </div>
         </div>
       </div>
     </ErrorBoundary>
diff --git a/apps/studio/components/ui/AIAssistantPanel/AssistantNotebookPreview.tsx b/apps/studio/components/ui/AIAssistantPanel/AssistantNotebookPreview.tsx
index 4b273f3dd749a..75c793a11c478 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AssistantNotebookPreview.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AssistantNotebookPreview.tsx
@@ -86,7 +86,7 @@ export const AssistantNotebookPreview = ({
     <div className={cn('flex w-full min-w-0 max-w-6xl mx-auto flex-col', className)}>
       <ExplorerToolbar aria-label="Notebook toolbar">
         <ExplorerToolbarIcon>
-          <NotebookText />
+          <NotebookText size={16} strokeWidth={2} />
         </ExplorerToolbarIcon>
         <ExplorerToolbarTitle>{title ?? FALLBACK_TITLE[mode]}</ExplorerToolbarTitle>
         <ExplorerToolbarActions>
diff --git a/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx b/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx
index 47144332cc3a5..dd0b6acc89cd3 100644
--- a/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx
@@ -1,21 +1,33 @@
 import { ArrowDownIcon } from 'lucide-react'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import { useCallback } from 'react'
 import { Button, cn } from 'ui'
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom'
 
-type ConversationProps = ComponentProps<typeof StickToBottom>
+type ConversationProps = Omit<ComponentProps<typeof StickToBottom>, 'children'> & {
+  children?: ReactNode
+}
 type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>
 type ConversationScrollButtonProps = ComponentProps<typeof Button>
 
-export const Conversation = ({ className, ...props }: ConversationProps) => (
+export const Conversation = ({ className, children, ...props }: ConversationProps) => (
   <StickToBottom
     className={cn('relative flex-1 overflow-y-auto', className)}
     initial="smooth"
     resize="smooth"
     role="log"
     {...props}
-  />
+  >
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-linear-to-b from-card to-transparent"
+    />
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8 bg-linear-to-t from-card to-transparent"
+    />
+    {children}
+  </StickToBottom>
 )
 
 export const ConversationContent = ({ className, ...props }: ConversationContentProps) => (

From 78bd0e066b0789d11c9c48999f4384487e9fc8a8 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Mon, 31 Aug 2026 18:38:30 +1000
Subject: [PATCH 07/12] chore(studio): align query results grid typography with
 table editor (#49752)

## Summary
- Match Explorer/SQL query results table typography to Table Editor:
sans cells at `text-grid`, headers at `text-xs` / `text-foreground`
- Reuse Table Editor `NullValue` for null cells so empty results read
the same way
- When the Explorer feature preview is on, the inline editor "expand"
action opens a new Explorer query tab (same pattern as the assistant)
instead of the SQL Editor

## Test plan
- [ ] Run a query in Explorer and confirm header/cell font, size, and
color match Table Editor
- [ ] Confirm `NULL` cells use the same faded treatment as Table Editor
- [ ] Check the SQL Editor results pane (shared `DataGridResults`) still
looks correct
- [ ] With Explorer feature preview on, expand the inline editor and
confirm it creates an Explorer query tab with the current SQL, then
closes the panel
- [ ] With Explorer feature preview off, expand the inline editor and
confirm it still opens a SQL Editor snippet

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## New Features
- Added the ability to open SQL directly in Explorer from the editor
panel.
- Run SQL actions now create a query draft and navigate to the query
tab.

## Style
- Improved data grid readability with clearer text, left-aligned
headers, truncated labels, and selectable content.
- Added dedicated styling for null values.
- Updated empty-results messaging with standard sans-serif text.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../interfaces/Explorer/ExplorerHomeTab.tsx   |  2 +-
 .../Explorer/__tests__/hooks.test.tsx         | 43 +++++++++++-
 .../components/interfaces/Explorer/hooks.ts   |  4 +-
 .../ui/DataGridResults/ResultCell.tsx         | 10 ++-
 .../components/ui/DataGridResults/index.tsx   |  8 ++-
 .../components/ui/EditorPanel/EditorPanel.tsx | 65 +++++++++++--------
 6 files changed, 94 insertions(+), 38 deletions(-)

diff --git a/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx b/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
index a5c530116d42e..24272c3f941e3 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
@@ -43,7 +43,7 @@ export const ExplorerHomeTab = () => {
               title="Run SQL"
               description="Write and run an ad-hoc query"
               bgColor="bg-blue-500"
-              onClick={createQuery}
+              onClick={() => createQuery()}
             />
             <ActionCard
               icon={<NotebookText className="h-4 w-4 text-foreground" strokeWidth={1.5} />}
diff --git a/apps/studio/components/interfaces/Explorer/__tests__/hooks.test.tsx b/apps/studio/components/interfaces/Explorer/__tests__/hooks.test.tsx
index 321dbd4c94db2..7b5e476aceb5c 100644
--- a/apps/studio/components/interfaces/Explorer/__tests__/hooks.test.tsx
+++ b/apps/studio/components/interfaces/Explorer/__tests__/hooks.test.tsx
@@ -1,10 +1,11 @@
 import { act, renderHook } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useCreateChat } from '../hooks'
+import { useCreateChat, useCreateQuery } from '../hooks'
 
 const {
   mockCreateChat,
+  mockCreateDraft,
   mockPush,
   mockSelectChat,
   mockSetContext,
@@ -12,6 +13,7 @@ const {
   mockWhenInitialized,
 } = vi.hoisted(() => ({
   mockCreateChat: vi.fn(() => 'chat-2'),
+  mockCreateDraft: vi.fn(),
   mockPush: vi.fn(),
   mockSelectChat: vi.fn(),
   mockSetContext: vi.fn(),
@@ -28,6 +30,12 @@ vi.mock('@/hooks/misc/useSelectedProject', () => ({
 vi.mock('@/hooks/misc/useSelectedOrganization', () => ({
   useSelectedOrganizationQuery: () => ({ data: { slug: 'acme' } }),
 }))
+vi.mock('@/lib/api/snippets.browser', () => ({
+  generateUuid: () => 'query-new',
+}))
+vi.mock('@/state/explorer-query', () => ({
+  useExplorerQueryStateSnapshot: () => ({ createDraft: mockCreateDraft }),
+}))
 vi.mock('@/state/ai-assistant-state', () => ({
   useAiAssistantState: () => ({
     createChat: mockCreateChat,
@@ -109,3 +117,36 @@ describe('useCreateChat', () => {
     expect(mockPush).toHaveBeenCalledWith('/project/default/explorer/chat/chat-2')
   })
 })
+
+describe('useCreateQuery', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('creates a draft and opens it as an Explorer query tab', () => {
+    const { result } = renderHook(() => useCreateQuery())
+
+    expect(result.current.createQuery({ sql: 'select 1', name: 'Untitled query' })).toBe(
+      'query-new'
+    )
+    expect(mockCreateDraft).toHaveBeenCalledWith({
+      id: 'query-new',
+      projectRef: 'default',
+      sql: 'select 1',
+      name: 'Untitled query',
+    })
+    expect(mockPush).toHaveBeenCalledWith('/project/default/explorer/query/query-new')
+  })
+
+  it('creates an empty draft when no sql or name is provided', () => {
+    const { result } = renderHook(() => useCreateQuery())
+
+    expect(result.current.createQuery()).toBe('query-new')
+    expect(mockCreateDraft).toHaveBeenCalledWith({
+      id: 'query-new',
+      projectRef: 'default',
+      sql: undefined,
+      name: undefined,
+    })
+  })
+})
diff --git a/apps/studio/components/interfaces/Explorer/hooks.ts b/apps/studio/components/interfaces/Explorer/hooks.ts
index 39c2e75719d1f..6d152d9ffb2e8 100644
--- a/apps/studio/components/interfaces/Explorer/hooks.ts
+++ b/apps/studio/components/interfaces/Explorer/hooks.ts
@@ -148,11 +148,11 @@ export const useCreateQuery = () => {
   const { data: project } = useSelectedProjectQuery()
   const querySnap = useExplorerQueryStateSnapshot()
 
-  const createQuery = () => {
+  const createQuery = ({ sql, name }: { sql?: string; name?: string } = {}) => {
     if (!project) return console.error('Project is required')
 
     const id = generateUuid()
-    querySnap.createDraft({ id, projectRef: project.ref })
+    querySnap.createDraft({ id, projectRef: project.ref, sql, name })
 
     router.push(`/project/${project.ref}/explorer/query/${id}`)
 
diff --git a/apps/studio/components/ui/DataGridResults/ResultCell.tsx b/apps/studio/components/ui/DataGridResults/ResultCell.tsx
index 1fd909239fdfb..3b77a9b6b88f8 100644
--- a/apps/studio/components/ui/DataGridResults/ResultCell.tsx
+++ b/apps/studio/components/ui/DataGridResults/ResultCell.tsx
@@ -1,7 +1,8 @@
 import { Expand } from 'lucide-react'
-import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import { formatCellValue, isLargeValue } from './DataGridResults.utils'
+import { NullValue } from '@/components/grid/components/common/NullValue'
 
 interface ResultCellProps {
   column: string
@@ -15,16 +16,13 @@ export const ResultCell = ({ column, value, onContextMenu, onExpand }: ResultCel
 
   return (
     <div
-      className={cn(
-        'group/cell relative flex items-center h-full font-mono text-xs w-full whitespace-pre',
-        value === null && 'text-foreground-lighter'
-      )}
+      className="group/cell relative flex h-full w-full items-center overflow-hidden text-ellipsis text-grid text-foreground"
       onContextMenu={(e) => {
         e.preventDefault()
         onContextMenu(e, column, value)
       }}
     >
-      {formatCellValue(value)}
+      {value === null ? <NullValue /> : formatCellValue(value)}
       {showExpand && (
         <Tooltip>
           <TooltipTrigger asChild>
diff --git a/apps/studio/components/ui/DataGridResults/index.tsx b/apps/studio/components/ui/DataGridResults/index.tsx
index 6aa117000f47e..fb7dccda9a80a 100644
--- a/apps/studio/components/ui/DataGridResults/index.tsx
+++ b/apps/studio/components/ui/DataGridResults/index.tsx
@@ -43,7 +43,11 @@ export const DataGridResults = ({ rows }: { rows: readonly ResultRow[] }) => {
   }, [])
 
   const columnRender = (name: string) => {
-    return <div className="flex h-full items-center justify-center font-mono text-xs">{name}</div>
+    return (
+      <div className="flex h-full items-center overflow-hidden text-ellipsis text-xs select-text text-foreground">
+        {name}
+      </div>
+    )
   }
 
   const columns: CalculatedColumn<ResultRow>[] = useMemo(
@@ -80,7 +84,7 @@ export const DataGridResults = ({ rows }: { rows: readonly ResultRow[] }) => {
   return (
     <>
       {rows.length === 0 ? (
-        <p className="px-4 py-3 font-mono text-sm text-foreground-light">
+        <p className="px-4 py-3 font-sans text-sm text-foreground-light">
           Success. No rows returned
         </p>
       ) : (
diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
index 9b696b3a207cd..afa5bb51574fe 100644
--- a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
+++ b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
@@ -44,7 +44,9 @@ import { DataGridResults } from '../DataGridResults'
 import { SqlWarningAdmonition } from '../SqlWarningAdmonition'
 import { formatSqlError } from './EditorPanel.utils'
 import { SaveSnippetDialog } from './SaveSnippetDialog'
+import { useIsExplorerEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { isExplainQuery } from '@/components/interfaces/ExplainVisualizer/ExplainVisualizer.utils'
+import { useCreateQuery } from '@/components/interfaces/Explorer/hooks'
 import { generateSnippetTitle } from '@/components/interfaces/SQLEditor/SQLEditor.constants'
 import { createSqlSnippetSkeletonV2 } from '@/components/interfaces/SQLEditor/SQLEditor.utils'
 import { useAddDefinitions } from '@/components/interfaces/SQLEditor/useAddDefinitions'
@@ -84,6 +86,8 @@ export const EditorPanel = () => {
   const { profile } = useProfile()
   const { closeSidebar } = useSidebarManagerSnapshot()
   const sqlEditorSnap = useSqlEditorV2StateSnapshot()
+  const isExplorerEnabled = useIsExplorerEnabled()
+  const { createQuery } = useCreateQuery()
   const queryClient = useQueryClient()
 
   const [activeSnippet, setActiveSnippet] = useState<Extract<Content, { type: 'sql' }> | null>(null)
@@ -271,6 +275,38 @@ export const EditorPanel = () => {
     editorPanelState.setActiveSnippetId(null)
   }
 
+  const handleExpand = () => {
+    if (isExplorerEnabled) {
+      const id = createQuery({ sql: currentValue, name: generateSnippetTitle() })
+      if (id) handleClosePanel()
+      return
+    }
+
+    if (!ref) return console.error('Project ref is required')
+
+    if (!project) {
+      console.error('Project is required')
+      return
+    }
+    if (!profile) {
+      console.error('Profile is required')
+      return
+    }
+
+    const snippet = createSqlSnippetSkeletonV2({
+      name: generateSnippetTitle(),
+      sql: currentValue,
+      owner_id: profile.id,
+      project_id: project.id,
+    })
+
+    sqlEditorSnap.addSnippet({ projectRef: ref, snippet })
+    sqlEditorSnap.addNeedsSaving(snippet.id)
+
+    router.push(`/project/${ref}/sql/${snippet.id}`)
+    handleClosePanel()
+  }
+
   return (
     <div className="flex h-full flex-col bg-card">
       <div className="border-b border-b-muted flex items-center justify-between gap-x-4 pl-4 pr-3 h-(--header-height)">
@@ -426,37 +462,14 @@ export const EditorPanel = () => {
             variant="text"
             className="w-7 h-7 p-0"
             icon={<Maximize2 strokeWidth={1.5} />}
+            aria-label={isExplorerEnabled ? 'Open in Explorer' : 'Expand to SQL editor'}
             tooltip={{
               content: {
                 side: 'bottom',
-                text: 'Expand to SQL editor',
+                text: isExplorerEnabled ? 'Open in Explorer' : 'Expand to SQL editor',
               },
             }}
-            onClick={() => {
-              if (!ref) return console.error('Project ref is required')
-
-              if (!project) {
-                console.error('Project is required')
-                return
-              }
-              if (!profile) {
-                console.error('Profile is required')
-                return
-              }
-
-              const snippet = createSqlSnippetSkeletonV2({
-                name: generateSnippetTitle(),
-                sql: currentValue,
-                owner_id: profile.id,
-                project_id: project.id,
-              })
-
-              sqlEditorSnap.addSnippet({ projectRef: ref, snippet })
-              sqlEditorSnap.addNeedsSaving(snippet.id)
-
-              router.push(`/project/${ref}/sql/${snippet.id}`)
-              handleClosePanel()
-            }}
+            onClick={handleExpand}
           />
 
           <ButtonTooltip

From 537f09be0f3e454bab38eeade42aa7bac4794335 Mon Sep 17 00:00:00 2001
From: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Date: Mon, 31 Aug 2026 10:55:23 +0200
Subject: [PATCH 08/12] fix(studio): label omitted worker runtime as custom
 FE-4314 (#49757)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

Workers with an omitted runtime are displayed as Unknown, even though an
omitted runtime represents a custom worker image.

## Fix

Display Custom when the runtime is omitted. Preserve friendly labels for
known runtimes and raw values for explicit unrecognized runtimes.

## How to test

- Run `node_modules/.bin/vitest --run
components/interfaces/Workers/Workers.utils.test.ts` from `apps/studio`.
- Open a worker whose API response omits `spec.runtime`.
- Expected result: the runtime badge displays Custom.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Bug Fixes**
- Worker runtimes without available metadata are now labeled
**“Custom”** instead of **“Unknown.”**
- Updated the related behavior validation to reflect the corrected
runtime label.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/interfaces/Workers/Workers.utils.test.ts       | 4 ++--
 apps/studio/components/interfaces/Workers/Workers.utils.ts    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/interfaces/Workers/Workers.utils.test.ts b/apps/studio/components/interfaces/Workers/Workers.utils.test.ts
index da791ba034949..735d86fe26cb8 100644
--- a/apps/studio/components/interfaces/Workers/Workers.utils.test.ts
+++ b/apps/studio/components/interfaces/Workers/Workers.utils.test.ts
@@ -112,8 +112,8 @@ describe('formatRuntime', () => {
     expect(formatRuntime('rust')).toBe('rust')
   })
 
-  it('reports unknown when the API omits the runtime', () => {
-    expect(formatRuntime(undefined)).toBe('Unknown')
+  it('labels an omitted runtime as custom', () => {
+    expect(formatRuntime(undefined)).toBe('Custom')
   })
 })
 
diff --git a/apps/studio/components/interfaces/Workers/Workers.utils.ts b/apps/studio/components/interfaces/Workers/Workers.utils.ts
index ddbcae1ee2094..116781496367e 100644
--- a/apps/studio/components/interfaces/Workers/Workers.utils.ts
+++ b/apps/studio/components/interfaces/Workers/Workers.utils.ts
@@ -42,7 +42,7 @@ export const getRuntimeMeta = (runtime: string | undefined): RuntimeMeta | undef
   runtime === undefined ? undefined : RUNTIMES[runtime]
 
 export const formatRuntime = (runtime: string | undefined): string =>
-  getRuntimeMeta(runtime)?.label ?? runtime ?? 'Unknown'
+  getRuntimeMeta(runtime)?.label ?? runtime ?? 'Custom'
 
 // The API reports size as e.g. "2gb-1vcpu"; render the parts when they parse, the raw value if not.
 export const formatSize = (size: string): string => {

From d11705ded0164a7463a7a15e5475bf8794fbe5b0 Mon Sep 17 00:00:00 2001
From: Mert YEREKAPAN <33198490+myerekapan@users.noreply.github.com>
Date: Mon, 31 Aug 2026 12:53:16 +0300
Subject: [PATCH 09/12] feat(studio): add plan-change panel presentation
 experiment (#49534)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

A/B test for the plan-change side panel
(`/org/_/billing?panel=subscriptionPlan`) — gated behind PostHog flag
`pricingPanelPlanPresentation` (multivariate, 3 arms).

The current panel drops `description`, `preface`, and `footer` from
`shared-data/plans.ts` and uses a much smaller type scale than the www
pricing page, so the two surfaces look unrelated and plan differences
are hard to reason about. This experiment tests whether matching the www
style and surfacing plan gaps improves upgrade conversion.

| Variant | Surface |
| --- | --- |
| `control` | Current panel — no change (baseline cohort, still tracked)
|
| `parity` | www pricing page style: mono uppercase heading,
description, CTA above price, large mono price, preface ("Everything in
the Free Plan, plus:"), 13px features |
| `gaps` | `parity` + gap rows at the bottom showing what the plan is
missing (✗ Daily backups, ✗ Email support, dimmed ✓ 1-day log retention)
|

## Variants

Control
<img width="3520" height="2394" alt="Arc 2026-08-26 16 14 09"
src="https://github.com/user-attachments/assets/95464e83-b377-4754-85ee-c65dce0206c7"
/>

Parity
<img width="3520" height="2394" alt="Arc 2026-08-26 16 14 01"
src="https://github.com/user-attachments/assets/f50e66e2-7cbe-4e65-b1fb-083efd79ff00"
/>

Gaps
<img width="3520" height="2394" alt="Arc 2026-08-26 16 29 48"
src="https://github.com/user-attachments/assets/fbb08a12-1b76-4ce5-9247-20a6e8399be3"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a refreshed subscription plan selector with pricing,
descriptions, features, exclusions, and plan-specific messaging.
* Added upgrade and downgrade actions with loading states and
eligibility-based controls.
* Added plan comparison views highlighting missing and lower-tier
features.
* Added tailored handling for enterprise plans and supported billing
arrangements.
* Improved accessibility by respecting reduced-motion preferences during
plan highlights.

* **Tests**
* Expanded coverage for plan eligibility, feature comparisons, and
presentation variants.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: kemal <hello@kemal.earth>
---
 .../BillingSettings/Subscription/PlanCard.tsx | 377 ++++++++++++++++++
 .../Subscription/PlanCards.tsx                |  92 +++++
 .../Subscription/PlanUpdateSidePanel.test.tsx | 104 ++++-
 .../Subscription/PlanUpdateSidePanel.tsx      | 166 +-------
 .../Subscription/plan-presentation.test.ts    |  65 +++
 .../Subscription/plan-presentation.ts         |  68 ++++
 packages/common/telemetry-constants.ts        |  20 +
 7 files changed, 738 insertions(+), 154 deletions(-)
 create mode 100644 apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
 create mode 100644 apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
 create mode 100644 apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts
 create mode 100644 apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts

diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
new file mode 100644
index 0000000000000..406e58cbd54ec
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
@@ -0,0 +1,377 @@
+import { isArray } from 'lodash'
+import { Check, X } from 'lucide-react'
+import type { PricingInformation } from 'shared-data'
+import { Button, cn } from 'ui'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+
+import type { GapFeature, PlanPresentationVariant } from './plan-presentation'
+import { FREE_PLAN_GAPS, PRO_PLAN_GAPS } from './plan-presentation'
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { RequestUpgradeToBillingOwners } from '@/components/ui/RequestUpgradeToBillingOwners'
+import { MANAGED_BY } from '@/lib/constants/infrastructure'
+import { formatCurrency } from '@/lib/helpers'
+
+const GAPS_BY_PLAN_ID: Record<string, GapFeature[]> = {
+  tier_free: FREE_PLAN_GAPS,
+  tier_pro: PRO_PLAN_GAPS,
+}
+
+export interface PlanCardProps {
+  plan: PricingInformation
+  price: number
+  isCurrentPlan: boolean
+  isDowngradeOption: boolean
+  isLoadingPlans: boolean
+  canUpdateSubscription: boolean
+  isPartnerBilledOrganization: boolean
+  hasOrioleProjects: boolean
+  currentSubscriptionPlanId: string | undefined
+  managedBy: string | undefined
+  shouldHighlight: boolean
+  variant: PlanPresentationVariant
+  onSelectTier: () => void
+  onTrackCtaClick: () => void
+}
+
+export function PlanCard({
+  plan,
+  price,
+  isCurrentPlan,
+  isDowngradeOption,
+  isLoadingPlans,
+  canUpdateSubscription,
+  isPartnerBilledOrganization,
+  hasOrioleProjects,
+  currentSubscriptionPlanId,
+  managedBy,
+  shouldHighlight,
+  variant,
+  onSelectTier,
+  onTrackCtaClick,
+}: PlanCardProps) {
+  const isParity = variant === 'parity' || variant === 'gaps'
+  const features = plan.features
+  const footer = plan.footer
+
+  const gaps: GapFeature[] = variant === 'gaps' ? (GAPS_BY_PLAN_ID[plan.id] ?? []) : []
+
+  const ctaButton = isCurrentPlan ? (
+    <Button block disabled variant="default">
+      Current plan
+    </Button>
+  ) : !canUpdateSubscription &&
+    !isDowngradeOption &&
+    (plan.name === 'Pro' || plan.name === 'Team') ? (
+    <RequestUpgradeToBillingOwners block plan={plan.name} />
+  ) : (
+    <ButtonTooltip
+      block
+      variant={isDowngradeOption ? 'default' : 'primary'}
+      disabled={
+        (!canUpdateSubscription && isDowngradeOption) ||
+        currentSubscriptionPlanId === 'enterprise' ||
+        currentSubscriptionPlanId === 'platform' ||
+        (isPartnerBilledOrganization && plan.id !== 'tier_free') ||
+        managedBy === MANAGED_BY.AWS_MARKETPLACE ||
+        hasOrioleProjects
+      }
+      onClick={() => {
+        onSelectTier()
+        onTrackCtaClick()
+      }}
+      tooltip={{
+        content: {
+          side: 'bottom' as const,
+          className: hasOrioleProjects ? 'w-96 text-center' : '',
+          text:
+            !canUpdateSubscription && isDowngradeOption
+              ? "You need additional permissions to change your organization's plan"
+              : currentSubscriptionPlanId === 'enterprise' ||
+                  currentSubscriptionPlanId === 'platform'
+                ? 'Reach out to us via support to update your plan'
+                : hasOrioleProjects
+                  ? 'Your organization has projects that are using the OrioleDB extension which is only available on the Free plan. Remove all OrioleDB projects before changing your plan.'
+                  : managedBy === MANAGED_BY.AWS_MARKETPLACE
+                    ? 'You cannot change the plan for an organization managed by AWS Marketplace'
+                    : undefined,
+        },
+      }}
+    >
+      {isDowngradeOption ? 'Downgrade' : 'Upgrade'} to {plan.name}
+    </ButtonTooltip>
+  )
+
+  if (!isParity) {
+    return (
+      <ControlCard
+        plan={plan}
+        price={price}
+        isCurrentPlan={isCurrentPlan}
+        isLoadingPlans={isLoadingPlans}
+        shouldHighlight={shouldHighlight}
+        features={features}
+        footer={footer}
+        ctaButton={ctaButton}
+      />
+    )
+  }
+
+  return (
+    <ParityCard
+      plan={plan}
+      price={price}
+      isCurrentPlan={isCurrentPlan}
+      isLoadingPlans={isLoadingPlans}
+      shouldHighlight={shouldHighlight}
+      features={features}
+      footer={footer}
+      gaps={gaps}
+      ctaButton={ctaButton}
+    />
+  )
+}
+
+function ControlCard({
+  plan,
+  price,
+  isCurrentPlan,
+  isLoadingPlans,
+  shouldHighlight,
+  features,
+  footer,
+  ctaButton,
+}: {
+  plan: PricingInformation
+  price: number
+  isCurrentPlan: boolean
+  isLoadingPlans: boolean
+  shouldHighlight: boolean
+  features: (string | string[])[]
+  footer: string | undefined
+  ctaButton: React.ReactNode
+}) {
+  return (
+    <div
+      className={cn(
+        'px-4 py-4 flex flex-col items-start justify-between',
+        'border rounded-md col-span-12 md:col-span-4 bg-surface-200',
+        shouldHighlight &&
+          'ring-4 ring-brand animate-[pulse_1.5s_ease-in-out_1] motion-reduce:animate-none shadow-md shadow-brand/40'
+      )}
+    >
+      <div className="w-full">
+        <div className="flex items-center space-x-2">
+          <p className="text-brand-link text-sm uppercase">{plan.name}</p>
+          {isCurrentPlan ? (
+            <div className="text-xs bg-surface-300 text-foreground-light rounded-sm px-2 py-0.5">
+              Current plan
+            </div>
+          ) : plan.nameBadge ? (
+            <div className="text-xs bg-brand-300 dark:bg-brand-400 text-brand-600 rounded-sm px-2 py-0.5">
+              {plan.nameBadge}
+            </div>
+          ) : null}
+        </div>
+        <div className="mt-4 flex items-center space-x-1 mb-4">
+          {(price ?? 0) > 0 && <p className="text-foreground-light text-sm">From</p>}
+          {isLoadingPlans ? (
+            <div className="h-[28px] flex items-center justify-center">
+              <ShimmeringLoader className="w-[30px] h-[24px]" />
+            </div>
+          ) : (
+            <p className="text-foreground text-lg" translate="no">
+              {formatCurrency(price)}
+            </p>
+          )}
+          <p className="text-foreground-light text-sm">{plan.costUnit}</p>
+        </div>
+        {ctaButton}
+
+        <div className="border-t my-4" />
+
+        <ul role="list">
+          {features.map((feature) => (
+            <li key={typeof feature === 'string' ? feature : feature[0]} className="flex py-2">
+              <div className="w-[12px]">
+                <Check
+                  className="h-3 w-3 text-brand translate-y-[2.5px]"
+                  aria-hidden="true"
+                  strokeWidth={3}
+                />
+              </div>
+              <div>
+                <p className="ml-3 text-xs text-foreground-light">
+                  {typeof feature === 'string' ? feature : feature[0]}
+                </p>
+                {isArray(feature) && (
+                  <p className="ml-3 text-xs text-foreground-lighter">{feature[1]}</p>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {footer && (
+        <div className="border-t pt-4 mt-4">
+          <p className="text-foreground-light text-xs">{footer}</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ParityCard({
+  plan,
+  price,
+  isCurrentPlan,
+  isLoadingPlans,
+  shouldHighlight,
+  features,
+  footer,
+  gaps,
+  ctaButton,
+}: {
+  plan: PricingInformation
+  price: number
+  isCurrentPlan: boolean
+  isLoadingPlans: boolean
+  shouldHighlight: boolean
+  features: (string | string[])[]
+  footer: string | undefined
+  gaps: GapFeature[]
+  ctaButton: React.ReactNode
+}) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-start justify-between',
+        'border rounded-md col-span-12 md:col-span-4 bg-surface-200',
+        shouldHighlight &&
+          'ring-4 ring-brand animate-[pulse_1.5s_ease-in-out_1] motion-reduce:animate-none shadow-md shadow-brand/40'
+      )}
+    >
+      <div className="w-full px-4 pt-4">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 pb-2">
+            <h3 className="text-foreground text-xl font-normal uppercase font-mono">{plan.name}</h3>
+            {isCurrentPlan ? (
+              <span className="text-xs bg-surface-300 text-foreground-light rounded-sm px-2 py-0.5">
+                Current plan
+              </span>
+            ) : plan.nameBadge ? (
+              <span className="bg-foreground-light text-background rounded-md py-0.5 px-2 text-[13px] leading-4">
+                {plan.nameBadge}
+              </span>
+            ) : null}
+          </div>
+        </div>
+
+        <p className="text-foreground-light text-[13px] leading-4 mb-4 min-h-12 line-clamp-3">
+          {plan.description}
+        </p>
+
+        {ctaButton}
+
+        <div className="border-t my-4" />
+
+        <div className="flex items-end gap-1 pb-4">
+          <div>
+            <p
+              className={cn(
+                'text-foreground-lighter text-[13px] leading-4',
+                (price ?? 0) <= 0 && 'invisible'
+              )}
+            >
+              From
+            </p>
+            <div className="flex items-end">
+              {isLoadingPlans ? (
+                <div className="h-[40px] flex items-center justify-center">
+                  <ShimmeringLoader className="w-[60px] h-[32px]" />
+                </div>
+              ) : (
+                <p className="text-foreground text-3xl font-mono" translate="no">
+                  {formatCurrency(price)}
+                </p>
+              )}
+              <p className="text-foreground-lighter mb-0.5 ml-1 text-[13px] leading-4">
+                {plan.costUnit}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full flex-1 flex flex-col px-4 pb-4">
+        {plan.preface && (
+          <p className="text-foreground-lighter text-[13px] mt-2 mb-4">{plan.preface}</p>
+        )}
+        <ul className="text-[13px] flex-1">
+          {features.map((feature) => (
+            <li
+              key={typeof feature === 'string' ? feature : feature[0]}
+              className="flex flex-col py-2 first:mt-0"
+            >
+              <div className="flex items-center">
+                <div className="flex w-5">
+                  <Check className="h-4 w-4 text-brand" aria-hidden="true" strokeWidth={3} />
+                </div>
+                <span className="text-foreground">
+                  {typeof feature === 'string' ? feature : feature[0]}
+                </span>
+              </div>
+              {typeof feature !== 'string' && isArray(feature) && (
+                <p className="ml-5 text-foreground-lighter">{feature[1]}</p>
+              )}
+            </li>
+          ))}
+        </ul>
+
+        {gaps.length > 0 && (
+          <>
+            <div className="border-t my-3" />
+            <p className="text-foreground-muted text-[13px] mb-3">
+              {gaps.some((g) => g.type === 'lesser') ? 'Plan limits' : 'Not included'}
+            </p>
+            <ul className="text-[13px]">
+              {gaps.map((gap) => (
+                <li key={gap.label} className="flex items-center py-1.5">
+                  {gap.type === 'missing' ? (
+                    <>
+                      <div className="flex w-5">
+                        <X
+                          className="h-4 w-4 text-foreground-muted"
+                          aria-hidden="true"
+                          strokeWidth={2}
+                        />
+                      </div>
+                      <span className="text-foreground-muted">{gap.label}</span>
+                    </>
+                  ) : (
+                    <>
+                      <div className="flex w-5">
+                        <Check
+                          className="h-4 w-4 text-foreground-muted"
+                          aria-hidden="true"
+                          strokeWidth={2}
+                        />
+                      </div>
+                      <span className="text-foreground-muted">{gap.label}</span>
+                    </>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+
+        {footer && (
+          <div className="border-t pt-4 mt-auto">
+            <p className="text-foreground-lighter text-[13px] whitespace-pre-wrap">{footer}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
new file mode 100644
index 0000000000000..2ff1fa4930426
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
@@ -0,0 +1,92 @@
+import { useRouter } from 'next/router'
+import { plans as subscriptionsPlans } from 'shared-data/plans'
+
+import { EnterpriseCard } from './EnterpriseCard'
+import { isPlanChangeEligible, usePlanPresentationExperiment } from './plan-presentation'
+import { PlanCard } from './PlanCard'
+import { getPlanChangeType } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
+import type { OrgPlan, PlanId } from '@/data/subscriptions/types'
+import { useTrack } from '@/lib/telemetry/track'
+import type { Organization } from '@/types/base'
+
+export interface PlanCardsProps {
+  availablePlans: OrgPlan[]
+  isLoadingPlans: boolean
+  currentSubscriptionPlanId: PlanId | undefined
+  currentSubscriptionPlanName: string | undefined
+  canUpdateSubscription: boolean
+  isPartnerBilledOrganization: boolean
+  hasOrioleProjects: boolean
+  selectedOrganization: Organization | undefined
+  onSelectTier: (tier: 'tier_free' | 'tier_pro' | 'tier_team') => void
+}
+
+export function PlanCards({
+  availablePlans,
+  isLoadingPlans,
+  currentSubscriptionPlanId,
+  currentSubscriptionPlanName,
+  canUpdateSubscription,
+  isPartnerBilledOrganization,
+  hasOrioleProjects,
+  selectedOrganization,
+  onSelectTier,
+}: PlanCardsProps) {
+  const router = useRouter()
+  const track = useTrack()
+
+  const eligible = isPlanChangeEligible({
+    managedBy: selectedOrganization?.managed_by,
+    billingPartner: selectedOrganization?.billing_partner,
+    currentPlanId: currentSubscriptionPlanId,
+    canUpdateSubscription,
+  })
+
+  const variant = usePlanPresentationExperiment({ eligible })
+
+  return (
+    <div className="py-6 grid grid-cols-12 gap-3">
+      {subscriptionsPlans.map((plan) => {
+        const planMeta = availablePlans.find((p) => p.id === plan.id.split('tier_')[1])
+        const price = planMeta?.price ?? 0
+        const isDowngradeOption =
+          getPlanChangeType(currentSubscriptionPlanId, plan?.planId) === 'downgrade'
+        const isCurrentPlan = planMeta?.id === currentSubscriptionPlanId
+
+        const source = Array.isArray(router.query.source)
+          ? router.query.source[0]
+          : router.query.source
+        const shouldHighlight = source === 'log-drains-empty-state' && plan.id === 'tier_pro'
+
+        if (plan.id === 'tier_enterprise') {
+          return <EnterpriseCard key={plan.id} plan={plan} isCurrentPlan={isCurrentPlan} />
+        }
+
+        return (
+          <PlanCard
+            key={plan.id}
+            plan={plan}
+            price={price}
+            isCurrentPlan={isCurrentPlan}
+            isDowngradeOption={isDowngradeOption}
+            isLoadingPlans={isLoadingPlans}
+            canUpdateSubscription={canUpdateSubscription}
+            isPartnerBilledOrganization={isPartnerBilledOrganization}
+            hasOrioleProjects={hasOrioleProjects}
+            currentSubscriptionPlanId={currentSubscriptionPlanId}
+            managedBy={selectedOrganization?.managed_by}
+            shouldHighlight={shouldHighlight}
+            variant={variant}
+            onSelectTier={() => onSelectTier(plan.id as 'tier_free' | 'tier_pro' | 'tier_team')}
+            onTrackCtaClick={() =>
+              track('studio_pricing_plan_cta_clicked', {
+                selectedPlan: plan.name,
+                currentPlan: currentSubscriptionPlanName,
+              })
+            }
+          />
+        )
+      })}
+    </div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx
index 7cb5fb3fd3a11..30334872ecdbe 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx
@@ -8,6 +8,7 @@ import { createMockOrganization, render } from '@/tests/helpers'
 const mockSelectedOrganization = vi.hoisted(() => vi.fn())
 const mockPush = vi.hoisted(() => vi.fn())
 const mockPartnerManagedResource = vi.hoisted(() => vi.fn())
+const mockUsePHFlag = vi.hoisted(() => vi.fn())
 
 vi.mock('common', async (importOriginal) => {
   const original = (await importOriginal()) as typeof import('common')
@@ -27,8 +28,26 @@ vi.mock('next/router', () => ({
 
 vi.mock('shared-data/plans', () => ({
   plans: [
-    { id: 'tier_free', planId: 'free', name: 'Free', costUnit: '/ month', features: [] },
-    { id: 'tier_pro', planId: 'pro', name: 'Pro', costUnit: '/ month', features: [] },
+    {
+      id: 'tier_free',
+      planId: 'free',
+      name: 'Free',
+      costUnit: '/ month',
+      features: ['Unlimited API requests'],
+      description: 'Perfect for passion projects & simple websites.',
+      preface: 'Get started with:',
+      footer: 'Free projects are paused after 1 week of inactivity. Limit of 2 active projects.',
+    },
+    {
+      id: 'tier_pro',
+      planId: 'pro',
+      name: 'Pro',
+      nameBadge: 'Most Popular',
+      costUnit: '/ month',
+      features: ['Email support'],
+      description: 'For production applications with the power to scale.',
+      preface: 'Everything in the Free Plan, plus:',
+    },
   ],
 }))
 
@@ -117,9 +136,18 @@ vi.mock('./SubscriptionPlanUpdateDialog', () => ({
   SubscriptionPlanUpdateDialog: () => null,
 }))
 
+vi.mock('@/hooks/ui/useFlag', () => ({
+  usePHFlag: mockUsePHFlag,
+}))
+
+vi.mock('@/hooks/misc/useTrackExperimentExposure', () => ({
+  useTrackExperimentExposure: vi.fn(),
+}))
+
 describe('PlanUpdateSidePanel', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockUsePHFlag.mockReturnValue('control')
     mockSelectedOrganization.mockReturnValue(
       createMockOrganization({
         slug: 'stripe-org',
@@ -183,4 +211,76 @@ describe('PlanUpdateSidePanel', () => {
 
     expect(screen.getByTestId('partner-managed-resource')).toBeInTheDocument()
   })
+
+  describe('parity variant', () => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue('parity')
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('renders plan description', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(
+        screen.getByText('Perfect for passion projects & simple websites.')
+      ).toBeInTheDocument()
+    })
+
+    it('renders preface line', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(screen.getByText('Everything in the Free Plan, plus:')).toBeInTheDocument()
+    })
+  })
+
+  describe('gaps variant', () => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue('gaps')
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('renders gap rows on the Free plan', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(screen.getByText('Daily backups')).toBeInTheDocument()
+      // "Email support" appears twice: once as a Pro plan feature (✓), once as a Free plan gap (✗)
+      expect(screen.getAllByText('Email support')).toHaveLength(2)
+    })
+
+    it('shows log retention as a lesser value, not a missing feature', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(screen.getByText('1-day log retention')).toBeInTheDocument()
+    })
+
+    it('renders the gap section heading on Free and Pro cards', () => {
+      render(<PlanUpdateSidePanel />)
+      // Free has a `lesser` item, so its heading is "Plan limits"; Pro has only `missing` items → "Not included"
+      expect(screen.getByText('Plan limits')).toBeInTheDocument()
+      expect(screen.getByText('Not included')).toBeInTheDocument()
+    })
+  })
+
+  describe('control variant', () => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue('control')
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('does not render preface or description', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(screen.queryByText('Everything in the Free Plan, plus:')).not.toBeInTheDocument()
+      expect(
+        screen.queryByText('Perfect for passion projects & simple websites.')
+      ).not.toBeInTheDocument()
+    })
+
+    it('does not render gap rows', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(screen.queryByText('Not included')).not.toBeInTheDocument()
+      expect(screen.queryByText('Plan limits')).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
index d3bd6f55b245d..677c59cdd608e 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
@@ -2,23 +2,18 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useDebounce } from '@uidotdev/usehooks'
 import { useParams } from 'common'
 import { StudioPricingSidePanelOpenedEvent } from 'common/telemetry-constants'
-import { isArray } from 'lodash'
-import { Check, ExternalLink } from 'lucide-react'
+import { ExternalLink } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
 import { plans as subscriptionsPlans } from 'shared-data/plans'
-import { Button, cn, SidePanel } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { Button, SidePanel } from 'ui'
 
 import { CancellationFlow } from './CancellationFlow'
-import { EnterpriseCard } from './EnterpriseCard'
+import { PlanCards } from './PlanCards'
 import { SubscriptionPlanUpdateDialog } from './SubscriptionPlanUpdateDialog'
 import UpgradeSurveyModal from './UpgradeModal'
 import { STRIPE_PROJECTS_DOCS_URL } from '@/components/interfaces/Billing/Payment/PaymentMethods/StripePaymentConnection'
-import { getPlanChangeType } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
-import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
 import PartnerManagedResource from '@/components/ui/PartnerManagedResource'
-import { RequestUpgradeToBillingOwners } from '@/components/ui/RequestUpgradeToBillingOwners'
 import { isPartnerBillingOrganization } from '@/data/organizations/managed-by-utils'
 import { useOrganizationBillingSubscriptionPreview } from '@/data/organizations/organization-billing-subscription-preview'
 import { useOrganizationQuery } from '@/data/organizations/organization-query'
@@ -30,7 +25,6 @@ import type { OrgPlan } from '@/data/subscriptions/types'
 import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
 import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
 import { MANAGED_BY } from '@/lib/constants/infrastructure'
-import { formatCurrency } from '@/lib/helpers'
 import { useTrack } from '@/lib/telemetry/track'
 import { useOrgSettingsPageStateSnapshot } from '@/state/organization-settings'
 import { Organization } from '@/types/base'
@@ -225,149 +219,17 @@ export const PlanUpdateSidePanel = () => {
             />
           ) : null)}
         <SidePanel.Content>
-          <div className="py-6 grid grid-cols-12 gap-3">
-            {subscriptionsPlans.map((plan) => {
-              const planMeta = availablePlans.find((p) => p.id === plan.id.split('tier_')[1])
-              const price = planMeta?.price ?? 0
-              const isDowngradeOption =
-                getPlanChangeType(subscription?.plan.id, plan?.planId) === 'downgrade'
-              const isCurrentPlan = planMeta?.id === subscription?.plan?.id
-              const features = plan.features
-              const footer = plan.footer
-
-              const source = Array.isArray(router.query.source)
-                ? router.query.source[0]
-                : router.query.source
-              // TODO this panel should allow direct configuration of the highlighting rather than indirectly via the source param
-              const shouldHighlight = source === 'log-drains-empty-state' && plan.id === 'tier_pro'
-
-              if (plan.id === 'tier_enterprise') {
-                return <EnterpriseCard key={plan.id} plan={plan} isCurrentPlan={isCurrentPlan} />
-              }
-
-              return (
-                <div
-                  key={plan.id}
-                  className={cn(
-                    'px-4 py-4 flex flex-col items-start justify-between',
-                    'border rounded-md col-span-12 md:col-span-4 bg-surface-200',
-                    shouldHighlight &&
-                      'ring-4 ring-brand animate-[pulse_1.5s_ease-in-out_1] shadow-md shadow-brand/40'
-                  )}
-                >
-                  <div className="w-full">
-                    <div className="flex items-center space-x-2">
-                      <p className="text-brand-link text-sm uppercase">{plan.name}</p>
-                      {isCurrentPlan ? (
-                        <div className="text-xs bg-surface-300 text-foreground-light rounded-sm px-2 py-0.5">
-                          Current plan
-                        </div>
-                      ) : plan.nameBadge ? (
-                        <div className="text-xs bg-brand-300 dark:bg-brand-400 text-brand-600 rounded-sm px-2 py-0.5">
-                          {plan.nameBadge}
-                        </div>
-                      ) : null}
-                    </div>
-                    <div className="mt-4 flex items-center space-x-1 mb-4">
-                      {(price ?? 0) > 0 && <p className="text-foreground-light text-sm">From</p>}
-                      {isLoadingPlans ? (
-                        <div className="h-[28px] flex items-center justify-center">
-                          <ShimmeringLoader className="w-[30px] h-[24px]" />
-                        </div>
-                      ) : (
-                        <p className="text-foreground text-lg" translate="no">
-                          {formatCurrency(price)}
-                        </p>
-                      )}
-                      <p className="text-foreground-light text-sm">{plan.costUnit}</p>
-                    </div>
-                    {isCurrentPlan ? (
-                      <Button block disabled variant="default">
-                        Current plan
-                      </Button>
-                    ) : !canUpdateSubscription && !isDowngradeOption ? (
-                      <RequestUpgradeToBillingOwners block plan={plan.name as 'Pro' | 'Team'} />
-                    ) : (
-                      <ButtonTooltip
-                        block
-                        variant={isDowngradeOption ? 'default' : 'primary'}
-                        disabled={
-                          (!canUpdateSubscription && isDowngradeOption) ||
-                          subscription?.plan?.id === 'enterprise' ||
-                          subscription?.plan?.id === 'platform' ||
-                          // Downgrades to free are still allowed through the dashboard given we have much better control about showing customers the impact + any possible issues with downgrading to free
-                          (isPartnerBilledOrganization && plan.id !== 'tier_free') ||
-                          // Orgs managed by AWS marketplace are not allowed to change the plan
-                          selectedOrganization?.managed_by === MANAGED_BY.AWS_MARKETPLACE ||
-                          hasOrioleProjects
-                        }
-                        onClick={() => {
-                          setSelectedTier(plan.id as 'tier_free' | 'tier_pro' | 'tier_team')
-                          track('studio_pricing_plan_cta_clicked', {
-                            selectedPlan: plan.name,
-                            currentPlan: subscription?.plan?.name,
-                          })
-                        }}
-                        tooltip={{
-                          content: {
-                            side: 'bottom',
-                            className: hasOrioleProjects ? 'w-96 text-center' : '',
-                            text:
-                              !canUpdateSubscription && isDowngradeOption
-                                ? "You need additional permissions to change your organization's plan"
-                                : subscription?.plan?.id === 'enterprise' ||
-                                    subscription?.plan?.id === 'platform'
-                                  ? 'Reach out to us via support to update your plan'
-                                  : hasOrioleProjects
-                                    ? 'Your organization has projects that are using the OrioleDB extension which is only available on the Free plan. Remove all OrioleDB projects before changing your plan.'
-                                    : selectedOrganization?.managed_by ===
-                                        MANAGED_BY.AWS_MARKETPLACE
-                                      ? 'You cannot change the plan for an organization managed by AWS Marketplace'
-                                      : undefined,
-                          },
-                        }}
-                      >
-                        {isDowngradeOption ? 'Downgrade' : 'Upgrade'} to {plan.name}
-                      </ButtonTooltip>
-                    )}
-
-                    <div className="border-t my-4" />
-
-                    <ul role="list">
-                      {features.map((feature) => (
-                        <li
-                          key={typeof feature === 'string' ? feature : feature[0]}
-                          className="flex py-2"
-                        >
-                          <div className="w-[12px]">
-                            <Check
-                              className="h-3 w-3 text-brand translate-y-[2.5px]"
-                              aria-hidden="true"
-                              strokeWidth={3}
-                            />
-                          </div>
-                          <div>
-                            <p className="ml-3 text-xs text-foreground-light">
-                              {typeof feature === 'string' ? feature : feature[0]}
-                            </p>
-                            {isArray(feature) && (
-                              <p className="ml-3 text-xs text-foreground-lighter">{feature[1]}</p>
-                            )}
-                          </div>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-
-                  {footer && (
-                    <div className="border-t pt-4 mt-4">
-                      <p className="text-foreground-light text-xs">{footer}</p>
-                    </div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
+          <PlanCards
+            availablePlans={availablePlans}
+            isLoadingPlans={isLoadingPlans}
+            currentSubscriptionPlanId={subscription?.plan?.id}
+            currentSubscriptionPlanName={subscription?.plan?.name}
+            canUpdateSubscription={canUpdateSubscription}
+            isPartnerBilledOrganization={isPartnerBilledOrganization}
+            hasOrioleProjects={hasOrioleProjects}
+            selectedOrganization={selectedOrganization}
+            onSelectTier={setSelectedTier}
+          />
         </SidePanel.Content>
       </SidePanel>
 
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts
new file mode 100644
index 0000000000000..55140e9c581cb
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import { FREE_PLAN_GAPS, isPlanChangeEligible, PRO_PLAN_GAPS } from './plan-presentation'
+import { MANAGED_BY } from '@/lib/constants/infrastructure'
+
+describe('isPlanChangeEligible', () => {
+  const baseArgs = {
+    managedBy: 'supabase' as const,
+    billingPartner: null as string | null | undefined,
+    currentPlanId: 'free',
+    canUpdateSubscription: true,
+  }
+
+  it('returns true for a standard free-plan org with billing permissions', () => {
+    expect(isPlanChangeEligible(baseArgs)).toBe(true)
+  })
+
+  it('returns false for Stripe-managed orgs', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, managedBy: MANAGED_BY.STRIPE_PROJECTS })).toBe(false)
+  })
+
+  it('returns false for AWS Marketplace orgs', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, managedBy: MANAGED_BY.AWS_MARKETPLACE })).toBe(false)
+  })
+
+  it('returns false for partner-billed orgs', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, billingPartner: 'aws_marketplace' })).toBe(false)
+  })
+
+  it('returns false for enterprise plan', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, currentPlanId: 'enterprise' })).toBe(false)
+  })
+
+  it('returns false for platform plan', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, currentPlanId: 'platform' })).toBe(false)
+  })
+
+  it('returns false when user cannot update subscription', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, canUpdateSubscription: false })).toBe(false)
+  })
+
+  it('returns true for pro-plan org with billing permissions', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, currentPlanId: 'pro' })).toBe(true)
+  })
+})
+
+describe('gap lists', () => {
+  it('FREE_PLAN_GAPS includes backups and email support as missing', () => {
+    const missing = FREE_PLAN_GAPS.filter((g) => g.type === 'missing')
+    expect(missing.map((g) => g.label)).toContain('Daily backups')
+    expect(missing.map((g) => g.label)).toContain('Email support')
+  })
+
+  it('FREE_PLAN_GAPS shows log retention as lesser, not missing', () => {
+    const logRetention = FREE_PLAN_GAPS.find((g) => g.label.includes('log retention'))
+    expect(logRetention).toBeDefined()
+    expect(logRetention!.type).toBe('lesser')
+  })
+
+  it('PRO_PLAN_GAPS includes SOC2 and SSO as missing', () => {
+    const missing = PRO_PLAN_GAPS.filter((g) => g.type === 'missing')
+    expect(missing.map((g) => g.label)).toContain('SOC2 & ISO 27001')
+    expect(missing.map((g) => g.label)).toContain('SSO for Supabase Dashboard')
+  })
+})
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts
new file mode 100644
index 0000000000000..e17fb7bc77bef
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts
@@ -0,0 +1,68 @@
+import { useMemo } from 'react'
+
+import { isPartnerBillingOrganization } from '@/data/organizations/managed-by-utils'
+import { useTrackExperimentExposure } from '@/hooks/misc/useTrackExperimentExposure'
+import { usePHFlag } from '@/hooks/ui/useFlag'
+import { MANAGED_BY } from '@/lib/constants/infrastructure'
+import type { ManagedBy } from '@/lib/constants/infrastructure'
+
+export type PlanPresentationVariant = 'control' | 'parity' | 'gaps'
+
+const FLAG_KEY = 'pricingPanelPlanPresentation'
+const EXPERIMENT_ID = 'pricing_panel_plan_presentation'
+
+export function isPlanChangeEligible({
+  managedBy,
+  billingPartner,
+  currentPlanId,
+  canUpdateSubscription,
+}: {
+  managedBy: ManagedBy | undefined
+  billingPartner: string | null | undefined
+  currentPlanId: string | undefined
+  canUpdateSubscription: boolean
+}): boolean {
+  if (managedBy === MANAGED_BY.STRIPE_PROJECTS) return false
+  if (managedBy === MANAGED_BY.AWS_MARKETPLACE) return false
+  if (isPartnerBillingOrganization(billingPartner)) return false
+  if (currentPlanId === 'enterprise' || currentPlanId === 'platform') return false
+  if (!canUpdateSubscription) return false
+  return true
+}
+
+export function usePlanPresentationExperiment({
+  eligible,
+}: {
+  eligible: boolean
+}): PlanPresentationVariant {
+  const flag = usePHFlag<'control' | 'parity' | 'gaps'>(FLAG_KEY)
+
+  const isInExperiment = flag === 'control' || flag === 'parity' || flag === 'gaps'
+
+  const variant: PlanPresentationVariant = useMemo(() => {
+    if (!eligible || !isInExperiment) return 'control'
+    return flag as PlanPresentationVariant
+  }, [eligible, isInExperiment, flag])
+
+  const liveVariant = eligible && isInExperiment ? variant : undefined
+  useTrackExperimentExposure(EXPERIMENT_ID, liveVariant)
+
+  return variant
+}
+
+export interface GapFeature {
+  label: string
+  type: 'missing' | 'lesser'
+}
+
+export const FREE_PLAN_GAPS: GapFeature[] = [
+  { label: 'Daily backups', type: 'missing' },
+  { label: 'Email support', type: 'missing' },
+  { label: '1-day log retention', type: 'lesser' },
+]
+
+export const PRO_PLAN_GAPS: GapFeature[] = [
+  { label: 'SOC2 & ISO 27001', type: 'missing' },
+  { label: 'SSO for Supabase Dashboard', type: 'missing' },
+  { label: 'Priority email support & SLAs', type: 'missing' },
+]
diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts
index d0e5db8d9250d..12dad4e22439e 100644
--- a/packages/common/telemetry-constants.ts
+++ b/packages/common/telemetry-constants.ts
@@ -3516,6 +3516,25 @@ export interface UpgradeCtaClickedEvent {
   groups: Omit<TelemetryGroups, 'project'>
 }
 
+/**
+ * User was exposed to the plan-change panel presentation experiment.
+ * Fires once per session per enrolled user in any variant (including control), so the
+ * conversion analysis has a baseline cohort. Conversion itself is tracked server-side.
+ * GROWTH experiment: `pricingPanelPlanPresentation`.
+ *
+ * @group Events
+ * @page /org/[slug]/billing (plan-change side panel)
+ * @source studio
+ */
+export interface PricingPanelPlanPresentationExperimentExposedEvent {
+  action: 'pricing_panel_plan_presentation_experiment_exposed'
+  properties: {
+    /** The experiment variant the user is enrolled in */
+    variant: 'control' | 'parity' | 'gaps'
+  }
+  groups: Omit<TelemetryGroups, 'project'>
+}
+
 /**
  * User clicked the primary CTA on a resource exhaustion warning banner.
  *
@@ -3937,6 +3956,7 @@ export type TelemetryEvent =
   | FreeMicroUpgradeBannerDismissedEvent
   | FreeMicroUpgradeBannerCtaClickedEvent
   | UpgradeCtaClickedEvent
+  | PricingPanelPlanPresentationExperimentExposedEvent
   | AccessTokenCreatedEvent
   | AccessTokenRemovedEvent
   | ResourceExhaustionBannerUpgradeClickedEvent

From 839c7a9cbbb58bdef20ab7e09fb01baaf66fbddf Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Mon, 31 Aug 2026 10:53:16 +0100
Subject: [PATCH 10/12] feat(studio): full-screen pricing panel variants
 (#49640)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Incorporating the parent PR.

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../Subscription/EnterpriseCard.tsx           |   9 +-
 .../BillingSettings/Subscription/PlanCard.tsx |  30 ++-
 .../Subscription/PlanCards.tsx                |  32 ++--
 .../Subscription/PlanCards.utils.test.ts      |  31 +++
 .../Subscription/PlanCards.utils.ts           |  37 ++++
 .../Subscription/PlanUpdatePanelShell.tsx     |  96 ++++++++++
 .../Subscription/PlanUpdateSidePanel.test.tsx | 111 +++++++++++
 .../Subscription/PlanUpdateSidePanel.tsx      | 178 ++++++++++++------
 .../SubscriptionPlanUpdateDialog.tsx          |   4 +
 .../Subscription/plan-presentation.test.ts    |  43 ++++-
 .../Subscription/plan-presentation.ts         |  74 ++++++--
 11 files changed, 554 insertions(+), 91 deletions(-)
 create mode 100644 apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.test.ts
 create mode 100644 apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts
 create mode 100644 apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx

diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
index c31c236f73026..b75d324bc0d90 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
@@ -1,3 +1,4 @@
+import { motion, type Variants } from 'framer-motion'
 import { Check } from 'lucide-react'
 import { PricingInformation } from 'shared-data'
 import { Button, cn } from 'ui'
@@ -8,9 +9,10 @@ import { useTrack } from '@/lib/telemetry/track'
 export interface EnterpriseCardProps {
   plan: PricingInformation
   isCurrentPlan: boolean
+  variants?: Variants
 }
 
-export const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
+export const EnterpriseCard = ({ plan, isCurrentPlan, variants }: EnterpriseCardProps) => {
   const { data: selectedOrganization } = useSelectedOrganizationQuery()
 
   const features = plan.features
@@ -19,8 +21,9 @@ export const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) =>
   const track = useTrack()
 
   return (
-    <div
+    <motion.div
       key={plan.id}
+      variants={variants}
       className={cn(
         'grid grid-cols-1 md:grid-cols-3 border rounded-md bg-studio',
         'py-4 col-span-12 justify-between gap-x-8'
@@ -95,6 +98,6 @@ export const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) =>
           </a>
         </Button>
       </div>
-    </div>
+    </motion.div>
   )
 }
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
index 406e58cbd54ec..d6a7fee845588 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
@@ -1,3 +1,4 @@
+import { motion, type Variants } from 'framer-motion'
 import { isArray } from 'lodash'
 import { Check, X } from 'lucide-react'
 import type { PricingInformation } from 'shared-data'
@@ -5,7 +6,12 @@ import { Button, cn } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import type { GapFeature, PlanPresentationVariant } from './plan-presentation'
-import { FREE_PLAN_GAPS, PRO_PLAN_GAPS } from './plan-presentation'
+import {
+  FREE_PLAN_GAPS,
+  hasPlanGaps,
+  isParityPresentation,
+  PRO_PLAN_GAPS,
+} from './plan-presentation'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
 import { RequestUpgradeToBillingOwners } from '@/components/ui/RequestUpgradeToBillingOwners'
 import { MANAGED_BY } from '@/lib/constants/infrastructure'
@@ -29,6 +35,7 @@ export interface PlanCardProps {
   managedBy: string | undefined
   shouldHighlight: boolean
   variant: PlanPresentationVariant
+  variants?: Variants
   onSelectTier: () => void
   onTrackCtaClick: () => void
 }
@@ -46,14 +53,15 @@ export function PlanCard({
   managedBy,
   shouldHighlight,
   variant,
+  variants,
   onSelectTier,
   onTrackCtaClick,
 }: PlanCardProps) {
-  const isParity = variant === 'parity' || variant === 'gaps'
+  const isParity = isParityPresentation(variant)
   const features = plan.features
   const footer = plan.footer
 
-  const gaps: GapFeature[] = variant === 'gaps' ? (GAPS_BY_PLAN_ID[plan.id] ?? []) : []
+  const gaps: GapFeature[] = hasPlanGaps(variant) ? (GAPS_BY_PLAN_ID[plan.id] ?? []) : []
 
   const ctaButton = isCurrentPlan ? (
     <Button block disabled variant="default">
@@ -112,6 +120,7 @@ export function PlanCard({
         features={features}
         footer={footer}
         ctaButton={ctaButton}
+        variants={variants}
       />
     )
   }
@@ -127,6 +136,7 @@ export function PlanCard({
       footer={footer}
       gaps={gaps}
       ctaButton={ctaButton}
+      variants={variants}
     />
   )
 }
@@ -140,6 +150,7 @@ function ControlCard({
   features,
   footer,
   ctaButton,
+  variants,
 }: {
   plan: PricingInformation
   price: number
@@ -149,9 +160,11 @@ function ControlCard({
   features: (string | string[])[]
   footer: string | undefined
   ctaButton: React.ReactNode
+  variants?: Variants
 }) {
   return (
-    <div
+    <motion.div
+      variants={variants}
       className={cn(
         'px-4 py-4 flex flex-col items-start justify-between',
         'border rounded-md col-span-12 md:col-span-4 bg-surface-200',
@@ -217,7 +230,7 @@ function ControlCard({
           <p className="text-foreground-light text-xs">{footer}</p>
         </div>
       )}
-    </div>
+    </motion.div>
   )
 }
 
@@ -231,6 +244,7 @@ function ParityCard({
   footer,
   gaps,
   ctaButton,
+  variants,
 }: {
   plan: PricingInformation
   price: number
@@ -241,9 +255,11 @@ function ParityCard({
   footer: string | undefined
   gaps: GapFeature[]
   ctaButton: React.ReactNode
+  variants?: Variants
 }) {
   return (
-    <div
+    <motion.div
+      variants={variants}
       className={cn(
         'flex flex-col items-start justify-between',
         'border rounded-md col-span-12 md:col-span-4 bg-surface-200',
@@ -372,6 +388,6 @@ function ParityCard({
           </div>
         )}
       </div>
-    </div>
+    </motion.div>
   )
 }
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
index 2ff1fa4930426..558cd7abe31e5 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
@@ -1,9 +1,11 @@
+import { motion } from 'framer-motion'
 import { useRouter } from 'next/router'
 import { plans as subscriptionsPlans } from 'shared-data/plans'
 
 import { EnterpriseCard } from './EnterpriseCard'
-import { isPlanChangeEligible, usePlanPresentationExperiment } from './plan-presentation'
+import type { PlanPresentationVariant } from './plan-presentation'
 import { PlanCard } from './PlanCard'
+import { getPlanCardsEntryAnimation } from './PlanCards.utils'
 import { getPlanChangeType } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
 import type { OrgPlan, PlanId } from '@/data/subscriptions/types'
 import { useTrack } from '@/lib/telemetry/track'
@@ -18,6 +20,9 @@ export interface PlanCardsProps {
   isPartnerBilledOrganization: boolean
   hasOrioleProjects: boolean
   selectedOrganization: Organization | undefined
+  variant: PlanPresentationVariant
+  /** Seconds to wait before the cards stagger in. Omit to render them without an entry animation. */
+  entryDelay?: number
   onSelectTier: (tier: 'tier_free' | 'tier_pro' | 'tier_team') => void
 }
 
@@ -30,22 +35,17 @@ export function PlanCards({
   isPartnerBilledOrganization,
   hasOrioleProjects,
   selectedOrganization,
+  variant,
+  entryDelay,
   onSelectTier,
 }: PlanCardsProps) {
   const router = useRouter()
   const track = useTrack()
 
-  const eligible = isPlanChangeEligible({
-    managedBy: selectedOrganization?.managed_by,
-    billingPartner: selectedOrganization?.billing_partner,
-    currentPlanId: currentSubscriptionPlanId,
-    canUpdateSubscription,
-  })
-
-  const variant = usePlanPresentationExperiment({ eligible })
+  const entryAnimation = getPlanCardsEntryAnimation(entryDelay)
 
   return (
-    <div className="py-6 grid grid-cols-12 gap-3">
+    <motion.div className="py-6 grid grid-cols-12 gap-3" {...entryAnimation.container}>
       {subscriptionsPlans.map((plan) => {
         const planMeta = availablePlans.find((p) => p.id === plan.id.split('tier_')[1])
         const price = planMeta?.price ?? 0
@@ -59,7 +59,14 @@ export function PlanCards({
         const shouldHighlight = source === 'log-drains-empty-state' && plan.id === 'tier_pro'
 
         if (plan.id === 'tier_enterprise') {
-          return <EnterpriseCard key={plan.id} plan={plan} isCurrentPlan={isCurrentPlan} />
+          return (
+            <EnterpriseCard
+              key={plan.id}
+              plan={plan}
+              isCurrentPlan={isCurrentPlan}
+              variants={entryAnimation.card}
+            />
+          )
         }
 
         return (
@@ -77,6 +84,7 @@ export function PlanCards({
             managedBy={selectedOrganization?.managed_by}
             shouldHighlight={shouldHighlight}
             variant={variant}
+            variants={entryAnimation.card}
             onSelectTier={() => onSelectTier(plan.id as 'tier_free' | 'tier_pro' | 'tier_team')}
             onTrackCtaClick={() =>
               track('studio_pricing_plan_cta_clicked', {
@@ -87,6 +95,6 @@ export function PlanCards({
           />
         )
       })}
-    </div>
+    </motion.div>
   )
 }
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.test.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.test.ts
new file mode 100644
index 0000000000000..82fc30ac4f829
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import { getPlanCardsEntryAnimation } from './PlanCards.utils'
+
+describe('getPlanCardsEntryAnimation', () => {
+  it('returns no animation props when no entry delay is given', () => {
+    const animation = getPlanCardsEntryAnimation(undefined)
+
+    expect(animation.container).toEqual({})
+    expect(animation.card).toBeUndefined()
+  })
+
+  it('staggers the cards after the container delay', () => {
+    const animation = getPlanCardsEntryAnimation(0.4)
+
+    expect(animation.container.initial).toBe('hidden')
+    expect(animation.container.animate).toBe('visible')
+    expect(animation.card).toBeDefined()
+
+    const visible = animation.container.variants?.visible as { transition: Record<string, number> }
+    expect(visible.transition.delayChildren).toBeCloseTo(0.6)
+    expect(visible.transition.staggerChildren).toBe(0.08)
+  })
+
+  it('treats a zero delay as an animation, not as absent', () => {
+    const animation = getPlanCardsEntryAnimation(0)
+
+    expect(animation.container.initial).toBe('hidden')
+    expect(animation.card).toBeDefined()
+  })
+})
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts
new file mode 100644
index 0000000000000..e735cf7a4eab0
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts
@@ -0,0 +1,37 @@
+import type { Variants } from 'framer-motion'
+
+const CARD_VARIANTS: Variants = {
+  hidden: { opacity: 0, y: 8 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.3, ease: 'easeOut' } },
+}
+
+const STAGGER_AFTER_CONTAINER = 0.2
+const STAGGER_BETWEEN_CARDS = 0.08
+
+export interface PlanCardsEntryAnimation {
+  container: { variants?: Variants; initial?: string; animate?: string }
+  card: Variants | undefined
+}
+
+export function getPlanCardsEntryAnimation(
+  entryDelay: number | undefined
+): PlanCardsEntryAnimation {
+  if (entryDelay === undefined) return { container: {}, card: undefined }
+
+  return {
+    container: {
+      variants: {
+        hidden: {},
+        visible: {
+          transition: {
+            delayChildren: entryDelay + STAGGER_AFTER_CONTAINER,
+            staggerChildren: STAGGER_BETWEEN_CARDS,
+          },
+        },
+      },
+      initial: 'hidden',
+      animate: 'visible',
+    },
+    card: CARD_VARIANTS,
+  }
+}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx
new file mode 100644
index 0000000000000..a7324843807b6
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx
@@ -0,0 +1,96 @@
+import { motion } from 'framer-motion'
+import { ArrowLeft, ExternalLink } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { Button, SidePanel } from 'ui'
+
+export interface PlanUpdatePanelShellProps {
+  organizationName: string | undefined
+  /** Rendered above the plan cards, outside the scrollable card grid. */
+  notice: ReactNode
+  onClose: () => void
+  children: ReactNode
+}
+
+export function PlanUpdateSheetShell({
+  visible,
+  organizationName,
+  notice,
+  onClose,
+  children,
+}: PlanUpdatePanelShellProps & { visible: boolean }) {
+  return (
+    <SidePanel
+      hideFooter
+      size="xxlarge"
+      visible={visible}
+      onCancel={onClose}
+      header={
+        <div className="flex items-center justify-between w-full">
+          <h4>Change subscription plan for {organizationName}</h4>
+          <Button asChild variant="default" icon={<ExternalLink />}>
+            <a href="https://supabase.com/pricing" target="_blank" rel="noreferrer">
+              Pricing
+            </a>
+          </Button>
+        </div>
+      }
+    >
+      {notice}
+      <SidePanel.Content>{children}</SidePanel.Content>
+    </SidePanel>
+  )
+}
+
+export function PlanUpdateFullScreenShell({
+  organizationName,
+  notice,
+  skipOverlayFade,
+  contentDelay,
+  onClose,
+  children,
+}: PlanUpdatePanelShellProps & { skipOverlayFade: boolean; contentDelay: number }) {
+  return (
+    <motion.div
+      className="fixed inset-0 z-50 overflow-y-auto overscroll-contain bg-studio"
+      initial={skipOverlayFade ? false : { opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.2, ease: 'easeOut' }}
+    >
+      <Button
+        variant="text"
+        icon={<ArrowLeft />}
+        onClick={onClose}
+        className="fixed top-4 left-4 z-10"
+      >
+        Go back to Studio
+      </Button>
+      <div className="fixed top-4 right-4 z-10 flex items-center gap-2">
+        <Button
+          asChild
+          variant="text"
+          iconRight={<ExternalLink />}
+          className="hidden sm:inline-flex"
+        >
+          <a href="https://supabase.com/pricing#faq" target="_blank" rel="noreferrer">
+            Pricing FAQ
+          </a>
+        </Button>
+        <Button asChild variant="default" iconRight={<ExternalLink />}>
+          <a href="https://supabase.com/pricing#compare-plans" target="_blank" rel="noreferrer">
+            Compare plans
+          </a>
+        </Button>
+      </div>
+      <motion.div
+        className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 py-16"
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: contentDelay, duration: 0.3, ease: 'easeOut' }}
+      >
+        <h1 className="text-2xl text-center">Change subscription plan for {organizationName}</h1>
+        {notice}
+        {children}
+      </motion.div>
+    </motion.div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx
index 30334872ecdbe..3607d413e6091 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx
@@ -9,12 +9,18 @@ const mockSelectedOrganization = vi.hoisted(() => vi.fn())
 const mockPush = vi.hoisted(() => vi.fn())
 const mockPartnerManagedResource = vi.hoisted(() => vi.fn())
 const mockUsePHFlag = vi.hoisted(() => vi.fn())
+const mockFeatureFlags = vi.hoisted(() => vi.fn())
+const mockIsPlatform = vi.hoisted(() => ({ value: true }))
 
 vi.mock('common', async (importOriginal) => {
   const original = (await importOriginal()) as typeof import('common')
   return {
     ...original,
     useParams: () => ({ slug: 'stripe-org' }),
+    useFeatureFlags: mockFeatureFlags,
+    get IS_PLATFORM() {
+      return mockIsPlatform.value
+    },
   }
 })
 
@@ -147,6 +153,8 @@ vi.mock('@/hooks/misc/useTrackExperimentExposure', () => ({
 describe('PlanUpdateSidePanel', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockIsPlatform.value = true
+    mockFeatureFlags.mockReturnValue({ posthog: {}, configcat: {}, hasLoaded: true })
     mockUsePHFlag.mockReturnValue('control')
     mockSelectedOrganization.mockReturnValue(
       createMockOrganization({
@@ -261,6 +269,109 @@ describe('PlanUpdateSidePanel', () => {
     })
   })
 
+  describe.each(['fullscreen', 'fullscreen-gaps'])('%s variant', (flag) => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue(flag)
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('renders the full-screen shell instead of the sheet', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.getByRole('button', { name: /Go back to Studio/ })).toBeInTheDocument()
+      expect(screen.getByRole('link', { name: /Compare plans/ })).toBeInTheDocument()
+      expect(screen.queryByRole('link', { name: 'Pricing' })).not.toBeInTheDocument()
+    })
+
+    it('renders parity cards', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(
+        screen.getByText('Perfect for passion projects & simple websites.')
+      ).toBeInTheDocument()
+      expect(screen.getByText('Everything in the Free Plan, plus:')).toBeInTheDocument()
+    })
+  })
+
+  describe('fullscreen variant', () => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue('fullscreen')
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('does not render gap rows', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.queryByText('Not included')).not.toBeInTheDocument()
+      expect(screen.queryByText('Plan limits')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('fullscreen-gaps variant', () => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue('fullscreen-gaps')
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('renders gap rows inside the full-screen shell', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.getByRole('button', { name: /Go back to Studio/ })).toBeInTheDocument()
+      expect(screen.getByText('Daily backups')).toBeInTheDocument()
+      expect(screen.getByText('1-day log retention')).toBeInTheDocument()
+      // Free has a `lesser` item → "Plan limits"; Pro has only `missing` items → "Not included"
+      expect(screen.getByText('Plan limits')).toBeInTheDocument()
+      expect(screen.getByText('Not included')).toBeInTheDocument()
+    })
+  })
+
+  describe('while feature flags are still loading', () => {
+    beforeEach(() => {
+      mockFeatureFlags.mockReturnValue({ posthog: {}, configcat: {}, hasLoaded: false })
+      mockUsePHFlag.mockReturnValue(undefined)
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('opens neither shell, so the fullscreen variant cannot flash the sheet', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.queryByRole('button', { name: /Go back to Studio/ })).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Upgrade to Pro' })).not.toBeInTheDocument()
+    })
+
+    it('does not gate the panel when self-hosted, where flags never load', () => {
+      mockIsPlatform.value = false
+
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.getByRole('button', { name: 'Upgrade to Pro' })).toBeInTheDocument()
+    })
+  })
+
+  describe.each(['control', 'parity', 'gaps'])('%s variant keeps the sheet shell', (flag) => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue(flag)
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('renders the sheet header and no full-screen chrome', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.getByRole('link', { name: 'Pricing' })).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: /Go back to Studio/ })).not.toBeInTheDocument()
+    })
+  })
+
   describe('control variant', () => {
     beforeEach(() => {
       mockUsePHFlag.mockReturnValue('control')
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
index 677c59cdd608e..6bd719154d15d 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
@@ -2,14 +2,18 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useDebounce } from '@uidotdev/usehooks'
 import { useParams } from 'common'
 import { StudioPricingSidePanelOpenedEvent } from 'common/telemetry-constants'
-import { ExternalLink } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
 import { plans as subscriptionsPlans } from 'shared-data/plans'
-import { Button, SidePanel } from 'ui'
 
 import { CancellationFlow } from './CancellationFlow'
+import {
+  isFullScreenPresentation,
+  isPlanChangeEligible,
+  usePlanPresentationExperiment,
+} from './plan-presentation'
 import { PlanCards } from './PlanCards'
+import { PlanUpdateFullScreenShell, PlanUpdateSheetShell } from './PlanUpdatePanelShell'
 import { SubscriptionPlanUpdateDialog } from './SubscriptionPlanUpdateDialog'
 import UpgradeSurveyModal from './UpgradeModal'
 import { STRIPE_PROJECTS_DOCS_URL } from '@/components/interfaces/Billing/Payment/PaymentMethods/StripePaymentConnection'
@@ -44,6 +48,52 @@ const getPartnerManagedResourceCta = (selectedOrganization: Organization) => {
   }
 }
 
+const PartnerManagedPlanNotice = ({
+  organization,
+  isStripeManaged,
+  isPartnerBilled,
+  stripeProjectsUpgradeCommand,
+}: {
+  organization: Organization | undefined
+  isStripeManaged: boolean
+  isPartnerBilled: boolean
+  stripeProjectsUpgradeCommand: string
+}) => {
+  if (!organization) return null
+
+  if (isStripeManaged) {
+    return (
+      <PartnerManagedResource
+        managedBy={MANAGED_BY.STRIPE_PROJECTS}
+        resource="Organization plans"
+        title="Organization plans are managed through Stripe."
+        details={
+          <>
+            Run <code className="text-code-inline">{stripeProjectsUpgradeCommand}</code> in your
+            project directory.
+          </>
+        }
+        cta={{
+          overrideUrl: `${STRIPE_PROJECTS_DOCS_URL}#upgrade-a-service-tier`,
+          message: 'Stripe Projects docs',
+        }}
+      />
+    )
+  }
+
+  if (isPartnerBilled) {
+    return (
+      <PartnerManagedResource
+        managedBy={organization.managed_by}
+        resource="Organization plans"
+        cta={getPartnerManagedResourceCta(organization)}
+      />
+    )
+  }
+
+  return null
+}
+
 const getStripeProjectsUpgradeCommand = (planId: string | null | undefined) => {
   const currentTier = planId ?? 'free'
   const action = currentTier === 'team' ? 'downgrade' : 'upgrade'
@@ -92,7 +142,10 @@ export const PlanUpdateSidePanel = () => {
   )
 
   const snap = useOrgSettingsPageStateSnapshot()
-  const visible = snap.panelKey === 'subscriptionPlan'
+  const isOpenedViaUrl = router.query.panel === 'subscriptionPlan'
+  const visible = snap.panelKey === 'subscriptionPlan' || isOpenedViaUrl
+
+  const contentDelay = isOpenedViaUrl ? 0.4 : 0.15
 
   const { data: orgProjectsData } = useOrgProjectsInfiniteQuery({ slug }, { enabled: visible })
   const orgProjects =
@@ -129,6 +182,23 @@ export const PlanUpdateSidePanel = () => {
 
   const availablePlans: OrgPlan[] = plans?.plans ?? []
 
+  // Only orgs that can actually act on the panel enter the experiment, and only once it is open
+  const isPlanPresentationEligible =
+    visible &&
+    isPlanChangeEligible({
+      managedBy: selectedOrganization?.managed_by,
+      billingPartner: selectedOrganization?.billing_partner,
+      currentPlanId: subscription?.plan?.id,
+      canUpdateSubscription,
+    })
+
+  const { variant: presentation, isResolved: isPresentationResolved } =
+    usePlanPresentationExperiment({ eligible: isPlanPresentationEligible })
+  const isFullScreen = isFullScreenPresentation(presentation)
+
+  // The fullscreen variant swaps the shell, so hold the panel closed until the variant is known
+  const isPanelOpen = visible && isPresentationResolved
+
   const onPanelOpened = useEffectEvent(
     (properties: StudioPricingSidePanelOpenedEvent['properties']) => {
       track('studio_pricing_side_panel_opened', properties)
@@ -176,62 +246,55 @@ export const PlanUpdateSidePanel = () => {
     selectedOrganization?.plan?.id ?? subscription?.plan?.id
   )
 
+  const notice = (
+    <PartnerManagedPlanNotice
+      organization={selectedOrganization}
+      isStripeManaged={isStripeManagedOrganization}
+      isPartnerBilled={isPartnerBilledOrganization}
+      stripeProjectsUpgradeCommand={stripeProjectsUpgradeCommand}
+    />
+  )
+
+  const planCards = (
+    <PlanCards
+      availablePlans={availablePlans}
+      isLoadingPlans={isLoadingPlans}
+      currentSubscriptionPlanId={subscription?.plan?.id}
+      currentSubscriptionPlanName={subscription?.plan?.name}
+      canUpdateSubscription={canUpdateSubscription}
+      isPartnerBilledOrganization={isPartnerBilledOrganization}
+      hasOrioleProjects={hasOrioleProjects}
+      selectedOrganization={selectedOrganization}
+      variant={presentation}
+      entryDelay={isFullScreen ? contentDelay : undefined}
+      onSelectTier={setSelectedTier}
+    />
+  )
+
   return (
     <>
-      <SidePanel
-        hideFooter
-        size="xxlarge"
-        visible={visible}
-        onCancel={() => onClose()}
-        header={
-          <div className="flex items-center justify-between w-full">
-            <h4>Change subscription plan for {selectedOrganization?.name}</h4>
-            <Button asChild variant="default" icon={<ExternalLink />}>
-              <a href="https://supabase.com/pricing" target="_blank" rel="noreferrer">
-                Pricing
-              </a>
-            </Button>
-          </div>
-        }
-      >
-        {selectedOrganization &&
-          (isStripeManagedOrganization ? (
-            <PartnerManagedResource
-              managedBy={MANAGED_BY.STRIPE_PROJECTS}
-              resource="Organization plans"
-              title="Organization plans are managed through Stripe."
-              details={
-                <>
-                  Run <code className="text-code-inline">{stripeProjectsUpgradeCommand}</code> in
-                  your project directory.
-                </>
-              }
-              cta={{
-                overrideUrl: `${STRIPE_PROJECTS_DOCS_URL}#upgrade-a-service-tier`,
-                message: 'Stripe Projects docs',
-              }}
-            />
-          ) : isPartnerBilledOrganization ? (
-            <PartnerManagedResource
-              managedBy={selectedOrganization.managed_by}
-              resource="Organization plans"
-              cta={getPartnerManagedResourceCta(selectedOrganization)}
-            />
-          ) : null)}
-        <SidePanel.Content>
-          <PlanCards
-            availablePlans={availablePlans}
-            isLoadingPlans={isLoadingPlans}
-            currentSubscriptionPlanId={subscription?.plan?.id}
-            currentSubscriptionPlanName={subscription?.plan?.name}
-            canUpdateSubscription={canUpdateSubscription}
-            isPartnerBilledOrganization={isPartnerBilledOrganization}
-            hasOrioleProjects={hasOrioleProjects}
-            selectedOrganization={selectedOrganization}
-            onSelectTier={setSelectedTier}
-          />
-        </SidePanel.Content>
-      </SidePanel>
+      {isFullScreen && isPanelOpen && (
+        <PlanUpdateFullScreenShell
+          organizationName={selectedOrganization?.name}
+          notice={notice}
+          skipOverlayFade={isOpenedViaUrl}
+          contentDelay={contentDelay}
+          onClose={onClose}
+        >
+          {planCards}
+        </PlanUpdateFullScreenShell>
+      )}
+
+      {!isFullScreen && (
+        <PlanUpdateSheetShell
+          visible={isPanelOpen}
+          organizationName={selectedOrganization?.name}
+          notice={notice}
+          onClose={onClose}
+        >
+          {planCards}
+        </PlanUpdateSheetShell>
+      )}
 
       <CancellationFlow
         visible={selectedTier === 'tier_free'}
@@ -242,6 +305,7 @@ export const PlanUpdateSidePanel = () => {
       <SubscriptionPlanUpdateDialog
         selectedTier={selectedTier}
         onClose={() => setSelectedTier(undefined)}
+        onSuccess={isFullScreen ? onClose : undefined}
         planMeta={planMeta}
         subscriptionPreviewQueryResult={subscriptionPreviewData}
         projects={orgProjects}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
index 2c9c14826fe4a..484da2f54e740 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
@@ -64,6 +64,8 @@ type BreakdownItem =
 interface Props {
   selectedTier: 'tier_free' | 'tier_pro' | 'tier_team' | undefined
   onClose: () => void
+  /** Called after the subscription update succeeds, in addition to onClose. */
+  onSuccess?: () => void
   planMeta?: OrgPlan | null
   currentPlanMeta?: Partial<OrgPlan> & { features: (string | string[])[] }
   subscriptionPreviewQueryResult: OrganizationBillingSubscriptionPreviewQueryResult
@@ -77,6 +79,7 @@ interface Props {
 export const SubscriptionPlanUpdateDialog = ({
   selectedTier,
   onClose,
+  onSuccess,
   planMeta,
   subscriptionPreviewQueryResult,
   currentPlanMeta,
@@ -132,6 +135,7 @@ export const SubscriptionPlanUpdateDialog = ({
       `Successfully ${changeType === 'downgrade' ? 'downgraded' : 'upgraded'} subscription to ${subscriptionPlanMeta?.name}!`
     )
     onClose()
+    onSuccess?.()
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
 
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts
index 55140e9c581cb..9a5fbed383eb6 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts
@@ -1,6 +1,15 @@
 import { describe, expect, it } from 'vitest'
 
-import { FREE_PLAN_GAPS, isPlanChangeEligible, PRO_PLAN_GAPS } from './plan-presentation'
+import {
+  FREE_PLAN_GAPS,
+  hasPlanGaps,
+  isFullScreenPresentation,
+  isParityPresentation,
+  isPlanChangeEligible,
+  parsePlanPresentationVariant,
+  PLAN_PRESENTATION_VARIANTS,
+  PRO_PLAN_GAPS,
+} from './plan-presentation'
 import { MANAGED_BY } from '@/lib/constants/infrastructure'
 
 describe('isPlanChangeEligible', () => {
@@ -44,6 +53,38 @@ describe('isPlanChangeEligible', () => {
   })
 })
 
+describe('parsePlanPresentationVariant', () => {
+  it.each(PLAN_PRESENTATION_VARIANTS)('accepts %s', (variant) => {
+    expect(parsePlanPresentationVariant(variant)).toBe(variant)
+  })
+
+  it.each([undefined, false, '', 'Fullscreen', 'full-screen', 'fullscreen_gaps'])(
+    'rejects %o as not in the experiment',
+    (flag) => {
+      expect(parsePlanPresentationVariant(flag)).toBeUndefined()
+    }
+  )
+})
+
+describe('presentation matrix', () => {
+  // cards, shell, gaps — the three things a variant decides
+  it.each([
+    { variant: 'control', isParity: false, isFullScreen: false, showsGaps: false },
+    { variant: 'parity', isParity: true, isFullScreen: false, showsGaps: false },
+    { variant: 'gaps', isParity: true, isFullScreen: false, showsGaps: true },
+    { variant: 'fullscreen', isParity: true, isFullScreen: true, showsGaps: false },
+    { variant: 'fullscreen-gaps', isParity: true, isFullScreen: true, showsGaps: true },
+  ] as const)('$variant', ({ variant, isParity, isFullScreen, showsGaps }) => {
+    expect(isParityPresentation(variant)).toBe(isParity)
+    expect(isFullScreenPresentation(variant)).toBe(isFullScreen)
+    expect(hasPlanGaps(variant)).toBe(showsGaps)
+  })
+
+  it('covers every variant in the experiment', () => {
+    expect(PLAN_PRESENTATION_VARIANTS).toHaveLength(5)
+  })
+})
+
 describe('gap lists', () => {
   it('FREE_PLAN_GAPS includes backups and email support as missing', () => {
     const missing = FREE_PLAN_GAPS.filter((g) => g.type === 'missing')
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts
index e17fb7bc77bef..e7512346010a4 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts
@@ -1,3 +1,4 @@
+import { IS_PLATFORM, useFeatureFlags } from 'common'
 import { useMemo } from 'react'
 
 import { isPartnerBillingOrganization } from '@/data/organizations/managed-by-utils'
@@ -6,11 +7,54 @@ import { usePHFlag } from '@/hooks/ui/useFlag'
 import { MANAGED_BY } from '@/lib/constants/infrastructure'
 import type { ManagedBy } from '@/lib/constants/infrastructure'
 
-export type PlanPresentationVariant = 'control' | 'parity' | 'gaps'
+export const PLAN_PRESENTATION_VARIANTS = [
+  'control',
+  'parity',
+  'gaps',
+  'fullscreen',
+  'fullscreen-gaps',
+] as const
+
+export type PlanPresentationVariant = (typeof PLAN_PRESENTATION_VARIANTS)[number]
 
 const FLAG_KEY = 'pricingPanelPlanPresentation'
 const EXPERIMENT_ID = 'pricing_panel_plan_presentation'
 
+interface PlanPresentation {
+  /** `control` is the original compact card; `parity` is the richer card. */
+  cards: 'control' | 'parity'
+  /** `sheet` is the SidePanel; `fullscreen` is a full-screen overlay. */
+  shell: 'sheet' | 'fullscreen'
+  /** Whether cards list what the plan is missing ("Not included" / "Plan limits"). */
+  showsGaps: boolean
+}
+
+const PLAN_PRESENTATIONS: Record<PlanPresentationVariant, PlanPresentation> = {
+  control: { cards: 'control', shell: 'sheet', showsGaps: false },
+  parity: { cards: 'parity', shell: 'sheet', showsGaps: false },
+  gaps: { cards: 'parity', shell: 'sheet', showsGaps: true },
+  fullscreen: { cards: 'parity', shell: 'fullscreen', showsGaps: false },
+  'fullscreen-gaps': { cards: 'parity', shell: 'fullscreen', showsGaps: true },
+}
+
+export function parsePlanPresentationVariant(
+  flag: string | boolean | undefined
+): PlanPresentationVariant | undefined {
+  return PLAN_PRESENTATION_VARIANTS.find((variant) => variant === flag)
+}
+
+export function isParityPresentation(variant: PlanPresentationVariant): boolean {
+  return PLAN_PRESENTATIONS[variant].cards === 'parity'
+}
+
+export function isFullScreenPresentation(variant: PlanPresentationVariant): boolean {
+  return PLAN_PRESENTATIONS[variant].shell === 'fullscreen'
+}
+
+export function hasPlanGaps(variant: PlanPresentationVariant): boolean {
+  return PLAN_PRESENTATIONS[variant].showsGaps
+}
+
 export function isPlanChangeEligible({
   managedBy,
   billingPartner,
@@ -30,24 +74,32 @@ export function isPlanChangeEligible({
   return true
 }
 
+export interface PlanPresentationExperiment {
+  variant: PlanPresentationVariant
+  /**
+   * False while PostHog flags are still in flight. The `fullscreen` variant swaps the whole panel
+   * shell, so callers must wait rather than open the control sheet and swap it out mid-animation.
+   */
+  isResolved: boolean
+}
+
 export function usePlanPresentationExperiment({
   eligible,
 }: {
   eligible: boolean
-}): PlanPresentationVariant {
-  const flag = usePHFlag<'control' | 'parity' | 'gaps'>(FLAG_KEY)
-
-  const isInExperiment = flag === 'control' || flag === 'parity' || flag === 'gaps'
+}): PlanPresentationExperiment {
+  const { hasLoaded } = useFeatureFlags()
+  const flag = usePHFlag<PlanPresentationVariant>(FLAG_KEY)
 
-  const variant: PlanPresentationVariant = useMemo(() => {
-    if (!eligible || !isInExperiment) return 'control'
-    return flag as PlanPresentationVariant
-  }, [eligible, isInExperiment, flag])
+  const assignedVariant = useMemo(() => parsePlanPresentationVariant(flag), [flag])
 
-  const liveVariant = eligible && isInExperiment ? variant : undefined
+  const liveVariant = eligible ? assignedVariant : undefined
   useTrackExperimentExposure(EXPERIMENT_ID, liveVariant)
 
-  return variant
+  return {
+    variant: liveVariant ?? 'control',
+    isResolved: !IS_PLATFORM || !!hasLoaded,
+  }
 }
 
 export interface GapFeature {

From fda58a4b383a401f99ee46c207fe245a3968ac71 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Mon, 31 Aug 2026 10:57:10 +0100
Subject: [PATCH 11/12] docs: clarify that new API keys are accepted in the
 Authorization header (#49700)

---
 .../docs/content/guides/functions/auth-headers.mdx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/docs/content/guides/functions/auth-headers.mdx b/apps/docs/content/guides/functions/auth-headers.mdx
index 21d1ac59ef553..e0f982507ba74 100644
--- a/apps/docs/content/guides/functions/auth-headers.mdx
+++ b/apps/docs/content/guides/functions/auth-headers.mdx
@@ -16,7 +16,11 @@ Edge Functions care about two request headers. Sending the wrong credential in t
 | `Authorization` | `Bearer <user-jwt>`                     | A user signed in through Supabase Auth |
 | `apikey`        | `sb_publishable_...` or `sb_secret_...` | Calls from clients or services         |
 
-A common mistake is sending a publishable or secret key as a bearer token: `Authorization: Bearer sb_publishable_...`. The new API keys are not JWTs. The platform check can't validate them, and your handler can't verify them as JWTs either. Instead, put API keys in the `apikey` header.
+<Admonition type="note" title="Don't send API keys as bearer tokens">
+
+A common mistake is sending a publishable or secret key as a bearer token: `Authorization: Bearer sb_publishable_...`. The new API keys are not JWTs. The platform check still accepts them, but your handler can't verify them as JWTs. Instead, put API keys in the `apikey` header.
+
+</Admonition>
 
 You can send both headers together. A signed-in user calling your function through `supabase-js`, for example, sends their session JWT in `Authorization` and the project's publishable key in `apikey`.
 
@@ -26,7 +30,13 @@ When `verify_jwt` is enabled (the default), the platform inspects the `Authoriza
 
 The check validates legacy HS256 JWTs and JWTs signed with the new asymmetric [signing keys](/docs/guides/auth/signing-keys).
 
-The check does not accept an API key. Publishable and secret keys are not JWTs, so callers that send one in the `Authorization` header fail the check before their request reaches your handler.
+Publishable and secret keys are not JWTs, but the check still accepts them in the `Authorization` header, so callers that send one there reach your handler.
+
+<Admonition type="caution" title="API keys and the verify_jwt check">
+
+For migration compatibility, `verify_jwt` accepts publishable and secret keys on either header, so a key on `apikey` passes the check too. The check alone doesn't authenticate a caller that sends only an API key. Reserve `Authorization` for user tokens, and send API keys on `apikey`. To move off legacy keys entirely, migrate to the `@supabase/server` SDK as shown in [Securing Edge Functions](/docs/guides/functions/auth).
+
+</Admonition>
 
 Use the `verify_jwt` flag to match how the function is called:
 

From e73811f1c823a2a02de81ef872606da853b09fb9 Mon Sep 17 00:00:00 2001
From: Alaister Young <alaister@users.noreply.github.com>
Date: Mon, 31 Aug 2026 18:10:30 +0800
Subject: [PATCH 12/12] fix(studio): restore useTrackExperimentExposure hook
 (#49763)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restores `hooks/misc/useTrackExperimentExposure.ts`, fixing the
typecheck failure on master that broke the latest Studio production
deploy.

The hook was deleted as dead code in #49719 (it was genuinely unused on
master at the time), but #49534 was in flight and reintroduced a usage
in `plan-presentation.ts`. The two PRs merged cleanly with no textual
conflict, so nothing typechecked the combination until the deploy off
master failed with:

```
plan-presentation.ts(5,44): error TS2307: Cannot find module '@/hooks/misc/useTrackExperimentExposure'
```

**Added:**
- `apps/studio/hooks/misc/useTrackExperimentExposure.ts` — restored
verbatim from before #49719; no longer dead code since
`plan-presentation.ts` imports it

## To test

- `pnpm --filter studio typecheck` passes (verified locally)
- `pnpm knip --workspace apps/studio` no longer flags the hook (verified
locally)
- Studio production deploy succeeds once merged

https://claude.ai/code/session_01XZGr2n1dBzJ7m3DYsGu852

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
---
 .../hooks/misc/useTrackExperimentExposure.ts   | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 apps/studio/hooks/misc/useTrackExperimentExposure.ts

diff --git a/apps/studio/hooks/misc/useTrackExperimentExposure.ts b/apps/studio/hooks/misc/useTrackExperimentExposure.ts
new file mode 100644
index 0000000000000..5b1f491137dac
--- /dev/null
+++ b/apps/studio/hooks/misc/useTrackExperimentExposure.ts
@@ -0,0 +1,18 @@
+import { hasConsented, posthogClient } from 'common'
+import { useEffect } from 'react'
+
+export function useTrackExperimentExposure(
+  experimentId: string,
+  variant: string | undefined,
+  extraProperties?: Record<string, any>
+) {
+  useEffect(() => {
+    if (!variant) return
+
+    posthogClient.captureExperimentExposure(
+      experimentId,
+      { variant, ...extraProperties },
+      hasConsented()
+    )
+  }, [experimentId, variant])
+}