refactor(frontend): remove the old logs explorer

The page and its redux slice were the only callers of the logs list and
aggregate endpoints removed in the previous commit, so it rendered
nothing. Dropping it takes the logs store, the logql parser and the
legacy log api clients with it.

LogViewMode moves to container/OptionsMenu/types and the restricted-field
constants to container/LogDetailedView/config, their only remaining
consumers.

.claude/rules/pytest.md

@@ -17,4 +17,3 @@ 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/rules/storybook.md

@@ -1,15 +0,0 @@
----
-paths:
-  - "frontend/src/**/*.tsx"
----
-
-# Storybook
-
-Page stories are written with the `signoz-page-story` skill ([`.claude/skills/signoz-page-story/SKILL.md`](../skills/signoz-page-story/SKILL.md)); the API surface is [`frontend/src/storybook/README.md`](../../frontend/src/storybook/README.md).
-
-- **A UI change lands with its story.** Any change that alters what a page renders — a new page, a new state, a new branch, a changed layout — updates the story of every page that renders it, or creates one where the page has none. Go through the `signoz-page-story` skill; never hand-write a page story outside it.
-- **New page, new story. New state, new control or variant.** The skill decides which: a control on a response, a variant worth linking to, or a `play` story for a state only a click reaches.
-- **A shared component is covered through its pages.** A change under `components/` or `container/` with no story of its own updates the stories of the pages that render it.
-- **Already covered, say so.** When the existing story and its controls already reach the changed state, no story edit is needed; state that in the PR description.
-- **Opt out only when there is no visual diff.** Skip stories only when the change renders nothing differently: types, api clients, hooks with no UI branch, tests. Deleting a page deletes its stories.
-- **Prove it with a visual diff when asked.** Before/after screenshots and "did this touch other screens" go through `sbshot-visual-diff`, which can only show what a story renders.

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

@@ -1,104 +0,0 @@
----
-name: sbshot-visual-diff
-description: Shoot Storybook stories with sbshot at two git refs and produce a diff a reviewer can read. Use when asked for a visual diff, before/after screenshots, a screenshot comparison for a PR, or to prove a change did not alter screens it should not have.
----
-
-# sbshot visual diffs
-
-`npx -y github:SigNoz/sbshot` shoots Storybook stories and pixel-diffs two runs. Use it. Do not hand-roll a Playwright screenshot loop or a canvas pixel-compare: sbshot already handles story selection, themes, settling, retries, diffing, tagging, a viewer and a static export, and its runs are the format the rest of the team can open.
-
-sbshot is not installed by any package. It is run through `npx`, so nothing it knows travels into this repo on its own. This file is where that knowledge lives.
-
-## The shape of a run
-
-```
-capture <storybook> --name-run <ref>     # once per git ref
-diff <baseline> <after>                  # pairs them by relative path
-tag <diff> <tag> <story-id>...           # what the reviewer should look at
-export <diff> --out <dir>                # a static site, hostable
-```
-
-`<storybook>` is a running dev server (`http://localhost:6006`), a build directory holding `index.json`, or a project directory with `.storybook/`. The frontend has **no `build-storybook` script**, only `storybook dev -p 6006`, so point `capture` at a dev server.
-
-## Cover the change with stories first
-
-**A diff can only show what a story renders.** A screen, state or variant with no story is invisible to sbshot: it produces no pair, so it reads as "nothing changed" rather than "never looked at". This is the failure mode that makes a clean-looking diff worthless.
-
-Before capturing, list the screens and states the change touches and check each has a story. For anything missing, write it first — the `signoz-page-story` skill covers how. New states reached only by an interaction need a `play` function, or the capture shoots the page at rest and the state never appears.
-
-Then confirm it worked: the two runs' story counts should differ by exactly the stories the change adds. A new screen that produced no new story id is a screen nobody is reviewing. Say the count in the summary, so a reader can tell coverage from silence.
-
-## Rules that are not optional
-
-**One freshly started Storybook per ref.** Never start one server and switch git branches under it. Vite's HMR reloads the page, but some modules do not re-initialise, so the shot differs silently from a clean boot and the difference looks like a real change. Settle time does not fix this and is not the variable. Use one worktree and one port per ref, and stop each server before the next.
-
-**Capture both themes: `--theme dark,light`.** Without it sbshot shoots the story's own default and everything lands in a single `default/` folder, so every regression in the other theme is invisible. Themes double the shot count, so scope with `--stories` or `--title`, never by dropping a theme.
-
-**Baseline is the merge-base, not `origin/main`.** `git merge-base origin/main <branch>`. Against a moved main, every commit main gained since the branch's base shows up reversed, as though the branch reverted it.
-
-**The percentage sorts the list, it does not tell you what matters.** A dialog that dims the page scores high for a one-line change, and a whole new form section can score low. Open the shots and say what changed on each screen. The biggest number is usually the least interesting one.
-
-**If you cannot explain a pair, assume the capture is at fault, not the code.** Open it, crop both sides and compare them before calling it noise. A pixel count and a good guess are not evidence.
-
-## Noise, and the floor that proves it
-
-The same story does not always render identically twice. Pairs often move for reasons that have nothing to do with the change:
-
-- a focus ring left on whatever a `play` function clicked last
-- a scrollbar appearing, or its thumb resting a few pixels off
-- a toast, tooltip or dialog caught mid-fade
-- a text caret blinking, or a selection highlight
-- an animation or spinner at a different frame
-- relative timestamps ("2 days ago") crossing a boundary
-- hover or active styling from where the pointer happened to rest
-- a late-loading font or image shifting a line of text
-
-Do not argue about these one at a time. **Measure them**: shoot the same commit twice and diff those two runs against each other. Anything that moves there moved for no reason, so it is noise.
-
-```
-capture <storybook> --name-run noise-a
-capture <storybook> --name-run noise-b     # same tree, its own fresh server
-diff noise-a noise-b --name-diff noise
-diff <baseline> <after> --noise noise      # marks the movers flaky
-```
-
-**The noise run has to cover the same stories as the real diff.** Do not scope it down to the few pairs that moved, however tempting that is. `--noise` marks a pair flaky when the noise diff does not show it as unchanged, so every story the noise run leaves out is marked flaky too, including the new screens the reviewer is there to look at. Shooting two narrow runs and diffing those against each other has the same problem. Either shoot the full set twice, or skip `--noise` and explain the few movers by hand.
-
-**`--noise` ignores how far a pair moved.** A pair is marked flaky when the noise diff does not show it as unchanged, so a 70-pixel flicker in the noise run hides a real 8% change in the real one. Compare the two numbers before trusting the mark. When most of the flaky marks are hiding real changes, run the diff without `--noise` and tag the genuinely noisy pairs by hand instead, so nothing real is filtered out of the reviewer's view.
-
-That is the trade: a second full capture costs about as long as the first, so on a small diff it is often quicker to crop the two or three movers and say what each one is. Use `--noise` when the diff is large, or when wiring `--fail-over` into CI, where something has to decide without a person looking.
-
-If a pair is flaky every run and the state it captures matters, fix the story rather than living with it: blur what the `play` clicked, freeze the clock, or assert the state instead of shooting it.
-
-## Making it readable for a reviewer
-
-A reviewer cannot open `localhost`, so `sbshot ui` is for you, not for them.
-
-1. `tag` the pairs that matter, with `--note` saying why. The viewer filters by tag, so the reviewer lands on the real changes instead of scrolling past noise that scored higher.
-2. `export <diff> --out <dir>`. It writes a static site carrying only the pairs that are not identical, converted to WebP, so a large diff stays small.
-3. Host it. A Claude artifact works: publish the export's files and give the reviewer the link. `index.html` is reserved for the artifact's own page, so publish sbshot's entry as `viewer.html` and link to `viewer.html#/job/diff/<diff>`.
-4. Put the link in the PR body under **Screenshots / Screen Recordings**.
-
-Say the numbers plainly: how many screens changed, how many are new, how many are pixel-identical, how many are flaky. The count of unchanged screens is often the most useful claim in the diff, because it is the one a reviewer cannot check by eye.
-
-## Operational traps
-
-- A full capture is hundreds of shots. Scope with `--title "Pages/Alerts"` or `--stories "a,b,c"` (substring match on id or Title/Name, repeatable).
-- **On macOS a capture can pin itself to one story at a time.** sbshot picks how many to shoot at once by sampling free memory, and off Linux it reads `os.freemem()`, which counts only truly free pages. macOS parks almost everything in "inactive" instead, which is reclaimable on demand, so the sampler can read ~100 MB on a 25 GB machine and shrink to one forever. `--jobs` does not help: it is only an upper cap. Check `parallelism` in `<run>/events.ndjson`; if it sits at 1 while `vm_stat` shows gigabytes inactive, that is this. A 124-shot run takes about 90 minutes pinned and about 6 minutes at four at a time, so it is worth spotting before a long capture.
-- A fresh worktree cannot build Storybook: `i18n-translations-hash.json` is gitignored and generated. Run `node ./i18-generate-hash.cjs` in `<worktree>/frontend`, and symlink `node_modules` from the main checkout.
-- `pnpm test:storybook` starts its own server on 6006 and hangs silently if something already holds that port. Free it first.
-- ImageMagick on macOS may have no default font, so `--mode green-parallel` fails with ``unable to read font `' ``. Map Helvetica to a real file in `~/.config/ImageMagick/type.xml`.
-- `sbshot link <dir> <name>` adds a run from elsewhere into the workspace, but it symlinks. Keep the source directory alive until you have exported.
-- The export directory is build output. Delete it when done, or gitignore it.
-- Running the whole Storybook test suite locally fails broadly with `page.goto: Timeout` from resource starvation. Scope it; CI is the real signal.
-
-## Done means
-
-- [ ] every screen and state the change touches has a story, written before capturing
-- [ ] one capture per ref, each from its own freshly started Storybook
-- [ ] `--theme dark,light` on every capture
-- [ ] baseline is the merge-base
-- [ ] noise either measured with a full second capture, or each mover explained by hand
-- [ ] every non-flaky pair opened and explained, not inferred from its size
-- [ ] the pairs that matter tagged, with a note
-- [ ] exported and hosted, and the link in the PR body

.claude/skills/signoz-page-story/SKILL.md

@@ -5,119 +5,54 @@ description: Explore a SigNoz page, map the endpoints, states and query params i
 
 # SigNoz page stories
 
-A page story renders the real page inside the real app shell against msw, and its controls panel can reach every state the page has. The panel is the deliverable, not the story list.
+A page story renders the real page inside the real app shell against msw, and its
+controls panel can reach every state the page has. The panel is the deliverable,
+not the story list.
 
-`frontend/src/storybook/README.md` is the API surface (providers, parameters, control builders, module mocks, navigation). Read it first; this skill is the process on top of it.
+`frontend/src/storybook/README.md` is the API surface (providers, parameters,
+control builders, module mocks, navigation). Read it first; this skill is the
+process on top of it.
 
 ## Workflow
 
-1. **Map the page**: [references/discovery.md](references/discovery.md). Produce the inventory (endpoints, states, params, permissions, caps) before writing code. No inventory, no story.
-2. **Skeleton first**: story + empty `defineStoryMocks`, then run it. The console names the endpoints step 1 missed.
+1. **Map the page**: [references/discovery.md](references/discovery.md). Produce
+   the inventory (endpoints, states, params, permissions, caps) before writing
+   code. No inventory, no story.
+2. **Skeleton first**: story + empty `defineStoryMocks`, then run it. The console
+   names the endpoints step 1 missed.
 3. **Inventory to controls**: [references/controls.md](references/controls.md).
-4. **Mock data and handlers**: builders in `__story_mockdata__`, handlers in the page's mocks module.
-5. **Verify in the browser**: [references/verify.md](references/verify.md). Never report the story as done without it.
-
-## Where it lands in the sidebar
-
-The sidebar mirrors the app's own side nav (`container/SideNav/menuItems.tsx`), so a page sits where someone would click it in the product. Four things decide that, and all four are part of writing the story, not a follow-up.
-
-**Title.** `Pages/<Area>/<Page>`, where `<Area>` is the nav section and `<Page>` is the label the nav gives it.
-
-- The leaf is the product's label, never the component's name: `MetricsExplorer` is `Metrics/Explorer`, `MeterExplorer` is `Metering/Cost Meter`, `AIAssistantPage` is `Noz`.
-- Never repeat the area in the leaf: `Alerts/Rules`, not `Alerts/AlertRules`.
-- A leaf never shares its name with a sibling folder. The folder wins and the page becomes `List`, or `Overview` for a tab strip: `Services/List` beside `Services/Detail`.
-- Title Case with spaces. No camelCase, no kebab.
-- Four levels is the floor to stay under: `Pages/Alerts/Channels/New` is as deep as it goes.
-- Pages nobody navigates to on purpose go under `Pages/System` (`Status`, `Unauthorized`, `Workspace Locked`), and the pre-session pages under `Pages/Auth`.
-- A page whose permission stories earn their own folder becomes one: `Pages/Settings/Billing/Overview` beside `Pages/Settings/Billing/Authz`. See **Permission stories** below.
-
-**Order.** The `storySort.order` literal in `.storybook/preview.tsx` carries the order for every level. A new page in an existing area is appended to that area's array, in the order the product lists it; a new area goes where the side nav puts it. Storybook parses the order out of the file statically, so it has to stay an inline literal. Missing entries fall to the end of their level rather than disappearing, so a forgotten edit is a page at the bottom of its area, not a broken sidebar.
-
-**Tags.** Declared on the meta, right under `title`, and what the sidebar's tag filter answers questions with. Only these:
-
-| Tag | When |
-| --- | --- |
-| `authz` | The page gates UI on permission checks through `lib/authz` (`AuthZButton`, `AuthZGuard`, `useAuthZ`). Both the page's file and its `Authz` file carry it. |
-| `role-gated` | The page still branches on the legacy role (`user.role`, `hasEditPermission`) and has no authz check. |
-| `beta` | `isBeta` on its nav entry. Drop the tag when the product drops the badge. |
-| `legacy` | Superseded by another page but still routed. The doc comment names the page to start from instead. |
-| `play` | The story file has a `play` function, so at least one state is reached by an interaction. |
-
-`autodocs` comes from `preview.tsx` and is never written on a meta.
-
-**Doc comment on the meta.** What the page is, in the page's own terms, then a blank line, then the route:
-
-```tsx
-const pageStory = storyMocks(logsExplorerMocks, {
-	route: explorerRoute('explorer'),
-	layout: 'app',
-});
-
-/**
- * The logs explorer: the query builder, the list, the frequency chart and the log
- * detail drawer, with quick filters and saved views beside them.
- *
- * Route: `/logs/logs-explorer`.
- */
-const meta = {
-	title: 'Pages/Logs/Explorer',
-	tags: ['play'],
-	component: LogsModulePage,
-	...pageStory,
-	parameters: { ...pageStory.parameters },
-} satisfies Meta<LogsExplorerArgs>;
-```
-
-The `pageStory` const and the trailing `parameters` line are what make the doc comment safe. The comment compiles to a `parameters` property that the csf plugin appends after the spread, so a meta that spreads `storyMocks(...)` and stops there loses `parameters.signoz` and renders the page against the global handlers alone: every one of the page's endpoints misses. Restating `parameters` as a literal gives the plugin something to merge into. `resolveStory` logs the combination that says it happened, so the console names it rather than leaving it to be found by reading the page.
-
-It is the description on the page's Docs page, which is the only place a reader who is not in the code finds out what the page is for. Two or three sentences: what it shows, what drives it, and the gating worth knowing about (`Gated on authz permissions`, `follows the legacy editor role`). A control-driven route says so instead of a path: ``Route: `/metrics-explorer/*`, the tab control picks which``.
-
-## Permission stories
-
-A page that gates UI on `lib/authz` keeps its permission states in a folder of their own, so the page's own file stays about the page and the sidebar answers "what does this permission do" in one place.
-
-**Layout.** A second story file at `stories/authz/<Page>.authz.stories.tsx`, titled `Pages/<Area>/<Page>/Authz`, which turns the page into a folder: its own file is retitled `Pages/<Area>/<Page>/Overview`, and `.storybook/preview.tsx` gains the sub-order (`'Billing', ['Overview', 'Authz']`). Both files carry the `authz` tag and share the page's one mocks module, which the authz file imports as `../<Page>.stories.mocks`. It declares no controls and no mock data of its own: a permission story that needs a new response is a control the page's mocks were missing.
-
-**One story per permission the page reads**, named for what is gone: `NoRead`, `NoList`, `NoUpdate`, `NoCreate`, `NoDelete`. Then the combinations the page itself distinguishes, and only those: `NoManage` where two permissions gate one button, `ReadOnly` where everything but reading is denied, `NoSubscriptionAccess` where none of the resource's permissions are held, and `CheckFailed` for `authzState: 'error'`, which is the page's fail-open path rather than a denial.
-
-**Revoke, never allow-list.** Each story is a full grant minus what its name says: `args: { revoked: ['read:subscription'] }`. The `Revoked` control subtracts from the preset, so the story stays "an admin missing one permission" as the catalogue grows, and the diff against the page's `Default` is the one permission. Rebuilding the allow-list by hand drifts the moment a resource is added.
-
-**Never a role preset in this folder.** `access: 'viewer'` moves the legacy role, the side nav and every other resource's permissions at the same time, so the story no longer shows what its name claims. A persona is a story on the page's own file, and only when the product has that persona.
-
-**Pair the revocation with the state that renders the gated control.** A button that only exists on a trial needs the plan too: `args: { plan: 'on-trial', revoked: ['create:subscription'] }`. A permission whose denial changes nothing on screen gets no story: say so in the PR.
-
-Check these by what is turned off, not by what the page says. The page reads the same either way, so a story that is wrong still looks right. Check that the control the permission guards is off, and that the denial message is there or gone.
-
-**Do not use `toBeEnabled` or `toBeDisabled`.** They only look at the `disabled` attribute. `@signozhq/ui` turns a button off with `aria-disabled` instead, so these matchers pass on a button nobody can click, and the test goes green while clicking straight through a denial. Check the attribute the component really sets:
-
-```ts
-expect(save).toHaveAttribute('aria-disabled', 'true');
-```
-
-**Some controls are off with no attribute at all.** The browser turns off everything inside a disabled `<fieldset>` without marking it, and a switch is a `<button>` underneath. For those, an attribute check proves nothing, and so does looking for a parent `fieldset[disabled]`. Click it and check nothing happened:
-
-```ts
-const before = toggle.getAttribute('aria-checked');
-await userEvent.click(toggle);
-await expect(toggle.getAttribute('aria-checked')).toBe(before);
-```
-
-**Check that a new assertion can fail.** Flip it once and run it. If that story goes red and nothing else does, the assertion is real; put it back. A test that cannot fail is worse than no test, because it looks like coverage.
-
-**Delete a story once its difference disappears.** Say a story checks that a button reads "View" rather than "Edit" when a permission is missing. If the label later becomes the same either way, that story passes no matter which permissions are held, including all of them, and it is testing nothing. When a behaviour stops depending on a permission, delete the story or rewrite it to lock in the new behaviour, and say which one you did in the PR.
+4. **Mock data and handlers**: builders in `__story_mockdata__`, handlers in the page's
+   mocks module.
+5. **Verify in the browser**: [references/verify.md](references/verify.md). Never
+   report the story as done without it.
 
 ## Rules
 
-- **Default is the loaded page.** `export const Default: Story = {}` with no args, every widget carrying data. Empty, loading and failed are variants or control values, never the default.
-- **A control is a knob on a response**, resolved through `handlers`, `config` or `effect`. Never a component prop, never a module mock added for one story.
-- **Every branch in the inventory is reachable from the panel.** A state that needs a code edit to see is a missing control.
-- **Never re-declare what every story already has**: banner, side nav, data state (loaded/loading/error), access preset, permissions, check state.
-- **A variant earns a story only when it is worth linking to**: an empty workspace, a viewer, a page mid-load. Everything else stays a control.
-- **Endpoints the page owns go through `response.json`**, so the Data control covers loaded, loading and failed in one declaration. Endpoints the page cannot render without (ingestion detection, preferences, feature payloads) take a plain resolver so the shell survives the loading and error states.
-- **Query-param state starts from `route`** (`/logs?tab=explorer`). In-page param navigation works inside a story; a different pathname is blocked and reported by the overlay. A control for a param is worth it only when the param is a page mode someone would want to flip.
-- **File layout**: every story file for a page lives under `src/pages/<Page>/stories/`: `<Page>.stories.tsx`, `<Page>.stories.mocks.tsx`, payload builders in `stories/__story_mockdata__/<page>.ts`. Nothing page-specific in `src/storybook/controls/`. A page that is a tab strip over several routes gets one story file per tab, in its own folder under the module page (`LogsModulePage/Pipelines/stories/Pipelines.stories.tsx`), each with its own mocks and `__story_mockdata__/`; the builders more than one tab needs stay in the module page's own `stories/__story_mockdata__/` (`AlertList/stories/__story_mockdata__/alerts.ts`), which a tab reaches as `../../stories/__story_mockdata__/alerts`. Every one of them renders the module page, so the tab strip is there, and the `route` its mocks return decides which tab is open. A page's permission stories go one level further down, in `stories/authz/<Page>.authz.stories.tsx`, on the page's own mocks: see **Permission stories**.
-- **A state only a click reaches is a story with a `play` function**, not a control: a drawer, a modal, an edit mode the page holds in component state. Drive it with `userEvent` and the queries from `storybook/test`, take the first of a repeated row action, and wait on the state's own text. The page fetches before it renders a row, so the finder needs a timeout past the 1s default. A state the app drops again on its own, such as one keyed on an array identity that a refetch replaces, does not get a story: it would not survive being looked at. A _sequence_ of such states, a wizard's steps or a questionnaire's pages, is still a control: declare the steps in the mocks module and walk them from a `play` on the meta that destructures `mount`, which is what makes Storybook replay it on an arg change. See [references/controls.md](references/controls.md).
-- **The mocks are AI-owned and say so.** `<Page>.stories.mocks.tsx` and every file under a `__story_mockdata__/` open with this banner, above the imports:
+- **Default is the loaded page.** `export const Default: Story = {}` with no args,
+  every widget carrying data. Empty, loading and failed are variants or control
+  values, never the default.
+- **A control is a knob on a response**, resolved through `handlers`, `config` or
+  `effect`. Never a component prop, never a module mock added for one story.
+- **Every branch in the inventory is reachable from the panel.** A state that
+  needs a code edit to see is a missing control.
+- **Never re-declare what every story already has**: banner, side nav, data state
+  (loaded/loading/error), access preset, permissions, check state.
+- **A variant earns a story only when it is worth linking to**: an empty
+  workspace, a viewer, a page mid-load. Everything else stays a control.
+- **Endpoints the page owns go through `response.json`**, so the Data control
+  covers loaded, loading and failed in one declaration. Endpoints the page cannot
+  render without (ingestion detection, preferences, feature payloads) take a
+  plain resolver so the shell survives the loading and error states.
+- **Query-param state starts from `route`** (`/logs?tab=explorer`). In-page param
+  navigation works inside a story; a different pathname is blocked and reported
+  by the overlay. A control for a param is worth it only when the param is a page
+  mode someone would want to flip.
+- **File layout**: every story file for a page lives under
+  `src/pages/<Page>/stories/`: `<Page>.stories.tsx`, `<Page>.stories.mocks.tsx`,
+  payload builders in `stories/__story_mockdata__/<page>.ts`. Nothing
+  page-specific in `src/storybook/controls/`.
+- **The mocks are AI-owned and say so.** `<Page>.stories.mocks.tsx` and every file
+  under a `__story_mockdata__/` open with this banner, above the imports:
 
   ```ts
   /**
@@ -126,23 +61,35 @@ await expect(toggle.getAttribute('aria-checked')).toBe(before);
    */
   ```
 
-  The root `.gitattributes` marks both paths `linguist-generated=true`, so the reviewer gets them collapsed and spends the attention on the rendered page. The story file is the human surface and never carries the banner. A file with the banner has to stay regenerable from the page alone: no page knowledge in `src/storybook/`, and builders typed from `src/api/generated` where the endpoint has types, so a contract change is a compile error instead of a mock that lies.
-
-- **Reuse fixtures** from `src/mocks-server/` and `src/tests/fixtures/` where they exist. An endpoint jest needs too belongs in `src/mocks-server/handlers.ts`.
-- **Shared response builders live in `src/storybook/msw/__story_mockdata__/`**: typed helpers like `queryRangeV5ScalarResponse` that multiple pages need. Before writing a response shape inline, check if a builder exists; if not and the shape will repeat, add it there. Page-specific builders stay in the page's `__story_mockdata__/`.
-- **The story's own doc comment is per state.** Every `export const` gets one: what that state shows, not how it is built. It renders in the States list on the page's Docs page, so `Undocumented.` there is a story nobody described.
-- **Story names come from a fixed vocabulary** where one fits: `Default`, `Viewer`, `Empty`, `Loading`, `Error`. Page-specific states get page-specific names (`NoIngestion`, `Unlicensed`), never a second spelling of one of those (`ViewerAccess`, `NonAdmin`).
-- **No comment is the default.** Write one only for what the code cannot show: a shape the backend dictates, an app bug the mock reproduces, an ordering or cap the page depends on, a workaround and the reason for it. Never restate a name, a type, or what a builder plainly builds; if the sentence reads as the signature in prose, delete it. Nothing addressed to a reviewer. The one comment a story always gets is its own doc comment: what it shows, in the page's own terms.
+  The root `.gitattributes` marks both paths `linguist-generated=true`, so the
+  reviewer gets them collapsed and spends the attention on the rendered page. The
+  story file is the human surface and never carries the banner. A file with the
+  banner has to stay regenerable from the page alone: no page knowledge in
+  `src/storybook/`, and builders typed from `src/api/generated` where the endpoint
+  has types, so a contract change is a compile error instead of a mock that lies.
+- **Reuse fixtures** from `src/mocks-server/` and `src/tests/fixtures/` where they
+  exist. An endpoint jest needs too belongs in `src/mocks-server/handlers.ts`.
+- **Shared response builders live in `src/storybook/msw/__story_mockdata__/`**: typed
+  helpers like `queryRangeV5ScalarResponse` that multiple pages need. Before
+  writing a response shape inline, check if a builder exists; if not and the
+  shape will repeat, add it there. Page-specific builders stay in the page's
+  `__story_mockdata__/`.
+- **No comment is the default.** Write one only for what the code cannot show:
+  a shape the backend dictates, an app bug the mock reproduces, an ordering or
+  cap the page depends on, a workaround and the reason for it. Never restate a
+  name, a type, or what a builder plainly builds; if the sentence reads as the
+  signature in prose, delete it. Nothing addressed to a reviewer. The one
+  comment a story always gets is its own doc comment: what it shows, in the
+  page's own terms.
 
 ## Done means
 
 - [ ] `Default` shows the page with data, checked in dark and light
-- [ ] title follows the sidebar rules, tags declared, and the page's entry added to the `storySort.order` literal in `.storybook/preview.tsx`
-- [ ] the meta carries its doc comment with the `Route:` line, the meta restates `parameters: { ...pageStory.parameters }` after the spread, and every story export carries its own doc comment
-- [ ] the page's Docs page renders: description, controls table, and one row per state with no `Undocumented.`
-- [ ] a page tagged `authz` has its `Authz` folder: one story per permission it reads, each reached by `revoked`, none of them a role preset, and each one checked by the `disabled` state of what the permission gates
 - [ ] the mocks module and every `__story_mockdata__` file carry the AI-owned banner
 - [ ] every control flipped once, its effect seen on screen
-- [ ] console clean: no `[storybook] no msw handler`, no 501, no msw unhandled request, no React warning
+- [ ] console clean: no `[storybook] no msw handler`, no 501, no msw unhandled
+      request, no React warning
 - [ ] no navigation overlay on mount
-- [ ] `pnpm tsgo --noEmit`, `pnpm exec oxlint <files>`, `pnpm exec oxfmt --check <files>` all clean. The repo has no prettier: `pnpm exec prettier` prints a pass while exiting 254
+- [ ] `pnpm tsgo --noEmit`, `pnpm exec oxlint <files>`,
+      `pnpm exec oxfmt --check <files>` all clean. The repo has no
+      prettier: `pnpm exec prettier` prints a pass while exiting 254

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

@@ -1,10 +1,13 @@
 # Turning the inventory into controls
 
-Every row of the inventory becomes a control, a global control that already exists, or a documented reason it cannot be one.
+Every row of the inventory becomes a control, a global control that already
+exists, or a documented reason it cannot be one.
 
 ## Imports
 
-Paths written as `src/storybook/...` in prose are repo paths, not import specifiers. Stories import through the `@/` alias (`@/*` → `./src/*`); modules inside `src/storybook/` import each other relatively.
+Paths written as `src/storybook/...` in prose are repo paths, not import
+specifiers. Stories import through the `@/` alias (`@/*` → `./src/*`); modules
+inside `src/storybook/` import each other relatively.
 
 | Import | From |
 | --- | --- |
@@ -28,21 +31,38 @@ Paths written as `src/storybook/...` in prose are repo paths, not import specifi
 
 Rules that come with them:
 
-- `countControl` `max` goes past what the page renders, so a story can show the cap being hit. `0` is the empty state, which is why an empty list rarely needs its own story. When the cap is in the _request_ (`?limit=5`) rather than the renderer, stop `max` at the limit: a longer response is a body the backend cannot send.
-- `choiceControl` options come from a `const` array typed with `(typeof X)[number]`, not from string literals scattered in the handlers.
-- Defaults describe the fully-populated page. The panel starts where `Default` starts.
-- `group` is `'<Page> · <facet>'`, such as `'Services · lists'` or `'Alerts · rules'`. Keep a page's knobs in two or three groups, not one per control.
-- `description` only when the name does not carry the effect (what dismissing does, what the cap is, which widget it feeds).
+- `countControl` `max` goes past what the page renders, so a story can show the
+  cap being hit. `0` is the empty state, which is why an empty list rarely needs
+  its own story. When the cap is in the *request* (`?limit=5`) rather than the
+  renderer, stop `max` at the limit: a longer response is a body the backend
+  cannot send.
+- `choiceControl` options come from a `const` array typed with
+  `(typeof X)[number]`, not from string literals scattered in the handlers.
+- Defaults describe the fully-populated page. The panel starts where `Default`
+  starts.
+- `group` is `'<Page> · <facet>'`, such as `'Services · lists'` or
+  `'Alerts · rules'`. Keep a page's knobs in two or three groups, not one per
+  control.
+- `description` only when the name does not carry the effect (what dismissing
+  does, what the cap is, which widget it feeds).
 
 ## Which hook
 
 `defineStoryMocks` takes three, all optional:
 
-- `handlers(values, response)`: the page's endpoints. Everything the page owns goes through `response.json`, so the global Data control turns the whole page into loading or failed without a second declaration. An endpoint the page cannot render at all without (ingestion detection, preferences, license payloads) takes a plain `rest.get(...)` resolver instead, so the shell stays visible while the rest hangs or fails.
-- `config(values)`: `SignozStoryConfig` for knobs no endpoint covers: `route`, `appContext`, `reduxState`, `queryBuilder`, `theme`.
+- `handlers(values, response)`: the page's endpoints. Everything the page owns
+  goes through `response.json`, so the global Data control turns the whole page
+  into loading or failed without a second declaration. An endpoint the page
+  cannot render at all without (ingestion detection, preferences, license
+  payloads) takes a plain `rest.get(...)` resolver instead, so the shell stays
+  visible while the rest hangs or fails.
+- `config(values)`: `SignozStoryConfig` for knobs no endpoint covers: `route`,
+  `appContext`, `reduxState`, `queryBuilder`, `theme`.
 - `effect(values)`: module-level state no provider exposes.
 
-One endpoint feeding several widgets stays one handler that reads the request. `response.json` hands the request to the builder and awaits it, so reading a query param, or a POST body, does not cost the Data control:
+One endpoint feeding several widgets stays one handler that reads the request.
+`response.json` hands the request to the builder and awaits it, so reading a
+query param, or a POST body, does not cost the Data control:
 
 ```ts
 rest.get(
@@ -65,11 +85,18 @@ rest.post(
 ),
 ```
 
-Reach for a plain `rest.post(url, async (req, res, ctx) => …)` only when the endpoint has to keep answering while the Data control is on `loading` or `error`: detection calls the page cannot render without.
+Reach for a plain `rest.post(url, async (req, res, ctx) => …)` only when the
+endpoint has to keep answering while the Data control is on `loading` or
+`error`: detection calls the page cannot render without.
 
 ## Mutations
 
-A control drives the response, so a write the page makes against state a control owns does not stick: the refetch answers with the control's value and the button appears to do nothing. Two honest options: leave it declarative and say so in the PR, or move the state into `effect` so the handler can read what the page wrote. Never fake the write by mutating a builder's module state without saying where the state lives.
+A control drives the response, so a write the page makes against state a control
+owns does not stick: the refetch answers with the control's value and the button
+appears to do nothing. Two honest options: leave it declarative and say so in
+the PR, or move the state into `effect` so the handler can read what the page
+wrote. Never fake the write by mutating a builder's module state without saying
+where the state lives.
 
 ## Wiring it up
 
@@ -101,80 +128,38 @@ export const servicesMocks = defineStoryMocks({
 // src/pages/Services/stories/Services.stories.tsx
 type ServicesArgs = PageStoryArgs<typeof servicesMocks>;
 
-const pageStory = storyMocks(servicesMocks, {
-	route: ROUTES.APPLICATION,
-	layout: 'app',
-});
-
-/**
- * Every instrumented service with its p99, error rate and throughput.
- *
- * Route: `/services`.
- */
 const meta = {
-	title: 'Pages/Services/List',
+	title: 'Pages/Services',
 	component: Services,
-	...pageStory,
-	parameters: { ...pageStory.parameters },
+	...storyMocks(servicesMocks, { route: ROUTES.APPLICATION, layout: 'app' }),
 } satisfies Meta<ServicesArgs>;
 ```
 
-`PageStoryArgs` folds in the global controls, so a story's `args` can set `access`, `dataState` or `banner` next to the page's own knobs and stay typed.
-
-## A step the page keeps in component state
-
-A wizard's step, a questionnaire's page, a picker's next question: the page holds it in `useState` and nothing in the URL says which one is open. It is still a control. Declare the steps in the mocks module and drive them from a `play` on the **meta**, so every story of the page inherits the walk and only sets `args`:
-
-```tsx
-// <Page>.stories.mocks.tsx
-export const SETUP_STEPS = ['pick-source', 'pick-framework', 'configure'] as const;
-export type SetupStep = (typeof SETUP_STEPS)[number];
-
-controls: {
-	step: choiceControl<SetupStep>('Setup step', { group: SETUP, options: SETUP_STEPS, value: 'pick-source' }),
-},
-```
-
-```tsx
-// <Page>.stories.tsx
-const meta = {
-	play: async ({ mount, args, canvasElement }): Promise<void> => {
-		await mount();
-		await advanceToSetupStep(canvasElement, args.step);
-	},
-	...storyMocks(pageMocks),
-} satisfies Meta<PageArgs>;
-
-export const Configure: Story = { args: { step: 'configure' } };
-```
-
-**Destructuring `mount` is what makes it a control.** Storybook re-runs a play function on an arg change only for a story whose play asks to be remounted (`usesMount`); otherwise it re-renders the tree the previous walk left behind and the panel looks broken. With `mount` destructured, the story renders when `play` calls it, and every arg change replays the walk from a fresh mount.
-
-The walk itself:
-
-- one `answer` function per step, in an array indexed the same as the step list, so reaching step _n_ is `answers.slice(0, STEPS.indexOf(step))`;
-- answer each step with the least its Next button accepts, and prefer a "do this later" over filling a slider;
-- run them sequentially (`reduce` over a promise), since each answer is what renders the step the next one reads;
-- bail out when the page did not start where the walk expects, such as a source deep-linked past the questions. Check for the first step's own text rather than reading another control's value.
-
-An endpoint that only settles the transition between two steps (the profile a questionnaire saves before its last page) takes a plain resolver, or the Data control on `loading` strands the walk halfway.
+`PageStoryArgs` folds in the global controls, so a story's `args` can set
+`access`, `dataState` or `banner` next to the page's own knobs and stay typed.
 
 ## Not a control
 
-- Anything the global controls already cover: banner, side nav, data state, access preset, granted permissions, revoked permissions, check state.
-- A knob whose effect nobody can see on the page. Delete it or find the widget it was supposed to drive.
-- A raw payload as an object control. Controls carry intent (`5 dashboards`, `viewer`), and the builder turns intent into the payload.
-- Anything that needs a module mock or a component prop to work. If the state cannot be produced from a response, config or module state, say so in the PR instead of faking it.
+- Anything the global controls already cover: banner, side nav, data state,
+  access preset, permissions, check state.
+- A knob whose effect nobody can see on the page. Delete it or find the widget it
+  was supposed to drive.
+- A raw payload as an object control. Controls carry intent (`5 dashboards`,
+  `viewer`), and the builder turns intent into the payload.
+- Anything that needs a module mock or a component prop to work. If the state
+  cannot be produced from a response, config or module state, say so in the PR
+  instead of faking it.
 
 ## Control or story
 
 Default to a control. Write a story when the state is worth a link:
 
 - the fresh workspace, because that is what a new user sees
+- the restricted user, when permissions visibly change the page
 - a page-defining mode (a tab, a category) that has its own layout
 
-A permission that visibly changes the page is a story too, but it goes in the page's `Authz` folder, one per permission, turned with the `Revoked` control. See **Permission stories** in SKILL.md.
-
 Combinations of controls do not need stories, which is what the panel is for.
 
-Each story gets one prose doc comment: what it shows, in the page's own terms. Everywhere else the comment rule in SKILL.md applies: write one only for what the code cannot show.
+Each story gets one prose doc comment: what it shows, in the page's own terms.
+Everywhere else the comment rule in SKILL.md applies: write one only for what
+the code cannot show.

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

@@ -1,10 +1,14 @@
 # Mapping a page
 
-Two passes: read the code, then let the running story correct you. Write the inventory down: it is what the controls are derived from, and the only protection against a story that renders one state and calls it a page.
+Two passes: read the code, then let the running story correct you. Write the
+inventory down: it is what the controls are derived from, and the only
+protection against a story that renders one state and calls it a page.
 
 ## Pass 1: read the page
 
-Start at `src/pages/<Page>/` and follow it outward: the containers it mounts (`src/container/<Feature>/`), the hooks those use, the components with their own fetches. Stop at leaf components that take props only.
+Start at `src/pages/<Page>/` and follow it outward: the containers it mounts
+(`src/container/<Feature>/`), the hooks those use, the components with their own
+fetches. Stop at leaf components that take props only.
 
 Grep recipes, run against the page's directories:
 
@@ -20,32 +24,41 @@ Grep recipes, run against the page's directories:
 | empty and error branches | `isLoading\|isError\|isFetching\|length === 0\|!data` |
 | render caps | `slice(0,\|PAGE_SIZE\|pageSize\|limit` |
 
-`src/constants/routes.ts` has the route, `src/constants/query.ts` the param names, `src/lib/authz/README.md` how a permission check resolves.
+`src/constants/routes.ts` has the route, `src/constants/query.ts` the param names,
+`src/lib/authz/README.md` how a permission check resolves.
 
 ## The inventory
 
 One table, in the story's PR or scratch notes:
 
-| Endpoint        | Feeds            | States it can be in    |
-| --------------- | ---------------- | ---------------------- |
+| Endpoint | Feeds | States it can be in |
+| --- | --- | --- |
 | `GET /api/v1/x` | the header count | populated, zero, error |
 
 Plus four short lists:
 
 - **Query params** the page reads, and what each one switches.
 - **Permission checks** the page makes, and what disappears when each is denied.
-- **Preferences and flags** that change layout (dismissed banners, onboarding checklists, opt-in views).
+- **Preferences and flags** that change layout (dismissed banners, onboarding
+  checklists, opt-in views).
 - **Caps**: how many rows each list renders before it truncates or paginates.
 
-A state that appears in this inventory and not in the controls panel is a bug in the story.
+A state that appears in this inventory and not in the controls panel is a bug in
+the story.
 
 ## Pass 2: let it run
 
-Write the story and an empty `defineStoryMocks({ controls: {} })`, point it at the route with `layout: 'app'`, then open it (see verify.md). The console is the oracle:
+Write the story and an empty `defineStoryMocks({ controls: {} })`, point it at the
+route with `layout: 'app'`, then open it (see verify.md). The console is the
+oracle:
 
-- `[storybook] no msw handler` or a 501 from the catch-all: an endpoint pass 1 missed. Add it to the inventory.
-- an msw unhandled-request warning: a request going to an origin the handlers do not answer on. handlers are declared against `http://localhost`.
-- a spinner that never resolves with the Data control on `loaded`: a handler whose URL does not match what the page calls.
-- the navigation overlay on mount: the page redirects, usually because `route` is wrong or a guard is failing on a permission the controls have not granted.
+- `[storybook] no msw handler` or a 501 from the catch-all: an endpoint pass 1
+  missed. Add it to the inventory.
+- an msw unhandled-request warning: a request going to an origin the handlers do
+  not answer on. handlers are declared against `http://localhost`.
+- a spinner that never resolves with the Data control on `loaded`: a handler
+  whose URL does not match what the page calls.
+- the navigation overlay on mount: the page redirects, usually because `route`
+  is wrong or a guard is failing on a permission the controls have not granted.
 
 Repeat until the console is silent. Only then start declaring controls.

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

@@ -1,6 +1,7 @@
 # Verifying a page story
 
-A story is not done because it compiles. It is done when each control has been seen changing the page and the console is silent.
+A story is not done because it compiles. It is done when each control has been
+seen changing the page and the console is silent.
 
 ## Run it
 
@@ -8,17 +9,21 @@ A story is not done because it compiles. It is done when each control has been s
 cd frontend && pnpm storybook --ci --quiet   # :6006, background it
 ```
 
-A newly added `.stories.tsx` takes a few seconds to appear in `index.json` on an already-running server; an empty first poll is not a broken `stories` glob.
+A newly added `.stories.tsx` takes a few seconds to appear in `index.json` on an
+already-running server; an empty first poll is not a broken `stories` glob.
 
-Story ids come from the meta title: `Pages/Services/List` → `pages-services-list`, plus the story export in kebab-case. Render one story on its own:
+Story ids come from the meta title: `Pages/Services` → `pages-services`, plus the
+story export in kebab-case. Render one story on its own:
 
 ```
-http://localhost:6006/iframe.html?id=pages-services-list--default&viewMode=story
+http://localhost:6006/iframe.html?id=pages-services--default&viewMode=story
 ```
 
 ## Flip controls from the URL
 
-Args are settable in the iframe URL, so a whole sweep runs headless without touching the panel. Booleans go as `!true` / `!false`, numbers bare, arrays indexed, several separated by `;`, and the theme through `globals`:
+Args are settable in the iframe URL, so a whole sweep runs headless without
+touching the panel. Booleans go as `!true` / `!false`, numbers bare, arrays
+indexed, several separated by `;`, and the theme through `globals`:
 
 ```
 &args=services:0;apdex:poor;access:viewer;dataState:loading
@@ -26,11 +31,13 @@ Args are settable in the iframe URL, so a whole sweep runs headless without touc
 &globals=theme:light
 ```
 
-That is the cheap way to check a control does something: load with and without it, diff the page text.
+That is the cheap way to check a control does something: load with and without
+it, diff the page text.
 
 ## Drive it
 
-Playwright lives in the repo's e2e workspace, so a scratch script can use it directly:
+Playwright lives in the repo's e2e workspace, so a scratch script can use it
+directly:
 
 ```js
 import pw from '<repo>/tests/e2e/node_modules/playwright/index.js';
@@ -50,18 +57,34 @@ console.log((await page.locator('body').innerText()).slice(0, 1500), problems);
 await browser.close();
 ```
 
-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`.
-
-That is one run, for checking the story you just wrote. Comparing two branches is a different job: see the `sbshot-visual-diff` skill, which covers the baseline to pick, measuring the noise and exporting something a reviewer can open.
+Screenshots are worth taking for `Default` in both themes
+(`&globals=theme:light`): text extraction does not catch an unstyled page.
 
 ## Gates
 
-- **Console silent.** `[storybook] no msw handler`, a 501 from the catch-all, an msw unhandled-request warning, a React key or state warning: assume the story is wrong first. A warning that survives is sometimes the app's. Prove it by turning off the control that renders the widget and watching the warning go with it, and by finding the same component elsewhere doing it right. Then report the app bug in the PR. Never invent a field the API does not return to silence a warning.
-- **No navigation overlay on mount.** "Navigation blocked in Storybook" on load means the page is trying to leave: wrong `route`, or a guard denying on a permission the controls did not grant.
-- **Every control moves something.** Sweep them one at a time from the URL and diff the page text. A control with no diff is either wired to nothing or aimed at a widget that is not rendering. Some only show their effect after an interaction, such as a tab that has to be clicked or a select that has to be opened. Drive that interaction rather than calling the control unobservable.
-- **Both themes render styled.** An unstyled page means the story is not inside the provider decorator, or `<body data-theme>` was lost.
-- **Roles agree.** `<body data-signoz-story-role>` and `<body data-signoz-context-role>` disagreeing means the page reads a different `AppContext` than the story config fills.
-- **The page's own navigation works.** Tabs, filters and pagination that write query params should re-render the page in place; only leaving the page belongs in the overlay.
+- **Console silent.** `[storybook] no msw handler`, a 501 from the catch-all, an
+  msw unhandled-request warning, a React key or state warning: assume the story
+  is wrong first. A warning that survives is sometimes the app's. Prove it by
+  turning off the control that renders the widget and watching the warning go
+  with it, and by finding the same component elsewhere doing it right. Then
+  report the app bug in the PR. Never invent a field the API does not return to
+  silence a warning.
+- **No navigation overlay on mount.** "Navigation blocked in Storybook" on load
+  means the page is trying to leave: wrong `route`, or a guard denying on a
+  permission the controls did not grant.
+- **Every control moves something.** Sweep them one at a time from the URL and
+  diff the page text. A control with no diff is either wired to nothing or aimed
+  at a widget that is not rendering. Some only show their effect after an
+  interaction, such as a tab that has to be clicked or a select that has to be
+  opened. Drive that interaction rather than calling the control unobservable.
+- **Both themes render styled.** An unstyled page means the story is not inside
+  the provider decorator, or `<body data-theme>` was lost.
+- **Roles agree.** `<body data-signoz-story-role>` and
+  `<body data-signoz-context-role>` disagreeing means the page reads a different
+  `AppContext` than the story config fills.
+- **The page's own navigation works.** Tabs, filters and pagination that write
+  query params should re-render the page in place; only leaving the page belongs
+  in the overlay.
 
 ## Then the usual
 
@@ -71,7 +94,9 @@ pnpm exec oxlint <changed files>
 pnpm exec oxfmt --check <changed files>
 ```
 
-There is no prettier in this repo. `pnpm exec prettier --check` fetches something else, prints `Prettier: All files formatted correctly` and exits 254: a pass that is not one.
+There is no prettier in this repo. `pnpm exec prettier --check` fetches something
+else, prints `Prettier: All files formatted correctly` and exits 254: a pass that is
+not one.
 
 ## Common failures
 

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

@@ -0,0 +1,294 @@
+---
+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,4 +1,3 @@
 *.css linguist-detectable=false
 *.stories.mocks.tsx linguist-generated=true
 **/__story_mockdata__/** linguist-generated=true
-tests/e2e/drivers/** linguist-generated=true

.github/CODEOWNERS

@@ -200,22 +200,13 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
-/frontend/src/container/RoutingPolicies/ @SigNoz/pulse-frontend
-/frontend/src/components/AlertBreadcrumb/ @SigNoz/pulse-frontend
-/frontend/src/container/EditRules/ @SigNoz/pulse-frontend
-/frontend/src/components/AlertDetailsFilters/ @SigNoz/pulse-frontend
-/frontend/src/components/Alerts/ @SigNoz/pulse-frontend
-/frontend/src/hooks/routingPolicies/ @SigNoz/pulse-frontend
-/frontend/src/types/api/alerts/ @SigNoz/pulse-frontend
-/frontend/src/providers/Alert.tsx @SigNoz/pulse-frontend
-/frontend/src/constants/alerts.ts @SigNoz/pulse-frontend
 
 ## Notification Channels
 /frontend/src/pages/ChannelsEdit/ @SigNoz/pulse-frontend
 /frontend/src/pages/ChannelsNew/ @SigNoz/pulse-frontend
+/frontend/src/container/AllAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/CreateAlertChannels/ @SigNoz/pulse-frontend
-/frontend/src/container/FormAlertChannels/ @SigNoz/pulse-frontend
-/frontend/src/hooks/notificationChannels/ @SigNoz/pulse-frontend
+/frontend/src/container/EditAlertChannels/ @SigNoz/pulse-frontend
 
 ## OpenAPI Schema - Generated
 /frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv
@@ -289,8 +280,3 @@ go.mod @therealpandey
 /frontend/src/components/MessagingQueues/ @SigNoz/events-frontend
 /frontend/src/components/MessagingQueueHealthCheck/ @SigNoz/events-frontend
 /frontend/src/hooks/messagingQueue/ @SigNoz/events-frontend
-
-## Storybook
-/frontend/.storybook/ @H4ad
-/frontend/src/storybook/ @H4ad
-/.claude/skills/signoz-page-story/ @H4ad

.github/workflows/e2eci.yaml

@@ -2,37 +2,17 @@ name: e2eci
 
 on:
   pull_request:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+    types:
+      - labeled
+  pull_request_target:
+    types:
+      - labeled
 
 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:
-    needs: changes
-    if: needs.changes.outputs.e2e == 'true'
+    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')
     runs-on: ubuntu-latest
     steps:
       - name: checkout
@@ -60,41 +40,20 @@ jobs:
       matrix:
         project:
           - chromium
-        shard: [1, 2, 3, 4]
-    needs: changes
-    if: needs.changes.outputs.e2e == 'true'
+    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')
     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:
@@ -103,9 +62,19 @@ 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
@@ -130,19 +99,6 @@ 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 && \
@@ -150,12 +106,10 @@ 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 }} --shard=${{ matrix.shard }}/4
+            pnpm playwright test --project=${{ matrix.project }}
       - name: teardown-stack
         if: always()
         run: |
@@ -168,17 +122,6 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: playwright-artifacts-${{ matrix.project }}-${{ matrix.shard }}
+          name: playwright-artifacts-${{ matrix.project }}
           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/goci.yaml

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

.github/workflows/integrationci.yaml

@@ -38,6 +38,7 @@ jobs:
       fail-fast: false
       matrix:
         suite:
+          - alerts
           - alertmanager
           - alertmanagerrotation
           - basepath
@@ -46,7 +47,6 @@ jobs:
           - dashboard
           - ingestionkeys
           - inframonitoring
-          - llmpricingrules
           - logspipelines
           - passwordauthn
           - preference
@@ -60,22 +60,18 @@ jobs:
           - rawexportdata
           - promqlconformance
           - promapiconformance
-          - promote
           - querierauthz
           - role
           - rootuser
-          - ruler
           - savedview
           - semconvfamilies
           - serviceaccount
           - spanmapper
-          - tracedetail
           - querier_json_body
           - querier_skip_resource_fingerprint
           - ttl
           - clickhousecluster
           - metricreduction
-          - metricsexplorer
         sqlstore-provider:
           - postgres
           - sqlite

.gitignore

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

.golangci.yml

@@ -41,6 +41,7 @@ linters:
       no-global: all
       context: all
       static-msg: true
+      key-naming-case: snake
   exclusions:
     generated: lax
     presets:

Makefile

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

cmd/authz.go

@@ -93,19 +93,17 @@ func runGenerateAuthz(_ context.Context) error {
 	registry := coretypes.NewRegistry()
 
 	allowedResources := map[string]bool{
-		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                  true,
-		coretypes.NewResourceRef(coretypes.ResourceRole).String():                            true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():        true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceDashboard).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():             true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSubscription).String():        true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():         true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():        true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String():   true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceQuickFilter).String():         true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSavedView).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceNotificationChannel).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceDashboard).String():         true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():           true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSubscription).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceQuickFilter).String():       true,
 	}
 
 	allowedTypes := map[string]bool{}

docs/contributing/go/authz.md

@@ -43,25 +43,6 @@ type Resource interface {
 
 All resources are registered in [pkg/types/coretypes/registry_resource.go](/pkg/types/coretypes/registry_resource.go) using constructors like `NewResourceMetaResource(KindDashboard)` or `NewResourceTelemetryResource(KindLogs)`.
 
-### Telemetry resources and metaresources
-
-Almost every feature resource is one of these two types, and they answer different questions.
-
-- A **telemetry resource** (`logs`, `traces`, `metrics`, `meter-metrics`, `audit-logs`) is the data itself. It only supports `read`. Its selector is not an ID but the query: the route wires a `TelemetryResourceDef` whose extractor turns the caller's filter into `<query_type>/<key>/<value>` IDs, and the check ladders each one through `<query_type>/<key>/*`, `<query_type>/*` and `*`. A grant such as `builder_query/signoz.workspace.key.id/key-a` therefore decides which rows a role may read; a query that does not pin a granted key resolves to `<query_type>/*` and is denied for key-scoped roles. Managed roles hold `*`.
-- A **metaresource** (`dashboard`, `rule`, `logs-field`, ...) is an object that describes or configures the system. It supports whichever of `create`, `read`, `update`, `delete` and `list` the resource declares, its selectors are object IDs or `*`, and routes wire a `BasicResourceDef`. It says nothing about rows: `dashboard:read` on `*` does not grant the telemetry a dashboard's panels query.
-
-The metrics explorer uses both on one surface:
-
-| Route | Resource | Why |
-|---|---|---|
-| `POST /api/v2/metrics/stats` | `metrics:read` (telemetry) | Returns sample and series counts, i.e. the data. The selector comes from `filter.expression`, so a role scoped to a workspace key sees only its own samples. |
-| `GET /api/v2/metrics` | `metrics-field:list` (meta) | Lists metric names, types and units: the catalogue, not the samples. |
-| `POST /api/v2/metrics/metadata` | `metrics-field:update` (meta) | Edits a metric's type, unit and description. |
-
-The two are independent: a role holding `metrics-field` `list` and `read` can browse the catalogue but cannot read a sample, and a role scoped to `builder_query/signoz.workspace.key.id/key-a` on `metrics` can query its samples but cannot list the catalogue.
-
-For a new route, ask what it returns. Rows or aggregates over them go on the signal's telemetry resource with an extractor; anything that names, describes or configures telemetry goes on a metaresource.
-
 ### Selector
 
 A `Selector` identifies *which* instance(s) of a resource a check is about — a UUID, a role name, or the wildcard `*`. A `SelectorFunc` maps the extracted resource ID to selectors at request time. Two prebuilt ones cover most routes ([pkg/types/coretypes/selector.go](/pkg/types/coretypes/selector.go)):
@@ -140,7 +121,7 @@ The pieces:
 - **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
 - **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
 
-For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). When a side's ids come from a list extractor (`BodyJSONArray` or a custom `ResourceIDsExtractor`) and that list resolves to nothing at request time, there is nothing to link: the def resolves to no resources, so no check runs and no audit event is emitted (e.g. inviting a user with an empty `userRoles`). A single-id side (`OneID`) always resolves to exactly one id and fails closed when it is empty. For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
 
 Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
 
@@ -161,7 +142,6 @@ Because both paths go through the same middleware and the same `ResourceDef` dec
 ## What should I remember?
 
 - Declare authz in the registries ([pkg/types/coretypes](/pkg/types/coretypes)), not in migrations — tuples for new organizations are derived from code at bootstrap.
-- Telemetry resources are the data: `read` only, selector derived from the query. Metaresources are objects about the data: CRUD and list, ID or wildcard selectors. A route that returns rows or aggregates is telemetry; one that names or configures them is meta, as `metrics` versus `metrics-field` shows.
 - A new kind never needs an OpenFGA schema change; only a new type does, and then **both** [pkg/authz/openfgaschema/base.fga](/pkg/authz/openfgaschema/base.fga) and [ee/authz/openfgaschema/base.fga](/ee/authz/openfgaschema/base.fga) must be updated together.
 - Prefer `CheckResources` + `ResourceDef` over the coarse `ViewAccess`/`EditAccess`/`AdminAccess` gates for new routes.
 - Use `WildcardSelector` for `create`/`list`, `IDSelector` for instance operations, and a custom `SelectorFunc` when the request ID is not the FGA selector.

docs/contributing/go/handler.md

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

docs/contributing/go/readme.md

@@ -20,7 +20,6 @@ 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

@@ -1,62 +0,0 @@
-# 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/query-range.md

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

docs/contributing/tests/e2e.md

@@ -86,9 +86,6 @@ tests/
     ├── .env.local             # generated by bootstrap/setup.py (gitignored)
     ├── bootstrap/
     │   └── setup.py           # test_setup / test_teardown — pytest lifecycle
-    ├── drivers/               # the driver kit and one driver per feature
-    │   ├── kit.ts
-    │   └── routing.ts
     ├── fixtures/              # Playwright test fixtures (test.extend) only
     │   └── auth.ts
     ├── helpers/               # function helpers + the constants they share with tests
@@ -115,24 +112,6 @@ These two folders look similar but mean different things:
 
 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/`.
 
-### Drivers
-
-New suites use a driver rather than loose helpers. A driver is a function that closes over the page and returns the feature's actions and locators. `drivers/kit.ts` turns it into a fixture, so a spec imports one module and never passes a `page` around:
-
-```ts
-import { expect, PATH, test } from '../../drivers/routing';
-
-test('TC-09 RouteTab switches the url', async ({ routing }) => {
-	await routing.goto(PATH.metricsSummary);
-	await expect(routing.activeRouteTab(PATH.metricsSummary)).toBeVisible();
-});
-```
-
-- `driver(name, build)` adds a test-scoped fixture built on `authedPage`.
-- `seeded(name, open, close)` adds a worker-scoped seed. `open` and `close` run on a throwaway admin page.
-- A driver reuses helpers by calling them, never by reaching for another fixture.
-- `drivers/` is AI-owned: coding agents generate and maintain it with the specs, and `.gitattributes` collapses it in diffs.
-
 ### 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>/`.

ee/modules/cloudintegration/implcloudintegration/module.go

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

ee/modules/dashboard/impldashboard/module.go

@@ -52,7 +52,7 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.GetV2(ctx, orgID, publicDashboard.DashboardID)
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
 	if err != nil {
 		return err
 	}
@@ -90,6 +90,15 @@ func (module *module) GetPublic(ctx context.Context, orgID valuer.UUID, dashboar
 	return dashboardtypes.NewPublicDashboardFromStorablePublicDashboard(storablePublicDashboard), nil
 }
 
+func (module *module) GetDashboardByPublicID(ctx context.Context, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
+	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
+	if err != nil {
+		return nil, err
+	}
+
+	return dashboardtypes.NewDashboardFromStorableDashboard(storableDashboard), nil
+}
+
 func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
 	orgIDs := make([]string, len(orgs))
 	for idx, org := range orgs {
@@ -107,6 +116,24 @@ func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id
 	}, storableDashboard.OrgID, nil
 }
 
+func (module *module) GetPublicWidgetQueryRange(ctx context.Context, id valuer.UUID, widgetIdx, startTime, endTime uint64) (*querybuildertypesv5.QueryRangeResponse, error) {
+	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
+		instrumentationtypes.CodeNamespace:    "dashboard",
+		instrumentationtypes.CodeFunctionName: "GetPublicWidgetQueryRange",
+	})
+	dashboard, err := module.GetDashboardByPublicID(ctx, id)
+	if err != nil {
+		return nil, err
+	}
+
+	query, err := dashboard.GetWidgetQuery(startTime, endTime, widgetIdx, module.settings.Logger())
+	if err != nil {
+		return nil, err
+	}
+
+	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
+}
+
 func (module *module) GetDashboardByPublicIDV2(ctx context.Context, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
 	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
 	if err != nil {
@@ -162,7 +189,7 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.GetV2(ctx, orgID, publicDashboard.DashboardID)
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
 	if err != nil {
 		return err
 	}
@@ -173,13 +200,34 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 	return module.store.UpdatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard))
 }
 
+func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	dashboard, err := module.Get(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+
+	if err := dashboard.ErrIfNotDeletable(); err != nil {
+		return err
+	}
+
+	if dashboard.Locked {
+		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
+	}
+
+	return module.delete(ctx, orgID, id)
+}
+
+func (module *module) DeleteUnsafe(ctx context.Context, orgID, id valuer.UUID) error {
+	return module.delete(ctx, orgID, id)
+}
+
 func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashboardID valuer.UUID) error {
 	_, err := module.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.GetV2(ctx, orgID, dashboardID)
+	dashboard, err := module.Get(ctx, orgID, dashboardID)
 	if err != nil {
 		return err
 	}
@@ -212,6 +260,10 @@ func (module *module) Collect(ctx context.Context, orgID valuer.UUID) (map[strin
 	return stats, nil
 }
 
+func (module *module) Create(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, data dashboardtypes.PostableDashboard) (*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.Create(ctx, orgID, createdBy, creator, source, data)
+}
+
 func (module *module) CreateV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, postable dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.CreateV2(ctx, orgID, createdBy, creator, source, postable)
 }
@@ -294,10 +346,30 @@ func (module *module) DeleteView(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.DeleteView(ctx, orgID, id)
 }
 
+func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.Get(ctx, orgID, id)
+}
+
+func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
+	return module.pkgDashboardModule.GetByMetricNames(ctx, orgID, metricNames)
+}
+
 func (module *module) GetByMetricNamesV2(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
 	return module.pkgDashboardModule.GetByMetricNamesV2(ctx, orgID, metricNames)
 }
 
+func (module *module) List(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.List(ctx, orgID)
+}
+
+func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, data dashboardtypes.UpdatableDashboard, diff int) (*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.Update(ctx, orgID, id, updatedBy, data, diff)
+}
+
+func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
+}
+
 func (module *module) ReconcileSystemDashboards(ctx context.Context, orgID valuer.UUID) error {
 	return module.pkgDashboardModule.ReconcileSystemDashboards(ctx, orgID)
 }
@@ -305,3 +377,12 @@ func (module *module) ReconcileSystemDashboards(ctx context.Context, orgID value
 func (module *module) GetSystemDashboard(ctx context.Context, orgID valuer.UUID, name string) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.GetSystemDashboard(ctx, orgID, name)
 }
+
+func (module *module) delete(ctx context.Context, orgID, id valuer.UUID) error {
+	return module.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := module.store.DeletePublic(ctx, id.String()); err != nil && !errors.Ast(err, errors.TypeNotFound) {
+			return err
+		}
+		return module.store.Delete(ctx, orgID, id)
+	})
+}

ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go

@@ -116,7 +116,7 @@ func (c *clickhouse) EstimateCardinality(ctx context.Context, metricName string,
 
 	sb := sqlbuilder.NewSelectBuilder()
 
-	reducedExpr := "toUInt64(1)"
+	reducedExpr := "1"
 	if len(keptLabels) > 0 {
 		reducedExpr = "uniq(("
 		for i, label := range keptLabels {

ee/modules/metricreductionrule/implmetricreductionrule/module.go

@@ -462,7 +462,7 @@ func (m *module) relatedAssetImpact(ctx context.Context, orgID valuer.UUID, metr
 		droppedSet[label] = struct{}{}
 	}
 
-	if dashboards, err := m.dashboard.GetByMetricNamesV2(ctx, orgID, []string{metricName}); err != nil {
+	if dashboards, err := m.dashboard.GetByMetricNames(ctx, orgID, []string{metricName}); err != nil {
 		m.logger.WarnContext(ctx, "failed to fetch related dashboards for reduction preview", slog.String("metric_name", metricName), errors.Attr(err))
 	} else {
 		for _, item := range dashboards[metricName] {

ee/query-service/app/api/featureFlags.go

@@ -80,6 +80,15 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
+	aiObservability := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableAIObservability, evalCtx)
+	featureSet = append(featureSet, &licensetypes.Feature{
+		Name:       valuer.NewString(flagger.FeatureEnableAIObservability.String()),
+		Active:     aiObservability,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	})
+
 	metricsReduction := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableMetricsReduction, evalCtx)
 	featureSet = append(featureSet, &licensetypes.Feature{
 		Name:       valuer.NewString(flagger.FeatureEnableMetricsReduction.String()),

ee/query-service/rules/anomaly.go

@@ -277,7 +277,10 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		lb.Set(ruletypes.AlertRuleIDLabel, r.ID())
 		lb.Set(ruletypes.RuleSourceLabel, r.GeneratorURL())
 
-		annotations := r.ExpandAnnotations(expand)
+		annotations := make(ruletypes.Labels, 0, len(r.Annotations().Map()))
+		for name, value := range r.Annotations().Map() {
+			annotations = append(annotations, ruletypes.Label{Name: name, Value: expand(value)})
+		}
 		if smpl.IsMissing {
 			lb.Set(ruletypes.AlertNameLabel, "[No data] "+r.Name())
 			lb.Set(ruletypes.NoDataLabel, "true")
@@ -420,7 +423,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 func (r *AnomalyRule) String() string {
 
 	ar := ruletypes.PostableRule{
-		AlertName:         valuer.NewDisplayName(r.Name()),
+		AlertName:         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: valuer.NewDisplayName("Test anomaly no data"),
+		AlertName: "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: valuer.NewDisplayName("Test anomaly no data with AbsentFor"),
+		AlertName: "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,7 +13,6 @@ 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) {
@@ -119,7 +118,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 	}
 
 	parsedRule := opts.Rule
-	var alertname = parsedRule.AlertName.StringValue()
+	var alertname = parsedRule.AlertName
 	if alertname == "" {
 		// alertname is not mandatory for testing, so picking
 		// a random string here
@@ -127,7 +126,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 	}
 
 	// append name to indicate this is test alert
-	parsedRule.AlertName = valuer.NewDisplayName(fmt.Sprintf("%s%s", alertname, ruletypes.TestAlertPostFix))
+	parsedRule.AlertName = fmt.Sprintf("%s%s", alertname, ruletypes.TestAlertPostFix)
 
 	var rule baserules.Rule
 	var err error

ee/sqlstore/postgressqlstore/formatter.go

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

ee/sqlstore/postgressqlstore/formatter_test.go

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

frontend/.claude/skills/scaffold-feature/SKILL.md

@@ -1,127 +0,0 @@
----
-name: scaffold-feature
-description: Scaffold the co-located feature structure in frontend/src. Use when creating a new page, feature, view (tab), or component folder, when a feature needs a shell with tabs, or when moving existing code out of src/container into src/pages. Generates the full folder tree (components/hooks/store/types/utils/constants/__tests__/README) and registers the page's routes with one command.
----
-
-# Scaffold a feature
-
-The frontend is moving to a co-located layout (Bulletproof React / FSD): everything a
-feature owns lives in the feature's folder. Read `references/layout.md` for the full
-target structure and the rules about what may live where.
-
-**Never hand-create these folders.** Run the generator so every feature comes out
-identical, then fill it in.
-
-## Command
-
-```bash
-pnpm scaffold page <Name> [options]        # a page/feature under src/pages
-pnpm scaffold component <Name> [options]   # a component folder
-```
-
-| Option | Applies to | Effect |
-| --- | --- | --- |
-| `--views A,B,C` | `page` | Makes the page a shell with tab switching and generates one view folder per name. |
-| `--parent <path>` | `component` | Parent, relative to `src` (default `components`). A feature path like `pages/Traces/Explorer` nests the component under that feature's `components/`. |
-| `--full` | `component` | Also adds `components/`, `hooks/`, `store/`, `types.ts`, `utils.ts`, `constants.ts`, `README.md` for a component that owns children. |
-| `--no-tests` | both | Skips `__tests__/`. |
-| `--dry-run` | both | Prints what would be written, writes nothing. |
-| `--force` | both | Overwrites files that already exist (off by default; existing entries are reported as skipped). |
-
-Folder names keep the casing you type, with the first letter forced up, so
-`LLMObservability` stays `LLMObservability` rather than being re-cased. Separated names
-collapse to PascalCase: `api-monitoring` and `api monitoring` both give
-`pages/ApiMonitoring`. Test ids, headings, tab paths and constants are all derived from
-that folder name — `TracesFunnels` gives `traces-funnels-page`, `Traces Funnels` and
-`TRACES_FUNNELS_TABS`.
-
-## What you get
-
-```
-pages/ApiMonitoring/
-  index.tsx                       # the page component
-  ApiMonitoring.module.scss
-  components/  hooks/  store/     # empty, ready for the first file
-  types.ts  utils.ts  constants.ts
-  __tests__/ApiMonitoring.test.tsx
-  README.md
-```
-
-With `--views`, the root becomes a `RouteTab` shell and each view gets the tree above. The
-shell mirrors the Logs and Traces root pages: `constants.tsx` exports one `TabRoutes` per
-view (icon from `@signozhq/icons`, label, `ROUTES` key, view component), `index.tsx` composes
-them into the tab bar, the SCSS module carries the tab-bar overrides, and the test asserts one
-tab per view plus the active view. Tab icons come from a small name map in `scaffold.mjs`
-(`Explorer`, `Funnels`, `Pipelines`, `Views`, `SavedViews`); other names get a neutral icon
-to replace.
-
-## Examples
-
-```bash
-pnpm scaffold page ApiMonitoring                                    # leaf page, no shell
-pnpm scaffold page Traces --views Explorer,Funnels,Views            # shell + 3 views
-pnpm scaffold page Traces/Explorer                                  # one more view under an existing shell
-pnpm scaffold component DataTable                                   # global, src/components/DataTable
-pnpm scaffold component QueryBar --parent pages/Traces/Explorer     # feature-local component
-```
-
-## Route registration
-
-`page` also registers the routes, so the page is reachable as soon as it is generated:
-
-| File | What is added |
-| --- | --- |
-| `src/constants/routes.ts` | One key per path: `API_MONITORING: '/api-monitoring'` for a leaf page; `TRACES_BASE` plus `TRACES_EXPLORER`, `TRACES_FUNNELS`, … for a shell. |
-| `src/utils/permission/index.ts` | A `routePermission` entry per new key, open to `ADMIN`, `EDITOR` and `VIEWER`. Tighten it if the page is admin-only. |
-| `src/AppRoutes/pageComponents.ts` | A `Loadable` export named `<Page>Page` pointing at `pages/<Page>`. |
-| `src/AppRoutes/routes.ts` | The import plus one private, exact route per path. For a shell the base path and every tab path render the shell; the shell redirects the base path to its first tab and `RouteTab` picks the tab otherwise. |
-| `src/container/TopNav/DateTimeSelectionV2/constants.ts` | Every new path in `routesToSkip`, so the global time-range picker stays hidden until the page opts in. |
-
-Existing keys, exports and entries are left alone, so re-running is safe. An existing key or
-export that points somewhere else is a naming collision and the run stops before writing
-anything. `--dry-run` lists
-the edits without making them. `page Traces/Explorer` registers `TRACES_EXPLORER` pointing
-at the `Traces` shell; wiring the new tab into the shell's `constants.tsx` and `index.tsx`
-is still by hand. The generator never adds a SideNav item; do that in
-`src/container/SideNav/menuItems.tsx` when the page needs one.
-
-## After generating
-
-1. **Review the route registration** (pages only) and add the SideNav entry if the page
-   needs one. For a view added under an existing shell, add its `TabRoutes` export to the
-   shell's `constants.tsx` and include it in the `routes` array in the shell's `index.tsx`.
-2. **Delete the placeholders you don't need** — empty `types.ts` / `utils.ts` /
-   `constants.ts`, and any of `components/`, `hooks/`, `store/` the feature won't use.
-   Those three folders are created empty; git only picks them up once they hold a file.
-3. **Fill the README** — the generated file has the prompts; a feature folder without a
-   filled-in README is not done.
-4. **Follow the repo rules while filling it in**: `@signozhq/ui` + `@signozhq/icons` only,
-   CSS Modules (`docs/css-modules-guide.md`), React Query for server state (prefer
-   `api/generated` hooks), nuqs for URL state, Zustand for client state, `data-testid` on
-   every interactive element.
-5. **Verify** before reporting done:
-   ```bash
-   pnpm tsgo --noEmit
-   pnpm oxlint src/pages/<Feature>
-   pnpm jest src/pages/<Feature>
-   ```
-   `pnpm tsgo --noEmit` is the authority. A running dev server can show errors such as
-   `Property 'X_BASE' does not exist` or `has no exported member 'XPage'` right after
-   generation. Its type-checker notices new files but, on some machines, not in-place edits
-   to existing ones, and the generator edits the shared files in place. If tsgo is clean,
-   restart `pnpm dev`.
-
-## Editing the templates
-
-Templates live in `templates/` — `feature/`, `shell/`, `component/` and
-`component-extras/` (the `--full` additions). Every template file ends in `.tmpl`, which
-keeps TypeScript, lint and your editor from reading them as source; the generator strips
-that suffix on the way out, so `index.tsx.tmpl` becomes `index.tsx`. Tokens are
-substituted in both file names and contents: `__Pascal__`, `__kebab__`, `__camel__`,
-`__CONST__`, `__Title__`. The shell templates additionally take tokens the generator builds
-from `--views`: `__ICON_IMPORTS__`, `__VIEW_IMPORTS__`, `__TAB_EXPORTS__`, `__TAB_NAMES__`,
-`__BASE_ROUTE__`, `__FIRST_TAB__`, `__FIRST_VIEW_TESTID__` and `__TAB_ASSERTIONS__`. Tab icons come from
-`TAB_ICONS` and the empty folders from `FEATURE_DIRS`, both in `scaffold.mjs`. Name and
-route derivations live in `lib.mjs`; run `node --test .claude/skills/scaffold-feature/scaffold.test.mjs`
-after changing them. Change these, not the generated
-output, when the team's conventions move.

frontend/.claude/skills/scaffold-feature/lib.mjs

@@ -1,77 +0,0 @@
-const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
-
-// Folder names keep the casing the author typed — only the first letter is forced
-// up — so acronyms like `LLMObservability` survive. Separated names
-// (`api-monitoring`, `api monitoring`) collapse to PascalCase.
-export function toDirName(value) {
-	const name = value.trim().replace(/[^a-zA-Z0-9\-_ ]/g, '');
-	if (!name) {
-		throw new Error(`"${value}" has no usable name characters`);
-	}
-	return /[-_\s]/.test(name)
-		? name
-				.split(/[-_\s]+/)
-				.filter(Boolean)
-				.map(capitalize)
-				.join('')
-		: capitalize(name);
-}
-
-const splitHumps = (name, separator) =>
-	name
-		.replace(/([a-z0-9])([A-Z])/g, `$1${separator}$2`)
-		.replace(/([A-Z]+)([A-Z][a-z])/g, `$1${separator}$2`);
-
-export const toKebab = (value) => splitHumps(toDirName(value), '-').toLowerCase();
-export const toTitle = (value) => splitHumps(toDirName(value), ' ');
-export const toConst = (value) => toKebab(value).replace(/-/g, '_').toUpperCase();
-export const toCamel = (value) => {
-	const dir = toDirName(value);
-	return dir.charAt(0).toLowerCase() + dir.slice(1);
-};
-
-export function tokensFor(name) {
-	return {
-		__Pascal__: toDirName(name),
-		__kebab__: toKebab(name),
-		__camel__: toCamel(name),
-		__CONST__: toConst(name),
-		__Title__: toTitle(name),
-	};
-}
-
-export function substitute(text, tokens) {
-	return Object.entries(tokens).reduce(
-		(acc, [token, value]) => acc.split(token).join(value),
-		text,
-	);
-}
-
-export const routeKey = (segments, view) =>
-	[...segments, ...(view ? [view] : [])].map(toConst).join('_');
-export const routePath = (segments, view) =>
-	`/${[...segments, ...(view ? [view] : [])].map(toKebab).join('/')}`;
-
-// Every path under a shell renders the shell itself (RouteTab picks the tab, the base path
-// redirects to the first tab), so the page component is always the first segment.
-export function routeSpec(segments, views) {
-	const shell = segments[0];
-	const component = {
-		name: `${shell}Page`,
-		importPath: `pages/${shell}`,
-		chunk: `${toTitle(shell)} Page`,
-	};
-	if (views.length) {
-		const tabs = views.map((view) => ({
-			key: routeKey(segments, view),
-			path: routePath(segments, view),
-		}));
-		const keys = [
-			{ key: `${routeKey(segments)}_BASE`, path: routePath(segments) },
-			...tabs,
-		];
-		return { component, keys, routed: keys.map(({ key }) => key) };
-	}
-	const key = routeKey(segments);
-	return { component, keys: [{ key, path: routePath(segments) }], routed: [key] };
-}

frontend/.claude/skills/scaffold-feature/references/layout.md

@@ -1,102 +0,0 @@
-# Frontend layout
-
-Target structure for `frontend/src`. Inspired by Bulletproof React and Feature-Sliced
-Design: a feature owns its components, hooks, state, types and tests, and nothing outside
-the feature folder reaches into it.
-
-```
-src/
-  app/                    # bootstrap: routing, global styles/theme
-  pages/
-    Traces/               # has a shell
-      index.tsx           # shell — tab switching only
-      constants.tsx       # tab definitions
-      Explorer/           # a view
-        index.tsx         # view entry — composition, no business logic
-        components/
-          QueryBar/       # same shape as a global component, nests further as needed
-            QueryBar.tsx
-            QueryBar.module.scss
-            components/
-            hooks/
-            __tests__/
-        hooks/            # feature hooks + React Query wrappers over api/generated
-        store/            # Zustand stores for feature-local client state
-        types.ts
-        utils.ts
-        constants.ts
-        __tests__/
-        README.md
-      Funnels/
-      Views/
-    ApiMonitoring/        # no shell — same shape, one level up
-      index.tsx
-      components/
-      hooks/
-      store/
-      types.ts
-      utils.ts
-      constants.ts
-      __tests__/
-      README.md
-  components/             # cross-feature components, same internal shape as above
-    DataTable/
-      DataTable.tsx
-      DataTable.module.scss
-      components/
-      hooks/
-      store/
-      types.ts
-      utils.ts
-      constants.ts
-      __tests__/
-      README.md
-  lib/
-  utils/
-  types/
-  constants/
-  store/                  # app-wide client state only
-  i18n/
-  api/
-    generated/            # Orval output — never edited by hand
-    client/               # axios instances, interceptors, error handlers
-  index.tsx
-```
-
-## Rules
-
-- **Folder names are PascalCase**, spelled the way the feature is spelled in the product
-  (`ApiMonitoring`, `LLMObservability`). This holds for shells, views and components alike.
-- **A page folder is the unit of ownership.** Anything used by exactly one feature lives
-  inside it, however deeply nested. Promote to `src/components` / `src/utils` / `src/hooks`
-  only when a second feature needs it.
-- **`index.tsx` is the entry**, and it composes. Business logic goes to `hooks/`, data
-  shaping to `utils.ts`, state to `store/`.
-- **Nested components repeat the same shape.** A component folder may hold its own
-  `components/`, `hooks/`, `store/`, `types.ts`, `utils.ts`, `constants.ts`, `__tests__/`.
-  Nest as deep as ownership actually goes; don't flatten a component that owns children.
-- **Shell vs no shell.** A page with tabs gets a shell `index.tsx` whose only job is tab
-  switching, plus one folder per view. A page without tabs is just the feature folder.
-- **Tests.** Feature-root tests in `__tests__/`; a component's tests next to the component
-  (its own `__tests__/`). Never reach across features in a test.
-- **No barrel files.** A page's `index.tsx` is the route entry (a component), not a
-  re-export hub. Import components by their own path.
-- **File size.** Split past ~300 LOC: extract components, and behaviour into
-  `use<Component>Callbacks`-style hooks. More than ~3 type declarations in a file means a
-  `types.ts`, and more than ~3 in `types.ts` means a `types/` folder.
-- **Styling.** CSS Modules (`<Name>.module.scss`) next to the component — see
-  `docs/css-modules-guide.md`. Semantic tokens only.
-- **State.** Server → React Query (prefer `api/generated` hooks); URL → nuqs; client →
-  Zustand, one store per file, always with a selector. No Redux or Context for new code.
-
-## Migrating existing code
-
-Most feature code still lives in `src/container` and `src/modules`, with a thin wrapper in
-`src/pages`. When touching one of those features:
-
-1. Scaffold the target with `pnpm scaffold page <Name>` (see `../SKILL.md`).
-2. Move files in, one concern per commit — components, then hooks, then state.
-3. Update importers; keep `src/container/<Feature>` deleted, not re-exported. A shim
-   directory is how the old layout survives.
-4. Do the dead-code pass first: unused props, exports, imports and debug logs go before the
-   move, in their own commit.

frontend/.claude/skills/scaffold-feature/scaffold.mjs

@@ -1,606 +0,0 @@
-#!/usr/bin/env node
-import {
-	existsSync,
-	mkdirSync,
-	readdirSync,
-	readFileSync,
-	statSync,
-	writeFileSync,
-} from 'node:fs';
-import { dirname, join, relative, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import {
-	routeKey,
-	routeSpec,
-	substitute,
-	toCamel,
-	toDirName,
-	toKebab,
-	toTitle,
-	tokensFor,
-} from './lib.mjs';
-
-const SKILL_DIR = dirname(fileURLToPath(import.meta.url));
-const TEMPLATES = join(SKILL_DIR, 'templates');
-const FRONTEND = resolve(SKILL_DIR, '..', '..', '..');
-const SRC = join(FRONTEND, 'src');
-
-const ROUTE_FILES = {
-	routes: join(SRC, 'constants', 'routes.ts'),
-	permission: join(SRC, 'utils', 'permission', 'index.ts'),
-	pageComponents: join(SRC, 'AppRoutes', 'pageComponents.ts'),
-	appRoutes: join(SRC, 'AppRoutes', 'routes.ts'),
-	topNav: join(SRC, 'container', 'TopNav', 'DateTimeSelectionV2', 'constants.ts'),
-};
-const ROUTE_ROLES = "['ADMIN', 'EDITOR', 'VIEWER']";
-// Port is fixed in vite.config.ts; the base path comes from VITE_BASE_PATH like vite does.
-const DEV_SERVER_ORIGIN = 'http://localhost:3301';
-
-function devServerUrl(path) {
-	const base = process.env.VITE_BASE_PATH ?? envFileValue('VITE_BASE_PATH') ?? '/';
-	return `${DEV_SERVER_ORIGIN}${base.replace(/\/+$/, '')}${path}`;
-}
-
-function envFileValue(name) {
-	const envFile = join(FRONTEND, '.env');
-	if (!existsSync(envFile)) {
-		return undefined;
-	}
-	const match = readFileSync(envFile, 'utf8').match(
-		new RegExp(`^\\s*${name}\\s*=\\s*["']?([^"'\\n#]*)`, 'm'),
-	);
-	return match?.[1].trim() || undefined;
-}
-
-// Created empty, so the folder exists before it has a file to justify it.
-const FEATURE_DIRS = ['components', 'hooks', 'store'];
-
-const USAGE = `usage:
-  pnpm scaffold page <Name> [--views A,B,C] [--no-tests] [--dry-run] [--force]
-  pnpm scaffold component <Name> [--parent <path>] [--full] [--no-tests] [--dry-run] [--force]
-
-examples:
-  pnpm scaffold page ApiMonitoring
-  pnpm scaffold page Traces --views Explorer,Funnels,Views
-  pnpm scaffold page Traces/Explorer
-  pnpm scaffold component DataTable
-  pnpm scaffold component QueryBar --parent pages/Traces/Explorer`;
-
-function fail(message) {
-	process.stderr.write(`error: ${message}\n\n${USAGE}\n`);
-	process.exit(1);
-}
-
-function expandEquals(argv) {
-	return argv.flatMap((arg) =>
-		arg.startsWith('--') && arg.includes('=')
-			? [arg.slice(0, arg.indexOf('=')), arg.slice(arg.indexOf('=') + 1)]
-			: [arg],
-	);
-}
-
-function parseArgs(argv) {
-	const flags = {
-		views: [],
-		parent: 'components',
-		full: false,
-		tests: true,
-		dryRun: false,
-		force: false,
-	};
-	const positional = [];
-	const provided = new Set();
-
-	for (let i = 0; i < argv.length; i += 1) {
-		const arg = argv[i];
-		provided.add(arg);
-		if (arg === '--views' || arg === '--parent') {
-			const value = argv[i + 1];
-			if (!value || value.startsWith('--')) {
-				fail(`${arg} needs a value`);
-			}
-			if (arg === '--views') {
-				flags.views = value
-					.split(',')
-					.map((view) => view.trim())
-					.filter(Boolean);
-				if (!flags.views.length) {
-					fail('--views needs at least one name');
-				}
-			} else {
-				flags.parent = value;
-			}
-			i += 1;
-		} else if (arg === '--full') {
-			flags.full = true;
-		} else if (arg === '--no-tests') {
-			flags.tests = false;
-		} else if (arg === '--dry-run') {
-			flags.dryRun = true;
-		} else if (arg === '--force') {
-			flags.force = true;
-		} else if (arg === '-h' || arg === '--help') {
-			process.stdout.write(`${USAGE}\n`);
-			process.exit(0);
-		} else if (arg.startsWith('-')) {
-			fail(`unknown option: ${arg}`);
-		} else {
-			positional.push(arg);
-		}
-	}
-
-	return { positional, flags, provided };
-}
-
-const created = [];
-const skipped = [];
-let targetExisted = false;
-let pagePath = '';
-
-function writeFile(target, contents, flags) {
-	const rel = relative(FRONTEND, target);
-	if (existsSync(target) && !flags.force) {
-		skipped.push(rel);
-		return;
-	}
-	if (!flags.dryRun) {
-		mkdirSync(dirname(target), { recursive: true });
-		writeFileSync(target, contents);
-	}
-	created.push(rel);
-}
-
-function createDirs(targetDir, dirs, flags) {
-	for (const dir of dirs) {
-		const target = join(targetDir, dir);
-		const rel = `${relative(FRONTEND, target)}/`;
-		if (existsSync(target)) {
-			skipped.push(rel);
-			continue;
-		}
-		if (!flags.dryRun) {
-			mkdirSync(target, { recursive: true });
-		}
-		created.push(rel);
-	}
-}
-
-// Template files carry a `.tmpl` suffix so no TypeScript, lint or editor tooling
-// treats them as source; the suffix is dropped on the way out.
-function renderTree(templateDir, targetDir, tokens, flags) {
-	for (const entry of readdirSync(templateDir).sort()) {
-		const from = join(templateDir, entry);
-		const name = substitute(entry.replace(/\.tmpl$/, ''), tokens);
-		if (statSync(from).isDirectory()) {
-			if (!flags.tests && name === '__tests__') {
-				continue;
-			}
-			renderTree(from, join(targetDir, name), tokens, flags);
-		} else {
-			writeFile(
-				join(targetDir, name),
-				substitute(readFileSync(from, 'utf8'), tokens),
-				flags,
-			);
-		}
-	}
-}
-
-// Icons for tab names the product already uses; anything else gets a neutral one.
-const TAB_ICONS = {
-	Explorer: 'Compass',
-	Funnels: 'Cone',
-	Pipelines: 'Workflow',
-	SavedViews: 'TowerControl',
-	Views: 'TowerControl',
-};
-const DEFAULT_TAB_ICON = 'LayoutPanelTop';
-
-const tabIcon = (view) => TAB_ICONS[toDirName(view)] ?? DEFAULT_TAB_ICON;
-const tabName = (view) => `${toCamel(view)}Tab`;
-
-function shellTokens(segments, views) {
-	const icons = [...new Set(views.map(tabIcon))].sort((a, b) => a.localeCompare(b));
-	const viewImports = views
-		.map((view) => `import ${toDirName(view)} from './${toDirName(view)}';`)
-		.join('\n');
-	const tabExports = views
-		.map((view) => {
-			const route = `ROUTES.${routeKey(segments, view)}`;
-			return [
-				`export const ${tabName(view)}: TabRoutes = {`,
-				`\tComponent: ${toDirName(view)},`,
-				'\tname: (',
-				'\t\t<div className={styles.tabItem}>',
-				`\t\t\t<${tabIcon(view)} size={16} /> ${toTitle(view)}`,
-				'\t\t</div>',
-				'\t),',
-				`\troute: ${route},`,
-				`\tkey: ${route},`,
-				'};',
-			].join('\n');
-		})
-		.join('\n\n');
-	const tabAssertions = views
-		.map(
-			(view) =>
-				`\t\texpect(screen.getByRole('tab', { name: '${toTitle(view)}' })).toBeInTheDocument();\n`,
-		)
-		.join('');
-	return {
-		__ICON_IMPORTS__: `import { ${icons.join(', ')} } from '@signozhq/icons';`,
-		__VIEW_IMPORTS__: viewImports,
-		__TAB_EXPORTS__: `${tabExports}\n`,
-		__TAB_NAMES__: views.map(tabName).join(', '),
-		__BASE_ROUTE__: `ROUTES.${routeKey(segments)}_BASE`,
-		__FIRST_TAB__: tabName(views[0]),
-		__FIRST_VIEW_TESTID__: `${toKebab(views[0])}-page`,
-		__TAB_ASSERTIONS__: tabAssertions,
-	};
-}
-
-const edited = [];
-
-function insertBefore(source, anchor, text, rel, from = 0) {
-	const index = source.indexOf(anchor, from);
-	if (index === -1) {
-		fail(`could not find \`${anchor.trim()}\` in ${rel}`);
-	}
-	return source.slice(0, index) + text + source.slice(index);
-}
-
-const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-// An existing key or export is only reused when it already means what the generator
-// would have written; anything else is a naming collision and stops the run before
-// any shared file is touched.
-function assertSame(rel, what, existing, expected) {
-	if (existing !== expected) {
-		fail(
-			`${what} already exists in ${rel} as ${existing}, expected ${expected} — ` +
-				'pick another name',
-		);
-	}
-}
-
-function planRoutes({ component, keys, routed }) {
-	return [
-		{
-			file: ROUTE_FILES.routes,
-			transform: (source, rel) => {
-				const added = keys.filter(({ key, path }) => {
-					const match = source.match(new RegExp(`\\n\\t${key}: '([^']*)',`));
-					if (match) {
-						assertSame(rel, `ROUTES.${key}`, `'${match[1]}'`, `'${path}'`);
-					}
-					return !match;
-				});
-				const text = added.map(({ key, path }) => `\n\t${key}: '${path}',`).join('');
-				return {
-					source: insertBefore(source, '\n} as const;', text, rel),
-					added: added.map(({ key }) => key),
-				};
-			},
-		},
-		{
-			file: ROUTE_FILES.permission,
-			transform: (source, rel) => {
-				const start = source.indexOf('export const routePermission');
-				if (start === -1) {
-					fail(`could not find \`routePermission\` in ${rel}`);
-				}
-				const added = keys
-					.map(({ key }) => key)
-					.filter((key) => !source.includes(`\n\t${key}: `));
-				const text = added.map((key) => `\n\t${key}: ${ROUTE_ROLES},`).join('');
-				return { source: insertBefore(source, '\n};', text, rel, start), added };
-			},
-		},
-		{
-			file: ROUTE_FILES.pageComponents,
-			transform: (source, rel) => {
-				const existing = source.match(
-					new RegExp(`export const ${component.name} = Loadable\\([\\s\\S]*?'([^']+)'`),
-				);
-				if (existing) {
-					assertSame(rel, component.name, `'${existing[1]}'`, `'${component.importPath}'`);
-					return { source, added: [] };
-				}
-				const text =
-					`\nexport const ${component.name} = Loadable(\n` +
-					`\t() => import(/* webpackChunkName: "${component.chunk}" */ '${component.importPath}'),\n);\n`;
-				return {
-					source: source.replace(/\n*$/, '\n') + text,
-					added: [component.name],
-				};
-			},
-		},
-		{
-			file: ROUTE_FILES.appRoutes,
-			transform: (source, rel) => {
-				const added = [];
-				let next = source;
-
-				const importEnd = next.indexOf("} from './pageComponents';");
-				const importStart = next.lastIndexOf('import {', importEnd);
-				if (importEnd === -1 || importStart === -1) {
-					fail(`could not find the pageComponents import in ${rel}`);
-				}
-				const names = next
-					.slice(importStart + 'import {'.length, importEnd)
-					.split(',')
-					.map((name) => name.trim())
-					.filter(Boolean);
-				if (!names.includes(component.name)) {
-					const lower = component.name.toLowerCase();
-					const at = names.findIndex((name) => name.toLowerCase() > lower);
-					names.splice(at === -1 ? names.length : at, 0, component.name);
-					next =
-						next.slice(0, importStart) +
-						`import {\n\t${names.join(',\n\t')},\n` +
-						next.slice(importEnd);
-					added.push(`import ${component.name}`);
-				}
-
-				const arrayStart = next.indexOf('const routes: AppRoutes[] = [');
-				if (arrayStart === -1) {
-					fail(`could not find \`const routes: AppRoutes[]\` in ${rel}`);
-				}
-				const missing = routed.filter((key) => {
-					const match = next.match(
-						new RegExp(`component: (\\w+),\\n\\t\\tkey: '${escapeRegExp(key)}',`),
-					);
-					if (match) {
-						assertSame(rel, `route ${key}`, match[1], component.name);
-					}
-					return !match;
-				});
-				const entries = missing
-					.map((key) =>
-						[
-							'\n\t{',
-							`\t\tpath: ROUTES.${key},`,
-							'\t\texact: true,',
-							`\t\tcomponent: ${component.name},`,
-							`\t\tkey: '${key}',`,
-							'\t\tisPrivate: true,',
-							'\t},',
-						].join('\n'),
-					)
-					.join('');
-				next = insertBefore(next, '\n];', entries, rel, arrayStart);
-				added.push(...missing);
-
-				return { source: next, added };
-			},
-		},
-		{
-			file: ROUTE_FILES.topNav,
-			transform: (source, rel) => {
-				const start = source.indexOf('export const routesToSkip = [');
-				if (start === -1) {
-					fail(`could not find \`routesToSkip\` in ${rel}`);
-				}
-				const end = source.indexOf('\n];', start);
-				const block = source.slice(start, end);
-				const added = routed.filter((key) => !block.includes(`ROUTES.${key},`));
-				const text = added.map((key) => `\n\tROUTES.${key},`).join('');
-				return { source: insertBefore(source, '\n];', text, rel, start), added };
-			},
-		},
-	];
-}
-
-// Every shared file is read and validated before any is written, so a failed anchor or
-// a naming collision leaves the tree untouched.
-function planRouteEdits(spec) {
-	return planRoutes(spec).map(({ file, transform }) => {
-		const rel = relative(FRONTEND, file);
-		if (!existsSync(file)) {
-			fail(`shared file not found: ${rel}`);
-		}
-		const { source, added } = transform(readFileSync(file, 'utf8'), rel);
-		return { file, rel, source, added };
-	});
-}
-
-function commitRouteEdits(pending, flags) {
-	for (const { file, rel, source, added } of pending) {
-		if (!added.length) {
-			continue;
-		}
-		if (!flags.dryRun) {
-			writeFileSync(file, source);
-		}
-		edited.push({ rel, added });
-	}
-}
-
-function scaffoldFeature(targetDir, name, flags) {
-	renderTree(join(TEMPLATES, 'feature'), targetDir, tokensFor(name), flags);
-	createDirs(targetDir, FEATURE_DIRS, flags);
-}
-
-function scaffoldPage(name, flags) {
-	const segments = name.split('/').filter(Boolean).map(toDirName);
-	if (!segments.length) {
-		fail('page needs a name');
-	}
-
-	const viewDirs = flags.views.map(toDirName);
-	const duplicate = viewDirs.find((dir, index) => viewDirs.indexOf(dir) !== index);
-	if (duplicate) {
-		fail(`duplicate view: ${duplicate}`);
-	}
-
-	const targetDir = join(SRC, 'pages', ...segments);
-	const leaf = segments[segments.length - 1];
-	targetExisted = existsSync(targetDir);
-	// Shared files land before the page folder so a watching type-checker never sees a
-	// page that references ROUTES keys that do not exist yet.
-	const spec = routeSpec(segments, flags.views);
-	commitRouteEdits(planRouteEdits(spec), flags);
-	pagePath = spec.keys[0].path;
-
-	if (flags.views.length) {
-		renderTree(
-			join(TEMPLATES, 'shell'),
-			targetDir,
-			{ ...tokensFor(leaf), ...shellTokens(segments, flags.views) },
-			flags,
-		);
-		for (const view of flags.views) {
-			scaffoldFeature(join(targetDir, toDirName(view)), view, flags);
-		}
-	} else {
-		scaffoldFeature(targetDir, leaf, flags);
-	}
-
-	return targetDir;
-}
-
-function resolveParent(parent) {
-	const segments = parent
-		.replace(/^src\//, '')
-		.replace(/\/components\/?$/, '')
-		.split('/')
-		.filter(Boolean);
-	if (segments[0] === 'pages') {
-		return ['pages', ...segments.slice(1).map(toDirName)];
-	}
-	return segments;
-}
-
-function scaffoldComponent(name, flags) {
-	const tokens = tokensFor(name);
-	const parent = resolveParent(flags.parent);
-	const isGlobal = parent.length === 1 && parent[0] === 'components';
-	const componentsDir = isGlobal
-		? join(SRC, 'components')
-		: join(SRC, ...parent, 'components');
-
-	if (relative(SRC, componentsDir).startsWith('..')) {
-		fail(`--parent must stay inside src: ${flags.parent}`);
-	}
-	if (parent[0] === 'pages' && parent.length < 2) {
-		fail('a component under pages/ needs a feature: --parent pages/<Feature>');
-	}
-	if (!isGlobal && !existsSync(join(SRC, ...parent))) {
-		fail(`parent does not exist: src/${parent.join('/')}`);
-	}
-
-	const targetDir = join(componentsDir, tokens.__Pascal__);
-	targetExisted = existsSync(targetDir);
-
-	renderTree(join(TEMPLATES, 'component'), targetDir, tokens, flags);
-	if (flags.full) {
-		renderTree(join(TEMPLATES, 'component-extras'), targetDir, tokens, flags);
-		createDirs(targetDir, FEATURE_DIRS, flags);
-	}
-
-	return targetDir;
-}
-
-function report(kind, targetDir, flags) {
-	const rel = relative(FRONTEND, targetDir);
-	const verb = flags.dryRun ? 'would create' : 'created';
-	const segments = rel.split('/').slice(2);
-	const isNestedView = kind === 'page' && segments.length > 1 && !flags.views.length;
-	const leafName = segments[segments.length - 1];
-
-	if (targetExisted) {
-		process.stdout.write(
-			`\nwarning: ${rel} already existed — only missing entries were added\n`,
-		);
-	}
-
-	process.stdout.write(`\n${verb} ${created.length} entr(ies) in ${rel}\n`);
-	for (const entry of created) {
-		process.stdout.write(`  + ${entry}\n`);
-	}
-
-	if (skipped.length) {
-		process.stdout.write(
-			`\nskipped ${skipped.length} existing entr(ies) — pass --force to overwrite files\n`,
-		);
-		for (const entry of skipped) {
-			process.stdout.write(`  = ${entry}\n`);
-		}
-	}
-
-	if (edited.length) {
-		const editVerb = flags.dryRun ? 'would edit' : 'edited';
-		process.stdout.write(`\n${editVerb} ${edited.length} shared file(s)\n`);
-		for (const { rel, added } of edited) {
-			const additions = added.map((entry) => `+${entry}`).join(', ');
-			process.stdout.write(`  ~ ${rel}: ${additions}\n`);
-		}
-	}
-
-	const steps =
-		kind === 'page'
-			? [
-					'review the route registration (constants/routes.ts, utils/permission, AppRoutes/pageComponents.ts, AppRoutes/routes.ts, TopNav routesToSkip) and add a SideNav entry in container/SideNav/menuItems.tsx if the page needs one',
-					...(isNestedView
-						? [
-								`add a tab export for ${leafName} in the shell's constants.tsx and include it in the routes array in the shell's index.tsx`,
-							]
-						: []),
-					'delete the placeholders you do not need (empty types/utils/constants, unused folders)',
-					'fill in README.md',
-					`verify: pnpm tsgo --noEmit && pnpm oxlint ${rel} && pnpm jest ${rel}`,
-				]
-			: [
-					'delete the placeholders you do not need (empty types/utils/constants, unused folders)',
-					`verify: pnpm tsgo --noEmit && pnpm oxlint ${rel} && pnpm jest ${rel}`,
-				];
-
-	if (pagePath) {
-		process.stdout.write(`\nopen: ${devServerUrl(pagePath)}\n`);
-	}
-
-	process.stdout.write('\nnext:\n');
-	steps.forEach((step, index) => {
-		process.stdout.write(`  ${index + 1}. ${step}\n`);
-	});
-	process.stdout.write(
-		'\nnote: git does not track empty folders — components/, hooks/ and store/ only\n' +
-			'show up in a commit once they hold a file.\n',
-	);
-}
-
-const { positional, flags, provided } = parseArgs(expandEquals(process.argv.slice(2)));
-const [kind, name] = positional;
-
-if (!kind || !name) {
-	fail('a command and a name are required');
-}
-if (positional.length > 2) {
-	fail(`unexpected argument: ${positional[2]}`);
-}
-
-function rejectFlags(unsupported) {
-	for (const flag of unsupported) {
-		if (provided.has(flag)) {
-			fail(`${flag} does not apply to \`${kind}\``);
-		}
-	}
-}
-
-let targetDir;
-try {
-	if (kind === 'page') {
-		rejectFlags(['--parent', '--full']);
-		targetDir = scaffoldPage(name, flags);
-	} else if (kind === 'component') {
-		rejectFlags(['--views']);
-		targetDir = scaffoldComponent(name, flags);
-	} else {
-		fail(`unknown command: ${kind}`);
-	}
-} catch (error) {
-	fail(error.message);
-}
-
-report(kind, targetDir, flags);

frontend/.claude/skills/scaffold-feature/scaffold.test.mjs

@@ -1,95 +0,0 @@
-import assert from 'node:assert/strict';
-import { describe, it } from 'node:test';
-
-import {
-	routeKey,
-	routePath,
-	routeSpec,
-	substitute,
-	toCamel,
-	toConst,
-	toDirName,
-	toKebab,
-	toTitle,
-	tokensFor,
-} from './lib.mjs';
-
-describe('names', () => {
-	it('keeps typed casing and forces the first letter up', () => {
-		assert.equal(toDirName('LLMObservability'), 'LLMObservability');
-		assert.equal(toDirName('apiMonitoring'), 'ApiMonitoring');
-	});
-
-	it('collapses separated names to PascalCase', () => {
-		assert.equal(toDirName('api-monitoring'), 'ApiMonitoring');
-		assert.equal(toDirName('api monitoring'), 'ApiMonitoring');
-		assert.equal(toDirName('saved_views'), 'SavedViews');
-	});
-
-	it('derives kebab, title, const and camel forms, splitting acronyms', () => {
-		assert.deepEqual(tokensFor('LLMObservability'), {
-			__Pascal__: 'LLMObservability',
-			__kebab__: 'llm-observability',
-			__camel__: 'lLMObservability',
-			__CONST__: 'LLM_OBSERVABILITY',
-			__Title__: 'LLM Observability',
-		});
-		assert.equal(toKebab('SavedViews'), 'saved-views');
-		assert.equal(toTitle('SavedViews'), 'Saved Views');
-		assert.equal(toConst('SavedViews'), 'SAVED_VIEWS');
-		assert.equal(toCamel('SavedViews'), 'savedViews');
-	});
-
-	it('rejects names with no usable characters', () => {
-		assert.throws(() => toDirName('***'), /no usable name characters/);
-	});
-});
-
-describe('substitute', () => {
-	it('replaces every occurrence of every token, in file names and contents', () => {
-		const tokens = tokensFor('ApiMonitoring');
-		assert.equal(substitute('__Pascal__.module.scss', tokens), 'ApiMonitoring.module.scss');
-		assert.equal(
-			substitute('__kebab__-page / __kebab__-shell / __Title__', tokens),
-			'api-monitoring-page / api-monitoring-shell / Api Monitoring',
-		);
-	});
-});
-
-describe('routes', () => {
-	it('builds keys and paths from every segment plus the view', () => {
-		assert.equal(routeKey(['Traces'], 'SavedViews'), 'TRACES_SAVED_VIEWS');
-		assert.equal(routePath(['Traces'], 'SavedViews'), '/traces/saved-views');
-		assert.equal(routeKey(['Traces', 'Explorer']), 'TRACES_EXPLORER');
-		assert.equal(routePath(['Traces', 'Explorer']), '/traces/explorer');
-	});
-
-	it('routes a leaf page under a single key', () => {
-		assert.deepEqual(routeSpec(['ApiMonitoring'], []), {
-			component: {
-				name: 'ApiMonitoringPage',
-				importPath: 'pages/ApiMonitoring',
-				chunk: 'Api Monitoring Page',
-			},
-			keys: [{ key: 'API_MONITORING', path: '/api-monitoring' }],
-			routed: ['API_MONITORING'],
-		});
-	});
-
-	it('routes a shell under a base key plus one key per view, all to the shell', () => {
-		const spec = routeSpec(['Traces'], ['Explorer', 'Funnels']);
-		assert.equal(spec.component.name, 'TracesPage');
-		assert.deepEqual(spec.keys, [
-			{ key: 'TRACES_BASE', path: '/traces' },
-			{ key: 'TRACES_EXPLORER', path: '/traces/explorer' },
-			{ key: 'TRACES_FUNNELS', path: '/traces/funnels' },
-		]);
-		assert.deepEqual(spec.routed, ['TRACES_BASE', 'TRACES_EXPLORER', 'TRACES_FUNNELS']);
-	});
-
-	it('points a view added under an existing shell at the shell component', () => {
-		const spec = routeSpec(['Traces', 'Explorer'], []);
-		assert.equal(spec.component.importPath, 'pages/Traces');
-		assert.deepEqual(spec.keys, [{ key: 'TRACES_EXPLORER', path: '/traces/explorer' }]);
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/component-extras/README.md.tmpl

@@ -1,21 +0,0 @@
-# __Pascal__
-
-<!-- What this component renders, and the features that use it. -->
-
-## API
-
-<!-- Props, and the behaviour each one controls. -->
-
-## Structure
-
-| Path | Purpose |
-| --- | --- |
-| `__Pascal__.tsx` | The component. |
-| `__Pascal__.module.scss` | Styles. |
-| `components/` | Child components this one owns. |
-| `hooks/` | Behaviour extracted out of the component. |
-| `store/` | Zustand stores this component owns. |
-| `types.ts` | Types shared inside this folder. |
-| `utils.ts` | Pure helpers. |
-| `constants.ts` | Constants. |
-| `__tests__/` | Tests. |

frontend/.claude/skills/scaffold-feature/templates/component/__Pascal__.module.scss.tmpl

@@ -1,4 +0,0 @@
-.__camel__ {
-	display: flex;
-	color: var(--l1-foreground);
-}

frontend/.claude/skills/scaffold-feature/templates/component/__Pascal__.tsx.tmpl

@@ -1,7 +0,0 @@
-import styles from './__Pascal__.module.scss';
-
-function __Pascal__(): JSX.Element {
-	return <div className={styles.__camel__} data-testid="__kebab__" />;
-}
-
-export default __Pascal__;

frontend/.claude/skills/scaffold-feature/templates/component/__tests__/__Pascal__.test.tsx.tmpl

@@ -1,11 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import __Pascal__ from '../__Pascal__';
-
-describe('__Pascal__', () => {
-	it('renders', () => {
-		render(<__Pascal__ />);
-
-		expect(screen.getByTestId('__kebab__')).toBeInTheDocument();
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/feature/README.md.tmpl

@@ -1,28 +0,0 @@
-# __Title__
-
-<!-- One paragraph: what this feature does, who uses it, and where it is reachable from. -->
-
-## Structure
-
-| Path | Purpose |
-| --- | --- |
-| `index.tsx` | Feature entry. Composition only — no business logic. |
-| `components/` | Feature-local components, nested as `components/<Name>/`. |
-| `hooks/` | Feature hooks, including React Query wrappers over `api/generated`. |
-| `store/` | Zustand stores for feature-local client state. |
-| `types.ts` | Shared feature types. Split into `types/` past ~3 declarations. |
-| `utils.ts` | Pure helpers. |
-| `constants.ts` | Feature constants. |
-| `__tests__/` | Feature-root tests. Component tests live with the component. |
-
-## Data
-
-<!-- Endpoints this feature reads/writes, and the hooks that wrap them. -->
-
-## State
-
-<!-- What lives in the URL (nuqs), what lives in React Query, what lives in store/. -->
-
-## Routing
-
-<!-- Route key in constants/routes.ts, lazy import in AppRoutes/pageComponents.ts, entry in AppRoutes/routes.ts. -->

frontend/.claude/skills/scaffold-feature/templates/feature/__Pascal__.module.scss.tmpl

@@ -1,12 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-	padding: var(--spacing-4);
-	background: var(--l1-background);
-}
-
-.title {
-	color: var(--l1-foreground);
-	font-size: var(--font-size-lg);
-}

frontend/.claude/skills/scaffold-feature/templates/feature/__tests__/__Pascal__.test.tsx.tmpl

@@ -1,11 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import __Pascal__ from '../index';
-
-describe('__Pascal__', () => {
-	it('renders the page', () => {
-		render(<__Pascal__ />);
-
-		expect(screen.getByTestId('__kebab__-page')).toBeInTheDocument();
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/feature/index.tsx.tmpl

@@ -1,11 +0,0 @@
-import styles from './__Pascal__.module.scss';
-
-function __Pascal__(): JSX.Element {
-	return (
-		<section className={styles.container} data-testid="__kebab__-page">
-			<h1 className={styles.title}>__Title__</h1>
-		</section>
-	);
-}
-
-export default __Pascal__;

frontend/.claude/skills/scaffold-feature/templates/shell/README.md.tmpl

@@ -1,20 +0,0 @@
-# __Title__
-
-<!-- One paragraph: what this section of the product is, and what each tab is for. -->
-
-## Structure
-
-| Path | Purpose |
-| --- | --- |
-| `index.tsx` | Shell. Tab switching only — no feature logic. |
-| `constants.tsx` | One `TabRoutes` export per tab: icon, label, route and the view it renders. |
-| `<View>/` | One folder per tab, each a self-contained feature. |
-
-## Routing
-
-Every path is registered in `src/constants/routes.ts`, `src/utils/permission/index.ts`,
-`src/AppRoutes/routes.ts` and the `routesToSkip` list in
-`src/container/TopNav/DateTimeSelectionV2/constants.ts`, all rendering this shell through the
-lazy import in `src/AppRoutes/pageComponents.ts`. The base path redirects to the first tab;
-`RouteTab` picks the tab from the current path. Adding a tab means a new `ROUTES` key, a
-route entry, a permission entry, a `routesToSkip` entry and a `TabRoutes` export here.

frontend/.claude/skills/scaffold-feature/templates/shell/__Pascal__.module.scss.tmpl

@@ -1,21 +0,0 @@
-.shell {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-
-	:global(.ant-tabs-nav) {
-		padding: 0 var(--spacing-8);
-		margin-bottom: 0;
-
-		&::before {
-			border-bottom: 1px solid var(--l1-border) !important;
-		}
-	}
-}
-
-.tabItem {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-}

frontend/.claude/skills/scaffold-feature/templates/shell/__tests__/__Pascal__.test.tsx.tmpl

@@ -1,25 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-import ROUTES from 'constants/routes';
-
-import { __FIRST_TAB__ } from '../constants';
-import __Pascal__ from '../index';
-
-describe('__Pascal__', () => {
-	it('renders one tab per view', () => {
-		render(<__Pascal__ />, undefined, { initialRoute: __FIRST_TAB__.route });
-
-		expect(screen.getByTestId('__kebab__-shell')).toBeInTheDocument();
-__TAB_ASSERTIONS__	});
-
-	it('renders the view for the active tab', () => {
-		render(<__Pascal__ />, undefined, { initialRoute: __FIRST_TAB__.route });
-
-		expect(screen.getByTestId('__FIRST_VIEW_TESTID__')).toBeInTheDocument();
-	});
-
-	it('redirects the base path to the first tab', () => {
-		render(<__Pascal__ />, undefined, { initialRoute: __BASE_ROUTE__ });
-
-		expect(screen.getByTestId('__FIRST_VIEW_TESTID__')).toBeInTheDocument();
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/shell/constants.tsx.tmpl

@@ -1,9 +0,0 @@
-import { TabRoutes } from 'components/RouteTab/types';
-import ROUTES from 'constants/routes';
-__ICON_IMPORTS__
-
-__VIEW_IMPORTS__
-
-import styles from './__Pascal__.module.scss';
-
-__TAB_EXPORTS__

frontend/.claude/skills/scaffold-feature/templates/shell/index.tsx.tmpl

@@ -1,32 +0,0 @@
-import { matchPath, Redirect, useLocation } from 'react-router-dom';
-import RouteTab from 'components/RouteTab';
-import { TabRoutes } from 'components/RouteTab/types';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
-
-import { __TAB_NAMES__ } from './constants';
-
-import styles from './__Pascal__.module.scss';
-
-function __Pascal__(): JSX.Element {
-	const { pathname } = useLocation();
-
-	const routes: TabRoutes[] = [__TAB_NAMES__];
-
-	if (matchPath(pathname, { path: __BASE_ROUTE__, exact: true })) {
-		return <Redirect to={routes[0].route} />;
-	}
-
-	return (
-		<div className={styles.shell} data-testid="__kebab__-shell">
-			<RouteTab
-				routes={routes}
-				activeKey={pathname}
-				history={history}
-				showRightSection={false}
-			/>
-		</div>
-	);
-}
-
-export default __Pascal__;

frontend/.gitignore

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

frontend/.oxlintrc.json

@@ -262,20 +262,23 @@
     // React Hooks rules - Enforces Rules of Hooks (only call at top level)
     "react-hooks/exhaustive-deps": "warn",
     // Warns about missing dependencies in useEffect/useMemo/useCallback
-    // React Compiler rules, off because we don't have React Compiler enabled
-    "react/error-boundaries": "off",
-    "react/globals": "off",
-    "react/immutability": "off",
-    "react/incompatible-library": "off",
-    "react/preserve-manual-memoization": "off",
-    "react/purity": "off",
-    "react/refs": "off",
-    "react/set-state-in-effect": "off",
-    "react/set-state-in-render": "off",
-    "react/static-components": "off",
-    "react/unsupported-syntax": "off",
-    "react/use-memo": "off",
-    "react/void-use-memo": "off",
+    // NOTE: The following react-hooks rules are not supported right know, follow the progress at https://github.com/oxc-project/oxc/issues/1022
+    // Most of them are for React Compiler, which we don't have enabled right know
+    // "react-hooks/config": "error",
+    // "react-hooks/error-boundaries": "error",
+    // "react-hooks/component-hook-factories": "error",
+    // "react-hooks/gating": "error",
+    // "react-hooks/globals": "error",
+    // "react-hooks/immutability": "error",
+    // "react-hooks/preserve-manual-memoization": "error",
+    // "react-hooks/purity": "error",
+    // "react-hooks/refs": "error",
+    // "react-hooks/set-state-in-effect": "error",
+    // "react-hooks/set-state-in-render": "error",
+    // "react-hooks/static-components": "error",
+    // "react-hooks/unsupported-syntax": "warn",
+    // "react-hooks/use-memo": "error",
+    // "react-hooks/incompatible-library": "warn",
     "signoz/no-unsupported-asset-pattern": "error",
     // Prevents the wrong usage of assets to break custom base path installations
     "signoz/no-zustand-getstate-in-hooks": "error",
@@ -292,8 +295,6 @@
     // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
     "signoz/no-dashboard-fetch-outside-root": "error",
     // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
-    "signoz/no-msw-in-story-file": "error",
-    // Bans msw imports in *.stories.tsx; handlers/mock data belong in the sibling .stories.mocks.tsx
     "no-restricted-globals": [
       "error",
       {
@@ -335,10 +336,6 @@
             "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."
           }
         ]
       }
@@ -581,13 +578,14 @@
       }
     },
     {
-      // TypeScript reports real redeclarations; this rule also flags `const X` + `type X` pairs.
+      // Dev-tooling CLIs: stdout is their output, and they carry ported pixel/heap
+      // algorithms that read worse when split up.
       "files": [
-        "**/*.ts",
-        "**/*.tsx"
+        "scripts/**"
       ],
       "rules": {
-        "no-redeclare": "off"
+        "no-console": "off",
+        "sonarjs/cognitive-complexity": "off"
       }
     }
   ]

frontend/.storybook/main.ts

@@ -27,27 +27,12 @@ const mockAliases = [
 		find: /^(?:src\/)?api\/common\/logEvent$/,
 		replacement: `${srcPath}/storybook/mocks/logEvent.mock.ts`,
 	},
-	{
-		// jest: not replaced, the suite mounts a mock store per test.
-		find: /^(?:src\/)?store$/,
-		replacement: `${srcPath}/storybook/mocks/store.mock.ts`,
-	},
 	{
 		// jest: __mocks__/env.ts, which leaves `baseURL` empty because jsdom already
 		// resolves a relative `/api/...` against `http://localhost`.
 		find: /^(?:src\/)?constants\/env$/,
 		replacement: `${srcPath}/storybook/mocks/env.mock.ts`,
 	},
-	{
-		// jest: not replaced, a test opens the one tooltip it is about.
-		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`,
-	},
 ];
 
 /**
@@ -70,12 +55,12 @@ const isExcluded = (plugin: PluginOption): boolean =>
 
 const config: StorybookConfig = {
 	framework: '@storybook/react-vite',
-	stories: ['../src/storybook/docs/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
+	stories: ['../src/**/*.stories.@(ts|tsx)'],
 	// `../public` carries the fonts, icons and i18n bundles the app expects at
 	// the root; `./public` carries the msw worker, which must not ship in a
 	// production build.
 	staticDirs: ['../public', './public'],
-	addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+	addons: ['@storybook/addon-a11y'],
 	core: { disableTelemetry: true },
 	viteFinal: async (viteConfig) => {
 		const plugins = (viteConfig.plugins ?? [])
@@ -92,14 +77,6 @@ const config: StorybookConfig = {
 
 		return {
 			...viteConfig,
-			build: {
-				...viteConfig.build,
-				// `vite.config.ts` sets this for the app; Storybook's builder replaces
-				// `build` wholesale, which leaves rolldown-vite on its default
-				// lightningcss. That one rejects `:global()` in a plain stylesheet, which
-				// the app has, and the static build dies in CSS minification.
-				cssMinify: 'esbuild',
-			},
 			plugins,
 			resolve: {
 				...viteConfig.resolve,

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 sbshot's default `--width`,
+ * way it does locally. The width matches `scripts/story-shots.mjs` (`--width`),
  * so a cloud snapshot and a local shot frame the same page.
  */
 export const allModes = {

frontend/.storybook/preview-head.html

@@ -6,17 +6,6 @@
 -->
 <link rel="stylesheet" href="storybook-fonts.css" />
 
-<!--
-	Third-party frames are the one thing msw cannot answer: a cross-origin iframe
-	navigates outside the service worker's scope, so the YouTube embeds and the
-	docs pane in onboarding reach the real network. Same intent as the boot data
-	below, enforced by the browser instead.
--->
-<meta
-	http-equiv="Content-Security-Policy"
-	content="frame-src 'self' blob: data:"
-/>
-
 <link rel="stylesheet" href="css/uPlot.min.css" />
 
 <script>
@@ -35,84 +24,3 @@
 		},
 	};
 </script>
-
-<script>
-	// The wall clock every story reads. Chart windows, `4 mins ago` labels and
-	// trial countdowns all derive from `now`, and Chromatic does not freeze the
-	// clock, so a live one redraws every chart axis between two builds of the
-	// same code. `performance.now` and the timers keep running, so anything
-	// waiting on a timeout still resolves. `?storyClock=live`, or an ISO
-	// instant, overrides it.
-	//
-	// `new Date()` is the frozen instant, which is what the app renders from.
-	// `Date.now()` runs on from it instead, because it is also what code measures
-	// elapsed time with: `lodash.debounce` compares two `Date.now()` readings to
-	// decide its trailing call is due, so a frozen one re-arms its timer forever
-	// and every debounced input in the app (the onboarding catalogue search, the
-	// pipelines search, the log filter) silently stops filtering.
-	(() => {
-		const asked = new URLSearchParams(window.location.search).get('storyClock');
-		if (asked === 'live') return;
-
-		const frozen = Date.parse(asked || '2026-06-15T12:00:00.000Z');
-		if (Number.isNaN(frozen)) return;
-
-		const RealDate = Date;
-		const started = performance.now();
-		class FrozenDate extends RealDate {
-			constructor(...args) {
-				super(...(args.length ? args : [frozen]));
-			}
-			static now() {
-				return frozen + (performance.now() - started);
-			}
-		}
-		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

@@ -1,11 +1,8 @@
 import type { Preview } from '@storybook/react-vite';
 import type { SetupWorker } from 'msw';
 import { setupWorker } from 'msw';
-import { configure } from 'storybook/test';
 
 import { settleForCapture } from '../src/storybook/visual/settleForCapture';
-import PageDocs from '../src/storybook/docs/PageDocs';
-import ThemedDocsContainer from '../src/storybook/docs/ThemedDocsContainer';
 import { withProviders } from '../src/storybook/decorators/withProviders';
 import { globalMocks } from '../src/storybook/globals';
 import { resetStoryHistory } from '../src/storybook/navigation/containment';
@@ -16,12 +13,7 @@ import {
 } from '../src/storybook/runtime/resolveStory';
 import { allModes } from './modes';
 
-import i18n from '../src/ReactI18';
-
-// `src/index.tsx` does this at boot: without it `@monaco-editor/react` falls back
-// to its loader default and pulls Monaco from cdn.jsdelivr.net, which msw does
-// not report because the requests look like static assets.
-import '../src/lib/monaco/setup';
+import '../src/ReactI18';
 
 import '../src/styles.scss';
 
@@ -71,145 +63,10 @@ const { worker, ready } = (holder.__signozStorybookWorker ??=
 		};
 	})());
 
-/**
- * `t()` answers with the key until the namespace's JSON has landed, and a `play`
- * that clicks as soon as the story renders is quick enough to catch it: the
- * channel form's "Channel name is mandatory" arrives as `channel_name_required`.
- * Every namespace under `public/locales/en` is loaded once, ahead of the first
- * story.
- */
-const translationsReady = i18n.loadNamespaces(
-	Object.keys(import.meta.glob('../public/locales/en/*.json')).map((path) =>
-		path.slice(path.lastIndexOf('/') + 1, -'.json'.length),
-	),
-);
-
-// testing-library's 1s default for `findBy*` and `waitFor` is shorter than a
-// popup or a query takes to land on a loaded CI runner.
-configure({ asyncUtilTimeout: 10_000 });
-
 const preview: Preview = {
 	parameters: {
 		layout: 'fullscreen',
 		controls: { expanded: true },
-		// The sidebar order, mirroring the app's own side nav
-		// (`container/SideNav/menuItems.tsx`), so a page sits where someone would
-		// click it in the product. Storybook's default is the order the story files
-		// happen to be globbed in, which puts `src/modules` first. Anything missing
-		// from a level lands after the entries listed for it, in file order, so a new
-		// story shows up at the end of its area rather than disappearing. Stories
-		// inside a file are never listed, so they keep the order they are declared
-		// in, `Default` first. Storybook parses this out of the file, so it has to
-		// stay an inline literal.
-		options: {
-			storySort: {
-				order: [
-					'Docs',
-					'Pages',
-					[
-						'Home',
-						'Alerts',
-						[
-							'Rules',
-							'Triggered',
-							'Overview',
-							'History',
-							'Create',
-							'Edit',
-							'Planned Downtime',
-							'Routing Policies',
-							'Channels',
-							['List', 'List Authz', 'New', 'New Authz', 'Edit', 'Edit Authz'],
-						],
-						'Dashboards',
-						[
-							'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',
-						['Explorer', 'Live Tail', 'Saved Views', 'Pipelines', 'Settings'],
-						'Traces',
-						['Explorer', 'Trace Details', 'Funnel Details'],
-						'Metrics',
-						['Explorer'],
-						'Infrastructure',
-						[
-							'Overview',
-							'Kubernetes',
-							[
-								'Clusters',
-								'Nodes',
-								'Namespaces',
-								'Pods',
-								'Deployments',
-								'DaemonSets',
-								'StatefulSets',
-								'Jobs',
-								'Volumes',
-							],
-						],
-						'Integrations',
-						['List', 'Details', 'Cloud Account'],
-						'Exceptions',
-						['List', 'Detail'],
-						'External APIs',
-						'AI Observability',
-						['Overview', 'Explorer', 'Model Pricing', 'Attribute Mapping'],
-						'Noz',
-						'Metering',
-						['Cost Meter', 'Usage Explorer'],
-						'Messaging Queues',
-						['Overview', 'Kafka', 'Kafka Detail', 'Celery'],
-						'Onboarding',
-						['Questionnaire', 'Add Data Source'],
-						'Settings',
-						[
-							'Workspace',
-							'Account',
-							'Billing',
-							['Overview', 'Authz'],
-							'MCP Server',
-							'Roles',
-							'Role Details',
-							'Role Editor',
-							'Members',
-							'Service Accounts',
-							'Ingestion',
-							'Single Sign-on',
-							'Keyboard Shortcuts',
-						],
-						'Auth',
-						['Login', 'Sign Up', 'Forgot Password', 'Reset Password'],
-						'System',
-						[
-							'Status',
-							'Support',
-							'License',
-							'Not Found',
-							'Unauthorized',
-							'Error Fallback',
-							'Workspace Locked',
-							'Workspace Suspended',
-							'Workspace Access Restricted',
-						],
-					],
-				],
-			},
-		},
-		docs: { page: PageDocs, container: ThemedDocsContainer },
 		// One cloud snapshot per theme, for every story. A mode carries Storybook
 		// globals, so `theme` here is the same toolbar global the app reads out of
 		// localStorage. Widths are Chromatic's only real dimension, as they are
@@ -217,9 +74,6 @@ const preview: Preview = {
 		// one it is given.
 		chromatic: { modes: allModes },
 	},
-	// Every page story gets a docs page: the descriptions on the meta and on each
-	// story are the page's documentation, and without this they render nowhere.
-	tags: ['autodocs'],
 	globalTypes: {
 		theme: {
 			description: 'SigNoz color scheme',
@@ -265,21 +119,12 @@ const preview: Preview = {
 			world.apply();
 			world.install(worker);
 
-			await Promise.all([ready, translationsReady]);
+			await ready;
 		},
 	],
 	beforeEach: () => {
 		clearBlockedNavigations();
 		resetStoryHistory();
-
-		// The runner clears its console/network buffer before it navigates, so
-		// anything the outgoing story still has in flight would be reported
-		// against this one. Stamping the moment this story starts gives the runner
-		// a line to discard those by. `Date.now()` is faked for the stories, so
-		// this reads the one clock the runner's own timestamps share.
-		document.body.dataset.signozStoryStartedAt = String(
-			performance.timeOrigin + performance.now(),
-		);
 	},
 	// After `play`, which is the moment both capture stacks shoot at.
 	afterEach: settleForCapture,

frontend/.storybook/public/mockServiceWorker.js

@@ -88,16 +88,10 @@ self.addEventListener('fetch', function (event) {
   const { request } = event
   const accept = request.headers.get('accept') || ''
 
-  // msw bypasses server-sent events here, because it answers a request in one
-  // piece and has no stream to hand back. A story is not a live connection
-  // either: it wants the backlog a page renders, and one response carries that
-  // fine. Left bypassed, `/api/v3/logs/livetail` reaches the real network and
-  // the live tail story is a spinner over ERR_CONNECTION_REFUSED. Restore the
-  // bypass and re-check `Pages/Logs/Live Tail` if msw regenerates this file.
-  //
-  // if (accept.includes('text/event-stream')) {
-  //   return
-  // }
+  // Bypass server-sent events.
+  if (accept.includes('text/event-stream')) {
+    return
+  }
 
   // Bypass navigation requests.
   if (request.mode === 'navigate') {

frontend/.storybook/test-runner.ts

@@ -23,34 +23,9 @@ 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 {
-	at: number;
-	text: string;
-}
-
-const PREPARE_TIMEOUT_MS = 180_000;
-
-const messagesByPage = new WeakMap<Page, CapturedMessage[]>();
-
-/**
- * When the story under test started rendering, stamped by the preview's
- * `beforeEach`. Messages captured before it belong to the previous story: the
- * runner clears this buffer ahead of the navigation, so whatever that story
- * still had in flight lands here.
- */
-const storyStartedAt = (page: Page): Promise<number> =>
-	page
-		.evaluate(() => Number(document.body.dataset.signozStoryStartedAt ?? 0))
-		.catch(() => 0);
+const messagesByPage = new WeakMap<Page, string[]>();
 
 /**
  * Only `console.error` fails a story. `console.warn` is dev-time advice from
@@ -61,15 +36,6 @@ const config: TestRunnerConfig = {
 	// msw logs every mocked request at `log`; keep it out of the failure dump
 	// unless the job is re-run with debug logging (GitHub sets RUNNER_DEBUG=1).
 	logLevel: process.env.RUNNER_DEBUG === '1' ? 'info' : 'warn',
-	// The runner's default prepare, minus Playwright's 30s navigation timeout: on
-	// a cold dev server the first load compiles the whole preview, which outlasts
-	// it on a shared CI runner.
-	async prepare({ page }): Promise<void> {
-		await page.goto(new URL('iframe.html', process.env.TARGET_URL).toString(), {
-			waitUntil: 'load',
-			timeout: PREPARE_TIMEOUT_MS,
-		});
-	},
 	async preVisit(page): Promise<void> {
 		const existing = messagesByPage.get(page);
 		if (existing) {
@@ -77,14 +43,14 @@ const config: TestRunnerConfig = {
 			return;
 		}
 
-		const messages: CapturedMessage[] = [];
+		const messages: string[] = [];
 		messagesByPage.set(page, messages);
 		page.on('console', (message) => {
 			if (
 				message.type() === 'error' &&
 				!IGNORED_MESSAGES.some((pattern) => pattern.test(message.text()))
 			) {
-				messages.push({ at: Date.now(), text: `[error] ${message.text()}` });
+				messages.push(`[error] ${message.text()}`);
 			}
 		});
 		// The console message alone ("Failed to load resource") doesn't name the
@@ -92,25 +58,12 @@ const config: TestRunnerConfig = {
 		// actionable instead of just a status code.
 		page.on('response', (response) => {
 			if (response.status() >= 400) {
-				messages.push({
-					// 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()}`,
-				});
+				messages.push(`[response] ${response.status()} ${response.url()}`);
 			}
 		});
 	},
 	async postVisit(page, context): Promise<void> {
-		const captured = messagesByPage.get(page) ?? [];
-		if (captured.length === 0) {
-			return;
-		}
-
-		const startedAt = await storyStartedAt(page);
-		const messages = captured
-			.filter((message) => message.at >= startedAt)
-			.map((message) => message.text);
+		const messages = messagesByPage.get(page) ?? [];
 		if (messages.length === 0) {
 			return;
 		}

frontend/AGENTS.md

@@ -25,7 +25,6 @@ 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/__mocks__/uplotMock.ts

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

frontend/docs/authz-guide.md

@@ -41,12 +41,6 @@ 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
 
@@ -142,8 +136,6 @@ 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,20 +41,6 @@ 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

@@ -10,7 +10,6 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -o storybook-static",
     "test:storybook": "bash scripts/test-storybook.sh",
-    "scaffold": "node .claude/skills/scaffold-feature/scaffold.mjs",
     "build": "vite build",
     "preview": "vite preview",
     "prettify": "oxfmt",
@@ -49,13 +48,12 @@
     "@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.2.1",
+    "@signozhq/design-tokens": "2.1.6",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.2.0",
+    "@signozhq/ui": "0.1.0",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -164,7 +162,6 @@
     "@jest/globals": "30.4.1",
     "@jest/types": "30.2.0",
     "@storybook/addon-a11y": "10.5.9",
-    "@storybook/addon-docs": "10.5.9",
     "@storybook/react-vite": "10.5.9",
     "@storybook/test-runner": "0.24.5",
     "@testing-library/dom": "8.20.0",
@@ -204,9 +201,9 @@
     "lint-staged": "^17.0.4",
     "msw": "1.3.2",
     "orval": "8.22.0",
-    "oxfmt": "0.73.0",
-    "oxlint": "1.88.0",
-    "oxlint-tsgolint": "7.0.2004",
+    "oxfmt": "0.54.0",
+    "oxlint": "1.69.0",
+    "oxlint-tsgolint": "0.23.0",
     "postcss": "8.5.26",
     "postcss-scss": "4.0.9",
     "react-resizable": "3.0.4",

frontend/plugins/rules/no-msw-in-story-file.mjs

@@ -1,41 +0,0 @@
-/**
- * Rule: no-msw-in-story-file
- *
- * A `.stories.tsx` file is the human-facing surface: it must not carry msw
- * handlers or response payloads. Those belong in the sibling
- * `<Page>.stories.mocks.tsx` module (and its `__story_mockdata__` builders).
- *
- * This rule flags any import from `msw` inside a `*.stories.tsx` file. It
- * does not match `*.stories.mocks.tsx`, which is where msw imports belong.
- */
-
-export default {
-	meta: {
-		type: 'suggestion',
-		docs: {
-			description:
-				'Disallow importing from msw inside a .stories.tsx file; move handlers/mock data to the sibling .stories.mocks.tsx module',
-			category: 'Storybook',
-		},
-		schema: [],
-		messages: {
-			noMsw:
-				'Do not import from msw in a .stories.tsx file. Move the handler and its mock data to the sibling <Page>.stories.mocks.tsx module (and __story_mockdata__ for builders).',
-		},
-	},
-
-	create(context) {
-		const filename = context.filename || '';
-		if (!filename.endsWith('.stories.tsx')) {
-			return {};
-		}
-
-		return {
-			ImportDeclaration(node) {
-				if (node.source.value === 'msw') {
-					context.report({ node, messageId: 'noMsw' });
-				}
-			},
-		};
-	},
-};

frontend/plugins/signoz.mjs

@@ -15,7 +15,6 @@ import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
 import noConditionalTextNodesWithSiblings from './rules/no-conditional-text-nodes-with-siblings.mjs';
 import noReturnTextNodes from './rules/no-return-text-nodes.mjs';
-import noMswInStoryFile from './rules/no-msw-in-story-file.mjs';
 
 export default {
 	meta: {
@@ -32,6 +31,5 @@ export default {
 		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
 		'no-conditional-text-nodes-with-siblings': noConditionalTextNodesWithSiblings,
 		'no-return-text-nodes': noReturnTextNodes,
-		'no-msw-in-story-file': noMswInStoryFile,
 	},
 };

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

@@ -1,9 +1,16 @@
 {
   "channel_delete_unexp_error": "Something went wrong",
+  "channel_delete_success": "Channel Deleted Successfully",
+  "column_channel_name": "Name",
+  "column_channel_type": "Type",
+  "column_channel_action": "Action",
+  "column_channel_edit": "Edit",
+  "button_new_channel": "New Alert Channel",
+  "tooltip_notification_channels": "More details on how to setting notification channels",
+  "sending_channels_note": "The alerts will be sent to all the configured channels.",
   "loading_channels_message": "Loading Channels..",
   "page_title_create": "New Notification Channel",
   "page_title_edit": "Edit Notification Channel",
-  "page_title_view": "View Notification Channel",
   "button_save_channel": "Save",
   "button_test_channel": "Test",
   "button_return": "Back",
@@ -116,9 +123,12 @@
   "help_webhook_password": "Specify a password or bearer token",
   "help_pager_description": "Shows up as description in pagerduty",
   "channel_creation_done": "Successfully created the channel",
+  "channel_creation_failed": "An unexpected error occurred while creating this channel",
   "channel_edit_done": "Channels Edited Successfully",
+  "channel_edit_failed": "An unexpected error occurred while updating this channel",
   "selected_channel_invalid": "Channel type selected is invalid",
   "username_no_password": "A Password must be provided with user name",
+  "test_unsupported": "Sorry, this channel type does not support test yet",
   "channel_test_done": "An alert has been sent to this channel",
   "channel_test_failed": "Failed to send a test message to this channel, please confirm that the parameters are set correctly",
   "channel_test_unexpected": "An unexpected error occurred while sending a message to this channel, please try again",
@@ -127,4 +137,4 @@
   "api_key_required": "API Key is mandatory",
 	"to_required": "To field is mandatory",
 	"channel_name_required": "Channel name is mandatory"
-}
+}

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

@@ -4,6 +4,7 @@
 	"GET_STARTED": "SigNoz | Get Started",
 	"SERVICE_METRICS": "SigNoz | Service Metrics",
 	"SERVICE_MAP": "SigNoz | Service Map",
+	"TRACE": "SigNoz | Trace",
 	"HOME": "SigNoz | Home",
 	"TRACE_DETAIL": "SigNoz | Trace Detail",
 	"TRACES_EXPLORER": "SigNoz | Traces Explorer",
@@ -33,6 +34,7 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
+	"LIVE_LOGS": "SigNoz | Live Logs",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",
 	"LIST_LICENSES": "SigNoz | List of Licenses",
@@ -54,13 +56,13 @@
 	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
 	"MCP_SERVER": "SigNoz | MCP Server",
 	"AI_ASSISTANT": "SigNoz | AI Assistant",
+	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
 	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
 	"AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview",
-	"AI_OBSERVABILITY_EXPLORER": "SigNoz | AI Observability Explorer",
 	"AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration",
 	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping"
 }

frontend/public/locales/en/channels.json

@@ -1,21 +1,20 @@
 {
   "channel_delete_unexp_error": "Something went wrong",
-  "channel_load_failed": "This channel could not be opened",
+  "channel_delete_success": "Channel Deleted Successfully",
+  "column_channel_name": "Name",
+  "column_channel_type": "Type",
+  "column_channel_action": "Action",
+  "column_channel_edit": "Edit",
+  "button_new_channel": "New Alert Channel",
+  "tooltip_notification_channels": "More details on how to setting notification channels",
+  "sending_channels_note": "The alerts will be sent to all the configured channels.",
   "loading_channels_message": "Loading Channels..",
   "page_title_create": "New Notification Channel",
   "page_title_edit": "Edit Notification Channel",
-  "page_title_view": "View Notification Channel",
   "button_save_channel": "Save",
   "button_test_channel": "Test",
   "button_return": "Back",
-  "section_general": "General",
-  "section_connection": "Connection",
-  "section_message": "Message",
-  "section_advanced": "Advanced",
-  "description_slack_advanced": "The rest of the Slack attachment. Every box here is optional.",
-  "section_recipients": "Recipients",
   "field_channel_name": "Name",
-  "help_channel_name_immutable": "Renaming is blocked while alert rules and routing policies still reference a channel by name.",
   "field_send_resolved": "Send resolved alerts",
   "field_channel_type": "Type",
   "field_webhook_url": "Webhook URL",
@@ -96,44 +95,9 @@
   "placeholder_incidentio_metadata_key": "Key",
   "placeholder_incidentio_metadata_value": "Value",
   "button_incidentio_add_metadata": "Add metadata",
-  "button_incidentio_remove_metadata": "Remove metadata",
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",
   "field_slack_description": "Description",
-  "field_slack_title_link": "Title link",
-  "field_slack_color": "Color",
-  "help_slack_color": "good, warning, danger, or a hex value like #439FE0. Templates are allowed.",
-  "placeholder_slack_color": "{{ if eq .Status \"firing\" }}danger{{ else }}good{{ end }}",
-  "field_slack_pretext": "Pretext",
-  "help_slack_pretext": "Shown above the attachment block",
-  "field_slack_fallback": "Fallback text",
-  "help_slack_fallback": "Plain text shown where the attachment cannot render, such as push notifications",
-  "field_slack_footer": "Footer",
-  "field_slack_fields": "Fields",
-  "help_slack_fields": "Extra entries rendered as a table inside the attachment",
-  "placeholder_slack_field_title": "Title",
-  "placeholder_slack_field_value": "Value",
-  "field_slack_field_short": "Short",
-  "add_slack_field": "Add field",
-  "remove_slack_field": "Remove field",
-  "field_slack_actions": "Actions",
-  "help_slack_actions": "Buttons rendered under the attachment. A button with a URL links out.",
-  "label_slack_action_text": "Text",
-  "label_slack_action_url": "URL",
-  "label_slack_action_type": "Type",
-  "label_slack_action_name": "Name",
-  "label_slack_action_value": "Value",
-  "label_slack_action_style": "Style",
-  "label_slack_action_confirm": "Confirm",
-  "placeholder_slack_action_text": "Button text",
-  "placeholder_slack_action_url": "https://runbook.example.com",
-  "placeholder_slack_action_type": "button",
-  "placeholder_slack_action_name": "Name (Slack app callbacks)",
-  "placeholder_slack_action_value": "Value (Slack app callbacks)",
-  "placeholder_slack_action_style": "Style: default, primary or danger",
-  "placeholder_slack_action_confirm": "Confirmation prompt (optional)",
-  "add_slack_action": "Add action",
-  "remove_slack_action": "Remove action",
   "field_opsgenie_api_key": "API Key",
   "field_opsgenie_description": "Description",
   "placeholder_opsgenie_description": "Description",
@@ -145,7 +109,6 @@
   "placeholder_email_html": "Email body template",
   "field_webhook_username": "User Name (optional)",
   "field_webhook_password": "Password (optional)",
-  "field_webhook_bearer_token": "Bearer token (optional)",
   "field_pager_routing_key": "Routing Key",
   "field_pager_description": "Description",
   "field_pager_severity": "Severity",
@@ -170,66 +133,23 @@
   "help_pager_severity": "Severity of the incident, must be one of: must be one of the following: 'critical', 'warning', 'error' or 'info'",
   "help_webhook_username": "Leave empty for bearer auth or when authentication is not necessary.",
   "help_webhook_password": "Specify a password or bearer token",
-  "help_webhook_bearer_token": "Sent as an Authorization: Bearer header. Leave the username and password empty when using it.",
   "help_pager_description": "Shows up as description in pagerduty",
   "help_opsgenie_message": "Shows up as message in opsgenie",
   "help_opsgenie_priority": "Priority of the incident",
   "help_opsgenie_description": "Shows up as description in opsgenie",
   "channel_creation_done": "Successfully created the channel",
+  "channel_creation_failed": "An unexpected error occurred while creating this channel",
   "channel_edit_done": "Channels Edited Successfully",
+  "channel_edit_failed": "An unexpected error occurred while updating this channel",
   "selected_channel_invalid": "Channel type selected is invalid",
   "username_no_password": "A Password must be provided with user name",
+  "test_unsupported": "Sorry, this channel type does not support test yet",
   "channel_test_done": "An alert has been sent to this channel",
   "channel_test_failed": "Failed to send a test message to this channel, please confirm that the parameters are set correctly",
   "channel_test_unexpected": "An unexpected error occurred while sending a message to this channel, please try again",
   "webhook_url_required": "Webhook URL is mandatory",
-  "routing_key_required": "Routing Key is mandatory for creating pagerduty channel",
-  "pager_details_invalid_json": "Enter valid JSON, or clear the box to send no details",
   "slack_channel_help": "Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace)",
   "api_key_required": "API Key is mandatory",
-  "to_required": "To field is mandatory",
-  "channel_name_required": "Channel name is mandatory",
-  "tooltip_send_resolved": "Also notify this channel when an alert stops firing.",
-  "tooltip_channel_type": "Where the alert is delivered. It cannot be changed once the channel is saved.",
-  "button_discard_channel": "Discard",
-  "button_discard_confirm": "Discard",
-  "discard_changes_title": "Discard your changes?",
-  "discard_changes_body": "This form has unsaved changes. If you leave now, they are gone and the channel stays as it is.",
-  "tooltip_save_no_changes": "Nothing has changed yet.",
-  "entry_slack_field": "Field",
-  "entry_slack_action": "Action",
-  "entry_incidentio_metadata": "Entry",
-  "label_slack_field_title": "Title",
-  "tooltip_slack_field_title": "The bold label Slack shows above the value, for example Severity.",
-  "label_slack_field_value": "Value",
-  "tooltip_slack_field_value": "What Slack shows under the title. Templates are allowed, so `{{ .CommonLabels.severity }}` fills in from the alert.",
-  "label_incidentio_metadata_key": "Key",
-  "label_incidentio_metadata_value": "Value",
-  "tooltip_slack_fields": "Extra entries Slack renders as a small table inside the alert attachment.",
-  "tooltip_slack_actions": "Buttons Slack renders under the attachment. A button with a URL links out; the rest are for a Slack app to handle.",
-  "tooltip_slack_action_text": "The label on the button.",
-  "tooltip_slack_action_url": "Where the button sends the reader. Leave empty for a button a Slack app handles instead.",
-  "tooltip_slack_action_name": "Identifies the button to a Slack app. Not needed for a button that only links out.",
-  "tooltip_slack_action_value": "Sent to a Slack app along with the name, so one app can tell its buttons apart.",
-  "tooltip_slack_action_style": "default, primary or danger. Slack colours the button accordingly.",
-  "tooltip_slack_action_confirm": "Text for a confirmation prompt shown before the action runs. Leave empty for no prompt.",
-  "bot_token_required": "Bot token is mandatory for creating a telegram channel",
-  "chat_id_required": "Chat ID is mandatory for creating a telegram channel",
-  "telegram_tip": "Create a bot with @BotFather, add it to the chat, then paste its token and the chat's numeric id below.",
-  "telegram_tip_link": "Learn how",
-  "field_telegram_bot_token": "Bot token",
-  "tooltip_telegram_bot_token": "The token BotFather returns, in the form 123456789:AA...",
-  "field_telegram_chat_id": "Chat ID",
-  "tooltip_telegram_chat_id": "The numeric chat the bot posts to, negative for groups and channels. Telegram's @username form is not accepted.",
-  "placeholder_telegram_chat_id": "e.g. -1001234567890",
-  "field_telegram_message_thread_id": "Message thread ID",
-  "tooltip_telegram_message_thread_id": "Posts into one message thread of a forum group. Leave empty to post in the group itself.",
-  "field_telegram_title": "Title",
-  "tooltip_telegram_title": "Sent in bold above the message. Telegram HTML, so interpolated values are escaped.",
-  "field_telegram_message": "Message",
-  "tooltip_telegram_message": "Template for the message body. Telegram HTML, so interpolated values are escaped.",
-  "field_telegram_api_url": "Bot API URL",
-  "tooltip_telegram_api_url": "Point at a self-hosted Bot API server. Leave empty to use Telegram's.",
-  "field_telegram_disable_notifications": "Send silently",
-  "tooltip_telegram_disable_notifications": "Delivers without a sound or vibration on the recipients' devices."
-}
+	"to_required": "To field is mandatory",
+	"channel_name_required": "Channel name is mandatory"
+}

frontend/public/locales/en/titles.json

@@ -14,6 +14,7 @@
 	"GET_STARTED_AZURE_MONITORING": "SigNoz | Get Started | AZURE",
 	"GET_STARTED": "SigNoz | Get Started with SigNoz Cloud",
 	"GET_STARTED_WITH_CLOUD": "SigNoz | Get Started with SigNoz Cloud",
+	"TRACE": "SigNoz | Trace",
 	"TRACE_DETAIL": "SigNoz | Trace Detail",
 	"TRACES_EXPLORER": "SigNoz | Traces Explorer",
 	"SETTINGS": "SigNoz | Settings",
@@ -42,6 +43,7 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
+	"LIVE_LOGS": "SigNoz | Live Logs",
 	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",
@@ -76,6 +78,7 @@
 	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
 	"MCP_SERVER": "SigNoz | MCP Server",
 	"AI_ASSISTANT": "SigNoz | AI Assistant",
+	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
 	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"ROLE_CREATE": "SigNoz | Create Role",
@@ -84,7 +87,6 @@
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
 	"AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview",
-	"AI_OBSERVABILITY_EXPLORER": "SigNoz | AI Observability Explorer",
 	"AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration",
 	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping"
 }

frontend/scripts/story-shots-caption.mjs

@@ -0,0 +1,167 @@
+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

@@ -0,0 +1,460 @@
+#!/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

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

frontend/scripts/test-storybook.sh

@@ -28,4 +28,4 @@ until curl -sf http://127.0.0.1:6006/index.json >/dev/null 2>&1; do
 	sleep 1
 done
 
-pnpm exec test-storybook --ci --maxWorkers=2 --testTimeout 30000 "$@"
+pnpm exec test-storybook --ci --maxWorkers=2 "$@"

frontend/src/AppRoutes/Private.tsx

@@ -8,6 +8,7 @@ import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useIsAIObservabilityEnabled } from 'hooks/useIsAIObservabilityEnabled';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
@@ -43,6 +44,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isAIObservabilityEnabled = useIsAIObservabilityEnabled();
 	const mapRoutes = useMemo(
 		() =>
 			new Map(
@@ -133,6 +135,14 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return <Redirect to={ROUTES.HOME} />;
 	}
 
+	if (
+		(pathname.startsWith(`${ROUTES.AI_OBSERVABILITY_BASE}/`) ||
+			pathname === ROUTES.AI_OBSERVABILITY_BASE) &&
+		!isAIObservabilityEnabled
+	) {
+		return <Redirect to={ROUTES.HOME} />;
+	}
+
 	// Check for workspace access restriction (cloud only)
 	const isCloudPlatform = activeLicense?.platform === LicensePlatform.CLOUD;
 

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

@@ -300,17 +300,28 @@ describe('PrivateRoute', () => {
 			);
 		});
 
-		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 });
+		it('should redirect /logs-explorer/live to /logs/logs-explorer/live', () => {
+			renderPrivateRoute({ initialRoute: '/logs-explorer/live' });
 
-			expect(screen.getByTestId('location-display').textContent).toBe(to);
+			expect(screen.getByTestId('location-display')).toHaveTextContent(
+				'/logs/logs-explorer/live',
+			);
+		});
+
+		it('should redirect /logs-save-views to /logs/saved-views', () => {
+			renderPrivateRoute({ initialRoute: '/logs-save-views' });
+
+			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',
+			);
 		});
 
 		it('should redirect /settings/access-tokens to /settings/service-accounts', () => {
@@ -1451,9 +1462,10 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
 		});
 
-		it('lets a VIEWER reach /alerts/channels/new, which authz then gates', () => {
-			// CHANNELS_NEW runs on fine-grained authz, so the router no longer decides
-			// on the role: the page's own guard denies when `create` is not granted.
+		it('should redirect VIEWER from /alerts/channels/new (ADMIN only)', async () => {
+			// After moving channels under /alerts, CHANNELS_NEW ('/alerts/channels/new')
+			// is an exact, ADMIN-only route with no overlapping non-exact ALL_CHANNELS
+			// route to match last, so a VIEWER is now correctly redirected.
 			renderPrivateRoute({
 				initialRoute: ROUTES.CHANNELS_NEW,
 				appContext: {
@@ -1462,7 +1474,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.CHANNELS_NEW);
+			await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
 		});
 
 		it('should allow EDITOR to access /get-started-with-signoz-cloud route', () => {
@@ -1546,11 +1558,6 @@ describe('PrivateRoute', () => {
 			keyof typeof routeWithInitialAuthZSupport,
 			AuthzRouteCase
 		> = {
-			CHANNELS_NEW: { path: ROUTES.CHANNELS_NEW, deniedRoles: DENIED_ROLES },
-			CHANNELS_EDIT: {
-				path: ROUTES.CHANNELS_EDIT.replace(':channelId', 'channel-id-1'),
-				deniedRoles: DENIED_ROLES,
-			},
 			ALL_DASHBOARD: { path: ROUTES.ALL_DASHBOARD, deniedRoles: DENIED_ROLES },
 			DASHBOARD: {
 				path: ROUTES.DASHBOARD.replace(':dashboardId', 'dashboard-id-1'),
@@ -1581,14 +1588,20 @@ describe('PrivateRoute', () => {
 				deniedRoles: DENIED_ROLES,
 			},
 			TRACES_EXPLORER: { path: ROUTES.TRACES_EXPLORER, deniedRoles: DENIED_ROLES },
+			TRACE: { path: ROUTES.TRACE, deniedRoles: DENIED_ROLES },
 			TRACE_DETAIL: {
 				path: ROUTES.TRACE_DETAIL.replace(':id', 'trace-id-1'),
 				deniedRoles: DENIED_ROLES,
 			},
+			TRACE_DETAIL_OLD: {
+				path: ROUTES.TRACE_DETAIL_OLD.replace(':id', 'trace-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
 			// LOGS and LOGS_EXPLORER share a path - matchPath resolves it to whichever
 			// route definition comes last, and both keys are authz-aware either way.
 			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
 			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
+			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
 			METRICS_EXPLORER: {
 				path: ROUTES.METRICS_EXPLORER,
 				deniedRoles: DENIED_ROLES,
@@ -1636,6 +1649,11 @@ 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/index.tsx

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

frontend/src/AppRoutes/pageComponents.ts

@@ -53,6 +53,17 @@ export const TracesFunnelDetails = Loadable(
 		),
 );
 
+export const TraceFilter = Loadable(
+	() => import(/* webpackChunkName: "Trace Filter Page" */ 'pages/Trace'),
+);
+
+export const TraceDetailOldRedirect = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetailOldRedirect" */ 'pages/TraceDetailOldRedirect/index'
+		),
+);
+
 export const TraceDetailV3 = Loadable(
 	() =>
 		import(
@@ -154,6 +165,14 @@ export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
 
+export const LogsExplorer = Loadable(
+	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/LogsModulePage'),
+);
+
+export const LiveLogs = Loadable(
+	() => import(/* webpackChunkName: "Live Logs" */ 'pages/LiveLogs'),
+);
+
 export const PipelinePage = Loadable(
 	() => import(/* webpackChunkName: "Pipelines" */ 'pages/LogsModulePage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -23,8 +23,10 @@ import {
 	LicensePage,
 	ListAllALertsPage,
 	LLMObservabilityPage,
+	LiveLogs,
 	Login,
 	Logs,
+	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
 	MessagingQueuesMainPage,
@@ -44,7 +46,9 @@ import {
 	SomethingWentWrong,
 	StatusPage,
 	SupportPage,
+	TraceDetailOldRedirect,
 	TraceDetailV3,
+	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
 	TracesFunnels,
@@ -127,6 +131,14 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
+	// Legacy /trace-old/:id redirects to the current /trace/:id view.
+	{
+		path: ROUTES.TRACE_DETAIL_OLD,
+		exact: true,
+		component: TraceDetailOldRedirect,
+		isPrivate: true,
+		key: 'TRACE_DETAIL_OLD',
+	},
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -211,6 +223,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
+	{
+		path: ROUTES.TRACE,
+		exact: true,
+		component: TraceFilter,
+		isPrivate: true,
+		key: 'TRACE',
+	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
 		exact: true,
@@ -281,6 +300,20 @@ const routes: AppRoutes[] = [
 		key: 'LOGS',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LOGS_EXPLORER,
+		exact: true,
+		component: LogsExplorer,
+		key: 'LOGS_EXPLORER',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.LIVE_LOGS,
+		exact: true,
+		component: LiveLogs,
+		key: 'LIVE_LOGS',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
 		exact: true,
@@ -513,12 +546,9 @@ export const LIST_LICENSES: AppRoutes = {
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
-	'/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',
+	'/logs-explorer/live': '/logs/logs-explorer/live',
+	'/logs-save-views': '/logs/saved-views',
+	'/traces-save-views': '/traces/saved-views',
 	'/settings/access-tokens': '/settings/service-accounts',
 	'/settings/api-keys': '/settings/service-accounts',
 	'/messaging-queues': '/messaging-queues/overview',

frontend/src/api/ErrorResponseHandler.ts

@@ -41,16 +41,17 @@ 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

@@ -1,24 +0,0 @@
-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/ai-assistant/sigNozAIAssistantAPI.schemas.ts

@@ -220,7 +220,8 @@ export type ClarificationSummaryDTODiscoveredContextAnyOf = {
 	[key: string]: unknown;
 };
 
-export type ClarificationSummaryDTODiscoveredContext = ClarificationSummaryDTODiscoveredContextAnyOf | null;
+export type ClarificationSummaryDTODiscoveredContext =
+	ClarificationSummaryDTODiscoveredContextAnyOf | null;
 
 export interface ClarificationSummaryDTO {
 	/**
@@ -783,7 +784,8 @@ export type ThreadDetailResponseDTOActiveExecutionId = string | null;
 
 export type ThreadDetailResponseDTOPendingApproval = ApprovalSummaryDTO | null;
 
-export type ThreadDetailResponseDTOPendingClarification = ClarificationSummaryDTO | null;
+export type ThreadDetailResponseDTOPendingClarification =
+	ClarificationSummaryDTO | null;
 
 /**
  * Full thread state for cold-start reconstruction (GET /threads/{id}).
@@ -973,7 +975,8 @@ export type ClarificationEventDTODiscoveredContextAnyOf = {
 	[key: string]: unknown;
 };
 
-export type ClarificationEventDTODiscoveredContext = ClarificationEventDTODiscoveredContextAnyOf | null;
+export type ClarificationEventDTODiscoveredContext =
+	ClarificationEventDTODiscoveredContextAnyOf | null;
 
 export interface ClarificationEventDTO {
 	/**
@@ -1296,7 +1299,8 @@ export type CreateThreadApiV1AssistantThreadsPostHeaders = {
 	'X-SigNoz-URL'?: string | null;
 };
 
-export type CreateThreadApiV1AssistantThreadsPostBody = CreateThreadRequestDTO | null;
+export type CreateThreadApiV1AssistantThreadsPostBody =
+	CreateThreadRequestDTO | null;
 
 export type ListThreadsApiV1AssistantThreadsGetParams = {
 	/**

frontend/src/api/channels/createEmail.ts

@@ -0,0 +1,40 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createEmail';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			email_configs: [
+				{
+					send_resolved: props.send_resolved,
+					to: props.to,
+					html: props.html,
+					headers: props.headers,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/createMsTeams.ts

@@ -0,0 +1,40 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			msteamsv2_configs: [
+				{
+					send_resolved: props.send_resolved,
+					webhook_url: props.webhook_url,
+					title: props.title,
+					text: props.text,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/createOpsgenie.ts

@@ -0,0 +1,43 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			opsgenie_configs: [
+				{
+					api_key: props.api_key,
+					description: props.description,
+					priority: props.priority,
+					message: props.message,
+					details: {
+						...props.detailsArray,
+					},
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/createPager.ts

@@ -0,0 +1,48 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createPager';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			pagerduty_configs: [
+				{
+					send_resolved: props.send_resolved,
+					routing_key: props.routing_key,
+					client: props.client,
+					client_url: props.client_url,
+					description: props.description,
+					severity: props.severity,
+					class: props.class,
+					component: props.component,
+					group: props.group,
+					details: {
+						...props.detailsArray,
+					},
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/createSlack.ts

@@ -0,0 +1,41 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createSlack';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			slack_configs: [
+				{
+					send_resolved: props.send_resolved,
+					api_url: props.api_url,
+					channel: props.channel,
+					title: props.title,
+					text: props.text,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/createWebhook.ts

@@ -0,0 +1,59 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/createWebhook';
+
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const create = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		let httpConfig = {};
+		const username = props.username ? props.username.trim() : '';
+		const password = props.password ? props.password.trim() : '';
+
+		if (username !== '' && password !== '') {
+			httpConfig = {
+				basic_auth: {
+					username,
+					password,
+				},
+			};
+		} else if (username === '' && password !== '') {
+			httpConfig = {
+				authorization: {
+					type: 'Bearer',
+					credentials: password,
+				},
+			};
+		}
+
+		const response = await axios.post<PayloadProps>('/channels', {
+			name: props.name,
+			webhook_configs: [
+				{
+					send_resolved: props.send_resolved,
+					url: props.api_url,
+					http_config: httpConfig,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default create;

frontend/src/api/channels/delete.ts

@@ -0,0 +1,30 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/delete';
+
+/**
+ * @deprecated Use the generated `useDeleteChannelByID` hook (or `deleteChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const deleteChannel = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.delete<PayloadProps>(`/channels/${props.id}`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default deleteChannel;

frontend/src/api/channels/editEmail.ts

@@ -0,0 +1,40 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/editEmail';
+
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const editEmail = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+			name: props.name,
+			email_configs: [
+				{
+					send_resolved: props.send_resolved,
+					to: props.to,
+					html: props.html,
+					headers: props.headers,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default editEmail;

frontend/src/api/channels/editMsTeams.ts

@@ -0,0 +1,40 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/editMsTeams';
+
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const editMsTeams = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+			name: props.name,
+			msteamsv2_configs: [
+				{
+					send_resolved: props.send_resolved,
+					webhook_url: props.webhook_url,
+					title: props.title,
+					text: props.text,
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default editMsTeams;

frontend/src/api/channels/editOpsgenie.ts

@@ -0,0 +1,44 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponse, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/channels/editOpsgenie';
+
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const editOpsgenie = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
+			name: props.name,
+			opsgenie_configs: [
+				{
+					send_resolved: props.send_resolved,
+					api_key: props.api_key,
+					description: props.description,
+					priority: props.priority,
+					message: props.message,
+					details: {
+						...props.detailsArray,
+					},
+				},
+			],
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default editOpsgenie;