catherd-cli 1.5.0 → 2.0.0-beta.20261022113309

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

@@ -1,58 +0,0 @@
-// 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

@@ -1,52 +0,0 @@
-// 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

@@ -1,212 +0,0 @@
-// 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}
-    />
-  );
-}

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

@@ -1,68 +0,0 @@
-// Adapted from anomalyco/opencode packages/tui/src/ui/dialog.tsx (MIT, © 2025 opencode);
-// see THIRD_PARTY_NOTICES.md.
-import { useTerminalDimensions } from "@opentui/react";
-import type { ReactNode } from "react";
-import { useTone, useUi } from "../providers/theme.tsx";
-import { DIALOG_WIDTH, type DialogSize } from "../theme.ts";
-import { Line } from "./line.tsx";
-
-/** The panel's inner width: its size, clamped to the terminal less a margin, less the padding. */
-const dialogInner = (size: DialogSize, termWidth: number): number =>
-  Math.max(10, Math.min(DIALOG_WIDTH[size], termWidth - 2) - 4);
-
-/** The rows a quarter down the screen leaves for `rows`: the height less the top padding, the
- * blank line, the title, the gap under it and the blank line at the bottom. */
-export const dialogRows = (termHeight: number): number =>
-  Math.max(1, termHeight - Math.floor(termHeight / 4) - 4);
-
-/**
- * Spec §9.3: a raised panel over a dimmed backdrop, a quarter down the screen, 60, 88 or 116 columns
- * wide, with no border; the title bold on the left and a muted `esc` on the right. `rows` returns one
- * node per line, each `inner` columns wide (Line pads them); the panel pads every line with spaces on
- * both sides, so it hides what is beneath even without colour.
- */
-export function Dialog(props: { title: string; size?: DialogSize; rows: (inner: number) => ReactNode[] }) {
-  const dims = useTerminalDimensions();
-  const ui = useUi();
-  const tone = useTone();
-  const size = props.size ?? "medium";
-  const inner = dialogInner(size, dims.width);
-  const lines: ReactNode[] = [
-    <Line key="top" width={inner} parts={[]} />,
-    <Line
-      key="title"
-      width={inner}
-      parts={[
-        { text: props.title, bold: true },
-        { text: " ".repeat(Math.max(1, inner - Bun.stringWidth(props.title) - 3)) },
-        { text: "esc", tone: "muted" },
-      ]}
-    />,
-    <Line key="gap" width={inner} parts={[]} />,
-    ...props.rows(inner),
-    <Line key="bottom" width={inner} parts={[]} />,
-  ];
-  return (
-    <box
-      position="absolute"
-      top={0}
-      left={0}
-      zIndex={3000}
-      width={dims.width}
-      height={dims.height}
-      alignItems="center"
-      paddingTop={Math.floor(dims.height / 4)}
-      backgroundColor={ui.color ? `${tone("backdrop")}99` : undefined}
-    >
-      <box width={inner + 4} flexDirection="column" backgroundColor={tone("surfaceRaised")}>
-        {lines.map((line, i) => (
-          <box key={i} flexDirection="row" height={1}>
-            <text>{"  "}</text>
-            {line}
-            <text>{"  "}</text>
-          </box>
-        ))}
-      </box>
-    </box>
-  );
-}

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

@@ -1,92 +0,0 @@
-import { RGBA, TextAttributes } from "@opentui/core";
-import { useTone, useUi } from "../providers/theme.tsx";
-import { ascii, truncateEnd, width as widthOf } from "../text.ts";
-import type { Token } from "../theme.ts";
-
-/** One run of text on a line, in a token's colour. */
-export interface Part {
-  text: string;
-  tone?: Token;
-  bold?: boolean;
-}
-
-/** The parts cut to `max` columns at the end (an ellipsis on the last one kept). */
-export function clip(parts: Part[], max: number, plain: boolean): Part[] {
-  const out: Part[] = [];
-  let used = 0;
-  for (const p of parts) {
-    const w = widthOf(p.text);
-    if (used + w <= max) {
-      out.push(p);
-      used += w;
-      continue;
-    }
-    const room = max - used;
-    if (room > 0) out.push({ ...p, text: truncateEnd(p.text, room, plain) });
-    break;
-  }
-  return out;
-}
-
-/**
- * The one line primitive every row is drawn with: exactly `width` columns. A selected line is filled
- * with the accent and bold (spec §9.3), or drawn in reverse video without colour; under --plain every
- * character is ASCII.
- */
-export function Line(props: {
-  parts: Part[];
-  width: number;
-  selected?: boolean;
-  dim?: boolean;
-  /**
-   * Paints every cell, spaces included, so nothing beneath shows through (a toast over the tabs): the
-   * raised surface with colour, reverse video without, since a plain space paints nothing.
-   */
-  opaque?: boolean;
-}) {
-  const ui = useUi();
-  const tone = useTone();
-  const parts = clip(
-    ui.plain ? props.parts.map((p) => ({ ...p, text: ascii(p.text) })) : props.parts,
-    props.width,
-    ui.plain,
-  );
-  const used = parts.reduce((n, p) => n + widthOf(p.text), 0);
-  const pad = " ".repeat(Math.max(0, props.width - used));
-  const sel = props.selected === true;
-  const fg = (p: Part) =>
-    sel ? tone("selectionText") : props.dim ? tone("muted") : p.tone ? tone(p.tone) : undefined;
-  // without colour, the terminal's own default background (SGR 49, no colour) makes a space paint
-  const bg = sel
-    ? tone("selection")
-    : props.opaque
-      ? ui.color
-        ? tone("surfaceRaised")
-        : RGBA.defaultBackground()
-      : undefined;
-  const inverse = (sel || props.opaque === true) && !ui.color ? TextAttributes.INVERSE : 0;
-  const attrs = (p: Part) => (sel || p.bold ? TextAttributes.BOLD : 0) | inverse;
-  return (
-    <text wrapMode="none">
-      {parts.map((p, i) => (
-        <span key={i} fg={fg(p)} bg={bg} attributes={attrs(p)}>
-          {p.text}
-        </span>
-      ))}
-      <span bg={bg} attributes={inverse}>
-        {pad}
-      </span>
-    </text>
-  );
-}
-
-/** A full-width rule (`─`, or `-` in plain). */
-export function Rule(props: { width: number }) {
-  const ui = useUi();
-  const tone = useTone();
-  return (
-    <text wrapMode="none" fg={tone("border")}>
-      {(ui.plain ? "-" : "─").repeat(Math.max(0, props.width))}
-    </text>
-  );
-}

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

@@ -1,197 +0,0 @@
-import type { InputRenderable } from "@opentui/core";
-import { type ReactNode, useEffect, useRef, useState } from "react";
-import { useBack } from "../providers/app.tsx";
-import { useCommandLayer } from "../providers/keymap.tsx";
-import { useTone, useUi } from "../providers/theme.tsx";
-import { glyph } from "../theme.ts";
-import { Line } from "./line.tsx";
-
-export interface ListItem {
-  key: string;
-  /** headings and continuation lines are skipped by the cursor */
-  selectable: boolean;
-  render(selected: boolean, width: number): ReactNode;
-}
-
-export interface Window {
-  top: number;
-  /** rows hidden above and below the window */
-  above: number;
-  below: number;
-}
-
-const clamp = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, n));
-
-/**
- * Which rows of `total` fit in `height` so that `index` shows, moving no more than needed from `top`.
- * With 3 rows or more, a hint line (`↑ 3 more`) takes the first or the last row when rows are hidden there.
- */
-export function windowOf(total: number, index: number, height: number, top: number): Window {
-  if (total <= height) return { top: 0, above: 0, below: 0 };
-  const i = clamp(index, 0, total - 1);
-  const maxTop = total - height;
-  let t = clamp(top, 0, maxTop);
-  if (height >= 3) {
-    const first = t + (t > 0 ? 1 : 0);
-    const last = t + height - 1 - (t < maxTop ? 1 : 0);
-    if (i < first) t = i === 0 ? 0 : i - 1;
-    else if (i > last) t = i === total - 1 ? maxTop : i - height + 2;
-  } else if (i < t) t = i;
-  else if (i > t + height - 1) t = i - height + 1;
-  t = clamp(t, 0, maxTop);
-  return height >= 3 ? { top: t, above: t, below: maxTop - t } : { top: t, above: 0, below: 0 };
-}
-
-/**
- * The selectable row `by` selectable rows away from row `from` (clamped to the ends). From a row that
- * cannot be selected, the next selectable row is one step down and the previous one a step up; `by` 0
- * snaps to the next one (else the last).
- */
-export function step(items: readonly { selectable: boolean }[], from: number, by: number): number {
-  const sel = items.flatMap((it, i) => (it.selectable ? [i] : []));
-  if (sel.length === 0) return -1;
-  const at = sel.indexOf(from);
-  if (at >= 0) return sel[clamp(at + by, 0, sel.length - 1)] as number;
-  const next = sel.findIndex((i) => i > from);
-  if (by === 0) return sel[next < 0 ? sel.length - 1 : next] as number;
-  const pos = by > 0 ? (next < 0 ? sel.length - 1 : next + by - 1) : (next < 0 ? sel.length : next) + by;
-  return sel[clamp(pos, 0, sel.length - 1)] as number;
-}
-
-/**
- * A view's selected row: `selected` is what this render draws, `current()` what a key handler must read
- * (a key in the same tick may have moved it already). `initial`: the row it starts on (a list snaps a key it
- * does not hold to its first row).
- */
-export function useSelected(initial: string | null = null): {
-  selected: string | null;
-  select(key: string): void;
-  current(): string | null;
-} {
-  const [selected, setSelected] = useState<string | null>(initial);
-  const ref = useRef<string | null>(null);
-  ref.current = selected;
-  return {
-    selected,
-    select(key) {
-      ref.current = key;
-      setSelected(key);
-    },
-    current: () => ref.current,
-  };
-}
-
-/**
- * A list or tree pane (spec §9.2 lists: arrows plus j/k, paging, Home/End, `/` filter). Controlled: the
- * view owns the selected key and the filter text; the list moves them and draws the visible window with
- * `↑ n more` / `↓ n more` hints instead of a scrollbar.
- */
-export function List(props: {
-  items: ListItem[];
-  selected: string | null;
-  onSelect(key: string): void;
-  width: number;
-  height: number;
-  /** the filter text, null when no filter is open */
-  filter?: string | null;
-  onFilter?(text: string | null): void;
-  /** the muted line shown when there are no rows */
-  empty: string;
-}) {
-  const ui = useUi();
-  const tone = useTone();
-  const input = useRef<InputRenderable>(null);
-  const [top, setTop] = useState(0);
-  // the command that opens the filter is drawn at once (useCommandLayer), so this runs before the next key
-  const [focusTick, setFocusTick] = useState(0);
-  useEffect(() => {
-    if (focusTick > 0) input.current?.focus();
-  }, [focusTick]);
-  const filtering = props.filter !== undefined && props.filter !== null;
-  const bodyHeight = Math.max(1, props.height - (filtering ? 1 : 0));
-  const indexOf = (key: string | null) => {
-    const i = props.items.findIndex((it) => it.key === key);
-    return i < 0 || !props.items[i]?.selectable ? step(props.items, Math.max(0, i), 0) : i;
-  };
-  const index = indexOf(props.selected);
-  // the row a key handler moves from: the one the last key chose, which may not be drawn yet
-  const selectedRef = useRef(props.selected);
-  selectedRef.current = props.selected;
-  const choose = (i: number) => {
-    const it = props.items[i];
-    if (!it) return;
-    selectedRef.current = it.key;
-    props.onSelect(it.key);
-  };
-  const w = windowOf(props.items.length, Math.max(0, index), bodyHeight, top);
-  useEffect(() => {
-    if (w.top !== top) setTop(w.top);
-  }, [w.top, top]);
-  // the cursor snaps to a selectable row, judged on the selection now: this effect can run after a key
-  // already moved it (a key that lands between a draw and its effects), and must not take that back
-  useEffect(() => {
-    const it = props.items[indexOf(selectedRef.current)];
-    if (it && it.key !== selectedRef.current) choose(indexOf(selectedRef.current));
-  });
-  const move = (by: number) => choose(step(props.items, Math.max(0, indexOf(selectedRef.current)), by));
-  const page = Math.max(1, bodyHeight - 2);
-  useCommandLayer("list", {
-    "list.up": () => move(-1),
-    "list.down": () => move(1),
-    "list.pageUp": () => move(-page),
-    "list.pageDown": () => move(page),
-    "list.first": () => choose(step(props.items, 0, 0)),
-    "list.last": () => choose(step(props.items, props.items.length - 1, 0)),
-    ...(props.onFilter
-      ? {
-          "list.filter": () => {
-            props.onFilter?.(props.filter ?? "");
-            setFocusTick((n) => n + 1);
-          },
-        }
-      : {}),
-  });
-  useCommandLayer("filter", { "filter.accept": () => input.current?.blur() });
-  useBack(filtering, "input", () => {
-    input.current?.blur();
-    props.onFilter?.(null);
-  });
-  const rows: ReactNode[] = [];
-  const visible = props.items.slice(w.top, w.top + bodyHeight);
-  visible.forEach((it, i) => {
-    const hintAbove = i === 0 && w.above > 0;
-    const hintBelow = i === visible.length - 1 && w.below > 0;
-    if (hintAbove || hintBelow) {
-      const n = hintAbove ? w.above + 1 : w.below + 1;
-      rows.push(
-        <Line
-          key={`hint-${hintAbove ? "up" : "down"}`}
-          width={props.width}
-          parts={[{ text: `  ${glyph(hintAbove ? "up" : "down", ui.plain)} ${n} more`, tone: "muted" }]}
-        />,
-      );
-      return;
-    }
-    rows.push(<box key={it.key}>{it.render(w.top + i === index, props.width)}</box>);
-  });
-  if (props.items.length === 0)
-    rows.push(<Line key="empty" width={props.width} parts={[{ text: `  ${props.empty}`, tone: "muted" }]} />);
-  const matches = props.items.filter((it) => it.selectable).length;
-  return (
-    <box flexDirection="column" width={props.width} height={props.height}>
-      {filtering ? (
-        <box flexDirection="row" width={props.width} height={1}>
-          <text fg={tone("accent")}>{" / "}</text>
-          <input
-            ref={input}
-            value={props.filter ?? ""}
-            onInput={(v: string) => props.onFilter?.(v)}
-            width={Math.max(1, props.width - 18)}
-          />
-          <text fg={tone("muted")}>{` ${matches} ${matches === 1 ? "match" : "matches"}`.padEnd(15)}</text>
-        </box>
-      ) : null}
-      {rows}
-    </box>
-  );
-}