From 2156db9f064082480fe865e2394b23edc2be5d1c Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Fri, 30 Jan 2026 16:37:33 -0800
Subject: [PATCH] new tool view

---
 .../GuardrailViewer/GuardrailViewer.test.tsx  | 24 ++++++++++++-------
 .../GuardrailViewer/GuardrailViewer.tsx       |  1 +
 .../LogDetailsDrawer/LogDetailsDrawer.tsx     |  1 +
 .../view_logs/VectorStoreViewer.tsx           |  1 +
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx
index 2dc3bdef97d..95120f60570 100644
--- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders, screen } from "../../../../tests/test-utils";
+import { renderWithProviders, screen, waitFor } from "../../../../tests/test-utils";
 import {
   makeBedrockResponse,
   makeEntity,
@@ -62,20 +62,26 @@ describe("GuardrailViewer", () => {
   it("toggles main section open/closed and chevron rotation class", async () => {
     const user = userEvent.setup();
     const data = makeGuardrailInformation();
-    renderWithProviders(<GuardrailViewer data={data} />);
+    const { container } = renderWithProviders(<GuardrailViewer data={data} />);
 
-    const header = screen.getByText("Guardrail Information").closest("div")!;
-    // Initially expanded
-    expect(screen.getByText("Click to collapse")).toBeInTheDocument();
+    const header = screen.getByText("Guardrail Information").closest(".ant-collapse-header")!;
+    // Initially expanded (content is visible)
+    expect(screen.getByText("Masked Entity Summary")).toBeInTheDocument();
+    
     // Click to collapse
     await user.click(header);
-    expect(screen.getByText("Click to expand")).toBeInTheDocument();
-    // Details gone
-    expect(screen.queryByText("Masked Entity Summary")).not.toBeInTheDocument();
+    // Wait for collapse animation and content to be hidden
+    await waitFor(() => {
+      const contentBox = container.querySelector(".ant-collapse-content-box");
+      expect(contentBox).not.toBeVisible();
+    });
 
     // Click to expand again
     await user.click(header);
-    expect(screen.getByText("Click to collapse")).toBeInTheDocument();
+    // Wait for expand animation
+    await waitFor(() => {
+      expect(screen.getByText("Masked Entity Summary")).toBeVisible();
+    });
   });
 
   it("defaults to presidio provider when guardrail_provider is undefined", async () => {
diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
index 206418fb314..ed2198ba859 100644
--- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
@@ -231,6 +231,7 @@ const GuardrailViewer = ({ data }: GuardrailViewerProps) => {
   return (
     <div className="bg-white rounded-lg shadow w-full max-w-full overflow-hidden mb-6">
       <Collapse
+        defaultActiveKey={["1"]}
         expandIconPosition="start"
         items={[
           {
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
index c88bf069965..cbb237dc017 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
@@ -421,6 +421,7 @@ function MetadataSection({ metadata, onCopy }: { metadata: Record<string, any>;
   return (
     <div className="bg-white rounded-lg shadow w-full max-w-full overflow-hidden mb-6">
       <Collapse
+        defaultActiveKey={["1"]}
         expandIconPosition="start"
         items={[
           {
diff --git a/ui/litellm-dashboard/src/components/view_logs/VectorStoreViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/VectorStoreViewer.tsx
index 4463647c7df..807b2856590 100644
--- a/ui/litellm-dashboard/src/components/view_logs/VectorStoreViewer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/VectorStoreViewer.tsx
@@ -58,6 +58,7 @@ export function VectorStoreViewer({ data }: VectorStoreViewerProps) {
   return (
     <div className="bg-white rounded-lg shadow w-full max-w-full overflow-hidden mb-6">
       <Collapse
+        defaultActiveKey={["1"]}
         expandIconPosition="start"
         items={[
           {