first commit

ui/app/workspace/adaptive-routing/layout.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { NoPermissionView } from "@/components/noPermissionView";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import AdaptiveRoutingPage from "./page";
+
+function RouteComponent() {
+	const hasAdaptiveRouterAccess = useRbac(RbacResource.AdaptiveRouter, RbacOperation.View);
+	if (!hasAdaptiveRouterAccess) {
+		return <NoPermissionView entity="adaptive routing" />;
+	}
+	return <AdaptiveRoutingPage />;
+}
+
+export const Route = createFileRoute("/workspace/adaptive-routing")({
+	component: RouteComponent,
+});

ui/app/workspace/adaptive-routing/page.tsx

@@ -0,0 +1,9 @@
+import AdaptiveRoutingView from "@enterprise/components/adaptive-routing/adaptiveRoutingView";
+
+export default function AdaptiveRoutingPage() {
+	return (
+		<div className="mx-auto w-full">
+			<AdaptiveRoutingView />
+		</div>
+	);
+}

ui/app/workspace/alert-channels/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import AlertChannelsPage from "./page";
+
+export const Route = createFileRoute("/workspace/alert-channels")({
+	component: AlertChannelsPage,
+});

ui/app/workspace/alert-channels/page.tsx

@@ -0,0 +1,9 @@
+import AlertChannelsView from "@enterprise/components/alert-channels/alertChannelsView";
+
+export default function AlertChannelsPage() {
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<AlertChannelsView />
+		</div>
+	);
+}

ui/app/workspace/audit-logs/layout.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { NoPermissionView } from "@/components/noPermissionView";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import AuditLogsPage from "./page";
+
+function RouteComponent() {
+	const hasAuditLogsAccess = useRbac(RbacResource.AuditLogs, RbacOperation.View);
+	if (!hasAuditLogsAccess) {
+		return <NoPermissionView entity="audit logs" />;
+	}
+	return <AuditLogsPage />;
+}
+
+export const Route = createFileRoute("/workspace/audit-logs")({
+	component: RouteComponent,
+});

ui/app/workspace/audit-logs/page.tsx

@@ -0,0 +1,9 @@
+import AuditLogsView from "@enterprise/components/audit-logs/auditLogsView";
+
+export default function AuditLogsPage() {
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<AuditLogsView />
+		</div>
+	);
+}

ui/app/workspace/cluster/layout.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { NoPermissionView } from "@/components/noPermissionView";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import ClusterPage from "./page";
+
+function RouteComponent() {
+	const hasClusterAccess = useRbac(RbacResource.Cluster, RbacOperation.View);
+	if (!hasClusterAccess) {
+		return <NoPermissionView entity="cluster configuration" />;
+	}
+	return <ClusterPage />;
+}
+
+export const Route = createFileRoute("/workspace/cluster")({
+	component: RouteComponent,
+});

ui/app/workspace/cluster/page.tsx

@@ -0,0 +1,9 @@
+import ClusterView from "@enterprise/components/cluster/clusterView";
+
+export default function ClusterPage() {
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<ClusterView />
+		</div>
+	);
+}

ui/app/workspace/config/api-keys/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import APIKeysPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/api-keys")({
+	component: APIKeysPage,
+});

ui/app/workspace/config/api-keys/page.tsx

@@ -0,0 +1,9 @@
+import APIKeysView from "@enterprise/components/api-keys/apiKeysIndexView";
+
+export default function APIKeysPage() {
+	return (
+		<div className="mx-auto flex w-full max-w-7xl">
+			<APIKeysView />
+		</div>
+	);
+}

ui/app/workspace/config/caching/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import CachingPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/caching")({
+	component: CachingPage,
+});

ui/app/workspace/config/caching/page.tsx

@@ -0,0 +1,9 @@
+import CachingView from "../views/cachingView";
+
+export default function CachingPage() {
+	return (
+		<div className="mx-auto flex w-full max-w-7xl">
+			<CachingView />
+		</div>
+	);
+}

ui/app/workspace/config/client-settings/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import ClientSettingsPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/client-settings")({
+	component: ClientSettingsPage,
+});

ui/app/workspace/config/client-settings/page.tsx

@@ -0,0 +1,9 @@
+import ClientSettingsView from "../views/clientSettingsView";
+
+export default function ClientSettingsPage() {
+	return (
+		<div className="mx-auto flex w-full max-w-7xl">
+			<ClientSettingsView />
+		</div>
+	);
+}

ui/app/workspace/config/compatibility/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import CompatibilityPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/compatibility")({
+	component: CompatibilityPage,
+});

ui/app/workspace/config/compatibility/page.tsx

@@ -0,0 +1,9 @@
+import CompatibilityView from "../views/compatibilityView";
+
+export default function CompatibilityPage() {
+	return (
+		<div className="mx-auto flex w-full max-w-7xl">
+			<CompatibilityView />
+		</div>
+	);
+}

ui/app/workspace/config/large-payload/layout.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/workspace/config/large-payload")({
+	beforeLoad: () => {
+		throw redirect({ to: "/workspace/config/client-settings" });
+	},
+});

ui/app/workspace/config/layout.tsx

@@ -0,0 +1,26 @@
+import { createFileRoute, Outlet, useChildMatches } from "@tanstack/react-router";
+import FullPageLoader from "@/components/fullPageLoader";
+import { NoPermissionView } from "@/components/noPermissionView";
+import { useGetCoreConfigQuery } from "@/lib/store";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import ConfigPage from "./page";
+
+function RouteComponent() {
+	const hasConfigAccess = useRbac(RbacResource.Settings, RbacOperation.View);
+	const { isLoading } = useGetCoreConfigQuery({ fromDB: true }, { skip: !hasConfigAccess });
+	const childMatches = useChildMatches();
+
+	if (!hasConfigAccess) {
+		return <NoPermissionView entity="configuration" />;
+	}
+
+	if (isLoading) {
+		return <FullPageLoader />;
+	}
+
+	return childMatches.length === 0 ? <ConfigPage /> : <Outlet />;
+}
+
+export const Route = createFileRoute("/workspace/config")({
+	component: RouteComponent,
+});

ui/app/workspace/config/logging/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import LoggingPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/logging")({
+	component: LoggingPage,
+});

ui/app/workspace/config/logging/page.tsx

@@ -0,0 +1,9 @@
+import LoggingView from "../views/loggingView";
+
+export default function LoggingPage() {
+	return (
+		<div className="mx-auto flex w-full max-w-7xl">
+			<LoggingView />
+		</div>
+	);
+}

ui/app/workspace/config/mcp-gateway/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import MCPGatewayPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/mcp-gateway")({
+	component: MCPGatewayPage,
+});

ui/app/workspace/config/mcp-gateway/page.tsx

@@ -0,0 +1,9 @@
+import MCPGatewayView from "../views/mcpView";
+
+export default function MCPGatewayPage() {
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<MCPGatewayView />
+		</div>
+	);
+}

ui/app/workspace/config/observability/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import ObservabilityPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/observability")({
+	component: ObservabilityPage,
+});

ui/app/workspace/config/observability/page.tsx

@@ -0,0 +1,9 @@
+import ObservabilityView from "../views/observabilityView";
+
+export default function ObservabilityPage() {
+	return (
+		<div className="mx-auto flex w-full max-w-7xl">
+			<ObservabilityView />
+		</div>
+	);
+}

ui/app/workspace/config/page.tsx

@@ -0,0 +1,21 @@
+import { NoPermissionView } from "@/components/noPermissionView";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { useNavigate } from "@tanstack/react-router";
+import { useEffect } from "react";
+
+export default function ConfigPage() {
+	const navigate = useNavigate();
+	// Check permission
+	const hasConfigAccess = useRbac(RbacResource.Settings, RbacOperation.View);
+
+	useEffect(() => {
+		if (hasConfigAccess) {
+			navigate({ to: "/workspace/config/client-settings", replace: true });
+		}
+	}, [hasConfigAccess, navigate]);
+
+	if (!hasConfigAccess) {
+		return <NoPermissionView entity="configuration" />;
+	}
+	return null;
+}

ui/app/workspace/config/performance-tuning/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import PerformanceTuningPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/performance-tuning")({
+	component: PerformanceTuningPage,
+});

ui/app/workspace/config/performance-tuning/page.tsx

@@ -0,0 +1,9 @@
+import PerformanceTuningView from "../views/performanceTuningView";
+
+export default function PerformanceTuningPage() {
+	return (
+		<div className="mx-auto flex w-full max-w-7xl">
+			<PerformanceTuningView />
+		</div>
+	);
+}

ui/app/workspace/config/pricing-config/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import PricingConfigPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/pricing-config")({
+	component: PricingConfigPage,
+});

ui/app/workspace/config/pricing-config/page.tsx

@@ -0,0 +1,9 @@
+import ModelSettingsView from "../views/modelSettingsView";
+
+export default function PricingConfigPage() {
+	return (
+		<div className="mx-auto flex w-full max-w-7xl">
+			<ModelSettingsView />
+		</div>
+	);
+}

ui/app/workspace/config/proxy/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import ProxyPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/proxy")({
+	component: ProxyPage,
+});

ui/app/workspace/config/proxy/page.tsx

@@ -0,0 +1,24 @@
+import { IS_ENTERPRISE } from "@/lib/constants/config";
+import { useNavigate } from "@tanstack/react-router";
+import { useEffect } from "react";
+import ProxyView from "../views/proxyView";
+
+export default function ProxyPage() {
+	const navigate = useNavigate();
+
+	useEffect(() => {
+		if (!IS_ENTERPRISE) {
+			navigate({ to: "/workspace/config/client-settings", replace: true });
+		}
+	}, [navigate]);
+
+	if (!IS_ENTERPRISE) {
+		return null;
+	}
+
+	return (
+		<div className="mx-auto flex w-full max-w-7xl">
+			<ProxyView />
+		</div>
+	);
+}

ui/app/workspace/config/security/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import SecurityPage from "./page";
+
+export const Route = createFileRoute("/workspace/config/security")({
+	component: SecurityPage,
+});

ui/app/workspace/config/security/page.tsx

@@ -0,0 +1,9 @@
+import SecurityView from "../views/securityView";
+
+export default function SecurityPage() {
+	return (
+		<div className="mx-auto flex w-full max-w-7xl">
+			<SecurityView />
+		</div>
+	);
+}

ui/app/workspace/config/views/cachingView.tsx

@@ -0,0 +1,32 @@
+import { getErrorMessage, useGetCoreConfigQuery } from "@/lib/store";
+import PluginsForm from "./pluginsForm";
+
+export default function CachingView() {
+	const { data: bifrostConfig, isLoading, error: configError } = useGetCoreConfigQuery({ fromDB: true });
+
+	return (
+		<div className="mx-auto w-full max-w-4xl space-y-4">
+			<div>
+				<h2 className="text-lg font-semibold tracking-tight">Caching</h2>
+				<p className="text-muted-foreground text-sm">Configure semantic caching for requests.</p>
+			</div>
+
+			{isLoading && (
+				<div className="flex items-center justify-center py-8">
+					<p className="text-muted-foreground">Loading configuration...</p>
+				</div>
+			)}
+
+			{configError !== undefined && (
+				<div className="border-destructive/50 bg-destructive/10 rounded-lg border p-4">
+					<p className="text-destructive text-sm font-medium">Failed to load configuration</p>
+					<p className="text-muted-foreground mt-1 text-sm">
+						{getErrorMessage(configError) || "An unexpected error occurred. Please try again."}
+					</p>
+				</div>
+			)}
+
+			{!isLoading && !configError && <PluginsForm isVectorStoreEnabled={bifrostConfig?.is_cache_connected ?? false} />}
+		</div>
+	);
+}

ui/app/workspace/config/views/clientSettingsView.tsx

@@ -0,0 +1,570 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { getErrorMessage, useGetCoreConfigQuery, useGetDroppedRequestsQuery, useUpdateCoreConfigMutation } from "@/lib/store";
+import { CoreConfig, DefaultCoreConfig, DefaultGlobalHeaderFilterConfig, GlobalHeaderFilterConfig } from "@/lib/types/config";
+import { cn } from "@/lib/utils";
+import LargePayloadSettingsFragment from "@enterprise/components/large-payload/largePayloadSettingsFragment";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { useGetLargePayloadConfigQuery, useUpdateLargePayloadConfigMutation } from "@enterprise/lib/store/apis/largePayloadApi";
+import { DefaultLargePayloadConfig, LargePayloadConfig } from "@enterprise/lib/types/largePayload";
+import { Info, Plus, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+// Security headers that cannot be configured in allowlist/denylist
+// These headers are always blocked for security reasons regardless of configuration
+const SECURITY_HEADERS = [
+	"proxy-authorization",
+	"cookie",
+	"host",
+	"content-length",
+	"connection",
+	"transfer-encoding",
+	"x-api-key",
+	"x-goog-api-key",
+	"x-bf-api-key",
+	"x-bf-vk",
+];
+
+// Helper to check if a header is a security header
+function isSecurityHeader(header: string): boolean {
+	const h = header.toLowerCase().trim();
+	// Wildcard patterns are not literal security headers
+	if (h.includes("*")) return false;
+	return SECURITY_HEADERS.includes(h);
+}
+
+// Helper to compare header filter configs
+function headerFilterConfigEqual(a?: GlobalHeaderFilterConfig, b?: GlobalHeaderFilterConfig): boolean {
+	const aAllowlist = a?.allowlist || [];
+	const bAllowlist = b?.allowlist || [];
+	const aDenylist = a?.denylist || [];
+	const bDenylist = b?.denylist || [];
+
+	if (aAllowlist.length !== bAllowlist.length || aDenylist.length !== bDenylist.length) {
+		return false;
+	}
+
+	return aAllowlist.every((v, i) => v === bAllowlist[i]) && aDenylist.every((v, i) => v === bDenylist[i]);
+}
+
+// Helper to compare large payload configs
+function largePayloadConfigEqual(a: LargePayloadConfig, b: LargePayloadConfig): boolean {
+	return (
+		a.enabled === b.enabled &&
+		a.request_threshold_bytes === b.request_threshold_bytes &&
+		a.response_threshold_bytes === b.response_threshold_bytes &&
+		a.prefetch_size_bytes === b.prefetch_size_bytes &&
+		a.max_payload_bytes === b.max_payload_bytes &&
+		a.truncated_log_bytes === b.truncated_log_bytes
+	);
+}
+
+export default function ClientSettingsView() {
+	const hasSettingsUpdateAccess = useRbac(RbacResource.Settings, RbacOperation.Update);
+	const [droppedRequests, setDroppedRequests] = useState<number>(0);
+	const { data: droppedRequestsData } = useGetDroppedRequestsQuery();
+	const { data: bifrostConfig, isLoading: isCoreConfigLoading } = useGetCoreConfigQuery({ fromDB: true });
+	const config = bifrostConfig?.client_config;
+	const [updateCoreConfig, { isLoading: isSavingCoreConfig }] = useUpdateCoreConfigMutation();
+	const [localConfig, setLocalConfig] = useState<CoreConfig>(DefaultCoreConfig);
+
+	// Large payload config state
+	const { data: serverLargePayloadConfig, isLoading: isLargePayloadConfigLoading } = useGetLargePayloadConfigQuery();
+	const [updateLargePayloadConfig, { isLoading: isSavingLargePayload }] = useUpdateLargePayloadConfigMutation();
+	const [localLargePayloadConfig, setLocalLargePayloadConfig] = useState<LargePayloadConfig>(DefaultLargePayloadConfig);
+
+	const isQueriesLoading = isCoreConfigLoading || isLargePayloadConfigLoading;
+	const isLoading = isSavingCoreConfig || isSavingLargePayload;
+
+	useEffect(() => {
+		if (droppedRequestsData) {
+			setDroppedRequests(droppedRequestsData.dropped_requests);
+		}
+	}, [droppedRequestsData]);
+
+	useEffect(() => {
+		if (config) {
+			setLocalConfig({
+				...config,
+				header_filter_config: config.header_filter_config || DefaultGlobalHeaderFilterConfig,
+			});
+		}
+	}, [config]);
+
+	useEffect(() => {
+		if (serverLargePayloadConfig) {
+			setLocalLargePayloadConfig(serverLargePayloadConfig);
+		}
+	}, [serverLargePayloadConfig]);
+
+	const hasCoreConfigChanges = useMemo(() => {
+		if (!config) return false;
+		return (
+			localConfig.drop_excess_requests !== config.drop_excess_requests ||
+			localConfig.disable_db_pings_in_health !== config.disable_db_pings_in_health ||
+			localConfig.async_job_result_ttl !== config.async_job_result_ttl ||
+			!headerFilterConfigEqual(localConfig.header_filter_config, config.header_filter_config)
+		);
+	}, [config, localConfig]);
+
+	const hasLargePayloadChanges = useMemo(() => {
+		const baseline = serverLargePayloadConfig ?? DefaultLargePayloadConfig;
+		return !largePayloadConfigEqual(localLargePayloadConfig, baseline);
+	}, [serverLargePayloadConfig, localLargePayloadConfig]);
+
+	const hasChanges = hasCoreConfigChanges || hasLargePayloadChanges;
+
+	// Detect security headers in allowlist/denylist
+	const invalidSecurityHeaders = useMemo(() => {
+		const allowlist = localConfig.header_filter_config?.allowlist || [];
+		const denylist = localConfig.header_filter_config?.denylist || [];
+		const invalidInAllowlist = allowlist.filter((h) => h && isSecurityHeader(h));
+		const invalidInDenylist = denylist.filter((h) => h && isSecurityHeader(h));
+		return [...new Set([...invalidInAllowlist, ...invalidInDenylist])];
+	}, [localConfig.header_filter_config]);
+
+	const hasSecurityHeaderError = invalidSecurityHeaders.length > 0;
+
+	const handleConfigChange = useCallback((field: keyof CoreConfig, value: boolean | number | string[] | GlobalHeaderFilterConfig) => {
+		setLocalConfig((prev) => ({ ...prev, [field]: value }));
+	}, []);
+
+	const handleLargePayloadConfigChange = useCallback((newConfig: LargePayloadConfig) => {
+		setLocalLargePayloadConfig(newConfig);
+	}, []);
+
+	const handleSave = useCallback(async () => {
+		// Defense in depth - don't save if security headers are present
+		if (hasSecurityHeaderError) {
+			return;
+		}
+
+		// Validate large payload config if it has changes
+		if (hasLargePayloadChanges) {
+			const minBytes = 1024;
+			if (
+				localLargePayloadConfig.request_threshold_bytes < minBytes ||
+				localLargePayloadConfig.response_threshold_bytes < minBytes ||
+				localLargePayloadConfig.prefetch_size_bytes < minBytes ||
+				localLargePayloadConfig.max_payload_bytes < minBytes ||
+				localLargePayloadConfig.truncated_log_bytes < minBytes
+			) {
+				toast.error("All byte values must be at least 1024 (1 KB).");
+				return;
+			}
+			if (localLargePayloadConfig.max_payload_bytes < localLargePayloadConfig.request_threshold_bytes) {
+				toast.error("Max payload size must be greater than or equal to the request threshold.");
+				return;
+			}
+			if (localLargePayloadConfig.max_payload_bytes < localLargePayloadConfig.response_threshold_bytes) {
+				toast.error("Max payload size must be greater than or equal to the response threshold.");
+				return;
+			}
+		}
+
+		let coreConfigSaved = false;
+		let largePayloadSaved = false;
+
+		// Save core config if changed
+		if (hasCoreConfigChanges) {
+			if (!bifrostConfig) {
+				toast.error("Configuration not loaded. Please refresh and try again.");
+				return;
+			}
+			// Clean up empty strings from header filter config
+			const cleanedConfig = {
+				...localConfig,
+				header_filter_config: {
+					allowlist: (localConfig.header_filter_config?.allowlist || []).filter((h) => h && h.trim().length > 0),
+					denylist: (localConfig.header_filter_config?.denylist || []).filter((h) => h && h.trim().length > 0),
+				},
+			};
+
+			try {
+				await updateCoreConfig({ ...bifrostConfig!, client_config: cleanedConfig }).unwrap();
+				coreConfigSaved = true;
+			} catch (error) {
+				toast.error(`Failed to save client config: ${getErrorMessage(error)}`);
+			}
+		}
+
+		// Save large payload config if changed
+		if (hasLargePayloadChanges) {
+			try {
+				await updateLargePayloadConfig(localLargePayloadConfig).unwrap();
+				largePayloadSaved = true;
+			} catch (error) {
+				toast.error(`Failed to save large payload config: ${getErrorMessage(error)}`);
+			}
+		}
+
+		if (coreConfigSaved || largePayloadSaved) {
+			if (largePayloadSaved) {
+				toast.success("Settings updated. Large payload changes require a restart to apply.");
+			} else {
+				toast.success("Client settings updated successfully.");
+			}
+		}
+	}, [
+		bifrostConfig,
+		hasSecurityHeaderError,
+		hasCoreConfigChanges,
+		hasLargePayloadChanges,
+		localConfig,
+		localLargePayloadConfig,
+		updateCoreConfig,
+		updateLargePayloadConfig,
+	]);
+
+	// Header filter list handlers
+	const handleAddAllowlistHeader = useCallback(() => {
+		setLocalConfig((prev) => ({
+			...prev,
+			header_filter_config: {
+				...prev.header_filter_config,
+				allowlist: [...(prev.header_filter_config?.allowlist || []), ""],
+			},
+		}));
+	}, []);
+
+	const handleRemoveAllowlistHeader = useCallback((index: number) => {
+		setLocalConfig((prev) => ({
+			...prev,
+			header_filter_config: {
+				...prev.header_filter_config,
+				allowlist: (prev.header_filter_config?.allowlist || []).filter((_, i) => i !== index),
+			},
+		}));
+	}, []);
+
+	const handleAllowlistChange = useCallback((index: number, value: string) => {
+		const lowerValue = value.toLowerCase();
+		setLocalConfig((prev) => ({
+			...prev,
+			header_filter_config: {
+				...prev.header_filter_config,
+				allowlist: (prev.header_filter_config?.allowlist || []).map((h, i) => (i === index ? lowerValue : h)),
+			},
+		}));
+	}, []);
+
+	const handleAddDenylistHeader = useCallback(() => {
+		setLocalConfig((prev) => ({
+			...prev,
+			header_filter_config: {
+				...prev.header_filter_config,
+				denylist: [...(prev.header_filter_config?.denylist || []), ""],
+			},
+		}));
+	}, []);
+
+	const handleRemoveDenylistHeader = useCallback((index: number) => {
+		setLocalConfig((prev) => ({
+			...prev,
+			header_filter_config: {
+				...prev.header_filter_config,
+				denylist: (prev.header_filter_config?.denylist || []).filter((_, i) => i !== index),
+			},
+		}));
+	}, []);
+
+	const handleDenylistChange = useCallback((index: number, value: string) => {
+		const lowerValue = value.toLowerCase();
+		setLocalConfig((prev) => ({
+			...prev,
+			header_filter_config: {
+				...prev.header_filter_config,
+				denylist: (prev.header_filter_config?.denylist || []).map((h, i) => (i === index ? lowerValue : h)),
+			},
+		}));
+	}, []);
+
+	return (
+		<div className="mx-auto w-full max-w-4xl space-y-6">
+			<div>
+				<h2 className="text-lg font-semibold tracking-tight">Client Settings</h2>
+				<p className="text-muted-foreground text-sm">Configure client behavior and request handling.</p>
+			</div>
+
+			<div className="space-y-4">
+				{/* Drop Excess Requests */}
+				<div className="flex items-center justify-between space-x-2">
+					<div className="space-y-0.5">
+						<label htmlFor="drop-excess-requests" className="text-sm font-medium">
+							Drop Excess Requests
+						</label>
+						<p className="text-muted-foreground text-sm">
+							If enabled, Bifrost will drop requests that exceed pool capacity.{" "}
+							{localConfig.drop_excess_requests && droppedRequests > 0 ? (
+								<span>
+									Have dropped <b>{droppedRequests} requests</b> since last restart.
+								</span>
+							) : (
+								<></>
+							)}
+						</p>
+					</div>
+					<Switch
+						id="drop-excess-requests"
+						size="md"
+						checked={localConfig.drop_excess_requests}
+						onCheckedChange={(checked) => handleConfigChange("drop_excess_requests", checked)}
+						disabled={!hasSettingsUpdateAccess}
+					/>
+				</div>
+
+				{/* Disable DB Pings in Health */}
+				<div className="flex items-center justify-between space-x-2">
+					<div className="space-y-0.5">
+						<label htmlFor="disable-db-pings-in-health" className="text-sm font-medium">
+							Disable DB Pings in Health Check
+						</label>
+						<p className="text-muted-foreground text-sm">
+							If enabled, the /health endpoint will skip database connectivity checks and return OK immediately.
+						</p>
+					</div>
+					<Switch
+						id="disable-db-pings-in-health"
+						size="md"
+						checked={localConfig.disable_db_pings_in_health}
+						onCheckedChange={(checked) => handleConfigChange("disable_db_pings_in_health", checked)}
+						disabled={!hasSettingsUpdateAccess}
+					/>
+				</div>
+				{/* Async Job Result TTL */}
+				<div className="flex items-center justify-between space-x-2">
+					<div className="space-y-0.5">
+						<label htmlFor="async-job-result-ttl" className="text-sm font-medium">
+							Async Job Result TTL (seconds)
+						</label>
+						<p className="text-muted-foreground text-sm">
+							Default time-to-live for async job results in seconds. Results are automatically cleaned up after expiry.
+						</p>
+					</div>
+					<Input
+						id="async-job-result-ttl"
+						type="number"
+						min={1}
+						className="w-32"
+						value={localConfig.async_job_result_ttl}
+						onChange={(e) => handleConfigChange("async_job_result_ttl", parseInt(e.target.value) || 0)}
+						disabled={!hasSettingsUpdateAccess}
+						data-testid="client-settings-async-job-result-ttl-input"
+					/>
+				</div>
+			</div>
+
+			{/* Header Filter Section */}
+			<div className="space-y-4">
+				<div>
+					<h3 className="text-lg font-semibold tracking-tight">Header Forwarding</h3>
+					<p className="text-muted-foreground text-sm">Control which extra headers are forwarded to LLM providers.</p>
+				</div>
+
+				<Accordion type="multiple" className="w-full rounded-sm border px-4">
+					<AccordionItem value="about-extra-headers">
+						<AccordionTrigger>
+							<span className="flex items-center gap-2">
+								<Info className="h-4 w-4" />
+								About Header Forwarding
+							</span>
+						</AccordionTrigger>
+						<AccordionContent className="space-y-3">
+							<div>
+								<p className="mb-2 font-medium">Two ways to forward headers:</p>
+								<ul className="text-muted-foreground list-inside list-disc space-y-1 text-sm">
+									<li>
+										<span className="font-medium">Prefixed headers:</span> Use{" "}
+										<code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">x-bf-eh-*</code> prefix. For example,{" "}
+										<code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">x-bf-eh-custom-id</code> is forwarded as{" "}
+										<code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">custom-id</code>.
+									</li>
+									<li>
+										<span className="font-medium">Direct headers:</span> Any header explicitly added to the allowlist can be forwarded
+										directly without the prefix (e.g.,{" "}
+										<code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">anthropic-beta</code>).
+									</li>
+								</ul>
+							</div>
+							<div>
+								<p className="mb-2 font-medium">How allowlist and denylist work:</p>
+								<ul className="text-muted-foreground list-inside list-disc space-y-1 text-sm">
+									<li>
+										<span className="font-medium">Allowlist empty:</span> Only{" "}
+										<code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">x-bf-eh-*</code> prefixed headers are forwarded
+										(default behavior)
+									</li>
+									<li>
+										<span className="font-medium">Allowlist configured:</span> Prefixed headers filtered by allowlist, plus any direct
+										header in the allowlist is forwarded
+									</li>
+									<li>
+										<span className="font-medium">Denylist:</span> Headers in the denylist are always blocked from forwarding
+									</li>
+									<li>
+										<span className="font-medium">Wildcards:</span> Use{" "}
+										<code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">*</code> at the end of a pattern to match prefixes
+										(e.g., <code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">anthropic-*</code> matches all headers starting
+										with <code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">anthropic-</code>). Use{" "}
+										<code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">*</code> alone to match all headers.
+									</li>
+								</ul>
+							</div>
+							<div>
+								<p className="mb-2 font-medium">Important:</p>
+								<ul className="text-muted-foreground list-inside list-disc space-y-1 text-sm">
+									<li>
+										Allowlist/denylist entries should be the header name <span className="font-medium">without</span> the{" "}
+										<code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">x-bf-eh-</code> prefix
+									</li>
+									<li>
+										Example: To allow <code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">x-bf-eh-custom-id</code> or direct{" "}
+										<code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">custom-id</code>, add{" "}
+										<code className="bg-muted rounded px-1 py-0.5 font-mono text-xs">custom-id</code> to the allowlist
+									</li>
+								</ul>
+							</div>
+						</AccordionContent>
+					</AccordionItem>
+
+					<AccordionItem value="security-note">
+						<AccordionTrigger>
+							<span className="flex items-center gap-2">
+								<Info className="h-4 w-4" />
+								Security Note
+							</span>
+						</AccordionTrigger>
+						<AccordionContent>
+							<p className="text-sm">
+								Some headers are always blocked for security reasons regardless of configuration. These headers cannot be added to the
+								allowlist or denylist:
+							</p>
+							<p className="text-muted-foreground mt-1 font-mono text-xs">
+								proxy-authorization, cookie, host, content-length, connection, transfer-encoding, x-api-key, x-goog-api-key, x-bf-api-key,
+								x-bf-vk
+							</p>
+						</AccordionContent>
+					</AccordionItem>
+				</Accordion>
+
+				{/* Allowlist Section */}
+				<div className="space-y-3">
+					<div className="space-y-1">
+						<h4 className="text-sm font-medium">Allowlist</h4>
+						<p className="text-muted-foreground text-xs">
+							Headers to allow. Enter names without the <code className="bg-muted rounded px-1 font-mono">x-bf-eh-</code> prefix. Any header
+							in this list can also be sent directly without the prefix.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						{(localConfig.header_filter_config?.allowlist || []).map((header, index) => (
+							<div key={index} className="flex items-center gap-2">
+								<Input
+									placeholder="e.g. anthropic-*, custom-id"
+									data-testid="header-filter-allowlist-input"
+									className={cn(
+										"font-mono lowercase",
+										isSecurityHeader(header) &&
+											"border-destructive focus:border-destructive focus-visible:border-destructive focus-visible:ring-destructive/50",
+									)}
+									value={header}
+									onChange={(e) => handleAllowlistChange(index, e.target.value)}
+									disabled={!hasSettingsUpdateAccess}
+								/>
+								<Button
+									type="button"
+									variant="ghost"
+									size="icon"
+									onClick={() => handleRemoveAllowlistHeader(index)}
+									className="text-muted-foreground hover:text-destructive"
+									disabled={!hasSettingsUpdateAccess}
+								>
+									<X className="h-4 w-4" />
+								</Button>
+							</div>
+						))}
+						<Button type="button" variant="outline" size="sm" onClick={handleAddAllowlistHeader} disabled={!hasSettingsUpdateAccess}>
+							<Plus className="mr-2 h-4 w-4" />
+							Add Header
+						</Button>
+					</div>
+				</div>
+
+				{/* Denylist Section */}
+				<div className="space-y-3">
+					<div className="space-y-1">
+						<h4 className="text-sm font-medium">Denylist</h4>
+						<p className="text-muted-foreground text-xs">
+							Headers to block. Enter names without the <code className="bg-muted rounded px-1 font-mono">x-bf-eh-</code> prefix. Applies to
+							both prefixed and direct header forwarding.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						{(localConfig.header_filter_config?.denylist || []).map((header, index) => (
+							<div key={index} className="flex items-center gap-2">
+								<Input
+									placeholder="e.g. x-internal-*"
+									data-testid="header-filter-denylist-input"
+									className={cn(
+										"font-mono lowercase",
+										isSecurityHeader(header) &&
+											"border-destructive focus:border-destructive focus-visible:border-destructive focus-visible:ring-destructive/50",
+									)}
+									value={header}
+									onChange={(e) => handleDenylistChange(index, e.target.value)}
+									disabled={!hasSettingsUpdateAccess}
+								/>
+								<Button
+									type="button"
+									variant="ghost"
+									size="icon"
+									onClick={() => handleRemoveDenylistHeader(index)}
+									className="text-muted-foreground hover:text-destructive"
+									disabled={!hasSettingsUpdateAccess}
+								>
+									<X className="h-4 w-4" />
+								</Button>
+							</div>
+						))}
+						<Button type="button" variant="outline" size="sm" onClick={handleAddDenylistHeader} disabled={!hasSettingsUpdateAccess}>
+							<Plus className="mr-2 h-4 w-4" />
+							Add Header
+						</Button>
+					</div>
+				</div>
+			</div>
+
+			{/* Large Payload Optimization - Enterprise only */}
+			<LargePayloadSettingsFragment
+				config={localLargePayloadConfig}
+				onConfigChange={handleLargePayloadConfigChange}
+				controlsDisabled={isLoading || !hasSettingsUpdateAccess}
+			/>
+
+			<div className="flex justify-end pt-2">
+				{hasSecurityHeaderError ? (
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<span>
+								<Button disabled>{isLoading ? "Saving..." : "Save Changes"}</Button>
+							</span>
+						</TooltipTrigger>
+						<TooltipContent>
+							Remove security header{invalidSecurityHeaders.length > 1 ? "s" : ""}: {invalidSecurityHeaders.join(", ")}
+						</TooltipContent>
+					</Tooltip>
+				) : (
+					<Button onClick={handleSave} disabled={!hasChanges || isLoading || isQueriesLoading || !hasSettingsUpdateAccess}>
+						{isLoading ? "Saving..." : "Save Changes"}
+					</Button>
+				)}
+			</div>
+		</div>
+	);
+}

ui/app/workspace/config/views/compatibilityView.tsx

@@ -0,0 +1,155 @@
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { getErrorMessage, useGetCoreConfigQuery, useUpdateCoreConfigMutation } from "@/lib/store";
+import { CompatConfig, DefaultCoreConfig } from "@/lib/types/config";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+export default function CompatibilityView() {
+	const hasSettingsUpdateAccess = useRbac(RbacResource.Settings, RbacOperation.Update);
+	const { data: bifrostConfig } = useGetCoreConfigQuery({ fromDB: true });
+	const config = bifrostConfig?.client_config?.compat;
+	const [updateCoreConfig, { isLoading }] = useUpdateCoreConfigMutation();
+	const [localCompatConfig, setLocalCompatConfig] = useState<CompatConfig>(DefaultCoreConfig.compat);
+
+	useEffect(() => {
+		if (config) {
+			setLocalCompatConfig(config);
+			return;
+		}
+		setLocalCompatConfig(DefaultCoreConfig.compat);
+	}, [config]);
+
+	const hasChanges = useMemo(() => {
+		const baseline = config ?? DefaultCoreConfig.compat;
+		return (
+			localCompatConfig.convert_text_to_chat !== baseline.convert_text_to_chat ||
+			localCompatConfig.convert_chat_to_responses !== baseline.convert_chat_to_responses ||
+			localCompatConfig.should_drop_params !== baseline.should_drop_params ||
+			localCompatConfig.should_convert_params !== baseline.should_convert_params
+		);
+	}, [config, localCompatConfig]);
+
+	const handleCompatChange = useCallback((field: keyof CompatConfig, value: boolean) => {
+		setLocalCompatConfig((prev) => ({ ...prev, [field]: value }));
+	}, []);
+
+	const handleSave = useCallback(async () => {
+		if (!bifrostConfig) {
+			toast.error("Configuration not loaded");
+			return;
+		}
+
+		try {
+			await updateCoreConfig({
+				...bifrostConfig,
+				client_config: {
+					...(bifrostConfig.client_config ?? DefaultCoreConfig),
+					compat: localCompatConfig,
+				},
+			}).unwrap();
+			toast.success("Compatibility settings updated successfully.");
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	}, [bifrostConfig, localCompatConfig, updateCoreConfig]);
+
+	return (
+		<div className="mx-auto w-full max-w-4xl space-y-6">
+			<div>
+				<h2 className="text-lg font-semibold tracking-tight">Compatibility</h2>
+				<p className="text-muted-foreground text-sm">
+					Configure request conversions and compatibility fallbacks.{" "}
+					<a
+						className="text-primary underline"
+						href="https://docs.getbifrost.ai/features/litellm-compat"
+						target="_blank"
+						rel="noopener noreferrer"
+						data-testid="litellm-docs-link"
+					>
+						Learn more
+					</a>
+				</p>
+			</div>
+
+			<div className="space-y-4">
+				<div className="flex items-center justify-between space-x-2">
+					<div className="space-y-0.5">
+						<label htmlFor="compat-convert-text-to-chat" className="text-sm font-medium">
+							Convert Text to Chat
+						</label>
+						<p className="text-muted-foreground text-sm">Convert text completion requests to chat for models that only support chat.</p>
+					</div>
+					<Switch
+						id="compat-convert-text-to-chat"
+						data-testid="compat-convert-text-to-chat"
+						size="md"
+						checked={localCompatConfig.convert_text_to_chat}
+						onCheckedChange={(checked) => handleCompatChange("convert_text_to_chat", checked)}
+						disabled={!hasSettingsUpdateAccess}
+					/>
+				</div>
+
+				<div className="flex items-center justify-between space-x-2">
+					<div className="space-y-0.5">
+						<label htmlFor="compat-convert-chat-to-responses" className="text-sm font-medium">
+							Convert Chat to Responses
+						</label>
+						<p className="text-muted-foreground text-sm">
+							Convert chat completion requests to responses for models that only support responses.
+						</p>
+					</div>
+					<Switch
+						id="compat-convert-chat-to-responses"
+						data-testid="compat-convert-chat-to-responses"
+						size="md"
+						checked={localCompatConfig.convert_chat_to_responses}
+						onCheckedChange={(checked) => handleCompatChange("convert_chat_to_responses", checked)}
+						disabled={!hasSettingsUpdateAccess}
+					/>
+				</div>
+
+				<div className="flex items-center justify-between space-x-2">
+					<div className="space-y-0.5">
+						<label htmlFor="compat-should-drop-params" className="text-sm font-medium">
+							Drop Unsupported Params
+						</label>
+						<p className="text-muted-foreground text-sm">Drop unsupported parameters based on model catalog allowlist.</p>
+					</div>
+					<Switch
+						id="compat-should-drop-params"
+						data-testid="compat-should-drop-params"
+						size="md"
+						checked={localCompatConfig.should_drop_params}
+						onCheckedChange={(checked) => handleCompatChange("should_drop_params", checked)}
+						disabled={!hasSettingsUpdateAccess}
+					/>
+				</div>
+
+				<div className="flex items-center justify-between space-x-2">
+					<div className="space-y-0.5">
+						<label htmlFor="compat-should-convert-params" className="text-sm font-medium">
+							Convert Unsupported Parameter Values
+						</label>
+						<p className="text-muted-foreground text-sm">Converts model parameter values that are not supported by the model.</p>
+					</div>
+					<Switch
+						id="compat-should-convert-params"
+						data-testid="compat-should-convert-params"
+						size="md"
+						checked={localCompatConfig.should_convert_params}
+						onCheckedChange={(checked) => handleCompatChange("should_convert_params", checked)}
+						disabled={!hasSettingsUpdateAccess}
+					/>
+				</div>
+			</div>
+
+			<div className="flex justify-end pt-2">
+				<Button onClick={handleSave} disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess} data-testid="compat-save-button">
+					{isLoading ? "Saving..." : "Save Changes"}
+				</Button>
+			</div>
+		</div>
+	);
+}

ui/app/workspace/config/views/loggingView.tsx

@@ -0,0 +1,210 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { getErrorMessage, useGetCoreConfigQuery, useUpdateCoreConfigMutation } from "@/lib/store";
+import { CoreConfig, DefaultCoreConfig } from "@/lib/types/config";
+import { parseArrayFromText } from "@/lib/utils/array";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+export default function LoggingView() {
+	const hasSettingsUpdateAccess = useRbac(RbacResource.Settings, RbacOperation.Update);
+	const { data: bifrostConfig } = useGetCoreConfigQuery({ fromDB: true });
+	const config = bifrostConfig?.client_config;
+	const [updateCoreConfig, { isLoading }] = useUpdateCoreConfigMutation();
+	const [localConfig, setLocalConfig] = useState<CoreConfig>(DefaultCoreConfig);
+	const [needsRestart, setNeedsRestart] = useState<boolean>(false);
+	const [loggingHeadersText, setLoggingHeadersText] = useState<string>("");
+
+	useEffect(() => {
+		if (config) {
+			setLocalConfig(config);
+			setLoggingHeadersText(config.logging_headers?.join(", ") || "");
+		}
+	}, [config]);
+
+	const hasChanges = useMemo(() => {
+		if (!config) return false;
+		return (
+			localConfig.enable_logging !== config.enable_logging ||
+			localConfig.disable_content_logging !== config.disable_content_logging ||
+			localConfig.log_retention_days !== config.log_retention_days ||
+			localConfig.hide_deleted_virtual_keys_in_filters !== config.hide_deleted_virtual_keys_in_filters ||
+			JSON.stringify(localConfig.logging_headers || []) !== JSON.stringify(config.logging_headers || [])
+		);
+	}, [config, localConfig]);
+
+	const handleConfigChange = useCallback((field: keyof CoreConfig, value: boolean | number | string[]) => {
+		setLocalConfig((prev) => ({ ...prev, [field]: value }));
+		if (field === "enable_logging" || field === "disable_content_logging") {
+			setNeedsRestart(true);
+		}
+	}, []);
+
+	const handleLoggingHeadersChange = useCallback((value: string) => {
+		setLoggingHeadersText(value);
+		setLocalConfig((prev) => ({ ...prev, logging_headers: parseArrayFromText(value) }));
+	}, []);
+
+	const handleSave = useCallback(async () => {
+		if (!bifrostConfig) {
+			toast.error("Configuration not loaded");
+			return;
+		}
+
+		// Validate log retention days
+		if (localConfig.log_retention_days < 1) {
+			toast.error("Log retention days must be at least 1 day");
+			return;
+		}
+
+		try {
+			await updateCoreConfig({ ...bifrostConfig, client_config: localConfig }).unwrap();
+			toast.success("Logging configuration updated successfully.");
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	}, [bifrostConfig, localConfig, updateCoreConfig]);
+
+	return (
+		<div className="mx-auto w-full max-w-4xl space-y-4">
+			<div>
+				<h2 className="text-lg font-semibold tracking-tight">Logs Settings</h2>
+				<p className="text-muted-foreground text-sm">Configure logging settings for requests and responses.</p>
+			</div>
+
+			<div className="space-y-4">
+				{/* Enable Logs */}
+				<div>
+					<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+						<div className="space-y-0.5">
+							<label htmlFor="enable-logging" className="text-sm font-medium">
+								Enable Logs
+							</label>
+							<p className="text-muted-foreground text-sm">
+								Enable logging of requests and responses to a SQL database. This can add 40-60mb of overhead to the system memory.
+								{!bifrostConfig?.is_logs_connected && (
+									<span className="text-destructive font-medium"> Requires logs store to be configured and enabled in config.json.</span>
+								)}
+							</p>
+						</div>
+						<Switch
+							id="enable-logging"
+							size="md"
+							checked={localConfig.enable_logging && bifrostConfig?.is_logs_connected}
+							disabled={!bifrostConfig?.is_logs_connected}
+							onCheckedChange={(checked) => {
+								if (bifrostConfig?.is_logs_connected) {
+									handleConfigChange("enable_logging", checked);
+								}
+							}}
+						/>
+					</div>
+					{needsRestart && <RestartWarning />}
+				</div>
+
+				{/* Disable Content Logging - Only show when logging is enabled */}
+				{localConfig.enable_logging && bifrostConfig?.is_logs_connected && (
+					<div>
+						<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+							<div className="space-y-0.5">
+								<label htmlFor="disable-content-logging" className="text-sm font-medium">
+									Disable Content Logging
+								</label>
+								<p className="text-muted-foreground text-sm">
+									When enabled, only usage metadata (latency, cost, token count, etc.) will be logged. Request/response content will not be
+									stored.
+								</p>
+							</div>
+							<Switch
+								id="disable-content-logging"
+								size="md"
+								checked={localConfig.disable_content_logging}
+								onCheckedChange={(checked) => handleConfigChange("disable_content_logging", checked)}
+							/>
+						</div>
+						{needsRestart && <RestartWarning />}
+					</div>
+				)}
+
+				{/* Log Retention Days */}
+				{localConfig.enable_logging && bifrostConfig?.is_logs_connected && (
+					<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+						<div className="space-y-0.5">
+							<Label htmlFor="log-retention-days" className="text-sm font-medium">
+								Log Retention Days
+							</Label>
+							<p className="text-muted-foreground text-sm">
+								Number of days to retain logs in the database. Minimum is 1 day. Older logs will be automatically deleted.
+							</p>
+						</div>
+						<Input
+							id="log-retention-days"
+							type="number"
+							min="1"
+							value={localConfig.log_retention_days}
+							onChange={(e) => {
+								const value = parseInt(e.target.value) || 1;
+								handleConfigChange("log_retention_days", Math.max(1, value));
+							}}
+							className="w-24"
+						/>
+					</div>
+				)}
+
+				<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+					<div className="space-y-0.5">
+						<label htmlFor="hide-deleted-virtual-keys-in-filters" className="text-sm font-medium">
+							Do Not Show Deleted VirtualKeys In Filters
+						</label>
+						<p className="text-muted-foreground text-sm">
+							When enabled, deleted virtual keys are excluded from Virtual Keys filter options in Logs, Dashboard, and MCP Logs.
+						</p>
+					</div>
+					<Switch
+						id="hide-deleted-virtual-keys-in-filters"
+						data-testid="hide-deleted-virtual-keys-in-filters-switch"
+						size="md"
+						checked={localConfig.hide_deleted_virtual_keys_in_filters}
+						onCheckedChange={(checked) => handleConfigChange("hide_deleted_virtual_keys_in_filters", checked)}
+					/>
+				</div>
+
+				{/* Logging Headers */}
+				{localConfig.enable_logging && bifrostConfig?.is_logs_connected && (
+					<div className="space-y-2 rounded-lg border p-4">
+						<label htmlFor="logging-headers" className="text-sm font-medium">
+							Logging Headers
+						</label>
+						<p className="text-muted-foreground text-sm">
+							Comma-separated list of request headers to capture in log metadata. Values are extracted from incoming requests and stored in
+							the metadata field of log entries. Headers with the <code className="text-xs">x-bf-lh-</code> prefix are always captured
+							automatically.
+						</p>
+						<Textarea
+							id="logging-headers"
+							data-testid="workspace-logging-headers-textarea"
+							className="h-24"
+							placeholder="X-Tenant-ID, X-Request-Source, X-Correlation-ID"
+							value={loggingHeadersText}
+							onChange={(e) => handleLoggingHeadersChange(e.target.value)}
+						/>
+					</div>
+				)}
+			</div>
+
+			<div className="flex justify-end pt-2">
+				<Button onClick={handleSave} disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess}>
+					{isLoading ? "Saving..." : "Save Changes"}
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+const RestartWarning = () => {
+	return <div className="text-muted-foreground mt-2 pl-4 text-xs font-semibold">Need to restart Bifrost to apply changes.</div>;
+};

ui/app/workspace/config/views/mcpView.tsx

@@ -0,0 +1,334 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+  getErrorMessage,
+  useGetCoreConfigQuery,
+  useUpdateCoreConfigMutation,
+} from "@/lib/store";
+import { CoreConfig, DefaultCoreConfig } from "@/lib/types/config";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+export default function MCPView() {
+  const hasSettingsUpdateAccess = useRbac(
+    RbacResource.Settings,
+    RbacOperation.Update,
+  );
+  const { data: bifrostConfig } = useGetCoreConfigQuery({ fromDB: true });
+  const config = bifrostConfig?.client_config;
+  const [updateCoreConfig, { isLoading }] = useUpdateCoreConfigMutation();
+  const [localConfig, setLocalConfig] = useState<CoreConfig>(DefaultCoreConfig);
+
+  const [localValues, setLocalValues] = useState<{
+    mcp_agent_depth: string;
+    mcp_tool_execution_timeout: string;
+    mcp_code_mode_binding_level: string;
+    mcp_tool_sync_interval: string;
+  }>({
+    mcp_agent_depth: "10",
+    mcp_tool_execution_timeout: "30",
+    mcp_code_mode_binding_level: "server",
+    mcp_tool_sync_interval: "10",
+  });
+
+  useEffect(() => {
+    if (bifrostConfig && config) {
+      setLocalConfig(config);
+      setLocalValues({
+        mcp_agent_depth: config?.mcp_agent_depth?.toString() || "10",
+        mcp_tool_execution_timeout:
+          config?.mcp_tool_execution_timeout?.toString() || "30",
+        mcp_code_mode_binding_level:
+          config?.mcp_code_mode_binding_level || "server",
+        mcp_tool_sync_interval:
+          config?.mcp_tool_sync_interval?.toString() || "10",
+      });
+    }
+  }, [config, bifrostConfig]);
+
+  const hasChanges = useMemo(() => {
+    if (!config) return false;
+    return (
+      localConfig.mcp_agent_depth !== config.mcp_agent_depth ||
+      localConfig.mcp_tool_execution_timeout !==
+        config.mcp_tool_execution_timeout ||
+      localConfig.mcp_code_mode_binding_level !==
+        (config.mcp_code_mode_binding_level || "server") ||
+      localConfig.mcp_tool_sync_interval !==
+        (config.mcp_tool_sync_interval ?? 10) ||
+      localConfig.mcp_disable_auto_tool_inject !==
+        (config.mcp_disable_auto_tool_inject ?? false)
+    );
+  }, [config, localConfig]);
+
+  const handleAgentDepthChange = useCallback((value: string) => {
+    setLocalValues((prev) => ({ ...prev, mcp_agent_depth: value }));
+    const numValue = Number.parseInt(value);
+    if (!isNaN(numValue) && numValue > 0) {
+      setLocalConfig((prev) => ({ ...prev, mcp_agent_depth: numValue }));
+    }
+  }, []);
+
+  const handleToolExecutionTimeoutChange = useCallback((value: string) => {
+    setLocalValues((prev) => ({ ...prev, mcp_tool_execution_timeout: value }));
+    const numValue = Number.parseInt(value);
+    if (!isNaN(numValue) && numValue > 0) {
+      setLocalConfig((prev) => ({
+        ...prev,
+        mcp_tool_execution_timeout: numValue,
+      }));
+    }
+  }, []);
+
+  const handleCodeModeBindingLevelChange = useCallback((value: string) => {
+    setLocalValues((prev) => ({ ...prev, mcp_code_mode_binding_level: value }));
+    if (value === "server" || value === "tool") {
+      setLocalConfig((prev) => ({
+        ...prev,
+        mcp_code_mode_binding_level: value,
+      }));
+    }
+  }, []);
+
+  const handleToolSyncIntervalChange = useCallback((value: string) => {
+    setLocalValues((prev) => ({ ...prev, mcp_tool_sync_interval: value }));
+    const numValue = Number.parseInt(value);
+    if (!isNaN(numValue) && numValue >= 0) {
+      setLocalConfig((prev) => ({ ...prev, mcp_tool_sync_interval: numValue }));
+    }
+  }, []);
+
+  const handleDisableAutoToolInjectChange = useCallback((checked: boolean) => {
+    setLocalConfig((prev) => ({
+      ...prev,
+      mcp_disable_auto_tool_inject: checked,
+    }));
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    try {
+      const agentDepth = Number.parseInt(localValues.mcp_agent_depth);
+      const toolTimeout = Number.parseInt(
+        localValues.mcp_tool_execution_timeout,
+      );
+
+      if (isNaN(agentDepth) || agentDepth <= 0) {
+        toast.error("Max agent depth must be a positive number.");
+        return;
+      }
+
+      if (isNaN(toolTimeout) || toolTimeout <= 0) {
+        toast.error("Tool execution timeout must be a positive number.");
+        return;
+      }
+
+      if (!bifrostConfig) {
+        toast.error("Configuration not loaded. Please refresh and try again.");
+        return;
+      }
+      await updateCoreConfig({
+        ...bifrostConfig,
+        client_config: localConfig,
+      }).unwrap();
+      toast.success("MCP settings updated successfully.");
+    } catch (error) {
+      toast.error(getErrorMessage(error));
+    }
+  }, [bifrostConfig, localConfig, localValues, updateCoreConfig]);
+
+  return (
+    <div
+      className="mx-auto w-full max-w-7xl space-y-4"
+      data-testid="mcp-settings-view"
+    >
+      <div>
+        <h2 className="text-lg font-semibold tracking-tight">MCP Settings</h2>
+        <p className="text-muted-foreground text-sm">
+          Configure MCP (Model Context Protocol) agent and tool settings.
+        </p>
+      </div>
+      <div className="space-y-4">
+        {/* Max Agent Depth */}
+        <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
+            </label>
+            <p className="text-muted-foreground text-sm">
+              Maximum depth for MCP agent execution.
+            </p>
+          </div>
+          <Input
+            id="mcp-agent-depth"
+            data-testid="mcp-agent-depth-input"
+            type="number"
+            className="w-24"
+            value={localValues.mcp_agent_depth}
+            onChange={(e) => handleAgentDepthChange(e.target.value)}
+            min="1"
+          />
+        </div>
+
+        {/* Tool Execution Timeout */}
+        <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"
+              className="text-sm font-medium"
+            >
+              Tool Execution Timeout (seconds)
+            </label>
+            <p className="text-muted-foreground text-sm">
+              Maximum time in seconds for tool execution.
+            </p>
+          </div>
+          <Input
+            id="mcp-tool-execution-timeout"
+            data-testid="mcp-tool-timeout-input"
+            type="number"
+            className="w-24"
+            value={localValues.mcp_tool_execution_timeout}
+            onChange={(e) => handleToolExecutionTimeoutChange(e.target.value)}
+            min="1"
+          />
+        </div>
+
+        {/* Tool Sync Interval */}
+        <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"
+              className="text-sm font-medium"
+            >
+              Tool Sync Interval (minutes)
+            </label>
+            <p className="text-muted-foreground text-sm">
+              How often to refresh tool lists from MCP servers. Set to 0 to
+              disable.
+            </p>
+          </div>
+          <Input
+            id="mcp-tool-sync-interval"
+            data-testid="mcp-tool-sync-interval-input"
+            type="number"
+            className="w-24"
+            value={localValues.mcp_tool_sync_interval}
+            onChange={(e) => handleToolSyncIntervalChange(e.target.value)}
+            min="0"
+          />
+        </div>
+
+        {/* Disable Auto Tool Injection */}
+        <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"
+              className="text-sm font-medium"
+            >
+              Disable Auto Tool Injection
+            </label>
+            <p className="text-muted-foreground text-sm">
+              When enabled, MCP tools are not automatically included in every
+              request. Tools are only injected when explicitly specified via
+              request headers (
+              <code className="text-xs">x-bf-mcp-include-tools</code>) and still
+              must be allowed by the virtual key MCP configuration.
+            </p>
+          </div>
+          <Switch
+            id="mcp-disable-auto-tool-inject"
+            checked={localConfig.mcp_disable_auto_tool_inject ?? false}
+            onCheckedChange={handleDisableAutoToolInjectChange}
+            disabled={!hasSettingsUpdateAccess}
+            data-testid="mcp-disable-auto-tool-inject-switch"
+          />
+        </div>
+
+        {/* Code Mode Binding Level */}
+        <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
+            </label>
+            <p className="text-muted-foreground text-sm">
+              How tools are exposed in the VFS: server-level (all tools per
+              server) or tool-level (individual tools).
+            </p>
+          </div>
+          <Select
+            value={localValues.mcp_code_mode_binding_level}
+            onValueChange={handleCodeModeBindingLevelChange}
+          >
+            <SelectTrigger
+              id="mcp-binding-level"
+              data-testid="mcp-binding-level"
+              className="w-56"
+            >
+              <SelectValue placeholder="Select binding level" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="server">Server-Level</SelectItem>
+              <SelectItem value="tool">Tool-Level</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Visual Example */}
+          <div className="mt-6 space-y-2">
+            <p className="text-foreground text-xs font-semibold tracking-wide uppercase">
+              VFS Structure:
+            </p>
+
+            {localValues.mcp_code_mode_binding_level === "server" ? (
+              <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>
+                  <div className="pl-3">├─ youtube.py</div>
+                  <div className="pl-3">└─ weather.py</div>
+                </div>
+                <p className="text-muted-foreground mt-3 text-xs">
+                  All tools per server in a single .py file
+                </p>
+              </div>
+            ) : (
+              <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>
+                  <div className="pl-6">├─ add.py</div>
+                  <div className="pl-6">└─ subtract.py</div>
+                  <div className="pl-3">├─ youtube/</div>
+                  <div className="pl-6">├─ GET_CHANNELS.py</div>
+                  <div className="pl-6">└─ SEARCH_VIDEOS.py</div>
+                  <div className="pl-3">└─ weather/</div>
+                  <div className="pl-6">└─ get_forecast.py</div>
+                </div>
+                <p className="text-muted-foreground mt-3 text-xs">
+                  Individual .py file for each tool
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-end pt-2">
+        <Button
+          onClick={handleSave}
+          disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess}
+          data-testid="mcp-settings-save-btn"
+        >
+          {isLoading ? "Saving..." : "Save Changes"}
+        </Button>
+      </div>
+    </div>
+  );
+}

ui/app/workspace/config/views/modelSettingsView.tsx

@@ -0,0 +1,192 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { getErrorMessage, useForcePricingSyncMutation, useGetCoreConfigQuery, useUpdateCoreConfigMutation } from "@/lib/store";
+import { DefaultCoreConfig } from "@/lib/types/config";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+interface ModelSettingsFormData {
+	pricing_datasheet_url: string;
+	pricing_sync_interval_hours: number;
+	routing_chain_max_depth: number;
+}
+
+export default function ModelSettingsView() {
+	const hasSettingsUpdateAccess = useRbac(RbacResource.Settings, RbacOperation.Update);
+	const { data: bifrostConfig } = useGetCoreConfigQuery({ fromDB: true });
+	const frameworkConfig = bifrostConfig?.framework_config;
+	const clientConfig = bifrostConfig?.client_config;
+	const [updateCoreConfig, { isLoading }] = useUpdateCoreConfigMutation();
+	const [forcePricingSync, { isLoading: isForceSyncing }] = useForcePricingSyncMutation();
+
+	const {
+		register,
+		handleSubmit,
+		formState: { errors, isDirty },
+		reset,
+		watch,
+	} = useForm<ModelSettingsFormData>({
+		defaultValues: {
+			pricing_datasheet_url: "",
+			pricing_sync_interval_hours: 24,
+			routing_chain_max_depth: DefaultCoreConfig.routing_chain_max_depth,
+		},
+	});
+
+	const formValues = watch();
+
+	useEffect(() => {
+		if (!bifrostConfig || isDirty) return;
+		reset({
+			pricing_datasheet_url: frameworkConfig?.pricing_url || "",
+			pricing_sync_interval_hours: Math.round((frameworkConfig?.pricing_sync_interval ?? 0) / 3600) || 24,
+			routing_chain_max_depth: clientConfig?.routing_chain_max_depth ?? DefaultCoreConfig.routing_chain_max_depth,
+		});
+	}, [frameworkConfig?.pricing_url, frameworkConfig?.pricing_sync_interval, clientConfig?.routing_chain_max_depth, isDirty, reset]);
+
+	const hasChanges = useMemo(() => {
+		if (!bifrostConfig || !isDirty) return false;
+		const serverUrl = frameworkConfig?.pricing_url || "";
+		const serverInterval = Math.round((frameworkConfig?.pricing_sync_interval ?? 0) / 3600);
+		const serverDepth = clientConfig?.routing_chain_max_depth ?? DefaultCoreConfig.routing_chain_max_depth;
+		return (
+			formValues.pricing_datasheet_url !== serverUrl ||
+			formValues.pricing_sync_interval_hours !== serverInterval ||
+			formValues.routing_chain_max_depth !== serverDepth
+		);
+	}, [bifrostConfig, frameworkConfig, clientConfig, formValues, isDirty]);
+
+	const onSubmit = async (data: ModelSettingsFormData) => {
+		try {
+			await updateCoreConfig({
+				...bifrostConfig!,
+				framework_config: {
+					...frameworkConfig,
+					id: bifrostConfig?.framework_config.id || 0,
+					pricing_url: data.pricing_datasheet_url,
+					pricing_sync_interval: data.pricing_sync_interval_hours * 3600,
+				},
+				client_config: {
+					...clientConfig!,
+					routing_chain_max_depth: data.routing_chain_max_depth,
+				},
+			}).unwrap();
+			toast.success("Model settings updated successfully.");
+			reset(data);
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	};
+
+	const handleForceSync = async () => {
+		try {
+			await forcePricingSync().unwrap();
+			toast.success("Pricing sync triggered successfully.");
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	};
+
+	return (
+		<div className="mx-auto w-full max-w-7xl space-y-4" data-testid="model-settings-view">
+			<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+				<div>
+					<h2 className="text-lg font-semibold tracking-tight">Model Settings</h2>
+					<p className="text-muted-foreground text-sm">Configure pricing and routing behaviour.</p>
+				</div>
+
+				<div className="space-y-4">
+					{/* Pricing Datasheet URL */}
+					<div className="space-y-2 rounded-sm border p-4">
+						<div className="space-y-0.5">
+							<Label htmlFor="pricing-datasheet-url">Pricing Datasheet URL</Label>
+							<p className="text-muted-foreground text-sm">URL to a custom pricing datasheet. Leave empty to use default pricing.</p>
+						</div>
+						<Input
+							id="pricing-datasheet-url"
+							type="text"
+							placeholder="https://example.com/pricing.json"
+							data-testid="pricing-datasheet-url-input"
+							{...register("pricing_datasheet_url", {
+								pattern: {
+									value: /^(https?:\/\/)?((localhost|(\d{1,3}\.){3}\d{1,3})(:\d+)?|([\da-z\.-]+)\.([a-z\.]{2,6}))[\/\w \.-]*\/?$/,
+									message: "Please enter a valid URL.",
+								},
+								validate: {
+									checkIfHttp: (value) => {
+										if (!value) return true;
+										return value.startsWith("http://") || value.startsWith("https://") || "URL must start with http:// or https://";
+									},
+								},
+							})}
+							className={errors.pricing_datasheet_url ? "border-destructive" : ""}
+						/>
+						{errors.pricing_datasheet_url && <p className="text-destructive text-sm">{errors.pricing_datasheet_url.message}</p>}
+					</div>
+
+					{/* Pricing Sync Interval */}
+					<div className="space-y-2 rounded-sm border p-4">
+						<div className="space-y-0.5">
+							<Label htmlFor="pricing-sync-interval">Pricing Sync Interval (hours)</Label>
+							<p className="text-muted-foreground text-sm">How often to sync pricing data from the datasheet URL.</p>
+						</div>
+						<Input
+							id="pricing-sync-interval"
+							type="number"
+							data-testid="pricing-sync-interval-input"
+							className={errors.pricing_sync_interval_hours ? "border-destructive" : ""}
+							{...register("pricing_sync_interval_hours", {
+								required: "Pricing sync interval is required",
+								min: { value: 1, message: "Sync interval must be at least 1 hour" },
+								max: { value: 8760, message: "Sync interval cannot exceed 8760 hours (1 year)" },
+								valueAsNumber: true,
+							})}
+						/>
+						{errors.pricing_sync_interval_hours && <p className="text-destructive text-sm">{errors.pricing_sync_interval_hours.message}</p>}
+					</div>
+
+					{/* Routing Chain Max Depth */}
+					<div className="flex items-center justify-between rounded-sm border p-4">
+						<div className="space-y-0.5">
+							<Label htmlFor="routing-chain-max-depth">Routing Chain Max Depth</Label>
+							<p className="text-muted-foreground text-sm">
+								Maximum number of chained routing rule evaluations per request. Prevents infinite loops from circular rule definitions.
+							</p>
+						</div>
+						<Input
+							id="routing-chain-max-depth"
+							type="number"
+							className={`w-24 ${errors.routing_chain_max_depth ? "border-destructive" : ""}`}
+							data-testid="routing-chain-max-depth-input"
+							{...register("routing_chain_max_depth", {
+								required: "Routing chain max depth is required",
+								min: { value: 1, message: "Must be at least 1" },
+								max: { value: 100, message: "Cannot exceed 100" },
+								valueAsNumber: true,
+							})}
+						/>
+					</div>
+					{errors.routing_chain_max_depth && <p className="text-destructive text-sm">{errors.routing_chain_max_depth.message}</p>}
+				</div>
+
+				<div className="flex justify-end gap-2 pt-2">
+					<Button
+						variant="outline"
+						type="button"
+						onClick={handleForceSync}
+						disabled={isForceSyncing || isLoading || hasChanges || !hasSettingsUpdateAccess}
+						data-testid="pricing-force-sync-btn"
+					>
+						{isForceSyncing ? "Syncing..." : "Force Sync Now"}
+					</Button>
+					<Button type="submit" disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess} data-testid="model-settings-save-btn">
+						{isLoading ? "Saving..." : "Save Changes"}
+					</Button>
+				</div>
+			</form>
+		</div>
+	);
+}

ui/app/workspace/config/views/observabilityView.tsx

@@ -0,0 +1,105 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { getErrorMessage, useGetCoreConfigQuery, useUpdateCoreConfigMutation } from "@/lib/store";
+import { CoreConfig, DefaultCoreConfig } from "@/lib/types/config";
+import { parseArrayFromText } from "@/lib/utils/array";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { AlertTriangle } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+export default function ObservabilityView() {
+	const hasSettingsUpdateAccess = useRbac(RbacResource.Settings, RbacOperation.Update);
+	const { data: bifrostConfig } = useGetCoreConfigQuery({ fromDB: true });
+	const config = bifrostConfig?.client_config;
+	const [updateCoreConfig, { isLoading }] = useUpdateCoreConfigMutation();
+	const [localConfig, setLocalConfig] = useState<CoreConfig>(DefaultCoreConfig);
+	const [needsRestart, setNeedsRestart] = useState<boolean>(false);
+
+	const [localValues, setLocalValues] = useState<{
+		prometheus_labels: string;
+	}>({
+		prometheus_labels: "",
+	});
+
+	useEffect(() => {
+		if (bifrostConfig && config) {
+			setLocalConfig(config);
+			setLocalValues({
+				prometheus_labels: config?.prometheus_labels?.join(", ") || "",
+			});
+		}
+	}, [config, bifrostConfig]);
+
+	const hasChanges = useMemo(() => {
+		if (!config) return false;
+		const localLabels = localConfig.prometheus_labels.slice().sort().join(",");
+		const serverLabels = config.prometheus_labels.slice().sort().join(",");
+		return localLabels !== serverLabels;
+	}, [config, localConfig]);
+
+	const handlePrometheusLabelsChange = useCallback((value: string) => {
+		setLocalValues((prev) => ({ ...prev, prometheus_labels: value }));
+		setLocalConfig((prev) => ({ ...prev, prometheus_labels: parseArrayFromText(value) }));
+		setNeedsRestart(true);
+	}, []);
+
+	const handleSave = useCallback(async () => {
+		if (!bifrostConfig) {
+			toast.error("Could not save settings: configuration not loaded.");
+			return;
+		}
+		try {
+			await updateCoreConfig({ ...bifrostConfig, client_config: localConfig }).unwrap();
+			toast.success("Observability settings updated successfully.");
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	}, [bifrostConfig, localConfig, updateCoreConfig]);
+
+	return (
+		<div className="mx-auto w-full max-w-4xl space-y-4">
+			<div className="flex items-center justify-between"></div>
+
+			<Alert variant="destructive">
+				<AlertTriangle className="h-4 w-4" />
+				<AlertDescription>
+					These settings require a Bifrost service restart to take effect. Current connections will continue with existing settings until
+					restart.
+				</AlertDescription>
+			</Alert>
+
+			<div className="space-y-4">
+				{/* Prometheus Labels */}
+				<div>
+					<div className="space-y-2 rounded-lg border p-4">
+						<div className="space-y-0.5">
+							<label htmlFor="prometheus-labels" className="text-sm font-medium">
+								Prometheus Labels
+							</label>
+							<p className="text-muted-foreground text-sm">Comma-separated list of custom labels to add to the Prometheus metrics.</p>
+						</div>
+						<Textarea
+							id="prometheus-labels"
+							className="h-24"
+							placeholder="teamId, projectId, environment"
+							value={localValues.prometheus_labels}
+							onChange={(e) => handlePrometheusLabelsChange(e.target.value)}
+						/>
+					</div>
+					{needsRestart && <RestartWarning />}
+				</div>
+			</div>
+			<div className="flex justify-end pt-2">
+				<Button onClick={handleSave} disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess}>
+					{isLoading ? "Saving..." : "Save Changes"}
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+const RestartWarning = () => {
+	return <div className="text-muted-foreground mt-2 pl-4 text-xs font-semibold">Need to restart Bifrost to apply changes.</div>;
+};

ui/app/workspace/config/views/performanceTuningView.tsx

@@ -0,0 +1,157 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { getErrorMessage, useGetCoreConfigQuery, useUpdateCoreConfigMutation } from "@/lib/store";
+import { CoreConfig, DefaultCoreConfig } from "@/lib/types/config";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { AlertTriangle } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+export default function PerformanceTuningView() {
+	const hasSettingsUpdateAccess = useRbac(RbacResource.Settings, RbacOperation.Update);
+	const { data: bifrostConfig } = useGetCoreConfigQuery({ fromDB: true });
+	const config = bifrostConfig?.client_config;
+	const [updateCoreConfig, { isLoading }] = useUpdateCoreConfigMutation();
+	const [localConfig, setLocalConfig] = useState<CoreConfig>(DefaultCoreConfig);
+	const [needsRestart, setNeedsRestart] = useState<boolean>(false);
+
+	const [localValues, setLocalValues] = useState<{
+		initial_pool_size: string;
+		max_request_body_size_mb: string;
+	}>({
+		initial_pool_size: "1000",
+		max_request_body_size_mb: "100",
+	});
+
+	useEffect(() => {
+		if (bifrostConfig && config) {
+			setLocalConfig(config);
+			setLocalValues({
+				initial_pool_size: config?.initial_pool_size?.toString() || "1000",
+				max_request_body_size_mb: config?.max_request_body_size_mb?.toString() || "100",
+			});
+		}
+	}, [config, bifrostConfig]);
+
+	const hasChanges = useMemo(() => {
+		if (!config) return false;
+		return (
+			localConfig.initial_pool_size !== config.initial_pool_size || localConfig.max_request_body_size_mb !== config.max_request_body_size_mb
+		);
+	}, [config, localConfig]);
+
+	const handlePoolSizeChange = useCallback((value: string) => {
+		setLocalValues((prev) => ({ ...prev, initial_pool_size: value }));
+		const numValue = Number.parseInt(value);
+		if (!isNaN(numValue) && numValue > 0) {
+			setLocalConfig((prev) => ({ ...prev, initial_pool_size: numValue }));
+		}
+		setNeedsRestart(true);
+	}, []);
+
+	const handleMaxRequestBodySizeMBChange = useCallback((value: string) => {
+		setLocalValues((prev) => ({ ...prev, max_request_body_size_mb: value }));
+		const numValue = Number.parseInt(value);
+		if (!isNaN(numValue) && numValue > 0) {
+			setLocalConfig((prev) => ({ ...prev, max_request_body_size_mb: numValue }));
+		}
+		setNeedsRestart(true);
+	}, []);
+
+	const handleSave = useCallback(async () => {
+		try {
+			const poolSize = Number.parseInt(localValues.initial_pool_size);
+			const maxBodySize = Number.parseInt(localValues.max_request_body_size_mb);
+
+			if (isNaN(poolSize) || poolSize <= 0) {
+				toast.error("Initial pool size must be a positive number.");
+				return;
+			}
+
+			if (isNaN(maxBodySize) || maxBodySize <= 0) {
+				toast.error("Max request body size must be a positive number.");
+				return;
+			}
+
+			if (!bifrostConfig) {
+				toast.error("Configuration not loaded. Please refresh and try again.");
+				return;
+			}
+			await updateCoreConfig({ ...bifrostConfig, client_config: localConfig }).unwrap();
+			toast.success("Performance settings updated successfully.");
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	}, [bifrostConfig, localConfig, localValues, updateCoreConfig]);
+
+	return (
+		<div className="mx-auto w-full max-w-4xl space-y-4">
+			<div>
+				<h2 className="text-lg font-semibold tracking-tight">Performance Tuning</h2>
+				<p className="text-muted-foreground text-sm">Configure performance-related settings.</p>
+			</div>
+
+			<Alert variant="destructive">
+				<AlertTriangle className="h-4 w-4" />
+				<AlertDescription>
+					These settings require a Bifrost service restart to take effect. Current connections will continue with existing settings until
+					restart.
+				</AlertDescription>
+			</Alert>
+
+			<div className="space-y-4">
+				{/* Initial Pool Size */}
+				<div>
+					<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+						<div className="space-y-0.5">
+							<label htmlFor="initial-pool-size" className="text-sm font-medium">
+								Initial Pool Size
+							</label>
+							<p className="text-muted-foreground text-sm">The initial connection pool size.</p>
+						</div>
+						<Input
+							id="initial-pool-size"
+							type="number"
+							className="w-24"
+							value={localValues.initial_pool_size}
+							onChange={(e) => handlePoolSizeChange(e.target.value)}
+							min="1"
+						/>
+					</div>
+					{needsRestart && <RestartWarning />}
+				</div>
+
+				{/* Max Request Body Size */}
+				<div>
+					<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+						<div className="space-y-0.5">
+							<label htmlFor="max-request-body-size-mb" className="text-sm font-medium">
+								Max Request Body Size (MB)
+							</label>
+							<p className="text-muted-foreground text-sm">Maximum size of request body in megabytes.</p>
+						</div>
+						<Input
+							id="max-request-body-size-mb"
+							type="number"
+							className="w-24"
+							value={localValues.max_request_body_size_mb}
+							onChange={(e) => handleMaxRequestBodySizeMBChange(e.target.value)}
+							min="1"
+						/>
+					</div>
+					{needsRestart && <RestartWarning />}
+				</div>
+			</div>
+			<div className="flex justify-end pt-2">
+				<Button onClick={handleSave} disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess}>
+					{isLoading ? "Saving..." : "Save Changes"}
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+const RestartWarning = () => {
+	return <div className="text-muted-foreground mt-2 pl-4 text-xs font-semibold">Need to restart Bifrost to apply changes.</div>;
+};

ui/app/workspace/config/views/pluginsForm.tsx

@@ -0,0 +1,467 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { getProviderLabel } from "@/lib/constants/logs";
+import { getErrorMessage, useCreatePluginMutation, useGetPluginsQuery, useGetProvidersQuery, useUpdatePluginMutation } from "@/lib/store";
+import { CacheConfig, EditorCacheConfig, ModelProviderName } from "@/lib/types/config";
+import { SEMANTIC_CACHE_PLUGIN } from "@/lib/types/plugins";
+import { cacheConfigSchema } from "@/lib/types/schemas";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+const defaultCacheConfig: EditorCacheConfig = {
+	ttl_seconds: 300,
+	threshold: 0.8,
+	conversation_history_threshold: 3,
+	exclude_system_prompt: false,
+	cache_by_model: true,
+	cache_by_provider: true,
+};
+
+const toEditorCacheConfig = (config?: Partial<CacheConfig>): EditorCacheConfig => ({
+	...defaultCacheConfig,
+	...config,
+});
+
+const normalizeCacheConfigForSave = (config: EditorCacheConfig) => {
+	const normalized: Record<string, unknown> = {
+		ttl_seconds: config.ttl_seconds,
+		threshold: config.threshold,
+		cache_by_model: config.cache_by_model,
+		cache_by_provider: config.cache_by_provider,
+	};
+
+	if (config.conversation_history_threshold !== undefined) {
+		normalized.conversation_history_threshold = config.conversation_history_threshold;
+	}
+	if (config.exclude_system_prompt !== undefined) {
+		normalized.exclude_system_prompt = config.exclude_system_prompt;
+	}
+	if (config.created_at !== undefined) {
+		normalized.created_at = config.created_at;
+	}
+	if (config.updated_at !== undefined) {
+		normalized.updated_at = config.updated_at;
+	}
+	if (config.keys !== undefined) {
+		normalized.keys = config.keys;
+	}
+
+	const provider = config.provider?.trim();
+	const embeddingModel = config.embedding_model?.trim();
+
+	if (provider) {
+		normalized.provider = provider;
+	}
+	if (embeddingModel) {
+		normalized.embedding_model = embeddingModel;
+	}
+	if (config.dimension !== undefined) {
+		normalized.dimension = config.dimension;
+	}
+
+	return normalized;
+};
+
+interface PluginsFormProps {
+	isVectorStoreEnabled: boolean;
+}
+
+export default function PluginsForm({ isVectorStoreEnabled }: PluginsFormProps) {
+	const [cacheConfig, setCacheConfig] = useState<EditorCacheConfig>(defaultCacheConfig);
+	const [originalCacheEnabled, setOriginalCacheEnabled] = useState<boolean>(false);
+	const [serverCacheConfig, setServerCacheConfig] = useState<EditorCacheConfig>(defaultCacheConfig);
+	const [serverCacheEnabled, setServerCacheEnabled] = useState<boolean>(false);
+
+	const { data: providersData, error: providersError, isLoading: providersLoading } = useGetProvidersQuery();
+
+	const providers = useMemo(() => providersData || [], [providersData]);
+
+	useEffect(() => {
+		if (providersError) {
+			toast.error(`Failed to load providers: ${getErrorMessage(providersError as any)}`);
+		}
+	}, [providersError]);
+
+	// RTK Query hooks
+	const { data: plugins, isLoading: loading } = useGetPluginsQuery();
+	const [updatePlugin, { isLoading: isUpdating }] = useUpdatePluginMutation();
+	const [createPlugin, { isLoading: isCreating }] = useCreatePluginMutation();
+
+	// Get semantic cache plugin and its config
+	const semanticCachePlugin = useMemo(() => plugins?.find((plugin) => plugin.name === SEMANTIC_CACHE_PLUGIN), [plugins]);
+
+	const isSemanticCacheEnabled = Boolean(semanticCachePlugin?.enabled);
+	const loadedDirectOnlyConfig = serverCacheConfig.dimension === 1 && !serverCacheConfig.provider;
+	const hasInvalidProviderBackedDimension = cacheConfig.dimension === 1 && Boolean(cacheConfig.provider?.trim());
+
+	// Initialize cache config from plugin data
+	useEffect(() => {
+		if (semanticCachePlugin?.config) {
+			const config = toEditorCacheConfig(semanticCachePlugin.config as Partial<CacheConfig>);
+			setCacheConfig(config);
+			setServerCacheConfig(config);
+			setOriginalCacheEnabled(semanticCachePlugin.enabled);
+			setServerCacheEnabled(semanticCachePlugin.enabled);
+		}
+	}, [semanticCachePlugin]);
+
+	// Update default provider when providers are loaded (only for new configs)
+	useEffect(() => {
+		if (providers.length > 0 && !semanticCachePlugin?.config) {
+			setCacheConfig((prev) => ({
+				...prev,
+				provider: providers[0].name as ModelProviderName,
+				embedding_model: prev.embedding_model ?? "text-embedding-3-small",
+				dimension: prev.dimension ?? 1536,
+			}));
+		}
+	}, [providers, semanticCachePlugin?.config]);
+
+	const hasChanges = useMemo(() => {
+		if (originalCacheEnabled !== serverCacheEnabled) return true;
+
+		return (
+			cacheConfig.provider !== serverCacheConfig.provider ||
+			cacheConfig.embedding_model !== serverCacheConfig.embedding_model ||
+			cacheConfig.dimension !== serverCacheConfig.dimension ||
+			cacheConfig.ttl_seconds !== serverCacheConfig.ttl_seconds ||
+			cacheConfig.threshold !== serverCacheConfig.threshold ||
+			cacheConfig.conversation_history_threshold !== serverCacheConfig.conversation_history_threshold ||
+			cacheConfig.exclude_system_prompt !== serverCacheConfig.exclude_system_prompt ||
+			cacheConfig.cache_by_model !== serverCacheConfig.cache_by_model ||
+			cacheConfig.cache_by_provider !== serverCacheConfig.cache_by_provider
+		);
+	}, [cacheConfig, serverCacheConfig, originalCacheEnabled, serverCacheEnabled]);
+
+	// Handle semantic cache toggle (create or update)
+	const handleSemanticCacheToggle = (enabled: boolean) => {
+		setOriginalCacheEnabled(enabled);
+	};
+
+	// Update cache config locally
+	const updateCacheConfigLocal = (updates: Partial<EditorCacheConfig>) => {
+		setCacheConfig((prev) => ({ ...prev, ...updates }));
+	};
+
+	// Save all changes
+	const handleSave = async () => {
+		if (hasInvalidProviderBackedDimension) {
+			toast.error(
+				"Provider-backed semantic cache requires the embedding model's real dimension. Use a value greater than 1, or remove the provider to keep direct-only mode.",
+			);
+			return;
+		}
+
+		const parseResult = cacheConfigSchema.safeParse(normalizeCacheConfigForSave(cacheConfig));
+		if (!parseResult.success) {
+			const firstIssue = parseResult.error.issues[0]?.message ?? "Semantic cache configuration is invalid.";
+			toast.error(firstIssue);
+			return;
+		}
+
+		const savedConfig = parseResult.data as CacheConfig;
+
+		try {
+			if (semanticCachePlugin) {
+				// Update existing plugin
+				await updatePlugin({
+					name: SEMANTIC_CACHE_PLUGIN,
+					data: { enabled: originalCacheEnabled, config: savedConfig },
+				}).unwrap();
+			} else {
+				// Create new plugin
+				await createPlugin({
+					name: SEMANTIC_CACHE_PLUGIN,
+					enabled: originalCacheEnabled,
+					config: savedConfig,
+					path: "",
+				}).unwrap();
+			}
+			toast.success("Plugin configuration updated successfully");
+			// Update server state to match current state
+			const normalizedConfig = toEditorCacheConfig(savedConfig);
+			setCacheConfig(normalizedConfig);
+			setServerCacheConfig(normalizedConfig);
+			setServerCacheEnabled(originalCacheEnabled);
+		} catch (error) {
+			const errorMessage = getErrorMessage(error);
+			toast.error(`Failed to update plugin configuration: ${errorMessage}`);
+		}
+	};
+
+	if (loading) {
+		return (
+			<Card>
+				<CardContent className="p-6">
+					<div className="text-muted-foreground">Loading plugins configuration...</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<div className="space-y-6">
+			{/* Semantic Cache Toggle */}
+			<div className="rounded-lg border p-4">
+				<div className="flex items-center justify-between space-x-2">
+					<div className="flex-1 space-y-0.5">
+						<label htmlFor="enable-caching" className="text-sm font-medium">
+							Enable Semantic Caching
+						</label>
+						<p className="text-muted-foreground text-sm">
+							Enable semantic caching for requests. Send <b>x-bf-cache-key</b> header with requests to use semantic caching.{" "}
+							{!isVectorStoreEnabled && (
+								<span className="text-destructive font-medium">Requires vector store to be configured and enabled in config.json.</span>
+							)}
+							{!providersLoading && providers?.length === 0 && (
+								<span className="text-destructive font-medium"> Requires at least one provider to be configured.</span>
+							)}
+						</p>
+					</div>
+					<div className="flex items-center gap-2">
+						<Switch
+							id="enable-caching"
+							size="md"
+							checked={originalCacheEnabled && isVectorStoreEnabled}
+							disabled={!isVectorStoreEnabled || providersLoading || providers.length === 0}
+							onCheckedChange={(checked) => {
+								if (isVectorStoreEnabled) {
+									handleSemanticCacheToggle(checked);
+								}
+							}}
+						/>
+						{(isSemanticCacheEnabled || originalCacheEnabled) && (
+							<Button
+								onClick={handleSave}
+								disabled={!hasChanges || isUpdating || isCreating || hasInvalidProviderBackedDimension}
+								size="sm"
+							>
+								{isUpdating || isCreating ? "Saving..." : "Save"}
+							</Button>
+						)}
+					</div>
+				</div>
+
+				{/* Cache Configuration (only show when enabled) */}
+				{originalCacheEnabled &&
+					isVectorStoreEnabled &&
+					(providersLoading ? (
+						<div className="flex items-center justify-center">
+							<Loader2 className="h-4 w-4 animate-spin" />
+						</div>
+					) : (
+						<div className="mt-4 space-y-4">
+							<Separator />
+							{loadedDirectOnlyConfig && (
+								<div className="rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-900">
+									This plugin was loaded in direct-only mode via <code>config.json</code>. The Web UI currently edits provider-backed
+									semantic cache settings; keep using <code>config.json</code> if you want to stay in direct-only mode.
+								</div>
+							)}
+							{hasInvalidProviderBackedDimension && (
+								<div className="rounded-md border border-red-200 bg-red-50 p-3 text-xs text-red-900">
+									You selected a provider while keeping <code>dimension: 1</code>. That is only valid for direct-only mode. Set the
+									embedding model&apos;s real dimension before saving, or remove the provider to stay in direct-only mode.
+								</div>
+							)}
+							{/* Provider and Model Settings */}
+							<div className="space-y-4">
+								<h3 className="text-sm font-medium">Provider and Model Settings</h3>
+								<div className="grid grid-cols-2 gap-4">
+									<div className="space-y-2">
+										<Label htmlFor="provider">Configured Providers</Label>
+										<Select
+											value={cacheConfig.provider}
+											onValueChange={(value: ModelProviderName) => updateCacheConfigLocal({ provider: value })}
+										>
+											<SelectTrigger className="w-full">
+												<SelectValue placeholder="Select provider" />
+											</SelectTrigger>
+											<SelectContent>
+												{providers
+													.filter((provider) => provider.name)
+													.map((provider) => (
+														<SelectItem key={provider.name} value={provider.name}>
+															{getProviderLabel(provider.name)}
+														</SelectItem>
+													))}
+											</SelectContent>
+										</Select>
+									</div>
+									<div className="space-y-2">
+										<Label htmlFor="embedding_model">Embedding Model*</Label>
+										<Input
+											id="embedding_model"
+											placeholder="text-embedding-3-small"
+											value={cacheConfig.embedding_model ?? ""}
+											onChange={(e) => updateCacheConfigLocal({ embedding_model: e.target.value })}
+										/>
+									</div>
+								</div>
+							</div>
+
+							{/* Cache Settings */}
+							<div className="space-y-4">
+								<h3 className="text-sm font-medium">Cache Settings</h3>
+								<div className="grid grid-cols-2 gap-4">
+									<div className="space-y-2">
+										<Label htmlFor="ttl">TTL (seconds)</Label>
+										<Input
+											id="ttl"
+											type="number"
+											min="1"
+											value={cacheConfig.ttl_seconds === undefined || Number.isNaN(cacheConfig.ttl_seconds) ? "" : cacheConfig.ttl_seconds}
+											onChange={(e) => {
+												const value = e.target.value;
+												if (value === "") {
+													updateCacheConfigLocal({ ttl_seconds: undefined });
+													return;
+												}
+												const parsed = parseInt(value);
+												if (!Number.isNaN(parsed)) {
+													updateCacheConfigLocal({ ttl_seconds: parsed });
+												}
+											}}
+										/>
+									</div>
+									<div className="space-y-2">
+										<Label htmlFor="threshold">Similarity Threshold</Label>
+										<Input
+											id="threshold"
+											type="number"
+											min="0"
+											max="1"
+											step="0.01"
+											value={cacheConfig.threshold === undefined || Number.isNaN(cacheConfig.threshold) ? "" : cacheConfig.threshold}
+											onChange={(e) => {
+												const value = e.target.value;
+												if (value === "") {
+													updateCacheConfigLocal({ threshold: undefined });
+													return;
+												}
+												const parsed = parseFloat(value);
+												if (!Number.isNaN(parsed)) {
+													updateCacheConfigLocal({ threshold: parsed });
+												}
+											}}
+										/>
+									</div>
+									<div className="space-y-2">
+										<Label htmlFor="dimension">Dimension</Label>
+										<Input
+											id="dimension"
+											type="number"
+											min="1"
+											value={cacheConfig.dimension === undefined || Number.isNaN(cacheConfig.dimension) ? "" : cacheConfig.dimension}
+											onChange={(e) => {
+												const value = e.target.value;
+												if (value === "") {
+													updateCacheConfigLocal({ dimension: undefined });
+													return;
+												}
+												const parsed = parseInt(value);
+												if (!Number.isNaN(parsed)) {
+													updateCacheConfigLocal({ dimension: parsed });
+												}
+											}}
+										/>
+									</div>
+								</div>
+								<p className="text-muted-foreground text-xs">
+									API keys for the embedding provider will be inherited from the main provider configuration. The semantic cache will use
+									the configured provider&apos;s keys automatically. <b>Updates in keys will be reflected on Bifrost restart.</b>
+								</p>
+							</div>
+
+							{/* Conversation Settings */}
+							<div className="space-y-4">
+								<h3 className="text-sm font-medium">Conversation Settings</h3>
+								<div className="grid grid-cols-2 gap-4">
+									<div className="space-y-2">
+										<Label htmlFor="conversation_history_threshold">Conversation History Threshold</Label>
+										<Input
+											id="conversation_history_threshold"
+											type="number"
+											min="1"
+											max="50"
+											value={cacheConfig.conversation_history_threshold || 3}
+											onChange={(e) => updateCacheConfigLocal({ conversation_history_threshold: parseInt(e.target.value) || 3 })}
+										/>
+										<p className="text-muted-foreground text-xs">
+											Skip caching for conversations with more than this number of messages (prevents false positives)
+										</p>
+									</div>
+								</div>
+								<div className="space-y-2">
+									<div className="flex h-fit items-center justify-between space-x-2 rounded-lg border p-3">
+										<div className="space-y-0.5">
+											<Label className="text-sm font-medium">Exclude System Prompt</Label>
+											<p className="text-muted-foreground text-xs">Exclude system messages from cache key generation</p>
+										</div>
+										<Switch
+											checked={cacheConfig.exclude_system_prompt || false}
+											onCheckedChange={(checked) => updateCacheConfigLocal({ exclude_system_prompt: checked })}
+											size="md"
+										/>
+									</div>
+								</div>
+							</div>
+
+							{/* Cache Behavior */}
+							<div className="space-y-4">
+								<h3 className="text-sm font-medium">Cache Behavior</h3>
+								<div className="space-y-3">
+									<div className="flex items-center justify-between space-x-2 rounded-lg border p-3">
+										<div className="space-y-0.5">
+											<Label className="text-sm font-medium">Cache by Model</Label>
+											<p className="text-muted-foreground text-xs">Include model name in cache key</p>
+										</div>
+										<Switch
+											checked={cacheConfig.cache_by_model}
+											onCheckedChange={(checked) => updateCacheConfigLocal({ cache_by_model: checked })}
+											size="md"
+										/>
+									</div>
+									<div className="flex items-center justify-between space-x-2 rounded-lg border p-3">
+										<div className="space-y-0.5">
+											<Label className="text-sm font-medium">Cache by Provider</Label>
+											<p className="text-muted-foreground text-xs">Include provider name in cache key</p>
+										</div>
+										<Switch
+											checked={cacheConfig.cache_by_provider}
+											onCheckedChange={(checked) => updateCacheConfigLocal({ cache_by_provider: checked })}
+											size="md"
+										/>
+									</div>
+								</div>
+							</div>
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">Notes</Label>
+								<ul className="text-muted-foreground list-inside list-disc text-xs">
+									<li>
+										You can pass <b>x-bf-cache-ttl</b> header with requests to use request-specific TTL.
+									</li>
+									<li>
+										You can pass <b>x-bf-cache-threshold</b> header with requests to use request-specific similarity threshold.
+									</li>
+									<li>
+										You can pass <b>x-bf-cache-type</b> header with &quot;direct&quot; or &quot;semantic&quot; to control cache behavior.
+									</li>
+									<li>
+										You can pass <b>x-bf-cache-no-store</b> header with &quot;true&quot; to disable response caching.
+									</li>
+								</ul>
+							</div>
+						</div>
+					))}
+			</div>
+		</div>
+	);
+}

ui/app/workspace/config/views/pricingConfigView.tsx

@@ -0,0 +1,164 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { getErrorMessage, useForcePricingSyncMutation, useGetCoreConfigQuery, useUpdateCoreConfigMutation } from "@/lib/store";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+interface PricingFormData {
+	pricing_datasheet_url: string;
+	pricing_sync_interval_hours: number;
+}
+
+export default function PricingConfigView() {
+	const hasSettingsUpdateAccess = useRbac(RbacResource.Settings, RbacOperation.Update);
+	const { data: bifrostConfig } = useGetCoreConfigQuery({ fromDB: true });
+	const config = bifrostConfig?.framework_config;
+	const [updateCoreConfig, { isLoading }] = useUpdateCoreConfigMutation();
+	const [forcePricingSync, { isLoading: isForceSyncing }] = useForcePricingSyncMutation();
+
+	const {
+		register,
+		handleSubmit,
+		formState: { errors, isDirty },
+		reset,
+		watch,
+	} = useForm<PricingFormData>({
+		defaultValues: {
+			pricing_datasheet_url: "",
+			pricing_sync_interval_hours: 24,
+		},
+	});
+
+	const formValues = watch();
+
+	useEffect(() => {
+		if (bifrostConfig && config) {
+			reset({
+				pricing_datasheet_url: config.pricing_url || "",
+				pricing_sync_interval_hours: Math.round(config.pricing_sync_interval / 3600) || 24,
+			});
+		}
+	}, [config, bifrostConfig, reset]);
+
+	const hasChanges = useMemo(() => {
+		if (!config || !isDirty) return false;
+		const serverUrl = config.pricing_url || "";
+		const serverInterval = Math.round(config.pricing_sync_interval / 3600);
+		return formValues.pricing_datasheet_url !== serverUrl || formValues.pricing_sync_interval_hours !== serverInterval;
+	}, [config, formValues, isDirty]);
+
+	const onSubmit = async (data: PricingFormData) => {
+		try {
+			await updateCoreConfig({
+				...bifrostConfig!,
+				framework_config: {
+					...config,
+					id: bifrostConfig?.framework_config.id || 0,
+					pricing_url: data.pricing_datasheet_url,
+					pricing_sync_interval: data.pricing_sync_interval_hours * 3600,
+				},
+			}).unwrap();
+			toast.success("Pricing configuration updated successfully.");
+			reset(data);
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	};
+
+	const handleForceSync = async () => {
+		try {
+			await forcePricingSync().unwrap();
+			toast.success("Pricing sync triggered successfully.");
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	};
+
+	return (
+		<div className="mx-auto w-full max-w-7xl space-y-4" data-testid="pricing-config-view">
+			<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+				<div>
+					<h2 className="text-lg font-semibold tracking-tight">Pricing Configuration</h2>
+					<p className="text-muted-foreground text-sm">Configure custom pricing datasheet and sync intervals.</p>
+				</div>
+
+				<div className="space-y-4">
+					{/* Pricing Datasheet URL */}
+					<div className="space-y-2 rounded-sm border p-4">
+						<div className="space-y-0.5">
+							<Label htmlFor="pricing-datasheet-url">Pricing Datasheet URL</Label>
+							<p className="text-muted-foreground text-sm">URL to a custom pricing datasheet. Leave empty to use default pricing.</p>
+						</div>
+						<Input
+							id="pricing-datasheet-url"
+							type="text"
+							placeholder="https://example.com/pricing.json"
+							data-testid="pricing-datasheet-url-input"
+							{...register("pricing_datasheet_url", {
+								pattern: {
+									value: /^(https?:\/\/)?((localhost|(\d{1,3}\.){3}\d{1,3})(:\d+)?|([\da-z\.-]+)\.([a-z\.]{2,6}))([\/\w \.-]*)*\/?$/,
+									message: "Please enter a valid URL.",
+								},
+								validate: {
+									checkIfHttp: (value) => {
+										if (!value) return true; // Allow empty
+										return value.startsWith("http://") || value.startsWith("https://") || "URL must start with http:// or https://";
+									},
+								},
+							})}
+							className={errors.pricing_datasheet_url ? "border-destructive" : ""}
+						/>
+						{errors.pricing_datasheet_url && <p className="text-destructive text-sm">{errors.pricing_datasheet_url.message}</p>}
+					</div>
+
+					{/* Pricing Sync Interval */}
+					<div className="space-y-2 rounded-sm border p-4">
+						<div className="space-y-2">
+							<div className="space-y-0.5">
+								<Label htmlFor="pricing-sync-interval">Pricing Sync Interval (hours)</Label>
+								<p className="text-muted-foreground text-sm">How often to sync pricing data from the datasheet URL.</p>
+							</div>
+							<Input
+								id="pricing-sync-interval"
+								type="number"
+								className={errors.pricing_sync_interval_hours ? "border-destructive" : ""}
+								{...register("pricing_sync_interval_hours", {
+									required: "Pricing sync interval is required",
+									min: {
+										value: 1,
+										message: "Sync interval must be at least 1 hour",
+									},
+									max: {
+										value: 8760,
+										message: "Sync interval cannot exceed 8760 hours (1 year)",
+									},
+									valueAsNumber: true,
+								})}
+							/>
+							{errors.pricing_sync_interval_hours && (
+								<p className="text-destructive text-sm">{errors.pricing_sync_interval_hours.message}</p>
+							)}
+						</div>
+					</div>
+				</div>
+				<div className="flex justify-end gap-2 pt-2">
+					<Button
+						variant="outline"
+						type="button"
+						onClick={handleForceSync}
+						disabled={isForceSyncing || !hasSettingsUpdateAccess}
+						data-testid="pricing-force-sync-btn"
+					>
+						{isForceSyncing ? "Syncing..." : "Force Sync Now"}
+					</Button>
+					<Button type="submit" disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess} data-testid="pricing-save-btn">
+						{isLoading ? "Saving..." : "Save Changes"}
+					</Button>
+				</div>
+			</form>
+		</div>
+	);
+}

ui/app/workspace/config/views/proxyView.tsx

@@ -0,0 +1,372 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { IS_ENTERPRISE } from "@/lib/constants/config";
+import { getErrorMessage, useGetCoreConfigQuery, useUpdateProxyConfigMutation } from "@/lib/store";
+import { DefaultGlobalProxyConfig, GlobalProxyConfig } from "@/lib/types/config";
+import { globalProxyConfigSchema } from "@/lib/types/schemas";
+import { cn } from "@/lib/utils";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, Info } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+export default function ProxyView() {
+	const hasSettingsUpdateAccess = useRbac(RbacResource.Settings, RbacOperation.Update);
+	const { data: bifrostConfig } = useGetCoreConfigQuery({ fromDB: true });
+	const proxyConfig = bifrostConfig?.proxy_config;
+	const [updateProxyConfig, { isLoading }] = useUpdateProxyConfigMutation();
+
+	const form = useForm<GlobalProxyConfig>({
+		resolver: zodResolver(globalProxyConfigSchema),
+		mode: "onChange",
+		reValidateMode: "onChange",
+		defaultValues: DefaultGlobalProxyConfig,
+	});
+
+	useEffect(() => {
+		if (proxyConfig) {
+			form.reset({
+				...DefaultGlobalProxyConfig,
+				...proxyConfig,
+			});
+		}
+	}, [proxyConfig, form]);
+
+	const watchedEnabled = form.watch("enabled");
+	const watchedType = form.watch("type");
+
+	const onSubmit = async (data: GlobalProxyConfig) => {
+		try {
+			await updateProxyConfig(data).unwrap();
+			toast.success("Proxy configuration updated successfully.");
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	};
+
+	const isTypeUnsupported = watchedType === "socks5" || watchedType === "tcp";
+
+	return (
+		<div className="mx-auto w-full max-w-4xl space-y-4">
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+					<div>
+						<h2 className="text-lg font-semibold tracking-tight">Proxy Settings</h2>
+						<p className="text-muted-foreground text-sm">Configure global proxy settings for outbound requests.</p>
+					</div>
+
+					<fieldset disabled={!hasSettingsUpdateAccess} className="space-y-4">
+						{/* Enable Proxy */}
+						<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+							<div className="space-y-0.5">
+								<FormLabel className="text-sm font-medium">Enable Proxy</FormLabel>
+								<p className="text-muted-foreground text-sm">Enable global proxy for outbound HTTP requests.</p>
+							</div>
+							<FormField
+								control={form.control}
+								name="enabled"
+								render={({ field }) => (
+									<FormItem>
+										<FormControl>
+											<Switch checked={field.value} onCheckedChange={field.onChange} />
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						</div>
+
+						{/* Proxy Configuration Section */}
+						<div className={cn("space-y-4 rounded-lg border p-4 transition-opacity", !watchedEnabled && "pointer-events-none opacity-50")}>
+							<h3 className="text-lg font-medium">Proxy Configuration</h3>
+
+							{/* Proxy Type */}
+							<FormField
+								control={form.control}
+								name="type"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Proxy Type</FormLabel>
+										<Select onValueChange={field.onChange} value={field.value} disabled={!watchedEnabled}>
+											<FormControl>
+												<SelectTrigger className="w-48">
+													<SelectValue placeholder="Select type" />
+												</SelectTrigger>
+											</FormControl>
+											<SelectContent>
+												<SelectItem value="http">HTTP / HTTPS</SelectItem>
+												<SelectItem value="socks5" disabled>
+													SOCKS5{" "}
+													<Badge variant="outline" className="ml-2 text-xs">
+														Coming soon
+													</Badge>
+												</SelectItem>
+												<SelectItem value="tcp" disabled>
+													TCP{" "}
+													<Badge variant="outline" className="ml-2 text-xs">
+														Coming soon
+													</Badge>
+												</SelectItem>
+											</SelectContent>
+										</Select>
+										<FormDescription>Select the proxy protocol type. Currently only HTTP proxy is supported.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							{isTypeUnsupported && watchedEnabled && (
+								<Alert variant="destructive">
+									<AlertTriangle className="h-4 w-4" />
+									<AlertDescription>{watchedType.toUpperCase()} proxy is not yet supported. Please use HTTP proxy.</AlertDescription>
+								</Alert>
+							)}
+
+							{/* Proxy URL */}
+							<FormField
+								control={form.control}
+								name="url"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Proxy URL</FormLabel>
+										<FormControl>
+											<Input placeholder="http://proxy.example.com:8080" disabled={!watchedEnabled} {...field} />
+										</FormControl>
+										<FormDescription>Full URL of the proxy server including protocol and port.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							{/* Authentication Section */}
+							<div className="bg-muted/20 space-y-4 rounded-md border p-4">
+								<h4 className="text-sm font-medium">Authentication (Optional)</h4>
+								<div className="grid grid-cols-2 gap-4">
+									<FormField
+										control={form.control}
+										name="username"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Username</FormLabel>
+												<FormControl>
+													<Input placeholder="Proxy username" disabled={!watchedEnabled} {...field} value={field.value || ""} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="password"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Password</FormLabel>
+												<FormControl>
+													<Input
+														type="password"
+														placeholder="Proxy password"
+														disabled={!watchedEnabled}
+														{...field}
+														value={field.value || ""}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+							</div>
+
+							{/* Advanced Settings */}
+							<div className="bg-muted/20 space-y-4 rounded-md border p-4">
+								<h4 className="text-sm font-medium">Advanced Settings</h4>
+
+								{/* No Proxy */}
+								<FormField
+									control={form.control}
+									name="no_proxy"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>No Proxy Hosts</FormLabel>
+											<FormControl>
+												<Textarea
+													placeholder="localhost, 127.0.0.1, .internal.example.com"
+													className="h-20"
+													disabled={!watchedEnabled}
+													{...field}
+													value={field.value || ""}
+												/>
+											</FormControl>
+											<FormDescription>Comma-separated list of hosts that should bypass the proxy.</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								{/* Timeout */}
+								<FormField
+									control={form.control}
+									name="timeout"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Connection Timeout (seconds)</FormLabel>
+											<FormControl>
+												<Input
+													type="number"
+													min={0}
+													max={300}
+													placeholder="30"
+													className="w-32"
+													disabled={!watchedEnabled}
+													{...field}
+													value={field.value ?? ""}
+													onChange={(e) => field.onChange(e.target.value !== "" ? parseInt(e.target.value, 10) : undefined)}
+												/>
+											</FormControl>
+											<FormDescription>
+												Timeout for establishing proxy connections. 0 means no timeout. Default is 60 seconds.
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								{/* CA Certificate */}
+								<FormField
+									control={form.control}
+									name="ca_cert_pem"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>CA Certificate (PEM) (Optional)</FormLabel>
+											<FormControl>
+												<Textarea
+													placeholder="-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----"
+													className="font-mono text-xs"
+													rows={6}
+													disabled={!watchedEnabled}
+													{...field}
+													value={field.value || ""}
+												/>
+											</FormControl>
+											<FormDescription>
+												PEM-encoded CA certificate to trust for TLS connections through SSL-intercepting proxies.
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								{/* Skip TLS Verify */}
+								<div className="flex items-center justify-between">
+									<div className="space-y-0.5">
+										<FormLabel className="text-sm font-medium">Skip TLS Verification</FormLabel>
+										<p className="text-muted-foreground text-sm">
+											Disable TLS certificate verification for HTTPS proxies. Not recommended for production.
+										</p>
+									</div>
+									<FormField
+										control={form.control}
+										name="skip_tls_verify"
+										render={({ field }) => (
+											<FormItem>
+												<FormControl>
+													<Switch checked={field.value} onCheckedChange={field.onChange} disabled={!watchedEnabled} />
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+								</div>
+							</div>
+						</div>
+
+						{/* Entity Enablement Section */}
+						<div className={cn("space-y-4 rounded-lg border p-4 transition-opacity", !watchedEnabled && "pointer-events-none opacity-50")}>
+							<div className="space-y-1">
+								<h3 className="text-lg font-medium">Enable Proxy For</h3>
+								<p className="text-muted-foreground text-sm">Select which components should use the proxy for outbound requests.</p>
+							</div>
+
+							{/* SCIM - Enterprise only */}
+							{IS_ENTERPRISE && (
+								<div className="flex items-center justify-between rounded-md border p-4">
+									<div className="space-y-0.5">
+										<div className="flex items-center gap-2">
+											<FormLabel className="text-sm font-medium">SCIM</FormLabel>
+											<Badge variant="secondary">Enterprise</Badge>
+										</div>
+										<p className="text-muted-foreground text-sm">Use proxy for SCIM directory sync requests.</p>
+									</div>
+									<FormField
+										control={form.control}
+										name="enable_for_scim"
+										render={({ field }) => (
+											<FormItem>
+												<FormControl>
+													<Switch checked={field.value} onCheckedChange={field.onChange} disabled={!watchedEnabled} />
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+								</div>
+							)}
+
+							{/* Inference - Coming Soon */}
+							<div className="flex items-center justify-between rounded-md border p-4 opacity-60">
+								<div className="space-y-0.5">
+									<div className="flex items-center gap-2">
+										<FormLabel className="text-sm font-medium">Inference</FormLabel>
+										<Badge variant="outline">Coming soon</Badge>
+									</div>
+									<p className="text-muted-foreground text-sm">Use proxy for LLM inference requests to model providers.</p>
+								</div>
+								<Switch disabled checked={false} />
+							</div>
+
+							{/* API - Coming Soon */}
+							<div className="flex items-center justify-between rounded-md border p-4 opacity-60">
+								<div className="space-y-0.5">
+									<div className="flex items-center gap-2">
+										<FormLabel className="text-sm font-medium">API</FormLabel>
+										<Badge variant="outline">Coming soon</Badge>
+									</div>
+									<p className="text-muted-foreground text-sm">Use proxy for external API calls and webhooks.</p>
+								</div>
+								<Switch disabled checked={false} />
+							</div>
+
+							{!IS_ENTERPRISE && (
+								<Alert>
+									<Info className="h-4 w-4" />
+									<AlertDescription>SCIM proxy support is available in Bifrost Enterprise.</AlertDescription>
+								</Alert>
+							)}
+						</div>
+					</fieldset>
+					<div className="flex justify-end pt-2">
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<span tabIndex={!hasSettingsUpdateAccess ? 0 : undefined}>
+									<Button
+										type="submit"
+										disabled={!form.formState.isDirty || !form.formState.isValid || isLoading || !hasSettingsUpdateAccess}
+									>
+										{isLoading ? "Saving..." : "Save Changes"}
+									</Button>
+								</span>
+							</TooltipTrigger>
+							{!hasSettingsUpdateAccess && <TooltipContent>You don't have permission to update settings</TooltipContent>}
+						</Tooltip>
+					</div>
+				</form>
+			</Form>
+		</div>
+	);
+}

ui/app/workspace/config/views/securityView.tsx

@@ -0,0 +1,421 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { EnvVarInput } from "@/components/ui/envVarInput";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { IS_ENTERPRISE } from "@/lib/constants/config";
+import { getErrorMessage, useGetCoreConfigQuery, useUpdateCoreConfigMutation } from "@/lib/store";
+import { AuthConfig, CoreConfig, DefaultCoreConfig } from "@/lib/types/config";
+import { EnvVar } from "@/lib/types/schemas";
+import { parseArrayFromText } from "@/lib/utils/array";
+import { validateOrigins } from "@/lib/utils/validation";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { Link } from "@tanstack/react-router";
+import { AlertTriangle, Info } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+export default function SecurityView() {
+	const hasSettingsUpdateAccess = useRbac(RbacResource.Settings, RbacOperation.Update);
+	const { data: bifrostConfig } = useGetCoreConfigQuery({ fromDB: true });
+	const config = bifrostConfig?.client_config;
+	const [updateCoreConfig, { isLoading }] = useUpdateCoreConfigMutation();
+	const [localConfig, setLocalConfig] = useState<CoreConfig>(DefaultCoreConfig);
+	const hideAuthDashboard = IS_ENTERPRISE;
+
+	const [localValues, setLocalValues] = useState<{
+		allowed_origins: string;
+		allowed_headers: string;
+		required_headers: string;
+		whitelisted_routes: string;
+	}>({
+		allowed_origins: "",
+		allowed_headers: "",
+		required_headers: "",
+		whitelisted_routes: "",
+	});
+
+	const [authConfig, setAuthConfig] = useState<AuthConfig>({
+		admin_username: { value: "", env_var: "", from_env: false },
+		admin_password: { value: "", env_var: "", from_env: false },
+		is_enabled: false,
+		disable_auth_on_inference: false,
+	});
+
+	useEffect(() => {
+		if (bifrostConfig && config) {
+			setLocalConfig(config);
+			setLocalValues({
+				allowed_origins: config?.allowed_origins?.join(", ") || "",
+				allowed_headers: config?.allowed_headers?.join(", ") || "",
+				required_headers: config?.required_headers?.join(", ") || "",
+				whitelisted_routes: config?.whitelisted_routes?.join(", ") || "",
+			});
+		}
+		if (bifrostConfig?.auth_config) {
+			setAuthConfig(bifrostConfig.auth_config);
+		}
+	}, [config, bifrostConfig]);
+
+	const hasChanges = useMemo(() => {
+		if (!config) return false;
+		const localOrigins = localConfig.allowed_origins?.slice().sort().join(",");
+		const serverOrigins = config.allowed_origins?.slice().sort().join(",");
+		const originsChanged = localOrigins !== serverOrigins;
+
+		const localHeaders = localConfig.allowed_headers?.slice().sort().join(",");
+		const serverHeaders = config.allowed_headers?.slice().sort().join(",");
+		const headersChanged = localHeaders !== serverHeaders;
+
+		const usernameChanged =
+			authConfig.admin_username?.value !== bifrostConfig?.auth_config?.admin_username?.value ||
+			authConfig.admin_username?.env_var !== bifrostConfig?.auth_config?.admin_username?.env_var ||
+			authConfig.admin_username?.from_env !== bifrostConfig?.auth_config?.admin_username?.from_env;
+		const passwordChanged =
+			authConfig.admin_password?.value !== bifrostConfig?.auth_config?.admin_password?.value ||
+			authConfig.admin_password?.env_var !== bifrostConfig?.auth_config?.admin_password?.env_var ||
+			authConfig.admin_password?.from_env !== bifrostConfig?.auth_config?.admin_password?.from_env;
+		const authChanged =
+			authConfig.is_enabled !== bifrostConfig?.auth_config?.is_enabled ||
+			usernameChanged ||
+			passwordChanged ||
+			authConfig.disable_auth_on_inference !== bifrostConfig?.auth_config?.disable_auth_on_inference;
+
+		const localRequired = localConfig.required_headers?.slice().sort().join(",");
+		const serverRequired = config.required_headers?.slice().sort().join(",");
+		const requiredChanged = localRequired !== serverRequired;
+
+		const localWhitelistedRoutes = localConfig.whitelisted_routes?.slice().sort().join(",");
+		const serverWhitelistedRoutes = config.whitelisted_routes?.slice().sort().join(",");
+		const whitelistedRoutesChanged = localWhitelistedRoutes !== serverWhitelistedRoutes;
+
+		const enforceAuthOnInferenceChanged = localConfig.enforce_auth_on_inference !== config.enforce_auth_on_inference;
+		const allowDirectKeysChanged = localConfig.allow_direct_keys !== config.allow_direct_keys;
+
+		return (
+			originsChanged ||
+			headersChanged ||
+			requiredChanged ||
+			whitelistedRoutesChanged ||
+			authChanged ||
+			enforceAuthOnInferenceChanged ||
+			allowDirectKeysChanged
+		);
+	}, [config, localConfig, authConfig, bifrostConfig]);
+
+	const needsRestart = useMemo(() => {
+		if (!config) return false;
+
+		const localOrigins = localConfig.allowed_origins?.slice().sort().join(",");
+		const serverOrigins = config.allowed_origins?.slice().sort().join(",");
+		const originsChanged = localOrigins !== serverOrigins;
+
+		const localHeaders = localConfig.allowed_headers?.slice().sort().join(",");
+		const serverHeaders = config.allowed_headers?.slice().sort().join(",");
+		const headersChanged = localHeaders !== serverHeaders;
+
+		const enforceAuthOnInferenceChanged = localConfig.enforce_auth_on_inference !== config.enforce_auth_on_inference && IS_ENTERPRISE;
+
+		return originsChanged || headersChanged || enforceAuthOnInferenceChanged;
+	}, [config, localConfig]);
+
+	const handleAllowedOriginsChange = useCallback((value: string) => {
+		setLocalValues((prev) => ({ ...prev, allowed_origins: value }));
+		setLocalConfig((prev) => ({ ...prev, allowed_origins: parseArrayFromText(value) }));
+	}, []);
+
+	const handleAllowedHeadersChange = useCallback((value: string) => {
+		setLocalValues((prev) => ({ ...prev, allowed_headers: value }));
+		setLocalConfig((prev) => ({ ...prev, allowed_headers: parseArrayFromText(value) }));
+	}, []);
+
+	const handleRequiredHeadersChange = useCallback((value: string) => {
+		setLocalValues((prev) => ({ ...prev, required_headers: value }));
+		setLocalConfig((prev) => ({ ...prev, required_headers: parseArrayFromText(value) }));
+	}, []);
+
+	const handleWhitelistedRoutesChange = useCallback((value: string) => {
+		setLocalValues((prev) => ({ ...prev, whitelisted_routes: value }));
+		setLocalConfig((prev) => ({ ...prev, whitelisted_routes: parseArrayFromText(value) }));
+	}, []);
+
+	const handleConfigChange = useCallback((field: keyof CoreConfig, value: boolean) => {
+		setLocalConfig((prev) => ({ ...prev, [field]: value }));
+	}, []);
+
+	const handleAuthToggle = useCallback((checked: boolean) => {
+		setAuthConfig((prev) => ({ ...prev, is_enabled: checked }));
+	}, []);
+
+	const handleDisableAuthOnInferenceToggle = useCallback((checked: boolean) => {
+		setAuthConfig((prev) => ({ ...prev, disable_auth_on_inference: checked }));
+	}, []);
+
+	const handleAuthFieldChange = useCallback((field: "admin_username" | "admin_password", value: EnvVar) => {
+		setAuthConfig((prev) => ({ ...prev, [field]: value }));
+	}, []);
+
+	const handleSave = useCallback(async () => {
+		try {
+			const validation = validateOrigins(localConfig.allowed_origins);
+
+			if (!validation.isValid && localConfig.allowed_origins.length > 0) {
+				toast.error(
+					`Invalid origins: ${validation.invalidOrigins.join(", ")}. Origins must be valid URLs like https://example.com, wildcard patterns like https://*.example.com, or "*" to allow all origins`,
+				);
+				return;
+			}
+			const hasUsername = authConfig.admin_username?.value || authConfig.admin_username?.env_var;
+			const hasPassword = authConfig.admin_password?.value || authConfig.admin_password?.env_var;
+			await updateCoreConfig({
+				...bifrostConfig!,
+				client_config: localConfig,
+				auth_config: authConfig.is_enabled && hasUsername && hasPassword ? authConfig : { ...authConfig, is_enabled: false },
+			}).unwrap();
+			toast.success("Security settings updated successfully.");
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	}, [bifrostConfig, localConfig, authConfig, updateCoreConfig]);
+
+	return (
+		<div className="mx-auto w-full max-w-4xl space-y-4">
+			<div>
+				<h2 className="text-lg font-semibold tracking-tight">Security Settings</h2>
+				<p className="text-muted-foreground text-sm">Configure security and access control settings.</p>
+			</div>
+
+			<div className="space-y-4">
+				{authConfig.is_enabled && !authConfig.disable_auth_on_inference && (
+					<Alert variant="default" className="border-blue-20">
+						<Info className="h-4 w-4 text-blue-600" />
+						<AlertDescription>
+							You will need to use Basic Auth for all your inference calls (including MCP tool execution). You can disable it below. Check{" "}
+							<Link to="/workspace/config/api-keys" className="text-md text-primary underline">
+								API Keys
+							</Link>
+						</AlertDescription>
+					</Alert>
+				)}
+				{authConfig.is_enabled && authConfig.disable_auth_on_inference && (
+					<Alert variant="default" className="border-blue-20">
+						<Info className="h-4 w-4 text-blue-600" />
+						<AlertDescription>
+							Authentication is disabled for inference calls. Only dashboard, admin API and MCP tool execution calls require authentication.
+						</AlertDescription>
+					</Alert>
+				)}
+				{/* Password Protect the Dashboard */}
+				{!hideAuthDashboard && (
+					<div>
+						<div className="space-y-4 rounded-lg border p-4">
+							<div className="flex items-center justify-between">
+								<div className="space-y-0.5">
+									<Label htmlFor="auth-enabled" className="text-sm font-medium">
+										Password protect the dashboard <Badge variant="secondary">BETA</Badge>
+									</Label>
+									<p className="text-muted-foreground text-sm">
+										Set up authentication credentials to protect your Bifrost dashboard. Once configured, use the generated token for all
+										admin API calls.
+									</p>
+								</div>
+								<Switch id="auth-enabled" checked={authConfig.is_enabled} onCheckedChange={handleAuthToggle} />
+							</div>
+							<div className="space-y-4">
+								<div className="space-y-2">
+									<Label htmlFor="admin-username">Username</Label>
+									<EnvVarInput
+										id="admin-username"
+										type="text"
+										placeholder="Enter admin username or env.VAR_NAME"
+										value={authConfig.admin_username}
+										disabled={!authConfig.is_enabled}
+										onChange={(value) => handleAuthFieldChange("admin_username", value)}
+									/>
+								</div>
+								<div className="space-y-2">
+									<Label htmlFor="admin-password">Password</Label>
+									<EnvVarInput
+										id="admin-password"
+										type="password"
+										placeholder="Enter admin password or env.VAR_NAME"
+										value={authConfig.admin_password}
+										disabled={!authConfig.is_enabled}
+										onChange={(value) => handleAuthFieldChange("admin_password", value)}
+									/>
+								</div>
+								<div className="flex items-center justify-between">
+									<div className="space-y-0.5">
+										<Label htmlFor="disable-auth-inference" className="text-sm font-medium">
+											Disable authentication on inference calls
+										</Label>
+										<p className="text-muted-foreground text-sm">
+											When enabled, inference API calls (chat completions, embeddings, etc.) will not require authentication. Dashboard and
+											admin API calls will still require authentication.
+										</p>
+									</div>
+									<Switch
+										id="disable-auth-inference"
+										className="ml-5"
+										checked={authConfig.disable_auth_on_inference ?? false}
+										disabled={!authConfig.is_enabled}
+										onCheckedChange={handleDisableAuthOnInferenceToggle}
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				)}
+				{/* Enable Auth on Inference */}
+				<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+					<div className="space-y-0.5">
+						<label htmlFor="enforce-auth-on-inference" className="text-sm font-medium">
+							{IS_ENTERPRISE ? "Enable Auth on Inference" : "Enforce Virtual Keys on Inference"}
+						</label>
+						<p className="text-muted-foreground text-sm">
+							{IS_ENTERPRISE
+								? "Require authentication (virtual key, API key, or user token) for all inference endpoints."
+								: "Require a virtual key for all inference requests."}{" "}
+							See{" "}
+							<a
+								href="https://docs.getbifrost.ai/features/governance/virtual-keys"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="text-primary underline"
+								data-testid="security-virtual-keys-docs-link"
+							>
+								documentation
+							</a>{" "}
+							for details.
+						</p>
+					</div>
+					<Switch
+						id="enforce-auth-on-inference"
+						data-testid="enforce-auth-on-inference-switch"
+						checked={localConfig.enforce_auth_on_inference}
+						onCheckedChange={(checked) => handleConfigChange("enforce_auth_on_inference", checked)}
+					/>
+				</div>
+				{/* Allowed Origins */}
+				{needsRestart && <RestartWarning />}
+				{/* Allow Direct API Keys */}
+				<div className="flex items-center justify-between space-x-2 rounded-lg border p-4">
+					<div className="space-y-0.5">
+						<label htmlFor="allow-direct-keys" className="text-sm font-medium">
+							Allow Direct API Keys
+						</label>
+						<p className="text-muted-foreground text-sm">
+							Allow API keys to be passed directly in request headers (<b>Authorization</b>, <b>x-api-key</b>, or <b>x-goog-api-key</b>).
+							Bifrost will directly use the key.
+						</p>
+					</div>
+					<Switch
+						id="allow-direct-keys"
+						checked={localConfig.allow_direct_keys}
+						onCheckedChange={(checked) => handleConfigChange("allow_direct_keys", checked)}
+					/>
+				</div>
+				<div>
+					<div className="space-y-2 rounded-lg border p-4">
+						<div className="space-y-0.5">
+							<label htmlFor="allowed-origins" className="text-sm font-medium">
+								Allowed Origins
+							</label>
+							<p className="text-muted-foreground text-sm">
+								Comma-separated list of allowed origins for CORS and WebSocket connections. Localhost origins are always allowed. Each
+								origin must be a complete URL with protocol (e.g., https://app.example.com, http://10.0.0.100:3000). Wildcards are supported
+								for subdomains (e.g., https://*.example.com) or use "*" to allow all origins.
+							</p>
+						</div>
+						<Textarea
+							id="allowed-origins"
+							className="h-24"
+							placeholder="https://app.example.com, https://*.example.com, *"
+							value={localValues.allowed_origins}
+							onChange={(e) => handleAllowedOriginsChange(e.target.value)}
+						/>
+					</div>
+				</div>
+				{/* Allowed Headers */}
+				<div>
+					<div className="space-y-2 rounded-lg border p-4">
+						<div className="space-y-0.5">
+							<label htmlFor="allowed-headers" className="text-sm font-medium">
+								Allowed Headers
+							</label>
+							<p className="text-muted-foreground text-sm">Comma-separated list of allowed headers for CORS.</p>
+						</div>
+						<Textarea
+							id="allowed-headers"
+							className="h-24"
+							placeholder="X-Stainless-Timeout"
+							value={localValues.allowed_headers}
+							onChange={(e) => handleAllowedHeadersChange(e.target.value)}
+						/>
+					</div>
+				</div>
+				{/* Required Headers */}
+				<div>
+					<div className="space-y-2 rounded-lg border p-4">
+						<div className="space-y-0.5">
+							<label htmlFor="required-headers" className="text-sm font-medium">
+								Required Headers
+							</label>
+							<p className="text-muted-foreground text-sm">
+								Comma-separated list of headers that must be present on every request. Requests missing any of these headers will be
+								rejected with a 400 error. Header names are case-insensitive.
+							</p>
+						</div>
+						<Textarea
+							id="required-headers"
+							data-testid="required-headers-textarea"
+							className="h-24"
+							placeholder="X-Tenant-ID, X-Custom-Header"
+							value={localValues.required_headers}
+							onChange={(e) => handleRequiredHeadersChange(e.target.value)}
+						/>
+					</div>
+				</div>
+				{/* Whitelisted Routes */}
+				<div>
+					<div className="space-y-2 rounded-lg border p-4">
+						<div className="space-y-0.5">
+							<label htmlFor="whitelisted-routes" className="text-sm font-medium">
+								Whitelisted Routes
+							</label>
+							<p className="text-muted-foreground text-sm">
+								Comma-separated list of routes that bypass the auth middleware. Requests to these routes will not require authentication.
+								System routes like <b>/health</b>, <b>/api/session/login</b>, and <b>/api/session/is-auth-enabled</b> are always whitelisted
+								regardless of this setting.
+							</p>
+						</div>
+						<Textarea
+							id="whitelisted-routes"
+							data-testid="whitelisted-routes-textarea"
+							className="h-24"
+							placeholder="/api/custom-webhook, /api/public-endpoint"
+							value={localValues.whitelisted_routes}
+							onChange={(e) => handleWhitelistedRoutesChange(e.target.value)}
+						/>
+					</div>
+				</div>
+			</div>
+			<div className="flex justify-end pt-2">
+				<Button onClick={handleSave} disabled={!hasChanges || isLoading || !hasSettingsUpdateAccess}>
+					{isLoading ? "Saving..." : "Save Changes"}
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+const RestartWarning = () => {
+	return (
+		<Alert variant="destructive" className="mt-2">
+			<AlertTriangle className="h-4 w-4" />
+			<AlertDescription>Need to restart Bifrost to apply changes.</AlertDescription>
+		</Alert>
+	);
+};

ui/app/workspace/custom-pricing/layout.tsx

@@ -0,0 +1,21 @@
+import { createFileRoute, Outlet, useChildMatches } from "@tanstack/react-router";
+import { NoPermissionView } from "@/components/noPermissionView";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import CustomPricingPage from "./page";
+
+function CustomPricingLayout({ children }: { children: React.ReactNode }) {
+	const hasSettingsAccess = useRbac(RbacResource.Settings, RbacOperation.View);
+	if (!hasSettingsAccess) {
+		return <NoPermissionView entity="custom pricing" />;
+	}
+	return <>{children}</>;
+}
+
+function RouteComponent() {
+	const childMatches = useChildMatches();
+	return <CustomPricingLayout>{childMatches.length === 0 ? <CustomPricingPage /> : <Outlet />}</CustomPricingLayout>;
+}
+
+export const Route = createFileRoute("/workspace/custom-pricing")({
+	component: RouteComponent,
+});

ui/app/workspace/custom-pricing/overrides/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import ScopedPricingOverridesPage from "./page";
+
+export const Route = createFileRoute("/workspace/custom-pricing/overrides")({
+	component: ScopedPricingOverridesPage,
+});

ui/app/workspace/custom-pricing/overrides/page.tsx

@@ -0,0 +1,9 @@
+import ScopedPricingOverridesView from "@/app/workspace/custom-pricing/overrides/scopedPricingOverridesView";
+
+export default function ScopedPricingOverridesPage() {
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<ScopedPricingOverridesView />
+		</div>
+	);
+}

ui/app/workspace/custom-pricing/overrides/pricingFieldSelector.tsx

@@ -0,0 +1,231 @@
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { ChevronDown, Plus, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import type { FieldErrors, PricingFieldKey } from "./pricingOverrideSheet";
+import { PRICING_FIELDS } from "./pricingOverrideSheet";
+
+type GroupKey = "chat" | "embedding" | "rerank" | "audio" | "image" | "video" | "ocr";
+
+const PRICING_GROUPS: { key: GroupKey; label: string }[] = [
+	{ key: "chat", label: "Chat / Text / Responses" },
+	{ key: "embedding", label: "Embedding" },
+	{ key: "rerank", label: "Rerank" },
+	{ key: "audio", label: "Audio" },
+	{ key: "image", label: "Image" },
+	{ key: "video", label: "Video" },
+	{ key: "ocr", label: "OCR" },
+];
+
+const REQUEST_TYPE_TO_CATEGORY: Record<string, GroupKey> = {
+	chat_completion: "chat",
+	text_completion: "chat",
+	responses: "chat",
+	embedding: "embedding",
+	rerank: "rerank",
+	speech: "audio",
+	transcription: "audio",
+	image_generation: "image",
+	image_variation: "image",
+	image_edit: "image",
+	video_generation: "video",
+	video_remix: "video",
+	ocr: "ocr",
+};
+
+interface PricingFieldSelectorProps {
+	values: Partial<Record<PricingFieldKey, string>>;
+	errors: FieldErrors;
+	selectedRequestTypes?: string[];
+	onChange: (key: PricingFieldKey, value: string) => void;
+	onFieldInteraction?: () => void;
+}
+
+export function PricingFieldSelector({ values, errors, selectedRequestTypes, onChange, onFieldInteraction }: PricingFieldSelectorProps) {
+	const [search, setSearch] = useState("");
+	const [openGroups, setOpenGroups] = useState<Set<GroupKey>>(new Set(["chat"]));
+
+	const [activeFields, setActiveFields] = useState<Set<PricingFieldKey>>(
+		() => new Set(PRICING_FIELDS.filter((f) => values[f.key] != null && values[f.key]!.trim() !== "").map((f) => f.key)),
+	);
+
+	// Sync active fields to exactly the set of keys that have non-empty values.
+	// This handles both loading new overrides (adds keys) and clearing the patch (removes stale keys).
+	useEffect(() => {
+		setActiveFields(new Set(PRICING_FIELDS.filter((f) => values[f.key] != null && values[f.key]!.trim() !== "").map((f) => f.key)));
+	}, [values]);
+
+	// Derive active categories from selected request types
+	const activeCategories = useMemo<Set<GroupKey> | null>(() => {
+		if (!selectedRequestTypes || selectedRequestTypes.length === 0) return null;
+		const cats = new Set<GroupKey>();
+		for (const rt of selectedRequestTypes) {
+			const cat = REQUEST_TYPE_TO_CATEGORY[rt];
+			if (cat) cats.add(cat);
+		}
+		return cats.size > 0 ? cats : null;
+	}, [selectedRequestTypes]);
+
+	const trimmedSearch = search.trim().toLowerCase();
+	const isSearching = trimmedSearch.length > 0;
+
+	const filteredFields = useMemo(() => {
+		if (!isSearching) return null;
+		return PRICING_FIELDS.filter((f) => f.label.toLowerCase().includes(trimmedSearch) || f.key.toLowerCase().includes(trimmedSearch));
+	}, [isSearching, trimmedSearch]);
+
+	// Fields visible per group when not searching, respecting activeCategories filter
+	const visibleGroupedFields = useMemo(
+		() =>
+			PRICING_GROUPS.map((group) => {
+				const fields = PRICING_FIELDS.filter((f) => {
+					if (f.group !== group.key) return false;
+					if (activeCategories === null) return true;
+					return (f.requestTypeGroups as readonly string[]).some((rg) => activeCategories.has(rg as GroupKey));
+				});
+				return { ...group, fields };
+			}).filter((g) => g.fields.length > 0),
+		[activeCategories],
+	);
+
+	const toggleGroup = (key: GroupKey) => {
+		setOpenGroups((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	};
+
+	const activateField = (key: PricingFieldKey) => {
+		setActiveFields((prev) => new Set([...prev, key]));
+	};
+
+	const deactivateField = (key: PricingFieldKey) => {
+		setActiveFields((prev) => {
+			const next = new Set(prev);
+			next.delete(key);
+			return next;
+		});
+		onFieldInteraction?.();
+		onChange(key, "");
+	};
+
+	const handleInputChange = (key: PricingFieldKey, value: string) => {
+		onFieldInteraction?.();
+		onChange(key, value);
+	};
+
+	const renderFieldRow = (field: { key: PricingFieldKey; label: string }) => {
+		const isActive = activeFields.has(field.key);
+		const hasValue = values[field.key]?.trim();
+		const error = errors[field.key];
+
+		if (!isActive) {
+			return (
+				<button
+					key={field.key}
+					type="button"
+					className="hover:bg-muted flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors"
+					onClick={() => activateField(field.key)}
+					data-testid={`pricing-field-activate-${field.key}`}
+				>
+					<Plus className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+					<span className="text-muted-foreground">{field.label}</span>
+				</button>
+			);
+		}
+
+		return (
+			<div key={field.key} className="rounded-sm px-1 py-1.5">
+				<div className="mb-1 flex items-center gap-2">
+					<span className="flex-1 text-sm font-medium">{field.label}</span>
+					<button
+						type="button"
+						className="text-muted-foreground hover:text-foreground rounded-sm p-0.5 transition-colors"
+						onClick={() => deactivateField(field.key)}
+						data-testid={`pricing-field-deactivate-${field.key}`}
+						title="Remove field"
+					>
+						<X className="h-3.5 w-3.5" />
+					</button>
+				</div>
+				<Input
+					data-testid={`pricing-override-field-input-${field.key}`}
+					type="text"
+					inputMode="decimal"
+					className={cn("h-8", hasValue && "ring-primary/40 ring-1")}
+					value={values[field.key] ?? ""}
+					onChange={(e) => handleInputChange(field.key, e.target.value)}
+					placeholder="0.0"
+				/>
+				{error && <p className="text-destructive mt-1 text-xs">{error}</p>}
+			</div>
+		);
+	};
+
+	return (
+		<div className="space-y-2">
+			<Input
+				placeholder="Search all pricing fields..."
+				value={search}
+				onChange={(e) => setSearch(e.target.value)}
+				className="h-9"
+				data-testid="pricing-field-search"
+			/>
+
+			<div className="rounded-md border">
+				{isSearching ? (
+					<div className="space-y-0.5 p-2">
+						{filteredFields!.length === 0 ? (
+							<div className="text-muted-foreground py-4 text-center text-sm">No fields match &ldquo;{search}&rdquo;</div>
+						) : (
+							filteredFields!.map((field) => renderFieldRow(field))
+						)}
+					</div>
+				) : (
+					<div className="divide-y">
+						{visibleGroupedFields.length === 0 ? (
+							<div className="text-muted-foreground py-4 text-center text-sm">No pricing fields for the selected request types</div>
+						) : (
+							visibleGroupedFields.map((group) => {
+								const isOpen = openGroups.has(group.key);
+								const valueCount = group.fields.filter((f) => values[f.key]?.trim()).length;
+
+								return (
+									<div key={group.key}>
+										<button
+											type="button"
+											className="hover:bg-muted/50 flex w-full items-center justify-between px-3 py-2.5 text-sm font-medium transition-colors"
+											onClick={() => toggleGroup(group.key)}
+											data-testid={`pricing-group-toggle-${group.key}`}
+										>
+											<span className="flex items-center gap-2">
+												{group.label}
+												{valueCount > 0 && (
+													<Badge variant="secondary" className="px-1.5 py-0 text-[10px]">
+														{valueCount}
+													</Badge>
+												)}
+											</span>
+											<ChevronDown
+												className={cn("text-muted-foreground h-4 w-4 transition-transform duration-200", isOpen && "rotate-180")}
+											/>
+										</button>
+
+										{isOpen && (
+											<div className="bg-muted/20 space-y-0.5 border-t px-2 pt-1 pb-2">
+												{group.fields.map((field) => renderFieldRow(field))}
+											</div>
+										)}
+									</div>
+								);
+							})
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

ui/app/workspace/custom-pricing/overrides/pricingOverridesEmptyState.tsx

@@ -0,0 +1,42 @@
+import { Button } from "@/components/ui/button";
+import { ArrowUpRight, SlidersHorizontal } from "lucide-react";
+
+const PRICING_OVERRIDES_DOCS_URL = "https://docs.getbifrost.ai/features/governance/custom-pricing";
+
+interface PricingOverridesEmptyStateProps {
+	onCreateClick: () => void;
+}
+
+export function PricingOverridesEmptyState({ onCreateClick }: PricingOverridesEmptyStateProps) {
+	return (
+		<div
+			className="flex min-h-[80vh] w-full flex-col items-center justify-center gap-4 py-16 text-center"
+			data-testid="pricing-overrides-empty-state"
+		>
+			<div className="text-muted-foreground">
+				<SlidersHorizontal className="h-[5.5rem] w-[5.5rem]" strokeWidth={1} />
+			</div>
+			<div className="flex flex-col gap-1">
+				<h1 className="text-muted-foreground text-xl font-medium">Pricing overrides customize cost tracking per scope</h1>
+				<div className="text-muted-foreground mx-auto mt-2 max-w-[600px] text-sm font-normal">
+					Define custom per-token prices for specific providers, keys, or virtual keys to accurately reflect your negotiated rates.
+				</div>
+				<div className="mx-auto mt-6 flex flex-row flex-wrap items-center justify-center gap-2">
+					<Button
+						variant="outline"
+						aria-label="Read more about pricing overrides (opens in new tab)"
+						data-testid="pricing-overrides-button-read-more"
+						onClick={() => {
+							window.open(`${PRICING_OVERRIDES_DOCS_URL}?utm_source=bfd`, "_blank", "noopener,noreferrer");
+						}}
+					>
+						Read more <ArrowUpRight className="text-muted-foreground h-3 w-3" />
+					</Button>
+					<Button aria-label="Create your first pricing override" data-testid="pricing-override-create-btn" onClick={onCreateClick}>
+						Create Override
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

ui/app/workspace/custom-pricing/overrides/scopedPricingOverridesView.tsx

@@ -0,0 +1,410 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alertDialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { useDebouncedValue } from "@/hooks/useDebounce";
+import { ProviderIconType, RenderProviderIcon } from "@/lib/constants/icons";
+import { getProviderLabel } from "@/lib/constants/logs";
+import {
+	getErrorMessage,
+	useDeletePricingOverrideMutation,
+	useGetPricingOverridesQuery,
+	useGetProvidersQuery,
+	useGetVirtualKeysQuery,
+} from "@/lib/store";
+import { useGetAllKeysQuery } from "@/lib/store/apis/providersApi";
+import { PricingOverride, PricingOverrideScopeKind } from "@/lib/types/governance";
+import { useLocation } from "@tanstack/react-router";
+import { ChevronLeft, ChevronRight, Edit, Plus, Search, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import PricingOverrideSheet from "./pricingOverrideSheet";
+import { PricingOverridesEmptyState } from "./pricingOverridesEmptyState";
+
+type ScopeFilter = "all" | PricingOverrideScopeKind;
+
+function parseScopeKind(value: string | null): ScopeFilter {
+	if (
+		value === "global" ||
+		value === "provider" ||
+		value === "provider_key" ||
+		value === "virtual_key" ||
+		value === "virtual_key_provider" ||
+		value === "virtual_key_provider_key"
+	) {
+		return value;
+	}
+	return "all";
+}
+
+// Returns the top-level scope label: "Global" or the virtual key name.
+function scopeLabel(override: PricingOverride, _virtualKeyMap: Map<string, string>): string {
+	const scopeKind = resolveScopeKind(override);
+	if (override.virtual_key_id && scopeKind.startsWith("virtual_key")) {
+		return "Virtual Key";
+	}
+	return "Global";
+}
+
+// Returns the key label for the override, or "-" when no specific key is scoped.
+function keyLabel(override: PricingOverride, keyLabelMap: Map<string, string>): string {
+	if (!override.provider_key_id) {
+		if (!override.provider_id) return "-";
+		return "All Keys";
+	}
+	return keyLabelMap.get(override.provider_key_id) || override.provider_key_id;
+}
+
+// Returns the provider label for the override, or "-" if not applicable.
+function providerLabel(override: PricingOverride, providerMap: Map<string, string>, keyProviderMap: Map<string, string>): string {
+	const scopeKind = resolveScopeKind(override);
+	switch (scopeKind) {
+		case "provider":
+		case "virtual_key_provider":
+			return providerMap.get(override.provider_id || "") || override.provider_id || "-";
+		case "provider_key":
+		case "virtual_key_provider_key": {
+			const keyID = override.provider_key_id || "";
+			return providerMap.get(keyProviderMap.get(keyID) || "") || keyProviderMap.get(keyID) || "-";
+		}
+		default:
+			return "-";
+	}
+}
+
+function resolveScopeKind(override: PricingOverride): PricingOverrideScopeKind {
+	if (
+		override.scope_kind === "global" ||
+		override.scope_kind === "provider" ||
+		override.scope_kind === "provider_key" ||
+		override.scope_kind === "virtual_key" ||
+		override.scope_kind === "virtual_key_provider" ||
+		override.scope_kind === "virtual_key_provider_key"
+	) {
+		return override.scope_kind;
+	}
+	if (override.virtual_key_id) {
+		if (override.provider_key_id) return "virtual_key_provider_key";
+		if (override.provider_id) return "virtual_key_provider";
+		return "virtual_key";
+	}
+	if (override.provider_key_id) return "provider_key";
+	if (override.provider_id) return "provider";
+	return "global";
+}
+
+const PAGE_SIZE = 25;
+
+export default function ScopedPricingOverridesView() {
+	const location = useLocation();
+	const searchParams = useMemo(() => new URLSearchParams(location.searchStr), [location.searchStr]);
+
+	const [scopeKind, setScopeKind] = useState<ScopeFilter>(() => parseScopeKind(searchParams.get("scope_kind")));
+	const [virtualKeyID, setVirtualKeyID] = useState(() => (searchParams.get("virtual_key_id") || "").trim());
+	const [providerID, setProviderID] = useState(() => (searchParams.get("provider_id") || "").trim());
+	const [providerKeyID, setProviderKeyID] = useState(() => (searchParams.get("provider_key_id") || "").trim());
+
+	const [search, setSearch] = useState("");
+	const [offset, setOffset] = useState(0);
+	const debouncedSearch = useDebouncedValue(search, 300);
+
+	useEffect(() => {
+		setScopeKind(parseScopeKind(searchParams.get("scope_kind")));
+		setVirtualKeyID((searchParams.get("virtual_key_id") || "").trim());
+		setProviderID((searchParams.get("provider_id") || "").trim());
+		setProviderKeyID((searchParams.get("provider_key_id") || "").trim());
+	}, [searchParams]);
+
+	// Reset to first page when filters or search change
+	useEffect(() => {
+		setOffset(0);
+	}, [scopeKind, virtualKeyID, providerID, providerKeyID, debouncedSearch]);
+
+	const queryArgs = useMemo(
+		() => ({
+			scopeKind: scopeKind === "all" ? undefined : scopeKind,
+			virtualKeyID: virtualKeyID || undefined,
+			providerID: providerID || undefined,
+			providerKeyID: providerKeyID || undefined,
+			limit: PAGE_SIZE,
+			offset,
+			search: debouncedSearch || undefined,
+		}),
+		[scopeKind, virtualKeyID, providerID, providerKeyID, offset, debouncedSearch],
+	);
+
+	const { data, isLoading, error } = useGetPricingOverridesQuery(queryArgs);
+
+	// Snap offset back when total shrinks past current page
+	const totalCount = data?.total_count ?? 0;
+	useEffect(() => {
+		if (offset < totalCount) return;
+		setOffset(totalCount === 0 ? 0 : Math.floor((totalCount - 1) / PAGE_SIZE) * PAGE_SIZE);
+	}, [totalCount, offset]);
+	const { data: providersData } = useGetProvidersQuery();
+	const { data: virtualKeysData } = useGetVirtualKeysQuery();
+	const { data: allKeysData = [] } = useGetAllKeysQuery();
+	const [deleteOverride, { isLoading: isDeleting }] = useDeletePricingOverrideMutation();
+
+	useEffect(() => {
+		if (error) {
+			toast.error("Failed to load pricing overrides", { description: getErrorMessage(error) });
+		}
+	}, [error]);
+
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [editingOverride, setEditingOverride] = useState<PricingOverride | null>(null);
+	const [deleteTarget, setDeleteTarget] = useState<PricingOverride | null>(null);
+
+	const rows = data?.pricing_overrides ?? [];
+	const providers = useMemo(() => providersData ?? [], [providersData]);
+	const virtualKeys = useMemo(() => virtualKeysData?.virtual_keys ?? [], [virtualKeysData]);
+
+	const providerMap = useMemo(() => new Map<string, string>(providers.map((provider) => [provider.name, provider.name])), [providers]);
+	const providerKeyOptions = useMemo(
+		() =>
+			allKeysData.map((key) => ({
+				id: key.key_id,
+				label: key.name || key.key_id,
+				providerName: key.provider,
+			})),
+		[allKeysData],
+	);
+	const providerKeyProviderMap = useMemo(
+		() => new Map<string, string>(providerKeyOptions.map((key) => [key.id, key.providerName])),
+		[providerKeyOptions],
+	);
+	const providerKeyLabelMap = useMemo(
+		() => new Map<string, string>(providerKeyOptions.map((key) => [key.id, key.label])),
+		[providerKeyOptions],
+	);
+	const virtualKeyMap = useMemo(() => new Map<string, string>(virtualKeys.map((vk) => [vk.id, vk.name])), [virtualKeys]);
+
+	const createScopeLock = useMemo(() => {
+		if (scopeKind === "all") return undefined;
+		return {
+			scopeKind,
+			virtualKeyID: virtualKeyID || undefined,
+			providerID: providerID || undefined,
+			providerKeyID: providerKeyID || undefined,
+			label: `${scopeKind}${virtualKeyID || providerID || providerKeyID ? " (filtered)" : ""}`,
+		};
+	}, [scopeKind, virtualKeyID, providerID, providerKeyID]);
+
+	const openCreateDrawer = () => {
+		setEditingOverride(null);
+		setIsDrawerOpen(true);
+	};
+
+	const openEditDrawer = (override: PricingOverride) => {
+		setEditingOverride(override);
+		setIsDrawerOpen(true);
+	};
+
+	const handleDeleteConfirm = async () => {
+		if (!deleteTarget) return;
+		try {
+			await deleteOverride(deleteTarget.id).unwrap();
+			toast.success("Pricing override deleted");
+			setDeleteTarget(null);
+		} catch (deleteError) {
+			toast.error("Failed to delete pricing override", { description: getErrorMessage(deleteError) });
+		}
+	};
+
+	const hasActiveFilters = debouncedSearch || scopeKind !== "all" || virtualKeyID || providerID || providerKeyID;
+
+	if (!isLoading && !error && totalCount === 0 && !hasActiveFilters) {
+		return (
+			<>
+				<PricingOverridesEmptyState onCreateClick={openCreateDrawer} />
+				<PricingOverrideSheet
+					open={isDrawerOpen}
+					onOpenChange={setIsDrawerOpen}
+					editingOverride={editingOverride}
+					scopeLock={createScopeLock}
+				/>
+			</>
+		);
+	}
+
+	return (
+		<div className="space-y-4">
+			<div className="flex items-center justify-between gap-4">
+				<div>
+					<h2 className="text-lg font-semibold tracking-tight">Pricing Overrides</h2>
+					<p className="text-muted-foreground text-sm">
+						Set custom rates for any model across global or virtual key scopes, optionally narrowed to a specific provider or key
+					</p>
+				</div>
+				<Button data-testid="pricing-override-create-btn" onClick={openCreateDrawer} className="gap-2">
+					<Plus className="h-4 w-4" />
+					<span className="hidden sm:inline">New Override</span>
+				</Button>
+			</div>
+
+			{/* Search */}
+			<div className="relative max-w-sm">
+				<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+				<Input
+					aria-label="Search pricing overrides by name"
+					placeholder="Search by name..."
+					value={search}
+					onChange={(e) => setSearch(e.target.value)}
+					className="pl-9"
+					data-testid="pricing-overrides-search-input"
+				/>
+			</div>
+
+			<div className="overflow-hidden rounded-sm border">
+				{isLoading ? (
+					<div className="p-4 text-sm">Loading overrides...</div>
+				) : error ? (
+					<div className="p-4 text-sm text-red-500">Failed to load pricing overrides. Please try refreshing the page.</div>
+				) : (
+					<Table>
+						<TableHeader>
+							<TableRow className="bg-muted/50">
+								<TableHead className="font-semibold">Name</TableHead>
+								<TableHead className="font-semibold">Scope</TableHead>
+								<TableHead className="font-semibold">Provider</TableHead>
+								<TableHead className="font-semibold">Key</TableHead>
+								<TableHead className="font-semibold">Model</TableHead>
+								<TableHead className="w-[100px] text-right font-semibold">Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{rows.length === 0 ? (
+								<TableRow>
+									<TableCell colSpan={6} className="h-24 text-center">
+										<span className="text-muted-foreground text-sm">No matching pricing overrides found.</span>
+									</TableCell>
+								</TableRow>
+							) : (
+								rows.map((row) => (
+									<TableRow key={row.id} className="hover:bg-muted/50 cursor-pointer transition-colors">
+										<TableCell>{row.name || "-"}</TableCell>
+										<TableCell>
+											<Badge variant="secondary">{scopeLabel(row, virtualKeyMap)}</Badge>
+										</TableCell>
+										<TableCell>
+											{(() => {
+												const name = providerLabel(row, providerMap, providerKeyProviderMap);
+												if (name === "-") return <span className="text-muted-foreground text-sm">-</span>;
+												return (
+													<div className="flex items-center gap-1.5">
+														<RenderProviderIcon provider={name as ProviderIconType} size="sm" className="h-4 w-4 shrink-0" />
+														<span className="text-sm">{getProviderLabel(name)}</span>
+													</div>
+												);
+											})()}
+										</TableCell>
+										<TableCell>{keyLabel(row, providerKeyLabelMap)}</TableCell>
+										<TableCell>{row.pattern}</TableCell>
+										<TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+											<div className="flex items-center justify-end gap-2">
+												<Button
+													data-testid={`pricing-override-edit-btn-${row.id}`}
+													variant="ghost"
+													size="sm"
+													onClick={() => openEditDrawer(row)}
+													aria-label="Edit pricing override"
+												>
+													<Edit className="h-4 w-4" />
+												</Button>
+												<Button
+													data-testid={`pricing-override-delete-btn-${row.id}`}
+													variant="ghost"
+													size="sm"
+													onClick={() => setDeleteTarget(row)}
+													aria-label="Delete pricing override"
+												>
+													<Trash2 className="h-4 w-4" />
+												</Button>
+											</div>
+										</TableCell>
+									</TableRow>
+								))
+							)}
+						</TableBody>
+					</Table>
+				)}
+			</div>
+
+			{/* Pagination */}
+			{totalCount > 0 && (
+				<div className="flex items-center justify-between px-2">
+					<p className="text-muted-foreground text-sm">
+						Showing {offset + 1}-{Math.min(offset + PAGE_SIZE, totalCount)} of {totalCount}
+					</p>
+					<div className="flex gap-2">
+						<Button
+							variant="outline"
+							size="sm"
+							disabled={offset === 0}
+							onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
+							data-testid="pricing-overrides-pagination-prev-btn"
+						>
+							<ChevronLeft className="mr-1 h-4 w-4" />
+							Previous
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							disabled={offset + PAGE_SIZE >= totalCount}
+							onClick={() => setOffset(offset + PAGE_SIZE)}
+							data-testid="pricing-overrides-pagination-next-btn"
+						>
+							Next
+							<ChevronRight className="ml-1 h-4 w-4" />
+						</Button>
+					</div>
+				</div>
+			)}
+
+			<PricingOverrideSheet
+				open={isDrawerOpen}
+				onOpenChange={setIsDrawerOpen}
+				editingOverride={editingOverride}
+				scopeLock={createScopeLock}
+			/>
+
+			<AlertDialog open={!!deleteTarget} onOpenChange={(open) => (!open ? setDeleteTarget(null) : undefined)}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete Pricing Override</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete &quot;{deleteTarget?.name}&quot;? This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel data-testid="pricing-override-delete-cancel-btn" disabled={isDeleting}>
+							Cancel
+						</AlertDialogCancel>
+						<AlertDialogAction
+							data-testid="pricing-override-delete-confirm-btn"
+							onClick={(e) => {
+								e.preventDefault();
+								void handleDeleteConfirm();
+							}}
+							disabled={isDeleting}
+							className="bg-destructive hover:bg-destructive/90"
+						>
+							{isDeleting ? "Deleting..." : "Delete"}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
+	);
+}

ui/app/workspace/custom-pricing/page.tsx

@@ -0,0 +1,9 @@
+import ModelSettingsView from "@/app/workspace/config/views/modelSettingsView";
+
+export default function CustomPricingPage() {
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<ModelSettingsView />
+		</div>
+	);
+}

ui/app/workspace/dashboard/components/charts/cacheTokenMeterChart.tsx

@@ -0,0 +1,188 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { TokenHistogramResponse } from "@/lib/types/logs";
+import { Info } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+
+interface CacheTokenMeterChartProps {
+	data: TokenHistogramResponse | null;
+}
+
+const METER_COLORS = {
+	cached: "#06b6d4",
+	input: "#3b82f6",
+};
+
+const formatTokenCount = (count: number): string => {
+	if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
+	if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
+	return count.toLocaleString();
+};
+
+interface GaugeGeometry {
+	cx: number;
+	cy: number;
+	innerRadius: number;
+	outerRadius: number;
+}
+
+function Needle({ percentage, geometry }: { percentage: number; geometry: GaugeGeometry }) {
+	const normalizedPercentage = Math.max(0, Math.min(percentage, 100));
+	const { cx, cy, outerRadius } = geometry;
+
+	const angle = 180 - (normalizedPercentage / 100) * 180;
+	const rad = (Math.PI * angle) / 180;
+	const needleLen = outerRadius * 0.94;
+
+	const tipX = cx + needleLen * Math.cos(rad);
+	const tipY = cy - needleLen * Math.sin(rad);
+
+	const perpRad = rad + Math.PI / 2;
+	const hw = 3.5;
+	const bx1 = cx + hw * Math.cos(perpRad);
+	const by1 = cy - hw * Math.sin(perpRad);
+	const bx2 = cx - hw * Math.cos(perpRad);
+	const by2 = cy + hw * Math.sin(perpRad);
+
+	return (
+		<g>
+			<path d={`M ${bx1} ${by1} L ${tipX} ${tipY} L ${bx2} ${by2} Z`} fill="#71717a" />
+			<circle cx={cx} cy={cy} r={5} fill="#71717a" />
+		</g>
+	);
+}
+
+export default function CacheTokenMeterChart({ data }: CacheTokenMeterChartProps) {
+	const chartContainerRef = useRef<HTMLDivElement | null>(null);
+	const [{ width, height }, setChartSize] = useState({ width: 0, height: 0 });
+
+	useEffect(() => {
+		const node = chartContainerRef.current;
+		if (!node) return;
+
+		const updateSize = () => {
+			const nextWidth = node.clientWidth;
+			const nextHeight = node.clientHeight;
+			setChartSize((current) =>
+				current.width === nextWidth && current.height === nextHeight ? current : { width: nextWidth, height: nextHeight },
+			);
+		};
+
+		updateSize();
+
+		const resizeObserver = new ResizeObserver(updateSize);
+		resizeObserver.observe(node);
+
+		return () => resizeObserver.disconnect();
+	}, []);
+
+	const { percentage, totalCachedRead, totalPromptTokens } = useMemo(() => {
+		if (!data?.buckets || data.buckets.length === 0) {
+			return { percentage: 0, totalCachedRead: 0, totalPromptTokens: 0 };
+		}
+
+		let cachedRead = 0;
+		let promptTokens = 0;
+
+		for (const bucket of data.buckets) {
+			cachedRead += bucket.cached_read_tokens;
+			promptTokens += bucket.prompt_tokens;
+		}
+
+		if (promptTokens === 0) {
+			return { percentage: 0, totalCachedRead: cachedRead, totalPromptTokens: promptTokens };
+		}
+		return {
+			percentage: Math.max(0, Math.min(100, (cachedRead / promptTokens) * 100)),
+			totalCachedRead: cachedRead,
+			totalPromptTokens: promptTokens,
+		};
+	}, [data]);
+
+	const gaugeGeometry = useMemo<GaugeGeometry | null>(() => {
+		if (width <= 0 || height <= 0) return null;
+
+		const horizontalRadius = width * 0.4;
+		const verticalRadius = Math.max(24, height - 10);
+		const outerRadius = Math.min(horizontalRadius, verticalRadius);
+		const innerRadius = outerRadius * 0.58;
+		const cx = width / 2;
+		const cy = Math.min(height - 4, outerRadius + 4);
+
+		return { cx, cy, innerRadius, outerRadius };
+	}, [width, height]);
+
+	if (!data?.buckets || data.buckets.length === 0 || totalPromptTokens === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const valueData = [
+		{ name: "cached", value: percentage },
+		{ name: "remaining", value: 100 - percentage },
+	];
+
+	return (
+		<ChartErrorBoundary resetKey={`${data?.buckets?.length ?? 0}-${totalCachedRead}-${totalPromptTokens}`}>
+			<div className="grid h-full grid-rows-[104px_auto_auto] items-start overflow-hidden">
+				<div ref={chartContainerRef} className="relative h-[104px] w-full">
+					{gaugeGeometry && (
+						<ResponsiveContainer width="100%" height="100%">
+							<PieChart>
+								<Pie
+									data={valueData}
+									cx={gaugeGeometry.cx}
+									cy={gaugeGeometry.cy}
+									startAngle={180}
+									endAngle={0}
+									innerRadius={gaugeGeometry.innerRadius}
+									outerRadius={gaugeGeometry.outerRadius}
+									dataKey="value"
+									stroke="none"
+									isAnimationActive={false}
+								>
+									<Cell fill={METER_COLORS.cached} />
+									<Cell fill={METER_COLORS.input} opacity={0.22} />
+								</Pie>
+							</PieChart>
+						</ResponsiveContainer>
+					)}
+					{gaugeGeometry && (
+						<svg className="pointer-events-none absolute inset-0" viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
+							<Needle percentage={percentage} geometry={gaugeGeometry} />
+						</svg>
+					)}
+				</div>
+				<div className="flex flex-col items-center pt-1 leading-none">
+					<div className="text-muted-foreground text-3xl font-semibold tracking-tight">{percentage.toFixed(1)}%</div>
+					<div className="mt-1 flex items-center gap-1 text-[11px] text-zinc-400">
+						<span>of input tokens cached</span>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<button
+									type="button"
+									data-testid="cache-meter-info-btn"
+									className="text-zinc-500 transition-colors hover:text-zinc-300"
+									aria-label="More information about cache hit rate"
+								>
+									<Info className="h-3 w-3" />
+								</button>
+							</TooltipTrigger>
+							<TooltipContent side="top">This reflects provider-level caching, not Bifrost semantic cache hits.</TooltipContent>
+						</Tooltip>
+					</div>
+				</div>
+				<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-2 text-[11px] leading-none">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: METER_COLORS.cached }} />
+						<span className="text-primary">Cached: {formatTokenCount(totalCachedRead)}</span>
+					</span>
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: METER_COLORS.input }} />
+						<span className="text-muted-foreground">Input: {formatTokenCount(totalPromptTokens)}</span>
+					</span>
+				</div>
+			</div>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/charts/chartCard.tsx

@@ -0,0 +1,71 @@
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+interface ChartCardProps {
+  title: string;
+  children: ReactNode;
+  headerActions?: ReactNode;
+  loading?: boolean;
+  testId?: string;
+  height?: string;
+  className?: string;
+}
+
+export function ChartCard({
+  title,
+  children,
+  headerActions,
+  loading,
+  testId,
+  height = "200px",
+  className,
+}: ChartCardProps) {
+  if (loading) {
+    return (
+      <Card
+        className={cn("min-w-0 rounded-sm p-2 shadow-none", className)}
+        data-testid={testId}
+      >
+        <div className="mb-2 space-y-2">
+          <span className="text-primary pl-2 text-sm font-medium">{title}</span>
+          {headerActions && (
+            <div
+              className="w-full min-w-0"
+              data-testid={testId ? `${testId}-actions` : undefined}
+            >
+              {headerActions}
+            </div>
+          )}
+        </div>
+        <div
+          style={{ height }}
+          data-testid={testId ? `${testId}-chart-skeleton` : undefined}
+        >
+          <Skeleton className="h-full w-full" />
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card
+      className={cn("min-w-0 rounded-sm p-2 shadow-none", className)}
+      data-testid={testId}
+    >
+      <div className="mb-2 space-y-2">
+        <span className="text-primary pl-2 text-sm font-medium">{title}</span>
+        {headerActions && (
+          <div
+            className="w-full min-w-0"
+            data-testid={testId ? `${testId}-actions` : undefined}
+          >
+            {headerActions}
+          </div>
+        )}
+      </div>
+      <div style={{ height }}>{children}</div>
+    </Card>
+  );
+}

ui/app/workspace/dashboard/components/charts/chartErrorBoundary.tsx

@@ -0,0 +1,60 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts";
+
+// Empty chart placeholder when data fails to render
+function EmptyChart() {
+	return (
+		<ResponsiveContainer width="100%" height="100%">
+			<BarChart
+				data={[
+					{ name: "", value: 0 },
+					{ name: " ", value: 0 },
+				]}
+			>
+				<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+				<XAxis dataKey="name" tick={{ fontSize: 13, className: "fill-zinc-500", dy: 5 }} tickLine={false} axisLine={false} />
+				<YAxis tick={{ fontSize: 13, className: "fill-zinc-500" }} tickLine={false} axisLine={false} width={40} domain={[0, 1]} />
+			</BarChart>
+		</ResponsiveContainer>
+	);
+}
+
+interface ChartErrorBoundaryProps {
+	children: ReactNode;
+	resetKey?: string;
+}
+
+interface ChartErrorBoundaryState {
+	hasError: boolean;
+	prevResetKey?: string;
+}
+
+export class ChartErrorBoundary extends Component<ChartErrorBoundaryProps, ChartErrorBoundaryState> {
+	constructor(props: ChartErrorBoundaryProps) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError(_: Error) {
+		return { hasError: true };
+	}
+
+	static getDerivedStateFromProps(props: ChartErrorBoundaryProps, state: ChartErrorBoundaryState) {
+		// Reset error state when resetKey changes
+		if (props.resetKey !== state.prevResetKey) {
+			return { hasError: false, prevResetKey: props.resetKey };
+		}
+		return null;
+	}
+
+	componentDidCatch(error: Error, _errorInfo: ErrorInfo) {
+		console.warn("Chart rendering error:", error.message);
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return <EmptyChart />;
+		}
+		return this.props.children;
+	}
+}

ui/app/workspace/dashboard/components/charts/chartTypeToggle.tsx

@@ -0,0 +1,35 @@
+import { Button } from "@/components/ui/button";
+import { BarChart3, LineChart } from "lucide-react";
+
+export type ChartType = "bar" | "line";
+
+interface ChartTypeToggleProps {
+	chartType: ChartType;
+	onToggle: (type: ChartType) => void;
+	"data-testid"?: string;
+}
+
+export function ChartTypeToggle({ chartType, onToggle, "data-testid": testId }: ChartTypeToggleProps) {
+	return (
+		<div className="flex items-center gap-1" data-testid={testId}>
+			<Button
+				variant={chartType === "bar" ? "secondary" : "ghost"}
+				size="sm"
+				className="h-7 w-7 p-0"
+				onClick={() => onToggle("bar")}
+				data-testid={testId ? `${testId}-bar-btn` : undefined}
+			>
+				<BarChart3 className="h-3.5 w-3.5" />
+			</Button>
+			<Button
+				variant={chartType === "line" ? "secondary" : "ghost"}
+				size="sm"
+				className="h-7 w-7 p-0"
+				onClick={() => onToggle("line")}
+				data-testid={testId ? `${testId}-line-btn` : undefined}
+			>
+				<LineChart className="h-3.5 w-3.5" />
+			</Button>
+		</div>
+	);
+}

ui/app/workspace/dashboard/components/charts/costChart.tsx

@@ -0,0 +1,175 @@
+import type { CostHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { formatCost, formatFullTimestamp, formatTimestamp, getModelColor } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+interface CostChartProps {
+	data: CostHistogramResponse | null;
+	chartType: ChartType;
+	startTime: number;
+	endTime: number;
+	selectedModel: string;
+}
+
+function CustomTooltip({ active, payload, selectedModel, models }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				{selectedModel === "all" ? (
+					<>
+						{models.map((model: string, idx: number) => {
+							const cost = data.by_model?.[model] || 0;
+							if (cost === 0) return null;
+							return (
+								<div key={model} className="flex items-center justify-between gap-4">
+									<span className="flex items-center gap-1.5">
+										<span className="h-2 w-2 rounded-full" style={{ backgroundColor: getModelColor(idx) }} />
+										<span className="max-w-[120px] truncate text-zinc-600 dark:text-zinc-400">{model}</span>
+									</span>
+									<span className="font-medium">{formatCost(cost)}</span>
+								</div>
+							);
+						})}
+						<div className="flex items-center justify-between gap-4 border-t border-zinc-200 pt-1 dark:border-zinc-700">
+							<span className="text-zinc-600 dark:text-zinc-400">Total</span>
+							<span className="font-medium">{formatCost(data.total_cost)}</span>
+						</div>
+					</>
+				) : (
+					<div className="flex items-center justify-between gap-4">
+						<span className="flex items-center gap-1.5">
+							<span className="h-2 w-2 rounded-full" style={{ backgroundColor: getModelColor(0) }} />
+							<span className="text-zinc-600 dark:text-zinc-400">{selectedModel}</span>
+						</span>
+						<span className="font-medium">{formatCost(data.by_model?.[selectedModel] || 0)}</span>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export function CostChart({ data, chartType, startTime, endTime, selectedModel }: CostChartProps) {
+	const { chartData, displayModels } = useMemo(() => {
+		if (!data?.buckets || !data.bucket_size_seconds) {
+			return { chartData: [], displayModels: [] };
+		}
+
+		const models = selectedModel === "all" ? data.models : [selectedModel];
+
+		const processed = data.buckets.map((bucket, index) => {
+			const item: any = {
+				...bucket,
+				index,
+				formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
+			};
+			// Flatten by_model for easier chart access
+			models.forEach((model, idx) => {
+				item[`model_${idx}`] = bucket.by_model?.[model] || 0;
+			});
+			return item;
+		});
+
+		return { chartData: processed, displayModels: models };
+	}, [data, selectedModel]);
+
+	if (!data?.buckets || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const commonProps = {
+		data: chartData,
+		margin: { top: 6, right: 4, left: 4, bottom: 0 },
+	};
+
+	return (
+		<ChartErrorBoundary resetKey={`${startTime}-${endTime}-${chartData.length}-${selectedModel}`}>
+			<ResponsiveContainer width="100%" height="100%">
+				{chartType === "bar" ? (
+					<BarChart {...commonProps} barCategoryGap={1}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={50}
+							tickFormatter={(v) => formatCost(v)}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 0.01)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip
+							content={<CustomTooltip selectedModel={selectedModel} models={data.models} />}
+							cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }}
+						/>
+						{displayModels.map((model, idx) => (
+							<Bar
+								isAnimationActive={false}
+								key={model}
+								dataKey={`model_${idx}`}
+								stackId="cost"
+								fill={getModelColor(idx)}
+								fillOpacity={0.9}
+								barSize={30}
+								radius={idx === displayModels.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
+							/>
+						))}
+					</BarChart>
+				) : (
+					<AreaChart {...commonProps}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={50}
+							tickFormatter={(v) => formatCost(v)}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 0.01)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip selectedModel={selectedModel} models={data.models} />} />
+						{displayModels.map((model, idx) => (
+							<Area
+								isAnimationActive={false}
+								key={model}
+								type="monotone"
+								dataKey={`model_${idx}`}
+								stackId="1"
+								stroke={getModelColor(idx)}
+								fill={getModelColor(idx)}
+								fillOpacity={0.7}
+							/>
+						))}
+					</AreaChart>
+				)}
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/charts/latencyChart.tsx

@@ -0,0 +1,204 @@
+import type { LatencyHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { formatFullTimestamp, formatLatency, formatTimestamp, LATENCY_COLORS } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+interface LatencyChartProps {
+	data: LatencyHistogramResponse | null;
+	chartType: ChartType;
+	startTime: number;
+	endTime: number;
+}
+
+function CustomTooltip({ active, payload }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.avg }} />
+						<span className="text-zinc-600 dark:text-zinc-400">Avg</span>
+					</span>
+					<span className="font-medium">{formatLatency(data.avg_latency)}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.p90 }} />
+						<span className="text-zinc-600 dark:text-zinc-400">P90</span>
+					</span>
+					<span className="font-medium">{formatLatency(data.p90_latency)}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.p95 }} />
+						<span className="text-zinc-600 dark:text-zinc-400">P95</span>
+					</span>
+					<span className="font-medium">{formatLatency(data.p95_latency)}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.p99 }} />
+						<span className="text-zinc-600 dark:text-zinc-400">P99</span>
+					</span>
+					<span className="font-medium">{formatLatency(data.p99_latency)}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4 border-t border-zinc-200 pt-1 dark:border-zinc-700">
+					<span className="text-zinc-600 dark:text-zinc-400">Requests</span>
+					<span className="font-medium">{data.total_requests.toLocaleString()}</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function LatencyChart({ data, chartType, startTime, endTime }: LatencyChartProps) {
+	const chartData = useMemo(() => {
+		if (!data?.buckets || !data.bucket_size_seconds) {
+			return [];
+		}
+
+		return data.buckets.map((bucket, index) => ({
+			...bucket,
+			index,
+			formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
+		}));
+	}, [data]);
+
+	if (!data?.buckets || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const commonProps = {
+		data: chartData,
+		margin: { top: 6, right: 4, left: 4, bottom: 0 },
+	};
+
+	return (
+		<ChartErrorBoundary resetKey={`${startTime}-${endTime}-${chartData.length}`}>
+			<ResponsiveContainer width="100%" height="100%">
+				{chartType === "bar" ? (
+					<BarChart {...commonProps} barCategoryGap={1}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={55}
+							tickFormatter={formatLatency}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+						<Bar
+							isAnimationActive={false}
+							dataKey="avg_latency"
+							fill={LATENCY_COLORS.avg}
+							fillOpacity={0.9}
+							barSize={8}
+							radius={[2, 2, 0, 0]}
+						/>
+						<Bar
+							isAnimationActive={false}
+							dataKey="p90_latency"
+							fill={LATENCY_COLORS.p90}
+							fillOpacity={0.9}
+							barSize={8}
+							radius={[2, 2, 0, 0]}
+						/>
+						<Bar
+							isAnimationActive={false}
+							dataKey="p95_latency"
+							fill={LATENCY_COLORS.p95}
+							fillOpacity={0.9}
+							barSize={8}
+							radius={[2, 2, 0, 0]}
+						/>
+						<Bar
+							isAnimationActive={false}
+							dataKey="p99_latency"
+							fill={LATENCY_COLORS.p99}
+							fillOpacity={0.9}
+							barSize={8}
+							radius={[2, 2, 0, 0]}
+						/>
+					</BarChart>
+				) : (
+					<AreaChart {...commonProps}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={55}
+							tickFormatter={formatLatency}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip />} />
+						{/* Render P99 first (behind), then overlay in descending order so Avg is in front */}
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="p99_latency"
+							stroke={LATENCY_COLORS.p99}
+							fill={LATENCY_COLORS.p99}
+							fillOpacity={0.15}
+						/>
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="p95_latency"
+							stroke={LATENCY_COLORS.p95}
+							fill={LATENCY_COLORS.p95}
+							fillOpacity={0.2}
+						/>
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="p90_latency"
+							stroke={LATENCY_COLORS.p90}
+							fill={LATENCY_COLORS.p90}
+							fillOpacity={0.25}
+						/>
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="avg_latency"
+							stroke={LATENCY_COLORS.avg}
+							fill={LATENCY_COLORS.avg}
+							fillOpacity={0.4}
+						/>
+					</AreaChart>
+				)}
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/charts/logVolumeChart.tsx

@@ -0,0 +1,219 @@
+import type { LogsHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import {
+  CHART_COLORS,
+  formatFullTimestamp,
+  formatTimestamp,
+} from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+interface LogVolumeChartProps {
+  data: LogsHistogramResponse | null;
+  chartType: ChartType;
+  startTime: number;
+  endTime: number;
+}
+
+type LogVolumeDataPoint = {
+  timestamp: string;
+  count: number;
+  success: number;
+  error: number;
+  index: number;
+  formattedTime: string;
+};
+
+interface CustomTooltipProps {
+  active?: boolean;
+  payload?: Array<{ payload?: LogVolumeDataPoint }>;
+}
+
+function CustomTooltip({ active, payload }: CustomTooltipProps) {
+  if (!active || !payload || !payload.length) return null;
+
+  const data = payload[0]?.payload;
+  if (!data) return null;
+
+  return (
+    <div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+      <div className="mb-1 text-xs text-zinc-500">
+        {formatFullTimestamp(data.timestamp)}
+      </div>
+      <div className="space-y-1 text-sm">
+        <div className="flex items-center justify-between gap-4">
+          <span className="flex items-center gap-1.5">
+            <span className="h-2 w-2 rounded-full bg-emerald-500" />
+            <span className="text-zinc-600 dark:text-zinc-400">Success</span>
+          </span>
+          <span className="font-medium text-emerald-600 dark:text-emerald-400">
+            {data.success.toLocaleString()}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-4">
+          <span className="flex items-center gap-1.5">
+            <span className="h-2 w-2 rounded-full bg-red-500" />
+            <span className="text-zinc-600 dark:text-zinc-400">Error</span>
+          </span>
+          <span className="font-medium text-red-600 dark:text-red-400">
+            {data.error.toLocaleString()}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function LogVolumeChart({
+  data,
+  chartType,
+  startTime,
+  endTime,
+}: LogVolumeChartProps) {
+  const chartData = useMemo(() => {
+    if (!data?.buckets || !data.bucket_size_seconds) {
+      return [];
+    }
+
+    return data.buckets.map((bucket, index) => ({
+      ...bucket,
+      index,
+      formattedTime: formatTimestamp(
+        bucket.timestamp,
+        data.bucket_size_seconds,
+      ),
+    }));
+  }, [data]);
+
+  if (!data?.buckets || chartData.length === 0) {
+    return (
+      <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
+        No data available
+      </div>
+    );
+  }
+
+  const commonProps = {
+    data: chartData,
+    margin: { top: 6, right: 4, left: 12, bottom: 0 },
+  };
+
+  return (
+    <ChartErrorBoundary
+      resetKey={`${startTime}-${endTime}-${chartData.length}`}
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        {chartType === "bar" ? (
+          <BarChart {...commonProps} barCategoryGap={1}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              vertical={false}
+              className="stroke-zinc-200 dark:stroke-zinc-700"
+            />
+            <XAxis
+              dataKey="index"
+              type="number"
+              domain={[-0.5, chartData.length - 0.5]}
+              tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(idx) =>
+                chartData[Math.round(idx)]?.formattedTime || ""
+              }
+              interval="preserveStartEnd"
+            />
+            <YAxis
+              tick={{ fontSize: 11, className: "fill-zinc-500" }}
+              tickLine={false}
+              axisLine={false}
+              width={56}
+              tickFormatter={(v) => v.toLocaleString()}
+              domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+              allowDataOverflow={false}
+            />
+            <Tooltip
+              content={<CustomTooltip />}
+              cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }}
+            />
+            <Bar
+              isAnimationActive={false}
+              dataKey="success"
+              stackId="requests"
+              fill={CHART_COLORS.success}
+              fillOpacity={0.9}
+              radius={[0, 0, 0, 0]}
+              barSize={30}
+            />
+            <Bar
+              isAnimationActive={false}
+              dataKey="error"
+              stackId="requests"
+              fill={CHART_COLORS.error}
+              fillOpacity={0.9}
+              radius={[2, 2, 0, 0]}
+              barSize={30}
+            />
+          </BarChart>
+        ) : (
+          <AreaChart {...commonProps}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              vertical={false}
+              className="stroke-zinc-200 dark:stroke-zinc-700"
+            />
+            <XAxis
+              dataKey="index"
+              type="number"
+              domain={[-0.5, chartData.length - 0.5]}
+              tick={{ fontSize: 11, className: "fill-zinc-500" }}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(idx) =>
+                chartData[Math.round(idx)]?.formattedTime || ""
+              }
+              interval="preserveStartEnd"
+            />
+            <YAxis
+              tick={{ fontSize: 11, className: "fill-zinc-500" }}
+              tickLine={false}
+              axisLine={false}
+              width={56}
+              tickFormatter={(v) => v.toLocaleString()}
+              domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+              allowDataOverflow={false}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            <Area
+              type="monotone"
+              dataKey="success"
+              stackId="1"
+              stroke={CHART_COLORS.success}
+              fill={CHART_COLORS.success}
+              fillOpacity={0.7}
+            />
+            <Area
+              isAnimationActive={false}
+              type="monotone"
+              dataKey="error"
+              stackId="1"
+              stroke={CHART_COLORS.error}
+              fill={CHART_COLORS.error}
+              fillOpacity={0.7}
+            />
+          </AreaChart>
+        )}
+      </ResponsiveContainer>
+    </ChartErrorBoundary>
+  );
+}

ui/app/workspace/dashboard/components/charts/mcpCostChart.tsx

@@ -0,0 +1,130 @@
+import type { MCPCostHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { CHART_COLORS, formatCost, formatFullTimestamp, formatTimestamp } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+interface MCPCostChartProps {
+	data: MCPCostHistogramResponse | null;
+	chartType: ChartType;
+	startTime: number;
+	endTime: number;
+}
+
+function CustomTooltip({ active, payload }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: CHART_COLORS.cost }} />
+						<span className="text-zinc-600 dark:text-zinc-400">Cost</span>
+					</span>
+					<span className="font-medium">{formatCost(data.total_cost)}</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function MCPCostChart({ data, chartType, startTime, endTime }: MCPCostChartProps) {
+	const chartData = useMemo(() => {
+		if (!data?.buckets || !data.bucket_size_seconds) {
+			return [];
+		}
+
+		return data.buckets.map((bucket, index) => ({
+			...bucket,
+			index,
+			formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
+		}));
+	}, [data]);
+
+	if (!data?.buckets || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const commonProps = {
+		data: chartData,
+		margin: { top: 6, right: 4, left: 4, bottom: 0 },
+	};
+
+	return (
+		<ChartErrorBoundary resetKey={`${startTime}-${endTime}-${chartData.length}-${chartType}`}>
+			<ResponsiveContainer width="100%" height="100%">
+				{chartType === "bar" ? (
+					<BarChart {...commonProps} barCategoryGap={1}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={50}
+							tickFormatter={(v) => formatCost(v)}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 0.01)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+						<Bar
+							isAnimationActive={false}
+							dataKey="total_cost"
+							fill={CHART_COLORS.cost}
+							fillOpacity={0.9}
+							radius={[2, 2, 0, 0]}
+							barSize={30}
+						/>
+					</BarChart>
+				) : (
+					<AreaChart {...commonProps}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={50}
+							tickFormatter={(v) => formatCost(v)}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 0.01)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip />} />
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="total_cost"
+							stroke={CHART_COLORS.cost}
+							fill={CHART_COLORS.cost}
+							fillOpacity={0.7}
+						/>
+					</AreaChart>
+				)}
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/charts/mcpTopToolsChart.tsx

@@ -0,0 +1,80 @@
+import type { MCPTopToolsResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { formatCost, getModelColor } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+
+interface MCPTopToolsChartProps {
+	data: MCPTopToolsResponse | null;
+}
+
+function CustomTooltip({ active, payload }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs font-medium text-zinc-700 dark:text-zinc-300">{data.tool_name}</div>
+			<div className="space-y-1 text-sm">
+				<div className="flex items-center justify-between gap-4">
+					<span className="text-zinc-600 dark:text-zinc-400">Count</span>
+					<span className="font-medium">{data.count.toLocaleString()}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="text-zinc-600 dark:text-zinc-400">Cost</span>
+					<span className="font-medium">{formatCost(data.cost)}</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function MCPTopToolsChart({ data }: MCPTopToolsChartProps) {
+	const chartData = useMemo(() => {
+		if (!data?.tools || data.tools.length === 0) {
+			return [];
+		}
+
+		return data.tools.slice(0, 10);
+	}, [data]);
+
+	if (!data?.tools || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	return (
+		<ChartErrorBoundary resetKey={JSON.stringify(chartData.map(({ tool_name, count, cost }) => [tool_name, count, cost]))}>
+			<ResponsiveContainer width="100%" height="100%">
+				<BarChart data={chartData} layout="vertical" margin={{ top: 6, right: 4, left: 4, bottom: 0 }}>
+					<CartesianGrid strokeDasharray="3 3" horizontal={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+					<XAxis
+						type="number"
+						tick={{ fontSize: 11, className: "fill-zinc-500" }}
+						tickLine={false}
+						axisLine={false}
+						tickFormatter={(v) => v.toLocaleString()}
+						domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+						allowDataOverflow={false}
+					/>
+					<YAxis
+						type="category"
+						dataKey="tool_name"
+						tick={{ fontSize: 11, className: "fill-zinc-500" }}
+						tickLine={false}
+						axisLine={false}
+						width={120}
+						interval={0}
+					/>
+					<Tooltip content={<CustomTooltip />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+					<Bar isAnimationActive={false} dataKey="count" radius={[0, 2, 2, 0]} barSize={20}>
+						{chartData.map((_, index) => (
+							<Cell key={`cell-${index}`} fill={getModelColor(index)} fillOpacity={0.9} />
+						))}
+					</Bar>
+				</BarChart>
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/charts/mcpVolumeChart.tsx

@@ -0,0 +1,161 @@
+import type { MCPHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { CHART_COLORS, formatFullTimestamp, formatTimestamp } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+interface MCPVolumeChartProps {
+	data: MCPHistogramResponse | null;
+	chartType: ChartType;
+	startTime: number;
+	endTime: number;
+}
+
+function CustomTooltip({ active, payload }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full bg-emerald-500" />
+						<span className="text-zinc-600 dark:text-zinc-400">Success</span>
+					</span>
+					<span className="font-medium text-emerald-600 dark:text-emerald-400">{data.success.toLocaleString()}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full bg-red-500" />
+						<span className="text-zinc-600 dark:text-zinc-400">Error</span>
+					</span>
+					<span className="font-medium text-red-600 dark:text-red-400">{data.error.toLocaleString()}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4 border-t border-zinc-200 pt-1 dark:border-zinc-700">
+					<span className="text-zinc-600 dark:text-zinc-400">Total</span>
+					<span className="font-medium">{data.count.toLocaleString()}</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function MCPVolumeChart({ data, chartType, startTime, endTime }: MCPVolumeChartProps) {
+	const chartData = useMemo(() => {
+		if (!data?.buckets || !data.bucket_size_seconds) {
+			return [];
+		}
+
+		return data.buckets.map((bucket, index) => ({
+			...bucket,
+			index,
+			formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
+		}));
+	}, [data]);
+
+	if (!data?.buckets || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const commonProps = {
+		data: chartData,
+		margin: { top: 6, right: 4, left: 4, bottom: 0 },
+	};
+
+	return (
+		<ChartErrorBoundary resetKey={`${chartType}-${startTime}-${endTime}-${chartData.length}`}>
+			<ResponsiveContainer width="100%" height="100%">
+				{chartType === "bar" ? (
+					<BarChart {...commonProps} barCategoryGap={1}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={40}
+							tickFormatter={(v) => v.toLocaleString()}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+						<Bar
+							isAnimationActive={false}
+							dataKey="success"
+							stackId="requests"
+							fill={CHART_COLORS.success}
+							fillOpacity={0.9}
+							radius={[0, 0, 0, 0]}
+							barSize={30}
+						/>
+						<Bar
+							isAnimationActive={false}
+							dataKey="error"
+							stackId="requests"
+							fill={CHART_COLORS.error}
+							fillOpacity={0.9}
+							radius={[2, 2, 0, 0]}
+							barSize={30}
+						/>
+					</BarChart>
+				) : (
+					<AreaChart {...commonProps}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={40}
+							tickFormatter={(v) => v.toLocaleString()}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip />} />
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="success"
+							stackId="1"
+							stroke={CHART_COLORS.success}
+							fill={CHART_COLORS.success}
+							fillOpacity={0.7}
+						/>
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="error"
+							stackId="1"
+							stroke={CHART_COLORS.error}
+							fill={CHART_COLORS.error}
+							fillOpacity={0.7}
+						/>
+					</AreaChart>
+				)}
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/charts/modelFilterSelect.tsx

@@ -0,0 +1,33 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+interface ModelFilterSelectProps {
+	models: string[];
+	selectedModel: string;
+	onModelChange: (model: string) => void;
+	placeholder?: string;
+	"data-testid"?: string;
+}
+
+export function ModelFilterSelect({
+	models,
+	selectedModel,
+	onModelChange,
+	placeholder = "All Models",
+	"data-testid": testId,
+}: ModelFilterSelectProps) {
+	return (
+		<Select value={selectedModel} onValueChange={onModelChange}>
+			<SelectTrigger className="!h-7.5 w-[110px] text-xs sm:w-[130px]" data-testid={testId} size="sm">
+				<SelectValue placeholder={placeholder} />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem value="all">{placeholder}</SelectItem>
+				{models.filter(Boolean).map((model) => (
+					<SelectItem key={model} value={model} className="text-xs">
+						{model}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}

ui/app/workspace/dashboard/components/charts/modelUsageChart.tsx

@@ -0,0 +1,244 @@
+import type { ModelHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { CHART_COLORS, formatFullTimestamp, formatTimestamp, getModelColor } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+// Sanitize model names to avoid Recharts interpreting dots/brackets as path separators
+function sanitizeModelKey(model: string): string {
+	return model.replace(/[.\[\]]/g, "_");
+}
+
+interface ModelUsageChartProps {
+	data: ModelHistogramResponse | null;
+	chartType: ChartType;
+	startTime: number;
+	endTime: number;
+	selectedModel: string;
+}
+
+function CustomTooltip({ active, payload, selectedModel, models }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				{selectedModel === "all" ? (
+					<>
+						{models.map((model: string, idx: number) => {
+							const stats = data.by_model?.[model];
+							if (!stats || stats.total === 0) return null;
+							return (
+								<div key={model} className="flex items-center justify-between gap-4">
+									<span className="flex items-center gap-1.5">
+										<span className="h-2 w-2 rounded-full" style={{ backgroundColor: getModelColor(idx) }} />
+										<span className="max-w-[120px] truncate text-zinc-600 dark:text-zinc-400">{model}</span>
+									</span>
+									<span className="font-medium">{stats.total.toLocaleString()}</span>
+								</div>
+							);
+						})}
+					</>
+				) : (
+					<>
+						<div className="flex items-center justify-between gap-4">
+							<span className="flex items-center gap-1.5">
+								<span className="h-2 w-2 rounded-full bg-emerald-500" />
+								<span className="text-zinc-600 dark:text-zinc-400">Success</span>
+							</span>
+							<span className="font-medium text-emerald-600 dark:text-emerald-400">
+								{(data.by_model?.[selectedModel]?.success || 0).toLocaleString()}
+							</span>
+						</div>
+						<div className="flex items-center justify-between gap-4">
+							<span className="flex items-center gap-1.5">
+								<span className="h-2 w-2 rounded-full bg-red-500" />
+								<span className="text-zinc-600 dark:text-zinc-400">Error</span>
+							</span>
+							<span className="font-medium text-red-600 dark:text-red-400">
+								{(data.by_model?.[selectedModel]?.error || 0).toLocaleString()}
+							</span>
+						</div>
+					</>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export function ModelUsageChart({ data, chartType, startTime, endTime, selectedModel }: ModelUsageChartProps) {
+	const { chartData, displayModels } = useMemo(() => {
+		if (!data?.buckets || !data.bucket_size_seconds) {
+			return { chartData: [], displayModels: [] };
+		}
+
+		const models = data.models;
+
+		const processed = data.buckets.map((bucket, index) => {
+			const item: any = {
+				...bucket,
+				index,
+				formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
+			};
+
+			if (selectedModel === "all") {
+				// For "all", show total per model
+				models.forEach((model) => {
+					const safeKey = sanitizeModelKey(model);
+					item[`model_${safeKey}`] = bucket.by_model?.[model]?.total || 0;
+				});
+			} else {
+				// For specific model, show success/error breakdown
+				const stats = bucket.by_model?.[selectedModel];
+				item.success = stats?.success || 0;
+				item.error = stats?.error || 0;
+			}
+			return item;
+		});
+
+		return { chartData: processed, displayModels: models };
+	}, [data, selectedModel]);
+
+	if (!data?.buckets || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const commonProps = {
+		data: chartData,
+		margin: { top: 6, right: 4, left: 4, bottom: 0 },
+	};
+
+	return (
+		<ChartErrorBoundary resetKey={`${startTime}-${endTime}-${chartData.length}-${selectedModel}`}>
+			<ResponsiveContainer width="100%" height="100%">
+				{chartType === "bar" ? (
+					<BarChart {...commonProps} barCategoryGap={1}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={40}
+							tickFormatter={(v) => v.toLocaleString()}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip
+							content={<CustomTooltip selectedModel={selectedModel} models={displayModels} />}
+							cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }}
+						/>
+						{selectedModel === "all" ? (
+							displayModels.map((model, idx) => (
+								<Bar
+									isAnimationActive={false}
+									key={model}
+									dataKey={`model_${sanitizeModelKey(model)}`}
+									stackId="models"
+									fill={getModelColor(idx)}
+									fillOpacity={0.9}
+									barSize={30}
+									radius={idx === displayModels.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
+								/>
+							))
+						) : (
+							<>
+								<Bar
+									isAnimationActive={false}
+									dataKey="success"
+									stackId="status"
+									fill={CHART_COLORS.success}
+									fillOpacity={0.9}
+									radius={[0, 0, 0, 0]}
+									barSize={30}
+								/>
+								<Bar
+									isAnimationActive={false}
+									dataKey="error"
+									stackId="status"
+									fill={CHART_COLORS.error}
+									fillOpacity={0.9}
+									radius={[2, 2, 0, 0]}
+									barSize={30}
+								/>
+							</>
+						)}
+					</BarChart>
+				) : (
+					<AreaChart {...commonProps}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={40}
+							tickFormatter={(v) => v.toLocaleString()}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip selectedModel={selectedModel} models={displayModels} />} />
+						{selectedModel === "all" ? (
+							displayModels.map((model, idx) => (
+								<Area
+									isAnimationActive={false}
+									key={model}
+									type="monotone"
+									dataKey={`model_${sanitizeModelKey(model)}`}
+									stackId="1"
+									stroke={getModelColor(idx)}
+									fill={getModelColor(idx)}
+									fillOpacity={0.7}
+								/>
+							))
+						) : (
+							<>
+								<Area
+									isAnimationActive={false}
+									type="monotone"
+									dataKey="success"
+									stackId="1"
+									stroke={CHART_COLORS.success}
+									fill={CHART_COLORS.success}
+									fillOpacity={0.7}
+								/>
+								<Area
+									isAnimationActive={false}
+									type="monotone"
+									dataKey="error"
+									stackId="1"
+									stroke={CHART_COLORS.error}
+									fill={CHART_COLORS.error}
+									fillOpacity={0.7}
+								/>
+							</>
+						)}
+					</AreaChart>
+				)}
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/charts/providerCostChart.tsx

@@ -0,0 +1,174 @@
+import type { ProviderCostHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { formatCost, formatFullTimestamp, formatTimestamp, getModelColor } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+interface ProviderCostChartProps {
+	data: ProviderCostHistogramResponse | null;
+	chartType: ChartType;
+	startTime: number;
+	endTime: number;
+	selectedProvider: string;
+}
+
+function CustomTooltip({ active, payload, selectedProvider, providers }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				{selectedProvider === "all" ? (
+					<>
+						{providers.map((provider: string, idx: number) => {
+							const cost = data.by_provider?.[provider] || 0;
+							if (cost === 0) return null;
+							return (
+								<div key={provider} className="flex items-center justify-between gap-4">
+									<span className="flex items-center gap-1.5">
+										<span className="h-2 w-2 rounded-full" style={{ backgroundColor: getModelColor(idx) }} />
+										<span className="max-w-[120px] truncate text-zinc-600 dark:text-zinc-400">{provider}</span>
+									</span>
+									<span className="font-medium">{formatCost(cost)}</span>
+								</div>
+							);
+						})}
+						<div className="flex items-center justify-between gap-4 border-t border-zinc-200 pt-1 dark:border-zinc-700">
+							<span className="text-zinc-600 dark:text-zinc-400">Total</span>
+							<span className="font-medium">{formatCost(data.total_cost)}</span>
+						</div>
+					</>
+				) : (
+					<div className="flex items-center justify-between gap-4">
+						<span className="flex items-center gap-1.5">
+							<span className="h-2 w-2 rounded-full" style={{ backgroundColor: getModelColor(0) }} />
+							<span className="text-zinc-600 dark:text-zinc-400">{selectedProvider}</span>
+						</span>
+						<span className="font-medium">{formatCost(data.by_provider?.[selectedProvider] || 0)}</span>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export function ProviderCostChart({ data, chartType, startTime, endTime, selectedProvider }: ProviderCostChartProps) {
+	const { chartData, displayProviders } = useMemo(() => {
+		if (!data?.buckets || !data.bucket_size_seconds) {
+			return { chartData: [], displayProviders: [] };
+		}
+
+		const providers = selectedProvider === "all" ? data.providers : [selectedProvider];
+
+		const processed = data.buckets.map((bucket, index) => {
+			const item: any = {
+				...bucket,
+				index,
+				formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
+			};
+			providers.forEach((provider, idx) => {
+				item[`provider_${idx}`] = bucket.by_provider?.[provider] || 0;
+			});
+			return item;
+		});
+
+		return { chartData: processed, displayProviders: providers };
+	}, [data, selectedProvider]);
+
+	if (!data?.buckets || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const commonProps = {
+		data: chartData,
+		margin: { top: 6, right: 4, left: 4, bottom: 0 },
+	};
+
+	return (
+		<ChartErrorBoundary resetKey={`${startTime}-${endTime}-${chartData.length}-${selectedProvider}`}>
+			<ResponsiveContainer width="100%" height="100%">
+				{chartType === "bar" ? (
+					<BarChart {...commonProps} barCategoryGap={1}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={50}
+							tickFormatter={(v) => formatCost(v)}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 0.01)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip
+							content={<CustomTooltip selectedProvider={selectedProvider} providers={data.providers} />}
+							cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }}
+						/>
+						{displayProviders.map((provider, idx) => (
+							<Bar
+								isAnimationActive={false}
+								key={provider}
+								dataKey={`provider_${idx}`}
+								stackId="cost"
+								fill={getModelColor(idx)}
+								fillOpacity={0.9}
+								barSize={30}
+								radius={idx === displayProviders.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
+							/>
+						))}
+					</BarChart>
+				) : (
+					<AreaChart {...commonProps}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={50}
+							tickFormatter={(v) => formatCost(v)}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 0.01)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip selectedProvider={selectedProvider} providers={data.providers} />} />
+						{displayProviders.map((provider, idx) => (
+							<Area
+								isAnimationActive={false}
+								key={provider}
+								type="monotone"
+								dataKey={`provider_${idx}`}
+								stackId="1"
+								stroke={getModelColor(idx)}
+								fill={getModelColor(idx)}
+								fillOpacity={0.7}
+							/>
+						))}
+					</AreaChart>
+				)}
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/charts/providerFilterSelect.tsx

@@ -0,0 +1,26 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+interface ProviderFilterSelectProps {
+	providers: string[];
+	selectedProvider: string;
+	onProviderChange: (provider: string) => void;
+	"data-testid"?: string;
+}
+
+export function ProviderFilterSelect({ providers, selectedProvider, onProviderChange, "data-testid": testId }: ProviderFilterSelectProps) {
+	return (
+		<Select value={selectedProvider} onValueChange={onProviderChange}>
+			<SelectTrigger className="!h-7.5 w-[110px] text-xs sm:w-[130px]" data-testid={testId} size="sm">
+				<SelectValue placeholder="All Providers" />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem value="all">All Providers</SelectItem>
+				{providers.filter(Boolean).map((provider) => (
+					<SelectItem key={provider} value={provider} className="text-xs">
+						{provider}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}

ui/app/workspace/dashboard/components/charts/providerLatencyChart.tsx

@@ -0,0 +1,292 @@
+import type { ProviderLatencyHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { formatFullTimestamp, formatLatency, formatTimestamp, getModelColor, LATENCY_COLORS } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+interface ProviderLatencyChartProps {
+	data: ProviderLatencyHistogramResponse | null;
+	chartType: ChartType;
+	startTime: number;
+	endTime: number;
+	selectedProvider: string;
+}
+
+function AllProvidersTooltip({ active, payload, providers }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				{providers.map((provider: string, idx: number) => {
+					const stats = data.by_provider?.[provider];
+					if (!stats || stats.avg_latency === 0) return null;
+					return (
+						<div key={provider} className="flex items-center justify-between gap-4">
+							<span className="flex items-center gap-1.5">
+								<span className="h-2 w-2 rounded-full" style={{ backgroundColor: getModelColor(idx) }} />
+								<span className="max-w-[120px] truncate text-zinc-600 dark:text-zinc-400">{provider}</span>
+							</span>
+							<span className="font-medium">{formatLatency(stats.avg_latency)}</span>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+function SingleProviderTooltip({ active, payload }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.avg }} />
+						<span className="text-zinc-600 dark:text-zinc-400">Avg</span>
+					</span>
+					<span className="font-medium">{formatLatency(data.avg_latency)}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.p90 }} />
+						<span className="text-zinc-600 dark:text-zinc-400">P90</span>
+					</span>
+					<span className="font-medium">{formatLatency(data.p90_latency)}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.p95 }} />
+						<span className="text-zinc-600 dark:text-zinc-400">P95</span>
+					</span>
+					<span className="font-medium">{formatLatency(data.p95_latency)}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.p99 }} />
+						<span className="text-zinc-600 dark:text-zinc-400">P99</span>
+					</span>
+					<span className="font-medium">{formatLatency(data.p99_latency)}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4 border-t border-zinc-200 pt-1 dark:border-zinc-700">
+					<span className="text-zinc-600 dark:text-zinc-400">Requests</span>
+					<span className="font-medium">{data.total_requests?.toLocaleString() || 0}</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function ProviderLatencyChart({ data, chartType, startTime, endTime, selectedProvider }: ProviderLatencyChartProps) {
+	const { chartData, mode, displayProviders } = useMemo(() => {
+		if (!data?.buckets || !data.bucket_size_seconds) {
+			return { chartData: [], mode: "all" as const, displayProviders: [] };
+		}
+
+		const isSingleProvider = selectedProvider !== "all";
+		const providers = isSingleProvider ? [selectedProvider] : data.providers;
+
+		const processed = data.buckets.map((bucket, index) => {
+			const item: any = {
+				...bucket,
+				index,
+				formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
+			};
+
+			if (isSingleProvider) {
+				const stats = bucket.by_provider?.[selectedProvider];
+				item.avg_latency = stats?.avg_latency || 0;
+				item.p90_latency = stats?.p90_latency || 0;
+				item.p95_latency = stats?.p95_latency || 0;
+				item.p99_latency = stats?.p99_latency || 0;
+				item.total_requests = stats?.total_requests || 0;
+			} else {
+				providers.forEach((provider, idx) => {
+					item[`provider_${idx}`] = bucket.by_provider?.[provider]?.avg_latency || 0;
+				});
+			}
+
+			return item;
+		});
+
+		return { chartData: processed, mode: isSingleProvider ? ("single" as const) : ("all" as const), displayProviders: providers };
+	}, [data, selectedProvider]);
+
+	if (!data?.buckets || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const commonProps = {
+		data: chartData,
+		margin: { top: 6, right: 4, left: 4, bottom: 0 },
+	};
+
+	return (
+		<ChartErrorBoundary resetKey={`${startTime}-${endTime}-${chartData.length}-${selectedProvider}`}>
+			<ResponsiveContainer width="100%" height="100%">
+				{chartType === "bar" ? (
+					<BarChart {...commonProps} barCategoryGap={1}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={55}
+							tickFormatter={formatLatency}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						{mode === "single" ? (
+							<>
+								<Tooltip content={<SingleProviderTooltip provider={selectedProvider} />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+								<Bar
+									isAnimationActive={false}
+									dataKey="avg_latency"
+									fill={LATENCY_COLORS.avg}
+									fillOpacity={0.9}
+									barSize={8}
+									radius={[2, 2, 0, 0]}
+								/>
+								<Bar
+									isAnimationActive={false}
+									dataKey="p90_latency"
+									fill={LATENCY_COLORS.p90}
+									fillOpacity={0.9}
+									barSize={8}
+									radius={[2, 2, 0, 0]}
+								/>
+								<Bar
+									isAnimationActive={false}
+									dataKey="p95_latency"
+									fill={LATENCY_COLORS.p95}
+									fillOpacity={0.9}
+									barSize={8}
+									radius={[2, 2, 0, 0]}
+								/>
+								<Bar
+									isAnimationActive={false}
+									dataKey="p99_latency"
+									fill={LATENCY_COLORS.p99}
+									fillOpacity={0.9}
+									barSize={8}
+									radius={[2, 2, 0, 0]}
+								/>
+							</>
+						) : (
+							<>
+								<Tooltip content={<AllProvidersTooltip providers={data.providers} />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+								{displayProviders.map((provider, idx) => (
+									<Bar
+										key={provider}
+										dataKey={`provider_${idx}`}
+										fill={getModelColor(idx)}
+										isAnimationActive={false}
+										fillOpacity={0.9}
+										barSize={8}
+										radius={[2, 2, 0, 0]}
+									/>
+								))}
+							</>
+						)}
+					</BarChart>
+				) : (
+					<AreaChart {...commonProps}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={55}
+							tickFormatter={formatLatency}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						{mode === "single" ? (
+							<>
+								<Tooltip content={<SingleProviderTooltip provider={selectedProvider} />} />
+								<Area
+									isAnimationActive={false}
+									type="monotone"
+									dataKey="p99_latency"
+									stroke={LATENCY_COLORS.p99}
+									fill={LATENCY_COLORS.p99}
+									fillOpacity={0.15}
+								/>
+								<Area
+									isAnimationActive={false}
+									type="monotone"
+									dataKey="p95_latency"
+									stroke={LATENCY_COLORS.p95}
+									fill={LATENCY_COLORS.p95}
+									fillOpacity={0.2}
+								/>
+								<Area
+									isAnimationActive={false}
+									type="monotone"
+									dataKey="p90_latency"
+									stroke={LATENCY_COLORS.p90}
+									fill={LATENCY_COLORS.p90}
+									fillOpacity={0.25}
+								/>
+								<Area
+									isAnimationActive={false}
+									type="monotone"
+									dataKey="avg_latency"
+									stroke={LATENCY_COLORS.avg}
+									fill={LATENCY_COLORS.avg}
+									fillOpacity={0.4}
+								/>
+							</>
+						) : (
+							<>
+								<Tooltip content={<AllProvidersTooltip providers={data.providers} />} />
+								{displayProviders.map((provider, idx) => (
+									<Area
+										key={provider}
+										type="monotone"
+										isAnimationActive={false}
+										dataKey={`provider_${idx}`}
+										stroke={getModelColor(idx)}
+										fill={getModelColor(idx)}
+										fillOpacity={0.3}
+									/>
+								))}
+							</>
+						)}
+					</AreaChart>
+				)}
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/charts/providerTokenChart.tsx

@@ -0,0 +1,252 @@
+import type { ProviderTokenHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { CHART_COLORS, formatFullTimestamp, formatTimestamp, formatTokens, getModelColor } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+interface ProviderTokenChartProps {
+	data: ProviderTokenHistogramResponse | null;
+	chartType: ChartType;
+	startTime: number;
+	endTime: number;
+	selectedProvider: string;
+}
+
+function AllProvidersTooltip({ active, payload, providers }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				{providers.map((provider: string, idx: number) => {
+					const tokens = data.by_provider?.[provider]?.total_tokens || 0;
+					if (tokens === 0) return null;
+					return (
+						<div key={provider} className="flex items-center justify-between gap-4">
+							<span className="flex items-center gap-1.5">
+								<span className="h-2 w-2 rounded-full" style={{ backgroundColor: getModelColor(idx) }} />
+								<span className="max-w-[120px] truncate text-zinc-600 dark:text-zinc-400">{provider}</span>
+							</span>
+							<span className="font-medium">{formatTokens(tokens)}</span>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+function SingleProviderTooltip({ active, payload, provider }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	const stats = data.by_provider?.[provider];
+	if (!stats) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: CHART_COLORS.promptTokens }} />
+						<span className="text-zinc-600 dark:text-zinc-400">Input</span>
+					</span>
+					<span className="font-medium">{formatTokens(stats.prompt_tokens || 0)}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full" style={{ backgroundColor: CHART_COLORS.completionTokens }} />
+						<span className="text-zinc-600 dark:text-zinc-400">Output</span>
+					</span>
+					<span className="font-medium">{formatTokens(stats.completion_tokens || 0)}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4 border-t border-zinc-200 pt-1 dark:border-zinc-700">
+					<span className="text-zinc-600 dark:text-zinc-400">Total</span>
+					<span className="font-medium">{formatTokens(stats.total_tokens || 0)}</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function ProviderTokenChart({ data, chartType, startTime, endTime, selectedProvider }: ProviderTokenChartProps) {
+	const { chartData, mode, displayProviders } = useMemo(() => {
+		if (!data?.buckets || !data.bucket_size_seconds) {
+			return { chartData: [], mode: "all" as const, displayProviders: [] };
+		}
+
+		const isSingleProvider = selectedProvider !== "all";
+		const providers = isSingleProvider ? [selectedProvider] : data.providers;
+
+		const processed = data.buckets.map((bucket, index) => {
+			const item: any = {
+				...bucket,
+				index,
+				formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
+			};
+
+			if (isSingleProvider) {
+				const stats = bucket.by_provider?.[selectedProvider];
+				item.prompt_tokens = stats?.prompt_tokens || 0;
+				item.completion_tokens = stats?.completion_tokens || 0;
+			} else {
+				providers.forEach((provider, idx) => {
+					item[`provider_${idx}`] = bucket.by_provider?.[provider]?.total_tokens || 0;
+				});
+			}
+
+			return item;
+		});
+
+		return { chartData: processed, mode: isSingleProvider ? ("single" as const) : ("all" as const), displayProviders: providers };
+	}, [data, selectedProvider]);
+
+	if (!data?.buckets || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const commonProps = {
+		data: chartData,
+		margin: { top: 6, right: 4, left: 4, bottom: 0 },
+	};
+
+	return (
+		<ChartErrorBoundary resetKey={`${startTime}-${endTime}-${chartData.length}-${selectedProvider}`}>
+			<ResponsiveContainer width="100%" height="100%">
+				{chartType === "bar" ? (
+					<BarChart {...commonProps} barCategoryGap={1}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={50}
+							tickFormatter={formatTokens}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						{mode === "single" ? (
+							<>
+								<Tooltip content={<SingleProviderTooltip provider={selectedProvider} />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+								<Bar
+									isAnimationActive={false}
+									dataKey="prompt_tokens"
+									stackId="tokens"
+									fill={CHART_COLORS.promptTokens}
+									fillOpacity={0.9}
+									barSize={30}
+									radius={[0, 0, 0, 0]}
+								/>
+								<Bar
+									isAnimationActive={false}
+									dataKey="completion_tokens"
+									stackId="tokens"
+									fill={CHART_COLORS.completionTokens}
+									fillOpacity={0.9}
+									barSize={30}
+									radius={[2, 2, 0, 0]}
+								/>
+							</>
+						) : (
+							<>
+								<Tooltip content={<AllProvidersTooltip providers={data.providers} />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+								{displayProviders.map((provider, idx) => (
+									<Bar
+										isAnimationActive={false}
+										key={provider}
+										dataKey={`provider_${idx}`}
+										stackId="tokens"
+										fill={getModelColor(idx)}
+										fillOpacity={0.9}
+										barSize={30}
+										radius={idx === displayProviders.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
+									/>
+								))}
+							</>
+						)}
+					</BarChart>
+				) : (
+					<AreaChart {...commonProps}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={50}
+							tickFormatter={formatTokens}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						{mode === "single" ? (
+							<>
+								<Tooltip content={<SingleProviderTooltip provider={selectedProvider} />} />
+								<Area
+									isAnimationActive={false}
+									type="monotone"
+									dataKey="completion_tokens"
+									stackId="1"
+									stroke={CHART_COLORS.completionTokens}
+									fill={CHART_COLORS.completionTokens}
+									fillOpacity={0.7}
+								/>
+								<Area
+									isAnimationActive={false}
+									type="monotone"
+									dataKey="prompt_tokens"
+									stackId="1"
+									stroke={CHART_COLORS.promptTokens}
+									fill={CHART_COLORS.promptTokens}
+									fillOpacity={0.7}
+								/>
+							</>
+						) : (
+							<>
+								<Tooltip content={<AllProvidersTooltip providers={data.providers} />} />
+								{displayProviders.map((provider, idx) => (
+									<Area
+										isAnimationActive={false}
+										key={provider}
+										type="monotone"
+										dataKey={`provider_${idx}`}
+										stackId="1"
+										stroke={getModelColor(idx)}
+										fill={getModelColor(idx)}
+										fillOpacity={0.7}
+									/>
+								))}
+							</>
+						)}
+					</AreaChart>
+				)}
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/charts/tokenUsageChart.tsx

@@ -0,0 +1,189 @@
+import type { TokenHistogramResponse } from "@/lib/types/logs";
+import { useMemo } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { CHART_COLORS, formatFullTimestamp, formatTimestamp, formatTokens } from "../../utils/chartUtils";
+import { ChartErrorBoundary } from "./chartErrorBoundary";
+import type { ChartType } from "./chartTypeToggle";
+
+interface TokenUsageChartProps {
+	data: TokenHistogramResponse | null;
+	chartType: ChartType;
+	startTime: number;
+	endTime: number;
+}
+
+function CustomTooltip({ active, payload }: any) {
+	if (!active || !payload || !payload.length) return null;
+
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full bg-blue-500" />
+						<span className="text-zinc-600 dark:text-zinc-400">Input</span>
+					</span>
+					<span className="font-medium">{data.prompt_tokens.toLocaleString()}</span>
+				</div>
+				<div className="flex items-center justify-between gap-4">
+					<span className="flex items-center gap-1.5">
+						<span className="h-2 w-2 rounded-full bg-emerald-500" />
+						<span className="text-zinc-600 dark:text-zinc-400">Output</span>
+					</span>
+					<span className="font-medium">{data.completion_tokens.toLocaleString()}</span>
+				</div>
+				{data.cached_read_tokens > 0 && (
+					<div className="flex items-center justify-between gap-4">
+						<span className="flex items-center gap-1.5">
+							<span className="h-2 w-2 rounded-full" style={{ backgroundColor: CHART_COLORS.cachedReadTokens }} />
+							<span className="text-zinc-600 dark:text-zinc-400">Cached</span>
+						</span>
+						<span className="font-medium">{data.cached_read_tokens.toLocaleString()}</span>
+					</div>
+				)}
+				<div className="flex items-center justify-between gap-4 border-t border-zinc-200 pt-1 dark:border-zinc-700">
+					<span className="text-zinc-600 dark:text-zinc-400">Total</span>
+					<span className="font-medium">{data.total_tokens.toLocaleString()}</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function TokenUsageChart({ data, chartType, startTime, endTime }: TokenUsageChartProps) {
+	const chartData = useMemo(() => {
+		if (!data?.buckets || !data.bucket_size_seconds) {
+			return [];
+		}
+
+		return data.buckets.map((bucket, index) => ({
+			...bucket,
+			uncached_prompt_tokens: Math.max(bucket.prompt_tokens - bucket.cached_read_tokens, 0),
+			index,
+			formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
+		}));
+	}, [data]);
+
+	if (!data?.buckets || chartData.length === 0) {
+		return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
+	}
+
+	const commonProps = {
+		data: chartData,
+		margin: { top: 6, right: 4, left: 4, bottom: 0 },
+	};
+
+	return (
+		<ChartErrorBoundary resetKey={`${startTime}-${endTime}-${chartData.length}`}>
+			<ResponsiveContainer width="100%" height="100%">
+				{chartType === "bar" ? (
+					<BarChart {...commonProps} barCategoryGap={1}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={50}
+							tickFormatter={formatTokens}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+						<Bar
+							isAnimationActive={false}
+							dataKey="uncached_prompt_tokens"
+							stackId="tokens"
+							fill={CHART_COLORS.promptTokens}
+							fillOpacity={0.9}
+							radius={[0, 0, 0, 0]}
+							barSize={30}
+						/>
+						<Bar
+							isAnimationActive={false}
+							dataKey="completion_tokens"
+							stackId="tokens"
+							fill={CHART_COLORS.completionTokens}
+							fillOpacity={0.9}
+							radius={[0, 0, 0, 0]}
+							barSize={30}
+						/>
+						<Bar
+							isAnimationActive={false}
+							dataKey="cached_read_tokens"
+							stackId="tokens"
+							fill={CHART_COLORS.cachedReadTokens}
+							fillOpacity={0.9}
+							radius={[2, 2, 0, 0]}
+							barSize={30}
+						/>
+					</BarChart>
+				) : (
+					<AreaChart {...commonProps}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+						<XAxis
+							dataKey="index"
+							type="number"
+							domain={[-0.5, chartData.length - 0.5]}
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+							interval="preserveStartEnd"
+						/>
+						<YAxis
+							tick={{ fontSize: 11, className: "fill-zinc-500" }}
+							tickLine={false}
+							axisLine={false}
+							width={50}
+							tickFormatter={formatTokens}
+							domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+							allowDataOverflow={false}
+						/>
+						<Tooltip content={<CustomTooltip />} />
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="uncached_prompt_tokens"
+							stackId="1"
+							stroke={CHART_COLORS.promptTokens}
+							fill={CHART_COLORS.promptTokens}
+							fillOpacity={0.7}
+						/>
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="completion_tokens"
+							stackId="1"
+							stroke={CHART_COLORS.completionTokens}
+							fill={CHART_COLORS.completionTokens}
+							fillOpacity={0.7}
+						/>
+						<Area
+							isAnimationActive={false}
+							type="monotone"
+							dataKey="cached_read_tokens"
+							stackId="1"
+							stroke={CHART_COLORS.cachedReadTokens}
+							fill={CHART_COLORS.cachedReadTokens}
+							fillOpacity={0.7}
+						/>
+					</AreaChart>
+				)}
+			</ResponsiveContainer>
+		</ChartErrorBoundary>
+	);
+}

ui/app/workspace/dashboard/components/exportPopover.tsx

@@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdownMenu";
+import { buildCSV, downloadCSV } from "@/lib/utils/csv";
+import { Download, FileSpreadsheet, FileText, Loader2 } from "lucide-react";
+import { useCallback, useState } from "react";
+import { type DashboardData, getCSVSections } from "../utils/exportUtils";
+
+const PDF_TAB_LABELS = ["Overview", "Provider Usage", "Model Rankings", "MCP Usage"];
+
+interface ExportPopoverProps {
+	getData: () => DashboardData;
+	onPreloadData: () => Promise<void>;
+	onPdfExport: () => Promise<HTMLElement[]>;
+	onPdfExportDone: () => void;
+}
+
+export function ExportPopover({ getData, onPreloadData, onPdfExport, onPdfExportDone }: ExportPopoverProps) {
+	const [exporting, setExporting] = useState(false);
+
+	const handleCsvExport = useCallback(async () => {
+		setExporting(true);
+		try {
+			await onPreloadData();
+			const sections = getCSVSections(getData(), "all");
+			const parts: string[] = [];
+			for (const section of sections) {
+				if (section.csv.rows.length === 0) continue;
+				parts.push(`# ${section.name}`);
+				parts.push(buildCSV(section.csv.headers, section.csv.rows));
+				parts.push("");
+			}
+			if (parts.length > 0) {
+				downloadCSV(parts.join("\n"), "dashboard-export");
+			}
+		} finally {
+			setExporting(false);
+		}
+	}, [getData, onPreloadData]);
+
+	const handlePdfExport = useCallback(async () => {
+		setExporting(true);
+
+		// Yield a frame so the spinner renders before heavy work starts
+		await new Promise((r) => requestAnimationFrame(r));
+
+		try {
+			const { generatePdf } = await import("@/lib/utils/pdf");
+
+			const elements = await onPdfExport();
+
+			const sections = elements.map((element, i) => ({
+				element,
+				label: PDF_TAB_LABELS[i],
+			}));
+
+			await generatePdf(sections, "dashboard-export", {
+				branding: {
+					logoSrc: "/bifrost-logo.webp",
+					text: "Powered by",
+				},
+			});
+		} finally {
+			onPdfExportDone();
+			setExporting(false);
+		}
+	}, [onPdfExport, onPdfExportDone]);
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="outline" size="default" disabled={exporting} data-testid="dashboard-export-trigger">
+					{exporting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
+					{exporting ? "Exporting..." : "Export"}
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={handleCsvExport} data-testid="export-csv-item">
+					<FileSpreadsheet className="h-4 w-4" />
+					CSV
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={handlePdfExport} data-testid="export-pdf-item">
+					<FileText className="h-4 w-4" />
+					PDF
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

ui/app/workspace/dashboard/components/mcpTab.tsx

@@ -0,0 +1,107 @@
+import type { MCPCostHistogramResponse, MCPHistogramResponse, MCPTopToolsResponse } from "@/lib/types/logs";
+import { CHART_COLORS, CHART_HEADER_ACTIONS_CLASS, CHART_HEADER_CONTROLS_CLASS, CHART_HEADER_LEGEND_CLASS } from "../utils/chartUtils";
+import { ChartCard } from "./charts/chartCard";
+import { type ChartType, ChartTypeToggle } from "./charts/chartTypeToggle";
+import { MCPCostChart } from "./charts/mcpCostChart";
+import { MCPTopToolsChart } from "./charts/mcpTopToolsChart";
+import { MCPVolumeChart } from "./charts/mcpVolumeChart";
+
+export interface MCPTabProps {
+	// Data
+	mcpHistogramData: MCPHistogramResponse | null;
+	mcpCostData: MCPCostHistogramResponse | null;
+	mcpTopToolsData: MCPTopToolsResponse | null;
+
+	// Loading states
+	loadingMcpHistogram: boolean;
+	loadingMcpCost: boolean;
+	loadingMcpTopTools: boolean;
+
+	// Time range
+	startTime: number;
+	endTime: number;
+
+	// Chart types
+	mcpVolumeChartType: ChartType;
+	mcpCostChartType: ChartType;
+
+	// Chart type toggle callbacks
+	onMcpVolumeChartToggle: (type: ChartType) => void;
+	onMcpCostChartToggle: (type: ChartType) => void;
+}
+
+export function MCPTab({
+	mcpHistogramData,
+	mcpCostData,
+	mcpTopToolsData,
+	loadingMcpHistogram,
+	loadingMcpCost,
+	loadingMcpTopTools,
+	startTime,
+	endTime,
+	mcpVolumeChartType,
+	mcpCostChartType,
+	onMcpVolumeChartToggle,
+	onMcpCostChartToggle,
+}: MCPTabProps) {
+	return (
+		<div className="grid grid-cols-1 gap-2 lg:grid-cols-2 2xl:grid-cols-3">
+			{/* MCP Tool Calls Volume */}
+			<ChartCard
+				title="MCP Tool Calls"
+				loading={loadingMcpHistogram}
+				testId="chart-mcp-volume"
+				headerActions={
+					<div className={CHART_HEADER_ACTIONS_CLASS}>
+						<div className={CHART_HEADER_LEGEND_CLASS}>
+							<span className="flex items-center gap-1">
+								<span className="h-2 w-2 rounded-full" style={{ backgroundColor: CHART_COLORS.success }} />
+								<span className="text-muted-foreground">Success</span>
+							</span>
+							<span className="flex items-center gap-1">
+								<span className="h-2 w-2 rounded-full" style={{ backgroundColor: CHART_COLORS.error }} />
+								<span className="text-muted-foreground">Error</span>
+							</span>
+						</div>
+						<div className={CHART_HEADER_CONTROLS_CLASS}>
+							<ChartTypeToggle
+								chartType={mcpVolumeChartType}
+								onToggle={onMcpVolumeChartToggle}
+								data-testid="dashboard-mcp-volume-chart-toggle"
+							/>
+						</div>
+					</div>
+				}
+			>
+				<MCPVolumeChart data={mcpHistogramData} chartType={mcpVolumeChartType} startTime={startTime} endTime={endTime} />
+			</ChartCard>
+
+			{/* MCP Cost */}
+			<ChartCard
+				title="MCP Cost"
+				loading={loadingMcpCost}
+				testId="chart-mcp-cost"
+				headerActions={
+					<div className={CHART_HEADER_ACTIONS_CLASS}>
+						<div className={CHART_HEADER_LEGEND_CLASS}>
+							<span className="flex items-center gap-1">
+								<span className="h-2 w-2 rounded-full" style={{ backgroundColor: CHART_COLORS.cost }} />
+								<span className="text-muted-foreground">Cost</span>
+							</span>
+						</div>
+						<div className={CHART_HEADER_CONTROLS_CLASS}>
+							<ChartTypeToggle chartType={mcpCostChartType} onToggle={onMcpCostChartToggle} data-testid="dashboard-mcp-cost-chart-toggle" />
+						</div>
+					</div>
+				}
+			>
+				<MCPCostChart data={mcpCostData} chartType={mcpCostChartType} startTime={startTime} endTime={endTime} />
+			</ChartCard>
+
+			{/* Top 10 MCP Tools */}
+			<ChartCard title="Top 10 MCP Tools" loading={loadingMcpTopTools} testId="chart-mcp-top-tools">
+				<MCPTopToolsChart data={mcpTopToolsData} />
+			</ChartCard>
+		</div>
+	);
+}

ui/app/workspace/dashboard/components/modelRankingsTab.tsx

@@ -0,0 +1,409 @@
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import ProviderIcons, { type ProviderIconType, RenderProviderIcon } from "@/lib/constants/icons";
+import type { ModelHistogramResponse, ModelRankingEntry, ModelRankingsResponse } from "@/lib/types/logs";
+import { formatCompactNumber as formatNumber } from "@/lib/utils/governance";
+import { ArrowDown, ArrowUp, ArrowUpDown, Minus } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { formatFullTimestamp, formatTimestamp, getModelColor } from "../utils/chartUtils";
+import { ChartCard } from "./charts/chartCard";
+import { ChartErrorBoundary } from "./charts/chartErrorBoundary";
+
+type SortField = "total_requests" | "success_rate" | "total_tokens" | "total_cost" | "avg_latency";
+type SortOrder = "asc" | "desc";
+
+interface ModelRankingsTabProps {
+	rankingsData: ModelRankingsResponse | null;
+	loading: boolean;
+	modelData: ModelHistogramResponse | null;
+	loadingModels: boolean;
+	startTime: number;
+	endTime: number;
+}
+
+function formatCost(value: number): string {
+	if (value >= 1) return `$${value.toFixed(2)}`;
+	if (value >= 0.01) return `$${value.toFixed(3)}`;
+	if (value > 0) return `$${value.toFixed(4)}`;
+	return "$0.00";
+}
+
+function formatLatency(ms: number): string {
+	if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
+	return `${ms.toFixed(0)}ms`;
+}
+
+function TrendBadge({ value, positiveIsGood = true, isNew = false }: { value: number; positiveIsGood?: boolean; isNew?: boolean }) {
+	if (isNew) {
+		return <span className="inline-flex items-center gap-0.5 text-xs font-medium text-blue-600 dark:text-blue-400">new</span>;
+	}
+
+	if (value === 0) {
+		return (
+			<span className="text-muted-foreground inline-flex items-center gap-0.5 text-xs">
+				<Minus className="h-3 w-3" />
+			</span>
+		);
+	}
+
+	const isPositive = value > 0;
+	const isGood = positiveIsGood ? isPositive : !isPositive;
+	return (
+		<span
+			className={`inline-flex items-center gap-0.5 text-xs font-medium ${isGood ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"}`}
+		>
+			{isPositive ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />}
+			{Math.abs(value).toFixed(1)}%
+		</span>
+	);
+}
+
+function SortableHeader({
+	label,
+	field,
+	currentSort,
+	currentOrder,
+	onSort,
+}: {
+	label: string;
+	field: SortField;
+	currentSort: SortField;
+	currentOrder: SortOrder;
+	onSort: (field: SortField) => void;
+}) {
+	const isActive = currentSort === field;
+	const ariaSort = isActive ? (currentOrder === "asc" ? "ascending" : "descending") : "none";
+	return (
+		<button
+			type="button"
+			data-testid={`sort-${field}-btn`}
+			aria-sort={ariaSort}
+			className="hover:text-foreground inline-flex items-center gap-1 transition-colors"
+			onClick={() => onSort(field)}
+		>
+			{label}
+			{isActive ? (
+				currentOrder === "desc" ? (
+					<ArrowDown className="h-3 w-3" />
+				) : (
+					<ArrowUp className="h-3 w-3" />
+				)
+			) : (
+				<ArrowUpDown className="text-muted-foreground h-3 w-3" />
+			)}
+		</button>
+	);
+}
+
+// Tooltip for the usage share chart
+function UsageShareTooltip({ active, payload, models }: any) {
+	if (!active || !payload || !payload.length) return null;
+	const data = payload[0]?.payload;
+	if (!data) return null;
+
+	return (
+		<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+			<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
+			<div className="space-y-1 text-sm">
+				{models.map((model: string, idx: number) => {
+					const val = data[`model_${idx}`];
+					if (!val || val === 0) return null;
+					return (
+						<div key={model} className="flex items-center justify-between gap-4">
+							<span className="flex items-center gap-1.5">
+								<span className="h-2 w-2 rounded-full" style={{ backgroundColor: getModelColor(idx) }} />
+								<span className="max-w-[140px] truncate text-zinc-600 dark:text-zinc-400">{model}</span>
+							</span>
+							<span className="font-medium">{val.toLocaleString()}</span>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+// Top Models usage share stacked area chart + ranked legend
+function TopModelsChart({
+	modelData,
+	loadingModels,
+	rankingsData,
+	startTime,
+	endTime,
+}: {
+	modelData: ModelHistogramResponse | null;
+	loadingModels: boolean;
+	rankingsData: ModelRankingsResponse | null;
+	startTime: number;
+	endTime: number;
+}) {
+	const { chartData, displayModels } = useMemo(() => {
+		if (!modelData?.buckets || !modelData.bucket_size_seconds) {
+			return { chartData: [], displayModels: [] };
+		}
+
+		const models = [...(modelData.models || [])].sort((a, b) => a.localeCompare(b));
+		const processed = modelData.buckets.map((bucket, index) => {
+			const item: any = {
+				...bucket,
+				index,
+				formattedTime: formatTimestamp(bucket.timestamp, modelData.bucket_size_seconds),
+			};
+			for (const [modelIdx, model] of models.entries()) {
+				item[`model_${modelIdx}`] = bucket.by_model?.[model]?.total || 0;
+			}
+			return item;
+		});
+
+		return { chartData: processed, displayModels: models };
+	}, [modelData]);
+
+	// Compute totals per model for the ranked legend (aggregate across providers)
+	const modelTotals = useMemo(() => {
+		if (!rankingsData?.rankings) return [];
+		const byModel = new Map<string, number>();
+		for (const r of rankingsData.rankings) {
+			byModel.set(r.model, (byModel.get(r.model) || 0) + r.total_requests);
+		}
+		const totalRequests = [...byModel.values()].reduce((sum, v) => sum + v, 0);
+		return [...byModel.entries()]
+			.sort((a, b) => b[1] - a[1])
+			.slice(0, 10)
+			.map(([model, total], idx) => ({
+				model,
+				total,
+				pct: totalRequests > 0 ? (total / totalRequests) * 100 : 0,
+				colorIdx: displayModels.indexOf(model) >= 0 ? displayModels.indexOf(model) : idx,
+			}));
+	}, [rankingsData, displayModels]);
+
+	return (
+		<ChartCard title="Top Models" loading={loadingModels} testId="dashboard-rankings-top-models" height="100%" className="z-[1]">
+			<div style={{ height: 200, marginBottom: 6 }}>
+				{chartData.length > 0 ? (
+					<ChartErrorBoundary resetKey={`${startTime}-${endTime}-${chartData.length}`}>
+						<ResponsiveContainer width="100%" height="100%">
+							<BarChart data={chartData} margin={{ top: 6, right: 4, left: 4, bottom: 0 }} barCategoryGap={1}>
+								<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
+								<XAxis
+									dataKey="index"
+									type="number"
+									domain={[-0.5, chartData.length - 0.5]}
+									tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
+									tickLine={false}
+									axisLine={false}
+									tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
+									interval="preserveStartEnd"
+								/>
+								<YAxis
+									tick={{ fontSize: 11, className: "fill-zinc-500" }}
+									tickLine={false}
+									axisLine={false}
+									width={48}
+									tickFormatter={(v) => formatNumber(v)}
+									domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
+									allowDataOverflow={false}
+								/>
+								<Tooltip content={<UsageShareTooltip models={displayModels} />} cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }} />
+								{displayModels.map((model, idx) => (
+									<Bar
+										key={model}
+										dataKey={`model_${idx}`}
+										stackId="models"
+										fill={getModelColor(idx)}
+										fillOpacity={0.9}
+										isAnimationActive={false}
+										barSize={30}
+										radius={idx === displayModels.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
+									/>
+								))}
+							</BarChart>
+						</ResponsiveContainer>
+					</ChartErrorBoundary>
+				) : (
+					<div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>
+				)}
+			</div>
+			<div className="py-2">
+				{/* Ranked model legend */}
+				{modelTotals.length > 0 && (
+					<div className="mt-3 grid grid-cols-2 gap-x-8 gap-y-1.5 px-2 pb-1">
+						{modelTotals.map((m, idx) => (
+							<div key={m.model} className="flex items-center gap-2 text-sm">
+								<span className="text-muted-foreground w-4 text-right text-xs">{idx + 1}.</span>
+								<span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: getModelColor(m.colorIdx) }} />
+								<span className="min-w-0 flex-1 truncate font-medium">{m.model}</span>
+								<span className="shrink-0 text-right text-xs tabular-nums">
+									<span className="font-medium">{formatNumber(m.total)}</span>
+									<span className="text-muted-foreground ml-1">{m.pct.toFixed(1)}%</span>
+								</span>
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+		</ChartCard>
+	);
+}
+
+export function ModelRankingsTab({ rankingsData, loading, modelData, loadingModels, startTime, endTime }: ModelRankingsTabProps) {
+	const [sortField, setSortField] = useState<SortField>("total_requests");
+	const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
+
+	const handleSort = useCallback(
+		(field: SortField) => {
+			if (sortField === field) {
+				setSortOrder((prev) => (prev === "desc" ? "asc" : "desc"));
+			} else {
+				setSortField(field);
+				setSortOrder("desc");
+			}
+		},
+		[sortField],
+	);
+
+	const sortedRankings = useMemo(() => {
+		if (!rankingsData?.rankings) return [];
+		return [...rankingsData.rankings].sort((a, b) => {
+			const aVal = a[sortField];
+			const bVal = b[sortField];
+			return sortOrder === "desc" ? (bVal as number) - (aVal as number) : (aVal as number) - (bVal as number);
+		});
+	}, [rankingsData, sortField, sortOrder]);
+
+	return (
+		<div className="flex flex-col gap-4">
+			{/* Top Models chart */}
+			<TopModelsChart
+				modelData={modelData}
+				loadingModels={loadingModels}
+				rankingsData={rankingsData}
+				startTime={startTime}
+				endTime={endTime}
+			/>
+
+			{/* Rankings table */}
+			{loading ? (
+				<Card className="rounded-sm p-4 shadow-none">
+					<div className="space-y-3">
+						<Skeleton className="h-6 w-48" />
+						<Skeleton className="h-[300px] w-full" />
+					</div>
+				</Card>
+			) : !rankingsData?.rankings?.length ? (
+				<Card className="rounded-sm p-4 shadow-none">
+					<div className="text-muted-foreground flex h-[200px] items-center justify-center text-sm">
+						No model usage data available for this time period.
+					</div>
+				</Card>
+			) : (
+				<Card className="rounded-sm p-2 shadow-none" data-testid="dashboard-model-rankings-table">
+					<span className="text-primary pl-2 text-sm font-medium">Model Rankings</span>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead className="w-12">#</TableHead>
+								<TableHead>Model</TableHead>
+								<TableHead className="text-right">
+									<SortableHeader
+										label="Requests"
+										field="total_requests"
+										currentSort={sortField}
+										currentOrder={sortOrder}
+										onSort={handleSort}
+									/>
+								</TableHead>
+								<TableHead className="text-right">
+									<SortableHeader
+										label="Success Rate"
+										field="success_rate"
+										currentSort={sortField}
+										currentOrder={sortOrder}
+										onSort={handleSort}
+									/>
+								</TableHead>
+								<TableHead className="text-right">
+									<SortableHeader
+										label="Tokens"
+										field="total_tokens"
+										currentSort={sortField}
+										currentOrder={sortOrder}
+										onSort={handleSort}
+									/>
+								</TableHead>
+								<TableHead className="text-right">
+									<SortableHeader label="Cost" field="total_cost" currentSort={sortField} currentOrder={sortOrder} onSort={handleSort} />
+								</TableHead>
+								<TableHead className="text-right">
+									<SortableHeader
+										label="Avg Latency"
+										field="avg_latency"
+										currentSort={sortField}
+										currentOrder={sortOrder}
+										onSort={handleSort}
+									/>
+								</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{sortedRankings.map((entry: ModelRankingEntry, index: number) => (
+								<TableRow key={`${entry.provider}:${entry.model}`}>
+									<TableCell className="text-muted-foreground font-mono text-xs">{index + 1}</TableCell>
+									<TableCell>
+										<div className="flex items-center gap-2">
+											{entry.provider in ProviderIcons ? (
+												<RenderProviderIcon provider={entry.provider as ProviderIconType} size="xs" className="h-4 w-4 shrink-0" />
+											) : (
+												<span className="text-muted-foreground shrink-0 text-xs">{entry.provider}</span>
+											)}
+											<span className="font-medium">{entry.model}</span>
+										</div>
+									</TableCell>
+									<TableCell className="text-right">
+										<div className="flex items-center justify-end gap-2">
+											<span>{formatNumber(entry.total_requests)}</span>
+											<TrendBadge value={entry.trend.requests_trend} isNew={!entry.trend.has_previous_period} />
+										</div>
+									</TableCell>
+									<TableCell className="text-right">
+										<span
+											className={
+												entry.success_rate >= 99
+													? "text-emerald-600 dark:text-emerald-400"
+													: entry.success_rate >= 95
+														? "text-yellow-600 dark:text-yellow-400"
+														: "text-red-600 dark:text-red-400"
+											}
+										>
+											{entry.success_rate.toFixed(1)}%
+										</span>
+									</TableCell>
+									<TableCell className="text-right">
+										<div className="flex items-center justify-end gap-2">
+											<span>{formatNumber(entry.total_tokens)}</span>
+											<TrendBadge value={entry.trend.tokens_trend} isNew={!entry.trend.has_previous_period} />
+										</div>
+									</TableCell>
+									<TableCell className="text-right">
+										<div className="flex items-center justify-end gap-2">
+											<span>{formatCost(entry.total_cost)}</span>
+											<TrendBadge value={entry.trend.cost_trend} positiveIsGood={false} isNew={!entry.trend.has_previous_period} />
+										</div>
+									</TableCell>
+									<TableCell className="text-right">
+										<div className="flex items-center justify-end gap-2">
+											<span>{formatLatency(entry.avg_latency)}</span>
+											<TrendBadge value={entry.trend.latency_trend} positiveIsGood={false} isNew={!entry.trend.has_previous_period} />
+										</div>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</Card>
+			)}
+		</div>
+	);
+}

ui/app/workspace/dashboard/components/overviewTab.tsx

@@ -0,0 +1,482 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type {
+  CostHistogramResponse,
+  LatencyHistogramResponse,
+  LogsHistogramResponse,
+  ModelHistogramResponse,
+  TokenHistogramResponse,
+} from "@/lib/types/logs";
+import {
+  CHART_COLORS,
+  CHART_HEADER_ACTIONS_CLASS,
+  CHART_HEADER_CONTROLS_CLASS,
+  CHART_HEADER_LEGEND_CLASS,
+  LATENCY_COLORS,
+  getModelColor,
+} from "../utils/chartUtils";
+import CacheTokenMeterChart from "./charts/cacheTokenMeterChart";
+import { ChartCard } from "./charts/chartCard";
+import { type ChartType, ChartTypeToggle } from "./charts/chartTypeToggle";
+import { CostChart } from "./charts/costChart";
+import { LatencyChart } from "./charts/latencyChart";
+import { LogVolumeChart } from "./charts/logVolumeChart";
+import { ModelFilterSelect } from "./charts/modelFilterSelect";
+import { ModelUsageChart } from "./charts/modelUsageChart";
+import { TokenUsageChart } from "./charts/tokenUsageChart";
+
+export interface OverviewTabProps {
+  // Data
+  histogramData: LogsHistogramResponse | null;
+  tokenData: TokenHistogramResponse | null;
+  costData: CostHistogramResponse | null;
+  modelData: ModelHistogramResponse | null;
+  latencyData: LatencyHistogramResponse | null;
+
+  // Loading states
+  loadingHistogram: boolean;
+  loadingTokens: boolean;
+  loadingCost: boolean;
+  loadingModels: boolean;
+  loadingLatency: boolean;
+
+  // Time range
+  startTime: number;
+  endTime: number;
+
+  // Chart types
+  volumeChartType: ChartType;
+  tokenChartType: ChartType;
+  costChartType: ChartType;
+  modelChartType: ChartType;
+  latencyChartType: ChartType;
+
+  // Model selections
+  costModel: string;
+  usageModel: string;
+
+  // Derived model lists
+  costModels: string[];
+  usageModels: string[];
+  availableModels: string[];
+
+  // Chart type toggle callbacks
+  onVolumeChartToggle: (type: ChartType) => void;
+  onTokenChartToggle: (type: ChartType) => void;
+  onCostChartToggle: (type: ChartType) => void;
+  onModelChartToggle: (type: ChartType) => void;
+  onLatencyChartToggle: (type: ChartType) => void;
+
+  // Filter callbacks
+  onCostModelChange: (model: string) => void;
+  onUsageModelChange: (model: string) => void;
+}
+
+export function OverviewTab({
+  histogramData,
+  tokenData,
+  costData,
+  modelData,
+  latencyData,
+  loadingHistogram,
+  loadingTokens,
+  loadingCost,
+  loadingModels,
+  loadingLatency,
+  startTime,
+  endTime,
+  volumeChartType,
+  tokenChartType,
+  costChartType,
+  modelChartType,
+  latencyChartType,
+  costModel,
+  usageModel,
+  costModels,
+  usageModels,
+  availableModels,
+  onVolumeChartToggle,
+  onTokenChartToggle,
+  onCostChartToggle,
+  onModelChartToggle,
+  onLatencyChartToggle,
+  onCostModelChange,
+  onUsageModelChange,
+}: OverviewTabProps) {
+  return (
+    <>
+      {/* Charts Grid */}
+      <div className="grid grid-cols-1 gap-2 lg:grid-cols-2 2xl:grid-cols-3">
+        {/* Log Volume Chart */}
+        <ChartCard
+          title="Request Volume"
+          loading={loadingHistogram}
+          testId="chart-log-volume"
+          headerActions={
+            <div className={CHART_HEADER_ACTIONS_CLASS}>
+              <div className={CHART_HEADER_LEGEND_CLASS}>
+                <span className="flex items-center gap-1">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: CHART_COLORS.success }}
+                  />
+                  <span className="text-muted-foreground">Success</span>
+                </span>
+                <span className="flex items-center gap-1">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: CHART_COLORS.error }}
+                  />
+                  <span className="text-muted-foreground">Error</span>
+                </span>
+              </div>
+              <div className={CHART_HEADER_CONTROLS_CLASS}>
+                <ChartTypeToggle
+                  chartType={volumeChartType}
+                  onToggle={onVolumeChartToggle}
+                  data-testid="dashboard-volume-chart-toggle"
+                />
+              </div>
+            </div>
+          }
+        >
+          <LogVolumeChart
+            data={histogramData}
+            chartType={volumeChartType}
+            startTime={startTime}
+            endTime={endTime}
+          />
+        </ChartCard>
+
+        {/* Token Usage Chart */}
+        <ChartCard
+          title="Token Usage"
+          loading={loadingTokens}
+          testId="chart-token-usage"
+          headerActions={
+            <div className={CHART_HEADER_ACTIONS_CLASS}>
+              <div className={CHART_HEADER_LEGEND_CLASS}>
+                <span className="flex items-center gap-1">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: CHART_COLORS.promptTokens }}
+                  />
+                  <span className="text-muted-foreground">Input</span>
+                </span>
+                <span className="flex items-center gap-1">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: CHART_COLORS.completionTokens }}
+                  />
+                  <span className="text-muted-foreground">Output</span>
+                </span>
+                <span className="flex items-center gap-1">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: CHART_COLORS.cachedReadTokens }}
+                  />
+                  <span className="text-muted-foreground">Cached</span>
+                </span>
+              </div>
+              <div className={CHART_HEADER_CONTROLS_CLASS}>
+                <ChartTypeToggle
+                  chartType={tokenChartType}
+                  onToggle={onTokenChartToggle}
+                  data-testid="dashboard-token-chart-toggle"
+                />
+              </div>
+            </div>
+          }
+        >
+          <TokenUsageChart
+            data={tokenData}
+            chartType={tokenChartType}
+            startTime={startTime}
+            endTime={endTime}
+          />
+        </ChartCard>
+
+        {/* Cache Hit Rate Meter */}
+        <ChartCard
+          title="Cache Hit Rate"
+          loading={loadingTokens}
+          testId="chart-cache-meter"
+        >
+          <CacheTokenMeterChart data={tokenData} />
+        </ChartCard>
+
+        {/* Cost Chart */}
+        <ChartCard
+          title="Cost"
+          loading={loadingCost}
+          testId="chart-cost-total"
+          headerActions={
+            <div className={CHART_HEADER_ACTIONS_CLASS}>
+              <div className={CHART_HEADER_LEGEND_CLASS}>
+                {costModel === "all" ? (
+                  costModels.length > 0 && (
+                    <>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span
+                            tabIndex={0}
+                            data-testid="cost-legend-trigger"
+                            className="flex items-center gap-1"
+                          >
+                            <span
+                              className="h-2 w-2 shrink-0 rounded-full"
+                              style={{ backgroundColor: getModelColor(0) }}
+                            />
+                            <span className="text-muted-foreground max-w-[100px] truncate">
+                              {costModels[0]}
+                            </span>
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>{costModels[0]}</TooltipContent>
+                      </Tooltip>
+                      {costModels.length > 1 && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span
+                              tabIndex={0}
+                              data-testid="cost-legend-more-trigger"
+                              className="text-muted-foreground cursor-default"
+                            >
+                              +{costModels.length - 1} more
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <div className="flex flex-col gap-1">
+                              {costModels.slice(1).map((model, idx) => (
+                                <span
+                                  key={model}
+                                  className="flex items-center gap-1"
+                                >
+                                  <span
+                                    className="h-2 w-2 shrink-0 rounded-full"
+                                    style={{
+                                      backgroundColor: getModelColor(idx + 1),
+                                    }}
+                                  />
+                                  {model}
+                                </span>
+                              ))}
+                            </div>
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                    </>
+                  )
+                ) : (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span
+                        tabIndex={0}
+                        data-testid="cost-legend-single-trigger"
+                        className="flex items-center gap-1"
+                      >
+                        <span
+                          className="h-2 w-2 shrink-0 rounded-full"
+                          style={{ backgroundColor: getModelColor(0) }}
+                        />
+                        <span className="text-muted-foreground max-w-[100px] truncate">
+                          {costModel}
+                        </span>
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>{costModel}</TooltipContent>
+                  </Tooltip>
+                )}
+              </div>
+              <div className={CHART_HEADER_CONTROLS_CLASS}>
+                <ModelFilterSelect
+                  models={availableModels}
+                  selectedModel={costModel}
+                  onModelChange={onCostModelChange}
+                  data-testid="dashboard-cost-model-filter"
+                />
+                <ChartTypeToggle
+                  chartType={costChartType}
+                  onToggle={onCostChartToggle}
+                  data-testid="dashboard-cost-chart-toggle"
+                />
+              </div>
+            </div>
+          }
+        >
+          <CostChart
+            data={costData}
+            chartType={costChartType}
+            startTime={startTime}
+            endTime={endTime}
+            selectedModel={costModel}
+          />
+        </ChartCard>
+
+        {/* Model Usage Chart */}
+        <ChartCard
+          title="Model Usage"
+          loading={loadingModels}
+          testId="chart-model-usage"
+          headerActions={
+            <div className={CHART_HEADER_ACTIONS_CLASS}>
+              <div className={CHART_HEADER_LEGEND_CLASS}>
+                {usageModel === "all" ? (
+                  usageModels.length > 0 && (
+                    <>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span
+                            tabIndex={0}
+                            data-testid="usage-legend-trigger"
+                            className="flex items-center gap-1"
+                          >
+                            <span
+                              className="h-2 w-2 shrink-0 rounded-full"
+                              style={{ backgroundColor: getModelColor(0) }}
+                            />
+                            <span className="text-muted-foreground max-w-[100px] truncate">
+                              {usageModels[0]}
+                            </span>
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>{usageModels[0]}</TooltipContent>
+                      </Tooltip>
+                      {usageModels.length > 1 && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span
+                              tabIndex={0}
+                              data-testid="usage-legend-more-trigger"
+                              className="text-muted-foreground cursor-default"
+                            >
+                              +{usageModels.length - 1} more
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <div className="flex flex-col gap-1">
+                              {usageModels.slice(1).map((model, idx) => (
+                                <span
+                                  key={model}
+                                  className="flex items-center gap-1"
+                                >
+                                  <span
+                                    className="h-2 w-2 shrink-0 rounded-full"
+                                    style={{
+                                      backgroundColor: getModelColor(idx + 1),
+                                    }}
+                                  />
+                                  {model}
+                                </span>
+                              ))}
+                            </div>
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                    </>
+                  )
+                ) : (
+                  <>
+                    <span className="flex items-center gap-1">
+                      <span
+                        className="h-2 w-2 shrink-0 rounded-full"
+                        style={{ backgroundColor: CHART_COLORS.success }}
+                      />
+                      <span className="text-muted-foreground">Success</span>
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <span
+                        className="h-2 w-2 shrink-0 rounded-full"
+                        style={{ backgroundColor: CHART_COLORS.error }}
+                      />
+                      <span className="text-muted-foreground">Error</span>
+                    </span>
+                  </>
+                )}
+              </div>
+              <div className={CHART_HEADER_CONTROLS_CLASS}>
+                <ModelFilterSelect
+                  models={availableModels}
+                  selectedModel={usageModel}
+                  onModelChange={onUsageModelChange}
+                  data-testid="dashboard-usage-model-filter"
+                />
+                <ChartTypeToggle
+                  chartType={modelChartType}
+                  onToggle={onModelChartToggle}
+                  data-testid="dashboard-usage-chart-toggle"
+                />
+              </div>
+            </div>
+          }
+        >
+          <ModelUsageChart
+            data={modelData}
+            chartType={modelChartType}
+            startTime={startTime}
+            endTime={endTime}
+            selectedModel={usageModel}
+          />
+        </ChartCard>
+
+        {/* Latency Chart */}
+        <ChartCard
+          title="Latency"
+          loading={loadingLatency}
+          testId="chart-latency"
+          headerActions={
+            <div className={CHART_HEADER_ACTIONS_CLASS}>
+              <div className={CHART_HEADER_LEGEND_CLASS}>
+                <span className="flex items-center gap-1">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: LATENCY_COLORS.avg }}
+                  />
+                  <span className="text-muted-foreground">Avg</span>
+                </span>
+                <span className="flex items-center gap-1">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: LATENCY_COLORS.p90 }}
+                  />
+                  <span className="text-muted-foreground">P90</span>
+                </span>
+                <span className="flex items-center gap-1">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: LATENCY_COLORS.p95 }}
+                  />
+                  <span className="text-muted-foreground">P95</span>
+                </span>
+                <span className="flex items-center gap-1">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: LATENCY_COLORS.p99 }}
+                  />
+                  <span className="text-muted-foreground">P99</span>
+                </span>
+              </div>
+              <div className={CHART_HEADER_CONTROLS_CLASS}>
+                <ChartTypeToggle
+                  chartType={latencyChartType}
+                  onToggle={onLatencyChartToggle}
+                  data-testid="dashboard-latency-chart-toggle"
+                />
+              </div>
+            </div>
+          }
+        >
+          <LatencyChart
+            data={latencyData}
+            chartType={latencyChartType}
+            startTime={startTime}
+            endTime={endTime}
+          />
+        </ChartCard>
+      </div>
+    </>
+  );
+}

ui/app/workspace/dashboard/components/providerUsageTab.tsx

@@ -0,0 +1,345 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { ProviderCostHistogramResponse, ProviderLatencyHistogramResponse, ProviderTokenHistogramResponse } from "@/lib/types/logs";
+import {
+	CHART_COLORS,
+	CHART_HEADER_ACTIONS_CLASS,
+	CHART_HEADER_CONTROLS_CLASS,
+	CHART_HEADER_LEGEND_CLASS,
+	LATENCY_COLORS,
+	getModelColor,
+} from "../utils/chartUtils";
+import { ChartCard } from "./charts/chartCard";
+import { type ChartType, ChartTypeToggle } from "./charts/chartTypeToggle";
+import { ProviderCostChart } from "./charts/providerCostChart";
+import { ProviderFilterSelect } from "./charts/providerFilterSelect";
+import { ProviderLatencyChart } from "./charts/providerLatencyChart";
+import { ProviderTokenChart } from "./charts/providerTokenChart";
+
+export interface ProviderUsageTabProps {
+	// Data
+	providerCostData: ProviderCostHistogramResponse | null;
+	providerTokenData: ProviderTokenHistogramResponse | null;
+	providerLatencyData: ProviderLatencyHistogramResponse | null;
+
+	// Loading states
+	loadingProviderCost: boolean;
+	loadingProviderTokens: boolean;
+	loadingProviderLatency: boolean;
+
+	// Time range
+	startTime: number;
+	endTime: number;
+
+	// Chart types
+	providerCostChartType: ChartType;
+	providerTokenChartType: ChartType;
+	providerLatencyChartType: ChartType;
+
+	// Provider selections
+	providerCostProvider: string;
+	providerTokenProvider: string;
+	providerLatencyProvider: string;
+
+	// Derived provider lists
+	availableProviders: string[];
+	providerCostProviders: string[];
+	providerTokenProviders: string[];
+	providerLatencyProviders: string[];
+
+	// Chart type toggle callbacks
+	onProviderCostChartToggle: (type: ChartType) => void;
+	onProviderTokenChartToggle: (type: ChartType) => void;
+	onProviderLatencyChartToggle: (type: ChartType) => void;
+
+	// Filter callbacks
+	onProviderCostProviderChange: (provider: string) => void;
+	onProviderTokenProviderChange: (provider: string) => void;
+	onProviderLatencyProviderChange: (provider: string) => void;
+}
+
+export function ProviderUsageTab({
+	providerCostData,
+	providerTokenData,
+	providerLatencyData,
+	loadingProviderCost,
+	loadingProviderTokens,
+	loadingProviderLatency,
+	startTime,
+	endTime,
+	providerCostChartType,
+	providerTokenChartType,
+	providerLatencyChartType,
+	providerCostProvider,
+	providerTokenProvider,
+	providerLatencyProvider,
+	availableProviders,
+	providerCostProviders,
+	providerTokenProviders,
+	providerLatencyProviders,
+	onProviderCostChartToggle,
+	onProviderTokenChartToggle,
+	onProviderLatencyChartToggle,
+	onProviderCostProviderChange,
+	onProviderTokenProviderChange,
+	onProviderLatencyProviderChange,
+}: ProviderUsageTabProps) {
+	return (
+		<div className="grid grid-cols-1 gap-2 lg:grid-cols-2 2xl:grid-cols-3">
+			{/* Provider Cost Chart */}
+			<ChartCard
+				title="Provider Cost"
+				loading={loadingProviderCost}
+				testId="chart-provider-cost"
+				headerActions={
+					<div className={CHART_HEADER_ACTIONS_CLASS}>
+						<div className={CHART_HEADER_LEGEND_CLASS}>
+							{providerCostProvider === "all" ? (
+								providerCostProviders.length > 0 && (
+									<>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<span data-testid="provider-cost-legend-trigger" className="flex items-center gap-1">
+													<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: getModelColor(0) }} />
+													<span className="text-muted-foreground max-w-[100px] truncate">{providerCostProviders[0]}</span>
+												</span>
+											</TooltipTrigger>
+											<TooltipContent>{providerCostProviders[0]}</TooltipContent>
+										</Tooltip>
+										{providerCostProviders.length > 1 && (
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<button
+														type="button"
+														data-testid="provider-cost-legend-more-trigger"
+														className="text-muted-foreground cursor-default"
+													>
+														+{providerCostProviders.length - 1} more
+													</button>
+												</TooltipTrigger>
+												<TooltipContent>
+													<div className="flex flex-col gap-1">
+														{providerCostProviders.slice(1).map((provider, idx) => (
+															<span key={provider} className="flex items-center gap-1">
+																<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: getModelColor(idx + 1) }} />
+																{provider}
+															</span>
+														))}
+													</div>
+												</TooltipContent>
+											</Tooltip>
+										)}
+									</>
+								)
+							) : (
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<span data-testid="provider-cost-legend-single-trigger" className="flex items-center gap-1">
+											<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: getModelColor(0) }} />
+											<span className="text-muted-foreground max-w-[100px] truncate">{providerCostProvider}</span>
+										</span>
+									</TooltipTrigger>
+									<TooltipContent>{providerCostProvider}</TooltipContent>
+								</Tooltip>
+							)}
+						</div>
+						<div className={CHART_HEADER_CONTROLS_CLASS}>
+							<ProviderFilterSelect
+								providers={availableProviders}
+								selectedProvider={providerCostProvider}
+								onProviderChange={onProviderCostProviderChange}
+								data-testid="dashboard-provider-cost-filter"
+							/>
+							<ChartTypeToggle
+								chartType={providerCostChartType}
+								onToggle={onProviderCostChartToggle}
+								data-testid="dashboard-provider-cost-chart-toggle"
+							/>
+						</div>
+					</div>
+				}
+			>
+				<ProviderCostChart
+					data={providerCostData}
+					chartType={providerCostChartType}
+					startTime={startTime}
+					endTime={endTime}
+					selectedProvider={providerCostProvider}
+				/>
+			</ChartCard>
+
+			{/* Provider Token Usage Chart */}
+			<ChartCard
+				title="Provider Token Usage"
+				loading={loadingProviderTokens}
+				testId="chart-provider-tokens"
+				headerActions={
+					<div className={CHART_HEADER_ACTIONS_CLASS}>
+						<div className={CHART_HEADER_LEGEND_CLASS}>
+							{providerTokenProvider === "all" ? (
+								providerTokenProviders.length > 0 && (
+									<>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<span data-testid="provider-token-legend-trigger" className="flex items-center gap-1">
+													<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: getModelColor(0) }} />
+													<span className="text-muted-foreground max-w-[100px] truncate">{providerTokenProviders[0]}</span>
+												</span>
+											</TooltipTrigger>
+											<TooltipContent>{providerTokenProviders[0]}</TooltipContent>
+										</Tooltip>
+										{providerTokenProviders.length > 1 && (
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<button
+														type="button"
+														data-testid="provider-token-legend-more-trigger"
+														className="text-muted-foreground cursor-default"
+													>
+														+{providerTokenProviders.length - 1} more
+													</button>
+												</TooltipTrigger>
+												<TooltipContent>
+													<div className="flex flex-col gap-1">
+														{providerTokenProviders.slice(1).map((provider, idx) => (
+															<span key={provider} className="flex items-center gap-1">
+																<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: getModelColor(idx + 1) }} />
+																{provider}
+															</span>
+														))}
+													</div>
+												</TooltipContent>
+											</Tooltip>
+										)}
+									</>
+								)
+							) : (
+								<>
+									<span className="flex items-center gap-1">
+										<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: CHART_COLORS.promptTokens }} />
+										<span className="text-muted-foreground">Input</span>
+									</span>
+									<span className="flex items-center gap-1">
+										<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: CHART_COLORS.completionTokens }} />
+										<span className="text-muted-foreground">Output</span>
+									</span>
+								</>
+							)}
+						</div>
+						<div className={CHART_HEADER_CONTROLS_CLASS}>
+							<ProviderFilterSelect
+								providers={availableProviders}
+								selectedProvider={providerTokenProvider}
+								onProviderChange={onProviderTokenProviderChange}
+								data-testid="dashboard-provider-token-filter"
+							/>
+							<ChartTypeToggle
+								chartType={providerTokenChartType}
+								onToggle={onProviderTokenChartToggle}
+								data-testid="dashboard-provider-token-chart-toggle"
+							/>
+						</div>
+					</div>
+				}
+			>
+				<ProviderTokenChart
+					data={providerTokenData}
+					chartType={providerTokenChartType}
+					startTime={startTime}
+					endTime={endTime}
+					selectedProvider={providerTokenProvider}
+				/>
+			</ChartCard>
+
+			{/* Provider Latency Chart */}
+			<ChartCard
+				title="Provider Latency"
+				loading={loadingProviderLatency}
+				testId="chart-provider-latency"
+				headerActions={
+					<div className={CHART_HEADER_ACTIONS_CLASS}>
+						<div className={CHART_HEADER_LEGEND_CLASS}>
+							{providerLatencyProvider === "all" ? (
+								providerLatencyProviders.length > 0 && (
+									<>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<span data-testid="provider-latency-legend-trigger" className="flex items-center gap-1">
+													<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: getModelColor(0) }} />
+													<span className="text-muted-foreground max-w-[100px] truncate">{providerLatencyProviders[0]}</span>
+												</span>
+											</TooltipTrigger>
+											<TooltipContent>{providerLatencyProviders[0]}</TooltipContent>
+										</Tooltip>
+										{providerLatencyProviders.length > 1 && (
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<button
+														type="button"
+														data-testid="provider-latency-legend-more-trigger"
+														className="text-muted-foreground cursor-default"
+													>
+														+{providerLatencyProviders.length - 1} more
+													</button>
+												</TooltipTrigger>
+												<TooltipContent>
+													<div className="flex flex-col gap-1">
+														{providerLatencyProviders.slice(1).map((provider, idx) => (
+															<span key={provider} className="flex items-center gap-1">
+																<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: getModelColor(idx + 1) }} />
+																{provider}
+															</span>
+														))}
+													</div>
+												</TooltipContent>
+											</Tooltip>
+										)}
+									</>
+								)
+							) : (
+								<>
+									<span className="flex items-center gap-1">
+										<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.avg }} />
+										<span className="text-muted-foreground">Avg</span>
+									</span>
+									<span className="flex items-center gap-1">
+										<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.p90 }} />
+										<span className="text-muted-foreground">P90</span>
+									</span>
+									<span className="flex items-center gap-1">
+										<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.p95 }} />
+										<span className="text-muted-foreground">P95</span>
+									</span>
+									<span className="flex items-center gap-1">
+										<span className="h-2 w-2 rounded-full" style={{ backgroundColor: LATENCY_COLORS.p99 }} />
+										<span className="text-muted-foreground">P99</span>
+									</span>
+								</>
+							)}
+						</div>
+						<div className={CHART_HEADER_CONTROLS_CLASS}>
+							<ProviderFilterSelect
+								providers={availableProviders}
+								selectedProvider={providerLatencyProvider}
+								onProviderChange={onProviderLatencyProviderChange}
+								data-testid="dashboard-provider-latency-filter"
+							/>
+							<ChartTypeToggle
+								chartType={providerLatencyChartType}
+								onToggle={onProviderLatencyChartToggle}
+								data-testid="dashboard-provider-latency-chart-toggle"
+							/>
+						</div>
+					</div>
+				}
+			>
+				<ProviderLatencyChart
+					data={providerLatencyData}
+					chartType={providerLatencyChartType}
+					startTime={startTime}
+					endTime={endTime}
+					selectedProvider={providerLatencyProvider}
+				/>
+			</ChartCard>
+		</div>
+	);
+}

ui/app/workspace/dashboard/layout.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { NoPermissionView } from "@/components/noPermissionView";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import DashboardPage from "./page";
+
+function RouteComponent() {
+	const hasObservabilityAccess = useRbac(RbacResource.Observability, RbacOperation.View);
+	if (!hasObservabilityAccess) {
+		return <NoPermissionView entity="dashboard" />;
+	}
+	return <DashboardPage />;
+}
+
+export const Route = createFileRoute("/workspace/dashboard")({
+	component: RouteComponent,
+});

ui/app/workspace/dashboard/page.tsx

@@ -0,0 +1,901 @@
+import { LogsFilterSidebar } from "@/components/filters/logsFilterSidebar";
+import { DateTimePickerWithRange } from "@/components/ui/datePickerWithRange";
+import { ScrollArea } from "@/components/ui/scrollArea";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+	useGetMCPAvailableFilterDataQuery,
+	useLazyGetLogsCostHistogramQuery,
+	useLazyGetLogsHistogramQuery,
+	useLazyGetLogsLatencyHistogramQuery,
+	useLazyGetLogsModelHistogramQuery,
+	useLazyGetLogsProviderCostHistogramQuery,
+	useLazyGetLogsProviderLatencyHistogramQuery,
+	useLazyGetLogsProviderTokenHistogramQuery,
+	useLazyGetLogsTokenHistogramQuery,
+	useLazyGetMCPCostHistogramQuery,
+	useLazyGetMCPHistogramQuery,
+	useLazyGetMCPTopToolsQuery,
+	useLazyGetModelRankingsQuery,
+} from "@/lib/store";
+import type {
+	CostHistogramResponse,
+	LatencyHistogramResponse,
+	LogFilters,
+	LogsHistogramResponse,
+	MCPCostHistogramResponse,
+	MCPHistogramResponse,
+	MCPToolLogFilters,
+	MCPTopToolsResponse,
+	ModelHistogramResponse,
+	ModelRankingsResponse,
+	ProviderCostHistogramResponse,
+	ProviderLatencyHistogramResponse,
+	ProviderTokenHistogramResponse,
+	TokenHistogramResponse,
+} from "@/lib/types/logs";
+import { dateUtils } from "@/lib/types/logs";
+import { getRangeForPeriod, TIME_PERIODS } from "@/lib/utils/timeRange";
+import UserRankingsTab from "@enterprise/components/user-rankings/userRankingsTab";
+import { useLocation } from "@tanstack/react-router";
+import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { type ChartType } from "./components/charts/chartTypeToggle";
+import { ModelFilterSelect } from "./components/charts/modelFilterSelect";
+import { ExportPopover } from "./components/exportPopover";
+import { MCPTab } from "./components/mcpTab";
+import { ModelRankingsTab } from "./components/modelRankingsTab";
+import { OverviewTab } from "./components/overviewTab";
+import { ProviderUsageTab } from "./components/providerUsageTab";
+
+// Type-safe parser for chart type URL state
+const toChartType = (value: string): ChartType => (value === "line" ? "line" : "bar");
+
+const parseCsvParam = (value: string): string[] => (value ? value.split(",").filter(Boolean) : []);
+const sanitizeSeriesLabels = (values?: string[]): string[] => {
+	if (!values) return [];
+	const trimmedValues = values.map((value) => value.trim()).filter((value) => value.length > 0);
+
+	return [...new Set(trimmedValues)];
+};
+
+export default function DashboardPage() {
+	// Data states - Overview
+	const [histogramData, setHistogramData] = useState<LogsHistogramResponse | null>(null);
+	const [tokenData, setTokenData] = useState<TokenHistogramResponse | null>(null);
+	const [costData, setCostData] = useState<CostHistogramResponse | null>(null);
+	const [modelData, setModelData] = useState<ModelHistogramResponse | null>(null);
+	const [latencyData, setLatencyData] = useState<LatencyHistogramResponse | null>(null);
+	const [providerCostData, setProviderCostData] = useState<ProviderCostHistogramResponse | null>(null);
+	const [providerTokenData, setProviderTokenData] = useState<ProviderTokenHistogramResponse | null>(null);
+	const [providerLatencyData, setProviderLatencyData] = useState<ProviderLatencyHistogramResponse | null>(null);
+
+	// Data states - MCP
+	const [mcpHistogramData, setMcpHistogramData] = useState<MCPHistogramResponse | null>(null);
+	const [mcpCostData, setMcpCostData] = useState<MCPCostHistogramResponse | null>(null);
+	const [mcpTopToolsData, setMcpTopToolsData] = useState<MCPTopToolsResponse | null>(null);
+
+	// Data states - Rankings
+	const [rankingsData, setRankingsData] = useState<ModelRankingsResponse | null>(null);
+
+	// Loading states - Overview
+	const [loadingHistogram, setLoadingHistogram] = useState(true);
+	const [loadingTokens, setLoadingTokens] = useState(true);
+	const [loadingCost, setLoadingCost] = useState(true);
+	const [loadingModels, setLoadingModels] = useState(true);
+	const [loadingLatency, setLoadingLatency] = useState(true);
+	const [loadingProviderCost, setLoadingProviderCost] = useState(true);
+	const [loadingProviderTokens, setLoadingProviderTokens] = useState(true);
+	const [loadingProviderLatency, setLoadingProviderLatency] = useState(true);
+
+	// Loading states - MCP
+	const [loadingMcpHistogram, setLoadingMcpHistogram] = useState(true);
+	const [loadingMcpCost, setLoadingMcpCost] = useState(true);
+	const [loadingMcpTopTools, setLoadingMcpTopTools] = useState(true);
+
+	// Loading states - Rankings
+	const [loadingRankings, setLoadingRankings] = useState(true);
+
+	// RTK Query lazy hooks - Overview
+	const [triggerHistogram] = useLazyGetLogsHistogramQuery({});
+	const [triggerTokens] = useLazyGetLogsTokenHistogramQuery();
+	const [triggerCost] = useLazyGetLogsCostHistogramQuery();
+	const [triggerModels] = useLazyGetLogsModelHistogramQuery();
+	const [triggerLatency] = useLazyGetLogsLatencyHistogramQuery();
+	const [triggerProviderCost] = useLazyGetLogsProviderCostHistogramQuery();
+	const [triggerProviderTokens] = useLazyGetLogsProviderTokenHistogramQuery();
+	const [triggerProviderLatency] = useLazyGetLogsProviderLatencyHistogramQuery();
+
+	// RTK Query lazy hooks - MCP
+	const [triggerMcpHistogram] = useLazyGetMCPHistogramQuery();
+	const [triggerMcpCost] = useLazyGetMCPCostHistogramQuery();
+	const [triggerMcpTopTools] = useLazyGetMCPTopToolsQuery();
+
+	// RTK Query lazy hooks - Rankings
+	const [triggerRankings] = useLazyGetModelRankingsQuery();
+
+	// MCP filter data
+	const { data: mcpFilterData } = useGetMCPAvailableFilterDataQuery();
+
+	// 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(), []);
+
+	const { search } = useLocation();
+	const hasExplicitTimeRange = (search as Record<string, unknown>)?.start_time && (search as Record<string, unknown>)?.end_time;
+	// URL state management
+	const [urlState, setUrlState] = useQueryStates(
+		{
+			period: parseAsString.withDefault(hasExplicitTimeRange ? "" : "1h").withOptions({ clearOnDefault: false }),
+			start_time: parseAsInteger.withDefault(defaultTimeRange.startTime),
+			end_time: parseAsInteger.withDefault(defaultTimeRange.endTime),
+			tab: parseAsString.withDefault("overview"),
+			virtual_key_ids: parseAsString.withDefault(""),
+			providers: parseAsString.withDefault(""),
+			models: parseAsString.withDefault(""),
+			selected_key_ids: parseAsString.withDefault(""),
+			objects: parseAsString.withDefault(""),
+			status: parseAsString.withDefault(""),
+			routing_rule_ids: parseAsString.withDefault(""),
+			routing_engine_used: parseAsString.withDefault(""),
+			missing_cost_only: parseAsString.withDefault("false"),
+			metadata_filters: parseAsString.withDefault(""),
+			volume_chart: parseAsString.withDefault("bar"),
+			token_chart: parseAsString.withDefault("bar"),
+			cost_chart: parseAsString.withDefault("bar"),
+			model_chart: parseAsString.withDefault("bar"),
+			latency_chart: parseAsString.withDefault("bar"),
+			cost_model: parseAsString.withDefault("all"),
+			usage_model: parseAsString.withDefault("all"),
+			provider_cost_chart: parseAsString.withDefault("bar"),
+			provider_token_chart: parseAsString.withDefault("bar"),
+			provider_latency_chart: parseAsString.withDefault("bar"),
+			provider_cost_provider: parseAsString.withDefault("all"),
+			provider_token_provider: parseAsString.withDefault("all"),
+			provider_latency_provider: parseAsString.withDefault("all"),
+			mcp_volume_chart: parseAsString.withDefault("bar"),
+			mcp_cost_chart: parseAsString.withDefault("bar"),
+			mcp_tool_names: parseAsString.withDefault(""),
+			mcp_server_labels: parseAsString.withDefault(""),
+		},
+		{
+			history: "push",
+			shallow: false,
+		},
+	);
+
+	// Parse filter arrays from URL state
+	const selectedProviders = useMemo(() => parseCsvParam(urlState.providers), [urlState.providers]);
+	const selectedModels = useMemo(() => parseCsvParam(urlState.models), [urlState.models]);
+	const selectedKeyIds = useMemo(() => parseCsvParam(urlState.selected_key_ids), [urlState.selected_key_ids]);
+	const selectedVirtualKeyIds = useMemo(() => parseCsvParam(urlState.virtual_key_ids), [urlState.virtual_key_ids]);
+	const selectedTypes = useMemo(() => parseCsvParam(urlState.objects), [urlState.objects]);
+	const selectedStatuses = useMemo(() => parseCsvParam(urlState.status), [urlState.status]);
+	const selectedRoutingRuleIds = useMemo(() => parseCsvParam(urlState.routing_rule_ids), [urlState.routing_rule_ids]);
+	const selectedRoutingEngines = useMemo(() => parseCsvParam(urlState.routing_engine_used), [urlState.routing_engine_used]);
+	const missingCostOnly = useMemo(() => urlState.missing_cost_only === "true", [urlState.missing_cost_only]);
+	const metadataFilters = useMemo(() => {
+		if (!urlState.metadata_filters) return undefined;
+		try {
+			return JSON.parse(urlState.metadata_filters) as Record<string, string>;
+		} catch {
+			return undefined;
+		}
+	}, [urlState.metadata_filters]);
+
+	// MCP filter arrays
+	const selectedMcpToolNames = useMemo(() => parseCsvParam(urlState.mcp_tool_names), [urlState.mcp_tool_names]);
+	const selectedMcpServerLabels = useMemo(() => parseCsvParam(urlState.mcp_server_labels), [urlState.mcp_server_labels]);
+
+	// Derived filter for API calls
+	const filters: LogFilters = useMemo(
+		() => ({
+			start_time: dateUtils.toISOString(urlState.start_time),
+			end_time: dateUtils.toISOString(urlState.end_time),
+			...(selectedProviders.length > 0 && { providers: selectedProviders }),
+			...(selectedModels.length > 0 && { models: selectedModels }),
+			...(selectedKeyIds.length > 0 && { selected_key_ids: selectedKeyIds }),
+			...(selectedVirtualKeyIds.length > 0 && {
+				virtual_key_ids: selectedVirtualKeyIds,
+			}),
+			...(selectedTypes.length > 0 && { objects: selectedTypes }),
+			...(selectedStatuses.length > 0 && { status: selectedStatuses }),
+			...(selectedRoutingRuleIds.length > 0 && {
+				routing_rule_ids: selectedRoutingRuleIds,
+			}),
+			...(selectedRoutingEngines.length > 0 && {
+				routing_engine_used: selectedRoutingEngines,
+			}),
+			...(missingCostOnly && { missing_cost_only: true }),
+			...(metadataFilters &&
+				Object.keys(metadataFilters).length > 0 && {
+					metadata_filters: metadataFilters,
+				}),
+		}),
+		[
+			urlState.start_time,
+			urlState.end_time,
+			selectedProviders,
+			selectedModels,
+			selectedKeyIds,
+			selectedVirtualKeyIds,
+			selectedTypes,
+			selectedStatuses,
+			selectedRoutingRuleIds,
+			selectedRoutingEngines,
+			missingCostOnly,
+			metadataFilters,
+		],
+	);
+
+	// MCP filters
+	const mcpFilters: MCPToolLogFilters = useMemo(
+		() => ({
+			start_time: dateUtils.toISOString(urlState.start_time),
+			end_time: dateUtils.toISOString(urlState.end_time),
+			...(selectedMcpToolNames.length > 0 && {
+				tool_names: selectedMcpToolNames,
+			}),
+			...(selectedMcpServerLabels.length > 0 && {
+				server_labels: selectedMcpServerLabels,
+			}),
+		}),
+		[urlState.start_time, urlState.end_time, selectedMcpToolNames, selectedMcpServerLabels],
+	);
+
+	// Model lists for each chart's legend (must match what the chart component actually renders)
+	const costModels = useMemo(() => sanitizeSeriesLabels(costData?.models), [costData?.models]);
+	const usageModels = useMemo(() => sanitizeSeriesLabels(modelData?.models), [modelData?.models]);
+
+	// Available models for filter dropdowns (union of both sources)
+	const availableModels = useMemo(() => {
+		return sanitizeSeriesLabels([...(costData?.models ?? []), ...(modelData?.models ?? [])]);
+	}, [costData?.models, modelData?.models]);
+
+	// Available providers for provider chart filter dropdowns
+	const availableProviders = useMemo(() => {
+		return sanitizeSeriesLabels([
+			...(providerCostData?.providers ?? []),
+			...(providerTokenData?.providers ?? []),
+			...(providerLatencyData?.providers ?? []),
+		]);
+	}, [providerCostData?.providers, providerTokenData?.providers, providerLatencyData?.providers]);
+
+	// Provider lists for each chart's legend
+	const providerCostProviders = useMemo(() => sanitizeSeriesLabels(providerCostData?.providers), [providerCostData?.providers]);
+	const providerTokenProviders = useMemo(() => sanitizeSeriesLabels(providerTokenData?.providers), [providerTokenData?.providers]);
+	const providerLatencyProviders = useMemo(() => sanitizeSeriesLabels(providerLatencyData?.providers), [providerLatencyData?.providers]);
+
+	// Fetch Overview tab data (5 calls)
+	const fetchOverviewData = useCallback(async () => {
+		setLoadingHistogram(true);
+		setLoadingTokens(true);
+		setLoadingCost(true);
+		setLoadingModels(true);
+		setLoadingLatency(true);
+
+		const fetchFilters = { filters };
+
+		const [histogramResult, tokenResult, costResult, modelResult, latencyResult] = await Promise.all([
+			triggerHistogram(fetchFilters, false),
+			triggerTokens(fetchFilters, false),
+			triggerCost(fetchFilters, false),
+			triggerModels(fetchFilters, false),
+			triggerLatency(fetchFilters, false),
+		]);
+
+		setHistogramData(histogramResult.data ?? null);
+		setLoadingHistogram(false);
+		setTokenData(tokenResult.data ?? null);
+		setLoadingTokens(false);
+		setCostData(costResult.data ?? null);
+		setLoadingCost(false);
+		setModelData(modelResult.data ?? null);
+		setLoadingModels(false);
+		setLatencyData(latencyResult.data ?? null);
+		setLoadingLatency(false);
+	}, [filters, triggerHistogram, triggerTokens, triggerCost, triggerModels, triggerLatency]);
+
+	// Fetch Provider Usage tab data (3 calls)
+	const fetchProviderData = useCallback(async () => {
+		setLoadingProviderCost(true);
+		setLoadingProviderTokens(true);
+		setLoadingProviderLatency(true);
+
+		const fetchFilters = { filters };
+
+		const [providerCostResult, providerTokenResult, providerLatencyResult] = await Promise.all([
+			triggerProviderCost(fetchFilters, false),
+			triggerProviderTokens(fetchFilters, false),
+			triggerProviderLatency(fetchFilters, false),
+		]);
+
+		setProviderCostData(providerCostResult.data ?? null);
+		setLoadingProviderCost(false);
+		setProviderTokenData(providerTokenResult.data ?? null);
+		setLoadingProviderTokens(false);
+		setProviderLatencyData(providerLatencyResult.data ?? null);
+		setLoadingProviderLatency(false);
+	}, [filters, triggerProviderCost, triggerProviderTokens, triggerProviderLatency]);
+
+	// Fetch MCP data
+	const fetchMcpData = useCallback(async () => {
+		setLoadingMcpHistogram(true);
+		setLoadingMcpCost(true);
+		setLoadingMcpTopTools(true);
+
+		const fetchFilters = { filters: mcpFilters };
+
+		const [mcpHistResult, mcpCostResult, mcpTopToolsResult] = await Promise.all([
+			triggerMcpHistogram(fetchFilters, false),
+			triggerMcpCost(fetchFilters, false),
+			triggerMcpTopTools(fetchFilters, false),
+		]);
+
+		setMcpHistogramData(mcpHistResult.data ?? null);
+		setLoadingMcpHistogram(false);
+		setMcpCostData(mcpCostResult.data ?? null);
+		setLoadingMcpCost(false);
+		setMcpTopToolsData(mcpTopToolsResult.data ?? null);
+		setLoadingMcpTopTools(false);
+	}, [mcpFilters, triggerMcpHistogram, triggerMcpCost, triggerMcpTopTools]);
+
+	// Fetch Rankings data
+	const fetchRankingsData = useCallback(async () => {
+		setLoadingRankings(true);
+		const result = await triggerRankings({ filters }, false);
+		setRankingsData(result.data ?? null);
+		setLoadingRankings(false);
+	}, [filters, triggerRankings]);
+
+	// --- Lazy-load refs: each tab fetches only once per filter change ---
+	const overviewFetchedRef = useRef(false);
+	const overviewLoadingRef = useRef(false);
+	const overviewGenRef = useRef(0);
+	const overviewPromiseRef = useRef<Promise<void> | null>(null);
+
+	const providerFetchedRef = useRef(false);
+	const providerLoadingRef = useRef(false);
+	const providerGenRef = useRef(0);
+	const providerPromiseRef = useRef<Promise<void> | null>(null);
+
+	const mcpFetchedRef = useRef(false);
+	const mcpLoadingRef = useRef(false);
+	const mcpGenRef = useRef(0);
+	const mcpPromiseRef = useRef<Promise<void> | null>(null);
+
+	const rankingsFetchedRef = useRef(false);
+	const rankingsLoadingRef = useRef(false);
+	const rankingsGenRef = useRef(0);
+	const rankingsPromiseRef = useRef<Promise<void> | null>(null);
+
+	const ensureOverviewDataLoaded = useCallback(async () => {
+		if (overviewFetchedRef.current) return;
+		if (overviewLoadingRef.current) return overviewPromiseRef.current ?? undefined;
+		const gen = overviewGenRef.current;
+		overviewLoadingRef.current = true;
+		const promise = fetchOverviewData()
+			.then(() => {
+				if (gen === overviewGenRef.current) overviewFetchedRef.current = true;
+			})
+			.finally(() => {
+				if (gen === overviewGenRef.current) {
+					overviewLoadingRef.current = false;
+					overviewPromiseRef.current = null;
+				}
+			});
+		overviewPromiseRef.current = promise;
+		return promise;
+	}, [fetchOverviewData]);
+
+	const ensureProviderDataLoaded = useCallback(async () => {
+		if (providerFetchedRef.current) return;
+		if (providerLoadingRef.current) return providerPromiseRef.current ?? undefined;
+		const gen = providerGenRef.current;
+		providerLoadingRef.current = true;
+		const promise = fetchProviderData()
+			.then(() => {
+				if (gen === providerGenRef.current) providerFetchedRef.current = true;
+			})
+			.finally(() => {
+				if (gen === providerGenRef.current) {
+					providerLoadingRef.current = false;
+					providerPromiseRef.current = null;
+				}
+			});
+		providerPromiseRef.current = promise;
+		return promise;
+	}, [fetchProviderData]);
+
+	const ensureMcpDataLoaded = useCallback(async () => {
+		if (mcpFetchedRef.current) return;
+		if (mcpLoadingRef.current) return mcpPromiseRef.current ?? undefined;
+		const gen = mcpGenRef.current;
+		mcpLoadingRef.current = true;
+		const promise = fetchMcpData()
+			.then(() => {
+				if (gen === mcpGenRef.current) mcpFetchedRef.current = true;
+			})
+			.finally(() => {
+				if (gen === mcpGenRef.current) {
+					mcpLoadingRef.current = false;
+					mcpPromiseRef.current = null;
+				}
+			});
+		mcpPromiseRef.current = promise;
+		return promise;
+	}, [fetchMcpData]);
+
+	const ensureRankingsDataLoaded = useCallback(async () => {
+		if (rankingsFetchedRef.current) return;
+		if (rankingsLoadingRef.current) return rankingsPromiseRef.current ?? undefined;
+		const gen = rankingsGenRef.current;
+		rankingsLoadingRef.current = true;
+		const promise = fetchRankingsData()
+			.then(() => {
+				if (gen === rankingsGenRef.current) rankingsFetchedRef.current = true;
+			})
+			.finally(() => {
+				if (gen === rankingsGenRef.current) {
+					rankingsLoadingRef.current = false;
+					rankingsPromiseRef.current = null;
+				}
+			});
+		rankingsPromiseRef.current = promise;
+		return promise;
+	}, [fetchRankingsData]);
+
+	// Reset all lazy-load flags when filters change (not on tab switch)
+	useEffect(() => {
+		overviewFetchedRef.current = false;
+		overviewLoadingRef.current = false;
+		overviewGenRef.current += 1;
+		providerFetchedRef.current = false;
+		providerLoadingRef.current = false;
+		providerGenRef.current += 1;
+		rankingsFetchedRef.current = false;
+		rankingsLoadingRef.current = false;
+		rankingsGenRef.current += 1;
+	}, [filters]);
+
+	useEffect(() => {
+		mcpFetchedRef.current = false;
+		mcpLoadingRef.current = false;
+		mcpGenRef.current += 1;
+	}, [mcpFilters]);
+
+	// Fetch current tab's data when filters change or tab switches
+	// The ensure* functions are no-ops if data is already loaded for the current filters
+	useEffect(() => {
+		const tab = urlState.tab || "overview";
+		if (tab === "overview") void ensureOverviewDataLoaded();
+		else if (tab === "provider-usage") void ensureProviderDataLoaded();
+		else if (tab === "rankings") void ensureRankingsDataLoaded();
+		else if (tab === "mcp") void ensureMcpDataLoaded();
+	}, [urlState.tab, ensureOverviewDataLoaded, ensureProviderDataLoaded, ensureRankingsDataLoaded, ensureMcpDataLoaded]);
+
+	// Warm other tabs in the background after 150ms
+	useEffect(() => {
+		const tab = urlState.tab || "overview";
+		const timeoutId = window.setTimeout(() => {
+			if (tab !== "overview") void ensureOverviewDataLoaded();
+			if (tab !== "provider-usage") void ensureProviderDataLoaded();
+			if (tab !== "mcp") void ensureMcpDataLoaded();
+			if (tab !== "rankings") void ensureRankingsDataLoaded();
+		}, 150);
+		return () => window.clearTimeout(timeoutId);
+	}, [urlState.tab, ensureOverviewDataLoaded, ensureProviderDataLoaded, ensureMcpDataLoaded, ensureRankingsDataLoaded]);
+
+	// Tab change handler
+	const handleTabChange = useCallback(
+		(tab: string) => {
+			setUrlState({ tab });
+		},
+		[setUrlState],
+	);
+
+	// Chart type toggles
+	const handleVolumeChartToggle = useCallback((type: ChartType) => setUrlState({ volume_chart: type }), [setUrlState]);
+	const handleTokenChartToggle = useCallback((type: ChartType) => setUrlState({ token_chart: type }), [setUrlState]);
+	const handleCostChartToggle = useCallback((type: ChartType) => setUrlState({ cost_chart: type }), [setUrlState]);
+	const handleModelChartToggle = useCallback((type: ChartType) => setUrlState({ model_chart: type }), [setUrlState]);
+	const handleLatencyChartToggle = useCallback((type: ChartType) => setUrlState({ latency_chart: type }), [setUrlState]);
+
+	// Adapter: converts a full LogFilters object to dashboard's CSV-based URL state
+	const setFilters = useCallback(
+		(newFilters: LogFilters) => {
+			const newStartTime = newFilters.start_time ? dateUtils.toUnixTimestamp(new Date(newFilters.start_time)) : undefined;
+			const newEndTime = newFilters.end_time ? dateUtils.toUnixTimestamp(new Date(newFilters.end_time)) : undefined;
+			const timeChanged = newStartTime !== urlState.start_time || newEndTime !== urlState.end_time;
+			setUrlState({
+				...(timeChanged && { period: "" }),
+				start_time: newStartTime,
+				end_time: newEndTime,
+				providers: (newFilters.providers || []).join(","),
+				models: (newFilters.models || []).join(","),
+				selected_key_ids: (newFilters.selected_key_ids || []).join(","),
+				virtual_key_ids: (newFilters.virtual_key_ids || []).join(","),
+				objects: (newFilters.objects || []).join(","),
+				status: (newFilters.status || []).join(","),
+				routing_rule_ids: (newFilters.routing_rule_ids || []).join(","),
+				routing_engine_used: (newFilters.routing_engine_used || []).join(","),
+				missing_cost_only: String(newFilters.missing_cost_only ?? false),
+				metadata_filters:
+					newFilters.metadata_filters && Object.keys(newFilters.metadata_filters).length > 0
+						? JSON.stringify(newFilters.metadata_filters)
+						: "",
+			});
+		},
+		[setUrlState, urlState.start_time, urlState.end_time],
+	);
+
+	// Date range for picker
+	const dateRange = useMemo(
+		() => ({
+			from: dateUtils.fromUnixTimestamp(urlState.start_time),
+			to: dateUtils.fromUnixTimestamp(urlState.end_time),
+		}),
+		[urlState.start_time, urlState.end_time],
+	);
+
+	const handlePeriodChange = useCallback(
+		(period: string | undefined) => {
+			if (!period) return;
+			const { from, to } = getRangeForPeriod(period);
+			setUrlState({
+				period,
+				start_time: Math.floor(from.getTime() / 1000),
+				end_time: Math.floor(to.getTime() / 1000),
+			});
+		},
+		[setUrlState],
+	);
+
+	const handleDateRangeChange = useCallback(
+		(range: { from?: Date; to?: Date }) => {
+			if (!range.from || !range.to) return;
+			setUrlState({
+				period: "",
+				start_time: dateUtils.toUnixTimestamp(range.from),
+				end_time: dateUtils.toUnixTimestamp(range.to),
+			});
+		},
+		[setUrlState],
+	);
+
+	const handleProviderCostChartToggle = useCallback((type: ChartType) => setUrlState({ provider_cost_chart: type }), [setUrlState]);
+	const handleProviderTokenChartToggle = useCallback((type: ChartType) => setUrlState({ provider_token_chart: type }), [setUrlState]);
+	const handleProviderLatencyChartToggle = useCallback((type: ChartType) => setUrlState({ provider_latency_chart: type }), [setUrlState]);
+
+	// MCP chart type toggles
+	const handleMcpVolumeChartToggle = useCallback((type: ChartType) => setUrlState({ mcp_volume_chart: type }), [setUrlState]);
+	const handleMcpCostChartToggle = useCallback((type: ChartType) => setUrlState({ mcp_cost_chart: type }), [setUrlState]);
+
+	// Model filter changes
+	const handleCostModelChange = useCallback((model: string) => setUrlState({ cost_model: model }), [setUrlState]);
+	const handleUsageModelChange = useCallback((model: string) => setUrlState({ usage_model: model }), [setUrlState]);
+
+	// Provider filter changes
+	const handleProviderCostProviderChange = useCallback(
+		(provider: string) => setUrlState({ provider_cost_provider: provider }),
+		[setUrlState],
+	);
+	const handleProviderTokenProviderChange = useCallback(
+		(provider: string) => setUrlState({ provider_token_provider: provider }),
+		[setUrlState],
+	);
+	const handleProviderLatencyProviderChange = useCallback(
+		(provider: string) => setUrlState({ provider_latency_provider: provider }),
+		[setUrlState],
+	);
+
+	// Aggregate data object for export
+	const dashboardData = useMemo(
+		() => ({
+			histogramData,
+			tokenData,
+			costData,
+			modelData,
+			latencyData,
+			providerCostData,
+			providerTokenData,
+			providerLatencyData,
+			rankingsData,
+			mcpHistogramData,
+			mcpCostData,
+			mcpTopToolsData,
+		}),
+		[
+			histogramData,
+			tokenData,
+			costData,
+			modelData,
+			latencyData,
+			providerCostData,
+			providerTokenData,
+			providerLatencyData,
+			rankingsData,
+			mcpHistogramData,
+			mcpCostData,
+			mcpTopToolsData,
+		],
+	);
+
+	// Keep a ref in sync so export callbacks always read the latest data
+	const dashboardDataRef = useRef(dashboardData);
+	dashboardDataRef.current = dashboardData;
+	const getDashboardData = useCallback(() => dashboardDataRef.current, []);
+
+	// Preload all tab data (used by CSV and PDF export)
+	const handlePreloadData = useCallback(async () => {
+		await Promise.all([ensureOverviewDataLoaded(), ensureProviderDataLoaded(), ensureRankingsDataLoaded(), ensureMcpDataLoaded()]);
+	}, [ensureOverviewDataLoaded, ensureProviderDataLoaded, ensureRankingsDataLoaded, ensureMcpDataLoaded]);
+
+	// PDF export mode — when true, all TabsContent are force-mounted so
+	// html2canvas can capture every tab.
+	const [pdfMode, setPdfMode] = useState(false);
+	const dashboardMinHeightRef = useRef<string>("");
+	const hiddenTabsRef = useRef<HTMLElement[]>([]);
+
+	// Called by ExportPopover. Loads all data, force-mounts all tabs,
+	// unhides inactive tabs so html2canvas can capture them, then returns
+	// the 4 section DOM elements. Caller must invoke the returned cleanup
+	// function when done capturing.
+	const handlePdfExport = useCallback(async (): Promise<HTMLElement[]> => {
+		// Ensure every tab's data is loaded
+		await handlePreloadData();
+
+		setPdfMode(true);
+
+		// Wait for React to render the force-mounted tabs
+		await new Promise<void>((resolve) => {
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => resolve());
+			});
+		});
+
+		// Radix sets `hidden` on inactive force-mounted TabsContent.
+		// Temporarily remove it so html2canvas can capture them.
+		const hiddenTabs = document.querySelectorAll<HTMLElement>('[data-slot="tabs-content"][hidden]');
+		hiddenTabsRef.current = Array.from(hiddenTabs);
+		for (const tab of hiddenTabs) {
+			tab.removeAttribute("hidden");
+			tab.style.display = "block";
+		}
+
+		// Collapse min-height on the dashboard container so captured
+		// sections wrap tightly around their content (no extra whitespace).
+		const dashboardEl = document.getElementById("dashboard-root");
+		if (dashboardEl) {
+			dashboardMinHeightRef.current = dashboardEl.style.minHeight;
+			dashboardEl.style.minHeight = "0";
+		}
+
+		// Let ResizeObserver-based charts (meter gauge) re-measure
+		window.dispatchEvent(new Event("resize"));
+		await new Promise<void>((resolve) => {
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => resolve());
+			});
+		});
+
+		const ids = ["dashboard-section-overview", "dashboard-section-provider-usage", "dashboard-section-rankings", "dashboard-section-mcp"];
+		return ids.map((id) => document.getElementById(id)).filter(Boolean) as HTMLElement[];
+	}, [handlePreloadData]);
+
+	// Cleanup after PDF capture is complete
+	const handlePdfExportDone = useCallback(() => {
+		// Restore minHeight on dashboard container
+		const dashboardEl = document.getElementById("dashboard-root");
+		if (dashboardEl) {
+			dashboardEl.style.minHeight = dashboardMinHeightRef.current;
+		}
+
+		// Re-hide tabs that were temporarily shown for capture
+		for (const tab of hiddenTabsRef.current) {
+			tab.setAttribute("hidden", "");
+			tab.style.display = "";
+		}
+		hiddenTabsRef.current = [];
+
+		setPdfMode(false);
+	}, []);
+
+	return (
+		<div id="dashboard-root" className="no-padding-parent no-border-parent bg-background flex h-[calc(100vh_-_16px)] w-full gap-3">
+			{/* Sidebar Filters */}
+			<LogsFilterSidebar filters={filters} onFiltersChange={setFilters} />
+
+			{/* Main Content */}
+			<ScrollArea className="bg-card flex min-w-0 flex-1 flex-col gap-4 rounded-l-md">
+				{/* Header */}
+				<div className="flex items-center justify-between p-4">
+					<div className="flex items-center gap-2">
+						<h1 className="text-lg font-semibold">Dashboard</h1>
+					</div>
+					<div className="flex items-center gap-2">
+						<ExportPopover
+							getData={getDashboardData}
+							onPreloadData={handlePreloadData}
+							onPdfExport={handlePdfExport}
+							onPdfExportDone={handlePdfExportDone}
+						/>
+						{urlState.tab === "mcp" && mcpFilterData && (
+							<div className="flex items-center gap-1">
+								{mcpFilterData.tool_names?.length > 0 && (
+									<ModelFilterSelect
+										models={mcpFilterData.tool_names}
+										selectedModel={selectedMcpToolNames.length === 1 ? selectedMcpToolNames[0] : "all"}
+										onModelChange={(value) => {
+											if (value === "all") {
+												setUrlState({ mcp_tool_names: "" });
+											} else {
+												setUrlState({ mcp_tool_names: value });
+											}
+										}}
+										placeholder="All Tools"
+										data-testid="dashboard-mcp-tool-filter"
+									/>
+								)}
+								{mcpFilterData.server_labels?.length > 0 && (
+									<ModelFilterSelect
+										models={mcpFilterData.server_labels}
+										selectedModel={selectedMcpServerLabels.length === 1 ? selectedMcpServerLabels[0] : "all"}
+										onModelChange={(value) => {
+											if (value === "all") {
+												setUrlState({ mcp_server_labels: "" });
+											} else {
+												setUrlState({ mcp_server_labels: value });
+											}
+										}}
+										placeholder="All Servers"
+										data-testid="dashboard-mcp-server-filter"
+									/>
+								)}
+							</div>
+						)}
+						<DateTimePickerWithRange
+							dateTime={dateRange}
+							onDateTimeUpdate={handleDateRangeChange}
+							preDefinedPeriods={TIME_PERIODS}
+							predefinedPeriod={urlState.period || undefined}
+							onPredefinedPeriodChange={handlePeriodChange}
+							triggerTestId="dashboard-filter-daterange"
+							popupAlignment="end"
+						/>
+					</div>
+				</div>
+
+				<div className="p-4">
+					{/* Tabs */}
+					<Tabs value={urlState.tab} onValueChange={handleTabChange}>
+						<TabsList className="mb-2">
+							<TabsTrigger value="overview" data-testid="dashboard-tab-overview">
+								Overview
+							</TabsTrigger>
+							<TabsTrigger value="provider-usage" data-testid="dashboard-tab-provider-usage">
+								Provider Usage
+							</TabsTrigger>
+							<TabsTrigger value="rankings" data-testid="dashboard-tab-rankings">
+								Model Rankings
+							</TabsTrigger>
+							<TabsTrigger value="mcp" data-testid="dashboard-tab-mcp">
+								MCP usage
+							</TabsTrigger>
+							<TabsTrigger value="user-rankings" data-testid="dashboard-tab-user-rankings">
+								User Rankings
+							</TabsTrigger>
+						</TabsList>
+
+						{/* Overview Tab */}
+						<TabsContent value="overview" {...(pdfMode && { forceMount: true })}>
+							<div id="dashboard-section-overview">
+								<OverviewTab
+									histogramData={histogramData}
+									tokenData={tokenData}
+									costData={costData}
+									modelData={modelData}
+									latencyData={latencyData}
+									loadingHistogram={loadingHistogram}
+									loadingTokens={loadingTokens}
+									loadingCost={loadingCost}
+									loadingModels={loadingModels}
+									loadingLatency={loadingLatency}
+									startTime={urlState.start_time}
+									endTime={urlState.end_time}
+									volumeChartType={toChartType(urlState.volume_chart)}
+									tokenChartType={toChartType(urlState.token_chart)}
+									costChartType={toChartType(urlState.cost_chart)}
+									modelChartType={toChartType(urlState.model_chart)}
+									latencyChartType={toChartType(urlState.latency_chart)}
+									costModel={urlState.cost_model}
+									usageModel={urlState.usage_model}
+									costModels={costModels}
+									usageModels={usageModels}
+									availableModels={availableModels}
+									onVolumeChartToggle={handleVolumeChartToggle}
+									onTokenChartToggle={handleTokenChartToggle}
+									onCostChartToggle={handleCostChartToggle}
+									onModelChartToggle={handleModelChartToggle}
+									onLatencyChartToggle={handleLatencyChartToggle}
+									onCostModelChange={handleCostModelChange}
+									onUsageModelChange={handleUsageModelChange}
+								/>
+							</div>
+						</TabsContent>
+
+						{/* Provider Usage Tab */}
+						<TabsContent value="provider-usage" {...(pdfMode && { forceMount: true })}>
+							<div id="dashboard-section-provider-usage">
+								<ProviderUsageTab
+									providerCostData={providerCostData}
+									providerTokenData={providerTokenData}
+									providerLatencyData={providerLatencyData}
+									loadingProviderCost={loadingProviderCost}
+									loadingProviderTokens={loadingProviderTokens}
+									loadingProviderLatency={loadingProviderLatency}
+									startTime={urlState.start_time}
+									endTime={urlState.end_time}
+									providerCostChartType={toChartType(urlState.provider_cost_chart)}
+									providerTokenChartType={toChartType(urlState.provider_token_chart)}
+									providerLatencyChartType={toChartType(urlState.provider_latency_chart)}
+									providerCostProvider={urlState.provider_cost_provider}
+									providerTokenProvider={urlState.provider_token_provider}
+									providerLatencyProvider={urlState.provider_latency_provider}
+									availableProviders={availableProviders}
+									providerCostProviders={providerCostProviders}
+									providerTokenProviders={providerTokenProviders}
+									providerLatencyProviders={providerLatencyProviders}
+									onProviderCostChartToggle={handleProviderCostChartToggle}
+									onProviderTokenChartToggle={handleProviderTokenChartToggle}
+									onProviderLatencyChartToggle={handleProviderLatencyChartToggle}
+									onProviderCostProviderChange={handleProviderCostProviderChange}
+									onProviderTokenProviderChange={handleProviderTokenProviderChange}
+									onProviderLatencyProviderChange={handleProviderLatencyProviderChange}
+								/>
+							</div>
+						</TabsContent>
+
+						{/* Model Rankings Tab */}
+						<TabsContent value="rankings" {...(pdfMode && { forceMount: true })}>
+							<div id="dashboard-section-rankings">
+								<ModelRankingsTab
+									rankingsData={rankingsData}
+									loading={loadingRankings}
+									modelData={modelData}
+									loadingModels={loadingModels}
+									startTime={urlState.start_time}
+									endTime={urlState.end_time}
+								/>
+							</div>
+						</TabsContent>
+
+						{/* MCP Tab */}
+						<TabsContent value="mcp" {...(pdfMode && { forceMount: true })}>
+							<div id="dashboard-section-mcp">
+								<MCPTab
+									mcpHistogramData={mcpHistogramData}
+									mcpCostData={mcpCostData}
+									mcpTopToolsData={mcpTopToolsData}
+									loadingMcpHistogram={loadingMcpHistogram}
+									loadingMcpCost={loadingMcpCost}
+									loadingMcpTopTools={loadingMcpTopTools}
+									startTime={urlState.start_time}
+									endTime={urlState.end_time}
+									mcpVolumeChartType={toChartType(urlState.mcp_volume_chart)}
+									mcpCostChartType={toChartType(urlState.mcp_cost_chart)}
+									onMcpVolumeChartToggle={handleMcpVolumeChartToggle}
+									onMcpCostChartToggle={handleMcpCostChartToggle}
+								/>
+							</div>
+						</TabsContent>
+
+						{/* User Rankings Tab (Enterprise) */}
+						<TabsContent value="user-rankings">
+							<UserRankingsTab />
+						</TabsContent>
+					</Tabs>
+				</div>
+			</ScrollArea>
+		</div>
+	);
+}

ui/app/workspace/dashboard/utils/chartUtils.ts

@@ -0,0 +1,95 @@
+// Chart utility functions for the dashboard
+
+// Format timestamp based on bucket size
+export function formatTimestamp(timestamp: string, bucketSizeSeconds: number): string {
+	const date = new Date(timestamp);
+
+	if (bucketSizeSeconds >= 86400) {
+		// Daily buckets: "Jan 20"
+		return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+	} else if (bucketSizeSeconds >= 3600) {
+		// Hourly buckets: "10:00"
+		return date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
+	} else {
+		// Sub-hourly: "10:15"
+		return date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
+	}
+}
+
+// Format full timestamp for tooltip
+export function formatFullTimestamp(timestamp: string): string {
+	const date = new Date(timestamp);
+	return date.toLocaleString("en-US", {
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false,
+	});
+}
+
+// Format cost values
+export function formatCost(cost: number): string {
+	if (cost < 0.01) {
+		return `$${cost.toFixed(4)}`;
+	}
+	return `$${cost.toFixed(2)}`;
+}
+
+// Format token values
+export function formatTokens(tokens: number): string {
+	if (tokens >= 1000000) {
+		return `${(tokens / 1000000).toFixed(1)}M`;
+	}
+	if (tokens >= 1000) {
+		return `${(tokens / 1000).toFixed(1)}K`;
+	}
+	return tokens.toLocaleString();
+}
+
+// Color palette for models
+export const MODEL_COLORS = [
+	"#10b981", // emerald-500
+	"#3b82f6", // blue-500
+	"#f59e0b", // amber-500
+	"#ef4444", // red-500
+	"#8b5cf6", // violet-500
+	"#ec4899", // pink-500
+	"#06b6d4", // cyan-500
+	"#84cc16", // lime-500
+];
+
+// Get color for a model by index
+export function getModelColor(index: number): string {
+	return MODEL_COLORS[index % MODEL_COLORS.length];
+}
+
+// Format latency values
+export function formatLatency(ms: number): string {
+	if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
+	return `${ms.toFixed(0)}ms`;
+}
+
+// Latency chart color palette
+export const LATENCY_COLORS = {
+	avg: "#06b6d4", // cyan-500
+	p90: "#3b82f6", // blue-500
+	p95: "#f59e0b", // amber-500
+	p99: "#ef4444", // red-500
+};
+
+// Shared CSS class constants for chart card headers
+export const CHART_HEADER_ACTIONS_CLASS = "flex min-w-0 w-full flex-col-reverse gap-2";
+export const CHART_HEADER_LEGEND_CLASS = "flex min-h-5 min-w-0 flex-wrap items-center gap-2 pl-2 text-xs";
+export const CHART_HEADER_CONTROLS_CLASS = "flex items-center justify-end gap-2";
+
+// Chart colors
+export const CHART_COLORS = {
+	success: "#10b981", // emerald-500
+	error: "#ef4444", // red-500
+	promptTokens: "#3b82f6", // blue-500
+	completionTokens: "#10b981", // emerald-500
+	totalTokens: "#8b5cf6", // violet-500
+	cost: "#f59e0b", // amber-500
+	cachedReadTokens: "#06b6d4", // cyan-500
+};

ui/app/workspace/dashboard/utils/exportUtils.ts

@@ -0,0 +1,212 @@
+/**
+ * Dashboard-specific CSV data converters.
+ *
+ * Each function takes the dashboard data and returns { headers, rows } ready
+ * for `buildCSV()`.
+ */
+
+import type {
+	CostHistogramResponse,
+	LatencyHistogramResponse,
+	LogsHistogramResponse,
+	MCPCostHistogramResponse,
+	MCPHistogramResponse,
+	MCPTopToolsResponse,
+	ModelHistogramResponse,
+	ModelRankingsResponse,
+	ProviderCostHistogramResponse,
+	ProviderLatencyHistogramResponse,
+	ProviderTokenHistogramResponse,
+	TokenHistogramResponse,
+} from "@/lib/types/logs";
+
+type CSVData = { headers: string[]; rows: unknown[][] };
+
+export function overviewVolumeToCSV(data: LogsHistogramResponse | null): CSVData {
+	const headers = ["Timestamp", "Total Requests", "Success", "Error"];
+	const rows = (data?.buckets ?? []).map((b) => [b.timestamp, b.count, b.success, b.error]);
+	return { headers, rows };
+}
+
+export function overviewTokensToCSV(data: TokenHistogramResponse | null): CSVData {
+	const headers = ["Timestamp", "Prompt Tokens", "Completion Tokens", "Total Tokens", "Cached Read Tokens"];
+	const rows = (data?.buckets ?? []).map((b) => [b.timestamp, b.prompt_tokens, b.completion_tokens, b.total_tokens, b.cached_read_tokens]);
+	return { headers, rows };
+}
+
+export function overviewCostToCSV(data: CostHistogramResponse | null): CSVData {
+	const models = data?.models ?? [];
+	const headers = ["Timestamp", "Total Cost", ...models];
+	const rows = (data?.buckets ?? []).map((b) => [b.timestamp, b.total_cost, ...models.map((m) => b.by_model?.[m] ?? 0)]);
+	return { headers, rows };
+}
+
+export function overviewModelUsageToCSV(data: ModelHistogramResponse | null): CSVData {
+	const models = data?.models ?? [];
+	const modelHeaders = models.flatMap((m) => [`${m} Total`, `${m} Success`, `${m} Error`]);
+	const headers = ["Timestamp", ...modelHeaders];
+	const rows = (data?.buckets ?? []).map((b) => [
+		b.timestamp,
+		...models.flatMap((m) => {
+			const stats = b.by_model?.[m];
+			return [stats?.total ?? 0, stats?.success ?? 0, stats?.error ?? 0];
+		}),
+	]);
+	return { headers, rows };
+}
+
+export function overviewLatencyToCSV(data: LatencyHistogramResponse | null): CSVData {
+	const headers = ["Timestamp", "Avg Latency (ms)", "P90 (ms)", "P95 (ms)", "P99 (ms)", "Total Requests"];
+	const rows = (data?.buckets ?? []).map((b) => [
+		b.timestamp,
+		b.avg_latency,
+		b.p90_latency,
+		b.p95_latency,
+		b.p99_latency,
+		b.total_requests,
+	]);
+	return { headers, rows };
+}
+
+export function providerCostToCSV(data: ProviderCostHistogramResponse | null): CSVData {
+	const providers = data?.providers ?? [];
+	const headers = ["Timestamp", "Total Cost", ...providers];
+	const rows = (data?.buckets ?? []).map((b) => [b.timestamp, b.total_cost, ...providers.map((p) => b.by_provider?.[p] ?? 0)]);
+	return { headers, rows };
+}
+
+export function providerTokensToCSV(data: ProviderTokenHistogramResponse | null): CSVData {
+	const providers = data?.providers ?? [];
+	const provHeaders = providers.flatMap((p) => [`${p} Prompt`, `${p} Completion`, `${p} Total`]);
+	const headers = ["Timestamp", ...provHeaders];
+	const rows = (data?.buckets ?? []).map((b) => [
+		b.timestamp,
+		...providers.flatMap((p) => {
+			const stats = b.by_provider?.[p];
+			return [stats?.prompt_tokens ?? 0, stats?.completion_tokens ?? 0, stats?.total_tokens ?? 0];
+		}),
+	]);
+	return { headers, rows };
+}
+
+export function providerLatencyToCSV(data: ProviderLatencyHistogramResponse | null): CSVData {
+	const providers = data?.providers ?? [];
+	const provHeaders = providers.flatMap((p) => [`${p} Avg (ms)`, `${p} P90 (ms)`, `${p} P95 (ms)`, `${p} P99 (ms)`]);
+	const headers = ["Timestamp", ...provHeaders];
+	const rows = (data?.buckets ?? []).map((b) => [
+		b.timestamp,
+		...providers.flatMap((p) => {
+			const stats = b.by_provider?.[p];
+			return [stats?.avg_latency ?? 0, stats?.p90_latency ?? 0, stats?.p95_latency ?? 0, stats?.p99_latency ?? 0];
+		}),
+	]);
+	return { headers, rows };
+}
+
+export function modelRankingsToCSV(data: ModelRankingsResponse | null): CSVData {
+	const headers = [
+		"Model",
+		"Provider",
+		"Total Requests",
+		"Success Count",
+		"Success Rate (%)",
+		"Total Tokens",
+		"Total Cost ($)",
+		"Avg Latency (ms)",
+		"Requests Trend (%)",
+		"Tokens Trend (%)",
+		"Cost Trend (%)",
+		"Latency Trend (%)",
+	];
+	const rows = (data?.rankings ?? []).map((r) => [
+		r.model,
+		r.provider,
+		r.total_requests,
+		r.success_count,
+		r.success_rate,
+		r.total_tokens,
+		r.total_cost,
+		r.avg_latency,
+		r.trend.has_previous_period ? r.trend.requests_trend : "N/A",
+		r.trend.has_previous_period ? r.trend.tokens_trend : "N/A",
+		r.trend.has_previous_period ? r.trend.cost_trend : "N/A",
+		r.trend.has_previous_period ? r.trend.latency_trend : "N/A",
+	]);
+	return { headers, rows };
+}
+
+export function mcpVolumeToCSV(data: MCPHistogramResponse | null): CSVData {
+	const headers = ["Timestamp", "Total Executions", "Success", "Error"];
+	const rows = (data?.buckets ?? []).map((b) => [b.timestamp, b.count, b.success, b.error]);
+	return { headers, rows };
+}
+
+export function mcpCostToCSV(data: MCPCostHistogramResponse | null): CSVData {
+	const headers = ["Timestamp", "Total Cost ($)"];
+	const rows = (data?.buckets ?? []).map((b) => [b.timestamp, b.total_cost]);
+	return { headers, rows };
+}
+
+export function mcpTopToolsToCSV(data: MCPTopToolsResponse | null): CSVData {
+	const headers = ["Tool Name", "Execution Count", "Cost ($)"];
+	const rows = (data?.tools ?? []).map((t) => [t.tool_name, t.count, t.cost]);
+	return { headers, rows };
+}
+
+export interface DashboardData {
+	// Overview
+	histogramData: LogsHistogramResponse | null;
+	tokenData: TokenHistogramResponse | null;
+	costData: CostHistogramResponse | null;
+	modelData: ModelHistogramResponse | null;
+	latencyData: LatencyHistogramResponse | null;
+	// Provider Usage
+	providerCostData: ProviderCostHistogramResponse | null;
+	providerTokenData: ProviderTokenHistogramResponse | null;
+	providerLatencyData: ProviderLatencyHistogramResponse | null;
+	// Rankings
+	rankingsData: ModelRankingsResponse | null;
+	// MCP
+	mcpHistogramData: MCPHistogramResponse | null;
+	mcpCostData: MCPCostHistogramResponse | null;
+	mcpTopToolsData: MCPTopToolsResponse | null;
+}
+
+export type ExportTab = "all" | "overview" | "provider-usage" | "rankings" | "mcp";
+
+/** Return all CSV sections for the selected scope. Each entry becomes its own sheet / file section. */
+export function getCSVSections(data: DashboardData, tab: ExportTab): { name: string; csv: CSVData }[] {
+	const sections: { name: string; csv: CSVData }[] = [];
+
+	if (tab === "all" || tab === "overview") {
+		sections.push(
+			{ name: "overview-volume", csv: overviewVolumeToCSV(data.histogramData) },
+			{ name: "overview-tokens", csv: overviewTokensToCSV(data.tokenData) },
+			{ name: "overview-cost", csv: overviewCostToCSV(data.costData) },
+			{ name: "overview-model-usage", csv: overviewModelUsageToCSV(data.modelData) },
+			{ name: "overview-latency", csv: overviewLatencyToCSV(data.latencyData) },
+		);
+	}
+
+	if (tab === "all" || tab === "provider-usage") {
+		sections.push(
+			{ name: "provider-cost", csv: providerCostToCSV(data.providerCostData) },
+			{ name: "provider-tokens", csv: providerTokensToCSV(data.providerTokenData) },
+			{ name: "provider-latency", csv: providerLatencyToCSV(data.providerLatencyData) },
+		);
+	}
+
+	if (tab === "all" || tab === "rankings") {
+		sections.push({ name: "model-rankings", csv: modelRankingsToCSV(data.rankingsData) });
+	}
+
+	if (tab === "all" || tab === "mcp") {
+		sections.push(
+			{ name: "mcp-volume", csv: mcpVolumeToCSV(data.mcpHistogramData) },
+			{ name: "mcp-cost", csv: mcpCostToCSV(data.mcpCostData) },
+			{ name: "mcp-top-tools", csv: mcpTopToolsToCSV(data.mcpTopToolsData) },
+		);
+	}
+
+	return sections;
+}

ui/app/workspace/docs/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import DocsPage from "./page";
+
+export const Route = createFileRoute("/workspace/docs")({
+	component: DocsPage,
+});

ui/app/workspace/docs/page.tsx

@@ -0,0 +1,201 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import GradientHeader from "@/components/ui/gradientHeader";
+import { BookOpen, Code, ExternalLink, FileText, GitBranch, Play, Shield, Users, Zap } from "lucide-react";
+
+const docSections = [
+	{
+		title: "Quick Start",
+		description: "Get Bifrost running in under 30 seconds",
+		icon: Play,
+		url: "https://github.com/maximhq/bifrost/tree/main/docs/quickstart",
+		badge: "Popular",
+		items: ["HTTP Transport Setup", "Go Package Usage", "Docker Guide"],
+	},
+	{
+		title: "Architecture",
+		description: "Deep dive into Bifrost's design and performance",
+		icon: GitBranch,
+		url: "https://github.com/maximhq/bifrost/tree/main/docs/architecture",
+		items: ["System Overview", "Request Flow", "Concurrency Model", "Design Decisions"],
+	},
+	{
+		title: "Usage Guides",
+		description: "Complete API reference and configuration guides",
+		icon: BookOpen,
+		url: "https://github.com/maximhq/bifrost/tree/main/docs/usage",
+		badge: "Comprehensive",
+		items: ["Providers Setup", "Key Management", "Error Handling", "Memory & Networking"],
+	},
+	{
+		title: "Contributing",
+		description: "Help improve Bifrost for everyone",
+		icon: Users,
+		url: "https://github.com/maximhq/bifrost/tree/main/docs/contributing",
+		items: ["Contributing Guide", "Adding Providers", "Plugin Development", "Code Conventions"],
+	},
+	{
+		title: "Integration Examples",
+		description: "Practical examples and testing code",
+		icon: Code,
+		url: "https://github.com/maximhq/bifrost/tree/main/docs/usage/http-transport/integrations",
+		items: ["OpenAI Integration", "Anthropic Integration", "GenAI Integration", "Migration Guides"],
+	},
+	{
+		title: "Benchmarks",
+		description: "Performance metrics and guides",
+		icon: Zap,
+		url: "https://github.com/maximhq/bifrost/blob/main/docs/benchmarks.md",
+		items: ["5K RPS Test Results", "Performance Metrics", "Configuration Tuning", "Hardware Comparisons"],
+	},
+];
+
+const featuredDocs = [
+	{
+		title: "MCP Documentation",
+		description: "Comprehensive guide to Model Context Protocol integration",
+		content: "Learn how to build sophisticated AI agents with MCP support, tool calling, and external integrations.",
+		href: "https://github.com/maximhq/bifrost/blob/main/docs/mcp.md",
+		icon: FileText,
+		buttonText: "View MCP Guide",
+		borderColor: "border-primary/20",
+		backgroundColor: "bg-primary/5",
+		iconColor: "text-primary",
+	},
+	{
+		title: "Governance Plugin",
+		description: "Complete access control, budgets, and rate limiting guide",
+		content: "Master Virtual Keys, hierarchical budgets, rate limiting, and usage tracking for secure AI infrastructure.",
+		href: "https://github.com/maximhq/bifrost/blob/main/docs/governance.md",
+		icon: Shield,
+		buttonText: "View Governance Guide",
+		borderColor: "border-green-200 dark:border-green-800",
+		backgroundColor: "bg-green-50 dark:bg-green-950/20",
+		iconColor: "text-green-600",
+	},
+];
+
+export default function DocsPage() {
+	return (
+		<div className="dark:bg-card bg-white">
+			<div className="mx-auto max-w-7xl">
+				<div className="space-y-8">
+					{/* Header */}
+					<div className="space-y-4 text-center">
+						<div className="bg-primary/10 text-primary inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm">
+							<BookOpen className="h-4 w-4" />
+							<span className="font-semibold">Documentation</span>
+						</div>
+						<GradientHeader title="Power Up Your Bifrost Stack" />
+						<p className="text-muted-foreground mx-auto max-w-2xl text-lg">
+							Everything you need to know about building production AI applications with Bifrost
+						</p>
+						<div className="flex justify-center gap-4">
+							<Button asChild>
+								<a
+									href="https://github.com/maximhq/bifrost/tree/main/docs"
+									target="_blank"
+									rel="noopener noreferrer"
+									data-testid="docs-view-full-documentation-link"
+								>
+									<ExternalLink className="mr-2 h-4 w-4" />
+									View Full Documentation
+								</a>
+							</Button>
+							<Button variant="outline" asChild>
+								<a
+									href="https://github.com/maximhq/bifrost/tree/main/docs/quickstart"
+									target="_blank"
+									rel="noopener noreferrer"
+									data-testid="docs-quick-start-guide-link"
+								>
+									<Play className="mr-2 h-4 w-4" />
+									Quick Start Guide
+								</a>
+							</Button>
+						</div>
+					</div>
+
+					{/* Documentation Sections */}
+					<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+						{docSections.map((section) => {
+							const Icon = section.icon;
+							return (
+								<Card key={section.title} className="group transition-all duration-200 hover:shadow-lg">
+									<CardHeader>
+										<div className="flex items-center justify-between">
+											<div className="bg-primary/10 group-hover:bg-primary/20 mb-4 flex h-12 w-12 items-center justify-center rounded-lg transition-colors">
+												<Icon className="text-primary h-6 w-6" />
+											</div>
+											{section.badge && (
+												<Badge variant="secondary" className="text-xs">
+													{section.badge}
+												</Badge>
+											)}
+										</div>
+										<CardTitle className="text-xl">{section.title}</CardTitle>
+										<CardDescription className="leading-relaxed">{section.description}</CardDescription>
+									</CardHeader>
+									<CardContent className="flex h-full flex-col justify-between gap-8">
+										<div className="space-y-4">
+											<ul className="space-y-2">
+												{section.items.map((item, index) => (
+													<li key={index} className="text-muted-foreground flex items-center gap-2 text-sm">
+														<div className="bg-primary h-1.5 w-1.5 rounded-full" />
+														{item}
+													</li>
+												))}
+											</ul>
+										</div>
+										<Button asChild variant="outline" className="w-full">
+											<a
+												href={section.url}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="flex items-center justify-center gap-2"
+												data-testid={`docs-read-more-${section.title.replace(/[^a-z0-9]+/gi, "-").toLowerCase()}`}
+											>
+												Read More
+												<ExternalLink className="h-4 w-4" />
+											</a>
+										</Button>
+									</CardContent>
+								</Card>
+							);
+						})}
+					</div>
+
+					{/* Featured Documentation */}
+					<div className="grid gap-6 pt-8 md:grid-cols-2">
+						{featuredDocs.map((doc, index) => (
+							<Card className={`${doc.borderColor} ${doc.backgroundColor}`} key={index}>
+								<CardHeader>
+									<CardTitle className="flex items-center gap-2">
+										<doc.icon className={`h-5 w-5 ${doc.iconColor}`} />
+										{doc.title}
+									</CardTitle>
+									<CardDescription>{doc.description}</CardDescription>
+								</CardHeader>
+								<CardContent>
+									<p className="text-muted-foreground mb-4 text-sm">{doc.content}</p>
+									<Button asChild className="w-full">
+										<a
+											href={doc.href}
+											target="_blank"
+											rel="noopener noreferrer"
+											data-testid={`docs-featured-${doc.title.replace(/[^a-z0-9]+/gi, "-").toLowerCase()}`}
+										>
+											<doc.icon className="mr-2 h-4 w-4" />
+											{doc.buttonText}
+										</a>
+									</Button>
+								</CardContent>
+							</Card>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

ui/app/workspace/governance/access-profiles/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import AccessProfilesPage from "./page";
+
+export const Route = createFileRoute("/workspace/governance/access-profiles")({
+	component: AccessProfilesPage,
+});

ui/app/workspace/governance/access-profiles/page.tsx

@@ -0,0 +1,17 @@
+import { NoPermissionView } from "@/components/noPermissionView";
+import AccessProfilesIndexView from "@enterprise/components/access-profiles/accessProfilesIndexView";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+
+export default function AccessProfilesPage() {
+	const hasAccessProfilesAccess = useRbac(RbacResource.AccessProfiles, RbacOperation.View);
+
+	if (!hasAccessProfilesAccess) {
+		return <NoPermissionView entity="access-profiles" />;
+	}
+
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<AccessProfilesIndexView />
+		</div>
+	);
+}

ui/app/workspace/governance/business-units/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import GovernanceBusinessUnitsPage from "./page";
+
+export const Route = createFileRoute("/workspace/governance/business-units")({
+	component: GovernanceBusinessUnitsPage,
+});

ui/app/workspace/governance/business-units/page.tsx

@@ -0,0 +1,9 @@
+import { BusinessUnitsView } from "@enterprise/components/user-groups/businessUnitsView";
+
+export default function GovernanceBusinessUnitsPage() {
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<BusinessUnitsView />
+		</div>
+	);
+}

ui/app/workspace/governance/customers/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import GovernanceCustomersPage from "./page";
+
+export const Route = createFileRoute("/workspace/governance/customers")({
+	component: GovernanceCustomersPage,
+});

ui/app/workspace/governance/customers/page.tsx

@@ -0,0 +1,102 @@
+import FullPageLoader from "@/components/fullPageLoader";
+import { useDebouncedValue } from "@/hooks/useDebounce";
+import { getErrorMessage, useGetCustomersQuery, useGetTeamsQuery, useGetVirtualKeysQuery } from "@/lib/store";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import CustomersTable from "@/app/workspace/governance/views/customerTable";
+
+const POLLING_INTERVAL = 5000;
+const PAGE_SIZE = 25;
+
+export default function GovernanceCustomersPage() {
+	const hasVirtualKeysAccess = useRbac(RbacResource.VirtualKeys, RbacOperation.View);
+	const hasTeamsAccess = useRbac(RbacResource.Teams, RbacOperation.View);
+	const hasCustomersAccess = useRbac(RbacResource.Customers, RbacOperation.View);
+	const shownErrorsRef = useRef(new Set<string>());
+
+	const [search, setSearch] = useState("");
+	const [offset, setOffset] = useState(0);
+	const debouncedSearch = useDebouncedValue(search, 300);
+
+	useEffect(() => {
+		setOffset(0);
+	}, [debouncedSearch]);
+
+	const {
+		data: virtualKeysData,
+		error: vkError,
+		isLoading: vkLoading,
+	} = useGetVirtualKeysQuery(undefined, {
+		skip: !hasVirtualKeysAccess,
+		pollingInterval: POLLING_INTERVAL,
+	});
+	const {
+		data: teamsData,
+		error: teamsError,
+		isLoading: teamsLoading,
+	} = useGetTeamsQuery(undefined, { skip: !hasTeamsAccess, pollingInterval: POLLING_INTERVAL });
+	const {
+		data: customersData,
+		error: customersError,
+		isLoading: customersLoading,
+	} = useGetCustomersQuery(
+		{
+			limit: PAGE_SIZE,
+			offset,
+			search: debouncedSearch || undefined,
+		},
+		{
+			skip: !hasCustomersAccess,
+			pollingInterval: POLLING_INTERVAL,
+		},
+	);
+
+	const customersTotal = customersData?.total_count ?? 0;
+
+	// Snap offset back when total shrinks past current page (e.g. delete last item on last page)
+	useEffect(() => {
+		if (!customersData || offset < customersTotal) return;
+		setOffset(customersTotal === 0 ? 0 : Math.floor((customersTotal - 1) / PAGE_SIZE) * PAGE_SIZE);
+	}, [customersTotal, offset]);
+
+	const isLoading = vkLoading || teamsLoading || customersLoading;
+
+	useEffect(() => {
+		if (!vkError && !teamsError && !customersError) {
+			shownErrorsRef.current.clear();
+			return;
+		}
+		const errorKey = `${!!vkError}-${!!teamsError}-${!!customersError}`;
+		if (shownErrorsRef.current.has(errorKey)) return;
+		shownErrorsRef.current.add(errorKey);
+		if (vkError && teamsError && customersError) {
+			toast.error("Failed to load governance data.");
+		} else {
+			if (vkError) toast.error(`Failed to load virtual keys: ${getErrorMessage(vkError)}`);
+			if (teamsError) toast.error(`Failed to load teams: ${getErrorMessage(teamsError)}`);
+			if (customersError) toast.error(`Failed to load customers: ${getErrorMessage(customersError)}`);
+		}
+	}, [vkError, teamsError, customersError]);
+
+	if (isLoading) {
+		return <FullPageLoader />;
+	}
+
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<CustomersTable
+				customers={customersData?.customers || []}
+				totalCount={customersData?.total_count || 0}
+				teams={teamsData?.teams || []}
+				virtualKeys={virtualKeysData?.virtual_keys || []}
+				search={search}
+				debouncedSearch={debouncedSearch}
+				onSearchChange={setSearch}
+				offset={offset}
+				limit={PAGE_SIZE}
+				onOffsetChange={setOffset}
+			/>
+		</div>
+	);
+}

ui/app/workspace/governance/layout.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute, Outlet, useChildMatches } from "@tanstack/react-router";
+import { NoPermissionView } from "@/components/noPermissionView";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import GovernancePage from "./page";
+
+function RouteComponent() {
+	const hasGovernanceAccess = useRbac(RbacResource.Governance, RbacOperation.View);
+	const childMatches = useChildMatches();
+	if (!hasGovernanceAccess) {
+		return <NoPermissionView entity="governance" />;
+	}
+	return childMatches.length === 0 ? <GovernancePage /> : <Outlet />;
+}
+
+export const Route = createFileRoute("/workspace/governance")({
+	component: RouteComponent,
+});

ui/app/workspace/governance/page.tsx

@@ -0,0 +1,10 @@
+import { useNavigate } from "@tanstack/react-router";
+import { useEffect } from "react";
+
+export default function GovernancePage() {
+	const navigate = useNavigate();
+	useEffect(() => {
+		navigate({ to: "/workspace/governance/virtual-keys", replace: true });
+	}, [navigate]);
+	return null;
+}

ui/app/workspace/governance/rbac/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import GovernanceRbacPage from "./page";
+
+export const Route = createFileRoute("/workspace/governance/rbac")({
+	component: GovernanceRbacPage,
+});

ui/app/workspace/governance/rbac/page.tsx

@@ -0,0 +1,9 @@
+import RBACView from "@enterprise/components/rbac/rbacView";
+
+export default function GovernanceRbacPage() {
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<RBACView />
+		</div>
+	);
+}

ui/app/workspace/governance/teams/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import GovernanceTeamsPage from "./page";
+
+export const Route = createFileRoute("/workspace/governance/teams")({
+	component: GovernanceTeamsPage,
+});

ui/app/workspace/governance/teams/page.tsx

@@ -0,0 +1,5 @@
+import { TeamsView } from "@enterprise/components/user-groups/teamsView"
+
+export default function GovernanceTeamsPage() {
+		return <TeamsView />
+}

ui/app/workspace/governance/users/layout.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import GovernanceUsersPage from "./page";
+
+export const Route = createFileRoute("/workspace/governance/users")({
+	component: GovernanceUsersPage,
+});

ui/app/workspace/governance/users/page.tsx

@@ -0,0 +1,9 @@
+import UsersView from "@enterprise/components/user-groups/usersView";
+
+export default function GovernanceUsersPage() {
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<UsersView />
+		</div>
+	);
+}

ui/app/workspace/governance/views/customerDialog.tsx

@@ -0,0 +1,374 @@
+import FormFooter from "@/components/formFooter";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import NumberAndSelect from "@/components/ui/numberAndSelect";
+import { resetDurationOptions } from "@/lib/constants/governance";
+import { getErrorMessage, useCreateCustomerMutation, useUpdateCustomerMutation } from "@/lib/store";
+import { CreateCustomerRequest, Customer, UpdateCustomerRequest } from "@/lib/types/governance";
+import { formatCurrency } from "@/lib/utils/governance";
+import { Validator } from "@/lib/utils/validation";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { formatDistanceToNow } from "date-fns";
+import isEqual from "lodash.isequal";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+interface CustomerDialogProps {
+	customer?: Customer | null;
+	onSave: () => void;
+	onCancel: () => void;
+}
+
+interface CustomerFormData {
+	name: string;
+	// Budget
+	budgetMaxLimit: number | undefined;
+	budgetResetDuration: string;
+	// Rate Limit
+	tokenMaxLimit: number | undefined;
+	tokenResetDuration: string;
+	requestMaxLimit: number | undefined;
+	requestResetDuration: string;
+	isDirty: boolean;
+}
+
+// Helper function to create initial state
+const createInitialState = (customer?: Customer | null): Omit<CustomerFormData, "isDirty"> => {
+	return {
+		name: customer?.name || "",
+		// Budget
+		budgetMaxLimit: customer?.budget?.max_limit ?? undefined,
+		budgetResetDuration: customer?.budget?.reset_duration || "1M",
+		// Rate Limit
+		tokenMaxLimit: customer?.rate_limit?.token_max_limit ?? undefined,
+		tokenResetDuration: customer?.rate_limit?.token_reset_duration || "1h",
+		requestMaxLimit: customer?.rate_limit?.request_max_limit ?? undefined,
+		requestResetDuration: customer?.rate_limit?.request_reset_duration || "1h",
+	};
+};
+
+export default function CustomerDialog({ customer, onSave, onCancel }: CustomerDialogProps) {
+	const isEditing = !!customer;
+	const [initialState] = useState<Omit<CustomerFormData, "isDirty">>(createInitialState(customer));
+	const [formData, setFormData] = useState<CustomerFormData>({
+		...initialState,
+		isDirty: false,
+	});
+
+	const hasCreateAccess = useRbac(RbacResource.Customers, RbacOperation.Create);
+	const hasUpdateAccess = useRbac(RbacResource.Customers, RbacOperation.Update);
+	const hasPermission = isEditing ? hasUpdateAccess : hasCreateAccess;
+
+	// RTK Query hooks
+	const [createCustomer, { isLoading: isCreating }] = useCreateCustomerMutation();
+	const [updateCustomer, { isLoading: isUpdating }] = useUpdateCustomerMutation();
+	const loading = isCreating || isUpdating;
+
+	// Track isDirty state
+	useEffect(() => {
+		const currentData = {
+			name: formData.name,
+			budgetMaxLimit: formData.budgetMaxLimit,
+			budgetResetDuration: formData.budgetResetDuration,
+			tokenMaxLimit: formData.tokenMaxLimit,
+			tokenResetDuration: formData.tokenResetDuration,
+			requestMaxLimit: formData.requestMaxLimit,
+			requestResetDuration: formData.requestResetDuration,
+		};
+		setFormData((prev) => ({
+			...prev,
+			isDirty: !isEqual(initialState, currentData),
+		}));
+	}, [
+		formData.name,
+		formData.budgetMaxLimit,
+		formData.budgetResetDuration,
+		formData.tokenMaxLimit,
+		formData.tokenResetDuration,
+		formData.requestMaxLimit,
+		formData.requestResetDuration,
+		initialState,
+	]);
+
+	// Values for validation and submission (already numbers)
+	const budgetMaxLimitNum = formData.budgetMaxLimit;
+	const tokenMaxLimitNum = formData.tokenMaxLimit;
+	const requestMaxLimitNum = formData.requestMaxLimit;
+
+	// Validation
+	const validator = useMemo(
+		() =>
+			new Validator([
+				// Basic validation
+				Validator.required(formData.name.trim(), "Customer name is required"),
+
+				// Check if anything is dirty
+				Validator.custom(formData.isDirty, "No changes to save"),
+
+				// Budget validation
+				...(formData.budgetMaxLimit !== undefined && formData.budgetMaxLimit !== null
+					? [
+							Validator.minValue(budgetMaxLimitNum ?? 0, 0.01, "Budget max limit must be greater than $0.01"),
+							Validator.required(formData.budgetResetDuration, "Budget reset duration is required"),
+						]
+					: []),
+
+				// Rate limit validation - token limits
+				...(formData.tokenMaxLimit !== undefined && formData.tokenMaxLimit !== null
+					? [
+							Validator.minValue(tokenMaxLimitNum ?? 0, 1, "Token max limit must be at least 1"),
+							Validator.required(formData.tokenResetDuration, "Token reset duration is required"),
+						]
+					: []),
+
+				// Rate limit validation - request limits
+				...(formData.requestMaxLimit !== undefined && formData.requestMaxLimit !== null
+					? [
+							Validator.minValue(requestMaxLimitNum ?? 0, 1, "Request max limit must be at least 1"),
+							Validator.required(formData.requestResetDuration, "Request reset duration is required"),
+						]
+					: []),
+			]),
+		[formData, budgetMaxLimitNum, tokenMaxLimitNum, requestMaxLimitNum],
+	);
+
+	const updateField = <K extends keyof CustomerFormData>(field: K, value: CustomerFormData[K]) => {
+		setFormData((prev) => ({ ...prev, [field]: value }));
+	};
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (!validator.isValid()) {
+			toast.error(validator.getFirstError());
+			return;
+		}
+
+		try {
+			if (isEditing && customer) {
+				// Update existing customer
+				const updateData: UpdateCustomerRequest = {
+					name: formData.name,
+				};
+
+				// Detect budget changes using had/has pattern
+				const hadBudget = !!customer.budget;
+				const hasBudget = budgetMaxLimitNum !== undefined && budgetMaxLimitNum !== null;
+				if (hasBudget) {
+					updateData.budget = {
+						max_limit: budgetMaxLimitNum,
+						reset_duration: formData.budgetResetDuration,
+					};
+				} else if (hadBudget) {
+					updateData.budget = {} as UpdateCustomerRequest["budget"];
+				}
+
+				// Detect rate limit changes using had/has pattern
+				const hadRateLimit = !!customer.rate_limit;
+				const hasRateLimit =
+					(tokenMaxLimitNum !== undefined && tokenMaxLimitNum !== null) ||
+					(requestMaxLimitNum !== undefined && requestMaxLimitNum !== null);
+				if (hasRateLimit) {
+					updateData.rate_limit = {
+						token_max_limit: tokenMaxLimitNum,
+						token_reset_duration: tokenMaxLimitNum !== undefined && tokenMaxLimitNum !== null ? formData.tokenResetDuration : undefined,
+						request_max_limit: requestMaxLimitNum,
+						request_reset_duration:
+							requestMaxLimitNum !== undefined && requestMaxLimitNum !== null ? formData.requestResetDuration : undefined,
+					};
+				} else if (hadRateLimit) {
+					updateData.rate_limit = {} as UpdateCustomerRequest["rate_limit"];
+				}
+
+				await updateCustomer({ customerId: customer.id, data: updateData }).unwrap();
+				toast.success("Customer updated successfully");
+			} else {
+				// Create new customer
+				const createData: CreateCustomerRequest = {
+					name: formData.name,
+				};
+
+				// Add budget if enabled
+				if (budgetMaxLimitNum !== undefined && budgetMaxLimitNum !== null) {
+					createData.budget = {
+						max_limit: budgetMaxLimitNum,
+						reset_duration: formData.budgetResetDuration,
+					};
+				}
+
+				// Add rate limit if enabled (token or request limits)
+				if (
+					(tokenMaxLimitNum !== undefined && tokenMaxLimitNum !== null) ||
+					(requestMaxLimitNum !== undefined && requestMaxLimitNum !== null)
+				) {
+					createData.rate_limit = {
+						token_max_limit: tokenMaxLimitNum,
+						token_reset_duration: tokenMaxLimitNum !== undefined && tokenMaxLimitNum !== null ? formData.tokenResetDuration : undefined,
+						request_max_limit: requestMaxLimitNum,
+						request_reset_duration:
+							requestMaxLimitNum !== undefined && requestMaxLimitNum !== null ? formData.requestResetDuration : undefined,
+					};
+				}
+
+				await createCustomer(createData).unwrap();
+				toast.success("Customer created successfully");
+			}
+
+			onSave();
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	};
+
+	return (
+		<Dialog open onOpenChange={onCancel}>
+			<DialogContent className="max-w-2xl" data-testid="customer-dialog-content">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">{isEditing ? "Edit Customer" : "Create Customer"}</DialogTitle>
+					<DialogDescription>
+						{isEditing
+							? "Update the customer information and settings."
+							: "Create a new customer account to organize teams and manage resources."}
+					</DialogDescription>
+				</DialogHeader>
+
+				<form onSubmit={handleSubmit} className="space-y-6">
+					<div className="space-y-6">
+						{/* Basic Information */}
+						<div className="space-y-4">
+							<div className="space-y-2">
+								<Label htmlFor="name">Customer Name *</Label>
+								<Input
+									id="name"
+									data-testid="customer-name-input"
+									placeholder="e.g., Acme Corporation"
+									value={formData.name}
+									maxLength={50}
+									onChange={(e) => updateField("name", e.target.value)}
+								/>
+								<p className="text-muted-foreground text-sm">This name will be used to identify the customer account.</p>
+							</div>
+						</div>
+
+						{/* Budget Configuration */}
+						<NumberAndSelect
+							id="budgetMaxLimit"
+							label="Maximum Spend (USD)"
+							value={formData.budgetMaxLimit}
+							selectValue={formData.budgetResetDuration}
+							onChangeNumber={(value) => updateField("budgetMaxLimit", value)}
+							onChangeSelect={(value) => updateField("budgetResetDuration", value)}
+							options={resetDurationOptions}
+							dataTestId="budget-max-limit-input"
+						/>
+
+						{/* Rate Limit Configuration - Token Limits */}
+						<NumberAndSelect
+							id="tokenMaxLimit"
+							label="Maximum Tokens"
+							value={formData.tokenMaxLimit}
+							selectValue={formData.tokenResetDuration}
+							onChangeNumber={(value) => updateField("tokenMaxLimit", value)}
+							onChangeSelect={(value) => updateField("tokenResetDuration", value)}
+							options={resetDurationOptions}
+						/>
+
+						{/* Rate Limit Configuration - Request Limits */}
+						<NumberAndSelect
+							id="requestMaxLimit"
+							label="Maximum Requests"
+							value={formData.requestMaxLimit}
+							selectValue={formData.requestResetDuration}
+							onChangeNumber={(value) => updateField("requestMaxLimit", value)}
+							onChangeSelect={(value) => updateField("requestResetDuration", value)}
+							options={resetDurationOptions}
+						/>
+
+						{/* Current Usage Section (only shown when editing with existing limits) */}
+						{isEditing && (customer?.budget || customer?.rate_limit) && (
+							<div className="bg-muted/50 space-y-4 rounded-lg border p-4">
+								<p className="text-sm font-medium">Current Usage</p>
+								<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+									{customer?.budget && (
+										<div className="space-y-1">
+											<p className="text-muted-foreground text-xs">Budget</p>
+											<div className="flex items-center gap-2">
+												<span className="font-mono text-sm">
+													{formatCurrency(customer.budget.current_usage)} / {formatCurrency(customer.budget.max_limit)}
+												</span>
+												<Badge
+													variant={customer.budget.current_usage >= customer.budget.max_limit ? "destructive" : "default"}
+													className="text-xs"
+												>
+													{Math.round((customer.budget.current_usage / customer.budget.max_limit) * 100)}%
+												</Badge>
+											</div>
+											<p className="text-muted-foreground text-xs">
+												Last Reset: {formatDistanceToNow(new Date(customer.budget.last_reset), { addSuffix: true })}
+											</p>
+										</div>
+									)}
+									{customer?.rate_limit?.token_max_limit && (
+										<div className="space-y-1">
+											<p className="text-muted-foreground text-xs">Tokens</p>
+											<div className="flex items-center gap-2">
+												<span className="font-mono text-sm">
+													{customer.rate_limit.token_current_usage.toLocaleString()} /{" "}
+													{customer.rate_limit.token_max_limit.toLocaleString()}
+												</span>
+												<Badge
+													variant={
+														customer.rate_limit.token_current_usage >= customer.rate_limit.token_max_limit ? "destructive" : "default"
+													}
+													className="text-xs"
+												>
+													{Math.round((customer.rate_limit.token_current_usage / customer.rate_limit.token_max_limit) * 100)}%
+												</Badge>
+											</div>
+											<p className="text-muted-foreground text-xs">
+												Last Reset: {formatDistanceToNow(new Date(customer.rate_limit.token_last_reset), { addSuffix: true })}
+											</p>
+										</div>
+									)}
+									{customer?.rate_limit?.request_max_limit && (
+										<div className="space-y-1">
+											<p className="text-muted-foreground text-xs">Requests</p>
+											<div className="flex items-center gap-2">
+												<span className="font-mono text-sm">
+													{customer.rate_limit.request_current_usage.toLocaleString()} /{" "}
+													{customer.rate_limit.request_max_limit.toLocaleString()}
+												</span>
+												<Badge
+													variant={
+														customer.rate_limit.request_current_usage >= customer.rate_limit.request_max_limit ? "destructive" : "default"
+													}
+													className="text-xs"
+												>
+													{Math.round((customer.rate_limit.request_current_usage / customer.rate_limit.request_max_limit) * 100)}%
+												</Badge>
+											</div>
+											<p className="text-muted-foreground text-xs">
+												Last Reset: {formatDistanceToNow(new Date(customer.rate_limit.request_last_reset), { addSuffix: true })}
+											</p>
+										</div>
+									)}
+								</div>
+							</div>
+						)}
+					</div>
+
+					<FormFooter
+						validator={validator}
+						label="Customer"
+						onCancel={onCancel}
+						isLoading={loading}
+						isEditing={isEditing}
+						hasPermission={hasPermission}
+					/>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+}

ui/app/workspace/governance/views/customerTable.tsx

@@ -0,0 +1,455 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alertDialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { resetDurationLabels } from "@/lib/constants/governance";
+import { getErrorMessage, useDeleteCustomerMutation } from "@/lib/store";
+import { Customer, Team, VirtualKey } from "@/lib/types/governance";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/utils/governance";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { Input } from "@/components/ui/input";
+import { ChevronLeft, ChevronRight, Edit, Plus, Search, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import CustomerDialog from "./customerDialog";
+import { CustomersEmptyState } from "./customersEmptyState";
+
+// Helper to format reset duration for display
+const formatResetDuration = (duration: string) => {
+	return resetDurationLabels[duration] || duration;
+};
+
+interface CustomersTableProps {
+	customers: Customer[];
+	totalCount: number;
+	teams: Team[];
+	virtualKeys: VirtualKey[];
+	search: string;
+	debouncedSearch: string;
+	onSearchChange: (value: string) => void;
+	offset: number;
+	limit: number;
+	onOffsetChange: (offset: number) => void;
+}
+
+export default function CustomersTable({
+	customers,
+	totalCount,
+	teams,
+	virtualKeys,
+	search,
+	debouncedSearch,
+	onSearchChange,
+	offset,
+	limit,
+	onOffsetChange,
+}: CustomersTableProps) {
+	const [showCustomerDialog, setShowCustomerDialog] = useState(false);
+	const [editingCustomer, setEditingCustomer] = useState<Customer | null>(null);
+
+	const hasCreateAccess = useRbac(RbacResource.Customers, RbacOperation.Create);
+	const hasUpdateAccess = useRbac(RbacResource.Customers, RbacOperation.Update);
+	const hasDeleteAccess = useRbac(RbacResource.Customers, RbacOperation.Delete);
+
+	const [deleteCustomer, { isLoading: isDeleting }] = useDeleteCustomerMutation();
+
+	const handleDelete = async (customerId: string) => {
+		try {
+			await deleteCustomer(customerId).unwrap();
+			toast.success("Customer deleted successfully");
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	};
+
+	const handleAddCustomer = () => {
+		setEditingCustomer(null);
+		setShowCustomerDialog(true);
+	};
+
+	const handleEditCustomer = (customer: Customer) => {
+		setEditingCustomer(customer);
+		setShowCustomerDialog(true);
+	};
+
+	const handleCustomerSaved = () => {
+		setShowCustomerDialog(false);
+		setEditingCustomer(null);
+	};
+
+	const getTeamsForCustomer = (customerId: string) => {
+		return teams.filter((team) => team.customer_id === customerId);
+	};
+
+	const getVirtualKeysForCustomer = (customerId: string) => {
+		return virtualKeys.filter((vk) => vk.customer_id === customerId);
+	};
+
+	const hasActiveFilters = debouncedSearch;
+
+	// True empty state: no customers at all (not just filtered to zero)
+	if (totalCount === 0 && !hasActiveFilters) {
+		return (
+			<>
+				<TooltipProvider>
+					{showCustomerDialog && (
+						<CustomerDialog customer={editingCustomer} onSave={handleCustomerSaved} onCancel={() => setShowCustomerDialog(false)} />
+					)}
+					<CustomersEmptyState onAddClick={handleAddCustomer} canCreate={hasCreateAccess} />
+				</TooltipProvider>
+			</>
+		);
+	}
+
+	return (
+		<>
+			<TooltipProvider>
+				{showCustomerDialog && (
+					<CustomerDialog customer={editingCustomer} onSave={handleCustomerSaved} onCancel={() => setShowCustomerDialog(false)} />
+				)}
+
+				<div className="space-y-4">
+					<div className="flex items-center justify-between">
+						<div>
+							<h2 className="text-lg font-semibold">Customers</h2>
+							<p className="text-muted-foreground text-sm">Manage customer accounts with their own teams, budgets, and access controls.</p>
+						</div>
+						<Button data-testid="customer-button-create" onClick={handleAddCustomer} disabled={!hasCreateAccess}>
+							<Plus className="h-4 w-4" />
+							Add Customer
+						</Button>
+					</div>
+
+					<div className="flex items-center gap-3">
+						<div className="relative max-w-sm flex-1">
+							<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+							<Input
+								aria-label="Search customers by name"
+								placeholder="Search by name..."
+								value={search}
+								onChange={(e) => onSearchChange(e.target.value)}
+								className="pl-9"
+								data-testid="customers-search-input"
+							/>
+						</div>
+					</div>
+
+					<div className="overflow-hidden rounded-sm border" data-testid="customer-table-container">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Name</TableHead>
+									<TableHead>Teams</TableHead>
+									<TableHead>Budget</TableHead>
+									<TableHead>Rate Limit</TableHead>
+									<TableHead>Virtual Keys</TableHead>
+									<TableHead className="text-right"></TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{customers.length === 0 ? (
+									<TableRow>
+										<TableCell colSpan={6} className="h-24 text-center">
+											<span className="text-muted-foreground text-sm">No matching customers found.</span>
+										</TableCell>
+									</TableRow>
+								) : (
+									customers.map((customer) => {
+										const customerTeams = getTeamsForCustomer(customer.id);
+										const vks = getVirtualKeysForCustomer(customer.id);
+
+										// Budget calculations
+										const isBudgetExhausted =
+											customer.budget?.max_limit &&
+											customer.budget.max_limit > 0 &&
+											customer.budget.current_usage >= customer.budget.max_limit;
+										const budgetPercentage =
+											customer.budget?.max_limit && customer.budget.max_limit > 0
+												? Math.min((customer.budget.current_usage / customer.budget.max_limit) * 100, 100)
+												: 0;
+
+										// Rate limit calculations
+										const isTokenLimitExhausted =
+											customer.rate_limit?.token_max_limit &&
+											customer.rate_limit.token_max_limit > 0 &&
+											customer.rate_limit.token_current_usage >= customer.rate_limit.token_max_limit;
+										const isRequestLimitExhausted =
+											customer.rate_limit?.request_max_limit &&
+											customer.rate_limit.request_max_limit > 0 &&
+											customer.rate_limit.request_current_usage >= customer.rate_limit.request_max_limit;
+										const isRateLimitExhausted = isTokenLimitExhausted || isRequestLimitExhausted;
+										const tokenPercentage =
+											customer.rate_limit?.token_max_limit && customer.rate_limit.token_max_limit > 0
+												? Math.min((customer.rate_limit.token_current_usage / customer.rate_limit.token_max_limit) * 100, 100)
+												: 0;
+										const requestPercentage =
+											customer.rate_limit?.request_max_limit && customer.rate_limit.request_max_limit > 0
+												? Math.min((customer.rate_limit.request_current_usage / customer.rate_limit.request_max_limit) * 100, 100)
+												: 0;
+
+										const isExhausted = isBudgetExhausted || isRateLimitExhausted;
+
+										return (
+											<TableRow
+												key={customer.id}
+												data-testid={`customer-row-${customer.name}`}
+												className={cn("group transition-colors", isExhausted && "bg-red-500/5 hover:bg-red-500/10")}
+											>
+												<TableCell className="max-w-[200px] py-4">
+													<div className="flex flex-col gap-2">
+														<span className="truncate font-medium">{customer.name}</span>
+														{isExhausted && (
+															<Badge variant="destructive" className="w-fit text-xs">
+																Limit Reached
+															</Badge>
+														)}
+													</div>
+												</TableCell>
+												<TableCell>
+													{customerTeams?.length > 0 ? (
+														<div className="flex items-center gap-2">
+															<Tooltip>
+																<TooltipTrigger>
+																	<Badge variant="outline" className="text-xs">
+																		{customerTeams.length} {customerTeams.length === 1 ? "team" : "teams"}
+																	</Badge>
+																</TooltipTrigger>
+																<TooltipContent>{customerTeams.map((team) => team.name).join(", ")}</TooltipContent>
+															</Tooltip>
+														</div>
+													) : (
+														<span className="text-muted-foreground text-sm">-</span>
+													)}
+												</TableCell>
+												<TableCell className="min-w-[180px]">
+													{customer.budget ? (
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<div className="space-y-2">
+																	<div className="flex items-center justify-between gap-4">
+																		<span className="font-medium">{formatCurrency(customer.budget.max_limit)}</span>
+																		<span className="text-muted-foreground text-xs">
+																			{formatResetDuration(customer.budget.reset_duration)}
+																		</span>
+																	</div>
+																	<Progress
+																		value={budgetPercentage}
+																		className={cn(
+																			"bg-muted/70 dark:bg-muted/30 h-1.5",
+																			isBudgetExhausted
+																				? "[&>div]:bg-red-500/70"
+																				: budgetPercentage > 80
+																					? "[&>div]:bg-amber-500/70"
+																					: "[&>div]:bg-emerald-500/70",
+																		)}
+																	/>
+																</div>
+															</TooltipTrigger>
+															<TooltipContent>
+																<p className="font-medium">
+																	{formatCurrency(customer.budget.current_usage)} / {formatCurrency(customer.budget.max_limit)}
+																</p>
+																<p className="text-primary-foreground/80 text-xs">
+																	Resets {formatResetDuration(customer.budget.reset_duration)}
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													) : (
+														<span className="text-muted-foreground text-sm">-</span>
+													)}
+												</TableCell>
+												<TableCell className="min-w-[180px]">
+													{customer.rate_limit ? (
+														<div className="space-y-2.5">
+															{customer.rate_limit.token_max_limit && (
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<div className="space-y-1.5">
+																			<div className="flex items-center justify-between gap-4 text-xs">
+																				<span className="font-medium">{customer.rate_limit.token_max_limit.toLocaleString()} tokens</span>
+																				<span className="text-muted-foreground">
+																					{formatResetDuration(customer.rate_limit.token_reset_duration || "1h")}
+																				</span>
+																			</div>
+																			<Progress
+																				value={tokenPercentage}
+																				className={cn(
+																					"bg-muted/70 dark:bg-muted/30 h-1",
+																					isTokenLimitExhausted
+																						? "[&>div]:bg-red-500/70"
+																						: tokenPercentage > 80
+																							? "[&>div]:bg-amber-500/70"
+																							: "[&>div]:bg-emerald-500/70",
+																				)}
+																			/>
+																		</div>
+																	</TooltipTrigger>
+																	<TooltipContent>
+																		<p className="font-medium">
+																			{customer.rate_limit.token_current_usage.toLocaleString()} /{" "}
+																			{customer.rate_limit.token_max_limit.toLocaleString()} tokens
+																		</p>
+																		<p className="text-primary-foreground/80 text-xs">
+																			Resets {formatResetDuration(customer.rate_limit.token_reset_duration || "1h")}
+																		</p>
+																	</TooltipContent>
+																</Tooltip>
+															)}
+															{customer.rate_limit.request_max_limit && (
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<div className="space-y-1.5">
+																			<div className="flex items-center justify-between gap-4 text-xs">
+																				<span className="font-medium">{customer.rate_limit.request_max_limit.toLocaleString()} req</span>
+																				<span className="text-muted-foreground">
+																					{formatResetDuration(customer.rate_limit.request_reset_duration || "1h")}
+																				</span>
+																			</div>
+																			<Progress
+																				value={requestPercentage}
+																				className={cn(
+																					"bg-muted/70 dark:bg-muted/30 h-1",
+																					isRequestLimitExhausted
+																						? "[&>div]:bg-red-500/70"
+																						: requestPercentage > 80
+																							? "[&>div]:bg-amber-500/70"
+																							: "[&>div]:bg-emerald-500/70",
+																				)}
+																			/>
+																		</div>
+																	</TooltipTrigger>
+																	<TooltipContent>
+																		<p className="font-medium">
+																			{customer.rate_limit.request_current_usage.toLocaleString()} /{" "}
+																			{customer.rate_limit.request_max_limit.toLocaleString()} requests
+																		</p>
+																		<p className="text-primary-foreground/80 text-xs">
+																			Resets {formatResetDuration(customer.rate_limit.request_reset_duration || "1h")}
+																		</p>
+																	</TooltipContent>
+																</Tooltip>
+															)}
+														</div>
+													) : (
+														<span className="text-muted-foreground text-sm">-</span>
+													)}
+												</TableCell>
+												<TableCell>
+													{vks?.length > 0 ? (
+														<div className="flex items-center gap-2">
+															<Tooltip>
+																<TooltipTrigger>
+																	<Badge variant="outline" className="text-xs">
+																		{vks.length} {vks.length === 1 ? "key" : "keys"}
+																	</Badge>
+																</TooltipTrigger>
+																<TooltipContent>{vks.map((vk) => vk.name).join(", ")}</TooltipContent>
+															</Tooltip>
+														</div>
+													) : (
+														<span className="text-muted-foreground text-sm">-</span>
+													)}
+												</TableCell>
+												<TableCell className="text-right">
+													<div className="flex items-center justify-end gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100">
+														<Button
+															variant="ghost"
+															size="icon"
+															className="h-8 w-8"
+															onClick={() => handleEditCustomer(customer)}
+															disabled={!hasUpdateAccess}
+															aria-label={`Edit customer ${customer.name}`}
+															data-testid={`customer-button-edit-${customer.id}`}
+														>
+															<Edit className="h-4 w-4" />
+														</Button>
+														<AlertDialog>
+															<AlertDialogTrigger asChild>
+																<Button
+																	variant="ghost"
+																	size="icon"
+																	className="h-8 w-8 text-red-500 hover:bg-red-500/10 hover:text-red-500"
+																	disabled={!hasDeleteAccess}
+																	aria-label={`Delete customer ${customer.name}`}
+																	data-testid={`customer-button-delete-${customer.id}`}
+																>
+																	<Trash2 className="h-4 w-4" />
+																</Button>
+															</AlertDialogTrigger>
+															<AlertDialogContent>
+																<AlertDialogHeader>
+																	<AlertDialogTitle>Delete Customer</AlertDialogTitle>
+																	<AlertDialogDescription>
+																		Are you sure you want to delete &quot;{customer.name}&quot;? This will also delete all associated teams
+																		and unassign any virtual keys. This action cannot be undone.
+																	</AlertDialogDescription>
+																</AlertDialogHeader>
+																<AlertDialogFooter>
+																	<AlertDialogCancel data-testid="customer-button-delete-cancel">Cancel</AlertDialogCancel>
+																	<AlertDialogAction
+																		data-testid="customer-button-delete-confirm"
+																		onClick={() => handleDelete(customer.id)}
+																		disabled={isDeleting}
+																		className="bg-red-600 hover:bg-red-700"
+																	>
+																		{isDeleting ? "Deleting..." : "Delete"}
+																	</AlertDialogAction>
+																</AlertDialogFooter>
+															</AlertDialogContent>
+														</AlertDialog>
+													</div>
+												</TableCell>
+											</TableRow>
+										);
+									})
+								)}
+							</TableBody>
+						</Table>
+					</div>
+
+					{/* Pagination */}
+					{totalCount > 0 && (
+						<div className="flex items-center justify-between px-2">
+							<p className="text-muted-foreground text-sm">
+								Showing {offset + 1}-{Math.min(offset + limit, totalCount)} of {totalCount}
+							</p>
+							<div className="flex gap-2">
+								<Button
+									variant="outline"
+									size="sm"
+									disabled={offset === 0}
+									onClick={() => onOffsetChange(Math.max(0, offset - limit))}
+									data-testid="customers-pagination-prev-btn"
+								>
+									<ChevronLeft className="mr-1 h-4 w-4" /> Previous
+								</Button>
+								<Button
+									variant="outline"
+									size="sm"
+									disabled={offset + limit >= totalCount}
+									onClick={() => onOffsetChange(offset + limit)}
+									data-testid="customers-pagination-next-btn"
+								>
+									Next <ChevronRight className="ml-1 h-4 w-4" />
+								</Button>
+							</div>
+						</div>
+					)}
+				</div>
+			</TooltipProvider>
+		</>
+	);
+}

ui/app/workspace/governance/views/customersEmptyState.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@/components/ui/button";
+import { WalletCards } from "lucide-react";
+import { ArrowUpRight } from "lucide-react";
+
+const CUSTOMERS_DOCS_URL = "https://docs.getbifrost.ai/features/governance/virtual-keys#customers";
+
+interface CustomersEmptyStateProps {
+	onAddClick: () => void;
+	canCreate?: boolean;
+}
+
+export function CustomersEmptyState({ onAddClick, canCreate = true }: CustomersEmptyStateProps) {
+	return (
+		<div className="flex min-h-[80vh] w-full flex-col items-center justify-center gap-4 py-16 text-center">
+			<div className="text-muted-foreground">
+				<WalletCards className="h-[5.5rem] w-[5.5rem]" strokeWidth={1} />
+			</div>
+			<div className="flex flex-col gap-1">
+				<h1 className="text-muted-foreground text-xl font-medium">Customers have their own teams, budgets, and access controls</h1>
+				<div className="text-muted-foreground mx-auto mt-2 max-w-[600px] text-sm font-normal">
+					Create customer accounts to manage multi-tenant usage, assign teams, and set spending and rate limits per customer.
+				</div>
+				<div className="mx-auto mt-6 flex flex-row flex-wrap items-center justify-center gap-2">
+					<Button
+						variant="outline"
+						aria-label="Read more about customers (opens in new tab)"
+						data-testid="customer-button-read-more"
+						onClick={() => {
+							window.open(`${CUSTOMERS_DOCS_URL}?utm_source=bfd`, "_blank", "noopener,noreferrer");
+						}}
+					>
+						Read more <ArrowUpRight className="text-muted-foreground h-3 w-3" />
+					</Button>
+					<Button aria-label="Add your first customer" onClick={onAddClick} disabled={!canCreate} data-testid="customer-button-create">
+						Add Customer
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

ui/app/workspace/governance/views/teamDialog.tsx

@@ -0,0 +1,760 @@
+import FormFooter from "@/components/formFooter";
+import { Badge } from "@/components/ui/badge";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alertDialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import NumberAndSelect from "@/components/ui/numberAndSelect";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+  resetDurationOptions,
+  supportsCalendarAlignment,
+} from "@/lib/constants/governance";
+import {
+  getErrorMessage,
+  useCreateTeamMutation,
+  useUpdateTeamMutation,
+} from "@/lib/store";
+import {
+  CreateTeamRequest,
+  Customer,
+  Team,
+  UpdateTeamRequest,
+} from "@/lib/types/governance";
+import { formatCurrency } from "@/lib/utils/governance";
+import { Validator } from "@/lib/utils/validation";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { formatDistanceToNow } from "date-fns";
+import isEqual from "lodash.isequal";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { v4 as uuid } from "uuid";
+
+interface TeamDialogProps {
+  team?: Team | null;
+  customers: Customer[];
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+// One editable budget row; teams own multiple, each keyed by reset_duration
+// on the wire. The client-side `id` is stable across re-renders and equals
+// the persisted budget's id for existing rows, or a fresh UUID for new ones —
+// used as the React key and for matching against `team.budgets` when we need
+// to distinguish "already persisted" from "just added in the form".
+interface TeamBudgetRow {
+  id: string;
+  maxLimit: number | undefined;
+  resetDuration: string;
+  calendarAligned: boolean;
+}
+
+interface TeamFormData {
+  name: string;
+  customerId: string;
+  // Multi-budget: each row has a unique reset_duration on submit
+  budgets: TeamBudgetRow[];
+  // Rate Limit
+  tokenMaxLimit: number | undefined;
+  tokenResetDuration: string;
+  requestMaxLimit: number | undefined;
+  requestResetDuration: string;
+  isDirty: boolean;
+}
+
+// Helper function to create initial state
+const createInitialState = (
+  team?: Team | null,
+): Omit<TeamFormData, "isDirty"> => {
+  return {
+    name: team?.name || "",
+    customerId: team?.customer_id || "",
+    budgets:
+      team?.budgets?.map((b) => ({
+        id: b.id,
+        maxLimit: b.max_limit,
+        resetDuration: b.reset_duration,
+        calendarAligned: b.calendar_aligned ?? false,
+      })) ?? [],
+    // Rate Limit
+    tokenMaxLimit: team?.rate_limit?.token_max_limit ?? undefined,
+    tokenResetDuration: team?.rate_limit?.token_reset_duration || "1h",
+    requestMaxLimit: team?.rate_limit?.request_max_limit ?? undefined,
+    requestResetDuration: team?.rate_limit?.request_reset_duration || "1h",
+  };
+};
+
+export default function TeamDialog({
+  team,
+  customers,
+  onSave,
+  onCancel,
+}: TeamDialogProps) {
+  const isEditing = !!team;
+  const [initialState, setInitialState] = useState<
+    Omit<TeamFormData, "isDirty">
+  >(createInitialState(team));
+  const [formData, setFormData] = useState<TeamFormData>({
+    ...initialState,
+    isDirty: false,
+  });
+
+  useEffect(() => {
+    const nextInitial = createInitialState(team);
+    setInitialState(nextInitial);
+    setFormData({ ...nextInitial, isDirty: false });
+    setPendingCalendarAlignIdx(null);
+  }, [team]);
+
+  const hasCreateAccess = useRbac(RbacResource.Teams, RbacOperation.Create);
+  const hasUpdateAccess = useRbac(RbacResource.Teams, RbacOperation.Update);
+  const hasPermission = isEditing ? hasUpdateAccess : hasCreateAccess;
+
+  // RTK Query hooks
+  const [createTeam, { isLoading: isCreating }] = useCreateTeamMutation();
+  const [updateTeam, { isLoading: isUpdating }] = useUpdateTeamMutation();
+  const loading = isCreating || isUpdating;
+
+  // Tracks which row (by index) is awaiting calendar-align confirmation.
+  const [pendingCalendarAlignIdx, setPendingCalendarAlignIdx] = useState<
+    number | null
+  >(null);
+  const showCalendarAlignWarning = pendingCalendarAlignIdx !== null;
+
+  const updateBudgetRow = (idx: number, patch: Partial<TeamBudgetRow>) => {
+    setFormData((prev) => {
+      const next = prev.budgets.map((row, i) =>
+        i === idx ? { ...row, ...patch } : row,
+      );
+      return { ...prev, budgets: next };
+    });
+  };
+
+  const addBudgetRow = () => {
+    setFormData((prev) => ({
+      ...prev,
+      budgets: [
+        ...prev.budgets,
+        {
+          id: uuid(),
+          maxLimit: undefined,
+          resetDuration: "1M",
+          calendarAligned: false,
+        },
+      ],
+    }));
+  };
+
+  const removeBudgetRow = (idx: number) => {
+    setFormData((prev) => ({
+      ...prev,
+      budgets: prev.budgets.filter((_, i) => i !== idx),
+    }));
+  };
+
+  const handleCalendarAlignedChange = (idx: number, checked: boolean) => {
+    // Match the persisted budget by stable row id — for seeded rows this equals
+    // the server-side budget id; for newly-added rows it's a client-only UUID
+    // that won't match anything in team.budgets (correctly: no warning for new rows).
+    // Avoids the reset_duration-duplicate ambiguity before validation resolves.
+    const rowId = formData.budgets[idx]?.id;
+    const existingBudget = team?.budgets?.find((b) => b.id === rowId);
+    if (checked && isEditing && existingBudget && !existingBudget.calendar_aligned) {
+      setPendingCalendarAlignIdx(idx);
+    } else {
+      updateBudgetRow(idx, { calendarAligned: checked });
+    }
+  };
+
+  // Track isDirty state
+  useEffect(() => {
+    const currentData: Omit<TeamFormData, "isDirty"> = {
+      name: formData.name,
+      customerId: formData.customerId,
+      budgets: formData.budgets,
+      tokenMaxLimit: formData.tokenMaxLimit,
+      tokenResetDuration: formData.tokenResetDuration,
+      requestMaxLimit: formData.requestMaxLimit,
+      requestResetDuration: formData.requestResetDuration,
+    };
+    setFormData((prev) => ({
+      ...prev,
+      isDirty: !isEqual(initialState, currentData),
+    }));
+  }, [
+    formData.name,
+    formData.customerId,
+    formData.budgets,
+    formData.tokenMaxLimit,
+    formData.tokenResetDuration,
+    formData.requestMaxLimit,
+    formData.requestResetDuration,
+    initialState,
+  ]);
+
+  const tokenMaxLimitNum = formData.tokenMaxLimit;
+  const requestMaxLimitNum = formData.requestMaxLimit;
+
+  // Validation
+  const validator = useMemo(() => {
+    // Per-row budget validation plus cross-row uniqueness on reset_duration.
+    const budgetValidators = formData.budgets.flatMap((row, idx) => {
+      if (row.maxLimit === undefined || row.maxLimit === null) return [];
+      return [
+        Validator.minValue(
+          row.maxLimit,
+          0.01,
+          `Budget #${idx + 1} max limit must be greater than $0.01`,
+        ),
+        Validator.required(
+          row.resetDuration,
+          `Budget #${idx + 1} reset duration is required`,
+        ),
+      ];
+    });
+    const populatedDurations = formData.budgets
+      .filter((r) => r.maxLimit !== undefined && r.maxLimit !== null)
+      .map((r) => r.resetDuration);
+    const uniqueDurations = new Set(populatedDurations).size;
+
+    return new Validator([
+      Validator.required(formData.name.trim(), "Team name is required"),
+      Validator.custom(formData.isDirty, "No changes to save"),
+      ...budgetValidators,
+      Validator.custom(
+        uniqueDurations === populatedDurations.length,
+        "Each budget must have a distinct reset duration",
+      ),
+
+      // Rate limit validation - token limits
+      ...(formData.tokenMaxLimit !== undefined &&
+      formData.tokenMaxLimit !== null
+        ? [
+            Validator.minValue(
+              tokenMaxLimitNum || 0,
+              1,
+              "Token max limit must be at least 1",
+            ),
+            Validator.required(
+              formData.tokenResetDuration,
+              "Token reset duration is required",
+            ),
+          ]
+        : []),
+
+      // Rate limit validation - request limits
+      ...(formData.requestMaxLimit !== undefined &&
+      formData.requestMaxLimit !== null
+        ? [
+            Validator.minValue(
+              requestMaxLimitNum || 0,
+              1,
+              "Request max limit must be at least 1",
+            ),
+            Validator.required(
+              formData.requestResetDuration,
+              "Request reset duration is required",
+            ),
+          ]
+        : []),
+    ]);
+  }, [formData, tokenMaxLimitNum, requestMaxLimitNum]);
+
+  const updateField = <K extends keyof TeamFormData>(
+    field: K,
+    value: TeamFormData[K],
+  ) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validator.isValid()) {
+      toast.error(validator.getFirstError());
+      return;
+    }
+
+    // Serialize budget rows whose max_limit was filled in — rows left blank
+    // are silently dropped (the backend treats the slice as authoritative).
+    const submittableBudgets = formData.budgets
+      .filter((r) => r.maxLimit !== undefined && r.maxLimit !== null)
+      .map((r) => ({
+        max_limit: r.maxLimit as number,
+        reset_duration: r.resetDuration,
+        calendar_aligned: r.calendarAligned,
+      }));
+
+    try {
+      if (isEditing && team) {
+        // Update existing team
+        const updateData: UpdateTeamRequest = {
+          name: formData.name,
+          customer_id: formData.customerId || undefined,
+          // Always send: backend treats `budgets` as a full replacement.
+          budgets: submittableBudgets,
+        };
+
+        // Detect rate limit changes using had/has pattern
+        const hadRateLimit = !!team.rate_limit;
+        const hasRateLimit =
+          (tokenMaxLimitNum !== undefined && tokenMaxLimitNum !== null) ||
+          (requestMaxLimitNum !== undefined && requestMaxLimitNum !== null);
+        if (hasRateLimit) {
+          updateData.rate_limit = {
+            token_max_limit: tokenMaxLimitNum,
+            token_reset_duration:
+              tokenMaxLimitNum !== undefined && tokenMaxLimitNum !== null
+                ? formData.tokenResetDuration
+                : undefined,
+            request_max_limit: requestMaxLimitNum,
+            request_reset_duration:
+              requestMaxLimitNum !== undefined && requestMaxLimitNum !== null
+                ? formData.requestResetDuration
+                : undefined,
+          };
+        } else if (hadRateLimit) {
+          updateData.rate_limit = {} as UpdateTeamRequest["rate_limit"];
+        }
+
+        await updateTeam({ teamId: team.id, data: updateData }).unwrap();
+        toast.success("Team updated successfully");
+      } else {
+        // Create new team
+        const createData: CreateTeamRequest = {
+          name: formData.name,
+          customer_id: formData.customerId || undefined,
+          budgets:
+            submittableBudgets.length > 0 ? submittableBudgets : undefined,
+        };
+
+        // Add rate limit if enabled (token or request limits)
+        if (
+          (tokenMaxLimitNum !== undefined && tokenMaxLimitNum !== null) ||
+          (requestMaxLimitNum !== undefined && requestMaxLimitNum !== null)
+        ) {
+          createData.rate_limit = {
+            token_max_limit: tokenMaxLimitNum,
+            token_reset_duration:
+              tokenMaxLimitNum !== undefined && tokenMaxLimitNum !== null
+                ? formData.tokenResetDuration
+                : undefined,
+            request_max_limit: requestMaxLimitNum,
+            request_reset_duration:
+              requestMaxLimitNum !== undefined && requestMaxLimitNum !== null
+                ? formData.requestResetDuration
+                : undefined,
+          };
+        }
+
+        await createTeam(createData).unwrap();
+        toast.success("Team created successfully");
+      }
+
+      onSave();
+    } catch (error) {
+      toast.error(getErrorMessage(error));
+    }
+  };
+
+  return (
+    <Dialog open onOpenChange={onCancel}>
+      <DialogContent className="max-w-2xl" data-testid="team-dialog-content">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {isEditing ? "Edit Team" : "Create Team"}
+          </DialogTitle>
+          <DialogDescription>
+            {isEditing
+              ? "Update the team information and settings."
+              : "Create a new team to organize users and manage shared resources."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="">
+          <div className="space-y-6">
+            {/* Basic Information */}
+            <div className="">
+              <div className="space-y-2">
+                <Label htmlFor="name">Team Name *</Label>
+                <Input
+                  id="name"
+                  placeholder="e.g., Engineering Team"
+                  value={formData.name}
+                  maxLength={50}
+                  onChange={(e) => updateField("name", e.target.value)}
+                  data-testid="team-name-input"
+                />
+              </div>
+
+              {/* Customer Assignment */}
+              {customers?.length > 0 && (
+                <div className="space-y-2">
+                  <Label htmlFor="customer">Customer (optional)</Label>
+                  <Select
+                    value={formData.customerId || "__none__"}
+                    onValueChange={(value) =>
+                      updateField(
+                        "customerId",
+                        value === "__none__" ? "" : value,
+                      )
+                    }
+                  >
+                    <SelectTrigger
+                      id="customer"
+                      className="w-full"
+                      data-testid="team-customer-select-trigger"
+                    >
+                      <SelectValue placeholder="Select a customer" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem
+                        value="__none__"
+                        data-testid="team-customer-option-none"
+                      >
+                        None
+                      </SelectItem>
+                      {customers.map((customer) => (
+                        <SelectItem
+                          key={customer.id}
+                          value={customer.id}
+                          data-testid={`team-customer-option-${customer.id}`}
+                        >
+                          {customer.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <p className="text-muted-foreground text-sm">
+                    Assign to a customer or leave independent.
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* Multi-budget configuration: one row per budget, each keyed by reset_duration */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label>Budgets</Label>
+                <button
+                  type="button"
+                  onClick={addBudgetRow}
+                  className="text-primary text-xs font-medium hover:underline"
+                  data-testid="team-add-budget-btn"
+                >
+                  + Add budget
+                </button>
+              </div>
+              {formData.budgets.length === 0 && (
+                <p className="text-muted-foreground text-xs">
+                  No budgets. Click "Add budget" to enforce a spend limit.
+                </p>
+              )}
+              {formData.budgets.map((row, idx) => (
+                <div
+                  key={row.id}
+                  className="space-y-2 rounded-md border p-3"
+                  data-testid={`team-budget-row-${idx}`}
+                >
+                  <div className="flex items-start gap-2">
+                    <div className="flex-1">
+                      <NumberAndSelect
+                        id={`budgetMaxLimit-${idx}`}
+                        label={`Budget #${idx + 1} — Maximum Spend (USD)`}
+                        value={row.maxLimit}
+                        selectValue={row.resetDuration}
+                        onChangeNumber={(value) =>
+                          updateBudgetRow(idx, { maxLimit: value })
+                        }
+                        onChangeSelect={(value) => {
+                          const patch: Partial<TeamBudgetRow> = {
+                            resetDuration: value,
+                          };
+                          if (!supportsCalendarAlignment(value)) {
+                            patch.calendarAligned = false;
+                          }
+                          updateBudgetRow(idx, patch);
+                        }}
+                        options={resetDurationOptions}
+                        dataTestId={`budget-max-limit-input-${idx}`}
+                      />
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => removeBudgetRow(idx)}
+                      className="text-muted-foreground hover:text-destructive mt-6 text-xs font-medium"
+                      data-testid={`team-remove-budget-btn-${idx}`}
+                    >
+                      Remove
+                    </button>
+                  </div>
+
+                  {row.maxLimit !== undefined &&
+                    supportsCalendarAlignment(row.resetDuration) && (
+                      <div className="flex items-center justify-between gap-4 rounded-md border px-3 py-2">
+                        <div className="space-y-0.5">
+                          <Label
+                            htmlFor={`team-budget-calendar-aligned-toggle-${idx}`}
+                            className="text-sm font-normal"
+                          >
+                            Align to calendar cycle
+                          </Label>
+                          <p className="text-muted-foreground text-xs">
+                            Reset at the start of each period (e.g. 1st of
+                            month) instead of rolling from creation date
+                          </p>
+                        </div>
+                        <Switch
+                          id={`team-budget-calendar-aligned-toggle-${idx}`}
+                          checked={row.calendarAligned}
+                          onCheckedChange={(checked) =>
+                            handleCalendarAlignedChange(idx, checked)
+                          }
+                          data-testid={`team-budget-calendar-aligned-toggle-${idx}`}
+                        />
+                      </div>
+                    )}
+                </div>
+              ))}
+            </div>
+
+            {/* Warning dialog shown when enabling calendar alignment on an existing budget */}
+            <AlertDialog
+              open={showCalendarAlignWarning}
+              onOpenChange={(open) => {
+                if (!open) setPendingCalendarAlignIdx(null);
+              }}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Reset budget usage?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    Enabling calendar alignment will reset this budget&apos;s
+                    current usage to{" "}
+                    <span className="font-semibold">$0.00</span> and snap the
+                    reset date to the start of the current{" "}
+                    {pendingCalendarAlignIdx !== null &&
+                    formData.budgets[pendingCalendarAlignIdx]?.resetDuration ===
+                      "1d"
+                      ? "day"
+                      : pendingCalendarAlignIdx !== null &&
+                          formData.budgets[pendingCalendarAlignIdx]
+                            ?.resetDuration === "1w"
+                        ? "week"
+                        : pendingCalendarAlignIdx !== null &&
+                            formData.budgets[pendingCalendarAlignIdx]
+                              ?.resetDuration === "1M"
+                          ? "month"
+                          : pendingCalendarAlignIdx !== null &&
+                              formData.budgets[pendingCalendarAlignIdx]
+                                ?.resetDuration === "1Y"
+                            ? "year"
+                            : "period"}
+                    . The usage reset to $0.00 cannot be undone, but calendar
+                    alignment can be turned off later. This will take effect
+                    when you save.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel
+                    data-testid="team-calendar-align-cancel-btn"
+                    onClick={() => setPendingCalendarAlignIdx(null)}
+                  >
+                    Cancel
+                  </AlertDialogCancel>
+                  <AlertDialogAction
+                    data-testid="team-calendar-align-enable-btn"
+                    onClick={() => {
+                      if (pendingCalendarAlignIdx !== null) {
+                        updateBudgetRow(pendingCalendarAlignIdx, {
+                          calendarAligned: true,
+                        });
+                      }
+                      setPendingCalendarAlignIdx(null);
+                    }}
+                  >
+                    Enable Calendar Alignment
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+
+            {/* Rate Limit Configuration - Token Limits */}
+            <NumberAndSelect
+              id="tokenMaxLimit"
+              label="Maximum Tokens"
+              value={formData.tokenMaxLimit}
+              selectValue={formData.tokenResetDuration}
+              onChangeNumber={(value) => updateField("tokenMaxLimit", value)}
+              onChangeSelect={(value) =>
+                updateField("tokenResetDuration", value)
+              }
+              options={resetDurationOptions}
+            />
+
+            {/* Rate Limit Configuration - Request Limits */}
+            <NumberAndSelect
+              id="requestMaxLimit"
+              label="Maximum Requests"
+              value={formData.requestMaxLimit}
+              selectValue={formData.requestResetDuration}
+              onChangeNumber={(value) => updateField("requestMaxLimit", value)}
+              onChangeSelect={(value) =>
+                updateField("requestResetDuration", value)
+              }
+              options={resetDurationOptions}
+            />
+
+            {/* Current Usage Section (only shown when editing with existing limits) */}
+            {isEditing &&
+              ((team?.budgets && team.budgets.length > 0) ||
+                team?.rate_limit) && (
+              <div className="bg-muted/50 space-y-4 rounded-lg border p-4">
+                <p className="text-sm font-medium">Current Usage</p>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                  {team?.budgets?.map((b) => (
+                    <div key={b.id} className="space-y-1">
+                      <p className="text-muted-foreground text-xs">
+                        Budget ({b.reset_duration})
+                      </p>
+                      <div className="flex items-center gap-2">
+                        <span className="font-mono text-sm">
+                          {formatCurrency(b.current_usage)} /{" "}
+                          {formatCurrency(b.max_limit)}
+                        </span>
+                        <Badge
+                          variant={
+                            b.max_limit > 0 && b.current_usage >= b.max_limit
+                              ? "destructive"
+                              : "default"
+                          }
+                          className="text-xs"
+                        >
+                          {b.max_limit > 0
+                            ? Math.round((b.current_usage / b.max_limit) * 100)
+                            : 0}
+                          %
+                        </Badge>
+                      </div>
+                      <p className="text-muted-foreground text-xs">
+                        Last Reset:{" "}
+                        {formatDistanceToNow(new Date(b.last_reset), {
+                          addSuffix: true,
+                        })}
+                      </p>
+                    </div>
+                  ))}
+                  {team?.rate_limit?.token_max_limit && (
+                    <div className="space-y-1">
+                      <p className="text-muted-foreground text-xs">Tokens</p>
+                      <div className="flex items-center gap-2">
+                        <span className="font-mono text-sm">
+                          {team.rate_limit.token_current_usage.toLocaleString()}{" "}
+                          / {team.rate_limit.token_max_limit.toLocaleString()}
+                        </span>
+                        <Badge
+                          variant={
+                            team.rate_limit.token_max_limit > 0 &&
+                            team.rate_limit.token_current_usage >=
+                              team.rate_limit.token_max_limit
+                              ? "destructive"
+                              : "default"
+                          }
+                          className="text-xs"
+                        >
+                          {team.rate_limit.token_max_limit > 0
+                            ? Math.round(
+                                (team.rate_limit.token_current_usage /
+                                  team.rate_limit.token_max_limit) *
+                                  100,
+                              )
+                            : 0}
+                          %
+                        </Badge>
+                      </div>
+                      <p className="text-muted-foreground text-xs">
+                        Last Reset:{" "}
+                        {formatDistanceToNow(
+                          new Date(team.rate_limit.token_last_reset),
+                          { addSuffix: true },
+                        )}
+                      </p>
+                    </div>
+                  )}
+                  {team?.rate_limit?.request_max_limit && (
+                    <div className="space-y-1">
+                      <p className="text-muted-foreground text-xs">Requests</p>
+                      <div className="flex items-center gap-2">
+                        <span className="font-mono text-sm">
+                          {team.rate_limit.request_current_usage.toLocaleString()}{" "}
+                          / {team.rate_limit.request_max_limit.toLocaleString()}
+                        </span>
+                        <Badge
+                          variant={
+                            team.rate_limit.request_max_limit > 0 &&
+                            team.rate_limit.request_current_usage >=
+                              team.rate_limit.request_max_limit
+                              ? "destructive"
+                              : "default"
+                          }
+                          className="text-xs"
+                        >
+                          {team.rate_limit.request_max_limit > 0
+                            ? Math.round(
+                                (team.rate_limit.request_current_usage /
+                                  team.rate_limit.request_max_limit) *
+                                  100,
+                              )
+                            : 0}
+                          %
+                        </Badge>
+                      </div>
+                      <p className="text-muted-foreground text-xs">
+                        Last Reset:{" "}
+                        {formatDistanceToNow(
+                          new Date(team.rate_limit.request_last_reset),
+                          { addSuffix: true },
+                        )}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <FormFooter
+            validator={validator}
+            label="Team"
+            onCancel={onCancel}
+            isLoading={loading}
+            isEditing={isEditing}
+            hasPermission={hasPermission}
+          />
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

ui/app/workspace/governance/views/teamsEmptyState.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@/components/ui/button";
+import { Building } from "lucide-react";
+import { ArrowUpRight } from "lucide-react";
+
+const TEAMS_DOCS_URL = "https://docs.getbifrost.ai/features/governance/virtual-keys#teams";
+
+interface TeamsEmptyStateProps {
+	onAddClick: () => void;
+	canCreate?: boolean;
+}
+
+export function TeamsEmptyState({ onAddClick, canCreate = true }: TeamsEmptyStateProps) {
+	return (
+		<div className="flex min-h-[80vh] w-full flex-col items-center justify-center gap-4 py-16 text-center">
+			<div className="text-muted-foreground">
+				<Building className="h-[5.5rem] w-[5.5rem]" strokeWidth={1} />
+			</div>
+			<div className="flex flex-col gap-1">
+				<h1 className="text-muted-foreground text-xl font-medium">Teams organize users with shared budgets and access</h1>
+				<div className="text-muted-foreground mx-auto mt-2 max-w-[600px] text-sm font-normal">
+					Create teams to group users, assign customer accounts, and set budgets and rate limits at the team level.
+				</div>
+				<div className="mx-auto mt-6 flex flex-row flex-wrap items-center justify-center gap-2">
+					<Button
+						variant="outline"
+						aria-label="Read more about teams (opens in new tab)"
+						data-testid="team-button-read-more"
+						onClick={() => {
+							window.open(`${TEAMS_DOCS_URL}?utm_source=bfd`, "_blank", "noopener,noreferrer");
+						}}
+					>
+						Read more <ArrowUpRight className="text-muted-foreground h-3 w-3" />
+					</Button>
+					<Button aria-label="Add your first team" onClick={onAddClick} disabled={!canCreate} data-testid="team-button-add">
+						Add Team
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}