coder · jakehwll · Nov 12, 2025 · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -2716,6 +2716,16 @@ class ExperimentalApiMethods {
 			setTimeout(() => res(), 500);
 		});
 	};
+
+	getAIBridgeInterceptions = async (options: SearchParamOptions) => {
+		const url = getURLWithSearchParams(
+			"/api/experimental/aibridge/interceptions",
+			options,
+		);
+		const response =
+			await this.axios.get<TypesGen.AIBridgeListInterceptionsResponse>(url);
+		return response.data;
+	};
 }
 
 // This is a hard coded CSRF token/cookie pair for local development. In prod,

diff --git a/site/src/api/queries/aiBridge.ts b/site/src/api/queries/aiBridge.ts
@@ -0,0 +1,21 @@
+import { API } from "api/api";
+import type { AIBridgeListInterceptionsResponse } from "api/typesGenerated";
+import { useFilterParamsKey } from "components/Filter/Filter";
+import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
+
+export const paginatedInterceptions = (
+	searchParams: URLSearchParams,
+): UsePaginatedQueryOptions<AIBridgeListInterceptionsResponse, string> => {
+	return {
+		queryPayload: () => searchParams.get(useFilterParamsKey) ?? "",
+		queryKey: ({ payload, pageNumber }) => {
+			return ["aiBridgeInterceptions", payload, pageNumber] as const;
+		},
+		queryFn: ({ limit, offset, payload }) =>
+			API.experimental.getAIBridgeInterceptions({
+				offset,
+				limit,
+				q: payload,
+			}),
+	};
+};
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -18,6 +18,7 @@ interface DeploymentDropdownProps {
 	canViewAuditLog: boolean;
 	canViewConnectionLog: boolean;
 	canViewHealth: boolean;
+	canViewAIGovernance: boolean;
 }
 
 export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
@@ -26,6 +27,7 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 	canViewAuditLog,
 	canViewConnectionLog,
 	canViewHealth,
+	canViewAIGovernance,
 }) => {
 	if (
 		!canViewAuditLog &&
@@ -56,6 +58,7 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 					canViewAuditLog={canViewAuditLog}
 					canViewConnectionLog={canViewConnectionLog}
 					canViewHealth={canViewHealth}
+					canViewAIGovernance={canViewAIGovernance}
 				/>
 			</PopoverContent>
 		</Popover>
@@ -68,6 +71,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 	canViewAuditLog,
 	canViewHealth,
 	canViewConnectionLog,
+	canViewAIGovernance,
 }) => {
 	return (
 		<nav>
@@ -111,6 +115,17 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 					</MenuItem>
 				</PopoverClose>
 			)}
+			{canViewAIGovernance && (
+				<PopoverClose asChild>
+					<MenuItem
+						component={NavLink}
+						to="/aigovernance"
+						css={styles.menuItem}
+					>
+						AI Governance
+					</MenuItem>
+				</PopoverClose>
+			)}
 			{canViewHealth && (
 				<PopoverClose asChild>
 					<MenuItem component={NavLink} to="/health" css={styles.menuItem}>

diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -25,6 +25,8 @@ export const Navbar: FC = () => {
 		featureVisibility.audit_log && permissions.viewAnyAuditLog;
 	const canViewConnectionLog =
 		featureVisibility.connection_log && permissions.viewAnyConnectionLog;
+	const canViewAIGovernance =
+		featureVisibility.aibridge && permissions.viewAnyAIBridgeInterception;
 
 	const uniqueLinks = new Map<string, LinkConfig>();
 	for (const link of appearance.support_links ?? []) {
@@ -44,6 +46,7 @@ export const Navbar: FC = () => {
 			canViewHealth={canViewHealth}
 			canViewAuditLog={canViewAuditLog}
 			canViewConnectionLog={canViewConnectionLog}
+			canViewAIGovernance={canViewAIGovernance}
 			proxyContextValue={proxyContextValue}
 		/>
 	);

diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -35,6 +35,7 @@ interface NavbarViewProps {
 	canViewAuditLog: boolean;
 	canViewConnectionLog: boolean;
 	canViewHealth: boolean;
+	canViewAIGovernance: boolean;
 	proxyContextValue?: ProxyContextValue;
 }
 
@@ -55,6 +56,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 	canViewHealth,
 	canViewAuditLog,
 	canViewConnectionLog,
+	canViewAIGovernance,
 	proxyContextValue,
 }) => {
 	const webPush = useWebpushNotifications();
@@ -95,6 +97,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 						canViewDeployment={canViewDeployment}
 						canViewHealth={canViewHealth}
 						canViewConnectionLog={canViewConnectionLog}
+						canViewAIGovernance={canViewAIGovernance}
 					/>
 				</div>
 

diff --git a/site/src/modules/permissions/index.ts b/site/src/modules/permissions/index.ts
@@ -169,6 +169,13 @@ export const permissionChecks = {
 		},
 		action: "read",
 	},
+	viewAnyAIBridgeInterception: {
+		object: {
+			resource_type: "aibridge_interception",
+			any_org: true,
+		},
+		action: "read",
+	},
 } as const satisfies Record<string, AuthorizationCheck>;
 
 export const canViewDeploymentSettings = (

diff --git a/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx b/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
@@ -0,0 +1,32 @@
+import {
+	HelpTooltip,
+	HelpTooltipContent,
+	HelpTooltipIconTrigger,
+	HelpTooltipLink,
+	HelpTooltipLinksGroup,
+	HelpTooltipText,
+	HelpTooltipTitle,
+} from "components/HelpTooltip/HelpTooltip";
+import type { FC } from "react";
+import { docs } from "utils/docs";
+
+export const AIGovernanceHelpTooltip: FC = () => {
+	return (
+		<HelpTooltip>
+			<HelpTooltipIconTrigger />
+
+			<HelpTooltipContent>
+				<HelpTooltipTitle>What is AI Governance?</HelpTooltipTitle>
+				<HelpTooltipText>
+					AI Governance is a proxy that unifies and audits LLM usage across your
+					organization.
+				</HelpTooltipText>
+				<HelpTooltipLinksGroup>
+					<HelpTooltipLink href={docs("/ai-coder/ai-bridge")}>
+						What we track
+					</HelpTooltipLink>
+				</HelpTooltipLinksGroup>
+			</HelpTooltipContent>
+		</HelpTooltip>
+	);
+};
diff --git a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
@@ -0,0 +1,30 @@
+import { Margins } from "components/Margins/Margins";
+import {
+	PageHeader,
+	PageHeaderSubtitle,
+	PageHeaderTitle,
+} from "components/PageHeader/PageHeader";
+import type { FC, PropsWithChildren } from "react";
+import { Outlet } from "react-router";
+import { AIGovernanceHelpTooltip } from "./AIGovernanceHelpTooltip";
+
+const AIGovernanceLayout: FC<PropsWithChildren> = () => {
+	return (
+		<Margins className="pb-12">
+			<PageHeader>
+				<PageHeaderTitle>
+					<div className="flex items-center gap-2">
+						<span>AI Governance</span>
+						<AIGovernanceHelpTooltip />
+					</div>
+				</PageHeaderTitle>
+				<PageHeaderSubtitle>
+					Manage usage for your organization.
+				</PageHeaderSubtitle>
+			</PageHeader>
+			<Outlet />
+		</Margins>
+	);
+};
+
+export default AIGovernanceLayout;
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -0,0 +1,66 @@
+import { paginatedInterceptions } from "api/queries/aiBridge";
+import { useFilter } from "components/Filter/Filter";
+import { useUserFilterMenu } from "components/Filter/UserFilter";
+import { usePaginatedQuery } from "hooks/usePaginatedQuery";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
+import type { FC } from "react";
+import { useSearchParams } from "react-router";
+import { pageTitle } from "utils/page";
+import { useProviderFilterMenu } from "./filter/filter";
+import { RequestLogsPageView } from "./RequestLogsPageView";
+
+const RequestLogsPage: FC = () => {
+	const feats = useFeatureVisibility();
+	const isRequestLogsVisible = Boolean(feats.aibridge);
+
+	const [searchParams, setSearchParams] = useSearchParams();
+	const interceptionsQuery = usePaginatedQuery(
+		paginatedInterceptions(searchParams),
+	);
+	const filter = useFilter({
+		searchParams,
+		onSearchParamsChange: setSearchParams,
+		onUpdate: interceptionsQuery.goToFirstPage,
+	});
+
+	const userMenu = useUserFilterMenu({
+		value: filter.values.initiator,
+		onChange: (option) =>
+			filter.update({
+				...filter.values,
+				initiator: option?.value,
+			}),
+	});
+
+	const providerMenu = useProviderFilterMenu({
+		value: filter.values.provider,
+		onChange: (option) =>
+			filter.update({
+				...filter.values,
+				provider: option?.value,
+			}),
+	});
+
+	return (
+		<>
+			<title>{pageTitle("Request Logs", "AI Governance")}</title>
+
+			<RequestLogsPageView
+				isLoading={interceptionsQuery.isLoading}
+				isRequestLogsVisible={isRequestLogsVisible}
+				interceptions={interceptionsQuery.data?.results}
+				interceptionsQuery={interceptionsQuery}
+				filterProps={{
+					filter,
+					error: interceptionsQuery.error,
+					menus: {
+						user: userMenu,
+						provider: providerMenu,
+					},
+				}}
+			/>
+		</>
+	);
+};
+
+export default RequestLogsPage;
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
@@ -0,0 +1,77 @@
+import { MockInterception } from "testHelpers/entities";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	getDefaultFilterProps,
+	MockMenu,
+} from "components/Filter/storyHelpers";
+import {
+	mockInitialRenderResult,
+	mockSuccessResult,
+} from "components/PaginationWidget/PaginationContainer.mocks";
+import type { ComponentProps } from "react";
+import { RequestLogsPageView } from "./RequestLogsPageView";
+
+type FilterProps = ComponentProps<typeof RequestLogsPageView>["filterProps"];
+
+const defaultFilterProps = getDefaultFilterProps<FilterProps>({
+	query: "owner:me",
+	values: {
+		username: undefined,
+		provider: undefined,
+	},
+	menus: {
+		user: MockMenu,
+		provider: MockMenu,
+	},
+});
+
+const interceptions = [MockInterception, MockInterception, MockInterception];
+
+const meta: Meta<typeof RequestLogsPageView> = {
+	title: "pages/AIGovernancePage/RequestLogsPageView",
+	component: RequestLogsPageView,
+	args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof RequestLogsPageView>;
+
+export const Paywall: Story = {
+	args: {
+		isRequestLogsVisible: false,
+	},
+};
+
+export const Loaded: Story = {
+	args: {
+		isRequestLogsVisible: true,
+		interceptions,
+		filterProps: {
+			...defaultFilterProps,
+		},
+		interceptionsQuery: mockSuccessResult,
+	},
+};
+
+export const Empty: Story = {
+	args: {
+		isRequestLogsVisible: true,
+		interceptions: [],
+		filterProps: {
+			...defaultFilterProps,
+		},
+		interceptionsQuery: mockSuccessResult,
+	},
+};
+
+export const Loading: Story = {
+	args: {
+		isLoading: true,
+		isRequestLogsVisible: true,
+		interceptions: [],
+		filterProps: {
+			...defaultFilterProps,
+		},
+		interceptionsQuery: mockInitialRenderResult,
+	},
+};