<!-- ccr-slack-attribution -->
_Requested by **Pam Chia** · [Slack
thread](https://supabase.slack.com/archives/C076KTY11DF/p1786930264662829?thread_ts=1786930264.662829&cid=C076KTY11DF)_
## 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?
Bug fix. Two telemetry correctness fixes in the Database Connections
feature preview. No visual changes, no new events.
Linear:
[GROWTH-1107](https://linear.app/supabase/issue/GROWTH-1107/fix-database-connections-feature-preview-banner-dead-end-plus)
## What is the current behavior?
### 1. `query_cancel_button_clicked` cannot tell its two surfaces apart
"Cancel query" is reachable from two places on
`/observability/connections`. One is the three-dot dropdown menu on an
activity row. The other is inside the "Confirm to terminate this
session?" dialog, which offers "Cancel query" alongside "Terminate" when
the session is running a query.
**Before:** both buttons fire `query_cancel_button_clicked` with an
identical payload (`activityState`, `isBlocking`). In analysis the two
are one undifferentiated number, so there is no way to see whether
people cancel straight from the row or only after opening the terminate
dialog and reading the "Cancelling it may solve the problem without
closing the connection" warning. That warning is the main nudge away
from terminating, and today we cannot measure whether it lands.
### 2. The live-mode hotkey fires telemetry for users who do not have
the feature
**Before:** the Mod+J live-mode shortcut is registered whenever the page
mounts, regardless of whether the Database Connections feature preview
is enabled. The live badge, the toggle button and the activity query are
all gated on the feature, so a user without it can press Mod+J, emit
`database_connections_live_mode_clicked`, and see nothing change. Those
events inflate the metric with interactions that had no effect.
## What is the new behavior?
### 1. `query_cancel_button_clicked` carries an `origin`
**After:** the event reports which surface it came from, so the two
flows can be split in analysis. Nothing changes for the user.
`QueryCancelButtonClickedEvent` in
`packages/common/telemetry-constants.ts` gains a required `origin:
'dropdown_menu' | 'terminate_dialog'` property, following the shape
already used by `index_advisor_enable_button_clicked` (`origin: 'banner'
| 'dialog'`). Values are snake_case to match the dominant convention
among the existing `origin` unions in that file. In `ActivityRow.tsx`
the shared `onCancelQuery` handler now takes the origin as an argument
and each of the two call sites passes its own value. Because `track()`
is strictly typed per action, the required property is enforced at
compile time rather than by convention.
### 2. The live-mode hotkey is gated on the feature
**After:** Mod+J only does something, and only reports something, for
users who actually have Database Connections enabled. Everyone else is
unaffected, as before.
`useShortcut` already accepts an `enabled` option that disables the
hotkey and hides the command-menu entry. The registration in
`pages/project/[ref]/observability/connections.tsx` now passes `enabled:
isDatabaseConnectionsEnabled`, reusing the value already read from
`useIsDatabaseConnectionsEnabled()` and already used to gate the
activity query and the visible controls on the same page.
## Additional context
**Scope was reduced from the original plan.** GROWTH-1107 originally
covered four items. #49132 rewrote the Database Connections gating model
and superseded three of them, so only the two above remain:
- The feature preview banner is no longer flag-gated, so there is
nothing to gate on `topForPostgres`.
- `isEnabled` on `database_connections_banner_cta_button_clicked` is now
a real variable rather than a constant, since it is true on the new
"Explore Database Connections" variant. It stays as is.
- The wrong-feature fallback in the feature preview modal no longer
triggers for this preview.
Nothing in that area is touched here. GROWTH-1107 has been updated to
reflect the reduced scope.
**Validation** (run locally):
- `tsc --noEmit` in `packages/common` and in `apps/studio`. Studio
reports the same two pre-existing errors before and after this change
and none in the changed files.
- `eslint` on both changed studio files: clean. `lint:ratchet`: passes.
- `vitest --run
components/interfaces/Observability/DatabaseConnections`: 36 passed.
- Prettier check on all three files: clean.
## To test
Verified in a real browser on the studio-staging Vercel preview,
checking telemetry at the wire level (network inspection of `POST
/platform/telemetry/event`). Checks derived from the diff, covering both
fixes and their negative cases.
- [x] Mod+J with the Database Connections feature preview off: no
`database_connections_live_mode_clicked` request fired and no UI change;
the page stays on the enable-preview gate screen
- [x] Mod+J with the preview on: the live badge visibly toggles and
exactly one event fires per press (`newState: "disabled"` on the first
press since live mode starts on by default, then `"enabled"` on the
second)
- [x] "Cancel query" from the activity row dropdown on an active
`pg_sleep(120)` session: `query_cancel_button_clicked` with
`custom_properties:
{"activityState":"active","isBlocking":false,"origin":"dropdown_menu"}`
- [x] "Cancel query" inside the "Confirm to terminate this session?"
dialog: `query_cancel_button_clicked` with `custom_properties:
{"activityState":"active","isBlocking":false,"origin":"terminate_dialog"}`
Opening the terminate dialog in the last check also fired
`session_terminate_button_clicked`, correctly distinct from the cancel
event. No new console errors versus the page-load baseline across all
four checks.
Co-authored-by: Claude <noreply@anthropic.com>
## Context
For Database Connections - the PIDs on the overview cards are selectable
such that clicking on them should scroll the browser down to where the
row is.
However, if the selected PID isn't rendered due to the applied filters,
clicking on it will seemingly do nothing. Changes here hence opt to
remove all filters then scroll to the selected PID into view, so that
users can always quickly find which PID the overview card is
referencing.
Also chucked in some refactors to centralize the management of filters,
and functionality of selecting a PID into their own hooks
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added shared filtering for database activity by state, role,
application, search text, and view.
* Activity filters are now preserved in the URL for easier navigation
and sharing.
* Selecting activity metrics or process IDs now automatically reveals
the relevant activity row.
* Blocker view highlights root activities that are blocking other
queries.
* **Bug Fixes**
* Improved selection behavior when the chosen activity is hidden by
active filters.
* **Tests**
* Added coverage for individual, combined, case-insensitive, and
blocker-specific filtering scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Related to database connections - specifically for cancelling queries or
terminating sessions
PIDs can be re-used, so a more accurate check is to use both PID and
`backend_start` to uniquely identify the session to cancel or terminate
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved query cancellation and session termination reliability by
verifying the active database session before taking action.
* Prevented actions from affecting a different session that reused the
same process ID.
* Added clearer guidance to refresh when a session has changed or is no
longer available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Related to Database Connections
- Adds a "cancel query" action for "active" sessions using
`pg_cancel_backend`
- Gentler alternative as the connection stays alive, unlike terminating
the session
- Not applicable for queries idle in transaction as there's no query
running (Disabled in this case)
- Rename "Terminate" to "Terminate session"
- Rename "Abort query" to "Terminate session"
For active queries:
<img width="220" height="135" alt="image"
src="https://github.com/user-attachments/assets/d6ca790d-bb6a-4582-8554-24431388483a"
/>
For idle in txn queries:
<img width="433" height="135" alt="image"
src="https://github.com/user-attachments/assets/615d0651-9f5b-4efc-a5cf-72f93727aa91"
/>
Also updating confirmation modal for terminating session CTA:
For active queries:
<img width="407" height="301" alt="image"
src="https://github.com/user-attachments/assets/e5f56764-11b9-4c10-ba01-d7547aaec872"
/>
All other queries:
<img width="410" height="212" alt="image"
src="https://github.com/user-attachments/assets/8631633f-5d4a-40a7-b089-6980a5180219"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## New Features
- Added a separate **Cancel query** action for active database queries.
- Added **Terminate session** to close connections and roll back active
transactions.
- Added safeguards based on query activity and permissions.
- Added confirmation guidance for active queries, including cancellation
options.
- Added loading, success, and error feedback for query cancellation and
session termination.
- Added telemetry for query-cancellation actions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
As per PR title - brings Database Connections into feature preview
Should be working for both hosted + self-host/local
Also adjusts existing feature previews to remove "New"
- Platform webhooks
- Temporary database access
<img width="600" alt="image"
src="https://github.com/user-attachments/assets/b18ae8ca-ce0b-4649-975c-e70749a87dcd"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a Database Connections preview highlighting live activity, query
blocking detection, session termination, and AI-assisted summaries.
* Added access to project-specific observability connections from the
preview.
* Added a Database Connections entry to the observability menu when
enabled.
* **Improvements**
* Updated feature previews and labels, including changes to “new” status
indicators.
* Added controls to manage Database Connections preview visibility.
* **Bug Fixes**
* Improved blocker detection so results respect the selected role
filters.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Adding telemetry for the following actions on the database connections
page
- Toggling of live mode
- Applying the various filters
- Clicking on the overview metric cards
- Clicking of terminate CTA + Confirm terminate
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Accessibility**
- Added a descriptive label to the AI Assistant actions menu trigger for
improved screen-reader support.
- **Observability**
- Added tracking for database connections interactions: live-mode
toggles, session filter updates, blocker-view toggles, clicks on
observability metric cards, and the session termination flow (both the
terminate action and confirmation submission).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
One for Database Connections - allow a user to view the root blocking
queries
Adds an additional filter button here that toggles the view
<img width="738" height="142" alt="image"
src="https://github.com/user-attachments/assets/9fea17ba-c6f6-419d-8847-47dba67fc00a"
/>
When toggled, will render a list of the _root_ blocking queries - these
are queries that are at the end of the blocking chain (or otherwise the
problematic ones causing other queries to be blocked)
<img width="964" height="420" alt="image"
src="https://github.com/user-attachments/assets/5300f523-6abe-49b6-92d0-7e16bbddd291"
/>
Within this view - you can expand the row to view the blocking chain
<img width="950" height="335" alt="image"
src="https://github.com/user-attachments/assets/bb07095a-3841-4db6-8959-ac2bb264ebf6"
/>
## Other changes involved
- Realised that "Top blocker" overview metric card logic is incorrect
- Was previously naively checking the length of the `blocked_by` array,
but it should be consider the nested chain length instead, so this PR
fixes that
<img width="364" height="108" alt="image"
src="https://github.com/user-attachments/assets/89beccef-f6f0-43d1-9dcf-fc35958b09e5"
/>
- Clicking the PID if highlighted on a metric card will not scroll to
the PID if it's already selected. This PR fixes that
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a **Root blockers** view to highlight sessions that block
others, with expandable blocking chains revealing related waiting
activity.
* **Bug Fixes**
* Updated blocking metrics to use **transitive** blocker counts and
improved cycle protection and behavior when activity records are
missing.
* The blockers view now consistently affects state/application/role
quantities, and **reset filters** clears the view.
* **Refactor / UI**
* Improved the sessions table with grouped/nested rows, clearer waiting
indicators, and more consistent expand/collapse behavior.
* **Tests**
* Expanded coverage for blocking/waiting chain traversal and branching
scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
As per PR title - no functional / visual changes, just some code clean
up / refactor + adding unit tests
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added database connection metrics covering active, blocked, and
idle-in-transaction queries.
* Enhanced insights for the longest-running query and the top blocker
(most queries blocked), including warning indicators based on duration
thresholds.
* **Bug Fixes**
* Improved consistency and accuracy of database-activity calculations in
the connection overview.
* **Refactor**
* Centralized metric derivation so the UI uses the same computed logic
everywhere.
* **Tests**
* Added metric-calculation tests with controlled time to validate
multiple scenarios and warning behaviors.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Tiny one to address for a11y stuff for the spans in the metric cards for
database connections overview section
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved hover and keyboard-focus styling for process ID details in
database observability metrics.
* Added a pointer cursor and smoother visual transitions to make
interactive details easier to identify.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Opting to use native `table` element instead for the roles tooltip in
`DatabaseConnections` to better handle varying role name lengths
### Before
<img width="314" height="226" alt="image"
src="https://github.com/user-attachments/assets/f8a5f7a2-be2f-4ad6-a1f0-7a7812800819"
/>
### After
<img width="332" height="191" alt="image"
src="https://github.com/user-attachments/assets/dcb30f5d-641c-4b42-b31d-bf6d76086791"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved the layout and readability of the “Connections by roles”
tooltip in database observability metrics.
* Role labels and connection counts are now presented in a clearer
tabular format.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
As per PR title - we're currently showing a "danger" state for the
blocked by metric card as long as there's at least query that's blocked.
This may come off as too noisy in a real database scenario hence opting
to fine tune this behaviour a little
## Changes involved
We'll now only show the "danger" state for the blocked by metric card if
any of the blocked queries are blocked for longer than 10 seconds
<img width="356" height="256" alt="image"
src="https://github.com/user-attachments/assets/e7db5d7e-749a-4c4e-b519-9433a639b0a0"
/>
Otherwise will just be a default card
<img width="359" height="266" alt="image"
src="https://github.com/user-attachments/assets/f9aad85f-8d74-4f55-a3c5-a859d46bd8c1"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added clearer blocked-query monitoring, including the longest-blocked
process and duration.
- Added interactive selection for the longest-blocked process.
- **Bug Fixes**
- Improved activity-duration tracking across active and
idle-in-transaction states.
- Blocked-query warnings now reflect duration thresholds rather than
query count alone.
- Prevented negative duration values in blocked-query metrics.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Adds a "Top blocker" overview card for Database Connections
This should provide a better signal if there's any process that's
behaving as a bottleneck for multiple blocked queries
<img width="977" height="256" alt="image"
src="https://github.com/user-attachments/assets/3d5129a8-f0d7-40a6-808e-0d902889d997"
/>
^ We only highlight the card in red if the query is blocking more than 3
other queries to account - otherwise the signal might be too noisy
<img width="965" height="262" alt="image"
src="https://github.com/user-attachments/assets/f3fda77a-8d52-4e5d-8717-66a26f511a3c"
/>
## Other changes involved
- Am swapping the card positions around a little
- Longest running query card shows the PID as the primary information,
followed by the duration of the run
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a **Top blocker** metric to the Database Connections Overview to
highlight the PID/account blocking the most other queries.
* Warning styling now appears when a query blocks more than **3** other
queries.
* Reorganized the metrics layout and ordering for improved visibility
(active, idle-in-transaction, blocked, top blocker, and longest
running).
* **Bug Fixes**
* Updated tooltip and guidance text for clearer explanations of blocked
and idle-in-transaction states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Adds a way to filter against the query string in Database Connections
<img width="682" height="161" alt="image"
src="https://github.com/user-attachments/assets/1ba6d678-553a-4a1a-9da9-412532c626df"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a free-text search filter for database activity sessions.
* Search works alongside existing state, role, and application filters.
* Filter option counts now reflect the current search results.
* **Bug Fixes**
* Improved filter reset behavior to reliably clear search along with all
other selections.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Improving the "blocked by" visualisation for database connections - to
accommodate the situation whereby there might be a chain of blocked
process. Intention is so that users can identify whats the root process
that's blocking everything - and from there decide if they want to
terminate the process or not.
Also brings `ActivityRow` out into its separate file since `Activity` is
getting big
<img width="473" height="299" alt="image"
src="https://github.com/user-attachments/assets/21d0d223-5dbd-49d5-877c-815c78cb7482"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Streamlined the database activity view by separating the single-row
rendering into its own component, keeping the same end-user experience
(status badge, query/“No query”, duration warnings, blocking details,
PID copy, and actions).
* Kept “Terminate” behind confirmation prompts and preserved role-based
restrictions for when termination is available.
* **Improvements**
* Standardized how activity durations are calculated and how status
badges are styled for consistent display.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Adds supporting for filtering by application name for Database
Connections
<img width="592" height="325" alt="image"
src="https://github.com/user-attachments/assets/e09b8d61-4215-4da4-b2aa-980cdc475738"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added an **Application** filter to database activity views.
* Expanded filtering to include session state, roles, and matching by
activity application name.
* Filter option counts are now more accurate based on the currently
selected criteria.
* **Bug Fixes**
* Improved filter reset behavior to reliably clear application/state
selections and restore role defaults.
* Enhanced persistence of filter selections via URL query parameters.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Very tiny one - just supports clicking to copy PID from the Activity Row
in Database Connections
Will be useful for diving into details of the query with the Assistant
if needed
<img width="323" height="120" alt="image"
src="https://github.com/user-attachments/assets/b80a69eb-d1e8-49d3-93e3-08c111b3ea6e"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added the ability to click an activity process ID to copy it to the
clipboard.
* Added confirmation feedback after copying the process ID.
* **UI Improvements**
* Improved query tooltip behavior by providing a slightly longer hover
delay.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Building on top of "Database Connections" - this adds a top summary
section, again from `pg_stat_activity`
<img width="948" height="324" alt="image"
src="https://github.com/user-attachments/assets/f4968193-0a5f-4754-a630-40685b747999"
/>
Each block comes with a tooltip in hopes to educate the significance of
each metric
- Connections: Spread of connections per database role
<img width="313" height="164" alt="image"
src="https://github.com/user-attachments/assets/8ceeab5d-b960-4be3-9a5b-8600bd5cf303"
/>
- Active queries: Rough representative of activity
<img width="350" height="196" alt="image"
src="https://github.com/user-attachments/assets/f9705ff1-a869-409a-86b6-50170a169674"
/>
- Idle in transaction: Important to identify as this indicates locks
(Suggests root cause)
<img width="350" height="196" alt="image"
src="https://github.com/user-attachments/assets/f9705ff1-a869-409a-86b6-50170a169674"
/>
- Blocked queries: Also important to identify stuck queries
<img width="335" height="183" alt="image"
src="https://github.com/user-attachments/assets/57255fb8-24f6-4ddd-aa54-850a77173b5c"
/>
- Longest running query: Might be useful to identify unusually long
queries
- Will be `text-warning` if exceeds 30 seconds for active queries,
`text-destructive` if exceeds 10 seconds for queries idle in transaction
<img width="342" height="119" alt="image"
src="https://github.com/user-attachments/assets/f6783b43-058a-4a32-a40c-0bc64f23d2ce"
/>
"Summarize activity" CTA leverages on the Assistant to give a quick
overview - highlights any potential issues for quick reference
<img width="1918" height="958" alt="image"
src="https://github.com/user-attachments/assets/340121fe-3186-48a5-8023-fbac2a93397a"
/>
## Other changes
- Hides "View running queries" in SQL Editor if `topForPostgres` feature
flag is enabled (since this UI is meant to replace that)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a Database Connections observability overview with metric cards
(connections, longest-running, active, blocked, idle-in-transaction) and
an interactive “Longest running” PID selector.
* Added a “Summarize activity” AI assistant dropdown that starts a
timestamped, activity-aware summary chat.
* **Improvements**
* Enhanced live activity refresh (including window-focus updates) and
standardized duration warning thresholds for active and
idle-in-transaction sessions.
* Improved hover details for query previews and allowed richer tooltip
content for metric labels.
* **Feature Changes**
* Gated the “View running queries” bottom panel behind a feature flag.
* **Bug Fixes**
* Refined running-too-long badge and warning styling for
idle-in-transaction cases.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Initial work for Top for Postgres - adds a "Sessions" section under a
new Observability segment "Database Connections"
NOTE: All the copywriting and naming might change - not sure what's an
ideal title for this
We'll also be iteratively building on top of this UI, adding more
actionable signals instead of just information
Changes are featured flagged, off for public
- This would essentially replace the "View ongoing queries" in the SQL
Editor by providing a dedicated UI
- It checks against `pg_stat_activity` as per the ongoing queries UI
- We'll also subsequently deprecate the "Ongoing queries" UI in the SQL
editor
- Defaults into a "live mode" where the data is refreshed every 3
seconds via long-polling
<img width="983" height="474" alt="image"
src="https://github.com/user-attachments/assets/16402fe4-0b53-4f9e-9342-cdda26e3778a"
/>
- Supports filtering by state
<img width="374" height="282" alt="image"
src="https://github.com/user-attachments/assets/562f8fbe-2dc6-48e7-8ec0-de7ffb8348d1"
/>
- Users can also terminate queries through here
<img width="247" height="164" alt="image"
src="https://github.com/user-attachments/assets/23a639dc-8f96-473a-a823-605b0bab02ee"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
# Release Notes
* **New Features**
* Added an Observability **Database Connections** page with a live
**Sessions** activity table (state/roles filtering, blocked-by details,
session duration, and per-session termination with confirmation).
* Included a **Live/Pause** toggle to control automatic refresh (~3
seconds).
* **Enhancements**
* Improved Reports selection filtering: supports optional option
quantities, better popover styling, sorted apply behavior, and shows
quantity inline.
* Query performance duration formatting now supports configurable
decimal precision.
* Tooltips can now render richer content (string or React node).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Danny White