(null);
@@ -333,6 +336,12 @@ export function SpanTree({
aria-label="Hide framework spans"
/>
+ {onOpenDetails && (
+
+ )}
diff --git a/ui/litellm-dashboard/src/components/view_logs/TraceView/TraceDrawer.test.tsx b/ui/litellm-dashboard/src/components/view_logs/TraceView/TraceDrawer.test.tsx
index da3fce0d14b..50de602fa31 100644
--- a/ui/litellm-dashboard/src/components/view_logs/TraceView/TraceDrawer.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/TraceView/TraceDrawer.test.tsx
@@ -135,6 +135,21 @@ describe("RunView", () => {
expect(screen.queryByTestId("detail-pane")).not.toBeInTheDocument();
});
+ it.each(["button", "Escape"])("reopens the selected step after closing details with %s", async (method) => {
+ const user = userEvent.setup();
+ renderRun(research);
+ await screen.findByTestId("detail-pane");
+ await user.keyboard("j");
+ const selectedId = screen.getByTestId("detail-pane").getAttribute("data-row-id");
+ expect(selectedId).not.toBe(rootSpanId(research));
+ if (method === "button") await user.click(screen.getByRole("button", { name: "close detail" }));
+ else await user.keyboard("{Escape}");
+ expect(screen.queryByTestId("detail-pane")).not.toBeInTheDocument();
+ await user.click(screen.getByRole("button", { name: "Show details" }));
+ expect(screen.getByTestId("detail-pane")).toHaveAttribute("data-row-id", selectedId);
+ expect(screen.queryByRole("button", { name: "Show details" })).not.toBeInTheDocument();
+ });
+
it("keeps a way back to the runs table when a run fails to load", async () => {
const user = userEvent.setup();
const onBack = vi.fn();
diff --git a/ui/litellm-dashboard/src/components/view_logs/TraceView/TraceDrawer.tsx b/ui/litellm-dashboard/src/components/view_logs/TraceView/TraceDrawer.tsx
index 0aeea4e4cc7..a991c771a56 100644
--- a/ui/litellm-dashboard/src/components/view_logs/TraceView/TraceDrawer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/TraceView/TraceDrawer.tsx
@@ -253,6 +253,7 @@ function RunBody({ trace, accessToken, initialSpanId, embedded }: RunBodyProps)
onToggleSpan={toggleSpan}
onToggleGroup={toggleGroup}
onLoadMore={loadMore}
+ onOpenDetails={detailOpen ? undefined : () => setDetailOpen(true)}
embedded={embedded}
/>
{detailOpen && (