feat(ui): sort session sidebar by duration or start time

ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.test.tsx

@@ -53,13 +53,13 @@ const sessionLogs = [
     model: "tool-early",
     call_type: "call_mcp_tool",
     startTime: "2026-07-08T10:00:01.000Z",
-    endTime: "2026-07-08T10:00:01.500Z",
+    endTime: "2026-07-08T10:00:06.000Z",
   }),
   makeLog({
     request_id: "llm-late",
     model: "llm-late",
     startTime: "2026-07-08T10:00:02.000Z",
-    endTime: "2026-07-08T10:00:04.000Z",
+    endTime: "2026-07-08T10:00:05.000Z",
   }),
   makeLog({
     request_id: "mcp-late",
@@ -84,10 +84,10 @@ const sidebarEventNames = () =>
   screen.queryAllByText(/^(llm-early|llm-late|tool-early|tool-late)$/).map((el) => el.textContent);
 
 describe("LogDetailsDrawer session sidebar sorting", () => {
-  it("defaults to grouped order: LLM calls newest first, MCP calls grouped last", async () => {
+  it("defaults to duration order, longest call first across LLM and MCP calls", async () => {
     renderSessionDrawer();
     await waitFor(() => expect(sidebarEventNames()).toHaveLength(4));
-    expect(sidebarEventNames()).toEqual(["llm-late", "llm-early", "tool-late", "tool-early"]);
+    expect(sidebarEventNames()).toEqual(["tool-early", "llm-late", "llm-early", "tool-late"]);
   });
 
   it("switches to chronological order across LLM and MCP calls when Start time is selected", async () => {
@@ -98,8 +98,8 @@ describe("LogDetailsDrawer session sidebar sorting", () => {
 
     await waitFor(() => expect(sidebarEventNames()).toEqual(["llm-early", "tool-early", "llm-late", "tool-late"]));
 
-    fireEvent.click(screen.getByText("Grouped"));
+    fireEvent.click(screen.getByText("Duration"));
 
-    await waitFor(() => expect(sidebarEventNames()).toEqual(["llm-late", "llm-early", "tool-late", "tool-early"]));
+    await waitFor(() => expect(sidebarEventNames()).toEqual(["tool-early", "llm-late", "llm-early", "tool-late"]));
   });
 });

ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx

@@ -117,7 +117,7 @@ export function LogDetailsDrawer({
 }: LogDetailsDrawerProps) {
   const isSessionMode = Boolean(sessionId);
   const [selectedSessionRequestId, setSelectedSessionRequestId] = useState<string | null>(null);
-  const [sessionSortMode, setSessionSortMode] = useState<SessionLogSortMode>("grouped");
+  const [sessionSortMode, setSessionSortMode] = useState<SessionLogSortMode>("duration");
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
   const [copiedLeftPanelId, setCopiedLeftPanelId] = useState(false);
 
@@ -173,9 +173,9 @@ export function LogDetailsDrawer({
   const sessionTruncated = sessionTotalCount > sessionLogs.length;
 
   // Default selection for a freshly opened session: the most recent log (latest
-  // startTime). The list is sorted newest-first, but MCP calls are grouped last,
-  // so the latest log by time is not necessarily sessionLogs[0]; compute it
-  // explicitly. A clicked/remembered log still wins over this default.
+  // startTime). The list is ordered by the selected sort mode, so the latest
+  // log by time is not necessarily sessionLogs[0]; compute it explicitly.
+  // A clicked/remembered log still wins over this default.
   const mostRecentLog = useMemo<LogEntry | null>(
     () =>
       sessionLogs.reduce<LogEntry | null>(
@@ -387,16 +387,18 @@ export function LogDetailsDrawer({
                 </div>
               )}
               {isSessionMode && (
-                <Segmented
-                  size="small"
-                  className="mt-1.5"
-                  options={[
-                    { label: "Grouped", value: "grouped" },
-                    { label: "Start time", value: "chronological" },
-                  ]}
-                  value={sessionSortMode}
-                  onChange={(value) => setSessionSortMode(value as SessionLogSortMode)}
-                />
+                <div className="mt-1.5 flex items-center gap-1.5">
+                  <span className="text-[10px] uppercase tracking-wide text-slate-500">Sort by</span>
+                  <Segmented
+                    size="small"
+                    options={[
+                      { label: "Duration", value: "duration" },
+                      { label: "Start time", value: "start_time" },
+                    ]}
+                    value={sessionSortMode}
+                    onChange={(value) => setSessionSortMode(value as SessionLogSortMode)}
+                  />
+                </div>
               )}
             </div>
 

ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/utils.test.ts

@@ -1,30 +1,44 @@
 import { describe, expect, it } from "vitest";
 import { sortSessionLogs } from "./utils";
 
-const llm = (id: string, startTime: string) => ({ request_id: id, call_type: "acompletion", startTime });
-const mcp = (id: string, startTime: string) => ({ request_id: id, call_type: "call_mcp_tool", startTime });
+const log = (id: string, startTime: string, endTime: string, request_duration_ms?: number) => ({
+  request_id: id,
+  startTime,
+  endTime,
+  request_duration_ms,
+});
 
 const ids = (rows: { request_id: string }[]) => rows.map((row) => row.request_id);
 
 describe("sortSessionLogs", () => {
   const rows = [
-    mcp("mcp-early", "2026-07-08T10:00:01.000Z"),
-    llm("llm-late", "2026-07-08T10:00:02.000Z"),
-    mcp("mcp-late", "2026-07-08T10:00:03.000Z"),
-    llm("llm-early", "2026-07-08T10:00:00.000Z"),
+    log("mid-duration", "2026-07-08T10:00:01.000Z", "2026-07-08T10:00:01.500Z", 2000),
+    log("longest", "2026-07-08T10:00:02.000Z", "2026-07-08T10:00:02.500Z", 5000),
+    log("shortest", "2026-07-08T10:00:03.000Z", "2026-07-08T10:00:03.500Z", 300),
+    log("earliest-no-duration-field", "2026-07-08T10:00:00.000Z", "2026-07-08T10:00:04.000Z"),
   ];
 
-  it("grouped mode keeps MCP calls last, newest first within each group", () => {
-    expect(ids(sortSessionLogs(rows, "grouped"))).toEqual(["llm-late", "llm-early", "mcp-late", "mcp-early"]);
+  it("duration mode sorts longest call first, deriving duration from timestamps when the field is missing", () => {
+    expect(ids(sortSessionLogs(rows, "duration"))).toEqual([
+      "longest",
+      "earliest-no-duration-field",
+      "mid-duration",
+      "shortest",
+    ]);
   });
 
-  it("chronological mode interleaves all calls by start time, oldest first", () => {
-    expect(ids(sortSessionLogs(rows, "chronological"))).toEqual(["llm-early", "mcp-early", "llm-late", "mcp-late"]);
+  it("start_time mode sorts calls in the order they started", () => {
+    expect(ids(sortSessionLogs(rows, "start_time"))).toEqual([
+      "earliest-no-duration-field",
+      "mid-duration",
+      "longest",
+      "shortest",
+    ]);
   });
 
   it("does not mutate the input array", () => {
     const input = [...rows];
-    sortSessionLogs(input, "chronological");
+    sortSessionLogs(input, "duration");
     expect(ids(input)).toEqual(ids(rows));
   });
 });

ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/utils.ts

@@ -3,25 +3,18 @@
  * These functions handle data formatting, validation, and guardrail calculations.
  */
 
-import { MCP_CALL_TYPES } from "../constants";
+export type SessionLogSortMode = "duration" | "start_time";
 
-export type SessionLogSortMode = "grouped" | "chronological";
+type SortableSessionLog = { startTime: string; endTime: string; request_duration_ms?: number };
 
-export function sortSessionLogs<T extends { call_type: string; startTime: string }>(
-  rows: T[],
-  mode: SessionLogSortMode,
-): T[] {
-  if (mode === "chronological") {
+const durationMs = (row: SortableSessionLog): number =>
+  row.request_duration_ms ?? Date.parse(row.endTime) - Date.parse(row.startTime);
+
+export function sortSessionLogs<T extends SortableSessionLog>(rows: T[], mode: SessionLogSortMode): T[] {
+  if (mode === "start_time") {
     return [...rows].sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
   }
-  return [...rows].sort((a, b) => {
-    const aIsMcp = MCP_CALL_TYPES.includes(a.call_type) ? 1 : 0;
-    const bIsMcp = MCP_CALL_TYPES.includes(b.call_type) ? 1 : 0;
-    if (aIsMcp !== bIsMcp) return aIsMcp - bIsMcp;
-    // Newest first, matching the all-sessions logs overview. MCP calls
-    // stay grouped last (above), newest-first within that group too.
-    return new Date(b.startTime).getTime() - new Date(a.startTime).getTime();
-  });
+  return [...rows].sort((a, b) => durationMs(b) - durationMs(a));
 }
 
 /**