Studio is on `react@^19.2.6`, and `useEffectEvent` shipped stable in
React 19.2 with the same signature as the userland polyfill. This drops
the local hook in `apps/studio` and `apps/www` in favor of the built-in.
**Removed:**
- `apps/studio/hooks/useStaticEffectEvent.ts`
- `apps/www/hooks/useStaticEffectEvent.ts`
- `.claude/skills/use-static-effect-event/` — skill is obsolete
**Changed:**
- 26 call sites: dropped the `useStaticEffectEvent` import, added
`useEffectEvent` to the existing `react` import, renamed call sites
- `.claude/CLAUDE.md`: `apps/studio` row updated React 18 → React 19
- `.claude/skills/vercel-composition-patterns/SKILL.md`: removed stale
"Studio uses React 18, skip these patterns" warning
## To test
- `pnpm typecheck --filter=studio` — passes locally
- `pnpm typecheck --filter=www` — passes locally
- `grep -rn "useStaticEffectEvent"` returns nothing outside
`node_modules`
- Smoke-test areas that use the hook: schema visualizer edges
(intersection check), spreadsheet import, sign-in/CLI login flows, side
panels with unsaved-changes prompts
**Out of scope:** pre-existing Tailwind lint warning on
`DefaultEdge.tsx:141` (`outline` + `outline-1` conflict) — unrelated to
this migration
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Internal event handling migrated to React’s built-in event hooks
across the Studio app; no user-facing changes.
* **Documentation**
* Clarified React 19 compatibility and noted Studio now targets React
19.
* Removed obsolete documentation for a deprecated internal hook.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46415?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: Alaister Young <10985857+alaister@users.noreply.github.com>
## Summary
The homepage instance diagram looks visually off when a project has read
replicas — see
[FE-3390](https://linear.app/supabase/issue/FE-3390/adjust-homepage-diagram-spacing-for-read-replicas).
Root cause: the dagre layout in `InstanceConfiguration.utils.ts` was
passing a fake `height: 25` (and a `-70` hack for the load balancer) for
every node, regardless of how tall the rendered node actually is. When
the Primary card grew taller after #45274 added the compute-metrics row,
the gap between the Primary node and the Read Replica node became
visually tight while the gap between the Load Balancer and Primary
stayed loose — the diagram looked lopsided.
## Fix
- Pass the **real measured height** of each node to dagre, sourced from
React Flow's internal measurement (`node.measured.height`).
- Run the layout in two passes:
1. First pass uses small per-type fallback heights so React Flow has
something to render and measure against.
2. Once `useNodesInitialized()` flips true, re-run dagre with the
measured heights and fitView.
- Keep the diagram at `opacity-0` until the measured pass completes, so
the fallback positions are never visible to the user. Subsequent data
refetches don't re-hide the diagram — once measured, it stays visible.
- Drop `NODE_ROW_HEIGHT` and the load-balancer `-70` hack. Replaced with
a small `NODE_HEIGHT_FALLBACKS` table used only on first paint.
- `ranksep` reduced from 160 → 60 since dagre now knows real heights.
Closes FE-3390.
## Test plan
- [x] Open the project homepage for a project with no read replicas —
diagram renders centered, single Primary node.
- [x] Open the project homepage for a project **with** a read replica —
Load Balancer → Primary → Replica spacing is visually balanced; no flash
of fallback positions on initial render; the diagram fades in once.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* More accurate infrastructure diagram layout with better node sizing
and spacing for initial and measured renders.
* Introduced fallback heights so diagrams render correctly on first
paint before measurements are available.
* Region containers now use a consistent fixed height for stable layout.
* Smoother, visually consistent diagram initialization with improved
opacity transition during layout setup.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46075?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
Users on the Infrastructure activity tab see a Disk IO Bandwidth chart
that plots burst budget percentage rather than real disk activity. The
more granular IOPS and throughput charts live in Observability, but
there is no path between the two pages — users either dismiss real
warnings or file support tickets.
Reported in [Linear
DEBUG-64](https://linear.app/supabase/issue/DEBUG-64).
## Fix
Two cross-links into Observability/Database:
1. **Below the Disk IO Bandwidth chart**
([InfrastructureActivity.tsx](apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx))
an Admonition with a "View detailed IOPS and throughput" button. Only
shown for the disk IO section, not CPU/RAM.
2. **In the disk IO exhaustion banner's Troubleshoot dropdown**
([ResourceExhaustionWarningBanner.tsx](apps/studio/components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.tsx))
a "View metrics" item alongside Documentation and Ask AI Assistant.
The banner part is wired via a new optional `metricsHref` on
`ResourceWarningMessage`, so CPU/RAM warnings can opt in later by adding
their own observability path.
## Test plan
- [ ] Visit `/project/{ref}/settings/infrastructure` on a project that
does not have dedicated I/O resources. Confirm the new Admonition
appears under the Disk IO chart and the button navigates to
`/project/{ref}/observability/database`.
- [ ] On a project with dedicated I/O resources, confirm only the
existing "dedicated I/O" Admonition shows (no double-Admonition).
- [ ] Trigger (or mock) a `disk_io` resource warning; confirm the
banner's Troubleshoot dropdown shows "View metrics" first and links to
Observability.
- [ ] Trigger a `cpu` or `ram` warning; confirm the dropdown does NOT
show the new item.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Clarifies that the disk IO consumption chart shows remaining burst
budget, not real throughput.
* Adds a quick-access button to jump to the Database Observability page
for detailed read/write IOPS and throughput.
* Adds a "View metrics" link in resource exhaustion warnings for disk IO
issues (shown when a single warning is active).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
## Context
Resolves FE-2985
As per PR title
- Add project region info in project settings page for convenience
<img width="722" height="375" alt="image"
src="https://github.com/user-attachments/assets/b32e80ed-42bd-4b12-b9b4-a3e696646335"
/>
- Add project region info in vector buckets empty state
<img width="1110" height="215" alt="image"
src="https://github.com/user-attachments/assets/60bfde97-c3e3-4c10-8b86-98ecd0437ad5"
/>
- Make DB region copyable by clicking in instance config chart on home
page
<img width="419" height="298" alt="image"
src="https://github.com/user-attachments/assets/269b9517-d0eb-42b9-9648-386c59d53842"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Project region is now shown as a read-only field with a descriptive
region label in Settings.
* Region identifiers are clickable to copy to clipboard, with a “Click
to copy” tooltip and success toast.
* Storage/empty-state messaging updated to show clearer, region-specific
text and tooltip details.
* Replica creation time now uses an enhanced timestamp display.
<!-- 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>
## Problem
The Primary Database card in the project homepage diagram showed region
and instance size, but no live health data. Users had no quick way to
spot a high-disk or high-CPU situation without navigating to the
database report.
## Fix
Added a clickable metrics row at the bottom of the Primary Database card
showing CPU, Disk, and RAM as percentages, plus active/max connections
when available. Each metric is color-coded (warning at 80%, destructive
at 90%). Clicking the row navigates to the database observability
report.
The metrics are powered by a new \`useComputeMetrics\` hook that wraps
the existing \`useInfraMonitoringAttributesQuery\` and
\`useMaxConnectionsQuery\`, reusing the parse utilities already used by
the database infrastructure section. The \`metricColor\` threshold logic
is extracted into a separate util with unit tests.
## How to test
- Open the project homepage for a running project
- The Primary Database card should show a new bottom row: "CPU X% · Disk
X% · RAM X% · Y/Z conns"
- Values above 80% should appear in amber, above 90% in red
- Click the metrics row and confirm it navigates to
\`/project/<ref>/observability/database\`
- While metrics are loading, a spinner should appear in the row
- If the infra monitoring API is unavailable, the row should show
"Metrics unavailable" instead of zeroes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Infrastructure configuration page now displays real-time compute
metrics (CPU, disk, memory usage) with color-coded usage indicators
based on thresholds.
* Connection information is displayed when available.
* Includes loading states and error handling for metric retrieval.
* **Tests**
* Added test coverage for metric color-coding logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
The Fly login/auth endpoints were removed from the management API
(supabase/platform#30987). This cleans up the associated studio code and
regenerates the API types.
Note: existing Fly projects are still running, so all `cloud_provider`
guards and Fly-specific UI (disk management, billing, pg_cron warnings,
etc.) are intentionally kept in place.
**Removed:**
- `sign-in-fly-tos.tsx` page
- `organization-by-fly-organization-id-mutation.ts`
- `project-by-fly-extension-id-mutation.ts`
**Other:**
- Regenerated API types to reflect removed endpoints
- Removed stale Fly-related comments in `InstanceConfiguration`,
`ObservabilityMenu`, `ReportsMenu`
- Fixed unrelated optional chaining bug in `SSOConfig.tsx`
## To test
- Check project creation flow still works
- Verify `/sign-in-fly-tos` no longer resolves
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
## Problem
When you have many tables, it's hard to follow the relations between
them in the Schema Visualiser
## Solution
When selecting an edge (the line between tables), highlight it along
with the related tables and columns to make it easier.
Also, if there is enough space, display a popover showing the relation
details
## Screencasts
https://github.com/user-attachments/assets/11d35fa7-3674-4f13-b77f-8ebe25c66b04
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?
UI nit changes
## What is the current behavior?
- We use big dots `•` to separate semantically different sets of text
that are in the same row
- This looks a bit odd given how large the dot is to text
- We put _Project Settings_ in its own sidebar section but without a
separator like all other sidebar sections
## What is the new behavior?
- Use the smaller dots `·` to separate text
- Place a separator above _Project Settings_ in sidebar
| Before | After |
| --- | --- |
| <img width="1342" height="711" alt="AWS Healthy Toolshed
Supabase-70BD1825-8077-4D1B-84C1-831A4ADAFC0B"
src="https://github.com/user-attachments/assets/70246009-a3c7-4b5c-8d75-122140a637d1"
/> | <img width="1342" height="711" alt="AWS Healthy Toolshed Supabase"
src="https://github.com/user-attachments/assets/e3fc13e4-923d-472e-aaf9-d689e890697b"
/> |
The "Management of read replicas has moved" banner in Settings >
Infrastructure linked to /database/replication, which returns a 404-like
page for users who don't have the database:replication feature enabled.
The notice is now only shown when the feature is enabled.
## Context
Just cleaning up the `unifiedReplication` feature flag now that this is
fully rolled out
Also addresses some bugs that I came across while cleaning up,
specifically for the new home page
- Add enabled features flag check for read replicas in database
replication
- Infra diagram, read replicas
- View connection string CTA to open connect UI with the right database
selected
- Replaced all other actions with a "Manage replica" CTA which links to
the replica details page
### Changes
- Replace `isFreePlan` with entitlement-based check in infrastructure
warnings: `CPUWarnings`, `RAMWarnings`, and `DiskIOBandwidthWarnings`
previously derived their button label ("Upgrade project" vs "Change
compute add-on") from checking the org's plan. This is now driven by the
`instances.compute_update_available_sizes` entitlement.
Feature / Refactor
## What is the current behavior?
Data API docs live at the `/api` route as a standalone page. Old links
point to the previous location.
## What is the new behavior?
Data API docs are moved to the integrations section with a dedicated
docs tab and settings tab. Old links are cleaned up, a mobile menu is
added for data API docs navigation, and minor code review fixes are
applied.
## Additional context
Resolves FE-2517
## Summary by CodeRabbit
* **New Features**
* Revamped API docs UI with reusable section layout, language toggle
(JS/Bash), API key selection, and improved code snippets
* Added Data API docs tab, mobile navigation, and dedicated
loading/error/disabled states
* **Navigation Updates**
* Moved API docs and related links into the Integrations/Data API area
and added redirects to new routes
* Updated various internal links to the new Data API settings and
overview locations
* **Tests**
* Added comprehensive unit tests for Data API utilities
## Context
Replaces the provider name with the region code in the infrastructure
settings overview node diagram
- The latter is more important, and we don't really specify the cloud
provider anywhere in the dashboard
<img width="315" height="137" alt="Screenshot 2026-02-05 at 18 43 11"
src="https://github.com/user-attachments/assets/bc6f4dab-e9be-4663-ae1e-50e76b517c86"
/>
Also made the same changes in the upcoming database replication page too
in the form of tooltips
And swapped the title + description to be more consistent (Top: type of
data, bottom: description), same for the table below
Before:
<img width="737" height="335" alt="image"
src="https://github.com/user-attachments/assets/6674564b-e871-4cd9-83a3-e0bfde7a9f83"
/>
<img width="287" height="354" alt="image"
src="https://github.com/user-attachments/assets/f234de68-107b-470d-804a-bd3b1d9ae9dc"
/>
After:
<img width="637" height="350" alt="image"
src="https://github.com/user-attachments/assets/03e08d55-43a1-4a16-8be1-11dd7d14fef3"
/>
<img width="364" height="357" alt="image"
src="https://github.com/user-attachments/assets/0e49df5b-68e5-4652-8dca-4d44ebb8c3ab"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added region metadata with interactive tooltips across replication and
database views.
* Actions that modify replicas now refresh the list automatically.
* Replication diagram layout updated with increased node spacing and a
wider zoom-out range.
* **Style**
* Destination and replica name/ID display reorganized for clearer,
two-line presentation.
* BigQuery icon now inherits color from CSS for better visual
consistency.
* Provider/region labels refined for clearer wording.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
## Context
Related to unifying read replicas into database replication page which
is currently in internal testing
## Changes involved
- Updates the "New replica" CTA in `DatabaseSelector` (e.g within the
SQL Editor) to link to the replication page instead of settings
infrastructure
- Refactor replication UI to use URL query states for new destination +
edit destination
## To test
- [ ] Verify that the "New replica" CTA links correctly to replication
page if flag is on
- [ ] Verify that new + edit destination UI works as expected
- Note that there's some server side validation for ETL replication now
so might be tricky to test creating an actual ETL replication
- Minimally can test creating a read replica and ensure that the UI
behaviour is all as expected
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added unified replication experience with URL-based state management
for destination creation and editing
* **Refactor**
* Simplified replication panel component interfaces and consolidated
destination data fetching logic
* Enhanced edit flows to leverage URL parameters for seamless navigation
* **Chores**
* Marked legacy read replica creation panel as deprecated
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* validation errors
* improvements
* deprecate notice bar
* consolidate upgrade warnings
* type fixes
* rabbit
* 📝 Add docstrings to `dnywh/chore/link-to-dropped-objects` (#41528)
* 📝 Add docstrings to `dnywh/chore/link-to-dropped-objects`
Docstrings generation was requested by @dnywh.
* https://github.com/supabase/supabase/pull/41527#issuecomment-3680610884
The following files were modified:
* `apps/studio/data/config/project-upgrade-eligibility-query.ts`
* New line
---------
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
* Use API types instead
* Update API types
* Add manage replicas CTA to upgrade warning if unified replication and project has replicas
* Nit
* use actionable language
* gap
* simplify
* prettier
* Add URL
* better links
* add tables and encode links
* remove replication link
* nit ordering
* rabbit
* Small simplify
---------
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* 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.
* refactor: infra queries to use `attributes`
This PR refactors the infrastructure monitoring query code reducing duplication and unifying the API request to always be `attributes`:
• Removed the separate useInfraMonitoringQuery hook and getInfraMonitoring function that handled a single monitoring query
• Consolidated all infrastructure monitoring queries into a unified useInfraMonitoringAttributesQuery hook that handles multi-attribute requests
• Moved interval selection logic from the query layer to the consumer (InfrastructureActivity.tsx), where it can be computed dynamically based on user-selected date ranges
• Simplified query types by removing intermediate InfraMonitoringData and InfraMonitoringVariables types
• Interval is now computed in the component (defaults to 1d, switches to 1h for date ranges ≤48 hours) rather than hardcoded in the query layer
• All queries now use the unified multi-attribute endpoint with explicit parameter passing
* fix: handle single-attribute response format
* feat: rename reports to observability on nav sidebar
* fix: observability route
* feat: observability navigation and redirects
* fix: first time load redirects
* feat: change auth overview reports link
* feat: clean up of other links to observability sections
* fix: query perf redirects
* chore: find exhaustive deps and disable for time being
* fix: charis suggested fixes
* fix: forgotten suggested fix
* chore: delete old reports views files
* fix: paths in reports tests
* fix: url sync useEffect should trigger only once
* feat: reorganise observability sidebar
* fix: data api not being selected
* fix: wrong layout for realitime
* fix: custom reports reloading
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
* Migrate all uses of invalidateQueries to use object syntax.
* Migrate the remainder of useInfiniteQuery.
* Migrate all setQueriesData.
* Migrate all fetchQuery uses.
* Migrate some leftover functions from RQ.
* Fix issues found by Charis.
* o11y: mirror and sanitize breadcrumbs
Mirror Sentry breadcrumbs as the basis for our own support logging. Also
adds more sanitization to breadcrumbs.
* feat(support form): toggle for attaching dashboard logs
Add a toggle to the support form when the category is "Dashboard bug",
to attach recent dashboard logs. Users can preview the attached logs and
opt out.
* feat(support links): dedicated support link component
Add a new component for support links, which:
- Uses the serializer for support link params to ensure
serialization/deserialization pairs correctly
- Snapshots breadcrumbs so the attached log on the support form will be
cut off at the support link click (otherwise we will get support form
actions cluttering up the log)
* tests(support form): extend timeout on flaky test
* Minor clean up
* fix(support form): allow url to specifically indicate no specified project
* minor nits
* Fix tests
* Fix tests
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
