@vercel/agent-eval-playground 0.0.1

package/components/ExperimentDetail.tsx

@@ -0,0 +1,162 @@
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { RunResultCard } from "@/components/RunResultCard";
+
+interface EvalDetail {
+  name: string;
+  totalRuns: number;
+  passedRuns: number;
+  passRate: number;
+  meanDuration: number;
+  runs: { name: string; result: RunResult | null }[];
+}
+
+interface RunResult {
+  status: "passed" | "failed";
+  error?: string;
+  duration: number;
+  o11y?: {
+    totalToolCalls: number;
+    thinkingBlocks: number;
+    errors: string[];
+  };
+}
+
+interface ExperimentDetailData {
+  name: string;
+  timestamp: string;
+  evals: EvalDetail[];
+}
+
+interface ExperimentDetailProps {
+  data: ExperimentDetailData;
+}
+
+export function ExperimentDetail({ data }: ExperimentDetailProps) {
+  const totalEvals = data.evals.length;
+  const passedEvals = data.evals.filter(
+    (e) => e.passedRuns === e.totalRuns
+  ).length;
+  const overallPassRate =
+    data.evals.reduce((sum, e) => sum + e.passRate, 0) / (totalEvals || 1);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
+          <Link href="/experiments" className="cursor-pointer hover:underline underline-offset-4">
+            Experiments
+          </Link>
+          <span>/</span>
+          <span>{data.name}</span>
+          <span>/</span>
+          <span>{formatTimestamp(data.timestamp)}</span>
+        </div>
+        <h1 className="text-2xl font-bold tracking-tight">{data.name}</h1>
+      </div>
+
+      {/* Summary cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="py-4 px-4">
+            <div className="text-xs text-muted-foreground">
+              Overall Pass Rate
+            </div>
+            <div className="text-2xl font-bold mt-1">
+              {overallPassRate.toFixed(0)}%
+            </div>
+            <Progress value={overallPassRate} className="mt-2 h-1.5" />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="py-4 px-4">
+            <div className="text-xs text-muted-foreground">Evals</div>
+            <div className="text-2xl font-bold mt-1">
+              {passedEvals}/{totalEvals}
+            </div>
+            <div className="text-xs text-muted-foreground mt-1">passed</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="py-4 px-4">
+            <div className="text-xs text-muted-foreground">Avg Duration</div>
+            <div className="text-2xl font-bold mt-1">
+              {(
+                data.evals.reduce((s, e) => s + e.meanDuration, 0) /
+                (totalEvals || 1)
+              ).toFixed(1)}
+              s
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="py-4 px-4">
+            <div className="text-xs text-muted-foreground">Timestamp</div>
+            <div className="text-sm font-medium mt-1">
+              {formatTimestamp(data.timestamp)}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Separator />
+
+      {/* Per-eval breakdown */}
+      <div className="space-y-6">
+        {data.evals.map((evalDetail) => (
+          <Card key={evalDetail.name}>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <CardTitle className="text-lg">{evalDetail.name}</CardTitle>
+                  <Badge
+                    variant={
+                      evalDetail.passedRuns === evalDetail.totalRuns
+                        ? "default"
+                        : "destructive"
+                    }
+                  >
+                    {evalDetail.passedRuns}/{evalDetail.totalRuns} passed
+                  </Badge>
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  avg {evalDetail.meanDuration.toFixed(1)}s
+                </div>
+              </div>
+              <Progress value={evalDetail.passRate} className="h-1.5 mt-2" />
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {evalDetail.runs.map((run) => (
+                  <RunResultCard
+                    key={run.name}
+                    runName={run.name}
+                    result={run.result}
+                    experiment={data.name}
+                    timestamp={data.timestamp}
+                    evalName={evalDetail.name}
+                  />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function formatTimestamp(ts: string): string {
+  try {
+    const isoString = ts.replace(/T(\d{2})-(\d{2})-(\d{2})/, "T$1:$2:$3");
+    const date = new Date(isoString);
+    if (isNaN(date.getTime())) return ts;
+    return date.toLocaleString();
+  } catch {
+    return ts;
+  }
+}

package/components/ExperimentList.tsx

@@ -0,0 +1,103 @@
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { ShowMore } from "@/components/ShowMore";
+
+interface ExperimentInfo {
+  name: string;
+  timestamps: string[];
+  latestTimestamp: string | null;
+  latestPassRate?: number;
+  latestTotalRuns?: number;
+  latestPassedRuns?: number;
+}
+
+interface ExperimentListProps {
+  experiments: ExperimentInfo[];
+  total: number;
+  showAll: boolean;
+}
+
+export function ExperimentList({ experiments, total, showAll }: ExperimentListProps) {
+  if (experiments.length === 0) {
+    return (
+      <Card>
+        <CardContent className="py-12 text-center">
+          <p className="text-muted-foreground text-lg">No experiments found</p>
+          <p className="text-muted-foreground text-sm mt-2">
+            Run an experiment with <code className="text-foreground bg-muted px-1.5 py-0.5 rounded text-xs">agent-eval &lt;config&gt;</code> to see results here.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent className="pt-0">
+        <div>
+          {/* Header */}
+          <div className="grid grid-cols-[1fr_auto_auto_auto] gap-4 px-3 py-2 text-xs text-muted-foreground font-medium border-b border-border">
+            <span>Name</span>
+            <span className="w-12 text-right">Runs</span>
+            <span className="w-24">Pass Rate</span>
+            <span className="w-44">Latest Run</span>
+          </div>
+          {/* Rows */}
+          <ShowMore total={total} showAllHref={showAll ? undefined : "/experiments?all"}>
+            {experiments.map((exp) => (
+              <Link
+                key={exp.name}
+                href={
+                  exp.latestTimestamp
+                    ? `/experiments/${encodeURIComponent(exp.name)}/${encodeURIComponent(exp.latestTimestamp)}`
+                    : "#"
+                }
+                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"
+              >
+                <span className="font-medium truncate">{exp.name}</span>
+                <span className="w-12 text-right text-muted-foreground">{exp.timestamps.length}</span>
+                <span className="w-24">
+                  {exp.latestPassRate !== undefined ? (
+                    <span className="flex items-center gap-2">
+                      <Badge
+                        variant={
+                          exp.latestPassRate === 100
+                            ? "default"
+                            : exp.latestPassRate >= 50
+                              ? "secondary"
+                              : "destructive"
+                        }
+                      >
+                        {exp.latestPassRate.toFixed(0)}%
+                      </Badge>
+                      <span className="text-xs text-muted-foreground">
+                        {exp.latestPassedRuns}/{exp.latestTotalRuns}
+                      </span>
+                    </span>
+                  ) : (
+                    <span className="text-muted-foreground">--</span>
+                  )}
+                </span>
+                <span className="w-44 text-xs text-muted-foreground">
+                  {exp.latestTimestamp ? formatTimestamp(exp.latestTimestamp) : "--"}
+                </span>
+              </Link>
+            ))}
+          </ShowMore>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function formatTimestamp(ts: string): string {
+  try {
+    const isoString = ts.replace(/T(\d{2})-(\d{2})-(\d{2})/, "T$1:$2:$3");
+    const date = new Date(isoString);
+    if (isNaN(date.getTime())) return ts;
+    return date.toLocaleString();
+  } catch {
+    return ts;
+  }
+}

package/components/O11ySummary.tsx

@@ -0,0 +1,114 @@
+import { Badge } from "@/components/ui/badge";
+import type { TranscriptSummary, ToolName } from "@/lib/types";
+
+interface O11ySummaryProps {
+  summary: TranscriptSummary;
+}
+
+const TOOL_LABELS: Record<ToolName, string> = {
+  file_read: "File Read",
+  file_write: "File Write",
+  file_edit: "File Edit",
+  shell: "Shell",
+  web_fetch: "Web Fetch",
+  web_search: "Web Search",
+  glob: "Glob",
+  grep: "Grep",
+  list_dir: "List Dir",
+  agent_task: "Agent Task",
+  unknown: "Unknown",
+};
+
+export function O11ySummary({ summary }: O11ySummaryProps) {
+  const toolEntries = Object.entries(summary.toolCalls)
+    .filter(([, count]) => count > 0)
+    .sort(([, a], [, b]) => b - a);
+
+  return (
+    <div className="space-y-3 rounded-lg bg-muted/50 p-4">
+      {/* Inline stats */}
+      <div className="flex flex-wrap gap-x-5 gap-y-1 text-xs">
+        <span><span className="text-muted-foreground">Turns</span> <span className="font-medium">{summary.totalTurns}</span></span>
+        <span><span className="text-muted-foreground">Tool Calls</span> <span className="font-medium">{summary.totalToolCalls}</span></span>
+        <span><span className="text-muted-foreground">Thinking</span> <span className="font-medium">{summary.thinkingBlocks}</span></span>
+        <span>
+          <span className="text-muted-foreground">Errors</span>{" "}
+          <span className={`font-medium ${summary.errors.length > 0 ? "text-destructive" : ""}`}>{summary.errors.length}</span>
+        </span>
+      </div>
+
+      {/* Tool breakdown - inline */}
+      {toolEntries.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {toolEntries.map(([tool, count]) => (
+            <Badge key={tool} variant="secondary" className="text-xs font-normal">
+              {TOOL_LABELS[tool as ToolName] ?? tool} <span className="font-mono ml-1">{count}</span>
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {/* Files - inline */}
+      {(summary.filesRead.length > 0 || summary.filesModified.length > 0) && (
+        <div className="space-y-1.5 text-xs">
+          {summary.filesRead.length > 0 && (
+            <div className="flex flex-wrap gap-1 items-center">
+              <span className="text-muted-foreground shrink-0">Read ({summary.filesRead.length})</span>
+              {summary.filesRead.slice(0, 10).map((f) => (
+                <Badge key={f} variant="outline" className="text-xs font-mono font-normal">
+                  {f}
+                </Badge>
+              ))}
+              {summary.filesRead.length > 10 && (
+                <span className="text-muted-foreground">+{summary.filesRead.length - 10} more</span>
+              )}
+            </div>
+          )}
+          {summary.filesModified.length > 0 && (
+            <div className="flex flex-wrap gap-1 items-center">
+              <span className="text-muted-foreground shrink-0">Modified ({summary.filesModified.length})</span>
+              {summary.filesModified.slice(0, 10).map((f) => (
+                <Badge key={f} variant="outline" className="text-xs font-mono font-normal">
+                  {f}
+                </Badge>
+              ))}
+              {summary.filesModified.length > 10 && (
+                <span className="text-muted-foreground">+{summary.filesModified.length - 10} more</span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Shell commands - compact */}
+      {summary.shellCommands.length > 0 && (
+        <div className="space-y-1 text-xs">
+          <span className="text-muted-foreground">Shell ({summary.shellCommands.length})</span>
+          <div className="flex flex-wrap gap-1">
+            {summary.shellCommands.slice(0, 10).map((cmd, i) => (
+              <Badge
+                key={i}
+                variant={cmd.exitCode === 0 ? "outline" : "destructive"}
+                className="text-xs font-mono font-normal max-w-64 truncate"
+              >
+                {cmd.command}
+              </Badge>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Errors - compact */}
+      {summary.errors.length > 0 && (
+        <div className="space-y-1 text-xs">
+          <span className="text-destructive font-medium">Errors ({summary.errors.length})</span>
+          {summary.errors.map((err, i) => (
+            <div key={i} className="text-xs font-mono text-destructive truncate">
+              {err}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/RunResultCard.tsx

@@ -0,0 +1,72 @@
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+
+
+interface RunResult {
+  status: "passed" | "failed";
+  error?: string;
+  duration: number;
+  o11y?: {
+    totalToolCalls: number;
+    thinkingBlocks: number;
+    errors: string[];
+  };
+}
+
+interface RunResultCardProps {
+  runName: string;
+  result: RunResult | null;
+  experiment: string;
+  timestamp: string;
+  evalName: string;
+}
+
+export function RunResultCard({
+  runName,
+  result,
+  experiment,
+  timestamp,
+  evalName,
+}: RunResultCardProps) {
+  if (!result) {
+    return (
+      <Card className="opacity-50">
+        <CardContent className="py-3 px-4">
+          <span className="text-sm text-muted-foreground">{runName}: No result</span>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Link
+      href={`/transcript/${encodeURIComponent(experiment)}/${encodeURIComponent(timestamp)}/${encodeURIComponent(evalName)}/${encodeURIComponent(runName)}`}
+      className="block cursor-pointer"
+    >
+      <Card className="transition-colors hover:bg-muted">
+        <CardContent className="py-3 px-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <span className="text-sm font-medium">{runName}</span>
+            <Badge
+              variant={result.status === "passed" ? "default" : "destructive"}
+            >
+              {result.status}
+            </Badge>
+            {result.error && (
+              <span className="text-xs text-destructive truncate max-w-64">
+                {result.error}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            {result.o11y && (
+              <span>{result.o11y.totalToolCalls} tool calls</span>
+            )}
+            <span>{result.duration.toFixed(1)}s</span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}

package/components/ShowMore.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+const DEFAULT_LIMIT = 50;
+
+interface ShowMoreProps {
+  children: React.ReactNode[];
+  limit?: number;
+  /** Total count of items (when server limits the fetch). Shows a Link instead of client-side toggle. */
+  total?: number;
+  /** URL to navigate to when showing all items (server-driven mode). */
+  showAllHref?: string;
+  className?: string;
+}
+
+export function ShowMore({
+  children,
+  limit = DEFAULT_LIMIT,
+  total,
+  showAllHref,
+  className,
+}: ShowMoreProps) {
+  const [visibleCount, setVisibleCount] = useState(limit);
+
+  // Server-driven: fewer children than total, link to load all from server
+  const serverLimited = total !== undefined && total > children.length;
+
+  // Client-driven: all children passed, show in increments
+  const clientLimited = !serverLimited && children.length > visibleCount;
+
+  const visible = clientLimited ? children.slice(0, visibleCount) : children;
+
+  const totalCount = total ?? children.length;
+  const shownCount = visible.length;
+  const remainingCount = totalCount - shownCount;
+
+  return (
+    <div className={className}>
+      {visible}
+      {serverLimited && showAllHref && (
+        <Link
+          href={showAllHref}
+          className="block w-full py-2 text-center text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+        >
+          Show more ({remainingCount} remaining)
+        </Link>
+      )}
+      {clientLimited && (
+        <button
+          onClick={() => setVisibleCount((c) => c + limit)}
+          className="w-full py-2 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+        >
+          Show more ({remainingCount} remaining)
+        </button>
+      )}
+    </div>
+  );
+}

package/components/TranscriptPage.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { Card, CardContent } from "@/components/ui/card";
+import { TranscriptViewer } from "@/components/TranscriptViewer";
+import type { Transcript } from "@/lib/types";
+
+interface TranscriptPageProps {
+  experiment: string;
+  timestamp: string;
+  evalName: string;
+  run: string;
+  transcript: Transcript;
+}
+
+export function TranscriptPage({
+  experiment,
+  timestamp,
+  evalName,
+  run,
+  transcript,
+}: TranscriptPageProps) {
+  return (
+    <div className="space-y-4">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Link href="/experiments" className="cursor-pointer hover:underline underline-offset-4">
+          Experiments
+        </Link>
+        <span>/</span>
+        <Link
+          href={`/experiments/${encodeURIComponent(experiment)}/${encodeURIComponent(timestamp)}`}
+          className="cursor-pointer hover:underline underline-offset-4"
+        >
+          {experiment}
+        </Link>
+        <span>/</span>
+        <span>{evalName}</span>
+        <span>/</span>
+        <span>{run}</span>
+      </div>
+
+      <h1 className="text-2xl font-bold tracking-tight">Transcript</h1>
+
+      <TranscriptViewer transcript={transcript} />
+    </div>
+  );
+}