## 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 -->
## 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 -->
## 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>
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 -->
## 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 -->
## 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 -->
* 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>
Joshen Lim