From 840eeca2002a9b9e3dc5738781b6a736796ce585 Mon Sep 17 00:00:00 2001
From: Brennan Butler <64561607+brennanbutler01@users.noreply.github.com>
Date: Sun, 20 Sep 2026 09:07:36 +0700
Subject: [PATCH] fix(ui): reset response pagination when switching logs

---
 .../LogDetailContent.integration.test.tsx     | 29 ++++++++++++++++++-
 .../LogDetailsDrawer/LogDetailContent.tsx     |  1 +
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.integration.test.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.integration.test.tsx
index 68336e80b0f..771a5d1c6af 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.integration.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.integration.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, within } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { GuardrailJumpLink, LogDetailContent } from "./LogDetailContent";
@@ -34,6 +34,33 @@ const createLogEntry = (overrides: Partial<LogEntry> = {}): LogEntry =>
   }) as LogEntry;
 
 describe("LogDetailContent", () => {
+  it("resets WebSocket pagination for a different log but preserves it when the same log refreshes", () => {
+    const response = {
+      results: Array.from({ length: 101 }, (_, index) => ({
+        type: "response.completed",
+        response: { id: `resp_${index}`, output: [] },
+      })),
+    };
+    const log = createLogEntry({ request_id: "websocket-first", response });
+    const { rerender } = render(<LogDetailContent logEntry={log} />);
+    fireEvent.click(screen.getByRole("button", { name: "Next turns" }));
+    expect(screen.getByText("Turns 51–100 of 101")).toBeInTheDocument();
+
+    rerender(<LogDetailContent logEntry={{ ...log, response: { ...response } }} />);
+    expect(screen.getByText("Turns 51–100 of 101")).toBeInTheDocument();
+
+    rerender(<LogDetailContent logEntry={{ ...log, request_id: "websocket-second" }} />);
+    expect(screen.getByText("Turns 1–50 of 101")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Previous turns" })).toBeDisabled();
+    expect(screen.queryByText("Turn 51 · Completed")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Next turns" }));
+    fireEvent.click(screen.getByRole("button", { name: "Next turns" }));
+    expect(screen.getByText("Turns 101–101 of 101")).toBeInTheDocument();
+
+    rerender(<LogDetailContent logEntry={log} />);
+    expect(screen.getByText("Turns 1–50 of 101")).toBeInTheDocument();
+  });
+
   it("should render the component successfully", () => {
     render(<LogDetailContent logEntry={createLogEntry()} />);
 
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx
index 1a19c77d6f6..195683307c6 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx
@@ -658,6 +658,7 @@ function RequestResponseSection({
             <div>
               <TabsContent value="pretty">
                 <PrettyMessagesView
+                  key={logEntry.request_id}
                   request={getRawRequest()}
                   response={getFormattedResponse()}
                   metrics={{