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

[yuneng-berri]

Re-issuing #32432 (by @thibault-linktree) from my internal staging branch so CI runs against litellm_internal_staging before it merges. The original PR body follows

Relevant issues

Fixes #32431

Linear ticket

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have added meaningful tests
• My PR passes all CI/CD checks (e.g., lint, format, unit tests)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Screenshots / Proof of Fix

Before/after screenshots to be added in a comment (before at the merge base, after at 6d2090a). Steps to reproduce: run the proxy and the dashboard dev server, open http://localhost:3000/ui/?page=logs, click the session id of a session that mixes LLM and MCP calls, and look at the left sidebar of the drawer. Before this change the sidebar always lists LLM calls first and MCP calls last, newest first within each group, with no way to change it. After this change a Duration / Start time toggle sits under the session stats; Duration sorts the whole list by request duration, longest first, and Start time re-sorts it chronologically, interleaving LLM and MCP calls in the order they actually ran

Type

🆕 New Feature

Changes

The session drawer sidebar (LogDetailsDrawer) previously hardcoded its ordering inside the react-query fetch: MCP calls grouped after LLM calls, newest first within each group. That ordering is hard to reason about when debugging a session that interleaves LLM turns with MCP tool calls; you can neither see the slowest calls at a glance nor follow the actual execution order

This PR moves the ordering out of the query into a pure sortSessionLogs(rows, mode) helper in LogDetailsDrawer/utils.ts and adds a compact antd Segmented toggle to the sidebar header with two modes. duration is the default and sorts every call by request duration descending (falling back to endTime minus startTime when request_duration_ms is absent); start_time sorts every call by start time ascending so the list reads top to bottom in execution order. Both modes interleave LLM, agent and MCP calls; the previous group-by-type ordering is intentionally dropped since it obscured both dimensions. The toggle only renders in session mode, and the selected mode resets to duration when the drawer closes so it does not leak into the next session a user opens

Tests: unit tests for sortSessionLogs pin both orderings, the timestamp fallback for missing durations and non-mutation of the input, and a component test renders the drawer in session mode, asserts the default duration order, clicks Start time and asserts the interleaved chronological order, then toggles back

Test

Before

Tools are sorted by default by duration and don't show call order

After

You can sort by duration (default) or by start time (new)

[greptile-apps]

Greptile Summary

This PR adds a Duration / Start time sort toggle to the session drawer sidebar. The previous hardcoded sort (MCP calls last, newest-first within each group) is replaced by a pure sortSessionLogs utility and a Segmented control rendered only in session mode; the selected mode resets to "duration" whenever the drawer closes.

• utils.ts gains a generic, non-mutating sortSessionLogs<T> that falls back to endTime − startTime when request_duration_ms is absent, keeping it self-contained and reusable in unit tests without the query-layer pre-processing.
• LogDetailsDrawer.tsx moves sort responsibility out of the React Query queryFn and into a useMemo, so re-sorting on toggle is pure client-side state with no network cost.
• Both a unit-test suite for the sort utility and a component integration test covering the toggle and the close-reset behavior are included.

Confidence Score: 5/5

This is a self-contained UI-only change with no backend or auth impact; safe to merge.

The sort logic is isolated to a pure utility function that does not mutate its input and degrades gracefully when request_duration_ms is missing. State wiring in the component is straightforward: a single useState drives a useMemo, the toggle only appears in session mode, and the reset on close is explicitly tested. Both unit and component test suites cover the key orderings, the timestamp fallback, the mode toggle, and the close-reset behavior, leaving little room for silent regression.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/utils.ts	Adds SessionLogSortMode type, durationMs helper, and sortSessionLogs generic function; pure, non-mutating, and correctly handles missing request_duration_ms via timestamp fallback.
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx	Removes hardcoded sort from the query function, adds sessionSortMode state with useMemo-based sort, adds Segmented toggle in session mode, and resets sort to "duration" on drawer close.
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/utils.test.ts	Unit tests for sortSessionLogs covering duration mode, start_time mode, timestamp fallback for missing request_duration_ms, and non-mutation of the input array.
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.test.tsx	Component integration tests verifying default duration order, toggling to chronological start_time order across LLM and MCP calls, and sort-mode reset when the drawer is closed and reopened.

_{Reviews (1): Last reviewed commit: "Merge pull request #32432 from thibault-..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 30 untouched benchmarks

---

_{Comparing litellm_yj_july8 (f8b8358) with litellm_internal_staging (b00877c)}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!