@uniqbit/mate-core 0.18.5 → 1.0.0-canary.0

package/src/cli/commands/studio/views/studio-client/vault-tree.ts

@@ -0,0 +1,258 @@
+import { VAULT_TREE_STORAGE_KEY } from "./keys";
+import { failure, fetchMarkup, isPlainClick, moveInto, navigate, wireNavigation } from "./page";
+
+const FILTER_DELAY = 150;
+
+let displayedGeneration: number | null = null;
+let latestGeneration: number | null = null;
+let refreshSequence = 0;
+let filterSequence = 0;
+let filterTimer: ReturnType<typeof setTimeout> | undefined;
+let filterRequest: AbortController | null = null;
+
+function showTree(shown: boolean): void {
+  const root = document.documentElement;
+  if (shown) root.removeAttribute("data-vault-tree");
+  else root.setAttribute("data-vault-tree", "hidden");
+  const toggle = document.getElementById("vault-tree-toggle");
+  if (toggle) {
+    toggle.textContent = shown ? "Hide files" : "Show files";
+    toggle.setAttribute("aria-expanded", shown ? "true" : "false");
+  }
+  try {
+    localStorage.setItem(VAULT_TREE_STORAGE_KEY, shown ? "shown" : "hidden");
+  } catch {
+    /* a blocked web store only costs the preference, never the page */
+  }
+}
+
+function readGeneration(slot: Element | null): number | null {
+  const value = slot ? slot.getAttribute("data-vault-generation") : null;
+  return value === null || value === "" ? null : Number(value);
+}
+
+/** The indicator clears only once the displayed listing is as new as the newest change seen. */
+function showStale(): void {
+  const note = document.getElementById("vault-stale");
+  if (!note) return;
+  note.hidden = !(
+    latestGeneration !== null &&
+    displayedGeneration !== null &&
+    latestGeneration > displayedGeneration
+  );
+}
+
+function openedByViewer(): (string | null)[] {
+  return Array.from(document.querySelectorAll("details[data-vault-children-url][open]"), (folder) =>
+    folder.getAttribute("data-vault-dir"),
+  );
+}
+
+/** Swaps server-rendered parts into place; a refreshed tree drops loaded folders and reopens the viewer's. */
+function swapVaultSlots(markup: string): void {
+  const reopen = openedByViewer();
+  const parsed = new DOMParser().parseFromString(markup, "text/html");
+  parsed.querySelectorAll("[data-vault-slot]").forEach((slot) => {
+    const name = slot.getAttribute("data-vault-slot");
+    const target = document.querySelector(`[data-vault-slot="${name}"]`);
+    if (!target) return;
+    const node = document.importNode(slot, true) as Element;
+    target.replaceWith(node);
+    wireNavigation(node);
+    if (name !== "tree") return;
+    displayedGeneration = readGeneration(node);
+    node
+      .querySelectorAll<HTMLDetailsElement>("details[data-vault-children-url]")
+      .forEach((folder) => {
+        if (reopen.includes(folder.getAttribute("data-vault-dir"))) folder.open = true;
+      });
+  });
+  showStale();
+  runFilter();
+}
+
+function failVaultSlots(message: string): void {
+  document.querySelectorAll("[data-vault-slot][aria-busy]").forEach((slot) => {
+    slot.removeAttribute("aria-busy");
+    slot.textContent = message;
+  });
+}
+
+function loadChildren(folder: Element): void {
+  const url = folder.getAttribute("data-vault-children-url");
+  const container = folder.querySelector(".vault-children");
+  if (
+    !url ||
+    !container ||
+    folder.hasAttribute("data-vault-loaded") ||
+    folder.hasAttribute("data-vault-loading")
+  ) {
+    return;
+  }
+  folder.setAttribute("data-vault-loading", "");
+  fetchMarkup(url)
+    .then((markup) => {
+      moveInto(container, markup);
+      folder.setAttribute("data-vault-loaded", "");
+    })
+    .catch((error) => {
+      container.textContent = `This folder could not be loaded: ${failure(error)}`;
+    })
+    .finally(() => {
+      folder.removeAttribute("data-vault-loading");
+    });
+}
+
+function runFilter(): void {
+  const filter = document.getElementById("vault-filter") as HTMLInputElement | null;
+  const results = document.getElementById("vault-filter-results");
+  const panel = document.getElementById("vault-tree-panel");
+  const layout = document.querySelector("[data-vault-layout]");
+  if (!filter || !results || !panel || !layout) return;
+  clearTimeout(filterTimer);
+  if (filterRequest) filterRequest.abort();
+  const needle = filter.value.trim();
+  filterSequence += 1;
+  if (!needle) {
+    results.hidden = true;
+    results.replaceChildren();
+    panel.removeAttribute("data-vault-filtering");
+    return;
+  }
+  const url = new URL(layout.getAttribute("data-vault-filter-url") || "", location.href);
+  url.searchParams.set("q", needle);
+  const sequence = filterSequence;
+  filterRequest = typeof AbortController !== "undefined" ? new AbortController() : null;
+  fetchMarkup(url.toString(), filterRequest ? filterRequest.signal : undefined)
+    .then((markup) => {
+      if (sequence !== filterSequence) return;
+      moveInto(results, markup);
+      results.hidden = false;
+      panel.setAttribute("data-vault-filtering", "");
+    })
+    .catch((error) => {
+      if (sequence !== filterSequence || (error && error.name === "AbortError")) return;
+      results.textContent = `The filter could not run: ${failure(error)}`;
+      results.hidden = false;
+      panel.setAttribute("data-vault-filtering", "");
+    });
+}
+
+/** Replaces the tree, listing and filter results in place; the editor and terminal are left alone. */
+function refreshTree(): void {
+  const layout = document.querySelector("[data-vault-layout]");
+  const status = document.getElementById("vault-refresh-status");
+  const url = layout ? layout.getAttribute("data-vault-refresh-url") : null;
+  if (!url) return;
+  refreshSequence += 1;
+  const sequence = refreshSequence;
+  if (status) status.hidden = true;
+  fetchMarkup(url)
+    .then((markup) => {
+      if (sequence === refreshSequence) swapVaultSlots(markup);
+    })
+    .catch((error) => {
+      if (sequence !== refreshSequence || !status) return;
+      status.textContent = `The tree could not be refreshed: ${failure(error)}. Select Refresh tree to retry.`;
+      status.hidden = false;
+    });
+}
+
+function watchTreeChanges(layout: Element): void {
+  const url = layout.getAttribute("data-vault-changes-url");
+  if (!url || typeof EventSource === "undefined") return;
+  const changes = new EventSource(url);
+  changes.addEventListener("message", (message) => {
+    let event;
+    try {
+      event = JSON.parse(message.data);
+    } catch {
+      return;
+    }
+    if (!event || event.type !== "vault-tree-changed" || typeof event.generation !== "number") {
+      return;
+    }
+    if (latestGeneration === null || event.generation > latestGeneration) {
+      latestGeneration = event.generation;
+    }
+    showStale();
+  });
+}
+
+function wirePanel(panel: Element): void {
+  panel.addEventListener("click", (raw) => {
+    const event = raw as MouseEvent;
+    if (!isPlainClick(event)) return;
+    const target = event.target as Element | null;
+    const link =
+      target && target.closest ? target.closest<HTMLAnchorElement>("a[data-vault-entry]") : null;
+    if (!link) return;
+    event.preventDefault();
+    navigate(link.href, true);
+  });
+  panel.addEventListener(
+    "toggle",
+    (event) => {
+      const folder = event.target as HTMLDetailsElement | null;
+      if (
+        folder &&
+        folder.open &&
+        folder.matches &&
+        folder.matches("details[data-vault-children-url]")
+      ) {
+        loadChildren(folder);
+      }
+    },
+    true,
+  );
+}
+
+function wireTreeToggle(): void {
+  const toggle = document.getElementById("vault-tree-toggle");
+  if (!toggle) return;
+  toggle.hidden = false;
+  const hidden = document.documentElement.getAttribute("data-vault-tree") === "hidden";
+  toggle.textContent = hidden ? "Show files" : "Hide files";
+  toggle.setAttribute("aria-expanded", hidden ? "false" : "true");
+  toggle.addEventListener("click", () => {
+    showTree(document.documentElement.getAttribute("data-vault-tree") === "hidden");
+  });
+}
+
+export function wireVaultBrowser(): void {
+  displayedGeneration = null;
+  latestGeneration = null;
+  refreshSequence = 0;
+  filterSequence = 0;
+  filterTimer = undefined;
+  filterRequest = null;
+  const layout = document.querySelector("[data-vault-layout]");
+  if (!layout) return;
+  const panel = document.getElementById("vault-tree-panel");
+  displayedGeneration = readGeneration(document.querySelector('[data-vault-slot="tree"]'));
+  if (panel) wirePanel(panel);
+  const refresh = document.querySelector("form[data-vault-refresh]");
+  if (refresh) {
+    refresh.addEventListener("submit", (event) => {
+      event.preventDefault();
+      refreshTree();
+    });
+  }
+  const filter = document.getElementById("vault-filter");
+  if (filter) {
+    filter.hidden = false;
+    filter.addEventListener("input", () => {
+      clearTimeout(filterTimer);
+      filterTimer = setTimeout(runFilter, FILTER_DELAY);
+    });
+  }
+  wireTreeToggle();
+  watchTreeChanges(layout);
+  const deferred = layout.getAttribute("data-vault-view");
+  if (!deferred) return;
+  fetchMarkup(deferred)
+    .then(swapVaultSlots)
+    .catch((error) => {
+      failVaultSlots(`The files could not be listed: ${failure(error)}`);
+    });
+}

package/src/cli/commands/studio/views/studio-client.generated.ts

@@ -0,0 +1,2 @@
+// Generated by scripts/studio-client/build.ts from views/studio-client. Do not edit.
+export const STUDIO_CLIENT_BUNDLE = "(() => {\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/page.ts\n  var toastTimer;\n  function announce(message) {\n    const toast = document.getElementById(\"studio-toast\");\n    if (!toast)\n      return;\n    toast.textContent = message;\n    toast.setAttribute(\"data-shown\", \"true\");\n    clearTimeout(toastTimer);\n    toastTimer = setTimeout(() => {\n      toast.setAttribute(\"data-shown\", \"false\");\n    }, 1400);\n  }\n  function copy(text, label) {\n    if (typeof navigator === \"undefined\" || !navigator.clipboard || typeof navigator.clipboard.writeText !== \"function\") {\n      announce(\"copying is blocked in this browser\");\n      return Promise.resolve();\n    }\n    return Promise.resolve().then(() => navigator.clipboard.writeText(text)).then(() => {\n      announce(`copied ${label}`);\n    }, () => {\n      announce(\"copying is blocked in this browser\");\n    });\n  }\n  function failure(error) {\n    const message = error?.message;\n    return message ? message : String(error);\n  }\n  function fetchMarkup(url, signal) {\n    return fetch(url, { headers: { accept: \"text/html\" }, signal }).then((response) => {\n      if (!response.ok)\n        throw new Error(`status ${response.status}`);\n      return response.text();\n    });\n  }\n  function moveInto(container, markup) {\n    const parsed = new DOMParser().parseFromString(markup, \"text/html\");\n    container.replaceChildren(...Array.from(parsed.body.childNodes, (child) => document.importNode(child, true)));\n  }\n  var savePromise = null;\n  function pendingSave() {\n    return savePromise;\n  }\n  function setPendingSave(save) {\n    savePromise = save;\n  }\n  function editor() {\n    return document.getElementById(\"vault-editor\");\n  }\n  function dirty() {\n    const node = editor();\n    return !!node && node.value !== (node.getAttribute(\"data-vault-original\") || \"\");\n  }\n  function askBeforeNavigation() {\n    return !dirty() || window.confirm(\"Discard unsaved changes?\");\n  }\n  function guard() {\n    return (savePromise ?? Promise.resolve(true)).then((allowed) => allowed && askBeforeNavigation());\n  }\n  var showInPlace = null;\n  function setInPlaceNavigation(show) {\n    showInPlace = show;\n  }\n  function navigate(url, inPlace = false) {\n    guard().then((allowed) => {\n      if (!allowed)\n        return;\n      if (inPlace && showInPlace && showInPlace(url))\n        return;\n      location.assign(url);\n    });\n  }\n  function isPlainClick(event) {\n    return !(event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);\n  }\n  function navigationUrl(form, submitter) {\n    const target = new URL(form.action || location.href, location.href);\n    new FormData(form).forEach((value, key) => {\n      if (typeof value === \"string\")\n        target.searchParams.append(key, value);\n    });\n    const named = submitter;\n    if (named && named.name && named.value)\n      target.searchParams.set(named.name, named.value);\n    return target.toString();\n  }\n  function wireNavigation(scope) {\n    (scope || document).querySelectorAll('form[method=\"get\"]:not([data-vault-refresh])').forEach((form) => {\n      form.addEventListener(\"submit\", (event) => {\n        event.preventDefault();\n        navigate(navigationUrl(form, event.submitter), form.hasAttribute(\"data-vault-open\"));\n      });\n      form.querySelectorAll(\"select\").forEach((select) => {\n        select.addEventListener(\"change\", () => {\n          navigate(navigationUrl(form));\n        });\n      });\n    });\n  }\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/actions.ts\n  var AGENT_ORDER = [\"claude\", \"opencode\"];\n  function wireCopyControls() {\n    document.querySelectorAll(\"[data-copy]\").forEach((node) => {\n      node.addEventListener(\"click\", () => {\n        const text = node.getAttribute(\"data-copy\");\n        if (text)\n          copy(text, node.getAttribute(\"data-copy-label\") || \"prompt\");\n      });\n    });\n  }\n  function copyPromptFor(node) {\n    const viewed = document.documentElement.getAttribute(\"data-agent-viewed\");\n    const order = viewed ? [viewed, ...AGENT_ORDER] : AGENT_ORDER;\n    for (const agent of order) {\n      const text = node.getAttribute(`data-prompt-${agent}`);\n      if (text)\n        return text;\n    }\n    return null;\n  }\n  function wireDelegatedActions() {\n    if (typeof document.addEventListener !== \"function\")\n      return;\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target;\n      if (!target || typeof target.closest !== \"function\")\n        return;\n      const run = target.closest(\"[data-studio-action]\");\n      if (run) {\n        const agents = (run.getAttribute(\"data-studio-agents\") || \"\").split(\" \").filter(Boolean);\n        document.dispatchEvent(new CustomEvent(\"studio:terminal-action\", {\n          detail: {\n            action: run.getAttribute(\"data-studio-action\"),\n            subject: run.getAttribute(\"data-studio-subject\"),\n            agents\n          }\n        }));\n        return;\n      }\n      const prompt = target.closest(\"[data-studio-copy-prompt]\");\n      if (prompt) {\n        const text = copyPromptFor(prompt);\n        if (text)\n          copy(text, \"prompt\");\n      }\n    });\n  }\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/keys.ts\n  var THEME_STORAGE_KEY = \"mate-studio-theme\";\n  var COMPANION_STORAGE_KEY = \"mate-studio-companion\";\n  var VAULT_TREE_STORAGE_KEY = \"mate-studio-vault-tree\";\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/companion.ts\n  function rememberCompanion() {\n    const scope = document.querySelector(\"[data-companion]\");\n    const current = scope && scope.getAttribute(\"data-companion\");\n    if (!current)\n      return;\n    try {\n      localStorage.setItem(COMPANION_STORAGE_KEY, current);\n    } catch {}\n  }\n\n  // packages/mate-core/src/cli/commands/studio/routes.ts\n  var REPORT_VIEW_PREFIX = \"/studio/reports/\";\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/theme.ts\n  var THEME_CYCLE = [\"system\", \"dark\", \"light\"];\n  function readTheme() {\n    try {\n      const stored = localStorage.getItem(THEME_STORAGE_KEY);\n      return stored && THEME_CYCLE.includes(stored) ? stored : \"system\";\n    } catch {\n      return \"system\";\n    }\n  }\n  function storeTheme(theme) {\n    try {\n      localStorage.setItem(THEME_STORAGE_KEY, theme);\n    } catch {}\n  }\n  var theme = \"system\";\n  var onThemeChange = null;\n  function currentTheme() {\n    return theme;\n  }\n  function setThemeListener(listener) {\n    onThemeChange = listener;\n  }\n  function applyTheme(next) {\n    theme = next;\n    if (onThemeChange)\n      onThemeChange();\n    const root = document.documentElement;\n    if (next === \"system\")\n      root.removeAttribute(\"data-theme\");\n    else\n      root.setAttribute(\"data-theme\", next);\n    const control = document.getElementById(\"studio-theme\");\n    if (control) {\n      control.textContent = `Theme: ${next}`;\n      control.setAttribute(\"data-theme-state\", next);\n    }\n  }\n  function wireTheme() {\n    onThemeChange = null;\n    applyTheme(readTheme());\n  }\n  function wireThemeToggle() {\n    const toggle = document.getElementById(\"studio-theme\");\n    if (!toggle)\n      return;\n    toggle.addEventListener(\"click\", () => {\n      const next = THEME_CYCLE[(THEME_CYCLE.indexOf(theme) + 1) % THEME_CYCLE.length];\n      applyTheme(next);\n      storeTheme(next);\n    });\n  }\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/reports.ts\n  function reportHash() {\n    const match = /(?:^|[#&])report=([0-9a-f]{32})/.exec(location.hash || \"\");\n    return match ? match[1] : null;\n  }\n  function wireReports() {\n    setThemeListener(null);\n    const shell = document.querySelector(\"[data-reports-events-url]\");\n    if (!shell || typeof EventSource === \"undefined\")\n      return;\n    const current = shell.getAttribute(\"data-companion\");\n    const listUrl = shell.getAttribute(\"data-reports-url\");\n    const viewUrl = shell.getAttribute(\"data-reports-view-url\");\n    const list = document.getElementById(\"reports-list\");\n    const frame = document.getElementById(\"reports-frame\");\n    const open = document.getElementById(\"reports-open\");\n    const empty = document.getElementById(\"reports-empty\");\n    const template = document.getElementById(\"reports-item-template\");\n    const badge = document.getElementById(\"reports-badge\");\n    const toast = document.getElementById(\"reports-toast\");\n    const toastTitle = document.getElementById(\"reports-toast-title\");\n    const toastOpen = document.getElementById(\"reports-toast-open\");\n    let shown = null;\n    let toastTimeout;\n    function show(id) {\n      if (!frame)\n        return;\n      shown = id;\n      const theme = currentTheme();\n      const src = `${REPORT_VIEW_PREFIX}${id}${theme === \"system\" ? \"\" : `?scheme=${theme}`}`;\n      frame.src = src;\n      frame.hidden = false;\n      if (open) {\n        open.href = src;\n        open.hidden = false;\n      }\n      if (list) {\n        list.querySelectorAll(\"button[data-report-id]\").forEach((button) => {\n          button.setAttribute(\"aria-pressed\", button.getAttribute(\"data-report-id\") === id ? \"true\" : \"false\");\n        });\n      }\n      try {\n        history.replaceState(null, \"\", `#report=${id}`);\n      } catch {}\n    }\n    function render(reports) {\n      const first = template && template.content.firstElementChild;\n      if (!list || !template || !first)\n        return;\n      list.replaceChildren();\n      if (empty)\n        empty.hidden = reports.length > 0;\n      for (const report of reports) {\n        const item = first.cloneNode(true);\n        const button = item.querySelector(\"button\");\n        button.setAttribute(\"data-report-id\", report.id);\n        button.setAttribute(\"aria-pressed\", report.id === shown ? \"true\" : \"false\");\n        item.querySelector(\"[data-report-title]\").textContent = report.title;\n        item.querySelector(\"[data-report-time]\").textContent = new Date(report.createdAt).toLocaleString();\n        button.addEventListener(\"click\", () => show(report.id));\n        list.append(item);\n      }\n      if (reports.length === 0 || reports.some((report) => report.id === shown))\n        return;\n      const named = reportHash();\n      show(reports.some((report) => report.id === named) ? named : reports[0].id);\n    }\n    function refreshList() {\n      if (!list || !listUrl)\n        return;\n      fetch(listUrl, { headers: { accept: \"application/json\" } }).then((response) => {\n        if (!response.ok)\n          throw new Error(`status ${response.status}`);\n        return response.json();\n      }).then((body) => render(body.reports || [])).catch(() => {});\n    }\n    function announceReport(event) {\n      if (badge)\n        badge.hidden = false;\n      if (!toast || !toastTitle)\n        return;\n      toastTitle.textContent = `New report: ${event.title}`;\n      if (toastOpen && viewUrl)\n        toastOpen.href = `${viewUrl}#report=${event.id}`;\n      toast.setAttribute(\"data-shown\", \"true\");\n      clearTimeout(toastTimeout);\n      toastTimeout = setTimeout(() => toast.setAttribute(\"data-shown\", \"false\"), 1e4);\n    }\n    setThemeListener(() => {\n      if (shown)\n        show(shown);\n    });\n    const events = new EventSource(shell.getAttribute(\"data-reports-events-url\"));\n    events.addEventListener(\"open\", refreshList);\n    events.addEventListener(\"message\", (message) => {\n      let event;\n      try {\n        event = JSON.parse(message.data);\n      } catch {\n        return;\n      }\n      if (!event || event.type !== \"report-published\" || event.companion !== current)\n        return;\n      if (list)\n        refreshList();\n      else\n        announceReport(event);\n    });\n  }\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/panels.ts\n  function wireSelectPanels({ root, select, panel, hidePanels }) {\n    document.querySelectorAll(`[${root}]`).forEach((scope) => {\n      const control = scope.querySelector(`[${select}]`);\n      if (!control)\n        return;\n      const panels = scope.querySelectorAll(`[${panel}]`);\n      function show() {\n        panels.forEach((node) => {\n          const active = node.getAttribute(panel) === control.value;\n          node.setAttribute(\"data-active\", active ? \"true\" : \"false\");\n          if (hidePanels)\n            node.setAttribute(\"aria-hidden\", active ? \"false\" : \"true\");\n        });\n      }\n      control.addEventListener(\"change\", show);\n      show();\n    });\n  }\n  function wireWorkflowSchemaSelect() {\n    wireSelectPanels({\n      root: \"data-workflow-schema-root\",\n      select: \"data-workflow-schema-select\",\n      panel: \"data-workflow-schema-panel\",\n      hidePanels: false\n    });\n  }\n  function wireSkillsSelect() {\n    wireSelectPanels({\n      root: \"data-skills-root\",\n      select: \"data-skills-select\",\n      panel: \"data-skill-panel\",\n      hidePanels: true\n    });\n  }\n  function markSelectedStage() {\n    document.querySelectorAll(\"a[data-map-stage]\").forEach((link) => {\n      if (link.getAttribute(\"href\") === location.hash)\n        link.setAttribute(\"aria-current\", \"true\");\n      else\n        link.removeAttribute(\"aria-current\");\n    });\n  }\n  function wireWorkflowStageSelection() {\n    if (!document.querySelector(\"a[data-map-stage]\"))\n      return;\n    window.addEventListener(\"hashchange\", markSelectedStage);\n    markSelectedStage();\n  }\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/vault-editor.ts\n  function status(message) {\n    const node = document.getElementById(\"vault-status\");\n    if (node)\n      node.textContent = message;\n  }\n  function setIncoming(event) {\n    const box = document.getElementById(\"vault-incoming\");\n    const content = document.getElementById(\"vault-incoming-content\");\n    const recover = document.getElementById(\"vault-recover\");\n    if (!box || !content || !recover)\n      return;\n    box.hidden = false;\n    content.textContent = event.content || \"\";\n    recover.setAttribute(\"data-vault-content\", event.content || \"\");\n    recover.setAttribute(\"data-vault-token\", event.token || \"\");\n  }\n  function acceptIncoming(event) {\n    const node = editor();\n    if (!node)\n      return;\n    node.value = event.content || \"\";\n    node.setAttribute(\"data-vault-original\", node.value);\n    if (event.token)\n      node.setAttribute(\"data-vault-token\", event.token);\n    const box = document.getElementById(\"vault-incoming\");\n    if (box)\n      box.hidden = true;\n    status(\"incoming version loaded into the editor\");\n  }\n  function save(node, hooks) {\n    if (pendingSave())\n      return;\n    const companion = document.querySelector(\"[data-companion]\");\n    const body = {\n      companion: companion ? companion.getAttribute(\"data-companion\") : \"\",\n      path: node.getAttribute(\"data-vault-path\"),\n      content: node.value,\n      token: node.getAttribute(\"data-vault-token\")\n    };\n    const request = fetch(\"/api/vault/save\", {\n      method: \"POST\",\n      headers: { \"content-type\": \"application/json\" },\n      body: JSON.stringify(body)\n    }).then((response) => response.json().then((result) => {\n      if (!response.ok) {\n        if (response.status === 409)\n          setIncoming(result);\n        status(result.reason || \"save refused\");\n        return false;\n      }\n      node.setAttribute(\"data-vault-token\", result.token || \"\");\n      node.setAttribute(\"data-vault-original\", node.value);\n      status(\"saved\");\n      hooks.saved();\n      return true;\n    })).catch(() => {\n      status(\"save failed\");\n      return false;\n    }).finally(() => {\n      setPendingSave(null);\n    });\n    setPendingSave(request);\n  }\n  var stream = null;\n  function followStream(eventsUrl, node, hooks) {\n    const events = new EventSource(eventsUrl);\n    stream = events;\n    events.addEventListener(\"message\", (message) => {\n      let event;\n      try {\n        event = JSON.parse(message.data);\n      } catch {\n        return;\n      }\n      if (event.kind === \"removed\") {\n        status(\"this file no longer exists on disk\");\n        return;\n      }\n      if (!node) {\n        hooks.changed();\n        return;\n      }\n      if (event.kind === \"overwritten\") {\n        setIncoming(event);\n        status(\"a version was overwritten; its content is available below\");\n        return;\n      }\n      if (dirty()) {\n        setIncoming(event);\n        status(\"the file changed on disk; unsaved content is still in the editor\");\n        return;\n      }\n      node.value = event.content || \"\";\n      node.setAttribute(\"data-vault-original\", node.value);\n      if (event.token)\n        node.setAttribute(\"data-vault-token\", event.token);\n      status(\"updated from disk\");\n    });\n  }\n  function unmountViewer() {\n    if (stream) {\n      if (typeof stream.close === \"function\")\n        stream.close();\n      stream = null;\n    }\n    setPendingSave(null);\n  }\n  function mountViewer(hooks) {\n    unmountViewer();\n    const root = document.querySelector(\"[data-vault-root]\");\n    if (!root)\n      return;\n    const node = editor();\n    if (node) {\n      node.setAttribute(\"data-vault-original\", node.value);\n      const saveButton = document.getElementById(\"vault-save\");\n      if (saveButton)\n        saveButton.addEventListener(\"click\", () => save(node, hooks));\n      const recover = document.getElementById(\"vault-recover\");\n      if (recover) {\n        recover.addEventListener(\"click\", () => {\n          acceptIncoming({\n            content: recover.getAttribute(\"data-vault-content\") || \"\",\n            token: recover.getAttribute(\"data-vault-token\") || \"\"\n          });\n        });\n      }\n    }\n    const eventsUrl = root.getAttribute(\"data-vault-events\");\n    if (eventsUrl && typeof EventSource !== \"undefined\")\n      followStream(eventsUrl, node, hooks);\n  }\n  function wireUnloadGuard() {\n    if (typeof window === \"undefined\")\n      return;\n    window.addEventListener(\"beforeunload\", (event) => {\n      if (!dirty())\n        return;\n      event.preventDefault();\n      event.returnValue = \"\";\n    });\n  }\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/vault-pane.ts\n  function entry(offset) {\n    return { vaultScope: scope(), vaultScroll: offset };\n  }\n  var swapSequence = 0;\n  var shownUrl = \"\";\n  function layout() {\n    return document.querySelector(\"[data-vault-layout]\");\n  }\n  function scrollOffset() {\n    return typeof window !== \"undefined\" && typeof window.scrollY === \"number\" ? window.scrollY : 0;\n  }\n  function scrollTo(offset) {\n    if (typeof window !== \"undefined\" && typeof window.scrollTo === \"function\") {\n      window.scrollTo(0, offset);\n    }\n  }\n  function paneAddress(url) {\n    const route = layout()?.getAttribute(\"data-vault-pane-route\");\n    if (!route)\n      return null;\n    try {\n      const target = new URL(url, location.href);\n      const current = new URL(location.href);\n      if (target.origin !== current.origin || target.pathname !== current.pathname)\n        return null;\n      const pane = new URL(route, location.href);\n      pane.search = target.search;\n      return pane.toString();\n    } catch {\n      return null;\n    }\n  }\n  function scope() {\n    return layout()?.getAttribute(\"data-vault-scope\") ?? \"\";\n  }\n  function markShown() {\n    const root = document.querySelector(\"[data-vault-root]\");\n    const path = root ? root.getAttribute(\"data-vault-path\") : null;\n    document.querySelectorAll(\"a[data-vault-entry]\").forEach((link) => {\n      if (path && link.getAttribute(\"data-vault-entry\") === path) {\n        link.setAttribute(\"aria-current\", \"page\");\n      } else {\n        link.removeAttribute(\"aria-current\");\n      }\n    });\n  }\n  function applyPane(markup, offset) {\n    const parsed = new DOMParser().parseFromString(markup, \"text/html\");\n    const crumb = parsed.querySelector(\"[data-vault-crumb]\");\n    const pane = parsed.querySelector(\"[data-vault-pane]\");\n    const shownCrumb = document.querySelector(\"[data-vault-crumb]\");\n    const shownPane = document.querySelector(\"[data-vault-pane]\");\n    if (!crumb || !pane || !shownCrumb || !shownPane)\n      throw new Error(\"no pane in the answer\");\n    unmountViewer();\n    const nextCrumb = document.importNode(crumb, true);\n    const nextPane = document.importNode(pane, true);\n    shownCrumb.replaceWith(nextCrumb);\n    shownPane.replaceWith(nextPane);\n    wireNavigation(nextCrumb);\n    wireNavigation(nextPane);\n    mountViewer(hooks);\n    markShown();\n    scrollTo(offset);\n  }\n  function swap(url, move, offset, fallback) {\n    const address = paneAddress(url);\n    if (!address) {\n      fallback();\n      return;\n    }\n    swapSequence += 1;\n    const mine = swapSequence;\n    fetchMarkup(address).then((markup) => {\n      if (mine !== swapSequence)\n        return;\n      applyPane(markup, offset);\n      const target = new URL(url, location.href).toString();\n      if (move === \"push\") {\n        history.replaceState({ ...history.state, vaultScroll: offset }, \"\");\n        history.pushState(entry(offset), \"\", target);\n      } else if (move === \"replace\") {\n        history.replaceState(entry(offset), \"\", target);\n      }\n      shownUrl = target;\n    }).catch(() => {\n      if (mine === swapSequence)\n        fallback();\n    });\n  }\n  function showFile(url) {\n    if (!paneAddress(url))\n      return false;\n    swap(url, \"push\", scrollOffset(), () => location.assign(url));\n    return true;\n  }\n  var hooks = {\n    saved() {\n      const root = document.querySelector(\"[data-vault-root]\");\n      const read = root ? root.getAttribute(\"data-vault-read-href\") : null;\n      if (!read)\n        return;\n      const target = new URL(read, location.href).toString();\n      const offset = scrollOffset();\n      history.replaceState(entry(offset), \"\", target);\n      shownUrl = target;\n      swap(target, \"none\", offset, () => location.assign(target));\n      status(\"saved\");\n    },\n    changed() {\n      const target = shownUrl || location.href;\n      swap(target, \"none\", scrollOffset(), () => {});\n    }\n  };\n  function wireLinks(main) {\n    main.addEventListener(\"click\", (raw) => {\n      const event = raw;\n      if (!isPlainClick(event))\n        return;\n      const target = event.target;\n      const link = target && target.closest ? target.closest(\"a[data-vault-entry], a[data-vault-mode-link]\") : null;\n      if (!link)\n        return;\n      event.preventDefault();\n      navigate(link.href, true);\n    });\n  }\n  function wireHistory() {\n    if (typeof window === \"undefined\")\n      return;\n    window.addEventListener(\"popstate\", () => {\n      const next = location.href;\n      const previous = shownUrl;\n      const state = history.state;\n      const saved = state?.vaultScroll ?? 0;\n      const swappable = !!state && state.vaultScope === scope();\n      guard().then((allowed) => {\n        if (!allowed) {\n          history.pushState(entry(scrollOffset()), \"\", previous);\n          return;\n        }\n        if (swappable)\n          swap(next, \"none\", saved, () => location.reload());\n        else\n          location.reload();\n      });\n    });\n  }\n  function wireVaultPane() {\n    const shown = layout();\n    if (!shown)\n      return;\n    shownUrl = location.href;\n    if (document.querySelector(\"[data-vault-root]\")) {\n      history.replaceState({ ...history.state, ...entry(scrollOffset()) }, \"\");\n    }\n    if (typeof history !== \"undefined\" && \"scrollRestoration\" in history) {\n      history.scrollRestoration = \"manual\";\n    }\n    setInPlaceNavigation(showFile);\n    const main = document.querySelector(\"[data-vault-main]\");\n    if (main)\n      wireLinks(main);\n    wireHistory();\n    mountViewer(hooks);\n  }\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/vault-tree.ts\n  var FILTER_DELAY = 150;\n  var displayedGeneration = null;\n  var latestGeneration = null;\n  var refreshSequence = 0;\n  var filterSequence = 0;\n  var filterTimer;\n  var filterRequest = null;\n  function showTree(shown) {\n    const root = document.documentElement;\n    if (shown)\n      root.removeAttribute(\"data-vault-tree\");\n    else\n      root.setAttribute(\"data-vault-tree\", \"hidden\");\n    const toggle = document.getElementById(\"vault-tree-toggle\");\n    if (toggle) {\n      toggle.textContent = shown ? \"Hide files\" : \"Show files\";\n      toggle.setAttribute(\"aria-expanded\", shown ? \"true\" : \"false\");\n    }\n    try {\n      localStorage.setItem(VAULT_TREE_STORAGE_KEY, shown ? \"shown\" : \"hidden\");\n    } catch {}\n  }\n  function readGeneration(slot) {\n    const value = slot ? slot.getAttribute(\"data-vault-generation\") : null;\n    return value === null || value === \"\" ? null : Number(value);\n  }\n  function showStale() {\n    const note = document.getElementById(\"vault-stale\");\n    if (!note)\n      return;\n    note.hidden = !(latestGeneration !== null && displayedGeneration !== null && latestGeneration > displayedGeneration);\n  }\n  function openedByViewer() {\n    return Array.from(document.querySelectorAll(\"details[data-vault-children-url][open]\"), (folder) => folder.getAttribute(\"data-vault-dir\"));\n  }\n  function swapVaultSlots(markup) {\n    const reopen = openedByViewer();\n    const parsed = new DOMParser().parseFromString(markup, \"text/html\");\n    parsed.querySelectorAll(\"[data-vault-slot]\").forEach((slot) => {\n      const name = slot.getAttribute(\"data-vault-slot\");\n      const target = document.querySelector(`[data-vault-slot=\"${name}\"]`);\n      if (!target)\n        return;\n      const node = document.importNode(slot, true);\n      target.replaceWith(node);\n      wireNavigation(node);\n      if (name !== \"tree\")\n        return;\n      displayedGeneration = readGeneration(node);\n      node.querySelectorAll(\"details[data-vault-children-url]\").forEach((folder) => {\n        if (reopen.includes(folder.getAttribute(\"data-vault-dir\")))\n          folder.open = true;\n      });\n    });\n    showStale();\n    runFilter();\n  }\n  function failVaultSlots(message) {\n    document.querySelectorAll(\"[data-vault-slot][aria-busy]\").forEach((slot) => {\n      slot.removeAttribute(\"aria-busy\");\n      slot.textContent = message;\n    });\n  }\n  function loadChildren(folder) {\n    const url = folder.getAttribute(\"data-vault-children-url\");\n    const container = folder.querySelector(\".vault-children\");\n    if (!url || !container || folder.hasAttribute(\"data-vault-loaded\") || folder.hasAttribute(\"data-vault-loading\")) {\n      return;\n    }\n    folder.setAttribute(\"data-vault-loading\", \"\");\n    fetchMarkup(url).then((markup) => {\n      moveInto(container, markup);\n      folder.setAttribute(\"data-vault-loaded\", \"\");\n    }).catch((error) => {\n      container.textContent = `This folder could not be loaded: ${failure(error)}`;\n    }).finally(() => {\n      folder.removeAttribute(\"data-vault-loading\");\n    });\n  }\n  function runFilter() {\n    const filter = document.getElementById(\"vault-filter\");\n    const results = document.getElementById(\"vault-filter-results\");\n    const panel = document.getElementById(\"vault-tree-panel\");\n    const layout = document.querySelector(\"[data-vault-layout]\");\n    if (!filter || !results || !panel || !layout)\n      return;\n    clearTimeout(filterTimer);\n    if (filterRequest)\n      filterRequest.abort();\n    const needle = filter.value.trim();\n    filterSequence += 1;\n    if (!needle) {\n      results.hidden = true;\n      results.replaceChildren();\n      panel.removeAttribute(\"data-vault-filtering\");\n      return;\n    }\n    const url = new URL(layout.getAttribute(\"data-vault-filter-url\") || \"\", location.href);\n    url.searchParams.set(\"q\", needle);\n    const sequence = filterSequence;\n    filterRequest = typeof AbortController !== \"undefined\" ? new AbortController : null;\n    fetchMarkup(url.toString(), filterRequest ? filterRequest.signal : undefined).then((markup) => {\n      if (sequence !== filterSequence)\n        return;\n      moveInto(results, markup);\n      results.hidden = false;\n      panel.setAttribute(\"data-vault-filtering\", \"\");\n    }).catch((error) => {\n      if (sequence !== filterSequence || error && error.name === \"AbortError\")\n        return;\n      results.textContent = `The filter could not run: ${failure(error)}`;\n      results.hidden = false;\n      panel.setAttribute(\"data-vault-filtering\", \"\");\n    });\n  }\n  function refreshTree() {\n    const layout = document.querySelector(\"[data-vault-layout]\");\n    const status = document.getElementById(\"vault-refresh-status\");\n    const url = layout ? layout.getAttribute(\"data-vault-refresh-url\") : null;\n    if (!url)\n      return;\n    refreshSequence += 1;\n    const sequence = refreshSequence;\n    if (status)\n      status.hidden = true;\n    fetchMarkup(url).then((markup) => {\n      if (sequence === refreshSequence)\n        swapVaultSlots(markup);\n    }).catch((error) => {\n      if (sequence !== refreshSequence || !status)\n        return;\n      status.textContent = `The tree could not be refreshed: ${failure(error)}. Select Refresh tree to retry.`;\n      status.hidden = false;\n    });\n  }\n  function watchTreeChanges(layout) {\n    const url = layout.getAttribute(\"data-vault-changes-url\");\n    if (!url || typeof EventSource === \"undefined\")\n      return;\n    const changes = new EventSource(url);\n    changes.addEventListener(\"message\", (message) => {\n      let event;\n      try {\n        event = JSON.parse(message.data);\n      } catch {\n        return;\n      }\n      if (!event || event.type !== \"vault-tree-changed\" || typeof event.generation !== \"number\") {\n        return;\n      }\n      if (latestGeneration === null || event.generation > latestGeneration) {\n        latestGeneration = event.generation;\n      }\n      showStale();\n    });\n  }\n  function wirePanel(panel) {\n    panel.addEventListener(\"click\", (raw) => {\n      const event = raw;\n      if (!isPlainClick(event))\n        return;\n      const target = event.target;\n      const link = target && target.closest ? target.closest(\"a[data-vault-entry]\") : null;\n      if (!link)\n        return;\n      event.preventDefault();\n      navigate(link.href, true);\n    });\n    panel.addEventListener(\"toggle\", (event) => {\n      const folder = event.target;\n      if (folder && folder.open && folder.matches && folder.matches(\"details[data-vault-children-url]\")) {\n        loadChildren(folder);\n      }\n    }, true);\n  }\n  function wireTreeToggle() {\n    const toggle = document.getElementById(\"vault-tree-toggle\");\n    if (!toggle)\n      return;\n    toggle.hidden = false;\n    const hidden = document.documentElement.getAttribute(\"data-vault-tree\") === \"hidden\";\n    toggle.textContent = hidden ? \"Show files\" : \"Hide files\";\n    toggle.setAttribute(\"aria-expanded\", hidden ? \"false\" : \"true\");\n    toggle.addEventListener(\"click\", () => {\n      showTree(document.documentElement.getAttribute(\"data-vault-tree\") === \"hidden\");\n    });\n  }\n  function wireVaultBrowser() {\n    displayedGeneration = null;\n    latestGeneration = null;\n    refreshSequence = 0;\n    filterSequence = 0;\n    filterTimer = undefined;\n    filterRequest = null;\n    const layout = document.querySelector(\"[data-vault-layout]\");\n    if (!layout)\n      return;\n    const panel = document.getElementById(\"vault-tree-panel\");\n    displayedGeneration = readGeneration(document.querySelector('[data-vault-slot=\"tree\"]'));\n    if (panel)\n      wirePanel(panel);\n    const refresh = document.querySelector(\"form[data-vault-refresh]\");\n    if (refresh) {\n      refresh.addEventListener(\"submit\", (event) => {\n        event.preventDefault();\n        refreshTree();\n      });\n    }\n    const filter = document.getElementById(\"vault-filter\");\n    if (filter) {\n      filter.hidden = false;\n      filter.addEventListener(\"input\", () => {\n        clearTimeout(filterTimer);\n        filterTimer = setTimeout(runFilter, FILTER_DELAY);\n      });\n    }\n    wireTreeToggle();\n    watchTreeChanges(layout);\n    const deferred = layout.getAttribute(\"data-vault-view\");\n    if (!deferred)\n      return;\n    fetchMarkup(deferred).then(swapVaultSlots).catch((error) => {\n      failVaultSlots(`The files could not be listed: ${failure(error)}`);\n    });\n  }\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/index.ts\n  function startStudioClient() {\n    wireTheme();\n    rememberCompanion();\n    wireWorkflowSchemaSelect();\n    wireWorkflowStageSelection();\n    wireSkillsSelect();\n    wireThemeToggle();\n    wireCopyControls();\n    wireDelegatedActions();\n    wireUnloadGuard();\n    wireNavigation();\n    wireVaultPane();\n    wireVaultBrowser();\n    wireReports();\n  }\n\n  // packages/mate-core/src/cli/commands/studio/views/studio-client/main.ts\n  startStudioClient();\n})();\n";