dsh-mobile-plugin 0.5.27 → 0.5.29

package/extensions/magpie/ruleedit.js

@@ -0,0 +1,53 @@
+// A masking rule open to change in its place. app.js imports this on a
+// rule's Edit, so it weighs nothing on the core.
+
+// editRedactRule: the rule at n, open to change in its place (nf1qaz2w on
+// Discord: rules could only be removed) — its name, prefix or regex and
+// what to match, laid out as the row that adds one. Save sends it alone,
+// checked as an added rule is: one magpie can't use is said in the row,
+// what was typed kept and every rule as it was. Cancel (or Escape) leaves
+// the rule as it was.
+window.editRedactRule = function (r, n, row) {
+  const d = ruleEdit;
+  const kind = input(d.kind, "API_KEY");
+  const match = input(d.match, d.by === "prefix" ? "oc_sk_" : "oc_sk_[A-Za-z0-9]{20,}");
+  kind.className = "words rule-kind editing";
+  match.className = "words rule-match editing";
+  kind.setAttribute("aria-label", t("Name"));
+  match.setAttribute("aria-label", d.by === "prefix" ? t("Prefix") : t("Regex"));
+  const by = segs([["prefix", t("Prefix")], ["regex", t("Regex")]], d.by, (v) => {
+    d.by = v;
+    match.placeholder = v === "prefix" ? "oc_sk_" : "oc_sk_[A-Za-z0-9]{20,}";
+    match.setAttribute("aria-label", v === "prefix" ? t("Prefix") : t("Regex"));
+  });
+  const save = el("button", "text rule-save", t("Save"));
+  const cancel = el("button", "text rule-cancel", t("Cancel"));
+  cancel.onclick = () => { ruleEdit = null; renderSettings(); };
+  save.onclick = () => {
+    d.kind = kind.value; d.match = match.value.trim();
+    if (!d.match) return match.focus(NO_SCROLL);
+    const rule = { kind: d.kind.trim(), [d.by === "prefix" ? "prefix" : "regex"]: d.match };
+    save.disabled = true;
+    writingPrefs(api("settings/redact-rule", { at: n, was: d.was, rule }))
+      .then((ns) => { prefs = ns; ruleEdit = null; renderSettings(); status(t("Saved"), "ok", 1500); })
+      .catch((e) => { if (ruleEdit === d) d.err = t(e.message); statusTErr(e); renderSettings(); });
+  };
+  for (const i of [kind, match]) {
+    i.oninput = () => { d.kind = kind.value; d.match = match.value; };
+    i.onkeydown = (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter") save.onclick();
+      else if (e.key === "Escape") cancel.onclick();
+    };
+  }
+  // the match with Save and Cancel, kept together: a narrow window moves
+  // them as one under the name and Prefix or Regex
+  const tail = el("div", "rule-tail");
+  tail.append(match, save, cancel);
+  row(r.kind, d.err || (r.prefix ? t("Starts with {p}", { p: r.prefix }) : t("Matches {re}", { re: r.regex })), kind, by, tail);
+  // laid out as the row that adds a rule: its words, the fields under them
+  const head = $("#redactList").lastElementChild;
+  head.classList.add("rule-row", "rule-editing");
+  head.querySelector(".val").classList.add("rule-add");
+  if (d.err) head.querySelector(".sub").classList.add("err");
+};

package/extensions/magpie/scrollends.js

@@ -0,0 +1,91 @@
+// Scroll to top and Scroll to bottom (#1090, emo172): a small capsule at the
+// lower right of the open page, shown once the page is scrolled a screen
+// down and gone again near its top, like a long page's in Safari. app.js
+// imports this on the window's first scroll, so it weighs nothing on the
+// core. A press is the reader's: it goes through scrollOnPurpose, and
+// arrived() keeps the page where it ended. Home and End still scroll the
+// page as they always did; the buttons are for a mouse, and Tab reaches
+// them too. The tray panel has none.
+(() => {
+  if (document.body.classList.contains("panel")) return;
+  const box = el("div", "view-ends");
+  const up = el("button", "ve-up"), down = el("button", "ve-down");
+  up.type = down.type = "button";
+  up.append(svg("m4.5 9.5 3.5-3.5 3.5 3.5", 14, 1.7));
+  down.append(svg("m4.5 6.5 3.5 3.5 3.5-3.5", 14, 1.7));
+  box.append(up, el("span", "ve-sep"), down);
+  document.body.append(box);
+  let lang = null;
+  const open = () => [...document.querySelectorAll(".view")].find((v) => !v.hidden);
+  const atEnd = (v) => v.scrollTop + v.clientHeight >= v.scrollHeight - 2;
+  function paint() {
+    if (lang !== locale) {
+      lang = locale;
+      for (const [b, s] of [[up, "Scroll to top"], [down, "Scroll to bottom"]]) b.title = t(s), b.setAttribute("aria-label", t(s));
+    }
+    const v = open(), modal = document.getElementById("modal");
+    if (v) watch(v);
+    const held = box.contains(document.activeElement) || box.matches(":hover");
+    let on = !!v && (!modal || modal.hidden) && v.scrollTop > v.clientHeight;
+    if (!v || !on && !held) { box.classList.remove("on"); return; }
+    const r = v.getBoundingClientRect(), bar = v.offsetWidth - v.clientWidth, pad = parseFloat(getComputedStyle(v).paddingRight) || 0;
+    // in the page's right margin when a wide window leaves one; else over the
+    // page's corner, and out of the way at the page's foot, where its last
+    // row can't be scrolled out from under it. The page's own height is
+    // never changed for it: app.js's "where the reader is" measures it.
+    const gutter = pad >= box.offsetWidth + 16;
+    if (!gutter && v.scrollHeight - v.clientHeight - v.scrollTop < box.offsetHeight + 24) on = false;
+    box.classList.toggle("on", on || held);
+    let bottom = innerHeight - r.bottom + 16;
+    // above a page's own sticky foot under it (Providers' Add buttons, a
+    // Routing group editor's Cancel and Add: Jiabubu on Discord)
+    for (const foot of v.querySelectorAll(":scope > .after-list:not(.away), .view-foot")) {
+      const f = foot.getBoundingClientRect();
+      if (getComputedStyle(foot).position === "sticky" && f.bottom > innerHeight - bottom - box.offsetHeight && f.top < innerHeight - bottom) bottom = Math.max(bottom, innerHeight - f.top + 8);
+    }
+    box.style.right = Math.max(8, innerWidth - r.right + bar + (gutter ? (pad - box.offsetWidth) / 2 : 10)) + "px";
+    box.style.bottom = bottom + "px";
+    up.setAttribute("aria-disabled", v.scrollTop < 1);
+    down.setAttribute("aria-disabled", atEnd(v));
+  }
+  let queued = false;
+  const later = () => { if (!queued) { queued = true; requestAnimationFrame(() => { queued = false; paint(); }); } };
+  addEventListener("scroll", later, { capture: true, passive: true });
+  addEventListener("resize", later);
+  box.addEventListener("focusout", later);
+  box.addEventListener("pointerleave", later);
+  new MutationObserver(later).observe(document.body, { subtree: true, attributes: true, attributeFilter: ["hidden"] });
+  // the page under it changing size with no scroll: a Routing group opened
+  // or closed, a row added or taken out (Jiabubu on Discord: it moved off
+  // a group editor's Remove only on the next scroll). The open page and
+  // each of its own children are measured, so any growth inside shows
+  const sizes = new ResizeObserver(later), seen = new WeakSet();
+  const kids = new MutationObserver((ms) => {
+    for (const m of ms) for (const n of m.removedNodes) if (n instanceof Element) sizes.unobserve(n), seen.delete(n);
+    later();
+  });
+  function watch(v) {
+    if (!seen.has(v)) seen.add(v), sizes.observe(v), kids.observe(v, { childList: true });
+    for (const c of v.children) if (!seen.has(c)) seen.add(c), sizes.observe(c);
+  }
+  function go(e, top) {
+    const v = open();
+    if (!v || e.currentTarget.getAttribute("aria-disabled") === "true") return;
+    if (!scrollOnPurpose(e, 2500)) return;
+    const to = top ? 0 : v.scrollHeight - v.clientHeight;
+    v.scrollTo({ top: to, behavior: calm() ? "auto" : "smooth" });
+    // done when it has stood still a few frames (WebKit has no scrollend)
+    let last = -1, still = 0;
+    const until = performance.now() + 2400;
+    const settle = () => {
+      if (v.scrollTop === last) still++; else still = 0, last = v.scrollTop;
+      if (still < 3 && performance.now() < until) return requestAnimationFrame(settle);
+      arrived(v);
+      paint();
+    };
+    requestAnimationFrame(settle);
+  }
+  up.onclick = (e) => go(e, true);
+  down.onclick = (e) => go(e, false);
+  paint();
+})();

package/extensions/magpie/settingshints.js

@@ -0,0 +1,75 @@
+// Settings' explanations, shown on asking (the owner, 11-02: "让整个设计
+// 页面看起来很简洁，很有呼吸感"). app.css keeps a row's lines that explain
+// it out of sight (--hint: 1 on each); the pointer resting on the row, or a
+// key reaching it, shows them here in a card under the row's name, over
+// the page, so no row moves. The card takes no pointer: a click goes to
+// what is under it. It goes when the pointer or focus leaves the row, the
+// page scrolls, a key is pressed or the row is drawn again. Imported by
+// app.js when the pointer or focus first comes to Settings, not at start.
+const view = document.getElementById("view-settings");
+const card = el("div", "set-hint");
+card.setAttribute("aria-hidden", "true"); // a screen reader reads the lines in the row
+document.body.append(card);
+let row = null, wait = 0;
+
+const acts = () => {
+  for (const s of view.querySelectorAll(".row.pref > .who > .sub")) s.classList.toggle("acts", !!s.querySelector("a, button, input, select, code, .searcher-failed"));
+};
+// before the page is painted again: no frame shows such a line hidden
+new MutationObserver(acts).observe(view, { childList: true, subtree: true });
+acts();
+
+const hints = (r) => [...r.querySelectorAll(":scope > .who > .sub")]
+  .filter((s) => !s.hidden && getComputedStyle(s).getPropertyValue("--hint").trim() === "1" && s.textContent.trim());
+
+function hide() {
+  clearTimeout(wait);
+  row = null;
+  card.classList.remove("on");
+  card.hidden = true;
+}
+function show(r) {
+  const subs = r.isConnected && !view.hidden ? hints(r) : [];
+  if (!subs.length) return hide();
+  card.replaceChildren(...subs.map((s) => el("p", "", s.textContent.trim())));
+  card.hidden = false;
+  const who = r.querySelector(":scope > .who").getBoundingClientRect(), box = r.getBoundingClientRect();
+  const w = card.offsetWidth, h = card.offsetHeight;
+  const left = Math.max(16, Math.min(who.left, innerWidth - 16 - w));
+  // under the row, or over it where the window ends first
+  const top = box.bottom + 4 + h <= innerHeight - 8 ? box.bottom + 4 : Math.max(8, box.top - 4 - h);
+  card.style.left = left + "px";
+  card.style.top = top + "px";
+  requestAnimationFrame(() => row === r && card.classList.add("on"));
+}
+function point(r, now) {
+  if (r === row) return;
+  hide();
+  if (!r) return;
+  row = r;
+  // a pointer passing over rows on its way shows nothing; resting does
+  wait = setTimeout(() => show(r), now ? 0 : 450);
+}
+const rowOf = (n) => n instanceof Element ? n.closest("#view-settings .row.pref") : null;
+view.addEventListener("pointerover", (e) => e.pointerType !== "touch" && point(rowOf(e.target)));
+view.addEventListener("pointerleave", () => hide());
+view.addEventListener("pointerdown", () => hide(), true);
+view.addEventListener("focusin", (e) => {
+  let key = true;
+  try { key = e.target.matches(":focus-visible"); } catch {} // Safari before 15.4
+  if (key) point(rowOf(e.target), true);
+});
+view.addEventListener("focusout", (e) => {
+  if (!rowOf(e.relatedTarget) || rowOf(e.relatedTarget) !== row) hide();
+});
+// a scroll takes the pointer's card away; focus's follows its row, which
+// a key moving focus scrolls into sight
+view.addEventListener("scroll", () => row?.contains(document.activeElement) ? show(row) : hide(), { passive: true, capture: true });
+addEventListener("keydown", (e) => !/^(Tab|Shift|Alt|Meta|Control)$/.test(e.key) && hide(), true);
+addEventListener("resize", hide);
+hide();
+// the pointer already on a row, or focus, as the import came
+{
+  const on = view.querySelector(".row.pref:hover") || rowOf(document.activeElement);
+  if (on) point(on);
+}

package/extensions/magpie/signsheets.js

@@ -0,0 +1,86 @@
+// Sign-ins that ask one value before they start. app.js imports this only
+// when one is asked for (signAsk), so it weighs nothing on the core.
+
+// Copilot's enterprise on GHE.com: its host, asked before its sign-in starts
+window.copilotGHESheet = function () {
+  const box = el("div", "signing copilot-ghe");
+  const tt = el("span", "tt");
+  box.append(tt);
+  const flow = signing;
+  const label = t("Your enterprise on GHE.com");
+  tt.append(el("span", "n", label),
+    el("span", "s", t("The address you sign in to GitHub at, like acme.ghe.com. An account on github.com doesn't need it.")));
+  const form = el("form", "callback-form");
+  const inp = input(flow.host || "", "acme.ghe.com");
+  inp.setAttribute("aria-label", label);
+  const go = el("button", "text primary", t("Sign in"));
+  go.type = "submit";
+  go.disabled = !GHE_HOST.test(inp.value.trim());
+  const why = el("span", "s why", "");
+  inp.oninput = () => { flow.host = inp.value; go.disabled = !GHE_HOST.test(inp.value.trim()); why.textContent = ""; };
+  const submit = (e) => {
+    e.preventDefault();
+    if (signing !== flow) return;
+    const host = inp.value.trim().replace(/^https?:\/\//i, "").replace(/\/$/, "").toLowerCase();
+    if (!GHE_HOST.test(host)) { why.textContent = t("Type your enterprise's <name>.ghe.com"); return; }
+    startSignIn("copilot", true, host);
+  };
+  form.onsubmit = submit;
+  go.onclick = submit;
+  form.append(inp, go);
+  tt.append(form, why);
+  const close = el("button", "text", t("Cancel"));
+  close.onclick = cancelSignIn;
+  const back = el("button", "text", "github.com");
+  back.title = t("Sign in on github.com instead");
+  back.onclick = () => startSignIn("copilot", true);
+  box.append(close, back);
+  setTimeout(() => { if (inp.isConnected) inp.focus({ preventScroll: true }); });
+  return box;
+};
+
+// a Claude account from the token `claude setup-token` prints (sfss5362 on
+// X; claude_setup_token.go)
+window.claudeTokenSheet = function () {
+  const box = el("div", "signing claude-token");
+  const tt = el("span", "tt");
+  box.append(tt);
+  const flow = signing;
+  const label = t("Add a Claude account by setup-token");
+  tt.append(el("span", "n", label),
+    el("span", "s", t("Paste the token {cmd} printed. magpie gives it to Claude Code for this account's requests only; Claude Code itself stays signed in as it is.", { cmd: "claude setup-token" })),
+    el("span", "s", t("A setup-token can't tell its email or allowance: the account is named by the token, and its allowance shows once a reply tells it.")));
+  const form = el("form", "callback-form");
+  const inp = input(flow.token || "", "sk-ant-oat01-…", "password");
+  inp.setAttribute("aria-label", label);
+  const go = el("button", "text primary", t("Add"));
+  go.type = "submit";
+  go.disabled = !inp.value.trim() || !!flow.busy;
+  const why = el("span", "s why", flow.error || "");
+  inp.oninput = () => { flow.token = inp.value; go.disabled = !inp.value.trim(); why.textContent = ""; };
+  const submit = async (e) => {
+    e.preventDefault();
+    if (signing !== flow || flow.busy || !inp.value.trim()) return;
+    flow.busy = true;
+    go.disabled = true;
+    try {
+      const r = await api("signin/claude-token", { token: inp.value });
+      if (signing !== flow) return;
+      await signedIn({ agent: "claude", user: r.user, token: true });
+    } catch (err) {
+      if (signing !== flow) return;
+      flow.busy = false;
+      flow.error = err.message;
+      renderProviders();
+    }
+  };
+  form.onsubmit = submit;
+  go.onclick = submit;
+  form.append(inp, go);
+  tt.append(form, why);
+  const close = el("button", "text", t("Cancel"));
+  close.onclick = cancelSignIn;
+  box.append(close);
+  setTimeout(() => { if (inp.isConnected) inp.focus({ preventScroll: true }); });
+  return box;
+};

package/extensions/magpie/start.js

@@ -0,0 +1,26 @@
+// The window's start, loaded last: app.js, the plugins' pages and the
+// scripts after app.js are all there, so the first page shown has its
+// code (the Usage page's is a plugin's, run after app.js).
+// the plugins' pages wired up (kernel.js), before the first is shown
+magpie.start();
+navHides(); // the pages built-in plugins switched off have, from boot.js
+// The window opens on the page the reader last left, as a Mac app comes back
+// as it was (molvqingtai, lc on Discord): a page asked for (?view=, a link
+// from the tray or a reload) first, then the one kept; a page gateway mode
+// leaves out, or one there is no longer, gives way to the first page.
+// the pages the window can open on besides the first (Agents)
+const OPEN_VIEWS = ["providers", "plugins", "settings", ...magpie.pages()];
+function keptView() {
+  const asked = params.get("view");
+  if (asked === "agents" || OPEN_VIEWS.includes(asked)) return asked;
+  let v = "";
+  try { v = localStorage.getItem("magpie.lastView") || ""; } catch { /* none kept */ }
+  return OPEN_VIEWS.includes(v) ? v : ""; // one gateway mode leaves out, show() makes Providers
+}
+const firstView = mode === "window" ? keptView() : "";
+// from the tray panel's More in Plugins (q): Discover, once show() picked the tab (#3579)
+if (OPEN_VIEWS.includes(firstView)) show(firstView).then(() => view === "plugins" && params.has("q") && window.pluginQuery?.(params.get("q")));
+else if (mode === "window" && !gatewayMode && !sideNav()) slide($("#nav"), "nav");
+// in gateway mode the first page is Providers, Agents' tab gone
+if (gatewayMode) setGatewayMode(true);
+load();

package/extensions/magpie/syncfiles.js

@@ -0,0 +1,216 @@
+// Settings › Sync's forms: the server's (WebDAV, S3 or GitHub), Export and
+// Import, and what putting a file's sign-ins in came to (qianxunji,
+// curtinp118 on Discord). app.js imports this when one of the forms opens
+// (syncFile), so it weighs nothing on the core.
+
+// davForm: the kind picked shows one set of fields; drafts survive switching.
+// Inactive servers keep their settings for moving sync back.
+window.davForm = function (v) {
+  const ed = el("div", "editor sync-form");
+  const active = v.on ? (v.kind || "webdav") : "";
+  let kind = active || "webdav";
+  const saved = t("saved · type a new one to replace it");
+  const servers = syncServers(v);
+  const server = (k) => active === k ? v : servers[k] || {};
+  const dav = server("webdav"), bk = server("s3"), gh = server("github");
+  const url = input(dav.url || "", "https://dav.jianguoyun.com/dav/");
+  const user = input(dav.user || "", t("user name"));
+  const pass = input("", dav.passwordSet ? saved : t("password, or an app password"), "password");
+  // s3://bucket/prefix, as the address is kept
+  const [bucketName, prefixName] = (() => { const m = /^s3:\/\/([^/]*)\/?(.*)$/i.exec(bk.url || ""); return m ? [m[1], m[2]] : ["", ""]; })();
+  const endpoint = input(bk.endpoint || "", "https://<account>.r2.cloudflarestorage.com");
+  const bucket = input(bucketName, t("bucket name"));
+  const prefix = input(prefixName, t("optional"));
+  const region = input(bk.region || "", t("us-east-1, or auto for R2"));
+  const keyID = input(bk.user || "", "AKIA…");
+  const secret = input("", bk.passwordSet ? saved : t("secret access key"), "password");
+  const [pathL, pathStyle] = tick(t("Path-style: the bucket in the path, not the host name"), !!bk.pathStyle);
+  const ghParts = /^github:\/\/([^/]+\/[^/]+)\/?(.*)$/i.exec(gh.url || "");
+  const repo = input(ghParts?.[1] || "", "owner/repo");
+  const branch = input(gh.branch || "", t("default branch"));
+  const ghPrefix = input(ghParts?.[2] || "", t("optional"));
+  const token = input("", gh.passwordSet ? saved : t("GitHub token"), "password");
+  const phrase = input("", v.passphraseSet ? saved : t("the same on every computer"), "password");
+  const [keysL, keys] = tick(t("Providers' API keys"), v.keys !== false);
+  const [agentsL, agents] = tick(t("Agents' models"), v.agents !== false);
+  const [libL, lib] = tick(t("Library: instructions, MCP servers, skills, hooks and subagents"), v.library !== false);
+  // usage: off unless picked, each computer its own (#542)
+  const [useL, use] = tick(t("Usage: this computer's calls, for the Usage page on the others"), !!v.usage);
+  // sign-ins: off unless picked, sealed with the passphrase like the rest
+  // (qianxunji, curtinp118 on Discord); what it lets in is said beside it
+  const [siL, si] = tick(t("Sign-ins: subscription accounts and plugin sign-ins"), !!v.signIns);
+  const siSay = el("div", "hint sync-signins-say", t("Another computer that syncs is signed in without signing in again. Anyone with the passphrase and the server's file can use these accounts. An account used on two computers can be signed out on one when the other renews it."));
+  siSay.hidden = !si.checked;
+  si.onchange = () => { siSay.hidden = !si.checked; };
+  const what = el("div", "stack");
+  what.append(keysL, agentsL, libL, useL, siL, siSay);
+  const davFields = [...field(t("Address"), url, t("A folder named magpie is made in it.")),
+    ...field(t("User"), user),
+    ...field(t("Password"), pass)];
+  const s3Fields = [...field(t("Endpoint"), endpoint, t("Empty for AWS S3; for R2, B2, MinIO and the like, their S3 API address.")),
+    ...field(t("Bucket"), bucket),
+    ...field(t("Prefix"), prefix, t("The backup goes in a folder named magpie under it.")),
+    ...field(t("Region"), region),
+    ...field(t("Access key"), keyID),
+    ...field(t("Secret"), secret),
+    ...field("", pathL, t("MinIO and most NAS servers need it."))];
+  const ghFields = [...field(t("Repository"), repo, t("An existing private GitHub repository, in owner/repo form.")),
+    ...field(t("Branch"), branch, t("Empty uses the repository's default branch. Empty repositories are initialized by the first sync; other branches must already exist.")),
+    ...field(t("Folder"), ghPrefix, t("The encrypted backup goes in <folder>/magpie/magpie.magpie-backup. Each update creates a commit.")),
+    ...field(t("GitHub token"), token, t("A fine-grained token for this repository with Contents: read and write. Kept on this computer, separately from the library's GitHub token."))];
+  // which one is synced to, and that the other's settings stay
+  const to = field(t("Sync to"), segs(Object.entries(syncNames).map(([id, n]) => [id, id === active ? t("{kind} · on", { kind: n }) : n]), kind, (k) => { kind = k; show(); }), " ");
+  const where = to[1].querySelector(".hint");
+  const save = el("button", "text primary", "");
+  const other = Object.keys(servers).map((k) => syncNames[k]).filter(Boolean).join(" / ");
+  const show = () => {
+    for (const x of davFields) x.hidden = kind !== "webdav";
+    for (const x of s3Fields) x.hidden = kind !== "s3";
+    for (const x of ghFields) x.hidden = kind !== "github";
+    where.textContent = !active ? ""
+      : kind === active ? (other ? t("Syncing here now. The {other} settings are kept, not synced to: pick {other} to see them.", { other }) : t("Syncing here now."))
+      : t("{active} is synced to now. Saving moves sync here; the {active} settings are kept for moving back.", { active: syncNames[active] });
+    where.hidden = !active;
+    save.textContent = !active ? t("Turn on") : kind === active ? t("Save") : t("Move sync to {kind}", { kind: syncNames[kind] });
+  };
+  ed.append(...to,
+    ...davFields, ...s3Fields, ...ghFields,
+    ...field(t("Passphrase"), phrase, t("The file is sealed with it on this computer; the server only ever sees it sealed. Keep it: without it the file can't be opened.")),
+    ...field(t("Also sync"), what, t("Usage goes as a file a day: times, tokens, models and costs, never what was said. Turn it on on each computer that shares its own.")));
+  show();
+  const off = v.on ? el("button", "text danger", t("Turn off")) : el("span");
+  const cancel = el("button", "text", t("Cancel"));
+  const say = syncBar(ed, "", off, el("span", "grow"), cancel, save);
+  cancel.onclick = () => { syncOpen = ""; renderSync(); };
+  off.onclick = async () => { syncOpen = ""; renderSync(await api("davsync/off", {}).catch(() => null) || undefined); };
+  save.onclick = async () => {
+    const b = bucket.value.trim(), p = prefix.value.trim().replace(/^\/+|\/+$/g, "");
+    if (kind === "s3" && !b) return say(t("Name the bucket"));
+    const repository = repo.value.trim().replace(/^https:\/\/github\.com\//i, "").replace(/\/+$/, "").replace(/\.git$/i, "");
+    const ghFolder = ghPrefix.value.trim().replace(/^\/+|\/+$/g, "");
+    if (kind === "github" && !/^[A-Za-z0-9_.-]+\/[A-Za-z0-9_.-]+$/.test(repository)) return say(t("Name the GitHub repository as owner/repo"));
+    if (kind === "github" && !gh.passwordSet && !token.value.trim()) return say(t("Enter a GitHub token with Contents read and write permission"));
+    if (!v.passphraseSet && !phrase.value) return say(t("Pick a passphrase: the file is sealed with it"));
+    save.classList.add("busy");
+    const where = kind === "github"
+      ? { url: "github://" + repository + (ghFolder ? "/" + ghFolder : ""), branch: branch.value.trim(), password: token.value.trim() }
+      : kind === "s3"
+      ? { url: "s3://" + b + (p ? "/" + p : ""), user: keyID.value.trim(), password: secret.value, endpoint: endpoint.value.trim(), region: region.value.trim(), pathStyle: pathStyle.checked }
+      : { url: url.value.trim(), user: user.value.trim(), password: pass.value };
+    try {
+      const r = await api("davsync/save", { ...where, passphrase: phrase.value, keys: keys.checked, agents: agents.checked, library: lib.checked, ...(use.checked || v.usage ? { usage: use.checked } : {}), ...(si.checked || v.signIns ? { signIns: si.checked } : {}) });
+      if (!r.error) syncOpen = "";
+      renderSync(r);
+      if (r.error) return;
+      refreshAfterSync();
+    } catch (e) {
+      save.classList.remove("busy");
+      say(e.message);
+    }
+  };
+  return ed;
+};
+
+window.exportForm = function () {
+  const ed = el("div", "editor sync-form");
+  const p1 = input("", t("passphrase"), "password");
+  const p2 = input("", t("again"), "password");
+  const [keysL, keys] = tick(t("With the providers' API keys"), true);
+  const [libL, lib] = tick(t("With the library: instructions, MCP servers, skills, hooks and subagents"), true);
+  // sign-ins: off unless picked (qianxunji, curtinp118 on Discord)
+  const [siL, si] = tick(t("With the sign-ins: subscription accounts and plugin sign-ins"), false);
+  const what = el("div", "stack");
+  what.append(keysL, libL, siL);
+  const passF = field(t("Passphrase"), p1, t("Needed to open the file. Subscriptions aren't in it: sign in to them on the other computer."));
+  const passSay = passF[1].querySelector(".hint");
+  si.onchange = () => {
+    passSay.textContent = si.checked ? t("Needed to open the file. The sign-ins are in it: anyone with the file and the passphrase can use those accounts, so pick a strong one.")
+      : t("Needed to open the file. Subscriptions aren't in it: sign in to them on the other computer.");
+  };
+  ed.append(...passF, ...field("", p2), ...field("", what));
+  const go = el("button", "text primary", t("Export"));
+  const cancel = el("button", "text", t("Cancel"));
+  const say = syncBar(ed, "", el("span", "grow"), cancel, go);
+  cancel.onclick = () => { syncOpen = ""; renderSync(); };
+  go.onclick = async () => {
+    if (!p1.value) return say(t("Pick a passphrase: the file is sealed with it"));
+    if (p1.value !== p2.value) return say(t("The two passphrases differ"));
+    go.classList.add("busy");
+    try {
+      const r = await api("backup/export", { pass: p1.value, keys: keys.checked, library: lib.checked, signIns: si.checked });
+      ed.replaceChildren(el("div", "done", t("Saved to {path}", { path: r.path })));
+    } catch (e) {
+      go.classList.remove("busy");
+      say(e.message);
+    }
+  };
+  return ed;
+};
+
+// signInsSaid: what putting a backup's sign-ins in did, as lines
+window.signInsSaid = function (r) {
+  const lines = [t("Sign-ins: {added} added, {updated} updated, {kept} kept as they are here", { added: r.added || 0, updated: r.updated || 0, kept: r.kept || 0 })];
+  if (r.kept) lines.push(t("One kept as it is here was renewed later here, or is the account the agent itself is signed in with."));
+  if (r.codex) lines.push(t("Codex is signed in with the backup's account."));
+  return lines;
+};
+
+window.importForm = function () {
+  const ed = el("div", "editor sync-form");
+  let data = "";
+  const file = el("input");
+  file.type = "file";
+  file.accept = ".magpie-backup";
+  file.hidden = true;
+  const name = el("span", "fname", t("No file chosen"));
+  const pick = el("button", "text", t("Choose…"));
+  pick.onclick = () => file.click();
+  file.onchange = async () => {
+    const f = file.files[0];
+    if (!f) return;
+    // as base64 in JSON: the app's web view drops a File sent as the body
+    const bytes = new Uint8Array(await f.arrayBuffer());
+    let bin = "";
+    for (let i = 0; i < bytes.length; i += 0x8000) bin += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+    data = btoa(bin);
+    name.textContent = f.name;
+  };
+  const pf = el("div", "pair");
+  pf.append(name, pick, file);
+  const pass = input("", t("passphrase"), "password");
+  const [agentsL, agents] = tick(t("Set the agents' models too"), true);
+  const [libL, lib] = tick(t("Bring in the library too: instructions, MCP servers, skills, hooks and subagents"), true);
+  const [siL, si] = tick(t("Bring in the sign-ins too, when the file has them"), true);
+  const what = el("div", "stack");
+  what.append(agentsL, libL, siL);
+  ed.append(...field(t("File"), pf), ...field(t("Passphrase"), pass), ...field("", what, t("Providers with the same id are replaced; one that came without a key keeps the key it has here. The library replaces the one here, which is kept with its backups.")));
+  const go = el("button", "text primary", t("Import"));
+  const cancel = el("button", "text", t("Cancel"));
+  const say = syncBar(ed, "", el("span", "grow"), cancel, go);
+  cancel.onclick = () => { syncOpen = ""; renderSync(); };
+  go.onclick = async () => {
+    if (!data) return say(t("Choose a file first"));
+    go.classList.add("busy");
+    try {
+      const r = await api("backup/import", { data, pass: pass.value, agents: agents.checked, library: lib.checked, signIns: si.checked });
+      const lines = [t("Providers: {added} added, {replaced} replaced; {profiles} profiles; {agents} agent settings changed", { added: r.Added, replaced: r.Replaced, profiles: r.Profiles, agents: r.Agents })];
+      if (r.NeedKey?.length) lines.push(t("Needs a key: {names}", { names: r.NeedKey.join(", ") }));
+      if (r.SignIns) lines.push(...signInsSaid(r.SignIns));
+      // a backup carries a subscription's settings, its sign-in only when
+      // made with them
+      if (r.SignIn?.length) lines.push(r.SignIns
+        ? t("This backup's settings use {names}, which isn't signed in on this computer, and the backup has no sign-in for it. To use it here, sign in in Providers → Add a provider; if you don't, nothing needs doing.", { names: subNames(r.SignIn) })
+        : t("This backup's settings use {names}, which isn't signed in on this computer. A backup carries settings, not sign-ins: to use it here, sign in in Providers → Add a provider; if you don't, nothing needs doing.", { names: subNames(r.SignIn) }));
+      if (r.Plugins?.length) lines.push(t("Plugins added: {names}", { names: r.Plugins.join(", ") }));
+      for (const [spec, error] of Object.entries(r.PluginErrors || {})) lines.push(t("Couldn't add the plugin {spec}: {error}", { spec, error }));
+      if (r.Library) lines.push(t("Library brought in and written into the agents"));
+      for (const p of r.LibraryProblems || []) lines.push(t("{agent} couldn't get {what}: {error}", { agent: p.agent, what: p.what, error: p.error }));
+      ed.replaceChildren(...lines.map((l) => el("div", "done", l)));
+      refreshAfterSync();
+    } catch (e) {
+      go.classList.remove("busy");
+      say(e.message);
+    }
+  };
+  return ed;
+};

package/extensions/magpie/theme.js

@@ -0,0 +1,29 @@
+// Apply the saved theme and text size (boot.js) before styles first apply.
+// A theme requested by the page's address takes precedence. Waiting for
+// app.js at the foot of the page let the header paint in the system theme
+// and default size first, then change as the page loaded.
+(function () {
+  var asked = new URLSearchParams(location.search).get("theme");
+  var prefs = window.bootPrefs;
+  var saved = prefs && prefs.theme;
+  var theme = asked || (saved && saved !== "system" ? saved : "");
+  if (theme) document.documentElement.dataset.theme = theme;
+  if (prefs && prefs.colorblind) document.documentElement.dataset.colorblind = "1";
+  if (prefs && prefs.reduceMotion) document.documentElement.dataset.motion = "reduce";
+  if (prefs && prefs.noBird) document.documentElement.dataset.bird = "off";
+  if (prefs) document.documentElement.style.setProperty("--zoom", prefs.web ? 1 : (prefs.textSize || 100) / 100);
+})();
+
+// Settings' Reduce motion (#3813) applies the stylesheets' reduced-motion
+// rules, their media set to all and back; calm() in app.js follows it
+(function () {
+  var held = [];
+  window.holdStill = function (on) {
+    var root = document.documentElement;
+    if (on) root.dataset.motion = "reduce"; else delete root.dataset.motion;
+    held.forEach(function (h) { h[0].media.mediaText = h[1]; });
+    held = [];
+    if (on) for (var i = 0, s = document.styleSheets; i < s.length; i++) for (var j = 0, r = s[i].cssRules; j < r.length; j++)
+      if (r[j].media && /reduced-motion: *reduce/.test(r[j].media.mediaText)) held.push([r[j], r[j].media.mediaText]), r[j].media.mediaText = "all";
+  };
+})();

package/extensions/magpie/traywindows.js

@@ -0,0 +1,41 @@
+// Settings › Menu bar windows, and Windows' Tray icon number. app.js imports this only when the menu bar
+// shows a card (renderTrayUsage), so it weighs nothing on the core.
+
+// which of a subscription's windows its menu bar card shows, by kind
+// (settings.TrayWindows, StrikingRaw on X): a pill each for those ticked
+// with two or more, every window unless some are picked. A window the card shows only when picked
+// (trayExtra: money aside, one model's, Cursor's Grok Bot, CrazyJal on X)
+// is offered too; its usual windows ticked alone are no pick at all.
+window.trayWindowsRow = function trayWindowsRow(s, keep, ids, mac) {
+  // Windows' tray shows no text: the first card's figure is its icon, or
+  // the bird (Benjaminliang_1 on X)
+  $("#trayNumberRow").hidden = !document.documentElement.classList.contains("win");
+  $("#trayNumberSegs").replaceChildren(segs([["off", t("Off")], ["on", t("On")]], s.trayNoNumber ? "off" : "on",
+    (v) => savePrefs({ ...keep, trayNoNumber: v === "off" })));
+  const pick = s.trayWindows || {}, box = $("#trayWindowsPick"), subs = [];
+  for (const pid of new Set(ids.filter((id) => !id.startsWith("usage:")).map((id) => id.split("|")[0]))) {
+    const ws = [], q = (quotas || []).find((q) => q.provider === pid);
+    for (const w of q?.windows || []) if (w.trayKind && !ws.some((x) => x.v === w.trayKind)) ws.push({ v: w.trayKind, name: w.name, note: "", extra: !!w.trayExtra });
+    if (ws.length > 1) subs.push([pid, q.name, ws]);
+  }
+  // Windows' tray icon draws the first one's figure (traynumber.go), so
+  // which window it is matters there too
+  $("#trayWindowsRow").hidden = !subs.length;
+  if (!quotas && ids.some((id) => !id.startsWith("usage:"))) loadQuotas().then(() => box.isConnected && trayWindowsRow(s, keep, ids, mac));
+  box.replaceChildren(...subs.map(([pid, name, ws]) => {
+    const on = (pick[pid] || []).filter((k) => ws.some((w) => w.v === k)), b = el("button", "proto pick" + (on.length ? " set" : ""));
+    b.type = "button";
+    b.append(el("span", "", name + " · " + (on.length ? on.map((k) => t(ws.find((w) => w.v === k).name)).join(" · ") : t("All windows"))), svg(CHEV, 11, 1.6));
+    b.onclick = (e) => {
+      e.stopPropagation();
+      if (b.classList.contains("open")) return closeProtoMenu();
+      openProtoMenu(b, [{ v: "", name: "All windows", note: "" }, ...ws], on, (v) => {
+        const next = { ...pick };
+        const usual = ws.filter((w) => !w.extra);
+        if (v.length && !(v.length === usual.length && usual.every((w) => v.includes(w.v)))) next[pid] = v; else delete next[pid];
+        savePrefs({ ...keep, trayWindows: next });
+      }, "Shown in the menu bar");
+    };
+    return b;
+  }));
+};