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>

frontend/src/AppRoutes/routes.ts

@@ -513,6 +513,13 @@ const routes: AppRoutes[] = [
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
+		exact: true,
+		component: LLMObservabilityPage,
+		key: 'LLM_OBSERVABILITY_ATTRIBUTE_MAPPING',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
 		exact: true,

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;
 		}
 	}
 }

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}

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));
 			}
 		}
 

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;
 					}
 				}
 			}

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;
 		}
 	}
 }

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}

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;
 		}
 	}
 }

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);
 	}

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);
 }

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 {

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 {

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>

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);
+		});
+	});
+});

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) {

frontend/src/constants/routes.ts

@@ -89,6 +89,7 @@ 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_OVERVIEW: '/llm-observability/overview',
 	LLM_OBSERVABILITY_CONFIGURATION: '/llm-observability/configuration',

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 {

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;

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);
+}

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;

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);
+}

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;

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/index.ts

@@ -0,0 +1 @@
+export { default } from './AttributeMappingHeader';

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

@@ -39,6 +39,9 @@ describe('LLMObservability (integration)', () => {
 		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 () => {
@@ -54,6 +57,29 @@ describe('LLMObservability (integration)', () => {
 		);
 	});
 
+	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, {

frontend/src/container/LLMObservability/hooks/useLLMObservabilityTabs.tsx

@@ -4,11 +4,13 @@ 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[];
@@ -24,9 +26,12 @@ export function useLLMObservabilityTabs(): UseLLMObservabilityTabsResult {
 	const { pathname } = useLocation();
 	const { safeNavigate } = useSafeNavigate();
 
-	const activeTab = pathname.startsWith(CONFIGURATION_KEY)
-		? CONFIGURATION_KEY
-		: OVERVIEW_KEY;
+	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 => {
@@ -46,6 +51,11 @@ export function useLLMObservabilityTabs(): UseLLMObservabilityTabsResult {
 			label: 'Model pricing',
 			children: <LLMObservabilityModelPricing />,
 		},
+		{
+			key: ATTRIBUTE_MAPPING_KEY,
+			label: 'Attribute Mapping',
+			children: <LLMObservabilityAttributeMapping />,
+		},
 	];
 
 	return { items, activeTab, onTabChange };

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

@@ -25,6 +25,14 @@
 	.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;

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;

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;
 	}

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);
 		}
 

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;

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -205,6 +205,7 @@ export const routesToSkip = [
 	ROUTES.SOMETHING_WENT_WRONG,
 	ROUTES.LLM_OBSERVABILITY_OVERVIEW,
 	ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
+	ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/pages/LogsExplorer/LogsExplorer.styles.scss

@@ -16,6 +16,14 @@
 		min-height: 0;
 
 		.log-explorer-query-container {
+			// 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);
+
 			display: flex;
 			flex-direction: column;
 			flex: 1;

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/MissingSpansBanner.module.scss

@@ -0,0 +1,25 @@
+.container {
+	// Gutter matches the header/subHeader 16px; bottom gap before the panels.
+	padding: 0 16px 12px;
+}
+
+.title {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	width: 100%;
+}
+
+.link {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	color: inherit;
+	font-weight: 500;
+	white-space: nowrap;
+
+	&:hover {
+		opacity: 0.85;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/MissingSpansBanner.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { Callout } from '@signozhq/ui/callout';
+import { ArrowUpRight } from '@signozhq/icons';
+
+import styles from './MissingSpansBanner.module.scss';
+
+const MISSING_SPANS_DOCS_URL =
+	'https://signoz.io/docs/userguide/traces/#missing-spans';
+
+function MissingSpansBanner(): JSX.Element | null {
+	// Session-only dismissal — not persisted, so the banner returns on reload.
+	const [isDismissed, setIsDismissed] = useState(false);
+
+	if (isDismissed) {
+		return null;
+	}
+
+	// Wrapper owns the gutter: Callout is width:100%, so putting the gutter as a
+	// margin on it would overflow the parent by the margin width. Pad instead.
+	return (
+		<div className={styles.container}>
+			<Callout
+				type="info"
+				size="small"
+				showIcon
+				action="dismissible"
+				onClick={(): void => setIsDismissed(true)}
+				testId="missing-spans-banner"
+				title={
+					<span className={styles.title}>
+						This trace has missing spans
+						<a
+							className={styles.link}
+							href={MISSING_SPANS_DOCS_URL}
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							Learn More <ArrowUpRight size={14} />
+						</a>
+					</span>
+				}
+			/>
+		</div>
+	);
+}
+
+export default MissingSpansBanner;

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -31,6 +31,7 @@ import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
 import { useTraceStore } from '../stores/traceStore';
 import AnalyticsPanel from '../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel';
 import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
+import MissingSpansBanner from './MissingSpansBanner';
 import TraceOptionsMenu from './TraceOptionsMenu';
 
 import styles from './TraceDetailsHeader.module.scss';
@@ -48,6 +49,7 @@ export interface TraceMetadataForHeader {
 	rootServiceName: string;
 	rootServiceEntryPoint: string;
 	rootSpanStatusCode: string;
+	hasMissingSpans: boolean;
 }
 
 interface TraceDetailsHeaderProps {
@@ -229,6 +231,8 @@ function TraceDetailsHeader({
 				</div>
 			)}
 
+			{traceMetadata?.hasMissingSpans && <MissingSpansBanner />}
+
 			<FieldsSelector
 				isOpen={isPreviewFieldsOpen}
 				title="Preview fields"

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.module.scss

@@ -41,6 +41,7 @@
 	:global(.ant-collapse-header) {
 		border-top: 1px solid var(--l2-border);
 		border-bottom: 1px solid var(--l2-border);
+		border-radius: 0 !important;
 	}
 
 	:global(.ant-collapse-content) {
@@ -98,6 +99,13 @@
 	flex-direction: column;
 	overflow: hidden;
 
+	// The flamegraph's ResizableBox above renders a 1px resize handle at its
+	// bottom edge; drop the header's own top border so the two don't stack
+	// into a double border at the flamegraph/waterfall juncture.
+	:global(.ant-collapse-header) {
+		border-top: none;
+	}
+
 	:global(.ant-collapse-item) {
 		flex: 1;
 		display: flex;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.module.scss

@@ -49,59 +49,6 @@
 	flex-direction: column;
 }
 
-.missingSpans {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	height: 44px;
-	margin: 16px;
-	padding: 12px;
-	border-radius: 4px;
-	background: rgba(69, 104, 220, 0.1);
-}
-
-.leftInfo {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.text {
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.rightInfo {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-
-	&:hover {
-		background-color: unset;
-		color: var(--bg-robin-200);
-	}
-}
-
 .splitPanel {
 	flex: 1;
 	min-height: 0;
@@ -125,6 +72,9 @@
 
 .sidebarHeader {
 	flex-shrink: 0;
+	// Matches the body `.sidebar` border-right so the span-name / timeline
+	// divider is continuous from the top of the container through the ruler.
+	border-right: 1px solid var(--l2-border);
 }
 
 .resizeHandleHeader {
@@ -170,7 +120,7 @@
 	overflow-x: auto;
 	overflow-y: hidden;
 	flex-shrink: 0;
-	border-right: 1px solid var(--l1-border);
+	border-right: 1px solid var(--l2-border);
 
 	// ResizableBox child renders with a global `.resizable-box__content` class
 	// — give it independent horizontal scrolling.
@@ -185,6 +135,18 @@
 		scrollbar-width: none;
 	}
 
+	// The drag handle is painted --l2-border by default, which would stack with
+	// our border-right into a 2px divider. Keep it as a hover-only affordance so
+	// the border-right stays the sole 1px divider (matching the header segment).
+	:global(.resizable-box__handle--right) {
+		background: transparent;
+
+		&:hover,
+		&:active {
+			background: var(--primary);
+		}
+	}
+
 	&::-webkit-scrollbar {
 		height: 0.3rem;
 	}
@@ -216,10 +178,12 @@
 
 .treeRow:hover,
 .treeRow.hoveredSpan {
-	border-radius: 4px;
+	// Left end of the row band — round only the outer (left) corners so the
+	// highlight joins the status + timeline segments into one continuous band.
+	border-radius: 4px 0 0 4px;
 	background: color-mix(
 		in srgb,
-		var(--l3-background) 20%,
+		var(--l3-background) 60%,
 		transparent
 	) !important;
 
@@ -262,20 +226,22 @@
 	--badge-border-width: 0px;
 
 	&.hoveredSpan {
-		border-radius: 4px;
+		// Middle segment of the row band — square so it butts up against the
+		// name and timeline segments (no rounded corner at the badge column).
+		border-radius: 0;
 		background: color-mix(
 			in srgb,
-			var(--l3-background) 20%,
+			var(--l3-background) 60%,
 			transparent
 		) !important;
 	}
 
 	&.isInterested,
 	&.isSelectedNonMatching {
-		border-radius: 4px;
+		border-radius: 0;
 		background: color-mix(
 			in srgb,
-			var(--l3-background) 40%,
+			var(--l3-background) 80%,
 			transparent
 		) !important;
 	}
@@ -309,20 +275,21 @@
 
 	&:hover,
 	&.hoveredSpan {
-		border-radius: 4px;
+		// Right end of the row band — round only the outer (right) corners.
+		border-radius: 0 4px 4px 0;
 		background: color-mix(
 			in srgb,
-			var(--l3-background) 20%,
+			var(--l3-background) 60%,
 			transparent
 		) !important;
 	}
 
 	&:has(.isInterested),
 	&:has(.isSelectedNonMatching) {
-		border-radius: 4px;
+		border-radius: 0 4px 4px 0;
 		background: color-mix(
 			in srgb,
-			var(--l3-background) 40%,
+			var(--l3-background) 80%,
 			transparent
 		) !important;
 	}
@@ -345,10 +312,11 @@
 
 	&.isInterested,
 	&.isSelectedNonMatching {
-		border-radius: 4px;
+		// Left end of the row band — outer (left) corners only.
+		border-radius: 4px 0 0 4px;
 		background: color-mix(
 			in srgb,
-			var(--l3-background) 40%,
+			var(--l3-background) 80%,
 			transparent
 		) !important;
 	}
@@ -471,7 +439,7 @@
 	padding-left: 8px;
 	flex-shrink: 0;
 	height: 100%;
-	background: linear-gradient(to left, var(--l1-background) 60%, transparent);
+	background: linear-gradient(to left, var(--l2-background) 40%, transparent);
 	z-index: 2;
 	opacity: 0;
 	pointer-events: none;
@@ -599,6 +567,18 @@
 	opacity: 0.15;
 }
 
+// A dimmed span must still show the full-opacity hover state when hovered.
+// These win over `.isDimmed` on specificity so brightness is restored across
+// the whole row (name column, status cell, and timeline bar) on hover.
+.treeRow:hover .isDimmed,
+.treeRow.hoveredSpan .isDimmed,
+.timelineRow:hover .isDimmed,
+.timelineRow.hoveredSpan .isDimmed,
+.statusCell:hover.isDimmed,
+.statusCell.hoveredSpan.isDimmed {
+	opacity: 1;
+}
+
 .isHighlighted {
 	opacity: 1;
 }

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -33,14 +33,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { colorToRgb } from 'lib/uPlotLib/utils/generateColor';
-import {
-	ArrowUpRight,
-	ChevronDown,
-	ChevronRight,
-	CircleAlert,
-	Link,
-	ListPlus,
-} from '@signozhq/icons';
+import { ChevronDown, ChevronRight, Link, ListPlus } from '@signozhq/icons';
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
 import { resolveSpanColor } from 'pages/TraceDetailsV3/utils';
 import { useBoundaryPagination } from 'pages/TraceDetailsV3/TraceWaterfall/hooks/useBoundaryPagination';
@@ -551,7 +544,9 @@ function Success(props: ISuccessProps): JSX.Element {
 		cursorX,
 		onMouseMove: onCrosshairMove,
 		onMouseLeave: onCrosshairLeave,
-	} = useCrosshair({ containerRef: timelineAreaRef, enabled: false });
+		// Rows are padded 0 15px while `.timeline` spans full width — inset the
+		// crosshair by the same 15px so it aligns with the ruler ticks and bars.
+	} = useCrosshair({ containerRef: timelineAreaRef, insetX: 15 });
 
 	// Imperative DOM class toggling for hover highlights (avoids React re-renders)
 	const applyHoverClass = useCallback((spanId: string | null): void => {
@@ -854,28 +849,6 @@ function Success(props: ISuccessProps): JSX.Element {
 
 	return (
 		<div className={styles.root}>
-			{traceMetadata.hasMissingSpans && (
-				<div className={styles.missingSpans}>
-					<section className={styles.leftInfo}>
-						<CircleAlert size={14} />
-						<span className={styles.text}>This trace has missing spans</span>
-					</section>
-					<Button
-						variant="ghost"
-						color="secondary"
-						className={styles.rightInfo}
-						suffix={<ArrowUpRight size={14} />}
-						onClick={(): WindowProxy | null =>
-							window.open(
-								'https://signoz.io/docs/traces-management/troubleshooting/faqs/#q-why-are-some-spans-missing-from-a-trace',
-								'_blank',
-							)
-						}
-					>
-						Learn More
-					</Button>
-				</div>
-			)}
 			{isFetching && <div className={styles.loadingBar} />}
 			<div className={styles.splitPanel} ref={scrollContainerRef}>
 				{/* Sticky header row */}
@@ -994,8 +967,8 @@ function Success(props: ISuccessProps): JSX.Element {
 										transform: `translateY(${virtualRow.start}px)`,
 									}}
 									data-span-id={span.span_id}
-									onMouseEnter={(): void => handleRowMouseEnter(span.span_id)}
-									onMouseLeave={handleRowMouseLeave}
+									onMouseEnter={(): void => applyHoverClass(span.span_id)}
+									onMouseLeave={(): void => applyHoverClass(null)}
 									onClick={(): void => handleSpanClick(span)}
 								>
 									{span.response_status_code && (

frontend/src/pages/TraceDetailsV3/hooks/__tests__/useCrosshair.test.ts

@@ -0,0 +1,96 @@
+import { act, renderHook } from '@testing-library/react';
+import { RefObject } from 'react';
+
+import { useCrosshair } from '../useCrosshair';
+
+// Container spanning [left, left+width]; getBoundingClientRect is all the hook reads.
+function mockContainer(left: number, width: number): RefObject<HTMLElement> {
+	const el = document.createElement('div');
+	el.getBoundingClientRect = jest.fn(
+		(): DOMRect =>
+			({
+				left,
+				width,
+				top: 0,
+				height: 0,
+				x: left,
+				y: 0,
+				right: left + width,
+				bottom: 0,
+				toJSON: (): Record<string, unknown> => ({}),
+			}) as DOMRect,
+	);
+	return { current: el };
+}
+
+function move(clientX: number): React.MouseEvent {
+	return { clientX } as React.MouseEvent;
+}
+
+describe('useCrosshair', () => {
+	it('maps the cursor to 0 at the container edge with no inset', () => {
+		const containerRef = mockContainer(100, 1000);
+		const { result } = renderHook(() => useCrosshair({ containerRef }));
+
+		act(() => result.current.onMouseMove(move(600)));
+
+		expect(result.current.cursorX).toBe(500);
+		expect(result.current.cursorXPercent).toBeCloseTo(0.5);
+	});
+
+	it('offsets and rescales by insetX so 0% aligns with the content start', () => {
+		const containerRef = mockContainer(100, 1000); // content = [115, 1085], width 970
+		const { result } = renderHook(() =>
+			useCrosshair({ containerRef, insetX: 15 }),
+		);
+
+		// At the content start (left + inset) → 0ms, line sits at the inset.
+		act(() => result.current.onMouseMove(move(115)));
+		expect(result.current.cursorX).toBe(15);
+		expect(result.current.cursorXPercent).toBe(0);
+
+		// Halfway through the 970px content → 50%.
+		act(() => result.current.onMouseMove(move(600)));
+		expect(result.current.cursorX).toBe(500);
+		expect(result.current.cursorXPercent).toBeCloseTo(485 / 970);
+	});
+
+	it('clamps the dead padding zones to [0, 1]', () => {
+		const containerRef = mockContainer(100, 1000);
+		const { result } = renderHook(() =>
+			useCrosshair({ containerRef, insetX: 15 }),
+		);
+
+		// Left of the content (inside the left padding) → clamped to start.
+		act(() => result.current.onMouseMove(move(100)));
+		expect(result.current.cursorX).toBe(15);
+		expect(result.current.cursorXPercent).toBe(0);
+
+		// Right of the content (container right edge) → clamped to end.
+		act(() => result.current.onMouseMove(move(1100)));
+		expect(result.current.cursorXPercent).toBe(1);
+	});
+
+	it('resets on mouse leave', () => {
+		const containerRef = mockContainer(0, 800);
+		const { result } = renderHook(() => useCrosshair({ containerRef }));
+
+		act(() => result.current.onMouseMove(move(400)));
+		expect(result.current.cursorX).not.toBeNull();
+
+		act(() => result.current.onMouseLeave());
+		expect(result.current.cursorX).toBeNull();
+		expect(result.current.cursorXPercent).toBeNull();
+	});
+
+	it('is inert when disabled', () => {
+		const containerRef = mockContainer(0, 800);
+		const { result } = renderHook(() =>
+			useCrosshair({ containerRef, enabled: false }),
+		);
+
+		act(() => result.current.onMouseMove(move(400)));
+		expect(result.current.cursorX).toBeNull();
+		expect(result.current.cursorXPercent).toBeNull();
+	});
+});

frontend/src/pages/TraceDetailsV3/hooks/useCrosshair.ts

@@ -3,6 +3,16 @@ import { RefObject, useCallback, useState } from 'react';
 interface UseCrosshairArgs {
 	containerRef: RefObject<HTMLElement>;
 	enabled?: boolean;
+	/**
+	 * Symmetric horizontal inset (px) of the content (ruler ticks + bars) inside
+	 * the container: shifts the origin right by `insetX` and shrinks the usable
+	 * width by `2 * insetX`. The waterfall pads its rows by 15px while the
+	 * crosshair container spans the full width, so the crosshair must map the
+	 * cursor into that inset content box to line up with 0ms/ticks/bars.
+	 * Flamegraph pads its parent instead, so its container is already the content
+	 * box → 0 (default).
+	 */
+	insetX?: number;
 }
 
 interface UseCrosshairReturn {
@@ -25,6 +35,7 @@ interface UseCrosshairReturn {
 export function useCrosshair({
 	containerRef,
 	enabled = true,
+	insetX = 0,
 }: UseCrosshairArgs): UseCrosshairReturn {
 	const [cursorX, setCursorX] = useState<number | null>(null);
 	const [cursorXPercent, setCursorXPercent] = useState<number | null>(null);
@@ -39,11 +50,18 @@ export function useCrosshair({
 				return;
 			}
 
-			const x = e.clientX - rect.left;
-			setCursorX(x);
-			setCursorXPercent(x / rect.width);
+			// Map the cursor into the inset content box so 0% aligns with the first
+			// tick / bar origin (not the container edge). Clamp so the dead padding
+			// zones don't produce a line/time before 0ms or past the end.
+			const contentWidth = Math.max(1, rect.width - insetX * 2);
+			const xInContent = Math.max(
+				0,
+				Math.min(e.clientX - rect.left - insetX, contentWidth),
+			);
+			setCursorX(xInContent + insetX);
+			setCursorXPercent(xInContent / contentWidth);
 		},
-		[containerRef, enabled],
+		[containerRef, enabled, insetX],
 	);
 
 	const onMouseLeave = useCallback((): void => {

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { ChartNoAxesGantt, TriangleAlert } from '@signozhq/icons';
+import {
+	ChartNoAxesGantt,
+	ChevronDown,
+	ChevronRight,
+	Info,
+	TriangleAlert,
+} from '@signozhq/icons';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import { Collapse } from 'antd';
@@ -34,6 +40,16 @@ import cx from 'classnames';
 
 import styles from './TraceDetailsV3.module.scss';
 
+// Lucide chevrons for the flame/waterfall accordion headers, matching the
+// span-tree chevrons in the waterfall.
+function renderPanelExpandIcon({
+	isActive,
+}: {
+	isActive?: boolean;
+}): JSX.Element {
+	return isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />;
+}
+
 function TraceDetailsV3(): JSX.Element {
 	const { id: traceId } = useParams<TraceDetailV3URLProps>();
 	const urlQuery = useUrlQuery();
@@ -329,6 +345,7 @@ function TraceDetailsV3(): JSX.Element {
 			rootServiceName: payload.rootServiceName,
 			rootServiceEntryPoint: payload.rootServiceEntryPoint,
 			rootSpanStatusCode: rootSpan?.response_status_code || '',
+			hasMissingSpans: payload.hasMissingSpans || false,
 		};
 	}, [traceData?.payload]);
 
@@ -388,6 +405,7 @@ function TraceDetailsV3(): JSX.Element {
 									activeKey={activeKeys.filter((k) => k === 'flame')}
 									onChange={(): void => handleCollapseChange('flame')}
 									size="small"
+									expandIcon={renderPanelExpandIcon}
 									className={styles.flameCollapse}
 									items={[
 										{
@@ -401,7 +419,13 @@ function TraceDetailsV3(): JSX.Element {
 																<WarningPopover
 																	message="The total span count exceeds the visualization limit. Displaying a sampled subset of spans in flamegraph."
 																	placement="bottomLeft"
-																/>
+																>
+																	<Info
+																		size={16}
+																		color="var(--l2-foreground)"
+																		style={{ cursor: 'pointer' }}
+																	/>
+																</WarningPopover>
 															)}
 													</span>
 													{traceData?.payload?.totalSpansCount ? (
@@ -442,6 +466,7 @@ function TraceDetailsV3(): JSX.Element {
 									activeKey={activeKeys.filter((k) => k === 'waterfall')}
 									onChange={(): void => handleCollapseChange('waterfall')}
 									size="small"
+									expandIcon={renderPanelExpandIcon}
 									className={cx(styles.waterfallCollapse, {
 										[styles.isDocked]: isWaterfallDocked,
 									})}

frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss

@@ -67,6 +67,14 @@
 .trace-explorer-page {
 	display: flex;
 
+	// Meant to fix the query builder colors
+	--input-background: var(--l2-background);
+	--input-hover-background: var(--l2-background);
+	--input-focus-background: var(--l2-background);
+	--input-border-color: var(--l2-border);
+	--input-hover-border-color: var(--internal-ant-border-color-hover);
+	--input-focus-border-color: var(--internal-ant-border-color-hover);
+
 	.filter {
 		// Width is owned by ResizableBox (inline style).
 		flex-shrink: 0;

frontend/src/periscope.scss

@@ -13,9 +13,9 @@
 
 	padding: 6px;
 
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--periscope-btn-border-color, var(--l1-border));
 	border-radius: 3px;
-	background: var(--l2-background);
+	background: var(--periscope-btn-background-color, var(--l2-background));
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	color: var(--l2-foreground);
 
@@ -135,11 +135,15 @@
 	display: flex;
 	flex-direction: row;
 	border-radius: 2px 0px 0px 2px;
+	background-color: var(
+		--input-with-label-background-color,
+		var(--l2-background)
+	);
 
 	.label {
 		font-size: 12px;
 
-		color: var(--l2-foreground);
+		color: var(--input-with-label-color, var(--l2-foreground));
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
@@ -153,9 +157,8 @@
 		text-overflow: ellipsis;
 		padding: 0px 8px;
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		color: var(--l1-foreground);
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
@@ -165,7 +168,6 @@
 	.input {
 		flex: 1;
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l1-border);
 		border-right: none;
 		border-left: none;
 		border-top-right-radius: 0px;
@@ -173,7 +175,7 @@
 		border-top-left-radius: 0px;
 		border-bottom-left-radius: 0px;
 
-		background: var(--l1-background);
+		background: var(--input-with-label-background-color, var(--l2-background));
 
 		min-width: 0;
 
@@ -189,21 +191,44 @@
 		}
 
 		.ant-select-selector {
-			border: none;
-			background: var(--l2-background);
+			height: 36px;
+			border-color: var(--input-with-label-border-color, var(--l2-border));
+			background: var(--input-with-label-background-color, var(--l2-background));
+			border-radius: 0;
+			position: relative;
+			margin-left: -1px;
+		}
+
+		.ant-select:hover .ant-select-selector,
+		.ant-select-focused .ant-select-selector {
+			z-index: 1;
+		}
+
+		.ant-select-disabled .ant-select-selector {
+			background: var(
+				--input-with-label-background-color,
+				var(--l2-background)
+			) !important;
 		}
 
 		.ant-select-selection-placeholder {
-			color: var(--l2-foreground);
+			color: var(--input-with-label-color, var(--l2-foreground));
 		}
 	}
 
 	.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;
+		margin-left: -1px;
+		position: relative;
+
+		&:hover,
+		&:focus {
+			z-index: 2;
+		}
 
 		&:focus:not(:focus-visible),
 		&.ant-btn:focus:not(:focus-visible) {

frontend/src/styles.scss

@@ -839,6 +839,9 @@ body.ai-assistant-panel-open {
 	// design libraries.
 	--dropdown-menu-content-z-index: 1050;
 	--dropdown-menu-sub-content-z-index: 1050;
+
+	--internal-ant-border-color-focus: #3a52a8;
+	--internal-ant-border-color-hover: #6e8de8;
 }
 
 div[data-slot='callout'] {

frontend/src/utils/permission/index.ts

@@ -136,6 +136,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	AI_ASSISTANT_ICON_PREVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MCP_SERVER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_ASSISTANT_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
+	LLM_OBSERVABILITY_ATTRIBUTE_MAPPING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LLM_OBSERVABILITY_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LLM_OBSERVABILITY_OVERVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LLM_OBSERVABILITY_CONFIGURATION: ['ADMIN', 'EDITOR', 'VIEWER'],