- {initialLoading ? (
-
- );
-}
\ No newline at end of file
+ const [logs, setLogs] = useState
- {/* Sidebar Filters */}
- !open && setUrlState({ selected_log: "" })}
- handleDelete={handleDelete}
- onNavigate={handleLogNavigate}
- hasPrev={selectedLogIndex > 0 || (selectedLogIndex !== -1 && pagination.offset > 0)}
- hasNext={selectedLogIndex !== -1 && (selectedLogIndex < logs.length - 1 || pagination.offset + pagination.limit < totalItems)}
- onFilterByParentRequestId={handleFilterByParentRequestId}
- onViewSession={(sessionId, logId) => {
- setUrlState({ selected_log: "" }, { history: "replace" });
- setSessionHighlightedLogId(logId);
- setSelectedSessionId(sessionId);
- }}
- />
- {
- setSelectedSessionId(null);
- setUrlState({ selected_log: log.id }, { history: "replace" });
- }}
- onFilterByParentRequestId={handleFilterByParentRequestId}
- />
-
- )}
-
-
- {error}
-
- )}
-
-
-
- {/* Log Detail Sheet */}
-
-
-
- {statCards.map((card) => (
-
-
-
-
- ))}
-
-
-
-
-
- {card.title}
- {"description" in card && card.description && (
-
-
-
-
- {card.description}
-
- )}
-
- {card.value}
-
-
-
- {error && (
-
- {
- if (columnId === "actions") return;
- setUrlState({ selected_log: row.id }, { history: "replace" });
- setSelectedSessionId(null);
- setSessionHighlightedLogId(null);
- }}
- liveEnabled={liveEnabled}
- isSocketConnected={isSocketConnected}
- columnEntries={columnEntries}
- columnOrder={columnOrder}
- columnVisibility={columnVisibility}
- columnPinning={columnPinning}
- onToggleColumnVisibility={toggleColumnVisibility}
- onTogglePin={toggleColumnPin}
- onReorderColumns={reorderColumns}
- />
-
-
+ {initialLoading ? (
+
+ );
+}
diff --git a/ui/app/workspace/logs/sheets/logDetailView.tsx b/ui/app/workspace/logs/sheets/logDetailView.tsx
index 21d9310055..5441249e0e 100644
--- a/ui/app/workspace/logs/sheets/logDetailView.tsx
+++ b/ui/app/workspace/logs/sheets/logDetailView.tsx
@@ -1,1079 +1,2252 @@
import {
- AlertDialog,
- AlertDialogAction,
- AlertDialogCancel,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogTitle,
- AlertDialogTrigger,
+ formatCost,
+ formatLatency,
+ formatTokens,
+} from "@/app/workspace/dashboard/utils/chartUtils";
+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 { CodeEditor } from "@/components/ui/codeEditor";
import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuSeparator,
- DropdownMenuTrigger,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
} from "@/components/ui/dropdownMenu";
import { DottedSeparator } from "@/components/ui/separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
-import { ProviderIconType, RenderProviderIcon, RoutingEngineUsedIcons } from "@/lib/constants/icons";
import {
- RequestTypeColors,
- RequestTypeLabels,
- RoutingEngineUsedColors,
- RoutingEngineUsedLabels,
- Status,
- StatusColors,
+ ProviderIconType,
+ RenderProviderIcon,
+ RoutingEngineUsedIcons,
+} from "@/lib/constants/icons";
+import {
+ RequestTypeColors,
+ RequestTypeLabels,
+ RoutingEngineUsedColors,
+ RoutingEngineUsedLabels,
+ Status,
+ StatusColors,
} from "@/lib/constants/logs";
-import { LogEntry } from "@/lib/types/logs";
+import { LogEntry, ResponsesMessage } from "@/lib/types/logs";
+import { cn } from "@/lib/utils";
import { Link } from "@tanstack/react-router";
import { addMilliseconds, format } from "date-fns";
-import { Clipboard, Loader2, MoreVertical, Trash2 } from "lucide-react";
-import type { ReactNode } from "react";
+import {
+ AlertCircle,
+ ChevronDown,
+ Clipboard,
+ Loader2,
+ MoreVertical,
+ Trash2,
+ Wrench,
+} from "lucide-react";
+import { useState, type ReactNode } from "react";
import { toast } from "sonner";
import BlockHeader from "../views/blockHeader";
import CollapsibleBox from "../views/collapsibleBox";
import ImageView from "../views/imageView";
import LogChatMessageView from "../views/logChatMessageView";
import LogEntryDetailsView from "../views/logEntryDetailsView";
-import LogResponsesMessageView from "../views/logResponsesMessageView";
import PluginLogsView from "../views/pluginLogsView";
import SpeechView from "../views/speechView";
import TranscriptionView from "../views/transcriptionView";
import VideoView from "../views/videoView";
+const extractResponsesText = (msg: ResponsesMessage): string => {
+ if (msg.type === "reasoning") {
+ const summaryText = (msg.summary ?? [])
+ .map((s) => s.text)
+ .filter(Boolean)
+ .join("\n")
+ .trim();
+ if (summaryText) return summaryText;
+ if (msg.encrypted_content) return msg.encrypted_content;
+ }
+ if (typeof msg.content === "string") return msg.content;
+ if (Array.isArray(msg.content)) {
+ return msg.content
+ .filter(
+ (b: any) =>
+ b &&
+ b.text &&
+ (b.type === "input_text" ||
+ b.type === "output_text" ||
+ b.type === "reasoning_text" ||
+ b.type === "refusal"),
+ )
+ .map((b: any) => b.text as string)
+ .join("\n");
+ }
+ if (typeof (msg as any).arguments === "string")
+ return (msg as any).arguments as string;
+ return "";
+};
+
+const getResponsesRole = (msg: ResponsesMessage): MessageRole => {
+ if (msg.type === "reasoning") return "reasoning";
+ if (
+ msg.type &&
+ (msg.type.endsWith("_call") ||
+ msg.type.endsWith("_call_output") ||
+ msg.type === "mcp_list_tools" ||
+ msg.type === "mcp_approval_request" ||
+ msg.type === "mcp_approval_responses")
+ ) {
+ return "tool";
+ }
+ const r = msg.role;
+ if (r === "user") return "user";
+ if (r === "assistant") return "assistant";
+ if (r === "system" || r === "developer") return "system";
+ return "assistant";
+};
+
+const extractMessageText = (message: any): string => {
+ if (!message || message.content == null) return "";
+ if (typeof message.content === "string") return message.content;
+ if (Array.isArray(message.content)) {
+ return message.content
+ .filter(
+ (block: any) =>
+ block &&
+ (block.type === "text" ||
+ block.type === "input_text" ||
+ block.type === "output_text") &&
+ block.text,
+ )
+ .map((block: any) => block.text)
+ .join("\n");
+ }
+ return "";
+};
+
const formatJsonSafe = (str: string | undefined): string => {
- try {
- return JSON.stringify(JSON.parse(str || ""), null, 2);
- } catch {
- return str || "";
- }
+ try {
+ return JSON.stringify(JSON.parse(str || ""), null, 2);
+ } catch {
+ return str || "";
+ }
+};
+
+const formatToolChoice = (value: unknown): string => {
+ if (typeof value === "string") return value;
+ try {
+ return JSON.stringify(value);
+ } catch {
+ return String(value);
+ }
};
// Helper to detect passthrough operations
-const isPassthroughOperation = (object: string) => object === "passthrough" || object === "passthrough_stream";
+const isPassthroughOperation = (object: string) =>
+ object === "passthrough" || object === "passthrough_stream";
// Helper to detect container operations (for hiding irrelevant fields like Model/Tokens)
const isContainerOperation = (object: string) => {
- const containerTypes = [
- "container_create",
- "container_list",
- "container_retrieve",
- "container_delete",
- "container_file_create",
- "container_file_list",
- "container_file_retrieve",
- "container_file_content",
- "container_file_delete",
- ];
- return containerTypes.includes(object?.toLowerCase());
+ const containerTypes = [
+ "container_create",
+ "container_list",
+ "container_retrieve",
+ "container_delete",
+ "container_file_create",
+ "container_file_list",
+ "container_file_retrieve",
+ "container_file_content",
+ "container_file_delete",
+ ];
+ return containerTypes.includes(object?.toLowerCase());
+};
+
+const statusPillStyles: Record
+ {/* Sidebar Filters */}
+ !open && setUrlState({ selected_log: "" })}
+ handleDelete={handleDelete}
+ onNavigate={handleLogNavigate}
+ hasPrev={
+ selectedLogIndex > 0 ||
+ (selectedLogIndex !== -1 && pagination.offset > 0)
+ }
+ hasNext={
+ selectedLogIndex !== -1 &&
+ (selectedLogIndex < logs.length - 1 ||
+ pagination.offset + pagination.limit < totalItems)
+ }
+ onFilterByParentRequestId={handleFilterByParentRequestId}
+ onViewSession={(sessionId, logId) => {
+ setUrlState({ selected_log: "" }, { history: "replace" });
+ setSessionHighlightedLogId(logId);
+ setSelectedSessionId(sessionId);
+ }}
+ />
+ {
+ setSelectedSessionId(null);
+ setUrlState({ selected_log: log.id }, { history: "replace" });
+ }}
+ onFilterByParentRequestId={handleFilterByParentRequestId}
+ />
+
+ )}
+
+
+ {error}
+
+ )}
+
+
+
+ {/* Log Detail Sheet */}
+
+
+
+ {statCards.map((card) => (
+
+
+
+
+ ))}
+
+
+
+
+
+ {card.title}
+ {"description" in card && card.description && (
+
+
+
+
+
+ {card.description}
+
+
+ )}
+
+
+ {card.value}
+
+
+
+
+ {error && (
+
+ {
+ if (columnId === "actions") return;
+ setUrlState({ selected_log: row.id }, { history: "replace" });
+ setSelectedSessionId(null);
+ setSessionHighlightedLogId(null);
+ }}
+ liveEnabled={liveEnabled}
+ isSocketConnected={isSocketConnected}
+ columnEntries={columnEntries}
+ columnOrder={columnOrder}
+ columnVisibility={columnVisibility}
+ columnPinning={columnPinning}
+ onToggleColumnVisibility={toggleColumnVisibility}
+ onTogglePin={toggleColumnPin}
+ onReorderColumns={reorderColumns}
+ />
+
+
+
+ );
+}
+
+function CopyInlineButton({ text }: { text: string }) {
+ const { copy } = useCopyToClipboard({ successMessage: "Copied" });
+ return (
+
+ );
+}
+
+type MessageRole = "system" | "user" | "assistant" | "reasoning" | "tool";
+const messageToneClass: Record
+ {label}
+
+
+ {value}
+
+ {sub ? (
+
+ {sub}
+
+ ) : null}
+
+ {shown.join("\n")}
+
+ ) : (
+
+ {shown.join("\n")}
+
+ )}
+ {hasMore && (
+
+
+
+ {lines.length} lines{lang ? ` · ${lang}` : ""}
+
+
+ )}
+
+ );
+}
+
+function MessageRow({
+ role,
+ meta,
+ children,
+ last = false,
+}: {
+ role: MessageRole;
+ meta?: string;
+ children: ReactNode;
+ last?: boolean;
+}) {
+ return (
+
+
+ );
+}
interface LogDetailViewProps {
- log: LogEntry | null;
- resolvedSelectedPromptName?: string; // Current prompt name from prompt-repo when `selected_prompt_id` is set; falls back to stored log name
- loading?: boolean;
- handleDelete?: (log: LogEntry) => void;
- onClose?: () => void;
- headerAction?: ReactNode;
- onFilterByParentRequestId?: (parentRequestId: string) => void;
+ log: LogEntry | null;
+ resolvedSelectedPromptName?: string; // Current prompt name from prompt-repo when `selected_prompt_id` is set; falls back to stored log name
+ loading?: boolean;
+ handleDelete?: (log: LogEntry) => void;
+ onClose?: () => void;
+ headerAction?: ReactNode;
+ onFilterByParentRequestId?: (parentRequestId: string) => void;
}
export function LogDetailView({
- log,
- resolvedSelectedPromptName,
- loading = false,
- handleDelete,
- onClose,
- headerAction,
- onFilterByParentRequestId,
+ log,
+ resolvedSelectedPromptName,
+ loading = false,
+ handleDelete,
+ onClose,
+ headerAction,
+ onFilterByParentRequestId,
}: LogDetailViewProps) {
- const { copy: copyRequestId } = useCopyToClipboard({ successMessage: "Request ID copied" });
- const { copy: copyBody } = useCopyToClipboard({
- successMessage: "Request body copied to clipboard",
- errorMessage: "Failed to copy request body",
- });
+ const { copy: copyRequestId } = useCopyToClipboard({
+ successMessage: "Request ID copied",
+ });
+ const { copy: copyBody } = useCopyToClipboard({
+ successMessage: "Request body copied to clipboard",
+ errorMessage: "Failed to copy request body",
+ });
+
+ if (!log) return null;
+
+ const selectedPromptDisplayName =
+ resolvedSelectedPromptName ?? log.selected_prompt_name ?? "";
- if (!log) return null;
+ const isContainer = isContainerOperation(log.object);
+ const isPassthrough = isPassthroughOperation(log.object);
+ const passthroughParams = isPassthrough
+ ? (log.params as {
+ method?: string;
+ path?: string;
+ raw_query?: string;
+ status_code?: number;
+ })
+ : null;
- const selectedPromptDisplayName = resolvedSelectedPromptName ?? log.selected_prompt_name ?? "";
+ let toolsParameter = null;
+ if (log.params?.tools) {
+ try {
+ toolsParameter = JSON.stringify(log.params.tools, null, 2);
+ } catch {}
+ }
- const isContainer = isContainerOperation(log.object);
- const isPassthrough = isPassthroughOperation(log.object);
- const passthroughParams = isPassthrough
- ? (log.params as {
- method?: string;
- path?: string;
- raw_query?: string;
- status_code?: number;
- })
- : null;
+ const audioFormat =
+ (log.params as any)?.audio?.format ||
+ (log.params as any)?.extra_params?.audio?.format ||
+ undefined;
+ const rawRequest = log.raw_request;
+ const rawResponse = log.raw_response;
+ const passthroughRequestBody = log.passthrough_request_body;
+ const passthroughResponseBody = log.passthrough_response_body;
+ const videoOutput =
+ log.video_generation_output ||
+ log.video_retrieve_output ||
+ log.video_download_output;
+ const videoListOutput = log.video_list_output;
+ const pluginLogCount = (() => {
+ if (!log.plugin_logs) return 0;
+ try {
+ const parsed = JSON.parse(log.plugin_logs);
+ if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+ return Object.values(parsed).reduce
+
+ {!last && }
+
+
+
+
+
+ {messageRoleLabel[role]}
+
+ {meta ? (
+ {meta}
+ ) : null}
+
+
+ {children}
+
+
+
+ ) : (
+ <>
+ {/* Breadcrumb header with actions */}
+
+
+
+
+
+
+
+ copyRequestBody(log, copyBody)}
+ data-testid="logdetails-copy-request-body-button"
+ >
+
+
+
+
+
+
+
+
+
+
+ Are you sure you want to delete this log?
+
+
+ This action cannot be undone. This will permanently delete the
+ log entry.
+
+
+
+
+ Cancel
+
+ {
+ handleDelete(log);
+ onClose();
+ }}
+ >
+ Delete
+
+
+
+
+ ) : null}
+
+
+ {headerAction}
+ Request details
+
+ {handleDelete && onClose ? (
+
+
+
+
+
+
+
+
+ {RequestTypeLabels[
+ log.object as keyof typeof RequestTypeLabels
+ ] ?? log.object}
+
+ {log.routing_rule && (
+
+ rule: {log.routing_rule.name}
+
+ )}
+ {log.metadata?.isAsyncRequest ? (
+
+ Async
+
+ ) : null}
+ {(log.is_large_payload_request ||
+ log.is_large_payload_response) && (
+
+ Large Payload
+
+ )}
+
+
+
+ {(log.routing_rule || log.selected_key) && (
+
+ Request
+
+
+ {log.id || "—"}
+
+ {log.id ?
+ {log.routing_rule ? (
+ <>
+ matched rule{" "}
+
+ “{log.routing_rule.name}”
+
+
+ ) : null}
+ {log.routing_rule && log.selected_key ? " · " : ""}
+ {log.selected_key ? (
+ <>
+ key{" "}
+
+ {log.selected_key.name}
+
+
+ ) : null}
+
+ )}
+
+
+
+ {
+ if (!log.timestamp) return "";
+ const start = new Date(log.timestamp);
+ if (isNaN(start.getTime())) return "";
+ const startStr = format(start, "HH:mm:ss");
+ if (log.latency == null || isNaN(log.latency)) return startStr;
+ return `${startStr} → ${format(addMilliseconds(start, log.latency), "HH:mm:ss")}`;
+ })()}
+ hasRightBorder
+ />
+
- const audioFormat = (log.params as any)?.audio?.format || (log.params as any)?.extra_params?.audio?.format || undefined;
- const rawRequest = log.raw_request;
- const rawResponse = log.raw_response;
- const passthroughRequestBody = log.passthrough_request_body;
- const passthroughResponseBody = log.passthrough_response_body;
- const videoOutput = log.video_generation_output || log.video_retrieve_output || log.video_download_output;
- const videoListOutput = log.video_list_output;
+ {/* Timeline */}
+ {log.latency != null &&
+ !isNaN(log.latency) &&
+ log.latency > 0 &&
+ (() => {
+ const total = log.latency;
+ const tone =
+ total >= 5000
+ ? "bg-red-400"
+ : total >= 2000
+ ? "bg-amber-400"
+ : "bg-blue-400";
+ return (
+
+
+ );
+ })()}
+
+ timeline
+
+ {formatLatency(total)}
+
+
+
+
+
+
+
+ total{" "}
+ {formatLatency(total)}
+
+
+
+
+ More details
+
+
+ timings, request meta, tokens, caching, metadata
+
+
+
+
+ More details
+
+
+ timings, request meta, tokens, caching, metadata
+
+
+
+
+
+
+
+ {
+ const d = log.timestamp ? new Date(log.timestamp) : null;
+ return d && !isNaN(d.getTime())
+ ? format(d, "yyyy-MM-dd hh:mm:ss aa")
+ : "N/A";
+ })()}
+ />
+ {
+ const d = log.timestamp ? new Date(log.timestamp) : null;
+ return d && !isNaN(d.getTime())
+ ? format(
+ addMilliseconds(d, log.latency || 0),
+ "yyyy-MM-dd hh:mm:ss aa",
+ )
+ : "N/A";
+ })()}
+ />
+ {log.latency.toFixed(2)}ms
+ )
+ }
+ />
+
+
+
+
+
+ Filter this session
+
+
+ ) : (
+
+ {selectedPromptDisplayName}
+ {selectedPromptDisplayName && log.selected_prompt_version
+ ? " · "
+ : ""}
+ {log.selected_prompt_version ? (
+ <>v{log.selected_prompt_version}
+ ) : null}
+
+ }
+ />
+ )}
+ {log.number_of_retries > 0 && (
+
+ {log.team_name || log.team_id}
+
+ }
+ />
+ )}
+ {log.customer_id && (
+
+ {log.customer_name || log.customer_id}
+
+ }
+ />
+ )}
+ {log.business_unit_id && (
+
+ {log.business_unit_name || log.business_unit_id}
+
+ }
+ />
+ )}
+ {log.user_id && (
+
+
+
+ {log.user_name || log.user_id}
+
+
+
+ {log.user_name ? log.user_id : "Filter by user"}
+
+
+ }
+ />
+ )}
+ {log.fallback_index > 0 && (
+
+ {log.routing_engines_used.map((engine) => (
+
+
+ ))}
+
+ }
+ />
+ )}
+ {log.routing_rule && (
+
+
+
+ {RequestTypeLabels[
+ log.object as keyof typeof RequestTypeLabels
+ ] ??
+ log.object ??
+ "unknown"}
+
+ }
+ />
+ {log.parent_request_id && (
+
+ onFilterByParentRequestId(
+ log.parent_request_id as string,
+ )
+ }
+ >
+ {log.parent_request_id}
+
+
+ {log.parent_request_id}
+
+ )
+ }
+ />
+ )}
+ {log.selected_key && (
+
+ {RoutingEngineUsedIcons[
+ engine as keyof typeof RoutingEngineUsedIcons
+ ]?.()}
+
+ {RoutingEngineUsedLabels[
+ engine as keyof typeof RoutingEngineUsedLabels
+ ] ?? engine}
+
+
+
-
- ) : (
- <>
-
-
-
-
-
-
-
-
-
- copyRequestBody(log, copyBody)} data-testid="logdetails-copy-request-body-button">
-
-
-
-
-
-
-
-
-
- Are you sure you want to delete this log?
- This action cannot be undone. This will permanently delete the log entry.
-
-
- Cancel
- {
- handleDelete(log);
- onClose();
- }}
- >
- Delete
-
-
-
-
- ) : null}
-
-
- {headerAction}
-
- {handleDelete && onClose ? (
-
- {log.id && (
-
- {log.status}
-
- {log.metadata?.isAsyncRequest ? (
-
- Async
-
- ) : null}
- {(log.is_large_payload_request || log.is_large_payload_response) && (
-
- Large Payload
-
- )}
-
-
- Request ID:{" "}
- copyRequestId(log.id)}>
- {log.id}
-
-
-
-
-
-
- {(log.latency || 0)?.toFixed(2)}ms
}
- />
-
-
-
-
- Filter this session
-
- ) : (
-
- {selectedPromptDisplayName}
- {selectedPromptDisplayName && log.selected_prompt_version ? " · " : ""}
- {log.selected_prompt_version ? <>v{log.selected_prompt_version} : null}
-
- }
- />
- )}
- {log.number_of_retries > 0 && (
-
- {log.team_name || log.team_id}
-
- }
- />
- )}
- {log.customer_id && (
-
- {log.customer_name || log.customer_id}
-
- }
- />
- )}
- {log.business_unit_id && (
-
- {log.business_unit_name || log.business_unit_id}
-
- }
- />
- )}
- {log.user_id && (
-
-
-
- {log.user_name || log.user_id}
-
-
- {log.user_name ? log.user_id : "Filter by user"}
-
- }
- />
- )}
- {log.fallback_index > 0 &&
- {log.routing_engines_used.map((engine) => (
-
-
- ))}
-
- }
- />
- )}
- {log.routing_rule &&
-
-
- {RequestTypeLabels[log.object as keyof typeof RequestTypeLabels] ?? log.object ?? "unknown"}
-
- }
- />
- {log.parent_request_id && (
- onFilterByParentRequestId(log.parent_request_id as string)}
- >
- {log.parent_request_id}
-
- {log.parent_request_id}
- )
- }
- />
- )}
- {log.selected_key &&
- {RoutingEngineUsedIcons[engine as keyof typeof RoutingEngineUsedIcons]?.()}
- {RoutingEngineUsedLabels[engine as keyof typeof RoutingEngineUsedLabels] ?? engine}
-
-
+
+ {(() => {
+ const params = log.params as any;
+ const reasoning = params?.reasoning;
+ if (
+ !reasoning ||
+ typeof reasoning !== "object" ||
+ Object.keys(reasoning).length === 0
+ ) {
+ return null;
+ }
+ return (
+ <>
+
+
+
+
+
+ );
+ })()}
+ {log.cache_debug && (
+ <>
+
+ {reasoning.effort && (
+
+ {reasoning.effort}
+
+ }
+ />
+ )}
+ {reasoning.summary && (
+
+ {reasoning.summary}
+
+ }
+ />
+ )}
+ {reasoning.generate_summary && (
+
+ {reasoning.generate_summary}
+
+ }
+ />
+ )}
+ {reasoning.max_tokens && (
+
+
+
+
+ )}
+ {log.metadata &&
+ Object.keys(log.metadata).filter((k) => k !== "isAsyncRequest")
+ .length > 0 && (
+ <>
+
+ {log.cache_debug.cache_hit ? (
+ <>
+
+ {log.cache_debug.hit_type}
+
+ }
+ />
+ {log.cache_debug.hit_type === "semantic" && (
+ <>
+ {log.cache_debug.provider_used && (
+
+ {log.cache_debug.provider_used}
+
+ }
+ />
+ )}
+ {log.cache_debug.model_used && (
+
+ {log.cache_debug.provider_used}
+
+ }
+ />
+ )}
+ {log.cache_debug.model_used && (
+
+
+
+
+ )}
+
+ )}
+
+
+ {Object.entries(log.metadata)
+ .filter(([key]) => key !== "isAsyncRequest")
+ .map(([key, value]) => (
+
+
-
- {(() => {
- const params = log.params as any;
- const reasoning = params?.reasoning;
- if (!reasoning || typeof reasoning !== "object" || Object.keys(reasoning).length === 0) {
- return null;
- }
- return (
- <>
-
-
-
-
-
- );
- })()}
- {log.cache_debug && (
- <>
-
- {reasoning.effort && (
-
- {reasoning.effort}
-
- }
- />
- )}
- {reasoning.summary && (
-
- {reasoning.summary}
-
- }
- />
- )}
- {reasoning.generate_summary && (
-
- {reasoning.generate_summary}
-
- }
- />
- )}
- {reasoning.max_tokens &&
-
-
-
- )}
- {log.metadata && Object.keys(log.metadata).filter((k) => k !== "isAsyncRequest").length > 0 && (
- <>
-
- {log.cache_debug.cache_hit ? (
- <>
-
- {log.cache_debug.hit_type}
-
- }
- />
- {log.cache_debug.hit_type === "semantic" && (
- <>
- {log.cache_debug.provider_used && (
-
- {log.cache_debug.provider_used}
-
- }
- />
- )}
- {log.cache_debug.model_used && (
-
- {log.cache_debug.provider_used}
-
- }
- />
- )}
- {log.cache_debug.model_used && (
-
-
-
-
- )}
-
- )}
-
- {log.attempt_trail && log.attempt_trail.length > 1 && (
-
- {Object.entries(log.metadata)
- .filter(([key]) => key !== "isAsyncRequest")
- .map(([key, value]) => (
-
-
-
-
-
-
- | # | -Key | -Result | -
|---|---|---|
| {record.attempt + 1} | -{record.key_name || record.key_id} | -- {record.fail_reason ? ( - {record.fail_reason} - ) : ( - success - )} - | -
- {log.routing_engine_logs}
-
-
- {log.params.instructions}
-
- Conversation History
- {log.input_history.slice(0, -1).map((message, index) => (
- Input
- Input
-
- Large payload request — input content was streamed directly to the provider and is not available for display.
- {log.raw_request && " A truncated preview is available in the Raw Request section below."}
-
- )}
- {log.is_large_payload_response && !log.output_message && !log.responses_output?.length && log.status !== "processing" && (
-
- Large payload response — response content was streamed directly to the client and is not available for display.
- {log.raw_response && " A truncated preview is available in the Raw Response section below."}
-
- )}
- {log.status !== "processing" && (
- <>
- {log.output_message && !log.error_details?.error.message && (
- <>
-
-
- Response
- Response
-
- Raw Request sent to {log.provider}
- {log.is_large_payload_request && (
- (truncated preview)
- )}
-
-
- Raw Response from {log.provider}
- {log.is_large_payload_response && (
- (truncated preview)
- )}
-
- Embedding
- Error
-
- {log.error_details.error.message}
-
- Error Details
-
- {typeof log.error_details?.error.error === "string"
- ? log.error_details.error.error
- : JSON.stringify(log.error_details?.error.error, null, 2)}
-
-
+ {log.input_history?.map((message, index) => {
+ const role = ((message.role as string) ||
+ "user") as MessageRole;
+ const text = extractMessageText(message);
+ const hasToolCalls =
+ Array.isArray(message.tool_calls) &&
+ message.tool_calls.length > 0;
+ const isLast =
+ index === (log.input_history?.length ?? 0) - 1 &&
+ !log.output_message &&
+ !log.error_details?.error.message;
+ const lineCount = text ? text.split("\n").length : 0;
+ const approxTokens = text
+ ? Math.max(1, Math.round(text.length / 4))
+ : 0;
+ const meta = text
+ ? role === "system" || role === "tool"
+ ? `${lineCount} line${lineCount === 1 ? "" : "s"} · ~${approxTokens} tokens`
+ : `${lineCount} line${lineCount === 1 ? "" : "s"}`
+ : hasToolCalls
+ ? `${message.tool_calls!.length} tool call${message.tool_calls!.length === 1 ? "" : "s"}`
+ : undefined;
+ const usePlainText = role === "user" || role === "assistant";
+ return (
+
+ {text ? (
+ usePlainText ? (
+
+ );
+ })}
+ {log.output_message &&
+ !log.error_details?.error.message &&
+ (() => {
+ const text = extractMessageText(log.output_message);
+ const lineCount = text ? text.split("\n").length : 0;
+ const tokenMeta = log.token_usage?.completion_tokens
+ ? `${log.token_usage.completion_tokens} tokens`
+ : undefined;
+ const meta = text
+ ? tokenMeta
+ ? `${lineCount} line${lineCount === 1 ? "" : "s"} · ${tokenMeta}`
+ : `${lineCount} line${lineCount === 1 ? "" : "s"}`
+ : tokenMeta;
+ return (
+
+ {text ? (
+
+ );
+ })()}
+
+ )}
+
+ {(() => {
+ const inputMsgs = log.responses_input_history ?? [];
+ const outputMsgs =
+ log.status !== "processing" && !log.error_details?.error.message
+ ? (log.responses_output ?? [])
+ : [];
+ const all: ResponsesMessage[] = [...inputMsgs, ...outputMsgs];
+ if (all.length === 0) return null;
+ return (
+
+ {message.tool_calls!.length} tool call
+ {message.tool_calls!.length === 1 ? "" : "s"}
+
+ ) : null}
+
+ {all.map((msg, index) => {
+ const role = getResponsesRole(msg);
+ const text = extractResponsesText(msg);
+ const isLast = index === all.length - 1;
+ const lineCount = text ? text.split("\n").length : 0;
+ const approxTokens = text
+ ? Math.max(1, Math.round(text.length / 4))
+ : 0;
+ const isEncrypted =
+ msg.type === "reasoning" && !!msg.encrypted_content;
+ const meta = text
+ ? role === "system" || role === "tool"
+ ? `${lineCount} line${lineCount === 1 ? "" : "s"} · ~${approxTokens} tokens`
+ : role === "reasoning"
+ ? `~${approxTokens} tokens${isEncrypted ? " · encrypted" : ""}`
+ : `${lineCount} line${lineCount === 1 ? "" : "s"}`
+ : msg.type || undefined;
+ const usePlainText = role === "user" || role === "assistant";
+ return (
+
+ {text ? (
+ usePlainText ? (
+
+ );
+ })}
+
+ );
+ })()}
+
+ {log.is_large_payload_request &&
+ !log.input_history?.length &&
+ !log.responses_input_history?.length && (
+
+ {msg.type || "—"}
+
+ )}
+
+ Large payload request — input content was streamed directly to
+ the provider and is not available for display.
+ {log.raw_request &&
+ " A truncated preview is available in the Raw JSON tab."}
+
+ )}
+ {log.is_large_payload_response &&
+ !log.output_message &&
+ !log.responses_output?.length &&
+ log.status !== "processing" && (
+
+ Large payload response — response content was streamed directly
+ to the client and is not available for display.
+ {log.raw_response &&
+ " A truncated preview is available in the Raw JSON tab."}
+
+ )}
+
+ {log.status !== "processing" &&
+ log.embedding_output &&
+ log.embedding_output.length > 0 &&
+ !log.error_details?.error.message && (
+
+ embedding.embedding,
+ ),
+ null,
+ 2,
+ ),
+ }}
+ />
+
+ )}
+ {log.status !== "processing" &&
+ log.rerank_output &&
+ !log.error_details?.error.message && (
+ Embedding
+
+
+ )}
+
+
+ {log.error_details?.error.message ? (
+
+ {log.error_details.error.message}
+
+ ) : null}
+ {log.error_details?.error.error != null ? (
+
+
+ Details
+
+
+ ) : null}
+
+ Details
+
+
+ {typeof log.error_details.error.error === "string"
+ ? log.error_details.error.error
+ : JSON.stringify(log.error_details.error.error, null, 2)}
+
+
+
+ ) : null}
+ {log.params?.instructions && (
+
+ {log.params?.tools?.length ?? 0} tools exposed to the model
+ {(log.params as any)?.tool_choice != null ? (
+ <>
+ {" "}
+ · tool_choice ={" "}
+
+ {formatToolChoice((log.params as any).tool_choice)}
+
+
+ ) : null}
+
+
+ {(log.params?.tools as any[]).map((tool, i) => {
+ const name =
+ tool?.function?.name ?? tool?.name ?? `tool_${i}`;
+ const description =
+ tool?.function?.description ?? tool?.description ?? "";
+ const schema =
+ tool?.function?.parameters ??
+ tool?.input_schema ??
+ tool?.parameters ??
+ null;
+ const schemaJson =
+ schema != null ? JSON.stringify(schema, null, 2) : "";
+ return (
+
+
+
+
+ {schemaJson ? (
+
+ );
+ })}
+
+
+
+ {schemaJson ? (
+
+ {name}
+
+ {description ? (
+
+ {description}
+
+ ) : null}
+
+
+ ) : (
+
+ Parameters
+
+
+ {schemaJson}
+
+
+ No parameter schema.
+
+ )}
+
+ {log.params.instructions}
+
+
+ No tools or instructions on this request.
+
+ )}
+
+
+
+
+
+ | # | +Key | +Result | +
|---|---|---|
| + {record.attempt + 1} + | ++ {record.key_name || record.key_id} + | ++ {record.fail_reason ? ( + + {record.fail_reason} + + ) : ( + + success + + )} + | +
+ {log.routing_engine_logs
+ .split("\n")
+ .filter((l) => l.trim())
+ .map((line, i) => {
+ const m = line.match(
+ /^\[(\d+)\]\s+\[([^\]]+)\]\s+-\s+(.*)$/,
+ );
+ const ts = m ? Number(m[1]) : null;
+ const scope = m ? m[2] : null;
+ const message = m ? m[3] : line;
+ return (
+
+
+ {ts != null ? (
+
+ {format(new Date(ts), "HH:mm:ss.SSS")}
+
+ ) : null}
+ {scope ? (
+
+ {scope}
+
+ ) : null}
+
+ {message}
+
+
+ );
+ })}
+
+ No routing logs for this request.
+
+ )}
+
+ No plugin logs for this request.
+
+ )}
+
+ Raw Request sent to{" "}
+
+ {log.provider}
+
+ {log.is_large_payload_request && (
+
+ (truncated preview)
+
+ )}
+
+
+ Raw Response from{" "}
+
+ {log.provider}
+
+ {log.is_large_payload_response && (
+
+ (truncated preview)
+
+ )}
+
+
+ No raw JSON available.
+
+ )}
+
- Loading log details
-
- ) : (
-
-
-
-
-
- }
- />
- )}
-
+ Loading log details
+
+ ) : (
+
+
+
+
+
+ }
+ />
+ )}
+
- {isLargePayload && (
-
- LP
-
- )}
- {realtimeMessages &&
- (realtimeMessages.tool || realtimeMessages.user || realtimeMessages.assistantToolCall || realtimeMessages.assistant) ? (
-
- );
+ return (
+
- {realtimeMessages.tool ?
- ) : (
- Tool Result: {realtimeMessages.tool}
: null}
- {realtimeMessages.user ? User: {realtimeMessages.user}
: null}
- {realtimeMessages.assistantToolCall ? (
- Assistant Tool Call: {realtimeMessages.assistantToolCall}
- ) : null}
- {realtimeMessages.assistant ? Assistant: {realtimeMessages.assistant}
: null}
-
- {input ||
- (isLargePayload
- ? `Large payload ${log.is_large_payload_request && log.is_large_payload_response ? "request & response" : log.is_large_payload_request ? "request" : "response"}`
- : "-")}
-
- )}
-
+ {isLargePayload && (
+
+ LP
+
+ )}
+ {realtimeMessages &&
+ (realtimeMessages.tool ||
+ realtimeMessages.user ||
+ realtimeMessages.assistantToolCall ||
+ realtimeMessages.assistant) ? (
+
+ );
}
export const createColumns = (
- onDelete: (log: LogEntry) => void,
- hasDeleteAccess = true,
- metadataKeys: string[] = [],
+ onDelete: (log: LogEntry) => void,
+ hasDeleteAccess = true,
+ metadataKeys: string[] = [],
): ColumnDef
+ {realtimeMessages.tool ? (
+
+ ) : (
+ Tool Result: {realtimeMessages.tool}
+ ) : null}
+ {realtimeMessages.user ? (
+ User: {realtimeMessages.user}
+ ) : null}
+ {realtimeMessages.assistantToolCall ? (
+
+ Assistant Tool Call: {realtimeMessages.assistantToolCall}
+
+ ) : null}
+ {realtimeMessages.assistant ? (
+
+ Assistant: {realtimeMessages.assistant}
+
+ ) : null}
+
+ {input ||
+ (isLargePayload
+ ? `Large payload ${log.is_large_payload_request && log.is_large_payload_response ? "request & response" : log.is_large_payload_request ? "request" : "response"}`
+ : "-")}
+
+ )}
+ {isValid ? format(date, "yyyy-MM-dd hh:mm:ss aa (XXX)") : "N/A"}
;
- },
- },
- {
- id: "request_type",
- header: "Type",
- size: 120,
- cell: ({ row }) => {
- return (
- {row.original.model || "N/A"}
,
- },
- {
- accessorKey: "latency",
- header: ({ column }) => (
-
- ),
- size: 140,
- cell: ({ row }) => {
- const latency = row.original.latency;
- return (
-
- {latency === undefined || latency === null ? "N/A" : `${latency.toLocaleString()}ms`}
-
- );
- },
- },
- {
- accessorKey: "tokens",
- header: ({ column }) => (
-
- ),
- size: 220,
- cell: ({ row }) => {
- const tokenUsage = row.original.token_usage;
- if (!tokenUsage) {
- return N/A
;
- }
+ const baseColumns: ColumnDefN/A
;
+ }
+ return (
+
+
+ {format(date, "MMM dd HH:mm:ss")}
+
+
+ {formatDistanceToNow(date, { addSuffix: true })}
+
+
+ );
+ },
+ },
+ {
+ id: "request_type",
+ header: "Type",
+ size: 180,
+ cell: ({ row }) => {
+ return (
+
+ {provider ? (
+
+ );
+ },
+ },
+ {
+ accessorKey: "latency",
+ header: ({ column }) => (
+
+ ),
+ size: 170,
+ cell: ({ row }) => {
+ const latency = row.original.latency;
+ if (latency === undefined || latency === null) {
+ return
+
+ {model || "N/A"}
+
+
+ {provider ? getProviderLabel(provider) : "N/A"}
+
+
+ N/A
;
+ }
+ const tone =
+ latency >= 5000
+ ? "bg-red-500"
+ : latency >= 2000
+ ? "bg-amber-500"
+ : "bg-emerald-500";
+ const pct = Math.min(100, (latency / 5000) * 100);
+ return (
+
+
+ {formatLatency(latency)}
+
+
+ );
+ },
+ },
+ {
+ accessorKey: "tokens",
+ header: ({ column }) => (
+
+ ),
+ size: 190,
+ cell: ({ row }) => {
+ const tokenUsage = row.original.token_usage;
+ if (!tokenUsage) {
+ return
+
+
+ N/A
;
+ }
+ const prompt = tokenUsage.prompt_tokens ?? 0;
+ const completion = tokenUsage.completion_tokens ?? 0;
+ const total = tokenUsage.total_tokens ?? 0;
+ const hasSplit =
+ tokenUsage.completion_tokens != null &&
+ tokenUsage.prompt_tokens != null;
+ const splitBase = prompt + completion || 1;
+ const inPct = (prompt / splitBase) * 100;
+ return (
+
+
+ );
+ },
+ },
+ {
+ accessorKey: "cost",
+ header: ({ column }) => (
+
+ ),
+ size: 120,
+ cell: ({ row }) => {
+ if (row.original.cost == null) {
+ return
+
+ {formatTokens(total)}
+
+ {hasSplit && (
+
+ {hasSplit && (
+
+
+
+
+ )}
+
+ {formatTokens(prompt)}
+ /
+
+ {formatTokens(completion)}
+
+
+ )}
+ N/A
;
+ }
+ return (
+
+ {formatCost(row.original.cost)}
+
+ );
+ },
+ },
+ ];
- return (
-
-
- );
- },
- },
- {
- accessorKey: "cost",
- header: ({ column }) => (
-
- ),
- size: 120,
- cell: ({ row }) => {
- if (!row.original.cost) {
- return
- {tokenUsage.total_tokens.toLocaleString()}{" "}
- {tokenUsage.completion_tokens != null && tokenUsage.prompt_tokens != null
- ? `(${tokenUsage.prompt_tokens.toLocaleString()}+${tokenUsage.completion_tokens.toLocaleString()})`
- : ""}
-
- N/A
;
- }
+ const metadataColumns: ColumnDef
+ {value ?? "-"}
+
+ );
+ },
+ }));
- return (
-
-
- );
- },
- },
- ];
+ const actionsColumn: ColumnDef{row.original.cost?.toFixed(4)}
- {value ?? "-"}
;
- },
- }));
-
- const actionsColumn: ColumnDef
-
+ );
+}
diff --git a/ui/app/workspace/logs/views/logsVolumeChart.tsx b/ui/app/workspace/logs/views/logsVolumeChart.tsx
index a71ed45010..ed41941d58 100644
--- a/ui/app/workspace/logs/views/logsVolumeChart.tsx
+++ b/ui/app/workspace/logs/views/logsVolumeChart.tsx
@@ -1,406 +1,540 @@
import { Card } from "@/components/ui/card";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible";
import { Skeleton } from "@/components/ui/skeleton";
import type { HistogramBucket, LogsHistogramResponse } from "@/lib/types/logs";
import { ChevronDown, RotateCcw } from "lucide-react";
-import { Component, type ErrorInfo, type ReactNode, useCallback, useMemo, useState } from "react";
-import { Bar, BarChart, CartesianGrid, ReferenceArea, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import {
+ Component,
+ type ErrorInfo,
+ type ReactNode,
+ useCallback,
+ useMemo,
+ useState,
+} from "react";
+import {
+ Bar,
+ BarChart,
+ CartesianGrid,
+ ReferenceArea,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+
+const requestFormatter = new Intl.NumberFormat("en-US", {
+ notation: "compact",
+ maximumFractionDigits: 1,
+});
+
+function formatRequest(requests: number): string {
+ return requestFormatter.format(requests);
+}
// Empty chart placeholder when data fails to render
function EmptyChart() {
- return (
-
-
-
- {table.getHeaderGroups().map((headerGroup) => (
-
-
+ return (
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+
- {/* Pagination Footer */}
-
-
+
- {startItem.toLocaleString()}-{endItem.toLocaleString()} of {totalItems.toLocaleString()} entries
-
+ {/* Pagination Footer */}
+
+
- );
-}
\ No newline at end of file
+
+
+ {startItem.toLocaleString()}-{endItem.toLocaleString()} of{" "}
+ {totalItems.toLocaleString()} entries
+
-
-
+
-
+
-
-
- Page
- {currentPage}
- of {totalPages}
-
+
+ Page
+ {currentPage}
+ of {totalPages}
+
-
-
-
- );
+function CustomTooltip({ active, payload }: CustomTooltipProps) {
+ if (!active || !payload || !payload.length) return null;
+
+ const data = payload[0]?.payload;
+ if (!data) return null;
+
+ return (
+ {formatFullTimestamp(data.timestamp)}
-
-
-
-
-
- Total
-
- {data.count.toLocaleString()}
-
-
-
-
- Success
-
- {data.success.toLocaleString()}
-
-
-
-
- Error
-
- {data.error.toLocaleString()}
-
-
+
+ );
}
export function LogsVolumeChart({
- data,
- loading,
- onTimeRangeChange,
- onResetZoom,
- isZoomed,
- startTime,
- endTime,
- isOpen,
- onOpenChange,
+ data,
+ loading,
+ onTimeRangeChange,
+ onResetZoom,
+ isZoomed,
+ startTime,
+ endTime,
+ isOpen,
+ onOpenChange,
}: LogsVolumeChartProps) {
- // State for drag selection
- const [refAreaLeft, setRefAreaLeft] = useState
+ {formatFullTimestamp(data.timestamp)}
+
+
+
+
+
+
+ Total
+
+ {data.count.toLocaleString()}
+
+
+
+
+ Success
+
+
+ {data.success.toLocaleString()}
+
+
+
+
+
+ Error
+
+
+ {data.error.toLocaleString()}
+
+
+
-
-
-
-
- {isOpen && (
-
-
-
-
- Success
-
-
-
- Error
-
-
- )}
- {isZoomed && onResetZoom && (
-
- )}
-
- {loading ? (
-
-
-
- chartData[Math.round(idx)]?.formattedTime || ""}
- interval="preserveStartEnd"
- />
- v.toLocaleString()}
- domain={[0, (dataMax: number) => Math.max(dataMax, 5)]}
- allowDataOverflow={false}
- />
- handleBarClick(data)}
- />
- handleBarClick(data)}
- />
- {refAreaLeft !== null && refAreaRight !== null && chartData[refAreaLeft] && chartData[refAreaRight] && (
-
-
-
- ) : (
-
-
+
+
+
+
+ {isOpen && (
+
+
+
+
+ Success
+
+
+
+ Error
+
+
+ )}
+ {isZoomed && onResetZoom && (
+
+ )}
+
+ {loading ? (
+
+
+
+
+ chartData[Math.round(idx)]?.formattedTime || ""
+ }
+ interval="preserveStartEnd"
+ />
+ formatRequest(v)}
+ domain={[0, (dataMax: number) => Math.max(dataMax, 5)]}
+ allowDataOverflow={false}
+ />
+ handleBarClick(data?.payload as LogVolumeDataPoint | undefined)}
+ />
+ handleBarClick(data?.payload as LogVolumeDataPoint | undefined)}
+ />
+ {refAreaLeft !== null &&
+ refAreaRight !== null &&
+ chartData[refAreaLeft] &&
+ chartData[refAreaRight] && (
+
+
+
+ ) : (
+
+ 
;
- },
- bedrock: ({ size = "md", className = "" }: IconProps) => {
- const resolvedSize = resolveSize(size);
- return (
-
- );
- },
-
- cerebras: ({ size = "md", className = "", theme }: IconProps) => {
- const resolvedSize = resolveSize(size);
-
- return theme === "light" ? (
-
- ) : (
-
- );
- },
-
- cohere: ({ size = "md", className = "" }: IconProps) => {
- const resolvedSize = resolveSize(size);
- return (
-
- );
- },
-
- elevenlabs: ({ size = "md", className = "" }: IconProps) => {
- const resolvedSize = resolveSize(size);
-
- return (
-
- );
- },
-
- groq: ({ size = "md", className = "" }: IconProps) => {
- const resolvedSize = resolveSize(size);
-
- return (
-
+ );
+ },
+
+ mistral: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+
+ return (
+
+ );
+ },
+
+ ollama: ({ size = "md", className = "", theme }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+ return theme === "light" ? (
+
+ ) : (
+
+ );
+ },
+
+ parasail: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+ return (
+
+ );
+ },
+
+ perplexity: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+ return (
+
+ );
+ },
+
+ sgl: ({ className = "" }: IconProps) => {
+ return (
+ 
+ );
+ },
+ openai: ({ size = "md", className = "", theme }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+
+ return theme === "light" ? (
+
+ ) : (
+
+ );
+ },
+
+ vertex: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+
+ return (
+
+ );
+ },
+
+ gemini: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+
+ return (
+
+ );
+ },
+
+ openrouter: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+
+ return (
+
+ );
+ },
+
+ huggingface: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+
+ return (
+
+ );
+ },
+ nebius: ({ className = "" }: IconProps) => {
+ return (
+ 
+ );
+ },
+ xai: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+
+ return (
+
+ );
+ },
+ replicate: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+
+ return (
+
+ );
+ },
+ vllm: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+ return (
+
+ );
+ },
+ runway: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+
+ return (
+
+ );
+ },
+ fireworks: ({ size = "md", className = "" }: IconProps) => {
+ const resolvedSize = resolveSize(size);
+
+ return (
+
+ );
+ },
} as const;
// Routing Engine Icons
export const RoutingEngineUsedIcons = {
- "routing-rule": ({ className = "h-5 w-5 text-blue-800" }: { className?: string } = {}) =>