chore(ruler): regenerate openapi spec for clone rule

<!--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

@@ -200,6 +200,15 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
+/frontend/src/container/RoutingPolicies/ @SigNoz/pulse-frontend
+/frontend/src/components/AlertBreadcrumb/ @SigNoz/pulse-frontend
+/frontend/src/container/EditRules/ @SigNoz/pulse-frontend
+/frontend/src/components/AlertDetailsFilters/ @SigNoz/pulse-frontend
+/frontend/src/components/Alerts/ @SigNoz/pulse-frontend
+/frontend/src/hooks/routingPolicies/ @SigNoz/pulse-frontend
+/frontend/src/types/api/alerts/ @SigNoz/pulse-frontend
+/frontend/src/providers/Alert.tsx @SigNoz/pulse-frontend
+/frontend/src/constants/alerts.ts @SigNoz/pulse-frontend
 
 ## Notification Channels
 /frontend/src/pages/ChannelsEdit/ @SigNoz/pulse-frontend
@@ -207,6 +216,8 @@ go.mod @therealpandey
 /frontend/src/container/AllAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/CreateAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/EditAlertChannels/ @SigNoz/pulse-frontend
+/frontend/src/container/FormAlertChannels/ @SigNoz/pulse-frontend
+/frontend/src/hooks/notificationChannels/ @SigNoz/pulse-frontend
 
 ## OpenAPI Schema - Generated
 /frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv
@@ -285,4 +296,3 @@ go.mod @therealpandey
 /frontend/.storybook/ @H4ad
 /frontend/src/storybook/ @H4ad
 /.claude/skills/signoz-page-story/ @H4ad
-/.claude/skills/storybook-visual-diff/ @H4ad

.github/workflows/e2eci.yaml

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

.github/workflows/goci.yaml

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

.github/workflows/integrationci.yaml

@@ -38,7 +38,6 @@ jobs:
       fail-fast: false
       matrix:
         suite:
-          - alerts
           - alertmanager
           - alertmanagerrotation
           - basepath
@@ -64,10 +63,12 @@ jobs:
           - querierauthz
           - role
           - rootuser
+          - ruler
           - savedview
           - semconvfamilies
           - serviceaccount
           - spanmapper
+          - tracedetail
           - querier_json_body
           - querier_skip_resource_fingerprint
           - ttl

.gitignore

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

Makefile

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

docs/contributing/go/authz.md

@@ -121,7 +121,7 @@ The pieces:
 - **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
 - **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
 
-For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). When a side's ids come from a list extractor (`BodyJSONArray` or a custom `ResourceIDsExtractor`) and that list resolves to nothing at request time, there is nothing to link: the def resolves to no resources, so no check runs and no audit event is emitted (e.g. inviting a user with an empty `userRoles`). A single-id side (`OneID`) always resolves to exactly one id and fails closed when it is empty. For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
 
 Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
 

docs/contributing/go/handler.md

@@ -179,6 +179,7 @@ The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAP
 - **SuccessStatusCode**: The HTTP status for successful responses (for example, `http.StatusOK`, `http.StatusCreated`, `http.StatusNoContent`).
 - **ErrorStatusCodes**: Additional error status codes beyond the standard ones automatically added by `handler.New`.
 - **SecuritySchemes**: Auth mechanisms and scopes required by the operation.
+- **Stability**: Maturity marker (`handler.StabilityDevelopment`, `handler.StabilityAlpha`, `handler.StabilityBeta`, `handler.StabilityStable`, the OpenTelemetry Collector levels) emitted as the `x-signoz-stability` extension on every operation. Unset is emitted as `alpha`.
 
 The generic handler:
 

docs/contributing/query-range.md

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

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -183,32 +183,52 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, errors.New(errors.TypeAlreadyExists, cloudintegrationtypes.ErrCodeCloudIntegrationAlreadyConnected, errMessage)
 	}
 
-	account, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
+	storableAccount, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
 	if err != nil {
 		return nil, err
 	}
 
+	account, err := cloudintegrationtypes.NewAccountFromStorable(storableAccount)
+	if err != nil {
+		return nil, err
+	}
+
+	syncState := account.NextSyncState(req.SyncedVersion)
+
 	// If account has been removed (disconnected), return a minimal response with empty integration config.
-	// The agent uses this response to clean up resources
 	if account.RemovedAt != nil {
+		// Heartbeat stays frozen after removal, only the sync state is updated.
+		if account.AgentReport != nil && syncState != nil {
+			account.UpdateSyncState(syncState)
+
+			storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
+			if err != nil {
+				return nil, err
+			}
+
+			err = module.store.UpdateAgentReport(ctx, storableAccount)
+			if err != nil {
+				return nil, err
+			}
+		}
+
 		return cloudintegrationtypes.NewAgentCheckInResponse(
 			req.ProviderAccountID,
 			account.ID.StringValue(),
 			new(cloudintegrationtypes.ProviderIntegrationConfig),
 			account.RemovedAt,
+			syncState,
 		), nil
 	}
 
-	// update account with cloud provider account id and agent report (heartbeat)
-	account.Update(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data))
+	account.UpdateAgentReport(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data, syncState))
 
-	err = module.store.UpdateAccount(ctx, account)
+	storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
 	if err != nil {
 		return nil, err
 	}
 
-	// Get account as domain object for config access (enabled regions, etc.)
-	domainAccount, err := cloudintegrationtypes.NewAccountFromStorable(account)
+	err = module.store.UpdateAgentReport(ctx, storableAccount)
 	if err != nil {
 		return nil, err
 	}
@@ -223,8 +243,7 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, err
 	}
 
-	// Delegate integration config building entirely to the provider module
-	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, domainAccount, storedServices)
+	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, account, storedServices)
 	if err != nil {
 		return nil, err
 	}
@@ -234,6 +253,7 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		account.ID.StringValue(),
 		integrationConfig,
 		account.RemovedAt,
+		syncState,
 	), nil
 }
 

ee/sqlstore/postgressqlstore/formatter.go

@@ -23,6 +23,15 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return append(f.TextToJsonColumn(column), ops...)
 }
 
+func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
+	sql := f.TextToJsonColumn(column)
+	sql = append(sql, "->"...)
+	sql = schema.Append(f.bunf, sql, mapField)
+	sql = append(sql, "->>"...)
+	sql = schema.Append(f.bunf, sql, key)
+	return sql
+}
+
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "jsonb_typeof("...)

ee/sqlstore/postgressqlstore/formatter_test.go

@@ -55,6 +55,67 @@ func TestJSONExtractString(t *testing.T) {
 	}
 }
 
+func TestJSONExtractMapValue(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		mapField string
+		key      string
+		expected string
+	}{
+		{
+			name:     "PlainKey",
+			column:   "data",
+			mapField: "labels",
+			key:      "team",
+			expected: `"data"::jsonb->'labels'->>'team'`,
+		},
+		{
+			name:     "DottedKey_OneMapEntry",
+			column:   "data",
+			mapField: "labels",
+			key:      "k8s.cluster",
+			expected: `"data"::jsonb->'labels'->>'k8s.cluster'`,
+		},
+		{
+			name:     "SingleQuoteInKey_Doubled",
+			column:   "data",
+			mapField: "labels",
+			key:      "o'brien",
+			expected: `"data"::jsonb->'labels'->>'o''brien'`,
+		},
+		{
+			name:     "BackslashInKey_Literal",
+			column:   "data",
+			mapField: "labels",
+			key:      `a\b`,
+			expected: `"data"::jsonb->'labels'->>'a\b'`,
+		},
+		{
+			name:     "DoubleQuoteInKey_Literal",
+			column:   "data",
+			mapField: "labels",
+			key:      `a"b`,
+			expected: `"data"::jsonb->'labels'->>'a"b'`,
+		},
+		{
+			name:     "QualifiedColumn",
+			column:   "rule.data",
+			mapField: "labels",
+			key:      "severity",
+			expected: `"rule"."data"::jsonb->'labels'->>'severity'`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
 func TestJSONType(t *testing.T) {
 	tests := []struct {
 		name     string

frontend/.gitignore

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

frontend/.oxlintrc.json

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

frontend/.storybook/modes.ts

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

frontend/__mocks__/uplotMock.ts

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

frontend/public/locales/en-GB/titles.json

@@ -33,7 +33,6 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
-	"LIVE_LOGS": "SigNoz | Live Logs",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",
 	"LIST_LICENSES": "SigNoz | List of Licenses",

frontend/public/locales/en/titles.json

@@ -42,7 +42,6 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
-	"LIVE_LOGS": "SigNoz | Live Logs",
 	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",

frontend/scripts/story-shots-caption.mjs

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

frontend/scripts/story-shots-diff.mjs

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

frontend/scripts/story-shots.mjs

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

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -300,14 +300,6 @@ describe('PrivateRoute', () => {
 			);
 		});
 
-		it('should redirect /logs-explorer/live to /logs/logs-explorer/live', () => {
-			renderPrivateRoute({ initialRoute: '/logs-explorer/live' });
-
-			expect(screen.getByTestId('location-display')).toHaveTextContent(
-				'/logs/logs-explorer/live',
-			);
-		});
-
 		it('should redirect /logs-save-views to /logs/saved-views', () => {
 			renderPrivateRoute({ initialRoute: '/logs-save-views' });
 
@@ -1596,7 +1588,6 @@ describe('PrivateRoute', () => {
 			// route definition comes last, and both keys are authz-aware either way.
 			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
 			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
-			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
 			METRICS_EXPLORER: {
 				path: ROUTES.METRICS_EXPLORER,
 				deniedRoles: DENIED_ROLES,

frontend/src/AppRoutes/index.tsx

@@ -12,13 +12,14 @@ import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
-import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
@@ -58,7 +59,6 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
-		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -66,6 +66,8 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isSavedViewEnabled = useSavedViewEnabled();
+	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
 	const [pathname, setPathname] = useState(history.location.pathname);
@@ -253,7 +255,9 @@ function App(): JSX.Element {
 	}, [isDarkMode]);
 
 	useEffect(() => {
+		// The bottom strip carries Support, so the floating bubble goes entirely.
 		if (
+			isSavedViewEnabled ||
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
 			pathname === '/ai-assistant' ||
@@ -263,71 +267,32 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname]);
+	}, [pathname, isSavedViewEnabled]);
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
+	// Identity for the Pylon widget. Whether this user gets Pylon at all is
+	// `useChatSupport`'s call — this only fills in who they are.
 	useEffect(() => {
-		// feature flag shouldn't be loading and featureFlags or fetchError any one of this should be true indicating that req is complete
-		// licenses should also be present. there is no check for licenses for loading and error as that is mandatory if not present then routing
-		// to something went wrong which would ideally need a reload.
-		if (
-			!isFetchingFeatureFlags &&
-			(featureFlags || featureFlagsFetchError) &&
-			activeLicense &&
-			trialInfo
-		) {
-			let isChatSupportEnabled = false;
-			let isPremiumSupportEnabled = false;
-			if (featureFlags && featureFlags.length > 0) {
-				isChatSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
-						?.active || false;
-
-				isPremiumSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
-						?.active || false;
-			}
-			const showAddCreditCardModal =
-				!isPremiumSupportEnabled && !trialInfo?.trialConvertedToSubscription;
-
-			if (
-				isLoggedInState &&
-				isChatSupportEnabled &&
-				!showAddCreditCardModal &&
-				(isCloudUser || isEnterpriseSelfHostedUser) &&
-				window.signozBootData?.settings?.pylon?.enabled
-			) {
-				const email = user.email || '';
-				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
-				let emailHash = '';
-
-				if (email && secret) {
-					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-				}
-
-				window.pylon = {
-					chat_settings: {
-						app_id: window.signozBootData?.settings?.pylon?.appId,
-						email: user.email,
-						name: user.displayName || user.email,
-						email_hash: emailHash,
-					},
-				};
-			}
+		if (chatSupport !== ChatSupportState.Pylon) {
+			return;
 		}
-	}, [
-		isLoggedInState,
-		user,
-		pathname,
-		trialInfo?.trialConvertedToSubscription,
-		featureFlags,
-		isFetchingFeatureFlags,
-		featureFlagsFetchError,
-		activeLicense,
-		trialInfo,
-		isCloudUser,
-		isEnterpriseSelfHostedUser,
-	]);
+
+		const email = user.email || '';
+		const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
+		let emailHash = '';
+
+		if (email && secret) {
+			emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
+		}
+
+		window.pylon = {
+			chat_settings: {
+				app_id: window.signozBootData?.settings?.pylon?.appId,
+				email: user.email,
+				name: user.displayName || user.email,
+				email_hash: emailHash,
+			},
+		};
+	}, [chatSupport, user]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {

frontend/src/AppRoutes/pageComponents.ts

@@ -154,10 +154,6 @@ export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
 
-export const LiveLogs = Loadable(
-	() => import(/* webpackChunkName: "Live Logs" */ 'pages/LiveLogs'),
-);
-
 export const PipelinePage = Loadable(
 	() => import(/* webpackChunkName: "Pipelines" */ 'pages/LogsModulePage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -23,7 +23,6 @@ import {
 	LicensePage,
 	ListAllALertsPage,
 	LLMObservabilityPage,
-	LiveLogs,
 	Login,
 	Logs,
 	LogsIndexToFields,
@@ -282,13 +281,6 @@ const routes: AppRoutes[] = [
 		key: 'LOGS',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.LIVE_LOGS,
-		exact: true,
-		component: LiveLogs,
-		key: 'LIVE_LOGS',
-		isPrivate: true,
-	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
 		exact: true,
@@ -521,7 +513,6 @@ export const LIST_LICENSES: AppRoutes = {
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
-	'/logs-explorer/live': '/logs/logs-explorer/live',
 	'/logs-save-views': '/logs/saved-views',
 	'/traces-save-views': '/traces/saved-views',
 	'/settings/access-tokens': '/settings/service-accounts',

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

@@ -18,8 +18,12 @@ import type {
 } from 'react-query';
 
 import type {
+	CloneRuleByID201,
+	CloneRuleByIDPathParameters,
 	CreateRule201,
+	CreateRuleView201,
 	DeleteRuleByIDPathParameters,
+	DeleteRuleViewPathParameters,
 	GetRuleByID200,
 	GetRuleByIDPathParameters,
 	GetRuleHistoryFilterKeys200,
@@ -40,13 +44,19 @@ import type {
 	GetRuleHistoryTopContributors200,
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
+	ListRuleViews200,
 	ListRules200,
+	ListRulesV3200,
+	ListRulesV3Params,
 	PatchRuleByID200,
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
 	RuletypesPostableRuleDTO,
+	RuletypesPostableRuleViewDTO,
 	TestRule200,
 	UpdateRuleByIDPathParameters,
+	UpdateRuleView200,
+	UpdateRuleViewPathParameters,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -73,7 +83,353 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * This endpoint lists all alert rules with their current evaluation state
+ * Returns every saved view in the calling user's org. Saved views are shared org-wide.
+ * @summary List rule saved views
+ */
+export const listRuleViews = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListRuleViews200>({
+		url: `/api/v2/rule_views`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListRuleViewsQueryKey = () => {
+	return [`/api/v2/rule_views`] as const;
+};
+
+export const getListRuleViewsQueryOptions = <
+	TData = Awaited<ReturnType<typeof listRuleViews>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listRuleViews>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRuleViewsQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRuleViews>>> = ({
+		signal,
+	}) => listRuleViews(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRuleViews>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRuleViewsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRuleViews>>
+>;
+export type ListRuleViewsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List rule saved views
+ */
+
+export function useListRuleViews<
+	TData = Awaited<ReturnType<typeof listRuleViews>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listRuleViews>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRuleViewsQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary List rule saved views
+ */
+export const invalidateListRuleViews = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRuleViewsQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Persists the calling user's rule listing state (query, states, sort, order) as a named, reusable view shared across the org.
+ * @summary Create rule saved view
+ */
+export const createRuleView = (
+	ruletypesPostableRuleViewDTO?: BodyType<RuletypesPostableRuleViewDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateRuleView201>({
+		url: `/api/v2/rule_views`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostableRuleViewDTO,
+		signal,
+	});
+};
+
+export const getCreateRuleViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRuleView>>,
+		TError,
+		{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createRuleView>>,
+	TError,
+	{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+	TContext
+> => {
+	const mutationKey = ['createRuleView'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof createRuleView>>,
+		{ data?: BodyType<RuletypesPostableRuleViewDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createRuleView(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateRuleViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createRuleView>>
+>;
+export type CreateRuleViewMutationBody =
+	| BodyType<RuletypesPostableRuleViewDTO>
+	| undefined;
+export type CreateRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create rule saved view
+ */
+export const useCreateRuleView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRuleView>>,
+		TError,
+		{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createRuleView>>,
+	TError,
+	{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+	TContext
+> => {
+	return useMutation(getCreateRuleViewMutationOptions(options));
+};
+/**
+ * Removes a saved view. Saved views are shared org-wide. Deleting a non-existent view returns 404.
+ * @summary Delete rule saved view
+ */
+export const deleteRuleView = (
+	{ id }: DeleteRuleViewPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/rule_views/${id}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteRuleViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRuleView>>,
+		TError,
+		{ pathParams: DeleteRuleViewPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteRuleView>>,
+	TError,
+	{ pathParams: DeleteRuleViewPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteRuleView'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof deleteRuleView>>,
+		{ pathParams: DeleteRuleViewPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteRuleView(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteRuleViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteRuleView>>
+>;
+
+export type DeleteRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete rule saved view
+ */
+export const useDeleteRuleView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRuleView>>,
+		TError,
+		{ pathParams: DeleteRuleViewPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteRuleView>>,
+	TError,
+	{ pathParams: DeleteRuleViewPathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteRuleViewMutationOptions(options));
+};
+/**
+ * Replaces a saved view's name and data. Saved views are shared org-wide.
+ * @summary Update rule saved view
+ */
+export const updateRuleView = (
+	{ id }: UpdateRuleViewPathParameters,
+	ruletypesPostableRuleViewDTO?: BodyType<RuletypesPostableRuleViewDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateRuleView200>({
+		url: `/api/v2/rule_views/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostableRuleViewDTO,
+		signal,
+	});
+};
+
+export const getUpdateRuleViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateRuleView>>,
+		TError,
+		{
+			pathParams: UpdateRuleViewPathParameters;
+			data?: BodyType<RuletypesPostableRuleViewDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateRuleView>>,
+	TError,
+	{
+		pathParams: UpdateRuleViewPathParameters;
+		data?: BodyType<RuletypesPostableRuleViewDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateRuleView'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateRuleView>>,
+		{
+			pathParams: UpdateRuleViewPathParameters;
+			data?: BodyType<RuletypesPostableRuleViewDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateRuleView(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateRuleViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateRuleView>>
+>;
+export type UpdateRuleViewMutationBody =
+	| BodyType<RuletypesPostableRuleViewDTO>
+	| undefined;
+export type UpdateRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update rule saved view
+ */
+export const useUpdateRuleView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateRuleView>>,
+		TError,
+		{
+			pathParams: UpdateRuleViewPathParameters;
+			data?: BodyType<RuletypesPostableRuleViewDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateRuleView>>,
+	TError,
+	{
+		pathParams: UpdateRuleViewPathParameters;
+		data?: BodyType<RuletypesPostableRuleViewDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateRuleViewMutationOptions(options));
+};
+/**
+ * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
+ * @deprecated
  * @summary List alert rules
  */
 export const listRules = (signal?: AbortSignal) => {
@@ -115,6 +471,7 @@ export type ListRulesQueryResult = NonNullable<
 export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 
@@ -134,6 +491,7 @@ export function useListRules<
 }
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 export const invalidateListRules = async (
@@ -607,6 +965,85 @@ export const useUpdateRuleByID = <
 > => {
 	return useMutation(getUpdateRuleByIDMutationOptions(options));
 };
+/**
+ * This endpoint creates a new alert rule from the stored definition of an existing one. The clone keeps every modeled field of the source, including its enabled/disabled state, and gets the source's name suffixed with " - Copy" (or a bumped " - Copy (n)" counter when the source is itself a copy). The clone is owned by the caller. Cloning fails with 400 when the stored source no longer passes create validation, for example when a channel it references has been deleted.
+ * @summary Clone alert rule
+ */
+export const cloneRuleByID = (
+	{ id }: CloneRuleByIDPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CloneRuleByID201>({
+		url: `/api/v2/rules/${id}/clone`,
+		method: 'POST',
+		signal,
+	});
+};
+
+export const getCloneRuleByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof cloneRuleByID>>,
+		TError,
+		{ pathParams: CloneRuleByIDPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof cloneRuleByID>>,
+	TError,
+	{ pathParams: CloneRuleByIDPathParameters },
+	TContext
+> => {
+	const mutationKey = ['cloneRuleByID'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof cloneRuleByID>>,
+		{ pathParams: CloneRuleByIDPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return cloneRuleByID(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CloneRuleByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof cloneRuleByID>>
+>;
+
+export type CloneRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Clone alert rule
+ */
+export const useCloneRuleByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof cloneRuleByID>>,
+		TError,
+		{ pathParams: CloneRuleByIDPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof cloneRuleByID>>,
+	TError,
+	{ pathParams: CloneRuleByIDPathParameters },
+	TContext
+> => {
+	return useMutation(getCloneRuleByIDMutationOptions(options));
+};
 /**
  * Returns distinct label keys from rule history entries for the selected range.
  * @summary Get rule history filter keys
@@ -1388,3 +1825,97 @@ export const useTestRule = <
 > => {
 	return useMutation(getTestRuleMutationOptions(options));
 };
+/**
+ * Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.
+ * @summary List alert rules (v3)
+ */
+export const listRulesV3 = (
+	params?: ListRulesV3Params,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListRulesV3200>({
+		url: `/api/v3/rules`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getListRulesV3QueryKey = (params?: ListRulesV3Params) => {
+	return [`/api/v3/rules`, ...(params ? [params] : [])] as const;
+};
+
+export const getListRulesV3QueryOptions = <
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRulesV3QueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRulesV3>>> = ({
+		signal,
+	}) => listRulesV3(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRulesV3>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRulesV3QueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRulesV3>>
+>;
+export type ListRulesV3QueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List alert rules (v3)
+ */
+
+export function useListRulesV3<
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRulesV3QueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary List alert rules (v3)
+ */
+export const invalidateListRulesV3 = async (
+	queryClient: QueryClient,
+	params?: ListRulesV3Params,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRulesV3QueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -104,9 +104,9 @@ export interface AlertmanagertypesChannelSlackFieldDTO {
 
 export interface AlertmanagertypesChannelSlackConfigDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	actions?: AlertmanagertypesChannelSlackActionDTO[];
+	actions?: AlertmanagertypesChannelSlackActionDTO[] | null;
 	/**
 	 * @type string
 	 * @format password
@@ -125,9 +125,9 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 */
 	fallback?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	fields?: AlertmanagertypesChannelSlackFieldDTO[];
+	fields?: AlertmanagertypesChannelSlackFieldDTO[] | null;
 	/**
 	 * @type string
 	 */
@@ -166,13 +166,19 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind {
 	email = 'email',
 }
-export type AlertmanagertypesChannelEmailConfigDTOHeaders = {
+export type AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelEmailConfigDTOHeaders =
+	AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf | null;
+
 export interface AlertmanagertypesChannelEmailConfigDTO {
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	headers?: AlertmanagertypesChannelEmailConfigDTOHeaders;
 	/**
@@ -239,10 +245,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind {
 	pagerduty = 'pagerduty',
 }
-export type AlertmanagertypesChannelPagerdutyConfigDTODetails = {
+export type AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelPagerdutyConfigDTODetails =
+	AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf | null;
+
 export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	/**
 	 * @type string
@@ -265,7 +277,7 @@ export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
 	/**
@@ -307,10 +319,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind {
 	opsgenie = 'opsgenie',
 }
-export type AlertmanagertypesChannelOpsgenieConfigDTODetails = {
+export type AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelOpsgenieConfigDTODetails =
+	AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf | null;
+
 export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	/**
 	 * @type string
@@ -326,7 +344,7 @@ export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
 	/**
@@ -423,10 +441,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
 	jira = 'jira',
 }
-export type AlertmanagertypesChannelJiraConfigDTOCustomFields = {
+export type AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf = {
 	[key: string]: unknown;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelJiraConfigDTOCustomFields =
+	AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf | null;
+
 export interface AlertmanagertypesChannelJiraConfigDTO {
 	/**
 	 * @type string
@@ -434,7 +458,7 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	apiToken: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
 	/**
@@ -450,9 +474,9 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	issueType: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	labels?: string[];
+	labels?: string[] | null;
 	/**
 	 * @type string
 	 */
@@ -543,17 +567,23 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind {
 	incidentio = 'incidentio',
 }
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata = {
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata =
+	AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf | null;
+
 export interface AlertmanagertypesChannelIncidentIOConfigDTO {
 	/**
 	 * @type string
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	metadata?: AlertmanagertypesChannelIncidentIOConfigDTOMetadata;
 	/**
@@ -3366,6 +3396,37 @@ export interface CloudintegrationtypesAWSServiceConfigDTO {
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
 }
 
+export enum CloudintegrationtypesRegionStateDTO {
+	enabled = 'enabled',
+	disabled = 'disabled',
+}
+export interface CloudintegrationtypesRegionSyncStateDTO {
+	state: CloudintegrationtypesRegionStateDTO;
+}
+
+export type CloudintegrationtypesSyncStateDTORegions = {
+	[key: string]: CloudintegrationtypesRegionSyncStateDTO;
+};
+
+/**
+ * @nullable
+ */
+export type CloudintegrationtypesSyncStateDTO = {
+	/**
+	 * @type boolean
+	 */
+	inSync: boolean;
+	/**
+	 * @type object
+	 */
+	regions: CloudintegrationtypesSyncStateDTORegions;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	version: number;
+} | null;
+
 export type CloudintegrationtypesAgentReportDTODataAnyOf = {
 	[key: string]: unknown;
 };
@@ -3384,6 +3445,7 @@ export type CloudintegrationtypesAgentReportDTO = {
 	 * @type object,null
 	 */
 	data: CloudintegrationtypesAgentReportDTOData;
+	syncState: CloudintegrationtypesSyncStateDTO | null;
 	/**
 	 * @type integer
 	 * @format int64
@@ -3812,6 +3874,7 @@ export interface CloudintegrationtypesGettableAgentCheckInDTO {
 	 * @format date-time
 	 */
 	removedAt: string | null;
+	syncState: CloudintegrationtypesSyncStateDTO | null;
 }
 
 export interface CloudintegrationtypesServiceMetadataDTO {
@@ -3882,6 +3945,10 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	 * @type string
 	 */
 	providerAccountId?: string;
+	/**
+	 * @type integer,null
+	 */
+	syncedVersion?: number | null;
 }
 
 export interface CloudintegrationtypesStorableIntegrationDashboardDTO {
@@ -5224,6 +5291,87 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesTextPanelSpecDTO;
 }
 
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind {
+	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
+}
+export enum DashboardtypesHeatmapYScaleDTO {
+	auto = 'auto',
+	linear = 'linear',
+	log = 'log',
+	symlog = 'symlog',
+}
+export interface DashboardtypesHeatmapAxisDTO {
+	scale?: DashboardtypesHeatmapYScaleDTO;
+}
+
+export interface DashboardtypesHeatmapAxesDTO {
+	y?: DashboardtypesHeatmapAxisDTO;
+}
+
+export enum DashboardtypesHeatmapColorModeDTO {
+	palette = 'palette',
+	opacity = 'opacity',
+}
+export enum DashboardtypesHeatmapPaletteDTO {
+	ice = 'ice',
+	moss = 'moss',
+	rust = 'rust',
+	graphite = 'graphite',
+	ember = 'ember',
+	lagoon = 'lagoon',
+	orchid = 'orchid',
+	verdant = 'verdant',
+	lava = 'lava',
+	beacon = 'beacon',
+}
+export enum DashboardtypesHeatmapColorScaleDTO {
+	log = 'log',
+	sqrt = 'sqrt',
+	linear = 'linear',
+}
+export interface DashboardtypesHeatmapColorsDTO {
+	/**
+	 * @type string
+	 */
+	fill?: string;
+	/**
+	 * @type number,null
+	 */
+	maxCount?: number | null;
+	/**
+	 * @type number,null
+	 */
+	minCount?: number | null;
+	mode?: DashboardtypesHeatmapColorModeDTO;
+	palette?: DashboardtypesHeatmapPaletteDTO;
+	scale?: DashboardtypesHeatmapColorScaleDTO;
+	/**
+	 * @type integer
+	 */
+	steps?: number;
+}
+
+export interface DashboardtypesHeatmapChartAppearanceDTO {
+	colors?: DashboardtypesHeatmapColorsDTO;
+}
+
+export interface DashboardtypesHeatmapPanelSpecDTO {
+	axes?: DashboardtypesHeatmapAxesDTO;
+	chartAppearance?: DashboardtypesHeatmapChartAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO {
+	/**
+	 * @enum signoz/HeatmapPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind;
+	spec: DashboardtypesHeatmapPanelSpecDTO;
+}
+
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5233,7 +5381,8 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -6159,6 +6308,7 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
+	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
 }
 /**
  * @nullable
@@ -10188,6 +10338,149 @@ export interface RuletypesGettableTestRuleDTO {
 	message?: string;
 }
 
+export interface RuletypesLabelPairDTO {
+	/**
+	 * @type string
+	 */
+	key: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
+export enum RuletypesListOrderDTO {
+	asc = 'asc',
+	desc = 'desc',
+}
+export enum RuletypesListSortDTO {
+	updated_at = 'updated_at',
+	created_at = 'created_at',
+	name = 'name',
+	state = 'state',
+	severity = 'severity',
+}
+export type RuletypesListableRuleDTOLabels = { [key: string]: string };
+
+export enum RuletypesRuleTypeDTO {
+	threshold_rule = 'threshold_rule',
+	promql_rule = 'promql_rule',
+	anomaly_rule = 'anomaly_rule',
+}
+export interface RuletypesListableRuleDTO {
+	/**
+	 * @type string
+	 */
+	alert: string;
+	alertType: RuletypesAlertTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type boolean
+	 */
+	disabled?: boolean;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type object
+	 */
+	labels?: RuletypesListableRuleDTOLabels;
+	ruleType: RuletypesRuleTypeDTO;
+	state: RuletypesAlertStateDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface RuletypesRuleViewDataDTO {
+	order?: RuletypesListOrderDTO;
+	/**
+	 * @type string
+	 */
+	query?: string;
+	sort?: RuletypesListSortDTO;
+	/**
+	 * @type array
+	 */
+	states?: string[];
+	/**
+	 * @type string
+	 */
+	version: string;
+}
+
+export interface RuletypesRuleViewDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	data: RuletypesRuleViewDataDTO;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
+export interface RuletypesListableRuleViewsDTO {
+	/**
+	 * @type array
+	 */
+	views: RuletypesRuleViewDTO[];
+}
+
+export interface RuletypesListableRulesDTO {
+	/**
+	 * @type array
+	 */
+	labels: RuletypesLabelPairDTO[];
+	/**
+	 * @type array
+	 */
+	reservedKeywords: string[];
+	/**
+	 * @type array
+	 */
+	rules: RuletypesListableRuleDTO[];
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	total: number;
+}
+
 export interface RuletypesRenotifyDTO {
 	/**
 	 * @type array,null
@@ -10284,11 +10577,6 @@ export interface RuletypesRuleConditionDTO {
 	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
-export enum RuletypesRuleTypeDTO {
-	threshold_rule = 'threshold_rule',
-	promql_rule = 'promql_rule',
-	anomaly_rule = 'anomaly_rule',
-}
 export interface RuletypesPostableRuleDTO {
 	/**
 	 * @type string
@@ -10341,6 +10629,14 @@ export interface RuletypesPostableRuleDTO {
 	version?: string;
 }
 
+export interface RuletypesPostableRuleViewDTO {
+	data: RuletypesRuleViewDataDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
 export type RuletypesRuleDTOAnnotations = { [key: string]: string };
 
 export type RuletypesRuleDTOLabels = { [key: string]: string };
@@ -11039,6 +11335,82 @@ export interface SpantypesGettableTraceAggregationsDTO {
 	aggregations: SpantypesSpanAggregationResultDTO[];
 }
 
+export interface SpantypesTraceAITokensDTO {
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	cacheRead: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	cacheWrite: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	input: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	output: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	reasoning: number;
+}
+
+export interface SpantypesTraceAISummaryDTO {
+	tokens: SpantypesTraceAITokensDTO;
+	/**
+	 * @type number
+	 */
+	totalCost?: number;
+}
+
+export interface SpantypesGettableTraceSummaryDTO {
+	ai?: SpantypesTraceAISummaryDTO;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	endTimestampMillis: number;
+	/**
+	 * @type boolean
+	 */
+	hasMissingSpans: boolean;
+	/**
+	 * @type string
+	 */
+	rootServiceEntryPoint: string;
+	/**
+	 * @type string
+	 */
+	rootServiceName: string;
+	/**
+	 * @type string
+	 */
+	rootSpanStatusCode: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	startTimestampMillis: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalErrorSpansCount: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalSpansCount: number;
+}
+
 export interface SpantypesOtelSpanRefDTO {
 	/**
 	 * @type string
@@ -11054,6 +11426,86 @@ export interface SpantypesOtelSpanRefDTO {
 	traceId?: string;
 }
 
+export type SpantypesThreadSpanDTOAttributes = { [key: string]: unknown };
+
+export type SpantypesThreadSpanDTOResource = { [key: string]: string };
+
+export interface SpantypesThreadSpanDTO {
+	/**
+	 * @type object
+	 */
+	attributes: SpantypesThreadSpanDTOAttributes;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	duration_nano: number;
+	/**
+	 * @type array
+	 */
+	events: SpantypesEventDTO[];
+	/**
+	 * @type boolean
+	 */
+	has_error: boolean;
+	/**
+	 * @type string
+	 */
+	kind_string: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	parent_span_id: string;
+	/**
+	 * @type array
+	 */
+	references: SpantypesOtelSpanRefDTO[];
+	/**
+	 * @type object
+	 */
+	resource: SpantypesThreadSpanDTOResource;
+	/**
+	 * @type string
+	 */
+	span_id: string;
+	/**
+	 * @type string
+	 */
+	status_code_string: string;
+	/**
+	 * @type string
+	 */
+	status_message: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	time_unix: number;
+	/**
+	 * @type string
+	 */
+	trace_id: string;
+}
+
+export interface SpantypesGettableTraceThreadDTO {
+	/**
+	 * @type string
+	 */
+	nextCursor?: string;
+	/**
+	 * @type string
+	 */
+	prevCursor?: string;
+	/**
+	 * @type array
+	 */
+	spans: SpantypesThreadSpanDTO[];
+}
+
 export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
 	[key: string]: unknown;
 };
@@ -12727,6 +13179,51 @@ export type GetTraceAggregations200 = {
 	status: string;
 };
 
+export type GetTraceSummaryPathParameters = {
+	traceID: string;
+};
+export type GetTraceSummary200 = {
+	data: SpantypesGettableTraceSummaryDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetTraceThreadPathParameters = {
+	traceID: string;
+};
+export type GetTraceThreadParams = {
+	/**
+	 * @type integer
+	 * @description Page size, at most 100. 0 means 20.
+	 */
+	limit?: number;
+	/**
+	 * @type string
+	 * @description The nextCursor of a page; returns the spans after it. Set only one of after, before and spanId.
+	 */
+	after?: string;
+	/**
+	 * @type string
+	 * @description The prevCursor of a page; returns the spans before it. Set only one of after, before and spanId.
+	 */
+	before?: string;
+	/**
+	 * @type string
+	 * @description Returns the page around this span. Set only one of after, before and spanId.
+	 */
+	spanId?: string;
+};
+
+export type GetTraceThread200 = {
+	data: SpantypesGettableTraceThreadDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListUserPreferences200 = {
 	/**
 	 * @type array
@@ -13628,6 +14125,36 @@ export type GetUsersByRoleID200 = {
 	status: string;
 };
 
+export type ListRuleViews200 = {
+	data: RuletypesListableRuleViewsDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateRuleView201 = {
+	data: RuletypesRuleViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteRuleViewPathParameters = {
+	id: string;
+};
+export type UpdateRuleViewPathParameters = {
+	id: string;
+};
+export type UpdateRuleView200 = {
+	data: RuletypesRuleViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListRules200 = {
 	/**
 	 * @type array
@@ -13675,6 +14202,17 @@ export type PatchRuleByID200 = {
 export type UpdateRuleByIDPathParameters = {
 	id: string;
 };
+export type CloneRuleByIDPathParameters = {
+	id: string;
+};
+export type CloneRuleByID201 = {
+	data: RuletypesRuleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetRuleHistoryFilterKeysPathParameters = {
 	id: string;
 };
@@ -14189,6 +14727,45 @@ export type GetMetricDashboardsV2200 = {
 	status: string;
 };
 
+export type ListRulesV3Params = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	query?: string;
+	/**
+	 * @type array
+	 * @description undefined
+	 */
+	states?: string[];
+	/**
+	 * @description undefined
+	 */
+	sort?: RuletypesListSortDTO;
+	/**
+	 * @description undefined
+	 */
+	order?: RuletypesListOrderDTO;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	offset?: number;
+};
+
+export type ListRulesV3200 = {
+	data: RuletypesListableRulesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetFlamegraphPathParameters = {
 	traceID: string;
 };

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

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

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

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

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

@@ -0,0 +1,103 @@
+import { useMutation } from 'react-query';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { CreditCard, X } from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
+
+interface AddCreditCardModalProps {
+	open: boolean;
+	onClose: () => void;
+	onAddCreditCard?: () => void;
+}
+
+/**
+ * Shown to trial users who have not added a card, in place of chat support.
+ * Submitting creates the subscription and opens the returned billing URL.
+ */
+function AddCreditCardModal({
+	open,
+	onClose,
+	onAddCreditCard,
+}: AddCreditCardModalProps): JSX.Element {
+	const { notifications } = useNotifications();
+
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{ onSuccess: handleBillingOnSuccess, onError: handleBillingOnError },
+	);
+
+	const handleAddCreditCard = (): void => {
+		onAddCreditCard?.();
+		updateCreditCard({ url: getBaseUrl() });
+	};
+
+	return (
+		<Modal
+			className="add-credit-card-modal"
+			title={<span className="title">Add Credit Card for Chat Support</span>}
+			open={open}
+			closable
+			onCancel={onClose}
+			destroyOnClose
+			footer={[
+				<Button
+					key="cancel"
+					onClick={onClose}
+					className="cancel-btn"
+					icon={<X size={16} />}
+				>
+					Cancel
+				</Button>,
+				<AuthZTooltip
+					key="submit"
+					checks={[SubscriptionCreatePermission]}
+					withPortal={false}
+				>
+					<Button
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn"
+					>
+						Add Credit Card
+					</Button>
+				</AuthZTooltip>,
+			]}
+		>
+			<Typography.Text className="add-credit-card-text">
+				You&apos;re currently on <span className="highlight-text">Trial plan</span>.
+				Add a credit card to access SigNoz chat support to your workspace.
+			</Typography.Text>
+		</Modal>
+	);
+}
+
+AddCreditCardModal.defaultProps = { onAddCreditCard: undefined };
+
+export default AddCreditCardModal;

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.mocks.tsx

@@ -0,0 +1,9 @@
+import { rest } from 'msw';
+
+const SUBSCRIPTIONS = 'http://localhost/api/v1/subscriptions';
+
+export const createSubscriptionHandlers = [
+	rest.post(SUBSCRIPTIONS, (_req, res, ctx) =>
+		res(ctx.status(200), ctx.json({ data: { redirectURL: '' } })),
+	),
+];

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@signozhq/ui/button';
+import { screen, userEvent, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import { createSubscriptionHandlers } from './AddCreditCardModal.stories.mocks';
+
+import AddCreditCardModal from '../AddCreditCardModal';
+
+/** Stands in for the surfaces that open it: the strip's Support button, and
+ * `LaunchChatSupport` in the custom domain and onboarding flows. */
+function ModalFixture(): JSX.Element {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Button
+				data-testid="open-add-credit-card"
+				onClick={(): void => setOpen(true)}
+			>
+				Contact support
+			</Button>
+			<AddCreditCardModal open={open} onClose={(): void => setOpen(false)} />
+		</>
+	);
+}
+
+const meta = {
+	title: 'Components/Add Credit Card Modal',
+	component: ModalFixture,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 400 })],
+	parameters: {
+		msw: { handlers: createSubscriptionHandlers },
+	},
+} satisfies Meta<typeof ModalFixture>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** What a trial user without a card sees in place of chat support. */
+export const Default: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			within(canvasElement).getByTestId('open-add-credit-card'),
+		);
+		await screen.findByRole('dialog', {
+			name: /Add Credit Card for Chat Support/i,
+		});
+	},
+};

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,63 +1,15 @@
 import { useState } from 'react';
-import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Button } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
+import { MessageSquareText } from '@signozhq/icons';
 
 export default function ChatSupportGateway(): JSX.Element {
-	const { notifications } = useNotifications();
-
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
-
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
 	const { pathname } = useLocation();
 
-	const handleAddCreditCard = (): void => {
-		logEvent('Add Credit card modal: Clicked', {
-			source: `chat support icon`,
-			page: pathname,
-		});
-
-		updateCreditCard({
-			url: getBaseUrl(),
-		});
-	};
-
 	return (
 		<>
 			<div className="chat-support-gateway">
@@ -76,47 +28,16 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<AuthZTooltip
-						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
-					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={(): void => {
+					logEvent('Add Credit card modal: Clicked', {
+						source: `chat support icon`,
+						page: pathname,
+					});
+				}}
+			/>
 		</>
 	);
 }

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -106,7 +106,7 @@ describe.each([
 		renderWithStore(dataSource);
 		const button = screen.getByTestId(testId);
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass('periscope-btn', 'ghost');
+		expect(button).toHaveAccessibleName('Download');
 	});
 
 	it('shows popover with export options when download button is clicked', () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Tooltip } from 'antd';
+import { Popover, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useExportRawData } from 'hooks/useExportData/useServerExport';
-import { Download, LoaderCircle } from '@signozhq/icons';
+import { Download } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
 
 import {
@@ -111,8 +112,9 @@ export default function DownloadOptionsMenu({
 				)}
 
 				<Button
-					type="primary"
-					icon={<Download size={16} />}
+					variant="solid"
+					color="primary"
+					prefix={<Download size={16} />}
 					onClick={handleExport}
 					className="export-button"
 					disabled={isDownloading}
@@ -144,16 +146,14 @@ export default function DownloadOptionsMenu({
 		>
 			<Tooltip title="Download" placement="top">
 				<Button
-					className="periscope-btn ghost"
-					icon={
-						isDownloading ? (
-							<LoaderCircle size={14} className="animate-spin" />
-						) : (
-							<Download size={14} />
-						)
-					}
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					prefix={<Download size={14} />}
+					aria-label="Download"
 					data-testid={`periscope-btn-download-${dataSource}`}
 					disabled={isDownloading}
+					loading={isDownloading}
 				/>
 			</Tooltip>
 		</Popover>

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

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

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,22 +1,14 @@
 import { useMemo, useState } from 'react';
-import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Button, Tooltip } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
-import { CircleHelp, CreditCard, X } from '@signozhq/icons';
+import { CircleHelp } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -41,7 +33,6 @@ function LaunchChatSupport({
 	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-	const { notifications } = useNotifications();
 	const {
 		trialInfo,
 		featureFlags,
@@ -119,43 +110,12 @@ function LaunchChatSupport({
 		}
 	};
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
-
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `facing issues button`,
 			page: pathname,
 			...attributes,
 		});
-
-		updateCreditCard({
-			url: getBaseUrl(),
-		});
 	};
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
@@ -175,47 +135,11 @@ function LaunchChatSupport({
 				</Button>
 			</Tooltip>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<AuthZTooltip
-						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
-					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={handleAddCreditCard}
+			/>
 		</div>
 	) : null;
 }

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -1,7 +1,7 @@
 import { DrawerProps } from 'antd';
-import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
+import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
+import { ActionItemProps } from 'container/LogDetailedView/LogDetailedView.types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 

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

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

frontend/src/components/LogDetail/__tests__/LogDetail.test.tsx

@@ -19,10 +19,6 @@ jest.mock('periscope/components/DataViewer', () => ({
 }));
 
 // Force v2 for these tests regardless of route.
-jest.mock('../useIsLogDetailsV2', () => ({
-	useIsLogDetailsV2: (): boolean => true,
-}));
-
 const mockLog: ILog = {
 	id: 'log-1',
 	timestamp: '2024-01-15T09:45:30Z',
@@ -58,7 +54,7 @@ function renderDrawer(props: Partial<LogDetailProps> = {}): void {
 	);
 }
 
-describe('LogDetail drawer — header (isLogDetailsV2)', () => {
+describe('LogDetail drawer — header', () => {
 	afterEach(() => {
 		jest.clearAllMocks();
 		localStorage.clear();

frontend/src/components/LogDetail/index.tsx

@@ -1,16 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useCopyToClipboard } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import LogStateIndicator, {
-	LogType,
-} from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
@@ -19,33 +14,24 @@ import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
 import Overview from 'container/LogDetailedView/Overview';
 import {
-	aggregateAttributesResourcesToString,
 	getSanitizedLogBody,
 	removeEscapeCharacters,
 } from 'container/LogDetailedView/utils';
 import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { FontSize } from 'container/OptionsMenu/types';
-import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep } from 'lodash-es';
 import {
 	ArrowDown,
 	ArrowUp,
-	Braces,
-	ChevronDown,
-	ChevronUp,
-	Compass,
-	Copy,
 	Filter,
 	Histogram,
 	Table,
 	TextSelect,
 	X,
 } from '@signozhq/icons';
-import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -56,7 +42,6 @@ import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
 import LogDetailsHeader from './LogDetailsHeader/LogDetailsHeader';
 import { useLogNavigation } from './LogDetailsHeader/useLogNavigation';
 import LogHighlights from './LogHighlights/LogHighlights';
-import { useIsLogDetailsV2 } from './useIsLogDetailsV2';
 
 import './LogDetails.styles.scss';
 
@@ -64,11 +49,8 @@ import './LogDetails.styles.scss';
 function LogDetailInner({
 	log,
 	onClose,
-	onAddToQuery,
-	onClickActionItem,
 	selectedTab,
 	isListViewPanel = false,
-	listViewPanelSelectedFields,
 	handleChangeSelectedView,
 	logs,
 	onNavigateLog,
@@ -81,7 +63,6 @@ function LogDetailInner({
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
 		initialContextQuery,
 	);
-	const [, copyToClipboard] = useCopyToClipboard();
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
 
 	const [isFilterVisible, setIsFilterVisible] = useState<boolean>(false);
@@ -94,8 +75,6 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery } = useQueryBuilder();
 
-	const isLogDetailsV2 = useIsLogDetailsV2();
-
 	// Handle clicks outside to close drawer, except on explicitly ignored regions
 	useEffect(() => {
 		const handleClickOutside = (e: MouseEvent): void => {
@@ -173,12 +152,6 @@ function LogDetailInner({
 
 	const isDarkMode = useIsDarkMode();
 
-	const { notifications } = useNotifications();
-
-	const { onLogCopy } = useCopyLogLink(log?.id);
-
-	const LogJsonData = log ? aggregateAttributesResourcesToString(log) : '';
-
 	const handleModeChange = (value: string): void => {
 		setSelectedView(value as VIEWS);
 		setIsEdit(false);
@@ -220,13 +193,6 @@ function LogDetailInner({
 		[logBody],
 	);
 
-	const handleJSONCopy = (): void => {
-		copyToClipboard(LogJsonData);
-		notifications.success({
-			message: 'Copied to clipboard',
-		});
-	};
-
 	const handleQueryExpressionChange = useCallback(
 		(value: string, queryIndex: number) => {
 			// update the query at the given index
@@ -295,8 +261,6 @@ function LogDetailInner({
 		}
 	};
 
-	const logType = log?.attributes_string?.log_level || LogType.INFO;
-
 	return (
 		<Drawer
 			width="60%"
@@ -304,69 +268,15 @@ function LogDetailInner({
 			maskClosable={false}
 			getContainer={getContainer}
 			title={
-				isLogDetailsV2 ? (
-					<LogDetailsHeader
-						log={log}
-						onNavigatePrev={goToPrev}
-						onNavigateNext={goToNext}
-						isPrevDisabled={isPrevDisabled}
-						isNextDisabled={isNextDisabled}
-						showOpenInExplorer={!!handleOpenInExplorer}
-						onOpenInExplorer={handleOpenInExplorer}
-					/>
-				) : (
-					<div className="log-detail-drawer__title" data-log-detail-ignore="true">
-						<div className="log-detail-drawer__title-left">
-							<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
-							<Typography.Text className="title">Log details</Typography.Text>
-						</div>
-						<div className="log-detail-drawer__title-right">
-							<div className="log-arrows">
-								<Tooltip
-									title={isPrevDisabled ? '' : 'Move to previous log'}
-									placement="top"
-									mouseLeaveDelay={0}
-								>
-									<Button
-										variant="outlined"
-										color="secondary"
-										prefix={<ChevronUp size={14} />}
-										className="log-arrow-btn log-arrow-btn-up"
-										disabled={isPrevDisabled}
-										onClick={goToPrev}
-									/>
-								</Tooltip>
-								<Tooltip
-									title={isNextDisabled ? '' : 'Move to next log'}
-									placement="top"
-									mouseLeaveDelay={0}
-								>
-									<Button
-										variant="outlined"
-										color="secondary"
-										prefix={<ChevronDown size={14} />}
-										className="log-arrow-btn log-arrow-btn-down"
-										disabled={isNextDisabled}
-										onClick={goToNext}
-									/>
-								</Tooltip>
-							</div>
-							{handleOpenInExplorer && (
-								<div>
-									<Button
-										variant="outlined"
-										color="secondary"
-										prefix={<Compass size={16} />}
-										className="open-in-explorer-btn"
-										onClick={handleOpenInExplorer}
-									>
-										Open in Explorer
-									</Button>
-								</div>
-							)}
-						</div>
-					</div>
-				)
+				<LogDetailsHeader
+					log={log}
+					onNavigatePrev={goToPrev}
+					onNavigateNext={goToNext}
+					isPrevDisabled={isPrevDisabled}
+					isNextDisabled={isNextDisabled}
+					showOpenInExplorer={!!handleOpenInExplorer}
+					onOpenInExplorer={handleOpenInExplorer}
+				/>
 			}
 			placement="right"
 			onClose={drawerCloseHandler}
@@ -379,195 +289,150 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div
-				className="log-detail-drawer__content"
-				data-log-detail-ignore="true"
-				data-testid="log-detail-drawer"
-			>
-				<div className="log-detail-drawer__log">
-					{isLogDetailsV2 ? (
+			<OverlayScrollbar style={{ height: '100%' }}>
+				<div
+					className="log-detail-drawer__content"
+					data-log-detail-ignore="true"
+					data-testid="log-detail-drawer"
+				>
+					<div className="log-detail-drawer__log">
 						<LogStateIndicator
 							severityText={log.severity_text}
 							severityNumber={log.severity_number}
 							fontSize={options?.fontSize ?? FontSize.MEDIUM}
 						/>
-					) : (
-						<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-					)}
-					<Tooltip
-						title={removeEscapeCharacters(logBody)}
-						placement="left"
-						mouseLeaveDelay={0}
-					>
-						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
-					</Tooltip>
+						<Tooltip
+							title={removeEscapeCharacters(logBody)}
+							placement="left"
+							mouseLeaveDelay={0}
+						>
+							<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
+						</Tooltip>
 
-					<div className="log-overflow-shadow">&nbsp;</div>
-				</div>
-
-				{isLogDetailsV2 && <LogHighlights log={log} />}
-
-				{isLogDetailsV2 && <div className="log-detail-drawer__section-divider" />}
-
-				<div className="tabs-and-search">
-					<ToggleGroupSimple
-						type="single"
-						className="views-tabs"
-						onChange={handleModeChange}
-						value={selectedView}
-						items={[
-							{
-								value: VIEW_TYPES.OVERVIEW,
-								label: (
-									<div className="view-title">
-										<Table size={14} />
-										Overview
-									</div>
-								),
-							},
-							// V2's DataViewer has its own Pretty/JSON toggle, so the separate
-							// JSON tab is redundant.
-							...(isLogDetailsV2
-								? []
-								: [
-										{
-											value: VIEW_TYPES.JSON,
-											label: (
-												<div className="view-title">
-													<Braces size={14} />
-													JSON
-												</div>
-											),
-										},
-									]),
-							{
-								value: VIEW_TYPES.CONTEXT,
-								label: (
-									<div className="view-title">
-										<TextSelect size={14} />
-										Context
-									</div>
-								),
-							},
-							{
-								value: VIEW_TYPES.INFRAMETRICS,
-								label: (
-									<div className="view-title">
-										<Histogram size="md" />
-										Metrics
-									</div>
-								),
-							},
-						]}
-					/>
-
-					<div className="log-detail-drawer__actions">
-						{selectedView === VIEW_TYPES.CONTEXT && (
-							<Tooltip
-								title="Show Filters"
-								placement="topLeft"
-								aria-label="Show Filters"
-								mouseLeaveDelay={0}
-							>
-								<Button
-									variant="link"
-									color="secondary"
-									size="sm"
-									prefix={<Filter size="lg" />}
-									onClick={handleFilterVisible}
-								/>
-							</Tooltip>
-						)}
-
-						{/* V2 moves copy actions into the header ⋯ menu */}
-						{!isLogDetailsV2 && (
-							<Tooltip
-								title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
-								placement="topLeft"
-								aria-label={
-									selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-								}
-								mouseLeaveDelay={0}
-							>
-								<Button
-									variant="link"
-									color="secondary"
-									size="sm"
-									prefix={<Copy size={12} />}
-									onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
-								/>
-							</Tooltip>
-						)}
+						<div className="log-overflow-shadow">&nbsp;</div>
 					</div>
-				</div>
-				{isFilterVisible && contextQuery?.builder.queryData[0] && (
-					<div className="log-detail-drawer-query-container">
-						<QuerySearch
-							onChange={(value): void => handleQueryExpressionChange(value, 0)}
-							dataSource={DataSource.LOGS}
-							queryData={contextQuery?.builder.queryData[0]}
-							onRun={handleRunQuery}
+
+					<LogHighlights log={log} />
+
+					<div className="log-detail-drawer__section-divider" />
+
+					<div className="tabs-and-search">
+						<ToggleGroupSimple
+							type="single"
+							className="views-tabs"
+							onChange={handleModeChange}
+							value={selectedView}
+							items={[
+								{
+									value: VIEW_TYPES.OVERVIEW,
+									label: (
+										<div className="view-title">
+											<Table size={14} />
+											Overview
+										</div>
+									),
+								},
+								{
+									value: VIEW_TYPES.CONTEXT,
+									label: (
+										<div className="view-title">
+											<TextSelect size={14} />
+											Context
+										</div>
+									),
+								},
+								{
+									value: VIEW_TYPES.INFRAMETRICS,
+									label: (
+										<div className="view-title">
+											<Histogram size="md" />
+											Metrics
+										</div>
+									),
+								},
+							]}
 						/>
-					</div>
-				)}
 
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<Overview
-						logData={log}
-						onAddToQuery={onAddToQuery}
-						onClickActionItem={onClickActionItem}
-						isListViewPanel={isListViewPanel}
-						selectedOptions={options}
-						listViewPanelSelectedFields={listViewPanelSelectedFields}
-						handleChangeSelectedView={handleChangeSelectedView}
-						onApplyLogFilter={onApplyLogFilter}
-					/>
-				)}
-				{!isLogDetailsV2 && selectedView === VIEW_TYPES.JSON && (
-					<JsonView data={LogJsonData} height="68vh" />
-				)}
-
-				{selectedView === VIEW_TYPES.CONTEXT && (
-					<ContextView
-						log={log}
-						filters={filters}
-						contextQuery={contextQuery}
-						isEdit={isEdit}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.INFRAMETRICS && (
-					<InfraMetrics
-						clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
-						podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
-						nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
-						hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-						timestamp={log.timestamp.toString()}
-						dataSource={DataSource.LOGS}
-					/>
-				)}
-
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<div className="log-detail-drawer__footer-hint">
-						<div className="log-detail-drawer__footer-hint-content">
-							<Typography.Text
-								color="muted"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								Use
-							</Typography.Text>
-							<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
-							<span>/</span>
-							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
-							<Typography.Text
-								color="muted"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								to view previous/next log
-							</Typography.Text>
+						<div className="log-detail-drawer__actions">
+							{selectedView === VIEW_TYPES.CONTEXT && (
+								<Tooltip
+									title="Show Filters"
+									placement="topLeft"
+									aria-label="Show Filters"
+									mouseLeaveDelay={0}
+								>
+									<Button
+										variant="link"
+										color="secondary"
+										size="sm"
+										prefix={<Filter size="lg" />}
+										onClick={handleFilterVisible}
+									/>
+								</Tooltip>
+							)}
 						</div>
 					</div>
-				)}
-			</div>
+					{isFilterVisible && contextQuery?.builder.queryData[0] && (
+						<div className="log-detail-drawer-query-container">
+							<QuerySearch
+								onChange={(value): void => handleQueryExpressionChange(value, 0)}
+								dataSource={DataSource.LOGS}
+								queryData={contextQuery?.builder.queryData[0]}
+								onRun={handleRunQuery}
+							/>
+						</div>
+					)}
+
+					{selectedView === VIEW_TYPES.OVERVIEW && (
+						<Overview
+							logData={log}
+							isListViewPanel={isListViewPanel}
+							handleChangeSelectedView={handleChangeSelectedView}
+							onApplyLogFilter={onApplyLogFilter}
+						/>
+					)}
+					{selectedView === VIEW_TYPES.CONTEXT && (
+						<ContextView
+							log={log}
+							filters={filters}
+							contextQuery={contextQuery}
+							isEdit={isEdit}
+						/>
+					)}
+					{selectedView === VIEW_TYPES.INFRAMETRICS && (
+						<InfraMetrics
+							clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+							podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+							nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+							hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+							timestamp={log.timestamp.toString()}
+							dataSource={DataSource.LOGS}
+						/>
+					)}
+
+					{selectedView === VIEW_TYPES.OVERVIEW && (
+						<div className="log-detail-drawer__footer-hint">
+							<div className="log-detail-drawer__footer-hint-content">
+								<Typography.Text
+									color="muted"
+									className="log-detail-drawer__footer-hint-text"
+								>
+									Use
+								</Typography.Text>
+								<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
+								<span>/</span>
+								<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
+								<Typography.Text
+									color="muted"
+									className="log-detail-drawer__footer-hint-text"
+								>
+									to view previous/next log
+								</Typography.Text>
+							</div>
+						</div>
+					)}
+				</div>
+			</OverlayScrollbar>
 		</Drawer>
 	);
 }

frontend/src/components/LogDetail/useIsLogDetailsV2.ts

@@ -1,11 +0,0 @@
-import ROUTES from 'constants/routes';
-import { useLocation } from 'react-router-dom';
-
-export function useIsLogDetailsV2(): boolean {
-	const { pathname } = useLocation();
-	return (
-		pathname === ROUTES.LOGS_EXPLORER ||
-		pathname.startsWith(ROUTES.INFRASTRUCTURE_MONITORING_BASE) ||
-		pathname.startsWith(`${ROUTES.ALL_DASHBOARD}/`)
-	);
-}

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -1,54 +0,0 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { useCopyToClipboard } from 'react-use';
-import { Popover } from 'antd';
-import { useNotifications } from 'hooks/useNotifications';
-
-function CopyClipboardHOC({
-	entityKey,
-	textToCopy,
-	tooltipText = 'Copy to clipboard',
-	children,
-}: CopyClipboardHOCProps): JSX.Element {
-	const [value, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();
-	useEffect(() => {
-		if (value.value) {
-			const key = entityKey || '';
-
-			const notificationMessage = `${key} copied to clipboard`;
-
-			notifications.success({
-				message: notificationMessage,
-				key: notificationMessage,
-			});
-		}
-	}, [value, notifications, entityKey]);
-
-	const onClick = useCallback((): void => {
-		setCopy(textToCopy);
-	}, [setCopy, textToCopy]);
-
-	return (
-		<span onClick={onClick} role="presentation" tabIndex={-1}>
-			<Popover
-				placement="top"
-				overlayClassName="drawer-popover"
-				content={<span style={{ fontSize: '0.9rem' }}>{tooltipText}</span>}
-			>
-				{children}
-			</Popover>
-		</span>
-	);
-}
-
-interface CopyClipboardHOCProps {
-	entityKey: string | undefined;
-	textToCopy: string;
-	tooltipText?: string;
-	children: ReactNode;
-}
-
-export default CopyClipboardHOC;
-CopyClipboardHOC.defaultProps = {
-	tooltipText: 'Copy to clipboard',
-};

frontend/src/components/NewSelect/CustomMultiSelect.tsx

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

frontend/src/components/NewSelect/CustomSelect.tsx

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

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

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

frontend/src/components/NewSelect/TruncatedTooltip.tsx

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

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

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

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

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

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

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

frontend/src/components/NewSelect/styles.scss

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,8 @@
 	display: flex;
 	flex-direction: row;
 	position: relative;
+	flex: 1;
+	min-height: 0;
 
 	.quick-filters-settings-container {
 		flex: 0 0 0;
@@ -10,6 +12,7 @@
 		overflow: visible;
 		position: relative;
 		align-self: stretch;
+		clip-path: inset(0 -100vw 0 0);
 	}
 }
 

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -57,6 +57,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		showFilterCollapse = true,
 		showQueryName = true,
 		useFieldApis,
+		savedViewsHeader,
 	} = props;
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 	const [params, setParams] = useApiMonitoringParams();
@@ -379,6 +380,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	return (
 		<div className="quick-filters-container">
 			<div className="quick-filters">
+				{savedViewsHeader}
 				{source !== QuickFiltersSource.INFRA_MONITORING && (
 					<section className="header">
 						{renderLeftActions()}

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

@@ -0,0 +1,73 @@
+// The one `overflow: hidden` in the chain. Ancestors (RouteTab, AppLayout)
+// only hand height down; each pane below owns its own scroll.
+.layout {
+	display: flex;
+	flex: 1;
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.sidebar {
+	width: 280px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	position: relative;
+	overflow: visible;
+	z-index: 2;
+}
+
+.savedViews {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	background: var(--l1-background);
+	border-right: 1px solid var(--l1-border);
+}
+
+.quickFilters {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	background: var(--l1-background);
+	transition: transform 0.2s ease-in-out;
+	z-index: 1;
+
+	&.isOpen {
+		transform: translateX(100%);
+	}
+}
+
+// No quick filters: the header sits in flow and the list stays under it
+.isStatic {
+	border-right: 1px solid var(--l1-border);
+
+	.quickFilters {
+		position: static;
+		flex-shrink: 0;
+	}
+
+	.savedViews {
+		border-right: 0;
+	}
+}
+
+// Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
+// `height: 100%`), which owns the scrolling.
+.content {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.contentInner {
+	height: 100%;
+}

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

@@ -0,0 +1,104 @@
+import { ComponentProps, ReactNode, useState } from 'react';
+import cx from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
+import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
+
+import QuickFilters from '../QuickFilters';
+
+import styles from './QuickFiltersLayout.module.scss';
+
+// Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
+type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
+	typeof QuickFilters,
+	ComponentProps<typeof QuickFilters>
+>;
+
+// What the page configures; the layout adds the open / close wiring.
+type SavedViewsElementProps = Omit<
+	ComponentProps<typeof SavedViewsPanel>,
+	'onClose'
+>;
+
+export interface QuickFiltersLayoutProps {
+	quickFilterProps?: QuickFiltersElementProps;
+	savedViewProps?: SavedViewsElementProps;
+	showFilters: boolean;
+	className?: string;
+	contentClassName?: string;
+	testId?: string;
+	children: ReactNode;
+}
+
+function QuickFiltersLayout({
+	quickFilterProps,
+	savedViewProps,
+	showFilters,
+	className,
+	contentClassName,
+	testId,
+	children,
+}: QuickFiltersLayoutProps): JSX.Element {
+	const [isViewsOpen, setIsViewsOpen] = useState(false);
+	const isSavedViewEnabled = useSavedViewEnabled();
+
+	const hasQuickFilters = !!quickFilterProps;
+	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
+
+	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
+
+	const isPanelPinned = hasSavedViews && !hasQuickFilters;
+
+	const isSliding = hasQuickFilters && isViewsOpen;
+
+	const savedViewsHeader = hasSavedViews ? (
+		<SavedViewsHeader
+			{...savedViewProps}
+			onOpenViews={isPanelPinned ? undefined : (): void => setIsViewsOpen(true)}
+		/>
+	) : undefined;
+
+	return (
+		<div className={cx(styles.layout, className)} data-testid={testId}>
+			{showSidebar && (
+				<aside
+					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
+					data-testid="quick-filters-layout-filters"
+				>
+					<div
+						className={cx(styles.quickFilters, { [styles.isOpen]: isSliding })}
+						data-testid="quick-filters-layout-drawer"
+					>
+						{hasQuickFilters ? (
+							<QuickFilters
+								{...quickFilterProps}
+								savedViewsHeader={savedViewsHeader}
+							/>
+						) : (
+							savedViewsHeader
+						)}
+					</div>
+					<div className={styles.savedViews}>
+						{hasSavedViews && (isPanelPinned || isViewsOpen) && (
+							<SavedViewsPanel
+								{...savedViewProps}
+								onClose={isPanelPinned ? undefined : (): void => setIsViewsOpen(false)}
+							/>
+						)}
+					</div>
+				</aside>
+			)}
+			<section
+				className={cx(styles.content, contentClassName)}
+				data-testid="quick-filters-layout-content"
+			>
+				<OverlayScrollbar>
+					<div className={styles.contentInner}>{children}</div>
+				</OverlayScrollbar>
+			</section>
+		</div>
+	);
+}
+
+export default QuickFiltersLayout;

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

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

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

@@ -6,29 +6,22 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
+	height: 100%;
 	background: var(--l1-background);
-	transition: width 0.05s ease-in-out;
+	border-right: 1px solid var(--l1-border);
 	overflow: hidden;
 	color: var(--l1-foreground);
-
-	&.qf-logs-explorer {
-		height: calc(100vh - 45px);
-	}
-
-	&.qf-exceptions {
-		height: 100vh;
-	}
-
-	&.qf-api-monitoring {
-		height: calc(100vh - 45px);
-	}
-
-	&.qf-traces-explorer {
-		height: calc(100vh - 45px);
-	}
+	transition:
+		transform 0.2s ease-in-out,
+		visibility 0s;
 
 	&.hidden {
-		width: 0;
+		transform: translateX(-100%);
+		visibility: hidden;
+		pointer-events: none;
+		transition:
+			transform 0.2s ease-in-out,
+			visibility 0s 0.2s;
 	}
 	.qf-header {
 		display: flex;

frontend/src/components/QuickFilters/types.ts

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

frontend/src/components/RouteTab/RouteTab.module.scss

@@ -0,0 +1,38 @@
+// Hands the parent's height down to the active pane and lets the pane scroll
+// its own content, so TopNav and the tab bar stay put. Child combinators only
+// (nested Tabs must not be caught).
+.routeTab {
+	flex: 1;
+	min-height: 0;
+}
+
+.routeTab > :global(.ant-tabs-content-holder) {
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab > :global(.ant-tabs-content-holder) > :global(.ant-tabs-content) {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab
+	> :global(.ant-tabs-content-holder)
+	> :global(.ant-tabs-content)
+	> :global(.ant-tabs-tabpane-active) {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab
+	> :global(.ant-tabs-content-holder)
+	> :global(.ant-tabs-content)
+	> :global(.ant-tabs-tabpane-active)
+	> :global(.overlay-scrollbar) {
+	flex: 1;
+	min-height: 0;
+}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -5,6 +5,11 @@ import { fireEvent, render, screen } from 'tests/test-utils';
 import RouteTab from './index';
 import { RouteTabProps } from './types';
 
+jest.mock('./RouteTab.module.scss', () => ({
+	__esModule: true,
+	default: { routeTab: 'routeTab' },
+}));
+
 function DummyComponent1(): JSX.Element {
 	return <div>Dummy Component 1</div>;
 }
@@ -74,6 +79,36 @@ describe('RouteTab component', () => {
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
+	it('applies the layout class alongside a custom className', () => {
+		const history = createMemoryHistory();
+		const { container } = render(
+			<Router history={history}>
+				<RouteTab
+					history={history}
+					routes={testRoutes}
+					activeKey="Tab1"
+					className="custom-tabs"
+				/>
+			</Router>,
+		);
+		expect(container.querySelector('.ant-tabs')).toHaveClass(
+			'routeTab',
+			'custom-tabs',
+		);
+	});
+
+	it('renders the active tab content inside an overlay scrollbar', () => {
+		const history = createMemoryHistory();
+		const { container } = render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
+		expect(
+			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
+		).toHaveTextContent('Dummy Component 1');
+	});
+
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
 		const history = createMemoryHistory();

frontend/src/components/RouteTab/index.tsx

@@ -5,20 +5,32 @@ import {
 	useParams,
 } from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
+import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 import { RouteTabProps } from './types';
 
+import styles from './RouteTab.module.scss';
+
 interface Params {
 	[key: string]: string;
 }
 
+/**
+ * Each pane scrolls its own content inside an OverlayScrollbar, so the tab bar
+ * stays put. Mounted as the page root the pane is bounded to the viewport; inside
+ * a plain block wrapper the scroller is inert and the page scrolls as usual.
+ * Pane content that needs a bounded box must size itself with `height: 100%`
+ * (the scroller's viewport is block flow, so `flex: 1` has no effect there).
+ */
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
 	history,
 	showRightSection,
+	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
@@ -50,11 +62,16 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: <Component />,
+		children: (
+			<OverlayScrollbar>
+				<Component />
+			</OverlayScrollbar>
+		),
 	}));
 
 	return (
 		<Tabs
+			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}

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

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

frontend/src/constants/localStorage.ts

@@ -47,4 +47,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
+	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }

frontend/src/constants/panelTypes.ts

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

frontend/src/constants/queryBuilder.ts

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

frontend/src/constants/queryBuilderOperators.ts

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

frontend/src/constants/routes.ts

@@ -38,7 +38,6 @@ const ROUTES = {
 	LOGS_BASE: '/logs',
 	LOGS: '/logs/logs-explorer',
 	LOGS_EXPLORER: '/logs/logs-explorer',
-	LIVE_LOGS: '/logs/logs-explorer/live',
 	LOGS_PIPELINES: '/logs/pipelines',
 	PASSWORD_RESET: '/password-reset',
 	LIST_LICENSES: '/licenses',

frontend/src/constants/theme.ts

@@ -129,6 +129,10 @@ const themeColors = {
 		salmon2: '#FFAB91',
 		salmon3: '#E0876A',
 	},
+	/* Series palette (dark). Hues in the red band are deliberately absent: red is
+	   reserved for thresholds and error states, so an arbitrary series must never
+	   claim it. generateColor indexes by `hash % Object.keys(...).length`, so
+	   adding or removing an entry recolors every existing chart. */
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',
@@ -152,13 +156,13 @@ const themeColors = {
 
 		// Oranges (3)
 		festivalOrange: '#F2994A',
-		coralOrange: '#E17055',
+		amber1: '#E1A155',
 		pumpkin: '#FF7F50',
 
-		// Reds (3)
-		radicalRed: '#FF1A66',
-		crimsonRed: '#EB5757',
-		fireRed: '#E10600',
+		// Olives / Greens (3)
+		olive1: '#DFC33A',
+		olive2: '#D5E55D',
+		green7: '#81C220',
 
 		// Pinks (3)
 		hotPink: '#E84393',
@@ -191,9 +195,9 @@ const themeColors = {
 		orange1: '#D35400',
 		orange2: '#E67E22',
 		orange3: '#F5B041',
-		red1: '#C0392B',
-		red2: '#E74C3C',
-		red3: '#EC7063',
+		green8: '#5AC02B',
+		green9: '#48E043',
+		green10: '#68E788',
 		pink1: '#D81B60',
 		pink2: '#E91E63',
 		pink3: '#F06292',
@@ -212,9 +216,9 @@ const themeColors = {
 		coral1: '#E67E22',
 		coral2: '#F39C12',
 		coral3: '#F5B041',
-		crimson1: '#C0392B',
-		crimson2: '#E74C3C',
-		crimson3: '#EC7063',
+		teal7: '#2BC07B',
+		teal8: '#43E0C5',
+		teal9: '#68D9E7',
 		violet1: '#8E44AD',
 		violet2: '#9B59B6',
 		violet3: '#BB8FCE',
@@ -224,18 +228,18 @@ const themeColors = {
 		forest1: '#27AE60',
 		forest2: '#2ECC71',
 		forest3: '#58D68D',
-		blush1: '#FF6F91',
+		cyan4: '#83C2EB',
 		blush2: '#FF85A2',
 		blush3: '#FFA0B3',
 		lavender1: '#9B59B6',
 		lavender2: '#AF7AC5',
 		lavender3: '#C39BD3',
-		tomato1: '#E74C3C',
-		tomato2: '#EC7063',
-		tomato3: '#F1948A',
-		salmon1: '#FF6B6B',
-		salmon2: '#FF8787',
-		salmon3: '#FFA1A1',
+		blue7: '#4375E0',
+		blue8: '#686DE7',
+		indigo1: '#A68EED',
+		indigo2: '#B980EA',
+		purple6: '#EE98D9',
+		olive3: '#F2F0AE',
 		mustard1: '#F1C40F',
 		mustard2: '#F7DC6F',
 		mustard3: '#F9E79F',
@@ -254,9 +258,9 @@ const themeColors = {
 		blue4: '#2874A6',
 		blue5: '#2E86C1',
 		blue6: '#3498DB',
-		red4: '#C0392B',
-		red5: '#E74C3C',
-		red6: '#EC7063',
+		purple4: '#A52BC0',
+		purple5: '#E043D0',
+		magenta4: '#E768B5',
 		orange4: '#D35400',
 		orange5: '#E67E22',
 		orange6: '#EB984E',
@@ -267,18 +271,19 @@ const themeColors = {
 		gold5: '#F1C40F',
 		gold6: '#F4D03F',
 	},
+	/* Series palette (light). Same red-free constraint as chartcolors above. */
 	lightModeColor: {
-		radicalRed: '#D81B60',
+		magenta1: '#D81B60',
 
 		dodgerBlueDark: '#1E5BD9',
 		steelgrey: '#344B6B',
 		steelpurple: '#5E548E',
 		steelindigo: '#8E4A7C',
 		steelpink: '#B63A6F',
-		steelcoral: '#E14B5A',
+		amber1: '#E1A14B',
 		steelorange: '#E76F2F',
 		steelgold: '#E09B00',
-		steelrust: '#C93A50',
+		olive1: '#C9BD3A',
 		steelgreen: '#2F7D69',
 
 		mediumOrchidDark: '#8E24AA',
@@ -286,17 +291,17 @@ const themeColors = {
 		seaGreen: '#1E7F5A',
 		turquoiseBlueDark: '#007EA7',
 		silverDark: '#5F5F5F',
-		outrageousOrangeDark: '#E64A19',
-		roseBudDark: '#D84315',
+		green1: '#ACDB24',
+		green2: '#66CC21',
 		deepSkyBlueDark: '#0277BD',
 		royalBlue: '#2A4FDB',
 
 		avocadoDark: '#6B6B1E',
 		mintGreenDark: '#2E9E55',
-		chestnut: '#8B3A3A',
+		green3: '#3F8B3A',
 		limaDark: '#5C7F00',
 		olive: '#6E7F00',
-		beautyBushDark: '#C93C3C',
+		green4: '#3CC964',
 
 		danube: '#4F6FB3',
 		oliveDrab: '#4F7F1A',
@@ -304,13 +309,13 @@ const themeColors = {
 		electricLimeDark: '#6B8F00',
 		robin: '#2F4FCC',
 
-		harleyOrange: '#CC2E12',
+		teal1: '#1FBF83',
 		gladeGreen: '#4F7F46',
 		hemlock: '#5C5C45',
 		vidaLoca: '#3D6B00',
 		rust: '#993300',
 
-		red: '#C62828',
+		teal2: '#28C6C1',
 		blue: '#1A237E',
 		green: '#1B7F3A',
 		purple: '#6A1B9A',
@@ -320,7 +325,7 @@ const themeColors = {
 		brown: '#7A3A1E',
 		teal: '#006D6F',
 		limeDark: '#4C8C2B',
-		maroon: '#6D1B1B',
+		cyan1: '#1B546D',
 		navy: '#0D1B5E',
 		gray: '#616161',
 
@@ -328,25 +333,25 @@ const themeColors = {
 		indigo: '#303F9F',
 		slateGray: '#556B7C',
 		chocolate: '#9C4A1A',
-		tomato: '#E53935',
+		blue1: '#3B74DF',
 		steelBlue: '#3A6EA5',
 
 		peruDark: '#B35E00',
 		darkOliveGreen: '#445B1F',
-		indianRed: '#B04040',
+		blue2: '#4041B0',
 		mediumSlateBlue: '#5C6BC0',
-		rosyBrownDark: '#A94444',
+		indigo1: '#6644A9',
 		darkSlateGray: '#2E4A4A',
 
 		fuchsia: '#C511C5',
-		salmonDark: '#E64A3C',
-		darkSalmonDark: '#C85A3A',
+		indigo2: '#AD42E0',
+		purple1: '#C83AC5',
 		paleVioletRedDark: '#C2186A',
 
 		mediumPurple: '#7E57C2',
 		darkOrchid: '#7B1FA2',
 		mediumSeaGreenDark: '#2E8B57',
-		lightCoralDark: '#E57373',
+		purple2: '#E573BC',
 
 		gold: '#D4AF37',
 		sandyBrownDark: '#C76A15',

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

@@ -3,15 +3,22 @@ import {
 	MessageActionKindDTO,
 	SavedViewEntityDTO,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { getAllViews } from 'api/saveView/getAllViews';
-import { getViewById } from 'api/saveView/getViewById';
+import {
+	getSavedView,
+	listSavedViews,
+} from 'api/generated/services/saved-view';
+import {
+	GetSavedView200,
+	ListSavedViews200,
+	SavedviewtypesPanelTypeDTO,
+	SavedviewtypesSavedViewDTO,
+	SavedviewtypesSchemaVersionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
-import { AllViewsProps, ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
-import { AxiosResponse } from 'axios';
 import type { History } from 'history';
 
 import {
@@ -31,8 +38,7 @@ import {
 } from '../resolveOpenResource';
 import { resourceRoute, ResourceType } from '../resourceRoute';
 
-jest.mock('api/saveView/getAllViews');
-jest.mock('api/saveView/getViewById');
+jest.mock('api/generated/services/saved-view');
 
 jest.mock(
 	'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi',
@@ -48,43 +54,45 @@ jest.mock(
 	}),
 );
 
-const mockedGetAllViews = getAllViews as jest.MockedFunction<
-	typeof getAllViews
+const mockedListSavedViews = listSavedViews as jest.MockedFunction<
+	typeof listSavedViews
 >;
-const mockedGetViewById = getViewById as jest.MockedFunction<
-	typeof getViewById
+const mockedGetSavedView = getSavedView as jest.MockedFunction<
+	typeof getSavedView
 >;
 
-function makeView(id: string, sourcePage: DataSource): ViewProps {
+function makeView(
+	id: string,
+	source: SavedviewtypesSourceDTO,
+): SavedviewtypesSavedViewDTO {
 	return {
 		id,
-		name: `View ${id}`,
-		category: 'test',
+		name: `view-${id}`,
+		source,
+		schemaVersion: SavedviewtypesSchemaVersionDTO.v2,
 		createdAt: '2021-07-07T06:31:00.000Z',
 		createdBy: 'user',
 		updatedAt: '2021-07-07T06:33:00.000Z',
 		updatedBy: 'user',
-		sourcePage,
-		tags: [],
-		extraData: '',
-		compositeQuery: {
-			panelType: PANEL_TYPES.LIST,
-		} as ICompositeMetricQuery,
-	};
+		spec: {
+			displayName: `View ${id}`,
+			panelType: SavedviewtypesPanelTypeDTO.list,
+			requestType: 'raw',
+			queries: [{ type: 'builder_query', spec: { name: 'A', signal: source } }],
+		},
+	} as unknown as SavedviewtypesSavedViewDTO;
 }
 
-function mockViewsResponse(views: ViewProps[]): AxiosResponse<AllViewsProps> {
-	return {
-		data: { status: 'success', data: views },
-	} as AxiosResponse<AllViewsProps>;
+function mockViewsResponse(
+	views: SavedviewtypesSavedViewDTO[],
+): ListSavedViews200 {
+	return { status: 'success', data: views };
 }
 
 function mockViewByIdResponse(
-	view: ViewProps,
-): AxiosResponse<{ status: string; data: ViewProps }> {
-	return {
-		data: { status: 'success', data: view },
-	} as AxiosResponse<{ status: string; data: ViewProps }>;
+	view: SavedviewtypesSavedViewDTO,
+): GetSavedView200 {
+	return { status: 'success', data: view };
 }
 
 describe('resourceRoute', () => {
@@ -190,18 +198,33 @@ describe('resolveOpenResource', () => {
 
 describe('findSavedViewInLists', () => {
 	beforeEach(() => {
-		mockedGetAllViews.mockReset();
+		mockedListSavedViews.mockReset();
 	});
 
 	it('loads only the hinted source when entity is provided', async () => {
-		const tracesView = makeView('view-traces', DataSource.TRACES);
-		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([tracesView]));
+		const tracesView = makeView('view-traces', SavedviewtypesSourceDTO.traces);
+		mockedListSavedViews.mockResolvedValueOnce(mockViewsResponse([tracesView]));
 
 		const result = await findSavedViewInLists('view-traces', DataSource.TRACES);
 
 		expect(result).toStrictEqual(tracesView);
-		expect(mockedGetAllViews).toHaveBeenCalledTimes(1);
-		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
+		expect(mockedListSavedViews).toHaveBeenCalledTimes(1);
+		expect(mockedListSavedViews).toHaveBeenCalledWith({
+			source: SavedviewtypesSourceDTO.traces,
+		});
+	});
+
+	it('treats a null list as empty and probes the next source', async () => {
+		const metricsView = makeView('view-metrics', SavedviewtypesSourceDTO.metrics);
+		mockedListSavedViews
+			.mockResolvedValueOnce({ status: 'success', data: null })
+			.mockResolvedValueOnce(mockViewsResponse([]))
+			.mockResolvedValueOnce(mockViewsResponse([metricsView]));
+
+		const result = await findSavedViewInLists('view-metrics');
+
+		expect(result).toStrictEqual(metricsView);
+		expect(mockedListSavedViews).toHaveBeenCalledTimes(3);
 	});
 });
 
@@ -227,52 +250,75 @@ describe('openSavedView', () => {
 	it('navigates with history.push and view query params', () => {
 		const push = jest.fn();
 		const history = { push } as unknown as History;
-		const view = makeView('view-logs', DataSource.LOGS);
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
 
 		openSavedView(view, history);
 
 		expect(push).toHaveBeenCalledTimes(1);
 		const pushedUrl = push.mock.calls[0][0] as string;
 		expect(pushedUrl).toContain(ROUTES.LOGS_EXPLORER);
-		expect(pushedUrl).toContain(QueryParams.viewKey);
+		const params = new URLSearchParams(pushedUrl.split('?')[1]);
+		expect(params.get(QueryParams.viewKey)).toBe('"view-logs"');
+		expect(params.get(QueryParams.viewName)).toBe('"View view-logs"');
+		expect(params.get(QueryParams.panelTypes)).toBe('"list"');
+	});
+
+	it('throws when the view has no source', () => {
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
+		delete view.source;
+
+		expect(() =>
+			openSavedView(view, { push: jest.fn() } as unknown as History),
+		).toThrow('Unsupported saved view source');
+	});
+
+	it('throws when the view has no queries', () => {
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
+		view.spec.queries = [];
+
+		expect(() =>
+			openSavedView(view, { push: jest.fn() } as unknown as History),
+		).toThrow('Saved view is missing query data');
 	});
 });
 
 describe('openSavedViewByKey', () => {
 	beforeEach(() => {
-		mockedGetAllViews.mockReset();
-		mockedGetViewById.mockReset();
+		mockedListSavedViews.mockReset();
+		mockedGetSavedView.mockReset();
 	});
 
 	it('prefers the direct view lookup endpoint', async () => {
-		const view = makeView('view-logs', DataSource.LOGS);
-		mockedGetViewById.mockResolvedValueOnce(mockViewByIdResponse(view));
+		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
+		mockedGetSavedView.mockResolvedValueOnce(mockViewByIdResponse(view));
 		const push = jest.fn();
 		const history = { push } as unknown as History;
 
 		await openSavedViewByKey('view-logs', DataSource.LOGS, history);
 
-		expect(mockedGetViewById).toHaveBeenCalledWith('view-logs');
-		expect(mockedGetAllViews).not.toHaveBeenCalled();
+		expect(mockedGetSavedView).toHaveBeenCalledWith({ id: 'view-logs' });
+		expect(mockedListSavedViews).not.toHaveBeenCalled();
 		expect(push).toHaveBeenCalled();
 	});
 
 	it('falls back to list probing when direct lookup fails', async () => {
-		const view = makeView('view-traces', DataSource.TRACES);
-		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
-		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([view]));
+		const view = makeView('view-traces', SavedviewtypesSourceDTO.traces);
+		mockedGetSavedView.mockRejectedValueOnce(new Error('not found'));
+		mockedListSavedViews.mockResolvedValueOnce(mockViewsResponse([view]));
 		const push = jest.fn();
 		const history = { push } as unknown as History;
 
 		await openSavedViewByKey('view-traces', DataSource.TRACES, history);
 
-		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
+		expect(mockedListSavedViews).toHaveBeenCalledWith({
+			source: SavedviewtypesSourceDTO.traces,
+		});
 		expect(push).toHaveBeenCalled();
 	});
 
 	it('throws when the saved view does not exist', async () => {
-		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
-		mockedGetAllViews.mockResolvedValue(mockViewsResponse([]));
+		mockedGetSavedView.mockRejectedValueOnce(new Error('not found'));
+		mockedListSavedViews.mockResolvedValue(mockViewsResponse([]));
 
 		await expect(
 			openSavedViewByKey('missing', DataSource.LOGS, {

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

@@ -1,15 +1,22 @@
-import { getAllViews } from 'api/saveView/getAllViews';
-import { getViewById } from 'api/saveView/getViewById';
+import {
+	getSavedView,
+	listSavedViews,
+} from 'api/generated/services/saved-view';
+import { SavedviewtypesSavedViewDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import {
+	findSavedView,
+	getSavedViewQuery,
+	SavedViewSourcePage,
+	toSavedViewSource,
+} from 'container/SavedViews/utils';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
-import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { History } from 'history';
 
-type SavedViewSourceHint = DataSource | 'meter';
+type SavedViewSourceHint = SavedViewSourcePage;
 
 const DEFAULT_PROBE_SOURCES: SavedViewSourceHint[] = [
 	DataSource.LOGS,
@@ -20,13 +27,15 @@ const DEFAULT_PROBE_SOURCES: SavedViewSourceHint[] = [
 export async function findSavedViewInLists(
 	viewKey: string,
 	sourceHint?: SavedViewSourceHint | null,
-): Promise<ViewProps | null> {
+): Promise<SavedviewtypesSavedViewDTO | null> {
 	const sources = sourceHint ? [sourceHint] : DEFAULT_PROBE_SOURCES;
 
 	for (const source of sources) {
 		try {
-			const response = await getAllViews(source);
-			const match = response.data.data.find((view) => view.id === viewKey);
+			const response = await listSavedViews({
+				source: toSavedViewSource(source),
+			});
+			const match = findSavedView(response.data, viewKey);
 			if (match) {
 				return match;
 			}
@@ -41,11 +50,11 @@ export async function findSavedViewInLists(
 async function loadSavedView(
 	viewKey: string,
 	sourceHint?: SavedViewSourceHint | null,
-): Promise<ViewProps> {
+): Promise<SavedviewtypesSavedViewDTO> {
 	try {
-		const response = await getViewById(viewKey);
-		if (response.data?.data) {
-			return response.data.data;
+		const response = await getSavedView({ id: viewKey });
+		if (response.data) {
+			return response.data;
 		}
 	} catch {
 		// Fall back to list probing when the direct lookup fails.
@@ -85,20 +94,23 @@ export function buildExplorerNavigationUrl(
 	return `${route}?${params.toString()}`;
 }
 
-export function openSavedView(view: ViewProps, history: History): void {
-	const route = explorerRouteForSourcePage(view.sourcePage);
+export function openSavedView(
+	view: SavedviewtypesSavedViewDTO,
+	history: History,
+): void {
+	const route = view.source ? explorerRouteForSourcePage(view.source) : null;
 	if (!route) {
 		throw new Error('Unsupported saved view source');
 	}
 
-	if (!view.compositeQuery) {
+	if (!view.spec.queries?.length) {
 		throw new Error('Saved view is missing query data');
 	}
 
-	const query = mapQueryDataFromApi(view.compositeQuery);
+	const query = getSavedViewQuery(view);
 	const url = buildExplorerNavigationUrl(route, query, {
-		[QueryParams.panelTypes]: view.compositeQuery.panelType as PANEL_TYPES,
-		[QueryParams.viewName]: view.name,
+		[QueryParams.panelTypes]: view.spec.panelType as unknown as PANEL_TYPES,
+		[QueryParams.viewName]: view.spec.displayName,
 		[QueryParams.viewKey]: view.id,
 	});
 	history.push(url);
@@ -112,6 +124,3 @@ export async function openSavedViewByKey(
 	const view = await loadSavedView(viewKey, sourceHint);
 	openSavedView(view, history);
 }
-
-/** @deprecated Use findSavedViewInLists — kept for tests. */
-export const findSavedView = findSavedViewInLists;

frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.module.scss

@@ -75,6 +75,38 @@
 	word-break: break-word;
 }
 
+// Error bubble: a subtle error-tinted callout replacing the default
+// assistant background, rendered when a turn fails.
+.bubble.error {
+	.assistant & {
+		background: var(--callout-error-background);
+		border: 1px solid var(--callout-error-border);
+	}
+}
+
+.errorContent {
+	display: flex;
+	align-items: flex-start;
+	gap: 8px;
+}
+
+.errorIcon {
+	flex-shrink: 0;
+	margin-top: 2px;
+	color: var(--destructive);
+}
+
+.errorText {
+	color: var(--callout-error-title);
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.retryButton {
+	margin-top: 6px;
+	align-self: flex-start;
+}
+
 // User-bubble row: pencil button sits to the LEFT of the bubble within
 // the right-aligned message line, so it visually "ends" at the bubble's
 // right edge while keeping the bubble in its original position.

frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx

@@ -2,6 +2,10 @@ import React, { useMemo } from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { Button } from '@signozhq/ui/button';
+import { RotateCw, TriangleAlert } from '@signozhq/icons';
+
+import { RetryActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 // Side-effect: registers all built-in block types into the BlockRegistry
 import '../blocks';
@@ -104,18 +108,23 @@ function renderGroup(group: RenderGroup): JSX.Element {
 interface MessageBubbleProps {
 	message: Message;
 	onRegenerate?: () => void;
+	onRetry?: () => void;
 	isLastAssistant?: boolean;
 }
 
 export default function MessageBubble({
 	message,
 	onRegenerate,
+	onRetry,
 	isLastAssistant = false,
 }: MessageBubbleProps): JSX.Element {
 	const variant = useVariant();
 	const isCompact = variant === 'panel';
 	const isUser = message.role === 'user';
+	const isError = !isUser && Boolean(message.isError);
 	const hasBlocks = !isUser && message.blocks && message.blocks.length > 0;
+	const showRetry =
+		isError && message.retryAction === RetryActionDTO.manual && Boolean(onRetry);
 
 	// Recompute groups only when the blocks array identity changes — store
 	// updates that don't touch this message's blocks should not re-render the
@@ -138,7 +147,7 @@ export default function MessageBubble({
 		<div className={messageClass} data-testid={`ai-message-${message.id}`}>
 			<div className={bodyClass}>
 				<div className={styles.bubbleRow}>
-					<div className={styles.bubble}>
+					<div className={cx(styles.bubble, { [styles.error]: isError })}>
 						{message.attachments && message.attachments.length > 0 && (
 							<div className={styles.attachments}>
 								{message.attachments.map((att) => {
@@ -161,6 +170,11 @@ export default function MessageBubble({
 
 						{isUser ? (
 							<p className={styles.text}>{message.content}</p>
+						) : isError ? (
+							<div className={styles.errorContent}>
+								<TriangleAlert size={14} className={styles.errorIcon} />
+								<span className={styles.errorText}>{message.content}</span>
+							</div>
 						) : hasBlocks ? (
 							<MessageContext.Provider value={{ messageId: message.id }}>
 								{groups.map((g) => renderGroup(g))}
@@ -183,7 +197,21 @@ export default function MessageBubble({
 					</div>
 				</div>
 
-				{!isUser && !message.isRateLimitError && (
+				{showRetry && (
+					<Button
+						className={styles.retryButton}
+						size="sm"
+						variant="ghost"
+						color="secondary"
+						onClick={onRetry}
+						testId={`ai-message-retry-${message.id}`}
+					>
+						<RotateCw size={12} />
+						Retry
+					</Button>
+				)}
+
+				{!isUser && !isError && !message.isRateLimitError && (
 					<MessageFeedback
 						message={message}
 						onRegenerate={onRegenerate}

frontend/src/container/AIAssistant/components/MessageBubble/__tests__/MessageBubble.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen, userEvent } from 'tests/test-utils';
+import {
+	ErrorCodeDTO,
+	RetryActionDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+import { Message } from '../../../types';
+
+// react-markdown + remark-gfm are ESM-only and pull a large untransformed
+// dependency chain into jest. The error-rendering path under test renders
+// plain text (no markdown), so stub them to keep the import graph loadable.
+jest.mock('react-markdown', () => ({
+	__esModule: true,
+	default: ({ children }: { children?: React.ReactNode }): React.ReactNode =>
+		children,
+}));
+jest.mock('remark-gfm', () => ({
+	__esModule: true,
+	default: (): void => undefined,
+}));
+
+// eslint-disable-next-line import/first
+import MessageBubble from '../MessageBubble';
+
+function errorMessage(overrides: Partial<Message> = {}): Message {
+	return {
+		id: 'err-1',
+		role: 'assistant',
+		content: 'This conversation is still finishing a previous response.',
+		isError: true,
+		errorCode: ErrorCodeDTO.thread_busy,
+		retryAction: RetryActionDTO.manual,
+		createdAt: 0,
+		...overrides,
+	};
+}
+
+const retryButton = (): HTMLElement | null =>
+	screen.queryByRole('button', { name: /retry/i });
+
+describe('MessageBubble — error rendering', () => {
+	it('shows a Retry button for a manual error and invokes onRetry on click', async () => {
+		const onRetry = jest.fn();
+		render(<MessageBubble message={errorMessage()} onRetry={onRetry} />);
+
+		// Error copy is rendered, and the feedback bar is suppressed on errors.
+		expect(
+			screen.getByText(/still finishing a previous response/i),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /copy message/i }),
+		).not.toBeInTheDocument();
+
+		const button = retryButton();
+		expect(button).toBeInTheDocument();
+		await userEvent.click(button as HTMLElement);
+		expect(onRetry).toHaveBeenCalledTimes(1);
+	});
+
+	it('hides the Retry button when retryAction is none', () => {
+		render(
+			<MessageBubble
+				message={errorMessage({ retryAction: RetryActionDTO.none })}
+				onRetry={jest.fn()}
+			/>,
+		);
+		expect(retryButton()).not.toBeInTheDocument();
+	});
+
+	it('hides the Retry button when retryAction is auto', () => {
+		render(
+			<MessageBubble
+				message={errorMessage({ retryAction: RetryActionDTO.auto })}
+				onRetry={jest.fn()}
+			/>,
+		);
+		expect(retryButton()).not.toBeInTheDocument();
+	});
+
+	it('hides the Retry button when no onRetry handler is provided', () => {
+		render(<MessageBubble message={errorMessage()} />);
+		expect(retryButton()).not.toBeInTheDocument();
+	});
+});

frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.tsx

@@ -37,6 +37,9 @@ export default function VirtualizedMessages({
 	const regenerateAssistantMessage = useAIAssistantStore(
 		(s) => s.regenerateAssistantMessage,
 	);
+	const retryAssistantMessage = useAIAssistantStore(
+		(s) => s.retryAssistantMessage,
+	);
 	const { threadId } = useAIAssistantAnalyticsContext(conversationId);
 	const streamingStatus = useAIAssistantStore(
 		(s) => s.streams[conversationId]?.streamingStatus ?? '',
@@ -85,6 +88,14 @@ export default function VirtualizedMessages({
 		[conversationId, isStreaming, regenerateAssistantMessage, threadId],
 	);
 
+	const handleRetry = useCallback((): void => {
+		if (isStreaming) {
+			return;
+		}
+		void logEvent(AIAssistantEvents.RetryClicked, { threadId });
+		void retryAssistantMessage(conversationId);
+	}, [conversationId, isStreaming, retryAssistantMessage, threadId]);
+
 	// Scroll all the way to the actual bottom — including the 64px of bottom
 	// padding on the scroller — so the last bubble has visible breathing room
 	// above the disclaimer / input bar. Virtuoso's `scrollToIndex(LAST,
@@ -206,6 +217,11 @@ export default function VirtualizedMessages({
 									? (): void => handleRegenerate(msg.id)
 									: undefined
 							}
+							onRetry={
+								msg.isError && isLastAssistant && !showStreamingSlot
+									? handleRetry
+									: undefined
+							}
 							isLastAssistant={isLastAssistant}
 						/>
 					);

frontend/src/container/AIAssistant/events.ts

@@ -90,6 +90,7 @@ export enum AIAssistantEvents {
 	SuggestedPromptClicked = 'AI Assistant: Suggested prompt clicked',
 	CancelClicked = 'AI Assistant: Cancel clicked',
 	RegenerateClicked = 'AI Assistant: Regenerate clicked',
+	RetryClicked = 'AI Assistant: Retry clicked',
 	MessageCopied = 'AI Assistant: Message copied',
 	FeedbackSubmitted = 'AI Assistant: Feedback submitted',
 	ResourceOpened = 'AI Assistant: Resource opened',

frontend/src/container/AIAssistant/store/__tests__/useAIAssistantStore.test.ts

@@ -0,0 +1,263 @@
+import {
+	ErrorCodeDTO,
+	RetryActionDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import type { SSEEvent } from 'api/ai-assistant/chat';
+
+import { useAIAssistantStore } from '../useAIAssistantStore';
+import type { Message } from '../../types';
+
+// The store talks to the chat API only through these named exports. Mock the
+// whole module so we can drive the SSE stream + REST calls deterministically.
+jest.mock('api/ai-assistant/chat', () => ({
+	__esModule: true,
+	createThread: jest.fn(),
+	sendMessage: jest.fn(),
+	streamEvents: jest.fn(),
+	approveExecution: jest.fn(),
+	clarifyExecution: jest.fn(),
+	regenerateMessage: jest.fn(),
+	rejectExecution: jest.fn(),
+	cancelExecution: jest.fn(),
+	listThreads: jest.fn(),
+	getThreadDetail: jest.fn(),
+	updateThread: jest.fn(),
+	submitFeedback: jest.fn(),
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+const chat = jest.requireMock('api/ai-assistant/chat') as Record<
+	string,
+	jest.Mock
+>;
+
+// Builds a single-use async stream from a fixed list of SSE events.
+async function* eventStream(events: SSEEvent[]): AsyncGenerator<SSEEvent> {
+	for (const event of events) {
+		yield event;
+	}
+}
+
+function errorEvent(
+	executionId: string,
+	code: ErrorCodeDTO,
+	retryAction: RetryActionDTO,
+): SSEEvent {
+	return {
+		type: 'error',
+		executionId,
+		error: { code, message: 'backend message' },
+		retryAction,
+	};
+}
+
+function lastMessage(conversationId: string): Message {
+	const conv = useAIAssistantStore.getState().conversations[conversationId];
+	return conv.messages[conv.messages.length - 1];
+}
+
+describe('useAIAssistantStore — streaming error handling', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		useAIAssistantStore.setState((s) => {
+			s.conversations = {};
+			s.streams = {};
+			s.activeConversationId = null;
+		});
+	});
+
+	it('commits a manually-retryable error bubble with friendly copy and metadata', async () => {
+		chat.createThread.mockResolvedValue('thread-1');
+		chat.sendMessage.mockResolvedValue('exec-1');
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				errorEvent('exec-1', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
+			]),
+		);
+
+		useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().sendMessage('hello');
+
+		const conv = useAIAssistantStore.getState().conversations['thread-1'];
+		expect(conv.messages).toHaveLength(2);
+		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hello' });
+		expect(conv.messages[1]).toMatchObject({
+			role: 'assistant',
+			isError: true,
+			errorCode: ErrorCodeDTO.thread_busy,
+			retryAction: RetryActionDTO.manual,
+		});
+		// Code-specific FE copy, not the raw backend message.
+		expect(conv.messages[1].content).toContain(
+			'still finishing a previous response',
+		);
+	});
+
+	it('replays the send on retry without re-pushing the user message', async () => {
+		chat.createThread.mockResolvedValue('thread-1');
+		chat.sendMessage.mockResolvedValue('exec-1');
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				errorEvent('exec-1', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
+			]),
+		);
+
+		useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().sendMessage('hello');
+
+		// The retry succeeds this time.
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				{
+					type: 'message',
+					executionId: 'exec-1',
+					messageId: 'm1',
+					delta: 'Hi there',
+					done: true,
+				},
+			]),
+		);
+
+		await useAIAssistantStore.getState().retryAssistantMessage('thread-1');
+
+		const conv = useAIAssistantStore.getState().conversations['thread-1'];
+		// Error bubble replaced by the assistant reply; the user message stays.
+		expect(conv.messages).toHaveLength(2);
+		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hello' });
+		expect(conv.messages[1]).toMatchObject({
+			role: 'assistant',
+			content: 'Hi there',
+		});
+		expect(conv.messages[1].isError).toBeUndefined();
+		// Thread already existed on retry; the user message was never re-sent as new.
+		expect(chat.createThread).toHaveBeenCalledTimes(1);
+		expect(chat.sendMessage).toHaveBeenCalledTimes(2);
+	});
+
+	it('silently retries auto-flagged errors, then downgrades to manual once spent', async () => {
+		chat.createThread.mockResolvedValue('thread-2');
+		chat.sendMessage.mockResolvedValue('exec');
+		// Always auto-retryable: 1 initial attempt + MAX_AUTO_RETRIES (2) = 3 sends.
+		chat.streamEvents.mockImplementation(() =>
+			eventStream([
+				errorEvent('exec', ErrorCodeDTO.internal_error, RetryActionDTO.auto),
+			]),
+		);
+
+		useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().sendMessage('hi');
+
+		expect(chat.sendMessage).toHaveBeenCalledTimes(3);
+		expect(lastMessage('thread-2')).toMatchObject({
+			isError: true,
+			errorCode: ErrorCodeDTO.internal_error,
+			// Auto budget exhausted → presented as manual so a Retry button shows.
+			retryAction: RetryActionDTO.manual,
+		});
+	}, 10000);
+
+	it('marks rate-limit errors and offers no retry', async () => {
+		chat.createThread.mockResolvedValue('thread-3');
+		chat.sendMessage.mockResolvedValue('exec');
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				errorEvent('exec', ErrorCodeDTO.hourly_message_limit, RetryActionDTO.none),
+			]),
+		);
+
+		useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().sendMessage('hi');
+
+		expect(lastMessage('thread-3')).toMatchObject({
+			isError: true,
+			isRateLimitError: true,
+			retryAction: RetryActionDTO.none,
+		});
+
+		// No retry thunk registered for a non-retryable error — retry is a no-op.
+		const before =
+			useAIAssistantStore.getState().conversations['thread-3'].messages.length;
+		await useAIAssistantStore.getState().retryAssistantMessage('thread-3');
+		expect(
+			useAIAssistantStore.getState().conversations['thread-3'].messages,
+		).toHaveLength(before);
+	});
+
+	it('recovers silently when an auto-flagged error succeeds on retry', async () => {
+		chat.createThread.mockResolvedValue('thread-4');
+		chat.sendMessage.mockResolvedValue('exec');
+		chat.streamEvents
+			.mockReturnValueOnce(
+				eventStream([
+					errorEvent('exec', ErrorCodeDTO.internal_error, RetryActionDTO.auto),
+				]),
+			)
+			.mockReturnValueOnce(
+				eventStream([
+					{
+						type: 'message',
+						executionId: 'exec',
+						messageId: 'm1',
+						delta: 'Recovered',
+						done: true,
+					},
+				]),
+			);
+
+		useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().sendMessage('hi');
+
+		// 1 initial attempt + 1 silent auto retry, then success — no error bubble.
+		expect(chat.sendMessage).toHaveBeenCalledTimes(2);
+		const conv = useAIAssistantStore.getState().conversations['thread-4'];
+		expect(conv.messages).toHaveLength(2);
+		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hi' });
+		expect(conv.messages[1]).toMatchObject({
+			role: 'assistant',
+			content: 'Recovered',
+		});
+		expect(conv.messages.some((m) => m.isError)).toBe(false);
+	}, 10000);
+
+	it('replays the originating action on retry for a non-send error (approve)', async () => {
+		chat.approveExecution.mockResolvedValue('exec-a');
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				errorEvent('exec-a', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
+			]),
+		);
+
+		const convId = useAIAssistantStore.getState().startNewConversation();
+		await useAIAssistantStore.getState().approveAction(convId, 'approval-1');
+
+		expect(lastMessage(convId)).toMatchObject({
+			isError: true,
+			retryAction: RetryActionDTO.manual,
+		});
+		expect(chat.approveExecution).toHaveBeenCalledTimes(1);
+
+		// Retry replays the approval (not a send) and succeeds this time.
+		chat.streamEvents.mockReturnValueOnce(
+			eventStream([
+				{
+					type: 'message',
+					executionId: 'exec-a',
+					messageId: 'm1',
+					delta: 'Approved',
+					done: true,
+				},
+			]),
+		);
+		await useAIAssistantStore.getState().retryAssistantMessage(convId);
+
+		const conv = useAIAssistantStore.getState().conversations[convId];
+		expect(conv.messages).toHaveLength(1);
+		expect(conv.messages[0]).toMatchObject({
+			role: 'assistant',
+			content: 'Approved',
+		});
+		expect(conv.messages[0].isError).toBeUndefined();
+		expect(chat.approveExecution).toHaveBeenCalledTimes(2);
+		expect(chat.sendMessage).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/AIAssistant/store/useAIAssistantStore.ts

@@ -8,6 +8,7 @@ import type {
 	MessageActionDTO,
 	MessageSummaryDTOBlocksAnyOfItem,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { RetryActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 import {
 	approveExecution,
@@ -35,7 +36,10 @@ import {
 	MessageBlock,
 	MessageRole,
 } from '../types';
-import { resolveAssistantErrorMessage } from '../utils/resolveAssistantErrorMessage';
+import {
+	resolveAssistantError,
+	type AssistantErrorResolution,
+} from '../utils/resolveAssistantError';
 
 // ---------------------------------------------------------------------------
 // Types used by module-level helpers
@@ -56,6 +60,15 @@ interface SSEStreamCtx {
 
 const streamControllers = new Map<string, AbortController>();
 
+/**
+ * Per-conversation retry thunks for the most recent failed turn. Populated by
+ * `finalizeStreamingError` when the error is manually retryable; consumed by
+ * the `retryAssistantMessage` action when the user clicks Retry. Transient
+ * (not persisted) — it shares the in-memory lifetime of the error bubble it
+ * backs, so a page reload drops both together.
+ */
+const retryRegistry = new Map<string, () => Promise<void>>();
+
 function abortStream(conversationId: string): void {
 	const ctrl = streamControllers.get(conversationId);
 	if (ctrl) {
@@ -197,7 +210,7 @@ function resetStreamingState(
  * Marker thrown by `runStreamingLoop` when an SSE event reports
  * `invalid_token`. Callers that own an originating action (sendMessage /
  * approve / clarify / regenerate) catch this and re-issue that action via
- * `streamWithAuthRetry`; the retry's first REST call will 401, at which point
+ * `streamWithRetry`; the retry's first REST call will 401, at which point
  * the shared axios `interceptorRejected` rotates the access token and replays.
  */
 class AuthExpiredError extends Error {
@@ -207,27 +220,50 @@ class AuthExpiredError extends Error {
 	}
 }
 
+/** Capped silent re-attempts for backend-flagged transient (`auto`) errors. */
+const MAX_AUTO_RETRIES = 2;
+/** Backoff before each auto re-attempt, indexed by prior auto-retry count. */
+const AUTO_RETRY_BACKOFF_MS = [500, 1500];
+
+function delay(ms: number): Promise<void> {
+	return new Promise((resolve) => {
+		setTimeout(resolve, ms);
+	});
+}
+
+/** True when the SSE error carries the backend's `retryAction: 'auto'` flag. */
+function isAutoRetryableError(err: unknown): boolean {
+	return (
+		(err as { retryAction?: unknown } | undefined)?.retryAction ===
+		RetryActionDTO.auto
+	);
+}
+
 /**
  * Runs the originating action (e.g. sendMessage POST) and streams the
- * resulting execution. On `AuthExpiredError`, re-issues `start` once — the
- * retry's REST call hits 401, the shared axios interceptor rotates the
- * access token and replays, and the new SSE picks up the rotated token from
- * localStorage. Backend signals `retryAction: 'manual'` for `invalid_token`,
- * so the dead execution can't be resumed — only a fresh one helps.
+ * resulting execution, with two independent retry budgets:
+ *
+ *   • Auth — on `AuthExpiredError` (SSE `invalid_token`), re-issues `start`
+ *     once. The retry's REST call 401s, the shared axios interceptor rotates
+ *     the access token + replays, and the new SSE picks up the rotated token.
+ *     Backend flags `invalid_token` as `manual`, so only a fresh execution helps.
+ *   • Auto — on an SSE error the backend flagged `retryAction: 'auto'`
+ *     (transient), silently re-issues `start` up to `MAX_AUTO_RETRIES` times
+ *     with backoff. Once exhausted the error propagates so the caller can
+ *     surface a manual Retry affordance.
+ *
+ * Both reset the stream state before re-attempting so a dead execution's
+ * partial output isn't concatenated onto the retry.
  */
-async function streamWithAuthRetry(
+async function streamWithRetry(
 	conversationId: string,
 	start: () => Promise<string>,
 	set: StoreSetter,
 ): Promise<void> {
-	for (let attempt = 0; attempt <= 1; attempt += 1) {
-		if (attempt > 0) {
-			// Drop any partial content/events from the previous attempt so the
-			// retried execution's stream isn't concatenated with the dead one.
-			set((s) => {
-				resetStreamingState(s, conversationId);
-			});
-		}
+	let authRetried = false;
+	let autoRetries = 0;
+
+	for (;;) {
 		// eslint-disable-next-line no-await-in-loop
 		const executionId = await start();
 		const ctrl = newStreamController(conversationId);
@@ -242,10 +278,28 @@ async function streamWithAuthRetry(
 			return;
 		} catch (err) {
 			streamControllers.delete(conversationId);
-			if (err instanceof AuthExpiredError && attempt < 1) {
-				continue;
+
+			if (err instanceof AuthExpiredError && !authRetried) {
+				authRetried = true;
+			} else if (isAutoRetryableError(err) && autoRetries < MAX_AUTO_RETRIES) {
+				// eslint-disable-next-line no-await-in-loop
+				await delay(AUTO_RETRY_BACKOFF_MS[autoRetries] ?? 1500);
+				autoRetries += 1;
+			} else {
+				if (isAutoRetryableError(err)) {
+					// Auto-retry budget spent — present the failure as manually
+					// retryable so the caller surfaces a Retry button rather than
+					// silently giving up.
+					(err as { retryAction?: RetryActionDTO }).retryAction =
+						RetryActionDTO.manual;
+				}
+				throw err;
 			}
-			throw err;
+
+			// Drop partial content/events from the failed attempt before retrying.
+			set((s) => {
+				resetStreamingState(s, conversationId);
+			});
 		}
 	}
 }
@@ -258,7 +312,7 @@ async function streamWithAuthRetry(
  *
  * On an `invalid_token` error event (e.g. MCP auth expired mid-execution),
  * throws `AuthExpiredError` so the caller can re-issue the originating
- * action via `streamWithAuthRetry`. We don't refresh here ourselves — the
+ * action via `streamWithRetry`. We don't refresh here ourselves — the
  * retry's REST call will 401 and the shared axios `interceptorRejected`
  * handles rotation + replay. Throws on any other `error` event — the
  * caller's catch block handles UI feedback.
@@ -484,20 +538,37 @@ function hasPendingInput(conversationId: string, get: StoreGetter): boolean {
 	return Boolean(stream?.pendingApproval || stream?.pendingClarification);
 }
 
+/**
+ * Commits a failed turn as an error message and removes the stream entry.
+ * When the failure is manually retryable and a `retry` thunk is supplied, the
+ * thunk is stashed in `retryRegistry` so the bubble's Retry button can replay
+ * the originating action.
+ */
 function finalizeStreamingError(
 	conversationId: string,
-	errorContent: string,
+	resolution: AssistantErrorResolution,
 	set: StoreSetter,
-	isRateLimit = false,
+	retry?: () => Promise<void>,
 ): void {
+	const { message, code, retryAction, isRateLimit } = resolution;
+
+	if (retryAction === RetryActionDTO.manual && retry) {
+		retryRegistry.set(conversationId, retry);
+	} else {
+		retryRegistry.delete(conversationId);
+	}
+
 	set((s) => {
 		const conv = s.conversations[conversationId];
 		if (conv) {
 			conv.messages.push({
 				id: uuidv4(),
 				role: 'assistant',
-				content: errorContent,
+				content: message,
 				createdAt: Date.now(),
+				isError: true,
+				retryAction,
+				...(code ? { errorCode: code } : {}),
 				...(isRateLimit ? { isRateLimitError: true } : {}),
 			});
 			conv.updatedAt = Date.now();
@@ -506,6 +577,40 @@ function finalizeStreamingError(
 	});
 }
 
+/**
+ * Shared streaming wrapper for actions that have no pre-stream setup beyond
+ * resetting state (approve / clarify / regenerate). Streams the execution,
+ * finalizes the message on success, and on failure resolves the error +
+ * registers `retry` (the caller's own re-invocation) so the bubble can replay
+ * it. `sendMessage` does not use this — it owns thread-creation/re-keying and
+ * runs its own equivalent loop.
+ */
+async function streamAndFinalize(
+	conversationId: string,
+	start: () => Promise<string>,
+	fallback: string,
+	logLabel: string,
+	set: StoreSetter,
+	get: StoreGetter,
+	retry: () => Promise<void>,
+): Promise<void> {
+	try {
+		await streamWithRetry(conversationId, start, set);
+		if (!hasPendingInput(conversationId, get)) {
+			finalizeStreamingMessage(conversationId, set, get);
+		}
+	} catch (err) {
+		// Abort errors are expected when the user cancels — not a failure.
+		if (err instanceof DOMException && err.name === 'AbortError') {
+			return;
+		}
+		// eslint-disable-next-line no-console
+		console.error(logLabel, err);
+		const resolution = resolveAssistantError(err, fallback);
+		finalizeStreamingError(conversationId, resolution, set, retry);
+	}
+}
+
 // ---------------------------------------------------------------------------
 // Store interface
 // ---------------------------------------------------------------------------
@@ -564,6 +669,8 @@ export interface AIAssistantStore {
 		conversationId: string,
 		messageId: string,
 	) => Promise<void>;
+	/** Replays the originating action for a manually-retryable error bubble. */
+	retryAssistantMessage: (conversationId: string) => Promise<void>;
 	submitMessageFeedback: (
 		messageId: string,
 		rating: FeedbackRating,
@@ -877,7 +984,7 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					// there's no "originating action" to redo — reopening the
 					// same dead executionId would just re-emit the failure.
 					// Let the error bubble; the user can send a new message,
-					// which will go through `streamWithAuthRetry`.
+					// which will go through `streamWithRetry`.
 					if (
 						detail.activeExecutionId &&
 						!streamControllers.has(threadId) &&
@@ -1060,7 +1167,7 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				attachments?: MessageAttachment[],
 				contexts?: MessageContext[],
 			): Promise<void> => {
-				let convId = get().activeConversationId;
+				const convId = get().activeConversationId;
 				if (!convId || !get().conversations[convId]) {
 					return;
 				}
@@ -1093,63 +1200,75 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				};
 
 				set((state) => {
-					const conv = state.conversations[convId!];
+					const conv = state.conversations[convId];
 					conv.messages.push(userMessage);
 					conv.updatedAt = Date.now();
 					if (!conv.title && text.trim()) {
 						conv.title = deriveTitle(text);
 					}
-					resetStreamingState(state, convId!);
+					resetStreamingState(state, convId);
 				});
 
-				try {
-					let { threadId } = get().conversations[convId];
-					if (!threadId) {
-						threadId = await createThread();
-						// Re-key the conversation from client UUID to backend threadId
-						// so fetchThreads won't create a duplicate entry later.
-						const oldId = convId;
-						convId = threadId;
-						set((s) => {
-							const conv = s.conversations[oldId];
-							if (conv) {
-								conv.id = convId!;
-								conv.threadId = convId!;
-								s.conversations[convId!] = conv;
-								delete s.conversations[oldId];
-								if (s.activeConversationId === oldId) {
-									s.activeConversationId = convId!;
+				// The full send — ensure a backend thread exists (re-keying the
+				// optimistic client UUID on first send), POST the message, and
+				// stream the reply. Defined as a closure so the error bubble's
+				// Retry button can replay it without re-pushing the user message.
+				const runSend = async (cid: string): Promise<void> => {
+					let targetConvId = cid;
+					try {
+						let { threadId } = get().conversations[targetConvId];
+						if (!threadId) {
+							threadId = await createThread();
+							// Re-key the conversation from client UUID to backend threadId
+							// so fetchThreads won't create a duplicate entry later.
+							const oldId = targetConvId;
+							const newId = threadId;
+							set((s) => {
+								const conv = s.conversations[oldId];
+								if (conv) {
+									conv.id = newId;
+									conv.threadId = newId;
+									s.conversations[newId] = conv;
+									delete s.conversations[oldId];
+									if (s.activeConversationId === oldId) {
+										s.activeConversationId = newId;
+									}
+									const stream = s.streams[oldId];
+									if (stream) {
+										s.streams[newId] = stream;
+										delete s.streams[oldId];
+									}
 								}
-								const stream = s.streams[oldId];
-								if (stream) {
-									s.streams[convId!] = stream;
-									delete s.streams[oldId];
-								}
-							}
-						});
-					}
-					const tid = threadId;
-					await streamWithAuthRetry(
-						convId,
-						() => sendMessageToThread(tid, text, contexts),
-						set,
-					);
+							});
+							targetConvId = newId;
+						}
+						const tid = threadId;
+						await streamWithRetry(
+							targetConvId,
+							() => sendMessageToThread(tid, text, contexts),
+							set,
+						);
 
-					if (!hasPendingInput(convId, get)) {
-						finalizeStreamingMessage(convId, set, get);
+						if (!hasPendingInput(targetConvId, get)) {
+							finalizeStreamingMessage(targetConvId, set, get);
+						}
+					} catch (err) {
+						// Abort errors are expected when the user cancels — not a failure.
+						if (err instanceof DOMException && err.name === 'AbortError') {
+							return;
+						}
+						console.error('[AIAssistant] sendMessage failed:', err);
+						const resolution = resolveAssistantError(
+							err,
+							'Something went wrong while fetching the response. Please try again.',
+						);
+						finalizeStreamingError(targetConvId, resolution, set, () =>
+							runSend(targetConvId),
+						);
 					}
-				} catch (err) {
-					// Abort errors are expected when the user cancels — not a failure
-					if (err instanceof DOMException && err.name === 'AbortError') {
-						return;
-					}
-					console.error('[AIAssistant] sendMessage failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
-						'Something went wrong while fetching the response. Please try again.',
-					);
-					finalizeStreamingError(convId, message, set, isRateLimit);
-				}
+				};
+
+				await runSend(convId);
 			},
 
 			approveAction: async (
@@ -1167,26 +1286,17 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					}
 				});
 
-				try {
-					await streamWithAuthRetry(
+				const run = (): Promise<void> =>
+					streamAndFinalize(
 						conversationId,
 						() => approveExecution(approvalId),
-						set,
-					);
-					if (!hasPendingInput(conversationId, get)) {
-						finalizeStreamingMessage(conversationId, set, get);
-					}
-				} catch (err) {
-					if (err instanceof DOMException && err.name === 'AbortError') {
-						return;
-					}
-					console.error('[AIAssistant] approveAction failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
 						'Something went wrong while processing the approval. Please try again.',
+						'[AIAssistant] approveAction failed:',
+						set,
+						get,
+						run,
 					);
-					finalizeStreamingError(conversationId, message, set, isRateLimit);
-				}
+				await run();
 			},
 
 			rejectAction: async (
@@ -1246,26 +1356,17 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					resetStreamingState(s, conversationId);
 				});
 
-				try {
-					await streamWithAuthRetry(
+				const run = (): Promise<void> =>
+					streamAndFinalize(
 						conversationId,
 						() => regenerateMessage(messageId),
-						set,
-					);
-					if (!hasPendingInput(conversationId, get)) {
-						finalizeStreamingMessage(conversationId, set, get);
-					}
-				} catch (err) {
-					if (err instanceof DOMException && err.name === 'AbortError') {
-						return;
-					}
-					console.error('[AIAssistant] regenerateAssistantMessage failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
 						'Something went wrong while regenerating the response. Please try again.',
+						'[AIAssistant] regenerateAssistantMessage failed:',
+						set,
+						get,
+						run,
 					);
-					finalizeStreamingError(conversationId, message, set, isRateLimit);
-				}
+				await run();
 			},
 
 			submitMessageFeedback: async (
@@ -1312,26 +1413,42 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					}
 				});
 
-				try {
-					await streamWithAuthRetry(
+				const run = (): Promise<void> =>
+					streamAndFinalize(
 						conversationId,
 						() => clarifyExecution(clarificationId, answers),
-						set,
-					);
-					if (!hasPendingInput(conversationId, get)) {
-						finalizeStreamingMessage(conversationId, set, get);
-					}
-				} catch (err) {
-					if (err instanceof DOMException && err.name === 'AbortError') {
-						return;
-					}
-					console.error('[AIAssistant] submitClarification failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
 						'Something went wrong while processing your answers. Please try again.',
+						'[AIAssistant] submitClarification failed:',
+						set,
+						get,
+						run,
 					);
-					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				await run();
+			},
+
+			retryAssistantMessage: async (conversationId: string): Promise<void> => {
+				const retry = retryRegistry.get(conversationId);
+				if (!retry) {
+					return;
 				}
+				retryRegistry.delete(conversationId);
+
+				// Drop the trailing error bubble we're retrying from and reset the
+				// stream so the in-progress retry renders immediately. The retry
+				// thunk replays the originating action without re-pushing the
+				// user's message.
+				set((s) => {
+					const conv = s.conversations[conversationId];
+					if (conv) {
+						const last = conv.messages[conv.messages.length - 1];
+						if (last?.isError) {
+							conv.messages.pop();
+						}
+					}
+					resetStreamingState(s, conversationId);
+				});
+
+				await retry();
 			},
 		})),
 		{

frontend/src/container/AIAssistant/types.ts

@@ -15,9 +15,11 @@
 import type {
 	ApprovalEventDTO,
 	ClarificationEventDTO,
+	ErrorCodeDTO,
 	FeedbackRatingDTO,
 	MessageActionDTO,
 	MessageActionKindDTO,
+	RetryActionDTO,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 /** Client-only file attachment — no API equivalent (uploads happen via data URLs). */
@@ -91,6 +93,18 @@ export interface Message {
 	 * bar (copy/vote/regenerate) is hidden — retrying would just 429 again.
 	 */
 	isRateLimitError?: boolean;
+	/**
+	 * Marks an assistant message that represents a failed turn. Drives the
+	 * error styling and replaces the feedback bar with a retry affordance.
+	 */
+	isError?: boolean;
+	/** Known backend error code for the failure, when recognised. */
+	errorCode?: ErrorCodeDTO;
+	/**
+	 * Retry semantics for a failed turn — `manual` renders an inline Retry
+	 * button on the error bubble; `none`/`auto` render no button.
+	 */
+	retryAction?: RetryActionDTO;
 	createdAt: number;
 }
 

frontend/src/container/AIAssistant/utils/__tests__/resolveAssistantError.test.ts

@@ -0,0 +1,154 @@
+import { AxiosError } from 'axios';
+import {
+	ErrorCodeDTO,
+	RetryActionDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+import { resolveAssistantError } from '../resolveAssistantError';
+
+const FALLBACK = 'Something went wrong. Please try again.';
+
+function restError(status: number, code: string, message: string): AxiosError {
+	const err = new AxiosError('Request failed');
+	err.response = {
+		status,
+		data: { error: { code, message } },
+	} as AxiosError['response'];
+	return err;
+}
+
+describe('resolveAssistantError', () => {
+	describe('message resolution', () => {
+		it('prefers code-specific FE copy over the backend message', () => {
+			const err = restError(409, ErrorCodeDTO.thread_busy, 'raw backend phrasing');
+
+			const { message } = resolveAssistantError(err, FALLBACK);
+			expect(message).toBe(
+				'This conversation is still finishing a previous response. Give it a moment and try again.',
+			);
+		});
+
+		it('falls through to the backend message for a known code without FE copy', () => {
+			const err = restError(
+				400,
+				ErrorCodeDTO.message_not_found,
+				'No such message exists.',
+			);
+
+			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
+				message: 'No such message exists.',
+				code: ErrorCodeDTO.message_not_found,
+				retryAction: RetryActionDTO.none,
+				isRateLimit: false,
+			});
+		});
+
+		it('falls back when the error code is not in ErrorCodeDTO', () => {
+			const err = restError(400, 'future_unknown_code', 'Backend-only message');
+
+			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
+				message: FALLBACK,
+				code: undefined,
+				retryAction: RetryActionDTO.none,
+				isRateLimit: false,
+			});
+		});
+	});
+
+	describe('rate limiting', () => {
+		it('marks HTTP 429 responses as rate limited and non-retryable', () => {
+			const err = restError(
+				429,
+				ErrorCodeDTO.hourly_message_limit,
+				'Hourly limit reached.',
+			);
+
+			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
+				message: "You've reached the hourly message limit. Please try again later.",
+				code: ErrorCodeDTO.hourly_message_limit,
+				retryAction: RetryActionDTO.none,
+				isRateLimit: true,
+			});
+		});
+
+		it('treats known SSE rate-limit codes as rate limited', () => {
+			const err = Object.assign(new Error('Daily token limit exceeded.'), {
+				code: ErrorCodeDTO.daily_token_limit,
+			});
+
+			const res = resolveAssistantError(err, FALLBACK);
+			expect(res.isRateLimit).toBe(true);
+			expect(res.retryAction).toBe(RetryActionDTO.none);
+		});
+
+		it('marks 429 as rate limited even when the code is unknown', () => {
+			const err = restError(429, 'future_unknown_code', 'Too many requests');
+
+			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
+				message: FALLBACK,
+				code: undefined,
+				retryAction: RetryActionDTO.none,
+				isRateLimit: true,
+			});
+		});
+	});
+
+	describe('retryAction resolution', () => {
+		it('honours an explicit retryAction from an SSE error event', () => {
+			const err = Object.assign(new Error('Transient hiccup'), {
+				code: ErrorCodeDTO.internal_error,
+				retryAction: RetryActionDTO.auto,
+			});
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.auto,
+			);
+		});
+
+		it('forces none for non-retryable permission errors', () => {
+			const err = restError(403, ErrorCodeDTO.permission_denied, 'forbidden');
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.none,
+			);
+		});
+
+		it('derives manual for 409 conflicts', () => {
+			const err = restError(409, ErrorCodeDTO.thread_has_active_execution, 'busy');
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.manual,
+			);
+		});
+
+		it('derives manual for 5xx responses', () => {
+			const err = restError(503, 'future_unknown_code', 'unavailable');
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.manual,
+			);
+		});
+
+		it('derives manual for network failures with no response', () => {
+			const err = new AxiosError('Network Error');
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.manual,
+			);
+		});
+
+		it('derives none for other 4xx responses', () => {
+			const err = restError(400, 'future_unknown_code', 'bad request');
+
+			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
+				RetryActionDTO.none,
+			);
+		});
+
+		it('defaults to manual for non-Axios errors with no code', () => {
+			expect(resolveAssistantError(new Error('boom'), FALLBACK).retryAction).toBe(
+				RetryActionDTO.manual,
+			);
+		});
+	});
+});

frontend/src/container/AIAssistant/utils/__tests__/resolveAssistantErrorMessage.test.ts

@@ -1,91 +0,0 @@
-import { AxiosError } from 'axios';
-import { ErrorCodeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-import { resolveAssistantErrorMessage } from '../resolveAssistantErrorMessage';
-
-const FALLBACK = 'Something went wrong. Please try again.';
-
-describe('resolveAssistantErrorMessage', () => {
-	it('returns backend message for a known error code', () => {
-		const err = new AxiosError('Request failed');
-		err.response = {
-			status: 400,
-			data: {
-				error: {
-					code: ErrorCodeDTO.thread_busy,
-					message: 'This thread is busy. Try again shortly.',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: 'This thread is busy. Try again shortly.',
-			isRateLimit: false,
-		});
-	});
-
-	it('falls back when error code is not in ErrorCodeDTO', () => {
-		const err = new AxiosError('Request failed');
-		err.response = {
-			status: 400,
-			data: {
-				error: {
-					code: 'future_unknown_code',
-					message: 'Backend-only message',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: FALLBACK,
-			isRateLimit: false,
-		});
-	});
-
-	it('marks HTTP 429 responses as rate limited', () => {
-		const err = new AxiosError('Too many requests');
-		err.response = {
-			status: 429,
-			data: {
-				error: {
-					code: ErrorCodeDTO.hourly_message_limit,
-					message: 'Hourly limit reached.',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: 'Hourly limit reached.',
-			isRateLimit: true,
-		});
-	});
-
-	it('uses backend message for known SSE rate-limit error codes', () => {
-		const err = Object.assign(new Error('Daily token limit exceeded.'), {
-			code: ErrorCodeDTO.daily_token_limit,
-		});
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: 'Daily token limit exceeded.',
-			isRateLimit: true,
-		});
-	});
-
-	it('marks 429 as rate limited even when error code is unknown', () => {
-		const err = new AxiosError('Too many requests');
-		err.response = {
-			status: 429,
-			data: {
-				error: {
-					code: 'future_unknown_code',
-					message: 'Too many requests',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: FALLBACK,
-			isRateLimit: true,
-		});
-	});
-});

frontend/src/container/AIAssistant/utils/resolveAssistantError.ts

@@ -0,0 +1,209 @@
+import { isAxiosError } from 'axios';
+import {
+	ErrorCodeDTO,
+	RetryActionDTO,
+	type ErrorBodyDTO,
+	type ErrorResponseDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+export interface AssistantErrorResolution {
+	/** User-facing copy: code-specific FE copy → backend message → caller fallback. */
+	message: string;
+	/** Known backend error code, when one we recognise was supplied. */
+	code?: ErrorCodeDTO;
+	/**
+	 * Whether/how the failed action may be retried:
+	 *   • `auto`   — transient; the caller may silently re-attempt (capped).
+	 *   • `manual` — surface a Retry affordance to the user.
+	 *   • `none`   — retrying would re-fail deterministically; offer nothing.
+	 */
+	retryAction: RetryActionDTO;
+	/** Quota/limit error — callers hide the retry + feedback bar (retrying just re-limits). */
+	isRateLimit: boolean;
+}
+
+/** Quota/limit codes — surfaced as rate-limit errors (no retry, feedback bar hidden). */
+const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
+	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
+	ErrorCodeDTO.thread_message_limit,
+	ErrorCodeDTO.connection_limit_exceeded,
+	ErrorCodeDTO.hourly_message_limit,
+	ErrorCodeDTO.daily_message_limit,
+	ErrorCodeDTO.daily_token_limit,
+	ErrorCodeDTO.daily_cost_limit,
+	ErrorCodeDTO.budget_exceeded,
+]);
+
+/**
+ * Codes whose retry would re-fail deterministically — permission/config/validation
+ * failures. These force `retryAction: none` regardless of HTTP status.
+ */
+const NON_RETRYABLE_CODES = new Set<ErrorCodeDTO>([
+	ErrorCodeDTO.permission_denied,
+	ErrorCodeDTO.user_disabled,
+	ErrorCodeDTO.org_disabled,
+	ErrorCodeDTO.validation_error,
+	ErrorCodeDTO.invalid_content_length,
+	ErrorCodeDTO.invalid_fork_target,
+	ErrorCodeDTO.missing_signoz_url,
+	ErrorCodeDTO.invalid_signoz_url,
+	ErrorCodeDTO.region_not_configured,
+]);
+
+/**
+ * Code-specific, user-friendly copy. Takes precedence over the backend's raw
+ * `error.message` so the user sees an actionable, consistent sentence rather
+ * than internal phrasing. Codes absent here fall through to the backend message.
+ */
+const ERROR_CODE_COPY: Partial<Record<ErrorCodeDTO, string>> = {
+	[ErrorCodeDTO.permission_denied]:
+		"You don't have permission to do that. Contact your workspace admin if you think this is a mistake.",
+	[ErrorCodeDTO.user_disabled]:
+		'Your access to the AI assistant has been disabled. Contact your workspace admin to re-enable it.',
+	[ErrorCodeDTO.org_disabled]:
+		'The AI assistant is disabled for your organisation. An admin can enable it in settings.',
+	[ErrorCodeDTO.thread_busy]:
+		'This conversation is still finishing a previous response. Give it a moment and try again.',
+	[ErrorCodeDTO.thread_has_active_execution]:
+		'This conversation is still finishing a previous response. Give it a moment and try again.',
+	[ErrorCodeDTO.hourly_message_limit]:
+		"You've reached the hourly message limit. Please try again later.",
+	[ErrorCodeDTO.daily_message_limit]:
+		"You've reached the daily message limit. Please try again tomorrow.",
+	[ErrorCodeDTO.daily_token_limit]:
+		"You've reached today's usage limit. Please try again tomorrow.",
+	[ErrorCodeDTO.daily_cost_limit]:
+		"You've reached today's usage limit. Please try again tomorrow.",
+	[ErrorCodeDTO.budget_exceeded]:
+		"You've reached your usage budget. Contact your workspace admin to raise it.",
+	[ErrorCodeDTO.thread_message_limit]:
+		'This conversation has reached its length limit. Start a new conversation to continue.',
+	[ErrorCodeDTO.connection_limit_exceeded]:
+		'Too many active conversations right now. Close one and try again.',
+	[ErrorCodeDTO.max_turns_exceeded]:
+		'The assistant reached the maximum number of steps for this request. Try rephrasing or breaking it into smaller asks.',
+	[ErrorCodeDTO.region_unreachable]:
+		"Couldn't reach your region's services. Please try again in a moment.",
+	[ErrorCodeDTO.region_not_configured]:
+		'No region is configured for the AI assistant yet. An admin can set this up in settings.',
+	[ErrorCodeDTO.mcp_unavailable]:
+		'A required service is temporarily unavailable. Please try again shortly.',
+	[ErrorCodeDTO.sandbox_unavailable]:
+		'The execution environment is temporarily unavailable. Please try again shortly.',
+	[ErrorCodeDTO.internal_error]:
+		'Something went wrong on our end. Please try again.',
+};
+
+function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
+	return (
+		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
+	);
+}
+
+function isRetryActionDTO(value: unknown): value is RetryActionDTO {
+	return (
+		typeof value === 'string' &&
+		(Object.values(RetryActionDTO) as string[]).includes(value)
+	);
+}
+
+/**
+ * Pulls the structured error body out of either an Axios REST error or the
+ * SSE error the streaming loop throws (a plain `Error` augmented with `code`).
+ */
+function getErrorBody(err: unknown): ErrorBodyDTO | null {
+	if (isAxiosError(err)) {
+		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
+	}
+
+	const code = (err as { code?: string } | undefined)?.code;
+	const message = err instanceof Error ? err.message : undefined;
+	if (!code || !message) {
+		return null;
+	}
+
+	return { code: code as ErrorCodeDTO, message };
+}
+
+function isRateLimit(code: ErrorCodeDTO | undefined, err: unknown): boolean {
+	if (isAxiosError(err) && err.response?.status === 429) {
+		return true;
+	}
+	return code !== undefined && RATE_LIMIT_ERROR_CODES.has(code);
+}
+
+/**
+ * Resolves how the failed action may be retried. The backend's explicit signal
+ * (SSE `ErrorEventDTO.retryAction`) is authoritative; otherwise we derive it
+ * from the rate-limit/non-retryable code sets and the HTTP status.
+ */
+function resolveRetryAction(
+	err: unknown,
+	code: ErrorCodeDTO | undefined,
+	rateLimited: boolean,
+): RetryActionDTO {
+	const explicit = (err as { retryAction?: unknown } | undefined)?.retryAction;
+	if (isRetryActionDTO(explicit)) {
+		return explicit;
+	}
+
+	if (rateLimited || (code !== undefined && NON_RETRYABLE_CODES.has(code))) {
+		return RetryActionDTO.none;
+	}
+
+	if (isAxiosError(err)) {
+		const status = err.response?.status;
+		// No response → network/timeout failure; retrying may well succeed.
+		if (status === undefined || status === 408) {
+			return RetryActionDTO.manual;
+		}
+		if (status === 401 || status === 403) {
+			return RetryActionDTO.none;
+		}
+		if (status === 409 || status >= 500) {
+			return RetryActionDTO.manual;
+		}
+		// Other 4xx (validation, bad request) re-fail deterministically.
+		return RetryActionDTO.none;
+	}
+
+	// Non-Axios transport/parse error with no code — let the user retry.
+	return RetryActionDTO.manual;
+}
+
+function resolveMessage(
+	code: ErrorCodeDTO | undefined,
+	body: ErrorBodyDTO | null,
+	fallback: string,
+): string {
+	if (code !== undefined && ERROR_CODE_COPY[code]) {
+		return ERROR_CODE_COPY[code] as string;
+	}
+	// Trust the backend's message only for codes we recognise — never surface
+	// raw text for unknown codes (could be an internal stack trace).
+	if (code !== undefined && body?.message.trim()) {
+		return body.message.trim();
+	}
+	return fallback;
+}
+
+/**
+ * Single resolution point for both SSE and REST assistant errors. Maps the
+ * error onto user-facing copy plus retry semantics, degrading gracefully for
+ * unknown codes (falls back to `fallback` + a `manual` retry where sensible).
+ */
+export function resolveAssistantError(
+	err: unknown,
+	fallback: string,
+): AssistantErrorResolution {
+	const body = getErrorBody(err);
+	const code = isErrorCodeDTO(body?.code) ? body?.code : undefined;
+	const rateLimited = isRateLimit(code, err);
+
+	return {
+		message: resolveMessage(code, body, fallback),
+		code,
+		retryAction: resolveRetryAction(err, code, rateLimited),
+		isRateLimit: rateLimited,
+	};
+}

frontend/src/container/AIAssistant/utils/resolveAssistantErrorMessage.ts

@@ -1,71 +0,0 @@
-import { isAxiosError } from 'axios';
-import {
-	ErrorCodeDTO,
-	type ErrorBodyDTO,
-	type ErrorResponseDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-export interface AssistantErrorResolution {
-	message: string;
-	isRateLimit: boolean;
-}
-
-function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
-	return (
-		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
-	);
-}
-
-const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
-	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
-	ErrorCodeDTO.thread_message_limit,
-	ErrorCodeDTO.connection_limit_exceeded,
-	ErrorCodeDTO.hourly_message_limit,
-	ErrorCodeDTO.daily_message_limit,
-	ErrorCodeDTO.daily_token_limit,
-	ErrorCodeDTO.daily_cost_limit,
-	ErrorCodeDTO.budget_exceeded,
-]);
-
-function isRateLimitError(code: string | undefined, err: unknown): boolean {
-	if (isAxiosError(err) && err.response?.status === 429) {
-		return true;
-	}
-
-	return isErrorCodeDTO(code) && RATE_LIMIT_ERROR_CODES.has(code);
-}
-
-function getErrorBody(err: unknown): ErrorBodyDTO | null {
-	if (isAxiosError(err)) {
-		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
-	}
-
-	const code = (err as { code?: string } | undefined)?.code;
-	const message = err instanceof Error ? err.message : undefined;
-	if (!code || !message) {
-		return null;
-	}
-
-	return { code: code as ErrorCodeDTO, message };
-}
-
-/**
- * Uses `error.message` when `error.code` is a known `ErrorCodeDTO`;
- * otherwise returns `fallback`.
- */
-export function resolveAssistantErrorMessage(
-	err: unknown,
-	fallback: string,
-): AssistantErrorResolution {
-	const body = getErrorBody(err);
-	const isRateLimit = isRateLimitError(body?.code, err);
-
-	if (body && isErrorCodeDTO(body.code) && body.message.trim()) {
-		return {
-			message: body.message.trim(),
-			isRateLimit,
-		};
-	}
-
-	return { message: fallback, isRateLimit: Boolean(isRateLimit) };
-}

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

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

frontend/src/container/AllError/index.tsx

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

frontend/src/container/AllError/useExceptionsStripInfo.ts

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

frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss

@@ -1,23 +1,15 @@
-.api-monitoring-page {
-	display: flex;
-	height: 100%;
+.api-monitoring-explorer {
+	.api-quick-filters-header {
+		padding: 12px;
+		border-bottom: 1px solid var(--l1-border);
+		border-right: 1px solid var(--l1-border);
 
-	.api-quick-filter-left-section {
-		width: 0%;
-		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		gap: 6px;
 
-		.api-quick-filters-header {
-			padding: 12px;
-			border-bottom: 1px solid var(--l1-border);
-			border-right: 1px solid var(--l1-border);
-
-			display: flex;
-			align-items: center;
-			gap: 6px;
-
-			font-size: 14px;
-			line-height: 18px;
-		}
+		font-size: 14px;
+		line-height: 18px;
 	}
 
 	.api-module-right-section {
@@ -161,16 +153,6 @@
 			}
 		}
 	}
-
-	&.filter-visible {
-		.api-quick-filter-left-section {
-			width: 260px;
-		}
-
-		.api-module-right-section {
-			width: calc(100% - 260px);
-		}
-	}
 }
 
 .no-filtered-domains-message-container {

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -1,8 +1,7 @@
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -20,20 +19,21 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div className={cx('api-monitoring-page', 'filter-visible')}>
-				<section className="api-quick-filter-left-section">
-					<QuickFilters
-						className="qf-api-monitoring"
-						source={QuickFiltersSource.API_MONITORING}
-						signal={SignalType.API_MONITORING}
-						showFilterCollapse={false}
-						showQueryName={false}
-						handleFilterVisibilityChange={(): void => {}}
-						useFieldApis={quickFilterFieldApis}
-					/>
-				</section>
+			<QuickFiltersLayout
+				className="api-monitoring-explorer"
+				showFilters
+				quickFilterProps={{
+					className: 'qf-api-monitoring',
+					source: QuickFiltersSource.API_MONITORING,
+					signal: SignalType.API_MONITORING,
+					showFilterCollapse: false,
+					showQueryName: false,
+					handleFilterVisibilityChange: (): void => {},
+					useFieldApis: quickFilterFieldApis,
+				}}
+			>
 				<DomainList />
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -53,6 +53,10 @@
 		z-index: 0;
 		background: var(--l1-background);
 
+		// Column so the bottom strip sits under the scrolling content, not inside it.
+		display: flex;
+		flex-direction: column;
+
 		&.full-screen-content {
 			width: 100%;
 		}
@@ -70,7 +74,9 @@
 
 .chat-support-gateway {
 	position: fixed;
-	bottom: 20px;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: calc(20px + var(--bottom-strip-height, 0px));
 	right: 20px;
 	z-index: 1000;