@bonginkan/maria-lite 6.2.0 → 6.2.2

package/dist/gui-client.js

@@ -0,0 +1,2210 @@
+// services/gui-lite/client/gui-client.ts
+var $ = (id) => {
+  const el = document.getElementById(id);
+  if (!el) throw new Error(`Missing element: #${id}`);
+  return el;
+};
+var SPIN_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+var state = {
+  history: [],
+  histIdx: -1,
+  jobs: [],
+  runs: [],
+  runFilesById: {},
+  mdCache: /* @__PURE__ */ new Map(),
+  multiverse: [],
+  mvLegend: null,
+  kp: [],
+  kpNdcMeta: null,
+  kpLegend: null,
+  kpLeafItems: /* @__PURE__ */ new Map(),
+  ui: {
+    selectedRunId: null,
+    detailLoading: false,
+    lastDetailRunId: null,
+    quitting: false,
+    spinTimer: null,
+    spinIndex: 0,
+    spinText: "",
+    refreshTimer: null,
+    lastRunsSig: "",
+    showAllArtifactsByRunId: {}
+  },
+  avatar: { has: false },
+  uni: {
+    spec: null,
+    contexts: null,
+    nodes: [],
+    edges: [],
+    seek: 0,
+    playing: false,
+    timer: null,
+    pos: /* @__PURE__ */ new Map(),
+    hit: [],
+    selectedNodeId: null,
+    flowMeta: null,
+    view: { scale: 1, tx: 0, ty: 0, panning: false, panX: 0, panY: 0, pinchDist: 0, pinchScale: 1 }
+  },
+  nav: {
+    mvOpenMajor: /* @__PURE__ */ new Set(),
+    mvOpenCode: /* @__PURE__ */ new Set(),
+    kpOpenMajor: /* @__PURE__ */ new Set(),
+    kpOpenCode: /* @__PURE__ */ new Set()
+  }
+};
+function setTab(tab) {
+  document.querySelectorAll(".tab").forEach((t) => t.classList.toggle("active", t.dataset.tab === tab));
+  document.querySelectorAll(".view").forEach((v2) => v2.classList.remove("active"));
+  const v = document.getElementById("view-" + tab);
+  if (v) v.classList.add("active");
+}
+function decodeFileUrlToPath(input) {
+  const s = String(input || "").trim();
+  if (!s) return "";
+  if (!s.startsWith("file://")) return s;
+  try {
+    const u = new URL(s);
+    let p = u.pathname || "";
+    try {
+      p = decodeURIComponent(p);
+    } catch {
+    }
+    if (/^\/[A-Za-z]:\//.test(p)) p = p.slice(1);
+    return p;
+  } catch {
+    const m = /^file:\/\/\/(.*)$/i.exec(s);
+    const raw = m?.[1] ? `/${m[1]}` : s;
+    try {
+      return decodeURIComponent(raw);
+    } catch {
+      return raw;
+    }
+  }
+}
+function quoteForCli(s) {
+  const t = String(s || "").trim();
+  if (!t) return "";
+  return JSON.stringify(t);
+}
+function applyDroppedTextToInput(text, target) {
+  const raw = String(text || "").trim();
+  if (!raw) return;
+  const el = target || document.activeElement;
+  const input = el && el.tagName && (String(el.tagName).toLowerCase() === "input" || String(el.tagName).toLowerCase() === "textarea") ? el : null;
+  const fallback = document.getElementById("cmdInput");
+  const dst = input || fallback;
+  if (!dst) return;
+  const cur = String(dst.value || "");
+  const sep = cur && !cur.endsWith(" ") ? " " : "";
+  dst.value = cur + sep + raw;
+  try {
+    dst.focus();
+  } catch {
+  }
+}
+function attachDragAndDropPath() {
+  const prevent = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+  };
+  window.addEventListener("dragover", prevent);
+  window.addEventListener("drop", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const dt = e.dataTransfer;
+    if (!dt) return;
+    const uriList = String(dt.getData("text/uri-list") || "").trim();
+    if (uriList) {
+      const first = uriList.split("\n").map((l) => l.trim()).filter((l) => l && !l.startsWith("#"))[0];
+      if (first) {
+        const p = decodeFileUrlToPath(first);
+        applyDroppedTextToInput(quoteForCli(p), e.target);
+        return;
+      }
+    }
+    const plain = String(dt.getData("text/plain") || "").trim();
+    if (plain) {
+      applyDroppedTextToInput(quoteForCli(decodeFileUrlToPath(plain)), e.target);
+      return;
+    }
+    const files = Array.from(dt.files || []);
+    if (files.length) {
+      const f = files[0];
+      (async () => {
+        try {
+          const buf = await f.arrayBuffer();
+          const bytesBase64 = arrayBufferToBase64(buf);
+          const out = await api("/api/drop-file", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ filename: f.name || "drop.bin", mime: f.type || "application/octet-stream", bytesBase64 })
+          });
+          const abs = out && typeof out.absPath === "string" ? String(out.absPath).trim() : "";
+          if (abs) {
+            applyDroppedTextToInput(quoteForCli(abs), e.target);
+            return;
+          }
+        } catch {
+        }
+        const name = String(f.webkitRelativePath || f.name || "").trim();
+        if (name) applyDroppedTextToInput(quoteForCli(name), e.target);
+      })();
+    }
+  });
+}
+function applyTheme(theme, opts) {
+  const t = theme === "terminal" ? "terminal" : "light";
+  document.documentElement.dataset.theme = t;
+  try {
+    localStorage.setItem("maria.gui.theme", t);
+  } catch {
+  }
+  const persist = opts?.persist !== false;
+  if (persist) {
+    api("/api/gui/state", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ state: { theme: t } })
+    }).catch(() => {
+    });
+  }
+  try {
+    requestAnimationFrame(() => {
+      try {
+        updateUniverseReplay();
+      } catch {
+      }
+    });
+  } catch {
+  }
+}
+async function initThemeFromServer() {
+  let saved = "";
+  try {
+    const r = await api("/api/gui/state");
+    const st = r && typeof r === "object" ? r.state : null;
+    saved = st && typeof st.theme === "string" ? String(st.theme).trim() : "";
+  } catch {
+  }
+  if (!saved) {
+    try {
+      saved = String(localStorage.getItem("maria.gui.theme") || "");
+    } catch {
+    }
+  }
+  applyTheme(saved || "light", { persist: false });
+  const sel = document.getElementById("themeSel");
+  if (sel) sel.value = saved === "terminal" ? "terminal" : "light";
+}
+function readFlowLayoutDir() {
+  const sel = document.getElementById("flowDirSel");
+  const vDom = sel ? String(sel.value || "").trim() : "";
+  if (vDom === "vertical" || vDom === "horizontal") return vDom;
+  let saved = "";
+  try {
+    saved = String(localStorage.getItem("maria.gui.flowDir") || "");
+  } catch {
+  }
+  return saved === "vertical" ? "vertical" : "horizontal";
+}
+function readFlowParallelEnabled() {
+  const sel = document.getElementById("flowParallelSel");
+  const vDom = sel ? String(sel.value || "").trim() : "";
+  if (vDom === "off") return false;
+  if (vDom === "on") return true;
+  let saved = "";
+  try {
+    saved = String(localStorage.getItem("maria.gui.flowParallel") || "");
+  } catch {
+  }
+  return saved !== "off";
+}
+async function initFlowViewOptionsFromServer() {
+  let dir = "horizontal";
+  let par = "on";
+  try {
+    const r = await api("/api/gui/state");
+    const st = r && typeof r === "object" ? r.state : null;
+    const d = st && typeof st.flowDir === "string" ? String(st.flowDir).trim() : "";
+    const p = st && typeof st.flowParallel === "string" ? String(st.flowParallel).trim() : "";
+    dir = d === "vertical" ? "vertical" : "horizontal";
+    par = p === "off" ? "off" : "on";
+  } catch {
+  }
+  const dirSel = document.getElementById("flowDirSel");
+  if (dirSel) dirSel.value = dir;
+  const parSel = document.getElementById("flowParallelSel");
+  if (parSel) parSel.value = par;
+}
+async function api(path, opts) {
+  const res = await fetch(path, opts);
+  if (!res.ok) throw new Error("HTTP " + res.status);
+  const ct = res.headers.get("content-type") || "";
+  if (ct.includes("application/json")) return await res.json();
+  return await res.text();
+}
+function escapeHtml(s) {
+  return String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
+function decodeVisibleNewlines(s) {
+  return String(s ?? "").replace(/\\r\\n/g, "\n").replace(/\\n/g, "\n").replace(/¥n/g, "\n").replace(/\\t/g, "  ");
+}
+function mdToHtml(src) {
+  const s = String(src ?? "");
+  const esc = (t) => escapeHtml(t);
+  const lines = s.split(/\r?\n/);
+  const out = [];
+  let inCode = false;
+  let buf = [];
+  const flushPara = (p) => {
+    if (!p.length) return;
+    out.push("<p>" + p.join(" ") + "</p>");
+    p.length = 0;
+  };
+  let para = [];
+  let inUl = false;
+  for (const l0 of lines) {
+    const l = String(l0 ?? "");
+    if (/^```/.test(l)) {
+      if (inCode) {
+        out.push("<pre><code>" + esc(buf.join("\n")) + "</code></pre>");
+        buf = [];
+        inCode = false;
+        continue;
+      }
+      flushPara(para);
+      if (inUl) {
+        out.push("</ul>");
+        inUl = false;
+      }
+      inCode = true;
+      continue;
+    }
+    if (inCode) {
+      buf.push(l);
+      continue;
+    }
+    const h = /^(#{1,3})\s+(.*)$/.exec(l);
+    if (h) {
+      flushPara(para);
+      if (inUl) {
+        out.push("</ul>");
+        inUl = false;
+      }
+      const lvl = h[1].length;
+      out.push(`<h${lvl}>${esc(h[2])}</h${lvl}>`);
+      continue;
+    }
+    const li = /^\s*[-*]\s+(.+)$/.exec(l);
+    if (li) {
+      flushPara(para);
+      if (!inUl) {
+        out.push("<ul>");
+        inUl = true;
+      }
+      out.push("<li>" + esc(li[1]).replace(/`([^`]+)`/g, "<code>$1</code>") + "</li>");
+      continue;
+    }
+    if (inUl && !l.trim()) {
+      out.push("</ul>");
+      inUl = false;
+      continue;
+    }
+    if (!l.trim()) {
+      flushPara(para);
+      continue;
+    }
+    para.push(esc(l).replace(/`([^`]+)`/g, "<code>$1</code>"));
+  }
+  if (inCode) out.push("<pre><code>" + esc(buf.join("\n")) + "</code></pre>");
+  if (inUl) out.push("</ul>");
+  flushPara(para);
+  return out.join("\n");
+}
+function setSpinner(text) {
+  state.ui.spinText = String(text || "");
+  if (state.ui.spinTimer != null) return;
+  state.ui.spinTimer = window.setInterval(() => {
+    state.ui.spinIndex = (state.ui.spinIndex + 1) % SPIN_FRAMES.length;
+    const frame = SPIN_FRAMES[state.ui.spinIndex];
+    const t = state.ui.spinText ? state.ui.spinText : "running";
+    $("queuePill").textContent = `[${frame}] ${t}...`;
+  }, 80);
+}
+function stopSpinner() {
+  if (state.ui.spinTimer != null) {
+    window.clearInterval(state.ui.spinTimer);
+    state.ui.spinTimer = null;
+  }
+}
+async function getMarkdownCached(rel) {
+  const key = String(rel || "");
+  if (!key) return "";
+  if (state.mdCache.has(key)) return state.mdCache.get(key) || "";
+  try {
+    const t = await api(`/api/file/text?path=${encodeURIComponent(key)}&max=200000`);
+    const txt = typeof t?.text === "string" ? String(t.text) : "";
+    state.mdCache.set(key, txt);
+    return txt;
+  } catch {
+    state.mdCache.set(key, "");
+    return "";
+  }
+}
+function guessExt(rel) {
+  const s = String(rel || "").toLowerCase();
+  return s;
+}
+function isImagePath(rel) {
+  const s = guessExt(rel);
+  return s.endsWith(".png") || s.endsWith(".jpg") || s.endsWith(".jpeg") || s.endsWith(".webp") || s.endsWith(".gif");
+}
+function isVideoPath(rel) {
+  const s = guessExt(rel);
+  return s.endsWith(".mp4") || s.endsWith(".webm") || s.endsWith(".mov");
+}
+function isAudioPath(rel) {
+  const s = guessExt(rel);
+  return s.endsWith(".wav") || s.endsWith(".mp3") || s.endsWith(".m4a") || s.endsWith(".ogg");
+}
+function isMarkdownPath(rel) {
+  const s = guessExt(rel);
+  return s.endsWith(".md") || s.endsWith(".markdown");
+}
+function renderRuns(list) {
+  $("runsPill").textContent = String(list.length);
+  const box = $("runsList");
+  box.innerHTML = "";
+  const tasks = [];
+  for (const r of list) {
+    const it = document.createElement("div");
+    it.className = "item";
+    const status = r.status === "running" ? "hot" : r.status === "failed" ? "danger" : "";
+    const runId = String(r.runId || "");
+    if (runId) it.id = "run-" + runId;
+    if (state.ui.selectedRunId && String(state.ui.selectedRunId) === runId) it.style.borderColor = "var(--hot)";
+    const filesAll = state.runFilesById[runId] || [];
+    const filesPrimary = filesAll.filter((f) => String(f?.kind || "").trim().toLowerCase() === "primary");
+    const isCompleted = String(r.status || "") === "completed";
+    const cmdId = String(r.commandId || "").trim().toLowerCase();
+    const defaultPrimaryOnly = isCompleted && (cmdId === "film" || cmdId === "slides" || cmdId === "proposal" || cmdId === "docs");
+    const showAll = Boolean(state.ui.showAllArtifactsByRunId[runId]);
+    const files = defaultPrimaryOnly && !showAll && filesPrimary.length > 0 ? filesPrimary : filesAll;
+    const hasText = Boolean(r && r.lastOutput && r.lastOutput.text);
+    const hasFiles = Array.isArray(files) && files.length > 0;
+    const head = document.createElement("div");
+    head.className = "k";
+    head.innerHTML = `/${escapeHtml(r.commandId)} <span class="pill ${status}">${escapeHtml(r.status)}</span>`;
+    it.appendChild(head);
+    const meta = document.createElement("div");
+    meta.className = "v";
+    meta.textContent = `runId=${runId}
+updatedAt=${String(r.updatedAt || "")}
+input=${String(r.input || "")}`;
+    it.appendChild(meta);
+    const out = document.createElement("div");
+    out.className = "v";
+    out.style.marginTop = "8px";
+    if (String(r.status || "") === "running" && !hasText && !hasFiles) {
+      out.textContent = "running...";
+    } else {
+      out.textContent = hasText ? String(r.lastOutput.text) : "(no output)";
+    }
+    it.appendChild(out);
+    const cmdRow = document.createElement("div");
+    cmdRow.className = "cmd";
+    cmdRow.style.marginTop = "8px";
+    const openRunBtn = document.createElement("button");
+    openRunBtn.textContent = "Open folder";
+    openRunBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!runId) return;
+      void api("/api/open", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ path: `artifacts/maria-lite/runs/${runId}`, mode: "folder" })
+      });
+    });
+    cmdRow.appendChild(openRunBtn);
+    if (defaultPrimaryOnly && filesPrimary.length > 0 && filesAll.length > filesPrimary.length) {
+      const toggleBtn = document.createElement("button");
+      toggleBtn.textContent = showAll ? "Hide intermediates" : "Show intermediates";
+      toggleBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!runId) return;
+        state.ui.showAllArtifactsByRunId[runId] = !Boolean(state.ui.showAllArtifactsByRunId[runId]);
+        void renderRuns(state.runs);
+      });
+      cmdRow.appendChild(toggleBtn);
+    }
+    it.appendChild(cmdRow);
+    it.addEventListener("click", () => void showRunDetail(runId));
+    if (files.length) {
+      const mrow = document.createElement("div");
+      mrow.className = "mediaRow";
+      mrow.style.marginTop = "10px";
+      for (const f of files) {
+        const rel = String(f.rel || "");
+        const card = document.createElement("div");
+        card.className = "thumb";
+        card.style.padding = "8px";
+        const top = document.createElement("div");
+        top.className = "k";
+        top.innerHTML = `file <span class="pill">${escapeHtml(f.kind || "file")}</span>`;
+        const link = document.createElement("div");
+        link.className = "v";
+        link.textContent = rel;
+        card.appendChild(top);
+        card.appendChild(link);
+        if (isImagePath(rel)) {
+          const img = document.createElement("img");
+          img.src = `/api/file?path=${encodeURIComponent(rel)}`;
+          img.loading = "lazy";
+          card.appendChild(img);
+        } else if (isVideoPath(rel)) {
+          const v = document.createElement("video");
+          v.src = `/api/file?path=${encodeURIComponent(rel)}`;
+          v.controls = true;
+          v.preload = "metadata";
+          card.appendChild(v);
+        } else if (isAudioPath(rel)) {
+          const a = document.createElement("audio");
+          a.src = `/api/file?path=${encodeURIComponent(rel)}`;
+          a.controls = true;
+          a.preload = "metadata";
+          card.appendChild(a);
+        } else if (isMarkdownPath(rel)) {
+          const mdBox = document.createElement("div");
+          mdBox.className = "md";
+          mdBox.textContent = "loading...";
+          card.appendChild(mdBox);
+          tasks.push(
+            (async () => {
+              const raw = await getMarkdownCached(rel);
+              mdBox.innerHTML = raw ? mdToHtml(raw) : "(empty markdown)";
+            })()
+          );
+        }
+        const btnRow = document.createElement("div");
+        btnRow.className = "cmd";
+        btnRow.style.marginTop = "8px";
+        const openBtn = document.createElement("button");
+        openBtn.textContent = "Open folder";
+        openBtn.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void api("/api/open", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ path: rel, mode: "folder" })
+          });
+        });
+        btnRow.appendChild(openBtn);
+        card.appendChild(btnRow);
+        mrow.appendChild(card);
+      }
+      it.appendChild(mrow);
+    }
+    box.appendChild(it);
+  }
+  return Promise.all(tasks).then(() => {
+  });
+}
+function renderLogs(lines) {
+  $("logsPill").textContent = String(lines.length);
+  $("logsBox").textContent = lines.map((l) => JSON.stringify(l)).join("\n");
+}
+function renderHistory(list) {
+  $("histPill").textContent = String(list.length);
+  const box = $("hist");
+  box.innerHTML = "";
+  for (const h of list) {
+    const it = document.createElement("div");
+    it.className = "item";
+    it.innerHTML = `<div class="k">cmd</div><div class="v">${escapeHtml(h)}</div>`;
+    it.addEventListener("click", () => {
+      ("cmdInput" in window ? $("cmdInput") : null).value = h;
+      ("cmdInput" in window ? $("cmdInput") : null).focus();
+    });
+    box.appendChild(it);
+  }
+}
+function renderJobs(list) {
+  $("jobsPill").textContent = String(list.length);
+  if (state.ui.quitting) {
+    stopSpinner();
+    $("queuePill").textContent = "bye";
+    return;
+  }
+  const q = list.filter((j) => j.status === "queued").length;
+  const r = list.filter((j) => j.status === "running").length;
+  if (r > 0) {
+    const j = list.slice().reverse().find((x) => x && x.status === "running") || null;
+    const t = j && typeof j.spinnerText === "string" && String(j.spinnerText).trim() ? String(j.spinnerText).trim() : "MARIA is working";
+    setSpinner(t);
+  } else {
+    stopSpinner();
+    $("queuePill").textContent = q ? `queued:${q}` : "idle";
+  }
+  const box = $("jobs");
+  box.innerHTML = "";
+  for (const j of list.slice().reverse().slice(0, 8)) {
+    const status = j.status === "running" ? "hot" : j.status === "error" ? "danger" : "";
+    const it = document.createElement("div");
+    it.className = "item";
+    it.innerHTML = `<div class="k">job ${escapeHtml(j.id)} <span class="pill ${status}">${escapeHtml(j.status)}</span></div><div class="v">${escapeHtml(j.line)}${j.runId ? `
+runId=${escapeHtml(j.runId)}` : ""}</div>`;
+    box.appendChild(it);
+  }
+}
+async function showRunDetail(runId) {
+  const prev = state.ui.selectedRunId ? String(state.ui.selectedRunId) : "";
+  const next = String(runId || "");
+  state.ui.selectedRunId = next;
+  state.ui.lastDetailRunId = next;
+  if (prev && prev !== next) {
+    const p = document.getElementById("run-" + prev);
+    if (p) p.style.borderColor = "";
+  }
+  if (next) {
+    const n = document.getElementById("run-" + next);
+    if (n) n.style.borderColor = "var(--hot)";
+  }
+  const el = next ? document.getElementById("run-" + next) : null;
+  if (el && typeof el.scrollIntoView === "function") {
+    try {
+      el.scrollIntoView({ block: "nearest" });
+    } catch {
+    }
+  }
+}
+async function ensureDefaultRunDetail() {
+  const list = state.runs || [];
+  if (!Array.isArray(list) || list.length === 0) return;
+  const wanted = state.ui.selectedRunId ? String(state.ui.selectedRunId) : String(list[0].runId || "");
+  if (wanted) state.ui.selectedRunId = wanted;
+}
+function arrayBufferToBase64(buf) {
+  const bytes = new Uint8Array(buf);
+  let bin = "";
+  const chunk = 32768;
+  for (let i = 0; i < bytes.length; i += chunk) bin += String.fromCharCode(...bytes.subarray(i, i + chunk));
+  return btoa(bin);
+}
+function setAvatarBadge(show) {
+  const b = document.getElementById("avatarBadge");
+  if (!b) return;
+  b.style.display = show ? "flex" : "none";
+}
+async function refreshAvatar() {
+  try {
+    const meta = await api(`/api/avatar/meta?ts=${Date.now()}`);
+    const has = Boolean(meta && meta.hasAvatar);
+    state.avatar.has = has;
+    setAvatarBadge(!has);
+    const img = $("avatarImg");
+    if (has) img.src = `/api/avatar?ts=${Date.now()}`;
+    else img.removeAttribute("src");
+  } catch {
+    state.avatar.has = false;
+    setAvatarBadge(true);
+  }
+}
+async function runCmd(line) {
+  const s = String(line || "").trim();
+  if (!s) return;
+  const normalized = s.startsWith("/") ? s.slice(1).trim().toLowerCase() : s.toLowerCase();
+  if (normalized === "quit") state.ui.quitting = true;
+  const res = await api("/api/command", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ line: s }) });
+  $("cmdInput").value = "";
+  state.histIdx = -1;
+  if (normalized === "quit") {
+    if (state.ui.refreshTimer != null) window.clearInterval(state.ui.refreshTimer);
+    stopSpinner();
+    $("queuePill").textContent = "bye";
+    return;
+  }
+  await refresh();
+  if (/^\/universe\s+multiverse\b/i.test(s)) {
+    const jobId = res && typeof res === "object" ? String(res.jobId || res.jobID || "") : "";
+    const waitForJob = async () => {
+      if (!jobId) return;
+      const deadline = Date.now() + 15e3;
+      while (Date.now() < deadline) {
+        try {
+          const jobs = await api("/api/jobs");
+          const items = jobs && Array.isArray(jobs.items) ? jobs.items : [];
+          const j = items.find((x) => String(x?.id || "") === jobId);
+          const st = j ? String(j.status || "") : "";
+          if (st === "done" || st === "failed" || st === "cancelled") return;
+        } catch {
+        }
+        await new Promise((r) => window.setTimeout(r, 250));
+      }
+    };
+    await waitForJob();
+    await loadMultiverse().catch(() => {
+    });
+  }
+}
+function applyUniverseTransform(ctx) {
+  const v = state.uni.view;
+  ctx.setTransform(v.scale, 0, 0, v.scale, v.tx, v.ty);
+}
+function cssVar(name, fallback) {
+  try {
+    const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    return v || fallback;
+  } catch {
+    return fallback;
+  }
+}
+function parseRgbTriplet(s) {
+  const t = String(s || "").trim();
+  const m = /^#([0-9a-f]{6})$/i.exec(t);
+  if (m) {
+    const hex = m[1].toLowerCase();
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return { r, g, b };
+  }
+  const m2 = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(t);
+  if (m2) return { r: Number(m2[1]), g: Number(m2[2]), b: Number(m2[3]) };
+  return { r: 0, g: 0, b: 0 };
+}
+function rgbaFromCssVar(name, alpha, fallbackHex = "#000000") {
+  const { r, g, b } = parseRgbTriplet(cssVar(name, fallbackHex));
+  const a = Math.max(0, Math.min(1, Number(alpha)));
+  return `rgba(${r},${g},${b},${a})`;
+}
+function refreshCanvasSize(canvas) {
+  const rect = canvas.getBoundingClientRect();
+  const w = Math.max(2, Math.floor(rect.width));
+  const h = Math.max(2, Math.floor(rect.height));
+  const dpr = Math.max(1, Math.min(3, window.devicePixelRatio || 1));
+  const bw = Math.floor(w * dpr);
+  const bh = Math.floor(h * dpr);
+  if (canvas.width !== bw) canvas.width = bw;
+  if (canvas.height !== bh) canvas.height = bh;
+}
+function screenToWorld(x, y) {
+  const v = state.uni.view;
+  const s = Number(v.scale || 1) || 1;
+  return { x: (x - Number(v.tx || 0)) / s, y: (y - Number(v.ty || 0)) / s };
+}
+function flattenNodes(root) {
+  const out = [];
+  const walk = (n, depth, parentId) => {
+    if (!n) return;
+    out.push({
+      id: String(n.id || ""),
+      name: String(n.name || ""),
+      level: String(n.level || ""),
+      topic: String(n.topic || ""),
+      depth,
+      parentId: parentId || null,
+      childIds: Array.isArray(n.children) ? n.children.map((c) => String(c.id || "")) : []
+    });
+    const kids = Array.isArray(n.children) ? n.children : [];
+    for (const k of kids) walk(k, depth + 1, String(n.id || ""));
+  };
+  walk(root, 0, null);
+  return out.filter((x) => x.id);
+}
+function flattenFlowNodes(spec) {
+  const bp = spec && (spec.blueprint || spec.flowBlueprint || spec.flow?.blueprint) ? spec.blueprint || spec.flowBlueprint || spec.flow?.blueprint : null;
+  const nodesRaw = bp && Array.isArray(bp.nodes) ? bp.nodes : [];
+  const edgesRaw = bp && Array.isArray(bp.edges) ? bp.edges : [];
+  const wf = spec && (spec.workflow || spec.flowWorkflow || spec.flow?.workflow) ? spec.workflow || spec.flowWorkflow || spec.flow?.workflow : null;
+  const wfSteps = wf && Array.isArray(wf.phases) ? wf.phases.flatMap((p) => Array.isArray(p?.steps) ? p.steps : []) : [];
+  const stepById = /* @__PURE__ */ new Map();
+  for (const s of wfSteps) {
+    const id = String(s?.id || "").trim();
+    if (id) stepById.set(id, s);
+  }
+  const inDeg = /* @__PURE__ */ new Map();
+  const outDeg = /* @__PURE__ */ new Map();
+  for (const n of nodesRaw) {
+    const id = String(n?.id || "").trim();
+    if (!id) continue;
+    inDeg.set(id, 0);
+    outDeg.set(id, 0);
+  }
+  for (const e of edgesRaw) {
+    const from = String(e?.from || "").trim();
+    const to = String(e?.to || "").trim();
+    if (!from || !to) continue;
+    inDeg.set(to, (inDeg.get(to) ?? 0) + 1);
+    outDeg.set(from, (outDeg.get(from) ?? 0) + 1);
+  }
+  const startIds = Array.from(inDeg.entries()).filter(([, d]) => d === 0).map(([id]) => id).sort((a, b) => a.localeCompare(b));
+  const endIds = Array.from(outDeg.entries()).filter(([, d]) => d === 0).map(([id]) => id).sort((a, b) => a.localeCompare(b));
+  const nodes = nodesRaw.map((n) => {
+    const id = String(n?.id || "").trim();
+    const title = String(n?.title || "").trim();
+    const lane = String(n?.lane || "").trim();
+    const type = String(n?.type || "").trim();
+    const actionId = String(n?.actionId || "").trim();
+    const step = actionId ? stepById.get(actionId) : null;
+    const cmd = step && step.slash && typeof step.slash.cmd === "string" ? String(step.slash.cmd).trim() : "";
+    const hasWhen = Boolean(step && step.when);
+    const checks = step && step.input && typeof step.input === "object" ? step.input.checks : null;
+    const hasChecks = Array.isArray(checks) && checks.length > 0;
+    const fix = step && step.input && typeof step.input === "object" ? step.input.fix : null;
+    const maxFixAttempts = fix && (typeof fix.maxAttempts === "number" || typeof fix.maxAttempts === "string") ? Math.max(0, Math.min(5, Math.floor(Number(fix.maxAttempts)))) : 0;
+    const reconsiderStepIds = fix && typeof fix === "object" && fix && fix.reconsider && typeof fix.reconsider === "object" ? Array.isArray(fix.reconsider.stepIds) ? fix.reconsider.stepIds.filter((x) => typeof x === "string").map((x) => String(x).trim()).filter(Boolean).slice(0, 8) : [] : [];
+    return {
+      id,
+      name: title || id,
+      level: lane ? `${lane}${type ? `/${type}` : ""}` : type || "",
+      topic: actionId ? `actionId=${actionId}${cmd ? ` cmd=/${cmd}` : ""}` : "",
+      depth: 0,
+      parentId: null,
+      childIds: [],
+      flow: { lane, type, actionId, cmd, hasWhen, hasChecks, maxFixAttempts, reconsiderStepIds },
+      isStart: startIds.includes(id),
+      isEnd: endIds.includes(id)
+    };
+  }).filter((x) => x.id);
+  const edges = edgesRaw.map((e) => ({
+    from: String(e?.from || "").trim(),
+    to: String(e?.to || "").trim(),
+    label: typeof e?.label === "string" ? String(e.label).trim() : "",
+    when: typeof e?.when === "string" ? String(e.when).trim() : ""
+  })).filter((e) => e.from && e.to);
+  return { nodes, edges, startIds, endIds };
+}
+function reorderFlowBucketsForBranching(params) {
+  const maxL = Math.max(0, ...Array.from(params.buckets.keys()));
+  const preds = /* @__PURE__ */ new Map();
+  const succs = /* @__PURE__ */ new Map();
+  for (const [l, arr] of params.buckets) {
+    for (const id of arr) {
+      if (!preds.has(id)) preds.set(id, []);
+      if (!succs.has(id)) succs.set(id, []);
+    }
+  }
+  for (const e of params.edges) {
+    if (!preds.has(e.to)) preds.set(e.to, []);
+    if (!succs.has(e.from)) succs.set(e.from, []);
+    preds.get(e.to).push(e.from);
+    succs.get(e.from).push(e.to);
+  }
+  for (const [k, v] of preds) preds.set(k, Array.from(new Set(v)).sort((a, b) => a.localeCompare(b)));
+  for (const [k, v] of succs) succs.set(k, Array.from(new Set(v)).sort((a, b) => a.localeCompare(b)));
+  const buckets = /* @__PURE__ */ new Map();
+  for (const [l, arr] of params.buckets) buckets.set(l, [...arr]);
+  const posIndex = /* @__PURE__ */ new Map();
+  const refreshPosIndex = () => {
+    posIndex.clear();
+    for (const [l, arr] of buckets) {
+      for (let i = 0; i < arr.length; i++) posIndex.set(arr[i], i);
+    }
+  };
+  refreshPosIndex();
+  const bary = (ids, neighborMap) => {
+    const scored = ids.map((id) => {
+      const ns = neighborMap.get(id) || [];
+      const vals = ns.map((n) => posIndex.get(n)).filter((x) => typeof x === "number");
+      const score = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : Number.POSITIVE_INFINITY;
+      return { id, score };
+    });
+    scored.sort((a, b) => a.score - b.score || a.id.localeCompare(b.id));
+    return scored.map((s) => s.id);
+  };
+  for (let l = 1; l <= maxL; l++) {
+    const arr = buckets.get(l) || [];
+    buckets.set(l, bary(arr, preds));
+    refreshPosIndex();
+  }
+  for (let l = maxL - 1; l >= 0; l--) {
+    const arr = buckets.get(l) || [];
+    buckets.set(l, bary(arr, succs));
+    refreshPosIndex();
+  }
+  return buckets;
+}
+function computeFlowTopo(nodes, edges) {
+  const ids = nodes.map((n) => String(n.id)).filter(Boolean);
+  const inDeg = new Map(ids.map((id) => [id, 0]));
+  const outs = new Map(ids.map((id) => [id, []]));
+  for (const e of edges) {
+    if (!inDeg.has(e.to)) inDeg.set(e.to, 0);
+    if (!outs.has(e.from)) outs.set(e.from, []);
+    inDeg.set(e.to, (inDeg.get(e.to) ?? 0) + 1);
+    outs.get(e.from).push(e.to);
+  }
+  for (const [k, v] of outs) {
+    v.sort((a, b) => a.localeCompare(b));
+    outs.set(k, v);
+  }
+  const levelById = /* @__PURE__ */ new Map();
+  const q = Array.from(inDeg.entries()).filter(([, d]) => d === 0).map(([id]) => id).sort((a, b) => a.localeCompare(b));
+  for (const id of q) levelById.set(id, 0);
+  const inDeg2 = new Map(inDeg);
+  const queue = [...q];
+  while (queue.length) {
+    const cur = queue.shift();
+    const curL = levelById.get(cur) ?? 0;
+    for (const nxt of outs.get(cur) || []) {
+      levelById.set(nxt, Math.max(levelById.get(nxt) ?? 0, curL + 1));
+      inDeg2.set(nxt, (inDeg2.get(nxt) ?? 0) - 1);
+      if ((inDeg2.get(nxt) ?? 0) === 0) {
+        queue.push(nxt);
+        queue.sort((a, b) => a.localeCompare(b));
+      }
+    }
+  }
+  const maxLevel = Math.max(0, ...ids.map((id) => levelById.get(id) ?? 0));
+  const buckets = /* @__PURE__ */ new Map();
+  for (const id of ids) {
+    const l = levelById.get(id) ?? 0;
+    const arr = buckets.get(l) || [];
+    arr.push(id);
+    buckets.set(l, arr);
+  }
+  for (const [l, arr] of buckets) {
+    arr.sort((a, b) => a.localeCompare(b));
+    buckets.set(l, arr);
+  }
+  const reordered = reorderFlowBucketsForBranching({ buckets, edges });
+  for (const [l, arr] of reordered) buckets.set(l, arr);
+  const bucketSizeById = /* @__PURE__ */ new Map();
+  for (const [, arr] of buckets) {
+    for (const id of arr) bucketSizeById.set(id, arr.length);
+  }
+  return { levelById, buckets, bucketSizeById, maxLevel };
+}
+function layoutFlowDAG(nodes, edges, opts) {
+  const topo = computeFlowTopo(nodes, edges);
+  const maxL = topo.maxLevel;
+  const canvas = $("uniCanvas");
+  const w = canvas.width;
+  const h = canvas.height;
+  const padX = Math.max(60, Math.floor(w * 0.06));
+  const padY = Math.max(60, Math.floor(h * 0.08));
+  const usableW = Math.max(1, w - padX * 2);
+  const usableH = Math.max(1, h - padY * 2);
+  const dir = opts?.dir === "vertical" ? "vertical" : "horizontal";
+  const dy = maxL > 0 ? usableH / maxL : 0;
+  const dx = maxL > 0 ? usableW / maxL : 0;
+  const pos = /* @__PURE__ */ new Map();
+  for (let l = 0; l <= maxL; l++) {
+    const arr = topo.buckets.get(l) || [];
+    if (!arr.length) continue;
+    if (dir === "vertical") {
+      const y = padY + dy * l;
+      const sx = arr.length > 1 ? usableW / (arr.length - 1) : 0;
+      for (let i = 0; i < arr.length; i++) {
+        const x = padX + (arr.length > 1 ? sx * i : usableW / 2);
+        pos.set(arr[i], { x, y });
+      }
+    } else {
+      const x = padX + dx * l;
+      const sy = arr.length > 1 ? usableH / (arr.length - 1) : 0;
+      for (let i = 0; i < arr.length; i++) {
+        const y = padY + (arr.length > 1 ? sy * i : usableH / 2);
+        pos.set(arr[i], { x, y });
+      }
+    }
+  }
+  return { pos, topo };
+}
+function layoutTree(nodes, centerId) {
+  const levels = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const d = Number.isFinite(n.depth) ? n.depth : 0;
+    const arr = levels.get(d) || [];
+    arr.push(n);
+    levels.set(d, arr);
+  }
+  for (const [d, arr] of levels) {
+    arr.sort((a, b) => String(a.id).localeCompare(String(b.id)));
+    levels.set(d, arr);
+  }
+  const maxD = Math.max(0, ...Array.from(levels.keys()));
+  const canvas = $("uniCanvas");
+  const w = canvas.width;
+  const h = canvas.height;
+  const cx = w / 2;
+  const cy = h / 2;
+  const r0 = Math.min(w, h) * 0.12;
+  const dr = Math.min(w, h) * 0.12;
+  const pos = /* @__PURE__ */ new Map();
+  for (let d = 0; d <= maxD; d++) {
+    const ring = levels.get(d) || [];
+    if (!ring.length) continue;
+    const r = d === 0 ? 0 : r0 + dr * (d - 1);
+    for (let i = 0; i < ring.length; i++) {
+      const a = ring.length === 1 ? -Math.PI / 2 : Math.PI * 2 * i / ring.length - Math.PI / 2;
+      pos.set(ring[i].id, { x: cx + Math.cos(a) * r, y: cy + Math.sin(a) * r });
+    }
+  }
+  if (centerId && pos.has(centerId)) pos.set(centerId, { x: cx, y: cy });
+  return pos;
+}
+function drawReplayEdges(ctx, pos, edges, count) {
+  const lim = Math.max(0, Math.min(edges.length, count));
+  ctx.strokeStyle = rgbaFromCssVar("--hot", 0.85, "#00ff66");
+  ctx.lineWidth = 2;
+  for (let i = 0; i < lim; i++) {
+    const e = edges[i];
+    const p1 = pos.get(e.from);
+    const p2 = pos.get(e.to);
+    if (!p1 || !p2) continue;
+    ctx.beginPath();
+    ctx.moveTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.stroke();
+  }
+}
+function pickLabel(base, maxLen) {
+  const s = String(base || "");
+  if (s.length <= maxLen) return s;
+  return s.slice(0, Math.max(0, maxLen - 1)).trimEnd() + "\u2026";
+}
+function placeLabel(ctx, x, y, r, text, used) {
+  const pad = 3;
+  const w = Math.ceil(ctx.measureText(text).width);
+  const h = 14;
+  const candidates = [
+    { dx: r + 8, dy: 4 },
+    { dx: -(r + 8 + w), dy: 4 },
+    { dx: -(w / 2), dy: -(r + 10) },
+    { dx: -(w / 2), dy: r + 16 }
+  ];
+  for (const c of candidates) {
+    const x1 = x + c.dx - pad;
+    const y1 = y + c.dy - h + 2 - pad;
+    const x2 = x + c.dx + w + pad;
+    const y2 = y + c.dy + 2 + pad;
+    const hit = used.some((b) => !(x2 < b.x1 || x1 > b.x2 || y2 < b.y1 || y1 > b.y2));
+    if (!hit) {
+      used.push({ x1, y1, x2, y2 });
+      return { tx: x + c.dx, ty: y + c.dy };
+    }
+  }
+  used.push({ x1: x + r + 8 - pad, y1: y + 4 - h + 2 - pad, x2: x + r + 8 + w + pad, y2: y + 4 + 2 + pad });
+  return { tx: x + r + 8, ty: y + 4 };
+}
+function placeLabelFlow(ctx, x, y, r, text, used) {
+  const pad = 3;
+  const w = Math.ceil(ctx.measureText(text).width);
+  const h = 14;
+  const candidates = [
+    { dx: -(w / 2), dy: -22 },
+    // above
+    { dx: -(w / 2), dy: r + 18 }
+    // below
+  ];
+  for (const c of candidates) {
+    const x1 = x + c.dx - pad;
+    const y1 = y + c.dy - h + 2 - pad;
+    const x2 = x + c.dx + w + pad;
+    const y2 = y + c.dy + 2 + pad;
+    const hit = used.some((b) => !(x2 < b.x1 || x1 > b.x2 || y2 < b.y1 || y1 > b.y2));
+    if (!hit) {
+      used.push({ x1, y1, x2, y2 });
+      return { tx: x + c.dx, ty: y + c.dy };
+    }
+  }
+  used.push({ x1: x - w / 2 - pad, y1: y - (r + 12) - h + 2 - pad, x2: x + w / 2 + pad, y2: y - (r + 12) + 2 + pad });
+  return { tx: x - w / 2, ty: y - (r + 12) };
+}
+function drawLabelWithSelection(ctx, params) {
+  const t = String(params.text || "");
+  if (!t) return;
+  if (!params.selected) {
+    ctx.fillText(t, params.tx, params.ty);
+    return;
+  }
+  const padX = 6;
+  const padY = 4;
+  const w = Math.ceil(ctx.measureText(t).width);
+  const h = 14;
+  const x = params.tx - padX;
+  const y = params.ty - h + 2 - padY;
+  const rr = 8;
+  ctx.save();
+  ctx.fillStyle = rgbaFromCssVar("--hot", 0.22, "#00ff66");
+  ctx.strokeStyle = rgbaFromCssVar("--hot", 0.45, "#00ff66");
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(x + rr, y);
+  ctx.lineTo(x + w + padX * 2 - rr, y);
+  ctx.quadraticCurveTo(x + w + padX * 2, y, x + w + padX * 2, y + rr);
+  ctx.lineTo(x + w + padX * 2, y + h + padY * 2 - rr);
+  ctx.quadraticCurveTo(x + w + padX * 2, y + h + padY * 2, x + w + padX * 2 - rr, y + h + padY * 2);
+  ctx.lineTo(x + rr, y + h + padY * 2);
+  ctx.quadraticCurveTo(x, y + h + padY * 2, x, y + h + padY * 2 - rr);
+  ctx.lineTo(x, y + rr);
+  ctx.quadraticCurveTo(x, y, x + rr, y);
+  ctx.closePath();
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+  ctx.save();
+  ctx.fillStyle = cssVar("--fg", "#e4fce4");
+  ctx.fillText(t, params.tx, params.ty);
+  ctx.restore();
+}
+function drawUniverse(spec, contexts) {
+  const canvas = $("uniCanvas");
+  refreshCanvasSize(canvas);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.save();
+  applyUniverseTransform(ctx);
+  if (spec && (spec.blueprint || spec.flowBlueprint || spec.flow?.blueprint)) {
+    const f = flattenFlowNodes(spec);
+    const flowDir = readFlowLayoutDir();
+    const showParallel = readFlowParallelEnabled();
+    const laid = layoutFlowDAG(f.nodes, f.edges, { dir: flowDir });
+    const pos2 = laid.pos;
+    state.uni.pos = pos2;
+    state.uni.nodes = f.nodes;
+    state.uni.edges = f.edges;
+    state.uni.flowMeta = laid.topo;
+    state.uni.seek = f.edges.length;
+    $("uniSeek").max = String(Math.max(0, f.edges.length));
+    $("uniSeek").value = String(f.edges.length);
+    const idSet = new Set(f.nodes.map((n) => String(n.id)));
+    const curSel = state.uni.selectedNodeId ? String(state.uni.selectedNodeId) : "";
+    if (!curSel || !idSet.has(curSel)) {
+      state.uni.selectedNodeId = f.startIds[0] || (f.nodes[0] ? String(f.nodes[0].id) : "");
+    }
+    const attemptByStepId = /* @__PURE__ */ new Map();
+    const evs2 = contexts && Array.isArray(contexts.task) ? contexts.task : [];
+    for (const ev of evs2) {
+      if (!ev || typeof ev !== "object") continue;
+      if (String(ev.kind || "") !== "agent.output") continue;
+      const pld = ev.payload;
+      const stepId = pld && typeof pld === "object" ? String(pld.stepId || "").trim() : "";
+      const attempt = pld && typeof pld === "object" ? Number(pld.attempt) : NaN;
+      if (!stepId) continue;
+      if (!Number.isFinite(attempt)) continue;
+      attemptByStepId.set(stepId, Math.max(attemptByStepId.get(stepId) ?? 0, Math.floor(attempt)));
+    }
+    const usedLabels2 = [];
+    if (showParallel) {
+      for (const [, arr] of laid.topo.buckets) {
+        if (arr.length <= 1) continue;
+        const p0 = pos2.get(arr[0]);
+        if (!p0) continue;
+        ctx.fillStyle = rgbaFromCssVar("--hot", 0.06, "#00ff66");
+        if (flowDir === "vertical") {
+          ctx.fillRect(-2e4, p0.y - 26, 4e4, 52);
+        } else {
+          ctx.fillRect(p0.x - 34, -2e4, 68, 4e4);
+        }
+      }
+    }
+    const drawArrow = (from, to, opts) => {
+      const a = Math.max(0.05, Math.min(1, Number(opts?.alpha ?? 0.25)));
+      ctx.strokeStyle = rgbaFromCssVar("--hot", a, "#00ff66");
+      ctx.lineWidth = 1;
+      ctx.setLineDash(opts?.dashed ? [6, 5] : []);
+      ctx.beginPath();
+      ctx.moveTo(from.x, from.y);
+      ctx.lineTo(to.x, to.y);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      const dx = to.x - from.x;
+      const dy = to.y - from.y;
+      const ang = Math.atan2(dy, dx);
+      const len = Math.sqrt(dx * dx + dy * dy);
+      if (len > 8) {
+        const ah = 8;
+        const tx = to.x - Math.cos(ang) * 10;
+        const ty = to.y - Math.sin(ang) * 10;
+        ctx.fillStyle = rgbaFromCssVar("--hot", a, "#00ff66");
+        ctx.beginPath();
+        ctx.moveTo(tx, ty);
+        ctx.lineTo(tx - Math.cos(ang - Math.PI / 6) * ah, ty - Math.sin(ang - Math.PI / 6) * ah);
+        ctx.lineTo(tx - Math.cos(ang + Math.PI / 6) * ah, ty - Math.sin(ang + Math.PI / 6) * ah);
+        ctx.closePath();
+        ctx.fill();
+      }
+    };
+    const drawSelfLoop = (p, r, label, alpha) => {
+      const a = Math.max(0.06, Math.min(1, Number(alpha)));
+      ctx.strokeStyle = rgbaFromCssVar("--muted", a, "#6fd76f");
+      ctx.lineWidth = 1;
+      ctx.setLineDash([6, 5]);
+      const x1 = p.x + r;
+      const y1 = p.y - r;
+      const x2 = p.x + r;
+      const y2 = p.y + r;
+      const cx = p.x + r + 26;
+      const cy = p.y;
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.quadraticCurveTo(cx, cy, x2, y2);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle = rgbaFromCssVar("--muted", a, "#6fd76f");
+      ctx.beginPath();
+      ctx.moveTo(x2, y2);
+      ctx.lineTo(x2 - 8, y2 - 3);
+      ctx.lineTo(x2 - 8, y2 + 3);
+      ctx.closePath();
+      ctx.fill();
+      if (label) {
+        ctx.save();
+        ctx.font = "11px " + getComputedStyle(document.documentElement).getPropertyValue("--mono");
+        ctx.fillStyle = rgbaFromCssVar("--muted", a, "#6fd76f");
+        ctx.fillText(pickLabel(label, 18), cx - 10, cy - 6);
+        ctx.restore();
+      }
+    };
+    for (const e of f.edges) {
+      const p1 = pos2.get(e.from);
+      const p2 = pos2.get(e.to);
+      if (!p1 || !p2) continue;
+      const hasCond = Boolean(String(e.when || "").trim());
+      drawArrow(p1, p2, { dashed: hasCond, alpha: 0.25 });
+      const elabel = String(e.label || "").trim() || String(e.when || "").trim();
+      if (elabel) {
+        const mx = (p1.x + p2.x) / 2;
+        const my = (p1.y + p2.y) / 2;
+        ctx.save();
+        ctx.font = "11px " + getComputedStyle(document.documentElement).getPropertyValue("--mono");
+        ctx.fillStyle = rgbaFromCssVar("--muted", 0.9, "#6fd76f");
+        ctx.fillText(pickLabel(elabel, 22), mx + 6, my - 6);
+        ctx.restore();
+      }
+    }
+    const loopInfo = [];
+    const reconsiderEdges = [];
+    const nodeIdByStepId = /* @__PURE__ */ new Map();
+    for (const n of f.nodes) {
+      const flowMeta = n.flow || {};
+      const stepId = flowMeta && typeof flowMeta.actionId === "string" ? String(flowMeta.actionId).trim() : "";
+      if (stepId) nodeIdByStepId.set(stepId, String(n.id));
+    }
+    const hit2 = [];
+    ctx.font = "12px " + getComputedStyle(document.documentElement).getPropertyValue("--mono");
+    for (const n of f.nodes) {
+      const p = pos2.get(n.id);
+      if (!p) continue;
+      const isSel = state.uni.selectedNodeId && String(state.uni.selectedNodeId) === String(n.id);
+      const r = 10;
+      const isStart = Boolean(n.isStart);
+      const isEnd = Boolean(n.isEnd);
+      const parN = laid.topo.bucketSizeById.get(String(n.id)) ?? 1;
+      const flowMeta = n.flow || {};
+      const hasWhen = Boolean(flowMeta.hasWhen);
+      const hasChecks = Boolean(flowMeta.hasChecks);
+      const maxFixAttempts = Number(flowMeta.maxFixAttempts || 0) || 0;
+      const reconsiderStepIds = Array.isArray(flowMeta.reconsiderStepIds) ? flowMeta.reconsiderStepIds : [];
+      const stepId = flowMeta && typeof flowMeta.actionId === "string" ? String(flowMeta.actionId).trim() : "";
+      const ranAttempts = stepId ? attemptByStepId.get(stepId) ?? 0 : 0;
+      if (maxFixAttempts > 0 || ranAttempts > 0) loopInfo.push({ nodeId: String(n.id), planned: maxFixAttempts, ran: ranAttempts });
+      for (const rid of reconsiderStepIds) {
+        if (typeof rid !== "string" || !rid.trim()) continue;
+        if (stepId && String(rid).trim() === stepId) continue;
+        const toNodeId = nodeIdByStepId.get(String(rid).trim());
+        if (!toNodeId) continue;
+        reconsiderEdges.push({ fromNodeId: String(n.id), toNodeId, label: "reconsider" });
+      }
+      ctx.fillStyle = cssVar("--canvasBg", "#030503");
+      ctx.strokeStyle = isStart ? cssVar("--hot", "#00ff66") : isEnd ? cssVar("--muted", "#6fd76f") : cssVar("--hot", "#00ff66");
+      ctx.lineWidth = isSel ? 4 : 2;
+      if (isSel) {
+        ctx.shadowColor = rgbaFromCssVar("--hot", 0.7, "#00ff66");
+        ctx.shadowBlur = 14;
+      } else {
+        ctx.shadowColor = "transparent";
+        ctx.shadowBlur = 0;
+      }
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+      ctx.shadowColor = "transparent";
+      ctx.shadowBlur = 0;
+      if (isStart) {
+        ctx.fillStyle = rgbaFromCssVar("--hot", 0.9, "#00ff66");
+        ctx.beginPath();
+        ctx.moveTo(p.x, p.y - (r + 8));
+        ctx.lineTo(p.x - 6, p.y - (r + 18));
+        ctx.lineTo(p.x + 6, p.y - (r + 18));
+        ctx.closePath();
+        ctx.fill();
+      }
+      if (isEnd) {
+        ctx.fillStyle = rgbaFromCssVar("--muted", 0.9, "#6fd76f");
+        ctx.beginPath();
+        ctx.moveTo(p.x, p.y + (r + 8));
+        ctx.lineTo(p.x - 6, p.y + (r + 18));
+        ctx.lineTo(p.x + 6, p.y + (r + 18));
+        ctx.closePath();
+        ctx.fill();
+      }
+      if (showParallel && parN > 1) {
+        ctx.save();
+        ctx.strokeStyle = rgbaFromCssVar("--muted", 0.9, "#6fd76f");
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(p.x - 3, p.y - 4);
+        ctx.lineTo(p.x - 3, p.y + 4);
+        ctx.moveTo(p.x + 3, p.y - 4);
+        ctx.lineTo(p.x + 3, p.y + 4);
+        ctx.stroke();
+        ctx.restore();
+      }
+      {
+        const marks = [];
+        if (hasWhen) marks.push("?");
+        if (hasChecks) marks.push("\u2713");
+        if (maxFixAttempts > 0) marks.push(`\u21BB${maxFixAttempts}`);
+        if (marks.length) {
+          ctx.save();
+          ctx.font = "11px " + getComputedStyle(document.documentElement).getPropertyValue("--mono");
+          ctx.fillStyle = rgbaFromCssVar("--muted", 0.95, "#6fd76f");
+          ctx.fillText(marks.join(" "), p.x + r + 6, p.y + 4);
+          ctx.restore();
+        }
+      }
+      if (ranAttempts > 0) {
+        ctx.save();
+        ctx.font = "11px " + getComputedStyle(document.documentElement).getPropertyValue("--mono");
+        ctx.fillStyle = rgbaFromCssVar("--hot", 0.95, "#00ff66");
+        ctx.fillText(`retry=${ranAttempts}`, p.x - r, p.y - (r + 10));
+        ctx.restore();
+      }
+      const label = pickLabel(String(n.name || n.id), 26);
+      ctx.fillStyle = cssVar("--text", "#e4fce4");
+      const lp = placeLabelFlow(ctx, p.x, p.y, r, label, usedLabels2);
+      drawLabelWithSelection(ctx, { tx: lp.tx, ty: lp.ty, text: label, selected: Boolean(isSel) });
+      hit2.push({ id: n.id, x: p.x, y: p.y, r });
+    }
+    state.uni.hit = hit2;
+    for (const e of reconsiderEdges) {
+      const p1 = pos2.get(e.fromNodeId);
+      const p2 = pos2.get(e.toNodeId);
+      if (!p1 || !p2) continue;
+      drawArrow(p1, p2, { dashed: true, alpha: 0.35 });
+      const mx = (p1.x + p2.x) / 2;
+      const my = (p1.y + p2.y) / 2;
+      ctx.save();
+      ctx.font = "11px " + getComputedStyle(document.documentElement).getPropertyValue("--mono");
+      ctx.fillStyle = rgbaFromCssVar("--muted", 0.95, "#6fd76f");
+      ctx.fillText("reconsider", mx + 6, my + 14);
+      ctx.restore();
+    }
+    for (const li of loopInfo) {
+      const p = pos2.get(li.nodeId);
+      if (!p) continue;
+      const label = li.ran > 0 ? `retry x${li.ran}` : li.planned > 0 ? `fix-loop x${li.planned}` : "";
+      drawSelfLoop(p, 12, label, li.ran > 0 ? 0.95 : 0.55);
+    }
+    $("inflPill").textContent = String(evs2.length || 0);
+    $("inflBox").textContent = evs2.slice(-80).map((e) => JSON.stringify(e)).join("\n");
+    ctx.restore();
+    return;
+  }
+  if (!spec || !spec.root) {
+    ctx.fillStyle = cssVar("--muted", "#6fd76f");
+    ctx.font = "14px " + getComputedStyle(document.documentElement).getPropertyValue("--mono");
+    ctx.fillText("Universe not loaded.", 20, 30);
+    ctx.restore();
+    return;
+  }
+  const nodes = flattenNodes(spec.root);
+  const centerId = String(spec.root.id || "");
+  const pos = layoutTree(nodes, centerId);
+  state.uni.pos = pos;
+  const treeEdges = [];
+  for (const n of nodes) if (n.parentId) treeEdges.push({ from: n.parentId, to: n.id });
+  const evs = contexts && Array.isArray(contexts.task) ? contexts.task : [];
+  const agents = spec && Array.isArray(spec.agents) ? spec.agents : [];
+  const agentToNode = new Map(agents.map((a) => [String(a.id || ""), String(a.nodeId || "")]));
+  const a2a = [];
+  for (const ev of evs) {
+    const kind = String(ev.kind || "");
+    if (kind === "a2a.envelope" || kind === "a2a.routed") {
+      const fromAgent = String(ev.actorId || "");
+      const toAgent = String((ev.payload || {}).toAgentId || "");
+      const from = agentToNode.get(fromAgent) || "";
+      const to = agentToNode.get(toAgent) || "";
+      if (from && to) a2a.push({ from, to, fromAgent, toAgent, ts: String(ev.ts || ""), kind });
+    }
+  }
+  state.uni.nodes = nodes;
+  state.uni.edges = a2a;
+  state.uni.seek = 0;
+  $("uniSeek").max = String(Math.max(0, a2a.length));
+  $("uniSeek").value = "0";
+  $("inflPill").textContent = String(evs.length || 0);
+  $("inflBox").textContent = evs.slice(-80).map((e) => JSON.stringify(e)).join("\n");
+  ctx.strokeStyle = rgbaFromCssVar("--hot", 0.18, "#00ff66");
+  ctx.lineWidth = 1;
+  for (const e of treeEdges) {
+    const p1 = pos.get(e.from);
+    const p2 = pos.get(e.to);
+    if (!p1 || !p2) continue;
+    ctx.beginPath();
+    ctx.moveTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.stroke();
+  }
+  const hit = [];
+  const usedLabels = [];
+  ctx.font = "12px " + getComputedStyle(document.documentElement).getPropertyValue("--mono");
+  for (const n of nodes) {
+    const p = pos.get(n.id);
+    if (!p) continue;
+    const isRoot = n.id === centerId;
+    const isSel = state.uni.selectedNodeId && String(state.uni.selectedNodeId) === String(n.id);
+    const r = isRoot ? 14 : 10;
+    ctx.fillStyle = cssVar("--canvasBg", "#030503");
+    ctx.strokeStyle = cssVar("--hot", "#00ff66");
+    ctx.lineWidth = isSel ? 4 : 2;
+    if (isSel) {
+      ctx.shadowColor = rgbaFromCssVar("--hot", 0.7, "#00ff66");
+      ctx.shadowBlur = 14;
+    } else {
+      ctx.shadowColor = "transparent";
+      ctx.shadowBlur = 0;
+    }
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.stroke();
+    if (isRoot) {
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, r - 5, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+    const labelFill = cssVar("--uniLabel", cssVar("--fg", "#b7ffb7"));
+    const labelStroke = cssVar("--uniLabelStroke", "transparent");
+    ctx.fillStyle = labelFill;
+    const baseLabel = n.name && n.id ? `${n.name} (${n.id})` : n.name || n.id;
+    const label = pickLabel(baseLabel, isSel ? 64 : 36);
+    const place = placeLabel(ctx, p.x, p.y, r, label, usedLabels);
+    if (labelStroke && labelStroke !== "transparent") {
+      ctx.save();
+      ctx.strokeStyle = labelStroke;
+      ctx.lineWidth = 3;
+      ctx.lineJoin = "round";
+      ctx.strokeText(label, place.tx, place.ty);
+      ctx.restore();
+    }
+    ctx.fillText(label, place.tx, place.ty);
+    hit.push({ id: n.id, x: p.x, y: p.y, r: r + 6 });
+  }
+  state.uni.hit = hit;
+  drawReplayEdges(ctx, pos, a2a, 0);
+  ctx.restore();
+}
+function updateUniverseReplay() {
+  drawUniverse(state.uni.spec, state.uni.contexts);
+  const canvas = $("uniCanvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  ctx.save();
+  applyUniverseTransform(ctx);
+  drawReplayEdges(ctx, state.uni.pos, state.uni.edges, state.uni.seek);
+  ctx.restore();
+}
+function renderNodeDetail(nodeId) {
+  const n = (state.uni.nodes || []).find((x) => x.id === nodeId);
+  if (!n) {
+    $("nodeDetail").textContent = "(none)";
+    return;
+  }
+  const isFlowSpec = Boolean(state.uni.spec && String(state.uni.spec.schemaVersion || "") === "maria_lite_universe_flow_gui_spec_v1");
+  const agents = !isFlowSpec && state.uni.spec && Array.isArray(state.uni.spec.agents) ? state.uni.spec.agents.filter((a) => String(a.nodeId || "") === nodeId) : [];
+  const topic = n.topic ? decodeVisibleNewlines(n.topic) : "";
+  const html = [];
+  html.push(`<div class="item"><div class="k">node</div><div class="v"><b>${escapeHtml(n.name || "(no name)")}</b> <span class="pill">${escapeHtml(n.id)}</span></div></div>`);
+  html.push(`<div class="item"><div class="k">level</div><div class="v">${escapeHtml(n.level || "")}</div></div>`);
+  if (isFlowSpec && n.flow) {
+    const f = n.flow || {};
+    html.push(`<div class="item"><div class="k">lane</div><div class="v">${escapeHtml(String(f.lane || ""))}</div></div>`);
+    html.push(`<div class="item"><div class="k">type</div><div class="v">${escapeHtml(String(f.type || ""))}</div></div>`);
+    if (String(f.actionId || "")) html.push(`<div class="item"><div class="k">actionId</div><div class="v">${escapeHtml(String(f.actionId || ""))}</div></div>`);
+    if (String(f.cmd || "")) html.push(`<div class="item"><div class="k">cmd</div><div class="v">${escapeHtml(String(f.cmd || ""))}</div></div>`);
+    if (typeof f.hasWhen === "boolean") html.push(`<div class="item"><div class="k">when</div><div class="v">${escapeHtml(f.hasWhen ? "yes" : "no")}</div></div>`);
+    if (typeof f.hasChecks === "boolean") html.push(`<div class="item"><div class="k">checks</div><div class="v">${escapeHtml(f.hasChecks ? "yes" : "no")}</div></div>`);
+    if (typeof f.maxFixAttempts === "number")
+      html.push(`<div class="item"><div class="k">fix</div><div class="v">${escapeHtml(String(f.maxFixAttempts || 0))} attempts</div></div>`);
+    if (Array.isArray(f.reconsiderStepIds) && f.reconsiderStepIds.length) {
+      html.push(
+        `<div class="item"><div class="k">reconsider</div><div class="v">${escapeHtml(
+          String(f.reconsiderStepIds.slice(0, 8).join(", "))
+        )}</div></div>`
+      );
+    }
+    const parN = state.uni.flowMeta && state.uni.flowMeta.bucketSizeById ? state.uni.flowMeta.bucketSizeById.get(String(n.id)) ?? 1 : 1;
+    if (Number(parN) > 1) {
+      html.push(`<div class="item"><div class="k">parallel</div><div class="v">${escapeHtml(`stage with ${Number(parN)} nodes`)}</div></div>`);
+    }
+    html.push(
+      `<div class="item"><div class="k">marks</div><div class="v">${escapeHtml(
+        `${n.isStart ? "start " : ""}${n.isEnd ? "end" : ""}`.trim() || "(none)"
+      )}</div></div>`
+    );
+    html.push(`<div class="item"><div class="k">context</div><div class="v"><div id="nodeCtx">(loading)</div></div></div>`);
+  }
+  if (topic) {
+    html.push(`<div class="item"><div class="k">topic</div><div class="v">${escapeHtml(topic)}</div></div>`);
+  }
+  if (agents.length) {
+    const lines = agents.slice(0, 60).map((a) => `- ${String(a.id || "")} :: ${String(a.name || "")} (${String(a.kind || "")}) :: ${String(a.role || "")}`);
+    html.push(`<div class="item"><div class="k">agents (${agents.length})</div><div class="v">${escapeHtml(lines.join("\n"))}</div></div>`);
+  }
+  $("nodeDetail").innerHTML = html.join('<div style="height:8px"></div>');
+  if (isFlowSpec && state.uni.spec && n.flow) {
+    const f = n.flow || {};
+    const actionId = String(f.actionId || "").trim();
+    const nodeId2 = String(n.id || "").trim();
+    const manifest = state.uni.spec?.manifest;
+    const rootDirRel = manifest && typeof manifest.rootDirRel === "string" ? String(manifest.rootDirRel).trim() : "";
+    const ctxBox = document.getElementById("nodeCtx");
+    if (ctxBox && rootDirRel) {
+      const candidates = [
+        actionId ? `${rootDirRel}/contexts/steps/${actionId}.md` : "",
+        actionId ? `${rootDirRel}/contexts/${actionId}.md` : "",
+        nodeId2 ? `${rootDirRel}/contexts/nodes/${nodeId2}.md` : "",
+        actionId ? `${rootDirRel}/contexts/steps/${actionId}.txt` : ""
+      ].filter(Boolean);
+      const key = candidates.join("|");
+      ctxBox.dataset.key = key;
+      (async () => {
+        for (const rel of candidates) {
+          const txt = await getMarkdownCached(rel);
+          if (!txt.trim()) continue;
+          const cur2 = document.getElementById("nodeCtx");
+          if (!cur2) return;
+          if (String(cur2.dataset.key || "") !== key) return;
+          cur2.innerHTML = `<div class="md">${mdToHtml(txt)}</div><div style="height:6px"></div><div class="pill">${escapeHtml(rel)}</div>`;
+          return;
+        }
+        const cur = document.getElementById("nodeCtx");
+        if (!cur) return;
+        if (String(cur.dataset.key || "") !== key) return;
+        cur.textContent = "(none)";
+      })().catch(() => {
+        const cur = document.getElementById("nodeCtx");
+        if (!cur) return;
+        if (String(cur.dataset.key || "") !== key) return;
+        cur.textContent = "(failed)";
+      });
+    }
+  }
+}
+function attachUniverseInteractions() {
+  const canvas = $("uniCanvas");
+  canvas.addEventListener(
+    "wheel",
+    (e) => {
+      e.preventDefault();
+      const rect = canvas.getBoundingClientRect();
+      const sx = (e.clientX - rect.left) * (canvas.width / rect.width);
+      const sy = (e.clientY - rect.top) * (canvas.height / rect.height);
+      const before = screenToWorld(sx, sy);
+      const factor = e.deltaY < 0 ? 1.08 : 1 / 1.08;
+      state.uni.view.scale = Math.max(0.35, Math.min(3.5, state.uni.view.scale * factor));
+      state.uni.view.tx = sx - before.x * state.uni.view.scale;
+      state.uni.view.ty = sy - before.y * state.uni.view.scale;
+      updateUniverseReplay();
+    },
+    { passive: false }
+  );
+  canvas.addEventListener("mousedown", (e) => {
+    state.uni.view.panning = true;
+    state.uni.view.panX = e.clientX;
+    state.uni.view.panY = e.clientY;
+  });
+  window.addEventListener("mousemove", (e) => {
+    if (!state.uni.view.panning) return;
+    const dx = e.clientX - state.uni.view.panX;
+    const dy = e.clientY - state.uni.view.panY;
+    state.uni.view.panX = e.clientX;
+    state.uni.view.panY = e.clientY;
+    state.uni.view.tx += dx;
+    state.uni.view.ty += dy;
+    updateUniverseReplay();
+  });
+  window.addEventListener("mouseup", () => {
+    state.uni.view.panning = false;
+  });
+  const dist = (a, b) => {
+    const dx = a.clientX - b.clientX;
+    const dy = a.clientY - b.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
+  canvas.addEventListener(
+    "touchstart",
+    (e) => {
+      if (e.touches.length === 1) {
+        state.uni.view.panning = true;
+        state.uni.view.panX = e.touches[0].clientX;
+        state.uni.view.panY = e.touches[0].clientY;
+      }
+      if (e.touches.length === 2) {
+        state.uni.view.panning = false;
+        state.uni.view.pinchDist = dist(e.touches[0], e.touches[1]);
+        state.uni.view.pinchScale = state.uni.view.scale;
+      }
+    },
+    { passive: true }
+  );
+  canvas.addEventListener(
+    "touchmove",
+    (e) => {
+      if (e.touches.length === 1 && state.uni.view.panning) {
+        const dx = e.touches[0].clientX - state.uni.view.panX;
+        const dy = e.touches[0].clientY - state.uni.view.panY;
+        state.uni.view.panX = e.touches[0].clientX;
+        state.uni.view.panY = e.touches[0].clientY;
+        state.uni.view.tx += dx;
+        state.uni.view.ty += dy;
+        updateUniverseReplay();
+        return;
+      }
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        const d = dist(e.touches[0], e.touches[1]) || 1;
+        const rect = canvas.getBoundingClientRect();
+        const mx = ((e.touches[0].clientX + e.touches[1].clientX) / 2 - rect.left) * (canvas.width / rect.width);
+        const my = ((e.touches[0].clientY + e.touches[1].clientY) / 2 - rect.top) * (canvas.height / rect.height);
+        const before = screenToWorld(mx, my);
+        const factor = d / (state.uni.view.pinchDist || d);
+        state.uni.view.scale = Math.max(0.35, Math.min(3.5, state.uni.view.pinchScale * factor));
+        state.uni.view.tx = mx - before.x * state.uni.view.scale;
+        state.uni.view.ty = my - before.y * state.uni.view.scale;
+        updateUniverseReplay();
+      }
+    },
+    { passive: false }
+  );
+  canvas.addEventListener(
+    "touchend",
+    () => {
+      state.uni.view.panning = false;
+      state.uni.view.pinchDist = 0;
+    },
+    { passive: true }
+  );
+  canvas.addEventListener("click", (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const sx = (e.clientX - rect.left) * (canvas.width / rect.width);
+    const sy = (e.clientY - rect.top) * (canvas.height / rect.height);
+    const w = screenToWorld(sx, sy);
+    for (const h of state.uni.hit || []) {
+      const dx = w.x - h.x;
+      const dy = w.y - h.y;
+      if (Math.sqrt(dx * dx + dy * dy) <= h.r) {
+        state.uni.selectedNodeId = h.id;
+        renderNodeDetail(h.id);
+        updateUniverseReplay();
+        return;
+      }
+    }
+  });
+}
+function extractNdcCodes(topic) {
+  const t = String(topic ?? "");
+  const codes = /* @__PURE__ */ new Set();
+  const ndcBlock = /\bNDC\b([^\n]{0,80})/gi;
+  let m;
+  while (m = ndcBlock.exec(t)) {
+    const frag = String(m[1] || "");
+    const nums = frag.match(/\b\d{3}\b/g) || [];
+    for (const n of nums) codes.add(n);
+    const slash = frag.match(/\b\d{3}(?:\/\d{3})+\b/g) || [];
+    for (const s of slash) for (const n of s.split("/")) codes.add(n);
+  }
+  const par = t.match(/\(\s*\d{3}(?:\s*\/\s*\d{3})*\s*\)/g) || [];
+  for (const p of par) for (const n of p.match(/\b\d{3}\b/g) || []) codes.add(n);
+  const slashAnywhere = t.match(/\b\d{3}\s*\/\s*\d{3}(?:\s*\/\s*\d{3})*/g) || [];
+  for (const s of slashAnywhere) for (const n of s.match(/\b\d{3}\b/g) || []) codes.add(n);
+  return Array.from(codes).sort();
+}
+function renderMultiverseTree() {
+  const q = String($("mvQuery").value || "").trim().toLowerCase();
+  const items = (state.multiverse || []).filter((u) => {
+    const s = String((u.universeName || "") + " " + (u.topic || "")).toLowerCase();
+    if (!q) return true;
+    const codes = Array.isArray(u.ndc3s) ? u.ndc3s : extractNdcCodes(u.topic);
+    return s.includes(q) || codes.some((c) => String(c).includes(q));
+  });
+  const majors = /* @__PURE__ */ new Map();
+  for (const u of items) {
+    const codes = Array.isArray(u.ndc3s) ? u.ndc3s : extractNdcCodes(u.topic);
+    if (!codes.length) {
+      const m = majors.get("other") || /* @__PURE__ */ new Map();
+      const arr = m.get("other") || [];
+      arr.push(u);
+      m.set("other", arr);
+      majors.set("other", m);
+      continue;
+    }
+    for (const code of codes) {
+      const maj = String(code || "")[0] || "other";
+      const m = majors.get(maj) || /* @__PURE__ */ new Map();
+      const arr = m.get(code) || [];
+      arr.push(u);
+      m.set(code, arr);
+      majors.set(maj, m);
+    }
+  }
+  const majorKeys = Array.from(majors.keys()).sort((a, b) => a === "other" ? 1 : b === "other" ? -1 : Number(a) - Number(b));
+  const box = $("mvTree");
+  box.innerHTML = "";
+  for (const maj of majorKeys) {
+    const m = majors.get(maj);
+    const legend = state.mvLegend || null;
+    const label = maj === "other" ? "other" : `NDC ${maj}xx${legend && legend[maj] ? " \u2014 " + legend[maj] : ""}`;
+    let count = 0;
+    for (const arr of m.values()) count += arr.length;
+    const hd = document.createElement("div");
+    hd.className = "item";
+    const open = state.nav.mvOpenMajor.has(maj);
+    hd.innerHTML = `<div class="k">${escapeHtml(label)} <span class="pill">${count}</span></div><div class="v">${open ? "\u25BC" : "\u25B6"}</div>`;
+    hd.addEventListener("click", () => {
+      if (state.nav.mvOpenMajor.has(maj)) state.nav.mvOpenMajor.delete(maj);
+      else state.nav.mvOpenMajor.add(maj);
+      renderMultiverseTree();
+    });
+    box.appendChild(hd);
+    if (!open) continue;
+    const codes = Array.from(m.keys()).sort((a, b) => String(a).localeCompare(String(b)));
+    for (const code of codes) {
+      const arr0 = m.get(code) || [];
+      const uniq = /* @__PURE__ */ new Map();
+      for (const u of arr0) uniq.set(String(u.universeName || ""), u);
+      const arr = Array.from(uniq.values());
+      arr.sort((a, b) => String(b.createdAt || "").localeCompare(String(a.createdAt || "")) || String(a.universeName || "").localeCompare(String(b.universeName || "")));
+      const openCodeKey = `${maj}:${code}`;
+      const openCode = state.nav.mvOpenCode.has(openCodeKey);
+      const ch = document.createElement("div");
+      ch.className = "item";
+      ch.innerHTML = `<div class="k">${escapeHtml(code)} <span class="pill">${arr.length}</span></div><div class="v">${openCode ? "\u25BC" : "\u25B6"}</div>`;
+      ch.addEventListener("click", () => {
+        if (state.nav.mvOpenCode.has(openCodeKey)) state.nav.mvOpenCode.delete(openCodeKey);
+        else state.nav.mvOpenCode.add(openCodeKey);
+        renderMultiverseTree();
+      });
+      box.appendChild(ch);
+      if (!openCode) continue;
+      for (const u of arr.slice(0, 120)) {
+        const it = document.createElement("div");
+        it.className = "item";
+        it.innerHTML = `<div class="k">[${escapeHtml(u.kind)}] ${escapeHtml(u.universeName)}</div><div class="v">topic=${escapeHtml(u.topic)}
+createdAt=${escapeHtml(u.createdAt)}
+root=${escapeHtml(u.rootDirRel || "")}</div>`;
+        it.addEventListener("click", () => {
+          $("uniKind").value = String(u.kind);
+          $("uniName").value = String(u.universeName);
+          setTab("universe");
+          $("uniLoad").click();
+        });
+        box.appendChild(it);
+      }
+    }
+  }
+}
+async function loadMultiverse() {
+  const mv = await api("/api/multiverse");
+  state.multiverse = mv.items || [];
+  state.mvLegend = mv && mv.legend || null;
+  $("mvPill").textContent = String(state.multiverse.length);
+  renderMultiverseTree();
+}
+function ndcFromKpPath(rel) {
+  const parts = String(rel || "").split("/").filter(Boolean);
+  const ndcIdx = parts.indexOf("ndc");
+  if (ndcIdx < 0) return null;
+  const code = parts[ndcIdx + 2] || "";
+  const maj = parts[ndcIdx + 1] || "";
+  const c = /^\d{3}$/.test(maj) ? maj : /^\d{3}$/.test(code) ? code : "";
+  return c || null;
+}
+function renderKpNdcTree(items) {
+  const majors = /* @__PURE__ */ new Map();
+  for (const p of items) {
+    const code = ndcFromKpPath(p.rel);
+    const key = code || "other";
+    const maj = key === "other" ? "other" : key[0];
+    const m = majors.get(maj) || /* @__PURE__ */ new Map();
+    const arr = m.get(key) || [];
+    arr.push(p.rel);
+    m.set(key, arr);
+    majors.set(maj, m);
+  }
+  const majorKeys = Array.from(majors.keys()).sort((a, b) => a === "other" ? 1 : b === "other" ? -1 : Number(a) - Number(b));
+  const box = $("kpList");
+  box.innerHTML = "";
+  for (const maj of majorKeys) {
+    const m = majors.get(maj);
+    const label = maj === "other" ? "other" : `NDC ${maj}xx`;
+    let count = 0;
+    for (const arr of m.values()) count += arr.length;
+    const hd = document.createElement("div");
+    hd.className = "item";
+    const open = state.nav.kpOpenMajor.has(maj);
+    hd.innerHTML = `<div class="k">${escapeHtml(label)} <span class="pill">${count}</span></div><div class="v">${open ? "\u25BC" : "\u25B6"}</div>`;
+    hd.addEventListener("click", () => {
+      if (state.nav.kpOpenMajor.has(maj)) state.nav.kpOpenMajor.delete(maj);
+      else state.nav.kpOpenMajor.add(maj);
+      renderKpNdcTree(items);
+    });
+    box.appendChild(hd);
+    if (!open) continue;
+    const codes = Array.from(m.keys()).sort((a, b) => String(a).localeCompare(String(b)));
+    for (const code of codes) {
+      const rels = (m.get(code) || []).slice().sort((a, b) => a.localeCompare(b));
+      const openCodeKey = `${maj}:${code}`;
+      const openCode = state.nav.kpOpenCode.has(openCodeKey);
+      const ch = document.createElement("div");
+      ch.className = "item";
+      ch.innerHTML = `<div class="k">${escapeHtml(code)} <span class="pill">${rels.length}</span></div><div class="v">${openCode ? "\u25BC" : "\u25B6"}</div>`;
+      ch.addEventListener("click", () => {
+        if (state.nav.kpOpenCode.has(openCodeKey)) state.nav.kpOpenCode.delete(openCodeKey);
+        else state.nav.kpOpenCode.add(openCodeKey);
+        renderKpNdcTree(items);
+      });
+      box.appendChild(ch);
+      if (!openCode) continue;
+      for (const rel of rels.slice(0, 200)) {
+        const it = document.createElement("div");
+        it.className = "item";
+        it.innerHTML = `<div class="k">yaml</div><div class="v">${escapeHtml(rel)}</div>`;
+        it.addEventListener("click", async () => {
+          const file = await api(`/api/file/text?path=${encodeURIComponent(rel)}&max=400000`);
+          $("kpViewPill").textContent = rel.split("/").slice(-1)[0] || "yaml";
+          $("kpViewer").textContent = typeof file?.text === "string" ? file.text : "";
+        });
+        box.appendChild(it);
+      }
+    }
+  }
+}
+function jsonToYaml(v, indent = 0) {
+  const pad = "  ".repeat(Math.max(0, indent));
+  if (v === null || v === void 0) return "null";
+  if (typeof v === "number" || typeof v === "boolean") return String(v);
+  if (typeof v === "string") {
+    const s = decodeVisibleNewlines(v);
+    if (s.includes("\n")) {
+      return "|\n" + s.split("\n").map((l) => pad + "  " + l).join("\n");
+    }
+    if (s === "" || /[:\[\]{}#,]|^\s|\s$/.test(s)) return JSON.stringify(s);
+    return s;
+  }
+  if (Array.isArray(v)) {
+    if (!v.length) return "[]";
+    return "\n" + v.map((x) => {
+      const yy = jsonToYaml(x, indent + 1);
+      if (typeof x === "object" && x !== null && !Array.isArray(x)) return pad + "- \n" + yy;
+      return pad + "- " + yy;
+    }).join("\n");
+  }
+  if (typeof v === "object") {
+    const obj = v;
+    const keys = Object.keys(obj);
+    if (!keys.length) return "{}";
+    const lines = [];
+    for (const k of keys) {
+      const vv = obj[k];
+      if (typeof vv === "object" && vv !== null) {
+        lines.push(`${pad}${k}:` + jsonToYaml(vv, indent + 1));
+      } else {
+        lines.push(`${pad}${k}: ${jsonToYaml(vv, 0)}`);
+      }
+    }
+    return "\n" + lines.join("\n");
+  }
+  return JSON.stringify(v);
+}
+function kpLeafKey(ndc3, sub) {
+  return `${ndc3}:${sub || ""}`;
+}
+async function loadKpLeaf(ndc3, sub) {
+  const key = kpLeafKey(ndc3, sub);
+  if (state.kpLeafItems.has(key)) return;
+  const url = `/api/kp/ndc/leaf?ndc3=${encodeURIComponent(ndc3)}${sub ? `&sub=${encodeURIComponent(sub)}` : ""}&limit=200`;
+  const out = await api(url);
+  const items = out.items || [];
+  state.kpLeafItems.set(key, items);
+}
+function renderKpNdcIndex() {
+  const meta = state.kpNdcMeta || null;
+  const legend = state.kpLegend || null;
+  const leaves = Array.isArray(meta?.leaves) ? meta.leaves : [];
+  const box = $("kpList");
+  box.innerHTML = "";
+  if (!leaves.length) {
+    box.textContent = "(no ndc index)";
+    return;
+  }
+  const byMajor = /* @__PURE__ */ new Map();
+  for (const leaf of leaves) {
+    const ndc3 = String(leaf?.ndc3 || "").trim();
+    if (!/^\d{3}$/.test(ndc3)) continue;
+    const sub = typeof leaf?.sub === "string" ? String(leaf.sub).trim() : "";
+    const maj = ndc3[0];
+    const m = byMajor.get(maj) || /* @__PURE__ */ new Map();
+    const arr = m.get(ndc3) || [];
+    arr.push({ ndc3, sub: sub || null, recordCount: Number(leaf?.recordCount || leaf?.textExtractedCount || 0) || 0 });
+    m.set(ndc3, arr);
+    byMajor.set(maj, m);
+  }
+  const majorKeys = Array.from(byMajor.keys()).sort((a, b) => Number(a) - Number(b));
+  for (const maj of majorKeys) {
+    const m = byMajor.get(maj);
+    let count = 0;
+    for (const arr of m.values()) count += arr.length;
+    const hd = document.createElement("div");
+    hd.className = "item";
+    const open = state.nav.kpOpenMajor.has(maj);
+    hd.innerHTML = `<div class="k">NDC ${escapeHtml(maj)}xx${legend && legend[maj] ? " \u2014 " + escapeHtml(legend[maj]) : ""} <span class="pill">${count}</span></div><div class="v">${open ? "\u25BC" : "\u25B6"}</div>`;
+    hd.addEventListener("click", () => {
+      if (state.nav.kpOpenMajor.has(maj)) state.nav.kpOpenMajor.delete(maj);
+      else state.nav.kpOpenMajor.add(maj);
+      renderKpNdcIndex();
+    });
+    box.appendChild(hd);
+    if (!open) continue;
+    const codes = Array.from(m.keys()).sort((a, b) => String(a).localeCompare(String(b)));
+    for (const ndc3 of codes) {
+      const subs = (m.get(ndc3) || []).slice().sort((a, b) => String(a.sub || "").localeCompare(String(b.sub || "")));
+      const openCodeKey = `${maj}:${ndc3}`;
+      const openCode = state.nav.kpOpenCode.has(openCodeKey);
+      const ch = document.createElement("div");
+      ch.className = "item";
+      ch.innerHTML = `<div class="k">${escapeHtml(ndc3)} <span class="pill">${subs.length}</span></div><div class="v">${openCode ? "\u25BC" : "\u25B6"}</div>`;
+      ch.addEventListener("click", () => {
+        if (state.nav.kpOpenCode.has(openCodeKey)) state.nav.kpOpenCode.delete(openCodeKey);
+        else state.nav.kpOpenCode.add(openCodeKey);
+        renderKpNdcIndex();
+      });
+      box.appendChild(ch);
+      if (!openCode) continue;
+      for (const leaf of subs) {
+        const sub = leaf.sub;
+        const leafKey = kpLeafKey(ndc3, sub);
+        const has = state.kpLeafItems.has(leafKey);
+        const leafOpenKey = `${ndc3}:${sub || ""}`;
+        const leafOpen = state.nav.kpOpenCode.has(leafOpenKey);
+        const lh = document.createElement("div");
+        lh.className = "item";
+        lh.innerHTML = `<div class="k">${escapeHtml(sub ? `${ndc3}/${sub}` : ndc3)} <span class="pill">${escapeHtml(String(leaf.recordCount || 0))}</span></div><div class="v">${leafOpen ? "\u25BC" : "\u25B6"}</div>`;
+        lh.addEventListener("click", () => {
+          if (state.nav.kpOpenCode.has(leafOpenKey)) state.nav.kpOpenCode.delete(leafOpenKey);
+          else {
+            state.nav.kpOpenCode.add(leafOpenKey);
+            if (!has) void loadKpLeaf(ndc3, sub).then(() => renderKpNdcIndex());
+          }
+          renderKpNdcIndex();
+        });
+        box.appendChild(lh);
+        if (!leafOpen) continue;
+        const items = state.kpLeafItems.get(leafKey) || [];
+        for (const rec of items.slice(0, 120)) {
+          const title = String(rec.entryTitle || rec.packTitle || rec.entryId || "");
+          const it = document.createElement("div");
+          it.className = "item";
+          it.innerHTML = `<div class="k">${escapeHtml(title)}</div><div class="v">packId=${escapeHtml(rec.packId || "")}
+entryId=${escapeHtml(rec.entryId || "")}
+ndc3=${escapeHtml(rec.ndc3 || "")}</div>`;
+          it.addEventListener("click", () => {
+            $("kpViewPill").textContent = String(rec.entryId || "yaml");
+            $("kpViewer").textContent = jsonToYaml(rec);
+          });
+          box.appendChild(it);
+        }
+      }
+    }
+  }
+}
+async function loadKp() {
+  const modeEl = document.getElementById("kpMode");
+  const mode = modeEl ? String(modeEl.value || "ndc") : "ndc";
+  const rootEl = document.getElementById("kpRoot");
+  if (rootEl) rootEl.disabled = mode !== "files";
+  if (mode === "ndc") {
+    const out2 = await api("/api/kp/ndc/meta");
+    state.kpNdcMeta = out2.meta || null;
+    state.kpLegend = out2 && out2.legend || null;
+    $("kpPill").textContent = String(state.kpNdcMeta && (state.kpNdcMeta.packCount || state.kpNdcMeta.totalRecords) || 0);
+    $("kpListPill").textContent = "ndc";
+    renderKpNdcIndex();
+    return;
+  }
+  const root = $("kpRoot").value;
+  const q = String($("kpQuery").value || "").trim().toLowerCase();
+  const out = await api(`/api/kp/list?root=${encodeURIComponent(root)}&limit=2000`);
+  let items = out.items || [];
+  if (q) items = items.filter((p) => String(p.rel || "").toLowerCase().includes(q));
+  state.kp = items;
+  $("kpPill").textContent = String(items.length);
+  $("kpListPill").textContent = String(items.length);
+  renderKpNdcTree(items);
+}
+async function refresh() {
+  if (state.ui.quitting) {
+    stopSpinner();
+    $("queuePill").textContent = "bye";
+    return;
+  }
+  try {
+    const meta = await api("/api/meta");
+    $("meta").textContent = `cwd=${meta.cwd}  server=${meta.url}`;
+  } catch {
+  }
+  await refreshAvatar();
+  try {
+    const runs = await api("/api/runs?limit=25&includeFiles=1");
+    const items = runs.items || [];
+    const filesByRunId = runs.filesByRunId || {};
+    const sig = items.map((r) => {
+      const runId = String(r?.runId || "");
+      const updatedAt = String(r?.updatedAt || "");
+      const status = String(r?.status || "");
+      const outLen = String(r?.lastOutput?.text || "").length;
+      const fLen = Array.isArray(filesByRunId[runId]) ? filesByRunId[runId].length : 0;
+      return `${runId}|${updatedAt}|${status}|${outLen}|${fLen}`;
+    }).join(";");
+    state.runs = items;
+    state.runFilesById = filesByRunId;
+    if (sig !== state.ui.lastRunsSig) {
+      state.ui.lastRunsSig = sig;
+      await renderRuns(state.runs);
+      await ensureDefaultRunDetail();
+    }
+  } catch {
+  }
+  try {
+    const logs = await api("/api/log/events?limit=120");
+    renderLogs(logs.items || []);
+  } catch {
+  }
+  try {
+    const runsHist = await api("/api/runs?limit=200");
+    const histItems = runsHist.items || [];
+    const next = histItems.map((r) => String(r?.input || "").trim()).filter(Boolean);
+    const prev = state.history.slice();
+    const oldIdx = state.histIdx;
+    const cur = oldIdx >= 0 && oldIdx < prev.length ? String(prev[oldIdx] || "") : "";
+    state.history = next;
+    if (oldIdx !== -1) {
+      const maxK = 8;
+      const prevK = prev.slice(0, Math.min(maxK, prev.length));
+      let bestOffset = -1;
+      let bestK = 0;
+      for (let off = 0; off <= Math.min(80, Math.max(0, next.length - 1)); off++) {
+        let k = 0;
+        for (; k < prevK.length; k++) {
+          if (String(next[off + k] || "") !== String(prevK[k] || "")) break;
+        }
+        if (k > bestK) {
+          bestK = k;
+          bestOffset = off;
+          if (bestK === prevK.length) break;
+        }
+      }
+      if (bestOffset >= 0 && bestK >= 1) {
+        const shifted = oldIdx + bestOffset;
+        state.histIdx = shifted >= 0 && shifted < next.length ? shifted : -1;
+      } else if (cur) {
+        const hits = [];
+        for (let i = 0; i < next.length; i++) if (String(next[i] || "") === cur) hits.push(i);
+        if (hits.length) {
+          let best = hits[0];
+          let bestD = Math.abs(best - oldIdx);
+          for (const h of hits) {
+            const d = Math.abs(h - oldIdx);
+            if (d < bestD) {
+              best = h;
+              bestD = d;
+            }
+          }
+          state.histIdx = best;
+        } else {
+          state.histIdx = -1;
+        }
+      } else {
+        state.histIdx = -1;
+      }
+    }
+    if (state.histIdx >= state.history.length) state.histIdx = -1;
+    renderHistory(state.history);
+  } catch {
+  }
+  try {
+    const jobs = await api("/api/jobs");
+    state.jobs = jobs.items || [];
+    renderJobs(state.jobs);
+  } catch {
+  }
+}
+async function loadUniverse() {
+  const kind = $("uniKind").value;
+  const name = $("uniName").value.trim();
+  if (!name) return;
+  try {
+    const spec = await api(`/api/universe/spec?kind=${encodeURIComponent(kind)}&name=${encodeURIComponent(name)}`);
+    state.uni.spec = spec.spec || null;
+  } catch {
+    state.uni.spec = null;
+  }
+  try {
+    const data = await api(`/api/universe/contexts?kind=${encodeURIComponent(kind)}&name=${encodeURIComponent(name)}&tail=600`);
+    state.uni.contexts = data.ok ? data : { task: [], common: [] };
+  } catch {
+    state.uni.contexts = { task: [], common: [] };
+  }
+  state.uni.seek = 0;
+  state.uni.selectedNodeId = String(state.uni.spec && state.uni.spec.root ? state.uni.spec.root.id : "");
+  updateUniverseReplay();
+  renderNodeDetail(state.uni.selectedNodeId || "");
+}
+function attach() {
+  $("tabs").addEventListener("click", (e) => {
+    const t = e.target?.closest ? e.target.closest(".tab") : null;
+    if (!t) return;
+    setTab(String(t.dataset.tab || "runs"));
+  });
+  const themeSel = document.getElementById("themeSel");
+  if (themeSel) {
+    themeSel.addEventListener("change", () => applyTheme(themeSel.value, { persist: true }));
+  }
+  const flowDirSel = document.getElementById("flowDirSel");
+  if (flowDirSel) {
+    flowDirSel.addEventListener("change", () => {
+      try {
+        localStorage.setItem("maria.gui.flowDir", flowDirSel.value === "vertical" ? "vertical" : "horizontal");
+      } catch {
+      }
+      api("/api/gui/state", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ state: { flowDir: flowDirSel.value === "vertical" ? "vertical" : "horizontal" } })
+      }).catch(() => {
+      });
+      updateUniverseReplay();
+    });
+  }
+  const flowParallelSel = document.getElementById("flowParallelSel");
+  if (flowParallelSel) {
+    flowParallelSel.addEventListener("change", () => {
+      try {
+        localStorage.setItem("maria.gui.flowParallel", flowParallelSel.value === "off" ? "off" : "on");
+      } catch {
+      }
+      api("/api/gui/state", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ state: { flowParallel: flowParallelSel.value === "off" ? "off" : "on" } })
+      }).catch(() => {
+      });
+      updateUniverseReplay();
+    });
+  }
+  $("cmdRun").addEventListener("click", () => void runCmd($("cmdInput").value));
+  const cmdInputEl = $("cmdInput");
+  let cmdComposing = false;
+  cmdInputEl.addEventListener("compositionstart", () => {
+    cmdComposing = true;
+  });
+  cmdInputEl.addEventListener("compositionend", () => {
+    cmdComposing = false;
+  });
+  cmdInputEl.addEventListener("keydown", (e) => {
+    const ke = e;
+    if (ke.key === "Enter") {
+      if (ke.isComposing === true || cmdComposing || ke.keyCode === 229) return;
+      if (ke.shiftKey) return;
+      ke.preventDefault();
+      void runCmd(cmdInputEl.value);
+      return;
+    }
+    if (ke.key === "ArrowUp") {
+      if (!state.history.length) return;
+      if (cmdInputEl.selectionStart !== cmdInputEl.selectionEnd) return;
+      if ((cmdInputEl.selectionStart ?? 0) > 0) return;
+      ke.preventDefault();
+      state.histIdx = Math.min(state.history.length - 1, state.histIdx + 1);
+      $("cmdInput").value = state.history[state.histIdx] || "";
+      return;
+    }
+    if (ke.key === "ArrowDown") {
+      if (!state.history.length) return;
+      if (cmdInputEl.selectionStart !== cmdInputEl.selectionEnd) return;
+      if ((cmdInputEl.selectionStart ?? 0) < cmdInputEl.value.length) return;
+      ke.preventDefault();
+      state.histIdx = Math.max(-1, state.histIdx - 1);
+      $("cmdInput").value = state.histIdx === -1 ? "" : state.history[state.histIdx] || "";
+    }
+  });
+  $("avatarBox").addEventListener("click", () => $("avatarFile").click());
+  $("avatarFile").addEventListener("change", async () => {
+    const f = $("avatarFile").files?.[0];
+    if (!f) return;
+    const buf = await f.arrayBuffer();
+    const bytesBase64 = arrayBufferToBase64(buf);
+    await api("/api/avatar", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ filename: f.name, mime: f.type || "image/png", bytesBase64 })
+    });
+    await refreshAvatar();
+    $("avatarFile").value = "";
+  });
+  $("uniLoad").addEventListener("click", () => void loadUniverse());
+  $("uniSeek").addEventListener("input", () => {
+    state.uni.seek = Number($("uniSeek").value || "0");
+    updateUniverseReplay();
+  });
+  $("uniPlay").addEventListener("click", () => {
+    if (state.uni.playing) return;
+    state.uni.playing = true;
+    const tick = () => {
+      if (!state.uni.playing) return;
+      const sp = Number($("uniSpeed").value || "1");
+      state.uni.seek = Math.min(state.uni.edges.length, state.uni.seek + sp);
+      $("uniSeek").value = String(state.uni.seek);
+      updateUniverseReplay();
+      if (state.uni.seek >= state.uni.edges.length) {
+        state.uni.playing = false;
+        return;
+      }
+      state.uni.timer = window.setTimeout(tick, 120);
+    };
+    tick();
+  });
+  $("uniPause").addEventListener("click", () => {
+    state.uni.playing = false;
+    if (state.uni.timer != null) window.clearTimeout(state.uni.timer);
+  });
+  attachUniverseInteractions();
+  $("mvQuery").addEventListener("input", () => renderMultiverseTree());
+  $("mvRefresh").addEventListener("click", () => void runCmd("/universe multiverse").then(() => void loadMultiverse()));
+  $("kpLoad").addEventListener("click", () => void loadKp());
+  const kpMode = document.getElementById("kpMode");
+  if (kpMode) kpMode.addEventListener("change", () => void loadKp());
+}
+async function boot() {
+  await initThemeFromServer();
+  await initFlowViewOptionsFromServer();
+  attach();
+  attachDragAndDropPath();
+  await refresh();
+  await loadMultiverse().catch(() => {
+  });
+  await loadKp().catch(() => {
+  });
+  state.ui.refreshTimer = window.setInterval(() => void refresh(), 2e3);
+}
+void boot();