fix: lint

#### Description

- Opening an explorer with a `viewName`/`viewKey` in the URL that isn't
valid JSON crashed the whole page.
- The hook ran `JSON.parse` on the raw param during render, so a bare
saved-view name threw error and broke page.
- Fix: wrap `JSON.parse` in try/catch and fall back to the raw string.
- Renamed the hook to `useGetSavedViewParams` and moved it under
`hooks/saveViews`; it only reads `viewName`/`viewKey` so the old
query-builder name/location was misleading. Now returns `{ viewName,
viewKey }` directly.
- Behavior preserved for all consumers; added tests for the non-JSON
case.


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

Screenshots/Recording

Before:

Test url: Just remove quotes from viewKey or viewName:
[url](https://app.us.staging.signoz.cloud/logs/logs-explorer?relativeTime=1month&compositeQuery=%257B%2522queryType%2522%253A%2522builder%2522%252C%2522builder%2522%253A%257B%2522queryData%2522%253A%255B%257B%2522dataSource%2522%253A%2522logs%2522%252C%2522queryName%2522%253A%2522A%2522%252C%2522aggregateOperator%2522%253A%2522count%2522%252C%2522aggregateAttribute%2522%253A%257B%2522id%2522%253A%2522----%2522%252C%2522dataType%2522%253A%2522%2522%252C%2522key%2522%253A%2522%2522%252C%2522type%2522%253A%2522%2522%257D%252C%2522timeAggregation%2522%253A%2522rate%2522%252C%2522spaceAggregation%2522%253A%2522sum%2522%252C%2522filter%2522%253A%257B%2522expression%2522%253A%2522%2522%257D%252C%2522aggregations%2522%253A%255B%257B%2522expression%2522%253A%2522count%28%29%2522%257D%255D%252C%2522functions%2522%253Anull%252C%2522filters%2522%253A%257B%2522items%2522%253A%255B%257B%2522id%2522%253A%2522228b8a2f-d6ba-4704-9104-936e91a2c119%2522%252C%2522key%2522%253A%257B%2522id%2522%253A%2522code.function--string--tag%2522%252C%2522dataType%2522%253A%2522string%2522%252C%2522key%2522%253A%2522code.function%2522%252C%2522type%2522%253A%2522tag%2522%257D%252C%2522op%2522%253A%2522%253D%2522%252C%2522value%2522%253A%2522render_test%2522%257D%255D%252C%2522op%2522%253A%2522AND%2522%257D%252C%2522expression%2522%253A%2522A%2522%252C%2522disabled%2522%253Afalse%252C%2522stepInterval%2522%253A0%252C%2522having%2522%253A%257B%2522expression%2522%253A%2522%2522%257D%252C%2522limit%2522%253Anull%252C%2522orderBy%2522%253A%255B%255D%252C%2522groupBy%2522%253A%255B%255D%252C%2522legend%2522%253A%2522%2522%252C%2522reduceTo%2522%253A%2522avg%2522%252C%2522source%2522%253A%2522%2522%252C%2522name%2522%253A%2522A%2522%252C%2522signal%2522%253A%2522logs%2522%252C%2522order%2522%253Anull%252C%2522selectFields%2522%253Anull%252C%2522secondaryAggregations%2522%253Anull%257D%255D%252C%2522queryFormulas%2522%253A%255B%255D%252C%2522queryTraceOperator%2522%253A%255B%255D%257D%252C%2522promql%2522%253A%255B%257B%2522name%2522%253A%2522A%2522%252C%2522query%2522%253A%2522%2522%252C%2522legend%2522%253A%2522%2522%252C%2522disabled%2522%253Afalse%257D%255D%252C%2522clickhouse_sql%2522%253A%255B%257B%2522name%2522%253A%2522A%2522%252C%2522legend%2522%253A%2522%2522%252C%2522disabled%2522%253Afalse%252C%2522query%2522%253A%2522%2522%257D%255D%252C%2522id%2522%253A%2522bfb926e4-7b98-4cf4-bd4d-adcbd18a1da2%2522%252C%2522unit%2522%253A%2522%2522%257D&options=%7B%22selectColumns%22%3A%5B%7B%22name%22%3A%22timestamp%22%2C%22signal%22%3A%22logs%22%2C%22fieldContext%22%3A%22log%22%2C%22fieldDataType%22%3A%22%22%7D%2C%7B%22name%22%3A%22lkadsjfl%22%2C%22signal%22%3A%22%22%2C%22fieldContext%22%3A%22%22%2C%22fieldDataType%22%3A%22%22%7D%2C%7B%22name%22%3A%22body%22%2C%22signal%22%3A%22logs%22%2C%22fieldContext%22%3A%22log%22%2C%22fieldDataType%22%3A%22%22%7D%2C%7B%22name%22%3A%22test%22%2C%22signal%22%3A%22%22%2C%22fieldContext%22%3A%22%22%2C%22fieldDataType%22%3A%22%22%7D%2C%7B%22name%22%3A%22severity_text%22%2C%22description%22%3A%22Log+level.+Learn+more+%5Bhere%5D%28https%3A%2F%2Fopentelemetry.io%2Fdocs%2Fspecs%2Fotel%2Flogs%2Fdata-model%2F%23field-severitytext%29%22%2C%22signal%22%3A%22logs%22%2C%22fieldContext%22%3A%22log%22%2C%22fieldDataType%22%3A%22string%22%7D%5D%2C%22format%22%3A%22list%22%2C%22maxLines%22%3A1%2C%22fontSize%22%3A%22small%22%7D&panelTypes=%22list%22&viewName=%22test+manul+key%22&viewKey=068e4a96-5225-4abe-8f9b-a5009f26d4ce)

Breaks page

<img width="3456" height="1720" alt="image"
src="https://github.com/user-attachments/assets/4d7546a3-b5cb-4be3-bc9f-e0782446f7f1"
/>



#### Additional Information

Sentry: https://signoz-io.sentry.io/issues/7520808361

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

@@ -20,6 +20,16 @@ You are the Playwright Test Generator for the SigNoz frontend. You take a plan w
     await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
   });
   ```
+- **Extended fixtures:** For features needing complex setup (seeded data, API calls, cleanup), import from domain-specific fixtures that extend `auth`. See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the full pattern.
+  - `fixtures/alerts/alert-rules` — worker-scoped rule list + test-scoped rule factory
+  - `fixtures/alerts/alert-history` — extends alert-rules, adds history fixtures (waits on ruler evaluation)
+  ```ts
+  // Alert list tests - need rules, no history
+  import { test, expect } from '../../../fixtures/alerts/alert-rules';
+  
+  // Alert history tests - need evaluated history rows
+  import { test, expect } from '../../../fixtures/alerts/alert-history';
+  ```
 - **Test titles:** `TC-NN <short description>` — matches the planner's IDs.
 - **Self-contained state.** The bootstrap creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Two cleanup shapes are valid; pick based on the spec size:
   - **Per-test `try / finally`** — small specs (~ <10 scenarios) where each test owns its data.

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

@@ -49,6 +49,7 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
 - **The list pages render zero-state when the workspace is empty.** Many locators (search input, sort button, `new-dashboard-cta` testid, "All Dashboards" header) are absent in zero-state. A 30s timeout on those usually means the workspace was empty — seed first via `createDashboardViaApi`.
 - **The "Enter dashboard name…" inline field is a `RequestDashboardBtn` (template-request feedback form), not a create flow.** Tests that try to use it to create a named dashboard will silently no-op. The only UI create paths are the "New dashboard" dropdown → "Create dashboard" (default name "Sample Title", see `DEFAULT_DASHBOARD_TITLE`) or "Import JSON".
 - **Auth.** `tests/e2e/fixtures/auth.ts` logs in once per worker and caches `storageState` (cookies + localStorage with `AUTH_TOKEN`). For API-driven seeding/cleanup, use `authToken(page)` from `helpers/dashboards.ts` and pass `Authorization: Bearer <token>`. Never re-implement login.
+- **Extended fixtures.** Domain-specific fixtures extend `auth` and add seeded data. Alerts uses `fixtures/alerts/alert-rules` (worker-scoped rule list, test-scoped factory) and `fixtures/alerts/alert-history` (extends alert-rules, waits on ruler evaluation). See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the pattern. When a test fails on missing data, check if it imports the wrong fixture level.
 - **Ant Design popovers** (sort menu, action menu) are click-toggle. The trigger element is often an inline `<svg>` with a `data-testid` — clicking it opens the popover; clicking it again closes. After selecting an option, the popover auto-closes. If a test interacts with the popover twice, wait for the menu items to be visible explicitly between toggles.
 - **Artifacts.** Every failed test writes to `tests/e2e/artifacts/results/<test-slug>/` — the `error-context.md` accessibility snapshot is the fastest way to see what the page actually looked like when it failed.
 - **Type-check.** After edits, run `npx tsc --noEmit -p tests/e2e/tsconfig.json` if it succeeds, or rely on `npx playwright test --list` to validate the spec parses.

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

@@ -1,95 +0,0 @@
----
-name: signoz-page-story
-description: Explore a SigNoz page, map the endpoints, states and query params it has, then write its Storybook page story with control-driven msw mocks that reach every state. Use when asked to create, extend or review a Storybook story for a page under frontend/src/pages, to add controls to an existing page story, or to write defineStoryMocks handlers and mock data for a page.
----
-
-# 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.
-
-`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.
-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.
-
-## 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**: `src/pages/<Page>/<Page>.stories.tsx`,
-  `src/pages/<Page>/<Page>.stories.mocks.tsx`, payload builders in
-  `src/pages/<Page>/__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
-  /**
-   * AI-owned. Generated and maintained by the `signoz-page-story` skill.
-   * Do not hand-edit: regenerate instead.
-   */
-  ```
-
-  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
-- [ ] 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
-- [ ] 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

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

@@ -1,167 +0,0 @@
-# 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.
-
-## 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.
-
-| Import | From |
-| --- | --- |
-| `toggleControl`, `countControl`, `choiceControl`, `multiChoiceControl` | `../controls/controls` |
-| `defineStoryMocks`, `storyMocks` | `../controls/defineStoryMocks` |
-| `PageStoryArgs` | `../controls/resolveStoryMocks` |
-| `MockRequest`, `MockResponse` | `../controls/types` |
-| `withAppLayout` | `@/storybook/decorators/withAppLayout` |
-| the page's mocks, from the story | `./<Page>.stories.mocks` |
-| `queryRangeV5ScalarResponse`, `queryRangeV5RawResponse`, etc. | `@/storybook/msw/__story_mockdata__/queryRange` |
-
-## Which builder
-
-`src/storybook/controls/controls.ts`:
-
-| The state is | Builder |
-| --- | --- |
-| on or off (a signal ingesting, a feature present) | `toggleControl` |
-| how many rows a list has | `countControl` |
-| one of several modes (tab, visibility, plan, severity filter) | `choiceControl` |
-| a subset (steps skipped, columns shown, signals selected) | `multiChoiceControl` |
-
-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).
-
-## 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`.
-- `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:
-
-```ts
-rest.get(
-	'http://localhost/api/v1/explorer/views',
-	response.json((req) =>
-		savedViews(values.savedViews, req.url.searchParams.get('sourcePage') ?? 'logs'),
-	),
-),
-```
-
-```ts
-rest.post(
-	'http://localhost/api/v5/query_range',
-	response.json(async (req) => {
-		const body = (await req.json()) as QueryRangeRequestV5;
-		const signal = body.compositeQuery?.queries?.[0]?.spec?.signal;
-
-		return countResponse(values[`${signal}Ingestion`] ? 4213 : 0);
-	}),
-),
-```
-
-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.
-
-## Wiring it up
-
-```ts
-// src/pages/Services/Services.stories.mocks.tsx
-/**
- * AI-owned. Generated and maintained by the `signoz-page-story` skill.
- * Do not hand-edit: regenerate instead.
- */
-export const servicesMocks = defineStoryMocks({
-	controls: {
-		services: countControl('Services', { group: LISTS, value: 8, max: 12 }),
-		apdex: choiceControl<ApdexState>('Apdex', {
-			group: HEALTH,
-			options: APDEX_STATES,
-			value: 'mixed',
-		}),
-	},
-	handlers: (values, response) => [
-		rest.post(
-			'http://localhost/api/v2/services',
-			response.json(() => buildServices(values.services, values.apdex)),
-		),
-	],
-});
-```
-
-```tsx
-// src/pages/Services/Services.stories.tsx
-type ServicesArgs = PageStoryArgs<typeof servicesMocks>;
-
-const meta = {
-	title: 'Pages/Services',
-	component: Services,
-	decorators: [withAppLayout],
-	...storyMocks(servicesMocks, { route: ROUTES.APPLICATION }),
-} 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.
-
-## Not a control
-
-- 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
-
-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.

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

@@ -1,64 +0,0 @@
-# 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.
-
-## 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.
-
-Grep recipes, run against the page's directories:
-
-| Looking for | Grep |
-| --- | --- |
-| endpoints | `useQuery\|useMutation\|useInfiniteQuery`, then the `api/` module it calls |
-| endpoint URLs | the api module's `axios.get\|post` |
-| endpoint URLs behind a generated hook | the hook lives in `src/api/generated/services/<name>/index.ts` and the URL only appears in the fetcher body: `rg 'url: \`' src/api/generated/services/<name>/` |
-| url state | `useUrlQuery\|useUrlQueryData\|useUrlSearchState\|useQueryState\|QueryParams\.` |
-| navigation | `useSafeNavigate\|history.push\|<Link` |
-| permissions | `useAuthZ\|AuthZGuard\|AuthZButton\|hasEditPermission\|routePermission` |
-| flags and prefs | `useFeatureFlag\|FeatureKeys\.\|USER_PREFERENCES\.\|userPreferences` |
-| 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.
-
-## The inventory
-
-One table, in the story's PR or scratch notes:
-
-| 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).
-- **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.
-
-## Pass 2: let it run
-
-Write the story and an empty `defineStoryMocks({ controls: {} })`, point it at the
-route, add `withAppLayout`, 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.
-
-Repeat until the console is silent. Only then start declaring controls.

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

@@ -1,110 +0,0 @@
-# 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.
-
-## Run it
-
-```bash
-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.
-
-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--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=services:0;apdex:poor;access:viewer;dataState:loading
-&args=signals[0]:logs;signals[1]:traces
-&globals=theme:light
-```
-
-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:
-
-```js
-import pw from '<repo>/tests/e2e/node_modules/playwright/index.js';
-const { chromium } = pw;
-
-const browser = await chromium.launch();
-const page = await browser.newPage();
-const problems = [];
-page.on('console', (m) => {
-	if (m.type() === 'error' || m.type() === 'warning') problems.push(m.text());
-});
-page.on('pageerror', (e) => problems.push(e.message));
-
-await page.goto(`${story}&args=services:0`, { waitUntil: 'networkidle' });
-await page.locator('body').waitFor();
-console.log((await page.locator('body').innerText()).slice(0, 1500), problems);
-await browser.close();
-```
-
-Screenshots are worth taking for `Default` in both themes
-(`&globals=theme:light`): text extraction does not catch an unstyled page.
-
-## 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.
-
-## Then the usual
-
-```bash
-pnpm tsgo --noEmit
-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.
-
-## Common failures
-
-| Symptom | Cause |
-| --- | --- |
-| endless spinner with Data on `loaded` | handler URL does not match the call; handlers answer on `http://localhost` |
-| page renders but empty | response shape wrong; compare against the api module's type, not a guess |
-| 501 in the console | endpoint nobody mocked; the catch-all is answering |
-| new control missing from the panel | project-level control added; the tab needs a reload |
-| control flips but nothing changes | the widget is gated by something else: a permission, a flag, a preference |
-| shell disappears in `loading` | an endpoint the shell needs went through `response.json`; give it a plain resolver |

.gitattributes

@@ -1,3 +1 @@
-*.css linguist-detectable=false
-*.stories.mocks.tsx linguist-generated=true
-**/__story_mockdata__/** linguist-generated=true
+*.css linguist-detectable=false

.github/workflows/integrationci.yaml

@@ -62,6 +62,7 @@ jobs:
           - role
           - rootuser
           - savedview
+          - semconvfamilies
           - serviceaccount
           - spanmapper
           - querier_json_body

cmd/community/server.go

@@ -46,6 +46,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
@@ -103,8 +104,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing, tagModule tag.Module) dashboard.Module {
-			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, tagModule)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
+			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, tagModule, systemDashboardRegistry)
 		},
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()

cmd/enterprise/server.go

@@ -63,6 +63,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
@@ -136,8 +137,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 			}
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
-			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing, tagModule)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
+			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing, tagModule, systemDashboardRegistry)
 		},
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)

docs/api/openapi.yml

@@ -2559,6 +2559,7 @@ components:
       - factor-api-key
       - license
       - subscription
+      - deployment-host
       - logs
       - traces
       - metrics
@@ -8010,6 +8011,7 @@ components:
       - logs
       - metrics
       - meter
+      - ai_observability
       type: string
     SavedviewtypesUpdatableSavedView:
       properties:
@@ -8800,6 +8802,7 @@ components:
       - span
       - trace
       - resource
+      - scope
       - attribute
       - body
       - ""
@@ -15356,6 +15359,73 @@ paths:
       summary: Migrate dashboard to v2
       tags:
       - dashboard
+  /api/v2/dashboards/system/{name}:
+    get:
+      deprecated: false
+      description: Returns a dashboard SigNoz ships and owns, addressed by its stable
+        definition name (e.g. `ai-o11y-overview`) rather than its id. System dashboards
+        are read-only and upgraded through releases. The dashboard's own `name` field
+        carries a reserved prefix that the path segment must not include.
+      operationId: GetSystemDashboard
+      parameters:
+      - in: path
+        name: name
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - dashboard:read
+      - tokenizer:
+        - dashboard:read
+      summary: Get system dashboard
+      tags:
+      - dashboard
   /api/v2/factor_password/forgot:
     post:
       deprecated: false
@@ -15467,10 +15537,8 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
+      - api_key: []
+      - tokenizer: []
       summary: Get features
       tags:
       - features
@@ -23942,9 +24010,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - deployment-host:list
       - tokenizer:
-        - VIEWER
+        - deployment-host:list
       summary: Get host info from Zeus.
       tags:
       - zeus
@@ -23998,9 +24066,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - deployment-host:update
       - tokenizer:
-        - ADMIN
+        - deployment-host:update
       summary: Put host in Zeus for a deployment.
       tags:
       - zeus

docs/contributing/tests/e2e.md

@@ -112,6 +112,41 @@ 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/`.
 
+### 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>/`.
+
+**Fixture scopes:**
+- **test scope** — fresh data per test. Use for mutations (edit, delete, rename).
+- **worker scope** — shared across tests in one worker. Use for read-only data. Worker scope pays the setup cost once per worker instead of once per test.
+
+**The alerts pattern** (`fixtures/alerts/`) demonstrates extending fixtures:
+
+```
+fixtures/alerts/
+├── alert-rules.ts   # extends auth — worker-scoped rule list + test-scoped factory
+└── alert-history.ts # extends alert-rules — adds history fixtures (waits on ruler)
+```
+
+Specs import from the fixture they need:
+
+```ts
+// List tests — just need rules, no history
+import { test, expect } from '../../../fixtures/alerts/alert-rules';
+
+// History tests — need history rows from ruler evaluation
+import { test, expect } from '../../../fixtures/alerts/alert-history';
+```
+
+**When creating new fixtures:**
+
+1. **Identify scope** — Will tests mutate the data? If yes, test-scoped. If read-only, worker-scoped.
+2. **Group by domain** — Put fixtures in `fixtures/<domain>/`. Helpers in `helpers/<domain>/`.
+3. **Extend existing fixtures** — Chain from `auth` or another fixture to inherit its setup.
+4. **Handle timeouts** — Worker-scoped fixtures that wait on backend processing need explicit timeouts.
+5. **Clean up** — Always delete seeded data in the fixture teardown (after `use()`).
+6. **Extract logic into functions** — Keep the `test.extend()` block lean; move setup/teardown logic to named functions so the extend block reads as a manifest of "what fixtures exist."
+
 Each spec follows these principles:
 
 1. **Directory per feature**: `tests/e2e/tests/<feature>/*.spec.ts`. Cross-resource junction concerns (e.g. cascade-delete) go in their own file, not packed into one giant spec.
@@ -232,11 +267,14 @@ cd tests/e2e
 # Single feature dir
 npx playwright test tests/alerts/ --project=chromium
 
+# Single sub-area
+npx playwright test tests/alerts/history/ --project=chromium
+
 # Single file
-npx playwright test tests/alerts/alerts.spec.ts --project=chromium
+npx playwright test tests/alerts/page.spec.ts --project=chromium
 
 # Single test by title grep
-npx playwright test --project=chromium -g "TC-01"
+npx playwright test --project=chromium -g "AL-01"
 ```
 
 ### Iterative modes
@@ -270,7 +308,14 @@ yarn test:staging
 | `SIGNOZ_E2E_PASSWORD` | Admin password. Bootstrap writes the integration-test default. |
 | `SIGNOZ_E2E_SEEDER_URL` | Seeder HTTP base URL — hit by specs that need per-test telemetry. |
 
-Loading order in `playwright.config.ts`: `.env` first (user-provided, staging), then `.env.local` with `override: true` (bootstrap-generated, local mode). Anything already set in `process.env` at yarn-test time wins because dotenv doesn't touch vars that are already present.
+Precedence in `playwright.config.ts`, lowest to highest: `.env` (user-provided, staging) → `.env.local` (bootstrap-generated, local mode) → whatever is already in `process.env`. The config parses both files itself and only fills in keys the environment does not already define, so exporting a variable always wins:
+
+```bash
+# runs against a locally served frontend, not whatever .env.local points at
+SIGNOZ_E2E_BASE_URL=http://127.0.0.1:3301 pnpm test tests/alerts
+```
+
+This is deliberately not `dotenv.config({ override: true })`. That flag makes the *file* beat `process.env`, which silently discarded exported values — including the `SIGNOZ_E2E_BASE_URL` in `pnpm test:staging`, whenever a `.env.local` happened to exist.
 
 ### Playwright options
 

ee/modules/dashboard/impldashboard/module.go

@@ -32,9 +32,9 @@ type module struct {
 	tagModule          tag.Module
 }
 
-func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
+func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard")
-	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser, tagModule)
+	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser, tagModule, systemDashboardRegistry)
 
 	return &module{
 		pkgDashboardModule: pkgDashboardModule,
@@ -276,6 +276,10 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
 
+func (module *module) GetByNameV2(ctx context.Context, orgID valuer.UUID, name string) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.GetByNameV2(ctx, orgID, name)
+}
+
 func (module *module) MigrateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.MigrateV2(ctx, orgID, id)
 }
@@ -284,6 +288,10 @@ func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer
 	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updatable)
 }
 
+func (module *module) UpdateUnsafeV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.UpdateUnsafeV2(ctx, orgID, id, updatedBy, updatable)
+}
+
 func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.PatchV2(ctx, orgID, id, updatedBy, patch)
 }
@@ -361,6 +369,14 @@ func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valu
 	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)
+}
+
+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) {

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

@@ -67,7 +67,7 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// note: add ee override methods first
 
 	// routes available only in ee version
-	router.HandleFunc("/api/v1/features", am.ViewAccess(ah.getFeatureFlags)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/features", am.OpenAccess(ah.getFeatureFlags)).Methods(http.MethodGet)
 
 	// base overrides
 	router.HandleFunc("/api/v1/version", am.OpenAccess(ah.getVersion)).Methods(http.MethodGet)

frontend/.gitignore

@@ -28,8 +28,4 @@ e2e/test-plan/saved-views/
 e2e/test-plan/service-map/
 e2e/test-plan/services/
 e2e/test-plan/traces/
-e2e/test-plan/user-preferences/
-
-# Storybook
-/storybook-static/
-debug-storybook.log
+e2e/test-plan/user-preferences/

frontend/.storybook/main.ts

@@ -1,89 +0,0 @@
-import { dirname, resolve } from 'path';
-import { fileURLToPath } from 'url';
-import type { StorybookConfig } from '@storybook/react-vite';
-import type { Plugin, PluginOption } from 'vite';
-
-const srcPath = resolve(dirname(fileURLToPath(import.meta.url)), '../src');
-
-/**
- * Modules replaced for every story. Same idea as `moduleNameMapper` in
- * `jest.config.ts`: the app keeps importing its own paths, Storybook resolves
- * them to a mock. Regexes so only exact specifiers match: `lib/history` must
- * not catch `lib/historyUtils`.
- *
- * Each replacement is typed as the module it stands in for, so drift is a
- * compile error rather than a story that fails at render. The `jest` note on
- * each entry is where the same import lands under the other runner. The two
- * only diverge where the runner needs them to.
- */
-const mockAliases = [
-	{
-		// jest: not replaced, jsdom drives a real browser history.
-		find: /^(?:src\/)?lib\/history$/,
-		replacement: `${srcPath}/storybook/navigation/history.alias.ts`,
-	},
-	{
-		// jest: src/__tests__/logEventMock.ts
-		find: /^(?:src\/)?api\/common\/logEvent$/,
-		replacement: `${srcPath}/storybook/mocks/logEvent.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`,
-	},
-];
-
-/**
- * Plugins from `vite.config.ts` that either target the app's `index.html` or
- * only pay off in a production build.
- */
-const EXCLUDED_PLUGINS = [
-	'vite-plugin-checker',
-	'dev-base-path',
-	'dev-boot-data',
-	'vite-plugin-image-optimizer',
-	'vite-plugin-compression',
-];
-
-const isExcluded = (plugin: PluginOption): boolean =>
-	!!plugin &&
-	typeof plugin === 'object' &&
-	'name' in plugin &&
-	EXCLUDED_PLUGINS.includes((plugin as Plugin).name);
-
-const config: StorybookConfig = {
-	framework: '@storybook/react-vite',
-	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'],
-	core: { disableTelemetry: true },
-	viteFinal: async (viteConfig) => {
-		const plugins = (viteConfig.plugins ?? [])
-			.flat(Infinity as 1)
-			.filter((plugin) => !isExcluded(plugin as PluginOption));
-
-		const existingAlias = viteConfig.resolve?.alias;
-		const normalizedAlias = Array.isArray(existingAlias)
-			? existingAlias
-			: Object.entries(existingAlias ?? {}).map(([find, replacement]) => ({
-					find,
-					replacement: replacement as string,
-				}));
-
-		return {
-			...viteConfig,
-			plugins,
-			resolve: {
-				...viteConfig.resolve,
-				alias: [...mockAliases, ...normalizedAlias],
-			},
-		};
-	},
-};
-
-export default config;

frontend/.storybook/preview-head.html

@@ -1,24 +0,0 @@
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-	href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
-	rel="stylesheet"
-/>
-<link rel="stylesheet" href="css/uPlot.min.css" />
-
-<script>
-	// i18n's language detector would pick the browser locale (e.g. `en-US`), which
-	// /public/locales does not ship; pin it to the bundled language instead.
-	window.localStorage.setItem('i18nextLng', 'en');
-
-	// The Go backend injects this at boot; every integration it enables is off in
-	// Storybook so no third-party script loads inside the iframe.
-	window.signozBootData = {
-		settings: {
-			posthog: { enabled: false, apiHost: '', key: '', uiHost: '' },
-			appcues: { enabled: false, appId: '' },
-			sentry: { enabled: false, dsn: '', tunnel: '' },
-			pylon: { enabled: false, appId: '', identitySecret: '' },
-		},
-	};
-</script>

frontend/.storybook/preview.tsx

@@ -1,110 +0,0 @@
-import type { Preview } from '@storybook/react-vite';
-import type { SetupWorker } from 'msw';
-import { setupWorker } from 'msw';
-
-import { withProviders } from '../src/storybook/decorators/withProviders';
-import { globalMocks } from '../src/storybook/globals';
-import { resetStoryHistory } from '../src/storybook/navigation/containment';
-import { clearBlockedNavigations } from '../src/storybook/navigation/blockedNavigationStore';
-import {
-	resolveStory,
-	type StoryRuntimeContext,
-} from '../src/storybook/runtime/resolveStory';
-
-import '../src/ReactI18';
-
-import '../src/styles.scss';
-
-import '../src/storybook/storybook-root.scss';
-
-interface StorybookWorkerHolder {
-	__signozStorybookWorker?: StorybookWorker;
-}
-
-const holder = window as unknown as StorybookWorkerHolder;
-
-/**
- * One worker per page, even if this module is re-executed by HMR. Two live
- * workers both answer the service worker and the story gets whichever replies
- * first.
- */
-interface StorybookWorker {
-	worker: SetupWorker;
-	ready: Promise<unknown>;
-}
-
-const { worker, ready } = (holder.__signozStorybookWorker ??=
-	((): StorybookWorker => {
-		const instance = setupWorker();
-
-		return {
-			worker: instance,
-			ready: instance.start({
-				serviceWorker: { url: './mockServiceWorker.js' },
-				// Storybook's own traffic (index.json, HMR, telemetry) goes unhandled by
-				// design; only flag the app's API calls so a missing handler is obvious.
-				onUnhandledRequest: (request, print): void => {
-					const url = new URL(request.url.href);
-					const isStaticAsset =
-						/\.(?:woff2?|ttf|otf|css|js|map|png|jpe?g|svg|webp|ico)$/.test(
-							url.pathname,
-						);
-					const isAppRequest =
-						!isStaticAsset &&
-						(url.pathname.startsWith('/api/') || url.host !== window.location.host);
-
-					if (isAppRequest) {
-						print.warning();
-					}
-				},
-			}),
-		};
-	})());
-
-const preview: Preview = {
-	parameters: {
-		layout: 'fullscreen',
-		controls: { expanded: true },
-	},
-	globalTypes: {
-		theme: {
-			description: 'SigNoz color scheme',
-			toolbar: {
-				title: 'Theme',
-				icon: 'paintbrush',
-				items: [
-					{ value: 'dark', title: 'Dark' },
-					{ value: 'light', title: 'Light' },
-				],
-				dynamicTitle: true,
-			},
-		},
-	},
-	initialGlobals: { theme: 'dark' },
-	// Controls every story carries: permissions, banners, and whether the page's
-	// own endpoints answer, hang or fail.
-	args: globalMocks.args,
-	argTypes: globalMocks.argTypes,
-	decorators: [withProviders],
-	loaders: [
-		// Runs on every render, args changes included, and ahead of the decorators:
-		// the whole story world is put in place here, so the provider tree only has
-		// to read it. Re-registering the handlers per render also means an edit to a
-		// handler module takes effect on the next render instead of leaving the
-		// worker on the set it was created with.
-		async (context): Promise<void> => {
-			const world = resolveStory(context as unknown as StoryRuntimeContext);
-
-			world.apply();
-			world.install(worker);
-
-			await ready;
-		},
-	],
-	beforeEach: () => {
-		clearBlockedNavigations();
-		resetStoryHistory();
-	},
-};
-
-export default preview;

frontend/.storybook/public/mockServiceWorker.js

@@ -1,303 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-
-/**
- * Mock Service Worker (1.3.2).
- * @see https://github.com/mswjs/msw
- * - Please do NOT modify this file.
- * - Please do NOT serve this file on production.
- */
-
-const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
-const activeClientIds = new Set()
-
-self.addEventListener('install', function () {
-  self.skipWaiting()
-})
-
-self.addEventListener('activate', function (event) {
-  event.waitUntil(self.clients.claim())
-})
-
-self.addEventListener('message', async function (event) {
-  const clientId = event.source.id
-
-  if (!clientId || !self.clients) {
-    return
-  }
-
-  const client = await self.clients.get(clientId)
-
-  if (!client) {
-    return
-  }
-
-  const allClients = await self.clients.matchAll({
-    type: 'window',
-  })
-
-  switch (event.data) {
-    case 'KEEPALIVE_REQUEST': {
-      sendToClient(client, {
-        type: 'KEEPALIVE_RESPONSE',
-      })
-      break
-    }
-
-    case 'INTEGRITY_CHECK_REQUEST': {
-      sendToClient(client, {
-        type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: INTEGRITY_CHECKSUM,
-      })
-      break
-    }
-
-    case 'MOCK_ACTIVATE': {
-      activeClientIds.add(clientId)
-
-      sendToClient(client, {
-        type: 'MOCKING_ENABLED',
-        payload: true,
-      })
-      break
-    }
-
-    case 'MOCK_DEACTIVATE': {
-      activeClientIds.delete(clientId)
-      break
-    }
-
-    case 'CLIENT_CLOSED': {
-      activeClientIds.delete(clientId)
-
-      const remainingClients = allClients.filter((client) => {
-        return client.id !== clientId
-      })
-
-      // Unregister itself when there are no more clients
-      if (remainingClients.length === 0) {
-        self.registration.unregister()
-      }
-
-      break
-    }
-  }
-})
-
-self.addEventListener('fetch', function (event) {
-  const { request } = event
-  const accept = request.headers.get('accept') || ''
-
-  // Bypass server-sent events.
-  if (accept.includes('text/event-stream')) {
-    return
-  }
-
-  // Bypass navigation requests.
-  if (request.mode === 'navigate') {
-    return
-  }
-
-  // Opening the DevTools triggers the "only-if-cached" request
-  // that cannot be handled by the worker. Bypass such requests.
-  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
-    return
-  }
-
-  // Bypass all requests when there are no active clients.
-  // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
-  if (activeClientIds.size === 0) {
-    return
-  }
-
-  // Generate unique request ID.
-  const requestId = Math.random().toString(16).slice(2)
-
-  event.respondWith(
-    handleRequest(event, requestId).catch((error) => {
-      if (error.name === 'NetworkError') {
-        console.warn(
-          '[MSW] Successfully emulated a network error for the "%s %s" request.',
-          request.method,
-          request.url,
-        )
-        return
-      }
-
-      // At this point, any exception indicates an issue with the original request/response.
-      console.error(
-        `\
-[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
-        request.method,
-        request.url,
-        `${error.name}: ${error.message}`,
-      )
-    }),
-  )
-})
-
-async function handleRequest(event, requestId) {
-  const client = await resolveMainClient(event)
-  const response = await getResponse(event, client, requestId)
-
-  // Send back the response clone for the "response:*" life-cycle events.
-  // Ensure MSW is active and ready to handle the message, otherwise
-  // this message will pend indefinitely.
-  if (client && activeClientIds.has(client.id)) {
-    ;(async function () {
-      const clonedResponse = response.clone()
-      sendToClient(client, {
-        type: 'RESPONSE',
-        payload: {
-          requestId,
-          type: clonedResponse.type,
-          ok: clonedResponse.ok,
-          status: clonedResponse.status,
-          statusText: clonedResponse.statusText,
-          body:
-            clonedResponse.body === null ? null : await clonedResponse.text(),
-          headers: Object.fromEntries(clonedResponse.headers.entries()),
-          redirected: clonedResponse.redirected,
-        },
-      })
-    })()
-  }
-
-  return response
-}
-
-// Resolve the main client for the given event.
-// Client that issues a request doesn't necessarily equal the client
-// that registered the worker. It's with the latter the worker should
-// communicate with during the response resolving phase.
-async function resolveMainClient(event) {
-  const client = await self.clients.get(event.clientId)
-
-  if (client?.frameType === 'top-level') {
-    return client
-  }
-
-  const allClients = await self.clients.matchAll({
-    type: 'window',
-  })
-
-  return allClients
-    .filter((client) => {
-      // Get only those clients that are currently visible.
-      return client.visibilityState === 'visible'
-    })
-    .find((client) => {
-      // Find the client ID that's recorded in the
-      // set of clients that have registered the worker.
-      return activeClientIds.has(client.id)
-    })
-}
-
-async function getResponse(event, client, requestId) {
-  const { request } = event
-  const clonedRequest = request.clone()
-
-  function passthrough() {
-    // Clone the request because it might've been already used
-    // (i.e. its body has been read and sent to the client).
-    const headers = Object.fromEntries(clonedRequest.headers.entries())
-
-    // Remove MSW-specific request headers so the bypassed requests
-    // comply with the server's CORS preflight check.
-    // Operate with the headers as an object because request "Headers"
-    // are immutable.
-    delete headers['x-msw-bypass']
-
-    return fetch(clonedRequest, { headers })
-  }
-
-  // Bypass mocking when the client is not active.
-  if (!client) {
-    return passthrough()
-  }
-
-  // Bypass initial page load requests (i.e. static assets).
-  // The absence of the immediate/parent client in the map of the active clients
-  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
-  // and is not ready to handle requests.
-  if (!activeClientIds.has(client.id)) {
-    return passthrough()
-  }
-
-  // Bypass requests with the explicit bypass header.
-  // Such requests can be issued by "ctx.fetch()".
-  if (request.headers.get('x-msw-bypass') === 'true') {
-    return passthrough()
-  }
-
-  // Notify the client that a request has been intercepted.
-  const clientMessage = await sendToClient(client, {
-    type: 'REQUEST',
-    payload: {
-      id: requestId,
-      url: request.url,
-      method: request.method,
-      headers: Object.fromEntries(request.headers.entries()),
-      cache: request.cache,
-      mode: request.mode,
-      credentials: request.credentials,
-      destination: request.destination,
-      integrity: request.integrity,
-      redirect: request.redirect,
-      referrer: request.referrer,
-      referrerPolicy: request.referrerPolicy,
-      body: await request.text(),
-      bodyUsed: request.bodyUsed,
-      keepalive: request.keepalive,
-    },
-  })
-
-  switch (clientMessage.type) {
-    case 'MOCK_RESPONSE': {
-      return respondWithMock(clientMessage.data)
-    }
-
-    case 'MOCK_NOT_FOUND': {
-      return passthrough()
-    }
-
-    case 'NETWORK_ERROR': {
-      const { name, message } = clientMessage.data
-      const networkError = new Error(message)
-      networkError.name = name
-
-      // Rejecting a "respondWith" promise emulates a network error.
-      throw networkError
-    }
-  }
-
-  return passthrough()
-}
-
-function sendToClient(client, message) {
-  return new Promise((resolve, reject) => {
-    const channel = new MessageChannel()
-
-    channel.port1.onmessage = (event) => {
-      if (event.data && event.data.error) {
-        return reject(event.data.error)
-      }
-
-      resolve(event.data)
-    }
-
-    client.postMessage(message, [channel.port2])
-  })
-}
-
-function sleep(timeMs) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, timeMs)
-  })
-}
-
-async function respondWithMock(response) {
-  await sleep(response.delay)
-  return new Response(response.body, response)
-}

frontend/README.md

@@ -88,17 +88,6 @@ pnpm test
 pnpm tsgo --noEmit
 ```
 
-## Storybook
-
-```bash
-pnpm storybook
-```
-
-Opens [http://localhost:6006](http://localhost:6006). Pages run against msw
-mocks with no backend; query-param navigation works inside a story, leaving the
-page is blocked. See [`src/storybook/README.md`](src/storybook/README.md) for the
-override surface.
-
 ## Linting
 
 ```bash

frontend/package.json

@@ -7,8 +7,6 @@
     "preinstall": "npx only-allow pnpm",
     "i18n:generate-hash": "node ./i18-generate-hash.cjs",
     "dev": "vite",
-    "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build -o storybook-static",
     "build": "vite build",
     "preview": "vite preview",
     "prettify": "oxfmt",
@@ -160,9 +158,6 @@
     "@commitlint/config-conventional": "20.4.4",
     "@jest/globals": "30.4.1",
     "@jest/types": "30.2.0",
-    "@storybook/addon-a11y": "10.5.9",
-    "@storybook/react-vite": "10.5.9",
-    "@testing-library/dom": "8.20.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
@@ -208,7 +203,6 @@
     "redux-mock-store": "1.5.4",
     "sass": "1.97.3",
     "sharp": "0.35.0",
-    "storybook": "10.5.9",
     "stylelint": "17.7.0",
     "svgo": "4.0.2",
     "ts-jest": "29.4.9",

frontend/src/api/ErrorResponseHandler.ts

@@ -53,7 +53,7 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 		};
 	}
 	// anything else
-	console.error('any');
+	console.error('ErrorResponseHandler: unclassified error');
 	return {
 		statusCode: 500,
 		payload: null,

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

@@ -46,6 +46,8 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
+	GetSystemDashboard200,
+	GetSystemDashboardPathParameters,
 	ListDashboardViews200,
 	ListDashboardsForUserV2200,
 	ListDashboardsForUserV2Params,
@@ -1885,6 +1887,108 @@ export const useMigrateDashboardV2 = <
 > => {
 	return useMutation(getMigrateDashboardV2MutationOptions(options));
 };
+/**
+ * Returns a dashboard SigNoz ships and owns, addressed by its stable definition name (e.g. `ai-o11y-overview`) rather than its id. System dashboards are read-only and upgraded through releases. The dashboard's own `name` field carries a reserved prefix that the path segment must not include.
+ * @summary Get system dashboard
+ */
+export const getSystemDashboard = (
+	{ name }: GetSystemDashboardPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetSystemDashboard200>({
+		url: `/api/v2/dashboards/system/${name}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetSystemDashboardQueryKey = ({
+	name,
+}: GetSystemDashboardPathParameters) => {
+	return [`/api/v2/dashboards/system/${name}`] as const;
+};
+
+export const getGetSystemDashboardQueryOptions = <
+	TData = Awaited<ReturnType<typeof getSystemDashboard>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ name }: GetSystemDashboardPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getSystemDashboard>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetSystemDashboardQueryKey({ name });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getSystemDashboard>>
+	> = ({ signal }) => getSystemDashboard({ name }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!name,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getSystemDashboard>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetSystemDashboardQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getSystemDashboard>>
+>;
+export type GetSystemDashboardQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get system dashboard
+ */
+
+export function useGetSystemDashboard<
+	TData = Awaited<ReturnType<typeof getSystemDashboard>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ name }: GetSystemDashboardPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getSystemDashboard>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetSystemDashboardQueryOptions({ name }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get system dashboard
+ */
+export const invalidateGetSystemDashboard = async (
+	queryClient: QueryClient,
+	{ name }: GetSystemDashboardPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetSystemDashboardQueryKey({ name }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
  * @summary Get public dashboard data (v2)

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

@@ -2175,6 +2175,7 @@ export enum CoretypesKindDTO {
 	'factor-api-key' = 'factor-api-key',
 	license = 'license',
 	subscription = 'subscription',
+	'deployment-host' = 'deployment-host',
 	logs = 'logs',
 	traces = 'traces',
 	metrics = 'metrics',
@@ -3492,6 +3493,7 @@ export enum TelemetrytypesFieldContextDTO {
 	span = 'span',
 	trace = 'trace',
 	resource = 'resource',
+	scope = 'scope',
 	attribute = 'attribute',
 	body = 'body',
 	'' = '',
@@ -9021,6 +9023,7 @@ export enum SavedviewtypesSourceDTO {
 	logs = 'logs',
 	metrics = 'metrics',
 	meter = 'meter',
+	ai_observability = 'ai_observability',
 }
 export interface SavedviewtypesSavedViewSpecDTO {
 	display?: SavedviewtypesDisplayDTO;
@@ -11310,6 +11313,17 @@ export type MigrateDashboardV2200 = {
 	status: string;
 };
 
+export type GetSystemDashboardPathParameters = {
+	name: string;
+};
+export type GetSystemDashboard200 = {
+	data: DashboardtypesGettableDashboardV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetFeatures200 = {
 	/**
 	 * @type array

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx

@@ -8,12 +8,14 @@ export interface AlertBreadcrumbProps {
 	items: BreadcrumbItemConfig[];
 	className?: string;
 	showDivider?: boolean;
+	testId?: string;
 }
 
 function AlertBreadcrumb({
 	items,
 	className,
 	showDivider = true,
+	testId,
 }: AlertBreadcrumbProps): JSX.Element {
 	const breadcrumbItems = items.map((item) => ({
 		title: <BreadcrumbItem {...item} />,
@@ -24,6 +26,7 @@ function AlertBreadcrumb({
 			<Breadcrumb
 				className={`${styles.breadcrumb} ${className || ''}`}
 				items={breadcrumbItems}
+				data-testid={testId}
 			/>
 			{showDivider && <Divider className={styles.divider} />}
 		</>

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -7,9 +7,8 @@ import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
@@ -69,9 +68,7 @@ function ExplorerCard({
 		setIsOpen(newOpen);
 	};
 
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
-
-	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
+	const { viewName, viewKey } = useGetSavedViewParams();
 
 	const { options } = useOptionsMenu({
 		storageKey:

frontend/src/components/ExplorerCard/constants.ts

@@ -1,5 +1,3 @@
-import { QueryParams } from 'constants/query';
-
 export const ExploreHeaderToolTip = {
 	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
@@ -9,5 +7,3 @@ export const SaveButtonText = {
 	SAVE_AS_NEW_VIEW: 'Save as new view',
 	SAVE_VIEW: 'Save view',
 };
-
-export type QuerySearchParamNames = QueryParams.viewName | QueryParams.viewKey;

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -197,7 +197,7 @@ function FieldsSelector({
 		() =>
 			fields.map((f) => ({
 				...f,
-				key: buildCompositeKey(f.name, f.fieldContext),
+				key: buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
 			})),
 		[fields],
 	);

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -52,13 +52,15 @@ function OtherFields({
 		// Normalize: synthesize `key` once so downstream reads can trust it.
 		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
 			...attr,
-			key: buildCompositeKey(attr.name, attr.fieldContext as string),
+			key: buildCompositeKey(attr.name, attr.fieldContext, attr.fieldDataType),
 			signal: attr.signal as SignalType,
 			fieldContext: attr.fieldContext as FieldContext,
 			fieldDataType: attr.fieldDataType,
 		}));
 		const addedIds = new Set(
-			addedFields.map((f) => buildCompositeKey(f.name, f.fieldContext)),
+			addedFields.map((f) =>
+				buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
+			),
 		);
 		const available = suggestions.filter(
 			(attr) => !addedIds.has(attr.key as string),

frontend/src/components/Logs/TableView/__tests__/useLogsTableColumns.test.tsx

@@ -14,10 +14,10 @@ jest.mock('providers/App/App', () => ({
 	useAppContext: (): { featureFlags: [] } => ({ featureFlags: [] }),
 }));
 
-const field = (name: string, type = ''): IField => ({
+const field = (name: string, type = '', dataType = ''): IField => ({
 	name,
 	type,
-	dataType: 'string',
+	dataType,
 });
 
 describe('useLogsTableColumns — selectColumns-order respected', () => {
@@ -136,6 +136,24 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		expect(byId.get('user_field')?.enableRemove).toBe(true);
 	});
 
+	it('disambiguates same-name/same-context fields by dataType (3-part id)', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [
+					field('http.status_code', 'attribute', 'int64'),
+					field('http.status_code', 'attribute', 'string'),
+				],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'attribute:http.status_code:int64',
+			'attribute:http.status_code:string',
+		]);
+	});
+
 	it('renders only the stateIndicator when fields is empty', () => {
 		const { result } = renderHook(() =>
 			useLogsTableColumns({

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -92,7 +92,7 @@ export function useLogsTableColumns({
 		};
 
 		const makeUserFieldCol = (f: IField): TableColumnDef<ILog> => ({
-			id: buildCompositeKey(f.name, f.type),
+			id: buildCompositeKey(f.name, f.type, f.dataType),
 			header: f.name,
 			accessorFn: (log): unknown =>
 				getLogFieldValue(log, f.name, isBodyJsonEnabled),

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -241,28 +241,29 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 						))
 					)}
 
-					{!showOnlyWhereClause && currentQuery.builder.queryFormulas.length > 0 && (
-						<div className="qb-formulas-container">
-							{currentQuery.builder.queryFormulas.map((formula, index) => {
-								const query =
-									currentQuery.builder.queryData[index] ||
-									currentQuery.builder.queryData[0];
+					{!showOnlyWhereClause &&
+						currentQuery.builder.queryFormulas?.length > 0 && (
+							<div className="qb-formulas-container">
+								{currentQuery.builder.queryFormulas.map((formula, index) => {
+									const query =
+										currentQuery.builder.queryData[index] ||
+										currentQuery.builder.queryData[0];
 
-								return (
-									<div key={formula.queryName} className="qb-formula">
-										<Formula
-											filterConfigs={filterConfigs}
-											query={query}
-											formula={formula}
-											index={index}
-											isAdditionalFilterEnable={false}
-											isQBV2
-										/>
-									</div>
-								);
-							})}
-						</div>
-					)}
+									return (
+										<div key={formula.queryName} className="qb-formula">
+											<Formula
+												filterConfigs={filterConfigs}
+												query={query}
+												formula={formula}
+												index={index}
+												isAdditionalFilterEnable={false}
+												isQBV2
+											/>
+										</div>
+									);
+								})}
+							</div>
+						)}
 
 					{shouldShowFooter && (
 						<QueryFooter
@@ -290,7 +291,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							</div>
 						))}
 
-						{currentQuery.builder.queryFormulas.map((formula) => (
+						{currentQuery.builder.queryFormulas?.map((formula) => (
 							<div key={formula.queryName} className="formula-name">
 								{formula.queryName}
 							</div>

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

@@ -212,6 +212,32 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 		expect(handleRunQueryMock).toHaveBeenCalled();
 	});
 
+	it('does not crash when builder.queryFormulas/queryTraceOperator are missing (partial/legacy query)', () => {
+		const currentQueryBase = baseQBContext.currentQuery as Query;
+
+		mockedUseQueryBuilder.mockReturnValue({
+			...baseQBContext,
+			currentQuery: {
+				...currentQueryBase,
+				builder: {
+					queryData: currentQueryBase.builder.queryData,
+					queryFormulas: undefined as unknown as [],
+					queryTraceOperator: undefined as unknown as [],
+				},
+			},
+		});
+
+		expect(() =>
+			render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />),
+		).not.toThrow();
+
+		// query list still renders from queryData, formulas block is skipped
+		expect(document.querySelector('.query-names-section')).toBeInTheDocument();
+		expect(
+			document.querySelector('.qb-formulas-container'),
+		).not.toBeInTheDocument();
+	});
+
 	it('fx button is disabled when functions already exist', () => {
 		const currentQueryBase = baseQBContext.currentQuery as Query;
 		const supersetQueryBase = baseQBContext.supersetQuery as Query;

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.authz.test.tsx

@@ -4,7 +4,7 @@ import {
 } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import { render, screen, waitFor } from 'tests/test-utils';
 import {
 	setupAuthzAdmin,
 	setupAuthzDeny,
@@ -110,10 +110,7 @@ describe('ServiceAccountDrawer — permissions', () => {
 	it('shows PermissionDeniedCallout in Keys tab when list-keys permission is denied', async () => {
 		server.use(setupAuthzDeny(APIKeyListPermission));
 
-		renderDrawer();
-		await screen.findByDisplayValue('CI Bot');
-
-		fireEvent.click(screen.getByRole('radio', { name: /keys/i }));
+		renderDrawer({ account: 'sa-1', tab: 'keys' });
 
 		await waitFor(() => {
 			expect(screen.getByText(/list:factor-api-key/)).toBeInTheDocument();

frontend/src/constants/localStorage.ts

@@ -11,6 +11,7 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_OPTIONS = 'TRACES_LIST_OPTIONS',
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
+	TRACES_VIEW_COLUMNS = 'TRACES_VIEW_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -29,6 +29,7 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
 					className="contributor-row-popover-buttons__button"
+					data-testid="alert-popover-view-logs"
 				>
 					<div className="icon">
 						<LogsIcon />
@@ -40,6 +41,7 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
 					className="contributor-row-popover-buttons__button"
+					data-testid="alert-popover-view-traces"
 				>
 					<div className="icon">
 						<DraftingCompass

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx

@@ -26,7 +26,10 @@ function ChangePercentage({
 }: ChangePercentageProps): JSX.Element {
 	if (direction > 0) {
 		return (
-			<div className="change-percentage change-percentage--success">
+			<div
+				className="change-percentage change-percentage--success"
+				data-testid="stats-card-change"
+			>
 				<div className="change-percentage__icon">
 					<ArrowDownLeft size={14} color={Color.BG_FOREST_500} />
 				</div>
@@ -38,7 +41,10 @@ function ChangePercentage({
 	}
 	if (direction < 0) {
 		return (
-			<div className="change-percentage change-percentage--error">
+			<div
+				className="change-percentage change-percentage--error"
+				data-testid="stats-card-change"
+			>
 				<div className="change-percentage__icon">
 					<ArrowUpRight size={14} color={Color.BG_CHERRY_500} />
 				</div>
@@ -50,7 +56,10 @@ function ChangePercentage({
 	}
 
 	return (
-		<div className="change-percentage change-percentage--no-previous-data">
+		<div
+			className="change-percentage change-percentage--no-previous-data"
+			data-testid="stats-card-change"
+		>
 			<div className="change-percentage__label">no previous data</div>
 		</div>
 	);
@@ -103,7 +112,12 @@ function StatsCard({
 	const formattedEndTimeForTooltip = convertTimestampToLocaleDateString(endTime);
 
 	return (
-		<div className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}>
+		<div
+			className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}
+			data-testid="stats-card"
+			data-stats-title={title}
+			data-empty={isEmpty ? 'true' : 'false'}
+		>
 			<div className="stats-card__title-wrapper">
 				<div className="title">{title}</div>
 				<div className="duration-indicator">
@@ -123,7 +137,7 @@ function StatsCard({
 			</div>
 
 			<div className="stats-card__stats">
-				<div className="count-label">
+				<div className="count-label" data-testid="stats-card-value">
 					{isEmpty ? emptyMessage : displayValue || totalCurrentCount}
 				</div>
 

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsGraph/StatsGraph.tsx

@@ -81,7 +81,11 @@ function StatsGraph({ timeSeries, changeDirection }: Props): JSX.Element {
 	);
 
 	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
+		<div
+			style={{ height: '100%', width: '100%' }}
+			ref={graphRef}
+			data-testid="stats-card-sparkline"
+		>
 			<Uplot data={[xData, yData]} options={options} />
 		</div>
 	);

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -48,11 +48,16 @@ function TopContributorsCard({
 
 	return (
 		<>
-			<div className="top-contributors-card">
+			<div className="top-contributors-card" data-testid="top-contributors-card">
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
+						<Button
+							type="text"
+							className="view-all"
+							onClick={toggleViewAllDrawer}
+							data-testid="top-contributors-view-all"
+						>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -68,7 +68,10 @@ function TopContributorsRows({
 					relatedTracesLink={record.relatedTracesLink}
 					relatedLogsLink={record.relatedLogsLink}
 				>
-					<div className="total-contribution">
+					<div
+						className="total-contribution"
+						data-testid="top-contributors-row-count"
+					>
 						{count}/{totalCurrentTriggers}
 					</div>
 				</ConditionalAlertPopover>
@@ -78,7 +81,10 @@ function TopContributorsRows({
 
 	const handleRowClick = (
 		record: AlertRuleTopContributors,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
+		'data-testid': string;
+	} => ({
+		'data-testid': 'top-contributors-row',
 		onClick: (): void => {
 			logEvent('Alert history: Top contributors row: Clicked', {
 				labels: record.labels,

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx

@@ -31,7 +31,10 @@ function ViewAllDrawer({
 			}}
 			title="Viewing All Contributors"
 		>
-			<div className="top-contributors-card--view-all">
+			<div
+				className="top-contributors-card--view-all"
+				data-testid="top-contributors-drawer"
+			>
 				<div className="top-contributors-card__content">
 					<TopContributorsRows
 						topContributors={topContributorsData}

frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx

@@ -32,8 +32,8 @@ function GraphWrapper({
 	}, [data?.data]);
 
 	return (
-		<div className="timeline-graph">
-			<div className="timeline-graph__title">
+		<div className="timeline-graph" data-testid="timeline-graph">
+			<div className="timeline-graph__title" data-testid="timeline-graph-title">
 				{totalCurrentTriggers} triggers in {relativeTime}
 			</div>
 			<div className="timeline-graph__chart">

frontend/src/container/AlertHistory/Timeline/Table/Table.tsx

@@ -118,7 +118,10 @@ function TimelineTableContent(): JSX.Element {
 
 	const handleRowClick = (
 		record: AlertRuleTimelineTableResponse,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
+		'data-testid': string;
+	} => ({
+		'data-testid': 'timeline-row',
 		onClick: (): void => {
 			void logEvent('Alert history: Timeline table row: Clicked', {
 				ruleId: record.ruleID,
@@ -128,12 +131,15 @@ function TimelineTableContent(): JSX.Element {
 	});
 
 	return (
-		<div className="timeline-table">
+		<div className="timeline-table" data-testid="timeline-table">
 			{/* If we don't wait to have the keys, the QuerySearch will not render them at first usage */}
 			{!isLoadingKeys && hardcodedAttributeKeys ? (
 				<div className="timeline-table__filter">
 					<div className="timeline-table__filter-row">
-						<div className="timeline-table__filter-search">
+						<div
+							className="timeline-table__filter-search"
+							data-testid="timeline-filter-search"
+						>
 							<QuerySearch
 								onChange={querySearchOnChange}
 								queryData={queryData}
@@ -155,6 +161,7 @@ function TimelineTableContent(): JSX.Element {
 					<Skeleton.Input
 						className="timeline-table__filter--loading-skeleton"
 						active
+						data-testid="timeline-filter-skeleton"
 					/>
 				</div>
 			)}
@@ -172,14 +179,17 @@ function TimelineTableContent(): JSX.Element {
 				locale={{
 					emptyText:
 						isError && apiError ? (
-							<div className="timeline-table__error">
+							<div className="timeline-table__error" data-testid="timeline-error">
 								<ErrorContent error={apiError} />
 							</div>
 						) : undefined,
 				}}
 				footer={(): JSX.Element => (
 					<div className="timeline-table__pagination">
-						<div className="timeline-table__pagination-info">
+						<div
+							className="timeline-table__pagination-info"
+							data-testid="timeline-footer-range"
+						>
 							{paginationConfig.showTotal?.(totalItems, [
 								totalItems === 0
 									? 0

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -21,18 +21,14 @@ export const timelineTableColumns = ({
 		sorter: true,
 		width: 140,
 		render: (value): JSX.Element => (
-			<div className="alert-rule-state">
-				<AlertState state={value} showLabel />
-			</div>
+			<AlertState state={value} showLabel testId="timeline-row-state" />
 		),
 	},
 	{
 		title: 'LABELS',
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
-			<div className="alert-rule-labels">
-				<AlertLabels labels={labels} />
-			</div>
+			<AlertLabels labels={labels} testId="timeline-row-labels" />
 		),
 	},
 	{
@@ -40,7 +36,10 @@ export const timelineTableColumns = ({
 		dataIndex: 'unixMilli',
 		width: 200,
 		render: (value): JSX.Element => (
-			<div className="alert-rule__created-at">
+			<div
+				className="alert-rule__created-at"
+				data-testid="timeline-row-created-at"
+			>
 				{formatTimezoneAdjustedTimestamp(value, DATE_TIME_FORMATS.DASH_DATETIME)}
 			</div>
 		),
@@ -53,7 +52,7 @@ export const timelineTableColumns = ({
 			if (!record.relatedTracesLink && !record.relatedLogsLink) {
 				return (
 					<Tooltip title="No links available for this item">
-						<Button type="text" ghost disabled>
+						<Button type="text" ghost disabled data-testid="timeline-row-actions">
 							<Ellipsis className="dropdown-icon" size="md" />
 						</Button>
 					</Tooltip>
@@ -65,7 +64,7 @@ export const timelineTableColumns = ({
 					relatedTracesLink={record.relatedTracesLink ?? ''}
 					relatedLogsLink={record.relatedLogsLink ?? ''}
 				>
-					<Button type="text" ghost>
+					<Button type="text" ghost data-testid="timeline-row-actions">
 						<Ellipsis className="dropdown-icon" size="md" />
 					</Button>
 				</ConditionalAlertPopover>

frontend/src/container/AlertHistory/Timeline/Table/utils.ts

@@ -10,6 +10,7 @@ const fieldContextToSuggestionMap: Record<
 	[TelemetrytypesFieldContextDTO.attribute]: 'attribute',
 	// no maps for the following values on suggestion context
 	[TelemetrytypesFieldContextDTO.trace]: undefined,
+	[TelemetrytypesFieldContextDTO.scope]: undefined,
 	[TelemetrytypesFieldContextDTO.body]: undefined,
 	[TelemetrytypesFieldContextDTO.metric]: undefined,
 	[TelemetrytypesFieldContextDTO.log]: undefined,

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -23,6 +23,7 @@ function TimelineTabs(): JSX.Element {
 		{
 			value: TimelineTab.OVERALL_STATUS,
 			label: 'Overall Status',
+			testId: 'timeline-tab-overall-status',
 		},
 		{
 			value: TimelineTab.TOP_5_CONTRIBUTORS,
@@ -33,6 +34,7 @@ function TimelineTabs(): JSX.Element {
 				</div>
 			),
 			disabled: true,
+			testId: 'timeline-tab-top-contributors',
 		},
 	];
 
@@ -57,14 +59,17 @@ function TimelineFilters(): JSX.Element {
 		{
 			value: TimelineFilter.ALL,
 			label: 'All',
+			testId: 'timeline-filter-all',
 		},
 		{
 			value: TimelineFilter.FIRED,
 			label: 'Fired',
+			testId: 'timeline-filter-fired',
 		},
 		{
 			value: TimelineFilter.RESOLVED,
 			label: 'Resolved',
+			testId: 'timeline-filter-resolved',
 		},
 	];
 

frontend/src/container/Controls/Controls.module.scss

@@ -0,0 +1,6 @@
+.container {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	--button-font-size: var(--periscope-font-size-base, 13px);
+}

frontend/src/container/Controls/index.tsx

@@ -1,11 +1,12 @@
 import { memo, useMemo } from 'react';
 import { ChevronLeft, ChevronRight } from '@signozhq/icons';
-import { Button, Flex, Select } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { defaultSelectStyle } from './config';
-import { Container } from './styles';
+import styles from './Controls.module.scss';
 
 function Controls({
 	offset = 0,
@@ -34,28 +35,24 @@ function Controls({
 	);
 
 	return (
-		<Container>
+		<div className={styles.container}>
 			<Button
-				loading={isLoading}
-				size="small"
-				type="link"
+				variant="link"
+				size="md"
 				disabled={isPreviousDisabled}
+				prefix={<ChevronLeft size={16} />}
 				onClick={handleNavigatePrevious}
 			>
-				<Flex align="center" gap="4px">
-					<ChevronLeft size={16} /> Previous
-				</Flex>
+				Previous
 			</Button>
 			<Button
-				loading={isLoading}
-				size="small"
-				type="link"
+				variant="link"
+				size="md"
 				disabled={isNextDisabled}
+				suffix={<ChevronRight size={16} />}
 				onClick={handleNavigateNext}
 			>
-				<Flex align="center" gap="4px">
-					Next <ChevronRight size={16} />
-				</Flex>
+				Next
 			</Button>
 
 			{showSizeChanger && (
@@ -74,7 +71,7 @@ function Controls({
 					))}
 				</Select>
 			)}
-		</Container>
+		</div>
 	);
 }
 

frontend/src/container/Controls/styles.ts

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-`;

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -34,6 +34,7 @@ function AdvancedOptions(): JSX.Element {
 										})
 									}
 									value={advancedOptions.sendNotificationIfDataIsMissing.toleranceLimit}
+									testId="send-notification-if-data-is-missing-input"
 								/>
 								<Typography.Text>Minutes</Typography.Text>
 							</div>
@@ -66,6 +67,7 @@ function AdvancedOptions(): JSX.Element {
 										})
 									}
 									value={advancedOptions.enforceMinimumDatapoints.minimumDatapoints}
+									testId="enforce-minimum-datapoints-input"
 								/>
 								<Typography.Text>Datapoints</Typography.Text>
 							</div>

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx

@@ -66,6 +66,7 @@ function EvaluationWindowPopover({
 						tabIndex={0}
 						data-value={option.value}
 						data-section-id={sectionId}
+						data-testid={`${sectionId}-option-${option.value}`}
 						onClick={(): void => onChange(option.value)}
 						onKeyDown={(e): void => {
 							if (e.key === 'Enter' || e.key === ' ') {

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -186,6 +186,7 @@ function Footer(): JSX.Element {
 				color="primary"
 				onClick={handleSaveAlert}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
+				testId="save-alert-rule-button"
 			>
 				{isCreatingAlertRule || isUpdatingAlertRule ? (
 					<Loader data-testid="save-alert-rule-loader-icon" size={14} />
@@ -218,6 +219,7 @@ function Footer(): JSX.Element {
 				color="secondary"
 				onClick={handleTestNotification}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
+				testId="test-notification-button"
 			>
 				{isTestingAlertRule ? (
 					<Loader data-testid="test-notification-loader-icon" size={14} />
@@ -249,6 +251,7 @@ function Footer(): JSX.Element {
 				color="secondary"
 				onClick={handleDiscard}
 				disabled={disableButtons}
+				testId="discard-alert-rule-button"
 			>
 				<X size={14} /> Discard
 			</Button>

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -54,7 +54,7 @@ import {
 } from 'container/OptionsMenu/constants';
 import { OptionsQuery } from 'container/OptionsMenu/types';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
 import { useSaveView } from 'hooks/saveViews/useSaveView';
@@ -287,8 +287,7 @@ function ExplorerOptions({
 
 	const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
 
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
-	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
+	const { viewName, viewKey } = useGetSavedViewParams();
 
 	const extraData = viewsData?.data?.data?.find(
 		(view) => view.id === viewKey,

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -119,6 +119,7 @@ function BasicInfo({
 					<SeveritySelect
 						getPopupContainer={popupContainer}
 						defaultValue="critical"
+						data-testid="alert-severity-select"
 						onChange={(value: unknown | string): void => {
 							const s = (value as string) || 'critical';
 							setAlertDef({
@@ -147,6 +148,7 @@ function BasicInfo({
 					]}
 				>
 					<InputSmall
+						data-testid="alert-name-input-v1"
 						onChange={(e): void => {
 							setAlertDef({
 								...alertDef,
@@ -161,6 +163,7 @@ function BasicInfo({
 					name={['annotations', 'description']}
 				>
 					<TextareaMedium
+						data-testid="alert-description-input"
 						onChange={(e): void => {
 							setAlertDef({
 								...alertDef,

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -105,7 +105,7 @@ function QuerySection({
 		{
 			label: (
 				<Tooltip title="Query Builder">
-					<Button className="nav-btns">
+					<Button className="nav-btns" data-testid="query-builder-tab">
 						<Atom size={14} />
 						<Typography.Text>Query Builder</Typography.Text>
 					</Button>
@@ -122,7 +122,11 @@ function QuerySection({
 							: 'ClickHouse'
 					}
 				>
-					<Button className="nav-btns" disabled={isAnomalyDetection}>
+					<Button
+						className="nav-btns"
+						disabled={isAnomalyDetection}
+						data-testid="clickhouse-tab"
+					>
 						<Terminal size={14} />
 						<Typography.Text>ClickHouse Query</Typography.Text>
 					</Button>
@@ -162,7 +166,11 @@ function QuerySection({
 								: 'ClickHouse'
 						}
 					>
-						<Button className="nav-btns" disabled={isAnomalyDetection}>
+						<Button
+							className="nav-btns"
+							disabled={isAnomalyDetection}
+							data-testid="clickhouse-tab"
+						>
 							<Terminal size={14} />
 							<Typography.Text>ClickHouse Query</Typography.Text>
 						</Button>
@@ -180,7 +188,11 @@ function QuerySection({
 								: 'PromQL'
 						}
 					>
-						<Button className="nav-btns" disabled={isAnomalyDetection}>
+						<Button
+							className="nav-btns"
+							disabled={isAnomalyDetection}
+							data-testid="promql-tab"
+						>
 							<PromQLIcon
 								fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
 							/>

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -80,6 +80,7 @@ function RuleOptions({
 			defaultValue={defaultCompareOp}
 			value={alertDef.condition?.op}
 			style={{ minWidth: '120px' }}
+			data-testid="alert-threshold-op-select"
 			onChange={(value: string | unknown): void => {
 				const newOp = (value as string) || '';
 
@@ -116,6 +117,7 @@ function RuleOptions({
 			defaultValue={defaultMatchType}
 			style={{ minWidth: '130px' }}
 			value={alertDef.condition?.matchType}
+			data-testid="alert-threshold-match-type-select-v1"
 			onChange={(value: string | unknown): void => handleMatchOptChange(value)}
 		>
 			<Select.Option value="1">{t('option_atleastonce')}</Select.Option>
@@ -177,6 +179,7 @@ function RuleOptions({
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
 			onChange={onChangeEvalWindow}
+			data-testid="alert-eval-window-select"
 		>
 			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
@@ -194,6 +197,7 @@ function RuleOptions({
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
 			onChange={onChangeEvalWindow}
+			data-testid="alert-eval-window-select"
 		>
 			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
@@ -395,6 +399,7 @@ function RuleOptions({
 									value={alertDef?.condition?.target}
 									onChange={onChange}
 									type="number"
+									data-testid="alert-threshold-target-input"
 									onWheel={(e): void => e.currentTarget.blur()}
 								/>
 							</Form.Item>

frontend/src/container/FormAlertRules/index.tsx

@@ -844,8 +844,6 @@ function FormAlertRules({
 
 	return (
 		<>
-			{Element}
-
 			<div
 				id="top"
 				className={`form-alert-rules-container ${
@@ -968,6 +966,7 @@ function FormAlertRules({
 								!isChannelConfigurationValid ||
 								queryStatus === 'error'
 							}
+							data-testid="alert-save-button"
 						>
 							{isNewRule ? t('button_createrule') : t('button_savechanges')}
 						</ActionButton>
@@ -981,6 +980,7 @@ function FormAlertRules({
 							}
 							type="default"
 							onClick={onTestRuleHandler}
+							data-testid="alert-test-button"
 						>
 							{' '}
 							{t('button_testrule')}
@@ -989,6 +989,7 @@ function FormAlertRules({
 							disabled={loading || false}
 							type="default"
 							onClick={onCancelHandler}
+							data-testid="alert-cancel-button"
 						>
 							{isNewRule && t('button_cancelchanges')}
 							{ruleId && !isEmpty(ruleId) && t('button_discard')}
@@ -998,6 +999,7 @@ function FormAlertRules({
 			</div>
 
 			<ConfirmDialog
+				testId="alert-save-confirm-dialog"
 				open={isConfirmSaveOpen}
 				onOpenChange={setIsConfirmSaveOpen}
 				title={t('confirm_save_title')}

frontend/src/container/FormAlertRules/labels/index.tsx

@@ -174,6 +174,7 @@ function LabelSelect({
 
 			<div style={{ display: 'flex', width: '100%' }}>
 				<Input
+					data-testid="alert-labels-input-v1"
 					placeholder={renderPlaceholder()}
 					onChange={handleLabelChange}
 					onKeyUp={(e): void => {

frontend/src/container/FormAlertRules/utils.ts

@@ -53,17 +53,24 @@ export const getUpdatedStepInterval = (evalWindow?: string): number => {
 };
 
 export const getSelectedQueryOptions = (
-	queries: Array<
-		| IBuilderQuery
-		| IBuilderTraceOperator
-		| IBuilderFormula
-		| IClickHouseQuery
-		| IPromQLQuery
-	>,
-): SelectProps['options'] =>
-	queries
+	queries:
+		| Array<
+				| IBuilderQuery
+				| IBuilderTraceOperator
+				| IBuilderFormula
+				| IClickHouseQuery
+				| IPromQLQuery
+		  >
+		| undefined
+		| null,
+): SelectProps['options'] => {
+	if (!queries) {
+		return [];
+	}
+	return queries
 		.filter((query) => !query.disabled)
 		.map((query) => ({
 			label: 'queryName' in query ? query.queryName : query.name,
 			value: 'queryName' in query ? query.queryName : query.name,
 		}));
+};

frontend/src/container/LLMObservability/Explorer/Explorer.module.scss

@@ -1,11 +0,0 @@
-.explorer {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	padding: var(--spacing-2) var(--spacing-0);
-}
-
-.placeholder {
-	color: var(--l2-foreground);
-	font-size: var(--periscope-font-size-base);
-}

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

@@ -0,0 +1,106 @@
+.trace-explorer-header {
+	.trace-explorer-run-query {
+		display: flex;
+		flex-direction: row-reverse;
+		align-items: center;
+		margin: 8px 16px;
+		gap: 8px;
+	}
+
+	.filter-outlined-btn {
+		border-radius: 0px 2px 2px 0px;
+		border-top: 1px solid var(--l1-border);
+		border-right: 1px solid var(--l1-border);
+		border-bottom: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+	}
+}
+
+.trace-explorer-header.single-child {
+	justify-content: flex-end;
+}
+
+.traces-explorer-views {
+	padding: 8px;
+	padding-bottom: 60px;
+	margin-bottom: 24px;
+
+	.ant-tabs-tabpane {
+		padding: 0 8px;
+	}
+}
+
+.qb-search-view-container {
+	padding: 8px;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+
+	.ant-select-selector {
+		border-radius: 2px;
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l2-background) !important;
+		height: 34px !important;
+		box-sizing: border-box !important;
+	}
+}
+
+.trace-explorer-list-view {
+	flex: 1;
+}
+
+.trace-explorer-traces-view {
+	flex: 1;
+}
+
+.trace-explorer-table-view {
+	flex: 1;
+}
+
+.trace-explorer-time-series-view {
+	flex: 1;
+}
+
+.trace-explorer-page {
+	display: flex;
+
+	// Meant to fix the query builder colors
+	--input-background: var(--l2-background);
+	--input-hover-background: var(--l2-background);
+	--input-focus-background: var(--l2-background);
+	--input-border-color: var(--l2-border);
+	--input-hover-border-color: var(--internal-ant-border-color-hover);
+	--input-focus-border-color: var(--internal-ant-border-color-hover);
+
+	.filter {
+		width: 260px;
+		height: 100%;
+		min-height: 100vh;
+
+		border-right: 0px;
+		border: 1px solid var(--l1-border);
+		background-color: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+			width: 258px;
+		}
+	}
+
+	.trace-explorer {
+		width: 100%;
+		background: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+		}
+
+		border-color: var(--l1-border);
+	}
+	.trace-explorer.filters-expanded {
+		width: calc(100% - 260px);
+	}
+}

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -1,13 +1,373 @@
-import styles from './Explorer.module.scss';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import { useSearchParams } from 'react-router-dom-v5-compat';
+import * as Sentry from '@sentry/react';
+import { Card } from 'antd';
+import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
+import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
+import WarningPopover from 'components/WarningPopover/WarningPopover';
+import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
+import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
+import { useOptionsMenu } from 'container/OptionsMenu';
+import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
+import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
+import Toolbar from 'container/Toolbar/Toolbar';
+import {
+	getExportQueryData,
+	getQueryByPanelType,
+} from 'container/TracesExplorer/explorerUtils';
+import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
+import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
+import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
+import {
+	ICurrentQueryData,
+	useHandleExplorerTabChange,
+} from 'hooks/useHandleExplorerTabChange';
+import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { isEmpty } from 'lodash-es';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+import {
+	tracesAddFilterAction,
+	tracesChangeViewAction,
+	tracesRunQueryAction,
+	tracesSaveViewAction,
+} from 'pages/TracesExplorer/aiActions';
+import { Warning } from 'types/api';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import {
+	explorerViewToPanelType,
+	getExplorerViewFromUrl,
+} from 'utils/explorerUtils';
+import { v4 } from 'uuid';
+
+import { TOOLBAR_VIEWS } from './constants';
+import ListView from './ListView/ListView';
+import { defaultSelectedColumns } from './ListView/configs';
+import QuerySection from './QuerySection/QuerySection';
+import TableView from './TableView/TableView';
+import TimeSeriesView from './TimeSeriesView/TimeSeriesView';
+import TracesView from './TracesView/TracesView';
+
+import './Explorer.styles.scss';
 
-// Shell for the AI Observability Explorer tab. Owns the
-// /ai-observability/explorer route and is intentionally empty for now: the
-// query builder + results surface land in a follow-up.
 function Explorer(): JSX.Element {
+	const {
+		panelType,
+		updateAllQueriesOperators,
+		handleRunQuery,
+		stagedQuery,
+		handleSetConfig,
+		currentQuery,
+		handleSetQueryData,
+		redirectWithQueryBuilderData,
+	} = useQueryBuilder();
+
+	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+
+	const { options } = useOptionsMenu({
+		dataSource: DataSource.TRACES,
+		aggregateOperator: 'noop',
+		initialOptions: {
+			selectColumns: defaultSelectedColumns,
+		},
+	});
+
+	const [searchParams] = useSearchParams();
+	const queryClient = useQueryClient();
+	const listQueryKeyRef = useRef<any>();
+
+	// Get panel type from URL
+	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		if (listQueryKeyRef.current) {
+			queryClient.cancelQueries(listQueryKeyRef.current);
+		}
+		setIsCancelled(true);
+		// Reset loading state — the active view unmounts when cancelled, so no
+		// child will call setIsLoadingQueries(false) otherwise.
+		setIsLoadingQueries(false);
+	}, [queryClient]);
+
+	const [selectedView, setSelectedView] = useState<ExplorerViews>(() =>
+		getExplorerViewFromUrl(searchParams, panelTypesFromUrl),
+	);
+
+	const [warning, setWarning] = useState<Warning | undefined>();
+	const [isOpen, setOpen] = useState<boolean>(true);
+
+	const defaultQuery = useMemo(
+		(): Query =>
+			updateAllQueriesOperators(
+				initialQueriesMap.traces,
+				PANEL_TYPES.LIST,
+				DataSource.TRACES,
+			),
+		[updateAllQueriesOperators],
+	);
+
+	const { handleExplorerTabChange } = useHandleExplorerTabChange();
+	const { safeNavigate } = useSafeNavigate();
+	const getExportToDashboardLink = useGetExportToDashboardLink();
+
+	const handleChangeSelectedView = useCallback(
+		(view: ExplorerViews, querySearchParameters?: ICurrentQueryData): void => {
+			handleSetConfig(explorerViewToPanelType[view], DataSource.TRACES);
+
+			setSelectedView(view);
+
+			handleExplorerTabChange(
+				explorerViewToPanelType[view],
+				querySearchParameters,
+			);
+		},
+		[handleExplorerTabChange, handleSetConfig],
+	);
+
+	// ─── AI Assistant page actions (only when license feature is on) ───────────
+	const aiActions = useMemo(
+		() =>
+			isAIAssistantEnabled
+				? [
+						tracesRunQueryAction({
+							currentQuery,
+							handleSetQueryData,
+							redirectWithQueryBuilderData,
+						}),
+						tracesAddFilterAction({
+							currentQuery,
+							handleSetQueryData,
+							redirectWithQueryBuilderData,
+						}),
+						tracesChangeViewAction({
+							onChangeView: (view) => handleChangeSelectedView(view as ExplorerViews),
+						}),
+						tracesSaveViewAction({
+							// POC stub — logs a save request; wire to real API when available
+							onSaveView: async (name) => {
+								// eslint-disable-next-line no-console
+								console.info('[AI Assistant] Save view requested:', name);
+							},
+						}),
+					]
+				: [],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[
+			isAIAssistantEnabled,
+			currentQuery,
+			handleSetQueryData,
+			redirectWithQueryBuilderData,
+			handleChangeSelectedView,
+		],
+	);
+	usePageActions('traces-explorer', aiActions);
+	// ───────────────────────────────────────────────────────────────────────────
+
+	const exportDefaultQuery = useMemo(
+		() =>
+			getQueryByPanelType(
+				stagedQuery || initialQueriesMap.traces,
+				panelType || PANEL_TYPES.LIST,
+			),
+		[stagedQuery, panelType],
+	);
+
+	const handleExport = useCallback(
+		(dashboard: ExportDashboard | null, isNewDashboard?: boolean): void => {
+			if (!dashboard || !panelType) {
+				return;
+			}
+
+			const panelTypeParam = AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType)
+				? panelType
+				: PANEL_TYPES.TIME_SERIES;
+
+			const widgetId = v4();
+
+			const query = getExportQueryData(
+				exportDefaultQuery,
+				panelTypeParam,
+				options,
+			);
+
+			logEvent('Traces Explorer: Add to dashboard successful', {
+				panelType,
+				isNewDashboard,
+				dashboardName: dashboard?.title,
+			});
+
+			const dashboardEditView = getExportToDashboardLink({
+				query,
+				panelType: panelTypeParam,
+				dashboardId: dashboard.id,
+				widgetId,
+			});
+
+			if (dashboardEditView) {
+				safeNavigate(dashboardEditView);
+			}
+		},
+		[
+			exportDefaultQuery,
+			panelType,
+			safeNavigate,
+			options,
+			getExportToDashboardLink,
+		],
+	);
+
+	useShareBuilderUrl({ defaultValue: defaultQuery });
+
+	const logEventCalledRef = useRef(false);
+
+	useEffect(() => {
+		if (!logEventCalledRef.current) {
+			logEvent('Traces Explorer: Page visited', {});
+			logEventCalledRef.current = true;
+		}
+	}, []);
+
+	const isFilterApplied = useMemo(() => {
+		// if any of the non-disabled queries has filters applied, return true
+		const result = stagedQuery?.builder?.queryData?.filter(
+			(item) => !isEmpty(item.filters?.items) && !item.disabled,
+		);
+		return !!result?.length;
+	}, [stagedQuery]);
+
 	return (
-		<div className={styles.explorer} data-testid="llm-observability-explorer">
-			<div className={styles.placeholder}>Explorer coming soon.</div>
-		</div>
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
+			<div
+				className="trace-explorer-page"
+				data-testid="llm-observability-explorer"
+			>
+				<Card className="filter" hidden={!isOpen}>
+					<QuickFilters
+						className="qf-traces-explorer"
+						source={QuickFiltersSource.TRACES_EXPLORER}
+						signal={SignalType.TRACES}
+						handleFilterVisibilityChange={(): void => {
+							setOpen(!isOpen);
+						}}
+					/>
+				</Card>
+				<div
+					className={cx('trace-explorer', {
+						'filters-expanded': isOpen,
+					})}
+				>
+					<div className="trace-explorer-header">
+						<Toolbar
+							showAutoRefresh
+							leftActions={
+								<LeftToolbarActions
+									showFilter={isOpen}
+									handleFilterVisibilityChange={(): void => setOpen(!isOpen)}
+									items={TOOLBAR_VIEWS}
+									selectedView={selectedView}
+									onChangeSelectedView={handleChangeSelectedView}
+								/>
+							}
+							warningElement={
+								!isEmpty(warning) ? <WarningPopover warningData={warning} /> : <div />
+							}
+							rightActions={
+								<RightToolbarActions
+									onStageRunQuery={(): void => {
+										setIsCancelled(false);
+										handleRunQuery();
+									}}
+									isLoadingQueries={isLoadingQueries}
+									handleCancelQuery={handleCancelQuery}
+								/>
+							}
+						/>
+					</div>
+					<ExplorerCard sourcepage={DataSource.TRACES}>
+						<div className="query-section-container">
+							<QuerySection />
+						</div>
+					</ExplorerCard>
+
+					<div className="traces-explorer-views">
+						{isCancelled && (
+							<QueryCancelledPlaceholder subText='Click "Run Query" to load traces.' />
+						)}
+
+						{!isCancelled && selectedView === ExplorerViews.LIST && (
+							<div className="trace-explorer-list-view">
+								<ListView
+									isFilterApplied={isFilterApplied}
+									setWarning={setWarning}
+									setIsLoadingQueries={setIsLoadingQueries}
+									queryKeyRef={listQueryKeyRef}
+								/>
+							</div>
+						)}
+
+						{!isCancelled && selectedView === ExplorerViews.TRACE && (
+							<div className="trace-explorer-traces-view">
+								<TracesView
+									isFilterApplied={isFilterApplied}
+									setWarning={setWarning}
+									setIsLoadingQueries={setIsLoadingQueries}
+									queryKeyRef={listQueryKeyRef}
+								/>
+							</div>
+						)}
+
+						{!isCancelled && selectedView === ExplorerViews.TIMESERIES && (
+							<div className="trace-explorer-time-series-view">
+								<TimeSeriesView
+									dataSource={DataSource.TRACES}
+									isFilterApplied={isFilterApplied}
+									setWarning={setWarning}
+									setIsLoadingQueries={setIsLoadingQueries}
+									queryKeyRef={listQueryKeyRef}
+								/>
+							</div>
+						)}
+
+						{!isCancelled && selectedView === ExplorerViews.TABLE && (
+							<div className="trace-explorer-table-view">
+								<TableView
+									setWarning={setWarning}
+									setIsLoadingQueries={setIsLoadingQueries}
+									queryKeyRef={listQueryKeyRef}
+								/>
+							</div>
+						)}
+					</div>
+
+					<ExplorerOptionWrapper
+						disabled={!stagedQuery}
+						query={exportDefaultQuery}
+						sourcepage={DataSource.TRACES}
+						onExport={handleExport}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
+				</div>
+			</div>
+		</Sentry.ErrorBoundary>
 	);
 }
 

frontend/src/container/LLMObservability/Explorer/ListView/ListView.module.scss

@@ -0,0 +1,8 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	height: calc(100vh - 240px);
+	min-height: 400px;
+}

frontend/src/container/LLMObservability/Explorer/ListView/ListView.styles.scss

@@ -0,0 +1,34 @@
+.trace-explorer-controls {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	gap: 8px;
+
+	.order-by-container {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		.order-by-label {
+			color: var(--muted-foreground);
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 16px; /* 133.333% */
+
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.order-by-select {
+			width: 100px;
+
+			.ant-select-selector {
+				border: none;
+				box-shadow: none;
+				background-color: transparent;
+			}
+		}
+	}
+}

frontend/src/container/LLMObservability/Explorer/ListView/ListView.tsx

@@ -0,0 +1,272 @@
+import {
+	Dispatch,
+	memo,
+	MutableRefObject,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+import { QueryKey } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import logEvent from 'api/common/logEvent';
+import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
+import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
+import type { TableColumnDef } from 'components/TanStackTableView/types';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useOptionsMenu } from 'container/OptionsMenu';
+import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
+import TraceExplorerControls from 'container/TracesExplorer/Controls';
+import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
+import {
+	getTraceLink,
+	transformSpanRows,
+} from 'container/TracesExplorer/ListView/utils';
+import {
+	getFieldColumn,
+	TracesTableRow,
+} from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Pagination } from 'hooks/queryPagination';
+import { getDefaultPaginationConfig } from 'hooks/queryPagination/utils';
+import useUrlQueryData from 'hooks/useUrlQueryData';
+import { ArrowUp10, Minus } from '@signozhq/icons';
+import { AppState } from 'store/reducers';
+import { Warning } from 'types/api';
+import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import {
+	defaultSelectedColumns,
+	PER_PAGE_OPTIONS,
+	TIMESTAMP_FIELD,
+} from './configs';
+import './ListView.styles.scss';
+
+import styles from './ListView.module.scss';
+
+interface ListViewProps {
+	isFilterApplied: boolean;
+	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
+	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
+	queryKeyRef?: MutableRefObject<QueryKey | undefined>;
+}
+
+function ListView({
+	isFilterApplied,
+	setWarning,
+	setIsLoadingQueries,
+	queryKeyRef,
+}: ListViewProps): JSX.Element {
+	const { stagedQuery, panelType: panelTypeFromQueryBuilder } =
+		useQueryBuilder();
+
+	const panelType = panelTypeFromQueryBuilder || PANEL_TYPES.LIST;
+
+	const [orderBy, setOrderBy] = useState<string>('timestamp:desc');
+
+	const {
+		selectedTime: globalSelectedTime,
+		maxTime,
+		minTime,
+		loading: timeRangeUpdateLoading,
+	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
+
+	const { options, config } = useOptionsMenu({
+		dataSource: DataSource.TRACES,
+		aggregateOperator: 'count',
+		initialOptions: {
+			selectColumns: defaultSelectedColumns,
+		},
+	});
+
+	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
+		QueryParams.pagination,
+	);
+	const paginationConfig =
+		paginationQueryData ?? getDefaultPaginationConfig(PER_PAGE_OPTIONS);
+
+	const requestQuery = useMemo(
+		() => getListViewQuery(stagedQuery || initialQueriesMap.traces, orderBy),
+		[stagedQuery, orderBy],
+	);
+
+	// Stable sorted-name signature for the queryKey.
+	// - Drag updates selectColumns; raw queryKey would churn on reorder.
+	// - Trace API fetches only listed columns → add/remove must refetch.
+	// - Sorted-name signature: stable on reorder, changes on add/remove.
+	const selectColumnsSignature = useMemo(
+		() =>
+			(options?.selectColumns ?? [])
+				.map((c) => c.name)
+				.sort()
+				.join(','),
+		[options?.selectColumns],
+	);
+
+	const queryKey = useMemo(
+		() => [
+			REACT_QUERY_KEY.GET_QUERY_RANGE,
+			globalSelectedTime,
+			maxTime,
+			minTime,
+			stagedQuery,
+			panelType,
+			paginationConfig,
+			selectColumnsSignature,
+			orderBy,
+		],
+		[
+			stagedQuery,
+			panelType,
+			globalSelectedTime,
+			paginationConfig,
+			selectColumnsSignature,
+			maxTime,
+			minTime,
+			orderBy,
+		],
+	);
+
+	if (queryKeyRef) {
+		queryKeyRef.current = queryKey;
+	}
+
+	const { data, isFetching, isLoading, isError, error } = useGetQueryRange(
+		{
+			query: requestQuery,
+			graphType: panelType,
+			selectedTime: 'GLOBAL_TIME' as const,
+			globalSelectedInterval: globalSelectedTime as CustomTimeType,
+			params: {
+				dataSource: 'traces',
+			},
+			tableParams: {
+				pagination: paginationConfig,
+				selectColumns: options?.selectColumns,
+			},
+		},
+		ENTITY_VERSION_V5,
+		{
+			queryKey,
+			enabled:
+				// don't make api call while the time range state in redux is loading
+				!timeRangeUpdateLoading &&
+				!!stagedQuery &&
+				panelType === PANEL_TYPES.LIST &&
+				!!options?.selectColumns?.length,
+		},
+	);
+
+	useEffect(() => {
+		if (data?.payload) {
+			setWarning(data?.warning);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [data?.payload, data?.warning]);
+
+	useEffect(() => {
+		if (isLoading || isFetching) {
+			setIsLoadingQueries(true);
+		} else {
+			setIsLoadingQueries(false);
+		}
+	}, [isLoading, isFetching, setIsLoadingQueries]);
+
+	const queryTableDataResult = data?.payload?.data?.newResult?.data?.result;
+	const queryTableData = useMemo(
+		() => queryTableDataResult || [],
+		[queryTableDataResult],
+	);
+
+	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(() => {
+		const fields = [
+			TIMESTAMP_FIELD,
+			...(options?.selectColumns ?? []).filter(
+				(field) => field.name !== TIMESTAMP_FIELD.name,
+			),
+		];
+		return fields.map((field) => getFieldColumn(field));
+	}, [options?.selectColumns]);
+
+	const rows = useMemo(
+		() => transformSpanRows(queryTableData),
+		[queryTableData],
+	);
+
+	const handleColumnOrderChange = useCallback(
+		(reordered: TableColumnDef<TracesTableRow>[]): void => {
+			config?.addColumn?.onReorder(reordered.map((column) => column.id));
+		},
+		[config],
+	);
+
+	const handleOrderChange = useCallback((value: string) => {
+		setOrderBy(value);
+	}, []);
+
+	useEffect(() => {
+		if (!isLoading && !isFetching && !isError && rows.length !== 0) {
+			void logEvent('Traces Explorer: Data present', {
+				panelType,
+			});
+		}
+	}, [isLoading, isFetching, isError, rows, panelType]);
+
+	return (
+		<div className={styles.container}>
+			<div className="trace-explorer-controls">
+				<div className="order-by-container">
+					<div className="order-by-label">
+						Order by <Minus size={14} /> <ArrowUp10 size={14} />
+					</div>
+
+					<ListViewOrderBy
+						value={orderBy}
+						onChange={handleOrderChange}
+						dataSource={DataSource.TRACES}
+					/>
+				</div>
+
+				<DownloadOptionsMenu
+					dataSource={DataSource.TRACES}
+					selectedColumns={options?.selectColumns}
+				/>
+
+				<TraceExplorerControls
+					isLoading={isFetching}
+					totalCount={rows.length}
+					config={config}
+					perPageOptions={PER_PAGE_OPTIONS}
+				/>
+			</div>
+
+			<TracesTable
+				data={rows}
+				columns={columns}
+				panelType="LIST"
+				getRowHref={getTraceLink}
+				isLoading={isLoading}
+				isFetching={isFetching}
+				isError={isError}
+				error={error}
+				isFilterApplied={isFilterApplied}
+				onColumnOrderChange={handleColumnOrderChange}
+				onColumnRemove={config?.addColumn?.onRemove}
+			/>
+		</div>
+	);
+}
+
+ListView.defaultProps = {
+	queryKeyRef: undefined,
+};
+
+export default memo(ListView);

frontend/src/container/LLMObservability/Explorer/ListView/configs.ts

@@ -0,0 +1,19 @@
+import type { TelemetryFieldKey } from 'api/v5/v5';
+import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
+
+export const defaultSelectedColumns: string[] = [
+	'service.name',
+	'name',
+	'duration_nano',
+	'http_method',
+	'response_status_code',
+	'timestamp',
+];
+
+export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
+
+// Pinned timestamp column
+export const TIMESTAMP_FIELD = {
+	name: 'timestamp',
+	fieldContext: 'span',
+} as TelemetryFieldKey;

frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx

@@ -0,0 +1,61 @@
+import { memo, useCallback, useMemo } from 'react';
+import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ExplorerOrderBy from 'container/ExplorerOrderBy';
+import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
+import { DataSource } from 'types/common/queryBuilder';
+
+function QuerySection(): JSX.Element {
+	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const isList = panelTypes === PANEL_TYPES.LIST;
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: false, isDisabled: false },
+			limit: { isHidden: isList, isDisabled: true },
+			having: { isHidden: isList, isDisabled: true },
+		};
+
+		return config;
+	}, [panelTypes]);
+
+	const renderOrderBy = useCallback(
+		({ query, onChange }: OrderByFilterProps) => (
+			<ExplorerOrderBy query={query} onChange={onChange} />
+		),
+		[],
+	);
+
+	const queryComponents = useMemo((): QueryBuilderProps['queryComponents'] => {
+		const shouldRenderCustomOrderBy =
+			panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE;
+
+		return {
+			...(shouldRenderCustomOrderBy ? { renderOrderBy } : {}),
+		};
+	}, [panelTypes, renderOrderBy]);
+
+	const isListViewPanel = useMemo(
+		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
+		[panelTypes],
+	);
+
+	return (
+		<QueryBuilderV2
+			isListViewPanel={isListViewPanel}
+			showTraceOperator
+			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
+			queryComponents={queryComponents}
+			panelType={panelTypes}
+			filterConfigs={filterConfigs}
+			showOnlyWhereClause={
+				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
+			}
+			version="v3" // setting this to v3 as we this is rendered in logs explorer
+		/>
+	);
+}
+
+export default memo(QuerySection);

frontend/src/container/LLMObservability/Explorer/TableView/TableView.styles.scss

@@ -0,0 +1,7 @@
+.traces-table-view-header {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	padding: 12px;
+	flex-shrink: 0;
+}

frontend/src/container/LLMObservability/Explorer/TableView/TableView.tsx

@@ -0,0 +1,130 @@
+import {
+	Dispatch,
+	memo,
+	MutableRefObject,
+	SetStateAction,
+	useEffect,
+	useMemo,
+} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { Space } from 'antd';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import ExportMenu from 'components/ExportMenu/ExportMenu';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { QueryTable } from 'container/QueryTable';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { AppState } from 'store/reducers';
+import { Warning } from 'types/api';
+import APIError from 'types/api/error';
+import { QueryDataV3 } from 'types/api/widgets/getQuery';
+import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import './TableView.styles.scss';
+
+function TableView({
+	setWarning,
+	setIsLoadingQueries,
+	queryKeyRef,
+}: {
+	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
+	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
+	queryKeyRef?: MutableRefObject<any>;
+}): JSX.Element {
+	const { stagedQuery, panelType } = useQueryBuilder();
+
+	const {
+		selectedTime: globalSelectedTime,
+		maxTime,
+		minTime,
+	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
+
+	const queryKey = useMemo(
+		() => [
+			REACT_QUERY_KEY.GET_QUERY_RANGE,
+			globalSelectedTime,
+			maxTime,
+			minTime,
+			stagedQuery,
+		],
+		[globalSelectedTime, maxTime, minTime, stagedQuery],
+	);
+
+	if (queryKeyRef) {
+		queryKeyRef.current = queryKey;
+	}
+
+	const { data, isLoading, isFetching, isError, error } = useGetQueryRange(
+		{
+			query: stagedQuery || initialQueriesMap.traces,
+			graphType: panelType || PANEL_TYPES.TABLE,
+			selectedTime: 'GLOBAL_TIME',
+			globalSelectedInterval: globalSelectedTime,
+			params: {
+				dataSource: 'traces',
+			},
+		},
+		ENTITY_VERSION_V5,
+		{
+			queryKey,
+			enabled: !!stagedQuery && panelType === PANEL_TYPES.TABLE,
+		},
+	);
+
+	useEffect(() => {
+		if (isLoading || isFetching) {
+			setIsLoadingQueries(true);
+		} else {
+			setIsLoadingQueries(false);
+		}
+	}, [isLoading, isFetching, setIsLoadingQueries]);
+
+	const queryTableData = useMemo(
+		() =>
+			data?.payload?.data?.newResult?.data?.result ||
+			data?.payload.data.result ||
+			[],
+		[data],
+	);
+
+	useEffect(() => {
+		if (data?.payload) {
+			setWarning(data.warning);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [data?.payload, data?.warning]);
+
+	return (
+		<Space.Compact block direction="vertical">
+			{isError && error && <ErrorInPlace error={error as APIError} />}
+			{!isError && data && (
+				<div className="traces-table-view-header">
+					<ExportMenu
+						dataSource={DataSource.TRACES}
+						data={data}
+						query={stagedQuery || initialQueriesMap.traces}
+						fileName="traces-table"
+					/>
+				</div>
+			)}
+			{!isError && (
+				<QueryTable
+					query={stagedQuery || initialQueriesMap.traces}
+					queryTableData={queryTableData as QueryDataV3[]}
+					loading={isLoading}
+					sticky
+				/>
+			)}
+		</Space.Compact>
+	);
+}
+
+TableView.defaultProps = {
+	queryKeyRef: undefined,
+};
+
+export default memo(TableView);

frontend/src/container/LLMObservability/Explorer/TimeSeriesView/TimeSeriesView.styles.scss

@@ -0,0 +1,8 @@
+.trace-explorer-time-series-view-container {
+	&-header {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		padding: 12px;
+	}
+}

frontend/src/container/LLMObservability/Explorer/TimeSeriesView/TimeSeriesView.tsx

@@ -0,0 +1,147 @@
+import {
+	Dispatch,
+	MutableRefObject,
+	SetStateAction,
+	useEffect,
+	useMemo,
+} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
+import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
+import { AppState } from 'store/reducers';
+import { Warning } from 'types/api';
+import APIError from 'types/api/error';
+import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import './TimeSeriesView.styles.scss';
+
+function TimeSeriesViewContainer({
+	dataSource = DataSource.TRACES,
+	isFilterApplied,
+	setWarning,
+	setIsLoadingQueries,
+	queryKeyRef,
+}: TimeSeriesViewProps): JSX.Element {
+	const { stagedQuery, currentQuery, panelType } = useQueryBuilder();
+
+	const isValidToConvertToMs = useMemo(() => {
+		const isValid: boolean[] = [];
+
+		currentQuery.builder.queryData.forEach(
+			({ aggregateAttribute, aggregateOperator }) => {
+				const isExistDurationNanoAttribute =
+					aggregateAttribute?.key === 'durationNano' ||
+					aggregateAttribute?.key === 'duration_nano';
+
+				const isCountOperator =
+					aggregateOperator === 'count' || aggregateOperator === 'count_distinct';
+
+				isValid.push(!isCountOperator && isExistDurationNanoAttribute);
+			},
+		);
+
+		return isValid.every(Boolean);
+	}, [currentQuery]);
+
+	const defaultUnit = isValidToConvertToMs ? 'ms' : 'short';
+	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit(defaultUnit);
+
+	const {
+		selectedTime: globalSelectedTime,
+		maxTime,
+		minTime,
+	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
+
+	const queryKey = useMemo(
+		() => [
+			REACT_QUERY_KEY.GET_QUERY_RANGE,
+			globalSelectedTime,
+			maxTime,
+			minTime,
+			stagedQuery,
+		],
+		[globalSelectedTime, maxTime, minTime, stagedQuery],
+	);
+
+	if (queryKeyRef) {
+		queryKeyRef.current = queryKey;
+	}
+
+	const { data, isLoading, isFetching, isError, error } = useGetQueryRange(
+		{
+			query: stagedQuery || initialQueriesMap[dataSource],
+			graphType: panelType || PANEL_TYPES.TIME_SERIES,
+			selectedTime: 'GLOBAL_TIME',
+			globalSelectedInterval: globalSelectedTime,
+			params: {
+				dataSource,
+			},
+		},
+		// ENTITY_VERSION_V4,
+		ENTITY_VERSION_V5,
+		{
+			queryKey,
+			enabled: !!stagedQuery && panelType === PANEL_TYPES.TIME_SERIES,
+		},
+	);
+
+	useEffect(() => {
+		if (data?.payload) {
+			setWarning(data?.warning);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [data?.payload, data?.warning]);
+
+	const responseData = useMemo(
+		() => (isValidToConvertToMs ? convertDataValueToMs(data) : data),
+		[data, isValidToConvertToMs],
+	);
+
+	useEffect(() => {
+		if (isLoading || isFetching) {
+			setIsLoadingQueries(true);
+		} else {
+			setIsLoadingQueries(false);
+		}
+	}, [isLoading, isFetching, setIsLoadingQueries]);
+
+	return (
+		<div className="trace-explorer-time-series-view-container">
+			<TimeSeriesView
+				isFilterApplied={isFilterApplied}
+				isError={isError}
+				error={error as APIError}
+				isLoading={isLoading || isFetching}
+				data={responseData}
+				yAxisUnit={yAxisUnit}
+				onYAxisUnitChange={onUnitChange}
+				dataSource={dataSource}
+				setWarning={setWarning}
+				allowExport
+			/>
+		</div>
+	);
+}
+
+interface TimeSeriesViewProps {
+	dataSource?: DataSource;
+	isFilterApplied: boolean;
+	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
+	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
+	queryKeyRef?: MutableRefObject<any>;
+}
+
+TimeSeriesViewContainer.defaultProps = {
+	dataSource: DataSource.TRACES,
+	queryKeyRef: undefined,
+};
+
+export default TimeSeriesViewContainer;

frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.module.scss

@@ -0,0 +1,15 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	// Page chain isn't a flex column, so anchor the virtualized table against the viewport.
+	height: calc(100vh - 240px);
+	min-height: 400px;
+}
+
+.actionsContainer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}

frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.tsx

@@ -0,0 +1,190 @@
+import {
+	Dispatch,
+	memo,
+	MutableRefObject,
+	SetStateAction,
+	useEffect,
+	useMemo,
+} from 'react';
+import { QueryKey } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import TraceExplorerControls from 'container/TracesExplorer/Controls';
+import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
+import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
+import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Pagination } from 'hooks/queryPagination';
+import useUrlQueryData from 'hooks/useUrlQueryData';
+import { AppState } from 'store/reducers';
+import { Warning } from 'types/api';
+import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import DOCLINKS from 'utils/docLinks';
+
+import { columns, PER_PAGE_OPTIONS } from './configs';
+import styles from './TracesView.module.scss';
+
+interface TracesViewProps {
+	isFilterApplied: boolean;
+	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
+	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
+	queryKeyRef?: MutableRefObject<QueryKey | undefined>;
+}
+
+function TracesView({
+	isFilterApplied,
+	setWarning,
+	setIsLoadingQueries,
+	queryKeyRef,
+}: TracesViewProps): JSX.Element {
+	const { stagedQuery, panelType } = useQueryBuilder();
+
+	const {
+		selectedTime: globalSelectedTime,
+		maxTime,
+		minTime,
+	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
+
+	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
+		QueryParams.pagination,
+	);
+
+	const transformedQuery = useMemo(
+		() => getListViewQuery(stagedQuery || initialQueriesMap.traces),
+		[stagedQuery],
+	);
+
+	const queryKey = useMemo(
+		() => [
+			REACT_QUERY_KEY.GET_QUERY_RANGE,
+			globalSelectedTime,
+			maxTime,
+			minTime,
+			stagedQuery,
+			panelType,
+			paginationQueryData,
+		],
+		[
+			globalSelectedTime,
+			maxTime,
+			minTime,
+			stagedQuery,
+			panelType,
+			paginationQueryData,
+		],
+	);
+
+	if (queryKeyRef) {
+		queryKeyRef.current = queryKey;
+	}
+
+	const { data, isLoading, isFetching, isError, error } = useGetQueryRange(
+		{
+			query: transformedQuery,
+			graphType: panelType || PANEL_TYPES.TRACE,
+			selectedTime: 'GLOBAL_TIME',
+			globalSelectedInterval: globalSelectedTime,
+			params: {
+				dataSource: 'traces',
+			},
+			tableParams: {
+				pagination: paginationQueryData,
+			},
+		},
+		ENTITY_VERSION_V5,
+		{
+			queryKey,
+			enabled: !!stagedQuery && panelType === PANEL_TYPES.TRACE,
+		},
+	);
+
+	useEffect(() => {
+		if (data?.payload) {
+			setWarning(data?.warning);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [data?.payload, data?.warning]);
+
+	const responseData = data?.payload?.data?.newResult?.data?.result[0]?.list;
+
+	const rows = useMemo<TracesTableRow[]>(
+		() =>
+			(responseData ?? []).map((item) => {
+				const row = item.data;
+				return { ...row, id: row.trace_id };
+			}) as TracesTableRow[],
+		[responseData],
+	);
+
+	useEffect(() => {
+		if (isLoading || isFetching) {
+			setIsLoadingQueries(true);
+		} else {
+			setIsLoadingQueries(false);
+		}
+	}, [isLoading, isFetching, setIsLoadingQueries]);
+
+	useEffect(() => {
+		if (!isLoading && !isFetching && !isError && rows.length !== 0) {
+			void logEvent('Traces Explorer: Data present', {
+				panelType: 'TRACE',
+			});
+		}
+	}, [isLoading, isFetching, isError, rows.length]);
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.actionsContainer}>
+				<Typography>
+					This tab only shows Root Spans. More details
+					<Typography.Link href={DOCLINKS.TRACES_DETAILS_LINK} target="_blank">
+						{' '}
+						here
+					</Typography.Link>
+				</Typography>
+
+				<div className="trace-explorer-controls">
+					<DownloadOptionsMenu
+						dataSource={DataSource.TRACES}
+						panelType={PANEL_TYPES.TRACE}
+					/>
+
+					<TraceExplorerControls
+						isLoading={isLoading}
+						totalCount={rows.length}
+						perPageOptions={PER_PAGE_OPTIONS}
+					/>
+				</div>
+			</div>
+
+			<TracesTable
+				data={rows}
+				columns={columns}
+				respectColumnOrder
+				panelType="TRACE"
+				getRowHref={getTraceLink}
+				isLoading={isLoading}
+				isFetching={isFetching}
+				isError={isError}
+				error={error}
+				isFilterApplied={isFilterApplied}
+			/>
+		</div>
+	);
+}
+
+TracesView.defaultProps = {
+	queryKeyRef: undefined,
+};
+
+export default memo(TracesView);

frontend/src/container/LLMObservability/Explorer/TracesView/configs.ts

@@ -0,0 +1,25 @@
+import { TelemetryFieldKey } from 'api/v5/v5';
+import type { TableColumnDef } from 'components/TanStackTableView/types';
+import {
+	getFieldColumn,
+	TracesTableRow,
+} from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
+
+export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
+
+const TRACE_FIELDS = [
+	{ name: 'service.name', fieldContext: 'resource' },
+	{ name: 'name' },
+	{ name: 'duration_nano' },
+	{ name: 'span_count' },
+	{ name: 'trace_id' },
+] as TelemetryFieldKey[];
+
+export const columns: TableColumnDef<TracesTableRow>[] = TRACE_FIELDS.map(
+	(field) => ({
+		...getFieldColumn(field),
+		enableRemove: false,
+		canBeHidden: false,
+	}),
+);

frontend/src/container/LLMObservability/Explorer/constants.ts

@@ -0,0 +1,36 @@
+export const TOOLBAR_VIEWS = {
+	list: {
+		name: 'list',
+		label: 'List',
+		show: true,
+		key: 'list',
+	},
+	timeseries: {
+		name: 'timeseries',
+		label: 'Timeseries',
+		disabled: false,
+		show: true,
+		key: 'timeseries',
+	},
+	trace: {
+		name: 'trace',
+		label: 'Trace',
+		disabled: false,
+		show: true,
+		key: 'trace',
+	},
+	table: {
+		name: 'table',
+		label: 'Table',
+		disabled: false,
+		show: true,
+		key: 'table',
+	},
+	clickhouse: {
+		name: 'clickhouse',
+		label: 'Clickhouse',
+		disabled: false,
+		show: false,
+		key: 'clickhouse',
+	},
+};

frontend/src/container/LLMObservability/__tests__/LLMObservability.test.tsx

@@ -18,6 +18,12 @@ jest.mock('pages/DashboardPageV2/DashboardContainer', () => ({
 	default: (): JSX.Element => <div data-testid="llm-overview-dashboard" />,
 }));
 
+// Same data-router gap as the dashboard above: the Explorer toolbar calls useNavigationType.
+jest.mock('container/LLMObservability/Explorer/Explorer', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="llm-observability-explorer" />,
+}));
+
 function setupList(items = mockRules): void {
 	server.use(
 		rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) =>

frontend/src/container/LiveLogs/LiveLogsList/LiveLogsList.styles.scss

@@ -4,13 +4,6 @@
 			padding: 0px 8px;
 
 			.logs-frequency-chart {
-				.ant-card-body {
-					height: 140px;
-					min-height: 140px;
-					padding: 0 16px 22px 16px;
-					font-family: 'Geist Mono';
-				}
-
 				margin-bottom: 0px;
 			}
 		}

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -15,9 +15,8 @@ import {
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
 import { FeatureKeys } from 'constants/features';
-import { QueryParams } from 'constants/query';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
@@ -50,7 +49,7 @@ function BodyTitleRenderer({
 	const { featureFlags } = useAppContext();
 	const [, setCopy] = useCopyToClipboard();
 	const { notifications } = useNotifications();
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
+	const { viewName } = useGetSavedViewParams();
 
 	const cleanedNodeKey = removeObjectFromString(nodeKey);
 	const isBodyJsonQueryEnabled =

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -7,13 +7,12 @@ import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { QueryParams } from 'constants/query';
 import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
 import {
@@ -141,7 +140,7 @@ export default function TableViewActions(
 
 	const { pathname } = useLocation();
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
+	const { viewName } = useGetSavedViewParams();
 	const { dataType, logType: fieldType } = getFieldAttributes(record.field);
 
 	// there is no option for where clause in old logs explorer and live logs page or infra monitoring

frontend/src/container/LogDetailedView/TableView/__test__/TableViewActions.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
 
@@ -88,7 +88,7 @@ jest.mock('react-router-dom', () => ({
 }));
 
 jest.mock('hooks/queryBuilder/useQueryBuilder');
-jest.mock('hooks/queryBuilder/useGetSearchQueryParam');
+jest.mock('hooks/saveViews/useGetSavedViewParams');
 
 describe('TableViewActions', () => {
 	const TEST_VALUE = 'test value';
@@ -140,8 +140,10 @@ describe('TableViewActions', () => {
 			}),
 		} as any);
 
-		// Default mock for useGetSearchQueryParam
-		jest.mocked(useGetSearchQueryParam).mockReturnValue(null);
+		// Default mock for useGetSavedViewParams
+		jest
+			.mocked(useGetSavedViewParams)
+			.mockReturnValue({ viewName: '', viewKey: '' });
 	});
 
 	it('should render without crashing', () => {
@@ -249,7 +251,9 @@ describe('TableViewActions', () => {
 			updateQueriesData: mockUpdateQueriesData,
 		} as any);
 
-		jest.mocked(useGetSearchQueryParam).mockReturnValue(null);
+		jest
+			.mocked(useGetSavedViewParams)
+			.mockReturnValue({ viewName: '', viewKey: '' });
 
 		render(
 			<TableViewActions

frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx

@@ -3,10 +3,9 @@ import { useLocation } from 'react-router-dom';
 import { CircleMinus, CirclePlus, Layers, RefreshCw } from '@signozhq/icons';
 import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
-import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
@@ -58,7 +57,7 @@ export function useLogAttributeActions({
 	const { pathname } = useLocation();
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
 	const { featureFlags } = useAppContext();
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
+	const { viewName } = useGetSavedViewParams();
 
 	const isBodyJsonQueryEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)

frontend/src/container/LogsExplorerChart/LogsExplorerChart.styles.scss

@@ -3,13 +3,6 @@
 	min-height: 200px;
 	border-bottom: 1px solid var(--l1-border);
 
-	.ant-card-body {
-		height: 200px;
-		min-height: 200px;
-		padding: 0 16px 16px 16px;
-		font-family: 'Geist Mono';
-	}
-
 	.logs-frequency-chart-loading {
 		height: 100%;
 		display: flex;

frontend/src/container/LogsExplorerChart/index.tsx

@@ -1,25 +1,29 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import Graph from 'components/Graph';
 import Spinner from 'components/Spinner';
 import { QueryParams } from 'constants/query';
-import { themeColors } from 'constants/theme';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import { useResizeObserver } from 'hooks/useDimensions';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import getChartData, { GetChartDataProps } from 'lib/getChartData';
 import GetMinMax from 'lib/getMinMax';
-import { colors } from 'lib/getRandomColor';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { StackMode } from 'lib/uPlotV2/config/types';
+import { useTimezone } from 'providers/Timezone';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { LogsExplorerChartProps } from './LogsExplorerChart.interfaces';
-import { getColorsForSeverityLabels } from './utils';
+import { useLogsExplorerChartConfig } from './useLogsExplorerChartConfig';
 
 import './LogsExplorerChart.styles.scss';
 
+// Axis and tooltip format separately; both need this or only one abbreviates.
+const Y_AXIS_UNIT = 'short';
+
 function LogsExplorerChart({
 	data,
 	isLoading,
@@ -37,24 +41,6 @@ function LogsExplorerChart({
 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
-	const handleCreateDatasets: Required<GetChartDataProps>['createDataset'] =
-		useCallback(
-			(element, index, allLabels) => ({
-				data: element,
-				backgroundColor: isLogsExplorerViews
-					? getColorsForSeverityLabels(allLabels[index], index)
-					: colors[index % colors.length] || themeColors.red,
-				borderColor: isLogsExplorerViews
-					? getColorsForSeverityLabels(allLabels[index], index)
-					: colors[index % colors.length] || themeColors.red,
-				...(isLabelEnabled
-					? {
-							label: allLabels[index],
-						}
-					: {}),
-			}),
-			[isLabelEnabled, isLogsExplorerViews],
-		);
 
 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
@@ -86,44 +72,47 @@ function LogsExplorerChart({
 		[dispatch, location.pathname, safeNavigate, urlQuery, isShowingLiveLogs],
 	);
 
-	const graphData = useMemo(
-		() =>
-			getChartData({
-				queryData: [
-					{
-						queryData: data,
-					},
-				],
-				createDataset: handleCreateDatasets,
-			}),
-		[data, handleCreateDatasets],
-	);
-
-	// Convert nanosecond timestamps to milliseconds for Chart.js
-	const { chartMinTime, chartMaxTime } = useMemo(
+	// uPlot plots the series on a seconds-based x scale
+	const { minTimeScale, maxTimeScale } = useMemo(
 		() => ({
-			chartMinTime: minTime ? Math.floor(minTime / 1e6) : undefined,
-			chartMaxTime: maxTime ? Math.floor(maxTime / 1e6) : undefined,
+			minTimeScale: minTime ? Math.floor(minTime / 1e9) : undefined,
+			maxTimeScale: maxTime ? Math.floor(maxTime / 1e9) : undefined,
 		}),
 		[minTime, maxTime],
 	);
 
+	const { timezone } = useTimezone();
+	const graphRef = useRef<HTMLDivElement>(null);
+	const dimensions = useResizeObserver(graphRef);
+
+	const { config, chartData } = useLogsExplorerChartConfig({
+		data,
+		isLogsExplorerViews,
+		isLabelEnabled,
+		onDragSelect,
+		minTimeScale,
+		maxTimeScale,
+		yAxisUnit: Y_AXIS_UNIT,
+	});
+
 	return (
-		<div className={`${className} logs-frequency-chart-container`}>
+		<div ref={graphRef} className={`${className} logs-frequency-chart-container`}>
 			{isLoading ? (
 				<div className="logs-frequency-chart-loading">
 					<Spinner size="default" height="100%" />
 				</div>
 			) : (
-				<Graph
-					name="logsExplorerChart"
-					data={graphData.data}
-					isStacked={isLogsExplorerViews}
-					type="bar"
-					animate
-					onDragSelect={onDragSelect}
-					minTime={chartMinTime}
-					maxTime={chartMaxTime}
+				<BarChart
+					config={config}
+					data={chartData}
+					width={dimensions.width}
+					height={dimensions.height}
+					stack={isLogsExplorerViews ? StackMode.Normal : StackMode.None}
+					showLegend={isLabelEnabled}
+					legendConfig={{ position: LegendPosition.BOTTOM }}
+					timezone={timezone}
+					data-testid="logs-frequency-chart"
+					yAxisUnit={Y_AXIS_UNIT}
 				/>
 			)}
 		</div>

frontend/src/container/LogsExplorerChart/useLogsExplorerChartConfig.ts

@@ -0,0 +1,105 @@
+import { useMemo } from 'react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { themeColors } from 'constants/theme';
+import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import getLabelName from 'lib/getLabelName';
+import { colors } from 'lib/getRandomColor';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryData } from 'types/api/widgets/getQuery';
+import uPlot from 'uplot';
+
+import { getColorsForSeverityLabels } from './utils';
+
+export interface UseLogsExplorerChartConfigParams {
+	data: QueryData[];
+	isLogsExplorerViews?: boolean;
+	isLabelEnabled?: boolean;
+	onDragSelect: (start: number, end: number) => void;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+	yAxisUnit?: string;
+}
+
+export interface UseLogsExplorerChartConfigResult {
+	config: UPlotConfigBuilder;
+	chartData: uPlot.AlignedData;
+}
+
+export function useLogsExplorerChartConfig({
+	data,
+	isLogsExplorerViews = false,
+	isLabelEnabled = true,
+	onDragSelect,
+	minTimeScale,
+	maxTimeScale,
+	yAxisUnit,
+}: UseLogsExplorerChartConfigParams): UseLogsExplorerChartConfigResult {
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	// getUPlotChartData / buildBaseConfig both consume the legacy query-range payload
+	// shape, so the raw series list is wrapped instead of being plotted directly.
+	const apiResponse = useMemo(
+		() =>
+			({
+				data: { result: data, resultType: '' },
+			}) as unknown as MetricRangePayloadProps,
+		[data],
+	);
+
+	const chartData = useMemo(() => getUPlotChartData(apiResponse), [apiResponse]);
+
+	const config = useMemo(() => {
+		const builder = buildBaseConfig({
+			id: 'logs-explorer-frequency-chart',
+			isDarkMode,
+			onDragSelect,
+			timezone,
+			minTimeScale,
+			maxTimeScale,
+			yAxisUnit,
+			panelType: PANEL_TYPES.BAR,
+		});
+
+		data.forEach((series, index) => {
+			const label = getLabelName(
+				series.metric,
+				series.queryName || '',
+				series.legend || '',
+			);
+
+			const color = isLogsExplorerViews
+				? getColorsForSeverityLabels(label, index)
+				: colors[index % colors.length] || themeColors.red;
+
+			builder.addSeries({
+				scaleKey: 'y',
+				drawStyle: DrawStyle.Bar,
+				// No group-by yields query name "A"; use ' ' not '' so uPlot does not default the label to "Value".
+				label: isLabelEnabled && label.trim() ? label : ' ',
+				lineColor: color,
+				colorMapping: {},
+				isDarkMode,
+			});
+		});
+
+		return builder;
+	}, [
+		data,
+		isDarkMode,
+		isLabelEnabled,
+		isLogsExplorerViews,
+		maxTimeScale,
+		minTimeScale,
+		onDragSelect,
+		timezone,
+		yAxisUnit,
+	]);
+
+	return { config, chartData };
+}

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -217,13 +217,6 @@
 		padding: 0px 8px;
 
 		.logs-frequency-chart {
-			.ant-card-body {
-				height: 140px;
-				min-height: 140px;
-				padding: 0 16px 22px 16px;
-				font-family: 'Geist Mono';
-			}
-
 			margin-bottom: 0px;
 		}
 	}

frontend/src/container/OptionsMenu/__test__/useOptionsMenu.test.ts

@@ -298,9 +298,9 @@ describe('useOptionsMenu', () => {
 
 			// New order: [attribute:service.name, log:body, resource:service.name, log:timestamp]
 			result.current.config.addColumn?.onReorder([
-				'attribute:service.name',
-				'log:body',
-				'resource:service.name',
+				'attribute:service.name:string',
+				'log:body:string',
+				'resource:service.name:string',
 				'log:timestamp',
 			]);
 
@@ -331,9 +331,9 @@ describe('useOptionsMenu', () => {
 				'state-indicator',
 				'log:timestamp',
 				'unknown.composite',
-				'log:body',
-				'resource:service.name',
-				'attribute:service.name',
+				'log:body:string',
+				'resource:service.name:string',
+				'attribute:service.name:string',
 			]);
 
 			const reordered = mockUpdateColumns.mock.calls[0][0];
@@ -360,7 +360,7 @@ describe('useOptionsMenu', () => {
 			);
 
 			// Removing 'resource:service.name' should drop ONLY the resource variant.
-			result.current.config.addColumn?.onRemove('resource:service.name');
+			result.current.config.addColumn?.onRemove('resource:service.name:string');
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
 			const remaining = mockUpdateColumns.mock.calls[0][0];

frontend/src/container/OptionsMenu/constants.ts

@@ -56,7 +56,7 @@ export function dedupeColumnsByCompositeKey(
 	const seen = new Set<string>();
 	let hasDuplicate = false;
 	const deduped = columns.filter((c) => {
-		const key = buildCompositeKey(c.name, c.fieldContext);
+		const key = buildCompositeKey(c.name, c.fieldContext, c.fieldDataType);
 		if (seen.has(key)) {
 			hasDuplicate = true;
 			return false;

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -281,7 +281,8 @@ const useOptionsMenu = ({
 	const handleRemoveSelectedColumn = useCallback(
 		(columnKey: string) => {
 			const newSelectedColumns = preferences?.columns?.filter(
-				(f) => buildCompositeKey(f.name, f.fieldContext) !== columnKey,
+				(f) =>
+					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType) !== columnKey,
 			);
 
 			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
@@ -364,7 +365,10 @@ const useOptionsMenu = ({
 		(orderedIds: string[]): void => {
 			const current = preferences?.columns ?? [];
 			const byCompositeKey = new Map(
-				current.map((f) => [buildCompositeKey(f.name, f.fieldContext), f]),
+				current.map((f) => [
+					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
+					f,
+				]),
 			);
 			const reordered = orderedIds
 				.map((id) => byCompositeKey.get(id))

frontend/src/container/OptionsMenu/utils.ts

@@ -15,8 +15,11 @@ export const getOptionsFromKeys = (
 	);
 };
 
-// Composite identity for a column. Disambiguates same-name fields across
-// different fieldContexts (e.g. resource:service.name vs attribute:service.name).
-// Falls back to bare name when context is missing.
-export const buildCompositeKey = (name: string, context?: string): string =>
-	context ? `${context}:${name}` : name;
+export const buildCompositeKey = (
+	name: string,
+	context?: string,
+	dataType?: string,
+): string => {
+	const withContext = context ? `${context}:${name}` : name;
+	return dataType ? `${withContext}:${dataType}` : withContext;
+};

frontend/src/container/TracesExplorer/ListView/index.data.test.tsx

@@ -0,0 +1,133 @@
+import { ENVIRONMENT } from 'constants/env';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render, screen } from 'tests/test-utils';
+
+import ListView from './index';
+
+// globalTime starts with loading:true, which gates the list query. Force just that
+// slice's loading to false so the query fires; every other selector is untouched.
+jest.mock('react-redux', () => {
+	const actual = jest.requireActual('react-redux');
+	return {
+		...actual,
+		useSelector: (selector: (state: unknown) => unknown): unknown => {
+			const result = actual.useSelector(selector);
+			if (result && typeof result === 'object' && 'loading' in result) {
+				return { ...result, loading: false };
+			}
+			return result;
+		},
+	};
+});
+
+// List columns come from the options menu (server-synced preferences). Pin them
+// so the query fires and the expected columns render, independent of that API.
+jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
+	__esModule: true,
+	default: (): unknown => ({
+		options: {
+			selectColumns: [
+				{ name: 'service.name', fieldContext: 'resource' },
+				{ name: 'name', fieldContext: 'span' },
+				{ name: 'duration_nano', fieldContext: 'span' },
+				{ name: 'http_method', fieldContext: 'span' },
+				{ name: 'response_status_code', fieldContext: 'span' },
+			],
+		},
+		config: { addColumn: { onRemove: jest.fn() } },
+	}),
+}));
+
+const BASE_URL = ENVIRONMENT.baseURL;
+const QUERY_RANGE_URL = `${BASE_URL}/api/v5/query_range`;
+
+const listRows = [
+	{
+		timestamp: '2024-07-19T08:39:58.735245Z',
+		data: {
+			'service.name': 'frontend',
+			name: 'HTTP GET',
+			duration_nano: 55306000,
+			http_method: 'GET',
+			response_status_code: '200',
+			span_id: '772c4d29dd9076ac',
+			trace_id: '0000000000000000344ded1387b08a7e',
+		},
+	},
+	{
+		timestamp: '2024-07-19T08:39:59.949129915Z',
+		data: {
+			'service.name': 'demo-app',
+			name: 'authenticate_check_db',
+			duration_nano: 790949390,
+			// empty status fields to assert the "-" cell
+			http_method: '',
+			response_status_code: '',
+			span_id: '5704353737b6778e',
+			trace_id: 'a364a8e15af3e9a8c866e0528db8b637',
+		},
+	},
+];
+
+const listResponse = (rows: unknown[]): Record<string, unknown> => ({
+	data: { type: 'raw', data: { results: [{ queryName: 'A', rows }] } },
+});
+
+const mockSuccess = (rows: unknown[] = listRows): void => {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(listResponse(rows))),
+		),
+	);
+};
+
+const renderListView = (): ReturnType<typeof render> =>
+	render(
+		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
+			<ListView
+				isFilterApplied={false}
+				setWarning={jest.fn()}
+				setIsLoadingQueries={jest.fn()}
+			/>
+		</VirtuosoMockContext.Provider>,
+		{},
+		{
+			initialRoute: '/traces-explorer',
+			queryBuilderOverrides: {
+				panelType: PANEL_TYPES.LIST,
+				stagedQuery: initialQueriesMap.traces,
+				currentQuery: initialQueriesMap.traces,
+				redirectWithQueryBuilderData: jest.fn(),
+			} as any,
+		},
+	);
+
+describe('Traces ListView - Data Loaded', () => {
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders backend rows in FieldCell format', async () => {
+		mockSuccess();
+		renderListView();
+
+		// plain-text columns
+		await expect(screen.findByText('frontend')).resolves.toBeInTheDocument();
+		expect(screen.getByText('authenticate_check_db')).toBeInTheDocument();
+
+		// duration_nano renders in milliseconds
+		expect(screen.getAllByTestId('duration_nano')[0]).toHaveTextContent(/ms$/);
+
+		// http_method / response_status_code render as badges
+		expect(screen.getAllByTestId('http_method')[0]).toHaveTextContent('GET');
+		expect(screen.getAllByTestId('response_status_code')[0]).toHaveTextContent(
+			'200',
+		);
+
+		// empty status fields render "-"
+		expect(screen.getAllByText('-').length).toBeGreaterThanOrEqual(1);
+	});
+});

frontend/src/container/TracesExplorer/TracesTable/FieldCell.tsx

@@ -1,6 +1,8 @@
+import { generatePath, Link } from 'react-router-dom';
 import { Badge } from '@signozhq/ui/badge';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import ROUTES from 'constants/routes';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { useTimezone } from 'providers/Timezone';
 
@@ -8,6 +10,7 @@ import {
 	DURATION_FIELD_NAMES,
 	STATUS_FIELD_NAMES,
 	TIMESTAMP_FIELD_NAMES,
+	TRACE_ID_FIELD_NAMES,
 } from './constants';
 import { stringifyCellValue } from './utils';
 
@@ -38,6 +41,18 @@ function FieldCell({ name, value }: FieldCellProps): JSX.Element {
 
 	const text = stringifyCellValue(value);
 
+	if (TRACE_ID_FIELD_NAMES.has(name)) {
+		return (
+			<Link
+				to={generatePath(ROUTES.TRACE_DETAIL, { id: text })}
+				data-testid="trace-id"
+				onClick={(e): void => e.stopPropagation()}
+			>
+				{text}
+			</Link>
+		);
+	}
+
 	if (STATUS_FIELD_NAMES.has(name)) {
 		return (
 			<Badge data-testid={name} color="sakura" variant="outline">

frontend/src/container/TracesExplorer/TracesTable/TracesTable.tsx

@@ -19,7 +19,8 @@ import styles from './TracesTable.module.scss';
 export type TracesTableProps = {
 	data: TracesTableRow[];
 	columns: TableColumnDef<TracesTableRow>[];
-	columnStorageKey: string;
+	columnStorageKey?: string;
+	respectColumnOrder?: boolean;
 	panelType: PanelTypeKeys;
 	/** Builds the trace-detail href for a row; drives row click + cmd/ctrl-click. */
 	getRowHref: (row: TracesTableRow) => string;
@@ -37,6 +38,7 @@ function TracesTable({
 	data,
 	columns,
 	columnStorageKey,
+	respectColumnOrder = false,
 	panelType,
 	getRowHref,
 	isLoading,
@@ -88,7 +90,7 @@ function TracesTable({
 						columns={columns}
 						className={styles.tracesTable}
 						columnStorageKey={columnStorageKey}
-						respectColumnOrder={false}
+						respectColumnOrder={respectColumnOrder}
 						isLoading={isFetching}
 						cellTypographySize={cellTypographySize}
 						onColumnOrderChange={onColumnOrderChange}
@@ -104,6 +106,8 @@ function TracesTable({
 }
 
 TracesTable.defaultProps = {
+	columnStorageKey: undefined,
+	respectColumnOrder: false,
 	onColumnOrderChange: undefined,
 	onColumnRemove: undefined,
 	cellTypographySize: 'medium',

frontend/src/container/TracesExplorer/TracesTable/constants.ts

@@ -5,8 +5,14 @@ export const TIMESTAMP_FIELD_NAMES = new Set(['timestamp']);
 export const STATUS_FIELD_NAMES = new Set([
 	'httpMethod',
 	'http_method',
+	'http.method',
+	'http.request.method',
 	'responseStatusCode',
 	'response_status_code',
+	'http.status_code',
+	'http.response.status_code',
 ]);
 
 export const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
+
+export const TRACE_ID_FIELD_NAMES = new Set(['traceID', 'trace_id']);

frontend/src/container/TracesExplorer/TracesTable/getFieldColumn.tsx

@@ -10,11 +10,11 @@ export type TracesTableRow = { id: string } & Record<string, unknown>;
 export function getFieldColumn(
 	field: TelemetryFieldKey,
 ): TableColumnDef<TracesTableRow> {
-	const { name, fieldContext } = field;
+	const { name, fieldContext, fieldDataType } = field;
 	const isTimestamp = TIMESTAMP_FIELD_NAMES.has(name);
 
 	return {
-		id: buildCompositeKey(name, fieldContext),
+		id: buildCompositeKey(name, fieldContext, fieldDataType),
 		header: name,
 		accessorFn: (row): unknown => row[name],
 		enableMove: !isTimestamp,

frontend/src/container/TracesExplorer/TracesView/TracesView.module.scss

@@ -0,0 +1,15 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	// Page chain isn't a flex column, so anchor the virtualized table against the viewport.
+	height: calc(100vh - 240px);
+	min-height: 400px;
+}
+
+.actionsContainer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}

frontend/src/container/TracesExplorer/TracesView/configs.tsx

@@ -1,50 +1,25 @@
-import { generatePath, Link } from 'react-router-dom';
-import type { TableColumnsType as ColumnsType } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import ROUTES from 'constants/routes';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
+import { TelemetryFieldKey } from 'api/v5/v5';
+import type { TableColumnDef } from 'components/TanStackTableView/types';
+import {
+	getFieldColumn,
+	TracesTableRow,
+} from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
-import { ListItem } from 'types/api/widgets/getQuery';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 
-export const columns: ColumnsType<ListItem['data']> = [
-	{
-		title: 'Root Service Name',
-		dataIndex: 'service.name',
-		key: 'serviceName',
-	},
-	{
-		title: 'Root Operation Name',
-		dataIndex: 'name',
-		key: 'name',
-	},
-	{
-		title: 'Root Duration (in ms)',
-		dataIndex: 'duration_nano',
-		key: 'durationNano',
-		render: (duration: number): JSX.Element => (
-			<Typography>{getMs(String(duration))}ms</Typography>
-		),
-	},
-	{
-		title: 'No of Spans',
-		dataIndex: 'span_count',
-		key: 'span_count',
-	},
-	{
-		title: 'TraceID',
-		dataIndex: 'trace_id',
-		key: 'traceID',
-		render: (traceID: string): JSX.Element => (
-			<Link
-				to={generatePath(ROUTES.TRACE_DETAIL, {
-					id: traceID,
-				})}
-				data-testid="trace-id"
-			>
-				{traceID}
-			</Link>
-		),
-	},
-];
+const TRACE_FIELDS = [
+	{ name: 'service.name', fieldContext: 'resource' },
+	{ name: 'name' },
+	{ name: 'duration_nano' },
+	{ name: 'span_count' },
+	{ name: 'trace_id' },
+] as TelemetryFieldKey[];
+
+export const columns: TableColumnDef<TracesTableRow>[] = TRACE_FIELDS.map(
+	(field) => ({
+		...getFieldColumn(field),
+		enableRemove: false,
+		canBeHidden: false,
+	}),
+);

frontend/src/container/TracesExplorer/TracesView/index.test.tsx

@@ -0,0 +1,136 @@
+import { ENVIRONMENT } from 'constants/env';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+import TracesView from './index';
+
+const BASE_URL = ENVIRONMENT.baseURL;
+const QUERY_RANGE_URL = `${BASE_URL}/api/v5/query_range`;
+
+const groupedRows = [
+	{
+		timestamp: '2024-07-19T08:39:58.735245Z',
+		data: {
+			'service.name': 'frontend',
+			name: 'HTTP GET',
+			duration_nano: 55306000,
+			span_count: 8,
+			trace_id: '0000000000000000344ded1387b08a7e',
+		},
+	},
+	{
+		timestamp: '2024-07-19T08:39:59.949129915Z',
+		data: {
+			'service.name': 'demo-app',
+			// intentionally empty to assert the "-" cell
+			name: '',
+			duration_nano: 790949390,
+			span_count: 3,
+			trace_id: 'a364a8e15af3e9a8c866e0528db8b637',
+		},
+	},
+];
+
+const groupedResponse = (rows: unknown[]): Record<string, unknown> => ({
+	data: { type: 'trace', data: { results: [{ queryName: 'A', rows }] } },
+});
+
+const mockSuccess = (rows: unknown[] = groupedRows): void => {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(groupedResponse(rows))),
+		),
+	);
+};
+
+const mockError = (): void => {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
+			res(ctx.status(500), ctx.json({ status: 'error', error: 'boom' })),
+		),
+	);
+};
+
+const renderTracesView = (
+	props: Record<string, unknown> = {},
+): ReturnType<typeof render> =>
+	render(
+		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
+			<TracesView
+				isFilterApplied={false}
+				setWarning={jest.fn()}
+				setIsLoadingQueries={jest.fn()}
+				{...props}
+			/>
+		</VirtuosoMockContext.Provider>,
+		{},
+		{
+			initialRoute: '/traces-explorer',
+			queryBuilderOverrides: {
+				panelType: PANEL_TYPES.TRACE,
+				stagedQuery: initialQueriesMap.traces,
+				currentQuery: initialQueriesMap.traces,
+			} as any,
+		},
+	);
+
+describe('TracesView (grouped root-span table)', () => {
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders backend rows in FieldCell format', async () => {
+		mockSuccess();
+		renderTracesView();
+
+		// service.name + name render as plain text
+		await expect(screen.findByText('frontend')).resolves.toBeInTheDocument();
+		expect(screen.getByText('HTTP GET')).toBeInTheDocument();
+
+		// duration_nano renders in milliseconds
+		expect(screen.getAllByTestId('duration_nano')[0]).toHaveTextContent(/ms$/);
+
+		// span_count renders as text
+		expect(screen.getByText('8')).toBeInTheDocument();
+
+		// empty field renders "-"
+		expect(screen.getAllByText('-').length).toBeGreaterThanOrEqual(1);
+
+		// trace_id renders as a link to the trace detail
+		const traceLinks = screen.getAllByTestId('trace-id');
+		expect(traceLinks[0]).toHaveAttribute(
+			'href',
+			expect.stringContaining('/trace/0000000000000000344ded1387b08a7e'),
+		);
+	});
+
+	it('shows the empty state and keeps the toolbar when there are no rows', async () => {
+		mockSuccess([]);
+		renderTracesView();
+
+		// toolbar (un-gated) stays visible regardless of data
+		expect(
+			screen.getByText(/This tab only shows Root Spans/i),
+		).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(screen.getByText(/No traces yet/i)).toBeInTheDocument();
+		});
+	});
+
+	it('keeps the toolbar visible on API error', async () => {
+		mockError();
+		renderTracesView();
+
+		expect(
+			screen.getByText(/This tab only shows Root Spans/i),
+		).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
+	});
+});

frontend/src/container/TracesExplorer/TracesView/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/cognitive-complexity */
 import {
 	Dispatch,
 	memo,
@@ -12,30 +11,29 @@ import { useSelector } from 'react-redux';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import { ResizeTable } from 'components/ResizeTable';
 import { ENTITY_VERSION_V5 } from 'constants/app';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
-import NoLogs from 'container/NoLogs/NoLogs';
 import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
+import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
+import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
+import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
-import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
 
 import TraceExplorerControls from '../Controls';
-import { TracesLoading } from '../TraceLoading/TraceLoading';
 import { columns, PER_PAGE_OPTIONS } from './configs';
-import { ActionsContainer, Container } from './styles';
+
+import styles from './TracesView.module.scss';
 
 interface TracesViewProps {
 	isFilterApplied: boolean;
@@ -119,8 +117,13 @@ function TracesView({
 	}, [data?.payload, data?.warning]);
 
 	const responseData = data?.payload?.data?.newResult?.data?.result[0]?.list;
-	const tableData = useMemo(
-		() => responseData?.map((listItem) => listItem.data),
+
+	const rows = useMemo<TracesTableRow[]>(
+		() =>
+			(responseData ?? []).map((item) => {
+				const row = item.data;
+				return { ...row, id: row.trace_id };
+			}) as TracesTableRow[],
 		[responseData],
 	);
 
@@ -133,71 +136,52 @@ function TracesView({
 	}, [isLoading, isFetching, setIsLoadingQueries]);
 
 	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && (tableData || []).length !== 0) {
-			logEvent('Traces Explorer: Data present', {
+		if (!isLoading && !isFetching && !isError && rows.length !== 0) {
+			void logEvent('Traces Explorer: Data present', {
 				panelType: 'TRACE',
 			});
 		}
-	}, [isLoading, isFetching, isError, panelType, tableData]);
+	}, [isLoading, isFetching, isError, rows.length]);
 
 	return (
-		<Container>
-			{(tableData || []).length !== 0 && (
-				<ActionsContainer>
-					<Typography>
-						This tab only shows Root Spans. More details
-						<Typography.Link href={DOCLINKS.TRACES_DETAILS_LINK} target="_blank">
-							{' '}
-							here
-						</Typography.Link>
-					</Typography>
+		<div className={styles.container}>
+			<div className={styles.actionsContainer}>
+				<Typography>
+					This tab only shows Root Spans. More details
+					<Typography.Link href={DOCLINKS.TRACES_DETAILS_LINK} target="_blank">
+						{' '}
+						here
+					</Typography.Link>
+				</Typography>
 
-					<div className="trace-explorer-controls">
-						<DownloadOptionsMenu
-							dataSource={DataSource.TRACES}
-							panelType={PANEL_TYPES.TRACE}
-						/>
+				<div className="trace-explorer-controls">
+					<DownloadOptionsMenu
+						dataSource={DataSource.TRACES}
+						panelType={PANEL_TYPES.TRACE}
+					/>
 
-						<TraceExplorerControls
-							isLoading={isLoading}
-							totalCount={responseData?.length || 0}
-							perPageOptions={PER_PAGE_OPTIONS}
-						/>
-					</div>
-				</ActionsContainer>
-			)}
+					<TraceExplorerControls
+						isLoading={isLoading}
+						totalCount={rows.length}
+						perPageOptions={PER_PAGE_OPTIONS}
+					/>
+				</div>
+			</div>
 
-			{isError && error && <ErrorInPlace error={error as APIError} />}
-
-			{(isLoading || (isFetching && (tableData || []).length === 0)) && (
-				<TracesLoading />
-			)}
-
-			{!isLoading &&
-				!isFetching &&
-				!isError &&
-				!isFilterApplied &&
-				(tableData || []).length === 0 && <NoLogs dataSource={DataSource.TRACES} />}
-
-			{!isLoading &&
-				!isFetching &&
-				(tableData || []).length === 0 &&
-				!isError &&
-				isFilterApplied && (
-					<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="TRACE" />
-				)}
-
-			{(tableData || []).length !== 0 && (
-				<ResizeTable
-					loading={isLoading}
-					columns={columns}
-					tableLayout="fixed"
-					dataSource={tableData}
-					scroll={{ x: true }}
-					pagination={false}
-				/>
-			)}
-		</Container>
+			<TracesTable
+				data={rows}
+				columns={columns}
+				columnStorageKey={LOCALSTORAGE.TRACES_VIEW_COLUMNS}
+				respectColumnOrder
+				panelType="TRACE"
+				getRowHref={getTraceLink}
+				isLoading={isLoading}
+				isFetching={isFetching}
+				isError={isError}
+				error={error}
+				isFilterApplied={isFilterApplied}
+			/>
+		</div>
 	);
 }
 

frontend/src/container/TracesExplorer/TracesView/styles.ts

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	display: flex;
-	flex-direction: column;
-`;
-
-export const ActionsContainer = styled.div`
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-`;