Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025 · Oct 15, 2025 · Oct 15, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 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
 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
 canViewAuditLog: boolean;
 canViewConnectionLog: boolean;
 canViewHealth: boolean;
 canViewAIGovernance: boolean;
 }

 export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 canViewAuditLog,
 canViewConnectionLog,
 canViewHealth,
 canViewAIGovernance,
 }) => {
 if (
 !canViewAuditLog &&
 canViewAuditLog={canViewAuditLog}
 canViewConnectionLog={canViewConnectionLog}
 canViewHealth={canViewHealth}
 canViewAIGovernance={canViewAIGovernance}
 />
 </PopoverContent>
 </Popover>
 canViewAuditLog,
 canViewHealth,
 canViewConnectionLog,
 canViewAIGovernance,
 }) => {
 return (
 <nav>
 </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
 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 ?? []) {
 canViewHealth={canViewHealth}
 canViewAuditLog={canViewAuditLog}
 canViewConnectionLog={canViewConnectionLog}
 canViewAIGovernance={canViewAIGovernance}
 proxyContextValue={proxyContextValue}
 />
 );
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.test.tsx b/site/src/modules/dashboard/Navbar/NavbarView.test.tsx
 canViewHealth
 canViewAuditLog
 canViewConnectionLog
 canViewAIGovernance
 supportLinks={[]}
 />,
 );
 canViewHealth
 canViewAuditLog
 canViewConnectionLog
 canViewAIGovernance
 supportLinks={[]}
 />,
 );
 canViewHealth
 canViewAuditLog
 canViewConnectionLog
 canViewAIGovernance
 supportLinks={[]}
 />,
 );
 canViewHealth
 canViewAuditLog
 canViewConnectionLog
 canViewAIGovernance
 supportLinks={[]}
 />,
 );
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
 canViewAuditLog: boolean;
 canViewConnectionLog: boolean;
 canViewHealth: boolean;
 canViewAIGovernance: boolean;
 proxyContextValue?: ProxyContextValue;
 }

 canViewHealth,
 canViewAuditLog,
 canViewConnectionLog,
 canViewAIGovernance,
 proxyContextValue,
 }) => {
 const webPush = useWebpushNotifications();
 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
 },
 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
 import{
 HelpTooltip,
 HelpTooltipContent,
 HelpTooltipIconTrigger,
 HelpTooltipLink,
 HelpTooltipLinksGroup,
 HelpTooltipText,
 HelpTooltipTitle,
 }from"components/HelpTooltip/HelpTooltip";
 importtype{FC}from"react";
 import{docs}from"utils/docs";

 exportconstAIGovernanceHelpTooltip: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>
 <HelpTooltipLinkhref={docs("/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
 import{Margins}from"components/Margins/Margins";
 import{
 PageHeader,
 PageHeaderSubtitle,
 PageHeaderTitle,
 }from"components/PageHeader/PageHeader";
 importtype{FC,PropsWithChildren}from"react";
 import{Outlet}from"react-router";
 import{AIGovernanceHelpTooltip}from"./AIGovernanceHelpTooltip";

 constAIGovernanceLayout:FC<PropsWithChildren>=({
 children=<Outlet/>,
 })=>{
 return(
 <MarginsclassName="pb-12">
 <PageHeader>
 <PageHeaderTitle>
 <divclassName="flex items-center gap-2">
 <span>AI Governance</span>
 <AIGovernanceHelpTooltip/>
 </div>
 </PageHeaderTitle>
 <PageHeaderSubtitle>
 Manage usage for your organization.
 </PageHeaderSubtitle>
 </PageHeader>
 {children}
 </Margins>
 );
 };

 exportdefaultAIGovernanceLayout;
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
 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
 import{MockInterception}from"testHelpers/entities";
 importtype{Meta,StoryObj}from"@storybook/react-vite";
 import{
 getDefaultFilterProps,
 MockMenu,
 }from"components/Filter/storyHelpers";
 import{
 mockInitialRenderResult,
 mockSuccessResult,
 }from"components/PaginationWidget/PaginationContainer.mocks";
 importtype{UsePaginatedQueryResult}from"hooks/usePaginatedQuery";
 importtype{ComponentProps}from"react";
 import{RequestLogsPageView}from"./RequestLogsPageView";

 typeFilterProps=ComponentProps<typeofRequestLogsPageView>["filterProps"];

 constdefaultFilterProps=getDefaultFilterProps<FilterProps>({
 query:"owner:me",
 values:{
 username:undefined,
 provider:undefined,
 },
 menus:{
 user:MockMenu,
 provider:MockMenu,
 },
 });

 constinterceptions=[MockInterception,MockInterception,MockInterception];

 constmeta:Meta<typeofRequestLogsPageView>={
 title:"pages/AIGovernancePage/RequestLogsPageView",
 component:RequestLogsPageView,
 args:{},
 };

 exportdefaultmeta;
 typeStory=StoryObj<typeofRequestLogsPageView>;

 exportconstPaywall:Story={
 args:{
 isRequestLogsVisible:false,
 },
 };

 exportconstLoaded:Story={
 args:{
 isRequestLogsVisible:true,
 interceptions,
 filterProps:{
 ...defaultFilterProps,
 },
 interceptionsQuery:{
 ...mockSuccessResult,
 totalRecords:interceptions.length,
 data:{ interceptions,total:interceptions.length},
 }asUsePaginatedQueryResult,
 },
 };

 exportconstEmpty:Story={
 args:{
 isRequestLogsVisible:true,
 interceptions:[],
 filterProps:{
 ...defaultFilterProps,
 },
 interceptionsQuery:{
 ...mockSuccessResult,
 totalRecords:0,
 data:{interceptions:[],total:0},
 }asUsePaginatedQueryResult,
 },
 };

 exportconstLoading:Story={
 args:{
 isLoading:true,
 isRequestLogsVisible:true,
 interceptions:[],
 filterProps:{
 ...defaultFilterProps,
 },
 interceptionsQuery:{
 ...mockInitialRenderResult,
 }asUsePaginatedQueryResult,
 },
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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,
		}),
		};
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,6 +18,7 @@ interface DeploymentDropdownProps {
		canViewAuditLog: boolean;
		canViewConnectionLog: boolean;
		canViewHealth: boolean;
		canViewAIGovernance: boolean;
		}

		export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
Expand All		@@ -26,6 +27,7 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
		canViewAuditLog,
		canViewConnectionLog,
		canViewHealth,
		canViewAIGovernance,
		}) => {
		if (
		!canViewAuditLog &&
Expand DownExpand Up		@@ -56,6 +58,7 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
		canViewAuditLog={canViewAuditLog}
		canViewConnectionLog={canViewConnectionLog}
		canViewHealth={canViewHealth}
		canViewAIGovernance={canViewAIGovernance}
		/>
		</PopoverContent>
		</Popover>
Expand All		@@ -68,6 +71,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
		canViewAuditLog,
		canViewHealth,
		canViewConnectionLog,
		canViewAIGovernance,
		}) => {
		return (
		<nav>
Expand DownExpand Up		@@ -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}>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,6 +25,8 @@ export const Navbar: FC = () => {
		featureVisibility.audit_log && permissions.viewAnyAuditLog;
		const canViewConnectionLog =
		featureVisibility.connection_log && permissions.viewAnyConnectionLog;
		const canViewAIGovernance =
jakehwll marked this conversation as resolved. Show resolvedHide resolved
		featureVisibility.aibridge && permissions.viewAnyAIBridgeInterception;

		const uniqueLinks = new Map<string, LinkConfig>();
		for (const link of appearance.support_links ?? []) {
Expand All		@@ -44,6 +46,7 @@ export const Navbar: FC = () => {
		canViewHealth={canViewHealth}
		canViewAuditLog={canViewAuditLog}
		canViewConnectionLog={canViewConnectionLog}
		canViewAIGovernance={canViewAIGovernance}
		proxyContextValue={proxyContextValue}
		/>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,6 +34,7 @@ describe("NavbarView", () => {
		canViewHealth
		canViewAuditLog
		canViewConnectionLog
		canViewAIGovernance
		supportLinks={[]}
		/>,
		);
Expand All		@@ -53,6 +54,7 @@ describe("NavbarView", () => {
		canViewHealth
		canViewAuditLog
		canViewConnectionLog
		canViewAIGovernance
		supportLinks={[]}
		/>,
		);
Expand All		@@ -72,6 +74,7 @@ describe("NavbarView", () => {
		canViewHealth
		canViewAuditLog
		canViewConnectionLog
		canViewAIGovernance
		supportLinks={[]}
		/>,
		);
Expand All		@@ -92,6 +95,7 @@ describe("NavbarView", () => {
		canViewHealth
		canViewAuditLog
		canViewConnectionLog
		canViewAIGovernance
		supportLinks={[]}
		/>,
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,6 +35,7 @@ interface NavbarViewProps {
		canViewAuditLog: boolean;
		canViewConnectionLog: boolean;
		canViewHealth: boolean;
		canViewAIGovernance: boolean;
		proxyContextValue?: ProxyContextValue;
		}

Expand All		@@ -55,6 +56,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
		canViewHealth,
		canViewAuditLog,
		canViewConnectionLog,
		canViewAIGovernance,
		proxyContextValue,
		}) => {
		const webPush = useWebpushNotifications();
Expand DownExpand Up		@@ -95,6 +97,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
		canViewDeployment={canViewDeployment}
		canViewHealth={canViewHealth}
		canViewConnectionLog={canViewConnectionLog}
		canViewAIGovernance={canViewAIGovernance}
		/>
		</div>

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 = (
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,32 @@
		import{
		HelpTooltip,
		HelpTooltipContent,
		HelpTooltipIconTrigger,
		HelpTooltipLink,
		HelpTooltipLinksGroup,
		HelpTooltipText,
		HelpTooltipTitle,
		}from"components/HelpTooltip/HelpTooltip";
		importtype{FC}from"react";
		import{docs}from"utils/docs";

		exportconstAIGovernanceHelpTooltip: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>
		<HelpTooltipLinkhref={docs("/docs/ai-coder/ai-bridge")}>
jakehwll marked this conversation as resolved. Show resolvedHide resolved
		What we track
		</HelpTooltipLink>
		</HelpTooltipLinksGroup>
		</HelpTooltipContent>
		</HelpTooltip>
		);
		};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,32 @@
		import{Margins}from"components/Margins/Margins";
		import{
		PageHeader,
		PageHeaderSubtitle,
		PageHeaderTitle,
		}from"components/PageHeader/PageHeader";
		importtype{FC,PropsWithChildren}from"react";
		import{Outlet}from"react-router";
		import{AIGovernanceHelpTooltip}from"./AIGovernanceHelpTooltip";

		constAIGovernanceLayout:FC<PropsWithChildren>=({
		children=<Outlet/>,
jakehwll marked this conversation as resolved. Show resolvedHide resolved
		})=>{
		return(
		<MarginsclassName="pb-12">
		<PageHeader>
		<PageHeaderTitle>
		<divclassName="flex items-center gap-2">
		<span>AI Governance</span>
		<AIGovernanceHelpTooltip/>
		</div>
		</PageHeaderTitle>
		<PageHeaderSubtitle>
		Manage usage for your organization.
		</PageHeaderSubtitle>
		</PageHeader>
		{children}
		</Margins>
		);
		};

		exportdefaultAIGovernanceLayout;
Original file line number	Diff line number	Diff line change
		@@ -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;