feat(public-dashboard): render v2 public dashboards read-only

Adds a read-only v2 viewer that reuses the authenticated V2 panel renderers
(PanelHeader with hideActions, PanelBody, panel registry) and the pure layoutsToSections
util, with a forked read-only grid. The public page branches on the resolved schema:
v1 keeps the existing container, v2 renders the new viewer. Dashboard variables are not
rendered — the public endpoint does not substitute them.

frontend/src/AppRoutes/routes.ts

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

frontend/src/api/dashboard/public/getPublicDashboardPanelQueryRange.ts

@@ -0,0 +1,33 @@
+import { GeneratedAPIInstance } from 'api/generatedAPIInstance';
+import type { GetPublicDashboardPanelQueryRangeV2200 } from 'api/generated/services/sigNoz.schemas';
+
+export interface GetPublicDashboardPanelQueryRangeProps {
+	/** Public share id from the URL. */
+	id: string;
+	/** Panel key in `spec.panels`. */
+	key: string;
+	/** Epoch milliseconds. */
+	startTime: number;
+	/** Epoch milliseconds. */
+	endTime: number;
+}
+
+/**
+ * Query-range data for a single panel of a v2 (Perses-spec) public dashboard, addressed by its
+ * key in `spec.panels`.
+ *
+ * The generated `getPublicDashboardPanelQueryRangeV2` fetcher omits the `startTime`/`endTime`
+ * query params the endpoint reads, so we call the shared generated axios instance directly and
+ * append them. Times are epoch milliseconds; the backend honours them only when the publisher
+ * enabled the dashboard's time range, otherwise it serves the stored default range.
+ */
+export const getPublicDashboardPanelQueryRange = (
+	{ id, key, startTime, endTime }: GetPublicDashboardPanelQueryRangeProps,
+	signal?: AbortSignal,
+): Promise<GetPublicDashboardPanelQueryRangeV2200> =>
+	GeneratedAPIInstance<GetPublicDashboardPanelQueryRangeV2200>({
+		url: `/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
+		method: 'GET',
+		params: { startTime, endTime },
+		signal,
+	});

frontend/src/constants/reactQueryKeys.ts

@@ -7,6 +7,7 @@ export const REACT_QUERY_KEY = {
 	AUTO_REFRESH_QUERY: 'AUTO_REFRESH_QUERY',
 
 	GET_PUBLIC_DASHBOARD: 'GET_PUBLIC_DASHBOARD',
+	GET_PUBLIC_DASHBOARD_RESOLVED: 'GET_PUBLIC_DASHBOARD_RESOLVED',
 	GET_PUBLIC_DASHBOARD_META: 'GET_PUBLIC_DASHBOARD_META',
 	GET_PUBLIC_DASHBOARD_WIDGET_DATA: 'GET_PUBLIC_DASHBOARD_WIDGET_DATA',
 	GET_ALL_LICENCES: 'GET_ALL_LICENCES',

frontend/src/constants/routes.ts

@@ -89,7 +89,6 @@ const ROUTES = {
 	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
-	LLM_OBSERVABILITY_ATTRIBUTE_MAPPING: '/llm-observability/attribute-mapping',
 	LLM_OBSERVABILITY_BASE: '/llm-observability',
 	LLM_OBSERVABILITY_OVERVIEW: '/llm-observability/overview',
 	LLM_OBSERVABILITY_CONFIGURATION: '/llm-observability/configuration',

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss

@@ -1,13 +0,0 @@
-.llmObservabilityAttributeMapping {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--spacing-12);
-}
-
-.tableEmpty {
-	padding: var(--spacing-12) var(--spacing-6);
-	text-align: center;
-	color: var(--l3-foreground);
-	font-size: var(--periscope-font-size-base);
-}

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -1,26 +0,0 @@
-import AttributeMappingHeader from './components/AttributeMappingHeader';
-import styles from './LLMObservabilityAttributeMapping.module.scss';
-
-const noop = (): void => undefined;
-
-function LLMObservabilityAttributeMapping(): JSX.Element {
-	return (
-		<div
-			className={styles.llmObservabilityAttributeMapping}
-			data-testid="llm-observability-attribute-mapping-page"
-		>
-			<AttributeMappingHeader
-				isDirty={false}
-				isSaving={false}
-				onDiscard={noop}
-				onSave={noop}
-			/>
-
-			<div className={styles.tableEmpty} data-testid="attribute-mapping-empty">
-				No mapping groups configured yet.
-			</div>
-		</div>
-	);
-}
-
-export default LLMObservabilityAttributeMapping;

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.module.scss

@@ -1,34 +0,0 @@
-.pageHeader {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.pageHeaderTitle {
-	display: flex;
-	flex-direction: column;
-}
-
-.title {
-	margin: 0;
-	font-size: var(--periscope-font-size-large);
-	font-weight: var(--font-weight-semibold);
-}
-
-.description {
-	margin: var(--spacing-2) 0 0;
-	font-size: var(--periscope-font-size-base);
-	color: var(--l3-foreground);
-}
-
-.pageHeaderActions {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.unsavedChanges {
-	font-size: var(--periscope-font-size-base);
-	color: var(--accent-amber);
-}

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx

@@ -1,56 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-
-import styles from './AttributeMappingHeader.module.scss';
-
-interface AttributeMappingHeaderProps {
-	isDirty: boolean;
-	isSaving: boolean;
-	onDiscard: () => void;
-	onSave: () => void;
-}
-
-function AttributeMappingHeader({
-	isDirty,
-	isSaving,
-	onDiscard,
-	onSave,
-}: AttributeMappingHeaderProps): JSX.Element {
-	return (
-		<header className={styles.pageHeader}>
-			<div className={styles.pageHeaderTitle}>
-				<h1 className={styles.title}>Attribute Mapping</h1>
-				<p className={styles.description}>
-					Configure source-to-target attribute remapping for LLM traces
-				</p>
-			</div>
-			<div className={styles.pageHeaderActions}>
-				{isDirty && (
-					<span className={styles.unsavedChanges} data-testid="unsaved-changes">
-						Unsaved changes
-					</span>
-				)}
-				<Button
-					variant="outlined"
-					color="secondary"
-					onClick={onDiscard}
-					disabled={!isDirty || isSaving}
-					testId="discard-changes-btn"
-				>
-					Discard
-				</Button>
-				<Button
-					variant="solid"
-					color="primary"
-					onClick={onSave}
-					loading={isSaving}
-					disabled={!isDirty || isSaving}
-					testId="save-changes-btn"
-				>
-					{isSaving ? 'Saving…' : 'Save changes'}
-				</Button>
-			</div>
-		</header>
-	);
-}
-
-export default AttributeMappingHeader;

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

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

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

@@ -39,9 +39,6 @@ describe('LLMObservability (integration)', () => {
 		expect(
 			screen.getByRole('tab', { name: 'Model pricing' }),
 		).toBeInTheDocument();
-		expect(
-			screen.getByRole('tab', { name: 'Attribute Mapping' }),
-		).toBeInTheDocument();
 	});
 
 	it('navigates to the configuration route when the Model pricing tab is clicked', async () => {
@@ -57,29 +54,6 @@ describe('LLMObservability (integration)', () => {
 		);
 	});
 
-	it('navigates to the attribute mapping route when that tab is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
-		});
-
-		await user.click(screen.getByRole('tab', { name: 'Attribute Mapping' }));
-
-		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
-		);
-	});
-
-	it('renders the attribute mapping page on the attribute mapping route', () => {
-		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
-		});
-
-		expect(
-			screen.getByTestId('llm-observability-attribute-mapping-page'),
-		).toBeInTheDocument();
-	});
-
 	it('renders the model-pricing page on the configuration route', async () => {
 		setupList();
 		render(<LLMObservability />, undefined, {

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

@@ -4,13 +4,11 @@ import { type TabItemProps } from '@signozhq/ui/tabs';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 
-import LLMObservabilityAttributeMapping from '../AttributeMapping/LLMObservabilityAttributeMapping';
 import Overview from '../Overview/Overview';
 import LLMObservabilityModelPricing from '../Settings/ModelPricing/LLMObservabilityModelPricing';
 
 const OVERVIEW_KEY = ROUTES.LLM_OBSERVABILITY_OVERVIEW;
 const CONFIGURATION_KEY = ROUTES.LLM_OBSERVABILITY_CONFIGURATION;
-const ATTRIBUTE_MAPPING_KEY = ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING;
 
 interface UseLLMObservabilityTabsResult {
 	items: TabItemProps[];
@@ -26,12 +24,9 @@ export function useLLMObservabilityTabs(): UseLLMObservabilityTabsResult {
 	const { pathname } = useLocation();
 	const { safeNavigate } = useSafeNavigate();
 
-	let activeTab: string = OVERVIEW_KEY;
-	if (pathname.startsWith(CONFIGURATION_KEY)) {
-		activeTab = CONFIGURATION_KEY;
-	} else if (pathname.startsWith(ATTRIBUTE_MAPPING_KEY)) {
-		activeTab = ATTRIBUTE_MAPPING_KEY;
-	}
+	const activeTab = pathname.startsWith(CONFIGURATION_KEY)
+		? CONFIGURATION_KEY
+		: OVERVIEW_KEY;
 
 	const onTabChange = useCallback(
 		(key: string): void => {
@@ -51,11 +46,6 @@ export function useLLMObservabilityTabs(): UseLLMObservabilityTabsResult {
 			label: 'Model pricing',
 			children: <LLMObservabilityModelPricing />,
 		},
-		{
-			key: ATTRIBUTE_MAPPING_KEY,
-			label: 'Attribute Mapping',
-			children: <LLMObservabilityAttributeMapping />,
-		},
 	];
 
 	return { items, activeTab, onTabChange };

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

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

frontend/src/hooks/dashboard/__test__/useGetResolvedPublicDashboard.test.tsx

@@ -0,0 +1,94 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { getPublicDashboardDataV2 } from 'api/generated/services/dashboard';
+import getPublicDashboardDataAPI from 'api/dashboard/public/getPublicDashboardData';
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import {
+	PublicDashboardSchema,
+	useGetResolvedPublicDashboard,
+} from '../useGetResolvedPublicDashboard';
+
+jest.mock('api/generated/services/dashboard', () => ({
+	getPublicDashboardDataV2: jest.fn(),
+}));
+jest.mock('api/dashboard/public/getPublicDashboardData', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockV2 = getPublicDashboardDataV2 as jest.Mock;
+const mockV1 = getPublicDashboardDataAPI as jest.Mock;
+
+const wrapper = ({ children }: { children: ReactNode }): JSX.Element => {
+	const client = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+};
+
+// A schema mismatch on the v2 endpoint surfaces as an AxiosError with HTTP 501 and this
+// error code; anything else must NOT trigger the v1 fallback.
+const schemaMismatchError = {
+	isAxiosError: true,
+	response: {
+		status: 501,
+		data: { error: { code: 'dashboard_invalid_data', message: 'not in v6' } },
+	},
+};
+
+describe('useGetResolvedPublicDashboard', () => {
+	beforeEach(() => {
+		mockV2.mockReset();
+		mockV1.mockReset();
+	});
+
+	it('returns the v2 model when the v2 endpoint succeeds and never calls v1', async () => {
+		mockV2.mockResolvedValue({ status: 'success', data: { dashboard: {} } });
+
+		const { result } = renderHook(() => useGetResolvedPublicDashboard('id-1'), {
+			wrapper,
+		});
+
+		await waitFor(() => expect(result.current.isSuccess).toBe(true));
+		expect(result.current.data?.schema).toBe(PublicDashboardSchema.V2);
+		expect(mockV2).toHaveBeenCalledWith({ id: 'id-1' });
+		expect(mockV1).not.toHaveBeenCalled();
+	});
+
+	it('falls back to v1 when the v2 endpoint reports a schema mismatch', async () => {
+		mockV2.mockRejectedValue(schemaMismatchError);
+		mockV1.mockResolvedValue({
+			httpStatusCode: 200,
+			data: { dashboard: { data: { title: 'v1' } } },
+		});
+
+		const { result } = renderHook(() => useGetResolvedPublicDashboard('id-2'), {
+			wrapper,
+		});
+
+		await waitFor(() => expect(result.current.isSuccess).toBe(true));
+		expect(result.current.data?.schema).toBe(PublicDashboardSchema.V1);
+		expect(mockV1).toHaveBeenCalledWith({ id: 'id-2' });
+	});
+
+	it('surfaces a non-schema-mismatch v2 error without falling back to v1', async () => {
+		mockV2.mockRejectedValue({
+			isAxiosError: true,
+			response: { status: 500, data: { error: { code: 'internal' } } },
+		});
+
+		const { result } = renderHook(() => useGetResolvedPublicDashboard('id-3'), {
+			wrapper,
+		});
+
+		await waitFor(() => expect(result.current.isError).toBe(true));
+		expect(mockV1).not.toHaveBeenCalled();
+	});
+
+	it('does not fetch without an id', () => {
+		renderHook(() => useGetResolvedPublicDashboard(''), { wrapper });
+		expect(mockV2).not.toHaveBeenCalled();
+		expect(mockV1).not.toHaveBeenCalled();
+	});
+});

frontend/src/hooks/dashboard/useGetResolvedPublicDashboard.ts

@@ -0,0 +1,75 @@
+import { getPublicDashboardDataV2 } from 'api/generated/services/dashboard';
+import { DashboardtypesGettablePublicDashboardDataV2DTO } from 'api/generated/services/sigNoz.schemas';
+import getPublicDashboardDataAPI from 'api/dashboard/public/getPublicDashboardData';
+import { AxiosError, isAxiosError } from 'axios';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryResult } from 'react-query';
+import { ErrorV2Resp } from 'types/api';
+import { PublicDashboardDataProps } from 'types/api/dashboard/public/get';
+
+/**
+ * A public dashboard is either the legacy v1 storable model or the v2 Perses spec.
+ * Anonymous viewers have no feature flags, so we can't branch on `use_dashboard_v2` —
+ * we discriminate on the schema the backend actually serves.
+ */
+export enum PublicDashboardSchema {
+	V1 = 'v1',
+	V2 = 'v2',
+}
+
+export type ResolvedPublicDashboard =
+	| {
+			schema: PublicDashboardSchema.V2;
+			data: DashboardtypesGettablePublicDashboardDataV2DTO;
+	  }
+	| { schema: PublicDashboardSchema.V1; data: PublicDashboardDataProps };
+
+/**
+ * The v2 model endpoint rejects any dashboard not in the current Perses (v6) schema with
+ * HTTP 501 and this error code. It is the signal that the dashboard was authored in the v1
+ * editor and must be served by the v1 endpoint instead.
+ */
+const V2_SCHEMA_MISMATCH_CODE = 'dashboard_invalid_data';
+
+function isV2SchemaMismatch(error: unknown): boolean {
+	if (!isAxiosError(error)) {
+		return false;
+	}
+	const { response } = error as AxiosError<ErrorV2Resp>;
+	return response?.data?.error?.code === V2_SCHEMA_MISMATCH_CODE;
+}
+
+/**
+ * Resolve the correct model for a public dashboard given only its share id.
+ *
+ * We probe v2 first, then fall back to v1 — never the other way around. The v2 endpoint
+ * strictly rejects non-v6 rows, so its "schema mismatch" error is a clean v1 signal. The v1
+ * endpoint, in contrast, returns 200 for a v2 dashboard with its query internals UN-redacted,
+ * so a v1-first probe would both fail to discriminate and leak queries to anonymous viewers.
+ *
+ * Any v2 error that isn't a schema mismatch (network, license, corrupt data) is re-thrown so
+ * it surfaces as an error, rather than being masked by an incorrect v1 render.
+ */
+async function resolvePublicDashboard(
+	id: string,
+): Promise<ResolvedPublicDashboard> {
+	try {
+		const v2 = await getPublicDashboardDataV2({ id });
+		return { schema: PublicDashboardSchema.V2, data: v2.data };
+	} catch (error) {
+		if (!isV2SchemaMismatch(error)) {
+			throw error;
+		}
+		const v1 = await getPublicDashboardDataAPI({ id });
+		return { schema: PublicDashboardSchema.V1, data: v1.data };
+	}
+}
+
+export const useGetResolvedPublicDashboard = (
+	id: string,
+): UseQueryResult<ResolvedPublicDashboard, Error> =>
+	useQuery<ResolvedPublicDashboard, Error>({
+		queryFn: () => resolvePublicDashboard(id),
+		queryKey: [REACT_QUERY_KEY.GET_PUBLIC_DASHBOARD_RESOLVED, id],
+		enabled: !!id,
+	});

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

@@ -20,7 +20,10 @@ export interface UseGetQueryRangeV5Args {
  * The retry callback gets the raw AxiosError this path rejects with (not yet normalized to
  * APIError — that happens later at the display boundary), so inspect it at the axios level.
  */
-function retryUnlessClientError(failureCount: number, error: Error): boolean {
+export function retryUnlessClientError(
+	failureCount: number,
+	error: Error,
+): boolean {
 	if (isAxiosError(error)) {
 		if (error.code === 'ERR_CANCELED') {
 			return false;

frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicDashboardV2.module.scss

@@ -0,0 +1,70 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	background: var(--l0-background);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--l2-border);
+}
+
+.headerLeft {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	min-width: 0;
+}
+
+.brand {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.brandLogo {
+	height: 24px;
+	width: 24px;
+}
+
+.brandName {
+	font-weight: 600;
+}
+
+.title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--text-vanilla-400);
+}
+
+.headerRight {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.content {
+	flex: 1;
+	overflow-y: auto;
+	padding: 8px;
+}
+
+.section {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-bottom: 8px;
+}
+
+.sectionTitle {
+	padding: 8px 4px 0;
+	font-weight: 600;
+	color: var(--text-vanilla-400);
+}

frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicDashboardV2.tsx

@@ -0,0 +1,154 @@
+import type { DashboardtypesGettablePublicDashboardDataV2DTO } from 'api/generated/services/sigNoz.schemas';
+import { Typography } from '@signozhq/ui/typography';
+import AutoRefresh from 'container/PublicDashboardContainer/AutoRefresh';
+import { refreshIntervalOptions } from 'container/TopNav/AutoRefreshV2/constants';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+import type {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import GetMinMax from 'lib/getMinMax';
+import { layoutsToSections } from 'pages/DashboardPageV2/DashboardContainer/utils';
+import { useMemo, useState } from 'react';
+import { useInterval } from 'react-use';
+import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+
+import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
+
+import PublicSectionGrid from './PublicSectionGrid/PublicSectionGrid';
+import { getStartTimeAndEndTimeFromTimeRange } from './utils';
+import styles from './PublicDashboardV2.module.scss';
+
+interface PublicDashboardV2Props {
+	publicDashboardId: string;
+	data: DashboardtypesGettablePublicDashboardDataV2DTO;
+}
+
+/**
+ * Read-only viewer for a v2 (Perses-spec) public dashboard. Renders the spec's sections and
+ * panels by reusing the authenticated V2 panel renderers, fetching data through the anonymous
+ * public endpoint. Dashboard variables are not rendered — the public endpoint does not
+ * substitute them (see [[reference_public_dashboard_viewer]]).
+ */
+function PublicDashboardV2({
+	publicDashboardId,
+	data,
+}: PublicDashboardV2Props): JSX.Element {
+	const { dashboard, publicDashboard } = data;
+
+	const sections = useMemo(
+		() => layoutsToSections(dashboard?.spec?.layouts, dashboard?.spec?.panels),
+		[dashboard?.spec?.layouts, dashboard?.spec?.panels],
+	);
+
+	const [selectedTimeRangeLabel, setSelectedTimeRangeLabel] = useState<string>(
+		publicDashboard?.defaultTimeRange || DEFAULT_TIME_RANGE,
+	);
+	const [selectedTimeRange, setSelectedTimeRange] = useState(() =>
+		getStartTimeAndEndTimeFromTimeRange(
+			publicDashboard?.defaultTimeRange || DEFAULT_TIME_RANGE,
+		),
+	);
+
+	const isTimeRangeEnabled = publicDashboard?.timeRangeEnabled || false;
+
+	const handleTimeChange = (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	): void => {
+		if (dateTimeRange) {
+			setSelectedTimeRange({
+				startTime: Math.floor(dateTimeRange[0] / 1000),
+				endTime: Math.floor(dateTimeRange[1] / 1000),
+			});
+		} else if (interval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(interval);
+			setSelectedTimeRange({
+				startTime: Math.floor(minTime / NANO_SECOND_MULTIPLIER / 1000),
+				endTime: Math.floor(maxTime / NANO_SECOND_MULTIPLIER / 1000),
+			});
+		}
+		setSelectedTimeRangeLabel(interval as string);
+	};
+
+	const [refreshIntervalKey, setRefreshIntervalKey] = useState<string>('off');
+
+	// Auto-refresh only makes sense for a rolling relative range, not a fixed custom window.
+	const isAutoRefreshPaused = selectedTimeRangeLabel === 'custom';
+	const refreshIntervalMs = useMemo(
+		() =>
+			refreshIntervalOptions.find((option) => option.key === refreshIntervalKey)
+				?.value || 0,
+		[refreshIntervalKey],
+	);
+
+	// Re-run the time-change handler with the current relative range so the window advances.
+	useInterval(
+		() => handleTimeChange(selectedTimeRangeLabel as Time),
+		isAutoRefreshPaused || refreshIntervalMs === 0 ? null : refreshIntervalMs,
+	);
+
+	const startMs = selectedTimeRange.startTime * 1000;
+	const endMs = selectedTimeRange.endTime * 1000;
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.header}>
+				<div className={styles.headerLeft}>
+					<div className={styles.brand}>
+						<img src={signozBrandLogoUrl} alt="SigNoz" className={styles.brandLogo} />
+						<Typography className={styles.brandName}>SigNoz</Typography>
+					</div>
+					<Typography.Text className={styles.title}>
+						{dashboard?.spec?.display?.name}
+					</Typography.Text>
+				</div>
+
+				{isTimeRangeEnabled && (
+					<div className={styles.headerRight}>
+						<AutoRefresh
+							value={refreshIntervalKey}
+							disabled={isAutoRefreshPaused}
+							onChange={setRefreshIntervalKey}
+						/>
+						<DateTimeSelectionV2
+							showAutoRefresh={false}
+							showRefreshText={false}
+							hideShareModal
+							onTimeChange={handleTimeChange}
+							defaultRelativeTime={publicDashboard?.defaultTimeRange as Time}
+							isModalTimeSelection
+							modalSelectedInterval={selectedTimeRangeLabel as Time}
+							disableUrlSync
+							showRecentlyUsed={false}
+							modalInitialStartTime={startMs}
+							modalInitialEndTime={endMs}
+						/>
+					</div>
+				)}
+			</div>
+
+			<div className={styles.content}>
+				{sections.map((section) => (
+					<section key={section.id} className={styles.section}>
+						{section.title && (
+							<Typography.Text className={styles.sectionTitle}>
+								{section.title}
+							</Typography.Text>
+						)}
+						<PublicSectionGrid
+							items={section.items}
+							publicDashboardId={publicDashboardId}
+							startMs={startMs}
+							endMs={endMs}
+							isVisible
+						/>
+					</section>
+				))}
+			</div>
+		</div>
+	);
+}
+
+export default PublicDashboardV2;

frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicPanel/PublicPanel.module.scss

@@ -0,0 +1,10 @@
+.panel {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+	overflow: hidden;
+}

frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicPanel/PublicPanel.tsx

@@ -0,0 +1,89 @@
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import PanelBody from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
+import PanelHeader from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
+import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+
+import { usePublicPanelQuery } from '../hooks/usePublicPanelQuery';
+import styles from './PublicPanel.module.scss';
+
+interface PublicPanelProps {
+	panel: DashboardtypesPanelDTO;
+	/** Panel key in `spec.panels` — addresses the panel on the public endpoint. */
+	panelKey: string;
+	publicDashboardId: string;
+	/** Epoch milliseconds. */
+	startMs: number;
+	/** Epoch milliseconds. */
+	endMs: number;
+	/** True once the panel is on screen — gates the fetch. */
+	isVisible?: boolean;
+}
+
+// Public dashboards have no cross-panel cursor sync and no drill-down/interactions.
+const NO_OP = (): void => {};
+const PUBLIC_DASHBOARD_PREFERENCE: DashboardPreference = {
+	syncMode: DashboardCursorSync.None,
+};
+
+/**
+ * Read-only render of a single v2 public dashboard panel. Reuses the authenticated V2 header
+ * and body renderers, but fetches through the anonymous public endpoint and disables every
+ * editor/interaction affordance (actions menu, drag-select, drill-down).
+ */
+function PublicPanel({
+	panel,
+	panelKey,
+	publicDashboardId,
+	startMs,
+	endMs,
+	isVisible,
+}: PublicPanelProps): JSX.Element | null {
+	const panelDefinition = getPanelDefinition(panel.spec.plugin.kind);
+
+	const { data, isFetching, isPreviousData, error, refetch } =
+		usePublicPanelQuery({
+			panel,
+			panelKey,
+			publicDashboardId,
+			startMs,
+			endMs,
+			// Lazy: fetch only once on screen and a renderer exists for the kind.
+			enabled: !!panelDefinition && isVisible !== false,
+		});
+
+	// Unsupported panel kind — render nothing rather than a broken cell.
+	if (!panelDefinition) {
+		return null;
+	}
+
+	return (
+		<div className={styles.panel} data-panel-root={panelKey}>
+			<PanelHeader
+				panelId={panelKey}
+				panel={panel}
+				data={data}
+				isFetching={isFetching}
+				error={error}
+				warning={data.response?.data?.warning}
+				hideActions
+			/>
+			<PanelBody
+				panelDefinition={panelDefinition}
+				panel={panel}
+				panelId={panelKey}
+				data={data}
+				isFetching={isFetching}
+				isPreviousData={isPreviousData}
+				error={error}
+				refetch={refetch}
+				onDragSelect={NO_OP}
+				dashboardPreference={PUBLIC_DASHBOARD_PREFERENCE}
+				enableDrillDown={false}
+			/>
+		</div>
+	);
+}
+
+export default PublicPanel;

frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicPanel/__tests__/PublicPanel.test.tsx

@@ -0,0 +1,125 @@
+import { render, screen } from '@testing-library/react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { usePublicPanelQuery } from '../../hooks/usePublicPanelQuery';
+import PublicPanel from '../PublicPanel';
+
+jest.mock('../../hooks/usePublicPanelQuery', () => ({
+	usePublicPanelQuery: jest.fn(),
+}));
+
+// Stub the reused V2 renderers so the test targets PublicPanel's own wiring, not uPlot/timezone.
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader',
+	() => ({
+		__esModule: true,
+		default: ({ hideActions }: { hideActions?: boolean }): JSX.Element => (
+			<div data-testid="panel-header" data-hide-actions={String(!!hideActions)} />
+		),
+	}),
+);
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody',
+	() => ({
+		__esModule: true,
+		default: ({
+			enableDrillDown,
+			panelId,
+		}: {
+			enableDrillDown?: boolean;
+			panelId: string;
+		}): JSX.Element => (
+			<div
+				data-testid="panel-body"
+				data-drilldown={String(!!enableDrillDown)}
+				data-panel-id={panelId}
+			/>
+		),
+	}),
+);
+
+const mockQuery = usePublicPanelQuery as jest.Mock;
+
+const queryResult = {
+	data: { response: undefined, requestPayload: undefined, legendMap: {} },
+	isLoading: false,
+	isFetching: false,
+	isPreviousData: false,
+	error: null,
+	refetch: jest.fn(),
+	cancelQuery: jest.fn(),
+	pagination: undefined,
+};
+
+const timeseriesPanel = {
+	kind: 'Panel',
+	spec: {
+		display: { name: 'panel-1' },
+		plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+		queries: [],
+	},
+} as unknown as DashboardtypesPanelDTO;
+
+const commonProps = {
+	panelKey: 'p1',
+	publicDashboardId: 'pub-1',
+	startMs: 1000,
+	endMs: 2000,
+};
+
+describe('PublicPanel', () => {
+	beforeEach(() => {
+		mockQuery.mockReset();
+		mockQuery.mockReturnValue(queryResult);
+	});
+
+	it('renders the reused header/body read-only (hideActions, no drill-down)', () => {
+		render(<PublicPanel panel={timeseriesPanel} {...commonProps} />);
+
+		expect(screen.getByTestId('panel-header')).toHaveAttribute(
+			'data-hide-actions',
+			'true',
+		);
+		const body = screen.getByTestId('panel-body');
+		expect(body).toHaveAttribute('data-drilldown', 'false');
+		expect(body).toHaveAttribute('data-panel-id', 'p1');
+	});
+
+	it('fetches by panel key and time', () => {
+		render(<PublicPanel panel={timeseriesPanel} {...commonProps} />);
+		expect(mockQuery).toHaveBeenCalledWith(
+			expect.objectContaining({
+				panelKey: 'p1',
+				publicDashboardId: 'pub-1',
+				startMs: 1000,
+				endMs: 2000,
+			}),
+		);
+	});
+
+	it('gates the fetch when off screen', () => {
+		render(
+			<PublicPanel panel={timeseriesPanel} {...commonProps} isVisible={false} />,
+		);
+		expect(mockQuery).toHaveBeenCalledWith(
+			expect.objectContaining({ enabled: false }),
+		);
+	});
+
+	it('renders nothing for an unsupported panel kind', () => {
+		const unknownPanel = {
+			kind: 'Panel',
+			spec: {
+				display: { name: 'x' },
+				plugin: { kind: 'signoz/UnknownPanel', spec: {} },
+				queries: [],
+			},
+		} as unknown as DashboardtypesPanelDTO;
+
+		const { container } = render(
+			<PublicPanel panel={unknownPanel} {...commonProps} />,
+		);
+		expect(container).toBeEmptyDOMElement();
+		expect(screen.queryByTestId('panel-body')).not.toBeInTheDocument();
+	});
+});

frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicSectionGrid/PublicSectionGrid.tsx

@@ -0,0 +1,71 @@
+import type { GridItem } from 'pages/DashboardPageV2/DashboardContainer/utils';
+import GridLayout, { type Layout, WidthProvider } from 'react-grid-layout';
+
+import PublicPanel from '../PublicPanel/PublicPanel';
+
+const ResponsiveGridLayout = WidthProvider(GridLayout);
+
+interface PublicSectionGridProps {
+	items: GridItem[];
+	publicDashboardId: string;
+	/** Epoch milliseconds. */
+	startMs: number;
+	/** Epoch milliseconds. */
+	endMs: number;
+	/** True once the section is on screen — forwarded to gate panel fetches. */
+	isVisible?: boolean;
+}
+
+/**
+ * Read-only react-grid-layout for one section of a v2 public dashboard. The layout mirrors the
+ * authenticated `SectionGrid` (12 cols, 45px rows) but is fixed — no drag, resize, or
+ * persistence.
+ */
+function PublicSectionGrid({
+	items,
+	publicDashboardId,
+	startMs,
+	endMs,
+	isVisible,
+}: PublicSectionGridProps): JSX.Element {
+	const layout: Layout[] = items.map((item) => ({
+		i: item.id,
+		x: item.x,
+		y: item.y,
+		w: item.width,
+		h: item.height,
+		static: true,
+	}));
+
+	return (
+		<ResponsiveGridLayout
+			cols={12}
+			rowHeight={45}
+			autoSize
+			useCSSTransforms
+			layout={layout}
+			isDraggable={false}
+			isResizable={false}
+			margin={[8, 8]}
+		>
+			{items.map((item) => (
+				// A layout item can reference a panel id no longer in the panels map
+				// (orphan) — render an empty cell rather than a panel with no content.
+				<div key={item.id}>
+					{item.panel && (
+						<PublicPanel
+							panel={item.panel}
+							panelKey={item.id}
+							publicDashboardId={publicDashboardId}
+							startMs={startMs}
+							endMs={endMs}
+							isVisible={isVisible}
+						/>
+					)}
+				</div>
+			))}
+		</ResponsiveGridLayout>
+	);
+}
+
+export default PublicSectionGrid;

frontend/src/pages/PublicDashboard/PublicDashboardV2/__tests__/PublicDashboardV2.test.tsx

@@ -0,0 +1,101 @@
+import { render, screen } from '@testing-library/react';
+import type { DashboardtypesGettablePublicDashboardDataV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import PublicDashboardV2 from '../PublicDashboardV2';
+
+const mockGrid = jest.fn();
+
+jest.mock('../PublicSectionGrid/PublicSectionGrid', () => ({
+	__esModule: true,
+	default: (props: unknown): JSX.Element => {
+		mockGrid(props);
+		return <div data-testid="public-section-grid" />;
+	},
+}));
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="datetime-selection" />,
+}));
+jest.mock('container/PublicDashboardContainer/AutoRefresh', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="auto-refresh" />,
+}));
+
+function buildData(
+	timeRangeEnabled: boolean,
+): DashboardtypesGettablePublicDashboardDataV2DTO {
+	return {
+		dashboard: {
+			schemaVersion: 'v6',
+			spec: {
+				display: { name: 'My V2 Dashboard' },
+				layouts: [
+					{
+						kind: 'Grid',
+						spec: {
+							display: { title: 'Section A' },
+							items: [
+								{
+									x: 0,
+									y: 0,
+									width: 6,
+									height: 6,
+									content: { $ref: '#/spec/panels/p1' },
+								},
+							],
+						},
+					},
+				],
+				panels: {
+					p1: {
+						kind: 'Panel',
+						spec: {
+							display: { name: 'p1' },
+							plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+							queries: [],
+						},
+					},
+				},
+				variables: [],
+			},
+		},
+		publicDashboard: { timeRangeEnabled, defaultTimeRange: '30m' },
+	} as unknown as DashboardtypesGettablePublicDashboardDataV2DTO;
+}
+
+describe('PublicDashboardV2', () => {
+	beforeEach(() => mockGrid.mockReset());
+
+	it('renders the dashboard title, section title, and a grid per section', () => {
+		render(
+			<PublicDashboardV2 publicDashboardId="pub-1" data={buildData(true)} />,
+		);
+
+		expect(screen.getByText('My V2 Dashboard')).toBeInTheDocument();
+		expect(screen.getByText('Section A')).toBeInTheDocument();
+		expect(screen.getByTestId('public-section-grid')).toBeInTheDocument();
+
+		const gridProps = mockGrid.mock.calls[0][0];
+		expect(gridProps.publicDashboardId).toBe('pub-1');
+		expect(gridProps.items).toHaveLength(1);
+		expect(gridProps.items[0].id).toBe('p1');
+		expect(typeof gridProps.startMs).toBe('number');
+		expect(typeof gridProps.endMs).toBe('number');
+		// Times are handed to the endpoint in milliseconds.
+		expect(gridProps.endMs).toBeGreaterThan(gridProps.startMs);
+	});
+
+	it('shows the time controls only when the publisher enabled the time range', () => {
+		const { rerender } = render(
+			<PublicDashboardV2 publicDashboardId="pub-1" data={buildData(true)} />,
+		);
+		expect(screen.getByTestId('datetime-selection')).toBeInTheDocument();
+		expect(screen.getByTestId('auto-refresh')).toBeInTheDocument();
+
+		rerender(
+			<PublicDashboardV2 publicDashboardId="pub-1" data={buildData(false)} />,
+		);
+		expect(screen.queryByTestId('datetime-selection')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('auto-refresh')).not.toBeInTheDocument();
+	});
+});

frontend/src/pages/PublicDashboard/PublicDashboardV2/hooks/__tests__/usePublicPanelQuery.test.tsx

@@ -0,0 +1,105 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { getPublicDashboardPanelQueryRange } from 'api/dashboard/public/getPublicDashboardPanelQueryRange';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import { usePublicPanelQuery } from '../usePublicPanelQuery';
+
+jest.mock('api/dashboard/public/getPublicDashboardPanelQueryRange', () => ({
+	getPublicDashboardPanelQueryRange: jest.fn(),
+}));
+
+const mockFetch = getPublicDashboardPanelQueryRange as jest.Mock;
+
+const wrapper = ({ children }: { children: ReactNode }): JSX.Element => {
+	const client = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+};
+
+// A timeseries panel with a single runnable builder query (non-metrics signal → runnable).
+const panel = {
+	kind: 'Panel',
+	spec: {
+		display: { name: 'panel-1' },
+		plugin: { kind: 'signoz/TimeSeriesPanel', spec: { visualization: {} } },
+		queries: [
+			{
+				kind: 'time_series',
+				spec: {
+					name: 'A',
+					plugin: {
+						kind: 'signoz/BuilderQuery',
+						spec: { name: 'A', signal: 'logs', legend: 'My legend' },
+					},
+				},
+			},
+		],
+	},
+} as unknown as DashboardtypesPanelDTO;
+
+const args = {
+	panel,
+	panelKey: 'panel-1',
+	publicDashboardId: 'pub-1',
+	startMs: 1000,
+	endMs: 2000,
+};
+
+describe('usePublicPanelQuery', () => {
+	beforeEach(() => mockFetch.mockReset());
+
+	it('fetches by panel key + time and exposes the response as PanelQueryData', async () => {
+		mockFetch.mockResolvedValue({
+			status: 'success',
+			data: { type: 'time_series', data: { results: [] } },
+		});
+
+		const { result } = renderHook(() => usePublicPanelQuery(args), { wrapper });
+
+		await waitFor(() => expect(result.current.isFetching).toBe(false));
+
+		expect(mockFetch).toHaveBeenCalledWith(
+			{ id: 'pub-1', key: 'panel-1', startTime: 1000, endTime: 2000 },
+			expect.anything(),
+		);
+		expect(result.current.data.response?.status).toBe('success');
+		expect(result.current.data.legendMap).toStrictEqual({ A: 'My legend' });
+		expect(result.current.data.requestPayload?.start).toBe(1000);
+		expect(result.current.data.requestPayload?.end).toBe(2000);
+		// The public endpoint has no paging support.
+		expect(result.current.pagination).toBeUndefined();
+	});
+
+	it('does not fetch without a public dashboard id', () => {
+		renderHook(() => usePublicPanelQuery({ ...args, publicDashboardId: '' }), {
+			wrapper,
+		});
+		expect(mockFetch).not.toHaveBeenCalled();
+	});
+
+	it('does not fetch when the panel has no runnable queries', () => {
+		const emptyPanel = {
+			kind: 'Panel',
+			spec: {
+				display: { name: 'empty' },
+				plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+				queries: [],
+			},
+		} as unknown as DashboardtypesPanelDTO;
+
+		renderHook(() => usePublicPanelQuery({ ...args, panel: emptyPanel }), {
+			wrapper,
+		});
+		expect(mockFetch).not.toHaveBeenCalled();
+	});
+
+	it('does not fetch when disabled', () => {
+		renderHook(() => usePublicPanelQuery({ ...args, enabled: false }), {
+			wrapper,
+		});
+		expect(mockFetch).not.toHaveBeenCalled();
+	});
+});

frontend/src/pages/PublicDashboard/PublicDashboardV2/hooks/usePublicPanelQuery.ts

@@ -0,0 +1,151 @@
+import { getPublicDashboardPanelQueryRange } from 'api/dashboard/public/getPublicDashboardPanelQueryRange';
+import type {
+	DashboardtypesPanelDTO,
+	GetPublicDashboardPanelQueryRangeV2200,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { retryUnlessClientError } from 'pages/DashboardPageV2/DashboardContainer/hooks/useGetQueryRangeV5';
+import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import {
+	buildQueryRangeRequest,
+	extractLegendMap,
+	hasRunnableQueries,
+} from 'pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest';
+import type {
+	PanelQueryData,
+	PanelPagination,
+} from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import { useCallback, useMemo } from 'react';
+import { useQuery, useQueryClient } from 'react-query';
+
+export interface UsePublicPanelQueryArgs {
+	panel: DashboardtypesPanelDTO;
+	/** Panel key in `spec.panels` — addresses the panel on the public endpoint. */
+	panelKey: string;
+	publicDashboardId: string;
+	/** Epoch milliseconds. */
+	startMs: number;
+	/** Epoch milliseconds. */
+	endMs: number;
+	/** Gate the fetch (default true). */
+	enabled?: boolean;
+}
+
+/**
+ * Mirrors the render contract of `usePanelQuery` (`{ data: PanelQueryData, ... }`) so the V2
+ * panel renderers consume it unchanged — but fetches through the anonymous public endpoint
+ * (by panel key + time) instead of posting an authenticated query body.
+ */
+export interface UsePublicPanelQueryResult {
+	data: PanelQueryData;
+	isLoading: boolean;
+	isFetching: boolean;
+	isPreviousData: boolean;
+	error: Error | null;
+	refetch: () => void;
+	cancelQuery: () => void;
+	/** Always undefined: the public endpoint does not support server-side paging (see #5557). */
+	pagination?: PanelPagination;
+}
+
+/**
+ * Fetches query-range data for one panel of a v2 public dashboard.
+ *
+ * Unlike the authenticated `usePanelQuery`, this cannot POST a composite query — the public
+ * endpoint holds the (redacted) query server-side and accepts only a time window, with no
+ * variable substitution and no pagination. We still build the request DTO locally from the
+ * panel's queries so the renderers get the `requestPayload`/`legendMap` they use for scalar
+ * column naming and legend resolution; it is not sent to the server.
+ */
+export function usePublicPanelQuery({
+	panel,
+	panelKey,
+	publicDashboardId,
+	startMs,
+	endMs,
+	enabled = true,
+}: UsePublicPanelQueryArgs): UsePublicPanelQueryResult {
+	const fullKind = panel.spec.plugin.kind;
+	const panelType =
+		(fullKind && PANEL_KIND_TO_PANEL_TYPE[fullKind]) ?? PANEL_TYPES.TIME_SERIES;
+	const { queries } = panel.spec;
+
+	// `visualization` exists only on variants that declare it; `fillSpans` (TimeSeries/Bar) →
+	// formatOptions.fillGaps.
+	const pluginSpec = panel.spec.plugin.spec;
+	const visualization =
+		pluginSpec && 'visualization' in pluginSpec
+			? pluginSpec.visualization
+			: undefined;
+	const fillGaps = Boolean(
+		visualization && 'fillSpans' in visualization && visualization.fillSpans,
+	);
+
+	// Built for the renderers only (no variables, no pagination) — never sent to the server.
+	const requestPayload = useMemo(
+		() =>
+			buildQueryRangeRequest({
+				queries,
+				panelType,
+				startMs,
+				endMs,
+				fillGaps,
+				variables: {},
+			}),
+		[queries, panelType, startMs, endMs, fillGaps],
+	);
+
+	const legendMap = useMemo(() => extractLegendMap(queries), [queries]);
+	const runnable = useMemo(() => hasRunnableQueries(queries), [queries]);
+
+	// Public payloads redact query bodies, so panels with identical queries would collide on one
+	// cache entry — key on panel identity + time (the only inputs that vary the response).
+	const queryKey = useMemo(
+		() => [
+			REACT_QUERY_KEY.GET_PUBLIC_DASHBOARD_WIDGET_DATA,
+			publicDashboardId,
+			panelKey,
+			startMs,
+			endMs,
+		],
+		[publicDashboardId, panelKey, startMs, endMs],
+	);
+
+	const response = useQuery<GetPublicDashboardPanelQueryRangeV2200, Error>({
+		queryKey,
+		queryFn: ({ signal }) =>
+			getPublicDashboardPanelQueryRange(
+				{
+					id: publicDashboardId,
+					key: panelKey,
+					startTime: startMs,
+					endTime: endMs,
+				},
+				signal,
+			),
+		enabled: enabled && runnable && !!publicDashboardId && !!panelKey,
+		retry: retryUnlessClientError,
+	});
+
+	const data = useMemo<PanelQueryData>(
+		() => ({ response: response.data, requestPayload, legendMap }),
+		[response.data, requestPayload, legendMap],
+	);
+
+	const queryClient = useQueryClient();
+	const cancelQuery = useCallback((): void => {
+		void queryClient.cancelQueries(queryKey);
+	}, [queryClient, queryKey]);
+
+	return {
+		data,
+		isLoading: response.isLoading,
+		isFetching: response.isFetching,
+		isPreviousData: response.isPreviousData,
+		error: response.error ?? null,
+		refetch: response.refetch,
+		cancelQuery,
+		pagination: undefined,
+	};
+}

frontend/src/pages/PublicDashboard/PublicDashboardV2/utils.ts

@@ -0,0 +1,35 @@
+import dayjs from 'dayjs';
+
+const CUSTOM_TIME_REGEX = /^(\d+)([mhdw])$/;
+
+const UNIT_TO_DAYJS = {
+	m: 'minutes',
+	h: 'hours',
+	d: 'days',
+	w: 'weeks',
+} as const;
+
+/**
+ * Resolves a relative range string (`30m`, `6h`, `7d`, `1w`) to a `{ startTime, endTime }`
+ * window in unix seconds, defaulting to the last 30 minutes. Kept in seconds to match the v1
+ * public viewer; converted to milliseconds at the panel-fetch boundary.
+ */
+export function getStartTimeAndEndTimeFromTimeRange(timeRange: string): {
+	startTime: number;
+	endTime: number;
+} {
+	const match = timeRange.match(CUSTOM_TIME_REGEX);
+	if (match) {
+		const timeValue = parseInt(match[1] as string, 10);
+		const unit = UNIT_TO_DAYJS[match[2] as keyof typeof UNIT_TO_DAYJS];
+		return {
+			startTime: dayjs().subtract(timeValue, unit).unix(),
+			endTime: dayjs().unix(),
+		};
+	}
+
+	return {
+		startTime: dayjs().subtract(30, 'minutes').unix(),
+		endTime: dayjs().unix(),
+	};
+}

frontend/src/pages/PublicDashboard/index.tsx

@@ -1,11 +1,15 @@
 import { useParams } from 'react-router-dom';
 import { Typography } from '@signozhq/ui/typography';
-import { useGetPublicDashboardData } from 'hooks/dashboard/useGetPublicDashboardData';
+import {
+	PublicDashboardSchema,
+	useGetResolvedPublicDashboard,
+} from 'hooks/dashboard/useGetResolvedPublicDashboard';
 import { Frown } from '@signozhq/icons';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 
 import PublicDashboardContainer from '../../container/PublicDashboardContainer';
+import PublicDashboardV2 from './PublicDashboardV2/PublicDashboardV2';
 
 import './PublicDashboard.styles.scss';
 
@@ -14,27 +18,28 @@ function PublicDashboardPage(): JSX.Element {
 	const { dashboardId } = useParams<{ dashboardId: string }>();
 
 	const {
-		data: publicDashboardData,
-		isLoading: isLoadingPublicDashboardData,
-		isFetching: isFetchingPublicDashboardData,
-		isError: isErrorPublicDashboardData,
-	} = useGetPublicDashboardData(dashboardId || '');
+		data: resolved,
+		isLoading,
+		isFetching,
+		isError,
+	} = useGetResolvedPublicDashboard(dashboardId || '');
 
-	const isLoading =
-		isLoadingPublicDashboardData || isFetchingPublicDashboardData;
-
-	const isError = isErrorPublicDashboardData;
+	const isBusy = isLoading || isFetching;
 
 	return (
 		<div className="public-dashboard-page">
-			{publicDashboardData && (
+			{resolved?.schema === PublicDashboardSchema.V2 && (
+				<PublicDashboardV2 publicDashboardId={dashboardId} data={resolved.data} />
+			)}
+
+			{resolved?.schema === PublicDashboardSchema.V1 && (
 				<PublicDashboardContainer
 					publicDashboardId={dashboardId}
-					publicDashboardData={publicDashboardData}
+					publicDashboardData={{ httpStatusCode: 200, data: resolved.data }}
 				/>
 			)}
 
-			{isError && !isLoading && (
+			{isError && !isBusy && (
 				<div className="public-dashboard-error-container">
 					<div className="perilin-bg" />
 

frontend/src/utils/permission/index.ts

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