fix: refactor

<!--A few plain bullets saying what changed and why, for a reviewer
skimming it - not a wall of text, not a restatement of the diff, not
generated boilerplate.-->
#### Description

The issue seems to be caused by a weird race-condition that makes the
`AnimatePresence` context to be undefined, causing the `usePresence` to
crash.

The `motion/react-client` is meant to be used only by server components
of next.js, so updating the imports is safe and should fix the issue.

<!--Reference issues using `Closes #issue-number` to enable automatic
closure on merge. -->
#### Issues closed by this PR

Closes https://github.com/SigNoz/engineering-pod/issues/5957

.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

.gitignore

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

docs/api/openapi.yml

@@ -5099,6 +5099,220 @@ components:
       required:
       - config
       type: object
+    GenaiBlobPart:
+      properties:
+        content:
+          type: string
+        mime_type:
+          nullable: true
+          type: string
+        modality:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - modality
+      - content
+      type: object
+    GenaiChatMessage:
+      properties:
+        name:
+          nullable: true
+          type: string
+        parts:
+          $ref: '#/components/schemas/GenaiParts'
+        role:
+          type: string
+      required:
+      - role
+      - parts
+      type: object
+    GenaiCompactionPart:
+      properties:
+        content:
+          nullable: true
+          type: string
+        id:
+          nullable: true
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      type: object
+    GenaiFilePart:
+      properties:
+        file_id:
+          type: string
+        mime_type:
+          nullable: true
+          type: string
+        modality:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - modality
+      - file_id
+      type: object
+    GenaiGenericPart:
+      additionalProperties: {}
+      type: object
+    GenaiGenericServerToolCall:
+      additionalProperties: {}
+      type: object
+    GenaiGenericServerToolCallResponse:
+      additionalProperties: {}
+      type: object
+    GenaiInputMessages:
+      items:
+        $ref: '#/components/schemas/GenaiChatMessage'
+      type: array
+    GenaiOutputMessage:
+      properties:
+        finish_reason:
+          nullable: true
+          type: string
+        name:
+          nullable: true
+          type: string
+        parts:
+          $ref: '#/components/schemas/GenaiParts'
+        role:
+          type: string
+      required:
+      - role
+      - parts
+      type: object
+    GenaiOutputMessages:
+      items:
+        $ref: '#/components/schemas/GenaiOutputMessage'
+      type: array
+    GenaiPart:
+      discriminator:
+        mapping:
+          blob: '#/components/schemas/GenaiBlobPart'
+          compaction: '#/components/schemas/GenaiCompactionPart'
+          file: '#/components/schemas/GenaiFilePart'
+          reasoning: '#/components/schemas/GenaiReasoningPart'
+          server_tool_call: '#/components/schemas/GenaiServerToolCallPart'
+          server_tool_call_response: '#/components/schemas/GenaiServerToolCallResponsePart'
+          text: '#/components/schemas/GenaiTextPart'
+          tool_call: '#/components/schemas/GenaiToolCallRequestPart'
+          tool_call_response: '#/components/schemas/GenaiToolCallResponsePart'
+          uri: '#/components/schemas/GenaiUriPart'
+        propertyName: type
+      oneOf:
+      - $ref: '#/components/schemas/GenaiTextPart'
+      - $ref: '#/components/schemas/GenaiToolCallRequestPart'
+      - $ref: '#/components/schemas/GenaiToolCallResponsePart'
+      - $ref: '#/components/schemas/GenaiServerToolCallPart'
+      - $ref: '#/components/schemas/GenaiServerToolCallResponsePart'
+      - $ref: '#/components/schemas/GenaiBlobPart'
+      - $ref: '#/components/schemas/GenaiFilePart'
+      - $ref: '#/components/schemas/GenaiUriPart'
+      - $ref: '#/components/schemas/GenaiReasoningPart'
+      - $ref: '#/components/schemas/GenaiCompactionPart'
+      - $ref: '#/components/schemas/GenaiGenericPart'
+      type: object
+    GenaiParts:
+      items:
+        $ref: '#/components/schemas/GenaiPart'
+      type: array
+    GenaiReasoningPart:
+      properties:
+        content:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - content
+      type: object
+    GenaiServerToolCallPart:
+      properties:
+        id:
+          nullable: true
+          type: string
+        name:
+          type: string
+        server_tool_call:
+          $ref: '#/components/schemas/GenaiGenericServerToolCall'
+        type:
+          type: string
+      required:
+      - type
+      - name
+      - server_tool_call
+      type: object
+    GenaiServerToolCallResponsePart:
+      properties:
+        id:
+          nullable: true
+          type: string
+        server_tool_call_response:
+          $ref: '#/components/schemas/GenaiGenericServerToolCallResponse'
+        type:
+          type: string
+      required:
+      - type
+      - server_tool_call_response
+      type: object
+    GenaiTextPart:
+      properties:
+        content:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - content
+      type: object
+    GenaiToolCallRequestPart:
+      properties:
+        arguments: {}
+        id:
+          nullable: true
+          type: string
+        name:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - name
+      type: object
+    GenaiToolCallResponsePart:
+      properties:
+        id:
+          nullable: true
+          type: string
+        response:
+          nullable: true
+        type:
+          type: string
+      required:
+      - type
+      - response
+      type: object
+    GenaiUriPart:
+      properties:
+        mime_type:
+          nullable: true
+          type: string
+        modality:
+          type: string
+        type:
+          type: string
+        uri:
+          type: string
+      required:
+      - type
+      - modality
+      - uri
+      type: object
     GlobaltypesAPIKeyConfig:
       properties:
         enabled:
@@ -10217,6 +10431,16 @@ components:
           items:
             $ref: '#/components/schemas/SpantypesEvent'
           type: array
+        formatted_input:
+          $ref: '#/components/schemas/GenaiInputMessages'
+        formatted_output:
+          $ref: '#/components/schemas/GenaiOutputMessages'
+        formatter:
+          type: string
+        formatter_warnings:
+          items:
+            type: string
+          type: array
         has_error:
           type: boolean
         kind_string:
@@ -10259,6 +10483,10 @@ components:
       - attributes
       - events
       - references
+      - formatted_input
+      - formatted_output
+      - formatter
+      - formatter_warnings
       type: object
     SpantypesTraceAISummary:
       properties:
@@ -16080,9 +16308,12 @@ paths:
   /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.
+      description: Returns the spans carrying gen_ai input or output messages, or
+        a tool execution, in timestamp order. Messages already in the OTel GenAI shape
+        are decoded into formatted_input and formatted_output, with formatter naming
+        the converter and formatter_warnings what it could not resolve. 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.

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/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 = Math.ceil(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/sigNoz.schemas.ts

@@ -6675,6 +6675,260 @@ export interface GatewaytypesUpdatableIngestionKeyLimitDTO {
 	tags?: string[] | null;
 }
 
+export enum GenaiBlobPartDTOType {
+	blob = 'blob',
+}
+export interface GenaiBlobPartDTO {
+	/**
+	 * @type string
+	 */
+	content: string;
+	/**
+	 * @type string,null
+	 */
+	mime_type?: string | null;
+	/**
+	 * @type string
+	 */
+	modality: string;
+	/**
+	 * @type string
+	 * @enum blob
+	 */
+	type: GenaiBlobPartDTOType;
+}
+
+export enum GenaiTextPartDTOType {
+	text = 'text',
+}
+export interface GenaiTextPartDTO {
+	/**
+	 * @type string
+	 */
+	content: string;
+	/**
+	 * @type string
+	 * @enum text
+	 */
+	type: GenaiTextPartDTOType;
+}
+
+export enum GenaiToolCallRequestPartDTOType {
+	tool_call = 'tool_call',
+}
+export interface GenaiToolCallRequestPartDTO {
+	arguments?: unknown;
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 * @enum tool_call
+	 */
+	type: GenaiToolCallRequestPartDTOType;
+}
+
+export enum GenaiToolCallResponsePartDTOType {
+	tool_call_response = 'tool_call_response',
+}
+export type GenaiToolCallResponsePartDTOResponse = unknown | null;
+
+export interface GenaiToolCallResponsePartDTO {
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @nullable true
+	 */
+	response: GenaiToolCallResponsePartDTOResponse;
+	/**
+	 * @type string
+	 * @enum tool_call_response
+	 */
+	type: GenaiToolCallResponsePartDTOType;
+}
+
+export interface GenaiGenericServerToolCallDTO {
+	[key: string]: unknown;
+}
+
+export enum GenaiServerToolCallPartDTOType {
+	server_tool_call = 'server_tool_call',
+}
+export interface GenaiServerToolCallPartDTO {
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @type string
+	 */
+	name: string;
+	server_tool_call: GenaiGenericServerToolCallDTO;
+	/**
+	 * @type string
+	 * @enum server_tool_call
+	 */
+	type: GenaiServerToolCallPartDTOType;
+}
+
+export interface GenaiGenericServerToolCallResponseDTO {
+	[key: string]: unknown;
+}
+
+export enum GenaiServerToolCallResponsePartDTOType {
+	server_tool_call_response = 'server_tool_call_response',
+}
+export interface GenaiServerToolCallResponsePartDTO {
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	server_tool_call_response: GenaiGenericServerToolCallResponseDTO;
+	/**
+	 * @type string
+	 * @enum server_tool_call_response
+	 */
+	type: GenaiServerToolCallResponsePartDTOType;
+}
+
+export enum GenaiFilePartDTOType {
+	file = 'file',
+}
+export interface GenaiFilePartDTO {
+	/**
+	 * @type string
+	 */
+	file_id: string;
+	/**
+	 * @type string,null
+	 */
+	mime_type?: string | null;
+	/**
+	 * @type string
+	 */
+	modality: string;
+	/**
+	 * @type string
+	 * @enum file
+	 */
+	type: GenaiFilePartDTOType;
+}
+
+export enum GenaiUriPartDTOType {
+	uri = 'uri',
+}
+export interface GenaiUriPartDTO {
+	/**
+	 * @type string,null
+	 */
+	mime_type?: string | null;
+	/**
+	 * @type string
+	 */
+	modality: string;
+	/**
+	 * @type string
+	 * @enum uri
+	 */
+	type: GenaiUriPartDTOType;
+	/**
+	 * @type string
+	 */
+	uri: string;
+}
+
+export enum GenaiReasoningPartDTOType {
+	reasoning = 'reasoning',
+}
+export interface GenaiReasoningPartDTO {
+	/**
+	 * @type string
+	 */
+	content: string;
+	/**
+	 * @type string
+	 * @enum reasoning
+	 */
+	type: GenaiReasoningPartDTOType;
+}
+
+export enum GenaiCompactionPartDTOType {
+	compaction = 'compaction',
+}
+export interface GenaiCompactionPartDTO {
+	/**
+	 * @type string,null
+	 */
+	content?: string | null;
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @type string
+	 * @enum compaction
+	 */
+	type: GenaiCompactionPartDTOType;
+}
+
+export interface GenaiGenericPartDTO {
+	[key: string]: unknown;
+}
+
+export type GenaiPartDTO =
+	| GenaiTextPartDTO
+	| GenaiToolCallRequestPartDTO
+	| GenaiToolCallResponsePartDTO
+	| GenaiServerToolCallPartDTO
+	| GenaiServerToolCallResponsePartDTO
+	| GenaiBlobPartDTO
+	| GenaiFilePartDTO
+	| GenaiUriPartDTO
+	| GenaiReasoningPartDTO
+	| GenaiCompactionPartDTO
+	| GenaiGenericPartDTO;
+
+export type GenaiPartsDTO = GenaiPartDTO[];
+
+export interface GenaiChatMessageDTO {
+	/**
+	 * @type string,null
+	 */
+	name?: string | null;
+	parts: GenaiPartsDTO;
+	/**
+	 * @type string
+	 */
+	role: string;
+}
+
+export type GenaiInputMessagesDTO = GenaiChatMessageDTO[];
+
+export interface GenaiOutputMessageDTO {
+	/**
+	 * @type string,null
+	 */
+	finish_reason?: string | null;
+	/**
+	 * @type string,null
+	 */
+	name?: string | null;
+	parts: GenaiPartsDTO;
+	/**
+	 * @type string
+	 */
+	role: string;
+}
+
+export type GenaiOutputMessagesDTO = GenaiOutputMessageDTO[];
+
 export interface GlobaltypesAPIKeyConfigDTO {
 	/**
 	 * @type boolean
@@ -11444,6 +11698,16 @@ export interface SpantypesThreadSpanDTO {
 	 * @type array
 	 */
 	events: SpantypesEventDTO[];
+	formatted_input: GenaiInputMessagesDTO;
+	formatted_output: GenaiOutputMessagesDTO;
+	/**
+	 * @type string
+	 */
+	formatter: string;
+	/**
+	 * @type array
+	 */
+	formatter_warnings: string[];
 	/**
 	 * @type boolean
 	 */

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

@@ -261,7 +261,7 @@ export const invalidateGetTraceSummary = async (
 };
 
 /**
- * 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.
+ * Returns the spans carrying gen_ai input or output messages, or a tool execution, in timestamp order. Messages already in the OTel GenAI shape are decoded into formatted_input and formatted_output, with formatter naming the converter and formatter_warnings what it could not resolve. 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 = (

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/container/Home/Home.tsx

@@ -32,8 +32,7 @@ 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';

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,
+	};
+}

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

@@ -2,7 +2,7 @@ import { Container } from '@signozhq/icons';
 import { InfraMonitoringEvents } from 'constants/events';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 
-import { CustomTab } from '../Base/K8sBaseDetails';
+import { CustomTab } from '../Base/types';
 import {
 	InfraMonitoringEntity,
 	podUtilizationByPodWidgetInfo,

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

@@ -26,7 +26,10 @@
 		overflow-y: auto;
 		padding: var(--spacing-8);
 		margin: 0;
-		min-width: 900px;
+		// On a 13" screen the drawer itself is narrower than 900px, and a flat
+		// minimum there clips the right edge of every tab
+		box-sizing: border-box;
+		min-width: min(900px, 100%);
 	}
 }
 
@@ -34,6 +37,29 @@
 	--button-padding: var(--spacing-2);
 }
 
+.backButton {
+	--button-padding: var(--spacing-2) var(--spacing-3);
+
+	flex: none;
+	white-space: nowrap;
+}
+
+// The kind reads as a label on the name, not as part of it
+.entityKind {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	flex: none;
+	padding: var(--spacing-1) var(--spacing-3);
+	border-radius: 2px;
+	background: var(--l3-background);
+	color: var(--l2-foreground);
+	font-size: 11px;
+	font-weight: 500;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+}
+
 .title {
 	font-family: var(--periscope-font-family-mono);
 

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

@@ -1,4 +1,7 @@
-import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import type {
+	InfraMonitoringEntity,
+	VIEWS,
+} from 'container/InfraMonitoringK8sV2/constants';
 import logEvent from 'api/common/logEvent';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 import { isCustomTimeRange } from 'store/globalTime';
@@ -15,7 +18,7 @@ export function logInfraDrawerTimeRangeCustomizedEvent(
 
 export function logInfraDrawerFilterCustomizedEvent(
 	entityType: InfraMonitoringEntity,
-	tab: 'metrics' | 'logs' | 'traces' | 'events' | 'pod_metrics',
+	tab: `${VIEWS}`,
 	expression: string,
 	filterSource: 'search' | 'logs',
 ): void {

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -12,23 +12,11 @@ import {
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import {
-	ArrowUpDown,
-	ArrowUpToLine,
-	Bolt,
-	Box,
-	Boxes,
-	Computer,
-	Container,
-	FilePenLine,
-	Filter,
-	Group,
-	HardDrive,
-	Workflow,
-} from '@signozhq/icons';
+import { ArrowUpToLine, Filter } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { CategoryIcon } from './Base/categoryIcons';
 import { K8sDynamicList } from './Base/K8sDynamicList';
 import {
 	GetClustersQuickFiltersConfig,
@@ -42,6 +30,7 @@ import {
 	GetStatefulsetsQuickFiltersConfig,
 	GetVolumesQuickFiltersConfig,
 	InfraMonitoringEntity,
+	K8S_CATEGORY_LABELS,
 	K8sCategories,
 	METRIC_NAMESPACE_BY_ENTITY,
 } from './constants';
@@ -156,62 +145,62 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		() => [
 			{
 				key: K8sCategories.CONTAINERS,
-				label: 'Containers',
-				icon: <Box size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.CONTAINERS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.CONTAINERS} />,
 				config: GetContainersQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.PODS,
-				label: 'Pods',
-				icon: <Container size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.PODS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.PODS} />,
 				config: GetPodsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.NODES,
-				label: 'Nodes',
-				icon: <Workflow size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.NODES],
+				icon: <CategoryIcon category={InfraMonitoringEntity.NODES} />,
 				config: GetNodesQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.NAMESPACES,
-				label: 'Namespaces',
-				icon: <FilePenLine size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.NAMESPACES],
+				icon: <CategoryIcon category={InfraMonitoringEntity.NAMESPACES} />,
 				config: GetNamespaceQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.CLUSTERS,
-				label: 'Clusters',
-				icon: <Boxes size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.CLUSTERS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.CLUSTERS} />,
 				config: GetClustersQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.DEPLOYMENTS,
-				label: 'Deployments',
-				icon: <Computer size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.DEPLOYMENTS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.DEPLOYMENTS} />,
 				config: GetDeploymentsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.JOBS,
-				label: 'Jobs',
-				icon: <Bolt size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.JOBS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.JOBS} />,
 				config: GetJobsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.DAEMONSETS,
-				label: 'DaemonSets',
-				icon: <Group size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.DAEMONSETS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.DAEMONSETS} />,
 				config: GetDaemonsetsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.STATEFULSETS,
-				label: 'StatefulSets',
-				icon: <ArrowUpDown size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.STATEFULSETS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.STATEFULSETS} />,
 				config: GetStatefulsetsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.VOLUMES,
-				label: 'Volumes',
-				icon: <HardDrive size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.VOLUMES],
+				icon: <CategoryIcon category={InfraMonitoringEntity.VOLUMES} />,
 				config: GetVolumesQuickFiltersConfig(),
 			},
 		],

frontend/src/container/InfraMonitoringK8sV2/Jobs/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/Jobs/entity.config.ts

@@ -132,6 +132,7 @@ export const jobEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.JOBS,
 		eventCategory: InfraMonitoringEvents.Job,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'job',
 		getSelectedItemExpression: k8sJobGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Namespaces/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 {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

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

@@ -143,6 +143,7 @@ export const namespaceEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.NAMESPACES,
 		eventCategory: InfraMonitoringEvents.Namespace,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'namespace',
 		getSelectedItemExpression: k8sNamespaceGetSelectedItemExpression,
 		fetchEntityData,

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

@@ -12,7 +12,7 @@ import {
 	buildLogsTracesExpression,
 } from 'container/InfraMonitoringK8sV2/Base/utils';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from '../Base/types';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import { SelectedItemParams } from '../hooks';
 

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

@@ -129,6 +129,7 @@ export const nodeEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.NODES,
 		eventCategory: InfraMonitoringEvents.Node,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'node',
 		getSelectedItemExpression: k8sNodeGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Pods/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 { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import {
 	buildEventsExpression,

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

@@ -121,6 +121,7 @@ export const podEntityConfig: K8sEntityConfig<InframonitoringtypesPodRecordDTO>
 		details: {
 			category: InfraMonitoringEntity.PODS,
 			eventCategory: InfraMonitoringEvents.Pod,
+			tabsConfig: { showOverview: true },
 			queryKeyPrefix: 'pod',
 			getSelectedItemExpression: k8sPodGetSelectedItemExpression,
 			fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/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/StatefulSets/entity.config.ts

@@ -132,6 +132,7 @@ export const statefulSetEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.STATEFULSETS,
 		eventCategory: InfraMonitoringEvents.StatefulSet,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'statefulSet',
 		getSelectedItemExpression: k8sStatefulSetGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/Volumes/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 { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {

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

@@ -127,6 +127,7 @@ export const volumeEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.VOLUMES,
 		eventCategory: InfraMonitoringEvents.Volume,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'volume',
 		getSelectedItemExpression: k8sVolumeGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/constants.ts

@@ -157,9 +157,11 @@ export enum VIEWS {
 	PROCESSES = 'processes',
 	EVENTS = 'events',
 	POD_METRICS = 'pod_metrics',
+	OVERVIEW = 'overview',
 }
 
 export const VIEW_TYPES = {
+	OVERVIEW: VIEWS.OVERVIEW,
 	METRICS: VIEWS.METRICS,
 	LOGS: VIEWS.LOGS,
 	TRACES: VIEWS.TRACES,
@@ -896,6 +898,41 @@ export const getInvalidValueTooltipText = (
 	attribute: string,
 ): string => `Some ${entity} do not have ${attribute}s.`;
 
+export const K8S_CATEGORY_LABELS: Record<InfraMonitoringEntity, string> = {
+	[InfraMonitoringEntity.HOSTS]: 'Hosts',
+	[InfraMonitoringEntity.PODS]: 'Pods',
+	[InfraMonitoringEntity.NODES]: 'Nodes',
+	[InfraMonitoringEntity.NAMESPACES]: 'Namespaces',
+	[InfraMonitoringEntity.CLUSTERS]: 'Clusters',
+	[InfraMonitoringEntity.DEPLOYMENTS]: 'Deployments',
+	[InfraMonitoringEntity.STATEFULSETS]: 'StatefulSets',
+	[InfraMonitoringEntity.DAEMONSETS]: 'DaemonSets',
+	[InfraMonitoringEntity.CONTAINERS]: 'Containers',
+	[InfraMonitoringEntity.JOBS]: 'Jobs',
+	[InfraMonitoringEntity.VOLUMES]: 'Volumes',
+};
+
+/**
+ * Used where one record is named, like the drawer's back control. Cased the
+ * same way as the plural labels, so StatefulSet keeps its capital.
+ */
+export const K8S_CATEGORY_SINGULAR_LABELS: Record<
+	InfraMonitoringEntity,
+	string
+> = {
+	[InfraMonitoringEntity.HOSTS]: 'Host',
+	[InfraMonitoringEntity.PODS]: 'Pod',
+	[InfraMonitoringEntity.NODES]: 'Node',
+	[InfraMonitoringEntity.NAMESPACES]: 'Namespace',
+	[InfraMonitoringEntity.CLUSTERS]: 'Cluster',
+	[InfraMonitoringEntity.DEPLOYMENTS]: 'Deployment',
+	[InfraMonitoringEntity.STATEFULSETS]: 'StatefulSet',
+	[InfraMonitoringEntity.DAEMONSETS]: 'DaemonSet',
+	[InfraMonitoringEntity.CONTAINERS]: 'Container',
+	[InfraMonitoringEntity.JOBS]: 'Job',
+	[InfraMonitoringEntity.VOLUMES]: 'Volume',
+};
+
 export const ENTITY_FILTER_PLACEHOLDERS: Record<InfraMonitoringEntity, string> =
 	{
 		[InfraMonitoringEntity.HOSTS]:
@@ -939,9 +976,11 @@ export const INFRA_MONITORING_K8S_PARAMS_KEYS = {
 	PAGE_SIZE: 'pageSize',
 	EXPANDED: 'expanded',
 	SELECTED_ITEM: 'selectedItem',
+	SELECTED_ITEM_CATEGORY: 'selectedItemCategory',
 	SELECTED_ITEM_CLUSTER_NAME: 'selectedItemClusterName',
 	SELECTED_ITEM_NAMESPACE_NAME: 'selectedItemNamespaceName',
 	SELECTED_ITEM_CONTAINER_NAME: 'selectedItemContainerName',
+	OVERVIEW_EXPRESSION: 'overviewExpression',
 	DETAIL_RELATIVE_TIME: 'detailRelativeTime',
 	DETAIL_START_TIME: 'detailStartTime',
 	DETAIL_END_TIME: 'detailEndTime',

frontend/src/container/InfraMonitoringK8sV2/hooks.ts

@@ -18,7 +18,6 @@ import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 import {
 	DEFAULT_K8S_CATEGORY,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	VIEWS,
 } from './constants';
 import { orderBySchema, OrderBySchemaType } from './schemas';
 
@@ -85,10 +84,13 @@ export const useInfraMonitoringGroupBy = (): UseQueryStateReturn<
 		parseAsGroupBy.withDefault([]).withOptions(defaultNuqsOptions),
 	);
 
-export const useInfraMonitoringView = (): UseQueryStateReturn<string, string> =>
+export const useInfraMonitoringView = (): UseQueryStateReturn<
+	string | null,
+	undefined
+> =>
 	useQueryState(
 		INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW,
-		parseAsString.withDefault(VIEWS.METRICS).withOptions(defaultNuqsOptions),
+		parseAsString.withOptions(defaultNuqsOptions),
 	);
 
 export const useInfraMonitoringLogFilters = (): UseQueryStateReturn<
@@ -137,6 +139,8 @@ export const useInfraMonitoringCategory = (): UseQueryStateReturn<
 
 export interface SelectedItemParams {
 	selectedItem: string | null;
+	/** Drawer category, when it differs from the list page category. */
+	category?: string | null;
 	clusterName?: string | null;
 	namespaceName?: string | null;
 	containerName?: string | null;
@@ -144,6 +148,7 @@ export interface SelectedItemParams {
 
 const selectedItemParamsParsers = {
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: parseAsString,
+	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY]: parseAsString,
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]: parseAsString,
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]: parseAsString,
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CONTAINER_NAME]: parseAsString,
@@ -165,6 +170,8 @@ export const useInfraMonitoringSelectedItemParams =
 			() => ({
 				selectedItem:
 					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM] ?? null,
+				category:
+					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY] ?? null,
 				clusterName:
 					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME] ??
 					null,
@@ -183,6 +190,7 @@ export const useInfraMonitoringSelectedItemParams =
 				if (newParams === null) {
 					void setRawParams({
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: null,
+						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY]: null,
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]: null,
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]: null,
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CONTAINER_NAME]: null,
@@ -193,6 +201,8 @@ export const useInfraMonitoringSelectedItemParams =
 				void setRawParams({
 					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]:
 						newParams.selectedItem ?? null,
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY]:
+						newParams.category ?? null,
 					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]:
 						newParams.clusterName ?? null,
 					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]:

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -24,6 +24,7 @@ export default function Legend({
 	focusedSeriesIndex,
 	onAction,
 	showCopy = true,
+	itemLabel = 'series',
 }: LegendProps): JSX.Element {
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
 	const [filterQuery, setFilterQuery] = useState('');
@@ -92,11 +93,12 @@ export default function Legend({
 					position={position}
 					filterQuery={filterQuery}
 					onFilterQueryChange={setFilterQuery}
+					itemLabel={itemLabel}
 				/>
 			)}
 			{isEmptyState ? (
 				<div className={styles.emptyState}>
-					No series found matching &quot;{effectiveQuery}&quot;
+					No {itemLabel} found matching &quot;{effectiveQuery}&quot;
 				</div>
 			) : (
 				<VirtuosoGrid

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.tsx

@@ -14,6 +14,7 @@ export interface LegendToolbarProps {
 	position: LegendPosition;
 	filterQuery: string;
 	onFilterQueryChange: (query: string) => void;
+	itemLabel: string;
 }
 
 /** Legend chrome: the series search box and the "Showing N of M" readout. */
@@ -23,6 +24,7 @@ export default function LegendToolbar({
 	position,
 	filterQuery,
 	onFilterQueryChange,
+	itemLabel,
 }: LegendToolbarProps): JSX.Element {
 	const handleFilterChange = useCallback(
 		(event: ChangeEvent<HTMLInputElement>): void =>
@@ -48,7 +50,7 @@ export default function LegendToolbar({
 			aria-live="polite"
 			data-testid="legend-status"
 		>
-			{`Showing ${visibleCount} of ${totalCount} series`}
+			{`Showing ${visibleCount} of ${totalCount} ${itemLabel}`}
 		</span>
 	);
 

frontend/src/lib/uPlotV2/components/types.ts

@@ -168,6 +168,8 @@ export interface LegendProps {
 	onAction: OnLegendAction;
 	/** Show the per-item copy button. Default true. */
 	showCopy?: boolean;
+	/** Plural noun for the items in the search readouts. Default 'series'. */
+	itemLabel?: string;
 }
 
 /** Props for the uPlot legend controller, which derives items + interaction

frontend/src/lib/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -63,20 +63,20 @@ export default function ChartWrapper({
 	);
 
 	const legendComponent = useCallback(
-		({ averageLegendWidth, showSearch }: LegendLayout): React.ReactNode => {
+		(layout: LegendLayout): React.ReactNode => {
 			if (!showLegend) {
 				return null;
 			}
 			// A pie's slices and a heatmap's groups are not uPlot series.
 			if (customLegend) {
-				return customLegend(averageLegendWidth);
+				return customLegend(layout);
 			}
 			return (
 				<UPlotLegend
 					config={config}
 					position={legendConfig.position}
-					averageLegendWidth={averageLegendWidth}
-					showSearch={showSearch}
+					averageLegendWidth={layout.averageLegendWidth}
+					showSearch={layout.showSearch}
 				/>
 			);
 		},

frontend/src/lib/visualization/charts/Heatmap/Heatmap.tsx

@@ -26,6 +26,7 @@ import {
 import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 import { HeatmapChartProps } from 'lib/visualization/charts/types';
+import type { LegendLayout } from 'lib/visualization/layout/ChartLayout/ChartLayout';
 import { useLegendVisibility } from 'lib/visualization/hooks/useLegendVisibility';
 import {
 	buildHeatmapConfig,
@@ -277,11 +278,13 @@ export default function Heatmap(props: HeatmapChartProps): JSX.Element {
 	}, []);
 
 	const groupLegend = useCallback(
-		(averageLegendWidth: number): React.ReactNode => (
+		({ averageLegendWidth, showSearch }: LegendLayout): React.ReactNode => (
 			<Legend
 				items={legendItems}
 				position={legendPosition}
 				averageLegendWidth={averageLegendWidth}
+				showSearch={showSearch}
+				itemLabel="groups"
 				focusedSeriesIndex={focusedSeriesIndex}
 				onAction={onLegendAction}
 			/>

frontend/src/lib/visualization/charts/types.ts

@@ -9,6 +9,7 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { LegendLayout } from 'lib/visualization/layout/ChartLayout/ChartLayout';
 import type {
 	HeatmapAxisScale,
 	HeatmapCell,
@@ -41,7 +42,7 @@ interface BaseChartProps {
 	tooltipPortalRoot?: HTMLElement | null;
 	/** Replaces the config-driven legend, for charts whose legend lists something
 	 *  other than uPlot series — heatmap groups, where the series are bucket rows. */
-	customLegend?: (averageLegendWidth: number) => React.ReactNode;
+	customLegend?: (layout: LegendLayout) => React.ReactNode;
 	/** Measured against for the chart/legend split. Pair with `customLegend`. */
 	legendLabels?: string[];
 	/** Rendered under the plot but above the legend, inside the chart column. */

frontend/src/storybook/README.md

@@ -524,3 +524,18 @@ without it the story re-renders the tree the previous walk left behind and the
 control looks dead. The endpoint that settles a transition between two steps then
 needs a plain resolver rather than `response.json`, or the Data control on
 `loading` strands the walk halfway.
+
+## Screenshots
+
+To check what a CSS or component change does before Chromatic runs on the PR,
+use [sbshot](https://github.com/SigNoz/sbshot). It shoots the stories, diffs two
+runs the way Chromatic does, and opens a viewer on the changes. From `frontend/`:
+
+```bash
+sbshot capture . --name-run before --title Pages/ --theme dark,light
+# make the change
+sbshot capture . --name-run after --title Pages/ --theme dark,light
+sbshot diff before after --ui
+```
+
+Output goes to `.sbshot/`, which is gitignored.

frontend/src/storybook/visual/settleForCapture.ts

@@ -21,7 +21,7 @@ const snapPinnedScrollers = (): void => {
 
 /**
  * Runs after the story's `play`, which is where both capture stacks take the
- * picture: Chromatic snapshots there, and `scripts/story-shots.mjs` waits for
+ * picture: Chromatic snapshots there, and sbshot waits for
  * the same render phase. Only what Chromatic cannot do for itself lives here -
  * it already pauses animations, videos and GIFs, and waits for the network to
  * go quiet.

pkg/apiserver/signozapiserver/tracedetail.go

@@ -90,7 +90,7 @@ func (provider *provider) addTraceDetailRoutes(router *mux.Router) error {
 			ID:                  "GetTraceThread",
 			Tags:                []string{"tracedetail"},
 			Summary:             "Get thread view for a trace",
-			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.",
+			Description:         "Returns the spans carrying gen_ai input or output messages, or a tool execution, in timestamp order. Messages already in the OTel GenAI shape are decoded into formatted_input and formatted_output, with formatter naming the converter and formatter_warnings what it could not resolve. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.",
 			RequestQuery:        new(spantypes.GetTraceThreadParams),
 			Response:            new(spantypes.GettableTraceThread),
 			ResponseContentType: "application/json",

pkg/modules/tracedetail/impltracedetail/store.go

@@ -158,10 +158,6 @@ func (s *traceStore) GetTraceStats(ctx context.Context, orgID valuer.UUID, trace
 
 // genAISpanColumns returns the gen_ai columns aggregated per span, resolved across attribute evolutions.
 func (s *traceStore) genAISpanColumns(ctx context.Context, orgID valuer.UUID, bounds *spantypes.TraceBounds, sb *sqlbuilder.SelectBuilder) ([]string, error) {
-	attributeKey := func(name string, dataType telemetrytypes.FieldDataType) *telemetrytypes.TelemetryFieldKey {
-		return &telemetrytypes.TelemetryFieldKey{Name: name, Signal: telemetrytypes.SignalTraces, FieldContext: telemetrytypes.FieldContextAttribute, FieldDataType: dataType}
-	}
-
 	values := []struct{ key, alias string }{
 		{aiobservabilitytypes.GenAIUsageInputTokens, "input_tokens_value"},
 		{aiobservabilitytypes.GenAIUsageOutputTokens, "output_tokens_value"},
@@ -175,26 +171,17 @@ func (s *traceStore) genAISpanColumns(ctx context.Context, orgID valuer.UUID, bo
 	for _, value := range values {
 		names = append(names, value.key)
 	}
-	selectors := make([]*telemetrytypes.FieldKeySelector, 0, len(names))
-	for _, name := range names {
-		selectors = append(selectors, &telemetrytypes.FieldKeySelector{Name: name, Signal: telemetrytypes.SignalTraces, FieldContext: telemetrytypes.FieldContextAttribute, SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeExact})
-	}
-	keys, _, err := s.metadataStore.GetKeysMulti(ctx, orgID, querybuilder.ExpandKeySelectorsForFamilies(ctx, orgID, s.flagger, selectors))
+	keys, err := s.genAIFieldKeys(ctx, orgID, names)
 	if err != nil {
 		return nil, err
 	}
 
 	q := querybuilder.NewQueryInfo(ctx, orgID, s.flagger, telemetrytypes.SignalTraces, nil, uint64(bounds.Start.UnixNano()), uint64(bounds.End.UnixNano()))
-
-	gate := make([]string, 0, len(aiobservabilitytypes.GenAISpanGateKeys))
-	for _, name := range aiobservabilitytypes.GenAISpanGateKeys {
-		conds, _, err := querybuilder.Conditions(ctx, q, s.storage, attributeKey(name, telemetrytypes.FieldDataTypeString), qbtypes.FilterOperatorExists, nil, keys, false, sb)
-		if err != nil {
-			return nil, err
-		}
-		gate = append(gate, conds...)
+	isGenAI, err := s.anyExistsCondition(ctx, q, aiobservabilitytypes.GenAISpanGateKeys, keys, sb)
+	if err != nil {
+		return nil, err
 	}
-	columns := []string{sb.Or(gate...) + " AS is_gen_ai"}
+	columns := []string{isGenAI + " AS is_gen_ai"}
 
 	for _, value := range values {
 		// lookup by number, the type metadata stores numeric attributes under; float64 is only the output cast
@@ -310,7 +297,11 @@ func (s *traceStore) GetThreadSpans(ctx context.Context, orgID valuer.UUID, trac
 		sb.SelectMore("attributes")
 	}
 	sb.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceTable))
-	hasMessages, err := s.messagesExistCondition(ctx, q, orgID, bounds, sb)
+	keys, err := s.genAIFieldKeys(ctx, orgID, aiobservabilitytypes.GenAIThreadKeys)
+	if err != nil {
+		return nil, err
+	}
+	isThreadSpan, err := s.anyExistsCondition(ctx, q, aiobservabilitytypes.GenAIThreadKeys, keys, sb)
 	if err != nil {
 		return nil, err
 	}
@@ -318,7 +309,7 @@ func (s *traceStore) GetThreadSpans(ctx context.Context, orgID valuer.UUID, trac
 		sb.E("trace_id", traceID),
 		sb.GE("ts_bucket_start", bounds.Start.Unix()-1800),
 		sb.LE("ts_bucket_start", bounds.End.Unix()),
-		hasMessages,
+		isThreadSpan,
 	)
 	if cursor := page.Cursor; cursor != nil {
 		// ClickHouse can't use an index for a tuple comparison, so the separate timestamp and
@@ -355,38 +346,6 @@ func (s *traceStore) GetThreadSpans(ctx context.Context, orgID valuer.UUID, trac
 	return spans, nil
 }
 
-// messagesExistCondition resolves the gen_ai message keys through the attribute evolution metadata
-// and the use_trace_attributes_json flag, so the filter reads the same columns the query builder does.
-func (s *traceStore) messagesExistCondition(ctx context.Context, q qbtypes.QueryInfo, orgID valuer.UUID, bounds *spantypes.TraceBounds, sb *sqlbuilder.SelectBuilder) (string, error) {
-	names := []string{aiobservabilitytypes.GenAIInputMessages, aiobservabilitytypes.GenAIOutputMessages}
-	selectors := make([]*telemetrytypes.FieldKeySelector, len(names))
-	for i, name := range names {
-		selectors[i] = &telemetrytypes.FieldKeySelector{
-			StartUnixMilli:    bounds.Start.UnixMilli(),
-			EndUnixMilli:      bounds.End.UnixMilli(),
-			Signal:            telemetrytypes.SignalTraces,
-			FieldContext:      telemetrytypes.FieldContextAttribute,
-			Name:              name,
-			SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeExact,
-		}
-	}
-	fieldKeys, _, err := s.metadataStore.GetKeysMulti(ctx, orgID, selectors)
-	if err != nil {
-		return "", errors.WrapInternalf(err, errors.CodeInternal, "error fetching thread field keys")
-	}
-
-	conds := make([]string, 0, len(names))
-	for _, name := range names {
-		key := &telemetrytypes.TelemetryFieldKey{Name: name, Signal: telemetrytypes.SignalTraces, FieldContext: telemetrytypes.FieldContextAttribute}
-		keyConds, _, err := querybuilder.Conditions(ctx, q, s.storage, key, qbtypes.FilterOperatorExists, nil, fieldKeys, false, sb)
-		if err != nil {
-			return "", err
-		}
-		conds = append(conds, keyConds...)
-	}
-	return sb.Or(conds...), nil
-}
-
 func (s *traceStore) GetThreadCursor(ctx context.Context, traceID string, bounds *spantypes.TraceBounds, spanID string) (*spantypes.ThreadCursor, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("toUnixTimestamp64Nano(timestamp)")
@@ -532,3 +491,34 @@ func (s *traceStore) GetSpanDurationByField(ctx context.Context, traceID string,
 	}
 	return result, nil
 }
+
+func attributeKey(name string, dataType telemetrytypes.FieldDataType) *telemetrytypes.TelemetryFieldKey {
+	return &telemetrytypes.TelemetryFieldKey{Name: name, Signal: telemetrytypes.SignalTraces, FieldContext: telemetrytypes.FieldContextAttribute, FieldDataType: dataType}
+}
+
+// genAIFieldKeys fetches the metadata keys for the attribute names, expanded across semconv families.
+func (s *traceStore) genAIFieldKeys(ctx context.Context, orgID valuer.UUID, names []string) (map[string][]*telemetrytypes.TelemetryFieldKey, error) {
+	selectors := make([]*telemetrytypes.FieldKeySelector, 0, len(names))
+	for _, name := range names {
+		selectors = append(selectors, &telemetrytypes.FieldKeySelector{Name: name, Signal: telemetrytypes.SignalTraces, FieldContext: telemetrytypes.FieldContextAttribute, SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeExact})
+	}
+	keys, _, err := s.metadataStore.GetKeysMulti(ctx, orgID, querybuilder.ExpandKeySelectorsForFamilies(ctx, orgID, s.flagger, selectors))
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "error fetching gen_ai field keys")
+	}
+	return keys, nil
+}
+
+// anyExistsCondition ORs an EXISTS test per attribute name, resolved across attribute evolutions
+// and the use_trace_attributes_json flag so the filter reads the same columns the query builder does.
+func (s *traceStore) anyExistsCondition(ctx context.Context, q qbtypes.QueryInfo, names []string, keys map[string][]*telemetrytypes.TelemetryFieldKey, sb *sqlbuilder.SelectBuilder) (string, error) {
+	conds := make([]string, 0, len(names))
+	for _, name := range names {
+		keyConds, _, err := querybuilder.Conditions(ctx, q, s.storage, attributeKey(name, telemetrytypes.FieldDataTypeString), qbtypes.FilterOperatorExists, nil, keys, false, sb)
+		if err != nil {
+			return "", err
+		}
+		conds = append(conds, keyConds...)
+	}
+	return sb.Or(conds...), nil
+}

pkg/modules/tracedetail/impltracedetail/store_test.go

@@ -220,14 +220,14 @@ func TestGetThreadSpans(t *testing.T) {
 			name:        "FlagOff_ReadsAndFiltersLegacyMaps",
 			jsonRelease: &jsonInsideTrace,
 			selectSQL:   selectSQL,
-			whereSQL:    "(mapContains(attributes_string, 'gen_ai.input.messages') OR mapContains(attributes_string, 'gen_ai.output.messages'))",
+			whereSQL:    "(mapContains(attributes_string, 'gen_ai.input.messages') OR mapContains(attributes_string, 'gen_ai.output.messages') OR mapContains(attributes_string, 'gen_ai.tool.name'))",
 		},
 		{
 			name:        "FlagOn_ReleasedDuringTrace_ReadsJSONFiltersJSONThenMaps",
 			jsonOn:      true,
 			jsonRelease: &jsonInsideTrace,
 			selectSQL:   selectSQL + ", attributes",
-			whereSQL:    "(multiIf(attributes.`gen_ai.input.messages` IS NOT NULL, attributes.`gen_ai.input.messages`::String, mapContains(attributes_string, 'gen_ai.input.messages'), attributes_string['gen_ai.input.messages'], NULL) IS NOT NULL OR multiIf(attributes.`gen_ai.output.messages` IS NOT NULL, attributes.`gen_ai.output.messages`::String, mapContains(attributes_string, 'gen_ai.output.messages'), attributes_string['gen_ai.output.messages'], NULL) IS NOT NULL)",
+			whereSQL:    "(multiIf(attributes.`gen_ai.input.messages` IS NOT NULL, attributes.`gen_ai.input.messages`::String, mapContains(attributes_string, 'gen_ai.input.messages'), attributes_string['gen_ai.input.messages'], NULL) IS NOT NULL OR multiIf(attributes.`gen_ai.output.messages` IS NOT NULL, attributes.`gen_ai.output.messages`::String, mapContains(attributes_string, 'gen_ai.output.messages'), attributes_string['gen_ai.output.messages'], NULL) IS NOT NULL OR multiIf(attributes.`gen_ai.tool.name` IS NOT NULL, attributes.`gen_ai.tool.name`::String, mapContains(attributes_string, 'gen_ai.tool.name'), attributes_string['gen_ai.tool.name'], NULL) IS NOT NULL)",
 		},
 	}
 

pkg/types/aiobservabilitytypes/genai/message.go

@@ -0,0 +1,57 @@
+// Package genai mirrors the OpenTelemetry GenAI message schemas, one type per schema definition:
+// open-telemetry/semantic-conventions-genai@06ec68e, model/gen-ai/gen-ai-{input,output}-messages.json.
+// Keys the schema does not name are dropped; the raw attribute on the span still has them.
+package genai
+
+import "github.com/SigNoz/signoz/pkg/valuer"
+
+var (
+	RoleSystem    = Role{valuer.NewString("system")}
+	RoleUser      = Role{valuer.NewString("user")}
+	RoleAssistant = Role{valuer.NewString("assistant")}
+	RoleTool      = Role{valuer.NewString("tool")}
+)
+
+var (
+	FinishReasonStop          = FinishReason{valuer.NewString("stop")}
+	FinishReasonLength        = FinishReason{valuer.NewString("length")}
+	FinishReasonContentFilter = FinishReason{valuer.NewString("content_filter")}
+	FinishReasonToolCall      = FinishReason{valuer.NewString("tool_call")}
+	FinishReasonCompaction    = FinishReason{valuer.NewString("compaction")}
+	FinishReasonError         = FinishReason{valuer.NewString("error")}
+)
+
+var (
+	ModalityImage    = Modality{valuer.NewString("image")}
+	ModalityVideo    = Modality{valuer.NewString("video")}
+	ModalityAudio    = Modality{valuer.NewString("audio")}
+	ModalityDocument = Modality{valuer.NewString("document")}
+)
+
+// Role, FinishReason and Modality are open enums: the variables are the values the schema
+// names, any other string is kept as sent, so none of them lists an Enum for the spec.
+type Role struct{ valuer.String }
+
+type FinishReason struct{ valuer.String }
+
+type Modality struct{ valuer.String }
+
+type InputMessages []ChatMessage
+
+// OutputMessages holds one message per choice.
+type OutputMessages []OutputMessage
+
+type ChatMessage struct {
+	Role  Role    `json:"role" required:"true"`
+	Parts Parts   `json:"parts" required:"true" nullable:"false"`
+	Name  *string `json:"name,omitempty"`
+}
+
+// OutputMessage is one choice. The schema deprecates FinishReason in favour of
+// gen_ai.response.finish_reasons; it stays so each choice carries its own.
+type OutputMessage struct {
+	Role         Role          `json:"role" required:"true"`
+	Parts        Parts         `json:"parts" required:"true" nullable:"false"`
+	Name         *string       `json:"name,omitempty"`
+	FinishReason *FinishReason `json:"finish_reason,omitempty"`
+}

pkg/types/aiobservabilitytypes/genai/part.go

@@ -0,0 +1,194 @@
+package genai
+
+import (
+	"encoding/json"
+
+	"github.com/swaggest/jsonschema-go"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+var (
+	PartTypeText                   = PartType{valuer.NewString("text")}
+	PartTypeToolCall               = PartType{valuer.NewString("tool_call")}
+	PartTypeToolCallResponse       = PartType{valuer.NewString("tool_call_response")}
+	PartTypeServerToolCall         = PartType{valuer.NewString("server_tool_call")}
+	PartTypeServerToolCallResponse = PartType{valuer.NewString("server_tool_call_response")}
+	PartTypeBlob                   = PartType{valuer.NewString("blob")}
+	PartTypeFile                   = PartType{valuer.NewString("file")}
+	PartTypeURI                    = PartType{valuer.NewString("uri")}
+	PartTypeReasoning              = PartType{valuer.NewString("reasoning")}
+	PartTypeCompaction             = PartType{valuer.NewString("compaction")}
+)
+
+var (
+	_ jsonschema.OneOfExposer = Part{}
+	_ jsonschema.Preparer     = Part{}
+)
+
+// partVariants are the part types the schema names; any other type decodes as GenericPart.
+// schemaRef is the component in the generated OpenAPI spec, for the discriminator mapping.
+var partVariants = []partVariant{
+	{typ: PartTypeText, decode: decodePart[TextPart], schema: TextPart{}, schemaRef: "#/components/schemas/GenaiTextPart"},
+	{typ: PartTypeToolCall, decode: decodePart[ToolCallRequestPart], schema: ToolCallRequestPart{}, schemaRef: "#/components/schemas/GenaiToolCallRequestPart"},
+	{typ: PartTypeToolCallResponse, decode: decodePart[ToolCallResponsePart], schema: ToolCallResponsePart{}, schemaRef: "#/components/schemas/GenaiToolCallResponsePart"},
+	{typ: PartTypeServerToolCall, decode: decodePart[ServerToolCallPart], schema: ServerToolCallPart{}, schemaRef: "#/components/schemas/GenaiServerToolCallPart"},
+	{typ: PartTypeServerToolCallResponse, decode: decodePart[ServerToolCallResponsePart], schema: ServerToolCallResponsePart{}, schemaRef: "#/components/schemas/GenaiServerToolCallResponsePart"},
+	{typ: PartTypeBlob, decode: decodePart[BlobPart], schema: BlobPart{}, schemaRef: "#/components/schemas/GenaiBlobPart"},
+	{typ: PartTypeFile, decode: decodePart[FilePart], schema: FilePart{}, schemaRef: "#/components/schemas/GenaiFilePart"},
+	{typ: PartTypeURI, decode: decodePart[UriPart], schema: UriPart{}, schemaRef: "#/components/schemas/GenaiUriPart"},
+	{typ: PartTypeReasoning, decode: decodePart[ReasoningPart], schema: ReasoningPart{}, schemaRef: "#/components/schemas/GenaiReasoningPart"},
+	{typ: PartTypeCompaction, decode: decodePart[CompactionPart], schema: CompactionPart{}, schemaRef: "#/components/schemas/GenaiCompactionPart"},
+}
+
+type PartType struct{ valuer.String }
+
+// Part is one message part, the schema's anyOf discriminated on "type". Value holds the part
+// struct for that type and is encoded as the part itself.
+type Part struct {
+	Value any `json:"-"`
+}
+
+type Parts []Part
+
+type TextPart struct {
+	Type    PartType `json:"type" required:"true"`
+	Content string   `json:"content" required:"true"`
+}
+
+type ToolCallRequestPart struct {
+	Type      PartType `json:"type" required:"true"`
+	Name      string   `json:"name" required:"true"`
+	ID        *string  `json:"id,omitempty"`
+	Arguments any      `json:"arguments,omitempty"`
+}
+
+// ToolCallResponsePart carries a client tool result, or a built-in tool outcome.
+type ToolCallResponsePart struct {
+	Type     PartType `json:"type" required:"true"`
+	Response any      `json:"response" required:"true" nullable:"true"`
+	ID       *string  `json:"id,omitempty"`
+}
+
+// ServerToolCallPart is a tool the provider ran itself, such as code_interpreter or web_search.
+type ServerToolCallPart struct {
+	Type           PartType              `json:"type" required:"true"`
+	Name           string                `json:"name" required:"true"`
+	ID             *string               `json:"id,omitempty"`
+	ServerToolCall GenericServerToolCall `json:"server_tool_call" required:"true" nullable:"false"`
+}
+
+// GenericServerToolCall is the provider's own call object, {type, ...} with any other keys.
+type GenericServerToolCall map[string]any
+
+type ServerToolCallResponsePart struct {
+	Type                   PartType                      `json:"type" required:"true"`
+	ID                     *string                       `json:"id,omitempty"`
+	ServerToolCallResponse GenericServerToolCallResponse `json:"server_tool_call_response" required:"true" nullable:"false"`
+}
+
+// GenericServerToolCallResponse is the provider's own response object, {type, ...} with any other keys.
+type GenericServerToolCallResponse map[string]any
+
+// BlobPart is inline data; Content is base64.
+type BlobPart struct {
+	Type     PartType `json:"type" required:"true"`
+	Modality Modality `json:"modality" required:"true"`
+	Content  string   `json:"content" required:"true"`
+	MimeType *string  `json:"mime_type,omitempty"`
+}
+
+// FilePart references a file uploaded to the provider.
+type FilePart struct {
+	Type     PartType `json:"type" required:"true"`
+	Modality Modality `json:"modality" required:"true"`
+	FileID   string   `json:"file_id" required:"true"`
+	MimeType *string  `json:"mime_type,omitempty"`
+}
+
+// UriPart references external data; a data: URL belongs in BlobPart instead.
+type UriPart struct {
+	Type     PartType `json:"type" required:"true"`
+	Modality Modality `json:"modality" required:"true"`
+	URI      string   `json:"uri" required:"true"`
+	MimeType *string  `json:"mime_type,omitempty"`
+}
+
+type ReasoningPart struct {
+	Type    PartType `json:"type" required:"true"`
+	Content string   `json:"content" required:"true"`
+}
+
+// CompactionPart is compacted conversation state; Content is the summary when it is not encrypted.
+type CompactionPart struct {
+	Type    PartType `json:"type" required:"true"`
+	ID      *string  `json:"id,omitempty"`
+	Content *string  `json:"content,omitempty"`
+}
+
+// GenericPart keeps a part of any other type as sent.
+type GenericPart map[string]any
+
+func (Part) JSONSchemaOneOf() []any {
+	oneOf := make([]any, 0, len(partVariants)+1)
+	for _, variant := range partVariants {
+		oneOf = append(oneOf, variant.schema)
+	}
+	return append(oneOf, GenericPart{})
+}
+
+func (Part) PrepareJSONSchema(schema *jsonschema.Schema) error {
+	if schema.ExtraProperties == nil {
+		schema.ExtraProperties = map[string]any{}
+	}
+	mapping := make(map[string]string, len(partVariants))
+	for _, variant := range partVariants {
+		mapping[variant.typ.StringValue()] = variant.schemaRef
+	}
+	schema.ExtraProperties["x-signoz-discriminator"] = map[string]any{
+		"propertyName": "type",
+		"mapping":      mapping,
+	}
+	return nil
+}
+
+func (p Part) MarshalJSON() ([]byte, error) {
+	return json.Marshal(p.Value)
+}
+
+func (p *Part) UnmarshalJSON(data []byte) error {
+	var head struct {
+		Type PartType `json:"type"`
+	}
+	if err := json.Unmarshal(data, &head); err != nil {
+		return err
+	}
+	decode := decodePart[GenericPart]
+	for _, variant := range partVariants {
+		if variant.typ == head.Type {
+			decode = variant.decode
+			break
+		}
+	}
+	value, err := decode(data)
+	if err != nil {
+		return err
+	}
+	p.Value = value
+	return nil
+}
+
+type partVariant struct {
+	typ       PartType
+	decode    func(data []byte) (any, error)
+	schema    any
+	schemaRef string
+}
+
+func decodePart[T any](data []byte) (any, error) {
+	var value T
+	if err := json.Unmarshal(data, &value); err != nil {
+		return nil, err
+	}
+	return value, nil
+}

pkg/types/aiobservabilitytypes/genai/part_test.go

@@ -0,0 +1,74 @@
+package genai
+
+import (
+	"encoding/json"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestParts_RoundTrip(t *testing.T) {
+	id := "call_1"
+	mime := "image/png"
+	summary := "earlier turns"
+	testCases := []struct {
+		name string
+		json string
+		want Parts
+	}{
+		{
+			name: "EveryNamedType_DecodesToItsStruct",
+			json: `[{"type":"text","content":"hi"},` +
+				`{"type":"tool_call","name":"get_weather","id":"call_1","arguments":{"city":"Paris"}},` +
+				`{"type":"tool_call_response","id":"call_1","response":"rainy"},` +
+				`{"type":"server_tool_call","name":"code_interpreter","id":"call_1","server_tool_call":{"type":"code_interpreter","code":"1+1"}},` +
+				`{"type":"server_tool_call_response","id":"call_1","server_tool_call_response":{"type":"code_interpreter","outputs":[]}},` +
+				`{"type":"blob","modality":"image","content":"aGk=","mime_type":"image/png"},` +
+				`{"type":"file","modality":"image","file_id":"file_1"},` +
+				`{"type":"uri","modality":"image","uri":"gs://b/x.png","mime_type":"image/png"},` +
+				`{"type":"reasoning","content":"thinking"},` +
+				`{"type":"compaction","id":"call_1","content":"earlier turns"}]`,
+			want: Parts{
+				{Value: TextPart{Type: PartTypeText, Content: "hi"}},
+				{Value: ToolCallRequestPart{Type: PartTypeToolCall, Name: "get_weather", ID: &id, Arguments: map[string]any{"city": "Paris"}}},
+				{Value: ToolCallResponsePart{Type: PartTypeToolCallResponse, ID: &id, Response: "rainy"}},
+				{Value: ServerToolCallPart{Type: PartTypeServerToolCall, Name: "code_interpreter", ID: &id, ServerToolCall: GenericServerToolCall{"type": "code_interpreter", "code": "1+1"}}},
+				{Value: ServerToolCallResponsePart{Type: PartTypeServerToolCallResponse, ID: &id, ServerToolCallResponse: GenericServerToolCallResponse{"type": "code_interpreter", "outputs": []any{}}}},
+				{Value: BlobPart{Type: PartTypeBlob, Modality: ModalityImage, Content: "aGk=", MimeType: &mime}},
+				{Value: FilePart{Type: PartTypeFile, Modality: ModalityImage, FileID: "file_1"}},
+				{Value: UriPart{Type: PartTypeURI, Modality: ModalityImage, URI: "gs://b/x.png", MimeType: &mime}},
+				{Value: ReasoningPart{Type: PartTypeReasoning, Content: "thinking"}},
+				{Value: CompactionPart{Type: PartTypeCompaction, ID: &id, Content: &summary}},
+			},
+		},
+		{
+			name: "UnknownKeys_Dropped",
+			json: `[{"type":"reasoning","content":"","signature":"sig"}]`,
+			want: Parts{{Value: ReasoningPart{Type: PartTypeReasoning}}},
+		},
+		{
+			name: "UnknownType_DecodesToGenericMap",
+			json: `[{"type":"refusal","refusal":"no"}]`,
+			want: Parts{{Value: GenericPart{"type": "refusal", "refusal": "no"}}},
+		},
+		{
+			name: "MissingType_DecodesToGenericMap",
+			json: `[{"text":"bare"}]`,
+			want: Parts{{Value: GenericPart{"text": "bare"}}},
+		},
+	}
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			var parts Parts
+			require.NoError(t, json.Unmarshal([]byte(testCase.json), &parts))
+			assert.Equal(t, testCase.want, parts)
+
+			encoded, err := json.Marshal(parts)
+			require.NoError(t, err)
+			var again Parts
+			require.NoError(t, json.Unmarshal(encoded, &again))
+			assert.Equal(t, parts, again)
+		})
+	}
+}

pkg/types/aiobservabilitytypes/genaiformatter/formatter.go

@@ -0,0 +1,252 @@
+// Package genaiformatter builds the OTel GenAI view of a span's messages from the formats SDKs
+// write into gen_ai.input.messages and gen_ai.output.messages.
+package genaiformatter
+
+import (
+	"encoding/json"
+	"fmt"
+	"regexp"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/types/aiobservabilitytypes/genai"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+const (
+	FormatterSemconv    = "semconv"
+	FormatterOpenAIChat = "openai.chat"
+	FormatterText       = "text"
+	FormatterGeneric    = "generic"
+)
+
+var dataURL = regexp.MustCompile(`^data:([^;,]+);base64,(.+)$`)
+
+// Provider spellings of the finish reasons; the enum values themselves pass through.
+var finishReasonAliases = map[string]genai.FinishReason{
+	"tool_calls": genai.FinishReasonToolCall, "function_call": genai.FinishReasonToolCall,
+	"end_turn": genai.FinishReasonStop, "stop_sequence": genai.FinishReasonStop,
+	"max_tokens": genai.FinishReasonLength,
+}
+
+// Formatted is the OTel GenAI view of one span's messages. Formatter names the converter that
+// produced it, Warnings what the converter could not resolve. The lists are never nil.
+type Formatted struct {
+	Input     genai.InputMessages
+	Output    genai.OutputMessages
+	Formatter string
+	Warnings  []string
+}
+
+// Format converts the two attribute values, each a JSON string or a structured value; nil means
+// the attribute is absent.
+func Format(input, output any) Formatted {
+	f := &formatting{out: Formatted{Input: genai.InputMessages{}, Output: genai.OutputMessages{}, Warnings: []string{}}}
+	var inputLabel, outputLabel string
+	if input != nil {
+		var msgs genai.OutputMessages
+		msgs, inputLabel = f.side(decode(input), genai.RoleUser)
+		for _, m := range msgs {
+			f.out.Input = append(f.out.Input, genai.ChatMessage{Role: m.Role, Parts: m.Parts, Name: m.Name})
+		}
+	}
+	if output != nil {
+		f.out.Output, outputLabel = f.side(decode(output), genai.RoleAssistant)
+	}
+	f.out.Formatter = inputLabel
+	if inputLabel == "" {
+		f.out.Formatter = outputLabel
+	} else if outputLabel != "" && outputLabel != inputLabel {
+		f.warn("output formatted as %s, input as %s", outputLabel, inputLabel)
+	}
+	return f.out
+}
+
+// object is a decoded JSON object whose accessors return zero values for missing keys.
+type object map[string]any
+
+type formatting struct {
+	out Formatted
+}
+
+func (o object) str(key string) string {
+	return stringOf(o[key])
+}
+
+func (o object) text(keys ...string) string {
+	for _, key := range keys {
+		if s, ok := o[key].(string); ok && s != "" {
+			return s
+		}
+	}
+	return ""
+}
+
+func (o object) obj(key string) (object, bool) {
+	m, ok := o[key].(map[string]any)
+	return m, ok
+}
+
+func (o object) list(key string) ([]any, bool) {
+	l, ok := o[key].([]any)
+	return l, ok
+}
+
+func (f *formatting) warn(format string, args ...any) {
+	f.out.Warnings = append(f.out.Warnings, fmt.Sprintf(format, args...))
+}
+
+// side converts one attribute value by its shape; role is what a bare string on this side is
+// spoken as.
+func (f *formatting) side(value any, role genai.Role) (genai.OutputMessages, string) {
+	switch v := value.(type) {
+	case []any:
+		if first, ok := firstObject(v); ok {
+			if _, ok := first["parts"]; ok {
+				return f.semconv(v), FormatterSemconv
+			}
+			if _, ok := first["role"]; ok {
+				return f.openAIChatMessages(v), FormatterOpenAIChat
+			}
+		}
+	case map[string]any:
+		if choices, ok := object(v).list("choices"); ok {
+			return f.openAIChatResponse(choices), FormatterOpenAIChat
+		}
+		if messages, ok := object(v).list("messages"); ok {
+			return f.openAIChatMessages(messages), FormatterOpenAIChat
+		}
+	case string:
+		if v == "" {
+			return genai.OutputMessages{}, FormatterText
+		}
+		f.warn("bare %s text, role assumed", role.StringValue())
+		return genai.OutputMessages{{Role: role, Parts: genai.Parts{part(textPart(v))}}}, FormatterText
+	}
+	f.warn("message format not recognised, kept as generic")
+	return genai.OutputMessages{genericMessage(value)}, FormatterGeneric
+}
+
+func firstObject(list []any) (object, bool) {
+	if len(list) == 0 {
+		return nil, false
+	}
+	first, ok := list[0].(map[string]any)
+	return first, ok
+}
+
+func genericMessage(value any) genai.OutputMessage {
+	return genai.OutputMessage{Parts: genai.Parts{part(genai.GenericPart{"type": FormatterGeneric, "content": stringOf(value)})}}
+}
+
+// decode parses a JSON-encoded attribute value, twice when an SDK encoded the string again.
+// Anything that is not JSON is returned as is.
+func decode(value any) any {
+	s, ok := value.(string)
+	if !ok {
+		return value
+	}
+	trimmed := strings.TrimSpace(s)
+	if trimmed == "" || !strings.ContainsAny(trimmed[:1], `[{"`) {
+		return s
+	}
+	var decoded any
+	if err := json.Unmarshal([]byte(trimmed), &decoded); err != nil {
+		return s
+	}
+	if inner, ok := decoded.(string); ok {
+		return decode(inner)
+	}
+	return decoded
+}
+
+func role(value string) genai.Role {
+	lower := strings.ToLower(strings.TrimSpace(value))
+	switch lower {
+	case "human":
+		return genai.RoleUser
+	case "ai", "model":
+		return genai.RoleAssistant
+	case "function":
+		return genai.RoleTool
+	}
+	return genai.Role{String: valuer.NewString(lower)}
+}
+
+func finishReason(value string) *genai.FinishReason {
+	lower := strings.ToLower(strings.TrimSpace(value))
+	if lower == "" {
+		return nil
+	}
+	fr, ok := finishReasonAliases[lower]
+	if !ok {
+		fr = genai.FinishReason{String: valuer.NewString(lower)}
+	}
+	return &fr
+}
+
+func optionalString(value any) *string {
+	s := stringOf(value)
+	if s == "" {
+		return nil
+	}
+	return &s
+}
+
+func part(value any) genai.Part {
+	return genai.Part{Value: value}
+}
+
+func textPart(content string) genai.TextPart {
+	return genai.TextPart{Type: genai.PartTypeText, Content: content}
+}
+
+// contentPart converts one OpenAI content block, which semconv parts may also carry; a block of
+// any other type is kept as sent.
+func contentPart(item any) genai.Part {
+	p, ok := item.(map[string]any)
+	if !ok {
+		if s, ok := item.(string); ok {
+			return part(textPart(s))
+		}
+		return part(genai.GenericPart{"type": FormatterGeneric, "content": stringOf(item)})
+	}
+	block := object(p)
+	switch block.str("type") {
+	case "text":
+		return part(textPart(block.str("text")))
+	case "refusal":
+		return part(textPart(block.str("refusal")))
+	case "image_url":
+		url := block.str("image_url")
+		if ref, ok := block.obj("image_url"); ok {
+			url = ref.str("url")
+		}
+		if url != "" {
+			return part(mediaPart(url, genai.ModalityImage))
+		}
+	}
+	return part(genai.GenericPart(p))
+}
+
+// mediaPart places a data URL in a BlobPart, any other URL in a UriPart.
+func mediaPart(url string, modality genai.Modality) any {
+	if m := dataURL.FindStringSubmatch(url); m != nil {
+		return genai.BlobPart{Type: genai.PartTypeBlob, Modality: modality, MimeType: &m[1], Content: m[2]}
+	}
+	return genai.UriPart{Type: genai.PartTypeURI, Modality: modality, URI: url}
+}
+
+// stringOf renders nil as "" and non-strings as compact JSON.
+func stringOf(value any) string {
+	switch v := value.(type) {
+	case nil:
+		return ""
+	case string:
+		return v
+	}
+	data, err := json.Marshal(value)
+	if err != nil {
+		return ""
+	}
+	return string(data)
+}

pkg/types/aiobservabilitytypes/genaiformatter/formatter_test.go

@@ -0,0 +1,101 @@
+package genaiformatter
+
+import (
+	"encoding/json"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+type formatCase struct {
+	name       string
+	input      any
+	output     any
+	formatter  string
+	warnings   []string
+	wantInput  string
+	wantOutput string
+}
+
+func runFormatCases(t *testing.T, testCases []formatCase) {
+	t.Helper()
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			formatted := Format(testCase.input, testCase.output)
+			assert.Equal(t, testCase.formatter, formatted.Formatter)
+			assert.Equal(t, append([]string{}, testCase.warnings...), formatted.Warnings)
+
+			input, err := json.Marshal(formatted.Input)
+			require.NoError(t, err)
+			assert.JSONEq(t, testCase.wantInput, string(input))
+			output, err := json.Marshal(formatted.Output)
+			require.NoError(t, err)
+			assert.JSONEq(t, testCase.wantOutput, string(output))
+		})
+	}
+}
+
+func TestFormat(t *testing.T) {
+	runFormatCases(t, []formatCase{
+		{
+			// bifrost-gateway capture, HTTP span
+			name:  "BareStrings_RolesAssumed_WarnsPerSide",
+			input: `A bat and a ball cost $1.10. The bat costs $1 more than the ball. How much is the ball?`,
+			output: `Let the cost of the ball be x dollars. Then the bat costs x + $1.00. According to the problem:
+
+  x + (x + 1.00) = 1.10
+
+Combine like terms:
+
+  2x + 1.00 = 1.10
+
+Subtract 1.00 from both sides:
+
+  2x = 0.10
+
+Divide by 2:
+
+  x = 0.05
+
+So, the ball costs 5 cents.`,
+			formatter: FormatterText,
+			warnings:  []string{"bare user text, role assumed", "bare assistant text, role assumed"},
+			wantInput: `[
+			  {
+			    "role": "user",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "A bat and a ball cost $1.10. The bat costs $1 more than the ball. How much is the ball?"
+			      }
+			    ]
+			  }
+			]`,
+			wantOutput: `[
+			  {
+			    "role": "assistant",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "Let the cost of the ball be x dollars. Then the bat costs x + $1.00. According to the problem:\n\n  x + (x + 1.00) = 1.10\n\nCombine like terms:\n\n  2x + 1.00 = 1.10\n\nSubtract 1.00 from both sides:\n\n  2x = 0.10\n\nDivide by 2:\n\n  x = 0.05\n\nSo, the ball costs 5 cents."
+			      }
+			    ]
+			  }
+			]`,
+		},
+		{
+			name:       "UnrecognisedObject_GenericPart_Warns",
+			input:      `{"city": "Paris", "temp_c": 21}`,
+			formatter:  FormatterGeneric,
+			warnings:   []string{"message format not recognised, kept as generic"},
+			wantInput:  `[{"role": "", "parts": [{"type": "generic", "content": "{\"city\":\"Paris\",\"temp_c\":21}"}]}]`,
+			wantOutput: `[]`,
+		},
+		{
+			name:       "NoAttributes_EmptyListsNoFormatter",
+			wantInput:  `[]`,
+			wantOutput: `[]`,
+		},
+	})
+}

pkg/types/aiobservabilitytypes/genaiformatter/openai_chat.go

@@ -0,0 +1,122 @@
+package genaiformatter
+
+import (
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/types/aiobservabilitytypes/genai"
+)
+
+// Format: OpenAI Chat Completions, a request {messages}, a response {choices}, or a bare message list.
+// Written by: bifrost, openrouter requests, the raw OpenAI calls OpenInference records.
+// Handled: string and block content, tool_calls nested or flattened, tool messages, refusal,
+// reasoning_content, finish reasons.
+// Not yet: streaming delta chunks, legacy completions choices[].text, audio output.
+
+func (f *formatting) openAIChatMessages(list []any) genai.OutputMessages {
+	out := make(genai.OutputMessages, 0, len(list))
+	for _, item := range list {
+		m, ok := item.(map[string]any)
+		if !ok {
+			out = append(out, genericMessage(item))
+			continue
+		}
+		out = append(out, f.openAIChatMessage(m))
+	}
+	return out
+}
+
+// openAIChatResponse converts the choices of an OpenAI chat response, one message each with its
+// finish reason.
+func (f *formatting) openAIChatResponse(choices []any) genai.OutputMessages {
+	out := make(genai.OutputMessages, 0, len(choices))
+	for _, item := range choices {
+		choice, ok := item.(map[string]any)
+		if !ok {
+			continue
+		}
+		inner, _ := object(choice).obj("message")
+		msg := f.openAIChatMessage(inner)
+		if msg.Role.IsZero() {
+			msg.Role = genai.RoleAssistant
+		}
+		if fr := finishReason(object(choice).str("finish_reason")); fr != nil {
+			msg.FinishReason = fr
+		}
+		out = append(out, msg)
+	}
+	return out
+}
+
+// openAIChatMessage converts one {role, content, tool_calls, ...} message in the OpenAI chat shape.
+func (f *formatting) openAIChatMessage(m object) genai.OutputMessage {
+	msg := genai.OutputMessage{Role: role(m.str("role")), Parts: genai.Parts{}, Name: optionalString(m["name"]), FinishReason: finishReason(m.str("finish_reason"))}
+
+	if id := m.str("tool_call_id"); msg.Role == genai.RoleTool && id != "" {
+		msg.Parts = genai.Parts{part(genai.ToolCallResponsePart{Type: genai.PartTypeToolCallResponse, ID: &id, Response: toolResponse(m["content"])})}
+		return msg
+	}
+
+	switch content := m["content"].(type) {
+	case string:
+		if content != "" {
+			msg.Parts = append(msg.Parts, part(textPart(content)))
+		}
+	case []any:
+		for _, item := range content {
+			msg.Parts = append(msg.Parts, contentPart(item))
+		}
+	}
+	if refusal := m.str("refusal"); refusal != "" {
+		msg.Parts = append(msg.Parts, part(textPart(refusal)))
+	}
+	if reasoning := m.text("reasoning_content", "reasoning"); reasoning != "" {
+		msg.Parts = append(msg.Parts, part(genai.ReasoningPart{Type: genai.PartTypeReasoning, Content: reasoning}))
+	}
+	if calls, ok := m.list("tool_calls"); ok {
+		for _, call := range calls {
+			if c, ok := call.(map[string]any); ok {
+				msg.Parts = append(msg.Parts, toolCallPart(c))
+			}
+		}
+	}
+	if call, ok := m.obj("function_call"); ok {
+		msg.Parts = append(msg.Parts, part(genai.ToolCallRequestPart{Type: genai.PartTypeToolCall, Name: call.str("name"), Arguments: decode(call["arguments"])}))
+	}
+	return msg
+}
+
+// toolCallPart reads {id, function: {name, arguments}}; a gateway may flatten it to {id, name, arguments|args}.
+func toolCallPart(c object) genai.Part {
+	call := genai.ToolCallRequestPart{Type: genai.PartTypeToolCall, ID: optionalString(c["id"]), Name: c.str("name")}
+	args := c["arguments"]
+	if args == nil {
+		args = c["args"]
+	}
+	if fn, ok := c.obj("function"); ok {
+		call.Name = fn.str("name")
+		args = fn["arguments"]
+	}
+	if args != nil {
+		call.Arguments = decode(args)
+	}
+	return part(call)
+}
+
+// toolResponse parses a JSON string and joins text blocks; anything else stays as sent.
+func toolResponse(value any) any {
+	switch v := value.(type) {
+	case string:
+		return decode(v)
+	case []any:
+		texts := make([]string, 0, len(v))
+		for _, item := range v {
+			block, ok := item.(map[string]any)
+			if !ok || object(block).str("type") != "text" {
+				return v
+			}
+			texts = append(texts, object(block).str("text"))
+		}
+		return strings.Join(texts, "\n")
+	}
+	return value
+}

pkg/types/aiobservabilitytypes/genaiformatter/openai_chat_test.go

@@ -0,0 +1,173 @@
+package genaiformatter
+
+import "testing"
+
+// Captured cases are gen_ai.input.messages and gen_ai.output.messages as the collector stored
+// them for the SigNoz/scripts static-telemetry-generator captures.
+func TestFormat_OpenAIChat(t *testing.T) {
+	runFormatCases(t, []formatCase{
+		{
+			// openinference capture, ChatCompletion span: the raw OpenAI request and response
+			name:      "ResponseWithToolCalls_ToolCallParts_FinishReasonToolCall",
+			input:     `{"messages": [{"role": "user", "content": "What's the weather in Paris and in London? Use the tool for each."}], "model": "gpt-4o-mini", "max_tokens": 120, "tool_choice": "auto", "tools": [{"type": "function", "function": {"name": "get_current_weather", "description": "Get the current weather for a city.", "parameters": {"type": "object", "properties": {"city": {"type": "string"}, "unit": {"type": "string", "enum": ["c", "f"]}}, "required": ["city"]}}}]}`,
+			output:    `{"id":"chatcmpl-DksBDptnQ3aTu18YrqSdYQgiPOuRV","choices":[{"finish_reason":"tool_calls","index":0,"logprobs":null,"message":{"content":null,"refusal":null,"role":"assistant","annotations":[],"tool_calls":[{"id":"call_SW4hst7nzysgvWSAz4OdyK9D","function":{"arguments":"{\"city\": \"Paris\"}","name":"get_current_weather"},"type":"function"},{"id":"call_si8wiETYGpooMB7gMXSgMQpk","function":{"arguments":"{\"city\": \"London\"}","name":"get_current_weather"},"type":"function"}]}}],"created":1780063727,"model":"gpt-4o-mini-2024-07-18","object":"chat.completion","service_tier":"default","system_fingerprint":"fp_6e71a9f378","usage":{"completion_tokens":46,"prompt_tokens":71,"total_tokens":117,"completion_tokens_details":{"accepted_prediction_tokens":0,"audio_tokens":0,"reasoning_tokens":0,"rejected_prediction_tokens":0},"prompt_tokens_details":{"audio_tokens":0,"cached_tokens":0}}}`,
+			formatter: FormatterOpenAIChat,
+			wantInput: `[
+			  {
+			    "role": "user",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "What's the weather in Paris and in London? Use the tool for each."
+			      }
+			    ]
+			  }
+			]`,
+			wantOutput: `[
+			  {
+			    "role": "assistant",
+			    "parts": [
+			      {
+			        "type": "tool_call",
+			        "name": "get_current_weather",
+			        "id": "call_SW4hst7nzysgvWSAz4OdyK9D",
+			        "arguments": {
+			          "city": "Paris"
+			        }
+			      },
+			      {
+			        "type": "tool_call",
+			        "name": "get_current_weather",
+			        "id": "call_si8wiETYGpooMB7gMXSgMQpk",
+			        "arguments": {
+			          "city": "London"
+			        }
+			      }
+			    ],
+			    "finish_reason": "tool_call"
+			  }
+			]`,
+		},
+		{
+			// openinference capture, the follow-up ChatCompletion span
+			name:      "ToolRoleMessages_BecomeToolCallResponseParts",
+			input:     `{"messages": [{"role": "user", "content": "What's the weather in Paris and in London? Use the tool for each."}, {"content": null, "refusal": null, "role": "assistant", "annotations": [], "audio": null, "function_call": null, "tool_calls": [{"id": "call_SW4hst7nzysgvWSAz4OdyK9D", "function": {"arguments": "{\"city\": \"Paris\"}", "name": "get_current_weather"}, "type": "function"}, {"id": "call_si8wiETYGpooMB7gMXSgMQpk", "function": {"arguments": "{\"city\": \"London\"}", "name": "get_current_weather"}, "type": "function"}]}, {"role": "tool", "tool_call_id": "call_SW4hst7nzysgvWSAz4OdyK9D", "content": "{\"city\": \"Paris\", \"temp_c\": 18, \"summary\": \"Clear\"}"}, {"role": "tool", "tool_call_id": "call_si8wiETYGpooMB7gMXSgMQpk", "content": "{\"city\": \"London\", \"temp_c\": 18, \"summary\": \"Clear\"}"}], "model": "gpt-4o-mini", "max_tokens": 80}`,
+			output:    `{"id":"chatcmpl-DksBF2QuaoMMMFg9UAXX9Rc28XVJT","choices":[{"finish_reason":"stop","index":0,"logprobs":null,"message":{"content":"The current weather is as follows:\n\n- **Paris**: 18°C, Clear\n- **London**: 18°C, Clear\n\nBoth cities are enjoying clear skies with the same temperature.","refusal":null,"role":"assistant","annotations":[]}}],"created":1780063729,"model":"gpt-4o-mini-2024-07-18","object":"chat.completion","service_tier":"default","system_fingerprint":"fp_e2d886d409","usage":{"completion_tokens":40,"prompt_tokens":118,"total_tokens":158,"completion_tokens_details":{"accepted_prediction_tokens":0,"audio_tokens":0,"reasoning_tokens":0,"rejected_prediction_tokens":0},"prompt_tokens_details":{"audio_tokens":0,"cached_tokens":0}}}`,
+			formatter: FormatterOpenAIChat,
+			wantInput: `[
+			  {
+			    "role": "user",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "What's the weather in Paris and in London? Use the tool for each."
+			      }
+			    ]
+			  },
+			  {
+			    "role": "assistant",
+			    "parts": [
+			      {
+			        "type": "tool_call",
+			        "name": "get_current_weather",
+			        "id": "call_SW4hst7nzysgvWSAz4OdyK9D",
+			        "arguments": {
+			          "city": "Paris"
+			        }
+			      },
+			      {
+			        "type": "tool_call",
+			        "name": "get_current_weather",
+			        "id": "call_si8wiETYGpooMB7gMXSgMQpk",
+			        "arguments": {
+			          "city": "London"
+			        }
+			      }
+			    ]
+			  },
+			  {
+			    "role": "tool",
+			    "parts": [
+			      {
+			        "type": "tool_call_response",
+			        "response": {
+			          "city": "Paris",
+			          "summary": "Clear",
+			          "temp_c": 18
+			        },
+			        "id": "call_SW4hst7nzysgvWSAz4OdyK9D"
+			      }
+			    ]
+			  },
+			  {
+			    "role": "tool",
+			    "parts": [
+			      {
+			        "type": "tool_call_response",
+			        "response": {
+			          "city": "London",
+			          "summary": "Clear",
+			          "temp_c": 18
+			        },
+			        "id": "call_si8wiETYGpooMB7gMXSgMQpk"
+			      }
+			    ]
+			  }
+			]`,
+			wantOutput: `[
+			  {
+			    "role": "assistant",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "The current weather is as follows:\n\n- **Paris**: 18°C, Clear\n- **London**: 18°C, Clear\n\nBoth cities are enjoying clear skies with the same temperature."
+			      }
+			    ],
+			    "finish_reason": "stop"
+			  }
+			]`,
+		},
+		{
+			// bifrost-gateway capture, HTTP span
+			name:      "GatewayFlattenedToolCalls_ToolCallParts_BareInputWarns",
+			input:     `What's the weather in Paris and in London? Use the tool for each.`,
+			output:    `[{"role":"assistant","content":"","tool_calls":[{"id":"call_xP33RT5exgBrNsvsWQZwiY9D","type":"function","name":"get_current_weather","args":"{\"city\": \"Paris\"}"},{"id":"call_lC6GgT8JW2ygJqWEM2wcohIz","type":"function","name":"get_current_weather","args":"{\"city\": \"London\"}"}]}]`,
+			formatter: FormatterText,
+			warnings:  []string{"bare user text, role assumed", "output formatted as openai.chat, input as text"},
+			wantInput: `[
+			  {
+			    "role": "user",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "What's the weather in Paris and in London? Use the tool for each."
+			      }
+			    ]
+			  }
+			]`,
+			wantOutput: `[
+			  {
+			    "role": "assistant",
+			    "parts": [
+			      {
+			        "type": "tool_call",
+			        "name": "get_current_weather",
+			        "id": "call_xP33RT5exgBrNsvsWQZwiY9D",
+			        "arguments": {
+			          "city": "Paris"
+			        }
+			      },
+			      {
+			        "type": "tool_call",
+			        "name": "get_current_weather",
+			        "id": "call_lC6GgT8JW2ygJqWEM2wcohIz",
+			        "arguments": {
+			          "city": "London"
+			        }
+			      }
+			    ]
+			  }
+			]`,
+		},
+	})
+}

pkg/types/aiobservabilitytypes/genaiformatter/semconv.go

@@ -0,0 +1,70 @@
+package genaiformatter
+
+import (
+	"encoding/json"
+	"maps"
+
+	"github.com/SigNoz/signoz/pkg/types/aiobservabilitytypes/genai"
+)
+
+// Format: the OTel shape itself, [{role, parts}].
+// Written by: litellm, langchain, openllmetry, portkey, traceloop LLM spans.
+// Decoding is the genai types. Repairs: "text" used for "content" on text parts; OpenAI content
+// blocks left inside parts.
+// Not yet: "thinking" for "reasoning"; "result" or "output" for "response" on tool call responses.
+
+// semconv decodes messages that already follow the schema through the genai types. A part of a
+// type the schema does not name is a provider content block, which contentPart converts.
+func (f *formatting) semconv(list []any) genai.OutputMessages {
+	data, err := json.Marshal(semconvTextKey(list))
+	if err != nil {
+		f.warn("messages could not be encoded: %s", err)
+		return genai.OutputMessages{genericMessage(list)}
+	}
+	var msgs genai.OutputMessages
+	if err := json.Unmarshal(data, &msgs); err != nil {
+		f.warn("messages do not follow the schema: %s", err)
+		return genai.OutputMessages{genericMessage(list)}
+	}
+	for i := range msgs {
+		if msgs[i].Parts == nil {
+			msgs[i].Parts = genai.Parts{}
+		}
+		for j, p := range msgs[i].Parts {
+			if block, ok := p.Value.(genai.GenericPart); ok {
+				msgs[i].Parts[j] = contentPart(map[string]any(block))
+			}
+		}
+	}
+	return msgs
+}
+
+// semconvTextKey copies the text and reasoning parts some SDKs write with "text" in place of the
+// schema's "content". The input is left untouched, it is also the span's raw attribute.
+func semconvTextKey(list []any) []any {
+	out := make([]any, 0, len(list))
+	for _, item := range list {
+		m, ok := item.(map[string]any)
+		parts, hasParts := object(m).list("parts")
+		if !ok || !hasParts {
+			out = append(out, item)
+			continue
+		}
+		fixedParts := make([]any, 0, len(parts))
+		for _, p := range parts {
+			part, ok := p.(map[string]any)
+			typ := object(part).str("type")
+			if ok && (typ == "text" || typ == "reasoning") && part["content"] == nil && part["text"] != nil {
+				fixed := maps.Clone(part)
+				fixed["content"] = fixed["text"]
+				delete(fixed, "text")
+				p = fixed
+			}
+			fixedParts = append(fixedParts, p)
+		}
+		msg := maps.Clone(m)
+		msg["parts"] = fixedParts
+		out = append(out, msg)
+	}
+	return out
+}

pkg/types/aiobservabilitytypes/genaiformatter/semconv_test.go

@@ -0,0 +1,163 @@
+package genaiformatter
+
+import "testing"
+
+// Captured cases are gen_ai.input.messages and gen_ai.output.messages as the collector stored
+// them for the SigNoz/scripts static-telemetry-generator captures.
+func TestFormat_Semconv(t *testing.T) {
+	runFormatCases(t, []formatCase{
+		{
+			// litellm capture, litellm_request span
+			name:      "SemconvMessages_DecodedUnchanged",
+			input:     `[{"role": "system", "parts": [{"type": "text", "content": "You are a concise assistant."}]}, {"role": "user", "parts": [{"type": "text", "content": "Give me a one-line definition of observability."}]}]`,
+			output:    `[{"role": "assistant", "parts": [{"type": "text", "content": "Observability is the ability to understand the internal state of a system based on external outputs, enabling effective monitoring and troubleshooting."}], "finish_reason": "stop"}]`,
+			formatter: FormatterSemconv,
+			wantInput: `[
+			  {
+			    "role": "system",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "You are a concise assistant."
+			      }
+			    ]
+			  },
+			  {
+			    "role": "user",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "Give me a one-line definition of observability."
+			      }
+			    ]
+			  }
+			]`,
+			wantOutput: `[
+			  {
+			    "role": "assistant",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "Observability is the ability to understand the internal state of a system based on external outputs, enabling effective monitoring and troubleshooting."
+			      }
+			    ],
+			    "finish_reason": "stop"
+			  }
+			]`,
+		},
+		{
+			// litellm capture, vision call; base64 trimmed
+			name:      "SemconvTextSpelledAsTextKey_ContentFilled_ImageBlockBecomesBlob",
+			input:     `[{"role": "user", "parts": [{"type": "text", "text": "What animal is in this image? One sentence."}, {"type": "image_url", "image_url": {"url": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBD"}}]}]`,
+			output:    `[{"role": "assistant", "parts": [{"type": "text", "content": "The animal in the image is a cartoon duck."}], "finish_reason": "stop"}]`,
+			formatter: FormatterSemconv,
+			wantInput: `[
+			  {
+			    "role": "user",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "What animal is in this image? One sentence."
+			      },
+			      {
+			        "type": "blob",
+			        "modality": "image",
+			        "content": "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBD",
+			        "mime_type": "image/jpeg"
+			      }
+			    ]
+			  }
+			]`,
+			wantOutput: `[
+			  {
+			    "role": "assistant",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "The animal in the image is a cartoon duck."
+			      }
+			    ],
+			    "finish_reason": "stop"
+			  }
+			]`,
+		},
+		{
+			// langchain capture, ChatOpenAI.chat span
+			name:      "SemconvToolCallTurn_DecodedUnchanged",
+			input:     `[{"role": "user", "parts": [{"type": "text", "content": "Search for SigNoz AI observability docs, then tell me the weather in Bengaluru."}]}, {"role": "assistant", "parts": [{"type": "tool_call", "id": "call_jL9UhSdUC9wWn2qfWwOjpzFd", "name": "search_web", "arguments": {"query": "SigNoz AI observability documentation"}}, {"type": "tool_call", "id": "call_nkVdZ8xX8d17HtmVddbUgJUc", "name": "get_weather", "arguments": {"city": "Bengaluru"}}]}, {"role": "tool", "parts": [{"type": "tool_call_response", "id": "call_jL9UhSdUC9wWn2qfWwOjpzFd", "response": "{\"query\": \"SigNoz AI observability documentation\", \"results\": [{\"title\": \"SigNoz docs: AI observability\", \"snippet\": \"...\"}, {\"title\": \"OpenTelemetry GenAI conventions\", \"snippet\": \"...\"}]}"}]}, {"role": "tool", "parts": [{"type": "tool_call_response", "id": "call_nkVdZ8xX8d17HtmVddbUgJUc", "response": "{\"city\": \"Bengaluru\", \"temp_c\": 18, \"summary\": \"Clear\"}"}]}]`,
+			output:    `[{"role": "assistant", "parts": [{"type": "text", "content": "I found some results for the SigNoz AI observability documentation. Here's one of the titles you might be interested in:\n\n- **SigNoz docs: AI observability**\n\nUnfortunately, a snippet was not provided, but you can look it up directly for more details.\n\nAs for the weather in Bengaluru, it's currently 18\u00b0C and clear."}], "finish_reason": "stop"}]`,
+			formatter: FormatterSemconv,
+			wantInput: `[
+			  {
+			    "role": "user",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "Search for SigNoz AI observability docs, then tell me the weather in Bengaluru."
+			      }
+			    ]
+			  },
+			  {
+			    "role": "assistant",
+			    "parts": [
+			      {
+			        "type": "tool_call",
+			        "name": "search_web",
+			        "id": "call_jL9UhSdUC9wWn2qfWwOjpzFd",
+			        "arguments": {
+			          "query": "SigNoz AI observability documentation"
+			        }
+			      },
+			      {
+			        "type": "tool_call",
+			        "name": "get_weather",
+			        "id": "call_nkVdZ8xX8d17HtmVddbUgJUc",
+			        "arguments": {
+			          "city": "Bengaluru"
+			        }
+			      }
+			    ]
+			  },
+			  {
+			    "role": "tool",
+			    "parts": [
+			      {
+			        "type": "tool_call_response",
+			        "response": "{\"query\": \"SigNoz AI observability documentation\", \"results\": [{\"title\": \"SigNoz docs: AI observability\", \"snippet\": \"...\"}, {\"title\": \"OpenTelemetry GenAI conventions\", \"snippet\": \"...\"}]}",
+			        "id": "call_jL9UhSdUC9wWn2qfWwOjpzFd"
+			      }
+			    ]
+			  },
+			  {
+			    "role": "tool",
+			    "parts": [
+			      {
+			        "type": "tool_call_response",
+			        "response": "{\"city\": \"Bengaluru\", \"temp_c\": 18, \"summary\": \"Clear\"}",
+			        "id": "call_nkVdZ8xX8d17HtmVddbUgJUc"
+			      }
+			    ]
+			  }
+			]`,
+			wantOutput: `[
+			  {
+			    "role": "assistant",
+			    "parts": [
+			      {
+			        "type": "text",
+			        "content": "I found some results for the SigNoz AI observability documentation. Here's one of the titles you might be interested in:\n\n- **SigNoz docs: AI observability**\n\nUnfortunately, a snippet was not provided, but you can look it up directly for more details.\n\nAs for the weather in Bengaluru, it's currently 18°C and clear."
+			      }
+			    ],
+			    "finish_reason": "stop"
+			  }
+			]`,
+		},
+		{
+			name:       "StructuredSemconvValue_DecodedWithoutJSONString",
+			input:      []any{map[string]any{"role": "user", "parts": []any{map[string]any{"type": "text", "content": "hi"}}}},
+			formatter:  FormatterSemconv,
+			wantInput:  `[{"role": "user", "parts": [{"type": "text", "content": "hi"}]}]`,
+			wantOutput: `[]`,
+		},
+	})
+}

pkg/types/aiobservabilitytypes/keys.go

@@ -35,6 +35,9 @@ const (
 // agent span. A trace belongs to the AI explorer when any span carries one.
 var GenAISpanGateKeys = []string{GenAIRequestModel, GenAIToolName, GenAIAgentName}
 
+// GenAIThreadKeys mark a span as a thread row: a model call with its messages, or a tool execution.
+var GenAIThreadKeys = []string{GenAIInputMessages, GenAIOutputMessages, GenAIToolName}
+
 // GenAISpanFilterExpression renders the gate as a query-builder filter
 // expression: each gate key ORed on EXISTS.
 func GenAISpanFilterExpression() string {

pkg/types/spantypes/thread.go

@@ -4,8 +4,12 @@ import (
 	"encoding/base64"
 	"encoding/json"
 	"maps"
+	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/aiobservabilitytypes"
+	"github.com/SigNoz/signoz/pkg/types/aiobservabilitytypes/genai"
+	"github.com/SigNoz/signoz/pkg/types/aiobservabilitytypes/genaiformatter"
 )
 
 const (
@@ -76,6 +80,12 @@ type ThreadSpan struct {
 	Attributes       map[string]any    `json:"attributes" required:"true" nullable:"false"`
 	Events           []Event           `json:"events" required:"true" nullable:"false"`
 	References       []OtelSpanRef     `json:"references" required:"true" nullable:"false"`
+	// The formatted fields hold the span's messages in the OTel GenAI shape; Formatter names the
+	// converter that produced them and FormatterWarnings what it could not resolve.
+	FormattedInput    genai.InputMessages  `json:"formatted_input" required:"true" nullable:"false"`
+	FormattedOutput   genai.OutputMessages `json:"formatted_output" required:"true" nullable:"false"`
+	Formatter         string               `json:"formatter" required:"true"`
+	FormatterWarnings []string             `json:"formatter_warnings" required:"true" nullable:"false"`
 
 	timeUnixNano uint64
 }
@@ -171,32 +181,55 @@ func newThreadSpan(traceID string, storable *StorableSpan) *ThreadSpan {
 	resources := make(map[string]string, len(storable.ResourcesString))
 	maps.Copy(resources, storable.ResourcesString)
 	timeUnixNano := uint64(storable.StartTime.UnixNano())
+	attributes := threadAttributes(storable)
+	formatted := genaiformatter.Format(rawAttribute(storable, aiobservabilitytypes.GenAIInputMessages), rawAttribute(storable, aiobservabilitytypes.GenAIOutputMessages))
 	return &ThreadSpan{
-		SpanID:           storable.SpanID,
-		TraceID:          traceID,
-		ParentSpanID:     storable.ParentSpanID,
-		Name:             storable.Name,
-		KindString:       storable.SpanKind,
-		TimeUnix:         timeUnixNano / 1_000_000, // client expects millis, as in the waterfall
-		DurationNano:     storable.DurationNano,
-		HasError:         storable.HasError,
-		StatusCodeString: storable.StatusCodeString,
-		StatusMessage:    storable.StatusMessage,
-		Resource:         resources,
-		Attributes:       threadAttributes(storable),
-		Events:           storable.UnmarshalledEvents(),
-		References:       storable.UnmarshalledRefs(),
-		timeUnixNano:     timeUnixNano,
+		SpanID:            storable.SpanID,
+		TraceID:           traceID,
+		ParentSpanID:      storable.ParentSpanID,
+		Name:              storable.Name,
+		KindString:        storable.SpanKind,
+		TimeUnix:          timeUnixNano / 1_000_000, // client expects millis, as in the waterfall
+		DurationNano:      storable.DurationNano,
+		HasError:          storable.HasError,
+		StatusCodeString:  storable.StatusCodeString,
+		StatusMessage:     storable.StatusMessage,
+		Resource:          resources,
+		Attributes:        attributes,
+		Events:            storable.UnmarshalledEvents(),
+		References:        storable.UnmarshalledRefs(),
+		FormattedInput:    formatted.Input,
+		FormattedOutput:   formatted.Output,
+		Formatter:         formatted.Formatter,
+		FormatterWarnings: formatted.Warnings,
+		timeUnixNano:      timeUnixNano,
 	}
 }
 
-// threadAttributes reads the JSON column and falls back to the legacy maps for spans written
-// before the JSON rollout.
+// threadAttributes flattens the JSON column into dotted keys, as the querier does for list
+// responses, and falls back to the legacy maps for spans written before the JSON rollout.
 func threadAttributes(storable *StorableSpan) map[string]any {
-	if len(storable.AttributesJSON) > 0 {
-		attributes := make(map[string]any, len(storable.AttributesJSON))
-		storable.AttributesJSON.FlattenInto("", attributes)
-		return attributes
+	if len(storable.AttributesJSON) == 0 {
+		return storable.Attributes()
 	}
-	return storable.Attributes()
+	attributes := make(map[string]any, len(storable.AttributesJSON))
+	storable.AttributesJSON.FlattenInto("", attributes)
+	return attributes
+}
+
+// rawAttribute reads one attribute for decoding from the JSON document, where an object value is
+// still whole. The legacy maps hold objects split into one key per field, so spans from before
+// the JSON rollout are not decoded. Not handled: a list of JSON strings, which formats as generic,
+// and a scalar at a prefix of the path, such as gen_ai.input beside gen_ai.input.messages, which
+// ends the walk early.
+func rawAttribute(storable *StorableSpan, key string) any {
+	var current any = map[string]any(storable.AttributesJSON)
+	for segment := range strings.SplitSeq(key, ".") {
+		object, ok := current.(map[string]any)
+		if !ok {
+			return nil
+		}
+		current = object[segment]
+	}
+	return current
 }