dsh-mobile-plugin 0.5.27 → 0.5.29

package/extensions/magpie/kernel.js

@@ -0,0 +1,274 @@
+// The window's plugin kernel (docs/subsystems/plugin-runtime.md, P1). A
+// plugin's page is a part it adds to the "page" slot: its markup, put in the
+// page where index.html's <template data-slot="page"> is, and its hooks,
+// which the shell calls through magpie.call. A hook that throws breaks only
+// its own page: the page says so, with a Try again, and the other pages go
+// on (the error boundary). ctx.ui is the kit a plugin draws with, and
+// ui.form draws a plugin's settings from the schema the Go side made of
+// them (pluginrt.SchemaOf).
+//
+// Loaded after i18n.js and before the plugins' scripts and app.js. A
+// plugin's words come with it (its i18n.js, magpie.strings). Its scripts
+// register at once, so its page is in the page before app.js looks for
+// it, but run nothing of app.js's then: mount runs at magpie.start, which
+// app.js calls once it is set up.
+(() => {
+  const plugins = new Map(); // id → { id, config, onConfig: [], disposers: [] }
+  const pages = new Map(); // key → { plugin, part, main, mounted, broken }
+  let started = false;
+
+  function context(p) {
+    return {
+      id: p.id,
+      get config() { return p.config; },
+      // a change of the plugin's settings (Plugins › Built-in), after
+      // ctx.config has it
+      onConfig(fn) { p.onConfig.push(fn); },
+      onDispose(fn) { p.disposers.push(fn); },
+      // a page of the plugin's that broke after its hook returned (a
+      // frame's own error, one that never answered): it shows what broke,
+      // with a Try again, as a hook that throws does
+      broke(key, err) {
+        const page = pages.get(key);
+        if (page && page.plugin === p && !page.broken) fail(page, "open", [], err);
+      },
+      slots: { add: (slot, part) => add(p, slot, part) },
+      ui,
+    };
+  }
+
+  function add(p, slot, part) {
+    if (slot !== "page") throw new Error(`no slot ${slot}`);
+    if (!/^[a-z][a-z0-9-]*$/.test(part.key || "") || pages.has(part.key) || document.getElementById("view-" + part.key)) {
+      throw new Error(`page ${part.key} is taken`);
+    }
+    const main = document.createElement("main");
+    main.className = "view";
+    main.id = "view-" + part.key;
+    main.hidden = true;
+    main.dataset.feature = p.id;
+    main.innerHTML = part.html || "";
+    window.magpie?.fillSlots?.(main);
+    const anchor = document.querySelector('template[data-slot="page"]');
+    if (anchor) anchor.before(main);
+    else document.body.append(main);
+    const page = { plugin: p, part, main, mounted: false, broken: null };
+    pages.set(part.key, page);
+    if (started) run(page, "mount", [main]);
+  }
+
+  // The error boundary: a hook that throws (or whose promise fails) is
+  // caught here, and the page shows what broke instead of what it had.
+  function fail(page, hook, args, err) {
+    console.error(`[magpie] ${page.plugin.id}: ${page.part.key}.${hook}`, err);
+    page.broken = { hook, args };
+    const card = document.createElement("div");
+    card.className = "list slot-error";
+    card.setAttribute("role", "alert");
+    const row = document.createElement("div");
+    row.className = "row";
+    const who = document.createElement("div");
+    who.className = "who";
+    const name = document.createElement("div");
+    name.className = "name";
+    name.textContent = t("This page stopped working");
+    const sub = document.createElement("div");
+    sub.className = "sub";
+    sub.textContent = String(err?.message || err);
+    who.append(name, sub);
+    const again = document.createElement("button");
+    again.type = "button";
+    again.className = "text slot-again";
+    again.textContent = t("Try again");
+    again.onclick = () => retry(page);
+    row.append(who, again);
+    card.append(row);
+    page.main.classList.remove("loading");
+    page.main.removeAttribute("aria-busy");
+    page.main.replaceChildren(card);
+  }
+
+  // Try again: the page's markup as it came, mounted again, and the hook
+  // that broke run again with what it was given.
+  function retry(page) {
+    const { hook, args } = page.broken;
+    page.broken = null;
+    page.mounted = false;
+    page.main.innerHTML = page.part.html || "";
+    window.magpie?.fillSlots?.(page.main);
+    window.translateStatic?.();
+    if (hook !== "mount") run(page, "mount", [page.main]);
+    run(page, hook, args);
+  }
+
+  function run(page, hook, args) {
+    if (page.broken) return undefined;
+    if (hook === "mount") {
+      if (page.mounted) return undefined;
+      page.mounted = true;
+    } else if (!page.mounted && started) {
+      run(page, "mount", [page.main]);
+      if (page.broken) return undefined;
+    }
+    const fn = page.part[hook];
+    if (typeof fn !== "function") return undefined;
+    try {
+      const out = fn.apply(page.part, args);
+      if (out && typeof out.then === "function") {
+        return out.catch((err) => { if (!page.broken) fail(page, hook, args, err); });
+      }
+      return out;
+    } catch (err) {
+      fail(page, hook, args, err);
+      return undefined;
+    }
+  }
+
+  // ---------- the kit ----------
+  // What a plugin draws with, as the rest of the window draws: el, the app
+  // menu (never a native <select>), the switch, the settings row.
+  const ui = {
+    el: (tag, cls, text) => el(tag, cls, text),
+    button(label, onClick, cls = "text") {
+      const b = el("button", cls, label);
+      b.type = "button";
+      b.onclick = onClick;
+      return b;
+    },
+    toggle(on, label, onChange) {
+      const b = el("button", "lib-switch use-credits" + (on ? " on" : ""));
+      b.type = "button";
+      b.setAttribute("role", "switch");
+      b.setAttribute("aria-checked", String(on));
+      b.setAttribute("aria-label", label);
+      b.append(el("i"));
+      b.onclick = () => {
+        on = !on;
+        b.classList.toggle("on", on);
+        b.setAttribute("aria-checked", String(on));
+        onChange(on);
+      };
+      return b;
+    },
+    // a pick of one of opts ([{ v, name }]), in the app's menu
+    menu(opts, value, head, onPick) {
+      const b = el("button", "proto pick");
+      b.type = "button";
+      const paint = () => {
+        const o = opts.find((x) => x.v === value);
+        b.replaceChildren(el("span", "", o ? o.name : String(value)), svg(CHEV, 11, 1.6));
+      };
+      paint();
+      b.onclick = (ev) => {
+        ev.stopPropagation();
+        openProtoMenu(b, opts.map((o) => ({ ...o, literalName: true, note: "" })), value, (v) => {
+          value = v;
+          paint();
+          onPick(v);
+        }, head, "", "right");
+      };
+      return b;
+    },
+    // a settings row: what it is, and its control at the end
+    row(title, description, control) {
+      const r = el("div", "row pref");
+      const who = el("div", "who");
+      who.append(el("div", "name", title));
+      if (description) who.append(el("div", "sub", description));
+      r.append(who, control);
+      return r;
+    },
+    // The rows of a plugin's settings, drawn from its schema: true or false
+    // a switch, one of a few a menu, a number a field kept to its range,
+    // text a field. onChange gets { key: value } for the one changed.
+    form(schema, values, onChange) {
+      const rows = [];
+      for (const key of schema?.["x-order"] || Object.keys(schema?.properties || {})) {
+        const p = schema.properties[key];
+        if (!p) continue;
+        const value = values?.[key] ?? p.default;
+        const title = t(p.title), say = p.description ? t(p.description) : "";
+        let control;
+        if (p.type === "boolean") control = ui.toggle(!!value, title, (v) => onChange({ [key]: v }));
+        else if (p.enum?.length) {
+          control = ui.menu(p.enum.map((v) => ({ v, name: typeof v === "number" ? v.toLocaleString(locale) : t(String(v)) })), value, p.title, (v) => onChange({ [key]: v }));
+        } else {
+          const number = p.type === "integer" || p.type === "number";
+          control = el("input", "set-field");
+          control.type = number ? "number" : "text";
+          control.value = value ?? "";
+          control.setAttribute("aria-label", title);
+          if (number) {
+            if (p.minimum !== undefined) control.min = p.minimum;
+            if (p.maximum !== undefined) control.max = p.maximum;
+            if (p.type === "integer") control.step = 1;
+          }
+          control.onchange = () => {
+            let v = control.value;
+            if (number) {
+              v = Number(v);
+              const bad = control.value === "" || !Number.isFinite(v) || (p.type === "integer" && !Number.isInteger(v))
+                || (p.minimum !== undefined && v < p.minimum) || (p.maximum !== undefined && v > p.maximum);
+              control.setAttribute("aria-invalid", String(bad));
+              if (bad) return;
+            }
+            onChange({ [key]: v });
+          };
+        }
+        const r = ui.row(title, say, control);
+        r.dataset.setting = key;
+        rows.push(r);
+      }
+      return rows;
+    },
+  };
+
+  window.magpie = {
+    ui,
+    plugin(id, setup) {
+      if (plugins.has(id)) throw new Error(`plugin ${id} is registered twice`);
+      const p = { id, config: { ...(window.bootPrefs?.pluginConfig?.[id] || {}) }, onConfig: [], disposers: [] };
+      plugins.set(id, p);
+      try {
+        setup(context(p));
+      } catch (err) {
+        console.error(`[magpie] ${id}: setup`, err);
+      }
+    },
+    // app.js, once it is set up: every page is mounted
+    start() {
+      if (started) return;
+      started = true;
+      for (const page of pages.values()) run(page, "mount", [page.main]);
+    },
+    // a page's hook, behind the boundary; nothing for a page no plugin has
+    call(key, hook, ...args) {
+      const page = pages.get(key);
+      return page ? run(page, hook, args) : undefined;
+    },
+    // a plugin's words in each language ({ zh: { English: 中文 }, … }),
+    // added to i18n.js's; one already there is a mistake, said and not
+    // taken, as the later one would silently win
+    strings(dict) {
+      for (const [lang, words] of Object.entries(dict)) {
+        const to = (I18N[lang] ||= {});
+        for (const [k, v] of Object.entries(words)) {
+          if (k in to) console.error(`[magpie] ${lang} ${JSON.stringify(k)} is said twice`);
+          else to[k] = v;
+        }
+      }
+    },
+    page: (key) => pages.get(key)?.part,
+    pages: () => [...pages.keys()],
+    // the plugins' settings as Plugins › Built-in or boot.js has them
+    configure(id, config) {
+      const p = plugins.get(id);
+      if (!p || !config) return;
+      if (JSON.stringify(p.config) === JSON.stringify(config)) return;
+      p.config = { ...config };
+      for (const fn of p.onConfig) {
+        try { fn(p.config); } catch (err) { console.error(`[magpie] ${id}: config`, err); }
+      }
+    },
+  };
+})();

package/extensions/magpie/keyspend.js

@@ -0,0 +1,63 @@
+// A key's spend cap (sparkling_lemur_62868 on Discord: a team's OpenAI
+// key, with credits other services spend from too): how much magpie may
+// spend on it, in USD at the Usage page's prices, a day, a month or in
+// all. Past it the gateway passes the key over, as a usage cap holds an
+// account (provider/key_spend.go). app.js imports this when the provider
+// editor draws a key's row (keySpend), so it weighs nothing on the core.
+const usdText = (v) => "$" + (v >= 100 ? v.toFixed(0) : v.toFixed(2));
+const SPEND_PERIODS = { day: "a day", month: "a month", total: "in all" };
+function keySpendPill(p, k) {
+  const sc = k.spend, name = k.name || k.masked;
+  const pill = el("button", "aspend" + (sc ? " set" : "") + (sc?.held ? " at-cap" : ""));
+  pill.type = "button";
+  const v = sc && { spent: usdText(sc.spent || 0), cap: usdText(sc.usd) };
+  pill.textContent = !sc ? t("No spend cap") : t(sc.period === "month" ? "{spent} of {cap} this month" : sc.period === "total" ? "{spent} of {cap} in all" : "{spent} of {cap} today", v);
+  pill.title = sc ? t("Stops at {cap} {period}, counted at the prices the Usage page shows for the calls magpie sends on this key. Past it, magpie goes on to the provider's other keys and its fallbacks. Requests under way still finish, so it can go a little past the cap, and a model with no known price counts nothing. Click to change", { cap: v.cap, period: t(SPEND_PERIODS[sc.period] || "a day") })
+    : t("No spend cap: magpie sends this key requests whatever they cost. Click to set how much it may spend, a day, a month or in all; past it, magpie goes on to the provider's other keys and its fallbacks");
+  pill.setAttribute("aria-haspopup", "menu");
+  pill.setAttribute("aria-expanded", "false");
+  const set = (usd, period) => accountAction("provider/keyspendcap", { id: p.id, account: k.id, spend: usd ? { usd, period } : null },
+    !usd ? t("{who} has no spend cap", { who: name })
+      : t(period === "month" ? "{who} stops at {usd} a month" : period === "total" ? "{who} stops at {usd} in all" : "{who} stops at {usd} a day", { who: name, usd: usdText(usd) }));
+  const amount = (s) => { const n = Number(s.replace(/^\$/, "").trim()); return n > 0 && n <= 1e6 ? n : null; };
+  pill.onclick = (e) => {
+    e.stopPropagation();
+    if (pill.classList.contains("open")) return closeProtoMenu();
+    const opts = [
+      { v: "off", name: "No spend cap", note: "Spend as much as the key has" },
+      { v: "day", name: "Per day…", note: "Counts again each day" },
+      { v: "month", name: "Per month…", note: "Counts again each month" },
+      { v: "total", name: "In all…", note: "Counted from when it is set" },
+    ];
+    openProtoMenu(pill, opts, sc?.period || "off", (per) => {
+      if (per === "off") return sc && set(0);
+      pillNumber(pill, sc ? String(sc.usd) : "", "USD", "aspend-in", t("Spend cap, in USD"), amount, t("A spend cap is an amount in USD above 0, up to 1,000,000"), sc?.period === per ? sc.usd : null, (usd) => set(usd, per));
+    }, "Spend cap", "sess-menu");
+  };
+  return pill;
+}
+// keySpendLine: a key held at its spend cap, on a line under its row
+function keySpendLine(k) {
+  const sc = k.spend;
+  if (!sc?.held) return null;
+  const s = el("span", "key-rest", sc.reset ? t("At its spend cap · back {in}", { in: untilText(new Date(sc.reset)) }) : t("At its spend cap · until it is raised"));
+  s.title = t("This key has spent its cap, so the gateway passes it over and tries the next key or a fallback. With none, requests are refused with a spend-cap error")
+    + (sc.reset ? "\n" + resetText(new Date(sc.reset), new Date(sc.reset).toLocaleString(intlLang())) : "");
+  const line = el("div", "key-rest-line key-spend-line");
+  line.append(s);
+  return line;
+}
+
+// keySpendFill puts key k's spend cap pill in its row, before the gap, and
+// its held line under the row's other lines
+window.keySpendFill = function (row, p, k) {
+  row.querySelector(":scope > .aspend")?.remove();
+  row.querySelector(":scope > .key-spend-line")?.remove();
+  const pill = keySpendPill(p, k), gap = row.querySelector(":scope > .grow");
+  gap ? gap.before(pill) : row.append(pill);
+  const line = keySpendLine(k);
+  if (!line) return;
+  const at = row.querySelector(":scope > .key-rest-line") || row.querySelector(":scope > .key-acts");
+  at ? at.after(line) : row.append(line);
+  row.classList.add("resting");
+};

package/extensions/magpie/layout.js

@@ -0,0 +1,26 @@
+// Run at the start of the body, before any UI can paint. app.js may still
+// be downloading when the header appears, so its layout must already match
+// the browser, desktop window or tray panel.
+(function () {
+  var mode = new URLSearchParams(location.search).get("mode") || "window";
+  var web = !!(window.bootPrefs && window.bootPrefs.web);
+  document.body.classList.add(mode);
+  if (window.bootPrefs && window.bootPrefs.reduceMotion) window.holdStill(true);
+  if (web) document.body.classList.add("web");
+  // Preserve the existing iOS viewport policy before app.js runs.
+  if (web && (/iP(hone|ad|od)/.test(navigator.userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1))) {
+    var viewport = document.querySelector('meta[name="viewport"]');
+    if (viewport) viewport.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover");
+  }
+  if (!web && /^Mac/.test(navigator.platform)) document.body.classList.add("mac");
+  if (!web && /^Linux/.test(navigator.platform)) document.body.classList.add("linux");
+  if (/^Win/.test(navigator.platform)) document.documentElement.classList.add("win");
+  // the panel opens the main window from the edge nearest the tray: its
+  // foot over Windows' bottom taskbar, its header elsewhere, until the app
+  // says where the panel was placed (panelside.go, magpiePanelOpenAt)
+  if (mode === "panel") document.body.dataset.openAt = /^Win/.test(navigator.platform) ? "foot" : "head";
+  // --bar: see app.css, .view
+  function bar() { var p = document.createElement("div"); p.className = "view"; p.style.cssText = "position:absolute;visibility:hidden;height:9px"; document.body.appendChild(p); document.documentElement.style.setProperty("--bar", p.offsetWidth - p.clientWidth + "px"); p.remove(); }
+  bar();
+  addEventListener("resize", bar);
+})();

package/extensions/magpie/manifest.json

@@ -0,0 +1,37 @@
+{
+  "name": "magpie",
+  "short_name": "magpie",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "background_color": "#f4f4f6",
+  "theme_color": "#f4f4f6",
+  "icons": [
+    {
+      "src": "icons/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "id": "com.dsh.mobile.extension.magpie",
+  "version": "1.0.0",
+  "apiVersion": "1",
+  "main": "index.html",
+  "description": "在手机上打开 magpie 的完整界面（Agents / Providers / Routing / Usage / Settings）。按需下载，数据经宿主取。",
+  "capabilities": [
+    "content.read",
+    "card.write",
+    "host.data"
+  ],
+  "hostData": {
+    "service": "magpie",
+    "match": [
+      "/api/"
+    ]
+  }
+}

package/extensions/magpie/navlamp.js

@@ -0,0 +1,47 @@
+// The sidebar lights the row under the pointer as a torch would, in its
+// pages (Providers, Routing…, Settings), their sub-lists and the
+// gateway's address at its foot alike:
+// brightest where it points, the rest of that row a step up from the
+// others, which keep their own ink (app.css, span.lit). The light
+// follows the pointer with a little lag and fades out as it moves on; with
+// reduced motion it is where the pointer is at once. Imported by app.js
+// when the pointer first comes over the sidebar (layoutNav), not at start,
+// where it held up the open page's row; a touch never lights a row.
+document.documentElement.classList.add("navlamp");
+const lit = new Map(); // a row's word -> how lit it is, 0 to 1
+let at = null, tx = 0, x = 0, raf = 0;
+
+function frame() {
+  raf = 0;
+  const still = calm(), row = at && at.isConnected && !at.parentElement.matches(".cur, .on") ? at : null;
+  if (row && !lit.has(row)) lit.set(row, 0);
+  x = still ? tx : x + (tx - x) * 0.22;
+  let busy = Math.abs(tx - x) > 0.3;
+  for (const [s, v] of lit) {
+    const to = s === row ? 1 : 0, now = still ? to : v + (to - v) * (to > v ? 0.22 : 0.1);
+    if (!to && (now < 0.01 || !s.isConnected)) {
+      lit.delete(s);
+      s.classList.remove("lit");
+      s.style.removeProperty("--si");
+      s.style.removeProperty("--lx");
+      continue;
+    }
+    if (Math.abs(to - now) > 0.002) busy = true;
+    lit.set(s, now);
+    s.classList.add("lit");
+    s.style.setProperty("--si", now.toFixed(3));
+    s.style.setProperty("--lx", (x - s.getBoundingClientRect().left).toFixed(1) + "px");
+  }
+  if (busy) raf = requestAnimationFrame(frame);
+}
+const go = () => { if (!raf) raf = requestAnimationFrame(frame); };
+
+document.addEventListener("pointermove", (e) => {
+  const row = e.pointerType === "touch" || !e.target.closest ? null : e.target.closest(".nav-sub > .nav-s, body.side-nav :is(#nav > button[data-view], #prefs, #sideGw)");
+  const word = row && row.querySelector(":scope > span");
+  if (word && !at) x = e.clientX;
+  tx = e.clientX;
+  if (word !== at) at = word;
+  if (at || lit.size) go();
+}, { passive: true });
+document.documentElement.addEventListener("pointerleave", () => { at = null; go(); });

package/extensions/magpie/omarchy.css

@@ -0,0 +1,72 @@
+/* Omarchy: magpie drawn in Omarchy's own design language, only on Omarchy.
+   omarchy.js puts the class on <html> and the theme's colours, font, border
+   and rounding (from ~/.local/state/omarchy/current/theme and Hyprland) in
+   the variables; everything here is scoped under html.omarchy, so no other
+   system sees any of it. Omarchy's shell draws flat: no shadows, no blur, no
+   rounding (Hyprland's decoration:rounding, 0 by default), popups framed by
+   the window border's colour, uppercase letter-spaced labels, and a row
+   picked out by a faint fill with its text in the accent. */
+
+/* what only Omarchy shows, and what it hides: the Appearance setting follows
+   Omarchy's theme instead of offering light and dark */
+.om-only { display: none !important; }
+html.omarchy .om-hide { display: none !important; }
+html.omarchy .om-only { display: revert !important; }
+html.omarchy .om-theme-name { color: var(--accent); font-size: 12px; white-space: nowrap; }
+
+html.omarchy, html.omarchy body { font-family: var(--ui-font, var(--font)); font-size: var(--om-size); }
+html:where([data-fonts]).omarchy, html:where([data-fonts]).omarchy body { font-style: var(--ui-style, inherit); font-weight: var(--ui-weight, inherit); font-stretch: var(--ui-stretch, 100%); }
+html.omarchy body { -webkit-font-smoothing: antialiased; }
+
+/* square, or rounded as far as Hyprland rounds its windows; what spins or
+   draws a dial stays round, as does a slider.s knob; a status dot goes square, like Omarchy.s workspace marks */
+html.omarchy *, html.omarchy *::before, html.omarchy *::after { border-radius: var(--om-radius) !important; }
+html.omarchy :is(.pq-dial, .pq-dial b, .sk-ring, .si-spin, .mk-spin, .signing .spinner, .eslide .knob, .effort-ticks i),
+html.omarchy input[type="range"]::-webkit-slider-thumb { border-radius: 50% !important; }
+
+/* no shadows or frosted glass: surfaces are the theme's background */
+html.omarchy * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
+html.omarchy :is(.pop, .modal .dialog, .status.lift, body.panel .profiles.open, .list, body.panel .list, .seg > .thumb) { box-shadow: none; }
+html.omarchy body.panel { background: var(--bg); border: var(--om-border) solid var(--om-edge); }
+
+/* popups, menus and dialogs: framed by the window border's colour */
+html.omarchy :is(.pop, body.panel .profiles.open, .status.lift) { background: var(--pop-bg); border: var(--om-border) solid var(--om-edge) !important; }
+html.omarchy .modal { background: color-mix(in srgb, var(--bg) 55%, transparent); }
+html.omarchy .modal .dialog { background: var(--bg); border: var(--om-border) solid var(--om-edge); }
+
+/* labels as Omarchy's shell sets its headings: uppercase, spaced out */
+html.omarchy :is(.label, .pop li.group, .kpi span, .editor .ehead + * .k) { letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
+html.omarchy .brand { letter-spacing: 0; font-weight: 700; }
+
+/* the tabs: no track, the chosen one a faint square with its text in the accent */
+html.omarchy .seg { background: transparent; }
+html.omarchy .seg > .thumb { background: var(--om-sel); }
+html.omarchy :is(.seg button.on, .ptabs button.on, .opt.on) { color: var(--accent); }
+html.omarchy :is(.segs, .ptabs) { background: transparent; }
+html.omarchy :is(.segs, .ptabs) > .thumb { background: var(--om-sel); box-shadow: inset 0 0 0 1px var(--om-sel-line); }
+
+/* lists: a hairline frame, rows picked out by a faint fill */
+html.omarchy .list { border: 1px solid var(--line); background: transparent; }
+html.omarchy .row:hover { background: var(--om-hover); }
+
+/* controls: Omarchy's buttons are a faint fill under a thin edge */
+html.omarchy .field, html.omarchy body.panel .field, html.omarchy body.panel .field:hover { background: var(--om-hover); box-shadow: inset 0 0 0 1px var(--om-hover-line); }
+html.omarchy .field:hover { background: var(--om-sel); }
+html.omarchy .field.open, html.omarchy body.panel .field.open { box-shadow: inset 0 0 0 1px var(--accent); }
+html.omarchy .icon:hover { background: var(--om-sel); color: var(--accent); }
+html.omarchy .text.primary { background: var(--accent); color: var(--accent-fg); }
+
+/* a menu's row under the cursor or keys: the fill and the accent, like Walker's */
+html.omarchy :is(.pop li.sel, .pop li:hover:not(.group), .row-menu .rm-item:not(:disabled):is(:hover, :focus)) { background: var(--om-sel); color: var(--accent); }
+html.omarchy :is(.pop li.sel, .pop li:hover) :is(.v, .n) { color: inherit; }
+
+/* Linux's close button: square like the rest */
+html.omarchy .icon.winclose { background: transparent; }
+html.omarchy .icon.winclose:hover { background: var(--red-soft); color: var(--red); }
+
+html.omarchy ::selection { background: var(--om-sel); color: var(--accent); }
+html.omarchy body.side-nav :is(#nav button[data-view], #prefs).on { background: var(--om-sel); box-shadow: inset 0 0 0 1px var(--om-sel-line); color: var(--accent); }
+html.omarchy .nav-hl { background: var(--om-sel); }
+html.omarchy body.side-nav #nav > .nav-top-hl { background: var(--om-sel); box-shadow: inset 0 0 0 1px var(--om-sel-line); }
+html.omarchy body.side-nav #nav.hl-on button[data-view].on { background: transparent; box-shadow: none; }
+html.omarchy .nav-s.cur { color: var(--accent); }

package/extensions/magpie/omarchy.js

@@ -0,0 +1,46 @@
+// On Omarchy (omarchy.org) magpie's windows take the look of Omarchy's own
+// panels: the current theme's palette and font, square corners and the
+// active border's colour (omarchy.css, under html.omarchy). The theme comes
+// with boot.js before the first paint and is asked again every few seconds
+// while the page shows, so one picked in Omarchy's menu is taken at once.
+// Everywhere else nothing here does anything.
+(() => {
+  const root = document.documentElement;
+  let stamp = "";
+  let style = null;
+  function apply(th) {
+    if (!th || !th.vars) return;
+    root.classList.add("omarchy");
+    root.dataset.omarchyMode = th.mode || "dark";
+    if (th.stamp === stamp) return;
+    stamp = th.stamp;
+    const decls = Object.entries(th.vars).map(([k, v]) => `${k}: ${v} !important;`).join(" ");
+    if (!style) {
+      style = document.createElement("style");
+      style.id = "omarchy-theme";
+      document.head.append(style);
+    }
+    // on the root and the body both, so neither the light/dark palettes nor
+    // the panel's own tints (set on the body) win over the theme
+    style.textContent = `:root.omarchy, :root.omarchy body { ${decls} color-scheme: ${th.mode === "light" ? "light" : "dark"}; }`;
+    for (const e of document.querySelectorAll(".om-theme-name")) e.textContent = th.name || "";
+    window.omarchyTheme = th;
+    window.dispatchEvent(new CustomEvent("omarchy-theme", { detail: th }));
+  }
+  const boot = window.bootPrefs && window.bootPrefs.omarchy;
+  if (!boot) return;
+  apply(boot);
+  // the settings' theme name is drawn after this script runs
+  document.addEventListener("DOMContentLoaded", () => { for (const e of document.querySelectorAll(".om-theme-name")) e.textContent = th().name || ""; });
+  const th = () => window.omarchyTheme || boot;
+  async function poll() {
+    if (document.visibilityState === "visible") {
+      try {
+        const r = await fetch("/api/omarchy", { cache: "no-store" });
+        if (r.ok) apply(await r.json());
+      } catch {}
+    }
+    setTimeout(poll, 2500);
+  }
+  setTimeout(poll, 2500);
+})();

package/extensions/magpie/passerrors.js

@@ -0,0 +1,21 @@
+// A provider of a key's Errors menu in its editor's Advanced (ne9ko9 on
+// Discord): magpie handles them (asked again, the next provider tried,
+// said as the agent's API says it), or they pass through as the vendor
+// sent them, asked once. app.js imports this when the editor draws the
+// Errors row, so it weighs nothing on the core.
+window.passErrorsFill = function fill(b, d) {
+  const ERR = [["", "magpie handles"], ["pass", "Pass through"]];
+  const now = () => ERR[d.passErrors ? 1 : 0];
+  b.type = "button";
+  b.setAttribute("aria-haspopup", "menu");
+  b.setAttribute("aria-expanded", "false");
+  b.replaceChildren(el("span", "", t(now()[1])), svg(CHEV, 11, 1.6));
+  b.onclick = (e) => {
+    e.stopPropagation();
+    if (b.classList.contains("open")) return closeProtoMenu();
+    openProtoMenu(b, ERR.map(([v, name]) => ({ v, name })), now()[0], (v) => {
+      d.passErrors = v === "pass";
+      b.firstChild.textContent = t(now()[1]);
+    }, "Errors", "sess-menu");
+  };
+};