## Summary
- Adds a fallback message ("Taking longer than expected?... contact
support@supabase.io") shown after 7s if Studio fails to fully load, for
the Next.js runtime — mirrors the existing TanStack-only
`ShellFallback`, which had no Next.js equivalent
- Fixes the support email in the existing TanStack `ShellFallback` (was
`support@supabase.com`, should be `support@supabase.io`)
- Extracts the shared copy (message, email, delay) into one file so both
fallbacks stay in sync
## Why
Linear FE-4460: users reported the Dashboard going completely blank with
no way to reach support when a JS chunk failed to load. The Next.js
runtime (the current default) had no fallback at all for this case.
## Test plan
- [ ] Normal page load: fallback never appears
- [ ] Simulated stuck boot (mount signal disabled): fallback appears
after 7s with correct copy/email, no layout bugs
- [ ] Same two checks on the TanStack runtime
(`STUDIO_FRAMEWORK=tanstack`)
- [ ] `pnpm --filter studio run typecheck` / `lint:ratchet` pass
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a loading fallback that appears if the app takes too long to
load, with guidance to clear browser cookies and reload.
* On self-hosted platforms, the fallback includes a support contact
link.
* The fallback is automatically hidden once the app loads.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Feature.
## What is the current behaviour?
Studio Appearance preferences only select a theme mode. The underlying
theme colours cannot be adjusted, and the existing proof of concept
allowed unsafe combinations and introduced a bespoke Slider variant.
## What is the new behaviour?
- Preserves the existing System, Dark, Light, and Classic Dark theme
options. Classic Dark remains a fixed preset.
- Adds four theme colour controls using the existing Supabase Slider
unchanged. Each control presents a consistent 0 to 100 scale mapped to
bounded light and dark ranges.
- Previews colour changes while dragging and persists them once the
interaction finishes, including rapid pointer gestures.
- Stores light and dark overrides separately, validates stored values,
clamps legacy values, and removes overrides that return to their shipped
defaults.
- Adds concise descriptions for Chroma, Contrast, Surface, and Elevation
step, with a scoped Reset action shown only when the active theme
differs from its defaults.
- Keeps Slider in a stable shared chunk so production builds do not
create a circular dependency between generated UI chunks.
| Before | After |
| --- | --- |
| <img width="1448" height="1284" alt="CleanShot 2026-09-15 at 14 33
53@2x"
src="https://github.com/user-attachments/assets/d55151c7-b2a9-40c6-9468-e77ae685ac38"
/> | <img width="1454" height="1958" alt="CleanShot 2026-09-15 at 17 48
47@2x"
src="https://github.com/user-attachments/assets/9d302e67-76cc-4341-948c-81713dea2e93"
/> |
## To test
1. Open `/account/me` and scroll to Appearance.
2. Switch between System, Dark, Light, and Classic Dark. Confirm the
same four modes remain available in the account theme menu.
3. Confirm Classic Dark retains its existing appearance and does not
show theme colour controls.
4. In System, Dark, or Light, move each Theme colors slider to both
ends. Confirm the dashboard previews the change, remains readable, and
the theme cards do not shift or remount.
5. Reload the page and confirm colour changes persist separately for
Light and Dark.
6. Return all sliders to their defaults, or select Reset, and confirm
the Reset action disappears.
7. In System mode, change the operating system theme and confirm each
resolved mode restores its own colour settings.
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
### Summary
This PR adds a blocking dashboard modal for affected Australian
customers to confirm their GST registration and business use of
Supabase.
KPMG requires us to collect this declaration from certain existing
Australian customers. The backend now identifies organizations that
still need to respond using `requires_indirect_tax_declaration` and
stores their `yes` or `no`
response in Orb customer metadata.
It also supports email links with `submit_indirect_tax_declaration=true`
and shows a dismissible confirmation when the organization has already
responded.
### Testing
#### Manual testing
- Confirmed the modal appears for an affected organization without an
existing response and cannot be dismissed.
- Submitted both `yes` and `no` and confirmed the modal remains closed
after a refresh.
- Confirmed the declaration is stored without changing the customer's
Tax ID.
- Confirmed the modal does not appear for non admins/owners or
organizations that do not require a declaration.
- Confirmed the email-link parameter shows the already-submitted
confirmation only for organizations that have responded, and is removed
when dismissed.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added an indirect tax declaration dialog for eligible Australian
organizations.
* Users with billing permissions can select “Yes” or “No” and submit
their declaration.
* Added a dismissible confirmation for declarations submitted through a
linked prompt.
* The dialog requires an explicit response and provides guidance when no
option is selected.
* **Bug Fixes**
* Declaration prompts remain visible through submission confirmation and
close when dismissed.
* Users without billing permissions do not see the dialog.
* Success notifications no longer overlap with the confirmation dialog.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Julian Domke <68325451+juleswritescode@users.noreply.github.com>
## 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?
UI / design-system consistency (accessibility).
## What is the current behavior?
Keyboard focus rings are inconsistent across Studio and `packages/ui`:
- Custom Button uses thick `outline` with per-variant colours (brand /
grey / destructive / warning)
- Form controls use muted grey rings (`ring-background-control`)
- Tabs / NavMenu / Radio use soft brand `ring-ring`
- Studio `.inset-focus` uses dark green `outline-brand-600`
Related: [DEPR-354](https://linear.app/supabase/issue/DEPR-354).
## What is the new behavior?
One shared focus recipe, exposed as Tailwind `@utility` classes in
`packages/config/css/utilities.css`:
| Utility | Use when |
| --- | --- |
| `focus-ring` | Buttons, inputs, most controls (offset ring) |
| `focus-inset` | Dense/flush surfaces such as interactive table rows
(renamed from `inset-focus`) |
```txt
# focus-ring
outline-hidden
focus-visible:ring-2
focus-visible:ring-ring
focus-visible:ring-offset-2
focus-visible:ring-offset-background
```
Applied on Button, shadcn form controls, Menu/NavMenu, Command palette
trigger, Studio table rows, and related call sites. Documented in the
design-system accessibility docs. Variants do not change focus ring
colour.
When the ring must appear on a different element than the focused one
(e.g. Menu + ProductMenu `Link` via `group-focus-visible`, or InputGroup
via `:has()`), keep an explicit ring stack. The utilities bake in
`:focus-visible` on the same element.
## Additional context
**Out of scope**
- Full `packages/ui` / Studio / www sweep
- Legacy Studio form-group green box-shadow cleanup
- ESLint rule for bare `outline-none`
## Test plan
Prefer Safari (“hard mode” for `tabIndex`). Expect one soft brand ring
everywhere: not grey, not solid green outline.
### Design system
- [ ]
[Accessibility](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/accessibility):
recipe docs match what you see
- [ ]
[Button](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/button):
Tab primary / default / danger; same ring colour
- [ ] [Table → Row-level
navigation](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/table#row-level-navigation):
Tab an interactive row; inset outline (`focus-inset`) sits inside the
row
### Studio
- [ ] **Org home → table view** (`/organizations/_` or org projects):
switch to the table layout, Tab onto a project row; inset outline sits
inside the row (list/card view uses CardButton, not `focus-inset`)
- [ ] **Project sidebar** (Database, Auth, Storage, …): Tab the main
product nav links; ring follows the focused item (not the nested section
menus like Tables / Roles)
- [ ] **Storage → Files**: Tab a bucket row; same inset outline as org
table rows
- [ ] **Project Settings → General** (or Compute and Disk): Tab through
inputs, checkboxes, switches, selects; same offset ring, no ring on
mouse click
- [ ] **Header ⌘K** (desktop width): Tab to the search control after
Feedback; same soft brand `focus-ring` (was a thicker
`ring-border-strong` before)
- [ ] **Table Editor or SQL Editor tabs**: focus a tab, Tab to × if
active; close shows a ring
- [ ] **Light + dark**: ring stays visible against both backgrounds
## Problem
The free-plan paused project notice was a dense paragraph, so the key
points (data is safe, resume window, download-after-expiry, upgrade)
were easy to skip.
## Fix
Present those points as a scannable bullet list, keeping the dynamic
day-count tooltip, restore-deadline timestamp, and the existing
Pro-wording variant.
Also adds a "Project Status" tab to the dev toolbar (local and staging
only) with a select for forcing the current project's status, so the
paused state and other statuses are easy to preview without touching the
backend. It overrides the status in the React Query cache and reverts on
close, project navigation, or reset.
## How to test
- Run Studio locally against the platform API
- Open the dev toolbar, go to the Project Status tab, and select
INACTIVE
- Navigate to a project page and confirm the paused screen renders
- On a free-plan org, confirm the notice now shows the details as bullet
points with the day-count tooltip and restore-deadline date intact
- Click "Reset to real data" (or close the toolbar) and confirm the
status reverts
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a development toolbar “Project Status” tab to simulate project
status and pause states in non-production environments.
* Status and pause-state overrides persist locally, can be reset, and
are reflected across project detail and paused-state views.
* **Style**
* Refined paused-project messaging: updated the heading and reworked the
free-plan explanation into bullet points, while keeping paid-plan
messaging paragraph-based for readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Post-merge fixes for the TanStack Start migration (#46424) — things that
broke on the TanStack build as master evolved under the migration
branches. Kept on their own branch off master rather than piling onto
the E2E-matrix PR (#47119); all land on master and cascade up to S6 +
the big PR.
Common theme: a master PR changed something the Next pipeline handles
via `next/font` / `pages/_app.tsx` / `next.config.ts`, but the
hand-rolled TanStack equivalent (`routes/__root.tsx`,
`styles/fonts.css`, `vercel.ts`) wasn't updated to match — invisible on
the Next deploy, broken only on TanStack.
---
## 1. Monaco loader path (#47182)
#47182 re-nested the served Monaco assets from a flat
`public/monaco-editor/` layout into `public/monaco-editor/vs/` and
updated `pages/_app.tsx`, but `routes/__root.tsx` still pointed
`loader.config` at the old path, so `loader.js` 404'd and **no Monaco
editor mounted anywhere in the TanStack build**. Now mirrors the Next
config (`${origin}${BASE_PATH}/monaco-editor/vs`, window-guarded for
SSR). Was failing the whole `tanstack` E2E shard on #47119.
## 2. Inter + Manrope fonts (#47306)
#47306 renamed Tailwind's sans var `--font-custom` → `--font-sans` and
added `--font-heading` (Manrope), set via `next/font` on Next.
`fonts.css` still only set the now-ignored `--font-custom`, so the body
fell back to the theme's system chain (`Circular, custom-font,
Helvetica…`) at weight 450 — that's the "Inter weights look wrong".
Manrope was missing entirely.
- Wire `--font-sans` (Inter) + `--font-heading` (Manrope) to match
`next/font`.
- **Vendor all three families** (Inter, Manrope, Source Code Pro) via
`@font-face` so nothing depends on the Google Fonts CDN — matches
`next/font` self-hosting, and (see below) `font-src` doesn't allow
`fonts.gstatic.com` anyway.
Verified in-browser: computed `body` → `Inter`, headings → `Manrope`,
all loading from local `/assets/*.woff2`.
## 3. Security headers / CSP (next.config.ts `headers()`)
The Next build sets X-Frame-Options / X-Content-Type-Options / HSTS /
**Content-Security-Policy** / Referrer-Policy via `next.config.ts`. The
TanStack build never carried these over — `vercel.ts` only set
cache-control, so **the deployed TanStack dashboard shipped with no CSP
at all**.
The TanStack deploy serves a static shell (no server to attach headers),
so they go in the Vercel config:
- `security-headers.ts` — shared source of truth, reuses `getCSP()`,
env-gated exactly like next.config.
- `vercel.ts` — apply to every response (all base-path prefixes): full
`getCSP()` + HSTS on platform.
- `scripts/serve.js` — the non-platform set (`frame-ancestors 'none'`)
for the self-hosted server.
**Tested the policy in a real browser** (temporarily enforced it on the
TanStack build via /test-supabase-local): everything passed except one
real gap — `font-src` was missing `data:`, so GraphiQL's bundled Monaco
codicon font and Stripe's payment-element fonts (both data: URIs) were
blocked (37 violations on a cold load). Added `data:` to `font-src` in
`csp.ts` → violations drop to zero, SQL editor Monaco renders clean.
That gap affects the Next build too.
---
## 4. `node:path` import crashing `/project/[ref]/merge`
Found by a full-site click-through of the TanStack build (all product
areas, ongoing — see below). `useEdgeFunctionsDiff.ts` +
`EdgeFunctionsDiffPanel.tsx` did `import { basename } from 'path'` in
client code. Webpack (Next) polyfills `path` in the browser; Vite
externalizes it, so the whole `/merge` route crashed with "Module
\"path\" has been externalized for browser compatibility". Replaced the
two `basename` call sites with a string helper. Verified in-browser:
`/merge` renders.
## 5. URL shape — Next-style search-param semantics + shim fixes
The dashboard produced malformed URLs vs the Next build (strange query
params, trailing slashes, `##` hashes). Root cause + audit verified
empirically against `@tanstack/react-router@1.170.10`; all fixed with
unit tests and browser-verified:
- **`createRouter` used TanStack's default JSON search codec** —
`?flag=true` became `?flag=%22true%22` via links, repeated
`?filter=…&filter=…` collapsed into a JSON array (breaking
multi-filter/sort table-editor URLs and the account-page round-trip,
which double-encoded), and search values arrived as numbers/booleans
where the app expects strings. New `lib/router-search-params.ts`
(Next-style: strings in, strings out, repeated keys → string[]) wired
into the router.
- **Link shim** (`compat/next/link.tsx`): `URL.hash` includes the
leading `#` while TanStack's `hash` prop adds its own → every
`href="…#section"` navigated to `##section` (hash-scroll broke);
`Object.fromEntries(searchParams)` dropped repeated query params. Both
fixed.
- **Trailing slash injected before the query** on every `?`-only
relative navigation (`/auth/providers/?provider=…`): fixed in the compat
router (prefix current pathname) and via a custom nuqs adapter
(`lib/nuqs-tanstack-adapter.tsx`) replacing the stock tanstack-router
adapter, whose `navigate({ to: '?…' })` writes hit the same TanStack
behavior (123 files use nuqs).
- **Pathname-less `router.push({ query })` leaked path params** — Next
re-consumes `ref`/`id` from `query` into the path pattern; the shim
didn't, yielding
`/editor/17597?schema=public&ref=<ref>&id=17597&filter=…` from
table-editor filter/sort, linter panels, and advisor shortcuts. The shim
now defaults the pathname to the current route pattern and backfills
omitted params.
- **Redirects dropped query + hash** (Next's `redirects()` preserves
them): `__root.tsx` `matchRedirect` and `routes/index.tsx` now carry
incoming params/hash through (consumed rule params excluded,
destination's own params win). `/?next=new-project&projectName=zzz` →
`/new/new-project?projectName=zzz`; `/sql/quickstarts?template=x#frag` →
`/sql/examples?template=x#frag`.
Browser-verified post-fix: advisors `?preset=WARN`, providers
`?provider=Google`, `?schema=auth` — all clean (no `/?`, no leaks);
repeated `filter` params survive hydration; `=true` unquoted; single
`#`.
## 6. TanStack `navigate` corrupting query values (Logs Explorer SQL
newline loss)
TanStack router-core treats a query string embedded in `navigate({ to
})` as part of the *path*: `decodePath` percent-decodes it and
`sanitizePathSegment` strips control characters, silently deleting every
`%0A`. Logs Explorer's SQL (`s` param) lost its newlines on Run/reload —
`order by timestamp desc` / `limit 5` glued into `desclimit 5`, which
then failed the LIMIT lint. Pre-existing on the TanStack build (the
stock nuqs adapter had the same shape); Next unaffected.
Fixed by never embedding query strings in `to`: the nuqs adapter and the
compat `router.push`/`replace`/`prefetch` (plus the `next/navigation`
shim) now pass search as an object through the app codec
(`splitInternalUrl` hoisted to `lib/internal-url.ts`). Guard test drives
a real `createRouter` with multi-line SQL through both producers.
Browser-verified: newlines survive the full Run → reload → re-Run cycle.
## 7. Integration overview markdown never loaded (all integrations)
`MarkdownContent` used a template-literal dynamic import
(``import(`@/static-data/integrations/${id}/overview.md`)``) — webpack
builds a context module for that, Vite can't analyze it, so every
integration detail page threw `Failed to resolve module specifier` and
rendered no overview text. Fixed with an explicit lazy registry of
literal imports (`static-data/integrations/overviews.ts`, drift-guarded
by a test) plus an `mdRawLoader()` Vite plugin mirroring next.config's
turbopack raw-loader rule. Both runtimes keep working; md stays out of
the main bundle.
## 8. GraphiQL editor never mounted (`exports is not defined`)
Our `umdAmdShortCircuit()` Vite plugin (which disarms Monaco's global
AMD loader for deps like papaparse) rewrote `typeof define ===
'function' && define.amd` to `false` inside `monaco-editor`'s bundled
copy of marked — whose UMD relies on its own *local* `define` shim — so
the whole optimized monaco chunk failed to evaluate and GraphiQL's
editor pane stayed blank. The check now only short-circuits when
`define` is the global AMD loader. Browser-verified: all four GraphiQL
Monaco panes mount, queries execute. (Known follow-up: GraphiQL's Monaco
workers fall back to the main thread under Vite — functional, worker
wiring is Next-specific `setup-workers/webpack`.)
## 9. `@sentry/nextjs` bundling Next internals — built TanStack bundle
crashed (caught by E2E)
The E2E suite against the **built** TanStack bundle (not the dev server)
found lazy chunks like `table-editor-*.js` dead on arrival:
`@sentry/nextjs` (imported by ~25 client files) drags in
`next/dist/shared/lib/constants`, whose module scope evaluates
`process?.features?.typescript` — optional chaining doesn't guard an
undeclared `process` in the browser, so the whole chunk failed at load
with `ReferenceError: process is not defined`. Dev shims `process`,
which is why weeks of dev-server testing never saw it.
Fixed by aliasing `@sentry/nextjs` → `compat/sentry-nextjs.ts`
(re-exports `@sentry/react`, same deduped 10.59.0, plus explicit
stand-ins for the three Next-only APIs) in the Vite build only.
Verified: fresh build has zero Next-internals markers in any chunk;
table editor loads clean; full E2E suite run against the built bundle.
Note for the stack: `alaister/tanstack-start` / the E2E-matrix branch
already carried a different fix for the same crash (a `next/constants`
shim) that never made it to master — the cherry-pick onto those branches
keeps **both** (the shim covers any other transitive importer; the alias
keeps Next internals out of the client bundle entirely).
**Follow-up found while fixing:** Sentry is never *initialized* in the
TanStack runtime — `instrumentation-client.ts` /
`sentry.server.config.ts` are Next-convention files nothing imports
under TanStack, so `captureException` calls are silent no-ops. Needs an
`@sentry/react` init (+ `tanstackRouterBrowserTracingIntegration`) wired
into the TanStack client entry as its own PR.
## 10. GraphiQL Monaco workers + edge-function Deno typings (Vite-only
gaps)
- **GraphiQL's Monaco workers ran on the main thread** under Vite
("Could not create web worker(s)…" — `setup-workers/webpack`'s `new
URL(...)` form isn't rewritten by Vite). A `graphiqlViteWorkers()`
plugin resolves the import to graphiql's own `setup-workers/vite`
variant for client builds (SSR untouched, Next untouched); the
setup-workers chain is `optimizeDeps.exclude`d because the Rolldown
optimizer can't load `?worker` ids.
- **Edge-function editors silently lost their Deno typings** —
`AIEditor` loaded `public/deno/*.d.ts` via `/* @vite-ignore */` imports
that always failed at runtime under Vite. The `.md` raw loader is
generalized into `rawTextLoader` (exact-path allowlist for the two
typings files, served as virtual string modules so the dep scanner never
parses `.d.ts` syntax), and the imports are now static-analyzable
literals that both bundlers handle (turbopack's raw-loader rules match
them on the Next side).
## Split out for reviewability
App-level fixes that reproduce on the Next build too (DOM-nesting
hydration errors, the ghost deleted-snippet nav, the recurring pg-meta
`migrations` 400) moved to their own PR: #47667. Sentry initialization
for the TanStack runtime (captures were silent no-ops) is #47666,
stacked on this PR.
## Full-site test campaign
Drove every dashboard product area on the local TanStack build
(Playwright, human-style) hunting migration regressions:
redirects/404/catch-alls, org, account, project home/branches/merge,
table editor CRUD, SQL editor (Monaco/run/save/templates/AI), all
database pages, all auth pages, storage CRUD, edge functions + realtime,
logs/observability, advisors, settings, integrations hub incl. nested
routes, global UI (palette/connect/switchers/theme/fonts), and a
cross-cutting sweep (document titles, back/forward chain, hard-refresh
hydration on deep URLs, trailing-slash active state). Every failure
found is fixed above and re-verified in-browser; remaining console
quirks were cross-checked against the deployed Next build and are
pre-existing (tracked separately).
## To test
Most fixes are already browser-verified + covered by unit tests and the
self-hosted E2E suite; the last two landed after the final browser pass
and still need an in-browser check:
1. **GraphiQL Monaco workers** — restart the dev server (clear
`apps/studio/node_modules/.vite` once first — the optimizer cache may
hold a stale prebundle of the worker chain). Open
`/project/<ref>/integrations/graphiql/graphiql` with the console open:
the `Could not create web worker(s). Falling back to loading web worker
code in main thread` warning must be gone, and DevTools → Sources →
Threads shows the three workers (json, editor, graphql). Autocomplete in
the query editor stays responsive.
2. **Edge-function Deno typings** — `/project/<ref>/functions/new`: no
"Failed to load … typings" console error, and typing `Deno.` in the
editor offers typed completions (e.g. `Deno.env`).
Spot-checks for the rest (all previously verified):
- `/project/<ref>/merge` renders (no "Module path" crash).
- Multi-line SQL in Logs Explorer survives Run → reload (no `desclimit`
gluing, no LIMIT-lint false failure); `s` param keeps `%0A`.
- `/auth/providers` → open a provider → `?provider=…` with no trailing
slash before `?`; table-editor filter/sort URLs carry no leaked
`ref`/`id` params; `/?next=new-project&projectName=x` lands on
`/new/new-project?projectName=x`.
- Integration detail pages (cron/queues/vault/data_api) show their
overview prose; GraphiQL query editor mounts.
- Built bundle (`MODE=test vite build` + `start:tanstack`): table editor
loads with no `process is not defined`.
- `curl -sI` any page on a platform deploy: `X-Content-Type-Options:
nosniff` (was the invalid `no-sniff`).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Centralized integration overview markdown loading with registry-based
lookup.
* Improved Monaco loading/asset path handling for smoother editor
startup.
* **Bug Fixes**
* Next-style navigation/search handling now preserves pathname, hash,
repeated query keys, and special characters (including newlines).
* Redirects now reliably carry over query and hash with correct
precedence.
* **Security/Configuration**
* Updated CSP font sourcing and unified security headers delivery across
environments; conditional HSTS behavior.
* Refreshed font CSS variables and font-face definitions to match the
theme.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
### Review feedback: non-prod favicon (Joshen)
The TanStack `__root.tsx` hardcoded the prod favicon; local + hosted
staging now use the white staging favicon (`/favicon/staging`), matching
what `pages/_app.tsx` passes to `MetaFaviconsPagesRouter` for non-prod.
Rather than pull the pages-router component into the TanStack head, it
reuses the same synchronous `NEXT_PUBLIC_ENVIRONMENT` signal the file
already uses for `IS_DEV_TOOLBAR_ENABLED` (the `head()` route option
isn't a React component, so it can't run `_app`'s async CLI check — but
the env signal covers the reported local/staging case).
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Update studio fonts:
- Headings: Manrope
- Sans-serif: Inter
Slightly reduced font-sizes by 1px (or 2 for bigger font-sizes) and
increased base html font-weight to 450 for better rendering and
legibility.
## Problem
- We have unused CSS from previous design system (`.sbui-*` classes)
- We use Tailwind `@apply` when we could set the tailwind classes on the
components directly
## Solution
- Delete all `.sbui-*` classes as we don't use them anymore
- Move classes directly on components when that make sense
## Notes
I did not migrate all `sbgrid` classes as they are applied in multiple
components
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Updated grid editors, placeholders, headers, and dropdowns for cleaner
spacing, truncation, and alignment.
* Improved layout consistency across text, number, time, JSON, and
foreign-key cells.
* Adjusted search and impersonation inputs for better fit and padding.
* **Chores**
* Simplified and removed outdated styling overrides across the Studio
and web app.
* Reduced unused UI package surface by removing an unused input icon
container export.
<!-- 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**
* Standardized Monaco Editor package versions across the workspace using
the shared dependency catalog.
* **Bug Fixes**
* Improved Monaco initialization by configuring asset loading only on
the client and serving Monaco assets from a single base-path URL
(removing platform-specific switching).
* Streamlined Monaco stylesheet injection in Studio’s document
rendering.
* **New Features**
* Added/updated Monaco language support in Studio, including GraphQL,
SQL, and PostgreSQL, with refreshed HTML, JSON, and CSS editor modes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.
## Solution
- Remove the UI patterns index file
- Fix invalid impors
## Problem
The global `TooltipProvider` in `apps/studio/pages/_app.tsx` sets
`delayDuration={0}`, so every tooltip in Studio appears instantly on
hover. This makes tooltips easy to trigger accidentally while moving the
cursor, and contributed to issues like FE-3499 (status code tooltip in
Unified Logs).
The zero delay was introduced in #32679 when tooltips were migrated to
shadcn, without a stated reason.
## Fix
Remove the `delayDuration={0}` prop so tooltips use the Radix default
(700ms).
## How to test
- Open Studio
- Hover briefly over icons, buttons, and other elements with tooltips
- Expected: tooltips no longer appear instantly; they show after a short
hover delay
- Hovering long enough (around 700ms) still shows the tooltip as before
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Updated tooltip behavior to use default delay duration instead of
immediate display.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46456?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 -->
## Summary
- Adds the organization's `plan` (e.g. `free`, `pro`, `team`,
`enterprise`) as a custom attribute in the ConfigCat `User` object
- Uses the existing `useSelectedOrganizationQuery` — already called
inside `FeatureFlagProviderWithOrgContext`, so no extra network request
(React Query deduplicates)
- Refactors `customAttributes` construction from a conditional
assignment to an incremental object build, making it easy to add more
attributes in the future
## Why
This unlocks tier-based percentage rollouts in the ConfigCat dashboard.
For example, to roll out a feature to 25% of Pro accounts:
1. Add a Targeting Rule: `IF plan = "pro"`
2. Set the THEN clause to Percentage Options: `25% ON / 75% OFF`
The split is deterministic per user email (or switch to `org_id` as the
percentage evaluation attribute for per-org cohesion).
## Test plan
- [ ] Log in as a user on a paid plan and verify `plan` appears as a
custom attribute in ConfigCat's evaluation logs / targeting debugger
- [ ] Log in as a free-tier user and confirm `plan = "free"` is sent
- [ ] Confirm unauthenticated / org-less sessions don't break (attribute
is omitted when `selectedOrganization?.plan?.id` is undefined)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Enhanced feature flag configuration to account for organization and
subscription plan information, ensuring more accurate feature
availability based on user context.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46063?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 -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## Context
Swaps out (and deprecates) the unified logs's own filter bar, for our
existing design system's filter bar
<img width="1450" height="355" alt="image"
src="https://github.com/user-attachments/assets/c5e83bd1-4e67-4bb5-8f27-a3d9beacbbb5"
/>
Other changes involved for the FilterBar itself includes the following
(more details in subsequent sections)
- Add `onApply` param for `FilterBar` that will only trigger when an
entered filter is "complete" (e.g on enter or blur)
- Automatically select the operator if only one exists
## To test
- Verify that the filter bar in general works BUT note there's some odd
behaviour when searching on say the "status" column (more details under
known issues)
- likely something with the internal SQL i think, will need to
investigate separately
- afaict testing on the method seems to be working at least
---
### Add `onApply` parameter for `FilterBar`
The search behaviour for the filter bar feels a bit awkward atm -
referencing the table editor:
- selecting the column triggers a search, which returns an error cause
the search query is incorrect (operator and value not selected yet)
- when typing the search value (after selecting the column + operator),
the search triggers on debounce, which feels odd in this context as I'd
expect the search to only trigger when i've hit enter (e.g to "finalize"
my search parameters)
- Am adding an `onApply` parameter gets called when a filter is
"complete" -> column, operator, and value are finalized (e.g via Enter
or onBlur)
- Updated both Unified logs and table editor to use this behaviour
### Automatically select operator if only one exists in `FilterBar`
This one's more specific to unified logs since there's only an `=`
operator - but saves an unnecessary "enter" key event when filtering in
unified logs
### Known issues
- For some reason (even with the existing filter bar) - searching
against status for e.g for postgres logs doesnt return the expected
rows. e.g i've got rows with status as `00000`, but searching for
`00000` doesnt return anything. Suspect its something to do with the SQL
we're firing?
<img width="1167" height="271" alt="image"
src="https://github.com/user-attachments/assets/1dde74cf-8366-4cf1-8d8f-6907ba2473f6"
/>
<img width="1184" height="453" alt="image"
src="https://github.com/user-attachments/assets/bf55f0fb-cb27-4e8f-b2d9-cd913d6ac6b9"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a dedicated Logs filter bar with an explicit "apply"/commit
callback for filter UI.
* **Bug Fixes**
* Filter edits are buffered locally and only committed on apply to
prevent aggressive data requests.
* **Refactor**
* Replaced legacy command-style table filter UI and removed related
utilities.
* Updated filter commit lifecycle and narrowed option value typing;
adjusted top-level provider ordering.
* **Style**
* Small layout and trigger behavior tweaks for filter controls, timeline
chart spacing, and download button.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46071?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 -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
## Context
Use a different favicon (black logo on white bg) for dashboard staging
or local CLI
to improve visual differentiation against hosted dashboard (green logo
on black bg)
<img width="357" height="52" alt="image"
src="https://github.com/user-attachments/assets/b5c88a6e-0ab3-40ce-9c85-fddd8d6ce92b"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Favicon routing now switches automatically to staging icons when
running in non-production or CLI-release contexts so the UI reflects the
environment.
* **Chores**
* Added staging favicon assets, a browserconfig, and a staging web app
manifest to support environment-specific branding.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45871)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates all tailwind configs in the apps to be CSS configs.
They import a shared CSS Tailwind config from the `config` package
(which in turns imports the old JS config).
The shared JS config will be migrated to CSS in a followup PR.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Centralized Tailwind into a config-driven entrypoint and updated the
app build flow to use the new build step; many apps now import unified
global styles.
* **Style**
* Migrated global styles to a Tailwind v4-style setup, added
project-wide content scanning, consolidated theme imports, standardized
theme tokens (including new --container-site max-width), and added a
small prose utility to remove paragraph margins.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## Problem
The dashboard renders all timestamps in the browser's local timezone.
When debugging app issues, users often want to see logs and timestamps
in a different timezone (e.g. their app's deployment region) without
changing their OS clock.
## Fix
- New Timezone submenu in the user-avatar dropdown, sitting next to the
existing Theme picker. Search-as-you-type combobox over the full IANA
catalog plus an Auto detect option.
- Selection persists in localStorage (`supabase-ui-timezone`) and
survives `clearLocalStorage()`. No backend schema change.
- New `lib/datetime.tsx` exposes pure timezone-aware formatters
(`formatDateTime`, `formatDate`, `formatTime`, `formatFromNow`,
`toTimezone`) plus a `TimezoneProvider` and matching React hooks
(`useTimezone`, `useFormatDateTime`, ...). The pure functions take `tz`
explicitly so they're easy to unit test (17 vitest cases covering DST
transitions, multi-tz formatting, unix-micro/Date inputs, invalid-tz
fallback).
- The selected timezone propagates to every existing `<TimestampInfo>`
in Studio via a new `TimestampInfoProvider` context exported from
`ui-patterns`. No per-callsite changes needed for those ~20+ surfaces.
- The `UnifiedLogs` date column migrates off `date-fns` to the new
`useFormatDateTime` hook (the rest of the date-fns callers stay as-is,
since they're either internal range math or non-display).
- `ALL_TIMEZONES` (~600 entries) moves out of `PITR.constants.ts` into a
shared `lib/constants/timezones.ts`. PITR keeps a re-export shim so its
callers don't move. New `TIMEZONES_BY_IANA` dedupes the catalog by
primary IANA name (the original list contains both PDT and PST rows for
`America/Los_Angeles`, etc.) and `findTimezoneByIana` provides reverse
lookup.
- Telemetry: `timezone_picker_clicked` PostHog event with
`previousTimezone`, `nextTimezone`, `isAutoDetected` properties.
Notes for reviewers:
- Bare `dayjs(x).format(...)` calls (~157 files) intentionally still
render in browser-local time. Surfaces opt in by switching to the new
wrappers, so this PR is the abstraction plus logs adoption; broader
migration is a follow-up.
- Two `// prettier-ignore` lines (`apps/studio/pages/_app.tsx`,
`apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx`)
work around a pre-existing local-tooling issue where
`prettier-plugin-sql-cst` strips angle-bracket type arguments under
certain conditions. Project's pinned prettier (3.8.1) does not strip;
the issue surfaces with a globally-installed prettier. Worth tracking
separately.
- Hydration: `guessLocalTimezone()` and `useLocalStorageQuery` are
client-only. Studio is mostly CSR via the Pages Router, but any SSR'd
`<TimestampInfo>` may briefly render in the server's tz before client
hydration. Existing behavior already had this mismatch with `.local()`;
this PR does not regress it.
- Backend timestamps round-tripped through query params and mutations
stay UTC. The picker is display-only.
## How to test
- Run `pnpm dev:studio`, sign in.
- Open the user avatar dropdown (top right). Hover Timezone.
- Search for "tokyo", pick `(UTC+09:00) Osaka, Sapporo, Tokyo`.
- Open any project, navigate to Logs (e.g. `Project > Logs > Edge
Functions`). Hover a log row's timestamp; the popover should show UTC,
the chosen tz (`Asia/Tokyo`), and the relative time. Visible cell text
should be in JST.
- Visit any page that uses `<TimestampInfo>` (Database > Backups,
Project Pause state, Edge Function details). Same tooltip should reflect
Asia/Tokyo.
- Refresh the page; timezone is still Asia/Tokyo.
- Reopen the picker, choose Auto detect; timestamps revert to browser
local.
- Run `pnpm --filter studio test lib/datetime.test.ts`. 17 tests should
pass.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Timezone selector added to the user menu with auto-detect and manual
override
* App-wide timezone provider and hooks plus a shared timezone catalog
for consistent timezone-aware display
* Timestamp components accept an optional timezone prop and respect user
preference (persisted)
* **Bug Fixes / Improvements**
* Logs and timestamp displays now use the new timezone formatting hooks
* **Tests**
* Added comprehensive datetime and timezone catalog tests
* **Telemetry**
* Telemetry event added for timezone picker interactions
<!-- 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 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.
## Context
Adds a banner on the auth policies page for the new RLS tester feature
preview
<img width="307" height="310" alt="image"
src="https://github.com/user-attachments/assets/6864c2cb-c3b8-4c1f-8dce-57411425e17d"
/>
Also adds a Give feedback button in the RLS Tester sheet footer
<img width="616" height="73" alt="image"
src="https://github.com/user-attachments/assets/64755f56-4e27-4b54-92b2-a894badc0b88"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* RLS Tester preview banner added to the policies page with animated
content and a locally persisted dismissed state.
* Enabling the RLS Tester via the preview also dismisses and records the
banner dismissal.
* New feedback link added to the RLS Tester UI that opens in a new tab.
* **Layout/Providers**
* Banner stack context moved so banner state is available more broadly
across the app.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Feature.
## What is the current behaviour?
Keyboard shortcuts can be discovered piecemeal through command palette
entries, tooltips, and preferences, but there is no universal shortcut
reference surface.
## What is the new behaviour?
Adds a global `Mod+/` shortcut and command palette action to open a
keyboard shortcuts reference sheet. The sheet renders registered
shortcuts grouped from general dashboard actions through navigation and
more specific surfaces.
| Preview |
| --- |
| <img width="820" height="928" alt="CleanShot 2026-04-24 at 11 27
51@2x"
src="https://github.com/user-attachments/assets/8ceb4a35-7adc-474b-8702-5c08a4219d25"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a comprehensive keyboard shortcuts reference sheet that displays
all available shortcuts organized into logical categories.
* New keyboard shortcut Mod+/ (Cmd+/ on Mac) opens the reference sheet
instantly from anywhere within the application.
* Shortcuts are displayed with their formatted keyboard combinations,
with multi-step sequences clearly separated for easy reference and
discovery.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This pull request migrates all SCSS stylesheets in the `apps/studio` and
`apps/docs` projects to CSS, updates import paths accordingly, and
consolidates PostCSS configuration to use a shared config. The migration
includes renaming files, updating import statements, converting SCSS
comments to CSS comments, and removing redundant or legacy configuration
files. The changes improve maintainability and consistency across the
codebase.
**Migration from SCSS to CSS:**
* All SCSS stylesheets in `apps/studio/styles` and `apps/docs/styles`
have been renamed to `.css`, and their contents updated by converting
SCSS comments (`// ...`) to CSS comments (`/* ... */`). All relevant
import statements in the app entry points have been updated to reference
the new `.css` files.
**PostCSS configuration consolidation:**
* The separate `postcss.config.cjs` files in `apps/design-system`,
`apps/learn`, and `apps/studio` now all import from a shared
`config/postcss.config`, ensuring consistent PostCSS setup across
projects. The legacy `postcss.config.js` in `apps/studio` has been
removed.
**Code and style consistency improvements:**
* All instances of the SCSS-specific `#{!important}` in Tailwind
`@apply` rules have been replaced with the standard CSS `!important`
syntax.
* Minor fixes and comment updates were made throughout the stylesheets
to improve readability and maintainability, such as moving or clarifying
TODOs and notes.
These changes streamline the styling approach, reduce build complexity,
and make it easier to maintain and scale the design system and
documentation styles.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Consolidated PostCSS configuration across apps
* Migrated many stylesheet imports from SCSS to CSS
* Standardized CSS comment and @apply syntax for consistency
* **Chores**
* Removed SCSS (sass) dev dependency
* Added autoprefixer and tailwindcss/nesting to PostCSS plugins
* Removed SCSS module type declarations (cleaned up typings)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
There was no way to trigger resource warning banners in the dev toolbar,
making it hard to test different warning states (warn/critical,
read-only mode) without manually mocking API responses or waiting for
real exhaustion events.
## Fix
- Adds an ExtraTab extension point to DevToolbar so Studio can inject
custom tabs without coupling the package to app-specific hooks
- Adds a ResourceWarningsTab in Studio with per-type off/warn/crit
toggles for disk IO, CPU, memory, disk space, and auth rate limit
warnings, plus a read-only mode toggle
- Auth rate limit only exposes warn (no crit) since critical is not a
valid API return value
- The tab component is dynamically imported so it stays out of
production bundles, controlled by the same NEXT_PUBLIC_ENVIRONMENT guard
used by the toolbar
## How to test
1. Run Studio locally or open a Vercel preview deployment
2. Open the browser console and run window.devTelemetry() to enable the
toolbar
3. Click the toolbar trigger to open the panel
4. Switch to the "Warnings" tab
5. Toggle any warning type to "Warn" or "Crit" and confirm the banner
appears at the top of the page
6. Toggle read-only mode on and confirm the read-only banner appears
7. Click "Reset to real data" and confirm banners return to their actual
state
8. Confirm the Auth Rate Limit row only has Off and Warn buttons (no
Crit)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* New "Warnings" tab in the developer toolbar (enabled in local and
staging) for managing resource warning banners.
* Per-resource severity overrides (Off / Warning / Critical) with
immediate preview in the toolbar.
* Local "read-only" toggle to simulate read-only mode.
* "Reset to real data" clears overrides, disables the local toggle, and
refreshes server state.
* Tab loads lazily and shows a disabled/loading state if org/project
context is unavailable.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## 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?
Some small styling brush ups and experimental for internal telemetry
tools.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Developer toolbar redesigned with compact event/flag lists, “Copy
JSON” per event, and a fixed draggable trigger that snaps and remembers
its position. Toolbar is now available in staging and local
environments.
* **Bug Fixes**
* ConfigCat readiness wait ensures flags load correctly.
* Feature flag loading made resilient so one provider’s failure won’t
block the other.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Sean Oliver <882952+seanoliver@users.noreply.github.com>
## 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
## What is the current behavior?
Studio uses `react-contexify` (an imperative, ID-based context menu
library) for right-click menus in the Table Editor grid, Log Table, and
Storage file explorer. This requires `createPortal` workarounds, a
separate CSS file, and has known bugs with fragment rendering.
## What is the new behavior?
All context menus now use the declarative `ContextMenu_Shadcn_`
(Radix-based) component that is already the standard across Studio. Each
context menu wraps its trigger element directly, removing the need for
imperative `show()` calls, portal hacks, and menu ID constants. The
`react-contexify` dependency and all associated styles are removed.
**Changes by area:**
- **Grid row context menu**: `RowRenderer` wraps each `<Row>` with
`ContextMenu_Shadcn_`. `RowContextMenu` refactored to accept `row`
directly as a prop instead of looking it up by index.
- **Log table**: Row renderer wraps each row with a context menu for
"Copy event message". Removes `cellPosition` state and `createPortal`.
- **Storage**: `FileExplorerRow` reuses its existing `rowOptions` array
for both the dropdown and context menu. `FileExplorerColumn` inlines the
column menu (new folder, select all, view/sort submenus). Three
standalone context menu files deleted.
- **Cleanup**: Removed `react-contexify` from `package.json`, deleted
`contextMenu.scss`, removed styles from `grid.scss`.
## Additional context
Net -370 lines. Follows the TODO comment in `CellContextMenuWrapper.tsx`
and the existing eslint ban on `react-contexify` imports.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Replaced legacy right-click menus with a unified shadcn-style context
menu across grids, logs, and the storage explorer.
* Simplified row/column/item context menu behavior and copy actions;
menus now mount and trigger more reliably.
* **New Features**
* Added row-level context menu providers to ensure consistent triggering
and positioning for row actions.
* **Chores**
* Removed legacy context-menu styles and deprecated menu components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
### Summary
This PR adds a dismissable modal that prompts paid org users to fill in
their billing address. We need billing addresses for tax compliance and
the existing banner hasn't been as effective (~10k orgs still missing).
The modal shows on page load when all of these are true:
- ConfigCat flag `enableBillingAddressModal` is on
- Org is on a paid plan (not free)
- Org does not have billing address set
- Org is not partner-managed
- User has BILLING_WRITE permission on stripe.customer
The modal can be dismissed via the close button, but re-opens on every
page navigation.
Once the user saves a valid address, the organizations query is
invalidated and organization_missing_address flips to false - the modal
stops appearing permanently.
<img width="1256" height="703" alt="Screenshot 2026-03-05 at 4 22 11 PM"
src="https://github.com/user-attachments/assets/57e7d1b8-b3b6-4366-ad23-60910a0defe8"
/>
### Testing
#### Automated Tests
I've added unit tests in this PR
#### Manual testing
Manual test cases:
- Free org - modal does not appear
- Partner-managed org - modal does not appear
- User with "developer role" modal does not appear
- Configcat Flag disabled - modal does not appear
- Dismiss modal, navigate to another page - modal re-opens
- Fill form and save - modal closes and does not reappear
- API failure loading billing data - shows error state with Retry button
---------
Co-authored-by: Ignacio Dobronich <ignacio@dobronich.com>
## Problem
We need a local-only UI to inspect client and server telemetry events
and override flags during development without touching non-local env
behavior. This work is intended to be shared across Studio, Docs, and
WWW.
## Changes
- Introduced a shared `dev-tools` package with the Dev Telemetry Toolbar
UI, trigger, and provider.
- Wired the toolbar into Studio, Docs, and WWW app shells (local-only
gating).
- Added a local-only `devTelemetry()` opt-in with storage gating and SSE
subscription.
- Wired client PostHog events into a local listener and re-exported
types.
- Added local flag override cookie support in the UI and CODEOWNERS for
the new package.
- Added unit tests covering local/non-local behavior and flag utilities.
## Testing
Manual (local only):
- Start each app locally: `pnpm dev:studio`, `pnpm dev:docs`, `pnpm
dev:www`
- Open the app, run `devTelemetry()` in the browser console
- Click around and confirm both client and server events appear (client
will be page views only)
- Verify feature flag overrides (PostHog + ConfigCat) persist and
restore correctly
- Confirm dismissing the toolbar clears local storage and hides the
trigger
Unblocked by https://github.com/supabase/platform/pull/29172
Resolves GROWTH-591
Demo:
[github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b](https://github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b)
Screenshots:
<img width="1368" height="972" alt="1"
src="https://github.com/user-attachments/assets/d2f20a0c-191f-4118-bb5e-15b25f5a54a9"
/>
<img width="1423" height="790" alt="2"
src="https://github.com/user-attachments/assets/115598e2-7287-49bf-9ed7-71ecc679dee3"
/>
<img width="1433" height="882" alt="3"
src="https://github.com/user-attachments/assets/51f666f2-9efc-410f-baec-378bdee9dbfe"
/>
<img width="608" height="483" alt="4"
src="https://github.com/user-attachments/assets/584d6cf5-1b2f-4cee-9e6a-d55ce2e3bae5"
/>
<img width="628" height="305" alt="5"
src="https://github.com/user-attachments/assets/991a9b39-578a-4565-b110-537a02040a53"
/>
<img width="659" height="447" alt="6"
src="https://github.com/user-attachments/assets/95ef405c-fffa-44af-bf6a-f974b780e3fc"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Developer Toolbar (local only): view client/server telemetry, inspect
events, and manage/override feature flags with persistent overrides,
filtering, and clear/reload.
* Client-side telemetry hooks: surface structured events to dev tooling
for realtime inspection.
* **Bug Fixes**
* Fixed end-of-file newline in shared code.
* **Chores**
* Added dev-tools package, integrated provider and trigger across
Studio, Docs, and marketing sites, and added CODEOWNERS entry.
* **Tests**
* Added comprehensive tests and test setup for the DevToolbar.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
* feat: add telemetry event for dashboard error
* feat: add tracking event to alert error component
* fix: remove warning type
* feat: add error tracker for toasts too
* fix: remove message prop from event
* chore: remove unused dep in useeffect
* chore: further tidy up
* fix: useeffect separate component
* fix: use pams suggested verb
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
## Summary of changes
Buckets policies page at /project/_/storage/files/policies now uses the
paginated buckets endpoint to fetch buckets.
## Before
Used a non-paginated query.
## After
To support a paginated query, we now have:
- Infinite scroll loading behavior
- Fixed some of the buckets utilities to account for policy references
to buckets that haven't loaded yet
* Bump the deps, refactor deprecated code.
* Migrate keepPreviousData usage.
* Migrate all uses of InfiniteQuery.
* Fix refetchInterval in queries.
* Migrate all use of isLoading to isPending in mutations.
* Fix accessing location in claim-project.
* Fix a bug in duplicate query keys.
* Migrate all queries to use isPending.
* Revert "Fix accessing location in claim-project."
This reverts commit 2a07df64b5.
* Revert the rss.xml file to master.
This change adds a <link rel="preconnect"> for our API domain. Because the application makes several client-side requests to https://api.supabase.com shortly after page load, the browser currently has to perform DNS lookup, TCP handshake, and TLS negotiation only when the first API call happens.
By preconnecting, we let the browser complete these expensive operations ahead of time, in parallel with page rendering. This reduces the latency of the first API request and improves overall perceived performance, especially for users on slower networks or with high latency to the API host.
* fix: update application name in manifest and include manifest in studio router
* fix: change display mode to minimal-ui in manifest for refresh and back button
* fix: update display settings in manifest to use display_override for minimal-ui
* Update short_name in manifest.json to 'Supabase'
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
* chore: update react-day-picker
* fix(design system): date picker demos
* refactor(date picker): change logs date picker to use react-day-picker
* refactor(date pickers): change remaining date pickers to use react-day-picker
* cleanup(date pickers): minor code cleanup
* fix(date picker): fix behavior for single day selection
Monica Khoury
