Adds the final set of keyboard shortcuts to the Unified Logs page and
converts the last hardcoded `keydown` listener (detail-panel prev/next)
to the shared shortcut registry. Each action also surfaces its keybind
in a registry-driven tooltip.
Closes FE-3415.
## Shortcuts
| Action | Shortcut | Notes |
| --- | --- | --- |
| Refresh logs | `Shift+R` | new |
| Download logs | `Shift+E` | new — opens export dropdown |
| Focus filter bar | `Shift+F` | new |
| Clear filters | `F` then `C` | new |
| Copy selected as JSON | `Mod+Shift+J` | new — reuses
`results.copy-json` |
| Copy selected as Markdown | `Mod+Shift+M` | new — reuses
`results.copy-markdown` |
| Previous / next log (detail panel) | `↑` / `↓` | converted from
hardcoded listener |
| Close details panel | `Escape` | new |
Existing shared `data-table.*` shortcuts kept as-is: toggle sidebar
(`Mod+B`), live mode (`Mod+J`), reset filters (`Mod+Esc`), reset columns
(`Mod+U`), reset focus (`Mod+.`).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added keyboard shortcuts for Unified Logs: copy selected rows as
JSON/Markdown, navigate rows, refresh, clear/reset filters, download,
and focus filter — shortcuts show in the command menu and display
badges/hints in menus and buttons.
* **Refactor**
* Shortcut handling unified across log controls; shortcuts
enable/disable based on context and a new "Logs" group appears in the
shortcut reference.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Addresses DEBUG-126
Making some adjustments to the service flow panel in unified logs
- Row action will be via a `...` button instead of the whole row
<img width="487" height="207" alt="image"
src="https://github.com/user-attachments/assets/cd0f6d41-aace-41c2-872b-60071fd6b986"
/>
- Fields with no values will show a `-` (previously didn't show
anything)
<img width="501" height="130" alt="image"
src="https://github.com/user-attachments/assets/3b62c44e-7fd9-497b-8261-ca5e1c975bc2"
/>
- Opting to close the dropdown menu when scrolling to prevent overflow
of the dropdown menu content with the parent component
- However, IMO this needs to be addressed at the UI component level RE
how we want to handle dropdown menu content when scrolling. The content
is portalled hence why its happening
- (Not user facing) Clean up usage of `FieldValue` and
`DataTableSheetRowAction`
- Was confusing to be passing `value` as a react node when declaring
`DetailRow` from `PostgresFlowDetail` and `Block`
- Opting to render the UI inside `DetailRow` instead, which gives us
better control on the UI
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Dropdown menus now close when the page is scrolled while open.
* **Improvements**
* Cleaner, more consistent log value formatting and status code display.
* Loading placeholders for log fields are handled more consistently.
* Dropdown content area widened for better visibility.
* Row actions only appear when a value is present; copy action shown as
fallback.
* **UI Behavior**
* Collapsible section headers receive improved layout, transition, and
hover styling.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46462?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 -->
## Context
Original task was to support searching `!=` on `event_message`, but this
PR addresses some things regarding searching on `event_message` in
unified logs that I found while working on this.
### `=` and `!=` are technically inaccurate
We're doing pattern matching when searching on event_message rather than
a strict equality check, so a more accurate operator would be `ilike
(~~*)` and `not ilike(!~~*)` - both of which would be case insensitive
for easier checking.
Am thus swapping to use these 2 operators when filtering on
`event_message`:
<img width="430" height="134" alt="image"
src="https://github.com/user-attachments/assets/c8a320b6-e016-44ae-aed0-1e7b6cefbda9"
/>
### Filtering on `event_message` was never server side
It seems like we have been only doing client side searching on
`event_message` which is inaccurate as we're only filtering against rows
that are on the current page. The `event_message` filtering was never
appended to the URL state as well so the changes in this PR ensures that
all search including `event_message` is server side.
### Rework on unified logs filtering via URL params
Because we're now supporting more than just `=` in unified logs, the
current filter system is insufficient (e.g can't just be
`status=x&method=y`). Am opting to use the same system as per how we do
filtering in the table editor where search params follow the syntax:
`{column}:{operator}:{value}`
<img width="521" height="46" alt="image"
src="https://github.com/user-attachments/assets/54e72eb2-1581-4c1a-910e-58d993da1766"
/>
## To test
- [ ] Verify that searching for logs in unified logs still works
- [ ] Verify that searching against event_message in unified logs works
as expected (both ilike and not ilike)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Repeatable URL-based column filters with operator support (e.g.,
equals, not-equals, pattern matching).
* Expanded pattern-style operators for message searches
(case-insensitive/contains, negation).
* **Improvements**
* Unified filter handling across logs list, charts, and counts for
consistent results.
* Range/slider filters and pagination remain supported and round-trip
via URL parameters.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46457?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
The unified logs view shows Postgres connection lifecycle events
(connection received, connection authenticated, connection authorized)
alongside application logs. These messages are emitted on every database
connection and make it hard to spot meaningful log entries.
## Fix
Adds a SQL-level filter that excludes Postgres connection messages by
default. A toggle in the filter sidebar lets users opt in to seeing them
when needed. The preference is stored in the URL so it persists across
navigation.
**Changes:**
- `SEARCH_PARAMS_PARSER` gets a new `hide_connection_logs` boolean param
(default `true`)
- `buildBaseWhere` in the query builder emits a `NOT (source =
'postgres_logs' AND event_message LIKE 'connection %...')` predicate
when the param is true, filtering at the query level
- New `ConnectionLogsToggle` component renders a labeled switch in the
filter sidebar
- `FilterSideBar` gains a `beforeFilters` slot so the toggle can be
injected without coupling the generic component to log-specific logic
## How to test
1. Open a project in Studio and navigate to the unified logs page
2. Confirm that connection log messages (e.g. "connection received:
host=...", "connection authorized: user=...") are not visible by default
3. In the left filter sidebar, find the "Connection logs" toggle near
the top and switch it on
4. Confirm that connection log messages now appear in the list
5. Toggle it back off and confirm they disappear again
6. Reload the page with the toggle on (URL will contain
`hide_connection_logs=false`) and confirm the setting is preserved
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a "Connection logs" toggle in the filter sidebar to hide
Postgres connection lifecycle messages by default (default = hidden);
changing it updates the logs view and the logs chart.
* Filter sidebar now supports placing extra controls so the toggle is
available alongside existing filters.
* **Behavior**
* Facet/count queries remain unaffected by this toggle to preserve
existing counts.
* **Tests**
* Added tests verifying default hide behavior and explicit show
behavior.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46371?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: Claude Sonnet 4.6 <noreply@anthropic.com>
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Command` components
## Solution
- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?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 -->
## Context
Adjusts the filter bar component to accept a `freeformDefaultProperty`,
in which entering any text in the filter bar will opt to search against
that property by default. (Property must be defined within the
`filterProperties` prop too)
Applies to unified logs, which for e.g "Event message" is a valid
filter:
<img width="428" height="250" alt="image"
src="https://github.com/user-attachments/assets/a08c015c-c9aa-4985-9e15-6429f455ccf0"
/>
I've set `freeformDefaultProperty` to be `event_message`, and hence
typing free text will opt the default action to just filtering against
that property
<img width="437" height="135" alt="image"
src="https://github.com/user-attachments/assets/ccf6944a-1c5d-4944-acfa-ac82dc20bb10"
/>
### Demo:
https://github.com/user-attachments/assets/287ee22d-f957-48e5-89b0-1fed159cd86a
### Other changes
- Opt to deprecate `truncateText` util from unified logs -> preference
for tailwind instead
- Event message is added as a filter field, but hidden in the side nav
(wouldn't make sense since the content is very dynamic, unlike something
similar like pathname)
- Fixes some console errors in unified logs because we were using
`.getColumn` in `DataTableSheetRowAction`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added an "Event message" filter (hidden by default) and set it as the
default target for freeform searches.
* **UI Improvements**
* Filter sidebar resize constraints tightened.
* Timeline chart spacing and x-axis tick behavior improved.
* Action labels and command list items no longer truncate long input
values.
* **Bug Fixes**
* More reliable resolution of target columns for row actions, improving
available filter options.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46134?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 -->
## Context
Supports selecting log rows and allow to copy / ask assistant for
selected rows, similar to what we had for the old logs UI
Selection will clear whenever the search parameters change
<img width="1448" height="413" alt="image"
src="https://github.com/user-attachments/assets/b81b359c-28c3-48a8-9895-e77327ebd33e"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Multi-row selection with an action header showing selected count
* Copy selected logs as JSON or Markdown from a dropdown
* "Explain with AI" action to open the assistant pre-filled with
selected logs
* Clear selection button
* **Refactor**
* Row/detail selection now syncs with the URL for shareable views and
improves next/previous navigation and panel behavior
* **Style**
* Minor visual tweak to column level indicator dot size
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45974)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Swaps out (and deprecates) the unified logs's own filter bar, for our
existing design system's filter bar
<img width="1450" height="355" alt="image"
src="https://github.com/user-attachments/assets/c5e83bd1-4e67-4bb5-8f27-a3d9beacbbb5"
/>
Other changes involved for the FilterBar itself includes the following
(more details in subsequent sections)
- Add `onApply` param for `FilterBar` that will only trigger when an
entered filter is "complete" (e.g on enter or blur)
- Automatically select the operator if only one exists
## To test
- Verify that the filter bar in general works BUT note there's some odd
behaviour when searching on say the "status" column (more details under
known issues)
- likely something with the internal SQL i think, will need to
investigate separately
- afaict testing on the method seems to be working at least
---
### Add `onApply` parameter for `FilterBar`
The search behaviour for the filter bar feels a bit awkward atm -
referencing the table editor:
- selecting the column triggers a search, which returns an error cause
the search query is incorrect (operator and value not selected yet)
- when typing the search value (after selecting the column + operator),
the search triggers on debounce, which feels odd in this context as I'd
expect the search to only trigger when i've hit enter (e.g to "finalize"
my search parameters)
- Am adding an `onApply` parameter gets called when a filter is
"complete" -> column, operator, and value are finalized (e.g via Enter
or onBlur)
- Updated both Unified logs and table editor to use this behaviour
### Automatically select operator if only one exists in `FilterBar`
This one's more specific to unified logs since there's only an `=`
operator - but saves an unnecessary "enter" key event when filtering in
unified logs
### Known issues
- For some reason (even with the existing filter bar) - searching
against status for e.g for postgres logs doesnt return the expected
rows. e.g i've got rows with status as `00000`, but searching for
`00000` doesnt return anything. Suspect its something to do with the SQL
we're firing?
<img width="1167" height="271" alt="image"
src="https://github.com/user-attachments/assets/1dde74cf-8366-4cf1-8d8f-6907ba2473f6"
/>
<img width="1184" height="453" alt="image"
src="https://github.com/user-attachments/assets/bf55f0fb-cb27-4e8f-b2d9-cd913d6ac6b9"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a dedicated Logs filter bar with an explicit "apply"/commit
callback for filter UI.
* **Bug Fixes**
* Filter edits are buffered locally and only committed on apply to
prevent aggressive data requests.
* **Refactor**
* Replaced legacy command-style table filter UI and removed related
utilities.
* Updated filter commit lifecycle and narrowed option value typing;
adjusted top-level provider ordering.
* **Style**
* Small layout and trigger behavior tweaks for filter controls, timeline
chart spacing, and download button.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46071?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: Gildas Garcia <1122076+djhi@users.noreply.github.com>
## Problem
When changing filters, while the query is running the loading state is
not clear, its only shown in the "Load more" button at the bottom which
can be missed if you got a lot of logs, we should improve the filters
loading state.
That's actually due to two things:
- we rely on the `isLoading` state instead of `isFetching`
- we debounce filters changes by a second
## Solution
- use `isFetching` to determine whether to display the loading spinner
in the top filter bar
- reduce the debounce delay to `250ms` as users can't filter by typing
anyway (what they type must be validated with Enter to select a filter,
no fuzzy filtering)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Performance**
* Optimized unified logs filter response time, applying filter changes
more quickly.
* **Bug Fixes**
* Enhanced loading indicator behavior in data tables to accurately
reflect active data fetching operations, providing clearer visual
feedback during interactions.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46070?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
After selecting a time range filter value, users see that `2` filters
are applied which is technically correct (begin/end of the time range)
but weird as you have only one filter made of two values.
## Solution
~~Not great, but check the filter column id and display `1` if it is the
_Date_ column~~
Better: rely on column definition metadata
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed data table filter reset button display for date columns:
date-based filters now show a consistent single indicator, while other
columns continue to display their actual filter counts.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46060?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 -->
## Context
Addresses the toggling of column visibility not working for dynamic
columns (e.g method, status, and event_message)
<img width="293" height="262" alt="image"
src="https://github.com/user-attachments/assets/c404c063-d6b2-49bf-86ec-bf91f7e35bd2"
/>
The main problem was actually just because of this in `UnifiedLogs.tsx`:
<img width="569" height="165" alt="image"
src="https://github.com/user-attachments/assets/5ae7be01-a7d6-4f64-99ad-87886dbf75f9"
/>
`dynamicColumnVisibility` is a fixed value determined by which columns
are dynamic from the log data (as the default value)
`columnVisibility` is a dynamic value that we're retrieving and updating
with local storage
just need to shift `dynamicColumnVisibility` to be before
`columnVisibility` so that `columnVisibility` can override the values
correctly from local storage
### Other changes
Other resolves DEBUG-102, adds a border top to the table to better
visually anchor the side panel
<img width="1157" height="301" alt="image"
src="https://github.com/user-attachments/assets/c0b7a90c-0ccb-4b65-8299-a8380e2a76fa"
/>
## To test
- [ ] Verify that the toggles work for method, pathname and
event_message
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Adjusted date column width in logs view for improved readability.
* Updated column visibility handling so the intended columns display
consistently.
* **UI Improvements**
* Added a top border to the main logs panel for clearer visual
separation.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45965?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
The `_Shadcn_` suffix isn't needed anymore on label component
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized Label usage across the codebase by removing the legacy
alias and using the direct Label export from the UI package
consistently.
* **Documentation**
* Updated component examples and docs to use the standardized Label
component in usage snippets and demos.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45986)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We have multiple Popover components
## Solution
- [x] migrate Popover usages to Shadcn components
- Migrated JSON and text editor in the `TableEditor` (inline row
edition)
- Migrated the template popover in the logs explorer templates page
- [x] remove `_Shadcn_` suffix from Popover components (renaming +
prettier)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Unified popover implementation across the app and design system;
dropdowns, calendars, menus and tooltips now use a consistent popover
API with no visual or interaction changes.
* **Chores**
* Minor prop typing update for the logs date-picker to align with the
consolidated popover content type.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
When opening the logs detail panel, some of the fields can be clicked to
add them as a filter. However the existing UX is that the clickable part
is just the text which makes it target small
<img width="233" height="127" alt="image"
src="https://github.com/user-attachments/assets/1d876bcc-05cf-464c-bdbe-907229be0586"
/>
Am opting the following:
- Make the whole row clickable
- Make all rows clickable with the main action being "Copy {column}"
- Only filterable columns will have the option to "Add as filter"
### After
<img width="483" height="153" alt="image"
src="https://github.com/user-attachments/assets/9d6e5479-fdbb-4609-839c-2bb7ad571b57"
/>
<img width="473" height="152" alt="image"
src="https://github.com/user-attachments/assets/f22197df-fa59-4e01-be00-2557260374f8"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Row actions now consistently wrap rows and show a filter icon next to
the label when a resolved filter is available; copy menu displays "Copy
{label}".
* **Style**
* Standardized icon sizes and adjusted dropdown/row spacing; simplified
text wrap/truncate behavior for field values; minor status text color
refinement.
* **Bug Fixes**
* Dropdown row-action rendering made more robust to ensure menu wrappers
render reliably.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45936)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
The original problem was that some log rows remain in the hover state
after the cursor moves away
I was just cleaning up some of the styles and noticed that it doesn't
seem to happen anymore so thinking this might have fixed it haha 😅
## Changes involved
- Remove `group-hover` background color change behaviour in `TableCell`
in `ui`
- `TableRow` should handle the background color instead, hence the
changes in `UnifiedLogs.utils` too
- Remove unnecessary `renderLiveRows` in `DataTableInfinite` -> the prop
isn't being passed anywhere
## To test
- [ ] The sticky hover state happens when you hover over the rows very
quickly, so just make sure there's no "stale" hover state in any row eg:
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/b4a91bc6-d269-4ee6-b222-b0476b9feffa"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized hover styling for log rows and table cells to use direct
hover rules for more consistent visual feedback.
* Adjusted table cell hover/transition behavior to simplify styling
while preserving layout and checkbox spacing.
* Streamlined the data table API by removing the custom live-row
rendering override.
* Made the resizable panel’s minimum size dynamic based on dock
position.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45933)
<!-- review_stack_entry_end -->
<!-- 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?
Tidying up the bottom panel in unified logs. Taking care of some visual
quirks etc. Also preparing this area to house some other future concepts
via tabs.
| Before | After |
|--------|--------|
| <img width="828" height="384" alt="Screenshot 2026-04-30 at 11 24 09"
src="https://github.com/user-attachments/assets/804bdf1c-7cdb-4dd8-bf1e-31c434ef1436"
/> | <img width="830" height="407" alt="Screenshot 2026-04-30 at 11 22
53"
src="https://github.com/user-attachments/assets/28555efe-f893-4bae-bcb0-284e6db733e6"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Redesigned service flow panel with Overview and Raw JSON tabs
* Added Previous/Next navigation controls with Arrow Up/Down keyboard
support
* New detail components and section headers with icons for clearer
organization
* Improved Postgres detail view and message/session display
* **Bug Fixes / Changes**
* Removed legacy header UI and related controls
* **UI / Style**
* Enhanced copy-to-clipboard feedback animation
* Updated "Load more" button styling
* Adjusted panel sizing for improved resizing behavior
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ali Waseem <waseema393@gmail.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>
## 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?
A little bit of tidy up here so the header area of unified logs isn't so
dominant. Moved actions to the same line as search bar and made other
parts a little more subtle, so the focus reamains on the logs
themselves.
| Before | After |
|--------|--------|
| <img width="980" height="213" alt="Screenshot 2026-04-27 at 11 47 37"
src="https://github.com/user-attachments/assets/ae22e7dd-272f-4433-a270-67b550a00536"
/> | <img width="893" height="153" alt="Screenshot 2026-04-27 at 12 27
17"
src="https://github.com/user-attachments/assets/87b8cfc9-66a4-4634-a3c6-c45e4b8fc486"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Keyboard shortcut to toggle filter visibility in logs.
* Consolidated top bar with refresh, view options, download, and live
controls—desktop and mobile optimized.
* **Style**
* More compact, organized header with tooltips showing live status and
shortcut hints.
* Reduced filter input typography and streamlined mobile filter trigger.
* **Other**
* Side panel sizing and logs area layout refined for clearer visuals and
consistent header/body styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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.
## 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
In order to update to react 19, we need to update several dependencies
## Solution
- migrate to the `radix` umbrella package to ease upgrade
- update some dependencies
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Consolidated Radix UI usage to a single unified package across apps
and packages, updated package manifests and workspace catalog entries.
No user-facing behavior, visuals, or public APIs changed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## 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?
This changes the guard to expose unified logs to Enterprise.
**To test:**
- Create an Enterprise org.
- Go to a project and then Logs.
- Default view should be unified logs (with a CTA offering to switch
back to old logs).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added enterprise/Supabase-org eligibility checks and loading state for
the unified logs preview.
* **UX**
* Updated messaging to state unified logs are only available to
Enterprise plan organizations.
* Sidebar and filter panels now show unified-logs preview panels based
on eligibility.
* **Analytics**
* Track unified logs row clicks with a new telemetry event.
* **Bug Fixes**
* Prevent navigation until unified-logs eligibility and preview flag
loading are resolved.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
- Migrates all 11 `useHotKey` call sites across 9 files to
`useShortcut`, backed by `SHORTCUT_DEFINITIONS` in
`state/shortcuts/registry.ts`.
- Adds 10 new registry entries (all `showInSettings: false` to keep
behavior identical to today — these were not previously
user-configurable).
- Deletes `apps/studio/hooks/ui/useHotKey.ts`.
- Simplifies `ActionBar.handleSave` — the legacy hook passed a
`KeyboardEvent` the callback used for `preventDefault`/`stopPropagation`
and a textarea-plain-Enter guard; all of that is redundant under
`useShortcut` (TanStack handles default/propagation; `Mod+Enter` never
fires on plain Enter).
- Removes a stale commented-out `useHotKey` reference in
`DataTableFilterCommand.tsx`.
Part of FE-3025 (legacy hotkey hook cleanup). `useKeyboardShortcuts` in
`grid/components/common/Hooks.tsx` will be migrated in a follow-up.
## Test plan
All shortcuts should still fire with **Cmd** (macOS) / **Ctrl**
(Win/Linux).
**Table Editor — operation queue** (requires pending unsaved edits on a
row)
- [x] `Cmd+S` saves pending edits
- [x] `Cmd+.` toggles the operation queue side panel
- [x] `Cmd+Z` undoes the latest edit and re-fetches the affected table
rows
- [x] With no pending edits, none of the above fire (gated by
`isEnabled`)
**Table Editor — side panel editor forms** (row, table, column, policy,
etc.)
- [x] `Cmd+Enter` submits the form when the panel is visible
- [x] Does not submit if the form is disabled/loading or the panel is
hidden
**Unified Logs — data table**
- [x] `Cmd+B` toggles the filter controls sidebar (desktop)
- [x] `Cmd+B` opens the filter drawer (mobile, `<sm` breakpoint)
- [x] `Cmd+Esc` resets active column filters (reset button visible)
- [x] `Cmd+U` resets column order + visibility
- [x] `Cmd+J` toggles live mode
**Unified Logs — reset focus**
- [x] `Cmd+.` blurs the currently focused element / resets focus to body
**AI Assistant panel**
- [x] While editing a message, `Cmd+Esc` cancels the edit
**Regression checks**
- [x] `pnpm --filter=studio typecheck` passes (verified locally)
- [x] None of the new shortcut entries appear in Account → Preferences →
Keyboard shortcuts (all `showInSettings: false`)
- [x] Existing shortcuts (`Cmd+K`, `Cmd+I`, `Cmd+E`, results
copy/download) still work unchanged
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Refactor
* Implemented a centralized keyboard shortcut registry system for
managing shortcuts consistently across the application
* Updated multiple UI components throughout the interface to use the new
shortcut management system
* All existing keyboard shortcuts continue to function without any
changes in behavior or user experience
## Chores
* Removed legacy keyboard shortcut hook implementation
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
While trying to update `react` to version `19`, I noticed type related
errors that can be fixed in version `18`, mostly usage of `JSX.Element`
instead of `ReactNode`.
## Solution
- Use `ReactNode` instead of `JSX.Element`
- Fix some invalid usage of `rechart`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Refactor**
* Standardized React component type annotations across the codebase for
improved type consistency and flexibility.
* Updated component prop types to accept a broader range of renderable
content.
* **Bug Fixes**
* Adjusted chart layout positioning to improve visual alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Component update.
## What is the current behaviour?
TanStack tables in the repo are split between the shared `TableHeadSort`
primitive and the older Studio-local `DataTableColumnHeader` helper,
which makes the sorting UI and integration path inconsistent.
If you were to just use `DataTableColumnHeader` in `ui-patterns/Table`,
you’d get a very different visual result to the `TableHeadSort` UI you
see in most other tables.
## What is the new behaviour?
Adds a shared `TanStackTableHeadSort` adapter in `ui-patterns/Table`,
backed by the existing `TableHeadSort` primitive, and switches the
webhook table plus the design-system TanStack demo to that canonical
path. `DataTableColumnHeader` stays as a deprecated wrapper for now,
Studio gets a lint guard to block new imports of it, and the table docs
now point TanStack tables at the shared adapter explicitly.
## To test
Check out column sorting on the Platform Webhook endpoint deliveries
table.
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>
This pull request standardizes the usage of props and value types for
the `ResizablePanelGroup` and `ResizablePanel` components across
multiple files in the codebase. Specifically, it replaces the deprecated
`direction` prop with `orientation`, and updates numeric prop values
(such as `defaultSize`, `minSize`, and `maxSize`) to be passed as
strings. This ensures consistency with the updated component API and
improves type safety.
**Component API Updates:**
* Replaced the `direction` prop with `orientation` for all usages of
`ResizablePanelGroup`
* Updated all `ResizablePanel` props (`defaultSize`, `minSize`,
`maxSize`) to be passed as strings instead of numbers, ensuring
compatibility with the latest API requirements.
* Removed deprecated or unnecessary props such as `order` from
`ResizablePanel` components, and ensured all size-related props are
consistently formatted as strings.
This pull request upgrades the `react-resizable-panels` dependency from
version 2.x to 3.x. It also includes some minor improvements to
component props and key usage for React elements.
**Dependency upgrade:**
* Upgraded `react-resizable-panels` from version 2.1.4 to 3.0.0.
**Component improvements:**
* Added a `key` prop to the `ResizablePanelGroup` in `LogTable.tsx` and
to action buttons in `UnifiedLogs.tsx` to help React identify elements
more efficiently.
* Ensured unique `key` props for icons rendered in a map in
`FilterSideBar.tsx` to prevent React warnings.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added OpenTelemetry Protocol (OTLP) as a log drain destination with
configurable endpoint, protocol (HTTP/Protobuf), gzip compression, and
custom headers.
* OTLP appears as a selectable destination in the Log Drains UI with its
own icon and form fields.
* **Documentation**
* Added a full OTLP guide including HTTP/Protobuf details, Collector
example, and authentication examples.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard
* Forgot to add ui changes lol
* Clean uop
* 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.
* fix: field reference button padding
* fix: remove overriding button style on field ref button
* fix: tidy up the asChild stuff on side panel trigger element
* fix: bunch of type errors on logs sidebar
Theres a temp any fix in there dont kill me frontend team :D
* feat: add to new logs sidebar too
* feat: add to download dropdown menus
* chore: alphabetical order on new logs dropdown
* chore: add target blank to sheet footer
* fix: gap between buttons on old logs toolbar
* feat: add a separator on old logs
* style: new logs top buttons correct types
* 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
