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

[thibault-linktree]

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 sort-mode toggle to the session sidebar in LogDetailsDrawer, replacing the previous hardcoded group-then-newest ordering with two user-selectable modes: Duration (default, longest call first) and Start time (chronological). The selected mode resets to Duration when the drawer closes, addressing the state-leakage concern from the prior review.

• utils.ts: New sortSessionLogs generic helper sorts by duration (with a timestamp-based fallback) or by start time; it spreads the input array so the original is never mutated.
• LogDetailsDrawer.tsx: Sort logic is lifted out of the query function into a useMemo driven by sessionSortMode state; the Segmented toggle is rendered only in session mode, and the reset useEffect now unconditionally restores "duration" on close.
• Tests: Both unit tests (utils.test.ts) and component tests (LogDetailsDrawer.test.tsx) cover all three new behaviours, including the close-and-reopen regression test.

Confidence Score: 5/5

Safe to merge — the change is self-contained UI logic with no backend or data-model impact and is well covered by both unit and component tests.

The sort helper is a pure, non-mutating function with full unit test coverage. The state management in the drawer is straightforward: the query result is unchanged, ordering is applied in a useMemo, and the close-triggered reset is both implemented and tested end-to-end including the reopen scenario from the prior review. No regressions or edge-case gaps were found.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx	Moves session ordering from the query into a useMemo driven by sessionSortMode; adds a Segmented toggle rendered only in session mode; resets sort mode to "duration" when the drawer closes
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/utils.ts	Adds SessionLogSortMode type and sortSessionLogs helper; correctly spreads input to avoid mutation and falls back to timestamp difference when request_duration_ms is absent
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.test.tsx	Component-level tests verify default duration ordering, toggle to chronological, toggle back, and that sort mode resets to duration after the drawer closes and reopens
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/utils.test.ts	Unit tests for sortSessionLogs cover both modes, the timestamp-based duration fallback, and non-mutation of the input array

_{Reviews (2): Last reviewed commit: "fix(ui): reset session sort mode when dr..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will improve performance by 20.47%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
✅ 29 untouched benchmarks

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	test_completion_simple_message	4.6 ms	3.9 ms	+20.47%

Tip

Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing thibault-linktree:litellm_ui_session_sidebar_sort_toggle (6d2090a) with litellm_internal_staging (cd6e8cd)¹}

Footnotes

1. No successful run was found on litellm_internal_staging (6f6bd45) during the generation of this report, so cd6e8cd was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[thibault-linktree]

Addressed the review feedback: the sort mode now resets to the duration default when the drawer closes, with a regression test that closes and reopens the drawer after switching modes. Also note the toggle was reworked since the first review; the grouped ordering is gone and the two modes are now Duration (default) and Start time

@greptileai