@slkiser/opencode-quota 5.0.3 → 6.0.0-beta.1

package/dist/tui/window/settings.js

@@ -0,0 +1,1679 @@
+import { use as _$use } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+/**
+ * The Settings tabs edit settings.jsonc; surfaces preview saved settings with draft changes.
+ * Layout's pages are a list left of the body (`Pages`), like Usage's ranges. When a page shows,
+ * the list has the keyboard: ↑↓ change the page, → or enter go to the page's first line, and ↑
+ * on that line goes back to the list.
+ */
+import { RGBA, TextAttributes } from "@opentui/core";
+import { createEffect, createMemo, createSignal, For, on, Show } from "solid-js";
+import { describeError } from "../../core/errors.js";
+import { ALL_PROVIDERS, WINDOWS } from "../../core/windows.js";
+import { CHANGED_SINCE_REVIEW } from "../../settings/schema.js";
+import { columnsOf } from "../../view/columns.js";
+import { DEFAULT_WORDS, fit, percentText, resetText, rowValueText } from "../../view/format.js";
+import { pickRow, windowFor } from "../../view/select.js";
+import { rpcErrorMessage } from "../client.js";
+import { COLOR_NAMES, FIELDS, isSurfaceTab, PRESETS, presetChoice, presetValues, renameRow, resetTab, setIn, stepIn, typedColor, typedNumber } from "../display.js";
+import { foundProviderIds, isTicked, PROVIDERS_KEY, withTick } from "../server-settings.js";
+import { namedColor, roleColor } from "../theme.js";
+import { plainMessage, quotaToastLines } from "../toasts.js";
+import { draggedTo, movedBy, surfaceTree } from "./drag.js";
+import { Rail, railRoom } from "./rail.js";
+export const SETTINGS_TABS = [{
+  tab: "layout",
+  title: "All places",
+  watchesSidebar: true
+}, {
+  tab: "sidebar",
+  title: "Sidebar",
+  switchTitle: "Show the Quota panel in the session sidebar",
+  watchesSidebar: true
+}, {
+  tab: "collapsed",
+  title: "Collapsed",
+  switchTitle: "When the panel is collapsed, show one line per provider",
+  watchesSidebar: true
+}, {
+  tab: "statusLine",
+  title: "Status line",
+  switchTitle: "Show the quota line under the message box",
+  watchesSidebar: false
+}, {
+  tab: "toast",
+  title: "Toast",
+  switchTitle: "Show quota toasts",
+  watchesSidebar: false
+}, {
+  tab: "colors",
+  title: "Colors",
+  watchesSidebar: true
+}, {
+  tab: "providers",
+  title: "Providers",
+  watchesSidebar: true
+}];
+
+/**
+ * The Settings tabs of the window's tab bar, each with its pages: Layout has All places, then one
+ * per place; the others are one page each.
+ */
+export const SETTINGS_GROUPS = [{
+  title: "Layout",
+  pages: ["layout", "sidebar", "collapsed", "statusLine", "toast"]
+}, {
+  title: "Colors",
+  pages: ["colors"]
+}, {
+  title: "Providers",
+  pages: ["providers"]
+}];
+export function isSettingsTab(tab) {
+  return SETTINGS_TABS.some(item => item.tab === tab);
+}
+
+/** The pages of `tab`'s Settings tab when it has more than one, for the list left of the body. */
+function pagesOf(tab) {
+  const pages = SETTINGS_GROUPS.find(group => group.pages.includes(tab))?.pages ?? [];
+  return pages.length > 1 ? pages : undefined;
+}
+function pageTitle(tab) {
+  return SETTINGS_TABS.find(item => item.tab === tab)?.title ?? tab;
+}
+
+/** What the window keeps left of a Settings tab's body: Layout's page list, else nothing. */
+export function pagesRoom(tab) {
+  const pages = isSettingsTab(tab) ? pagesOf(tab) : undefined;
+  return pages ? railRoom(PAGE_LIST_GAP) : 0;
+}
+
+/** "Reset page" on Layout's pages, which reset only their own lines; "Reset tab" elsewhere. */
+function resetLabel(tab) {
+  return pagesOf(tab) ? "Reset page" : "Reset tab";
+}
+
+/** A line ↑↓ select: ‹ value › steps through values, value ▸ runs a button; some take typing. */
+
+/** What a line takes when you type into it (e, or a double-click). */
+
+/** A line of a surface tab's tree. One object per line, so <For> keeps its view while it moves. */
+
+const KEYS = "Quota window";
+const TRANSPARENT = RGBA.fromInts(0, 0, 0, 0);
+/** The id of a surface tab's switch line. */
+const SWITCH_ID = "surface";
+/** The selection id of Layout's page list: the list has the keyboard. */
+const PAGES_ID = "pages";
+/** The body starts right after the page list's line: its lines carry their own indent. */
+const PAGE_LIST_GAP = 0;
+const DOUBLE_CLICK_MS = 400;
+/** A line's columns besides its title and value: the 3 spaces, the title's space, "‹ " and " ›". */
+const LINE_FRAME = 8;
+const TITLE_WIDTH = 26;
+const TITLE_MIN = 12;
+const VALUE_WIDTH = 24;
+const VALUE_MIN = 6;
+
+/**
+ * A line's title and value widths in `width` columns: 26 and the value's own width when both
+ * fit; else the title gives way first (down to 12 columns), then the value (down to 6).
+ */
+export function lineColumns(width, valueWidth = VALUE_WIDTH) {
+  if (width === undefined) return {
+    title: TITLE_WIDTH,
+    value: valueWidth
+  };
+  const room = width - LINE_FRAME;
+  const title = Math.max(TITLE_MIN, Math.min(TITLE_WIDTH, room - valueWidth));
+  const value = Math.max(Math.min(VALUE_MIN, valueWidth), Math.min(valueWidth, room - title));
+  return {
+    title,
+    value
+  };
+}
+
+/** Selection id of a tree line; a row id could equal a setting's path. */
+function lineKey(id) {
+  return `line:${id}`;
+}
+
+/** Renderable id of a line, so the list can scroll it into view. */
+function boxId(id) {
+  return `quota-settings.${id}`;
+}
+
+/** Renderable id of a page in Layout's page list. */
+function pageId(tab) {
+  return `quota-layout-page-${tab}`;
+}
+
+/** The windows ‹ › steps through: those of the provider's rows not hidden on the page. */
+function windowChoices(provider, hidden) {
+  const windows = provider.rows.flatMap(row => row.window && row.percentRemaining !== undefined && !hidden.includes(row.id) ? [row.window] : []);
+  const unique = [...new Set(windows)];
+  return unique.length > 1 ? ["lowest", ...unique] : [];
+}
+function windowTitle(choice) {
+  return choice === "lowest" ? "lowest left" : WINDOWS[choice].short;
+}
+
+/**
+ * What a provider's ‹ › shows without a pick of its own: the pick for all providers when the
+ * provider has that window (one of its `choices`), else lowest.
+ */
+function inheritedWindow(windows, choices) {
+  const all = windows[ALL_PROVIDERS];
+  return all !== undefined && choices.includes(all) ? all : "lowest";
+}
+
+/**
+ * One-line text that keeps its width, unless `shrink` lets it give way. With `wrap` (notes,
+ * details) it goes on to more lines between words instead of being cut.
+ */
+export function Cell(props) {
+  return (() => {
+    var _el$ = _$createElement("text");
+    _$setProp(_el$, "selectable", false);
+    _$insert(_el$, () => props.children);
+    _$effect(_p$ => {
+      var _v$ = props.fg,
+        _v$2 = props.bold ? TextAttributes.BOLD : TextAttributes.NONE,
+        _v$3 = props.wrap ? "word" : "none",
+        _v$4 = props.shrink ? 1 : 0,
+        _v$5 = props.onUp;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$, "attributes", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$, "wrapMode", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp(_el$, "flexShrink", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp(_el$, "onMouseUp", _v$5, _p$.i));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$;
+  })();
+}
+
+/** A window tab's option line: title, ‹ value ›, value ▸ or a tick, color swatches, then a note. */
+export function OptionRow(props) {
+  const line = props.line;
+  const fg = () => props.active ? props.theme.text.action.primary.focused : props.theme.text.base;
+  const arrow = () => props.active ? fg() : props.theme.text.action.primary.selected;
+  const note = () => line.note?.() ?? "";
+  const columns = () => lineColumns(props.width, props.valueWidth);
+  /** Where the value starts: past the 3 spaces, the title, its space and the "‹ ". */
+  const valueColumn = () => 3 + columns().title + 1 + 2;
+  const noteInline = () => {
+    if (props.width === undefined) return true;
+    const swatches = 3 * (line.swatches?.() ?? []).length;
+    const end = valueColumn() + columns().value + 2 + swatches;
+    return end + 3 + columnsOf(note()) <= props.width;
+  };
+  const indent = "  ".repeat(line.depth ?? 0);
+  // A tick without a word has the value's room too, so a long name shows whole.
+  const titleWidth = () => line.tick && !line.value() ? columns().title + 2 + columns().value : columns().title;
+  /** On the selected line's highlight, the highlight's text color; under it, its own color. */
+  const noteColor = onHighlight => props.active && onHighlight ? fg() : line.warning ? props.theme.text.feedback.warning.base : props.theme.text.muted;
+  return [_$createComponent(Show, {
+    get when() {
+      return line.group;
+    },
+    get children() {
+      var _el$2 = _$createElement("box");
+      _$insert(_el$2, _$createComponent(Cell, {
+        get fg() {
+          return props.theme.text.action.primary.selected;
+        },
+        bold: true,
+        get children() {
+          return ` ${line.group}`;
+        }
+      }));
+      _$effect(_$p => _$setProp(_el$2, "paddingTop", props.first ? 0 : 1, _$p));
+      return _el$2;
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return line.gap;
+    },
+    get children() {
+      var _el$3 = _$createElement("box");
+      _$setProp(_el$3, "height", 1);
+      return _el$3;
+    }
+  }), (() => {
+    var _el$4 = _$createElement("box");
+    _$setProp(_el$4, "flexDirection", "row");
+    _$insert(_el$4, _$createComponent(Cell, {
+      get fg() {
+        return fg();
+      },
+      get onUp() {
+        return _$memo(() => !!line.tick)() ? props.click(props.use) : undefined;
+      },
+      get children() {
+        return `   ${indent}${fit(line.title, titleWidth() - indent.length)} `;
+      }
+    }), null);
+    _$insert(_el$4, _$createComponent(Cell, {
+      get fg() {
+        return arrow();
+      },
+      get onUp() {
+        return props.click(() => line.cycle?.(-1));
+      },
+      get children() {
+        return line.cycle && !line.tick ? "‹ " : "  ";
+      }
+    }), null);
+    _$insert(_el$4, _$createComponent(Show, {
+      get when() {
+        return props.input;
+      },
+      get fallback() {
+        return _$createComponent(Cell, {
+          get fg() {
+            return _$memo(() => !!line.tick)() ? noteColor(true) : fg();
+          },
+          get onUp() {
+            return props.click(props.use);
+          },
+          get children() {
+            return fit(line.value(), columns().value);
+          }
+        });
+      },
+      get children() {
+        return props.input?.(columns().value);
+      }
+    }), null);
+    _$insert(_el$4, _$createComponent(Cell, {
+      get fg() {
+        return arrow();
+      },
+      get onUp() {
+        return props.click(props.use);
+      },
+      get children() {
+        return _$memo(() => !!line.run)() ? " ▸" : line.cycle && !line.tick ? " ›" : "  ";
+      }
+    }), null);
+    _$insert(_el$4, _$createComponent(Show, {
+      get when() {
+        return line.swatches;
+      },
+      get children() {
+        return _$createComponent(Cell, {
+          get children() {
+            return (line.swatches?.() ?? []).map(color => (() => {
+              var _el$8 = _$createElement("span");
+              _$insertNode(_el$8, _$createTextNode(` ██`));
+              _$setProp(_el$8, "style", {
+                fg: color
+              });
+              return _el$8;
+            })());
+          }
+        });
+      }
+    }), null);
+    _$insert(_el$4, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!note())() && noteInline();
+      },
+      get children() {
+        var _el$5 = _$createElement("box");
+        _$setProp(_el$5, "paddingLeft", 3);
+        _$setProp(_el$5, "flexShrink", 1);
+        _$insert(_el$5, _$createComponent(Cell, {
+          get fg() {
+            return noteColor(true);
+          },
+          shrink: true,
+          wrap: true,
+          get children() {
+            return note();
+          }
+        }));
+        return _el$5;
+      }
+    }), null);
+    _$effect(_p$ => {
+      var _v$6 = boxId(line.id),
+        _v$7 = props.active ? props.theme.background.action.primary.focused : TRANSPARENT,
+        _v$8 = props.press;
+      _v$6 !== _p$.e && (_p$.e = _$setProp(_el$4, "id", _v$6, _p$.e));
+      _v$7 !== _p$.t && (_p$.t = _$setProp(_el$4, "backgroundColor", _v$7, _p$.t));
+      _v$8 !== _p$.a && (_p$.a = _$setProp(_el$4, "onMouseDown", _v$8, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$4;
+  })(), _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!note())() && !noteInline();
+    },
+    get children() {
+      var _el$6 = _$createElement("box");
+      _$insert(_el$6, _$createComponent(Cell, {
+        get fg() {
+          return noteColor(false);
+        },
+        shrink: true,
+        wrap: true,
+        get children() {
+          return note();
+        }
+      }));
+      _$effect(_p$ => {
+        var _v$9 = valueColumn(),
+          _v$0 = props.width;
+        _v$9 !== _p$.e && (_p$.e = _$setProp(_el$6, "paddingLeft", _v$9, _p$.e));
+        _v$0 !== _p$.t && (_p$.t = _$setProp(_el$6, "width", _v$0, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$6;
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return line.detail;
+    },
+    get children() {
+      var _el$7 = _$createElement("box");
+      _$insert(_el$7, _$createComponent(Cell, {
+        get fg() {
+          return props.theme.text.muted;
+        },
+        shrink: true,
+        wrap: true,
+        get children() {
+          return line.detail;
+        }
+      }));
+      _$effect(_p$ => {
+        var _v$1 = valueColumn(),
+          _v$10 = props.width;
+        _v$1 !== _p$.e && (_p$.e = _$setProp(_el$7, "paddingLeft", _v$1, _p$.e));
+        _v$10 !== _p$.t && (_p$.t = _$setProp(_el$7, "width", _v$10, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$7;
+    }
+  })];
+}
+export function createSettingsEditor(api, display, showToast) {
+  const [tab, setTabNow] = createSignal();
+  const [selected, setSelected] = createSignal("");
+  const [typing, setTyping] = createSignal();
+  const [confirming, setConfirming] = createSignal(false);
+  const [sidebars, setSidebars] = createSignal(0);
+  const [dragging, setDragging] = createSignal();
+  let draggedSincePress = false;
+  let lastPress = {
+    id: "",
+    atMs: 0
+  };
+  /** The inline input while a line takes typing; its keys work only while it has the keyboard. */
+  let typingInput;
+  const treeLines = new Map();
+  const theme = () => api.theme;
+  const shown = () => display.shown();
+  const server = display.server;
+  const dirty = server.dirty;
+  const discard = server.discard;
+  const lineValue = path => server.value(path);
+  function setValues(values) {
+    for (const [path, value] of Object.entries(values)) server.set(path, value);
+  }
+  function resetTabLines(settingsTab) {
+    display.edit(settings => resetTab(settings, settingsTab));
+    if (settingsTab === "providers") server.set(PROVIDERS_KEY, []);
+  }
+
+  /** `run` as a click handler that skips the click OpenCode sends right after a drag. */
+  const click = run => () => {
+    if (!draggedSincePress) run();
+  };
+
+  /** Two presses on the same line within 400 ms. */
+  function isDoubleClick(id) {
+    const now = Date.now();
+    const double = lastPress.id === id && now - lastPress.atMs < DOUBLE_CLICK_MS;
+    lastPress = double ? {
+      id: "",
+      atMs: 0
+    } : {
+      id,
+      atMs: now
+    };
+    return double;
+  }
+  function editSurface(surface, change) {
+    const rows = change(shown().surfaces[surface]);
+    server.set(`${surface}.show`, rows.enabled);
+    server.set(`${surface}.hidden`, rows.hidden);
+    server.set(`${surface}.providerOrder`, rows.providerOrder);
+    server.set(`${surface}.rowOrder`, rows.rowOrder);
+  }
+  function toggleSurface(surface) {
+    editSurface(surface, rows => ({
+      ...rows,
+      enabled: !rows.enabled
+    }));
+  }
+
+  /** What typing into a line does: a color for a color line, a number for a server number. */
+  function typedValue(field, role) {
+    if (role) {
+      return {
+        placeholder: "#rrggbb",
+        hint: "Type a color like #89b4fa, then enter · enter with nothing typed = the theme's color · esc stop",
+        apply: text => display.edit(settings => typedColor(settings, field, text))
+      };
+    }
+    const placeholder = field.placeholder;
+    if (!placeholder) return undefined;
+    return {
+      placeholder,
+      hint: `Type ${placeholder}, then enter · enter with nothing typed = ${field.show(null)} · esc stop`,
+      apply: text => {
+        const value = typedNumber(field, text);
+        if (value !== undefined) server.set(field.path, value);
+      }
+    };
+  }
+
+  /** A field's line: ‹ › step through its values, or you type one. */
+  function fieldLine(field) {
+    const role = field.color ? field.path.slice("colors.".length) : undefined;
+    const value = () => lineValue(field.path);
+    return {
+      id: field.path,
+      group: field.group,
+      title: field.title,
+      depth: field.provider ? 1 : 0,
+      value: () => field.show(value()),
+      cycle: field.values.length > 0 ? delta => {
+        const values = field.choices?.(shown()) ?? field.values;
+        setValues({
+          [field.path]: stepIn(values, value(), delta)
+        });
+      } : undefined,
+      typed: typedValue(field, role),
+      note: () => field.preset && presetChoice(field.preset, lineValue) !== undefined ? "from the preset" : field.note ?? "",
+      swatches: role ? () => [roleColor(theme(), shown(), role, 60)] : undefined
+    };
+  }
+  function presetLine(name) {
+    const choice = () => presetChoice(name, lineValue);
+    return {
+      id: `preset.${name}`,
+      title: PRESETS[name].title,
+      value: () => choice() ?? "your own",
+      cycle: delta => setValues(presetValues(name, choice(), delta)),
+      note: () => `sets ${PRESETS[name].drives}`
+    };
+  }
+
+  /**
+   * OpenCode's own theme list and light/dark switch; quota's colors follow them. `refocus` gives
+   * the window the keyboard again.
+   */
+  function themeLines(refocus) {
+    return [{
+      id: "theme",
+      group: "OpenCode theme",
+      title: "Theme",
+      value: () => "open the theme list",
+      run: () => api.keymap.dispatch("theme.switch"),
+      swatches: () => COLOR_NAMES.map(name => namedColor(theme(), name)),
+      note: () => "↑↓ shows each theme live · enter keeps it · esc puts it back"
+    }, {
+      id: "themeMode",
+      title: "Light or dark",
+      value: () => api.themeMode ?? "dark",
+      cycle: () => {
+        api.keymap.dispatch("theme.switch_mode");
+        // OpenCode's switch also closes its dialogs, which gives the keyboard to whatever had
+        // it before the last dialog opened (the message box); take it back after that.
+        setTimeout(refocus, 50);
+      },
+      note: () => "some themes have only one"
+    }];
+  }
+
+  /**
+   * A custom provider's switch, its web address and the key it would send; marked when the server
+   * would not switch it on because it changed since the window showed it.
+   */
+  function customLine(entry, first) {
+    const on = () => server.customOn(entry.id);
+    const request = entry.request;
+    const changed = server.changedSinceReview(entry.id);
+    const where = !request ? "a local estimate: sends nothing" : request.insecure ? `${request.url}  plain http: the key travels unencrypted` : request.url;
+    return {
+      id: `custom.${entry.id}`,
+      group: first ? "Custom providers (added in settings.jsonc)" : undefined,
+      gap: !first,
+      title: entry.label,
+      value: () => on() ? "on" : "off",
+      cycle: () => server.switchCustom(entry.id, !on()),
+      note: () => changed ? `${CHANGED_SINCE_REVIEW} · ${where}` : where,
+      warning: changed || request?.insecure,
+      detail: request ? `key: ${request.key}` : undefined
+    };
+  }
+
+  /**
+   * The custom providers' switches (on top: an agent sends the user here to switch one on), which
+   * providers quota checks (ticks, with Cursor's and OpenCode Zen's settings nested; the ones
+   * quota found first), then the other groups.
+   */
+  function providerLines(snapshot) {
+    const loaded = server.saved();
+    if (!loaded) return [];
+    const found = foundProviderIds(snapshot);
+    const off = () => server.value(PROVIDERS_KEY);
+    const savedOff = loaded.values[PROVIDERS_KEY];
+    const ordered = [...loaded.providers.filter(({
+      id
+    }) => found.includes(id)), ...loaded.providers.filter(({
+      id
+    }) => !found.includes(id))];
+    const ticks = ordered.flatMap(({
+      id,
+      label
+    }) => {
+      const ticked = isTicked(off(), id);
+      const tick = {
+        id: `provider.${id}`,
+        group: id === ordered[0]?.id ? "Which providers" : undefined,
+        title: `${ticked ? "[x]" : "[ ]"} ${label}`,
+        tick: true,
+        warning: true,
+        // The tick says on or off; only a saved tick quota can't use says more (a tick not
+        // saved yet is not checked yet).
+        value: () => ticked && isTicked(savedOff, id) && snapshot && !found.includes(id) ? "not set up" : "",
+        cycle: () => server.set(PROVIDERS_KEY, withTick(off(), id, !ticked))
+      };
+      const nested = ticked ? FIELDS.filter(field => field.provider === id) : [];
+      return [tick, ...nested.map(fieldLine)];
+    });
+    return [...loaded.custom.map((entry, index) => customLine(entry, index === 0)), ...ticks, ...FIELDS.filter(field => field.tab === "providers" && !field.provider).map(fieldLine)];
+  }
+
+  /**
+   * Collapsed's and Status line's window for every provider without its own pick in the list
+   * below. ‹ › step through lowest and the windows the providers have.
+   */
+  function allProvidersLine(surface, snapshot) {
+    const current = () => shown()[surface].window[ALL_PROVIDERS] ?? "lowest";
+    const choices = () => {
+      const found = new Set((snapshot?.providers ?? []).flatMap(provider => provider.rows.flatMap(row => row.window && row.percentRemaining !== undefined ? [row.window] : [])));
+      const windows = Object.keys(WINDOWS).filter(window => found.has(window) || window === current());
+      return ["lowest", ...windows];
+    };
+    return {
+      id: `${surface}.window.${ALL_PROVIDERS}`,
+      group: "Window",
+      title: "For all providers",
+      value: () => windowTitle(current()),
+      cycle: delta => {
+        const next = stepIn(choices(), current(), delta);
+        display.edit(settings => setIn(settings, [surface, "window", ALL_PROVIDERS], next === "lowest" ? undefined : next));
+      },
+      note: () => "a pick below wins; a provider without it shows its lowest"
+    };
+  }
+
+  /**
+   * A Settings page's lines. A preset sits above the line it names, under that line's heading,
+   * or else first, under "Preset". `refocus` gives the window the keyboard again.
+   */
+  function optionLines(settingsTab, snapshot, refocus = () => {}) {
+    if (settingsTab === "providers") return providerLines(snapshot);
+    if (!server.saved()) return [];
+    const presets = Object.keys(PRESETS).filter(name => PRESETS[name].tab === settingsTab);
+    const fields = FIELDS.filter(field => field.tab === settingsTab).flatMap(field => {
+      const line = fieldLine(field);
+      const preset = presets.find(name => PRESETS[name].before === field.path);
+      return preset ? [{
+        ...presetLine(preset),
+        group: line.group
+      }, {
+        ...line,
+        group: undefined
+      }] : [line];
+    });
+    return [...presets.filter(name => PRESETS[name].before === undefined).map(name => ({
+      ...presetLine(name),
+      group: "Preset"
+    })), ...(settingsTab === "colors" ? themeLines(refocus) : []), ...fields, ...(settingsTab === "collapsed" || settingsTab === "statusLine" ? [allProvidersLine(settingsTab, snapshot)] : [])];
+  }
+  function firstLine(settingsTab) {
+    if (settingsTab === undefined) return "";
+    if (pagesOf(settingsTab)) return PAGES_ID;
+    return isSurfaceTab(settingsTab) ? SWITCH_ID : optionLines(settingsTab)[0]?.id ?? "";
+  }
+
+  /** Reads the file settings each time a Settings tab shows. */
+  async function loadServer(settingsTab) {
+    try {
+      await server.load();
+    } catch (error) {
+      api.ui.toast.show({
+        variant: "error",
+        title: "Quota settings not loaded",
+        message: rpcErrorMessage(error)
+      });
+      return;
+    }
+    if (tab() === settingsTab && selected() === "") setSelected(firstLine(settingsTab));
+  }
+  function Button(props) {
+    const {
+      text,
+      background
+    } = theme();
+    return (() => {
+      var _el$0 = _$createElement("box");
+      _$setProp(_el$0, "paddingLeft", 2);
+      _$setProp(_el$0, "paddingRight", 2);
+      _$setProp(_el$0, "flexShrink", 0);
+      _$setProp(_el$0, "alignSelf", "flex-start");
+      _$insert(_el$0, _$createComponent(Cell, {
+        get fg() {
+          return _$memo(() => !!props.primary)() ? text.action.primary.focused : text.base;
+        },
+        get children() {
+          return props.label;
+        }
+      }));
+      _$effect(_p$ => {
+        var _v$11 = props.primary ? background.action.primary.focused : background.raised.high,
+          _v$12 = click(props.run);
+        _v$11 !== _p$.e && (_p$.e = _$setProp(_el$0, "backgroundColor", _v$11, _p$.e));
+        _v$12 !== _p$.t && (_p$.t = _$setProp(_el$0, "onMouseUp", _v$12, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$0;
+    })();
+  }
+  function previewToast(host, sessionID) {
+    const settings = shown();
+    const snapshot = host.quota.snapshot(sessionID);
+    if (!snapshot || !settings.surfaces.toast.enabled) return;
+    const lines = quotaToastLines(snapshot, settings, Date.now(), api.renderer.width);
+    const message = plainMessage(lines);
+    if (!message) return;
+    const duration = settings.toast.seconds * 1000;
+    showToast({
+      variant: "info",
+      message,
+      duration
+    }, lines);
+  }
+
+  /**
+   * Layout's pages, left of the body (`rail.tsx`). A click shows a page and gives the list the
+   * keyboard.
+   */
+  function Pages(props) {
+    return _$createComponent(Show, {
+      get when() {
+        return pagesOf(props.tab);
+      },
+      children: pages => _$createComponent(Rail, {
+        get items() {
+          return pages().map(page => ({
+            key: page,
+            label: pageTitle(page),
+            id: pageId(page)
+          }));
+        },
+        get chosen() {
+          return props.tab;
+        },
+        get theme() {
+          return theme();
+        },
+        gap: PAGE_LIST_GAP,
+        pick: page => click(() => {
+          props.showPage(page);
+          setSelected(PAGES_ID);
+        })()
+      })
+    });
+  }
+
+  /**
+   * Above a Settings tab's scrolling body: the surface switch under its "Enable/disable" heading,
+   * and a warning when the sidebar is hidden.
+   */
+  function Header(props) {
+    const info = () => SETTINGS_TABS.find(item => item.tab === props.tab) ?? SETTINGS_TABS[0];
+    const surface = () => isSurfaceTab(props.tab) ? props.tab : undefined;
+    const surfaceOn = () => {
+      const current = surface();
+      return current === undefined || shown().surfaces[current].enabled;
+    };
+    const sidebarHidden = () => info().watchesSidebar && sidebars() === 0;
+    const active = () => selected() === SWITCH_ID;
+    return _$createComponent(Show, {
+      get when() {
+        return surface() || sidebarHidden();
+      },
+      get children() {
+        var _el$1 = _$createElement("box");
+        _$setProp(_el$1, "flexDirection", "column");
+        _$setProp(_el$1, "flexShrink", 0);
+        _$setProp(_el$1, "marginBottom", 1);
+        _$insert(_el$1, _$createComponent(Show, {
+          get when() {
+            return surface();
+          },
+          get children() {
+            return _$createComponent(Cell, {
+              get fg() {
+                return theme().text.action.primary.selected;
+              },
+              bold: true,
+              children: " Enable/disable"
+            });
+          }
+        }), null);
+        _$insert(_el$1, _$createComponent(Show, {
+          get when() {
+            return surface();
+          },
+          children: current => (() => {
+            var _el$13 = _$createElement("box");
+            _$setProp(_el$13, "flexShrink", 0);
+            _$setProp(_el$13, "onMouseDown", () => setSelected(SWITCH_ID));
+            _$insert(_el$13, _$createComponent(Cell, {
+              get fg() {
+                return _$memo(() => !!active())() ? theme().text.action.primary.focused : theme().text.base;
+              },
+              bold: true,
+              get children() {
+                return `   ${surfaceOn() ? "[x]" : "[ ]"} ${info().switchTitle}`;
+              }
+            }));
+            _$effect(_p$ => {
+              var _v$13 = boxId(SWITCH_ID),
+                _v$14 = active() ? theme().background.action.primary.focused : TRANSPARENT,
+                _v$15 = click(() => toggleSurface(current()));
+              _v$13 !== _p$.e && (_p$.e = _$setProp(_el$13, "id", _v$13, _p$.e));
+              _v$14 !== _p$.t && (_p$.t = _$setProp(_el$13, "backgroundColor", _v$14, _p$.t));
+              _v$15 !== _p$.a && (_p$.a = _$setProp(_el$13, "onMouseUp", _v$15, _p$.a));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined
+            });
+            return _el$13;
+          })()
+        }), null);
+        _$insert(_el$1, _$createComponent(Show, {
+          get when() {
+            return sidebarHidden();
+          },
+          get children() {
+            var _el$10 = _$createElement("box"),
+              _el$11 = _$createElement("text");
+            _$insertNode(_el$10, _el$11);
+            _$setProp(_el$10, "paddingLeft", 3);
+            _$setProp(_el$10, "flexDirection", "row");
+            _$setProp(_el$10, "gap", 2);
+            _$setProp(_el$10, "flexShrink", 0);
+            _$insertNode(_el$11, _$createTextNode(`The sidebar is hidden, so there is nothing to watch here.`));
+            _$setProp(_el$11, "wrapMode", "word");
+            _$setProp(_el$11, "selectable", false);
+            _$setProp(_el$11, "flexShrink", 1);
+            _$insert(_el$10, _$createComponent(Button, {
+              label: "Show sidebar",
+              run: () => {
+                api.keymap.dispatch("session.sidebar.toggle");
+                setTimeout(props.refocus, 50);
+              }
+            }), null);
+            _$effect(_$p => _$setProp(_el$11, "fg", theme().text.feedback.warning.base, _$p));
+            return _el$10;
+          }
+        }), null);
+        return _el$1;
+      }
+    });
+  }
+
+  /**
+   * A Settings tab's lines: its options, then the surface's providers (and rows) as a tree.
+   * `showPage` shows another of Layout's pages.
+   */
+  function Body(props) {
+    /** The box with only the tree lines, so the drag math counts lines from its top. */
+    let list;
+    let dragId;
+    const surface = () => isSurfaceTab(props.tab) ? props.tab : undefined;
+    const withRows = () => props.tab === "sidebar" || props.tab === "toast";
+    const snapshot = () => props.host.quota.snapshot(props.sessionID);
+    const words = () => snapshot()?.words ?? DEFAULT_WORDS;
+    /** The picked windows of Collapsed or Status line. */
+    const windows = () => shown()[props.tab === "statusLine" ? "statusLine" : "collapsed"].window;
+    /** The providers and rows hidden on this page. */
+    const hiddenIds = () => {
+      const current = surface();
+      return current ? shown().surfaces[current].hidden : [];
+    };
+    const tree = () => {
+      const current = surface();
+      const loaded = snapshot();
+      return current && loaded ? surfaceTree(loaded, shown().surfaces[current]) : [];
+    };
+    const options = createMemo(() => optionLines(props.tab, snapshot(), () => props.box()?.focus()));
+    const lines = createMemo(() => tree().flatMap(({
+      provider,
+      rowIds
+    }) => [treeLine(provider.providerId, provider.providerId, false), ...(withRows() ? rowIds.map(id => treeLine(id, provider.providerId, true)) : [])]));
+    const selectedOption = () => options().find(line => line.id === selected());
+    const selectedLine = () => lines().find(line => lineKey(line.id) === selected());
+    function treeLine(id, providerId, row) {
+      const key = `${row ? "row" : "provider"}:${id}`;
+      const line = treeLines.get(key) ?? {
+        id,
+        providerId,
+        row
+      };
+      treeLines.set(key, line);
+      return line;
+    }
+
+    /**
+     * ↑↓ select the next line; past the first or last one they scroll. In Layout's page list
+     * they show the page above or below.
+     */
+    function select(delta) {
+      if (selected() === PAGES_ID) {
+        stepPage(delta);
+        return;
+      }
+      const ids = [...(pagesOf(props.tab) ? [PAGES_ID] : []), ...(surface() ? [SWITCH_ID] : []), ...options().map(line => line.id), ...lines().map(line => lineKey(line.id))];
+      const next = ids.indexOf(selected()) + delta;
+      if (next < 0 || next >= ids.length) props.scroll()?.scrollBy(delta);else setSelected(ids[next]);
+    }
+    function toggleHidden(id) {
+      const current = surface();
+      if (!current) return;
+      editSurface(current, rows => {
+        const hidden = rows.hidden.includes(id);
+        return {
+          ...rows,
+          hidden: hidden ? rows.hidden.filter(item => item !== id) : [...rows.hidden, id]
+        };
+      });
+    }
+    function cycleWindow(providerId, delta) {
+      const provider = tree().find(item => item.provider.providerId === providerId)?.provider;
+      const choices = provider ? windowChoices(provider, hiddenIds()) : [];
+      if (choices.length === 0) return;
+      const inherited = inheritedWindow(windows(), choices);
+      const next = stepIn(choices, windows()[providerId] ?? inherited, delta);
+      // The window it would show anyway is no pick of its own, so it follows "For all providers".
+      display.edit(settings => setIn(settings, [props.tab === "statusLine" ? "statusLine" : "collapsed", "window", providerId], next === inherited ? undefined : next));
+    }
+    function move(delta) {
+      const current = surface();
+      const line = selectedLine();
+      if (current && line) editSurface(current, rows => movedBy(tree(), rows, line.id, delta));
+    }
+    function ownRow(line) {
+      return tree().find(item => item.provider.providerId === line.providerId)?.provider.rows.find(row => row.id === line.id);
+    }
+
+    /** e or a double-click: type a color, or rename a row. */
+    function startTyping() {
+      const option = selectedOption();
+      if (option?.typed) {
+        setTyping({
+          id: option.id,
+          value: "",
+          ...option.typed
+        });
+        return;
+      }
+      const line = selectedLine();
+      const row = line?.row ? ownRow(line) : undefined;
+      if (!line || !row) return;
+      setTyping({
+        id: lineKey(line.id),
+        value: "",
+        placeholder: shown()[props.tab === "toast" ? "toast" : "sidebar"].names[line.id] ?? row.label,
+        hint: `Type a new name, then enter · enter with nothing typed = its own name ("${row.label}") · esc stop`,
+        apply: text => display.edit(settings => renameRow(settings, props.tab === "toast" ? "toast" : "sidebar", line.id, text))
+      });
+    }
+    function stopTyping() {
+      setTyping(undefined);
+      props.box()?.focus();
+    }
+    function commitTyping() {
+      const current = typing();
+      current?.apply(current.value);
+      stopTyping();
+    }
+
+    /** ↑↓ in Layout's page list: the page above or below this one, shown at once. */
+    function stepPage(delta) {
+      const pages = pagesOf(props.tab) ?? [];
+      const next = pages[pages.indexOf(props.tab) + delta];
+      if (next) props.showPage(next);
+    }
+
+    /** →, enter or space in Layout's page list: the page's first line, its switch or first option. */
+    function toFirstLine() {
+      const first = surface() ? SWITCH_ID : options()[0]?.id;
+      if (first) setSelected(first);
+    }
+
+    /**
+     * Space or enter: to the page's lines from the page list, flip a switch, run a button, next
+     * value, or show/hide a line.
+     */
+    function activate() {
+      const current = surface();
+      const option = selectedOption();
+      const line = selectedLine();
+      if (selected() === PAGES_ID) toFirstLine();else if (selected() === SWITCH_ID && current) toggleSurface(current);else if (option) useOption(option);else if (line) toggleHidden(line.id);
+    }
+
+    /** A click on an option's value: run its button, its next value, or start typing. */
+    function useOption(option) {
+      if (option.run) option.run();else if (option.cycle) option.cycle(1);else startTyping();
+    }
+
+    /** ←/→ change the selected line's value; → in the page list goes to the page's lines. */
+    function sideways(delta) {
+      const option = selectedOption();
+      const line = selectedLine();
+      if (selected() === PAGES_ID) {
+        if (delta > 0) toFirstLine();
+      } else if (option) option.cycle?.(delta);else if (line && !line.row) cycleWindow(line.providerId, delta);
+    }
+
+    /** A provider moves with all its rows; a row moves only among its own provider's rows. */
+    function onDrag(event) {
+      const current = surface();
+      const id = dragId;
+      if (!current || !id || !list || typing()) return;
+      draggedSincePress = true;
+      setDragging(id);
+      // Dragging onto the top or bottom line of a list that scrolls moves it one line.
+      const scroll = props.scroll();
+      if (scroll && event.y <= scroll.y) scroll.scrollBy(-1);else if (scroll && event.y >= scroll.y + scroll.height - 1) scroll.scrollBy(1);
+      // list.y already includes the scroll offset, so this counts lines from the first line.
+      const pointer = event.y - list.y;
+      editSurface(current, rows => draggedTo(tree(), rows, id, pointer, withRows()));
+    }
+
+    // On the Toast tab the real toast shows again after every change of what it shows.
+    createEffect(on(() => {
+      return props.tab === "toast" && JSON.stringify(shown().toast);
+    }, key => {
+      if (key) previewToast(props.host, props.sessionID);
+    }));
+    // Keep the selected line in view when the list is taller than its room.
+    createEffect(on(selected, id => {
+      queueMicrotask(() => props.scroll()?.scrollChildIntoView(boxId(id)));
+    }));
+
+    // Keys work only while the window has the keyboard; they win over the window's own.
+    api.keymap.layer(() => ({
+      target: props.box,
+      priority: 11,
+      enabled: () => typing() === undefined && !confirming(),
+      commands: [{
+        bind: "up",
+        title: "Previous line",
+        group: KEYS,
+        run: () => select(-1)
+      }, {
+        bind: "down",
+        title: "Next line",
+        group: KEYS,
+        run: () => select(1)
+      }, {
+        bind: "shift+up",
+        title: "Move up",
+        group: KEYS,
+        run: () => move(-1)
+      }, {
+        bind: "shift+down",
+        title: "Move down",
+        group: KEYS,
+        run: () => move(1)
+      }, {
+        bind: "alt+up",
+        title: "Move up",
+        group: KEYS,
+        run: () => move(-1)
+      }, {
+        bind: "alt+down",
+        title: "Move down",
+        group: KEYS,
+        run: () => move(1)
+      }, {
+        bind: "space",
+        title: "Use the line",
+        group: KEYS,
+        run: activate
+      }, {
+        bind: "return",
+        title: "Use the line",
+        group: KEYS,
+        run: activate
+      }, {
+        bind: "e",
+        title: "Type a value or rename a row",
+        group: KEYS,
+        run: startTyping
+      }, {
+        bind: "left",
+        title: "Previous value",
+        group: KEYS,
+        run: () => sideways(-1)
+      }, {
+        bind: "right",
+        title: "Next value",
+        group: KEYS,
+        run: () => sideways(1)
+      }, {
+        bind: "ctrl+r",
+        title: "Reset this tab or page",
+        group: KEYS,
+        run: () => resetTabLines(props.tab)
+      }]
+    }));
+    // While typing, the input has the keyboard: Esc only stops typing, Enter keeps the text.
+    api.keymap.layer(() => ({
+      target: () => typingInput,
+      priority: 20,
+      enabled: () => typing() !== undefined,
+      commands: [{
+        bind: "escape",
+        title: "Stop typing",
+        group: KEYS,
+        run: stopTyping
+      }, {
+        bind: "return",
+        title: "Keep it",
+        group: KEYS,
+        run: commitTyping
+      }]
+    }));
+    function TypingInput(inputProps) {
+      return (() => {
+        var _el$14 = _$createElement("input");
+        _$use(element => {
+          typingInput = element;
+        }, _el$14);
+        _$setProp(_el$14, "flexShrink", 0);
+        _$setProp(_el$14, "value", "");
+        _$setProp(_el$14, "focused", true);
+        _$setProp(_el$14, "onInput", value => {
+          const current = typing();
+          if (current) setTyping({
+            ...current,
+            value
+          });
+        });
+        _$setProp(_el$14, "onSubmit", commitTyping);
+        _$effect(_p$ => {
+          var _v$16 = inputProps.width,
+            _v$17 = inputProps.placeholder;
+          _v$16 !== _p$.e && (_p$.e = _$setProp(_el$14, "width", _v$16, _p$.e));
+          _v$17 !== _p$.t && (_p$.t = _$setProp(_el$14, "placeholder", _v$17, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$14;
+      })();
+    }
+    function TreeRow(rowProps) {
+      const line = rowProps.line;
+      const key = lineKey(line.id);
+      const entry = () => tree().find(item => item.provider.providerId === line.providerId);
+      const rows = () => shown().surfaces[surface()];
+      const active = () => selected() === key;
+      // Dragging a provider carries its rows, so they light up with it.
+      const lit = () => active() || dragging() === line.id || line.row && dragging() === line.providerId;
+      const hidden = () => rows().hidden.includes(line.id);
+      const {
+        text
+      } = theme();
+      const fg = () => lit() ? text.action.primary.focused : !rows().enabled || hidden() || line.row && rows().hidden.includes(line.providerId) ? text.muted : text.base;
+      /** Tree lines show which provider a row belongs to: ├ for a middle row, └ for the last. */
+      const branch = () => {
+        const rowIds = entry()?.rowIds ?? [];
+        return !line.row ? "" : rowIds[rowIds.length - 1] === line.id ? "  └ " : "  ├ ";
+      };
+      const own = () => line.row ? ownRow(line) : undefined;
+      const label = () => line.row ? shown()[props.tab === "toast" ? "toast" : "sidebar"].names[line.id] ?? own()?.label ?? line.id : entry()?.provider.label ?? line.id;
+      const summary = row => {
+        if (row.percentRemaining === undefined) return rowValueText(row);
+        const reset = resetText(row, Date.now(), words());
+        return `${percentText(words(), row.percentRemaining, true)}${reset ? ` · ${reset}` : ""}`;
+      };
+      const detail = () => {
+        const provider = entry()?.provider;
+        const row = own();
+        if (row && shown()[props.tab === "toast" ? "toast" : "sidebar"].names[line.id] !== undefined) return `was "${row.label}"`;
+        if (row?.prominence === "supplementary" && words().detail !== "detailed") {
+          return "only with all rows";
+        }
+        if (row) return summary(row);
+        if (!provider) return "";
+        if (provider.error && provider.rows.length === 0) {
+          return describeError(provider.error, provider.label, Date.now());
+        }
+        if (withRows()) return "";
+        const rows = provider.rows.filter(item => !hiddenIds().includes(item.id));
+        const picked = pickRow({
+          rows: rows.map(item => ({
+            row: item,
+            label: item.label,
+            named: false
+          }))
+        }, windowFor(windows(), provider.providerId));
+        return picked ? summary(picked.row) : "";
+      };
+      const choices = () => {
+        const provider = entry()?.provider;
+        return !line.row && !withRows() && provider ? windowChoices(provider, hiddenIds()) : [];
+      };
+      /** Rows sit 4 columns further right, so their names get 4 fewer; the details line up. */
+      const labelWidth = line.row ? 24 : 28;
+      return (() => {
+        var _el$15 = _$createElement("box");
+        _$setProp(_el$15, "flexDirection", "row");
+        _$setProp(_el$15, "onMouseDown", event => {
+          if (event.button !== 0 || typing()) return;
+          setSelected(key);
+          dragId = line.id;
+          if (line.row && isDoubleClick(key)) startTyping();
+        });
+        _$insert(_el$15, _$createComponent(Cell, {
+          get fg() {
+            return text.muted;
+          },
+          get children() {
+            return ` ${branch()}`;
+          }
+        }), null);
+        _$insert(_el$15, _$createComponent(Cell, {
+          get fg() {
+            return _$memo(() => !!lit())() ? fg() : text.action.primary.selected;
+          },
+          get children() {
+            return api.renderer.useMouse === false ? "" : "⠿ ";
+          }
+        }), null);
+        _$insert(_el$15, _$createComponent(Cell, {
+          get fg() {
+            return fg();
+          },
+          get onUp() {
+            return click(() => toggleHidden(line.id));
+          },
+          get children() {
+            return hidden() ? "[ ] " : "[x] ";
+          }
+        }), null);
+        _$insert(_el$15, _$createComponent(Show, {
+          get when() {
+            return typing()?.id === key;
+          },
+          get fallback() {
+            return _$createComponent(Cell, {
+              get fg() {
+                return fg();
+              },
+              get bold() {
+                return !line.row;
+              },
+              get children() {
+                return fit(label(), labelWidth);
+              }
+            });
+          },
+          get children() {
+            return _$createComponent(TypingInput, {
+              width: labelWidth,
+              get placeholder() {
+                return label();
+              }
+            });
+          }
+        }), null);
+        _$insert(_el$15, _$createComponent(Show, {
+          get when() {
+            return choices().length > 0;
+          },
+          get fallback() {
+            return _$createComponent(Cell, {
+              get children() {
+                return _$memo(() => !!withRows())() ? " " : " ".repeat(17);
+              }
+            });
+          },
+          get children() {
+            return _$createComponent(Cell, {
+              get fg() {
+                return _$memo(() => !!active())() ? fg() : text.action.primary.selected;
+              },
+              get onUp() {
+                return click(() => cycleWindow(line.providerId, 1));
+              },
+              get children() {
+                return ` ‹ ${fit(windowTitle(windows()[line.providerId] ?? inheritedWindow(windows(), choices())), 11)} › `;
+              }
+            });
+          }
+        }), null);
+        _$insert(_el$15, _$createComponent(Cell, {
+          get fg() {
+            return _$memo(() => !!lit())() ? fg() : text.muted;
+          },
+          shrink: true,
+          get children() {
+            return fit(detail(), 24);
+          }
+        }), null);
+        _$effect(_p$ => {
+          var _v$18 = boxId(key),
+            _v$19 = lit() ? theme().background.action.primary.focused : TRANSPARENT;
+          _v$18 !== _p$.e && (_p$.e = _$setProp(_el$15, "id", _v$18, _p$.e));
+          _v$19 !== _p$.t && (_p$.t = _$setProp(_el$15, "backgroundColor", _v$19, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$15;
+      })();
+    }
+    return (() => {
+      var _el$16 = _$createElement("box"),
+        _el$18 = _$createElement("box");
+      _$insertNode(_el$16, _el$18);
+      _$setProp(_el$16, "flexDirection", "column");
+      _$insert(_el$16, _$createComponent(For, {
+        get each() {
+          return options();
+        },
+        children: (line, index) => _$createComponent(OptionRow, {
+          line: line,
+          get theme() {
+            return theme();
+          },
+          get active() {
+            return selected() === line.id;
+          },
+          get first() {
+            return index() === 0;
+          },
+          get width() {
+            return props.width;
+          },
+          click: click,
+          press: event => {
+            if (event.button !== 0 || typing()) return;
+            setSelected(line.id);
+            if (line.typed && isDoubleClick(line.id)) startTyping();
+          },
+          use: () => useOption(line),
+          get input() {
+            return typing()?.id === line.id ? width => _$createComponent(TypingInput, {
+              width: width,
+              get placeholder() {
+                return line.typed?.placeholder ?? "";
+              }
+            }) : undefined;
+          }
+        })
+      }), _el$18);
+      _$insert(_el$16, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!surface())() && !snapshot();
+        },
+        get children() {
+          return _$createComponent(Cell, {
+            get fg() {
+              return theme().text.muted;
+            },
+            children: "   Loading quota…"
+          });
+        }
+      }), _el$18);
+      _$insert(_el$16, _$createComponent(Show, {
+        get when() {
+          return !server.saved();
+        },
+        get children() {
+          return _$createComponent(Cell, {
+            get fg() {
+              return theme().text.muted;
+            },
+            children: "   Loading settings…"
+          });
+        }
+      }), _el$18);
+      _$insert(_el$16, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => options().length > 0)() && lines().length > 0;
+        },
+        get children() {
+          var _el$17 = _$createElement("box");
+          _$setProp(_el$17, "height", 1);
+          return _el$17;
+        }
+      }), _el$18);
+      _$use(element => {
+        list = element;
+      }, _el$18);
+      _$setProp(_el$18, "flexDirection", "column");
+      _$setProp(_el$18, "onMouseDrag", onDrag);
+      _$setProp(_el$18, "onMouseDragEnd", () => setDragging(undefined));
+      _$setProp(_el$18, "onMouseUp", () => {
+        dragId = undefined;
+      });
+      _$insert(_el$18, _$createComponent(For, {
+        get each() {
+          return lines();
+        },
+        children: line => _$createComponent(TreeRow, {
+          line: line
+        })
+      }));
+      _$effect(_$p => _$setProp(_el$16, "width", props.width, _$p));
+      return _el$16;
+    })();
+  }
+
+  /**
+   * The bottom bar of a Settings tab: Close, or Save and Discard, or the "Keep your changes?"
+   * question, which also shows on the other tabs when closing asks it.
+   */
+  function Buttons(props) {
+    const settingsTab = () => isSettingsTab(props.tab) ? props.tab : undefined;
+    const warning = () => theme().text.feedback.warning.base;
+    async function save() {
+      try {
+        await server.save();
+      } catch (error) {
+        const message = rpcErrorMessage(error);
+        api.ui.toast.show({
+          variant: "error",
+          title: "Quota settings not saved",
+          message
+        });
+        return;
+      }
+      setConfirming(false);
+      props.close();
+      api.ui.toast.show({
+        variant: "success",
+        title: "Quota settings saved",
+        message: "Every open OpenCode window uses them now, and they stay after a restart.",
+        duration: 4_000
+      });
+    }
+    /** Drops the changes; from the "Keep your changes?" question it also closes the window. */
+    const discardChanges = () => {
+      discard();
+      if (!confirming()) return;
+      setConfirming(false);
+      props.close();
+    };
+    api.keymap.layer(() => ({
+      target: props.box,
+      priority: 12,
+      enabled: () => typing() === undefined && (settingsTab() !== undefined || dirty()),
+      commands: [{
+        bind: "ctrl+s",
+        title: "Save",
+        group: KEYS,
+        run: () => void save()
+      }]
+    }));
+    // While the bottom bar asks about unsaved changes: d drops them, Esc goes back to editing.
+    api.keymap.layer(() => ({
+      target: props.box,
+      priority: 15,
+      enabled: () => confirming() && typing() === undefined,
+      commands: [{
+        bind: "d",
+        title: "Discard the changes",
+        group: KEYS,
+        run: discardChanges
+      }, {
+        bind: "escape",
+        title: "Keep editing",
+        group: KEYS,
+        run: () => setConfirming(false)
+      }]
+    }));
+    return _$createComponent(Show, {
+      get when() {
+        return settingsTab() !== undefined || confirming();
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return !confirming();
+          },
+          get fallback() {
+            return [_$createComponent(Cell, {
+              get fg() {
+                return warning();
+              },
+              bold: true,
+              children: "Keep your changes?"
+            }), _$createComponent(Button, {
+              label: "Save",
+              primary: true,
+              run: () => void save()
+            }), _$createComponent(Button, {
+              label: "Discard",
+              run: discardChanges
+            }), _$createComponent(Button, {
+              label: "Keep editing",
+              run: () => setConfirming(false)
+            })];
+          },
+          get children() {
+            return [_$createComponent(Show, {
+              get when() {
+                return dirty();
+              },
+              get fallback() {
+                return _$createComponent(Button, {
+                  label: "Close",
+                  primary: true,
+                  get run() {
+                    return props.close;
+                  }
+                });
+              },
+              get children() {
+                return [_$createComponent(Button, {
+                  label: "Save",
+                  primary: true,
+                  run: () => void save()
+                }), _$createComponent(Button, {
+                  label: "Discard",
+                  run: discardChanges
+                })];
+              }
+            }), _$createComponent(Show, {
+              get when() {
+                return settingsTab();
+              },
+              children: current => _$createComponent(Button, {
+                get label() {
+                  return resetLabel(current());
+                },
+                run: () => resetTabLines(current())
+              })
+            }), _$createComponent(Show, {
+              get when() {
+                return _$memo(() => settingsTab() === "toast")() && shown().surfaces.toast.enabled;
+              },
+              get children() {
+                return _$createComponent(Button, {
+                  label: "Show toast",
+                  run: () => previewToast(props.host, props.sessionID)
+                });
+              }
+            }), _$createComponent(Cell, {
+              get fg() {
+                return warning();
+              },
+              get children() {
+                return dirty() ? " unsaved changes" : "";
+              }
+            })];
+          }
+        });
+      }
+    });
+  }
+  return {
+    /** The tree line selected on `surface`'s tab, which that surface marks. */
+    marked(surface) {
+      const id = selected();
+      return tab() === surface && id.startsWith("line:") ? id.slice("line:".length) : undefined;
+    },
+    /** Sidebar shows the panel expanded and Collapsed collapsed; undefined = as the user left it. */
+    panelOpen() {
+      if (tab() === "sidebar") return true;
+      return tab() === "collapsed" ? false : undefined;
+    },
+    /** A sidebar panel mounts; the returned function unmounts it. */
+    sidebarShown() {
+      setSidebars(count => count + 1);
+      return () => setSidebars(count => count - 1);
+    },
+    statusLineShown() {
+      const settings = shown();
+      if (!settings.surfaces.statusLine.enabled) return false;
+      const sidebarQuota = sidebars() > 0 && settings.surfaces.sidebar.enabled;
+      return tab() === "statusLine" || settings.statusLine.withSidebar || !sidebarQuota;
+    },
+    /** A line takes typing, so the window's own keys rest. */
+    typing: () => typing() !== undefined,
+    /** A Plugin switch's saved value (`system.exportFile`); undefined until the server answers. */
+    savedSwitch(key) {
+      return server.saved() ? server.value(key) === true : undefined;
+    },
+    /** Saves a Plugin switch straight away; Plugin has no draft and no Save. */
+    saveSwitch: (key, on) => server.saveNow(key, on),
+    /** Reads the saved settings again, for Plugin's switches. */
+    loadSaved: () => server.load(),
+    /** The snapshot with All places' unsaved words, which every surface shows while you edit. */
+    withDraftWords(snapshot) {
+      const words = server.draftWords();
+      if (!snapshot || Object.keys(words).length === 0) return snapshot;
+      return {
+        ...snapshot,
+        words: {
+          ...(snapshot.words ?? DEFAULT_WORDS),
+          ...words
+        }
+      };
+    },
+    /**
+     * The window shows `next`; undefined when it closed, which drops the changes. Any tab
+     * change stops typing, so the window gets its keys back.
+     */
+    setTab(next) {
+      setTyping(undefined);
+      typingInput = undefined;
+      if (next === undefined) {
+        discard();
+        setConfirming(false);
+      }
+      const settingsTab = isSettingsTab(next) ? next : undefined;
+      if (settingsTab !== tab()) setSelected(firstLine(settingsTab));
+      setTabNow(settingsTab);
+      if (settingsTab) void loadServer(settingsTab);
+    },
+    /** Esc or Close: true while there are unsaved changes; the bottom bar then asks about them. */
+    askBeforeClose() {
+      if (!dirty()) return false;
+      setConfirming(true);
+      return true;
+    },
+    /** A press anywhere in the window: clicks count again after a drag, and typing goes on. */
+    pressed() {
+      draggedSincePress = false;
+      if (typing()) typingInput?.focus();
+    },
+    click,
+    /** The keyboard hint, or undefined for the window's own. */
+    hint(windowTab, hasKeyboard) {
+      const current = typing();
+      if (current) return current.hint;
+      if (!hasKeyboard) return undefined;
+      if (confirming()) return "ctrl+s save · d discard the changes · esc keep editing";
+      if (!isSettingsTab(windowTab)) return undefined;
+      const reset = `ctrl+r ${resetLabel(windowTab).toLowerCase()}`;
+      const end = `↑↓ select · tab next tab · ctrl+s save · ${reset} · esc close`;
+      if (selected() === PAGES_ID) {
+        return `↑↓ page · → or enter the page's lines · tab next tab · ctrl+s save · ${reset} · esc close`;
+      }
+      if (windowTab === "layout") return `‹ › or ←/→ change · ${end}`;
+      if (windowTab === "providers") {
+        return `‹ › or ←/→ change · space ticks a provider or flips a switch · double-click a number (or e) to type it · ${end}`;
+      }
+      if (!isSurfaceTab(windowTab)) {
+        return `‹ › or ←/→ change · double-click a color (or e) to type your own · ${end}`;
+      }
+      const rowsTab = windowTab === "sidebar" || windowTab === "toast";
+      const moving = api.renderer.useMouse === false ? "shift+↑↓ move" : `drag ⠿ or shift+↑↓ to move${rowsTab ? " (a provider takes its rows along)" : ""}`;
+      const naming = rowsTab ? "double-click a row (or e) to rename it" : "‹ › pick a window";
+      return `${moving} · [x] or space show/hide · ${naming} · ${end}`;
+    },
+    Pages,
+    Header,
+    Body,
+    Buttons
+  };
+}