Merge branch 'main' of github.com:SigNoz/signoz into feat/telegram-alerts

#### Description
- real saved views header on top of the sidebar layout.. my view,
selected view and unsaved changes states per figma. create and save as
new share one modal, ✓ updates the view or saves it as new, ✕ discards
back to the saved view and the undo arrow clears it. clear only removes
what the view set, time range stays.
- unsaved changes check compares the queries in their stored v5 form
with empty values dropped like the server does.. comparing after mapping
back to the qb shape made every untouched view read dirty. no amber
flash while switching views or ticking quick filters.
- last used view reopens when the explorer is opened with nothing in the
url, decided on first render.. the default query check the bar uses
never passes, the provider fills `aggregateOperator`.
- logs and traces take the tab from the url, and logs ends live mode
whenever the tab is not the list.
- quick filters header restyled to match the views header.. ghost
buttons, design system tooltips, no funnel, same row height. shared
component so every qf page gets it.

#### Issues closed by this PR

Part of https://github.com/SigNoz/events-pod/issues/71

#### Screenshots


https://github.com/user-attachments/assets/982f87ab-185c-4321-8056-310131e6cb98



#### Additional Information
- behind `SAVED_VIEW_ENABLED`, flag off is today's ui.
- manual pass on logs and traces, metrics smoke. restore on logs and the
settings tooltip not rechecked after the last fixes.
- old bar still has its own restore bug, it goes away with the bar.

.claude/skills/signoz-page-story/references/verify.md

@@ -58,8 +58,10 @@ console.log((await page.locator('body').innerText()).slice(0, 1500), problems);
 await browser.close();
 ```
 
-Screenshots are worth taking for `Default` in both themes
-(`&globals=theme:light`): text extraction does not catch an unstyled page.
+Screenshots are worth taking for `Default` in both themes: text extraction does
+not catch an unstyled page. Take them with
+[sbshot](https://github.com/SigNoz/sbshot), e.g.
+`sbshot capture http://localhost:6006 --title <story title> --theme dark,light`.
 
 ## Gates
 

.claude/skills/storybook-visual-diff/SKILL.md

@@ -1,294 +0,0 @@
----
-name: storybook-visual-diff
-description: Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs to see what a CSS or component change did, with the changes tinted over the new shot. Use when asked to take story screenshots, capture a visual baseline, compare before/after of a style change, or find which pages a change affects.
----
-
-# Storybook visual diff
-
-Two scripts under `frontend/scripts`:
-
-- `story-shots.mjs` — screenshots stories off a running Storybook dev server.
-- `story-shots-diff.mjs` — pixel-diffs two runs and paints what moved.
-
-Output goes to `frontend/.story-shots/` (gitignored), one directory per run.
-
-## 0. Settle what is being compared, first
-
-A diff is only worth taking when the two runs straddle something. Run twice over
-the same tree and the answer is zero, or the noise floor: true, and useless.
-So before starting a server, pin down four things. Whatever the prompt already
-says, take it and do not ask again; ask only for what is genuinely missing, in
-**one** `AskUserQuestion` call.
-
-| To settle | Ask | Options |
-| --- | --- | --- |
-| Job | "What should this run produce?" | shoot only · baseline for a change you are about to make · compare against a change already in the working tree · compare this branch against another (`main` by default, or one the user names) · compare two configurations of the same story (`--args`, clock, width) · noise floor (same tree twice) |
-| Scope | "Which stories?" | offer 2-3 concrete selections read off `index.json` (a page, a `--title` prefix, everything), never open-ended |
-| Themes | "Which themes?" | dark · dark + light |
-| Read-out | "How should the diff read?" | `green` (changed pixels over the after shot) · `green-parallel` (before \| after \| diff, side by side) · `red` · `red-parallel` · `none` (keep both runs, do not diff) |
-
-Skip a row when the prompt answers it, and skip the whole call when the prompt
-answers all of it ("shoot the pods tooltips in both themes" needs no question).
-Skip Read-out too whenever the job is *shoot only*, and take `none` for what it
-says: shoot both sides, report both paths, run no comparison. When the prompt
-says nothing at all, ask; a silent guess here burns ~6 min per sweep on the
-wrong stories.
-
-The job decides which loop below to run:
-
-| Job | Loop |
-| --- | --- |
-| **shoot only** | §1, §2, stop. Report the paths. No diff, no second run. |
-| **baseline first** | the full loop, stopping after step 2 to hand the change back. The user makes it, then continue at step 4. |
-| **change already in the tree** | the tree *is* the after state. `git stash` (or check out the base commit) to shoot the before, restore, shoot the after. Confirm the working tree is clean enough to stash before touching it, and restore it even if a capture fails. |
-| **branch vs branch** | shoot the current branch, then `git switch <base>` in place (stash first if the tree is dirty), restart the dev server, shoot again, switch back and unstash. Restart matters: HMR does not survive a whole-branch swap cleanly. Get the tree back to where it started even if a capture fails. |
-| **noise floor** | two runs, same tree, diff. The number is the harness's floor, not a finding. |
-| **config vs config** | same tree, two runs that differ only in flags: `--args`, `--clock`, `--width`, `--theme`, `--motion`. Filenames stay identical, so the pairs line up and the caption names what changed. |
-
-## The loop
-
-1. Capture the baseline **before touching anything**.
-2. Capture it a second time and diff the two. That is the noise floor: anything
-   it reports is what the harness cannot hold still, and no conclusion about the
-   change may rest on those stories. Cheap on a handful of stories, ~6 min per
-   32, so on a wide sweep run it over the two or three stories the change is
-   aimed at instead of all of them.
-3. Make the change.
-4. Capture again into a third directory.
-5. Diff, then read the tinted shot of the largest movers to judge the change.
-
-## 1. One dev server, on a free port
-
-`storybook dev` keys its Vite dep cache off the config dir, so two servers on the
-same `-c` serve mismatched prebundles and every story dies with `Invalid hook
-call`. Check what is already up first — port 6006 is often another repo's
-Storybook, and its `index.json` then indexes the wrong stories:
-
-```bash
-for port in 6006 6007; do
-  curl -s -m 2 "http://localhost:$port/index.json" | head -c 60 && echo "  <- $port"
-done
-```
-
-Start the SigNoz one on a free port, from the repo's own binary so no package
-manager shim is in the way:
-
-```bash
-cd frontend
-nohup ./node_modules/.bin/storybook dev -p 6007 --no-open --quiet \
-  > "${TMPDIR:-/tmp}/signoz-storybook.log" 2>&1 &
-```
-
-It is ready when `curl -s localhost:6007/index.json` returns JSON whose
-`entries` hold SigNoz story ids.
-
-## 2. Capture
-
-Playwright is not a frontend dependency. The script finds it in `tests/e2e`
-(`pnpm -C tests/e2e install`, `@playwright/test` is enough) or in a global
-install, and launches Playwright's own chromium, falling back to an installed
-Chrome. Two escape hatches when that is not what a machine has:
-
-```bash
-export PLAYWRIGHT_MODULE=/path/to/playwright   # a different install
-export CHROME_PATH=/path/to/chrome             # a specific browser binary
-```
-
-Then pick the stories. `--list` prints the selection without shooting anything:
-
-```bash
-# every tooltip story of every page
-node scripts/story-shots.mjs .story-shots/baseline \
-  --port 6007 --title Pages/ --name tooltip --theme dark
-
-# a handful of stories by id or by title/name substring, both themes
-node scripts/story-shots.mjs .story-shots/baseline \
-  --port 6007 --stories pages-noz,dashboards/detail --theme dark,light
-```
-
-| Flag | Meaning |
-| --- | --- |
-| `--stories <match>` | id or `Title/Name` substring, repeatable or comma-separated. Omit for every story. |
-| `--title <prefix>` | only titles starting with the prefix (`Pages/`, `Components/`) |
-| `--name <match>` | only story names containing the match |
-| `--theme dark,light` | one pass per theme; omit for the story's own default (dark) |
-| `--args <k:v;k2:v2>` | arg overrides, Storybook's own `?args=` syntax, repeatable. A dotted value is dropped by Storybook itself, so map it to a slug inside the story's mocks |
-| `--port` | dev server port, or `$SB_PORT` |
-| `--width <px>` | the only fixed dimension, default 1680 |
-| `--height <px>` | shortest the viewport may be, default 1200 |
-| `--max-height <px>` | tallest it may grow to, default 8000 |
-| `--grow <what>` | `scrollers` (default) grows the viewport until the page's own scrollers fit, `document` only follows the document height, `none` keeps `--height` |
-| `--settle <ms>` | wait after the page goes quiet, default 1500 |
-| `--clock <iso\|live>` | wall clock the page reads, passed to the preview as `?storyClock`; `live` unfreezes it |
-| `--motion` | keep animations and transitions running (sets the `motion` global to `live`) |
-| `--ignore <selector>` | hide matching elements, on top of `[data-shot-ignore]` and `[data-chromatic="ignore"]` |
-| `--flat` | write `<out>/<id>.png`, no theme directory |
-| `--no-caption` | leave the caption band off the shots |
-| `--list` | print the matched stories and exit |
-
-Files land at `<out>/<theme>/<story-id>.png`, next to a `shots.json` recording
-what each shot is (id, title, name, theme, `ok`/`busy`, the caption's height in
-rows) and how the run was configured (args, clock, width, height, grow, motion,
-settle, ignore). Keep the flags identical between the two runs or the diff pairs
-nothing.
-
-Every shot carries the caption band described below, so a single screenshot says
-what it is on its own. `--no-caption` leaves it off, and so does a machine
-without ImageMagick (with a warning). The band never changes the shot's width
-(long text wraps rather than widening the canvas) and its height is recorded, so
-the diff crops it back off and never reports one caption against another. Two
-runs whose captions are different heights still diff to zero. A story that never held still for two
-identical frames is logged `busy` instead of `ok` — treat its diff as suspect.
-
-Dark alone is enough while iterating on the harness; add `light` for the run you
-report.
-
-## 3. Diff
-
-```bash
-node scripts/story-shots-diff.mjs .story-shots/baseline .story-shots/capped .story-shots/diff
-```
-
-Prints `<changed pixels>  <theme>/<story>.png`, largest first, and writes one
-image per pair. Needs ImageMagick for PNG encode/decode (7's `magick`, or 6's
-`convert`/`identify`/`montage`); the comparison itself is in the script.
-
-| Flag | Meaning |
-| --- | --- |
-| `--mode green` | default. The after shot with the changed pixels painted over it, exactly the pixels that changed. What Chromatic shows. |
-| `--mode green-parallel` | `previous \| current \| diff` in one image, each tile labelled above it, on a gutter inverted from the theme. The diff tile is the `green` one, so the after shot stays readable underneath. |
-| `--mode red` | the after shot faded to 10%, changed pixels in red. A pixelmatch-style diff, easiest to read when the change is a thin edge. |
-| `--mode red-parallel` | the same three tiles, with the `red` diff. Best when the change is a thin edge that the unfaded shot would swallow. |
-| `--threshold <0..1>` | how far a pixel must move to count. Default 0.063, Chromatic's `diffThreshold`. |
-| `--include-aa` | count antialiasing changes too. Off by default, as in Chromatic. |
-| `--tint <#rrggbb>` | override the mode's colour. |
-| `--no-caption` | drop the caption band. |
-
-### The caption
-
-Both scripts stamp a band on top of what they write: `story-shots.mjs` on each
-shot, from the story and the run's own settings; `story-shots-diff.mjs` on each
-diff, read out of the two runs' `shots.json`. It carries the story's
-`Title/Name`, then its id, theme and `busy` flag, then the settings both runs
-shared, each reading `key:value`. Whatever the two runs did **differently** goes
-on the side it belongs to: under `previous` and `current` on the parallel tiles,
-on two lines of the band otherwise. So a pair that differs only in `--args` says
-so on its face, which is what makes several shots of one story tellable apart.
-
-The shots' own bands are cropped off before comparing and before going into the
-tiles, so nothing in the output is a diff of a caption. Type size follows the
-image width, so it stays readable with the whole image viewed at fit-to-width;
-the heading is set in an installed sans and the detail lines in a mono, falling
-back to ImageMagick's default when neither is on the machine. Without a manifest
-the band falls back to the file path, and a directory of captioned shots whose
-`shots.json` is missing has nothing to crop by, so its captions do land in the
-diff. Keep `shots.json` next to the shots.
-
-### How the comparison works
-
-Chromatic's own capture and diff run server-side — `chromatic-cli` uploads a
-built Storybook and contains no capture or comparison code at all. What is public
-is the parameter contract, and the numbers in it say what the comparison is:
-`diffThreshold` defaults to `0.063` on a 0-1 scale, which is pixelmatch's
-`threshold`, and `diffIncludeAntiAliasing` defaults to false, which is
-pixelmatch's `includeAA: false`. So the script implements that comparison:
-
-1. Both PNGs are read as raw RGBA through `magick … RGBA:-`.
-2. Per pixel, the squared YIQ distance between the two colours (weights
-   `0.5053 / 0.299 / 0.1957`), compared against `35215 * threshold²` — 35215 is
-   the largest distance two 8-bit colours can have. Chroma is included, so a
-   colour swap at equal brightness still counts.
-3. A pixel over the threshold is dropped when it is only antialiasing: it is the
-   darkest or lightest of its eight neighbours, and the other image has a pixel
-   around there doing the same job. This is what keeps a subpixel glyph edge from
-   reading as a change.
-4. What survives is painted at full opacity, one output pixel per changed input
-   pixel. No dilation, no blobs — a one-pixel shift shows as a one-pixel line.
-
-A pair whose shots are different sizes is compared over the overlap, and every
-row and column that exists in only one of them counts as changed.
-
-Pairing is by `<theme>/<story-id>.png`, so a story that exists on only one side
-(new on the feature branch, renamed, retitled) has nothing to pair with and is
-skipped silently. On a branch-vs-branch run, compare the two runs' file lists
-before reading the numbers.
-
-## What makes a shot reproducible
-
-Most of it is in the preview, not in the script, so a Chromatic build in the
-cloud shoots the same page: `.storybook/preview-head.html` freezes the clock,
-and `settleForCapture` (the preview's `afterEach`, which runs after `play`)
-parks the animations and snaps the bottom-pinned lists. The script drives the
-rest:
-
-- **Storybook's own render phase is the readiness signal.** It waits for
-  `window.__STORYBOOK_PREVIEW__.storyRenders[].phase === 'finished'`, which is
-  reached only after the loaders, the decorators and the story's `play` are done.
-  A DOM check cannot see a `play` still running. (Storybook 10 spells the final
-  phase `finished`, not `completed`.)
-- **Network quiescence, not `networkidle`.** react-query retries and msw keep
-  requests going after load, and a few stories hang a request by design, so the
-  wait is "no request for 600ms", capped at 15s.
-- **The clock is frozen** (`2026-06-15T12:00:00Z`), by the preview itself. Chart windows, `4 mins ago`
-  labels and trial countdowns all derive from `now`; a live clock alone moved
-  8000 pixels on the dashboards list and redrew every chart axis.
-- **Animations are parked on their last frame** by `html.sb-still`, a
-  zero-length single iteration with `forwards` fill, plus `prefers-reduced-
-  motion`. The Motion toolbar item (`still` by default) turns it off. An infinite
-  spinner is otherwise caught at a random angle.
-- **`document.fonts.ready`**, because text reflows when a face lands late.
-- **Lists pinned to their bottom are snapped onto it**, once by the preview and
-  again by the script after the page goes quiet. A virtuoso list settles a
-  few pixels short of the end depending on the order its items were measured in.
-- **Two identical frames in a row**, because what a page is still waiting on is
-  often not observable from outside it.
-- **`[data-shot-ignore]`, `[data-chromatic="ignore"]` and `--ignore <selector>`**
-  hide a region that cannot be held still; Chromatic excludes the same attribute
-  from its comparison.
-- **The width is the only fixed dimension.** Chromatic's `viewports` are widths;
-  the height follows the page. `src/styles.scss` pins `html, body, #root` to
-  `height: 100%; overflow: hidden`, so the document never outgrows the viewport
-  and its height says nothing: what overflows are the shell's inner scrollers.
-  `--grow scrollers`, the default, grows the viewport until the tallest in-flow
-  scroller fits, so nothing is cut off and no scrollbar is left in the shot (the
-  dashboards list goes to 2226px in one round). Popups are skipped — they are out
-  of the flow, and a tall dropdown would otherwise drag the shot to a height
-  nothing on the page needs. A page that sizes a panel in `vh` grows its own
-  content as the viewport grows, so no height ever fits it and the rounds only
-  chase — `.alert-chart-container` is `57vh`, which puts Create Alert's fixed
-  point at 4344px with an empty band on top. Those pages are shot at `--height`
-  with their own scrollbar, which is what they look like in a browser, and the
-  log says `(viewport-sized content, stopped chasing Npx)`.
-
-With all of that, 29 of the 32 page tooltip stories are byte-identical across
-runs. The three that are not, and why:
-
-| Story | Residual | Cause |
-| --- | --- | --- |
-| `kubernetes-pods--tooltips-in-options-panel` | ~13k px | 24 tooltips held open in an overlapping cluster; they portal to `body` in mount order, and the drawer's own tooltips mount before or after the list's depending on when their data lands, so overlapping tooltips stack differently. Panel geometry itself is stable. |
-| `settings-role-editor--tooltips-in-json-editor` | ~2.5k px | monaco re-measures and lands one pixel off. |
-| `traces-trace-details--tooltips` | ~800 px | same class, one row of the waterfall. |
-
-Each is bimodal — two stable arrangements — so the same number reappears run
-after run. Diff a story against itself before believing its number, and reach
-for `--ignore` when a region cannot be settled.
-
-## Gotchas
-
-- **Zero pixels is a real answer.** A story whose tooltips are all short is
-  unaffected by a tooltip rule; it is not a broken capture.
-- **The selector matters more than the rule.** A global rule on
-  `[data-slot='…']` only reaches design-system components. antd's own tooltips
-  (`.ant-tooltip-inner`, e.g. the Create Alert help popups) are untouched, which
-  is why some stories show no diff at all.
-- **Global style overrides need `!important`.** `src/styles.scss` loads before
-  the design system injects its CSS-module styles at runtime, so a plain rule on
-  a `[data-slot='…']` element loses. A component-level `!important` of the same
-  specificity still wins over it — `PanelStatusPopover.module.scss` keeps its own
-  `max-width: 520px !important`.
-- **A fresh context per story** is why a full sweep takes ~6 min for 32 stories.
-  Reusing one page loses the msw service worker re-registration race and stories
-  start failing after a few navigations.
-- **Stories behind a hover, drawer or modal** only render what their `play`
-  reaches. If a state is missing from the shot, the story needs the `play`, not
-  the script.

.github/CODEOWNERS

@@ -296,4 +296,3 @@ go.mod @therealpandey
 /frontend/.storybook/ @H4ad
 /frontend/src/storybook/ @H4ad
 /.claude/skills/signoz-page-story/ @H4ad
-/.claude/skills/storybook-visual-diff/ @H4ad

.github/workflows/e2eci.yaml

@@ -40,6 +40,7 @@ jobs:
       matrix:
         project:
           - chromium
+        shard: [1, 2, 3, 4]
     if: |
       ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-e2e')
@@ -48,12 +49,33 @@ jobs:
     steps:
       - name: checkout
         uses: actions/checkout@v4
+      # Images bring-up-stack would otherwise pull, at the tests/conftest.py
+      # defaults. A stale tag only loses the head start.
+      - name: pull-images
+        id: pull-images
+        background: true
+        run: |
+          printf '%s\n' \
+            node:22-bookworm \
+            golang:1.25-bookworm \
+            python:3.13-slim \
+            postgres:15 \
+            clickhouse/clickhouse-server:25.12.5 \
+            clickhouse/clickhouse-keeper:25.12.5 \
+            signoz/signoz-schema-migrator:v0.144.9 \
+            wiremock/wiremock:2.35.1-1 \
+            | xargs -P 0 -n 1 docker pull -q
       - name: python
         uses: actions/setup-python@v5
         with:
           python-version: 3.13
       - name: uv
         uses: astral-sh/setup-uv@v4
+      - name: python-install
+        id: python-install
+        background: true
+        run: |
+          cd tests && uv sync
       - name: node
         uses: actions/setup-node@v4
         with:
@@ -62,19 +84,9 @@ jobs:
         uses: pnpm/action-setup@v6
         with:
           version: 10
-      - name: python-install
-        run: |
-          cd tests && uv sync
       - name: pnpm-install
         run: |
           cd tests/e2e && pnpm install --frozen-lockfile
-      - name: playwright-browsers
-        run: |
-          docker create --name pw mcr.microsoft.com/playwright:v1.57.0-noble
-          docker cp pw:/ms-playwright "$RUNNER_TEMP/ms-playwright"
-          docker rm pw
-          echo "PLAYWRIGHT_BROWSERS_PATH=$RUNNER_TEMP/ms-playwright" >> "$GITHUB_ENV"
-          cd tests/e2e && pnpm playwright install-deps ${{ matrix.project }}
       # Restore-only: the cacheci workflow owns cache saves. Seeds the
       # BuildKit cache mounts so the in-test image build is incremental.
       - name: restore
@@ -99,6 +111,19 @@ jobs:
               tar -xf /restored/pnpm-store.tar -C /pnpm/store
           EOF
           docker build -f "$RUNNER_TEMP/inject.Dockerfile" "$RUNNER_TEMP/cacheci"
+      - name: wait-stack-deps
+        wait: [pull-images, python-install]
+      # Started after the pulls so its download overlaps the CPU-bound
+      # image build instead of competing for the network.
+      - name: playwright-browsers
+        id: playwright-browsers
+        background: true
+        run: |
+          docker create --name pw mcr.microsoft.com/playwright:v1.57.0-noble
+          docker cp pw:/ms-playwright "$RUNNER_TEMP/ms-playwright"
+          docker rm pw
+          echo "PLAYWRIGHT_BROWSERS_PATH=$RUNNER_TEMP/ms-playwright" >> "$GITHUB_ENV"
+          cd tests/e2e && pnpm playwright install-deps ${{ matrix.project }}
       - name: bring-up-stack
         run: |
           cd tests && \
@@ -106,10 +131,12 @@ jobs:
             --basetemp=./tmp/ \
             -vv --reuse --with-web \
             e2e/bootstrap/setup.py::test_setup
+      - name: wait-playwright-browsers
+        wait: playwright-browsers
       - name: playwright-test
         run: |
           cd tests/e2e && \
-            pnpm playwright test --project=${{ matrix.project }}
+            pnpm playwright test --project=${{ matrix.project }} --shard=${{ matrix.shard }}/4
       - name: teardown-stack
         if: always()
         run: |
@@ -122,6 +149,6 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: playwright-artifacts-${{ matrix.project }}
+          name: playwright-artifacts-${{ matrix.project }}-${{ matrix.shard }}
           path: tests/e2e/artifacts/
           retention-days: 5

.github/workflows/goci.yaml

@@ -67,7 +67,7 @@ jobs:
         with:
           go-version: "1.24"
       - name: check-semconv-generated-files
-        run: go run ./scripts/semconv -check
+        run: make semconv-check
   build:
     if: |
       github.event_name == 'merge_group' ||

.github/workflows/integrationci.yaml

@@ -68,6 +68,7 @@ jobs:
           - semconvfamilies
           - serviceaccount
           - spanmapper
+          - tracedetail
           - querier_json_body
           - querier_skip_resource_fingerprint
           - ttl

.gitignore

@@ -231,5 +231,7 @@ pyrightconfig.json
 
 # dev
 .dev/
+.deepsec/
+.deepsec.zip
 .claude/worktrees/
 .claude/settings.local.json

Makefile

@@ -262,6 +262,10 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 semconv-generate: ## Regenerate semantic-convention families for Go and TypeScript
 	@go run ./scripts/semconv
 
+.PHONY: semconv-check
+semconv-check: ## Fail if the generated semantic-convention files are stale
+	@go run ./scripts/semconv -check
+
 .PHONY: gen-mocks
 gen-mocks:
 	@echo ">> Generating mocks"

docs/api/openapi.yml

@@ -37,6 +37,7 @@ components:
           opsgenie: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig'
           pagerduty: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig'
           slack: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig'
+          telegram: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfig'
           webhook: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig'
         propertyName: kind
       oneOf:
@@ -50,6 +51,7 @@ components:
       - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig'
       - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig'
       - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig'
+      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfig'
       type: object
     AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig:
       properties:
@@ -159,6 +161,18 @@ components:
       - kind
       - spec
       type: object
+    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfig:
+      properties:
+        kind:
+          enum:
+          - telegram
+          type: string
+        spec:
+          $ref: '#/components/schemas/AlertmanagertypesChannelTelegramConfig'
+      required:
+      - kind
+      - spec
+      type: object
     AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig:
       properties:
         kind:
@@ -311,6 +325,7 @@ components:
       - jira
       - jsmops
       - incidentio
+      - telegram
       type: string
     AlertmanagertypesChannelListOrder:
       enum:
@@ -515,6 +530,29 @@ components:
       - title
       - value
       type: object
+    AlertmanagertypesChannelTelegramConfig:
+      properties:
+        apiUrl:
+          type: string
+        botToken:
+          format: password
+          type: string
+        chatId:
+          format: int64
+          type: integer
+        disableNotifications:
+          type: boolean
+        message:
+          type: string
+        messageThreadId:
+          type: integer
+        sendResolved:
+          nullable: true
+          type: boolean
+      required:
+      - botToken
+      - chatId
+      type: object
     AlertmanagertypesChannelWebhookConfig:
       properties:
         bearerToken:
@@ -3731,6 +3769,84 @@ components:
         hide:
           type: boolean
       type: object
+    DashboardtypesHeatmapAxes:
+      properties:
+        "y":
+          $ref: '#/components/schemas/DashboardtypesHeatmapAxis'
+      type: object
+    DashboardtypesHeatmapAxis:
+      properties:
+        scale:
+          $ref: '#/components/schemas/DashboardtypesHeatmapYScale'
+      type: object
+    DashboardtypesHeatmapChartAppearance:
+      properties:
+        colors:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColors'
+      type: object
+    DashboardtypesHeatmapColorMode:
+      enum:
+      - palette
+      - opacity
+      type: string
+    DashboardtypesHeatmapColorScale:
+      enum:
+      - log
+      - sqrt
+      - linear
+      type: string
+    DashboardtypesHeatmapColors:
+      properties:
+        fill:
+          type: string
+        maxCount:
+          nullable: true
+          type: number
+        minCount:
+          nullable: true
+          type: number
+        mode:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColorMode'
+        palette:
+          $ref: '#/components/schemas/DashboardtypesHeatmapPalette'
+        scale:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColorScale'
+        steps:
+          type: integer
+      type: object
+    DashboardtypesHeatmapPalette:
+      enum:
+      - ice
+      - moss
+      - rust
+      - graphite
+      - ember
+      - lagoon
+      - orchid
+      - verdant
+      - lava
+      - beacon
+      type: string
+    DashboardtypesHeatmapPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesHeatmapAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesHeatmapChartAppearance'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
+    DashboardtypesHeatmapYScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -4084,6 +4200,7 @@ components:
         mapping:
           signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
+          signoz/HeatmapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
@@ -4102,6 +4219,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4114,6 +4232,7 @@ components:
       - signoz/HistogramPanel
       - signoz/ListPanel
       - signoz/TextPanel
+      - signoz/HeatmapPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -4139,6 +4258,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/HeatmapPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesHeatmapPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec:
       properties:
         kind:
@@ -9041,6 +9172,15 @@ components:
       - alertType
       - ruleType
       type: object
+    RuletypesListableRuleViews:
+      properties:
+        views:
+          items:
+            $ref: '#/components/schemas/RuletypesRuleView'
+          type: array
+      required:
+      - views
+      type: object
     RuletypesListableRules:
       properties:
         labels:
@@ -9138,6 +9278,16 @@ components:
       - ruleType
       - condition
       type: object
+    RuletypesPostableRuleView:
+      properties:
+        data:
+          $ref: '#/components/schemas/RuletypesRuleViewData'
+        name:
+          type: string
+      required:
+      - name
+      - data
+      type: object
     RuletypesQueryType:
       enum:
       - builder
@@ -9276,6 +9426,45 @@ components:
       - promql_rule
       - anomaly_rule
       type: string
+    RuletypesRuleView:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        data:
+          $ref: '#/components/schemas/RuletypesRuleViewData'
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - name
+      - data
+      - orgId
+      type: object
+    RuletypesRuleViewData:
+      properties:
+        order:
+          $ref: '#/components/schemas/RuletypesListOrder'
+        query:
+          type: string
+        sort:
+          $ref: '#/components/schemas/RuletypesListSort'
+        states:
+          items:
+            type: string
+          type: array
+        version:
+          type: string
+      required:
+      - version
+      type: object
     RuletypesScheduleType:
       enum:
       - hourly
@@ -9693,6 +9882,53 @@ components:
       required:
       - aggregations
       type: object
+    SpantypesGettableTraceSummary:
+      properties:
+        ai:
+          $ref: '#/components/schemas/SpantypesTraceAISummary'
+        endTimestampMillis:
+          minimum: 0
+          type: integer
+        hasMissingSpans:
+          type: boolean
+        rootServiceEntryPoint:
+          type: string
+        rootServiceName:
+          type: string
+        rootSpanStatusCode:
+          type: string
+        startTimestampMillis:
+          minimum: 0
+          type: integer
+        totalErrorSpansCount:
+          minimum: 0
+          type: integer
+        totalSpansCount:
+          minimum: 0
+          type: integer
+      required:
+      - startTimestampMillis
+      - endTimestampMillis
+      - rootServiceName
+      - rootServiceEntryPoint
+      - rootSpanStatusCode
+      - totalSpansCount
+      - totalErrorSpansCount
+      - hasMissingSpans
+      type: object
+    SpantypesGettableTraceThread:
+      properties:
+        nextCursor:
+          type: string
+        prevCursor:
+          type: string
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesThreadSpan'
+          type: array
+      required:
+      - spans
+      type: object
     SpantypesGettableWaterfallTrace:
       properties:
         endTimestampMillis:
@@ -10007,6 +10243,94 @@ components:
           nullable: true
           type: object
       type: object
+    SpantypesThreadSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          type: object
+        duration_nano:
+          minimum: 0
+          type: integer
+        events:
+          items:
+            $ref: '#/components/schemas/SpantypesEvent'
+          type: array
+        has_error:
+          type: boolean
+        kind_string:
+          type: string
+        name:
+          type: string
+        parent_span_id:
+          type: string
+        references:
+          items:
+            $ref: '#/components/schemas/SpantypesOtelSpanRef'
+          type: array
+        resource:
+          additionalProperties:
+            type: string
+          type: object
+        span_id:
+          type: string
+        status_code_string:
+          type: string
+        status_message:
+          type: string
+        time_unix:
+          minimum: 0
+          type: integer
+        trace_id:
+          type: string
+      required:
+      - span_id
+      - trace_id
+      - parent_span_id
+      - name
+      - kind_string
+      - time_unix
+      - duration_nano
+      - has_error
+      - status_code_string
+      - status_message
+      - resource
+      - attributes
+      - events
+      - references
+      type: object
+    SpantypesTraceAISummary:
+      properties:
+        tokens:
+          $ref: '#/components/schemas/SpantypesTraceAITokens'
+        totalCost:
+          type: number
+      required:
+      - tokens
+      type: object
+    SpantypesTraceAITokens:
+      properties:
+        cacheRead:
+          minimum: 0
+          type: integer
+        cacheWrite:
+          minimum: 0
+          type: integer
+        input:
+          minimum: 0
+          type: integer
+        output:
+          minimum: 0
+          type: integer
+        reasoning:
+          minimum: 0
+          type: integer
+      required:
+      - input
+      - output
+      - cacheRead
+      - cacheWrite
+      - reasoning
+      type: object
     SpantypesUpdatableSpanMapper:
       properties:
         config:
@@ -15731,6 +16055,163 @@ paths:
       tags:
       - tracedetail
       x-signoz-stability: alpha
+  /api/v1/traces/{traceID}/summary:
+    get:
+      deprecated: false
+      description: Returns the trace's time range, root span, span and error counts,
+        and whether any spans are missing. AI traces also include token and cost totals.
+      operationId: GetTraceSummary
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableTraceSummary'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get summary for a trace
+      tags:
+      - tracedetail
+      x-signoz-stability: alpha
+  /api/v1/traces/{traceID}/thread:
+    get:
+      deprecated: false
+      description: Returns the spans carrying gen_ai input or output messages in timestamp
+        order. Pass nextCursor as after or prevCursor as before to page, or spanId
+        to open the page around a span.
+      operationId: GetTraceThread
+      parameters:
+      - description: Page size, at most 100. 0 means 20.
+        in: query
+        name: limit
+        schema:
+          description: Page size, at most 100. 0 means 20.
+          type: integer
+      - description: The nextCursor of a page; returns the spans after it. Set only
+          one of after, before and spanId.
+        in: query
+        name: after
+        schema:
+          description: The nextCursor of a page; returns the spans after it. Set only
+            one of after, before and spanId.
+          type: string
+      - description: The prevCursor of a page; returns the spans before it. Set only
+          one of after, before and spanId.
+        in: query
+        name: before
+        schema:
+          description: The prevCursor of a page; returns the spans before it. Set
+            only one of after, before and spanId.
+          type: string
+      - description: Returns the page around this span. Set only one of after, before
+          and spanId.
+        in: query
+        name: spanId
+        schema:
+          description: Returns the page around this span. Set only one of after, before
+            and spanId.
+          type: string
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableTraceThread'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get thread view for a trace
+      tags:
+      - tracedetail
+      x-signoz-stability: alpha
   /api/v1/user/me:
     get:
       deprecated: true
@@ -21193,6 +21674,235 @@ paths:
       tags:
       - users
       x-signoz-stability: alpha
+  /api/v2/rule_views:
+    get:
+      deprecated: false
+      description: Returns every saved view in the calling user's org. Saved views
+        are shared org-wide.
+      operationId: ListRuleViews
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/RuletypesListableRuleViews'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List rule saved views
+      tags:
+      - rules
+      x-signoz-stability: alpha
+    post:
+      deprecated: false
+      description: Persists the calling user's rule listing state (query, states,
+        sort, order) as a named, reusable view shared across the org.
+      operationId: CreateRuleView
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/RuletypesPostableRuleView'
+      responses:
+        "201":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/RuletypesRuleView'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Create rule saved view
+      tags:
+      - rules
+      x-signoz-stability: alpha
+  /api/v2/rule_views/{id}:
+    delete:
+      deprecated: false
+      description: Removes a saved view. Saved views are shared org-wide. Deleting
+        a non-existent view returns 404.
+      operationId: DeleteRuleView
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Delete rule saved view
+      tags:
+      - rules
+      x-signoz-stability: alpha
+    put:
+      deprecated: false
+      description: Replaces a saved view's name and data. Saved views are shared org-wide.
+      operationId: UpdateRuleView
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/RuletypesPostableRuleView'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/RuletypesRuleView'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Update rule saved view
+      tags:
+      - rules
+      x-signoz-stability: alpha
   /api/v2/rules:
     get:
       deprecated: true

docs/contributing/query-range.md

@@ -84,9 +84,9 @@ A storage answers four questions and nothing else:
 | WhenAbsent | Absent row reads | Positive filter | Raw select | Multi-candidate column | Field keys |
 |---|---|---|---|---|---|
 | `AlwaysPresent` | a real value | no guard | no guard | no branch, ends the candidate list | table columns |
-| `AbsentIsSentinel` | `''`, 0, false, and that is not a value | exists guard | exists guard | presence branch | map attributes, cast JSON paths, string families |
+| `AbsentIsSentinel` | `''`, 0, false, and that is not a value | exists guard | exists guard | presence branch | map attributes, cast JSON paths, string families of such members |
 | `AbsentIsNull` | NULL | no guard | no guard | presence branch | multi-era folds, body JSON paths, numeric families |
-| `AbsentIsValue` | `''`, and that is the keyless contract | no guard | no guard | no presence branch | metrics labels, rule state history labels |
+| `AbsentIsValue` | `''`, and that is the keyless contract | no guard | no guard | no presence branch | metrics labels, rule state history labels, and families of such members |
 
 ### The generic layer
 
@@ -109,7 +109,7 @@ The functions, from the outside in:
 | `RejectsBodyFunction(traits, operator)` | Runs before resolution. A storage without body functions (`has`, `hasAny`, `hasAll`, `hasToken`, `search`) errors. The fingerprint side of a split skips the term, because the main query evaluates it. After resolution, `Condition` errors when `has`, `hasAny`, `hasAll`, or `hasToken` lands on a map-backed key (resource, attribute, scope), before the split can drop it. |
 | `SharedCondition(...)` | The `Compile` of every storage without its own condition language: `LogicalRead`, the shared data-type collision cast, `OperatorCondition`, then the guard rule. |
 | `OperatorCondition(...)` | The operator switch over an already cast read. A storage with its own cast policy composes with it. |
-| `LogicalRead(...)` | The only place family expressions are built. A single-member field reads through its member. A family merges the member reads, current member first: `COALESCE(NULLIF(m1, ''), NULLIF(m2, ''), '')` for strings, `multiIf` with a NULL tail for numbers. It ORs the member presence tests. A row without any member reads what the tail of the merge reads. A member with a value map reads through `TransformRead`. `NOT EXISTS` is the read's `Absence`, the storage's own negated form. |
+| `LogicalRead(...)` | The only place family expressions are built. A single-member field reads through its member. A family merges the member reads, current member first: `COALESCE(NULLIF(m1, ''), NULLIF(m2, ''), '')` for strings, `multiIf` with a NULL tail for numbers. It ORs the member presence tests. A row without any member reads what the tail of the merge reads. When every member reads its sentinel as a value, so does the family. A member with a value map reads through `TransformRead`. `NOT EXISTS` is the read's `Absence`, the storage's own negated form. |
 
 ### A resolved key
 

ee/query-service/rules/anomaly.go

@@ -277,10 +277,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		lb.Set(ruletypes.AlertRuleIDLabel, r.ID())
 		lb.Set(ruletypes.RuleSourceLabel, r.GeneratorURL())
 
-		annotations := make(ruletypes.Labels, 0, len(r.Annotations().Map()))
-		for name, value := range r.Annotations().Map() {
-			annotations = append(annotations, ruletypes.Label{Name: name, Value: expand(value)})
-		}
+		annotations := r.ExpandAnnotations(expand)
 		if smpl.IsMissing {
 			lb.Set(ruletypes.AlertNameLabel, "[No data] "+r.Name())
 			lb.Set(ruletypes.NoDataLabel, "true")

frontend/.gitignore

@@ -34,5 +34,5 @@ e2e/test-plan/user-preferences/
 /storybook-static/
 debug-storybook.log
 
-# Storybook screenshot sweeps (scripts/story-shots.mjs)
-/.story-shots/
+# Storybook screenshots (sbshot)
+/.sbshot/

frontend/.oxlintrc.json

@@ -338,6 +338,10 @@
             "name": "api/generated/services/dashboard",
             "importNames": ["patchDashboardV2", "usePatchDashboardV2"],
             "message": "[dashboard-v2] Don't call patchDashboardV2/usePatchDashboardV2 directly — use useOptimisticPatch().patchAsync so spec edits update the react-query cache optimistically and reconcile on settle."
+          },
+          {
+            "name": "motion/react-client",
+            "message": "[motion] motion/react-client is for React Server Components only. Use 'motion/react' instead — it provides the same exports and works correctly in client-side SPAs."
           }
         ]
       }
@@ -578,17 +582,6 @@
       "rules": {
         "signoz/no-dashboard-fetch-outside-root": "off"
       }
-    },
-    {
-      // Dev-tooling CLIs: stdout is their output, and they carry ported pixel/heap
-      // algorithms that read worse when split up.
-      "files": [
-        "scripts/**"
-      ],
-      "rules": {
-        "no-console": "off",
-        "sonarjs/cognitive-complexity": "off"
-      }
     }
   ]
 }

frontend/.storybook/modes.ts

@@ -1,7 +1,7 @@
 /**
  * Chromatic modes: one snapshot per entry, per story. The globals in a mode are
  * Storybook's own, so `theme` is the toolbar's theme and the story renders the
- * way it does locally. The width matches `scripts/story-shots.mjs` (`--width`),
+ * way it does locally. The width matches sbshot's default `--width`,
  * so a cloud snapshot and a local shot frame the same page.
  */
 export const allModes = {

frontend/__mocks__/uplotMock.ts

@@ -2,6 +2,8 @@
 
 // Mock for uplot library used in tests
 export interface MockUPlotInstance {
+	/** Consumers read `root.parentElement` to detect a re-mounted container. */
+	root: HTMLDivElement;
 	setData: jest.Mock;
 	setSize: jest.Mock;
 	destroy: jest.Mock;
@@ -17,13 +19,20 @@ export interface MockUPlotPaths {
 }
 
 // Create mock instance methods
-const createMockUPlotInstance = (): MockUPlotInstance => ({
-	setData: jest.fn(),
-	setSize: jest.fn(),
-	destroy: jest.fn(),
-	redraw: jest.fn(),
-	setSeries: jest.fn(),
-});
+const createMockUPlotInstance = (target?: HTMLElement): MockUPlotInstance => {
+	const root = document.createElement('div');
+	// Real uPlot mounts its root inside the target; without it a re-render reads
+	// `root.parentElement` off undefined and throws.
+	target?.appendChild(root);
+	return {
+		root,
+		setData: jest.fn(),
+		setSize: jest.fn(),
+		destroy: jest.fn(),
+		redraw: jest.fn(),
+		setSeries: jest.fn(),
+	};
+};
 
 // Path builder: (self, seriesIdx, idx0, idx1) => paths or null
 const createMockPathBuilder = (name: string): jest.Mock =>
@@ -53,14 +62,16 @@ const mockTzDate = jest.fn(
 function MockUPlot(
 	_options: unknown,
 	_data: unknown,
-	_target: HTMLElement,
+	target: HTMLElement,
 ): MockUPlotInstance {
-	return createMockUPlotInstance();
+	return createMockUPlotInstance(target);
 }
 
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+// Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
+MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

frontend/scripts/story-shots-caption.mjs

@@ -1,167 +0,0 @@
-import { spawnSync } from 'node:child_process';
-
-/**
- * The caption band both story-shots.mjs and story-shots-diff.mjs stamp on their
- * output, and the ImageMagick plumbing under it. A shot records the band's
- * height in `shots.json` so the diff can crop it back off before comparing:
- * otherwise two runs whose captions differ would report the caption as a change.
- */
-export const CONFIG_KEYS = [
-	'args',
-	'clock',
-	'width',
-	'height',
-	'grow',
-	'motion',
-	'settle',
-	'ignore',
-];
-
-let tools;
-
-const detect = () =>
-	(tools ??= {
-		seven: spawnSync('magick', ['-version']).status === 0,
-		six: spawnSync('convert', ['-version']).status === 0,
-	});
-
-export const hasMagick = () => {
-	const { seven, six } = detect();
-	return seven || six;
-};
-
-export const requireMagick = () => {
-	if (hasMagick()) {
-		return;
-	}
-	console.error(
-		'ImageMagick not found. Install it (brew install imagemagick, apt install imagemagick).',
-	);
-	process.exit(1);
-};
-
-export const magick = (args, input) => {
-	// ImageMagick 6 has no `magick`: its tools are separate binaries.
-	const [command, ...rest] = detect().seven
-		? ['magick', ...args]
-		: ['identify', 'montage'].includes(args[0])
-			? args
-			: ['convert', ...args];
-	const result = spawnSync(command, rest, {
-		input,
-		maxBuffer: 1024 * 1024 * 1024,
-	});
-	if (result.status !== 0) {
-		throw new Error(`${command} ${rest.join(' ')}: ${result.stderr}`);
-	}
-	return result.stdout;
-};
-
-/**
- * ImageMagick's built-in default is a serif that reads as a book, not as a
- * screenshot label, so the band asks for what is installed: a sans for the
- * heading, a mono for the lines that carry ids, args and numbers. An
- * unrecognised name is fatal to `convert`, hence the check against the list it
- * reports; a machine with none of them keeps the default.
- */
-const FONTS = {
-	heading: [
-		'Helvetica-Bold',
-		'DejaVu-Sans-Bold',
-		'Liberation-Sans-Bold',
-		'Arial-Bold',
-		'Noto-Sans-Bold',
-		'DejaVu-Sans',
-		'Liberation-Sans',
-	],
-	body: [
-		'Menlo',
-		'DejaVu-Sans-Mono',
-		'Liberation-Mono',
-		'JetBrainsMono-NF-Regular',
-		'Courier',
-	],
-};
-
-let installed;
-
-const fontArgs = (role) => {
-	installed ??= new Set(
-		[
-			...magick(['-list', 'font'])
-				.toString()
-				.matchAll(/^\s*Font:\s*(\S+)/gm),
-		].map(([, name]) => name),
-	);
-	const font = FONTS[role].find((name) => installed.has(name));
-	return font ? ['-font', font] : [];
-};
-
-/** Readable at fit-to-width, whatever the image is. */
-export const pointsize = (width) =>
-	Math.min(Math.max(Math.round(width / 45), 24), 140);
-
-// `label:` expands ImageMagick's own escapes and reads a file when the text
-// starts with @, so story names and arg values go through neither.
-export const bodyFont = () => fontArgs('body');
-
-export const literal = (text) => text.replaceAll('%', '%%').replace(/^@/, ' @');
-
-/** The gutter is the opposite of the theme, so the band keeps an edge. */
-export const palette = (theme) =>
-	theme === 'light'
-		? { background: '#101014', foreground: '#f4f4f5' }
-		: { background: '#f4f4f5', foreground: '#101014' };
-
-export const settingsLine = (config, keys = CONFIG_KEYS) =>
-	keys
-		.filter((key) => config?.[key])
-		.map((key) => `${key}:${config[key]}`)
-		.join('  ');
-
-const heightOf = (file) => Number(magick(['identify', '-format', '%h', file]));
-
-/**
- * Writes `from` to `to` with `lines` above it, and returns how many rows that
- * added — which is what a reader has to crop off to get the original back, so
- * the band must never change the width. Each line is a `caption:` at the
- * image's own width, wrapping instead of widening the canvas: a run whose
- * caption is longer must still produce a shot the next run's shot pairs with.
- * Type size follows the width, since a three-tile montage of 1680px shots is
- * over 5000px wide and is read at fit-to-width.
- */
-export const stamp = ({ lines, from, to, theme }) => {
-	const { background, foreground } = palette(theme);
-	const width = Number(magick(['identify', '-format', '%w', from]));
-	const heading = pointsize(width);
-	const before = heightOf(from);
-	const spacer = [
-		'-size',
-		`${width}x${Math.round(heading * 0.4)}`,
-		`xc:${background}`,
-	];
-
-	magick([
-		'-background',
-		background,
-		'-fill',
-		foreground,
-		'-gravity',
-		'center',
-		...spacer,
-		...lines.flatMap((line, index) => [
-			...fontArgs(index ? 'body' : 'heading'),
-			'-size',
-			`${width}x`,
-			'-pointsize',
-			String(index ? Math.round(heading * 0.62) : heading),
-			`caption:${literal(line)}`,
-		]),
-		...spacer,
-		from,
-		'-append',
-		to,
-	]);
-
-	return heightOf(to) - before;
-};

frontend/scripts/story-shots-diff.mjs

@@ -1,460 +0,0 @@
-#!/usr/bin/env node
-import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
-import { parseArgs } from 'node:util';
-import path from 'node:path';
-import os from 'node:os';
-
-import {
-	bodyFont,
-	CONFIG_KEYS,
-	literal,
-	magick,
-	palette,
-	pointsize,
-	requireMagick,
-	settingsLine,
-	stamp,
-} from './story-shots-caption.mjs';
-
-/**
- * Pairs the PNGs of two story-shots.mjs runs by relative path and reports what
- * moved, per pair, largest first.
- *
- * The comparison is Chromatic's: a pixel counts as changed when its YIQ
- * distance from the baseline pixel is over `threshold` of the largest distance
- * two colours can have, and pixels that are only antialiasing around an
- * otherwise identical edge do not count. `threshold` is their `diffThreshold`
- * and its default is theirs too.
- */
-const MAX_YIQ_DELTA = 35_215;
-
-const { values: opts, positionals } = parseArgs({
-	allowPositionals: true,
-	options: {
-		mode: { type: 'string', default: 'green' },
-		threshold: { type: 'string', default: '0.063' },
-		'include-aa': { type: 'boolean', default: false },
-		tint: { type: 'string', default: '' },
-		'no-caption': { type: 'boolean', default: false },
-		help: { type: 'boolean', short: 'h', default: false },
-	},
-});
-
-const [baseDir, afterDir, outArg] = positionals;
-const MODES = new Set(['green', 'green-parallel', 'red', 'red-parallel']);
-
-if (opts.help || !baseDir || !afterDir || !MODES.has(opts.mode)) {
-	console.log(`usage: node scripts/story-shots-diff.mjs <baseline-dir> <after-dir> [diff-dir]
-
-  --mode green           the after shot, changed pixels painted over it (default)
-  --mode green-parallel  previous | current | green diff, side by side and labelled
-  --mode red             the after shot faded out, changed pixels painted red
-  --mode red-parallel    previous | current | red diff, side by side and labelled
-  --threshold <0..1>     YIQ distance a pixel must move to count (default 0.063)
-  --include-aa           count antialiasing changes too (default: ignore them)
-  --tint <#rrggbb>       override the mode's highlight colour
-  --no-caption           do not stamp the story and the run settings on top
-
-Prints "<changed pixels>  <relative path>", largest first. Needs ImageMagick.`);
-	process.exit(opts.help ? 0 : 1);
-}
-
-const outDir = outArg ?? path.join(path.dirname(baseDir), 'diff');
-const threshold = Number(opts.threshold);
-const maxDelta = MAX_YIQ_DELTA * threshold * threshold;
-const highlight = hexToRgb(
-	opts.tint || (opts.mode.startsWith('green') ? '#00e05a' : '#ff003a'),
-);
-
-function hexToRgb(hex) {
-	const value = Number.parseInt(hex.replace('#', ''), 16);
-	return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
-}
-
-requireMagick();
-
-/**
- * `top` rows are dropped: story-shots.mjs stamps a caption on its shots and
- * records how tall it is, and a caption is not part of what the two runs are
- * being compared on.
- */
-const readRgba = (file, top = 0) => {
-	const [width, height] = magick(['identify', '-format', '%w %h', file])
-		.toString()
-		.split(' ')
-		.map(Number);
-	const data = magick([file, '-depth', '8', 'RGBA:-']);
-	return top > 0 && top < height
-		? { width, height: height - top, data: data.subarray(top * width * 4) }
-		: { width, height, data };
-};
-
-const writeRgba = ({ width, height, data }, file) =>
-	writeFile(
-		file,
-		magick(
-			['-depth', '8', '-size', `${width}x${height}`, 'RGBA:-', 'png:-'],
-			data,
-		),
-	);
-
-/* The pixelmatch colour maths, which is what Chromatic's threshold is scaled to. */
-const y = (r, g, b) => r * 0.29889531 + g * 0.58662247 + b * 0.11448223;
-const i = (r, g, b) => r * 0.59597799 - g * 0.2741761 - b * 0.32180189;
-const q = (r, g, b) => r * 0.21147017 - g * 0.52261711 + b * 0.31114694;
-
-/** Squared YIQ distance, signed by which pixel is brighter. */
-const colorDelta = (a, b, posA, posB, yOnly = false) => {
-	let r1 = a[posA];
-	let g1 = a[posA + 1];
-	let b1 = a[posA + 2];
-	const a1 = a[posA + 3];
-	let r2 = b[posB];
-	let g2 = b[posB + 1];
-	let b2 = b[posB + 2];
-	const a2 = b[posB + 3];
-
-	if (a1 === a2 && r1 === r2 && g1 === g2 && b1 === b2) {
-		return 0;
-	}
-
-	// Anything translucent is composited over the same mid grey in both images,
-	// so a difference in alpha alone still registers.
-	if (a1 < 255) {
-		const alpha = a1 / 255;
-		r1 = r1 * alpha + 255 * (1 - alpha) * 0.5;
-		g1 = g1 * alpha + 255 * (1 - alpha) * 0.5;
-		b1 = b1 * alpha + 255 * (1 - alpha) * 0.5;
-	}
-	if (a2 < 255) {
-		const alpha = a2 / 255;
-		r2 = r2 * alpha + 255 * (1 - alpha) * 0.5;
-		g2 = g2 * alpha + 255 * (1 - alpha) * 0.5;
-		b2 = b2 * alpha + 255 * (1 - alpha) * 0.5;
-	}
-
-	const deltaY = y(r1, g1, b1) - y(r2, g2, b2);
-	if (yOnly) {
-		return deltaY;
-	}
-
-	const deltaI = i(r1, g1, b1) - i(r2, g2, b2);
-	const deltaQ = q(r1, g1, b1) - q(r2, g2, b2);
-	return (
-		0.5053 * deltaY * deltaY + 0.299 * deltaI * deltaI + 0.1957 * deltaQ * deltaQ
-	);
-};
-
-/**
- * True when the pixel sits on an edge that is drawn one subpixel over rather
- * than moved: it is the darkest or lightest of its neighbours in one image, and
- * the other image has a pixel around there doing the same job.
- */
-const antialiased = (a, x1, y1, width, height, b) => {
-	const x0 = Math.max(x1 - 1, 0);
-	const y0 = Math.max(y1 - 1, 0);
-	const x2 = Math.min(x1 + 1, width - 1);
-	const y2 = Math.min(y1 + 1, height - 1);
-	const pos = (y1 * width + x1) * 4;
-	let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
-	let min = 0;
-	let max = 0;
-	let minX = 0;
-	let minY = 0;
-	let maxX = 0;
-	let maxY = 0;
-
-	for (let x = x0; x <= x2; x += 1) {
-		for (let yy = y0; yy <= y2; yy += 1) {
-			if (x === x1 && yy === y1) {
-				continue;
-			}
-
-			const delta = colorDelta(a, a, pos, (yy * width + x) * 4, true);
-			if (delta === 0) {
-				zeroes += 1;
-				if (zeroes > 2) {
-					return false;
-				}
-			} else if (delta < min) {
-				min = delta;
-				minX = x;
-				minY = yy;
-			} else if (delta > max) {
-				max = delta;
-				maxX = x;
-				maxY = yy;
-			}
-		}
-	}
-
-	if (min === 0 || max === 0) {
-		return false;
-	}
-
-	return (
-		(hasManySiblings(a, minX, minY, width, height) &&
-			hasManySiblings(b, minX, minY, width, height)) ||
-		(hasManySiblings(a, maxX, maxY, width, height) &&
-			hasManySiblings(b, maxX, maxY, width, height))
-	);
-};
-
-/** Whether the pixel has at least three identical neighbours. */
-const hasManySiblings = (img, x1, y1, width, height) => {
-	const x0 = Math.max(x1 - 1, 0);
-	const y0 = Math.max(y1 - 1, 0);
-	const x2 = Math.min(x1 + 1, width - 1);
-	const y2 = Math.min(y1 + 1, height - 1);
-	const pos = (y1 * width + x1) * 4;
-	let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
-
-	for (let x = x0; x <= x2; x += 1) {
-		for (let yy = y0; yy <= y2; yy += 1) {
-			if (x === x1 && yy === y1) {
-				continue;
-			}
-
-			const other = (yy * width + x) * 4;
-			if (
-				img[pos] === img[other] &&
-				img[pos + 1] === img[other + 1] &&
-				img[pos + 2] === img[other + 2] &&
-				img[pos + 3] === img[other + 3]
-			) {
-				zeroes += 1;
-				if (zeroes > 2) {
-					return true;
-				}
-			}
-		}
-	}
-
-	return false;
-};
-
-/**
- * The changed pixels of the pair, painted over the after shot. The `red` modes
- * fade the shot out first, the way a pixelmatch diff reads; the `green` ones
- * leave it alone, the way Chromatic's does.
- */
-const diffPair = (base, after, mode) => {
-	const width = Math.min(base.width, after.width);
-	const height = Math.min(base.height, after.height);
-	const out = Buffer.from(after.data);
-	const fade = !mode.startsWith('green');
-	let changed = 0;
-
-	if (fade) {
-		for (let pos = 0; pos < out.length; pos += 4) {
-			const grey = y(out[pos], out[pos + 1], out[pos + 2]);
-			const value = 255 + (grey - 255) * 0.1;
-			out[pos] = value;
-			out[pos + 1] = value;
-			out[pos + 2] = value;
-			out[pos + 3] = 255;
-		}
-	}
-
-	for (let row = 0; row < height; row += 1) {
-		for (let column = 0; column < width; column += 1) {
-			const basePos = (row * base.width + column) * 4;
-			const afterPos = (row * after.width + column) * 4;
-			const delta = colorDelta(base.data, after.data, basePos, afterPos);
-			if (Math.abs(delta) <= maxDelta) {
-				continue;
-			}
-			if (
-				!opts['include-aa'] &&
-				(antialiased(base.data, column, row, base.width, base.height, after.data) ||
-					antialiased(after.data, column, row, after.width, after.height, base.data))
-			) {
-				continue;
-			}
-
-			changed += 1;
-			out[afterPos] = highlight[0];
-			out[afterPos + 1] = highlight[1];
-			out[afterPos + 2] = highlight[2];
-			out[afterPos + 3] = 255;
-		}
-	}
-
-	// A shot that grew or shrank has no counterpart for the extra rows and
-	// columns, so all of them are a change.
-	const extra =
-		after.width * after.height -
-		width * height +
-		(base.width * base.height - width * height);
-
-	return {
-		data: out,
-		width: after.width,
-		height: after.height,
-		changed: changed + extra,
-	};
-};
-
-/**
- * What each run was and how it was configured, from the `shots.json`
- * story-shots.mjs leaves beside its output. A run shot before that existed, or
- * a directory assembled by hand, simply gets no caption.
- */
-const manifest = async (dir) => {
-	try {
-		return JSON.parse(await readFile(path.join(dir, 'shots.json'), 'utf8'));
-	} catch {
-		return null;
-	}
-};
-
-const [baseRun, afterRun] = await Promise.all([
-	manifest(baseDir),
-	manifest(afterDir),
-]);
-
-/** The settings the two runs disagree on: what a difference in the shots may be. */
-const changedKeys = CONFIG_KEYS.filter(
-	(key) => (baseRun?.config?.[key] ?? '') !== (afterRun?.config?.[key] ?? ''),
-);
-
-const settings = (run, keys) => settingsLine(run?.config, keys);
-
-const shotOf = (run, rel) =>
-	run?.shots?.find((shot) => shot.file === rel.split(path.sep).join('/'));
-
-const captionOf = (run, rel) => shotOf(run, rel)?.caption ?? 0;
-
-/** ImageMagick's inline crop, so a tile shows the shot without its caption. */
-const withoutCaption = (file, { width, height }, top) =>
-	top > 0 ? `${file}[${width}x${height}+0+${top}]` : file;
-
-/** Story, then the settings both runs shared. One line each, widest font first. */
-const header = (rel) => {
-	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
-	const shared = settings(
-		afterRun,
-		CONFIG_KEYS.filter((key) => !changedKeys.includes(key)),
-	);
-	return [
-		shot ? `${shot.title}/${shot.name}` : rel.replace(/\.png$/, ''),
-		[shot?.id ?? '', shot?.theme ?? '', shot?.status === 'busy' ? '(busy)' : '']
-			.filter(Boolean)
-			.join('  '),
-		shared,
-	].filter(Boolean);
-};
-
-/** A tile's own line: which side it is, and where its run differed. */
-const sideLabel = (side, run) =>
-	[side, settings(run, changedKeys)].filter(Boolean).join('   ');
-
-const captionLines = (rel, lines) =>
-	opts['no-caption'] ? [] : [...header(rel), ...lines].filter(Boolean);
-
-const pngs = async (dir, prefix = '') => {
-	const entries = await readdir(path.join(dir, prefix), { withFileTypes: true });
-	const files = [];
-	for (const entry of entries) {
-		const rel = path.join(prefix, entry.name);
-		if (entry.isDirectory()) {
-			files.push(...(await pngs(dir, rel)));
-		} else if (entry.name.endsWith('.png')) {
-			files.push(rel);
-		}
-	}
-	return files;
-};
-
-const results = [];
-await mkdir(outDir, { recursive: true });
-
-for (const rel of (await pngs(baseDir)).sort()) {
-	const afterFile = path.join(afterDir, rel);
-	const base = readRgba(path.join(baseDir, rel), captionOf(baseRun, rel));
-	let after;
-	try {
-		after = readRgba(afterFile, captionOf(afterRun, rel));
-	} catch {
-		console.error(`missing in after: ${rel}`);
-		continue;
-	}
-
-	await mkdir(path.join(outDir, path.dirname(rel)), { recursive: true });
-	const diff = diffPair(base, after, opts.mode);
-	const target = path.join(outDir, rel);
-	const parallel = opts.mode.endsWith('-parallel');
-	// With no tiles to label, a run's own settings go in the caption instead.
-	const caption = captionLines(
-		rel,
-		parallel || !changedKeys.length
-			? []
-			: [sideLabel('previous', baseRun), sideLabel('current', afterRun)],
-	);
-	const diffFile = path.join(os.tmpdir(), `story-shots-${process.pid}.png`);
-	const body = path.join(os.tmpdir(), `story-shots-${process.pid}-body.png`);
-
-	// The gutter is the opposite of the theme's own background, so the tiles and
-	// the caption keep an edge instead of bleeding into it.
-	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
-	const theme = shot?.theme ?? rel.split(path.sep)[0];
-	const { background, foreground } = palette(theme);
-
-	if (parallel) {
-		await writeRgba(diff, diffFile);
-		const tile = (label, file) => [
-			'(',
-			`label:${literal(label)}`,
-			file,
-			'-gravity',
-			'center',
-			'-append',
-			'-bordercolor',
-			background,
-			'-border',
-			'12',
-			')',
-		];
-		magick([
-			'-background',
-			background,
-			'-fill',
-			foreground,
-			...bodyFont(),
-			'-pointsize',
-			// The tiles end up side by side, so they are read at the montage's width.
-			String(Math.round(pointsize(after.width * 3) * 0.62)),
-			...tile(
-				sideLabel('previous', baseRun),
-				withoutCaption(path.join(baseDir, rel), base, captionOf(baseRun, rel)),
-			),
-			...tile(
-				sideLabel('current', afterRun),
-				withoutCaption(afterFile, after, captionOf(afterRun, rel)),
-			),
-			...tile('diff', diffFile),
-			'-gravity',
-			'north',
-			'+append',
-			caption.length ? body : target,
-		]);
-		if (caption.length) {
-			stamp({ lines: caption, from: body, to: target, theme });
-		}
-	} else {
-		await writeRgba(diff, caption.length ? body : target);
-		if (caption.length) {
-			stamp({ lines: caption, from: body, to: target, theme });
-		}
-	}
-
-	results.push([diff.changed, rel]);
-}
-
-results
-	.sort((a, b) => b[0] - a[0])
-	.forEach(([changed, rel]) =>
-		console.log(`${String(changed).padStart(10)}  ${rel}`),
-	);
-
-console.error(`diffs in ${outDir}`);

frontend/scripts/story-shots.mjs

@@ -1,514 +0,0 @@
-#!/usr/bin/env node
-import { spawnSync } from 'node:child_process';
-import { mkdir, rename, writeFile } from 'node:fs/promises';
-import { createRequire } from 'node:module';
-import { parseArgs } from 'node:util';
-import { pathToFileURL } from 'node:url';
-import path from 'node:path';
-import os from 'node:os';
-
-import {
-	CONFIG_KEYS,
-	hasMagick,
-	settingsLine,
-	stamp,
-} from './story-shots-caption.mjs';
-
-/**
- * The wall clock every shot is taken at, passed to the preview as `storyClock`.
- * `.storybook/preview-head.html` freezes the same instant by itself, so a
- * Chromatic build reads the clock this run does.
- */
-const FROZEN_CLOCK = '2026-06-15T12:00:00.000Z';
-
-const { values: opts, positionals } = parseArgs({
-	allowPositionals: true,
-	options: {
-		out: { type: 'string', short: 'o' },
-		stories: { type: 'string', multiple: true, default: [] },
-		title: { type: 'string', default: '' },
-		name: { type: 'string', default: '' },
-		theme: { type: 'string', multiple: true, default: [] },
-		args: { type: 'string', multiple: true, default: [] },
-		port: { type: 'string', default: process.env.SB_PORT ?? '6006' },
-		width: { type: 'string', default: '1680' },
-		height: { type: 'string', default: '1200' },
-		'max-height': { type: 'string', default: '8000' },
-		grow: { type: 'string', default: 'scrollers' },
-		settle: { type: 'string', default: '1500' },
-		clock: { type: 'string', default: FROZEN_CLOCK },
-		motion: { type: 'boolean', default: false },
-		ignore: { type: 'string', multiple: true, default: [] },
-		flat: { type: 'boolean', default: false },
-		'no-caption': { type: 'boolean', default: false },
-		list: { type: 'boolean', default: false },
-		help: { type: 'boolean', short: 'h', default: false },
-	},
-});
-
-const outDir = opts.out ?? positionals[0];
-const themes = opts.theme.flatMap((value) => value.split(',')).filter(Boolean);
-const storyArgs = opts.args.filter(Boolean).join(';');
-
-if (opts.help || (!outDir && !opts.list)) {
-	console.log(`usage: node scripts/story-shots.mjs <out-dir> [options]
-
-  --stories <match>   only stories whose id or title/name path contains <match>
-                      (repeatable, comma-separated; default: every story)
-  --title <prefix>    only stories whose title starts with <prefix>
-  --name <match>      only stories whose name contains <match>
-  --theme <themes>    themes to shoot, e.g. dark,light (default: story default)
-  --args <k:v;k2:v2>  arg overrides, storybook's own ?args= syntax (repeatable).
-                      A value containing a dot is dropped by storybook itself
-  --port <port>       storybook dev server port (default 6006, or $SB_PORT)
-  --width <px>        viewport width, the only fixed dimension (default 1680)
-  --height <px>       shortest the viewport may be (default 1200)
-  --max-height <px>   tallest the viewport may grow to (default 8000)
-  --grow <what>       scrollers (default) grows the viewport until the page's
-                      own scrollers fit, document only follows the document
-                      height (a no-op on any page with the app shell), none
-                      keeps --height
-  --settle <ms>       wait after the page goes quiet (default 1500)
-  --clock <iso|live>  wall clock the page reads (default ${FROZEN_CLOCK})
-  --motion            keep animations and transitions running
-  --ignore <selector> hide matching elements, on top of [data-shot-ignore]
-  --flat              write <out>/<id>.png instead of <out>/<theme>/<id>.png
-  --no-caption        do not stamp the story and the run settings on the shot
-  --list              print the matched stories and exit
-
-Screenshots land in <out-dir>/<theme>/<story-id>.png, alongside a shots.json
-recording what each shot is, how the run was configured, and how tall the
-caption on it is. story-shots-diff.mjs reads that to crop the caption off before
-comparing, so two runs never diff their own captions.
-
-Captioning needs ImageMagick; without it the shots are written bare.
-
-Playwright is looked up in tests/e2e, then in the global install; override with
-PLAYWRIGHT_MODULE. The browser is playwright's own chromium, else an installed
-Chrome; override with CHROME_PATH.`);
-	process.exit(opts.help ? 0 : 1);
-}
-
-const base = `http://localhost:${opts.port}`;
-
-// `index.json` carries raw control characters from story jsdoc, so it is read as
-// text rather than piped through anything that revalidates it.
-const index = JSON.parse(await (await fetch(`${base}/index.json`)).text());
-
-const matches = opts.stories
-	.flatMap((value) => value.split(','))
-	.filter(Boolean);
-
-const stories = Object.values(index.entries)
-	.filter((entry) => {
-		if (entry.type !== 'story') {
-			return false;
-		}
-		if (opts.title && !entry.title.startsWith(opts.title)) {
-			return false;
-		}
-		if (
-			opts.name &&
-			!entry.name.toLowerCase().includes(opts.name.toLowerCase())
-		) {
-			return false;
-		}
-		if (!matches.length) {
-			return true;
-		}
-
-		const haystack = `${entry.id} ${entry.title}/${entry.name}`.toLowerCase();
-		return matches.some((match) => haystack.includes(match.toLowerCase()));
-	})
-	.sort((a, b) => a.id.localeCompare(b.id));
-
-if (opts.list) {
-	stories.forEach((story) =>
-		console.log(`${story.id}\t${story.title}/${story.name}`),
-	);
-	console.log(`${stories.length} stories`);
-	process.exit(0);
-}
-
-if (!stories.length) {
-	console.error('no story matched');
-	process.exit(1);
-}
-
-const ignoreSelectors = opts.ignore
-	.flatMap((value) => value.split(','))
-	.map((value) => value.trim())
-	.filter(Boolean);
-
-if (opts.clock !== 'live' && Number.isNaN(Date.parse(opts.clock))) {
-	console.error(`--clock: not a date: ${opts.clock}`);
-	process.exit(1);
-}
-
-/**
- * `[data-shot-ignore]` and `--ignore` hide what cannot be settled, the local
- * half of Chromatic's `data-chromatic="ignore"`. Everything else the shot needs
- * held still - the frozen clock, the parked animations, the lists snapped onto
- * their bottom - is done by the preview itself, so a Chromatic build and a shot
- * from here see the same page.
- */
-const ignoreCss = (
-	ignore,
-) => `[data-shot-ignore], [data-chromatic='ignore']${ignore
-	.map((selector) => `, ${selector}`)
-	.join('')} {
-	visibility: hidden !important;
-}`;
-
-/**
- * Playwright is not a frontend dependency: it lives in `tests/e2e`, or globally,
- * or wherever `$PLAYWRIGHT_MODULE` points. `@playwright/test` re-exports
- * `chromium`, so an e2e install alone is enough.
- */
-const resolvePlaywright = () => {
-	const specifiers = process.env.PLAYWRIGHT_MODULE
-		? [process.env.PLAYWRIGHT_MODULE]
-		: ['playwright', '@playwright/test'];
-
-	const find = (roots) => {
-		for (const specifier of specifiers) {
-			for (const root of roots) {
-				try {
-					return createRequire(path.join(root, '-')).resolve(specifier);
-				} catch {
-					/* next candidate */
-				}
-			}
-		}
-		return null;
-	};
-
-	const local = find([
-		import.meta.dirname,
-		path.resolve(import.meta.dirname, '../../tests/e2e'),
-	]);
-	if (local) {
-		return local;
-	}
-
-	// `npm root -g` prints the global node_modules; resolution starts a level up.
-	const globalRoot = spawnSync('npm', ['root', '-g'], { encoding: 'utf8' });
-	const global =
-		globalRoot.status === 0 && find([path.dirname(globalRoot.stdout.trim())]);
-	if (global) {
-		return global;
-	}
-
-	console.error(
-		'playwright not found. Install it (pnpm -C tests/e2e install, or npm i -g playwright) or set PLAYWRIGHT_MODULE.',
-	);
-	return process.exit(1);
-};
-
-const pwModule = await import(pathToFileURL(resolvePlaywright()).href);
-const pw = pwModule.chromium ? pwModule : pwModule.default;
-
-console.log(
-	`${stories.length} stories x ${themes.length || 1} theme(s) -> ${outDir}`,
-);
-
-/**
- * A playwright install carries no browser of its own, and the revision it wants
- * is often not the one that was downloaded, so an installed Chrome is the
- * fallback before giving up.
- */
-const launch = async () => {
-	if (process.env.CHROME_PATH) {
-		return pw.chromium.launch({ executablePath: process.env.CHROME_PATH });
-	}
-	try {
-		return await pw.chromium.launch();
-	} catch (error) {
-		try {
-			return await pw.chromium.launch({ channel: 'chrome' });
-		} catch {
-			console.error(
-				`${error.message.split('\n')[0]}\nRun 'playwright install chromium' or set CHROME_PATH to a browser binary.`,
-			);
-			return process.exit(1);
-		}
-	}
-};
-
-const browser = await launch();
-
-const failures = [];
-const shots = [];
-
-const runConfig = {
-	args: storyArgs,
-	clock: opts.clock,
-	width: opts.width,
-	height: opts.height,
-	grow: opts.grow,
-	motion: opts.motion ? 'live' : 'still',
-	settle: opts.settle,
-	ignore: ignoreSelectors.join(', '),
-};
-
-const captioning = !opts['no-caption'] && hasMagick();
-
-if (!opts['no-caption'] && !captioning) {
-	console.error('ImageMagick not found: shots are written without a caption.');
-}
-
-const configLine = settingsLine(runConfig, CONFIG_KEYS);
-
-for (const theme of themes.length ? themes : [null]) {
-	const dir = opts.flat ? outDir : path.join(outDir, theme ?? 'default');
-	await mkdir(dir, { recursive: true });
-	if (theme) {
-		console.log(`\n[${theme}]`);
-	}
-
-	for (const story of stories) {
-		// A context per story: reusing one page loses the msw worker
-		// re-registration race after a few navigations and the story then dies on
-		// a missing worker.
-		const context = await browser.newContext({
-			viewport: { width: Number(opts.width), height: Number(opts.height) },
-			reducedMotion: opts.motion ? 'no-preference' : 'reduce',
-		});
-		const page = await context.newPage();
-
-		// react-query retries and msw both keep requests going long after load, so
-		// the settle waits on the page being quiet rather than on a fixed delay.
-		let inFlight = 0;
-		let lastActivity = Date.now();
-		page.on('request', () => {
-			inFlight += 1;
-			lastActivity = Date.now();
-		});
-		const done = () => {
-			inFlight = Math.max(inFlight - 1, 0);
-			lastActivity = Date.now();
-		};
-		page.on('requestfinished', done);
-		page.on('requestfailed', done);
-
-		// The height the rounds had reached when the page turned out to grow with
-		// the viewport, kept only to flag the story in the log.
-		let chasing = 0;
-
-		const url = new URL(`${base}/iframe.html`);
-		url.searchParams.set('viewMode', 'story');
-		url.searchParams.set('id', story.id);
-		// The preview owns the clock and the motion state, so both are asked for in
-		// the URL rather than injected here: a Chromatic build gets the defaults.
-		url.searchParams.set('storyClock', opts.clock);
-		const globals = [theme && `theme:${theme}`, opts.motion && 'motion:live']
-			.filter(Boolean)
-			.join(';');
-		if (globals) {
-			url.searchParams.set('globals', globals);
-		}
-		if (storyArgs) {
-			url.searchParams.set('args', storyArgs);
-		}
-
-		try {
-			await page.goto(url.href, { waitUntil: 'domcontentloaded' });
-
-			// Storybook's own render phase is the readiness signal: it reaches
-			// `finished` only once the loaders, the decorators and the story's `play`
-			// are all done, which a DOM check cannot see. The dev server transforms
-			// each page module on first visit, so this is the slow wait.
-			await page.waitForFunction(
-				() =>
-					(window.__STORYBOOK_PREVIEW__?.storyRenders ?? []).some((render) =>
-						['finished', 'errored', 'aborted'].includes(render.phase),
-					) || document.body.classList.contains('sb-show-errordisplay'),
-				undefined,
-				{ timeout: 120_000 },
-			);
-
-			await page.addStyleTag({ content: ignoreCss(ignoreSelectors) });
-			if (!opts.motion) {
-				// Videos and GIFs are parked on their first frame, as Chromatic does.
-				await page.evaluate(() =>
-					document.querySelectorAll('video').forEach((video) => video.pause?.()),
-				);
-			}
-
-			// Text reflows when a webfont lands, so the shot waits for the faces the
-			// page asked for. Some stories keep a request open by design, hence the
-			// cap on the quiet wait rather than a plain networkidle.
-			await page.evaluate(() => document.fonts.ready);
-			const quietUntil = Date.now() + 15_000;
-			while (
-				Date.now() < quietUntil &&
-				(inFlight > 0 || Date.now() - lastActivity < 600)
-			) {
-				await page.waitForTimeout(200);
-			}
-			await page.waitForTimeout(Number(opts.settle));
-
-			// The width is the fixed dimension and the height follows the page, the
-			// way a Chromatic viewport does. `src/styles.scss` pins
-			// `html, body, #root` to `height: 100%; overflow: hidden`, so the
-			// document can never outgrow the viewport and its height says nothing
-			// about what is on the page: what overflows are the shell's inner
-			// scrollers. `scrollers` grows the viewport until the tallest of those
-			// fits, so nothing is cut off and no scrollbar is left in the shot.
-			// Growing changes the layout, hence the rounds. A page that sizes a panel
-			// in `vh` grows its own content as the viewport grows, so no height ever
-			// fits it and the rounds only chase: `.alert-chart-container` is `57vh`,
-			// which puts Create Alert's fixed point at 4344px with an empty band on
-			// top. Such a page is shot at `--height` with its own scrollbar instead,
-			// which is what it looks like in a browser.
-			if (opts.grow !== 'none') {
-				const maximum = Number(opts['max-height']);
-				const requested = Number(opts.height);
-				let height = requested;
-				let fits = false;
-				for (let round = 0; round < 3 && !fits; round += 1) {
-					const needed = Math.min(
-						maximum,
-						await page.evaluate((withScrollers) => {
-							const document_ = Math.max(
-								document.documentElement.scrollHeight,
-								document.body.scrollHeight,
-							);
-							if (!withScrollers) {
-								return document_;
-							}
-
-							// Popups are skipped: they are out of the flow, and a tall
-							// dropdown or tooltip would otherwise drag the shot to a
-							// height nothing on the page itself needs.
-							const inFlow = (element) => {
-								for (
-									let node = element;
-									node && node !== document.documentElement;
-									node = node.parentElement
-								) {
-									const { position } = getComputedStyle(node);
-									if (position === 'fixed' || position === 'absolute') {
-										return false;
-									}
-								}
-								return true;
-							};
-
-							return [...document.querySelectorAll('*')].reduce((tallest, element) => {
-								const { overflowY } = getComputedStyle(element);
-								if (
-									!['auto', 'scroll', 'overlay'].includes(overflowY) ||
-									element.scrollHeight - element.clientHeight <= 1 ||
-									!inFlow(element)
-								) {
-									return tallest;
-								}
-
-								const box = element.getBoundingClientRect();
-								const above = box.top + window.scrollY;
-								const below = Math.max(0, document_ - (box.bottom + window.scrollY));
-								return Math.max(tallest, above + element.scrollHeight + below);
-							}, document_);
-						}, opts.grow === 'scrollers'),
-					);
-					fits = needed <= height;
-					if (fits) {
-						break;
-					}
-
-					height = needed;
-					await page.setViewportSize({ width: Number(opts.width), height });
-					await page.waitForTimeout(Number(opts.settle));
-				}
-
-				if (!fits && height !== requested) {
-					chasing = height;
-					height = requested;
-					await page.setViewportSize({ width: Number(opts.width), height });
-					await page.waitForTimeout(Number(opts.settle));
-				}
-			}
-
-			// The preview snapped its bottom-pinned lists at `afterEach`, before the
-			// page went quiet; a virtuoso list is usually still measuring then.
-			await page.evaluate(() => window.__signozSnapPinnedScrollers?.());
-
-			// A page that is still moving — a list scrolling itself to the bottom, a
-			// monaco editor re-measuring, a tooltip being repositioned — is shot
-			// twice in a row until two frames come back identical, since what the
-			// page is waiting on is not observable from here.
-			let shot = await page.screenshot();
-			let stable = false;
-			for (let attempt = 0; attempt < 8 && !stable; attempt += 1) {
-				await page.waitForTimeout(400);
-				const next = await page.screenshot();
-				stable = next.equals(shot);
-				shot = next;
-			}
-
-			const file = path.join(dir, `${story.id}.png`);
-			await writeFile(file, shot);
-
-			// The band goes on the shot itself so a single screenshot says what it
-			// is, and its height is recorded so a diff can take it back off.
-			let caption = 0;
-			if (captioning) {
-				const temporary = path.join(
-					os.tmpdir(),
-					`story-shots-caption-${process.pid}.png`,
-				);
-				caption = stamp({
-					lines: [
-						`${story.title}/${story.name}`,
-						[story.id, theme ?? 'default', stable ? '' : '(busy)']
-							.filter(Boolean)
-							.join('  '),
-						configLine,
-					].filter(Boolean),
-					from: file,
-					to: temporary,
-					theme: theme ?? 'dark',
-				});
-				await rename(temporary, file);
-			}
-
-			shots.push({
-				file: path.posix.join(
-					opts.flat ? '' : (theme ?? 'default'),
-					`${story.id}.png`,
-				),
-				id: story.id,
-				title: story.title,
-				name: story.name,
-				theme: theme ?? 'default',
-				status: stable ? 'ok' : 'busy',
-				caption,
-			});
-			console.log(
-				`  ${stable ? 'ok  ' : 'busy'} ${story.id}${
-					chasing ? ` (viewport-sized content, stopped chasing ${chasing}px)` : ''
-				}`,
-			);
-		} catch (error) {
-			failures.push(`${theme ?? 'default'}/${story.id}`);
-			console.log(`  FAIL ${story.id}: ${error.message.split('\n')[0]}`);
-		} finally {
-			await context.close();
-		}
-	}
-}
-
-await browser.close();
-
-// The diff script captions its output from this, so the run's own settings sit
-// next to the shots they produced rather than only in the shell history.
-await writeFile(
-	path.join(outDir, 'shots.json'),
-	`${JSON.stringify({ config: runConfig, shots }, null, '\t')}\n`,
-);
-
-if (failures.length) {
-	console.error(`\n${failures.length} failed: ${failures.join(', ')}`);
-	process.exit(1);
-}

frontend/src/api/generated/services/rules/index.ts

@@ -19,7 +19,9 @@ import type {
 
 import type {
 	CreateRule201,
+	CreateRuleView201,
 	DeleteRuleByIDPathParameters,
+	DeleteRuleViewPathParameters,
 	GetRuleByID200,
 	GetRuleByIDPathParameters,
 	GetRuleHistoryFilterKeys200,
@@ -40,6 +42,7 @@ import type {
 	GetRuleHistoryTopContributors200,
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
+	ListRuleViews200,
 	ListRules200,
 	ListRulesV3200,
 	ListRulesV3Params,
@@ -47,8 +50,11 @@ import type {
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
 	RuletypesPostableRuleDTO,
+	RuletypesPostableRuleViewDTO,
 	TestRule200,
 	UpdateRuleByIDPathParameters,
+	UpdateRuleView200,
+	UpdateRuleViewPathParameters,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -74,6 +80,351 @@ const withQueryKey = <T extends object, K>(
 	return result;
 };
 
+/**
+ * Returns every saved view in the calling user's org. Saved views are shared org-wide.
+ * @summary List rule saved views
+ */
+export const listRuleViews = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListRuleViews200>({
+		url: `/api/v2/rule_views`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListRuleViewsQueryKey = () => {
+	return [`/api/v2/rule_views`] as const;
+};
+
+export const getListRuleViewsQueryOptions = <
+	TData = Awaited<ReturnType<typeof listRuleViews>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listRuleViews>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRuleViewsQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRuleViews>>> = ({
+		signal,
+	}) => listRuleViews(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRuleViews>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRuleViewsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRuleViews>>
+>;
+export type ListRuleViewsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List rule saved views
+ */
+
+export function useListRuleViews<
+	TData = Awaited<ReturnType<typeof listRuleViews>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listRuleViews>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRuleViewsQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary List rule saved views
+ */
+export const invalidateListRuleViews = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRuleViewsQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Persists the calling user's rule listing state (query, states, sort, order) as a named, reusable view shared across the org.
+ * @summary Create rule saved view
+ */
+export const createRuleView = (
+	ruletypesPostableRuleViewDTO?: BodyType<RuletypesPostableRuleViewDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateRuleView201>({
+		url: `/api/v2/rule_views`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostableRuleViewDTO,
+		signal,
+	});
+};
+
+export const getCreateRuleViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRuleView>>,
+		TError,
+		{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createRuleView>>,
+	TError,
+	{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+	TContext
+> => {
+	const mutationKey = ['createRuleView'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof createRuleView>>,
+		{ data?: BodyType<RuletypesPostableRuleViewDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createRuleView(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateRuleViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createRuleView>>
+>;
+export type CreateRuleViewMutationBody =
+	| BodyType<RuletypesPostableRuleViewDTO>
+	| undefined;
+export type CreateRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create rule saved view
+ */
+export const useCreateRuleView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRuleView>>,
+		TError,
+		{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createRuleView>>,
+	TError,
+	{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+	TContext
+> => {
+	return useMutation(getCreateRuleViewMutationOptions(options));
+};
+/**
+ * Removes a saved view. Saved views are shared org-wide. Deleting a non-existent view returns 404.
+ * @summary Delete rule saved view
+ */
+export const deleteRuleView = (
+	{ id }: DeleteRuleViewPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/rule_views/${id}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteRuleViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRuleView>>,
+		TError,
+		{ pathParams: DeleteRuleViewPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteRuleView>>,
+	TError,
+	{ pathParams: DeleteRuleViewPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteRuleView'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof deleteRuleView>>,
+		{ pathParams: DeleteRuleViewPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteRuleView(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteRuleViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteRuleView>>
+>;
+
+export type DeleteRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete rule saved view
+ */
+export const useDeleteRuleView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRuleView>>,
+		TError,
+		{ pathParams: DeleteRuleViewPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteRuleView>>,
+	TError,
+	{ pathParams: DeleteRuleViewPathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteRuleViewMutationOptions(options));
+};
+/**
+ * Replaces a saved view's name and data. Saved views are shared org-wide.
+ * @summary Update rule saved view
+ */
+export const updateRuleView = (
+	{ id }: UpdateRuleViewPathParameters,
+	ruletypesPostableRuleViewDTO?: BodyType<RuletypesPostableRuleViewDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateRuleView200>({
+		url: `/api/v2/rule_views/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostableRuleViewDTO,
+		signal,
+	});
+};
+
+export const getUpdateRuleViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateRuleView>>,
+		TError,
+		{
+			pathParams: UpdateRuleViewPathParameters;
+			data?: BodyType<RuletypesPostableRuleViewDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateRuleView>>,
+	TError,
+	{
+		pathParams: UpdateRuleViewPathParameters;
+		data?: BodyType<RuletypesPostableRuleViewDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateRuleView'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateRuleView>>,
+		{
+			pathParams: UpdateRuleViewPathParameters;
+			data?: BodyType<RuletypesPostableRuleViewDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateRuleView(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateRuleViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateRuleView>>
+>;
+export type UpdateRuleViewMutationBody =
+	| BodyType<RuletypesPostableRuleViewDTO>
+	| undefined;
+export type UpdateRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update rule saved view
+ */
+export const useUpdateRuleView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateRuleView>>,
+		TError,
+		{
+			pathParams: UpdateRuleViewPathParameters;
+			data?: BodyType<RuletypesPostableRuleViewDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateRuleView>>,
+	TError,
+	{
+		pathParams: UpdateRuleViewPathParameters;
+		data?: BodyType<RuletypesPostableRuleViewDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateRuleViewMutationOptions(options));
+};
 /**
  * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
  * @deprecated

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -5291,6 +5291,87 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesTextPanelSpecDTO;
 }
 
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind {
+	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
+}
+export enum DashboardtypesHeatmapYScaleDTO {
+	auto = 'auto',
+	linear = 'linear',
+	log = 'log',
+	symlog = 'symlog',
+}
+export interface DashboardtypesHeatmapAxisDTO {
+	scale?: DashboardtypesHeatmapYScaleDTO;
+}
+
+export interface DashboardtypesHeatmapAxesDTO {
+	y?: DashboardtypesHeatmapAxisDTO;
+}
+
+export enum DashboardtypesHeatmapColorModeDTO {
+	palette = 'palette',
+	opacity = 'opacity',
+}
+export enum DashboardtypesHeatmapPaletteDTO {
+	ice = 'ice',
+	moss = 'moss',
+	rust = 'rust',
+	graphite = 'graphite',
+	ember = 'ember',
+	lagoon = 'lagoon',
+	orchid = 'orchid',
+	verdant = 'verdant',
+	lava = 'lava',
+	beacon = 'beacon',
+}
+export enum DashboardtypesHeatmapColorScaleDTO {
+	log = 'log',
+	sqrt = 'sqrt',
+	linear = 'linear',
+}
+export interface DashboardtypesHeatmapColorsDTO {
+	/**
+	 * @type string
+	 */
+	fill?: string;
+	/**
+	 * @type number,null
+	 */
+	maxCount?: number | null;
+	/**
+	 * @type number,null
+	 */
+	minCount?: number | null;
+	mode?: DashboardtypesHeatmapColorModeDTO;
+	palette?: DashboardtypesHeatmapPaletteDTO;
+	scale?: DashboardtypesHeatmapColorScaleDTO;
+	/**
+	 * @type integer
+	 */
+	steps?: number;
+}
+
+export interface DashboardtypesHeatmapChartAppearanceDTO {
+	colors?: DashboardtypesHeatmapColorsDTO;
+}
+
+export interface DashboardtypesHeatmapPanelSpecDTO {
+	axes?: DashboardtypesHeatmapAxesDTO;
+	chartAppearance?: DashboardtypesHeatmapChartAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO {
+	/**
+	 * @enum signoz/HeatmapPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind;
+	spec: DashboardtypesHeatmapPanelSpecDTO;
+}
+
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5300,7 +5381,8 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -6226,6 +6308,7 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
+	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
 }
 /**
  * @nullable
@@ -10328,6 +10411,56 @@ export interface RuletypesListableRuleDTO {
 	updatedBy?: string;
 }
 
+export interface RuletypesRuleViewDataDTO {
+	order?: RuletypesListOrderDTO;
+	/**
+	 * @type string
+	 */
+	query?: string;
+	sort?: RuletypesListSortDTO;
+	/**
+	 * @type array
+	 */
+	states?: string[];
+	/**
+	 * @type string
+	 */
+	version: string;
+}
+
+export interface RuletypesRuleViewDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	data: RuletypesRuleViewDataDTO;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
+export interface RuletypesListableRuleViewsDTO {
+	/**
+	 * @type array
+	 */
+	views: RuletypesRuleViewDTO[];
+}
+
 export interface RuletypesListableRulesDTO {
 	/**
 	 * @type array
@@ -10496,6 +10629,14 @@ export interface RuletypesPostableRuleDTO {
 	version?: string;
 }
 
+export interface RuletypesPostableRuleViewDTO {
+	data: RuletypesRuleViewDataDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
 export type RuletypesRuleDTOAnnotations = { [key: string]: string };
 
 export type RuletypesRuleDTOLabels = { [key: string]: string };
@@ -11194,6 +11335,82 @@ export interface SpantypesGettableTraceAggregationsDTO {
 	aggregations: SpantypesSpanAggregationResultDTO[];
 }
 
+export interface SpantypesTraceAITokensDTO {
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	cacheRead: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	cacheWrite: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	input: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	output: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	reasoning: number;
+}
+
+export interface SpantypesTraceAISummaryDTO {
+	tokens: SpantypesTraceAITokensDTO;
+	/**
+	 * @type number
+	 */
+	totalCost?: number;
+}
+
+export interface SpantypesGettableTraceSummaryDTO {
+	ai?: SpantypesTraceAISummaryDTO;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	endTimestampMillis: number;
+	/**
+	 * @type boolean
+	 */
+	hasMissingSpans: boolean;
+	/**
+	 * @type string
+	 */
+	rootServiceEntryPoint: string;
+	/**
+	 * @type string
+	 */
+	rootServiceName: string;
+	/**
+	 * @type string
+	 */
+	rootSpanStatusCode: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	startTimestampMillis: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalErrorSpansCount: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalSpansCount: number;
+}
+
 export interface SpantypesOtelSpanRefDTO {
 	/**
 	 * @type string
@@ -11209,6 +11426,86 @@ export interface SpantypesOtelSpanRefDTO {
 	traceId?: string;
 }
 
+export type SpantypesThreadSpanDTOAttributes = { [key: string]: unknown };
+
+export type SpantypesThreadSpanDTOResource = { [key: string]: string };
+
+export interface SpantypesThreadSpanDTO {
+	/**
+	 * @type object
+	 */
+	attributes: SpantypesThreadSpanDTOAttributes;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	duration_nano: number;
+	/**
+	 * @type array
+	 */
+	events: SpantypesEventDTO[];
+	/**
+	 * @type boolean
+	 */
+	has_error: boolean;
+	/**
+	 * @type string
+	 */
+	kind_string: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	parent_span_id: string;
+	/**
+	 * @type array
+	 */
+	references: SpantypesOtelSpanRefDTO[];
+	/**
+	 * @type object
+	 */
+	resource: SpantypesThreadSpanDTOResource;
+	/**
+	 * @type string
+	 */
+	span_id: string;
+	/**
+	 * @type string
+	 */
+	status_code_string: string;
+	/**
+	 * @type string
+	 */
+	status_message: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	time_unix: number;
+	/**
+	 * @type string
+	 */
+	trace_id: string;
+}
+
+export interface SpantypesGettableTraceThreadDTO {
+	/**
+	 * @type string
+	 */
+	nextCursor?: string;
+	/**
+	 * @type string
+	 */
+	prevCursor?: string;
+	/**
+	 * @type array
+	 */
+	spans: SpantypesThreadSpanDTO[];
+}
+
 export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
 	[key: string]: unknown;
 };
@@ -12882,6 +13179,51 @@ export type GetTraceAggregations200 = {
 	status: string;
 };
 
+export type GetTraceSummaryPathParameters = {
+	traceID: string;
+};
+export type GetTraceSummary200 = {
+	data: SpantypesGettableTraceSummaryDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetTraceThreadPathParameters = {
+	traceID: string;
+};
+export type GetTraceThreadParams = {
+	/**
+	 * @type integer
+	 * @description Page size, at most 100. 0 means 20.
+	 */
+	limit?: number;
+	/**
+	 * @type string
+	 * @description The nextCursor of a page; returns the spans after it. Set only one of after, before and spanId.
+	 */
+	after?: string;
+	/**
+	 * @type string
+	 * @description The prevCursor of a page; returns the spans before it. Set only one of after, before and spanId.
+	 */
+	before?: string;
+	/**
+	 * @type string
+	 * @description Returns the page around this span. Set only one of after, before and spanId.
+	 */
+	spanId?: string;
+};
+
+export type GetTraceThread200 = {
+	data: SpantypesGettableTraceThreadDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListUserPreferences200 = {
 	/**
 	 * @type array
@@ -13783,6 +14125,36 @@ export type GetUsersByRoleID200 = {
 	status: string;
 };
 
+export type ListRuleViews200 = {
+	data: RuletypesListableRuleViewsDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateRuleView201 = {
+	data: RuletypesRuleViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteRuleViewPathParameters = {
+	id: string;
+};
+export type UpdateRuleViewPathParameters = {
+	id: string;
+};
+export type UpdateRuleView200 = {
+	data: RuletypesRuleViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListRules200 = {
 	/**
 	 * @type array

frontend/src/api/generated/services/tracedetail/index.ts

@@ -4,11 +4,17 @@
  * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
-import { useMutation } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import type {
+	InvalidateOptions,
 	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
 } from 'react-query';
 
 import type {
@@ -16,6 +22,11 @@ import type {
 	GetFlamegraphPathParameters,
 	GetTraceAggregations200,
 	GetTraceAggregationsPathParameters,
+	GetTraceSummary200,
+	GetTraceSummaryPathParameters,
+	GetTraceThread200,
+	GetTraceThreadParams,
+	GetTraceThreadPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
@@ -27,6 +38,26 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
+const withQueryKey = <T extends object, K>(
+	query: T,
+	queryKey: K,
+): T & { queryKey: K } => {
+	const result = { queryKey } as T & { queryKey: K };
+	for (const key of Object.keys(query)) {
+		// The explicit queryKey always wins, matching the previous
+		// `{ ...query, queryKey }` spread where it was set last.
+		if (key === 'queryKey') {
+			continue;
+		}
+		Object.defineProperty(result, key, {
+			enumerable: true,
+			configurable: true,
+			get: () => (query as Record<string, unknown>)[key],
+		});
+	}
+	return result;
+};
+
 /**
  * Computes span aggregations grouped by requested field.
  * @summary Get aggregations for a trace
@@ -127,6 +158,223 @@ export const useGetTraceAggregations = <
 > => {
 	return useMutation(getGetTraceAggregationsMutationOptions(options));
 };
+/**
+ * Returns the trace's time range, root span, span and error counts, and whether any spans are missing. AI traces also include token and cost totals.
+ * @summary Get summary for a trace
+ */
+export const getTraceSummary = (
+	{ traceID }: GetTraceSummaryPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetTraceSummary200>({
+		url: `/api/v1/traces/${traceID}/summary`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetTraceSummaryQueryKey = ({
+	traceID,
+}: GetTraceSummaryPathParameters) => {
+	return [`/api/v1/traces/${traceID}/summary`] as const;
+};
+
+export const getGetTraceSummaryQueryOptions = <
+	TData = Awaited<ReturnType<typeof getTraceSummary>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ traceID }: GetTraceSummaryPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getTraceSummary>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetTraceSummaryQueryKey({ traceID });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getTraceSummary>>> = ({
+		signal,
+	}) => getTraceSummary({ traceID }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: traceID !== null && traceID !== undefined,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getTraceSummary>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetTraceSummaryQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getTraceSummary>>
+>;
+export type GetTraceSummaryQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get summary for a trace
+ */
+
+export function useGetTraceSummary<
+	TData = Awaited<ReturnType<typeof getTraceSummary>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ traceID }: GetTraceSummaryPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getTraceSummary>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetTraceSummaryQueryOptions({ traceID }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Get summary for a trace
+ */
+export const invalidateGetTraceSummary = async (
+	queryClient: QueryClient,
+	{ traceID }: GetTraceSummaryPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetTraceSummaryQueryKey({ traceID }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Returns the spans carrying gen_ai input or output messages in timestamp order. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.
+ * @summary Get thread view for a trace
+ */
+export const getTraceThread = (
+	{ traceID }: GetTraceThreadPathParameters,
+	params?: GetTraceThreadParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetTraceThread200>({
+		url: `/api/v1/traces/${traceID}/thread`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetTraceThreadQueryKey = (
+	{ traceID }: GetTraceThreadPathParameters,
+	params?: GetTraceThreadParams,
+) => {
+	return [
+		`/api/v1/traces/${traceID}/thread`,
+		...(params ? [params] : []),
+	] as const;
+};
+
+export const getGetTraceThreadQueryOptions = <
+	TData = Awaited<ReturnType<typeof getTraceThread>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ traceID }: GetTraceThreadPathParameters,
+	params?: GetTraceThreadParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getTraceThread>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetTraceThreadQueryKey({ traceID }, params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getTraceThread>>> = ({
+		signal,
+	}) => getTraceThread({ traceID }, params, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: traceID !== null && traceID !== undefined,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getTraceThread>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetTraceThreadQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getTraceThread>>
+>;
+export type GetTraceThreadQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get thread view for a trace
+ */
+
+export function useGetTraceThread<
+	TData = Awaited<ReturnType<typeof getTraceThread>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ traceID }: GetTraceThreadPathParameters,
+	params?: GetTraceThreadParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getTraceThread>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetTraceThreadQueryOptions(
+		{ traceID },
+		params,
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Get thread view for a trace
+ */
+export const invalidateGetTraceThread = async (
+	queryClient: QueryClient,
+	{ traceID }: GetTraceThreadPathParameters,
+	params?: GetTraceThreadParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetTraceThreadQueryKey({ traceID }, params) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * Returns the flamegraph view of spans for a given trace ID.
  * @summary Get flamegraph view for a trace

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -198,6 +198,7 @@ function createBaseSpec(
 				: undefined,
 		legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
 		having: normalizeHaving(queryData.having),
+		bucketOptions: queryData.bucketOptions,
 		functions: isEmpty(queryData.functions)
 			? undefined
 			: queryData.functions.map((func: QueryFunction): QueryFunction => {

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -5,6 +5,10 @@
 	border-radius: 2px 0px 0px 2px;
 
 	.label {
+		// Typography.Text takes its display from this token; at its `inline` default
+		// the label blockifies as a flex item and the text rides the top of the row.
+		--typography-text-display: flex;
+
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -42,6 +42,9 @@
 		display: flex;
 		flex-direction: column;
 		padding: 0 16px;
+		// OverlayScrollbar owns the scroll. A native scrollbar here changes the
+		// body width when it toggles and shifts the header grid.
+		overflow: hidden;
 	}
 
 	.title {
@@ -69,7 +72,7 @@
 	}
 
 	.log-detail-drawer__content {
-		height: 100%;
+		min-height: 100%;
 	}
 
 	.log-detail-drawer__log {

frontend/src/components/LogDetail/index.tsx

@@ -5,6 +5,7 @@ import { Drawer, Tooltip } from 'antd';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
@@ -288,148 +289,150 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div
-				className="log-detail-drawer__content"
-				data-log-detail-ignore="true"
-				data-testid="log-detail-drawer"
-			>
-				<div className="log-detail-drawer__log">
-					<LogStateIndicator
-						severityText={log.severity_text}
-						severityNumber={log.severity_number}
-						fontSize={options?.fontSize ?? FontSize.MEDIUM}
-					/>
-					<Tooltip
-						title={removeEscapeCharacters(logBody)}
-						placement="left"
-						mouseLeaveDelay={0}
-					>
-						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
-					</Tooltip>
-
-					<div className="log-overflow-shadow">&nbsp;</div>
-				</div>
-
-				<LogHighlights log={log} />
-
-				<div className="log-detail-drawer__section-divider" />
-
-				<div className="tabs-and-search">
-					<ToggleGroupSimple
-						type="single"
-						className="views-tabs"
-						onChange={handleModeChange}
-						value={selectedView}
-						items={[
-							{
-								value: VIEW_TYPES.OVERVIEW,
-								label: (
-									<div className="view-title">
-										<Table size={14} />
-										Overview
-									</div>
-								),
-							},
-							{
-								value: VIEW_TYPES.CONTEXT,
-								label: (
-									<div className="view-title">
-										<TextSelect size={14} />
-										Context
-									</div>
-								),
-							},
-							{
-								value: VIEW_TYPES.INFRAMETRICS,
-								label: (
-									<div className="view-title">
-										<Histogram size="md" />
-										Metrics
-									</div>
-								),
-							},
-						]}
-					/>
-
-					<div className="log-detail-drawer__actions">
-						{selectedView === VIEW_TYPES.CONTEXT && (
-							<Tooltip
-								title="Show Filters"
-								placement="topLeft"
-								aria-label="Show Filters"
-								mouseLeaveDelay={0}
-							>
-								<Button
-									variant="link"
-									color="secondary"
-									size="sm"
-									prefix={<Filter size="lg" />}
-									onClick={handleFilterVisible}
-								/>
-							</Tooltip>
-						)}
-					</div>
-				</div>
-				{isFilterVisible && contextQuery?.builder.queryData[0] && (
-					<div className="log-detail-drawer-query-container">
-						<QuerySearch
-							onChange={(value): void => handleQueryExpressionChange(value, 0)}
-							dataSource={DataSource.LOGS}
-							queryData={contextQuery?.builder.queryData[0]}
-							onRun={handleRunQuery}
+			<OverlayScrollbar style={{ height: '100%' }}>
+				<div
+					className="log-detail-drawer__content"
+					data-log-detail-ignore="true"
+					data-testid="log-detail-drawer"
+				>
+					<div className="log-detail-drawer__log">
+						<LogStateIndicator
+							severityText={log.severity_text}
+							severityNumber={log.severity_number}
+							fontSize={options?.fontSize ?? FontSize.MEDIUM}
 						/>
+						<Tooltip
+							title={removeEscapeCharacters(logBody)}
+							placement="left"
+							mouseLeaveDelay={0}
+						>
+							<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
+						</Tooltip>
+
+						<div className="log-overflow-shadow">&nbsp;</div>
 					</div>
-				)}
 
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<Overview
-						logData={log}
-						isListViewPanel={isListViewPanel}
-						handleChangeSelectedView={handleChangeSelectedView}
-						onApplyLogFilter={onApplyLogFilter}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.CONTEXT && (
-					<ContextView
-						log={log}
-						filters={filters}
-						contextQuery={contextQuery}
-						isEdit={isEdit}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.INFRAMETRICS && (
-					<InfraMetrics
-						clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
-						podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
-						nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
-						hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-						timestamp={log.timestamp.toString()}
-						dataSource={DataSource.LOGS}
-					/>
-				)}
+					<LogHighlights log={log} />
 
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<div className="log-detail-drawer__footer-hint">
-						<div className="log-detail-drawer__footer-hint-content">
-							<Typography.Text
-								color="muted"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								Use
-							</Typography.Text>
-							<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
-							<span>/</span>
-							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
-							<Typography.Text
-								color="muted"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								to view previous/next log
-							</Typography.Text>
+					<div className="log-detail-drawer__section-divider" />
+
+					<div className="tabs-and-search">
+						<ToggleGroupSimple
+							type="single"
+							className="views-tabs"
+							onChange={handleModeChange}
+							value={selectedView}
+							items={[
+								{
+									value: VIEW_TYPES.OVERVIEW,
+									label: (
+										<div className="view-title">
+											<Table size={14} />
+											Overview
+										</div>
+									),
+								},
+								{
+									value: VIEW_TYPES.CONTEXT,
+									label: (
+										<div className="view-title">
+											<TextSelect size={14} />
+											Context
+										</div>
+									),
+								},
+								{
+									value: VIEW_TYPES.INFRAMETRICS,
+									label: (
+										<div className="view-title">
+											<Histogram size="md" />
+											Metrics
+										</div>
+									),
+								},
+							]}
+						/>
+
+						<div className="log-detail-drawer__actions">
+							{selectedView === VIEW_TYPES.CONTEXT && (
+								<Tooltip
+									title="Show Filters"
+									placement="topLeft"
+									aria-label="Show Filters"
+									mouseLeaveDelay={0}
+								>
+									<Button
+										variant="link"
+										color="secondary"
+										size="sm"
+										prefix={<Filter size="lg" />}
+										onClick={handleFilterVisible}
+									/>
+								</Tooltip>
+							)}
 						</div>
 					</div>
-				)}
-			</div>
+					{isFilterVisible && contextQuery?.builder.queryData[0] && (
+						<div className="log-detail-drawer-query-container">
+							<QuerySearch
+								onChange={(value): void => handleQueryExpressionChange(value, 0)}
+								dataSource={DataSource.LOGS}
+								queryData={contextQuery?.builder.queryData[0]}
+								onRun={handleRunQuery}
+							/>
+						</div>
+					)}
+
+					{selectedView === VIEW_TYPES.OVERVIEW && (
+						<Overview
+							logData={log}
+							isListViewPanel={isListViewPanel}
+							handleChangeSelectedView={handleChangeSelectedView}
+							onApplyLogFilter={onApplyLogFilter}
+						/>
+					)}
+					{selectedView === VIEW_TYPES.CONTEXT && (
+						<ContextView
+							log={log}
+							filters={filters}
+							contextQuery={contextQuery}
+							isEdit={isEdit}
+						/>
+					)}
+					{selectedView === VIEW_TYPES.INFRAMETRICS && (
+						<InfraMetrics
+							clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+							podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+							nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+							hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+							timestamp={log.timestamp.toString()}
+							dataSource={DataSource.LOGS}
+						/>
+					)}
+
+					{selectedView === VIEW_TYPES.OVERVIEW && (
+						<div className="log-detail-drawer__footer-hint">
+							<div className="log-detail-drawer__footer-hint-content">
+								<Typography.Text
+									color="muted"
+									className="log-detail-drawer__footer-hint-text"
+								>
+									Use
+								</Typography.Text>
+								<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
+								<span>/</span>
+								<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
+								<Typography.Text
+									color="muted"
+									className="log-detail-drawer__footer-hint-text"
+								>
+									to view previous/next log
+								</Typography.Text>
+							</div>
+						</div>
+					)}
+				</div>
+			</OverlayScrollbar>
 		</Drawer>
 	);
 }

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -21,7 +21,6 @@ import { Color } from '@signozhq/design-tokens';
 import { Button, Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
-import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -30,6 +29,7 @@ import { capitalize, isEmpty } from 'lodash-es';
 import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
+import TruncatedTooltip from './TruncatedTooltip';
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
 	ALL_SELECTED_VALUE,
@@ -729,65 +729,71 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			};
 
 			return (
-				<div
+				<TruncatedTooltip
 					key={option.value || `option-${index}`}
-					id={optionId}
-					ref={(el): void => {
-						if (index !== undefined) {
-							optionRefs.current[index] = el;
-						}
-					}}
-					className={cx('option-item', {
-						selected: isSelected,
-						active: isActive,
-					})}
-					onKeyDown={(e): void => {
-						if ((e.key === 'Enter' || e.key === SPACEKEY) && isActive) {
-							e.stopPropagation();
-							e.preventDefault();
-							handleItemSelection();
-						}
-					}}
-					onMouseEnter={(): void => {
-						setActiveIndex(index ?? -1);
-						setActiveChipIndex(-1); // Clear chip selection when hovering ALL option
-					}}
-					role="option"
-					aria-selected={isSelected}
-					aria-disabled={option.disabled}
-					tabIndex={isActive ? 0 : -1}
+					title={String(option.label || '')}
 				>
-					<Checkbox
-						value={isSelected}
-						className="option-checkbox"
-						onClick={(e): void => selectFromButton(e, 'checkbox')}
-					>
-						<div className="option-content">
-							<Typography.Text truncate={1} className="option-label-text">
-								{highlightMatchedText(String(option.label || ''), searchText)}
-							</Typography.Text>
-							{(option.type === 'custom' || option.type === 'regex') && (
-								<div className="option-badge">{capitalize(option.type)}</div>
-							)}
-							{option.value && ensureValidOption(option.value) && (
-								<Button
-									type="text"
-									className="only-btn"
-									onClick={(e): void => selectFromButton(e, 'option')}
-								>
-									{currentToggleTagValue({ option: option.value })}
-								</Button>
-							)}
-							<Button
-								type="text"
-								className="toggle-btn"
+					{(textRef): JSX.Element => (
+						<div
+							id={optionId}
+							ref={(el): void => {
+								if (index !== undefined) {
+									optionRefs.current[index] = el;
+								}
+							}}
+							className={cx('option-item', {
+								selected: isSelected,
+								active: isActive,
+							})}
+							onKeyDown={(e): void => {
+								if ((e.key === 'Enter' || e.key === SPACEKEY) && isActive) {
+									e.stopPropagation();
+									e.preventDefault();
+									handleItemSelection();
+								}
+							}}
+							onMouseEnter={(): void => {
+								setActiveIndex(index ?? -1);
+								setActiveChipIndex(-1); // Clear chip selection when hovering ALL option
+							}}
+							role="option"
+							aria-selected={isSelected}
+							aria-disabled={option.disabled}
+							tabIndex={isActive ? 0 : -1}
+						>
+							<Checkbox
+								value={isSelected}
+								className="option-checkbox"
 								onClick={(e): void => selectFromButton(e, 'checkbox')}
 							>
-								Toggle
-							</Button>
+								<div className="option-content">
+									<span ref={textRef} className="option-label-text">
+										{highlightMatchedText(String(option.label || ''), searchText)}
+									</span>
+									{(option.type === 'custom' || option.type === 'regex') && (
+										<div className="option-badge">{capitalize(option.type)}</div>
+									)}
+									{option.value && ensureValidOption(option.value) && (
+										<Button
+											type="text"
+											className="only-btn"
+											onClick={(e): void => selectFromButton(e, 'option')}
+										>
+											{currentToggleTagValue({ option: option.value })}
+										</Button>
+									)}
+									<Button
+										type="text"
+										className="toggle-btn"
+										onClick={(e): void => selectFromButton(e, 'checkbox')}
+									>
+										Toggle
+									</Button>
+								</div>
+							</Checkbox>
 						</div>
-					</Checkbox>
-				</div>
+					)}
+				</TruncatedTooltip>
 			);
 		},
 		[

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -16,6 +16,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';
@@ -25,6 +26,7 @@ import { capitalize, isEmpty } from 'lodash-es';
 import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
+import TruncatedTooltip from './TruncatedTooltip';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
@@ -207,41 +209,46 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			const optionId = `option-${index}`;
 
 			return (
-				<div
-					key={option.value}
-					id={optionId}
-					ref={(el): void => {
-						if (index !== undefined) {
-							optionRefs.current[index] = el;
-						}
-					}}
-					className={cx('option-item', {
-						selected: isSelected,
-						active: isActive,
-					})}
-					onClick={(e): void => {
-						e.stopPropagation();
-						handleSelection();
-					}}
-					onKeyDown={(e): void => {
-						if (e.key === 'Enter' || e.key === SPACEKEY) {
-							e.preventDefault();
-							handleSelection();
-						}
-					}}
-					onMouseEnter={(): void => setActiveOptionIndex(index || -1)}
-					role="option"
-					aria-selected={isSelected}
-					aria-disabled={option.disabled}
-					tabIndex={isActive ? 0 : -1}
-				>
-					<div className="option-content">
-						<div>{highlightMatchedText(String(option.label || ''), searchText)}</div>
-						{option.type === 'custom' && (
-							<div className="option-badge">{capitalize(option.type)}</div>
-						)}
-					</div>
-				</div>
+				<TruncatedTooltip key={option.value} title={String(option.label || '')}>
+					{(textRef): JSX.Element => (
+						<div
+							id={optionId}
+							ref={(el): void => {
+								if (index !== undefined) {
+									optionRefs.current[index] = el;
+								}
+							}}
+							className={cx('option-item', {
+								selected: isSelected,
+								active: isActive,
+							})}
+							onClick={(e): void => {
+								e.stopPropagation();
+								handleSelection();
+							}}
+							onKeyDown={(e): void => {
+								if (e.key === 'Enter' || e.key === SPACEKEY) {
+									e.preventDefault();
+									handleSelection();
+								}
+							}}
+							onMouseEnter={(): void => setActiveOptionIndex(index || -1)}
+							role="option"
+							aria-selected={isSelected}
+							aria-disabled={option.disabled}
+							tabIndex={isActive ? 0 : -1}
+						>
+							<div className="option-content">
+								<span ref={textRef} className="option-label-text">
+									{highlightMatchedText(String(option.label || ''), searchText)}
+								</span>
+								{option.type === 'custom' && (
+									<div className="option-badge">{capitalize(option.type)}</div>
+								)}
+							</div>
+						</div>
+					)}
+				</TruncatedTooltip>
 			);
 		},
 		[highlightMatchedText, searchText, onChange, activeOptionIndex],
@@ -702,50 +709,67 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	// ===== Final Processing =====
 
 	// Apply highlight to matched text in options
-	const optionsWithHighlight = useMemo(
-		() =>
-			options
-				?.filter((option) =>
-					String(option.label || '')
-						.toLowerCase()
-						.includes(searchText.toLowerCase()),
-				)
-				?.map((option) => ({
-					...option,
-					label: highlightMatchedText(String(option.label || ''), searchText),
-				})),
-		[options, searchText, highlightMatchedText],
-	);
+	const optionsWithHighlight = useMemo(() => {
+		const matching =
+			options?.filter((option) =>
+				String(option.label || '')
+					.toLowerCase()
+					.includes(searchText.toLowerCase()),
+			) ?? [];
+
+		// antd shows a value with no matching option as a bare string, so keep the
+		// selected value listed to render it through the tooltip label below.
+		return (
+			isEmpty(value)
+				? matching
+				: prioritizeOrAddOptionForSingleSelect(matching, value)
+		).map((option) => ({
+			...option,
+			// Rendered as the selected value in the closed control.
+			label: (
+				<TruncatedTooltip title={String(option.label || '')} side="bottom">
+					{(textRef): JSX.Element => (
+						<span ref={textRef} className="option-label-text">
+							{highlightMatchedText(String(option.label || ''), searchText)}
+						</span>
+					)}
+				</TruncatedTooltip>
+			),
+		}));
+	}, [options, searchText, value, highlightMatchedText]);
 
 	// ===== Component Rendering =====
 	return (
-		<Select
-			ref={selectRef}
-			className={cx('custom-select', className)}
-			placeholder={placeholder}
-			showSearch
-			filterOption={false}
-			onSearch={handleSearch}
-			value={value}
-			onChange={onChange}
-			onDropdownVisibleChange={handleDropdownVisibleChange}
-			open={isOpen}
-			options={optionsWithHighlight}
-			defaultActiveFirstOption={defaultActiveFirstOption}
-			popupMatchSelectWidth={popupMatchSelectWidth}
-			allowClear={allowClear ? { clearIcon } : false}
-			getPopupContainer={getPopupContainer ?? popupContainer}
-			suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
-			dropdownRender={customDropdownRender}
-			menuItemSelectedIcon={null}
-			popupClassName={cx('custom-select-dropdown-container', popupClassName)}
-			listHeight={300}
-			placement={placement}
-			optionFilterProp="label"
-			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-			onKeyDown={handleKeyDown}
-			{...rest}
-		/>
+		// Self-provided so label tooltips work wherever this select is rendered.
+		<TooltipProvider>
+			<Select
+				ref={selectRef}
+				className={cx('custom-select', className)}
+				placeholder={placeholder}
+				showSearch
+				filterOption={false}
+				onSearch={handleSearch}
+				value={value}
+				onChange={onChange}
+				onDropdownVisibleChange={handleDropdownVisibleChange}
+				open={isOpen}
+				options={optionsWithHighlight}
+				defaultActiveFirstOption={defaultActiveFirstOption}
+				popupMatchSelectWidth={popupMatchSelectWidth}
+				allowClear={allowClear ? { clearIcon } : false}
+				getPopupContainer={getPopupContainer ?? popupContainer}
+				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
+				dropdownRender={customDropdownRender}
+				menuItemSelectedIcon={null}
+				popupClassName={cx('custom-select-dropdown-container', popupClassName)}
+				listHeight={300}
+				placement={placement}
+				optionFilterProp="label"
+				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+				onKeyDown={handleKeyDown}
+				{...rest}
+			/>
+		</TooltipProvider>
 	);
 };
 

frontend/src/components/NewSelect/TruncatedTooltip.module.scss

@@ -0,0 +1,4 @@
+// Above the antd select popup it is shown from.
+.tooltipContent {
+	--tooltip-z-index: 2100;
+}

frontend/src/components/NewSelect/TruncatedTooltip.tsx

@@ -0,0 +1,41 @@
+import { ReactElement, RefObject, useRef, useState } from 'react';
+import { TooltipSimple, TooltipSimpleProps } from '@signozhq/ui/tooltip';
+
+import styles from './TruncatedTooltip.module.scss';
+
+interface TruncatedTooltipProps {
+	title: string;
+	side?: TooltipSimpleProps['side'];
+	/** Renders the trigger; attach the ref to the element that may truncate. */
+	children: (textRef: RefObject<HTMLSpanElement>) => ReactElement;
+}
+
+function TruncatedTooltip({
+	title,
+	side = 'right',
+	children,
+}: TruncatedTooltipProps): JSX.Element {
+	const textRef = useRef<HTMLSpanElement>(null);
+	const [open, setOpen] = useState(false);
+
+	const handleOpenChange = (next: boolean): void => {
+		const el = textRef.current;
+		setOpen(next && !!el && el.scrollWidth > el.clientWidth);
+	};
+
+	return (
+		<TooltipSimple
+			title={title}
+			side={side}
+			arrow
+			delayDuration={300}
+			open={open}
+			onOpenChange={handleOpenChange}
+			tooltipContentProps={{ className: styles.tooltipContent }}
+		>
+			{children(textRef)}
+		</TooltipSimple>
+	);
+}
+
+export default TruncatedTooltip;

frontend/src/components/NewSelect/__test__/CustomSelect.selectedTooltip.test.tsx

@@ -0,0 +1,34 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import CustomSelect from '../CustomSelect';
+
+const LABEL = '/oteldemo.RecommendationService/ListRecommendations';
+
+describe('CustomSelect selected value tooltip', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		jest.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockReturnValue(400);
+		jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(200);
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+		jest.restoreAllMocks();
+	});
+
+	it.each([
+		['listed in the options', [{ label: LABEL, value: LABEL }]],
+		['missing from the options', [{ label: 'other', value: 'other' }]],
+	])('reveals a truncated selected value %s on hover', async (_, options) => {
+		render(<CustomSelect options={options} value={LABEL} />);
+
+		const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+		await user.hover(screen.getByText(LABEL));
+		act(() => {
+			jest.advanceTimersByTime(500);
+		});
+
+		expect(screen.getByRole('tooltip')).toHaveTextContent(LABEL);
+	});
+});

frontend/src/components/NewSelect/__test__/TruncatedTooltip.test.tsx

@@ -0,0 +1,63 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+
+import TruncatedTooltip from '../TruncatedTooltip';
+
+const LABEL = '/oteldemo.RecommendationService/ListRecommendations';
+
+function renderRow(scrollWidth: number, clientWidth: number): void {
+	jest
+		.spyOn(HTMLElement.prototype, 'scrollWidth', 'get')
+		.mockReturnValue(scrollWidth);
+	jest
+		.spyOn(HTMLElement.prototype, 'clientWidth', 'get')
+		.mockReturnValue(clientWidth);
+
+	render(
+		<TooltipProvider>
+			<TruncatedTooltip title={LABEL}>
+				{(textRef): JSX.Element => (
+					<div data-testid="row">
+						<span ref={textRef}>{LABEL}</span>
+					</div>
+				)}
+			</TruncatedTooltip>
+		</TooltipProvider>,
+	);
+}
+
+async function hover(element: HTMLElement): Promise<void> {
+	const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+	await user.hover(element);
+	act(() => {
+		jest.advanceTimersByTime(500);
+	});
+}
+
+describe('TruncatedTooltip', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+		jest.restoreAllMocks();
+	});
+
+	it('reveals truncated text when its row is hovered', async () => {
+		renderRow(400, 200);
+
+		await hover(screen.getByTestId('row'));
+
+		expect(screen.getByRole('tooltip')).toHaveTextContent(LABEL);
+	});
+
+	it('shows no tooltip when the text fits', async () => {
+		renderRow(200, 200);
+
+		await hover(screen.getByTestId('row'));
+
+		expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/NewSelect/stories/NewSelect.stories.tsx

@@ -135,6 +135,51 @@ const LONG_LABEL_OPTION = {
 	value: 'checkout-payment-authorisation',
 };
 
+/** Truncation: hovering a cut-off option reveals its full label beside the row. */
+export const TruncatedOption: Story = {
+	args: { options: [LONG_LABEL_OPTION, ...options] },
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await userEvent.hover(
+			await screen.findByRole('option', { name: LONG_LABEL_OPTION.label }),
+		);
+		await screen.findByRole('tooltip', { name: LONG_LABEL_OPTION.label });
+	},
+};
+
+/** Truncation: hovering a cut-off selected value reveals it in full. */
+export const TruncatedValue: Story = {
+	args: {
+		options: [LONG_LABEL_OPTION, ...options],
+		value: LONG_LABEL_OPTION.value,
+	},
+	play: async (): Promise<void> => {
+		await userEvent.hover(await screen.findByText(LONG_LABEL_OPTION.label));
+		await screen.findByRole('tooltip', { name: LONG_LABEL_OPTION.label });
+	},
+};
+
+/** Truncation: a multi-select option reveals its full label the same way. */
+export const MultiTruncatedOption: Story = {
+	render: (): JSX.Element => (
+		<CustomMultiSelect
+			aria-label="Services"
+			options={[LONG_LABEL_OPTION, ...options]}
+		/>
+	),
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Services' }),
+		);
+		await userEvent.hover(
+			await screen.findByRole('option', { name: LONG_LABEL_OPTION.label }),
+		);
+		await screen.findByRole('tooltip', { name: LONG_LABEL_OPTION.label });
+	},
+};
+
 /**
  * Every tooltip the select renders, held open: the selected chip revealing the
  * option label it was cut from. Nothing bounds that label, so the chip is given

frontend/src/components/NewSelect/styles.scss

@@ -29,6 +29,13 @@ $custom-border-color: #2c3044;
 		background-color: var(--l2-background);
 		color: color-mix(in srgb, var(--border) 70%, transparent);
 	}
+
+	// The search input overlays the selected value; lift the value above it while
+	// closed so hovers reach its tooltip. Clicks still open the select and focus the input.
+	&:not(.ant-select-open) .ant-select-selection-item {
+		position: relative;
+		z-index: 1;
+	}
 }
 
 // Keep chip styles ONLY in the multi-select
@@ -223,6 +230,33 @@ $custom-border-color: #2c3044;
 	}
 }
 
+// Ellipsized option label; also the selected value in the closed single select.
+.option-label-text {
+	display: block;
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+// overscroll-behavior only holds on a box that overflows; a 1px sentinel past
+// the bottom makes even a short list overflow, so the wheel never scrolls the page.
+.custom-select-dropdown,
+.custom-multiselect-dropdown {
+	position: relative;
+	overscroll-behavior: contain;
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 0;
+		width: 1px;
+		height: 1px;
+	}
+}
+
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.module.scss

@@ -0,0 +1,142 @@
+/**
+ * Borrows the query builder's control metrics rather than the component defaults the
+ * toggle group and number input ship with: 36px tall, 2px radius, and the
+ * `--query-builder-v2-*` surface the selects above this row already paint on.
+ */
+.bucketOptions {
+	--toggle-group-radius: var(--radius-1);
+	--toggle-group-item-size: 36px;
+	--toggle-group-item-font-size: 13px;
+	--toggle-group-item-padding-left: var(--spacing-6);
+	--toggle-group-item-padding-right: var(--spacing-6);
+
+	// Repeated from `.query-add-ons` rather than inherited: the section also renders on a
+	// formula, which has no add-ons ancestor to pick the toggle palette up from.
+	--toggle-group-secondary-bg: var(
+		--query-builder-v2-toggle-group-background-color,
+		var(--l1-background-hover)
+	);
+	--toggle-group-secondary-border: var(
+		--query-builder-v2-toggle-group-border-color,
+		var(--l2-border)
+	);
+	--toggle-group-secondary-active-bg: var(
+		--query-builder-v2-toggle-group-active-background-color,
+		var(--l1-background)
+	);
+	--toggle-group-secondary-bg-hover: var(
+		--query-builder-v2-toggle-group-background-color-hover,
+		var(--l2-background)
+	);
+
+	--input-height: 36px;
+	--input-font-size: 13px;
+	--input-border-radius: var(--radius-1);
+	--input-border-color: var(--query-builder-v2-border-color, var(--l2-border));
+	--input-background: var(
+		--query-builder-v2-background-color,
+		var(--l2-background)
+	);
+	--input-foreground: var(--query-builder-v2-color, var(--l2-foreground));
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+
+	padding: var(--spacing-4);
+	box-sizing: border-box;
+	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+	border-radius: var(--radius-1);
+	background: var(--query-builder-v2-background-color, var(--l2-background));
+}
+
+.controls {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--spacing-8);
+}
+
+/** One label paired with its control, at the same 10px rhythm as the aggregate rows. */
+.field {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-5);
+}
+
+.bounds {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--spacing-6);
+}
+
+.label {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+
+	color: var(--l3-foreground);
+	font-family: 'Geist Mono';
+	font-size: 12px;
+	font-weight: var(--font-weight-medium);
+	line-height: 18px;
+	letter-spacing: 0.48px;
+	text-transform: uppercase;
+	white-space: nowrap;
+}
+
+/**
+ * The toggle group exposes a font-size token but no family, so each item's label carries
+ * the query builder's value type itself.
+ */
+.toggleLabel {
+	font-family: 'Geist Mono';
+	font-size: 13px;
+	font-weight: var(--font-weight-normal);
+	letter-spacing: -0.07px;
+}
+
+/** Surface and metrics come from the `--input-*` tokens above; only the family has none. */
+.numberInput {
+	width: 104px;
+
+	font-family: 'Geist Mono';
+	letter-spacing: -0.07px;
+}
+
+/** Unfilled: a pill on the same row as the toggles above reads as another control,
+ *  and the bounds are derived rather than set here. */
+.bound {
+	padding: var(--spacing-1) 0;
+
+	font-family: 'Geist Mono';
+	font-size: 13px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+
+	color: var(--query-builder-v2-color, var(--l2-foreground));
+}
+
+.overflowBound {
+	color: var(--l3-foreground);
+}
+
+.muted {
+	font-family: 'Geist Mono';
+	font-size: 13px;
+	line-height: 20px;
+	color: var(--l3-foreground);
+}
+
+.hintIcon {
+	flex: none;
+	cursor: help;
+	color: var(--l3-foreground);
+}
+
+.closeButton {
+	margin-left: auto;
+	width: 24px;
+	height: 24px;
+}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.tsx

@@ -0,0 +1,279 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Tooltip } from 'antd';
+import cx from 'classnames';
+import { Button } from '@signozhq/ui/button';
+import { InputNumber } from '@signozhq/ui/input-number';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ChevronUp, Info } from '@signozhq/icons';
+import {
+	Querybuildertypesv5BucketOptionsDTO,
+	Querybuildertypesv5BucketsKindDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import {
+	BUCKET_KIND_HINTS,
+	BUCKET_KIND_OPTIONS,
+	DEFAULT_NUM_BUCKETS,
+	LOG_SCALE_OPTIONS,
+	MAX_NUM_BUCKETS,
+} from './constants';
+import {
+	formatUpperBound,
+	hasBoundsBeyondPreview,
+	isLinearBuckets,
+	kindOptionOf,
+	linearBuckets,
+	logBuckets,
+	logScaleOf,
+	previewUpperBounds,
+} from './utils';
+
+import styles from './BucketOptions.module.scss';
+
+function BucketOptions({
+	bucketOptions,
+	unit,
+	onChange,
+	onClose,
+}: {
+	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
+	/** The panel's y-axis unit, so the previewed bounds read the way the axis will. */
+	unit?: string;
+	onChange: (next: Querybuildertypesv5BucketOptionsDTO | undefined) => void;
+	/** Omitted where the section isn't dismissable, as on a formula. */
+	onClose?: () => void;
+}): JSX.Element {
+	// A linear axis has no bounds to describe until it has a max value, so the picked
+	// kind is held here rather than read back off the emitted options: it has to survive
+	// the gap between choosing Linear and filling the field in.
+	const [kind, setKind] = useState<Querybuildertypesv5BucketsKindDTO>(() =>
+		kindOptionOf(bucketOptions),
+	);
+	const linearSpec =
+		bucketOptions && isLinearBuckets(bucketOptions)
+			? bucketOptions.spec
+			: undefined;
+	const [logScale, setLogScale] = useState<number>(() =>
+		logScaleOf(bucketOptions),
+	);
+	const [maxValue, setMaxValue] = useState<number | null>(
+		linearSpec?.maxValue ?? null,
+	);
+	const [numBuckets, setNumBuckets] = useState<number | null>(
+		linearSpec?.numBuckets ?? null,
+	);
+
+	const emitLinear = useCallback(
+		(nextMaxValue: number | null, nextNumBuckets: number | null): void => {
+			// An incomplete linear axis is sent as no axis at all rather than as a spec the
+			// request would reject.
+			if (nextMaxValue === null || nextMaxValue <= 0) {
+				onChange(undefined);
+				return;
+			}
+
+			onChange(linearBuckets(nextMaxValue, nextNumBuckets));
+		},
+		[onChange],
+	);
+
+	const handleKindChange = useCallback(
+		(value: string): void => {
+			// Radix clears the value when the active item is clicked again; a bucket axis is
+			// always one of the two, so keep the current pick instead.
+			if (!value) {
+				return;
+			}
+
+			const nextKind = value as Querybuildertypesv5BucketsKindDTO;
+			setKind(nextKind);
+
+			if (nextKind === Querybuildertypesv5BucketsKindDTO.log) {
+				onChange(logBuckets(logScale));
+			} else {
+				emitLinear(maxValue, numBuckets);
+			}
+		},
+		[emitLinear, logScale, maxValue, numBuckets, onChange],
+	);
+
+	const handleScaleChange = useCallback(
+		(value: string): void => {
+			if (!value) {
+				return;
+			}
+
+			const nextScale = Number(value);
+			setLogScale(nextScale);
+			onChange(logBuckets(nextScale));
+		},
+		[onChange],
+	);
+
+	const handleMaxValueChange = useCallback(
+		(value: number | string | null): void => {
+			const next = value === null || value === '' ? null : Number(value);
+			setMaxValue(next);
+			emitLinear(next, numBuckets);
+		},
+		[emitLinear, numBuckets],
+	);
+
+	const handleNumBucketsChange = useCallback(
+		(value: number | string | null): void => {
+			const next = value === null || value === '' ? null : Number(value);
+			setNumBuckets(next);
+			emitLinear(maxValue, next);
+		},
+		[emitLinear, maxValue],
+	);
+
+	// The toggle group takes a ReactNode label, which is how each item picks up the
+	// query builder's value type — the component exposes no font-family token.
+	const kindItems = useMemo(
+		() =>
+			BUCKET_KIND_OPTIONS.map(({ value, label }) => ({
+				value,
+				label: <span className={styles.toggleLabel}>{label}</span>,
+				'aria-label': label,
+			})),
+		[],
+	);
+
+	const scaleItems = useMemo(
+		() =>
+			LOG_SCALE_OPTIONS.map(({ value, label }) => ({
+				value,
+				label: <span className={styles.toggleLabel}>{label}</span>,
+				'aria-label': label,
+			})),
+		[],
+	);
+
+	// The kind toggle can be ahead of what has been emitted, so the preview describes
+	// the picked kind rather than the emitted options.
+	const previewedOptions = useMemo(():
+		| Querybuildertypesv5BucketOptionsDTO
+		| undefined => {
+		if (kind === Querybuildertypesv5BucketsKindDTO.log) {
+			return logBuckets(logScale);
+		}
+		if (kind === Querybuildertypesv5BucketsKindDTO.linear && maxValue !== null) {
+			return linearBuckets(maxValue, numBuckets);
+		}
+		return undefined;
+	}, [kind, logScale, maxValue, numBuckets]);
+
+	const bounds = useMemo(
+		() =>
+			kind === Querybuildertypesv5BucketsKindDTO.linear && !previewedOptions
+				? undefined
+				: previewUpperBounds(previewedOptions),
+		[kind, previewedOptions],
+	);
+
+	return (
+		<div className={styles.bucketOptions} data-testid="bucket-options">
+			<div className={styles.controls}>
+				<div className={styles.field}>
+					<span className={styles.label}>Bucket by</span>
+					<ToggleGroupSimple
+						type="single"
+						value={kind}
+						items={kindItems}
+						onChange={handleKindChange}
+						testId="bucket-options-kind"
+					/>
+				</div>
+
+				{kind === Querybuildertypesv5BucketsKindDTO.log && (
+					<div className={styles.field}>
+						<span className={styles.label}>Scale</span>
+						<ToggleGroupSimple
+							type="single"
+							value={String(logScale)}
+							items={scaleItems}
+							onChange={handleScaleChange}
+							testId="bucket-options-scale"
+						/>
+					</div>
+				)}
+
+				{kind === Querybuildertypesv5BucketsKindDTO.linear && (
+					<>
+						<div className={styles.field}>
+							<span className={styles.label}>Max value</span>
+							<InputNumber
+								className={styles.numberInput}
+								min={0}
+								value={maxValue}
+								onChange={handleMaxValueChange}
+								placeholder="Required"
+								status={maxValue !== null && maxValue <= 0 ? 'error' : undefined}
+								data-testid="bucket-options-max-value"
+							/>
+						</div>
+						<div className={styles.field}>
+							<span className={styles.label}>Buckets</span>
+							<InputNumber
+								className={styles.numberInput}
+								min={1}
+								max={MAX_NUM_BUCKETS}
+								precision={0}
+								value={numBuckets}
+								onChange={handleNumBucketsChange}
+								placeholder={`Default ${DEFAULT_NUM_BUCKETS}`}
+								data-testid="bucket-options-num-buckets"
+							/>
+						</div>
+					</>
+				)}
+
+				{onClose && (
+					<Button
+						color="secondary"
+						variant="ghost"
+						size="icon"
+						aria-label="Close bucket options"
+						className={styles.closeButton}
+						prefix={<ChevronUp size={16} />}
+						onClick={onClose}
+						data-testid="bucket-options-close"
+					/>
+				)}
+			</div>
+
+			<div className={styles.bounds} data-testid="bucket-options-bounds">
+				<span className={styles.label}>
+					Bounds
+					<Tooltip title={BUCKET_KIND_HINTS[kind]} placement="top">
+						<Info size={12} className={styles.hintIcon} />
+					</Tooltip>
+				</span>
+				{bounds ? (
+					<>
+						{bounds.map((bound) => (
+							<span className={styles.bound} key={bound}>
+								{formatUpperBound(bound, unit)}
+							</span>
+						))}
+						{hasBoundsBeyondPreview(previewedOptions) && (
+							<span className={styles.muted}>…</span>
+						)}
+						<span className={cx(styles.bound, styles.overflowBound)}>+Inf</span>
+					</>
+				) : (
+					<span className={styles.muted}>Set a max value to see the bounds</span>
+				)}
+			</div>
+		</div>
+	);
+}
+
+BucketOptions.defaultProps = {
+	bucketOptions: undefined,
+	unit: undefined,
+	onClose: undefined,
+};
+
+export default BucketOptions;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/__tests__/utils.test.ts

@@ -0,0 +1,88 @@
+import { MAX_LOG_SCALE } from '../constants';
+import {
+	bandsPerDoublingFromScale,
+	formatUpperBound,
+	hasBoundsBeyondPreview,
+	kindOptionOf,
+	linearBuckets,
+	logBuckets,
+	previewUpperBounds,
+} from '../utils';
+
+describe('bucket option scales', () => {
+	it.each([
+		[-2, 0.25],
+		[0, 1],
+		[1, 2],
+		[2, 4],
+		[3, 8],
+		[4, 16],
+	])('scale %i is %i bands per doubling', (scale, bands) => {
+		expect(bandsPerDoublingFromScale(scale)).toBe(bands);
+	});
+});
+
+describe('kindOptionOf', () => {
+	it('reads no options as log, the server default', () => {
+		expect(kindOptionOf(undefined)).toBe('log');
+	});
+
+	it('reads the kind off the options', () => {
+		expect(kindOptionOf(logBuckets(MAX_LOG_SCALE))).toBe('log');
+		expect(kindOptionOf(linearBuckets(10, null))).toBe('linear');
+	});
+});
+
+describe('previewUpperBounds', () => {
+	it('doubles at one band per doubling', () => {
+		expect(previewUpperBounds(logBuckets(0))).toStrictEqual([
+			1, 2, 4, 8, 16, 32, 64, 128,
+		]);
+	});
+
+	it('falls back to the finest log axis when no options are set', () => {
+		const bounds = previewUpperBounds(undefined);
+
+		expect(bounds).toHaveLength(8);
+		// 16 bands per doubling: the eighth bound is 2^(7/16), still short of the first doubling.
+		expect(bounds?.[7]).toBeCloseTo(2 ** (7 / 16));
+	});
+
+	it('spaces a linear axis evenly by bucket width', () => {
+		expect(previewUpperBounds(linearBuckets(100, 10))).toStrictEqual(
+			[10, 20, 30, 40, 50, 60, 70, 80, 90, 100].slice(0, 8),
+		);
+	});
+
+	it('stops at the last bucket when the axis has fewer than the preview shows', () => {
+		expect(previewUpperBounds(linearBuckets(9, 3))).toStrictEqual([3, 6, 9]);
+	});
+
+	it('has no bounds to preview for a linear axis without a usable max value', () => {
+		expect(previewUpperBounds(linearBuckets(0, null))).toBeUndefined();
+		expect(previewUpperBounds(linearBuckets(-1, null))).toBeUndefined();
+	});
+});
+
+describe('hasBoundsBeyondPreview', () => {
+	it('is always true for a log axis, which has no top', () => {
+		expect(hasBoundsBeyondPreview(logBuckets(0))).toBe(true);
+		expect(hasBoundsBeyondPreview(undefined)).toBe(true);
+	});
+
+	it('tracks whether a linear axis runs past the preview', () => {
+		expect(hasBoundsBeyondPreview(linearBuckets(100, 4))).toBe(false);
+		expect(hasBoundsBeyondPreview(linearBuckets(100, 20))).toBe(true);
+	});
+});
+
+describe('formatUpperBound', () => {
+	it('reads a bound in the panel unit when one is set', () => {
+		expect(formatUpperBound(1, 'ms')).toContain('ms');
+	});
+
+	it('keeps three significant digits when unitless', () => {
+		expect(formatUpperBound(128, undefined)).toBe('128');
+		expect(formatUpperBound(2 ** (1 / 16), undefined)).toBe('1.04');
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/constants.ts

@@ -0,0 +1,54 @@
+import { Querybuildertypesv5BucketsKindDTO } from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Mirrors the limits `querybuildertypesv5` validates `bucketOptions` against. The
+ * builder keeps its own copy so an out-of-range axis is refused before the request
+ * rather than after it.
+ */
+
+/**
+ * A log axis spaces bounds at 2^scale bands per doubling. MaxLogScale is the
+ * resolution ClickHouse buckets at, so it is both the finest available and what an
+ * absent `bucketOptions` resolves to.
+ */
+export const MAX_LOG_SCALE = 4;
+
+/** One band per 16x, the coarsest axis worth rendering. */
+export const MIN_LOG_SCALE = -4;
+
+export const MAX_NUM_BUCKETS = 512;
+
+export const DEFAULT_NUM_BUCKETS = 60;
+
+/** Every scale the request accepts, coarsest first. The bounds strip below says
+ *  how coarse a given one is, so the numbers stand alone. */
+export const LOG_SCALES = Array.from(
+	{ length: MAX_LOG_SCALE - MIN_LOG_SCALE + 1 },
+	(_, index) => MIN_LOG_SCALE + index,
+);
+
+/** How many leading upper bounds the bounds strip previews before eliding. */
+export const PREVIEW_BOUND_COUNT = 8;
+
+export const BUCKET_KIND_OPTIONS: {
+	value: Querybuildertypesv5BucketsKindDTO;
+	label: string;
+}[] = [
+	{ value: Querybuildertypesv5BucketsKindDTO.log, label: 'Log' },
+	{ value: Querybuildertypesv5BucketsKindDTO.linear, label: 'Linear' },
+];
+
+export const LOG_SCALE_OPTIONS = LOG_SCALES.map((scale) => ({
+	value: String(scale),
+	label: String(scale),
+}));
+
+export const BUCKET_KIND_HINTS: Record<
+	Querybuildertypesv5BucketsKindDTO,
+	string
+> = {
+	[Querybuildertypesv5BucketsKindDTO.log]:
+		'Bounds are spaced evenly on a log axis, so every band is the same height on screen and the tail stays readable. A lower scale means fewer, coarser bands; scale 4, the finest, is the default.',
+	[Querybuildertypesv5BucketsKindDTO.linear]:
+		'Bounds are spaced evenly from 0 up to the max value, so a band covers the same width wherever it sits. Everything above the max value lands in a single overflow band.',
+};

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/utils.ts

@@ -0,0 +1,120 @@
+import {
+	Querybuildertypesv5BucketOptionsDTO,
+	Querybuildertypesv5BucketOptionsLinearDTO,
+	Querybuildertypesv5BucketOptionsLinearDTOKind,
+	Querybuildertypesv5BucketOptionsLogDTO,
+	Querybuildertypesv5BucketOptionsLogDTOKind,
+	Querybuildertypesv5BucketsKindDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+
+import {
+	DEFAULT_NUM_BUCKETS,
+	MAX_LOG_SCALE,
+	PREVIEW_BOUND_COUNT,
+} from './constants';
+
+export const isLinearBuckets = (
+	bucketOptions: Querybuildertypesv5BucketOptionsDTO,
+): bucketOptions is Querybuildertypesv5BucketOptionsLinearDTO =>
+	bucketOptions.kind === Querybuildertypesv5BucketOptionsLinearDTOKind.linear;
+
+export const linearBuckets = (
+	maxValue: number,
+	numBuckets: number | null,
+): Querybuildertypesv5BucketOptionsLinearDTO => ({
+	kind: Querybuildertypesv5BucketOptionsLinearDTOKind.linear,
+	spec: { maxValue, ...(numBuckets ? { numBuckets } : {}) },
+});
+
+export const logBuckets = (
+	scale: number,
+): Querybuildertypesv5BucketOptionsLogDTO => ({
+	kind: Querybuildertypesv5BucketOptionsLogDTOKind.log,
+	spec: { scale },
+});
+
+/**
+ * The log spec's scale, defaulted the way the server defaults it. A linear axis has
+ * no scale, so it reads as the default too.
+ */
+export const logScaleOf = (
+	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
+): number =>
+	bucketOptions && !isLinearBuckets(bucketOptions)
+		? (bucketOptions.spec.scale ?? MAX_LOG_SCALE)
+		: MAX_LOG_SCALE;
+
+/** A log axis places `2^scale` bounds per doubling. */
+export const bandsPerDoublingFromScale = (scale: number): number => 2 ** scale;
+
+export const kindOptionOf = (
+	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
+): Querybuildertypesv5BucketsKindDTO =>
+	bucketOptions && isLinearBuckets(bucketOptions)
+		? Querybuildertypesv5BucketsKindDTO.linear
+		: Querybuildertypesv5BucketsKindDTO.log;
+
+/**
+ * The leading upper bounds the axis will carry. A log axis is anchored at 1 — band
+ * index 0's boundary — and a linear one at the top of its first band; both continue
+ * past what the strip shows, and everything above the last one lands in the overflow
+ * band the UI labels separately.
+ *
+ * `undefined` for a linear axis with no max value yet: without a top there is nothing
+ * to divide.
+ */
+export function previewUpperBounds(
+	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
+): number[] | undefined {
+	if (bucketOptions && isLinearBuckets(bucketOptions)) {
+		const { maxValue, numBuckets = DEFAULT_NUM_BUCKETS } = bucketOptions.spec;
+
+		if (!Number.isFinite(maxValue) || maxValue <= 0 || numBuckets <= 0) {
+			return undefined;
+		}
+
+		const width = maxValue / numBuckets;
+
+		return Array.from(
+			{ length: Math.min(numBuckets, PREVIEW_BOUND_COUNT) },
+			(_, index) => (index + 1) * width,
+		);
+	}
+
+	const bands = bandsPerDoublingFromScale(logScaleOf(bucketOptions));
+
+	return Array.from(
+		{ length: PREVIEW_BOUND_COUNT },
+		(_, index) => 2 ** (index / bands),
+	);
+}
+
+/**
+ * Whether the strip elides bounds after the ones it shows. A linear axis with no more
+ * buckets than the strip holds ends where the strip does.
+ */
+export function hasBoundsBeyondPreview(
+	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
+): boolean {
+	if (!bucketOptions || !isLinearBuckets(bucketOptions)) {
+		return true;
+	}
+
+	return (
+		(bucketOptions.spec.numBuckets ?? DEFAULT_NUM_BUCKETS) > PREVIEW_BOUND_COUNT
+	);
+}
+
+/**
+ * A bound is a value on the panel's own axis, so it reads in the panel's unit when one
+ * is set. Unitless, three significant digits keep the tightly spaced bounds of a fine
+ * log axis distinguishable without printing the float in full.
+ */
+export function formatUpperBound(bound: number, unit?: string): string {
+	if (unit) {
+		return getYAxisFormattedValue(String(bound), unit);
+	}
+
+	return Number(bound.toPrecision(3)).toString();
+}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -3,14 +3,21 @@ import { Button, Tooltip } from 'antd';
 import cx from 'classnames';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
 import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter';
 import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { get, isEmpty } from 'lodash-es';
-import { BarChart, ChevronUp, ExternalLink, ScrollText } from '@signozhq/icons';
+import {
+	BarChart,
+	ChevronUp,
+	ExternalLink,
+	Grid3X3,
+	ScrollText,
+} from '@signozhq/icons';
+import { Querybuildertypesv5BucketOptionsDTO } from 'api/generated/services/sigNoz.schemas';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -25,6 +32,7 @@ import {
 	resolveQueryBuilderFields,
 } from '../../queryBuilderFields.utils';
 
+import BucketOptions from './BucketOptions/BucketOptions';
 import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';
 
@@ -57,6 +65,7 @@ const ADD_ONS_KEYS_TO_QUERY_PATH: Omit<
 	[QueryBuilderField.Limit]: 'limit',
 	[QueryBuilderField.Legend]: 'legend',
 	[QueryBuilderField.ReduceTo]: 'reduceTo',
+	[QueryBuilderField.BucketOptions]: 'bucketOptions',
 };
 
 const ADD_ONS: AddOn[] = [
@@ -116,6 +125,22 @@ const REDUCE_TO: AddOn = {
 		'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
 };
 
+// Offered only by a heatmap over metrics: the bucket axis is what a heatmap plots
+// against, and no other panel type sends one. A histogram brings its own buckets.
+const HISTOGRAM_ATTRIBUTE_TYPES = new Set<string>([
+	ATTRIBUTE_TYPES.HISTOGRAM,
+	ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM,
+]);
+
+const BUCKET_OPTIONS: AddOn = {
+	icon: <Grid3X3 size={14} />,
+	label: 'Bucket by',
+	key: QueryBuilderField.BucketOptions,
+	description:
+		'Choose how the bucket axis is spaced — logarithmically, so every band is the same height and the tail stays readable, or linearly up to a max value. Left to Auto, the query picks the finest log axis it can return.',
+	docLink: 'https://signoz.io/docs/userguide/query-builder-v5/',
+};
+
 const hasValue = (value: unknown): boolean =>
 	value != null && value !== '' && !(Array.isArray(value) && value.length === 0);
 
@@ -196,7 +221,7 @@ function QueryAddOns({
 		isForTraceOperator,
 	});
 
-	const { handleSetQueryData } = useQueryBuilder();
+	const { handleSetQueryData, currentQuery } = useQueryBuilder();
 
 	const supportedAddOns = useMemo((): AddOn[] => {
 		let addOns: AddOn[];
@@ -210,8 +235,25 @@ function QueryAddOns({
 			addOns = [...ADD_ONS];
 		}
 
-		return showReduceTo ? [...addOns, REDUCE_TO] : addOns;
-	}, [panelType, query.dataSource, showReduceTo]);
+		if (showReduceTo) {
+			addOns = [...addOns, REDUCE_TO];
+		}
+
+		if (
+			panelType === PANEL_TYPES.HEATMAP &&
+			query.dataSource === DataSource.METRICS &&
+			!HISTOGRAM_ATTRIBUTE_TYPES.has(query.aggregateAttribute?.type ?? '')
+		) {
+			addOns = [...addOns, BUCKET_OPTIONS];
+		}
+
+		return addOns;
+	}, [
+		panelType,
+		query.dataSource,
+		query.aggregateAttribute?.type,
+		showReduceTo,
+	]);
 
 	const resolvedFields = useMemo(
 		() =>
@@ -392,6 +434,13 @@ function QueryAddOns({
 		[handleChangeQueryData],
 	);
 
+	const handleChangeBucketOptions = useCallback(
+		(value: Querybuildertypesv5BucketOptionsDTO | undefined) => {
+			handleChangeQueryData('bucketOptions', value);
+		},
+		[handleChangeQueryData],
+	);
+
 	return (
 		<div className="query-add-ons" data-testid="query-add-ons">
 			{selectedViews.length > 0 && (
@@ -559,6 +608,19 @@ function QueryAddOns({
 							/>
 						</div>
 					)}
+
+					{selectedViews.find(
+						(view) => view.key === QueryBuilderField.BucketOptions,
+					) && (
+						<div className="add-on-content" data-testid="bucket-options-content">
+							<BucketOptions
+								bucketOptions={query.bucketOptions}
+								unit={currentQuery.unit}
+								onChange={handleChangeBucketOptions}
+								onClose={(): void => handleRemoveView(QueryBuilderField.BucketOptions)}
+							/>
+						</div>
+					)}
 				</div>
 			)}
 

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -1,4 +1,4 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	fireEvent,
 	render,
@@ -26,8 +26,10 @@ jest.mock('hooks/queryBuilder/useQueryBuilderOperations', () => ({
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: (): {
 		handleSetQueryData: typeof mockHandleSetQueryData;
+		currentQuery: { unit: string | undefined };
 	} => ({
 		handleSetQueryData: mockHandleSetQueryData,
+		currentQuery: { unit: undefined },
 	}),
 }));
 
@@ -330,4 +332,175 @@ describe('QueryAddOns', () => {
 			expect.anything(),
 		);
 	});
+	describe('bucket options', () => {
+		function renderHeatmap(overrides: Partial<any> = {}): void {
+			render(
+				<QueryAddOns
+					query={baseQuery({ dataSource: DataSource.METRICS, ...overrides })}
+					version="v5"
+					isRawQuery={false}
+					showReduceTo={false}
+					panelType={PANEL_TYPES.HEATMAP}
+					index={0}
+					isForTraceOperator={false}
+				/>,
+			);
+		}
+
+		it('is offered on a metrics heatmap only', () => {
+			renderHeatmap();
+
+			expect(
+				screen.getByTestId('query-add-on-bucket_options'),
+			).toBeInTheDocument();
+		});
+
+		it('is not offered on other panel types', () => {
+			render(
+				<QueryAddOns
+					query={baseQuery({ dataSource: DataSource.METRICS })}
+					version="v5"
+					isRawQuery={false}
+					showReduceTo={false}
+					panelType={PANEL_TYPES.TIME_SERIES}
+					index={0}
+					isForTraceOperator={false}
+				/>,
+			);
+
+			expect(
+				screen.queryByTestId('query-add-on-bucket_options'),
+			).not.toBeInTheDocument();
+		});
+
+		it('is not offered on a heatmap over another signal', () => {
+			render(
+				<QueryAddOns
+					query={baseQuery({ dataSource: DataSource.LOGS })}
+					version="v5"
+					isRawQuery={false}
+					showReduceTo={false}
+					panelType={PANEL_TYPES.HEATMAP}
+					index={0}
+					isForTraceOperator={false}
+				/>,
+			);
+
+			expect(
+				screen.queryByTestId('query-add-on-bucket_options'),
+			).not.toBeInTheDocument();
+		});
+
+		it.each([ATTRIBUTE_TYPES.HISTOGRAM, ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM])(
+			'is not offered for a %s metric, which carries its own buckets',
+			(type) => {
+				renderHeatmap({
+					aggregateAttribute: { key: 'http_duration_bucket', type },
+				});
+
+				expect(
+					screen.queryByTestId('query-add-on-bucket_options'),
+				).not.toBeInTheDocument();
+			},
+		);
+
+		it("auto-opens on the query's own kind", () => {
+			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
+
+			expect(screen.getByTestId('bucket-options-content')).toBeInTheDocument();
+			expect(screen.getByRole('radio', { name: 'Log' })).toBeChecked();
+			expect(screen.getByRole('radio', { name: '0' })).toBeChecked();
+		});
+
+		it('shows the server default, log at scale 4, without sending it', async () => {
+			const user = userEvent.setup();
+			renderHeatmap();
+
+			await user.click(screen.getByTestId('query-add-on-bucket_options'));
+
+			expect(screen.getByRole('radio', { name: 'Log' })).toBeChecked();
+			expect(screen.getByRole('radio', { name: '4' })).toBeChecked();
+			expect(
+				screen.queryByRole('radio', { name: 'Auto' }),
+			).not.toBeInTheDocument();
+			expect(mockHandleChangeQueryData).not.toHaveBeenCalledWith(
+				'bucketOptions',
+				expect.anything(),
+			);
+		});
+
+		it('sends the picked scale', async () => {
+			const user = userEvent.setup();
+			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 4 } } });
+
+			await user.click(screen.getByRole('radio', { name: '0' }));
+
+			expect(mockHandleChangeQueryData).toHaveBeenCalledWith('bucketOptions', {
+				kind: 'log',
+				spec: { scale: 0 },
+			});
+		});
+
+		it('offers the coarser scales the request accepts below one band per doubling', async () => {
+			const user = userEvent.setup();
+			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
+
+			await user.click(screen.getByRole('radio', { name: '-4' }));
+
+			expect(mockHandleChangeQueryData).toHaveBeenCalledWith('bucketOptions', {
+				kind: 'log',
+				spec: { scale: -4 },
+			});
+		});
+
+		it('previews the bounds the picked axis will carry', () => {
+			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
+
+			const bounds = within(screen.getByTestId('bucket-options-bounds'));
+			['1', '2', '4', '8', '16', '32', '64', '128', '+Inf'].forEach((bound) => {
+				expect(bounds.getByText(bound)).toBeInTheDocument();
+			});
+		});
+
+		it('sends nothing for a linear axis until it has a max value', async () => {
+			const user = userEvent.setup();
+			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
+
+			await user.click(screen.getByRole('radio', { name: 'Linear' }));
+
+			expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith(
+				'bucketOptions',
+				undefined,
+			);
+			expect(
+				screen.getByText('Set a max value to see the bounds'),
+			).toBeInTheDocument();
+		});
+
+		it('sends the linear axis once a max value is filled in', async () => {
+			const user = userEvent.setup();
+			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
+
+			await user.click(screen.getByRole('radio', { name: 'Linear' }));
+			await user.type(screen.getByTestId('bucket-options-max-value'), '500');
+
+			await waitFor(() => {
+				expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith(
+					'bucketOptions',
+					{ kind: 'linear', spec: { maxValue: 500 } },
+				);
+			});
+		});
+
+		it('closes back to the toggle bar', async () => {
+			const user = userEvent.setup();
+			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
+
+			await user.click(screen.getByTestId('bucket-options-close'));
+
+			expect(
+				screen.queryByTestId('bucket-options-content'),
+			).not.toBeInTheDocument();
+		});
+	});
 });

frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts

@@ -16,6 +16,7 @@ export enum QueryBuilderField {
 	Limit = 'limit',
 	Legend = 'legend_format',
 	ReduceTo = 'reduce_to',
+	BucketOptions = 'bucket_options',
 	// Builder level
 	Formula = 'formula',
 	AdditionalQueries = 'additional_queries',

frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts

@@ -76,6 +76,7 @@ export const RAW_QUERY_FIELDS: Omit<
 	[QueryBuilderField.Limit]: { state: 'hidden' },
 	[QueryBuilderField.Legend]: { state: 'hidden' },
 	[QueryBuilderField.ReduceTo]: { state: 'hidden' },
+	[QueryBuilderField.BucketOptions]: { state: 'hidden' },
 	[QueryBuilderField.Formula]: { state: 'hidden' },
 	[QueryBuilderField.OrderBy]: { state: 'pinned' },
 };

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -12,6 +12,7 @@
 		overflow: visible;
 		position: relative;
 		align-self: stretch;
+		clip-path: inset(0 -100vw 0 0);
 	}
 }
 
@@ -34,7 +35,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 10.5px;
+		padding: var(--spacing-2) 10.5px;
 		border-bottom: 1px solid var(--l1-border);
 
 		.left-actions {
@@ -45,6 +46,9 @@
 			justify-content: flex-start;
 
 			.text {
+				padding-left: var(--spacing-4);
+				white-space: nowrap;
+				flex-shrink: 0;
 				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 14px;
@@ -77,6 +81,8 @@
 			}
 
 			.select-box {
+				--combobox-trigger-width: auto;
+
 				display: flex;
 				padding: 2px 5px;
 				flex-direction: row;
@@ -94,10 +100,9 @@
 		.right-actions {
 			display: flex;
 			align-items: center;
-			gap: 10px;
-			width: 100%;
+			gap: var(--spacing-1);
+			flex-shrink: 0;
 			justify-content: flex-end;
-			--button-variant-link-color: var(--l1-foreground);
 
 			.divider-filter {
 				width: 1px;
@@ -105,26 +110,8 @@
 				background: var(--l1-background);
 			}
 
-			.sync-icon {
-				cursor: pointer;
-			}
-
-			.right-action-icon-container {
-				position: relative;
-				display: flex;
-				padding: 2px;
-				background-color: var(--l1-background);
-
-				.settings-icon {
-					height: 14px;
-					width: 14px;
-					cursor: pointer;
-				}
-
-				&.active,
-				&:hover {
-					background: var(--l2-background);
-				}
+			.active {
+				background: var(--l2-background);
 			}
 		}
 	}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useState } from 'react';
 import {
 	ArrowUpToLine,
-	Filter,
 	Frown,
 	RefreshCw,
 	Settings2 as SettingsIcon,
@@ -14,8 +13,9 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
-import { Skeleton, Tooltip } from 'antd';
+import { Skeleton } from 'antd';
 import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -57,6 +57,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		showFilterCollapse = true,
 		showQueryName = true,
 		useFieldApis,
+		savedViewsHeader,
 	} = props;
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 	const [params, setParams] = useApiMonitoringParams();
@@ -179,7 +180,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	// Helpers to reduce cognitive complexity in main render
 	const renderLeftActions = (): JSX.Element => (
 		<section className="left-actions">
-			<Filter size="md" />
 			<Typography.Text className="text">
 				{displayedQueryName ? 'Filters for' : 'Filters'}
 			</Typography.Text>
@@ -216,13 +216,13 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				</Combobox>
 			) : (
 				displayedQueryName && (
-					<Tooltip
+					<TooltipSimple
 						title={`Filter currently in sync with query ${displayedQueryName}`}
 					>
 						<Typography.Text className="sync-tag">
 							{displayedQueryName}
 						</Typography.Text>
-					</Tooltip>
+					</TooltipSimple>
 				)
 			)}
 		</section>
@@ -230,51 +230,54 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 
 	const renderRightActions = (): JSX.Element => (
 		<section className="right-actions">
-			<Tooltip title="Reset All">
+			<TooltipSimple title="Reset All">
 				<Button
-					variant="link"
+					variant="ghost"
 					color="secondary"
+					size="icon"
 					aria-label="Reset All"
-					className="right-action-icon-container"
 					onClick={handleReset}
-					prefix={<RefreshCw className="sync-icon" size="md" />}
+					prefix={<RefreshCw size={14} />}
 				/>
-			</Tooltip>
+			</TooltipSimple>
 			{showFilterCollapse && (
-				<Tooltip title="Collapse Filters">
+				<TooltipSimple title="Collapse Filters">
 					<Button
-						variant="link"
+						variant="ghost"
 						color="secondary"
+						size="icon"
 						aria-label="Collapse Filters"
-						className="right-action-icon-container"
 						onClick={handleFilterVisibilityChange}
-						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
+						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size={14} />}
 					/>
-				</Tooltip>
-			)}
-			{isDynamicFilters && (
-				<AuthZButton
-					checks={QuickFilterManagePermissions}
-					variant="link"
-					color="secondary"
-					aria-label="Settings"
-					className={classNames('right-action-icon-container', {
-						active: isSettingsOpen,
-					})}
-					onClick={(): void => setIsSettingsOpen(true)}
-					testId="settings-icon-container"
-					prefix={
-						<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
-							<SettingsIcon
-								className="settings-icon"
-								data-testid="settings-icon"
-								width={14}
-								height={14}
-							/>
-						</Tooltip>
-					}
-				/>
+				</TooltipSimple>
 			)}
+			{isDynamicFilters &&
+				(isSettingsDisabled ? (
+					<AuthZButton
+						checks={QuickFilterManagePermissions}
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						aria-label="Settings"
+						onClick={(): void => setIsSettingsOpen(true)}
+						testId="settings-icon-container"
+						prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
+					/>
+				) : (
+					<TooltipSimple title="Settings">
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="icon"
+							aria-label="Settings"
+							className={classNames({ active: isSettingsOpen })}
+							onClick={(): void => setIsSettingsOpen(true)}
+							data-testid="settings-icon-container"
+							prefix={<SettingsIcon data-testid="settings-icon" size={14} />}
+						/>
+					</TooltipSimple>
+				))}
 		</section>
 	);
 
@@ -379,6 +382,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	return (
 		<div className="quick-filters-container">
 			<div className="quick-filters">
+				{savedViewsHeader}
 				{source !== QuickFiltersSource.INFRA_MONITORING && (
 					<section className="header">
 						{renderLeftActions()}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -8,9 +8,7 @@
 	overflow: hidden;
 }
 
-// Positioned so overlays (settings drawer) paint above the content pane
-// without changing this pane's layout width.
-.filters {
+.sidebar {
 	width: 280px;
 	flex-shrink: 0;
 	display: flex;
@@ -21,6 +19,44 @@
 	z-index: 2;
 }
 
+.savedViews {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	background: var(--l1-background);
+	border-right: 1px solid var(--l1-border);
+}
+
+.quickFilters {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	background: var(--l1-background);
+	transition: transform 0.2s ease-in-out;
+	z-index: 1;
+
+	&.isOpen {
+		transform: translateX(100%);
+	}
+}
+
+// No quick filters: the header sits in flow and the list stays under it
+.isStatic {
+	border-right: 1px solid var(--l1-border);
+
+	.quickFilters {
+		position: static;
+		flex-shrink: 0;
+	}
+
+	.savedViews {
+		border-right: 0;
+	}
+}
+
 // Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
 // `height: 100%`), which owns the scrolling.
 .content {
@@ -31,3 +67,7 @@
 	flex-direction: column;
 	overflow: hidden;
 }
+
+.contentInner {
+	height: 100%;
+}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -1,6 +1,10 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode, useState } from 'react';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
+import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
+import SavedViewsRestore from 'container/SavedViews/SavedViewsRestore';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
 
@@ -12,8 +16,15 @@ type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
 	ComponentProps<typeof QuickFilters>
 >;
 
+// What the page configures; the layout adds the open / close wiring.
+type SavedViewsElementProps = Omit<
+	ComponentProps<typeof SavedViewsPanel>,
+	'onClose'
+>;
+
 export interface QuickFiltersLayoutProps {
-	quickFilterProps: QuickFiltersElementProps;
+	quickFilterProps?: QuickFiltersElementProps;
+	savedViewProps?: SavedViewsElementProps;
 	showFilters: boolean;
 	className?: string;
 	contentClassName?: string;
@@ -23,20 +34,66 @@ export interface QuickFiltersLayoutProps {
 
 function QuickFiltersLayout({
 	quickFilterProps,
+	savedViewProps,
 	showFilters,
 	className,
 	contentClassName,
 	testId,
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
+	const [isViewsListOpen, setIsViewsListOpen] = useState(false);
+	const isSavedViewEnabled = useSavedViewEnabled();
+
+	const hasQuickFilters = !!quickFilterProps;
+	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
+
+	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
+
+	const isViewsListPinned = hasSavedViews && !hasQuickFilters;
+	const isViewsListVisible = isViewsListPinned || isViewsListOpen;
+
+	const isSliding = hasQuickFilters && isViewsListOpen;
+
+	const savedViewsHeader = hasSavedViews ? (
+		<SavedViewsHeader
+			{...savedViewProps}
+			onOpenViews={
+				isViewsListVisible ? undefined : (): void => setIsViewsListOpen(true)
+			}
+		/>
+	) : undefined;
+
 	return (
 		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showFilters && (
+			{hasSavedViews && <SavedViewsRestore source={savedViewProps.source} />}
+			{showSidebar && (
 				<aside
-					className={styles.filters}
+					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
 					data-testid="quick-filters-layout-filters"
 				>
-					<QuickFilters {...quickFilterProps} />
+					<div
+						className={cx(styles.quickFilters, { [styles.isOpen]: isSliding })}
+						data-testid="quick-filters-layout-drawer"
+					>
+						{hasQuickFilters ? (
+							<QuickFilters
+								{...quickFilterProps}
+								savedViewsHeader={savedViewsHeader}
+							/>
+						) : (
+							savedViewsHeader
+						)}
+					</div>
+					<div className={styles.savedViews}>
+						{hasSavedViews && isViewsListVisible && (
+							<SavedViewsPanel
+								{...savedViewProps}
+								onClose={
+									isViewsListPinned ? undefined : (): void => setIsViewsListOpen(false)
+								}
+							/>
+						)}
+					</div>
 				</aside>
 			)}
 			<section
@@ -44,7 +101,7 @@ function QuickFiltersLayout({
 				data-testid="quick-filters-layout-content"
 			>
 				<OverlayScrollbar>
-					<div>{children}</div>
+					<div className={styles.contentInner}>{children}</div>
 				</OverlayScrollbar>
 			</section>
 		</div>

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -1,4 +1,6 @@
-import { render, screen } from 'tests/test-utils';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
+import { render, screen, userEvent } from 'tests/test-utils';
 
 import { QuickFiltersSource } from '../../types';
 import QuickFiltersLayout from '../QuickFiltersLayout';
@@ -7,15 +9,40 @@ jest.mock('../QuickFiltersLayout.module.scss', () => ({
 	__esModule: true,
 	default: {
 		layout: 'layout',
-		filters: 'filters',
+		sidebar: 'sidebar',
+		isStatic: 'isStatic',
+		savedViews: 'savedViews',
+		quickFilters: 'quickFilters',
+		isOpen: 'isOpen',
 		content: 'content',
+		contentInner: 'contentInner',
 	},
 }));
 
+jest.mock('hooks/useSavedViewEnabled', () => ({
+	useSavedViewEnabled: jest.fn(() => true),
+}));
+
+jest.mock('container/SavedViews/SavedViewsRestore', () => ({
+	__esModule: true,
+	default: ({ source }: { source: string }): JSX.Element => (
+		<div data-testid="saved-views-restore" data-source={source} />
+	),
+}));
+
 jest.mock('../../QuickFilters', () => ({
 	__esModule: true,
-	default: ({ source }: { source: string }): JSX.Element => (
-		<div data-testid="quick-filters">{source}</div>
+	default: ({
+		source,
+		savedViewsHeader,
+	}: {
+		source: string;
+		savedViewsHeader?: React.ReactNode;
+	}): JSX.Element => (
+		<div data-testid="quick-filters">
+			{savedViewsHeader}
+			{source}
+		</div>
 	),
 }));
 
@@ -23,8 +50,16 @@ const quickFilterProps = {
 	source: QuickFiltersSource.TRACES_EXPLORER,
 	handleFilterVisibilityChange: jest.fn(),
 };
+const savedViewProps = { source: SavedviewtypesSourceDTO.traces };
+
+const drawer = (): HTMLElement =>
+	screen.getByTestId('quick-filters-layout-drawer');
 
 describe('QuickFiltersLayout', () => {
+	beforeEach(() => {
+		jest.mocked(useSavedViewEnabled).mockReturnValue(true);
+	});
+
 	it('renders QuickFilters with the given props inside the filters pane', () => {
 		render(
 			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
@@ -40,11 +75,16 @@ describe('QuickFiltersLayout', () => {
 		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
 			'content',
 		);
+		expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
 	});
 
 	it('does not render the filters pane when showFilters is false', () => {
 		render(
-			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
+			<QuickFiltersLayout
+				showFilters={false}
+				quickFilterProps={quickFilterProps}
+				savedViewProps={savedViewProps}
+			>
 				<div>content</div>
 			</QuickFiltersLayout>,
 		);
@@ -54,6 +94,23 @@ describe('QuickFiltersLayout', () => {
 		).not.toBeInTheDocument();
 		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
 		expect(screen.getByText('content')).toBeInTheDocument();
+		expect(screen.getByTestId('saved-views-restore')).toHaveAttribute(
+			'data-source',
+			SavedviewtypesSourceDTO.traces,
+		);
+	});
+
+	it('renders no sidebar at all without quick filters or saved views', () => {
+		render(
+			<QuickFiltersLayout showFilters>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		expect(
+			screen.queryByTestId('quick-filters-layout-filters'),
+		).not.toBeInTheDocument();
+		expect(screen.getByText('content')).toBeInTheDocument();
 	});
 
 	it('merges classNames onto the root and content panes', () => {
@@ -61,19 +118,123 @@ describe('QuickFiltersLayout', () => {
 			<QuickFiltersLayout
 				showFilters
 				quickFilterProps={quickFilterProps}
-				className="page-root"
-				contentClassName="page-content"
-				testId="page"
+				className="root-extra"
+				contentClassName="content-extra"
+				testId="layout"
 			>
 				<div>content</div>
 			</QuickFiltersLayout>,
 		);
 
-		const root = screen.getByTestId('page');
-		expect(root).toHaveClass('layout', 'page-root');
+		expect(screen.getByTestId('layout')).toHaveClass('layout', 'root-extra');
 		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
 			'content',
-			'page-content',
+			'content-extra',
 		);
 	});
+
+	describe('saved views', () => {
+		it('ignores savedViewProps while the flag is off', () => {
+			jest.mocked(useSavedViewEnabled).mockReturnValue(false);
+			const { unmount } = render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.getByTestId('quick-filters')).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+
+			// Saved views only, so nothing is left to show.
+			unmount();
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+			expect(
+				screen.queryByTestId('quick-filters-layout-filters'),
+			).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-restore')).not.toBeInTheDocument();
+		});
+
+		it('opens the panel from the header and slides the quick filters drawer, keeping the same QuickFilters node', async () => {
+			render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+			const user = userEvent.setup();
+			const quickFilters = screen.getByTestId('quick-filters');
+
+			expect(quickFilters).toContainElement(
+				screen.getByTestId('saved-views-header'),
+			);
+			expect(drawer()).toContainElement(quickFilters);
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+
+			await user.click(screen.getByTestId('saved-views-open'));
+
+			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
+			expect(drawer()).toHaveClass('isOpen');
+			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
+			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
+
+			await user.click(screen.getByTestId('saved-views-close'));
+
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
+			expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
+		});
+
+		it('hands the source to the header and the panel', async () => {
+			render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.getByTestId('saved-views-header')).toHaveAttribute(
+				'data-source',
+				SavedviewtypesSourceDTO.traces,
+			);
+			await userEvent.setup().click(screen.getByTestId('saved-views-open'));
+			expect(screen.getByTestId('saved-views-panel')).toHaveAttribute(
+				'data-source',
+				SavedviewtypesSourceDTO.traces,
+			);
+		});
+
+		it('without quick filters: static sidebar, header on top, list always on screen with no open or close controls', () => {
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			const sidebar = screen.getByTestId('quick-filters-layout-filters');
+			expect(sidebar).toHaveClass('isStatic');
+			expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
+			expect(screen.getByTestId('saved-views-header')).toBeInTheDocument();
+			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-close')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+		});
+	});
 });

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -8,12 +8,20 @@
 	width: 342px;
 	height: 100%;
 	background: var(--l1-background);
-	transition: width 0.05s ease-in-out;
+	border-right: 1px solid var(--l1-border);
 	overflow: hidden;
 	color: var(--l1-foreground);
+	transition:
+		transform 0.2s ease-in-out,
+		visibility 0s;
 
 	&.hidden {
-		width: 0;
+		transform: translateX(-100%);
+		visibility: hidden;
+		pointer-events: none;
+		transition:
+			transform 0.2s ease-in-out,
+			visibility 0s 0.2s;
 	}
 	.qf-header {
 		display: flex;

frontend/src/components/QuickFilters/types.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -61,6 +62,7 @@ export interface IQuickFiltersProps {
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
 	useFieldApis?: QuickFilterCheckboxUseFieldApis;
+	savedViewsHeader?: ReactNode;
 }
 
 export enum QuickFiltersSource {

frontend/src/constants/generated/semconvFamilies.gen.ts

@@ -1,32 +1,82 @@
 // Code generated by scripts/semconv. DO NOT EDIT.
 
-export type SemconvFamily = {
-	readonly current: string;
-	readonly old: readonly string[];
-	readonly kind: 'attribute' | 'metric';
+// An empty contexts/signals/applyToMetrics array places no constraint on
+// that axis.
+export type SemconvMember = {
+	readonly name: string;
 	readonly contexts: readonly string[];
 	readonly signals: readonly string[];
 	readonly applyToMetrics: readonly string[];
+};
+
+export type SemconvFamily = {
+	readonly current: string;
+	readonly kind: 'attribute' | 'metric';
+	readonly members: readonly SemconvMember[];
+	readonly contexts: readonly string[];
+	readonly signals: readonly string[];
 	readonly valueMap: Readonly<Record<string, string>>;
 };
 
 export const SEMCONV_FAMILIES: readonly SemconvFamily[] = [
 	{
-		current: 'db.system.name',
-		old: ['db.system'],
-		kind: 'attribute',
+		current: 'container.cpu.usage',
+		kind: 'metric',
+		members: [
+			{
+				name: 'container.cpu.utilization',
+				contexts: [],
+				signals: [],
+				applyToMetrics: [],
+			},
+		],
 		contexts: [],
 		signals: [],
-		applyToMetrics: [],
 		valueMap: {},
 	},
 	{
 		current: 'deployment.environment.name',
-		old: ['deployment.environment'],
 		kind: 'attribute',
+		members: [
+			{
+				name: 'deployment.environment',
+				contexts: [],
+				signals: [],
+				applyToMetrics: [],
+			},
+		],
+		contexts: ['attribute', 'resource'],
+		signals: ['logs', 'metrics', 'traces'],
+		valueMap: {},
+	},
+	{
+		current: 'k8s.node.cpu.usage',
+		kind: 'metric',
+		members: [
+			{
+				name: 'k8s.node.cpu.utilization',
+				contexts: [],
+				signals: [],
+				applyToMetrics: [],
+			},
+		],
+		contexts: [],
+		signals: [],
+		valueMap: {},
+	},
+	{
+		current: 'k8s.pod.cpu.usage',
+		kind: 'metric',
+		members: [
+			{
+				name: 'k8s.pod.cpu.utilization',
+				contexts: [],
+				signals: [],
+				applyToMetrics: [],
+			},
+		],
 		contexts: [],
 		signals: [],
-		applyToMetrics: [],
 		valueMap: {},
 	},
 ] as const;

frontend/src/constants/panelTypes.ts

@@ -32,6 +32,8 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.AREA]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
+		// V2-only kind; it renders through the V2 panel registry.
+		[PANEL_TYPES.HEATMAP]: null,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
 		[PANEL_TYPES.TEXT]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,

frontend/src/constants/queryBuilder.ts

@@ -339,6 +339,7 @@ export enum PANEL_TYPES {
 	AREA = 'area',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
+	HEATMAP = 'heatmap',
 	TEXT = 'text',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }

frontend/src/constants/queryBuilderOperators.ts

@@ -527,6 +527,21 @@ export const metricsHistogramSpaceAggregateOperatorOptions: SelectOption<
 	},
 ];
 
+/**
+ * A heatmap's Y axis is the `le` labels themselves, so every percentile draws the grid a
+ * count already draws. Sum is also what the statement builder forces on a histogram
+ * heatmap whatever is asked for, so it is the only honest option to offer.
+ */
+export const metricsHeatmapHistogramSpaceAggregateOperatorOptions: SelectOption<
+	string,
+	string
+>[] = [
+	{
+		value: MetricAggregateOperator.COUNT,
+		label: 'Count',
+	},
+];
+
 export const metricsEmptyTimeAggregateOperatorOptions: SelectOption<
 	string,
 	string

frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -5,12 +5,10 @@ import {
 import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	findSavedView,
-	getSavedViewQuery,
-	SavedViewSourcePage,
-	toSavedViewSource,
-} from 'container/SavedViews/utils';
+import { SavedViewSourcePage } from 'container/SavedViews/types';
+import { findSavedView } from 'container/SavedViews/utils/findSavedView';
+import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
+import { toSavedViewSource } from 'container/SavedViews/utils/toSavedViewSource';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

frontend/src/container/AllError/__tests__/useExceptionsStripInfo.test.tsx

@@ -0,0 +1,53 @@
+import { renderHook } from '@testing-library/react';
+import { useBottomStripStore } from 'container/BottomStrip/store/useBottomStripStore';
+import { StripItemKind } from 'container/BottomStrip/types';
+
+import { useExceptionsStripInfo } from '../useExceptionsStripInfo';
+
+describe('useExceptionsStripInfo', () => {
+	beforeEach(() => {
+		useBottomStripStore.setState({ left: null, ownerId: null });
+	});
+
+	it('shows the rows on the page against the total', () => {
+		renderHook(() => useExceptionsStripInfo({ shownCount: 25, totalCount: 500 }));
+
+		expect(useBottomStripStore.getState().left).toMatchObject([
+			{ kind: StripItemKind.Text, text: '25 of 500 exceptions' },
+		]);
+	});
+
+	it('still says n of m when the whole list fits on one page', () => {
+		renderHook(() => useExceptionsStripInfo({ shownCount: 42, totalCount: 42 }));
+
+		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
+			text: '42 of 42 exceptions',
+		});
+	});
+
+	it('says exception, not exceptions, when there is one', () => {
+		renderHook(() => useExceptionsStripInfo({ shownCount: 1, totalCount: 1 }));
+
+		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
+			text: '1 of 1 exception',
+		});
+	});
+
+	it('shows zero before the counts land', () => {
+		renderHook(() => useExceptionsStripInfo({ shownCount: 0, totalCount: 0 }));
+
+		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
+			text: '0 of 0 exceptions',
+		});
+	});
+
+	it('clears the strip when the page unmounts', () => {
+		const { unmount } = renderHook(() =>
+			useExceptionsStripInfo({ shownCount: 25, totalCount: 500 }),
+		);
+
+		unmount();
+
+		expect(useBottomStripStore.getState().left).toBeNull();
+	});
+});

frontend/src/container/AllError/index.tsx

@@ -38,6 +38,7 @@ import { Exception, PayloadProps } from 'types/api/errors/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FilterDropdownExtendsProps } from './types';
+import { useExceptionsStripInfo } from './useExceptionsStripInfo';
 import {
 	extractFilterValues,
 	getDefaultFilterValue,
@@ -160,6 +161,11 @@ function AllErrors(): JSX.Element {
 			},
 		]);
 
+	useExceptionsStripInfo({
+		shownCount: data?.payload?.length ?? 0,
+		totalCount: errorCountResponse.data?.payload ?? 0,
+	});
+
 	const isFetching = isErrorsFetching || errorCountResponse.isFetching;
 	useEffect(() => {
 		setIsFetching(isFetching);

frontend/src/container/AllError/useExceptionsStripInfo.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { useBottomStrip } from 'container/BottomStrip/useBottomStrip';
+import { type StripItem, StripItemKind } from 'container/BottomStrip/types';
+import { pluralize } from 'utils/pluralize';
+
+interface UseExceptionsStripInfoArgs {
+	shownCount: number;
+	totalCount: number;
+}
+
+export function useExceptionsStripInfo({
+	shownCount,
+	totalCount,
+}: UseExceptionsStripInfoArgs): void {
+	const items = useMemo<StripItem[]>(
+		() => [
+			{
+				kind: StripItemKind.Text,
+				text: `${shownCount} of ${pluralize(totalCount, 'exception')}`,
+			},
+		],
+		[shownCount, totalCount],
+	);
+
+	useBottomStrip(items);
+}

frontend/src/container/AppLayout/index.tsx

@@ -854,7 +854,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}
 
-				<Toaster />
+				<Toaster
+					offset={{ bottom: 'calc(var(--bottom-strip-height, 0px) + 24px)' }}
+				/>
 			</Layout>
 		</TooltipProvider>
 	);

frontend/src/container/CreateAlertV2/Footer/__tests__/utils.test.ts

@@ -467,6 +467,7 @@ describe('Footer utils', () => {
 											timeAggregation: 'avg',
 										},
 									],
+									bucketOptions: undefined,
 									disabled: false,
 									filter: {
 										expression: '',

frontend/src/container/Home/Home.tsx

@@ -26,13 +26,13 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
 import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+import { useHomeStripInfo } from 'container/Home/useHomeStripInfo';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import history from 'lib/history';
 import cloneDeep from 'lodash-es/cloneDeep';
-import { AnimatePresence } from 'motion/react';
-import * as motion from 'motion/react-client';
+import { AnimatePresence, motion } from 'motion/react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { UserPreference } from 'types/api/preferences/preference';
@@ -64,6 +64,8 @@ const homeInterval = 30 * 60 * 1000;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function Home(): JSX.Element {
+	useHomeStripInfo();
+
 	const { user } = useAppContext();
 	const { safeNavigate } = useSafeNavigate();
 	const isDarkMode = useIsDarkMode();

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -8,7 +8,7 @@ import {
 	SavedviewtypesSourceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { getSavedViewQuery } from 'container/SavedViews/utils';
+import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';

frontend/src/container/Home/__tests__/useHomeStripInfo.test.tsx

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/react';
+import { useGetAlerts } from 'api/generated/services/alerts';
+import { useBottomStripStore } from 'container/BottomStrip/store/useBottomStripStore';
+import { StripItemKind } from 'container/BottomStrip/types';
+
+import { useHomeStripInfo } from '../useHomeStripInfo';
+
+jest.mock('api/generated/services/alerts', () => ({
+	useGetAlerts: jest.fn(),
+}));
+
+const mockUseGetAlerts = useGetAlerts as jest.Mock;
+
+describe('useHomeStripInfo', () => {
+	beforeEach(() => {
+		useBottomStripStore.setState({ left: null, ownerId: null });
+	});
+
+	it('counts the firing alert instances', () => {
+		mockUseGetAlerts.mockReturnValue({ data: { data: [{}, {}, {}] } });
+
+		renderHook(() => useHomeStripInfo());
+
+		expect(useBottomStripStore.getState().left).toMatchObject([
+			{ kind: StripItemKind.Text, text: '3 alerts firing' },
+		]);
+	});
+
+	it('says alert, not alerts, when only one is firing', () => {
+		mockUseGetAlerts.mockReturnValue({ data: { data: [{}] } });
+
+		renderHook(() => useHomeStripInfo());
+
+		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
+			text: '1 alert firing',
+		});
+	});
+
+	it('shows zero before the response lands', () => {
+		mockUseGetAlerts.mockReturnValue({ data: undefined });
+
+		renderHook(() => useHomeStripInfo());
+
+		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
+			text: '0 alerts firing',
+		});
+	});
+
+	it('clears the strip when the page unmounts', () => {
+		mockUseGetAlerts.mockReturnValue({ data: { data: [{}, {}, {}] } });
+
+		const { unmount } = renderHook(() => useHomeStripInfo());
+
+		unmount();
+
+		expect(useBottomStripStore.getState().left).toBeNull();
+	});
+});

frontend/src/container/Home/useHomeStripInfo.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { useGetAlerts } from 'api/generated/services/alerts';
+import { useBottomStrip } from 'container/BottomStrip/useBottomStrip';
+import { type StripItem, StripItemKind } from 'container/BottomStrip/types';
+import { pluralize } from 'utils/pluralize';
+
+export function useHomeStripInfo(): void {
+	// Firing instances, not rules, matching the triggered alerts page.
+	const { data } = useGetAlerts();
+
+	const count = data?.data?.length ?? 0;
+
+	const items = useMemo<StripItem[]>(
+		() => [
+			{ kind: StripItemKind.Text, text: `${pluralize(count, 'alert')} firing` },
+		],
+		[count],
+	);
+
+	useBottomStrip(items);
+}

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -5,7 +5,7 @@ import {
 	InframonitoringtypesHostRecordDTO,
 	InframonitoringtypesHostStatusDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/types';
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { TextNoData } from 'container/InfraMonitoringK8sV2/components';

frontend/src/container/InfraMonitoringK8sV2/Base/EntityGroupHeader.module.scss

@@ -2,6 +2,13 @@
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-5);
+
+	// A block span leaves the icon on the text baseline, a couple of pixels
+	// above the centre of the row it sits in
+	[data-slot='icon'] {
+		display: inline-flex;
+		align-items: center;
+	}
 }
 
 .infoIcon {

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.stories.mocks.tsx

@@ -0,0 +1,78 @@
+import { rest } from 'msw';
+
+import { toggleControl } from '@/storybook/controls/controls';
+import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+
+export const POD_UID = '63edbad0-398e-48e5-baba-f7ded7c73f1b';
+const POD_NAME = 'app-demo-loadgenerator-579fbdd749-q5kgd';
+export const NODE_NAME = 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7';
+
+const POD_META = {
+	'k8s.pod.uid': POD_UID,
+	'k8s.pod.name': POD_NAME,
+	'k8s.namespace.name': 'generator',
+	'k8s.cluster.name': 'mgmt',
+	'k8s.node.name': NODE_NAME,
+	'k8s.deployment.name': 'app-demo-loadgenerator',
+};
+
+const podRecord = {
+	podUID: POD_UID,
+	podCPU: 0.92,
+	podCPURequest: 31,
+	podCPULimit: 30.7,
+	podMemory: 148 * 1024 * 1024,
+	podMemoryRequest: 42,
+	podMemoryLimit: 38,
+	podStatus: 'running',
+	podRestarts: 0,
+	podAge: 49_000_000,
+	meta: POD_META,
+};
+
+const container = {
+	containerName: 'loadgenerator',
+	podName: POD_NAME,
+	status: 'running',
+	ready: true,
+	restarts: 0,
+	meta: POD_META,
+};
+
+const list = (records: unknown[]): Record<string, unknown> => ({
+	status: 'success',
+	data: { type: 'list', records, total: records.length },
+});
+
+export const drawerMocks = defineStoryMocks({
+	controls: {
+		openedFromANode: toggleControl('Opened from a node', {
+			group: 'Drawer',
+			value: true,
+		}),
+	},
+	handlers: () => [
+		rest.post('http://localhost/api/v2/infra_monitoring/pods', (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(list([podRecord]))),
+		),
+
+		rest.post(
+			'http://localhost/api/v2/infra_monitoring/kube_containers',
+			(_req, res, ctx) => res(ctx.status(200), ctx.json(list([container]))),
+		),
+
+		rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
+			),
+		),
+
+		rest.get('http://localhost/api/v1/fields/values', (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
+			),
+		),
+	],
+});

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { storyMocks } from '@/storybook/controls/defineStoryMocks';
+import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+
+import { podEntityConfig } from '../Pods/entity.config';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
+import K8sBaseDetails from './K8sBaseDetails';
+import {
+	drawerMocks,
+	NODE_NAME,
+	POD_UID,
+} from './K8sBaseDetails.stories.mocks';
+import type { K8sBaseDetailsProps } from './types';
+import {
+	getDrawerHistoryDepth,
+	pushDrawerHistory,
+	resetDrawerHistory,
+} from './useDrawerHistoryStore';
+
+type DrawerArgs = PageStoryArgs<typeof drawerMocks> &
+	K8sBaseDetailsProps<unknown>;
+
+const route = `/infrastructure-monitoring/kubernetes?${INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY}=pods&${INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM}=${POD_UID}`;
+
+const meta = {
+	title: 'Infra monitoring/Kubernetes drawer',
+	component: K8sBaseDetails as (props: DrawerArgs) => JSX.Element,
+	...storyMocks(drawerMocks, { route }),
+	decorators: [
+		(Story, context): JSX.Element => {
+			// The back control appears only for a resource opened from another
+			const depth = getDrawerHistoryDepth();
+			if (context.args.openedFromANode && depth === 0) {
+				pushDrawerHistory({
+					params: { selectedItem: NODE_NAME, category: InfraMonitoringEntity.NODES },
+					category: InfraMonitoringEntity.NODES,
+					label: NODE_NAME,
+					entity: { nodeName: NODE_NAME },
+					queryKeyPrefix: 'node',
+				});
+			}
+			if (!context.args.openedFromANode && depth > 0) {
+				resetDrawerHistory();
+			}
+
+			return <Story />;
+		},
+	],
+} satisfies Meta<DrawerArgs>;
+
+export default meta;
+
+type Story = StoryObj<DrawerArgs>;
+
+/** A pod opened from a node's overview tab, so the header leads with the way back. */
+export const Default: Story = {
+	args: { ...podEntityConfig.details } as Partial<DrawerArgs> as DrawerArgs,
+};

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { X } from '@signozhq/icons';
+import { ArrowLeft, X } from '@signozhq/icons';
 import { Divider } from '@signozhq/ui/divider';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper, DrawerWrapperProps } from '@signozhq/ui/drawer';
@@ -16,12 +16,19 @@ import {
 	useGlobalTimeStore,
 } from 'store/globalTime';
 
-import { INFRA_MONITORING_K8S_PARAMS_KEYS } from '../constants';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	K8S_CATEGORY_SINGULAR_LABELS,
+} from '../constants';
 import { useInfraMonitoringSelectedItemParams } from '../hooks';
 import CopyButton from 'periscope/components/CopyButton/CopyButton';
 import LoadingContainer from '../LoadingContainer';
 
 import K8sBaseDetailsContent from './K8sBaseDetailsContent';
+import { CategoryIcon } from './categoryIcons';
+import { getEntityNameAttributeKey } from './relations';
+import { useDrawerHistoryStore } from './useDrawerHistoryStore';
+import { usePrimeEntityDetails } from './usePrimeEntityDetails';
 import { K8sBaseDetailsProps } from './types';
 import { useDrawerLifecycleStore } from './useDrawerLifecycleStore';
 
@@ -86,6 +93,11 @@ export default function K8sBaseDetails<T>({
 		useInfraMonitoringSelectedItemParams();
 	const selectedItem = selectedItemParams.selectedItem;
 
+	const selectedItemExpression = useMemo(
+		() => getSelectedItemExpression(selectedItemParams),
+		[getSelectedItemExpression, selectedItemParams],
+	);
+
 	const entityQueryKey = useMemo(
 		() =>
 			getAutoRefreshQueryKey(
@@ -121,9 +133,10 @@ export default function K8sBaseDetails<T>({
 			const { minTime, maxTime } = getMinMaxTime();
 			const start = Math.floor(minTime / NANO_SECOND_MULTIPLIER);
 			const end = Math.floor(maxTime / NANO_SECOND_MULTIPLIER);
-			const expression = getSelectedItemExpression(selectedItemParams);
-
-			return fetchEntityData({ filter: { expression }, start, end }, signal);
+			return fetchEntityData(
+				{ filter: { expression: selectedItemExpression }, start, end },
+				signal,
+			);
 		},
 		cacheTime: INFRA_MONITORING_DETAILS_CACHE_TIME,
 		staleTime: INFRA_MONITORING_DETAILS_CACHE_TIME,
@@ -158,9 +171,29 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [selectedItem, markDrawerOpened, markDrawerClosed]);
 
+	const previousEntry = useDrawerHistoryStore(
+		(store) => store.entries[store.entries.length - 1] ?? null,
+	);
+	const popDrawerHistory = useDrawerHistoryStore((store) => store.pop);
+	const primeDetails = usePrimeEntityDetails();
+	const resetHistory = useDrawerHistoryStore((store) => store.reset);
+
 	const handleClose = useCallback((): void => {
+		resetHistory();
 		setSelectedItemParams(null);
-	}, [setSelectedItemParams]);
+	}, [resetHistory, setSelectedItemParams]);
+
+	// Steps back through resources opened from an overview tab
+	const handleBack = useCallback((): void => {
+		const previous = popDrawerHistory();
+
+		if (!previous) {
+			return;
+		}
+
+		primeDetails(previous);
+		setSelectedItemParams(previous.params);
+	}, [popDrawerHistory, primeDetails, setSelectedItemParams]);
 
 	const handleOpenChange = useCallback(
 		(open: boolean): void => {
@@ -172,11 +205,25 @@ export default function K8sBaseDetails<T>({
 	);
 
 	const handleCopyId = useCallback((): void => {
-		toast.success('ID copied to clipboard', { position: 'bottom-left' });
-	}, []);
+		toast.success(
+			`${K8S_CATEGORY_SINGULAR_LABELS[category]} name copied to clipboard`,
+			{ position: 'bottom-left' },
+		);
+	}, [category]);
 
 	const entityName = entity ? getEntityName(entity) : '';
 
+	// meta carries the resource's parents; its own name comes from the config
+	const entityAttributes = useMemo((): Record<string, string> => {
+		const meta = (entity as { meta?: Record<string, string> | null } | null)
+			?.meta;
+
+		return {
+			...(meta ?? {}),
+			...(entityName ? { [getEntityNameAttributeKey(category)]: entityName } : {}),
+		};
+	}, [entity, entityName, category]);
+
 	useEffect(() => {
 		if (entity) {
 			void logEvent(InfraMonitoringEvents.PageVisited, {
@@ -187,20 +234,48 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [entity, eventCategory]);
 
+	// Names the resource it returns to, so a drill several levels deep stays clear
+	const backTarget = previousEntry
+		? `Back to ${K8S_CATEGORY_SINGULAR_LABELS[previousEntry.category]}`
+		: '';
+	const backLabel = previousEntry ? `${backTarget}: ${previousEntry.label}` : '';
+
 	// TODO(H4ad): Improve this on component level
 	// DrawerWrapper types `title` as string but renders any ReactNode.
 	const drawerTitle = (
 		<>
-			<Button
-				variant="ghost"
-				size="sm"
-				color="secondary"
-				onClick={handleClose}
-				data-testid="close-drawer-button"
-				className={styles.closeButton}
-				prefix={<X />}
-			/>
+			{/* One control: step back where there is a trail, close otherwise.
+			    Clicking outside the drawer closes it either way. The label is text
+			    rather than a tooltip, which a click on the control would dismiss. */}
+			{previousEntry ? (
+				<Button
+					variant="ghost"
+					size="sm"
+					color="secondary"
+					onClick={handleBack}
+					data-testid="drawer-back-button"
+					className={styles.backButton}
+					aria-label={backLabel}
+					prefix={<ArrowLeft size={14} />}
+				>
+					{backTarget}
+				</Button>
+			) : (
+				<Button
+					variant="ghost"
+					size="sm"
+					color="secondary"
+					onClick={handleClose}
+					data-testid="close-drawer-button"
+					className={styles.closeButton}
+					prefix={<X />}
+				/>
+			)}
 			<Divider type="vertical" />
+			<span className={styles.entityKind} data-testid="drawer-entity-kind">
+				<CategoryIcon category={category} />
+				{K8S_CATEGORY_SINGULAR_LABELS[category]}
+			</span>
 			<Typography.Text className={styles.title}>
 				{entityName ||
 					((isEntityError || hasResponseError) && 'Failed to load entity details') ||
@@ -208,8 +283,8 @@ export default function K8sBaseDetails<T>({
 					'-'}
 			</Typography.Text>
 			<CopyButton
-				value={selectedItem ?? ''}
-				ariaLabel="Copy ID"
+				value={entityName || selectedItem || ''}
+				ariaLabel={`Copy ${K8S_CATEGORY_SINGULAR_LABELS[category]} name`}
 				className={styles.copyIdButton}
 				testId="copy-id-button"
 				onCopy={handleCopyId}
@@ -271,6 +346,8 @@ export default function K8sBaseDetails<T>({
 						customTabs={customTabs}
 						logsAndTracesInitialExpression={logsAndTracesInitialExpression}
 						eventsInitialExpression={eventsInitialExpression}
+						entityAttributes={entityAttributes}
+						entityName={entityName}
 					/>
 				</GlobalTimeProvider>
 			)}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetailsContent.tsx

@@ -4,6 +4,7 @@ import {
 	ChevronsLeftRight,
 	Compass,
 	DraftingCompass,
+	LayoutGrid,
 	ScrollText,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
@@ -31,6 +32,7 @@ import EntityEvents from '../EntityDetailsUtils/EntityEvents';
 import EntityLogs from '../EntityDetailsUtils/EntityLogs';
 import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityLogs/hooks';
 import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
+import EntityOverview from '../EntityDetailsUtils/EntityOverview/EntityOverview';
 import EntityTraces from '../EntityDetailsUtils/EntityTraces';
 import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
 import {
@@ -67,12 +69,16 @@ export default function K8sBaseDetailsContent<T>({
 	customTabs,
 	logsAndTracesInitialExpression,
 	eventsInitialExpression,
+	entityAttributes,
+	entityName,
 }: K8sBaseDetailsContentProps<T>): JSX.Element {
 	const { timeRange, selectedInterval, handleTimeChange } =
 		useEntityDetailsTime();
 
 	const tabVisibility = useMemo(
 		() => ({
+			// Declared per category, since only a kubernetes resource relates to others
+			showOverview: false,
 			showMetrics: true,
 			showLogs: true,
 			showTraces: true,
@@ -86,6 +92,9 @@ export default function K8sBaseDetailsContent<T>({
 
 	const validTabs = useMemo(() => {
 		const tabs: string[] = [];
+		if (tabVisibility.showOverview) {
+			tabs.push(VIEW_TYPES.OVERVIEW);
+		}
 		if (tabVisibility.showMetrics) {
 			tabs.push(VIEW_TYPES.METRICS);
 		}
@@ -104,14 +113,28 @@ export default function K8sBaseDetailsContent<T>({
 		return tabs;
 	}, [tabVisibility, customTabs]);
 
-	useEffect(() => {
-		if (!hideDetailViewTabs && !validTabs.includes(selectedView)) {
-			const firstValid = validTabs[0] || VIEW_TYPES.METRICS;
-			void setSelectedView(firstValid);
-		}
-	}, [hideDetailViewTabs, selectedView, validTabs, setSelectedView]);
+	const defaultView = validTabs[0] || VIEW_TYPES.METRICS;
 
-	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
+	useEffect(() => {
+		if (
+			!hideDetailViewTabs &&
+			selectedView &&
+			!validTabs.includes(selectedView)
+		) {
+			void setSelectedView(defaultView);
+		}
+	}, [
+		hideDetailViewTabs,
+		selectedView,
+		validTabs,
+		defaultView,
+		setSelectedView,
+	]);
+
+	// An absent view param lands on the first tab the category offers
+	const effectiveView = hideDetailViewTabs
+		? VIEW_TYPES.METRICS
+		: (selectedView ?? defaultView);
 
 	// Wait until the view is a valid tab so we don't log a pending value before
 	// the validation effect above corrects an out-of-scope query param
@@ -169,20 +192,20 @@ export default function K8sBaseDetailsContent<T>({
 			entity: InfraMonitoringEvents.K8sEntity,
 			page: InfraMonitoringEvents.DetailedPage,
 			category: eventCategory,
-			view: selectedView,
+			view: effectiveView,
 		});
 
 		logInfraExplorerNavigatedEvent({
 			entityType: category,
 			destination:
-				selectedView === VIEW_TYPES.LOGS ? 'logs_explorer' : 'traces_explorer',
+				effectiveView === VIEW_TYPES.LOGS ? 'logs_explorer' : 'traces_explorer',
 			source: 'tab_cta_button',
-			tab: selectedView,
+			tab: effectiveView,
 			sourceKey: null,
 			drawerDurationMsAtNavigation: getDrawerDurationMs(),
 		});
 
-		if (selectedView === VIEW_TYPES.LOGS) {
+		if (effectiveView === VIEW_TYPES.LOGS) {
 			const fullExpression = combineInitialAndUserExpression(
 				logsAndTracesInitialExpression,
 				userLogsExpression || '',
@@ -207,7 +230,7 @@ export default function K8sBaseDetailsContent<T>({
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
 			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
-		} else if (selectedView === VIEW_TYPES.TRACES) {
+		} else if (effectiveView === VIEW_TYPES.TRACES) {
 			const fullExpression = combineInitialAndUserExpression(
 				logsAndTracesInitialExpression,
 				userTracesExpression || '',
@@ -264,7 +287,7 @@ export default function K8sBaseDetailsContent<T>({
 							filterExpression={getCountsFilterExpression(entity)}
 							closeDrawer={handleClose}
 							entityType={category}
-							activeTab={selectedView}
+							activeTab={effectiveView}
 						/>
 					)}
 			</div>
@@ -275,8 +298,21 @@ export default function K8sBaseDetailsContent<T>({
 						type="single"
 						className={styles.viewsTabs}
 						onChange={handleTabChange}
-						value={selectedView}
+						value={effectiveView}
 						items={[
+							...(tabVisibility.showOverview
+								? [
+										{
+											value: VIEW_TYPES.OVERVIEW,
+											label: (
+												<div className={styles.viewTitle}>
+													<LayoutGrid size={14} />
+													Overview
+												</div>
+											),
+										},
+									]
+								: []),
 							...(tabVisibility.showMetrics
 								? [
 										{
@@ -341,7 +377,7 @@ export default function K8sBaseDetailsContent<T>({
 						]}
 					/>
 
-					{selectedView === VIEW_TYPES.LOGS && (
+					{effectiveView === VIEW_TYPES.LOGS && (
 						<TooltipSimple title="Go to Logs Explorer" side="left" arrow>
 							<Button
 								variant="ghost"
@@ -354,7 +390,7 @@ export default function K8sBaseDetailsContent<T>({
 							</Button>
 						</TooltipSimple>
 					)}
-					{selectedView === VIEW_TYPES.TRACES && (
+					{effectiveView === VIEW_TYPES.TRACES && (
 						<TooltipSimple title="Go to Traces Explorer" side="left" arrow>
 							<Button
 								variant="ghost"
@@ -370,6 +406,16 @@ export default function K8sBaseDetailsContent<T>({
 				</div>
 			)}
 
+			{effectiveView === VIEW_TYPES.OVERVIEW && tabVisibility.showOverview && (
+				<EntityOverview
+					category={category}
+					eventEntity={eventCategory}
+					attributes={entityAttributes}
+					entity={entity}
+					entityName={entityName}
+					queryKeyPrefix={queryKeyPrefix}
+				/>
+			)}
 			{effectiveView === VIEW_TYPES.METRICS && (
 				<EntityMetrics<T>
 					entity={entity}
@@ -406,7 +452,7 @@ export default function K8sBaseDetailsContent<T>({
 				/>
 			)}
 			{customTabs?.map((tab) =>
-				selectedView === tab.key ? (
+				effectiveView === tab.key ? (
 					<Fragment key={tab.key}>
 						{tab.render({
 							entity,

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx

@@ -39,6 +39,7 @@ import K8sOptionsSidePanel from './K8sOptionsSidePanel';
 import K8sHeader from './K8sHeader';
 import { K8sPaginationWarning } from './K8sPaginationWarning';
 import K8sTableToolbar from './K8sTableToolbar';
+import { resetDrawerHistory } from './useDrawerHistoryStore';
 import { K8sBaseFilters } from './types';
 import { getGroupedByMeta } from './utils';
 import { K8sInstrumentationChecksCallout } from './components/K8sInstrumentationChecksCallout/K8sInstrumentationChecksCallout';
@@ -301,6 +302,8 @@ export function K8sBaseList<
 					queryClient.setQueryData(detailQueryKey, { data: record });
 				}
 
+				// Opening from the list starts a fresh trail for the drawer's back control
+				resetDrawerHistory();
 				setSelectedItemParams(params);
 			}
 

frontend/src/container/InfraMonitoringK8sV2/Base/K8sDynamicList.tsx

@@ -1,6 +1,9 @@
 import { useMemo } from 'react';
 
-import { useInfraMonitoringCategory } from '../hooks';
+import {
+	useInfraMonitoringCategory,
+	useInfraMonitoringSelectedItemParams,
+} from '../hooks';
 import { getEntityConfig } from './entity.registry';
 import { K8sBaseList } from './K8sBaseList';
 import K8sBaseDetails from './K8sBaseDetails';
@@ -15,27 +18,35 @@ export function K8sDynamicList({
 	leftFilters,
 }: K8sDynamicListProps): JSX.Element | null {
 	const [selectedCategory] = useInfraMonitoringCategory();
+	const [selectedItemParams] = useInfraMonitoringSelectedItemParams();
 
 	const config = useMemo(
 		() => getEntityConfig(selectedCategory),
 		[selectedCategory],
 	);
 
+	// A row opened from the drawer's overview tab belongs to another category
+	const drawerCategory = selectedItemParams.category ?? selectedCategory;
+	const drawerConfig = useMemo(
+		() => getEntityConfig(drawerCategory),
+		[drawerCategory],
+	);
+
 	if (!config) {
 		return null;
 	}
 
-	const { list, details } = config;
-
 	return (
 		<>
 			<K8sBaseList
-				{...list}
+				{...config.list}
 				controlListPrefix={controlListPrefix}
 				leftFilters={leftFilters}
 			/>
 
-			<K8sBaseDetails {...details} />
+			{/* No key: remounting would animate the drawer shut and open again
+			    for what is really a change of contents */}
+			{drawerConfig && <K8sBaseDetails {...drawerConfig.details} />}
 		</>
 	);
 }

frontend/src/container/InfraMonitoringK8sV2/Base/K8sExpandedRow.tsx

@@ -30,6 +30,7 @@ import {
 	useInfraMonitoringPageListing,
 	useInfraMonitoringSelectedItemParams,
 } from '../hooks';
+import { resetDrawerHistory } from './useDrawerHistoryStore';
 import { K8sBaseFilters } from './types';
 import { useLogEventForColumnCustomized } from './useLogEventForColumnCustomized';
 import { useInfraMonitoringFontSize } from './useInfraMonitoringTablePreferencesStore';
@@ -219,6 +220,8 @@ export function K8sExpandedRow<
 				queryClient.setQueryData(detailQueryKey, { data: row });
 			}
 
+			// Opening from the list starts a fresh trail for the drawer's back control
+			resetDrawerHistory();
 			setSelectedItemParams(params);
 		},
 		[

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseDetails.backNavigation.test.tsx

@@ -0,0 +1,152 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InfraMonitoringEvents } from 'constants/events';
+import {
+	NuqsTestingAdapter,
+	type OnUrlUpdateFunction,
+} from 'nuqs/adapters/testing';
+import { act, render, waitFor } from 'tests/test-utils';
+
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../../constants';
+import K8sBaseDetails from '../K8sBaseDetails';
+import { useDrawerHistoryStore } from '../useDrawerHistoryStore';
+
+jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="mock-datetime" />,
+}));
+
+type TestEntity = { name: string };
+
+const mockEntity: TestEntity = { name: 'test-container' };
+
+const NODE_PARAMS = {
+	selectedItem: 'node-1',
+	category: InfraMonitoringEntity.NODES,
+	clusterName: null,
+	namespaceName: null,
+};
+
+/** What the drawer records before opening a resource from the node's overview */
+const NODE_ENTRY = {
+	params: NODE_PARAMS,
+	category: InfraMonitoringEntity.NODES,
+	label: 'node-1',
+	entity: { name: 'node-1' },
+	queryKeyPrefix: 'node',
+};
+
+function renderDrawer(onUrlUpdate?: OnUrlUpdateFunction): void {
+	render(
+		<NuqsTestingAdapter
+			searchParams={{
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: 'container-1',
+			}}
+			onUrlUpdate={onUrlUpdate}
+		>
+			<K8sBaseDetails<TestEntity>
+				category={InfraMonitoringEntity.CONTAINERS}
+				eventCategory={InfraMonitoringEvents.Pod}
+				getSelectedItemExpression={(): string => "k8s.pod.uid = 'abc'"}
+				fetchEntityData={jest
+					.fn()
+					.mockResolvedValue({ data: mockEntity, error: null })}
+				getEntityName={(entity): string => entity.name}
+				getInitialLogTracesExpression={(): string => ''}
+				getInitialEventsExpression={(): string => ''}
+				metadataConfig={[
+					{ label: 'Name', getValue: (entity): string => entity.name },
+				]}
+				entityWidgetInfo={[{ title: 'CPU', yAxisUnit: 'percent' }]}
+				getEntityQueryPayload={jest.fn().mockReturnValue([])}
+				queryKeyPrefix="testContainer"
+			/>
+		</NuqsTestingAdapter>,
+	);
+}
+
+describe('K8sBaseDetails - back navigation', () => {
+	beforeEach(() => {
+		useDrawerHistoryStore.getState().reset();
+	});
+
+	it('closes rather than going back when opened from the list', async () => {
+		act(() => {
+			renderDrawer();
+		});
+
+		await waitFor(() => {
+			expect(screen.getAllByText('test-container').length).toBeGreaterThan(0);
+		});
+
+		expect(screen.queryByTestId('drawer-back-button')).not.toBeInTheDocument();
+		expect(screen.getByTestId('close-drawer-button')).toBeInTheDocument();
+	});
+
+	it('replaces the close control while there is somewhere to go back to', async () => {
+		useDrawerHistoryStore.getState().push(NODE_ENTRY);
+
+		act(() => {
+			renderDrawer();
+		});
+
+		const backButton = await screen.findByTestId('drawer-back-button');
+
+		// The destination is text rather than a tooltip, which a click would dismiss
+		expect(backButton).toHaveTextContent('Back to Node');
+		expect(backButton).toHaveAccessibleName('Back to Node: node-1');
+		expect(screen.queryByTestId('close-drawer-button')).not.toBeInTheDocument();
+	});
+
+	it('returns to the resource this one was opened from', async () => {
+		const user = userEvent.setup();
+		const onUrlUpdate = jest.fn();
+
+		useDrawerHistoryStore.getState().push(NODE_ENTRY);
+
+		act(() => {
+			renderDrawer(onUrlUpdate);
+		});
+
+		const backButton = await screen.findByTestId('drawer-back-button');
+		await user.click(backButton);
+
+		await waitFor(() => {
+			const params = onUrlUpdate.mock.calls.map((call) => call[0].searchParams);
+			expect(
+				params.some(
+					(searchParams) =>
+						searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM) ===
+							'node-1' &&
+						searchParams.get(
+							INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY,
+						) === InfraMonitoringEntity.NODES,
+				),
+			).toBe(true);
+		});
+
+		// The trail is one step shorter, so a second back closes instead
+		expect(useDrawerHistoryStore.getState().entries).toHaveLength(0);
+	});
+
+	it('drops the trail when the drawer is dismissed', async () => {
+		const user = userEvent.setup();
+
+		useDrawerHistoryStore.getState().push(NODE_ENTRY);
+
+		act(() => {
+			renderDrawer();
+		});
+
+		await screen.findByTestId('drawer-back-button');
+		// Dismissing from outside the drawer, the way a click on the overlay does
+		await user.keyboard('{Escape}');
+
+		await waitFor(() => {
+			expect(useDrawerHistoryStore.getState().entries).toHaveLength(0);
+		});
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseDetails.tabValidation.test.tsx

@@ -21,6 +21,7 @@ type TestEntity = {
 	name: string;
 	namespace: string;
 	cluster: string;
+	meta?: Record<string, string>;
 };
 
 const mockEntity: TestEntity = {
@@ -29,14 +30,22 @@ const mockEntity: TestEntity = {
 	cluster: 'test-cluster',
 };
 
-function createBaseProps() {
+/** The overview tab appears only for a resource whose meta relates it to others */
+const relatedEntity: TestEntity = {
+	...mockEntity,
+	meta: {
+		'k8s.pod.uid': '63edbad0-398e-48e5-baba-f7ded7c73f1b',
+		'k8s.namespace.name': 'default',
+		'k8s.cluster.name': 'test-cluster',
+	},
+};
+
+function createBaseProps(category: InfraMonitoringEntity, entity = mockEntity) {
 	return {
-		category: InfraMonitoringEntity.PODS,
+		category,
 		eventCategory: InfraMonitoringEvents.Pod,
 		getSelectedItemExpression: (): string => 'k8s.pod.name = "test-pod"',
-		fetchEntityData: jest
-			.fn()
-			.mockResolvedValue({ data: mockEntity, error: null }),
+		fetchEntityData: jest.fn().mockResolvedValue({ data: entity, error: null }),
 		getEntityName: (e: TestEntity): string => e.name,
 		getInitialLogTracesExpression: (): string => 'k8s.pod.name = "test-pod"',
 		getInitialEventsExpression: (): string => 'k8s.pod.name = "test-pod"',
@@ -51,7 +60,10 @@ function createBaseProps() {
 
 interface RenderOptions {
 	view?: string;
+	category?: InfraMonitoringEntity;
+	entity?: TestEntity;
 	tabsConfig?: {
+		showOverview?: boolean;
 		showMetrics?: boolean;
 		showLogs?: boolean;
 		showTraces?: boolean;
@@ -67,6 +79,9 @@ interface RenderOptions {
 
 function renderK8sBaseDetails({
 	view = VIEW_TYPES.METRICS,
+	// Volumes have no related resources, so they get no overview tab
+	category = InfraMonitoringEntity.VOLUMES,
+	entity = mockEntity,
 	tabsConfig,
 	customTabs,
 }: RenderOptions = {}) {
@@ -78,7 +93,7 @@ function renderK8sBaseDetails({
 	return render(
 		<NuqsTestingAdapter searchParams={searchParams}>
 			<K8sBaseDetails<TestEntity>
-				{...createBaseProps()}
+				{...createBaseProps(category, entity)}
 				tabsConfig={tabsConfig}
 				customTabs={customTabs}
 			/>
@@ -106,6 +121,25 @@ describe('K8sBaseDetails - Tab Validation', () => {
 		});
 	});
 
+	it('should land on the overview tab for a category with related resources', async () => {
+		act(() => {
+			renderK8sBaseDetails({
+				view: 'invalid-tab',
+				category: InfraMonitoringEntity.PODS,
+				entity: relatedEntity,
+				tabsConfig: { showOverview: true },
+			});
+		});
+
+		await waitFor(() => {
+			expect(screen.getAllByText('test-pod').length).toBeGreaterThan(0);
+		});
+
+		await waitFor(() => {
+			expect(getSelectedTabText()).toContain('Overview');
+		});
+	});
+
 	it('should reset to first available tab when METRICS is disabled and view is invalid', async () => {
 		act(() => {
 			renderK8sBaseDetails({

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/relations.test.ts

@@ -0,0 +1,154 @@
+import { InfraMonitoringEntity } from '../../constants';
+import {
+	buildRelatedFilterExpression,
+	carryOverListFilters,
+	getRelatedCategories,
+} from '../relations';
+
+/** What /api/v2/infra_monitoring/pods returns as a pod's meta. */
+const POD_ATTRIBUTES = {
+	'k8s.pod.uid': '63edbad0-398e-48e5-baba-f7ded7c73f1b',
+	'k8s.pod.name': 'checkout-7d9f',
+	'k8s.namespace.name': 'shop',
+	'k8s.cluster.name': 'prod',
+	'k8s.node.name': 'node-1',
+	'k8s.deployment.name': 'checkout',
+};
+
+const NODE_ATTRIBUTES = {
+	'k8s.node.name': 'node-1',
+	'k8s.cluster.name': 'prod',
+};
+
+describe('getRelatedCategories', () => {
+	it('offers every other kubernetes category, never itself', () => {
+		expect(
+			getRelatedCategories(InfraMonitoringEntity.PODS, POD_ATTRIBUTES),
+		).toStrictEqual([
+			InfraMonitoringEntity.CONTAINERS,
+			InfraMonitoringEntity.DEPLOYMENTS,
+			InfraMonitoringEntity.STATEFULSETS,
+			InfraMonitoringEntity.DAEMONSETS,
+			InfraMonitoringEntity.JOBS,
+			InfraMonitoringEntity.VOLUMES,
+			InfraMonitoringEntity.NODES,
+			InfraMonitoringEntity.NAMESPACES,
+			InfraMonitoringEntity.CLUSTERS,
+		]);
+	});
+
+	it('scopes a category it has no relation to by what they share', () => {
+		// Not this pod's statefulsets, which it has none of: the ones beside it
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.PODS,
+				InfraMonitoringEntity.STATEFULSETS,
+				POD_ATTRIBUTES,
+			),
+		).toBe("k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop'");
+	});
+
+	it('falls back to the cluster where that is all two categories share', () => {
+		// Deployment metrics carry no node, so this relation is unexpressible
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.NODES,
+				InfraMonitoringEntity.DEPLOYMENTS,
+				NODE_ATTRIBUTES,
+			),
+		).toBe("k8s.cluster.name = 'prod'");
+	});
+
+	it('finds nothing for a host, which is not a kubernetes resource', () => {
+		// Host rows carry os.type and the host name, no kubernetes attribute
+		expect(
+			getRelatedCategories(InfraMonitoringEntity.HOSTS, {
+				'host.name': 'ip-10-0-0-1',
+				'os.type': 'linux',
+			}),
+		).toStrictEqual([]);
+	});
+
+	it('lists pods first, which makes them the default for a node', () => {
+		expect(
+			getRelatedCategories(InfraMonitoringEntity.NODES, NODE_ATTRIBUTES)[0],
+		).toBe(InfraMonitoringEntity.PODS);
+	});
+});
+
+describe('buildRelatedFilterExpression', () => {
+	it('scopes the pods of a node by the node, inside its cluster', () => {
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.NODES,
+				InfraMonitoringEntity.PODS,
+				NODE_ATTRIBUTES,
+			),
+		).toBe("k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'");
+	});
+
+	it("scopes a pod's containers by the pod uid, which those rows carry", () => {
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.PODS,
+				InfraMonitoringEntity.CONTAINERS,
+				POD_ATTRIBUTES,
+			),
+		).toBe(
+			"k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop' AND k8s.pod.uid = '63edbad0-398e-48e5-baba-f7ded7c73f1b'",
+		);
+	});
+
+	it("reaches a pod's deployment by name, the only key that endpoint has", () => {
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.PODS,
+				InfraMonitoringEntity.DEPLOYMENTS,
+				POD_ATTRIBUTES,
+			),
+		).toBe(
+			"k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop' AND k8s.deployment.name = 'checkout'",
+		);
+	});
+
+	it('names the parent when the drawer resource belongs to it', () => {
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.PODS,
+				InfraMonitoringEntity.NODES,
+				POD_ATTRIBUTES,
+			),
+		).toBe("k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'");
+	});
+
+	it('asks a cluster list for the cluster alone', () => {
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.PODS,
+				InfraMonitoringEntity.CLUSTERS,
+				POD_ATTRIBUTES,
+			),
+		).toBe("k8s.cluster.name = 'prod'");
+	});
+});
+
+describe('carryOverListFilters', () => {
+	it('keeps the clauses the target endpoint understands', () => {
+		expect(
+			carryOverListFilters(
+				"k8s.namespace.name = 'shop' AND k8s.node.condition_ready = true",
+				InfraMonitoringEntity.PODS,
+			),
+		).toBe("k8s.namespace.name = 'shop'");
+	});
+
+	it('drops a filter written against the source entity only', () => {
+		expect(
+			carryOverListFilters('k8s.node.cpu.usage > 0.5', InfraMonitoringEntity.PODS),
+		).toBe('');
+	});
+
+	it('returns nothing for an empty list filter', () => {
+		expect(carryOverListFilters('   ', InfraMonitoringEntity.PODS)).toBe('');
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/Base/categoryIcons.tsx

@@ -0,0 +1,48 @@
+import type { ComponentProps } from 'react';
+import {
+	ArrowUpDown,
+	Bolt,
+	Box,
+	Boxes,
+	Computer,
+	Container,
+	FilePenLine,
+	Group,
+	HardDrive,
+	Server,
+	Workflow,
+} from '@signozhq/icons';
+
+import { InfraMonitoringEntity } from '../constants';
+
+/**
+ * One icon per category, so the section tabs and the drawer that opens from
+ * them show a resource the same way.
+ */
+type IconSize = ComponentProps<typeof Container>['size'];
+
+const CATEGORY_ICONS: Record<InfraMonitoringEntity, typeof Container> = {
+	[InfraMonitoringEntity.HOSTS]: Server,
+	[InfraMonitoringEntity.PODS]: Container,
+	[InfraMonitoringEntity.CONTAINERS]: Box,
+	[InfraMonitoringEntity.NODES]: Workflow,
+	[InfraMonitoringEntity.NAMESPACES]: FilePenLine,
+	[InfraMonitoringEntity.CLUSTERS]: Boxes,
+	[InfraMonitoringEntity.DEPLOYMENTS]: Computer,
+	[InfraMonitoringEntity.STATEFULSETS]: ArrowUpDown,
+	[InfraMonitoringEntity.DAEMONSETS]: Group,
+	[InfraMonitoringEntity.JOBS]: Bolt,
+	[InfraMonitoringEntity.VOLUMES]: HardDrive,
+};
+
+export function CategoryIcon({
+	category,
+	size = 14,
+}: {
+	category: InfraMonitoringEntity;
+	size?: IconSize;
+}): JSX.Element {
+	const Icon = CATEGORY_ICONS[category];
+
+	return <Icon size={size} />;
+}

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityCountsSection/EntityCountsSection.tsx

@@ -3,18 +3,11 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { Compass } from '@signozhq/icons';
 import { TextNoData } from '../../../components/TextNoData';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import { Link } from 'react-router-dom';
-import { DataSource } from 'types/common/queryBuilder';
-import { v4 as uuid } from 'uuid';
 
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../../../constants';
+import { InfraMonitoringEntity } from '../../../constants';
 import { getDrawerDurationMs } from '../../useDrawerLifecycleStore';
+import { buildK8sListNavigationUrl } from '../../utils';
 import styles from './EntityCountsSection.module.scss';
 import { logInfraExplorerNavigatedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
@@ -55,70 +48,6 @@ export function EntityCountsSection<T>({
 		closeDrawer();
 	};
 
-	const buildNavigationUrl = (targetCategory: InfraMonitoringEntity): string => {
-		const defaultQuery = initialQueriesMap[DataSource.METRICS];
-
-		const compositeQuery = {
-			...defaultQuery,
-			id: uuid(),
-			builder: {
-				...defaultQuery.builder,
-				queryData: defaultQuery.builder.queryData.map((query) => ({
-					...query,
-					filter: { expression: filterExpression },
-					filters: { items: [], op: 'AND' as const },
-				})),
-			},
-		};
-
-		const urlParams = new URLSearchParams();
-		urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
-		urlParams.set(
-			QueryParams.compositeQuery,
-			encodeURIComponent(JSON.stringify(compositeQuery)),
-		);
-
-		const currentSearchParams = new URLSearchParams(window.location.search);
-		const detailRelativeTime = currentSearchParams.get(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-		);
-		const detailStartTime = currentSearchParams.get(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-		);
-		const detailEndTime = currentSearchParams.get(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-		);
-
-		const listRelativeTime = currentSearchParams.get(QueryParams.relativeTime);
-		const listStartTime = currentSearchParams.get(QueryParams.startTime);
-		const listEndTime = currentSearchParams.get(QueryParams.endTime);
-
-		if (listRelativeTime) {
-			urlParams.set(QueryParams.relativeTime, listRelativeTime);
-		} else if (listStartTime && listEndTime) {
-			urlParams.set(QueryParams.startTime, listStartTime);
-			urlParams.set(QueryParams.endTime, listEndTime);
-		}
-
-		if (detailRelativeTime) {
-			urlParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-				detailRelativeTime,
-			);
-		} else if (detailStartTime && detailEndTime) {
-			urlParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-				detailStartTime,
-			);
-			urlParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-				detailEndTime,
-			);
-		}
-
-		return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
-	};
-
 	return (
 		<div className={styles.countsContainer}>
 			{countsConfig.map((config) => (
@@ -147,7 +76,7 @@ export function EntityCountsSection<T>({
 						<TextNoData type="typography" className={styles.countValue} />
 					)}
 					<Link
-						to={buildNavigationUrl(config.targetCategory)}
+						to={buildK8sListNavigationUrl(config.targetCategory, filterExpression)}
 						onClick={(): void => handleCardNavigate(config.label)}
 						data-testid={`navigate-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
 					>

frontend/src/container/InfraMonitoringK8sV2/Base/events.ts

@@ -97,7 +97,11 @@ export function logInfraExplorerNavigatedEvent(params: {
 		| 'logs_explorer'
 		| 'traces_explorer'
 		| 'k8s_list';
-	source: 'chart_compass_icon' | 'tab_cta_button' | 'stats_card';
+	source:
+		| 'chart_compass_icon'
+		| 'tab_cta_button'
+		| 'stats_card'
+		| 'overview_cta';
 	tab: string;
 	sourceKey: string | null;
 	drawerDurationMsAtNavigation: number | null;

frontend/src/container/InfraMonitoringK8sV2/Base/relations.ts

@@ -0,0 +1,265 @@
+import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+import { extractQueryPairs } from 'utils/queryContextUtils';
+
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
+
+/** The attribute that names one record of a category. */
+const PRIMARY_KEY: Record<InfraMonitoringEntity, string> = {
+	[InfraMonitoringEntity.CLUSTERS]: INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+	[InfraMonitoringEntity.NAMESPACES]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+	[InfraMonitoringEntity.NODES]: INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+	[InfraMonitoringEntity.PODS]: INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
+	[InfraMonitoringEntity.CONTAINERS]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_CONTAINER_NAME,
+	[InfraMonitoringEntity.DEPLOYMENTS]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+	[InfraMonitoringEntity.STATEFULSETS]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+	[InfraMonitoringEntity.DAEMONSETS]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+	[InfraMonitoringEntity.JOBS]: INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+	[InfraMonitoringEntity.VOLUMES]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
+	[InfraMonitoringEntity.HOSTS]: INFRA_MONITORING_ATTR_KEYS.HOST_NAME,
+};
+
+/**
+ * Attributes each list endpoint can be filtered by, broadest first so a built
+ * expression reads cluster to container. Only keys the category's metrics
+ * actually carry belong here.
+ */
+const FILTERABLE_KEYS: Record<InfraMonitoringEntity, string[]> = {
+	[InfraMonitoringEntity.CLUSTERS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+	],
+	[InfraMonitoringEntity.NODES]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+	],
+	[InfraMonitoringEntity.NAMESPACES]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+	],
+	[InfraMonitoringEntity.DEPLOYMENTS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+	],
+	[InfraMonitoringEntity.STATEFULSETS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+	],
+	[InfraMonitoringEntity.DAEMONSETS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+	],
+	[InfraMonitoringEntity.JOBS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+	],
+	[InfraMonitoringEntity.VOLUMES]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
+		INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
+	],
+	[InfraMonitoringEntity.PODS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
+	],
+	[InfraMonitoringEntity.CONTAINERS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
+		INFRA_MONITORING_ATTR_KEYS.K8S_CONTAINER_NAME,
+	],
+	[InfraMonitoringEntity.HOSTS]: [],
+};
+
+/** Dropdown order: what a resource usually contains, then what contains it. */
+const DISPLAY_ORDER: InfraMonitoringEntity[] = [
+	InfraMonitoringEntity.PODS,
+	InfraMonitoringEntity.CONTAINERS,
+	InfraMonitoringEntity.DEPLOYMENTS,
+	InfraMonitoringEntity.STATEFULSETS,
+	InfraMonitoringEntity.DAEMONSETS,
+	InfraMonitoringEntity.JOBS,
+	InfraMonitoringEntity.VOLUMES,
+	InfraMonitoringEntity.NODES,
+	InfraMonitoringEntity.NAMESPACES,
+	InfraMonitoringEntity.CLUSTERS,
+];
+
+export type EntityAttributes = Record<string, string>;
+
+/** The attribute a category's display name belongs under. */
+const NAME_KEY: Partial<Record<InfraMonitoringEntity, string>> = {
+	[InfraMonitoringEntity.PODS]: INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+};
+
+export function getEntityNameAttributeKey(
+	category: InfraMonitoringEntity,
+): string {
+	return NAME_KEY[category] ?? PRIMARY_KEY[category];
+}
+
+function matchingKeys(
+	target: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+): string[] {
+	return FILTERABLE_KEYS[target].filter((key) => !!attributes[key]);
+}
+
+/**
+ * The attribute that ties a target to the drawer's resource: the resource
+ * itself when the target's records belong to it (the containers of this pod),
+ * otherwise the target's own name as the resource knows it (the node this pod
+ * runs on). Null when neither holds, which leaves the target scoped only by
+ * the ancestors the two share.
+ */
+function relationKey(
+	source: InfraMonitoringEntity,
+	target: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+): string | null {
+	if (target === source) {
+		return null;
+	}
+
+	const keys = matchingKeys(target, attributes);
+
+	if (keys.includes(PRIMARY_KEY[source])) {
+		return PRIMARY_KEY[source];
+	}
+
+	return keys.includes(PRIMARY_KEY[target]) ? PRIMARY_KEY[target] : null;
+}
+
+/**
+ * Every category the drawer's resource can scope a list of, which for a
+ * kubernetes resource is all of them: where no closer relation exists the two
+ * still share a cluster. A target is left out only when nothing is shared at
+ * all, so a list is never asked for unscoped.
+ */
+export function getRelatedCategories(
+	source: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+): InfraMonitoringEntity[] {
+	return DISPLAY_ORDER.filter(
+		(target) =>
+			target !== source &&
+			buildRelatedFilterClauses(source, target, attributes).length > 0,
+	);
+}
+
+/**
+ * Cluster and namespace ride along with the relation itself, the way other
+ * observability tools scope these lists: a pod's deployment is read as that
+ * deployment, in that namespace, in that cluster.
+ */
+const SCOPE_KEYS = [
+	INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+];
+
+export interface RelatedFilterClause {
+	key: string;
+	value: string;
+}
+
+/**
+ * Scope clauses, broadest first. The last carries the relation where one
+ * exists; without one the list is scoped to the shared ancestors, which reads
+ * as "beside this resource" rather than "belonging to it".
+ */
+export function buildRelatedFilterClauses(
+	source: InfraMonitoringEntity,
+	target: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+): RelatedFilterClause[] {
+	const key = relationKey(source, target, attributes);
+
+	const scope = SCOPE_KEYS.filter(
+		(scopeKey) =>
+			scopeKey !== key &&
+			FILTERABLE_KEYS[target].includes(scopeKey) &&
+			!!attributes[scopeKey],
+	);
+
+	return (key ? [...scope, key] : scope).map((clauseKey) => ({
+		key: clauseKey,
+		value: attributes[clauseKey] as string,
+	}));
+}
+
+export function formatRelatedFilterClause(clause: RelatedFilterClause): string {
+	return `${clause.key} = ${formatValueForExpression(clause.value)}`;
+}
+
+export function buildRelatedFilterExpression(
+	source: InfraMonitoringEntity,
+	target: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+): string {
+	return buildRelatedFilterClauses(source, target, attributes)
+		.map(formatRelatedFilterClause)
+		.join(' AND ');
+}
+
+export function resolveRelatedCategory(
+	source: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+	requested: string | null,
+): InfraMonitoringEntity | null {
+	const related = getRelatedCategories(source, attributes);
+	const match = related.find((target) => target === requested);
+
+	return match ?? related[0] ?? null;
+}
+
+export function carryOverListFilters(
+	expression: string,
+	target: InfraMonitoringEntity,
+): string {
+	if (!expression.trim()) {
+		return '';
+	}
+
+	const supported = new Set(FILTERABLE_KEYS[target]);
+
+	return extractQueryPairs(expression)
+		.filter((pair) => supported.has(pair.key))
+		.map((pair) => {
+			const start = pair.position.negationStart ?? pair.position.keyStart;
+			const lastValue = pair.valuesPosition?.[pair.valuesPosition.length - 1];
+			const end =
+				lastValue?.end ?? pair.position.valueEnd ?? pair.position.operatorEnd;
+
+			return expression.slice(start, end + 1).trim();
+		})
+		.filter(Boolean)
+		.join(' AND ');
+}

frontend/src/container/InfraMonitoringK8sV2/Base/types.ts

@@ -75,6 +75,8 @@ export type GetEntityQueryPayload<T> = (
 ) => GetQueryResultsProps[];
 
 export interface K8sDetailsTabsConfig {
+	/** Declared by categories whose resources relate to others; see relations.ts */
+	showOverview?: boolean;
 	showMetrics?: boolean;
 	showLogs?: boolean;
 	showTraces?: boolean;
@@ -141,6 +143,10 @@ export interface K8sBaseDetailsContentProps<T> {
 	customTabs?: K8sDetailsCustomTab<T>[];
 	logsAndTracesInitialExpression: string;
 	eventsInitialExpression: string;
+	/** The drawer entity's own attributes, used to find and scope related resources */
+	entityAttributes: Record<string, string>;
+	/** Name of the drawer entity, for the back control of a resource opened from it */
+	entityName: string;
 }
 
 // Aliases for backward compatibility

frontend/src/container/InfraMonitoringK8sV2/Base/useDrawerHistoryStore.ts

@@ -0,0 +1,56 @@
+import { create } from 'zustand';
+
+import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
+
+export interface DrawerHistoryEntry {
+	params: SelectedItemParams;
+	/** Category of the resource that was open, which the back control names */
+	category: InfraMonitoringEntity;
+	/** Name of that resource, shown on hover */
+	label: string;
+	/**
+	 * The record the drawer was showing, and the prefix of the query that holds
+	 * it, so stepping back renders from it instead of fetching again.
+	 */
+	entity: unknown;
+	queryKeyPrefix: string;
+}
+
+export interface IDrawerHistoryStore {
+	entries: DrawerHistoryEntry[];
+	push: (entry: DrawerHistoryEntry) => void;
+	pop: () => DrawerHistoryEntry | null;
+	reset: () => void;
+}
+
+/**
+ * The trail left by opening one resource from another's overview tab, so the
+ * drawer can step back through it instead of only closing.
+ */
+export const useDrawerHistoryStore = create<IDrawerHistoryStore>()(
+	(set, get) => ({
+		entries: [],
+		push: (entry): void => set({ entries: [...get().entries, entry] }),
+		pop: (): DrawerHistoryEntry | null => {
+			const { entries } = get();
+			const previous = entries[entries.length - 1] ?? null;
+
+			if (previous) {
+				set({ entries: entries.slice(0, -1) });
+			}
+
+			return previous;
+		},
+		reset: (): void => set({ entries: [] }),
+	}),
+);
+
+export const resetDrawerHistory = (): void =>
+	useDrawerHistoryStore.getState().reset();
+
+export const pushDrawerHistory = (entry: DrawerHistoryEntry): void =>
+	useDrawerHistoryStore.getState().push(entry);
+
+export const getDrawerHistoryDepth = (): number =>
+	useDrawerHistoryStore.getState().entries.length;

frontend/src/container/InfraMonitoringK8sV2/Base/usePrimeEntityDetails.ts

@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { useGlobalTimeStore } from 'store/globalTime';
+
+import { SelectedItemParams } from '../hooks';
+
+interface PrimeEntityDetailsParams {
+	params: SelectedItemParams;
+	queryKeyPrefix: string;
+	entity: unknown;
+}
+
+/**
+ * Seeds the drawer's entity query with a record already in hand, so navigating
+ * between resources renders straight away instead of passing through a loading
+ * state. The list page does the same on a row click.
+ */
+export function usePrimeEntityDetails(): (
+	params: PrimeEntityDetailsParams,
+) => void {
+	const queryClient = useQueryClient();
+	const selectedTime = useGlobalTimeStore((store) => store.selectedTime);
+	const getAutoRefreshQueryKey = useGlobalTimeStore(
+		(store) => store.getAutoRefreshQueryKey,
+	);
+
+	return useCallback(
+		({ params, queryKeyPrefix, entity }): void => {
+			if (!queryKeyPrefix || !entity) {
+				return;
+			}
+
+			queryClient.setQueryData(
+				getAutoRefreshQueryKey(
+					selectedTime,
+					`${queryKeyPrefix}EntityDetails`,
+					params.selectedItem,
+					params.clusterName,
+					params.namespaceName,
+					params.containerName,
+				),
+				{ data: entity },
+			);
+		},
+		[queryClient, selectedTime, getAutoRefreshQueryKey],
+	);
+}

frontend/src/container/InfraMonitoringK8sV2/Base/utils.tsx

@@ -7,7 +7,16 @@ import {
 	formatValueForExpression,
 } from 'components/QueryBuilderV2/utils';
 import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
-import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from 'container/InfraMonitoringK8sV2/constants';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
 
 export function sortByColumnOrder<T>(
 	items: T[],
@@ -178,3 +187,74 @@ export function buildExpressionFromSelectedItemParams(
 
 	return clauses.join(' AND ');
 }
+
+/**
+ * Link to the k8s list page for `targetCategory`, pre-filtered by `filterExpression`
+ * and carrying whichever time range (list or drawer) the current URL holds.
+ */
+export function buildK8sListNavigationUrl(
+	targetCategory: InfraMonitoringEntity,
+	filterExpression: string,
+): string {
+	const defaultQuery = initialQueriesMap[DataSource.METRICS];
+
+	const compositeQuery = {
+		...defaultQuery,
+		id: uuid(),
+		builder: {
+			...defaultQuery.builder,
+			queryData: defaultQuery.builder.queryData.map((query) => ({
+				...query,
+				filter: { expression: filterExpression },
+				filters: { items: [], op: 'AND' as const },
+			})),
+		},
+	};
+
+	const urlParams = new URLSearchParams();
+	urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
+	urlParams.set(
+		QueryParams.compositeQuery,
+		encodeURIComponent(JSON.stringify(compositeQuery)),
+	);
+
+	const currentSearchParams = new URLSearchParams(window.location.search);
+	const detailRelativeTime = currentSearchParams.get(
+		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+	);
+	const detailStartTime = currentSearchParams.get(
+		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+	);
+	const detailEndTime = currentSearchParams.get(
+		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+	);
+
+	const listRelativeTime = currentSearchParams.get(QueryParams.relativeTime);
+	const listStartTime = currentSearchParams.get(QueryParams.startTime);
+	const listEndTime = currentSearchParams.get(QueryParams.endTime);
+
+	if (listRelativeTime) {
+		urlParams.set(QueryParams.relativeTime, listRelativeTime);
+	} else if (listStartTime && listEndTime) {
+		urlParams.set(QueryParams.startTime, listStartTime);
+		urlParams.set(QueryParams.endTime, listEndTime);
+	}
+
+	if (detailRelativeTime) {
+		urlParams.set(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+			detailRelativeTime,
+		);
+	} else if (detailStartTime && detailEndTime) {
+		urlParams.set(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+			detailStartTime,
+		);
+		urlParams.set(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+			detailEndTime,
+		);
+	}
+
+	return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
+}

frontend/src/container/InfraMonitoringK8sV2/Clusters/constants.ts

@@ -6,10 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import {
-	K8sDetailsCountConfig,
-	K8sDetailsMetadataConfig,
-} from '../Base/K8sBaseDetails';
+import { K8sDetailsCountConfig, K8sDetailsMetadataConfig } from '../Base/types';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import {
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/Clusters/entity.config.ts

@@ -123,6 +123,7 @@ export const clusterEntityConfig: K8sEntityConfig<InframonitoringtypesClusterRec
 		details: {
 			category: InfraMonitoringEntity.CLUSTERS,
 			eventCategory: InfraMonitoringEvents.Cluster,
+			tabsConfig: { showOverview: true },
 			queryKeyPrefix: 'cluster',
 			getSelectedItemExpression: k8sClusterGetSelectedItemExpression,
 			fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Containers/entity.config.ts

@@ -127,6 +127,7 @@ export const containerEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.CONTAINERS,
 		eventCategory: InfraMonitoringEvents.Container,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'container',
 		getSelectedItemExpression: k8sContainerGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Containers/table.config.tsx

@@ -1,4 +1,4 @@
-import { Container } from '@signozhq/icons';
+import { Box } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import {
 	InframonitoringtypesContainerReadyDTO,
@@ -94,7 +94,7 @@ export const k8sContainerColumnsConfig: ContainerTableColumnConfig[] = [
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Container Name"
-				icon={<Container data-hide-expanded="true" size={14} />}
+				icon={<Box data-hide-expanded="true" size={14} />}
 				docPath={`${CONTAINERS_DOC_PATH}#container-name`}
 			/>
 		),

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/constants.ts

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from '../Base/types';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/entity.config.ts

@@ -132,6 +132,7 @@ export const daemonSetEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.DAEMONSETS,
 		eventCategory: InfraMonitoringEvents.DaemonSet,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'daemonset',
 		getSelectedItemExpression: k8sDaemonSetGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Deployments/constants.ts

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from '../Base/types';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

frontend/src/container/InfraMonitoringK8sV2/Deployments/entity.config.ts

@@ -147,6 +147,7 @@ export const deploymentEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.DEPLOYMENTS,
 		eventCategory: InfraMonitoringEvents.Deployment,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'deployment',
 		getSelectedItemExpression: k8sDeploymentGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.module.scss

@@ -0,0 +1,166 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	margin-top: var(--spacing-8);
+	min-width: 0;
+}
+
+.controls {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--spacing-3);
+	flex-wrap: wrap;
+}
+
+.tableHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	padding: var(--spacing-4) var(--spacing-8);
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.resourcePicker {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	flex: 0 0 auto;
+}
+
+.resourceTrigger {
+	--select-trigger-width: 240px;
+	--select-trigger-height: 2rem;
+}
+
+.resourceOptions {
+	// The drawer is a dialog at z-index 50 and select content ships without one,
+	// so without this the dropdown paints behind the drawer.
+	z-index: 60;
+
+	// Radix measures the trigger for us; without this the list is narrower than it
+	min-width: var(--radix-select-trigger-width);
+}
+
+.filterRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	padding-left: var(--spacing-3);
+	min-width: 0;
+	border: 1px solid var(--l2-border);
+	border-radius: 2px;
+	background: var(--l1-background);
+
+	// The row draws the field outline, so the editor inside it draws none
+	--query-builder-v2-border-color: transparent;
+	--query-builder-v2-background-color: transparent;
+}
+
+.scopeChip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	flex: 0 1 auto;
+	min-width: 0;
+	max-width: 420px;
+	padding: var(--spacing-1) var(--spacing-3);
+	border-radius: 2px;
+	background: var(--l3-background);
+	color: var(--l2-foreground);
+	font-size: 12px;
+	line-height: 20px;
+	cursor: default;
+}
+
+.scopeMore {
+	flex: none;
+	color: var(--l3-foreground);
+}
+
+// The editor beside it is CodeMirror on the copilot theme in dark and
+// githubLight in light; the chip borrows those token colours so one filter
+// does not read as two
+.scopeKey {
+	color: #939da5;
+}
+
+.scopeOperator {
+	color: #939da5;
+}
+
+.scopeValue {
+	color: #5bec95;
+}
+
+:global(.lightMode) {
+	.scopeKey,
+	.scopeOperator {
+		color: #005cc5;
+	}
+
+	.scopeValue {
+		color: #032f62;
+	}
+}
+
+.scopeExpression {
+	font-family: var(--font-mono, monospace);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.filterInput {
+	flex: 1 1 auto;
+	min-width: 0;
+
+	// The locked scope is already shown as a chip, so drop the editor's own
+	// scope marker and the room it reserves for it
+	:global(.query-search-initial-scope-label) {
+		display: none;
+	}
+
+	:global(
+		.query-where-clause-editor.hasInitialExpression .cm-editor .cm-content
+	) {
+		padding-left: 0 !important;
+	}
+
+	// Its page-width minimum would force the filter row to overflow the drawer
+	:global(.code-mirror-where-clause .query-where-clause-editor) {
+		min-width: 0;
+	}
+}
+
+.tableCard {
+	display: flex;
+	flex-direction: column;
+	min-height: 480px;
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+	overflow: hidden;
+	min-width: 0;
+}
+
+.table {
+	flex: 1 1 auto;
+	min-height: 0;
+	--typography-color: var(--l2-foreground);
+}
+
+.noRelations {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 240px;
+	margin-top: var(--spacing-8);
+}
+
+.emptyState {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 180px;
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.stories.mocks.tsx

@@ -0,0 +1,76 @@
+import { rest } from 'msw';
+
+import { countControl } from '@/storybook/controls/controls';
+import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+
+function buildContainers(count: number): unknown[] {
+	return Array.from({ length: count }, (_, index) => ({
+		containerName: index === 0 ? 'loadgenerator' : `sidecar-${index}`,
+		containerID: `containerd://${index}`,
+		podName: 'app-demo-loadgenerator-579fbdd749-q5kgd',
+		status: 'running',
+		ready: true,
+		restarts: index,
+		image: 'ghcr.io/open-telemetry/demo:1.14.0-loadgenerator',
+		cpuUsage: 0.12,
+		memoryUsage: 148 * 1024 * 1024,
+		meta: {
+			'k8s.pod.name': 'app-demo-loadgenerator-579fbdd749-q5kgd',
+			'k8s.namespace.name': 'generator',
+			'k8s.cluster.name': 'mgmt',
+			'k8s.node.name': 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7',
+		},
+	}));
+}
+
+export const overviewMocks = defineStoryMocks({
+	controls: {
+		containers: countControl('Containers', {
+			group: 'Overview tab',
+			value: 12,
+			max: 40,
+		}),
+	},
+	handlers: (values) => [
+		// The filter's suggestions ask for these; without them the search box
+		// logs a failed request and the story's smoke test fails on it
+		rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
+			),
+		),
+
+		rest.get('http://localhost/api/v1/fields/values', (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
+			),
+		),
+
+		rest.post(
+			'http://localhost/api/v2/infra_monitoring/kube_containers',
+			async (req, res, ctx) => {
+				const { offset = 0, limit = 10 } = (await req.json()) as {
+					offset?: number;
+					limit?: number;
+				};
+
+				return res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: {
+							type: 'list',
+							records: buildContainers(values.containers).slice(
+								offset,
+								offset + limit,
+							),
+							total: values.containers,
+						},
+					}),
+				);
+			},
+		),
+	],
+});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { GlobalTimeProvider } from 'store/globalTime';
+
+import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+import { storyMocks } from '@/storybook/controls/defineStoryMocks';
+
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../../constants';
+import EntityOverview, { EntityOverviewProps } from './EntityOverview';
+import { overviewMocks } from './EntityOverview.stories.mocks';
+
+import drawerStyles from '../entityDetails.module.scss';
+
+const POD_UID = '63edbad0-398e-48e5-baba-f7ded7c73f1b';
+
+/** The meta /api/v2/infra_monitoring/pods returns for one pod. */
+const POD_ATTRIBUTES = {
+	'k8s.pod.uid': POD_UID,
+	'k8s.pod.name': 'app-demo-loadgenerator-579fbdd749-q5kgd',
+	'k8s.namespace.name': 'generator',
+	'k8s.cluster.name': 'mgmt',
+	'k8s.node.name': 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7',
+	'k8s.deployment.name': 'app-demo-loadgenerator',
+};
+
+const route = `/infrastructure-monitoring/kubernetes?${INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY}=pods&${INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM}=${POD_UID}`;
+
+type OverviewArgs = PageStoryArgs<typeof overviewMocks> & EntityOverviewProps;
+
+const meta = {
+	title: 'Infra monitoring/Drawer overview tab',
+	component: EntityOverview,
+	...storyMocks(overviewMocks, { route }),
+	decorators: [
+		(Story): JSX.Element => (
+			<DrawerWrapper
+				open
+				direction="right"
+				title="app-demo-loadgenerator-579fbdd749-q5kgd"
+				onOpenChange={(): void => undefined}
+				className={drawerStyles.entityDetailDrawer}
+			>
+				<GlobalTimeProvider>
+					<Story />
+				</GlobalTimeProvider>
+			</DrawerWrapper>
+		),
+	],
+} satisfies Meta<OverviewArgs>;
+
+export default meta;
+
+type Story = StoryObj<OverviewArgs>;
+
+export const Default: Story = {
+	args: {
+		category: InfraMonitoringEntity.PODS,
+		eventEntity: 'pod',
+		attributes: POD_ATTRIBUTES,
+		entity: { podUID: POD_UID },
+		entityName: POD_ATTRIBUTES['k8s.pod.name'],
+		queryKeyPrefix: 'pod',
+	},
+};

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.tsx

@@ -0,0 +1,343 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Compass } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@signozhq/ui/select';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	QuerySearchV2Provider,
+	useExpression,
+	useInputExpression,
+	useQuerySearchInitialExpressionProp,
+	useQuerySearchOnChange,
+	useQuerySearchOnRun,
+	useUserExpression,
+} from 'components/QueryBuilderV2';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
+import { validateQuery } from 'utils/queryValidationUtils';
+
+import { getEntityConfig } from '../../Base/entity.registry';
+import { logInfraExplorerNavigatedEvent } from '../../Base/events';
+import {
+	buildRelatedFilterClauses,
+	EntityAttributes,
+	formatRelatedFilterClause,
+	RelatedFilterClause,
+	getEntityNameAttributeKey,
+	getRelatedCategories,
+	resolveRelatedCategory,
+} from '../../Base/relations';
+import { getDrawerDurationMs } from '../../Base/useDrawerLifecycleStore';
+import { buildK8sListNavigationUrl } from '../../Base/utils';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+	K8S_CATEGORY_LABELS,
+	K8S_CATEGORY_SINGULAR_LABELS,
+	METRIC_NAMESPACE_BY_ENTITY,
+	VIEW_TYPES,
+} from '../../constants';
+import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
+import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
+import { logInfraDrawerFilterCustomizedEvent } from '../events';
+import { RelatedEntitiesTable } from './RelatedEntitiesTable';
+import { ScopeChip } from './ScopeChip';
+import { useCarriedOverFilters } from './useCarriedOverFilters';
+import { useRelatedEntities } from './useRelatedEntities';
+
+import styles from './EntityOverview.module.scss';
+
+export interface EntityOverviewProps {
+	category: InfraMonitoringEntity;
+	eventEntity: string;
+	/** The drawer entity's own attributes, which scope every related query */
+	attributes: EntityAttributes;
+	/** The drawer's own record and query prefix, so a row click can leave a
+	 * trail that steps back without fetching again */
+	entity: unknown;
+	entityName: string;
+	queryKeyPrefix: string;
+}
+
+interface ContentProps extends EntityOverviewProps {
+	targetCategory: InfraMonitoringEntity;
+	lockedExpression: string;
+	lockedClauses: RelatedFilterClause[];
+	onCategoryChange: (category: string) => void;
+}
+
+function EntityOverviewContent({
+	category,
+	eventEntity,
+	attributes,
+	entity,
+	entityName,
+	queryKeyPrefix,
+	targetCategory,
+	lockedExpression,
+	lockedClauses,
+	onCategoryChange,
+}: ContentProps): JSX.Element | null {
+	const { timeRange } = useEntityDetailsTime();
+	const expression = useExpression();
+	const userExpression = useUserExpression();
+	const inputExpression = useInputExpression();
+	const querySearchOnChange = useQuerySearchOnChange();
+	const querySearchOnRun = useQuerySearchOnRun();
+	const querySearchInitialExpressionProp = useQuerySearchInitialExpressionProp();
+
+	const targetConfig = getEntityConfig(targetCategory);
+
+	useCarriedOverFilters(targetCategory);
+
+	const {
+		records,
+		total,
+		isLoading,
+		isFetching,
+		isError,
+		error,
+		endTimeBeforeRetention,
+		setPage,
+		setLimit,
+		refetch,
+		cancel,
+	} = useRelatedEntities({
+		fetchListData: targetConfig?.list.fetchListData,
+		queryKey: `${targetCategory}RelatedEntities`,
+		expression,
+		timeRange,
+	});
+
+	// The editor holds only what the user typed; the locked scope is shown beside it
+	const queryData = useMemo(
+		(): IBuilderQuery =>
+			({
+				aggregateOperator: 'noop',
+				filter: { expression: userExpression },
+			}) as IBuilderQuery,
+		[userExpression],
+	);
+
+	const handleCategoryChange = useCallback(
+		(value: string | string[]): void => {
+			if (typeof value === 'string') {
+				onCategoryChange(value);
+			}
+		},
+		[onCategoryChange],
+	);
+
+	const handleRunQuery = useCallback(
+		(updatedExpression?: string): void => {
+			const newUserExpression = updatedExpression
+				? getUserExpressionFromCombined(lockedExpression, updatedExpression)
+				: inputExpression;
+
+			const validation = validateQuery(
+				combineInitialAndUserExpression(lockedExpression, newUserExpression || ''),
+			);
+
+			if (!validation.isValid) {
+				return;
+			}
+
+			querySearchOnRun(newUserExpression);
+			logInfraDrawerFilterCustomizedEvent(
+				category,
+				VIEW_TYPES.OVERVIEW,
+				newUserExpression || '',
+				'search',
+			);
+			refetch();
+		},
+		[lockedExpression, inputExpression, querySearchOnRun, category, refetch],
+	);
+
+	const handleNavigate = useCallback((): void => {
+		logInfraExplorerNavigatedEvent({
+			entityType: category,
+			destination: 'k8s_list',
+			source: 'overview_cta',
+			tab: VIEW_TYPES.OVERVIEW,
+			sourceKey: targetCategory,
+			drawerDurationMsAtNavigation: getDrawerDurationMs(),
+		});
+
+		openInNewTab(buildK8sListNavigationUrl(targetCategory, expression));
+	}, [category, targetCategory, expression]);
+
+	if (!targetConfig) {
+		return null;
+	}
+
+	const targetLabel = K8S_CATEGORY_LABELS[targetCategory];
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.controls}>
+				<EntityDateTimeSelector
+					eventEntity={eventEntity}
+					category={category}
+					view={VIEW_TYPES.OVERVIEW}
+				/>
+
+				<RunQueryBtn
+					isLoadingQueries={isFetching}
+					onStageRunQuery={(): void => handleRunQuery()}
+					handleCancelQuery={cancel}
+				/>
+			</div>
+
+			<div className={styles.filterRow}>
+				<ScopeChip clauses={lockedClauses} expression={lockedExpression} />
+
+				<div className={styles.filterInput}>
+					<QuerySearch
+						queryData={queryData}
+						dataSource={DataSource.METRICS}
+						onChange={querySearchOnChange}
+						onRun={handleRunQuery}
+						signalSource=""
+						showFilterSuggestionsWithoutMetric
+						placeholder={`Filter these ${targetLabel.toLowerCase()}`}
+						metricNamespace={METRIC_NAMESPACE_BY_ENTITY[targetCategory]}
+						initialExpression={querySearchInitialExpressionProp}
+					/>
+				</div>
+			</div>
+
+			<RelatedEntitiesTable
+				key={targetCategory}
+				targetCategory={targetCategory}
+				header={
+					<div className={styles.resourcePicker}>
+						<Typography.Text color="muted" size="small">
+							Showing
+						</Typography.Text>
+
+						<Select value={targetCategory} onChange={handleCategoryChange}>
+							<SelectTrigger
+								className={styles.resourceTrigger}
+								data-testid="overview-resource-select"
+							>
+								<SelectValue>{targetLabel}</SelectValue>
+							</SelectTrigger>
+							{/* The drawer sits at z-index 50 and select content ships without one */}
+							<SelectContent className={styles.resourceOptions}>
+								{getRelatedCategories(category, attributes).map((relatedCategory) => (
+									<SelectItem
+										key={relatedCategory}
+										value={relatedCategory}
+										testId={`overview-resource-option-${relatedCategory}`}
+									>
+										{K8S_CATEGORY_LABELS[relatedCategory]}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+
+						<TooltipSimple
+							title={`View on ${targetLabel.toLowerCase()} page`}
+							side="top"
+							arrow
+						>
+							<Button
+								variant="ghost"
+								size="icon"
+								color="secondary"
+								onClick={handleNavigate}
+								data-testid="overview-view-on-list-page"
+								prefix={<Compass size={16} />}
+							/>
+						</TooltipSimple>
+					</div>
+				}
+				listConfig={targetConfig.list}
+				records={records}
+				total={total}
+				isLoading={isLoading}
+				isError={isError}
+				error={error}
+				endTimeBeforeRetention={endTimeBeforeRetention}
+				source={{ category, label: entityName, entity, queryKeyPrefix }}
+				onPageChange={setPage}
+				onLimitChange={setLimit}
+			/>
+		</div>
+	);
+}
+
+export default function EntityOverview(
+	props: EntityOverviewProps,
+): JSX.Element | null {
+	const { category, attributes } = props;
+
+	// Tied to the resource it was picked on, so another drawer starts at its
+	// own default instead of inheriting the last pick
+	const [selection, setSelection] = useState<{
+		identity: string;
+		category: string;
+	} | null>(null);
+
+	const identity = `${category}:${
+		attributes[getEntityNameAttributeKey(category)] ?? ''
+	}`;
+
+	const targetCategory = resolveRelatedCategory(
+		category,
+		attributes,
+		selection?.identity === identity ? selection.category : null,
+	);
+
+	const handleCategoryChange = useCallback(
+		(value: string): void => setSelection({ identity, category: value }),
+		[identity],
+	);
+
+	const lockedClauses = targetCategory
+		? buildRelatedFilterClauses(category, targetCategory, attributes)
+		: [];
+	const lockedExpression = lockedClauses
+		.map(formatRelatedFilterClause)
+		.join(' AND ');
+
+	if (!targetCategory) {
+		return (
+			<div className={styles.noRelations}>
+				<Typography.Text color="muted">
+					{`Nothing related to this ${K8S_CATEGORY_SINGULAR_LABELS[category]} was reported in this time range.`}
+				</Typography.Text>
+			</div>
+		);
+	}
+
+	return (
+		<QuerySearchV2Provider
+			queryParamKey={INFRA_MONITORING_K8S_PARAMS_KEYS.OVERVIEW_EXPRESSION}
+			initialExpression={lockedExpression}
+		>
+			<EntityOverviewContent
+				{...props}
+				targetCategory={targetCategory}
+				lockedExpression={lockedExpression}
+				lockedClauses={lockedClauses}
+				onCategoryChange={handleCategoryChange}
+			/>
+		</QuerySearchV2Provider>
+	);
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/RelatedEntitiesTable.tsx

@@ -0,0 +1,142 @@
+import { ReactNode, useCallback } from 'react';
+import cx from 'classnames';
+import TanStackTable from 'components/TanStackTableView';
+import APIError from 'types/api/error';
+
+import {
+	K8sEntityData,
+	K8sEntityListConfig,
+} from '../../Base/entity.config.types';
+import { K8sEmptyState } from '../../Base/K8sEmptyState';
+import {
+	DrawerHistoryEntry,
+	useDrawerHistoryStore,
+} from '../../Base/useDrawerHistoryStore';
+import {
+	useInfraMonitoringFontSize,
+	useInfraMonitoringLineClamp,
+} from '../../Base/useInfraMonitoringTablePreferencesStore';
+import { InfraMonitoringEntity, K8S_CATEGORY_LABELS } from '../../constants';
+import {
+	SelectedItemParams,
+	useInfraMonitoringSelectedItemParams,
+} from '../../hooks';
+import { usePrimeEntityDetails } from '../../Base/usePrimeEntityDetails';
+import { RELATED_ENTITIES_PAGE_SIZE } from './useRelatedEntities';
+
+import listStyles from '../../Base/K8sBaseList.module.scss';
+import styles from './EntityOverview.module.scss';
+
+interface RelatedEntitiesTableProps {
+	targetCategory: InfraMonitoringEntity;
+	listConfig: K8sEntityListConfig<K8sEntityData, string | SelectedItemParams>;
+	records: K8sEntityData[];
+	total: number;
+	isLoading: boolean;
+	isError: boolean;
+	error?: APIError | null;
+	endTimeBeforeRetention?: boolean;
+	onPageChange: (page: number) => void;
+	onLimitChange: (limit: number) => void;
+	/** Rendered in the card's header strip, above the rows it describes */
+	header: ReactNode;
+	/** The drawer's own resource, so a row click can leave a trail back to it */
+	source: Omit<DrawerHistoryEntry, 'params'>;
+}
+
+export function RelatedEntitiesTable({
+	targetCategory,
+	listConfig,
+	records,
+	total,
+	isLoading,
+	isError,
+	error,
+	endTimeBeforeRetention,
+	onPageChange,
+	onLimitChange,
+	header,
+	source,
+}: RelatedEntitiesTableProps): JSX.Element {
+	const [selectedItemParams, setSelectedItemParams] =
+		useInfraMonitoringSelectedItemParams();
+	const pushDrawerHistory = useDrawerHistoryStore((store) => store.push);
+	const primeDetails = usePrimeEntityDetails();
+	const lineClamp = useInfraMonitoringLineClamp();
+	const fontSize = useInfraMonitoringFontSize();
+
+	// Opens the clicked resource in its own drawer, overview tab included
+	const handleRowClick = useCallback(
+		(record: K8sEntityData, itemKey: string | SelectedItemParams): void => {
+			const params: SelectedItemParams =
+				typeof itemKey === 'object'
+					? itemKey
+					: { selectedItem: itemKey, clusterName: null, namespaceName: null };
+
+			pushDrawerHistory({ ...source, params: selectedItemParams });
+
+			// The row already carries the record the drawer is about to fetch
+			primeDetails({
+				params,
+				queryKeyPrefix: listConfig.detailsQueryKeyPrefix,
+				entity: record,
+			});
+			setSelectedItemParams({ ...params, category: targetCategory });
+		},
+		[
+			primeDetails,
+			pushDrawerHistory,
+			selectedItemParams,
+			source,
+			setSelectedItemParams,
+			targetCategory,
+			listConfig.detailsQueryKeyPrefix,
+		],
+	);
+
+	const isEmpty = !isLoading && records.length === 0;
+
+	return (
+		<div className={styles.tableCard}>
+			<div className={styles.tableHeader}>{header}</div>
+
+			{isEmpty ? (
+				<div className={styles.emptyState}>
+					<K8sEmptyState
+						isError={isError}
+						error={error}
+						isLoading={isLoading}
+						endTimeBeforeRetention={endTimeBeforeRetention}
+					/>
+				</div>
+			) : (
+				<TanStackTable<K8sEntityData, string | SelectedItemParams>
+					data={records}
+					columns={listConfig.tableColumns}
+					columnStorageKey={`k8s-overview-${targetCategory}-columns`}
+					isLoading={isLoading}
+					getRowKey={listConfig.getRowKey}
+					getItemKey={listConfig.getItemKey}
+					onRowClick={handleRowClick}
+					className={cx(listStyles.k8SListTable, styles.table)}
+					testId={`related-entities-table-${targetCategory}`}
+					// A page of rows is short enough to render whole, which keeps the card
+					// at the height of its rows instead of stretching down the drawer
+					disableVirtualScroll
+					pagination={{
+						total,
+						defaultLimit: RELATED_ENTITIES_PAGE_SIZE,
+						showTotalCount: true,
+						totalCountLabel: K8S_CATEGORY_LABELS[targetCategory],
+						onPageChange,
+						onLimitChange,
+					}}
+					plainTextCellLineClamp={lineClamp}
+					cellTypographySize={fontSize}
+					paginationClassname={listStyles.paginationContainer}
+					resetScrollKey={targetCategory}
+				/>
+			)}
+		</div>
+	);
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/ScopeChip.tsx

@@ -0,0 +1,42 @@
+import { Lock } from '@signozhq/icons';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+
+import { RelatedFilterClause } from '../../Base/relations';
+
+import styles from './EntityOverview.module.scss';
+
+interface ScopeChipProps {
+	clauses: RelatedFilterClause[];
+	/** The clauses as one expression, shown in full on hover */
+	expression: string;
+}
+
+/**
+ * The locked half of the filter. It reads like the editor beside it: the last
+ * clause carries the relation, the ones scoping it are counted instead.
+ */
+export function ScopeChip({
+	clauses,
+	expression,
+}: ScopeChipProps): JSX.Element {
+	const relation = clauses[clauses.length - 1];
+
+	return (
+		<TooltipSimple title={expression} side="top" arrow>
+			<span className={styles.scopeChip} data-testid="overview-locked-scope">
+				<Lock size={12} />
+				<span className={styles.scopeExpression}>
+					<span className={styles.scopeKey}>{relation.key}</span>
+					<span className={styles.scopeOperator}> = </span>
+					<span className={styles.scopeValue}>
+						{formatValueForExpression(relation.value)}
+					</span>
+				</span>
+				{clauses.length > 1 && (
+					<span className={styles.scopeMore}>{`+${clauses.length - 1}`}</span>
+				)}
+			</span>
+		</TooltipSimple>
+	);
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/__tests__/EntityOverview.test.tsx

@@ -0,0 +1,242 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NuqsTestingAdapter, OnUrlUpdateFunction } from 'nuqs/adapters/testing';
+
+import { TableColumnDef } from 'components/TanStackTableView';
+
+import { InfraMonitoringEntity } from '../../../constants';
+import EntityOverview from '../EntityOverview';
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="mock-datetime" />,
+}));
+
+const mockQuerySearchProps = jest.fn();
+
+jest.mock('components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch', () => ({
+	__esModule: true,
+	default: (props: {
+		queryData?: { filter?: { expression?: string } };
+		initialExpression?: string;
+	}): JSX.Element => {
+		mockQuerySearchProps(props);
+		return <div data-testid="mock-query-search" />;
+	},
+}));
+
+type TestRecord = { name: string; meta?: Record<string, string> | null };
+
+const mockFetchListData = jest.fn();
+
+const mockTableColumns: TableColumnDef<TestRecord>[] = [
+	{
+		id: 'name',
+		header: 'Name',
+		accessorKey: 'name',
+		cell: ({ value }): string => String(value),
+	},
+];
+
+jest.mock('../../../Base/entity.registry', () => ({
+	getEntityConfig: (category: string) => ({
+		list: {
+			entity: category,
+			tableColumns: mockTableColumns,
+			fetchListData: mockFetchListData,
+			getRowKey: (record: TestRecord): string => record.name,
+			getItemKey: (record: TestRecord): string => record.name,
+		},
+	}),
+}));
+
+const NODE_ATTRIBUTES = {
+	'k8s.node.name': 'node-1',
+	'k8s.cluster.name': 'prod',
+};
+
+const LOCKED_EXPRESSION =
+	"k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'";
+
+interface RenderOptions {
+	onUrlUpdate?: OnUrlUpdateFunction;
+	attributes?: Record<string, string>;
+}
+
+function overviewTree(
+	attributes: Record<string, string>,
+	queryClient: QueryClient,
+	onUrlUpdate?: OnUrlUpdateFunction,
+): JSX.Element {
+	return (
+		<MemoryRouter>
+			<QueryClientProvider client={queryClient}>
+				<NuqsTestingAdapter onUrlUpdate={onUrlUpdate}>
+					<VirtuosoMockContext.Provider
+						value={{ viewportHeight: 800, itemHeight: 50 }}
+					>
+						<TooltipProvider>
+							<EntityOverview
+								category={InfraMonitoringEntity.NODES}
+								eventEntity="node"
+								attributes={attributes}
+								entity={{ nodeName: attributes['k8s.node.name'] }}
+								entityName={attributes['k8s.node.name']}
+								queryKeyPrefix="node"
+							/>
+						</TooltipProvider>
+					</VirtuosoMockContext.Provider>
+				</NuqsTestingAdapter>
+			</QueryClientProvider>
+		</MemoryRouter>
+	);
+}
+
+function renderOverview({
+	onUrlUpdate,
+	attributes = NODE_ATTRIBUTES,
+}: RenderOptions = {}): {
+	openAnotherResource: (next: Record<string, string>) => void;
+} {
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+
+	const { rerender } = render(
+		overviewTree(attributes, queryClient, onUrlUpdate),
+	);
+
+	return {
+		openAnotherResource: (next): void =>
+			rerender(overviewTree(next, queryClient, onUrlUpdate)),
+	};
+}
+
+describe('EntityOverview', () => {
+	beforeEach(() => {
+		mockQuerySearchProps.mockReset();
+		mockFetchListData.mockReset();
+		mockFetchListData.mockResolvedValue({
+			type: 'list',
+			records: [{ name: 'pod-1' }],
+			total: 1,
+		});
+	});
+
+	it('lists the first related resource scoped by the locked expression', async () => {
+		renderOverview();
+
+		await waitFor(() => {
+			expect(mockFetchListData).toHaveBeenCalled();
+		});
+
+		expect(mockFetchListData.mock.calls[0][0].filter.expression).toBe(
+			LOCKED_EXPRESSION,
+		);
+		await expect(
+			screen.findByTestId('related-entities-table-pods'),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('keeps the locked scope out of the editable filter', async () => {
+		renderOverview();
+
+		// The chip leads with the relation and counts the scope behind it
+		const chip = await screen.findByTestId('overview-locked-scope');
+		expect(chip).toHaveTextContent("k8s.node.name = 'node-1'");
+		expect(chip).toHaveTextContent('+1');
+
+		// The editor is handed the user's own expression, never the locked scope
+		const lastProps = mockQuerySearchProps.mock.calls.at(-1)?.[0];
+		expect(lastProps.queryData.filter.expression).toBe('');
+		expect(lastProps.initialExpression).toBe(LOCKED_EXPRESSION);
+	});
+
+	it('opens the clicked resource in its own drawer', async () => {
+		const user = userEvent.setup();
+		const onUrlUpdate = jest.fn();
+
+		renderOverview({ onUrlUpdate });
+
+		const row = await screen.findByText('pod-1');
+		await user.click(row);
+
+		await waitFor(() => {
+			const params = onUrlUpdate.mock.calls.map((call) => call[0].searchParams);
+			expect(
+				params.some(
+					(searchParams) =>
+						searchParams.get('selectedItem') === 'pod-1' &&
+						searchParams.get('selectedItemCategory') === 'pods',
+				),
+			).toBe(true);
+		});
+	});
+
+	it("forgets the previous drawer's resource when another one opens", async () => {
+		const user = userEvent.setup();
+
+		const { openAnotherResource } = renderOverview();
+
+		await user.click(screen.getByTestId('overview-resource-select'));
+		await user.click(
+			await screen.findByTestId('overview-resource-option-containers'),
+		);
+		await expect(
+			screen.findByTestId('related-entities-table-containers'),
+		).resolves.toBeInTheDocument();
+
+		openAnotherResource({ ...NODE_ATTRIBUTES, 'k8s.node.name': 'node-2' });
+
+		// Back to pods, this node's default, rather than the containers just picked
+		await expect(
+			screen.findByTestId('related-entities-table-pods'),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('says so when the resource relates to nothing', async () => {
+		renderOverview({ attributes: { 'os.type': 'linux' } });
+
+		await expect(
+			screen.findByText(/Nothing related to this Node/),
+		).resolves.toBeInTheDocument();
+		expect(mockFetchListData).not.toHaveBeenCalled();
+	});
+
+	it('switches the listed resource from the dropdown', async () => {
+		const user = userEvent.setup();
+
+		renderOverview();
+
+		await waitFor(() => {
+			expect(mockFetchListData).toHaveBeenCalled();
+		});
+
+		await user.click(screen.getByTestId('overview-resource-select'));
+
+		// Every resource related to a node is offered, the listed one included
+		await expect(
+			screen.findByTestId('overview-resource-option-pods'),
+		).resolves.toBeInTheDocument();
+
+		await user.click(
+			await screen.findByTestId('overview-resource-option-containers'),
+		);
+
+		await expect(
+			screen.findByTestId('related-entities-table-containers'),
+		).resolves.toBeInTheDocument();
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/useCarriedOverFilters.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from 'react';
+import { useQuerySearchOnRun } from 'components/QueryBuilderV2';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { parseAsString, useQueryState } from 'nuqs';
+
+import { carryOverListFilters } from '../../Base/relations';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../../constants';
+
+/**
+ * Seeds the editable half of the filter with whatever the list page was
+ * filtered by, reduced to the clauses the listed resource understands. Runs
+ * once per resource, so it never overwrites what the user types, and stands
+ * aside for a drawer opened from a link that already carries a filter.
+ */
+export function useCarriedOverFilters(
+	targetCategory: InfraMonitoringEntity,
+): void {
+	const { currentQuery } = useQueryBuilder();
+	const listExpression =
+		currentQuery.builder.queryData[0]?.filter?.expression || '';
+	const querySearchOnRun = useQuerySearchOnRun();
+
+	const [urlExpression] = useQueryState(
+		INFRA_MONITORING_K8S_PARAMS_KEYS.OVERVIEW_EXPRESSION,
+		parseAsString,
+	);
+
+	const seededFor = useRef<string | null>(null);
+	const hadUrlExpressionOnMount = useRef<boolean | null>(null);
+	if (hadUrlExpressionOnMount.current === null) {
+		hadUrlExpressionOnMount.current = !!urlExpression;
+	}
+
+	useEffect(() => {
+		if (seededFor.current === targetCategory) {
+			return;
+		}
+
+		const isFirstResource = seededFor.current === null;
+		seededFor.current = targetCategory;
+
+		if (isFirstResource && hadUrlExpressionOnMount.current) {
+			return;
+		}
+
+		querySearchOnRun(carryOverListFilters(listExpression, targetCategory));
+	}, [targetCategory, listExpression, querySearchOnRun]);
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/useRelatedEntities.ts

@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery, useQueryClient } from 'react-query';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import APIError from 'types/api/error';
+
+import {
+	K8sEntityData,
+	K8sEntityListConfig,
+} from '../../Base/entity.config.types';
+import { SelectedItemParams } from '../../hooks';
+
+type FetchRelatedEntities = K8sEntityListConfig<
+	K8sEntityData,
+	string | SelectedItemParams
+>['fetchListData'];
+
+interface UseRelatedEntitiesParams {
+	/** Absent while the target category is still unresolved; the query stays idle */
+	fetchListData?: FetchRelatedEntities;
+	queryKey: string;
+	expression: string;
+	/** Time range in seconds — see useEntityDetailsTime */
+	timeRange: { startTime: number; endTime: number };
+}
+
+interface UseRelatedEntitiesResult {
+	records: K8sEntityData[];
+	total: number;
+	page: number;
+	limit: number;
+	setPage: (page: number) => void;
+	setLimit: (limit: number) => void;
+	isLoading: boolean;
+	isFetching: boolean;
+	isError: boolean;
+	error?: APIError | null;
+	endTimeBeforeRetention?: boolean;
+	refetch: () => void;
+	cancel: () => void;
+}
+
+export const RELATED_ENTITIES_PAGE_SIZE = 10;
+
+const SECOND_IN_MS = 1000;
+
+export function useRelatedEntities({
+	fetchListData,
+	queryKey,
+	expression,
+	timeRange,
+}: UseRelatedEntitiesParams): UseRelatedEntitiesResult {
+	const queryClient = useQueryClient();
+	const [page, setPage] = useState(1);
+	const [limit, setLimit] = useState(RELATED_ENTITIES_PAGE_SIZE);
+
+	useEffect(() => {
+		setPage(1);
+	}, [expression, queryKey]);
+
+	const reactQueryKey = useMemo(
+		() => [
+			REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
+			queryKey,
+			timeRange.startTime,
+			timeRange.endTime,
+			expression,
+			page,
+			limit,
+		],
+		[queryKey, timeRange.startTime, timeRange.endTime, expression, page, limit],
+	);
+
+	const { data, isLoading, isFetching, isError, refetch } = useQuery({
+		queryKey: reactQueryKey,
+		queryFn: ({ signal }) =>
+			(fetchListData as FetchRelatedEntities)(
+				{
+					filter: { expression },
+					offset: (page - 1) * limit,
+					limit,
+					// The list APIs take milliseconds, useEntityDetailsTime gives seconds
+					start: timeRange.startTime * SECOND_IN_MS,
+					end: timeRange.endTime * SECOND_IN_MS,
+				},
+				signal,
+			),
+		enabled: !!fetchListData && !!expression.trim(),
+	});
+
+	const cancel = useCallback((): void => {
+		void queryClient.cancelQueries({ queryKey: reactQueryKey });
+	}, [queryClient, reactQueryKey]);
+
+	const handleRefetch = useCallback((): void => {
+		void refetch();
+	}, [refetch]);
+
+	return {
+		records: data?.records ?? data?.data ?? [],
+		total: data?.total ?? 0,
+		page,
+		limit,
+		setPage,
+		setLimit,
+		isLoading,
+		isFetching,
+		isError,
+		error: data?.error,
+		endTimeBeforeRetention: data?.endTimeBeforeRetention,
+		refetch: handleRefetch,
+		cancel,
+	};
+}