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
With #45211 and #45218 merged, we don't need the `_Shadcn_` suffix
anymore
## Solution
- [x] Remove the `_Shadcn_` suffix
- [x] Update exports and imports
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized UI component exports by removing legacy naming
conventions and providing direct imports for checkbox and radio group
components throughout the design system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The Report Blocks section (custom dashboards) has four visual and UX
bugs: tooltip content overflows its container, Y-axis labels with 5+
digits get clipped (e.g. `10000` renders as `0000`), action buttons
become unreachable when a block title is long, and scrolling inside a
scrollable block also scrolls the parent page.
## Fix
- Remove the fixed `w-[200px]` class from `ChartTooltipContent` in
`ChartBlock` so tooltips auto-size to their content instead of
overflowing.
- Compute a dynamic Y-axis width in `ChartBlock` based on the string
length of the maximum data value, replacing the `undefined` default that
caused clipping.
- Add `min-w-0` to the label container and `shrink-0` to the actions
container in `ReportBlockContainer` so the truncation works correctly
and action buttons are never pushed off-screen.
- Add `overscroll-contain` to the scrollable SQL code and results table
divs in `QueryBlock` to stop scroll events from propagating to the page.
## How to test
- Navigate to a custom Report with multiple blocks
- Hover over a chart bar on a block with a long metric name. The tooltip
should be fully visible with no text overflow.
- Find or create a block whose Y-axis values exceed 9999 (e.g. disk
IOPS). The full number should appear on the Y-axis without any leading
digits being clipped.
- Use a block on a read replica so the label appends "of replica",
making it long. The chart-type toggle, log scale toggle, and remove
buttons should all remain visible and clickable.
- Add a SQL snippet block that returns a large table of results. Scroll
within the results table. The page should not scroll while the inner
table is scrolling.
## Before
<img width="1166" height="680" alt="CleanShot 2026-04-07 at 15 36 45@2x"
src="https://github.com/user-attachments/assets/8e7bd3c9-8319-47c9-b2d9-b194d2803809"
/>
## After
<img width="1166" height="680" alt="CleanShot 2026-04-07 at 15 36 15@2x"
src="https://github.com/user-attachments/assets/6ca5873a-cd09-4001-9cd0-932c12b6536e"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* More consistent Y-axis sizing with dynamic widths for better label
fit.
* Improved Y-axis number formatting (K/M suffixes, sensible decimals)
for clearer tick labels.
* Simplified, more flexible chart tooltips (min-width applied; removed
fixed widths).
* Tighter report header layout so labels truncate predictably and
actions keep their size.
* Added overscroll containment to query results and SQL view to reduce
unwanted scrolling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## Summary
Fixes https://linear.app/supabase/issue/FE-2941
- Replaced per-cell `ContextMenu_Shadcn_` in SQL result tables with a
single shared instance
- Each Radix ContextMenu registers a `keydown` listener on `document`
via `useEffect`. With 1000+ row result sets, this created thousands of
document-level listeners. Chrome trace showed listeners growing from 21k
to 347k, with every keystroke taking ~250ms (70k+ function calls per
long task)
- Fixed DataGrid not rendering in Firefox by using flex layout instead
of `height: 100%` for sizing
- Fixed double scrollbar in QueryBlock results by making the container a
flex column and removing `overflow-auto`
- Moved format utils into `Results.utils.ts`
## Test plan
The `Results` component and `QueryBlock` are used in several places.
Each should be verified:
- [x] **AI Assistant** — Have the assistant run a query returning 1000+
rows. Verify the page stays responsive while typing and there is only a
single scrollbar on the results table
- [x] **AI Assistant (Firefox)** — Same as above but in Firefox. Verify
the results table actually renders
- [x] **SQL Editor results panel** — Run a query in the SQL Editor.
Verify results render correctly with a single scrollbar in the utility
panel
- [x] **SQL Editor explain tab** — Run an EXPLAIN query. Verify explain
results render
- [x] **Editor Panel** (used in Table Editor SQL preview) — Verify
results display correctly
- [x] **Context menu** — Right-click a cell in any of the above and
verify "Copy cell content" and "View cell content" still work
## Traces
<img width="891" height="599" alt="image"
src="https://github.com/user-attachments/assets/6e1b710b-ca9e-4748-9369-d03457d80206"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed context menu behavior so it opens at the cursor and is
instantiated once.
* Improved clipboard copy formatting for cell values; NULLs copy as
empty and cells render as "NULL".
* **Style**
* Adjusted table layout and scrolling behavior to improve results
container sizing.
* **Tests**
* Added tests for results rendering, context-menu behavior, and
cell/clipboard formatting utilities.
<!-- 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?
- Remove queue operations from feature preview into settings
- Refactor dashboard settings
- Resolves DEPR-434
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Dashboard settings panel in Account preferences with toggles for
Inline Editor and Queue Operations; “Dashboard” added to project
Configuration.
* **Removed**
* Old Inline Editor settings UI and the Queue Operations feature-preview
UI removed.
* **Refactor**
* Consolidated dashboard preferences into a single settings surface;
banners and actions now navigate to preferences; account/preferences
layouts and back-navigation behavior adjusted for platform vs
self-hosted.
* **Tests**
* Added tests for settings UI, menu generation, redirects, and
local-storage.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@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`.
- Deleted SQL Snippets leave a hanging block that loads forever in
custom reports, and its not possible to delete them.
- Now you can delete blocks if they get stuck loading
- Also shows correct error state when a block couldn't load because the
sql snippet was removed
## before
- stuck forever
<img width="1296" height="936" alt="CleanShot 2026-02-26 at 13 23 25@2x"
src="https://github.com/user-attachments/assets/bb65cc5f-c2a4-4027-876e-db9682ec6f3c"
/>
## after
- show error state
- allow user to delete snippet
<img width="1388" height="862" alt="CleanShot 2026-02-26 at 13 23 45@2x"
src="https://github.com/user-attachments/assets/c5d6c114-071b-4e4d-a913-25b3c788db95"
/>
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
- EditorPanel can now load, save, and rename SQL snippets inline
- New SaveSnippetDialog component for saving snippets with AI-generated
titles
- EditorPanel state tracks active snippet ID and pending reset
- EditQueryButton opens the inline editor panel instead of navigating to
SQL editor page
- AIEditor exposes onMount callback for editor instance access
- SnippetDropdown label updated to "Create snippet"
## TO TEST
### Normal CRUD
- open inline SQL Editor
- try creating a new snippet
- try editing an existing snippet
### Homepage V2 Report
- Try adding a new block → create snippet
- create the snippet in inline sql editor
- select the snippet in the report block section
* 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.
* chore: update react-day-picker
* fix(design system): date picker demos
* refactor(date picker): change logs date picker to use react-day-picker
* refactor(date pickers): change remaining date pickers to use react-day-picker
* cleanup(date pickers): minor code cleanup
* fix(date picker): fix behavior for single day selection
* update onboarding
* update model and fix part issue
* action orientated assistant
* fix tool
* lock
* remove unused filter
* fix tests
* fix again
* update package
* update container
* fix tests
* refactor(ai assistant): break out message markdown and profile picture
* wip
* refactor(ai assistant): break up message component
* refactor: break ai assistant message down into multiple files
* refactor: simplify ReportBlock state
* fix: styling of draggable report block header
When the drag handle is showing, it overlaps with the block header.
Decrease the opacity of the header so the handle can be seen and the two
can be distinguished.
* fix: minor tweaks to tool ui
* refactor: simplify DisplayBlockRenderer state
* fix: remove double deploy button in edge function block
When the confirm footer is shown, the deploy button on the top right should be
hidden (not just disabled) to avoid confusion.
* refactor, test: message sanitization by opt-in level
Refactor the message sanitization to have more type safety and be more testable.
Add tests to ensure:
- Message sanitization always runs on generate-v4
- Message sanitization correctly works by opt-in level
* Fix conflicts in pnpm lock
* Couple of nits and refactors
* Revert casing for report block snippet
* adjust sanitised prompt
* Fix tests
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Some read-only errors from running SQL in the AI Assistant aren't being
properly detected, so the action item to review and confirm running the
SQL isn't showing up. Add test against another variant of read-only
error message that can show up.
* decouple editor panel from global state
* refactor again
* dont close assistant
* remove async
* onsave props
* Fix TS errors
* Remove editorPanel state from app-state, use useHotKey hooks for keyboard shortcuts
* Minor UX improvements to EditorPanel
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Replace all usage of useProjectContext with useSelectedProjectQuery
* Replace all usage of useSelectedProject with useSelectedProjectQuery
* Replace all usage of useProjectByRef with useProjectByRefQuery
* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery
* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks
* Deprecate ProjecContext
* Feature flag assistant endpoint + opt in UI
* Feature flag bedrock stuff for the other endpoints like title, cron, complete
* add edge function complete v2
* revert to old complete
* Revert hardcode
* fix chart colour
---------
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
* Fix query block not showing labels
* Readd the css file for react-resizable.
* Add react-resizable package to resolve a style.css file not found issue
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Cache results in assistant panel
* Small fixes
* fix
* disable switching chats while new messages are streaming in
* small comment
* Fix Create new snippet CTA in query block
* Add useCallbacks
* Update
* Remove console log
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Add refresh to custom reports
* Add refresh button to API and storage reports
* Add refresh button to database report
* Clean up database report
* Clean up custom report
* Add telemetry for add SQL block and dragging SQL block from assistant
* Add UI indication for drag support block in Assistant
* Add UI indication for SQL block support in SQL editor Chart options
* Feat/reports v2/create report (#33022)
* re-add chart label
* fix undefined value
* remove mouse over on chart
---------
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
* Support dragging blocks from assistant to custom report
* Show toast when new snippet is created from dragging block into custom report
* Only show drag handle for block in assistant panel if in custom reports
* Feature flag dragging Assistant query block to custom report
* Optimize DX for dragging block into report from assistant
* Update import
* Remove max width
* Fix dragging non sql block causing client crash
* Fix chart suffix
* Fix tooltip value for non % values
* Misc fixes
* Support persisting non sql block line or bar view, and fix cancelling not resetting the block state
* Update
* Preserve chart config when dragging block from assistant to report
* Fix
* Standardize block designs
* Clean up
* Add warning threshold colors for infra-monitoring stats
* Address all other comments
* Swap create custom report to use PUT
* midway
* Render, save, and save configuration of SQL blocks
* Fix re ordering of blocks not showing save UI
* Remove console log
* Smol fix
* Add queryHeight param to queryBlock
* Reinstate telemetry for run query clicked from assistant
* Add
* Add resizing
* Change compactType
* Fix switching reports doesnt update
* ONly show date picker if theres a chart thats using daily stats or infra monitoring
* Fix client crash
* Smol update
* Create QueryBlock component which will be a shared component used in AI Assistant and Reports
* Deprecate AIAssistantPanel/SqlSnippet.ts
* Fix user messages not getting persisted, only assistant messages
* Add loading state to for query results in QueryBlock + hide block view configuration if query block is not chart
* Address feedback
* Fix TS
* fix double border
---------
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Ivan Vasilov