@frixaco/hbench 0.1.0

package/ui/components/select.tsx

@@ -0,0 +1,199 @@
+const Select = SelectPrimitive.Root;
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 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 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn(
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none",
+            className,
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+            <CheckIcon className="pointer-events-none" />
+          </span>
+        }
+      />
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpArrow>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownArrow>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
+
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";

package/ui/components/sheet.tsx

@@ -0,0 +1,131 @@
+function Sheet({ ...props }: SheetBase.Root.Props) {
+  return <SheetBase.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: SheetBase.Trigger.Props) {
+  return <SheetBase.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: SheetBase.Close.Props) {
+  return <SheetBase.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: SheetBase.Portal.Props) {
+  return <SheetBase.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: SheetBase.Backdrop.Props) {
+  return (
+    <SheetBase.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetBase.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetBase.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetBase.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetBase.Close>
+        )}
+      </SheetBase.Popup>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("gap-0.5 p-4 flex flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: SheetBase.Title.Props) {
+  return (
+    <SheetBase.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground text-base font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetBase.Description.Props) {
+  return (
+    <SheetBase.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
+
+import { Dialog as SheetBase } from "@base-ui/react/dialog";
+
+import { XIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "./button";

package/ui/components/sonner.tsx

@@ -0,0 +1,41 @@
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      theme="system"
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
+
+import { Toaster as Sonner } from "sonner";
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import type { ToasterProps } from "sonner";

package/ui/components/tui.tsx

@@ -0,0 +1,313 @@
+type TUIProps = {
+  name: string;
+  runRequested: boolean;
+  isRepoReady: boolean;
+  repoUrlInput: string;
+  onLaunch: () => void;
+};
+
+export function TUI({
+  name,
+  runRequested,
+  isRepoReady,
+  repoUrlInput,
+  onLaunch,
+}: TUIProps) {
+  const ws = useWS();
+  const termDivContainer = useRef<HTMLDivElement | null>(null);
+  const termInstance = useRef<Terminal | null>(null);
+  const [diffOpen, setDiffOpen] = useState(false);
+  const [diffPatch, setDiffPatch] = useState<string | null>(null);
+  const [diffError, setDiffError] = useState<string | null>(null);
+  const [diffLoading, setDiffLoading] = useState(false);
+  const [diffRepoUrlInput, setDiffRepoUrlInput] = useState<string | null>(null);
+  const headerPattern = getAgentPattern(name.toLowerCase());
+
+  useEffect(() => {
+    let active = true;
+    let dataDisposable: { dispose: () => void } | null = null;
+    let resizeDisposable: { dispose: () => void } | null = null;
+    let resizeObserver: ResizeObserver | null = null;
+    let socket: WebSocket | null = null;
+
+    const teardownSocket = () => {
+      dataDisposable?.dispose();
+      dataDisposable = null;
+      resizeDisposable?.dispose();
+      resizeDisposable = null;
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      if (socket) {
+        socket.removeEventListener("message", handleMessage);
+        socket.removeEventListener("close", handleClose);
+        socket = null;
+      }
+    };
+
+    const attachSocket = (conn: WebSocket, term: Terminal) => {
+      teardownSocket();
+      socket = conn;
+      dataDisposable = term.onData((data) => {
+        socket?.send(
+          JSON.stringify({
+            type: "input",
+            agent: name,
+            data,
+          }),
+        );
+      });
+      socket.addEventListener("message", handleMessage);
+      socket.addEventListener("close", handleClose);
+    };
+
+    const handleMessage = (event: MessageEvent) => {
+      const term = termInstance.current;
+      if (!term) return;
+      const payload = event.data;
+      if (typeof payload === "string") {
+        try {
+          const message = JSON.parse(payload);
+          if (message.type !== "output") return;
+          if (message.agent !== name) return;
+          if (typeof message.data !== "string") return;
+          const decoded = atob(message.data);
+          const bytes = new Uint8Array(decoded.length);
+          for (let i = 0; i < decoded.length; i += 1) {
+            bytes[i] = decoded.charCodeAt(i);
+          }
+          term.write(bytes);
+        } catch (error) {
+          console.warn("Invalid output payload", error);
+        }
+      } else if (payload instanceof ArrayBuffer) {
+        term.write(new Uint8Array(payload));
+      }
+    };
+
+    const handleClose = () => {
+      termInstance.current?.dispose();
+      termInstance.current = null;
+    };
+
+    const sendResize = (cols: number, rows: number) => {
+      if (!ws.socket || !ws.isReady) return;
+      ws.send(
+        JSON.stringify({
+          type: "resize",
+          agent: name,
+          cols,
+          rows,
+        }),
+      );
+    };
+
+    const fitTerminal = (term: Terminal) => {
+      const host = termDivContainer.current;
+      if (!host || !term.renderer) return;
+      const metrics = term.renderer.getMetrics();
+      if (!metrics.width || !metrics.height) return;
+      const cols = Math.max(2, Math.floor(host.clientWidth / metrics.width));
+      const rows = Math.max(1, Math.floor(host.clientHeight / metrics.height));
+      term.resize(cols, rows);
+    };
+
+    async function ensureTerminalSetup() {
+      const host = termDivContainer.current;
+      if (!host || termInstance.current) return;
+      await init();
+      if (!active) return;
+
+      const term = new Terminal({
+        fontSize: 14,
+        theme: {
+          background: "#16181a",
+          foreground: "#ffffff",
+          black: "#16181a",
+          red: "#ff6e5e",
+          green: "#5eff6c",
+          yellow: "#f1ff5e",
+          blue: "#5ea1ff",
+          magenta: "#ff5ef1",
+          cyan: "#5ef1ff",
+          white: "#ffffff",
+          brightBlack: "#3c4048",
+          brightRed: "#ffbd5e",
+          brightGreen: "#5eff6c",
+          brightYellow: "#f1ff5e",
+          brightBlue: "#5ea1ff",
+          brightMagenta: "#ff5ea0",
+          brightCyan: "#5ef1ff",
+          brightWhite: "#ffffff",
+        },
+      });
+      term.open(host);
+      termInstance.current = term;
+      fitTerminal(term);
+
+      resizeObserver = new ResizeObserver(() => {
+        if (termInstance.current) {
+          fitTerminal(termInstance.current);
+        }
+      });
+      resizeObserver.observe(host);
+    }
+
+    async function ensureSocketAttached() {
+      await ensureTerminalSetup();
+      if (!active || !ws.socket || !termInstance.current) return;
+      attachSocket(ws.socket, termInstance.current);
+
+      resizeDisposable = termInstance.current.onResize((size) => {
+        sendResize(size.cols, size.rows);
+      });
+
+      fitTerminal(termInstance.current);
+      sendResize(termInstance.current.cols, termInstance.current.rows);
+    }
+
+    if (runRequested) {
+      ensureSocketAttached();
+    }
+
+    return () => {
+      active = false;
+      teardownSocket();
+      termInstance.current?.dispose();
+      termInstance.current = null;
+    };
+  }, [runRequested, ws.socket]);
+
+  const fetchDiff = useCallback(
+    async (repoUrlInputOverride?: string) => {
+      setDiffLoading(true);
+      setDiffError(null);
+      try {
+        const nextRepoUrlInput =
+          repoUrlInputOverride ?? diffRepoUrlInput ?? repoUrlInput;
+        const body = await fetchAgentDiff({
+          agent: name,
+          repoUrlInput: nextRepoUrlInput,
+        });
+        const trimmed = body.trim();
+        setDiffPatch(trimmed.length > 0 ? body : null);
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Unknown error";
+        setDiffError(message);
+        setDiffPatch(null);
+      } finally {
+        setDiffLoading(false);
+      }
+    },
+    [diffRepoUrlInput, name, repoUrlInput],
+  );
+
+  return (
+    <div className="flex h-[38rem] min-h-[28rem] flex-col overflow-hidden rounded-lg border bg-[#16181a]">
+      {/* Card header: agent name + model + actions */}
+      <div
+        className="flex items-center gap-2 border-b border-white/[0.06] bg-[#1c1e21] px-2.5 py-1.5"
+        style={headerPattern}
+      >
+        <span
+          className={cn(
+            "size-1.5 shrink-0 rounded-full",
+            runRequested ? "bg-emerald-500 animate-pulse" : "bg-white/20",
+          )}
+        />
+        <span className="text-xs font-semibold capitalize text-white/90">
+          {name}
+        </span>
+
+        <div className="flex-1" />
+
+        <Button
+          size="icon-xs"
+          variant={runRequested ? "secondary" : "ghost"}
+          disabled={!isRepoReady}
+          onClick={onLaunch}
+          className={cn(
+            "text-white/60 hover:text-white",
+            runRequested && "text-white",
+          )}
+          aria-label={`Launch ${name}`}
+        >
+          {runRequested ? <RefreshCcw className="animate-spin" /> : <Play />}
+        </Button>
+
+        <Sheet
+          open={diffOpen}
+          onOpenChange={(open) => {
+            setDiffOpen(open);
+            if (open) {
+              setDiffRepoUrlInput(repoUrlInput);
+              fetchDiff(repoUrlInput);
+            }
+          }}
+        >
+          <SheetTrigger
+            render={
+              <Button
+                size="icon-xs"
+                variant="ghost"
+                className="text-white/60 hover:text-white"
+                disabled={!isRepoReady}
+                onClick={() => {
+                  if (!diffOpen) {
+                    setDiffOpen(true);
+                  }
+                  setDiffRepoUrlInput(repoUrlInput);
+                  fetchDiff(repoUrlInput);
+                }}
+              />
+            }
+          >
+            <Columns2 />
+          </SheetTrigger>
+          <SheetContent
+            side="right"
+            className="data-[side=right]:w-[96vw] data-[side=right]:sm:max-w-[92vw]"
+          >
+            <SheetHeader>
+              <SheetTitle className="capitalize">{name} — Diff</SheetTitle>
+            </SheetHeader>
+            <div className="flex-1 overflow-auto p-4">
+              <DiffView
+                loading={diffLoading}
+                error={diffError}
+                patch={diffPatch}
+              />
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
+
+      {/* Terminal area */}
+      <div className="relative flex-1">
+        {!runRequested && (
+          <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
+            <span className="text-xs text-white/25">press ▶ to launch</span>
+          </div>
+        )}
+        <div ref={termDivContainer} className="size-full caret-background" />
+      </div>
+    </div>
+  );
+}
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Terminal, init } from "ghostty-web";
+import { Columns2, Play, RefreshCcw } from "lucide-react";
+import { Button } from "./button";
+import { getAgentPattern } from "@/lib/agent-patterns";
+import { fetchAgentDiff } from "@/lib/diff-client";
+import { useWS } from "@/lib/websocket";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+import { cn } from "@/lib/utils";
+import { DiffView } from "./diff-view";