compact-adviser

  on("ui.render", { component: "Pane" }, async ($, e, next) => {
    if (!(await isActivated($)) || e.requestId !== PANE_ID) return next(e);
    if (e.surface !== "terminal") {
      const { Text } = $.ui.resolve(e);
      return Text({ children: USAGE });
    }
    const { Box, Text, Input, Button } = $.ui.resolve(e);
    const column = (children: RenderChildren[]) => Box({ flexDirection: "column", children });
    const heading = (crumb?: string) =>
      Box({
        flexDirection: "row",
        marginBottom: 1,
        children: [
          Text({ bold: true, children: "Compact adviser" }),
          Text({ dimColor: true, children: crumb ? ` › ${crumb}` : "  saved for all sessions" }),
        ],
      });
    const hint = (leave: string) =>
      Text({ dimColor: true, children: `↑↓ move · Enter select · Esc ${leave}` });
    const closePane = () => void $.ui.close({ id: PANE_ID });
    const redraw = async () => {
      await $.ui.invalidate("ui.render");
      await placeRing($);
    };
    const run = (action: () => Promise<unknown>) => {
      void action()
        .catch((error) => $.ui.toast(errorMessage(error), { timeoutMs: 8000 }))
        .finally(redraw);
    };
    const back = () => {
      showMenu();
      void redraw();
    };
    let config: Config;
    try {
      config = await loadConfig($);
    } catch (error) {
      return column([
        heading(),
        Text({ color: "error", children: errorMessage(error) }),
        Button({
          key: "menu:close",
          label: "Close",
          plain: true,
          autoFocus: true,
          onPress: closePane,
        }),
      ]);
    }
    const [rows, key] = await Promise.all([$.config.list(), resolvedKey($)]);
    const savedKey = readSavedApiKey(rows, loadedOptions) !== undefined;

    /** A list of rows the ring moves through; the one at `focus` takes it first. */
    const list = (
      entries: { key: string; label: string; onPress: () => void; dim?: boolean }[],
      focus: string,
    ) => {
      const width = Math.max(...entries.map((entry) => entry.label.length));
      return column(
        entries.map((entry) =>
          Button({
            key: entry.key,
            label: entry.label.padEnd(width),
            plain: true,
            ...(entry.dim ? { dimColor: true } : {}),
            ...(entry.key === focus ? { autoFocus: true } : {}),
            onPress: entry.onPress,
          }),
        ),
      );
    };
    /** A view of options: the current one marked; picking it, or Back, only returns. */
    const options = <T extends string>(
      crumb: string,
      current: T,
      choices: { value: T; label: string }[],
      pick: (value: T) => void,
    ) =>
      column([
        heading(crumb),
        list(
          [
            ...choices.map((choice) => ({
              key: `${view}:${choice.value}`,
              label: `${choice.value === current ? "●" : " "} ${choice.label}`,
              onPress: () => {
                showMenu();
                if (choice.value === current) void redraw();
                else pick(choice.value);
              },
            })),
            { key: "back", label: "  Back", dim: true, onPress: back },
          ],
          `${view}:${current}`,
        ),
        hint("back"),
      ]);

    if (view === "mode") {
      return options(
        "Mode",
        config.mode,
        (["hint", "auto", "off"] as const).map((value) => ({ value, label: MODE_LABELS[value] })),
        (mode) => run(() => changeMode($, mode, true)),
      );
    }
    if (view === "logging") {
      return options(
        "Log TypeSafe requests",
        config.logRequests ? "on" : "off",
        [
          { value: "off", label: "Off (default)" },
          { value: "on", label: "On" },
        ],
        (value) => run(() => changeLogRequests($, value === "on")),
      );
    }
    if (view === "minimum") {
      return column([
        heading("Minimum context"),
        Input({
          key: "minimum",
          label: "Tokens",
          value: minimumDraft?.text ?? String(config.minContextTokens),
          placeholder: String(DEFAULT_MINIMUM),
          submitLabel: "save",
          autoFocus: true,
          onSubmit: (text: string) => {
            run(async () => {
              try {
                if (await changeMinimum($, text)) showMenu();
                else minimumDraft = { text };
              } catch (error) {
                minimumDraft = { text, error: errorMessage(error) };
              }
            });
          },
        }),
        minimumDraft?.error
          ? Text({ color: "error", children: minimumDraft.error })
          : Text({
              dimColor: true,
              children: "A token count, not a percentage; no judgment below it.",
            }),
        list([{ key: "back", label: "Back", dim: true, onPress: back }], ""),
        hint("back"),
      ]);
    }
    if (view === "key") {
      return column([
        heading("TypeSafe API key"),
        Text({ dimColor: true, wrap: "wrap", children: keyDetail(key.source, savedKey) }),
        Input({
          key: "typesafeApiKey",
          label: "Key",
          value: keyDraft?.text ?? "",
          placeholder: savedKey ? "paste a key to replace the saved one" : "paste a key to save it",
          submitLabel: "save",
          autoFocus: true,
          onSubmit: (text: string) => {