## 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 -->
## 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
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 -->
## 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>
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>
* Improve function logs styling + add copy button
* Add tooltips for buttons in toolbar
* Remove 'info' from levels
* Add export logs to csv and json functionality
* Add duration selection for download logs if no time range specified in search
* Fix TS
* Fix TS
* Update DataTableColumnStatusCode.tsx
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* Fix z-index position of row
* Fix column widths to make it fit a laptop viewport better
* Fix auto fetching when scrolling to the bottom
* Small style fixes + decouple count loading state from table loading state
* Refactor row uuid to just id, add de-duping logic to logs data, standardise unified logs query options
* Clean up logs
* Misc styling tweaks
* Reinstate prev cursor and direction for live mode
* Clean
* Revert text sizes
* Remove now resolved comments
* init new unified page
* moar logs
* init
* add infinite and live logs example
* Update useLogsPreview.tsx
* add more sources
* wrapped auth logs with edge logs
* add role and user id
* move unified logs
* init
* move demo pages. create a new directory to work in
* extracted beta unified logs into own components
* add example base page and components
* add new files to use actual logging query
* more organization
* change import
* adds new logs page. adds new query
* add data table to UI pacakges
* revert
* table styles
* text size
* add timestamp, table, icons for log types, status code styling
* add host
* add log count to edge functions
* starts to add dynamic filtering
* spiking trace UI
* Update status-code.ts
* add new linik
* now using POST
* fix chart data for default 1 hour view
* update API to accept POST requests
* new filters
* Update level.ts
* fixed up chart to work on level filter. split up the logic into new files
* prep for log type
* prepped query for WHERE
* fix: issue with white space in url param column parsing
* level param now being removed correctly.
* fix issue with chart showing wrong buckets for different time ranges
* remove old query
* refactor the queries into function for each source
* total count fixed
* lots of layout
* start fixing log counts
* comment out min and max for a while
* added trace logging prototype in
* random trace logs added for demo
* added logs and ui to view logs if any
* add Auth user
* fix the live logs issue
* some left over code
* Midway
* First pass refactor + clean up + reorganize files
* Fix TS issues
* Remove unused files
* Clean up
* Final clean up
* more clean up
* More clean up
* Remove unused packages
* Fix
* Lint
* Add feature flag for unified logs
* Refactor
* Remove trace UI
* Snake case log types
* more clean up
* More clean up
* Fix ts
* more clean up
* fixes
* add flag check and redirect if flag is false
* Update middleware.ts
* Nit lint
* Fix
* Last refactors
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
