feat: common settings card

Swap the value picker from @signozhq SelectSimple to the shared NewSelect
CustomSelect/CustomMultiSelect, which provide search, the ALL option and
apply-on-close batching (multi-select edits no longer cascade per toggle).
Deliberate exception to the @signozhq-first preference — reuses the existing,
richer variable-selection control.

docs/api/openapi.yml

@@ -2436,13 +2436,6 @@ components:
         url:
           type: string
       type: object
-    DashboardPanelDisplay:
-      properties:
-        description:
-          type: string
-        name:
-          type: string
-      type: object
     DashboardTextVariableSpec:
       properties:
         constant:
@@ -2570,13 +2563,12 @@ components:
             $ref: '#/components/schemas/DashboardtypesDatasourceSpec'
           type: object
         display:
-          $ref: '#/components/schemas/CommonDisplay'
+          $ref: '#/components/schemas/DashboardtypesDisplay'
         duration:
           type: string
         layouts:
           items:
             $ref: '#/components/schemas/DashboardtypesLayout'
-          nullable: true
           type: array
         links:
           items:
@@ -2585,7 +2577,6 @@ components:
         panels:
           additionalProperties:
             $ref: '#/components/schemas/DashboardtypesPanel'
-          nullable: true
           type: object
         refreshInterval:
           type: string
@@ -2593,6 +2584,11 @@ components:
           items:
             $ref: '#/components/schemas/DashboardtypesVariable'
           type: array
+      required:
+      - display
+      - variables
+      - panels
+      - layouts
       type: object
     DashboardtypesDatasourcePlugin:
       discriminator:
@@ -2628,6 +2624,15 @@ components:
         plugin:
           $ref: '#/components/schemas/DashboardtypesDatasourcePlugin'
       type: object
+    DashboardtypesDisplay:
+      properties:
+        description:
+          type: string
+        name:
+          type: string
+      required:
+      - name
+      type: object
     DashboardtypesDynamicVariableSpec:
       properties:
         name:
@@ -2822,7 +2827,7 @@ components:
         defaultValue:
           $ref: '#/components/schemas/VariableDefaultValue'
         display:
-          $ref: '#/components/schemas/VariableDisplay'
+          $ref: '#/components/schemas/DashboardtypesDisplay'
         name:
           type: string
         plugin:
@@ -2830,6 +2835,8 @@ components:
         sort:
           nullable: true
           type: string
+      required:
+      - display
       type: object
     DashboardtypesListableDashboardForUserV2:
       properties:
@@ -2957,7 +2964,7 @@ components:
     DashboardtypesListedDashboardV2Spec:
       properties:
         display:
-          $ref: '#/components/schemas/CommonDisplay'
+          $ref: '#/components/schemas/DashboardtypesDisplay'
       type: object
     DashboardtypesNumberPanelSpec:
       properties:
@@ -2977,6 +2984,9 @@ components:
           $ref: '#/components/schemas/DashboardtypesPanelKind'
         spec:
           $ref: '#/components/schemas/DashboardtypesPanelSpec'
+      required:
+      - kind
+      - spec
       type: object
     DashboardtypesPanelFormatting:
       properties:
@@ -3106,7 +3116,7 @@ components:
     DashboardtypesPanelSpec:
       properties:
         display:
-          $ref: '#/components/schemas/DashboardPanelDisplay'
+          $ref: '#/components/schemas/DashboardtypesDisplay'
         links:
           items:
             $ref: '#/components/schemas/DashboardLink'
@@ -3116,7 +3126,12 @@ components:
         queries:
           items:
             $ref: '#/components/schemas/DashboardtypesQuery'
+          nullable: true
           type: array
+      required:
+      - display
+      - plugin
+      - queries
       type: object
     DashboardtypesPatchOp:
       enum:
@@ -3185,6 +3200,9 @@ components:
           $ref: '#/components/schemas/Querybuildertypesv5RequestType'
         spec:
           $ref: '#/components/schemas/DashboardtypesQuerySpec'
+      required:
+      - kind
+      - spec
       type: object
     DashboardtypesQueryPlugin:
       discriminator:
@@ -3291,6 +3309,8 @@ components:
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesQueryPlugin'
+      required:
+      - plugin
       type: object
     DashboardtypesQueryVariableSpec:
       properties:

ee/modules/dashboard/impldashboard/module.go

@@ -254,12 +254,12 @@ func (module *module) PinV2(ctx context.Context, orgID valuer.UUID, userID value
 	return module.pkgDashboardModule.PinV2(ctx, orgID, userID, id)
 }
 
-func (module *module) UnpinV2(ctx context.Context, userID valuer.UUID, id valuer.UUID) error {
-	return module.pkgDashboardModule.UnpinV2(ctx, userID, id)
+func (module *module) UnpinV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, id valuer.UUID) error {
+	return module.pkgDashboardModule.UnpinV2(ctx, orgID, userID, id)
 }
 
-func (module *module) DeletePreferencesForUser(ctx context.Context, userID valuer.UUID) error {
-	return module.pkgDashboardModule.DeletePreferencesForUser(ctx, userID)
+func (module *module) DeletePreferencesForUser(ctx context.Context, orgID valuer.UUID, userID valuer.UUID) error {
+	return module.pkgDashboardModule.DeletePreferencesForUser(ctx, orgID, userID)
 }
 
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {

ee/query-service/app/server.go

@@ -185,6 +185,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		s.config.APIServer.Timeout.Default,
 		s.config.APIServer.Timeout.Max,
 	).Wrap)
+	r.Use(middleware.NewResource(s.signoz.Instrumentation.Logger()).Wrap)
 	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, s.signoz.Auditor).Wrap)
 	r.Use(middleware.NewComment().Wrap)
 

frontend/src/AppRoutes/pageComponents.ts

@@ -323,10 +323,3 @@ export const AIAssistantPage = Loadable(
 			/* webpackChunkName: "AI Assistant Page" */ 'pages/AIAssistantPage/AIAssistantPage'
 		),
 );
-
-export const LLMObservabilityModelPricingPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "LLM Observability Model Pricing Page" */ 'pages/LLMObservabilityModelPricing'
-		),
-);

frontend/src/AppRoutes/routes.ts

@@ -22,7 +22,6 @@ import {
 	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
-	LLMObservabilityModelPricingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -508,13 +507,6 @@ const routes: AppRoutes[] = [
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
-		exact: true,
-		component: LLMObservabilityModelPricingPage,
-		key: 'LLM_OBSERVABILITY_MODEL_PRICING',
-		isPrivate: true,
-	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

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

@@ -3156,17 +3156,6 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
-export interface DashboardPanelDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
 export interface VariableDisplayDTO {
 	/**
 	 * @type string
@@ -3892,6 +3881,17 @@ export type DashboardtypesDashboardSpecDTODatasources = {
 export enum DashboardtypesPanelKindDTO {
 	Panel = 'Panel',
 }
+export interface DashboardtypesDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTOKind {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 }
@@ -4440,42 +4440,36 @@ export interface DashboardtypesQuerySpecDTO {
 	 * @type string
 	 */
 	name?: string;
-	plugin?: DashboardtypesQueryPluginDTO;
+	plugin: DashboardtypesQueryPluginDTO;
 }
 
 export interface DashboardtypesQueryDTO {
-	kind?: Querybuildertypesv5RequestTypeDTO;
-	spec?: DashboardtypesQuerySpecDTO;
+	kind: Querybuildertypesv5RequestTypeDTO;
+	spec: DashboardtypesQuerySpecDTO;
 }
 
 export interface DashboardtypesPanelSpecDTO {
-	display?: DashboardPanelDisplayDTO;
+	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type array
 	 */
 	links?: DashboardLinkDTO[];
-	plugin?: DashboardtypesPanelPluginDTO;
+	plugin: DashboardtypesPanelPluginDTO;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	queries?: DashboardtypesQueryDTO[];
+	queries: DashboardtypesQueryDTO[] | null;
 }
 
 export interface DashboardtypesPanelDTO {
-	kind?: DashboardtypesPanelKindDTO;
-	spec?: DashboardtypesPanelSpecDTO;
+	kind: DashboardtypesPanelKindDTO;
+	spec: DashboardtypesPanelSpecDTO;
 }
 
-export type DashboardtypesDashboardSpecDTOPanelsAnyOf = {
+export type DashboardtypesDashboardSpecDTOPanels = {
 	[key: string]: DashboardtypesPanelDTO;
 };
 
-/**
- * @nullable
- */
-export type DashboardtypesDashboardSpecDTOPanels =
-	DashboardtypesDashboardSpecDTOPanelsAnyOf | null;
-
 export enum DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind {
 	Grid = 'Grid',
 }
@@ -4572,7 +4566,7 @@ export interface DashboardtypesListVariableSpecDTO {
 	 */
 	customAllValue?: string;
 	defaultValue?: VariableDefaultValueDTO;
-	display?: VariableDisplayDTO;
+	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
 	 */
@@ -4614,23 +4608,23 @@ export interface DashboardtypesDashboardSpecDTO {
 	 * @type object
 	 */
 	datasources?: DashboardtypesDashboardSpecDTODatasources;
-	display?: CommonDisplayDTO;
+	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
 	 */
 	duration?: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	layouts?: DashboardtypesLayoutDTO[] | null;
+	layouts: DashboardtypesLayoutDTO[];
 	/**
 	 * @type array
 	 */
 	links?: DashboardLinkDTO[];
 	/**
-	 * @type object,null
+	 * @type object
 	 */
-	panels?: DashboardtypesDashboardSpecDTOPanels;
+	panels: DashboardtypesDashboardSpecDTOPanels;
 	/**
 	 * @type string
 	 */
@@ -4638,7 +4632,7 @@ export interface DashboardtypesDashboardSpecDTO {
 	/**
 	 * @type array
 	 */
-	variables?: DashboardtypesVariableDTO[];
+	variables: DashboardtypesVariableDTO[];
 }
 
 export enum DashboardtypesDatasourcePluginKindDTO {
@@ -4762,7 +4756,7 @@ export enum DashboardtypesListSortDTO {
 	name = 'name',
 }
 export interface DashboardtypesListedDashboardV2SpecDTO {
-	display?: CommonDisplayDTO;
+	display?: DashboardtypesDisplayDTO;
 }
 
 export interface DashboardtypesListedDashboardForUserV2DTO {

frontend/src/constants/routes.ts

@@ -91,7 +91,6 @@ const ROUTES = {
 	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
-	LLM_OBSERVABILITY_MODEL_PRICING: '/llm-observability/model-pricing',
 } as const;
 
 export default ROUTES;

frontend/src/container/AIAssistant/hooks/useSpeechRecognition.ts

@@ -40,13 +40,31 @@ type SpeechRecognitionConstructor = new () => ISpeechRecognition;
 
 // ── Vendor-prefix shim for Safari / older browsers ────────────────────────────
 
-const SpeechRecognitionAPI: SpeechRecognitionConstructor | null =
-	typeof window !== 'undefined'
-		? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-			((window as any).SpeechRecognition ??
+// Some hardened/enterprise browsers install a getter
+// on window.SpeechRecognition that THROWS on access ("Web Speech API is disabled
+// due to your security policy") instead of leaving the property undefined.
+// Because this resolves at module-evaluation time, an uncaught throw here aborts
+// the entire bundle and the app renders a blank page. Read defensively so a
+// throwing getter degrades to "unsupported" rather than crashing the app.
+function resolveSpeechRecognitionAPI(): SpeechRecognitionConstructor | null {
+	if (typeof window === 'undefined') {
+		return null;
+	}
+	try {
+		return (
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(window as any).SpeechRecognition ??
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			(window as any).webkitSpeechRecognition ??
-			null)
-		: null;
+			null
+		);
+	} catch {
+		return null;
+	}
+}
+
+const SpeechRecognitionAPI: SpeechRecognitionConstructor | null =
+	resolveSpeechRecognitionAPI();
 
 export type SpeechRecognitionError =
 	| 'not-supported'

frontend/src/container/LLMObservabilityModelPricing/LLMObservabilityModelPricing.styles.scss

@@ -1,140 +0,0 @@
-.llm-observability-model-pricing {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	padding: 24px 32px;
-
-	.page-header {
-		display: flex;
-		align-items: flex-start;
-		justify-content: space-between;
-		gap: 16px;
-
-		&__title {
-			h1 {
-				margin: 0;
-				font-size: 22px;
-				font-weight: 600;
-			}
-
-			p {
-				margin: 4px 0 0;
-				color: var(--bg-vanilla-400);
-				font-size: 13px;
-			}
-		}
-
-		&__actions {
-			display: flex;
-			gap: 8px;
-		}
-	}
-
-	.page-tabs {
-		.ant-tabs-nav {
-			margin-bottom: 0;
-		}
-	}
-
-	.filters-bar {
-		display: flex;
-		gap: 12px;
-		align-items: center;
-
-		&__search {
-			flex: 1;
-			max-width: 360px;
-		}
-
-		&__source,
-		&__currency {
-			min-width: 160px;
-		}
-
-		&__add {
-			margin-left: auto;
-		}
-	}
-
-	.page-error {
-		padding: 12px 16px;
-		border-radius: 4px;
-		background: rgba(255, 90, 90, 0.08);
-		color: var(--bg-cherry-400);
-		font-size: 13px;
-	}
-
-	.page-footer {
-		color: var(--bg-vanilla-400);
-		font-size: 12px;
-	}
-}
-
-.model-costs-table {
-	.model-cell {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-
-		&__name {
-			font-weight: 600;
-		}
-
-		&__canonical-id {
-			color: var(--bg-vanilla-400);
-			font-family: var(--code-font-family, monospace);
-			font-size: 12px;
-		}
-	}
-
-	.price-cell {
-		font-family: var(--code-font-family, monospace);
-	}
-
-	.extra-buckets {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 6px;
-
-		&__chip {
-			display: inline-flex;
-			align-items: center;
-			gap: 6px;
-			margin: 0;
-		}
-
-		&__key {
-			font-family: var(--code-font-family, monospace);
-			font-size: 12px;
-		}
-
-		&__price {
-			font-family: var(--code-font-family, monospace);
-			font-weight: 600;
-		}
-	}
-
-	.muted {
-		color: var(--bg-vanilla-400);
-	}
-
-	.source-badge {
-		margin: 0;
-
-		&--auto {
-			background: rgba(78, 116, 248, 0.12);
-			color: var(--bg-robin-400);
-			border-color: rgba(78, 116, 248, 0.24);
-		}
-
-		&--override {
-			background: rgba(245, 175, 25, 0.12);
-			color: var(--bg-amber-400);
-			border-color: rgba(245, 175, 25, 0.24);
-		}
-	}
-
-	&__row--selected {
-		background: rgba(78, 116, 248, 0.06);
-	}
-}

frontend/src/container/LLMObservabilityModelPricing/LLMObservabilityModelPricing.tsx

@@ -1,140 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Button, Input, Select, Tabs } from 'antd';
-import { Plus, Search } from '@signozhq/icons';
-import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
-
-import ModelCostDrawer from './ModelCostDrawer';
-import ModelCostsTable from './ModelCostsTable';
-import { useModelCostDrawer } from './useModelCostDrawer';
-import { filterRules, type PricingRule, type SourceFilter } from './utils';
-
-import './LLMObservabilityModelPricing.styles.scss';
-
-const SOURCE_OPTIONS: { value: SourceFilter; label: string }[] = [
-	{ value: 'all', label: 'Source: All' },
-	{ value: 'auto', label: 'Auto-populated' },
-	{ value: 'override', label: 'User override' },
-];
-
-const CURRENCY_OPTIONS = [
-	{ value: 'USD', label: 'USD' },
-	{ value: 'EUR', label: 'EUR', disabled: true },
-	{ value: 'INR', label: 'INR', disabled: true },
-];
-
-const PAGE_SIZE = 100;
-
-function LLMObservabilityModelPricing(): JSX.Element {
-	const [search, setSearch] = useState<string>('');
-	const [source, setSource] = useState<SourceFilter>('all');
-	const [currency, setCurrency] = useState<string>('USD');
-
-	const { data, isLoading, isError } = useListLLMPricingRules({
-		offset: 0,
-		limit: PAGE_SIZE,
-	});
-
-	const rules: PricingRule[] = useMemo(() => data?.data?.items || [], [data]);
-
-	const filteredRules = useMemo(
-		() => filterRules(rules, search, source),
-		[rules, search, source],
-	);
-
-	const drawer = useModelCostDrawer();
-
-	return (
-		<div
-			className="llm-observability-model-pricing"
-			data-testid="llm-observability-model-pricing-page"
-		>
-			<header className="page-header">
-				<div className="page-header__title">
-					<h1>Configuration</h1>
-					<p>Model pricing and cost estimation settings</p>
-				</div>
-			</header>
-
-			<Tabs
-				className="page-tabs"
-				defaultActiveKey="model-costs"
-				items={[
-					{ key: 'model-costs', label: 'Model costs' },
-					{
-						key: 'unpriced-models',
-						label: 'Unpriced models',
-						disabled: true,
-					},
-				]}
-			/>
-
-			<div className="filters-bar">
-				<Input
-					className="filters-bar__search"
-					placeholder="Search by model or provider…"
-					prefix={<Search size={14} />}
-					value={search}
-					onChange={(event): void => setSearch(event.target.value)}
-					data-testid="search-input"
-					allowClear
-				/>
-				<Select<SourceFilter>
-					className="filters-bar__source"
-					value={source}
-					onChange={(value): void => setSource(value)}
-					options={SOURCE_OPTIONS}
-					data-testid="source-select"
-				/>
-				<Select<string>
-					className="filters-bar__currency"
-					value={currency}
-					onChange={(value): void => setCurrency(value)}
-					options={CURRENCY_OPTIONS}
-					data-testid="currency-select"
-				/>
-				<Button
-					type="primary"
-					className="filters-bar__add"
-					icon={<Plus size={14} />}
-					onClick={(): void => drawer.openForAdd()}
-					data-testid="add-model-cost-btn"
-				>
-					Add model cost
-				</Button>
-			</div>
-
-			{isError && (
-				<div className="page-error" role="alert">
-					Failed to load pricing rules. Please try again.
-				</div>
-			)}
-
-			<ModelCostsTable
-				rules={filteredRules}
-				isLoading={isLoading}
-				selectedRuleId={drawer.selectedRuleId}
-				onEdit={drawer.openForEdit}
-			/>
-
-			<footer className="page-footer">
-				Showing {filteredRules.length} model{filteredRules.length === 1 ? '' : 's'}
-				{' · '}All prices per 1M tokens (USD)
-			</footer>
-
-			<ModelCostDrawer
-				isOpen={drawer.isOpen}
-				mode={drawer.mode}
-				draft={drawer.draft}
-				setDraft={drawer.setDraft}
-				onClose={drawer.close}
-				onSave={drawer.save}
-				onDelete={drawer.deleteRule}
-				isSaving={drawer.isSaving}
-				isDeleting={drawer.isDeleting}
-				saveError={drawer.saveError}
-			/>
-		</div>
-	);
-}
-
-export default LLMObservabilityModelPricing;

frontend/src/container/LLMObservabilityModelPricing/ModelCostDrawer.styles.scss

@@ -1,256 +0,0 @@
-.model-cost-drawer {
-	.ant-drawer-body {
-		padding: 20px 24px;
-		display: flex;
-		flex-direction: column;
-		gap: 18px;
-	}
-
-	&__title {
-		h3 {
-			margin: 0;
-			font-size: 16px;
-			font-weight: 600;
-		}
-
-		p {
-			margin: 4px 0 0;
-			color: var(--bg-vanilla-400);
-			font-size: 12px;
-		}
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 12px 16px;
-		border-top: 1px solid var(--bg-slate-300);
-
-		&-right {
-			display: flex;
-			gap: 8px;
-			margin-left: auto;
-		}
-	}
-
-	.drawer-section {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-
-		label,
-		.field-label {
-			font-size: 12px;
-			font-weight: 600;
-			color: var(--bg-vanilla-200);
-		}
-
-		.help {
-			margin: 0;
-			font-size: 11px;
-		}
-	}
-
-	.muted {
-		color: var(--bg-vanilla-400);
-	}
-
-	.required {
-		color: var(--bg-cherry-400);
-	}
-
-	.full-width {
-		width: 100%;
-	}
-
-	.drawer-surface {
-		padding: 14px;
-		border-radius: 6px;
-		background: rgba(255, 255, 255, 0.02);
-		border: 1px solid var(--bg-slate-300);
-
-		&__head {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			margin-bottom: 10px;
-
-			h4 {
-				margin: 0;
-				font-size: 13px;
-				font-weight: 600;
-				text-transform: uppercase;
-				letter-spacing: 0.04em;
-				color: var(--bg-vanilla-300);
-			}
-		}
-	}
-
-	.managed-label {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		font-size: 11px;
-		color: var(--bg-vanilla-400);
-	}
-
-	.pattern-chips {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 6px;
-		min-height: 28px;
-	}
-
-	.pattern-chip {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-
-		&__remove {
-			background: transparent;
-			border: none;
-			padding: 0;
-			margin-left: 2px;
-			cursor: pointer;
-			color: inherit;
-			display: inline-flex;
-			align-items: center;
-
-			&:hover {
-				color: var(--bg-cherry-400);
-			}
-		}
-	}
-
-	.pattern-add {
-		display: flex;
-		gap: 6px;
-	}
-
-	.pattern-test {
-		display: flex;
-		gap: 10px;
-		align-items: center;
-		flex-wrap: wrap;
-		margin-top: 6px;
-
-		&__result {
-			font-size: 12px;
-
-			&--match {
-				color: var(--bg-forest-400);
-			}
-
-			&--no-match {
-				color: var(--bg-cherry-400);
-			}
-		}
-	}
-
-	.source-radio-group {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		width: 100%;
-	}
-
-	.source-radio {
-		display: flex;
-		align-items: flex-start;
-		gap: 8px;
-		padding: 10px 12px;
-		border-radius: 4px;
-		border: 1px solid transparent;
-		background: rgba(255, 255, 255, 0.02);
-		margin: 0;
-		width: 100%;
-
-		&__title {
-			font-weight: 600;
-			font-size: 13px;
-		}
-
-		&__desc {
-			font-size: 12px;
-			color: var(--bg-vanilla-400);
-		}
-
-		&.ant-radio-wrapper-checked.source-radio--auto {
-			background: rgba(78, 116, 248, 0.1);
-			border-color: rgba(78, 116, 248, 0.3);
-		}
-
-		&.ant-radio-wrapper-checked.source-radio--override {
-			background: rgba(245, 175, 25, 0.1);
-			border-color: rgba(245, 175, 25, 0.3);
-		}
-	}
-
-	.reset-confirm {
-		margin-top: 12px;
-		padding: 12px;
-		border-radius: 4px;
-		background: rgba(78, 116, 248, 0.06);
-		border: 1px solid rgba(78, 116, 248, 0.2);
-
-		p {
-			margin: 0 0 10px;
-			font-size: 12px;
-		}
-
-		&__actions {
-			display: flex;
-			gap: 8px;
-			justify-content: flex-end;
-		}
-	}
-
-	.pricing-grid {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 12px;
-	}
-
-	.pricing-field {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-
-		.ant-input-number {
-			width: 100%;
-		}
-	}
-
-	.cache-mode-field {
-		margin-top: 10px;
-	}
-
-	.extras-divider {
-		margin-top: 14px;
-		margin-bottom: 6px;
-		font-size: 11px;
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		color: var(--bg-vanilla-400);
-	}
-
-	.cost-preview {
-		&__line {
-			font-family: var(--code-font-family, monospace);
-			font-size: 12px;
-
-			strong {
-				margin-left: 4px;
-			}
-		}
-	}
-
-	.drawer-error {
-		padding: 10px 12px;
-		border-radius: 4px;
-		background: rgba(255, 90, 90, 0.08);
-		color: var(--bg-cherry-400);
-		font-size: 12px;
-	}
-}

frontend/src/container/LLMObservabilityModelPricing/ModelCostDrawer.tsx

@@ -1,413 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Button, Drawer, Input, InputNumber, Select, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
-import { Lock, Trash2, X } from '@signozhq/icons';
-import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
-
-import {
-	CACHE_MODE_OPTIONS,
-	computeCostPreview,
-	matchesAnyPattern,
-	PROVIDER_OPTIONS,
-	validateDraft,
-	type DrawerDraft,
-	type DrawerMode,
-} from './drawerUtils';
-import './ModelCostDrawer.styles.scss';
-
-interface ModelCostDrawerProps {
-	isOpen: boolean;
-	mode: DrawerMode;
-	draft: DrawerDraft;
-	setDraft: (next: DrawerDraft) => void;
-	onClose: () => void;
-	onSave: () => void;
-	onDelete: () => void;
-	isSaving: boolean;
-	isDeleting: boolean;
-	saveError: string | null;
-}
-
-function ModelCostDrawer({
-	isOpen,
-	mode,
-	draft,
-	setDraft,
-	onClose,
-	onSave,
-	onDelete,
-	isSaving,
-	isDeleting,
-	saveError,
-}: ModelCostDrawerProps): JSX.Element {
-	const [patternInput, setPatternInput] = useState<string>('');
-	const [testInput, setTestInput] = useState<string>('');
-	const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
-	const isReadOnly = !draft.isOverride;
-
-	const validation = validateDraft(draft, mode);
-	const preview = useMemo(() => computeCostPreview(draft), [draft]);
-	const testMatch = useMemo(
-		() => (testInput ? matchesAnyPattern(testInput, draft.patterns) : null),
-		[testInput, draft.patterns],
-	);
-
-	const update = (patch: Partial<DrawerDraft>): void => {
-		setDraft({ ...draft, ...patch });
-	};
-
-	const updatePricing = (patch: Partial<DrawerDraft['pricing']>): void => {
-		setDraft({ ...draft, pricing: { ...draft.pricing, ...patch } });
-	};
-
-	const addPattern = (): void => {
-		const next = patternInput.trim();
-		if (!next || draft.patterns.includes(next)) {
-			setPatternInput('');
-			return;
-		}
-		update({ patterns: [...draft.patterns, next] });
-		setPatternInput('');
-	};
-
-	const removePattern = (pattern: string): void => {
-		update({ patterns: draft.patterns.filter((p) => p !== pattern) });
-	};
-
-	const handleSourceChange = (value: 'auto' | 'override'): void => {
-		if (value === 'auto' && draft.isOverride) {
-			setShowResetConfirm(true);
-			return;
-		}
-		if (value === 'override' && !draft.isOverride) {
-			update({ isOverride: true });
-		}
-	};
-
-	const confirmReset = (): void => {
-		update({ isOverride: false });
-		setShowResetConfirm(false);
-	};
-
-	const hasCacheBucket =
-		draft.pricing.cacheRead !== null || draft.pricing.cacheWrite !== null;
-
-	return (
-		<Drawer
-			width={520}
-			open={isOpen}
-			onClose={onClose}
-			placement="right"
-			className="model-cost-drawer"
-			destroyOnClose
-			closeIcon={<X size={16} />}
-			title={
-				<div className="model-cost-drawer__title">
-					<h3>{mode === 'edit' ? 'Edit model cost' : 'Add model cost'}</h3>
-					<p>Pricing computes gen_ai.estimated_total_cost at ingest.</p>
-				</div>
-			}
-			footer={
-				<div className="model-cost-drawer__footer">
-					{mode === 'edit' && (
-						<Button
-							danger
-							type="text"
-							icon={<Trash2 size={14} />}
-							onClick={onDelete}
-							loading={isDeleting}
-							data-testid="drawer-delete-btn"
-						>
-							Delete
-						</Button>
-					)}
-					<div className="model-cost-drawer__footer-right">
-						<Button onClick={onClose} data-testid="drawer-cancel-btn">
-							Cancel
-						</Button>
-						<Tooltip title={validation.ok ? '' : validation.message}>
-							<Button
-								type="primary"
-								onClick={onSave}
-								loading={isSaving}
-								disabled={!validation.ok}
-								data-testid="drawer-save-btn"
-							>
-								Save
-							</Button>
-						</Tooltip>
-					</div>
-				</div>
-			}
-		>
-			<div className="drawer-section">
-				<label htmlFor="billing-model-id">Billing model ID</label>
-				<Input
-					id="billing-model-id"
-					placeholder="e.g. openai:gpt-4o"
-					value={draft.modelName}
-					disabled={mode === 'edit'}
-					onChange={(e): void => update({ modelName: e.target.value })}
-					data-testid="drawer-model-id-input"
-				/>
-			</div>
-
-			<div className="drawer-section">
-				<label htmlFor="provider-select">Provider</label>
-				<Select
-					id="provider-select"
-					value={draft.provider}
-					onChange={(value): void => update({ provider: value })}
-					options={PROVIDER_OPTIONS}
-					disabled={isReadOnly}
-					className="full-width"
-					data-testid="drawer-provider-select"
-				/>
-			</div>
-
-			<div className="drawer-section">
-				<span className="field-label">
-					Model name patterns <span className="muted">(prefix match)</span>
-				</span>
-				<div className="pattern-chips">
-					{draft.patterns.map((pattern) => (
-						<Badge
-							key={pattern}
-							color="forest"
-							variant="outline"
-							className="pattern-chip"
-						>
-							{pattern}*
-							{!isReadOnly && (
-								<button
-									type="button"
-									aria-label={`Remove pattern ${pattern}`}
-									className="pattern-chip__remove"
-									onClick={(): void => removePattern(pattern)}
-								>
-									<X size={10} />
-								</button>
-							)}
-						</Badge>
-					))}
-				</div>
-				{!isReadOnly && (
-					<div className="pattern-add">
-						<Input
-							placeholder="Add pattern…"
-							value={patternInput}
-							onChange={(e): void => setPatternInput(e.target.value)}
-							onPressEnter={addPattern}
-							data-testid="drawer-pattern-input"
-						/>
-						<Button onClick={addPattern} data-testid="drawer-pattern-add-btn">
-							+ Add
-						</Button>
-					</div>
-				)}
-				<p className="muted help">
-					Each pattern uses prefix matching against gen_ai.request.model.
-				</p>
-				{!isReadOnly && (
-					<div className="pattern-test">
-						<Input
-							placeholder="Test: type a model name…"
-							value={testInput}
-							onChange={(e): void => setTestInput(e.target.value)}
-							data-testid="drawer-pattern-test-input"
-						/>
-						{testInput && (
-							<span
-								className={`pattern-test__result ${
-									testMatch
-										? 'pattern-test__result--match'
-										: 'pattern-test__result--no-match'
-								}`}
-								data-testid="drawer-pattern-test-result"
-							>
-								{testMatch ? `Matched: ${testMatch}*` : 'No matching pattern'}
-							</span>
-						)}
-					</div>
-				)}
-			</div>
-
-			<div className="drawer-section drawer-surface">
-				<div className="drawer-surface__head">
-					<h4>Source</h4>
-					{isReadOnly && (
-						<span className="managed-label">
-							<Lock size={12} />
-							Managed by SigNoz
-						</span>
-					)}
-				</div>
-				<RadioGroup
-					value={draft.isOverride ? 'override' : 'auto'}
-					onChange={(value): void =>
-						handleSourceChange(value as 'auto' | 'override')
-					}
-					className="source-radio-group"
-				>
-					<RadioGroupItem
-						value="auto"
-						className="source-radio source-radio--auto"
-						testId="drawer-source-auto"
-					>
-						<div className="source-radio__title">Auto-populated</div>
-						<div className="source-radio__desc">
-							Default pricing from SigNoz. Updated automatically.
-						</div>
-					</RadioGroupItem>
-					<RadioGroupItem
-						value="override"
-						className="source-radio source-radio--override"
-						testId="drawer-source-override"
-					>
-						<div className="source-radio__title">User override</div>
-						<div className="source-radio__desc">
-							Custom pricing. Takes precedence.
-						</div>
-					</RadioGroupItem>
-				</RadioGroup>
-				{showResetConfirm && (
-					<div
-						className="reset-confirm"
-						role="dialog"
-						aria-label="Reset to default pricing"
-					>
-						<p>Reset to default pricing? Custom values will be discarded.</p>
-						<div className="reset-confirm__actions">
-							<Button
-								onClick={(): void => setShowResetConfirm(false)}
-								data-testid="drawer-reset-keep-btn"
-							>
-								Keep
-							</Button>
-							<Button
-								type="primary"
-								onClick={confirmReset}
-								data-testid="drawer-reset-confirm-btn"
-							>
-								Reset
-							</Button>
-						</div>
-					</div>
-				)}
-			</div>
-
-			<div className="drawer-section drawer-surface">
-				<div className="drawer-surface__head">
-					<h4>Pricing (per 1M tokens, USD)</h4>
-					{isReadOnly && (
-						<span className="managed-label">
-							<Lock size={12} />
-							Read-only
-						</span>
-					)}
-				</div>
-				<div className="pricing-grid">
-					<div className="pricing-field">
-						<label htmlFor="input-cost">
-							Input cost <span className="required">*</span>
-						</label>
-						<InputNumber
-							id="input-cost"
-							min={0}
-							step={0.01}
-							value={draft.pricing.input}
-							onChange={(v): void => updatePricing({ input: Number(v) || 0 })}
-							disabled={isReadOnly}
-							data-testid="drawer-input-cost"
-						/>
-					</div>
-					<div className="pricing-field">
-						<label htmlFor="output-cost">
-							Output cost <span className="required">*</span>
-						</label>
-						<InputNumber
-							id="output-cost"
-							min={0}
-							step={0.01}
-							value={draft.pricing.output}
-							onChange={(v): void => updatePricing({ output: Number(v) || 0 })}
-							disabled={isReadOnly}
-							data-testid="drawer-output-cost"
-						/>
-					</div>
-				</div>
-
-				<div className="extras-divider">Extra pricing buckets</div>
-				<div className="pricing-grid">
-					<div className="pricing-field">
-						<label htmlFor="cache-read">cache_read</label>
-						<InputNumber
-							id="cache-read"
-							min={0}
-							step={0.01}
-							value={draft.pricing.cacheRead ?? undefined}
-							placeholder="—"
-							onChange={(v): void =>
-								updatePricing({ cacheRead: v === null ? null : Number(v) })
-							}
-							disabled={isReadOnly}
-							data-testid="drawer-cache-read-cost"
-						/>
-					</div>
-					<div className="pricing-field">
-						<label htmlFor="cache-write">cache_write</label>
-						<InputNumber
-							id="cache-write"
-							min={0}
-							step={0.01}
-							value={draft.pricing.cacheWrite ?? undefined}
-							placeholder="—"
-							onChange={(v): void =>
-								updatePricing({ cacheWrite: v === null ? null : Number(v) })
-							}
-							disabled={isReadOnly}
-							data-testid="drawer-cache-write-cost"
-						/>
-					</div>
-				</div>
-				{hasCacheBucket && (
-					<div className="pricing-field cache-mode-field">
-						<label htmlFor="cache-mode">Cache mode</label>
-						<Select
-							id="cache-mode"
-							value={draft.pricing.cacheMode}
-							options={CACHE_MODE_OPTIONS}
-							onChange={(v): void => updatePricing({ cacheMode: v as CacheModeDTO })}
-							disabled={isReadOnly}
-							className="full-width"
-							data-testid="drawer-cache-mode"
-						/>
-					</div>
-				)}
-				<p className="muted help">Image tokens may be priced differently (v2).</p>
-			</div>
-
-			<div className="drawer-section drawer-surface cost-preview">
-				<div className="drawer-surface__head">
-					<h4>Cost preview</h4>
-				</div>
-				<div className="cost-preview__line">
-					{preview.breakdown.map((part) => part.label).join(' + ')} ={' '}
-					<strong>≈ ${preview.total.toFixed(4)}</strong>
-				</div>
-				<p className="muted help">
-					Write-time attribution. Changes only affect new spans.
-				</p>
-			</div>
-
-			{saveError && (
-				<div className="drawer-error" role="alert">
-					{saveError}
-				</div>
-			)}
-		</Drawer>
-	);
-}
-
-export default ModelCostDrawer;

frontend/src/container/LLMObservabilityModelPricing/ModelCostsTable.tsx

@@ -1,146 +0,0 @@
-import { Button, Table, type TableColumnsType } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { ChevronDown } from '@signozhq/icons';
-
-import {
-	formatPricePerMillion,
-	getCanonicalId,
-	getExtraBuckets,
-	getRelativeLastSeen,
-	getSourceLabel,
-	type PricingRule,
-} from './utils';
-
-interface ModelCostsTableProps {
-	rules: PricingRule[];
-	isLoading: boolean;
-	selectedRuleId: string | null;
-	onEdit: (rule: PricingRule) => void;
-}
-
-function ModelCostsTable({
-	rules,
-	isLoading,
-	selectedRuleId,
-	onEdit,
-}: ModelCostsTableProps): JSX.Element {
-	const columns: TableColumnsType<PricingRule> = [
-		{
-			title: 'Model',
-			dataIndex: 'modelName',
-			key: 'model',
-			render: (_value, rule): JSX.Element => (
-				<div className="model-cell">
-					<div className="model-cell__name">{rule.modelName}</div>
-					<div className="model-cell__canonical-id">{getCanonicalId(rule)}</div>
-				</div>
-			),
-		},
-		{
-			title: 'Provider',
-			dataIndex: 'provider',
-			key: 'provider',
-		},
-		{
-			title: 'Input / 1M',
-			key: 'input',
-			render: (_value, rule): JSX.Element => (
-				<span className="price-cell">
-					{formatPricePerMillion(rule.pricing?.input)}
-				</span>
-			),
-		},
-		{
-			title: 'Output / 1M',
-			key: 'output',
-			render: (_value, rule): JSX.Element => (
-				<span className="price-cell">
-					{formatPricePerMillion(rule.pricing?.output)}
-				</span>
-			),
-		},
-		{
-			title: 'Extra buckets',
-			key: 'extra-buckets',
-			render: (_value, rule): JSX.Element => {
-				const buckets = getExtraBuckets(rule);
-				if (buckets.length === 0) {
-					return <span className="muted">—</span>;
-				}
-				return (
-					<div className="extra-buckets">
-						{buckets.map((bucket) => (
-							<Badge
-								key={bucket.key}
-								color="vanilla"
-								variant="outline"
-								className="extra-buckets__chip"
-							>
-								<span className="extra-buckets__key">{bucket.key}</span>
-								<span className="extra-buckets__price">
-									{formatPricePerMillion(bucket.pricePerMillion)}
-								</span>
-							</Badge>
-						))}
-					</div>
-				);
-			},
-		},
-		{
-			title: 'Source',
-			dataIndex: 'isOverride',
-			key: 'source',
-			render: (_value, rule): JSX.Element => {
-				const label = getSourceLabel(rule);
-				return (
-					<Badge
-						color={rule.isOverride ? 'amber' : 'robin'}
-						variant="outline"
-						className="source-badge"
-						data-testid={`source-badge-${rule.id}`}
-					>
-						{label}
-					</Badge>
-				);
-			},
-		},
-		{
-			title: 'Last seen',
-			key: 'last-seen',
-			render: (_value, rule): string => getRelativeLastSeen(rule),
-		},
-		{
-			title: '',
-			key: 'actions',
-			width: 80,
-			render: (_value, rule): JSX.Element => (
-				<Button
-					type="text"
-					size="small"
-					data-testid={`edit-rule-${rule.id}`}
-					onClick={(): void => onEdit(rule)}
-				>
-					Edit
-					<ChevronDown size={14} />
-				</Button>
-			),
-		},
-	];
-
-	return (
-		<Table<PricingRule>
-			className="model-costs-table"
-			rowKey="id"
-			columns={columns}
-			dataSource={rules}
-			loading={isLoading}
-			pagination={false}
-			rowClassName={(row): string =>
-				row.id === selectedRuleId ? 'model-costs-table__row--selected' : ''
-			}
-			data-testid="model-costs-table"
-		/>
-	);
-}
-
-export default ModelCostsTable;

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

@@ -1,108 +0,0 @@
-import {
-	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
-	type LlmpricingruletypesLLMPricingRuleDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { rest, server } from 'mocks-server/server';
-import { fireEvent, render, screen } from 'tests/test-utils';
-
-import LLMObservabilityModelPricing from '../LLMObservabilityModelPricing';
-
-const ENDPOINT = '*/api/v1/llm_pricing_rules';
-
-const mockRules: LlmpricingruletypesLLMPricingRuleDTO[] = [
-	{
-		id: 'rule-gpt4o',
-		orgId: 'org-1',
-		modelName: 'gpt-4o',
-		provider: 'OpenAI',
-		modelPattern: ['gpt-4o'],
-		isOverride: false,
-		enabled: true,
-		unit: UnitDTO.per_million_tokens,
-		pricing: { input: 15, output: 60 },
-	},
-	{
-		id: 'rule-llama',
-		orgId: 'org-1',
-		modelName: 'llama-3.1-70b',
-		provider: 'Self-hosted',
-		modelPattern: ['llama-3.1'],
-		isOverride: true,
-		enabled: true,
-		unit: UnitDTO.per_million_tokens,
-		pricing: { input: 0, output: 0 },
-	},
-];
-
-describe('LLMObservabilityModelPricing', () => {
-	beforeEach(() => {
-		server.use(
-			rest.get(ENDPOINT, (_, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: {
-							items: mockRules,
-							limit: 100,
-							offset: 0,
-							total: mockRules.length,
-						},
-					}),
-				),
-			),
-		);
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders the page header and both rules', async () => {
-		render(<LLMObservabilityModelPricing />);
-
-		await screen.findByText('gpt-4o');
-		expect(screen.getByText('Configuration')).toBeInTheDocument();
-		expect(screen.getByText('llama-3.1-70b')).toBeInTheDocument();
-		expect(screen.getByText('openai:gpt-4o')).toBeInTheDocument();
-	});
-
-	it('filters rules by the search input', async () => {
-		render(<LLMObservabilityModelPricing />);
-
-		await screen.findByText('gpt-4o');
-
-		fireEvent.change(screen.getByTestId('search-input'), {
-			target: { value: 'llama' },
-		});
-
-		expect(screen.queryByText('gpt-4o')).not.toBeInTheDocument();
-		expect(screen.getByText('llama-3.1-70b')).toBeInTheDocument();
-	});
-
-	it('opens the drawer in Add mode when the Add button is clicked', async () => {
-		render(<LLMObservabilityModelPricing />);
-
-		await screen.findByText('gpt-4o');
-		fireEvent.click(screen.getByTestId('add-model-cost-btn'));
-
-		const input = (await screen.findByTestId(
-			'drawer-model-id-input',
-		)) as HTMLInputElement;
-		expect(input).toBeInTheDocument();
-		expect(input.value).toBe('');
-	});
-
-	it('opens the drawer in Edit mode with prefilled values when a row Edit is clicked', async () => {
-		render(<LLMObservabilityModelPricing />);
-
-		await screen.findByText('gpt-4o');
-		fireEvent.click(screen.getByTestId('edit-rule-rule-gpt4o'));
-
-		const input = (await screen.findByTestId(
-			'drawer-model-id-input',
-		)) as HTMLInputElement;
-		expect(input).toBeInTheDocument();
-		expect(input.value).toBe('gpt-4o');
-	});
-});

frontend/src/container/LLMObservabilityModelPricing/__tests__/ModelCostDrawer.test.tsx

@@ -1,141 +0,0 @@
-import { useState } from 'react';
-import userEvent from '@testing-library/user-event';
-import { fireEvent, render, screen } from 'tests/test-utils';
-
-import { EMPTY_DRAFT, type DrawerDraft } from '../drawerUtils';
-import ModelCostDrawer from '../ModelCostDrawer';
-
-interface HarnessProps {
-	initialDraft?: DrawerDraft;
-	mode?: 'add' | 'edit';
-	onSave?: () => void;
-	onDelete?: () => void;
-}
-
-function Harness({
-	initialDraft = { ...EMPTY_DRAFT, modelName: 'gpt-4o' },
-	mode = 'add',
-	onSave = jest.fn(),
-	onDelete = jest.fn(),
-}: HarnessProps): JSX.Element {
-	const [draft, setDraft] = useState<DrawerDraft>(initialDraft);
-	return (
-		<ModelCostDrawer
-			isOpen
-			mode={mode}
-			draft={draft}
-			setDraft={setDraft}
-			onClose={jest.fn()}
-			onSave={onSave}
-			onDelete={onDelete}
-			isSaving={false}
-			isDeleting={false}
-			saveError={null}
-		/>
-	);
-}
-
-describe('ModelCostDrawer', () => {
-	it('adds a pattern chip when the user types and presses Enter', () => {
-		render(<Harness />);
-
-		fireEvent.change(screen.getByTestId('drawer-pattern-input'), {
-			target: { value: 'gpt-4o-mini' },
-		});
-		fireEvent.keyDown(screen.getByTestId('drawer-pattern-input'), {
-			key: 'Enter',
-			code: 'Enter',
-		});
-
-		expect(screen.getByText('gpt-4o-mini*')).toBeInTheDocument();
-	});
-
-	it('shows a match result when the test input matches an existing pattern', () => {
-		render(
-			<Harness
-				initialDraft={{
-					...EMPTY_DRAFT,
-					modelName: 'gpt-4o',
-					patterns: ['gpt-4o'],
-					isOverride: true,
-				}}
-			/>,
-		);
-
-		fireEvent.change(screen.getByTestId('drawer-pattern-test-input'), {
-			target: { value: 'gpt-4o-2024-08-06' },
-		});
-
-		expect(screen.getByTestId('drawer-pattern-test-result')).toHaveTextContent(
-			/matched: gpt-4o\*/i,
-		);
-	});
-
-	it('shows a no-match result when nothing matches', () => {
-		render(
-			<Harness
-				initialDraft={{
-					...EMPTY_DRAFT,
-					modelName: 'gpt-4o',
-					patterns: ['gpt-4o'],
-					isOverride: true,
-				}}
-			/>,
-		);
-
-		fireEvent.change(screen.getByTestId('drawer-pattern-test-input'), {
-			target: { value: 'claude' },
-		});
-
-		expect(screen.getByTestId('drawer-pattern-test-result')).toHaveTextContent(
-			/no matching pattern/i,
-		);
-	});
-
-	it('shows a reset confirmation when switching from Override to Auto', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(
-			<Harness
-				initialDraft={{
-					...EMPTY_DRAFT,
-					modelName: 'gpt-4o',
-					isOverride: true,
-				}}
-			/>,
-		);
-
-		await user.click(screen.getByTestId('drawer-source-auto'));
-
-		expect(screen.getByTestId('drawer-reset-confirm-btn')).toBeInTheDocument();
-		expect(screen.getByTestId('drawer-reset-keep-btn')).toBeInTheDocument();
-	});
-
-	it('hides the Delete action in Add mode', () => {
-		render(<Harness mode="add" />);
-		expect(screen.queryByTestId('drawer-delete-btn')).not.toBeInTheDocument();
-	});
-
-	it('shows the Delete action in Edit mode', () => {
-		render(
-			<Harness
-				mode="edit"
-				initialDraft={{
-					...EMPTY_DRAFT,
-					id: 'rule-1',
-					modelName: 'gpt-4o',
-					isOverride: true,
-				}}
-			/>,
-		);
-		expect(screen.getByTestId('drawer-delete-btn')).toBeInTheDocument();
-	});
-
-	it('calls onSave when the Save button is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onSave = jest.fn();
-		render(<Harness onSave={onSave} />);
-
-		await user.click(screen.getByTestId('drawer-save-btn'));
-		expect(onSave).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/container/LLMObservabilityModelPricing/__tests__/drawerUtils.test.ts

@@ -1,160 +0,0 @@
-import {
-	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
-	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import {
-	buildPricingPayload,
-	buildRulePayload,
-	computeCostPreview,
-	draftFromRule,
-	EMPTY_DRAFT,
-	matchesAnyPattern,
-	validateDraft,
-	type DrawerDraft,
-} from '../drawerUtils';
-import type { PricingRule } from '../utils';
-
-const makeRule = (overrides: Partial<PricingRule> = {}): PricingRule => ({
-	id: 'rule-1',
-	orgId: 'org-1',
-	modelName: 'gpt-4o',
-	provider: 'OpenAI',
-	modelPattern: ['gpt-4o'],
-	isOverride: false,
-	enabled: true,
-	unit: UnitDTO.per_million_tokens,
-	pricing: { input: 15, output: 60 },
-	...overrides,
-});
-
-describe('drawerUtils', () => {
-	describe('draftFromRule', () => {
-		it('maps a rule to a draft with cache values when present', () => {
-			const rule = makeRule({
-				pricing: {
-					input: 3,
-					output: 15,
-					cache: {
-						mode: CacheModeDTO.additive,
-						read: 0.3,
-						write: 3.75,
-					},
-				},
-			});
-			const draft = draftFromRule(rule);
-			expect(draft.modelName).toBe('gpt-4o');
-			expect(draft.pricing.input).toBe(3);
-			expect(draft.pricing.cacheRead).toBe(0.3);
-			expect(draft.pricing.cacheWrite).toBe(3.75);
-			expect(draft.pricing.cacheMode).toBe(CacheModeDTO.additive);
-		});
-
-		it('falls back to defaults when cache is missing', () => {
-			const draft = draftFromRule(makeRule());
-			expect(draft.pricing.cacheRead).toBeNull();
-			expect(draft.pricing.cacheWrite).toBeNull();
-			expect(draft.pricing.cacheMode).toBe(CacheModeDTO.unknown);
-		});
-	});
-
-	describe('buildPricingPayload', () => {
-		it('omits the cache block when no cache values are set', () => {
-			const payload = buildPricingPayload(EMPTY_DRAFT);
-			expect(payload.cache).toBeUndefined();
-		});
-
-		it('includes only the cache values that are > 0', () => {
-			const draft: DrawerDraft = {
-				...EMPTY_DRAFT,
-				pricing: {
-					...EMPTY_DRAFT.pricing,
-					cacheRead: 1.5,
-					cacheWrite: 0,
-					cacheMode: CacheModeDTO.subtract,
-				},
-			};
-			const payload = buildPricingPayload(draft);
-			expect(payload.cache?.read).toBe(1.5);
-			expect(payload.cache?.write).toBeUndefined();
-			expect(payload.cache?.mode).toBe(CacheModeDTO.subtract);
-		});
-	});
-
-	describe('buildRulePayload', () => {
-		it('uses the modelName as a default pattern when no patterns are supplied', () => {
-			const draft: DrawerDraft = {
-				...EMPTY_DRAFT,
-				modelName: 'gpt-4o',
-				patterns: [],
-				provider: 'OpenAI',
-			};
-			const payload = buildRulePayload(draft);
-			expect(payload.modelPattern).toStrictEqual(['gpt-4o']);
-			expect(payload.unit).toBe(UnitDTO.per_million_tokens);
-			expect(payload.enabled).toBe(true);
-		});
-
-		it('omits id and sourceId for an Add draft', () => {
-			const payload = buildRulePayload(EMPTY_DRAFT);
-			expect(payload.id).toBeUndefined();
-			expect(payload.sourceId).toBeUndefined();
-		});
-	});
-
-	describe('validateDraft', () => {
-		it('requires a model name in Add mode', () => {
-			const result = validateDraft(EMPTY_DRAFT, 'add');
-			expect(result.ok).toBe(false);
-			expect(result.message).toMatch(/billing model id/i);
-		});
-
-		it('rejects negative pricing', () => {
-			const draft: DrawerDraft = {
-				...EMPTY_DRAFT,
-				modelName: 'gpt-4o',
-				pricing: { ...EMPTY_DRAFT.pricing, input: -1 },
-			};
-			expect(validateDraft(draft, 'add').ok).toBe(false);
-		});
-
-		it('accepts a valid Add draft', () => {
-			const draft: DrawerDraft = {
-				...EMPTY_DRAFT,
-				modelName: 'gpt-4o',
-				pricing: { ...EMPTY_DRAFT.pricing, input: 1, output: 2 },
-			};
-			expect(validateDraft(draft, 'add').ok).toBe(true);
-		});
-	});
-
-	describe('matchesAnyPattern', () => {
-		it('returns the matching prefix pattern, case-insensitive', () => {
-			expect(matchesAnyPattern('GPT-4o-2024', ['gpt-4o'])).toBe('gpt-4o');
-		});
-
-		it('returns null when nothing matches', () => {
-			expect(matchesAnyPattern('claude', ['gpt-4o'])).toBeNull();
-		});
-	});
-
-	describe('computeCostPreview', () => {
-		it('adds cache buckets when they are set', () => {
-			const draft: DrawerDraft = {
-				...EMPTY_DRAFT,
-				pricing: {
-					...EMPTY_DRAFT.pricing,
-					input: 10,
-					output: 30,
-					cacheRead: 5,
-				},
-			};
-			const preview = computeCostPreview(draft);
-			const labels = preview.breakdown.map((part) => part.label);
-			expect(labels).toContain('2000 input');
-			expect(labels).toContain('500 output');
-			expect(labels).toContain('1000 cache_read');
-			expect(preview.total).toBeGreaterThan(0);
-		});
-	});
-});

frontend/src/container/LLMObservabilityModelPricing/__tests__/utils.test.ts

@@ -1,119 +0,0 @@
-import {
-	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
-	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import {
-	filterRules,
-	formatPricePerMillion,
-	getCanonicalId,
-	getExtraBuckets,
-	getRelativeLastSeen,
-	getSourceLabel,
-	type PricingRule,
-} from '../utils';
-
-const makeRule = (overrides: Partial<PricingRule> = {}): PricingRule => ({
-	id: 'rule-1',
-	orgId: 'org-1',
-	modelName: 'gpt-4o',
-	provider: 'OpenAI',
-	modelPattern: ['gpt-4o'],
-	isOverride: false,
-	enabled: true,
-	unit: UnitDTO.per_million_tokens,
-	pricing: { input: 15, output: 60 },
-	...overrides,
-});
-
-describe('utils', () => {
-	describe('formatPricePerMillion', () => {
-		it('formats numbers with 2 decimals and dollar prefix', () => {
-			expect(formatPricePerMillion(15)).toBe('$15.00');
-			expect(formatPricePerMillion(0.15)).toBe('$0.15');
-		});
-
-		it('returns em-dash for nullish or NaN', () => {
-			expect(formatPricePerMillion(undefined)).toBe('—');
-			expect(formatPricePerMillion(Number.NaN)).toBe('—');
-		});
-	});
-
-	describe('getExtraBuckets', () => {
-		it('returns an empty array when there is no cache pricing', () => {
-			expect(getExtraBuckets(makeRule())).toStrictEqual([]);
-		});
-
-		it('returns only buckets with values > 0', () => {
-			const rule = makeRule({
-				pricing: {
-					input: 3,
-					output: 15,
-					cache: {
-						mode: CacheModeDTO.additive,
-						read: 0.3,
-						write: 0,
-					},
-				},
-			});
-			const buckets = getExtraBuckets(rule);
-			expect(buckets).toStrictEqual([{ key: 'cache_read', pricePerMillion: 0.3 }]);
-		});
-	});
-
-	describe('getSourceLabel', () => {
-		it('returns "Auto" for non-override and "User override" otherwise', () => {
-			expect(getSourceLabel(makeRule({ isOverride: false }))).toBe('Auto');
-			expect(getSourceLabel(makeRule({ isOverride: true }))).toBe('User override');
-		});
-	});
-
-	describe('getCanonicalId', () => {
-		it('lowercases the provider and joins with the model name', () => {
-			expect(getCanonicalId(makeRule({ provider: 'OpenAI' }))).toBe(
-				'openai:gpt-4o',
-			);
-		});
-	});
-
-	describe('getRelativeLastSeen', () => {
-		it('returns em-dash when no timestamp is present', () => {
-			expect(getRelativeLastSeen(makeRule())).toBe('—');
-		});
-
-		it('formats minutes-old timestamps', () => {
-			const recent = new Date(Date.now() - 5 * 60 * 1000).toISOString();
-			expect(getRelativeLastSeen(makeRule({ updatedAt: recent }))).toMatch(
-				/min ago/,
-			);
-		});
-	});
-
-	describe('filterRules', () => {
-		const auto = makeRule({ id: 'r1', modelName: 'gpt-4o', isOverride: false });
-		const override = makeRule({
-			id: 'r2',
-			modelName: 'llama-3',
-			provider: 'Self-hosted',
-			modelPattern: ['llama-3'],
-			isOverride: true,
-		});
-
-		it('returns everything when no filters are applied', () => {
-			expect(filterRules([auto, override], '', 'all')).toHaveLength(2);
-		});
-
-		it('narrows by source = override', () => {
-			expect(filterRules([auto, override], '', 'override')).toStrictEqual([
-				override,
-			]);
-		});
-
-		it('narrows by free-text search across model and provider', () => {
-			expect(filterRules([auto, override], 'self', 'all')).toStrictEqual([
-				override,
-			]);
-			expect(filterRules([auto, override], 'gpt-4', 'all')).toStrictEqual([auto]);
-		});
-	});
-});

frontend/src/container/LLMObservabilityModelPricing/drawerUtils.ts

@@ -1,191 +0,0 @@
-import {
-	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
-	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
-	type LlmpricingruletypesLLMPricingCacheCostsDTO,
-	type LlmpricingruletypesLLMRulePricingDTO,
-	type LlmpricingruletypesUpdatableLLMPricingRuleDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import type { PricingRule } from './utils';
-
-export const PROVIDER_OPTIONS = [
-	{ value: 'OpenAI', label: 'OpenAI' },
-	{ value: 'Anthropic', label: 'Anthropic' },
-	{ value: 'Azure OpenAI', label: 'Azure OpenAI' },
-	{ value: 'Google', label: 'Google' },
-	{ value: 'Self-hosted', label: 'Self-hosted' },
-	{ value: 'Other', label: 'Other' },
-];
-
-export const CACHE_MODE_OPTIONS = [
-	{
-		value: CacheModeDTO.subtract,
-		label: 'Subtract (OpenAI style)',
-	},
-	{
-		value: CacheModeDTO.additive,
-		label: 'Additive (Anthropic style)',
-	},
-	{
-		value: CacheModeDTO.unknown,
-		label: 'Unknown',
-	},
-];
-
-export type DrawerMode = 'add' | 'edit';
-
-export interface DrawerDraft {
-	id: string | null;
-	sourceId: string | null;
-	modelName: string;
-	provider: string;
-	patterns: string[];
-	isOverride: boolean;
-	pricing: {
-		input: number;
-		output: number;
-		cacheMode: CacheModeDTO;
-		cacheRead: number | null;
-		cacheWrite: number | null;
-	};
-}
-
-export const EMPTY_DRAFT: DrawerDraft = {
-	id: null,
-	sourceId: null,
-	modelName: '',
-	provider: 'OpenAI',
-	patterns: [],
-	isOverride: true,
-	pricing: {
-		input: 0,
-		output: 0,
-		cacheMode: CacheModeDTO.unknown,
-		cacheRead: null,
-		cacheWrite: null,
-	},
-};
-
-export const draftFromRule = (rule: PricingRule): DrawerDraft => ({
-	id: rule.id,
-	sourceId: rule.sourceId ?? null,
-	modelName: rule.modelName,
-	provider: rule.provider || 'OpenAI',
-	patterns: rule.modelPattern || [],
-	isOverride: !!rule.isOverride,
-	pricing: {
-		input: rule.pricing?.input ?? 0,
-		output: rule.pricing?.output ?? 0,
-		cacheMode: rule.pricing?.cache?.mode ?? CacheModeDTO.unknown,
-		cacheRead: rule.pricing?.cache?.read ?? null,
-		cacheWrite: rule.pricing?.cache?.write ?? null,
-	},
-});
-
-const hasCacheValue = (value: number | null): boolean =>
-	typeof value === 'number' && value > 0;
-
-export const buildPricingPayload = (
-	draft: DrawerDraft,
-): LlmpricingruletypesLLMRulePricingDTO => {
-	const pricing: LlmpricingruletypesLLMRulePricingDTO = {
-		input: draft.pricing.input,
-		output: draft.pricing.output,
-	};
-	if (
-		hasCacheValue(draft.pricing.cacheRead) ||
-		hasCacheValue(draft.pricing.cacheWrite)
-	) {
-		const cache: LlmpricingruletypesLLMPricingCacheCostsDTO = {
-			mode: draft.pricing.cacheMode,
-		};
-		if (hasCacheValue(draft.pricing.cacheRead)) {
-			cache.read = draft.pricing.cacheRead as number;
-		}
-		if (hasCacheValue(draft.pricing.cacheWrite)) {
-			cache.write = draft.pricing.cacheWrite as number;
-		}
-		pricing.cache = cache;
-	}
-	return pricing;
-};
-
-export const buildRulePayload = (
-	draft: DrawerDraft,
-): LlmpricingruletypesUpdatableLLMPricingRuleDTO => ({
-	id: draft.id || undefined,
-	sourceId: draft.sourceId || undefined,
-	modelName: draft.modelName.trim(),
-	provider: draft.provider.trim(),
-	modelPattern:
-		draft.patterns.length > 0 ? draft.patterns : [draft.modelName.trim()],
-	isOverride: draft.isOverride,
-	enabled: true,
-	unit: UnitDTO.per_million_tokens,
-	pricing: buildPricingPayload(draft),
-});
-
-export interface ValidationResult {
-	ok: boolean;
-	message?: string;
-}
-
-export const validateDraft = (
-	draft: DrawerDraft,
-	mode: DrawerMode,
-): ValidationResult => {
-	if (mode === 'add' && !draft.modelName.trim()) {
-		return { ok: false, message: 'Billing model ID is required.' };
-	}
-	if (!draft.provider.trim()) {
-		return { ok: false, message: 'Provider is required.' };
-	}
-	if (draft.pricing.input < 0 || draft.pricing.output < 0) {
-		return { ok: false, message: 'Pricing values must be non-negative.' };
-	}
-	return { ok: true };
-};
-
-export const matchesAnyPattern = (
-	candidate: string,
-	patterns: string[],
-): string | null => {
-	const lowered = candidate.toLowerCase();
-	const match = patterns.find((pattern) =>
-		lowered.startsWith(pattern.toLowerCase()),
-	);
-	return match || null;
-};
-
-const EXAMPLE_INPUT_TOKENS = 2000;
-const EXAMPLE_OUTPUT_TOKENS = 500;
-const EXAMPLE_CACHE_TOKENS = 1000;
-const PER_MILLION = 1_000_000;
-
-export interface CostPreviewParts {
-	total: number;
-	breakdown: { label: string; cost: number }[];
-}
-
-export const computeCostPreview = (draft: DrawerDraft): CostPreviewParts => {
-	const breakdown: { label: string; cost: number }[] = [];
-	const inputCost = (EXAMPLE_INPUT_TOKENS / PER_MILLION) * draft.pricing.input;
-	const outputCost =
-		(EXAMPLE_OUTPUT_TOKENS / PER_MILLION) * draft.pricing.output;
-	breakdown.push({ label: `${EXAMPLE_INPUT_TOKENS} input`, cost: inputCost });
-	breakdown.push({ label: `${EXAMPLE_OUTPUT_TOKENS} output`, cost: outputCost });
-	let total = inputCost + outputCost;
-	if (hasCacheValue(draft.pricing.cacheRead)) {
-		const cost =
-			(EXAMPLE_CACHE_TOKENS / PER_MILLION) * (draft.pricing.cacheRead as number);
-		breakdown.push({ label: `${EXAMPLE_CACHE_TOKENS} cache_read`, cost });
-		total += cost;
-	}
-	if (hasCacheValue(draft.pricing.cacheWrite)) {
-		const cost =
-			(EXAMPLE_CACHE_TOKENS / PER_MILLION) * (draft.pricing.cacheWrite as number);
-		breakdown.push({ label: `${EXAMPLE_CACHE_TOKENS} cache_write`, cost });
-		total += cost;
-	}
-	return { total, breakdown };
-};

frontend/src/container/LLMObservabilityModelPricing/useModelCostDrawer.ts

@@ -1,125 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import {
-	getListLLMPricingRulesQueryKey,
-	useCreateOrUpdateLLMPricingRules,
-	useDeleteLLMPricingRule,
-} from 'api/generated/services/llmpricingrules';
-
-import {
-	buildRulePayload,
-	draftFromRule,
-	EMPTY_DRAFT,
-	type DrawerDraft,
-	type DrawerMode,
-} from './drawerUtils';
-import type { PricingRule } from './utils';
-
-interface UseModelCostDrawerResult {
-	isOpen: boolean;
-	mode: DrawerMode;
-	draft: DrawerDraft;
-	setDraft: (next: DrawerDraft) => void;
-	openForAdd: (prefillModelName?: string) => void;
-	openForEdit: (rule: PricingRule) => void;
-	close: () => void;
-	save: () => Promise<void>;
-	deleteRule: () => Promise<void>;
-	isSaving: boolean;
-	isDeleting: boolean;
-	saveError: string | null;
-	selectedRuleId: string | null;
-}
-
-export function useModelCostDrawer(): UseModelCostDrawerResult {
-	const queryClient = useQueryClient();
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const [mode, setMode] = useState<DrawerMode>('add');
-	const [draft, setDraft] = useState<DrawerDraft>(EMPTY_DRAFT);
-	const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null);
-	const [saveError, setSaveError] = useState<string | null>(null);
-
-	const { mutateAsync: createOrUpdate, isLoading: isSaving } =
-		useCreateOrUpdateLLMPricingRules();
-	const { mutateAsync: deleteRuleApi, isLoading: isDeleting } =
-		useDeleteLLMPricingRule();
-
-	const invalidateList = useCallback(async (): Promise<void> => {
-		await queryClient.invalidateQueries({
-			queryKey: getListLLMPricingRulesQueryKey(),
-		});
-	}, [queryClient]);
-
-	const openForAdd = useCallback((prefillModelName?: string): void => {
-		setMode('add');
-		setDraft({
-			...EMPTY_DRAFT,
-			modelName: prefillModelName || '',
-			patterns: prefillModelName ? [prefillModelName] : [],
-		});
-		setSelectedRuleId(null);
-		setSaveError(null);
-		setIsOpen(true);
-	}, []);
-
-	const openForEdit = useCallback((rule: PricingRule): void => {
-		setMode('edit');
-		setDraft(draftFromRule(rule));
-		setSelectedRuleId(rule.id);
-		setSaveError(null);
-		setIsOpen(true);
-	}, []);
-
-	const close = useCallback((): void => {
-		setIsOpen(false);
-		setSelectedRuleId(null);
-		setSaveError(null);
-	}, []);
-
-	const save = useCallback(async (): Promise<void> => {
-		setSaveError(null);
-		try {
-			await createOrUpdate({
-				data: { rules: [buildRulePayload(draft)] },
-			});
-			await invalidateList();
-			setIsOpen(false);
-			setSelectedRuleId(null);
-		} catch (error) {
-			const message = error instanceof Error ? error.message : 'Save failed';
-			setSaveError(message);
-		}
-	}, [createOrUpdate, draft, invalidateList]);
-
-	const deleteRule = useCallback(async (): Promise<void> => {
-		if (!draft.id) {
-			return;
-		}
-		setSaveError(null);
-		try {
-			await deleteRuleApi({ pathParams: { id: draft.id } });
-			await invalidateList();
-			setIsOpen(false);
-			setSelectedRuleId(null);
-		} catch (error) {
-			const message = error instanceof Error ? error.message : 'Delete failed';
-			setSaveError(message);
-		}
-	}, [deleteRuleApi, draft.id, invalidateList]);
-
-	return {
-		isOpen,
-		mode,
-		draft,
-		setDraft,
-		openForAdd,
-		openForEdit,
-		close,
-		save,
-		deleteRule,
-		isSaving,
-		isDeleting,
-		saveError,
-		selectedRuleId,
-	};
-}

frontend/src/container/LLMObservabilityModelPricing/utils.ts

@@ -1,101 +0,0 @@
-import type { LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
-
-export type PricingRule = LlmpricingruletypesLLMPricingRuleDTO;
-
-export type SourceFilter = 'all' | 'auto' | 'override';
-
-export interface ExtraBucket {
-	key: string;
-	pricePerMillion: number;
-}
-
-export const formatPricePerMillion = (value: number | undefined): string => {
-	if (value === undefined || value === null || Number.isNaN(value)) {
-		return '—';
-	}
-	return `$${value.toFixed(2)}`;
-};
-
-export const getExtraBuckets = (rule: PricingRule): ExtraBucket[] => {
-	const cache = rule.pricing?.cache;
-	if (!cache) {
-		return [];
-	}
-	const buckets: ExtraBucket[] = [];
-	if (typeof cache.read === 'number' && cache.read > 0) {
-		buckets.push({ key: 'cache_read', pricePerMillion: cache.read });
-	}
-	if (typeof cache.write === 'number' && cache.write > 0) {
-		buckets.push({ key: 'cache_write', pricePerMillion: cache.write });
-	}
-	return buckets;
-};
-
-export const getSourceLabel = (rule: PricingRule): 'Auto' | 'User override' =>
-	rule.isOverride ? 'User override' : 'Auto';
-
-const MINUTE = 60;
-const HOUR = 60 * MINUTE;
-const DAY = 24 * HOUR;
-const MONTH = 30 * DAY;
-const YEAR = 365 * DAY;
-
-export const getRelativeLastSeen = (rule: PricingRule): string => {
-	const ts = rule.updatedAt || rule.syncedAt || rule.createdAt;
-	if (!ts) {
-		return '—';
-	}
-	const now = Date.now();
-	const target = new Date(ts).getTime();
-	if (Number.isNaN(target)) {
-		return '—';
-	}
-	const seconds = Math.max(0, Math.round((now - target) / 1000));
-	if (seconds < MINUTE) {
-		return 'just now';
-	}
-	if (seconds < HOUR) {
-		return `${Math.floor(seconds / MINUTE)} min ago`;
-	}
-	if (seconds < DAY) {
-		return `${Math.floor(seconds / HOUR)} hr ago`;
-	}
-	if (seconds < MONTH) {
-		return `${Math.floor(seconds / DAY)} days ago`;
-	}
-	if (seconds < YEAR) {
-		return `${Math.floor(seconds / MONTH)} mo ago`;
-	}
-	return `${Math.floor(seconds / YEAR)} yr ago`;
-};
-
-const lc = (value: string): string => value.toLowerCase();
-
-export const filterRules = (
-	rules: PricingRule[],
-	search: string,
-	source: SourceFilter,
-): PricingRule[] => {
-	const normalized = lc(search.trim());
-	return rules.filter((rule) => {
-		if (source === 'auto' && rule.isOverride) {
-			return false;
-		}
-		if (source === 'override' && !rule.isOverride) {
-			return false;
-		}
-		if (!normalized) {
-			return true;
-		}
-		return (
-			lc(rule.modelName).includes(normalized) ||
-			lc(rule.provider).includes(normalized) ||
-			(rule.modelPattern || []).some((pattern) => lc(pattern).includes(normalized))
-		);
-	});
-};
-
-export const getCanonicalId = (rule: PricingRule): string => {
-	const provider = rule.provider?.trim() || 'unknown';
-	return `${lc(provider)}:${rule.modelName}`;
-};

frontend/src/container/ResetPassword/ResetPassword.styles.scss

@@ -142,6 +142,15 @@
 		}
 	}
 
+	.reset-password-back-action {
+		margin-top: var(--spacing-12);
+		width: 100%;
+
+		button {
+			width: 100%;
+		}
+	}
+
 	@media (max-width: 768px) {
 		width: 100%;
 		padding: 0 16px;

frontend/src/container/ResetPassword/TokenError.tsx

@@ -1,7 +1,10 @@
-import { CircleAlert } from '@signozhq/icons';
+import { ArrowLeft, CircleAlert } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import AuthError from 'components/AuthError/AuthError';
 import AuthPageContainer from 'components/AuthPageContainer';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
 import APIError from 'types/api/error';
 
 import './ResetPassword.styles.scss';
@@ -59,6 +62,16 @@ function TokenError({ error }: TokenErrorProps): JSX.Element {
 					</Typography.Text>
 				</div>
 				{error && <AuthError error={error} />}
+				<div className="reset-password-back-action">
+					<Button
+						variant="solid"
+						data-testid="back-to-login"
+						prefix={<ArrowLeft size={12} />}
+						onClick={(): void => history.push(ROUTES.LOGIN)}
+					>
+						Back to login
+					</Button>
+				</div>
 			</div>
 		</AuthPageContainer>
 	);

frontend/src/container/SideNav/SideNav.styles.scss

@@ -119,6 +119,10 @@
 
 				border-radius: 0px 4px 4px 0px;
 				background: var(--l3-background);
+
+				&.version-container-standalone {
+					border-radius: 4px;
+				}
 			}
 
 			.version {

frontend/src/container/SideNav/SideNav.tsx

@@ -1010,7 +1010,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 								<img src={signozBrandLogoUrl} alt="SigNoz" />
 							</div>
 
-							{licenseTag && (
+							{(licenseTag || currentVersion) && (
 								<div
 									className={cx(
 										'brand-title-section',
@@ -1021,7 +1021,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 											'version-update-notification',
 									)}
 								>
-									<span className="license-type"> {licenseTag} </span>
+									{licenseTag && <span className="license-type"> {licenseTag} </span>}
 
 									{currentVersion && (
 										<Tooltip
@@ -1043,7 +1043,12 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 												)
 											}
 										>
-											<div className="version-container">
+											<div
+												className={cx(
+													'version-container',
+													!licenseTag && 'version-container-standalone',
+												)}
+											>
 												<span
 													className={cx('version', changelog && 'version-clickable')}
 													onClick={onClickVersionHandler}

frontend/src/container/SideNav/menuItems.tsx

@@ -11,7 +11,6 @@ import {
 	Building2,
 	ChartArea,
 	Cloudy,
-	Coins,
 	DraftingCompass,
 	FileKey2,
 	Github,
@@ -366,13 +365,6 @@ export const settingsNavSections: SettingsNavSection[] = [
 				isEnabled: false,
 				itemKey: 'mcp-server',
 			},
-			{
-				key: ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
-				label: 'Model Pricing',
-				icon: <Coins size={16} />,
-				isEnabled: true,
-				itemKey: 'llm-observability-model-pricing',
-			},
 		],
 	},
 

frontend/src/pages/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import NotFound from 'components/NotFound';
+import Spinner from 'components/Spinner';
+import DashboardContainer from 'container/DashboardContainer';
+import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { ErrorType } from 'types/common';
+
+function DashboardPage(): JSX.Element {
+	const { dashboardId } = useParams<{ dashboardId: string }>();
+
+	const [onModal, Content] = Modal.useModal();
+
+	const { isLoading, isError, isFetching, error } = useDashboardBootstrap(
+		dashboardId,
+		{ confirm: onModal.confirm },
+	);
+
+	const dashboardTitle = useDashboardStore((s) => s.dashboardData?.data.title);
+
+	useEffect(() => {
+		document.title = dashboardTitle || document.title;
+	}, [dashboardTitle]);
+
+	const errorMessage = isError
+		? (error as AxiosError<{ errorType: string }>)?.response?.data?.errorType
+		: 'Something went wrong';
+
+	if (isError && !isFetching && errorMessage === ErrorType.NotFound) {
+		return <NotFound />;
+	}
+
+	if (isError && errorMessage) {
+		return <Typography>{errorMessage}</Typography>;
+	}
+
+	if (isLoading) {
+		return <Spinner tip="Loading.." />;
+	}
+
+	return (
+		<>
+			{Content}
+			<DashboardContainer />
+		</>
+	);
+}
+
+export default DashboardPage;

frontend/src/pages/DashboardPage/index.tsx

@@ -1,53 +1,15 @@
-import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
-import NotFound from 'components/NotFound';
-import Spinner from 'components/Spinner';
-import DashboardContainer from 'container/DashboardContainer';
-import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
-import { ErrorType } from 'types/common';
+import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
+import DashboardPageV2 from 'pages/DashboardPageV2';
 
-function DashboardPage(): JSX.Element {
-	const { dashboardId } = useParams<{ dashboardId: string }>();
+import DashboardPage from './DashboardPage';
 
-	const [onModal, Content] = Modal.useModal();
+// Serves the V2 dashboard detail page when the `use_dashboard_v2` flag is active;
+// otherwise the existing V1 page. Lets V2 dark-ship behind the flag without
+// changing route definitions.
+function DashboardPageEntry(): JSX.Element {
+	const isDashboardV2 = useIsDashboardV2();
 
-	const { isLoading, isError, isFetching, error } = useDashboardBootstrap(
-		dashboardId,
-		{ confirm: onModal.confirm },
-	);
-
-	const dashboardTitle = useDashboardStore((s) => s.dashboardData?.data.title);
-
-	useEffect(() => {
-		document.title = dashboardTitle || document.title;
-	}, [dashboardTitle]);
-
-	const errorMessage = isError
-		? (error as AxiosError<{ errorType: string }>)?.response?.data?.errorType
-		: 'Something went wrong';
-
-	if (isError && !isFetching && errorMessage === ErrorType.NotFound) {
-		return <NotFound />;
-	}
-
-	if (isError && errorMessage) {
-		return <Typography>{errorMessage}</Typography>;
-	}
-
-	if (isLoading) {
-		return <Spinner tip="Loading.." />;
-	}
-
-	return (
-		<>
-			{Content}
-			<DashboardContainer />
-		</>
-	);
+	return isDashboardV2 ? <DashboardPageV2 /> : <DashboardPage />;
 }
 
-export default DashboardPage;
+export default DashboardPageEntry;

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

@@ -1,210 +0,0 @@
-.dashboardDescriptionContainer {
-	box-shadow: none;
-	border: none;
-	background: unset;
-	color: var(--l2-foreground);
-
-	:global(.ant-card-body) {
-		padding: 0px;
-	}
-
-	.dashboardDetails {
-		display: flex;
-		justify-content: space-between;
-		gap: 8px;
-		padding: 16px 16px 0px 16px;
-		align-items: flex-start;
-
-		.leftSection {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			width: 45%;
-			height: 40px;
-
-			.dashboardImg {
-				height: 16px;
-				width: 16px;
-			}
-
-			.dashboardTitle {
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 16px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 24px; /* 150% */
-				letter-spacing: -0.08px;
-				max-width: 80%;
-
-				display: -webkit-box;
-				-webkit-line-clamp: 1;
-				-webkit-box-orient: vertical;
-				overflow: hidden;
-			}
-
-			.clickableTitle {
-				cursor: pointer;
-			}
-
-			.titleEdit {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-				width: 100%;
-				min-width: 0;
-			}
-
-			.titleInput {
-				flex: 1;
-				min-width: 0;
-				max-width: 70%;
-			}
-
-			.titleEditActionButton {
-				--button-height: auto;
-				--button-padding: 4px;
-				flex-shrink: 0;
-			}
-
-			.titleSaveActionButton {
-				--button-border-color: var(--text-forest-700);
-				--button-outlined-foreground: var(--text-forest-700);
-			}
-
-			.publicDashboardIcon {
-				margin-right: 4px;
-			}
-		}
-
-		.rightSection {
-			display: flex;
-			width: 55%;
-			justify-content: flex-end;
-			flex-wrap: wrap;
-			align-items: center;
-			gap: 14px;
-			height: 40px;
-
-			.icons {
-				display: flex;
-				align-items: center;
-				width: 32px;
-				height: 34px;
-				padding: 6px;
-				justify-content: center;
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 10px; /* 83.333% */
-				letter-spacing: 0.12px;
-			}
-
-			.icons:hover {
-				background-color: unset;
-			}
-		}
-	}
-
-	.dashboardTags {
-		display: flex;
-		gap: 6px;
-		padding: 16px 16px 0px 16px;
-		flex-wrap: wrap;
-
-		.tag {
-			display: flex;
-			padding: 4px 8px;
-			justify-content: center;
-			align-items: center;
-			border-radius: 20px;
-			border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-			background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-			color: var(--bg-sienna-400);
-			text-align: center;
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-			margin-inline-end: 0px;
-		}
-	}
-
-	.dashboardDescriptionSection {
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 22px; /* 157.143% */
-		letter-spacing: -0.07px;
-		padding: 20px 16px 0px 16px;
-	}
-}
-
-.dashboardSettings {
-	width: 191px;
-	height: 302px;
-	flex-shrink: 0;
-
-	:global(.ant-popover-inner) {
-		padding: 0px;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		) !important;
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-	}
-
-	.menuContent {
-		display: flex;
-		flex-direction: column;
-
-		section {
-			display: flex;
-			flex-direction: column;
-			align-items: start;
-
-			button {
-				display: flex;
-				width: 100%;
-				height: unset;
-				padding: 8px;
-				align-items: center;
-				gap: 12px;
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: 0.14px;
-				border-top: none;
-			}
-		}
-
-		.section1,
-		.section2 {
-			border-bottom: 1px solid var(--l1-border);
-		}
-
-		.deleteDashboard button {
-			color: var(--bg-cherry-400) !important;
-		}
-	}
-}
-
-.deleteModal :global(.ant-modal-confirm-body) {
-	align-items: center;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardMeta/DashboardMeta.tsx

@@ -1,32 +0,0 @@
-import { Badge } from '@signozhq/ui/badge';
-import { isEmpty } from 'lodash-es';
-
-import styles from '../DashboardDescription.module.scss';
-
-interface DashboardMetaProps {
-	tags: string[];
-	description: string;
-}
-
-function DashboardMeta({ tags, description }: DashboardMetaProps): JSX.Element {
-	return (
-		<>
-			{tags.length > 0 && (
-				<div className={styles.dashboardTags}>
-					{tags.map((tag) => (
-						<Badge key={tag} className={styles.tag}>
-							{tag}
-						</Badge>
-					))}
-				</div>
-			)}
-			{!isEmpty(description) && (
-				<section className={styles.dashboardDescriptionSection}>
-					{description}
-				</section>
-			)}
-		</>
-	);
-}
-
-export default DashboardMeta;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/DashboardTitle.tsx

@@ -1,116 +0,0 @@
-import { KeyboardEvent } from 'react';
-import { Check, Globe, LockKeyhole, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import styles from '../DashboardDescription.module.scss';
-
-interface DashboardTitleProps {
-	title: string;
-	image: string;
-	isPublicDashboard: boolean;
-	isDashboardLocked: boolean;
-	isEditable: boolean;
-	isEditing: boolean;
-	draft: string;
-	onDraftChange: (value: string) => void;
-	onStartEdit: () => void;
-	onCommit: () => void;
-	onCancel: () => void;
-}
-
-function DashboardTitle({
-	title,
-	image,
-	isPublicDashboard,
-	isDashboardLocked,
-	isEditable,
-	isEditing,
-	draft,
-	onDraftChange,
-	onStartEdit,
-	onCommit,
-	onCancel,
-}: DashboardTitleProps): JSX.Element {
-	const canEdit = isEditable && !isDashboardLocked;
-
-	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			onCommit();
-		} else if (event.key === 'Escape') {
-			onCancel();
-		}
-	};
-
-	return (
-		<div className={styles.leftSection}>
-			<img src={image} alt="dashboard-img" className={styles.dashboardImg} />
-			{isEditing ? (
-				<div className={styles.titleEdit}>
-					<Input
-						autoFocus
-						value={draft}
-						testId="dashboard-title-input"
-						maxLength={120}
-						className={styles.titleInput}
-						onChange={(e): void => onDraftChange(e.target.value)}
-						onKeyDown={onKeyDown}
-					/>
-					<Button
-						type="button"
-						variant="outlined"
-						size="icon"
-						className={cx(styles.titleEditActionButton, styles.titleSaveActionButton)}
-						aria-label="Save title"
-						testId="dashboard-title-save"
-						onClick={onCommit}
-					>
-						<Check size={14} />
-					</Button>
-					<Button
-						type="button"
-						variant="outlined"
-						color="destructive"
-						size="icon"
-						className={styles.titleEditActionButton}
-						aria-label="Cancel title edit"
-						testId="dashboard-title-cancel"
-						onClick={onCancel}
-					>
-						<X size={14} />
-					</Button>
-				</div>
-			) : (
-				<TooltipSimple title={title.length > 30 ? title : ''}>
-					<Typography.Text
-						className={cx(styles.dashboardTitle, {
-							[styles.clickableTitle]: canEdit,
-						})}
-						data-testid="dashboard-title"
-						onClick={canEdit ? onStartEdit : undefined}
-					>
-						{title}
-					</Typography.Text>
-				</TooltipSimple>
-			)}
-
-			{isPublicDashboard && (
-				<TooltipSimple title="This dashboard is publicly accessible">
-					<Globe size={14} className={styles.publicDashboardIcon} />
-				</TooltipSimple>
-			)}
-
-			{isDashboardLocked && (
-				<TooltipSimple title="This dashboard is locked">
-					<LockKeyhole size={14} />
-				</TooltipSimple>
-			)}
-		</div>
-	);
-}
-
-export default DashboardTitle;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.module.scss

@@ -0,0 +1,11 @@
+.dashboardActionsContainer {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	gap: 12px;
+}
+
+.dashboardActionsSecondary {
+	display: flex;
+	gap: 12px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.tsx

@@ -28,43 +28,40 @@ import { USER_ROLES } from 'types/roles';
 import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import DashboardSettings from '../../DashboardSettings';
 import SettingsDrawer from '../SettingsDrawer';
-import styles from '../DashboardDescription.module.scss';
+import styles from './DashboardActions.module.scss';
+import { useDashboardStore } from '../../store/useDashboardStore';
 
 interface DashboardActionsProps {
+	title: string;
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	isDashboardLocked: boolean;
-	editDashboard: boolean;
 	isAuthor: boolean;
-	addPanelPermission: boolean;
 	onAddPanel: () => void;
 	onLockToggle: () => void;
 	onOpenRename: () => void;
 }
 
 function DashboardActions({
+	title,
 	dashboard,
 	handle,
 	isDashboardLocked,
-	editDashboard,
 	isAuthor,
-	addPanelPermission,
 	onAddPanel,
 	onLockToggle,
 	onOpenRename,
 }: DashboardActionsProps): JSX.Element {
+	const canEdit = useDashboardStore((s) => s.isEditable);
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
 
-	const id = dashboard.id ?? '';
-	const title = dashboard.spec?.display?.name ?? '';
-
 	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
 		useState<boolean>(false);
 
 	const [state, setCopy] = useCopyToClipboard();
 	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
-	const deleteDashboardMutation = useDeleteDashboard(id);
+	const deleteDashboardMutation = useDeleteDashboard(dashboard.id);
 
 	useEffect(() => {
 		if (state.error) {
@@ -103,7 +100,7 @@ function DashboardActions({
 
 	const menuItems = useMemo<MenuItem[]>(() => {
 		const editGroup: MenuItem[] = [];
-		if (!isDashboardLocked && editDashboard) {
+		if (canEdit) {
 			editGroup.push({
 				key: 'rename',
 				label: 'Rename',
@@ -159,7 +156,6 @@ function DashboardActions({
 			);
 	}, [
 		isDashboardLocked,
-		editDashboard,
 		isAuthor,
 		user.role,
 		dashboard.createdBy,
@@ -169,58 +165,60 @@ function DashboardActions({
 		exportJSON,
 		setCopy,
 		dashboardDataJSON,
+		canEdit,
 	]);
 
 	return (
-		<div className={styles.rightSection}>
+		<div className={styles.dashboardActionsContainer}>
 			<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-			<DropdownMenuSimple menu={{ items: menuItems }}>
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="icon"
-					prefix={<Ellipsis size={14} />}
-					className={styles.icons}
-					testId="options"
-				/>
-			</DropdownMenuSimple>
-			{!isDashboardLocked && editDashboard && (
-				<>
+			<div className={styles.dashboardActionsSecondary}>
+				<DropdownMenuSimple menu={{ items: menuItems }}>
 					<Button
 						variant="solid"
 						color="secondary"
-						prefix={<Configure size="md" />}
-						testId="show-drawer"
-						onClick={(): void => setIsSettingsDrawerOpen(true)}
+						size="icon"
+						prefix={<Ellipsis size="md" />}
+						testId="options"
+					/>
+				</DropdownMenuSimple>
+				{canEdit && (
+					<>
+						<Button
+							variant="solid"
+							color="secondary"
+							prefix={<Configure size="md" />}
+							testId="show-drawer"
+							onClick={(): void => setIsSettingsDrawerOpen(true)}
+							size="md"
+						>
+							Configure
+						</Button>
+						<SettingsDrawer
+							drawerTitle="Dashboard Configuration"
+							isOpen={isSettingsDrawerOpen}
+							onClose={(): void => setIsSettingsDrawerOpen(false)}
+						>
+							<DashboardSettings dashboard={dashboard} />
+						</SettingsDrawer>
+					</>
+				)}
+				{!isDashboardLocked && (
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={onAddPanel}
+						prefix={<Plus size="md" />}
+						testId="add-panel-header"
 						size="md"
 					>
-						Configure
+						New Panel
 					</Button>
-					<SettingsDrawer
-						drawerTitle="Dashboard Configuration"
-						isOpen={isSettingsDrawerOpen}
-						onClose={(): void => setIsSettingsDrawerOpen(false)}
-					>
-						<DashboardSettings dashboard={dashboard} />
-					</SettingsDrawer>
-				</>
-			)}
-			{!isDashboardLocked && addPanelPermission && (
-				<Button
-					variant="solid"
-					color="primary"
-					onClick={onAddPanel}
-					prefix={<Plus size="md" />}
-					testId="add-panel-header"
-					size="md"
-				>
-					New Panel
-				</Button>
-			)}
+				)}
+			</div>
 			<ConfirmDeleteDialog
 				open={isDeleteOpen}
-				title={`Delete dashboard "${title}"?`}
-				description="This action cannot be undone."
+				title={`Delete dashboard"?`}
+				description={`Are you sure you want to delete this dashboard - "${title}"? This action cannot be undone.`}
 				isLoading={deleteDashboardMutation.isLoading}
 				onConfirm={handleConfirmDelete}
 				onClose={(): void => setIsDeleteOpen(false)}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.module.scss

@@ -0,0 +1,61 @@
+.dashboardInfo {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 40%;
+
+	@media (min-width: 1280px) {
+		width: 30%;
+	}
+}
+
+.dashboardTitleContainer {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+}
+
+.dashboardImage {
+	flex-shrink: 0;
+}
+
+.dashboardTitle {
+	flex: 1;
+	min-width: 0;
+	max-width: fit-content;
+	color: var(--l1-foreground);
+	font-size: 18px;
+	font-weight: 500;
+
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.dashboardTitleHover {
+	cursor: text !important;
+}
+
+.dashboardTitleEditor {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex: 1;
+	min-width: 0;
+}
+
+.dashboardTitleInput {
+	flex: 1;
+	min-width: 0;
+}
+
+.dashboardTitleActionButton {
+	flex-shrink: 0;
+}
+
+.dashboardTags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.tsx

@@ -0,0 +1,141 @@
+import { KeyboardEvent } from 'react';
+import { Check, Globe, LockKeyhole, X } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import { isEmpty } from 'lodash-es';
+
+import styles from './DashboardInfo.module.scss';
+import { useDashboardStore } from '../../store/useDashboardStore';
+
+interface DashboardInfoProps {
+	title: string;
+	image: string;
+	tags: string[];
+	description: string;
+	isPublicDashboard: boolean;
+	isDashboardLocked: boolean;
+	isEditing: boolean;
+	draft: string;
+	onDraftChange: (value: string) => void;
+	onStartEdit: () => void;
+	onCommit: () => void;
+	onCancel: () => void;
+}
+
+function DashboardInfo({
+	title,
+	image,
+	tags,
+	description,
+	isPublicDashboard,
+	isDashboardLocked,
+	isEditing,
+	draft,
+	onDraftChange,
+	onStartEdit,
+	onCommit,
+	onCancel,
+}: DashboardInfoProps): JSX.Element {
+	const canEdit = useDashboardStore((s) => s.isEditable);
+
+	const hasTags = tags.length > 0;
+	const hasDescription = !isEmpty(description);
+
+	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			onCommit();
+		} else if (event.key === 'Escape') {
+			onCancel();
+		}
+	};
+
+	return (
+		<div className={styles.dashboardInfo}>
+			<div className={styles.dashboardTitleContainer}>
+				<img src={image} alt={title} className={styles.dashboardImage} />
+				{isEditing ? (
+					<div className={styles.dashboardTitleEditor}>
+						<Input
+							autoFocus
+							value={draft}
+							testId="dashboard-title-input"
+							maxLength={120}
+							className={styles.dashboardTitleInput}
+							onChange={(e): void => onDraftChange(e.target.value)}
+							onKeyDown={onKeyDown}
+						/>
+						<Button
+							type="button"
+							variant="outlined"
+							color="primary"
+							size="icon"
+							className={styles.dashboardTitleActionButton}
+							aria-label="Save title"
+							testId="dashboard-title-save"
+							onClick={onCommit}
+						>
+							<Check size={14} />
+						</Button>
+						<Button
+							type="button"
+							variant="outlined"
+							color="secondary"
+							size="icon"
+							className={styles.dashboardTitleActionButton}
+							aria-label="Cancel title edit"
+							testId="dashboard-title-cancel"
+							onClick={onCancel}
+						>
+							<X size={14} />
+						</Button>
+					</div>
+				) : (
+					<TooltipSimple title={title}>
+						<Typography.Text
+							className={cx(styles.dashboardTitle, {
+								[styles.dashboardTitleHover]: canEdit,
+							})}
+							data-testid="dashboard-title"
+							onClick={canEdit ? onStartEdit : undefined}
+						>
+							{title}
+						</Typography.Text>
+					</TooltipSimple>
+				)}
+
+				{isPublicDashboard && (
+					<TooltipSimple title="This dashboard is publicly accessible">
+						<Globe size={14} />
+					</TooltipSimple>
+				)}
+
+				{isDashboardLocked && (
+					<TooltipSimple title="This dashboard is locked">
+						<LockKeyhole size={14} />
+					</TooltipSimple>
+				)}
+			</div>
+
+			{hasTags && (
+				<div className={styles.dashboardTags}>
+					{tags.map((tag) => (
+						<Badge key={tag} color="warning" variant="outline">
+							{tag}
+						</Badge>
+					))}
+				</div>
+			)}
+
+			{hasDescription && (
+				<Typography.Text color="muted">{description}</Typography.Text>
+			)}
+		</div>
+	);
+}
+
+export default DashboardInfo;

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

@@ -0,0 +1,20 @@
+.dashboardPageToolbarContainer {
+	position: sticky;
+	top: 0;
+	z-index: 10;
+	color: var(--l2-foreground);
+	background-color: var(--l1-background);
+	padding: 16px;
+	box-shadow: 0 2px 2px 0px var(--l2-border);
+}
+
+.dashboardPageToolbarSubContainer {
+	width: 100%;
+}
+
+.dashboardInfoWithActions {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	width: 100%;
+}

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

@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
-import { Card } from 'antd';
 import { toast } from '@signozhq/ui/sonner';
 import logEvent from 'api/common/logEvent';
 import {
@@ -13,34 +12,32 @@ import type {
 	DashboardtypesJSONPatchOperationDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
-import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
 import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
-import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardActions from './DashboardActions/DashboardActions';
-import DashboardMeta from './DashboardMeta/DashboardMeta';
-import DashboardTitle from './DashboardTitle/DashboardTitle';
-import { useEditableTitle } from './DashboardTitle/useEditableTitle';
+import DashboardInfo from './DashboardInfo/DashboardInfo';
+import { useEditableTitle } from './DashboardInfo/useEditableTitle';
 
-import styles from './DashboardDescription.module.scss';
+import styles from './DashboardPageToolbar.module.scss';
+// import VariablesBar from '../VariablesBar/VariablesBar';
 
-interface DashboardDescriptionProps {
+interface DashboardPageToolbarProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	refetch: () => void;
 }
 
-function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
+function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	const { dashboard, handle, refetch } = props;
 
 	const id = dashboard.id;
 	const isDashboardLocked = !!dashboard.locked;
 
-	const title = dashboard.spec?.display?.name ?? '';
-	const description = dashboard.spec?.display?.description ?? '';
+	const title = dashboard.spec.display.name;
+	const description = dashboard.spec.display.description ?? '';
 	const image = dashboard.image || Base64Icons[0];
 	const tags = useMemo(
 		() =>
@@ -51,7 +48,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	);
 
 	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
 	const { showErrorModal } = useErrorModal();
 	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
 		(s) => s.setIsPanelTypeSelectionModalOpen,
@@ -59,9 +55,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
-	const addPanelPermission = !isDashboardLocked;
-	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
-	const isPublicDashboard = false;
 
 	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
 		if (!id) {
@@ -110,7 +103,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 			onSave: onNameSave,
 		});
 
-	const onEmptyWidgetHandler = useCallback((): void => {
+	const onAddPanel = useCallback((): void => {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
@@ -118,15 +111,15 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	}, [id, setIsPanelTypeSelectionModalOpen]);
 
 	return (
-		<Card className={styles.dashboardDescriptionContainer}>
-			<DashboardHeader title={title} image={image} />
-			<section className={styles.dashboardDetails}>
-				<DashboardTitle
+		<section className={styles.dashboardPageToolbarContainer}>
+			<div className={styles.dashboardInfoWithActions}>
+				<DashboardInfo
 					title={title}
 					image={image}
-					isPublicDashboard={isPublicDashboard}
+					tags={tags}
+					description={description}
+					isPublicDashboard={false}
 					isDashboardLocked={isDashboardLocked}
-					isEditable={editDashboard}
 					isEditing={isEditing}
 					draft={draft}
 					onDraftChange={setDraft}
@@ -135,20 +128,21 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					onCancel={cancel}
 				/>
 				<DashboardActions
+					title={title}
 					dashboard={dashboard}
 					handle={handle}
 					isDashboardLocked={isDashboardLocked}
-					editDashboard={editDashboard}
 					isAuthor={isAuthor}
-					addPanelPermission={addPanelPermission}
-					onAddPanel={onEmptyWidgetHandler}
+					onAddPanel={onAddPanel}
 					onLockToggle={handleLockDashboardToggle}
 					onOpenRename={startEdit}
 				/>
-			</section>
-			<DashboardMeta tags={tags} description={description} />
-		</Card>
+			</div>
+		</section>
 	);
 }
 
-export default DashboardDescription;
+{
+	/* <VariablesBar dashboard={dashboard} /> */
+}
+export default DashboardPageToolbar;

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

@@ -1,3 +1,8 @@
+.tabsContent {
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+}
+
 .placeholder {
 	padding: 24px;
 }
@@ -9,3 +14,10 @@
 	line-height: 1;
 	padding-top: 4px;
 }
+
+// shared "settings card" wrapper, used by the dashboard-info form and cross-panel sync
+.settingsCard {
+	padding: 24px 16px;
+	border-radius: 3px;
+	border: 1px solid var(--l2-border);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralForm/GeneralForm.tsx

@@ -1,85 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Select/Input to @signozhq/ui
-import { Col, Input, Select, Space } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
-
-import { Base64Icons } from '../utils';
-import styles from '../GeneralSettings.module.scss';
-
-const { Option } = Select;
-
-interface GeneralFormProps {
-	title: string;
-	description: string;
-	image: string;
-	tags: string[];
-	onTitleChange: (value: string) => void;
-	onDescriptionChange: (value: string) => void;
-	onImageChange: (value: string) => void;
-	onTagsChange: Dispatch<SetStateAction<string[]>>;
-}
-
-function GeneralForm({
-	title,
-	description,
-	image,
-	tags,
-	onTitleChange,
-	onDescriptionChange,
-	onImageChange,
-	onTagsChange,
-}: GeneralFormProps): JSX.Element {
-	return (
-		<Col className={styles.overviewSettings}>
-			<Space direction="vertical" className={styles.formSpace}>
-				<div>
-					<Typography className={styles.dashboardName}>Dashboard Name</Typography>
-					<section className={styles.nameIconInput}>
-						<Select
-							defaultActiveFirstOption
-							data-testid="dashboard-image"
-							suffixIcon={null}
-							rootClassName={styles.dashboardImageInput}
-							value={image}
-							onChange={onImageChange}
-						>
-							{Base64Icons.map((icon) => (
-								<Option value={icon} key={icon}>
-									<img
-										src={icon}
-										alt="dashboard-icon"
-										className={styles.listItemImage}
-									/>
-								</Option>
-							))}
-						</Select>
-						<Input
-							data-testid="dashboard-name"
-							className={styles.dashboardNameInput}
-							value={title}
-							onChange={(e): void => onTitleChange(e.target.value)}
-						/>
-					</section>
-				</div>
-
-				<div>
-					<Typography className={styles.dashboardName}>Description</Typography>
-					<Input.TextArea
-						data-testid="dashboard-desc"
-						rows={6}
-						value={description}
-						className={styles.descriptionTextArea}
-						onChange={(e): void => onDescriptionChange(e.target.value)}
-					/>
-				</div>
-				<div>
-					<Typography className={styles.dashboardName}>Tags</Typography>
-					<AddTags tags={tags} setTags={onTagsChange} />
-				</div>
-			</Space>
-		</Col>
-	);
-}
-
-export default GeneralForm;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -1,238 +0,0 @@
-.overviewContent {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-	padding: 20px 16px;
-}
-
-.overviewSettings {
-	padding: 16px;
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-}
-
-.crossPanelSyncGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.formSpace {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 21px;
-}
-
-.crossPanelSyncSectionTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.crossPanelSyncSectionHeader {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	align-self: flex-start;
-}
-
-.crossPanelSyncInfoIcon {
-	cursor: help;
-	color: var(--l3-foreground);
-}
-
-.crossPanelSyncTooltipContent {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 300px;
-}
-
-.crossPanelSyncTooltipTitle {
-	font-size: 14px;
-}
-
-.crossPanelSyncTooltipDescription {
-	font-size: 12px;
-	line-height: 1.5;
-}
-
-.crossPanelSyncTooltipDocLink {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	color: var(--primary-background);
-	font-size: 12px;
-	margin-top: 4px;
-}
-
-.crossPanelSyncRow {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 16px;
-
-	& + & {
-		padding-top: 16px;
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-.crossPanelSyncInfo {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.crossPanelSyncTitle {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.crossPanelSyncDescription {
-	color: var(--l3-foreground);
-	font-family: Inter;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.nameIconInput {
-	display: flex;
-}
-
-.dashboardImageInput {
-	:global(.ant-select-selector) {
-		display: flex;
-		width: 32px;
-		height: 32px;
-		padding: 6px;
-		justify-content: center;
-		align-items: center;
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l3-background) !important;
-
-		:global(.ant-select-selection-item) {
-			display: flex;
-			align-items: center;
-		}
-	}
-
-	&:global(.ant-select-dropdown) {
-		padding: 0px !important;
-	}
-
-	:global(.ant-select-item) {
-		padding: 0px;
-		align-items: center;
-		justify-content: center;
-
-		:global(.ant-select-item-option-content) {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-}
-
-.listItemImage {
-	height: 16px;
-	width: 16px;
-}
-
-.dashboardNameInput {
-	border-radius: 0px 2px 2px 0px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.dashboardName {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	margin-bottom: 0.5rem;
-}
-
-.descriptionTextArea {
-	padding: 6px 6px 6px 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.overviewSettingsFooter {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: -webkit-fill-available;
-	padding: 12px 16px 12px 0px;
-	position: fixed;
-	bottom: 0;
-	height: 32px;
-	border-top: 1px solid var(--l1-border);
-	background: var(--l2-background);
-}
-
-.unsaved {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.unsavedDot {
-	width: 6px;
-	height: 6px;
-	border-radius: 50px;
-	background: var(--primary-background);
-	box-shadow: 0px 0px 6px 0px
-		color-mix(in srgb, var(--primary-background) 40%, transparent);
-}
-
-.unsavedChanges {
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 24px;
-	letter-spacing: -0.07px;
-}
-
-.footerActionBtns {
-	display: flex;
-	gap: 8px;
-}
-
-.discardBtn {
-	display: flex;
-	align-items: center;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}
-
-.saveBtn {
-	display: flex;
-	align-items: center;
-	margin: 0px !important;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/CrossPanelSync/CrossPanelSync.module.scss

@@ -0,0 +1,86 @@
+.crossPanelSyncGroup {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.crossPanelSyncSectionHeader {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.crossPanelsSyncSectionTitle {
+	color: var(--l1-foreground);
+	font-size: 14px;
+	font-weight: 500;
+}
+
+.crossPanelSyncInfoIcon {
+	cursor: help;
+}
+
+.crossPanelSyncTooltipContent {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 8px;
+	max-width: 200px;
+}
+
+.crossPanelSyncTooltipTitle {
+	font-size: 14px;
+}
+
+.crossPanelSyncTooltipDescription {
+	font-size: 12px;
+}
+
+.crossPanelSyncTooltipDocLink {
+	color: var(--primary-background);
+	font-size: 12px;
+	margin-top: 16px;
+	vertical-align: middle;
+
+	// typography override
+	--typography-text-display: inline-flex;
+	align-items: center;
+	gap: 5px;
+}
+
+.crossPanelSyncRow {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: center;
+	gap: 16px;
+
+	& + & {
+		padding-top: 16px;
+		border-top: 1px dashed var(--l2-border);
+	}
+}
+
+.crossPanelSyncInfo {
+	display: flex;
+	flex: 1 1 80px;
+	min-width: 0;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.crossPanelSyncTitle {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.crossPanelSyncDescription {
+	color: var(--l3-foreground);
+	font-family: Inter;
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 20px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/CrossPanelSync/CrossPanelSync.tsx

@@ -1,6 +1,5 @@
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
-import { Col, Radio, Tooltip } from 'antd';
 import { ExternalLink, SolidInfoCircle } from '@signozhq/icons';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { Events } from 'constants/events';
@@ -13,7 +12,9 @@ import {
 import { getAbsoluteUrl } from 'utils/basePath';
 import cx from 'classnames';
 
-import styles from '../GeneralSettings.module.scss';
+import SegmentedControl from '../SegmentedControl/SegmentedControl';
+import settingsStyles from '../../DashboardSettings.module.scss';
+import styles from './CrossPanelSync.module.scss';
 
 interface CrossPanelSyncProps {
 	dashboardId: string;
@@ -26,12 +27,15 @@ function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
 		useSyncTooltipFilterMode(dashboardId);
 
 	return (
-		<Col className={cx(styles.overviewSettings, styles.crossPanelSyncGroup)}>
+		<div className={cx(settingsStyles.settingsCard, styles.crossPanelSyncGroup)}>
 			<div className={styles.crossPanelSyncSectionHeader}>
-				<Typography.Text className={styles.crossPanelSyncSectionTitle}>
+				<Typography.Text className={styles.crossPanelsSyncSectionTitle}>
 					Cross-Panel Sync
 				</Typography.Text>
-				<Tooltip
+
+				<TooltipSimple
+					side="top"
+					withPortal={false}
 					title={
 						<div className={styles.crossPanelSyncTooltipContent}>
 							<strong className={styles.crossPanelSyncTooltipTitle}>
@@ -40,7 +44,7 @@ function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
 							<span className={styles.crossPanelSyncTooltipDescription}>
 								Sync crosshair and tooltip across all the dashboard panels
 							</span>
-							<a
+							<Typography.Link
 								href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
 								target="_blank"
 								rel="noopener noreferrer"
@@ -48,15 +52,14 @@ function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
 							>
 								Learn more
 								<ExternalLink size={12} />
-							</a>
+							</Typography.Link>
 						</div>
 					}
-					placement="top"
-					mouseEnterDelay={0.5}
 				>
 					<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
-				</Tooltip>
+				</TooltipSimple>
 			</div>
+
 			<div className={styles.crossPanelSyncRow}>
 				<div className={styles.crossPanelSyncInfo}>
 					<Typography.Text className={styles.crossPanelSyncTitle}>
@@ -66,19 +69,18 @@ function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
 						Sync crosshair and tooltip across all the dashboard panels
 					</Typography.Text>
 				</div>
-				<Radio.Group
+				<SegmentedControl
+					testId="cursor-sync-mode"
 					value={cursorSyncMode}
-					onChange={(e): void => {
-						setCursorSyncMode(e.target.value as DashboardCursorSync);
-					}}
-				>
-					<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
-					<Radio.Button value={DashboardCursorSync.Crosshair}>
-						Crosshair
-					</Radio.Button>
-					<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
-				</Radio.Group>
+					onChange={setCursorSyncMode}
+					options={[
+						{ label: 'No Sync', value: DashboardCursorSync.None },
+						{ label: 'Crosshair', value: DashboardCursorSync.Crosshair },
+						{ label: 'Tooltip', value: DashboardCursorSync.Tooltip },
+					]}
+				/>
 			</div>
+
 			{cursorSyncMode === DashboardCursorSync.Tooltip && (
 				<div className={styles.crossPanelSyncRow}>
 					<div className={styles.crossPanelSyncInfo}>
@@ -90,24 +92,25 @@ function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
 							matching ones highlighted
 						</Typography.Text>
 					</div>
-					<Radio.Group
+
+					<SegmentedControl
+						testId="sync-tooltip-filter-mode"
 						value={syncTooltipFilterMode}
-						onChange={(e): void => {
+						onChange={(value): void => {
 							void logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
 								path: getAbsoluteUrl(window.location.pathname),
-								mode: e.target.value,
+								mode: value,
 							});
-							setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
+							setSyncTooltipFilterMode(value);
 						}}
-					>
-						<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
-						<Radio.Button value={SyncTooltipFilterMode.Filtered}>
-							Filtered
-						</Radio.Button>
-					</Radio.Group>
+						options={[
+							{ label: 'All', value: SyncTooltipFilterMode.All },
+							{ label: 'Filtered', value: SyncTooltipFilterMode.Filtered },
+						]}
+					/>
 				</div>
 			)}
-		</Col>
+		</div>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/DashboardInfoForm/DashboardInfoForm.module.scss

@@ -0,0 +1,80 @@
+.formSpace {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.infoItemContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.infoTitle {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+}
+
+.nameIconInput {
+	display: flex;
+	gap: 4px;
+
+	[data-radix-popper-content-wrapper] {
+		z-index: 1100 !important;
+	}
+}
+
+.dashboardImageInput {
+	display: flex;
+	width: 32px;
+	min-width: 32px;
+	height: 32px;
+	padding: 6px;
+	justify-content: center;
+	align-items: center;
+	border-radius: 2px 0px 0px 2px;
+	background: var(--l3-background);
+
+	// icon-only trigger: drop the dropdown chevron, keep just the selected icon
+	svg {
+		display: none;
+	}
+}
+
+.dashboardImageOptions {
+	min-width: min-content;
+}
+
+.dashboardImageSelectItem {
+	width: min-content;
+
+	span {
+		vertical-align: middle;
+	}
+}
+
+.listItemImage {
+	height: 16px;
+	width: 16px;
+}
+
+.dashboardNameInput {
+	border-radius: 0px 2px 2px 0px;
+	border: 1px solid var(--l2-border);
+}
+
+.descriptionTextArea {
+	border-radius: 2px;
+	border: 1px solid var(--l2-border);
+}
+
+// the V1 tags input ships borderless; give the field a visible box to match
+.tagsField {
+	display: flex;
+	align-items: center;
+	padding: 6px 8px;
+	border-radius: 2px;
+	border: 1px solid var(--l2-border);
+	// background: var(--l3-background);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/DashboardInfoForm/DashboardInfoForm.tsx

@@ -0,0 +1,101 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Input } from '@signozhq/ui/input';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+} from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+// eslint-disable-next-line signoz/no-antd-components -- multiline TextArea has no @signozhq/ui equivalent yet
+import { Input as AntdInput } from 'antd';
+import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
+
+import { Base64Icons } from '../utils';
+import settingsStyles from '../../DashboardSettings.module.scss';
+import styles from './DashboardInfoForm.module.scss';
+
+interface DashboardInfoFormProps {
+	title: string;
+	description: string;
+	image: string;
+	tags: string[];
+	onTitleChange: (value: string) => void;
+	onDescriptionChange: (value: string) => void;
+	onImageChange: (value: string) => void;
+	onTagsChange: Dispatch<SetStateAction<string[]>>;
+}
+
+function DashboardInfoForm({
+	title,
+	description,
+	image,
+	tags,
+	onTitleChange,
+	onDescriptionChange,
+	onImageChange,
+	onTagsChange,
+}: DashboardInfoFormProps): JSX.Element {
+	return (
+		<div className={settingsStyles.settingsCard}>
+			<div className={styles.formSpace}>
+				<div className={styles.infoItemContainer}>
+					<Typography className={styles.infoTitle}>Dashboard Name</Typography>
+					<section className={styles.nameIconInput}>
+						<Select
+							value={image}
+							onChange={(value): void => onImageChange(value as string)}
+						>
+							<SelectTrigger className={styles.dashboardImageInput} />
+							<SelectContent
+								className={styles.dashboardImageOptions}
+								withPortal={false}
+							>
+								{Base64Icons.map((icon) => (
+									<SelectItem
+										key={icon}
+										value={icon}
+										className={styles.dashboardImageSelectItem}
+									>
+										<img
+											src={icon}
+											alt="dashboard-icon"
+											className={styles.listItemImage}
+										/>
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+
+						<Input
+							testId="dashboard-name"
+							className={styles.dashboardNameInput}
+							value={title}
+							onChange={(e): void => onTitleChange(e.target.value)}
+						/>
+					</section>
+				</div>
+
+				<div className={styles.infoItemContainer}>
+					<Typography className={styles.infoTitle}>Description</Typography>
+					<AntdInput.TextArea
+						data-testid="dashboard-desc"
+						rows={6}
+						value={description}
+						className={styles.descriptionTextArea}
+						onChange={(e): void => onDescriptionChange(e.target.value)}
+					/>
+				</div>
+
+				<div className={styles.infoItemContainer}>
+					<Typography className={styles.infoTitle}>Tags</Typography>
+					<div className={styles.tagsField}>
+						<AddTags tags={tags} setTags={onTagsChange} />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default DashboardInfoForm;

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

@@ -0,0 +1,5 @@
+.overviewContent {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/SegmentedControl/SegmentedControl.module.scss

@@ -0,0 +1,61 @@
+.segmented {
+	// override RadioGroup's default vertical grid; lay segments out connected
+	display: inline-flex;
+	grid-auto-flow: column;
+	gap: 0;
+	flex-shrink: 0;
+	border: 1px solid var(--l2-border);
+	border-radius: 2px;
+}
+
+.segment {
+	position: relative;
+	display: flex;
+	align-items: center;
+
+	&:not(:last-child) {
+		border-right: 1px solid var(--l2-border);
+	}
+
+	// the visible segment is the radio's label (htmlFor-wired, so clicks register)
+	label {
+		display: flex;
+		align-items: center;
+		min-height: 24px;
+		padding: 6px 14px;
+		font-family: Inter;
+		font-size: 13px;
+		line-height: 20px;
+		color: var(--l2-foreground);
+		white-space: nowrap;
+		cursor: pointer;
+		user-select: none;
+	}
+}
+
+// collapse the radio circle into a transparent full-cell click target
+.segmentInput {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+
+	// hide the default radio dot/indicator
+	* {
+		display: none;
+	}
+}
+
+// highlight the selected segment as a raised, lighter pill (data-state is a
+// stable Radix attribute). --l3-background is the lightest layer, so lift it
+// further with a subtle foreground tint rather than going darker.
+.segmentInput[data-state='checked'] + label {
+	background: var(--l3-background);
+	color: var(--l1-foreground);
+	font-weight: 500;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,51 @@
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+
+import styles from './SegmentedControl.module.scss';
+
+export interface SegmentedControlOption<T extends string> {
+	label: string;
+	value: T;
+}
+
+interface SegmentedControlProps<T extends string> {
+	value: T;
+	options: SegmentedControlOption<T>[];
+	onChange: (value: T) => void;
+	testId?: string;
+}
+
+/**
+ * Connected pill segmented control composed on top of @signozhq/ui RadioGroup:
+ * the radio circle is collapsed into a transparent full-cell click target and
+ * the label becomes the visible segment (highlighted via the radio's stable
+ * `data-state="checked"`). Keeps radio semantics + keyboard nav.
+ */
+function SegmentedControl<T extends string>({
+	value,
+	options,
+	onChange,
+	testId,
+}: SegmentedControlProps<T>): JSX.Element {
+	return (
+		<RadioGroup
+			className={styles.segmented}
+			value={value}
+			onChange={(next): void => onChange(next as T)}
+			testId={testId}
+		>
+			{options.map((option) => (
+				<RadioGroupItem
+					key={option.value}
+					value={option.value}
+					containerClassName={styles.segment}
+					className={styles.segmentInput}
+					testId={testId ? `${testId}-${option.value}` : undefined}
+				>
+					{option.label}
+				</RadioGroupItem>
+			))}
+		</RadioGroup>
+	);
+}
+
+export default SegmentedControl;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/UnsavedChangesFooter/UnsavedChangesFooter.module.scss

@@ -0,0 +1,39 @@
+.overviewSettingsFooter {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: -webkit-fill-available;
+	padding: 12px 16px 12px 16px;
+	position: fixed;
+	bottom: 0;
+	background: var(--l2-background);
+}
+
+.unsaved {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.unsavedDot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50px;
+	background: var(--primary-background);
+	box-shadow: 0px 0px 6px 0px
+		color-mix(in srgb, var(--primary-background) 40%, transparent);
+}
+
+.unsavedChanges {
+	color: var(--bg-robin-400);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 24px;
+	letter-spacing: -0.07px;
+}
+
+.footerActionButtons {
+	display: flex;
+	gap: 8px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/UnsavedChangesFooter/UnsavedChangesFooter.tsx

@@ -3,7 +3,7 @@ import { Button } from '@signozhq/ui/button';
 import { Check, X } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 
-import styles from '../GeneralSettings.module.scss';
+import styles from './UnsavedChangesFooter.module.scss';
 
 interface UnsavedChangesFooterProps {
 	count: number;
@@ -29,13 +29,13 @@ function UnsavedChangesFooter({
 					{count > 1 && 's'}
 				</Typography.Text>
 			</div>
-			<div className={styles.footerActionBtns}>
+			<div className={styles.footerActionButtons}>
 				<Button
 					variant="ghost"
+					color="secondary"
 					disabled={isSaving}
 					prefix={<X size={14} />}
 					onClick={onDiscard}
-					className={styles.discardBtn}
 				>
 					Discard
 				</Button>
@@ -47,7 +47,6 @@ function UnsavedChangesFooter({
 					prefix={<Check size={14} />}
 					testId="save-dashboard-config"
 					onClick={onSave}
-					className={styles.saveBtn}
 				>
 					{t('save')}
 				</Button>

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

@@ -11,22 +11,22 @@ import APIError from 'types/api/error';
 
 import { useDashboardStore } from '../../store/useDashboardStore';
 import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
-import GeneralForm from './GeneralForm/GeneralForm';
+import DashboardInfoForm from './DashboardInfoForm/DashboardInfoForm';
 import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
 import { Base64Icons, stringsToTags, tagsToStrings } from './utils';
-import styles from './GeneralSettings.module.scss';
+import styles from './Overview.module.scss';
 
-interface GeneralSettingsProps {
+interface OverviewProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 }
 
-function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
+function Overview({ dashboard }: OverviewProps): JSX.Element {
 	const id = dashboard.id;
 
 	const refetch = useDashboardStore((s) => s.refetch);
 
-	const title = dashboard.spec?.display?.name ?? '';
-	const description = dashboard.spec?.display?.description ?? '';
+	const title = dashboard.spec.display.name;
+	const description = dashboard.spec.display.description ?? '';
 	const image = dashboard.image || Base64Icons[0];
 	const tagsAsStrings = useMemo(
 		() => tagsToStrings(dashboard.tags ?? []),
@@ -64,7 +64,7 @@ function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
 			value,
 		});
 
-		if (updatedTitle !== title) {
+		if (updatedTitle !== title && updatedTitle !== '') {
 			ops.push(replace('/spec/display/name', updatedTitle));
 		}
 		if (updatedDescription !== description) {
@@ -89,9 +89,6 @@ function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
 	]);
 
 	const onSaveHandler = useCallback(async (): Promise<void> => {
-		if (!id) {
-			return;
-		}
 		const ops = buildPatch();
 		if (ops.length === 0) {
 			return;
@@ -110,7 +107,7 @@ function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
 	}, [id, buildPatch, refetch, showErrorModal]);
 
 	useEffect(() => {
-		let n = 0;
+		let numberOfUnsavedChanges = 0;
 		const initialValues = [title, description, tagsAsStrings, image];
 		const updatedValues = [
 			updatedTitle,
@@ -120,10 +117,10 @@ function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
 		];
 		initialValues.forEach((val, index) => {
 			if (!isEqual(val, updatedValues[index])) {
-				n += 1;
+				numberOfUnsavedChanges += 1;
 			}
 		});
-		setNumberOfUnsavedChanges(n);
+		setNumberOfUnsavedChanges(numberOfUnsavedChanges);
 	}, [
 		description,
 		image,
@@ -144,7 +141,7 @@ function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
 
 	return (
 		<div className={styles.overviewContent}>
-			<GeneralForm
+			<DashboardInfoForm
 				title={updatedTitle}
 				description={updatedDescription}
 				image={updatedImage}
@@ -167,4 +164,4 @@ function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
 	);
 }
 
-export default GeneralSettings;
+export default Overview;

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

@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useState } from 'react';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+// eslint-disable-next-line signoz/no-antd-components -- searchable async select: no @signozhq/ui equivalent
+import { Select } from 'antd';
+import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
+import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
+import useDebounce from 'hooks/useDebounce';
+
+import { TELEMETRY_SIGNALS, type TelemetrySignal } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface DynamicVariableFieldsProps {
+	attribute: string;
+	signal: TelemetrySignal;
+	onChange: (patch: {
+		dynamicAttribute?: string;
+		dynamicSignal?: TelemetrySignal;
+	}) => void;
+	onPreview: (values: (string | number)[]) => void;
+}
+
+/** Dynamic-variable body: telemetry signal + field, whose live values preview. */
+function DynamicVariableFields({
+	attribute,
+	signal,
+	onChange,
+	onPreview,
+}: DynamicVariableFieldsProps): JSX.Element {
+	const [search, setSearch] = useState('');
+	const debouncedSearch = useDebounce(search, 300);
+
+	const { data: keyData, isLoading } = useGetFieldKeys({
+		signal,
+		name: debouncedSearch || undefined,
+	});
+
+	// `keys` is a Record keyed BY field name; the field names are the map keys.
+	// When the API reports the list is `complete`, search filters locally.
+	const isComplete = keyData?.data?.complete === true;
+	const options = useMemo(
+		() =>
+			Object.keys(keyData?.data?.keys ?? {}).map((name) => ({
+				label: name,
+				value: name,
+			})),
+		[keyData],
+	);
+
+	const { data: valueData } = useGetFieldValues({
+		signal,
+		name: attribute,
+		enabled: !!attribute,
+	});
+
+	useEffect(() => {
+		const payload = valueData?.data;
+		const values =
+			payload?.normalizedValues ?? payload?.values?.StringValues ?? [];
+		onPreview(values);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [valueData]);
+
+	return (
+		<>
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Source</Typography.Text>
+				</div>
+				<SelectSimple
+					className={styles.sortSelect}
+					value={signal}
+					items={TELEMETRY_SIGNALS.map((s) => ({ label: s, value: s }))}
+					onChange={(value): void =>
+						onChange({ dynamicSignal: value as TelemetrySignal })
+					}
+					testId="variable-signal-select"
+				/>
+			</div>
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Attribute</Typography.Text>
+				</div>
+				<Select
+					className={styles.searchSelect}
+					showSearch
+					value={attribute || undefined}
+					placeholder="Select a telemetry field"
+					loading={isLoading}
+					filterOption={isComplete}
+					onSearch={setSearch}
+					onChange={(value): void => onChange({ dynamicAttribute: value as string })}
+					options={options}
+					notFoundContent={isLoading ? 'Loading…' : 'No fields found'}
+					data-testid="variable-field-select"
+				/>
+			</div>
+		</>
+	);
+}
+
+export default DynamicVariableFields;

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

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
+import Editor from 'components/Editor';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
+
+import type { VariableSort } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface QueryVariableFieldsProps {
+	queryValue: string;
+	sort: VariableSort;
+	onChange: (queryValue: string) => void;
+	onPreview: (values: (string | number)[]) => void;
+	onError: (message: string | null) => void;
+}
+
+/** Query-variable body: SQL editor + "Test Run Query" that previews the values. */
+function QueryVariableFields({
+	queryValue,
+	sort,
+	onChange,
+	onPreview,
+	onError,
+}: QueryVariableFieldsProps): JSX.Element {
+	const [isRunning, setIsRunning] = useState(false);
+
+	const runTest = async (): Promise<void> => {
+		setIsRunning(true);
+		onError(null);
+		try {
+			const res = await dashboardVariablesQuery({
+				query: queryValue,
+				variables: {},
+			});
+			if (res.statusCode === 200 && res.payload) {
+				onPreview(
+					sortValues(res.payload.variableValues ?? [], sort) as (string | number)[],
+				);
+			} else {
+				onError(res.error || 'Failed to run query');
+				onPreview([]);
+			}
+		} catch (err) {
+			onError((err as Error).message || 'Failed to run query');
+			onPreview([]);
+		} finally {
+			setIsRunning(false);
+		}
+	};
+
+	return (
+		<div className={styles.queryContainer}>
+			<div className={styles.labelContainer}>
+				<Typography.Text className={styles.label}>Query</Typography.Text>
+			</div>
+			<div className={styles.editorWrap}>
+				<Editor
+					language="sql"
+					value={queryValue}
+					onChange={(value): void => onChange(value)}
+					height="240px"
+					options={{
+						fontSize: 13,
+						wordWrap: 'on',
+						lineNumbers: 'off',
+						glyphMargin: false,
+						folding: false,
+						lineDecorationsWidth: 0,
+						lineNumbersMinChars: 0,
+						minimap: { enabled: false },
+					}}
+				/>
+			</div>
+			<div className={styles.testRow}>
+				<Button
+					variant="solid"
+					color="primary"
+					size="sm"
+					loading={isRunning}
+					disabled={!queryValue}
+					onClick={runTest}
+					testId="variable-test-run"
+				>
+					Test Run Query
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default QueryVariableFields;

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

@@ -0,0 +1,310 @@
+/* Faithful reproduction of the V1 VariableItem layout, scoped as a module and
+   built on @signozhq components where possible. antd is retained only for the
+   monaco Editor, multiline TextArea, Collapse, and searchable Selects. */
+
+.container {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px;
+}
+
+.allVariables {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 16px;
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.allVariablesBtn {
+	--button-height: 24px;
+	--button-padding: 0;
+	color: var(--muted-foreground);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 12px 16px 20px;
+}
+
+/* VariableItemRow */
+.row {
+	display: flex;
+	gap: 1rem;
+	margin-bottom: 0;
+}
+
+/* LabelContainer */
+.labelContainer {
+	width: 200px;
+}
+
+.label {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.column {
+	flex-direction: column;
+	gap: 8px;
+}
+
+.input,
+.textarea,
+.defaultInput {
+	padding: 6px 6px 6px 8px;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+	background: var(--l3-background);
+}
+
+.input,
+.textarea {
+	width: 100%;
+}
+
+.defaultInput {
+	width: 342px;
+}
+
+.errorText {
+	font-size: 12px;
+	color: var(--bg-amber-500);
+}
+
+/* Variable type segmented group */
+.typeSection {
+	align-items: center;
+	justify-content: space-between;
+}
+
+.typeLabelContainer {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: auto;
+}
+
+.typeBtnGroup {
+	display: grid;
+	grid-template-columns: repeat(4, max-content);
+	height: 32px;
+	flex-shrink: 0;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+	background: var(--l2-background);
+	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+.typeBtn {
+	--button-height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	min-width: 114px;
+	border-radius: 0;
+	color: var(--l2-foreground);
+
+	& + & {
+		border-left: 1px solid var(--l1-border);
+	}
+}
+
+.typeBtnSelected {
+	background: var(--l1-border);
+	color: var(--l1-foreground);
+}
+
+.betaTag {
+	margin-left: 4px;
+}
+
+/* Query */
+.queryContainer {
+	display: flex;
+	flex-flow: column wrap;
+	gap: 1rem;
+	min-width: 0;
+	margin-bottom: 0;
+}
+
+.editorWrap {
+	height: 240px;
+	overflow: hidden;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+}
+
+.testRow {
+	display: flex;
+	margin-top: 8px;
+}
+
+/* Custom — antd Collapse */
+.customSection {
+	margin-bottom: 0;
+}
+
+.customSection :global(.custom-collapse) {
+	width: 100%;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px 3px 0 0;
+
+	:global(.ant-collapse-item) {
+		border-bottom: none;
+	}
+
+	:global(.ant-collapse-header) {
+		align-items: center;
+		gap: 8px;
+		height: 38px;
+		padding: 12px;
+		background: var(--l3-background);
+		border-radius: 3px 3px 0 0;
+	}
+
+	:global(.ant-collapse-header-text) {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 1px 2px;
+		color: var(--bg-robin-400);
+		font-family: 'Space Mono';
+		font-size: 14px;
+		line-height: 18px;
+		border-radius: 2px;
+		background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
+	}
+
+	:global(.ant-collapse-content-box) {
+		padding: 0;
+	}
+
+	:global(.comma-input) {
+		height: 109px;
+		border: none;
+	}
+}
+
+/* Textbox */
+.textboxSection {
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 0;
+}
+
+/* Preview strip */
+.previewSection {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-height: 88px;
+	margin-bottom: 0;
+	padding-bottom: 8px;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px;
+}
+
+.previewLabel {
+	align-self: flex-start;
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+	padding: 4px 8px;
+	color: var(--bg-robin-400);
+	font-family: 'Space Mono';
+	font-size: 14px;
+	line-height: 18px;
+	border-radius: 3px 0 2px;
+	background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
+}
+
+.previewValues {
+	display: flex;
+	flex-flow: wrap;
+	gap: 8px;
+	padding: 4.5px 11px;
+	overflow-y: auto;
+}
+
+.previewValues [data-slot='badge'] {
+	height: 30px;
+	align-items: center;
+	color: var(--l1-foreground);
+	font-family: 'Space Mono';
+	font-size: 14px;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+}
+
+.previewError {
+	color: var(--bg-amber-500);
+}
+
+/* Sort / multi / all / default rows */
+.sortSection,
+.multiSection,
+.allOptionSection,
+.dynamicSection {
+	align-items: flex-start;
+	justify-content: space-between;
+	margin-bottom: 0;
+}
+
+.sortSection {
+	align-items: center;
+}
+
+.rowLabel {
+	width: 339px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.sortSelect {
+	width: 192px;
+}
+
+.defaultValueSection {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 1rem;
+	align-items: center;
+	margin-bottom: 0;
+}
+
+.defaultValueSection .label {
+	display: block;
+	margin-bottom: 2px;
+}
+
+.defaultValueDesc {
+	display: block;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 11px;
+	line-height: 18px;
+	letter-spacing: -0.06px;
+}
+
+.searchSelect {
+	width: 100%;
+}
+
+/* Footer */
+.footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 1rem;
+	margin-top: 12px;
+}

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

@@ -0,0 +1,351 @@
+import { useEffect, useState } from 'react';
+import { ArrowLeft, Check, X } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+// eslint-disable-next-line signoz/no-antd-components -- TextArea/Collapse/searchable Select: no @signozhq/ui equivalent
+import { Collapse, Input as AntdInput, Select } from 'antd';
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
+
+import {
+	VARIABLE_SORTS,
+	type VariableFormModel,
+	type VariableSort,
+	type VariableType,
+} from '../variableModel';
+import DynamicVariableFields from './DynamicVariableFields';
+import QueryVariableFields from './QueryVariableFields';
+import VariableTypeSelector from './VariableTypeSelector';
+import styles from './VariableForm.module.scss';
+
+const SORT_LABEL: Record<VariableSort, string> = {
+	DISABLED: 'Disabled',
+	ASC: 'Ascending',
+	DESC: 'Descending',
+};
+
+function getNameError(name: string, existingNames: string[]): string | null {
+	if (name === '') {
+		return 'Variable name is required';
+	}
+	if (/\s/.test(name)) {
+		return 'Variable name cannot contain whitespaces';
+	}
+	if (existingNames.includes(name)) {
+		return 'Variable name already exists';
+	}
+	return null;
+}
+
+interface VariableFormProps {
+	initial: VariableFormModel;
+	/** Names of the other variables, for uniqueness validation. */
+	existingNames: string[];
+	isSaving: boolean;
+	onClose: () => void;
+	onSave: (model: VariableFormModel) => void;
+}
+
+/**
+ * In-drawer variable editor reproducing the V1 VariableItem layout, built on
+ * @signozhq components (antd kept only for the monaco editor, TextArea, Collapse
+ * and searchable selects). Master→detail: renders in place of the list.
+ */
+function VariableForm({
+	initial,
+	existingNames,
+	isSaving,
+	onClose,
+	onSave,
+}: VariableFormProps): JSX.Element {
+	const [model, setModel] = useState<VariableFormModel>(initial);
+	const [previewValues, setPreviewValues] = useState<(string | number)[]>([]);
+	const [previewError, setPreviewError] = useState<string | null>(null);
+	const [defaultValue, setDefaultValue] = useState<string>(
+		((initial.defaultValue as { value?: string })?.value ?? '') as string,
+	);
+
+	useEffect(() => {
+		setModel(initial);
+		setPreviewValues([]);
+		setPreviewError(null);
+		setDefaultValue(
+			((initial.defaultValue as { value?: string })?.value ?? '') as string,
+		);
+	}, [initial]);
+
+	const set = (patch: Partial<VariableFormModel>): void =>
+		setModel((prev) => ({ ...prev, ...patch }));
+
+	const selectType = (type: VariableType): void => {
+		set({ type });
+		setPreviewValues([]);
+		setPreviewError(null);
+	};
+
+	const onCustomChange = (value: string): void => {
+		set({ customValue: value });
+		setPreviewValues(
+			sortValues(commaValuesParser(value), model.sort) as (string | number)[],
+		);
+	};
+
+	const trimmedName = model.name.trim();
+	const nameError = getNameError(trimmedName, existingNames);
+
+	const isListType =
+		model.type === 'QUERY' || model.type === 'CUSTOM' || model.type === 'DYNAMIC';
+	const showAllOptionField = model.type === 'QUERY' || model.type === 'CUSTOM';
+
+	const handleSave = (): void => {
+		onSave({
+			...model,
+			name: trimmedName,
+			defaultValue: defaultValue ? { value: defaultValue } : undefined,
+		});
+	};
+
+	return (
+		<>
+			<div className={styles.container}>
+				<div className={styles.allVariables}>
+					<Button
+						variant="ghost"
+						color="secondary"
+						className={styles.allVariablesBtn}
+						prefix={<ArrowLeft size={14} />}
+						onClick={onClose}
+						testId="variable-form-back"
+					>
+						All variables
+					</Button>
+				</div>
+
+				<div className={styles.content}>
+					{/* Name */}
+					<div className={cx(styles.row, styles.column)}>
+						<Typography.Text className={styles.label}>Name</Typography.Text>
+						<Input
+							className={styles.input}
+							value={model.name}
+							placeholder="Unique name of the variable"
+							onChange={(e): void => set({ name: e.target.value })}
+							testId="variable-name-input"
+						/>
+						{nameError ? (
+							<Typography.Text className={styles.errorText}>
+								{nameError}
+							</Typography.Text>
+						) : null}
+					</div>
+
+					{/* Description */}
+					<div className={cx(styles.row, styles.column)}>
+						<Typography.Text className={styles.label}>Description</Typography.Text>
+						<AntdInput.TextArea
+							className={styles.textarea}
+							value={model.description}
+							placeholder="Enter a description for the variable"
+							rows={3}
+							onChange={(e): void => set({ description: e.target.value })}
+							data-testid="variable-description-input"
+						/>
+					</div>
+
+					{/* Variable Type */}
+					<VariableTypeSelector value={model.type} onChange={selectType} />
+
+					{/* Type-specific body */}
+					{model.type === 'DYNAMIC' ? (
+						<DynamicVariableFields
+							attribute={model.dynamicAttribute}
+							signal={model.dynamicSignal}
+							onChange={(patch): void => set(patch)}
+							onPreview={setPreviewValues}
+						/>
+					) : null}
+
+					{model.type === 'QUERY' ? (
+						<QueryVariableFields
+							queryValue={model.queryValue}
+							sort={model.sort}
+							onChange={(queryValue): void => set({ queryValue })}
+							onPreview={setPreviewValues}
+							onError={setPreviewError}
+						/>
+					) : null}
+
+					{model.type === 'CUSTOM' ? (
+						<div className={cx(styles.row, styles.customSection)}>
+							<Collapse
+								collapsible="header"
+								rootClassName="custom-collapse"
+								defaultActiveKey={['1']}
+								items={[
+									{
+										key: '1',
+										label: 'Options',
+										children: (
+											<AntdInput.TextArea
+												value={model.customValue}
+												placeholder="Enter options separated by commas."
+												rootClassName="comma-input"
+												onChange={(e): void => onCustomChange(e.target.value)}
+												data-testid="variable-custom-input"
+											/>
+										),
+									},
+								]}
+							/>
+						</div>
+					) : null}
+
+					{model.type === 'TEXT' ? (
+						<div className={cx(styles.row, styles.textboxSection)}>
+							<div className={styles.labelContainer}>
+								<Typography.Text className={styles.label}>
+									Default Value
+								</Typography.Text>
+							</div>
+							<Input
+								className={styles.defaultInput}
+								value={model.textValue}
+								placeholder="Enter a default value (if any)..."
+								onChange={(e): void => set({ textValue: e.target.value })}
+								testId="variable-text-input"
+							/>
+						</div>
+					) : null}
+
+					{/* Shared rows for list-type variables */}
+					{isListType ? (
+						<>
+							<div className={cx(styles.row, styles.previewSection)}>
+								<Typography.Text className={styles.previewLabel}>
+									Preview of Values
+								</Typography.Text>
+								<div className={styles.previewValues}>
+									{previewError ? (
+										<Typography.Text className={styles.previewError}>
+											{previewError}
+										</Typography.Text>
+									) : (
+										previewValues.map((value, idx) => (
+											<Badge
+												// eslint-disable-next-line react/no-array-index-key -- preview values are display-only and may contain duplicates
+												key={`${value}-${idx}`}
+												color="vanilla"
+											>
+												{value.toString()}
+											</Badge>
+										))
+									)}
+								</div>
+							</div>
+
+							<div className={cx(styles.row, styles.sortSection)}>
+								<div className={styles.labelContainer}>
+									<Typography.Text className={styles.label}>Sort Values</Typography.Text>
+								</div>
+								<SelectSimple
+									className={styles.sortSelect}
+									value={model.sort}
+									items={VARIABLE_SORTS.map((sort) => ({
+										label: SORT_LABEL[sort],
+										value: sort,
+									}))}
+									onChange={(value): void => set({ sort: value as VariableSort })}
+									testId="variable-sort-select"
+								/>
+							</div>
+
+							<div className={cx(styles.row, styles.multiSection)}>
+								<Typography.Text className={styles.rowLabel}>
+									Enable multiple values to be checked
+								</Typography.Text>
+								<Switch
+									value={model.multiSelect}
+									onChange={(checked): void => {
+										set({
+											multiSelect: checked,
+											showAllOption: checked ? model.showAllOption : false,
+										});
+									}}
+									testId="variable-multi-switch"
+								/>
+							</div>
+
+							{model.multiSelect && showAllOptionField ? (
+								<div className={cx(styles.row, styles.allOptionSection)}>
+									<Typography.Text className={styles.rowLabel}>
+										Include an option for ALL values
+									</Typography.Text>
+									<Switch
+										value={model.showAllOption}
+										onChange={(checked): void => set({ showAllOption: checked })}
+										testId="variable-all-switch"
+									/>
+								</div>
+							) : null}
+
+							<div className={cx(styles.row, styles.defaultValueSection)}>
+								<div className={styles.labelContainer}>
+									<Typography.Text className={styles.label}>
+										Default Value
+									</Typography.Text>
+									<Typography.Text className={styles.defaultValueDesc}>
+										{model.type === 'QUERY'
+											? 'Click Test Run Query to see the values or add custom value'
+											: 'Select a value from the preview values or add custom value'}
+									</Typography.Text>
+								</div>
+								<Select
+									className={styles.searchSelect}
+									showSearch
+									allowClear
+									placeholder="Select a default value"
+									value={defaultValue || undefined}
+									onChange={(value): void => setDefaultValue(value ?? '')}
+									options={previewValues.map((value) => ({
+										label: value.toString(),
+										value: value.toString(),
+									}))}
+									data-testid="variable-default-select"
+								/>
+							</div>
+						</>
+					) : null}
+				</div>
+			</div>
+
+			<div className={styles.footer}>
+				<Button
+					variant="solid"
+					color="secondary"
+					prefix={<X size={14} />}
+					onClick={onClose}
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					prefix={<Check size={14} />}
+					disabled={!!nameError}
+					loading={isSaving}
+					onClick={handleSave}
+					testId="variable-save"
+				>
+					Save Variable
+				</Button>
+			</div>
+		</>
+	);
+}
+
+export default VariableForm;

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

@@ -0,0 +1,99 @@
+import {
+	ClipboardType,
+	DatabaseZap,
+	Info,
+	LayoutList,
+	Pyramid,
+} from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import TextToolTip from 'components/TextToolTip';
+
+import type { VariableType } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface VariableTypeSelectorProps {
+	value: VariableType;
+	onChange: (type: VariableType) => void;
+}
+
+/** The segmented Dynamic / Textbox / Custom / Query type picker. */
+function VariableTypeSelector({
+	value,
+	onChange,
+}: VariableTypeSelectorProps): JSX.Element {
+	return (
+		<div className={cx(styles.row, styles.typeSection)}>
+			<div className={styles.typeLabelContainer}>
+				<Typography.Text className={styles.label}>Variable Type</Typography.Text>
+				<TextToolTip
+					text="Learn more about supported variable types"
+					url="https://signoz.io/docs/userguide/manage-variables/#supported-variable-types"
+					urlText="here"
+					useFilledIcon={false}
+					outlinedIcon={<Info size={14} />}
+				/>
+			</div>
+			<div className={styles.typeBtnGroup}>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<Pyramid size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'DYNAMIC',
+					})}
+					onClick={(): void => onChange('DYNAMIC')}
+					testId="variable-type-dynamic"
+				>
+					Dynamic
+					<Badge color="robin" className={styles.betaTag}>
+						Beta
+					</Badge>
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<ClipboardType size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'TEXT',
+					})}
+					onClick={(): void => onChange('TEXT')}
+					testId="variable-type-textbox"
+				>
+					Textbox
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<LayoutList size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'CUSTOM',
+					})}
+					onClick={(): void => onChange('CUSTOM')}
+					testId="variable-type-custom"
+				>
+					Custom
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<DatabaseZap size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'QUERY',
+					})}
+					onClick={(): void => onChange('QUERY')}
+					testId="variable-type-query"
+				>
+					Query
+					<Badge color="amber" className={styles.betaTag}>
+						Not Recommended
+					</Badge>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default VariableTypeSelector;

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

@@ -0,0 +1,101 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 20px 16px;
+}
+
+.header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.titleRow {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.title {
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--l1-foreground);
+}
+
+.subtitle {
+	font-size: 12px;
+	color: var(--l2-foreground);
+}
+
+.empty {
+	padding: 32px;
+	text-align: center;
+	border: 1px dashed var(--l1-border);
+	border-radius: 4px;
+	color: var(--l2-foreground);
+}
+
+.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;
+	background: var(--l1-background);
+}
+
+.rowMain {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
+
+.varName {
+	font-weight: 500;
+	color: var(--l1-foreground);
+}
+
+.varDesc {
+	min-width: 0;
+	overflow: hidden;
+	font-size: 12px;
+	color: var(--l2-foreground);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.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;
+}
+
+.rowActions {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	gap: 2px;
+}
+
+.confirmText {
+	margin-right: 4px;
+	font-size: 12px;
+	color: var(--l2-foreground);
+}

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

@@ -0,0 +1,139 @@
+import {
+	Check,
+	ChevronDown,
+	ChevronUp,
+	PenLine,
+	Trash2,
+	X,
+} from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import type { VariableFormModel } from './variableModel';
+import styles from './Variables.module.scss';
+
+const TYPE_LABEL: Record<VariableFormModel['type'], string> = {
+	QUERY: 'Query',
+	CUSTOM: 'Custom',
+	TEXT: 'Text',
+	DYNAMIC: 'Dynamic',
+};
+
+interface VariablesListProps {
+	variables: VariableFormModel[];
+	canEdit: boolean;
+	/** Index whose delete is awaiting inline confirmation, if any. */
+	confirmingIndex: number | null;
+	onEdit: (index: number) => void;
+	onRequestDelete: (index: number) => void;
+	onConfirmDelete: (index: number) => void;
+	onCancelDelete: () => void;
+	onMove: (from: number, to: number) => void;
+}
+
+function VariablesList({
+	variables,
+	canEdit,
+	confirmingIndex,
+	onEdit,
+	onRequestDelete,
+	onConfirmDelete,
+	onCancelDelete,
+	onMove,
+}: VariablesListProps): JSX.Element {
+	return (
+		<div className={styles.list} data-testid="variables-list">
+			{variables.map((variable, index) => (
+				<div
+					className={styles.row}
+					key={variable.name || `variable-${index}`}
+					data-testid={`variable-row-${variable.name}`}
+				>
+					<div className={styles.rowMain}>
+						<Typography.Text className={styles.varName}>
+							${variable.name}
+						</Typography.Text>
+						<span className={styles.typeTag}>{TYPE_LABEL[variable.type]}</span>
+						{variable.description ? (
+							<Typography.Text className={styles.varDesc}>
+								{variable.description}
+							</Typography.Text>
+						) : null}
+					</div>
+
+					{canEdit && confirmingIndex === index ? (
+						<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 && confirmingIndex !== index ? (
+						<div className={styles.rowActions}>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								disabled={index === 0}
+								onClick={(): void => onMove(index, index - 1)}
+								aria-label="Move up"
+							>
+								<ChevronUp size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								disabled={index === variables.length - 1}
+								onClick={(): void => onMove(index, index + 1)}
+								aria-label="Move down"
+							>
+								<ChevronDown size={14} />
+							</Button>
+							<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>
+			))}
+		</div>
+	);
+}
+
+export default VariablesList;

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

@@ -0,0 +1,147 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { useSaveVariables } from './useSaveVariables';
+import { dtoToFormModel } from './variableAdapters';
+import {
+	emptyVariableFormModel,
+	type VariableFormModel,
+} from './variableModel';
+import VariableForm from './VariableForm/VariableForm';
+import VariablesList from './VariablesList';
+import styles from './Variables.module.scss';
+
+interface VariablesSettingsProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+/** `null` index = adding a new variable; a number = editing that row. */
+type EditingState = { index: number | null } | null;
+
+function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
+	const { save, isSaving } = useSaveVariables();
+
+	const initialModels = useMemo(
+		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
+		[dashboard.spec?.variables],
+	);
+	const [variables, setVariables] = useState<VariableFormModel[]>(initialModels);
+
+	// Resync from the dashboard after a save round-trips (refetch bumps updatedAt).
+	useEffect(() => {
+		setVariables(initialModels);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dashboard.updatedAt]);
+
+	const [editing, setEditing] = useState<EditingState>(null);
+	const [confirmDeleteIndex, setConfirmDeleteIndex] = useState<number | null>(
+		null,
+	);
+
+	const editingModel: VariableFormModel | null = useMemo(() => {
+		if (!editing) {
+			return null;
+		}
+		return editing.index === null
+			? emptyVariableFormModel()
+			: variables[editing.index];
+	}, [editing, variables]);
+
+	const existingNames = useMemo(() => {
+		const self = editing?.index ?? null;
+		return variables.filter((_, i) => i !== self).map((v) => v.name);
+	}, [variables, editing]);
+
+	const persist = (next: VariableFormModel[]): void => {
+		setVariables(next);
+		void save(next);
+	};
+
+	const handleFormSave = (model: VariableFormModel): void => {
+		const next = [...variables];
+		if (editing?.index == null) {
+			next.push(model);
+		} else {
+			next[editing.index] = model;
+		}
+		setEditing(null);
+		persist(next);
+	};
+
+	const handleMove = (from: number, to: number): void => {
+		if (to < 0 || to >= variables.length) {
+			return;
+		}
+		const next = [...variables];
+		const [moved] = next.splice(from, 1);
+		next.splice(to, 0, moved);
+		persist(next);
+	};
+
+	const handleConfirmDelete = (index: number): void => {
+		persist(variables.filter((_, i) => i !== index));
+		setConfirmDeleteIndex(null);
+	};
+
+	// Detail view — edit/new form replaces the list in place (no modal).
+	if (editingModel) {
+		return (
+			<VariableForm
+				initial={editingModel}
+				existingNames={existingNames}
+				isSaving={isSaving}
+				onClose={(): void => setEditing(null)}
+				onSave={handleFormSave}
+			/>
+		);
+	}
+
+	// Master view — the variables list.
+	return (
+		<div className={styles.container}>
+			<div className={styles.header}>
+				<div className={styles.titleRow}>
+					<Typography.Text className={styles.title}>Variables</Typography.Text>
+					<Typography.Text className={styles.subtitle}>
+						Define variables to parameterize panel queries.
+					</Typography.Text>
+				</div>
+				{isEditable ? (
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Plus size={14} />}
+						onClick={(): void => setEditing({ index: null })}
+						testId="add-variable"
+					>
+						New variable
+					</Button>
+				) : null}
+			</div>
+
+			{variables.length === 0 ? (
+				<div className={styles.empty}>
+					<Typography.Text>No variables defined yet.</Typography.Text>
+				</div>
+			) : (
+				<VariablesList
+					variables={variables}
+					canEdit={isEditable}
+					confirmingIndex={confirmDeleteIndex}
+					onEdit={(index): void => setEditing({ index })}
+					onRequestDelete={(index): void => setConfirmDeleteIndex(index)}
+					onConfirmDelete={handleConfirmDelete}
+					onCancelDelete={(): void => setConfirmDeleteIndex(null)}
+					onMove={handleMove}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default VariablesSettings;

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

@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react';
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { toast } from '@signozhq/ui/sonner';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { formModelToDto } from './variableAdapters';
+import type { VariableFormModel } from './variableModel';
+import { buildVariablesPatch } from './variablePatchOps';
+
+interface UseSaveVariables {
+	save: (variables: VariableFormModel[]) => Promise<boolean>;
+	isSaving: boolean;
+}
+
+/**
+ * Persists the dashboard's variable list via a single `/spec/variables` patch,
+ * then refetches. Mirrors the General-settings save flow (patch → toast →
+ * refetch → surface errors).
+ */
+export function useSaveVariables(): UseSaveVariables {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+	const [isSaving, setIsSaving] = useState(false);
+
+	const save = useCallback(
+		async (variables: VariableFormModel[]): Promise<boolean> => {
+			if (!dashboardId) {
+				return false;
+			}
+			const dtos = variables.map(formModelToDto);
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, buildVariablesPatch(dtos));
+				toast.success('Variables updated');
+				refetch();
+				return true;
+			} catch (error) {
+				showErrorModal(error as APIError);
+				return false;
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, refetch, showErrorModal],
+	);
+
+	return { save, isSaving };
+}

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

@@ -0,0 +1,154 @@
+import {
+	DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind as TextEnvelopeKind,
+	DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind as ListEnvelopeKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTOKind as CustomPluginKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind as DynamicPluginKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTOKind as QueryPluginKind,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesListVariableSpecDTO,
+	DashboardtypesVariableDTO,
+	DashboardtypesVariablePluginDTO,
+	DashboardTextVariableSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import {
+	emptyVariableFormModel,
+	PLUGIN_KIND,
+	type TelemetrySignal,
+	type VariableFormModel,
+	type VariableSort,
+} from './variableModel';
+
+/** DTO envelope → flat form model (for display / editing). */
+export function dtoToFormModel(
+	dto: DashboardtypesVariableDTO,
+): VariableFormModel {
+	const base = emptyVariableFormModel();
+	const display = dto.spec?.display;
+	const common: VariableFormModel = {
+		...base,
+		name: dto.spec?.name ?? display?.name ?? '',
+		description: display?.description ?? '',
+		hidden: display?.hidden ?? false,
+	};
+
+	// Text variable — a distinct envelope (no list plugin).
+	if (dto.kind === TextEnvelopeKind.TextVariable) {
+		const spec = dto.spec as DashboardTextVariableSpecDTO;
+		return {
+			...common,
+			type: 'TEXT',
+			textValue: spec.value ?? '',
+			textConstant: spec.constant ?? false,
+		};
+	}
+
+	// List variable — Query / Custom / Dynamic, distinguished by plugin.kind.
+	const spec = dto.spec as DashboardtypesListVariableSpecDTO;
+	const listCommon: VariableFormModel = {
+		...common,
+		multiSelect: spec.allowMultiple ?? false,
+		showAllOption: spec.allowAllValue ?? false,
+		sort: (spec.sort as VariableSort) ?? 'DISABLED',
+		defaultValue: spec.defaultValue,
+	};
+	const plugin = spec.plugin;
+
+	if (plugin?.kind === CustomPluginKind['signoz/CustomVariable']) {
+		return {
+			...listCommon,
+			type: 'CUSTOM',
+			customValue: plugin.spec.customValue ?? '',
+		};
+	}
+	if (plugin?.kind === DynamicPluginKind['signoz/DynamicVariable']) {
+		return {
+			...listCommon,
+			type: 'DYNAMIC',
+			dynamicAttribute: plugin.spec.name ?? '',
+			dynamicSignal: (plugin.spec.signal as TelemetrySignal) ?? 'traces',
+		};
+	}
+	// Default to Query (also covers a query plugin or a missing/unknown plugin).
+	return {
+		...listCommon,
+		type: 'QUERY',
+		queryValue:
+			plugin?.kind === QueryPluginKind['signoz/QueryVariable']
+				? (plugin.spec.queryValue ?? '')
+				: '',
+	};
+}
+
+function buildPlugin(
+	model: VariableFormModel,
+): DashboardtypesVariablePluginDTO {
+	switch (model.type) {
+		case 'CUSTOM':
+			return {
+				kind: CustomPluginKind['signoz/CustomVariable'],
+				spec: { customValue: model.customValue },
+			};
+		case 'DYNAMIC':
+			return {
+				kind: DynamicPluginKind['signoz/DynamicVariable'],
+				spec: {
+					name: model.dynamicAttribute,
+					signal: model.dynamicSignal as TelemetrytypesSignalDTO,
+				},
+			};
+		case 'QUERY':
+		default:
+			return {
+				kind: QueryPluginKind['signoz/QueryVariable'],
+				spec: { queryValue: model.queryValue },
+			};
+	}
+}
+
+/** Flat form model → DTO envelope (for persistence). */
+export function formModelToDto(
+	model: VariableFormModel,
+): DashboardtypesVariableDTO {
+	const display = {
+		name: model.name,
+		description: model.description,
+		hidden: model.hidden,
+	};
+
+	if (model.type === 'TEXT') {
+		return {
+			kind: TextEnvelopeKind.TextVariable,
+			spec: {
+				name: model.name,
+				display,
+				value: model.textValue,
+				constant: model.textConstant,
+			},
+		};
+	}
+
+	return {
+		kind: ListEnvelopeKind.ListVariable,
+		spec: {
+			name: model.name,
+			display,
+			allowMultiple: model.multiSelect,
+			allowAllValue: model.showAllOption,
+			sort: model.sort,
+			defaultValue: model.defaultValue,
+			plugin: buildPlugin(model),
+		},
+	};
+}
+
+/** Maps the V2 plugin/envelope to the four UI-facing variable types. */
+export function variableTypeOf(
+	dto: DashboardtypesVariableDTO,
+): VariableFormModel['type'] {
+	return dtoToFormModel(dto).type;
+}
+
+export { PLUGIN_KIND };

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

@@ -0,0 +1,78 @@
+import type { VariableDefaultValueDTO } from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Flat, UI-friendly representation of a V2 dashboard variable. The wire format
+ * (`DashboardtypesVariableDTO`) is a nested envelope/plugin union that is awkward
+ * to bind a form to; `variableAdapters` converts between this model and the DTO.
+ */
+
+export type VariableType = 'QUERY' | 'CUSTOM' | 'TEXT' | 'DYNAMIC';
+
+export type VariableSort = 'DISABLED' | 'ASC' | 'DESC';
+
+export type TelemetrySignal = 'traces' | 'logs' | 'metrics';
+
+/** Wire `kind` discriminators (string values of the generated enums). */
+export const ENVELOPE_KIND = {
+	LIST: 'ListVariable',
+	TEXT: 'TextVariable',
+} as const;
+
+export const PLUGIN_KIND = {
+	QUERY: 'signoz/QueryVariable',
+	CUSTOM: 'signoz/CustomVariable',
+	DYNAMIC: 'signoz/DynamicVariable',
+} as const;
+
+export const VARIABLE_SORTS: VariableSort[] = ['DISABLED', 'ASC', 'DESC'];
+
+export const TELEMETRY_SIGNALS: TelemetrySignal[] = [
+	'traces',
+	'logs',
+	'metrics',
+];
+
+export interface VariableFormModel {
+	/** Stable identifier, referenced in queries (e.g. `$name`); must be unique. */
+	name: string;
+	description: string;
+	hidden: boolean;
+	type: VariableType;
+
+	// List-variable common fields (Query / Custom / Dynamic).
+	multiSelect: boolean;
+	showAllOption: boolean;
+	sort: VariableSort;
+
+	// Type-specific.
+	queryValue: string; // QUERY
+	customValue: string; // CUSTOM
+	textValue: string; // TEXT
+	textConstant: boolean; // TEXT
+	dynamicAttribute: string; // DYNAMIC — the telemetry field name
+	dynamicSignal: TelemetrySignal; // DYNAMIC — the telemetry signal
+
+	/**
+	 * Runtime-selected default, not editable in the management tab yet; carried
+	 * through edits so saving a definition doesn't clobber it.
+	 */
+	defaultValue?: VariableDefaultValueDTO;
+}
+
+export function emptyVariableFormModel(): VariableFormModel {
+	return {
+		name: '',
+		description: '',
+		hidden: false,
+		type: 'QUERY',
+		multiSelect: false,
+		showAllOption: false,
+		sort: 'DISABLED',
+		queryValue: '',
+		customValue: '',
+		textValue: '',
+		textConstant: false,
+		dynamicAttribute: '',
+		dynamicSignal: 'traces',
+	};
+}

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

@@ -0,0 +1,22 @@
+import type {
+	DashboardtypesJSONPatchOperationDTO,
+	DashboardtypesVariableDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Builds the JSON-Patch to persist the dashboard's variable list. Add/edit/
+ * delete/reorder all replace the whole `/spec/variables` array in one atomic op
+ * — simpler and race-free vs per-index patches. RFC-6902 `add` on an object
+ * member sets-or-replaces, so it works whether or not `variables` already exists.
+ */
+export function buildVariablesPatch(
+	variables: DashboardtypesVariableDTO[],
+): DashboardtypesJSONPatchOperationDTO[] {
+	return [
+		{
+			op: 'add' as DashboardtypesJSONPatchOperationDTO['op'],
+			path: '/spec/variables',
+			value: variables,
+		},
+	];
+}

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

@@ -1,11 +1,21 @@
 import { useMemo } from 'react';
 
 import { Braces, Globe, Table } from '@signozhq/icons';
-import { Tabs } from '@signozhq/ui/tabs';
+import {
+	TabItemProps,
+	TabsContent,
+	TabsList,
+	TabsRoot,
+	TabsTrigger,
+} from '@signozhq/ui/tabs';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 
-import GeneralSettings from './General';
-import { SettingsTabPlaceholder } from './utils';
+import Overview from './Overview';
+import PublicDashboardSettings from './PublicDashboard';
+import VariablesSettings from './Variables';
+import { useAppContext } from 'providers/App/App';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { USER_ROLES } from 'types/roles';
 
 import styles from './DashboardSettings.module.scss';
 
@@ -13,42 +23,68 @@ interface DashboardSettingsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 }
 
-function tabLabel(icon: JSX.Element, text: string): JSX.Element {
-	return (
-		<span className={styles.tabLabel}>
-			{icon}
-			{text}
-		</span>
-	);
+enum TabKeys {
+	OVERVIEW = 'Overview',
+	VARIABLES = 'Variables',
+	PUBLISH = 'Publish',
 }
 
+const prefixIcons: Record<TabKeys, JSX.Element> = {
+	[TabKeys.OVERVIEW]: <Table size={14} />,
+	[TabKeys.VARIABLES]: <Braces size={14} />,
+	[TabKeys.PUBLISH]: <Globe size={14} />,
+};
+
 function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
-	const items = useMemo(
+	const { user } = useAppContext();
+	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
+
+	const enablePublicDashboard = isCloudUser || isEnterpriseSelfHostedUser;
+
+	const items: TabItemProps[] = useMemo(
 		() => [
 			{
-				key: 'general',
-				label: tabLabel(<Table size={14} />, 'General'),
-				children: <GeneralSettings dashboard={dashboard} />,
+				key: TabKeys.OVERVIEW,
+				label: TabKeys.OVERVIEW,
+				children: <Overview dashboard={dashboard} />,
 			},
 			{
-				key: 'variables',
-				label: tabLabel(<Braces size={14} />, 'Variables'),
-				children: (
-					<SettingsTabPlaceholder message="V2 dashboard variables coming next." />
-				),
-			},
-			{
-				key: 'public-dashboard',
-				label: tabLabel(<Globe size={14} />, 'Publish'),
-				children: (
-					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
-				),
+				key: TabKeys.VARIABLES,
+				label: TabKeys.VARIABLES,
+				children: <VariablesSettings dashboard={dashboard} />,
 			},
+			...(enablePublicDashboard
+				? [
+						{
+							key: TabKeys.PUBLISH,
+							label: TabKeys.PUBLISH,
+							children: <PublicDashboardSettings dashboard={dashboard} />,
+							disabled: user?.role !== USER_ROLES.ADMIN,
+						},
+					]
+				: []),
 		],
-		[dashboard],
+		[enablePublicDashboard, dashboard, user?.role],
 	);
 
-	return <Tabs defaultValue="general" items={items} />;
+	return (
+		<TabsRoot defaultValue={TabKeys.OVERVIEW}>
+			<TabsList variant="primary">
+				{Object.values(TabKeys).map((key) => (
+					<TabsTrigger value={key} key={key}>
+						{prefixIcons[key]}
+						{key}
+					</TabsTrigger>
+				))}
+			</TabsList>
+
+			{items.map((item) => (
+				<TabsContent value={item.key} key={item.key} className={styles.tabsContent}>
+					{item.children}
+				</TabsContent>
+			))}
+		</TabsRoot>
+	);
 }
 
 export default DashboardSettings;

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

@@ -0,0 +1,98 @@
+import { useMemo } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
+
+import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
+import type { VariableSelection, VariableSelectionMap } from './selectionTypes';
+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 {
+	variable: VariableFormModel;
+	/** All variables (Dynamic uses them to scope options by sibling selections). */
+	variables: VariableFormModel[];
+	/** Names this variable depends on (for Query gating). */
+	parents: string[];
+	/** All current selections (Query passes them as the request payload). */
+	selections: VariableSelectionMap;
+	selection: VariableSelection;
+	onChange: (selection: VariableSelection) => void;
+}
+
+/** One labelled variable control; dispatches on the variable type. */
+function VariableSelector({
+	variable,
+	variables,
+	parents,
+	selections,
+	selection,
+	onChange,
+}: VariableSelectorProps): JSX.Element {
+	const customOptions = useMemo(
+		() =>
+			variable.type === 'CUSTOM'
+				? sortValues(commaValuesParser(variable.customValue), variable.sort).map(
+						String,
+					)
+				: [],
+		[variable],
+	);
+
+	const renderControl = (): JSX.Element => {
+		switch (variable.type) {
+			case 'TEXT':
+				return (
+					<TextSelector
+						selection={selection}
+						onChange={onChange}
+						testId={`variable-input-${variable.name}`}
+					/>
+				);
+			case 'QUERY':
+				return (
+					<QuerySelector
+						variable={variable}
+						parents={parents}
+						selections={selections}
+						selection={selection}
+						onChange={onChange}
+					/>
+				);
+			case 'DYNAMIC':
+				return (
+					<DynamicSelector
+						variable={variable}
+						variables={variables}
+						selections={selections}
+						selection={selection}
+						onChange={onChange}
+					/>
+				);
+			case 'CUSTOM':
+			default:
+				return (
+					<ValueSelector
+						options={customOptions}
+						multiSelect={variable.multiSelect}
+						showAllOption={variable.showAllOption}
+						selection={selection}
+						onChange={onChange}
+						testId={`variable-select-${variable.name}`}
+					/>
+				);
+		}
+	};
+
+	return (
+		<div className={styles.variable} data-testid={`variable-${variable.name}`}>
+			<Typography.Text className={styles.label}>${variable.name}</Typography.Text>
+			{renderControl()}
+		</div>
+	);
+}
+
+export default VariableSelector;

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

@@ -0,0 +1,29 @@
+.bar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	gap: 12px 16px;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.variable {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+
+.label {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--l2-foreground);
+}
+
+.select {
+	min-width: 160px;
+}
+
+.input {
+	min-width: 160px;
+}

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

@@ -0,0 +1,45 @@
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import { useVariableSelection } from './useVariableSelection';
+import VariableSelector from './VariableSelector';
+import styles from './VariablesBar.module.scss';
+
+interface VariablesBarProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+/**
+ * Runtime variable selector bar shown above the panels. Renders one control per
+ * dashboard variable; selections live in the store + URL (never the spec).
+ */
+function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
+	const { variables, dependencyData, selection, setSelection } =
+		useVariableSelection(dashboard);
+
+	if (variables.length === 0) {
+		return null;
+	}
+
+	return (
+		<div className={styles.bar} data-testid="dashboard-variables-bar">
+			{variables.map((variable) => (
+				<VariableSelector
+					key={variable.name}
+					variable={variable}
+					variables={variables}
+					parents={dependencyData.parentGraph[variable.name] ?? []}
+					selections={selection}
+					selection={
+						selection[variable.name] ?? {
+							value: variable.multiSelect ? [] : '',
+							allSelected: false,
+						}
+					}
+					onChange={(next): void => setSelection(variable.name, next)}
+				/>
+			))}
+		</div>
+	);
+}
+
+export default VariablesBar;

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

@@ -0,0 +1,56 @@
+import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
+import type { VariableSelectionMap } from './selectionTypes';
+
+function formatQueryValue(val: string): string {
+	const num = Number(val);
+	if (!Number.isNaN(num) && Number.isFinite(num)) {
+		return val;
+	}
+	return `'${val.replace(/'/g, "\\'")}'`;
+}
+
+function buildQueryPart(attribute: string, values: string[]): string {
+	const formatted = values.map(formatQueryValue);
+	if (formatted.length === 1) {
+		return `${attribute} = ${formatted[0]}`;
+	}
+	return `${attribute} IN [${formatted.join(', ')}]`;
+}
+
+/**
+ * Builds a filter expression from the OTHER dynamic variables' current
+ * selections (e.g. `k8s.namespace.name IN ['prod'] AND service = 'api'`), so a
+ * dynamic variable's option list is scoped by its sibling selections. Variables
+ * in the ALL state, with no selection, or non-dynamic are skipped. Ported from
+ * the V1 dynamic-variable runtime.
+ */
+export function buildExistingDynamicVariableQuery(
+	variables: VariableFormModel[],
+	selections: VariableSelectionMap,
+	currentName: string,
+): string {
+	const parts: string[] = [];
+	variables.forEach((variable) => {
+		if (
+			variable.name === currentName ||
+			variable.type !== 'DYNAMIC' ||
+			!variable.dynamicAttribute
+		) {
+			return;
+		}
+		const selection = selections[variable.name];
+		if (!selection || selection.allSelected) {
+			return;
+		}
+		const raw = Array.isArray(selection.value)
+			? selection.value
+			: [selection.value];
+		const valid = raw
+			.filter((v) => v !== null && v !== undefined && v !== '')
+			.map((v) => String(v));
+		if (valid.length > 0) {
+			parts.push(buildQueryPart(variable.dynamicAttribute, valid));
+		}
+	});
+	return parts.join(' AND ');
+}

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

@@ -0,0 +1,16 @@
+/** A user-selected variable value at runtime (not persisted to the spec). */
+export type SelectedVariableValue =
+	| string
+	| number
+	| boolean
+	| (string | number | boolean)[]
+	| null;
+
+export interface VariableSelection {
+	value: SelectedVariableValue;
+	/** True when every option is selected ("ALL"); for dynamic vars value may be null. */
+	allSelected: boolean;
+}
+
+/** Selected values for a dashboard's variables, keyed by variable name. */
+export type VariableSelectionMap = Record<string, VariableSelection>;

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

@@ -0,0 +1,31 @@
+import type {
+	SelectedVariableValue,
+	VariableSelection,
+	VariableSelectionMap,
+} from './selectionTypes';
+
+/** A selection counts as resolved (usable as a parent value) when it's non-empty. */
+export function isResolved(selection?: VariableSelection): boolean {
+	if (!selection) {
+		return false;
+	}
+	if (selection.allSelected) {
+		return true;
+	}
+	const { value } = selection;
+	if (Array.isArray(value)) {
+		return value.length > 0;
+	}
+	return value !== '' && value !== null && value !== undefined;
+}
+
+/** Flatten the selection map into the `{ name: value }` payload a query expects. */
+export function selectionToPayload(
+	selection: VariableSelectionMap,
+): Record<string, SelectedVariableValue> {
+	const payload: Record<string, SelectedVariableValue> = {};
+	Object.entries(selection).forEach(([name, sel]) => {
+		payload[name] = sel.value;
+	});
+	return payload;
+}

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

@@ -0,0 +1,79 @@
+import { useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
+import type { AppState } from 'store/reducers';
+import type { GlobalReducer } from 'types/reducer/globalTime';
+
+import type { VariableFormModel } from '../../DashboardSettings/Variables/variableModel';
+import { buildExistingDynamicVariableQuery } from '../dynamicFilter';
+import type {
+	VariableSelection,
+	VariableSelectionMap,
+} from '../selectionTypes';
+import { useAutoSelect } from '../useAutoSelect';
+import ValueSelector from './ValueSelector';
+
+interface DynamicSelectorProps {
+	variable: VariableFormModel;
+	/** All variables + current selections, to scope options by sibling dynamics. */
+	variables: VariableFormModel[];
+	selections: VariableSelectionMap;
+	selection: VariableSelection;
+	onChange: (selection: VariableSelection) => void;
+}
+
+/**
+ * Dynamic-variable options sourced from live telemetry field values for the
+ * chosen signal + attribute, scoped by the other dynamic variables' selections
+ * (so e.g. `pod` narrows to the chosen `namespace`).
+ */
+function DynamicSelector({
+	variable,
+	variables,
+	selections,
+	selection,
+	onChange,
+}: DynamicSelectorProps): JSX.Element {
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const existingQuery = useMemo(
+		() => buildExistingDynamicVariableQuery(variables, selections, variable.name),
+		[variables, selections, variable.name],
+	);
+
+	const { data, isFetching } = useGetFieldValues({
+		signal: variable.dynamicSignal,
+		name: variable.dynamicAttribute,
+		startUnixMilli: minTime,
+		endUnixMilli: maxTime,
+		existingQuery: existingQuery || undefined,
+		enabled: !!variable.dynamicAttribute,
+	});
+
+	const options = useMemo(() => {
+		const payload = data?.data;
+		const values =
+			payload?.normalizedValues ?? payload?.values?.StringValues ?? [];
+		return sortValues(values, variable.sort).map(String);
+	}, [data, variable.sort]);
+
+	useAutoSelect(variable, options, selection, onChange);
+
+	return (
+		<ValueSelector
+			options={options}
+			multiSelect={variable.multiSelect}
+			showAllOption={variable.showAllOption}
+			loading={isFetching}
+			selection={selection}
+			onChange={onChange}
+			testId={`variable-select-${variable.name}`}
+		/>
+	);
+}
+
+export default DynamicSelector;

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

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+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 sortValues from 'lib/dashboardVariables/sortVariableValues';
+import type { AppState } from 'store/reducers';
+import type { GlobalReducer } from 'types/reducer/globalTime';
+
+import type { VariableFormModel } from '../../DashboardSettings/Variables/variableModel';
+import type {
+	VariableSelection,
+	VariableSelectionMap,
+} from '../selectionTypes';
+import { isResolved, selectionToPayload } from '../selectionUtils';
+import { useAutoSelect } from '../useAutoSelect';
+import ValueSelector from './ValueSelector';
+
+interface QuerySelectorProps {
+	variable: VariableFormModel;
+	/** Names this variable's query references; it waits until they're resolved. */
+	parents: string[];
+	/** All current selections, fed to the query as `{ name: value }`. */
+	selections: VariableSelectionMap;
+	selection: VariableSelection;
+	onChange: (selection: VariableSelection) => void;
+}
+
+/**
+ * Query-driven options. Dependency orchestration is declarative: the query is
+ * `enabled` only once every parent is resolved, and the parent values are in the
+ * query key — so it refetches automatically when a parent changes (and a cyclic
+ * dependency is simply never enabled).
+ */
+function QuerySelector({
+	variable,
+	parents,
+	selections,
+	selection,
+	onChange,
+}: QuerySelectorProps): JSX.Element {
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const payload = useMemo(() => selectionToPayload(selections), [selections]);
+	const enabled = parents.every((parent) => isResolved(selections[parent]));
+
+	const { data, isFetching } = useQuery(
+		[
+			'dashboard-variable',
+			variable.name,
+			variable.queryValue,
+			payload,
+			minTime,
+			maxTime,
+		],
+		() =>
+			dashboardVariablesQuery({
+				query: variable.queryValue,
+				variables: payload,
+			}),
+		{ enabled, refetchOnWindowFocus: false },
+	);
+
+	const options = useMemo(() => {
+		if (!data || data.statusCode !== 200 || !data.payload) {
+			return [] as string[];
+		}
+		return sortValues(data.payload.variableValues ?? [], variable.sort).map(
+			String,
+		);
+	}, [data, variable.sort]);
+
+	useAutoSelect(variable, options, selection, onChange);
+
+	return (
+		<ValueSelector
+			options={options}
+			multiSelect={variable.multiSelect}
+			showAllOption={variable.showAllOption}
+			loading={isFetching}
+			selection={selection}
+			onChange={onChange}
+			testId={`variable-select-${variable.name}`}
+		/>
+	);
+}
+
+export default QuerySelector;

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

@@ -0,0 +1,31 @@
+import { Input } from '@signozhq/ui/input';
+
+import type { VariableSelection } from '../selectionTypes';
+import styles from '../VariablesBar.module.scss';
+
+interface TextSelectorProps {
+	selection: VariableSelection;
+	onChange: (selection: VariableSelection) => void;
+	testId?: string;
+}
+
+/** Free-text variable input. */
+function TextSelector({
+	selection,
+	onChange,
+	testId,
+}: TextSelectorProps): JSX.Element {
+	return (
+		<Input
+			className={styles.input}
+			value={typeof selection.value === 'string' ? selection.value : ''}
+			placeholder="Enter a value"
+			onChange={(e): void =>
+				onChange({ value: e.target.value, allSelected: false })
+			}
+			testId={testId}
+		/>
+	);
+}
+
+export default TextSelector;

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

@@ -0,0 +1,94 @@
+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';
+
+interface ValueSelectorProps {
+	options: string[];
+	multiSelect: boolean;
+	showAllOption: boolean;
+	loading?: boolean;
+	selection: VariableSelection;
+	onChange: (selection: VariableSelection) => void;
+	testId?: string;
+}
+
+/**
+ * Single/multi value picker for Custom/Query/Dynamic variables. Reuses the
+ * shared NewSelect components, which provide search, the "ALL" option and
+ * apply-on-close batching (so multi-select edits don't cascade per toggle).
+ */
+function ValueSelector({
+	options,
+	multiSelect,
+	showAllOption,
+	loading,
+	selection,
+	onChange,
+	testId,
+}: ValueSelectorProps): JSX.Element {
+	const optionData = useMemo<OptionData[]>(
+		() => options.map((option) => ({ label: option, value: option })),
+		[options],
+	);
+
+	if (multiSelect) {
+		const value = selection.allSelected
+			? ALL_SELECT_VALUE
+			: (Array.isArray(selection.value) ? selection.value : []).map(String);
+		return (
+			<CustomMultiSelect
+				className={styles.select}
+				data-testid={testId}
+				options={optionData}
+				value={value}
+				loading={loading}
+				showSearch
+				placeholder="Select value"
+				enableAllSelection={showAllOption}
+				onChange={(next): void => {
+					const values = Array.isArray(next)
+						? next.map(String)
+						: next
+							? [String(next)]
+							: [];
+					if (values.length === 0) {
+						onChange({ value: [], allSelected: false });
+						return;
+					}
+					// CustomMultiSelect emits the full value set when ALL is picked.
+					const isAll =
+						showAllOption &&
+						options.length > 0 &&
+						options.every((option) => values.includes(option));
+					onChange({ value: values, allSelected: isAll });
+				}}
+				onClear={(): void => onChange({ value: [], allSelected: false })}
+			/>
+		);
+	}
+
+	return (
+		<CustomSelect
+			className={styles.select}
+			data-testid={testId}
+			options={optionData}
+			value={
+				selection.value == null || Array.isArray(selection.value)
+					? undefined
+					: String(selection.value)
+			}
+			loading={loading}
+			showSearch
+			placeholder="Select value"
+			onChange={(next): void =>
+				onChange({ value: next == null ? '' : String(next), allSelected: false })
+			}
+		/>
+	);
+}
+
+export default ValueSelector;

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

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
+import type { VariableSelection } from './selectionTypes';
+
+/**
+ * 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.
+ */
+export function useAutoSelect(
+	variable: VariableFormModel,
+	options: string[],
+	selection: VariableSelection,
+	onChange: (selection: VariableSelection) => void,
+): void {
+	useEffect(() => {
+		if (options.length === 0 || selection.allSelected) {
+			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) {
+			return;
+		}
+		const fallback = (variable.defaultValue as { value?: string } | undefined)
+			?.value;
+		const initial =
+			fallback && options.includes(fallback) ? fallback : options[0];
+		onChange({
+			value: variable.multiSelect ? [initial] : initial,
+			allSelected: false,
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [options]);
+}

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

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { parseAsJson, useQueryState } from 'nuqs';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import { dtoToFormModel } from '../DashboardSettings/Variables/variableAdapters';
+import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
+import { selectVariableValues } from '../store/slices/variableSelectionSlice';
+import { useDashboardStore } from '../store/useDashboardStore';
+import type {
+	SelectedVariableValue,
+	VariableSelection,
+	VariableSelectionMap,
+} from './selectionTypes';
+import {
+	computeVariableDependencies,
+	type VariableDependencyData,
+} from './variableDependencies';
+
+/** URL sentinel for an "ALL values selected" state (matches V1). */
+export const ALL_SELECTED = '__ALL__';
+
+/** `?variables=` holds `{ [name]: value }` (ALL encoded as the sentinel). */
+const variablesUrlParser = parseAsJson<Record<string, SelectedVariableValue>>(
+	(v) =>
+		typeof v === 'object' && v !== null
+			? (v as Record<string, SelectedVariableValue>)
+			: null,
+);
+
+function defaultSelection(model: VariableFormModel): VariableSelection {
+	const def = (
+		model.defaultValue as { value?: SelectedVariableValue } | undefined
+	)?.value;
+	if (def !== undefined && def !== null && def !== '') {
+		return { value: def, allSelected: false };
+	}
+	return { value: model.multiSelect ? [] : '', allSelected: false };
+}
+
+function fromUrlValue(raw: SelectedVariableValue): VariableSelection {
+	return raw === ALL_SELECTED
+		? { value: null, allSelected: true }
+		: { value: raw, allSelected: false };
+}
+
+interface UseVariableSelection {
+	variables: VariableFormModel[];
+	dependencyData: VariableDependencyData;
+	selection: VariableSelectionMap;
+	setSelection: (name: string, selection: VariableSelection) => void;
+}
+
+/**
+ * Runtime variable selection: derives the variable list from the spec, seeds
+ * each value from URL → localStorage(store) → default, and persists changes to
+ * both the store and the URL. Never writes to the dashboard spec.
+ */
+export function useVariableSelection(
+	dashboard: DashboardtypesGettableDashboardV2DTO,
+): UseVariableSelection {
+	const dashboardId = dashboard.id ?? '';
+
+	const variables = useMemo(
+		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
+		[dashboard.spec?.variables],
+	);
+	const dependencyData = useMemo(
+		() => computeVariableDependencies(variables),
+		[variables],
+	);
+
+	const selection = useDashboardStore(selectVariableValues(dashboardId));
+	const setVariableValue = useDashboardStore((s) => s.setVariableValue);
+	const setVariableValues = useDashboardStore((s) => s.setVariableValues);
+
+	const [urlValues, setUrlValues] = useQueryState(
+		'variables',
+		variablesUrlParser.withOptions({ history: 'replace' }),
+	);
+
+	// Seed selections for this dashboard: URL wins, then persisted store, then default.
+	useEffect(() => {
+		if (!dashboardId || variables.length === 0) {
+			return;
+		}
+		// `selection` here is the persisted (localStorage) map on mount — the
+		// effect deliberately doesn't depend on it, so seeding runs once per set.
+		const stored = selection;
+		const seeded: VariableSelectionMap = {};
+		variables.forEach((variable) => {
+			const urlValue = urlValues?.[variable.name];
+			if (urlValue !== undefined) {
+				seeded[variable.name] = fromUrlValue(urlValue);
+			} else if (stored[variable.name]) {
+				seeded[variable.name] = stored[variable.name];
+			} else {
+				seeded[variable.name] = defaultSelection(variable);
+			}
+		});
+		setVariableValues(dashboardId, seeded);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dashboardId, variables]);
+
+	const setSelection = useCallback(
+		(name: string, next: VariableSelection): void => {
+			setVariableValue(dashboardId, name, next);
+			void setUrlValues((prev) => ({
+				...(prev ?? {}),
+				[name]: next.allSelected ? ALL_SELECTED : next.value,
+			}));
+		},
+		[dashboardId, setVariableValue, setUrlValues],
+	);
+
+	return { variables, dependencyData, selection, setSelection };
+}

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

@@ -0,0 +1,199 @@
+import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
+
+import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
+
+/**
+ * Inter-variable dependency graph for runtime selection. A QUERY variable
+ * "depends on" another variable when its query text references that variable
+ * (`{{.name}}`, `{{name}}`, `$name`, `[[name]]`). When a variable's value
+ * changes, its dependent QUERY variables must refetch. Ported from the V1
+ * dashboard-variables runtime; operates on the V2 flat variable model.
+ */
+
+export type VariableGraph = Record<string, string[]>;
+
+export interface VariableDependencyData {
+	/** Topological order of variables (parents before children). */
+	order: string[];
+	/** Direct children (dependents) of each variable. */
+	graph: VariableGraph;
+	/** Direct parents of each variable. */
+	parentGraph: VariableGraph;
+	/** All transitive descendants of each variable (precomputed). */
+	transitiveDescendants: VariableGraph;
+	hasCycle: boolean;
+	cycleNodes?: string[];
+}
+
+/** Names of QUERY variables whose query references `variableName`. */
+function getDependents(
+	variableName: string,
+	variables: VariableFormModel[],
+): string[] {
+	return variables
+		.filter(
+			(v) =>
+				v.type === 'QUERY' &&
+				!!v.name &&
+				textContainsVariableReference(v.queryValue || '', variableName),
+		)
+		.map((v) => v.name);
+}
+
+/** variable name → its direct dependents (children). */
+export function buildDependencies(
+	variables: VariableFormModel[],
+): VariableGraph {
+	const graph: VariableGraph = {};
+	variables.forEach((v) => {
+		if (v.name) {
+			graph[v.name] = getDependents(v.name, variables);
+		}
+	});
+	return graph;
+}
+
+/** Invert a child graph into a parent graph. */
+export function buildParentGraph(graph: VariableGraph): VariableGraph {
+	const parents: VariableGraph = {};
+	Object.keys(graph).forEach((node) => {
+		parents[node] = parents[node] ?? [];
+	});
+	Object.entries(graph).forEach(([node, children]) => {
+		children.forEach((child) => {
+			parents[child] = parents[child] ?? [];
+			parents[child].push(node);
+		});
+	});
+	return parents;
+}
+
+function collectCyclePath(
+	graph: VariableGraph,
+	start: string,
+	end: string,
+): string[] {
+	const path: string[] = [];
+	let current = start;
+	const findParent = (node: string): string | undefined =>
+		Object.keys(graph).find((key) => graph[key]?.includes(node));
+	while (current !== end) {
+		const parent = findParent(current);
+		if (!parent) {
+			break;
+		}
+		path.push(parent);
+		current = parent;
+	}
+	return [start, ...path];
+}
+
+function detectCycle(
+	graph: VariableGraph,
+	node: string,
+	visited: Set<string>,
+	recStack: Set<string>,
+): string[] | null {
+	if (!visited.has(node)) {
+		visited.add(node);
+		recStack.add(node);
+		let cycleNodes: string[] | null = null;
+		(graph[node] || []).some((neighbor) => {
+			if (!visited.has(neighbor)) {
+				const found = detectCycle(graph, neighbor, visited, recStack);
+				if (found) {
+					cycleNodes = found;
+					return true;
+				}
+			} else if (recStack.has(neighbor)) {
+				cycleNodes = collectCyclePath(graph, node, neighbor);
+				return true;
+			}
+			return false;
+		});
+		if (cycleNodes) {
+			return cycleNodes;
+		}
+	}
+	recStack.delete(node);
+	return null;
+}
+
+/** Build the full dependency data (topo order, parents, transitive descendants, cycle info). */
+export function buildDependencyData(
+	dependencies: VariableGraph,
+): VariableDependencyData {
+	const inDegree: Record<string, number> = {};
+	const adjList: VariableGraph = {};
+
+	Object.keys(dependencies).forEach((node) => {
+		inDegree[node] = inDegree[node] ?? 0;
+		adjList[node] = adjList[node] ?? [];
+		(dependencies[node] || []).forEach((child) => {
+			inDegree[child] = inDegree[child] ?? 0;
+			inDegree[child] += 1;
+			adjList[node].push(child);
+		});
+	});
+
+	const visited = new Set<string>();
+	const recStack = new Set<string>();
+	let cycleNodes: string[] | undefined;
+	Object.keys(dependencies).some((node) => {
+		if (!visited.has(node)) {
+			const found = detectCycle(dependencies, node, visited, recStack);
+			if (found) {
+				cycleNodes = found;
+				return true;
+			}
+		}
+		return false;
+	});
+
+	// Topological sort (Kahn's algorithm).
+	const queue = Object.keys(inDegree).filter((n) => inDegree[n] === 0);
+	const order: string[] = [];
+	while (queue.length > 0) {
+		const current = queue.shift();
+		if (current === undefined) {
+			break;
+		}
+		order.push(current);
+		(adjList[current] || []).forEach((neighbor) => {
+			inDegree[neighbor] -= 1;
+			if (inDegree[neighbor] === 0) {
+				queue.push(neighbor);
+			}
+		});
+	}
+
+	const hasCycle = order.length !== Object.keys(dependencies).length;
+
+	// Transitive descendants: walk topo order in reverse.
+	const transitiveDescendants: VariableGraph = {};
+	for (let i = order.length - 1; i >= 0; i--) {
+		const node = order[i];
+		const desc = new Set<string>();
+		(adjList[node] || []).forEach((child) => {
+			desc.add(child);
+			(transitiveDescendants[child] || []).forEach((d) => desc.add(d));
+		});
+		transitiveDescendants[node] = Array.from(desc);
+	}
+
+	return {
+		order,
+		graph: adjList,
+		parentGraph: buildParentGraph(adjList),
+		transitiveDescendants,
+		hasCycle,
+		cycleNodes,
+	};
+}
+
+/** Compute the full dependency data straight from the variable list. */
+export function computeVariableDependencies(
+	variables: VariableFormModel[],
+): VariableDependencyData {
+	return buildDependencyData(buildDependencies(variables));
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.module.scss

@@ -1,57 +0,0 @@
-.dashboardBreadcrumbs {
-	width: 100%;
-	height: 48px;
-	display: flex;
-	gap: 6px;
-	align-items: center;
-	max-width: 80%;
-	padding-left: 8px;
-
-	.linkToPreviousPage {
-		// Collapse the design-system Button's fixed-height/padding box so it hugs
-		// the label like inline text (the breadcrumb is text, not a chunky button).
-		--button-height: auto;
-		--button-padding: 0;
-		--button-gap: 4px;
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		letter-spacing: -0.07px;
-	}
-
-	.currentPage {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: 0px 2px;
-		border-radius: 2px;
-		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
-		color: var(--bg-robin-400);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		height: 20px;
-
-		max-width: calc(100% - 120px);
-
-		span {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-
-	.currentPage:hover {
-		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
-		color: var(--bg-robin-300);
-	}
-
-	.dashboardIconImage {
-		height: 14px;
-		width: 14px;
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,63 +0,0 @@
-import { useCallback } from 'react';
-import { LayoutGrid } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import getSessionStorageApi from 'api/browser/sessionstorage/get';
-import ROUTES from 'constants/routes';
-import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-
-import styles from './DashboardBreadcrumbs.module.scss';
-
-interface DashboardBreadcrumbsProps {
-	title: string;
-	image: string;
-}
-
-function DashboardBreadcrumbs({
-	title,
-	image,
-}: DashboardBreadcrumbsProps): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-
-	const goToListPage = useCallback(() => {
-		const dashboardsListQueryParamsString = getSessionStorageApi(
-			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
-		);
-
-		if (dashboardsListQueryParamsString) {
-			safeNavigate({
-				pathname: ROUTES.ALL_DASHBOARD,
-				search: `?${dashboardsListQueryParamsString}`,
-			});
-		} else {
-			safeNavigate(ROUTES.ALL_DASHBOARD);
-		}
-	}, [safeNavigate]);
-
-	return (
-		<div className={styles.dashboardBreadcrumbs}>
-			<Button
-				variant="ghost"
-				color="secondary"
-				prefix={<LayoutGrid size={14} />}
-				onClick={goToListPage}
-				className={styles.linkToPreviousPage}
-				testId="dashboard-breadcrumb-list"
-			>
-				Dashboard
-			</Button>
-			<div>/</div>
-			<div className={styles.currentPage}>
-				<img
-					src={image}
-					alt="dashboard-icon"
-					className={styles.dashboardIconImage}
-				/>
-				<Typography.Text>{title}</Typography.Text>
-			</div>
-		</div>
-	);
-}
-
-export default DashboardBreadcrumbs;

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

@@ -1,9 +0,0 @@
-.dashboardHeader {
-	border-bottom: 1px solid var(--l1-border);
-	display: flex;
-	justify-content: space-between;
-	gap: 16px;
-	align-items: center;
-	padding: 0 8px;
-	box-sizing: border-box;
-}

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

@@ -1,22 +0,0 @@
-import { memo } from 'react';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-
-import DashboardBreadcrumbs from './DashboardBreadcrumbs';
-
-import styles from './DashboardHeader.module.scss';
-
-interface DashboardHeaderProps {
-	title: string;
-	image: string;
-}
-
-function DashboardHeader({ title, image }: DashboardHeaderProps): JSX.Element {
-	return (
-		<div className={styles.dashboardHeader}>
-			<DashboardBreadcrumbs title={title} image={image} />
-			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
-		</div>
-	);
-}
-
-export default memo(DashboardHeader);

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardPageHeader/DashboardPageBreadcrumbs.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+import { LayoutGrid } from '@signozhq/icons';
+import getSessionStorageApi from 'api/browser/sessionstorage/get';
+import ROUTES from 'constants/routes';
+import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
+
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbSeparator,
+} from '@signozhq/ui/breadcrumb';
+
+interface DashboardPageBreadcrumbsProps {
+	title: string;
+	image: string;
+}
+
+function DashboardPageBreadcrumbs({
+	title,
+	image,
+}: DashboardPageBreadcrumbsProps): JSX.Element {
+	const dashboardPageLink = useMemo(() => {
+		const dashboardsListQueryParamsString = getSessionStorageApi(
+			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
+		);
+
+		return dashboardsListQueryParamsString
+			? `${ROUTES.ALL_DASHBOARD}?${dashboardsListQueryParamsString}`
+			: ROUTES.ALL_DASHBOARD;
+	}, []);
+
+	return (
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbItem>
+					<BreadcrumbLink icon={<LayoutGrid size={14} />} href={dashboardPageLink}>
+						Dashboard
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator>/</BreadcrumbSeparator>
+				<BreadcrumbItem>
+					<BreadcrumbLink icon={<img src={image} alt="dashboard-icon" />}>
+						{title}
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+}
+
+export default DashboardPageBreadcrumbs;

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

@@ -0,0 +1,9 @@
+.dashboardPageHeader {
+	border-bottom: 1px solid var(--l2-border);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-left: 14px;
+	height: 48px;
+	width: 100%;
+}

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

@@ -0,0 +1,25 @@
+import { memo } from 'react';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+
+import DashboardPageBreadcrumbs from './DashboardPageBreadcrumbs';
+
+import styles from './DashboardPageHeader.module.scss';
+
+interface DashboardPageHeaderProps {
+	title: string;
+	image: string;
+}
+
+function DashboardPageHeader({
+	title,
+	image,
+}: DashboardPageHeaderProps): JSX.Element {
+	return (
+		<div className={styles.dashboardPageHeader}>
+			<DashboardPageBreadcrumbs title={title} image={image} />
+			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
+		</div>
+	);
+}
+
+export default memo(DashboardPageHeader);

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
@@ -6,10 +6,12 @@ import PanelTypeSelectionModal from 'container/DashboardContainer/PanelTypeSelec
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
 
-import DashboardDescription from './DashboardDescription';
+import DashboardPageToolbar from './DashboardPageToolbar';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
 import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
+import DashboardPageHeader from './components/DashboardPageHeader/DashboardPageHeader';
+import { Base64Icons } from './DashboardSettings/Overview/utils';
 
 interface DashboardContainerProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
@@ -20,32 +22,49 @@ function DashboardContainer({
 	dashboard,
 	refetch,
 }: DashboardContainerProps): JSX.Element {
+	useEffect(() => {
+		document.title = dashboard.name;
+	}, [dashboard.name]);
+
 	const fullScreenHandle = useFullScreenHandle();
 
 	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
-	const isEditable = !dashboard.locked && editDashboard;
+	const [editDashboardPermission] = useComponentPermission(
+		['edit_dashboard'],
+		user.role,
+	);
 
 	// Publish edit context to the store so hooks/components read it from there
 	// instead of receiving dashboardId/isEditable/refetch as props down the tree.
 	const setEditContext = useDashboardStore((s) => s.setEditContext);
 	useEffect(() => {
-		setEditContext({ dashboardId: dashboard.id ?? '', isEditable, refetch });
-	}, [dashboard.id, isEditable, refetch, setEditContext]);
+		setEditContext({
+			dashboardId: dashboard.id,
+			isEditable: !dashboard.locked && editDashboardPermission,
+			refetch,
+		});
+	}, [
+		dashboard.id,
+		dashboard.locked,
+		editDashboardPermission,
+		refetch,
+		setEditContext,
+	]);
 
-	const { spec } = dashboard;
-	const layouts = useMemo(() => spec?.layouts ?? [], [spec?.layouts]);
-	const panels = useMemo(() => spec?.panels ?? {}, [spec?.panels]);
+	const spec = dashboard.spec;
+	const image = dashboard.image || Base64Icons[0];
+	const name = spec.display.name;
 
 	return (
 		<FullScreen handle={fullScreenHandle}>
 			<div className={styles.container}>
-				<DashboardDescription
+				<DashboardPageHeader title={name} image={image} />
+				<DashboardPageToolbar
 					dashboard={dashboard}
 					handle={fullScreenHandle}
 					refetch={refetch}
 				/>
-				<PanelsAndSectionsLayout layouts={layouts} panels={panels} />
+				<PanelsAndSectionsLayout layouts={spec.layouts} panels={spec.panels} />
 			</div>
 			{/* Shared panel-type picker (V1 component): opened from any "New Panel"
 			    trigger; navigates to the widget editor route on selection. */}

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

@@ -4,7 +4,7 @@ import type {
 	DashboardtypesLayoutDTO,
 	DashboardtypesPanelDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesPatchOpDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { GridItem } from './utils';
 
@@ -13,10 +13,10 @@ import type { GridItem } from './utils';
  * intentionally side-effect-free (no React, no network) so they can be unit
  * tested and reused by the layout hooks. JSON pointers target the postable
  * shape: `/spec/layouts/...`, `/spec/panels/...` (matches the existing V2
- * patches in DashboardSettings/General and DashboardDescription).
+ * patches in DashboardSettings/Overview and DashboardDescription).
  */
 
-const { add, replace, remove } = DashboardtypesJSONPatchOperationDTOOp;
+const { add, replace, remove } = DashboardtypesPatchOpDTO;
 
 const PANEL_REF_PREFIX = '#/spec/panels/';
 

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

@@ -0,0 +1,55 @@
+import type { StateCreator } from 'zustand';
+
+import type {
+	VariableSelection,
+	VariableSelectionMap,
+} from '../../VariablesBar/selectionTypes';
+import type { DashboardStore } from '../useDashboardStore';
+
+/**
+ * Runtime variable selection — the values the user picks in the variable bar.
+ * Keyed by dashboardId → variable name. Frontend-only and persisted to
+ * localStorage (mirrored to the URL by the bar for shareable links); it is
+ * deliberately NOT part of the dashboard spec, so selecting a value never
+ * patches the dashboard.
+ */
+export interface VariableSelectionSlice {
+	variableValues: Record<string, VariableSelectionMap>;
+	setVariableValue: (
+		dashboardId: string,
+		name: string,
+		selection: VariableSelection,
+	) => void;
+	/** Bulk set (used to seed from URL/localStorage/defaults on load). */
+	setVariableValues: (dashboardId: string, values: VariableSelectionMap) => void;
+}
+
+export const createVariableSelectionSlice: StateCreator<
+	DashboardStore,
+	[['zustand/persist', unknown]],
+	[],
+	VariableSelectionSlice
+> = (set, get) => ({
+	variableValues: {},
+	setVariableValue: (dashboardId, name, selection): void => {
+		const { variableValues } = get();
+		set({
+			variableValues: {
+				...variableValues,
+				[dashboardId]: { ...variableValues[dashboardId], [name]: selection },
+			},
+		});
+	},
+	setVariableValues: (dashboardId, values): void => {
+		const { variableValues } = get();
+		set({
+			variableValues: { ...variableValues, [dashboardId]: values },
+		});
+	},
+});
+
+/** Selector: the selection map for a dashboard (empty if none). */
+export const selectVariableValues =
+	(dashboardId: string) =>
+	(state: DashboardStore): VariableSelectionMap =>
+		state.variableValues[dashboardId] ?? {};

frontend/src/pages/DashboardPageV2/DashboardContainer/store/useDashboardStore.ts

@@ -9,25 +9,36 @@ import {
 	createCollapseSlice,
 	type CollapseSlice,
 } from './slices/collapseSlice';
+import {
+	createVariableSelectionSlice,
+	type VariableSelectionSlice,
+} from './slices/variableSelectionSlice';
 
-export type DashboardStore = EditContextSlice & CollapseSlice;
+export type DashboardStore = EditContextSlice &
+	CollapseSlice &
+	VariableSelectionSlice;
 
 /**
  * V2 dashboard session store. Holds cross-cutting client state only — never the
- * dashboard spec (that stays in react-query via useGetDashboardV2). Two slices:
+ * dashboard spec (that stays in react-query via useGetDashboardV2). Slices:
  * - edit-context: dashboardId / isEditable / refetch (set once, not persisted).
  * - collapse: per-section open state (frontend-only, persisted to localStorage).
+ * - variable-selection: runtime variable values (frontend-only, persisted).
  */
 export const useDashboardStore = create<DashboardStore>()(
 	persist(
 		(...a) => ({
 			...createEditContextSlice(...a),
 			...createCollapseSlice(...a),
+			...createVariableSelectionSlice(...a),
 		}),
 		{
 			name: '@signoz/dashboard-v2',
-			// Persist only the collapse map — context (incl. the refetch fn) is transient.
-			partialize: (state) => ({ collapsed: state.collapsed }),
+			// Persist UI-only state (context incl. the refetch fn is transient).
+			partialize: (state) => ({
+				collapsed: state.collapsed,
+				variableValues: state.variableValues,
+			}),
 		},
 	),
 );

frontend/src/pages/DashboardPageV2/DashboardPageV2.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Typography } from '@signozhq/ui/typography';
@@ -16,13 +15,6 @@ function DashboardPageV2(): JSX.Element {
 	});
 
 	const dashboard = data?.data;
-	const name = dashboard?.spec?.display?.name;
-
-	useEffect(() => {
-		if (name) {
-			document.title = name;
-		}
-	}, [name]);
 
 	if (isLoading) {
 		return <Spinner tip="Loading dashboard..." />;

frontend/src/pages/DashboardsListPage/index.tsx

@@ -1,3 +1,15 @@
+import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
+import DashboardsListPageV2 from 'pages/DashboardsListPageV2';
+
 import DashboardsListPage from './DashboardsListPage';
 
-export default DashboardsListPage;
+// Serves the V2 dashboards list when the `use_dashboard_v2` flag is active;
+// otherwise the existing V1 list. Lets V2 dark-ship behind the flag without
+// changing route definitions.
+function DashboardsListPageEntry(): JSX.Element {
+	const isDashboardV2 = useIsDashboardV2();
+
+	return isDashboardV2 ? <DashboardsListPageV2 /> : <DashboardsListPage />;
+}
+
+export default DashboardsListPageEntry;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.tsx

@@ -8,6 +8,10 @@ import {
 	createDashboardV2,
 	useListDashboardsV2,
 } from 'api/generated/services/dashboard';
+import {
+	DashboardtypesListOrderDTO,
+	DashboardtypesListSortDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { RequestDashboardBtn } from 'container/ListOfDashboard/RequestDashboardBtn';
 import useComponentPermission from 'hooks/useComponentPermission';
@@ -24,8 +28,6 @@ import {
 	useSearch,
 	useSortColumn,
 	useSortOrder,
-	type SortColumn,
-	type SortOrder,
 } from '../../hooks/useDashboardsListQueryParams';
 import type { DashboardListItem } from '../../utils';
 import ConfigureMetadataModal from '../ConfigureMetadataModal/ConfigureMetadataModal';
@@ -131,6 +133,10 @@ function DashboardsList(): JSX.Element {
 				tags: null,
 				spec: {
 					display: { name: t('new_dashboard_title', { ns: 'dashboard' }) },
+					layouts: [],
+					panels: {},
+					variables: [],
+					// TODO(@AshwinBhatkal): duration and refresh interval need to be integrated
 				},
 			});
 			safeNavigate(
@@ -150,7 +156,7 @@ function DashboardsList(): JSX.Element {
 	}, []);
 
 	const onSortChange = useCallback(
-		(column: SortColumn): void => {
+		(column: DashboardtypesListSortDTO): void => {
 			void setSortColumn(column);
 			void setPage(1);
 		},
@@ -158,7 +164,7 @@ function DashboardsList(): JSX.Element {
 	);
 
 	const onOrderChange = useCallback(
-		(order: SortOrder): void => {
+		(order: DashboardtypesListOrderDTO): void => {
 			void setSortOrder(order);
 			void setPage(1);
 		},

frontend/src/pages/DashboardsListPageV2/components/ListHeader/ListHeader.tsx

@@ -7,18 +7,18 @@ import {
 	HdmiPort,
 } from '@signozhq/icons';
 
-import type {
-	SortColumn,
-	SortOrder,
-} from '../../hooks/useDashboardsListQueryParams';
+import {
+	DashboardtypesListOrderDTO,
+	DashboardtypesListSortDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 import styles from './ListHeader.module.scss';
 
 interface Props {
-	sortColumn: SortColumn;
-	onSortChange: (column: SortColumn) => void;
-	sortOrder: SortOrder;
-	onOrderChange: (order: SortOrder) => void;
+	sortColumn: DashboardtypesListSortDTO;
+	onSortChange: (column: DashboardtypesListSortDTO) => void;
+	sortOrder: DashboardtypesListOrderDTO;
+	onOrderChange: (order: DashboardtypesListOrderDTO) => void;
 	onConfigureMetadata: () => void;
 }
 
@@ -44,49 +44,57 @@ function ListHeader({
 								<Button
 									type="text"
 									className={styles.sortButton}
-									onClick={(): void => onSortChange('name')}
+									onClick={(): void => onSortChange(DashboardtypesListSortDTO.name)}
 									data-testid="sort-by-name"
 								>
 									Name
-									{sortColumn === 'name' && <Check size={14} />}
+									{sortColumn === DashboardtypesListSortDTO.name && <Check size={14} />}
 								</Button>
 								<Button
 									type="text"
 									className={styles.sortButton}
-									onClick={(): void => onSortChange('created_at')}
+									onClick={(): void =>
+										onSortChange(DashboardtypesListSortDTO.created_at)
+									}
 									data-testid="sort-by-last-created"
 								>
 									Last created
-									{sortColumn === 'created_at' && <Check size={14} />}
+									{sortColumn === DashboardtypesListSortDTO.created_at && (
+										<Check size={14} />
+									)}
 								</Button>
 								<Button
 									type="text"
 									className={styles.sortButton}
-									onClick={(): void => onSortChange('updated_at')}
+									onClick={(): void =>
+										onSortChange(DashboardtypesListSortDTO.updated_at)
+									}
 									data-testid="sort-by-last-updated"
 								>
 									Last updated
-									{sortColumn === 'updated_at' && <Check size={14} />}
+									{sortColumn === DashboardtypesListSortDTO.updated_at && (
+										<Check size={14} />
+									)}
 								</Button>
 								<div className={styles.sortDivider} />
 								<Typography.Text className={styles.sortHeading}>Order</Typography.Text>
 								<Button
 									type="text"
 									className={styles.sortButton}
-									onClick={(): void => onOrderChange('asc')}
+									onClick={(): void => onOrderChange(DashboardtypesListOrderDTO.asc)}
 									data-testid="sort-order-asc"
 								>
 									Ascending
-									{sortOrder === 'asc' && <Check size={14} />}
+									{sortOrder === DashboardtypesListOrderDTO.asc && <Check size={14} />}
 								</Button>
 								<Button
 									type="text"
 									className={styles.sortButton}
-									onClick={(): void => onOrderChange('desc')}
+									onClick={(): void => onOrderChange(DashboardtypesListOrderDTO.desc)}
 									data-testid="sort-order-desc"
 								>
 									Descending
-									{sortOrder === 'desc' && <Check size={14} />}
+									{sortOrder === DashboardtypesListOrderDTO.desc && <Check size={14} />}
 								</Button>
 							</div>
 						}

frontend/src/pages/DashboardsListPageV2/components/states/states.module.scss

@@ -1,5 +1,5 @@
-// Shared building blocks for the dashboards-list view states.
-// Composed via CSS-modules `composes:` from each state's own SCSS.
+/* Shared building blocks for the dashboards-list view states. */
+/* Composed via CSS-modules `composes:` from each state's own SCSS. */
 
 .cardWrapper {
 	display: flex;

frontend/src/pages/DashboardsListPageV2/hooks/useDashboardsListQueryParams.ts

@@ -1,3 +1,7 @@
+import {
+	DashboardtypesListOrderDTO,
+	DashboardtypesListSortDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import {
 	parseAsInteger,
 	parseAsString,
@@ -7,26 +11,31 @@ import {
 	type UseQueryStateReturn,
 } from 'nuqs';
 
-export const SORT_COLUMNS = ['updated_at', 'created_at', 'name'] as const;
-export type SortColumn = (typeof SORT_COLUMNS)[number];
-
-export const SORT_ORDERS = ['asc', 'desc'] as const;
-export type SortOrder = (typeof SORT_ORDERS)[number];
+export const SORT_COLUMNS = Object.values(DashboardtypesListSortDTO);
+export const SORT_ORDERS = Object.values(DashboardtypesListOrderDTO);
 
 const opts: Options = { history: 'push' };
 
-export const useSortColumn = (): UseQueryStateReturn<SortColumn, SortColumn> =>
+export const useSortColumn = (): UseQueryStateReturn<
+	DashboardtypesListSortDTO,
+	DashboardtypesListSortDTO
+> =>
 	useQueryState(
 		'sort',
 		parseAsStringLiteral(SORT_COLUMNS)
-			.withDefault('updated_at')
+			.withDefault(DashboardtypesListSortDTO.updated_at)
 			.withOptions(opts),
 	);
 
-export const useSortOrder = (): UseQueryStateReturn<SortOrder, SortOrder> =>
+export const useSortOrder = (): UseQueryStateReturn<
+	DashboardtypesListOrderDTO,
+	DashboardtypesListOrderDTO
+> =>
 	useQueryState(
 		'order',
-		parseAsStringLiteral(SORT_ORDERS).withDefault('desc').withOptions(opts),
+		parseAsStringLiteral(SORT_ORDERS)
+			.withDefault(DashboardtypesListOrderDTO.desc)
+			.withOptions(opts),
 	);
 
 export const usePage = (): UseQueryStateReturn<number, number> =>

frontend/src/pages/DashboardsListPageV2/utils.ts

@@ -1,8 +1,8 @@
 import dayjs from 'dayjs';
 import { isEmpty } from 'lodash-es';
-import type { DashboardtypesGettableDashboardWithPinDTO } from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesListedDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 
-export type DashboardListItem = DashboardtypesGettableDashboardWithPinDTO;
+export type DashboardListItem = DashboardtypesListedDashboardV2DTO;
 
 export const tagsToStrings = (
 	tags: { key: string; value: string }[] | null | undefined,

frontend/src/pages/LLMObservabilityModelPricing/index.tsx

@@ -1,7 +0,0 @@
-import LLMObservabilityModelPricing from 'container/LLMObservabilityModelPricing/LLMObservabilityModelPricing';
-
-function LLMObservabilityModelPricingPage(): JSX.Element {
-	return <LLMObservabilityModelPricing />;
-}
-
-export default LLMObservabilityModelPricingPage;

frontend/src/pages/ResetPassword/__tests__/ResetPasswordPage.test.tsx

@@ -2,7 +2,7 @@ import { Logout } from 'api/utils';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { createErrorResponse, rest, server } from 'mocks-server/server';
-import { render, screen, waitFor } from 'tests/test-utils';
+import { render, screen, waitFor, fireEvent } from 'tests/test-utils';
 
 import ResetPassword from '../index';
 
@@ -103,6 +103,7 @@ describe('ResetPassword Page', () => {
 			expect(
 				screen.getByText(/reset password token does not exist/i),
 			).toBeInTheDocument();
+			expect(screen.getByTestId('back-to-login')).toBeInTheDocument();
 		});
 
 		it('shows "token is expired" when token is expired (401) without redirecting to login', async () => {
@@ -137,6 +138,32 @@ describe('ResetPassword Page', () => {
 			// 401 from this endpoint must NOT trigger logout/redirect
 			expect(mockHistoryPush).not.toHaveBeenCalledWith(ROUTES.LOGIN);
 			expect(Logout).not.toHaveBeenCalled();
+			expect(screen.getByTestId('back-to-login')).toBeInTheDocument();
+		});
+
+		it('navigates to login when "Back to login" is clicked on error screen', async () => {
+			server.use(
+				rest.post(
+					VERIFY_TOKEN_ENDPOINT,
+					createErrorResponse(
+						404,
+						'reset_password_token_not_found',
+						'reset password token does not exist',
+					),
+				),
+			);
+
+			window.history.pushState({}, '', '/password-reset?token=invalid-token');
+			render(<ResetPassword />, undefined, {
+				initialRoute: '/password-reset?token=invalid-token',
+			});
+
+			await waitFor(() => {
+				expect(screen.getByTestId('back-to-login')).toBeInTheDocument();
+			});
+
+			fireEvent.click(screen.getByTestId('back-to-login'));
+			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
 		});
 
 		it('redirects to login when no token is in the URL', async () => {

frontend/src/utils/permission/index.ts

@@ -136,5 +136,4 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	AI_ASSISTANT_ICON_PREVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MCP_SERVER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_ASSISTANT_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
-	LLM_OBSERVABILITY_MODEL_PRICING: ['ADMIN', 'EDITOR', 'VIEWER'],
 };