## Context
As per PR title - there's already a keyboard shortcut mapping for the
live mode toggle that was originally present in `UnifiedLogs`, so this
reuses that.
Opting for a more explicit tooltip copy as well as "Live" doesn't really
explain what it does
<img width="257" height="82" alt="image"
src="https://github.com/user-attachments/assets/2159eef3-6291-4fdc-93ca-da706c8688f0"
/>
<img width="195" height="101" alt="image"
src="https://github.com/user-attachments/assets/0d5d211c-af66-406d-9cff-7de7b15f0892"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added keyboard shortcut support for toggling live updates in database
connections.
* Added shortcut guidance to the Live/Pause control.
* Resuming live updates now refreshes activity immediately and updates
the displayed timestamp.
* **Bug Fixes**
* Improved live-refresh controls and messaging to clearly reflect the
refresh cadence.
<!-- 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?
UI / design-system consistency (accessibility).
## What is the current behavior?
Keyboard focus rings are inconsistent across Studio and `packages/ui`:
- Custom Button uses thick `outline` with per-variant colours (brand /
grey / destructive / warning)
- Form controls use muted grey rings (`ring-background-control`)
- Tabs / NavMenu / Radio use soft brand `ring-ring`
- Studio `.inset-focus` uses dark green `outline-brand-600`
Related: [DEPR-354](https://linear.app/supabase/issue/DEPR-354).
## What is the new behavior?
One shared focus recipe, exposed as Tailwind `@utility` classes in
`packages/config/css/utilities.css`:
| Utility | Use when |
| --- | --- |
| `focus-ring` | Buttons, inputs, most controls (offset ring) |
| `focus-inset` | Dense/flush surfaces such as interactive table rows
(renamed from `inset-focus`) |
```txt
# focus-ring
outline-hidden
focus-visible:ring-2
focus-visible:ring-ring
focus-visible:ring-offset-2
focus-visible:ring-offset-background
```
Applied on Button, shadcn form controls, Menu/NavMenu, Command palette
trigger, Studio table rows, and related call sites. Documented in the
design-system accessibility docs. Variants do not change focus ring
colour.
When the ring must appear on a different element than the focused one
(e.g. Menu + ProductMenu `Link` via `group-focus-visible`, or InputGroup
via `:has()`), keep an explicit ring stack. The utilities bake in
`:focus-visible` on the same element.
## Additional context
**Out of scope**
- Full `packages/ui` / Studio / www sweep
- Legacy Studio form-group green box-shadow cleanup
- ESLint rule for bare `outline-none`
## Test plan
Prefer Safari (“hard mode” for `tabIndex`). Expect one soft brand ring
everywhere: not grey, not solid green outline.
### Design system
- [ ]
[Accessibility](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/accessibility):
recipe docs match what you see
- [ ]
[Button](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/button):
Tab primary / default / danger; same ring colour
- [ ] [Table → Row-level
navigation](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/table#row-level-navigation):
Tab an interactive row; inset outline (`focus-inset`) sits inside the
row
### Studio
- [ ] **Org home → table view** (`/organizations/_` or org projects):
switch to the table layout, Tab onto a project row; inset outline sits
inside the row (list/card view uses CardButton, not `focus-inset`)
- [ ] **Project sidebar** (Database, Auth, Storage, …): Tab the main
product nav links; ring follows the focused item (not the nested section
menus like Tables / Roles)
- [ ] **Storage → Files**: Tab a bucket row; same inset outline as org
table rows
- [ ] **Project Settings → General** (or Compute and Disk): Tab through
inputs, checkboxes, switches, selects; same offset ring, no ring on
mouse click
- [ ] **Header ⌘K** (desktop width): Tab to the search control after
Feedback; same soft brand `focus-ring` (was a thicker
`ring-border-strong` before)
- [ ] **Table Editor or SQL Editor tabs**: focus a tab, Tab to × if
active; close shows a ring
- [ ] **Light + dark**: ring stays visible against both backgrounds
## What kind of change does this PR introduce?
A11y cleanup follow-up to #47984 /
[DEPR-626](https://linear.app/supabase/issue/DEPR-626).
## What is the current behavior?
Studio had 82 ratcheted `supabase/require-explicit-tabindex` violations
(raw `<button>` / `role="button"` without explicit `tabIndex`).
## What is the new behavior?
- Explicit `tabIndex={0}` (or disabled → `-1`) on those Studio call
sites across nav, `components/ui`, Database, Storage, and the remainder
- Ratchet baseline cleared (**82 → 0**) and the rule **removed from the
Studio ratchet** (debt is gone; ratchet is temporary)
- Rule remains a shared **`warn`** for now — promoting to `error` (and
sweeping www/docs/design-system) is a follow-up
- Also fixed the learn/ui-library call sites that surfaced while
experimenting with error promotion
- Small follow-ups where making controls focusable exposed gaps:
accessible names, disabled/focus consistency, focus-ring polish on
To-test surfaces, home section `KeyboardSensor`, and an E2E locator
tightened after `aria-label="Remove column"`
Prefer migrating to `Button` from `ui` in future touch-ups; this PR
takes the minimal path so Studio debt can stay at zero.
## Additional context
Batches landed together so baseline conflicts stayed simple while
chipping away:
- Hotspots / nav (FirstLevelNav, Marketplace, AttachmentUpload, Column,
Tabs, …)
- `components/ui` shared
- Database + Storage
- Remainder
**Out of scope / intentional deferrals**
- Promoting `supabase/require-explicit-tabindex` to a lint **error**
(follow-up after www/docs/design-system sweeps)
- Tabs/Radio roving, tooltips, context menus, in-menu items
- Full keyboard-accessible tab-close UX (close stays hover +
`tabIndex={-1}`; context menu still closes tabs)
- Data API docs links (`/project/<ref>/api` redirect)
**Reviewer notes**
- Rule only flags raw `<button>` / `role="button"` without a `tabIndex`
prop. `Button` from `ui` already bakes this in
- `tabIndex={-1}` is intentional for disabled controls, in-menu /
roving-focus children, and hover-only tab close
- For dnd-kit grips, put `tabIndex` **after** `{...attributes}` so it
isn’t overwritten (TS2783)
### To test
Use **Safari** with macOS Keyboard navigation **off** (System Settings →
Keyboard). Chrome once for a sanity pass. For each surface below: Tab
until the control is focused, then activate with Enter/Space where
relevant.
1. **API Docs side panel** (Table Editor → open a table → **API docs**)
- Floating API Docs panel — **not** `/project/<ref>/api` (that redirects
to Data API docs; language ToggleGroup uses arrow keys; links are out of
scope)
- Left nav buttons — Tab through several and activate one; active
highlight / navigation still works
2. **Integrations → Marketplace**
- Enable **Integrations layout** feature preview first (avatar menu →
Feature previews)
- `/org/<slug>/integrations` or project integrations marketplace
- “Clear all”, grid/list toggles — Tab + activate
3. **Table Editor → create a table → Columns**
- Drag handles only appear while **creating** (not when editing an
existing table)
- Tab to grip / remove (X) / sensitive-data eye if shown
4. **Project Home** — section drag handles
- Tab to a grip (visible focus ring)
- Optional: Space to pick up, arrows to move, Space/Esc to drop
(KeyboardSensor added)
- Mouse dnd still works
5. **Storage → Policies** — expand/collapse bucket list chevron
(design-system focus ring, no stuck grey open bg)
6. **Support form** (Help → Support) — attachment remove (×) and
add-attachment control when visible
Disabled controls should be **skipped** by Tab.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility Improvements**
* Improved keyboard navigation throughout Studio by explicitly managing
focus (`tabIndex`) across many interactive controls (menus, tabs,
tables, charts, dialogs, navigation, and form actions).
* Disabled or non-interactive controls are now removed from the tab
order (or made unfocusable), while available actions remain reachable.
* Ensured `type="button"` on relevant controls to prevent unintended
submissions, and refined keyboard focus behavior for various toggles and
copy/remove actions.
* **Chores**
* Updated the ESLint rule baseline configuration to match the new focus
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Offshoot from https://github.com/supabase/supabase/pull/47743.
[Linear
issue](https://linear.app/supabase/issue/FE-3939/add-user-logs-filter-to-the-logs-page)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a `user` filter to Unified Logs with a user picker (email or
ID).
* Added “View user logs” actions from the Users table to jump to Unified
Logs.
* **Bug Fixes**
* Updated Unified Logs searching so default log-type restrictions no
longer block user-attributed results.
* **UI Updates**
* Unified Logs filter bar and reset behavior now include clearing the
user filter.
* Improved empty-state messaging when the selected user filter isn’t
supported.
* Refreshed highlighted styling in command list items.
* **Tests**
* Expanded coverage for user filter configuration and query edge cases.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: kemal.earth <606977+kemaldotearth@users.noreply.github.com>
Co-authored-by: kemal <hello@kemal.earth>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
The "Only" button in the Unified Logs filter facets had no background,
so it overlapped the label/count behind it on hover. Added a solid
`bg-background`, set the label to 10px, and capitalized it to "Only".
Applied to both the sync and async filter checkbox components.
## Before / After
Button now sits on an opaque background and no longer bleeds into the
row below.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved checkbox filter hover interactions by hiding count markers
when hovering over an option.
* Updated the “Only” control styling for clearer visibility, alignment,
and hover behavior.
* Capitalized the control label to “Only” for improved readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Problem
In the unified logs dashboard, clicking an activity bar in the chart
restarted the fly-by entrance animation instead of selecting that bar.
There was also no way to select a single bar by clicking it (only
drag-to-select worked), and the selection menu was centered over the
selection rather than anchored to its start.
## Fix
- Disabled Recharts' `isAnimationActive` on the stacked `Bar` elements
so re-renders from selection state no longer replay the entrance
animation.
- Clicking a single bar now selects that bar's full time bucket and
opens the "Filter logs to selected range" menu, the same as dragging
across it.
- The menu is anchored to the start (leftmost pixel) of the selection
instead of the mouse release position.
## How to test
- Open a project's unified logs page
- Wait for the activity chart to finish its initial load
- Click on a single bar
- Expected result: the bar is highlighted, the chart does not replay its
entrance animation, and the range-filter menu appears anchored at the
start of that bar
- Drag across multiple bars
- Expected result: the range-filter menu appears anchored at the start
of the dragged selection, not centered over it
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Bug Fixes**
- Fixed chart highlight popovers to anchor consistently to the start of
the selected range.
- Improved popover behavior so it updates correctly when the position
changes.
- Corrected zoom-in filtering when the selected range contains a single
timestamp.
- **UI Improvements**
- Reduced conflicts between tooltips and selection popovers by rendering
tooltip content only when appropriate.
- Disabled stacked-bar animations for error/warning/success to make
chart interactions feel steadier.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
UI polish
## What is the current behavior?
Unified logs row chrome is slightly misaligned (checkbox vs filter
toggle, uneven gaps around the level dot), success grey is too dark and
doesn’t match the Level key, and log-type icons read a bit heavy.
## What is the new behavior?
- Aligns the row checkbox with the filter sidebar toggle and spaces the
level dot evenly between checkbox and timestamp
- Drops the checkbox `translate-y` nudge in favour of normal middle
alignment
- Introduces `--chart-success` so the chart and Level key/dots share a
lighter grey
- Softens log-type icon colour on each row
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="1293"
src="https://github.com/user-attachments/assets/af7ab83f-8917-41cb-99f3-1c1f92df769e"
/> | <img width="1024" height="759" alt="52159"
src="https://github.com/user-attachments/assets/9b859308-2101-4a02-bdc1-75e5750f84fa"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved Unified Logs table spacing and alignment, including narrower
selection and level columns.
* Refined checkbox and date-cell presentation for a cleaner layout.
* Updated log type icons to use muted foreground styling.
* **Bug Fixes**
* Success statuses and chart indicators now consistently use the
dedicated success color across light and dark themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Increases the click area of unified logs filter
### Before
<img width="1070" height="828" alt="image"
src="https://github.com/user-attachments/assets/7e2a45de-7844-4feb-accb-fdaecfa1066c"
/>
### After
<img width="623" height="130" alt="image"
src="https://github.com/user-attachments/assets/c8310975-1f2f-42dc-aaff-fdcd112b1bee"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved spacing and alignment in filter checkbox rows.
* Adjusted the expand/collapse control and “only” button positioning for
a cleaner layout.
* Refined nested option connector placement and sizing for better visual
consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
- Fix unreadable "Large ranges may result in memory errors" warning text
in the Logs date picker — a stray `text-warning-foreground` class (dark
ink) was winning over `text-warning` on the dark `bg-warning-300` fill.
- Fix "Search collections..." sidebar wrapper background mismatch —
`bg-background-200` now resolves to the elevated `--card` surface
instead of `--background`, so it no longer matches the sidebar's
`bg-dash-sidebar`.
- Fix the Unified Logs "Live" toggle button rendering blue text instead
of white when active — a leftover `border-info text-info` override was
fighting the `primary` variant's own text color, now that `--info`
resolves to a more distinct blue.
All three are contrast/color regressions surfaced by the recent
design-system color token changes.
## Test plan
- [ ] Open a project's Logs Explorer, pick a large date range, confirm
the warning text is readable
- [ ] Check the Logs sidebar "Search collections..." box background
matches the rest of the sidebar in both light and dark mode
- [ ] Toggle "Live" mode in Unified Logs and confirm the button text is
white/legible on the green background
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated the large-range warning banner appearance in Logs settings.
* Refined the Logs sidebar header background styling for a more
consistent look.
* Simplified the DataTable live button styling behavior by removing
conditional class composition while preserving the existing live-mode
visuals.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Couple of changes to the Unified Logs logic, mainly to align unified
logs filters with legacy logs behaviour
## Changes involved
- Postgrest + Storage logs will no longer overlap with edge logs source
- They will specifically just pull logs from their own sources only
- This will match legacy logs behaviour + also the observability
overview behaviour as well
- Re-introduce "API Gateway" as a log type (was there in the old UI)
- Added service filters for convenience
<img width="271" height="233" alt="image"
src="https://github.com/user-attachments/assets/6264b7c5-e3e8-4db8-a378-4d8c46af3d62"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added **API Gateway** (“Edge”) logs to Unified Logs, including new
sub-filters for auth, storage, and postgrest activity.
* Updated the default log selection to include API Gateway logs.
* **Bug Fixes**
* Improved how log types are bucketed and filtered, ensuring edge,
postgrest, and storage sources display under the correct views and
toggles.
* Refined “connection logs” filtering so results and counts remain
consistent with the selected options.
* **Style**
* Refined the Unified Logs filter checkbox layout and nested
expand/collapse controls.
* **Tests**
* Updated and expanded query tests to cover the new edge filter
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.
## Solution
- Remove the UI patterns index file
- Fix invalid impors
## Problem
There's still more unused code in the repository which slows down
everything:
- checkouts
- tooling
- probably builds (not sure how good turbopack is at handling this)
## Solution
- remove old unused code
- remove more recent code after checking git history to ensure it's not
unfinished/ongoing work
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Removed several outdated UI components and helper utilities to
streamline the app.
* Cleaned up unused analytics, database, and observability hooks and
queries.
* **Refactor**
* Simplified data table, unified logs, and assistant panel internals by
removing legacy display and navigation pieces.
* **Bug Fixes**
* Reduced the chance of showing stale or inconsistent status, chart, and
metric views by eliminating obsolete display paths.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
We're progressively opting in users to use the new Unified Logs UI 🙂🙏
## Changes involved
- [ ] Removed flag for controlling visibility of unified logs feature
preview
- [ ] Added flag for controlling default opt in behaviour of unified
logs
- [ ] Small tweak to Unified Logs banner is default opted in (Just show
"New" and more info CTA)
- Disabling, then enabling again will thereafter show the existing "Go
back to old logs CTA"
<img width="290" height="166" alt="image"
src="https://github.com/user-attachments/assets/a2c46ce1-63c3-490c-bc7d-fc1254982dbe"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Unified Logs preview now derives default opt-in state from a new
default-opt-in flag and exposes `isDefaultOptIn`.
* **Bug Fixes**
* Removed eligibility-based gating so the “Beta” badge and Unified Logs
banner render consistently across logs screens.
* Unified Logs banner was refactored to handle enable/disable and
navigation internally, while remaining shown unconditionally.
* **Tests**
* Updated mocks and assertions to reflect the revised preview/banner
enablement and dismissal logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Context
For unified logs, postgres connection logs are being filtered out by
default previously from this
[PR](https://github.com/supabase/supabase/pull/46371) due to its noise.
We're opting to show the connection logs by default instead so this PR
changes that behaviour + adjusts the connection logs filter UI
In particular this is timely as we're adjusting how the DB will log
connections based on this
[changelog](https://github.com/orgs/supabase/discussions/47197), and
we'd want to make sure that users can find their connection logs easily
## Changes involved
- [ ] Search parameter renamed to `show_connection_logs` so that we
don't need to flip its boolean value for the checkbox
- [ ] `show_connection_logs` is subsequently `true` by default
- [ ] Shift connection logs filter to a nested option under Postgres log
type
- Makes it more visual that connection logs are related to the Postgres
service
- Currently its hidden all the way in the bottom under "Misc" which can
be easily missed
- <img width="302" height="151" alt="image"
src="https://github.com/user-attachments/assets/e3e61ac7-aa16-4769-a89e-e911daacea27"
/>
- <img width="289" height="156" alt="image"
src="https://github.com/user-attachments/assets/c70ac7c4-d2f7-4961-a6d6-6653c59d8548"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Unified Logs now supports expandable, nested “Log Type” filter options
for drilling into connection-related entries.
* **UI Improvements**
* Connection logs are visible by default; the visibility control has
been integrated into the main filter experience.
* Filter panels are now streamlined, and key filters (such as “Level”,
“Status”, and “Method”) have been reordered and adjusted for a cleaner
default state.
* **Bug Fixes**
* Updated Unified Logs query/test behavior to match the new
connection-log visibility logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
For unified logs, we're currently pulling data from `edge_logs` and
filtering on path like `/rest` to fill the `Postgrest logs`
However, `edge_logs` are logs from the API Gateway and Postgrest logs
has its own source `postgrest_logs`
## Changes involved
- Update source for postgrest logs to include `postgrest_logs`
- Improve labelling of log types
- Improve overflow scroll container max height of
`DataTableFilterCheckbox`
- Previously its max height of 200px was nicely fitting the height of 6
options, so there's no visual indication that there's more to scroll.
Hence adjusting to 215px to "peek" the next option as below:
<img width="283" height="315" alt="image"
src="https://github.com/user-attachments/assets/eb962d66-d575-4ee9-9f80-eaa2af0278ef"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Enhanced log type filter labels in the Unified Logs interface for
improved readability.
* Expanded PostgREST log detection and categorization.
* Increased vertical space in checkbox filter dropdowns for better
content visibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
JFYI the originally problem from the ticket was that unified logs wasn't
loading more automatically when scrolling to the bottom
However, I can't reproduce that issue as it seems to be working as
intended. But opting to triggering the load more when scrolling slightly
before hitting the bottom of the page for a smoother UX
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Optimized infinite-scroll behavior in data tables by refining when the
loading trigger activates. Content now begins loading earlier as users
scroll, rather than waiting until reaching the absolute bottom of the
table. This responsive adjustment improves overall performance and user
experience when navigating through tables with large datasets, reducing
perceived delays.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Support horizontal scrolling for unified logs
## Changes involved
Also chucked in some refactors and clean up
- `DataTableInfinite` to directly import components from the `ui`
package rather than a separate `Table` component that just applies class
names to the table components from `ui`
- Adjust footer of unified logs such that it'll remain in place despite
horizontally scrolling unified logs
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Style**
* Improved infinite data table layout with consistent row/cell styling
across loading, empty, and error states.
* Sticky header behavior is now more reliably applied.
* “Load more” footer button uses a smaller sizing for a cleaner footer
layout.
* **Refactor**
* Updated table rendering to use shared UI primitives and improved
scroll/container handling for the infinite table experience.
* **Chores**
* Simplified the underlying table component structure for consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Jordi Enric <37541088+jordienr@users.noreply.github.com>
## Problem
When [#46812](https://github.com/supabase/supabase/pull/46812) was
scoped down to "sidebar visual changes only", Kemal's UI redesign of the
Unified Logs sidebar banners was unintentionally reverted back to the
older full-bleed strip layout. The shared `UnifiedLogsBanner` component
survived, but his actual visual design did not.
This PR brings back just Kemal's banner UI changes, with nothing else
from that branch.
## Changes
- **promo variant** (`LogsSidebarMenuV2`): bordered card with a "New"
badge, an "Introducing unified logs" heading, and an "Enable preview"
button + "More information" tooltip button
- **utility variant** (`FilterSideBar`): bordered card for the "Go back
to old logs" action with a "Switch back" tooltip button
- Restore the `mx-4 mt-4` placement in both consumers
Adapted to the current `Button` `variant` API (the original used the
now-removed `type` prop).
## Testing
- `pnpm lint --filter=studio`
- Visual check of the Logs sidebar for an account eligible for Unified
Logs (promo card) and one already on Unified Logs (utility card)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a "New" badge indicator to the logs interface.
* **Style**
* Redesigned the unified logs banner with a new card-based layout.
* Updated the "Go back to old logs" option with improved visual
presentation and tooltip guidance.
* Adjusted spacing and alignment of the banner component for better
visual hierarchy.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: kemal <hello@kemal.earth>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Visual cleanup of the Logs sidebar (unified logs):
- Restyle the "Go back to old logs" and "Try Unified Logs" banners as
full-bleed bordered strips (no card), with an icon-only switch-back
button and a tooltip
- Add a "Beta" badge next to the "Logs" sidebar title
- Rename the product from "Logs & Analytics" to "Logs"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added Unified Logs banner with “Try Unified Logs” and “More
information” actions, plus a “Go back to old logs” utility layout.
* Show a **“Beta”** badge for Unified Logs eligibility.
* **UX Updates**
* Updated the Logs experience to consistently display under the
**“Logs”** product layout.
* **Tests / Documentation**
* Updated end-to-end checks and examples to expect the **“Logs”**
heading text exactly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: kemal <hello@kemal.earth>
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.
