("conversation");
const isRunning = detail.status === "running";
const scoreLabel =
@@ -109,14 +113,21 @@ export function DetailPanel({ detail, onClose }: Props) {
>
Rubric
+ {evalsVisible && (
+ setTab("evals")}
+ >
+ Eval scores
+
+ )}
- {tab === "conversation" ? (
-
diff --git a/dashboard/src/components/EvalScoresView.tsx b/dashboard/src/components/EvalScoresView.tsx
new file mode 100644
index 0000000..301e6dd
--- /dev/null
+++ b/dashboard/src/components/EvalScoresView.tsx
@@ -0,0 +1,395 @@
+import {
+ CheckCircle2,
+ ListOrdered,
+ Network,
+ Sparkles,
+ Target,
+ XCircle,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/utils.ts";
+import type {
+ DedupMetricScore,
+ DemotionMetricScore,
+ ProcedureMetricScore,
+ RetrievalMetricScore,
+ ScenarioDetail,
+} from "../types.ts";
+
+interface Props {
+ detail: ScenarioDetail;
+}
+
+type AnyMetric =
+ | RetrievalMetricScore
+ | DemotionMetricScore
+ | ProcedureMetricScore
+ | DedupMetricScore;
+
+function formatNumber(value: number): string {
+ if (!Number.isFinite(value)) return "n/a";
+ return value.toFixed(3).replace(/0+$/, "").replace(/\.$/, "");
+}
+
+function pct(value: number): string {
+ if (!Number.isFinite(value)) return "n/a";
+ return `${Math.round(value * 100)}%`;
+}
+
+function MetricBar({ value }: { value: number }) {
+ const clamped = Math.max(0, Math.min(1, value));
+ return (
+
+ );
+}
+
+function PassPill({ passed }: { passed: boolean }) {
+ return passed ? (
+
+
+ ) : (
+
+
+ );
+}
+
+function SectionLabel({
+ children,
+ count,
+}: {
+ children: ReactNode;
+ count?: number | string;
+}) {
+ return (
+
+
+ {children}
+
+ {count != null && (
+
+ {count}
+
+ )}
+
+
+
+ {m.metric}
+
+
+
+
+ {formatNumber(m.value)}
+
+
+ ×{formatNumber(m.weight)}
+
+
+
+
+ {icon}
+
+
+
{title}
+ {subtitle && (
+
{subtitle}
+ )}
+
+
+
+
+ {pct(weightedScore)}
+
+ {" "}
+ / {pct(passThreshold)}
+
+
+
+ source: {source}
+
+
+
+
+ );
+}
+
+function aggregate(metrics: AnyMetric[]) {
+ if (metrics.length === 0) {
+ return {
+ weightedScore: 0,
+ passThreshold: 0,
+ passed: false,
+ source: "missing",
+ };
+ }
+ const first = metrics[0];
+ return {
+ weightedScore: first.weighted_score,
+ passThreshold: first.pass_threshold,
+ passed: first.passed,
+ source: first.source,
+ };
+}
+
+function RetrievalSection({ metrics }: { metrics: RetrievalMetricScore[] }) {
+ if (metrics.length === 0) return null;
+ const agg = aggregate(metrics);
+ const first = metrics[0];
+ return (
+
+
+ {metrics.map((m, i) => (
+
+
+ );
+}
+
+function DemotionSection({ metrics }: { metrics: DemotionMetricScore[] }) {
+ if (metrics.length === 0) return null;
+ const agg = aggregate(metrics);
+ const first = metrics[0];
+ const subtitleBits: string[] = [];
+ if (first) {
+ subtitleBits.push(
+ `timestamp violations: ${first.timestamp_violation_count}`,
+ );
+ if (first.cascade_bounded === true) subtitleBits.push("cascade: bounded");
+ else if (first.cascade_bounded === false)
+ subtitleBits.push("cascade: RUNAWAY");
+ }
+ return (
+
+
+ {metrics.map((m, i) => (
+
+
+ );
+}
+
+function ProcedureSection({ metrics }: { metrics: ProcedureMetricScore[] }) {
+ if (metrics.length === 0) return null;
+ const agg = aggregate(metrics);
+ const first = metrics[0];
+ const predicted = Array.isArray(first?.predicted)
+ ? (first.predicted as string[])
+ : [];
+ const golden = Array.isArray(first?.golden) ? (first.golden as string[]) : [];
+ return (
+
+
+ {metrics.map((m, i) => (
+
+ {(predicted.length > 0 || golden.length > 0) && (
+
+
+ )}
+
+ );
+}
+
+function StepList({ title, items }: { title: string; items: string[] }) {
+ return (
+
+
+ {title}
+
+ {items.length === 0 ? (
+
(empty)
+ ) : (
+
+ {items.map((step, i) => (
+
+ {i + 1}.
+ {step}
+
+ ))}
+
+ )}
+
+
+ {metrics.map((m, i) => (
+
+ {(predicted.length > 0 || golden.length > 0) && (
+
+
+ )}
+
+ );
+}
+
+function ClusterList({
+ title,
+ clusters,
+}: {
+ title: string;
+ clusters: string[][];
+}) {
+ return (
+
+
+ {title}
+
+ {clusters.length === 0 ? (
+
(empty)
+ ) : (
+
+ {clusters.map((cluster, i) => (
+
+ {cluster.join(", ")}
+
+ ))}
+
+ )}
+
+
+
+ No quantitative eval scores
+
+
+ This scenario didn't declare a retrieval, demotion, procedure, or
+ dedup block. Add one to its YAML to get IR-style metrics here.
+
+
["components"] = {
+// Re-type react-markdown's `components` prop against the project's React 19
+// JSX namespace. Upstream react-markdown ships its own bundled React types,
+// which collide with the project's @types/react@19. The component handlers
+// themselves are unchanged — we just remap the JSX intrinsic table.
+type MarkdownComponents = {
+ [Key in keyof JSX.IntrinsicElements]?: ComponentType<
+ JSX.IntrinsicElements[Key]
+ >;
+};
+
+const components: MarkdownComponents = {
p: ({ className, ...props }) => (
["components"] = {
function MarkdownInner({ children, className }: MarkdownProps) {
return (
-
+
{children}
diff --git a/dashboard/src/types.ts b/dashboard/src/types.ts
index ab94f17..c119abe 100644
--- a/dashboard/src/types.ts
+++ b/dashboard/src/types.ts
@@ -55,6 +55,61 @@ export interface DimensionScore {
evidence?: string[];
}
+export interface RetrievalMetricScore {
+ metric: string;
+ value: number;
+ weight: number;
+ k: number;
+ weighted_score: number;
+ pass_threshold: number;
+ passed: boolean;
+ total_relevant: number;
+ total_returned: number;
+ hit_count: number;
+ forbidden_hits: number;
+ source: string;
+ returned: unknown;
+}
+
+export interface DemotionMetricScore {
+ metric: string;
+ value: number;
+ weight: number;
+ weighted_score: number;
+ pass_threshold: number;
+ passed: boolean;
+ timestamp_violation_count: number;
+ cascade_bounded: boolean | null;
+ source: string;
+ observed: unknown;
+ expected: unknown;
+}
+
+export interface ProcedureMetricScore {
+ metric: string;
+ value: number;
+ weight: number;
+ weighted_score: number;
+ pass_threshold: number;
+ passed: boolean;
+ source: string;
+ predicted: unknown;
+ golden: unknown;
+}
+
+export interface DedupMetricScore {
+ metric: string;
+ value: number;
+ weight: number;
+ weighted_score: number;
+ pass_threshold: number;
+ passed: boolean;
+ item_count: number;
+ source: string;
+ predicted: unknown;
+ golden: unknown;
+}
+
export interface ScenarioDetail {
scenario_id: string;
scenario_name: string;
@@ -76,6 +131,10 @@ export interface ScenarioDetail {
target_events?: Array>;
checkpoints?: Checkpoint[];
judge_dimension_scores?: DimensionScore[];
+ retrieval_scores?: RetrievalMetricScore[];
+ demotion_scores?: DemotionMetricScore[];
+ procedure_scores?: ProcedureMetricScore[];
+ dedup_scores?: DedupMetricScore[];
expectations?: unknown;
error?: unknown;
counts?: {
diff --git a/dashboard/src/views/PresetEditorView.tsx b/dashboard/src/views/PresetEditorView.tsx
index 3c9a2a0..ba81591 100644
--- a/dashboard/src/views/PresetEditorView.tsx
+++ b/dashboard/src/views/PresetEditorView.tsx
@@ -311,7 +311,10 @@ export function PresetEditorView({
onChange={(e) => setRepeat(Number(e.currentTarget.value))}
/>