From 363a4688a67af78f697050e5f66765a1250f55fa Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaan@berri.ai>
Date: Thu, 23 Apr 2026 15:18:29 -0700
Subject: [PATCH] =?UTF-8?q?feat(ui):=20update=20EvalViewer=20=E2=80=94=20t?=
 =?UTF-8?q?itle=20'LLM=20Judge=20Results',=20weighted=20score=20column,=20?=
 =?UTF-8?q?summary=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../view_logs/EvalViewer/EvalViewer.tsx       | 203 ++++++++++++++++++
 1 file changed, 203 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/components/view_logs/EvalViewer/EvalViewer.tsx

diff --git a/ui/litellm-dashboard/src/components/view_logs/EvalViewer/EvalViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/EvalViewer/EvalViewer.tsx
new file mode 100644
index 00000000000..e12c2917a00
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/EvalViewer/EvalViewer.tsx
@@ -0,0 +1,203 @@
+import React from "react";
+import { Card, Tag, Table, Typography, Space, Tooltip } from "antd";
+import { CheckCircleOutlined, CloseCircleOutlined, ExperimentOutlined } from "@ant-design/icons";
+
+const { Text } = Typography;
+
+interface EvalVerdict {
+  criterion_name: string;
+  score: number;
+  reasoning: string;
+  passed: boolean;
+  weight?: number;
+}
+
+interface EvalInformation {
+  eval_id?: string;
+  eval_name: string;
+  overall_score: number;
+  passed: boolean;
+  judge_model: string;
+  iteration?: number;
+  eval_error?: string | null;
+  verdicts?: EvalVerdict[];
+  threshold?: number;
+}
+
+interface EvalViewerProps {
+  data: EvalInformation | EvalInformation[];
+}
+
+export default function EvalViewer({ data }: EvalViewerProps) {
+  const entries: EvalInformation[] = Array.isArray(data) ? data : [data];
+
+  if (!entries.length) return null;
+
+  return (
+    <div className="mb-6">
+      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+        <ExperimentOutlined style={{ fontSize: 16, color: "#6366f1" }} />
+        <Text strong style={{ fontSize: 15 }}>
+          LLM Judge Results
+        </Text>
+      </div>
+
+      {entries.map((entry, idx) => (
+        <EvalEntryCard key={entry.eval_id || idx} entry={entry} />
+      ))}
+    </div>
+  );
+}
+
+function EvalEntryCard({ entry }: { entry: EvalInformation }) {
+  const passed = entry.passed;
+  const scoreColor = passed ? "#52c41a" : "#ff4d4f";
+
+  // Filter out synthetic "Overall" row the judge sometimes appends — it's already in the header
+  const verdicts = (entry.verdicts || []).filter(
+    (v) => (v.criterion_name || "").toLowerCase() !== "overall"
+  );
+
+  const columns = [
+    {
+      title: "Criterion",
+      dataIndex: "criterion_name",
+      key: "criterion_name",
+      width: 160,
+      render: (v: string) => <Text strong style={{ whiteSpace: "nowrap" }}>{v}</Text>,
+    },
+    {
+      title: "Weight",
+      dataIndex: "weight",
+      key: "weight",
+      width: 65,
+      render: (v: number) =>
+        v != null ? (
+          <Text type="secondary" style={{ fontSize: 12 }}>{v}%</Text>
+        ) : null,
+    },
+    {
+      title: "Score",
+      dataIndex: "score",
+      key: "score",
+      width: 65,
+      render: (v: number) => (
+        <Text style={{ color: v >= 70 ? "#52c41a" : v >= 50 ? "#faad14" : "#ff4d4f", fontWeight: 600 }}>
+          {v}
+        </Text>
+      ),
+    },
+    {
+      title: (
+        <Tooltip title="Score × Weight — how much each criterion contributes to the final score">
+          <span style={{ borderBottom: "1px dashed #aaa", cursor: "help" }}>Weighted</span>
+        </Tooltip>
+      ),
+      key: "weighted",
+      width: 75,
+      render: (_: unknown, row: EvalVerdict) => {
+        if (row.weight == null) return null;
+        const contrib = (row.score * row.weight) / 100;
+        return (
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            {contrib % 1 === 0 ? contrib : contrib.toFixed(1)}
+          </Text>
+        );
+      },
+    },
+    {
+      title: "Comment",
+      dataIndex: "reasoning",
+      key: "reasoning",
+      ellipsis: { showTitle: false },
+      render: (v: string) => (
+        <Tooltip title={v}>
+          <span style={{ fontSize: 12 }}>{v}</span>
+        </Tooltip>
+      ),
+    },
+  ];
+
+  return (
+    <Card
+      size="small"
+      className="mb-3"
+      style={{ borderLeft: `3px solid ${scoreColor}` }}
+      title={
+        <Space>
+          {passed ? (
+            <CheckCircleOutlined style={{ color: "#52c41a" }} />
+          ) : (
+            <CloseCircleOutlined style={{ color: "#ff4d4f" }} />
+          )}
+          <Text strong>{entry.eval_name}</Text>
+          <Tag color={passed ? "success" : "error"}>{passed ? "PASSED" : "FAILED"}</Tag>
+          <Tooltip title={`Weighted average of all criterion scores. Each criterion has a weight (%) set when the eval was created — higher-weight criteria count more toward the final score.`}>
+            <Text type="secondary" style={{ fontSize: 12, cursor: "help", borderBottom: "1px dashed #aaa" }}>
+              {entry.overall_score?.toFixed(0)} / 100
+              {entry.threshold != null && ` (threshold: ${entry.threshold})`}
+            </Text>
+          </Tooltip>
+        </Space>
+      }
+      extra={
+        <Space size="small">
+          {entry.judge_model && (
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              Judge: {entry.judge_model}
+            </Text>
+          )}
+          {entry.iteration != null && (
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              Iter: {entry.iteration + 1}
+            </Text>
+          )}
+        </Space>
+      }
+    >
+      {entry.eval_error && (
+        <Text type="warning" style={{ display: "block", marginBottom: 8, fontSize: 12 }}>
+          Judge error: {entry.eval_error}
+        </Text>
+      )}
+
+      {verdicts.length > 0 ? (
+        <Table
+          dataSource={verdicts}
+          columns={columns}
+          pagination={false}
+          size="small"
+          rowKey="criterion_name"
+          scroll={{ x: true }}
+          summary={() => {
+            const hasWeights = verdicts.some((v) => v.weight != null);
+            if (!hasWeights) return null;
+            const total = verdicts.reduce(
+              (sum, v) => sum + (v.weight != null ? (v.score * v.weight) / 100 : 0),
+              0
+            );
+            return (
+              <Table.Summary.Row>
+                <Table.Summary.Cell index={0}>
+                  <Text strong style={{ fontSize: 12 }}>Total</Text>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell index={1} />
+                <Table.Summary.Cell index={2} />
+                <Table.Summary.Cell index={3}>
+                  <Text strong style={{ fontSize: 12, color: scoreColor }}>
+                    {total % 1 === 0 ? total : total.toFixed(1)}
+                  </Text>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell index={4} />
+              </Table.Summary.Row>
+            );
+          }}
+        />
+      ) : (
+        <Text type="secondary" style={{ fontSize: 12 }}>
+          Score: {entry.overall_score?.toFixed(1)} — no per-criterion breakdown available.
+        </Text>
+      )}
+    </Card>
+  );
+}