+
-
+
{name}
@@ -223,16 +160,14 @@ export function ToolResultCard({ name, result, failed = false }: { name: string;
{!open && {result}}
) : (
-
- {result || "No output"}
-
+ {result || "No output"}
)}
{open && (
@@ -244,20 +179,35 @@ export function ToolResultCard({ name, result, failed = false }: { name: string;
}
/** Collapsible "Input" / "Output" section: sticky header, chevron turns, body snaps open and shut. */
-export function Section({ title, children }: { title: string; children: React.ReactNode }) {
- const [open, setOpen] = useState(true);
+export function Section({
+ title,
+ children,
+ defaultOpen = true,
+ count,
+}: {
+ title: string;
+ children: React.ReactNode;
+ defaultOpen?: boolean;
+ count?: number;
+}) {
+ const [open, setOpen] = useState(defaultOpen);
return (
-
+
{children}
diff --git a/ui/litellm-dashboard/src/components/view_logs/TraceView/RunDrawer.test.tsx b/ui/litellm-dashboard/src/components/view_logs/TraceView/RunDrawer.test.tsx
index 8f205de441a..6b82c43263b 100644
--- a/ui/litellm-dashboard/src/components/view_logs/TraceView/RunDrawer.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/TraceView/RunDrawer.test.tsx
@@ -1,4 +1,4 @@
-import { screen } from "@testing-library/react";
+import { fireEvent, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { renderWithProviders } from "../../../../tests/test-utils";
@@ -53,6 +53,68 @@ describe("clampDrawerWidth", () => {
describe("RunDrawer", () => {
afterEach(() => {
vi.restoreAllMocks();
+ window.localStorage.clear();
+ });
+
+ it("fills the page across trace navigation and restores the resized drawer width", () => {
+ const runs = [run("a"), run("b")];
+ const onSelect = vi.fn();
+ const { rerender } = renderWithProviders(
+
,
+ );
+ const drawer = screen.getByRole("complementary", { name: "Trace details" });
+ fireEvent.keyDown(screen.getByRole("separator", { name: "Resize trace panel" }), { key: "ArrowLeft" });
+ const resizedWidth = drawer.style.width;
+ const storedWidth = window.localStorage.getItem("litellm.agentTraces.drawerWidth");
+
+ fireEvent.click(screen.getByRole("button", { name: "Enter full screen" }));
+ expect(drawer).toHaveStyle({ width: "100%" });
+ expect(screen.queryByRole("separator", { name: "Resize trace panel" })).not.toBeInTheDocument();
+ fireEvent.click(screen.getByRole("button", { name: "Next trace (J)" }));
+ expect(onSelect).toHaveBeenCalledWith(runs[1]);
+ rerender(
);
+ expect(drawer).toHaveStyle({ width: "100%" });
+ expect(screen.getByTestId("run-view")).toHaveTextContent("run b");
+
+ fireEvent.click(screen.getByRole("button", { name: "Exit full screen" }));
+ expect(drawer).toHaveStyle({ width: resizedWidth });
+ expect(screen.getByRole("separator", { name: "Resize trace panel" })).toBeInTheDocument();
+ expect(window.localStorage.getItem("litellm.agentTraces.drawerWidth")).toBe(storedWidth);
+ });
+
+ it.each([false, true])("reopens at the saved width after closing full screen (reduced motion: %s)", (reduce) => {
+ mockReducedMotion(reduce);
+ const runs = [run("a"), run("b")];
+ const onSelect = vi.fn();
+ const { rerender } = renderWithProviders(
+
,
+ );
+ fireEvent.keyDown(screen.getByRole("separator", { name: "Resize trace panel" }), { key: "ArrowLeft" });
+ const savedWidth = screen.getByRole("complementary", { name: "Trace details" }).style.width;
+ fireEvent.click(screen.getByRole("button", { name: "Enter full screen" }));
+ rerender(
);
+ rerender(
);
+ expect(screen.getByRole("complementary", { name: "Trace details" })).toHaveStyle({ width: savedWidth });
+ expect(screen.getByRole("button", { name: "Enter full screen" })).toBeVisible();
+ expect(screen.getByRole("separator", { name: "Resize trace panel" })).toBeVisible();
+ });
+
+ it.each(["Close (Esc)", "Close trace (Esc)"])("closes a full-screen trace using %s", (name) => {
+ const runs = [run("a")];
+ const onSelect = vi.fn();
+ renderWithProviders(
);
+ fireEvent.click(screen.getByRole("button", { name: "Enter full screen" }));
+ fireEvent.click(screen.getByRole("button", { name }));
+ expect(onSelect).toHaveBeenCalledExactlyOnceWith(null);
+ });
+
+ it("keeps Escape available to close a full-screen trace", () => {
+ const runs = [run("a")];
+ const onSelect = vi.fn();
+ renderWithProviders(
);
+ fireEvent.click(screen.getByRole("button", { name: "Enter full screen" }));
+ fireEvent.keyDown(window, { key: "Escape" });
+ expect(onSelect).toHaveBeenCalledExactlyOnceWith(null);
});
it("unmounts right away on close when the user prefers reduced motion", () => {
diff --git a/ui/litellm-dashboard/src/components/view_logs/TraceView/RunDrawer.tsx b/ui/litellm-dashboard/src/components/view_logs/TraceView/RunDrawer.tsx
index 147a55e994f..e285f523e56 100644
--- a/ui/litellm-dashboard/src/components/view_logs/TraceView/RunDrawer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/TraceView/RunDrawer.tsx
@@ -1,6 +1,6 @@
"use client";
-import { ChevronDown, ChevronsRight, ChevronUp } from "lucide-react";
+import { ChevronDown, ChevronsRight, ChevronUp, Maximize2, Minimize2, X } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { cn } from "@/lib/cva.config";
@@ -97,7 +97,7 @@ function ResizeHandle({ width, onResize }: { width: number; onResize: (width: nu
>
@@ -123,13 +123,21 @@ function HeaderButton({
title={label}
disabled={disabled}
onClick={onClick}
- className="grid size-7 place-items-center rounded-[4px] text-trace-key transition-colors duration-150 hover:bg-trace-row-hover hover:text-trace-text disabled:pointer-events-none disabled:opacity-40 motion-reduce:transition-none"
+ className="grid size-7 place-items-center rounded-[4px] text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40 motion-reduce:transition-none"
>
{children}
);
}
+function FullScreenButton({ fullScreen, onToggle }: { fullScreen: boolean; onToggle: () => void }) {
+ return (
+
+ {fullScreen ? : }
+
+ );
+}
+
interface RunDrawerProps {
trace: TraceSummary | null;
runs: readonly TraceSummary[];
@@ -142,6 +150,8 @@ const runKey = (run: TraceSummary): string => run.trace_ref || run.trace_id;
/** Right-side drawer over the runs list: resizable, keeps the list clickable, swaps runs in place. */
export function RunDrawer({ trace, runs, accessToken, onSelect }: RunDrawerProps) {
const [width, setWidth] = useDrawerWidth();
+ const [fullScreen, setFullScreen] = useState(false);
+ if (trace === null && fullScreen) setFullScreen(false);
const [lastShown, setLastShown] = useState
(trace);
const [exitedKey, setExitedKey] = useState(null);
if (trace !== null && trace !== lastShown) setLastShown(trace);
@@ -183,21 +193,21 @@ export function RunDrawer({ trace, runs, accessToken, onSelect }: RunDrawerProps