Merge branch 'main' into feat/ai-observability-explorer-tab

frontend/src/AppRoutes/routes.ts

@@ -527,6 +527,13 @@ const routes: AppRoutes[] = [
 		key: 'AI_OBSERVABILITY_OVERVIEW',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.AI_OBSERVABILITY_EXPLORER,
+		exact: true,
+		component: LLMObservabilityPage,
+		key: 'AI_OBSERVABILITY_EXPLORER',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_CONFIGURATION,
 		exact: true,

frontend/src/constants/routes.ts

@@ -92,6 +92,7 @@ const ROUTES = {
 	AI_OBSERVABILITY_ATTRIBUTE_MAPPING: '/ai-observability/attribute-mapping',
 	AI_OBSERVABILITY_BASE: '/ai-observability',
 	AI_OBSERVABILITY_OVERVIEW: '/ai-observability/overview',
+	AI_OBSERVABILITY_EXPLORER: '/ai-observability/explorer',
 	AI_OBSERVABILITY_CONFIGURATION: '/ai-observability/configuration',
 } as const;
 

frontend/src/container/LLMObservability/Explorer/Explorer.module.scss

@@ -0,0 +1,11 @@
+.explorer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	padding: var(--spacing-2) var(--spacing-0);
+}
+
+.placeholder {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -0,0 +1,14 @@
+import styles from './Explorer.module.scss';
+
+// Shell for the AI Observability Explorer tab. Owns the
+// /ai-observability/explorer route and is intentionally empty for now: the
+// query builder + results surface land in a follow-up.
+function Explorer(): JSX.Element {
+	return (
+		<div className={styles.explorer} data-testid="llm-observability-explorer">
+			<div className={styles.placeholder}>Explorer coming soon.</div>
+		</div>
+	);
+}
+
+export default Explorer;

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

@@ -44,6 +44,7 @@ describe('LLMObservability (integration)', () => {
 		expect(screen.getByTestId('llm-observability-overview')).toBeInTheDocument();
 		expect(screen.getByTestId('llm-overview-dashboard')).toBeInTheDocument();
 		expect(screen.getByRole('tab', { name: 'Overview' })).toBeInTheDocument();
+		expect(screen.getByRole('tab', { name: 'Explorer' })).toBeInTheDocument();
 		expect(
 			screen.getByRole('tab', { name: 'Model pricing' }),
 		).toBeInTheDocument();
@@ -78,6 +79,27 @@ describe('LLMObservability (integration)', () => {
 		);
 	});
 
+	it('navigates to the explorer route when the Explorer tab is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<LLMObservability />, undefined, {
+			initialRoute: ROUTES.AI_OBSERVABILITY_OVERVIEW,
+		});
+
+		await user.click(screen.getByRole('tab', { name: 'Explorer' }));
+
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			ROUTES.AI_OBSERVABILITY_EXPLORER,
+		);
+	});
+
+	it('renders the explorer panel on the explorer route', () => {
+		render(<LLMObservability />, undefined, {
+			initialRoute: ROUTES.AI_OBSERVABILITY_EXPLORER,
+		});
+
+		expect(screen.getByTestId('llm-observability-explorer')).toBeInTheDocument();
+	});
+
 	it('renders the attribute mapping page on the attribute mapping route', () => {
 		render(<LLMObservability />, undefined, {
 			initialRoute: ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,

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

@@ -5,10 +5,12 @@ import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 
 import LLMObservabilityAttributeMapping from '../AttributeMapping/LLMObservabilityAttributeMapping';
+import Explorer from '../Explorer/Explorer';
 import Overview from '../Overview/Overview';
 import LLMObservabilityModelPricing from '../Settings/ModelPricing/LLMObservabilityModelPricing';
 
 const OVERVIEW_KEY = ROUTES.AI_OBSERVABILITY_OVERVIEW;
+const EXPLORER_KEY = ROUTES.AI_OBSERVABILITY_EXPLORER;
 const CONFIGURATION_KEY = ROUTES.AI_OBSERVABILITY_CONFIGURATION;
 const ATTRIBUTE_MAPPING_KEY = ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING;
 
@@ -31,6 +33,8 @@ export function useLLMObservabilityTabs(): UseLLMObservabilityTabsResult {
 		activeTab = CONFIGURATION_KEY;
 	} else if (pathname.startsWith(ATTRIBUTE_MAPPING_KEY)) {
 		activeTab = ATTRIBUTE_MAPPING_KEY;
+	} else if (pathname.startsWith(EXPLORER_KEY)) {
+		activeTab = EXPLORER_KEY;
 	}
 
 	const onTabChange = useCallback(
@@ -46,6 +50,11 @@ export function useLLMObservabilityTabs(): UseLLMObservabilityTabsResult {
 			label: 'Overview',
 			children: <Overview />,
 		},
+		{
+			key: EXPLORER_KEY,
+			label: 'Explorer',
+			children: <Explorer />,
+		},
 		{
 			key: CONFIGURATION_KEY,
 			label: 'Model pricing',

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

@@ -206,6 +206,7 @@ export const routesToSkip = [
 	ROUTES.AI_OBSERVABILITY_OVERVIEW,
 	ROUTES.AI_OBSERVABILITY_CONFIGURATION,
 	ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,
+	ROUTES.AI_OBSERVABILITY_EXPLORER,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/utils/permission/index.ts

@@ -151,6 +151,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	AI_OBSERVABILITY_ATTRIBUTE_MAPPING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_OBSERVABILITY_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_OBSERVABILITY_OVERVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
+	AI_OBSERVABILITY_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_OBSERVABILITY_CONFIGURATION: ['ADMIN', 'EDITOR', 'VIEWER'],
 };