feat(dashboard-v2): serve V2 dashboard pages behind use_dashboard_v2 flag

Gate the dashboards list & detail entry points on useIsDashboardV2() — V1 falls
through when the flag is off (V1 detail logic moved into DashboardPage.tsx). Un-park
the V2 page directories in tsconfig so they typecheck and ship.

Also convert the // header comments in states.module.scss to /* */ — once the V2
list is wired into the import graph, vite compiles that stylesheet and the
backtick in the // comment crashed the CSS-modules parser ('Unclosed string').

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

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

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

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

frontend/src/container/SideNav/SideNav.tsx

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

frontend/src/pages/DashboardPage/DashboardPage.tsx

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

frontend/src/pages/DashboardPage/index.tsx

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

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

@@ -4,7 +4,7 @@ import type {
 	DashboardtypesLayoutDTO,
 	DashboardtypesPanelDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesPatchOpDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { GridItem } from './utils';
 
@@ -16,7 +16,7 @@ import type { GridItem } from './utils';
  * patches in DashboardSettings/General and DashboardDescription).
  */
 
-const { add, replace, remove } = DashboardtypesJSONPatchOperationDTOOp;
+const { add, replace, remove } = DashboardtypesPatchOpDTO;
 
 const PANEL_REF_PREFIX = '#/spec/panels/';
 

frontend/src/pages/DashboardsListPage/index.tsx

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

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

@@ -8,6 +8,10 @@ import {
 	createDashboardV2,
 	useListDashboardsV2,
 } from 'api/generated/services/dashboard';
+import {
+	DashboardtypesListOrderDTO,
+	DashboardtypesListSortDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { RequestDashboardBtn } from 'container/ListOfDashboard/RequestDashboardBtn';
 import useComponentPermission from 'hooks/useComponentPermission';
@@ -82,8 +86,10 @@ function DashboardsList(): JSX.Element {
 	const listParams = useMemo(
 		() => ({
 			query: searchString.trim() || undefined,
-			sort: sortColumn,
-			order: sortOrder,
+			// SortColumn/SortOrder string-literal unions mirror these generated
+			// enums 1:1 (identical values); cast to satisfy the client param.
+			sort: sortColumn as DashboardtypesListSortDTO,
+			order: sortOrder as DashboardtypesListOrderDTO,
 			limit: PAGE_SIZE,
 			offset: (page - 1) * PAGE_SIZE,
 		}),

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

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

frontend/src/pages/DashboardsListPageV2/utils.ts

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

frontend/tsconfig.json

@@ -48,9 +48,7 @@
 		"node_modules",
 		"src/parser/*.ts",
 		"src/parser/TraceOperatorParser/*.ts",
-		"orval.config.ts",
-		"src/pages/DashboardsListPageV2/**/*",
-		"src/pages/DashboardPageV2/**/*"
+		"orval.config.ts"
 	],
 	"include": [
 		"./src",