feat(llm-attribute-mapping): foundation — route, permission, page shell [1/5] (#11778 )

* feat(llm-pricing): add model pricing foundation (route, permission, page shell) * feat(llm-pricing): add listing page and table * chore(llm-pricing): drop search + source filters from list request The list API does not honour the q (search) and source params yet, so the controls did nothing. Remove the search input and source dropdown along with the params we sent, and trim useModelPricingFilters to the URL-backed page state that pagination still needs. Currency dropdown, tabs, table and pagination are unchanged. Filters will return once the backend supports them. * refactor(llm-pricing): extract getRelativeTime helper in utils Pull the relative-time formatting out of getRelativeLastSeen into a small local getRelativeTime helper. Kept feature-local (not in the shared utils/timeUtils) so the LLM pricing module owns its own dayjs config; the local relativeTime extend stays for test self-sufficiency. * refactor(llm-pricing): drop dead NaN guard in formatPricePerMillion Pricing fields are typed as required numbers and JSON can't carry NaN, so Number.isNaN was unreachable. Keep the null/undefined guard as API defensiveness (toFixed on a missing value would crash the row). Also trims the now-redundant dayjs.extend comment. * refactor(llm-pricing): centralize constants and shared types Extract PAGE_SIZE, PAGE_KEY, COLUMN_COUNT and CURRENCY_OPTIONS into a new constants.ts, and move the ModelPricingFilters contract into types.ts. Component prop interfaces stay colocated with their components, matching the convention in the drawer PR. * refactor(llm-pricing): use nuqs for list pagination URL state Replace the hand-rolled useHistory + URLSearchParams plumbing in useModelPricingFilters with nuqs useQueryState, matching the convention used by the dashboards, alerts and k8s list pages. Behaviour is unchanged: parseAsInteger.withDefault(1) keeps ?page=1 out of the URL and history:'replace' avoids polluting the back-stack. * refactor(llm-pricing): inline pagination, drop useModelPricingFilters The hook had shrunk to a one-line nuqs wrapper after search/source were removed, so inline the useQueryState call into the container and remove the hook file plus the now-unused ModelPricingFilters type. When the filters return (once the API honours them) they can move back into a dedicated hook. * feat(llm-pricing): disable currency selector (USD-only for now) Only USD is priced today, so render the currency SelectSimple in a disabled state pinned to USD. A disabled select can't fire onChange, so the currency useState is dead — drop it (and the now-unused useState import). * refactor(llm-pricing): render model costs inside its tab + tab URL param The listing was rendered outside the Tabs, so the tab was decorative. Move all model-cost content (currency control, list query, table, pagination, footer) into a ModelCostsTab component rendered as the 'Model costs' tab's children, and drive the active tab from a 'tab' URL query param (nuqs). The container is now just the page shell. Unpriced models stays a disabled placeholder for a later PR. * style(llm-pricing): target @signozhq table slots, drop dead antd/leftover rules The component uses @signozhq/ui Table/Tabs (Radix-based), not antd, so the .ant-table-* and .ant-tabs-nav selectors never matched — the intended uppercase/muted header styling wasn't applied. Retarget header/cell rules to [data-slot='table-head'|'table-cell'] (no !important needed). Also remove dead rules left over from the removed search/source/add UI (.filters-bar__search, __source, __add, .page-header__actions) and the unused .source-badge--auto/ --override modifiers. * fix(llm-pricing): constrain currency dropdown width, drop tab URL param - Currency SelectSimple stretched to fill the filters bar; give it a fixed 160px width (min-width couldn't cap the trigger). - Model costs is the only enabled tab for now, so use Tabs defaultValue instead of a URL-backed param. Removes the nuqs tab state plus the now-unused TAB_KEYS/TAB_QUERY_KEY constants and TabKey type. * chore: self review changes * fix: add skeleton loading * refactor: self review changes * refactor: initial prop * fix: update styling * fix: add comments in utils * feat(llm-pricing): add model cost drawer and wire into listing page * fix(llm-pricing): restrict pricing management to admins Align the frontend write gate with the backend, which protects the LLM pricing create/update/delete endpoints with AdminAccess (admin only). Previously manage_llm_pricing allowed EDITOR/AUTHOR, so those roles saw the Add/Save affordances but their writes were rejected with a 403. Also removes the AUTHOR entry, which could never reach the page (the route gate excludes it). * fix(llm-pricing): read-only drawer shows View title, hides source picker Non-managers open the drawer in view mode (write APIs are Admin-only), so: - the heading reads "View model cost" instead of "Edit model cost" - the Source (auto vs. override) picker is hidden, since switching source is a manager-only action with nothing actionable for a viewer. * refactor: form in edit / add modal * chore: update color tokens * fix: add error handling * chore: update more self review changes * chore: self review changes * chore: self review changes * fix: minor grammer thing * fix: route thing * refactor: migrate to css moduel * refactor: migrate to css module * refactor: migrate to css module * refactor: migrate to tanstack table * docs: clarify price precision comment * chore: remove comment * feat(llm-attribute-mapping): add attribute mapping foundation (route, permission, page shell) * fix: css styling * refactor: css module * chore: remove comment * fix: disable isDirty in case of llm pricing * refactor: number * feat: add search , dropdown and flag * feat: feature flag on entire route and add mode costs tabs * fix: add isFetchingFeatureFlags * chore: update flag * refactor: shell * fix: add key to route * feat: add flags * chore: additional refactor * chore: add commet in utis * chore: self review changes * refactor: types and other things * refactor: types and other things * chore: add disable on source id * empty commit * chore: empty commit * fix: add demo side nav on sidenav * chore: remove demo side nav * refactor: update routes * chore: remove usd selector for now * fix: layout shift * refactor: styles * refactor: typography component * refactor: more changes * refactor: typograhy * refactor(llm-pricing): break model-cost drawer into per-component files + tokens Apply the CSS-module/component conventions to the drawer that came from drawer-3: - Move the drawer under ModelCostTabPanel/components/ModelCostDrawer/ to mirror the ModelCostsTable structure - Split the single 395-LOC ModelCostDrawer.module.scss into per-component co-located modules; cross-component selectors live in shared.module.scss and are pulled in via CSS-modules `composes` - shared.module.scss is a composes target (parsed as plain CSS), so it is kept flat with block comments — no SCSS nesting or // comments - Use --text-vanilla-* (not --bg-vanilla-*) for text colors, matching the listing code * refactor: more changes * refactor: styling and components * refactor: styling and components * chore: add a tooltip on hover * feat: add delete confirm modal * fix: update title * refactor: css variables * refactor: use signoz button and minor css update * chore: sync table * chore: remove extra comment * chore: use typograpgy test in table config * fix: minior issues * fix: llm pricing listing * refactor: remove extra classes * refactor: side nav changes * fix: update missing styles * chore: update edit and delete options * chore: remove extra comment * chore: revert env changes * chore: add enable check * chore: remove divider * refactor: use delete confirm dialog * chore: remove scss file * feat: move ui to easily accessable tabs * feat: update test cases * chore: update text * chore: self review changes * chore: self review refactor * chore: self review changes * chore: remove worktree * chore: revert env.ts * chore: add attribute mapping foundation * refactor: basic components * chore: update env.ts * chore: update tests * chore: self review changes * chore: update test cases * chore: remove extra comments * refactor(llm-pricing): share toast copy via constants * chore: use constants * chore: redclared constants --------- Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>
fix(query-builder): ensure contrast/border/colors are consistent (#11992 )
2026-07-08 15:40:40 +01:00 · 2026-07-08 14:12:49 +00:00 · 2026-07-08 13:57:05 +00:00 · 2026-07-08 12:57:52 +00:00 · 2026-07-08 11:09:37 +00:00 · 2026-07-08 09:23:00 +00:00
330 changed files with 15828 additions and 9174 deletions
--- a/.github/workflows/integrationci.yaml
+++ b/.github/workflows/integrationci.yaml
@@ -48,7 +48,11 @@ jobs:
          - logspipelines
          - passwordauthn
          - preference
-          - querier
+          - querierlogs
+          - queriertraces
+          - queriermetrics
+          - querierscalar
+          - queriercommon
          - rawexportdata
          - role
          - rootuser
--- a/.github/workflows/jsci.yaml
+++ b/.github/workflows/jsci.yaml
@@ -102,44 +102,3 @@ jobs:
        run: |
          cd frontend && pnpm generate:config:web-settings
          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated web settings types. Run pnpm generate:config:web-settings in frontend/ locally and commit."; exit 1)
-  code-quality:
-    if: |
-      github.event_name == 'merge_group' ||
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: self-checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: node-install
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-      - name: install-pnpm
-        uses: pnpm/action-setup@v6
-        with:
-          version: 10
-      - name: install-frontend
-        run: cd frontend && pnpm install
-      - name: get-new-files
-        id: new-files
-        run: |
-          cd frontend
-          NEW_TS=$(git diff --name-only --diff-filter=A origin/main...HEAD -- src/ | grep -E '\.(ts|tsx)$' | tr '\n' ' ' || true)
-          NEW_SCSS=$(git diff --name-only --diff-filter=A origin/main...HEAD -- src/ | grep -E '\.scss$' | tr '\n' ' ' || true)
-          echo "ts=$NEW_TS" >> $GITHUB_OUTPUT
-          echo "scss=$NEW_SCSS" >> $GITHUB_OUTPUT
-          echo "New TS files: $NEW_TS"
-          echo "New SCSS files: $NEW_SCSS"
-      - name: lint-new-ts-files
-        if: steps.new-files.outputs.ts != ''
-        run: |
-          cd frontend
-          pnpm oxlint -c .oxlintrc.strict.json ${{ steps.new-files.outputs.ts }}
-      - name: lint-new-scss-files
-        if: steps.new-files.outputs.scss != ''
-        run: |
-          cd frontend
-          pnpm stylelint --config .stylelintrc.strict.cjs ${{ steps.new-files.outputs.scss }}
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -295,18 +295,6 @@
    // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
    "signoz/no-dashboard-fetch-outside-root": "error",
    // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
-    "signoz/no-raw-html-text-elements": "warn",
-    // Bans raw span/p/h1-6 elements - use Typography component instead
-    "signoz/no-multiple-components": "warn",
-    // Bans multiple component exports per file - split into separate files
-    "signoz/no-inline-helpers": "warn",
-    // Bans too many helper functions in component files - move to utils.ts
-    "signoz/max-component-lines": ["warn", { "max": 300 }],
-    // Warns when component files exceed max lines - split into smaller components
-    "signoz/no-getByText": "warn",
-    // Bans getByText in tests - use getByTestId or getByRole instead
-    "signoz/no-fireEvent": "warn",
-    // Bans fireEvent in tests - use userEvent instead
    "no-restricted-globals": [
      "error",
      {
--- a/frontend/.oxlintrc.strict.json
+++ b/frontend/.oxlintrc.strict.json
@@ -1,18 +0,0 @@
-{
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "extends": ["./.oxlintrc.json"],
-  "env": {
-    "builtin": true,
-    "es2021": true,
-    "browser": true,
-    "jest": true,
-    "node": true
-  },
-  "rules": {
-    "signoz/no-raw-html-text-elements": "error",
-    "signoz/no-multiple-components": "error",
-    "signoz/no-inline-helpers": "error",
-    "signoz/no-getByText": "error",
-    "signoz/no-fireEvent": "error"
-  }
-}
--- a/frontend/.stylelintrc.cjs
+++ b/frontend/.stylelintrc.cjs
@@ -12,17 +12,11 @@ module.exports = {
 		),
 		path.join(__dirname, 'stylelint-rules/css-modules/prefer-css-variables.js'),
 		path.join(__dirname, 'stylelint-rules/css-modules/class-name-pattern.js'),
-		path.join(__dirname, 'stylelint-rules/no-font-properties.js'),
-		path.join(__dirname, 'stylelint-rules/no-primitive-color-tokens.js'),
-		path.join(__dirname, 'stylelint-rules/no-styles-scss.js'),
 	],
 	customSyntax: 'postcss-scss',
 	rules: {
 		// Applies to all SCSS files
 		'local/no-unsupported-asset-url': true,
-		'local/no-font-properties': [true, { severity: 'warning' }],
-		'local/no-primitive-color-tokens': [true, { severity: 'warning' }],
-		'local/no-styles-scss': [true, { severity: 'warning' }],
 	},
 	overrides: [
 		{
--- a/frontend/.stylelintrc.strict.cjs
+++ b/frontend/.stylelintrc.strict.cjs
@@ -1,14 +0,0 @@
-// Strict config for new files - rules that are warnings in base config become errors here
-// oxlint-disable-next-line typescript/no-require-imports
-const baseConfig = require('./.stylelintrc.cjs');
-
-module.exports = {
-	...baseConfig,
-	rules: {
-		...baseConfig.rules,
-		// Override warnings to errors for new files
-		'local/no-font-properties': true, // error (no severity = error)
-		'local/no-primitive-color-tokens': true,
-		'local/no-styles-scss': true,
-	},
-};
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,8 +16,6 @@
    "lint:generated": "oxlint ./src/api/generated --fix",
    "lint:fix": "oxlint ./src --fix",
    "lint:styles": "stylelint \"src/**/*.scss\"",
-    "lint:strict": "oxlint -c .oxlintrc.strict.json",
-    "lint:styles:strict": "stylelint --config .stylelintrc.strict.cjs",
    "jest": "jest",
    "jest:coverage": "jest --coverage",
    "jest:watch": "jest --watch",
@@ -81,6 +79,7 @@
    "event-source-polyfill": "1.0.31",
    "eventemitter3": "5.0.1",
    "history": "4.10.1",
+    "html-to-image": "1.11.13",
    "http-status-codes": "2.3.0",
    "i18next": "^21.6.12",
    "i18next-browser-languagedetector": "^6.1.3",
--- a/frontend/plugins/rules/max-component-lines.mjs
+++ b/frontend/plugins/rules/max-component-lines.mjs
@@ -1,71 +0,0 @@
-/**
- * Rule: max-component-lines
- *
- * Warns when a component file exceeds configured line limit.
- * Large components should be split into smaller ones.
- *
- * Config: ["warn", { "max": 300 }]
- * Default: 300 lines
- *
- * This rule should always be "warn" (never "error").
- */
-
-const DEFAULT_MAX_LINES = 300;
-
-export default {
-	meta: {
-		docs: {
-			description: 'Warn when component files exceed a line limit',
-			category: 'Code Quality',
-		},
-		schema: [
-			{
-				type: 'object',
-				properties: {
-					max: {
-						type: 'number',
-						minimum: 1,
-					},
-				},
-				additionalProperties: false,
-			},
-		],
-	},
-	create(context) {
-		const options = context.options?.[0] || {};
-		const maxLines = options.max || DEFAULT_MAX_LINES;
-		const filename = context.getFilename();
-
-		// Only check .tsx files (component files)
-		if (!/\.tsx$/.test(filename)) {
-			return {};
-		}
-
-		// Skip test files
-		if (/\.(test|spec)\.tsx$/.test(filename)) {
-			return {};
-		}
-
-		// Skip utility/type files
-		if (
-			/\/(utils|helpers|constants|types|hooks)\.(ts|tsx)$/.test(filename) ||
-			/\/(utils|helpers|constants|types)\//.test(filename)
-		) {
-			return {};
-		}
-
-		return {
-			Program(node) {
-				const sourceCode = context.getSourceCode();
-				const lines = sourceCode.lines?.length || sourceCode.getText().split('\n').length;
-
-				if (lines > maxLines) {
-					context.report({
-						node,
-						message: `Component file has ${lines} lines (max ${maxLines}). Consider splitting into smaller components or extracting logic into hooks/utils.`,
-					});
-				}
-			},
-		};
-	},
-};
--- a/frontend/plugins/rules/no-fireEvent.mjs
+++ b/frontend/plugins/rules/no-fireEvent.mjs
@@ -1,48 +0,0 @@
-/**
- * Rule: no-fireEvent
- *
- * Bans fireEvent in test files. Use userEvent instead for more realistic
- * user interaction simulation.
- *
- * BAD:
- *   fireEvent.click(button)
- *   fireEvent.change(input, { target: { value: 'test' } })
- *
- * GOOD:
- *   await userEvent.click(button)
- *   await userEvent.type(input, 'test')
- */
-
-export default {
-	create(context) {
-		return {
-			// fireEvent.click(...), fireEvent.change(...)
-			MemberExpression(node) {
-				if (
-					node.object.type === 'Identifier' &&
-					node.object.name === 'fireEvent'
-				) {
-					context.report({
-						node,
-						message:
-							"Avoid 'fireEvent'. Use userEvent from @testing-library/user-event for more realistic user interactions.",
-					});
-				}
-			},
-
-			// import { fireEvent } from '@testing-library/react'
-			ImportSpecifier(node) {
-				if (
-					node.imported.type === 'Identifier' &&
-					node.imported.name === 'fireEvent'
-				) {
-					context.report({
-						node,
-						message:
-							"Avoid importing 'fireEvent'. Use userEvent from @testing-library/user-event instead.",
-					});
-				}
-			},
-		};
-	},
-};
--- a/frontend/plugins/rules/no-getByText.mjs
+++ b/frontend/plugins/rules/no-getByText.mjs
@@ -1,53 +0,0 @@
-/**
- * Rule: no-getByText
- *
- * Bans getByText, queryByText, findByText, getAllByText, queryAllByText, findAllByText
- * in test files. Use getByTestId or getByRole instead.
- *
- * BAD:
- *   screen.getByText('Submit')
- *   getByText('Submit')
- *
- * GOOD:
- *   screen.getByTestId('submit-button')
- *   screen.getByRole('button', { name: 'Submit' })
- */
-
-const BANNED_METHODS = new Set([
-	'getByText',
-	'queryByText',
-	'findByText',
-	'getAllByText',
-	'queryAllByText',
-	'findAllByText',
-]);
-
-export default {
-	create(context) {
-		return {
-			CallExpression(node) {
-				let methodName = null;
-
-				// screen.getByText(...) or result.getByText(...)
-				if (
-					node.callee.type === 'MemberExpression' &&
-					node.callee.property.type === 'Identifier'
-				) {
-					methodName = node.callee.property.name;
-				}
-
-				// Direct getByText(...) from destructured import
-				if (node.callee.type === 'Identifier') {
-					methodName = node.callee.name;
-				}
-
-				if (methodName && BANNED_METHODS.has(methodName)) {
-					context.report({
-						node,
-						message: `Avoid '${methodName}'. Use getByTestId or getByRole instead for more stable selectors.`,
-					});
-				}
-			},
-		};
-	},
-};
--- a/frontend/plugins/rules/no-inline-helpers.mjs
+++ b/frontend/plugins/rules/no-inline-helpers.mjs
@@ -1,161 +0,0 @@
-/**
- * Rule: no-inline-helpers
- *
- * Bans too many helper functions in component files.
- * Helper functions should be moved to utils.ts or specialized files.
- *
- * Exempt:
- * - Hooks (use* functions)
- * - Exported functions (they're intentionally in the file)
- * - Files named utils.ts, helpers.ts, constants.ts
- *
- * Threshold: More than 3 private helper functions triggers warning.
- */
-
-const MAX_HELPERS = 3;
-
-function isHookName(name) {
-	return /^use[A-Z]/.test(name);
-}
-
-function isComponentName(name) {
-	return /^[A-Z]/.test(name);
-}
-
-export default {
-	create(context) {
-		const filename = context.getFilename();
-
-		// Skip utility files
-		if (
-			/\/(utils|helpers|constants|types|hooks)\.(ts|tsx|js|jsx)$/.test(filename) ||
-			/\/(utils|helpers|constants|types)\//.test(filename)
-		) {
-			return {};
-		}
-
-		// Skip test files
-		if (/\.(test|spec)\.(ts|tsx|js|jsx)$/.test(filename)) {
-			return {};
-		}
-
-		const privateHelpers = [];
-		const exportedNames = new Set();
-		let hasComponent = false;
-
-		return {
-			// Track exported names
-			ExportNamedDeclaration(node) {
-				if (node.declaration) {
-					if (node.declaration.type === 'FunctionDeclaration' && node.declaration.id) {
-						exportedNames.add(node.declaration.id.name);
-						if (isComponentName(node.declaration.id.name)) {
-							hasComponent = true;
-						}
-					}
-					if (node.declaration.type === 'VariableDeclaration') {
-						for (const decl of node.declaration.declarations) {
-							if (decl.id.type === 'Identifier') {
-								exportedNames.add(decl.id.name);
-								if (isComponentName(decl.id.name)) {
-									hasComponent = true;
-								}
-							}
-						}
-					}
-				}
-			},
-
-			ExportDefaultDeclaration(node) {
-				if (
-					node.declaration.type === 'FunctionDeclaration' &&
-					node.declaration.id &&
-					isComponentName(node.declaration.id.name)
-				) {
-					hasComponent = true;
-				}
-				if (node.declaration.type === 'Identifier') {
-					exportedNames.add(node.declaration.name);
-				}
-			},
-
-			// Track private function declarations
-			FunctionDeclaration(node) {
-				if (!node.id) {
-					return;
-				}
-
-				const name = node.id.name;
-
-				// Will check if exported later
-				if (
-					!isHookName(name) &&
-					!isComponentName(name) &&
-					node.parent.type !== 'ExportNamedDeclaration' &&
-					node.parent.type !== 'ExportDefaultDeclaration'
-				) {
-					privateHelpers.push({ name, node });
-				}
-			},
-
-			// Track private arrow/function expressions
-			VariableDeclaration(node) {
-				// Skip if this is an export
-				if (
-					node.parent.type === 'ExportNamedDeclaration' ||
-					node.parent.type === 'Program'
-				) {
-					for (const decl of node.declarations) {
-						if (decl.id.type !== 'Identifier') {
-							continue;
-						}
-
-						const name = decl.id.name;
-						const init = decl.init;
-
-						// Only track functions
-						if (
-							!init ||
-							(init.type !== 'ArrowFunctionExpression' &&
-								init.type !== 'FunctionExpression')
-						) {
-							continue;
-						}
-
-						// Skip hooks, components, and exports
-						if (
-							!isHookName(name) &&
-							!isComponentName(name) &&
-							node.parent.type !== 'ExportNamedDeclaration'
-						) {
-							privateHelpers.push({ name, node: decl });
-						}
-					}
-				}
-			},
-
-			'Program:exit'() {
-				// Only check files with components
-				if (!hasComponent) {
-					return;
-				}
-
-				// Filter out any that ended up exported
-				const actualPrivate = privateHelpers.filter(
-					(h) => !exportedNames.has(h.name),
-				);
-
-				if (actualPrivate.length > MAX_HELPERS) {
-					// Report on helpers beyond the threshold
-					for (let i = MAX_HELPERS; i < actualPrivate.length; i++) {
-						const { name, node } = actualPrivate[i];
-						context.report({
-							node,
-							message: `Too many helper functions (${actualPrivate.length}) in component file. Move '${name}' and other helpers to utils.ts. Helpers: ${actualPrivate.map((h) => h.name).join(', ')}.`,
-						});
-					}
-				}
-			},
-		};
-	},
-};
--- a/frontend/plugins/rules/no-multiple-components.mjs
+++ b/frontend/plugins/rules/no-multiple-components.mjs
@@ -1,142 +0,0 @@
-/**
- * Rule: no-multiple-components
- *
- * Bans multiple React component exports in a single file.
- * Each component should have its own file.
- *
- * BAD:
- *   export function ComponentA() { return <div /> }
- *   export function ComponentB() { return <div /> }
- *
- * GOOD:
- *   // ComponentA.tsx
- *   export function ComponentA() { return <div /> }
- *
- *   // ComponentB.tsx (separate file)
- *   export function ComponentB() { return <div /> }
- *
- * Note: index.tsx files are exempt (re-export barrels).
- */
-
-function isPascalCase(name) {
-	return /^[A-Z][a-zA-Z0-9]*$/.test(name);
-}
-
-function hasJSXReturn(node) {
-	if (!node.body) {
-		return false;
-	}
-
-	// Arrow function with direct JSX return: () => <div />
-	if (node.body.type === 'JSXElement' || node.body.type === 'JSXFragment') {
-		return true;
-	}
-
-	// Function body - check return statements
-	if (node.body.type === 'BlockStatement') {
-		for (const stmt of node.body.body) {
-			if (
-				stmt.type === 'ReturnStatement' &&
-				stmt.argument &&
-				(stmt.argument.type === 'JSXElement' ||
-					stmt.argument.type === 'JSXFragment' ||
-					// Conditional: condition ? <A /> : <B />
-					(stmt.argument.type === 'ConditionalExpression' &&
-						(stmt.argument.consequent.type === 'JSXElement' ||
-							stmt.argument.alternate.type === 'JSXElement')) ||
-					// Logical: condition && <A />
-					(stmt.argument.type === 'LogicalExpression' &&
-						(stmt.argument.left.type === 'JSXElement' ||
-							stmt.argument.right.type === 'JSXElement')))
-			) {
-				return true;
-			}
-		}
-	}
-
-	return false;
-}
-
-export default {
-	create(context) {
-		const exportedComponents = [];
-
-		return {
-			// export function ComponentName() { }
-			ExportNamedDeclaration(node) {
-				if (!node.declaration) {
-					return;
-				}
-
-				// function ComponentName() {}
-				if (node.declaration.type === 'FunctionDeclaration') {
-					const name = node.declaration.id?.name;
-					if (name && isPascalCase(name) && hasJSXReturn(node.declaration)) {
-						exportedComponents.push({ name, node });
-					}
-				}
-
-				// const ComponentName = () => {} or const ComponentName = function() {}
-				if (node.declaration.type === 'VariableDeclaration') {
-					for (const declarator of node.declaration.declarations) {
-						const name = declarator.id?.name;
-						if (!name || !isPascalCase(name)) {
-							continue;
-						}
-
-						const init = declarator.init;
-						if (!init) {
-							continue;
-						}
-
-						// Arrow function or function expression
-						if (
-							(init.type === 'ArrowFunctionExpression' ||
-								init.type === 'FunctionExpression') &&
-							hasJSXReturn(init)
-						) {
-							exportedComponents.push({ name, node });
-						}
-
-						// React.memo(Component) or memo(Component)
-						if (
-							init.type === 'CallExpression' &&
-							((init.callee.type === 'Identifier' &&
-								(init.callee.name === 'memo' ||
-									init.callee.name === 'forwardRef')) ||
-								(init.callee.type === 'MemberExpression' &&
-									init.callee.object.name === 'React' &&
-									(init.callee.property.name === 'memo' ||
-										init.callee.property.name === 'forwardRef')))
-						) {
-							exportedComponents.push({ name, node });
-						}
-					}
-				}
-			},
-
-			// export default function ComponentName() { }
-			ExportDefaultDeclaration(node) {
-				if (node.declaration.type === 'FunctionDeclaration') {
-					const name = node.declaration.id?.name;
-					if (name && isPascalCase(name) && hasJSXReturn(node.declaration)) {
-						exportedComponents.push({ name, node });
-					}
-				}
-			},
-
-			'Program:exit'() {
-				if (exportedComponents.length > 1) {
-					// Report on all but the first component
-					for (let i = 1; i < exportedComponents.length; i++) {
-						const { name, node } = exportedComponents[i];
-						context.report({
-							node,
-							message: `Multiple component exports in same file. Move '${name}' to its own file. Found ${exportedComponents.length} components: ${exportedComponents.map((c) => c.name).join(', ')}.`,
-						});
-					}
-				}
-			},
-		};
-	},
-};
--- a/frontend/plugins/rules/no-raw-html-text-elements.mjs
+++ b/frontend/plugins/rules/no-raw-html-text-elements.mjs
@@ -1,39 +0,0 @@
-/**
- * Rule: no-raw-html-text-elements
- *
- * Bans raw HTML text elements (span, p, h1-h6) in JSX.
- * Use Typography component from @signozhq/ui instead.
- *
- * BAD:
- *   <span>Hello</span>
- *   <p>Paragraph</p>
- *   <h1>Title</h1>
- *
- * GOOD:
- *   <Typography>Hello</Typography>
- *   <Typography.Text>Hello</Typography.Text>
- *   <Typography.Title level={1}>Title</Typography.Title>
- */
-
-const BANNED_ELEMENTS = new Set(['span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
-
-export default {
-	create(context) {
-		return {
-			JSXOpeningElement(node) {
-				if (node.name.type !== 'JSXIdentifier') {
-					return;
-				}
-
-				const elementName = node.name.name;
-
-				if (BANNED_ELEMENTS.has(elementName)) {
-					context.report({
-						node,
-						message: `Avoid raw '<${elementName}>' element. Use Typography component from @signozhq/ui instead.`,
-					});
-				}
-			},
-		};
-	},
-};
--- a/frontend/plugins/signoz.mjs
+++ b/frontend/plugins/signoz.mjs
@@ -13,12 +13,6 @@ import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
 import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
-import noGetByText from './rules/no-getByText.mjs';
-import noFireEvent from './rules/no-fireEvent.mjs';
-import noRawHtmlTextElements from './rules/no-raw-html-text-elements.mjs';
-import noMultipleComponents from './rules/no-multiple-components.mjs';
-import noInlineHelpers from './rules/no-inline-helpers.mjs';
-import maxComponentLines from './rules/max-component-lines.mjs';

 export default {
 	meta: {
@@ -33,11 +27,5 @@ export default {
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
 		'no-css-module-bracket-access': noCssModuleBracketAccess,
 		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
-		'no-getByText': noGetByText,
-		'no-fireEvent': noFireEvent,
-		'no-raw-html-text-elements': noRawHtmlTextElements,
-		'no-multiple-components': noMultipleComponents,
-		'no-inline-helpers': noInlineHelpers,
-		'max-component-lines': maxComponentLines,
 	},
 };
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -164,6 +164,9 @@ importers:
      history:
        specifier: 4.10.1
        version: 4.10.1
+      html-to-image:
+        specifier: 1.11.13
+        version: 1.11.13
      http-status-codes:
        specifier: 2.3.0
        version: 2.3.0
@@ -5451,6 +5454,9 @@ packages:
    resolution: {integrity: sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==}
    engines: {node: '>=20.10'}

+  html-to-image@1.11.13:
+    resolution: {integrity: sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==}
+
  html-void-elements@3.0.0:
    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}

@@ -14495,6 +14501,8 @@ snapshots:

  html-tags@5.1.0: {}

+  html-to-image@1.11.13: {}
+
  html-void-elements@3.0.0: {}

  http-proxy-agent@5.0.0:
--- a/frontend/public/locales/en-GB/titles.json
+++ b/frontend/public/locales/en-GB/titles.json
@@ -62,6 +62,6 @@
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
-	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
-	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
-}
+	"LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview",
+	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration"
+}
--- a/frontend/public/locales/en/titles.json
+++ b/frontend/public/locales/en/titles.json
@@ -87,6 +87,6 @@
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
-	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
-	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
-}
+	"LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview",
+	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration"
+}
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -329,10 +329,3 @@ export const LLMObservabilityPage = Loadable(
 			/* webpackChunkName: "LLM Observability Page" */ 'pages/LLMObservability'
 		),
 );
-
-export const LLMObservabilityModelPricingPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "LLM Observability Model Pricing Page" */ 'pages/LLMObservabilityModelPricing'
-		),
-);
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -24,7 +24,6 @@ import {
 	LicensePage,
 	ListAllALertsPage,
 	LLMObservabilityPage,
-	LLMObservabilityModelPricingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -515,17 +514,24 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.LLM_OBSERVABILITY_BASE,
+		path: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
 		exact: true,
 		component: LLMObservabilityPage,
-		key: 'LLM_OBSERVABILITY_BASE',
+		key: 'LLM_OBSERVABILITY_ATTRIBUTE_MAPPING',
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
+		path: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
 		exact: true,
-		component: LLMObservabilityModelPricingPage,
-		key: 'LLM_OBSERVABILITY_MODEL_PRICING',
+		component: LLMObservabilityPage,
+		key: 'LLM_OBSERVABILITY_OVERVIEW',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
+		exact: true,
+		component: LLMObservabilityPage,
+		key: 'LLM_OBSERVABILITY_CONFIGURATION',
 		isPrivate: true,
 	},
 ];
--- a/frontend/src/components/InputWithLabel/InputWithLabel.styles.scss
+++ b/frontend/src/components/InputWithLabel/InputWithLabel.styles.scss
@@ -20,9 +20,9 @@
 		padding: 0px 8px;

 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		color: var(--l2-foreground);
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		color: var(--input-with-label-color, var(--l2-foreground));

 		display: flex;
 		justify-content: flex-start;
@@ -35,21 +35,54 @@
 		min-width: 150px;
 		font-family: 'Space Mono', monospace !important;

-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		--input-border-radius: 0px;
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		color: var(--input-with-label-color, var(--l2-foreground));

-		border-right: none;
-		border-left: none;
-		border-top-right-radius: 0px;
-		border-bottom-right-radius: 0px;
-		border-top-left-radius: 0px;
-		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
-		line-height: 27px;
+		line-height: 25px;
+
+		position: relative;
+
+		&:hover,
+		&:focus {
+			z-index: 1;
+		}
+
+		.ant-select-selector {
+			position: relative;
+			border-radius: inherit;
+		}
+
+		.ant-select:hover .ant-select-selector,
+		.ant-select-focused .ant-select-selector {
+			z-index: 1;
+		}
+
+		&.input__has-label-after {
+			margin-left: -1px;
+
+			.ant-select-selector {
+				margin-left: -1px;
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+		}
+
+		&.input__has-close-button {
+			.ant-select-selector {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			~ .close-btn {
+				margin-left: -1px;
+			}
+		}

 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--input-with-label-color, var(--l3-foreground)) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -63,25 +96,35 @@

 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		height: 38px;
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		height: 100%;
 		width: 38px;
+		position: relative;
+
+		&:hover,
+		&:focus {
+			z-index: 2;
+		}
 	}

 	&.labelAfter {
 		.input {
-			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			border-radius: 2px;
+			border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+			background: var(--input-with-label-background-color, var(--l2-background));
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
+
+			.ant-select-selector {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
 		}

 		.label {
 			border-left: none;
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
+			border-radius: 0px 2px 2px 0px;
 		}
 	}
 }
--- a/frontend/src/components/InputWithLabel/InputWithLabel.tsx
+++ b/frontend/src/components/InputWithLabel/InputWithLabel.tsx
@@ -45,7 +45,10 @@ function InputWithLabel({
 		>
 			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			<Input
-				className="input"
+				className={cx('input', {
+					'input__has-label-after': !labelAfter,
+					'input__has-close-button': !!onClose,
+				})}
 				placeholder={placeholder}
 				type={type}
 				value={inputValue}
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
@@ -80,8 +80,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--l1-border),
-					var(--l1-border) 4px,
+					var(--query-builder-v2-border-color, var(--l2-border)),
+					var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -101,7 +101,8 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted var(--l1-border);
+					border-left: 6px dotted
+						var(--query-builder-v2-border-color, var(--l2-border));
 				}

 				/* Horizontal line pointing from vertical to the item */
@@ -114,8 +115,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -241,7 +242,8 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted var(--l1-border);
+						border-left: 6px dotted
+							var(--query-builder-v2-border-color, var(--l2-border));
 					}

 					/* Horizontal line pointing from vertical to the item */
@@ -254,8 +256,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							var(--l1-border),
-							var(--l1-border) 4px,
+							var(--query-builder-v2-border-color, var(--l2-border)),
+							var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -273,6 +275,16 @@
 					line-height: 16px; /* 128.571% */

 					resize: none;
+
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					);
+					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+
+					&:placeholder {
+						color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
+					}
 				}

 				.formula-legend {
@@ -282,15 +294,42 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--l2-background);
-						color: var(--l2-foreground);
+						background: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						);
+						color: var(--query-builder-v2-color, var(--l2-foreground));
 						font-size: 12px;
 						font-weight: 300;
+
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+						position: relative;
 					}

 					.ant-input {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
+
+						height: 36px;
+
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						);
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+
+						position: relative;
+						margin-left: -1px;
+
+						&:hover,
+						&:focus {
+							z-index: 1;
+							border-color: var(--internal-ant-border-color-hover);
+						}
+
+						&:placeholder {
+							color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
+						}
 					}
 				}
 			}
@@ -323,8 +362,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -395,8 +434,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						var(--query-builder-v2-border-color, var(--l2-border)),
+						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -412,7 +451,7 @@
 				min-width: 120px;

 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 				background: var(--l1-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

@@ -457,13 +496,16 @@

 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border) !important;
-			background: var(--l1-background) !important;
-			height: 34px !important;
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
+			background: var(
+				--query-builder-v2-background-color,
+				var(--l2-background)
+			) !important;
+			height: 36px !important;
 			box-sizing: border-box !important;

 			.ant-select-selection-item {
-				color: var(--l1-foreground);
+				color: var(--query-builder-v2-color, var(--l1-foreground));
 			}
 		}

--- a/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss
@@ -92,6 +92,11 @@

 				.ant-select {
 					width: 100%;
+
+					.ant-select-selector {
+						min-height: 36px;
+					}
+
 					.ant-select-selection-search-input {
 						min-width: max-content !important;
 						max-width: 100% !important;
@@ -100,9 +105,12 @@

 				.ant-select-selector {
 					border-radius: 2px;
-					border: 1.005px solid var(--l1-border);
-					background: var(--l1-background);
-					color: var(--l1-foreground);
+					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
+					color: var(--query-builder-v2-color, var(--l2-foreground));
 					font-family: 'Geist Mono';
 					font-size: 13px;
 					font-style: normal;
@@ -123,6 +131,7 @@
 					.input {
 						flex: initial;
 						width: 100px !important;
+						min-height: 36px;
 					}
 				}
 			}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss
@@ -8,9 +8,9 @@

 	.ant-select-selection-search-input {
 		font-size: 12px !important;
-		line-height: 27px;
+		line-height: 25px;
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -22,9 +22,12 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l1-background);
-		color: var(--l1-foreground);
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
+		background-color: var(
+			--query-builder-v2-background-color,
+			var(--l2-background)
+		) !important;
+		color: var(--query-builder-v2-color, var(--l2-foreground));
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -33,36 +36,49 @@
 		min-height: 36px;

 		.ant-select-selection-placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(
+				--query-builder-v2-placeholder-color,
+				var(--l3-foreground)
+			) !important;
 			font-size: 12px !important;
 		}
 	}
+}

-	.ant-select-dropdown {
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
+.qb-select-popover.ant-select-dropdown {
+	border-radius: 4px;
+	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+	background: var(--query-builder-v2-background-color, var(--l2-background));
+	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(20px);

-		.ant-select-item {
-			color: var(--l1-foreground);
-			font-family: 'Geist Mono';
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
+	.ant-select-item {
+		color: var(--query-builder-v2-color, var(--l2-foreground));
+		font-family: 'Geist Mono';
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */

-			&:hover,
-			&.ant-select-item-option-active {
-				background: var(--l3-background) !important;
-			}
+		&:not(:last-of-type) {
+			margin-bottom: 4px;
+		}

-			&.ant-select-item-option-selected {
-				background: var(--l3-background) !important;
-				border: 1px solid var(--l1-border);
-				font-weight: 600;
-			}
+		&:hover,
+		&.ant-select-item-option-active {
+			background: var(
+				--query-builder-v2-selected-background-color,
+				var(--l3-background)
+			) !important;
+		}
+
+		&.ant-select-item-option-selected {
+			background: var(
+				--query-builder-v2-selected-background-color,
+				var(--l3-background)
+			) !important;
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			font-weight: 600;
 		}
 	}
 }
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx
@@ -142,6 +142,7 @@ export const MetricsSelect = memo(function MetricsSelect({
 			{signalSourceChangeEnabled && (
 				<Select
 					className="source-selector"
+					popupClassName="qb-select-popover"
 					placeholder="Source"
 					options={SOURCE_OPTIONS}
 					value={source}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
@@ -1,8 +1,23 @@
-// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
-
 .query-add-ons {
 	width: 100%;

+	--toggle-group-secondary-bg: var(
+		--query-builder-v2-toggle-group-background-color,
+		var(--l1-background-hover)
+	);
+	--toggle-group-secondary-border: var(
+		--query-builder-v2-toggle-group-border-color,
+		var(--l2-border)
+	);
+	--toggle-group-secondary-active-bg: var(
+		--query-builder-v2-toggle-group-active-background-color,
+		var(--l1-background)
+	);
+	--toggle-group-secondary-bg-hover: var(
+		--query-builder-v2-toggle-group-background-color-hover,
+		var(--l2-background)
+	);
+
 	.add-on-tab-title {
 		display: flex;
 		align-items: center;
@@ -29,32 +44,33 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);

-			color: var(--l2-foreground);
+			color: var(--query-builder-v2-color, var(--l2-foreground));
 		}

 		> button {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;

 			&:first-child {
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid
+					var(--query-builder-v2-border-color, var(--l2-border));
 			}

 			&::before {
-				background: var(--l1-border);
+				background: var(--query-builder-v2-border-color, var(--l2-border));
 			}

 			&[data-state='on'] {
 				color: var(--text-robin-500);
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));

 				display: none;

 				&::before {
-					background: var(--l1-border);
+					background: var(--query-builder-v2-border-color, var(--l2-border));
 				}
 			}
 		}
@@ -65,7 +81,7 @@
 		height: 30px;

 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
@@ -78,10 +94,13 @@
 	align-items: center;

 	.having-filter-select-container {
+		position: relative;
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		align-items: center;
+		align-items: flex-start;
+		background: var(--query-builder-v2-background-color, var(--l2-background));
+		padding-right: 38px;

 		.having-filter-select-editor {
 			border-radius: 2px;
@@ -106,15 +125,17 @@
 				}

 				.cm-content {
-					border-radius: 2px;
-					border: 1px solid var(--l1-border);
-					border-top-right-radius: 0px;
-					border-bottom-right-radius: 0px;
+					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+					border-left-width: 0px;
+					border-right-width: 0px;
 					padding: 0px !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;

 					&:focus-within {
-						border-color: var(--l1-border);
+						border-color: var(--query-builder-v2-border-color, var(--l2-border));
 					}
 				}

@@ -218,17 +239,32 @@
 				}

 				.cm-line {
-					line-height: 36px !important;
+					min-height: 34px;
+					line-height: 32px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
+
+					&,
+					.ͼ1a {
+						color: var(--query-builder-v2-color, var(--l2-foreground));
+					}

 					::-moz-selection {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}

 					::selection {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}

@@ -237,8 +273,11 @@
 					}

 					.chip-decorator {
-						background: var(--l3-background) !important;
-						color: var(--l1-foreground) !important;
+						background: var(
+							--query-builder-v2-chip-decorator-background-color,
+							var(--l3-background)
+						) !important;
+						color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -246,34 +285,38 @@
 				}

 				.cm-selectionBackground {
-					background: var(--l3-background) !important;
+					background: var(
+						--query-builder-v2-selection-background-color,
+						var(--l3-background)
+					) !important;
 					opacity: 0.5 !important;
 				}

 				.cm-activeLine > span {
 					font-size: 12px !important;
 				}
+
+				.cm-placeholder {
+					color: var(
+						--query-builder-v2-placeholder-color,
+						var(--l3-foreground)
+					) !important;
+				}
 			}
 		}

 		.close-btn {
+			position: absolute;
+			top: 0;
+			right: 0;
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l2-border);
-			background: var(--l2-background);
-			height: 38px;
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			background: var(--query-builder-v2-background-color, var(--l2-background));
+			height: 100%;
 			width: 38px;

-			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
-
-			&:focus:not(:focus-visible),
-			&.ant-btn:focus:not(:focus-visible) {
-				border-color: var(--l2-border);
-				border-left-color: transparent;
-				outline: none;
-				box-shadow: none;
-			}
 		}
 	}
 }
@@ -300,20 +343,8 @@
 			font-size: 12px !important;
 		}

-		$add-on-row-height: 38px;
-
-		.periscope-input-with-label {
-			.input {
-				.ant-select {
-					height: $add-on-row-height;
-				}
-			}
-		}
-
-		.input-with-label {
-			.input {
-				height: $add-on-row-height;
-			}
+		input {
+			min-height: 36px;
 		}
 	}
 }
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss
@@ -23,7 +23,7 @@
 				flex: 1;
 				min-width: 0;
 				font-size: 12px;
-				color: var(--l2-foreground) !important;
+				color: var(--query-builder-v2-color, var(--l2-foreground)) !important;

 				&.error {
 					.cm-editor {
@@ -51,14 +51,15 @@

 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--l1-border);
-						border-top-right-radius: 0px;
-						border-bottom-right-radius: 0px;
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 						padding: 0px !important;
-						background-color: var(--l1-background) !important;
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						) !important;

 						&:focus-within {
-							border-color: var(--l1-border);
+							border-color: var(--query-builder-v2-border-color, var(--l2-border));
 						}
 					}

@@ -74,7 +75,7 @@
 						right: 0px !important;

 						border-radius: 4px;
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 						background: linear-gradient(
 							139deg,
 							color-mix(in srgb, var(--card) 80%, transparent) 0%,
@@ -118,7 +119,7 @@
 								box-sizing: border-box;
 								overflow: hidden;

-								color: var(--l2-foreground) !important;
+								color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
 								font-family: 'Space Mono', monospace !important;

 								.cm-completionIcon {
@@ -127,7 +128,10 @@

 								&:hover,
 								&[aria-selected='true'] {
-									background: var(--l3-background) !important;
+									background: var(
+										--query-builder-v2-selection-background-color,
+										var(--l3-background)
+									) !important;
 									color: var(--l1-foreground) !important;
 									font-weight: 600 !important;
 								}
@@ -142,15 +146,24 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(--l2-background) !important;
+						background-color: var(
+							--query-builder-v2-background-color,
+							var(--l2-background)
+						) !important;

 						::-moz-selection {
-							background: var(--l3-background) !important;
+							background: var(
+								--query-builder-v2-selection-background-color,
+								var(--l3-background)
+							) !important;
 							opacity: 0.5 !important;
 						}

 						::selection {
-							background: var(--l3-background) !important;
+							background: var(
+								--query-builder-v2-selection-background-color,
+								var(--l3-background)
+							) !important;
 							opacity: 0.5 !important;
 						}

@@ -159,8 +172,11 @@
 						}

 						.chip-decorator {
-							background: var(--l3-background) !important;
-							color: var(--l1-foreground) !important;
+							background: var(
+								--query-builder-v2-chip-decorator-background-color,
+								var(--l3-background)
+							) !important;
+							color: var(--query-builder-v2-color, var(--l1-foreground)) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -168,7 +184,10 @@
 					}

 					.cm-selectionBackground {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -201,12 +220,11 @@

 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
-				height: 38px;
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				background: var(--query-builder-v2-background-color, var(--l2-background));
+				height: 100%;
 				width: 38px;

-				border-left: transparent;
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
 			}
@@ -217,13 +235,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

 			font-family: 'Space Mono', monospace !important;

 			&::placeholder {
-				color: var(--l1-foreground);
+				color: var(--query-builder-v2-color, var(--l2-foreground));
 				opacity: 0.5;
 			}
 		}
@@ -238,9 +256,10 @@
 			.query-aggregation-interval-input-container {
 				.query-aggregation-interval-input {
 					input {
+						min-height: 36px;
 						max-width: 120px;
 						&::placeholder {
-							color: var(--l2-foreground);
+							color: var(--query-builder-v2-color, var(--l2-foreground));
 						}
 					}
 				}
@@ -251,8 +270,8 @@

 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--l1-border);
-		border: 1px solid var(--l1-border);
+		background-color: var(--query-builder-v2-border-color, var(--l2-border));
+		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		border-radius: 4px;
 		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 	}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.styles.scss
@@ -1,7 +1,7 @@
 .add-trace-operator-button,
 .add-new-query-button,
 .add-formula-button {
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+	background: var(--query-builder-v2-background-color, var(--l2-background));
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
@@ -40,11 +40,14 @@ $max-recents-shown: 5;
 		.query-status-container {
 			width: 32px;

-			background-color: var(--l1-background) !important;
+			background-color: var(
+				--query-builder-v2-background-color,
+				var(--l2-background)
+			) !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -83,16 +86,16 @@ $max-recents-shown: 5;

 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 			padding: 0px !important;

 			&:focus-within {
-				border-color: var(--l1-border);
+				border-color: var(--query-builder-v2-border-color, var(--l2-border));
 			}
 		}

 		&.cm-focused {
-			outline: 1px solid var(--l1-border);
+			outline: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 		}

 		.cm-tooltip-autocomplete {
@@ -183,11 +186,17 @@ $max-recents-shown: 5;

 					font-family: 'Space Mono', monospace !important;

-					background-color: var(--l1-background) !important;
-					color: var(--l2-foreground) !important;
+					background-color: var(
+						--query-builder-v2-background-color,
+						var(--l2-background)
+					) !important;
+					color: var(--query-builder-v2-color, var(--l2-foreground)) !important;

 					&:hover {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 					}

 					.cm-completionIcon {
@@ -205,7 +214,10 @@ $max-recents-shown: 5;
 					}

 					&[aria-selected='true'] {
-						background: var(--l3-background) !important;
+						background: var(
+							--query-builder-v2-selection-background-color,
+							var(--l3-background)
+						) !important;
 						font-weight: 600 !important;
 					}
 				}
@@ -274,25 +286,49 @@ $max-recents-shown: 5;
 		}

 		.cm-line {
-			line-height: 34px !important;
+			line-height: 36px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(--l2-background) !important;
+			background-color: var(
+				--query-builder-v2-background-color,
+				var(--l2-background)
+			) !important;
+
+			&,
+			.ͼ1a {
+				color: var(--query-builder-v2-color, var(--l2-foreground));
+			}

 			::-moz-selection {
-				background: var(--l3-background) !important;
+				background: var(
+					--query-builder-v2-selection-background-color,
+					var(--l3-background)
+				) !important;
 				opacity: 0.5 !important;
 			}

 			::selection {
-				background: var(--l3-background) !important;
+				background: var(
+					--query-builder-v2-selection-background-color,
+					var(--l3-background)
+				) !important;
 				opacity: 0.5 !important;
 			}
 		}

 		.cm-selectionBackground {
-			background: var(--l3-background) !important;
+			background: var(
+				--query-builder-v2-selection-background-color,
+				var(--l3-background)
+			) !important;
 			opacity: 0.5 !important;
 		}
+
+		.cm-placeholder {
+			color: var(
+				--query-builder-v2-placeholder-color,
+				var(--l3-foreground)
+			) !important;
+		}
 	}

 	.cursor-position {
--- a/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss
@@ -65,6 +65,14 @@
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
+
+		// 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);
 	}

 	&-aggregation-container {
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx
@@ -47,7 +47,7 @@ function CheckboxValueRow({
 				{customRendererForValue ? (
 					customRendererForValue(value)
 				) : (
-					<TooltipSimple title={value} side="top" align="center" arrow>
+					<TooltipSimple title={String(value)} side="top" align="start">
 						<Typography.Text className="value-string" truncate={1}>
 							{String(value)}
 						</Typography.Text>
--- a/frontend/src/components/TimelineV3/TimelineV3.tsx
+++ b/frontend/src/components/TimelineV3/TimelineV3.tsx
@@ -57,10 +57,13 @@ function TimelineV3(props: ITimelineV3Props): JSX.Element {
 		}

 		const timeAtCursor = offsetTimestamp + cursorXPercent * spread;
-		const unit = getIntervalUnit(spread, offsetTimestamp);
+		// Use the same width-derived interval spread the ticks use, so the badge
+		// unit always matches the tick unit (narrow rulers pick fewer intervals).
+		const intervalSpread = spread / getMinimumIntervalsBasedOnWidth(width);
+		const unit = getIntervalUnit(intervalSpread, offsetTimestamp);
 		const formatted = toFixed(resolveTimeFromInterval(timeAtCursor, unit), 2);
 		return `${formatted}${unit.name}`;
-	}, [cursorXPercent, spread, offsetTimestamp]);
+	}, [cursorXPercent, spread, offsetTimestamp, width]);

 	if (endTimestamp < startTimestamp) {
 		console.error(
@@ -94,12 +97,17 @@ function TimelineV3(props: ITimelineV3Props): JSX.Element {
 						>
 							<text
 								x={index === intervals.length - 1 ? -10 : 0}
-								y={timelineHeight * 2}
+								y={timelineHeight * 2 - 3}
 								fill={strokeColor}
 							>
 								{interval.label}
 							</text>
-							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
+							<line
+								y1={0}
+								y2={timelineHeight - 3}
+								stroke={strokeColor}
+								strokeWidth="1"
+							/>
 						</g>
 					))}
 			</svg>
--- a/frontend/src/components/TimelineV3/tests/utils.test.ts
+++ b/frontend/src/components/TimelineV3/tests/utils.test.ts
@@ -0,0 +1,63 @@
+import {
+	getIntervals,
+	getIntervalUnit,
+	getMinimumIntervalsBasedOnWidth,
+} from '../utils';
+
+// A tick label looks like "200.00ms" / "1.10s" — grab the trailing unit name.
+function unitOfLabel(label: string): string {
+	const match = label.match(/[a-z]+$/i);
+	return match ? match[0] : '';
+}
+
+describe('getMinimumIntervalsBasedOnWidth', () => {
+	it('returns fewer intervals for narrower rulers', () => {
+		expect(getMinimumIntervalsBasedOnWidth(500)).toBe(3);
+		expect(getMinimumIntervalsBasedOnWidth(700)).toBe(4);
+		expect(getMinimumIntervalsBasedOnWidth(900)).toBe(5);
+		expect(getMinimumIntervalsBasedOnWidth(1200)).toBe(6);
+	});
+});
+
+describe('getIntervalUnit', () => {
+	it('selects the unit from the interval spread', () => {
+		expect(getIntervalUnit(130, 0).name).toBe('ms');
+		expect(getIntervalUnit(1100, 0).name).toBe('s');
+		expect(getIntervalUnit(70_000, 0).name).toBe('m');
+	});
+
+	it('accounts for a large offset (deep-zoom labels stay readable)', () => {
+		// Cursor spread is tiny but the window starts 5,000,000ms into the trace.
+		expect(getIntervalUnit(100, 5_000_000).name).toBe('hr');
+	});
+
+	// Regression: the interval COUNT changes the chosen unit, so the crosshair
+	// badge must use the same width-derived count as the ticks. On a 5.5s trace a
+	// narrow ruler (5 intervals → 1100ms → "s") and a wide one (6 intervals →
+	// 916ms → "ms") pick different units.
+	it('can resolve to different units for the same spread at different counts', () => {
+		const spread = 5500;
+		expect(getIntervalUnit(spread / 5, 0).name).toBe('s');
+		expect(getIntervalUnit(spread / 6, 0).name).toBe('ms');
+	});
+});
+
+describe('badge/tick unit consistency', () => {
+	// The invariant the fix guarantees: when the badge and the ticks are fed the
+	// same width-derived intervalSpread, every tick label uses the badge's unit.
+	it.each([
+		{ spread: 1287, width: 900 },
+		{ spread: 5500, width: 900 }, // narrow → 5 intervals, the mismatch case
+		{ spread: 5500, width: 1200 }, // wide → 6 intervals
+		{ spread: 120_000, width: 700 },
+	])('spread=$spread width=$width', ({ spread, width }) => {
+		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
+		const intervalSpread = spread / minIntervals;
+		const badgeUnit = getIntervalUnit(intervalSpread, 0).name;
+		const intervals = getIntervals(intervalSpread, spread, 0);
+
+		intervals.forEach((interval) => {
+			expect(unitOfLabel(interval.label)).toBe(badgeUnit);
+		});
+	});
+});
--- a/frontend/src/components/TimelineV3/utils.ts
+++ b/frontend/src/components/TimelineV3/utils.ts
@@ -10,14 +10,18 @@ export type { Interval };

 /**
 * Select the interval unit matching the timeline's logic.
- * Exported so crosshair labels use the same unit as timeline ticks.
+ * Exported so crosshair labels use the same unit as the timeline ticks.
+ *
+ * Takes the already-computed `intervalSpread` (spread / minIntervals) rather
+ * than deriving it from a hardcoded interval count — the tick count is
+ * width-dependent (`getMinimumIntervalsBasedOnWidth`), so callers must pass the
+ * same `intervalSpread` the ticks use or the badge unit can diverge from the
+ * ticks (e.g. ms vs s) on narrower rulers like the waterfall.
 */
 export function getIntervalUnit(
-	spread: number,
+	intervalSpread: number,
 	offsetTimestamp: number,
 ): IIntervalUnit {
-	const minIntervals = 6;
-	const intervalSpread = spread / minIntervals;
 	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
 	let unit: IIntervalUnit = INTERVAL_UNITS[0];
 	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
--- a/frontend/src/components/cmdKPalette/cmdKPalette.scss
+++ b/frontend/src/components/cmdKPalette/cmdKPalette.scss
@@ -1,12 +1,12 @@
 /* Overlay stays below content */
 [data-slot='dialog-overlay'] {
-	z-index: 50;
+	z-index: 1000 !important;
 }

 /* Dialog content always above overlay */
 [data-slot='dialog-content'] {
 	position: fixed;
-	z-index: 60;
+	z-index: 1001 !important;
 	background: var(--l1-background);
 	color: var(--l1-foreground);

--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -32,6 +32,11 @@ export enum LOCALSTORAGE {
 	SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS',
 	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
 	QUICK_FILTERS_WIDTH_LOGS = 'QUICK_FILTERS_WIDTH_LOGS',
+	QUICK_FILTERS_WIDTH_TRACES = 'QUICK_FILTERS_WIDTH_TRACES',
+	QUICK_FILTERS_WIDTH_METER = 'QUICK_FILTERS_WIDTH_METER',
+	QUICK_FILTERS_WIDTH_API_MONITORING = 'QUICK_FILTERS_WIDTH_API_MONITORING',
+	QUICK_FILTERS_WIDTH_EXCEPTIONS = 'QUICK_FILTERS_WIDTH_EXCEPTIONS',
+	QUICK_FILTERS_WIDTH_INFRA = 'QUICK_FILTERS_WIDTH_INFRA',
 	FUNNEL_STEPS = 'FUNNEL_STEPS',
 	SPAN_DETAILS_PINNED_ATTRIBUTES = 'SPAN_DETAILS_PINNED_ATTRIBUTES',
 	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -89,8 +89,10 @@ const ROUTES = {
 	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
+	LLM_OBSERVABILITY_ATTRIBUTE_MAPPING: '/llm-observability/attribute-mapping',
 	LLM_OBSERVABILITY_BASE: '/llm-observability',
-	LLM_OBSERVABILITY_MODEL_PRICING: '/llm-observability/settings/model-pricing',
+	LLM_OBSERVABILITY_OVERVIEW: '/llm-observability/overview',
+	LLM_OBSERVABILITY_CONFIGURATION: '/llm-observability/configuration',
 } as const;

 export default ROUTES;
--- a/frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss
+++ b/frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss
@@ -163,12 +163,23 @@
 	}

 	&.filter-visible {
+		// Width is owned by ResizableBox (inline style); this section is the
+		// ResizableBox root, so it stays position: relative for the drag handle.
 		.api-quick-filter-left-section {
-			width: 260px;
+			.resizable-box__content {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.quick-filters-container {
+				flex: 1;
+				min-height: 0;
+			}
 		}

 		.api-module-right-section {
-			width: calc(100% - 260px);
+			flex: 1;
+			min-width: 0;
 		}
 	}
 }
--- a/frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx
@@ -4,21 +4,49 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';

 import DomainList from './Domains/DomainList';

 import './Explorer.styles.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 260;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Explorer(): JSX.Element {
 	useEffect(() => {
 		logEvent('API Monitoring: Landing page visited', {});
 	}, []);

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_API_MONITORING,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className={cx('api-monitoring-page', 'filter-visible')}>
-				<section className="api-quick-filter-left-section">
+				<ResizableBox
+					handle="right"
+					defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+					initialWidth={quickFiltersInitialWidth}
+					minWidth={QUICK_FILTERS_MIN_WIDTH}
+					maxWidth={QUICK_FILTERS_MAX_WIDTH}
+					onResize={persistQuickFiltersWidth}
+					resetToDefaultOnDoubleClick
+					withHandle
+					className="api-quick-filter-left-section"
+					handleTestId="quick-filters-resize-handle"
+				>
 					<QuickFilters
 						className="qf-api-monitoring"
 						source={QuickFiltersSource.API_MONITORING}
@@ -27,7 +55,7 @@ function Explorer(): JSX.Element {
 						showQueryName={false}
 						handleFilterVisibilityChange={(): void => {}}
 					/>
-				</section>
+				</ResizableBox>
 				<DomainList />
 			</div>
 		</Sentry.ErrorBoundary>
--- a/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss
+++ b/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss
@@ -41,6 +41,28 @@

 .steps-container {
 	width: 80%;
+
+	.alert-query-section-container {
+		--query-builder-v2-color: var(--l2-foreground);
+		--query-builder-v2-background-color: var(--l3-background);
+		--query-builder-v2-border-color: var(--l3-border);
+		--query-builder-v2-selection-background-color: var(--l2-background);
+		--query-builder-v2-chip-decorator-background-color: var(--l2-background);
+		--query-builder-v2-placeholder-color: var(--l3-foreground);
+		--query-builder-v2-selected-background-color: var(--l3-foreground);
+		--query-search-background-color: var(--l3-background);
+		--query-search-background-color-selection: var(--l3-background);
+		--input-with-label-border-color: var(--l3-border);
+		--input-with-label-background-color: var(--l3-background);
+		--input-with-label-color: var(--l2-foreground);
+		--query-builder-v2-toggle-group-background-color: var(--l3-background);
+		--query-builder-v2-toggle-group-border-color: var(--l3-border);
+		--query-builder-v2-toggle-group-active-background-color: var(--l2-background);
+		--query-builder-v2-toggle-group-background-color-hover: var(--l3-background);
+		--input-height: 36px;
+		--input-hover-background: var(--l3-background);
+		--input-hover-border-color: var(--internal-ant-border-color-hover);
+	}
 }

 .qb-chart-preview-container {
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/WidgetFullView.styles.scss
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/WidgetFullView.styles.scss
@@ -3,6 +3,30 @@
 	overflow-x: auto;
 	overflow-y: hidden;

+	--query-builder-v2-color: var(--l2-foreground);
+	--query-builder-v2-background-color: var(--l3-background);
+	--query-builder-v2-border-color: var(--l3-border);
+	--query-builder-v2-selection-background-color: var(--l2-background);
+	--query-builder-v2-chip-decorator-background-color: var(--l2-background);
+	--query-builder-v2-placeholder-color: var(--l3-foreground);
+	--query-builder-v2-selected-background-color: var(--l3-foreground);
+	--query-search-background-color: var(--l3-background);
+	--query-search-background-color-selection: var(--l3-background);
+	--input-with-label-border-color: var(--l3-border);
+	--input-with-label-background-color: var(--l3-background);
+	--input-with-label-color: var(--l2-foreground);
+	--query-builder-v2-toggle-group-background-color: var(--l3-background);
+	--query-builder-v2-toggle-group-border-color: var(--l3-border);
+	--query-builder-v2-toggle-group-active-background-color: var(--l2-background);
+	--query-builder-v2-toggle-group-background-color-hover: var(--l3-background);
+	--input-height: 36px;
+	--input-hover-background: var(--l3-background);
+	--input-hover-border-color: var(--internal-ant-border-color-hover);
+	--input-focus-border-color: var(--internal-ant-border-color-hover);
+	--input-background: var(--l3-background);
+	--input-focus-background: var(--l3-background);
+	--input-border-color: var(--l3-border);
+
 	.full-view-header-container {
 		display: flex;
 		flex-direction: column;
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -66,6 +66,7 @@ function WidgetGraphComponent({
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
 	enableDrillDown,
+	hidePagination,
 }: WidgetGraphComponentProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const [deleteModal, setDeleteModal] = useState(false);
@@ -430,6 +431,7 @@ function WidgetGraphComponent({
 						customSeries={customSeries}
 						customOnRowClick={customOnRowClick}
 						enableDrillDown={enableDrillDown}
+						hidePagination={hidePagination}
 						onColumnWidthsChange={onColumnWidthsChange}
 					/>
 				</div>
--- a/frontend/src/container/GridCardLayout/GridCard/types.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/types.ts
@@ -42,6 +42,8 @@ export interface WidgetGraphComponentProps {
 	customOnRowClick?: (record: RowData) => void;
 	customTimeRangeWindowForCoRelation?: string | undefined;
 	enableDrillDown?: boolean;
+	/** Hide list-panel pagination controls (e.g. public dashboards, where paging isn't supported). */
+	hidePagination?: boolean;
 }

 export interface GridCardGraphProps {
--- a/frontend/src/container/InfraMonitoringHosts/Hosts.tsx
+++ b/frontend/src/container/InfraMonitoringHosts/Hosts.tsx
@@ -6,6 +6,7 @@ import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import K8sBaseDetails from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
 import { K8sBaseList } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
@@ -16,6 +17,8 @@ import {
 } from 'container/InfraMonitoringK8s/hooks';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { useAppContext } from 'providers/App/App';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

@@ -40,8 +43,21 @@ import { getHostsQuickFiltersConfig } from './utils';
 import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';

+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_INFRA,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
 	const [, setCurrentPage] = useInfraMonitoringPageListing();
 	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();

@@ -139,7 +155,18 @@ function Hosts(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className={styles.quickFiltersContainer}
+							handleTestId="quick-filters-resize-handle"
+						>
 							<div className={styles.quickFiltersContainerHeader}>
 								<Typography.Text>Filters</Typography.Text>
 								<Tooltip title="Collapse Filters">
@@ -156,7 +183,7 @@ function Hosts(): JSX.Element {
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 								onFilterChange={handleQuickFiltersChange}
 							/>
-						</div>
+						</ResizableBox>
 					)}
 					<div
 						className={`${styles.listContainer}${
--- a/frontend/src/container/InfraMonitoringHosts/InfraMonitoringHosts.module.scss
+++ b/frontend/src/container/InfraMonitoringHosts/InfraMonitoringHosts.module.scss
@@ -44,26 +44,20 @@
 }

 .quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
+	// Width is owned by ResizableBox (inline style). No overflow here: the panel
+	// must not scroll (QuickFilters scrolls its own list internally) — an
+	// overflow on the root would also clip the edge-mounted resize grip.
+	flex-shrink: 0;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;

-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
+	:global(.resizable-box__content) {
+		display: flex;
+		flex-direction: column;
 	}

-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	:global(.quick-filters-container) {
+		flex: 1;
+		min-height: 0;
 	}

 	:global(.ant-collapse-header) {
@@ -142,7 +136,9 @@
 }

 .listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
+	// Width is driven by flex now that the filters panel is resizable; the list
+	// fills whatever space the (variable-width) panel leaves.
+	max-width: 100%;
 }

 .quickFiltersToggleContainer {
--- a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.module.scss
+++ b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.module.scss
@@ -44,26 +44,15 @@
 }

 .quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
+	// Width is owned by ResizableBox (inline style). No overflow here: the panel
+	// must not scroll (QuickFilters scrolls its own list internally) — an
+	// overflow on the root would also clip the edge-mounted resize grip.
+	flex-shrink: 0;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;

-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	:global(.resizable-box__content) {
+		display: flex;
+		flex-direction: column;
 	}

 	:global(.quick-filters) {
@@ -128,7 +117,9 @@
 }

 .listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
+	// Width is driven by flex now that the filters panel is resizable; the list
+	// fills whatever space the (variable-width) panel leaves.
+	max-width: 100%;
 }

 .categorySelectorSection {
@@ -219,8 +210,16 @@

 .quickFiltersSection {
 	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
 	overflow-y: auto;

+	:global(.quick-filters-container) {
+		flex: 1;
+		min-height: 0;
+	}
+
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}
--- a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx
@@ -6,6 +6,7 @@ import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import {
@@ -22,6 +23,8 @@ import {
 	Workflow,
 } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

 import { FeatureKeys } from '../../constants/features';
@@ -56,9 +59,23 @@ import K8sVolumesList from './Volumes/K8sVolumesList';

 import styles from './InfraMonitoringK8s.module.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_INFRA,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	const [selectedCategory, setSelectedCategory] = useInfraMonitoringCategory();
 	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
@@ -212,7 +229,18 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className={styles.quickFiltersContainer}
+							handleTestId="quick-filters-resize-handle"
+						>
 							<div className={styles.categorySelectorSection}>
 								<div className={styles.sectionHeader} data-type="resource">
 									<Typography.Text className={styles.sectionLabel}>
@@ -265,7 +293,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 									/>
 								)}
 							</div>
-						</div>
+						</ResizableBox>
 					)}

 					<div
--- a/frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss
+++ b/frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss
@@ -0,0 +1,13 @@
+.llmObservabilityAttributeMapping {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	padding: var(--spacing-12);
+}
+
+.tableEmpty {
+	padding: var(--spacing-12) var(--spacing-6);
+	text-align: center;
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+}
--- a/frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx
@@ -0,0 +1,26 @@
+import AttributeMappingHeader from './components/AttributeMappingHeader';
+import styles from './LLMObservabilityAttributeMapping.module.scss';
+
+const noop = (): void => undefined;
+
+function LLMObservabilityAttributeMapping(): JSX.Element {
+	return (
+		<div
+			className={styles.llmObservabilityAttributeMapping}
+			data-testid="llm-observability-attribute-mapping-page"
+		>
+			<AttributeMappingHeader
+				isDirty={false}
+				isSaving={false}
+				onDiscard={noop}
+				onSave={noop}
+			/>
+
+			<div className={styles.tableEmpty} data-testid="attribute-mapping-empty">
+				No mapping groups configured yet.
+			</div>
+		</div>
+	);
+}
+
+export default LLMObservabilityAttributeMapping;
--- a/frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.module.scss
+++ b/frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.module.scss
@@ -0,0 +1,34 @@
+.pageHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.pageHeaderTitle {
+	display: flex;
+	flex-direction: column;
+}
+
+.title {
+	margin: 0;
+	font-size: var(--periscope-font-size-large);
+	font-weight: var(--font-weight-semibold);
+}
+
+.description {
+	margin: var(--spacing-2) 0 0;
+	font-size: var(--periscope-font-size-base);
+	color: var(--l3-foreground);
+}
+
+.pageHeaderActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-6);
+}
+
+.unsavedChanges {
+	font-size: var(--periscope-font-size-base);
+	color: var(--accent-amber);
+}
--- a/frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx
@@ -0,0 +1,56 @@
+import { Button } from '@signozhq/ui/button';
+
+import styles from './AttributeMappingHeader.module.scss';
+
+interface AttributeMappingHeaderProps {
+	isDirty: boolean;
+	isSaving: boolean;
+	onDiscard: () => void;
+	onSave: () => void;
+}
+
+function AttributeMappingHeader({
+	isDirty,
+	isSaving,
+	onDiscard,
+	onSave,
+}: AttributeMappingHeaderProps): JSX.Element {
+	return (
+		<header className={styles.pageHeader}>
+			<div className={styles.pageHeaderTitle}>
+				<h1 className={styles.title}>Attribute Mapping</h1>
+				<p className={styles.description}>
+					Configure source-to-target attribute remapping for LLM traces
+				</p>
+			</div>
+			<div className={styles.pageHeaderActions}>
+				{isDirty && (
+					<span className={styles.unsavedChanges} data-testid="unsaved-changes">
+						Unsaved changes
+					</span>
+				)}
+				<Button
+					variant="outlined"
+					color="secondary"
+					onClick={onDiscard}
+					disabled={!isDirty || isSaving}
+					testId="discard-changes-btn"
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={onSave}
+					loading={isSaving}
+					disabled={!isDirty || isSaving}
+					testId="save-changes-btn"
+				>
+					{isSaving ? 'Saving…' : 'Save changes'}
+				</Button>
+			</div>
+		</header>
+	);
+}
+
+export default AttributeMappingHeader;
--- a/frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/index.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/index.ts
@@ -0,0 +1 @@
+export { default } from './AttributeMappingHeader';
--- a/frontend/src/container/LLMObservability/LLMObservability.module.scss
+++ b/frontend/src/container/LLMObservability/LLMObservability.module.scss
@@ -1,27 +1,7 @@
 .llmObservability {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--spacing-12) var(--spacing-16);
-}
-
-.pageHeader {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.pageHeaderTitle {
-	.title {
-		margin: 0;
-		font-size: var(--font-size-xl);
-		font-weight: var(--font-weight-semibold);
-	}
-
-	.subtitle {
-		margin: var(--spacing-2) 0 0;
-		color: var(--text-vanilla-400);
-		font-size: var(--periscope-font-size-base);
-	}
+	height: 100%;
+	margin-top: var(--spacing-2);
+	margin-left: var(--spacing-2);
 }
--- a/frontend/src/container/LLMObservability/LLMObservability.tsx
+++ b/frontend/src/container/LLMObservability/LLMObservability.tsx
@@ -1,16 +1,22 @@
+import { Tabs } from '@signozhq/ui/tabs';
+
+import { useLLMObservabilityTabs } from './hooks/useLLMObservabilityTabs';
 import styles from './LLMObservability.module.scss';

+// Shell for the LLM Observability page: renders the top-level tab bar
+// (Overview / Configuration) using the SigNoz design-system Tabs, with
+// route-driven active state from useLLMObservabilityTabs.
 function LLMObservability(): JSX.Element {
+	const { items, activeTab, onTabChange } = useLLMObservabilityTabs();
+
 	return (
 		<div className={styles.llmObservability} data-testid="llm-observability-page">
-			<header className={styles.pageHeader}>
-				<div className={styles.pageHeaderTitle}>
-					<h1 className={styles.title}>LLM Observability</h1>
-					<p className={styles.subtitle}>
-						Monitor and analyze your LLM usage, costs, and performance
-					</p>
-				</div>
-			</header>
+			<Tabs
+				items={items}
+				value={activeTab}
+				onChange={onTabChange}
+				testId="llm-observability-tabs"
+			/>
 		</div>
 	);
 }
--- a/frontend/src/container/LLMObservability/Overview/Overview.module.scss
+++ b/frontend/src/container/LLMObservability/Overview/Overview.module.scss
@@ -0,0 +1,27 @@
+.overview {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	padding: var(--spacing-12) var(--spacing-16);
+}
+
+.pageHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.pageHeaderTitle {
+	.title {
+		margin: 0;
+		font-size: var(--font-size-xl);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	.subtitle {
+		margin: var(--spacing-2) 0 0;
+		color: var(--text-vanilla-400);
+		font-size: var(--periscope-font-size-base);
+	}
+}
--- a/frontend/src/container/LLMObservability/Overview/Overview.tsx
+++ b/frontend/src/container/LLMObservability/Overview/Overview.tsx
@@ -0,0 +1,20 @@
+import styles from './Overview.module.scss';
+
+// Overview tab content for LLM Observability. Currently the feature's landing
+// surface; usage/cost/performance widgets land in later PRs.
+function Overview(): JSX.Element {
+	return (
+		<div className={styles.overview} data-testid="llm-observability-overview">
+			<header className={styles.pageHeader}>
+				<div className={styles.pageHeaderTitle}>
+					<h1 className={styles.title}>LLM Observability</h1>
+					<p className={styles.subtitle}>
+						Monitor and analyze your LLM usage, costs, and performance
+					</p>
+				</div>
+			</header>
+		</div>
+	);
+}
+
+export default Overview;
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss
@@ -2,29 +2,4 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
-	padding: var(--spacing-12) var(--spacing-16);
-}
-
-.pageHeader {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.pageHeaderTitle {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-	.title {
-		margin: 0;
-		font-size: var(--font-size-xl);
-		font-weight: var(--font-weight-semibold);
-	}
-
-	.subtitle {
-		margin: var(--spacing-2) 0 0;
-		color: var(--text-vanilla-400);
-		font-size: var(--periscope-font-size-base);
-	}
 }
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.tsx
@@ -1,5 +1,4 @@
 import { Tabs } from '@signozhq/ui/tabs';
-import { Typography } from '@signozhq/ui/typography';

 import ModelCostTabPanel from './ModelCostTabPanel';
 import styles from './LLMObservabilityModelPricing.module.scss';
@@ -10,20 +9,9 @@ function LLMObservabilityModelPricing(): JSX.Element {
 			className={styles.llmObservabilityModelPricing}
 			data-testid="llm-observability-model-pricing-page"
 		>
-			<header className={styles.pageHeader}>
-				<div className={styles.pageHeaderTitle}>
-					<Typography.Text as="h1" size="large" weight="semibold">
-						Configuration
-					</Typography.Text>
-					<Typography.Text color="muted">
-						Model pricing and cost estimation settings
-					</Typography.Text>
-				</div>
-			</header>
-
 			<Tabs
 				// Model costs is the only enabled tab for now, so default to it. When
-				// the unpriced-models tab lands, this can become a URL-backed param.
+				// the unpriced-models tab lands in a later PR.
 				defaultValue="model-costs"
 				items={[
 					{
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.tsx
@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { SelectSimple } from '@signozhq/ui/select';
-import { Typography } from '@signozhq/ui/typography';
 import { Plus, Search, X } from '@signozhq/icons';
 import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
 import { type ListLLMPricingRulesParams } from 'api/generated/services/sigNoz.schemas';
@@ -161,12 +160,6 @@ function ModelCostTabPanel(): JSX.Element {
 				onDelete={deletion.requestDelete}
 			/>

-			<footer>
-				<Typography.Text color="muted" size="small">
-					All prices per 1M tokens (USD)
-				</Typography.Text>
-			</footer>
-
 			{drawer.isOpen && (
 				<ModelCostDrawer
 					isOpen={drawer.isOpen}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/tests/ModelCostTabPanel.test.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/tests/ModelCostTabPanel.test.tsx
@@ -0,0 +1,326 @@
+import { LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	TOAST_MODEL_COST_DELETED,
+	TOAST_MODEL_COST_UPDATED,
+} from 'container/LLMObservability/Settings/ModelPricing/constants';
+import {
+	LLM_PRICING_ENDPOINT,
+	LLM_PRICING_RULE_ENDPOINT,
+	makeListResponse,
+	mockRules,
+} from 'container/LLMObservability/Settings/ModelPricing/__tests__/fixtures';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+
+import ModelCostTabPanel from '../ModelCostTabPanel';
+
+const toastSuccess = jest.fn();
+const toastError = jest.fn();
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: (...args: unknown[]): void => toastSuccess(...args),
+		error: (...args: unknown[]): void => toastError(...args),
+	},
+}));
+
+function setupList(items = mockRules, total = items.length): void {
+	server.use(
+		rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(makeListResponse(items, total))),
+		),
+	);
+}
+
+function resetUrl(): void {
+	window.history.pushState(null, '', '/');
+}
+
+async function openRowMenu(
+	user: ReturnType<typeof userEvent.setup>,
+	ruleId: string,
+): Promise<void> {
+	const row = screen.getByTestId(`model-cell-name-${ruleId}`).closest('tr');
+	await user.click(within(row as HTMLElement).getByRole('button'));
+}
+
+describe('ModelCostTabPanel (integration)', () => {
+	beforeEach(() => {
+		resetUrl();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders pricing rules returned by the list API', async () => {
+		setupList();
+		render(<ModelCostTabPanel />);
+
+		const openaiCell = await screen.findByTestId('model-cell-name-rule-openai');
+		expect(openaiCell).toHaveTextContent('gpt-4o');
+		expect(
+			screen.getByTestId('model-cell-name-rule-anthropic'),
+		).toHaveTextContent('claude-3-5-sonnet');
+		// Canonical id under the model name + provider column.
+		expect(screen.getByText('openai:gpt-4o')).toBeInTheDocument();
+		expect(screen.getAllByText('OpenAI').length).toBeGreaterThan(0);
+		// Source badges reflect the override flag.
+		expect(screen.getByTestId('source-badge-rule-openai')).toHaveTextContent(
+			'User override',
+		);
+		expect(screen.getByTestId('source-badge-rule-anthropic')).toHaveTextContent(
+			'Auto',
+		);
+	});
+
+	it('shows the empty state when there are no rules', async () => {
+		setupList([], 0);
+		render(<ModelCostTabPanel />);
+
+		const empty = await screen.findByTestId('model-costs-empty');
+		expect(empty).toHaveTextContent('No model costs yet.');
+	});
+
+	it('shows an error message when the list request fails', async () => {
+		server.use(
+			rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) => res(ctx.status(500))),
+		);
+		render(<ModelCostTabPanel />);
+
+		const alert = await screen.findByRole('alert');
+		expect(alert).toHaveTextContent(
+			'Failed to load pricing rules. Please try again.',
+		);
+	});
+
+	it('sends the debounced search term as the q param', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let lastParams: URLSearchParams | null = null;
+		server.use(
+			rest.get(LLM_PRICING_ENDPOINT, (req, res, ctx) => {
+				lastParams = req.url.searchParams;
+				return res(ctx.status(200), ctx.json(makeListResponse(mockRules)));
+			}),
+		);
+		render(<ModelCostTabPanel />);
+
+		await screen.findByTestId('model-cell-name-rule-openai');
+		await user.type(
+			screen.getByPlaceholderText('Search by model or provider'),
+			'claude',
+		);
+
+		await waitFor(() => expect(lastParams?.get('q')).toBe('claude'));
+	});
+
+	it('clears the search via the clear button', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupList();
+		render(<ModelCostTabPanel />);
+
+		const input = screen.getByPlaceholderText(
+			'Search by model or provider',
+		) as HTMLInputElement;
+		await user.type(input, 'gpt');
+		expect(input.value).toBe('gpt');
+
+		await user.click(screen.getByTestId('model-cost-search-clear'));
+		await waitFor(() => expect(input.value).toBe(''));
+	});
+
+	it('sends isOverride=true when the source filter is set to User override', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let lastParams: URLSearchParams | null = null;
+		server.use(
+			rest.get(LLM_PRICING_ENDPOINT, (req, res, ctx) => {
+				lastParams = req.url.searchParams;
+				return res(ctx.status(200), ctx.json(makeListResponse(mockRules)));
+			}),
+		);
+		render(<ModelCostTabPanel />);
+
+		await screen.findByTestId('model-cell-name-rule-openai');
+		await user.click(screen.getByTestId('source-filter'));
+		// Scope to the listbox option — "User override" also appears as a row badge.
+		await user.click(
+			await screen.findByRole('option', { name: 'User override' }),
+		);
+
+		await waitFor(() => expect(lastParams?.get('isOverride')).toBe('true'));
+	});
+
+	it('opens the add drawer for a manager (ADMIN)', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupList();
+		render(<ModelCostTabPanel />);
+
+		await screen.findByTestId('model-cell-name-rule-openai');
+		await user.click(screen.getByTestId('add-model-cost-btn'));
+
+		const modelInput = await screen.findByTestId('drawer-model-id-input');
+		expect(modelInput).toBeInTheDocument();
+		expect(screen.getByTestId('drawer-save-btn')).toBeInTheDocument();
+	});
+
+	it('hides the add button and row actions for a viewer', async () => {
+		setupList();
+		render(<ModelCostTabPanel />, undefined, { role: 'VIEWER' });
+
+		const row = (
+			await screen.findByTestId('model-cell-name-rule-openai')
+		).closest('tr') as HTMLElement;
+		expect(screen.queryByTestId('add-model-cost-btn')).not.toBeInTheDocument();
+		// View-only rows render no action menu (no buttons in the row).
+		expect(within(row).queryByRole('button')).not.toBeInTheDocument();
+	});
+
+	it('opens the edit drawer prefilled from the row action menu', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupList();
+		render(<ModelCostTabPanel />);
+
+		await screen.findByTestId('model-cell-name-rule-openai');
+		await openRowMenu(user, 'rule-openai');
+		await user.click(await screen.findByText('Edit'));
+
+		const drawerTitle = await screen.findByText('Edit model cost');
+		expect(drawerTitle).toBeInTheDocument();
+		const modelInput = screen.getByTestId(
+			'drawer-model-id-input',
+		) as HTMLInputElement;
+		expect(modelInput.value).toBe('gpt-4o');
+		expect(modelInput).toBeDisabled();
+	});
+
+	it('deletes a rule through the confirm dialog', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let deletedId: string | null = null;
+		setupList();
+		server.use(
+			rest.delete(LLM_PRICING_RULE_ENDPOINT, (req, res, ctx) => {
+				deletedId = req.params.id as string;
+				return res(ctx.status(200), ctx.json({ status: 'success' }));
+			}),
+		);
+		render(<ModelCostTabPanel />);
+
+		await screen.findByTestId('model-cell-name-rule-openai');
+		await openRowMenu(user, 'rule-openai');
+		await user.click(await screen.findByText('Delete'));
+
+		await user.click(await screen.findByTestId('drawer-delete-confirm-btn'));
+
+		await waitFor(() => expect(deletedId).toBe('rule-openai'));
+		await waitFor(() =>
+			expect(toastSuccess).toHaveBeenCalledWith(TOAST_MODEL_COST_DELETED),
+		);
+	});
+
+	it('renders cache buckets for rules that have cache pricing', async () => {
+		setupList();
+		render(<ModelCostTabPanel />);
+
+		const anthropicRow = (
+			await screen.findByTestId('model-cell-name-rule-anthropic')
+		).closest('tr') as HTMLElement;
+		expect(within(anthropicRow).getByText(/Cache Read/i)).toBeInTheDocument();
+		expect(within(anthropicRow).getByText(/Cache Write/i)).toBeInTheDocument();
+	});
+
+	it('formats per-million prices in the row', async () => {
+		setupList();
+		render(<ModelCostTabPanel />);
+
+		const openaiRow = (
+			await screen.findByTestId('model-cell-name-rule-openai')
+		).closest('tr') as HTMLElement;
+		// mockRules gpt-4o has input cost 3 → rendered as $3.00.
+		expect(within(openaiRow).getByText('$3.00')).toBeInTheDocument();
+	});
+
+	it('sends a normalized create payload when adding a rule', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let body: Record<string, unknown> | null = null;
+		setupList();
+		server.use(
+			rest.put(LLM_PRICING_ENDPOINT, async (req, res, ctx) => {
+				body = await req.json();
+				return res(ctx.status(200), ctx.json({ status: 'success' }));
+			}),
+		);
+		render(<ModelCostTabPanel />);
+
+		await screen.findByTestId('model-cell-name-rule-openai');
+		await user.click(screen.getByTestId('add-model-cost-btn'));
+
+		// Leading/trailing whitespace should be trimmed off the model id.
+		await user.type(
+			await screen.findByTestId('drawer-model-id-input'),
+			'  gpt-4o-mini  ',
+		);
+		await user.type(screen.getByTestId('drawer-input-cost'), '3');
+		await user.type(screen.getByTestId('drawer-output-cost'), '9');
+		await user.click(screen.getByTestId('drawer-save-btn'));
+
+		await waitFor(() => expect(body).not.toBeNull());
+		// The create call submits a bulk `rules` array of normalized payloads.
+		const [payload] = (
+			body as unknown as {
+				rules: Record<string, unknown>[];
+			}
+		).rules;
+		expect(payload).toMatchObject({
+			modelName: 'gpt-4o-mini',
+			provider: 'OpenAI',
+			isOverride: true,
+			enabled: true,
+			unit: UnitDTO.per_million_tokens,
+			pricing: { input: 3, output: 9 },
+		});
+	});
+
+	it('sends an updated payload when editing a rule', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let body: Record<string, unknown> | null = null;
+		setupList();
+		server.use(
+			rest.put(LLM_PRICING_ENDPOINT, async (req, res, ctx) => {
+				body = await req.json();
+				return res(ctx.status(200), ctx.json({ status: 'success' }));
+			}),
+		);
+		render(<ModelCostTabPanel />);
+
+		await screen.findByTestId('model-cell-name-rule-openai');
+		await openRowMenu(user, 'rule-openai');
+		await user.click(await screen.findByText('Edit'));
+
+		// Model id + provider are locked in edit mode; change the prefilled input cost.
+		const inputCost = await screen.findByTestId('drawer-input-cost');
+		await user.clear(inputCost);
+		await user.type(inputCost, '5');
+		await user.click(screen.getByTestId('drawer-save-btn'));
+
+		await waitFor(() => expect(body).not.toBeNull());
+		const [payload] = (
+			body as unknown as {
+				rules: Record<string, unknown>[];
+			}
+		).rules;
+		// Edit carries the rule id; disabled model/provider are still submitted and
+		// the edited price flows through, while output keeps its prefilled value.
+		expect(payload).toMatchObject({
+			id: 'rule-openai',
+			modelName: 'gpt-4o',
+			provider: 'OpenAI',
+			isOverride: true,
+			enabled: true,
+			unit: UnitDTO.per_million_tokens,
+			pricing: { input: 5, output: 9 },
+		});
+		await waitFor(() =>
+			expect(toastSuccess).toHaveBeenCalledWith(TOAST_MODEL_COST_UPDATED),
+		);
+	});
+});
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/tests/ModelCostDrawer.test.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/tests/ModelCostDrawer.test.tsx
@@ -0,0 +1,295 @@
+import { makePricingRule } from 'container/LLMObservability/Settings/ModelPricing/__tests__/fixtures';
+import { EMPTY_DRAFT } from 'container/LLMObservability/Settings/ModelPricing/constants';
+import { draftFromRule } from 'container/LLMObservability/Settings/ModelPricing/utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import ModelCostDrawer from '../ModelCostDrawer';
+
+const editDraft = draftFromRule(
+	makePricingRule({
+		id: 'rule-openai',
+		modelName: 'gpt-4o',
+		provider: 'OpenAI',
+	}),
+);
+
+describe('ModelCostDrawer (integration)', () => {
+	it('renders the add title and a save button for a manager', () => {
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="add"
+				initialDraft={EMPTY_DRAFT}
+				onClose={jest.fn()}
+				onSave={jest.fn()}
+				isSaving={false}
+				saveError={null}
+				canManage
+			/>,
+		);
+
+		expect(screen.getByText('Add model cost')).toBeInTheDocument();
+		expect(screen.getByTestId('drawer-save-btn')).toBeInTheDocument();
+	});
+
+	it('disables save until the form is dirty', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="add"
+				initialDraft={EMPTY_DRAFT}
+				onClose={jest.fn()}
+				onSave={jest.fn()}
+				isSaving={false}
+				saveError={null}
+				canManage
+			/>,
+		);
+
+		expect(screen.getByTestId('drawer-save-btn')).toBeDisabled();
+
+		await user.type(screen.getByTestId('drawer-model-id-input'), 'openai:gpt-4o');
+
+		await waitFor(() =>
+			expect(screen.getByTestId('drawer-save-btn')).toBeEnabled(),
+		);
+	});
+
+	it('shows the model id required error and does not call onSave when the name is empty', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onSave = jest.fn();
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="add"
+				initialDraft={EMPTY_DRAFT}
+				onClose={jest.fn()}
+				onSave={onSave}
+				isSaving={false}
+				saveError={null}
+				canManage
+			/>,
+		);
+
+		// Make the form dirty without touching the model id: add a pattern, which
+		// mutates the `patterns` form field while leaving the name empty.
+		await user.type(screen.getByTestId('drawer-pattern-input'), 'gpt');
+		await user.click(screen.getByTestId('drawer-pattern-add-btn'));
+
+		await waitFor(() =>
+			expect(screen.getByTestId('drawer-save-btn')).toBeEnabled(),
+		);
+		await user.click(screen.getByTestId('drawer-save-btn'));
+
+		const error = await screen.findByText('Billing model ID is required.');
+		expect(error).toBeInTheDocument();
+		expect(onSave).not.toHaveBeenCalled();
+	});
+
+	it('calls onSave once on the happy path with valid model id and pricing', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onSave = jest.fn();
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="add"
+				initialDraft={EMPTY_DRAFT}
+				onClose={jest.fn()}
+				onSave={onSave}
+				isSaving={false}
+				saveError={null}
+				canManage
+			/>,
+		);
+
+		await user.type(screen.getByTestId('drawer-model-id-input'), 'openai:gpt-4o');
+		await user.type(screen.getByTestId('drawer-input-cost'), '3');
+		await user.type(screen.getByTestId('drawer-output-cost'), '9');
+
+		await user.click(screen.getByTestId('drawer-save-btn'));
+
+		await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
+	});
+
+	it('renders the edit title with disabled, prefilled model id and disabled provider', () => {
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="edit"
+				initialDraft={editDraft}
+				onClose={jest.fn()}
+				onSave={jest.fn()}
+				isSaving={false}
+				saveError={null}
+				canManage
+			/>,
+		);
+
+		expect(screen.getByText('Edit model cost')).toBeInTheDocument();
+		const modelInput = screen.getByTestId(
+			'drawer-model-id-input',
+		) as HTMLInputElement;
+		expect(modelInput.value).toBe('gpt-4o');
+		expect(modelInput).toBeDisabled();
+		expect(screen.getByTestId('drawer-provider-select')).toBeDisabled();
+	});
+
+	it('renders a read-only view with a Close button and no save for a viewer', () => {
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="edit"
+				initialDraft={editDraft}
+				onClose={jest.fn()}
+				onSave={jest.fn()}
+				isSaving={false}
+				saveError={null}
+				canManage={false}
+			/>,
+		);
+
+		expect(screen.getByText('View model cost')).toBeInTheDocument();
+		expect(screen.queryByTestId('drawer-save-btn')).not.toBeInTheDocument();
+		expect(screen.getByTestId('drawer-cancel-btn')).toHaveTextContent('Close');
+	});
+
+	it('renders the save error text', () => {
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="add"
+				initialDraft={EMPTY_DRAFT}
+				onClose={jest.fn()}
+				onSave={jest.fn()}
+				isSaving={false}
+				saveError="boom"
+				canManage
+			/>,
+		);
+
+		expect(screen.getByText('boom')).toBeInTheDocument();
+	});
+
+	it('adds and removes a model pattern from the editor', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="add"
+				initialDraft={EMPTY_DRAFT}
+				onClose={jest.fn()}
+				onSave={jest.fn()}
+				isSaving={false}
+				saveError={null}
+				canManage
+			/>,
+		);
+
+		await user.type(screen.getByTestId('drawer-pattern-input'), 'gpt-5');
+		await user.click(screen.getByTestId('drawer-pattern-add-btn'));
+		// The added pattern renders as a removable chip.
+		const removeChip = screen.getByRole('button', {
+			name: 'Remove pattern gpt-5',
+		});
+		expect(removeChip).toBeInTheDocument();
+
+		await user.click(removeChip);
+		expect(
+			screen.queryByRole('button', { name: 'Remove pattern gpt-5' }),
+		).not.toBeInTheDocument();
+	});
+
+	it('adds a cache pricing bucket via the picker and removes it', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="add"
+				initialDraft={EMPTY_DRAFT}
+				onClose={jest.fn()}
+				onSave={jest.fn()}
+				isSaving={false}
+				saveError={null}
+				canManage
+			/>,
+		);
+
+		await user.click(screen.getByTestId('drawer-add-bucket-btn'));
+		await user.click(screen.getByTestId('drawer-add-bucket-cache-read'));
+
+		// Adding the bucket reveals its cost input and the shared cache-mode select.
+		expect(screen.getByTestId('drawer-cache-read-cost')).toBeInTheDocument();
+		expect(screen.getByTestId('drawer-cache-mode')).toBeInTheDocument();
+
+		await user.click(screen.getByTestId('drawer-remove-cache-read'));
+		expect(
+			screen.queryByTestId('drawer-cache-read-cost'),
+		).not.toBeInTheDocument();
+	});
+
+	it('blocks save with a pricing error when an override rule has no input cost', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onSave = jest.fn();
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="add"
+				initialDraft={EMPTY_DRAFT}
+				onClose={jest.fn()}
+				onSave={onSave}
+				isSaving={false}
+				saveError={null}
+				canManage
+			/>,
+		);
+
+		// EMPTY_DRAFT defaults to an override with empty pricing. Fill only the
+		// model id + output cost so the form is dirty but the input cost is missing.
+		await user.type(screen.getByTestId('drawer-model-id-input'), 'openai:gpt-4o');
+		await user.type(screen.getByTestId('drawer-output-cost'), '9');
+		await user.click(screen.getByTestId('drawer-save-btn'));
+
+		await expect(
+			screen.findByText('Input cost must be greater than 0.'),
+		).resolves.toBeInTheDocument();
+		expect(onSave).not.toHaveBeenCalled();
+	});
+
+	it('requires confirmation to reset an override rule back to auto', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(
+			<ModelCostDrawer
+				isOpen
+				mode="edit"
+				initialDraft={editDraft}
+				onClose={jest.fn()}
+				onSave={jest.fn()}
+				isSaving={false}
+				saveError={null}
+				canManage
+			/>,
+		);
+
+		// Pricing is editable while the rule is an override.
+		expect(screen.getByTestId('drawer-input-cost')).toBeEnabled();
+
+		// Picking "auto" surfaces a confirm step instead of applying immediately.
+		await user.click(screen.getByTestId('drawer-source-auto'));
+		expect(screen.getByTestId('drawer-reset-confirm-btn')).toBeInTheDocument();
+		expect(screen.getByTestId('drawer-input-cost')).toBeEnabled();
+
+		// Keep backs out of the reset.
+		await user.click(screen.getByTestId('drawer-reset-keep-btn'));
+		expect(
+			screen.queryByTestId('drawer-reset-confirm-btn'),
+		).not.toBeInTheDocument();
+
+		// Confirming the reset flips the rule to auto and locks pricing.
+		await user.click(screen.getByTestId('drawer-source-auto'));
+		await user.click(screen.getByTestId('drawer-reset-confirm-btn'));
+		await waitFor(() =>
+			expect(screen.getByTestId('drawer-input-cost')).toBeDisabled(),
+		);
+	});
+});
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/hooks/useModelCostDrawer.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/hooks/useModelCostDrawer.ts
@@ -6,7 +6,11 @@ import {
 	useCreateOrUpdateLLMPricingRules,
 } from 'api/generated/services/llmpricingrules';

-import { EMPTY_DRAFT } from '../../../../constants';
+import {
+	EMPTY_DRAFT,
+	TOAST_MODEL_COST_ADDED,
+	TOAST_MODEL_COST_UPDATED,
+} from '../../../../constants';
 import type { DrawerDraft, DrawerMode, PricingRule } from '../../../../types';
 import { buildRulePayload, draftFromRule } from '../../../../utils';

@@ -76,7 +80,9 @@ export function useModelCostDrawer(): UseModelCostDrawerResult {
 				await invalidateList();
 				setIsOpen(false);
 				setSelectedRuleId(null);
-				toast.success(mode === 'edit' ? 'Model cost updated' : 'Model cost added');
+				toast.success(
+					mode === 'edit' ? TOAST_MODEL_COST_UPDATED : TOAST_MODEL_COST_ADDED,
+				);
 			} catch (error) {
 				const message = error instanceof Error ? error.message : 'Save failed';
 				setSaveError(message);
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.module.scss
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.module.scss
@@ -1,7 +1,7 @@
 .modelCostsTable {
 	margin-top: var(--spacing-8);
 	--tanstack-table-row-height: 48px;
-	height: calc(100vh - 250px);
+	height: calc(100vh - 170px);
 	overflow-y: auto;

 	:global(table) tbody tr {
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/hooks/useModelCostDelete.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/hooks/useModelCostDelete.ts
@@ -6,6 +6,7 @@ import {
 	useDeleteLLMPricingRule,
 } from 'api/generated/services/llmpricingrules';

+import { TOAST_MODEL_COST_DELETED } from '../../constants';
 import type { PricingRule } from '../../types';

 // The minimal slice of a rule the delete-confirm flow needs: the id to delete
@@ -49,7 +50,7 @@ export function useModelCostDelete(): UseModelCostDeleteResult {
 				queryKey: getListLLMPricingRulesQueryKey(),
 			});
 			setPendingDelete(null);
-			toast.success('Model cost deleted');
+			toast.success(TOAST_MODEL_COST_DELETED);
 		} catch (error) {
 			const message = error instanceof Error ? error.message : 'Delete failed';
 			toast.error(message);
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/tests/fixtures.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/tests/fixtures.ts
@@ -0,0 +1,80 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
+	type ListLLMPricingRules200,
+} from 'api/generated/services/sigNoz.schemas';
+
+import type { PricingRule } from '../types';
+
+// Endpoint glob used by MSW handlers. The generated client hits a relative
+// `/api/v1/llm_pricing_rules`, so the `*` prefix matches regardless of base URL.
+export const LLM_PRICING_ENDPOINT = '*/api/v1/llm_pricing_rules';
+export const LLM_PRICING_RULE_ENDPOINT = '*/api/v1/llm_pricing_rules/:id';
+
+// Builds a valid pricing rule, with overrides merged shallowly. Pricing is
+// replaced wholesale when provided so callers can shape cache buckets freely.
+export function makePricingRule(
+	overrides: Partial<PricingRule> = {},
+): PricingRule {
+	const { pricing, ...rest } = overrides;
+	return {
+		id: 'rule-1',
+		enabled: true,
+		isOverride: true,
+		modelName: 'gpt-4o',
+		modelPattern: ['gpt-4o'],
+		orgId: 'org-1',
+		provider: 'OpenAI',
+		sourceId: 'source-1',
+		unit: UnitDTO.per_million_tokens,
+		createdAt: '2023-10-01T00:00:00.000Z',
+		updatedAt: '2023-10-10T00:00:00.000Z',
+		syncedAt: '2023-10-10T00:00:00.000Z',
+		pricing: {
+			input: 3,
+			output: 9,
+			...pricing,
+		},
+		...rest,
+	};
+}
+
+export const mockRules: PricingRule[] = [
+	makePricingRule({
+		id: 'rule-openai',
+		modelName: 'gpt-4o',
+		provider: 'OpenAI',
+		isOverride: true,
+		pricing: { input: 3, output: 9 },
+	}),
+	makePricingRule({
+		id: 'rule-anthropic',
+		modelName: 'claude-3-5-sonnet',
+		provider: 'Anthropic',
+		isOverride: false,
+		pricing: {
+			input: 2,
+			output: 30,
+			cache: { mode: CacheModeDTO.additive, read: 3, write: 6 },
+		},
+	}),
+];
+
+// Wraps items in the list response envelope the list query reads
+// (`data.data.items` / `data.data.total`).
+export function makeListResponse(
+	items: PricingRule[],
+	total = items.length,
+	offset = 0,
+	limit = 20,
+): ListLLMPricingRules200 {
+	return {
+		status: 'success',
+		data: {
+			items,
+			total,
+			offset,
+			limit,
+		},
+	};
+}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts
@@ -4,6 +4,10 @@ import type { CacheBucketDef, DrawerDraft } from './types';

 export const PAGE_SIZE = 20;

+export const TOAST_MODEL_COST_ADDED = 'Model cost added';
+export const TOAST_MODEL_COST_UPDATED = 'Model cost updated';
+export const TOAST_MODEL_COST_DELETED = 'Model cost deleted';
+
 export const PAGE_KEY = 'page';
 export const LIMIT_KEY = 'limit';
 export const SEARCH_KEY = 'search';
--- a/frontend/src/container/LLMObservability/tests/LLMObservability.test.tsx
+++ b/frontend/src/container/LLMObservability/tests/LLMObservability.test.tsx
@@ -0,0 +1,95 @@
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import ROUTES from 'constants/routes';
+import {
+	LLM_PRICING_ENDPOINT,
+	makeListResponse,
+	mockRules,
+} from 'container/LLMObservability/Settings/ModelPricing/__tests__/fixtures';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import LLMObservability from '../LLMObservability';
+
+function setupList(items = mockRules): void {
+	server.use(
+		rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(makeListResponse(items))),
+		),
+	);
+}
+
+describe('LLMObservability (integration)', () => {
+	beforeEach(() => {
+		window.history.pushState(null, '', '/');
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders the overview panel and the tab bar on the overview route', () => {
+		render(<LLMObservability />, undefined, {
+			initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
+		});
+
+		expect(screen.getByTestId('llm-observability-tabs')).toBeInTheDocument();
+		expect(screen.getByTestId('llm-observability-overview')).toBeInTheDocument();
+		expect(screen.getByText('LLM Observability')).toBeInTheDocument();
+		expect(screen.getByRole('tab', { name: 'Overview' })).toBeInTheDocument();
+		expect(
+			screen.getByRole('tab', { name: 'Model pricing' }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('tab', { name: 'Attribute Mapping' }),
+		).toBeInTheDocument();
+	});
+
+	it('navigates to the configuration route when the Model pricing tab is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<LLMObservability />, undefined, {
+			initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
+		});
+
+		await user.click(screen.getByRole('tab', { name: 'Model pricing' }));
+
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
+		);
+	});
+
+	it('navigates to the attribute mapping route when that tab is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<LLMObservability />, undefined, {
+			initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
+		});
+
+		await user.click(screen.getByRole('tab', { name: 'Attribute Mapping' }));
+
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
+		);
+	});
+
+	it('renders the attribute mapping page on the attribute mapping route', () => {
+		render(<LLMObservability />, undefined, {
+			initialRoute: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
+		});
+
+		expect(
+			screen.getByTestId('llm-observability-attribute-mapping-page'),
+		).toBeInTheDocument();
+	});
+
+	it('renders the model-pricing page on the configuration route', async () => {
+		setupList();
+		render(<LLMObservability />, undefined, {
+			initialRoute: ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
+		});
+
+		await waitFor(() =>
+			expect(
+				screen.getByTestId('llm-observability-model-pricing-page'),
+			).toBeInTheDocument(),
+		);
+	});
+});
--- a/frontend/src/container/LLMObservability/hooks/useLLMObservabilityTabs.tsx
+++ b/frontend/src/container/LLMObservability/hooks/useLLMObservabilityTabs.tsx
@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import { type TabItemProps } from '@signozhq/ui/tabs';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+
+import LLMObservabilityAttributeMapping from '../AttributeMapping/LLMObservabilityAttributeMapping';
+import Overview from '../Overview/Overview';
+import LLMObservabilityModelPricing from '../Settings/ModelPricing/LLMObservabilityModelPricing';
+
+const OVERVIEW_KEY = ROUTES.LLM_OBSERVABILITY_OVERVIEW;
+const CONFIGURATION_KEY = ROUTES.LLM_OBSERVABILITY_CONFIGURATION;
+const ATTRIBUTE_MAPPING_KEY = ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING;
+
+interface UseLLMObservabilityTabsResult {
+	items: TabItemProps[];
+	activeTab: string;
+	onTabChange: (key: string) => void;
+}
+
+// Drives the top-level LLM Observability tabs. Route-driven: the active tab is
+// derived from the pathname (each tab owns a URL) and changing tabs navigates,
+// so tabs stay shareable/back-button friendly while rendering with the SigNoz
+// design-system Tabs.
+export function useLLMObservabilityTabs(): UseLLMObservabilityTabsResult {
+	const { pathname } = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+
+	let activeTab: string = OVERVIEW_KEY;
+	if (pathname.startsWith(CONFIGURATION_KEY)) {
+		activeTab = CONFIGURATION_KEY;
+	} else if (pathname.startsWith(ATTRIBUTE_MAPPING_KEY)) {
+		activeTab = ATTRIBUTE_MAPPING_KEY;
+	}
+
+	const onTabChange = useCallback(
+		(key: string): void => {
+			safeNavigate(key);
+		},
+		[safeNavigate],
+	);
+
+	const items: TabItemProps[] = [
+		{
+			key: OVERVIEW_KEY,
+			label: 'Overview',
+			children: <Overview />,
+		},
+		{
+			key: CONFIGURATION_KEY,
+			label: 'Model pricing',
+			children: <LLMObservabilityModelPricing />,
+		},
+		{
+			key: ATTRIBUTE_MAPPING_KEY,
+			label: 'Attribute Mapping',
+			children: <LLMObservabilityAttributeMapping />,
+		},
+	];
+
+	return { items, activeTab, onTabChange };
+}
--- a/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
+++ b/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
@@ -34,6 +34,7 @@ function LogsPanelComponent({
 	setRequestData,
 	queryResponse,
 	onColumnWidthsChange,
+	hidePagination,
 }: LogsPanelComponentProps): JSX.Element {
 	const [pageSize, setPageSize] = useState<number>(10);
 	const [offset, setOffset] = useState<number>(0);
@@ -158,7 +159,7 @@ function LogsPanelComponent({
 						/>
 					</OverlayScrollbar>
 				</div>
-				{!widget.query.builder.queryData[0].limit && (
+				{!hidePagination && !widget.query.builder.queryData[0].limit && (
 					<div className="controller">
 						<Controls
 							totalCount={totalCount}
@@ -198,6 +199,7 @@ export type LogsPanelComponentProps = {
 	>;
 	widget: Widgets;
 	onColumnWidthsChange?: (widths: Record<string, number>) => void;
+	hidePagination?: boolean;
 };

 export default LogsPanelComponent;
--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
@@ -3,17 +3,36 @@
 	flex-direction: row;

 	.meter-explorer-quick-filters-section {
-		width: 280px;
+		// Width is owned by ResizableBox (inline style).
+		flex-shrink: 0;
 		border-right: 1px solid var(--l1-border);

 		&.hidden {
 			display: none;
 		}
+
+		.resizable-box__content {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.quick-filters-container {
+			flex: 1;
+			min-height: 0;
+		}
 	}

 	.meter-explorer-content-section {
 		width: 100%;

+		// 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);
+
 		.explore-header {
 			display: flex;
 			align-items: center;
@@ -78,7 +97,9 @@

 	&.quick-filters-open {
 		.meter-explorer-content-section {
-			width: calc(100% - 280px);
+			flex: 1;
+			width: auto;
+			min-width: 0;
 		}
 	}

--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
@@ -7,6 +7,7 @@ import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
@@ -18,6 +19,8 @@ import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Filter } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -30,6 +33,10 @@ import { splitQueryIntoOneChartPerQuery } from './utils';

 import './Explorer.styles.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Explorer(): JSX.Element {
 	const {
 		handleRunQuery,
@@ -55,6 +62,16 @@ function Explorer(): JSX.Element {

 	const [showQuickFilters, setShowQuickFilters] = useState(true);

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_METER,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	const defaultQuery = useMemo(
 		() =>
 			updateAllQueriesOperators(
@@ -127,10 +144,19 @@ function Explorer(): JSX.Element {
 					'quick-filters-open': showQuickFilters,
 				})}
 			>
-				<div
+				<ResizableBox
+					handle="right"
+					defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+					initialWidth={quickFiltersInitialWidth}
+					minWidth={QUICK_FILTERS_MIN_WIDTH}
+					maxWidth={QUICK_FILTERS_MAX_WIDTH}
+					onResize={persistQuickFiltersWidth}
+					resetToDefaultOnDoubleClick
+					withHandle
 					className={cx('meter-explorer-quick-filters-section', {
 						hidden: !showQuickFilters,
 					})}
+					handleTestId="quick-filters-resize-handle"
 				>
 					<QuickFilters
 						className="qf-meter-explorer"
@@ -142,7 +168,7 @@ function Explorer(): JSX.Element {
 							setShowQuickFilters(!showQuickFilters);
 						}}
 					/>
-				</div>
+				</ResizableBox>

 				<div className="meter-explorer-content-section">
 					<div className="meter-explorer-explore-content">
--- a/frontend/src/container/MetricsExplorer/Explorer/Explorer.styles.scss
+++ b/frontend/src/container/MetricsExplorer/Explorer/Explorer.styles.scss
@@ -1,6 +1,14 @@
 .metrics-explorer-explore-container {
 	padding-bottom: 80px;

+	// 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);
+
 	.explore-header {
 		display: flex;
 		align-items: center;
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss
@@ -1,4 +1,12 @@
 .dashboard-navigation {
+	// 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);
+
 	.run-query-dashboard-btn {
 		min-width: 180px;
 	}
--- a/frontend/src/container/PanelWrapper/ListPanelWrapper.tsx
+++ b/frontend/src/container/PanelWrapper/ListPanelWrapper.tsx
@@ -9,6 +9,7 @@ function ListPanelWrapper({
 	queryResponse,
 	setRequestData,
 	onColumnWidthsChange,
+	hidePagination,
 }: PanelWrapperProps): JSX.Element {
 	const dataSource = widget.query.builder?.queryData[0]?.dataSource;

@@ -23,6 +24,7 @@ function ListPanelWrapper({
 				queryResponse={queryResponse}
 				setRequestData={setRequestData}
 				onColumnWidthsChange={onColumnWidthsChange}
+				hidePagination={hidePagination}
 			/>
 		);
 	}
@@ -32,6 +34,7 @@ function ListPanelWrapper({
 			queryResponse={queryResponse}
 			setRequestData={setRequestData}
 			onColumnWidthsChange={onColumnWidthsChange}
+			hidePagination={hidePagination}
 		/>
 	);
 }
--- a/frontend/src/container/PanelWrapper/PanelWrapper.tsx
+++ b/frontend/src/container/PanelWrapper/PanelWrapper.tsx
@@ -26,6 +26,7 @@ function PanelWrapper({
 	panelMode,
 	enableDrillDown = false,
 	onColumnWidthsChange,
+	hidePagination,
 }: PanelWrapperProps): JSX.Element {
 	const Component = PanelTypeVsPanelWrapper[
 		selectedGraph || widget.panelTypes
@@ -76,6 +77,7 @@ function PanelWrapper({
 			enableDrillDown={enableDrillDown}
 			onColumnWidthsChange={onColumnWidthsChange}
 			groupByPerQuery={groupByPerQuery}
+			hidePagination={hidePagination}
 		/>
 	);
 }
--- a/frontend/src/container/PanelWrapper/panelWrapper.types.ts
+++ b/frontend/src/container/PanelWrapper/panelWrapper.types.ts
@@ -32,6 +32,7 @@ export type PanelWrapperProps = {
 	panelMode: PanelMode;
 	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 	groupByPerQuery?: Record<string, BaseAutocompleteData[]>;
+	hidePagination?: boolean;
 };

 export type TooltipData = {
--- a/frontend/src/container/PublicDashboardContainer/Panel.tsx
+++ b/frontend/src/container/PublicDashboardContainer/Panel.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import EmptyWidget from 'container/GridCardLayout/EmptyWidget';
@@ -6,11 +6,12 @@ import WidgetGraphComponent from 'container/GridCardLayout/GridCard/WidgetGraphC
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { isEqual } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { DataSource } from 'types/common/queryBuilder';
-import { getGraphType } from 'utils/getGraphType';
 import { getSortedSeriesData } from 'utils/getSortedSeriesData';

+import { getPublicPanelRequestData } from './utils';
+
 function Panel({
 	widget,
 	index,
@@ -27,54 +28,27 @@ function Panel({
 	const graphRef = useRef<HTMLDivElement>(null);
 	const updatedQuery = widget?.query;

-	const requestData: GetQueryResultsProps = useMemo(() => {
-		if (widget.panelTypes !== PANEL_TYPES.LIST) {
-			return {
-				selectedTime: widget?.timePreferance,
-				graphType: getGraphType(widget.panelTypes),
+	// State (not memo) so LIST panels get a setRequestData — ListPanelWrapper
+	// renders nothing without one.
+	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() =>
+		getPublicPanelRequestData({ widget, startTime, endTime }),
+	);
+
+	useEffect(() => {
+		if (!isEqual(updatedQuery, requestData.query)) {
+			setRequestData((prev) => ({
+				...prev,
 				query: updatedQuery,
-				variables: {}, // we are not supporting variables in public dashboards
-				fillGaps: widget.fillSpans,
-				formatForWeb: widget.panelTypes === PANEL_TYPES.TABLE,
-				start: startTime,
-				end: endTime,
-				originalGraphType: widget.panelTypes,
-			};
+			}));
 		}
-
-		const initialDataSource = updatedQuery.builder.queryData[0].dataSource;
-		const updatedQueryForList = {
-			...updatedQuery,
-			builder: {
-				...updatedQuery.builder,
-				queryData: updatedQuery.builder.queryData.map((qd, i) =>
-					i === 0 ? { ...qd, pageSize: 10 } : qd,
-				),
-			},
-		};
-
-		return {
-			query: updatedQueryForList,
-			graphType: PANEL_TYPES.LIST,
-			selectedTime: widget.timePreferance || 'GLOBAL_TIME',
-			tableParams: {
-				pagination: {
-					offset: 0,
-					limit: updatedQuery.builder.queryData[0].limit || 0,
-				},
-				// we do not need select columns in case of logs
-				selectColumns:
-					initialDataSource === DataSource.TRACES && widget.selectedTracesFields,
-			},
-			fillGaps: widget.fillSpans,
-			start: startTime,
-			end: endTime,
-		};
-	}, [widget, updatedQuery, startTime, endTime]);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [updatedQuery]);

 	const queryResponse = useGetQueryRange(
 		{
 			...requestData,
+			start: startTime,
+			end: endTime,
 			originalGraphType: widget?.panelTypes,
 		},
 		ENTITY_VERSION_V5,
@@ -140,6 +114,8 @@ function Panel({
 					headerMenuList={[]}
 					isWarning={false}
 					isFetchingResponse={queryResponse.isFetching || queryResponse.isLoading}
+					setRequestData={setRequestData}
+					hidePagination
 					onDragSelect={onDragSelect}
 				/>
 			)}
--- a/frontend/src/container/PublicDashboardContainer/tests/Panel.test.tsx
+++ b/frontend/src/container/PublicDashboardContainer/tests/Panel.test.tsx
@@ -19,9 +19,14 @@ jest.mock('hooks/queryBuilder/useGetQueryRange', () => ({
 	},
 }));

+const widgetGraphProps = jest.fn();
+
 jest.mock('container/GridCardLayout/GridCard/WidgetGraphComponent', () => ({
 	__esModule: true,
-	default: (): JSX.Element => <div data-testid="widget-graph" />,
+	default: (props: { setRequestData?: unknown }): JSX.Element => {
+		widgetGraphProps(props);
+		return <div data-testid="widget-graph" />;
+	},
 }));

 const buildWidget = (id: string): Widgets =>
@@ -39,6 +44,22 @@ const buildWidget = (id: string): Widgets =>
 describe('Public dashboard Panel', () => {
 	beforeEach(() => {
 		useGetQueryRangeMock.mockClear();
+		widgetGraphProps.mockClear();
+	});
+
+	it('forwards a setRequestData setter so LIST panels render (bug 3646)', () => {
+		render(
+			<Panel
+				widget={buildWidget('widget-a')}
+				index={0}
+				dashboardId="dash-1"
+				startTime={100}
+				endTime={200}
+			/>,
+		);
+
+		const props = widgetGraphProps.mock.calls[0][0];
+		expect(typeof props.setRequestData).toBe('function');
 	});

 	it('keys each panel by widget id + index so identical queries do not collide (bug 5503)', () => {
--- a/frontend/src/container/PublicDashboardContainer/utils.ts
+++ b/frontend/src/container/PublicDashboardContainer/utils.ts
@@ -0,0 +1,53 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { DataSource } from 'types/common/queryBuilder';
+import { getGraphType } from 'utils/getGraphType';
+
+// Builds the useGetQueryRange payload for a public-dashboard panel, mirroring the
+// authenticated GridCard.
+export const getPublicPanelRequestData = ({
+	widget,
+	startTime,
+	endTime,
+}: {
+	widget: Widgets;
+	startTime: number;
+	endTime: number;
+}): GetQueryResultsProps => {
+	const updatedQuery = widget?.query;
+
+	if (widget.panelTypes !== PANEL_TYPES.LIST) {
+		return {
+			selectedTime: widget?.timePreferance,
+			graphType: getGraphType(widget.panelTypes),
+			query: updatedQuery,
+			variables: {}, // we are not supporting variables in public dashboards
+			fillGaps: widget.fillSpans,
+			formatForWeb: widget.panelTypes === PANEL_TYPES.TABLE,
+			start: startTime,
+			end: endTime,
+			originalGraphType: widget.panelTypes,
+		};
+	}
+
+	const initialDataSource = updatedQuery.builder.queryData[0].dataSource;
+
+	return {
+		query: updatedQuery,
+		graphType: PANEL_TYPES.LIST,
+		selectedTime: widget.timePreferance || 'GLOBAL_TIME',
+		tableParams: {
+			pagination: {
+				offset: 0,
+				limit: updatedQuery.builder.queryData[0].limit || 0,
+			},
+			// we do not need select columns in case of logs
+			selectColumns:
+				initialDataSource === DataSource.TRACES && widget.selectedTracesFields,
+		},
+		fillGaps: widget.fillSpans,
+		start: startTime,
+		end: endTime,
+	};
+};
--- a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss
+++ b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss
@@ -31,8 +31,14 @@
 			min-width: 32px;

 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			--periscope-btn-border-color: var(
+				--query-builder-v2-border-color,
+				var(--l2-border)
+			);
+			--periscope-btn-background-color: var(
+				--query-builder-v2-background-color,
+				var(--l2-background)
+			);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}

--- a/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.styles.scss
+++ b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.styles.scss
@@ -27,8 +27,11 @@
 		border-top-left-radius: 0px !important;
 		border-bottom-left-radius: 0px !important;

-		background-color: var(--l1-border) !important;
-		opacity: 0.8;
+		background-color: var(
+			--query-builder-v2-background-color,
+			var(--l2-background)
+		) !important;
+		margin-left: -1px;

 		&:disabled {
 			opacity: 0.4;
@@ -86,8 +89,8 @@
 			border-bottom-left-radius: 3px;

 			.ant-select-selector {
-				border: none;
-				background: var(--l3-background);
+				border: 1px solid var(--query-builder-v2-border-color, none);
+				background: var(--query-builder-v2-background-color, var(--l3-background));
 			}

 			&.showInput {
@@ -101,12 +104,20 @@
 		.query-function-value {
 			width: 70px;
 			border-left: 0;
-			background: var(--l2-background);
+			background: var(--query-builder-v2-background-color, var(--l2-background));
 			border-radius: 0;
 			border: 1px solid transparent;
+			border-top: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border-bottom: 1px solid
+				var(--query-builder-v2-border-color, var(--l2-border));
+			height: 32px;

 			&:focus {
-				border-color: transparent !important;
+				border-color: var(--internal-ant-border-color-focus);
+			}
+
+			&:hover {
+				border-color: var(--internal-ant-border-color-hover);
 			}
 		}

@@ -114,7 +125,7 @@
 			border-top-right-radius: 3px;
 			border-bottom-right-radius: 3px;

-			border-left: 1px solid var(--l2-border);
+			border-left: 1px solid var(--query-builder-v2-border-color, var(--l2-border));

 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts
@@ -203,8 +203,9 @@ export const routesToSkip = [
 	ROUTES.METER_EXPLORER_VIEWS,
 	ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
 	ROUTES.SOMETHING_WENT_WRONG,
-	ROUTES.LLM_OBSERVABILITY_BASE,
-	ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
+	ROUTES.LLM_OBSERVABILITY_OVERVIEW,
+	ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
+	ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
 ];

 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];
--- a/frontend/src/container/TracesTableComponent/TracesTableComponent.tsx
+++ b/frontend/src/container/TracesTableComponent/TracesTableComponent.tsx
@@ -37,6 +37,7 @@ function TracesTableComponent({
 	queryResponse,
 	setRequestData,
 	onColumnWidthsChange,
+	hidePagination,
 }: TracesTableComponentProps): JSX.Element {
 	const [pagination, setPagination] = useState<Pagination>({
 		offset: 0,
@@ -139,34 +140,36 @@ function TracesTableComponent({
 					/>
 				</OverlayScrollbar>
 			</div>
-			<div className="controller">
-				<Controls
-					totalCount={totalCount}
-					perPageOptions={PER_PAGE_OPTIONS}
-					isLoading={queryResponse.isFetching}
-					offset={pagination.offset}
-					countPerPage={pagination.limit}
-					handleNavigatePrevious={(): void => {
-						handlePaginationChange({
-							...pagination,
-							offset: pagination.offset - pagination.limit,
-						});
-					}}
-					handleNavigateNext={(): void => {
-						handlePaginationChange({
-							...pagination,
-							offset: pagination.offset + pagination.limit,
-						});
-					}}
-					handleCountItemsPerPageChange={(value): void => {
-						handlePaginationChange({
-							...pagination,
-							limit: value,
-							offset: 0,
-						});
-					}}
-				/>
-			</div>
+			{!hidePagination && (
+				<div className="controller">
+					<Controls
+						totalCount={totalCount}
+						perPageOptions={PER_PAGE_OPTIONS}
+						isLoading={queryResponse.isFetching}
+						offset={pagination.offset}
+						countPerPage={pagination.limit}
+						handleNavigatePrevious={(): void => {
+							handlePaginationChange({
+								...pagination,
+								offset: pagination.offset - pagination.limit,
+							});
+						}}
+						handleNavigateNext={(): void => {
+							handlePaginationChange({
+								...pagination,
+								offset: pagination.offset + pagination.limit,
+							});
+						}}
+						handleCountItemsPerPageChange={(value): void => {
+							handlePaginationChange({
+								...pagination,
+								limit: value,
+								offset: 0,
+							});
+						}}
+					/>
+				</div>
+			)}
 		</div>
 	);
 }
@@ -178,6 +181,7 @@ export type TracesTableComponentProps = {
 	>;
 	widget: Widgets;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
+	hidePagination?: boolean;
 	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };

--- a/frontend/src/hooks/tests/useLogsData.test.tsx
+++ b/frontend/src/hooks/tests/useLogsData.test.tsx
@@ -0,0 +1,30 @@
+import { renderHook } from '@testing-library/react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { AllTheProviders } from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { useLogsData } from '../useLogsData';
+
+describe('useLogsData', () => {
+	// Public dashboards redact the widget query (orderBy/filter/limit stripped),
+	// so a LIST query can arrive with no orderBy — the hook must not crash on it.
+	it('does not crash when the query has no orderBy', () => {
+		const stagedQuery = {
+			builder: {
+				queryData: [{ dataSource: 'logs', queryName: 'A', disabled: false }],
+			},
+		} as unknown as Query;
+
+		const { result } = renderHook(
+			() =>
+				useLogsData({
+					result: undefined,
+					panelType: PANEL_TYPES.LIST,
+					stagedQuery,
+				}),
+			{ wrapper: AllTheProviders },
+		);
+
+		expect(result.current.logs).toStrictEqual([]);
+	});
+});
--- a/frontend/src/hooks/dynamicVariables/useGetFieldKeys.ts
+++ b/frontend/src/hooks/dynamicVariables/useGetFieldKeys.ts
@@ -30,4 +30,6 @@ export const useGetFieldKeys = ({
 		queryKey: ['fieldKeys', signal, name],
 		queryFn: () => getFieldKeys(signal, name),
 		enabled,
+		// Keep prior keys during a search refetch so the dropdown doesn't blank out.
+		keepPreviousData: true,
 	});
--- a/frontend/src/hooks/useLogsData.ts
+++ b/frontend/src/hooks/useLogsData.ts
@@ -71,7 +71,7 @@ export const useLogsData = ({
 	}, [logs.length, listQuery]);

 	const orderByTimestamp: OrderByPayload | null = useMemo(() => {
-		const timestampOrderBy = listQuery?.orderBy.find(
+		const timestampOrderBy = listQuery?.orderBy?.find(
 			(item) => item.columnName === 'timestamp',
 		);

--- a/frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModal.tsx
+++ b/frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModal.tsx
@@ -1,5 +1,5 @@
 import { DialogWrapper } from '@signozhq/ui/dialog';
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';

 import { useAuthZDevStore } from '../useAuthZDevStore';
 import { useAuthZQueryInvalidation } from '../useAuthZQueryInvalidation';
@@ -8,7 +8,6 @@ import { AuthZDevModalContent } from './AuthZDevModalContent';
 import { AuthZDevModalFooter } from './AuthZDevModalFooter';
 import { AuthZDevModalHeader } from './AuthZDevModalHeader';
 import { useAuthZDevModalData } from './useAuthZDevModalData';
-import { useModalKeyboard } from './useModalKeyboard';

 import styles from './AuthZDevModal.module.css';

@@ -17,7 +16,6 @@ export function AuthZDevModal(): JSX.Element | null {
 	const closeModal = useAuthZDevStore((s) => s.closeModal);
 	const observed = useAuthZDevStore((s) => s.observed);
 	const overrides = useAuthZDevStore((s) => s.overrides);
-	const cycleOverride = useAuthZDevStore((s) => s.cycleOverride);
 	const setOverride = useAuthZDevStore((s) => s.setOverride);
 	const clearAllOverrides = useAuthZDevStore((s) => s.clearAllOverrides);
 	const grantAll = useAuthZDevStore((s) => s.grantAll);
@@ -25,8 +23,6 @@ export function AuthZDevModal(): JSX.Element | null {

 	useAuthZQueryInvalidation(overrides);

-	const searchInputRef = useRef<HTMLInputElement>(null);
-
 	const {
 		search,
 		setSearch,
@@ -37,29 +33,18 @@ export function AuthZDevModal(): JSX.Element | null {
 		filteredPermissions,
 		groups,
 		orderedPermissions,
-		indexByPermission,
 		hasActiveFilter,
 		filteredOverrideCount,
 		overrideCount,
 	} = useAuthZDevModalData(observed, overrides);

-	const { selectedIndex, setSelectedIndex } = useModalKeyboard({
-		permissions: orderedPermissions,
-		overrides,
-		onCycle: cycleOverride,
-		onSetOverride: setOverride,
-		onClose: closeModal,
-		searchInputRef,
-	});
-
 	const handleOpenChange = useCallback(
 		(open: boolean): void => {
 			if (!open) {
 				closeModal();
-				setSelectedIndex(-1);
 			}
 		},
-		[closeModal, setSelectedIndex],
+		[closeModal],
 	);

 	return (
@@ -73,7 +58,6 @@ export function AuthZDevModal(): JSX.Element | null {
 		>
 			<div className={styles.content}>
 				<AuthZDevModalHeader
-					searchInputRef={searchInputRef}
 					search={search}
 					setSearch={setSearch}
 					resourceFilter={resourceFilter}
@@ -91,9 +75,6 @@ export function AuthZDevModal(): JSX.Element | null {
 					observedListLength={observedList.length}
 					orderedPermissions={orderedPermissions}
 					groups={groups}
-					indexByPermission={indexByPermission}
-					selectedIndex={selectedIndex}
-					setSelectedIndex={setSelectedIndex}
 					observed={observed}
 					overrides={overrides}
 					onSetOverride={setOverride}
--- a/frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalContent.tsx
+++ b/frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalContent.tsx
@@ -1,5 +1,4 @@
 import { Typography } from '@signozhq/ui/typography';
-import { useCallback } from 'react';

 import { BrandedPermission } from '../../hooks/useAuthZ/types';
 import { ObservedPermission, OverrideState } from '../types';
@@ -17,9 +16,6 @@ export interface AuthZDevModalContentProps {
 	observedListLength: number;
 	orderedPermissions: string[];
 	groups: PermissionGroup[];
-	indexByPermission: Map<string, number>;
-	selectedIndex: number;
-	setSelectedIndex: (index: number) => void;
 	observed: Record<string, ObservedPermission>;
 	overrides: Record<string, OverrideState>;
 	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
@@ -29,20 +25,10 @@ export function AuthZDevModalContent({
 	observedListLength,
 	orderedPermissions,
 	groups,
-	indexByPermission,
-	selectedIndex,
-	setSelectedIndex,
 	observed,
 	overrides,
 	onSetOverride,
 }: AuthZDevModalContentProps): JSX.Element {
-	const handleSelectIndex = useCallback(
-		(index: number) => (): void => {
-			setSelectedIndex(index);
-		},
-		[setSelectedIndex],
-	);
-
 	return (
 		<div className={styles.list} data-testid="authz-dev-permission-list">
 			{orderedPermissions.length === 0 ? (
@@ -64,19 +50,14 @@ export function AuthZDevModalContent({
 								{group.items.length}
 							</Typography.Text>
 						</div>
-						{group.items.map((permission) => {
-							const index = indexByPermission.get(permission) ?? 0;
-							return (
-								<PermissionRow
-									key={permission}
-									observed={observed[permission]}
-									override={overrides[permission]}
-									isSelected={index === selectedIndex}
-									onSetOverride={onSetOverride}
-									onSelect={handleSelectIndex(index)}
-								/>
-							);
-						})}
+						{group.items.map((permission) => (
+							<PermissionRow
+								key={permission}
+								observed={observed[permission]}
+								override={overrides[permission]}
+								onSetOverride={onSetOverride}
+							/>
+						))}
 					</div>
 				))
 			)}
--- a/frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalFooter.tsx
+++ b/frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalFooter.tsx
@@ -15,32 +15,6 @@ export function AuthZDevModalFooter({
 	return (
 		<div className={styles.footer}>
 			<div className={styles.hint}>
-				<span className={styles.hintGroup}>
-					<Kbd>↑</Kbd>
-					<Kbd>↓</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						navigate
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>←</Kbd>
-					<Kbd>→</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						mode
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>1-5</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						set
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>/</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						search
-					</Typography.Text>
-				</span>
 				<span className={styles.hintGroup}>
 					<Kbd>Esc</Kbd>
 					<Typography.Text as="span" size="small" color="muted">
--- a/frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalHeader.tsx
+++ b/frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalHeader.tsx
@@ -2,14 +2,13 @@ import { Search } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { SelectSimple } from '@signozhq/ui/select';
-import { RefObject, useCallback } from 'react';
+import { useCallback } from 'react';

 import { BrandedPermission } from '../../hooks/useAuthZ/types';

 import styles from './AuthZDevModal.module.css';

 export interface AuthZDevModalHeaderProps {
-	searchInputRef: RefObject<HTMLInputElement>;
 	search: string;
 	setSearch: (value: string) => void;
 	resourceFilter: string;
@@ -25,7 +24,6 @@ export interface AuthZDevModalHeaderProps {
 }

 export function AuthZDevModalHeader({
-	searchInputRef,
 	search,
 	setSearch,
 	resourceFilter,
@@ -56,7 +54,6 @@ export function AuthZDevModalHeader({
 			<div className={styles.searchRow}>
 				<div className={styles.search}>
 					<Input
-						ref={searchInputRef}
 						placeholder="Search permissions..."
 						value={search}
 						onChange={(e): void => setSearch(e.target.value)}
--- a/frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.module.css
+++ b/frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.module.css
@@ -33,11 +33,6 @@
 	border-color: color-mix(in srgb, var(--accent-cherry) 45%, transparent);
 }

-/* Keyboard selection wins over the override border. */
-.permissionRow.isSelected {
-	border-color: var(--primary);
-}
-
 .permissionInfo {
 	display: flex;
 	flex: 1 1 auto;
--- a/frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.tsx
+++ b/frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.tsx
@@ -1,7 +1,7 @@
 import { Badge, BadgeColor } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';

 import type { BrandedPermission } from '../../hooks/useAuthZ/types';
 import { parsePermission } from '../../hooks/useAuthZ/utils';
@@ -14,9 +14,7 @@ import styles from './PermissionRow.module.css';
 type PermissionRowProps = {
 	observed: ObservedPermission;
 	override: OverrideState | undefined;
-	isSelected: boolean;
 	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	onSelect: () => void;
 };

 const ROW_OVERRIDE_CLASSES: Record<OverrideState, string | null> = {
@@ -30,9 +28,7 @@ const ROW_OVERRIDE_CLASSES: Record<OverrideState, string | null> = {
 export const PermissionRow = memo(function PermissionRow({
 	observed,
 	override,
-	isSelected,
 	onSetOverride,
-	onSelect,
 }: PermissionRowProps): JSX.Element {
 	const currentState = override ?? OverrideState.Reset;

@@ -48,14 +44,6 @@ export const PermissionRow = memo(function PermissionRow({
 		};
 	}, [observed.permission]);

-	const handleSetOverride = useCallback(
-		(permission: BrandedPermission, state: OverrideState): void => {
-			onSelect();
-			onSetOverride(permission, state);
-		},
-		[onSelect, onSetOverride],
-	);
-
 	let apiColor: BadgeColor = 'secondary';
 	let apiLabel = 'API ?';
 	if (observed.apiValue === true) {
@@ -68,9 +56,7 @@ export const PermissionRow = memo(function PermissionRow({

 	return (
 		<div
-			className={cx(styles.permissionRow, ROW_OVERRIDE_CLASSES[currentState], {
-				[styles.isSelected]: isSelected,
-			})}
+			className={cx(styles.permissionRow, ROW_OVERRIDE_CLASSES[currentState])}
 			data-testid={`permission-row-${observed.permission}`}
 		>
 			<div className={styles.permissionInfo}>
@@ -106,7 +92,7 @@ export const PermissionRow = memo(function PermissionRow({
 				<OverrideControl
 					permission={observed.permission}
 					value={currentState}
-					onSelect={handleSetOverride}
+					onSelect={onSetOverride}
 				/>
 			</div>
 		</div>
--- a/frontend/src/lib/authz/devtools/AuthZDevModal/useModalKeyboard.ts
+++ b/frontend/src/lib/authz/devtools/AuthZDevModal/useModalKeyboard.ts
@@ -1,174 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { OverrideState, OVERRIDE_CYCLE } from '../types';
-
-type UseModalKeyboardOptions = {
-	permissions: BrandedPermission[];
-	overrides: Record<string, OverrideState>;
-	onCycle: (permission: BrandedPermission) => void;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	onClose: () => void;
-	searchInputRef: React.RefObject<HTMLInputElement | null>;
-};
-
-type UseModalKeyboardResult = {
-	selectedIndex: number;
-	setSelectedIndex: (index: number) => void;
-};
-
-type KeyContext = {
-	permissions: BrandedPermission[];
-	overrides: Record<string, OverrideState>;
-	selectedIndex: number;
-	setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
-	onCycle: (permission: BrandedPermission) => void;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-};
-
-const ARROW_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);
-
-const NUMBER_KEY_INDEX: Record<string, number> = {
-	'1': 0,
-	'2': 1,
-	'3': 2,
-	'4': 3,
-	'5': 4,
-};
-
-function stepOverrideState(
-	current: OverrideState,
-	direction: number,
-): OverrideState {
-	const currentIndex = OVERRIDE_CYCLE.indexOf(current);
-	const nextIndex =
-		(currentIndex + direction + OVERRIDE_CYCLE.length) % OVERRIDE_CYCLE.length;
-	return OVERRIDE_CYCLE[nextIndex];
-}
-
-// Arrow keys stay active even while the search input is focused so the list can
-// be driven without leaving the search field.
-function handleArrowKey(key: string, ctx: KeyContext): void {
-	if (key === 'ArrowDown') {
-		ctx.setSelectedIndex((prev) =>
-			Math.min(prev + 1, ctx.permissions.length - 1),
-		);
-		return;
-	}
-	if (key === 'ArrowUp') {
-		ctx.setSelectedIndex((prev) => Math.max(prev - 1, 0));
-		return;
-	}
-	const selected = ctx.permissions[ctx.selectedIndex];
-	if (!selected) {
-		return;
-	}
-	const direction = key === 'ArrowLeft' ? -1 : 1;
-	ctx.onSetOverride(
-		selected,
-		stepOverrideState(ctx.overrides[selected] ?? OverrideState.Reset, direction),
-	);
-}
-
-// Number and space/enter shortcuts type into the search field, so they only run
-// when it is not focused. Returns whether the key was handled.
-function handleActionKey(key: string, ctx: KeyContext): boolean {
-	const selected = ctx.permissions[ctx.selectedIndex];
-	const numberIndex = NUMBER_KEY_INDEX[key];
-	if (numberIndex !== undefined) {
-		if (selected) {
-			ctx.onSetOverride(selected, OVERRIDE_CYCLE[numberIndex]);
-		}
-		return true;
-	}
-	if (key === ' ' || key === 'Enter') {
-		if (selected) {
-			ctx.onCycle(selected);
-		}
-		return true;
-	}
-	return false;
-}
-
-export function useModalKeyboard({
-	permissions,
-	overrides,
-	onCycle,
-	onSetOverride,
-	onClose,
-	searchInputRef,
-}: UseModalKeyboardOptions): UseModalKeyboardResult {
-	// Start with no selection (-1) to avoid accidental override changes from
-	// Enter keypress that opened the modal also triggering cycleOverride.
-	const [selectedIndex, setSelectedIndex] = useState(-1);
-
-	const handleKeyDown = useCallback(
-		(e: KeyboardEvent) => {
-			const isSearchFocused = document.activeElement === searchInputRef.current;
-
-			if (e.key === 'Escape') {
-				e.preventDefault();
-				onClose();
-				return;
-			}
-
-			if (e.key === '/') {
-				if (!isSearchFocused) {
-					e.preventDefault();
-					searchInputRef.current?.focus();
-				}
-				return;
-			}
-
-			const ctx: KeyContext = {
-				permissions,
-				overrides,
-				selectedIndex,
-				setSelectedIndex,
-				onCycle,
-				onSetOverride,
-			};
-
-			if (ARROW_KEYS.has(e.key)) {
-				e.preventDefault();
-				handleArrowKey(e.key, ctx);
-				return;
-			}
-
-			if (isSearchFocused) {
-				return;
-			}
-
-			if (handleActionKey(e.key, ctx)) {
-				e.preventDefault();
-			}
-		},
-		[
-			permissions,
-			overrides,
-			selectedIndex,
-			onCycle,
-			onSetOverride,
-			onClose,
-			searchInputRef,
-		],
-	);
-
-	useEffect((): (() => void) => {
-		window.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			window.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [handleKeyDown]);
-
-	useEffect((): void => {
-		if (selectedIndex >= permissions.length && permissions.length > 0) {
-			setSelectedIndex(permissions.length - 1);
-		}
-	}, [permissions.length, selectedIndex]);
-
-	return {
-		selectedIndex,
-		setSelectedIndex,
-	};
-}
--- a/frontend/src/pages/AllErrors/AllErrors.styles.scss
+++ b/frontend/src/pages/AllErrors/AllErrors.styles.scss
@@ -20,12 +20,23 @@
 	}

 	&.filter-visible {
+		// Width is owned by ResizableBox (inline style); this section is the
+		// ResizableBox root, so it stays position: relative for the drag handle.
 		.all-errors-quick-filter-section {
-			width: 260px;
+			.resizable-box__content {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.quick-filters-container {
+				flex: 1;
+				min-height: 0;
+			}
 		}

 		.all-errors-right-section {
-			width: calc(100% - 260px);
+			flex: 1;
+			min-width: 0;
 		}
 	}
 }
--- a/frontend/src/pages/AllErrors/index.tsx
+++ b/frontend/src/pages/AllErrors/index.tsx
@@ -18,12 +18,18 @@ import Toolbar from 'container/Toolbar/Toolbar';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';

 import { routes } from './config';
 import { useAllErrorsQueryState } from './QueryStateContext';

 import './AllErrors.styles.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 260;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function AllErrors(): JSX.Element {
 	const { pathname } = useLocation();
 	const { handleRunQuery } = useQueryBuilder();
@@ -55,17 +61,38 @@ function AllErrors(): JSX.Element {
 		setShowFilters((prev) => !prev);
 	};

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_EXCEPTIONS,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	return (
 		<div className={cx('all-errors-page', showFilters ? 'filter-visible' : '')}>
 			{showFilters && (
-				<section className={cx('all-errors-quick-filter-section')}>
+				<ResizableBox
+					handle="right"
+					defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+					initialWidth={quickFiltersInitialWidth}
+					minWidth={QUICK_FILTERS_MIN_WIDTH}
+					maxWidth={QUICK_FILTERS_MAX_WIDTH}
+					onResize={persistQuickFiltersWidth}
+					resetToDefaultOnDoubleClick
+					withHandle
+					className="all-errors-quick-filter-section"
+					handleTestId="quick-filters-resize-handle"
+				>
 					<QuickFilters
 						className="qf-exceptions"
 						source={QuickFiltersSource.EXCEPTIONS}
 						signal={SignalType.EXCEPTIONS}
 						handleFilterVisibilityChange={handleFilterVisibilityChange}
 					/>
-				</section>
+				</ResizableBox>
 			)}
 			<section
 				className={cx(
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.module.scss
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.module.scss
@@ -5,3 +5,9 @@
 	justify-content: flex-end;
 	gap: 12px;
 }
+
+/* Actions / Configure / Edit-as-JSON: a flat l3 outline — no depth/shadow. */
+.toolbarButton {
+	border: 1px solid var(--l3-border) !important;
+	box-shadow: none !important;
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.tsx
@@ -1,4 +1,10 @@
-import { useCallback, useMemo, useState } from 'react';
+import {
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { generatePath } from 'react-router-dom';
 import {
@@ -29,12 +35,15 @@ import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';

 import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
+import DisabledControlTooltip from '../../components/DisabledControlTooltip/DisabledControlTooltip';
+import DisabledMenuItemLabel from '../../components/DisabledMenuItemLabel/DisabledMenuItemLabel';
 import DashboardSettings from '../../DashboardSettings';
 import { useAddSection } from '../../PanelsAndSectionsLayout/Section/hooks/useAddSection';
 import SectionTitleModal from '../../PanelsAndSectionsLayout/Section/SectionTitleModal';
 import JsonEditorDrawer from '../JsonEditorDrawer/JsonEditorDrawer';
 import SettingsDrawer from '../SettingsDrawer';
 import styles from './DashboardActions.module.scss';
+import { DASHBOARD_LOCKED_REASON } from '../../hooks/useDashboardEditGuard';
 import { useDashboardStore } from '../../store/useDashboardStore';

 interface DashboardActionsProps {
@@ -58,7 +67,10 @@ function DashboardActions({
 	onLockToggle,
 	onOpenRename,
 }: DashboardActionsProps): JSX.Element {
-	const canEdit = useDashboardStore((s) => s.isEditable);
+	const canEditDashboard = useDashboardStore((s) => s.canEditDashboard);
+	const isLocked = useDashboardStore((s) => s.isLocked);
+	const settingsRequest = useDashboardStore((s) => s.settingsRequest);
+	const clearSettingsRequest = useDashboardStore((s) => s.clearSettingsRequest);
 	const { user } = useAppContext();
 	const { safeNavigate } = useSafeNavigate();
 	const { showErrorModal } = useErrorModal();
@@ -72,6 +84,14 @@ function DashboardActions({
 	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
 	const deleteDashboardMutation = useDeleteDashboard(dashboard.id);

+	// Open the settings drawer when something in the tree requests it (e.g. the
+	// variables bar's "Add variable" button).
+	useEffect(() => {
+		if (settingsRequest) {
+			setIsSettingsDrawerOpen(true);
+		}
+	}, [settingsRequest]);
+
 	const { addSection, isSaving: isAddingSection } = useAddSection({
 		layouts: dashboard.spec.layouts,
 	});
@@ -111,23 +131,38 @@ function DashboardActions({
 		});
 	}, [deleteDashboardMutation]);

+	// Shown only to edit-permitted users, so the only disabled reason is the lock.
+	const editLabel = useCallback(
+		(text: string): ReactNode =>
+			isLocked ? (
+				<DisabledMenuItemLabel reason={DASHBOARD_LOCKED_REASON}>
+					{text}
+				</DisabledMenuItemLabel>
+			) : (
+				text
+			),
+		[isLocked],
+	);
+
 	const menuItems = useMemo<MenuItem[]>(() => {
 		const dashboardGroup: MenuItem[] = [];
-		if (canEdit) {
+		if (canEditDashboard) {
 			dashboardGroup.push({
 				key: 'rename',
-				label: 'Rename',
+				label: editLabel('Rename'),
 				icon: <PenLine size={14} />,
+				disabled: isLocked,
 				onClick: onOpenRename,
 			});
+			// Clone creates a new dashboard, so it's not lock-gated.
+			dashboardGroup.push({
+				key: 'clone',
+				label: 'Clone dashboard',
+				icon: <Copy size={14} />,
+				disabled: isCloning,
+				onClick: (): void => void handleClone(),
+			});
 		}
-		dashboardGroup.push({
-			key: 'clone',
-			label: 'Clone dashboard',
-			icon: <Copy size={14} />,
-			disabled: isCloning,
-			onClick: (): void => void handleClone(),
-		});
 		if (isAuthor || user.role === USER_ROLES.ADMIN) {
 			dashboardGroup.push({
 				key: 'lock',
@@ -144,16 +179,6 @@ function DashboardActions({
 			onClick: handle.enter,
 		});

-		const layoutGroup: MenuItem[] = [];
-		if (canEdit) {
-			layoutGroup.push({
-				key: 'new-section',
-				label: 'New section',
-				icon: <SquareStack size={14} />,
-				onClick: (): void => setIsNewSectionOpen(true),
-			});
-		}
-
 		const items: MenuItem[] = [
 			{
 				type: 'group',
@@ -162,27 +187,39 @@ function DashboardActions({
 				children: dashboardGroup,
 			},
 		];
-		if (layoutGroup.length > 0) {
+		// Omit the whole Layout group (header included) in view mode.
+		if (canEditDashboard) {
 			items.push({
 				type: 'group',
 				key: 'group-layout',
 				label: 'Layout',
-				children: layoutGroup,
+				children: [
+					{
+						key: 'new-section',
+						label: editLabel('New section'),
+						icon: <SquareStack size={14} />,
+						disabled: isLocked,
+						onClick: (): void => setIsNewSectionOpen(true),
+					},
+				],
 			});
+			items.push(
+				{ type: 'divider', key: 'divider-danger' },
+				{
+					key: 'delete',
+					label: editLabel('Delete dashboard'),
+					icon: <Trash2 size={14} />,
+					danger: true,
+					disabled: isLocked,
+					onClick: (): void => setIsDeleteOpen(true),
+				},
+			);
 		}
-		items.push(
-			{ type: 'divider', key: 'divider-danger' },
-			{
-				key: 'delete',
-				label: 'Delete dashboard',
-				icon: <Trash2 size={14} />,
-				danger: true,
-				onClick: (): void => setIsDeleteOpen(true),
-			},
-		);
 		return items;
 	}, [
-		canEdit,
+		editLabel,
+		canEditDashboard,
+		isLocked,
 		isCloning,
 		isAuthor,
 		user.role,
@@ -201,28 +238,40 @@ function DashboardActions({
 					variant="solid"
 					color="secondary"
 					size="md"
+					className={styles.toolbarButton}
 					prefix={<Grid3X3 size="md" />}
 					testId="options"
 				>
 					Actions
 				</Button>
 			</DropdownMenuSimple>
-			{canEdit && (
+			{canEditDashboard && (
 				<>
-					<Button
-						variant="solid"
-						color="secondary"
-						prefix={<Configure size="md" />}
-						testId="show-drawer"
-						onClick={(): void => setIsSettingsDrawerOpen(true)}
-						size="md"
+					<DisabledControlTooltip
+						reason={DASHBOARD_LOCKED_REASON}
+						disabled={isLocked}
 					>
-						Configure
-					</Button>
+						<Button
+							variant="solid"
+							color="secondary"
+							className={styles.toolbarButton}
+							prefix={<Configure size="md" />}
+							testId="show-drawer"
+							disabled={isLocked}
+							onClick={(): void => setIsSettingsDrawerOpen(true)}
+							size="md"
+						>
+							Configure
+						</Button>
+					</DisabledControlTooltip>
 					<SettingsDrawer
 						drawerTitle="Dashboard Configuration"
 						isOpen={isSettingsDrawerOpen}
-						onClose={(): void => setIsSettingsDrawerOpen(false)}
+						destroyOnClose
+						onClose={(): void => {
+							setIsSettingsDrawerOpen(false);
+							clearSettingsRequest();
+						}}
 					>
 						<DashboardSettings dashboard={dashboard} />
 					</SettingsDrawer>
@@ -231,6 +280,7 @@ function DashboardActions({
 			<Button
 				variant="solid"
 				color="secondary"
+				className={styles.toolbarButton}
 				prefix={<Braces size="md" />}
 				testId="edit-json"
 				onClick={(): void => setIsJsonEditorOpen(true)}
@@ -238,17 +288,23 @@ function DashboardActions({
 			>
 				JSON
 			</Button>
-			{!isDashboardLocked && (
-				<Button
-					variant="solid"
-					color="primary"
-					onClick={onAddPanel}
-					prefix={<Plus size="md" />}
-					testId="add-panel-header"
-					size="md"
+			{canEditDashboard && (
+				<DisabledControlTooltip
+					reason={DASHBOARD_LOCKED_REASON}
+					disabled={isLocked}
 				>
-					New Panel
-				</Button>
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={onAddPanel}
+						prefix={<Plus size="md" />}
+						testId="add-panel-header"
+						disabled={isLocked}
+						size="md"
+					>
+						New Panel
+					</Button>
+				</DisabledControlTooltip>
 			)}
 			<JsonEditorDrawer
 				dashboard={dashboard}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.tsx
@@ -19,6 +19,7 @@ import { openInNewTab } from 'utils/navigation';

 import styles from './DashboardInfo.module.scss';
 import { useVisibleTagCount } from './useVisibleTagCount';
+import { DASHBOARD_NAME_MAX_LENGTH } from '../../constants';
 import { useDashboardStore } from '../../store/useDashboardStore';

 interface DashboardInfoProps {
@@ -99,7 +100,7 @@ function DashboardInfo({
 						autoFocus
 						value={draft}
 						testId="dashboard-title-input"
-						maxLength={120}
+						maxLength={DASHBOARD_NAME_MAX_LENGTH}
 						className={styles.dashboardTitleInput}
 						onChange={(e): void => onDraftChange(e.target.value)}
 						onKeyDown={onKeyDown}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorDrawer.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorDrawer.tsx
@@ -14,6 +14,8 @@ import { defineJsonEditorTheme, JSON_EDITOR_THEME } from './editorTheme';
 import styles from './JsonEditorDrawer.module.scss';
 import JsonEditorToolbar from './JsonEditorToolbar';
 import { useJsonEditor } from './useJsonEditor';
+import DisabledControlTooltip from '../../components/DisabledControlTooltip/DisabledControlTooltip';
+import { useDashboardStore } from '../../store/useDashboardStore';

 interface JsonEditorDrawerProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
@@ -28,6 +30,11 @@ function JsonEditorDrawer({
 }: JsonEditorDrawerProps): JSX.Element {
 	const [, copyToClipboard] = useCopyToClipboard();

+	const isEditable = useDashboardStore((s) => s.isEditable);
+	const readOnlyReason = useDashboardStore((s) => s.editDisabledReason);
+	// Inspect-only when not editable: Apply/Format/Reset disabled.
+	const readOnly = !isEditable;
+
 	const {
 		draft,
 		setDraft,
@@ -39,7 +46,7 @@ function JsonEditorDrawer({
 		format,
 		reset,
 		apply,
-	} = useJsonEditor({ dashboard, isOpen, onApplied: onClose });
+	} = useJsonEditor({ dashboard, isOpen, readOnly, onApplied: onClose });

 	const onCopy = useCallback((): void => {
 		copyToClipboard(draft);
@@ -63,13 +70,15 @@ function JsonEditorDrawer({
 			event.stopPropagation();
 			if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
 				event.preventDefault();
-				void apply();
+				if (!readOnly) {
+					void apply();
+				}
 			}
 		},
-		[apply],
+		[apply, readOnly],
 	);

-	const applyDisabled = !isDirty || !validity.valid || isSaving;
+	const applyDisabled = readOnly || !isDirty || !validity.valid || isSaving;
 	const validationText = validity.valid
 		? `Valid JSON · ${validity.lineCount} lines`
 		: `Line ${validity.errorLine ?? '?'} · ${validity.message ?? 'Invalid JSON'}`;
@@ -150,16 +159,18 @@ function JsonEditorDrawer({
 						>
 							Cancel
 						</Button>
-						<Button
-							variant="solid"
-							color="primary"
-							size="md"
-							testId="json-editor-apply"
-							disabled={applyDisabled}
-							onClick={(): void => void apply()}
-						>
-							Apply changes
-						</Button>
+						<DisabledControlTooltip reason={readOnlyReason} disabled={readOnly}>
+							<Button
+								variant="solid"
+								color="primary"
+								size="md"
+								testId="json-editor-apply"
+								disabled={applyDisabled}
+								onClick={readOnly ? undefined : (): void => void apply()}
+							>
+								Apply changes
+							</Button>
+						</DisabledControlTooltip>
 					</div>
 				</div>
 			}
@@ -168,6 +179,7 @@ function JsonEditorDrawer({
 			<div className={styles.body} onKeyDown={onKeyDown}>
 				<JsonEditorToolbar
 					isDirty={isDirty}
+					readOnly={readOnly}
 					onFormat={format}
 					onCopy={onCopy}
 					onDownload={onDownload}
@@ -180,6 +192,7 @@ function JsonEditorDrawer({
 						value={draft}
 						onChange={(value): void => setDraft(value ?? '')}
 						options={{
+							readOnly,
 							scrollbar: { alwaysConsumeMouseWheel: false },
 							minimap: { enabled: false },
 							fontSize: 13,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorToolbar.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorToolbar.tsx
@@ -5,6 +5,8 @@ import styles from './JsonEditorToolbar.module.scss';

 interface JsonEditorToolbarProps {
 	isDirty: boolean;
+	/** Locked/no-permission — Format and Reset (draft mutators) are disabled. */
+	readOnly?: boolean;
 	onFormat: () => void;
 	onCopy: () => void;
 	onDownload: () => void;
@@ -13,6 +15,7 @@ interface JsonEditorToolbarProps {

 function JsonEditorToolbar({
 	isDirty,
+	readOnly = false,
 	onFormat,
 	onCopy,
 	onDownload,
@@ -26,6 +29,7 @@ function JsonEditorToolbar({
 				size="sm"
 				prefix={<AlignLeft size={14} />}
 				testId="json-editor-format"
+				disabled={readOnly}
 				onClick={onFormat}
 			>
 				Format
@@ -57,7 +61,7 @@ function JsonEditorToolbar({
 				size="sm"
 				prefix={<RotateCcw size={14} />}
 				testId="json-editor-reset"
-				disabled={!isDirty}
+				disabled={readOnly || !isDirty}
 				onClick={onReset}
 			>
 				Reset
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default } from './AttributeMappingHeader';`