@azure-id/orc 0.55.0

package/bin/webui/js/02-ui.js

@@ -0,0 +1,211 @@
+"use strict";
+/* 02-ui.js — orc ui client
+   The shared furniture: chip, card, kvList, collapsible, skeleton, empty, toast,
+   copy, modal, head, statTile. Paired with css/03-components.css.
+
+   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. */
+
+
+function chip(text, kind, pulse) {
+  const c = el("span", "chip" + (kind ? " chip-" + kind : "") + (pulse ? " chip-pulse" : ""), text);
+  return c;
+}
+
+function card(title, right) {
+  const c = el("div", "card");
+  if (title) {
+    const head = el("div", "card-head");
+    head.append(el("h2", null, title));
+    if (right) head.append(right);
+    c.append(head);
+  }
+  return c;
+}
+
+// `copyable` marks the rows whose whole purpose is to be pasted somewhere else
+// — filesystem paths, config locations, install specs. Selecting a wrapped
+// monospace path by hand is the kind of small friction nobody reports.
+function kvList(rows, copyable) {
+  const dl = el("dl", "kv");
+  for (const [k, v] of rows) {
+    if (v === undefined || v === null || v === "") continue;
+    const dd = el("dd", null, esc(v));
+    if (copyable) {
+      dd.classList.add("kv-copy");
+      const b = el("button", "copy-btn", t("common.copy").toLowerCase());
+      b.type = "button";
+      b.title = t("common.copy");
+      b.addEventListener("click", () => copy(String(v), k));
+      dd.append(b);
+    }
+    dl.append(el("dt", null, k), dd);
+  }
+  return dl;
+}
+
+// A collapsible card. Extracted from the settings tiers so a second caller does
+// not fork the fold behaviour — the `1fr → 0fr` grid trick needs a real element
+// child to collapse against, and getting that subtly wrong twice is how two
+// sections end up animating differently.
+function collapsible({ title, count, desc, content, collapsed, chipEl }) {
+  const wrap = el("div", "card tier" + (collapsed ? " collapsed" : ""));
+
+  const h = el("button", "tier-head");
+  h.type = "button";
+  h.setAttribute("aria-expanded", String(!collapsed));
+  h.append(el("span", "tier-caret", "▸"));
+  h.append(el("h2", null, title));
+  if (count) h.append(el("span", "tier-count", count));
+  if (chipEl) h.append(chipEl);
+  h.addEventListener("click", () => {
+    const open = h.getAttribute("aria-expanded") === "true";
+    h.setAttribute("aria-expanded", String(!open));
+    wrap.classList.toggle("collapsed", open);
+  });
+
+  const inner = el("div", "tier-body-inner");
+  if (desc) inner.append(el("div", "tier-desc", desc));
+  const rows = el("div", "tier-rows");
+  rows.append(content);
+  inner.append(rows);
+  const bodyWrap = el("div", "tier-body");
+  bodyWrap.append(inner);
+
+  wrap.append(h, bodyWrap);
+  return wrap;
+}
+
+function skeleton(n) {
+  const f = frag();
+  for (let i = 0; i < (n || 4); i++) f.append(el("div", "skeleton" + (i % 3 === 2 ? " w-60" : i % 3 === 1 ? " w-40" : "")));
+  return f;
+}
+
+function empty(msg, hint) {
+  const box = el("div", "empty");
+  box.append(el("div", null, msg));
+  if (hint) box.append(el("div", "note", hint));
+  return box;
+}
+
+// Every panel's load-failure box. It shows the reason AND the output the CLI
+// actually produced — a 500 with no message is what the user saw before v0.49.2.
+function failBox(e) {
+  const box = empty(t("common.loadFail"), String((e && e.message) || e));
+  const detail = e && e.detail ? String(e.detail).trim() : "";
+  if (detail) box.append(el("pre", "block wrap fail-detail", detail.slice(0, 2000)));
+  return box;
+}
+
+function toast(msg, kind, detail) {
+  const t = el("div", "toast" + (kind ? " toast-" + kind : ""));
+  t.append(el("div", null, msg));
+  if (detail) t.append(el("pre", null, detail.slice(0, 900)));
+  $("#toasts").append(t);
+  setTimeout(() => t.remove(), kind === "bad" ? 9000 : 4200);
+}
+
+function copy(text, label) {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => toast(t("common.clipboardOk", { label: label || t("common.copied") }), "ok"))
+    .catch(() => toast(t("common.clipboardFail"), "bad"));
+}
+
+/* ----------------------------------------------------------------- modal -- */
+
+// `dismissible` defaults to TRUE, so nothing that already calls this changes.
+// FALSE is for a modal whose only legal exits are its own buttons — the
+// passphrase save, which is a procedure with a deadline attached and not a form
+// you can wander away from half-finished. It follows the `.tour-block`
+// precedent: no Escape handler, no backdrop click, and a CAPTURE-PHASE key
+// handler that swallows Escape before anything else can act on it.
+function modal({ title, body, actions, dismissible }) {
+  const host = $("#modal-host");
+  $("#modal-title").textContent = title;
+  const b = $("#modal-body");
+  const f = $("#modal-foot");
+  b.replaceChildren(body);
+  f.replaceChildren();
+  // Two call shapes exist in this file: an ARRAY of {label,onClick}, and an
+  // OBJECT keyed by label whose value is the handler (`null` = just close).
+  // `for…of` over the object form throws, which silently killed the confirm
+  // dialogs on Promises, Self-serve and Challenge — a dead button that logs
+  // nothing. Normalising here is what stops a third shape appearing.
+  const list = Array.isArray(actions)
+    ? actions
+    : Object.entries(actions || {}).map(([label, fn]) => ({
+        label,
+        onClick: (close) => {
+          close();
+          if (typeof fn === "function") fn();
+        },
+      }));
+  for (const a of list) {
+    const btn = el("button", "btn btn-allow-busy " + (a.cls || ""), a.label);
+    btn.type = "button";
+    if (a.id) btn.id = a.id;
+    btn.disabled = !!a.disabled;
+    btn.addEventListener("click", () => a.onClick(closeModal));
+    f.append(btn);
+  }
+  const locked = dismissible === false;
+  host.hidden = false;
+  host.classList.toggle("modal-locked", locked);
+  // THE BODY SCROLL LOCK. `closeModal` is already the single exit — Escape, the
+  // backdrop and every action button route through it — so there is exactly one
+  // add and one remove, and no path around either.
+  document.body.classList.add("modal-open");
+  const onKey = (e) => {
+    if (e.key !== "Escape") return;
+    if (locked) {
+      // Swallowed in the CAPTURE phase, so no other Escape handler on the page
+      // sees it either.
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+    closeModal();
+  };
+  document.addEventListener("keydown", onKey, true);
+  $("#modal-backdrop").onclick = locked ? null : closeModal;
+  function closeModal() {
+    host.hidden = true;
+    host.classList.remove("modal-locked");
+    document.body.classList.remove("modal-open");
+    document.removeEventListener("keydown", onKey, true);
+  }
+  return closeModal;
+}
+
+function head(host, title, sub, right) {
+  const h = el("div", "page-head");
+  const left = el("div");
+  left.append(el("h1", null, title));
+  if (sub) left.append(el("div", "page-sub", sub));
+  h.append(left);
+  if (right) h.append(right);
+  host.append(h);
+  return h;
+}
+
+// A tile can now be a LINK to the panel that owns its number. It stays a plain
+// div when there is nowhere useful to go — a tile that reacts to the pointer
+// and then does nothing is worse than one that never moved.
+function statTile(label, value, note, kind, panel) {
+  const tile = el(panel ? "button" : "div", "stat" + (panel ? " stat-link" : ""));
+  if (panel) {
+    tile.type = "button";
+    tile.addEventListener("click", () => (location.hash = "#/" + panel));
+  }
+  tile.append(el("div", "stat-label", label));
+  const v = el("div", "stat-value", value);
+  if (kind === "ok") v.style.color = "var(--ok)";
+  if (kind === "warn") v.style.color = "var(--warn)";
+  if (kind === "bad") v.style.color = "var(--bad)";
+  tile.append(v);
+  if (note) tile.append(el("div", "stat-note", note));
+  return tile;
+}

package/bin/webui/js/03-md.js

@@ -0,0 +1,286 @@
+"use strict";
+/* 03-md.js — orc ui client
+   stripMd, reflowMd, stripLeadingGlyph, renderMd, inline, link.
+   
+   Markdown is rendered to real DOM nodes, NEVER assigned as HTML. renderMd's
+   paragraph branch must consume its first line unconditionally — it is the
+   fall-through, so a line every branch declines is an infinite loop that hangs
+   the panel.
+
+   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. */
+
+
+// The changelog is markdown written for GitHub. Rather than render it — which
+// would mean an HTML sanitiser for text fetched over the network — the few
+// inline markers are stripped and it is shown as plain text. Nothing from the
+// network is ever parsed as HTML by this panel.
+function stripMd(s) {
+  return String(s)
+    .replace(/```[\s\S]*?```/g, (m) => m.replace(/```\w*\n?/g, "").trim())
+    .replace(/\*\*(.+?)\*\*/g, "$1")
+    .replace(/\*(.+?)\*/g, "$1")
+    .replace(/`(.+?)`/g, "$1")
+    .replace(/^\s*[-*]\s+/gm, "• ")
+    .replace(/\[(.+?)\]\((.+?)\)/g, "$1")
+    .trim();
+}
+
+// REFLOW (v0.44.1). The changelog is this repo's own CHANGELOG.md, and that
+// file is hard-wrapped at ~78 columns. `.cl-body` renders `pre-wrap`, so every one of
+// those authoring line breaks survived into a 660px box: paragraphs came out as
+// a ragged stack of short lines that ended nowhere near the right edge, which
+// is exactly the "misaligned" the modal looked. The wrapping belongs to the
+// box, not to the source file.
+//
+// Blank lines are paragraph breaks and are KEPT; a bullet keeps its own line
+// (joining those would run a list into one sentence); everything else in a
+// paragraph joins with a space and wraps to whatever width it is given.
+function reflowMd(s) {
+  return String(s)
+    .split(/\n{2,}/)
+    .map((para) =>
+      para
+        .split("\n")
+        .reduce((lines, raw) => {
+          const line = raw.trim();
+          if (!line) return lines;
+          // A bullet opens a line; anything else continues the one before it,
+          // which is also how a bullet that wrapped in the source rejoins.
+          if (!lines.length || line.startsWith("• ")) lines.push(line);
+          else lines[lines.length - 1] += " " + line;
+          return lines;
+        }, [])
+        .join("\n")
+    )
+    .filter(Boolean)
+    .join("\n\n");
+}
+
+// The onboarding titles carry a circled number ("① What ORC is") because a
+// terminal has no other way to show order. The rail already numbers every item,
+// so the glyph would be shown twice.
+function stripLeadingGlyph(s) {
+  return String(s || "").replace(/^[①-⑳⓪]\s*/, "");
+}
+/* --- markdown → DOM -------------------------------------------------------
+   Small on purpose: headings, fenced code, tables, quotes, lists, rules and
+   paragraphs — the shapes the mocked runs actually use. Anything it does not
+   recognise stays as text, which is the correct failure: an unrendered line is
+   readable, a swallowed one is not.
+
+   A link to another `.md` in the catalogue becomes a button that opens that
+   document here. A link that resolves to nothing renders as its text, never as
+   a dead link. */
+function renderMd(md, opts) {
+  const o = opts || {};
+  const lines = String(md || "").split(/\r?\n/);
+  const out = frag();
+  let i = 0;
+  let skippedTitle = false;
+
+  const isTableRow = (s) => /^\s*\|.*\|\s*$/.test(s || "");
+  const isDivider = (s) => /^\s*\|?[\s:|-]{3,}\|?\s*$/.test(s || "") && (s || "").includes("-");
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (!line.trim()) {
+      i++;
+      continue;
+    }
+
+    // Fenced code. The fence language is ignored — none of these documents are
+    // syntax-highlighted, and a wrong highlight is worse than none.
+    const fence = line.match(/^\s*```/);
+    if (fence) {
+      const buf = [];
+      i++;
+      while (i < lines.length && !/^\s*```/.test(lines[i])) buf.push(lines[i++]);
+      i++; // the closing fence
+      const box = el("div", "md-codebox");
+      const pre = el("pre", "md-code", buf.join("\n"));
+      const b = el("button", "copy-btn md-code-copy", t("common.copy").toLowerCase());
+      b.type = "button";
+      b.addEventListener("click", () => copy(buf.join("\n"), t("mockrun.codeBlock")));
+      box.append(pre, b);
+      out.append(box);
+      continue;
+    }
+
+    // Table: a row, then a divider row.
+    if (isTableRow(line) && isDivider(lines[i + 1])) {
+      const cells = (s) =>
+        s
+          .trim()
+          .replace(/^\||\|$/g, "")
+          .split("|")
+          .map((c) => c.trim());
+      const table = el("table", "md-table");
+      const thead = el("thead");
+      const hr = el("tr");
+      for (const c of cells(line)) {
+        const th = el("th");
+        inline(th, c, o);
+        hr.append(th);
+      }
+      thead.append(hr);
+      table.append(thead);
+      i += 2;
+      const tbody = el("tbody");
+      while (i < lines.length && isTableRow(lines[i])) {
+        const tr = el("tr");
+        for (const c of cells(lines[i])) {
+          const td = el("td");
+          inline(td, c, o);
+          tr.append(td);
+        }
+        tbody.append(tr);
+        i++;
+      }
+      table.append(tbody);
+      const scroller = el("div", "md-tablewrap");
+      scroller.append(table);
+      out.append(scroller);
+      continue;
+    }
+
+    const h = line.match(/^(#{1,6})\s+(.*)$/);
+    if (h) {
+      // The pane already prints the document title above the article.
+      if (h[1].length === 1 && !skippedTitle) {
+        skippedTitle = true;
+        i++;
+        continue;
+      }
+      const level = Math.min(h[1].length + 1, 5);
+      const node = el("h" + level, "md-h md-h" + h[1].length);
+      inline(node, h[2], o);
+      out.append(node);
+      i++;
+      continue;
+    }
+
+    if (/^\s*(---|\*\*\*|___)\s*$/.test(line)) {
+      out.append(el("hr", "md-hr"));
+      i++;
+      continue;
+    }
+
+    if (/^\s*>/.test(line)) {
+      const buf = [];
+      while (i < lines.length && /^\s*>/.test(lines[i])) buf.push(lines[i++].replace(/^\s*>\s?/, ""));
+      const q = el("blockquote", "md-quote");
+      inline(q, buf.join(" "), o);
+      out.append(q);
+      continue;
+    }
+
+    const bullet = line.match(/^(\s*)([-*+]|\d+[.)])\s+(.*)$/);
+    if (bullet) {
+      const ordered = /\d/.test(bullet[2]);
+      const list = el(ordered ? "ol" : "ul", "md-list");
+      while (i < lines.length) {
+        const m = lines[i].match(/^(\s*)([-*+]|\d+[.)])\s+(.*)$/);
+        if (!m) {
+          // A wrapped continuation line belongs to the item above it.
+          if (lines[i].trim() && /^\s{2,}\S/.test(lines[i]) && list.lastChild) {
+            list.lastChild.append(document.createTextNode(" "));
+            inline(list.lastChild, lines[i].trim(), o);
+            i++;
+            continue;
+          }
+          break;
+        }
+        const li = el("li", "md-li md-li-" + Math.min(2, Math.floor(m[1].length / 2)));
+        inline(li, m[3], o);
+        list.append(li);
+        i++;
+      }
+      out.append(list);
+      continue;
+    }
+
+    // Paragraph: consecutive plain lines, rewrapped by the box rather than by
+    // the file's own 78-column hard wrap (the changelog lesson, v0.44.1).
+    //
+    // THE FIRST LINE IS TAKEN UNCONDITIONALLY, and that is load-bearing: this
+    // is the fall-through branch, so a line the branches above declined but the
+    // condition below also rejects (a stray `| … |` row with no divider under
+    // it, say) would leave `i` exactly where it was — an infinite loop that
+    // hangs the panel on one malformed line. Always consume one, then extend.
+    const buf = [lines[i++].trim()];
+    while (
+      i < lines.length &&
+      lines[i].trim() &&
+      !/^\s*(```|#{1,6}\s|>|---|\*\*\*|___)/.test(lines[i]) &&
+      !/^(\s*)([-*+]|\d+[.)])\s+/.test(lines[i]) &&
+      !isTableRow(lines[i])
+    )
+      buf.push(lines[i++].trim());
+    const p = el("p", "md-p");
+    inline(p, buf.join(" "), o);
+    out.append(p);
+  }
+  return out;
+}
+
+// Inline markup: `code`, **bold**, and links. Everything else is text.
+function inline(parent, text, opts) {
+  const o = opts || {};
+  const src = String(text || "");
+  const re = /(`[^`]+`)|(\*\*[^*]+\*\*)|(\[[^\]]+\]\([^)\s]+\))/g;
+  let last = 0;
+  let m;
+  while ((m = re.exec(src))) {
+    if (m.index > last) parent.append(document.createTextNode(src.slice(last, m.index)));
+    const tok = m[0];
+    if (tok.startsWith("`")) parent.append(el("code", "md-code-inline", tok.slice(1, -1)));
+    else if (tok.startsWith("**")) parent.append(el("strong", null, tok.slice(2, -2)));
+    else {
+      const lm = tok.match(/^\[([^\]]+)\]\(([^)\s]+)\)$/);
+      // `nolink` is the recursion stop: a link LABEL gets the same inline pass
+      // (so `[`orc mock-run`](…)` is not printed with its backticks) but can
+      // never contain another link to descend into.
+      if (o.nolink) parent.append(document.createTextNode(lm[1]));
+      else parent.append(link(lm[1], lm[2], o));
+    }
+    last = re.lastIndex;
+  }
+  if (last < src.length) parent.append(document.createTextNode(src.slice(last)));
+}
+
+function link(text, href, o) {
+  const label = (node) => {
+    inline(node, text, Object.assign({}, o, { nolink: true }));
+    return node;
+  };
+  if (/^https?:\/\//i.test(href)) {
+    const a = label(el("a", "md-link"));
+    a.href = href;
+    a.target = "_blank";
+    a.rel = "noreferrer noopener";
+    return a;
+  }
+  // A relative link into the catalogue opens in this panel. Resolution is by
+  // the target's own tail, so `orc-pact.md` and
+  // `../templates/skills/orc-mini/examples/mini-run-mock.md` both land.
+  const docs = o.docs || [];
+  const tail = href.split("#")[0].replace(/^\.\//, "");
+  const base = tail.split("/").pop();
+  const hit =
+    docs.find((d) => d.path.endsWith(tail.replace(/^(\.\.\/)+/, ""))) ||
+    docs.find((d) => d.slug + ".md" === base) ||
+    docs.find((d) => d.path.endsWith("/" + base));
+  if (hit && o.open) {
+    const b = label(el("button", "md-doclink"));
+    b.type = "button";
+    b.title = hit.title;
+    b.addEventListener("click", () => o.open(hit.slug));
+    return b;
+  }
+  // Nothing to open: the words stay, the link does not. A dead link in a panel
+  // that cannot browse a repository is a promise it cannot keep.
+  return label(el("span", "md-link-flat"));
+}

package/bin/webui/js/04-router.js

@@ -0,0 +1,51 @@
+"use strict";
+/* 04-router.js — orc ui client
+   PANELS, currentPanel, metaInfo, route(), section().
+   A panel registers itself by assigning PANELS.<name> in its own file.
+
+   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. */
+
+
+/* ----------------------------------------------------------------- router -- */
+
+const PANELS = {};
+let currentPanel = null;
+// Filled by boot(). The tour needs the project root to remember "seen" per
+// project, and needs to know it is not looking at fixtures.
+let metaInfo = { fixtures: false, project_root: "" };
+
+function route() {
+  const name = (location.hash.replace(/^#\//, "") || "overview").split("?")[0];
+  const panel = PANELS[name] ? name : "overview";
+  currentPanel = panel;
+  for (const a of document.querySelectorAll("#nav a"))
+    a.setAttribute("aria-current", a.dataset.panel === panel ? "page" : "false");
+  const host = $("#panel");
+  host.replaceChildren();
+  // Re-trigger the 180ms panel animation on every navigation.
+  host.style.animation = "none";
+  void host.offsetHeight;
+  host.style.animation = "";
+  PANELS[panel](host);
+  renderBanners();
+}
+
+// Every panel body is rendered async; this keeps the skeleton/error handling in
+// ONE place instead of nine.
+async function section(host, loader, render) {
+  // `stack` is not decoration: it is what spaces the blocks a panel renders.
+  // Without it the children collide unless they happen to be two cards in a row.
+  const slot = el("div", "stack");
+  slot.append(skeleton(4));
+  host.append(slot);
+  try {
+    const data = await loader();
+    const out = render(data);
+    slot.replaceChildren(out || el("div"));
+  } catch (e) {
+    slot.replaceChildren(failBox(e));
+  }
+  return slot;
+}