From 525f6ec2209e2dadba7e15c87f178cc0c80bcd0f Mon Sep 17 00:00:00 2001
From: Pratham-Mishra04 <pratham@getmaxim.ai>
Date: Mon, 20 Apr 2026 16:47:19 +0530
Subject: [PATCH 1/2] fix: minor mcp and ui fixes

---
 core/schemas/bifrost.go                       |    4 +-
 docs/features/async-inference.mdx             |    1 +
 transports/bifrost-http/handlers/mcpserver.go |    7 +-
 .../mcp-tool-groups/mcpToolGroups.tsx         |   13 +-
 ui/app/workspace/config/mcp-gateway/page.tsx  |    2 +-
 ui/app/workspace/config/views/mcpView.tsx     |   16 +-
 ui/app/workspace/logs/page.tsx                | 2176 ++++++++---------
 .../mcp-registry/views/mcpClientSheet.tsx     |   77 +-
 .../mcp-registry/views/mcpClientsTable.tsx    |   20 +-
 ui/app/workspace/mcp-tool-groups/page.tsx     |    4 +-
 .../dialogs/addNewCustomProviderSheet.tsx     |    2 +
 .../fragments/apiStructureFormFragment.tsx    |    2 +
 ui/lib/constants/logs.ts                      |    6 +
 ui/lib/types/config.ts                        |    4 +
 ui/lib/types/schemas.ts                       |    2 +
 15 files changed, 1183 insertions(+), 1153 deletions(-)

diff --git a/core/schemas/bifrost.go b/core/schemas/bifrost.go
index b932dc1aee..9a9a538237 100644
--- a/core/schemas/bifrost.go
+++ b/core/schemas/bifrost.go
@@ -250,8 +250,8 @@ const (
 	BifrostContextKeyRequestHeaders                      BifrostContextKey = "bifrost-request-headers"                          // map[string]string (all request headers with lowercased keys)
 	BifrostContextKeySkipListModelsGovernanceFiltering   BifrostContextKey = "bifrost-skip-list-models-governance-filtering"    // bool (set by bifrost - DO NOT SET THIS MANUALLY))
 	BifrostContextKeySCIMClaims                          BifrostContextKey = "scim_claims"
-	BifrostContextKeyUserID                              BifrostContextKey = "bifrost-user-id"                                  // string (to store the user ID (set by enterprise auth middleware - DO NOT SET THIS MANUALLY))
-	BifrostContextKeyUserName                            BifrostContextKey = "bifrost-user-name"                                // string (to store the user name (set by enterprise auth middleware - DO NOT SET THIS MANUALLY))
+	BifrostContextKeyUserID                              BifrostContextKey = "bifrost-user-id"   // string (to store the user ID (set by enterprise auth middleware - DO NOT SET THIS MANUALLY))
+	BifrostContextKeyUserName                            BifrostContextKey = "bifrost-user-name" // string (to store the user name (set by enterprise auth middleware - DO NOT SET THIS MANUALLY))
 	BifrostContextKeyTargetUserID                        BifrostContextKey = "target_user_id"
 	BifrostContextKeyIsAzureUserAgent                    BifrostContextKey = "bifrost-is-azure-user-agent" // bool (set by bifrost - DO NOT SET THIS MANUALLY)) - whether the request is an Azure user agent (only used in gateway)
 	BifrostContextKeyVideoOutputRequested                BifrostContextKey = "bifrost-video-output-requested"
diff --git a/docs/features/async-inference.mdx b/docs/features/async-inference.mdx
index 23c9fcab1f..3d0428d5cf 100644
--- a/docs/features/async-inference.mdx
+++ b/docs/features/async-inference.mdx
@@ -50,6 +50,7 @@ Streaming is not supported on async endpoints.
 | Image generations | `/v1/async/images/generations` | `/v1/async/images/generations/{job_id}` |
 | Image edits | `/v1/async/images/edits` | `/v1/async/images/edits/{job_id}` |
 | Image variations | `/v1/async/images/variations` | `/v1/async/images/variations/{job_id}` |
+| OCR | `/v1/async/ocr` | `/v1/async/ocr/{job_id}` |
 | Rerank | `/v1/async/rerank` | `/v1/async/rerank/{job_id}` |
 
 ## Submitting a Request
diff --git a/transports/bifrost-http/handlers/mcpserver.go b/transports/bifrost-http/handlers/mcpserver.go
index 9db9d674ff..b03488ea6f 100644
--- a/transports/bifrost-http/handlers/mcpserver.go
+++ b/transports/bifrost-http/handlers/mcpserver.go
@@ -95,11 +95,8 @@ func injectMCPSessionIdentity(bifrostCtx *schemas.BifrostContext, session *table
 		if session.AccessToken != "" {
 			bifrostCtx.SetValue(schemas.BifrostContextKeyMCPUserSession, session.AccessToken)
 		}
-		if session.VirtualKeyID != nil && *session.VirtualKeyID != "" {
-			bifrostCtx.SetValue(schemas.BifrostContextKeyGovernanceVirtualKeyID, *session.VirtualKeyID)
-			if session.VirtualKey != nil && session.VirtualKey.Name != "" {
-				bifrostCtx.SetValue(schemas.BifrostContextKeyGovernanceVirtualKeyName, session.VirtualKey.Name)
-			}
+		if session.VirtualKeyID != nil && *session.VirtualKeyID != "" && session.VirtualKey != nil && session.VirtualKey.Value != "" {
+			bifrostCtx.SetValue(schemas.BifrostContextKeyVirtualKey, session.VirtualKey.Value)
 		}
 		if session.UserID != nil && *session.UserID != "" {
 			bifrostCtx.SetValue(schemas.BifrostContextKeyUserID, *session.UserID)
diff --git a/ui/app/_fallbacks/enterprise/components/mcp-tool-groups/mcpToolGroups.tsx b/ui/app/_fallbacks/enterprise/components/mcp-tool-groups/mcpToolGroups.tsx
index 05a95013dd..8e6dfc089d 100644
--- a/ui/app/_fallbacks/enterprise/components/mcp-tool-groups/mcpToolGroups.tsx
+++ b/ui/app/_fallbacks/enterprise/components/mcp-tool-groups/mcpToolGroups.tsx
@@ -1,16 +1,15 @@
-import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { ToolCase } from "lucide-react";
 import ContactUsView from "../views/contactUsView";
 
 export default function MCPToolGroups() {
 	return (
 		<>
-			<CardHeader className="mb-4 px-0">
-				<CardTitle>
-					<h1 className="text-foreground text-lg font-semibold">MCP tool groups</h1>
-				</CardTitle>
-				<CardDescription>Configure tool groups for MCP servers to organize and govern tools.</CardDescription>
-			</CardHeader>
+			<div className="flex items-center justify-between gap-4 mb-4">
+				<div>
+					<h2 className="text-lg font-semibold tracking-tight">MCP tool groups</h2>
+					<p className="text-muted-foreground text-sm">Configure tool groups for MCP servers to organize and govern tools.</p>
+				</div>
+			</div>
 			<div className="rounded-sm border">
 				<div className="flex w-full flex-col items-center justify-center py-16">
 					<ContactUsView
diff --git a/ui/app/workspace/config/mcp-gateway/page.tsx b/ui/app/workspace/config/mcp-gateway/page.tsx
index 8aa63014aa..99f282cd2d 100644
--- a/ui/app/workspace/config/mcp-gateway/page.tsx
+++ b/ui/app/workspace/config/mcp-gateway/page.tsx
@@ -2,7 +2,7 @@ import MCPGatewayView from "../views/mcpView";
 
 export default function MCPGatewayPage() {
 	return (
-		<div className="mx-auto flex w-full max-w-7xl">
+		<div className="mx-auto w-full max-w-7xl">
 			<MCPGatewayView />
 		</div>
 	);
diff --git a/ui/app/workspace/config/views/mcpView.tsx b/ui/app/workspace/config/views/mcpView.tsx
index e246c8aa39..551555a22b 100644
--- a/ui/app/workspace/config/views/mcpView.tsx
+++ b/ui/app/workspace/config/views/mcpView.tsx
@@ -147,7 +147,7 @@ export default function MCPView() {
 
   return (
     <div
-      className="mx-auto w-full max-w-4xl space-y-4"
+      className="mx-auto w-full max-w-7xl space-y-4"
       data-testid="mcp-settings-view"
     >
       <div>
@@ -158,7 +158,7 @@ export default function MCPView() {
       </div>
       <div className="space-y-4">
         {/* Max Agent Depth */}
-        <div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+        <div className="flex items-center justify-between space-x-2 rounded-sm border p-4">
           <div className="space-y-0.5">
             <label htmlFor="mcp-agent-depth" className="text-sm font-medium">
               Max Agent Depth
@@ -179,7 +179,7 @@ export default function MCPView() {
         </div>
 
         {/* Tool Execution Timeout */}
-        <div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+        <div className="flex items-center justify-between space-x-2 rounded-sm border p-4">
           <div className="space-y-0.5">
             <label
               htmlFor="mcp-tool-execution-timeout"
@@ -203,7 +203,7 @@ export default function MCPView() {
         </div>
 
         {/* Tool Sync Interval */}
-        <div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+        <div className="flex items-center justify-between space-x-2 rounded-sm border p-4">
           <div className="space-y-0.5">
             <label
               htmlFor="mcp-tool-sync-interval"
@@ -228,7 +228,7 @@ export default function MCPView() {
         </div>
 
         {/* Disable Auto Tool Injection */}
-        <div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+        <div className="flex items-center justify-between space-x-2 rounded-sm border p-4">
           <div className="space-y-0.5">
             <label
               htmlFor="mcp-disable-auto-tool-inject"
@@ -254,7 +254,7 @@ export default function MCPView() {
         </div>
 
         {/* Code Mode Binding Level */}
-        <div className="space-y-4 rounded-lg border p-4">
+        <div className="space-y-4 rounded-sm border p-4">
           <div className="space-y-0.5">
             <label htmlFor="mcp-binding-level" className="text-sm font-medium">
               Code Mode Binding Level
@@ -288,7 +288,7 @@ export default function MCPView() {
             </p>
 
             {localValues.mcp_code_mode_binding_level === "server" ? (
-              <div className="bg-muted border-border rounded-lg border p-4">
+              <div className="bg-muted border-border rounded-sm border p-4">
                 <div className="text-foreground space-y-1 font-mono text-xs">
                   <div>servers/</div>
                   <div className="pl-3">├─ calculator.py</div>
@@ -300,7 +300,7 @@ export default function MCPView() {
                 </p>
               </div>
             ) : (
-              <div className="bg-muted border-border rounded-lg border p-4">
+              <div className="bg-muted border-border rounded-sm border p-4">
                 <div className="text-foreground space-y-1 font-mono text-xs">
                   <div>servers/</div>
                   <div className="pl-3">├─ calculator/</div>
diff --git a/ui/app/workspace/logs/page.tsx b/ui/app/workspace/logs/page.tsx
index 61017e8207..7d782f938d 100644
--- a/ui/app/workspace/logs/page.tsx
+++ b/ui/app/workspace/logs/page.tsx
@@ -14,23 +14,23 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useWebSocket } from "@/hooks/useWebSocket";
 import {
-	getErrorMessage,
-	useDeleteLogsMutation,
-	useGetAvailableFilterDataQuery,
-	useLazyGetLogsHistogramQuery,
-	useLazyGetLogsQuery,
-	useLazyGetLogsStatsQuery,
+  getErrorMessage,
+  useDeleteLogsMutation,
+  useGetAvailableFilterDataQuery,
+  useLazyGetLogsHistogramQuery,
+  useLazyGetLogsQuery,
+  useLazyGetLogsStatsQuery,
 } from "@/lib/store";
 import { useLazyGetLogByIdQuery } from "@/lib/store/apis/logsApi";
 import type {
-	ChatMessage,
-	ChatMessageContent,
-	ContentBlock,
-	LogEntry,
-	LogFilters,
-	LogsHistogramResponse,
-	LogStats,
-	Pagination,
+  ChatMessage,
+  ChatMessageContent,
+  ContentBlock,
+  LogEntry,
+  LogFilters,
+  LogsHistogramResponse,
+  LogStats,
+  Pagination,
 } from "@/lib/types/logs";
 import { dateUtils } from "@/lib/types/logs";
 import { COMPACT_NUMBER_FORMAT } from "@/lib/utils/numbers";
@@ -41,1078 +41,1078 @@ import { parseAsArrayOf, parseAsBoolean, parseAsInteger, parseAsString, useQuery
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 export default function LogsPage() {
-	const [logs, setLogs] = useState<LogEntry[]>([]);
-	const [totalItems, setTotalItems] = useState(0); // changes with filters
-	const [stats, setStats] = useState<LogStats | null>(null);
-	const [histogram, setHistogram] = useState<LogsHistogramResponse | null>(null);
-	const [initialLoading, setInitialLoading] = useState(true); // on initial load
-	const [fetchingLogs, setFetchingLogs] = useState(false); // on pagination/filters change
-	const [fetchingStats, setFetchingStats] = useState(false); // on stats fetch
-	const [fetchingHistogram, setFetchingHistogram] = useState(false); // on histogram fetch
-	const [error, setError] = useState<string | null>(null);
-	const [showEmptyState, setShowEmptyState] = useState(false);
-
-	const hasDeleteAccess = useRbac(RbacResource.Logs, RbacOperation.Delete);
-
-	// RTK Query lazy hooks for manual triggering
-	const [triggerGetLogs] = useLazyGetLogsQuery();
-	const [triggerGetStats] = useLazyGetLogsStatsQuery();
-	const [triggerGetHistogram] = useLazyGetLogsHistogramQuery();
-	const [deleteLogs] = useDeleteLogsMutation();
-
-	const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
-	const [sessionHighlightedLogId, setSessionHighlightedLogId] = useState<string | null>(null);
-	// Stable handler so SessionDetailsSheet's loadSessionPage useCallback doesn't
-	// recreate on every parent re-render. Without this, every live WebSocket log
-	// tick would re-render LogsPage, hand the sheet a fresh inline arrow, recreate
-	// loadSessionPage, and trip the reset effect — wiping sessionLogs and
-	// refetching from offset 0 while the sheet is open.
-	const handleSessionSheetOpenChange = useCallback((open: boolean) => {
-		if (!open) {
-			setSelectedSessionId(null);
-			setSessionHighlightedLogId(null);
-		}
-	}, []);
-	const [isChartOpen, setIsChartOpen] = useState(true);
-	const [triggerGetLogById] = useLazyGetLogByIdQuery();
-	const [fetchedLog, setFetchedLog] = useState<LogEntry | null>(null);
-
-	// Debouncing for streaming updates (client-side)
-	const streamingUpdateTimeouts = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
-
-	// Track if user has manually modified the time range
-	const userModifiedTimeRange = useRef<boolean>(false);
-
-	// Capture initial defaults on mount to detect shared URLs with custom time ranges
-	const initialDefaults = useRef(dateUtils.getDefaultTimeRange());
-
-	// Memoize default time range to prevent recalculation on every render
-	// This is crucial to avoid triggering refetches when the sheet opens/closes
-	const defaultTimeRange = useMemo(() => dateUtils.getDefaultTimeRange(), []);
-
-	// Get fresh default time range for refresh logic
-	const getDefaultTimeRange = () => dateUtils.getDefaultTimeRange();
-
-	// URL state management with nuqs - all filters and pagination in URL
-	const [urlState, setUrlState] = useQueryStates(
-		{
-			parent_request_id: parseAsString.withDefault(""),
-			providers: parseAsArrayOf(parseAsString).withDefault([]),
-			models: parseAsArrayOf(parseAsString).withDefault([]),
-			aliases: parseAsArrayOf(parseAsString).withDefault([]),
-			status: parseAsArrayOf(parseAsString).withDefault([]),
-			objects: parseAsArrayOf(parseAsString).withDefault([]),
-			selected_key_ids: parseAsArrayOf(parseAsString).withDefault([]),
-			virtual_key_ids: parseAsArrayOf(parseAsString).withDefault([]),
-			routing_rule_ids: parseAsArrayOf(parseAsString).withDefault([]),
-			routing_engine_used: parseAsArrayOf(parseAsString).withDefault([]),
-			user_ids: parseAsArrayOf(parseAsString).withDefault([]),
-			team_ids: parseAsArrayOf(parseAsString).withDefault([]),
-			customer_ids: parseAsArrayOf(parseAsString).withDefault([]),
-			business_unit_ids: parseAsArrayOf(parseAsString).withDefault([]),
-			content_search: parseAsString.withDefault(""),
-			start_time: parseAsInteger.withDefault(defaultTimeRange.startTime),
-			end_time: parseAsInteger.withDefault(defaultTimeRange.endTime),
-			limit: parseAsInteger.withDefault(25), // Default fallback, actual value calculated based on table height
-			offset: parseAsInteger.withDefault(0),
-			sort_by: parseAsString.withDefault("timestamp"),
-			order: parseAsString.withDefault("desc"),
-			live_enabled: parseAsBoolean.withDefault(true),
-			missing_cost_only: parseAsBoolean.withDefault(false),
-			metadata_filters: parseAsString.withDefault(""),
-			selected_log: parseAsString.withDefault(""),
-		},
-		{
-			history: "push",
-			shallow: false,
-		},
-	);
-
-	// Derive selectedLog: find in current logs array, or fetch by ID from API
-	const selectedLogId = urlState.selected_log || null;
-	const selectedLogFromData = useMemo(
-		() => (selectedLogId ? (logs.find((l) => l.id === selectedLogId) ?? null) : null),
-		[selectedLogId, logs],
-	);
-
-	const activeLogFetchId = useRef<string | null>(null);
-	useEffect(() => {
-		if (!selectedLogId || selectedLogFromData) {
-			setFetchedLog(null);
-			activeLogFetchId.current = null;
-			return;
-		}
-		// Track which log ID this fetch is for to prevent stale responses
-		const fetchId = selectedLogId;
-		activeLogFetchId.current = fetchId;
-		triggerGetLogById(selectedLogId).then((result) => {
-			if (activeLogFetchId.current === fetchId) {
-				if (result.data) {
-					setFetchedLog(result.data);
-				} else if (result.error) {
-					setError(getErrorMessage(result.error));
-				}
-			}
-		});
-	}, [selectedLogId, selectedLogFromData, triggerGetLogById]);
-
-	const selectedLog = selectedLogFromData ?? fetchedLog;
-
-	// Refresh time range defaults on page focus/visibility
-	useEffect(() => {
-		const refreshDefaultsIfStale = () => {
-			// Skip refresh if user has manually modified the time range
-			if (userModifiedTimeRange.current) {
-				return;
-			}
-
-			// Check if current time range matches the initial defaults (within tolerance)
-			const startTimeDiff = Math.abs(urlState.start_time - initialDefaults.current.startTime);
-			const endTimeDiff = Math.abs(urlState.end_time - initialDefaults.current.endTime);
-			const tolerance = 5; // 5 seconds tolerance for slight timing differences
-
-			// Only refresh if current values match the initial defaults
-			// This preserves shared URLs with custom time ranges
-			if (startTimeDiff <= tolerance && endTimeDiff <= tolerance) {
-				const defaults = getDefaultTimeRange();
-				const currentEndDiff = Math.abs(urlState.end_time - defaults.endTime);
-				// If end time is more than 5 minutes old, refresh both
-				if (currentEndDiff > 300) {
-					setUrlState({
-						start_time: defaults.startTime,
-						end_time: defaults.endTime,
-					});
-					// Update baseline so subsequent focus events compare against refreshed defaults
-					initialDefaults.current.startTime = defaults.startTime;
-					initialDefaults.current.endTime = defaults.endTime;
-				}
-			}
-		};
-
-		const handleVisibilityChange = () => {
-			if (!document.hidden) {
-				refreshDefaultsIfStale();
-			}
-		};
-
-		const handleFocus = () => {
-			refreshDefaultsIfStale();
-		};
-
-		document.addEventListener("visibilitychange", handleVisibilityChange);
-		window.addEventListener("focus", handleFocus);
-		return () => {
-			document.removeEventListener("visibilitychange", handleVisibilityChange);
-			window.removeEventListener("focus", handleFocus);
-		};
-	}, [urlState.start_time, urlState.end_time, setUrlState]);
-
-	// Convert URL state to filters and pagination for API calls
-	const filters: LogFilters = useMemo(
-		() => ({
-			parent_request_id: urlState.parent_request_id,
-			providers: urlState.providers,
-			models: urlState.models,
-			aliases: urlState.aliases,
-			status: urlState.status,
-			objects: urlState.objects,
-			selected_key_ids: urlState.selected_key_ids,
-			virtual_key_ids: urlState.virtual_key_ids,
-			routing_rule_ids: urlState.routing_rule_ids,
-			routing_engine_used: urlState.routing_engine_used,
-			user_ids: urlState.user_ids,
-			team_ids: urlState.team_ids,
-			customer_ids: urlState.customer_ids,
-			business_unit_ids: urlState.business_unit_ids,
-			content_search: urlState.content_search,
-			start_time: dateUtils.toISOString(urlState.start_time),
-			end_time: dateUtils.toISOString(urlState.end_time),
-			missing_cost_only: urlState.missing_cost_only,
-			metadata_filters: urlState.metadata_filters
-				? (() => {
-						try {
-							return JSON.parse(urlState.metadata_filters);
-						} catch {
-							return undefined;
-						}
-					})()
-				: undefined,
-		}),
-		// Only re-derive filters when filter-related URL params change (not pagination)
-		[
-			urlState.providers,
-			urlState.models,
-			urlState.aliases,
-			urlState.status,
-			urlState.objects,
-			urlState.selected_key_ids,
-			urlState.virtual_key_ids,
-			urlState.routing_rule_ids,
-			urlState.routing_engine_used,
-			urlState.user_ids,
-			urlState.team_ids,
-			urlState.customer_ids,
-			urlState.business_unit_ids,
-			urlState.content_search,
-			urlState.parent_request_id,
-			urlState.start_time,
-			urlState.end_time,
-			urlState.missing_cost_only,
-			urlState.metadata_filters,
-		],
-	);
-
-	const pagination: Pagination = useMemo(
-		() => ({
-			limit: urlState.limit,
-			offset: urlState.offset,
-			sort_by: urlState.sort_by as "timestamp" | "latency" | "tokens" | "cost",
-			order: urlState.order as "asc" | "desc",
-		}),
-		[urlState.limit, urlState.offset, urlState.sort_by, urlState.order],
-	);
-
-	const liveEnabled = urlState.live_enabled;
-
-	// Helper to update filters in URL
-	const setFilters = useCallback(
-		(newFilters: LogFilters) => {
-			// Mark time range as user-modified only if start_time or end_time actually changed
-			if (newFilters.start_time !== filters.start_time || newFilters.end_time !== filters.end_time) {
-				userModifiedTimeRange.current = true;
-			}
-
-			setUrlState({
-				parent_request_id: newFilters.parent_request_id || "",
-				providers: newFilters.providers || [],
-				models: newFilters.models || [],
-				aliases: newFilters.aliases || [],
-				status: newFilters.status || [],
-				objects: newFilters.objects || [],
-				selected_key_ids: newFilters.selected_key_ids || [],
-				virtual_key_ids: newFilters.virtual_key_ids || [],
-				routing_rule_ids: newFilters.routing_rule_ids || [],
-				routing_engine_used: newFilters.routing_engine_used || [],
-				user_ids: newFilters.user_ids || [],
-				team_ids: newFilters.team_ids || [],
-				customer_ids: newFilters.customer_ids || [],
-				business_unit_ids: newFilters.business_unit_ids || [],
-				content_search: newFilters.content_search || "",
-				start_time: newFilters.start_time ? dateUtils.toUnixTimestamp(new Date(newFilters.start_time)) : undefined,
-				end_time: newFilters.end_time ? dateUtils.toUnixTimestamp(new Date(newFilters.end_time)) : undefined,
-				missing_cost_only: newFilters.missing_cost_only ?? false,
-				metadata_filters: newFilters.metadata_filters ? JSON.stringify(newFilters.metadata_filters) : "",
-				offset: 0,
-			});
-		},
-		[setUrlState, filters],
-	);
-
-	// Helper to update pagination in URL
-	const setPagination = useCallback(
-		(newPagination: Pagination) => {
-			setUrlState({
-				limit: newPagination.limit,
-				offset: newPagination.offset,
-				sort_by: newPagination.sort_by,
-				order: newPagination.order,
-			});
-		},
-		[setUrlState],
-	);
-
-	// Handler for time range changes from the volume chart
-	const handleTimeRangeChange = useCallback(
-		(startTime: number, endTime: number) => {
-			setUrlState({
-				start_time: startTime,
-				end_time: endTime,
-				offset: 0,
-			});
-		},
-		[setUrlState],
-	);
-
-	// Handler for resetting zoom to default 24h view
-	const handleResetZoom = useCallback(() => {
-		const now = Math.floor(Date.now() / 1000);
-		const twentyFourHoursAgo = now - 24 * 60 * 60;
-		setUrlState({
-			start_time: twentyFourHoursAgo,
-			end_time: now,
-			offset: 0,
-		});
-	}, [setUrlState]);
-
-	// Check if user has zoomed (time range is different from default 24h)
-	const isZoomed = useMemo(() => {
-		const currentRange = urlState.end_time - urlState.start_time;
-		const defaultRange = 24 * 60 * 60; // 24 hours in seconds
-		// Consider zoomed if range is less than 90% of default (to account for minor differences)
-		return currentRange < defaultRange * 0.9;
-	}, [urlState.start_time, urlState.end_time]);
-
-	const latest = useRef({
-		logs,
-		filters,
-		pagination,
-		showEmptyState,
-		liveEnabled,
-	});
-	useEffect(() => {
-		latest.current = { logs, filters, pagination, showEmptyState, liveEnabled };
-	}, [logs, filters, pagination, showEmptyState, liveEnabled]);
-
-	const handleFilterByParentRequestId = useCallback(
-		(parentRequestId: string) => {
-			setSelectedSessionId(null);
-			setSessionHighlightedLogId(null);
-			setUrlState({ selected_log: "" }, { history: "replace" });
-			setFilters({
-				...filters,
-				parent_request_id: parentRequestId,
-			});
-		},
-		[filters, setFilters],
-	);
-
-	const handleDelete = useCallback(
-		async (log: LogEntry) => {
-			try {
-				await deleteLogs({ ids: [log.id] }).unwrap();
-				setLogs((prevLogs) => prevLogs.filter((l) => l.id !== log.id));
-				setTotalItems((prev) => prev - 1);
-				// Clear selected log if it was the deleted one
-				if (urlState.selected_log === log.id) {
-					setUrlState({ selected_log: "" });
-				}
-			} catch (error) {
-				setError(getErrorMessage(error));
-			}
-		},
-		[deleteLogs, urlState.selected_log, setUrlState],
-	);
-
-	const handleLogMessage = useCallback((log: LogEntry, operation: "create" | "update") => {
-		const { logs, filters, pagination, showEmptyState, liveEnabled } = latest.current;
-		// If we were in empty state, exit it since we now have logs
-		if (showEmptyState) {
-			setShowEmptyState(false);
-		}
-
-		if (operation === "create") {
-			// Handle new log creation
-			// Only prepend the new log if we're on the first page and sorted by timestamp desc
-			if (pagination.offset === 0 && pagination.sort_by === "timestamp" && pagination.order === "desc") {
-				// Check if the log matches current filters
-				if (!matchesFilters(log, filters, !liveEnabled)) {
-					return;
-				}
-
-				setLogs((prevLogs: LogEntry[]) => {
-					// Check if log already exists (prevent duplicates)
-					if (prevLogs.some((existingLog) => existingLog.id === log.id)) {
-						return prevLogs;
-					}
-
-					// Remove the last log if we're at the page limit
-					const updatedLogs = [log, ...prevLogs];
-					if (updatedLogs.length > pagination.limit) {
-						updatedLogs.pop();
-					}
-					return updatedLogs;
-				});
-
-				// Update fetchedLog if it matches (for real-time detail sheet updates when log is not on current page)
-				setFetchedLog((prev) => {
-					if (prev && prev.id === log.id) {
-						return log;
-					}
-					return prev;
-				});
-
-				setTotalItems((prev: number) => prev + 1);
-			}
-		} else if (operation === "update") {
-			// Handle log updates with debouncing for streaming
-
-			// Check if the log exists in our current list
-			const logExists = logs.some((existingLog) => existingLog.id === log.id);
-
-			if (!logExists) {
-				// Fallback: if log doesn't exist, treat as create (e.g., user was on different page when created)
-				if (pagination.offset === 0 && pagination.sort_by === "timestamp" && pagination.order === "desc") {
-					// Check if the log matches current filters
-					if (matchesFilters(log, filters, !liveEnabled)) {
-						setLogs((prevLogs: LogEntry[]) => {
-							// Double-check it doesn't exist (race condition protection)
-							if (prevLogs.some((existingLog) => existingLog.id === log.id)) {
-								return prevLogs.map((existingLog) => (existingLog.id === log.id ? log : existingLog));
-							}
-
-							// Add as new log
-							const updatedLogs = [log, ...prevLogs];
-							if (updatedLogs.length > pagination.limit) {
-								updatedLogs.pop();
-							}
-							return updatedLogs;
-						});
-					}
-				}
-			} else {
-				// Normal update flow for existing logs
-				if (log.stream) {
-					// For streaming logs, debounce updates to avoid UI thrashing
-					const existingTimeout = streamingUpdateTimeouts.current.get(log.id);
-					if (existingTimeout) {
-						clearTimeout(existingTimeout);
-					}
-
-					const timeout = setTimeout(() => {
-						updateExistingLog(log);
-						streamingUpdateTimeouts.current.delete(log.id);
-					}, 100); // 100ms debounce for streaming updates
-
-					streamingUpdateTimeouts.current.set(log.id, timeout);
-				} else {
-					// For non-streaming updates, update immediately
-					updateExistingLog(log);
-				}
-
-				// Update stats for completed requests
-				if (log.status == "success" || log.status == "error") {
-					setStats((prevStats) => {
-						if (!prevStats) return prevStats;
-
-						const newStats = { ...prevStats };
-						newStats.total_requests += 1;
-
-						// Update success rate
-						const successCount = (prevStats.success_rate / 100) * prevStats.total_requests;
-						const newSuccessCount = log.status === "success" ? successCount + 1 : successCount;
-						newStats.success_rate = (newSuccessCount / newStats.total_requests) * 100;
-
-						// Update user-facing success rate (same approximation as success_rate)
-						const userSuccessCount = ((prevStats.user_facing_success_rate ?? 0) / 100) * prevStats.total_requests;
-						const newUserSuccessCount = log.status === "success" ? userSuccessCount + 1 : userSuccessCount;
-						newStats.user_facing_success_rate = (newUserSuccessCount / newStats.total_requests) * 100;
-
-						// Update average latency
-						if (log.latency) {
-							const totalLatency = prevStats.average_latency * prevStats.total_requests;
-							newStats.average_latency = (totalLatency + log.latency) / newStats.total_requests;
-						}
-
-						// Update total tokens
-						if (log.token_usage) {
-							newStats.total_tokens += log.token_usage.total_tokens;
-						}
-
-						// Update total cost
-						if (log.cost) {
-							newStats.total_cost += log.cost;
-						}
-
-						return newStats;
-					});
-
-					// Update histogram for completed requests
-					setHistogram((prevHistogram) => {
-						if (!prevHistogram || typeof prevHistogram.bucket_size_seconds !== "number" || prevHistogram.bucket_size_seconds <= 0) {
-							return prevHistogram;
-						}
-
-						const logTime = new Date(log.timestamp).getTime();
-						const bucketSizeMs = prevHistogram.bucket_size_seconds * 1000;
-						const bucketTime = Math.floor(logTime / bucketSizeMs) * bucketSizeMs;
-
-						const updatedBuckets = [...prevHistogram.buckets];
-						const bucketIndex = updatedBuckets.findIndex((b) => {
-							const bTime = new Date(b.timestamp).getTime();
-							return Math.floor(bTime / bucketSizeMs) * bucketSizeMs === bucketTime;
-						});
-
-						if (bucketIndex >= 0) {
-							// Update existing bucket
-							updatedBuckets[bucketIndex] = {
-								...updatedBuckets[bucketIndex],
-								count: updatedBuckets[bucketIndex].count + 1,
-								success: updatedBuckets[bucketIndex].success + (log.status === "success" ? 1 : 0),
-								error: updatedBuckets[bucketIndex].error + (log.status === "error" ? 1 : 0),
-							};
-						} else {
-							// Create new bucket for this timestamp
-							const newBucket = {
-								timestamp: new Date(bucketTime).toISOString(),
-								count: 1,
-								success: log.status === "success" ? 1 : 0,
-								error: log.status === "error" ? 1 : 0,
-							};
-							// Insert in sorted order
-							const insertIndex = updatedBuckets.findIndex((b) => new Date(b.timestamp).getTime() > bucketTime);
-							if (insertIndex === -1) {
-								updatedBuckets.push(newBucket);
-							} else {
-								updatedBuckets.splice(insertIndex, 0, newBucket);
-							}
-						}
-
-						return { ...prevHistogram, buckets: updatedBuckets };
-					});
-				}
-			}
-		}
-	}, []);
-
-	const updateExistingLog = useCallback((updatedLog: LogEntry) => {
-		setLogs((prevLogs: LogEntry[]) => {
-			return prevLogs.map((existingLog) => (existingLog.id === updatedLog.id ? updatedLog : existingLog));
-		});
-
-		// Update fetchedLog if it matches the updated log (for real-time detail sheet updates when log is not on current page)
-		setFetchedLog((prev) => {
-			if (prev && prev.id === updatedLog.id) {
-				return updatedLog;
-			}
-			return prev;
-		});
-	}, []);
-
-	const { isConnected: isSocketConnected, subscribe } = useWebSocket();
-
-	// Subscribe to log messages - only when live updates are enabled
-	useEffect(() => {
-		if (!liveEnabled) {
-			return;
-		}
-
-		const unsubscribe = subscribe("log", (data) => {
-			const { payload, operation } = data;
-			handleLogMessage(payload, operation);
-		});
-
-		return unsubscribe;
-	}, [handleLogMessage, subscribe, liveEnabled]);
-
-	// Cleanup timeouts on unmount
-	useEffect(() => {
-		return () => {
-			streamingUpdateTimeouts.current.forEach((timeout) => clearTimeout(timeout));
-			streamingUpdateTimeouts.current.clear();
-		};
-	}, []);
-
-	const fetchLogs = useCallback(async () => {
-		setFetchingLogs(true);
-		setError(null);
-
-		try {
-			const result = await triggerGetLogs({ filters, pagination });
-
-			if (result.error) {
-				const errorMessage = getErrorMessage(result.error);
-				setError(errorMessage);
-				setLogs([]);
-				setTotalItems(0);
-			} else if (result.data) {
-				setLogs(result.data.logs || []);
-				setTotalItems(result.data.stats.total_requests);
-			}
-
-			// Only set showEmptyState on initial load and only based on total logs
-			if (initialLoading) {
-				// Check if there are any logs globally, not just in the current filter
-				setShowEmptyState(result.data ? !result.data.has_logs : true);
-			}
-		} catch {
-			setError("Cannot fetch logs. Please check if logs are enabled in your Bifrost config.");
-			setLogs([]);
-			setTotalItems(0);
-			setShowEmptyState(true);
-		} finally {
-			setFetchingLogs(false);
-		}
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filters, pagination]);
-
-	const fetchStats = useCallback(async () => {
-		setFetchingStats(true);
-		try {
-			const result = await triggerGetStats({ filters });
-
-			if (result.error) {
-				// Don't show error for stats failure, just log it
-				console.error("Failed to fetch stats:", result.error);
-			} else if (result.data) {
-				setStats(result.data);
-			}
-		} catch (error) {
-			console.error("Failed to fetch stats:", error);
-		} finally {
-			setFetchingStats(false);
-		}
-	}, [filters, triggerGetStats]);
-
-	const fetchHistogram = useCallback(async () => {
-		setFetchingHistogram(true);
-
-		try {
-			const result = await triggerGetHistogram({ filters });
-
-			if (result.error) {
-				// Don't show error for histogram failure, just log it
-				console.error("Failed to fetch histogram:", result.error);
-			} else if (result.data) {
-				setHistogram(result.data);
-			}
-		} catch (error) {
-			console.error("Failed to fetch histogram:", error);
-		} finally {
-			setFetchingHistogram(false);
-		}
-	}, [filters, triggerGetHistogram]);
-
-	// Helper to toggle live updates
-	const handleLiveToggle = useCallback(
-		(enabled: boolean) => {
-			setUrlState({ live_enabled: enabled });
-			// When re-enabling, refetch logs to get latest data
-			if (enabled) {
-				fetchLogs();
-			}
-		},
-		[setUrlState, fetchLogs],
-	);
-
-	// Fetch logs when filters or pagination change
-	useEffect(() => {
-		if (!initialLoading) {
-			fetchLogs();
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filters, pagination, initialLoading]);
-
-	// Fetch stats and histogram when filters change (but not pagination)
-	useEffect(() => {
-		if (!initialLoading) {
-			fetchStats();
-			fetchHistogram();
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filters, initialLoading]);
-
-	// Initial load
-	useEffect(() => {
-		const initialLoad = async () => {
-			// Load logs and stats in parallel, don't wait for stats to show the page
-			await fetchLogs();
-			fetchStats(); // Don't await - let it load in background
-			fetchHistogram(); // Don't await - let it load in background
-			setInitialLoading(false);
-		};
-		initialLoad();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	const getMessageText = (content: ChatMessageContent): string => {
-		if (typeof content === "string") {
-			return content;
-		}
-		if (Array.isArray(content)) {
-			return content.reduce((acc: string, block: ContentBlock) => {
-				if (block.type === "text" && block.text) {
-					return acc + block.text;
-				}
-				return acc;
-			}, "");
-		}
-		return "";
-	};
-
-	// Helper function to check if a log matches the current filters
-	const matchesFilters = (log: LogEntry, filters: LogFilters, applyTimeFilters = true): boolean => {
-		if (filters.user_ids?.length) {
-			if (!log.user_id || !filters.user_ids.includes(log.user_id)) return false;
-		}
-		if (filters.team_ids?.length) {
-			if (!log.team_id || !filters.team_ids.includes(log.team_id)) return false;
-		}
-		if (filters.customer_ids?.length) {
-			if (!log.customer_id || !filters.customer_ids.includes(log.customer_id)) return false;
-		}
-		if (filters.business_unit_ids?.length) {
-			if (!log.business_unit_id || !filters.business_unit_ids.includes(log.business_unit_id)) return false;
-		}
-		if (filters.missing_cost_only && typeof log.cost === "number" && log.cost > 0) {
-			return false;
-		}
-		if (filters.parent_request_id && log.parent_request_id !== filters.parent_request_id) {
-			return false;
-		}
-		if (filters.providers?.length && !filters.providers.includes(log.provider)) {
-			return false;
-		}
-		if (filters.aliases?.length && !filters.aliases.includes(log.alias ?? "")) {
-			return false;
-		}
-		if (filters.models?.length && !filters.models.includes(log.model)) {
-			return false;
-		}
-		if (filters.status?.length && !filters.status.includes(log.status)) {
-			return false;
-		}
-		if (filters.objects?.length && !filters.objects.includes(log.object)) {
-			return false;
-		}
-		if (filters.selected_key_ids?.length && log.selected_key_id && !filters.selected_key_ids.includes(log.selected_key_id)) {
-			return false;
-		}
-		if (filters.virtual_key_ids?.length) {
-			if (!log.virtual_key_id || !filters.virtual_key_ids.includes(log.virtual_key_id)) {
-				return false;
-			}
-		}
-		if (filters.routing_rule_ids?.length) {
-			if (!log.routing_rule_id || !filters.routing_rule_ids.includes(log.routing_rule_id)) {
-				return false;
-			}
-		}
-		if (filters.routing_engine_used?.length) {
-			if (!log.routing_engines_used || !log.routing_engines_used.some((engine) => filters.routing_engine_used!.includes(engine))) {
-				return false;
-			}
-		}
-		if (filters.start_time && new Date(log.timestamp) < new Date(filters.start_time)) {
-			return false;
-		}
-		if (applyTimeFilters && filters.end_time && new Date(log.timestamp) > new Date(filters.end_time)) {
-			return false;
-		}
-		if (filters.min_latency && (!log.latency || log.latency < filters.min_latency)) {
-			return false;
-		}
-		if (filters.max_latency && (!log.latency || log.latency > filters.max_latency)) {
-			return false;
-		}
-		if (filters.min_tokens && (!log.token_usage || log.token_usage.total_tokens < filters.min_tokens)) {
-			return false;
-		}
-		if (filters.max_tokens && (!log.token_usage || log.token_usage.total_tokens > filters.max_tokens)) {
-			return false;
-		}
-		if (filters.metadata_filters) {
-			for (const [key, value] of Object.entries(filters.metadata_filters)) {
-				const metadataValue = log.metadata?.[key];
-				if (metadataValue === undefined || String(metadataValue) !== value) {
-					return false;
-				}
-			}
-		}
-		if (filters.content_search) {
-			const search = filters.content_search.toLowerCase();
-			const content = [
-				...(log.input_history || []).map((msg: ChatMessage) => getMessageText(msg.content)),
-				log.output_message ? getMessageText(log.output_message.content) : "",
-			]
-				.join(" ")
-				.toLowerCase();
-
-			if (!content.includes(search)) {
-				return false;
-			}
-		}
-		return true;
-	};
-
-	const statCards = useMemo(
-		() => [
-			{
-				title: "Total Requests",
-				value: <NumberFlow value={stats?.total_requests ?? 0} format={COMPACT_NUMBER_FORMAT} />,
-				icon: <BarChart className="size-4" />,
-			},
-			{
-				title: "Success Rate",
-				value: <NumberFlow value={stats?.success_rate ?? 0} format={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }} suffix="%" />,
-				icon: <CheckCircle className="size-4" />,
-				description:
-					"Success rate as perceived by the system. Each fallback counts as a separate attempt. Retries on the same request are counted as one attempt.",
-			},
-			{
-				title: "User Success Rate",
-				value: fetchingStats ? <Skeleton className="h-8 w-16" /> : stats ? `${(stats.user_facing_success_rate ?? 0).toFixed(2)}%` : "-",
-				icon: <CheckCircle className="size-4" />,
-				description: "Success rate as perceived by the end user. It includes fallback chains as one request.",
-			},
-			{
-				title: "Avg Latency",
-				value: (
-					<NumberFlow value={stats?.average_latency ?? 0} format={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }} suffix="ms" />
-				),
-				icon: <Clock className="size-4" />,
-			},
-			{
-				title: "Total Tokens",
-				value: <NumberFlow value={stats?.total_tokens ?? 0} format={COMPACT_NUMBER_FORMAT} />,
-				icon: <Hash className="size-4" />,
-			},
-			{
-				title: "Total Cost",
-				value: (
-					<NumberFlow
-						value={stats?.total_cost ?? 0}
-						format={{
-							...COMPACT_NUMBER_FORMAT,
-							style: "currency",
-							currency: "USD",
-						}}
-					/>
-				),
-				icon: <DollarSign className="size-4" />,
-			},
-		],
-		[stats],
-	);
-
-	const { data: filterData } = useGetAvailableFilterDataQuery();
-
-	// Get metadata keys from filterdata API so columns always show even with no data on current page
-	const metadataKeys = useMemo(() => {
-		if (!filterData?.metadata_keys) return [];
-		return Object.keys(filterData.metadata_keys).sort();
-	}, [filterData?.metadata_keys]);
-
-	const columns = useMemo(() => createColumns(handleDelete, hasDeleteAccess, metadataKeys), [handleDelete, hasDeleteAccess, metadataKeys]);
-
-	const columnIds = useMemo(
-		() => columns.map((col) => ("id" in col && col.id ? col.id : "accessorKey" in col ? String(col.accessorKey) : "")).filter(Boolean),
-		[columns],
-	);
-
-	const COLUMN_LABELS: Record<string, string> = useMemo(
-		() => ({
-			timestamp: "Time",
-			request_type: "Type",
-			input: "Message",
-			provider: "Provider",
-			model: "Model",
-			latency: "Latency",
-			tokens: "Tokens",
-			cost: "Cost",
-		}),
-		[],
-	);
-
-	const {
-		entries: columnEntries,
-		columnOrder,
-		columnVisibility,
-		columnPinning,
-		toggleVisibility: toggleColumnVisibility,
-		togglePin: toggleColumnPin,
-		reorder: reorderColumns,
-		reset: resetColumns,
-	} = useColumnConfig({ columnIds, paramName: "cols" });
-
-	// Navigation for log detail sheet
-	const selectedLogIndex = useMemo(() => (selectedLogId ? logs.findIndex((l) => l.id === selectedLogId) : -1), [selectedLogId, logs]);
-
-	const handleLogNavigate = useCallback(
-		(direction: "prev" | "next") => {
-			const currentLogId = selectedLogId || "";
-			if (direction === "prev") {
-				if (selectedLogIndex > 0) {
-					// Navigate to previous log on current page
-					setUrlState({ selected_log: logs[selectedLogIndex - 1].id });
-				} else if (pagination.offset > 0) {
-					// Go to previous page and select the last item
-					const newOffset = Math.max(0, pagination.offset - pagination.limit);
-					setUrlState({ offset: newOffset, selected_log: "" });
-					// Fetch previous page, then select last log
-					triggerGetLogs({
-						filters,
-						pagination: { ...pagination, offset: newOffset },
-					}).then((result) => {
-						if (result.data?.logs?.length) {
-							const lastLog = result.data.logs[result.data.logs.length - 1];
-							setUrlState({ selected_log: lastLog.id });
-						} else if (result.error) {
-							setUrlState({
-								offset: pagination.offset,
-								selected_log: currentLogId,
-							});
-							setError(getErrorMessage(result.error));
-						}
-					});
-				}
-			} else {
-				if (selectedLogIndex >= 0 && selectedLogIndex < logs.length - 1) {
-					// Navigate to next log on current page
-					setUrlState({ selected_log: logs[selectedLogIndex + 1].id });
-				} else if (pagination.offset + pagination.limit < totalItems) {
-					// Go to next page and select the first item
-					const newOffset = pagination.offset + pagination.limit;
-					setUrlState({ offset: newOffset, selected_log: "" });
-					// Fetch next page, then select first log
-					triggerGetLogs({
-						filters,
-						pagination: { ...pagination, offset: newOffset },
-					}).then((result) => {
-						if (result.data?.logs?.length) {
-							const firstLog = result.data.logs[0];
-							setUrlState({ selected_log: firstLog.id });
-						} else if (result.error) {
-							setUrlState({
-								offset: pagination.offset,
-								selected_log: currentLogId,
-							});
-							setError(getErrorMessage(result.error));
-						}
-					});
-				}
-			}
-		},
-		[selectedLogId, selectedLogIndex, logs, pagination, totalItems, filters, setUrlState, triggerGetLogs],
-	);
-
-	return (
-		<div className="dark:bg-card no-padding-parent no-border-parent h-[calc(100vh_-_16px)]">
-			{initialLoading ? (
-				<FullPageLoader />
-			) : showEmptyState ? (
-				<EmptyState isSocketConnected={isSocketConnected} error={error} />
-			) : (
-				<div className="bg-background flex h-full w-full grow gap-3">
-					{/* Sidebar Filters */}
-					<LogsFilterSidebar filters={filters} onFiltersChange={setFilters} />
-
-					{/* Main Content */}
-					<div className="bg-card flex min-w-0 flex-1 flex-col gap-2 overflow-hidden rounded-l-md p-4 pb-2">
-						<div className="shrink-0">
-							<LogsHeaderView
-								filters={filters}
-								onFiltersChange={setFilters}
-								liveEnabled={liveEnabled}
-								onLiveToggle={handleLiveToggle}
-								fetchLogs={fetchLogs}
-								fetchStats={fetchStats}
-								columnEntries={columnEntries}
-								columnLabels={COLUMN_LABELS}
-								onToggleColumnVisibility={toggleColumnVisibility}
-								onResetColumns={resetColumns}
-							/>
-						</div>
-						<div className="grid shrink-0 grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
-							{statCards.map((card) => (
-								<Card key={card.title} className="py-4 shadow-none">
-									<CardContent
-										className={`flex items-center justify-between px-4 transition-opacity duration-200 ${fetchingStats ? "opacity-50" : "opacity-100"}`}
-									>
-										<div className="w-full min-w-0">
-											<div className="text-muted-foreground flex items-center gap-1 text-xs">
-												<span className="truncate">{card.title}</span>
-												{"description" in card && card.description && (
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<button
-																type="button"
-																aria-label={`${card.title} info`}
-																data-testid={`logs-metric-info-${card.title.toLowerCase().replace(/\s+/g, "-")}`}
-																className="inline-flex items-center"
-															>
-																<Info className="size-3 cursor-help" />
-															</button>
-														</TooltipTrigger>
-														<TooltipContent className="max-w-72 text-left text-xs text-wrap">{card.description}</TooltipContent>
-													</Tooltip>
-												)}
-											</div>
-											<div className="truncate font-mono text-xl font-medium sm:text-2xl">{card.value}</div>
-										</div>
-									</CardContent>
-								</Card>
-							))}
-						</div>
-
-						<div className="shrink-0">
-							<LogsVolumeChart
-								data={histogram}
-								loading={fetchingHistogram}
-								onTimeRangeChange={handleTimeRangeChange}
-								onResetZoom={handleResetZoom}
-								isZoomed={isZoomed}
-								startTime={urlState.start_time}
-								endTime={urlState.end_time}
-								isOpen={isChartOpen}
-								onOpenChange={setIsChartOpen}
-							/>
-						</div>
-
-						{error && (
-							<Alert variant="destructive" className="shrink-0">
-								<AlertCircle className="h-4 w-4" />
-								<AlertDescription>{error}</AlertDescription>
-							</Alert>
-						)}
-
-						<div className="min-h-0 flex-1">
-							<LogsDataTable
-								columns={columns}
-								data={logs}
-								totalItems={totalItems}
-								loading={fetchingLogs}
-								pagination={pagination}
-								onPaginationChange={setPagination}
-								onRowClick={(row, columnId) => {
-									if (columnId === "actions") return;
-									setUrlState({ selected_log: row.id }, { history: "replace" });
-									setSelectedSessionId(null);
-									setSessionHighlightedLogId(null);
-								}}
-								liveEnabled={liveEnabled}
-								isSocketConnected={isSocketConnected}
-								columnEntries={columnEntries}
-								columnOrder={columnOrder}
-								columnVisibility={columnVisibility}
-								columnPinning={columnPinning}
-								onToggleColumnVisibility={toggleColumnVisibility}
-								onTogglePin={toggleColumnPin}
-								onReorderColumns={reorderColumns}
-							/>
-						</div>
-					</div>
-
-					{/* Log Detail Sheet */}
-					<LogDetailSheet
-						log={selectedLog}
-						open={selectedLog !== null}
-						onOpenChange={(open) => !open && setUrlState({ selected_log: "" })}
-						handleDelete={handleDelete}
-						onNavigate={handleLogNavigate}
-						hasPrev={selectedLogIndex > 0 || (selectedLogIndex !== -1 && pagination.offset > 0)}
-						hasNext={selectedLogIndex !== -1 && (selectedLogIndex < logs.length - 1 || pagination.offset + pagination.limit < totalItems)}
-						onFilterByParentRequestId={handleFilterByParentRequestId}
-						onViewSession={(sessionId, logId) => {
-							setUrlState({ selected_log: "" }, { history: "replace" });
-							setSessionHighlightedLogId(logId);
-							setSelectedSessionId(sessionId);
-						}}
-					/>
-					<SessionDetailsSheet
-						sessionId={selectedSessionId}
-						highlightedLogId={sessionHighlightedLogId}
-						open={selectedSessionId !== null}
-						onOpenChange={handleSessionSheetOpenChange}
-						liveEnabled={liveEnabled}
-						onLogClick={(log) => {
-							setSelectedSessionId(null);
-							setUrlState({ selected_log: log.id }, { history: "replace" });
-						}}
-						onFilterByParentRequestId={handleFilterByParentRequestId}
-					/>
-				</div>
-			)}
-		</div>
-	);
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [totalItems, setTotalItems] = useState(0); // changes with filters
+  const [stats, setStats] = useState<LogStats | null>(null);
+  const [histogram, setHistogram] = useState<LogsHistogramResponse | null>(null);
+  const [initialLoading, setInitialLoading] = useState(true); // on initial load
+  const [fetchingLogs, setFetchingLogs] = useState(false); // on pagination/filters change
+  const [fetchingStats, setFetchingStats] = useState(false); // on stats fetch
+  const [fetchingHistogram, setFetchingHistogram] = useState(false); // on histogram fetch
+  const [error, setError] = useState<string | null>(null);
+  const [showEmptyState, setShowEmptyState] = useState(false);
+
+  const hasDeleteAccess = useRbac(RbacResource.Logs, RbacOperation.Delete);
+
+  // RTK Query lazy hooks for manual triggering
+  const [triggerGetLogs] = useLazyGetLogsQuery();
+  const [triggerGetStats] = useLazyGetLogsStatsQuery();
+  const [triggerGetHistogram] = useLazyGetLogsHistogramQuery();
+  const [deleteLogs] = useDeleteLogsMutation();
+
+  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
+  const [sessionHighlightedLogId, setSessionHighlightedLogId] = useState<string | null>(null);
+  // Stable handler so SessionDetailsSheet's loadSessionPage useCallback doesn't
+  // recreate on every parent re-render. Without this, every live WebSocket log
+  // tick would re-render LogsPage, hand the sheet a fresh inline arrow, recreate
+  // loadSessionPage, and trip the reset effect — wiping sessionLogs and
+  // refetching from offset 0 while the sheet is open.
+  const handleSessionSheetOpenChange = useCallback((open: boolean) => {
+    if (!open) {
+      setSelectedSessionId(null);
+      setSessionHighlightedLogId(null);
+    }
+  }, []);
+  const [isChartOpen, setIsChartOpen] = useState(true);
+  const [triggerGetLogById] = useLazyGetLogByIdQuery();
+  const [fetchedLog, setFetchedLog] = useState<LogEntry | null>(null);
+
+  // Debouncing for streaming updates (client-side)
+  const streamingUpdateTimeouts = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  // Track if user has manually modified the time range
+  const userModifiedTimeRange = useRef<boolean>(false);
+
+  // Capture initial defaults on mount to detect shared URLs with custom time ranges
+  const initialDefaults = useRef(dateUtils.getDefaultTimeRange());
+
+  // Memoize default time range to prevent recalculation on every render
+  // This is crucial to avoid triggering refetches when the sheet opens/closes
+  const defaultTimeRange = useMemo(() => dateUtils.getDefaultTimeRange(), []);
+
+  // Get fresh default time range for refresh logic
+  const getDefaultTimeRange = () => dateUtils.getDefaultTimeRange();
+
+  // URL state management with nuqs - all filters and pagination in URL
+  const [urlState, setUrlState] = useQueryStates(
+    {
+      parent_request_id: parseAsString.withDefault(""),
+      providers: parseAsArrayOf(parseAsString).withDefault([]),
+      models: parseAsArrayOf(parseAsString).withDefault([]),
+      aliases: parseAsArrayOf(parseAsString).withDefault([]),
+      status: parseAsArrayOf(parseAsString).withDefault([]),
+      objects: parseAsArrayOf(parseAsString).withDefault([]),
+      selected_key_ids: parseAsArrayOf(parseAsString).withDefault([]),
+      virtual_key_ids: parseAsArrayOf(parseAsString).withDefault([]),
+      routing_rule_ids: parseAsArrayOf(parseAsString).withDefault([]),
+      routing_engine_used: parseAsArrayOf(parseAsString).withDefault([]),
+      user_ids: parseAsArrayOf(parseAsString).withDefault([]),
+      team_ids: parseAsArrayOf(parseAsString).withDefault([]),
+      customer_ids: parseAsArrayOf(parseAsString).withDefault([]),
+      business_unit_ids: parseAsArrayOf(parseAsString).withDefault([]),
+      content_search: parseAsString.withDefault(""),
+      start_time: parseAsInteger.withDefault(defaultTimeRange.startTime),
+      end_time: parseAsInteger.withDefault(defaultTimeRange.endTime),
+      limit: parseAsInteger.withDefault(25), // Default fallback, actual value calculated based on table height
+      offset: parseAsInteger.withDefault(0),
+      sort_by: parseAsString.withDefault("timestamp"),
+      order: parseAsString.withDefault("desc"),
+      live_enabled: parseAsBoolean.withDefault(true),
+      missing_cost_only: parseAsBoolean.withDefault(false),
+      metadata_filters: parseAsString.withDefault(""),
+      selected_log: parseAsString.withDefault(""),
+    },
+    {
+      history: "push",
+      shallow: false,
+    },
+  );
+
+  // Derive selectedLog: find in current logs array, or fetch by ID from API
+  const selectedLogId = urlState.selected_log || null;
+  const selectedLogFromData = useMemo(
+    () => (selectedLogId ? (logs.find((l) => l.id === selectedLogId) ?? null) : null),
+    [selectedLogId, logs],
+  );
+
+  const activeLogFetchId = useRef<string | null>(null);
+  useEffect(() => {
+    if (!selectedLogId || selectedLogFromData) {
+      setFetchedLog(null);
+      activeLogFetchId.current = null;
+      return;
+    }
+    // Track which log ID this fetch is for to prevent stale responses
+    const fetchId = selectedLogId;
+    activeLogFetchId.current = fetchId;
+    triggerGetLogById(selectedLogId).then((result) => {
+      if (activeLogFetchId.current === fetchId) {
+        if (result.data) {
+          setFetchedLog(result.data);
+        } else if (result.error) {
+          setError(getErrorMessage(result.error));
+        }
+      }
+    });
+  }, [selectedLogId, selectedLogFromData, triggerGetLogById]);
+
+  const selectedLog = selectedLogFromData ?? fetchedLog;
+
+  // Refresh time range defaults on page focus/visibility
+  useEffect(() => {
+    const refreshDefaultsIfStale = () => {
+      // Skip refresh if user has manually modified the time range
+      if (userModifiedTimeRange.current) {
+        return;
+      }
+
+      // Check if current time range matches the initial defaults (within tolerance)
+      const startTimeDiff = Math.abs(urlState.start_time - initialDefaults.current.startTime);
+      const endTimeDiff = Math.abs(urlState.end_time - initialDefaults.current.endTime);
+      const tolerance = 5; // 5 seconds tolerance for slight timing differences
+
+      // Only refresh if current values match the initial defaults
+      // This preserves shared URLs with custom time ranges
+      if (startTimeDiff <= tolerance && endTimeDiff <= tolerance) {
+        const defaults = getDefaultTimeRange();
+        const currentEndDiff = Math.abs(urlState.end_time - defaults.endTime);
+        // If end time is more than 5 minutes old, refresh both
+        if (currentEndDiff > 300) {
+          setUrlState({
+            start_time: defaults.startTime,
+            end_time: defaults.endTime,
+          });
+          // Update baseline so subsequent focus events compare against refreshed defaults
+          initialDefaults.current.startTime = defaults.startTime;
+          initialDefaults.current.endTime = defaults.endTime;
+        }
+      }
+    };
+
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        refreshDefaultsIfStale();
+      }
+    };
+
+    const handleFocus = () => {
+      refreshDefaultsIfStale();
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("focus", handleFocus);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, [urlState.start_time, urlState.end_time, setUrlState]);
+
+  // Convert URL state to filters and pagination for API calls
+  const filters: LogFilters = useMemo(
+    () => ({
+      parent_request_id: urlState.parent_request_id,
+      providers: urlState.providers,
+      models: urlState.models,
+      aliases: urlState.aliases,
+      status: urlState.status,
+      objects: urlState.objects,
+      selected_key_ids: urlState.selected_key_ids,
+      virtual_key_ids: urlState.virtual_key_ids,
+      routing_rule_ids: urlState.routing_rule_ids,
+      routing_engine_used: urlState.routing_engine_used,
+      user_ids: urlState.user_ids,
+      team_ids: urlState.team_ids,
+      customer_ids: urlState.customer_ids,
+      business_unit_ids: urlState.business_unit_ids,
+      content_search: urlState.content_search,
+      start_time: dateUtils.toISOString(urlState.start_time),
+      end_time: dateUtils.toISOString(urlState.end_time),
+      missing_cost_only: urlState.missing_cost_only,
+      metadata_filters: urlState.metadata_filters
+        ? (() => {
+          try {
+            return JSON.parse(urlState.metadata_filters);
+          } catch {
+            return undefined;
+          }
+        })()
+        : undefined,
+    }),
+    // Only re-derive filters when filter-related URL params change (not pagination)
+    [
+      urlState.providers,
+      urlState.models,
+      urlState.aliases,
+      urlState.status,
+      urlState.objects,
+      urlState.selected_key_ids,
+      urlState.virtual_key_ids,
+      urlState.routing_rule_ids,
+      urlState.routing_engine_used,
+      urlState.user_ids,
+      urlState.team_ids,
+      urlState.customer_ids,
+      urlState.business_unit_ids,
+      urlState.content_search,
+      urlState.parent_request_id,
+      urlState.start_time,
+      urlState.end_time,
+      urlState.missing_cost_only,
+      urlState.metadata_filters,
+    ],
+  );
+
+  const pagination: Pagination = useMemo(
+    () => ({
+      limit: urlState.limit,
+      offset: urlState.offset,
+      sort_by: urlState.sort_by as "timestamp" | "latency" | "tokens" | "cost",
+      order: urlState.order as "asc" | "desc",
+    }),
+    [urlState.limit, urlState.offset, urlState.sort_by, urlState.order],
+  );
+
+  const liveEnabled = urlState.live_enabled;
+
+  // Helper to update filters in URL
+  const setFilters = useCallback(
+    (newFilters: LogFilters) => {
+      // Mark time range as user-modified only if start_time or end_time actually changed
+      if (newFilters.start_time !== filters.start_time || newFilters.end_time !== filters.end_time) {
+        userModifiedTimeRange.current = true;
+      }
+
+      setUrlState({
+        parent_request_id: newFilters.parent_request_id || "",
+        providers: newFilters.providers || [],
+        models: newFilters.models || [],
+        aliases: newFilters.aliases || [],
+        status: newFilters.status || [],
+        objects: newFilters.objects || [],
+        selected_key_ids: newFilters.selected_key_ids || [],
+        virtual_key_ids: newFilters.virtual_key_ids || [],
+        routing_rule_ids: newFilters.routing_rule_ids || [],
+        routing_engine_used: newFilters.routing_engine_used || [],
+        user_ids: newFilters.user_ids || [],
+        team_ids: newFilters.team_ids || [],
+        customer_ids: newFilters.customer_ids || [],
+        business_unit_ids: newFilters.business_unit_ids || [],
+        content_search: newFilters.content_search || "",
+        start_time: newFilters.start_time ? dateUtils.toUnixTimestamp(new Date(newFilters.start_time)) : undefined,
+        end_time: newFilters.end_time ? dateUtils.toUnixTimestamp(new Date(newFilters.end_time)) : undefined,
+        missing_cost_only: newFilters.missing_cost_only ?? false,
+        metadata_filters: newFilters.metadata_filters ? JSON.stringify(newFilters.metadata_filters) : "",
+        offset: 0,
+      });
+    },
+    [setUrlState, filters],
+  );
+
+  // Helper to update pagination in URL
+  const setPagination = useCallback(
+    (newPagination: Pagination) => {
+      setUrlState({
+        limit: newPagination.limit,
+        offset: newPagination.offset,
+        sort_by: newPagination.sort_by,
+        order: newPagination.order,
+      });
+    },
+    [setUrlState],
+  );
+
+  // Handler for time range changes from the volume chart
+  const handleTimeRangeChange = useCallback(
+    (startTime: number, endTime: number) => {
+      setUrlState({
+        start_time: startTime,
+        end_time: endTime,
+        offset: 0,
+      });
+    },
+    [setUrlState],
+  );
+
+  // Handler for resetting zoom to default 24h view
+  const handleResetZoom = useCallback(() => {
+    const now = Math.floor(Date.now() / 1000);
+    const twentyFourHoursAgo = now - 24 * 60 * 60;
+    setUrlState({
+      start_time: twentyFourHoursAgo,
+      end_time: now,
+      offset: 0,
+    });
+  }, [setUrlState]);
+
+  // Check if user has zoomed (time range is different from default 24h)
+  const isZoomed = useMemo(() => {
+    const currentRange = urlState.end_time - urlState.start_time;
+    const defaultRange = 24 * 60 * 60; // 24 hours in seconds
+    // Consider zoomed if range is less than 90% of default (to account for minor differences)
+    return currentRange < defaultRange * 0.9;
+  }, [urlState.start_time, urlState.end_time]);
+
+  const latest = useRef({
+    logs,
+    filters,
+    pagination,
+    showEmptyState,
+    liveEnabled,
+  });
+  useEffect(() => {
+    latest.current = { logs, filters, pagination, showEmptyState, liveEnabled };
+  }, [logs, filters, pagination, showEmptyState, liveEnabled]);
+
+  const handleFilterByParentRequestId = useCallback(
+    (parentRequestId: string) => {
+      setSelectedSessionId(null);
+      setSessionHighlightedLogId(null);
+      setUrlState({ selected_log: "" }, { history: "replace" });
+      setFilters({
+        ...filters,
+        parent_request_id: parentRequestId,
+      });
+    },
+    [filters, setFilters],
+  );
+
+  const handleDelete = useCallback(
+    async (log: LogEntry) => {
+      try {
+        await deleteLogs({ ids: [log.id] }).unwrap();
+        setLogs((prevLogs) => prevLogs.filter((l) => l.id !== log.id));
+        setTotalItems((prev) => prev - 1);
+        // Clear selected log if it was the deleted one
+        if (urlState.selected_log === log.id) {
+          setUrlState({ selected_log: "" });
+        }
+      } catch (error) {
+        setError(getErrorMessage(error));
+      }
+    },
+    [deleteLogs, urlState.selected_log, setUrlState],
+  );
+
+  const handleLogMessage = useCallback((log: LogEntry, operation: "create" | "update") => {
+    const { logs, filters, pagination, showEmptyState, liveEnabled } = latest.current;
+    // If we were in empty state, exit it since we now have logs
+    if (showEmptyState) {
+      setShowEmptyState(false);
+    }
+
+    if (operation === "create") {
+      // Handle new log creation
+      // Only prepend the new log if we're on the first page and sorted by timestamp desc
+      if (pagination.offset === 0 && pagination.sort_by === "timestamp" && pagination.order === "desc") {
+        // Check if the log matches current filters
+        if (!matchesFilters(log, filters, !liveEnabled)) {
+          return;
+        }
+
+        setLogs((prevLogs: LogEntry[]) => {
+          // Check if log already exists (prevent duplicates)
+          if (prevLogs.some((existingLog) => existingLog.id === log.id)) {
+            return prevLogs;
+          }
+
+          // Remove the last log if we're at the page limit
+          const updatedLogs = [log, ...prevLogs];
+          if (updatedLogs.length > pagination.limit) {
+            updatedLogs.pop();
+          }
+          return updatedLogs;
+        });
+
+        // Update fetchedLog if it matches (for real-time detail sheet updates when log is not on current page)
+        setFetchedLog((prev) => {
+          if (prev && prev.id === log.id) {
+            return log;
+          }
+          return prev;
+        });
+
+        setTotalItems((prev: number) => prev + 1);
+      }
+    } else if (operation === "update") {
+      // Handle log updates with debouncing for streaming
+
+      // Check if the log exists in our current list
+      const logExists = logs.some((existingLog) => existingLog.id === log.id);
+
+      if (!logExists) {
+        // Fallback: if log doesn't exist, treat as create (e.g., user was on different page when created)
+        if (pagination.offset === 0 && pagination.sort_by === "timestamp" && pagination.order === "desc") {
+          // Check if the log matches current filters
+          if (matchesFilters(log, filters, !liveEnabled)) {
+            setLogs((prevLogs: LogEntry[]) => {
+              // Double-check it doesn't exist (race condition protection)
+              if (prevLogs.some((existingLog) => existingLog.id === log.id)) {
+                return prevLogs.map((existingLog) => (existingLog.id === log.id ? log : existingLog));
+              }
+
+              // Add as new log
+              const updatedLogs = [log, ...prevLogs];
+              if (updatedLogs.length > pagination.limit) {
+                updatedLogs.pop();
+              }
+              return updatedLogs;
+            });
+          }
+        }
+      } else {
+        // Normal update flow for existing logs
+        if (log.stream) {
+          // For streaming logs, debounce updates to avoid UI thrashing
+          const existingTimeout = streamingUpdateTimeouts.current.get(log.id);
+          if (existingTimeout) {
+            clearTimeout(existingTimeout);
+          }
+
+          const timeout = setTimeout(() => {
+            updateExistingLog(log);
+            streamingUpdateTimeouts.current.delete(log.id);
+          }, 100); // 100ms debounce for streaming updates
+
+          streamingUpdateTimeouts.current.set(log.id, timeout);
+        } else {
+          // For non-streaming updates, update immediately
+          updateExistingLog(log);
+        }
+
+        // Update stats for completed requests
+        if (log.status == "success" || log.status == "error") {
+          setStats((prevStats) => {
+            if (!prevStats) return prevStats;
+
+            const newStats = { ...prevStats };
+            newStats.total_requests += 1;
+
+            // Update success rate
+            const successCount = (prevStats.success_rate / 100) * prevStats.total_requests;
+            const newSuccessCount = log.status === "success" ? successCount + 1 : successCount;
+            newStats.success_rate = (newSuccessCount / newStats.total_requests) * 100;
+
+            // Update user-facing success rate (same approximation as success_rate)
+            const userSuccessCount = ((prevStats.user_facing_success_rate ?? 0) / 100) * prevStats.total_requests;
+            const newUserSuccessCount = log.status === "success" ? userSuccessCount + 1 : userSuccessCount;
+            newStats.user_facing_success_rate = (newUserSuccessCount / newStats.total_requests) * 100;
+
+            // Update average latency
+            if (log.latency) {
+              const totalLatency = prevStats.average_latency * prevStats.total_requests;
+              newStats.average_latency = (totalLatency + log.latency) / newStats.total_requests;
+            }
+
+            // Update total tokens
+            if (log.token_usage) {
+              newStats.total_tokens += log.token_usage.total_tokens;
+            }
+
+            // Update total cost
+            if (log.cost) {
+              newStats.total_cost += log.cost;
+            }
+
+            return newStats;
+          });
+
+          // Update histogram for completed requests
+          setHistogram((prevHistogram) => {
+            if (!prevHistogram || typeof prevHistogram.bucket_size_seconds !== "number" || prevHistogram.bucket_size_seconds <= 0) {
+              return prevHistogram;
+            }
+
+            const logTime = new Date(log.timestamp).getTime();
+            const bucketSizeMs = prevHistogram.bucket_size_seconds * 1000;
+            const bucketTime = Math.floor(logTime / bucketSizeMs) * bucketSizeMs;
+
+            const updatedBuckets = [...prevHistogram.buckets];
+            const bucketIndex = updatedBuckets.findIndex((b) => {
+              const bTime = new Date(b.timestamp).getTime();
+              return Math.floor(bTime / bucketSizeMs) * bucketSizeMs === bucketTime;
+            });
+
+            if (bucketIndex >= 0) {
+              // Update existing bucket
+              updatedBuckets[bucketIndex] = {
+                ...updatedBuckets[bucketIndex],
+                count: updatedBuckets[bucketIndex].count + 1,
+                success: updatedBuckets[bucketIndex].success + (log.status === "success" ? 1 : 0),
+                error: updatedBuckets[bucketIndex].error + (log.status === "error" ? 1 : 0),
+              };
+            } else {
+              // Create new bucket for this timestamp
+              const newBucket = {
+                timestamp: new Date(bucketTime).toISOString(),
+                count: 1,
+                success: log.status === "success" ? 1 : 0,
+                error: log.status === "error" ? 1 : 0,
+              };
+              // Insert in sorted order
+              const insertIndex = updatedBuckets.findIndex((b) => new Date(b.timestamp).getTime() > bucketTime);
+              if (insertIndex === -1) {
+                updatedBuckets.push(newBucket);
+              } else {
+                updatedBuckets.splice(insertIndex, 0, newBucket);
+              }
+            }
+
+            return { ...prevHistogram, buckets: updatedBuckets };
+          });
+        }
+      }
+    }
+  }, []);
+
+  const updateExistingLog = useCallback((updatedLog: LogEntry) => {
+    setLogs((prevLogs: LogEntry[]) => {
+      return prevLogs.map((existingLog) => (existingLog.id === updatedLog.id ? updatedLog : existingLog));
+    });
+
+    // Update fetchedLog if it matches the updated log (for real-time detail sheet updates when log is not on current page)
+    setFetchedLog((prev) => {
+      if (prev && prev.id === updatedLog.id) {
+        return updatedLog;
+      }
+      return prev;
+    });
+  }, []);
+
+  const { isConnected: isSocketConnected, subscribe } = useWebSocket();
+
+  // Subscribe to log messages - only when live updates are enabled
+  useEffect(() => {
+    if (!liveEnabled) {
+      return;
+    }
+
+    const unsubscribe = subscribe("log", (data) => {
+      const { payload, operation } = data;
+      handleLogMessage(payload, operation);
+    });
+
+    return unsubscribe;
+  }, [handleLogMessage, subscribe, liveEnabled]);
+
+  // Cleanup timeouts on unmount
+  useEffect(() => {
+    return () => {
+      streamingUpdateTimeouts.current.forEach((timeout) => clearTimeout(timeout));
+      streamingUpdateTimeouts.current.clear();
+    };
+  }, []);
+
+  const fetchLogs = useCallback(async () => {
+    setFetchingLogs(true);
+    setError(null);
+
+    try {
+      const result = await triggerGetLogs({ filters, pagination });
+
+      if (result.error) {
+        const errorMessage = getErrorMessage(result.error);
+        setError(errorMessage);
+        setLogs([]);
+        setTotalItems(0);
+      } else if (result.data) {
+        setLogs(result.data.logs || []);
+        setTotalItems(result.data.stats.total_requests);
+      }
+
+      // Only set showEmptyState on initial load and only based on total logs
+      if (initialLoading) {
+        // Check if there are any logs globally, not just in the current filter
+        setShowEmptyState(result.data ? !result.data.has_logs : true);
+      }
+    } catch {
+      setError("Cannot fetch logs. Please check if logs are enabled in your Bifrost config.");
+      setLogs([]);
+      setTotalItems(0);
+      setShowEmptyState(true);
+    } finally {
+      setFetchingLogs(false);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters, pagination]);
+
+  const fetchStats = useCallback(async () => {
+    setFetchingStats(true);
+    try {
+      const result = await triggerGetStats({ filters });
+
+      if (result.error) {
+        // Don't show error for stats failure, just log it
+        console.error("Failed to fetch stats:", result.error);
+      } else if (result.data) {
+        setStats(result.data);
+      }
+    } catch (error) {
+      console.error("Failed to fetch stats:", error);
+    } finally {
+      setFetchingStats(false);
+    }
+  }, [filters, triggerGetStats]);
+
+  const fetchHistogram = useCallback(async () => {
+    setFetchingHistogram(true);
+
+    try {
+      const result = await triggerGetHistogram({ filters });
+
+      if (result.error) {
+        // Don't show error for histogram failure, just log it
+        console.error("Failed to fetch histogram:", result.error);
+      } else if (result.data) {
+        setHistogram(result.data);
+      }
+    } catch (error) {
+      console.error("Failed to fetch histogram:", error);
+    } finally {
+      setFetchingHistogram(false);
+    }
+  }, [filters, triggerGetHistogram]);
+
+  // Helper to toggle live updates
+  const handleLiveToggle = useCallback(
+    (enabled: boolean) => {
+      setUrlState({ live_enabled: enabled });
+      // When re-enabling, refetch logs to get latest data
+      if (enabled) {
+        fetchLogs();
+      }
+    },
+    [setUrlState, fetchLogs],
+  );
+
+  // Fetch logs when filters or pagination change
+  useEffect(() => {
+    if (!initialLoading) {
+      fetchLogs();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters, pagination, initialLoading]);
+
+  // Fetch stats and histogram when filters change (but not pagination)
+  useEffect(() => {
+    if (!initialLoading) {
+      fetchStats();
+      fetchHistogram();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters, initialLoading]);
+
+  // Initial load
+  useEffect(() => {
+    const initialLoad = async () => {
+      // Load logs and stats in parallel, don't wait for stats to show the page
+      await fetchLogs();
+      fetchStats(); // Don't await - let it load in background
+      fetchHistogram(); // Don't await - let it load in background
+      setInitialLoading(false);
+    };
+    initialLoad();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getMessageText = (content: ChatMessageContent): string => {
+    if (typeof content === "string") {
+      return content;
+    }
+    if (Array.isArray(content)) {
+      return content.reduce((acc: string, block: ContentBlock) => {
+        if (block.type === "text" && block.text) {
+          return acc + block.text;
+        }
+        return acc;
+      }, "");
+    }
+    return "";
+  };
+
+  // Helper function to check if a log matches the current filters
+  const matchesFilters = (log: LogEntry, filters: LogFilters, applyTimeFilters = true): boolean => {
+    if (filters.user_ids?.length) {
+      if (!log.user_id || !filters.user_ids.includes(log.user_id)) return false;
+    }
+    if (filters.team_ids?.length) {
+      if (!log.team_id || !filters.team_ids.includes(log.team_id)) return false;
+    }
+    if (filters.customer_ids?.length) {
+      if (!log.customer_id || !filters.customer_ids.includes(log.customer_id)) return false;
+    }
+    if (filters.business_unit_ids?.length) {
+      if (!log.business_unit_id || !filters.business_unit_ids.includes(log.business_unit_id)) return false;
+    }
+    if (filters.missing_cost_only && typeof log.cost === "number" && log.cost > 0) {
+      return false;
+    }
+    if (filters.parent_request_id && log.parent_request_id !== filters.parent_request_id) {
+      return false;
+    }
+    if (filters.providers?.length && !filters.providers.includes(log.provider)) {
+      return false;
+    }
+    if (filters.aliases?.length && !filters.aliases.includes(log.alias ?? "")) {
+      return false;
+    }
+    if (filters.models?.length && !filters.models.includes(log.model)) {
+      return false;
+    }
+    if (filters.status?.length && !filters.status.includes(log.status)) {
+      return false;
+    }
+    if (filters.objects?.length && !filters.objects.includes(log.object)) {
+      return false;
+    }
+    if (filters.selected_key_ids?.length && log.selected_key_id && !filters.selected_key_ids.includes(log.selected_key_id)) {
+      return false;
+    }
+    if (filters.virtual_key_ids?.length) {
+      if (!log.virtual_key_id || !filters.virtual_key_ids.includes(log.virtual_key_id)) {
+        return false;
+      }
+    }
+    if (filters.routing_rule_ids?.length) {
+      if (!log.routing_rule_id || !filters.routing_rule_ids.includes(log.routing_rule_id)) {
+        return false;
+      }
+    }
+    if (filters.routing_engine_used?.length) {
+      if (!log.routing_engines_used || !log.routing_engines_used.some((engine) => filters.routing_engine_used!.includes(engine))) {
+        return false;
+      }
+    }
+    if (filters.start_time && new Date(log.timestamp) < new Date(filters.start_time)) {
+      return false;
+    }
+    if (applyTimeFilters && filters.end_time && new Date(log.timestamp) > new Date(filters.end_time)) {
+      return false;
+    }
+    if (filters.min_latency && (!log.latency || log.latency < filters.min_latency)) {
+      return false;
+    }
+    if (filters.max_latency && (!log.latency || log.latency > filters.max_latency)) {
+      return false;
+    }
+    if (filters.min_tokens && (!log.token_usage || log.token_usage.total_tokens < filters.min_tokens)) {
+      return false;
+    }
+    if (filters.max_tokens && (!log.token_usage || log.token_usage.total_tokens > filters.max_tokens)) {
+      return false;
+    }
+    if (filters.metadata_filters) {
+      for (const [key, value] of Object.entries(filters.metadata_filters)) {
+        const metadataValue = log.metadata?.[key];
+        if (metadataValue === undefined || String(metadataValue) !== value) {
+          return false;
+        }
+      }
+    }
+    if (filters.content_search) {
+      const search = filters.content_search.toLowerCase();
+      const content = [
+        ...(log.input_history || []).map((msg: ChatMessage) => getMessageText(msg.content)),
+        log.output_message ? getMessageText(log.output_message.content) : "",
+      ]
+        .join(" ")
+        .toLowerCase();
+
+      if (!content.includes(search)) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  const statCards = useMemo(
+    () => [
+      {
+        title: "Total Requests",
+        value: <NumberFlow value={stats?.total_requests ?? 0} format={COMPACT_NUMBER_FORMAT} />,
+        icon: <BarChart className="size-4" />,
+      },
+      {
+        title: "Success Rate",
+        value: <NumberFlow value={stats?.success_rate ?? 0} format={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }} suffix="%" />,
+        icon: <CheckCircle className="size-4" />,
+        description:
+          "Success rate as perceived by the system. Each fallback counts as a separate attempt. Retries on the same request are counted as one attempt.",
+      },
+      {
+        title: "User Success Rate",
+        value: <NumberFlow value={stats?.user_facing_success_rate ?? 0} format={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }} suffix="%" />,
+        icon: <CheckCircle className="size-4" />,
+        description: "Success rate as perceived by the end user. It includes fallback chains as one request.",
+      },
+      {
+        title: "Avg Latency",
+        value: (
+          <NumberFlow value={stats?.average_latency ?? 0} format={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }} suffix="ms" />
+        ),
+        icon: <Clock className="size-4" />,
+      },
+      {
+        title: "Total Tokens",
+        value: <NumberFlow value={stats?.total_tokens ?? 0} format={COMPACT_NUMBER_FORMAT} />,
+        icon: <Hash className="size-4" />,
+      },
+      {
+        title: "Total Cost",
+        value: (
+          <NumberFlow
+            value={stats?.total_cost ?? 0}
+            format={{
+              ...COMPACT_NUMBER_FORMAT,
+              style: "currency",
+              currency: "USD",
+            }}
+          />
+        ),
+        icon: <DollarSign className="size-4" />,
+      },
+    ],
+    [stats],
+  );
+
+  const { data: filterData } = useGetAvailableFilterDataQuery();
+
+  // Get metadata keys from filterdata API so columns always show even with no data on current page
+  const metadataKeys = useMemo(() => {
+    if (!filterData?.metadata_keys) return [];
+    return Object.keys(filterData.metadata_keys).sort();
+  }, [filterData?.metadata_keys]);
+
+  const columns = useMemo(() => createColumns(handleDelete, hasDeleteAccess, metadataKeys), [handleDelete, hasDeleteAccess, metadataKeys]);
+
+  const columnIds = useMemo(
+    () => columns.map((col) => ("id" in col && col.id ? col.id : "accessorKey" in col ? String(col.accessorKey) : "")).filter(Boolean),
+    [columns],
+  );
+
+  const COLUMN_LABELS: Record<string, string> = useMemo(
+    () => ({
+      timestamp: "Time",
+      request_type: "Type",
+      input: "Message",
+      provider: "Provider",
+      model: "Model",
+      latency: "Latency",
+      tokens: "Tokens",
+      cost: "Cost",
+    }),
+    [],
+  );
+
+  const {
+    entries: columnEntries,
+    columnOrder,
+    columnVisibility,
+    columnPinning,
+    toggleVisibility: toggleColumnVisibility,
+    togglePin: toggleColumnPin,
+    reorder: reorderColumns,
+    reset: resetColumns,
+  } = useColumnConfig({ columnIds, paramName: "cols" });
+
+  // Navigation for log detail sheet
+  const selectedLogIndex = useMemo(() => (selectedLogId ? logs.findIndex((l) => l.id === selectedLogId) : -1), [selectedLogId, logs]);
+
+  const handleLogNavigate = useCallback(
+    (direction: "prev" | "next") => {
+      const currentLogId = selectedLogId || "";
+      if (direction === "prev") {
+        if (selectedLogIndex > 0) {
+          // Navigate to previous log on current page
+          setUrlState({ selected_log: logs[selectedLogIndex - 1].id });
+        } else if (pagination.offset > 0) {
+          // Go to previous page and select the last item
+          const newOffset = Math.max(0, pagination.offset - pagination.limit);
+          setUrlState({ offset: newOffset, selected_log: "" });
+          // Fetch previous page, then select last log
+          triggerGetLogs({
+            filters,
+            pagination: { ...pagination, offset: newOffset },
+          }).then((result) => {
+            if (result.data?.logs?.length) {
+              const lastLog = result.data.logs[result.data.logs.length - 1];
+              setUrlState({ selected_log: lastLog.id });
+            } else if (result.error) {
+              setUrlState({
+                offset: pagination.offset,
+                selected_log: currentLogId,
+              });
+              setError(getErrorMessage(result.error));
+            }
+          });
+        }
+      } else {
+        if (selectedLogIndex >= 0 && selectedLogIndex < logs.length - 1) {
+          // Navigate to next log on current page
+          setUrlState({ selected_log: logs[selectedLogIndex + 1].id });
+        } else if (pagination.offset + pagination.limit < totalItems) {
+          // Go to next page and select the first item
+          const newOffset = pagination.offset + pagination.limit;
+          setUrlState({ offset: newOffset, selected_log: "" });
+          // Fetch next page, then select first log
+          triggerGetLogs({
+            filters,
+            pagination: { ...pagination, offset: newOffset },
+          }).then((result) => {
+            if (result.data?.logs?.length) {
+              const firstLog = result.data.logs[0];
+              setUrlState({ selected_log: firstLog.id });
+            } else if (result.error) {
+              setUrlState({
+                offset: pagination.offset,
+                selected_log: currentLogId,
+              });
+              setError(getErrorMessage(result.error));
+            }
+          });
+        }
+      }
+    },
+    [selectedLogId, selectedLogIndex, logs, pagination, totalItems, filters, setUrlState, triggerGetLogs],
+  );
+
+  return (
+    <div className="dark:bg-card no-padding-parent no-border-parent h-[calc(100vh_-_16px)]">
+      {initialLoading ? (
+        <FullPageLoader />
+      ) : showEmptyState ? (
+        <EmptyState isSocketConnected={isSocketConnected} error={error} />
+      ) : (
+        <div className="bg-background flex h-full w-full grow gap-3">
+          {/* Sidebar Filters */}
+          <LogsFilterSidebar filters={filters} onFiltersChange={setFilters} />
+
+          {/* Main Content */}
+          <div className="bg-card flex min-w-0 flex-1 flex-col gap-2 overflow-hidden rounded-l-md p-4 pb-2">
+            <div className="shrink-0">
+              <LogsHeaderView
+                filters={filters}
+                onFiltersChange={setFilters}
+                liveEnabled={liveEnabled}
+                onLiveToggle={handleLiveToggle}
+                fetchLogs={fetchLogs}
+                fetchStats={fetchStats}
+                columnEntries={columnEntries}
+                columnLabels={COLUMN_LABELS}
+                onToggleColumnVisibility={toggleColumnVisibility}
+                onResetColumns={resetColumns}
+              />
+            </div>
+            <div className="grid shrink-0 grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
+              {statCards.map((card) => (
+                <Card key={card.title} className="py-4 shadow-none">
+                  <CardContent
+                    className={`flex items-center justify-between px-4 transition-opacity duration-200 ${fetchingStats ? "opacity-50" : "opacity-100"}`}
+                  >
+                    <div className="w-full min-w-0">
+                      <div className="text-muted-foreground flex items-center gap-1 text-xs">
+                        <span className="truncate">{card.title}</span>
+                        {"description" in card && card.description && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <button
+                                type="button"
+                                aria-label={`${card.title} info`}
+                                data-testid={`logs-metric-info-${card.title.toLowerCase().replace(/\s+/g, "-")}`}
+                                className="inline-flex items-center"
+                              >
+                                <Info className="size-3 cursor-help" />
+                              </button>
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-72 text-left text-xs text-wrap">{card.description}</TooltipContent>
+                          </Tooltip>
+                        )}
+                      </div>
+                      <div className="truncate font-mono text-xl font-medium sm:text-2xl">{card.value}</div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+
+            <div className="shrink-0">
+              <LogsVolumeChart
+                data={histogram}
+                loading={fetchingHistogram}
+                onTimeRangeChange={handleTimeRangeChange}
+                onResetZoom={handleResetZoom}
+                isZoomed={isZoomed}
+                startTime={urlState.start_time}
+                endTime={urlState.end_time}
+                isOpen={isChartOpen}
+                onOpenChange={setIsChartOpen}
+              />
+            </div>
+
+            {error && (
+              <Alert variant="destructive" className="shrink-0">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <div className="min-h-0 flex-1">
+              <LogsDataTable
+                columns={columns}
+                data={logs}
+                totalItems={totalItems}
+                loading={fetchingLogs}
+                pagination={pagination}
+                onPaginationChange={setPagination}
+                onRowClick={(row, columnId) => {
+                  if (columnId === "actions") return;
+                  setUrlState({ selected_log: row.id }, { history: "replace" });
+                  setSelectedSessionId(null);
+                  setSessionHighlightedLogId(null);
+                }}
+                liveEnabled={liveEnabled}
+                isSocketConnected={isSocketConnected}
+                columnEntries={columnEntries}
+                columnOrder={columnOrder}
+                columnVisibility={columnVisibility}
+                columnPinning={columnPinning}
+                onToggleColumnVisibility={toggleColumnVisibility}
+                onTogglePin={toggleColumnPin}
+                onReorderColumns={reorderColumns}
+              />
+            </div>
+          </div>
+
+          {/* Log Detail Sheet */}
+          <LogDetailSheet
+            log={selectedLog}
+            open={selectedLog !== null}
+            onOpenChange={(open) => !open && setUrlState({ selected_log: "" })}
+            handleDelete={handleDelete}
+            onNavigate={handleLogNavigate}
+            hasPrev={selectedLogIndex > 0 || (selectedLogIndex !== -1 && pagination.offset > 0)}
+            hasNext={selectedLogIndex !== -1 && (selectedLogIndex < logs.length - 1 || pagination.offset + pagination.limit < totalItems)}
+            onFilterByParentRequestId={handleFilterByParentRequestId}
+            onViewSession={(sessionId, logId) => {
+              setUrlState({ selected_log: "" }, { history: "replace" });
+              setSessionHighlightedLogId(logId);
+              setSelectedSessionId(sessionId);
+            }}
+          />
+          <SessionDetailsSheet
+            sessionId={selectedSessionId}
+            highlightedLogId={sessionHighlightedLogId}
+            open={selectedSessionId !== null}
+            onOpenChange={handleSessionSheetOpenChange}
+            liveEnabled={liveEnabled}
+            onLogClick={(log) => {
+              setSelectedSessionId(null);
+              setUrlState({ selected_log: log.id }, { history: "replace" });
+            }}
+            onFilterByParentRequestId={handleFilterByParentRequestId}
+          />
+        </div>
+      )}
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/ui/app/workspace/mcp-registry/views/mcpClientSheet.tsx b/ui/app/workspace/mcp-registry/views/mcpClientSheet.tsx
index 39a1618bb0..548138f886 100644
--- a/ui/app/workspace/mcp-registry/views/mcpClientSheet.tsx
+++ b/ui/app/workspace/mcp-registry/views/mcpClientSheet.tsx
@@ -7,7 +7,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { HeadersTable } from "@/components/ui/headersTable";
 import { Input } from "@/components/ui/input";
 import { MultiSelect } from "@/components/ui/multiSelect";
-import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { Switch } from "@/components/ui/switch";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
@@ -50,7 +50,7 @@ export default function MCPClientSheet({ mcpClient, onClose, onSubmitSuccess }:
 
 	// VK access management — search-based dropdown (limit 20), no pagination issue
 	const [vkSearch, setVKSearch] = useState("");
-	const [vkSelectValue, setVKSelectValue] = useState("");
+	const [vkPopoverOpen, setVKPopoverOpen] = useState(false);
 	const debouncedVkSearch = useDebouncedValue(vkSearch, 300);
 	const { data: vksData } = useGetVirtualKeysQuery({ limit: 20, search: debouncedVkSearch || undefined });
 	const allToolNames = useMemo(() => mcpClient.tools?.map((t) => t.name) ?? [], [mcpClient.tools]);
@@ -848,44 +848,63 @@ export default function MCPClientSheet({ mcpClient, onClose, onSubmitSuccess }:
 														</Tooltip>
 													</TooltipProvider>
 												</div>
-												{vkOptions.length > 0 && (
-													<Select
-														value={vkSelectValue}
-														onValueChange={(v) => {
-															addVKConfig(v);
-															setVKSearch("");
-															setVKSelectValue("");
-														}}
-													>
-														<SelectTrigger
-															className="h-7.5 w-auto gap-1.5 px-2 py-1 text-sm font-medium"
+												<Popover
+													open={vkPopoverOpen}
+													onOpenChange={(open) => {
+														setVKPopoverOpen(open);
+														if (!open) setVKSearch("");
+													}}
+												>
+													<PopoverTrigger asChild>
+														<Button
+															type="button"
+															variant="outline"
+															size="sm"
+															className="h-7.5 gap-1.5 px-2 py-1 text-sm font-medium"
 															data-testid="mcpclient-virtualkey-add-trigger"
 														>
 															<Plus className="h-4 w-4" />
 															Add Virtual Key
-														</SelectTrigger>
-														<SelectContent>
-															<div className="px-2 pb-1">
-																<Input
-																	placeholder="Search virtual keys..."
-																	value={vkSearch}
-																	onChange={(e) => setVKSearch(e.target.value)}
-																	onKeyDown={(e) => e.stopPropagation()}
-																	className="h-7 text-sm"
-																/>
-															</div>
+														</Button>
+													</PopoverTrigger>
+													<PopoverContent side="top" align="end" className="w-56 p-0">
+														<div className="pb-1">
+															<Input
+																data-testid="mcpclient-virtualkey-search-input"
+																placeholder="Search virtual keys..."
+																value={vkSearch}
+																onChange={(e) => setVKSearch(e.target.value)}
+																onKeyDown={(e) => {
+																	e.stopPropagation();
+																	if (e.key === "Enter") e.preventDefault();
+																}}
+																className="h-7 rounded-b-none border-0 border-b text-sm focus-visible:ring-0"
+																autoFocus
+															/>
+														</div>
+														<div className="max-h-48 overflow-y-auto p-1">
 															{vkOptions.length > 0 ? (
 																vkOptions.map((opt) => (
-																	<SelectItem key={opt.value} value={opt.value}>
+																	<button
+																		data-testid={`mcpclient-virtualkey-option-${opt.value}`}
+																		key={opt.value}
+																		type="button"
+																		className="hover:bg-accent hover:text-accent-foreground w-full cursor-pointer rounded-sm px-2 py-1.5 text-left text-sm"
+																		onClick={() => {
+																			addVKConfig(opt.value);
+																			setVKSearch("");
+																			setVKPopoverOpen(false);
+																		}}
+																	>
 																		{opt.label}
-																	</SelectItem>
+																	</button>
 																))
 															) : (
 																<div className="text-muted-foreground px-2 py-1.5 text-sm">No virtual keys found</div>
 															)}
-														</SelectContent>
-													</Select>
-												)}
+														</div>
+													</PopoverContent>
+												</Popover>
 											</div>
 											{form.watch("allow_on_all_virtual_keys") && (
 												<p className="text-muted-foreground flex items-center gap-1 text-xs">
diff --git a/ui/app/workspace/mcp-registry/views/mcpClientsTable.tsx b/ui/app/workspace/mcp-registry/views/mcpClientsTable.tsx
index 72a470aafb..95658013c9 100644
--- a/ui/app/workspace/mcp-registry/views/mcpClientsTable.tsx
+++ b/ui/app/workspace/mcp-registry/views/mcpClientsTable.tsx
@@ -12,7 +12,6 @@ import {
 } from "@/components/ui/alertDialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { useToast } from "@/hooks/use-toast";
@@ -161,15 +160,16 @@ export default function MCPClientsTable({
 				<MCPClientSheet mcpClient={selectedMCPClient} onClose={handleDetailSheetClose} onSubmitSuccess={handleEditTools} />
 			)}
 
-			<CardHeader className="mb-4 px-0">
-				<CardTitle className="flex items-center justify-between">
-					<h1 className="text-foreground text-lg font-semibold">MCP server catalog</h1>
-					<Button onClick={handleCreate} disabled={!hasCreateMCPClientAccess} data-testid="create-mcp-client-btn">
-						<Plus className="h-4 w-4" /> New MCP Server
-					</Button>
-				</CardTitle>
-				<CardDescription>Manage servers that can connect to the MCP Tools endpoint.</CardDescription>
-			</CardHeader>
+			<div className="flex items-center justify-between gap-4">
+				<div>
+					<h2 className="text-lg font-semibold tracking-tight">MCP Server Catalog</h2>
+					<p className="text-muted-foreground text-sm">Manage servers that can connect to the MCP Tools endpoint.</p>
+				</div>
+				<Button onClick={handleCreate} disabled={!hasCreateMCPClientAccess} data-testid="create-mcp-client-btn" aria-label="New MCP Server" className="gap-2">
+					<Plus className="h-4 w-4" />
+					<span className="hidden sm:inline">New MCP Server</span>
+				</Button>
+			</div>
 
 			{/* Toolbar: Search */}
 			<div className="flex items-center gap-3">
diff --git a/ui/app/workspace/mcp-tool-groups/page.tsx b/ui/app/workspace/mcp-tool-groups/page.tsx
index 8ac95a52e8..709bf7d5f3 100644
--- a/ui/app/workspace/mcp-tool-groups/page.tsx
+++ b/ui/app/workspace/mcp-tool-groups/page.tsx
@@ -3,9 +3,7 @@ import MCPToolGroups from "@enterprise/components/mcp-tool-groups/mcpToolGroups"
 export default function MCPToolGroupsPage() {
 	return (
 		<div className="mx-auto w-full max-w-7xl">
-			<div className="space-y-4">
-				<MCPToolGroups />
-			</div>
+			<MCPToolGroups />
 		</div>
 	);
 }
\ No newline at end of file
diff --git a/ui/app/workspace/providers/dialogs/addNewCustomProviderSheet.tsx b/ui/app/workspace/providers/dialogs/addNewCustomProviderSheet.tsx
index 932addf125..7cc8b92918 100644
--- a/ui/app/workspace/providers/dialogs/addNewCustomProviderSheet.tsx
+++ b/ui/app/workspace/providers/dialogs/addNewCustomProviderSheet.tsx
@@ -62,6 +62,8 @@ export function AddCustomProviderSheetContent({ show = true, onClose, onSave }:
 				image_edit_stream: true,
 				image_variation: true,
 				rerank: true,
+				ocr: true,
+				ocr_stream: true,
 				video_generation: true,
 				video_retrieve: true,
 				video_download: true,
diff --git a/ui/app/workspace/providers/fragments/apiStructureFormFragment.tsx b/ui/app/workspace/providers/fragments/apiStructureFormFragment.tsx
index 037e39f611..715077ad80 100644
--- a/ui/app/workspace/providers/fragments/apiStructureFormFragment.tsx
+++ b/ui/app/workspace/providers/fragments/apiStructureFormFragment.tsx
@@ -50,6 +50,8 @@ export function ApiStructureFormFragment({ provider }: Props) {
 				transcription_stream: provider.custom_provider_config?.allowed_requests?.transcription_stream ?? true,
 				count_tokens: provider.custom_provider_config?.allowed_requests?.count_tokens ?? true,
 				list_models: provider.custom_provider_config?.allowed_requests?.list_models ?? true,
+				ocr: provider.custom_provider_config?.allowed_requests?.ocr ?? true,
+				ocr_stream: provider.custom_provider_config?.allowed_requests?.ocr_stream ?? true,
 			},
 			request_path_overrides: provider.custom_provider_config?.request_path_overrides ?? undefined,
 		},
diff --git a/ui/lib/constants/logs.ts b/ui/lib/constants/logs.ts
index 06f248f125..a6553d4e12 100644
--- a/ui/lib/constants/logs.ts
+++ b/ui/lib/constants/logs.ts
@@ -51,6 +51,8 @@ export const RequestTypes = [
 	"image_edit",
 	"image_edit_stream",
 	"image_variation",
+	"ocr",
+	"ocr_stream",
 	"video_generation",
 	"video_retrieve",
 	"video_download",
@@ -164,6 +166,8 @@ export const RequestTypeLabels = {
 	image_edit: "Image Edit",
 	image_edit_stream: "Image Edit Stream",
 	image_variation: "Image Variation",
+	ocr: "OCR",
+	ocr_stream: "OCR Stream",
 	video_generation: "Video Generation",
 	video_retrieve: "Video Retrieve",
 	video_download: "Video Download",
@@ -244,6 +248,8 @@ export const RequestTypeColors = {
 	image_edit: "bg-emerald-100 text-emerald-800",
 	image_edit_stream: "bg-teal-100 text-teal-800",
 	image_variation: "bg-violet-100 text-violet-800",
+	ocr: "bg-amber-100 text-amber-800",
+	ocr_stream: "bg-yellow-100 text-yellow-800",
 	video_generation: "bg-fuchsia-100 text-fuchsia-800",
 	video_retrieve: "bg-blue-100 text-blue-800",
 	video_download: "bg-purple-100 text-purple-800",
diff --git a/ui/lib/types/config.ts b/ui/lib/types/config.ts
index a6c641bbf5..735cc24c94 100644
--- a/ui/lib/types/config.ts
+++ b/ui/lib/types/config.ts
@@ -219,6 +219,8 @@ export type RequestType =
 	| "image_edit"
 	| "image_edit_stream"
 	| "image_variation"
+	| "ocr"
+	| "ocr_stream"
 	| "video_generation"
 	| "video_retrieve"
 	| "video_download"
@@ -267,6 +269,8 @@ export interface AllowedRequests {
 	image_edit: boolean;
 	image_edit_stream: boolean;
 	image_variation: boolean;
+	ocr: boolean;
+	ocr_stream: boolean;
 	count_tokens: boolean;
 	list_models: boolean;
 	rerank: boolean;
diff --git a/ui/lib/types/schemas.ts b/ui/lib/types/schemas.ts
index 2ecf332a97..bd6a56ecf0 100644
--- a/ui/lib/types/schemas.ts
+++ b/ui/lib/types/schemas.ts
@@ -487,6 +487,8 @@ export const allowedRequestsSchema = z.object({
 	image_edit: z.boolean(),
 	image_edit_stream: z.boolean(),
 	image_variation: z.boolean(),
+	ocr: z.boolean(),
+	ocr_stream: z.boolean(),
 	rerank: z.boolean(),
 	video_generation: z.boolean(),
 	video_retrieve: z.boolean(),

From bbec714add3aa00231d1e8aafe5c132683a81eeb Mon Sep 17 00:00:00 2001
From: Pratham-Mishra04 <pratham@getmaxim.ai>
Date: Mon, 20 Apr 2026 17:59:21 +0530
Subject: [PATCH 2/2] fix: ocr logging fixes

---
 framework/logstore/migrations.go              |   36 +
 framework/logstore/payload.go                 |   20 +
 framework/logstore/tables.go                  |   16 +
 plugins/logging/main.go                       |    2 +
 plugins/logging/operations.go                 |    1 +
 plugins/logging/utils.go                      |   23 -
 plugins/logging/writer.go                     |    2 +
 .../workspace/logs/sheets/logDetailView.tsx   |    4 +
 ui/app/workspace/logs/views/ocrView.tsx       |  167 ++
 ui/lib/types/logs.ts                          | 1553 +++++++++--------
 10 files changed, 1049 insertions(+), 775 deletions(-)
 create mode 100644 ui/app/workspace/logs/views/ocrView.tsx

diff --git a/framework/logstore/migrations.go b/framework/logstore/migrations.go
index 9993e2f9df..957d8a1a14 100644
--- a/framework/logstore/migrations.go
+++ b/framework/logstore/migrations.go
@@ -239,6 +239,9 @@ func triggerMigrations(ctx context.Context, db *gorm.DB) error {
 	if err := migrationAddUserNameColumn(ctx, db); err != nil {
 		return err
 	}
+	if err := migrationAddOCRInputColumn(ctx, db); err != nil {
+		return err
+	}
 	return nil
 }
 
@@ -2579,3 +2582,36 @@ func migrationAddSelectedPromptColumns(ctx context.Context, db *gorm.DB) error {
 	}
 	return nil
 }
+
+// migrationAddOCRInputColumn adds the ocr_input column to the logs table.
+func migrationAddOCRInputColumn(ctx context.Context, db *gorm.DB) error {
+	opts := *migrator.DefaultOptions
+	opts.UseTransaction = true
+	m := migrator.New(db, &opts, []*migrator.Migration{{
+		ID: "logs_add_ocr_input_column",
+		Migrate: func(tx *gorm.DB) error {
+			tx = tx.WithContext(ctx)
+			mig := tx.Migrator()
+			if !mig.HasColumn(&Log{}, "ocr_input") {
+				if err := mig.AddColumn(&Log{}, "ocr_input"); err != nil {
+					return err
+				}
+			}
+			return nil
+		},
+		Rollback: func(tx *gorm.DB) error {
+			tx = tx.WithContext(ctx)
+			mig := tx.Migrator()
+			if mig.HasColumn(&Log{}, "ocr_input") {
+				if err := mig.DropColumn(&Log{}, "ocr_input"); err != nil {
+					return err
+				}
+			}
+			return nil
+		},
+	}})
+	if err := m.Migrate(); err != nil {
+		return fmt.Errorf("error while adding ocr_input column: %s", err.Error())
+	}
+	return nil
+}
diff --git a/framework/logstore/payload.go b/framework/logstore/payload.go
index 7d2287b6a2..2efefae494 100644
--- a/framework/logstore/payload.go
+++ b/framework/logstore/payload.go
@@ -20,6 +20,8 @@ var payloadFields = []string{
 	"responses_output",
 	"embedding_output",
 	"rerank_output",
+	"ocr_input",
+	"ocr_output",
 	"params",
 	"tools",
 	"tool_calls",
@@ -58,6 +60,8 @@ func ExtractPayload(l *Log) map[string]string {
 	m["responses_output"] = l.ResponsesOutput
 	m["embedding_output"] = l.EmbeddingOutput
 	m["rerank_output"] = l.RerankOutput
+	m["ocr_input"] = l.OCRInput
+	m["ocr_output"] = l.OCROutput
 	m["params"] = l.Params
 	m["tools"] = l.Tools
 	m["tool_calls"] = l.ToolCalls
@@ -100,6 +104,8 @@ func ClearPayload(l *Log) {
 	l.ResponsesOutput = ""
 	l.EmbeddingOutput = ""
 	l.RerankOutput = ""
+	l.OCRInput = ""
+	l.OCROutput = ""
 	l.Params = ""
 	l.Tools = ""
 	l.ToolCalls = ""
@@ -134,6 +140,8 @@ func ClearPayload(l *Log) {
 	l.ResponsesOutputParsed = nil
 	l.EmbeddingOutputParsed = nil
 	l.RerankOutputParsed = nil
+	l.OCRInputParsed = nil
+	l.OCROutputParsed = nil
 	l.ParamsParsed = nil
 	l.ToolsParsed = nil
 	l.ToolCallsParsed = nil
@@ -183,6 +191,12 @@ func MergePayloadFromJSON(l *Log, data []byte) error {
 	if v, ok := m["rerank_output"]; ok && v != "" {
 		l.RerankOutput = v
 	}
+	if v, ok := m["ocr_input"]; ok && v != "" {
+		l.OCRInput = v
+	}
+	if v, ok := m["ocr_output"]; ok && v != "" {
+		l.OCROutput = v
+	}
 	if v, ok := m["params"]; ok && v != "" {
 		l.Params = v
 	}
@@ -504,6 +518,12 @@ func clearPayloadField(l *Log, name string) {
 	case "rerank_output":
 		l.RerankOutput = ""
 		l.RerankOutputParsed = nil
+	case "ocr_input":
+		l.OCRInput = ""
+		l.OCRInputParsed = nil
+	case "ocr_output":
+		l.OCROutput = ""
+		l.OCROutputParsed = nil
 	case "params":
 		l.Params = ""
 		l.ParamsParsed = nil
diff --git a/framework/logstore/tables.go b/framework/logstore/tables.go
index 1d7446597e..b72398ed3f 100644
--- a/framework/logstore/tables.go
+++ b/framework/logstore/tables.go
@@ -144,6 +144,7 @@ type Log struct {
 	ToolCalls               string    `gorm:"type:text" json:"-"` // JSON serialized []schemas.ToolCall (For backward compatibility, tool calls are now in the content)
 	SpeechInput             string    `gorm:"type:text" json:"-"` // JSON serialized *schemas.SpeechInput
 	TranscriptionInput      string    `gorm:"type:text" json:"-"` // JSON serialized *schemas.TranscriptionInput
+	OCRInput                string    `gorm:"type:text" json:"-"` // JSON serialized *schemas.OCRDocument
 	ImageGenerationInput    string    `gorm:"type:text" json:"-"` // JSON serialized *schemas.ImageGenerationInput
 	ImageEditInput          string    `gorm:"type:text" json:"-"` // JSON serialized *schemas.ImageEditInput
 	ImageVariationInput     string    `gorm:"type:text" json:"-"` // JSON serialized *schemas.ImageVariationInput
@@ -200,6 +201,7 @@ type Log struct {
 	ErrorDetailsParsed          *schemas.BifrostError                   `gorm:"-" json:"error_details,omitempty"`
 	SpeechInputParsed           *schemas.SpeechInput                    `gorm:"-" json:"speech_input,omitempty"`
 	TranscriptionInputParsed    *schemas.TranscriptionInput             `gorm:"-" json:"transcription_input,omitempty"`
+	OCRInputParsed              *schemas.OCRDocument                    `gorm:"-" json:"ocr_input,omitempty"`
 	ImageGenerationInputParsed  *schemas.ImageGenerationInput           `gorm:"-" json:"image_generation_input,omitempty"`
 	ImageEditInputParsed        *schemas.ImageEditInput                 `gorm:"-" json:"image_edit_input,omitempty"`
 	ImageVariationInputParsed   *schemas.ImageVariationInput            `gorm:"-" json:"image_variation_input,omitempty"`
@@ -337,6 +339,14 @@ func (l *Log) SerializeFields() error {
 		}
 	}
 
+	if l.OCRInputParsed != nil {
+		if data, err := sonic.Marshal(l.OCRInputParsed); err != nil {
+			return err
+		} else {
+			l.OCRInput = string(data)
+		}
+	}
+
 	if l.ImageGenerationInputParsed != nil {
 		if data, err := sonic.Marshal(l.ImageGenerationInputParsed); err != nil {
 			return err
@@ -676,6 +686,12 @@ func (l *Log) DeserializeFields() error {
 		}
 	}
 
+	if l.OCRInput != "" {
+		if err := sonic.Unmarshal([]byte(l.OCRInput), &l.OCRInputParsed); err != nil {
+			l.OCRInputParsed = nil
+		}
+	}
+
 	if l.ImageGenerationInput != "" {
 		if err := sonic.Unmarshal([]byte(l.ImageGenerationInput), &l.ImageGenerationInputParsed); err != nil {
 			// Log error but don't fail the operation - initialize as nil
diff --git a/plugins/logging/main.go b/plugins/logging/main.go
index 19d385374a..0b7d0162a8 100644
--- a/plugins/logging/main.go
+++ b/plugins/logging/main.go
@@ -214,6 +214,7 @@ type InitialLogData struct {
 	Params                 any
 	SpeechInput            *schemas.SpeechInput
 	TranscriptionInput     *schemas.TranscriptionInput
+	OCRInput               *schemas.OCRDocument
 	ImageGenerationInput   *schemas.ImageGenerationInput
 	ImageEditInput         *schemas.ImageEditInput
 	ImageVariationInput    *schemas.ImageVariationInput
@@ -489,6 +490,7 @@ func (p *LoggerPlugin) PreLLMHook(ctx *schemas.BifrostContext, req *schemas.Bifr
 			initialData.Params = req.RerankRequest.Params
 		case schemas.OCRRequest:
 			initialData.Params = req.OCRRequest.Params
+			initialData.OCRInput = &req.OCRRequest.Document
 		case schemas.SpeechRequest, schemas.SpeechStreamRequest:
 			initialData.Params = req.SpeechRequest.Params
 			initialData.SpeechInput = req.SpeechRequest.Input
diff --git a/plugins/logging/operations.go b/plugins/logging/operations.go
index a89e5afe09..9333abc112 100644
--- a/plugins/logging/operations.go
+++ b/plugins/logging/operations.go
@@ -43,6 +43,7 @@ func (p *LoggerPlugin) insertInitialLogEntry(
 		ToolsParsed:                 data.Tools,
 		SpeechInputParsed:           data.SpeechInput,
 		TranscriptionInputParsed:    data.TranscriptionInput,
+		OCRInputParsed:              data.OCRInput,
 		ImageGenerationInputParsed:  data.ImageGenerationInput,
 		ImageEditInputParsed:        data.ImageEditInput,
 		ImageVariationInputParsed:   data.ImageVariationInput,
diff --git a/plugins/logging/utils.go b/plugins/logging/utils.go
index bc074f14b5..4d1abbbde5 100644
--- a/plugins/logging/utils.go
+++ b/plugins/logging/utils.go
@@ -545,29 +545,6 @@ func (p *LoggerPlugin) extractInputHistory(request *schemas.BifrostRequest) ([]s
 			},
 		}, []schemas.ResponsesMessage{}
 	}
-	if request.OCRRequest != nil {
-		var docRef string
-		if request.OCRRequest.Document.DocumentURL != nil {
-			docRef = *request.OCRRequest.Document.DocumentURL
-		} else if request.OCRRequest.Document.ImageURL != nil {
-			docRef = *request.OCRRequest.Document.ImageURL
-		}
-		// Strip query parameters to avoid logging sensitive tokens (e.g., pre-signed URLs)
-		if idx := strings.Index(docRef, "?"); idx != -1 {
-			docRef = docRef[:idx]
-		}
-		if docRef == "" {
-			return []schemas.ChatMessage{}, []schemas.ResponsesMessage{}
-		}
-		return []schemas.ChatMessage{
-			{
-				Role: schemas.ChatMessageRoleUser,
-				Content: &schemas.ChatMessageContent{
-					ContentStr: &docRef,
-				},
-			},
-		}, []schemas.ResponsesMessage{}
-	}
 	if request.CountTokensRequest != nil && len(request.CountTokensRequest.Input) > 0 {
 		return []schemas.ChatMessage{}, request.CountTokensRequest.Input
 	}
diff --git a/plugins/logging/writer.go b/plugins/logging/writer.go
index 93a20d2827..fe34bc4a8f 100644
--- a/plugins/logging/writer.go
+++ b/plugins/logging/writer.go
@@ -316,9 +316,11 @@ func buildCompleteLogEntryFromPending(pending *PendingLogData) *logstore.Log {
 		ToolsParsed:                 pending.InitialData.Tools,
 		SpeechInputParsed:           pending.InitialData.SpeechInput,
 		TranscriptionInputParsed:    pending.InitialData.TranscriptionInput,
+		OCRInputParsed:              pending.InitialData.OCRInput,
 		ImageGenerationInputParsed:  pending.InitialData.ImageGenerationInput,
 		ImageEditInputParsed:        pending.InitialData.ImageEditInput,
 		ImageVariationInputParsed:   pending.InitialData.ImageVariationInput,
+		VideoGenerationInputParsed:  pending.InitialData.VideoGenerationInput,
 		PassthroughRequestBody:      pending.InitialData.PassthroughRequestBody,
 	}
 	if pending.ParentRequestID != "" {
diff --git a/ui/app/workspace/logs/sheets/logDetailView.tsx b/ui/app/workspace/logs/sheets/logDetailView.tsx
index 73475dad50..38320435ed 100644
--- a/ui/app/workspace/logs/sheets/logDetailView.tsx
+++ b/ui/app/workspace/logs/sheets/logDetailView.tsx
@@ -66,6 +66,7 @@ import CollapsibleBox from "../views/collapsibleBox";
 import ImageView from "../views/imageView";
 import LogChatMessageView from "../views/logChatMessageView";
 import LogEntryDetailsView from "../views/logEntryDetailsView";
+import OCRView from "../views/ocrView";
 import PluginLogsView from "../views/pluginLogsView";
 import SpeechView from "../views/speechView";
 import TranscriptionView from "../views/transcriptionView";
@@ -1444,6 +1445,9 @@ export function LogDetailView({
         </TabsList>
 
         <TabsContent value="messages" className="space-y-4">
+          {(log.ocr_input || log.ocr_output) && (
+            <OCRView ocrInput={log.ocr_input} ocrOutput={log.ocr_output} />
+          )}
           {(log.speech_input || log.speech_output) && (
             <SpeechView
               speechInput={log.speech_input}
diff --git a/ui/app/workspace/logs/views/ocrView.tsx b/ui/app/workspace/logs/views/ocrView.tsx
new file mode 100644
index 0000000000..551b4c402b
--- /dev/null
+++ b/ui/app/workspace/logs/views/ocrView.tsx
@@ -0,0 +1,167 @@
+import { useState, useEffect } from "react";
+import { BifrostOCRResponse, OCRDocument } from "@/lib/types/logs";
+import { Button } from "@/components/ui/button";
+import { CodeEditor } from "@/components/ui/codeEditor";
+import { ChevronLeft, ChevronRight, FileText } from "lucide-react";
+
+function getImageSrc(b64: string): string {
+	if (b64.startsWith("/9j/")) return `data:image/jpeg;base64,${b64}`;
+	if (b64.startsWith("iVBOR")) return `data:image/png;base64,${b64}`;
+	if (b64.startsWith("UklGR")) return `data:image/webp;base64,${b64}`;
+	if (b64.startsWith("R0lGO")) return `data:image/gif;base64,${b64}`;
+	return `data:image/png;base64,${b64}`;
+}
+
+interface OCRViewProps {
+	ocrInput?: OCRDocument;
+	ocrOutput?: BifrostOCRResponse;
+}
+
+export default function OCRView({ ocrInput, ocrOutput }: OCRViewProps) {
+	const pages = ocrOutput?.pages ?? [];
+	const totalPages = pages.length;
+	const [currentIndex, setCurrentIndex] = useState(0);
+
+	useEffect(() => {
+		if (totalPages === 0) {
+			setCurrentIndex(0);
+		} else {
+			setCurrentIndex((prev) => Math.min(prev, totalPages - 1));
+		}
+	}, [totalPages]);
+
+	const goToPrevious = () => setCurrentIndex((prev) => (prev === 0 ? totalPages - 1 : prev - 1));
+	const goToNext = () => setCurrentIndex((prev) => (prev === totalPages - 1 ? 0 : prev + 1));
+
+	const currentPage = pages[currentIndex] ?? null;
+	const pageImages = currentPage?.images?.filter((img) => img.image_base64) ?? [];
+
+	return (
+		<div className="space-y-4">
+			{/* OCR Input */}
+			{ocrInput && (
+				<div className="w-full rounded-sm border">
+					<div className="flex items-center gap-2 border-b px-6 py-2 text-sm font-medium">
+						<FileText className="h-4 w-4" />
+						OCR Input
+					</div>
+					<div className="space-y-4 p-6">
+						<div>
+							<div className="text-muted-foreground mb-2 text-xs font-medium">TYPE</div>
+							<div className="font-mono text-xs">{ocrInput.type === "document_url" ? "Document" : "Image"}</div>
+						</div>
+						{(ocrInput.document_url || ocrInput.image_url) && (
+							<div>
+								<div className="text-muted-foreground mb-2 text-xs font-medium">
+									{ocrInput.type === "document_url" ? "DOCUMENT URL" : "IMAGE URL"}
+								</div>
+								<div className="font-mono text-xs break-all">{ocrInput.document_url ?? ocrInput.image_url}</div>
+							</div>
+						)}
+					</div>
+				</div>
+			)}
+
+			{/* OCR Output */}
+			{ocrOutput && (
+				<div className="w-full rounded-sm border">
+					<div className="flex items-center gap-2 border-b px-6 py-2 text-sm font-medium">
+						<FileText className="h-4 w-4" />
+						OCR Output
+					</div>
+
+					<div className="space-y-4 p-6">
+						{ocrOutput.usage_info && (
+							<div className="grid grid-cols-3 gap-3">
+								<div className="space-y-1">
+									<div className="text-muted-foreground text-xs font-medium">PAGES PROCESSED</div>
+									<div className="font-mono text-xs">{ocrOutput.usage_info.pages_processed}</div>
+								</div>
+								<div className="space-y-1">
+									<div className="text-muted-foreground text-xs font-medium">DOCUMENT SIZE</div>
+									<div className="font-mono text-xs">{(ocrOutput.usage_info.doc_size_bytes / 1024).toFixed(1)} KB</div>
+								</div>
+							</div>
+						)}
+
+						{ocrOutput.document_annotation && (
+							<div>
+								<div className="text-muted-foreground mb-2 text-xs font-medium">DOCUMENT ANNOTATION</div>
+								<div className="font-mono text-xs">{ocrOutput.document_annotation}</div>
+							</div>
+						)}
+
+						{currentPage && (
+							<>
+								{currentPage.dimensions && (
+									<div className="grid grid-cols-3 gap-3">
+										<div className="space-y-1">
+											<div className="text-muted-foreground text-xs font-medium">DIMENSIONS</div>
+											<div className="font-mono text-xs">{currentPage.dimensions.width} × {currentPage.dimensions.height}px</div>
+										</div>
+										<div className="space-y-1">
+											<div className="text-muted-foreground text-xs font-medium">DPI</div>
+											<div className="font-mono text-xs">{currentPage.dimensions.dpi}</div>
+										</div>
+									</div>
+								)}
+
+								{currentPage.markdown ? (
+									<div>
+										<div className="text-muted-foreground mb-2 text-xs font-medium">MARKDOWN</div>
+										<CodeEditor
+											className="z-0 w-full"
+											shouldAdjustInitialHeight
+											maxHeight={400}
+											wrap
+											code={currentPage.markdown}
+											lang="markdown"
+											readonly
+											options={{
+												scrollBeyondLastLine: false,
+												lineNumbers: "off",
+												alwaysConsumeMouseWheel: false,
+											}}
+										/>
+									</div>
+								) : (
+									<div className="text-muted-foreground font-mono text-xs">No text extracted from this page.</div>
+								)}
+
+								{pageImages.length > 0 && (
+									<div>
+										<div className="text-muted-foreground mb-2 text-xs font-medium">EXTRACTED IMAGES ({pageImages.length})</div>
+										<div className="flex flex-wrap gap-2">
+											{pageImages.map((img) => (
+												<img
+													key={img.id}
+													src={getImageSrc(img.image_base64!)}
+													alt={`Image ${img.id}`}
+													className="max-h-48 max-w-48 rounded border object-contain"
+												/>
+											))}
+										</div>
+									</div>
+								)}
+
+								{totalPages > 1 && (
+									<div className="mt-3 flex items-center justify-center gap-4">
+										<Button variant="outline" size="sm" onClick={goToPrevious} aria-label="Previous page" title="Previous page" data-testid="ocr-view-pagination-prev-button">
+											<ChevronLeft className="h-4 w-4" />
+										</Button>
+										<span className="text-muted-foreground text-sm">
+											Page {currentIndex + 1} / {totalPages}
+										</span>
+										<Button variant="outline" size="sm" onClick={goToNext} aria-label="Next page" title="Next page" data-testid="ocr-view-pagination-next-button">
+											<ChevronRight className="h-4 w-4" />
+										</Button>
+									</div>
+								)}
+							</>
+						)}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/ui/lib/types/logs.ts b/ui/lib/types/logs.ts
index b547b6e3ce..3188e78704 100644
--- a/ui/lib/types/logs.ts
+++ b/ui/lib/types/logs.ts
@@ -5,793 +5,839 @@ import { RoutingRule } from "./routingRules";
 
 // Speech and Transcription types
 export interface VoiceConfig {
-	speaker: string;
-	voice: string;
+  speaker: string;
+  voice: string;
 }
 
 export interface SpeechInput {
-	input: string;
+  input: string;
 }
 
 export interface TranscriptionInput {
-	file: string; // base64 encoded (send empty string when using input_audio)
+  file: string; // base64 encoded (send empty string when using input_audio)
 }
 
 export interface AudioTokenDetails {
-	text_tokens: number;
-	audio_tokens: number;
+  text_tokens: number;
+  audio_tokens: number;
 }
 
 export interface AudioLLMUsage {
-	input_tokens: number;
-	input_tokens_details?: AudioTokenDetails;
-	output_tokens: number;
-	total_tokens: number;
+  input_tokens: number;
+  input_tokens_details?: AudioTokenDetails;
+  output_tokens: number;
+  total_tokens: number;
 }
 
 export interface TranscriptionWord {
-	word: string;
-	start: number;
-	end: number;
+  word: string;
+  start: number;
+  end: number;
 }
 
 export interface TranscriptionSegment {
-	id: number;
-	seek: number;
-	start: number;
-	end: number;
-	text: string;
-	tokens: number[];
-	temperature: number;
-	avg_logprob: number;
-	compression_ratio: number;
-	no_speech_prob: number;
+  id: number;
+  seek: number;
+  start: number;
+  end: number;
+  text: string;
+  tokens: number[];
+  temperature: number;
+  avg_logprob: number;
+  compression_ratio: number;
+  no_speech_prob: number;
 }
 
 export interface TranscriptionLogProb {
-	token: string;
-	logprob: number;
-	bytes: number[];
+  token: string;
+  logprob: number;
+  bytes: number[];
 }
 
 export interface TranscriptionUsage {
-	type: string; // "tokens" or "duration"
-	input_tokens?: number;
-	input_token_details?: AudioTokenDetails;
-	output_tokens?: number;
-	total_tokens?: number;
-	seconds?: number; // For duration-based usage
+  type: string; // "tokens" or "duration"
+  input_tokens?: number;
+  input_token_details?: AudioTokenDetails;
+  output_tokens?: number;
+  total_tokens?: number;
+  seconds?: number; // For duration-based usage
 }
 
 export interface BifrostSpeech {
-	usage?: AudioLLMUsage;
-	audio: string; // base64 encoded audio data
+  usage?: AudioLLMUsage;
+  audio: string; // base64 encoded audio data
 }
 
 export interface BifrostTranscribe {
-	text: string;
-	logprobs?: TranscriptionLogProb[];
-	usage?: TranscriptionUsage;
-	// Non-streaming specific fields
-	task?: string; // e.g., "transcribe"
-	language?: string; // e.g., "english"
-	duration?: number; // Duration in seconds
-	words?: TranscriptionWord[];
-	segments?: TranscriptionSegment[];
+  text: string;
+  logprobs?: TranscriptionLogProb[];
+  usage?: TranscriptionUsage;
+  // Non-streaming specific fields
+  task?: string; // e.g., "transcribe"
+  language?: string; // e.g., "english"
+  duration?: number; // Duration in seconds
+  words?: TranscriptionWord[];
+  segments?: TranscriptionSegment[];
 }
 
 // Model and related types for list models response
 export interface Model {
-	id: string;
-	canonical_slug?: string;
-	name?: string;
-	alias?: string;
-	created?: number;
-	context_length?: number;
-	max_input_tokens?: number;
-	max_output_tokens?: number;
-	architecture?: Architecture;
-	pricing?: Pricing;
-	top_provider?: TopProvider;
-	per_request_limits?: PerRequestLimits;
-	supported_parameters?: string[];
-	default_parameters?: DefaultParameters;
-	hugging_face_id?: string;
-	description?: string;
-	owned_by?: string;
-	supported_methods?: string[];
+  id: string;
+  canonical_slug?: string;
+  name?: string;
+  alias?: string;
+  created?: number;
+  context_length?: number;
+  max_input_tokens?: number;
+  max_output_tokens?: number;
+  architecture?: Architecture;
+  pricing?: Pricing;
+  top_provider?: TopProvider;
+  per_request_limits?: PerRequestLimits;
+  supported_parameters?: string[];
+  default_parameters?: DefaultParameters;
+  hugging_face_id?: string;
+  description?: string;
+  owned_by?: string;
+  supported_methods?: string[];
 }
 
 export interface Architecture {
-	modality?: string;
-	tokenizer?: string;
-	instruct_type?: string;
-	input_modalities?: string[];
-	output_modalities?: string[];
+  modality?: string;
+  tokenizer?: string;
+  instruct_type?: string;
+  input_modalities?: string[];
+  output_modalities?: string[];
 }
 
 export interface Pricing {
-	prompt?: string;
-	completion?: string;
-	request?: string;
-	image?: string;
-	web_search?: string;
-	internal_reasoning?: string;
-	input_cache_read?: string;
-	input_cache_write?: string;
+  prompt?: string;
+  completion?: string;
+  request?: string;
+  image?: string;
+  web_search?: string;
+  internal_reasoning?: string;
+  input_cache_read?: string;
+  input_cache_write?: string;
 }
 
 export interface TopProvider {
-	is_moderated?: boolean;
-	context_length?: number;
-	max_completion_tokens?: number;
+  is_moderated?: boolean;
+  context_length?: number;
+  max_completion_tokens?: number;
 }
 
 export interface PerRequestLimits {
-	prompt_tokens?: number;
-	completion_tokens?: number;
+  prompt_tokens?: number;
+  completion_tokens?: number;
 }
 
 export interface DefaultParameters {
-	temperature?: number;
-	top_p?: number;
-	frequency_penalty?: number;
+  temperature?: number;
+  top_p?: number;
+  frequency_penalty?: number;
 }
 
 // Message content types
 export type MessageContentType =
-	| "text"
-	| "image_url"
-	| "input_audio"
-	| "input_text"
-	| "input_file"
-	| "output_text"
-	| "refusal"
-	| "reasoning";
+  | "text"
+  | "image_url"
+  | "input_audio"
+  | "input_text"
+  | "input_file"
+  | "output_text"
+  | "refusal"
+  | "reasoning";
 
 export interface ContentBlock {
-	type: MessageContentType;
-	text?: string;
-	image_url?: {
-		url: string;
-		detail?: string;
-	};
-	input_audio?: {
-		data: string;
-		format?: string;
-	};
+  type: MessageContentType;
+  text?: string;
+  image_url?: {
+    url: string;
+    detail?: string;
+  };
+  input_audio?: {
+    data: string;
+    format?: string;
+  };
 }
 
 export type ChatMessageContent = string | ContentBlock[];
 
 export interface ChatMessage {
-	role: "assistant" | "user" | "system" | "chatbot" | "tool";
-	content: ChatMessageContent;
-	tool_call_id?: string;
-	refusal?: string;
-	annotations?: Annotation[];
-	tool_calls?: ToolCall[]; // For backward compatibility, tool calls are now in the content
-	reasoning?: string;
-	reasoning_details?: ReasoningDetails[];
-	audio?: ChatAudioMessageAudio;
+  role: "assistant" | "user" | "system" | "chatbot" | "tool";
+  content: ChatMessageContent;
+  tool_call_id?: string;
+  refusal?: string;
+  annotations?: Annotation[];
+  tool_calls?: ToolCall[]; // For backward compatibility, tool calls are now in the content
+  reasoning?: string;
+  reasoning_details?: ReasoningDetails[];
+  audio?: ChatAudioMessageAudio;
 }
 
 export interface ChatAudioMessageAudio {
-	id: string;
-	data: string;
-	expires_at: number;
-	transcript: string;
+  id: string;
+  data: string;
+  expires_at: number;
+  transcript: string;
 }
 
 export interface ReasoningDetails {
-	index: number;
-	type: "reasoning.summary" | "reasoning.encrypted" | "reasoning.text";
-	summary?: string;
-	text?: string;
-	signature?: string;
-	data?: string;
+  index: number;
+  type: "reasoning.summary" | "reasoning.encrypted" | "reasoning.text";
+  summary?: string;
+  text?: string;
+  signature?: string;
+  data?: string;
 }
 
 export interface BifrostEmbedding {
-	index: number;
-	object: string;
-	embedding: string | number[] | number[][];
+  index: number;
+  object: string;
+  embedding: string | number[] | number[][];
 }
 
 export interface RerankDocument {
-	text: string;
-	id?: string;
-	meta?: Record<string, unknown>;
+  text: string;
+  id?: string;
+  meta?: Record<string, unknown>;
 }
 
 export interface RerankResult {
-	index: number;
-	relevance_score: number;
-	document?: RerankDocument;
+  index: number;
+  relevance_score: number;
+  document?: RerankDocument;
 }
 
 export interface BifrostImageGenerationData {
-	url?: string;
-	b64_json?: string;
-	revised_prompt?: string;
-	index?: number;
+  url?: string;
+  b64_json?: string;
+  revised_prompt?: string;
+  index?: number;
 }
 
 export interface ImageMessageData {
-	url?: string;
-	b64_json?: string;
-	prompt?: string;
-	revised_prompt?: string;
-	index?: number;
-	output_format?: string;
+  url?: string;
+  b64_json?: string;
+  prompt?: string;
+  revised_prompt?: string;
+  index?: number;
+  output_format?: string;
+}
+
+export interface OCRDocument {
+  type: "document_url" | "image_url";
+  document_url?: string;
+  image_url?: string;
+}
+
+export interface OCRPageImage {
+  id: string;
+  top_left_x: number;
+  top_left_y: number;
+  bottom_right_x: number;
+  bottom_right_y: number;
+  image_base64?: string;
+}
+
+export interface OCRPageDimensions {
+  dpi: number;
+  height: number;
+  width: number;
+}
+
+export interface OCRPage {
+  index: number;
+  markdown: string;
+  images?: OCRPageImage[];
+  dimensions?: OCRPageDimensions;
+}
+
+export interface OCRUsageInfo {
+  pages_processed: number;
+  doc_size_bytes: number;
+}
+
+export interface BifrostOCRResponse {
+  model: string;
+  pages: OCRPage[];
+  usage_info?: OCRUsageInfo;
+  document_annotation?: string;
 }
 
 export interface BifrostImageGenerationOutput {
-	id?: string;
-	created?: number;
-	model?: string;
-	data: BifrostImageGenerationData[];
-	background?: string;
-	output_format?: string;
-	quality?: string;
-	size?: string;
-	usage?: {
-		input_tokens?: number;
-		total_tokens?: number;
-		output_tokens?: number;
-	};
+  id?: string;
+  created?: number;
+  model?: string;
+  data: BifrostImageGenerationData[];
+  background?: string;
+  output_format?: string;
+  quality?: string;
+  size?: string;
+  usage?: {
+    input_tokens?: number;
+    total_tokens?: number;
+    output_tokens?: number;
+  };
 }
 
 export interface VideoCreateError {
-	code?: string;
-	message?: string;
+  code?: string;
+  message?: string;
 }
 
 export interface VideoObject {
-	id: string;
-	object: string;
-	model: string;
-	status: string;
-	created_at: number;
-	completed_at?: number;
-	expires_at?: number;
-	progress?: number;
-	prompt: string;
-	remixed_from_video_id?: string;
-	seconds: number;
-	size: string;
-	error?: VideoCreateError;
-	url?: string;
+  id: string;
+  object: string;
+  model: string;
+  status: string;
+  created_at: number;
+  completed_at?: number;
+  expires_at?: number;
+  progress?: number;
+  prompt: string;
+  remixed_from_video_id?: string;
+  seconds: number;
+  size: string;
+  error?: VideoCreateError;
+  url?: string;
 }
 
 export interface VideoOutput {
-	type: string;
-	url?: string;
-	base64?: string;
-	content_type?: string;
+  type: string;
+  url?: string;
+  base64?: string;
+  content_type?: string;
 }
 export interface BifrostVideoGenerationOutput {
-	videos: VideoOutput[];
-	id?: string;
-	completed_at?: number;
-	created_at?: number;
-	error?: VideoCreateError;
-	expires_at?: number;
-	model?: string;
-	object?: string;
-	progress?: number;
-	prompt?: string;
-	remixed_from_video_id?: string;
-	seconds?: number;
-	size?: string;
-	status?: string;
+  videos: VideoOutput[];
+  id?: string;
+  completed_at?: number;
+  created_at?: number;
+  error?: VideoCreateError;
+  expires_at?: number;
+  model?: string;
+  object?: string;
+  progress?: number;
+  prompt?: string;
+  remixed_from_video_id?: string;
+  seconds?: number;
+  size?: string;
+  status?: string;
 }
 
 export interface BifrostVideoDownloadOutput {
-	video_id: string;
-	content_type?: string;
+  video_id: string;
+  content_type?: string;
 }
 
 export interface BifrostVideoDeleteOutput {
-	id: string;
-	deleted: boolean;
-	object?: string;
+  id: string;
+  deleted: boolean;
+  object?: string;
 }
 
 export interface BifrostVideoListOutput {
-	object: string;
-	data: VideoObject[];
-	first_id?: string;
-	has_more?: boolean;
-	last_id?: string;
+  object: string;
+  data: VideoObject[];
+  first_id?: string;
+  has_more?: boolean;
+  last_id?: string;
 }
 
 // Tool related types
 export interface FunctionParameters {
-	type: string;
-	description?: string;
-	required?: string[];
-	properties?: Record<string, unknown>;
-	enum?: string[];
-	additionalProperties?: boolean;
+  type: string;
+  description?: string;
+  required?: string[];
+  properties?: Record<string, unknown>;
+  enum?: string[];
+  additionalProperties?: boolean;
 }
 
 export interface Function {
-	name: string;
-	description?: string;
-	parameters?: FunctionParameters;
-	strict?: boolean;
+  name: string;
+  description?: string;
+  parameters?: FunctionParameters;
+  strict?: boolean;
 }
 
 export interface Tool {
-	id?: string;
-	type: string;
-	function: Function;
+  id?: string;
+  type: string;
+  function: Function;
 }
 
 export interface FunctionCall {
-	name?: string;
-	arguments: string; // stringified JSON
+  name?: string;
+  arguments: string; // stringified JSON
 }
 
 export interface ToolCall {
-	type?: string;
-	id?: string;
-	function: FunctionCall;
+  type?: string;
+  id?: string;
+  function: FunctionCall;
 }
 
 // Model parameters types
 export interface ModelParameters {
-	tool_choice?: unknown; // Can be string or object
-	tools?: Tool[];
-	instructions?: string;
-	temperature?: number;
-	top_p?: number;
-	top_k?: number;
-	max_tokens?: number;
-	stop_sequences?: string[];
-	presence_penalty?: number;
-	frequency_penalty?: number;
-	parallel_tool_calls?: boolean;
-	extra_params?: Record<string, unknown>;
+  tool_choice?: unknown; // Can be string or object
+  tools?: Tool[];
+  instructions?: string;
+  temperature?: number;
+  top_p?: number;
+  top_k?: number;
+  max_tokens?: number;
+  stop_sequences?: string[];
+  presence_penalty?: number;
+  frequency_penalty?: number;
+  parallel_tool_calls?: boolean;
+  extra_params?: Record<string, unknown>;
 }
 
 // Token usage types
 export interface TokenDetails {
-	cached_read_tokens?: number;
-	cached_write_tokens?: number;
-	audio_tokens?: number;
+  cached_read_tokens?: number;
+  cached_write_tokens?: number;
+  audio_tokens?: number;
 }
 
 export interface CompletionTokensDetails {
-	reasoning_tokens?: number;
-	audio_tokens?: number;
-	accepted_prediction_tokens?: number;
-	rejected_prediction_tokens?: number;
+  reasoning_tokens?: number;
+  audio_tokens?: number;
+  accepted_prediction_tokens?: number;
+  rejected_prediction_tokens?: number;
 }
 
 export interface LLMUsage {
-	prompt_tokens: number;
-	completion_tokens: number;
-	total_tokens: number;
-	prompt_tokens_details?: TokenDetails;
-	completion_tokens_details?: CompletionTokensDetails;
+  prompt_tokens: number;
+  completion_tokens: number;
+  total_tokens: number;
+  prompt_tokens_details?: TokenDetails;
+  completion_tokens_details?: CompletionTokensDetails;
 }
 
 export interface CacheDebug {
-	cache_hit: boolean;
-	cache_id?: string;
-	hit_type?: string;
-	requested_provider?: string;
-	requested_model?: string;
-	provider_used?: string;
-	model_used?: string;
-	input_tokens?: number;
-	threshold?: number;
-	similarity?: number;
+  cache_hit: boolean;
+  cache_id?: string;
+  hit_type?: string;
+  requested_provider?: string;
+  requested_model?: string;
+  provider_used?: string;
+  model_used?: string;
+  input_tokens?: number;
+  threshold?: number;
+  similarity?: number;
 }
 
 // Error types
 export interface ErrorField {
-	type?: string;
-	code?: string;
-	message: string;
-	error?: unknown;
-	param?: unknown;
-	event_id?: string;
+  type?: string;
+  code?: string;
+  message: string;
+  error?: unknown;
+  param?: unknown;
+  event_id?: string;
 }
 
 export interface BifrostError {
-	event_id?: string;
-	type?: string;
-	is_bifrost_error: boolean;
-	status_code?: number;
-	error: ErrorField;
+  event_id?: string;
+  type?: string;
+  is_bifrost_error: boolean;
+  status_code?: number;
+  error: ErrorField;
 }
 
 // Citation and Annotation types
 export interface Citation {
-	start_index: number;
-	end_index: number;
-	title: string;
-	url?: string;
-	sources?: unknown;
-	type?: string;
+  start_index: number;
+  end_index: number;
+  title: string;
+  url?: string;
+  sources?: unknown;
+  type?: string;
 }
 
 export interface Annotation {
-	type: string;
-	url_citation: Citation;
+  type: string;
+  url_citation: Citation;
 }
 
 export interface PluginLogEntry {
-	plugin_name: string;
-	level: "debug" | "info" | "warn" | "error";
-	message: string;
-	timestamp: number;
+  plugin_name: string;
+  level: "debug" | "info" | "warn" | "error";
+  message: string;
+  timestamp: number;
 }
 
 export interface ImageEditInput {
-	images?: Array<{ image: string | null }> | null; // null when stripped by large-payload threshold
-	prompt: string;
+  images?: Array<{ image: string | null }> | null; // null when stripped by large-payload threshold
+  prompt: string;
 }
 
 export interface ImageVariationInput {
-	image: { image: string | null }; // image bytes null when stripped by large-payload threshold
+  image: { image: string | null }; // image bytes null when stripped by large-payload threshold
 }
 
 // Main LogEntry interface matching backend
 export interface KeyAttemptRecord {
-	attempt: number;
-	key_id: string;
-	key_name: string;
-	fail_reason?: string | null; // null/undefined on the final (successful or last) attempt
+  attempt: number;
+  key_id: string;
+  key_name: string;
+  fail_reason?: string | null; // null/undefined on the final (successful or last) attempt
 }
 
 export interface LogEntry {
-	id: string;
-	object: string; // text.completion, chat.completion, embedding, audio.speech, audio.transcription
-	parent_request_id?: string;
-	timestamp: string; // ISO string format from Go time.Time
-	provider: string;
-	model: string;
-	alias?: string; // Set when model was resolved via alias mapping; the original name the caller used
-	number_of_retries: number;
-	fallback_index: number;
-	attempt_trail?: KeyAttemptRecord[]; // Per-attempt key selection history
-	selected_key_id?: string | null;
-	selected_prompt_id?: string; // Selected prompt ID (prompts plugin)
-	selected_prompt_name?: string; // Resolved prompt display name (prompts plugin)
-	selected_prompt_version?: string; // Resolved prompt version number as string (prompts plugin)
-	team_name?: string;
-	team_id?: string;
-	customer_name?: string;
-	customer_id?: string;
-	business_unit_id?: string;
-	business_unit_name?: string;
-	user_id?: string;
-	user_name?: string;
-	virtual_key_id?: string;
-	routing_engines_used?: string[];
-	routing_rule_id?: string;
-	routing_engine_logs?: string; // Human-readable routing decision logs
-	plugin_logs?: string; // JSON string of plugin execution logs grouped by plugin name
-	selected_key?: DBKey;
-	virtual_key?: VirtualKey;
-	routing_rule?: RoutingRule;
-	input_history: ChatMessage[];
-	responses_input_history: ResponsesMessage[];
-	content_summary?: string;
-	output_message?: ChatMessage;
-	responses_output?: ResponsesMessage[];
-	embedding_output?: BifrostEmbedding[];
-	rerank_output?: RerankResult[];
-	image_generation_output?: BifrostImageGenerationOutput;
-	video_generation_output?: BifrostVideoGenerationOutput;
-	video_retrieve_output?: BifrostVideoGenerationOutput;
-	video_download_output?: BifrostVideoDownloadOutput;
-	video_list_output?: BifrostVideoListOutput;
-	video_delete_output?: BifrostVideoDeleteOutput;
-	params?: ModelParameters;
-	speech_input?: SpeechInput;
-	transcription_input?: TranscriptionInput;
-	image_generation_input?: { prompt: string };
-	image_edit_input?: ImageEditInput;
-	image_variation_input?: ImageVariationInput;
-	video_generation_input?: { prompt: string };
-	speech_output?: BifrostSpeech;
-	transcription_output?: BifrostTranscribe;
-	list_models_output?: Model[];
-	tools?: Tool[];
-	tool_calls?: ToolCall[];
-	latency?: number;
-	token_usage?: LLMUsage;
-	cache_debug?: CacheDebug;
-	cost?: number; // Cost in dollars (total cost of the request - includes cache lookup cost)
-	status: string; // "success" or "error"
-	error_details?: BifrostError;
-	stream: boolean; // true if this was a streaming response
-	created_at: string; // ISO string format from Go time.Time - when the log was first created
-	raw_request?: string; // Raw provider request
-	raw_response?: string; // Raw provider response
-	is_large_payload_request?: boolean; // true if request used large payload streaming
-	is_large_payload_response?: boolean; // true if response used large payload streaming
-	passthrough_request_body?: string; // Raw passthrough request body (UTF-8)
-	passthrough_response_body?: string; // Raw passthrough response body (UTF-8)
-	metadata?: Record<string, string>; // JSON metadata (e.g., isAsyncRequest)
+  id: string;
+  object: string; // text.completion, chat.completion, embedding, audio.speech, audio.transcription
+  parent_request_id?: string;
+  timestamp: string; // ISO string format from Go time.Time
+  provider: string;
+  model: string;
+  alias?: string; // Set when model was resolved via alias mapping; the original name the caller used
+  number_of_retries: number;
+  fallback_index: number;
+  attempt_trail?: KeyAttemptRecord[]; // Per-attempt key selection history
+  selected_key_id?: string | null;
+  selected_prompt_id?: string; // Selected prompt ID (prompts plugin)
+  selected_prompt_name?: string; // Resolved prompt display name (prompts plugin)
+  selected_prompt_version?: string; // Resolved prompt version number as string (prompts plugin)
+  team_name?: string;
+  team_id?: string;
+  customer_name?: string;
+  customer_id?: string;
+  business_unit_id?: string;
+  business_unit_name?: string;
+  user_id?: string;
+  user_name?: string;
+  virtual_key_id?: string;
+  routing_engines_used?: string[];
+  routing_rule_id?: string;
+  routing_engine_logs?: string; // Human-readable routing decision logs
+  plugin_logs?: string; // JSON string of plugin execution logs grouped by plugin name
+  selected_key?: DBKey;
+  virtual_key?: VirtualKey;
+  routing_rule?: RoutingRule;
+  input_history: ChatMessage[];
+  responses_input_history: ResponsesMessage[];
+  content_summary?: string;
+  output_message?: ChatMessage;
+  responses_output?: ResponsesMessage[];
+  embedding_output?: BifrostEmbedding[];
+  rerank_output?: RerankResult[];
+  ocr_input?: OCRDocument;
+  ocr_output?: BifrostOCRResponse;
+  image_generation_output?: BifrostImageGenerationOutput;
+  video_generation_output?: BifrostVideoGenerationOutput;
+  video_retrieve_output?: BifrostVideoGenerationOutput;
+  video_download_output?: BifrostVideoDownloadOutput;
+  video_list_output?: BifrostVideoListOutput;
+  video_delete_output?: BifrostVideoDeleteOutput;
+  params?: ModelParameters;
+  speech_input?: SpeechInput;
+  transcription_input?: TranscriptionInput;
+  image_generation_input?: { prompt: string };
+  image_edit_input?: ImageEditInput;
+  image_variation_input?: ImageVariationInput;
+  video_generation_input?: { prompt: string };
+  speech_output?: BifrostSpeech;
+  transcription_output?: BifrostTranscribe;
+  list_models_output?: Model[];
+  tools?: Tool[];
+  tool_calls?: ToolCall[];
+  latency?: number;
+  token_usage?: LLMUsage;
+  cache_debug?: CacheDebug;
+  cost?: number; // Cost in dollars (total cost of the request - includes cache lookup cost)
+  status: string; // "success" or "error"
+  error_details?: BifrostError;
+  stream: boolean; // true if this was a streaming response
+  created_at: string; // ISO string format from Go time.Time - when the log was first created
+  raw_request?: string; // Raw provider request
+  raw_response?: string; // Raw provider response
+  is_large_payload_request?: boolean; // true if request used large payload streaming
+  is_large_payload_response?: boolean; // true if response used large payload streaming
+  passthrough_request_body?: string; // Raw passthrough request body (UTF-8)
+  passthrough_response_body?: string; // Raw passthrough response body (UTF-8)
+  metadata?: Record<string, string>; // JSON metadata (e.g., isAsyncRequest)
 }
 
 export interface LogFilters {
-	providers?: string[];
-	models?: string[];
-	aliases?: string[];
-	parent_request_id?: string;
-	selected_key_ids?: string[];
-	virtual_key_ids?: string[];
-	routing_rule_ids?: string[];
-	routing_engine_used?: string[]; // For filtering by routing engine (routing-rule, governance, loadbalancing)
-	status?: string[];
-	objects?: string[]; // For filtering by request type (chat.completion, text.completion, embedding)
-	start_time?: string; // RFC3339 format
-	end_time?: string; // RFC3339 format
-	min_latency?: number;
-	max_latency?: number;
-	min_tokens?: number;
-	max_tokens?: number;
-	missing_cost_only?: boolean;
-	content_search?: string;
-	metadata_filters?: Record<string, string>; // key=metadataKey, value=metadataValue for filtering by metadata
-	user_ids?: string[];
-	team_ids?: string[];
-	customer_ids?: string[];
-	business_unit_ids?: string[];
+  providers?: string[];
+  models?: string[];
+  aliases?: string[];
+  parent_request_id?: string;
+  selected_key_ids?: string[];
+  virtual_key_ids?: string[];
+  routing_rule_ids?: string[];
+  routing_engine_used?: string[]; // For filtering by routing engine (routing-rule, governance, loadbalancing)
+  status?: string[];
+  objects?: string[]; // For filtering by request type (chat.completion, text.completion, embedding)
+  start_time?: string; // RFC3339 format
+  end_time?: string; // RFC3339 format
+  min_latency?: number;
+  max_latency?: number;
+  min_tokens?: number;
+  max_tokens?: number;
+  missing_cost_only?: boolean;
+  content_search?: string;
+  metadata_filters?: Record<string, string>; // key=metadataKey, value=metadataValue for filtering by metadata
+  user_ids?: string[];
+  team_ids?: string[];
+  customer_ids?: string[];
+  business_unit_ids?: string[];
 }
 
 export interface Pagination {
-	limit: number;
-	offset: number;
-	sort_by: "timestamp" | "latency" | "tokens" | "cost";
-	order: "asc" | "desc";
+  limit: number;
+  offset: number;
+  sort_by: "timestamp" | "latency" | "tokens" | "cost";
+  order: "asc" | "desc";
 }
 
 export interface LogStats {
-	total_requests: number;
-	success_rate: number;
-	user_facing_success_rate: number;
-	average_latency: number;
-	total_tokens: number;
-	total_cost: number;
+  total_requests: number;
+  success_rate: number;
+  user_facing_success_rate: number;
+  average_latency: number;
+  total_tokens: number;
+  total_cost: number;
 }
 
 export interface LogSessionDetailResponse {
-	session_id: string;
-	logs: LogEntry[];
-	pagination: Pagination & { total_count?: number };
-	count: number;
-	returned_count: number;
-	has_more: boolean;
+  session_id: string;
+  logs: LogEntry[];
+  pagination: Pagination & { total_count?: number };
+  count: number;
+  returned_count: number;
+  has_more: boolean;
 }
 
 export interface LogSessionSummaryResponse {
-	session_id: string;
-	count: number;
-	total_cost: number;
-	total_tokens: number;
-	started_at?: string;
-	latest_at?: string;
-	duration_ms: number;
+  session_id: string;
+  count: number;
+  total_cost: number;
+  total_tokens: number;
+  started_at?: string;
+  latest_at?: string;
+  duration_ms: number;
 }
 
 export interface HistogramBucket {
-	timestamp: string;
-	count: number;
-	success: number;
-	error: number;
+  timestamp: string;
+  count: number;
+  success: number;
+  error: number;
 }
 
 export interface LogsHistogramResponse {
-	buckets: HistogramBucket[];
-	bucket_size_seconds: number;
+  buckets: HistogramBucket[];
+  bucket_size_seconds: number;
 }
 
 // Token histogram types
 export interface TokenHistogramBucket {
-	timestamp: string;
-	prompt_tokens: number;
-	completion_tokens: number;
-	total_tokens: number;
-	cached_read_tokens: number;
+  timestamp: string;
+  prompt_tokens: number;
+  completion_tokens: number;
+  total_tokens: number;
+  cached_read_tokens: number;
 }
 
 export interface TokenHistogramResponse {
-	buckets: TokenHistogramBucket[];
-	bucket_size_seconds: number;
+  buckets: TokenHistogramBucket[];
+  bucket_size_seconds: number;
 }
 
 // Cost histogram types
 export interface CostHistogramBucket {
-	timestamp: string;
-	total_cost: number;
-	by_model: Record<string, number>;
+  timestamp: string;
+  total_cost: number;
+  by_model: Record<string, number>;
 }
 
 export interface CostHistogramResponse {
-	buckets: CostHistogramBucket[];
-	bucket_size_seconds: number;
-	models: string[];
+  buckets: CostHistogramBucket[];
+  bucket_size_seconds: number;
+  models: string[];
 }
 
 // Model usage histogram types
 export interface ModelUsageStats {
-	total: number;
-	success: number;
-	error: number;
+  total: number;
+  success: number;
+  error: number;
 }
 
 export interface ModelHistogramBucket {
-	timestamp: string;
-	by_model: Record<string, ModelUsageStats>;
+  timestamp: string;
+  by_model: Record<string, ModelUsageStats>;
 }
 
 export interface ModelHistogramResponse {
-	buckets: ModelHistogramBucket[];
-	bucket_size_seconds: number;
-	models: string[];
+  buckets: ModelHistogramBucket[];
+  bucket_size_seconds: number;
+  models: string[];
 }
 
 // Latency histogram types
 export interface LatencyHistogramBucket {
-	timestamp: string;
-	avg_latency: number;
-	p90_latency: number;
-	p95_latency: number;
-	p99_latency: number;
-	total_requests: number;
+  timestamp: string;
+  avg_latency: number;
+  p90_latency: number;
+  p95_latency: number;
+  p99_latency: number;
+  total_requests: number;
 }
 
 export interface LatencyHistogramResponse {
-	buckets: LatencyHistogramBucket[];
-	bucket_size_seconds: number;
+  buckets: LatencyHistogramBucket[];
+  bucket_size_seconds: number;
 }
 
 // Provider-level histogram types
 
 export interface ProviderCostHistogramBucket {
-	timestamp: string;
-	total_cost: number;
-	by_provider: Record<string, number>;
+  timestamp: string;
+  total_cost: number;
+  by_provider: Record<string, number>;
 }
 
 export interface ProviderCostHistogramResponse {
-	buckets: ProviderCostHistogramBucket[];
-	bucket_size_seconds: number;
-	providers: string[];
+  buckets: ProviderCostHistogramBucket[];
+  bucket_size_seconds: number;
+  providers: string[];
 }
 
 export interface ProviderTokenStats {
-	prompt_tokens: number;
-	completion_tokens: number;
-	total_tokens: number;
+  prompt_tokens: number;
+  completion_tokens: number;
+  total_tokens: number;
 }
 
 export interface ProviderTokenHistogramBucket {
-	timestamp: string;
-	by_provider: Record<string, ProviderTokenStats>;
+  timestamp: string;
+  by_provider: Record<string, ProviderTokenStats>;
 }
 
 export interface ProviderTokenHistogramResponse {
-	buckets: ProviderTokenHistogramBucket[];
-	bucket_size_seconds: number;
-	providers: string[];
+  buckets: ProviderTokenHistogramBucket[];
+  bucket_size_seconds: number;
+  providers: string[];
 }
 
 export interface ProviderLatencyStats {
-	avg_latency: number;
-	p90_latency: number;
-	p95_latency: number;
-	p99_latency: number;
-	total_requests: number;
+  avg_latency: number;
+  p90_latency: number;
+  p95_latency: number;
+  p99_latency: number;
+  total_requests: number;
 }
 
 export interface ProviderLatencyHistogramBucket {
-	timestamp: string;
-	by_provider: Record<string, ProviderLatencyStats>;
+  timestamp: string;
+  by_provider: Record<string, ProviderLatencyStats>;
 }
 
 export interface ProviderLatencyHistogramResponse {
-	buckets: ProviderLatencyHistogramBucket[];
-	bucket_size_seconds: number;
-	providers: string[];
+  buckets: ProviderLatencyHistogramBucket[];
+  bucket_size_seconds: number;
+  providers: string[];
 }
 
 export interface LogsResponse {
-	logs: LogEntry[];
-	pagination: Pagination;
-	stats: LogStats;
+  logs: LogEntry[];
+  pagination: Pagination;
+  stats: LogStats;
 }
 
 export interface RecalculateCostResponse {
-	total_matched: number;
-	updated: number;
-	skipped: number;
-	remaining: number;
+  total_matched: number;
+  updated: number;
+  skipped: number;
+  remaining: number;
 }
 
 // Responses API types (for responses_output field)
 
 // Message roles for responses
-export type ResponsesMessageRoleType = "assistant" | "user" | "system" | "developer";
+export type ResponsesMessageRoleType =
+  | "assistant"
+  | "user"
+  | "system"
+  | "developer";
 
 // Message types for responses
 export type ResponsesMessageType =
-	| "message"
-	| "file_search_call"
-	| "computer_call"
-	| "computer_call_output"
-	| "web_search_call"
-	| "web_fetch_call"
-	| "function_call"
-	| "function_call_output"
-	| "code_interpreter_call"
-	| "local_shell_call"
-	| "local_shell_call_output"
-	| "mcp_call"
-	| "custom_tool_call"
-	| "custom_tool_call_output"
-	| "image_generation_call"
-	| "mcp_list_tools"
-	| "mcp_approval_request"
-	| "mcp_approval_responses"
-	| "reasoning"
-	| "item_reference"
-	| "refusal";
+  | "message"
+  | "file_search_call"
+  | "computer_call"
+  | "computer_call_output"
+  | "web_search_call"
+  | "web_fetch_call"
+  | "function_call"
+  | "function_call_output"
+  | "code_interpreter_call"
+  | "local_shell_call"
+  | "local_shell_call_output"
+  | "mcp_call"
+  | "custom_tool_call"
+  | "custom_tool_call_output"
+  | "image_generation_call"
+  | "mcp_list_tools"
+  | "mcp_approval_request"
+  | "mcp_approval_responses"
+  | "reasoning"
+  | "item_reference"
+  | "refusal";
 
 // Content block types for responses
 export type ResponsesMessageContentBlockType =
-	| "input_text"
-	| "input_image"
-	| "input_file"
-	| "input_audio"
-	| "output_text"
-	| "refusal"
-	| "reasoning_text";
+  | "input_text"
+  | "input_image"
+  | "input_file"
+  | "input_audio"
+  | "output_text"
+  | "refusal"
+  | "reasoning_text";
 
 // Content blocks for responses messages
 export interface ResponsesMessageContentBlock {
-	type: ResponsesMessageContentBlockType;
-	file_id?: string;
-	text?: string;
-	image_url?: string;
-	detail?: string; // "low" | "high" | "auto"
-	file_data?: string; // Base64 encoded file data
-	file_url?: string;
-	filename?: string;
-	input_audio?: {
-		format: string; // "mp3" or "wav"
-		data: string; // base64 encoded audio data
-	};
-	annotations?: Array<{
-		type: string;
-		index?: number;
-		file_id?: string;
-		start_index?: number;
-		end_index?: number;
-		filename?: string;
-		title?: string;
-		url?: string;
-		container_id?: string;
-	}>;
-	logprobs?: Array<{
-		bytes: number[];
-		logprob: number;
-		token: string;
-		top_logprobs: Array<{
-			bytes: number[];
-			logprob: number;
-			token: string;
-		}>;
-	}>;
-	refusal?: string;
+  type: ResponsesMessageContentBlockType;
+  file_id?: string;
+  text?: string;
+  image_url?: string;
+  detail?: string; // "low" | "high" | "auto"
+  file_data?: string; // Base64 encoded file data
+  file_url?: string;
+  filename?: string;
+  input_audio?: {
+    format: string; // "mp3" or "wav"
+    data: string; // base64 encoded audio data
+  };
+  annotations?: Array<{
+    type: string;
+    index?: number;
+    file_id?: string;
+    start_index?: number;
+    end_index?: number;
+    filename?: string;
+    title?: string;
+    url?: string;
+    container_id?: string;
+  }>;
+  logprobs?: Array<{
+    bytes: number[];
+    logprob: number;
+    token: string;
+    top_logprobs: Array<{
+      bytes: number[];
+      logprob: number;
+      token: string;
+    }>;
+  }>;
+  refusal?: string;
 }
 
 // Message content - can be string or array of blocks
@@ -799,129 +845,132 @@ export type ResponsesMessageContent = string | ResponsesMessageContentBlock[];
 
 // Tool message structure
 export interface ResponsesToolMessage {
-	call_id?: string;
-	name?: string;
-	arguments?: string;
-	// Tool-specific fields would be added here based on tool type
-	[key: string]: any; // For tool-specific properties
+  call_id?: string;
+  name?: string;
+  arguments?: string;
+  // Tool-specific fields would be added here based on tool type
+  [key: string]: any; // For tool-specific properties
 }
 
 // Reasoning content
 export interface ResponsesReasoningSummary {
-	type: "summary_text";
-	text: string;
+  type: "summary_text";
+  text: string;
 }
 
 export interface ResponsesReasoning {
-	summary: ResponsesReasoningSummary[];
-	encrypted_content?: string;
+  summary: ResponsesReasoningSummary[];
+  encrypted_content?: string;
 }
 
 // Main response message structure
 export interface ResponsesMessage {
-	id?: string;
-	type?: ResponsesMessageType;
-	status?: string; // "in_progress" | "completed" | "incomplete" | "interpreting" | "failed"
-	role?: ResponsesMessageRoleType;
-	content?: ResponsesMessageContent;
-	// Tool message fields (merged when type indicates tool usage)
-	call_id?: string;
-	name?: string;
-	arguments?: string;
-	// Reasoning fields (merged when type is "reasoning")
-	summary?: ResponsesReasoningSummary[];
-	encrypted_content?: string;
-	// Additional tool-specific fields
-	[key: string]: any;
-	output?: string | ResponsesMessageContentBlock[] | ResponsesComputerToolCallOutputData;
+  id?: string;
+  type?: ResponsesMessageType;
+  status?: string; // "in_progress" | "completed" | "incomplete" | "interpreting" | "failed"
+  role?: ResponsesMessageRoleType;
+  content?: ResponsesMessageContent;
+  // Tool message fields (merged when type indicates tool usage)
+  call_id?: string;
+  name?: string;
+  arguments?: string;
+  // Reasoning fields (merged when type is "reasoning")
+  summary?: ResponsesReasoningSummary[];
+  encrypted_content?: string;
+  // Additional tool-specific fields
+  [key: string]: any;
+  output?:
+    | string
+    | ResponsesMessageContentBlock[]
+    | ResponsesComputerToolCallOutputData;
 }
 
 export interface ResponsesComputerToolCallOutputData {
-	type: "computer_screenshot";
-	file_id?: string;
-	image_url?: string;
+  type: "computer_screenshot";
+  file_id?: string;
+  image_url?: string;
 }
 
 // Stream options for responses
 export interface ResponsesStreamOptions {
-	include_obfuscation?: boolean;
+  include_obfuscation?: boolean;
 }
 
 // Text configuration
 export interface ResponsesTextConfig {
-	format?: {
-		type: "text" | "json_schema" | "json_object";
-		json_schema?: {
-			name: string;
-			schema: Record<string, any>;
-			type: string;
-			description?: string;
-			strict?: boolean;
-		};
-	};
-	verbosity?: "low" | "medium" | "high";
+  format?: {
+    type: "text" | "json_schema" | "json_object";
+    json_schema?: {
+      name: string;
+      schema: Record<string, any>;
+      type: string;
+      description?: string;
+      strict?: boolean;
+    };
+  };
+  verbosity?: "low" | "medium" | "high";
 }
 
 // Tool choice configuration
 export type ResponsesToolChoiceType =
-	| "none"
-	| "auto"
-	| "any"
-	| "required"
-	| "function"
-	| "allowed_tools"
-	| "file_search"
-	| "web_search_preview"
-	| "computer_use_preview"
-	| "code_interpreter"
-	| "image_generation"
-	| "mcp"
-	| "custom";
+  | "none"
+  | "auto"
+  | "any"
+  | "required"
+  | "function"
+  | "allowed_tools"
+  | "file_search"
+  | "web_search_preview"
+  | "computer_use_preview"
+  | "code_interpreter"
+  | "image_generation"
+  | "mcp"
+  | "custom";
 
 export interface ResponsesToolChoiceStruct {
-	type: ResponsesToolChoiceType;
-	mode?: "none" | "auto" | "required";
-	name?: string;
-	server_label?: string;
-	tools?: Array<{
-		type: string;
-		name?: string;
-		server_label?: string;
-	}>;
+  type: ResponsesToolChoiceType;
+  mode?: "none" | "auto" | "required";
+  name?: string;
+  server_label?: string;
+  tools?: Array<{
+    type: string;
+    name?: string;
+    server_label?: string;
+  }>;
 }
 
 export type ResponsesToolChoice = string | ResponsesToolChoiceStruct;
 
 // Tool configuration
 export interface ResponsesToolFunction {
-	parameters?: {
-		type: string;
-		description?: string;
-		required?: string[];
-		properties?: Record<string, unknown>;
-		enum?: string[];
-	};
-	strict?: boolean;
+  parameters?: {
+    type: string;
+    description?: string;
+    required?: string[];
+    properties?: Record<string, unknown>;
+    enum?: string[];
+  };
+  strict?: boolean;
 }
 
 export interface ResponsesTool {
-	type: string;
-	name?: string;
-	description?: string;
-	// Tool-specific configurations
-	function?: ResponsesToolFunction;
-	// Other tool type configs would be added here
-	[key: string]: any;
+  type: string;
+  name?: string;
+  description?: string;
+  // Tool-specific configurations
+  function?: ResponsesToolFunction;
+  // Other tool type configs would be added here
+  [key: string]: any;
 }
 
 // Reasoning parameters
 export interface ResponsesParametersReasoning {
-	effort?: "minimal" | "low" | "medium" | "high";
-	/**
-	 * @deprecated Use `summary` instead
-	 */
-	generate_summary?: string;
-	summary?: "auto" | "concise" | "detailed";
+  effort?: "minimal" | "low" | "medium" | "high";
+  /**
+   * @deprecated Use `summary` instead
+   */
+  generate_summary?: string;
+  summary?: "auto" | "concise" | "detailed";
 }
 
 // Response conversation structure
@@ -932,48 +981,48 @@ export type ResponsesResponseInstructions = string | ResponsesMessage[];
 
 // Response prompt structure
 export interface ResponsesPrompt {
-	id: string;
-	variables: Record<string, any>;
-	version?: string;
+  id: string;
+  variables: Record<string, any>;
+  version?: string;
 }
 
 // Response usage information
 export interface ResponsesResponseInputTokens {
-	cached_read_tokens: number;
-	cached_write_tokens: number;
+  cached_read_tokens: number;
+  cached_write_tokens: number;
 }
 
 export interface ResponsesResponseOutputTokens {
-	reasoning_tokens: number;
+  reasoning_tokens: number;
 }
 
 export interface ResponsesExtendedResponseUsage {
-	input_tokens: number;
-	input_tokens_details?: ResponsesResponseInputTokens;
-	output_tokens: number;
-	output_tokens_details?: ResponsesResponseOutputTokens;
+  input_tokens: number;
+  input_tokens_details?: ResponsesResponseInputTokens;
+  output_tokens: number;
+  output_tokens_details?: ResponsesResponseOutputTokens;
 }
 
 export interface ResponsesResponseUsage extends ResponsesExtendedResponseUsage {
-	total_tokens: number;
+  total_tokens: number;
 }
 
 // Response error structure
 export interface ResponsesResponseError {
-	code: string;
-	message: string;
+  code: string;
+  message: string;
 }
 
 // Response incomplete details
 export interface ResponsesResponseIncompleteDetails {
-	reason: string;
+  reason: string;
 }
 
 // WebSocket message types
 export interface WebSocketLogMessage {
-	type: "log";
-	operation: "create" | "update";
-	payload: LogEntry;
+  type: "log";
+  operation: "create" | "update";
+  payload: LogEntry;
 }
 
 // ============================================================================
@@ -982,197 +1031,197 @@ export interface WebSocketLogMessage {
 
 // MCP Tool Log Entry - represents a single MCP tool execution
 export interface MCPToolLogEntry {
-	id: string;
-	llm_request_id?: string; // Links to the LLM request that triggered this tool call
-	timestamp: string; // ISO string format
-	tool_name: string;
-	server_label?: string; // MCP server that provided the tool
-	virtual_key_id?: string;
-	virtual_key_name?: string;
-	arguments?: Record<string, unknown> | string; // JSON parsed tool arguments
-	result?: Record<string, unknown> | string; // JSON parsed tool result
-	error_details?: BifrostError;
-	latency?: number; // Execution time in milliseconds
-	cost?: number; // Cost in dollars (per execution cost)
-	status: string; // "processing", "success", or "error"
-	metadata?: Record<string, string>;
-	created_at: string; // ISO string format
-	virtual_key?: VirtualKey;
+  id: string;
+  llm_request_id?: string; // Links to the LLM request that triggered this tool call
+  timestamp: string; // ISO string format
+  tool_name: string;
+  server_label?: string; // MCP server that provided the tool
+  virtual_key_id?: string;
+  virtual_key_name?: string;
+  arguments?: Record<string, unknown> | string; // JSON parsed tool arguments
+  result?: Record<string, unknown> | string; // JSON parsed tool result
+  error_details?: BifrostError;
+  latency?: number; // Execution time in milliseconds
+  cost?: number; // Cost in dollars (per execution cost)
+  status: string; // "processing", "success", or "error"
+  metadata?: Record<string, string>;
+  created_at: string; // ISO string format
+  virtual_key?: VirtualKey;
 }
 
 // MCP Tool Log Filters
 export interface MCPToolLogFilters {
-	tool_names?: string[];
-	server_labels?: string[];
-	status?: string[];
-	virtual_key_ids?: string[];
-	llm_request_ids?: string[];
-	start_time?: string; // RFC3339 format
-	end_time?: string; // RFC3339 format
-	min_latency?: number;
-	max_latency?: number;
-	content_search?: string;
+  tool_names?: string[];
+  server_labels?: string[];
+  status?: string[];
+  virtual_key_ids?: string[];
+  llm_request_ids?: string[];
+  start_time?: string; // RFC3339 format
+  end_time?: string; // RFC3339 format
+  min_latency?: number;
+  max_latency?: number;
+  content_search?: string;
 }
 
 // MCP Tool Log Statistics
 export interface MCPToolLogStats {
-	total_executions: number;
-	success_rate: number;
-	average_latency: number;
-	total_cost: number; // Total cost in dollars
+  total_executions: number;
+  success_rate: number;
+  average_latency: number;
+  total_cost: number; // Total cost in dollars
 }
 
 // MCP Tool Log Search Response
 export interface MCPToolLogsResponse {
-	logs: MCPToolLogEntry[];
-	pagination: Pagination;
-	stats: MCPToolLogStats;
-	has_logs: boolean;
+  logs: MCPToolLogEntry[];
+  pagination: Pagination;
+  stats: MCPToolLogStats;
+  has_logs: boolean;
 }
 
 // MCP Tool Log Filter Data Response
 export interface MCPToolLogFilterData {
-	tool_names: string[];
-	server_labels: string[];
-	virtual_keys: VirtualKey[];
+  tool_names: string[];
+  server_labels: string[];
+  virtual_keys: VirtualKey[];
 }
 
 // WebSocket message types for MCP tool logs
 export interface WebSocketMCPToolLogMessage {
-	type: "mcp_log";
-	operation: "create" | "update";
-	payload: MCPToolLogEntry;
+  type: "mcp_log";
+  operation: "create" | "update";
+  payload: MCPToolLogEntry;
 }
 
 // MCP histogram types
 
 export interface MCPHistogramBucket {
-	timestamp: string;
-	count: number;
-	success: number;
-	error: number;
+  timestamp: string;
+  count: number;
+  success: number;
+  error: number;
 }
 
 export interface MCPHistogramResponse {
-	buckets: MCPHistogramBucket[];
-	bucket_size_seconds: number;
+  buckets: MCPHistogramBucket[];
+  bucket_size_seconds: number;
 }
 
 export interface MCPCostHistogramBucket {
-	timestamp: string;
-	total_cost: number;
+  timestamp: string;
+  total_cost: number;
 }
 
 export interface MCPCostHistogramResponse {
-	buckets: MCPCostHistogramBucket[];
-	bucket_size_seconds: number;
+  buckets: MCPCostHistogramBucket[];
+  bucket_size_seconds: number;
 }
 
 export interface MCPTopTool {
-	tool_name: string;
-	count: number;
-	cost: number;
+  tool_name: string;
+  count: number;
+  cost: number;
 }
 
 export interface MCPTopToolsResponse {
-	tools: MCPTopTool[];
+  tools: MCPTopTool[];
 }
 
 // Model Rankings types
 export interface ModelRankingTrend {
-	has_previous_period: boolean;
-	requests_trend: number;
-	tokens_trend: number;
-	cost_trend: number;
-	latency_trend: number;
+  has_previous_period: boolean;
+  requests_trend: number;
+  tokens_trend: number;
+  cost_trend: number;
+  latency_trend: number;
 }
 
 export interface ModelRankingEntry {
-	model: string;
-	provider: string;
-	total_requests: number;
-	success_count: number;
-	success_rate: number;
-	total_tokens: number;
-	total_cost: number;
-	avg_latency: number;
-	trend: ModelRankingTrend;
+  model: string;
+  provider: string;
+  total_requests: number;
+  success_count: number;
+  success_rate: number;
+  total_tokens: number;
+  total_cost: number;
+  avg_latency: number;
+  trend: ModelRankingTrend;
 }
 
 export interface ModelRankingsResponse {
-	rankings: ModelRankingEntry[];
+  rankings: ModelRankingEntry[];
 }
 
 export interface UserRankingTrend {
-	has_previous_period: boolean;
-	requests_trend: number;
-	tokens_trend: number;
-	cost_trend: number;
+  has_previous_period: boolean;
+  requests_trend: number;
+  tokens_trend: number;
+  cost_trend: number;
 }
 
 export interface UserRankingEntry {
-	user_id: string;
-	total_requests: number;
-	total_tokens: number;
-	total_cost: number;
-	trend: UserRankingTrend;
+  user_id: string;
+  total_requests: number;
+  total_tokens: number;
+  total_cost: number;
+  trend: UserRankingTrend;
 }
 
 export interface UserRankingsResponse {
-	rankings: UserRankingEntry[];
+  rankings: UserRankingEntry[];
 }
 
 // Date utility functions for URL state management
 export const dateUtils = {
-	/**
-	 * Converts a Date object to Unix timestamp (seconds)
-	 */
-	toUnixTimestamp: (date: Date | undefined): number | undefined => {
-		if (!date) return undefined;
-		return Math.floor(date.getTime() / 1000);
-	},
-
-	/**
-	 * Converts Unix timestamp (seconds) to Date object
-	 */
-	fromUnixTimestamp: (timestamp: number | undefined): Date | undefined => {
-		if (timestamp === undefined) return undefined;
-		return new Date(timestamp * 1000);
-	},
-
-	/**
-	 * Gets the Unix timestamp for 24 hours ago
-	 */
-	get24HoursAgo: (): number => {
-		const date = new Date();
-		date.setHours(date.getHours() - 24);
-		return Math.floor(date.getTime() / 1000);
-	},
-
-	/**
-	 * Gets the current Unix timestamp
-	 */
-	getCurrentTimestamp: (): number => {
-		return Math.floor(Date.now() / 1000);
-	},
-
-	/**
-	 * Converts Unix timestamp to ISO string for API calls
-	 */
-	toISOString: (timestamp: number | undefined): string | undefined => {
-		if (timestamp === undefined) return undefined;
-		return new Date(timestamp * 1000).toISOString();
-	},
-
-	/**
-	 * Gets default time range (last 24 hours to now) as Unix timestamps
-	 * Returns fresh timestamps on each call to avoid stale defaults
-	 */
-	getDefaultTimeRange: (): { startTime: number; endTime: number } => {
-		const endTime = Math.floor(Date.now() / 1000);
-		const date = new Date();
-		date.setHours(date.getHours() - 24);
-		const startTime = Math.floor(date.getTime() / 1000);
-		return { startTime, endTime };
-	},
-};
\ No newline at end of file
+  /**
+   * Converts a Date object to Unix timestamp (seconds)
+   */
+  toUnixTimestamp: (date: Date | undefined): number | undefined => {
+    if (!date) return undefined;
+    return Math.floor(date.getTime() / 1000);
+  },
+
+  /**
+   * Converts Unix timestamp (seconds) to Date object
+   */
+  fromUnixTimestamp: (timestamp: number | undefined): Date | undefined => {
+    if (timestamp === undefined) return undefined;
+    return new Date(timestamp * 1000);
+  },
+
+  /**
+   * Gets the Unix timestamp for 24 hours ago
+   */
+  get24HoursAgo: (): number => {
+    const date = new Date();
+    date.setHours(date.getHours() - 24);
+    return Math.floor(date.getTime() / 1000);
+  },
+
+  /**
+   * Gets the current Unix timestamp
+   */
+  getCurrentTimestamp: (): number => {
+    return Math.floor(Date.now() / 1000);
+  },
+
+  /**
+   * Converts Unix timestamp to ISO string for API calls
+   */
+  toISOString: (timestamp: number | undefined): string | undefined => {
+    if (timestamp === undefined) return undefined;
+    return new Date(timestamp * 1000).toISOString();
+  },
+
+  /**
+   * Gets default time range (last 24 hours to now) as Unix timestamps
+   * Returns fresh timestamps on each call to avoid stale defaults
+   */
+  getDefaultTimeRange: (): { startTime: number; endTime: number } => {
+    const endTime = Math.floor(Date.now() / 1000);
+    const date = new Date();
+    date.setHours(date.getHours() - 24);
+    const startTime = Math.floor(date.getTime() / 1000);
+    return { startTime, endTime };
+  },
+};