@frixaco/hbench 0.1.0

package/tsconfig.base.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "paths": {
+      "@/*": ["./ui/*", "./lib/*"]
+    },
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  },
+  "exclude": ["dist", "node_modules"]
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./ui" }, { "path": "./server" }]
+}

package/ui/app.tsx

@@ -0,0 +1,15 @@
+export function App() {
+  return (
+    <WebSocketProvider>
+      <Dashboard />
+      <Toaster />
+    </WebSocketProvider>
+  );
+}
+
+export default App;
+
+import "./styles.css";
+import { Dashboard } from "./ghostty-web";
+import { WebSocketProvider } from "./lib/websocket";
+import { Toaster } from "./components/sonner";

package/ui/components/button.tsx

@@ -0,0 +1,57 @@
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive:
+          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";

package/ui/components/cmd-bar.tsx

@@ -0,0 +1,131 @@
+export function CommandBar() {
+  const ws = useWS();
+  const trimmedRepoUrlInput = useDashboardStore(selectTrimmedRepoUrlInput);
+  const isRepoReady = useDashboardStore(selectIsRepoReady);
+  const launchedAgentCount = useDashboardStore(selectLaunchedAgentCount);
+  const prompt = useDashboardStore(selectPrompt);
+  const isStoppingAgents = useDashboardStore(selectIsStoppingAgents);
+  const trimmedPrompt = useDashboardStore(selectTrimmedPrompt);
+
+  const handleLaunchAllAgents = useCallback(() => {
+    agents.forEach((agent) => ws.send(agent));
+    launchAllAgents();
+  }, [ws]);
+
+  const runPromptOnAllAgents = useCallback(() => {
+    if (!trimmedPrompt) return;
+
+    agents.forEach((agent) => {
+      ws.send(
+        JSON.stringify({
+          type: "input",
+          agent,
+          data: trimmedPrompt,
+        }),
+      );
+      window.setTimeout(() => {
+        ws.send(
+          JSON.stringify({
+            type: "input",
+            agent,
+            data: "\r",
+          }),
+        );
+      }, 250);
+    });
+  }, [trimmedPrompt, ws]);
+
+  const stopAllAgents = useCallback(async () => {
+    if (isStoppingAgents) return;
+    setIsStoppingAgents(true);
+    try {
+      const response = await fetch("/api/stop", {
+        method: "POST",
+      });
+      if (!response.ok) {
+        const message = (await response.text()).trim();
+        throw new Error(message || "Failed to stop agents");
+      }
+      toast.success("Stopped all agents");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown error";
+      toast.error("Stop failed", { description: message });
+    } finally {
+      resetRunRequested();
+      setIsStoppingAgents(false);
+    }
+  }, [isStoppingAgents]);
+
+  return (
+    <div className="sticky top-11 z-20 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80">
+      <div className="mx-auto flex max-w-480 items-center gap-2 px-4 py-1.5">
+        <input
+          value={prompt}
+          onChange={(e) => setPrompt(e.currentTarget.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              runPromptOnAllAgents();
+            }
+          }}
+          placeholder="Broadcast prompt to all agents…"
+          className="h-7 flex-1 rounded-md border border-input bg-transparent px-2.5 font-mono text-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 dark:bg-input/30"
+        />
+        <Button
+          size="xs"
+          disabled={!isRepoReady || trimmedPrompt.length === 0}
+          onClick={runPromptOnAllAgents}
+        >
+          <Send /> Send
+        </Button>
+
+        <div className="mx-1 h-4 w-px bg-border" />
+
+        <Button
+          size="xs"
+          variant="outline"
+          disabled={!isRepoReady}
+          onClick={handleLaunchAllAgents}
+        >
+          <Play /> All
+        </Button>
+        <Button
+          size="xs"
+          variant="destructive"
+          disabled={isStoppingAgents || launchedAgentCount === 0}
+          onClick={() => void stopAllAgents()}
+        >
+          <Square /> Stop
+        </Button>
+
+        <div className="mx-1 h-4 w-px bg-border" />
+
+        <ReviewSheet
+          isRepoReady={isRepoReady}
+          repoUrlInput={trimmedRepoUrlInput}
+        />
+      </div>
+    </div>
+  );
+}
+
+import { useCallback } from "react";
+import { Play, Send, Square } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "./button";
+import { ReviewSheet } from "./review-sheet";
+import {
+  agents,
+  launchAllAgents,
+  resetRunRequested,
+  selectIsRepoReady,
+  selectIsStoppingAgents,
+  selectPrompt,
+  selectLaunchedAgentCount,
+  selectTrimmedPrompt,
+  selectTrimmedRepoUrlInput,
+  setIsStoppingAgents,
+  setPrompt,
+  useDashboardStore,
+} from "@/lib/store";
+import { useWS } from "@/lib/websocket";

package/ui/components/diff-view.tsx

@@ -0,0 +1,51 @@
+export function DiffView({
+  loading,
+  error,
+  patch,
+}: {
+  loading: boolean;
+  error: string | null;
+  patch: string | null;
+}) {
+  const files = useMemo(
+    () =>
+      patch
+        ? parsePatchFiles(patch).flatMap((parsedPatch) => parsedPatch.files)
+        : [],
+    [patch],
+  );
+
+  if (loading) {
+    return <p className="text-muted-foreground">Loading diff...</p>;
+  }
+  if (error) {
+    return <p className="text-destructive">{error}</p>;
+  }
+  if (!patch) {
+    return <p className="text-muted-foreground">No changes yet.</p>;
+  }
+
+  if (files.length === 0) {
+    return (
+      <pre className="max-h-full overflow-auto rounded bg-background/60 p-3 text-xs">
+        {patch}
+      </pre>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {files.map((file, index) => (
+        <FileDiff
+          key={file.cacheKey ?? `${file.name}-${index}`}
+          fileDiff={file}
+          options={{ theme: "pierre-dark" }}
+        />
+      ))}
+    </div>
+  );
+}
+
+import { useMemo } from "react";
+import { parsePatchFiles } from "@pierre/diffs";
+import { FileDiff } from "@pierre/diffs/react";

package/ui/components/input.tsx

@@ -0,0 +1,18 @@
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <BaseInput
+      type={type}
+      data-slot="input"
+      className={cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
+
+import { cn } from "@/lib/utils";
+import { Input as BaseInput } from "@base-ui/react/input";

package/ui/components/review-sheet.tsx

@@ -0,0 +1,261 @@
+export function ReviewSheet({
+  isRepoReady,
+  repoUrlInput,
+}: {
+  isRepoReady: boolean;
+  repoUrlInput: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [collectingDiffs, setCollectingDiffs] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [reviewModel, setReviewModel] = useState(
+    reviewModelOptions[0]?.id ?? "",
+  );
+  const [reviewApiKey, setReviewApiKey] = useState("");
+
+  const reviewAbortRef = useRef<AbortController | null>(null);
+  const requestInFlightRef = useRef(false);
+
+  const {
+    completion,
+    complete,
+    error: completionError,
+    isLoading,
+    setCompletion,
+    stop,
+  } = useCompletion({
+    api: "/api/review",
+    streamProtocol: "text",
+    experimental_throttle: 60,
+  });
+
+  const loading = collectingDiffs || isLoading;
+  const markdown = completion.length > 0 ? completion : null;
+
+  const abortDiffCollection = useCallback(() => {
+    reviewAbortRef.current?.abort();
+    reviewAbortRef.current = null;
+  }, []);
+
+  const stopReview = useCallback(() => {
+    stop();
+  }, [stop]);
+
+  useEffect(
+    () => () => {
+      abortDiffCollection();
+      stopReview();
+    },
+    [abortDiffCollection, stopReview],
+  );
+
+  useEffect(() => {
+    if (!completionError) return;
+    setError(`Review stream failed: ${completionError.message}`);
+  }, [completionError]);
+
+  const requestReview = useCallback(async () => {
+    if (requestInFlightRef.current) {
+      return;
+    }
+    requestInFlightRef.current = true;
+
+    abortDiffCollection();
+    stopReview();
+
+    const controller = new AbortController();
+    reviewAbortRef.current = controller;
+
+    setOpen(true);
+    setCollectingDiffs(true);
+    setError(null);
+    setCompletion("");
+
+    try {
+      const requestIdSeed = Date.now();
+      const diffResults = await Promise.all(
+        agents.map(async (agent, index) => {
+          let body: string;
+          try {
+            body = await fetchAgentDiff({
+              agent,
+              repoUrlInput,
+              signal: controller.signal,
+              requestId: `${requestIdSeed}-${index}`,
+            });
+          } catch (error) {
+            const message =
+              error instanceof Error ? error.message : "Failed to load diff";
+            throw new Error(`${agent}: ${message}`, { cause: error });
+          }
+
+          return {
+            agent,
+            diff: body.trim(),
+          };
+        }),
+      );
+
+      const diffs = diffResults.filter((entry) => entry.diff.length > 0);
+      if (diffs.length === 0) {
+        throw new Error(
+          "No agent diffs found. Run agents and make changes first.",
+        );
+      }
+
+      const selectedModel =
+        reviewModelOptions.find((option) => option.id === reviewModel) ??
+        reviewModelOptions[0];
+
+      if (!selectedModel) {
+        throw new Error("No review model configured");
+      }
+
+      setCollectingDiffs(false);
+      const output = await complete(
+        buildReviewPrompt({ repoUrl: repoUrlInput, diffs }),
+        {
+          body: {
+            model: selectedModel.id,
+            apiKey: reviewApiKey.trim() || undefined,
+          },
+        },
+      );
+
+      if (
+        !controller.signal.aborted &&
+        typeof output === "string" &&
+        output.trim().length === 0
+      ) {
+        setCompletion("No review content returned.");
+      }
+    } catch (nextError) {
+      if (
+        controller.signal.aborted ||
+        (nextError instanceof Error && nextError.name === "AbortError")
+      ) {
+        return;
+      }
+
+      const message =
+        nextError instanceof Error ? nextError.message : "Unknown error";
+      setError(`Review stream failed: ${message}`);
+    } finally {
+      if (reviewAbortRef.current === controller) {
+        reviewAbortRef.current = null;
+      }
+      setCollectingDiffs(false);
+      requestInFlightRef.current = false;
+    }
+  }, [
+    abortDiffCollection,
+    complete,
+    repoUrlInput,
+    reviewApiKey,
+    reviewModel,
+    setCompletion,
+    stopReview,
+  ]);
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+          abortDiffCollection();
+          stopReview();
+          setCollectingDiffs(false);
+          requestInFlightRef.current = false;
+        }
+      }}
+    >
+      <SheetTrigger
+        render={
+          <Button
+            size="xs"
+            variant="outline"
+            disabled={!isRepoReady || loading}
+          />
+        }
+      >
+        {loading ? <Loader2 className="animate-spin" /> : <MessageSquareCode />}{" "}
+        Review
+      </SheetTrigger>
+      <SheetContent
+        side="right"
+        className="data-[side=right]:w-[96vw] data-[side=right]:sm:max-w-3xl"
+      >
+        <SheetHeader>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Select
+                value={reviewModel}
+                onValueChange={(nextModel) =>
+                  nextModel && setReviewModel(nextModel)
+                }
+              >
+                <SelectTrigger
+                  size="sm"
+                  className="h-6 gap-1 px-2 text-xs font-mono"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {reviewModelOptions.map((option) => (
+                    <SelectItem key={option.id} value={option.id}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                size="xs"
+                disabled={loading}
+                onClick={() => void requestReview()}
+              >
+                {loading ? (
+                  <Loader2 className="animate-spin" />
+                ) : (
+                  <RefreshCcw />
+                )}{" "}
+                Run
+              </Button>
+            </div>
+            <Input
+              value={reviewApiKey}
+              onChange={(event) => setReviewApiKey(event.currentTarget.value)}
+              type="password"
+              placeholder="OpenRouter API key (optional)"
+              className="h-7 font-mono text-xs"
+            />
+            <p className="text-xs text-muted-foreground">
+              Empty = use <code>OPENROUTER_API_KEY</code> from shell env.
+            </p>
+          </div>
+        </SheetHeader>
+        <div className="flex-1 overflow-auto p-4">
+          <ReviewView loading={loading} error={error} markdown={markdown} />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useCompletion } from "@ai-sdk/react";
+import { Loader2, MessageSquareCode, RefreshCcw } from "lucide-react";
+import { Button } from "./button";
+import { Input } from "./input";
+import { ReviewView } from "./review-view";
+import { Sheet, SheetContent, SheetHeader, SheetTrigger } from "./sheet";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+import { fetchAgentDiff } from "@/lib/diff-client";
+import { agents } from "@/lib/store";
+import { buildReviewPrompt, reviewModelOptions } from "@/lib/reviewer";

package/ui/components/review-view.tsx

@@ -0,0 +1,40 @@
+export function ReviewView({
+  loading,
+  error,
+  markdown,
+}: {
+  loading: boolean;
+  error: string | null;
+  markdown: string | null;
+}) {
+  if (!markdown && !loading && !error) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        Click Review to compare all agent diffs.
+      </p>
+    );
+  }
+  if (!markdown && loading) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Loader2 className="size-4 animate-spin" />
+        Collecting diffs and sending for review…
+      </div>
+    );
+  }
+  if (error && !markdown) {
+    return <p className="text-sm text-destructive">{error}</p>;
+  }
+
+  return (
+    <div className="space-y-3">
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
+      <Streamdown isAnimating={loading} caret={loading ? "block" : undefined}>
+        {markdown ?? ""}
+      </Streamdown>
+    </div>
+  );
+}
+
+import { Streamdown } from "streamdown";
+import { Loader2 } from "lucide-react";