opencode-docker-panel 0.4.8

package/dist/panel.js

@@ -0,0 +1,567 @@
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { Index, Show, createSignal, onCleanup } from "solid-js";
+import { ACTION_LABEL, availableActions, buildArgs, runDockerArgs } from "./commands.js";
+import { findComposeFile } from "./compose.js";
+import { runDockerLogs } from "./logs.js";
+import { createDockerPolling, selectRows } from "./poll.js";
+const LOG_VIEW_LINES = 15;
+const LOG_REFRESH_MS = 2000;
+
+/** The argv a stack needs, in one place so the menu footer and the run cannot drift apart. */
+function stackArgs(target) {
+  return ["compose", "-f", target.file, "-p", target.project, "up", "-d"];
+}
+function dotColor(theme, state) {
+  if (state === "running") return theme.text.feedback.success.base;
+  if (state === "paused" || state === "restarting") return theme.text.feedback.warning.base;
+  if (state === "dead") return theme.text.feedback.error.base;
+  return theme.text.muted;
+}
+function levelColor(theme, level) {
+  if (level === "error") return theme.text.feedback.error.base;
+  if (level === "warn") return theme.text.feedback.warning.base;
+  return theme.text.muted;
+}
+function detailLabel(container, pinned) {
+  const base = container.ports.length > 0 ? container.ports.join("  ") : container.status || container.image;
+  return [base, container.composeProject, pinned.includes(container.name) ? "pinned" : ""].filter(Boolean).join(" · ");
+}
+function hasStaleRows(state) {
+  return (state.kind === "unavailable" || state.kind === "stale") && state.containers.length > 0;
+}
+
+/** A fixed viewport is the only way to keep the height predictable: opentui has no scrollable container. */
+function LogsView(props) {
+  const lines = () => props.result?.lines ?? [];
+  const end = () => Math.max(0, lines().length - props.offset);
+  const window = () => lines().slice(Math.max(0, end() - LOG_VIEW_LINES), end());
+  return (() => {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("text"),
+      _el$3 = _$createTextNode(` docker logs --tail 200 -- `),
+      _el$4 = _$createTextNode(` `),
+      _el$1 = _$createElement("box"),
+      _el$10 = _$createElement("text"),
+      _el$11 = _$createTextNode(` `),
+      _el$12 = _$createTextNode(` lines`),
+      _el$13 = _$createTextNode(` · wheel scrolls · esc or click to close`);
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$1);
+    _$insertNode(_el$, _el$10);
+    _$setProp(_el$, "flexDirection", "column");
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$2, _el$4);
+    _$insert(_el$2, () => props.name, _el$4);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return props.result?.error;
+      },
+      get children() {
+        var _el$5 = _$createElement("text"),
+          _el$6 = _$createTextNode(` `);
+        _$insertNode(_el$5, _el$6);
+        _$insert(_el$5, () => props.result?.error ?? "", null);
+        _$effect(_$p => _$setProp(_el$5, "fg", props.theme.text.feedback.error.base, _$p));
+        return _el$5;
+      }
+    }), _el$1);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(props.result && !props.result.error))() && lines().length === 0;
+      },
+      get children() {
+        var _el$7 = _$createElement("text");
+        _$insertNode(_el$7, _$createTextNode(` no output`));
+        _$effect(_$p => _$setProp(_el$7, "fg", props.theme.text.muted, _$p));
+        return _el$7;
+      }
+    }), _el$1);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return !props.result;
+      },
+      get children() {
+        var _el$9 = _$createElement("text");
+        _$insertNode(_el$9, _$createTextNode(` reading logs`));
+        _$effect(_$p => _$setProp(_el$9, "fg", props.theme.text.muted, _$p));
+        return _el$9;
+      }
+    }), _el$1);
+    _$setProp(_el$1, "flexDirection", "column");
+    _$setProp(_el$1, "onMouseScroll", event => {
+      event.stopPropagation();
+      props.onScroll(event);
+    });
+    _$insert(_el$1, _$createComponent(Index, {
+      get each() {
+        return window();
+      },
+      children: line => (() => {
+        var _el$14 = _$createElement("text"),
+          _el$15 = _$createElement("span"),
+          _el$16 = _$createTextNode(` `),
+          _el$17 = _$createElement("span");
+        _$insertNode(_el$14, _el$15);
+        _$insertNode(_el$14, _el$17);
+        _$insertNode(_el$15, _el$16);
+        _$insert(_el$15, () => line().time.slice(11, 19), _el$16);
+        _$insert(_el$17, () => line().text);
+        _$effect(_p$ => {
+          var _v$3 = props.theme.text.base,
+            _v$4 = {
+              fg: props.theme.text.muted
+            },
+            _v$5 = {
+              fg: levelColor(props.theme, line().level)
+            };
+          _v$3 !== _p$.e && (_p$.e = _$setProp(_el$14, "fg", _v$3, _p$.e));
+          _v$4 !== _p$.t && (_p$.t = _$setProp(_el$15, "style", _v$4, _p$.t));
+          _v$5 !== _p$.a && (_p$.a = _$setProp(_el$17, "style", _v$5, _p$.a));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        return _el$14;
+      })()
+    }));
+    _$insertNode(_el$10, _el$11);
+    _$insertNode(_el$10, _el$12);
+    _$insertNode(_el$10, _el$13);
+    _$setProp(_el$10, "onMouseUp", event => {
+      event.stopPropagation();
+      props.onClose();
+    });
+    _$insert(_el$10, () => lines().length, _el$12);
+    _$insert(_el$10, (() => {
+      var _c$ = _$memo(() => end() < lines().length);
+      return () => _c$() ? `, at ${end()}` : "";
+    })(), _el$13);
+    _$effect(_p$ => {
+      var _v$ = props.theme.text.muted,
+        _v$2 = props.theme.text.muted;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$2, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$10, "fg", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+export function DockerPanel(props) {
+  const [open, setOpen] = createSignal(true);
+  const [busy, setBusy] = createSignal(false);
+  const [logs, setLogs] = createSignal(null);
+  const [offset, setOffset] = createSignal(0);
+  const theme = () => props.theme;
+  let logTimer;
+  const stopLogs = () => {
+    if (logTimer) clearInterval(logTimer);
+    logTimer = undefined;
+    setLogs(null);
+    setOffset(0);
+  };
+  const loadLogs = async name => {
+    const result = await runDockerLogs(name);
+    if (logs()?.name !== name) return;
+    setLogs({
+      name,
+      result
+    });
+  };
+  const scrollLogs = event => {
+    const scroll = event.scroll;
+    if (!scroll || scroll.direction !== "up" && scroll.direction !== "down") return;
+    const total = logs()?.result?.lines.length ?? 0;
+    const max = Math.max(0, total - LOG_VIEW_LINES);
+    const step = Math.max(1, scroll.delta);
+    setOffset(current => Math.min(max, Math.max(0, current + (scroll.direction === "up" ? step : -step))));
+  };
+  const openLogs = container => {
+    if (logTimer) clearInterval(logTimer);
+    setOffset(0);
+    setLogs({
+      name: container.name,
+      result: null
+    });
+    void loadLogs(container.name);
+    logTimer = setInterval(() => void loadLogs(container.name), LOG_REFRESH_MS);
+    const view = () => _$createComponent(LogsView, {
+      get name() {
+        return container.name;
+      },
+      get result() {
+        return logs()?.result ?? null;
+      },
+      get theme() {
+        return props.theme;
+      },
+      get offset() {
+        return offset();
+      },
+      onScroll: scrollLogs,
+      onClose: () => props.ui.dialog.clear()
+    });
+    props.ui.dialog.show(view, stopLogs);
+    props.ui.dialog.set({
+      size: "large",
+      centered: true
+    });
+  };
+  onCleanup(() => {
+    if (logTimer) clearInterval(logTimer);
+    if (logs()) props.ui.dialog.clear();
+  });
+
+  // Read the compose file when the panel mounts and again on every poll, never while the host is
+  // assembling the render tree.
+  const [stackSignal, setStackSignal] = createSignal(null);
+  const [pendingStack, setPendingStack] = createSignal(null);
+  const derivePendingStack = stack => {
+    setPendingStack(stack && !polling.state().containers.some(item => item.composeProject === stack.project) ? stack : null);
+  };
+  const refreshStack = () => {
+    const stack = findComposeFile(props.agentDir);
+    setStackSignal(stack);
+    derivePendingStack(stack);
+  };
+  const polling = createDockerPolling(props.intervalMs, props.reload, refreshStack);
+
+  /** One entry point for every action, so the busy guard and the refresh cannot be forgotten. */
+  const run = async (action, title, args) => {
+    if (busy()) return;
+    setBusy(true);
+    const result = await runDockerArgs(args);
+    setBusy(false);
+    props.ui.toast.show({
+      title,
+      message: result.ok ? `${ACTION_LABEL[action]}: ${result.message}` : result.message,
+      variant: result.ok ? "success" : "error"
+    });
+    await polling.refreshAfterAction();
+  };
+
+  /**
+   * The stack the agent directory declares, but only while none of its containers is on the machine.
+   * Computed once per poll instead of inside the markup: a `Show` and its own label both read this,
+   * and re-deriving it during render is what the crash traced back to.
+   */
+
+  /** The list of every container, from which picking one opens the same actions as its row does. */
+  const pickContainer = async all => {
+    const choice = await props.ui.dialog.select({
+      title: `All containers (${all.length})`,
+      placeholder: "Container",
+      options: all.map(container => ({
+        title: container.name,
+        value: container,
+        description: detailLabel(container, props.pinned),
+        footer: container.state
+      }))
+    });
+    if (!choice) return;
+    // The list is a snapshot: a container can stop while it is open, so re-read it before offering actions.
+    const fresh = polling.state().containers.find(item => item.name === choice.name);
+    if (fresh) await openMenu(fresh);
+  };
+
+  /**
+   * The single door to the containers the sidebar does not show. Clicking the header lands on the
+   * list itself, so there is no menu to pick through first.
+   */
+  const openBrowse = async () => {
+    if (busy()) return;
+    const all = polling.state().containers;
+    if (all.length === 0) {
+      props.ui.toast.show({
+        title: "Docker",
+        message: "no containers",
+        variant: "info"
+      });
+      return;
+    }
+    await pickContainer(all);
+  };
+
+  /**
+   * A stack has no container to be the subject of the action, and its file carries build, command and
+   * entrypoint, so it asks once and shows the exact argv in the prompt.
+   */
+  const openStack = async () => {
+    if (busy()) return;
+    const stack = pendingStack();
+    if (!stack) return;
+    const confirmed = await props.ui.dialog.confirm({
+      title: `Up ${stack.project}?`,
+      message: `Starts every service of this compose project from ${stack.file}:\n\n${stackArgs(stack).join(" ")}`,
+      label: {
+        confirm: "Up stack",
+        cancel: "Cancel"
+      }
+    });
+    if (!confirmed) return;
+    await run("up", stack.project, stackArgs(stack));
+  };
+  const openMenu = async container => {
+    if (busy()) return;
+    const isPinned = props.pinned.includes(container.name);
+    // Read once per menu: compose can build images, so the action must not wait on a second read.
+    const stack = stackSignal()?.project === container.composeProject ? stackSignal() : null;
+    const options = [...availableActions(container, stack).map(item => ({
+      title: ACTION_LABEL[item],
+      value: item,
+      description: item === "down" ? `stops every container of ${container.composeProject}` : item === "up" ? `starts every service of ${stack?.project} from the agent directory` : container.status,
+      footer: buildArgs(item, container, stack).join(" ")
+    })), {
+      title: "Logs",
+      value: "logs",
+      description: "read the last 200 log lines in the sidebar",
+      footer: `docker logs --tail 200 -- ${container.name}`
+    }, {
+      title: isPinned ? "Unpin" : "Pin",
+      value: "pin",
+      description: isPinned ? "put this container back under the row limit" : "keep this container visible whatever the limit",
+      footer: "stored by the host, survives a restart"
+    }];
+    try {
+      const choice = await props.ui.dialog.select({
+        title: container.name,
+        placeholder: "Action",
+        options
+      });
+      if (!choice) return;
+      if (choice === "logs") {
+        openLogs(container);
+        return;
+      }
+      if (choice === "pin") {
+        await props.onTogglePin(container.name);
+        props.ui.toast.show({
+          title: container.name,
+          message: isPinned ? "Unpinned: back under the row limit" : "Pinned: shown whatever the row limit"
+        });
+        return;
+      }
+      if (choice === "down") {
+        const project = container.composeProject;
+        const confirmed = await props.ui.dialog.confirm({
+          title: `Down ${project}?`,
+          message: "Removes this project's containers and networks. Volumes are kept. Not reversible from the panel.",
+          label: {
+            confirm: "Down",
+            cancel: "Cancel"
+          }
+        });
+        if (!confirmed) return;
+      }
+      await run(choice, container.name, buildArgs(choice, container, stack));
+    } catch (error) {
+      props.ui.toast.show({
+        title: container.name,
+        message: `action failed: ${error instanceof Error ? error.message : String(error)}`,
+        variant: "error"
+      });
+    }
+  };
+
+  // A click in opentui is a mousedown plus a mouseup, and the host dismisses an overlay from the
+  // next mouse event it sees. Every dialog is therefore armed on the release, and only mounted after
+  // that release has finished propagating, so the release cannot land on its own backdrop.
+  const arm = (open, event) => {
+    event.stopPropagation();
+    setTimeout(() => void open(), 0);
+  };
+  const visible = () => selectRows(polling.state().containers, props.pinned);
+  const hasRows = () => visible().length > 0;
+  const pressHeader = () => {
+    if (hasRows()) {
+      setOpen(value => !value);
+      return;
+    }
+    void openBrowse();
+  };
+  return (() => {
+    var _el$18 = _$createElement("box"),
+      _el$19 = _$createElement("box"),
+      _el$20 = _$createElement("text"),
+      _el$21 = _$createElement("b");
+    _$insertNode(_el$18, _el$19);
+    _$insertNode(_el$19, _el$20);
+    _$setProp(_el$19, "flexDirection", "row");
+    _$setProp(_el$19, "gap", 1);
+    _$setProp(_el$19, "onMouseUp", event => arm(pressHeader, event));
+    _$insertNode(_el$20, _el$21);
+    _$insertNode(_el$21, _$createTextNode(`Docker`));
+    _$insert(_el$20, _$createComponent(Show, {
+      get when() {
+        return polling.state().containers.length > 0;
+      },
+      get children() {
+        var _el$23 = _$createElement("span"),
+          _el$24 = _$createTextNode(` (`),
+          _el$25 = _$createTextNode(`)`);
+        _$insertNode(_el$23, _el$24);
+        _$insertNode(_el$23, _el$25);
+        _$insert(_el$23, () => polling.state().containers.length, _el$25);
+        _$effect(_$p => _$setProp(_el$23, "style", {
+          fg: theme().text.muted
+        }, _$p));
+        return _el$23;
+      }
+    }), null);
+    _$insert(_el$20, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!!hasRows())() && polling.state().containers.length > 0;
+      },
+      get children() {
+        var _el$26 = _$createElement("span");
+        _$insertNode(_el$26, _$createTextNode(` click for the list`));
+        _$effect(_$p => _$setProp(_el$26, "style", {
+          fg: theme().text.muted
+        }, _$p));
+        return _el$26;
+      }
+    }), null);
+    _$insert(_el$19, _$createComponent(Show, {
+      get when() {
+        return hasStaleRows(polling.state());
+      },
+      get children() {
+        var _el$28 = _$createElement("text");
+        _$insertNode(_el$28, _$createTextNode(` stale`));
+        _$effect(_$p => _$setProp(_el$28, "fg", theme().text.feedback.warning.base, _$p));
+        return _el$28;
+      }
+    }), null);
+    _$insert(_el$19, _$createComponent(Show, {
+      get when() {
+        return busy();
+      },
+      get children() {
+        var _el$30 = _$createElement("text");
+        _$insertNode(_el$30, _$createTextNode(` working`));
+        _$effect(_$p => _$setProp(_el$30, "fg", theme().text.muted, _$p));
+        return _el$30;
+      }
+    }), null);
+    _$insert(_el$18, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => polling.state().containers.length === 0)() && polling.state().detail.length > 0;
+      },
+      get children() {
+        var _el$32 = _$createElement("text"),
+          _el$33 = _$createTextNode(` `);
+        _$insertNode(_el$32, _el$33);
+        _$insert(_el$32, () => polling.state().detail, null);
+        _$effect(_$p => _$setProp(_el$32, "fg", theme().text.muted, _$p));
+        return _el$32;
+      }
+    }), null);
+    _$insert(_el$18, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => polling.state().containers.length > 0)() && open();
+      },
+      get children() {
+        return [_$createComponent(Index, {
+          get each() {
+            return visible();
+          },
+          children: container => (() => {
+            var _el$43 = _$createElement("box"),
+              _el$44 = _$createElement("text"),
+              _el$46 = _$createElement("text"),
+              _el$47 = _$createTextNode(` `),
+              _el$48 = _$createElement("span");
+            _$insertNode(_el$43, _el$44);
+            _$insertNode(_el$43, _el$46);
+            _$setProp(_el$43, "flexDirection", "row");
+            _$setProp(_el$43, "gap", 1);
+            _$setProp(_el$43, "onMouseUp", event => arm(() => openMenu(container()), event));
+            _$insertNode(_el$44, _$createTextNode(`•`));
+            _$setProp(_el$44, "flexShrink", 0);
+            _$insertNode(_el$46, _el$47);
+            _$insertNode(_el$46, _el$48);
+            _$setProp(_el$46, "wrapMode", "word");
+            _$insert(_el$46, () => container().name, _el$47);
+            _$insert(_el$48, () => detailLabel(container(), props.pinned));
+            _$effect(_p$ => {
+              var _v$8 = dotColor(theme(), container().state),
+                _v$9 = theme().text.base,
+                _v$0 = {
+                  fg: theme().text.muted
+                };
+              _v$8 !== _p$.e && (_p$.e = _$setProp(_el$44, "fg", _v$8, _p$.e));
+              _v$9 !== _p$.t && (_p$.t = _$setProp(_el$46, "fg", _v$9, _p$.t));
+              _v$0 !== _p$.a && (_p$.a = _$setProp(_el$48, "style", _v$0, _p$.a));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined
+            });
+            return _el$43;
+          })()
+        }), _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!hasRows())() && polling.state().containers.length > visible().length;
+          },
+          get children() {
+            var _el$34 = _$createElement("text"),
+              _el$35 = _$createTextNode(` `),
+              _el$36 = _$createTextNode(` more, click for all`);
+            _$insertNode(_el$34, _el$35);
+            _$insertNode(_el$34, _el$36);
+            _$setProp(_el$34, "onMouseUp", event => arm(openBrowse, event));
+            _$insert(_el$34, () => polling.state().containers.length - visible().length, _el$36);
+            _$effect(_$p => _$setProp(_el$34, "fg", theme().text.muted, _$p));
+            return _el$34;
+          }
+        })];
+      }
+    }), null);
+    _$insert(_el$18, _$createComponent(Show, {
+      get when() {
+        return pendingStack();
+      },
+      get children() {
+        var _el$37 = _$createElement("text"),
+          _el$38 = _$createElement("b"),
+          _el$40 = _$createElement("span"),
+          _el$41 = _$createTextNode(` · `),
+          _el$42 = _$createTextNode(` is not running here`);
+        _$insertNode(_el$37, _el$38);
+        _$insertNode(_el$37, _el$40);
+        _$setProp(_el$37, "onMouseUp", event => arm(() => void openStack(), event));
+        _$insertNode(_el$38, _$createTextNode(`Up stack`));
+        _$insertNode(_el$40, _el$41);
+        _$insertNode(_el$40, _el$42);
+        _$insert(_el$40, () => pendingStack()?.project, _el$42);
+        _$effect(_p$ => {
+          var _v$6 = theme().text.base,
+            _v$7 = {
+              fg: theme().text.muted
+            };
+          _v$6 !== _p$.e && (_p$.e = _$setProp(_el$37, "fg", _v$6, _p$.e));
+          _v$7 !== _p$.t && (_p$.t = _$setProp(_el$40, "style", _v$7, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$37;
+      }
+    }), null);
+    _$effect(_$p => _$setProp(_el$20, "fg", theme().text.base, _$p));
+    return _el$18;
+  })();
+}

package/dist/poll.js

@@ -0,0 +1,86 @@
+import { createSignal, onCleanup } from "solid-js";
+import { runDockerPs } from "./docker.js";
+const INITIAL = {
+  kind: "empty",
+  containers: [],
+  detail: "loading"
+};
+
+/** docker reports the old state for a moment after start or stop, so an action is polled twice. */
+const SETTLE_MS = 1200;
+export function keepContainers(previous, next) {
+  if (next.kind === "unavailable" || next.kind === "stale") return previous;
+  return next.containers;
+}
+
+/** The sidebar belongs to what runs right now, so it shows five running containers and nothing else. */
+export const MAX_RUNNING = 5;
+
+/**
+ * A pinned container is shown whatever its state, and spends the running budget when it happens to run,
+ * so pinning everything shows everything. Stopped containers get no row: the dialog is their only door.
+ */
+export function selectRows(all, pinned) {
+  const isPinned = item => pinned.includes(item.name);
+  const fixed = all.filter(isPinned);
+  const running = all.filter(item => !isPinned(item) && item.state === "running");
+  return [...fixed, ...running.slice(0, Math.max(0, MAX_RUNNING - fixed.length))];
+}
+/** The host does not repaint this slot when only a signal changes, so the panel is remounted on a real change. */
+function signature(containers) {
+  return containers.map(item => `${item.name}:${item.state}`).join("|");
+}
+
+/** A container in a crash loop changes state on every poll, and each remount costs a fresh docker ps. */
+const RELOAD_COOLDOWN_MS = 10000;
+export function createDockerPolling(intervalMs, onContentChange, onPoll) {
+  const [state, setState] = createSignal(INITIAL);
+  let timer;
+  let settle;
+  let disposed = false;
+  let last = "";
+  let seen = false;
+  let reloadedAt = 0;
+  const refresh = async () => {
+    const next = await runDockerPs();
+    if (disposed) return;
+    const visible = keepContainers(state().containers, next);
+    setState({
+      ...next,
+      containers: visible
+    });
+    onPoll?.();
+    if (next.kind === "unavailable" || next.kind === "stale") return;
+    const current = signature(visible);
+    if (current === last) return;
+    last = current;
+    if (!seen) {
+      seen = true;
+      return;
+    }
+    if (Date.now() - reloadedAt < RELOAD_COOLDOWN_MS) return;
+    reloadedAt = Date.now();
+    onContentChange();
+  };
+  const tick = async () => {
+    await refresh();
+    if (disposed) return;
+    timer = setTimeout(tick, intervalMs);
+  };
+  void tick();
+  onCleanup(() => {
+    disposed = true;
+    if (timer) clearTimeout(timer);
+    if (settle) clearTimeout(settle);
+  });
+  return {
+    state,
+    refresh,
+    refreshAfterAction: async () => {
+      await refresh();
+      if (disposed) return;
+      if (settle) clearTimeout(settle);
+      settle = setTimeout(() => void refresh(), SETTLE_MS);
+    }
+  };
+}