Add option to kill run

Author: cte

evals/apps/web/package.json

@@ -32,6 +32,7 @@
 		"next": "15.2.2",
 		"next-themes": "^0.4.6",
 		"p-map": "^7.0.3",
+		"ps-tree": "^1.2.0",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
 		"react-hook-form": "^7.54.2",
@@ -46,6 +47,7 @@
 		"@evals/eslint-config": "workspace:^",
 		"@evals/typescript-config": "workspace:^",
 		"@tailwindcss/postcss": "^4",
+		"@types/ps-tree": "^1.1.6",
 		"@types/react": "^19",
 		"@types/react-dom": "^19",
 		"tailwindcss": "^4"

evals/apps/web/src/app/api/runs/[id]/stream/route.ts

@@ -16,7 +16,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
 	const client = new IpcClient(run.socketPath, () => {})
 
 	const write = async (data: string | object) => {
-		console.log(`[stream#${requestId}] write`, data)
+		// console.log(`[stream#${requestId}] write`, data)
 		const success = await stream.write(data)
 
 		if (!success) {

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

@@ -6,7 +6,5 @@ export const dynamic = "force-dynamic"
 
 export default async function Page() {
 	const runs = await getRuns()
-	console.log(runs)
-
 	return <Home runs={runs} />
 }

evals/apps/web/src/app/runs/[id]/connection-status.tsx

@@ -1,34 +1,69 @@
+"use client"
+
+import { useCallback } from "react"
+import { Skull } from "lucide-react"
+
+import { killProcessTree } from "@/lib/server/processes"
 import { EventSourceStatus } from "@/hooks/use-event-source"
+import { useProcessList } from "@/hooks/use-process-tree"
 import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui"
 
 type ConnectionStatusProps = {
 	status: EventSourceStatus
 	pid: number | null
 }
 
-export const ConnectionStatus = ({ status, pid }: ConnectionStatusProps) => (
-	<div className="flex items-center">
-		<div className="flex flex-col items-end gap-1 font-mono text-xs border-r border-dotted pr-4 mr-4">
-			<div>
-				Status: <span className="capitalize">{status}</span>
+export const ConnectionStatus = (connectionStatus: ConnectionStatusProps) => {
+	const { data: pids, isLoading } = useProcessList(connectionStatus.pid)
+	const status = isLoading ? "loading" : pids === null ? "dead" : connectionStatus.status
+
+	const onKill = useCallback(async () => {
+		if (connectionStatus.pid) {
+			await killProcessTree(connectionStatus.pid)
+			window.location.reload()
+		}
+	}, [connectionStatus.pid])
+
+	return (
+		<div>
+			<div className="flex items-center gap-2">
+				<div className="flex items-center gap-2">
+					<div>Status:</div>
+					<div className="capitalize">{status}</div>
+				</div>
+				<div className="relative">
+					<div
+						className={cn("absolute size-2.5 rounded-full opacity-50 animate-ping", {
+							"bg-gray-500": status === "loading",
+							"bg-green-500": status === "connected",
+							"bg-amber-500": status === "waiting",
+							"bg-rose-500": status === "error" || status === "dead",
+						})}
+					/>
+					<div
+						className={cn("size-2.5 rounded-full", {
+							"bg-gray-500": status === "loading",
+							"bg-green-500": status === "connected",
+							"bg-amber-500": status === "waiting",
+							"bg-rose-500": status === "error" || status === "dead",
+						})}
+					/>
+				</div>
+			</div>
+			<div className="flex items-center gap-2">
+				<div>PIDs:</div>
+				<div className="font-mono text-sm">{connectionStatus.pid}</div>
+				{status === "connected" && (
+					<>
+						<div className="font-mono text-sm text-muted-foreground">{pids?.join(" ")}</div>
+						<Button variant="ghost" size="sm" onClick={onKill}>
+							Kill
+							<Skull />
+						</Button>
+					</>
+				)}
 			</div>
-			<div>PID: {pid}</div>
-		</div>
-		<div className="relative">
-			<div
-				className={cn("absolute size-2.5 rounded-full opacity-50 animate-ping", {
-					"bg-green-500": status === "connected",
-					"bg-amber-500": status === "waiting",
-					"bg-rose-500": status === "error",
-				})}
-			/>
-			<div
-				className={cn("size-2.5 rounded-full", {
-					"bg-green-500": status === "connected",
-					"bg-amber-500": status === "waiting",
-					"bg-rose-500": status === "error",
-				})}
-			/>
 		</div>
-	</div>
-)
+	)
+}

evals/apps/web/src/app/runs/[id]/run.tsx

@@ -13,6 +13,7 @@ import {
 	DrawerHeader,
 	DrawerTitle,
 	ScrollArea,
+	Separator,
 	Table,
 	TableBody,
 	TableCell,
@@ -44,10 +45,13 @@ export function Run({ run }: { run: db.Run }) {
 
 	return (
 		<>
-			<div className="flex flex-col gap-2">
-				<div>
-					<div>{run.model}</div>
-					{run.description && <div className="text-sm text-muted-foreground">{run.description}</div>}
+			<div>
+				<div className="mb-2">
+					<div>
+						<div>{run.model}</div>
+						{run.description && <div className="text-sm text-muted-foreground">{run.description}</div>}
+					</div>
+					<ConnectionStatus status={status} pid={run.pid} />
 				</div>
 				{!tasks ? (
 					<LoaderCircle className="size-4 animate-spin" />
@@ -110,9 +114,6 @@ export function Run({ run }: { run: db.Run }) {
 					</Table>
 				)}
 			</div>
-			<div className="absolute top-5 right-5">
-				<ConnectionStatus status={status} pid={run.pid} />
-			</div>
 			<Drawer open={!!selectedTask} onOpenChange={() => setSelectedTask(undefined)}>
 				<DrawerContent>
 					<div className="mx-auto w-full max-w-2xl">

evals/apps/web/src/hooks/use-process-tree.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query"
+
+import { getProcessList } from "@/lib/server/processes"
+
+export const useProcessList = (pid: number | null) =>
+	useQuery({
+		queryKey: ["process-tree", pid],
+		queryFn: () => (pid ? getProcessList(pid) : []),
+		enabled: !!pid,
+	})

evals/apps/web/src/lib/server/processes.ts

@@ -0,0 +1,46 @@
+"use server"
+
+import psTree from "ps-tree"
+import { exec } from "child_process"
+
+export const getProcessList = async (pid: number) => {
+	const promise = new Promise<string>((resolve, reject) => {
+		exec(`ps -p ${pid} -o pid=`, (err, stdout, stderr) => {
+			if (err) {
+				reject(stderr)
+			}
+
+			resolve(stdout)
+		})
+	})
+
+	try {
+		await promise
+	} catch (_) {
+		return null
+	}
+
+	return new Promise<number[]>((resolve, reject) => {
+		psTree(pid, (err, children) => {
+			if (err) {
+				reject(err)
+			}
+
+			resolve(children.map((p) => parseInt(p.PID)))
+		})
+	})
+}
+
+export const killProcessTree = async (pid: number) => {
+	const descendants = await getProcessList(pid)
+
+	if (descendants === null) {
+		return
+	}
+
+	if (descendants.length > 0) {
+		await exec(`kill -9 ${descendants.join(" ")}`)
+	}
+
+	await exec(`kill -9 ${pid}`)
+}