@hicoders/devkit 1.0.0

package/pkg/tui/components/Help.tsx

@@ -0,0 +1,83 @@
+// Help — a full-screen keybinding cheat-sheet. Render it as the whole screen
+// (instead of the normal content) while help is requested; any key closes it.
+//
+// Layout mirrors ListSelect exactly — a plain flex-column box whose children are
+// each their own row <box>. Bordered/padded containers that directly stack many
+// children miscalculate child heights on some terminals and overlap; the plain
+// column + per-row boxes used here render reliably. Keep all text ASCII (see
+// CLAUDE.md): ambiguous-width glyphs corrupt line rendering.
+
+import type { ReactNode } from "react";
+import { useKeyboard } from "@opentui/react";
+import { useTheme } from "../theme-context";
+
+export interface Binding {
+  keys: string;
+  desc: string;
+}
+
+export function Help({
+  title,
+  bindings,
+  active = true,
+  onClose,
+}: {
+  title: string;
+  bindings: Binding[];
+  active?: boolean;
+  onClose: () => void;
+}) {
+  const theme = useTheme();
+  useKeyboard((key) => {
+    if (!active) return;
+    onClose(); // any key dismisses
+    void key;
+  });
+
+  // A binding with empty `keys` is a section header (its `desc` is the heading).
+  const pad = Math.max(...bindings.map((b) => b.keys.length));
+
+  const Row = ({ children }: { children: ReactNode }) => (
+    <box style={{ flexDirection: "row" }}>{children}</box>
+  );
+  const Blank = () => (
+    <box style={{ height: 1, flexDirection: "row" }}>
+      <text> </text>
+    </box>
+  );
+
+  const lines: ReactNode[] = [];
+  bindings.forEach((b, i) => {
+    if (b.keys === "") {
+      if (lines.length) lines.push(<Blank key={`gap-${i}`} />);
+      lines.push(
+        <Row key={i}>
+          <text fg={theme.accentDim}>{b.desc}</text>
+        </Row>,
+      );
+    } else {
+      lines.push(
+        <Row key={i}>
+          <text fg={theme.yellow}>{b.keys.padEnd(pad)}</text>
+          <text fg={theme.dim}>{`   ${b.desc}`}</text>
+        </Row>,
+      );
+    }
+  });
+
+  return (
+    <box style={{ padding: 1, flexDirection: "column" }}>
+      <box style={{ flexDirection: "column" }}>
+        <Row>
+          <text fg={theme.accent}>{title}</text>
+        </Row>
+        <Blank />
+        {lines}
+        <Blank />
+        <Row>
+          <text fg={theme.dim}>press any key to close</text>
+        </Row>
+      </box>
+    </box>
+  );
+}

package/pkg/tui/components/ListSelect.tsx

@@ -0,0 +1,436 @@
+// ListSelect — the shared, keyboard-driven list used by every devkit screen.
+//
+// Built on <box>/<text> + useKeyboard (rather than the built-in <select>) so we
+// control row columns, multi-select marking, and colors. Supports:
+//   - arrows or j/k to move, with wrap-around
+//   - "/" to filter (type to narrow, Backspace to edit, Esc to clear)
+//   - Space / Tab to toggle a mark (when `multiSelect`)
+//   - "v" visual range: anchor at the cursor, sweep with j/k, "v" again to leave
+//     (commit) the swept rows; Esc cancels the sweep (when `multiSelect`)
+//   - Enter to submit (effective selection if any, otherwise the highlighted row)
+//   - q to cancel; Esc peels back one step at a time — clear filter, then cancel
+//     a visual sweep, then clear the selection — and only then a second Esc exits
+//     (the first shows a "press again" hint)
+//   - optional section headers via `sectionOf` (purely decorative — navigation is
+//     unaffected, headers are derived from the already-sorted items)
+// Pass `active={false}` to make it ignore keys (e.g. while a confirm/help shows).
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { useKeyboard, usePaste, useTerminalDimensions } from "@opentui/react";
+import { useTheme, useThemeControls } from "../theme-context";
+
+// Drop control chars (incl. CR/LF/Esc) from typed/pasted filter text.
+const printable = (s: string) => s.replace(/[\x00-\x1f]/g, "");
+
+export interface ListSelectProps<T> {
+  items: T[];
+  getKey: (item: T) => string;
+  renderRow: (item: T, state: { selected: boolean; marked: boolean }) => ReactNode;
+  /** Text matched against the "/" filter query. Defaults to getKey. */
+  filterText?: (item: T) => string;
+  /** Whether a row may be marked/submitted. Defaults to always true. */
+  isSelectable?: (item: T) => boolean;
+  multiSelect?: boolean;
+  /** Keys to pre-mark when the list first mounts (multiSelect only). */
+  initialMarked?: string[];
+  /**
+   * When true, a lone Esc cancels immediately (go back) in a single press — no
+   * peel of a sweep/selection and no "press again" confirmation. Use on
+   * transient picker screens where Esc means "go back one step".
+   */
+  immediateCancel?: boolean;
+  active?: boolean;
+  onSubmit: (items: T[]) => void;
+  onCancel?: () => void;
+  /** Called for un-handled keys when not filtering (e.g. "r", "a"). */
+  onExtraKey?: (name: string, current: T | null) => void;
+  /** Section id for an item; when set, a dim header is drawn at group boundaries. */
+  sectionOf?: (item: T) => string;
+  /** Header text for a section (defaults to the id + count). */
+  sectionLabel?: (sectionId: string, count: number) => string;
+  /** Notified when the user is mid-interaction (filtering or a visual sweep). */
+  onInteractingChange?: (busy: boolean) => void;
+  /** Enables [ / ] to move the highlighted row up / down. Called with the row and
+   *  direction; the list advances the cursor in lockstep so the highlight stays
+   *  on the moved row. Confined to a section when `sectionOf` is set. */
+  onReorder?: (item: T, dir: -1 | 1) => void;
+  emptyText?: string;
+  /** Max rows to show at once; defaults to terminal height minus chrome. */
+  maxVisible?: number;
+}
+
+export function ListSelect<T>(props: ListSelectProps<T>) {
+  const {
+    items,
+    getKey,
+    renderRow,
+    filterText = getKey,
+    isSelectable = () => true,
+    multiSelect = false,
+    initialMarked,
+    immediateCancel = false,
+    onReorder,
+    active = true,
+    onSubmit,
+    onCancel,
+    onExtraKey,
+    sectionOf,
+    sectionLabel,
+    onInteractingChange,
+    emptyText = "(nothing to show)",
+  } = props;
+
+  const theme = useTheme();
+  const { cycle: cycleTheme } = useThemeControls();
+
+  const [cursor, setCursor] = useState(0);
+  const [marked, setMarked] = useState<Set<string>>(() => new Set(initialMarked ?? []));
+  const [anchor, setAnchor] = useState<number | null>(null);
+  const [filtering, setFiltering] = useState(false);
+  const [query, setQuery] = useState("");
+  const [escArmed, setEscArmed] = useState(false); // first Esc arms, second exits
+
+  // Auto-disarm the "press Esc again" prompt after a short window.
+  const escTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const armEsc = () => {
+    setEscArmed(true);
+    if (escTimer.current) clearTimeout(escTimer.current);
+    escTimer.current = setTimeout(() => setEscArmed(false), 2000);
+  };
+  const disarmEsc = () => {
+    if (escTimer.current) clearTimeout(escTimer.current);
+    escTimer.current = null;
+    setEscArmed(false);
+  };
+  useEffect(() => () => disarmEsc(), []); // clear timer on unmount
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter((it) => filterText(it).toLowerCase().includes(q));
+  }, [items, query, filterText]);
+
+  const cur = Math.min(cursor, Math.max(0, filtered.length - 1));
+
+  // Keys swept by the active visual range (anchor..cursor, inclusive).
+  const rangeKeys = (a: number | null, c: number, list: T[]): string[] => {
+    if (a === null) return [];
+    const lo = Math.min(a, c);
+    const hi = Math.max(a, c);
+    const keys: string[] = [];
+    for (let i = lo; i <= hi; i++) {
+      const it = list[i];
+      if (it && isSelectable(it)) keys.push(getKey(it));
+    }
+    return keys;
+  };
+
+  // marks ∪ visual range — what the indicator shows and what Enter submits.
+  const effective = useMemo(() => {
+    const set = new Set(marked);
+    for (const k of rangeKeys(anchor, cur, filtered)) set.add(k);
+    return set;
+  }, [marked, anchor, cur, filtered]);
+
+  // Mirror derived state so the keyboard handler always reads fresh values.
+  const ref = useRef({ filtered, cur, filtering, anchor, marked, escArmed });
+  ref.current = { filtered, cur, filtering, anchor, marked, escArmed };
+
+  // Let the parent pause things (e.g. auto-refresh) while the user is filtering
+  // or mid visual-sweep, so the list doesn't shift under them.
+  const interacting = filtering || anchor !== null;
+  useEffect(() => {
+    onInteractingChange?.(interacting);
+  }, [interacting]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Drop marks whose row no longer exists (after a kill, refresh, or filter).
+  useEffect(() => {
+    setMarked((prev) => {
+      if (prev.size === 0) return prev;
+      const keys = new Set(items.map(getKey));
+      const next = new Set<string>();
+      for (const k of prev) if (keys.has(k)) next.add(k);
+      return next.size === prev.size ? prev : next;
+    });
+  }, [items]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const move = (delta: number) => {
+    const n = ref.current.filtered.length;
+    if (!n) return;
+    let i = (ref.current.cur + delta) % n;
+    if (i < 0) i += n;
+    setCursor(i);
+  };
+
+  // Mouse: scroll moves the cursor (clamped, no wrap); a click highlights a row
+  // and a double-click activates it.
+  const scrollBy = (delta: number) => {
+    const n = ref.current.filtered.length;
+    if (!n) return;
+    setCursor((c) => Math.max(0, Math.min(n - 1, c + delta)));
+  };
+  const lastClick = useRef<{ idx: number; at: number }>({ idx: -1, at: 0 });
+  const clickRow = (idx: number) => {
+    setCursor(idx);
+    const now = Date.now();
+    const dbl = lastClick.current.idx === idx && now - lastClick.current.at < 400;
+    lastClick.current = dbl ? { idx: -1, at: 0 } : { idx, at: now };
+    if (dbl) {
+      const item = ref.current.filtered[idx];
+      if (item && isSelectable(item)) onSubmit([item]);
+    }
+  };
+
+  const toggleMark = () => {
+    const item = ref.current.filtered[ref.current.cur];
+    if (!item || !isSelectable(item)) return;
+    const k = getKey(item);
+    setMarked((prev) => {
+      const next = new Set(prev);
+      next.has(k) ? next.delete(k) : next.add(k);
+      return next;
+    });
+  };
+
+  // "v": start a sweep, or leave it (committing the swept rows to marks).
+  const toggleVisual = () => {
+    const { anchor: a, cur: c, filtered: list } = ref.current;
+    if (a === null) {
+      setAnchor(c);
+      return;
+    }
+    const sweep = rangeKeys(a, c, list);
+    setMarked((prev) => new Set([...prev, ...sweep]));
+    setAnchor(null);
+  };
+
+  // "[" / "]": ask the parent to move the highlighted row up/down, and advance
+  // the cursor in lockstep so the highlight stays on it. Won't cross a section
+  // boundary (when sectionOf is set). The parent persists; we just move the view.
+  const reorder = (dir: -1 | 1) => {
+    if (!onReorder) return;
+    const { filtered: list, cur: c } = ref.current;
+    const j = c + dir;
+    const a = list[c];
+    const b = list[j];
+    if (!a || !b) return;
+    if (sectionOf && sectionOf(a) !== sectionOf(b)) return;
+    onReorder(a, dir);
+    setCursor(j);
+  };
+
+  const submit = () => {
+    const { filtered: list, cur: c, anchor: a, marked: m } = ref.current;
+    if (multiSelect) {
+      const eff = new Set(m);
+      for (const k of rangeKeys(a, c, list)) eff.add(k);
+      if (eff.size) {
+        const picked = items.filter((it) => eff.has(getKey(it)) && isSelectable(it));
+        if (picked.length) onSubmit(picked);
+        return;
+      }
+    }
+    const item = list[c];
+    if (item && isSelectable(item)) onSubmit([item]);
+  };
+
+  // Pasting (bracketed paste) goes into the filter query while filtering.
+  usePaste((event) => {
+    if (!active || !ref.current.filtering) return;
+    const text = printable(new TextDecoder().decode(event.bytes));
+    if (text) {
+      setQuery((q) => q + text);
+      setCursor(0);
+    }
+  });
+
+  useKeyboard((key) => {
+    if (!active) return;
+
+    // Any key other than Esc cancels a pending "press Esc again to exit".
+    if (key.name !== "escape" && ref.current.escArmed) disarmEsc();
+
+    if (ref.current.filtering) {
+      if (key.name === "escape") {
+        setFiltering(false);
+        setQuery("");
+        setCursor(0);
+      } else if (key.name === "return") {
+        submit();
+      } else if (key.name === "backspace") {
+        setQuery((q) => q.slice(0, -1));
+        setCursor(0);
+      } else if (key.name === "up") {
+        move(-1);
+      } else if (key.name === "down") {
+        move(1);
+      } else {
+        // A single char, or a paste delivered as one key chunk. Reject escape
+        // sequences (special keys) — they always contain an Esc byte.
+        const ch = key.sequence;
+        if (ch && !key.ctrl && !key.meta && !ch.includes("\x1b")) {
+          const text = printable(ch);
+          if (text) {
+            setQuery((q) => q + text);
+            setCursor(0);
+          }
+        }
+      }
+      return;
+    }
+
+    switch (key.name) {
+      case "up":
+      case "k":
+        move(-1);
+        break;
+      case "down":
+      case "j":
+        move(1);
+        break;
+      case "return":
+        submit();
+        break;
+      case "space":
+      case "tab":
+        if (multiSelect) toggleMark();
+        break;
+      case "v":
+        if (multiSelect) toggleVisual();
+        break;
+      case "[":
+        if (onReorder) reorder(-1);
+        else onExtraKey?.(key.name, ref.current.filtered[ref.current.cur] ?? null);
+        break;
+      case "]":
+        if (onReorder) reorder(1);
+        else onExtraKey?.(key.name, ref.current.filtered[ref.current.cur] ?? null);
+        break;
+      case "/":
+        setFiltering(true);
+        setQuery("");
+        setCursor(0);
+        break;
+      case "escape":
+        if (immediateCancel) {
+          // Transient picker: Esc goes back in a single press, no prompt.
+          onCancel?.();
+        } else if (ref.current.anchor !== null) {
+          // Esc peels back state one step at a time: cancel a visual sweep, then
+          // clear the selection, and only once nothing is selected does a second
+          // Esc exit (the first arms the "press again" prompt).
+          setAnchor(null);
+        } else if (ref.current.marked.size > 0) {
+          setMarked(new Set());
+          disarmEsc();
+        } else if (ref.current.escArmed) onCancel?.();
+        else armEsc();
+        break;
+      case "q":
+        onCancel?.();
+        break;
+      case "t":
+        cycleTheme();
+        break;
+      default:
+        onExtraKey?.(key.name, ref.current.filtered[ref.current.cur] ?? null);
+    }
+  });
+
+  // Per-section counts across the whole filtered list (for header labels).
+  const sectionCounts = useMemo(() => {
+    const counts = new Map<string, number>();
+    if (sectionOf) {
+      for (const it of filtered) {
+        const s = sectionOf(it);
+        counts.set(s, (counts.get(s) ?? 0) + 1);
+      }
+    }
+    return counts;
+  }, [filtered, sectionOf]);
+
+  const headerFor = (id: string) =>
+    sectionLabel ? sectionLabel(id, sectionCounts.get(id) ?? 0) : `${id} (${sectionCounts.get(id) ?? 0})`;
+
+  // Viewport windowing around the cursor.
+  const { height } = useTerminalDimensions();
+  const maxVisible = Math.max(3, props.maxVisible ?? height - 11);
+  const total = filtered.length;
+  let start = 0;
+  if (total > maxVisible) {
+    start = Math.min(Math.max(0, cur - Math.floor(maxVisible / 2)), total - maxVisible);
+  }
+  const visible = filtered.slice(start, start + maxVisible);
+
+  const selectedCount = effective.size;
+
+  return (
+    <box
+      style={{ flexDirection: "column" }}
+      onMouseScroll={(e) => {
+        if (!active) return;
+        const dir = e.scroll?.direction;
+        if (dir === "up") scrollBy(-1);
+        else if (dir === "down") scrollBy(1);
+      }}
+    >
+      {filtering ? (
+        <text>
+          <span fg={theme.accent}>/ </span>
+          {query}
+          <span fg={theme.dim}>_</span>
+        </text>
+      ) : null}
+
+      {multiSelect && (selectedCount > 0 || anchor !== null) ? (
+        <text>
+          <span fg={theme.green}>{`* ${selectedCount} selected`}</span>
+          {anchor !== null ? <span fg={theme.yellow}>{"   VISUAL - v to keep, Esc to cancel"}</span> : null}
+        </text>
+      ) : null}
+
+      {total === 0 ? <text fg={theme.dim}>{emptyText}</text> : null}
+      {start > 0 ? <text fg={theme.dim}>{`  ^ ${start} more`}</text> : null}
+
+      {visible.map((item, i) => {
+        const idx = start + i;
+        const selected = idx === cur;
+        const k = getKey(item);
+        const isMarked = effective.has(k);
+        const prev = i > 0 ? visible[i - 1] : undefined;
+        const section = sectionOf?.(item);
+        const showHeader =
+          section !== undefined && (prev === undefined || sectionOf?.(prev) !== section);
+        return (
+          <box key={k} style={{ flexDirection: "column" }}>
+            {showHeader ? (
+              <text fg={theme.accentDim}>{headerFor(section!)}</text>
+            ) : null}
+            <box
+              style={{ flexDirection: "row", backgroundColor: selected ? theme.selBg : undefined }}
+              onMouseDown={() => {
+                if (active) clickRow(idx);
+              }}
+              onMouseOver={() => {
+                if (active) setCursor(idx); // hover moves the highlight to this row
+              }}
+            >
+              <text fg={selected ? theme.accent : theme.dim}>{selected ? "> " : "  "}</text>
+              {multiSelect ? (
+                <text fg={isMarked ? theme.green : theme.dim}>{isMarked ? "* " : "- "}</text>
+              ) : null}
+              {renderRow(item, { selected, marked: isMarked })}
+            </box>
+          </box>
+        );
+      })}
+
+      {start + maxVisible < total ? (
+        <text fg={theme.dim}>{`  v ${total - start - maxVisible} more`}</text>
+      ) : null}
+
+      {escArmed ? <text fg={theme.yellow}>Press Esc again to exit</text> : null}
+    </box>
+  );
+}

package/pkg/tui/components/TextPrompt.tsx

@@ -0,0 +1,83 @@
+// TextPrompt — a single-line text input. Owns its own keyboard handler (mirrors
+// ListSelect's "/" filter), so render it only while it should capture input and
+// set any underlying list to `active={false}`. Give each use a distinct React
+// `key` when the `initial` value differs between steps, so it remounts fresh.
+//
+// Accepts both typed characters and pasted text — the terminal delivers a paste
+// either as a bracketed-paste event (usePaste) or as one multi-character key
+// chunk, so we handle both.
+
+import { useState } from "react";
+import { useKeyboard, usePaste } from "@opentui/react";
+import { useTheme } from "../theme-context";
+
+// Drop control chars (incl. CR/LF/Esc) so pasted/typed text stays single-line.
+const printable = (s: string) => s.replace(/[\x00-\x1f]/g, "");
+
+export function TextPrompt({
+  label,
+  initial = "",
+  placeholder,
+  active = true,
+  onSubmit,
+  onCancel,
+}: {
+  label: string;
+  initial?: string;
+  placeholder?: string;
+  active?: boolean;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}) {
+  const theme = useTheme();
+  const [value, setValue] = useState(initial);
+
+  usePaste((event) => {
+    if (!active) return;
+    const text = printable(new TextDecoder().decode(event.bytes));
+    if (text) setValue((v) => v + text);
+  });
+
+  useKeyboard((key) => {
+    if (!active) return;
+    if (key.name === "escape") {
+      onCancel();
+    } else if (key.name === "return") {
+      onSubmit(value);
+    } else if (key.name === "backspace") {
+      setValue((v) => v.slice(0, -1));
+    } else {
+      // A single char, or a paste delivered as one key chunk. Reject escape
+      // sequences (special keys) — they always contain an Esc byte.
+      const ch = key.sequence;
+      if (ch && !key.ctrl && !key.meta && !ch.includes("\x1b")) {
+        const text = printable(ch);
+        if (text) setValue((v) => v + text);
+      }
+    }
+  });
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        border: true,
+        borderStyle: "rounded",
+        borderColor: theme.accent,
+        padding: 1,
+        marginTop: 1,
+      }}
+    >
+      <text fg={theme.accent}>{label}</text>
+      <text>
+        {value ? (
+          <span fg={theme.fg}>{value}</span>
+        ) : (
+          <span fg={theme.dim}>{placeholder ?? ""}</span>
+        )}
+        <span fg={theme.dim}>_</span>
+      </text>
+      <text fg={theme.dim}>enter confirm | esc cancel | paste supported</text>
+    </box>
+  );
+}

package/pkg/tui/components/index.ts

@@ -0,0 +1,7 @@
+export { ListSelect } from "./ListSelect";
+export type { ListSelectProps } from "./ListSelect";
+export { Header } from "./Header";
+export { Confirm } from "./Confirm";
+export { Help } from "./Help";
+export type { Binding } from "./Help";
+export { TextPrompt } from "./TextPrompt";

package/pkg/tui/devkit.tsx

@@ -0,0 +1,79 @@
+#!/usr/bin/env bun
+// devkit — the hub. Lists every tool and runs the chosen one.
+//
+// Each tool is launched as a child process (`bun pkg/tui/<tool>.tsx`) with the
+// terminal inherited, so it gets a clean screen and can hand off / take over
+// stdio as needed. When the tool exits, the hub menu comes back. The same tool
+// files run standalone, so `killport` / `launch` work without going through `devkit`.
+
+import { useState } from "react";
+import { join } from "node:path";
+import { mountScreen } from "./app";
+import { useTheme } from "./theme-context";
+import { Header, ListSelect, Help, type Binding } from "./components";
+import { TOOLS, type ToolDef } from "./tools";
+
+const HELP: Binding[] = [
+  { keys: "j / k", desc: "move (or arrow keys)" },
+  { keys: "/", desc: "filter tools" },
+  { keys: "enter", desc: "run the selected tool" },
+  { keys: "t", desc: "cycle color theme" },
+  { keys: "q / esc esc", desc: "quit (q, or Esc twice)" },
+];
+
+function ToolRow({ t, selected }: { t: ToolDef; selected: boolean }) {
+  const theme = useTheme();
+  return (
+    <text>
+      <span fg={selected ? theme.selFg : theme.fg}>{t.label.padEnd(12)}</span>
+      <span fg={theme.dim}>{t.description}</span>
+    </text>
+  );
+}
+
+function DevkitHub({ onPick }: { onPick: (t: ToolDef | null) => void }) {
+  const [showHelp, setShowHelp] = useState(false);
+  if (showHelp) {
+    return <Help title="devkit - keys" bindings={HELP} onClose={() => setShowHelp(false)} />;
+  }
+  return (
+    <box style={{ padding: 1, flexDirection: "column" }}>
+      <Header
+        title="devkit"
+        subtitle="developer toolbelt"
+        hint="j/k move | / filter | enter run | t theme | h help | q quit"
+      />
+      <ListSelect
+        items={TOOLS}
+        getKey={(t) => t.id}
+        filterText={(t) => `${t.label} ${t.description}`}
+        active={!showHelp}
+        emptyText="No tools registered."
+        onSubmit={(items) => onPick(items[0] ?? null)}
+        onCancel={() => onPick(null)}
+        onExtraKey={(name) => {
+          if (name === "h") setShowHelp(true);
+        }}
+        renderRow={(t, { selected }) => <ToolRow t={t} selected={selected} />}
+      />
+    </box>
+  );
+}
+
+export async function runHub() {
+  for (;;) {
+    const picked = await mountScreen<ToolDef | null>((done) => <DevkitHub onPick={done} />);
+    if (!picked) break;
+    const child = Bun.spawn(["bun", join(import.meta.dir, picked.file)], {
+      stdin: "inherit",
+      stdout: "inherit",
+      stderr: "inherit",
+    });
+    await child.exited;
+  }
+  process.exit(0);
+}
+
+if (import.meta.main) {
+  await runHub();
+}