Skip to content

Commit 38930cf

Browse files
allenzhou101allenzhou101
committed
show playground runs
1 parent 030a1a2 commit 38930cf

2 files changed

Lines changed: 158 additions & 14 deletions

File tree

‎packages/playground/app/experiments/[name]/page.tsx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import Link from "next/link";
2+
import { Card, CardContent } from "@/components/ui/card";
3+
import { Badge } from "@/components/ui/badge";
4+
import { getExperiment, getExperimentDetail } from "@/lib/data";
5+
import { notFound } from "next/navigation";
6+
7+
export const dynamic = "force-dynamic";
8+
9+
export default async function ExperimentRunsPage({
10+
params,
11+
}: {
12+
params: Promise<{ name: string }>;
13+
}) {
14+
const { name } = await params;
15+
const decodedName = decodeURIComponent(name);
16+
const experiment = getExperiment(decodedName);
17+
18+
if (!experiment) {
19+
notFound();
20+
}
21+
22+
// Get details for each timestamp to show pass rates
23+
const runsWithDetails = experiment.timestamps.map((timestamp) => {
24+
const detail = getExperimentDetail(decodedName, timestamp);
25+
if (!detail) {
26+
return { timestamp, passRate: null, totalRuns: 0, passedRuns: 0 };
27+
}
28+
29+
const totalRuns = detail.evals.reduce((sum, e) => sum + e.totalRuns, 0);
30+
const passedRuns = detail.evals.reduce((sum, e) => sum + e.passedRuns, 0);
31+
const passRate = totalRuns > 0 ? (passedRuns / totalRuns) * 100 : 0;
32+
33+
return {
34+
timestamp,
35+
passRate,
36+
totalRuns,
37+
passedRuns,
38+
evalCount: detail.evals.length,
39+
};
40+
});
41+
42+
return (
43+
<div className="space-y-6">
44+
<div>
45+
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
46+
<Link href="/experiments" className="hover:text-foreground">
47+
Experiments
48+
</Link>
49+
<span>/</span>
50+
<span>{decodedName}</span>
51+
</div>
52+
<h1 className="text-2xl font-bold tracking-tight">{decodedName}</h1>
53+
<p className="text-muted-foreground mt-1">
54+
All runs for this experiment ({experiment.timestamps.length} total)
55+
</p>
56+
</div>
57+
58+
<Card>
59+
<CardContent className="pt-0">
60+
<div>
61+
{/* Header */}
62+
<div className="grid grid-cols-[auto_1fr_auto_auto] gap-4 px-3 py-2 text-xs text-muted-foreground font-medium border-b border-border">
63+
<span className="w-8">#</span>
64+
<span>Timestamp</span>
65+
<span className="w-24">Pass Rate</span>
66+
<span className="w-32">Evals</span>
67+
</div>
68+
{/* Rows */}
69+
{runsWithDetails.map((run, index) => (
70+
<Link
71+
key={run.timestamp}
72+
href={`/experiments/${encodeURIComponent(decodedName)}/${encodeURIComponent(run.timestamp)}`}
73+
className="grid grid-cols-[auto_1fr_auto_auto] gap-4 items-center px-3 py-2.5 cursor-pointer transition-colors hover:bg-muted rounded-md"
74+
>
75+
<span className="w-8 text-muted-foreground">
76+
{runsWithDetails.length - index}
77+
</span>
78+
<span className="font-mono text-sm">
79+
{formatTimestamp(run.timestamp)}
80+
</span>
81+
<span className="w-24">
82+
{run.passRate !== null ? (
83+
<span className="flex items-center gap-2">
84+
<Badge
85+
variant={
86+
run.passRate === 100
87+
? "default"
88+
: run.passRate >= 50
89+
? "secondary"
90+
: "destructive"
91+
}
92+
>
93+
{run.passRate.toFixed(0)}%
94+
</Badge>
95+
<span className="text-xs text-muted-foreground">
96+
{run.passedRuns}/{run.totalRuns}
97+
</span>
98+
</span>
99+
) : (
100+
<span className="text-muted-foreground">--</span>
101+
)}
102+
</span>
103+
<span className="w-32 text-sm text-muted-foreground">
104+
{run.evalCount ?? 0} eval{run.evalCount !== 1 ? "s" : ""}
105+
</span>
106+
</Link>
107+
))}
108+
</div>
109+
</CardContent>
110+
</Card>
111+
</div>
112+
);
113+
}
114+
115+
function formatTimestamp(ts: string): string {
116+
try {
117+
const isoString = ts.replace(/T(\d{2})-(\d{2})-(\d{2})/, "T$1:$2:$3");
118+
const date = new Date(isoString);
119+
if (isNaN(date.getTime())) return ts;
120+
return date.toLocaleString();
121+
} catch {
122+
return ts;
123+
}
124+
}

‎packages/playground/components/ExperimentList.tsx‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,31 @@ export function ExperimentList({ experiments, total, showAll }: ExperimentListPr
4646
{/* Rows */}
4747
<ShowMore total={total} showAllHref={showAll ? undefined : "/experiments?all"}>
4848
{experiments.map((exp) => (
49-
<Link
49+
<div
5050
key={exp.name}
51-
href={
52-
exp.latestTimestamp
53-
? `/experiments/${encodeURIComponent(exp.name)}/${encodeURIComponent(exp.latestTimestamp)}`
54-
: "#"
55-
}
56-
className="grid grid-cols-[1fr_auto_auto_auto] gap-4 items-center px-3 py-2.5 cursor-pointer transition-colors hover:bg-muted rounded-md"
51+
className="grid grid-cols-[1fr_auto_auto_auto] gap-4 items-center px-3 py-2.5 transition-colors hover:bg-muted rounded-md"
5752
>
58-
<span className="font-medium truncate">{exp.name}</span>
59-
<span className="w-12 text-right text-muted-foreground">{exp.timestamps.length}</span>
60-
<span className="w-24">
53+
<Link
54+
href={`/experiments/${encodeURIComponent(exp.name)}`}
55+
className="font-medium truncate hover:underline"
56+
>
57+
{exp.name}
58+
</Link>
59+
<Link
60+
href={`/experiments/${encodeURIComponent(exp.name)}`}
61+
className="w-12 text-right text-muted-foreground hover:text-foreground hover:underline"
62+
title="View all runs"
63+
>
64+
{exp.timestamps.length}
65+
</Link>
66+
<Link
67+
href={
68+
exp.latestTimestamp
69+
? `/experiments/${encodeURIComponent(exp.name)}/${encodeURIComponent(exp.latestTimestamp)}`
70+
: "#"
71+
}
72+
className="w-24 block"
73+
>
6174
{exp.latestPassRate !== undefined ? (
6275
<span className="flex items-center gap-2">
6376
<Badge
@@ -78,11 +91,18 @@ export function ExperimentList({ experiments, total, showAll }: ExperimentListPr
7891
) : (
7992
<span className="text-muted-foreground">--</span>
8093
)}
81-
</span>
82-
<span className="w-44 text-xs text-muted-foreground">
94+
</Link>
95+
<Link
96+
href={
97+
exp.latestTimestamp
98+
? `/experiments/${encodeURIComponent(exp.name)}/${encodeURIComponent(exp.latestTimestamp)}`
99+
: "#"
100+
}
101+
className="w-44 text-xs text-muted-foreground hover:text-foreground"
102+
>
83103
{exp.latestTimestamp ? formatTimestamp(exp.latestTimestamp) : "--"}
84-
</span>
85-
</Link>
104+
</Link>
105+
</div>
86106
))}
87107
</ShowMore>
88108
</div>

0 commit comments

Comments
 (0)