Merge branch 'main' into nv/dashboard-migration

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

.github/workflows/integrationci.yaml

@@ -48,7 +48,11 @@ jobs:
           - logspipelines
           - passwordauthn
           - preference
-          - querier
+          - querierlogs
+          - queriertraces
+          - queriermetrics
+          - querierscalar
+          - queriercommon
           - rawexportdata
           - role
           - rootuser

docs/api/openapi.yml

@@ -2682,7 +2682,6 @@ components:
         unit:
           type: string
         value:
-          format: double
           type: number
       required:
       - value
@@ -3649,7 +3648,6 @@ components:
         unit:
           type: string
         value:
-          format: double
           type: number
       required:
       - value
@@ -3686,7 +3684,6 @@ components:
         unit:
           type: string
         value:
-          format: double
           type: number
       required:
       - value

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/api/generated/services/sigNoz.schemas.ts

@@ -3395,7 +3395,6 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	unit?: string;
 	/**
 	 * @type number
-	 * @format double
 	 */
 	value: number;
 }
@@ -3923,7 +3922,6 @@ export interface DashboardtypesComparisonThresholdDTO {
 	unit?: string;
 	/**
 	 * @type number
-	 * @format double
 	 */
 	value: number;
 }
@@ -4212,7 +4210,6 @@ export interface DashboardtypesTableThresholdDTO {
 	unit?: string;
 	/**
 	 * @type number
-	 * @format double
 	 */
 	value: number;
 }

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

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 {

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

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

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

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

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

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)', () => {

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

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

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

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

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',
 		);
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.module.scss

@@ -343,6 +343,18 @@
 .searchSelect {
 	width: 240px;
 	flex-shrink: 0;
+
+	// The clear (X) is an SVG, so antd's font-glyph offset mis-centers it — center
+	// it on the row and make it clearly visible.
+	:global(.ant-select-clear) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 0;
+		transform: translateY(-50%);
+		color: var(--l2-foreground);
+		opacity: 1;
+	}
 }
 
 /* Dynamic variable: field | "from" | info | source, retained from V1. */

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import { Check, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
@@ -6,6 +7,7 @@ import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 // eslint-disable-next-line signoz/no-antd-components -- TextArea/Collapse: no @signozhq/ui equivalent
 import { Collapse, Input as AntdInput } from 'antd';
+import { CustomMultiSelect } from 'components/NewSelect';
 
 import type { VariableType } from '../variableFormModel';
 import DynamicVariableFields from './DynamicVariableFields';
@@ -30,9 +32,19 @@ function VariableForm({
 	siblings,
 	isNew,
 	isSaving,
+	panelOptions,
+	appliedPanelIds,
 	onClose,
 	onSave,
 }: VariableFormProps): JSX.Element {
+	// The "apply to panels" selection is transient form state, seeded from the
+	// panels that already reference this variable. Held in a ref so the save
+	// callback (owned by useVariableForm) reads the latest value.
+	const [selectedPanelIds, setSelectedPanelIds] =
+		useState<string[]>(appliedPanelIds);
+	const selectedPanelIdsRef = useRef(selectedPanelIds);
+	selectedPanelIdsRef.current = selectedPanelIds;
+
 	const {
 		model,
 		set,
@@ -54,7 +66,12 @@ function VariableForm({
 		showAllOptionField,
 		payloadVariables,
 		handleSave,
-	} = useVariableForm({ initial, siblings, isNew, onSave });
+	} = useVariableForm({
+		initial,
+		siblings,
+		isNew,
+		onSave: (next): void => onSave(next, selectedPanelIdsRef.current),
+	});
 
 	// Shared list rows (preview/sort/multi/default) for the list-type variables;
 	// rendered as a sibling inside each list-type panel. Only the active panel
@@ -101,6 +118,20 @@ function VariableForm({
 								attributeError={attributeError}
 							/>
 							{listFields}
+							<div className={styles.row}>
+								<div className={styles.labelContainer}>
+									<Typography.Text className={styles.label}>
+										Apply to panels
+									</Typography.Text>
+								</div>
+								<CustomMultiSelect
+									placeholder="Select panels"
+									options={panelOptions}
+									value={selectedPanelIds}
+									onChange={(value): void => setSelectedPanelIds(value as string[])}
+									data-testid="variable-apply-panels"
+								/>
+							</div>
 						</div>
 					</TabsContent>
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableRow.tsx

@@ -3,18 +3,13 @@ import { Check, GripVertical, PenLine, Trash2, X } from '@signozhq/icons';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
 
 import type { VariableFormModel } from './variableFormModel';
 import styles from './Variables.module.scss';
 
-const TYPE_LABEL: Record<VariableFormModel['type'], string> = {
-	QUERY: 'Query',
-	CUSTOM: 'Custom',
-	TEXT: 'Text',
-	DYNAMIC: 'Dynamic',
-};
-
 interface VariableRowProps {
 	variable: VariableFormModel;
 	index: number;
@@ -25,9 +20,11 @@ interface VariableRowProps {
 	onRequestDelete: (index: number) => void;
 	onConfirmDelete: (index: number) => void;
 	onCancelDelete: () => void;
+	/** Apply this variable's filter to all panels. Dynamic variables only. */
+	onApplyToAll: (index: number) => void;
 }
 
-/** A single draggable variable row (drag handle + meta + inline actions). */
+/** A single draggable variable row in the two-column (name / description) table. */
 function VariableRow({
 	variable,
 	index,
@@ -37,6 +34,7 @@ function VariableRow({
 	onRequestDelete,
 	onConfirmDelete,
 	onCancelDelete,
+	onApplyToAll,
 }: VariableRowProps): JSX.Element {
 	const {
 		attributes,
@@ -61,7 +59,7 @@ function VariableRow({
 			className={styles.row}
 			data-testid={`variable-row-${variable.name}`}
 		>
-			<div className={styles.rowMain}>
+			<div className={styles.varCell}>
 				{canEdit ? (
 					<span
 						ref={setActivatorNodeRef}
@@ -74,65 +72,94 @@ function VariableRow({
 					</span>
 				) : null}
 				<Typography.Text className={styles.varName}>
-					${variable.name}
+					{variable.name}
 				</Typography.Text>
-				<span className={styles.typeTag}>{TYPE_LABEL[variable.type]}</span>
+			</div>
+
+			<div className={styles.descCell}>
 				{variable.description ? (
 					<Typography.Text className={styles.varDesc}>
 						{variable.description}
 					</Typography.Text>
+				) : (
+					<span className={styles.varDescEmpty}>—</span>
+				)}
+
+				{canEdit ? (
+					<div
+						className={cx(styles.rowActions, {
+							[styles.rowActionsVisible]: isConfirmingDelete,
+						})}
+					>
+						{isConfirmingDelete ? (
+							<>
+								<Typography.Text className={styles.confirmText}>
+									Delete?
+								</Typography.Text>
+								<Button
+									variant="ghost"
+									color="destructive"
+									size="icon"
+									onClick={(): void => onConfirmDelete(index)}
+									aria-label="Confirm delete"
+									testId={`variable-delete-confirm-${variable.name}`}
+								>
+									<Check size={14} />
+								</Button>
+								<Button
+									variant="ghost"
+									color="secondary"
+									size="icon"
+									onClick={onCancelDelete}
+									aria-label="Cancel delete"
+								>
+									<X size={14} />
+								</Button>
+							</>
+						) : (
+							<>
+								{variable.type === 'DYNAMIC' ? (
+									<TooltipSimple
+										side="top"
+										title="Add this variable as a filter to every panel"
+									>
+										<Button
+											variant="ghost"
+											color="secondary"
+											size="sm"
+											className={styles.applyAllButton}
+											onClick={(): void => onApplyToAll(index)}
+											testId={`variable-apply-all-${variable.name}`}
+										>
+											Apply to all
+										</Button>
+									</TooltipSimple>
+								) : null}
+								<Button
+									variant="ghost"
+									color="secondary"
+									size="icon"
+									onClick={(): void => onEdit(index)}
+									aria-label="Edit variable"
+									testId={`variable-edit-${variable.name}`}
+								>
+									<PenLine size={14} />
+								</Button>
+								<Button
+									variant="ghost"
+									color="secondary"
+									size="icon"
+									onClick={(): void => onRequestDelete(index)}
+									aria-label="Delete variable"
+									testId={`variable-delete-${variable.name}`}
+								>
+									<Trash2 size={14} />
+								</Button>
+							</>
+						)}
+					</div>
 				) : null}
 			</div>
-
-			{canEdit && isConfirmingDelete ? (
-				<div className={styles.rowActions}>
-					<Typography.Text className={styles.confirmText}>Delete?</Typography.Text>
-					<Button
-						variant="ghost"
-						color="destructive"
-						size="icon"
-						onClick={(): void => onConfirmDelete(index)}
-						aria-label="Confirm delete"
-						testId={`variable-delete-confirm-${variable.name}`}
-					>
-						<Check size={14} />
-					</Button>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						onClick={onCancelDelete}
-						aria-label="Cancel delete"
-					>
-						<X size={14} />
-					</Button>
-				</div>
-			) : null}
-
-			{canEdit && !isConfirmingDelete ? (
-				<div className={styles.rowActions}>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						onClick={(): void => onEdit(index)}
-						aria-label="Edit variable"
-						testId={`variable-edit-${variable.name}`}
-					>
-						<PenLine size={14} />
-					</Button>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						onClick={(): void => onRequestDelete(index)}
-						aria-label="Delete variable"
-						testId={`variable-delete-${variable.name}`}
-					>
-						<Trash2 size={14} />
-					</Button>
-				</div>
-			) : null}
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/Variables.module.scss

@@ -4,7 +4,7 @@
 	gap: 16px;
 }
 
-.header {
+.footer {
 	display: flex;
 	justify-content: flex-end;
 	gap: 16px;
@@ -28,69 +28,125 @@
 	color: var(--l2-foreground);
 }
 
+// Two-column (Variable / Description) table matching the V1 variables listing.
+$grid-columns: minmax(0, 2fr) minmax(0, 3fr);
+
+.table {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--l2-border);
+	border-radius: 6px;
+	overflow: hidden;
+}
+
+.headerRow {
+	display: grid;
+	grid-template-columns: $grid-columns;
+	padding: 0 16px;
+	border-bottom: 1px solid var(--l2-border);
+}
+
+.headerCell {
+	padding: 12px 0;
+	font-size: 13px;
+	font-weight: 500;
+	color: var(--l1-foreground);
+
+	&:first-child {
+		padding-right: 16px;
+		border-right: 1px solid var(--l2-border);
+	}
+
+	&:last-child {
+		padding-left: 16px;
+	}
+}
+
 .list {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 }
 
 .row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 10px 12px;
-	border: 1px solid var(--l1-border);
-	border-radius: 4px;
+	position: relative;
+	display: grid;
+	grid-template-columns: $grid-columns;
+	padding: 0 16px;
 	background: var(--l1-background);
+
+	&:not(:last-child) {
+		border-bottom: 1px solid var(--l2-border);
+	}
+
+	&:hover {
+		background: var(--l2-background);
+	}
 }
 
-.rowMain {
+.varCell {
 	display: flex;
-	align-items: center;
-	gap: 10px;
+	align-items: flex-start;
+	gap: 8px;
 	min-width: 0;
+	padding: 12px 16px 12px 0;
+	border-right: 1px solid var(--l2-border);
 }
 
 .dragHandle {
 	display: flex;
 	flex-shrink: 0;
 	align-items: center;
+	margin-top: 1px;
 	color: var(--l3-foreground);
 	cursor: grab;
 	touch-action: none;
 }
 
 .varName {
-	font-weight: 500;
-	color: var(--l1-foreground);
+	min-width: 0;
+	font-family: 'Space Mono', monospace;
+	font-size: 13px;
+	color: var(--bg-robin-400);
+	word-break: break-all;
+}
+
+.descCell {
+	position: relative;
+	min-width: 0;
+	padding: 12px 0 12px 16px;
 }
 
 .varDesc {
-	min-width: 0;
-	overflow: hidden;
-	font-size: 12px;
-	color: var(--l2-foreground);
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	font-family: 'Space Mono', monospace;
+	font-size: 13px;
+	color: var(--bg-sienna-400);
+	white-space: pre-wrap;
+	word-break: break-word;
 }
 
-.typeTag {
-	flex-shrink: 0;
-	padding: 1px 8px;
-	font-size: 11px;
-	letter-spacing: 0.04em;
-	color: var(--l2-foreground);
-	text-transform: uppercase;
-	background: var(--l2-background);
-	border-radius: 10px;
+.varDescEmpty {
+	color: var(--l3-foreground);
 }
 
 .rowActions {
+	position: absolute;
+	top: 8px;
+	right: 0;
 	display: flex;
-	flex-shrink: 0;
 	align-items: center;
 	gap: 2px;
+	padding-left: 16px;
+	background: var(--l2-background);
+	opacity: 0;
+	transition: opacity 120ms ease;
+}
+
+.row:hover .rowActions {
+	opacity: 1;
+}
+
+.rowActionsVisible {
+	opacity: 1;
 }
 
 .confirmText {
@@ -98,3 +154,8 @@
 	font-size: 12px;
 	color: var(--l2-foreground);
 }
+
+.applyAllButton {
+	font-size: 12px;
+	white-space: nowrap;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariablesList.tsx

@@ -25,6 +25,7 @@ interface VariablesListProps {
 	onConfirmDelete: (index: number) => void;
 	onCancelDelete: () => void;
 	onMove: (from: number, to: number) => void;
+	onApplyToAll: (index: number) => void;
 }
 
 function VariablesList({
@@ -36,6 +37,7 @@ function VariablesList({
 	onConfirmDelete,
 	onCancelDelete,
 	onMove,
+	onApplyToAll,
 }: VariablesListProps): JSX.Element {
 	const sensors = useSensors(
 		useSensor(PointerSensor, { activationConstraint: { distance: 1 } }),
@@ -53,32 +55,39 @@ function VariablesList({
 	};
 
 	return (
-		<DndContext
-			sensors={sensors}
-			modifiers={[restrictToVerticalAxis]}
-			onDragEnd={handleDragEnd}
-		>
-			<SortableContext
-				items={variables.map((v) => v.name)}
-				strategy={verticalListSortingStrategy}
+		<div className={styles.table} data-testid="variables-list">
+			<div className={styles.headerRow}>
+				<span className={styles.headerCell}>Variable</span>
+				<span className={styles.headerCell}>Description</span>
+			</div>
+			<DndContext
+				sensors={sensors}
+				modifiers={[restrictToVerticalAxis]}
+				onDragEnd={handleDragEnd}
 			>
-				<div className={styles.list} data-testid="variables-list">
-					{variables.map((variable, index) => (
-						<VariableRow
-							key={variable.name || `variable-${index}`}
-							variable={variable}
-							index={index}
-							canEdit={canEdit}
-							isConfirmingDelete={confirmingIndex === index}
-							onEdit={onEdit}
-							onRequestDelete={onRequestDelete}
-							onConfirmDelete={onConfirmDelete}
-							onCancelDelete={onCancelDelete}
-						/>
-					))}
-				</div>
-			</SortableContext>
-		</DndContext>
+				<SortableContext
+					items={variables.map((v) => v.name)}
+					strategy={verticalListSortingStrategy}
+				>
+					<div className={styles.list}>
+						{variables.map((variable, index) => (
+							<VariableRow
+								key={variable.name || `variable-${index}`}
+								variable={variable}
+								index={index}
+								canEdit={canEdit}
+								isConfirmingDelete={confirmingIndex === index}
+								onEdit={onEdit}
+								onRequestDelete={onRequestDelete}
+								onConfirmDelete={onConfirmDelete}
+								onCancelDelete={onCancelDelete}
+								onApplyToAll={onApplyToAll}
+							/>
+						))}
+					</div>
+				</SortableContext>
+			</DndContext>
+		</div>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/__tests__/applyVariableToPanelsPatch.test.ts

@@ -0,0 +1,231 @@
+import type {
+	DashboardtypesDashboardSpecDTOPanels,
+	DashboardtypesJSONPatchOperationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import {
+	buildApplyVariableToPanelsPatch,
+	buildSyncVariableToPanelsPatch,
+	getPanelIdsReferencingVariable,
+} from '../applyVariableToPanelsPatch';
+
+/** Minimal builder-query panel wrapped in a CompositeQuery, with a given filter. */
+function compositePanel(filterExpression: string): unknown {
+	return {
+		kind: 'panel',
+		spec: {
+			display: { title: '' },
+			plugin: { kind: 'signoz/TimeSeries', spec: {} },
+			queries: [
+				{
+					kind: 'builder_query',
+					spec: {
+						plugin: {
+							kind: 'signoz/CompositeQuery',
+							spec: {
+								queries: [
+									{
+										type: 'builder_query',
+										spec: {
+											name: 'A',
+											signal: 'logs',
+											filter: { expression: filterExpression },
+										},
+									},
+								],
+							},
+						},
+					},
+				},
+			],
+		},
+	};
+}
+
+/** A bare LIST-style BuilderQuery panel (filter lives directly on the plugin spec). */
+function listPanel(filterExpression: string): unknown {
+	return {
+		kind: 'panel',
+		spec: {
+			display: { title: '' },
+			plugin: { kind: 'signoz/List', spec: {} },
+			queries: [
+				{
+					kind: 'builder_query',
+					spec: {
+						plugin: {
+							kind: 'signoz/BuilderQuery',
+							spec: {
+								name: 'A',
+								signal: 'logs',
+								filter: { expression: filterExpression },
+							},
+						},
+					},
+				},
+			],
+		},
+	};
+}
+
+/** A PromQL panel — no builder filter, must be skipped. */
+function promqlPanel(): unknown {
+	return {
+		kind: 'panel',
+		spec: {
+			display: { title: '' },
+			plugin: { kind: 'signoz/TimeSeries', spec: {} },
+			queries: [
+				{
+					kind: 'promql',
+					spec: {
+						plugin: { kind: 'signoz/PromQLQuery', spec: { query: 'up' } },
+					},
+				},
+			],
+		},
+	};
+}
+
+/** Reads the first builder query's filter expression out of a patch op's value. */
+function expressionOf(
+	op: DashboardtypesJSONPatchOperationDTO,
+): string | undefined {
+	const queries = op.value as Array<{
+		spec: { plugin: { kind: string; spec: any } };
+	}>;
+	const { plugin } = queries[0].spec;
+	const builderSpec =
+		plugin.kind === 'signoz/CompositeQuery'
+			? plugin.spec.queries[0].spec
+			: plugin.spec;
+	return builderSpec.filter?.expression;
+}
+
+function panels(
+	map: Record<string, unknown>,
+): DashboardtypesDashboardSpecDTOPanels {
+	return map as DashboardtypesDashboardSpecDTOPanels;
+}
+
+describe('buildApplyVariableToPanelsPatch', () => {
+	it('appends the clause to an existing filter (AND-joined)', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: compositePanel('env = "prod"') }),
+			'service.name',
+			'svc',
+		);
+		expect(ops).toHaveLength(1);
+		expect(ops[0]).toMatchObject({
+			op: 'replace',
+			path: '/spec/panels/p1/spec/queries',
+		});
+		expect(expressionOf(ops[0])).toBe('env = "prod" AND service.name IN $svc');
+	});
+
+	it('sets the clause when the filter is empty', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: compositePanel('') }),
+			'service.name',
+			'svc',
+		);
+		expect(expressionOf(ops[0])).toBe('service.name IN $svc');
+	});
+
+	it('applies to a bare BuilderQuery (LIST) panel', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: listPanel('') }),
+			'k8s.pod.name',
+			'pod',
+		);
+		expect(expressionOf(ops[0])).toBe('k8s.pod.name IN $pod');
+	});
+
+	it('is idempotent — re-applying does not duplicate the clause', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: compositePanel('service.name IN $svc') }),
+			'service.name',
+			'svc',
+		);
+		expect(ops).toHaveLength(0);
+	});
+
+	it('only targets the requested panels', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: compositePanel(''), p2: compositePanel('') }),
+			'service.name',
+			'svc',
+			['p2'],
+		);
+		expect(ops).toHaveLength(1);
+		expect(ops[0].path).toBe('/spec/panels/p2/spec/queries');
+	});
+
+	it('skips PromQL panels (no builder filter)', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: promqlPanel() }),
+			'service.name',
+			'svc',
+		);
+		expect(ops).toHaveLength(0);
+	});
+
+	it('returns nothing when attribute or name is missing', () => {
+		expect(
+			buildApplyVariableToPanelsPatch(
+				panels({ p1: compositePanel('') }),
+				'',
+				'svc',
+			),
+		).toHaveLength(0);
+	});
+});
+
+describe('buildSyncVariableToPanelsPatch', () => {
+	it('adds to selected panels and removes from the rest', () => {
+		const ops = buildSyncVariableToPanelsPatch(
+			panels({
+				p1: compositePanel('service.name IN $svc'), // has it, not selected → remove
+				p2: compositePanel(''), // selected → add
+				p3: compositePanel('service.name IN $svc'), // has it, selected → unchanged
+			}),
+			'service.name',
+			'svc',
+			['p2', 'p3'],
+		);
+		const byPath = Object.fromEntries(ops.map((op) => [op.path, op]));
+		expect(Object.keys(byPath).sort()).toStrictEqual([
+			'/spec/panels/p1/spec/queries',
+			'/spec/panels/p2/spec/queries',
+		]);
+		expect(expressionOf(byPath['/spec/panels/p1/spec/queries'])).toBe('');
+		expect(expressionOf(byPath['/spec/panels/p2/spec/queries'])).toBe(
+			'service.name IN $svc',
+		);
+	});
+
+	it('removing keeps other clauses intact', () => {
+		const ops = buildSyncVariableToPanelsPatch(
+			panels({ p1: compositePanel('env = "prod" AND service.name IN $svc') }),
+			'service.name',
+			'svc',
+			[],
+		);
+		expect(expressionOf(ops[0])).toBe('env = "prod"');
+	});
+});
+
+describe('getPanelIdsReferencingVariable', () => {
+	it('returns only panels whose filter references the variable', () => {
+		const ids = getPanelIdsReferencingVariable(
+			panels({
+				p1: compositePanel('service.name IN $svc'),
+				p2: compositePanel('env = "prod"'),
+				p3: listPanel('service.name IN $svc'),
+			}),
+			'service.name',
+			'svc',
+		);
+		expect(ids.sort()).toStrictEqual(['p1', 'p3']);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/applyVariableToPanelsPatch.ts

@@ -0,0 +1,179 @@
+import type {
+	DashboardtypesDashboardSpecDTOPanels,
+	DashboardtypesJSONPatchOperationDTO,
+	DashboardtypesQueryDTO,
+	Querybuildertypesv5BuilderQuerySpecDTO,
+	Querybuildertypesv5CompositeQueryDTO,
+	Querybuildertypesv5QueryEnvelopeBuilderDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { cloneDeep } from 'lodash-es';
+
+// Injects/removes a dynamic variable's filter (`attribute IN $name`) in panel
+// builder queries as JSON-Patch ops. Only builder queries carry a filter.
+
+function clauseFor(attribute: string, variableName: string): string {
+	return `${attribute} IN $${variableName}`;
+}
+
+/** Runs `fn` on every builder-query spec in a panel's single query (Composite or bare Builder). */
+function forEachBuilderSpec(
+	queries: DashboardtypesQueryDTO[],
+	fn: (spec: Querybuildertypesv5BuilderQuerySpecDTO) => void,
+): void {
+	const plugin = queries[0]?.spec?.plugin;
+	if (!plugin?.spec) {
+		return;
+	}
+	if (plugin.kind === 'signoz/CompositeQuery') {
+		const composite = plugin.spec as Querybuildertypesv5CompositeQueryDTO;
+		(composite.queries ?? [])
+			.filter((envelope) => envelope.type === 'builder_query')
+			.forEach((envelope) => {
+				const { spec } = envelope as Querybuildertypesv5QueryEnvelopeBuilderDTO;
+				if (spec) {
+					fn(spec as Querybuildertypesv5BuilderQuerySpecDTO);
+				}
+			});
+	} else if (plugin.kind === 'signoz/BuilderQuery') {
+		fn(plugin.spec as Querybuildertypesv5BuilderQuerySpecDTO);
+	}
+}
+
+/** Appends the clause to every builder query's filter. Returns whether anything changed. */
+function addClause(queries: DashboardtypesQueryDTO[], clause: string): boolean {
+	let changed = false;
+	forEachBuilderSpec(queries, (spec) => {
+		const existing = spec.filter?.expression?.trim();
+		// Idempotent: a repeated apply must not stack duplicate clauses.
+		if (existing?.includes(clause)) {
+			return;
+		}
+		spec.filter = {
+			expression: existing ? `${existing} AND ${clause}` : clause,
+		};
+		changed = true;
+	});
+	return changed;
+}
+
+/** Removes the managed clause (an ` AND `-joined part) from every builder filter. */
+function removeClause(
+	queries: DashboardtypesQueryDTO[],
+	clause: string,
+): boolean {
+	let changed = false;
+	forEachBuilderSpec(queries, (spec) => {
+		const existing = spec.filter?.expression;
+		if (!existing) {
+			return;
+		}
+		const parts = existing
+			.split(' AND ')
+			.map((part) => part.trim())
+			.filter(Boolean);
+		const kept = parts.filter((part) => part !== clause);
+		if (kept.length !== parts.length) {
+			spec.filter = { expression: kept.join(' AND ') };
+			changed = true;
+		}
+	});
+	return changed;
+}
+
+/** Whether any builder query in the panel already carries the clause. */
+function panelHasClause(
+	queries: DashboardtypesQueryDTO[],
+	clause: string,
+): boolean {
+	let has = false;
+	forEachBuilderSpec(queries, (spec) => {
+		if (spec.filter?.expression?.includes(clause)) {
+			has = true;
+		}
+	});
+	return has;
+}
+
+function replaceQueriesOp(
+	panelId: string,
+	queries: DashboardtypesQueryDTO[],
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+		path: `/spec/panels/${panelId}/spec/queries`,
+		value: queries,
+	};
+}
+
+/** Add-only: inject the variable's filter into the given panels (default: all). */
+export function buildApplyVariableToPanelsPatch(
+	panels: DashboardtypesDashboardSpecDTOPanels,
+	attribute: string,
+	variableName: string,
+	targetPanelIds?: string[],
+): DashboardtypesJSONPatchOperationDTO[] {
+	if (!attribute || !variableName) {
+		return [];
+	}
+	const clause = clauseFor(attribute, variableName);
+	const ids = targetPanelIds ?? Object.keys(panels);
+
+	const ops: DashboardtypesJSONPatchOperationDTO[] = [];
+	ids.forEach((id) => {
+		const panel = panels[id];
+		if (!panel?.spec?.queries?.length) {
+			return;
+		}
+		const queries = cloneDeep(panel.spec.queries);
+		if (addClause(queries, clause)) {
+			ops.push(replaceQueriesOp(id, queries));
+		}
+	});
+	return ops;
+}
+
+/** Full sync: selected panels get the clause; every other panel has it removed. */
+export function buildSyncVariableToPanelsPatch(
+	panels: DashboardtypesDashboardSpecDTOPanels,
+	attribute: string,
+	variableName: string,
+	selectedPanelIds: string[],
+): DashboardtypesJSONPatchOperationDTO[] {
+	if (!attribute || !variableName) {
+		return [];
+	}
+	const clause = clauseFor(attribute, variableName);
+	const selected = new Set(selectedPanelIds);
+
+	const ops: DashboardtypesJSONPatchOperationDTO[] = [];
+	Object.keys(panels).forEach((id) => {
+		const panel = panels[id];
+		if (!panel?.spec?.queries?.length) {
+			return;
+		}
+		const queries = cloneDeep(panel.spec.queries);
+		const changed = selected.has(id)
+			? addClause(queries, clause)
+			: removeClause(queries, clause);
+		if (changed) {
+			ops.push(replaceQueriesOp(id, queries));
+		}
+	});
+	return ops;
+}
+
+/** Panel ids whose queries currently reference the variable — pre-populates the picker. */
+export function getPanelIdsReferencingVariable(
+	panels: DashboardtypesDashboardSpecDTOPanels,
+	attribute: string,
+	variableName: string,
+): string[] {
+	if (!attribute || !variableName) {
+		return [];
+	}
+	const clause = clauseFor(attribute, variableName);
+	return Object.keys(panels).filter((id) => {
+		const queries = panels[id]?.spec?.queries;
+		return queries?.length ? panelHasClause(queries, clause) : false;
+	});
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/ApplyToAllDialog/ApplyToAllDialog.module.scss

@@ -0,0 +1,16 @@
+.body {
+	font-size: 13px;
+	line-height: 20px;
+	color: var(--l2-foreground);
+}
+
+.variableName {
+	font-family: 'Space Mono', monospace;
+	color: var(--bg-robin-400);
+}
+
+.footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/ApplyToAllDialog/ApplyToAllDialog.tsx

@@ -0,0 +1,67 @@
+import { Check, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+
+import styles from './ApplyToAllDialog.module.scss';
+
+interface ApplyToAllDialogProps {
+	open: boolean;
+	variableName: string;
+	isLoading: boolean;
+	onConfirm: () => void;
+	onClose: () => void;
+}
+
+/** Confirms applying a dynamic variable as a filter to every panel. */
+function ApplyToAllDialog({
+	open,
+	variableName,
+	isLoading,
+	onConfirm,
+	onClose,
+}: ApplyToAllDialogProps): JSX.Element {
+	const footer = (
+		<div className={styles.footer}>
+			<Button variant="solid" color="secondary" onClick={onClose}>
+				<X size={12} />
+				Cancel
+			</Button>
+			<Button
+				variant="solid"
+				color="primary"
+				loading={isLoading}
+				onClick={onConfirm}
+				testId="confirm-apply-to-all"
+			>
+				<Check size={12} />
+				Apply to all
+			</Button>
+		</div>
+	);
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			title="Apply variable to all panels"
+			width="narrow"
+			showCloseButton={false}
+			// Lift above the settings drawer (z ~1000); overlay off (it would only half-dim).
+			style={{ zIndex: 1100 }}
+			showOverlay={false}
+			footer={footer}
+		>
+			<div className={styles.body}>
+				Add <span className={styles.variableName}>${variableName}</span> as a filter
+				to every panel on this dashboard. Panels that already reference it are left
+				unchanged.
+			</div>
+		</DialogWrapper>
+	);
+}
+
+export default ApplyToAllDialog;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/index.tsx

@@ -1,9 +1,16 @@
 import { useEffect, useMemo, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 
 import settingsStyles from '../DashboardSettings.module.scss';
+import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
 import { useDashboardStore } from '../../store/useDashboardStore';
+import {
+	buildApplyVariableToPanelsPatch,
+	buildSyncVariableToPanelsPatch,
+	getPanelIdsReferencingVariable,
+} from './applyVariableToPanelsPatch';
 import { useSaveVariables } from './useSaveVariables';
 import { dtoToFormModel } from './variableAdapters';
 import {
@@ -14,6 +21,7 @@ import VariableForm from './VariableForm/VariableForm';
 import VariablesList from './VariablesList';
 import styles from './Variables.module.scss';
 import AddVariableButton from './components/AddVariableButton';
+import ApplyToAllDialog from './components/ApplyToAllDialog/ApplyToAllDialog';
 import NoVariablesCard from './components/NoVariablesCard/NoVariablesCard';
 import { EditingState } from './types';
 
@@ -29,6 +37,7 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		(s) => s.settingsRequest?.addVariable ?? false,
 	);
 	const { save, isSaving } = useSaveVariables();
+	const { patchAsync, isPatching } = useOptimisticPatch();
 
 	const initialFormModels = useMemo(
 		() => dashboard.spec.variables.map(dtoToFormModel),
@@ -49,6 +58,7 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 	const [confirmDeleteIndex, setConfirmDeleteIndex] = useState<number | null>(
 		null,
 	);
+	const [applyToAllIndex, setApplyToAllIndex] = useState<number | null>(null);
 
 	const editingFormModel: VariableFormModel | null = useMemo(() => {
 		if (!isEditing) {
@@ -64,20 +74,64 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		return variables.filter((_, i) => i !== self);
 	}, [variables, isEditing]);
 
+	const panelOptions = useMemo(
+		() =>
+			Object.entries(dashboard.spec.panels ?? {}).map(([id, panel]) => ({
+				value: id,
+				label: panel.spec?.display?.name || id,
+			})),
+		[dashboard.spec.panels],
+	);
+
+	// Panels the edited variable is already applied to — pre-checks the picker.
+	const appliedPanelIds = useMemo(() => {
+		if (!editingFormModel || editingFormModel.type !== 'DYNAMIC') {
+			return [];
+		}
+		return getPanelIdsReferencingVariable(
+			dashboard.spec.panels,
+			editingFormModel.dynamicAttribute,
+			editingFormModel.name,
+		);
+	}, [editingFormModel, dashboard.spec.panels]);
+
 	const persist = (next: VariableFormModel[]): void => {
 		setVariables(next);
 		void save(next);
 	};
 
-	const handleFormSave = (Formmodel: VariableFormModel): void => {
+	const handleFormSave = (
+		formModel: VariableFormModel,
+		selectedPanelIds: string[],
+	): void => {
 		const next = [...variables];
 		if (isEditing?.type === 'new') {
-			next.push(Formmodel);
+			next.push(formModel);
 		} else if (isEditing?.type === 'edit') {
-			next[isEditing.index] = Formmodel;
+			next[isEditing.index] = formModel;
 		}
 		setIsEditing(null);
-		persist(next);
+		setVariables(next);
+		void (async (): Promise<void> => {
+			const saved = await save(next);
+			if (!saved || formModel.type !== 'DYNAMIC') {
+				return;
+			}
+			const ops = buildSyncVariableToPanelsPatch(
+				dashboard.spec.panels,
+				formModel.dynamicAttribute,
+				formModel.name,
+				selectedPanelIds,
+			);
+			if (ops.length === 0) {
+				return;
+			}
+			try {
+				await patchAsync(ops);
+			} catch {
+				toast.error('Could not update panels');
+			}
+		})();
 	};
 
 	const handleMove = (from: number, to: number): void => {
@@ -95,6 +149,32 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		setConfirmDeleteIndex(null);
 	};
 
+	const applyToAllVariable =
+		applyToAllIndex === null ? null : variables[applyToAllIndex];
+
+	const handleConfirmApplyToAll = async (): Promise<void> => {
+		if (!applyToAllVariable) {
+			return;
+		}
+		const ops = buildApplyVariableToPanelsPatch(
+			dashboard.spec.panels,
+			applyToAllVariable.dynamicAttribute,
+			applyToAllVariable.name,
+		);
+		if (ops.length === 0) {
+			toast.info('No panels needed this filter.');
+			setApplyToAllIndex(null);
+			return;
+		}
+		try {
+			await patchAsync(ops);
+			toast.success(`Applied $${applyToAllVariable.name} to all panels`);
+		} catch {
+			toast.error('Could not apply the variable to panels');
+		}
+		setApplyToAllIndex(null);
+	};
+
 	if (editingFormModel) {
 		return (
 			<VariableForm
@@ -102,6 +182,8 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 				siblings={siblings}
 				isNew={isEditing?.type === 'new'}
 				isSaving={isSaving}
+				panelOptions={panelOptions}
+				appliedPanelIds={appliedPanelIds}
 				onClose={(): void => setIsEditing(null)}
 				onSave={handleFormSave}
 			/>
@@ -115,9 +197,6 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 				<NoVariablesCard isEditable={isEditable} setIsEditing={setIsEditing} />
 			) : (
 				<>
-					<div className={styles.header}>
-						<AddVariableButton isEditable={isEditable} setIsEditing={setIsEditing} />
-					</div>
 					<VariablesList
 						variables={variables}
 						canEdit={isEditable}
@@ -127,9 +206,20 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 						onConfirmDelete={handleConfirmDelete}
 						onCancelDelete={(): void => setConfirmDeleteIndex(null)}
 						onMove={handleMove}
+						onApplyToAll={(index): void => setApplyToAllIndex(index)}
 					/>
+					<div className={styles.footer}>
+						<AddVariableButton isEditable={isEditable} setIsEditing={setIsEditing} />
+					</div>
 				</>
 			)}
+			<ApplyToAllDialog
+				open={applyToAllVariable !== null}
+				variableName={applyToAllVariable?.name ?? ''}
+				isLoading={isPatching}
+				onConfirm={(): void => void handleConfirmApplyToAll()}
+				onClose={(): void => setApplyToAllIndex(null)}
+			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/types.ts

@@ -6,6 +6,11 @@ export type EditingState =
 	| { type: 'edit'; index: number }
 	| null;
 
+export interface PanelOption {
+	label: string;
+	value: string;
+}
+
 export interface VariableFormProps {
 	initial: VariableFormModel;
 	/** The other variables (excluding this one), for uniqueness & cycle checks. */
@@ -13,6 +18,10 @@ export interface VariableFormProps {
 	/** True when adding a new variable (enables auto-naming from the attribute). */
 	isNew: boolean;
 	isSaving: boolean;
+	/** All panels, for the dynamic "apply to panels" picker. */
+	panelOptions: PanelOption[];
+	/** Panels this variable is already applied to — pre-checks the picker. */
+	appliedPanelIds: string[];
 	onClose: () => void;
-	onSave: (model: VariableFormModel) => void;
+	onSave: (model: VariableFormModel, selectedPanelIds: string[]) => void;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters.ts

@@ -14,6 +14,7 @@ import type {
 
 import {
 	DYNAMIC_SIGNAL_ALL,
+	DYNAMIC_SIGNALS,
 	type DynamicSignalOption,
 	emptyVariableFormModel,
 	signalForApi,
@@ -68,9 +69,12 @@ export function dtoToFormModel(
 			...listCommon,
 			type: 'DYNAMIC',
 			dynamicAttribute: plugin.spec.name ?? '',
-			// An omitted wire signal means "all telemetry".
-			dynamicSignal:
-				(plugin.spec.signal as DynamicSignalOption) ?? DYNAMIC_SIGNAL_ALL,
+			// Unrecognized/empty signal → "all telemetry", so the source always shows.
+			dynamicSignal: DYNAMIC_SIGNALS.includes(
+				plugin.spec.signal as DynamicSignalOption,
+			)
+				? (plugin.spec.signal as DynamicSignalOption)
+				: DYNAMIC_SIGNAL_ALL,
 		};
 	}
 	// Default to Query (also covers a query plugin or a missing/unknown plugin).

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -146,9 +146,14 @@ function BarPanelRenderer({
 
 	const renderTooltipFooter = useCallback(
 		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
-			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
+			<TooltipFooter
+				id={panelId}
+				isPinned={isPinned}
+				canDrilldown={!!enableDrillDown}
+				dismiss={dismiss}
+			/>
 		),
-		[panelId],
+		[panelId, enableDrillDown],
 	);
 
 	// Keying on sync prefs forces a full chart teardown/re-mount so stale sync

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/__tests__/prepareData.test.ts

@@ -127,4 +127,37 @@ describe('preparePieData', () => {
 	it('returns no slices for empty tables', () => {
 		expect(preparePieData(args([]))).toStrictEqual([]);
 	});
+
+	it('carries the value column query name and group-by labels for drilldown', () => {
+		const table = tableWith(
+			[
+				{
+					name: 'service.name',
+					queryName: 'A',
+					isValueColumn: false,
+					id: 'service.name',
+				},
+				{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' },
+			],
+			[{ data: { 'service.name': 'adservice', A: 100 } }],
+		);
+
+		const [slice] = preparePieData(args([table]));
+
+		expect(slice.queryName).toBe('A');
+		expect(slice.labels).toStrictEqual({ 'service.name': 'adservice' });
+	});
+
+	it('leaves labels empty for an ungrouped slice', () => {
+		const table = tableWith(
+			[{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' }],
+			[{ data: { A: 42 } }],
+			{ legend: 'requests' },
+		);
+
+		const [slice] = preparePieData(args([table]));
+
+		expect(slice.queryName).toBe('A');
+		expect(slice.labels).toStrictEqual({});
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData.ts

@@ -37,6 +37,15 @@ export function preparePieData({
 				.map(String)
 				.join(', ');
 
+			// Group-by key→value, keyed by field name for drilldown filters (`enrichPieClick`).
+			const labels: Record<string, string> = {};
+			labelColumns.forEach((column) => {
+				const value = row.data[column.id || column.name];
+				if (value != null) {
+					labels[column.name] = String(value as string | number);
+				}
+			});
+
 			valueColumns.forEach((column) => {
 				let label: string;
 				if (hasMultipleValueColumns) {
@@ -50,6 +59,8 @@ export function preparePieData({
 					label,
 					value: Number(row.data[column.id || column.name]),
 					color,
+					queryName: column.queryName,
+					labels,
 				});
 			});
 		});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx

@@ -147,9 +147,14 @@ function TimeSeriesPanelRenderer({
 
 	const renderTooltipFooter = useCallback(
 		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
-			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
+			<TooltipFooter
+				id={panelId}
+				isPinned={isPinned}
+				canDrilldown={!!enableDrillDown}
+				dismiss={dismiss}
+			/>
 		),
-		[panelId],
+		[panelId, enableDrillDown],
 	);
 
 	// Keying on sync prefs forces a full chart teardown/re-mount so stale sync

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -27,6 +27,11 @@ function PanelTypeSelectionModal({
 	const sections = useDashboardSections();
 	const options = useMemo(() => buildSectionOptions(sections), [sections]);
 
+	// With more than one section the user must pick a target section, so we keep
+	// the select-then-confirm flow. Otherwise there's nothing to choose: hide the
+	// footer and let a tile click create the panel outright.
+	const hasSectionPicker = options.length > 1;
+
 	const [selectedValue, setSelectedValue] = useState('');
 	const [selectedPanelKind, setSelectedPanelKind] = useState<PanelKind | null>(
 		null,
@@ -40,12 +45,24 @@ function PanelTypeSelectionModal({
 		}
 	}, [open, options, defaultLayoutIndex]);
 
+	const createPanel = (panelKind: PanelKind): void => {
+		const layoutIndex = selectedValue === '' ? undefined : Number(selectedValue);
+		onSelect(panelKind, layoutIndex);
+	};
+
+	const handleTileClick = (panelKind: PanelKind): void => {
+		if (hasSectionPicker) {
+			setSelectedPanelKind(panelKind);
+			return;
+		}
+		createPanel(panelKind);
+	};
+
 	const handleConfirm = (): void => {
 		if (selectedPanelKind === null) {
 			return;
 		}
-		const layoutIndex = selectedValue === '' ? undefined : Number(selectedValue);
-		onSelect(selectedPanelKind, layoutIndex);
+		createPanel(selectedPanelKind);
 	};
 
 	return (
@@ -58,17 +75,21 @@ function PanelTypeSelectionModal({
 			}}
 			title="New Panel"
 			footer={
-				<PanelTypeSelectionModalFooter
-					options={options}
-					selectedValue={selectedValue}
-					onSectionChange={setSelectedValue}
-					isConfirmDisabled={selectedPanelKind === null}
-					onConfirm={handleConfirm}
-				/>
+				hasSectionPicker ? (
+					<PanelTypeSelectionModalFooter
+						options={options}
+						selectedValue={selectedValue}
+						onSectionChange={setSelectedValue}
+						isConfirmDisabled={selectedPanelKind === null}
+						onConfirm={handleConfirm}
+					/>
+				) : undefined
 			}
 		>
 			<div className={styles.panelTypeSection}>
-				<span className={styles.pickerLabel}>Select panel type</span>
+				{hasSectionPicker && (
+					<span className={styles.pickerLabel}>Select panel type</span>
+				)}
 				<div className={styles.grid}>
 					{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
 						<button
@@ -79,7 +100,7 @@ function PanelTypeSelectionModal({
 							})}
 							data-testid={`panel-type-${panelKind}`}
 							aria-pressed={panelKind === selectedPanelKind}
-							onClick={(): void => setSelectedPanelKind(panelKind)}
+							onClick={(): void => handleTileClick(panelKind)}
 						>
 							<Icon size={24} color={Color.BG_ROBIN_400} />
 							{label}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModalFooter.tsx

@@ -15,8 +15,9 @@ interface PanelTypeSelectionModalFooterProps {
 }
 
 /**
- * Footer for the New Panel modal: an "Add panel to" section picker (shown only
- * when the dashboard has more than one section) and the confirm button.
+ * Footer for the New Panel modal: an "Add panel to" section picker and the
+ * confirm button. Only rendered when the dashboard has more than one section —
+ * otherwise there's nothing to pick and a tile click creates the panel directly.
  */
 function PanelTypeSelectionModalFooter({
 	options,
@@ -25,20 +26,16 @@ function PanelTypeSelectionModalFooter({
 	isConfirmDisabled,
 	onConfirm,
 }: PanelTypeSelectionModalFooterProps): JSX.Element {
-	const hasSectionPicker = options.length > 1;
-
 	return (
 		<div className={styles.footerActions}>
-			{hasSectionPicker && (
-				<div className={styles.footerPicker}>
-					<span className={styles.pickerLabel}>Add panel to</span>
-					<SectionPicker
-						options={options}
-						value={selectedValue}
-						onChange={onSectionChange}
-					/>
-				</div>
-			)}
+			<div className={styles.footerPicker}>
+				<span className={styles.pickerLabel}>Add panel to</span>
+				<SectionPicker
+					options={options}
+					value={selectedValue}
+					onChange={onSectionChange}
+				/>
+			</div>
 			<Button
 				color="primary"
 				size="md"

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useDrilldown.test.tsx

@@ -6,12 +6,14 @@ import {
 } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import type { DrilldownContext } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/drilldown';
+import { EQueryType } from 'types/common/dashboard';
 
 import { useDrilldown } from '../hooks/useDrilldown';
 
 const mockOpenViewWithQuery = jest.fn();
 const mockNavigate = jest.fn();
 const mockGetBuilderQueries = jest.fn();
+const mockGetPanelQueryType = jest.fn();
 let mockResolved = { resolvedQuery: 'RESOLVED_QUERY', isResolving: false };
 let mockDashboardVariables: {
 	hasFieldVariables: boolean;
@@ -95,6 +97,13 @@ jest.mock(
 			mockGetBuilderQueries(...args),
 	}),
 );
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType',
+	() => ({
+		getPanelQueryType: (...args: unknown[]): unknown =>
+			mockGetPanelQueryType(...args),
+	}),
+);
 // Capability lookup mocked (its per-kind values are data in the definitions); avoids
 // importing the whole renderer registry into the test.
 jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
@@ -133,6 +142,7 @@ describe('useDrilldown', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockGetBuilderQueries.mockReturnValue([{ name: 'A' }]);
+		mockGetPanelQueryType.mockReturnValue(EQueryType.QUERY_BUILDER);
 		mockResolved = { resolvedQuery: 'RESOLVED_QUERY', isResolving: false };
 		mockDashboardVariables = {
 			hasFieldVariables: true,
@@ -152,6 +162,15 @@ describe('useDrilldown', () => {
 			expect(result.current.enableDrillDown).toBe(false);
 		});
 
+		it.each([EQueryType.PROM, EQueryType.CLICKHOUSE, undefined])(
+			'is false when the query type is %s (not the builder)',
+			(queryType) => {
+				mockGetPanelQueryType.mockReturnValue(queryType);
+				const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+				expect(result.current.enableDrillDown).toBe(false);
+			},
+		);
+
 		it('is false for a kind that opts out of drilldown', () => {
 			const { result } = renderHook(() =>
 				useDrilldown(panelOfKind('signoz/ListPanel'), 'p1'),

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldown.tsx

@@ -16,7 +16,9 @@ import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContain
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import { buildAggregateData } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/buildAggregateData';
 import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
+import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
 import { fromPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+import { EQueryType } from 'types/common/dashboard';
 
 import DrilldownAggregateMenu from '../DrilldownMenu/DrilldownAggregateMenu';
 import DrilldownBreakoutMenu from '../DrilldownMenu/DrilldownBreakoutMenu';
@@ -76,12 +78,14 @@ export function useDrilldown(
 	const panelType = PANEL_KIND_TO_PANEL_TYPE[kind];
 	const queries = panel.spec.queries;
 
-	// Kind must opt in via its capability AND have a builder query to drill into.
+	// Drilldown only for builder-authored panels with a query to drill into (PromQL /
+	// ClickHouse have no builder context to refine).
 	const enableDrillDown = useMemo(
 		() =>
 			getPanelDefinition(kind).actions.drilldown &&
+			getPanelQueryType(panel) === EQueryType.QUERY_BUILDER &&
 			getBuilderQueries(queries).length > 0,
-		[kind, queries],
+		[kind, panel, queries],
 	);
 
 	const v1Query = useMemo(

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -11,6 +11,7 @@ import { useCreatePanel } from '../../../hooks/useCreatePanel';
 import type { DashboardSection } from '../../../utils';
 import PanelTypeSelectionModal from '../../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import { useDashboardStore } from '../../../store/useDashboardStore';
+import { useCloneSection } from '../hooks/useCloneSection';
 import { useDeleteSection } from '../hooks/useDeleteSection';
 import { useRenameSection } from '../hooks/useRenameSection';
 import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
@@ -70,6 +71,8 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 		setIsDeleteOpen(false);
 	}, [deleteSection]);
 
+	const cloneSection = useCloneSection();
+
 	const grid = (
 		<SectionGrid
 			items={section.items}
@@ -113,6 +116,7 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 						? {
 								onRename: (): void => setIsRenaming(true),
 								onAddPanel: (): void => openPicker(section.layoutIndex),
+								onCloneSection: (): void => void cloneSection(section),
 								onDeleteSection: (): void => setIsDeleteOpen(true),
 							}
 						: undefined

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useMemo } from 'react';
-import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
+import { Copy, EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
@@ -13,6 +13,7 @@ interface SectionActionsMenuProps {
 	disabledReason?: string;
 	onAddPanel?: () => void;
 	onRename?: () => void;
+	onCloneSection?: () => void;
 	onDeleteSection?: () => void;
 }
 
@@ -21,6 +22,7 @@ function SectionActionsMenu({
 	disabledReason = '',
 	onAddPanel,
 	onRename,
+	onCloneSection,
 	onDeleteSection,
 }: SectionActionsMenuProps): JSX.Element {
 	const items = useMemo<MenuItem[]>(() => {
@@ -52,6 +54,15 @@ function SectionActionsMenu({
 				onClick: onRename,
 			});
 		}
+		if (onCloneSection) {
+			result.push({
+				key: 'clone-section',
+				icon: <Copy size={14} />,
+				label: label('Clone section'),
+				disabled,
+				onClick: onCloneSection,
+			});
+		}
 		if (onDeleteSection) {
 			result.push(
 				{ type: 'divider' },
@@ -66,7 +77,7 @@ function SectionActionsMenu({
 			);
 		}
 		return result;
-	}, [disabledReason, onAddPanel, onRename, onDeleteSection]);
+	}, [disabledReason, onAddPanel, onRename, onCloneSection, onDeleteSection]);
 
 	return (
 		<DropdownMenuSimple menu={{ items }}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx

@@ -18,6 +18,7 @@ export interface SectionDragHandle {
 export interface SectionHeaderActions {
 	onRename: () => void;
 	onAddPanel: () => void;
+	onCloneSection: () => void;
 	onDeleteSection: () => void;
 }
 
@@ -85,6 +86,7 @@ function SectionHeader({
 					disabledReason={disabledReason}
 					onAddPanel={actions.onAddPanel}
 					onRename={actions.onRename}
+					onCloneSection={actions.onCloneSection}
 					onDeleteSection={actions.onDeleteSection}
 				/>
 			) : null}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useCloneSection.ts

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { cloneDeep } from 'lodash-es';
+import { v4 as uuid } from 'uuid';
+
+import { useOptimisticPatch } from '../../../hooks/useOptimisticPatch';
+import { cloneSectionOps } from '../../../patchOps';
+import type { DashboardSection } from '../../../utils';
+
+/**
+ * Duplicates a section with all its panels: each panel is deep-copied under a
+ * fresh id and a new titled Grid ("<name> (Copy)") referencing them is appended,
+ * as one atomic patch.
+ */
+export function useCloneSection(): (
+	section: DashboardSection,
+) => Promise<void> {
+	const { patchAsync } = useOptimisticPatch();
+
+	return useCallback(
+		async (section: DashboardSection): Promise<void> => {
+			const panels = section.items.flatMap((item) =>
+				item.panel
+					? [
+							{
+								newId: uuid(),
+								panel: cloneDeep(item.panel),
+								x: item.x,
+								y: item.y,
+								width: item.width,
+								height: item.height,
+							},
+						]
+					: [],
+			);
+
+			const title = section.title ? `${section.title} (Copy)` : 'Section (Copy)';
+			const clone = patchAsync(cloneSectionOps(title, panels));
+
+			toast.promise(clone, {
+				loading: 'Cloning section…',
+				success: 'Section cloned',
+				error: 'Failed to clone section',
+				position: 'top-center',
+			});
+
+			try {
+				await clone;
+			} catch {
+				// toast.promise owns the error UX; the optimistic write + settle handle state.
+			}
+		},
+		[patchAsync],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/index.tsx

@@ -41,14 +41,17 @@ function PanelsAndSectionsLayout({
 		[layouts, panels],
 	);
 
-	const isEmpty =
-		sections.length === 0 || sections.every((s) => s.items.length === 0);
-
 	// Sectioned mode = at least one titled layout. Sections then become a
 	// reorderable list; otherwise the dashboard is a single free-flowing grid
 	// with no section chrome or reordering.
 	const isSectioned = useMemo(() => sections.some((s) => !!s.title), [sections]);
 
+	// A titled section renders even with no panels (its header + add-panel state);
+	// only show the dashboard empty state when nothing is titled and there are no panels.
+	const isEmpty =
+		sections.length === 0 ||
+		(!isSectioned && sections.every((s) => s.items.length === 0));
+
 	const renderContent = (): ReactNode => {
 		if (isEmpty) {
 			return <DashboardEmptyState canAddPanel={isEditable} />;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariableSelector.tsx

@@ -1,17 +1,14 @@
-import { useMemo } from 'react';
 import { SolidInfoCircle } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 // eslint-disable-next-line signoz/no-antd-components -- lightweight description tooltip, matches V1
 import { Tooltip } from 'antd';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
 
-import { sortValuesByOrder } from '../DashboardSettings/Variables/variableFormModel';
 import type { VariableFormModel } from '../DashboardSettings/Variables/variableFormModel';
 import type { VariableSelection, VariableSelectionMap } from './selectionTypes';
+import CustomSelector from './selectors/CustomSelector';
 import DynamicSelector from './selectors/DynamicSelector';
 import QuerySelector from './selectors/QuerySelector';
 import TextSelector from './selectors/TextSelector';
-import ValueSelector from './selectors/ValueSelector';
 import styles from './VariablesBar.module.scss';
 
 interface VariableSelectorProps {
@@ -22,7 +19,7 @@ interface VariableSelectorProps {
 	selections: VariableSelectionMap;
 	selection: VariableSelection;
 	onChange: (selection: VariableSelection) => void;
-	/** Batched fill applied when options resolve (Query/Dynamic auto-selection). */
+	/** Batched fill applied when options resolve (Query/Dynamic/Custom auto-selection). */
 	onAutoSelect: (selection: VariableSelection) => void;
 }
 
@@ -35,17 +32,6 @@ function VariableSelector({
 	onChange,
 	onAutoSelect,
 }: VariableSelectorProps): JSX.Element {
-	const customOptions = useMemo(
-		() =>
-			variable.type === 'CUSTOM'
-				? sortValuesByOrder(
-						commaValuesParser(variable.customValue),
-						variable.sort,
-					).map(String)
-				: [],
-		[variable],
-	);
-
 	const renderControl = (): JSX.Element => {
 		switch (variable.type) {
 			case 'TEXT':
@@ -81,13 +67,11 @@ function VariableSelector({
 			case 'CUSTOM':
 			default:
 				return (
-					<ValueSelector
-						options={customOptions}
-						multiSelect={variable.multiSelect}
-						showAllOption={variable.showAllOption}
+					<CustomSelector
+						variable={variable}
 						selection={selection}
 						onChange={onChange}
-						testId={`variable-select-${variable.name}`}
+						onAutoSelect={onAutoSelect}
 					/>
 				);
 		}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.module.scss

@@ -14,6 +14,8 @@
 
 .strip {
 	display: flow-root;
+	// Collapsed: one line only, so the trailing add "+" never wraps below.
+	white-space: nowrap;
 }
 
 .stripExpanded {
@@ -22,6 +24,7 @@
 	gap: 8px;
 	padding-top: 12px;
 	overflow: visible;
+	white-space: normal;
 	clear: both;
 
 	.variableSlot,

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.tsx

@@ -52,9 +52,8 @@ function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
 	const { containerRef, visibleCount, overflowCount } = useInlineOverflowCount({
 		itemCount: variables.length,
 		gap: 8,
-		// Reserve the trailing line space: the "+N" trigger, plus the always-present
-		// add-variable "+" when editable, so the collapse math accounts for both.
-		reserveWidth: isEditable ? 88 : 48,
+		// Reserve room for the "+N" trigger and the add "+" so both stay on one line.
+		reserveWidth: isEditable ? 112 : 48,
 		enabled: !expanded,
 	});
 

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/useAutoSelect.test.tsx

@@ -0,0 +1,113 @@
+import { renderHook } from '@testing-library/react';
+
+import {
+	emptyVariableFormModel,
+	type VariableFormModel,
+} from '../../DashboardSettings/Variables/variableFormModel';
+import type { VariableSelection } from '../selectionTypes';
+import { useAutoSelect } from '../useAutoSelect';
+
+function model(overrides: Partial<VariableFormModel>): VariableFormModel {
+	return { ...emptyVariableFormModel(), ...overrides };
+}
+
+function run(
+	variable: VariableFormModel,
+	options: string[],
+	selection: VariableSelection,
+): VariableSelection | undefined {
+	const onAutoSelect = jest.fn();
+	renderHook(() => useAutoSelect(variable, options, selection, onAutoSelect));
+	return onAutoSelect.mock.calls[0]?.[0];
+}
+
+describe('useAutoSelect', () => {
+	it('materializes a query ALL selection to the full option array', () => {
+		const next = run(
+			model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
+			['a', 'b', 'c'],
+			{ value: null, allSelected: true },
+		);
+		expect(next).toStrictEqual({ value: ['a', 'b', 'c'], allSelected: true });
+	});
+
+	it('re-materializes ALL when the options grow', () => {
+		const next = run(
+			model({ type: 'CUSTOM', multiSelect: true, showAllOption: true }),
+			['a', 'b', 'c', 'd'],
+			{ value: ['a', 'b', 'c'], allSelected: true },
+		);
+		expect(next).toStrictEqual({
+			value: ['a', 'b', 'c', 'd'],
+			allSelected: true,
+		});
+	});
+
+	it('leaves a query ALL selection untouched when already the full set', () => {
+		const next = run(
+			model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
+			['a', 'b'],
+			{ value: ['a', 'b'], allSelected: true },
+		);
+		expect(next).toBeUndefined();
+	});
+
+	it('does NOT materialize a dynamic ALL selection (it sends __all__)', () => {
+		const next = run(
+			model({ type: 'DYNAMIC', multiSelect: true, showAllOption: true }),
+			['a', 'b'],
+			{ value: null, allSelected: true },
+		);
+		expect(next).toBeUndefined();
+	});
+
+	it('keeps the still-valid subset of a multi-select when options re-scope', () => {
+		const next = run(
+			model({ type: 'QUERY', multiSelect: true }),
+			['a', 'b', 'd'],
+			{ value: ['a', 'b', 'c'], allSelected: false },
+		);
+		expect(next).toStrictEqual({ value: ['a', 'b'], allSelected: false });
+	});
+
+	it('re-defaults a multi-select when none of the selected values remain', () => {
+		const next = run(model({ type: 'QUERY', multiSelect: true }), ['x', 'y'], {
+			value: ['a', 'b'],
+			allSelected: false,
+		});
+		expect(next).toStrictEqual({ value: ['x'], allSelected: false });
+	});
+
+	it('auto-selects the default (if present) for a single-select', () => {
+		const next = run(
+			model({ type: 'QUERY', defaultValue: 'b' }),
+			['a', 'b', 'c'],
+			{ value: '', allSelected: false },
+		);
+		expect(next).toStrictEqual({ value: 'b', allSelected: false });
+	});
+
+	it('auto-selects the first option when the default is not available', () => {
+		const next = run(model({ type: 'QUERY', defaultValue: 'z' }), ['a', 'b'], {
+			value: '',
+			allSelected: false,
+		});
+		expect(next).toStrictEqual({ value: 'a', allSelected: false });
+	});
+
+	it('leaves a valid single selection untouched', () => {
+		const next = run(model({ type: 'QUERY' }), ['a', 'b'], {
+			value: 'b',
+			allSelected: false,
+		});
+		expect(next).toBeUndefined();
+	});
+
+	it('does nothing while options are empty', () => {
+		const next = run(model({ type: 'QUERY' }), [], {
+			value: '',
+			allSelected: false,
+		});
+		expect(next).toBeUndefined();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/CustomSelector.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+
+import { sortValuesByOrder } from '../../DashboardSettings/Variables/variableFormModel';
+import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
+import type { VariableSelection } from '../selectionTypes';
+import { useAutoSelect } from '../useAutoSelect';
+import ValueSelector from './ValueSelector';
+
+interface CustomSelectorProps {
+	variable: VariableFormModel;
+	selection: VariableSelection;
+	onChange: (selection: VariableSelection) => void;
+	onAutoSelect: (selection: VariableSelection) => void;
+}
+
+/**
+ * Custom-variable options come from the comma-separated `customValue` (no fetch),
+ * but still auto-select a default/first option so the variable is never left blank.
+ */
+function CustomSelector({
+	variable,
+	selection,
+	onChange,
+	onAutoSelect,
+}: CustomSelectorProps): JSX.Element {
+	const options = useMemo(
+		() =>
+			sortValuesByOrder(
+				commaValuesParser(variable.customValue),
+				variable.sort,
+			).map(String),
+		[variable.customValue, variable.sort],
+	);
+
+	useAutoSelect(variable, options, selection, onAutoSelect);
+
+	return (
+		<ValueSelector
+			options={options}
+			multiSelect={variable.multiSelect}
+			showAllOption={variable.showAllOption}
+			selection={selection}
+			onChange={onChange}
+			testId={`variable-select-${variable.name}`}
+		/>
+	);
+}
+
+export default CustomSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/DynamicSelector.tsx

@@ -3,6 +3,7 @@ import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
+import { DASHBOARD_CACHE_TIME } from 'constants/queryCacheTime';
 import type { AppState } from 'store/reducers';
 import type { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -70,7 +71,7 @@ function DynamicSelector({
 		(s) => s.onVariableFetchFailure,
 	);
 
-	const { data, isFetching } = useQuery(
+	const { data, isFetching, error, refetch } = useQuery(
 		[
 			'dashboard-variable-dynamic',
 			variable.name,
@@ -95,6 +96,8 @@ function DynamicSelector({
 				!!variable.dynamicAttribute &&
 				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
 			refetchOnWindowFocus: false,
+			// Each cycle mints a fresh key; a small cacheTime bounds cache churn.
+			cacheTime: DASHBOARD_CACHE_TIME,
 			onSettled: (_, error) =>
 				error
 					? onVariableFetchFailure(variable.name)
@@ -117,6 +120,10 @@ function DynamicSelector({
 			multiSelect={variable.multiSelect}
 			showAllOption={variable.showAllOption}
 			loading={isFetching || isVariableWaiting}
+			errorMessage={error ? (error as Error).message || null : null}
+			onRetry={(): void => {
+				void refetch();
+			}}
 			selection={selection}
 			onChange={onChange}
 			testId={`variable-select-${variable.name}`}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/QuerySelector.tsx

@@ -3,6 +3,7 @@ import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
+import { DASHBOARD_CACHE_TIME } from 'constants/queryCacheTime';
 import type { AppState } from 'store/reducers';
 import type { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -62,7 +63,7 @@ function QuerySelector({
 		(s) => s.onVariableFetchFailure,
 	);
 
-	const { data, isFetching } = useQuery(
+	const { data, isFetching, error, refetch } = useQuery(
 		[
 			'dashboard-variable',
 			variable.name,
@@ -79,6 +80,8 @@ function QuerySelector({
 		{
 			enabled: isVariableFetching || (isVariableSettled && hasVariableFetchedOnce),
 			refetchOnWindowFocus: false,
+			// Each cycle mints a fresh key; a small cacheTime bounds cache churn.
+			cacheTime: DASHBOARD_CACHE_TIME,
 			onSettled: (_, error) =>
 				error
 					? onVariableFetchFailure(variable.name)
@@ -104,6 +107,10 @@ function QuerySelector({
 			multiSelect={variable.multiSelect}
 			showAllOption={variable.showAllOption}
 			loading={isFetching || isVariableWaiting}
+			errorMessage={error ? (error as Error).message || null : null}
+			onRetry={(): void => {
+				void refetch();
+			}}
 			selection={selection}
 			onChange={onChange}
 			testId={`variable-select-${variable.name}`}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/ValueSelector.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
 import type { OptionData } from 'components/NewSelect/types';
-import { ALL_SELECT_VALUE } from 'container/DashboardContainer/utils';
 
 import type { VariableSelection } from '../selectionTypes';
 import styles from '../VariablesBar.module.scss';
@@ -14,6 +13,9 @@ interface ValueSelectorProps {
 	selection: VariableSelection;
 	onChange: (selection: VariableSelection) => void;
 	testId?: string;
+	/** Option-fetch error surfaced in the dropdown, with a retry action. */
+	errorMessage?: string | null;
+	onRetry?: () => void;
 }
 
 /**
@@ -29,6 +31,8 @@ function ValueSelector({
 	selection,
 	onChange,
 	testId,
+	errorMessage,
+	onRetry,
 }: ValueSelectorProps): JSX.Element {
 	const optionData = useMemo<OptionData[]>(
 		() => options.map((option) => ({ label: option, value: option })),
@@ -36,8 +40,11 @@ function ValueSelector({
 	);
 
 	if (multiSelect) {
+		// All-selected → hand CustomMultiSelect the full option set so it engages its
+		// "all" path (overlay when closed, every option checked when open). Passing the
+		// scalar sentinel instead makes it render a literal `__ALL__` row.
 		const value = selection.allSelected
-			? ALL_SELECT_VALUE
+			? options
 			: (Array.isArray(selection.value) ? selection.value : []).map(String);
 		return (
 			<CustomMultiSelect
@@ -46,6 +53,8 @@ function ValueSelector({
 				options={optionData}
 				value={value}
 				loading={loading}
+				errorMessage={errorMessage}
+				onRetry={onRetry}
 				showSearch
 				placeholder="Select value"
 				enableAllSelection={showAllOption}
@@ -82,6 +91,8 @@ function ValueSelector({
 					: String(selection.value)
 			}
 			loading={loading}
+			errorMessage={errorMessage}
+			onRetry={onRetry}
 			showSearch
 			placeholder="Select value"
 			onChange={(next): void =>

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useAutoSelect.ts

@@ -1,12 +1,61 @@
 import { useEffect } from 'react';
 
 import type { VariableFormModel } from '../DashboardSettings/Variables/variableFormModel';
-import type { VariableSelection } from './selectionTypes';
+import type {
+	SelectedVariableValue,
+	VariableSelection,
+} from './selectionTypes';
+
+/** The variable's default (or first option) as a fresh selection. */
+function fillDefault(
+	variable: VariableFormModel,
+	options: string[],
+): VariableSelection {
+	const dv = variable.defaultValue;
+	const fallback = Array.isArray(dv) ? dv[0] : dv;
+	const initial = fallback && options.includes(fallback) ? fallback : options[0];
+	return {
+		value: variable.multiSelect ? [initial] : initial,
+		allSelected: false,
+	};
+}
+
+/** For an all-selected variable, the value to materialize (or null if unchanged). */
+function reconcileAllSelected(
+	variable: VariableFormModel,
+	options: string[],
+	current: SelectedVariableValue,
+): VariableSelection | null {
+	// Dynamic ALL travels as the `__all__` wire sentinel and shows ALL from the
+	// flag, so it needs no materialized value. Query/custom ALL must carry the full
+	// option array (the payload builder can't expand it) — keep it in sync.
+	if (!variable.multiSelect || variable.type === 'DYNAMIC') {
+		return null;
+	}
+	const alreadyFull =
+		Array.isArray(current) &&
+		current.length === options.length &&
+		current.every((c) => options.includes(String(c)));
+	return alreadyFull ? null : { value: options, allSelected: true };
+}
+
+function isValidSingle(
+	current: SelectedVariableValue,
+	options: string[],
+): boolean {
+	return (
+		!Array.isArray(current) &&
+		current !== '' &&
+		current !== null &&
+		current !== undefined &&
+		options.includes(String(current))
+	);
+}
 
 /**
- * When fetched options arrive and the current selection isn't one of them,
- * auto-pick the variable's default (if present in the options) or the first
- * option — so dependent children always have a usable parent value.
+ * Reconciles a variable's selection with its freshly-fetched options: materialize
+ * ALL to the full set, keep a still-valid multi-select subset, else auto-pick the
+ * default (or first option) so dependent children always have a usable value.
  */
 export function useAutoSelect(
 	variable: VariableFormModel,
@@ -15,27 +64,36 @@ export function useAutoSelect(
 	onAutoSelect: (selection: VariableSelection) => void,
 ): void {
 	useEffect(() => {
-		if (options.length === 0 || selection.allSelected) {
+		if (options.length === 0) {
 			return;
 		}
 		const current = selection.value;
-		const isValid = Array.isArray(current)
-			? current.length > 0 && current.every((c) => options.includes(String(c)))
-			: current !== '' &&
-				current !== null &&
-				current !== undefined &&
-				options.includes(String(current));
-		if (isValid) {
+
+		if (selection.allSelected) {
+			const next = reconcileAllSelected(variable, options, current);
+			if (next) {
+				onAutoSelect(next);
+			}
 			return;
 		}
-		const dv = variable.defaultValue;
-		const fallback = Array.isArray(dv) ? dv[0] : dv;
-		const initial =
-			fallback && options.includes(fallback) ? fallback : options[0];
-		onAutoSelect({
-			value: variable.multiSelect ? [initial] : initial,
-			allSelected: false,
-		});
+
+		if (variable.multiSelect && Array.isArray(current) && current.length > 0) {
+			const valid = current.map(String).filter((c) => options.includes(c));
+			if (valid.length === current.length) {
+				return;
+			}
+			onAutoSelect(
+				valid.length > 0
+					? { value: valid, allSelected: false }
+					: fillDefault(variable, options),
+			);
+			return;
+		}
+
+		if (!variable.multiSelect && isValidSingle(current, options)) {
+			return;
+		}
+		onAutoSelect(fillDefault(variable, options));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [options]);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useVariableSelection.ts

@@ -33,21 +33,36 @@ export const variablesUrlParser = parseAsJson<
 );
 
 function defaultSelection(model: VariableFormModel): VariableSelection {
-	// `defaultValue` is a string | string[] on the wire.
 	const def = model.defaultValue;
+	// Explicit ALL sentinel, or a multi-select allowing ALL with no default → ALL.
+	if (
+		def === ALL_SELECTED ||
+		(Array.isArray(def) && def.length === 1 && def[0] === ALL_SELECTED)
+	) {
+		return { value: null, allSelected: true };
+	}
 	if (Array.isArray(def) && def.length > 0) {
 		return { value: def, allSelected: false };
 	}
 	if (typeof def === 'string' && def !== '') {
 		return { value: model.multiSelect ? [def] : def, allSelected: false };
 	}
+	if (model.multiSelect && model.showAllOption) {
+		return { value: null, allSelected: true };
+	}
 	return { value: model.multiSelect ? [] : '', allSelected: false };
 }
 
-function fromUrlValue(raw: SelectedVariableValue): VariableSelection {
-	return raw === ALL_SELECTED
-		? { value: null, allSelected: true }
-		: { value: raw, allSelected: false };
+function fromUrlValue(
+	raw: SelectedVariableValue,
+	model: VariableFormModel,
+): VariableSelection {
+	// Only read the `__ALL__` sentinel as "ALL" for variables that support it —
+	// otherwise a legitimate value of "__ALL__" (e.g. a text var) is taken literally.
+	if (raw === ALL_SELECTED && model.multiSelect && model.showAllOption) {
+		return { value: null, allSelected: true };
+	}
+	return { value: raw, allSelected: false };
 }
 
 interface UseVariableSelection {
@@ -112,7 +127,7 @@ export function useVariableSelection(
 		variables.forEach((variable) => {
 			const urlValue = urlValues?.[variable.name];
 			if (urlValue !== undefined) {
-				seeded[variable.name] = fromUrlValue(urlValue);
+				seeded[variable.name] = fromUrlValue(urlValue, variable);
 			} else if (stored[variable.name]) {
 				seeded[variable.name] = stored[variable.name];
 			} else {
@@ -120,12 +135,27 @@ export function useVariableSelection(
 			}
 		});
 		setVariableValues(dashboardId, seeded);
+
+		// Drop URL selections for variables that no longer exist (renamed/removed),
+		// so a shared link doesn't carry stale entries a later variable could inherit.
+		if (urlValues) {
+			const validNames = new Set(variables.map((v) => v.name));
+			const orphaned = Object.keys(urlValues).some((n) => !validNames.has(n));
+			if (orphaned) {
+				const pruned: Record<string, SelectedVariableValue> = {};
+				Object.entries(urlValues).forEach(([name, value]) => {
+					if (validNames.has(name)) {
+						pruned[name] = value;
+					}
+				});
+				void setUrlValues(pruned);
+			}
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dashboardId, variables]);
 
-	// Start a full fetch cycle on load / dependency-order / time change. Runs after
-	// the seeding effect above, so it reads the seeded selection from the store; a
-	// value change instead goes through `enqueueDescendants`, not this effect.
+	// Start a full fetch cycle on load / dependency-order / time change. A value
+	// change instead goes through `enqueueDescendants`, not this effect.
 	const orderKey = `${fetchContext.queryVariableOrder.join(
 		',',
 	)}|${fetchContext.dynamicVariableOrder.join(',')}`;

frontend/src/pages/DashboardPageV2/DashboardContainer/__tests__/patchOps.test.ts

@@ -3,7 +3,11 @@ import type {
 	DashboardtypesLayoutDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
-import { createDefaultPanel, createPanelOps } from '../patchOps';
+import {
+	cloneSectionOps,
+	createDefaultPanel,
+	createPanelOps,
+} from '../patchOps';
 
 function item(y: number, height: number): DashboardGridItemDTO {
 	return { x: 0, y, width: 6, height, content: { $ref: '#/spec/panels/x' } };
@@ -140,3 +144,39 @@ describe('createPanelOps', () => {
 		expect((ops[2].value as DashboardGridItemDTO).y).toBe(0);
 	});
 });
+
+describe('cloneSectionOps', () => {
+	const panel = createDefaultPanel('signoz/TimeSeriesPanel');
+
+	it('adds a fresh panel per source panel + a titled Grid referencing them, geometry preserved', () => {
+		const ops = cloneSectionOps('Overview (Copy)', [
+			{ newId: 'n1', panel, x: 0, y: 0, width: 6, height: 4 },
+			{ newId: 'n2', panel, x: 6, y: 0, width: 6, height: 4 },
+		]);
+
+		// One add per panel, then the layout append.
+		expect(ops).toHaveLength(3);
+		expect(ops[0]).toMatchObject({ op: 'add', path: '/spec/panels/n1' });
+		expect(ops[1]).toMatchObject({ op: 'add', path: '/spec/panels/n2' });
+
+		const layoutOp = ops[2];
+		expect(layoutOp).toMatchObject({ op: 'add', path: '/spec/layouts/-' });
+		const layout = layoutOp.value as DashboardtypesLayoutDTO;
+		expect(layout.spec?.display?.title).toBe('Overview (Copy)');
+		expect(layout.spec?.items).toHaveLength(2);
+		expect(layout.spec?.items?.[1]).toMatchObject({
+			x: 6,
+			y: 0,
+			width: 6,
+			height: 4,
+			content: { $ref: '#/spec/panels/n2' },
+		});
+	});
+
+	it('produces just the empty titled Grid when the section has no panels', () => {
+		const ops = cloneSectionOps('Empty (Copy)', []);
+		expect(ops).toHaveLength(1);
+		expect(ops[0]).toMatchObject({ op: 'add', path: '/spec/layouts/-' });
+		expect((ops[0].value as DashboardtypesLayoutDTO).spec?.items).toHaveLength(0);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardChangedDialog/DashboardChangedDialog.module.scss

@@ -0,0 +1,11 @@
+.body {
+	color: var(--l2-foreground);
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardChangedDialog/DashboardChangedDialog.tsx

@@ -0,0 +1,61 @@
+import { RotateCcw } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+
+import styles from './DashboardChangedDialog.module.scss';
+
+interface DashboardChangedDialogProps {
+	open: boolean;
+	onReload: () => void;
+	onDismiss: () => void;
+}
+
+function DashboardChangedDialog({
+	open,
+	onReload,
+	onDismiss,
+}: DashboardChangedDialogProps): JSX.Element {
+	const footer = (
+		<div className={styles.footer}>
+			<Button
+				variant="solid"
+				color="secondary"
+				onClick={onDismiss}
+				testId="dashboard-changed-dismiss"
+			>
+				Dismiss
+			</Button>
+			<Button
+				variant="solid"
+				color="primary"
+				prefix={<RotateCcw size={12} />}
+				onClick={onReload}
+				testId="dashboard-changed-reload"
+			>
+				Reload
+			</Button>
+		</div>
+	);
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onDismiss();
+				}
+			}}
+			title="Dashboard updated elsewhere"
+			width="narrow"
+			showCloseButton={false}
+			footer={footer}
+		>
+			<div className={styles.body}>
+				This dashboard was changed in another tab or by another user. Reload to see
+				the latest version.
+			</div>
+		</DialogWrapper>
+	);
+}
+
+export default DashboardChangedDialog;

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/__tests__/useDashboardStaleCheck.test.ts

@@ -0,0 +1,74 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useDashboardStaleCheck } from '../useDashboardStaleCheck';
+
+const mockUseQuery = jest.fn();
+const mockUseIsMutating = jest.fn();
+jest.mock('react-query', () => ({
+	useQuery: (...args: unknown[]): unknown => mockUseQuery(...args),
+	useIsMutating: (): number => mockUseIsMutating(),
+	useQueryClient: (): unknown => ({ getQueryData: jest.fn() }),
+}));
+jest.mock('api/generated/services/dashboard', () => ({
+	getDashboardV2: jest.fn(),
+	getGetDashboardV2QueryKey: jest.fn(() => ['/api/v2/dashboards/d1']),
+}));
+
+function setServerUpdatedAt(updatedAt: string | undefined): void {
+	mockUseQuery.mockReturnValue({ data: { data: { updatedAt } } });
+}
+
+describe('useDashboardStaleCheck', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseIsMutating.mockReturnValue(0);
+	});
+
+	it('prompts when the server copy is newer than the loaded one', () => {
+		setServerUpdatedAt('2026-07-08T10:00:00Z');
+		const { result } = renderHook(() =>
+			useDashboardStaleCheck('d1', '2026-07-08T09:00:00Z', jest.fn()),
+		);
+		expect(result.current.showPrompt).toBe(true);
+	});
+
+	it('does not prompt when the versions match', () => {
+		setServerUpdatedAt('2026-07-08T09:00:00Z');
+		const { result } = renderHook(() =>
+			useDashboardStaleCheck('d1', '2026-07-08T09:00:00Z', jest.fn()),
+		);
+		expect(result.current.showPrompt).toBe(false);
+	});
+
+	it('does not prompt while a mutation is in flight (optimistic save)', () => {
+		mockUseIsMutating.mockReturnValue(1);
+		setServerUpdatedAt('2026-07-08T10:00:00Z');
+		const { result } = renderHook(() =>
+			useDashboardStaleCheck('d1', '2026-07-08T09:00:00Z', jest.fn()),
+		);
+		expect(result.current.showPrompt).toBe(false);
+	});
+
+	it('stops prompting for a version once dismissed', () => {
+		setServerUpdatedAt('2026-07-08T10:00:00Z');
+		const { result } = renderHook(() =>
+			useDashboardStaleCheck('d1', '2026-07-08T09:00:00Z', jest.fn()),
+		);
+		expect(result.current.showPrompt).toBe(true);
+		act(() => result.current.dismiss());
+		expect(result.current.showPrompt).toBe(false);
+	});
+
+	it('reload refetches and clears the dismissed state', () => {
+		setServerUpdatedAt('2026-07-08T10:00:00Z');
+		const refetch = jest.fn();
+		const { result } = renderHook(() =>
+			useDashboardStaleCheck('d1', '2026-07-08T09:00:00Z', refetch),
+		);
+		act(() => result.current.dismiss());
+		expect(result.current.showPrompt).toBe(false);
+		act(() => result.current.reload());
+		expect(refetch).toHaveBeenCalledTimes(1);
+		expect(result.current.showPrompt).toBe(true);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardStaleCheck.ts

@@ -0,0 +1,69 @@
+import { useCallback, useState } from 'react';
+import { useIsMutating, useQuery, useQueryClient } from 'react-query';
+import {
+	getDashboardV2,
+	getGetDashboardV2QueryKey,
+} from 'api/generated/services/dashboard';
+import type { GetDashboardV2200 } from 'api/generated/services/sigNoz.schemas';
+
+interface UseDashboardStaleCheck {
+	// Server copy has a newer updatedAt than the loaded one, and not yet dismissed.
+	showPrompt: boolean;
+	reload: () => void;
+	dismiss: () => void;
+}
+
+/**
+ * Detects when the open dashboard changed on the server (another tab/user) without
+ * touching the render cache: a separate query (own key) refetches on window focus
+ * and its updatedAt is compared to the loaded copy's. Guarded by in-flight
+ * mutations so an optimistic save doesn't false-positive.
+ */
+export function useDashboardStaleCheck(
+	dashboardId: string,
+	loadedUpdatedAt: string | undefined,
+	refetch: () => void,
+): UseDashboardStaleCheck {
+	const isMutating = useIsMutating() > 0;
+	const queryClient = useQueryClient();
+	const [dismissedAt, setDismissedAt] = useState<string | null>(null);
+
+	const { data } = useQuery(
+		['dashboard-freshness', dashboardId],
+		({ signal }) => getDashboardV2({ id: dashboardId }, signal),
+		{
+			enabled: !!dashboardId,
+			refetchOnWindowFocus: true,
+			refetchOnMount: false,
+			retry: false,
+			// Seed from the already-loaded dashboard so mount makes no extra GET; the
+			// query only hits the network on a later window focus.
+			initialData: () =>
+				queryClient.getQueryData<GetDashboardV2200>(
+					getGetDashboardV2QueryKey({ id: dashboardId }),
+				),
+		},
+	);
+
+	const serverUpdatedAt = data?.data?.updatedAt;
+	const changed =
+		!isMutating &&
+		!!serverUpdatedAt &&
+		!!loadedUpdatedAt &&
+		serverUpdatedAt !== loadedUpdatedAt;
+
+	const dismiss = useCallback(
+		(): void => setDismissedAt(serverUpdatedAt ?? null),
+		[serverUpdatedAt],
+	);
+	const reload = useCallback((): void => {
+		refetch();
+		setDismissedAt(null);
+	}, [refetch]);
+
+	return {
+		showPrompt: changed && serverUpdatedAt !== dismissedAt,
+		reload,
+		dismiss,
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/index.tsx

@@ -12,6 +12,8 @@ import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 import DashboardPageHeader from './components/DashboardPageHeader/DashboardPageHeader';
 import LockedIndicator from './components/LockedIndicator/LockedIndicator';
+import DashboardChangedDialog from './components/DashboardChangedDialog/DashboardChangedDialog';
+import { useDashboardStaleCheck } from './hooks/useDashboardStaleCheck';
 import { Base64Icons } from './DashboardSettings/Overview/utils';
 
 interface DashboardContainerProps {
@@ -53,6 +55,12 @@ function DashboardContainer({
 	// suggests them ($variable) in the panel editor and dashboards-page builder.
 	useSyncVariablesForSuggestions(dashboard);
 
+	const staleCheck = useDashboardStaleCheck(
+		dashboard.id,
+		dashboard.updatedAt,
+		refetch,
+	);
+
 	// In full screen show only the sections and panels — the header/toolbar chrome
 	// is hidden for a clean presentation view (exit with Esc).
 	return (
@@ -66,6 +74,11 @@ function DashboardContainer({
 				)}
 				<PanelsAndSectionsLayout layouts={spec.layouts} panels={spec.panels} />
 				{isLocked && <LockedIndicator />}
+				<DashboardChangedDialog
+					open={staleCheck.showPrompt}
+					onReload={staleCheck.reload}
+					onDismiss={staleCheck.dismiss}
+				/>
 			</div>
 		</FullScreen>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/patchOps.ts

@@ -98,6 +98,42 @@ export function addSectionOp(
 	return { op: add, path: '/spec/layouts/-', value: newGridLayout(title) };
 }
 
+interface ClonedSectionPanel {
+	newId: string;
+	/** Deep-copied source panel spec (caller owns the clone). */
+	panel: DashboardtypesPanelDTO;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+/** Clone a section: add fresh panel copies and append a titled Grid referencing them. */
+export function cloneSectionOps(
+	title: string,
+	panels: ClonedSectionPanel[],
+): DashboardtypesJSONPatchOperationDTO[] {
+	const panelOps = panels.map((p) => ({
+		op: add,
+		path: `/spec/panels/${p.newId}`,
+		value: p.panel,
+	}));
+	const layout: DashboardtypesLayoutDTO = {
+		kind: 'Grid' as DashboardtypesLayoutDTO['kind'],
+		spec: {
+			display: { title },
+			items: panels.map((p) => ({
+				x: p.x,
+				y: p.y,
+				width: p.width,
+				height: p.height,
+				content: { $ref: panelRef(p.newId) },
+			})),
+		},
+	};
+	return [...panelOps, { op: add, path: '/spec/layouts/-', value: layout }];
+}
+
 interface AddPanelToSectionArgs {
 	panelId: string;
 	panel: DashboardtypesPanelDTO;

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/__tests__/buildVariablesPayload.test.ts

@@ -77,17 +77,24 @@ describe('buildVariablesPayload', () => {
 		});
 	});
 
-	it('falls back to a list variable configured default when unselected', () => {
+	it('falls back to a string configured default when unselected', () => {
 		const definitions = [
-			variable('region', 'QUERY', {
-				defaultValue: { value: 'us-east' },
-			} as unknown as Partial<VariableFormModel>),
+			variable('region', 'QUERY', { defaultValue: 'us-east' }),
 		];
 		expect(buildVariablesPayload(definitions, {})).toStrictEqual({
 			region: { type: 'query', value: 'us-east' },
 		});
 	});
 
+	it('falls back to an array configured default when unselected', () => {
+		const definitions = [
+			variable('region', 'QUERY', { defaultValue: ['us-east', 'us-west'] }),
+		];
+		expect(buildVariablesPayload(definitions, {})).toStrictEqual({
+			region: { type: 'query', value: ['us-east', 'us-west'] },
+		});
+	});
+
 	it('omits a variable with no selection and no default', () => {
 		const definitions = [variable('q', 'QUERY')];
 		expect(buildVariablesPayload(definitions, {})).toStrictEqual({});

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/buildVariablesPayload.ts

@@ -40,9 +40,12 @@ function configuredDefault(
 	if (definition.type === 'TEXT') {
 		return definition.textValue || undefined;
 	}
-	return (
-		definition.defaultValue as { value?: SelectedVariableValue } | undefined
-	)?.value;
+	// `defaultValue` is `string | string[]` on the wire — use it directly.
+	const def = definition.defaultValue;
+	if (Array.isArray(def)) {
+		return def.length > 0 ? def : undefined;
+	}
+	return def || undefined;
 }
 
 /**

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/__tests__/variableFetchSlice.test.ts

@@ -2,109 +2,145 @@ import {
 	emptyVariableFormModel,
 	type VariableFormModel,
 } from '../../../DashboardSettings/Variables/variableFormModel';
-import { deriveFetchContext } from '../../../VariablesBar/variableDependencies';
+import {
+	deriveFetchContext,
+	type VariableFetchContext,
+} from '../../../VariablesBar/variableDependencies';
 import { useDashboardStore } from '../../useDashboardStore';
-import { VariableFetchState } from '../variableFetchSlice.utils';
 
 function model(overrides: Partial<VariableFormModel>): VariableFormModel {
 	return { ...emptyVariableFormModel(), ...overrides };
 }
 
-// q1 (root query) → q2 (query referencing $q1) ; d1 (dynamic).
-const q1 = model({ name: 'q1', type: 'QUERY', queryValue: 'SELECT 1' });
-const q2 = model({ name: 'q2', type: 'QUERY', queryValue: 'SELECT $q1' });
-const d1 = model({ name: 'd1', type: 'DYNAMIC', dynamicAttribute: 'pod' });
-const context = deriveFetchContext([q1, q2, d1]);
-
 function store(): ReturnType<typeof useDashboardStore.getState> {
 	return useDashboardStore.getState();
 }
 function states(): Record<string, string> {
 	return store().variableFetchStates;
 }
-
-beforeEach(() => {
+function reset(names: string[], context: VariableFetchContext): void {
 	useDashboardStore.setState({
 		variableFetchStates: {},
 		variableLastUpdated: {},
 		variableCycleIds: {},
 		variableFetchContext: null,
 	});
-	store().initVariableFetch(['q1', 'q2', 'd1'], context);
-});
+	store().initVariableFetch(names, context);
+}
 
 describe('variableFetchSlice', () => {
+	// q1 (root query) → q2 (query referencing $q1) ; d1, d2 (dynamics).
+	const q1 = model({ name: 'q1', type: 'QUERY', queryValue: 'SELECT 1' });
+	const q2 = model({ name: 'q2', type: 'QUERY', queryValue: 'SELECT $q1' });
+	const d1 = model({ name: 'd1', type: 'DYNAMIC', dynamicAttribute: 'pod' });
+	const d2 = model({ name: 'd2', type: 'DYNAMIC', dynamicAttribute: 'ns' });
+	const context = deriveFetchContext([q1, q2, d1, d2]);
+
+	beforeEach(() => reset(['q1', 'q2', 'd1', 'd2'], context));
+
 	it('initializes every variable to idle', () => {
 		expect(states()).toStrictEqual({
-			q1: VariableFetchState.Idle,
-			q2: VariableFetchState.Idle,
-			d1: VariableFetchState.Idle,
+			q1: 'idle',
+			q2: 'idle',
+			d1: 'idle',
+			d2: 'idle',
 		});
 	});
 
 	it('enqueueFetchAll loads roots, waits dependents and (ungated) dynamics', () => {
 		store().enqueueFetchAll(false);
-		expect(states()).toStrictEqual({
-			q1: VariableFetchState.Loading,
-			q2: VariableFetchState.Waiting,
-			d1: VariableFetchState.Waiting,
+		expect(states()).toMatchObject({
+			q1: 'loading',
+			q2: 'waiting',
+			d1: 'waiting',
+			d2: 'waiting',
 		});
-		expect(store().variableCycleIds).toStrictEqual({ q1: 1, q2: 1, d1: 1 });
 	});
 
 	it('enqueueFetchAll loads dynamics immediately when query values exist', () => {
 		store().enqueueFetchAll(true);
-		expect(states().d1).toBe(VariableFetchState.Loading);
+		expect(states().d1).toBe('loading');
 	});
 
 	it('completing a parent unblocks its query child, then unlocks dynamics', () => {
 		store().enqueueFetchAll(false);
 		store().onVariableFetchComplete('q1');
-		expect(states()).toMatchObject({
-			q1: VariableFetchState.Idle,
-			q2: VariableFetchState.Loading,
-			d1: VariableFetchState.Waiting,
-		});
+		expect(states()).toMatchObject({ q1: 'idle', q2: 'loading', d1: 'waiting' });
 
 		store().onVariableFetchComplete('q2');
-		expect(states()).toMatchObject({
-			q1: VariableFetchState.Idle,
-			q2: VariableFetchState.Idle,
-			d1: VariableFetchState.Loading,
-		});
+		expect(states()).toMatchObject({ q2: 'idle', d1: 'loading', d2: 'loading' });
 	});
 
-	it('enqueueDescendants revalidates only descendants + dynamics', () => {
-		store().enqueueFetchAll(false);
+	it('ignores a settle for a variable that is not actively fetching', () => {
+		// q1 was never enqueued (still idle) — a stray complete must be a no-op.
 		store().onVariableFetchComplete('q1');
-		store().onVariableFetchComplete('q2');
-		store().onVariableFetchComplete('d1');
-
-		store().enqueueDescendants('q1');
-		// q2 depends on q1 (settled) → revalidates; d1 waits (q2 no longer settled).
-		expect(states().q2).toBe(VariableFetchState.Revalidating);
-		expect(states().d1).toBe(VariableFetchState.Waiting);
+		expect(states().q1).toBe('idle');
+		expect(store().variableLastUpdated.q1 ?? 0).toBe(0);
 	});
 
-	it('enqueueDescendantsBatch bumps each descendant + dynamic exactly once', () => {
-		store().enqueueFetchAll(false);
-		store().onVariableFetchComplete('q1');
-		store().onVariableFetchComplete('q2');
-		store().onVariableFetchComplete('d1');
+	it('changing a query variable revalidates query descendants but NOT dynamics', () => {
+		store().enqueueFetchAll(true);
+		['q1', 'q2', 'd1', 'd2'].forEach((n) => store().onVariableFetchComplete(n));
 		const before = { ...store().variableCycleIds };
 
-		// q1 and q2 auto-select together: q2 is a descendant of q1 but is also in
-		// the batch — it should still bump only once, as should the dynamic.
-		store().enqueueDescendantsBatch(['q1', 'q2']);
-		const after = store().variableCycleIds;
-		expect(after.q2).toBe(before.q2 + 1);
-		expect(after.d1).toBe(before.d1 + 1);
+		store().enqueueDescendants('q1');
+		expect(states().q2).toBe('revalidating');
+		expect(store().variableCycleIds.q2).toBe(before.q2 + 1);
+		expect(store().variableCycleIds.d1).toBe(before.d1);
+		expect(store().variableCycleIds.d2).toBe(before.d2);
+	});
+
+	it('changing a dynamic refreshes the OTHER dynamics, never itself or query vars', () => {
+		store().enqueueFetchAll(true);
+		['q1', 'q2', 'd1', 'd2'].forEach((n) => store().onVariableFetchComplete(n));
+		const before = { ...store().variableCycleIds };
+
+		store().enqueueDescendants('d1');
+		expect(store().variableCycleIds.d1).toBe(before.d1);
+		expect(store().variableCycleIds.d2).toBe(before.d2 + 1);
+		expect(store().variableCycleIds.q1).toBe(before.q1);
 	});
 
 	it('a failed parent idles its query descendants', () => {
 		store().enqueueFetchAll(false);
 		store().onVariableFetchFailure('q1');
-		expect(states().q1).toBe(VariableFetchState.Error);
-		expect(states().q2).toBe(VariableFetchState.Idle);
+		expect(states().q1).toBe('error');
+		expect(states().q2).toBe('idle');
+	});
+});
+
+describe('variableFetchSlice — diamond dependencies', () => {
+	// qA, qB (roots) → qC (references both $qA and $qB).
+	const qA = model({ name: 'qA', type: 'QUERY', queryValue: 'SELECT 1' });
+	const qB = model({ name: 'qB', type: 'QUERY', queryValue: 'SELECT 2' });
+	const qC = model({ name: 'qC', type: 'QUERY', queryValue: 'SELECT $qA $qB' });
+	const context = deriveFetchContext([qA, qB, qC]);
+
+	beforeEach(() => reset(['qA', 'qB', 'qC'], context));
+
+	it('unblocks the child only once BOTH parents are settled', () => {
+		store().enqueueFetchAll(false);
+		expect(states().qC).toBe('waiting');
+
+		store().onVariableFetchComplete('qA');
+		expect(states().qC).toBe('waiting'); // qB still loading
+
+		store().onVariableFetchComplete('qB');
+		expect(states().qC).not.toBe('waiting'); // both settled → fetches
+	});
+});
+
+describe('variableFetchSlice — dependency cycle', () => {
+	// qX ↔ qY reference each other → dropped from the topological order.
+	const qX = model({ name: 'qX', type: 'QUERY', queryValue: 'SELECT $qY' });
+	const qY = model({ name: 'qY', type: 'QUERY', queryValue: 'SELECT $qX' });
+	const context = deriveFetchContext([qX, qY]);
+
+	beforeEach(() => reset(['qX', 'qY'], context));
+
+	it('enqueues cyclic query variables as best-effort roots (not silently idle)', () => {
+		store().enqueueFetchAll(false);
+		expect(states().qX).not.toBe('idle');
+		expect(states().qY).not.toBe('idle');
 	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/variableFetchSlice.ts

@@ -6,6 +6,7 @@ import {
 	areAllQueryVariablesSettled,
 	type FetchMaps,
 	isSettled,
+	isVariableInActiveFetchState,
 	resolveFetchState,
 	unlockWaitingDynamicVariables,
 	VariableFetchState,
@@ -114,6 +115,17 @@ export const createVariableFetchSlice: StateCreator<
 				: resolveFetchState(maps, name);
 		});
 
+		// Query variables dropped from the dependency order (part of a cycle) would
+		// otherwise never fetch and would stall waiting dynamics — start them as
+		// best-effort roots so they surface data/an error instead of sitting empty.
+		const orderedQuery = new Set(queryVariableOrder);
+		Object.keys(variableTypes).forEach((name) => {
+			if (variableTypes[name] === 'QUERY' && !orderedQuery.has(name)) {
+				maps.cycleIds[name] = (maps.cycleIds[name] || 0) + 1;
+				maps.states[name] = resolveFetchState(maps, name);
+			}
+		});
+
 		// Dynamic variables: start now if query variables already have values,
 		// otherwise wait until the query variables settle.
 		dynamicVariableOrder.forEach((name) => {
@@ -131,6 +143,11 @@ export const createVariableFetchSlice: StateCreator<
 	},
 
 	onVariableFetchComplete: (name): void => {
+		// Ignore a stale/late settle for a variable no longer fetching, so a
+		// superseded cycle can't overwrite fresh state (V1 parity).
+		if (!isVariableInActiveFetchState(get().variableFetchStates[name])) {
+			return;
+		}
 		const { variableFetchContext } = get();
 		const maps = cloneMaps(get());
 		maps.states[name] = VariableFetchState.Idle;
@@ -139,12 +156,17 @@ export const createVariableFetchSlice: StateCreator<
 		if (variableFetchContext) {
 			const { dependencyData, variableTypes, dynamicVariableOrder } =
 				variableFetchContext;
-			// Unblock waiting query-type children.
+			// Unblock a waiting query child only once ALL its parents are settled —
+			// otherwise it would fetch against a not-yet-resolved parent.
 			(dependencyData.graph[name] || []).forEach((child) => {
 				if (
-					variableTypes[child] === 'QUERY' &&
-					maps.states[child] === VariableFetchState.Waiting
+					variableTypes[child] !== 'QUERY' ||
+					maps.states[child] !== VariableFetchState.Waiting
 				) {
+					return;
+				}
+				const parents = dependencyData.parentGraph[child] || [];
+				if (parents.every((p) => isSettled(maps.states[p]))) {
 					maps.states[child] = resolveFetchState(maps, child);
 				}
 			});
@@ -165,6 +187,9 @@ export const createVariableFetchSlice: StateCreator<
 	},
 
 	onVariableFetchFailure: (name): void => {
+		if (!isVariableInActiveFetchState(get().variableFetchStates[name])) {
+			return;
+		}
 		const { variableFetchContext } = get();
 		const maps = cloneMaps(get());
 		maps.states[name] = VariableFetchState.Error;
@@ -205,13 +230,14 @@ export const createVariableFetchSlice: StateCreator<
 		const { dependencyData, variableTypes, dynamicVariableOrder } =
 			variableFetchContext;
 		const maps = cloneMaps(get());
+		const changed = new Set(names);
 
-		// Union of the changed variables' query descendants, refreshed once each:
-		// refetch when all their parents are settled, else wait.
+		// Union of the changed variables' query descendants (never the changed ones
+		// themselves), refreshed once each: refetch when all parents are settled.
 		const queryDescendants = new Set<string>();
 		names.forEach((name) => {
 			(dependencyData.transitiveDescendants[name] || []).forEach((desc) => {
-				if (variableTypes[desc] === 'QUERY') {
+				if (variableTypes[desc] === 'QUERY' && !changed.has(desc)) {
 					queryDescendants.add(desc);
 				}
 			});
@@ -225,17 +251,22 @@ export const createVariableFetchSlice: StateCreator<
 				: VariableFetchState.Waiting;
 		});
 
-		// Dynamics implicitly depend on all query values: refetch now if the query
-		// variables are settled, otherwise wait for them.
-		dynamicVariableOrder.forEach((dynName) => {
-			maps.cycleIds[dynName] = (maps.cycleIds[dynName] || 0) + 1;
-			maps.states[dynName] = areAllQueryVariablesSettled(
-				maps.states,
-				variableTypes,
-			)
-				? resolveFetchState(maps, dynName)
-				: VariableFetchState.Waiting;
-		});
+		// A dynamic's options depend only on its sibling DYNAMIC selections, so only a
+		// dynamic change affects them — refresh the *other* dynamics (never the one
+		// that changed, which would refetch its own identical options).
+		if (names.some((name) => variableTypes[name] === 'DYNAMIC')) {
+			dynamicVariableOrder
+				.filter((dynName) => !changed.has(dynName))
+				.forEach((dynName) => {
+					maps.cycleIds[dynName] = (maps.cycleIds[dynName] || 0) + 1;
+					maps.states[dynName] = areAllQueryVariablesSettled(
+						maps.states,
+						variableTypes,
+					)
+						? resolveFetchState(maps, dynName)
+						: VariableFetchState.Waiting;
+				});
+		}
 
 		set({
 			variableFetchStates: maps.states,

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/variableFetchSlice.utils.ts

@@ -21,6 +21,13 @@ export function isSettled(state: VariableFetchState | undefined): boolean {
 	return state === VariableFetchState.Idle || state === VariableFetchState.Error;
 }
 
+/** Active = a fetch is in flight; only then should a settle be applied. */
+export function isVariableInActiveFetchState(
+	state: VariableFetchState | undefined,
+): boolean {
+	return state === 'loading' || state === 'revalidating';
+}
+
 /** Fetch-start state: `revalidating` if fetched before, else `loading`. */
 export function resolveFetchState(
 	maps: FetchMaps,

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