Access Groups
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
index 4253d138371..95073ad1dbd 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
@@ -185,7 +185,6 @@ const MCPServers: React.FC
= ({ accessToken, userRole, userID })
alias: "",
url: "",
transport: "",
- spec_version: "",
auth_type: "",
created_at: "",
created_by: "",
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/types.tsx b/ui/litellm-dashboard/src/components/mcp_tools/types.tsx
index d9a8e269fa9..5213c2610eb 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/types.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/types.tsx
@@ -132,7 +132,6 @@ export interface MCPServer {
description?: string | null;
url: string;
transport?: string | null;
- spec_version?: string | null;
auth_type?: string | null;
mcp_info?: MCPInfo | null;
created_at: string;
diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer.tsx
deleted file mode 100644
index a2909e28d4d..00000000000
--- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import React, { useState } from "react";
-
-interface RecognitionMetadata {
- recognizer_name: string;
- recognizer_identifier: string;
-}
-
-interface GuardrailEntity {
- end: number;
- score: number;
- start: number;
- entity_type: string;
- analysis_explanation: string | null;
- recognition_metadata: RecognitionMetadata;
-}
-
-interface MaskedEntityCount {
- [key: string]: number;
-}
-
-interface GuardrailInformation {
- duration: number;
- end_time: number;
- start_time: number;
- guardrail_mode: string;
- guardrail_name: string;
- guardrail_status: string;
- guardrail_response: GuardrailEntity[];
- masked_entity_count: MaskedEntityCount;
-}
-
-interface GuardrailViewerProps {
- data: GuardrailInformation;
-}
-
-export function GuardrailViewer({ data }: GuardrailViewerProps) {
- const [sectionExpanded, setSectionExpanded] = useState(true);
- const [entityListExpanded, setEntityListExpanded] = useState(true);
- const [expandedEntities, setExpandedEntities] = useState>({});
-
- if (!data) {
- return null;
- }
-
- // Calculate total masked entities
- const totalMaskedEntities = data.masked_entity_count ?
- Object.values(data.masked_entity_count).reduce((sum, count) => sum + count, 0) : 0;
-
- const formatTime = (timestamp: number): string => {
- const date = new Date(timestamp * 1000);
- return date.toLocaleString();
- };
-
- const toggleEntity = (index: number) => {
- setExpandedEntities(prev => ({
- ...prev,
- [index]: !prev[index]
- }));
- };
-
- const getScoreColor = (score: number): string => {
- if (score >= 0.8) return "text-green-600";
- return "text-yellow-600";
- };
-
- return (
-
-
setSectionExpanded(!sectionExpanded)}
- >
-
-
-
Guardrail Information
-
- {data.guardrail_status}
-
- {totalMaskedEntities > 0 && (
-
- {totalMaskedEntities} masked {totalMaskedEntities === 1 ? 'entity' : 'entities'}
-
- )}
-
-
{sectionExpanded ? 'Click to collapse' : 'Click to expand'}
-
-
- {sectionExpanded && (
-
-
-
-
-
- Guardrail Name:
- {data.guardrail_name}
-
-
- Mode:
- {data.guardrail_mode}
-
-
- Status:
-
- {data.guardrail_status}
-
-
-
-
-
- Start Time:
- {formatTime(data.start_time)}
-
-
- End Time:
- {formatTime(data.end_time)}
-
-
- Duration:
- {data.duration.toFixed(4)}s
-
-
-
-
- {/* Masked Entity Summary */}
- {data.masked_entity_count && Object.keys(data.masked_entity_count).length > 0 && (
-
-
Masked Entity Summary
-
- {Object.entries(data.masked_entity_count).map(([entityType, count]) => (
-
- {entityType}: {count}
-
- ))}
-
-
- )}
-
-
- {/* Detected Entities Section */}
- {data.guardrail_response && data.guardrail_response.length > 0 && (
-
-
setEntityListExpanded(!entityListExpanded)}
- >
-
-
Detected Entities ({data.guardrail_response.length})
-
-
- {entityListExpanded && (
-
- {data.guardrail_response.map((entity, index) => {
- const isExpanded = expandedEntities[index] || false;
-
- return (
-
-
toggleEntity(index)}
- >
-
-
-
{entity.entity_type}
-
- Score: {entity.score.toFixed(2)}
-
-
-
- Position: {entity.start}-{entity.end}
-
-
-
- {isExpanded && (
-
-
-
-
- Entity Type:
- {entity.entity_type}
-
-
- Position:
- Characters {entity.start}-{entity.end}
-
-
- Confidence:
-
- {entity.score.toFixed(2)}
-
-
-
-
-
- {entity.recognition_metadata && (
- <>
-
- Recognizer:
- {entity.recognition_metadata.recognizer_name}
-
-
- Identifier:
-
- {entity.recognition_metadata.recognizer_identifier}
-
-
-
- )}
- {entity.analysis_explanation && (
-
- Explanation:
- {entity.analysis_explanation}
-
- )}
-
-
-
- )}
-
- );
- })}
-
- )}
-
- )}
-
- )}
-
+
setOpen((v) => !v)}
+ >
+
+
+
+ {title} {typeof count === "number" && ({count})}
+
+
+
{right}
+
+ {open &&
{children}
}
+
+ {label}
+ {children}
+
+);
+
+const Divider: React.FC = () => ;
+
+/** ====== Main component ====== */
+export const BedrockGuardrailDetails: React.FC<{ response: BedrockGuardrailResponse }> = ({ response }) => {
+
+ if (!response) return null;
+
+ const outputs: BedrockOutputContent[] = (response.outputs ?? response.output ?? []) as BedrockOutputContent[];
+
+ const actionTone: "green" | "red" = response.action === "GUARDRAIL_INTERVENED" ? "red" : "green";
+
+ const coverageChips = (
+
+ {response.guardrailCoverage?.textCharacters && (
+ chip(
+ `text guarded ${response.guardrailCoverage.textCharacters.guarded ?? 0}/${response.guardrailCoverage.textCharacters.total ?? 0}`,
+ "blue"
+ )
+ )}
+ {response.guardrailCoverage?.images && (
+ chip(
+ `images guarded ${response.guardrailCoverage.images.guarded ?? 0}/${response.guardrailCoverage.images.total ?? 0}`,
+ "blue"
+ )
+ )}
+
+ );
+
+ const usagePills = response.usage && (
+
+ {Object.entries(response.usage).map(([k, v]) =>
+ typeof v === "number" ? (
+
+ {k}: {v}
+
+ ) : null
+ )}
+
+ );
+
+ return (
+
+ {/* Top summary card */}
+
+
+
+
+ {chip(response.action ?? "N/A", actionTone)}
+
+ {response.actionReason && {response.actionReason}}
+ {response.blockedResponse && (
+
+ {response.blockedResponse}
+
+ )}
+
+
+ {coverageChips}
+ {usagePills}
+
+
+
+ {/* Outputs */}
+ {outputs.length > 0 && (
+ <>
+
+
Outputs
+
+ {outputs.map((o, i) => (
+
+
{o.text ?? (non-text output)}
+
+ ))}
+
+
+ )}
+
+
+ {/* Assessments */}
+ {response.assessments?.length ? (
+
+ {response.assessments.map((assess, idx) => {
+ const policyBadges = (
+
+ {assess.wordPolicy && chip("word", "slate")}
+ {assess.contentPolicy && chip("content", "slate")}
+ {assess.topicPolicy && chip("topic", "slate")}
+ {assess.sensitiveInformationPolicy && chip("sensitive-info", "slate")}
+ {assess.contextualGroundingPolicy && chip("contextual-grounding", "slate")}
+ {assess.automatedReasoningPolicy && chip("automated-reasoning", "slate")}
+
+ );
+
+ return (
+
+ {assess.invocationMetrics?.guardrailProcessingLatency != null &&
+ chip(`${assess.invocationMetrics.guardrailProcessingLatency} ms`, "amber")}
+ {policyBadges}
+
+ }
+ >
+ {/* Word policy */}
+ {assess.wordPolicy && (
+
+
Word Policy
+ {(assess.wordPolicy.customWords?.length ?? 0) > 0 && (
+
+
+ {assess.wordPolicy.customWords!.map((w, i) => (
+
+
+ {chip(w.action ?? "N/A", w.detected ? "red" : "slate")}
+ {w.match}
+
+ {boolPill(w.detected)}
+
+ ))}
+
+ )}
+ {(assess.wordPolicy.managedWordLists?.length ?? 0) > 0 && (
+
+
+ {assess.wordPolicy.managedWordLists!.map((w, i) => (
+
+
+ {chip(w.action ?? "N/A", w.detected ? "red" : "slate")}
+ {w.match}
+ {w.type && chip(w.type, "slate")}
+
+ {boolPill(w.detected)}
+
+ ))}
+
+ )}
+
+ )}
+
+ {/* Content policy */}
+ {assess.contentPolicy?.filters?.length ? (
+
+
Content Policy
+
+
+
+
+ | Type |
+ Action |
+ Detected |
+ Strength |
+ Confidence |
+
+
+
+ {assess.contentPolicy.filters!.map((f, i) => (
+
+ | {f.type ?? "—"} |
+ {chip(f.action ?? "—", f.detected ? "red" : "slate")} |
+ {boolPill(f.detected)} |
+ {f.filterStrength ?? "—"} |
+ {f.confidence ?? "—"} |
+
+ ))}
+
+
+
+
+ ) : null}
+
+ {/* Contextual grounding */}
+ {assess.contextualGroundingPolicy?.filters?.length ? (
+
+
Contextual Grounding
+
+
+
+
+ | Type |
+ Action |
+ Detected |
+ Score |
+ Threshold |
+
+
+
+ {assess.contextualGroundingPolicy.filters!.map((f, i) => (
+
+ | {f.type ?? "—"} |
+ {chip(f.action ?? "—", f.detected ? "red" : "slate")} |
+ {boolPill(f.detected)} |
+ {f.score ?? "—"} |
+ {f.threshold ?? "—"} |
+
+ ))}
+
+
+
+
+ ) : null}
+
+ {/* Sensitive Information */}
+ {assess.sensitiveInformationPolicy && (
+
+
Sensitive Information
+ {(assess.sensitiveInformationPolicy.piiEntities?.length ?? 0) > 0 && (
+
+
+ {assess.sensitiveInformationPolicy.piiEntities!.map((p, i) => (
+
+
+ {chip(p.action ?? "N/A", p.detected ? "red" : "slate")}
+ {p.type && chip(p.type, "slate")}
+ {p.match}
+
+ {boolPill(p.detected)}
+
+ ))}
+
+ )}
+ {(assess.sensitiveInformationPolicy.regexes?.length ?? 0) > 0 && (
+
+
+ {assess.sensitiveInformationPolicy.regexes!.map((r, i) => (
+
+
+ {chip(r.action ?? "N/A", r.detected ? "red" : "slate")}
+ {r.name ?? "regex"}
+ {r.regex}
+
+
+ {boolPill(r.detected)}
+ {r.match && {r.match}}
+
+
+ ))}
+
+ )}
+
+ )}
+
+ {/* Topic policy */}
+ {assess.topicPolicy?.topics?.length ? (
+
+
Topic Policy
+
+ {assess.topicPolicy.topics!.map((t, i) => (
+
+
+ {chip(t.action ?? "N/A", t.detected ? "red" : "slate")}
+ {t.name ?? "topic"}
+ {t.type && chip(t.type, "slate")}
+ {boolPill(t.detected)}
+
+
+ ))}
+
+
+ ) : null}
+
+ {/* Invocation metrics */}
+ {assess.invocationMetrics && (
+
+
+
+
{assess.invocationMetrics.guardrailProcessingLatency ?? "—"}
+
+
+ {assess.invocationMetrics.guardrailCoverage?.textCharacters &&
+ chip(
+ `text ${assess.invocationMetrics.guardrailCoverage.textCharacters.guarded ?? 0}/${
+ assess.invocationMetrics.guardrailCoverage.textCharacters.total ?? 0
+ }`,
+ "blue"
+ )}
+ {assess.invocationMetrics.guardrailCoverage?.images &&
+ chip(
+ `images ${assess.invocationMetrics.guardrailCoverage.images.guarded ?? 0}/${
+ assess.invocationMetrics.guardrailCoverage.images.total ?? 0
+ }`,
+ "blue"
+ )}
+
+
+
+
+
+
+ {assess.invocationMetrics.usage &&
+ Object.entries(assess.invocationMetrics.usage).map(([k, v]) =>
+ typeof v === "number" ? (
+
+ {k}: {v}
+
+ ) : null
+ )}
+
+
+
+
+ )}
+
+ {/* Automated reasoning (fallback render) */}
+ {assess.automatedReasoningPolicy?.findings?.length ? (
+
+
+ {assess.automatedReasoningPolicy.findings!.map((f, i) => (
+
+ {JSON.stringify(f, null, 2)}
+
+ ))}
+
+ ) : null}
+
+ );
+ })}
+
{JSON.stringify(response, null, 2)}
+
+
+ );
+};
+
+export default BedrockGuardrailDetails;
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
new file mode 100644
index 00000000000..2e47de52e88
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx
@@ -0,0 +1,154 @@
+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 {
+ makeBedrockResponse, makeEntity,
+ makeGuardrailInformation,
+} from "@/components/view_logs/GuardrailViewer/__tests__/fixtures"
+import GuardrailViewer from "@/components/view_logs/GuardrailViewer/GuardrailViewer"
+
+// We will mock child components selectively for some tests to assert prop passthrough,
+// but also run an integration-style render without mocks.
+const PresidioPath = '@/components/view_logs/GuardrailViewer/PresidioDetectedEntities';
+const BedrockPath = '@/components/view_logs/GuardrailViewer/BedrockGuardrailDetails';
+
+describe('GuardrailViewer', () => {
+ beforeEach(() => {
+ vi.resetModules();
+ });
+
+ it('shows header, status pill color, duration rounding, and time labels', () => {
+ const data = makeGuardrailInformation({ duration: 1.23456, guardrail_status: 'success' });
+ renderWithProviders(
);
+
+ expect(screen.getByText('Guardrail Information')).toBeInTheDocument();
+ // header status pill (success => green)
+ const statusBadges = screen.getAllByText('success');
+ // there are two status locations: header chip and grid "Status"
+ expect(statusBadges.length).toBeGreaterThanOrEqual(1);
+ // Quick class assertion for at least one of them
+ expect(statusBadges[0].className).toMatch(/bg-green-100/);
+
+ // duration displays with 4 decimals
+ expect(screen.getByText(/1\.2346s/)).toBeInTheDocument();
+
+ // time labels exist
+ expect(screen.getByText('Start Time:')).toBeInTheDocument();
+ expect(screen.getByText('End Time:')).toBeInTheDocument();
+ });
+
+ it('calculates and displays masked entity totals with pluralization', () => {
+ const data = makeGuardrailInformation({
+ masked_entity_count: { EMAIL_ADDRESS: 2, PHONE_NUMBER: 1 },
+ });
+ renderWithProviders(
);
+
+ expect(screen.getByText('3 masked entities')).toBeInTheDocument();
+ // summary chips for each entry
+ expect(screen.getByText('EMAIL_ADDRESS: 2')).toBeInTheDocument();
+ expect(screen.getByText('PHONE_NUMBER: 1')).toBeInTheDocument();
+ });
+
+ it('hides masked badge & summary when count is zero/empty', () => {
+ const data = makeGuardrailInformation({ masked_entity_count: {} });
+ renderWithProviders(
);
+
+ expect(screen.queryByText(/masked entity/)).not.toBeInTheDocument();
+ expect(screen.queryByText('Masked Entity Summary')).not.toBeInTheDocument();
+ });
+
+ it('toggles main section open/closed and chevron rotation class', async () => {
+ const user = userEvent.setup();
+ const data = makeGuardrailInformation();
+ renderWithProviders(
);
+
+ const header = screen.getByText('Guardrail Information').closest('div')!;
+ // Initially expanded
+ expect(screen.getByText('Click to collapse')).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();
+
+ // Click to expand again
+ await user.click(header);
+ expect(screen.getByText('Click to collapse')).toBeInTheDocument();
+ });
+
+ it('defaults to presidio provider when guardrail_provider is undefined', async () => {
+ vi.doMock(PresidioPath, () => ({
+ __esModule: true,
+ default: ({ entities }: any) =>
presidio {entities?.length}
,
+ }));
+ const { default: Component } = await import('@/components/view_logs/GuardrailViewer/GuardrailViewer');
+
+ const data = makeGuardrailInformation({
+ guardrail_provider: undefined,
+ guardrail_response: [makeEntity(), makeEntity()],
+ });
+ renderWithProviders(
);
+
+ expect(screen.getByTestId('presidio-mock')).toHaveTextContent('presidio 2');
+ });
+
+ it('renders PresidioDetectedEntities when provider="presidio" and response has entities', async () => {
+ vi.doMock(PresidioPath, () => ({
+ __esModule: true,
+ default: ({ entities }: any) =>
count:{entities?.length}
,
+ }));
+ const { default: Component } = await import('@/components/view_logs/GuardrailViewer/GuardrailViewer');
+
+ const data = makeGuardrailInformation({
+ guardrail_provider: 'presidio',
+ guardrail_response: [makeEntity()],
+ });
+ renderWithProviders(
);
+ expect(screen.getByTestId('presidio-mock')).toHaveTextContent('count:1');
+ });
+
+ it('renders BedrockGuardrailDetails when provider="bedrock"', async () => {
+ vi.doMock(BedrockPath, () => ({
+ __esModule: true,
+ default: ({ response }: any) => (
+
{response?.action ?? 'no-action'}
+ ),
+ }));
+ const { default: Component } = await import('@/components/view_logs/GuardrailViewer/GuardrailViewer');
+
+ const data = makeGuardrailInformation({
+ guardrail_provider: 'bedrock',
+ guardrail_response: makeBedrockResponse({ action: 'GUARDRAIL_INTERVENED' }),
+ });
+ renderWithProviders(
);
+ expect(screen.getByTestId('bedrock-mock')).toHaveTextContent('GUARDRAIL_INTERVENED');
+ });
+
+ it('unknown provider renders neither Presidio nor Bedrock details', () => {
+ const data = makeGuardrailInformation({
+ guardrail_provider: 'unknown',
+ });
+ renderWithProviders(
);
+ // Summary still present
+ expect(screen.getByText('Guardrail Information')).toBeInTheDocument();
+ // No provider sections
+ expect(screen.queryByText(/Detected Entities/)).not.toBeInTheDocument();
+ expect(screen.queryByText(/Raw Bedrock Guardrail Response/)).not.toBeInTheDocument();
+ });
+
+ it('integration: renders with real Bedrock details without mocks', () => {
+ const data = makeGuardrailInformation({
+ guardrail_provider: 'bedrock',
+ guardrail_response: makeBedrockResponse({
+ action: 'NONE',
+ outputs: [{ text: 'ok' }],
+ }),
+ });
+ renderWithProviders(
);
+
+ // Bedrock summary bits
+ expect(screen.getByText('Outputs')).toBeInTheDocument();
+ expect(screen.getByText('ok')).toBeInTheDocument();
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
new file mode 100644
index 00000000000..ebacda497c8
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
@@ -0,0 +1,176 @@
+import React, { useState } from "react";
+import { Tooltip } from "antd";
+import PresidioDetectedEntities from "./PresidioDetectedEntities";
+import BedrockGuardrailDetails, {
+ BedrockGuardrailResponse,
+} from "@/components/view_logs/GuardrailViewer/BedrockGuardrailDetails";
+
+interface RecognitionMetadata {
+ recognizer_name: string;
+ recognizer_identifier: string;
+}
+
+interface GuardrailEntity {
+ end: number;
+ score: number;
+ start: number;
+ entity_type: string;
+ analysis_explanation: string | null;
+ recognition_metadata: RecognitionMetadata;
+}
+
+interface MaskedEntityCount {
+ [key: string]: number;
+}
+
+interface GuardrailInformation {
+ duration: number;
+ end_time: number;
+ start_time: number;
+ guardrail_mode: string;
+ guardrail_name: string;
+ guardrail_status: string;
+ guardrail_response: GuardrailEntity[] | BedrockGuardrailResponse;
+ masked_entity_count: MaskedEntityCount;
+ guardrail_provider?: string; // "presidio" | other providers
+}
+
+interface GuardrailViewerProps {
+ data: GuardrailInformation;
+}
+
+const GuardrailViewer = ({ data }: GuardrailViewerProps) => {
+ const [sectionExpanded, setSectionExpanded] = useState(true);
+
+ // Default to presidio for backwards compatibility
+ const guardrailProvider = data.guardrail_provider ?? "presidio";
+
+ if (!data) return null;
+
+ const isSuccess =
+ typeof data.guardrail_status === "string" &&
+ data.guardrail_status.toLowerCase() === "success";
+
+ const tooltipTitle = isSuccess ? null : "Guardrail failed to run.";
+
+ // Calculate total masked entities
+ const totalMaskedEntities = data.masked_entity_count ?
+ Object.values(data.masked_entity_count).reduce((sum, count) => sum + count, 0) : 0;
+
+ const formatTime = (timestamp: number): string => {
+ const date = new Date(timestamp * 1000);
+ return date.toLocaleString();
+ };
+
+ return (
+
+
setSectionExpanded(!sectionExpanded)}
+ >
+
+
+
Guardrail Information
+
+ {/* Header status chip with tooltip */}
+
+
+ {data.guardrail_status}
+
+
+
+ {totalMaskedEntities > 0 && (
+
+ {totalMaskedEntities} masked {totalMaskedEntities === 1 ? 'entity' : 'entities'}
+
+ )}
+
+
{sectionExpanded ? 'Click to collapse' : 'Click to expand'}
+
+
+ {sectionExpanded && (
+
+
+
+
+
+ Guardrail Name:
+ {data.guardrail_name}
+
+
+ Mode:
+ {data.guardrail_mode}
+
+
+ Status:
+
+
+ {data.guardrail_status}
+
+
+
+
+
+
+
+ Start Time:
+ {formatTime(data.start_time)}
+
+
+ End Time:
+ {formatTime(data.end_time)}
+
+
+ Duration:
+ {data.duration.toFixed(4)}s
+
+
+
+
+ {/* Masked Entity Summary */}
+ {data.masked_entity_count && Object.keys(data.masked_entity_count).length > 0 && (
+
+
Masked Entity Summary
+
+ {Object.entries(data.masked_entity_count).map(([entityType, count]) => (
+
+ {entityType}: {count}
+
+ ))}
+
+
+ )}
+
+
+ {/* Provider-specific Detected Entities */}
+ {guardrailProvider === "presidio" && (data.guardrail_response as GuardrailEntity[])?.length > 0 && (
+
+ )}
+
+ {guardrailProvider === "bedrock" && data.guardrail_response && (
+
+
+
+ )}
+
+ )}
+
+ );
+};
+
+export default GuardrailViewer;
diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/PresidioDetectedEntities.test.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/PresidioDetectedEntities.test.tsx
new file mode 100644
index 00000000000..2360561f64e
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/PresidioDetectedEntities.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import PresidioDetectedEntities from '@/components/view_logs/GuardrailViewer/PresidioDetectedEntities';
+import { renderWithProviders, screen } from "../../../../tests/test-utils"
+import { makeEntity } from "@/components/view_logs/GuardrailViewer/__tests__/fixtures"
+
+describe('PresidioDetectedEntities', () => {
+ it('renders null when entities empty', () => {
+ const { container } = renderWithProviders(
);
+ expect(container).toBeEmptyDOMElement();
+ });
+
+ it('renders per-entity header info including score color and position', async () => {
+ const user = userEvent.setup();
+ const e = makeEntity({ start: 10, end: 20, score: 0.92, entity_type: 'EMAIL_ADDRESS' });
+ renderWithProviders(
);
+
+ // Header row values
+ expect(screen.getByText('EMAIL_ADDRESS')).toBeInTheDocument();
+ expect(screen.getByText(/Score: 0\.92/)).toBeInTheDocument();
+ expect(screen.getByText('Position: 10-20')).toBeInTheDocument();
+
+ // Expand details
+ await user.click(screen.getByText('EMAIL_ADDRESS'));
+ expect(screen.getByText('Entity Type:')).toBeInTheDocument();
+ expect(screen.getByText('Characters 10-20')).toBeInTheDocument();
+ expect(screen.getByText('Confidence:')).toBeInTheDocument();
+ // Recognizer details
+ expect(screen.getByText('EmailRecognizer')).toBeInTheDocument();
+ expect(screen.getByText('email_v1')).toBeInTheDocument();
+ // Explanation
+ expect(screen.getByText('Matched via pattern')).toBeInTheDocument();
+ });
+
+ it('handles missing metadata & low scores gracefully', async () => {
+ const user = userEvent.setup();
+ const e = makeEntity({
+ score: 0.3,
+ recognition_metadata: undefined as any,
+ analysis_explanation: null,
+ entity_type: 'NAME',
+ start: 0,
+ end: 0,
+ });
+ renderWithProviders(
);
+
+ await user.click(screen.getByText('NAME'));
+ // No recognizer/explanation rows
+ expect(screen.queryByText('Recognizer:')).not.toBeInTheDocument();
+ expect(screen.queryByText('Explanation:')).not.toBeInTheDocument();
+ // Position still renders
+ expect(screen.getByText('Characters 0-0')).toBeInTheDocument();
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/PresidioDetectedEntities.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/PresidioDetectedEntities.tsx
new file mode 100644
index 00000000000..d03478a569e
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/PresidioDetectedEntities.tsx
@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+
+interface RecognitionMetadata {
+ recognizer_name: string;
+ recognizer_identifier: string;
+}
+
+export interface GuardrailEntity {
+ end: number;
+ score: number;
+ start: number;
+ entity_type: string;
+ analysis_explanation: string | null;
+ recognition_metadata: RecognitionMetadata;
+}
+
+interface PresidioDetectedEntitiesProps {
+ entities: GuardrailEntity[];
+}
+
+const getScoreColor = (score: number): string => {
+ if (score >= 0.8) return "text-green-600";
+ return "text-yellow-600";
+};
+
+const PresidioDetectedEntities = ({ entities }: PresidioDetectedEntitiesProps) => {
+ const [entityListExpanded, setEntityListExpanded] = useState(true);
+ const [expandedEntities, setExpandedEntities] = useState
>({});
+
+ const toggleEntity = (index: number) => {
+ setExpandedEntities((prev) => ({
+ ...prev,
+ [index]: !prev[index],
+ }));
+ };
+
+ if (!entities || entities.length === 0) return null;
+
+ return (
+
+
setEntityListExpanded(!entityListExpanded)}
+ >
+
+
Detected Entities ({entities.length})
+
+
+ {entityListExpanded && (
+
+ {entities.map((entity, index) => {
+ const isExpanded = expandedEntities[index] || false;
+
+ return (
+
+
toggleEntity(index)}
+ >
+
+
+
{entity.entity_type}
+
+ Score: {entity.score.toFixed(2)}
+
+
+
Position: {entity.start}-{entity.end}
+
+
+ {isExpanded && (
+
+
+
+
+ Entity Type:
+ {entity.entity_type}
+
+
+ Position:
+ Characters {entity.start}-{entity.end}
+
+
+ Confidence:
+ {entity.score.toFixed(2)}
+
+
+
+
+ {entity.recognition_metadata && (
+ <>
+
+ Recognizer:
+ {entity.recognition_metadata.recognizer_name}
+
+
+ Identifier:
+
+ {entity.recognition_metadata.recognizer_identifier}
+
+
+
+ )}
+ {entity.analysis_explanation && (
+
+ Explanation:
+ {entity.analysis_explanation}
+
+ )}
+
+
+
+ )}
+
+ );
+ })}
+
+ )}
+