From 5cf97955a0590b183414905ad8d7c9418219a6ec Mon Sep 17 00:00:00 2001
From: Susana Ferreira <susana@coder.com>
Date: Wed, 11 Feb 2026 14:42:38 +0000
Subject: [PATCH] feat(site): add copilot as a provider option in AI Bridge
 logs filter (#22023)

## Problem

The Copilot provider was missing from the AI Bridge logs filter dropdown, so users couldn't filter interceptions by Copilot. Additionally, the `AIBridgeProviderIcon` component didn't handle the copilot provider, so it would render a fallback question mark icon.

<img width="1392" height="333" alt="Screenshot 2026-02-10 at 09 26 16" src="https://github.com/user-attachments/assets/ecb97400-a4dd-4e88-accc-68d7fdf19b2a" />

## Changes

* Added `copilot` case to `AIBridgeProviderIcon`, using the existing `/icon/github.svg`.
* Added Copilot as a provider option in the filter dropdown.
* Added `MockInterceptionAnthropic` and `MockInterceptionCopilot` mock data with sample prompts, and updated the Storybook stories to use one interception per provider.
---
 .../RequestLogsPage/AIBridgeProviderIcon.tsx  |  7 +++
 .../RequestLogsPageView.stories.tsx           | 12 ++++-
 .../RequestLogsPage/filter/filter.tsx         |  7 +++
 site/src/testHelpers/entities.ts              | 45 ++++++++++++++++++-
 4 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/AIBridgePage/RequestLogsPage/AIBridgeProviderIcon.tsx b/site/src/pages/AIBridgePage/RequestLogsPage/AIBridgeProviderIcon.tsx
index 538942c8a2..e4cd3f40ef 100644
--- a/site/src/pages/AIBridgePage/RequestLogsPage/AIBridgeProviderIcon.tsx
+++ b/site/src/pages/AIBridgePage/RequestLogsPage/AIBridgeProviderIcon.tsx
@@ -25,6 +25,13 @@ export const AIBridgeProviderIcon = ({
 					className={cn(iconClassName, props.className)}
 				/>
 			);
+		case "copilot":
+			return (
+				<ExternalImage
+					src="/icon/github.svg"
+					className={cn(iconClassName, props.className)}
+				/>
+			);
 		default:
 			return (
 				<CircleQuestionMarkIcon
diff --git a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsPageView.stories.tsx b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsPageView.stories.tsx
index f19cb0f476..a069f4faf7 100644
--- a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsPageView.stories.tsx
+++ b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsPageView.stories.tsx
@@ -1,4 +1,8 @@
-import { MockInterception } from "testHelpers/entities";
+import {
+	MockInterception,
+	MockInterceptionAnthropic,
+	MockInterceptionCopilot,
+} from "testHelpers/entities";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
 	getDefaultFilterProps,
@@ -25,7 +29,11 @@ const defaultFilterProps = getDefaultFilterProps<FilterProps>({
 	},
 });
 
-const interceptions = [MockInterception, MockInterception, MockInterception];
+const interceptions = [
+	MockInterception,
+	MockInterceptionAnthropic,
+	MockInterceptionCopilot,
+];
 
 const meta: Meta<typeof RequestLogsPageView> = {
 	title: "pages/AIBridgePage/RequestLogsPageView",
diff --git a/site/src/pages/AIBridgePage/RequestLogsPage/filter/filter.tsx b/site/src/pages/AIBridgePage/RequestLogsPage/filter/filter.tsx
index a993c87d61..e67171b11c 100644
--- a/site/src/pages/AIBridgePage/RequestLogsPage/filter/filter.tsx
+++ b/site/src/pages/AIBridgePage/RequestLogsPage/filter/filter.tsx
@@ -24,6 +24,13 @@ const AIBRIDGE_PROVIDERS: SelectFilterOption[] = [
 			<AIBridgeProviderIcon provider="anthropic" className="size-icon-sm" />
 		),
 	},
+	{
+		label: "Copilot",
+		value: "copilot",
+		startIcon: (
+			<AIBridgeProviderIcon provider="copilot" className="size-icon-sm" />
+		),
+	},
 ];
 
 export const useProviderFilterMenu = ({
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index e28e904e04..6533fa83e2 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -5204,7 +5204,50 @@ export const MockInterception: TypesGen.AIBridgeInterception = {
 		},
 	],
 	metadata: {},
-	user_prompts: [],
+	user_prompts: [
+		{
+			id: "85154044-818e-4ee4-bac2-87f3ac8f066b",
+			interception_id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
+			provider_response_id: "res_1234567890",
+			prompt: "Hello OpenAI",
+			metadata: {},
+			created_at: "2022-05-17T17:39:01.382927298Z",
+		},
+	],
 	tool_usages: [],
 	api_key_id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
 };
+
+export const MockInterceptionAnthropic: TypesGen.AIBridgeInterception = {
+	...MockInterception,
+	id: "e5610f5b-2d6c-43db-b1c0-1dfcc6531f04",
+	provider: "anthropic",
+	model: "claude-sonnet-4.5",
+	user_prompts: [
+		{
+			id: "c820f31f-0170-4044-8b7c-b1b18747b4fb",
+			interception_id: "e5610f5b-2d6c-43db-b1c0-1dfcc6531f04",
+			provider_response_id: "res_2345678901",
+			prompt: "Hello Anthropic",
+			metadata: {},
+			created_at: "2022-05-17T17:39:01.382927298Z",
+		},
+	],
+};
+
+export const MockInterceptionCopilot: TypesGen.AIBridgeInterception = {
+	...MockInterception,
+	id: "22c9d31e-1a1f-464a-b397-562958599aa8",
+	provider: "copilot",
+	model: "claude-opus-4-5",
+	user_prompts: [
+		{
+			id: "c6c613d1-177e-416f-95b5-c7f0eeefb922",
+			interception_id: "22c9d31e-1a1f-464a-b397-562958599aa8",
+			provider_response_id: "res_3456789012",
+			prompt: "Hello Copilot",
+			metadata: {},
+			created_at: "2022-05-17T17:39:01.382927298Z",
+		},
+	],
+};