## What kind of change does this PR introduce? Bug fix. ## What is the current behavior? A failed Vercel connection after project creation is only logged, leaving the project-creation screen in its loading state. ## What is the new behavior? The flow preserves the created project and shows the connection error with retry and open-project actions in the standard project-creation footer. Project-creation failures remain ordinary inline form errors. Connection failures are owned by this flow without a duplicate toast or a no-op error handler. | Before | After | | --- | --- | |  | <img width="1024" height="563" alt="Create Vercel Project Supabase" src="https://github.com/user-attachments/assets/b7d3fdca-d7a0-4b50-9231-3cf7dc371a87" /> | ## To test ### Before on master 1. Switch to `master`. 2. With local Studio running and while signed in, open an organisation you can access. Copy its slug from `http://localhost:8082/org/<YOUR_ORG_SLUG>`. 3. Open `apps/studio/components/interfaces/ProjectCreation/ProjectCreationForm.tsx`. 4. Find `isSuccessNewProject={isSuccessNewProject}` in the `ProjectCreationFooter` props and temporarily change it to: ```tsx isSuccessNewProject={true} ``` 5. Replace `<YOUR_ORG_SLUG>` in this URL with the slug from step 2, then open it: `http://localhost:8082/integrations/vercel/<YOUR_ORG_SLUG>/deploy-button/new-project`. 6. Confirm **Create new project** remains in its loading state and there is no error, retry action, or route to the created project. This represents the current stuck state. 7. Revert the temporary edit before switching branches. ### After on this branch 1. Switch to `dnywh/vercel-deploy-recovery`. 2. With local Studio running and while signed in, open an organisation you can access. Copy its slug from `http://localhost:8082/org/<YOUR_ORG_SLUG>`. 3. Open `apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx`. 4. Find the conditional beginning with `newProjectRef === undefined` inside `InterstitialLayout`. 5. Replace that whole conditional with: ```tsx <VercelConnectionError projectRef="abcdefghijklmnopqrst" message="Connection request failed" onRetry={() => undefined} /> ``` 6. Replace `<YOUR_ORG_SLUG>` in this URL with the slug from step 2, then open it: `http://localhost:8082/integrations/vercel/<YOUR_ORG_SLUG>/deploy-button/new-project`. 7. Confirm the admonition says **Unable to connect to Vercel** and **Your Supabase project was still created. Error: Connection request failed**. 8. Confirm **Open project** and **Retry connection** appear as compact, right-aligned footer buttons. The retry action is intentionally inert in this visual-only mock, and no project or Vercel connection is created. 9. Revert the temporary edit. ## Additional context Follows #48473. The consistency follow-up #48640 is stacked on this PR. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added inline error messages to project creation forms for integration, API, and validation failures. - Added clear Vercel connection states, including waiting, connecting, success, and error screens. - Added retry actions and links to open successfully created projects. - **Bug Fixes** - Improved error handling so Vercel connection issues remain visible in context instead of appearing only as notifications. - **Tests** - Added coverage for partial-success messaging, project links, and retry behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Supabase Studio
A dashboard for managing your self-hosted Supabase project, and used on our hosted platform. Built with:
What's included
Studio is designed to work with existing deployments - either the local hosted, docker setup, or our CLI. It is not intended for managing the deployment and administration of projects - that's out of scope.
As such, the features exposed on Studio for existing deployments are limited to those which manage your database:
- Table & SQL editors
- Saved queries are unavailable
- Database management
- Policies, roles, extensions, replication
- API documentation
Managing Project Settings
Project settings are managed outside of the Dashboard. If you use docker compose, you should manage the settings in your docker-compose file. If you're deploying Supabase to your own cloud, you should store your secrets and env vars in a vault or secrets manager.
How to contribute?
- Branch from
masterand name your branches with the following structure{type}/{branch_name}- Type:
chore | fix | feature - The branch name is arbitrary — just make sure it summarizes the work.
- Type:
- When you send a PR to
master, it will automatically tag members of the frontend team for review. - Review the main contributing guide to help test your feature before sending a PR.
- The Dashboard is under active development. You should run
git pullfrequently to make sure you're up to date.
Developer Quickstart
Note
Supabase internal use: To develop on Studio locally with the backend services, see the instructions in the internal
infrastructurerepo.
# You'll need to be on Node v22
# in /studio
## For external contributors
pnpm install # install dependencies
pnpm run dev # start dev server
## For internal contributors
## First clone the private supabase/platform repo and follow instructions for setting up mise
mise studio # Run from supabase/platform alongside `mise infra`
## For all
pnpm run test # run tests
pnpm run test -- --watch # run tests in watch mode
Running within a self-hosted environment
Follow the self-hosting guide to get started.
cd ..
cd docker
docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml up
Once you've got that set up, update .env in the studio folder with the corresponding values.
POSTGRES_PASSWORD=
SUPABASE_ANON_KEY=
SUPABASE_SERVICE_KEY=
Then run the following commands to install dependencies and start the dashboard.
npm install
npm run dev
If you would like to configure different defaults for "Default Organization" and "Default Project", you will need to update the .env in the studio folder with the corresponding values.
DEFAULT_ORGANIZATION_NAME=
DEFAULT_PROJECT_NAME=