catherd-cli 0.2.0 → 1.0.0

package/src/entry/tui/views/status.tsx

@@ -0,0 +1,206 @@
+import type { Check } from "../../../services/doctor-checks.ts";
+import { useApp, useNow } from "../providers/app.tsx";
+import { useData } from "../providers/data.tsx";
+import { useCommandLayer } from "../providers/keymap.tsx";
+import { useUi } from "../providers/theme.tsx";
+import { ago, plural, wrap } from "../text.ts";
+import { glyph, STATE_TOKEN } from "../theme.ts";
+import { Line, type Part } from "../widgets/line.tsx";
+import { List, type ListItem, useSelected } from "../widgets/list.tsx";
+import { hereWord, type RunRow } from "../effects.ts";
+import { showProfile } from "./profile-actions.ts";
+import { staleLines } from "./profiles.tsx";
+
+/** `✓ ready` / `! not logged in` / `✗ missing`: state is always glyph and word (spec §9.3). */
+function stateParts(state: Check["state"], word: string, plain: boolean): Part[] {
+  return [{ text: `${glyph(state, plain)} ${word}`.padEnd(16), tone: STATE_TOKEN[state] }];
+}
+
+/** A run in one line: its state word first, then title, repo and progress (research C4). */
+export function runParts(r: RunRow, now: number, plain: boolean): Part[] {
+  const bits = [plural(r.roleRuns, "role run"), `${r.landed} landed`];
+  if (r.budget !== null) bits.push(`${Math.round(r.budget * 100)}% budget`);
+  return [
+    r.live
+      ? { text: `${glyph("live", plain)} live  `, tone: "info" }
+      : { text: `${glyph("dot", plain)} idle  `, tone: "muted" },
+    { text: `${r.title}  `, bold: true },
+    { text: `${r.repo}  `, tone: "muted" },
+    { text: `${r.live ? `${r.live} live · ` : ""}${bits.join(" · ")}  `, tone: "muted" },
+    { text: ago(now - Date.parse(r.createdAt)), tone: "muted" },
+  ];
+}
+
+/**
+ * Spec §9.1 tab 1: each check as `glyph word — detail` with its full fix command (y copies it), the
+ * active profile, and the last five runs. enter opens the profile or a run.
+ */
+export function StatusView(props: { width: number; height: number }) {
+  const app = useApp();
+  const data = useData();
+  const ui = useUi();
+  const now = useNow(1_000);
+  const { selected, select: setSelected, current: selectedNow } = useSelected();
+  const checks = data.report?.checks ?? [];
+  const profiles = data.profiles.value ?? { names: [], active: "…", here: "…", repo: null };
+  const runs = (data.runs.value?.rows ?? []).slice(0, 5);
+  const items: ListItem[] = [];
+  const heading = (key: string, text: string, right = "") =>
+    items.push({
+      key,
+      selectable: false,
+      render: (_s, w) => (
+        <Line
+          width={w}
+          parts={[
+            { text, bold: true },
+            { text: " ".repeat(Math.max(1, w - text.length - right.length - 1)) },
+            { text: right, tone: "muted" },
+          ]}
+        />
+      ),
+    });
+  const checked = data.checking
+    ? "checking…"
+    : data.checkedAt !== null
+      ? `checked ${ago(now - data.checkedAt)}`
+      : "";
+  heading("h:setup", " SETUP", checked);
+  if (data.checkError)
+    items.push({
+      key: "error",
+      selectable: false,
+      render: (_s, w) => (
+        <Line
+          width={w}
+          parts={[{ text: `   ${glyph("fail", ui.plain)} ${data.checkError}`, tone: "error" }]}
+        />
+      ),
+    });
+  for (const c of checks) {
+    // the detail wraps under the label instead of being cut: it is often a path (spec §9.3)
+    const said = wrap(`${c.label}${c.detail ? ` — ${c.detail}` : ""}`, Math.max(20, props.width - 19));
+    const first = said[0] ?? "";
+    const label = first.startsWith(c.label) ? c.label : "";
+    items.push({
+      key: `check:${c.id}`,
+      selectable: true,
+      render: (sel, w) => (
+        <Line
+          width={w}
+          selected={sel}
+          parts={[
+            { text: "   " },
+            ...stateParts(c.state, c.word, ui.plain),
+            { text: label, bold: true },
+            { text: first.slice(label.length), tone: "muted" },
+          ]}
+        />
+      ),
+    });
+    said.slice(1).forEach((line, i) =>
+      items.push({
+        key: `detail:${c.id}:${i}`,
+        selectable: false,
+        render: (_s, w) => <Line width={w} parts={[{ text: `${" ".repeat(19)}${line}`, tone: "muted" }]} />,
+      }),
+    );
+    if (c.fix)
+      wrap(`fix: ${c.fix}`, Math.max(20, props.width - 22)).forEach((line, i) =>
+        items.push({
+          key: `fix:${c.id}:${i}`,
+          selectable: false,
+          render: (_s, w) => <Line width={w} parts={[{ text: `${" ".repeat(20)}${line}`, tone: "muted" }]} />,
+        }),
+      );
+  }
+  heading("h:profile", " PROFILE");
+  // until the first check is in, nothing is selectable, so the cursor starts on the first check
+  const ready = data.report !== null || data.checkError !== null;
+  items.push({
+    key: "profile",
+    selectable: ready,
+    render: (sel, w) => (
+      <Line
+        width={w}
+        selected={sel}
+        parts={[
+          { text: `   ${profiles.here}`, bold: true },
+          {
+            text: `  ${hereWord(profiles)} · ${plural(profiles.names.length, "profile")}`,
+            tone: "muted",
+          },
+        ]}
+      />
+    ),
+  });
+  // a later read that failed: the row above is the last good read, not the profile now
+  for (const [i, p] of staleLines(data, ui.plain, { fix: false }).entries())
+    items.push({
+      key: `profile:stale:${i}`,
+      selectable: false,
+      render: (_s, w) => <Line width={w} parts={[{ ...p, text: `  ${p.text}` }]} />,
+    });
+  heading("h:runs", " RECENT RUNS");
+  if (runs.length === 0)
+    items.push({
+      key: "runs:none",
+      selectable: false,
+      render: (_s, w) => <Line width={w} parts={[{ text: "   no runs yet", tone: "muted" }]} />,
+    });
+  for (const r of runs)
+    items.push({
+      key: `run:${r.id}`,
+      selectable: ready,
+      render: (sel, w) => (
+        <Line width={w} selected={sel} parts={[{ text: "   " }, ...runParts(r, now, ui.plain)]} />
+      ),
+    });
+
+  const checkAt = (key: string | null) => checks.find((c) => key === `check:${c.id}`);
+  useCommandLayer("tab.status", {
+    "status.recheck": () => data.recheck(),
+    "status.copy": () => {
+      const selectedCheck = checkAt(selectedNow());
+      if (!selectedCheck?.fix) return app.toast({ variant: "info", message: "This row has no fix command" });
+      const ok = app.copy(selectedCheck.fix);
+      app.toast(
+        ok
+          ? { variant: "success", message: "Copied the fix command" }
+          : { variant: "warning", message: "This terminal cannot copy; the command is shown in full" },
+      );
+    },
+  });
+  useCommandLayer("row.status", {
+    "status.open": () => {
+      const selected = selectedNow();
+      const selectedCheck = checkAt(selected);
+      // the PROFILE row is what this directory runs on; doctor's `profile` row is the global active one,
+      // and its `profile:<name>` rows are the repo-bound ones
+      const name =
+        selected === "profile"
+          ? profiles.here
+          : selectedCheck?.id === "profile"
+            ? profiles.active
+            : selectedCheck?.id.startsWith("profile:")
+              ? selectedCheck.id.slice("profile:".length)
+              : null;
+      if (name !== null) {
+        showProfile(app, name);
+      } else if (selected?.startsWith("run:")) {
+        app.dispatch({ type: "tab", tab: "runs" });
+        app.dispatch({ type: "run", id: selected.slice("run:".length) });
+      }
+    },
+  });
+  return (
+    <List
+      items={items}
+      selected={selected}
+      onSelect={setSelected}
+      width={props.width}
+      height={props.height}
+      empty="checking…"
+    />
+  );
+}

package/src/entry/tui/widgets/chrome.tsx

@@ -0,0 +1,114 @@
+import { TextAttributes } from "@opentui/core";
+import { usePendingSequence } from "@opentui/keymap/react";
+import { type CommandId, formatKeys, LEADER } from "../commands.ts";
+import { MODE, reachableCommands, useKeybinds, useKeymap, useKeymapVersion } from "../providers/keymap.tsx";
+import { useTone, useUi } from "../providers/theme.tsx";
+import { FACES, type Mood } from "../theme.ts";
+import { TABS, type Tab } from "../state.ts";
+import { width as widthOf } from "../text.ts";
+import { Line, type Part } from "./line.tsx";
+
+const TAB_TITLE: Record<Tab, string> = { status: "Status", profiles: "Profiles", runs: "Runs" };
+
+/** Spec §9.3 header: one line with the version, the profile, the unsaved count and the mood face. */
+export function Header(props: {
+  version: string;
+  profile: string | null;
+  active: boolean;
+  /** the word after the profile: "active", or "this repo" in a bound repo */
+  label?: string;
+  dirty: number;
+  mood: Mood;
+  width: number;
+}) {
+  const pending = usePendingSequence();
+  const left: Part[] = [{ text: ` catherd ${props.version}`, bold: true }];
+  if (props.profile) {
+    left.push({ text: `  profile ${props.profile}` });
+    if (props.active) left.push({ text: ` (${props.label ?? "active"})`, tone: "muted" });
+  }
+  if (props.dirty > 0) left.push({ text: ` · ${props.dirty} unsaved`, tone: "warning" });
+  const right: Part[] = [];
+  if (pending.length)
+    right.push({
+      text: `${pending.map((p) => (p.tokenName === "leader" ? LEADER : p.display)).join(" ")} …  `,
+      tone: "accent",
+    });
+  right.push({ text: `${FACES[props.mood]} `, tone: props.mood === "failed" ? "error" : "muted" });
+  const used = [...left, ...right].reduce((n, p) => n + widthOf(p.text), 0);
+  const gap = Math.max(1, props.width - used);
+  return <Line width={props.width} parts={[...left, { text: " ".repeat(gap) }, ...right]} />;
+}
+
+/** The tab strip: ` 1 Status   2 Profiles   3 Runs`, the active one bold in the accent. */
+export function Tabs(props: { tab: Tab; width: number }) {
+  const ui = useUi();
+  const tone = useTone();
+  return (
+    <box flexDirection="row" width={props.width} height={1}>
+      {TABS.map((t, i) => {
+        const on = t === props.tab;
+        const text = ` ${i + 1} ${TAB_TITLE[t]} `;
+        return (
+          <text
+            key={t}
+            wrapMode="none"
+            fg={on ? tone(ui.color ? "accent" : "text") : tone("muted")}
+            attributes={on ? TextAttributes.BOLD | (ui.color ? 0 : TextAttributes.INVERSE) : 0}
+          >
+            {i === 0 ? text : ` ${text}`}
+          </text>
+        );
+      })}
+    </box>
+  );
+}
+
+/**
+ * Spec §9.2: footer hints are generated from the commands a key would reach now, in their `hint` order,
+ * as `key label` (the key as the user bound it). Hints drop from the end to fit, but the palette and
+ * help hints stay.
+ */
+export function Footer(props: { width: number }) {
+  useKeymapVersion();
+  const keymap = useKeymap();
+  const keys = useKeybinds();
+  const ui = useUi();
+  const modal = keymap.getData(MODE) === "modal";
+  const hints: { id: string; text: string }[] = [];
+  let last: { order: number; label: string; keys: string[] } | null = null;
+  for (const c of reachableCommands(keymap)
+    .filter((c) => c.hint !== null && keys[c.id].length > 0 && (c.id !== "app.back" || modal))
+    .sort((a, b) => (a.hint as number) - (b.hint as number))) {
+    const key = formatKeys(keys[c.id as CommandId].slice(0, 1), ui.plain);
+    const label = c.short ?? c.title;
+    // commands with the same order and label read as one hint: `↑↓ move`
+    if (last && last.order === c.hint && last.label === label) {
+      last.keys.push(key);
+      const joined = last.keys.join(ui.plain ? "/" : "");
+      (hints.at(-1) as { text: string }).text = `${joined} ${label}`;
+      continue;
+    }
+    last = { order: c.hint as number, label, keys: [key] };
+    hints.push({ id: c.id, text: `${key} ${label}` });
+  }
+  const fixed = hints.filter((h) => h.id === "app.palette" || h.id === "app.help");
+  const rest = hints.filter((h) => !fixed.includes(h));
+  const sep = "  ";
+  const room = props.width - 1 - fixed.reduce((n, h) => n + widthOf(h.text) + sep.length, 0);
+  const kept: string[] = [];
+  let used = 0;
+  for (const h of rest) {
+    if (used + widthOf(h.text) + sep.length > room) break;
+    kept.push(h.text);
+    used += widthOf(h.text) + sep.length;
+  }
+  const all = [...kept, ...fixed.map((h) => h.text)];
+  const parts: Part[] = [{ text: " " }];
+  all.forEach((t, i) => {
+    const at = t.indexOf(" ");
+    parts.push({ text: t.slice(0, at), bold: true }, { text: t.slice(at), tone: "muted" });
+    if (i < all.length - 1) parts.push({ text: sep });
+  });
+  return <Line width={props.width} parts={parts} />;
+}

package/src/entry/tui/widgets/dialog-confirm.tsx

@@ -0,0 +1,58 @@
+// Adapted from anomalyco/opencode packages/tui/src/ui/dialog-confirm.tsx (MIT, © 2025 opencode);
+// see THIRD_PARTY_NOTICES.md.
+import { useRef, useState } from "react";
+import { useApp } from "../providers/app.tsx";
+import { useCommandLayer } from "../providers/keymap.tsx";
+import type { Dialog as DialogState } from "../state.ts";
+import { wrap } from "../text.ts";
+import { Dialog } from "./dialog.tsx";
+import { Line } from "./line.tsx";
+
+type Confirm = Extract<DialogState, { kind: "confirm" }>;
+
+/** A row of buttons: ←/→ or tab move, enter chooses (spec §9.2 confirmations; never "any other key"). */
+export function Buttons(props: { labels: string[]; focused: number; width: number }) {
+  const cells = props.labels.map((l) => `[ ${l} ]`);
+  const used = cells.reduce((n, c) => n + Bun.stringWidth(c) + 2, 0);
+  return (
+    <box flexDirection="row" width={props.width} height={1}>
+      {cells.map((c, i) => (
+        <box key={c} flexDirection="row">
+          <Line width={Bun.stringWidth(c)} parts={[{ text: c }]} selected={i === props.focused} />
+          <text>{"  "}</text>
+        </box>
+      ))}
+      <text>{" ".repeat(Math.max(0, props.width - used))}</text>
+    </box>
+  );
+}
+
+/** A real confirmation: the message, then [no] [yes]; a destructive one starts on "no". */
+export function DialogConfirm(props: { dialog: Confirm }) {
+  const app = useApp();
+  const d = props.dialog;
+  const [focused, setFocusedState] = useState(d.destructive ? 0 : 1);
+  // keys in one burst read the focus as it is now, not as it was drawn
+  const focusedRef = useRef(focused);
+  const setFocused = (f: number) => {
+    focusedRef.current = f;
+    setFocusedState(f);
+  };
+  useCommandLayer("dialog", {
+    "dialog.left": () => setFocused(0),
+    "dialog.right": () => setFocused(1),
+    "dialog.submit": () => (focusedRef.current === 1 ? app.answer("yes") : app.dispatch({ type: "close" })),
+  });
+  return (
+    <Dialog
+      title={d.title}
+      rows={(inner) => [
+        ...d.message.flatMap((m, i) =>
+          wrap(m, inner).map((l, j) => <Line key={`m${i}-${j}`} width={inner} parts={[{ text: l }]} />),
+        ),
+        <Line key="gap" width={inner} parts={[]} />,
+        <Buttons key="buttons" labels={[d.no, d.yes]} focused={focused} width={inner} />,
+      ]}
+    />
+  );
+}

package/src/entry/tui/widgets/dialog-prompt.tsx

@@ -0,0 +1,52 @@
+// Adapted from anomalyco/opencode packages/tui/src/ui/dialog-prompt.tsx (MIT, © 2025 opencode);
+// see THIRD_PARTY_NOTICES.md.
+import type { InputRenderable } from "@opentui/core";
+import { useEffect, useRef } from "react";
+import { useApp } from "../providers/app.tsx";
+import { useCommandLayer } from "../providers/keymap.tsx";
+import { useTone } from "../providers/theme.tsx";
+import type { Dialog as DialogState } from "../state.ts";
+import { Dialog } from "./dialog.tsx";
+import { Line } from "./line.tsx";
+
+type Prompt = Extract<DialogState, { kind: "prompt" }>;
+
+/**
+ * A value editor: one input that owns every printable key, enter to submit, esc to cancel. A refused
+ * value keeps what was typed and shows why under it (research K13).
+ */
+export function DialogPrompt(props: { dialog: Prompt }) {
+  const app = useApp();
+  const tone = useTone();
+  const input = useRef<InputRenderable>(null);
+  const d = props.dialog;
+  useEffect(() => {
+    input.current?.focus();
+  }, []);
+  // the value typed so far, not the one drawn: text typed in the same tick as enter has not drawn yet
+  useCommandLayer("dialog", {
+    "dialog.submit": () => {
+      const top = app.getState().dialogs.at(-1);
+      app.answer(top?.kind === "prompt" ? top.value : d.value);
+    },
+  });
+  return (
+    <Dialog
+      title={d.title}
+      rows={(inner) => [
+        <Line key="label" width={inner} parts={[{ text: d.label, tone: "muted" }]} />,
+        <box key="input" flexDirection="row" width={inner} height={1}>
+          <text fg={tone("accent")}>{"> "}</text>
+          <input
+            ref={input}
+            value={d.value}
+            onInput={(v: string) => app.dispatch({ type: "input", value: v })}
+            width={inner - 2}
+          />
+        </box>,
+        <Line key="error" width={inner} parts={d.error ? [{ text: d.error, tone: "error" }] : []} />,
+        <Line key="hint" width={inner} parts={[{ text: "enter to save, esc to cancel", tone: "muted" }]} />,
+      ]}
+    />
+  );
+}

package/src/entry/tui/widgets/dialog-select.tsx

@@ -0,0 +1,212 @@
+// Adapted from anomalyco/opencode packages/tui/src/ui/dialog-select.tsx (MIT, © 2025 opencode);
+// see THIRD_PARTY_NOTICES.md.
+import type { InputRenderable } from "@opentui/core";
+import { useTerminalDimensions } from "@opentui/react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { useApp } from "../providers/app.tsx";
+import { useCommandLayer } from "../providers/keymap.tsx";
+import { useTone, useUi } from "../providers/theme.tsx";
+import { type Dialog as DialogState, isArmed, type SelectOption } from "../state.ts";
+import { glyph } from "../theme.ts";
+import { Dialog, dialogRows } from "./dialog.tsx";
+import { Line, type Part } from "./line.tsx";
+import { windowOf } from "./list.tsx";
+
+type Select = Extract<DialogState, { kind: "select" }>;
+
+interface Entry {
+  key: string;
+  heading: string | null;
+  option: SelectOption | null;
+}
+
+/** Options matching every word of `text` in their title, group or detail. */
+export function matchOptions(options: SelectOption[], text: string): SelectOption[] {
+  const words = text.toLowerCase().split(/\s+/).filter(Boolean);
+  return options.filter((o) => {
+    const hay = `${o.title} ${o.group ?? ""} ${o.detail ?? ""} ${o.cli ?? ""}`.toLowerCase();
+    return words.every((w) => hay.includes(w));
+  });
+}
+
+/** Grouped lines for the options: a heading before each group, Suggested first while not filtering. */
+export function entriesOf(d: Select, text: string): Entry[] {
+  const shown = matchOptions(d.options, text);
+  const out: Entry[] = [];
+  if (!text.trim() && d.suggested?.length) {
+    out.push({ key: "h:Suggested", heading: "Suggested", option: null });
+    for (const v of d.suggested) {
+      const o = d.options.find((x) => x.value === v);
+      if (o) out.push({ key: `s:${v}`, heading: null, option: o });
+    }
+  }
+  let group: string | undefined;
+  for (const o of shown) {
+    if (o.group !== undefined && o.group !== group)
+      out.push({ key: `h:${o.group}`, heading: o.group, option: null });
+    group = o.group;
+    out.push({ key: `o:${o.value}`, heading: null, option: o });
+  }
+  return out;
+}
+
+/**
+ * The picker every list dialog uses (palette, help, profile list, treat-like, failover, default rung):
+ * a filter that owns the letters, ↑/↓ or ctrl+p/ctrl+n to move, enter to choose, esc to cancel; ctrl+d
+ * twice deletes where the dialog offers it (spec §9.2).
+ */
+export function DialogSelect(props: { dialog: Select }) {
+  const app = useApp();
+  const ui = useUi();
+  const tone = useTone();
+  const dims = useTerminalDimensions();
+  const input = useRef<InputRenderable>(null);
+  const [text, setText] = useState("");
+  const [index, setIndex] = useState(0);
+  // what a key handler reads: the filter and cursor as they are now, not as drawn (keys in one tick)
+  const textRef = useRef("");
+  const indexRef = useRef(0);
+  const [top, setTop] = useState(0);
+  useEffect(() => {
+    input.current?.focus();
+  }, []);
+  const pick = (t: string, i: number) => {
+    const entries = entriesOf(props.dialog, t);
+    const selectable = entries.flatMap((e, n) => (e.option ? [n] : []));
+    const cur = selectable[Math.max(0, Math.min(i, selectable.length - 1))];
+    return { entries, selectable, cur, chosen: cur === undefined ? null : (entries[cur]?.option ?? null) };
+  };
+  const { entries, cur, chosen } = pick(text, index);
+  const chosenNow = () => pick(textRef.current, indexRef.current).chosen;
+  // every row the panel has above the rule and footer, less the filter and the gap under it
+  const height = Math.max(3, Math.min(entries.length, dialogRows(dims.height) - 4));
+  const w = windowOf(entries.length, cur ?? 0, height, top);
+  useEffect(() => {
+    if (w.top !== top) setTop(w.top);
+  }, [w.top, top]);
+  // moving the cursor takes back a first ctrl+d (opencode's session list does the same)
+  const move = (by: number) => {
+    if (app.getState().armed) app.dispatch({ type: "disarm" });
+    const n = pick(textRef.current, indexRef.current).selectable.length;
+    indexRef.current = Math.max(0, Math.min(n - 1, indexRef.current + by));
+    setIndex(indexRef.current);
+  };
+  const armed = chosen ? isArmed(app.state, "delete", chosen.value, app.clock.now()) : false;
+  useCommandLayer("dialog", {
+    "dialog.up": () => move(-1),
+    "dialog.down": () => move(1),
+    "dialog.pageUp": () => move(-height),
+    "dialog.pageDown": () => move(height),
+    "dialog.submit": () => {
+      const c = chosenNow();
+      if (c) app.answer(c.value);
+    },
+    ...(props.dialog.deletable
+      ? {
+          "dialog.delete": () => {
+            const c = chosenNow();
+            if (!c) return;
+            if (isArmed(app.getState(), "delete", c.value, app.clock.now())) {
+              app.dispatch({ type: "disarm" });
+              app.answer(`delete:${c.value}`);
+            } else app.dispatch({ type: "arm", what: "delete", target: c.value, at: app.clock.now() });
+          },
+        }
+      : {}),
+  });
+  const rows = (inner: number): ReactNode[] => {
+    // columns: the title, the detail and the CLI twin, each padded to the widest in the whole list, so
+    // they line up as the list scrolls; the CLI column goes when it does not fit, the detail column
+    // falls back to the right edge when even it does not
+    const wide = (f: (o: SelectOption) => string | undefined) =>
+      Math.max(0, ...props.dialog.options.map((o) => Bun.stringWidth(f(o) ?? "")));
+    const tw = wide((o) => o.title);
+    const dw = wide((o) => o.detail);
+    const cw = wide((o) => o.cli);
+    const columns = 2 + tw + 2 + dw <= inner;
+    const withCli = columns && cw > 0 && 2 + tw + 2 + dw + 2 + cw <= inner;
+    const out: ReactNode[] = [
+      <box key="filter" flexDirection="row" width={inner} height={1}>
+        <text fg={tone("accent")}>{"> "}</text>
+        <input
+          ref={input}
+          value={text}
+          placeholder="type to filter"
+          onInput={(v: string) => {
+            textRef.current = v;
+            indexRef.current = 0;
+            setText(v);
+            setIndex(0);
+            if (app.getState().armed) app.dispatch({ type: "disarm" });
+          }}
+          width={inner - 2}
+        />
+      </box>,
+      <Line key="gap" width={inner} parts={[]} />,
+    ];
+    if (entries.length === 0) {
+      out.push(
+        <Line
+          key="none"
+          width={inner}
+          parts={[{ text: props.dialog.options.length ? "No match" : props.dialog.empty, tone: "muted" }]}
+        />,
+      );
+      return out;
+    }
+    entries.slice(w.top, w.top + height).forEach((e, i) => {
+      const at = w.top + i;
+      if (i === 0 && w.above > 0)
+        return out.push(
+          <Line
+            key="up"
+            width={inner}
+            parts={[{ text: `${glyph("up", ui.plain)} ${w.above + 1} more`, tone: "muted" }]}
+          />,
+        );
+      if (i === height - 1 && w.below > 0)
+        return out.push(
+          <Line
+            key="down"
+            width={inner}
+            parts={[{ text: `${glyph("down", ui.plain)} ${w.below + 1} more`, tone: "muted" }]}
+          />,
+        );
+      if (!e.option)
+        return out.push(
+          <Line key={e.key} width={inner} parts={[{ text: e.heading ?? "", tone: "accent", bold: true }]} />,
+        );
+      const o = e.option;
+      const selected = at === cur;
+      const label = selected && armed ? "press ctrl+d again to delete" : o.title;
+      const detail = o.detail ?? "";
+      const left: Part[] = [
+        { text: `${o.current ? glyph("current", ui.plain) : " "} ` },
+        { text: label, tone: selected && armed ? "warning" : undefined },
+      ];
+      const pad = (t: string, n: number) => " ".repeat(Math.max(0, n - Bun.stringWidth(t)));
+      const right: Part[] = columns
+        ? [
+            { text: `${pad(label, tw)}  ` },
+            { text: withCli ? `${detail}${pad(detail, dw)}  ` : detail, tone: "muted" },
+            { text: withCli ? (o.cli ?? "") : "", tone: "muted" },
+          ]
+        : [
+            {
+              text: " ".repeat(Math.max(1, inner - Bun.stringWidth(`  ${label}`) - Bun.stringWidth(detail))),
+            },
+            { text: detail, tone: "muted" },
+          ];
+      out.push(<Line key={e.key} width={inner} selected={selected} parts={[...left, ...right]} />);
+    });
+    return out;
+  };
+  return (
+    <Dialog
+      title={props.dialog.title}
+      // the palette's CLI column needs the wide panel
+      size={props.dialog.options.length > 40 || props.dialog.options.some((o) => o.cli) ? "large" : "medium"}
+      rows={rows}
+    />
+  );
+}