From d0cf40b7664cbfb7439f504f7eb4b490fde4f5f3 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaan@berri.ai>
Date: Thu, 9 Jul 2026 16:52:31 -0700
Subject: [PATCH] fix(ui): clean relay drawer lint

---
 .../LogDetailsDrawer/LogDetailsDrawer.tsx     | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
index ca75df52946..e3472c16a78 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
@@ -50,12 +50,21 @@ function TraceEventRow({ row, isSelected, onClick }: TraceEventRowProps) {
   const isMcp = MCP_CALL_TYPES.includes(row.call_type);
   const isAgent = AGENT_CALL_TYPES.includes(row.call_type);
   const isRelay = RELAY_CALL_TYPES.includes(row.call_type);
-  const durationValue =
-    row.request_duration_ms != null
-      ? (row.request_duration_ms / 1000).toFixed(3)
-      : row.startTime && row.endTime
-        ? ((Date.parse(row.endTime) - Date.parse(row.startTime)) / 1000).toFixed(3)
-        : "-";
+  let durationValue = "-";
+  if (row.request_duration_ms != null) {
+    durationValue = (row.request_duration_ms / 1000).toFixed(3);
+  } else if (row.startTime && row.endTime) {
+    durationValue = ((Date.parse(row.endTime) - Date.parse(row.startTime)) / 1000).toFixed(3);
+  }
+
+  let eventIcon = <Sparkles size={12} className="text-slate-500 shrink-0" />;
+  if (isMcp) {
+    eventIcon = <Wrench size={12} className="text-slate-500 shrink-0" />;
+  } else if (isAgent) {
+    eventIcon = <Bot size={12} className="text-slate-500 shrink-0" />;
+  } else if (isRelay) {
+    eventIcon = <Cable size={12} className="text-slate-500 shrink-0" />;
+  }
 
   return (
     <button
@@ -66,15 +75,7 @@ function TraceEventRow({ row, isSelected, onClick }: TraceEventRowProps) {
       onClick={onClick}
     >
       <div className="flex items-center gap-1">
-        {isMcp ? (
-          <Wrench size={12} className="text-slate-500 shrink-0" />
-        ) : isAgent ? (
-          <Bot size={12} className="text-slate-500 shrink-0" />
-        ) : isRelay ? (
-          <Cable size={12} className="text-slate-500 shrink-0" />
-        ) : (
-          <Sparkles size={12} className="text-slate-500 shrink-0" />
-        )}
+        {eventIcon}
         <span className="text-xs font-medium text-slate-900 truncate">
           {getEventDisplayName(row.call_type, row.model)}
         </span>
@@ -277,7 +278,12 @@ export function LogDetailsDrawer({
   ).length;
   const agentCount = sessionLogs.filter((row) => AGENT_CALL_TYPES.includes(row.call_type)).length;
   const mcpCount = sessionLogs.filter((row) => MCP_CALL_TYPES.includes(row.call_type)).length;
-  const logsForList = isSessionMode ? sessionLogs : currentLog ? [currentLog] : [];
+  let logsForList: LogEntry[] = [];
+  if (isSessionMode) {
+    logsForList = sessionLogs;
+  } else if (currentLog) {
+    logsForList = [currentLog];
+  }
   const leftPanelId = isSessionMode ? sessionId || "" : currentLog?.request_id || "";
   const leftPanelDisplayId = leftPanelId.length > 14 ? `${leftPanelId.slice(0, 11)}...` : leftPanelId;