@azure-id/orc 0.55.0

package/bin/webui/js/05-banners.js

@@ -0,0 +1,172 @@
+"use strict";
+/* 05-banners.js — orc ui client
+   The shared version promise, the update banner, the changelog modal, and
+   renderBanners — including the global-install warning that must be visible on
+   EVERY panel (config does not merge, so a global install can win skill
+   resolution while this panel edits a project file nothing reads).
+
+   Loaded by app.html in the order its numeric prefix names. Classic
+   script, no import/export: an ES module import carries no query string,
+   and every static request here needs the per-launch session token. */
+
+/* --------------------------------------------------------------- version -- */
+// `orc version --json` performs a REAL bounded network check against the
+// install source and reports {version, latest, update_available}. Three places
+// want that answer — the Overview tile, the rail badge and the Maintenance
+// upgrade row — so the promise is shared: one check per page load, not three.
+// `refresh()` is the only way to force a second one, and it is a button the
+// user presses; nothing here polls for a new release on its own.
+let versionPromise = null;
+const versionInfo = () => (versionPromise = versionPromise || read("/api/version").then((r) => r.data));
+function refreshVersion() {
+  versionPromise = null;
+  return versionInfo();
+}
+
+// The one place that decides what a version payload MEANS, so the tile, the rail
+// and the upgrade row can never disagree about it. `latest: null` is not "up to
+// date" — it is "we could not tell", which is a different thing to show.
+function versionState(v) {
+  if (!v) return { kind: "", label: t("version.unknown.label"), note: t("version.unknown.note") };
+  if (v.check_disabled) return { kind: "", label: t("version.off.label"), note: t("version.off.note") };
+  if (!v.latest) return { kind: "warn", label: t("version.offline.label"), note: t("version.offline.note") };
+  if (v.update_available)
+    return {
+      kind: "warn",
+      label: t("version.available.label", { latest: v.latest }),
+      note: t("version.available.note", { version: v.version }),
+    };
+  return {
+    kind: "ok",
+    label: t("version.current.label"),
+    // `install_spec` is CLI data (a package spec), so it is interpolated, never
+    // translated — only the sentence around it is ours.
+    note: t("version.current.note", { version: v.version, source: v.install_spec || "the install source" }),
+  };
+}
+
+/* ---------------------------------------------------------------- banners -- */
+
+// The ONE thing that must be visible on every panel: config does NOT merge, so
+// a global install can win skill resolution while this panel edits a project
+// file nothing reads. Reported here, never fixed here — this UI never edits
+// global config, by design.
+// The update banner. It is a BUTTON, not a notice: the useful question is
+// "what changed", and the answer is one click away rather than on GitHub.
+async function renderUpdateBanner(host) {
+  let v;
+  try {
+    v = await versionInfo();
+  } catch (_) {
+    return;
+  }
+  if (!v || !v.update_available) return;
+
+  const b = el("button", "banner banner-update");
+  b.type = "button";
+  const inner = el("div");
+  inner.append(el("strong", null, t("banner.update.title", { latest: v.latest, version: v.version })));
+  inner.append(el("div", "note", t("banner.update.note")));
+  b.append(el("span", "banner-badge", "NEW"), inner, el("span", "banner-more", t("banner.update.cta")));
+  b.addEventListener("click", () => showChangelog(v));
+  host.append(b);
+}
+
+// Fetched lazily — the modal is what needs the changelog, and paying for that
+// request on every page load to fill a box nobody opened is waste.
+async function showChangelog(v) {
+  const body = el("div", "stack stack-sm");
+  const slot = el("div", "stack stack-sm");
+  slot.append(skeleton(4));
+  body.append(slot);
+
+  const close = modal({
+    title: t("changelog.title", { version: v.latest }),
+    body,
+    actions: [
+      { label: t("common.later"), onClick: (c) => c() },
+      {
+        label: t("changelog.goUpgrade"),
+        cls: "btn-primary",
+        onClick: (c) => {
+          c();
+          location.hash = "#/maintenance";
+          // The spotlight is armed here and lands after the panel renders — a
+          // highlight fired now would point at a node that does not exist yet.
+          startUpgradeSpotlight();
+        },
+      },
+    ],
+  });
+
+  try {
+    const d = (await read("/api/changelog")).data;
+    slot.replaceChildren();
+    if (d.check_disabled) {
+      slot.append(el("div", "note", t("changelog.disabled")));
+    } else if (!d.fetched) {
+      slot.append(el("div", "note", t("changelog.offline")));
+      slot.append(el("div", "note", t("changelog.offlineNote")));
+    } else if (!d.entries.length) {
+      slot.append(el("div", "note", t("changelog.empty")));
+    } else {
+      for (const e of d.entries) {
+        const sec = el("div", "cl-entry");
+        const h = el("div", "cl-head");
+        h.append(el("span", "cl-version", "v" + e.version));
+        if (e.date) h.append(el("span", "cl-date", e.date));
+        sec.append(h);
+        if (e.title) sec.append(el("div", "cl-title", stripMd(e.title)));
+        if (e.body) sec.append(el("div", "cl-body", reflowMd(stripMd(e.body))));
+        slot.append(sec);
+      }
+      slot.append(el("div", "note", t("changelog.source", { src: d.source })));
+    }
+  } catch (e) {
+    slot.replaceChildren(el("div", "note", t("changelog.loadFail", { err: e.message })));
+  }
+  return close;
+}
+
+async function renderBanners() {
+  const host = $("#banners");
+  host.replaceChildren();
+  renderUpdateBanner(host);
+  let doctor;
+  try {
+    doctor = (await read("/api/doctor")).data;
+  } catch (_) {
+    return;
+  }
+  if (!doctor) return;
+  const g = doctor.global_install || {};
+  if (g.present && g.shadows) {
+    const finding = (doctor.findings || []).find((f) => f.id === "global-skew" || f.id === "global-retired-agents");
+    const b = el("div", "banner");
+    // Prose inside the banner flex row, not a panel container: its lines are
+    // meant to read tight, so it is deliberately not a `stack`.
+    const bannerBody = el("div");
+    bannerBody.append(el("strong", null, t("banner.global.title")));
+    bannerBody.append(el("div", null, t("banner.global.body")));
+    // The finding's own text is the CLI speaking. It is shown verbatim in every
+    // language — a doctor message names files and commands.
+    if (finding) bannerBody.append(el("div", "note", finding.message));
+    // The command that actually clears the finding, copyable. This panel is
+    // project-scoped and never writes global config, so handing over the exact
+    // line to paste is the whole of what it can do — and a wrong line here is
+    // why the warning felt permanent.
+    const fixCmd = (doctor.findings || []).map((f) => f.fix_command).find(Boolean);
+    if (fixCmd) {
+      const row = el("div", "banner-fix");
+      row.append(el("code", "action-cmd", fixCmd));
+      const cp = el("button", "btn btn-ghost btn-sm", t("common.copy"));
+      cp.type = "button";
+      cp.addEventListener("click", () => copy(fixCmd, t("common.copied")));
+      row.append(cp);
+      bannerBody.append(row);
+    }
+    bannerBody.append(el("div", "note", t("banner.global.check")));
+    b.append(bannerBody);
+    host.append(b);
+  }
+}

package/bin/webui/js/06-edit.js

@@ -0,0 +1,183 @@
+"use strict";
+/* 06-edit.js — orc ui client
+   editSet, editBar, applyEdits — the staged-write machinery Settings AND Flow
+   both use. Nothing is written until Apply; the CLI is still the only writer and
+   the only validator.
+
+   Loaded by app.html in the order its numeric prefix names. Classic
+   script, no import/export: an ES module import carries no query string,
+   and every static request here needs the per-launch session token. */
+
+
+/* ============================================================ staged edits == */
+//
+// WRITES ARE BATCHED (v0.44.1). Every control used to commit on the spot: one
+// click, one `orc config set`, one full re-render of the panel. Changing four
+// keys meant four subprocesses and four re-renders, and each one scrolled the
+// list out from under you — so a routine "set these five things" was a fight.
+//
+// Nothing is written until Apply now. Edits accumulate here, the affected rows
+// mark themselves, and an edit bar at the bottom says how many are pending.
+// The CLI is still the only writer and still the only validator; what changed
+// is WHEN it is called, never by whom.
+//
+// An entry is `{kind: "set", value}` or `{kind: "reset"}` — a per-key reset is
+// `orc config reset <key>` (it REMOVES the key from the file), which is not the
+// same write as setting it to its default value, so it cannot be flattened into
+// one.
+function editSet(onChange) {
+  const map = new Map();
+  const api = {
+    map,
+    get size() {
+      return map.size;
+    },
+    // Staging a value back to what it already was CLEARS the edit rather than
+    // recording a no-op — otherwise "cancel" and "set it back by hand" would
+    // leave the bar claiming an unsaved change that would write nothing.
+    set(key, value, original) {
+      if (String(value) === String(original)) map.delete(key);
+      else map.set(key, { kind: "set", value: String(value), original: String(original) });
+      onChange(api);
+    },
+    reset(key) {
+      map.set(key, { kind: "reset" });
+      onChange(api);
+    },
+    // An ACTION entry (v0.49.2): a route and a body, staged like any other
+    // edit, applied by `applyActions`. `label` is what the pending list names —
+    // a count is not a change list.
+    action(key, route, body, label) {
+      map.set(key, { kind: "action", route, body, value: label });
+      onChange(api);
+    },
+    drop(key) {
+      map.delete(key);
+      onChange(api);
+    },
+    clear() {
+      map.clear();
+      onChange(api);
+    },
+    entries() {
+      return [...map.entries()];
+    },
+  };
+  return api;
+}
+
+// The bar. Apply is disabled with nothing pending; Reset is always offered
+// (it is a write in its own right, not an undo); **Cancel appears only when
+// there is something to cancel** — a permanently visible Cancel next to a
+// disabled Apply reads as though the panel is broken.
+function editBar(edits, { onApply, onReset, onCancel, resetLabel }) {
+  const bar = el("div", "edit-bar");
+  const summary = el("div", "edit-summary");
+  const actions = el("div", "edit-actions");
+
+  const apply = el("button", "btn btn-sm btn-primary", t("edits.apply"));
+  apply.type = "button";
+  apply.addEventListener("click", () => onApply(apply));
+
+  const reset = el("button", "btn btn-sm btn-ghost", resetLabel || t("edits.reset"));
+  reset.type = "button";
+  reset.addEventListener("click", onReset);
+
+  const cancel = el("button", "btn btn-sm btn-ghost", t("edits.cancel"));
+  cancel.type = "button";
+  cancel.addEventListener("click", onCancel);
+
+  bar.paint = () => {
+    const n = edits.size;
+    bar.classList.toggle("edit-bar-dirty", n > 0);
+    apply.disabled = n === 0;
+    apply.textContent = n ? t("edits.applyN", { n }) : t("edits.apply");
+    // The pending list is named, never counted: "3 changes" is not consent for
+    // three writes you can no longer see.
+    summary.replaceChildren();
+    if (!n) {
+      summary.append(el("span", "note", t("edits.none")));
+    } else {
+      summary.append(el("span", "note", t("edits.pending")));
+      const list = el("div", "edit-list");
+      for (const [key, e] of edits.entries()) {
+        const item = el("span", "edit-chip");
+        // Key names and values are CLI data — never translated.
+        item.append(el("span", "edit-key", key));
+        item.append(document.createTextNode(e.kind === "reset" ? " → " + t("edits.toDefault") : " → " + e.value));
+        list.append(item);
+      }
+      summary.append(list);
+    }
+    actions.replaceChildren();
+    actions.append(apply, reset);
+    if (n) actions.append(cancel);
+  };
+
+  bar.append(summary, actions);
+  bar.paint();
+  return bar;
+}
+
+// Apply runs the staged writes ONE AT A TIME, in the order they were staged —
+// the same sequence a terminal user would type, which matters because settings
+// can shadow each other. A failure does not abort the rest: the remaining
+// writes are independent, and stopping halfway would leave a state nobody
+// chose. Every failure is reported by key.
+async function applyEdits(edits, routes, button) {
+  const list = edits.entries();
+  if (!list.length) return { ok: true, failed: [] };
+  const label = button && button.textContent;
+  if (button) {
+    button.disabled = true;
+    button.textContent = t("edits.applying");
+  }
+  const failed = [];
+  for (const [key, e] of list) {
+    try {
+      const r = e.kind === "reset" ? await post(routes.reset, { key }) : await post(routes.set, { key, value: e.value });
+      if (!r.ok) failed.push(`${key}: ${(r.output || r.command || "").trim().split("\n")[0]}`);
+    } catch (err) {
+      failed.push(`${key}: ${err.message}`);
+    }
+  }
+  if (button) {
+    button.disabled = false;
+    if (label) button.textContent = label;
+  }
+  if (failed.length) toast(t("edits.someFailed", { n: failed.length }), "bad", failed.join("\n"));
+  else toast(t("edits.applied", { n: list.length }), "ok");
+  return { ok: !failed.length, failed };
+}
+
+// The same batching, for a panel whose edits are not key/value pairs (v0.49.2).
+// The house-rule ledger stages ADDs, REMOVEs, TOGGLEs and MOVEs — four routes,
+// four body shapes — so the entry carries its own `route` and `body` and this
+// runs them one at a time in staged order. Every other rule of `applyEdits`
+// holds exactly: a refused write NEVER aborts the rest, and every failure is
+// reported by the key it was staged under.
+async function applyActions(edits, button) {
+  const list = edits.entries();
+  if (!list.length) return { ok: true, failed: [] };
+  const label = button && button.textContent;
+  if (button) {
+    button.disabled = true;
+    button.textContent = t("edits.applying");
+  }
+  const failed = [];
+  for (const [key, e] of list) {
+    try {
+      const r = await post(e.route, e.body);
+      if (!r.ok) failed.push(`${key}: ${(r.output || r.command || "").trim().split("\n")[0]}`);
+    } catch (err) {
+      failed.push(`${key}: ${err.message}`);
+    }
+  }
+  if (button) {
+    button.disabled = false;
+    if (label) button.textContent = label;
+  }
+  if (failed.length) toast(t("edits.someFailed", { n: failed.length }), "bad", failed.join("\n"));
+  else toast(t("edits.applied", { n: list.length }), "ok");
+  return { ok: !failed.length, failed };
+}