## Context
PR here mainly breaks up the files under `ConnectSheet` to separate the
functional logic so that we can write unit tests.
No behavior changes intended beyond the bug fixes
## Changes involved
- **Test organization:** moved all root-level `ConnectSheet` test files
into `ConnectSheet/__tests__/` for consistency with other parts of the
codebase that use this convention.
- **Bug fix:** read replica label had a stray `}` / missing `)`,
rendering as e.g. `Read Replica (us-east-1 - abc123})` instead of `Read
Replica (us-east-1 - abc123)`.
- **`ConnectSheet.tsx`:** extracted the "hydrate sheet state on open"
`useEffect` logic (mode/field/URL param resolution from URL vs.
localStorage) into a new `ConnectSheet.utils.ts`, with unit tests
- **`useConnectServerEnv.ts`:** fixed two race conditions in the secret
reveal/hide flow:
- `toggle()` and `getValue()` could each fire a separate reveal request
if triggered close together — now deduped to share one in-flight
request.
- `getValue()` could hide a secret that had just been explicitly
revealed by a concurrent `toggle()`, due to reading a stale closure
value — now reads the live state via `useLatest`.
- Also stopped swallowing the original error on reveal failure (now
attached via `cause`).
- Added tests for the above, plus the 10s auto-hide timer (previously
untested).
- **`ConnectStepsSection.tsx`:** extracted `resolveContentPath` and the
three inline "show notice" booleans (IPv4 addon, session pooler,
self-hosted MCP) into `ConnectStepsSection.utils.ts`, matching the
existing pattern for the Data API notice. Added unit tests for all of
them.
## To test
- [ ] Just a basic smoke test of the Connect sheet should do
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Improved connect setup hydration so saved preferences and URL values
are applied more consistently when opening the sheet, including
automatic URL backfilling where needed.
* Refreshed connection guidance notices (IPv4 add-on, session pooler,
and self-hosted MCP) with more consistent logic.
* **Bug Fixes**
* Fixed secret reveal behavior to keep concurrent reveal actions in
sync, handle failures more safely, and ensure auto-hide works reliably.
* Corrected the read-replica option label formatting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Feature. Resolves DEPR-599.
## What is the current behavior?
When the Data API is disabled (PostgREST has no exposed schemas), the
Connect sheet still shows client-library setup steps for Framework and
MCP modes without indicating that database queries will fail.
## What is the new behavior?
When database access via the Connect instructions requires PostgREST, an
inline warning appears above the steps (setup instructions remain
visible):
- **Framework**: warns when Data API is off; install, env vars, and
auth/SSR setup still work
- **MCP**: warns only when Database tools apply (selected explicitly, or
by default when no feature filter is set)
The warning fails open if PostgREST config cannot be loaded, and links
to Data API settings via an "Enable Data API" CTA.
| After |
| --- |
| <img width="1664" height="718" alt="CleanShot 2026-07-02 at 21 29
16@2x"
src="https://github.com/user-attachments/assets/80d21927-c4dd-4158-8946-bf648b95e451"
/>|
## Additional context
- Gating logic lives in `ConnectStepsSection.utils.ts` with unit tests
- Out of scope: warning when Data API is on but zero tables/schemas are
exposed
- Coexists with the upcoming warehouse branch's catalog warning — that
lives in a separate `WarehouseCatalogPanel` for `catalog` mode only
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Connection setup now checks Data API enablement and conditionally
shows a “Data API disabled” warning, including an action to open Data
API settings.
* **Bug Fixes**
* Warning logic now more accurately reflects the selected connection
mode and chosen feature/tool selections.
* **Tests**
* Added a focused test suite covering the Data API configuration
decision rules and when the warning should appear.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Now that we migrated all usages of the deprecated `Tabs` component, we
don't need the `_Shadcn_` suffix anymore.
## Solution
Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR
does, no visual nor functional changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Standardized tab components across the app so pages and dialogs now
use the same consistent tab UI.
* Improved tab-based views in design, docs, studio, learn, and website
experiences for a more uniform interface.
* **Chores**
* Updated shared UI exports to expose tab components directly,
simplifying future usage across the product.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Users who set a database password with special characters (\`@\`, \`#\`,
\`%\`, \`+\`, etc.) get no warning that it must be percent-encoded when
used in a connection URL, which leads to confusing connection failures
([FE-3379](https://linear.app/supabase/issue/FE-3379)).
<img width="700" height="200" alt="Screenshot 2026-07-03 at 6 26 43 PM"
src="https://github.com/user-attachments/assets/48608d65-8057-4abe-96fc-c0ede3550951"
/>
<img width="1002" height="395" alt="Screenshot 2026-07-03 at 6 27 14 PM"
src="https://github.com/user-attachments/assets/1366b985-7d80-4e7d-97f0-c79d5c84cefd"
/>
<img width="548" height="303" alt="Screenshot 2026-07-03 at 6 27 26 PM"
src="https://github.com/user-attachments/assets/b042101a-0e88-4730-adb8-1b490018f208"
/>
**Changed:**
- `PasswordStrengthBar` now shows a warning-colored callout (with a docs
link) whenever the entered password contains characters that need
percent-encoding — this covers project creation, reset database
password, restore-to-new-project, and the Vercel deploy-button flow
- Replaced `DATABASE_PASSWORD_REGEX` (only caught `@`, `:`, `/`) with a
`passwordNeedsPercentEncoding()` helper based on `encodeURIComponent`,
so `#`, `%`, `+`, `?`, `&`, spaces etc. are caught too
- Moved `SpecialSymbolsCallout` from `ProjectCreation/` to
`components/ui/` since it's now shared
**Added:**
- Info admonition in the Connect sheet next to connection strings that
still contain `[YOUR-PASSWORD]` (direct connection + `.env`-based file
setups; hidden for psql and .NET where percent-encoding doesn't apply,
and after a password reset since the substituted password is already
encoded)
## To test
- Project creation → type a password containing \`#\` or \`@\` → warning
callout appears above the strength bar; disappears for alphanumeric
passwords
- Database Settings → Reset database password → same behaviour
- Connect sheet → Direct connection → note shows under the connection
string for URI/JDBC types, not for psql; after resetting the password
from the sheet, the note disappears (password is substituted already
encoded)
- Connect sheet → Node.js/Python/Go/SQLAlchemy file setups show the
note; .NET does not
- \`pnpm vitest run lib/password-strength.test.ts\` passes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
* **New Features**
* Added a dedicated password encoding note (with documentation link) on
direct connection screens when the password is embedded in a URL.
* Added an encoding hint to the password strength area when
percent-encoding is required.
* **Bug Fixes**
* Removed regex-based “invalid password” callout and replaced it with
safer percent-encoding detection logic.
* **Tests**
* Added test coverage for `passwordNeedsPercentEncoding`.
* Removed obsolete Project Creation password regex tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
**Stack 5.1/6** of the TanStack Start migration (#46424). The original
S5 (174 files) was over CodeRabbit's 150-file review cap, so it's split
into 5.1 + 5.2 by product. Stacked on **#47113** (S4).
> [!NOTE]
> Thin route wrappers rendering the existing pages-router components via
compat shims. Next-safe (full Next build run). The TanStack app isn't
functional end-to-end until 5.2 + the matrix flip.
## What's in this PR
- **Data-cluster project routes:** database, editor, sql, storage,
realtime, branches.
- **Top-level / onboarding routes:** `authorize`, `join`, `logout`,
`redeem`, `verify-email`, `claim-project`, aws-marketplace,
Vercel/GitHub integration entrypoints; `_app`/`_auth` layout shells;
`/org/_` + `/project/_` catch-alls.
- **Supporting edits:** hoist `BranchesPageWrapper` out of `getLayout`,
`ConnectStepsSection` `import.meta.glob`, `api/server.js`.
- `routeTree.gen.ts` regenerated for the routes present so far.
## Verification
On top of S1–S4: `studio` typecheck ✓, lint (0 errors) ✓, **Next build ✓
(181/181 pages)**.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Restructured application routing infrastructure for improved code
organization and maintainability.
* Extracted and refactored layout wrapper components for enhanced
reusability across different sections of the application.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## 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
There's still more unused code in the repository which slows down
everything:
- checkouts
- tooling
- probably builds (not sure how good turbopack is at handling this)
## Solution
- remove old unused code
- remove more recent code after checking git history to ensure it's not
unfinished/ongoing work
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Removed several unused interface, onboarding, and helper components
from the studio app.
* Cleaned up outdated branching, integrations, query performance,
support, and table/grid UI elements.
* Removed a few unused utility hooks and key-mapping logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- closes https://github.com/supabase/supabase/issues/47221
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Added permission-based access control for copying API keys and
environment variables. Users without the appropriate permissions will no
longer be able to copy sensitive values through the copy buttons.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Ali Waseem <waseema393@gmail.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?
Introduced a new library called Superbase/Server. To help developers
using third party API frameworks, we want to make it easier than ever to
install and use as needed.
- One click copy
- Custom prompt to get started
- Validated API key permissions to ensure we don't leak secrets to other
users in your org/project
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## New Features
- Added a **Server** connection mode end-to-end, including mode-specific
prompting and steps for installing **`@supabase/server`** and setting
required variables.
- Added a server **.env** panel with per-variable copy, **“Copy all
variables”**, and permission-aware secret reveal/copy.
## Improvements
- Updated connection UI layouts (mode selector grid and conditional
config section).
- Improved prompt copying to use mode-specific prompt text when
available.
## Tests
- Added UI tests for server env rendering, secret reveal/copy,
**copy-all** behavior, and permission-restricted scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- closes https://github.com/supabase/supabase/issues/47023
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Modified how connection strings are generated for psql database
connections when temporary passwords are in use. Psql connections now
return a redacted connection string format instead of directly embedding
the temporary credentials in the connection command itself. Other
connection types continue using standard password-inclusive connection
strings to maintain full compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Makes it possible to reset password from the connect sheet. Once reset
the password is shown temporarily in the connection string for copy. The
copy prompt action does not copy the password.
<img width="1043" height="953" alt="image"
src="https://github.com/user-attachments/assets/fe1a33bb-839f-47e3-b07f-7a5fa1df2b8d"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Session Pooler notice for direct connections on IPv4 networks
* Option to show a temporary database password during direct-connection
setup
* **Improvements**
* New password reset dialog with strength checks and generation
* Connection-copy behavior now redacts temporary passwords and produces
cleaner copy prompts
* **Tests**
* Added tests covering connection-string password insertion/replacement
and copy-prompt behavior
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
- API may return a non-array shape that can crash `getKeys` because of
an hard coded cast
- getting API keys is cumbersome as consumers have to call two functions
## Solution
- consolidate `useAPIKeysQuery` + `getKeys` into a single `useAPIKeys`
hook
- guard `getKeys` so that it doesn't crash if passed a non array value
- update usages
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Unified how project API keys are retrieved across the studio,
resulting in more consistent loading/error handling and slight
responsiveness improvements when showing keys and related command
snippets. UI and permissions behavior remain unchanged for end users.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes DOCS-651
## 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?
This adds a non-null assertion to a Supabase method that expects
non-null.
Additionally, it updates a label from 'Remix' to 'React Router'.
## What is the current behavior?
Two issues:
- Following the Auth client steps with React Router creates a
`deprecation` error and downstream Typescript errors.
- 'Remix' is renamed to 'React Router'.
> Remix and React Router are the same thing, made by the same people.
Remix was simply renamed React Router Framework Mode starting in version
7 of React Router.
- [Blog
Source](https://reacttraining.com/blog/remix-vs-react-router-framework)
<img width="894" height="754" alt="Screenshot 2026-06-04 at 4 00 45 PM"
src="https://github.com/user-attachments/assets/33dc5d89-4a76-44b6-a5c3-39a30dca3b57"
/>
<img width="604" height="464" alt="Screenshot 2026-06-05 at 11 21 54 AM"
src="https://github.com/user-attachments/assets/10ea458f-22e5-498c-b43a-df13f7902a17"
/>
## What is the new behavior?
- Adding a non-null assertion clears up all error. Running the
application does not produce errors.
- Changing the label from "Remix" to "React Router" updates the dropdown
name to match the rebrand. Now, it does not look outdated and matches
the docs.
<img width="609" height="519" alt="Screenshot 2026-06-05 at 11 22 48 AM"
src="https://github.com/user-attachments/assets/c18ee5b7-4693-40c9-9c20-8f95756c8298"
/>
## Additional context
The task was to clarify our documentation on this page: [Create a
Client](https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=react-router&queryGroups=environment&environment=react-router-loader#create-a-client)
However, the code sample in the docs is correct; the documentation in
**Dashboard** produced the errors.
## Future improvements
- To make this more robust, the code could have a single source of
truth.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Clarified generated Supabase server client template text to improve
type/reference safety in the Remix integration guide.
* **UI**
* Renamed framework label from "Remix" to "React Router" across the
Connect interfaces for clearer framework identification.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Miranda Limonczenko <mirandalimonczenko@Mirandas-MacBook-Pro.local>
## Context
As per PR title - persists the opened state of the connect sheet into
local storage so re-opening it again will have the same parameters
chosen
## To test
- [ ] Verify that the persisting of the opened state of the connect
sheet works
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Connect Sheet now saves user preferences so selections persist across
sessions.
* **Improvements**
* Better synchronization between the UI and the URL for more consistent
state when opening or sharing links.
* Clearing selections reliably removes all relevant filters.
* **Refactor**
* Internal state handling simplified for more predictable mode and field
changes.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46213?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
Two surfaces were showing invalid Codex config keys that don't exist in
Codex's schema (which uses `additionalProperties: false`), causing
validation errors for users who followed the setup steps.
- **Studio Connect Sheet** (`connect.schema.ts`): removes the "Enable
remote MCP client support" step, which told users to add
`[mcp]\nremote_mcp_client_enabled = true` to `~/.codex/config.toml`.
Deletes the dead content component and updates tests.
- **Docs MCP panel** (`ui-patterns/McpUrlBuilder/constants.tsx`):
removes the `[features]\nrmcp_client = true` config block from the Codex
`alternateInstructions`. Keeps the valid authenticate (`codex mcp login
supabase`) and verify (`/mcp`) steps.
Closes
[AI-548](https://linear.app/supabase/issue/AI-548/bug-studio-mcp-connect-flow-shows-invalid-codex-config-guidance)
Fixes#43893
## Root cause
Both invalid keys were introduced in #42374 (Feb 2026). A full search
through the [`openai/codex`](https://github.com/openai/codex) git
history confirms neither `remote_mcp_client_enabled` nor `rmcp_client`
ever existed in any version of the codebase (neither the TypeScript CLI
nor the Rust rewrite).
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## What kind of change does this PR introduce?
Feature, docs update.
- Resolves FE-3419
- First pass for DEPR-578
## What is the current behaviour?
The Connect sheet can be opened from visible UI and command-menu
actions, but it does not have a direct keyboard shortcut. Studio also
has shortcut conventions in code, but limited agent-facing review
guidance for contributors adding or touching Studio UI.
## What is the new behaviour?
FE-3419:
- Adds `O then C` to open the Connect sheet for active healthy projects.
- Mounts the shortcut from the always-rendered Connect sheet, so it
works without first opening the lazy command menu.
- Surfaces the shortcut on the Connect button tooltip, in the shortcuts
reference sheet, and on the Connect command-menu action.
- Forces the tooltip closed while the sheet is open so Escape closes the
sheet without also driving tooltip state.
- Tracks keyboard shortcut opens with the existing Connect sheet
telemetry event.
- Moves single-item AI Assistant and Inline Editor shortcuts to the
_Global Actions_ section in the cheatsheet.
DEPR-578:
- Adds a short Studio shortcut convention to `.claude/CLAUDE.md`.
- Adds scoped Copilot review guidance for Studio shortcut coverage,
discovery, and collision checks.
- Points the guidance back to the existing shortcut registry,
`useShortcut`, `Shortcut`, and `ShortcutTooltip` implementation context.
| After |
| --- |
| <img width="1576" height="188" alt="CleanShot 2026-05-21 at 11 30
40@2x"
src="https://github.com/user-attachments/assets/ba9d68c8-27ea-4c89-8016-d95d5bcea3ea"
/> |
| <img width="830" height="364" alt="CleanShot 2026-05-21 at 11 48
51@2x-FC627CB5-4A1C-49E2-B748-8AF0A3EBD7BC"
src="https://github.com/user-attachments/assets/d6aa52c1-56b2-4731-8e6b-088e29da43ed"
/> |
Validation:
- `pnpm --dir apps/studio exec vitest --run
components/ui/GlobalShortcuts/ShortcutsReferenceSheet.test.tsx
components/interfaces/ConnectButton/Connect.Commands.test.tsx
components/interfaces/ConnectSheet/useConnectSheetShortcut.test.ts`
- `git diff --check`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Keyboard shortcut to open the Connect sheet from anywhere; Connect
button displays the shortcut and is enabled only for eligible projects.
* New "Global Actions" group in the shortcuts reference including AI
Assistant, Inline Editor, and Connect.
* **Documentation**
* Added Studio keyboard-shortcuts guidance and linked it in project
instructions.
* **Tests**
* Added tests covering connect shortcut behavior and command
registration.
* **Telemetry**
* Connect-sheet open events now record keyboard shortcut as a source.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46185?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: Ali Waseem <waseema393@gmail.com>
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Command` components
## Solution
- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?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 -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Select` components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We have multiple Popover components
## Solution
- [x] migrate Popover usages to Shadcn components
- Migrated JSON and text editor in the `TableEditor` (inline row
edition)
- Migrated the template popover in the logs explorer templates page
- [x] remove `_Shadcn_` suffix from Popover components (renaming +
prettier)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Unified popover implementation across the app and design system;
dropdowns, calendars, menus and tooltips now use a consistent popover
API with no visual or interaction changes.
* **Chores**
* Minor prop typing update for the logs date-picker to align with the
consolidated popover content type.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Adds an admonition in the Connect sheet to inform users about the IPv4
addon if direct connection is selected and project doesn't have the IPv4
addon
Decided to place it below the copy prompt CTA since it's technically a
secondary action (users with IPv6 networks wouldn't need this)
<img width="755" height="707" alt="image"
src="https://github.com/user-attachments/assets/f1d29a56-db5f-4807-9545-a862434fea8f"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Displays contextual guidance in direct connection mode when the IPv4
add-on is not enabled, including quick-access links to configure IPv4
settings and to open IPv4 documentation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
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.
## 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?
It makes the connect modal responsive to other non JS frameworks
selection.
## What is the current behavior?
Modal is stuck when non JS is selected.
Closes#44985
## What is the new behavior?
It's now responsive:
<img width="999" height="848" alt="Screenshot 2026-04-17 at 18 40 47"
src="https://github.com/user-attachments/assets/e00449df-207a-401a-9e25-01944489de9c"
/>
<img width="976" height="959" alt="Screenshot 2026-04-17 at 18 40 59"
src="https://github.com/user-attachments/assets/e5fcee6b-7f5e-4edb-8a00-629965026493"
/>
## Additional context
Add any other context or screenshots.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Internal optimization to the framework library resolution logic with
no visible user-facing changes.
<!-- 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?
Supabase Dashboard - Connect
## What is the current behavior?
On the new `<ConnectSheet />` component their is no deep linking like
the previous `<Connect />` component
## What is the new behavior?
Deep linking added onto framework and other options, Example local
links:
http://localhost:8082/project/default?showConnect=true&connectTab=framework&framework=nextjs&using=pageshttp://localhost:8082/project/default?showConnect=true&connectTab=mcp&mcpClient=goose
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Connect Sheet supports URL query parameters for pre-configuring
connection settings (framework, using, method, type, mcpClient).
* Legacy tab identifiers are accepted for compatibility.
* **Improvements**
* Opening, switching, and closing the Connect Sheet now more reliably
syncs and clears related parameters to avoid stale state.
* **Tests**
* Added end-to-end tests covering deep-linking, legacy aliases, and
parameter clearing on close/mode change.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Simplify the Connect modal for Multigres/High Availability projects.
Pooling is always on for these projects, so the connection method
distinction doesn't apply.
**Removed:**
- Connection Method selector (Direct/Transaction/Session) for HA
projects
- IPv4 add-on panel for HA projects
- Pooler badge (Shared/Dedicated) for HA projects
**Changed:**
- "Type" label renamed to "Connection Type" for HA projects
- Default connection method set to `transaction` (instead of `direct`)
for HA projects
Non-HA projects are completely unaffected.
## To test
- Open Connect sheet → Direct tab on a **non-HA project** — verify
everything looks the same as before
- Open Connect sheet → Direct tab on an **HA project** — verify:
- No Connection Method radio selector
- Label reads "Connection Type" instead of "Type"
- No IPv4 status panel
- No pooler badge
- Connection string displays correctly
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Connection UI now adapts for high-availability projects: hides pooler
options and IPv4 status, and updates the connection type label for
clarity.
* **Tests**
* Added tests covering connection configuration behavior when a project
is high-availability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Summary
Removes `_DEFAULT` from the publishable key env var name across all
Connect and ConnectSheet framework content, so that e.g.
`NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY` becomes
`NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY`. This matches the docs and sample
apps.
### Connect
- Next.js (App Router)
- Next.js (Pages Router)
- React (Create React App)
- React (Vite)
- Remix
- SolidJS
- SvelteKit
### ConnectSheet
- Next.js (App Router)
- Next.js (Pages Router)
- React (Create React App)
- React (Vite)
- Remix
- SolidJS
- SvelteKit
- Vue.js
- shadcn env step
Resolves FE-2934
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Standardized environment variable names in generated connection/setup
instructions: when a publishable key is present the templates now
reference the publishable env var (e.g.,
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, VITE_SUPABASE_PUBLISHABLE_KEY,
REACT_APP_SUPABASE_PUBLISHABLE_KEY, etc.) with unchanged anon-key
fallback behavior.
* Updated cURL/tab placeholders to reflect the new publishable-key
identifier when hiding keys.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
The Connect Sheet install step only listed `@supabase/supabase-js`, but
the generated code for Next.js (app router) and Remix imports from
`@supabase/ssr` – so users following the steps immediately hit import
errors.
**Added:**
- `EXTRA_PACKAGES` map in `connect.schema.ts` – frameworks declare
additional packages on top of the base library install, keyed by
`framework/variant` for granularity (e.g. `nextjs/app` gets
`@supabase/ssr`, `nextjs/pages` does not)
- Install content component appends extras automatically
- Step title pluralises to "Install packages" when extras are present
- Tests for extra packages, variant-specific install commands, and step
titles
**Changed:**
- Next.js steps now branch on `frameworkVariant` so app router and pages
router can have different install steps
- Remix gets an explicit entry in the step tree (previously fell through
to DEFAULT)
## To test
- Open Connect Sheet → Framework → Next.js → App Router
- Install step should say "Install packages" and show `npm install
@supabase/supabase-js @supabase/ssr`
- Switch to Pages Router
- Install step should say "Install package" and show `npm install
@supabase/supabase-js`
- Switch to Remix
- Install step should say "Install packages" and show `npm install
@supabase/supabase-js @supabase/ssr`
- Other frameworks (Vue, SvelteKit, etc.) should be unchanged
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Enhanced package installation guidance to include framework-specific
additional packages (e.g., @supabase/ssr for Next.js App Router and
Remix).
* Installation step labels now accurately reflect the number of packages
being installed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Follow-up to #44471. Fixes Sentry error: `can't access property
"ipv4SupportedForDedicatedPooler", g is undefined`.
`connectionStringPooler` can be `undefined` when the databases query
hasn't resolved yet (returns `[]` by default, so the lookup object is
empty). Added optional chaining + explicit typing.
## To test
- Open the connect sheet on any project — should render without errors
- Check that IPv4 status panel still displays correctly once loaded
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Improved type safety and robustness in connection pooler configuration
handling for more reliable IPv4 capability detection.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
<img width="996" height="424" alt="image"
src="https://github.com/user-attachments/assets/f0a0620b-c7e1-4391-a065-51c95fee1186"
/>
Updates the new ConnectSheet direct connection logic to better handle
plan and add-on status.
To test view the connect sheet with:
- A free org
- A paid org
- A paid org with the ip4 add-on enabled
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* IPv4 connection status panel with icons, badges, contextual links and
collapsible details about IPv4 limitations and pooler alternatives
* Pooler-type badges reflecting entitlement-based availability and
clearer connection compatibility messaging with direct links to relevant
settings
* **Tests**
* Added coverage for entitlement-dependent pooler behavior
* **Style**
* Simplified admonition header and improved formatting of copied step
text
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.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
Fixes several high-impact Sentry errors reported in production.
### Fixed Issues
- **[SUPABASE-APP-EJ3](https://supabase.sentry.io/issues/7356937474/)**
— `TypeError: Cannot read properties of undefined (reading 'direct')`.
`connectionStringPooler` could be `undefined` when the connection source
doesn't match any key in the connection strings map. Added an early
return guard in `resolveConnectionString`.
- **[SUPABASE-APP-B17](https://supabase.sentry.io/issues/7117468199/)**
— `RangeError: Invalid time zone specified: Etc/Unknown`.
`dayjs.tz.guess()` returns `"Etc/Unknown"` for some users with
misconfigured browser/OS timezones. Added a shared
`guessLocalTimezone()` helper that validates the guessed timezone via
`Intl.DateTimeFormat` and falls back to UTC. Applied across all 4 call
sites.
- **[SUPABASE-APP-BCM](https://supabase.sentry.io/issues/7192934901/)**
— `TypeError: Cannot convert undefined or null to object`.
`Object.entries(definition.properties)` crashed when a JSON schema
definition existed but had no `properties` field. Updated the guard to
check `definition?.properties` instead of just `definition`.
- https://supabase.sentry.io/issues/7357780302/?project=5459134
- https://supabase.sentry.io/issues/7358344652/?project=5459134
- https://supabase.sentry.io/issues/7096737077/?project=5459134
## Test plan
- [ ] Verify connect dialog renders without errors when connection data
is still loading
- [ ] Verify API docs Entity view handles schema definitions without
properties
- [ ] Verify charts/tooltips display correct timezone labels
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Context
Adds a "source" param in the new Connect sheet to allow selecting read
replicas - this was present in the old Connect dialog
<img width="962" height="713" alt="image"
src="https://github.com/user-attachments/assets/3c805e41-e8df-431b-83d0-e5f227d68475"
/>
Selecting sources will update the connect steps at the bottom -
connection string, host etc
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
Chore
## What is the current behavior?
- We use the MCP client connect dialog in two places: Studio and Docs
- We duplicate image assets for each client in each of those two places
## What is the new behavior?
- Centralised assets
- Consolidation and simplification as a result of it all being a single
source-of-truth now
## To test
- [ ] Everything works as it did before across both Studio and
[Docs](https://supabase.com/docs/guides/getting-started/mcp)
- [ ] All MCP client images load as expected
## Summary
Re-ports PR #43119 against the current `ProjectHome` codebase (the
original PR targeted `HomeNew/` which was removed during the `homeNew`
graduation in #43437). Also unifies the `connectSheet` and
`connectSection` feature flags into a single `connectSection` flag — the
`connectSheet` flag is removed entirely, so both the ConnectSheet
(header) and ConnectSection (homepage row) are controlled by one
experiment.
- Adds `connectSection` PostHog experiment flag that controls two
things:
1. Swaps the Getting Started section for a Connect section on the
project homepage for new projects (< 10 days old)
2. Swaps the legacy Connect dialog for the new ConnectSheet panel in the
header
- **Control** (`getting-started`): existing Getting Started section +
legacy Connect dialog in header
- **Treatment** (`connect`): new 4-tile Connect section + ConnectSheet
in header
- `undefined` (loading): neither section renders, avoiding flash
- Tiles filtered by the same `useIsFeatureEnabled` flags as ConnectSheet
(`show_app_frameworks`, `show_mobile_frameworks`, `show_orms`)
- Connect tile clicks tracked via `home_connect_action_clicked`; section
render tracked via `home_connect_section_exposed`; sheet opens tracked
via `connect_sheet_opened` with source attribution (`header_button` or
`connect_section`)
## Changes
- `packages/common/telemetry-constants.ts` — new
`home_connect_section_exposed`, `home_connect_action_clicked`, and
`connect_sheet_opened` event types
- `ConnectSheet/ConnectSheet.tsx` — read `connectTab` query param and
sync to active mode on open; `handleModeChange` keeps param in sync on
tab switch; fire `connect_sheet_opened` event with source attribution on
open
- `ConnectButton/ConnectButton.tsx` — set `connectSource=header_button`
query param on click
- `ProjectHome/ConnectSection.tsx` — new component (4-tile connect
card); set `connectSource=connect_section` on tile click
- `ProjectHome/Home.tsx` — experiment flag wiring
- `LayoutHeader/LayoutHeader.tsx` — read `connectSection` flag instead
of `connectSheet` to toggle ConnectSheet vs legacy Connect dialog
## Test plan
To test on the Vercel preview, set `connectSection=connect` to 100% in
PostHog (or override via cookie `ph_override_connectSection=connect`).
No separate `connectSheet` flag is needed — `connectSection` controls
both features.
- [x] Treatment (`connect` variant) — "Get connected" section renders on
new project, Getting Started hidden
- [x] Control (`getting-started`) — Getting Started renders, Connect
section hidden
- [x] Mature project (> 10 days) — neither section regardless of flag
- [x] Clicking each tile opens ConnectSheet on the correct tab
(Framework / Direct / ORM / MCP)
- [x] Switching tabs inside sheet updates `connectTab` URL param
- [x] Closing sheet clears `connectTab` param
- [x] Direct URL deep-link (`?showConnect=true&connectTab=orm`) opens
sheet on correct tab
- [x] Dark mode — background gradient renders correctly
- [x] Light mode — background switches to light gradient
- [x] Responsive layout — 4 cols (xl), 2×2 (md), stacked (mobile)
- [x] Telemetry — `home_connect_section_exposed` fires once on load;
`home_connect_action_clicked` fires with correct `mode`
- [x] Treatment — header Connect button opens ConnectSheet (not legacy
Connect dialog)
- [x] Control — header Connect button opens legacy Connect dialog (not
ConnectSheet)
- [x] Telemetry — clicking a ConnectSection tile fires
`connect_sheet_opened` with `source: 'connect_section'`
- [x] Telemetry — clicking header Connect button fires
`connect_sheet_opened` with `source: 'header_button'`
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
Adds the new `dedicated_pooler` entitlement and it's respective
entitlement checks in the following components: `ConnectTabContent`,
`ConnectStepsSection`, `LogsSidebarMenuV2` and `ConnectionPooling`
## Testing
### ConnectTabContent and ConnectStepsSection
- Head to `project/_?showConnect=true` with an Org on the Pro Plan or
above
- Assert that the `Dedicated Pooler` option is available.
<img width="1007" height="641" alt="image"
src="https://github.com/user-attachments/assets/b4891544-b84b-4745-9e25-4cbc7c76686c"
/>
### IPv4SidePanel
- Head to `/project/_/database/settings` with an Org on the Pro Plan and
above and assert that the Dedicated Pooler is available
<img width="889" height="562" alt="image"
src="https://github.com/user-attachments/assets/3150cb3d-18e9-4b34-bc9b-2589d0a33c5f"
/>
### Dedicated Pooler Logs
- Head to `/project/_/logs/dedicated-pooler-logs` with an Org on the Pro
Plan and assert that you are in the `dedicated-poolers-logs` page.
- Head to `/project/_/logs/dedicated-pooler-logs` with an Org on the
Free Plan and assert that you are redirected to `/logs/pooler-logs`
### Logs Sidebar
- Head to `/project/jdvjfujajfyywbaaakje/logs/explorer` with an Org on
the Free Plan
- Assert that only the "Poolers" collection is shown
- Head to `/project/jdvjfujajfyywbaaakje/logs/explorer` with an Org on
the Pro Plan
- Assert that the Dedicated and Shared Poolers collections are shown
<img width="251" height="774" alt="image"
src="https://github.com/user-attachments/assets/747bceee-d5e7-4a8f-911d-6b02cdb115eb"
/>
## Context
Main fix is to adjust the new home page + connect dialog (and connect
sheet) to render the project's custom domain if available
<img width="471" height="255" alt="image"
src="https://github.com/user-attachments/assets/3a208b2e-bdeb-43f5-a2e7-3495881dbaaa"
/>
<img width="1065" height="233" alt="image"
src="https://github.com/user-attachments/assets/2a7b8f81-8c0b-4803-bf0a-fc16a2f1e0e1"
/>
## Changes involved
- Created a `useProjectApiUrl` hook that will return the API URL
depending if custom domains is available, otherwise default to default
project API URL
- Refactored all the other places that were manually deriving the
project's endpoint
- Storage Explorer -> copy URL
- Edge Functions
- Integrations -> Data API + API Docs
- Auth Providers -> Callback URL
- Also updated the copy CTA for the addons page
- Instead of just "Change xxx", make it a bit more actionable
- For add ons with binary states (Custom domains, IPv4)
- If not enabled yet, "Enable xxx", otherwise "Toggle xxx"
- For PITR
- If not enabled yet, "Enable PITR", otherwise "Change recovery
duration"
- Also added "Edit custom domain" CTA if enabled
<img width="1144" height="518" alt="image"
src="https://github.com/user-attachments/assets/4f152ea5-0cc7-412c-95e8-ad5bb37c19c3"
/>
## To test
- [ ] Verify that for a project with custom domain set up, all the
affected UI mentioned in the above section look correct
<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>
This is the third and final PR to complete the new connect sheet.
First: https://github.com/supabase/supabase/pull/42367
Second: https://github.com/supabase/supabase/pull/42373
This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.
To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs
* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates
* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors
* **Chores**
* ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This is part two of a [PR
breakdown](https://github.com/supabase/supabase/pull/42276) that
introduces our connect schema and how content is retrieved. This focuses
on the Framework tab to start.
Fields are generated and content is rendered using a connect.schema
file. This schema file defines modes, fields and steps. Each mode has a
set of fields. Each field can be dependent on another field. The steps
generated are then based off the values of the modes and fields. Each
step can also render varying content dynamically using a template
{{framework}}/{{frameworkVariant}}/{{library}} which just replaces those
values with what's in state (fields selected).
[Part one needs to be merged
first.](https://github.com/supabase/supabase/pull/42367)
The next stage will add back all other tabs and content.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* New Connect Sheet UI to guide app-to-project connections with dynamic
configuration and copyable connection parameters.
* Multi-framework & mobile support with ready-to-use code examples,
install commands, and step-by-step setup for 20+ frameworks.
* Multiple PostgreSQL connection methods (direct, transaction, session)
with safe/masked connection previews.
* Copy-prompt that aggregates step content and code for easy sharing.
* **UI**
* Multi-file code viewer with tabbed code blocks and added syntax
support (Swift, TOML, HTML).
* **Tests**
* Comprehensive unit tests for resolver and state logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This is the first smaller PR in the broader change of updating our
Connect dialog (see
[here](https://github.com/supabase/supabase/pull/42276)).
This PR focuses on decoupling the ConnectButton our of the Connect
dialog and into its own component . The button includes a flag to render
the new sheet. The new sheet is empty for the time being as the flag is
at 0%.
To test:
- Enable flag and click button, see new Sheet
- Disable and see old dialog
- Create a new project -> in getting started section see "connect to
app" step -> Click connect button and make sure it works
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
- Added a Connect button component and an alternative Connect sheet.
- Added curl syntax highlighting for code blocks.
* **Changes**
- Connection dialog moved to a controlled open-state pattern; Connect
replaced legacy entry points across the UI and can be feature-flagged.
- Connection actions simplified and no longer depend on framework
selection.
* **Removals**
- Removed legacy framework selector, default framework constant, and
related tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Joshen Lim
