From cfc4aa979f97c40170181c6e70fb3cfff68cb6b3 Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Tue, 14 Oct 2025 06:06:17 +0000
Subject: [PATCH 01/64] feat!: impl `/aigovernance` to `Admin Settings`
 (hardcoded on)

---
 .../modules/dashboard/Navbar/DeploymentDropdown.tsx   | 11 +++++++++++
 site/src/modules/dashboard/Navbar/Navbar.tsx          |  2 ++
 site/src/modules/dashboard/Navbar/NavbarView.test.tsx |  4 ++++
 site/src/modules/dashboard/Navbar/NavbarView.tsx      |  3 +++
 4 files changed, 20 insertions(+)

diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
index 7089342727c63..a9f43b9cbca5a 100644
--- 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,13 @@ 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
index 012053341e976..db6292c0ba44f 100644
--- a/site/src/modules/dashboard/Navbar/Navbar.tsx
+++ b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -25,6 +25,7 @@ export const Navbar: FC = () => {
 		featureVisibility.audit_log && permissions.viewAnyAuditLog;
 	const canViewConnectionLog =
 		featureVisibility.connection_log && permissions.viewAnyConnectionLog;
+	const canViewAIGovernance = true;
 
 	const uniqueLinks = new Map<string, LinkConfig>();
 	for (const link of appearance.support_links ?? []) {
@@ -44,6 +45,7 @@ export const Navbar: FC = () => {
 			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
index f313b6aa2b33e..5fddee7a992ef 100644
--- a/site/src/modules/dashboard/Navbar/NavbarView.test.tsx
+++ b/site/src/modules/dashboard/Navbar/NavbarView.test.tsx
@@ -34,6 +34,7 @@ describe("NavbarView", () => {
 				canViewHealth
 				canViewAuditLog
 				canViewConnectionLog
+				canViewAIGovernance
 				supportLinks={[]}
 			/>,
 		);
@@ -53,6 +54,7 @@ describe("NavbarView", () => {
 				canViewHealth
 				canViewAuditLog
 				canViewConnectionLog
+				canViewAIGovernance
 				supportLinks={[]}
 			/>,
 		);
@@ -72,6 +74,7 @@ describe("NavbarView", () => {
 				canViewHealth
 				canViewAuditLog
 				canViewConnectionLog
+				canViewAIGovernance
 				supportLinks={[]}
 			/>,
 		);
@@ -92,6 +95,7 @@ describe("NavbarView", () => {
 				canViewHealth
 				canViewAuditLog
 				canViewConnectionLog
+				canViewAIGovernance
 				supportLinks={[]}
 			/>,
 		);
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
index a4107f0b8485c..f936d2ad76b33 100644
--- 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>
 

From 134495adab5d026f8d1382db0cde00e00285c831 Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Tue, 14 Oct 2025 10:36:02 +0000
Subject: [PATCH 02/64] feat: add `/aigovernance` routes and layout

---
 .../AIGovernancePage/AIGovernanceLayout.tsx   | 32 +++++++++++++++++++
 .../RequestLogsPage/RequestLogsPage.tsx       | 15 +++++++++
 .../RequestLogsPage/RequestLogsPageView.tsx   | 12 +++++++
 site/src/router.tsx                           |  7 ++++
 4 files changed, 66 insertions(+)
 create mode 100644 site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
 create mode 100644 site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
 create mode 100644 site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx

diff --git a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
new file mode 100644
index 0000000000000..c0e6fb381e64e
--- /dev/null
+++ b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
@@ -0,0 +1,32 @@
+import { Margins } from "components/Margins/Margins";
+import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "components/PageHeader/PageHeader";
+import { Stack } from "components/Stack/Stack";
+import type { FC, PropsWithChildren } from "react";
+import { Outlet } from "react-router";
+
+const Language = {
+	title: "AI Governance",
+	subtitle: "Manage AI policies and usage for your organization.",
+};
+
+const AIGovernanceLayout: FC<PropsWithChildren> = ({
+	children = <Outlet />,
+}) => {
+	return (
+		<Margins className="pb-12">
+			<PageHeader>
+				<PageHeaderTitle>
+					<Stack direction="row" spacing={1} alignItems="center">
+						<span>{Language.title}</span>
+					</Stack>
+				</PageHeaderTitle>
+				<PageHeaderSubtitle>
+					{Language.subtitle}
+				</PageHeaderSubtitle>
+			</PageHeader>
+			{children}
+		</Margins>
+	);
+};
+
+export default AIGovernanceLayout
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
new file mode 100644
index 0000000000000..36c440cf8349d
--- /dev/null
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -0,0 +1,15 @@
+import type { FC } from "react";
+import { pageTitle } from "utils/page";
+import { RequestLogsPageView } from "./RequestLogsPageView";
+
+const RequestLogsPage: FC = () => {
+	return (
+		<>
+			<title>{pageTitle("AI Governance", "Request Logs")}</title>
+
+			<RequestLogsPageView />
+		</>
+	)
+};
+
+export default RequestLogsPage;
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
new file mode 100644
index 0000000000000..d7910b97e16d0
--- /dev/null
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -0,0 +1,12 @@
+import type { FC } from "react";
+
+// biome-ignore lint/suspicious/noEmptyInterface: TODO
+interface RequestLogsPageViewProps {
+
+}
+
+export const RequestLogsPageView: FC<RequestLogsPageViewProps> = () => {
+	return (
+		<div>TODO</div>
+	);
+};
diff --git a/site/src/router.tsx b/site/src/router.tsx
index 6aaefb77d8731..e64e22258614b 100644
--- a/site/src/router.tsx
+++ b/site/src/router.tsx
@@ -334,6 +334,8 @@ const ProvisionerJobsPage = lazy(
 );
 const TasksPage = lazy(() => import("./pages/TasksPage/TasksPage"));
 const TaskPage = lazy(() => import("./pages/TaskPage/TaskPage"));
+const AIGovernanceLayout = lazy(() => import("./pages/AIGovernancePage/AIGovernanceLayout"));
+const AIGovernanceRequestLogsPage = lazy(() => import("./pages/AIGovernancePage/RequestLogsPage/RequestLogsPage"));
 
 const RoutesWithSuspense = () => {
 	return (
@@ -557,6 +559,11 @@ export const router = createBrowserRouter(
 						</Route>
 					</Route>
 
+					<Route path="/aigovernance" element={<AIGovernanceLayout />}>
+						<Route index element={<Navigate to="request-logs" replace />} />
+						<Route path="request-logs" element={<AIGovernanceRequestLogsPage />} />
+					</Route>
+
 					<Route path="/health" element={<HealthLayout />}>
 						<Route index element={<Navigate to="access-url" replace />} />
 						<Route path="access-url" element={<AccessURLPage />} />

From 6cd0819eab7b781d5267c88caa88c8fba66802b7 Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Tue, 14 Oct 2025 12:22:37 +0000
Subject: [PATCH 03/64] feat: feed some dummy content

---
 .../RequestLogsPage/RequestLogsPageView.tsx   | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index d7910b97e16d0..03751a4cfd868 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -1,4 +1,7 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "components/Table/Table";
+import { ChevronRight } from "lucide-react";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 
 // biome-ignore lint/suspicious/noEmptyInterface: TODO
 interface RequestLogsPageViewProps {
@@ -7,6 +10,40 @@ interface RequestLogsPageViewProps {
 
 export const RequestLogsPageView: FC<RequestLogsPageViewProps> = () => {
 	return (
-		<div>TODO</div>
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead></TableHead>
+					<TableHead>Timestamp</TableHead>
+					<TableHead>User</TableHead>
+					<TableHead>Prompt</TableHead>
+					<TableHead>Tokens</TableHead>
+					<TableHead>Tool Calls</TableHead>
+					<TableHead>Status</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{new Array(5).fill(0).map((_, x) => (
+					<>
+						<TableRow className={cn("cursor-pointer hover:bg-surface-secondary")} key={x}>
+							<TableCell>
+								<div css={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+									<ChevronRight size={16} />
+								</div>
+							</TableCell>
+							<TableCell>2025-01-01 00:00:00</TableCell>
+							<TableCell>John Doe</TableCell>
+							<TableCell>This is a prompt</TableCell>
+							<TableCell>100</TableCell>
+							<TableCell>1</TableCell>
+							<TableCell>Status</TableCell>
+						</TableRow>
+						<TableRow>
+							<TableCell colSpan={999}>Foo</TableCell>
+						</TableRow>
+					</>
+				))}
+			</TableBody>
+		</Table>
 	);
 };

From 1f9fddf87b16522050987fb1887a8e9d69ae18b0 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 14 Oct 2025 23:24:32 +0000
Subject: [PATCH 04/64] feat: implement `<RequestLogsRow />`

---
 .../RequestLogsPage/RequestLogsPageView.tsx   | 34 ++++----------
 .../RequestLogsRow/RequestLogsRow.tsx         | 47 +++++++++++++++++++
 2 files changed, 57 insertions(+), 24 deletions(-)
 create mode 100644 site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index 03751a4cfd868..77b3fddfda0eb 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -1,12 +1,15 @@
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "components/Table/Table";
-import { ChevronRight } from "lucide-react";
+import {
+	Table,
+	TableBody,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "components/Table/Table";
 import type { FC } from "react";
-import { cn } from "utils/cn";
+import { RequestLogsRow } from "./RequestLogsRow/RequestLogsRow";
 
 // biome-ignore lint/suspicious/noEmptyInterface: TODO
-interface RequestLogsPageViewProps {
-
-}
+interface RequestLogsPageViewProps {}
 
 export const RequestLogsPageView: FC<RequestLogsPageViewProps> = () => {
 	return (
@@ -24,24 +27,7 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = () => {
 			</TableHeader>
 			<TableBody>
 				{new Array(5).fill(0).map((_, x) => (
-					<>
-						<TableRow className={cn("cursor-pointer hover:bg-surface-secondary")} key={x}>
-							<TableCell>
-								<div css={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
-									<ChevronRight size={16} />
-								</div>
-							</TableCell>
-							<TableCell>2025-01-01 00:00:00</TableCell>
-							<TableCell>John Doe</TableCell>
-							<TableCell>This is a prompt</TableCell>
-							<TableCell>100</TableCell>
-							<TableCell>1</TableCell>
-							<TableCell>Status</TableCell>
-						</TableRow>
-						<TableRow>
-							<TableCell colSpan={999}>Foo</TableCell>
-						</TableRow>
-					</>
+					<RequestLogsRow key={x} />
 				))}
 			</TableBody>
 		</Table>
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
new file mode 100644
index 0000000000000..915dd01f1d6e2
--- /dev/null
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -0,0 +1,47 @@
+import { TableCell, TableRow } from "components/Table/Table";
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import { type FC, useState } from "react";
+import { cn } from "utils/cn";
+
+// biome-ignore lint/complexity/noBannedTypes: TODO
+type RequestLogsRowProps = {};
+
+export const RequestLogsRow: FC<RequestLogsRowProps> = () => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<TableRow
+				className={cn("select-none cursor-pointer hover:bg-surface-secondary")}
+				onClick={() => setIsOpen(!isOpen)}
+			>
+				<TableCell>
+					<div
+						css={{
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+						}}
+					>
+						{isOpen ? (
+							<ChevronDownIcon size={16} />
+						) : (
+							<ChevronRightIcon size={16} />
+						)}
+					</div>
+				</TableCell>
+				<TableCell>2025-01-01 00:00:00</TableCell>
+				<TableCell>John Doe</TableCell>
+				<TableCell>This is a prompt</TableCell>
+				<TableCell>100</TableCell>
+				<TableCell>1</TableCell>
+				<TableCell>Status</TableCell>
+			</TableRow>
+			{isOpen && (
+				<TableRow>
+					<TableCell colSpan={999}>TODO</TableCell>
+				</TableRow>
+			)}
+		</>
+	);
+};

From 0231d384d9c4a08224cf2b6c9a415f0c49d751dc Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 15 Oct 2025 01:15:57 +0000
Subject: [PATCH 05/64] feat: query interceptions from backend

---
 site/src/api/api.ts                                    |  8 ++++++++
 site/src/api/queries/aiBridge.ts                       | 10 ++++++++++
 .../RequestLogsPage/RequestLogsPage.tsx                |  4 ++++
 3 files changed, 22 insertions(+)
 create mode 100644 site/src/api/queries/aiBridge.ts

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index a5c9148b017a0..665d13c040bec 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -2748,6 +2748,14 @@ class ExperimentalApiMethods {
 			setTimeout(() => res(), 500);
 		});
 	};
+
+	getAIBridgeInterceptions = async () => {
+		const response =
+			await this.axios.get<TypesGen.AIBridgeListInterceptionsResponse>(
+				"/api/experimental/aibridge/interceptions",
+			);
+		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
new file mode 100644
index 0000000000000..502021455ecbf
--- /dev/null
+++ b/site/src/api/queries/aiBridge.ts
@@ -0,0 +1,10 @@
+import { API } from "api/api";
+
+const getListInterceptionsQueryKey = () => ["aiBridgeInterceptions"];
+
+export const listInterceptions = () => {
+	return {
+		queryKey: getListInterceptionsQueryKey(),
+		queryFn: () => API.experimental.getAIBridgeInterceptions(),
+	};
+};
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index 36c440cf8349d..fc49c14090816 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -1,8 +1,12 @@
+import { listInterceptions } from "api/queries/aiBridge";
 import type { FC } from "react";
+import { useQuery } from "react-query";
 import { pageTitle } from "utils/page";
 import { RequestLogsPageView } from "./RequestLogsPageView";
 
 const RequestLogsPage: FC = () => {
+	const interceptionsQuery = useQuery(listInterceptions());
+
 	return (
 		<>
 			<title>{pageTitle("AI Governance", "Request Logs")}</title>

From bc71782ad386235f01fe128dd0d345d395efa72b Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 15 Oct 2025 01:16:12 +0000
Subject: [PATCH 06/64] feat: render interceptions in frontend

---
 .../AIGovernancePage/AIGovernanceLayout.tsx   | 14 ++++---
 .../RequestLogsPage/RequestLogsPage.tsx       |  4 +-
 .../RequestLogsPage/RequestLogsPageView.tsx   | 14 ++++---
 .../RequestLogsRow/RequestLogsRow.tsx         | 41 +++++++++++++++----
 4 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
index c0e6fb381e64e..5c5d0580bb9a7 100644
--- a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
+++ b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
@@ -1,12 +1,16 @@
 import { Margins } from "components/Margins/Margins";
-import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "components/PageHeader/PageHeader";
+import {
+	PageHeader,
+	PageHeaderSubtitle,
+	PageHeaderTitle,
+} from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
 import type { FC, PropsWithChildren } from "react";
 import { Outlet } from "react-router";
 
 const Language = {
 	title: "AI Governance",
-	subtitle: "Manage AI policies and usage for your organization.",
+	subtitle: "Manage usage for your organization.",
 };
 
 const AIGovernanceLayout: FC<PropsWithChildren> = ({
@@ -20,13 +24,11 @@ const AIGovernanceLayout: FC<PropsWithChildren> = ({
 						<span>{Language.title}</span>
 					</Stack>
 				</PageHeaderTitle>
-				<PageHeaderSubtitle>
-					{Language.subtitle}
-				</PageHeaderSubtitle>
+				<PageHeaderSubtitle>{Language.subtitle}</PageHeaderSubtitle>
 			</PageHeader>
 			{children}
 		</Margins>
 	);
 };
 
-export default AIGovernanceLayout
+export default AIGovernanceLayout;
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index fc49c14090816..13c0a6d8ec499 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -11,9 +11,9 @@ const RequestLogsPage: FC = () => {
 		<>
 			<title>{pageTitle("AI Governance", "Request Logs")}</title>
 
-			<RequestLogsPageView />
+			<RequestLogsPageView interceptions={interceptionsQuery.data?.results} />
 		</>
-	)
+	);
 };
 
 export default RequestLogsPage;
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index 77b3fddfda0eb..61678b5bfc195 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -1,3 +1,4 @@
+import type { AIBridgeInterception } from "api/typesGenerated";
 import {
 	Table,
 	TableBody,
@@ -8,10 +9,13 @@ import {
 import type { FC } from "react";
 import { RequestLogsRow } from "./RequestLogsRow/RequestLogsRow";
 
-// biome-ignore lint/suspicious/noEmptyInterface: TODO
-interface RequestLogsPageViewProps {}
+interface RequestLogsPageViewProps {
+	interceptions?: readonly AIBridgeInterception[];
+}
 
-export const RequestLogsPageView: FC<RequestLogsPageViewProps> = () => {
+export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
+	interceptions,
+}) => {
 	return (
 		<Table>
 			<TableHeader>
@@ -26,8 +30,8 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = () => {
 				</TableRow>
 			</TableHeader>
 			<TableBody>
-				{new Array(5).fill(0).map((_, x) => (
-					<RequestLogsRow key={x} />
+				{interceptions?.map((interception) => (
+					<RequestLogsRow interception={interception} key={interception.id} />
 				))}
 			</TableBody>
 		</Table>
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 915dd01f1d6e2..8d35221988f52 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -1,14 +1,25 @@
+import type { AIBridgeInterception } from "api/typesGenerated";
 import { TableCell, TableRow } from "components/Table/Table";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { cn } from "utils/cn";
 
-// biome-ignore lint/complexity/noBannedTypes: TODO
-type RequestLogsRowProps = {};
+type RequestLogsRowProps = {
+	interception: AIBridgeInterception;
+};
 
-export const RequestLogsRow: FC<RequestLogsRowProps> = () => {
+export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 	const [isOpen, setIsOpen] = useState(false);
 
+	const hasPrompt = interception.user_prompts.length > 0;
+
+	const tokens = interception.token_usages.reduce(
+		(acc, tokenUsage) =>
+			acc + tokenUsage.input_tokens + tokenUsage.output_tokens,
+		0,
+	);
+	const toolCalls = interception.tool_usages.length;
+
 	return (
 		<>
 			<TableRow
@@ -30,16 +41,28 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = () => {
 						)}
 					</div>
 				</TableCell>
-				<TableCell>2025-01-01 00:00:00</TableCell>
-				<TableCell>John Doe</TableCell>
-				<TableCell>This is a prompt</TableCell>
-				<TableCell>100</TableCell>
-				<TableCell>1</TableCell>
+				<TableCell>{interception.started_at}</TableCell>
+				<TableCell>{interception.initiator_id}</TableCell>
+				<TableCell>
+					{hasPrompt && interception.user_prompts[0].prompt}
+				</TableCell>
+				<TableCell>{tokens}</TableCell>
+				<TableCell>{toolCalls}</TableCell>
 				<TableCell>Status</TableCell>
 			</TableRow>
 			{isOpen && (
 				<TableRow>
-					<TableCell colSpan={999}>TODO</TableCell>
+					<TableCell colSpan={999}>
+						<pre>
+							{JSON.stringify(
+								{
+									interception,
+								},
+								null,
+								2,
+							)}
+						</pre>
+					</TableCell>
 				</TableRow>
 			)}
 		</>

From 6e054757b4593a4300afe3136dab6cec5dcdd520 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 15 Oct 2025 01:23:14 +0000
Subject: [PATCH 07/64] fix: omit `status` column (lacking data)

---
 .../AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx     | 1 -
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx            | 1 -
 2 files changed, 2 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index 61678b5bfc195..0fc8e4826adca 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -26,7 +26,6 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 					<TableHead>Prompt</TableHead>
 					<TableHead>Tokens</TableHead>
 					<TableHead>Tool Calls</TableHead>
-					<TableHead>Status</TableHead>
 				</TableRow>
 			</TableHeader>
 			<TableBody>
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 8d35221988f52..fdd0b89394a0c 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -48,7 +48,6 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 				</TableCell>
 				<TableCell>{tokens}</TableCell>
 				<TableCell>{toolCalls}</TableCell>
-				<TableCell>Status</TableCell>
 			</TableRow>
 			{isOpen && (
 				<TableRow>

From afab50762c7bd90175e1b6289f1dd03d03672bc7 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 15 Oct 2025 03:46:55 +0000
Subject: [PATCH 08/64] fix: ensure that we're checking for `aibridge` for `ai
 governance` menu

---
 site/src/modules/dashboard/Navbar/Navbar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
index db6292c0ba44f..b3b1087a1dd26 100644
--- a/site/src/modules/dashboard/Navbar/Navbar.tsx
+++ b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -25,7 +25,8 @@ export const Navbar: FC = () => {
 		featureVisibility.audit_log && permissions.viewAnyAuditLog;
 	const canViewConnectionLog =
 		featureVisibility.connection_log && permissions.viewAnyConnectionLog;
-	const canViewAIGovernance = true;
+	// TODO: We should have a separate permission for this
+	const canViewAIGovernance = featureVisibility.aibridge;
 
 	const uniqueLinks = new Map<string, LinkConfig>();
 	for (const link of appearance.support_links ?? []) {

From 828d3813396a523d1c8cfd2f403825d1407def2e Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 15 Oct 2025 03:51:26 +0000
Subject: [PATCH 09/64] feat: empty and loading states on `<RequestLogsPageView
 />` table

---
 .../AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx  | 5 ++++-
 .../RequestLogsPage/RequestLogsPageView.tsx               | 8 ++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index 13c0a6d8ec499..fbc4795bff903 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -11,7 +11,10 @@ const RequestLogsPage: FC = () => {
 		<>
 			<title>{pageTitle("AI Governance", "Request Logs")}</title>
 
-			<RequestLogsPageView interceptions={interceptionsQuery.data?.results} />
+			<RequestLogsPageView
+				isLoading={interceptionsQuery.isLoading}
+				interceptions={interceptionsQuery.data?.results}
+			/>
 		</>
 	);
 };
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index 0fc8e4826adca..ef1ee93e68032 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -6,14 +6,18 @@ import {
 	TableHeader,
 	TableRow,
 } from "components/Table/Table";
+import { TableEmpty } from "components/TableEmpty/TableEmpty";
+import { TableLoader } from "components/TableLoader/TableLoader";
 import type { FC } from "react";
 import { RequestLogsRow } from "./RequestLogsRow/RequestLogsRow";
 
 interface RequestLogsPageViewProps {
+	isLoading: boolean;
 	interceptions?: readonly AIBridgeInterception[];
 }
 
 export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
+	isLoading,
 	interceptions,
 }) => {
 	return (
@@ -29,6 +33,10 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 				</TableRow>
 			</TableHeader>
 			<TableBody>
+				{isLoading && <TableLoader />}
+				{interceptions?.length === 0 && (
+					<TableEmpty message={"No request logs available"} />
+				)}
 				{interceptions?.map((interception) => (
 					<RequestLogsRow interception={interception} key={interception.id} />
 				))}

From ba289ec5110f60db45485d71f4d4b790a0edaa51 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 15 Oct 2025 04:59:24 +0000
Subject: [PATCH 10/64] feat: add `<Paywall />` to
 `/ai-governance/request-logs`

---
 .../RequestLogsPage/RequestLogsPage.tsx            |  9 +++++++++
 .../RequestLogsPage/RequestLogsPageView.tsx        | 14 ++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index fbc4795bff903..3adb18dc2b202 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -1,10 +1,18 @@
 import { listInterceptions } from "api/queries/aiBridge";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { pageTitle } from "utils/page";
 import { RequestLogsPageView } from "./RequestLogsPageView";
 
 const RequestLogsPage: FC = () => {
+	const feats = useFeatureVisibility();
+	// The "else false" is required if audit_log is undefined.
+	// It may happen if owner removes the license.
+	//
+	// see: https://github.com/coder/coder/issues/14798
+	const isRequestLogsVisible = feats.aibridge || false;
+
 	const interceptionsQuery = useQuery(listInterceptions());
 
 	return (
@@ -13,6 +21,7 @@ const RequestLogsPage: FC = () => {
 
 			<RequestLogsPageView
 				isLoading={interceptionsQuery.isLoading}
+				isRequestLogsVisible={isRequestLogsVisible}
 				interceptions={interceptionsQuery.data?.results}
 			/>
 		</>
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index ef1ee93e68032..4f9431b0748bc 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -1,4 +1,5 @@
 import type { AIBridgeInterception } from "api/typesGenerated";
+import { Paywall } from "components/Paywall/Paywall";
 import {
 	Table,
 	TableBody,
@@ -13,13 +14,26 @@ import { RequestLogsRow } from "./RequestLogsRow/RequestLogsRow";
 
 interface RequestLogsPageViewProps {
 	isLoading: boolean;
+	isRequestLogsVisible: boolean;
 	interceptions?: readonly AIBridgeInterception[];
 }
 
 export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 	isLoading,
+	isRequestLogsVisible,
 	interceptions,
 }) => {
+	if (!isRequestLogsVisible) {
+		return (
+			<Paywall
+				message="AI Governance"
+				description="AI Governance allows you to monitor and manage AI requests. You need an Premium license to use this feature."
+				// TODO: Add documentation link
+				// documentationLink={docs("/admin/security/ai-governance")}
+			/>
+		);
+	}
+
 	return (
 		<Table>
 			<TableHeader>

From b7280f53377d6d5ecbc06ddba2702309184c3997 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 15 Oct 2025 08:55:04 +0000
Subject: [PATCH 11/64] chore: add missing todo

---
 site/src/modules/dashboard/Navbar/Navbar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
index b3b1087a1dd26..8bb320d6df4c4 100644
--- a/site/src/modules/dashboard/Navbar/Navbar.tsx
+++ b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -26,6 +26,7 @@ export const Navbar: FC = () => {
 	const canViewConnectionLog =
 		featureVisibility.connection_log && permissions.viewAnyConnectionLog;
 	// TODO: We should have a separate permission for this
+	// TODO: We should have a check for the experiment too.
 	const canViewAIGovernance = featureVisibility.aibridge;
 
 	const uniqueLinks = new Map<string, LinkConfig>();

From 5abbac574afd2104c0b7af236e5a5fe60af42820 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 16 Oct 2025 01:18:50 +0000
Subject: [PATCH 12/64] feat: link documentation to `/ai-coder/ai-bridge`

---
 .../AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index 4f9431b0748bc..346dfecb185f8 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -10,6 +10,7 @@ import {
 import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import type { FC } from "react";
+import { docs } from "utils/docs";
 import { RequestLogsRow } from "./RequestLogsRow/RequestLogsRow";
 
 interface RequestLogsPageViewProps {
@@ -28,8 +29,7 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 			<Paywall
 				message="AI Governance"
 				description="AI Governance allows you to monitor and manage AI requests. You need an Premium license to use this feature."
-				// TODO: Add documentation link
-				// documentationLink={docs("/admin/security/ai-governance")}
+				documentationLink={docs("/ai-coder/ai-bridge")}
 			/>
 		);
 	}

From 811d0c538f60f573b4854aabff81d0f9cb102a5c Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 16 Oct 2025 01:26:38 +0000
Subject: [PATCH 13/64] fix: menu checking for `aibridge` experiment on

---
 site/src/modules/dashboard/Navbar/Navbar.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
index 8bb320d6df4c4..1f3385bbd8ea9 100644
--- a/site/src/modules/dashboard/Navbar/Navbar.tsx
+++ b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -13,7 +13,8 @@ import { NavbarView } from "./NavbarView";
 export const Navbar: FC = () => {
 	const { metadata } = useEmbeddedMetadata();
 	const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
-	const { appearance, canViewOrganizationSettings } = useDashboard();
+	const { appearance, experiments, canViewOrganizationSettings } =
+		useDashboard();
 	const { user: me, permissions, signOut } = useAuthenticated();
 	const featureVisibility = useFeatureVisibility();
 	const proxyContextValue = useProxy();
@@ -26,8 +27,8 @@ export const Navbar: FC = () => {
 	const canViewConnectionLog =
 		featureVisibility.connection_log && permissions.viewAnyConnectionLog;
 	// TODO: We should have a separate permission for this
-	// TODO: We should have a check for the experiment too.
-	const canViewAIGovernance = featureVisibility.aibridge;
+	const canViewAIGovernance =
+		featureVisibility.aibridge && experiments.includes("aibridge");
 
 	const uniqueLinks = new Map<string, LinkConfig>();
 	for (const link of appearance.support_links ?? []) {

From 6a74e803916ffa711e0a9d37cb01bc6fef710ddb Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 16 Oct 2025 01:50:32 +0000
Subject: [PATCH 14/64] fix: prefer to use `.toLocalString()` over string

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx         | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index fdd0b89394a0c..3664ef4e3651d 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -41,7 +41,9 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 						)}
 					</div>
 				</TableCell>
-				<TableCell>{interception.started_at}</TableCell>
+				<TableCell>
+					{new Date(interception.started_at).toLocaleString()}
+				</TableCell>
 				<TableCell>{interception.initiator_id}</TableCell>
 				<TableCell>
 					{hasPrompt && interception.user_prompts[0].prompt}

From ebf2e91ce06d43ea442fc8301c5b78413a97a669 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 21 Oct 2025 00:36:19 +0000
Subject: [PATCH 15/64] feat: add storybook generation

---
 .../RequestLogsPageView.stories.tsx           | 32 +++++++++++++++++++
 site/src/testHelpers/entities.ts              | 22 +++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
new file mode 100644
index 0000000000000..f7dadcd6859b8
--- /dev/null
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
@@ -0,0 +1,32 @@
+import { MockInterception } from "testHelpers/entities";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RequestLogsPageView } from "./RequestLogsPageView";
+
+const meta: Meta<typeof RequestLogsPageView> = {
+	title: "pages/AIGovernancePage/RequestLogsPageView",
+	component: RequestLogsPageView,
+	args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof RequestLogsPageView>;
+
+export const NotEnabled: Story = {
+	args: {
+		isRequestLogsVisible: false,
+	},
+};
+
+export const WithLogs: Story = {
+	args: {
+		isRequestLogsVisible: true,
+		interceptions: [MockInterception],
+	},
+};
+
+export const EmptyLogs: Story = {
+	args: {
+		isRequestLogsVisible: true,
+		interceptions: [],
+	},
+};
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index 2b3ff41dda820..fe6a68f0a61b8 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -5057,3 +5057,25 @@ export const MockNewTaskData = {
 		},
 	},
 };
+
+export const MockInterception: TypesGen.AIBridgeInterception = {
+	id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
+	initiator_id: "1ebb7622-e6ea-45b4-b244-dda30afc7238",
+	provider: "openai",
+	model: "gpt-4o",
+	started_at: "2022-05-17T17:39:01.382927298Z",
+	token_usages: [
+		{
+			id: "32e7fd17-24be-46b9-b867-2f0adfd42aff",
+			interception_id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
+			provider_response_id: "res_1234567890",
+			input_tokens: 5,
+			output_tokens: 1,
+			metadata: {},
+			created_at: "2022-05-17T17:39:01.382927298Z",
+		},
+	],
+	metadata: {},
+	user_prompts: [],
+	tool_usages: [],
+};

From 37df869709e5d39f8472abecb214e40dfe05db4d Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 21 Oct 2025 23:29:55 +0000
Subject: [PATCH 16/64] chore: resolve build

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx       | 2 +-
 site/src/testHelpers/entities.ts                            | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 3664ef4e3651d..5f0529425f12a 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -44,7 +44,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 				<TableCell>
 					{new Date(interception.started_at).toLocaleString()}
 				</TableCell>
-				<TableCell>{interception.initiator_id}</TableCell>
+				<TableCell>{interception.initiator.username}</TableCell>
 				<TableCell>
 					{hasPrompt && interception.user_prompts[0].prompt}
 				</TableCell>
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index fe6a68f0a61b8..f141d7d3d9de6 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -5060,7 +5060,11 @@ export const MockNewTaskData = {
 
 export const MockInterception: TypesGen.AIBridgeInterception = {
 	id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
-	initiator_id: "1ebb7622-e6ea-45b4-b244-dda30afc7238",
+	initiator: {
+		id: "1ebb7622-e6ea-45b4-b244-dda30afc7238",
+		username: "testuser",
+		avatar_url: "https://example.com/avatar.png",
+	},
 	provider: "openai",
 	model: "gpt-4o",
 	started_at: "2022-05-17T17:39:01.382927298Z",

From f2824702ff5fbc8b93355e634a4d204322e06ae2 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 21 Oct 2025 23:53:24 +0000
Subject: [PATCH 17/64] feat: use `usePaginatedQuery()` and
 `<PaginationContainer />`

---
 site/src/api/queries/aiBridge.ts              | 14 +++--
 .../RequestLogsPage/RequestLogsPage.tsx       | 11 ++--
 .../RequestLogsPage/RequestLogsPageView.tsx   | 53 +++++++++++--------
 3 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/site/src/api/queries/aiBridge.ts b/site/src/api/queries/aiBridge.ts
index 502021455ecbf..43d8c6a3a8ef4 100644
--- a/site/src/api/queries/aiBridge.ts
+++ b/site/src/api/queries/aiBridge.ts
@@ -1,10 +1,16 @@
 import { API } from "api/api";
+import type { AIBridgeListInterceptionsResponse } from "api/typesGenerated";
+import { useFilterParamsKey } from "components/Filter/Filter";
+import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
 
-const getListInterceptionsQueryKey = () => ["aiBridgeInterceptions"];
-
-export const listInterceptions = () => {
+export const paginatedInterceptions = (
+	searchParams: URLSearchParams,
+): UsePaginatedQueryOptions<AIBridgeListInterceptionsResponse, string> => {
 	return {
-		queryKey: getListInterceptionsQueryKey(),
+		queryPayload: () => searchParams.get(useFilterParamsKey) ?? "",
+		queryKey: ({ payload, pageNumber }) => {
+			return ["aiBridgeInterceptions", payload, pageNumber] as const;
+		},
 		queryFn: () => API.experimental.getAIBridgeInterceptions(),
 	};
 };
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index 3adb18dc2b202..2b59d6d70dea1 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -1,7 +1,8 @@
-import { listInterceptions } from "api/queries/aiBridge";
+import { paginatedInterceptions } from "api/queries/aiBridge";
+import { usePaginatedQuery } from "hooks/usePaginatedQuery";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
-import { useQuery } from "react-query";
+import { useSearchParams } from "react-router";
 import { pageTitle } from "utils/page";
 import { RequestLogsPageView } from "./RequestLogsPageView";
 
@@ -13,7 +14,10 @@ const RequestLogsPage: FC = () => {
 	// see: https://github.com/coder/coder/issues/14798
 	const isRequestLogsVisible = feats.aibridge || false;
 
-	const interceptionsQuery = useQuery(listInterceptions());
+	const [searchParams, _setSearchParams] = useSearchParams();
+	const interceptionsQuery = usePaginatedQuery(
+		paginatedInterceptions(searchParams),
+	);
 
 	return (
 		<>
@@ -23,6 +27,7 @@ const RequestLogsPage: FC = () => {
 				isLoading={interceptionsQuery.isLoading}
 				isRequestLogsVisible={isRequestLogsVisible}
 				interceptions={interceptionsQuery.data?.results}
+				interceptionsQuery={interceptionsQuery}
 			/>
 		</>
 	);
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index 346dfecb185f8..c1d35977de0d6 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -1,4 +1,8 @@
 import type { AIBridgeInterception } from "api/typesGenerated";
+import {
+	PaginationContainer,
+	type PaginationResult,
+} from "components/PaginationWidget/PaginationContainer";
 import { Paywall } from "components/Paywall/Paywall";
 import {
 	Table,
@@ -17,12 +21,14 @@ interface RequestLogsPageViewProps {
 	isLoading: boolean;
 	isRequestLogsVisible: boolean;
 	interceptions?: readonly AIBridgeInterception[];
+	interceptionsQuery: PaginationResult;
 }
 
 export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 	isLoading,
 	isRequestLogsVisible,
 	interceptions,
+	interceptionsQuery,
 }) => {
 	if (!isRequestLogsVisible) {
 		return (
@@ -35,26 +41,31 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 	}
 
 	return (
-		<Table>
-			<TableHeader>
-				<TableRow>
-					<TableHead></TableHead>
-					<TableHead>Timestamp</TableHead>
-					<TableHead>User</TableHead>
-					<TableHead>Prompt</TableHead>
-					<TableHead>Tokens</TableHead>
-					<TableHead>Tool Calls</TableHead>
-				</TableRow>
-			</TableHeader>
-			<TableBody>
-				{isLoading && <TableLoader />}
-				{interceptions?.length === 0 && (
-					<TableEmpty message={"No request logs available"} />
-				)}
-				{interceptions?.map((interception) => (
-					<RequestLogsRow interception={interception} key={interception.id} />
-				))}
-			</TableBody>
-		</Table>
+		<PaginationContainer
+			query={interceptionsQuery}
+			paginationUnitLabel="interceptions"
+		>
+			<Table>
+				<TableHeader>
+					<TableRow>
+						<TableHead></TableHead>
+						<TableHead>Timestamp</TableHead>
+						<TableHead>User</TableHead>
+						<TableHead>Prompt</TableHead>
+						<TableHead>Tokens</TableHead>
+						<TableHead>Tool Calls</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{isLoading && <TableLoader />}
+					{interceptions?.length === 0 && (
+						<TableEmpty message={"No request logs available"} />
+					)}
+					{interceptions?.map((interception) => (
+						<RequestLogsRow interception={interception} key={interception.id} />
+					))}
+				</TableBody>
+			</Table>
+		</PaginationContainer>
 	);
 };

From 4f09456bfd9ec781ea1153b9fc88697ca22ed36b Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 22 Oct 2025 02:17:59 +0000
Subject: [PATCH 18/64] feat: implement pagination

---
 site/src/api/api.ts              | 15 +++++++++++----
 site/src/api/queries/aiBridge.ts |  7 ++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 665d13c040bec..4ce1b5a59aaa1 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -2664,6 +2664,11 @@ class ApiMethods {
 	};
 }
 
+// TODO: Generate this
+export interface AIBridgeInterceptionsRequest extends TypesGen.Pagination {
+	q?: string;
+}
+
 // Experimental API methods call endpoints under the /api/experimental/ prefix.
 // These endpoints are not stable and may change or be removed at any time.
 //
@@ -2749,11 +2754,13 @@ class ExperimentalApiMethods {
 		});
 	};
 
-	getAIBridgeInterceptions = async () => {
+	getAIBridgeInterceptions = async (options: AIBridgeInterceptionsRequest) => {
+		const url = getURLWithSearchParams(
+			"/api/experimental/aibridge/interceptions",
+			options,
+		);
 		const response =
-			await this.axios.get<TypesGen.AIBridgeListInterceptionsResponse>(
-				"/api/experimental/aibridge/interceptions",
-			);
+			await this.axios.get<TypesGen.AIBridgeListInterceptionsResponse>(url);
 		return response.data;
 	};
 }
diff --git a/site/src/api/queries/aiBridge.ts b/site/src/api/queries/aiBridge.ts
index 43d8c6a3a8ef4..ba623637e9333 100644
--- a/site/src/api/queries/aiBridge.ts
+++ b/site/src/api/queries/aiBridge.ts
@@ -11,6 +11,11 @@ export const paginatedInterceptions = (
 		queryKey: ({ payload, pageNumber }) => {
 			return ["aiBridgeInterceptions", payload, pageNumber] as const;
 		},
-		queryFn: () => API.experimental.getAIBridgeInterceptions(),
+		queryFn: ({ limit, offset, payload }) =>
+			API.experimental.getAIBridgeInterceptions({
+				offset,
+				limit,
+				q: payload,
+			}),
 	};
 };

From baad816d63710c3932bfa5382db8d0a6227b586b Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 22 Oct 2025 02:42:51 +0000
Subject: [PATCH 19/64] fix: improve opening button

---
 .../RequestLogsPage/RequestLogsPageView.tsx   |  1 -
 .../RequestLogsRow/RequestLogsRow.tsx         | 19 ++++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index c1d35977de0d6..ea874aa78b35f 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -48,7 +48,6 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 			<Table>
 				<TableHeader>
 					<TableRow>
-						<TableHead></TableHead>
 						<TableHead>Timestamp</TableHead>
 						<TableHead>User</TableHead>
 						<TableHead>Prompt</TableHead>
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 5f0529425f12a..5b3f614fc1a9c 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -1,4 +1,5 @@
 import type { AIBridgeInterception } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { TableCell, TableRow } from "components/Table/Table";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { type FC, useState } from "react";
@@ -27,19 +28,23 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 				onClick={() => setIsOpen(!isOpen)}
 			>
 				<TableCell>
-					<div
-						css={{
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-						}}
+					<Button
+						variant="subtle"
+						size="sm"
+						className={cn([
+							isOpen && "text-content-primary",
+							"p-0 h-auto min-w-0 align-middle",
+						])}
+						onClick={() => setIsOpen(!isOpen)}
 					>
 						{isOpen ? (
 							<ChevronDownIcon size={16} />
 						) : (
 							<ChevronRightIcon size={16} />
 						)}
-					</div>
+						<span className="sr-only">({isOpen ? "Hide" : "Show more"})</span>
+						{new Date(interception.started_at).toLocaleString()}
+					</Button>
 				</TableCell>
 				<TableCell>
 					{new Date(interception.started_at).toLocaleString()}

From 32ae2924bd708026e115c474b8209ec9a01b08f3 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 22 Oct 2025 02:43:26 +0000
Subject: [PATCH 20/64] fix: show useravatar and username

---
 .../RequestLogsRow/RequestLogsRow.tsx                | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 5b3f614fc1a9c..afe6036cfcbab 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -1,4 +1,5 @@
 import type { AIBridgeInterception } from "api/typesGenerated";
+import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import { TableCell, TableRow } from "components/Table/Table";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
@@ -47,9 +48,16 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 					</Button>
 				</TableCell>
 				<TableCell>
-					{new Date(interception.started_at).toLocaleString()}
+					<div css={{ display: "flex", alignItems: "center", gap: 12 }}>
+						<Avatar
+							fallback={interception.initiator.username}
+							src={interception.initiator.avatar_url}
+						/>
+						<div css={{ fontWeight: 500 }}>
+							{interception.initiator.username}
+						</div>
+					</div>
 				</TableCell>
-				<TableCell>{interception.initiator.username}</TableCell>
 				<TableCell>
 					{hasPrompt && interception.user_prompts[0].prompt}
 				</TableCell>

From 0d4bd15cbe982efb98010d2c934fd9164ab2b9b3 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 22 Oct 2025 02:43:53 +0000
Subject: [PATCH 21/64] fix: improve rendered content from json blob

---
 .../RequestLogsRow/RequestLogsRow.tsx         | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index afe6036cfcbab..99082819bb165 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -66,16 +66,34 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 			</TableRow>
 			{isOpen && (
 				<TableRow>
-					<TableCell colSpan={999}>
-						<pre>
-							{JSON.stringify(
-								{
-									interception,
-								},
-								null,
-								2,
-							)}
-						</pre>
+					<TableCell colSpan={999} className="p-4 border-t-0">
+						<dl
+							className={cn([
+								"text-xs text-content-secondary",
+								"m-0 grid grid-cols-[auto_1fr] gap-x-4 items-center",
+								"[&_dd]:text-content-primary [&_dd]:font-mono [&_dd]:leading-[22px] [&_dt]:font-medium",
+							])}
+						>
+							<dt>Request ID:</dt>
+							<dd data-chromatic="ignore">{interception.id}</dd>
+
+							<dt>Timestamp:</dt>
+							<dd data-chromatic="ignore">
+								{new Date(interception.started_at).toLocaleString()}
+							</dd>
+
+							<dt>Initiator:</dt>
+							<dd data-chromatic="ignore">{interception.initiator.username}</dd>
+
+							<dt>Model:</dt>
+							<dd data-chromatic="ignore">{interception.model}</dd>
+
+							<dt>Total Tokens:</dt>
+							<dd data-chromatic="ignore">{tokens}</dd>
+
+							<dt>Tool Calls:</dt>
+							<dd data-chromatic="ignore">{interception.tool_usages.length}</dd>
+						</dl>
 					</TableCell>
 				</TableRow>
 			)}

From 5dc3679126e05265d57a727496cbdc123df34fae Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 22 Oct 2025 02:44:15 +0000
Subject: [PATCH 22/64] chore: remove redundant `onclick`

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 99082819bb165..e0d3a5295d962 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -26,7 +26,6 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 		<>
 			<TableRow
 				className={cn("select-none cursor-pointer hover:bg-surface-secondary")}
-				onClick={() => setIsOpen(!isOpen)}
 			>
 				<TableCell>
 					<Button

From 03467601478ba3fd1035b6da58c5af442e69002b Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 22 Oct 2025 09:43:27 +0000
Subject: [PATCH 23/64] fix: improve the gaps in content

---
 .../RequestLogsRow/RequestLogsRow.tsx         | 88 ++++++++++++++-----
 1 file changed, 66 insertions(+), 22 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index e0d3a5295d962..6628cb340ab91 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -66,33 +66,77 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 			{isOpen && (
 				<TableRow>
 					<TableCell colSpan={999} className="p-4 border-t-0">
-						<dl
-							className={cn([
-								"text-xs text-content-secondary",
-								"m-0 grid grid-cols-[auto_1fr] gap-x-4 items-center",
-								"[&_dd]:text-content-primary [&_dd]:font-mono [&_dd]:leading-[22px] [&_dt]:font-medium",
-							])}
-						>
-							<dt>Request ID:</dt>
-							<dd data-chromatic="ignore">{interception.id}</dd>
+						<div className="flex flex-col gap-4">
+							<dl
+								className={cn([
+									"text-xs text-content-secondary",
+									"m-0 grid grid-cols-[auto_1fr] gap-x-4 items-center",
+									"[&_dd]:text-content-primary [&_dd]:font-mono [&_dd]:leading-[22px] [&_dt]:font-medium",
+								])}
+							>
+								<dt>Request ID:</dt>
+								<dd data-chromatic="ignore">{interception.id}</dd>
 
-							<dt>Timestamp:</dt>
-							<dd data-chromatic="ignore">
-								{new Date(interception.started_at).toLocaleString()}
-							</dd>
+								<dt>Timestamp:</dt>
+								<dd data-chromatic="ignore">
+									{new Date(interception.started_at).toLocaleString()}
+								</dd>
 
-							<dt>Initiator:</dt>
-							<dd data-chromatic="ignore">{interception.initiator.username}</dd>
+								<dt>Initiator:</dt>
+								<dd data-chromatic="ignore">
+									{interception.initiator.username}
+								</dd>
 
-							<dt>Model:</dt>
-							<dd data-chromatic="ignore">{interception.model}</dd>
+								<dt>Model:</dt>
+								<dd data-chromatic="ignore">{interception.model}</dd>
 
-							<dt>Total Tokens:</dt>
-							<dd data-chromatic="ignore">{tokens}</dd>
+								<dt>Total Tokens:</dt>
+								<dd data-chromatic="ignore">{tokens}</dd>
 
-							<dt>Tool Calls:</dt>
-							<dd data-chromatic="ignore">{interception.tool_usages.length}</dd>
-						</dl>
+								<dt>Tool Calls:</dt>
+								<dd data-chromatic="ignore">
+									{interception.tool_usages.length}
+								</dd>
+							</dl>
+
+							{interception.user_prompts.length > 0 && (
+								<div className="flex flex-col gap-2">
+									<div>Prompts</div>
+									<div
+										className={"bg-surface-secondary rounded-md p-4"}
+										data-chromatic="ignore"
+									>
+										{interception.user_prompts.map((prompt) => prompt.prompt)}
+									</div>
+								</div>
+							)}
+
+							{interception.tool_usages.length > 0 && (
+								<div className="flex flex-col gap-2">
+									<div>Tool Usages</div>
+									<div
+										className={"bg-surface-secondary rounded-md p-4"}
+										data-chromatic="ignore"
+									>
+										{interception.tool_usages.map((toolUsage) => {
+											return (
+												<dl
+													key={toolUsage.id}
+													className={cn([
+														"text-xs text-content-secondary",
+														"m-0 grid grid-cols-[auto_1fr] gap-x-4 items-center",
+														"[&_dt]:text-content-primary [&_dd]:font-mono [&_dt]:leading-[22px] [&_dt]:font-medium",
+													])}
+												>
+													<dt>{toolUsage.tool}</dt>
+													<dd>{toolUsage.input}</dd>
+												</dl>
+											);
+										})}
+									</div>
+								</div>
+							)}
+						</div>
 					</TableCell>
 				</TableRow>
 			)}

From 8ef420793cf271116fe23e11aa036c1573cfc0ce Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 22 Oct 2025 09:45:11 +0000
Subject: [PATCH 24/64] fix: remove redundant `cursor-pointer`

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx         | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 6628cb340ab91..4fa7f6d92ea49 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -24,9 +24,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 
 	return (
 		<>
-			<TableRow
-				className={cn("select-none cursor-pointer hover:bg-surface-secondary")}
-			>
+			<TableRow className={cn("select-none hover:bg-surface-secondary")}>
 				<TableCell>
 					<Button
 						variant="subtle"

From c0113b90b4f7804422544ea8c8ba5db88c7c0bc8 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 23 Oct 2025 03:27:04 +0000
Subject: [PATCH 25/64] feat: implement filtering, for users

---
 .../RequestLogsPage/RequestLogsFilter.tsx     | 37 +++++++++++
 .../RequestLogsPage/RequestLogsPage.tsx       | 27 +++++++-
 .../RequestLogsPage/RequestLogsPageView.tsx   | 62 +++++++++++--------
 3 files changed, 98 insertions(+), 28 deletions(-)
 create mode 100644 site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsFilter.tsx

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsFilter.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsFilter.tsx
new file mode 100644
index 0000000000000..47083534bdc1f
--- /dev/null
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsFilter.tsx
@@ -0,0 +1,37 @@
+import { Filter, MenuSkeleton, type useFilter } from "components/Filter/Filter";
+import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
+import type { FC } from "react";
+
+interface RequestLogsFilterProps {
+	filter: ReturnType<typeof useFilter>;
+	error?: unknown;
+	menus: {
+		user: UserFilterMenu;
+	};
+}
+
+export const RequestLogsFilter: FC<RequestLogsFilterProps> = ({
+	filter,
+	error,
+	menus,
+}) => {
+	return (
+		<Filter
+			filter={filter}
+			optionsSkeleton={<MenuSkeleton />}
+			isLoading={menus.user.isInitializing}
+			presets={[
+				{
+					name: "All requests",
+					query: "",
+				},
+				{
+					name: "My requests",
+					query: "initiator:me",
+				},
+			]}
+			error={error}
+			options={<UserMenu menu={menus.user} />}
+		/>
+	);
+};
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index 2b59d6d70dea1..bff7a79f7c46f 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -1,4 +1,6 @@
 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";
@@ -8,16 +10,30 @@ import { RequestLogsPageView } from "./RequestLogsPageView";
 
 const RequestLogsPage: FC = () => {
 	const feats = useFeatureVisibility();
-	// The "else false" is required if audit_log is undefined.
+	// The "else false" is required if aibridge is undefined.
 	// It may happen if owner removes the license.
 	//
 	// see: https://github.com/coder/coder/issues/14798
 	const isRequestLogsVisible = feats.aibridge || false;
 
-	const [searchParams, _setSearchParams] = useSearchParams();
+	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,
+			}),
+	});
 
 	return (
 		<>
@@ -28,6 +44,13 @@ const RequestLogsPage: FC = () => {
 				isRequestLogsVisible={isRequestLogsVisible}
 				interceptions={interceptionsQuery.data?.results}
 				interceptionsQuery={interceptionsQuery}
+				filterProps={{
+					filter,
+					error: interceptionsQuery.error,
+					menus: {
+						user: userMenu,
+					},
+				}}
 			/>
 		</>
 	);
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index ea874aa78b35f..04af3ad74495f 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -13,8 +13,9 @@ import {
 } from "components/Table/Table";
 import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import { TableLoader } from "components/TableLoader/TableLoader";
-import type { FC } from "react";
+import type { ComponentProps, FC } from "react";
 import { docs } from "utils/docs";
+import { RequestLogsFilter } from "./RequestLogsFilter";
 import { RequestLogsRow } from "./RequestLogsRow/RequestLogsRow";
 
 interface RequestLogsPageViewProps {
@@ -22,6 +23,7 @@ interface RequestLogsPageViewProps {
 	isRequestLogsVisible: boolean;
 	interceptions?: readonly AIBridgeInterception[];
 	interceptionsQuery: PaginationResult;
+	filterProps: ComponentProps<typeof RequestLogsFilter>;
 }
 
 export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
@@ -29,6 +31,7 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 	isRequestLogsVisible,
 	interceptions,
 	interceptionsQuery,
+	filterProps,
 }) => {
 	if (!isRequestLogsVisible) {
 		return (
@@ -41,30 +44,37 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 	}
 
 	return (
-		<PaginationContainer
-			query={interceptionsQuery}
-			paginationUnitLabel="interceptions"
-		>
-			<Table>
-				<TableHeader>
-					<TableRow>
-						<TableHead>Timestamp</TableHead>
-						<TableHead>User</TableHead>
-						<TableHead>Prompt</TableHead>
-						<TableHead>Tokens</TableHead>
-						<TableHead>Tool Calls</TableHead>
-					</TableRow>
-				</TableHeader>
-				<TableBody>
-					{isLoading && <TableLoader />}
-					{interceptions?.length === 0 && (
-						<TableEmpty message={"No request logs available"} />
-					)}
-					{interceptions?.map((interception) => (
-						<RequestLogsRow interception={interception} key={interception.id} />
-					))}
-				</TableBody>
-			</Table>
-		</PaginationContainer>
+		<>
+			<RequestLogsFilter {...filterProps} />
+
+			<PaginationContainer
+				query={interceptionsQuery}
+				paginationUnitLabel="interceptions"
+			>
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>Timestamp</TableHead>
+							<TableHead>User</TableHead>
+							<TableHead>Prompt</TableHead>
+							<TableHead>Tokens</TableHead>
+							<TableHead>Tool Calls</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{isLoading && <TableLoader />}
+						{interceptions?.length === 0 && (
+							<TableEmpty message={"No request logs available"} />
+						)}
+						{interceptions?.map((interception) => (
+							<RequestLogsRow
+								interception={interception}
+								key={interception.id}
+							/>
+						))}
+					</TableBody>
+				</Table>
+			</PaginationContainer>
+		</>
 	);
 };

From ecdc47b09a4f6401eb916c2d420fc4b832682672 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 23 Oct 2025 06:51:24 +0000
Subject: [PATCH 26/64] feat: implement filter, provider

---
 .../RequestLogsPage/RequestLogsPage.tsx       | 11 ++++
 .../RequestLogsPage/RequestLogsPageView.tsx   |  2 +-
 .../{ => filter}/RequestLogsFilter.tsx        |  9 ++-
 .../RequestLogsPage/filter/filter.tsx         | 58 +++++++++++++++++++
 4 files changed, 78 insertions(+), 2 deletions(-)
 rename site/src/pages/AIGovernancePage/RequestLogsPage/{ => filter}/RequestLogsFilter.tsx (76%)
 create mode 100644 site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index bff7a79f7c46f..8af92d91b9c28 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -6,6 +6,7 @@ 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 = () => {
@@ -35,6 +36,15 @@ const RequestLogsPage: FC = () => {
 			}),
 	});
 
+	const providerMenu = useProviderFilterMenu({
+		value: filter.values.provider,
+		onChange: (option) =>
+			filter.update({
+				...filter.values,
+				provider: option?.value,
+			}),
+	});
+
 	return (
 		<>
 			<title>{pageTitle("AI Governance", "Request Logs")}</title>
@@ -49,6 +59,7 @@ const RequestLogsPage: FC = () => {
 					error: interceptionsQuery.error,
 					menus: {
 						user: userMenu,
+						provider: providerMenu,
 					},
 				}}
 			/>
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index 04af3ad74495f..b8c36916b2663 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -15,7 +15,7 @@ import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import type { ComponentProps, FC } from "react";
 import { docs } from "utils/docs";
-import { RequestLogsFilter } from "./RequestLogsFilter";
+import { RequestLogsFilter } from "./filter/RequestLogsFilter";
 import { RequestLogsRow } from "./RequestLogsRow/RequestLogsRow";
 
 interface RequestLogsPageViewProps {
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsFilter.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/filter/RequestLogsFilter.tsx
similarity index 76%
rename from site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsFilter.tsx
rename to site/src/pages/AIGovernancePage/RequestLogsPage/filter/RequestLogsFilter.tsx
index 47083534bdc1f..afc5c969fb2d0 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsFilter.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/filter/RequestLogsFilter.tsx
@@ -1,12 +1,14 @@
 import { Filter, MenuSkeleton, type useFilter } from "components/Filter/Filter";
 import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
 import type { FC } from "react";
+import { ProviderFilter, type ProviderFilterMenu } from "./filter";
 
 interface RequestLogsFilterProps {
 	filter: ReturnType<typeof useFilter>;
 	error?: unknown;
 	menus: {
 		user: UserFilterMenu;
+		provider: ProviderFilterMenu;
 	};
 }
 
@@ -31,7 +33,12 @@ export const RequestLogsFilter: FC<RequestLogsFilterProps> = ({
 				},
 			]}
 			error={error}
-			options={<UserMenu menu={menus.user} />}
+			options={
+				<>
+					<UserMenu menu={menus.user} />
+					<ProviderFilter menu={menus.provider} />
+				</>
+			}
 		/>
 	);
 };
diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx
new file mode 100644
index 0000000000000..d2cd9c3eb8a9c
--- /dev/null
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx
@@ -0,0 +1,58 @@
+import {
+	type UseFilterMenuOptions,
+	useFilterMenu,
+} from "components/Filter/menu";
+import {
+	SelectFilter,
+	type SelectFilterOption,
+} from "components/Filter/SelectFilter";
+
+const AIBRIDGE_PROVIDERS: SelectFilterOption[] = [
+	{
+		label: "OpenAI",
+		value: "openai",
+	},
+	{
+		label: "Anthropic",
+		value: "anthropic",
+	},
+];
+
+export const useProviderFilterMenu = ({
+	value,
+	onChange,
+	enabled,
+}: Pick<UseFilterMenuOptions, "value" | "onChange" | "enabled">) => {
+	return useFilterMenu({
+		id: "provider",
+		getSelectedOption: async () =>
+			AIBRIDGE_PROVIDERS.find((option) => option.value === value) ?? null,
+		getOptions: async () => {
+			return AIBRIDGE_PROVIDERS;
+		},
+		value,
+		onChange,
+		enabled,
+	});
+};
+
+export type ProviderFilterMenu = ReturnType<typeof useProviderFilterMenu>;
+
+interface ProviderFilterProps {
+	menu: ProviderFilterMenu;
+}
+
+export const ProviderFilter = ({ menu }: ProviderFilterProps) => {
+	return (
+		<SelectFilter
+			label={"Select provider"}
+			placeholder={"All providers"}
+			emptyText="No providers found"
+			options={menu.searchOptions}
+			onSelect={(option: SelectFilterOption | undefined): void =>
+				menu.selectOption(option)
+			}
+			selectedOption={menu.selectedOption ?? undefined}
+		/>
+	);
+};

From ec5f26ffb79bfe09663e0d0dfb2eb40651786579 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 23 Oct 2025 06:51:47 +0000
Subject: [PATCH 27/64] fix: move back to clickable row

---
 .../RequestLogsRow/RequestLogsRow.tsx             | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 4fa7f6d92ea49..8369f4273a5ca 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -1,6 +1,5 @@
 import type { AIBridgeInterception } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
-import { Button } from "components/Button/Button";
 import { TableCell, TableRow } from "components/Table/Table";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { type FC, useState } from "react";
@@ -24,16 +23,16 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 
 	return (
 		<>
-			<TableRow className={cn("select-none hover:bg-surface-secondary")}>
+			<TableRow
+				className={cn("select-none cursor-pointer hover:bg-surface-secondary")}
+				onClick={() => setIsOpen(!isOpen)}
+			>
 				<TableCell>
-					<Button
-						variant="subtle"
-						size="sm"
+					<div
 						className={cn([
+							"flex items-center gap-2",
 							isOpen && "text-content-primary",
-							"p-0 h-auto min-w-0 align-middle",
 						])}
-						onClick={() => setIsOpen(!isOpen)}
 					>
 						{isOpen ? (
 							<ChevronDownIcon size={16} />
@@ -42,7 +41,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 						)}
 						<span className="sr-only">({isOpen ? "Hide" : "Show more"})</span>
 						{new Date(interception.started_at).toLocaleString()}
-					</Button>
+					</div>
 				</TableCell>
 				<TableCell>
 					<div css={{ display: "flex", alignItems: "center", gap: 12 }}>

From 0a556a0e84e6725036cebf353791e7fca26f3e52 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Fri, 24 Oct 2025 01:37:00 +0000
Subject: [PATCH 28/64] fix: resolve padding on error not existing

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 8369f4273a5ca..d34ccb3339562 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -126,7 +126,16 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 													])}
 												>
 													<dt>{toolUsage.tool}</dt>
-													<dd>{toolUsage.input}</dd>
+													<dd>
+														<div className="flex flex-col gap-2">
+															<div>{toolUsage.input}</div>
+															{toolUsage.invocation_error && (
+																<div className="text-content-destructive">
+																	{toolUsage.invocation_error}
+																</div>
+															)}
+														</div>
+													</dd>
 												</dl>
 											);
 										})}

From 126c72a4832f00bcd3ce174aff0eac6f88f45e09 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Fri, 24 Oct 2025 01:43:06 +0000
Subject: [PATCH 29/64] chore: remove export to pass CI (TODO still)

---
 site/src/api/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 4ce1b5a59aaa1..67e4763964e47 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -2665,7 +2665,7 @@ class ApiMethods {
 }
 
 // TODO: Generate this
-export interface AIBridgeInterceptionsRequest extends TypesGen.Pagination {
+interface AIBridgeInterceptionsRequest extends TypesGen.Pagination {
 	q?: string;
 }
 

From e7d32a2530ba36f9c251c8fd2dd108cc8af92528 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Fri, 24 Oct 2025 01:48:51 +0000
Subject: [PATCH 30/64] chore: refactor

---
 .../RequestLogsRow/RequestLogsRow.tsx              | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index d34ccb3339562..02dc4cbffca3c 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -12,7 +12,7 @@ type RequestLogsRowProps = {
 export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 	const [isOpen, setIsOpen] = useState(false);
 
-	const hasPrompt = interception.user_prompts.length > 0;
+	const [firstPrompt] = interception.user_prompts;
 
 	const tokens = interception.token_usages.reduce(
 		(acc, tokenUsage) =>
@@ -24,7 +24,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 	return (
 		<>
 			<TableRow
-				className={cn("select-none cursor-pointer hover:bg-surface-secondary")}
+				className={"select-none cursor-pointer hover:bg-surface-secondary"}
 				onClick={() => setIsOpen(!isOpen)}
 			>
 				<TableCell>
@@ -44,19 +44,15 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 					</div>
 				</TableCell>
 				<TableCell>
-					<div css={{ display: "flex", alignItems: "center", gap: 12 }}>
+					<div className="flex items-center gap-3">
 						<Avatar
 							fallback={interception.initiator.username}
 							src={interception.initiator.avatar_url}
 						/>
-						<div css={{ fontWeight: 500 }}>
-							{interception.initiator.username}
-						</div>
+						<div className="font-medium">{interception.initiator.username}</div>
 					</div>
 				</TableCell>
-				<TableCell>
-					{hasPrompt && interception.user_prompts[0].prompt}
-				</TableCell>
+				<TableCell>{firstPrompt?.prompt}</TableCell>
 				<TableCell>{tokens}</TableCell>
 				<TableCell>{toolCalls}</TableCell>
 			</TableRow>

From a47a8857124a6e86af670515c318f2449a5e0d21 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Fri, 24 Oct 2025 01:50:50 +0000
Subject: [PATCH 31/64] chore: improve rendering logic on table

---
 .../RequestLogsPage/RequestLogsPageView.tsx    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
index b8c36916b2663..8592206bcdf33 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -62,16 +62,18 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 						</TableRow>
 					</TableHeader>
 					<TableBody>
-						{isLoading && <TableLoader />}
-						{interceptions?.length === 0 && (
+						{isLoading ? (
+							<TableLoader />
+						) : interceptions?.length === 0 ? (
 							<TableEmpty message={"No request logs available"} />
+						) : (
+							interceptions?.map((interception) => (
+								<RequestLogsRow
+									interception={interception}
+									key={interception.id}
+								/>
+							))
 						)}
-						{interceptions?.map((interception) => (
-							<RequestLogsRow
-								interception={interception}
-								key={interception.id}
-							/>
-						))}
 					</TableBody>
 				</Table>
 			</PaginationContainer>

From cec12d33e34bd13395362a05fee1fe91a33308c5 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Fri, 24 Oct 2025 02:04:34 +0000
Subject: [PATCH 32/64] feat: add a tooltip to describe the feature

---
 .../AIGovernanceHelpTooltip.tsx               | 35 +++++++++++++++++++
 .../AIGovernancePage/AIGovernanceLayout.tsx   |  2 ++
 2 files changed, 37 insertions(+)
 create mode 100644 site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx

diff --git a/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx b/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
new file mode 100644
index 0000000000000..33342d53ed779
--- /dev/null
+++ b/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
@@ -0,0 +1,35 @@
+import {
+	HelpTooltip,
+	HelpTooltipContent,
+	HelpTooltipIconTrigger,
+	HelpTooltipLink,
+	HelpTooltipLinksGroup,
+	HelpTooltipText,
+	HelpTooltipTitle,
+} from "components/HelpTooltip/HelpTooltip";
+import type { FC } from "react";
+import { docs } from "utils/docs";
+
+const Language = {
+	title: "What is AI Governance",
+	body: "AI Governance is a proxy that unifies and audits LLM usage across your organization.",
+	docs: "What we track",
+};
+
+export const AIGovernanceHelpTooltip: FC = () => {
+	return (
+		<HelpTooltip>
+			<HelpTooltipIconTrigger />
+
+			<HelpTooltipContent>
+				<HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
+				<HelpTooltipText>{Language.body}</HelpTooltipText>
+				<HelpTooltipLinksGroup>
+					<HelpTooltipLink href={docs("/admin/security/audit-logs")}>
+						{Language.docs}
+					</HelpTooltipLink>
+				</HelpTooltipLinksGroup>
+			</HelpTooltipContent>
+		</HelpTooltip>
+	);
+};
diff --git a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
index 5c5d0580bb9a7..f8b35a43ebe9d 100644
--- a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
+++ b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
@@ -7,6 +7,7 @@ import {
 import { Stack } from "components/Stack/Stack";
 import type { FC, PropsWithChildren } from "react";
 import { Outlet } from "react-router";
+import { AIGovernanceHelpTooltip } from "./AIGovernanceHelpTooltip";
 
 const Language = {
 	title: "AI Governance",
@@ -22,6 +23,7 @@ const AIGovernanceLayout: FC<PropsWithChildren> = ({
 				<PageHeaderTitle>
 					<Stack direction="row" spacing={1} alignItems="center">
 						<span>{Language.title}</span>
+						<AIGovernanceHelpTooltip />
 					</Stack>
 				</PageHeaderTitle>
 				<PageHeaderSubtitle>{Language.subtitle}</PageHeaderSubtitle>

From 256f66fe00e071d981ea62c7c1ec0e8f382c752f Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Fri, 24 Oct 2025 04:09:53 +0000
Subject: [PATCH 33/64] fix: ensure that experiment is enabled

---
 .../AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index 8af92d91b9c28..f399826ee1340 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -2,6 +2,7 @@ import { paginatedInterceptions } from "api/queries/aiBridge";
 import { useFilter } from "components/Filter/Filter";
 import { useUserFilterMenu } from "components/Filter/UserFilter";
 import { usePaginatedQuery } from "hooks/usePaginatedQuery";
+import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
 import { useSearchParams } from "react-router";
@@ -11,11 +12,13 @@ import { RequestLogsPageView } from "./RequestLogsPageView";
 
 const RequestLogsPage: FC = () => {
 	const feats = useFeatureVisibility();
+	const { experiments } = useDashboard();
 	// The "else false" is required if aibridge is undefined.
 	// It may happen if owner removes the license.
 	//
 	// see: https://github.com/coder/coder/issues/14798
-	const isRequestLogsVisible = feats.aibridge || false;
+	const isRequestLogsVisible =
+		(feats.aibridge && experiments.includes("aibridge")) || false;
 
 	const [searchParams, setSearchParams] = useSearchParams();
 	const interceptionsQuery = usePaginatedQuery(

From 6146518cd5d3270ad4364f3714aa04b1018ef984 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 27 Oct 2025 00:42:50 +0000
Subject: [PATCH 34/64] chore: resolve formatting

---
 .../modules/dashboard/Navbar/DeploymentDropdown.tsx |  6 +++++-
 site/src/router.tsx                                 | 13 ++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
index a9f43b9cbca5a..53e498e1bea21 100644
--- a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
+++ b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -117,7 +117,11 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 			)}
 			{canViewAIGovernance && (
 				<PopoverClose asChild>
-					<MenuItem component={NavLink} to="/aigovernance" css={styles.menuItem}>
+					<MenuItem
+						component={NavLink}
+						to="/aigovernance"
+						css={styles.menuItem}
+					>
 						AI Governance
 					</MenuItem>
 				</PopoverClose>
diff --git a/site/src/router.tsx b/site/src/router.tsx
index e64e22258614b..4e43356a717bb 100644
--- a/site/src/router.tsx
+++ b/site/src/router.tsx
@@ -334,8 +334,12 @@ const ProvisionerJobsPage = lazy(
 );
 const TasksPage = lazy(() => import("./pages/TasksPage/TasksPage"));
 const TaskPage = lazy(() => import("./pages/TaskPage/TaskPage"));
-const AIGovernanceLayout = lazy(() => import("./pages/AIGovernancePage/AIGovernanceLayout"));
-const AIGovernanceRequestLogsPage = lazy(() => import("./pages/AIGovernancePage/RequestLogsPage/RequestLogsPage"));
+const AIGovernanceLayout = lazy(
+	() => import("./pages/AIGovernancePage/AIGovernanceLayout"),
+);
+const AIGovernanceRequestLogsPage = lazy(
+	() => import("./pages/AIGovernancePage/RequestLogsPage/RequestLogsPage"),
+);
 
 const RoutesWithSuspense = () => {
 	return (
@@ -561,7 +565,10 @@ export const router = createBrowserRouter(
 
 					<Route path="/aigovernance" element={<AIGovernanceLayout />}>
 						<Route index element={<Navigate to="request-logs" replace />} />
-						<Route path="request-logs" element={<AIGovernanceRequestLogsPage />} />
+						<Route
+							path="request-logs"
+							element={<AIGovernanceRequestLogsPage />}
+						/>
 					</Route>
 
 					<Route path="/health" element={<HealthLayout />}>

From d3eb975ab90df56445c767b0c3154a2141cb2f27 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 27 Oct 2025 00:54:16 +0000
Subject: [PATCH 35/64] chore: resolve mismerged type

---
 site/src/testHelpers/entities.ts | 56 ++++++++++++++++----------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index 70b7233bb722f..9d87ca91eb2b6 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -4956,6 +4956,34 @@ export const MockPresets: TypesGen.Preset[] = [
 	},
 ];
 
+export const MockAIPromptPresets: TypesGen.Preset[] = [
+	{
+		ID: "ai-preset-1",
+		Name: "Code Review",
+		Description: "",
+		Icon: "",
+		Parameters: [
+			{ Name: "AI Prompt", Value: "Review the code for best practices" },
+			{ Name: "cpu", Value: "4" },
+			{ Name: "memory", Value: "8GB" },
+		],
+		Default: true,
+		DesiredPrebuildInstances: 0,
+	},
+	{
+		ID: "ai-preset-2",
+		Name: "Custom Prompt",
+		Description: "",
+		Icon: "",
+		Parameters: [
+			{ Name: "cpu", Value: "4" },
+			{ Name: "memory", Value: "8GB" },
+		],
+		Default: false,
+		DesiredPrebuildInstances: 0,
+	},
+];
+
 export const MockTask = {
 	id: "test-task",
 	name: "task-wild-test-123",
@@ -5012,34 +5040,6 @@ export const MockTasks = [
 	},
 ] satisfies TypesGen.Task[];
 
-export const MockAIPromptPresets: TypesGen.Preset[] = [
-	{
-		ID: "ai-preset-1",
-		Name: "Code Review",
-		Description: "",
-		Icon: "",
-		Parameters: [
-			{ Name: "AI Prompt", Value: "Review the code for best practices" },
-			{ Name: "cpu", Value: "4" },
-			{ Name: "memory", Value: "8GB" },
-		],
-		Default: true,
-		DesiredPrebuildInstances: 0,
-	},
-	{
-		ID: "ai-preset-2",
-		Name: "Custom Prompt",
-		Description: "",
-		Icon: "",
-		Parameters: [
-			{ Name: "cpu", Value: "4" },
-			{ Name: "memory", Value: "8GB" },
-		],
-		Default: false,
-		DesiredPrebuildInstances: 0,
-	},
-];
-
 export const MockInterception: TypesGen.AIBridgeInterception = {
 	id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
 	initiator: {

From 23719e6045e7574463132214ea9b62bfae4b5e2d Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 27 Oct 2025 01:50:48 +0000
Subject: [PATCH 36/64] fix: resolve todo type

---
 site/src/api/api.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 610c228e94002..6e784127b445b 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -2659,11 +2659,6 @@ class ApiMethods {
 	};
 }
 
-// TODO: Generate this
-interface AIBridgeInterceptionsRequest extends TypesGen.Pagination {
-	q?: string;
-}
-
 // Experimental API methods call endpoints under the /api/experimental/ prefix.
 // These endpoints are not stable and may change or be removed at any time.
 //
@@ -2756,7 +2751,7 @@ class ExperimentalApiMethods {
 		});
 	};
 
-	getAIBridgeInterceptions = async (options: AIBridgeInterceptionsRequest) => {
+	getAIBridgeInterceptions = async (options: SearchParamOptions) => {
 		const url = getURLWithSearchParams(
 			"/api/experimental/aibridge/interceptions",
 			options,

From 125097eefdefff9478b587cf2cc13e9200ed1aa0 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 27 Oct 2025 01:54:41 +0000
Subject: [PATCH 37/64] fix: resolve `pageTitle()` ordering

---
 .../pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index f399826ee1340..2b476a8d0ce07 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -50,7 +50,7 @@ const RequestLogsPage: FC = () => {
 
 	return (
 		<>
-			<title>{pageTitle("AI Governance", "Request Logs")}</title>
+			<title>{pageTitle("Request Logs", "AI Governance")}</title>
 
 			<RequestLogsPageView
 				isLoading={interceptionsQuery.isLoading}

From 18edcdb321788ef2fc93aefa46f87e8bf3097e00 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 28 Oct 2025 02:06:50 +0000
Subject: [PATCH 38/64] feat: resolve storybook story

---
 .../RequestLogsPageView.stories.tsx           | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
index f7dadcd6859b8..d1e6e99eff25a 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
@@ -1,7 +1,30 @@
 import { MockInterception } from "testHelpers/entities";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	getDefaultFilterProps,
+	MockMenu,
+} from "components/Filter/storyHelpers";
+import { mockSuccessResult } from "components/PaginationWidget/PaginationContainer.mocks";
+import type { UsePaginatedQueryResult } from "hooks/usePaginatedQuery";
+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,
@@ -20,7 +43,15 @@ export const NotEnabled: Story = {
 export const WithLogs: Story = {
 	args: {
 		isRequestLogsVisible: true,
-		interceptions: [MockInterception],
+		interceptions,
+		filterProps: {
+			...defaultFilterProps,
+		},
+		interceptionsQuery: {
+			...mockSuccessResult,
+			totalRecords: interceptions.length,
+			data: { interceptions, total: interceptions.length },
+		} as UsePaginatedQueryResult,
 	},
 };
 
@@ -28,5 +59,13 @@ export const EmptyLogs: Story = {
 	args: {
 		isRequestLogsVisible: true,
 		interceptions: [],
+		filterProps: {
+			...defaultFilterProps,
+		},
+		interceptionsQuery: {
+			...mockSuccessResult,
+			totalRecords: 0,
+			data: { interceptions: [], total: 0 },
+		} as UsePaginatedQueryResult,
 	},
 };

From 0b4bb34885d4ba1b72a5bdb28e0f0f34a4b70067 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 28 Oct 2025 02:50:36 +0000
Subject: [PATCH 39/64] feat: `Close` story on `<RequestLogsRow />`

---
 .../RequestLogsRow/RequestLogsRow.stories.tsx | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.stories.tsx

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.stories.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.stories.tsx
new file mode 100644
index 0000000000000..a32b4e8ebcd11
--- /dev/null
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.stories.tsx
@@ -0,0 +1,27 @@
+import { MockInterception } from "testHelpers/entities";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Table, TableBody } from "components/Table/Table";
+import { RequestLogsRow } from "./RequestLogsRow";
+
+const meta: Meta<typeof RequestLogsRow> = {
+	title: "pages/AIGovernancePage/RequestLogsPageView/RequestLogsRow",
+	component: RequestLogsRow,
+	decorators: [
+		(Story) => (
+			<Table>
+				<TableBody>
+					<Story />
+				</TableBody>
+			</Table>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof RequestLogsRow>;
+
+export const Close: Story = {
+	args: {
+		interception: MockInterception,
+	},
+};

From 12bdc9a2383a5053f905156bc4d1b2f4bca03023 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 28 Oct 2025 02:51:09 +0000
Subject: [PATCH 40/64] fix: refactor renames in `<RequestLogsPageView />`
 stories

---
 .../RequestLogsPage/RequestLogsPageView.stories.tsx         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
index d1e6e99eff25a..3af2664c5db9c 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
@@ -34,13 +34,13 @@ const meta: Meta<typeof RequestLogsPageView> = {
 export default meta;
 type Story = StoryObj<typeof RequestLogsPageView>;
 
-export const NotEnabled: Story = {
+export const Paywall: Story = {
 	args: {
 		isRequestLogsVisible: false,
 	},
 };
 
-export const WithLogs: Story = {
+export const Loaded: Story = {
 	args: {
 		isRequestLogsVisible: true,
 		interceptions,
@@ -55,7 +55,7 @@ export const WithLogs: Story = {
 	},
 };
 
-export const EmptyLogs: Story = {
+export const Empty: Story = {
 	args: {
 		isRequestLogsVisible: true,
 		interceptions: [],

From ec05db581fd1eda1c31b85eae96f2f3355b3dc5d Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 28 Oct 2025 02:51:23 +0000
Subject: [PATCH 41/64] feat: add `Loading` story in `<RequestLogsPageView />`
 story

---
 .../RequestLogsPageView.stories.tsx           | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
index 3af2664c5db9c..a52831e5df8f6 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
@@ -4,7 +4,10 @@ import {
 	getDefaultFilterProps,
 	MockMenu,
 } from "components/Filter/storyHelpers";
-import { mockSuccessResult } from "components/PaginationWidget/PaginationContainer.mocks";
+import {
+	mockInitialRenderResult,
+	mockSuccessResult,
+} from "components/PaginationWidget/PaginationContainer.mocks";
 import type { UsePaginatedQueryResult } from "hooks/usePaginatedQuery";
 import type { ComponentProps } from "react";
 import { RequestLogsPageView } from "./RequestLogsPageView";
@@ -69,3 +72,17 @@ export const Empty: Story = {
 		} as UsePaginatedQueryResult,
 	},
 };
+
+export const Loading: Story = {
+	args: {
+		isLoading: true,
+		isRequestLogsVisible: true,
+		interceptions: [],
+		filterProps: {
+			...defaultFilterProps,
+		},
+		interceptionsQuery: {
+			...mockInitialRenderResult,
+		} as UsePaginatedQueryResult,
+	},
+};

From ac869e1dba0886b02f2aea26c6381003258821c6 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 28 Oct 2025 04:19:24 +0000
Subject: [PATCH 42/64] fix: add `ended_at` to `testHelpers/entities`

---
 site/src/testHelpers/entities.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index 4bdc61e9cb71c..ac94ca1b2b28c 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -5061,6 +5061,7 @@ export const MockInterception: TypesGen.AIBridgeInterception = {
 	provider: "openai",
 	model: "gpt-4o",
 	started_at: "2022-05-17T17:39:01.382927298Z",
+	ended_at: "2022-05-17T17:39:01.382927298Z",
 	token_usages: [
 		{
 			id: "32e7fd17-24be-46b9-b867-2f0adfd42aff",

From e18640d188d4f05d9ca0926f4c9aa5891ae0d3d0 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 28 Oct 2025 05:57:09 +0000
Subject: [PATCH 43/64] feat: move to using `input` tokens and `output` tokens

---
 .../RequestLogsRow/RequestLogsRow.tsx         | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 02dc4cbffca3c..9e2335b6c1c3b 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -14,9 +14,12 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 
 	const [firstPrompt] = interception.user_prompts;
 
-	const tokens = interception.token_usages.reduce(
-		(acc, tokenUsage) =>
-			acc + tokenUsage.input_tokens + tokenUsage.output_tokens,
+	const inputTokens = interception.token_usages.reduce(
+		(acc, tokenUsage) => acc + tokenUsage.input_tokens,
+		0,
+	);
+	const outputTokens = interception.token_usages.reduce(
+		(acc, tokenUsage) => acc + tokenUsage.output_tokens,
 		0,
 	);
 	const toolCalls = interception.tool_usages.length;
@@ -53,7 +56,9 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 					</div>
 				</TableCell>
 				<TableCell>{firstPrompt?.prompt}</TableCell>
-				<TableCell>{tokens}</TableCell>
+				<TableCell>
+					{inputTokens} / {outputTokens}
+				</TableCell>
 				<TableCell>{toolCalls}</TableCell>
 			</TableRow>
 			{isOpen && (
@@ -83,8 +88,11 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 								<dt>Model:</dt>
 								<dd data-chromatic="ignore">{interception.model}</dd>
 
-								<dt>Total Tokens:</dt>
-								<dd data-chromatic="ignore">{tokens}</dd>
+								<dt>Input Tokens:</dt>
+								<dd data-chromatic="ignore">{inputTokens}</dd>
+
+								<dt>Output Tokens:</dt>
+								<dd data-chromatic="ignore">{outputTokens}</dd>
 
 								<dt>Tool Calls:</dt>
 								<dd data-chromatic="ignore">

From 7d6f8b30d74caba963771ac2c7dbdff31a8a757b Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 28 Oct 2025 06:01:04 +0000
Subject: [PATCH 44/64] feat: show end time if it exists

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 9e2335b6c1c3b..8aec2d89ecfdd 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -75,11 +75,20 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 								<dt>Request ID:</dt>
 								<dd data-chromatic="ignore">{interception.id}</dd>
 
-								<dt>Timestamp:</dt>
+								<dt>Start Time:</dt>
 								<dd data-chromatic="ignore">
 									{new Date(interception.started_at).toLocaleString()}
 								</dd>
 
+								{interception.ended_at && (
+									<>
+										<dt>End Time:</dt>
+										<dd data-chromatic="ignore">
+											{new Date(interception.ended_at).toLocaleString()}
+										</dd>
+									</>
+								)}
+
 								<dt>Initiator:</dt>
 								<dd data-chromatic="ignore">
 									{interception.initiator.username}

From a47f2bb0f7a66b750a4f330c81835c09a9f6528b Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 28 Oct 2025 13:27:01 +0000
Subject: [PATCH 45/64] chore: resolve docs link to `/docs/ai-coder/ai-bridge`

---
 site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx b/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
index 33342d53ed779..a1c90b5d457c0 100644
--- a/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
+++ b/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
@@ -25,7 +25,7 @@ export const AIGovernanceHelpTooltip: FC = () => {
 				<HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
 				<HelpTooltipText>{Language.body}</HelpTooltipText>
 				<HelpTooltipLinksGroup>
-					<HelpTooltipLink href={docs("/admin/security/audit-logs")}>
+					<HelpTooltipLink href={docs("/docs/ai-coder/ai-bridge")}>
 						{Language.docs}
 					</HelpTooltipLink>
 				</HelpTooltipLinksGroup>

From aeb7f29f82f6e2fce65c1a95ab1d7a09142dc845 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 28 Oct 2025 16:09:24 +0000
Subject: [PATCH 46/64] feat: add tooltips and iconography to `input/output` on
 table rows

---
 .../RequestLogsRow/RequestLogsRow.tsx         | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 8aec2d89ecfdd..8fa349f2fcb95 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -1,7 +1,18 @@
 import type { AIBridgeInterception } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { TableCell, TableRow } from "components/Table/Table";
-import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
+import {
+	ArrowDownIcon,
+	ArrowUpIcon,
+	ChevronDownIcon,
+	ChevronRightIcon,
+} from "lucide-react";
 import { type FC, useState } from "react";
 import { cn } from "utils/cn";
 
@@ -57,7 +68,30 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 				</TableCell>
 				<TableCell>{firstPrompt?.prompt}</TableCell>
 				<TableCell>
-					{inputTokens} / {outputTokens}
+					<div className="flex items-center gap-4">
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<div className="flex items-center gap-1">
+										<ArrowDownIcon size={16} />
+										<div>{inputTokens}</div>
+									</div>
+								</TooltipTrigger>
+								<TooltipContent>Input Tokens</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<div className="flex items-center gap-1">
+										<ArrowUpIcon size={16} />
+										<div>{outputTokens}</div>
+									</div>
+								</TooltipTrigger>
+								<TooltipContent>Output Tokens</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					</div>
 				</TableCell>
 				<TableCell>{toolCalls}</TableCell>
 			</TableRow>

From 32e8777ac03c7a0bc304324d04d19dfb7a726239 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 29 Oct 2025 00:59:09 +0000
Subject: [PATCH 47/64] fix: prefer tailwind over `<Stack />`

---
 site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
index f8b35a43ebe9d..cd7c3fb281bef 100644
--- a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
+++ b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
@@ -21,10 +21,10 @@ const AIGovernanceLayout: FC<PropsWithChildren> = ({
 		<Margins className="pb-12">
 			<PageHeader>
 				<PageHeaderTitle>
-					<Stack direction="row" spacing={1} alignItems="center">
+					<div className="flex items-center gap-2">
 						<span>{Language.title}</span>
 						<AIGovernanceHelpTooltip />
-					</Stack>
+					</div>
 				</PageHeaderTitle>
 				<PageHeaderSubtitle>{Language.subtitle}</PageHeaderSubtitle>
 			</PageHeader>

From 3415635b34c1c989e0dba9a4cae81741a52d9de3 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 29 Oct 2025 01:20:21 +0000
Subject: [PATCH 48/64] fix: reduce `<TooltipProvider />` delays

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 8fa349f2fcb95..f4ad5ff985dd7 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -69,7 +69,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 				<TableCell>{firstPrompt?.prompt}</TableCell>
 				<TableCell>
 					<div className="flex items-center gap-4">
-						<TooltipProvider>
+						<TooltipProvider delayDuration={100}>
 							<Tooltip>
 								<TooltipTrigger asChild>
 									<div className="flex items-center gap-1">
@@ -80,7 +80,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 								<TooltipContent>Input Tokens</TooltipContent>
 							</Tooltip>
 						</TooltipProvider>
-						<TooltipProvider>
+						<TooltipProvider delayDuration={100}>
 							<Tooltip>
 								<TooltipTrigger asChild>
 									<div className="flex items-center gap-1">

From 9d09f5ada65abff0fc3628a58a0933cb1daf3b02 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 29 Oct 2025 01:21:02 +0000
Subject: [PATCH 49/64] chore: resolve lint

---
 site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
index cd7c3fb281bef..7ca921b14d6d2 100644
--- a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
+++ b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
@@ -4,7 +4,6 @@ import {
 	PageHeaderSubtitle,
 	PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
-import { Stack } from "components/Stack/Stack";
 import type { FC, PropsWithChildren } from "react";
 import { Outlet } from "react-router";
 import { AIGovernanceHelpTooltip } from "./AIGovernanceHelpTooltip";

From b00b43fe322375e787fa73f244ee9c17a06fcdf2 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 30 Oct 2025 03:30:37 +0000
Subject: [PATCH 50/64] chore: migrate to using `Boolean()` on
 `isRequestLogsVisible`

---
 .../AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index 2b476a8d0ce07..ffe4ac75bf47c 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -17,8 +17,9 @@ const RequestLogsPage: FC = () => {
 	// It may happen if owner removes the license.
 	//
 	// see: https://github.com/coder/coder/issues/14798
-	const isRequestLogsVisible =
-		(feats.aibridge && experiments.includes("aibridge")) || false;
+	const isRequestLogsVisible = Boolean(
+		feats.aibridge && experiments.includes("aibridge"),
+	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
 	const interceptionsQuery = usePaginatedQuery(

From 067a361ee8362a809a4515127a958b55141dc998 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 30 Oct 2025 03:37:07 +0000
Subject: [PATCH 51/64] chore: inline `Language` constant

---
 .../AIGovernancePage/AIGovernanceHelpTooltip.tsx  | 15 ++++++---------
 .../pages/AIGovernancePage/AIGovernanceLayout.tsx | 11 ++++-------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx b/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
index a1c90b5d457c0..b56419744d5b7 100644
--- a/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
+++ b/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
@@ -10,23 +10,20 @@ import {
 import type { FC } from "react";
 import { docs } from "utils/docs";
 
-const Language = {
-	title: "What is AI Governance",
-	body: "AI Governance is a proxy that unifies and audits LLM usage across your organization.",
-	docs: "What we track",
-};
-
 export const AIGovernanceHelpTooltip: FC = () => {
 	return (
 		<HelpTooltip>
 			<HelpTooltipIconTrigger />
 
 			<HelpTooltipContent>
-				<HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
-				<HelpTooltipText>{Language.body}</HelpTooltipText>
+				<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("/docs/ai-coder/ai-bridge")}>
-						{Language.docs}
+						What we track
 					</HelpTooltipLink>
 				</HelpTooltipLinksGroup>
 			</HelpTooltipContent>
diff --git a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
index 7ca921b14d6d2..3c12b84389ab1 100644
--- a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
+++ b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
@@ -8,11 +8,6 @@ import type { FC, PropsWithChildren } from "react";
 import { Outlet } from "react-router";
 import { AIGovernanceHelpTooltip } from "./AIGovernanceHelpTooltip";
 
-const Language = {
-	title: "AI Governance",
-	subtitle: "Manage usage for your organization.",
-};
-
 const AIGovernanceLayout: FC<PropsWithChildren> = ({
 	children = <Outlet />,
 }) => {
@@ -21,11 +16,13 @@ const AIGovernanceLayout: FC<PropsWithChildren> = ({
 			<PageHeader>
 				<PageHeaderTitle>
 					<div className="flex items-center gap-2">
-						<span>{Language.title}</span>
+						<span>AI Governance</span>
 						<AIGovernanceHelpTooltip />
 					</div>
 				</PageHeaderTitle>
-				<PageHeaderSubtitle>{Language.subtitle}</PageHeaderSubtitle>
+				<PageHeaderSubtitle>
+					Manage usage for your organization.
+				</PageHeaderSubtitle>
 			</PageHeader>
 			{children}
 		</Margins>

From e762a6cae0330815a341e85fb79bbb10e6f79947 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 30 Oct 2025 03:46:19 +0000
Subject: [PATCH 52/64] chore: redact down storybook title

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.stories.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.stories.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.stories.tsx
index a32b4e8ebcd11..b4067ee3c9cb3 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.stories.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.stories.tsx
@@ -4,7 +4,7 @@ import { Table, TableBody } from "components/Table/Table";
 import { RequestLogsRow } from "./RequestLogsRow";
 
 const meta: Meta<typeof RequestLogsRow> = {
-	title: "pages/AIGovernancePage/RequestLogsPageView/RequestLogsRow",
+	title: "pages/AIGovernancePage/RequestLogsRow",
 	component: RequestLogsRow,
 	decorators: [
 		(Story) => (

From 347aa1414b4d518d35bf54baa255e1fde233c81a Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 30 Oct 2025 03:52:26 +0000
Subject: [PATCH 53/64] chore: remove unnecessary `{}` around props

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index f4ad5ff985dd7..d9ac8632d13c1 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -38,7 +38,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 	return (
 		<>
 			<TableRow
-				className={"select-none cursor-pointer hover:bg-surface-secondary"}
+				className="select-none cursor-pointer hover:bg-surface-secondary"
 				onClick={() => setIsOpen(!isOpen)}
 			>
 				<TableCell>
@@ -147,7 +147,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 								<div className="flex flex-col gap-2">
 									<div>Prompts</div>
 									<div
-										className={"bg-surface-secondary rounded-md p-4"}
+										className="bg-surface-secondary rounded-md p-4"
 										data-chromatic="ignore"
 									>
 										{interception.user_prompts.map((prompt) => prompt.prompt)}
@@ -159,7 +159,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 								<div className="flex flex-col gap-2">
 									<div>Tool Usages</div>
 									<div
-										className={"bg-surface-secondary rounded-md p-4"}
+										className="bg-surface-secondary rounded-md p-4"
 										data-chromatic="ignore"
 									>
 										{interception.tool_usages.map((toolUsage) => {

From 7a4bf519065583585afbf9803ec5a460941ff60c Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 30 Oct 2025 03:59:20 +0000
Subject: [PATCH 54/64] chore: use `viewAnyAIBridgeInterception` permission

---
 site/src/modules/dashboard/Navbar/Navbar.tsx           |  6 ++----
 site/src/modules/permissions/index.ts                  |  7 +++++++
 .../RequestLogsPage/RequestLogsPage.tsx                | 10 +---------
 site/src/testHelpers/entities.ts                       |  2 ++
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
index 1f3385bbd8ea9..ead7075a16dc2 100644
--- a/site/src/modules/dashboard/Navbar/Navbar.tsx
+++ b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -13,8 +13,7 @@ import { NavbarView } from "./NavbarView";
 export const Navbar: FC = () => {
 	const { metadata } = useEmbeddedMetadata();
 	const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
-	const { appearance, experiments, canViewOrganizationSettings } =
-		useDashboard();
+	const { appearance, canViewOrganizationSettings } = useDashboard();
 	const { user: me, permissions, signOut } = useAuthenticated();
 	const featureVisibility = useFeatureVisibility();
 	const proxyContextValue = useProxy();
@@ -26,9 +25,8 @@ export const Navbar: FC = () => {
 		featureVisibility.audit_log && permissions.viewAnyAuditLog;
 	const canViewConnectionLog =
 		featureVisibility.connection_log && permissions.viewAnyConnectionLog;
-	// TODO: We should have a separate permission for this
 	const canViewAIGovernance =
-		featureVisibility.aibridge && experiments.includes("aibridge");
+		featureVisibility.aibridge && permissions.viewAnyAIBridgeInterception;
 
 	const uniqueLinks = new Map<string, LinkConfig>();
 	for (const link of appearance.support_links ?? []) {
diff --git a/site/src/modules/permissions/index.ts b/site/src/modules/permissions/index.ts
index db48e61411d18..57eff5f67f5a5 100644
--- 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/RequestLogsPage/RequestLogsPage.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
index ffe4ac75bf47c..2f56ff476091a 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPage.tsx
@@ -2,7 +2,6 @@ import { paginatedInterceptions } from "api/queries/aiBridge";
 import { useFilter } from "components/Filter/Filter";
 import { useUserFilterMenu } from "components/Filter/UserFilter";
 import { usePaginatedQuery } from "hooks/usePaginatedQuery";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
 import { useSearchParams } from "react-router";
@@ -12,14 +11,7 @@ import { RequestLogsPageView } from "./RequestLogsPageView";
 
 const RequestLogsPage: FC = () => {
 	const feats = useFeatureVisibility();
-	const { experiments } = useDashboard();
-	// The "else false" is required if aibridge is undefined.
-	// It may happen if owner removes the license.
-	//
-	// see: https://github.com/coder/coder/issues/14798
-	const isRequestLogsVisible = Boolean(
-		feats.aibridge && experiments.includes("aibridge"),
-	);
+	const isRequestLogsVisible = Boolean(feats.aibridge);
 
 	const [searchParams, setSearchParams] = useSearchParams();
 	const interceptionsQuery = usePaginatedQuery(
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index ac94ca1b2b28c..889b8564d3fa9 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -3105,6 +3105,7 @@ export const MockPermissions: Permissions = {
 	editAnySettings: true,
 	viewAnyIdpSyncSettings: true,
 	viewAnyMembers: true,
+	viewAnyAIBridgeInterception: true,
 };
 
 export const MockNoPermissions: Permissions = {
@@ -3133,6 +3134,7 @@ export const MockNoPermissions: Permissions = {
 	editAnySettings: false,
 	viewAnyIdpSyncSettings: false,
 	viewAnyMembers: false,
+	viewAnyAIBridgeInterception: true,
 };
 
 export const MockOrganizationPermissions: OrganizationPermissions = {

From 4fb2c3617da2209280e36df457c5c24eaf8b023e Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 30 Oct 2025 20:57:51 +0000
Subject: [PATCH 55/64] fix: prefer `FC<ProviderFilterProps>`

---
 .../pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx
index d2cd9c3eb8a9c..7710952fbeb32 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx
@@ -6,6 +6,7 @@ import {
 	SelectFilter,
 	type SelectFilterOption,
 } from "components/Filter/SelectFilter";
+import type { FC } from "react";
 
 const AIBRIDGE_PROVIDERS: SelectFilterOption[] = [
 	{
@@ -42,7 +43,7 @@ interface ProviderFilterProps {
 	menu: ProviderFilterMenu;
 }
 
-export const ProviderFilter = ({ menu }: ProviderFilterProps) => {
+export const ProviderFilter: FC<ProviderFilterProps> = ({ menu }) => {
 	return (
 		<SelectFilter
 			label={"Select provider"}

From e955388f4b3cb2aeee49f923ed3dde872d591b6d Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 30 Oct 2025 20:58:02 +0000
Subject: [PATCH 56/64] fix: typo

---
 site/src/pages/AuditPage/AuditPageView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
index 080c3a0b2aaab..05eb6e03b735a 100644
--- a/site/src/pages/AuditPage/AuditPageView.tsx
+++ b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -132,7 +132,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
 				<Cond>
 					<Paywall
 						message="Audit logs"
-						description="Audit logs allow you to monitor user operations on your deployment. You need an Premium license to use this feature."
+						description="Audit logs allow you to monitor user operations on your deployment. You need a Premium license to use this feature."
 						documentationLink={docs("/admin/security/audit-logs")}
 					/>
 				</Cond>

From 45c15293ed52ce536d1a29d3fa4aff61cfe6b9e0 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 30 Oct 2025 21:00:39 +0000
Subject: [PATCH 57/64] fix: resolve using `size={}` (prefer class)

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index d9ac8632d13c1..874e68e8d60df 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -49,9 +49,9 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 						])}
 					>
 						{isOpen ? (
-							<ChevronDownIcon size={16} />
+							<ChevronDownIcon className="size-icon-xs" />
 						) : (
-							<ChevronRightIcon size={16} />
+							<ChevronRightIcon className="size-icon-xs" />
 						)}
 						<span className="sr-only">({isOpen ? "Hide" : "Show more"})</span>
 						{new Date(interception.started_at).toLocaleString()}
@@ -73,7 +73,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 							<Tooltip>
 								<TooltipTrigger asChild>
 									<div className="flex items-center gap-1">
-										<ArrowDownIcon size={16} />
+										<ArrowDownIcon className="size-icon-xs" />
 										<div>{inputTokens}</div>
 									</div>
 								</TooltipTrigger>
@@ -84,7 +84,7 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 							<Tooltip>
 								<TooltipTrigger asChild>
 									<div className="flex items-center gap-1">
-										<ArrowUpIcon size={16} />
+										<ArrowUpIcon className="size-icon-xs" />
 										<div>{outputTokens}</div>
 									</div>
 								</TooltipTrigger>

From 2ae8d74148a8321281f5e9ce27686609d699aa1a Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 30 Oct 2025 21:04:55 +0000
Subject: [PATCH 58/64] fix: remove `/docs` prepended

---
 site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx b/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
index b56419744d5b7..e8dd2a6b77b20 100644
--- a/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
+++ b/site/src/pages/AIGovernancePage/AIGovernanceHelpTooltip.tsx
@@ -22,7 +22,7 @@ export const AIGovernanceHelpTooltip: FC = () => {
 					organization.
 				</HelpTooltipText>
 				<HelpTooltipLinksGroup>
-					<HelpTooltipLink href={docs("/docs/ai-coder/ai-bridge")}>
+					<HelpTooltipLink href={docs("/ai-coder/ai-bridge")}>
 						What we track
 					</HelpTooltipLink>
 				</HelpTooltipLinksGroup>

From a0239a3b57923ed9d5fea8e7b9f6ae22373af3d8 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 30 Oct 2025 21:05:59 +0000
Subject: [PATCH 59/64] fix: resolve missing `key`

---
 .../RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx       | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 874e68e8d60df..06f821ef88cf7 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -13,7 +13,7 @@ import {
 	ChevronDownIcon,
 	ChevronRightIcon,
 } from "lucide-react";
-import { type FC, useState } from "react";
+import { type FC, Fragment, useState } from "react";
 import { cn } from "utils/cn";
 
 type RequestLogsRowProps = {
@@ -150,7 +150,9 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 										className="bg-surface-secondary rounded-md p-4"
 										data-chromatic="ignore"
 									>
-										{interception.user_prompts.map((prompt) => prompt.prompt)}
+										{interception.user_prompts.map((prompt) => (
+											<Fragment key={prompt.id}>{prompt.prompt}</Fragment>
+										))}
 									</div>
 								</div>
 							)}

From e1dbdb12e8e727a5bfe083cd602380ae36ef5de7 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Fri, 31 Oct 2025 01:32:28 +0000
Subject: [PATCH 60/64] chore: remove `children` from `<AIGovernanceLayout />`

---
 site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
index 3c12b84389ab1..bf8a0e6544b0f 100644
--- a/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
+++ b/site/src/pages/AIGovernancePage/AIGovernanceLayout.tsx
@@ -8,9 +8,7 @@ import type { FC, PropsWithChildren } from "react";
 import { Outlet } from "react-router";
 import { AIGovernanceHelpTooltip } from "./AIGovernanceHelpTooltip";
 
-const AIGovernanceLayout: FC<PropsWithChildren> = ({
-	children = <Outlet />,
-}) => {
+const AIGovernanceLayout: FC<PropsWithChildren> = () => {
 	return (
 		<Margins className="pb-12">
 			<PageHeader>
@@ -24,7 +22,7 @@ const AIGovernanceLayout: FC<PropsWithChildren> = ({
 					Manage usage for your organization.
 				</PageHeaderSubtitle>
 			</PageHeader>
-			{children}
+			<Outlet />
 		</Margins>
 	);
 };

From 14654d3f28d2d2501bea3671dd87de0f80a19caa Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Fri, 31 Oct 2025 01:36:39 +0000
Subject: [PATCH 61/64] fix: let type inference do its thing

---
 .../pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx  | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx
index 7710952fbeb32..3184bbe4417e7 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/filter/filter.tsx
@@ -50,9 +50,7 @@ export const ProviderFilter: FC<ProviderFilterProps> = ({ menu }) => {
 			placeholder={"All providers"}
 			emptyText="No providers found"
 			options={menu.searchOptions}
-			onSelect={(option: SelectFilterOption | undefined): void =>
-				menu.selectOption(option)
-			}
+			onSelect={(option) => menu.selectOption(option)}
 			selectedOption={menu.selectedOption ?? undefined}
 		/>
 	);

From a115cc91c5967d3f171fd012bc4fe47cb9e34b9c Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Fri, 31 Oct 2025 03:34:24 +0000
Subject: [PATCH 62/64] fix: resolve `interceptionQuery` on `Story`ies

---
 .../RequestLogsPageView.stories.tsx              | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
index a52831e5df8f6..5e1d562105f5a 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
@@ -50,11 +50,7 @@ export const Loaded: Story = {
 		filterProps: {
 			...defaultFilterProps,
 		},
-		interceptionsQuery: {
-			...mockSuccessResult,
-			totalRecords: interceptions.length,
-			data: { interceptions, total: interceptions.length },
-		} as UsePaginatedQueryResult,
+		interceptionsQuery: mockSuccessResult,
 	},
 };
 
@@ -65,11 +61,7 @@ export const Empty: Story = {
 		filterProps: {
 			...defaultFilterProps,
 		},
-		interceptionsQuery: {
-			...mockSuccessResult,
-			totalRecords: 0,
-			data: { interceptions: [], total: 0 },
-		} as UsePaginatedQueryResult,
+		interceptionsQuery: mockSuccessResult,
 	},
 };
 
@@ -81,8 +73,6 @@ export const Loading: Story = {
 		filterProps: {
 			...defaultFilterProps,
 		},
-		interceptionsQuery: {
-			...mockInitialRenderResult,
-		} as UsePaginatedQueryResult,
+		interceptionsQuery: mockInitialRenderResult,
 	},
 };

From ea66dc10b6aa068c305d82886b398971051d9e58 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 11 Nov 2025 23:57:19 +0000
Subject: [PATCH 63/64] chore: resolve lint

---
 .../RequestLogsPage/RequestLogsPageView.stories.tsx              | 1 -
 site/src/testHelpers/entities.ts                                 | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
index 5e1d562105f5a..3899eb08d06b4 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsPageView.stories.tsx
@@ -8,7 +8,6 @@ import {
 	mockInitialRenderResult,
 	mockSuccessResult,
 } from "components/PaginationWidget/PaginationContainer.mocks";
-import type { UsePaginatedQueryResult } from "hooks/usePaginatedQuery";
 import type { ComponentProps } from "react";
 import { RequestLogsPageView } from "./RequestLogsPageView";
 
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index cb11ada6add9e..03d108b859648 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -5079,4 +5079,5 @@ export const MockInterception: TypesGen.AIBridgeInterception = {
 	metadata: {},
 	user_prompts: [],
 	tool_usages: [],
+	api_key_id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
 };

From 8bbfca31fdcba800e06dc1baacc1b1b4b4d8ca43 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 12 Nov 2025 00:19:32 +0000
Subject: [PATCH 64/64] chore: commit bump