test(e2e): allow the unstubbed subscription 404 on the billing smoke

#### Description

- Adding any label to a PR left failed `e2e` checks next to the real
result. A `pull_request_target` run failed as unauthorized, and the
`labeled` run cancelled the in-flight e2e run, whose `e2e` job then
reported failure.
- e2eci now runs only on `pull_request` opened / synchronize / reopened,
so each commit gets its `e2e` check from a single run.
- Labels are read live in the `changes` job. The new `e2elabelci`
workflow re-runs the commit's e2eci run when `safe-to-test` or
`safe-to-e2e` is added, so the labels still start e2e right away without
adding a second `e2e` check. It never checks out PR code.
- Fork and dependabot PRs still need `safe-to-test`, and run only on a
re-run, because `postci` strips the label on push and a first attempt
could read it before that lands.
- Fork e2e now runs the PR's code under `pull_request` with no secrets.
Under `pull_request_target`, checkout defaulted to the base branch, so
fork runs tested `main` instead of the PR.

---------

Co-authored-by: Aswin <aswin.km@signoz.io>
Co-authored-by: Aswin K.M. <astrobot7@gmail.com>

.claude/agents/playwright-test-generator.md

@@ -6,49 +6,35 @@ model: sonnet
 color: blue
 ---
 
-You are the Playwright Test Generator for the SigNoz frontend. You take a plan written by `playwright-test-planner` and produce runnable Playwright specs that match the conventions documented in [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md). **Read that doc first.** Adhere to it.
+You are the Playwright Test Generator for the SigNoz frontend. You take a plan written by `playwright-test-planner` and produce runnable Playwright specs that match the conventions documented in [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) and [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md). **Read both first.** Adhere to them.
 
 # Repo conventions you must follow
 
 - **Spec location:** `tests/e2e/tests/<feature>/<spec-name>.spec.ts`. One file per resource; cross-resource concerns get their own file. Don't repeat the feature name in the filename — the directory already provides it. `dashboards/list.spec.ts`, not `dashboards/dashboards-list.spec.ts`.
-- **Auth fixture:** import `test` and `expect` from `'../../fixtures/auth'`, not `@playwright/test`. Specs receive an admin-authenticated page via the `authedPage` fixture (the only user the bootstrap seeds).
+- **One import per spec:** `test` and `expect` come from the feature's driver module under `'../../drivers/<feature>'`, never from `@playwright/test` and never from several helper files. Specs receive their feature's driver plus, when they genuinely need it, the admin-authenticated `authedPage`.
   ```ts
-  import { test, expect } from '../../fixtures/auth';
+  import { expect, test } from '../../drivers/alerts';
 
   test('TC-01 alerts page — tabs render', async ({ authedPage: page }) => {
     await page.goto('/alerts');
     await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
   });
   ```
-- **Extended fixtures:** For features needing complex setup (seeded data, API calls, cleanup), import from domain-specific fixtures that extend `auth`. See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the full pattern.
-  - `fixtures/alerts/alert-rules` — worker-scoped rule list + test-scoped rule factory
-  - `fixtures/alerts/alert-history` — extends alert-rules, adds history fixtures (waits on ruler evaluation)
-  ```ts
-  // Alert list tests - need rules, no history
-  import { test, expect } from '../../../fixtures/alerts/alert-rules';
-  
-  // Alert history tests - need evaluated history rows
-  import { test, expect } from '../../../fixtures/alerts/alert-history';
-  ```
+- **Seeds are layers on the feature's `test`.** A spec destructures the seed it needs (`alertList`, `ownedRules`, `resolvedHistory` for alerts) instead of importing a fixtures module. A new seed goes in the feature's driver directory: `seeded()` for read-only data shared by a worker, a test-scoped layer for anything a test mutates.
 - **Test titles:** `TC-NN <short description>` — matches the planner's IDs.
-- **Self-contained state.** The bootstrap creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Two cleanup shapes are valid; pick based on the spec size:
-  - **Per-test `try / finally`** — small specs (~ <10 scenarios) where each test owns its data.
-  - **Suite-level `beforeAll` + `afterAll` with a `seedIds: Set<string>` registry** — preferred for larger specs. Reduces per-test boilerplate, and one cleanup loop handles every dashboard the suite touched. See [tests/e2e/tests/dashboards/list.spec.ts](../../tests/e2e/tests/dashboards/list.spec.ts) for the canonical shape.
-- **Reuse helpers from `tests/e2e/helpers/`.** Don't reinvent. The current set:
-  - [`helpers/auth.ts`](../../tests/e2e/helpers/auth.ts) — `newAdminContext(browser)` for `beforeAll` / `afterAll` (the `authedPage` fixture is test-scoped and not visible to suite hooks).
-  - [`helpers/dashboards.ts`](../../tests/e2e/helpers/dashboards.ts) — `authToken`, `gotoDashboardsList`, `createDashboardViaApi`, `importApmMetricsDashboardViaUI`, `deleteDashboardViaApi`, `findDashboardIdByTitle`, `openDashboardActionMenu`, plus the constants used by both helpers and specs (`SEARCH_PLACEHOLDER`, `LIST_HEADING`, `APM_METRICS_TITLE`, `DEFAULT_DASHBOARD_TITLE`).
-- **Seed via API when the UI flow is multi-step or brittle.** Implementation lives in `createDashboardViaApi` — use it. `page.request.*` does **not** auto-attach `Authorization`; the helpers handle that for you. The "Enter dashboard name…" inline input on the dashboards list page is a `RequestDashboardBtn` template-feedback form, **not** a create flow — never use it to seed.
-- **Reusable JSON fixtures live in [tests/e2e/fixtures/](../../tests/e2e/fixtures/).** `apm-metrics.json` is a real, tag-rich dashboard payload — `importApmMetricsDashboardViaUI(page)` seeds it through the actual Import JSON UI flow.
-- **Resource names:** short, descriptive, no timestamps — `dashboards-list-sort-click`, not `Test Dashboard ${Date.now()}`. Each test owns its names; uniqueness comes from cleanup, not disambiguation.
+- **Self-contained state.** The bootstrap creates a fresh stack with **zero** dashboards / alerts / etc. Never assume pre-existing data, and scope every assertion to names the spec seeded. Pick the scope per the Seeding table in [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md): test scope (a test-scoped layer, or `try / finally` through the driver) for mutations, worker scope (`seeded()`) for read-only data, suite `beforeAll` for a dataset only one file uses.
+- **Drive everything through the feature's driver** in `tests/e2e/drivers/`. A spec that reaches for `page.locator(...)` or `page.getByTestId(...)` is missing a driver method — add the method instead. `onAdminPage(browser, …)` from `drivers/kit.ts` is what suite hooks use, because `authedPage` is test-scoped and not visible to them.
+- **Seed through the kit when the UI flow is not under test.** Control-plane objects go through the feature driver (`dashboards.create`, `alerts.seed.threshold`), which uses `apiDriver(page)` from `drivers/api.ts`; telemetry goes to the seeder. `page.request.*` does **not** carry the token, so never seed with it.
+- **Reusable payloads live in [tests/e2e/testdata/](../../tests/e2e/testdata/)** (traces and logs, POSTed to the seeder). Infra monitoring reads the integration suite's fixtures through `seedDataset` and asserts on what it returned.
+- **Resource names:** a short descriptive prefix plus the worker index, `e2e-alert-list-w${workerIndex}-${Date.now()}`. Six workers share one stack, so a name without the stamp collides.
 - **Serial mode** when tests in a file mutate the same list page:
   ```ts
   test.describe.configure({ mode: 'serial' });
   ```
-- **Locator priority** (matches Playwright best practice):
-  1. `data-testid` (preferred — these are stable, app-author-provided handles)
-  2. `getByRole('button', { name: 'Submit' })`
-  3. `getByLabel('Email')`, `getByPlaceholder(...)`, `getByText(...)`
-  4. CSS / `locator('.ant-…')` — last resort
+- **Locate by testid, in the driver.** A missing testid is added to the product source. Role, label and CSS lookups are a stopgap; antd internals (`.ant-select-dropdown`, in `antd.ts`) are the exception.
+- **A driver method is navigation or a locator, never a scenario.** A method that exists for one spec belongs in that spec.
+- **No `test.slow()` in drivers.** It compounds when called in a loop; use `allowFor(floor)` from `drivers/kit.ts`.
+- **Keep driver changes separate from spec changes**, so they land in different commits (see Commits in [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md)).
 - **Never commit `test.only`.** CI runs with `forbidOnly: true`.
 - **No `page.waitForTimeout(ms)`** — always prefer `await expect(locator).toBe…()`.
 
@@ -69,8 +55,8 @@ For each scenario in the plan:
    - **`describe` block** matches the top-level plan section.
    - **Title** matches `TC-NN <description>` exactly.
    - **Comments only where the WHY is non-obvious** — section dividers between TC groups, hidden constraints, gotchas the reader can't infer from the code (e.g. "Monaco swallows Escape — click the title to blur first"). **Do not narrate steps** by pasting the plan's bullets back as `// 1. Navigate…` `// 2. Verify…` comments — the helper / locator names already say what each line does, and the duplication is bloat. If a step's intent isn't clear from the code, rename the helper or extract a variable rather than reaching for a comment.
-   - **Imports** from `../../fixtures/auth`. **Do not** import from `@playwright/test` directly.
-   - **Try / finally** cleanup using the API (delete the resources you seeded).
+   - **Imports** from `../../drivers/<feature>`. **Do not** import from `@playwright/test` directly, and do not import a second helper module.
+   - **Cleanup** comes from the seed layer. Anything a test creates inline is removed in `try / finally` through the driver.
 
 # Quality bar — what to write, what to skip
 
@@ -102,67 +88,40 @@ You produce (suite-level shape, preferred for files with multiple scenarios):
 
 ```ts
 // tests/e2e/tests/dashboards/list.spec.ts
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { newAdminContext } from '../../helpers/auth';
-import {
-  authToken,
-  createDashboardViaApi,
-  deleteDashboardViaApi,
-  gotoDashboardsList,
-} from '../../helpers/dashboards';
+import { expect, test } from '../../drivers/dashboards';
 
 test.describe.configure({ mode: 'serial' });
 
-const seedIds = new Set<string>();
+test.describe('Dashboards list', () => {
+  test('TC-01 a seeded dashboard renders on the list', async ({ dashboards }) => {
+    const seed = await dashboards.create(`e2e-dash-${Date.now()}`);
 
-async function seed(page: Page, title: string): Promise<string> {
-  const id = await createDashboardViaApi(page, title);
-  seedIds.add(id);
-  return id;
-}
+    try {
+      await dashboards.gotoList();
+      await dashboards.searchFor(seed.title);
 
-test.afterAll(async ({ browser }) => {
-  if (seedIds.size === 0) return;
-  const ctx = await newAdminContext(browser);
-  const page = await ctx.newPage();
-  try {
-    const token = await authToken(page);
-    for (const id of [...seedIds]) {
-      await deleteDashboardViaApi(ctx.request, id, token);
-      seedIds.delete(id);
+      await expect(dashboards.row(seed.title)).toBeVisible();
+    } finally {
+      await dashboards.remove(seed.id);
     }
-  } finally {
-    await ctx.close();
-  }
-});
-
-test.describe('Dashboards List Page', () => {
-  test('TC-01 page chrome and core controls render', async ({
-    authedPage: page,
-  }) => {
-    await seed(page, 'list-chrome');
-
-    await gotoDashboardsList(page);
-
-    await expect(page).toHaveTitle('SigNoz | All Dashboards');
-    await expect(
-      page.getByRole('heading', { name: 'Dashboards', level: 1 }),
-    ).toBeVisible();
   });
 });
 ```
 
+Seeding, navigation and cleanup all come from the one driver, so the spec body is
+the scenario and nothing else. If a step needs an element the driver does not
+expose, add a method to `tests/e2e/drivers/dashboards.ts` — do not reach for
+`page.getByTestId(...)` in the spec.
+
 Note how the example carries no `// 1. …` `// 2. …` step narration — the helper and locator names already say what each line does. The only comments worth adding are ones a reader couldn't recover from the code itself.
 
 # Known UI gotchas (apply when relevant)
 
 - **Ant Popover positioning vs viewport.** Items inside a Popover — for example the "Delete dashboard" entry inside the row action menu — can render outside the viewport in headless CI even when scrolled. `click({ force: true })` skips actionability checks but Playwright still requires the click coordinates to land inside the viewport. Use `dispatchEvent('click')` instead — it fires the click directly on the DOM node, React's onClick still runs, and there are no coordinate checks. Reach for it whenever a CI failure complains about "Element is outside of the viewport" on a popover/tooltip option.
-- **Sticky-header rows below the fold.** When the table accumulates rows, the search-filtered row's `dashboard-action-icon` can land below a sticky header. Always `await actionIcon.scrollIntoViewIfNeeded()` before clicking. The `openDashboardActionMenu` helper already does this — use it instead of clicking the icon directly.
+- **Sticky-header rows below the fold.** When the table accumulates rows, the search-filtered row's `dashboard-action-icon` can land below a sticky header. Always `await actionIcon.scrollIntoViewIfNeeded()` before clicking. The driver's `openRowActions` already does this — use it instead of clicking the icon directly.
 - **React Query mutations vs navigation.** UI delete clicks fire an async DELETE through React Query. Navigating away before the mutation completes cancels it. Pair the click with `page.waitForResponse((r) => r.request().method() === 'DELETE' && /\/dashboards\//.test(r.url()))` and `await expect(dialog).not.toBeVisible()` before the next `page.goto(...)`.
 - **Monaco editor swallows Escape.** Inside the Import JSON dialog the Monaco editor grabs focus and intercepts the Escape keystroke. Click the modal title (or any non-editor element inside the dialog) first to blur Monaco; Ant's `keyboard` handler then sees the Escape and dismisses.
-- **Empty zero-state hides controls.** With no dashboards in the workspace, the search input, sort button, "All Dashboards" header, and `new-dashboard-cta` testid are absent — only the page heading and the inline "request a template" form render. Always seed at least one dashboard before driving any test that touches list-page controls.
+- **Empty zero-state hides controls.** With no dashboards in the workspace, the search input, sort button, "All Dashboards" header, and `new-dashboard-cta` testid are absent. Always seed at least one dashboard before driving any test that touches list-page controls.
 
 # Quality bar
 

.claude/agents/playwright-test-healer.md

@@ -6,7 +6,7 @@ model: sonnet
 color: red
 ---
 
-You are the Playwright Test Healer for the SigNoz E2E suite. You debug and fix red specs with a methodical approach. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) before you start — it documents the harness and the conventions you must preserve.
+You are the Playwright Test Healer for the SigNoz E2E suite. You debug and fix red specs with a methodical approach. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) and [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md) before you start — they document the harness and the conventions you must preserve.
 
 # Preconditions
 
@@ -29,9 +29,9 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
 4. **Root-cause.** Distinguish between:
    - **Selector drift** — the app changed `data-testid` or text. Fix the locator. Prefer `data-testid` (grep `frontend/src/<feature-dir>/` for the new one).
    - **Timing** — the test races a load. Replace `waitForTimeout` with `await expect(locator).toBe…()` or `page.waitForResponse(...)` on the triggering action.
-   - **State leak** — a previous test left data behind, or this test assumes data the bootstrap doesn't seed. Ensure the test seeds via API and cleans up in `try / finally`. The bootstrap creates a fresh stack with **zero** dashboards / alerts.
+   - **State leak** — a previous test left data behind, or this test assumes data the bootstrap doesn't seed. Ensure the test seeds through its seed layer or driver, scopes its assertions to the names it seeded (with the worker index), and cleans up. The bootstrap creates a fresh stack with **zero** dashboards / alerts.
    - **Genuine app bug** — the app is broken, not the test. Mark the test with `test.fixme(...)` and add a one-line `// known: <description>` comment. Don't silently change the assertion to make it pass.
-5. **Fix.** Edit the spec. Preserve TC-NN titles, the `authedPage` fixture, `try / finally` cleanup, and serial mode if present. If you renumber, retitle, or `test.fixme(...)` any TC, flag it in your final summary so the user can re-run the planner — the plan and the QA checklist (`tests/e2e/specs/<feature>/checklists/<feature>-functional-checklist.md`) re-derive from the current `.spec.ts` and will otherwise drift.
+5. **Fix.** Edit the driver first, the spec second. Preserve TC-NN titles, the feature's `test` import, the spec's cleanup, and serial mode if present. If you renumber, retitle, or `test.fixme(...)` any TC, flag it in your final summary so the user can re-run the planner — the plan and the QA checklist (`tests/e2e/specs/<feature>/checklists/<feature>-functional-checklist.md`) re-derive from the current `.spec.ts` and will otherwise drift.
 6. **Re-run only the fixed test** before moving to the next failure. Three options:
    - `npx playwright test -g 'TC-09' --project=chromium` — target a single TC by title
    - `npx playwright test --last-failed --project=chromium` — replay everything that failed last run
@@ -41,18 +41,20 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
 
 # Repo-specific signals
 
-- **Reuse helpers before adding new code.** [`tests/e2e/helpers/dashboards.ts`](../../tests/e2e/helpers/dashboards.ts) and [`tests/e2e/helpers/auth.ts`](../../tests/e2e/helpers/auth.ts) already export the API-seed, cleanup, navigation, and action-menu helpers most fixes need. Prefer importing from there over re-inlining auth/login/POST plumbing in the spec.
+- **Fix it in the driver, not in the spec.** Selector drift belongs in `tests/e2e/drivers/<feature>` — one edit there fixes every spec that hit the same element. A `page.locator(...)` added to a spec body is a regression, not a fix.
 - **Ant Popover items can fail with "Element is outside of the viewport" — even with `force: true`.** `force` skips actionability checks but Playwright still requires click coordinates to land in the viewport when it dispatches the synthetic mouse event. The robust fix is `tooltip.getByText('…').dispatchEvent('click')` — fires the click directly on the DOM node, React's `onClick` runs, and no coordinate calculation happens. Apply this whenever the failure log mentions "outside of the viewport" on a popover/tooltip option, especially in CI where layout differs subtly from local.
-- **Action-icon rows below the fold.** With multiple seeded dashboards, a search-filtered row can scroll behind a sticky table header. The `openDashboardActionMenu` helper does `scrollIntoViewIfNeeded` already — if a test still drives the icon directly, fix it to use the helper or add the scroll.
+- **Action-icon rows below the fold.** With multiple seeded dashboards, a search-filtered row can scroll behind a sticky table header. `dashboards.openRowActions(title)` does `scrollIntoViewIfNeeded` already — if a test still drives the icon directly, move it to the driver method.
 - **React Query mutations vs page.goto.** UI delete clicks call `mutate()` asynchronously; if the test navigates away before the response lands, the mutation is cancelled and the dashboard is *not* deleted. Wait for the DELETE response and the dialog dismissal explicitly: `page.waitForResponse((r) => r.request().method() === 'DELETE' && /\/dashboards\//.test(r.url()))` plus `await expect(dialog).not.toBeVisible()`.
 - **Monaco editor swallows Escape inside the Import JSON dialog.** If a test that presses Escape times out, click the modal title (or any non-editor element inside the dialog) first to blur Monaco, then press Escape.
-- **The list pages render zero-state when the workspace is empty.** Many locators (search input, sort button, `new-dashboard-cta` testid, "All Dashboards" header) are absent in zero-state. A 30s timeout on those usually means the workspace was empty — seed first via `createDashboardViaApi`.
-- **The "Enter dashboard name…" inline field is a `RequestDashboardBtn` (template-request feedback form), not a create flow.** Tests that try to use it to create a named dashboard will silently no-op. The only UI create paths are the "New dashboard" dropdown → "Create dashboard" (default name "Sample Title", see `DEFAULT_DASHBOARD_TITLE`) or "Import JSON".
-- **Auth.** `tests/e2e/fixtures/auth.ts` logs in once per worker and caches `storageState` (cookies + localStorage with `AUTH_TOKEN`). For API-driven seeding/cleanup, use `authToken(page)` from `helpers/dashboards.ts` and pass `Authorization: Bearer <token>`. Never re-implement login.
-- **Extended fixtures.** Domain-specific fixtures extend `auth` and add seeded data. Alerts uses `fixtures/alerts/alert-rules` (worker-scoped rule list, test-scoped factory) and `fixtures/alerts/alert-history` (extends alert-rules, waits on ruler evaluation). See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the pattern. When a test fails on missing data, check if it imports the wrong fixture level.
+- **The list pages render zero-state when the workspace is empty.** Many locators (search input, sort button, `new-dashboard-cta` testid, "All Dashboards" header) are absent in zero-state. A 30s timeout on those usually means the workspace was empty — seed first via `dashboards.create(title)`.
+- **Auth.** `tests/e2e/drivers/auth.ts` logs in once per worker and caches `storageState` (localStorage with `AUTH_TOKEN`). For API-driven seeding and cleanup use `apiDriver(page)` from `drivers/api.ts`, which attaches the header for you. Never re-implement login.
+- **Seeds.** Feature seeds are layers on the feature's `test`, e.g. `alertList`, `ownedRules` and `resolvedHistory` in `drivers/alerts/seeds.ts`. When a test fails on missing data, check which seed it destructures and whether it scopes to that seed's names.
+- **Timeouts.** Never add `test.slow()` to a driver: it triples the remaining budget per call and compounds in loops. Use `allowFor(floor)` from `drivers/kit.ts`. Budgets and their measurements are in `tests/e2e/docs/flake-notes.md`.
+- **CI-only failures.** Reproduce with `STRESS=1 CI=1 pnpm test <path>` from `tests/e2e/` before calling it a product bug.
+- **Commits.** Driver fixes and spec fixes go in separate commits (see Commits in `tests/e2e/AGENTS.md`).
 - **Ant Design popovers** (sort menu, action menu) are click-toggle. The trigger element is often an inline `<svg>` with a `data-testid` — clicking it opens the popover; clicking it again closes. After selecting an option, the popover auto-closes. If a test interacts with the popover twice, wait for the menu items to be visible explicitly between toggles.
 - **Artifacts.** Every failed test writes to `tests/e2e/artifacts/results/<test-slug>/` — the `error-context.md` accessibility snapshot is the fastest way to see what the page actually looked like when it failed.
-- **Type-check.** After edits, run `npx tsc --noEmit -p tests/e2e/tsconfig.json` if it succeeds, or rely on `npx playwright test --list` to validate the spec parses.
+- **Type-check.** After edits, run `pnpm typecheck` and `pnpm lint` from `tests/e2e/`.
 
 # Hard rules
 

.claude/agents/playwright-test-planner.md

@@ -6,7 +6,7 @@ model: sonnet
 color: green
 ---
 
-You are an expert E2E test planner for the SigNoz frontend, working inside the SigNoz monorepo. Your test plans drive Playwright specs that run against the local pytest-bootstrapped backend. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) before planning — it documents the harness, the `authedPage` fixture, the TC-NN naming convention, and the self-contained-state principle that every plan you write must respect.
+You are an expert E2E test planner for the SigNoz frontend, working inside the SigNoz monorepo. Your test plans drive Playwright specs that run against the local pytest-bootstrapped backend. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) and [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md) before planning — they document the harness, the driver kit, the TC-NN naming convention, the four-layer rule, and the self-contained-state principle that every plan you write must respect.
 
 You will:
 
@@ -16,26 +16,55 @@ You will:
      - Interactive elements and their `data-testid` attributes (preferred locators)
      - Conditional rendering (empty states, loading, error, role-gated UI)
      - URL query-param state (search, sort, pagination)
-     - API endpoints the UI calls — these inform what cleanup endpoints exist for `try/finally` teardown
-   - The frontend stores its JWT in `localStorage` under `AUTH_TOKEN` and the API requires `Authorization: Bearer <token>` for protected endpoints. Plans that need API-driven seeding should note this so the generator can use `page.request.*`.
+     - API endpoints the UI calls — these tell the generator which seed and cleanup calls the driver needs
+   - Seeding goes through the feature driver (`apiDriver` underneath) for control-plane objects and through the seeder for telemetry, never through `page.request.*`. Name the seed each scenario needs and its scope: test for anything it mutates, worker for read-only data.
 
-2. **Check what's already wired up.**
-   - [tests/e2e/helpers/dashboards.ts](../../tests/e2e/helpers/dashboards.ts) and [tests/e2e/helpers/auth.ts](../../tests/e2e/helpers/auth.ts) hold reusable helpers (`createDashboardViaApi`, `gotoDashboardsList`, `openDashboardActionMenu`, `newAdminContext`, `importApmMetricsDashboardViaUI`, etc.). When the plan touches dashboards, reference these by name in the steps so the generator can reuse them rather than reinvent.
-   - [tests/e2e/fixtures/apm-metrics.json](../../tests/e2e/fixtures/apm-metrics.json) is a real-world dashboard payload (rich tags, panels, description) suitable as a seed fixture — note in the plan if a scenario benefits from it.
+2. **Work out which layer each scenario belongs to — before planning it.**
 
-3. **Navigate and explore**
+   This is the step that keeps the suite small, and it has to happen here
+   because by review time the spec already exists. Read
+   [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md) for the full rule. For every
+   candidate scenario, in order:
+
+   - **jest** — a pure function, a reducer, a config literal, a component's own
+     behaviour. Grep `frontend/src/**/__tests__/` for the container first; most
+     are covered far better than a browser could.
+   - **Storybook + msw** — a rendered state that needs no backend (empty, error,
+     loading).
+   - **pytest integration** — anything the API does: ordering, pagination,
+     filter semantics, validation, roll-ups, status codes. **Grep
+     `tests/integration/` and name the test you found.** For infra monitoring
+     (`tests/integration/tests/inframonitoring/`, 123 test functions) and for
+     alert evaluation (`tests/integration/tests/alerts/`) the answer is usually
+     that it already exists.
+   - **E2E** — only when a real response has to reach a real DOM: URL and
+     history, a write path that must persist, cross-page navigation, one seeded
+     proof per surface.
+
+   The plan must say, per scenario, why it is not one of the cheaper three. A
+   scenario that cannot answer that does not go in the plan.
+
+3. **Check what's already wired up.**
+   - [tests/e2e/drivers/](../../tests/e2e/drivers/) holds one driver module per
+     feature plus the shared ones (`tanstack`, `querysearch`, `antd`, `api`,
+     `storage`, `console`). Reference driver methods by name in the steps so the
+     generator reuses them rather than reinventing a locator.
+   - If a step needs something the driver does not expose, say so — the
+     generator adds a driver method, not a `page.locator` in the spec.
+
+4. **Navigate and explore**
    - Invoke `planner_setup_page` once before any other browser tool.
    - Use `browser_snapshot` to read the page's accessibility tree. **Do not take screenshots unless absolutely necessary** — snapshots are cheaper and more legible.
    - Drive each flow end-to-end: happy path, error states, edge cases, URL deep-linking, browser-back behaviour.
 
-4. **Design comprehensive scenarios**
+5. **Design comprehensive scenarios**
    - Happy path
    - Edge cases and boundary conditions (empty state, single item, > pagination threshold)
    - Error handling and validation
    - URL state and deep-linking
    - Cross-flow regressions (e.g. searching while paginated)
 
-5. **Structure the test plan**
+6. **Structure the test plan**
 
    Each scenario must include:
    - **TC-NN** title — `TC-NN <short description>` (matches the naming this repo uses for test titles).
@@ -44,7 +73,7 @@ You will:
    - Expected outcomes per step.
    - Cleanup notes (what gets created and how to remove it — usually via API).
 
-6. **Save the plan and the checklist**
+7. **Save the plan and the checklist**
    - **Plan:** `tests/e2e/specs/<feature>/<feature>-test-plan.md`. **`tests/e2e/specs/` is gitignored** — plans are scratch artifacts: working input for the generator, regenerable, not committed. Don't treat them as durable documentation. The committed tests are the source of truth.
    - **Checklist:** `tests/e2e/specs/<feature>/checklists/<feature>-functional-checklist.md`. A manual-verification runbook that mirrors the TC list one-to-one (one checkbox per TC) for QA hand-off. Same gitignore, same scratch status.
    - **The checklist must stay in sync with the TCs.** When you regenerate the plan, regenerate the checklist alongside it — they share TC IDs and titles, and the checklist ordering must match. If the existing spec under `tests/e2e/tests/<feature>/` has more / fewer / different TCs than the prior plan, the spec is authoritative: re-derive plan and checklist from it.
@@ -95,8 +124,8 @@ The dashboards list page (`/dashboard`) lists all dashboards in the workspace. F
 **Quality bar:**
 - Steps must be specific enough that any tester (or the generator agent) can follow without ambiguity.
 - Include negative scenarios — empty state, no-match search, validation errors.
-- Each scenario must own its preconditions and cleanup. **Do not invent cross-file global fixtures** — they break parallel-by-file execution. Suite-level `beforeAll` / `afterAll` *within* a single spec file is fine and is the preferred shape for files with > ~10 scenarios; per-test `try / finally` is fine for smaller specs.
-- Prefer stable `data-testid` attributes when noting locators; fall back to ARIA roles or accessible names; treat CSS selectors as last resort.
+- Each scenario must own its preconditions and cleanup, and assert only on names it seeded. **Never depend on data another spec file created.** Files run in parallel. Pick the seed scope from the Seeding table in [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md).
+- Note the `data-testid` for every element a step touches. Where none exists, say so: the generator adds it to the product rather than falling back to roles or CSS (antd internals aside).
 - **Don't pad coverage.** Every TC must catch a regression that would actually ship if the test were missing — a real branch in the source, a real user-visible failure mode. A TC that asserts a hard-coded string is still rendered, or that a button is still a button, adds nothing but maintenance cost: it inflates the suite, slows CI, and trains readers to skim past the directory. Before writing a scenario, ask "what code change would break this?" — if the only answer is "deleting the literal under test," cut it or fold it into a richer scenario as one assertion among many.
 - **Collapse near-duplicates.** Two TCs that differ only in input value (search by title vs search by description, when the underlying code path is the same) should merge into one parameterised scenario unless each input genuinely exercises a distinct branch. Prefer one assertion-rich TC over three thin ones.
 - **Smoke-checks aren't TCs.** "Heading is visible" belongs as the first assertion inside a real scenario, not as its own numbered case.

.claude/rules/pytest.md

@@ -17,3 +17,4 @@ For the Python integration suite under `tests/`. Setup, running, and suite layou
 - **snake_case parametrize ids.** `ids=["fill_gaps", "fill_zero"]`, not camelCase.
 - **Name suite files with the two-digit prefix (`NN_*.py`).** `pyproject.toml` restricts collection to `[0-9][0-9]_*.py` (plus the bootstrap `setup.py` / `run.py`) — a file that doesn't match is silently never collected.
 - **Always run pytest from `tests/`.** `--import-mode=importlib` is what allows same-basename files across suites (`querier/01_logs.py` vs `rawexportdata/01_logs.py`), but it disables pytest's implicit `sys.path` injection — `import fixtures` only resolves via `pythonpath = ["."]` from that rootdir.
+- **After changing any `.py` file, run `make py-fmt` and `make py-lint`** from the repo root and fix what they report.

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

.gitattributes

@@ -1,3 +1,10 @@
 *.css linguist-detectable=false
 *.stories.mocks.tsx linguist-generated=true
 **/__story_mockdata__/** linguist-generated=true
+tests/e2e/drivers/** linguist-generated=true
+
+# Transcribed E2E data: seeded telemetry, golden payloads and the entity
+# datasets. Regenerated from the seeder rather than hand-edited, and re-derived
+# by the specs that read them, so they are collapsed in review.
+tests/e2e/testdata/** linguist-generated=true
+tests/e2e/**/__generated__/** linguist-generated=true

.github/CODEOWNERS

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

.github/workflows/e2eci.yaml

@@ -2,17 +2,37 @@ name: e2eci
 
 on:
   pull_request:
-    types:
-      - labeled
-  pull_request_target:
-    types:
-      - labeled
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    outputs:
+      e2e: ${{ steps.changes.outputs.e2e }}
+    steps:
+      - name: changes
+        id: changes
+        env:
+          GH_TOKEN: ${{ github.token }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          FORCE: ${{ contains(github.event.pull_request.labels.*.name, 'safe-to-e2e') }}
+        run: |
+          CHANGED_FILES=$(gh api "repos/$GITHUB_REPOSITORY/pulls/$PR_NUMBER/files" --paginate --jq '.[].filename | select(startswith("tests/integration/") | not)')
+          PATTERN='^(frontend/|tests/|\.github/workflows/e2eci\.yaml$|cmd/enterprise/Dockerfile\.with-web\.integration$)'
+
+          if [ "$FORCE" = "true" ]; then
+            echo "e2e=true" >> "$GITHUB_OUTPUT"
+          elif printf '%s\n' "$CHANGED_FILES" | grep -qE "$PATTERN"; then
+            echo "e2e=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "e2e=false" >> "$GITHUB_OUTPUT"
+          fi
   fmtlint:
-    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')
+    needs: changes
+    if: needs.changes.outputs.e2e == 'true'
     runs-on: ubuntu-latest
     steps:
       - name: checkout
@@ -40,20 +60,41 @@ jobs:
       matrix:
         project:
           - chromium
-    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')
+        shard: [1, 2, 3, 4]
+    needs: changes
+    if: needs.changes.outputs.e2e == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 30
     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 +103,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 +130,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 +150,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 +168,17 @@ 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
+  # Required status check. Fails when e2e was needed but did not pass.
+  e2e:
+    if: always()
+    needs: [changes, fmtlint, test]
+    runs-on: ubuntu-latest
+    steps:
+      - name: verdict
+        if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')
+        run: |
+          echo "::error::e2e did not pass."
+          exit 1

.github/workflows/integrationci.yaml

@@ -60,6 +60,7 @@ jobs:
           - rawexportdata
           - promqlconformance
           - promapiconformance
+          - promote
           - querierauthz
           - role
           - rootuser

.gitignore

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

cmd/authz.go

@@ -104,6 +104,7 @@ func runGenerateAuthz(_ context.Context) error {
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceQuickFilter).String():       true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSavedView).String():         true,
 	}
 
 	allowedTypes := map[string]bool{}

docs/api/openapi.yml

@@ -1,5 +1,219 @@
 components:
   schemas:
+    AiobservabilitytypesBlobPart:
+      properties:
+        content:
+          type: string
+        mime_type:
+          nullable: true
+          type: string
+        modality:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - modality
+      - content
+      type: object
+    AiobservabilitytypesChatMessage:
+      properties:
+        name:
+          nullable: true
+          type: string
+        parts:
+          $ref: '#/components/schemas/AiobservabilitytypesParts'
+        role:
+          type: string
+      required:
+      - role
+      - parts
+      type: object
+    AiobservabilitytypesCompactionPart:
+      properties:
+        content:
+          nullable: true
+          type: string
+        id:
+          nullable: true
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      type: object
+    AiobservabilitytypesFilePart:
+      properties:
+        file_id:
+          type: string
+        mime_type:
+          nullable: true
+          type: string
+        modality:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - modality
+      - file_id
+      type: object
+    AiobservabilitytypesGenericPart:
+      additionalProperties: {}
+      type: object
+    AiobservabilitytypesGenericServerToolCall:
+      additionalProperties: {}
+      type: object
+    AiobservabilitytypesGenericServerToolCallResponse:
+      additionalProperties: {}
+      type: object
+    AiobservabilitytypesInputMessages:
+      items:
+        $ref: '#/components/schemas/AiobservabilitytypesChatMessage'
+      type: array
+    AiobservabilitytypesOutputMessage:
+      properties:
+        finish_reason:
+          nullable: true
+          type: string
+        name:
+          nullable: true
+          type: string
+        parts:
+          $ref: '#/components/schemas/AiobservabilitytypesParts'
+        role:
+          type: string
+      required:
+      - role
+      - parts
+      type: object
+    AiobservabilitytypesOutputMessages:
+      items:
+        $ref: '#/components/schemas/AiobservabilitytypesOutputMessage'
+      type: array
+    AiobservabilitytypesPart:
+      discriminator:
+        mapping:
+          blob: '#/components/schemas/AiobservabilitytypesBlobPart'
+          compaction: '#/components/schemas/AiobservabilitytypesCompactionPart'
+          file: '#/components/schemas/AiobservabilitytypesFilePart'
+          reasoning: '#/components/schemas/AiobservabilitytypesReasoningPart'
+          server_tool_call: '#/components/schemas/AiobservabilitytypesServerToolCallPart'
+          server_tool_call_response: '#/components/schemas/AiobservabilitytypesServerToolCallResponsePart'
+          text: '#/components/schemas/AiobservabilitytypesTextPart'
+          tool_call: '#/components/schemas/AiobservabilitytypesToolCallRequestPart'
+          tool_call_response: '#/components/schemas/AiobservabilitytypesToolCallResponsePart'
+          uri: '#/components/schemas/AiobservabilitytypesUriPart'
+        propertyName: type
+      oneOf:
+      - $ref: '#/components/schemas/AiobservabilitytypesTextPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesToolCallRequestPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesToolCallResponsePart'
+      - $ref: '#/components/schemas/AiobservabilitytypesServerToolCallPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesServerToolCallResponsePart'
+      - $ref: '#/components/schemas/AiobservabilitytypesBlobPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesFilePart'
+      - $ref: '#/components/schemas/AiobservabilitytypesUriPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesReasoningPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesCompactionPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesGenericPart'
+      type: object
+    AiobservabilitytypesParts:
+      items:
+        $ref: '#/components/schemas/AiobservabilitytypesPart'
+      type: array
+    AiobservabilitytypesReasoningPart:
+      properties:
+        content:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - content
+      type: object
+    AiobservabilitytypesServerToolCallPart:
+      properties:
+        id:
+          nullable: true
+          type: string
+        name:
+          type: string
+        server_tool_call:
+          $ref: '#/components/schemas/AiobservabilitytypesGenericServerToolCall'
+        type:
+          type: string
+      required:
+      - type
+      - name
+      - server_tool_call
+      type: object
+    AiobservabilitytypesServerToolCallResponsePart:
+      properties:
+        id:
+          nullable: true
+          type: string
+        server_tool_call_response:
+          $ref: '#/components/schemas/AiobservabilitytypesGenericServerToolCallResponse'
+        type:
+          type: string
+      required:
+      - type
+      - server_tool_call_response
+      type: object
+    AiobservabilitytypesTextPart:
+      properties:
+        content:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - content
+      type: object
+    AiobservabilitytypesToolCallRequestPart:
+      properties:
+        arguments: {}
+        id:
+          nullable: true
+          type: string
+        name:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - name
+      type: object
+    AiobservabilitytypesToolCallResponsePart:
+      properties:
+        id:
+          nullable: true
+          type: string
+        response:
+          nullable: true
+        type:
+          type: string
+      required:
+      - type
+      - response
+      type: object
+    AiobservabilitytypesUriPart:
+      properties:
+        mime_type:
+          nullable: true
+          type: string
+        modality:
+          type: string
+        type:
+          type: string
+        uri:
+          type: string
+      required:
+      - type
+      - modality
+      - uri
+      type: object
     AlertmanagertypesChannel:
       properties:
         createdAt:
@@ -3367,6 +3581,69 @@ components:
         repeatVariable:
           type: string
       type: object
+    DashboardtypesAIBuilderQuerySpec:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5TraceAggregation'
+          nullable: true
+          type: array
+        bucketOptions:
+          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
+        cursor:
+          type: string
+        disabled:
+          type: boolean
+        filter:
+          $ref: '#/components/schemas/Querybuildertypesv5Filter'
+        functions:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5Function'
+          nullable: true
+          type: array
+        groupBy:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
+          nullable: true
+          type: array
+        having:
+          $ref: '#/components/schemas/Querybuildertypesv5Having'
+        legend:
+          type: string
+        limit:
+          type: integer
+        limitBy:
+          $ref: '#/components/schemas/Querybuildertypesv5LimitBy'
+        name:
+          type: string
+        offset:
+          type: integer
+        order:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+          nullable: true
+          type: array
+        secondaryAggregations:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
+          nullable: true
+          type: array
+        selectFields:
+          items:
+            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          nullable: true
+          type: array
+        signal:
+          enum:
+          - traces
+          type: string
+        source:
+          $ref: '#/components/schemas/TelemetrytypesSource'
+        stepInterval:
+          $ref: '#/components/schemas/Querybuildertypesv5Step'
+      required:
+      - signal
+      type: object
     DashboardtypesAreaChartAppearance:
       properties:
         fillMode:
@@ -4420,6 +4697,7 @@ components:
     DashboardtypesQueryPlugin:
       discriminator:
         mapping:
+          signoz/AIBuilderQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec'
           signoz/BuilderQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
           signoz/ClickHouseSQL: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5ClickHouseQuery'
           signoz/CompositeQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery'
@@ -4429,6 +4707,7 @@ components:
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
+      - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderFormula'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQuery'
@@ -4438,12 +4717,25 @@ components:
     DashboardtypesQueryPluginKind:
       enum:
       - signoz/BuilderQuery
+      - signoz/AIBuilderQuery
       - signoz/CompositeQuery
       - signoz/Formula
       - signoz/PromQLQuery
       - signoz/ClickHouseSQL
       - signoz/TraceOperator
       type: string
+    DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec:
+      properties:
+        kind:
+          enum:
+          - signoz/AIBuilderQuery
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesAIBuilderQuerySpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec:
       properties:
         kind:
@@ -7754,8 +8046,35 @@ components:
       - metric
       - value
       type: object
+    PromotetypesIndexMaterializedPathsResult:
+      properties:
+        indexed:
+          items:
+            $ref: '#/components/schemas/PromotetypesPromotePath'
+          nullable: true
+          type: array
+        skipped:
+          items:
+            $ref: '#/components/schemas/PromotetypesPromotePath'
+          nullable: true
+          type: array
+      required:
+      - indexed
+      - skipped
+      type: object
+    PromotetypesPostableIndexMaterializedPaths:
+      properties:
+        dryRun:
+          type: boolean
+        signal:
+          type: string
+      required:
+      - signal
+      type: object
     PromotetypesPromotePath:
       properties:
+        context:
+          type: string
         indexes:
           items:
             $ref: '#/components/schemas/PromotetypesWrappedIndex'
@@ -7764,6 +8083,12 @@ components:
           type: string
         promote:
           type: boolean
+        signal:
+          type: string
+      required:
+      - signal
+      - context
+      - path
       type: object
     PromotetypesWrappedIndex:
       properties:
@@ -10217,6 +10542,14 @@ components:
           items:
             $ref: '#/components/schemas/SpantypesEvent'
           type: array
+        formattedInput:
+          $ref: '#/components/schemas/AiobservabilitytypesInputMessages'
+        formattedOutput:
+          $ref: '#/components/schemas/AiobservabilitytypesOutputMessages'
+        formatterWarnings:
+          items:
+            type: string
+          type: array
         has_error:
           type: boolean
         kind_string:
@@ -10259,6 +10592,9 @@ components:
       - attributes
       - events
       - references
+      - formattedInput
+      - formattedOutput
+      - formatterWarnings
       type: object
     SpantypesTraceAISummary:
       properties:
@@ -10339,6 +10675,14 @@ components:
         flags:
           minimum: 0
           type: integer
+        formattedInput:
+          $ref: '#/components/schemas/AiobservabilitytypesInputMessages'
+        formattedOutput:
+          $ref: '#/components/schemas/AiobservabilitytypesOutputMessages'
+        formatterWarnings:
+          items:
+            type: string
+          type: array
         has_children:
           type: boolean
         has_error:
@@ -13432,110 +13776,6 @@ paths:
       tags:
       - llmpricingrules
       x-signoz-stability: alpha
-  /api/v1/logs/promote_paths:
-    get:
-      deprecated: false
-      description: This endpoints promotes and indexes paths
-      operationId: ListPromotedAndIndexedPaths
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    items:
-                      $ref: '#/components/schemas/PromotetypesPromotePath'
-                    nullable: true
-                    type: array
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Promote and index paths
-      tags:
-      - logs
-      x-signoz-stability: alpha
-    post:
-      deprecated: false
-      description: This endpoints promotes and indexes paths
-      operationId: HandlePromoteAndIndexPaths
-      requestBody:
-        content:
-          application/json:
-            schema:
-              items:
-                $ref: '#/components/schemas/PromotetypesPromotePath'
-              nullable: true
-              type: array
-      responses:
-        "201":
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Promote and index paths
-      tags:
-      - logs
-      x-signoz-stability: alpha
   /api/v1/org/preferences:
     get:
       deprecated: false
@@ -13707,6 +13947,217 @@ paths:
       tags:
       - preferences
       x-signoz-stability: alpha
+  /api/v1/promoted_paths:
+    get:
+      deprecated: false
+      description: This endpoint lists the promoted paths of every JSON column, each
+        annotated with its signal and context. The signal, context, promoted and indexes
+        query parameters filter the listing.
+      operationId: ListPromotedPaths
+      parameters:
+      - in: query
+        name: signal
+        schema:
+          type: string
+      - in: query
+        name: context
+        schema:
+          type: string
+      - in: query
+        name: promoted
+        schema:
+          nullable: true
+          type: boolean
+      - in: query
+        name: indexes
+        schema:
+          nullable: true
+          type: boolean
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    items:
+                      $ref: '#/components/schemas/PromotetypesPromotePath'
+                    nullable: true
+                    type: array
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - logs-field:list
+        - traces-field:list
+      - tokenizer:
+        - logs-field:list
+        - traces-field:list
+      summary: List promoted paths
+      tags:
+      - promote
+      x-signoz-stability: alpha
+    post:
+      deprecated: false
+      description: This endpoint promotes paths of JSON columns to their promoted
+        columns. Each path names its promotion target with its signal and context,
+        e.g. traces/attribute.
+      operationId: PromotePaths
+      requestBody:
+        content:
+          application/json:
+            examples:
+              logs_body:
+                summary: 'Logs body: promote a path and index it'
+                value:
+                - context: body
+                  indexes:
+                  - fieldDataType: string
+                    granularity: 1
+                    type: ngrambf_v1(4, 1024, 2, 0)
+                  path: user.name
+                  promote: true
+                  signal: logs
+              traces_attribute:
+                summary: 'Traces attribute: promote a path'
+                value:
+                - context: attribute
+                  path: http.method
+                  promote: true
+                  signal: traces
+            schema:
+              items:
+                $ref: '#/components/schemas/PromotetypesPromotePath'
+              nullable: true
+              type: array
+      responses:
+        "201":
+          description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - logs-field:update
+        - traces-field:update
+      - tokenizer:
+        - logs-field:update
+        - traces-field:update
+      summary: Promote paths
+      tags:
+      - promote
+      x-signoz-stability: alpha
+  /api/v1/promoted_paths/materialized:
+    post:
+      deprecated: false
+      description: This endpoint indexes the JSON sub-columns of materialized paths
+        whose columns are indexed and returns the indexed and skipped paths.
+      operationId: IndexMaterializedPaths
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/PromotetypesPostableIndexMaterializedPaths'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/PromotetypesIndexMaterializedPathsResult'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - logs-field:update
+        - traces-field:update
+      - tokenizer:
+        - logs-field:update
+        - traces-field:update
+      summary: Index materialized paths
+      tags:
+      - promote
+      x-signoz-stability: alpha
   /api/v1/roles:
     get:
       deprecated: false
@@ -15699,10 +16150,8 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
+      - api_key: []
+      - tokenizer: []
       summary: Get stats
       tags:
       - stats
@@ -16080,9 +16529,12 @@ paths:
   /api/v1/traces/{traceID}/thread:
     get:
       deprecated: false
-      description: Returns the spans carrying gen_ai input or output messages in timestamp
-        order. Pass nextCursor as after or prevCursor as before to page, or spanId
-        to open the page around a span.
+      description: Returns the gen_ai spans of a trace, model calls, tool calls and
+        agent spans, in timestamp order. The messages a span carries are decoded into
+        formattedInput and formattedOutput, with formatterWarnings holding what the
+        converter could not resolve; a span without messages has both empty. Pass
+        nextCursor as after or prevCursor as before to page, or spanId to open the
+        page around a span.
       operationId: GetTraceThread
       parameters:
       - description: Page size, at most 100. 0 means 20.
@@ -18548,9 +19000,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: Run Infra Monitoring Setup Checks
       tags:
       - inframonitoring
@@ -18622,9 +19074,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Clusters for Infra Monitoring
       tags:
       - inframonitoring
@@ -18706,9 +19158,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List DaemonSets for Infra Monitoring
       tags:
       - inframonitoring
@@ -18784,9 +19236,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Deployments for Infra Monitoring
       tags:
       - inframonitoring
@@ -18852,9 +19304,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Hosts for Infra Monitoring
       tags:
       - inframonitoring
@@ -18934,9 +19386,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Jobs for Infra Monitoring
       tags:
       - inframonitoring
@@ -19015,9 +19467,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Kubernetes Containers for Infra Monitoring
       tags:
       - inframonitoring
@@ -19086,9 +19538,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Namespaces for Infra Monitoring
       tags:
       - inframonitoring
@@ -19161,9 +19613,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Nodes for Infra Monitoring
       tags:
       - inframonitoring
@@ -19237,9 +19689,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Pods for Infra Monitoring
       tags:
       - inframonitoring
@@ -19308,9 +19760,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Volumes for Infra Monitoring
       tags:
       - inframonitoring
@@ -19386,9 +19838,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List StatefulSets for Infra Monitoring
       tags:
       - inframonitoring
@@ -24556,6 +25008,75 @@ paths:
       tags:
       - rules
       x-signoz-stability: alpha
+  /api/v2/rules/{id}/clone:
+    post:
+      deprecated: false
+      description: 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.
+      operationId: CloneRuleByID
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "201":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/RuletypesRule'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Clone alert rule
+      tags:
+      - rules
+      x-signoz-stability: alpha
   /api/v2/rules/{id}/history/filter_keys:
     get:
       deprecated: false
@@ -28226,7 +28747,9 @@ paths:
       deprecated: false
       description: Returns the waterfall view of spans including all spans if total
         spans are under a limit, a max count otherwise. Aggregations are dropped compared
-        to v3
+        to v3. A span carrying gen_ai input or output messages also has them decoded
+        into formattedInput and formattedOutput, with formatterWarnings holding what
+        the converter could not resolve.
       operationId: GetWaterfallV4
       parameters:
       - in: path

docs/contributing/go/readme.md

@@ -20,6 +20,7 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Provider](provider.md) - Dependency injection and provider patterns
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`
+- [Span Mapper](spanmapper.md) - Provenance of the shipped span mapper definitions and what is left unmapped
 - [SQL](sql.md) - Database and SQL patterns
 - [DSL Filtering to SQL](dslfilteringtosql.md) - Compiling the list filter DSL to relational-store WHERE clauses
 - [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`

docs/contributing/go/spanmapper.md

@@ -0,0 +1,62 @@
+# Span Mapper
+
+Where each source key in the shipped definitions under `pkg/modules/spanmapper/implspanmapper/fs/definitions/` comes from. A group runs on spans with an attribute key containing one of its condition substrings; sources are tried by priority and the first present wins; an existing target is never overwritten. Bump `version` on every change.
+
+## gen_ai.llm
+
+Condition: `model`, `llm.input_messages` (OpenInference sets `llm.model_name` from the response, so a failed call has no model key).
+
+| Source | Emitted by |
+|---|---|
+| `llm.model_name`, `llm.provider`, `llm.system`, `llm.token_count.prompt`, `llm.token_count.completion`, `llm.token_count.prompt_details.cache_read`, `llm.token_count.prompt_details.cache_write`, `llm.token_count.completion_details.reasoning`, `llm.finish_reason`, `input.value`, `output.value`, `embedding.model_name`, `reranker.model_name`, `openinference.span.kind` | OpenInference |
+| `llm.request.model`, `llm.response.model`, `llm.vendor`, `llm.usage.prompt_tokens`, `llm.usage.completion_tokens`, `llm.response.finish_reason`, `llm.response.stop_reason` | OpenLLMetry before the `gen_ai` rename |
+| `gen_ai.system`, `gen_ai.usage.prompt_tokens`, `gen_ai.usage.completion_tokens`, `gen_ai.usage.cache_read_input_tokens`, `gen_ai.usage.cache_creation_input_tokens`, `gen_ai.usage.reasoning_tokens`, `gen_ai.prompt`, `gen_ai.completion`, `llm.request.type`, `traceloop.span.kind` | OpenLLMetry, LiteLLM, CrewAI, Mistral, LangSmith, OpenRouter gateway |
+| `gen_ai.usage.cache_write.input_tokens` | OTel semconv draft spelling, Codex |
+| `gen_ai.response.finish_reason`, `gen_ai.usage.prompt_token_details.cached_read_tokens`, `gen_ai.usage.completion_token_details.reasoning_tokens` | Bifrost gateway |
+| `gen_ai.usage.input_tokens.cached` | OpenRouter gateway |
+| `gen_ai.response.model`, last source for the request model | vLLM, which writes only the response model |
+| `ai.model.id`, `ai.model.provider`, `ai.response.model`, `ai.response.finishReason`, `ai.prompt.messages`, `ai.response.text`, `ai.response.toolCalls`, `ai.usage.promptTokens`, `ai.usage.completionTokens` | Vercel AI SDK v4, Mastra |
+| `ai.usage.inputTokens`, `ai.usage.outputTokens`, `ai.usage.cachedInputTokens`, `ai.usage.reasoningTokens` | Vercel AI SDK v5 |
+| `langfuse.observation.model.name`, `langfuse.session.id` | Langfuse SDK v3 |
+| `session.id` | OpenInference, Langfuse, Claude Code |
+| `gen_ai.client.session_id` | opentelemetry-hooks runner (Cursor, Copilot, Claude Code hooks) |
+| `model`, `input_tokens`, `output_tokens`, `cache_read_tokens`, `cache_creation_tokens` | Claude Code `claude_code.llm_request` spans ([docs](https://code.claude.com/docs/en/monitoring-usage#span-attributes)) |
+
+## gen_ai.tool
+
+Condition: `tool.name` (OpenInference), `ai.toolCall.` (Vercel, Mastra), `tool_call_args`, `tool_response` (Google ADK), `tool_use_id` (Claude Code, opentelemetry-hooks). Not `tool_name`: Codex records it on the model call span.
+
+| Source | Emitted by |
+|---|---|
+| `tool.name`, `tool.id`, `tool.description`, `input.value`, `output.value`, `openinference.span.kind` | OpenInference |
+| `ai.toolCall.name`, `ai.toolCall.id`, `ai.toolCall.args`, `ai.toolCall.result` | Vercel AI SDK, Mastra |
+| `traceloop.entity.input`, `traceloop.entity.output`, `traceloop.span.kind`, `llm.request.type` | OpenLLMetry |
+| `gcp.vertex.agent.tool_call_args`, `gcp.vertex.agent.tool_response` | Google ADK |
+| `tool_name` | Claude Code `claude_code.tool` spans |
+| `gen_ai.client.tool_name`, `gen_ai.client.tool_use_id` | opentelemetry-hooks runner (Cursor, Copilot, Claude Code hooks) |
+
+## gen_ai.agent
+
+Condition: `agent`.
+
+| Source | Emitted by |
+|---|---|
+| `agent.name`, `agent.id`, `agent.description`, `openinference.span.kind` | OpenInference; `agent.id` and `agent.description` seen in no capture |
+| `agent_name`, `final_result` | Pydantic AI |
+| `crewai.agent.role`, `crewai.agent.id` | CrewAI |
+| `traceloop.span.kind`, `llm.request.type` | OpenLLMetry |
+| `agent_id` | Claude Code |
+
+## Coverage of documented integrations
+
+Every integration under [signoz.io/docs/llm-observability](https://signoz.io/docs/llm-observability/) was checked by looking at the instrumentation its page installs and the keys that instrumentation writes.
+
+- Most pages install OpenInference or OpenLLMetry, or an SDK that writes OTel GenAI semconv itself (OpenAI, OpenAI Agents, Pydantic AI, AutoGen, Microsoft Agent Framework, Semantic Kernel, Copilot Chat, LiteLLM, OpenRouter). Their keys are the rows above.
+- Three write their own keys and have their own rows: Claude Code and Claude Agent SDK, Cursor through opentelemetry-hooks, vLLM (response model only).
+- Codex cannot be priced by renaming: `model` sits on the sampling function spans, `gen_ai.usage.*` on the child `handle_responses` span, `conversation.id` on the `codex.sampling` phase span, never together on one span.
+
+To check a new integration, capture a trace and look for a model, usage, tool or messages key that no row above lists.
+
+## Left unmapped on purpose
+
+LiteLLM `llm.openai.messages` and `llm.openai.choices` (debug echo of the parent span's messages, Python repr). Total tokens and vendor cost keys (no target; the pricing processor owns cost). `ai.response.msToFirstChunk` and `gen_ai.latency.time_to_first_token` (milliseconds and seconds under one target).

docs/contributing/tests/e2e.md

@@ -11,7 +11,7 @@ Before running E2E tests, ensure you have the following installed:
 - Python 3.13+
 - [uv](https://docs.astral.sh/uv/getting-started/installation/)
 - Docker (for containerized services)
-- Node 18+ and Yarn
+- Node 18+ and pnpm
 
 ### Initial Setup
 
@@ -24,8 +24,8 @@ uv sync
 2. Install Node deps and Playwright browsers:
 ```bash
 cd e2e
-yarn install
-yarn install:browsers   # one-time Playwright browser install
+pnpm install
+pnpm install:browsers   # one-time Playwright browser install
 ```
 
 ### Starting the Test Environment
@@ -84,105 +84,117 @@ tests/
     ├── playwright.config.ts   # loads .env + .env.local via dotenv
     ├── .env.example           # staging-mode template
     ├── .env.local             # generated by bootstrap/setup.py (gitignored)
+    ├── AGENTS.md              # read this before writing a spec
     ├── bootstrap/
     │   └── setup.py           # test_setup / test_teardown — pytest lifecycle
-    ├── fixtures/              # Playwright test fixtures (test.extend) only
-    │   └── auth.ts
-    ├── helpers/               # function helpers + the constants they share with tests
-    │   ├── auth.ts
-    │   └── dashboards.ts
-    ├── testdata/              # static data files (JSON) used by helpers and tests
-    │   └── apm-metrics.json   # (example)
-    ├── tests/                 # Playwright .spec.ts files, one dir per feature area
+    ├── drivers/               # the driver kit: one module per feature
+    │   ├── kit.ts             # layer(), seeded(), the root `test`
+    │   ├── auth.ts            # login + per-worker storageState
+    │   ├── api.ts             # authed HTTP client + seeder URL
+    │   ├── tanstack.ts        # the shared table driver
+    │   ├── alerts/            # feature driver, seeds, payloads
+    │   └── infra/             # feature driver, seeds, __generated__/datasets.ts
+    ├── docs/flake-notes.md    # measurements and timeout budgets
+    ├── testdata/              # static data files (marked generated)
+    ├── tests/                 # Playwright .spec.ts files, one dir per feature
     │   └── alerts/
-    │       └── alerts.spec.ts # (example)
+    │       └── list.spec.ts   # (example)
     └── artifacts/             # per-run output (gitignored)
         ├── html/              # HTML reporter output
         ├── json/              # JSON reporter output
         └── results/           # per-test traces / screenshots / videos on failure
 ```
 
-### `fixtures/` vs `helpers/` — what goes where
+### The driver kit
 
-These two folders look similar but mean different things:
+A spec imports **one** module: its feature's `test` constant. That constant is
+built by composing layers, and each layer adds one named driver to the test
+arguments — so a spec body never handles a `Page`:
 
-- **`fixtures/`** holds *Playwright test fixtures* (created via `test.extend({...})`). By the canonical definition, a fixture is "a consistent, predefined set of data, objects, or environmental conditions used to ensure tests run in a stable state" — i.e. setup/teardown that runs *automatically* around each test or worker. `auth.ts` matches: it extends Playwright's `test` with an `authedPage` that's logged-in before every test runs and torn down after. If the only thing in this folder ever is `auth.ts`, that's fine — fixtures are a deliberately small surface.
-- **`helpers/`** holds plain function helpers that you call *explicitly* from a test or hook — they don't extend Playwright's `test`. This covers both behaviour helpers (e.g. `gotoDashboardsList(page)`) and the constants those helpers and the tests both refer to (e.g. `SEARCH_PLACEHOLDER`). Constants live next to the helpers that use them so a single import line in a test covers both.
-- **`testdata/`** holds static data files (typically JSON / YAML) consumed by the helpers — for example, `apm-metrics.json`, a real dashboard payload uploaded through the UI by an importer helper.
+```ts
+import { expect, test } from '../../drivers/alerts';
 
-Rule of thumb: if it's a `test.extend` fixture, put it in `fixtures/`. If it's a function you call explicitly (or a constant the function uses), put it in `helpers/`. If it's a static file the helpers read, put it in `testdata/`.
+test('TC-01 seeded rules render', async ({ alerts, alertList }) => {
+  await alerts.list.goto({ search: alertList.namePrefix });
+  await expect(alerts.list.rows()).toHaveCount(10);
+});
+```
 
-### Extended fixtures
-
-For features needing complex setup (API-seeded data, ruler evaluation waits, cleanup), create domain-specific fixtures that extend `auth`. Group them in `fixtures/<domain>/`.
+- **`drivers/kit.ts`** holds the composition primitives. `driver(name, build)`
+  binds a factory to the authenticated page; `seeded(name, open, close)` seeds
+  data once per worker on a throwaway admin page and tears it down after;
+  `allowFor(floor)` raises the test timeout to a floor and never lowers it.
+  `test.slow()` is banned in drivers, because it compounds when called in a loop.
+- **`drivers/<feature>.ts`** (or `drivers/<feature>/`) exports the feature's
+  driver, its layers, and the composed `test`. A driver is a plain function
+  returning an object of closures — no classes, and no `page` parameter on
+  anything a spec calls.
+- **Shared drivers** — `tanstack.ts` (the table), `querysearch.ts` (the
+  expression editor), `antd.ts` (select primitives), `console.ts`, `api.ts`,
+  `storage.ts` — are composed into feature drivers by direct call, not by
+  reaching for another fixture.
+- **`drivers/` is AI-owned**: coding agents generate and maintain it with the
+  specs, and `.gitattributes` collapses it in diffs.
+- **`testdata/`** and any `__generated__/` directory hold transcribed data. Both
+  are marked `linguist-generated`; something in the suite re-derives them at
+  runtime, so a stale value fails loudly rather than silently.
 
 **Fixture scopes:**
 - **test scope** — fresh data per test. Use for mutations (edit, delete, rename).
-- **worker scope** — shared across tests in one worker. Use for read-only data. Worker scope pays the setup cost once per worker instead of once per test.
+- **worker scope** — shared across a worker. Use for read-only data; it pays the
+  setup cost once per worker instead of once per test. Playwright builds them
+  lazily, so a spec that never destructures a seed never pays for it.
+- **suite scope**: a dataset only one file uses. Seed it in `test.beforeAll`
+  through `onAdminPage(browser, …)`, since `authedPage` is test-scoped.
 
-**The alerts pattern** (`fixtures/alerts/`) demonstrates extending fixtures:
+### Which layer does this test belong to?
 
-```
-fixtures/alerts/
-├── alert-rules.ts   # extends auth — worker-scoped rule list + test-scoped factory
-└── alert-history.ts # extends alert-rules — adds history fixtures (waits on ruler)
-```
+Four layers run against this codebase, in cost order: **jest → Storybook + msw →
+pytest integration → Playwright**. Before writing an E2E, check the cheaper
+three. [`tests/e2e/AGENTS.md`](../../../tests/e2e/AGENTS.md) has the full rule;
+the short version:
 
-Specs import from the fixture they need:
-
-```ts
-// List tests — just need rules, no history
-import { test, expect } from '../../../fixtures/alerts/alert-rules';
-
-// History tests — need history rows from ruler evaluation
-import { test, expect } from '../../../fixtures/alerts/alert-history';
-```
-
-**When creating new fixtures:**
-
-1. **Identify scope** — Will tests mutate the data? If yes, test-scoped. If read-only, worker-scoped.
-2. **Group by domain** — Put fixtures in `fixtures/<domain>/`. Helpers in `helpers/<domain>/`.
-3. **Extend existing fixtures** — Chain from `auth` or another fixture to inherit its setup.
-4. **Handle timeouts** — Worker-scoped fixtures that wait on backend processing need explicit timeouts.
-5. **Clean up** — Always delete seeded data in the fixture teardown (after `use()`).
-6. **Extract logic into functions** — Keep the `test.extend()` block lean; move setup/teardown logic to named functions so the extend block reads as a manifest of "what fixtures exist."
+- A pure function, a reducer, a config literal or a component's own behaviour is
+  a **jest** test. Most containers under `frontend/src/container/` already have
+  one.
+- A rendered state that needs no backend (empty, error, loading) is a
+  **Storybook** story or a jest test with a fixed mock.
+- Anything the **API** does — ordering, pagination, filter semantics, validation,
+  roll-ups — is a pytest integration test, and for infra monitoring and alert
+  evaluation it very likely already exists. Grep `tests/integration/` first.
+- An **E2E** is for a real response reaching a real DOM: URL and history, write
+  paths that must persist, cross-page navigation, and one seeded proof per
+  surface.
 
 Each spec follows these principles:
 
 1. **Directory per feature**: `tests/e2e/tests/<feature>/*.spec.ts`. Cross-resource junction concerns (e.g. cascade-delete) go in their own file, not packed into one giant spec.
 2. **Test titles use `TC-NN`**: `test('TC-01 alerts page — tabs render', ...)`. Preserves ordering at a glance and maps to external coverage tracking.
-3. **UI-first**: drive flows through the UI. Playwright traces capture every BE request/response the UI triggers, so asserting on UI outcomes implicitly validates BE contracts. Reach for direct `page.request.*` only when the test's *purpose* is asserting a response contract (use `page.waitForResponse` on a UI click) or when a specific UI step is structurally flaky (e.g. Ant DatePicker calendar-cell indices) — and even then try UI first.
-4. **Self-contained state**: each spec seeds its own data and cleans up at suite teardown. The pytest harness creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Two patterns work:
-    - **Per-test seed + cleanup in `try / finally`** — small specs where each test owns its data.
-    - **Suite-level seed + `afterAll` teardown** — preferred for larger specs. Each `createDashboard(...)` call adds the resulting ID to a module-level `Set<string>`, and one `test.afterAll(...)` deletes everything in the set. See `tests/e2e/tests/dashboards/list.spec.ts` for the full pattern. `test.beforeAll` / `test.afterAll` cannot use `authedPage` directly (it's test-scoped); use `newAdminContext(browser)` from `helpers/auth.ts` instead — it performs one fresh login per suite hook.
-5. **Seed via API when the UI flow is multi-step or brittle.** The frontend stores its JWT in `localStorage` under `AUTH_TOKEN`; `page.request.*` inherits the auth fixture's storage state. A typical pattern:
-    ```ts
-    const token = await page.evaluate(
-      () => (globalThis as any).localStorage.getItem('AUTH_TOKEN') || '',
-    );
-    await page.request.post('/api/v1/dashboards', {
-      data: { title: 'my-name', uploadedGrafana: false },
-      headers: { Authorization: `Bearer ${token}` },
-    });
-    ```
-    This is faster and more reliable than a multi-step UI seed. Reach for the UI flow only when the test's *purpose* is asserting that flow.
-6. **Reusable static data lives in `tests/e2e/testdata/`.** For example, `apm-metrics.json` is a real dashboard payload that `importApmMetricsDashboardViaUI` (in `helpers/dashboards.ts`) uploads through the actual Import JSON UI flow to seed a richly-tagged dashboard for search/list tests.
+3. **UI-first**: drive flows through the UI. Playwright traces capture every BE request/response the UI triggers, so asserting on UI outcomes implicitly validates BE contracts. To assert a write, attach `page.waitForResponse` before the click, then reload and re-read from the server.
+4. **Self-contained state**: each spec seeds its own data, scopes its assertions to the names it seeded, and cleans up. The pytest harness creates a fresh stack with **zero** dashboards / alerts / etc. Names carry the worker index, so parallel workers never collide. Pick the scope from the list above.
+5. **Seed through the kit when the UI flow is not under test.** `apiDriver(page)` (`drivers/api.ts`) creates control-plane objects with the session's token, and the seeder takes telemetry. The JWT lives in `localStorage`, so a spec never improvises with `page.request.*`. Feature drivers wrap both (`dashboards.create`, `alerts.seed.threshold`).
+6. **Reusable static data lives in `tests/e2e/testdata/`.** For example, `traces/large-trace.json` is POSTed to the seeder by `drivers/traces.ts`. Infra monitoring reads the integration suite's fixtures through `seedDataset` (`drivers/infra/seed.ts`) instead of keeping a copy, and asserts on what it returned.
+7. **Locate by testid, in the driver.** A missing testid is added to the product in the same change. Role, label and CSS lookups are a stopgap, converted as that code is touched; antd internals (`.ant-select-dropdown`) are the exception, since the markup is not ours.
 
 ## How to write an E2E test?
 
 Create a new file `tests/e2e/tests/alerts/smoke.spec.ts`:
 
 ```typescript
-import { test, expect } from '../../fixtures/auth';
+import { ALERT_LIST_PAGE_SIZE, expect, test } from '../../drivers/alerts';
 
-test('TC-01 alerts page — tabs render', async ({ authedPage: page }) => {
-  await page.goto('/alerts');
-  await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
-  await expect(page.getByRole('tab', { name: /configuration/i })).toBeVisible();
+test('TC-01 seeded rules render and paginate', async ({ alerts, alertList }) => {
+  await alerts.list.goto({ search: alertList.namePrefix });
+  await expect(alerts.list.table.totalCount()).toContainText(`of ${alertList.count}`);
+  await expect(alerts.list.rows()).toHaveCount(ALERT_LIST_PAGE_SIZE);
 });
 ```
 
-The `authedPage` fixture (from `tests/e2e/fixtures/auth.ts`) gives you a `Page` whose browser context is already authenticated as the admin user. First use per worker triggers one login; the resulting `storageState` is held in memory and reused for later requests.
+`alertList` is a worker-scoped seed: the rules exist before the test starts, are
+shared by every test in the worker that asks for them, and are deleted when the
+worker ends.
+
+The `authedPage` fixture (from `tests/e2e/drivers/kit.ts`, re-exported by every feature's `test`) gives you a `Page` whose browser context is already authenticated as the admin user. First use per worker triggers one login; the resulting `storageState` is held in memory and reused for later requests. Take it only when the driver genuinely does not cover what you need — navigation, `goBack`, `waitForResponse`, a second tab.
 
 To run just this test (assuming the stack is up via `test_setup`):
 
@@ -191,52 +203,56 @@ cd tests/e2e
 npx playwright test tests/alerts/smoke.spec.ts --project=chromium
 ```
 
-Here's a more comprehensive example that exercises a CRUD flow via the UI:
+Here's a more comprehensive example, driven entirely through the feature's
+driver:
 
 ```typescript
-import { test, expect } from '../../fixtures/auth';
+import { expect, test } from '../../drivers/alerts';
 
-test.describe.configure({ mode: 'serial' });
+test('TC-02 row actions persist: disable, then enable', async ({
+  authedPage: page,
+  alerts,
+  ownedRules,
+}) => {
+  const name = `smoke-rule-${Date.now()}`;
+  const ruleId = await ownedRules.threshold(name);
 
-test('TC-02 alerts list — create, toggle, delete', async ({ authedPage: page }) => {
-  await page.goto('/alerts?tab=AlertRules');
-  const name = 'smoke-rule';
+  await alerts.list.goto({ search: name });
+  await expect(alerts.list.stateCell(ruleId)).toHaveText('OK');
 
-  // Seed via UI — click "New Alert", fill form, save.
-  await page.getByRole('button', { name: /new alert/i }).click();
-  await page.getByTestId('alert-name-input').fill(name);
-  // ... fill metric / threshold / save ...
+  await alerts.list.openFirstRowActions();
+  await Promise.all([
+    // waitForResponse captures the call the UI triggers — no parallel fetch.
+    page.waitForResponse(
+      (res) =>
+        res.url().includes(`/api/v2/rules/${ruleId}`) &&
+        res.request().method() === 'PATCH',
+    ),
+    alerts.list.menuItem('Disable').click(),
+  ]);
 
-  // Find the row and exercise the action menu.
-  const row = page.locator('tr', { hasText: name });
-  await expect(row).toBeVisible();
-  await row.locator('[data-testid="alert-actions"] button').first().click();
-
-  // waitForResponse captures the network call the UI triggers — no parallel fetch needed.
-  const patchWait = page.waitForResponse(
-    (r) => r.url().includes('/rules/') && r.request().method() === 'PATCH',
-  );
-  await page.getByRole('menuitem').filter({ hasText: /^disable$/i }).click();
-  await patchWait;
-  await expect(row).toContainText(/disabled/i);
+  // Re-read from the server rather than trusting the optimistic update.
+  await page.reload();
+  await expect(alerts.list.stateCell(ruleId)).toHaveText('Disabled');
 });
 ```
 
-### Locator priority
+`ownedRules` is a test-scoped seed: every rule it creates is deleted when the
+test finishes, so the spec owns its data and nothing leaks into the next one.
 
-1. `getByTestId('...')` — preferred when the source exposes one. Stable, app-author-provided handle that survives copy-edits.
-2. `getByRole('button', { name: 'Submit' })`
-3. `getByLabel('Email')`
-4. `getByPlaceholder('...')`
-5. `getByText('...')`
-6. `locator('.ant-select')` — last resort (Ant Design dropdowns often have no semantic alternative)
+### Commits
+
+Commit driver changes apart from specs, product testids and tests moved to
+another layer, so each commit can be reviewed on its own.
+[`tests/e2e/AGENTS.md`](../../../tests/e2e/AGENTS.md#commits) has the order.
+`pnpm typecheck`, `pnpm lint` and `pnpm fmt:check` gate the suite.
 
 ## Agents
 
 Three Claude agents in `.claude/agents/` accelerate writing and maintaining E2E specs:
 
 - **`playwright-test-planner`** — explores a feature in a real browser plus the local frontend source and writes a test plan as a scratch markdown file (under `tests/e2e/specs/`, which is gitignored — plans are working artifacts for the generator, not committed docs).
-- **`playwright-test-generator`** — converts a test plan into Playwright spec files under `tests/e2e/tests/<feature>/`. Drives each scenario through MCP browser tools and emits TC-NN-titled tests using the `authedPage` fixture and the API-seed pattern.
+- **`playwright-test-generator`** — converts a test plan into Playwright spec files under `tests/e2e/tests/<feature>/`. Drives each scenario through MCP browser tools and emits TC-NN-titled tests on the feature's driver, adding the driver methods and seeds the plan needs.
 - **`playwright-test-healer`** — runs failing specs, debugs them with snapshots / console / network introspection, and edits the spec to fix selector drift, timing, or state-leak issues.
 
 The agents rely on the Playwright-test MCP server (`mcp__playwright-test__*` tools). Configure it in your Claude MCP settings; the permission allowlist lives in [.claude/settings.local.json](../../../.claude/settings.local.json).
@@ -248,15 +264,15 @@ The agents rely on the Playwright-test MCP server (`mcp__playwright-test__*` too
 With the stack already up, from `tests/e2e/`:
 
 ```bash
-yarn test                 # headless, all projects
+pnpm test                 # headless, all projects
 ```
 
 ### Running Specific Projects
 
 ```bash
-yarn test:chromium        # chromium only
-yarn test:firefox
-yarn test:webkit
+pnpm test:chromium        # chromium only
+pnpm test:firefox
+pnpm test:webkit
 ```
 
 ### Running Specific Tests
@@ -274,17 +290,17 @@ npx playwright test tests/alerts/history/ --project=chromium
 npx playwright test tests/alerts/page.spec.ts --project=chromium
 
 # Single test by title grep
-npx playwright test --project=chromium -g "AL-01"
+npx playwright test --project=chromium -g "TC-01"
 ```
 
 ### Iterative modes
 
 ```bash
-yarn test:ui              # Playwright UI mode — watch + step through
-yarn test:headed          # headed browser
-yarn test:debug           # Playwright inspector, pause-on-breakpoint
-yarn codegen              # record-and-replay locator generation
-yarn report               # open the last HTML report (artifacts/html)
+pnpm test:ui              # Playwright UI mode — watch + step through
+pnpm test:headed          # headed browser
+pnpm test:debug           # Playwright inspector, pause-on-breakpoint
+pnpm codegen              # record-and-replay locator generation
+pnpm report               # open the last HTML report (artifacts/html)
 ```
 
 ### Staging fallback
@@ -294,7 +310,7 @@ Point `SIGNOZ_E2E_BASE_URL` at a remote env via `.env` — no local backend brin
 ```bash
 cd tests/e2e
 cp .env.example .env      # fill SIGNOZ_E2E_USERNAME / PASSWORD
-yarn test:staging
+pnpm test:staging
 ```
 
 ## How to configure different options for E2E tests?
@@ -342,12 +358,14 @@ The same pytest flags integration tests expose work here, since E2E reuses the s
 - **Always use the `--reuse` flag** when setting up the E2E stack. `--with-web` adds a ~4 min frontend build on a cold start; later builds are incremental.
 - **Changed backend or frontend code? Re-run the setup command** — it passes `--rebuild`, swapping the SigNoz container for one built from your current sources while the rest of the stack stays up.
 - **Don't teardown before setup.** `--reuse` correctly handles partially-set-up state, so chaining teardown → setup wastes time.
-- **Prefer UI-driven flows.** Playwright captures BE requests in the trace; a parallel `fetch` probe is almost always redundant. Drop to `page.request.*` only when the UI can't reach what you need.
+- **Prefer UI-driven flows.** Playwright captures BE requests in the trace; a parallel `fetch` probe is almost always redundant. Seed through the kit, never with `page.request.*`.
 - **Use `page.waitForResponse` on UI clicks** to assert BE contracts — it still exercises the UI trigger path.
 - **Title every test `TC-NN <short description>`** — keeps the suite navigable and reportable.
 - **Split by resource, not by regression suite.** One spec per feature resource; cross-resource junction concerns (cascade-delete, linked-edit) get their own file.
-- **Use short descriptive resource names** (`alerts-list-rule`, `labels-rule`, `downtime-once`) — no timestamp disambiguation. Each test owns its resources and cleans up in `try/finally`.
+- **Name resources by what they are, plus the worker index** (`e2e-alert-list-w${workerIndex}-${Date.now()}`). Six workers share one stack, so assert only on names you seeded.
 - **Never commit `test.only`** — a pre-commit check or CI runs with `forbidOnly: true`.
 - **Prefer explicit waits over `page.waitForTimeout(ms)`.** `await expect(locator).toBeVisible()` is always better than `waitForTimeout(5000)`.
 - **Unique test names won't save you from shared-tenant state.** When two tests hit the same list page, either serialize (`describe.configure({ mode: 'serial' })`) or isolate cleanup religiously.
+- **Green locally, red on CI?** Run `STRESS=1 CI=1 pnpm test <path>` (4x CPU throttle, 2 workers, 2 retries) before filing a product bug.
+- **Commit drivers apart from specs.** One concern per commit; see [Commits](#commits).
 - **Artifacts go to `tests/e2e/artifacts/`** — HTML report at `artifacts/html`, traces at `artifacts/results/<test>/`. All gitignored; archive the dir in CI.

ee/query-service/rules/anomaly.go

@@ -423,7 +423,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 func (r *AnomalyRule) String() string {
 
 	ar := ruletypes.PostableRule{
-		AlertName:         r.Name(),
+		AlertName:         valuer.NewDisplayName(r.Name()),
 		RuleCondition:     r.Condition(),
 		EvalWindow:        r.EvalWindow(),
 		Labels:            r.Labels().Map(),

ee/query-service/rules/anomaly_test.go

@@ -46,7 +46,7 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 	target := 500.0
 
 	postableRule := ruletypes.PostableRule{
-		AlertName: "Test anomaly no data",
+		AlertName: valuer.NewDisplayName("Test anomaly no data"),
 		AlertType: ruletypes.AlertTypeMetric,
 		RuleType:  ruletypes.RuleTypeAnomaly,
 		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{
@@ -149,7 +149,7 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 	target := 500.0
 
 	postableRule := ruletypes.PostableRule{
-		AlertName: "Test anomaly no data with AbsentFor",
+		AlertName: valuer.NewDisplayName("Test anomaly no data with AbsentFor"),
 		AlertType: ruletypes.AlertTypeMetric,
 		RuleType:  ruletypes.RuleTypeAnomaly,
 		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{

ee/query-service/rules/manager.go

@@ -13,6 +13,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/types/ruletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error) {
@@ -118,7 +119,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 	}
 
 	parsedRule := opts.Rule
-	var alertname = parsedRule.AlertName
+	var alertname = parsedRule.AlertName.StringValue()
 	if alertname == "" {
 		// alertname is not mandatory for testing, so picking
 		// a random string here
@@ -126,7 +127,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 	}
 
 	// append name to indicate this is test alert
-	parsedRule.AlertName = fmt.Sprintf("%s%s", alertname, ruletypes.TestAlertPostFix)
+	parsedRule.AlertName = valuer.NewDisplayName(fmt.Sprintf("%s%s", alertname, ruletypes.TestAlertPostFix))
 
 	var rule baserules.Rule
 	var err error

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/main.ts

@@ -43,6 +43,11 @@ const mockAliases = [
 		find: /^@signozhq\/ui\/tooltip$/,
 		replacement: `${srcPath}/storybook/mocks/tooltip.mock.tsx`,
 	},
+	{
+		// jest: not replaced, a test asserts on the toast it fires.
+		find: /^@signozhq\/ui\/sonner$/,
+		replacement: `${srcPath}/storybook/mocks/sonner.mock.tsx`,
+	},
 ];
 
 /**

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/.storybook/preview-head.html

@@ -70,3 +70,49 @@
 		Object.defineProperty(window, 'Date', { value: FrozenDate, writable: true });
 	})();
 </script>
+
+<script>
+	// Storybook has no microphone. Chromium's recognizer asks for one and for
+	// Google's speech service, and the `not-allowed` or `network` it reports makes
+	// the assistant hide its mic for the rest of the tab. This one starts
+	// listening at once and hears only what a story passes to `hear`.
+	(() => {
+		class StorySpeechRecognition extends EventTarget {
+			static listening = null;
+			lang = 'en-US';
+			continuous = false;
+			interimResults = false;
+			onstart = null;
+			onresult = null;
+			onerror = null;
+			onend = null;
+
+			start() {
+				StorySpeechRecognition.listening = this;
+				setTimeout(() => this.onstart?.());
+			}
+
+			stop() {
+				if (StorySpeechRecognition.listening === this) {
+					StorySpeechRecognition.listening = null;
+				}
+				setTimeout(() => this.onend?.());
+			}
+
+			abort() {
+				this.stop();
+			}
+
+			/** An interim result: the words so far, still listening. */
+			hear(transcript) {
+				const result = Object.assign([{ transcript, confidence: 1 }], {
+					isFinal: false,
+				});
+				this.onresult?.({ resultIndex: 0, results: [result] });
+			}
+		}
+
+		window.SpeechRecognition = StorySpeechRecognition;
+		window.webkitSpeechRecognition = StorySpeechRecognition;
+	})();
+</script>

frontend/.storybook/preview.tsx

@@ -122,7 +122,21 @@ const preview: Preview = {
 							['List', 'New', 'Edit'],
 						],
 						'Dashboards',
-						['List', 'Detail', 'Panel Editor', 'Public'],
+						[
+							'List',
+							'Detail',
+							[
+								'Overview',
+								'Settings',
+								'Variables',
+								'New Variable',
+								'Edit Variable',
+								'Authz',
+							],
+							'Panel Editor',
+							['Overview', 'Chart Options', 'Thresholds and Links'],
+							'Public',
+						],
 						'Services',
 						['List', 'Detail', 'Top Level Operations', 'Service Map'],
 						'Logs',

frontend/.storybook/test-runner.ts

@@ -23,6 +23,13 @@ const IGNORED_MESSAGES = [
 	// (YouTube embeds, the docs pane) so they hit the real network instead of
 	// an unanswered msw request; the block is the point, not a bug.
 	/violates the following Content Security Policy directive/,
+	// The filter editor's ANTLR parser reports every syntax error through
+	// `console.error` (`line 1:14 missing ...`), so each partial expression
+	// typed into it logs one; the editor shows the same errors on screen.
+	/^line \d+:\d+ /,
+	// Chromium's echo of a 4xx/5xx response, which the `[response]` entry below
+	// already reports with its URL and the time its request left.
+	/^Failed to load resource: the server responded with a status of /,
 ];
 
 interface CapturedMessage {
@@ -86,7 +93,9 @@ const config: TestRunnerConfig = {
 		page.on('response', (response) => {
 			if (response.status() >= 400) {
 				messages.push({
-					at: Date.now(),
+					// The browser's clock, when the request left: a busy runner receives
+					// the outgoing story's responses after the next story has started.
+					at: response.request().timing().startTime,
 					text: `[response] ${response.status()} ${response.url()}`,
 				});
 			}

frontend/AGENTS.md

@@ -25,6 +25,7 @@ You are operating within a constrained context window and strict system prompts.
 - Never create barrel files.
 - When writing new css, prefer CSS Modules
   - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
+- Before styling a `@signozhq/ui` component, check its props in `node_modules/@signozhq/ui/dist/<component>/*.d.ts` for `className`/`style` support; some omit them. Avoid overriding the component's CSS vars unless explicitly needed.
 - When writing code that could need authorization checks, read ./src/lib/authz/README.md
 
 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:

frontend/docs/authz-guide.md

@@ -41,6 +41,12 @@ These hold for every page. The per-pattern sections below only add to them.
    `create` on API Keys, so blocking the outer container would hide work they are allowed to do.
 7. **Verbs not covered here** (`attach`, `detach`, `assignee`) behave like `delete`: gate the control that triggers
    them, not the surrounding content.
+8. **Expose the selector.** A role is scoped to a resource by pasting its selector into the role editor, so every
+   resource a role can be scoped to shows that selector with a copy control on its detail view or drawer. The selector
+   is whatever the editor accepts for the resource (dashboard ID, service account ID, role name, ...), listed per
+   resource in [permissions.config.ts](../src/container/RolesSettings/permissions.config.ts). It is already known from
+   the row or URL, so it stays visible and copyable without `read`. Reference: the ID field in
+   [ServiceAccountDrawer/OverviewTab.tsx](../src/components/ServiceAccountDrawer/OverviewTab.tsx).
 
 ## Page patterns
 
@@ -136,6 +142,8 @@ Use the existing components. Create a new one only if none fit.
 - [ ] Am I gating a shared component rather than a page or section?
   - If so, it must stay functional with no permission. Example: the Query Builder works without field suggestions when
     the user cannot read them.
+- [ ] Does the page expose the resource's selector with a copy control (rule 8)?
+  - The expected format is the `selectorPlaceholder` for the resource in `permissions.config.ts`.
 
 ## Testing
 

frontend/jest.setup.ts

@@ -41,6 +41,20 @@ if (!HTMLElement.prototype.releasePointerCapture) {
 	HTMLElement.prototype.releasePointerCapture = function (): void {};
 }
 
+// jsdom has no PointerEvent; Base UI Switch constructs one on click.
+if (typeof window.PointerEvent === 'undefined') {
+	class PointerEventMock extends MouseEvent {
+		pointerId: number;
+		pointerType: string;
+		constructor(type: string, init: PointerEventInit = {}) {
+			super(type, init);
+			this.pointerId = init.pointerId ?? 0;
+			this.pointerType = init.pointerType ?? '';
+		}
+	}
+	(window as any).PointerEvent = PointerEventMock;
+}
+
 if (typeof window.IntersectionObserver === 'undefined') {
 	class IntersectionObserverMock {
 		observe(): void {}

frontend/package.json

@@ -49,12 +49,13 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@grafana/data": "^11.6.15",
+    "@lezer/highlight": "1.2.1",
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.1.6",
+    "@signozhq/design-tokens": "2.2.1",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.1.0",
+    "@signozhq/ui": "0.2.0",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       '@grafana/data':
         specifier: ^11.6.15
         version: 11.6.15(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@lezer/highlight':
+        specifier: 1.2.1
+        version: 1.2.1
       '@monaco-editor/react':
         specifier: ^4.7.0
         version: 4.7.0(monaco-editor@0.55.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -72,14 +75,14 @@ importers:
         specifier: 5.3.0
         version: 5.3.0
       '@signozhq/design-tokens':
-        specifier: 2.1.6
-        version: 2.1.6
+        specifier: 2.2.1
+        version: 2.2.1
       '@signozhq/icons':
         specifier: 0.4.0
         version: 0.4.0
       '@signozhq/ui':
-        specifier: 0.1.0
-        version: 0.1.0(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
+        specifier: 0.2.0
+        version: 0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -1284,6 +1287,33 @@ packages:
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
 
+  '@base-ui/react@1.7.0':
+    resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.2':
+    resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
@@ -1726,20 +1756,20 @@ packages:
     resolution: {integrity: sha512-rZAP3aVgB9ds9KOeUSL+zZ21hPmo8dh6fnIFwRQj5EAZl9gzR7wxYbYXYysAM8CTqGmUGyp2S4kUdV17MnGuWQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  '@floating-ui/core@1.5.2':
-    resolution: {integrity: sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==}
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
 
-  '@floating-ui/dom@1.5.3':
-    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
 
-  '@floating-ui/react-dom@2.0.4':
-    resolution: {integrity: sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==}
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/utils@0.1.6':
-    resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
 
   '@gerrit0/mini-shiki@3.23.0':
     resolution: {integrity: sha512-bEMORlG0cqdjVyCEuU0cDQbORWX+kYCeo0kV1lbxF5bt4r7SID2l9bqsxJEM0zndaxpOUT7riCyIVEuqq/Ynxg==}
@@ -2920,19 +2950,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-checkbox@1.3.11':
-    resolution: {integrity: sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-collection@1.1.15':
     resolution: {integrity: sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==}
     peerDependencies:
@@ -2946,15 +2963,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-compose-refs@1.1.5':
     resolution: {integrity: sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==}
     peerDependencies:
@@ -3008,19 +3016,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dropdown-menu@2.1.24':
-    resolution: {integrity: sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-focus-guards@1.1.6':
     resolution: {integrity: sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==}
     peerDependencies:
@@ -3048,15 +3043,6 @@ packages:
     peerDependencies:
       react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
 
-  '@radix-ui/react-id@1.1.1':
-    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-id@1.1.4':
     resolution: {integrity: sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==}
     peerDependencies:
@@ -3066,19 +3052,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-menu@2.1.24':
-    resolution: {integrity: sha512-uW7RVuU6Lp/ZtfeY4b3kL32zccgEWvPv1+cf17ubYzHa9cL8AHokmk36cG/XEiH/smbQvumnieXX9j/e9RqJWA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-popover@1.1.23':
     resolution: {integrity: sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==}
     peerDependencies:
@@ -3144,19 +3117,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-primitive@2.1.4':
-    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-progress@1.1.16':
     resolution: {integrity: sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==}
     peerDependencies:
@@ -3222,15 +3182,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-slot@1.2.4':
-    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-slot@1.3.3':
     resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
     peerDependencies:
@@ -3240,19 +3191,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-switch@1.3.7':
-    resolution: {integrity: sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-tabs@1.1.21':
     resolution: {integrity: sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==}
     peerDependencies:
@@ -3266,45 +3204,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toggle-group@1.1.19':
-    resolution: {integrity: sha512-OtnwuSVjd1Ofi+AdnvhsjQdyuhCDwYs1w9RyB5BN/OavXOVQo42SYqQjwUnbPnaiPFBpQ9aX70dWeee+v2oBLA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle@1.1.18':
-    resolution: {integrity: sha512-7lonPlKfSacd20GlOBx2ltuVKz9oqWYZz+oMQyOltw6t1y2nyftj2ZmwwUHYn49kqfDWcp8dNZm5NgV+5Z+mug==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tooltip@1.2.16':
-    resolution: {integrity: sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-use-callback-ref@1.1.4':
     resolution: {integrity: sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==}
     peerDependencies:
@@ -3341,15 +3240,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-layout-effect@1.1.1':
-    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-use-layout-effect@1.1.4':
     resolution: {integrity: sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==}
     peerDependencies:
@@ -3721,14 +3611,14 @@ packages:
   '@sideway/pinpoint@2.0.0':
     resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
 
-  '@signozhq/design-tokens@2.1.6':
-    resolution: {integrity: sha512-n0cH4TRS1Xj7BR38HGiwIBDekIOAnDgl2JyYmAyUvws0L1nlE0txSHO5NiOBJ22Dm8uMva0v5/rOHxpKsGQbsw==}
+  '@signozhq/design-tokens@2.2.1':
+    resolution: {integrity: sha512-ulf6lhWUP6qxqsyemQySUMfOIKRvefvZ5rBRv+wlhOpPfYPk3uatPmPkKEhAjISpX8f9g1Gg8wgRZxUCysf20Q==}
 
   '@signozhq/icons@0.4.0':
     resolution: {integrity: sha512-QctNvNPlQlsefFdIVmSy/P/7a1IcQ3IryKP0KPMqtoqew3q89FGUmFa5IfEJ7Z3CHhtG1zaXwBKqP72QkLyA3g==}
 
-  '@signozhq/ui@0.1.0':
-    resolution: {integrity: sha512-FjqmQhz+WtpGl29gPGZey5YwNe4p++TCyX4jaGUhAgvlBGRmxmAKW0lFRrSOYTPbgFL5UaDCW0wR62aiGHZ+FA==}
+  '@signozhq/ui@0.2.0':
+    resolution: {integrity: sha512-j20ldiOkR150ON0BCDhlq6fXGoPN++7w6e4t2HtM2XMM4buJO7aHzPzNKvDRZ2UUf/LGPULPAW8w6sg6gUVHyw==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -8520,6 +8410,11 @@ packages:
       react: ^16.8.5 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0
 
+  react-compiler-runtime@1.0.0:
+    resolution: {integrity: sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental
+
   react-day-picker@9.9.0:
     resolution: {integrity: sha512-NtkJbuX6cl/VaGNb3sVVhmMA6LSMnL5G3xNL+61IyoZj0mUZFWTg4hmj7PHjIQ8MXN9dHWhUHFoJWG6y60DKSg==}
     engines: {node: '>=18'}
@@ -8907,6 +8802,9 @@ packages:
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
+  reselect@5.3.0:
+    resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
+
   reserved-words@0.1.2:
     resolution: {integrity: sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==}
 
@@ -11154,6 +11052,31 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
+  '@base-ui/react@1.7.0(@date-fns/tz@1.4.1)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@base-ui/utils': 0.3.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@floating-ui/react-dom': 2.1.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@floating-ui/utils': 0.2.12
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      use-sync-external-store: 1.6.0(react@18.2.0)
+    optionalDependencies:
+      '@date-fns/tz': 1.4.1
+      '@types/react': 18.0.26
+      date-fns: 4.1.0
+
+  '@base-ui/utils@0.3.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@floating-ui/utils': 0.2.12
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      reselect: 5.3.0
+      use-sync-external-store: 1.6.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+
   '@bcoe/v8-coverage@0.2.3': {}
 
   '@braintree/sanitize-url@7.0.1': {}
@@ -11598,22 +11521,22 @@ snapshots:
       '@eslint/core': 1.2.1
       levn: 0.4.1
 
-  '@floating-ui/core@1.5.2':
+  '@floating-ui/core@1.8.0':
     dependencies:
-      '@floating-ui/utils': 0.1.6
+      '@floating-ui/utils': 0.2.12
 
-  '@floating-ui/dom@1.5.3':
+  '@floating-ui/dom@1.8.0':
     dependencies:
-      '@floating-ui/core': 1.5.2
-      '@floating-ui/utils': 0.1.6
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
 
-  '@floating-ui/react-dom@2.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@floating-ui/react-dom@2.1.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@floating-ui/dom': 1.5.3
+      '@floating-ui/dom': 1.8.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@floating-ui/utils@0.1.6': {}
+  '@floating-ui/utils@0.2.12': {}
 
   '@gerrit0/mini-shiki@3.23.0':
     dependencies:
@@ -12763,21 +12686,6 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
-  '@radix-ui/react-checkbox@1.3.11(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
   '@radix-ui/react-collection@1.1.15(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
@@ -12790,12 +12698,6 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.0.26)(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.0.26
-
   '@radix-ui/react-compose-refs@1.1.5(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -12850,21 +12752,6 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
-  '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-menu': 2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
   '@radix-ui/react-focus-guards@1.1.6(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -12886,13 +12773,6 @@ snapshots:
     dependencies:
       react: 18.2.0
 
-  '@radix-ui/react-id@1.1.1(@types/react@18.0.26)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.0.26
-
   '@radix-ui/react-id@1.1.4(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@18.0.26)(react@18.2.0)
@@ -12900,32 +12780,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.26
 
-  '@radix-ui/react-menu@2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.3.3(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      aria-hidden: 1.2.6
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.7.2(@types/react@18.0.26)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
   '@radix-ui/react-popover@1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -12951,7 +12805,7 @@ snapshots:
 
   '@radix-ui/react-popper@1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@floating-ui/react-dom': 2.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@floating-ui/react-dom': 2.1.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-arrow': 1.1.15(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
       '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
@@ -12995,15 +12849,6 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
-  '@radix-ui/react-primitive@2.1.4(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
   '@radix-ui/react-progress@1.1.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
@@ -13099,13 +12944,6 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
-  '@radix-ui/react-slot@1.2.4(@types/react@18.0.26)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.0.26
-
   '@radix-ui/react-slot@1.3.3(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
@@ -13113,20 +12951,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.26
 
-  '@radix-ui/react-switch@1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
   '@radix-ui/react-tabs@1.1.21(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -13143,53 +12967,6 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
-  '@radix-ui/react-toggle-group@1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
-  '@radix-ui/react-toggle@1.1.18(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
-  '@radix-ui/react-tooltip@1.2.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.3.3(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
   '@radix-ui/react-use-callback-ref@1.1.4(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -13218,12 +12995,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.26
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.0.26)(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.0.26
-
   '@radix-ui/react-use-layout-effect@1.1.4(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -13272,14 +13043,14 @@ snapshots:
 
   '@rc-component/context@1.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
   '@rc-component/mini-decimal@1.0.1':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2
 
   '@rc-component/mutate-observer@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
@@ -13291,7 +13062,7 @@ snapshots:
 
   '@rc-component/portal@1.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
@@ -13559,16 +13330,15 @@ snapshots:
 
   '@sideway/pinpoint@2.0.0': {}
 
-  '@signozhq/design-tokens@2.1.6': {}
+  '@signozhq/design-tokens@2.2.1': {}
 
   '@signozhq/icons@0.4.0': {}
 
-  '@signozhq/ui@0.1.0(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)':
     dependencies:
+      '@base-ui/react': 1.7.0(@date-fns/tz@1.4.1)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@chenglou/pretext': 0.0.8
-      '@radix-ui/react-checkbox': 1.3.11(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-dialog': 1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-icons': 1.3.2(react@18.2.0)
       '@radix-ui/react-popover': 1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-progress': 1.1.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -13576,11 +13346,7 @@ snapshots:
       '@radix-ui/react-select': 2.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slider': 1.4.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slot': 1.3.3(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-switch': 1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-tabs': 1.1.21(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-tooltip': 1.2.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/icons': 0.4.0
       '@tanstack/react-table': 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@tanstack/react-virtual': 3.14.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -13594,16 +13360,19 @@ snapshots:
       next-themes: 0.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       nuqs: 2.9.6(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
       react: 18.2.0
+      react-compiler-runtime: 1.0.0(react@18.2.0)
       react-day-picker: 9.9.0(react@18.2.0)
       react-dom: 18.2.0(react@18.2.0)
       react-resizable-panels: 4.12.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       sonner: 2.0.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     transitivePeerDependencies:
+      - '@date-fns/tz'
       - '@emotion/is-prop-valid'
       - '@remix-run/react'
       - '@tanstack/react-router'
       - '@types/react'
       - '@types/react-dom'
+      - date-fns
       - next
       - react-router
       - react-router-dom
@@ -15129,10 +14898,10 @@ snapshots:
 
   cmdk@1.1.1(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
       '@radix-ui/react-dialog': 1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
@@ -19277,6 +19046,10 @@ snapshots:
     transitivePeerDependencies:
       - react-native
 
+  react-compiler-runtime@1.0.0(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+
   react-day-picker@9.9.0(react@18.2.0):
     dependencies:
       '@date-fns/tz': 1.4.1
@@ -19762,6 +19535,8 @@ snapshots:
 
   requires-port@1.0.0: {}
 
+  reselect@5.3.0: {}
+
   reserved-words@0.1.2: {}
 
   resize-observer-polyfill@1.5.1: {}
@@ -19867,7 +19642,7 @@ snapshots:
 
   rtl-css-js@1.16.1:
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2
 
   run-applescript@7.1.0: {}
 
@@ -20679,7 +20454,7 @@ snapshots:
 
   unload@2.2.0:
     dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2
       detect-node: 2.1.0
 
   unplugin@2.3.11:

frontend/scripts/story-shots-caption.mjs

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

frontend/scripts/story-shots-diff.mjs

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

frontend/scripts/story-shots.mjs

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

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

@@ -300,20 +300,17 @@ describe('PrivateRoute', () => {
 			);
 		});
 
-		it('should redirect /logs-save-views to /logs/saved-views', () => {
-			renderPrivateRoute({ initialRoute: '/logs-save-views' });
+		it.each([
+			['/logs-save-views', ROUTES.LOGS_EXPLORER],
+			['/traces-save-views', ROUTES.TRACES_EXPLORER],
+			[ROUTES.LOGS_SAVE_VIEWS, ROUTES.LOGS_EXPLORER],
+			[ROUTES.TRACES_SAVE_VIEWS, ROUTES.TRACES_EXPLORER],
+			[ROUTES.METRICS_EXPLORER_VIEWS, ROUTES.METRICS_EXPLORER_EXPLORER],
+			[ROUTES.METER_EXPLORER_VIEWS, ROUTES.METER_EXPLORER],
+		])('should redirect the old views route %s to %s', (from, to) => {
+			renderPrivateRoute({ initialRoute: from });
 
-			expect(screen.getByTestId('location-display')).toHaveTextContent(
-				'/logs/saved-views',
-			);
-		});
-
-		it('should redirect /traces-save-views to /traces/saved-views', () => {
-			renderPrivateRoute({ initialRoute: '/traces-save-views' });
-
-			expect(screen.getByTestId('location-display')).toHaveTextContent(
-				'/traces/saved-views',
-			);
+			expect(screen.getByTestId('location-display').textContent).toBe(to);
 		});
 
 		it('should redirect /settings/access-tokens to /settings/service-accounts', () => {
@@ -1635,11 +1632,6 @@ describe('PrivateRoute', () => {
 			['LIST_LICENSES', ROUTES.LIST_LICENSES, USER_ROLES.EDITOR as ROLES],
 			['ONBOARDING', ROUTES.ONBOARDING, USER_ROLES.VIEWER as ROLES],
 			['APPLICATION', ROUTES.APPLICATION, USER_ROLES.ANONYMOUS as ROLES],
-			[
-				'METRICS_EXPLORER_VIEWS',
-				ROUTES.METRICS_EXPLORER_VIEWS,
-				USER_ROLES.ANONYMOUS as ROLES,
-			],
 		];
 
 		it.each(authzRouteRolePairs)(

frontend/src/AppRoutes/routes.ts

@@ -513,8 +513,12 @@ export const LIST_LICENSES: AppRoutes = {
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
-	'/logs-save-views': '/logs/saved-views',
-	'/traces-save-views': '/traces/saved-views',
+	'/logs-save-views': '/logs/logs-explorer',
+	'/traces-save-views': '/traces-explorer',
+	'/logs/saved-views': '/logs/logs-explorer',
+	'/traces/saved-views': '/traces-explorer',
+	'/metrics-explorer/views': '/metrics-explorer/explorer',
+	'/meter/explorer/views': '/meter/explorer',
 	'/settings/access-tokens': '/settings/service-accounts',
 	'/settings/api-keys': '/settings/service-accounts',
 	'/messaging-queues': '/messaging-queues/overview',

frontend/src/api/ErrorResponseHandler.ts

@@ -41,17 +41,16 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 			message: data?.error,
 		};
 	}
+	// Avoid logging error when the request was just cancelled for whatever reason
+	if (isCancel(error)) {
+		return {
+			statusCode: 500,
+			payload: null,
+			error: 'Something went wrong',
+			message: null,
+		};
+	}
 	if (request) {
-		// Avoid logging error when the request was just cancelled for whatever reason
-		if (isCancel(error)) {
-			return {
-				statusCode: 500,
-				payload: null,
-				error: 'Something went wrong',
-				message: null,
-			};
-		}
-
 		// client never received a response, or request never left
 		console.error('client never received a response, or request never left');
 

frontend/src/api/__tests__/ErrorResponseHandler.test.ts

@@ -0,0 +1,24 @@
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError, CanceledError } from 'axios';
+
+describe('ErrorResponseHandler', () => {
+	// axios aborts a request whose signal fired before it was sent without ever
+	// creating one, so the error carries neither `response` nor `request`.
+	it('treats a request cancelled before it was sent as a cancellation', () => {
+		const consoleError = jest
+			.spyOn(console, 'error')
+			.mockImplementation(() => undefined);
+
+		expect(ErrorResponseHandler(new CanceledError() as AxiosError)).toStrictEqual(
+			{
+				statusCode: 500,
+				payload: null,
+				error: 'Something went wrong',
+				message: null,
+			},
+		);
+		expect(consoleError).not.toHaveBeenCalled();
+
+		consoleError.mockRestore();
+	});
+});

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

@@ -4,23 +4,15 @@
  * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
+import { useMutation } from 'react-query';
 import type {
-	InvalidateOptions,
 	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
 } from 'react-query';
 
 import type {
 	HandleExportRawDataPOSTParams,
-	ListPromotedAndIndexedPaths200,
-	PromotetypesPromotePathDTO,
 	Querybuildertypesv5QueryRangeRequestDTO,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
@@ -28,26 +20,6 @@ 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;
-};
-
 /**
  * This endpoints allows complex query exporting raw data for traces and logs
  * @summary Export raw data
@@ -149,175 +121,3 @@ export const useHandleExportRawDataPOST = <
 > => {
 	return useMutation(getHandleExportRawDataPOSTMutationOptions(options));
 };
-/**
- * This endpoints promotes and indexes paths
- * @summary Promote and index paths
- */
-export const listPromotedAndIndexedPaths = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListPromotedAndIndexedPaths200>({
-		url: `/api/v1/logs/promote_paths`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListPromotedAndIndexedPathsQueryKey = () => {
-	return [`/api/v1/logs/promote_paths`] as const;
-};
-
-export const getListPromotedAndIndexedPathsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getListPromotedAndIndexedPathsQueryKey();
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>
-	> = ({ signal }) => listPromotedAndIndexedPaths(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListPromotedAndIndexedPathsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>
->;
-export type ListPromotedAndIndexedPathsQueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Promote and index paths
- */
-
-export function useListPromotedAndIndexedPaths<
-	TData = Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListPromotedAndIndexedPathsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return withQueryKey(query, queryOptions.queryKey);
-}
-
-/**
- * @summary Promote and index paths
- */
-export const invalidateListPromotedAndIndexedPaths = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListPromotedAndIndexedPathsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoints promotes and indexes paths
- * @summary Promote and index paths
- */
-export const handlePromoteAndIndexPaths = (
-	promotetypesPromotePathDTONull?: BodyType<
-		PromotetypesPromotePathDTO[] | null
-	> | null,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/logs/promote_paths`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: promotetypesPromotePathDTONull,
-		signal,
-	});
-};
-
-export const getHandlePromoteAndIndexPathsMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
-		TError,
-		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
-	TError,
-	{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
-	TContext
-> => {
-	const mutationKey = ['handlePromoteAndIndexPaths'];
-	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 handlePromoteAndIndexPaths>>,
-		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return handlePromoteAndIndexPaths(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type HandlePromoteAndIndexPathsMutationResult = NonNullable<
-	Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>
->;
-export type HandlePromoteAndIndexPathsMutationBody =
-	| BodyType<PromotetypesPromotePathDTO[] | null>
-	| undefined;
-export type HandlePromoteAndIndexPathsMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Promote and index paths
- */
-export const useHandlePromoteAndIndexPaths = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
-		TError,
-		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
-	TError,
-	{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
-	TContext
-> => {
-	return useMutation(getHandlePromoteAndIndexPathsMutationOptions(options));
-};

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

@@ -0,0 +1,318 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useMutation, useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	IndexMaterializedPaths200,
+	ListPromotedPaths200,
+	ListPromotedPathsParams,
+	PromotetypesPostableIndexMaterializedPathsDTO,
+	PromotetypesPromotePathDTO,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+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;
+};
+
+/**
+ * This endpoint lists the promoted paths of every JSON column, each annotated with its signal and context. The signal, context, promoted and indexes query parameters filter the listing.
+ * @summary List promoted paths
+ */
+export const listPromotedPaths = (
+	params?: ListPromotedPathsParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListPromotedPaths200>({
+		url: `/api/v1/promoted_paths`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getListPromotedPathsQueryKey = (
+	params?: ListPromotedPathsParams,
+) => {
+	return [`/api/v1/promoted_paths`, ...(params ? [params] : [])] as const;
+};
+
+export const getListPromotedPathsQueryOptions = <
+	TData = Awaited<ReturnType<typeof listPromotedPaths>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListPromotedPathsParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listPromotedPaths>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getListPromotedPathsQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listPromotedPaths>>
+	> = ({ signal }) => listPromotedPaths(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listPromotedPaths>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListPromotedPathsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listPromotedPaths>>
+>;
+export type ListPromotedPathsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List promoted paths
+ */
+
+export function useListPromotedPaths<
+	TData = Awaited<ReturnType<typeof listPromotedPaths>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListPromotedPathsParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listPromotedPaths>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListPromotedPathsQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary List promoted paths
+ */
+export const invalidateListPromotedPaths = async (
+	queryClient: QueryClient,
+	params?: ListPromotedPathsParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListPromotedPathsQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint promotes paths of JSON columns to their promoted columns. Each path names its promotion target with its signal and context, e.g. traces/attribute.
+ * @summary Promote paths
+ */
+export const promotePaths = (
+	promotetypesPromotePathDTONull?: BodyType<
+		PromotetypesPromotePathDTO[] | null
+	> | null,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/promoted_paths`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: promotetypesPromotePathDTONull,
+		signal,
+	});
+};
+
+export const getPromotePathsMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof promotePaths>>,
+		TError,
+		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof promotePaths>>,
+	TError,
+	{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
+	TContext
+> => {
+	const mutationKey = ['promotePaths'];
+	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 promotePaths>>,
+		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return promotePaths(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PromotePathsMutationResult = NonNullable<
+	Awaited<ReturnType<typeof promotePaths>>
+>;
+export type PromotePathsMutationBody =
+	| BodyType<PromotetypesPromotePathDTO[] | null>
+	| undefined;
+export type PromotePathsMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Promote paths
+ */
+export const usePromotePaths = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof promotePaths>>,
+		TError,
+		{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof promotePaths>>,
+	TError,
+	{ data?: BodyType<PromotetypesPromotePathDTO[] | null> },
+	TContext
+> => {
+	return useMutation(getPromotePathsMutationOptions(options));
+};
+/**
+ * This endpoint indexes the JSON sub-columns of materialized paths whose columns are indexed and returns the indexed and skipped paths.
+ * @summary Index materialized paths
+ */
+export const indexMaterializedPaths = (
+	promotetypesPostableIndexMaterializedPathsDTO?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<IndexMaterializedPaths200>({
+		url: `/api/v1/promoted_paths/materialized`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: promotetypesPostableIndexMaterializedPathsDTO,
+		signal,
+	});
+};
+
+export const getIndexMaterializedPathsMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof indexMaterializedPaths>>,
+		TError,
+		{ data?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof indexMaterializedPaths>>,
+	TError,
+	{ data?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO> },
+	TContext
+> => {
+	const mutationKey = ['indexMaterializedPaths'];
+	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 indexMaterializedPaths>>,
+		{ data?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return indexMaterializedPaths(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type IndexMaterializedPathsMutationResult = NonNullable<
+	Awaited<ReturnType<typeof indexMaterializedPaths>>
+>;
+export type IndexMaterializedPathsMutationBody =
+	| BodyType<PromotetypesPostableIndexMaterializedPathsDTO>
+	| undefined;
+export type IndexMaterializedPathsMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Index materialized paths
+ */
+export const useIndexMaterializedPaths = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof indexMaterializedPaths>>,
+		TError,
+		{ data?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof indexMaterializedPaths>>,
+	TError,
+	{ data?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO> },
+	TContext
+> => {
+	return useMutation(getIndexMaterializedPathsMutationOptions(options));
+};

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

@@ -18,6 +18,8 @@ import type {
 } from 'react-query';
 
 import type {
+	CloneRuleByID201,
+	CloneRuleByIDPathParameters,
 	CreateRule201,
 	CreateRuleView201,
 	DeleteRuleByIDPathParameters,
@@ -963,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.
+ * @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

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

@@ -4,6 +4,264 @@
  * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
+export enum AiobservabilitytypesBlobPartDTOType {
+	blob = 'blob',
+}
+export interface AiobservabilitytypesBlobPartDTO {
+	/**
+	 * @type string
+	 */
+	content: string;
+	/**
+	 * @type string,null
+	 */
+	mime_type?: string | null;
+	/**
+	 * @type string
+	 */
+	modality: string;
+	/**
+	 * @type string
+	 * @enum blob
+	 */
+	type: AiobservabilitytypesBlobPartDTOType;
+}
+
+export enum AiobservabilitytypesTextPartDTOType {
+	text = 'text',
+}
+export interface AiobservabilitytypesTextPartDTO {
+	/**
+	 * @type string
+	 */
+	content: string;
+	/**
+	 * @type string
+	 * @enum text
+	 */
+	type: AiobservabilitytypesTextPartDTOType;
+}
+
+export enum AiobservabilitytypesToolCallRequestPartDTOType {
+	tool_call = 'tool_call',
+}
+export interface AiobservabilitytypesToolCallRequestPartDTO {
+	arguments?: unknown;
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 * @enum tool_call
+	 */
+	type: AiobservabilitytypesToolCallRequestPartDTOType;
+}
+
+export enum AiobservabilitytypesToolCallResponsePartDTOType {
+	tool_call_response = 'tool_call_response',
+}
+export type AiobservabilitytypesToolCallResponsePartDTOResponse =
+	| unknown
+	| null;
+
+export interface AiobservabilitytypesToolCallResponsePartDTO {
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @nullable true
+	 */
+	response: AiobservabilitytypesToolCallResponsePartDTOResponse;
+	/**
+	 * @type string
+	 * @enum tool_call_response
+	 */
+	type: AiobservabilitytypesToolCallResponsePartDTOType;
+}
+
+export interface AiobservabilitytypesGenericServerToolCallDTO {
+	[key: string]: unknown;
+}
+
+export enum AiobservabilitytypesServerToolCallPartDTOType {
+	server_tool_call = 'server_tool_call',
+}
+export interface AiobservabilitytypesServerToolCallPartDTO {
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @type string
+	 */
+	name: string;
+	server_tool_call: AiobservabilitytypesGenericServerToolCallDTO;
+	/**
+	 * @type string
+	 * @enum server_tool_call
+	 */
+	type: AiobservabilitytypesServerToolCallPartDTOType;
+}
+
+export interface AiobservabilitytypesGenericServerToolCallResponseDTO {
+	[key: string]: unknown;
+}
+
+export enum AiobservabilitytypesServerToolCallResponsePartDTOType {
+	server_tool_call_response = 'server_tool_call_response',
+}
+export interface AiobservabilitytypesServerToolCallResponsePartDTO {
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	server_tool_call_response: AiobservabilitytypesGenericServerToolCallResponseDTO;
+	/**
+	 * @type string
+	 * @enum server_tool_call_response
+	 */
+	type: AiobservabilitytypesServerToolCallResponsePartDTOType;
+}
+
+export enum AiobservabilitytypesFilePartDTOType {
+	file = 'file',
+}
+export interface AiobservabilitytypesFilePartDTO {
+	/**
+	 * @type string
+	 */
+	file_id: string;
+	/**
+	 * @type string,null
+	 */
+	mime_type?: string | null;
+	/**
+	 * @type string
+	 */
+	modality: string;
+	/**
+	 * @type string
+	 * @enum file
+	 */
+	type: AiobservabilitytypesFilePartDTOType;
+}
+
+export enum AiobservabilitytypesUriPartDTOType {
+	uri = 'uri',
+}
+export interface AiobservabilitytypesUriPartDTO {
+	/**
+	 * @type string,null
+	 */
+	mime_type?: string | null;
+	/**
+	 * @type string
+	 */
+	modality: string;
+	/**
+	 * @type string
+	 * @enum uri
+	 */
+	type: AiobservabilitytypesUriPartDTOType;
+	/**
+	 * @type string
+	 */
+	uri: string;
+}
+
+export enum AiobservabilitytypesReasoningPartDTOType {
+	reasoning = 'reasoning',
+}
+export interface AiobservabilitytypesReasoningPartDTO {
+	/**
+	 * @type string
+	 */
+	content: string;
+	/**
+	 * @type string
+	 * @enum reasoning
+	 */
+	type: AiobservabilitytypesReasoningPartDTOType;
+}
+
+export enum AiobservabilitytypesCompactionPartDTOType {
+	compaction = 'compaction',
+}
+export interface AiobservabilitytypesCompactionPartDTO {
+	/**
+	 * @type string,null
+	 */
+	content?: string | null;
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @type string
+	 * @enum compaction
+	 */
+	type: AiobservabilitytypesCompactionPartDTOType;
+}
+
+export interface AiobservabilitytypesGenericPartDTO {
+	[key: string]: unknown;
+}
+
+export type AiobservabilitytypesPartDTO =
+	| AiobservabilitytypesTextPartDTO
+	| AiobservabilitytypesToolCallRequestPartDTO
+	| AiobservabilitytypesToolCallResponsePartDTO
+	| AiobservabilitytypesServerToolCallPartDTO
+	| AiobservabilitytypesServerToolCallResponsePartDTO
+	| AiobservabilitytypesBlobPartDTO
+	| AiobservabilitytypesFilePartDTO
+	| AiobservabilitytypesUriPartDTO
+	| AiobservabilitytypesReasoningPartDTO
+	| AiobservabilitytypesCompactionPartDTO
+	| AiobservabilitytypesGenericPartDTO;
+
+export type AiobservabilitytypesPartsDTO = AiobservabilitytypesPartDTO[];
+
+export interface AiobservabilitytypesChatMessageDTO {
+	/**
+	 * @type string,null
+	 */
+	name?: string | null;
+	parts: AiobservabilitytypesPartsDTO;
+	/**
+	 * @type string
+	 */
+	role: string;
+}
+
+export type AiobservabilitytypesInputMessagesDTO =
+	AiobservabilitytypesChatMessageDTO[];
+
+export interface AiobservabilitytypesOutputMessageDTO {
+	/**
+	 * @type string,null
+	 */
+	finish_reason?: string | null;
+	/**
+	 * @type string,null
+	 */
+	name?: string | null;
+	parts: AiobservabilitytypesPartsDTO;
+	/**
+	 * @type string
+	 */
+	role: string;
+}
+
+export type AiobservabilitytypesOutputMessagesDTO =
+	AiobservabilitytypesOutputMessageDTO[];
+
 export interface AlertmanagertypesChannelDTO {
 	/**
 	 * @type string
@@ -4211,195 +4469,10 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
-export enum DashboardtypesAreaFillModeDTO {
-	solid = 'solid',
-	gradient = 'gradient',
+export enum DashboardtypesAIBuilderQuerySpecDTOSignal {
+	traces = 'traces',
 }
-/**
- * @minimum 0
- * @maximum 1
- * @nullable
- */
-export type DashboardtypesFillOpacityDTO = number | null;
-
-export enum DashboardtypesLineInterpolationDTO {
-	linear = 'linear',
-	spline = 'spline',
-	step_after = 'step_after',
-	step_before = 'step_before',
-}
-export enum DashboardtypesLineStyleDTO {
-	solid = 'solid',
-	dashed = 'dashed',
-}
-export interface DashboardtypesSpanGapsDTO {
-	/**
-	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
-	 */
-	fillLessThan?: string;
-	/**
-	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
-	 */
-	fillOnlyBelow?: boolean;
-}
-
-export interface DashboardtypesAreaChartAppearanceDTO {
-	fillMode?: DashboardtypesAreaFillModeDTO;
-	fillOpacity?: DashboardtypesFillOpacityDTO | null;
-	lineInterpolation?: DashboardtypesLineInterpolationDTO;
-	lineStyle?: DashboardtypesLineStyleDTO;
-	/**
-	 * @type boolean
-	 */
-	showPoints?: boolean;
-	spanGaps?: DashboardtypesSpanGapsDTO;
-}
-
-export interface DashboardtypesAxesDTO {
-	/**
-	 * @type boolean
-	 */
-	isLogScale?: boolean;
-	/**
-	 * @type number,null
-	 */
-	softMax?: number | null;
-	/**
-	 * @type number,null
-	 */
-	softMin?: number | null;
-}
-
-export enum DashboardtypesPrecisionOptionDTO {
-	NUMBER_0 = '0',
-	NUMBER_1 = '1',
-	NUMBER_2 = '2',
-	NUMBER_3 = '3',
-	NUMBER_4 = '4',
-	full = 'full',
-}
-export interface DashboardtypesPanelFormattingDTO {
-	decimalPrecision?: DashboardtypesPrecisionOptionDTO;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-}
-
-export enum DashboardtypesLegendModeDTO {
-	list = 'list',
-}
-export enum DashboardtypesLegendPositionDTO {
-	bottom = 'bottom',
-	right = 'right',
-}
-export type DashboardtypesLegendDTOCustomColorsAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type DashboardtypesLegendDTOCustomColors =
-	DashboardtypesLegendDTOCustomColorsAnyOf | null;
-
-export interface DashboardtypesLegendDTO {
-	/**
-	 * @type object,null
-	 */
-	customColors?: DashboardtypesLegendDTOCustomColors;
-	mode?: DashboardtypesLegendModeDTO;
-	position?: DashboardtypesLegendPositionDTO;
-}
-
-export interface DashboardtypesThresholdWithLabelDTO {
-	/**
-	 * @type string
-	 */
-	color: string;
-	/**
-	 * @type string
-	 */
-	label?: string;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	value: number;
-}
-
-export enum DashboardtypesStackModeDTO {
-	none = 'none',
-	normal = 'normal',
-	percent = 'percent',
-}
-export enum DashboardtypesTimePreferenceDTO {
-	global_time = 'global_time',
-	last_5_min = 'last_5_min',
-	last_15_min = 'last_15_min',
-	last_30_min = 'last_30_min',
-	last_1_hr = 'last_1_hr',
-	last_6_hr = 'last_6_hr',
-	last_1_day = 'last_1_day',
-	last_3_days = 'last_3_days',
-	last_1_week = 'last_1_week',
-	last_1_month = 'last_1_month',
-}
-export interface DashboardtypesAreaChartVisualizationDTO {
-	/**
-	 * @type boolean
-	 */
-	fillSpans?: boolean;
-	stack?: DashboardtypesStackModeDTO;
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface DashboardtypesAreaChartPanelSpecDTO {
-	axes?: DashboardtypesAxesDTO;
-	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesAreaChartVisualizationDTO;
-}
-
-export interface DashboardtypesBarChartVisualizationDTO {
-	/**
-	 * @type boolean
-	 */
-	fillSpans?: boolean;
-	/**
-	 * @type boolean
-	 */
-	stackedBarChart?: boolean;
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface DashboardtypesBarChartPanelSpecDTO {
-	axes?: DashboardtypesAxesDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesBarChartVisualizationDTO;
-}
-
-export interface DashboardtypesBasicVisualizationDTO {
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface Querybuildertypesv5LogAggregationDTO {
+export interface Querybuildertypesv5TraceAggregationDTO {
 	/**
 	 * @type string
 	 */
@@ -4638,13 +4711,274 @@ export interface TelemetrytypesTelemetryFieldKeyDTO {
 	unit?: string;
 }
 
-export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTOSignal {
-	logs = 'logs',
-}
 export enum TelemetrytypesSourceDTO {
 	meter = 'meter',
 	'' = '',
 }
+export interface DashboardtypesAIBuilderQuerySpecDTO {
+	/**
+	 * @type array,null
+	 */
+	aggregations?: Querybuildertypesv5TraceAggregationDTO[] | null;
+	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
+	/**
+	 * @type string
+	 */
+	cursor?: string;
+	/**
+	 * @type boolean
+	 */
+	disabled?: boolean;
+	filter?: Querybuildertypesv5FilterDTO;
+	/**
+	 * @type array,null
+	 */
+	functions?: Querybuildertypesv5FunctionDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
+	having?: Querybuildertypesv5HavingDTO;
+	/**
+	 * @type string
+	 */
+	legend?: string;
+	/**
+	 * @type integer
+	 */
+	limit?: number;
+	limitBy?: Querybuildertypesv5LimitByDTO;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type integer
+	 */
+	offset?: number;
+	/**
+	 * @type array,null
+	 */
+	order?: Querybuildertypesv5OrderByDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
+	/**
+	 * @enum traces
+	 * @type string
+	 */
+	signal: DashboardtypesAIBuilderQuerySpecDTOSignal;
+	source?: TelemetrytypesSourceDTO;
+	stepInterval?: Querybuildertypesv5StepDTO;
+}
+
+export enum DashboardtypesAreaFillModeDTO {
+	solid = 'solid',
+	gradient = 'gradient',
+}
+/**
+ * @minimum 0
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesFillOpacityDTO = number | null;
+
+export enum DashboardtypesLineInterpolationDTO {
+	linear = 'linear',
+	spline = 'spline',
+	step_after = 'step_after',
+	step_before = 'step_before',
+}
+export enum DashboardtypesLineStyleDTO {
+	solid = 'solid',
+	dashed = 'dashed',
+}
+export interface DashboardtypesSpanGapsDTO {
+	/**
+	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
+	 */
+	fillLessThan?: string;
+	/**
+	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
+	 */
+	fillOnlyBelow?: boolean;
+}
+
+export interface DashboardtypesAreaChartAppearanceDTO {
+	fillMode?: DashboardtypesAreaFillModeDTO;
+	fillOpacity?: DashboardtypesFillOpacityDTO | null;
+	lineInterpolation?: DashboardtypesLineInterpolationDTO;
+	lineStyle?: DashboardtypesLineStyleDTO;
+	/**
+	 * @type boolean
+	 */
+	showPoints?: boolean;
+	spanGaps?: DashboardtypesSpanGapsDTO;
+}
+
+export interface DashboardtypesAxesDTO {
+	/**
+	 * @type boolean
+	 */
+	isLogScale?: boolean;
+	/**
+	 * @type number,null
+	 */
+	softMax?: number | null;
+	/**
+	 * @type number,null
+	 */
+	softMin?: number | null;
+}
+
+export enum DashboardtypesPrecisionOptionDTO {
+	NUMBER_0 = '0',
+	NUMBER_1 = '1',
+	NUMBER_2 = '2',
+	NUMBER_3 = '3',
+	NUMBER_4 = '4',
+	full = 'full',
+}
+export interface DashboardtypesPanelFormattingDTO {
+	decimalPrecision?: DashboardtypesPrecisionOptionDTO;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+}
+
+export enum DashboardtypesLegendModeDTO {
+	list = 'list',
+}
+export enum DashboardtypesLegendPositionDTO {
+	bottom = 'bottom',
+	right = 'right',
+}
+export type DashboardtypesLegendDTOCustomColorsAnyOf = {
+	[key: string]: string;
+};
+
+/**
+ * @nullable
+ */
+export type DashboardtypesLegendDTOCustomColors =
+	DashboardtypesLegendDTOCustomColorsAnyOf | null;
+
+export interface DashboardtypesLegendDTO {
+	/**
+	 * @type object,null
+	 */
+	customColors?: DashboardtypesLegendDTOCustomColors;
+	mode?: DashboardtypesLegendModeDTO;
+	position?: DashboardtypesLegendPositionDTO;
+}
+
+export interface DashboardtypesThresholdWithLabelDTO {
+	/**
+	 * @type string
+	 */
+	color: string;
+	/**
+	 * @type string
+	 */
+	label?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	value: number;
+}
+
+export enum DashboardtypesStackModeDTO {
+	none = 'none',
+	normal = 'normal',
+	percent = 'percent',
+}
+export enum DashboardtypesTimePreferenceDTO {
+	global_time = 'global_time',
+	last_5_min = 'last_5_min',
+	last_15_min = 'last_15_min',
+	last_30_min = 'last_30_min',
+	last_1_hr = 'last_1_hr',
+	last_6_hr = 'last_6_hr',
+	last_1_day = 'last_1_day',
+	last_3_days = 'last_3_days',
+	last_1_week = 'last_1_week',
+	last_1_month = 'last_1_month',
+}
+export interface DashboardtypesAreaChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	stack?: DashboardtypesStackModeDTO;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesAreaChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesAreaChartVisualizationDTO;
+}
+
+export interface DashboardtypesBarChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	/**
+	 * @type boolean
+	 */
+	stackedBarChart?: boolean;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesBarChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesBarChartVisualizationDTO;
+}
+
+export interface DashboardtypesBasicVisualizationDTO {
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface Querybuildertypesv5LogAggregationDTO {
+	/**
+	 * @type string
+	 */
+	alias?: string;
+	/**
+	 * @type string
+	 */
+	expression?: string;
+}
+
+export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTOSignal {
+	logs = 'logs',
+}
 export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTO {
 	/**
 	 * @type array,null
@@ -4835,17 +5169,6 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	stepInterval?: Querybuildertypesv5StepDTO;
 }
 
-export interface Querybuildertypesv5TraceAggregationDTO {
-	/**
-	 * @type string
-	 */
-	alias?: string;
-	/**
-	 * @type string
-	 */
-	expression?: string;
-}
-
 export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTOSignal {
 	traces = 'traces',
 }
@@ -5404,6 +5727,18 @@ export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesBuilderQuerySpecDTO;
 }
 
+export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTOKind {
+	'signoz/AIBuilderQuery' = 'signoz/AIBuilderQuery',
+}
+export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTO {
+	/**
+	 * @enum signoz/AIBuilderQuery
+	 * @type string
+	 */
+	kind: DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTOKind;
+	spec: DashboardtypesAIBuilderQuerySpecDTO;
+}
+
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQueryDTOKind {
 	'signoz/CompositeQuery' = 'signoz/CompositeQuery',
 }
@@ -5695,6 +6030,7 @@ export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQu
 
 export type DashboardtypesQueryPluginDTO =
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTO
+	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQueryDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderFormulaDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQueryDTO
@@ -6373,6 +6709,7 @@ export interface DashboardtypesPostablePublicDashboardDTO {
 
 export enum DashboardtypesQueryPluginKindDTO {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
+	'signoz/AIBuilderQuery' = 'signoz/AIBuilderQuery',
 	'signoz/CompositeQuery' = 'signoz/CompositeQuery',
 	'signoz/Formula' = 'signoz/Formula',
 	'signoz/PromQLQuery' = 'signoz/PromQLQuery',
@@ -9519,6 +9856,10 @@ export interface PromotetypesWrappedIndexDTO {
 }
 
 export interface PromotetypesPromotePathDTO {
+	/**
+	 * @type string
+	 */
+	context: string;
 	/**
 	 * @type array
 	 */
@@ -9526,11 +9867,37 @@ export interface PromotetypesPromotePathDTO {
 	/**
 	 * @type string
 	 */
-	path?: string;
+	path: string;
 	/**
 	 * @type boolean
 	 */
 	promote?: boolean;
+	/**
+	 * @type string
+	 */
+	signal: string;
+}
+
+export interface PromotetypesIndexMaterializedPathsResultDTO {
+	/**
+	 * @type array,null
+	 */
+	indexed: PromotetypesPromotePathDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	skipped: PromotetypesPromotePathDTO[] | null;
+}
+
+export interface PromotetypesPostableIndexMaterializedPathsDTO {
+	/**
+	 * @type boolean
+	 */
+	dryRun?: boolean;
+	/**
+	 * @type string
+	 */
+	signal: string;
 }
 
 export interface Querybuildertypesv5AggregationMetaDTO {
@@ -11444,6 +11811,12 @@ export interface SpantypesThreadSpanDTO {
 	 * @type array
 	 */
 	events: SpantypesEventDTO[];
+	formattedInput: AiobservabilitytypesInputMessagesDTO;
+	formattedOutput: AiobservabilitytypesOutputMessagesDTO;
+	/**
+	 * @type array
+	 */
+	formatterWarnings: string[];
 	/**
 	 * @type boolean
 	 */
@@ -11559,6 +11932,12 @@ export interface SpantypesWaterfallSpanDTO {
 	 * @minimum 0
 	 */
 	flags?: number;
+	formattedInput?: AiobservabilitytypesInputMessagesDTO;
+	formattedOutput?: AiobservabilitytypesOutputMessagesDTO;
+	/**
+	 * @type array
+	 */
+	formatterWarnings?: string[];
 	/**
 	 * @type boolean
 	 */
@@ -12834,17 +13213,6 @@ export type ListUnmappedLLMModels200 = {
 	status: string;
 };
 
-export type ListPromotedAndIndexedPaths200 = {
-	/**
-	 * @type array,null
-	 */
-	data: PromotetypesPromotePathDTO[] | null;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListOrgPreferences200 = {
 	/**
 	 * @type array
@@ -12870,6 +13238,48 @@ export type GetOrgPreference200 = {
 export type UpdateOrgPreferencePathParameters = {
 	name: string;
 };
+export type ListPromotedPathsParams = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	signal?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	context?: string;
+	/**
+	 * @type boolean,null
+	 * @description undefined
+	 */
+	promoted?: boolean | null;
+	/**
+	 * @type boolean,null
+	 * @description undefined
+	 */
+	indexes?: boolean | null;
+};
+
+export type ListPromotedPaths200 = {
+	/**
+	 * @type array,null
+	 */
+	data: PromotetypesPromotePathDTO[] | null;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type IndexMaterializedPaths200 = {
+	data: PromotetypesIndexMaterializedPathsResultDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListRoles200 = {
 	/**
 	 * @type array
@@ -14202,6 +14612,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;
 };

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

@@ -261,7 +261,7 @@ export const invalidateGetTraceSummary = async (
 };
 
 /**
- * Returns the spans carrying gen_ai input or output messages in timestamp order. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.
+ * Returns the gen_ai spans of a trace, model calls, tool calls and agent spans, in timestamp order. The messages a span carries are decoded into formattedInput and formattedOutput, with formatterWarnings holding what the converter could not resolve; a span without messages has both empty. 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 = (
@@ -475,7 +475,7 @@ export const useGetFlamegraph = <
 	return useMutation(getGetFlamegraphMutationOptions(options));
 };
 /**
- * Returns the waterfall view of spans including all spans if total spans are under a limit, a max count otherwise. Aggregations are dropped compared to v3
+ * Returns the waterfall view of spans including all spans if total spans are under a limit, a max count otherwise. Aggregations are dropped compared to v3. A span carrying gen_ai input or output messages also has them decoded into formattedInput and formattedOutput, with formatterWarnings holding what the converter could not resolve.
  * @summary Get waterfall view for a trace
  */
 export const getWaterfallV4 = (

frontend/src/api/v5/queryRange/convertV5Response.test.ts

@@ -61,7 +61,11 @@ describe('convertV5ResponseToLegacy', () => {
 							],
 							values: [
 								{ timestamp: 1000, value: 10 } as unknown as TimeSeriesValue,
-								{ timestamp: 2000, value: 12 } as unknown as TimeSeriesValue,
+								{
+									timestamp: 2000,
+									value: 12,
+									partial: true,
+								} as unknown as TimeSeriesValue,
 							],
 						} as unknown as TimeSeries,
 					],
@@ -104,7 +108,7 @@ describe('convertV5ResponseToLegacy', () => {
 				labels: { 'service.name': 'adservice' },
 				values: [
 					{ timestamp: 1000, value: '10' },
-					{ timestamp: 2000, value: '12' },
+					{ timestamp: 2000, value: '12', partial: true },
 				],
 				metaData: expect.objectContaining({
 					alias: '__result_0',

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

@@ -125,6 +125,7 @@ function convertTimeSeriesData(
 				values: series.values.map((value: any) => ({
 					timestamp: value.timestamp,
 					value: String(value.value),
+					...(value.partial ? { partial: true } : {}),
 				})),
 				metaData: {
 					alias,

frontend/src/assets/Logos/android-kotlin-monitoring.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 60 60"><linearGradient id="a" x1="15.959" x2="44.307" y1="-13.014" y2="15.333" gradientTransform="matrix(1 0 0 -1 0 61)" gradientUnits="userSpaceOnUse"><stop offset=".097" style="stop-color:#0095d5"/><stop offset=".301" style="stop-color:#238ad9"/><stop offset=".621" style="stop-color:#557bde"/><stop offset=".864" style="stop-color:#7472e2"/><stop offset="1" style="stop-color:#806ee3"/></linearGradient><path d="m0 60 30.1-30.1L60 60z" style="fill:url(#a)"/><linearGradient id="b" x1="4.209" x2="20.673" y1="48.941" y2="65.405" gradientTransform="matrix(1 0 0 -1 0 61)" gradientUnits="userSpaceOnUse"><stop offset=".118" style="stop-color:#0095d5"/><stop offset=".418" style="stop-color:#3c83dc"/><stop offset=".696" style="stop-color:#6d74e1"/><stop offset=".833" style="stop-color:#806ee3"/></linearGradient><path d="M0 0h30.1L0 32.5z" style="fill:url(#b)"/><linearGradient id="c" x1="-10.102" x2="45.731" y1="5.836" y2="61.669" gradientTransform="matrix(1 0 0 -1 0 61)" gradientUnits="userSpaceOnUse"><stop offset=".107" style="stop-color:#c757bc"/><stop offset=".214" style="stop-color:#d0609a"/><stop offset=".425" style="stop-color:#e1725c"/><stop offset=".605" style="stop-color:#ee7e2f"/><stop offset=".743" style="stop-color:#f58613"/><stop offset=".823" style="stop-color:#f88909"/></linearGradient><path d="M30.1 0 0 31.7V60l30.1-30.1L60 0z" style="fill:url(#c)"/></svg>

frontend/src/assets/Logos/apache-druid.svg

@@ -1,3 +1,3 @@
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#29F1FB" d="M8.932 20.806c-.369 0-.738.007-1.109 0-.35-.007-.587-.206-.623-.5a.587.587 0 0 1 .53-.636c.79-.062 1.582-.063 2.372-.003a.548.548 0 0 1 .522.602c-.024.326-.253.526-.616.54zM1.792 8.345c-.392 0-.782.008-1.173.002-.327-.006-.577-.22-.614-.512-.037-.293.146-.544.499-.615.192-.032.388-.045.583-.039a81.515 81.515 0 0 1 1.597 0c.163 0 .325.019.483.056.288.073.445.318.411.617-.034.298-.214.477-.515.487-.424.014-.848.004-1.272.004zm7.588 8.417H4.292a2.464 2.464 0 0 1-.326-.007c-.294-.04-.48-.209-.508-.506-.029-.298.11-.501.391-.606.179-.065.365-.051.549-.051 3.347 0 6.695.005 10.042-.006 1.174-.004 2.187-.439 2.993-1.3.69-.738 1.053-1.63 1.16-2.635.085-.788-.027-1.513-.516-2.156-.544-.718-1.28-1.078-2.163-1.082-3.163-.013-6.328-.005-9.487-.01-.336 0-.673-.027-1.007-.058-.29-.027-.45-.201-.469-.492-.021-.317.141-.545.429-.6a1.55 1.55 0 0 1 .29-.015h10.177c1.71.004 3.187 1.038 3.726 2.654.383 1.147.246 2.304-.182 3.416-.824 2.135-2.762 3.448-5.055 3.454-1.652.005-3.304 0-4.956 0zm2.906-13.568c1.533 0 3.066-.008 4.598 0 2.935.018 5.629 1.892 6.653 4.626.442 1.181.538 2.403.412 3.657-.185 1.842-.735 3.552-1.776 5.084-1.608 2.365-3.873 3.68-6.679 4.118-.95.148-1.905.13-2.86.13-.397 0-.61-.181-.633-.51-.025-.351.196-.621.587-.645.434-.026.87-.004 1.305-.016 2.641-.072 4.928-.982 6.74-2.935 1.269-1.37 1.912-3.039 2.13-4.878.151-1.275.135-2.544-.37-3.752-.773-1.85-2.159-2.983-4.068-3.509-.74-.204-1.5-.243-2.26-.247-2.837-.017-5.675-.007-8.511-.007-.12 0-.24.004-.359-.006a.57.57 0 0 1-.517-.536.557.557 0 0 1 .456-.557c.13-.018.261-.024.392-.019h4.762Z"/>
+  <path fill="#0E9AA7" d="M8.932 20.806c-.369 0-.738.007-1.109 0-.35-.007-.587-.206-.623-.5a.587.587 0 0 1 .53-.636c.79-.062 1.582-.063 2.372-.003a.548.548 0 0 1 .522.602c-.024.326-.253.526-.616.54zM1.792 8.345c-.392 0-.782.008-1.173.002-.327-.006-.577-.22-.614-.512-.037-.293.146-.544.499-.615.192-.032.388-.045.583-.039a81.515 81.515 0 0 1 1.597 0c.163 0 .325.019.483.056.288.073.445.318.411.617-.034.298-.214.477-.515.487-.424.014-.848.004-1.272.004zm7.588 8.417H4.292a2.464 2.464 0 0 1-.326-.007c-.294-.04-.48-.209-.508-.506-.029-.298.11-.501.391-.606.179-.065.365-.051.549-.051 3.347 0 6.695.005 10.042-.006 1.174-.004 2.187-.439 2.993-1.3.69-.738 1.053-1.63 1.16-2.635.085-.788-.027-1.513-.516-2.156-.544-.718-1.28-1.078-2.163-1.082-3.163-.013-6.328-.005-9.487-.01-.336 0-.673-.027-1.007-.058-.29-.027-.45-.201-.469-.492-.021-.317.141-.545.429-.6a1.55 1.55 0 0 1 .29-.015h10.177c1.71.004 3.187 1.038 3.726 2.654.383 1.147.246 2.304-.182 3.416-.824 2.135-2.762 3.448-5.055 3.454-1.652.005-3.304 0-4.956 0zm2.906-13.568c1.533 0 3.066-.008 4.598 0 2.935.018 5.629 1.892 6.653 4.626.442 1.181.538 2.403.412 3.657-.185 1.842-.735 3.552-1.776 5.084-1.608 2.365-3.873 3.68-6.679 4.118-.95.148-1.905.13-2.86.13-.397 0-.61-.181-.633-.51-.025-.351.196-.621.587-.645.434-.026.87-.004 1.305-.016 2.641-.072 4.928-.982 6.74-2.935 1.269-1.37 1.912-3.039 2.13-4.878.151-1.275.135-2.544-.37-3.752-.773-1.85-2.159-2.983-4.068-3.509-.74-.204-1.5-.243-2.26-.247-2.837-.017-5.675-.007-8.511-.007-.12 0-.24.004-.359-.006a.57.57 0 0 1-.517-.536.557.557 0 0 1 .456-.557c.13-.018.261-.024.392-.019h4.762Z"/>
 </svg>

frontend/src/assets/Logos/baseten.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#9CA3AF" height="34" viewBox="0 0 131 34">
-  <path fill="#9CA3AF" d="M.36 8.6h16.7v5.6H6.04c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h11.02v5.6h-5.33c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h4.98c.2 0 .35-.15.35-.35V25.4h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34v-5.6h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34V3.35c0-.2-.16-.35-.35-.35H.36c-.2 0-.36.16-.36.35v4.9c0 .2.16.35.36.35ZM44.41 14.7c-.5-.5-1.1-.9-1.76-1.18a5.62 5.62 0 0 0-4.6.17c-.73.37-1.32.91-1.75 1.62h-.17V8.59H34.1v16.83h2.04v-1.81h.17c.21.36.47.67.77.94.31.25.65.48 1.01.67.37.18.77.31 1.18.39a6.2 6.2 0 0 0 3.39-.24 5.36 5.36 0 0 0 3.02-3.1c.29-.75.44-1.62.44-2.6v-.47c0-.96-.16-1.83-.47-2.58-.3-.75-.7-1.4-1.23-1.9v-.01Zm-5.87.66a3.9 3.9 0 0 1 4.34.84c.36.35.64.8.83 1.3.2.5.3 1.07.3 1.7v.47c0 .64-.1 1.23-.3 1.74a3.75 3.75 0 0 1-2.06 2.15 4.27 4.27 0 0 1-3.12-.03 3.86 3.86 0 0 1-2.09-2.2c-.2-.52-.3-1.11-.3-1.75v-.29c0-.62.1-1.2.3-1.7v-.01c.21-.53.5-.99.84-1.36.36-.37.78-.66 1.26-.86ZM97.04 8.59H95v4.86h-2.94v1.86H95v8.17c0 .56.17 1.03.53 1.4.37.35.84.54 1.4.54h4.18v-1.87h-3.5c-.2 0-.33-.05-.43-.15-.1-.1-.14-.27-.14-.49v-7.6h4.65v-1.86h-4.65V8.59ZM114.61 15a5.48 5.48 0 0 0-1.8-1.33 5.6 5.6 0 0 0-2.57-.56 6.17 6.17 0 0 0-4.26 1.7 5.6 5.6 0 0 0-1.72 4.2v.57c0 .9.15 1.75.44 2.5a5.58 5.58 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.35 5.35 0 0 0 1.91-2.73l.03-.07-1.94-.52-.02.07c-.11.33-.27.64-.46.94-.17.27-.4.52-.7.74-.28.22-.63.39-1.04.51-.41.13-.9.19-1.46.19a3.8 3.8 0 0 1-2.84-1.05 4.07 4.07 0 0 1-1.1-2.7h9.68v-1.6c0-.54-.11-1.12-.34-1.75a5.04 5.04 0 0 0-1.03-1.74Zm-8.25 3.21a3.8 3.8 0 0 1 1.22-2.25 4.19 4.19 0 0 1 3.99-.7c.44.16.83.38 1.17.66.34.27.62.62.82 1.02.21.38.34.8.38 1.27h-7.58ZM129.09 14.42a4.47 4.47 0 0 0-3.37-1.3c-.93 0-1.73.2-2.4.59-.64.39-1.15.97-1.52 1.74h-.17v-2h-2.04v11.97h2.04v-6.23c0-1.26.32-2.28.95-3.02a3.31 3.31 0 0 1 2.65-1.14c.94 0 1.7.3 2.24.9.56.6.83 1.52.83 2.74v6.75h2.04v-7.13c0-1.71-.42-3.02-1.25-3.87ZM88.1 15a5.48 5.48 0 0 0-1.78-1.33 5.6 5.6 0 0 0-2.58-.56 6.17 6.17 0 0 0-4.27 1.7 5.59 5.59 0 0 0-1.71 4.2v.56c0 .92.14 1.76.44 2.51a5.6 5.6 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.36 5.36 0 0 0 1.91-2.73l.03-.07-1.94-.52-.03.07c-.1.32-.26.64-.45.94-.17.27-.4.52-.7.74-.29.21-.64.39-1.05.51-.4.12-.9.19-1.45.19a3.8 3.8 0 0 1-2.85-1.05 4.07 4.07 0 0 1-1.09-2.7h9.68v-1.61c0-.53-.12-1.12-.34-1.74A5.03 5.03 0 0 0 88.1 15Zm-8.24 3.21a3.83 3.83 0 0 1 1.22-2.25 4.2 4.2 0 0 1 3.99-.7c.44.16.83.38 1.16.66.35.27.62.62.83 1.02.2.38.33.8.37 1.27h-7.57ZM73.65 19.42a6.11 6.11 0 0 0-3.23-1.02 6.63 6.63 0 0 1-2.68-.58c-.47-.3-.7-.7-.7-1.25 0-.27.08-.5.21-.7.14-.2.33-.38.56-.52a4.05 4.05 0 0 1 1.78-.42c.85 0 1.54.21 2.06.63.53.41.83 1 .91 1.73l.01.1 1.95-.47-.01-.07c-.07-.45-.22-.91-.45-1.36a3.46 3.46 0 0 0-.94-1.2 4.6 4.6 0 0 0-1.52-.84 6.05 6.05 0 0 0-2.1-.34c-.58 0-1.13.07-1.65.22-.52.14-1 .36-1.43.65-.41.3-.74.66-.99 1.1a2.9 2.9 0 0 0-.37 1.49v.14c0 1.06.38 1.87 1.14 2.42a6.2 6.2 0 0 0 3.24.97c1.18.08 2.04.26 2.56.54.5.28.75.72.75 1.36 0 .6-.25 1.06-.78 1.4-.52.32-1.22.48-2.1.48a3.68 3.68 0 0 1-2.46-.79 3.13 3.13 0 0 1-1.04-2.14v-.09l-1.93.46h-.02v.07a4.4 4.4 0 0 0 3.1 4c.7.24 1.52.36 2.46.36.7 0 1.35-.09 1.93-.27.6-.16 1.12-.4 1.53-.72A3.38 3.38 0 0 0 74.8 22v-.14c0-1.07-.39-1.9-1.14-2.44ZM60.25 23.4c-.1-.1-.14-.27-.14-.49v-9.46h-2.05v1.85h-.16a3.78 3.78 0 0 0-1.61-1.63 4.62 4.62 0 0 0-2.26-.56c-.77 0-1.5.14-2.19.41a5.27 5.27 0 0 0-3.02 3.12c-.29.75-.44 1.63-.44 2.6v.38c0 .99.15 1.87.44 2.63.3.75.7 1.4 1.2 1.93a5.48 5.48 0 0 0 4.05 1.57c.8 0 1.51-.2 2.2-.58.69-.38 1.24-.97 1.63-1.75h.16v.06c0 .56.18 1.03.53 1.4.37.35.85.54 1.41.54h1.36v-1.87h-.68c-.2 0-.34-.05-.43-.15Zm-4.46.13c-.46.2-.97.3-1.52.3a3.68 3.68 0 0 1-2.75-1.09 4.42 4.42 0 0 1-1.05-3.12v-.38c0-.62.1-1.2.29-1.71a3.65 3.65 0 0 1 5-2.17c.47.2.88.49 1.21.86.35.37.62.83.8 1.36.2.5.3 1.08.3 1.7v.3c0 .63-.1 1.23-.3 1.76-.18.5-.45.96-.78 1.33-.33.37-.73.66-1.2.86Z"/>
-</svg>
+<svg role="img" viewBox="-2.625 3 28 28" xmlns="http://www.w3.org/2000/svg"><path fill="#7A8291" d="M.36 8.6h16.7v5.6H6.04c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h11.02v5.6h-5.33c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h4.98c.2 0 .35-.15.35-.35V25.4h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34v-5.6h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34V3.35c0-.2-.16-.35-.35-.35H.36c-.2 0-.36.16-.36.35v4.9c0 .2.16.35.36.35Z"/></svg>

frontend/src/assets/Logos/bun.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#9CA3AF" d="M12 22.596c6.628 0 12-4.338 12-9.688 0-3.318-2.057-6.248-5.219-7.986-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687v.001ZM10.599 4.715c.334-.759.503-1.58.498-2.409 0-.145.202-.187.23-.029.658 2.783-.902 4.162-2.057 4.624-.124.048-.199-.121-.103-.209a5.763 5.763 0 0 0 1.432-1.977Zm2.058-.102a5.82 5.82 0 0 0-.782-2.306v-.016c-.069-.123.086-.263.185-.172 1.962 2.111 1.307 4.067.556 5.051-.082.103-.23-.003-.189-.126a5.85 5.85 0 0 0 .23-2.431Zm1.776-.561a5.727 5.727 0 0 0-1.612-1.806v-.014c-.112-.085-.024-.274.114-.218 2.595 1.087 2.774 3.18 2.459 4.407a.116.116 0 0 1-.049.071.11.11 0 0 1-.153-.026.122.122 0 0 1-.022-.083 5.891 5.891 0 0 0-.737-2.331Zm-5.087.561c-.617.546-1.282.76-2.063 1-.117 0-.195-.078-.156-.181 1.752-.909 2.376-1.649 2.999-2.778 0 0 .155-.118.188.085 0 .304-.349 1.329-.968 1.874Zm4.945 11.237a2.957 2.957 0 0 1-.937 1.553c-.346.346-.8.565-1.286.62a2.178 2.178 0 0 1-1.327-.62 2.955 2.955 0 0 1-.925-1.553.244.244 0 0 1 .064-.198.234.234 0 0 1 .193-.069h3.965a.226.226 0 0 1 .19.07c.05.053.073.125.063.197Zm-5.458-2.176a1.862 1.862 0 0 1-2.384-.245 1.98 1.98 0 0 1-.233-2.447c.207-.319.503-.566.848-.713a1.84 1.84 0 0 1 1.092-.11c.366.075.703.261.967.531a1.98 1.98 0 0 1 .408 2.114 1.931 1.931 0 0 1-.698.869v.001Zm8.495.005a1.86 1.86 0 0 1-2.381-.253 1.964 1.964 0 0 1-.547-1.366c0-.384.11-.76.32-1.079.207-.319.503-.567.849-.713a1.844 1.844 0 0 1 1.093-.108c.367.076.704.262.968.534a1.98 1.98 0 0 1 .4 2.117 1.932 1.932 0 0 1-.702.868Z"/></svg>

frontend/src/assets/Logos/celery.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" id="图层_1" x="0" y="0" version="1.1" viewBox="0 0 519.27 214.14"><style>.st2{fill:#a9cc54}</style><path d="M493.54 171.25c-35.63 0-64.52-28.89-64.52-64.52s28.89-64.52 64.52-64.52c3.85 0 7.62.36 11.29 1L493.54 5.45H104.46v.02C49.24 6.51 4.78 51.59 4.78 107.07c0 55.47 44.45 100.56 99.68 101.59v.02h389.07l11.29-38.44c-3.66.65-7.43 1.01-11.28 1.01" style="fill:#b6de64"/><defs><path id="SVGID_1_" d="M493.54 171.25c-35.63 0-64.52-28.89-64.52-64.52s28.89-64.52 64.52-64.52c3.85 0 7.62.36 11.29 1V5.45H104.46v.02C49.24 6.51 4.78 51.59 4.78 107.07c0 55.47 44.45 100.56 99.68 101.59v.02h389.07l11.29-38.44c-3.66.65-7.43 1.01-11.28 1.01"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" style="overflow:visible"/></clipPath><g style="clip-path:url(#SVGID_2_)"><path d="M-23.16 55.58H428.5v51.1H-23.16zM-23.16 157.59h530.98v72.35H-23.16z" class="st2"/></g><path d="M493.54 184.23c-43.94 0-79.56-33.62-79.56-77.56s35.62-76.56 79.56-76.56" style="fill:none;stroke:#ddf4a4;stroke-width:49;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"/></svg>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#37814A" d="M2.303 0A2.298 2.298 0 0 0 0 2.303v19.394A2.298 2.298 0 0 0 2.303 24h19.394A2.298 2.298 0 0 0 24 21.697V2.303A2.298 2.298 0 0 0 21.697 0zm8.177 3.072c4.098 0 7.028 1.438 7.68 1.764l-1.194 2.55c-2.442-1.057-4.993-1.41-5.672-1.41-1.574 0-2.17.922-2.17 1.763v8.494c0 .869.596 1.791 2.17 1.791.679 0 3.23-.38 5.672-1.41l1.194 2.496c-.435.271-3.637 1.818-7.68 1.818-1.112 0-4.64-.244-4.64-4.64V7.713c0-4.397 3.528-4.64 4.64-4.64z"/></svg>

frontend/src/assets/Logos/github.svg

@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="lucide/github">
-<path id="Vector" d="M15 22V18C15.1391 16.7473 14.7799 15.4901 14 14.5C17 14.5 20 12.5 20 9C20.08 7.75 19.73 6.52 19 5.5C19.28 4.35 19.28 3.15 19 2C19 2 18 2 16 3.5C13.36 3 10.64 3 8 3.5C6 2 5 2 5 2C4.7 3.15 4.7 4.35 5 5.5C4.27187 6.51588 3.91847 7.75279 4 9C4 12.5 7 14.5 10 14.5C9.61 14.99 9.32 15.55 9.15 16.15C8.98 16.75 8.93 17.38 9 18M9 18V22M9 18C4.49 20 4 16 2 16" stroke="#C0C1C3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M15 22V18C15.1391 16.7473 14.7799 15.4901 14 14.5C17 14.5 20 12.5 20 9C20.08 7.75 19.73 6.52 19 5.5C19.28 4.35 19.28 3.15 19 2C19 2 18 2 16 3.5C13.36 3 10.64 3 8 3.5C6 2 5 2 5 2C4.7 3.15 4.7 4.35 5 5.5C4.27187 6.51588 3.91847 7.75279 4 9C4 12.5 7 14.5 10 14.5C9.61 14.99 9.32 15.55 9.15 16.15C8.98 16.75 8.93 17.38 9 18M9 18V22M9 18C4.49 20 4 16 2 16" stroke="#7A8291" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </svg>

frontend/src/assets/Logos/hcp-vault.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFEC6E" d="m0 0 11.955 24L24 0zm13.366 4.827h1.393v1.38h-1.393zm-2.77 5.569H9.22V8.993h1.389zm0-2.087H9.22V6.906h1.389zm0-2.086H9.22V4.819h1.389zm2.087 6.263h-1.377V11.08h1.388zm0-2.09h-1.377V8.993h1.388zm0-2.087h-1.377V6.906h1.388zm0-2.086h-1.377V4.819h1.388zm.683.683h1.393v1.389h-1.393zm0 3.475V8.993h1.389v1.388Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A68400" d="m0 0 11.955 24L24 0zm13.366 4.827h1.393v1.38h-1.393zm-2.77 5.569H9.22V8.993h1.389zm0-2.087H9.22V6.906h1.389zm0-2.086H9.22V4.819h1.389zm2.087 6.263h-1.377V11.08h1.388zm0-2.09h-1.377V8.993h1.388zm0-2.087h-1.377V6.906h1.388zm0-2.086h-1.377V4.819h1.388zm.683.683h1.393v1.389h-1.393zm0 3.475V8.993h1.389v1.388Z"/></svg>

frontend/src/assets/Logos/heroku.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="285" height="285" preserveAspectRatio="xMidYMid" viewBox="-14.5 0 285 285"><path fill="#430098" d="M230.4 0c13.996 0 25.37 11.232 25.597 25.177l.003.423v233.244c0 13.996-11.235 25.37-25.177 25.597l-.423.003H25.6c-13.996 0-25.37-11.235-25.597-25.176L0 258.844V25.6C0 11.601 11.235.23 25.177.003L25.6 0zm0 14.222H25.6c-6.174 0-11.218 4.948-11.374 11.085l-.004.293v233.244c0 6.174 4.948 11.218 11.085 11.374l.293.004h204.8c6.177 0 11.218-4.947 11.374-11.084l.004-.294V25.6c0-6.272-5.102-11.378-11.378-11.378M64 184.89l32 28.444-32 28.445zM92.444 42.667v80.75c14.201-4.622 34.052-9.64 53.334-9.64 17.582 0 28.106 6.913 33.838 12.712 12.109 12.25 12.397 27.82 12.381 29.897v.058l.003 85.334h-28.444v-84.942c-.14-6.639-3.34-14.614-17.778-14.614-28.632 0-60.714 14.257-61.666 14.683l-.02.009L64 166.016V42.666zm99.556 0c-1.92 16.156-8.47 31.644-21.333 46.222h-28.445c11.179-14.667 18.198-30.101 21.334-46.222Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="285" height="285" preserveAspectRatio="xMidYMid" viewBox="-14.5 0 285 285"><path fill="#7C4DD6" d="M230.4 0c13.996 0 25.37 11.232 25.597 25.177l.003.423v233.244c0 13.996-11.235 25.37-25.177 25.597l-.423.003H25.6c-13.996 0-25.37-11.235-25.597-25.176L0 258.844V25.6C0 11.601 11.235.23 25.177.003L25.6 0zm0 14.222H25.6c-6.174 0-11.218 4.948-11.374 11.085l-.004.293v233.244c0 6.174 4.948 11.218 11.085 11.374l.293.004h204.8c6.177 0 11.218-4.947 11.374-11.084l.004-.294V25.6c0-6.272-5.102-11.378-11.378-11.378M64 184.89l32 28.444-32 28.445zM92.444 42.667v80.75c14.201-4.622 34.052-9.64 53.334-9.64 17.582 0 28.106 6.913 33.838 12.712 12.109 12.25 12.397 27.82 12.381 29.897v.058l.003 85.334h-28.444v-84.942c-.14-6.639-3.34-14.614-17.778-14.614-28.632 0-60.714 14.257-61.666 14.683l-.02.009L64 166.016V42.666zm99.556 0c-1.92 16.156-8.47 31.644-21.333 46.222h-28.445c11.179-14.667 18.198-30.101 21.334-46.222Z"/></svg>

frontend/src/assets/Logos/livekit.svg

@@ -1 +1 @@
-<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>LiveKit</title><path d="M14 10h-4v4h4v-4zM18 6h-4v4.001h4v-4zM18 14h-4v4h4v-4zM22 2h-4v4h4V2zM22 18h-4v4h4v-4z" fill="#1FD5F9"></path><path d="M6 18V2H2v20h12v-4H6z" fill="#fff"></path></svg>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 10h-4v4h4v-4zM18 6h-4v4.001h4v-4zM18 14h-4v4h4v-4zM22 2h-4v4h4V2zM22 18h-4v4h4v-4z" fill="#1FD5F9"></path><path d="M6 18V2H2v20h12v-4H6z" fill="#7A8291"></path></svg>

frontend/src/assets/Logos/microsoft.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#F25022" d="M1 1h10.5v10.5H1z"/><path fill="#7FBA00" d="M12.5 1H23v10.5H12.5z"/><path fill="#00A4EF" d="M1 12.5h10.5V23H1z"/><path fill="#FFB900" d="M12.5 12.5H23V23H12.5z"/></svg>

frontend/src/assets/Logos/opencode.svg

@@ -1 +1 @@
-<svg width='234' height='42' viewBox='0 0 234 42' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18 30H6V18H18V30Z' fill='#CFCECD'/><path d='M18 12H6V30H18V12ZM24 36H0V6H24V36Z' fill='#656363'/><path d='M48 30H36V18H48V30Z' fill='#CFCECD'/><path d='M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z' fill='#656363'/><path d='M84 24V30H66V24H84Z' fill='#CFCECD'/><path d='M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z' fill='#656363'/><path d='M108 36H96V18H108V36Z' fill='#CFCECD'/><path d='M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z' fill='#656363'/><path d='M144 30H126V18H144V30Z' fill='#CFCECD'/><path d='M144 12H126V30H144V36H120V6H144V12Z' fill='#211E1E'/><path d='M168 30H156V18H168V30Z' fill='#CFCECD'/><path d='M168 12H156V30H168V12ZM174 36H150V6H174V36Z' fill='#211E1E'/><path d='M198 30H186V18H198V30Z' fill='#CFCECD'/><path d='M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z' fill='#211E1E'/><path d='M234 24V30H216V24H234Z' fill='#CFCECD'/><path d='M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z' fill='#211E1E'/></svg>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#7A8291" d="M22 24H2V0h20zM17 4.8H7v14.4h10z"/></svg>

frontend/src/assets/Logos/render.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Render</title><path d="M18.263.007c-3.121-.147-5.744 2.109-6.192 5.082-.018.138-.045.272-.067.405-.696 3.703-3.936 6.507-7.827 6.507a7.9 7.9 0 0 1-3.825-.979.202.202 0 0 0-.302.178V24H12v-8.999c0-1.656 1.338-3 2.987-3h2.988c3.382 0 6.103-2.817 5.97-6.244-.12-3.084-2.61-5.603-5.682-5.75"/></svg>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#7A8291" d="M18.263.007c-3.121-.147-5.744 2.109-6.192 5.082-.018.138-.045.272-.067.405-.696 3.703-3.936 6.507-7.827 6.507-1.388 0-2.691-.356-3.825-.979a.2024.2024 0 0 0-.302.178V24H12v-8.999c0-1.656 1.338-3 2.987-3h2.988c3.382 0 6.103-2.817 5.97-6.244-.12-3.084-2.61-5.603-5.682-5.75"/></svg>

frontend/src/assets/Logos/vector.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" viewBox="0 0 800 600"><path d="M364.7 246.1h16.9L363.2 300h-16.9l-18.5-53.9h17.1l10.2 33h.2zM436 300h-39.4v-53.9h39.2v13.6h-23.6v7.1h20.9V279h-20.9v7.4H436zm41.6-54.8c11.3 0 19.6 5.8 22.1 15.1l-14.7 6.4c-.7-4.2-2.9-7.4-7.6-7.4-5.3 0-9.3 4.4-9.3 14s3.8 14.2 9.3 14.2c4.5 0 6.9-3.4 7.6-7.6l14.7 6.4c-2.5 9.3-10.9 15.1-22.1 15.1-16.2 0-26.1-10.7-26.1-28s9.9-28.2 26.1-28.2m50.3 54.8v-40.3h-16.2v-13.6h48.5v13.6H544V300zm97.7-26.9c0 17.2-10 28-26.1 28-16 0-26.1-10.7-26.1-28s10.2-28 26.1-28c16.1.1 26.1 10.8 26.1 28m-35.4 0c0 8.7 3.3 14.2 9.4 14.2s9.4-5.3 9.4-14.2c0-8.7-3.3-14.2-9.4-14.2s-9.4 5.3-9.4 14.2m84.4 26.9c-1.5-1.8-2-3.4-2.5-6.4l-1.1-6c-.7-3.8-2.5-4.9-5.8-4.9h-6.4V300h-16v-53.9h25.6c12.2 0 20.7 4.7 20.7 16.5 0 7.8-5.3 12.3-11.1 13.4v.2c4.7.7 7.4 3.6 8.5 8.5l2 8.5c.7 2.9 1.6 4.7 3.4 6.7.1.1-17.3.1-17.3.1m-8.2-40.7h-7.8V270h7.8c3.8 0 5.8-1.6 5.8-5.4 0-3.5-1.8-5.3-5.8-5.3m-321.5 81.2c3.3.4 5.6 2.4 5.6 6 0 4.4-2.7 7.3-8.7 7.3h-9.3v-26.1h8.9c5.1 0 8.2 2.4 8.2 6.9 0 3.1-2 5.3-4.7 5.9m-9.1-1.1h5.4c3.3 0 5.1-1.5 5.1-4.5s-1.8-4.5-5.1-4.5h-5.4zm0 11.6h5.8c3.6 0 5.4-1.6 5.4-4.5s-2-4.5-5.4-4.5h-5.8zm28-10.7 7.1-12.7h3.4l-8.9 15.8v10.2h-3.3v-10.2l-9.1-15.8h3.6zm26.7-12.7h7.6c7.3 0 12.7 4 12.7 12.9s-5.4 13.1-12.7 13.1h-7.6zm3.2 23.2h4.4c4.7 0 9.3-2.5 9.3-10.3s-4.5-10.2-9.3-10.2h-4.4zm36.2-4.3H419l-2.5 7.3h-3.3l9.4-26.1h3.6l9.4 26.1h-3.3zm-10-2.9h8.9l-4.4-12.5zm24.1 10.1v-23.2h-8.7v-2.9h20.9v2.9h-8.7v23.2zm28.3-7.2h-10.9l-2.5 7.3h-3.3l9.4-26.1h3.6l9.4 26.1h-3.3zm-9.8-2.9h8.9l-4.4-12.5zm20.7-16h7.6c7.3 0 12.7 4 12.7 12.9s-5.4 13.1-12.7 13.1h-7.6zm3.3 23.2h4.4c4.7 0 9.3-2.5 9.3-10.3s-4.5-10.2-9.3-10.2h-4.4zm44.1-10.1c0 8.4-4.5 13.4-11.3 13.4S508 349 508 340.7c0-8.4 4.5-13.4 11.3-13.4s11.3 5 11.3 13.4m-19 0c0 6.4 2.7 10.7 7.8 10.7s7.8-4.4 7.8-10.7c0-6.4-2.7-10.7-7.8-10.7s-7.8 4.3-7.8 10.7m45-.2v13.1H554l-.5-3.8c-.9 2.7-3.8 4.4-7.3 4.4-6.5 0-11.1-4.9-11.1-13.4 0-8.7 4.9-13.6 11.4-13.6 4.7 0 8 2 9.4 6l-2.9 1.6c-.9-3.1-3.4-4.9-6.7-4.9-5.1 0-8 4-8 10.7 0 6.4 2.5 10.7 8 10.7 3.4 0 6.7-1.8 6.7-6.5V343h-6.4v-2.7h9.8z"/><linearGradient id="a" x1="128.046" x2="313.226" y1="579.207" y2="472.293" gradientTransform="translate(-20.96 -225.764)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#10e7ff"/><stop offset=".103" style="stop-color:#33d5ff"/><stop offset=".255" style="stop-color:#60bdff"/><stop offset=".408" style="stop-color:#86aaff"/><stop offset=".56" style="stop-color:#a39aff"/><stop offset=".71" style="stop-color:#b790ff"/><stop offset=".858" style="stop-color:#c489ff"/><stop offset="1" style="stop-color:#c887ff"/></linearGradient><path d="m199.7 408.2-92.2-54.1V245.9l92.2-54.1 92.2 54.1v108.2zm-79.4-61.7 79.1 46.5 79.1-46.5v-92.9l-79-46.5-79.3 46.5c.1-.1.1 92.9.1 92.9" style="fill:url(#a)"/><linearGradient id="b" x1="185.354" x2="277.202" y1="542.013" y2="488.984" gradientTransform="translate(-20.96 -225.764)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#10e7ff"/><stop offset=".103" style="stop-color:#33d5ff"/><stop offset=".255" style="stop-color:#60bdff"/><stop offset=".408" style="stop-color:#86aaff"/><stop offset=".56" style="stop-color:#a39aff"/><stop offset=".71" style="stop-color:#b790ff"/><stop offset=".858" style="stop-color:#c489ff"/><stop offset="1" style="stop-color:#c887ff"/></linearGradient><path d="m239.4 270.6-32.3 56.8 10.5 18.5 42.8-75.3zm-36.1 0L171 327.4l10.5 18.5 42.8-75.3zm-64.4 0 42.8 75.3 10.5-18.5-32.3-56.8zm0 0 42.8 75.3 10.5-18.5-32.3-56.8zm64.4 0L171 327.4l10.5 18.5 42.8-75.3z" style="fill:url(#b)"/></svg>
+<svg role="img" viewBox="89.7 190 220 220" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" x1="128.046" x2="313.226" y1="579.207" y2="472.293" gradientTransform="translate(-20.96 -225.764)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#10e7ff"/><stop offset=".103" style="stop-color:#33d5ff"/><stop offset=".255" style="stop-color:#60bdff"/><stop offset=".408" style="stop-color:#86aaff"/><stop offset=".56" style="stop-color:#a39aff"/><stop offset=".71" style="stop-color:#b790ff"/><stop offset=".858" style="stop-color:#c489ff"/><stop offset="1" style="stop-color:#c887ff"/></linearGradient><path d="m199.7 408.2-92.2-54.1V245.9l92.2-54.1 92.2 54.1v108.2zm-79.4-61.7 79.1 46.5 79.1-46.5v-92.9l-79-46.5-79.3 46.5c.1-.1.1 92.9.1 92.9" style="fill:url(#a)"/><linearGradient id="b" x1="185.354" x2="277.202" y1="542.013" y2="488.984" gradientTransform="translate(-20.96 -225.764)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#10e7ff"/><stop offset=".103" style="stop-color:#33d5ff"/><stop offset=".255" style="stop-color:#60bdff"/><stop offset=".408" style="stop-color:#86aaff"/><stop offset=".56" style="stop-color:#a39aff"/><stop offset=".71" style="stop-color:#b790ff"/><stop offset=".858" style="stop-color:#c489ff"/><stop offset="1" style="stop-color:#c887ff"/></linearGradient><path d="m239.4 270.6-32.3 56.8 10.5 18.5 42.8-75.3zm-36.1 0L171 327.4l10.5 18.5 42.8-75.3zm-64.4 0 42.8 75.3 10.5-18.5-32.3-56.8zm0 0 42.8 75.3 10.5-18.5-32.3-56.8zm64.4 0L171 327.4l10.5 18.5 42.8-75.3z" style="fill:url(#b)"/></svg>

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

@@ -17,7 +17,10 @@ function ModalFixture(): JSX.Element {
 	return (
 		<>
 			<Button
-				data-testid="open-add-credit-card"
+				variant="solid"
+				color="primary"
+				size="md"
+				testId="open-add-credit-card"
 				onClick={(): void => setOpen(true)}
 			>
 				Contact support

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -8,6 +8,10 @@
 	:global(.ant-breadcrumb-separator) {
 		color: var(--muted-foreground);
 	}
+
+	[data-slot='button'] {
+		padding: 0px;
+	}
 }
 
 .divider {

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss

@@ -1,9 +1,5 @@
-.item {
-	--button-padding: 0;
-	--button-font-size: var(--periscope-font-size-base);
-}
-
 .itemLast {
-	color: var(--muted-foreground);
-	font-size: var(--periscope-font-size-base);
+	color: var(--button-secondary-label);
+	font-size: var(--button-font-size, var(--periscope-font-size-base));
+	line-height: var(--button-size-line-height, 16px);
 }

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx

@@ -26,9 +26,9 @@ function BreadcrumbItem({
 
 	return (
 		<Button
-			variant="ghost"
+			size="md"
+			variant="link"
 			color="secondary"
-			className={styles.item}
 			onClick={(e: React.MouseEvent): void => {
 				if (!('route' in props) || !props.route) {
 					return;

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx

@@ -34,21 +34,23 @@ function ErrorEmptyState({
 			</div>
 			<div className={styles.actions}>
 				<Button
+					size="md"
 					variant="solid"
 					color="secondary"
 					prefix={<LifeBuoy size={14} />}
 					onClick={onContactSupport}
-					data-testid="error-contact-support-button"
+					testId="error-contact-support-button"
 				>
 					Contact Support
 				</Button>
 				{onRefresh && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						data-testid="error-refresh-button"
+						testId="error-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/components/Alerts/LabelColumn/LabelColumn.module.scss

@@ -1,20 +1,32 @@
 .labelColumn {
+	// Badges fill their wrapper; the wrapper, as the flex item, owns the cap.
+	--badge-max-width: 100%;
+
+	position: relative;
 	display: flex;
 	gap: 4px;
 	align-items: center;
 	overflow: hidden;
 	max-width: 100%;
 	width: 100%;
+
+	> * {
+		flex-shrink: 0;
+		max-width: 180px;
+	}
 }
 
-.labelBadge {
-	cursor: default;
-	font-size: 12px;
+// Kept mounted so its width can still be measured.
+.overflowed {
+	position: absolute;
+	visibility: hidden;
+	pointer-events: none;
+}
 
-	--badge-display: inline;
-
-	max-width: 180px;
-	text-overflow: ellipsis;
+// The only visible label truncates instead of pushing `+N` out of view.
+.labelColumn > .shrinkable {
+	flex-shrink: 1;
+	min-width: 0;
 }
 
 .overflowTrigger {
@@ -22,11 +34,6 @@
 	cursor: pointer;
 }
 
-.overflowBadge {
-	cursor: pointer;
-	font-size: 12px;
-}
-
 .labelPopover {
 	display: flex;
 	flex-direction: column;

frontend/src/components/Alerts/LabelColumn/LabelColumn.test.tsx

@@ -1,13 +1,21 @@
-import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { act, render, screen } from '@testing-library/react';
 
 import LabelColumn from './LabelColumn';
 
-let resizeCallback: ResizeObserverCallback | null = null;
+// The global CSS mock maps every class to undefined; keep the names so overflow is assertable.
+jest.mock('./LabelColumn.module.scss', () => ({
+	labelColumn: 'labelColumn',
+	overflowed: 'overflowed',
+	shrinkable: 'shrinkable',
+}));
+
+const BADGE_WIDTH = 60;
+
+let resizeCallbacks: ResizeObserverCallback[] = [];
 
 class MockResizeObserver {
 	constructor(callback: ResizeObserverCallback) {
-		resizeCallback = callback;
+		resizeCallbacks.push(callback);
 	}
 
 	observe = jest.fn();
@@ -15,15 +23,23 @@ class MockResizeObserver {
 	disconnect = jest.fn();
 }
 
-function triggerResize(width: number): void {
-	if (resizeCallback) {
-		act(() => {
-			resizeCallback?.(
-				[{ contentRect: { width } } as ResizeObserverEntry],
-				{} as ResizeObserver,
-			);
+// jsdom has no layout: every badge measures BADGE_WIDTH, the column `containerWidth`.
+function mockLayout(containerWidth: number): void {
+	jest
+		.spyOn(HTMLElement.prototype, 'clientWidth', 'get')
+		.mockImplementation(function getClientWidth(this: HTMLElement) {
+			return this.dataset.testid === 'label-column' ? containerWidth : 0;
 		});
-	}
+	jest
+		.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+		.mockReturnValue({ width: BADGE_WIDTH } as DOMRect);
+}
+
+function triggerResize(containerWidth: number): void {
+	mockLayout(containerWidth);
+	act(() => {
+		resizeCallbacks.forEach((callback) => callback([], {} as ResizeObserver));
+	});
 }
 
 beforeAll(() => {
@@ -31,13 +47,14 @@ beforeAll(() => {
 });
 
 afterEach(() => {
-	resizeCallback = null;
+	resizeCallbacks = [];
+	jest.restoreAllMocks();
 });
 
 function renderWithProviders(
 	ui: React.ReactElement,
 ): ReturnType<typeof render> {
-	return render(<TooltipProvider>{ui}</TooltipProvider>);
+	return render(ui);
 }
 
 describe('LabelColumn', () => {
@@ -54,13 +71,10 @@ describe('LabelColumn', () => {
 	it('should truncate labels and show +N badge when container is narrow', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
 
+		// 3 badges (180px) + overflow reserve (40px)
+		mockLayout(220);
 		renderWithProviders(<LabelColumn labels={labels} />);
 
-		// Simulate narrow container that fits ~3 badges
-		// Badge widths: env=37, service=65, region=58, team=44, owner=51, version=65
-		// 220px available = 3 badges (160px) + gaps (8px) + overflow (44px)
-		triggerResize(220);
-
 		// First 3 visible
 		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
 		expect(screen.getByTestId('label-tag-service')).toBeInTheDocument();
@@ -70,6 +84,20 @@ describe('LabelColumn', () => {
 		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
 	});
 
+	it('should hide the labels past the visible count', () => {
+		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
+
+		// 3 badges (180px) + overflow reserve (40px)
+		mockLayout(220);
+		renderWithProviders(<LabelColumn labels={labels} />);
+
+		const isHidden = (label: string): boolean =>
+			screen.getByTestId(`label-tag-${label}`).closest('.overflowed') !== null;
+
+		expect(labels.filter(isHidden)).toStrictEqual(['team', 'owner', 'version']);
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
+	});
+
 	it('should render label with value when value prop provided', () => {
 		const labels = ['env'];
 		const value = { env: 'production' };
@@ -93,19 +121,37 @@ describe('LabelColumn', () => {
 		expect(screen.getByTestId('label-tag-service')).toHaveTextContent('service');
 	});
 
-	it('should show overflow badge with remaining count when container is narrow', () => {
+	it('should update the overflow count when the container resizes', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
 
+		mockLayout(220);
+		renderWithProviders(<LabelColumn labels={labels} />);
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
+
+		// 2 badges (120px) + overflow reserve (40px)
+		triggerResize(160);
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+4');
+
+		triggerResize(1000);
+		expect(screen.queryByTestId('label-overflow-badge')).not.toBeInTheDocument();
+	});
+
+	it('should skip the overflow reserve when every label fits', () => {
+		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
+
+		mockLayout(labels.length * BADGE_WIDTH);
 		renderWithProviders(<LabelColumn labels={labels} />);
 
-		// Simulate narrow container to trigger overflow (shows 3 labels)
-		// 220px fits first 3 badges before overflow
-		triggerResize(220);
+		expect(screen.queryByTestId('label-overflow-badge')).not.toBeInTheDocument();
+	});
 
-		// Overflow badge shows +3 (remaining labels)
-		const overflowBadge = screen.getByTestId('label-overflow-badge');
-		expect(overflowBadge).toBeInTheDocument();
-		expect(overflowBadge).toHaveTextContent('+3');
+	it('should keep one label visible when even that one does not fit', () => {
+		const labels = ['env', 'service'];
+
+		mockLayout(50);
+		renderWithProviders(<LabelColumn labels={labels} />);
+
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+1');
 	});
 
 	it('should render empty when no labels provided', () => {
@@ -126,11 +172,9 @@ describe('LabelColumn', () => {
 	it('should show all labels when container is wide enough', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
 
+		mockLayout(1000);
 		renderWithProviders(<LabelColumn labels={labels} />);
 
-		// Simulate wide container
-		triggerResize(1000);
-
 		// All labels visible
 		labels.forEach((label) => {
 			expect(screen.getByTestId(`label-tag-${label}`)).toBeInTheDocument();

frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx

@@ -1,35 +1,19 @@
 import { Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import {
-	TooltipContent,
-	TooltipRoot,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { Tooltip } from '@signozhq/ui/tooltip';
+import cx from 'classnames';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 import LabelTag from './LabelTag';
 
 import styles from './LabelColumn.module.scss';
-import { BADGE_GAP, estimateBadgeWidth, OVERFLOW_BADGE_WIDTH } from './utils';
+import { getVisibleCount } from './utils';
 
 export interface LabelColumnProps {
 	labels: string[];
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
+	color?: BadgeColorType;
 	value?: { [key: string]: string };
 }
 
@@ -39,60 +23,37 @@ function LabelColumn({
 	color = 'primary',
 }: LabelColumnProps): JSX.Element {
 	const containerRef = useRef<HTMLDivElement>(null);
-	const [maxVisibleCount, setMaxVisibleCount] = useState(labels.length);
+	const [visibleCount, setVisibleCount] = useState(labels.length);
 	const [, copyToClipboard] = useCopyToClipboard();
 
-	const calculateMaxVisible = useCallback(
-		(width: number): number => {
-			if (width <= 0) {
-				return 1;
-			}
-
-			const availableWidth = width - OVERFLOW_BADGE_WIDTH - BADGE_GAP;
-			let usedWidth = 0;
-			let count = 0;
-
-			for (const label of labels) {
-				const badgeWidth = estimateBadgeWidth(label, value?.[label]) + BADGE_GAP;
-				if (usedWidth + badgeWidth > availableWidth && count > 0) {
-					break;
-				}
-				usedWidth += badgeWidth;
-				count++;
-			}
-
-			return Math.max(1, count);
-		},
-		[labels, value],
-	);
-
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const container = containerRef.current;
 		if (!container) {
 			return;
 		}
 
-		const observer = new ResizeObserver((entries) => {
-			const entry = entries[0];
-			if (entry && entry.contentRect.width > 0) {
-				setMaxVisibleCount(calculateMaxVisible(entry.contentRect.width));
+		const measure = (): void => {
+			const available = container.clientWidth;
+			if (available <= 0) {
+				return;
 			}
-		});
 
+			const widths = Array.from(container.children)
+				.slice(0, labels.length)
+				.map((item) => item.getBoundingClientRect().width);
+			const gap = parseFloat(getComputedStyle(container).columnGap) || 0;
+
+			setVisibleCount(getVisibleCount(widths, available, gap));
+		};
+
+		const observer = new ResizeObserver(measure);
 		observer.observe(container);
-
-		if (container.clientWidth > 0) {
-			setMaxVisibleCount(calculateMaxVisible(container.clientWidth));
-		}
+		measure();
 
 		return (): void => observer.disconnect();
-	}, [calculateMaxVisible]);
+	}, [labels, value]);
 
-	const needsOverflow = labels.length > maxVisibleCount;
-	const visibleLabels = needsOverflow
-		? labels.slice(0, maxVisibleCount)
-		: labels;
-	const remainingLabels = needsOverflow ? labels.slice(maxVisibleCount) : [];
+	const remainingLabels = labels.slice(visibleCount);
 
 	return (
 		<div
@@ -100,24 +61,23 @@ function LabelColumn({
 			className={styles.labelColumn}
 			data-testid="label-column"
 		>
-			{visibleLabels.map((label) => (
-				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
+			{labels.map((label, index) => (
+				<LabelTag
+					key={label}
+					label={label}
+					color={color}
+					value={value?.[label]}
+					className={cx({
+						[styles.overflowed]: index >= visibleCount,
+						[styles.shrinkable]: index === 0 && visibleCount === 1,
+					})}
+				/>
 			))}
 			{remainingLabels.length > 0 && (
-				<TooltipRoot>
-					<TooltipTrigger asChild>
-						<span>
-							<Badge
-								color={color}
-								className={styles.overflowBadge}
-								variant="outline"
-								data-testid="label-overflow-badge"
-							>
-								+{remainingLabels.length}
-							</Badge>
-						</span>
-					</TooltipTrigger>
-					<TooltipContent side="bottom" align="end">
+				<Tooltip
+					side="bottom"
+					align="end"
+					title={
 						<div className={styles.tooltipContent}>
 							<span>
 								{remainingLabels
@@ -140,8 +100,14 @@ function LabelColumn({
 								<Copy size={12} />
 							</button>
 						</div>
-					</TooltipContent>
-				</TooltipRoot>
+					}
+				>
+					<span>
+						<Badge color={color} variant="outlined" testId="label-overflow-badge">
+							+{remainingLabels.length}
+						</Badge>
+					</span>
+				</Tooltip>
 			)}
 		</div>
 	);

frontend/src/components/Alerts/LabelColumn/LabelTag.module.scss

@@ -1,11 +1,3 @@
-.labelBadge {
-	cursor: default;
-	font-size: 12px;
-
-	max-width: 180px;
-	text-overflow: ellipsis;
-}
-
 .labelValue {
 	text-overflow: ellipsis;
 	overflow: hidden;

frontend/src/components/Alerts/LabelColumn/LabelTag.tsx

@@ -1,35 +1,24 @@
 import { Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import {
-	TooltipContent,
-	TooltipRoot,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { useCopyToClipboard } from 'react-use';
 
 import styles from './LabelTag.module.scss';
 
 export interface LabelTagProps {
 	label: string;
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
+	color?: BadgeColorType;
 	value?: string;
+	className?: string;
 }
 
-function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
+function LabelTag({
+	label,
+	value,
+	color,
+	className,
+}: LabelTagProps): JSX.Element {
 	const [, copyToClipboard] = useCopyToClipboard();
 	const displayText = value ? `${label}: ${value}` : label;
 	const searchFormat = value ? `${label} ${value}` : label;
@@ -41,20 +30,8 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 	};
 
 	return (
-		<TooltipRoot>
-			<TooltipTrigger asChild>
-				<span>
-					<Badge
-						color={color}
-						className={styles.labelBadge}
-						variant="outline"
-						data-testid={`label-tag-${label}`}
-					>
-						<span className={styles.labelValue}>{displayText}</span>
-					</Badge>
-				</span>
-			</TooltipTrigger>
-			<TooltipContent>
+		<Tooltip
+			title={
 				<div className={styles.tooltipContent}>
 					<span>{displayText}</span>
 					<button
@@ -66,8 +43,19 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 						<Copy size={12} />
 					</button>
 				</div>
-			</TooltipContent>
-		</TooltipRoot>
+			}
+		>
+			<span className={className}>
+				<Badge
+					textTransform="none"
+					color={color ?? 'secondary'}
+					variant="outlined"
+					testId={`label-tag-${label}`}
+				>
+					<span className={styles.labelValue}>{displayText}</span>
+				</Badge>
+			</span>
+		</Tooltip>
 	);
 }
 

frontend/src/components/Alerts/LabelColumn/stories/LabelColumn.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import LabelColumn from '../LabelColumn';
+
+const meta = {
+	title: 'Components/Label Column',
+	component: LabelColumn,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 180 })],
+	args: {
+		labels: ['severity', 'team', 'service', 'environment'],
+		value: {
+			severity: 'critical',
+			team: 'payments',
+			service: 'checkout',
+			environment: 'production',
+		},
+	},
+} satisfies Meta<typeof LabelColumn>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Labels that fit the column; the rest collapse into a `+N` chip. */
+export const Default: Story = {};
+
+/** Copying one label from its tooltip. */
+export const LabelCopiedToast: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.hover(
+			await within(canvasElement).findByTestId('label-tag-severity'),
+		);
+		await userEvent.click(
+			await screen.findByRole('button', { name: 'Copy to clipboard' }),
+		);
+		await waitFor(() =>
+			expect(screen.getByText(/copied! use in search/i)).toBeVisible(),
+		);
+	},
+};
+
+/** Copying the labels that overflow the column from the `+N` chip's tooltip. */
+export const OverflowLabelsCopiedToast: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.hover(
+			await within(canvasElement).findByTestId('label-overflow-badge'),
+		);
+		await userEvent.click(
+			await screen.findByRole('button', { name: 'Copy to clipboard' }),
+		);
+		await waitFor(() =>
+			expect(screen.getByText(/copied! use in search/i)).toBeVisible(),
+		);
+	},
+};

frontend/src/components/Alerts/LabelColumn/utils.ts

@@ -1,14 +1,33 @@
-export const BADGE_GAP = 4;
 export const OVERFLOW_BADGE_WIDTH = 40;
 
-export const BADGE_MAX_WIDTH = 180;
-export const BADGE_PADDING = 16;
-export const CHAR_WIDTH = 7;
-
-export function estimateBadgeWidth(label: string, value?: string): number {
-	const displayText = value ? `${label}: ${value}` : label;
-	return Math.min(
-		displayText.length * CHAR_WIDTH + BADGE_PADDING,
-		BADGE_MAX_WIDTH,
+/**
+ * How many leading labels fit in `available` px, reserving room for the `+N` badge
+ * whenever some are left out. At least one label is always shown.
+ */
+export function getVisibleCount(
+	widths: number[],
+	available: number,
+	gap: number,
+): number {
+	const total = widths.reduce(
+		(sum, width, index) => sum + width + (index > 0 ? gap : 0),
+		0,
 	);
+	if (total <= available) {
+		return widths.length;
+	}
+
+	const limit = available - OVERFLOW_BADGE_WIDTH - gap;
+	let used = 0;
+	let count = 0;
+
+	for (const width of widths) {
+		used += width + (count > 0 ? gap : 0);
+		if (used > limit) {
+			break;
+		}
+		count++;
+	}
+
+	return Math.max(1, count);
 }

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx

@@ -30,21 +30,23 @@ function NoResultsEmptyState({
 			<div className={styles.actions}>
 				{onClear && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						onClick={onClear}
-						data-testid="no-results-clear-button"
+						testId="no-results-clear-button"
 					>
 						{clearButtonText}
 					</Button>
 				)}
 				{onRefresh && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						data-testid="no-results-refresh-button"
+						testId="no-results-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/components/Alerts/constants.ts

@@ -1,4 +1,4 @@
-import type { BadgeColor } from '@signozhq/ui/badge';
+import type { BadgeColorType } from '@signozhq/ui/badge';
 
 export const STATE_ORDER = ['firing', 'pending', 'inactive', 'disabled'];
 export const SEVERITY_ORDER = ['critical', 'error', 'warning', 'info'];
@@ -24,9 +24,9 @@ export const SEVERITY_COLORS: Record<string, string> = {
 	info: 'var(--bg-robin-500)',
 };
 
-export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
-	critical: 'error',
-	error: 'error',
+export const SEVERITY_BADGE_COLORS: Record<string, BadgeColorType> = {
+	critical: 'danger',
+	error: 'danger',
 	warning: 'warning',
 	info: 'primary',
 };

frontend/src/components/AuthError/AuthError.tsx

@@ -10,7 +10,7 @@ interface AuthErrorProps {
 
 function AuthError({ error }: AuthErrorProps): JSX.Element {
 	return (
-		<div className="auth-error-container">
+		<div className="auth-error-container" data-testid="auth-error">
 			<ErrorContent
 				error={error}
 				icon={<CircleAlert size={12} className="auth-error-icon" />}

frontend/src/components/AuthPageContainer/AuthHeader.styles.scss

@@ -33,36 +33,3 @@
 	color: var(--l1-foreground);
 	white-space: nowrap;
 }
-
-.auth-header-help-button {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	height: 32px;
-	padding: 10px 16px;
-	background: var(--l2-background);
-	color: var(--l2-foreground);
-	border: none;
-	border-radius: 2px;
-	cursor: pointer;
-	transition: opacity 0.2s ease;
-
-	span {
-		font-family: var(--font-family-inter, Inter, sans-serif);
-		font-size: 11px;
-		font-weight: 500;
-		line-height: 1;
-		color: var(--l2-foreground);
-		text-align: center;
-	}
-
-	svg {
-		flex-shrink: 0;
-		color: var(--l2-foreground);
-	}
-
-	&:hover {
-		opacity: 0.8;
-	}
-}

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -22,11 +22,11 @@ function AuthHeader(): JSX.Element {
 				<span className="auth-header-logo-text">SigNoz</span>
 			</div>
 			<Button
-				className="auth-header-help-button"
+				size="md"
 				prefix={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
 				variant="solid"
-				color="none"
+				color="secondary"
 			>
 				Get Help
 			</Button>

frontend/src/components/Badges/Badges.tsx

@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
 import { Button, Flex } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Pill } from '@signozhq/ui/pill';
 import Input from 'components/Input';
 
 import './Badges.styles.scss';
@@ -47,18 +47,13 @@ function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 	return (
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
-				<Badge
+				<Pill.Closeable
+					textTransform="none"
 					key={tag}
-					color="vanilla"
-					style={{ userSelect: 'none' }}
-					closable
-					onClose={(e): void => {
-						e.preventDefault();
-						handleClose(tag);
-					}}
+					onClose={() => handleClose(tag)}
 				>
 					{tag}
-				</Badge>
+				</Pill.Closeable>
 			))}
 
 			{inputVisible && (

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -512,6 +512,7 @@ export default function CeleryOverviewTable({
 				allowClear
 			/>
 			<ResizeTable
+				data-testid="mq-overview-table"
 				className="celery-overview-table"
 				pagination={paginationConfig}
 				size="middle"

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -28,6 +28,7 @@ function CeleryTaskConfigOptions(): JSX.Element {
 					Task Name
 				</Typography.Text>
 				<Select
+					data-testid="celery-task-name-select"
 					placeholder="Task Name"
 					showSearch
 					mode="multiple"

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -105,7 +105,10 @@ export default function CeleryTaskGraphGrid({
 	};
 
 	return (
-		<div className="celery-task-graph-grid-container">
+		<div
+			className="celery-task-graph-grid-container"
+			data-testid="celery-graph-grid"
+		>
 			<div className="metric-based-graphs">
 				<CardContainer className="row-card" isDarkMode={isDarkMode}>
 					<div className="row-panel">

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx

@@ -80,6 +80,7 @@ function CeleryTaskStateGraphConfig({
 			{tabs.map((tab, index) => (
 				<Col
 					key={tab.key}
+					data-testid={`celery-state-tab-${tab.key}`}
 					onClick={(): void => handleTabClick(tab.key as CeleryTaskState)}
 					className={`celery-task-states__tab ${
 						tab.key === barState ? 'celery-task-states__tab--selected' : ''

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss

@@ -39,9 +39,3 @@
 		}
 	}
 }
-
-.cloud-service-data-collected-table-tooltip {
-	max-width: 280px;
-	white-space: normal;
-	word-break: break-word;
-}

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -4,7 +4,7 @@ import {
 	CloudintegrationtypesCollectedMetricDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { BarChart, Info, ScrollText } from '@signozhq/icons';
-import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 
 import './CloudServiceDataCollected.styles.scss';
 
@@ -88,23 +88,15 @@ function CloudServiceDataCollected({
 						<BarChart size={14} />
 						Metrics
 						{metricsInfoTooltip && (
-							<TooltipProvider>
-								<TooltipSimple
-									title={metricsInfoTooltip}
-									side="top"
-									tooltipContentProps={{
-										className: 'cloud-service-data-collected-table-tooltip',
-									}}
+							<Tooltip title={metricsInfoTooltip} side="top">
+								<span
+									className="cloud-service-data-collected-table-heading-info"
+									aria-label="About the metrics listed below"
+									data-testid="data-collected-metrics-info"
 								>
-									<span
-										className="cloud-service-data-collected-table-heading-info"
-										aria-label="About the metrics listed below"
-										data-testid="data-collected-metrics-info"
-									>
-										<Info size={12} />
-									</span>
-								</TooltipSimple>
-							</TooltipProvider>
+									<Info size={12} />
+								</span>
+							</Tooltip>
 						)}
 					</div>
 					<Table

frontend/src/components/CodeBlock/CodeBlock.module.scss

@@ -2,6 +2,13 @@
 	position: relative;
 }
 
+.copyButton {
+	position: absolute;
+	right: 8px;
+	top: 8px;
+	z-index: 1;
+}
+
 .codeBlockSyntaxHighlighter {
 	background-color: var(--l2-background) !important;
 	border-radius: 4px !important;

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import SyntaxHighlighter, {
 	a11yDark,
 } from 'components/MarkdownRenderer/syntaxHighlighter';
@@ -52,16 +53,20 @@ function CodeBlock({
 			data-testid="code-block-container"
 		>
 			{showCopyButton ? (
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					onClick={handleCopy}
-					prefix={isCopied ? <Check size={14} /> : <Copy size={14} />}
-					aria-label="Copy code"
-					title={isCopied ? 'Copied' : 'Copy'}
-					style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
-				/>
+				<div className={styles.copyButton}>
+					<Tooltip title={isCopied ? 'Copied' : 'Copy'}>
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="sm"
+							icon
+							onClick={handleCopy}
+							aria-label="Copy code"
+						>
+							{isCopied ? <Check size={14} /> : <Copy size={14} />}
+						</Button>
+					</Tooltip>
+				</div>
 			) : null}
 			<SyntaxHighlighter
 				style={a11yDark}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -134,26 +134,27 @@ function CreateServiceAccountModal(): JSX.Element {
 
 			<DialogFooter className="create-sa-modal__footer">
 				<Button
+					size="md"
 					type="button"
 					variant="solid"
 					color="secondary"
 					onClick={handleClose}
-					data-testid="create-sa-cancel-btn"
+					testId="create-sa-cancel-btn"
+					prefix={<X size={12} />}
 				>
-					<X size={12} />
 					Cancel
 				</Button>
 
 				<AuthZButton
+					size="md"
 					checks={[SACreatePermission]}
-					withPortal={false}
 					type="submit"
 					form="create-sa-form"
 					variant="solid"
 					color="primary"
 					loading={isSubmitting}
 					disabled={!isValid}
-					data-testid="create-sa-submit-btn"
+					testId="create-sa-submit-btn"
 				>
 					Create Service Account
 				</AuthZButton>

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

@@ -5,6 +5,7 @@ import {
 } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { submitImplicitly } from 'tests/submitImplicitly';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
@@ -60,7 +61,10 @@ describe('CreateServiceAccountModal', () => {
 		await screen.findByTestId('create-sa-name-input');
 
 		await waitFor(() =>
-			expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled(),
+			expect(screen.getByTestId('create-sa-submit-btn')).toHaveAttribute(
+				'aria-disabled',
+				'true',
+			),
 		);
 	});
 
@@ -72,10 +76,14 @@ describe('CreateServiceAccountModal', () => {
 		const submitBtn = await screen.findByTestId('create-sa-submit-btn');
 
 		await user.type(nameInput, 'test');
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 
 		await user.clear(nameInput);
-		await waitFor(() => expect(submitBtn).toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).toHaveAttribute('aria-disabled', 'true'),
+		);
 	});
 
 	it('successful submit shows toast.success and closes modal', async () => {
@@ -86,7 +94,9 @@ describe('CreateServiceAccountModal', () => {
 		await user.type(nameInput, 'Deploy Bot');
 
 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(submitBtn);
 
 		await waitFor(() => {
@@ -102,6 +112,40 @@ describe('CreateServiceAccountModal', () => {
 		});
 	});
 
+	it('pressing Enter again while creating sends one request', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let requests = 0;
+		server.use(
+			rest.post(SERVICE_ACCOUNTS_ENDPOINT, (_, res, ctx) => {
+				requests += 1;
+				return res(
+					ctx.delay(100),
+					ctx.status(201),
+					ctx.json({ status: 'success', data: {} }),
+				);
+			}),
+		);
+		renderModal();
+
+		const nameInput = await screen.findByTestId<HTMLInputElement>(
+			'create-sa-name-input',
+		);
+		await user.type(nameInput, 'Deploy Bot');
+		const submitBtn = screen.getByTestId('create-sa-submit-btn');
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
+
+		submitImplicitly(nameInput);
+		await waitFor(() => expect(submitBtn).toHaveAttribute('aria-busy', 'true'));
+		submitImplicitly(nameInput);
+
+		await waitFor(() => {
+			expect(mockToast.success).toHaveBeenCalled();
+		});
+		expect(requests).toBe(1);
+	});
+
 	it('shows toast.error on API error and keeps modal open', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -120,7 +164,9 @@ describe('CreateServiceAccountModal', () => {
 		await user.type(nameInput, 'Dupe Bot');
 
 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(submitBtn);
 
 		await waitFor(() => {
@@ -180,7 +226,10 @@ describe('CreateServiceAccountModal', () => {
 		).resolves.toBeInTheDocument();
 
 		// The footer lives outside the guard: submit is gated, Cancel still works.
-		expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled();
+		expect(screen.getByTestId('create-sa-submit-btn')).toHaveAttribute(
+			'aria-disabled',
+			'true',
+		);
 
 		await user.click(screen.getByTestId('create-sa-cancel-btn'));
 

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -4,30 +4,6 @@
 	align-items: center;
 	gap: 4px;
 
-	.zoom-out-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		color: var(--secondary-foreground);
-		background-color: var(--secondary-background);
-		border: 1px solid var(--secondary-border);
-		border-radius: 2px;
-		box-shadow: none;
-		padding: 10px;
-		height: 33px;
-
-		&:hover:not(:disabled) {
-			color: var(--primary-foreground);
-			background: var(--primary-background);
-		}
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-	}
-
 	.timeSelection-input {
 		&:hover {
 			border-color: var(--l1-border) !important;

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -72,6 +72,8 @@ interface CustomTimePickerProps {
 	maxTime: number;
 	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
 	isModalTimeSelection?: boolean;
+	/** Lands on the trigger input. Not spread — the component takes no rest props. */
+	'data-testid'?: string;
 }
 
 function CustomTimePicker({
@@ -95,6 +97,7 @@ function CustomTimePicker({
 	minTime,
 	maxTime,
 	isModalTimeSelection = false,
+	'data-testid': dataTestId,
 }: CustomTimePickerProps): JSX.Element {
 	const [selectedTimePlaceholderValue, setSelectedTimePlaceholderValue] =
 		useState('Select / Enter Time Range');
@@ -596,6 +599,7 @@ function CustomTimePicker({
 				>
 					<Input
 						ref={inputRef}
+						data-testid={dataTestId}
 						autoComplete="off"
 						className={cx(
 							'timeSelection-input',
@@ -650,20 +654,20 @@ function CustomTimePicker({
 				</Popover>
 			</Tooltip>
 			{!showLiveLogs && !isModalTimeSelection && (
-				<Tooltip
-					title={
-						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
-					}
-				>
+				<Tooltip title={zoomOutDisabled ? undefined : 'Zoom out'}>
 					<Button
-						className="zoom-out-btn"
+						disabledTooltip="Zoom out time range is limited to 1 month"
+						size="md"
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
-						data-testid="zoom-out-btn"
-						prefix={<ZoomOut size={14} />}
+						testId="zoom-out-btn"
+						icon
+						aria-label="Zoom out"
 						variant="solid"
-						color="none"
-					/>
+						color="secondary"
+					>
+						<ZoomOut size={14} />
+					</Button>
 				</Tooltip>
 			)}
 		</div>
@@ -682,4 +686,5 @@ CustomTimePicker.defaultProps = {
 	onExitLiveLogs: noop,
 	showLiveLogs: false,
 	showRecentlyUsed: true,
+	'data-testid': undefined,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -180,6 +180,7 @@ function CustomTimePickerPopoverContent({
 						type="text"
 						className="time-btns"
 						key={option.label + option.value}
+						data-testid={`time-chip-${option.value}`}
 						onClick={(): void => {
 							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
@@ -250,6 +251,7 @@ function CustomTimePickerPopoverContent({
 						<Button
 							className={cx('data-time-live', isLiveLogsEnabled ? 'active' : '')}
 							type="text"
+							data-testid="time-picker-live"
 							onClick={handleGoLive}
 						>
 							Live
@@ -259,6 +261,7 @@ function CustomTimePickerPopoverContent({
 						<Button
 							type="text"
 							key={option.label + option.value}
+							data-testid={`time-option-${option.value}`}
 							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
 								e.stopPropagation();
 								e.preventDefault();

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -88,6 +88,7 @@ function TimezoneItem({
 	return (
 		<button
 			type="button"
+			data-testid={`timezone-item-${timezone.value}`}
 			className={cx('timezone-picker__item', {
 				selected: isSelected,
 				'has-divider': timezone.hasDivider,

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -164,6 +164,6 @@ describe('CustomTimePicker - zoom out button', () => {
 		);
 
 		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		expect(zoomOutBtn).toBeDisabled();
+		expect(zoomOutBtn).toHaveAttribute('aria-disabled', 'true');
 	});
 });

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -27,12 +27,14 @@ function DetailsHeader({
 	const closeButton = (
 		<Button
 			variant="ghost"
-			size="icon"
+			size="sm"
+			icon
 			color="secondary"
 			onClick={onClose}
 			aria-label="Close"
-			prefix={<X size={14} />}
-		></Button>
+		>
+			<X size={14} />
+		</Button>
 	);
 
 	return (

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss

@@ -42,12 +42,5 @@
 			height: 1px;
 			background: var(--l1-border);
 		}
-
-		.export-button {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
 	}
 }

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

@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { message } from 'antd';
 import configureStore from 'redux-mock-store';
 import store from 'store';
@@ -194,6 +195,23 @@ describe.each([
 		});
 	});
 
+	it('sends the chosen jsonl format and 30k row limit', async () => {
+		renderWithStore(dataSource);
+		await userEvent.click(screen.getByTestId(testId));
+		await userEvent.click(screen.getByRole('radio', { name: 'jsonl' }));
+		await userEvent.click(screen.getByRole('radio', { name: '30k' }));
+		await userEvent.click(screen.getByText('Export'));
+
+		await waitFor(() => {
+			expect(mockDownloadExportData).toHaveBeenCalledTimes(1);
+		});
+		const callArgs = mockDownloadExportData.mock.calls[0][0];
+		expect(callArgs.format).toBe(DownloadFormats.JSONL);
+		expect(callArgs.body.compositeQuery.queries[0].spec.limit).toBe(
+			DownloadRowCounts.THIRTY_K,
+		);
+	});
+
 	it('clears groupBy and having in the export payload', async () => {
 		const mockQuery = createMockStagedQuery(dataSource);
 		mockQuery.builder.queryData[0].groupBy = [
@@ -308,13 +326,16 @@ describe.each([
 
 		fireEvent.click(screen.getByText('Export'));
 
-		expect(screen.getByTestId(testId)).toBeDisabled();
+		expect(screen.getByTestId(testId)).toHaveAttribute('aria-disabled', 'true');
 		expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
 		resolveDownload!();
 
 		await waitFor(() => {
-			expect(screen.getByTestId(testId)).not.toBeDisabled();
+			expect(screen.getByTestId(testId)).not.toHaveAttribute(
+				'aria-disabled',
+				'true',
+			);
 		});
 	});
 });

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Popover, Tooltip } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { RadioGroup } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -69,10 +69,15 @@ export default function DownloadOptionsMenu({
 			>
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup value={exportFormat} onChange={setExportFormat}>
-						<RadioGroupItem value={DownloadFormats.CSV}>csv</RadioGroupItem>
-						<RadioGroupItem value={DownloadFormats.JSONL}>jsonl</RadioGroupItem>
-					</RadioGroup>
+					<RadioGroup
+						color="primary"
+						value={exportFormat}
+						onChange={setExportFormat}
+						items={[
+							{ value: DownloadFormats.CSV, label: 'csv' },
+							{ value: DownloadFormats.JSONL, label: 'jsonl' },
+						]}
+					/>
 				</div>
 
 				<div className="horizontal-line" />
@@ -80,19 +85,15 @@ export default function DownloadOptionsMenu({
 				<div className="row-limit">
 					<Typography.Text className="title">Number of Rows</Typography.Text>
 					<RadioGroup
+						color="primary"
 						value={String(rowLimit)}
 						onChange={(value): void => setRowLimit(Number(value))}
-					>
-						<RadioGroupItem value={String(DownloadRowCounts.TEN_K)}>
-							10k
-						</RadioGroupItem>
-						<RadioGroupItem value={String(DownloadRowCounts.THIRTY_K)}>
-							30k
-						</RadioGroupItem>
-						<RadioGroupItem value={String(DownloadRowCounts.FIFTY_K)}>
-							50k
-						</RadioGroupItem>
-					</RadioGroup>
+						items={[
+							{ value: String(DownloadRowCounts.TEN_K), label: '10k' },
+							{ value: String(DownloadRowCounts.THIRTY_K), label: '30k' },
+							{ value: String(DownloadRowCounts.FIFTY_K), label: '50k' },
+						]}
+					/>
 				</div>
 
 				{dataSource !== DataSource.TRACES && (
@@ -101,12 +102,15 @@ export default function DownloadOptionsMenu({
 
 						<div className="columns-scope">
 							<Typography.Text className="title">Columns</Typography.Text>
-							<RadioGroup value={columnsScope} onChange={setColumnsScope}>
-								<RadioGroupItem value={DownloadColumnsScopes.ALL}>All</RadioGroupItem>
-								<RadioGroupItem value={DownloadColumnsScopes.SELECTED}>
-									Selected
-								</RadioGroupItem>
-							</RadioGroup>
+							<RadioGroup
+								color="primary"
+								value={columnsScope}
+								onChange={setColumnsScope}
+								items={[
+									{ value: DownloadColumnsScopes.ALL, label: 'All' },
+									{ value: DownloadColumnsScopes.SELECTED, label: 'Selected' },
+								]}
+							/>
 						</div>
 					</>
 				)}
@@ -115,9 +119,9 @@ export default function DownloadOptionsMenu({
 					variant="solid"
 					color="primary"
 					prefix={<Download size={16} />}
+					size="md"
+					width="100%"
 					onClick={handleExport}
-					className="export-button"
-					disabled={isDownloading}
 					loading={isDownloading}
 				>
 					Export
@@ -148,13 +152,14 @@ export default function DownloadOptionsMenu({
 				<Button
 					variant="ghost"
 					color="secondary"
-					size="icon"
-					prefix={<Download size={14} />}
+					size="sm"
+					icon
 					aria-label="Download"
-					data-testid={`periscope-btn-download-${dataSource}`}
-					disabled={isDownloading}
+					testId={`periscope-btn-download-${dataSource}`}
 					loading={isDownloading}
-				/>
+				>
+					<Download size={14} />
+				</Button>
 			</Tooltip>
 		</Popover>
 	);

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -38,18 +38,24 @@ function DeleteMemberDialog({
 
 	const footer = (
 		<>
-			<Button variant="solid" color="secondary" onClick={onClose}>
-				<X size={12} />
+			<Button
+				size="md"
+				variant="solid"
+				color="secondary"
+				onClick={onClose}
+				prefix={<X size={12} />}
+			>
 				Cancel
 			</Button>
 			<Button
+				size="md"
 				variant="solid"
-				color="destructive"
-				disabled={isDeleting}
+				color="danger"
 				onClick={onConfirm}
+				testId="member-delete-confirm-btn"
 				loading={isDeleting}
+				prefix={<Trash2 size={12} />}
 			>
-				<Trash2 size={12} />
 				{isDeleting ? 'Processing...' : title}
 			</Button>
 		</>