The master merge auto-resolved apps/studio/package.json and silently dropped
master's "fuse.js": "^7.4.0" (both sides edited adjacent dependency lines).
Studio code from master uses it (FunctionList.utils, Support.constants,
sql-event-parser, AIEditor, ...), and the lockfile lost the importer entry,
breaking 'pnpm install --frozen-lockfile' in CI:
Broken lockfile: no entry for 'fuse.js@7.4.0'.
Restore the dependency and reconcile the lockfile.
- Marketplace index page
- update order of feature partner integrations in hero
- fix z-index on MarketplaceFilterBar in "list" view
<img width="275" height="104" alt="Screenshot 2026-06-02 at 17 07 29"
src="https://github.com/user-attachments/assets/5cef64f9-895e-4f8d-8f30-153ddd5c89dd"
/>
- Marketplace detail page
- use "prose" css styling on overview content for better text styling
(heading with top padding, etc)
- refine FilesView in overview tab to only show swipeable and zoomable
previews (so the big image doesn't occupy too much space) + lazy load
FilesView component
- improve page loading state
- improve overview side rail sticky-top and remove redundant "About"
label
<img width="1333" height="732" alt="Screenshot 2026-06-02 at 17 20 29"
src="https://github.com/user-attachments/assets/8f3dd4a0-c241-4b7f-b8c8-192e1d7a616d"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Interactive carousel with image zoom capability for viewing
integration preview images
* **Bug Fixes**
* Fixed z-index layering issue with marketplace filter bar
* **Refactor**
* Redesigned marketplace detail page header with breadcrumb navigation
* Updated integration image handling structure with enhanced metadata
* Optimized dynamic loading for integration file viewers
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Switching from `node --env-file-if-exists=.env.local` to a hand-rolled
one-key reader. The previous shape loaded *all* of .env.local into the
parent's process.env before spawning the child, which broke e2e:
`scripts/serve.js:50` has a "don't clobber shell-set vars" guard that
treats anything pre-set in process.env as authoritative, and it can't
distinguish "really set by the shell" from "preloaded by --env-file".
So .env.test's `NEXT_PUBLIC_IS_PLATFORM=false` (the whole point of
scripts/generateLocalEnv.js) was silently overridden by .env.local's
`true`, the studio booted in platform mode, and every e2e test
auth-redirected.
The dispatcher only needs one var (STUDIO_FRAMEWORK) to pick a script.
The downstream tools (vite for build/dev, scripts/serve.js for start)
load `.env` files themselves with the correct precedence.
A bunch of master changes landed during the merge that needed
follow-ups on the TanStack side:
- Pin @tanstack/react-query to ~5.83.0 (and devtools to ~5.90.2)
in apps/studio and apps/ui-library. A previous master merge had
bumped these to ^5.100.10, which changed mutation onSuccess/onError
to require a 4th MutationFunctionContext arg and broke every studio
mutation hook still using the 3-arg shape (~570 call sites).
- Cast WebCrypto inputs to BufferSource in lib/role-impersonation.ts,
lib/ai/util.ts, lib/telemetry.tsx — TS6's DOM lib tightened
Uint8Array's generic so encoder.encode() no longer matches BufferSource
without a hint.
- compat/next/script.tsx: omit `onLoad`/`onError` from the React script
attrs we extend so our DOM-flavoured callback signatures don't clash
with React's SyntheticEvent handlers.
- compat/next/link.tsx + compat/next/navigation.ts: TanStack Router
type tightening — cast `search` and `{strict: false}` since the new
ParamsReducerFn / UseParamsOptions shapes don't fit the Next-shaped
arguments we pass through.
- router.tsx: cast the QueryClient handed to setupRouterSsrQueryIntegration.
react-router-ssr-query pulls in query-core@5.100 as a peer; we pin
react-query to 5.83. The runtime class is identical, but TS treats the
two as nominally distinct because of #private fields.
- Mirror master's page-shape changes on the route shells: drop
dehydratedState passthroughs for pages that no longer accept it
(functions/code, functions/new, integrations/github/authorize,
org.[_], project.[_]); add them back via the wrapper pattern for
pages that do still require it (redeem, aws-marketplace-onboarding,
sql/examples, stripe/projects/login).
- routes/__root.tsx: rename unused `info` to `_info` to satisfy
noUnusedParameters.
- packages/ui AnimatedCounter / Space / Typography: drop the unused
`import React from 'react'` (TS6 noUnusedLocals).
- scripts/ratchet-eslint-rules.ts: bump child_process maxBuffer from
32MB to 128MB so local runs don't truncate the ESLint JSON payload.
The top-level dev/build/start scripts now run scripts/dispatch.js, which
loads .env.local via node --env-file-if-exists and execs either the
:next or :tanstack variant based on STUDIO_FRAMEWORK. Locally the env
var lives in apps/studio/.env.local (gitignored) so the developer's
machine opts into TanStack; Vercel's Next.js prod project leaves it
unset and gets the next path. Adds :tanstack variants alongside the
existing :next ones for explicit selection.
vercel.ts and api/server.js are read by Vercel for every deploy in this
repo regardless of which framework preset is selected, which means the
TanStack-flavoured rewrites, `framework: null`, and `dist/server` import
would clobber the Next.js prod build. Default both to a no-op shape and
opt in to the TanStack behaviour with STUDIO_FRAMEWORK=tanstack — set in
the branch's dev/build/start/preview scripts and on the TanStack Vercel
project's dashboard env vars.
## 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?
Refactor / chore.
## What is the current behavior?
A custom type-aware ESLint rule (`studio/require-safe-sql-fragment`)
enforces that the `sql` argument to `executeSql` is a `SafeSqlFragment`.
It runs in a separate `eslint.type-checks.config.cjs` and a dedicated CI
ratchet step, and pulls in `@typescript-eslint/utils` as a direct dev
dependency.
## What is the new behavior?
`SafeSqlFragment` enforcement is now handled entirely by TypeScript
compilation. The ESLint rule, its dedicated config, the ratchet
baselines for it, the CI step, and the `@typescript-eslint/utils` direct
dev dependency have all been removed.
## Additional context
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Simplified development linting workflow by removing type-aware ESLint
checks and associated rule files.
* Cleaned up ESLint configuration and dependencies in the studio
application.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46079?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Resolves FE-3221
Heavily inspired by what @filipecabaco has done previously here:
https://github.com/supabase/supabase/pull/45360
This PR explores the use of pglite to set up a sandbox for RLS testing,
which will pave the way for testing mutation based queries so to ensure
no disruption to the actual database. Sandbox can be set up within the
RLS tester panel as such:
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/0cfdf8e4-dd99-4dee-ac00-39a32b375c07"
/>
Which the sandbox will mimic the project's database to the bare minimum
required
- entities from the `public` schema are copied over (types, tables,
functions, policies)
- `auth` schema is pseudo setup with `SANDBOX_SETUP_STATEMENTS`
- Enough to support role impersonation + querying tables with references
to the auth schema (e.g users table)
- data is seeded up to 100 rows for each table
- More info RE limitations in the last section below
Once sandbox is ready, you'll see this UI where you can either leave the
sandbox, or re-sync the sandbox from the actual database
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/d07ce55f-5bc8-4722-8ce9-898b9b458f9b"
/>
Changes are currently feature flagged, so won't be available publicly
just yet until things are ironed out and ready
## To test
- [ ] Verify that setting up sandbox works
- [ ] Verify that you can query your sandbox, and queries do not touch
the actual database (can verify that we're not sending HTTP requests to
the /query endpoint)
- [ ] Verify correctness of RLS tester as well, should match correctness
with testing against actual DB
- [ ] Verify that re-syncing sandbox picks up changes
- Can test by updating your policies that will affect the output of your
select query
- e.g SELECT for `authenticated`, change from just `true` to `false`
- [ ] RLS tester should work as per normal (against actual DB) with the
feature flag off with no additional overhead
Let me know of any edge cases you might run into while testing
## Known quirks that will be addressed subsequently
Leaving these for now just to not bloat this PR further
- Pglite schema needs to be re-synced if updating RLS policies while
testing, to ensure that pglite gets the updated policies. Will think
about how to make this more seamless
- Sandbox has its own limitations, will need to add a dialog to inform
users how the sandbox works and what limitations to note of
- e.g only the auth schema is mimicked - so policies that reference
storage helpers won't work (although i think auth is probably the main
use case and the rest might be niche)
- We can slowly expand tho where required
- Eventually we'll also move forward with figuring out testing mutation
queries with this sandbox
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* RLS tester gains an isolated Postgres sandbox with schema/seed import,
start/refresh/exit controls, and pre-populated auth data.
* Sandbox management UI with setup, loading, active, and error states;
refresh and destroy actions.
* **Bug Fixes**
* Role impersonation now keeps the PostgREST role set to anon while the
tester sheet is open.
* **Chores**
* Content Security Policy updated to allow sandbox/connectivity
endpoints.
* **Style**
* Minor sheet styling adjustment (top border).
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45839)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Previous setup ran the studio under `vite preview` and signalled e2e
mode via `NODE_ENV=test`. That broke twice on this branch:
1. `NODE_ENV=test` in the shell overrides Vite's default
`NODE_ENV=production` for `vite build`, which makes
`@vitejs/plugin-react` emit the dev JSX runtime (`jsxDEV`). The
production SSR bundle doesn't have `jsxDEV` available, so every SSR
request crashed with `TypeError: jsxDEV is not a function`.
2. `vite preview` is a static SPA preview; it can't reuse the
`fetch`-handler shape that `apps/studio/api/server.js` exposes to
Vercel. Self-hosted prod needs its own HTTP listener for the same
handler.
Changes:
- Swap `NODE_ENV=test` for `MODE=test` end-to-end. `vite build --mode
test` keeps `NODE_ENV=production` automatically (per Vite docs), so
the React plugin stays on the prod JSX runtime and TanStack Start
bakes the right `NODE_ENV` into the SSR bundle. `.env.test` overrides
load through the standard `loadEnv(mode, ...)` order, so the
developer's `.env.local` no longer leaks `NEXT_PUBLIC_IS_PLATFORM=true`
into e2e builds.
- Explicitly set `NEXT_PUBLIC_IS_PLATFORM=false` in
`generateLocalEnv.js` so `.env.test` (which loads after `.env.local`)
wins regardless of what a developer has set locally.
- Add `apps/studio/scripts/serve.js`: a small zero-dep Node HTTP
adapter that loads env files, serves `dist/client/*` statics with
proper cache headers, and forwards everything else to the
`fetch`-handler exported by `dist/server/server.js` — the same
handler `api/server.js` hands to Vercel. `pnpm start` runs this;
`pnpm preview` keeps the old `vite preview` flow as a debug
escape-hatch.
- Add `dist/**` to studio's turbo outputs so cached builds restore
the Vite output (not just the legacy `.next/**`).
- Declare `MODE`, `PORT` in turbo env so cache invalidates correctly
when switching between test and production builds.
## 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?
Refactor / dependency cleanup.
## What is the current behavior?
`apps/studio` lists both `@supabase/pg-meta` (workspace package) as a
runtime dep and `@supabase/postgres-meta` (external npm package,
`^0.64.4`) as a devDependency. The external package is used only for
type imports across 44 files — there is no runtime usage and no codegen
pipeline that needs it.
## What is the new behavior?
Every `Postgres*` type import (`PostgresTable`, `PostgresColumn`,
`PostgresPolicy`, `PostgresTrigger`, `PostgresView`,
`PostgresMaterializedView`, `PostgresForeignTable`, `PostgresSchema`,
`PostgresPublication`, `PostgresRelationship`, `PostgresPrimaryKey`) is
replaced with its `PG*` counterpart from `@supabase/pg-meta`, and the
external dep is removed from \`apps/studio/package.json\`. Top-level
type re-exports were added to \`packages/pg-meta/src/index.ts\` so
consumers can import directly from the package root.
Two latent issues surfaced by the stricter pg-meta types are also fixed:
- \`data/foreign-tables/foreign-tables-query.ts\` was casting
foreign-table results as \`PostgresView[]\`; corrected to
\`PGForeignTable[]\`.
- \`pg-meta\`'s \`PGTrigger\` Zod schema declared
\`orientation\`/\`activation\` as \`z.string()\`, inconsistent with
pg-meta's own \`getDatabaseTriggerUpdateSQL\` helper that requires the
narrow literal unions; tightened to \`z.enum\`.
## Additional context
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Updated internal TypeScript type definitions across the codebase to
use the latest type system from `@supabase/pg-meta`.
* Removed `@supabase/postgres-meta` dependency.
* Enhanced type validation for database triggers and schemas to enforce
stricter constraints.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45844)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Bump various vulnerable dependencies, `nitropack`, `mermaid`, `hono`,
`protobufjs`, `fast-xml-builder` and `fast-uri`.
- Add `babel/core` to `studio` to stabilize the dependency resolving for
`studio`.
- Also deduped `cheerio`, `c12`, `browserslist`, `unstorage` and
`@mdx-js/mdx` since they were present as multiple similar versions.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Added development dependency for the studio application build tooling
* Updated workspace configuration to refine dependency exclusion
settings
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45876)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Motivation
When Assistant runs a potentially destructive tool like `execute_sql`,
it stops the LLM request and prompts for client-side approval and
execution of the tool. After approval, a second request kicks off under
a separate trace. This has made scoring and
[Topics](https://www.braintrust.dev/blog/topics) classification
challenging, as the generated `output` is split across stateless
requests. The [span-level
scoring](https://www.braintrust.dev/docs/evaluate/custom-code#score-spans)
approach we've used thusfar (after the LLM call, we massage the result
into an `output` payload that's stuck onto the root span) has been
cumbersome and led to invalid scores / topics where only part of the
assistant response is considered. It's also inefficient, as we're
duplicating potentially large info (like the `search_docs` output) that
already exists within the trace.
An alternative to scoring spans is to [score
traces](https://www.braintrust.dev/docs/evaluate/custom-code#score-traces).
Braintrust [best
practices](https://www.braintrust.dev/docs/evaluate/score-online#best-practices)
advise:
> Use span scope for evaluating individual operations or outputs. Use
trace scope for evaluating multi-turn conversations, overall workflow
completion, or when your scorer needs access to the full execution
context.
We've also received [direct
guidance](https://supabase.slack.com/archives/C05QYJBLX89/p1777925770927149?thread_ts=1777905716.911979&cid=C05QYJBLX89)
from their team to use this approach.
## Changes
Migrates eval scorers from custom `AssistantEvalOutput` shape to
trace-level scoring via `trace.getThread()` / `trace.getSpans()`, with
thread parsing that scores the full latest Assistant turn and passes
prior conversation separately where relevant.
Moves `execute_sql` and `deploy_edge_function` from client-side
execution after approval to AI SDK `needsApproval` + server-side
`execute()`. SQL results returned to the model are gated by AI opt-in
level, so row data is only included with `schema_and_log_and_data`;
otherwise the tool returns the no-data-permissions sentinel.
Adds `metadata.isFinalStep` to disambiguate multiple LLM requests within
an "assistant" turn due to tool call requests/responses. For online
evals, this means we should configure automations to only score traces
with `metadata.isFinalStep = true` to ensure we're judging the complete
generated response.
Other minor kaizen changes:
- Renamed `promptProviderOptions` to `systemProviderOptions` to clarify
that this is associated with the "system" message and disambiguate from
the root `providerOptions`
- Adds `evals/trace-utils.ts` to handle Zod validation of the `unknown`
span shapes from Braintrust, to more easily access typed inputs/output
on tool spans.
- Bumps AI SDK floor version `^6.0.116` → `^6.0.174`
- Tweaked the "Conciseness" scorer to not unfairly dock points for the
new `[called tool_name]` labels in serialized assistant response
## Verification
In the studio staging build, I asked Assistant to create a todos table
with 3 sample todos. I manually approved the `execute_sql` call and saw
Assistant generate text before & after the call.
In Braintrust I verified two traces were produced (see [filtered
logs](https://www.braintrust.dev/app/supabase.io/p/Assistant/logs?v=Staging&tvt=trace&search={%22filter%22:[{%22text%22:%22metadata.environment%2520%253D%2520%27staging%27%22,%22label%22:%22metadata.environment%2520%253D%2520%27staging%27%22,%22originType%22:%22btql%22},{%22text%22:%22%2560Chat%2520ID%2560%2520%253D%2520%25221cb2ac45-e5e7-458c-9da4-3bf6863b8842%2522%22,%22label%22:%22Chat%2520ID%2520equals%25201cb2ac45-e5e7-458c-9da4-3bf6863b8842%22,%22originType%22:%22form%22}]})),
the first with `metadata.isFinalStep = false` and the second with
`metadata.isFinalStep = true`.
In the Braintrust staging scorers, I ran the preview Completeness scorer
on the second trace and verified it sees the complete Assistant response
including markers for tool calls ([link to
trace](https://www.braintrust.dev/app/supabase.io/p/Assistant%20(Staging%20Scorers)/trace?object_type=project_logs&object_id=b5214b62-ad1e-4929-9d5b-40b1daebe948&r=0ed0a4f8-8aff-4a34-bb1d-1df1d88a5070&s=ff9015f8-6bf7-4ab3-83a9-ca4e69e27e82))
<img width="1193" height="960" alt="CleanShot 2026-05-07 at 11 27 10@2x"
src="https://github.com/user-attachments/assets/509d4858-c3a1-4068-986d-3aa4d5617d1a"
/>
I also tested the `deploy_edge_function` workflow and verified it still
prompts for permission and warns on deployment of existing functions.
**References**
- https://www.braintrust.dev/docs/evaluate/custom-code#score-traces
-
https://ai-sdk.dev/docs/ai-sdk-core/tools-and-tool-calling#tool-execution-approval
Supercedes https://github.com/supabase/supabase/pull/45556 and
https://github.com/supabase/supabase/pull/45339
Closes AI-473
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Tool actions (SQL execution, edge-function deploy) now require
explicit user Approve/Deny before proceeding.
* **Improvements**
* Assistant pauses for approval responses before sending follow-ups,
giving clearer control over risky actions.
* Deploy/replace flows show confirmation and clearer replace warnings.
* Evaluation/scoring updated to use richer trace data for more accurate
assistant performance signals.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Bumps @tanstack/react-router (1.169.1 -> 1.169.2) and
@tanstack/react-start (1.167.63 -> 1.167.65) to the latest patches.
Hoists three TanStack packages into the workspace catalog so the
versions stay aligned across consumers:
@tanstack/react-router - studio + ui-library
@tanstack/react-start - studio + ui-library
@tanstack/react-table - studio + ui-patterns + design-system
react-query is intentionally not included yet - consumers (studio,
docs, ui-library) sit on different 5.x versions and aligning them
deserves a separate decision.
Heap bump: \`NODE_OPTIONS=--max-old-space-size=8192\` on the \`dev\`
script. Vite 8 + Rolldown (RC) + studio's dep graph (Monaco, GraphiQL,
ReactFlow, ai-sdk family, lodash inlined for SSR) was tipping over
Node's default 4GB ceiling on long dev sessions. Build still uses the
default — only dev needs the headroom.
Versions:
- vite: 8.0.8 → 8.0.10 (catalog)
- rolldown (transitive via vite): 1.0.0-rc.15 → 1.0.0-rc.17. Note:
rolldown 1.0.0 stable shipped on npm, but Vite 8.0.10 still pins to
rc.17. Stable rolldown will arrive in a future vite release.
- @tanstack/react-router: ^1.168.10 → ^1.169.1
- @tanstack/react-start: ^1.167.16 → ^1.167.63
- @tanstack/react-router-devtools: ^1.166.11 → ^1.166.13
- @tanstack/react-router-ssr-query: ^1.166.10 → ^1.166.12
- @tanstack/react-virtual: ^3.13.12 → ^3.13.24
Build verified green after the bump.
Master migrated all apps to Tailwind v4 + CSS-first config via
@tailwindcss/postcss; the rename `styles/main.css` → `styles/globals.css`
plus removal of `toast.css` / `typography.css` / theme imports broke the
CSS imports in `routes/__root.tsx`.
- Update __root.tsx CSS imports to mirror the post-merge pages/_app.tsx
list (drops fonts.css/main.css/toast.css/typography.css/themes/* and
uses globals.css).
- Add `@tailwindcss/vite` 4.2.4 as a devDep and wire it into the Vite
plugin pipeline. The Tailwind v4 PostCSS plugin doesn't compose with
Vite's built-in postcss-import (which tries to resolve
`@import 'tailwindcss'` as a relative path and ENOENTs on it). The
dedicated Vite plugin intercepts before postcss-import.
- Disable Vite's PostCSS auto-discovery (`css.postcss = { plugins: [] }`)
so the studio postcss.config.cjs (still used by `build:next`) doesn't
also run @tailwindcss/postcss against the same CSS under Vite.
Conflicts:
- apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx:
keep new Admonition block from master + ComponentType import from HEAD.
- apps/studio/package.json: keep Vite-based scripts + extra radix deps +
@tanstack/devtools-vite + @tailwindcss/container-queries from HEAD.
- pnpm-workspace.yaml: keep React 19 / @types/react 19 catalog from HEAD,
take master's Next 16.2.6 / Tailwind 4 / and other new catalog entries.
- pnpm-lock.yaml: regenerated via pnpm install.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Updated core SDK dependencies to latest compatible versions for
improved system stability and security.
* Enhanced workspace dependency configuration management by expanding
and reorganizing package constraints to optimize compatibility across
all modules and reduce potential build conflicts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR fixes a bug where a user might choose `classic-dark` as a theme
in `studio` but then `docs` and `marketing` apps will look weird.
To test:
- Change the localStorage value of `theme` to `classic-dark`
- Open `www` and `docs` apps, they should look ok
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a new "classic-dark" theme option for enhanced visual
customization.
* **Improvements**
* Unified and simplified theme handling across apps for more consistent
behavior.
* Improved system-theme detection and smoother transitions when
switching themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Upgraded the UUID library to a newer major version across apps and
removed a now-unneeded dev dependency.
* Pinned PostCSS to a workspace-specific version to stabilize builds.
* **Refactor**
* Improved internal identifier generation for more consistent behavior
without changing outward functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Adds `graphiql@5.2.2` and switches from our heavily-customised rebuild
(which used `@graphiql/react` + `@graphiql/toolkit` directly) to the
prebuilt component, restyled to match the dashboard. Role impersonation
re-added as a sidebar plugin.
This is a deliberately simpler setup than what we had – we lose some
layout customisation (sidebar is forced to the left, role impersonation
moves into the sidebar) but future upgrades become much easier since
we're no longer maintaining a fork-by-rewrite.
**Removed:**
- `apps/studio/components/interfaces/GraphQL/GraphiQL.tsx` – custom
rebuild
- `apps/studio/components/interfaces/GraphQL/graphiql.module.css` –
custom styles
**Changed:**
- Added `graphiql` ^5.2.2 (we previously didn't have the top-level
package, just the subpackages)
- `@graphiql/react` ^0.19.4 → ^0.37.3 (now Monaco-based; v0.19 was still
on CodeMirror 5)
- `@graphiql/toolkit` ^0.9.1 → ^0.11.3
- `GraphiQLTab.tsx` now wires up the prebuilt `<GraphiQL />` with worker
setup, theme bridge, and plugins
- New `graphiql.module.css` scopes restyling via `:global(...)` since we
can't add hashed classes to the library's DOM
- `RoleImpersonationSelector` gained an `orientation: 'horizontal' |
'vertical'` prop (default `horizontal`) so it fits in the sidebar pane –
all existing call sites unchanged
- `MonacoThemeProvider` exports `getTheme` so the GraphQL Monaco
instance can reuse Studio's theme
**Added:**
- Theme bridge: `supabase-graphql-dark` / `supabase-graphql-light`
Monaco themes synced with `next-themes` via `forcedTheme`
- Role impersonation sidebar plugin (gated on `field.jwt_secret` read
permission, same as before)
### Notes / tradeoffs
- We don't share Studio's monaco instance – Studio loads it via AMD/CDN,
GraphiQL bundles it as ESM. Both end up on `monaco-editor@0.52.2` but in
different module systems. Sharing would require ripping out Studio's CDN
loader (Studio-wide refactor, out of scope). GraphiQL's monaco is
dynamically imported and only loads when the GraphQL tab opens.
- The dark/light response panel uses different `--graphiql-response-bg`
tokens because the editor sits at very different baseline lightness in
each theme; a single token can't lift it meaningfully in both
directions.
- Session header (tabs row) is hidden – we don't expose multi-tab
workflows.
## To test
- Open `/project/<ref>/api/graphiql` in both light and dark themes –
editor + response panel backgrounds, sidebar borders, button radii
should all match the dashboard
- Run a query and confirm syntax highlighting works (GraphQL-specific
token `argument.identifier.gql` is purple)
- Open the doc explorer and history sidebar plugins
- As a user with `field.jwt_secret` read permission: open the Role
Impersonation sidebar plugin, pick a role, confirm subsequent queries
hit the API with the impersonated JWT
- As a user without that permission: confirm the Role Impersonation
plugin doesn't appear, history still does
- Toggle theme while GraphiQL is open – Monaco theme should swap without
a reload
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Vertical layout option for the role impersonation selector; radios can
expand to full width.
* **Improvements**
* Revamped GraphiQL integration with updated upstream package, plugins,
and editor theming for improved consistency and UX.
* New GraphiQL styling and layout for clearer pane separation and
polished controls.
* Role selector radios now support a full-width mode for improved
responsiveness.
* **Chores**
* Updated GraphiQL-related dependencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
**Changes**
Replaces our custom `StreamTransport` with
[InMemoryTransport](https://github.com/modelcontextprotocol/typescript-sdk/blob/4fbcfcd176b6b189970263c4625eb6e60db043d2/packages/core/src/util/inMemory.ts#)
from the official MCP SDK, removing the need for the
`@supabase/mcp-utils` dependency.
**Verification steps**
I verified Studio's AI Assistant still works as expected.
Closes AI-694
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Updated the Model Context Protocol SDK dependency to version 1.29.0.
* Removed unused AI utilities dependency.
* Optimized the internal AI service communication layer for improved
efficiency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
## Problem
In order to update to react 19, we need to update several dependencies
## Solution
- migrate to the `radix` umbrella package to ease upgrade
- update some dependencies
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Consolidated Radix UI usage to a single unified package across apps
and packages, updated package manifests and workspace catalog entries.
No user-facing behavior, visuals, or public APIs changed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Proposed mitigation, the obvious tradeoff is that clearing the cache
will make compilation slower on subsequent dev server starts, but more
consistent.
Various people have been observing `next-server` use up to ~34 GB
memory. I've observed 12.59 GB memory, with ~1.5k `postcss` processes:
```
ps aux | grep postcss | grep -v grep | wc -l
1526
```
Going down to 3 `postcss` process and 4.71 GB memory after clearing
cache:
```
ps aux | grep postcss | grep -v grep | wc -l
3
```
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Development infrastructure: adds an automated pre-development step
that clears the local dev cache before starting the development server
by introducing a new lifecycle hook and supporting cleanup script;
purely maintenance-oriented with no user-facing changes or functional
impact.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Vercel's TypeScript config lets us read NEXT_PUBLIC_BASE_PATH at build
time and prepend it to the SPA rewrites. Vite's base only changes asset
URLs, not on-disk paths — without this, `/basepath/assets/*` 404s and
falls through to the shell.
Bumps braintrust from 3.4.0 to ~~3.7.1~~ 3.9.0
~~Notable fix: v3.7.0 preserves the returned promise in tracing channel
hooks, which should resolve incorrect duration reporting in the
dashboard (braintrustdata/braintrust-sdk-javascript#1617)~~
3.9.0 includes this fix for double counted durations
https://github.com/braintrustdata/braintrust-sdk-javascript/pull/1769
See eval results in comment below, this fixes the issue where LLM
Duration was clocking in larger than total Duration.
<img width="2384" height="1548" alt="CleanShot 2026-04-21 at 09 27
36@2x"
src="https://github.com/user-attachments/assets/7ad5a75c-e3c4-44e1-98d8-ad4849049f7a"
/>
Closes AI-578
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Updated Braintrust dependency to version 3.9.0
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Adds the `nitro/vite` plugin so `vite build` produces a `.output/`
directory Vercel can pick up via the Build Output API. Along the way,
two SSR-prerender blockers had to be resolved:
- `@graphiql/react` transitively loads a codemirror addon that touches
`document` at module-evaluation time, which crashes Nitro's prerender
(it boots a real Node server and fetches `/`). Added an SSR-only
Vite plugin that swaps `components/interfaces/GraphQL/GraphiQL.tsx`
for a no-op default export — stubbing the single internal consumer
is simpler than matching graphiql's 30+ named exports to satisfy
Rolldown's static analysis, and no SSR-reachable route renders it.
- `tslib`'s Node ESM entry is a CJS-interop wrapper (`modules/index.js`
re-exporting from the UMD `tslib.js`). Rolldown inlines the UMD body
but flattens its IIFE, so `__extends` ends up declared but never
assigned — crashing any configcat-common / AWS SDK code path that
uses it. Force Nitro to prefer the `module` export condition so it
picks up the pure-ESM `tslib.es6.mjs`, mark it as `noExternals` so
the external-trace copy pass can't reintroduce the CJS wrapper at
runtime, and inline it in Vite's SSR bundle for the same reason.
Also updates package scripts to use Vite as the primary build/dev/start
commands and preserves the Next.js equivalents as `*:next` so the old
pipeline keeps working during the migration. `.output/` is gitignored.
Also adds next/legacy/image and useSearchParams shims that the build
uncovered, and bumps @radix-ui/react-visually-hidden to ^1.2.3 so
react-select's import of VISUALLY_HIDDEN_STYLES resolves at runtime.
- Mirror the feature-flag wrapper + getConfigCatFlags callback from
pages/_app.tsx in the TanStack root route so flags are scoped by the
selected org and include the cloud_provider custom attribute.
- Move the whole workspace to react/react-dom 19.2 via the catalog.
Studio's earlier explicit pin pulled in a second React via workspace
packages (common, ui, ui-patterns) that still cataloged react 18,
which caused "invalid hook call / Cannot read useContext of null"
in the Vite dev build. Single-version catalog avoids the dedupe
workaround. Next.js 16 supports React 19 so docs/www continue to work.
- Wire ErrorBoundary + Sentry-aware handler into routes/__root.tsx to
mirror pages/_app.tsx; switch the handler's Sentry import to
framework-agnostic @sentry/react.
- Add apps/studio/compat/next/ shims (link, router, head, navigation,
image, script, compat/router) that proxy to TanStack Router
equivalents. Shims implement only the surface used today; expand as
new usage appears.
- Combine shim aliasing and a build-time guard into a single Vite
plugin (nextCompat): resolves shimmed next/* ids to local files, and
fails the build on any unshimmed next/* import from workspace source
so we catch regressions during the migration.
- ssr.noExternal lodash to fix CJS named-export interop during
prerender.
- Pin react/react-dom and their types to ^19.2.0 in studio (other
apps stay on catalog react 18)
- Drop @tailwindcss/vite (v4-only) so Vite uses the existing
PostCSS pipeline with Tailwind v3 config
- Import global CSS in the TanStack Start __root route
## Problem
When users export a large schema, the UI becomes unresponsive for a long
time.
This is because the underlying `html-to-image` library calls
`getComputedStyle` for every node.
## Solution
- Upgrade `html-to-image` to its latest version
- Use the new `includeStyleProperties` property to call
`getComputedStyle` only once
- Extract the image export logic into a new hook
## How to test
- Open
https://studio-staging-git-gildasgarcia-fe-2998-suggest-e7fb9e-supabase.vercel.app/dashboard/project/pdmusqfyrsascxykhlge/database/schemas?schema=auth
- Rearrange tables so that they are all visible
- Export the schema as png
- It should takes (~10-15secs)
- Do the same in this PR preview
https://studio-staging-gy13zepyf-supabase.vercel.app/dashboard/project/pdmusqfyrsascxykhlge/database/schemas?schema=auth
- It should takes ~3-5secs
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Improved schema export: more reliable PNG/SVG exports that better
preserve visual styling, show progress state during downloads, and
surface success/error notifications.
* **Chores**
* Updated image-export library to a newer version for improved
compatibility and performance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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?
- Brand new hook APIs for registering shortcuts using tanstack hotkeys
- Support for command menu injection when shortcut is added
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Centralized keyboard shortcuts system with per‑shortcut registration
and per‑user enable/disable preferences stored locally
* Added a "Copy results as Markdown" shortcut (Mod+Shift+M)
* Shortcuts can be surfaced in the Command Menu with a visual shortcut
badge for discoverability
* **Documentation**
* Legacy keyboard shortcut hooks marked as deprecated and documentation
updated to point to the new shortcut API
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We currently have 2 libraries for schema validation: `yup` that was used
with `formik` and `zod` which is now the preferred one.
## Solution
- Migrate the auth providers form to `zod`
- Remove `yup`
No visual changes.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Preserve empty numeric inputs in auth provider forms to avoid
unintended conversion.
* **Refactor**
* Migrated auth provider form validation to a new validation system for
more consistent rules.
* Strengthened provider-specific validation (email, phone/SMS, OAuth,
SAML, Web3), added improved SMS test-OTP/date checks, and adjusted
initial handling for password-required-characters.
* **Chores**
* Removed an unused validation dependency from project packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We'd like to update react to `19` but many of our dependencies don't
support it.
## Solution
Update those dependencies. This PR focuses on `react-markdown`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Upgraded react-markdown to 10.1.0 (and remark-gfm to 4.0.0) across
projects for improved Markdown support.
* **Style**
* Adjusted Markdown rendering so typography and spacing are applied via
surrounding containers, improving consistent styling across docs and UI.
* **New Content**
* Added a new RSS feed item for a recent blog post.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Adds support for new OAuth scopes for reading and writing analytics
config to the app creation dialog and consent screen.
Depends on https://github.com/supabase/platform/pull/31539
## Problem
We'd like to update react to `19` but many of our dependencies don't
support it.
## Solution
Update those dependencies. This PR focuses on `react-hook-form`
## How to test
Play with some forms, especially those that use arrays of values
(database/enumerated types for instance) and the highly dynamic ones
(auth providers for instance)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
* **Chores**
* Bumped the form-handling library version across apps and packages for
improved compatibility and stability.
* **Refactor**
* Improved component form typings and generics in the studio to increase
type safety and reduce potential runtime issues.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Upgrade vite and vitest to their latest major versions across the
monorepo, along with related packages.
**Changed:**
- `vite` catalog: `^7.3.2` → `^8.0.8` (Rolldown replaces esbuild/Rollup)
- `vitest` catalog: `^3.2.0` → `^4.1.4`
- `@vitejs/plugin-react`: `^4.3.4` → `^6.0.1`
- `@vitest/coverage-v8`: `^3.2.0` → `^4.1.4`
- `@vitest/ui`: `^3.2.0` → `^4.1.4`
- `vite-tsconfig-paths`: `^4.3.2` / `^5.1.4` → `^6.1.1`
**Pinned to vite 7:**
- `apps/lite-studio` — `@react-router/dev` hasn't declared vite 8
support yet
- `blocks/vue` — Nuxt plugins (`vite-plugin-inspect`, `vite-dev-rpc`,
`vite-hot-client`, `vite-plugin-vue-tracer`) haven't declared vite 8
support yet
**Test fixes for vitest 4 breaking changes:**
- **`apps/studio/lib/api/snippets.utils.test.ts`** — Replaced
`vi.mock('fs/promises')` automock with an explicit factory. Vitest 4's
automocking doesn't create mock functions for getter-based exports on
Node built-ins, so `mockedFS.access.mockResolvedValue` etc. were
`undefined`.
- **`apps/studio/lib/api/self-hosted/functions/index.test.ts`** —
Changed `mockReturnValue` to `mockImplementation(function() { ... })`
for a constructor mock. Vitest 4 no longer allows `mockReturnValue` when
the mock is called with `new`.
- **`apps/studio/tests/pages/api/mcp/index.test.ts`** — Changed arrow
function to regular `function` in `mockImplementation` for
`StreamableHTTPServerTransport`. Arrow functions can't be constructors,
and vitest 4 now enforces this.
- **`packages/ui-patterns/vitest.setup.ts`** — Changed `ResizeObserver`
mock from arrow function to regular `function` for the same constructor
enforcement reason. This was crashing Radix popover rendering in jsdom.
## To test
- `pnpm test:studio` — all 226 test files should pass
- `pnpm --filter ui-patterns vitest run` — all 183 tests should pass
- `pnpm --filter www test -- --run` — all 19 tests should pass
- `pnpm --filter ui vitest run` — all tests should pass
- `pnpm --filter dev-tools vitest run` — all tests should pass
- `pnpm --filter ai-commands vitest run` — all tests should pass
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Standardized and updated development tooling versions and version
sources for consistent installs across the repo (Vite, Vitest,
vite-tsconfig-paths and related plugins/catalog entries).
* **Tests**
* Improved test mocks and typings (updated mock
factories/implementations and tightened spy/type assertions) to increase
test reliability and compatibility with updated tooling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Problem
We'd like to update react to `19` but many of our dependencies don't
support it.
## Solution
Update those dependencies. This PR focuses on `framer-motion`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Updated animation library dependencies to the latest compatible
versions across applications and packages to ensure consistent
performance and stability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Switch studio's package.json to `"type": "module"` so the package runs
as native ESM. This aligns the runtime module system with what we
actually write (`import`/`export`), improves tree-shaking, and reduces
friction with ESM-only dependencies.
**Changed:**
- `next.config.js` → `next.config.ts` – ESM imports/exports, proper TS
types, fixed type narrowing on redirect `has` and `basePath` fields
- `csp.js` → `csp.ts` – `module.exports.getCSP` → named `export
function`
- `tailwind.config.js` → `tailwind.config.ts` – ESM imports
- `postcss.config.js` – `module.exports` → `export default` (stays `.js`
since PostCSS doesn't support TS configs)
**Removed:**
- Unused `path` import in next config
- Deprecated Sentry `hideSourceMaps` option (default behavior in Sentry
v10)
**Added:**
- Type declaration for `config/tailwind.config` CJS package
## To test
- A general smoke test of studio should suffice
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Modernized the Studio package to ES module style and improved
TypeScript typings and config declarations to reduce build/runtime
issues.
* Updated styling and post-processing configuration format for more
consistent tooling behavior.
* **Chores**
* Updated code ownership entries to reflect migrated/renamed
configuration files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Remove `@headlessui/react` as a direct dependency from both
`apps/studio` and `packages/ui`. It's incompatible with React 19 (at the
pinned v1 version) and overlaps with our existing Radix/shadcn
primitives.
The only usage was the `<Transition>` component in 3 files + a dead
`Overlay` component in `packages/ui`.
**Removed:**
- `@headlessui/react` from `apps/studio/package.json` and
`packages/ui/package.json`
- Dead `packages/ui/src/lib/Overlay/` directory (not exported or
imported anywhere)
**Changed:**
- `ChooseFunctionForm.tsx` — replaced `Transition` with a shadcn
`Accordion` for the "View definition" toggle
- `FileExplorerColumn.tsx` — replaced `Transition` with `framer-motion`
`AnimatePresence` for drag-over overlay
- `PreviewPane.tsx` — removed `Transition` wrapper entirely (wasn't
visually animating on prod), replaced with simple conditional render
Note: `@headlessui/react` will remain in `pnpm-lock.yaml` as a
transitive dependency of `@graphiql/react` and
`@graphiql/plugin-doc-explorer` — that's expected and not something we
control.
## To test
- **Triggers page** (`/dashboard/project/_/database/triggers`): Create
or edit a trigger, click "Choose a function" to open the side panel.
Click "View definition" on a function row — the SQL definition should
expand/collapse with a smooth height animation. Clicking the row itself
should still select the function.
- **Storage explorer**
(`/dashboard/project/_/storage/buckets/<bucket>`): Navigate into a
folder, drag a file over the column — the drag overlay should fade
in/out smoothly.
- **Storage file preview**
(`/dashboard/project/_/storage/buckets/<bucket>`): Click on a file — the
preview pane should appear on the right (no animation, same as current
prod behaviour).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Replaced several transition wrappers with new animation/mounting
behavior for overlays, preview panes, and drag-over UI to improve
consistency and responsiveness.
* Swapped the function-definition toggle for an Accordion and updated
click handling to prevent accidental row selection.
* Removed the legacy overlay component, its context, and associated
overlay styling.
* **Chores**
* Removed HeadlessUI dependency from project packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Alaister Young
