## Problem
Replicated tables on the pipeline detail page reshuffle after a reset.
API order is unstable, and the default client sort was by status, so
status changes moved rows around.
Fixes PIPE-1137.
## Solution
Default the replicated tables table to sort by `schema` + `name`
ascending. Status sorting remains available via the Status column
header.
## To test
1. Open a project with a pipeline that has several replicated tables:
`/project/<ref>/database/replication/<pipelineId>`.
2. Confirm the Replicated tables list is alphabetical by `schema.name`,
with the Table column showing ascending sort.
3. Reset one table and confirm its row stays in place while its status
updates.
4. Click the Status column header and confirm status sorting still
works.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Replicated tables are now sorted alphabetically by schema and table
name by default.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Make pipeline actions and status feedback reliable while requests are
running or fail. Let the backend coordinate table resets and restarts,
keep stopped pipelines stopped after resets or settings changes, and
refresh the UI from confirmed backend state.
## Pipeline actions and recovery
- Reset one table, all errored tables, or all tables through the
rollback endpoint without separate frontend stop/start requests. Explain
which destination data is deleted, which rows are copied again, initial
sync charges, and the skip-initial-sync setting.
- Keep pending feedback until the action and a fresh status read finish,
including across navigation and polling errors. Prevent overlapping
actions and disable start/stop controls when status is unavailable or
transitioning.
- Close the creation form once the pipeline is created. If its initial
start fails, users can retry Start on the existing pipeline without
creating a duplicate.
- Wait for confirmed shutdown before deletion; a shutdown error or
timeout leaves deletion retryable. Keep failed version updates open and
avoid reporting success.
- Clarify recovery guidance and pending labels, suppress duplicate error
toasts, and hide stale table errors during transitions.
## Status updates and shared UI
- Poll pipeline status and table metrics one second after each response,
share in-flight reads, pause dashboard polling in background tabs, and
respect rate-limit backoff. The shutdown waiter continues in the
background.
- Refresh metadata after mutations even when an older read is in flight,
while preserving shared polling requests. Refresh affected data after
failures that may follow a committed reset or settings change.
- Move pending request state into the shared, project-keyed
`DatabaseLayout` so the list, detail page, and diagram stay consistent.
The surrounding database-page changes update named imports in both
Next.js and TanStack routes.
- Simplify action, status, and form rendering; announce status changes
to assistive technology; and sort table statuses without mutating cached
data.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## What kind of change does this PR introduce?
Studio UI improvement.
## What is the current behavior?
The pipeline Overview uses bespoke loading, metrics, table-state and
empty-state layouts that shift while data resolves and repeat status
information from the detail header.
## What is the new behavior?
Rebuilds the Overview around stable **Pipeline health** and **Replicated
tables** sections. It adds layout-matched loading geometry, prioritised
pipeline notices, initial-sync progress, clearer empty states, and
accessible loading announcements. Complete pipeline configuration
remains deferred to #49631.
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="54861"
src="https://github.com/user-attachments/assets/56e5cc5a-5d49-44c8-94d7-e1f1e0c827d5"
/> | <img width="1024" height="759" alt="Replication Database Agua
Basket Supabase"
src="https://github.com/user-attachments/assets/43b6d0f6-6fd5-47f9-b3e5-788a33511304"
/> |
This is the final independent slice in the review series: #50443,
#50444, #50445, #50446, then this PR. Each PR targets `master` and can
merge on its own. Rebase this PR as earlier slices merge.
## To test
1. Open `/project/<ref>/database/replication` and select a pipeline.
2. Throttle the initial requests and confirm **Pipeline health** and
**Replicated tables** keep their final geometry while loading.
3. Check running, initial-sync, stopped, failed, disconnected and
unavailable states.
4. Confirm the Overview contains Pipeline health and Replicated tables
only, without a Configuration section.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Reorganized replication pipeline status into Pipeline health and
Replicated tables sections.
- Added loading skeletons with accessible status announcements.
- Added clearer notices for pipeline health, failed or disconnected
pipelines, paused updates, lag, and synchronization progress.
- Improved empty states when table data is unavailable or the pipeline
is inactive.
- Added options to view logs and reset failed tables.
- **Tests**
- Added coverage for loading behavior, pipeline notices, table counts,
synchronization progress, and empty states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Studio UI improvement.
## What is the current behavior?
Replicated tables use badge-heavy rows, fixed name sorting, prominent
per-row reset buttons, and inconsistent restart terminology.
## What is the new behavior?
Adds table and status sorting, accessible search feedback, concise state
details, table action menus, and consistent **Reset** terminology.
Failed-table reset remains unavailable when there are no failed tables
or another reset is running.
| Before | After |
| --- | --- |
| <img width="1872" height="356" alt="CleanShot 2026-09-16 at 13 36
51@2x"
src="https://github.com/user-attachments/assets/6546f089-f6f8-4ff2-9509-ec44a2dee973"
/> | <img width="1840" height="452" alt="CleanShot 2026-09-16 at 13 36
30@2x"
src="https://github.com/user-attachments/assets/6e36b1e6-baee-4aea-80e9-e5e4a3fc8a75"
/> |
This is an independent slice extracted from #49630. The related review
series is #50443, #50444, #50445, this PR, then #49630.
## To test
1. Open `/project/<ref>/database/replication` and select a pipeline with
replicated tables.
2. Sort by **Table** and **Status**, then search for a table and clear
the search with Escape.
3. Open a table’s action menu and confirm its reset and Table Editor
actions.
4. Confirm **Reset failed tables only** is unavailable when the pipeline
has no failed tables.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added sortable Table and Status columns to the replication pipeline
view.
* Added options to reset all tables or only failed tables.
* Added clearer replication lag details and status indicators.
* Added dropdown actions for resetting tables and opening the Table
Editor.
* Added Escape-to-clear support for search.
* **Bug Fixes**
* Improved empty search results with a clear “No results found” message.
* Error details are now displayed separately for easier access.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Studio UI improvement.
## What is the current behavior?
Pipeline health is presented as a dense custom metrics panel with
repeated connection information and per-table lag details mixed into the
pipeline summary.
## What is the new behavior?
Moves the pipeline-level slot status, lag, WAL retention, and last
check-in into a standard detail section. It removes repeated connection
content and keeps table-specific state with the replicated tables.
| Before | After |
| --- | --- |
| <img width="1816" height="274" alt="CleanShot 2026-09-16 at 13 34
43@2x"
src="https://github.com/user-attachments/assets/eceed5bb-8af2-4a3b-83a9-7849f1554fbe"
/> | <img width="1830" height="506" alt="CleanShot 2026-09-16 at 13 34
15@2x"
src="https://github.com/user-attachments/assets/498c4390-17e2-45e5-a923-cb4a7cfd5978"
/> |
_Note that the page spacing may feel a bit funny. This is handled in
https://github.com/supabase/supabase/pull/49630_
This is an independent slice extracted from #49630. The related review
series is #50443, #50444, this PR, #50446, then #49630.
## To test
1. Open `/project/<ref>/database/replication` and select a running
pipeline.
2. Confirm **Pipeline health** shows slot status, lag, WAL retention
remaining, and last check-in.
3. Confirm unlimited WAL retention is labelled **Unlimited** and a
caught-up pipeline is labelled **Caught up**.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## UI Improvements
- Added a dedicated Pipeline Health section summarizing WAL status, slot
status, and replication lag.
- Replaced the inline metrics layout with responsive detail cards and
clearer supporting descriptions.
- Added tooltips for lag values and relative reply times, including
precise timestamps.
- Updated lag labels and status indicators for improved clarity.
- Added concise explanations for reserved, extended, unreserved, lost,
and unknown WAL states.
- Improved presentation of pipeline details with optional contextual
descriptions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Studio page-layout polish. This follows the merged destination-brand and
pipelines-list work in #50251 and #50252, and now targets `master`
directly.
## What is the current behaviour?
Pipeline child pages use a bespoke heading, provide limited destination
context, and shift substantially while pipeline and destination data
load.
## What is the new behaviour?
Adds standard breadcrumbs and page-header composition, destination
identity, the primary-database-to-destination path, lifecycle actions,
and child-route integration. Layout-matched loading placeholders keep
the header geometry stable until the resolved pipeline data is
available.
Removes the legacy Overview header and actions now owned by the shared
page shell, and restores standard content gutters around the existing
metrics and tables. Pipeline action errors are handled once by the
layout, avoiding duplicate notifications from the underlying mutations.
Pipeline actions are also temporarily disabled while a table reset is
running to prevent conflicting requests.
| Before | After |
| --- | --- |
| <img width="1131" height="801" alt="Replication Database ETL BigTable
ETL Team Supabase"
src="https://github.com/user-attachments/assets/3f0ebab0-7244-4aa1-81ac-8847f5f86d4a"
/> | <img width="1131" height="801" alt="Replication Database Agua
Basket Supabase"
src="https://github.com/user-attachments/assets/bcbbd150-2a3d-468d-9cb9-652a6de2040b"
/> |
## To test
1. Open a pipeline at
`/project/<ref>/database/replication/<pipeline-id>`.
2. Confirm there is one page header with one set of actions, followed by
a consistently padded Overview body.
3. Confirm the breadcrumbs, destination logo and name, status,
source-to-destination path, primary lifecycle action, and overflow
actions.
4. Start, stop, or restart the pipeline and confirm its status and
available actions update appropriately.
5. Reset a replicated table and confirm the pipeline lifecycle, update,
and overflow actions remain disabled until the reset finishes.
6. Throttle the initial pipeline and destination requests and confirm
the header retains its final geometry without showing fallback data.
7. Check the page at desktop and phone widths.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
Studio data-layer migration.
## What is the current behavior?
Studio loads complete publication details through the original bulk
endpoint and creates publications by executing SQL against the source
database. Publication and source-table data use names where stable table
IDs are available.
## What is the new behavior?
Uses the v2 publication-name, publication-detail, publication mutation,
and source-table endpoints. The existing creation sheet continues to
behave the same, including publishing partition changes through the
parent table by default. Initial-sync selection and Analytics Bucket
associations now consume the selected publication detail. Generated
platform API types and their required nullability updates are included.
The generated Platform contract accounts for roughly 10,000 changed
lines in this PR.
## Dependency
Depends on the v2 source table, table column, and publication endpoints
from
[supabase/platform#37505](https://github.com/supabase/platform/pull/37505),
which are deployed to production.
## To test
1. Open the pipeline creation sheet and select an existing publication.
2. Create a publication with mixed-case schema and table names, then
confirm the table names are shown while stable IDs are submitted.
3. Exercise all four initial-sync policies, including selecting
individual tables.
4. Reopen the publication and table selectors and confirm they refresh
without replacing populated options.
5. Edit and delete a publication.
6. Open an Analytics Bucket associated with a pipeline and confirm its
publication tables resolve correctly.
7. Confirm unlimited WAL retention renders as Unlimited on pipeline
status.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Improved replication publication setup with on-demand table loading,
refresh controls, clearer table labels, and streamlined publication
selection.
- Publication creation and updates now use the latest replication API
and table-based configurations.
- Added clearer handling for tables removed from publications, including
stale-selection warnings.
- **Bug Fixes**
- Prevented table selections from carrying over when switching
publications.
- Improved replication status displays when lag or WAL metrics are
unavailable.
- Updated replication deletion and table management for the latest API
behavior.
- **Tests**
- Expanded coverage for publication creation, table selection, stale
tables, loading states, and replication metrics.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
UI polish for split buttons (primary action + dropdown chevron).
Follow-up to #49055.
## What is the current behavior?
The focus ring sits above the neighbouring half, but the inner edge
stays square, so the ring has two sharp corners at the join.
## What is the new behavior?
On keyboard focus, the squared-off edge uses a slight radius so the ring
matches the outer corners more closely. Resting state is unchanged.
Split-button callsites now share the same join classes as the
design-system example.
| Before | After |
| --- | --- |
| <img width="1030" height="296" alt="43471"
src="https://github.com/user-attachments/assets/9df3bd72-c7ac-4419-ae18-a7e649dc2d66"
/> | <img width="1056" height="276" alt="CleanShot 2026-08-17 at 10 45
09@2x"
src="https://github.com/user-attachments/assets/52e8a4dc-9c52-45ce-b4d0-f0e7b1b75935"
/> |
## To test
Tab to each half (labelled button, then chevron). Inner corners of the
focus ring should be slightly rounded, not square.
1. [Split with
dropdown](https://design-system-git-fix-split-button-focus-radius-supabase.vercel.app/design-system/docs/components/button#split-with-dropdown)
(no login)
2. [Access
Tokens](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/account/tokens)
→ Generate new token
3. Any project on [studio
staging](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/_/settings/general)
→ Settings → General → Restart project
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Accessibility**
- Added accessible labels to dropdown and export controls.
- Improved keyboard-focus visibility, layering, and rounded edge
treatment across joined buttons and menus.
- Removed misleading or redundant screen-reader text and titles.
- **Bug Fixes**
- Prevented split-button controls from shrinking or displaying awkward
borders and corners.
- Refined hover and focus behavior for action buttons throughout
settings, database, storage, account, and documentation interfaces.
- **Documentation**
- Clarified guidance for using overflow menus and responsive
split-button actions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Adds initial-copy scoping to Pipelines in Studio. Users can copy all
existing rows, skip all initial copies, copy only selected publication
tables, or skip selected table copies. All publication tables continue
streaming new changes regardless of the initial-copy policy.
The policy now round-trips through create, edit, validation, and the
generated Management API contract. Initial-copy estimates and
table-restart confirmations use the same scope. Edit requests also
preserve redacted credentials and pipeline settings that Studio does not
own.
This completes the Studio layer of the [ETL API
change](https://github.com/supabase/etl/pull/897) and [Management API
change](https://github.com/supabase/platform/pull/35479).
## Screenshots
### Selector
<img width="1153" height="465" alt="image"
src="https://github.com/user-attachments/assets/bf615e82-ee61-4222-979d-a8695a957e82"
/>
### Select certain tables only
<img width="1153" height="465" alt="image"
src="https://github.com/user-attachments/assets/28adaa24-f239-4d1d-8fb8-fdb1988320cd"
/>
### Confirm copy costs
As the final step before the pipeline is created:
<img width="597" height="619" alt="image"
src="https://github.com/user-attachments/assets/a660bd87-bfb8-41c5-8099-4cdbdef943bf"
/>
### Policy-aware initial-copy estimate
#### Copy no table is selected
<img width="407" height="464" alt="image"
src="https://github.com/user-attachments/assets/99d859ec-2ec3-452a-ab69-11924a8db260"
/>
#### Some tables are selected
<img width="407" height="464" alt="image"
src="https://github.com/user-attachments/assets/e68aedf4-66bc-4372-98ef-0dd7fecef324"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added configurable “initial table copy” policies (copy/skip all and
copy/skip selected) during replication setup, including table-picker
behavior, pruning of stale selections, and updated restart/cost
estimates.
- **Bug Fixes**
- Improved restart flows to consistently use `schema.table` identity and
simplified “errored tables” targeting to match error-state tables.
- Reduced unnecessary loading by gating publication/table fetches to
when panels are visible; improved validation/toast handling when
publication tables are unavailable.
- **Tests**
- Added/expanded coverage for destination form submission, table-copy
selection, restart/cost dialogs, and copy-estimate summarization.
- **Style**
- Refreshed warning/label text for clearer configuration and
confirmation messaging.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Victor Farazdagi <simple.square@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@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
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>
This PR improves the replication UI in the following ways:
- Adds a new selecion picker for destinations which is split by the
destination location and it's clearer and can scale more when we add
more destinations.
- Adds a much improved section on lag, highlighting new metrics that
could help debug issues more easily.
- Improves the copy across the whole code.
- Fixes the 2d topological view of replication with better status
handling.
### Screenshots
<img width="1270" height="777" alt="image"
src="https://github.com/user-attachments/assets/0ffc890e-2f80-47e5-bdb1-75071adda024"
/>
<img width="1665" height="656" alt="image"
src="https://github.com/user-attachments/assets/23a27a02-acb2-4891-af95-5bc1d6ec7bfe"
/>
<img width="1454" height="247" alt="image"
src="https://github.com/user-attachments/assets/c8799983-aa63-42b2-9370-ae4e009c1573"
/>
<img width="1120" height="340" alt="image"
src="https://github.com/user-attachments/assets/20a18ad6-e5a9-40ec-80d4-42d6f783d868"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Live slot health indicators, legend, and connection badges.
* Grouped destination type dropdown with alpha badges.
* **Improvements**
* Clearer UI copy for external destinations, alpha disclaimers, and
onboarding flows.
* Consolidated "n/a" handling for lag displays and richer metric
tooltips.
* Simplified replication diagram visuals and clearer table/row
status/lag presentation.
* Replication status responses now include expanded slot health and lag
metrics.
* **Tests**
* New test suites covering destination selection and destination row
states.
<!-- 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>
* 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.
Danny White