Show all runs, not just completed

Author: cte

evals/apps/web/src/app/home.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useMemo, useState } from "react"
+import { useCallback, useState, useRef } from "react"
 import { useRouter } from "next/navigation"
 import Link from "next/link"
 import { Ellipsis, Rocket } from "lucide-react"
@@ -35,8 +35,7 @@ export function Home({ runs }: { runs: (Run & { taskMetrics: TaskMetrics | null
 	const router = useRouter()
 
 	const [deleteRunId, setDeleteRunId] = useState<number>()
-
-	const visibleRuns = useMemo(() => runs.filter((run) => run.taskMetrics !== null), [runs])
+	const continueRef = useRef<HTMLButtonElement>(null)
 
 	const onConfirmDelete = useCallback(async () => {
 		if (!deleteRunId) {
@@ -67,33 +66,43 @@ export function Home({ runs }: { runs: (Run & { taskMetrics: TaskMetrics | null
 					</TableRow>
 				</TableHeader>
 				<TableBody>
-					{visibleRuns.length ? (
-						visibleRuns.map(({ taskMetrics, ...run }) => (
+					{runs.length ? (
+						runs.map(({ taskMetrics, ...run }) => (
 							<TableRow key={run.id}>
 								<TableCell>{run.model}</TableCell>
 								<TableCell>{run.passed}</TableCell>
 								<TableCell>{run.failed}</TableCell>
-								<TableCell>{((run.passed / (run.passed + run.failed)) * 100).toFixed(1)}%</TableCell>
 								<TableCell>
-									<div className="flex items-center justify-evenly">
-										<div>{formatTokens(taskMetrics!.tokensIn)}</div>/
-										<div>{formatTokens(taskMetrics!.tokensOut)}</div>
-									</div>
+									{run.passed + run.failed > 0 && (
+										<span>{((run.passed / (run.passed + run.failed)) * 100).toFixed(1)}%</span>
+									)}
+								</TableCell>
+								<TableCell>
+									{taskMetrics && (
+										<div className="flex items-center justify-evenly">
+											<div>{formatTokens(taskMetrics.tokensIn)}</div>/
+											<div>{formatTokens(taskMetrics.tokensOut)}</div>
+										</div>
+									)}
 								</TableCell>
-								<TableCell>{formatCurrency(taskMetrics!.cost)}</TableCell>
-								<TableCell>{formatDuration(taskMetrics!.duration)}</TableCell>
+								<TableCell>{taskMetrics && formatCurrency(taskMetrics.cost)}</TableCell>
+								<TableCell>{taskMetrics && formatDuration(taskMetrics.duration)}</TableCell>
 								<TableCell>
 									<DropdownMenu>
 										<Button variant="ghost" size="icon" asChild>
 											<DropdownMenuTrigger>
 												<Ellipsis />
 											</DropdownMenuTrigger>
 										</Button>
-										<DropdownMenuContent>
+										<DropdownMenuContent align="end">
 											<DropdownMenuItem asChild>
 												<Link href={`/runs/${run.id}`}>View Tasks</Link>
 											</DropdownMenuItem>
-											<DropdownMenuItem onClick={() => setDeleteRunId(run.id)}>
+											<DropdownMenuItem
+												onClick={() => {
+													setDeleteRunId(run.id)
+													setTimeout(() => continueRef.current?.focus(), 0)
+												}}>
 												Delete
 											</DropdownMenuItem>
 										</DropdownMenuContent>
@@ -128,7 +137,9 @@ export function Home({ runs }: { runs: (Run & { taskMetrics: TaskMetrics | null
 					</AlertDialogHeader>
 					<AlertDialogFooter>
 						<AlertDialogCancel>Cancel</AlertDialogCancel>
-						<AlertDialogAction onClick={onConfirmDelete}>Continue</AlertDialogAction>
+						<AlertDialogAction ref={continueRef} onClick={onConfirmDelete}>
+							Continue
+						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>

evals/packages/db/src/queries/runs.ts

@@ -1,4 +1,4 @@
-import { desc, eq, sql, sum } from "drizzle-orm"
+import { desc, eq, inArray, sql, sum } from "drizzle-orm"
 
 import { RecordNotFoundError, RecordNotCreatedError } from "./errors.js"
 import type { InsertRun, UpdateRun } from "../schema.js"
@@ -85,21 +85,6 @@ export const finishRun = async (runId: number) => {
 }
 
 export const deleteRun = async (runId: number) => {
-	const tasks = await db.query.tasks.findMany({
-		where: eq(schema.tasks.runId, runId),
-		columns: { id: true, taskMetricsId: true },
-	})
-
-	const taskMetricsIds = tasks
-		.map(({ taskMetricsId }) => taskMetricsId)
-		.filter((id): id is number => id !== null && id !== undefined)
-
-	await db.delete(schema.tasks).where(eq(schema.tasks.runId, runId))
-
-	if (taskMetricsIds.length > 0) {
-		await db.delete(schema.taskMetrics).where(sql`${schema.taskMetrics.id} in (${sql.join(taskMetricsIds)})`)
-	}
-
 	const run = await db.query.runs.findFirst({
 		where: eq(schema.runs.id, runId),
 		columns: { taskMetricsId: true },
@@ -109,9 +94,19 @@ export const deleteRun = async (runId: number) => {
 		throw new RecordNotFoundError()
 	}
 
+	const tasks = await db.query.tasks.findMany({
+		where: eq(schema.tasks.runId, runId),
+		columns: { id: true, taskMetricsId: true },
+	})
+
+	await db.delete(schema.tasks).where(eq(schema.tasks.runId, runId))
 	await db.delete(schema.runs).where(eq(schema.runs.id, runId))
 
-	if (run.taskMetricsId) {
-		await db.delete(schema.taskMetrics).where(eq(schema.taskMetrics.id, run.taskMetricsId))
-	}
+	const taskMetricsIds = tasks
+		.map(({ taskMetricsId }) => taskMetricsId)
+		.filter((id): id is number => id !== null && id !== undefined)
+
+	taskMetricsIds.push(run.taskMetricsId ?? -1)
+
+	await db.delete(schema.taskMetrics).where(inArray(schema.taskMetrics.id, taskMetricsIds))
 }