- 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 -->
## 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>
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.
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`.
## 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
## 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
<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>
