fix(ai-assistant): map apply_filter requestType to explorer panel type

"Open in Explorer" chips opened the Logs/Traces Explorer in the default raw
List view even when the agent's query was a grouped aggregation
(requestType=scalar with groupBy): applyFilter never set a panelTypes URL
param, so the explorer fell back to PANEL_TYPES.LIST.

Derive the panel type from the query's requestType (scalar/distribution ->
table, time_series -> graph, raw/other -> list) and set panelTypes on both the
on-page (redirectWithQueryBuilderData) and off-page (buildExplorerNavigationUrl)
navigation paths, mirroring the saved-view path that already worked. Removes
leftover [apply_filter] debug logs.

frontend/src/api/ai-assistant/sigNozAIAssistantAPI.schemas.ts

@@ -159,6 +159,25 @@ export interface CancelResponseDTO {
 	state: ExecutionStateDTO;
 }
 
+export interface ChipDTO {
+	/**
+	 * @type string
+	 * @description Stable chip id. Rule-engine chips use intent ids.
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	text: string;
+}
+
+export interface ChipsResponseDTO {
+	/**
+	 * @type array
+	 */
+	chips: ChipDTO[];
+}
+
 export type ClarificationFieldDTOOptions = string[] | null;
 
 export type ClarificationFieldDTODefault = string | string[] | null;
@@ -386,15 +405,74 @@ export type ErrorBodyDTOErrors = ErrorResponseAdditionalDTO[] | null;
 
 export type ErrorBodyDTOUrl = string | null;
 
+/**
+   * Machine-readable error codes carried on ``ErrorBody.code``.
+  
+  **Extensible set.** This enum is the single source of truth for every code
+  the backend can emit, on both the REST envelope and the SSE ``ErrorEvent``.
+  It is published in the OpenAPI schema (and therefore the generated TS
+  client) so clients get autocomplete and a typed discriminant. The set is
+  expected to *grow*: adding a member is a backward-compatible change (the
+  wire is still a plain JSON string), so clients MUST treat unknown codes
+  gracefully — branch on the codes they handle and keep a default fallback,
+  never hard-reject an unrecognized value. Re-exported from ``app.errors``
+  for convenience; ``AssistantError(code=...)`` requires a member of this
+  enum so a typo can never reach a client.
+   */
+export enum ErrorCodeDTO {
+	missing_signoz_url = 'missing_signoz_url',
+	invalid_signoz_url = 'invalid_signoz_url',
+	invalid_content_length = 'invalid_content_length',
+	invalid_fork_target = 'invalid_fork_target',
+	rate_limit_override_exceeds_ceiling = 'rate_limit_override_exceeds_ceiling',
+	thread_message_limit = 'thread_message_limit',
+	validation_error = 'validation_error',
+	missing_token = 'missing_token',
+	invalid_token = 'invalid_token',
+	permission_denied = 'permission_denied',
+	user_disabled = 'user_disabled',
+	org_disabled = 'org_disabled',
+	thread_not_found = 'thread_not_found',
+	message_not_found = 'message_not_found',
+	execution_not_found = 'execution_not_found',
+	approval_not_found = 'approval_not_found',
+	clarification_not_found = 'clarification_not_found',
+	action_metadata_not_found = 'action_metadata_not_found',
+	user_not_found = 'user_not_found',
+	region_not_configured = 'region_not_configured',
+	thread_busy = 'thread_busy',
+	thread_has_active_execution = 'thread_has_active_execution',
+	no_active_execution = 'no_active_execution',
+	approval_superseded = 'approval_superseded',
+	clarification_superseded = 'clarification_superseded',
+	undo_conflict = 'undo_conflict',
+	revert_conflict = 'revert_conflict',
+	revert_expired = 'revert_expired',
+	restore_expired = 'restore_expired',
+	connection_limit_exceeded = 'connection_limit_exceeded',
+	hourly_message_limit = 'hourly_message_limit',
+	daily_message_limit = 'daily_message_limit',
+	daily_token_limit = 'daily_token_limit',
+	daily_cost_limit = 'daily_cost_limit',
+	upstream_auth_error = 'upstream_auth_error',
+	max_turns_exceeded = 'max_turns_exceeded',
+	budget_exceeded = 'budget_exceeded',
+	agent_execution_error = 'agent_execution_error',
+	cli_not_found = 'cli_not_found',
+	cli_connection_error = 'cli_connection_error',
+	cli_process_error = 'cli_process_error',
+	sandbox_unavailable = 'sandbox_unavailable',
+	mcp_unavailable = 'mcp_unavailable',
+	internal_error = 'internal_error',
+	region_unreachable = 'region_unreachable',
+	heartbeat_expired = 'heartbeat_expired',
+	replay_unavailable = 'replay_unavailable',
+}
 /**
  * Inner error object — matches Go ErrorsJSON.
  */
 export interface ErrorBodyDTO {
-	/**
-	 * @type string
-	 * @pattern ^[a-z_]+$
-	 */
-	code: string;
+	code: ErrorCodeDTO;
 	/**
 	 * @type string
 	 */
@@ -490,6 +568,23 @@ export type MessageActionDTOQuery = MessageActionDTOQueryAnyOf | null;
 
 export type MessageActionDTOUrl = string | null;
 
+/**
+   * Explorer namespace a saved view belongs to — its ``sourcePage``.
+  
+  Mirrors the SigNoz product's saved-view ``sourcePage`` values so the
+  frontend can route an ``open_resource`` action for a view to the right
+  Explorer via its existing ``SOURCEPAGE_VS_ROUTES`` map. ``meter`` is the
+  Cost Meter Explorer and is intentionally distinct from ``metrics`` (the
+  product persists and lists meter views under ``sourcePage="meter"``).
+   */
+export enum SavedViewEntityDTO {
+	logs = 'logs',
+	traces = 'traces',
+	metrics = 'metrics',
+	meter = 'meter',
+}
+export type MessageActionDTOEntity = SavedViewEntityDTO | null;
+
 export enum MessageActionKindDTO {
 	undo = 'undo',
 	revert = 'revert',
@@ -500,7 +595,7 @@ export enum MessageActionKindDTO {
 	apply_filter = 'apply_filter',
 }
 /**
- * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url.
+ * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url. open_resource for a saved view also carries entity (logs/traces/metrics/meter) so the frontend routes to the correct Explorer.
  */
 export interface MessageActionDTO {
 	kind: MessageActionKindDTO;
@@ -517,6 +612,7 @@ export interface MessageActionDTO {
 	signal?: MessageActionDTOSignal;
 	query?: MessageActionDTOQuery;
 	url?: MessageActionDTOUrl;
+	entity?: MessageActionDTOEntity;
 }
 
 export enum MessageContentTypeDTO {
@@ -590,6 +686,26 @@ export interface MessageSummaryDTO {
 	updatedAt: string;
 }
 
+export enum PageTypeDTO {
+	homepage = 'homepage',
+	dashboard_detail = 'dashboard_detail',
+	dashboard_list = 'dashboard_list',
+	panel_edit = 'panel_edit',
+	panel_fullscreen = 'panel_fullscreen',
+	logs_explorer = 'logs_explorer',
+	log_detail = 'log_detail',
+	traces_explorer = 'traces_explorer',
+	trace_detail = 'trace_detail',
+	metrics_explorer = 'metrics_explorer',
+	service_detail = 'service_detail',
+	services_list = 'services_list',
+	alert_edit = 'alert_edit',
+	alert_list = 'alert_list',
+	alert_new = 'alert_new',
+	alerts_triggered = 'alerts_triggered',
+	infra_entity_detail = 'infra_entity_detail',
+	other = 'other',
+}
 export enum ReadinessChecksDTODatabase {
 	ok = 'ok',
 	failed = 'failed',
@@ -990,8 +1106,10 @@ export type MessageActionEventDTOQuery = MessageActionEventDTOQueryAnyOf | null;
 
 export type MessageActionEventDTOUrl = string | null;
 
+export type MessageActionEventDTOEntity = SavedViewEntityDTO | null;
+
 /**
- * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url.
+ * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url. open_resource for a saved view also carries entity (logs/traces/metrics/meter) so the frontend routes to the correct Explorer.
  */
 export interface MessageActionEventDTO {
 	kind: MessageActionKindDTO;
@@ -1008,6 +1126,7 @@ export interface MessageActionEventDTO {
 	signal?: MessageActionEventDTOSignal;
 	query?: MessageActionEventDTOQuery;
 	url?: MessageActionEventDTOUrl;
+	entity?: MessageActionEventDTOEntity;
 }
 
 export type MessageEventDTOActions = MessageActionEventDTO[] | null;
@@ -1385,3 +1504,21 @@ export type GetUsageApiV1AssistantUsageGetHeaders = {
 	 */
 	'X-SigNoz-URL'?: string | null;
 };
+
+export type GetChipsApiV1AssistantEmptyStateChipsGetParams = {
+	/**
+	 * @description Frontend-declared page type. Typed as an enum, but unrecognized values are coerced to 'other' (not rejected) so a new frontend page type works before the backend knows it. The page type alone identifies the focused entity (e.g. trace_detail) for the 'Explain this …' chip; the agent reads the concrete entity from page context once a chip is clicked, so no separate entity id is needed.
+	 */
+	page_type: PageTypeDTO;
+};
+
+export type GetChipsApiV1AssistantEmptyStateChipsGetHeaders = {
+	/**
+	 * @description SigNoz auth token (Bearer or raw JWT)
+	 */
+	authorization?: string | null;
+	/**
+	 * @description SigNoz instance base URL for multi-tenant deployments. Falls back to SIGNOZ_API_URL env var when omitted.
+	 */
+	'X-SigNoz-URL'?: string | null;
+};

frontend/src/api/saveView/getViewById.ts

@@ -0,0 +1,24 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { ViewProps } from 'types/api/saveViews/types';
+
+/**
+ * Fetches a single saved view by ID (`GET /api/v1/explorer/views/{viewId}`).
+ *
+ * Hand-maintained alongside the other `api/saveView/*` clients — explorer views
+ * are not in `docs/api/openapi.yml`, so Orval does not generate a hook here
+ * (unlike e.g. `useGetChannelByID` under `api/generated/services/channels`).
+ *
+ * Used by the AI assistant "Open view" action to load `compositeQuery` and
+ * navigate to the correct explorer without listing every view per source page.
+ * See `container/AIAssistant/components/ActionsSection/utils/openSavedView.ts`.
+ */
+export interface GetViewByIdProps {
+	status: string;
+	data: ViewProps;
+}
+
+export const getViewById = (
+	viewKey: string,
+): Promise<AxiosResponse<GetViewByIdProps>> =>
+	axios.get(`/explorer/views/${viewKey}`);

frontend/src/container/AIAssistant/__tests__/getAutoContexts.test.ts

@@ -0,0 +1,89 @@
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+
+import { getAutoContexts } from '../getAutoContexts';
+
+describe('getAutoContexts', () => {
+	it('returns alert detail context on alert overview with ruleId', () => {
+		const ruleId = 'rule-abc';
+		const search = `?${QueryParams.ruleId}=${ruleId}&${QueryParams.relativeTime}=1h`;
+
+		const contexts = getAutoContexts(ROUTES.ALERT_OVERVIEW, search);
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: ruleId,
+				metadata: {
+					page: 'alert_detail',
+					ruleId,
+				},
+			},
+		]);
+	});
+
+	it('returns alert detail context on alert history with ruleId', () => {
+		const ruleId = 'rule-xyz';
+		const startTime = '1700000000000';
+		const endTime = '1700003600000';
+		const search = `?${QueryParams.ruleId}=${ruleId}&${QueryParams.startTime}=${startTime}&${QueryParams.endTime}=${endTime}`;
+
+		const contexts = getAutoContexts(ROUTES.ALERT_HISTORY, search);
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: ruleId,
+				metadata: {
+					page: 'alert_detail',
+					ruleId,
+					timeRange: {
+						start: Number(startTime),
+						end: Number(endTime),
+					},
+				},
+			},
+		]);
+	});
+
+	it('returns triggered alerts context on alert history without ruleId', () => {
+		const contexts = getAutoContexts(ROUTES.ALERT_HISTORY, '');
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: null,
+				metadata: {
+					page: 'alerts_triggered',
+				},
+			},
+		]);
+	});
+
+	it('returns dashboard detail context on dashboard page', () => {
+		const dashboardId = 'dash-123';
+		const pathname = ROUTES.DASHBOARD.replace(':dashboardId', dashboardId);
+
+		const contexts = getAutoContexts(pathname, '');
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'dashboard',
+				resourceId: dashboardId,
+				metadata: {
+					page: 'dashboard_detail',
+				},
+			},
+		]);
+	});
+
+	it('returns empty array on alert overview without ruleId', () => {
+		const contexts = getAutoContexts(ROUTES.ALERT_OVERVIEW, '');
+
+		expect(contexts).toStrictEqual([]);
+	});
+});

frontend/src/container/AIAssistant/components/ActionsSection/ActionsSection.tsx

@@ -47,6 +47,22 @@ import { AIAssistantEvents, SuggestedPromptCategory } from '../../events';
 import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';
 
+import {
+	getPanelTypeForRequestType,
+	requestTypeFromActionQuery,
+} from './utils/applyFilterPanelType';
+import {
+	buildExplorerNavigationUrl,
+	openSavedViewByKey,
+} from './utils/openSavedView';
+import {
+	isSavedViewOpenAction,
+	resolveOpenResourceType,
+	resolveResourceId,
+	resolveSavedViewSourceHint,
+} from './utils/resolveOpenResource';
+import { ResourceType, resourceRoute } from './utils/resourceRoute';
+
 import styles from './ActionsSection.module.scss';
 
 interface ActionsSectionProps {
@@ -55,20 +71,6 @@ interface ActionsSectionProps {
 	messageId: string;
 }
 
-/**
- * Resource-type strings the backend uses for `open_resource` and rollback
- * actions. Centralized here so the route/module lookups below stay in sync.
- */
-const ResourceType = {
-	dashboard: 'dashboard',
-	alert: 'alert',
-	service: 'service',
-	saved_view: 'saved_view',
-	logs_explorer: 'logs_explorer',
-	traces_explorer: 'traces_explorer',
-	metrics_explorer: 'metrics_explorer',
-} as const;
-
 /** Maps an open_resource action's resourceType to its product module name. */
 function targetModuleForResource(resourceType: string): string | null {
 	switch (resourceType) {
@@ -78,6 +80,8 @@ function targetModuleForResource(resourceType: string): string | null {
 			return 'alerts';
 		case ResourceType.service:
 			return 'apm';
+		case ResourceType.channel:
+			return 'channels';
 		case ResourceType.saved_view:
 			return 'savedViews';
 		case ResourceType.logs_explorer:
@@ -140,39 +144,6 @@ function ActionIcon({
 	}
 }
 
-/**
- * Resolves an `open_resource` action to an in-app route.
- * Resource taxonomy mirrors `MessageContextDTOType`: dashboard, alert,
- * saved_view, service, and the *_explorer signals.
- */
-function resourceRoute(
-	resourceType: string,
-	resourceId: string,
-): string | null {
-	switch (resourceType) {
-		case ResourceType.dashboard:
-			return ROUTES.DASHBOARD.replace(':dashboardId', resourceId);
-		case ResourceType.alert: {
-			const params = new URLSearchParams({ [QueryParams.ruleId]: resourceId });
-			return `${ROUTES.EDIT_ALERTS}?${params.toString()}`;
-		}
-		case ResourceType.service:
-			return ROUTES.SERVICE_METRICS.replace(':servicename', resourceId);
-		case ResourceType.saved_view:
-			// No detail route — saved views land on the list page.
-			// Caller may provide signal-aware metadata in future; default to logs.
-			return ROUTES.LOGS_SAVE_VIEWS;
-		case ResourceType.logs_explorer:
-			return ROUTES.LOGS_EXPLORER;
-		case ResourceType.traces_explorer:
-			return ROUTES.TRACES_EXPLORER;
-		case ResourceType.metrics_explorer:
-			return ROUTES.METRICS_EXPLORER_EXPLORER;
-		default:
-			return null;
-	}
-}
-
 /**
  * The agent emits `action.query` as the SigNoz REST query-range request body:
  *
@@ -359,48 +330,41 @@ function withDerivedFilterExpressions(query: Query): Query {
  *     the new URL on mount.
  */
 function applyFilter(action: MessageActionDTO, deps: ApplyFilterDeps): void {
-	// eslint-disable-next-line no-console
-	console.log('[apply_filter] enter', {
-		signal: action.signal,
-		query: action.query,
-		pathname: deps.pathname,
-	});
 	if (!action.signal || !action.query) {
-		// eslint-disable-next-line no-console
-		console.warn('[apply_filter] bail: missing signal or query', action);
 		return;
 	}
 	const urlQuery = toUrlCompositeQuery(action.query as Record<string, unknown>);
 	if (!urlQuery) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			'[apply_filter] bail: toUrlCompositeQuery returned null — agent payload shape unrecognized',
-			action.query,
-		);
 		return;
 	}
+	// `requestType` lives on the request envelope, which `toUrlCompositeQuery`
+	// drops — read it off the raw action query and translate it into the
+	// explorer panel type so a grouped/aggregated query opens as a table/graph
+	// instead of the default raw-log List view.
+	const panelType = getPanelTypeForRequestType(
+		requestTypeFromActionQuery(action.query as Record<string, unknown>),
+	);
 	const normalized = withDerivedFilterExpressions(urlQuery as unknown as Query);
-	// eslint-disable-next-line no-console
-	console.log('[apply_filter] normalized', normalized);
 	if (signalMatchesPathname(action.signal, deps.pathname)) {
-		// eslint-disable-next-line no-console
-		console.log('[apply_filter] on-page → handleSetQueryData + redirect');
 		normalized.builder.queryData.forEach((q, i) => {
 			deps.handleSetQueryData(i, q);
 		});
-		deps.redirectWithQueryBuilderData(normalized);
+		deps.redirectWithQueryBuilderData(normalized, {
+			[QueryParams.panelTypes]: panelType,
+		});
 		return;
 	}
 	const base = explorerRouteForSignal(action.signal);
 	if (!base) {
-		// eslint-disable-next-line no-console
-		console.warn('[apply_filter] bail: no route for signal', action.signal);
 		return;
 	}
-	// eslint-disable-next-line no-console
-	console.log('[apply_filter] off-page → history.push', base);
-	const encoded = encodeURIComponent(JSON.stringify(normalized));
-	deps.history.push(`${base}?${QueryParams.compositeQuery}=${encoded}`);
+	// Reuse the saved-view URL builder so the encoding (double-encoded
+	// compositeQuery + JSON-stringified panelTypes) matches what the explorer's
+	// URL parser expects — see useGetCompositeQueryParam / useGetPanelTypesQueryParam.
+	const url = buildExplorerNavigationUrl(base, normalized, {
+		[QueryParams.panelTypes]: panelType,
+	});
+	deps.history.push(url);
 }
 
 /** Picks the right rollback API call for a given action kind. */
@@ -484,6 +448,35 @@ export default function ActionsSection({
 		setResults((prev) => ({ ...prev, [key]: result }));
 	};
 
+	const runOpenSavedView = async (
+		key: string,
+		action: MessageActionDTO,
+	): Promise<void> => {
+		const resourceId = resolveResourceId(action);
+		if (!resourceId) {
+			return;
+		}
+		setResult(key, { state: 'loading' });
+		try {
+			await openSavedViewByKey(
+				resourceId,
+				resolveSavedViewSourceHint(action),
+				history,
+			);
+			void logEvent(AIAssistantEvents.ResourceOpened, {
+				threadId,
+				messageId,
+				targetModule: targetModuleForResource(ResourceType.saved_view),
+				resourceId,
+			});
+			setResult(key, { state: 'success' });
+		} catch (err) {
+			const message =
+				err instanceof Error ? err.message : 'Failed to open saved view';
+			setResult(key, { state: 'error', error: message });
+		}
+	};
+
 	const runRollback = async (
 		key: string,
 		action: MessageActionDTO,
@@ -502,6 +495,31 @@ export default function ActionsSection({
 		}
 	};
 
+	const handleOpenResource = (key: string, action: MessageActionDTO): void => {
+		if (isSavedViewOpenAction(action)) {
+			void runOpenSavedView(key, action);
+			return;
+		}
+
+		const resourceType = resolveOpenResourceType(action);
+		const resourceId = resolveResourceId(action);
+		if (!resourceType || !resourceId) {
+			return;
+		}
+
+		const path = resourceRoute(resourceType, resourceId);
+		if (!path) {
+			return;
+		}
+		void logEvent(AIAssistantEvents.ResourceOpened, {
+			threadId,
+			messageId,
+			targetModule: targetModuleForResource(resourceType),
+			resourceId,
+		});
+		history.push(path);
+	};
+
 	const handleClick = (key: string, action: MessageActionDTO): void => {
 		switch (action.kind) {
 			case MessageActionKindDTO.open_docs: {
@@ -542,21 +560,9 @@ export default function ActionsSection({
 				}
 				break;
 			}
-			case MessageActionKindDTO.open_resource: {
-				if (action.resourceType && action.resourceId) {
-					const path = resourceRoute(action.resourceType, action.resourceId);
-					if (path) {
-						void logEvent(AIAssistantEvents.ResourceOpened, {
-							threadId,
-							messageId,
-							targetModule: targetModuleForResource(action.resourceType),
-							resourceId: action.resourceId,
-						});
-						history.push(path);
-					}
-				}
+			case MessageActionKindDTO.open_resource:
+				handleOpenResource(key, action);
 				break;
-			}
 			case MessageActionKindDTO.undo:
 			case MessageActionKindDTO.revert:
 			case MessageActionKindDTO.restore: {

frontend/src/container/AIAssistant/components/ActionsSection/utils/__tests__/applyFilterPanelType.test.ts

@@ -0,0 +1,75 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+import {
+	getPanelTypeForRequestType,
+	requestTypeFromActionQuery,
+} from '../applyFilterPanelType';
+
+describe('getPanelTypeForRequestType', () => {
+	it('maps scalar (grouped aggregation) to the Table view', () => {
+		expect(getPanelTypeForRequestType('scalar')).toBe(PANEL_TYPES.TABLE);
+	});
+
+	it('maps time_series to the Time Series (graph) view', () => {
+		expect(getPanelTypeForRequestType('time_series')).toBe(
+			PANEL_TYPES.TIME_SERIES,
+		);
+	});
+
+	it('maps distribution (aggregation) to the Table view', () => {
+		expect(getPanelTypeForRequestType('distribution')).toBe(PANEL_TYPES.TABLE);
+	});
+
+	it('maps raw to the List view', () => {
+		expect(getPanelTypeForRequestType('raw')).toBe(PANEL_TYPES.LIST);
+	});
+
+	it.each([undefined, null, '', 'trace', 'nonsense', 42, {}])(
+		'defaults to the List view for raw/unknown/missing requestType (%p)',
+		(value) => {
+			expect(getPanelTypeForRequestType(value)).toBe(PANEL_TYPES.LIST);
+		},
+	);
+});
+
+describe('requestTypeFromActionQuery', () => {
+	it('reads the top-level requestType envelope field', () => {
+		expect(
+			requestTypeFromActionQuery({
+				requestType: 'scalar',
+				schemaVersion: 'v5',
+				compositeQuery: { queries: [] },
+			}),
+		).toBe('scalar');
+	});
+
+	it('returns undefined when the field or query is absent', () => {
+		expect(requestTypeFromActionQuery({})).toBeUndefined();
+		expect(requestTypeFromActionQuery(null)).toBeUndefined();
+		expect(requestTypeFromActionQuery(undefined)).toBeUndefined();
+	});
+
+	it('composes with getPanelTypeForRequestType for the reported bug payload', () => {
+		// The "log count by service" apply_filter payload from issue #304 follow-up:
+		// scalar + groupBy(service.name) must open the Table view, not List.
+		const query = {
+			requestType: 'scalar',
+			schemaVersion: 'v5',
+			compositeQuery: {
+				queries: [
+					{
+						type: 'builder_query',
+						spec: {
+							signal: 'logs',
+							aggregations: [{ expression: 'count()' }],
+							groupBy: [{ name: 'service.name' }],
+						},
+					},
+				],
+			},
+		};
+		expect(getPanelTypeForRequestType(requestTypeFromActionQuery(query))).toBe(
+			PANEL_TYPES.TABLE,
+		);
+	});
+});

frontend/src/container/AIAssistant/components/ActionsSection/utils/__tests__/openSavedView.test.ts

@@ -0,0 +1,297 @@
+import {
+	ApplyFilterSignalDTO,
+	MessageActionKindDTO,
+	SavedViewEntityDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { getAllViews } from 'api/saveView/getAllViews';
+import { getViewById } from 'api/saveView/getViewById';
+import ROUTES from 'constants/routes';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+import { AllViewsProps, ViewProps } from 'types/api/saveViews/types';
+import { DataSource } from 'types/common/queryBuilder';
+import { AxiosResponse } from 'axios';
+import type { History } from 'history';
+
+import {
+	buildExplorerNavigationUrl,
+	findSavedViewInLists,
+	openSavedView,
+	openSavedViewByKey,
+} from '../openSavedView';
+import {
+	entityToDataSource,
+	isSavedViewOpenAction,
+	resolveActionEntity,
+	resolveOpenResourceType,
+	resolveResourceId,
+	resolveResourceType,
+	resolveSavedViewSourceHint,
+} from '../resolveOpenResource';
+import { resourceRoute, ResourceType } from '../resourceRoute';
+
+jest.mock('api/saveView/getAllViews');
+jest.mock('api/saveView/getViewById');
+
+jest.mock(
+	'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi',
+	() => ({
+		mapQueryDataFromApi: jest.fn(() => ({
+			queryType: 'builder',
+			builder: {
+				queryData: [{ id: 'A' }],
+				queryFormulas: [],
+				queryTraceOperator: [],
+			},
+		})),
+	}),
+);
+
+const mockedGetAllViews = getAllViews as jest.MockedFunction<
+	typeof getAllViews
+>;
+const mockedGetViewById = getViewById as jest.MockedFunction<
+	typeof getViewById
+>;
+
+function makeView(id: string, sourcePage: DataSource): ViewProps {
+	return {
+		id,
+		name: `View ${id}`,
+		category: 'test',
+		createdAt: '2021-07-07T06:31:00.000Z',
+		createdBy: 'user',
+		updatedAt: '2021-07-07T06:33:00.000Z',
+		updatedBy: 'user',
+		sourcePage,
+		tags: [],
+		extraData: '',
+		compositeQuery: {
+			panelType: PANEL_TYPES.LIST,
+		} as ICompositeMetricQuery,
+	};
+}
+
+function mockViewsResponse(views: ViewProps[]): AxiosResponse<AllViewsProps> {
+	return {
+		data: { status: 'success', data: views },
+	} as AxiosResponse<AllViewsProps>;
+}
+
+function mockViewByIdResponse(
+	view: ViewProps,
+): AxiosResponse<{ status: string; data: ViewProps }> {
+	return {
+		data: { status: 'success', data: view },
+	} as AxiosResponse<{ status: string; data: ViewProps }>;
+}
+
+describe('resourceRoute', () => {
+	it('returns null for saved_view so async navigation is used', () => {
+		expect(resourceRoute(ResourceType.saved_view, 'view-123')).toBeNull();
+	});
+
+	it('routes channels to the edit page', () => {
+		expect(resourceRoute(ResourceType.channel, 'channel-uuid-1')).toBe(
+			'/settings/channels/edit/channel-uuid-1',
+		);
+	});
+});
+
+describe('resolveOpenResource', () => {
+	it('reads entity from the action envelope', () => {
+		expect(
+			resolveActionEntity({
+				kind: MessageActionKindDTO.open_resource,
+				label: 'Open view',
+				entity: SavedViewEntityDTO.traces,
+			}),
+		).toBe(SavedViewEntityDTO.traces);
+	});
+
+	it('reads resource id from input.viewKey', () => {
+		expect(
+			resolveResourceId({
+				kind: MessageActionKindDTO.open_resource,
+				label: 'Open view',
+				input: { viewKey: 'abc-123' },
+			}),
+		).toBe('abc-123');
+	});
+
+	it('maps entity values to explorer data sources', () => {
+		expect(entityToDataSource('logs')).toBe(DataSource.LOGS);
+		expect(entityToDataSource('logs_explorer')).toBe(DataSource.LOGS);
+		expect(entityToDataSource('traces')).toBe(DataSource.TRACES);
+	});
+
+	it('prefers entity over signal for saved-view source hints', () => {
+		expect(
+			resolveSavedViewSourceHint({
+				kind: MessageActionKindDTO.open_resource,
+				label: 'Open view',
+				entity: SavedViewEntityDTO.traces,
+				signal: ApplyFilterSignalDTO.logs,
+			}),
+		).toBe(DataSource.TRACES);
+	});
+
+	it('falls back to signal when entity is absent', () => {
+		expect(
+			resolveSavedViewSourceHint({
+				kind: MessageActionKindDTO.open_resource,
+				label: 'Open view',
+				signal: ApplyFilterSignalDTO.metrics,
+			}),
+		).toBe(DataSource.METRICS);
+	});
+
+	it('normalises saved-view resource types', () => {
+		expect(
+			resolveResourceType({
+				kind: MessageActionKindDTO.open_resource,
+				label: 'Open view',
+				resourceType: 'saved-view',
+			}),
+		).toBe(ResourceType.saved_view);
+	});
+
+	it('detects open-view actions from label when id is present in input', () => {
+		expect(
+			isSavedViewOpenAction({
+				kind: MessageActionKindDTO.open_resource,
+				label: 'Open view',
+				input: { viewId: 'view-1' },
+			}),
+		).toBe(true);
+	});
+
+	it('resolves channel type from notification_channel alias', () => {
+		expect(
+			resolveResourceType({
+				kind: MessageActionKindDTO.open_resource,
+				label: 'Open channel',
+				resourceType: 'notification_channel',
+			}),
+		).toBe(ResourceType.channel);
+	});
+
+	it('infers channel type from Open channel label when resourceId is present', () => {
+		expect(
+			resolveOpenResourceType({
+				kind: MessageActionKindDTO.open_resource,
+				label: 'Open channel',
+				resourceId: 'channel-1',
+			}),
+		).toBe(ResourceType.channel);
+	});
+});
+
+describe('findSavedViewInLists', () => {
+	beforeEach(() => {
+		mockedGetAllViews.mockReset();
+	});
+
+	it('loads only the hinted source when entity is provided', async () => {
+		const tracesView = makeView('view-traces', DataSource.TRACES);
+		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([tracesView]));
+
+		const result = await findSavedViewInLists('view-traces', DataSource.TRACES);
+
+		expect(result).toStrictEqual(tracesView);
+		expect(mockedGetAllViews).toHaveBeenCalledTimes(1);
+		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
+	});
+});
+
+describe('buildExplorerNavigationUrl', () => {
+	it('encodes composite query and view selectors', () => {
+		const url = buildExplorerNavigationUrl(
+			ROUTES.LOGS_EXPLORER,
+			{ queryType: 'builder' } as never,
+			{
+				[QueryParams.panelTypes]: PANEL_TYPES.LIST,
+				[QueryParams.viewName]: 'My view',
+				[QueryParams.viewKey]: 'view-1',
+			},
+		);
+
+		expect(url).toContain(ROUTES.LOGS_EXPLORER);
+		expect(url).toContain(`${QueryParams.compositeQuery}=`);
+		expect(url).toContain(`${QueryParams.viewKey}=`);
+	});
+
+	// Regression guard for the apply_filter view bug: the panel type must land
+	// on the URL JSON-encoded the way `useGetPanelTypesQueryParam` reads it
+	// (`JSON.parse` of the param), i.e. as the quoted string `"table"` ->
+	// `panelTypes=%22table%22`. Without this the explorer falls back to LIST.
+	it('JSON-encodes panelTypes so the explorer opens the right view', () => {
+		const url = buildExplorerNavigationUrl(
+			ROUTES.LOGS_EXPLORER,
+			{ queryType: 'builder' } as never,
+			{ [QueryParams.panelTypes]: PANEL_TYPES.TABLE },
+		);
+
+		expect(url).toContain(`${QueryParams.panelTypes}=%22table%22`);
+	});
+});
+
+describe('openSavedView', () => {
+	it('navigates with history.push and view query params', () => {
+		const push = jest.fn();
+		const history = { push } as unknown as History;
+		const view = makeView('view-logs', DataSource.LOGS);
+
+		openSavedView(view, history);
+
+		expect(push).toHaveBeenCalledTimes(1);
+		const pushedUrl = push.mock.calls[0][0] as string;
+		expect(pushedUrl).toContain(ROUTES.LOGS_EXPLORER);
+		expect(pushedUrl).toContain(QueryParams.viewKey);
+	});
+});
+
+describe('openSavedViewByKey', () => {
+	beforeEach(() => {
+		mockedGetAllViews.mockReset();
+		mockedGetViewById.mockReset();
+	});
+
+	it('prefers the direct view lookup endpoint', async () => {
+		const view = makeView('view-logs', DataSource.LOGS);
+		mockedGetViewById.mockResolvedValueOnce(mockViewByIdResponse(view));
+		const push = jest.fn();
+		const history = { push } as unknown as History;
+
+		await openSavedViewByKey('view-logs', DataSource.LOGS, history);
+
+		expect(mockedGetViewById).toHaveBeenCalledWith('view-logs');
+		expect(mockedGetAllViews).not.toHaveBeenCalled();
+		expect(push).toHaveBeenCalled();
+	});
+
+	it('falls back to list probing when direct lookup fails', async () => {
+		const view = makeView('view-traces', DataSource.TRACES);
+		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
+		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([view]));
+		const push = jest.fn();
+		const history = { push } as unknown as History;
+
+		await openSavedViewByKey('view-traces', DataSource.TRACES, history);
+
+		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
+		expect(push).toHaveBeenCalled();
+	});
+
+	it('throws when the saved view does not exist', async () => {
+		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
+		mockedGetAllViews.mockResolvedValue(mockViewsResponse([]));
+
+		await expect(
+			openSavedViewByKey('missing', DataSource.LOGS, {
+				push: jest.fn(),
+			} as unknown as History),
+		).rejects.toThrow('Saved view not found');
+	});
+});

frontend/src/container/AIAssistant/components/ActionsSection/utils/applyFilterPanelType.ts

@@ -0,0 +1,46 @@
+import { REQUEST_TYPES } from 'api/v5/queryRange/constants';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { RequestType } from 'types/api/v5/queryRange';
+
+/**
+ * Maps an apply_filter `query.requestType` to the explorer panel type so the
+ * Explorer opens in the view the query implies:
+ *
+ *   - `scalar`       -> Table        (grouped aggregation, e.g. "count by service")
+ *   - `distribution` -> Table        (aggregation; Logs/Traces have no histogram view)
+ *   - `time_series`  -> Time Series  (graph)
+ *   - `raw` / other  -> List         (raw rows) [default]
+ *
+ * `trace` and the empty request type fall through to the List default on
+ * purpose — they are raw, ungrouped result sets.
+ *
+ * The agent emits `requestType` on the request envelope of `action.query`. It
+ * must be read off the raw action query *before* `toUrlCompositeQuery` maps the
+ * inner `compositeQuery` (that mapper keeps only the builder queries and drops
+ * the envelope). Without an explicit `panelTypes` URL param the Explorer falls
+ * back to `PANEL_TYPES.LIST` (see `useGetPanelTypesQueryParam`), so a grouped
+ * "count by service" query renders as a raw log list instead of a table.
+ */
+const REQUEST_TYPE_TO_PANEL_TYPE: Partial<Record<RequestType, PANEL_TYPES>> = {
+	[REQUEST_TYPES.SCALAR]: PANEL_TYPES.TABLE,
+	[REQUEST_TYPES.DISTRIBUTION]: PANEL_TYPES.TABLE,
+	[REQUEST_TYPES.TIME_SERIES]: PANEL_TYPES.TIME_SERIES,
+	[REQUEST_TYPES.RAW]: PANEL_TYPES.LIST,
+};
+
+export function getPanelTypeForRequestType(requestType: unknown): PANEL_TYPES {
+	if (typeof requestType === 'string') {
+		const mapped = REQUEST_TYPE_TO_PANEL_TYPE[requestType as RequestType];
+		if (mapped) {
+			return mapped;
+		}
+	}
+	return PANEL_TYPES.LIST;
+}
+
+/** Reads the `requestType` envelope field off a raw apply_filter query payload. */
+export function requestTypeFromActionQuery(
+	query: Record<string, unknown> | null | undefined,
+): unknown {
+	return query?.requestType;
+}

frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -0,0 +1,117 @@
+import { getAllViews } from 'api/saveView/getAllViews';
+import { getViewById } from 'api/saveView/getViewById';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
+import { ViewProps } from 'types/api/saveViews/types';
+import { DataSource } from 'types/common/queryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { History } from 'history';
+
+type SavedViewSourceHint = DataSource | 'meter';
+
+const DEFAULT_PROBE_SOURCES: SavedViewSourceHint[] = [
+	DataSource.LOGS,
+	DataSource.TRACES,
+	DataSource.METRICS,
+];
+
+export async function findSavedViewInLists(
+	viewKey: string,
+	sourceHint?: SavedViewSourceHint | null,
+): Promise<ViewProps | null> {
+	const sources = sourceHint ? [sourceHint] : DEFAULT_PROBE_SOURCES;
+
+	for (const source of sources) {
+		try {
+			const response = await getAllViews(source);
+			const match = response.data.data.find((view) => view.id === viewKey);
+			if (match) {
+				return match;
+			}
+		} catch {
+			// Probe the next source page when no entity hint is provided.
+		}
+	}
+
+	return null;
+}
+
+async function loadSavedView(
+	viewKey: string,
+	sourceHint?: SavedViewSourceHint | null,
+): Promise<ViewProps> {
+	try {
+		const response = await getViewById(viewKey);
+		if (response.data?.data) {
+			return response.data.data;
+		}
+	} catch {
+		// Fall back to list probing when the direct lookup fails.
+	}
+
+	const fromList = await findSavedViewInLists(viewKey, sourceHint);
+	if (fromList) {
+		return fromList;
+	}
+
+	throw new Error('Saved view not found');
+}
+
+export function explorerRouteForSourcePage(
+	sourcePage: DataSource | string,
+): (typeof SOURCEPAGE_VS_ROUTES)[keyof typeof SOURCEPAGE_VS_ROUTES] | null {
+	return SOURCEPAGE_VS_ROUTES[sourcePage] ?? null;
+}
+
+/**
+ * Builds an explorer URL the same way `redirectWithQueryBuilderData` does —
+ * without inheriting stale query params from the current page's `urlQuery`.
+ */
+export function buildExplorerNavigationUrl(
+	route: string,
+	query: Query,
+	searchParams: Record<string, unknown>,
+): string {
+	const params = new URLSearchParams();
+	params.set(
+		QueryParams.compositeQuery,
+		encodeURIComponent(JSON.stringify(query)),
+	);
+	Object.entries(searchParams).forEach(([key, value]) => {
+		params.set(key, JSON.stringify(value));
+	});
+	return `${route}?${params.toString()}`;
+}
+
+export function openSavedView(view: ViewProps, history: History): void {
+	const route = explorerRouteForSourcePage(view.sourcePage);
+	if (!route) {
+		throw new Error('Unsupported saved view source');
+	}
+
+	if (!view.compositeQuery) {
+		throw new Error('Saved view is missing query data');
+	}
+
+	const query = mapQueryDataFromApi(view.compositeQuery);
+	const url = buildExplorerNavigationUrl(route, query, {
+		[QueryParams.panelTypes]: view.compositeQuery.panelType as PANEL_TYPES,
+		[QueryParams.viewName]: view.name,
+		[QueryParams.viewKey]: view.id,
+	});
+	history.push(url);
+}
+
+export async function openSavedViewByKey(
+	viewKey: string,
+	sourceHint: SavedViewSourceHint | null | undefined,
+	history: History,
+): Promise<void> {
+	const view = await loadSavedView(viewKey, sourceHint);
+	openSavedView(view, history);
+}
+
+/** @deprecated Use findSavedViewInLists — kept for tests. */
+export const findSavedView = findSavedViewInLists;

frontend/src/container/AIAssistant/components/ActionsSection/utils/resolveOpenResource.ts

@@ -0,0 +1,203 @@
+import type { MessageActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import {
+	ApplyFilterSignalDTO,
+	SavedViewEntityDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { ResourceType } from './resourceRoute';
+
+function readString(value: unknown): string | null {
+	if (typeof value !== 'string') {
+		return null;
+	}
+	const trimmed = value.trim();
+	return trimmed.length > 0 ? trimmed : null;
+}
+
+/** Normalises backend resource-type strings to the taxonomy used in the UI. */
+export function normalizeResourceType(
+	resourceType: string | null | undefined,
+): string | null {
+	if (!resourceType) {
+		return null;
+	}
+
+	const normalized = resourceType.trim().toLowerCase().replace(/-/g, '_');
+	if (normalized === 'savedview') {
+		return ResourceType.saved_view;
+	}
+	if (
+		normalized === 'notification_channel' ||
+		normalized === 'notificationchannel'
+	) {
+		return ResourceType.channel;
+	}
+
+	return normalized;
+}
+
+/** Reads a resource type from the action envelope or its `input` payload. */
+export function resolveResourceType(action: MessageActionDTO): string | null {
+	const direct = normalizeResourceType(action.resourceType);
+	if (direct) {
+		return direct;
+	}
+
+	const input = action.input;
+	if (!input) {
+		return null;
+	}
+
+	return (
+		normalizeResourceType(readString(input.resourceType)) ??
+		normalizeResourceType(readString(input.type))
+	);
+}
+
+/**
+ * Resolves the resource type for an `open_resource` action, including label-based
+ * fallbacks when the backend only sends a display label + id.
+ */
+export function resolveOpenResourceType(
+	action: MessageActionDTO,
+): string | null {
+	const fromFields = resolveResourceType(action);
+	if (fromFields) {
+		return fromFields;
+	}
+
+	if (/open\s+channel/i.test(action.label) && resolveResourceId(action)) {
+		return ResourceType.channel;
+	}
+
+	return null;
+}
+
+/** Reads a resource id from `resourceId` or common `input` keys. */
+export function resolveResourceId(action: MessageActionDTO): string | null {
+	const direct = readString(action.resourceId);
+	if (direct) {
+		return direct;
+	}
+
+	const input = action.input;
+	if (!input) {
+		return null;
+	}
+
+	for (const key of [
+		'resourceId',
+		'viewId',
+		'viewKey',
+		'channelId',
+		'id',
+	] as const) {
+		const value = readString(input[key]);
+		if (value) {
+			return value;
+		}
+	}
+
+	return null;
+}
+
+/** Reads `entity` from the action envelope or its `input` payload. */
+export function resolveActionEntity(
+	action: MessageActionDTO,
+): SavedViewEntityDTO | null {
+	if (action.entity) {
+		return action.entity;
+	}
+
+	const fromInput = readString(action.input?.entity);
+	if (!fromInput) {
+		return null;
+	}
+
+	return normalizeToSavedViewEntity(fromInput);
+}
+
+function normalizeToSavedViewEntity(value: string): SavedViewEntityDTO | null {
+	const source = entityToDataSource(value);
+	switch (source) {
+		case DataSource.LOGS:
+			return SavedViewEntityDTO.logs;
+		case DataSource.TRACES:
+			return SavedViewEntityDTO.traces;
+		case DataSource.METRICS:
+			return SavedViewEntityDTO.metrics;
+		case 'meter':
+			return SavedViewEntityDTO.meter;
+		default:
+			return null;
+	}
+}
+
+/**
+ * Maps an action `entity` to an explorer `DataSource` for saved-view lookups.
+ * Accepts both short (`logs`) and taxonomy (`logs_explorer`) values.
+ */
+export function entityToDataSource(
+	entity: SavedViewEntityDTO | string,
+): DataSource | 'meter' | null {
+	const normalized = entity.trim().toLowerCase().replace(/-/g, '_');
+
+	switch (normalized) {
+		case SavedViewEntityDTO.logs:
+		case ResourceType.logs_explorer:
+			return DataSource.LOGS;
+		case SavedViewEntityDTO.traces:
+		case ResourceType.traces_explorer:
+			return DataSource.TRACES;
+		case SavedViewEntityDTO.metrics:
+		case ResourceType.metrics_explorer:
+			return DataSource.METRICS;
+		case SavedViewEntityDTO.meter:
+			return 'meter';
+		default:
+			return null;
+	}
+}
+
+/**
+ * Picks which explorer source page to search when resolving a saved view.
+ * Prefers `entity` (open_resource); falls back to `signal` only for legacy payloads.
+ */
+export function resolveSavedViewSourceHint(
+	action: MessageActionDTO,
+): DataSource | 'meter' | null {
+	const entity = resolveActionEntity(action);
+	if (entity) {
+		const fromEntity = entityToDataSource(entity);
+		if (fromEntity) {
+			return fromEntity;
+		}
+	}
+
+	if (action.signal) {
+		switch (action.signal) {
+			case ApplyFilterSignalDTO.logs:
+				return DataSource.LOGS;
+			case ApplyFilterSignalDTO.traces:
+				return DataSource.TRACES;
+			case ApplyFilterSignalDTO.metrics:
+				return DataSource.METRICS;
+			default: {
+				const _exhaustive: never = action.signal;
+				return _exhaustive;
+			}
+		}
+	}
+
+	return null;
+}
+
+export function isSavedViewOpenAction(action: MessageActionDTO): boolean {
+	if (resolveResourceType(action) === ResourceType.saved_view) {
+		return true;
+	}
+
+	// Defensive: some agent payloads only set a human label + id in `input`.
+	return /open\s+view/i.test(action.label) && resolveResourceId(action) !== null;
+}

frontend/src/container/AIAssistant/components/ActionsSection/utils/resourceRoute.ts

@@ -0,0 +1,50 @@
+import ROUTES from 'constants/routes';
+import { QueryParams } from 'constants/query';
+
+/**
+ * Resource-type strings the backend uses for `open_resource` and rollback
+ * actions. Centralized here so route/module lookups stay in sync.
+ */
+export const ResourceType = {
+	dashboard: 'dashboard',
+	alert: 'alert',
+	service: 'service',
+	channel: 'channel',
+	saved_view: 'saved_view',
+	logs_explorer: 'logs_explorer',
+	traces_explorer: 'traces_explorer',
+	metrics_explorer: 'metrics_explorer',
+} as const;
+
+/**
+ * Resolves an `open_resource` action to an in-app route for synchronous
+ * navigation. Returns `null` for `saved_view` — callers must load the view
+ * by id and navigate with query-builder state instead.
+ */
+export function resourceRoute(
+	resourceType: string,
+	resourceId: string,
+): string | null {
+	switch (resourceType) {
+		case ResourceType.dashboard:
+			return ROUTES.DASHBOARD.replace(':dashboardId', resourceId);
+		case ResourceType.alert: {
+			const params = new URLSearchParams({ [QueryParams.ruleId]: resourceId });
+			return `${ROUTES.EDIT_ALERTS}?${params.toString()}`;
+		}
+		case ResourceType.service:
+			return ROUTES.SERVICE_METRICS.replace(':servicename', resourceId);
+		case ResourceType.channel:
+			return ROUTES.CHANNELS_EDIT.replace(':channelId', resourceId);
+		case ResourceType.saved_view:
+			return null;
+		case ResourceType.logs_explorer:
+			return ROUTES.LOGS_EXPLORER;
+		case ResourceType.traces_explorer:
+			return ROUTES.TRACES_EXPLORER;
+		case ResourceType.metrics_explorer:
+			return ROUTES.METRICS_EXPLORER_EXPLORER;
+		default:
+			return null;
+	}
+}

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -101,6 +101,8 @@ function autoContextLabel(ctx: MessageContext): string {
 			return 'Panel (fullscreen)';
 		case 'dashboard_list':
 			return 'Dashboards';
+		case 'alert_detail':
+			return 'Current alert';
 		case 'alert_edit':
 			return 'Editing alert';
 		case 'alert_new':

frontend/src/container/AIAssistant/components/MarkdownExternalLink/MarkdownExternalLink.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react';
+
+type MarkdownExternalLinkProps = ComponentProps<'a'> & {
+	// react-markdown passes `node` — accept and ignore it
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	node?: any;
+};
+
+export default function MarkdownExternalLink({
+	href,
+	children,
+	node: _node,
+	...props
+}: MarkdownExternalLinkProps): JSX.Element {
+	return (
+		<a
+			href={href}
+			target="_blank"
+			rel="noopener noreferrer"
+			data-testid="ai-markdown-link"
+			{...props}
+		>
+			{children}
+		</a>
+	);
+}

frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx

@@ -11,6 +11,7 @@ import { Message, MessageBlock } from '../../types';
 import ActionsSection from '../ActionsSection';
 import ActivityGroup, { ActivityItem } from '../ActivityGroup';
 import { RichCodeBlock } from '../blocks';
+import MarkdownExternalLink from '../MarkdownExternalLink/MarkdownExternalLink';
 import { MessageContext } from '../MessageContext';
 import MessageFeedback from '../MessageFeedback';
 import UserMessageActions from '../UserMessageActions';
@@ -37,7 +38,11 @@ function SmartPre({ children }: { children?: React.ReactNode }): JSX.Element {
 }
 
 const MD_PLUGINS = [remarkGfm];
-const MD_COMPONENTS = { code: RichCodeBlock, pre: SmartPre };
+const MD_COMPONENTS = {
+	code: RichCodeBlock,
+	pre: SmartPre,
+	a: MarkdownExternalLink,
+};
 
 type RenderGroup =
 	| { kind: 'text'; id: string; content: string }

frontend/src/container/AIAssistant/components/MessageFeedback/MessageFeedback.module.scss

@@ -50,7 +50,7 @@
 	font-size: 10px;
 	color: var(--l3-foreground);
 	white-space: nowrap;
-	padding-left: 2px;
+	padding-left: 8px;
 	border-left: 1px solid var(--l2-border);
 }
 

frontend/src/container/AIAssistant/components/StreamingMessage/StreamingMessage.tsx

@@ -13,6 +13,7 @@ import { StreamingEventItem } from '../../types';
 import ActivityGroup, { ActivityItem } from '../ActivityGroup';
 import ApprovalCard from '../ApprovalCard';
 import { RichCodeBlock } from '../blocks';
+import MarkdownExternalLink from '../MarkdownExternalLink/MarkdownExternalLink';
 import ClarificationForm from '../ClarificationForm';
 
 import messageStyles from '../MessageBubble/MessageBubble.module.scss';
@@ -30,7 +31,11 @@ function SmartPre({ children }: { children?: React.ReactNode }): JSX.Element {
 }
 
 const MD_PLUGINS = [remarkGfm];
-const MD_COMPONENTS = { code: RichCodeBlock, pre: SmartPre };
+const MD_COMPONENTS = {
+	code: RichCodeBlock,
+	pre: SmartPre,
+	a: MarkdownExternalLink,
+};
 
 type RenderGroup =
 	| { kind: 'text'; id: string; content: string }

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -99,6 +99,30 @@ export function getAutoContexts(
 
 	// ── Alerts ────────────────────────────────────────────────────────────────
 
+	// Alert detail (overview / per-rule history) — `/alerts/overview?ruleId=…`
+	// or `/alerts/history?ruleId=…`. Mirrors dashboard_detail: resourceId is the
+	// rule id and shared metadata carries the URL time range when present.
+	if (
+		matchPath(pathname, { path: ROUTES.ALERT_OVERVIEW, exact: true }) ||
+		matchPath(pathname, { path: ROUTES.ALERT_HISTORY, exact: true })
+	) {
+		const ruleId = params.get(QueryParams.ruleId);
+		if (ruleId) {
+			return [
+				{
+					source: 'auto',
+					type: 'alert',
+					resourceId: ruleId,
+					metadata: {
+						page: 'alert_detail',
+						ruleId,
+						...sharedMetadata,
+					},
+				},
+			];
+		}
+	}
+
 	// Alert edit — `/alerts/edit?ruleId=…`.
 	if (matchPath(pathname, { path: ROUTES.EDIT_ALERTS, exact: true })) {
 		const ruleId = params.get(QueryParams.ruleId);
@@ -108,7 +132,7 @@ export function getAutoContexts(
 					source: 'auto',
 					type: 'alert',
 					resourceId: ruleId,
-					metadata: { page: 'alert_edit' },
+					metadata: { page: 'alert_edit', ruleId },
 				},
 			];
 		}
@@ -125,6 +149,7 @@ export function getAutoContexts(
 		];
 	}
 
+	// Triggered-alerts index — `/alerts/history` without a rule id.
 	if (matchPath(pathname, { path: ROUTES.ALERT_HISTORY, exact: true })) {
 		return [
 			{

frontend/src/container/AIAssistant/store/useAIAssistantStore.ts

@@ -1,12 +1,10 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import axios from 'axios';
 import { v4 as uuidv4 } from 'uuid';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 
 import type {
-	ErrorResponseDTO,
 	MessageActionDTO,
 	MessageSummaryDTOBlocksAnyOfItem,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
@@ -37,6 +35,7 @@ import {
 	MessageBlock,
 	MessageRole,
 } from '../types';
+import { resolveAssistantErrorMessage } from '../utils/resolveAssistantErrorMessage';
 
 // ---------------------------------------------------------------------------
 // Types used by module-level helpers
@@ -399,6 +398,7 @@ async function runStreamingLoop(
 			}
 			throw Object.assign(new Error(event.error.message), {
 				retryAction: event.retryAction,
+				code: event.error.code,
 			});
 		} else if (event.type === 'conversation' && event.title) {
 			set((s) => {
@@ -484,36 +484,6 @@ function hasPendingInput(conversationId: string, get: StoreGetter): boolean {
 	return Boolean(stream?.pendingApproval || stream?.pendingClarification);
 }
 
-function parseErrorBody(value: unknown): string | null {
-	if (typeof value === 'string') {
-		try {
-			return parseErrorBody(JSON.parse(value));
-		} catch {
-			return null;
-		}
-	}
-	const message = (value as ErrorResponseDTO | undefined)?.error?.message;
-	return typeof message === 'string' && message.length > 0 ? message : null;
-}
-
-/**
- * Returns the backend's `error.message` when `err` is a 429 axios response
- * (typically from the threads API surface — createThread, sendMessage, approve,
- * clarify, regenerate). Returns null for any other error so callers fall
- * through to their generic copy.
- */
-function rateLimitMessage(err: unknown): string | null {
-	if (axios.isAxiosError(err) && err.response?.status === 429) {
-		return parseErrorBody(err.response.data);
-	}
-	return null;
-}
-
-/**
- * Commits an error message and removes the stream entry. When `isRateLimit`
- * is true, the committed message is flagged so the feedback/regenerate bar
- * is hidden — clicking regenerate would just 429 again.
- */
 function finalizeStreamingError(
 	conversationId: string,
 	errorContent: string,
@@ -1174,14 +1144,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] sendMessage failed:', err);
-					const rateLimit = rateLimitMessage(err);
-					finalizeStreamingError(
-						convId,
-						rateLimit ??
-							'Something went wrong while fetching the response. Please try again.',
-						set,
-						rateLimit !== null,
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while fetching the response. Please try again.',
 					);
+					finalizeStreamingError(convId, message, set, isRateLimit);
 				}
 			},
 
@@ -1214,14 +1181,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] approveAction failed:', err);
-					const rateLimit = rateLimitMessage(err);
-					finalizeStreamingError(
-						conversationId,
-						rateLimit ??
-							'Something went wrong while processing the approval. Please try again.',
-						set,
-						rateLimit !== null,
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while processing the approval. Please try again.',
 					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
 				}
 			},
 
@@ -1296,14 +1260,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] regenerateAssistantMessage failed:', err);
-					const rateLimit = rateLimitMessage(err);
-					finalizeStreamingError(
-						conversationId,
-						rateLimit ??
-							'Something went wrong while regenerating the response. Please try again.',
-						set,
-						rateLimit !== null,
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while regenerating the response. Please try again.',
 					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
 				}
 			},
 
@@ -1365,14 +1326,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] submitClarification failed:', err);
-					const rateLimit = rateLimitMessage(err);
-					finalizeStreamingError(
-						conversationId,
-						rateLimit ??
-							'Something went wrong while processing your answers. Please try again.',
-						set,
-						rateLimit !== null,
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while processing your answers. Please try again.',
 					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
 				}
 			},
 		})),

frontend/src/container/AIAssistant/utils/__tests__/resolveAssistantErrorMessage.test.ts

@@ -0,0 +1,91 @@
+import { AxiosError } from 'axios';
+import { ErrorCodeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+import { resolveAssistantErrorMessage } from '../resolveAssistantErrorMessage';
+
+const FALLBACK = 'Something went wrong. Please try again.';
+
+describe('resolveAssistantErrorMessage', () => {
+	it('returns backend message for a known error code', () => {
+		const err = new AxiosError('Request failed');
+		err.response = {
+			status: 400,
+			data: {
+				error: {
+					code: ErrorCodeDTO.thread_busy,
+					message: 'This thread is busy. Try again shortly.',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'This thread is busy. Try again shortly.',
+			isRateLimit: false,
+		});
+	});
+
+	it('falls back when error code is not in ErrorCodeDTO', () => {
+		const err = new AxiosError('Request failed');
+		err.response = {
+			status: 400,
+			data: {
+				error: {
+					code: 'future_unknown_code',
+					message: 'Backend-only message',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: FALLBACK,
+			isRateLimit: false,
+		});
+	});
+
+	it('marks HTTP 429 responses as rate limited', () => {
+		const err = new AxiosError('Too many requests');
+		err.response = {
+			status: 429,
+			data: {
+				error: {
+					code: ErrorCodeDTO.hourly_message_limit,
+					message: 'Hourly limit reached.',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'Hourly limit reached.',
+			isRateLimit: true,
+		});
+	});
+
+	it('uses backend message for known SSE rate-limit error codes', () => {
+		const err = Object.assign(new Error('Daily token limit exceeded.'), {
+			code: ErrorCodeDTO.daily_token_limit,
+		});
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'Daily token limit exceeded.',
+			isRateLimit: true,
+		});
+	});
+
+	it('marks 429 as rate limited even when error code is unknown', () => {
+		const err = new AxiosError('Too many requests');
+		err.response = {
+			status: 429,
+			data: {
+				error: {
+					code: 'future_unknown_code',
+					message: 'Too many requests',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: FALLBACK,
+			isRateLimit: true,
+		});
+	});
+});

frontend/src/container/AIAssistant/utils/resolveAssistantErrorMessage.ts

@@ -0,0 +1,71 @@
+import { isAxiosError } from 'axios';
+import {
+	ErrorCodeDTO,
+	type ErrorBodyDTO,
+	type ErrorResponseDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+export interface AssistantErrorResolution {
+	message: string;
+	isRateLimit: boolean;
+}
+
+function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
+	return (
+		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
+	);
+}
+
+const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
+	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
+	ErrorCodeDTO.thread_message_limit,
+	ErrorCodeDTO.connection_limit_exceeded,
+	ErrorCodeDTO.hourly_message_limit,
+	ErrorCodeDTO.daily_message_limit,
+	ErrorCodeDTO.daily_token_limit,
+	ErrorCodeDTO.daily_cost_limit,
+	ErrorCodeDTO.budget_exceeded,
+]);
+
+function isRateLimitError(code: string | undefined, err: unknown): boolean {
+	if (isAxiosError(err) && err.response?.status === 429) {
+		return true;
+	}
+
+	return isErrorCodeDTO(code) && RATE_LIMIT_ERROR_CODES.has(code);
+}
+
+function getErrorBody(err: unknown): ErrorBodyDTO | null {
+	if (isAxiosError(err)) {
+		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
+	}
+
+	const code = (err as { code?: string } | undefined)?.code;
+	const message = err instanceof Error ? err.message : undefined;
+	if (!code || !message) {
+		return null;
+	}
+
+	return { code: code as ErrorCodeDTO, message };
+}
+
+/**
+ * Uses `error.message` when `error.code` is a known `ErrorCodeDTO`;
+ * otherwise returns `fallback`.
+ */
+export function resolveAssistantErrorMessage(
+	err: unknown,
+	fallback: string,
+): AssistantErrorResolution {
+	const body = getErrorBody(err);
+	const isRateLimit = isRateLimitError(body?.code, err);
+
+	if (body && isErrorCodeDTO(body.code) && body.message.trim()) {
+		return {
+			message: body.message.trim(),
+			isRateLimit,
+		};
+	}
+
+	return { message: fallback, isRateLimit: Boolean(isRateLimit) };
+}

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -29,3 +29,7 @@
 		color: var(--l2-foreground);
 	}
 }
+
+body.ai-assistant-panel-open .create-alert-v2-footer {
+	right: var(--ai-assistant-panel-width, 380px);
+}

frontend/src/container/NewWidget/NewWidget.styles.scss

@@ -39,6 +39,7 @@
 	.right-header {
 		display: flex;
 		gap: 16px;
+		align-items: center;
 	}
 }
 

frontend/src/container/NewWidget/index.tsx

@@ -15,6 +15,7 @@ import { Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { adjustQueryForV5 } from 'components/QueryBuilderV2/utils';
 import { QueryParams } from 'constants/query';
@@ -820,6 +821,11 @@ function NewWidget({
 					</Flex>
 				</div>
 				<div className="right-header">
+					<HeaderRightSection
+						enableAnnouncements={false}
+						enableShare
+						enableFeedback
+					/>
 					{showSwitchToViewModeButton && (
 						<Button
 							color="primary"

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,31 @@ 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';
 
-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 +47,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 +54,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 +102,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 +110,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 +127,18 @@ 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;
+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/index.tsx

@@ -1,45 +1,92 @@
 import { useMemo } from 'react';
 
 import { Braces, Globe, Table } from '@signozhq/icons';
-import { TabItemProps, 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 Overview from './Overview';
 import { SettingsTabPlaceholder } from './utils';
 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';
 
 interface DashboardSettingsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 }
 
+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 { user } = useAppContext();
+	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
+
+	const enablePublicDashboard = isCloudUser || isEnterpriseSelfHostedUser;
+
 	const items: TabItemProps[] = useMemo(
 		() => [
 			{
-				key: 'general',
-				label: 'General',
-				children: <GeneralSettings dashboard={dashboard} />,
-				prefixIcon: <Table size={14} />,
+				key: TabKeys.OVERVIEW,
+				label: TabKeys.OVERVIEW,
+				children: <Overview dashboard={dashboard} />,
 			},
 			{
-				key: 'variables',
-				label: 'Variables',
+				key: TabKeys.VARIABLES,
+				label: TabKeys.VARIABLES,
 				children: <VariablesSettings dashboard={dashboard} />,
-				prefixIcon: <Braces size={14} />,
-			},
-			{
-				key: 'public-dashboard',
-				label: 'Publish',
-				children: (
-					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
-				),
-				prefixIcon: <Globe size={14} />,
 			},
+			...(enablePublicDashboard
+				? [
+						{
+							key: TabKeys.PUBLISH,
+							label: TabKeys.PUBLISH,
+							children: (
+								<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
+							),
+							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/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

@@ -13,7 +13,7 @@ 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 } = DashboardtypesPatchOpDTO;

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