From 179397d273fec1b6997f52b2d40013c403b843a0 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Tue, 17 Feb 2026 18:19:26 -0800
Subject: [PATCH] ui fixes

---
 .../GuardrailViewer/GuardrailViewer.tsx       | 23 ++++++++++++++-----
 .../LogDetailsDrawer/LogDetailContent.tsx     | 16 +++++++++++--
 .../LogDetailsDrawer/LogDetailsDrawer.tsx     |  1 +
 3 files changed, 32 insertions(+), 8 deletions(-)

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 c916818a0ee..12abf9c3c6d 100644
--- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
@@ -5,6 +5,7 @@ import BedrockGuardrailDetails, {
   BedrockGuardrailResponse,
 } from "@/components/view_logs/GuardrailViewer/BedrockGuardrailDetails";
 import ContentFilterDetails from "./ContentFilterDetails";
+import CompliancePanel from "./CompliancePanel";
 
 // ── Interfaces ──────────────────────────────────────────────────────────────
 
@@ -58,6 +59,14 @@ interface GuardrailInformation {
 
 interface GuardrailViewerProps {
   data: GuardrailInformation | GuardrailInformation[];
+  accessToken?: string | null;
+  logEntry?: {
+    request_id: string;
+    user?: string;
+    model?: string;
+    startTime?: string;
+    metadata?: Record<string, any>;
+  };
 }
 
 // ── Helpers ─────────────────────────────────────────────────────────────────
@@ -585,7 +594,7 @@ const EvaluationCard = ({ entry }: { entry: GuardrailInformation }) => {
 
 // ── Main Component ──────────────────────────────────────────────────────────
 
-const GuardrailViewer = ({ data }: GuardrailViewerProps) => {
+const GuardrailViewer = ({ data, accessToken, logEntry }: GuardrailViewerProps) => {
   const guardrailEntries = useMemo(() => {
     return Array.isArray(data)
       ? data.filter((entry): entry is GuardrailInformation => Boolean(entry))
@@ -659,11 +668,6 @@ const GuardrailViewer = ({ data }: GuardrailViewerProps) => {
             <div className="text-sm font-medium text-gray-900">
               Total: {totalOverheadMs}ms overhead
             </div>
-            {policyTemplates.length > 0 && (
-              <div className="text-xs text-gray-500 mt-0.5">
-                Policy: {policyTemplates.join(" / ")}
-              </div>
-            )}
           </div>
 
           <button
@@ -676,6 +680,13 @@ const GuardrailViewer = ({ data }: GuardrailViewerProps) => {
         </div>
       </div>
 
+      {/* ── Compliance Panel ──────────────────────────────────── */}
+      {accessToken && logEntry && (
+        <div className="px-6 py-4 border-b border-gray-100">
+          <CompliancePanel accessToken={accessToken} logEntry={logEntry} />
+        </div>
+      )}
+
       {/* ── Body: two columns ──────────────────────────────────── */}
       <div className="flex">
         {/* Left column: Request Lifecycle */}
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 0552b1837db..913634d388f 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx
@@ -4,6 +4,7 @@ import moment from "moment";
 import { LogEntry } from "../columns";
 import { formatNumberWithCommas } from "@/utils/dataUtils";
 import GuardrailViewer from "../GuardrailViewer/GuardrailViewer";
+import CompliancePanel from "../GuardrailViewer/CompliancePanel";
 import { CostBreakdownViewer } from "../CostBreakdownViewer";
 import { ConfigInfoMessage } from "../ConfigInfoMessage";
 import { VectorStoreViewer } from "../VectorStoreViewer";
@@ -40,6 +41,7 @@ export interface LogDetailContentProps {
   onOpenSettings?: () => void;
   /** When true, log details (messages/response) are still being lazy-loaded. */
   isLoadingDetails?: boolean;
+  accessToken?: string | null;
 }
 
 /**
@@ -50,7 +52,7 @@ export interface LogDetailContentProps {
  * Designed to be placed inside LogDetailsDrawer's right panel so it can
  * be reused for both single-log and session-mode views.
  */
-export function LogDetailContent({ logEntry, onOpenSettings, isLoadingDetails = false }: LogDetailContentProps) {
+export function LogDetailContent({ logEntry, onOpenSettings, isLoadingDetails = false, accessToken }: LogDetailContentProps) {
   const metadata = logEntry.metadata || {};
   const hasError = metadata.status === "failure";
   const errorInfo = hasError ? metadata.error_information : null;
@@ -166,7 +168,17 @@ export function LogDetailContent({ logEntry, onOpenSettings, isLoadingDetails =
       {/* Guardrail Data */}
       {hasGuardrailData && (
         <div id="guardrail-section">
-          <GuardrailViewer data={guardrailInfo} />
+          <GuardrailViewer
+            data={guardrailInfo}
+            accessToken={accessToken ?? null}
+            logEntry={{
+              request_id: logEntry.request_id,
+              user: logEntry.user,
+              model: logEntry.model,
+              startTime: logEntry.startTime,
+              metadata: logEntry.metadata,
+            }}
+          />
         </div>
       )}
 
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 fb761918531..6f85c81ce1c 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
@@ -384,6 +384,7 @@ export function LogDetailsDrawer({
                 logEntry={enrichedLog}
                 onOpenSettings={onOpenSettings}
                 isLoadingDetails={isLoadingDetails}
+                accessToken={accessToken ?? null}
               />
             </div>
           </div>