@frixaco/hbench 0.1.0

package/ui/ghostty-web.tsx

@@ -0,0 +1,138 @@
+export function Dashboard() {
+  const ws = useWS();
+  const repoUrlInput = useDashboardStore(selectRepoUrlInput);
+  const runRequested = useDashboardStore(selectRunRequested);
+
+  const trimmedRepoUrlInput = useDashboardStore(selectTrimmedRepoUrlInput);
+  const isRepoReady = useDashboardStore(selectIsRepoReady);
+  const launchedAgentCount = useDashboardStore(selectLaunchedAgentCount);
+
+  const handleLaunchAgent = useCallback(
+    (agent: string) => {
+      ws.send(agent);
+      launchAgent(agent);
+    },
+    [ws],
+  );
+
+  return (
+    <main className="flex min-h-screen w-full flex-col bg-background">
+      <header className="sticky top-0 z-30 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80">
+        <div className="mx-auto flex h-11 max-w-480 items-center gap-3 px-4">
+          <span className="text-sm font-bold tracking-tight">hbench</span>
+
+          <div className="mx-2 h-4 w-px bg-border" />
+
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            <Input
+              value={repoUrlInput}
+              onChange={(e) => setRepoUrlInput(e.currentTarget.value)}
+              placeholder="https://github.com/org/repo"
+              className="h-7 max-w-sm font-mono text-xs"
+            />
+            <Button
+              size="xs"
+              disabled={trimmedRepoUrlInput.length === 0}
+              onClick={() => {
+                ws.send(
+                  JSON.stringify({
+                    type: "setup",
+                    repoUrl: trimmedRepoUrlInput,
+                  }),
+                );
+              }}
+            >
+              Setup
+            </Button>
+            <Button
+              size="xs"
+              variant="outline"
+              disabled={trimmedRepoUrlInput.length === 0}
+              onClick={() => {
+                ws.send(
+                  JSON.stringify({
+                    type: "use-existing",
+                    repoUrl: trimmedRepoUrlInput,
+                  }),
+                );
+              }}
+            >
+              Use Existing
+            </Button>
+            <Button
+              size="xs"
+              variant="destructive"
+              onClick={() => {
+                ws.send(JSON.stringify({ type: "wipe" }));
+              }}
+            >
+              <Trash2 /> Wipe
+            </Button>
+          </div>
+
+          <div className="flex shrink-0 items-center gap-3 text-xs text-muted-foreground">
+            <span className="flex items-center gap-1.5">
+              <span
+                className={cn(
+                  "size-1.5 rounded-full",
+                  ws.isReady ? "bg-emerald-500" : "bg-red-400",
+                )}
+              />
+              {ws.isReady ? "ws" : "offline"}
+            </span>
+            <span className="flex items-center gap-1.5">
+              <span
+                className={cn(
+                  "size-1.5 rounded-full",
+                  isRepoReady ? "bg-emerald-500" : "bg-muted-foreground/50",
+                )}
+              />
+              {isRepoReady ? "ready" : "no repo"}
+            </span>
+          </div>
+
+          <span className="text-xs tabular-nums text-muted-foreground">
+            {launchedAgentCount}/{agents.length}
+          </span>
+        </div>
+      </header>
+
+      <CommandBar />
+
+      <div className="flex-1 px-3 pt-3 pb-4">
+        <div className="mx-auto grid max-w-480 gap-3 grid-cols-[repeat(auto-fit,minmax(420px,1fr))]">
+          {agents.map((agent) => (
+            <TUI
+              key={agent}
+              name={agent}
+              runRequested={runRequested[agent] ?? false}
+              isRepoReady={isRepoReady}
+              repoUrlInput={trimmedRepoUrlInput}
+              onLaunch={() => handleLaunchAgent(agent)}
+            />
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
+
+import { useCallback } from "react";
+import { Trash2 } from "lucide-react";
+import { Button } from "./components/button";
+import { Input } from "./components/input";
+import { useWS } from "./lib/websocket";
+import { cn } from "./lib/utils";
+import {
+  agents,
+  launchAgent,
+  selectIsRepoReady,
+  selectRunRequested,
+  selectLaunchedAgentCount,
+  selectRepoUrlInput,
+  selectTrimmedRepoUrlInput,
+  setRepoUrlInput,
+  useDashboardStore,
+} from "./lib/store";
+import { TUI } from "./components/tui";
+import { CommandBar } from "./components/cmd-bar";

package/ui/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- <link rel="icon" type="image/svg+xml" href="./logo.svg" /> -->
+    <title>Bun + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

package/ui/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * This file is the entry point for the React app, it sets up the root
+ * element and renders the App component to the DOM.
+ *
+ * It is included in `ui/index.html`.
+ */
+
+function start() {
+  const root = createRoot(document.getElementById("root")!);
+  root.render(<App />);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", start);
+} else {
+  start();
+}
+
+import { createRoot } from "react-dom/client";
+import { App } from "./app";

package/ui/lib/agent-patterns.ts

@@ -0,0 +1,127 @@
+const svg = (content: string, size: number) =>
+  `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}'>${content}</svg>`)}")`;
+
+const s = (opacity: number) => `stroke-opacity='${opacity}'`;
+const f = (opacity: number) => `fill-opacity='${opacity}'`;
+
+const n = (value: number) => value.toFixed(2);
+
+const hash = (value: string) => {
+  let hashed = 2166136261;
+  for (let i = 0; i < value.length; i += 1) {
+    hashed ^= value.charCodeAt(i);
+    hashed = Math.imul(hashed, 16777619);
+  }
+  return hashed >>> 0;
+};
+
+const createRng = (seed: string) => {
+  let state = hash(seed) || 1;
+  return () => {
+    state += 0x6d2b79f5;
+    let value = Math.imul(state ^ (state >>> 15), state | 1);
+    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
+    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
+  };
+};
+
+type ShapeFactory = (x: number, y: number, rand: () => number) => string;
+
+const randomPattern = (
+  seed: string,
+  size: number,
+  count: number,
+  shapeFactory: ShapeFactory,
+) => {
+  const rand = createRng(seed);
+  const margin = 6;
+  let content = "";
+
+  for (let i = 0; i < count; i += 1) {
+    const x = margin + rand() * (size - margin * 2);
+    const y = margin + rand() * (size - margin * 2);
+    content += shapeFactory(x, y, rand);
+  }
+
+  return svg(content, size);
+};
+
+const starPath = (cx: number, cy: number, radius: number) => {
+  const inner = radius * 0.45;
+  let path = "";
+
+  for (let i = 0; i < 10; i += 1) {
+    const angle = -Math.PI / 2 + (Math.PI * i) / 5;
+    const distance = i % 2 === 0 ? radius : inner;
+    const px = cx + Math.cos(angle) * distance;
+    const py = cy + Math.sin(angle) * distance;
+    path += `${i === 0 ? "M" : "L"}${n(px)} ${n(py)} `;
+  }
+
+  return `${path}Z`;
+};
+
+const petalPath = (cx: number, cy: number, width: number, height: number) =>
+  `M${n(cx)} ${n(cy - height)}
+   Q${n(cx + width)} ${n(cy - height * 0.55)} ${n(cx + width * 1.35)} ${n(cy)}
+   Q${n(cx + width)} ${n(cy + height * 0.55)} ${n(cx)} ${n(cy + height)}
+   Q${n(cx - width)} ${n(cy + height * 0.55)} ${n(cx - width * 1.35)} ${n(cy)}
+   Q${n(cx - width)} ${n(cy - height * 0.55)} ${n(cx)} ${n(cy - height)} Z`;
+
+const patterns: Record<string, string> = {
+  amp: randomPattern("amp", 80, 18, (x, y, rand) => {
+    const arm = 2 + rand() * 2.8;
+    return `<line x1='${n(x - arm)}' y1='${n(y - arm)}' x2='${n(x + arm)}' y2='${n(y + arm)}' stroke='white' ${s(0.06)} stroke-width='1.4'/>
+     <line x1='${n(x + arm)}' y1='${n(y - arm)}' x2='${n(x - arm)}' y2='${n(y + arm)}' stroke='white' ${s(0.04)} stroke-width='1'/>`;
+  }),
+
+  droid: randomPattern("droid", 84, 16, (x, y, rand) => {
+    const width = 5 + rand() * 4;
+    const height = 3 + rand() * 2.5;
+    const left = x - width / 2;
+    const top = y - height / 2;
+    const baseY = top + height + 1.5;
+    return `<rect x='${n(left)}' y='${n(top)}' width='${n(width)}' height='${n(height)}' rx='1' fill='none' stroke='white' ${s(0.06)} stroke-width='1'/>
+     <line x1='${n(left)}' y1='${n(baseY)}' x2='${n(left + width)}' y2='${n(baseY)}' stroke='white' ${s(0.04)} stroke-width='1'/>`;
+  }),
+
+  pi: randomPattern("pi", 82, 18, (x, y, rand) => {
+    const ring = 1.7 + rand() * 1.8;
+    const dot = 0.7 + rand() * 1.1;
+    const offsetX = (rand() - 0.5) * 6;
+    const offsetY = (rand() - 0.5) * 6;
+    return `<circle cx='${n(x)}' cy='${n(y)}' r='${n(ring)}' fill='none' stroke='white' ${s(0.06)} stroke-width='1'/>
+     <circle cx='${n(x + offsetX)}' cy='${n(y + offsetY)}' r='${n(dot)}' fill='white' ${f(0.03)}/>`;
+  }),
+
+  opencode: randomPattern("opencode", 80, 16, (x, y, rand) => {
+    const outer = 2.4 + rand() * 2.2;
+    const inner = 1.2 + rand() * 1.4;
+    const innerX = x + (rand() - 0.5) * 4.5;
+    const innerY = y + (rand() - 0.5) * 4.5;
+    return `<rect x='${n(x - outer)}' y='${n(y - outer)}' width='${n(outer * 2)}' height='${n(outer * 2)}' fill='none' stroke='white' ${s(0.06)} stroke-width='1'/>
+     <rect x='${n(innerX - inner)}' y='${n(innerY - inner)}' width='${n(inner * 2)}' height='${n(inner * 2)}' fill='white' ${f(0.03)}/>`;
+  }),
+
+  claude: randomPattern("claude", 86, 14, (x, y, rand) => {
+    const radius = 2.8 + rand() * 2.2;
+    return `<path d='${starPath(x, y, radius)}' fill='none' stroke='white' ${s(0.06)} stroke-width='1'/>`;
+  }),
+
+  codex: randomPattern("codex", 88, 14, (x, y, rand) => {
+    const width = 1.9 + rand() * 1.8;
+    const height = 1.7 + rand() * 1.6;
+    const gap = 1.1 + rand() * 1.2;
+    const top = petalPath(x, y - gap, width, height);
+    const bottom = petalPath(x, y + gap, width, height);
+    return `<path d='${top} ${bottom}' fill='none' stroke='white' ${s(0.06)} stroke-width='1'/>`;
+  }),
+};
+
+export function getAgentPattern(
+  agent: string,
+): React.CSSProperties | undefined {
+  const bg = patterns[agent];
+  if (!bg) return undefined;
+  return { backgroundImage: bg, backgroundRepeat: "repeat" };
+}

package/ui/lib/diff-client.ts

@@ -0,0 +1,38 @@
+type FetchAgentDiffInput = {
+  agent: string;
+  repoUrlInput?: string | null;
+  signal?: AbortSignal;
+  requestId?: string;
+};
+
+const normalizeDiffErrorMessage = (body: string) => {
+  const trimmedBody = body.trim();
+  return trimmedBody.length > 0 ? trimmedBody : "Failed to load diff";
+};
+
+export async function fetchAgentDiff({
+  agent,
+  repoUrlInput,
+  signal,
+  requestId,
+}: FetchAgentDiffInput): Promise<string> {
+  const search = new URLSearchParams({
+    agent,
+    t: requestId ?? Date.now().toString(),
+  });
+
+  const trimmedRepoUrlInput = repoUrlInput?.trim();
+  if (trimmedRepoUrlInput) {
+    search.set("repoUrl", trimmedRepoUrlInput);
+  }
+
+  const response = await fetch(`/api/diff?${search.toString()}`, {
+    signal,
+  });
+  const body = await response.text();
+  if (!response.ok) {
+    throw new Error(normalizeDiffErrorMessage(body));
+  }
+
+  return body;
+}

package/ui/lib/models.json

@@ -0,0 +1,8 @@
+{
+  "amp": ["rush", "deep", "smart", "oracle"],
+  "droid": ["gpt-5.2", "gpt-5.2-codex", "kimi-k2.5"],
+  "pi": ["claude-opus-4-5", "gpt-5.2", "gpt-5.2-codex"],
+  "codex": ["gpt-5.2", "gpt-5.2-codex"],
+  "claude": ["claude-opus-4-5", "claude-sonnet-4-5"],
+  "opencode": ["claude opus 4.5", "kimi k2.5", "gpt-5.2", "gpt-5.2 codex"]
+}

package/ui/lib/reviewer.ts

@@ -0,0 +1,82 @@
+export type ReviewModelOption = {
+  id: string;
+  label: string;
+};
+
+type DiffEntry = {
+  agent: string;
+  diff: string;
+};
+
+const maxPerAgentDiffChars = 6_000;
+const maxTotalDiffChars = 24_000;
+
+const reviewSystemPrompt = [
+  "You are a strict code-review judge comparing git diffs from multiple agents.",
+  "Return markdown only. No preamble, no chain-of-thought, no speculation, no repetition.",
+  "Keep response under 220 words.",
+  "Focus only on what is visible in the diffs: correctness, risk, tests, maintainability.",
+  "Use exactly this structure:",
+  "## Best vs Worst",
+  "- Best: <agent> — <one-line reason>",
+  "- Worst: <agent> — <one-line reason>",
+  "## Agent Review",
+  "| Agent | Verdict | Good | Problems |",
+  "|---|---|---|---|",
+  "| <agent> | pass/warn/fail | <short> | <short> |",
+  "## Comparison",
+  "- Why best beats second best (one line)",
+  "- Biggest risk in worst patch (one line)",
+].join(" ");
+
+export const reviewModelOptions: Array<ReviewModelOption> = [
+  {
+    id: "openai/gpt-5.2",
+    label: "GPT 5.2",
+  },
+  {
+    id: "google/gemini-3-pro-preview",
+    label: "Gemini 3 Pro Preview",
+  },
+];
+
+const truncateText = (value: string, maxChars: number) => {
+  if (value.length <= maxChars) return value;
+  const omitted = value.length - maxChars;
+  return `${value.slice(0, maxChars)}\n\n... [truncated ${String(omitted)} chars]`;
+};
+
+export const buildReviewPrompt = ({
+  repoUrl,
+  diffs,
+}: {
+  repoUrl: string;
+  diffs: Array<DiffEntry>;
+}): string => {
+  let budgetLeft = maxTotalDiffChars;
+  const diffBlocks = diffs
+    .map(({ agent, diff }) => {
+      if (budgetLeft <= 0) {
+        return `## Agent: ${agent}\n\nDiff omitted due to total size limit.`;
+      }
+
+      const capped = truncateText(diff, maxPerAgentDiffChars);
+      const withinBudget = truncateText(capped, budgetLeft);
+      budgetLeft -= withinBudget.length;
+
+      return `## Agent: ${agent}\n\n\`\`\`diff\n${withinBudget}\n\`\`\``;
+    })
+    .join("\n\n");
+
+  const repoHeader = repoUrl
+    ? `Repository: ${repoUrl}`
+    : "Repository: local worktree";
+
+  return [
+    reviewSystemPrompt,
+    repoHeader,
+    "Review each agent diff. Rank best and worst. Keep it concise.",
+    'Important: evaluate only changed code shown below. If information is missing, say "unclear from diff".',
+    diffBlocks,
+  ].join("\n\n");
+};

package/ui/lib/store.ts

@@ -0,0 +1,90 @@
+export const agents = Object.keys(modelsJson as Record<string, unknown>);
+
+type RunRequestedState = Record<string, boolean>;
+
+type DashboardState = {
+  prompt: string;
+  repoUrlInput: string;
+  activeRepoUrl: string | null;
+  runRequested: RunRequestedState;
+  isStoppingAgents: boolean;
+};
+
+const createRequestedState = (requested: boolean): RunRequestedState =>
+  agents.reduce((acc, agent) => {
+    acc[agent] = requested;
+    return acc;
+  }, {} as RunRequestedState);
+
+export const createRunRequestedState = () => createRequestedState(false);
+export const createLaunchedRequestedState = () => createRequestedState(true);
+
+export const useDashboardStore = create<DashboardState>()(() => ({
+  prompt: "",
+  repoUrlInput: "",
+  activeRepoUrl: null,
+  runRequested: createRunRequestedState(),
+  isStoppingAgents: false,
+}));
+
+export const setPrompt = (prompt: string) => {
+  useDashboardStore.setState({ prompt });
+};
+
+export const setRepoUrlInput = (repoUrlInput: string) => {
+  useDashboardStore.setState({ repoUrlInput });
+};
+
+export const setActiveRepoUrl = (activeRepoUrl: string | null) => {
+  useDashboardStore.setState({ activeRepoUrl });
+};
+
+export const setIsStoppingAgents = (isStoppingAgents: boolean) => {
+  useDashboardStore.setState({ isStoppingAgents });
+};
+
+export const launchAgent = (agent: string) => {
+  useDashboardStore.setState((state) => ({
+    runRequested: {
+      ...state.runRequested,
+      [agent]: true,
+    },
+  }));
+};
+
+export const launchAllAgents = () => {
+  useDashboardStore.setState({ runRequested: createLaunchedRequestedState() });
+};
+
+export const resetRunRequested = () => {
+  useDashboardStore.setState({ runRequested: createRunRequestedState() });
+};
+
+export const selectPrompt = (state: DashboardState) => state.prompt;
+
+export const selectRepoUrlInput = (state: DashboardState) => state.repoUrlInput;
+
+export const selectRunRequested = (state: DashboardState) => state.runRequested;
+
+export const selectIsStoppingAgents = (state: DashboardState) =>
+  state.isStoppingAgents;
+
+export const selectTrimmedRepoUrlInput = (state: DashboardState) =>
+  state.repoUrlInput.trim();
+
+export const selectTrimmedPrompt = (state: DashboardState) =>
+  state.prompt.trim();
+
+export const selectIsRepoReady = (state: DashboardState) => {
+  const trimmedRepoUrlInput = state.repoUrlInput.trim();
+  return (
+    trimmedRepoUrlInput.length > 0 &&
+    state.activeRepoUrl === trimmedRepoUrlInput
+  );
+};
+
+export const selectLaunchedAgentCount = (state: DashboardState) =>
+  Object.values(state.runRequested).filter(Boolean).length;
+
+import { create } from "zustand";
+import modelsJson from "./models.json";

package/ui/lib/utils.ts

@@ -0,0 +1,7 @@
+export function cn(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs));
+}
+
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import type { ClassValue } from "clsx";

package/ui/lib/websocket.tsx

@@ -0,0 +1,144 @@
+const WebSocketContext = createContext<WebSocket | null>(null);
+
+export function useWS() {
+  const socket = useContext(WebSocketContext);
+
+  return {
+    isReady: socket?.readyState == WebSocket.OPEN,
+    socket,
+    send: (msg: string) => socket?.send(msg),
+  };
+}
+
+export function WebSocketProvider({ children }: { children: React.ReactNode }) {
+  const [conn, setConn] = useState<WebSocket | null>(null);
+  const setupToastIdRef = useRef<string | number | null>(null);
+  const wipeToastIdRef = useRef<string | number | null>(null);
+
+  useEffect(() => {
+    let retry = 0;
+    let socket: WebSocket | null = null;
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+
+    const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${wsProtocol}//${window.location.host}/api/vt`;
+
+    function initWSConnection() {
+      const wsConn = new WebSocket(wsUrl);
+      wsConn.binaryType = "arraybuffer";
+
+      socket = wsConn;
+      setConn(wsConn);
+
+      wsConn.onopen = () => {
+        retry = 0;
+      };
+      wsConn.onerror = (err) => {
+        console.error("ws err:", err);
+      };
+      wsConn.onclose = () => {
+        console.error(`ws closed, retrying ${retry} times`);
+
+        if (retry < 3) {
+          retry++;
+
+          timeout = setTimeout(() => initWSConnection(), 2000);
+        }
+      };
+    }
+
+    initWSConnection();
+
+    return () => {
+      socket?.close();
+      setConn(null);
+
+      if (timeout) clearTimeout(timeout);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!conn) return;
+
+    const handleStatus = (event: MessageEvent) => {
+      if (typeof event.data !== "string") return;
+      try {
+        const payload = JSON.parse(event.data);
+        if (payload?.type === "setup-status") {
+          const isUseExisting = payload.mode === "existing";
+          if (payload.status === "start") {
+            setActiveRepoUrl(null);
+            setupToastIdRef.current = toast.loading(
+              isUseExisting
+                ? "Loading existing worktrees..."
+                : "Setting up worktrees...",
+              {
+                description: payload.repoUrl,
+              },
+            );
+            return;
+          }
+          if (payload.status === "success") {
+            setActiveRepoUrl(
+              typeof payload.repoUrl === "string"
+                ? payload.repoUrl.trim()
+                : null,
+            );
+            toast.success(
+              isUseExisting ? "Using existing worktrees" : "Setup complete",
+              {
+                id: setupToastIdRef.current ?? undefined,
+                description: payload.repoUrl,
+              },
+            );
+            return;
+          }
+          if (payload.status === "error") {
+            setActiveRepoUrl(null);
+            toast.error(
+              isUseExisting ? "Use Existing failed" : "Setup failed",
+              {
+                id: setupToastIdRef.current ?? undefined,
+                description: payload.message ?? payload.repoUrl,
+              },
+            );
+          }
+        }
+
+        if (payload?.type === "wipe-status") {
+          if (payload.status === "start") {
+            setActiveRepoUrl(null);
+            wipeToastIdRef.current = toast.loading("Wiping ~/.hbench...");
+            return;
+          }
+          if (payload.status === "success") {
+            setActiveRepoUrl(null);
+            toast.success("Sandbox wiped", {
+              id: wipeToastIdRef.current ?? undefined,
+            });
+            return;
+          }
+          if (payload.status === "error") {
+            toast.error("Wipe failed", {
+              id: wipeToastIdRef.current ?? undefined,
+              description: payload.message,
+            });
+          }
+        }
+      } catch (error) {
+        console.warn("Invalid status payload", error);
+      }
+    };
+
+    conn.addEventListener("message", handleStatus);
+    return () => {
+      conn.removeEventListener("message", handleStatus);
+    };
+  }, [conn]);
+
+  return <WebSocketContext value={conn}>{children}</WebSocketContext>;
+}
+
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { setActiveRepoUrl } from "./store";