@uniqbit/mate-core 0.18.1-canary.4 → 0.18.1

package/src/cli/commands/studio/vault.ts

@@ -44,6 +44,8 @@ export interface VaultWatchEvent {
 
 export interface VaultTreeResult {
   tree: VaultTreeNode[];
+  /** Counts watch invalidations seen when this listing was taken; a larger one makes it stale. */
+  generation: number;
   watching: boolean;
   warning: string | null;
 }
@@ -379,6 +381,11 @@ interface SaveRecord {
   expires: ReturnType<typeof setTimeout>;
 }
 
+interface ListedTree {
+  tree: VaultTreeNode[];
+  generation: number;
+}
+
 interface Subscriber {
   path: string;
   notify: (event: VaultWatchEvent) => void;
@@ -400,6 +407,8 @@ export interface VaultManager {
     requestedPath: string,
     notify: (event: VaultWatchEvent) => void,
   ): () => void;
+  /** Reports the listing generation now and on every later invalidation; carries no paths or content. */
+  subscribeTree(companionRoot: string, notify: (generation: number) => void): () => void;
   refresh(companionRoot: string): Promise<VaultTreeResult>;
   deactivate(): void;
   stop(): void;
@@ -412,7 +421,8 @@ export function createVaultManager(deps: VaultDeps = {}): VaultManager {
   const git = deps.git ?? runGit;
   const trees = new Map<string, VaultTreeNode[]>();
   const generations = new Map<string, number>();
-  const listings = new Map<string, Promise<VaultTreeNode[]>>();
+  const listings = new Map<string, Promise<ListedTree>>();
+  const treeSubscribers = new Map<string, Set<(generation: number) => void>>();
   const listed = new Map<string, string[]>();
   const warnings = new Map<string, string | null>();
   const watchers = new Map<string, Map<string, VaultWatcher>>();
@@ -430,7 +440,9 @@ export function createVaultManager(deps: VaultDeps = {}): VaultManager {
 
   const invalidate = (root: string) => {
     trees.delete(root);
-    generations.set(root, (generations.get(root) ?? 0) + 1);
+    const generation = (generations.get(root) ?? 0) + 1;
+    generations.set(root, generation);
+    for (const notifyTree of treeSubscribers.get(root) ?? []) notifyTree(generation);
   };
 
   const notify = async (
@@ -624,7 +636,7 @@ export function createVaultManager(deps: VaultDeps = {}): VaultManager {
   };
 
   /** A change seen while listing leaves the cache empty, so the next request lists again. */
-  const listTree = (root: string): Promise<VaultTreeNode[]> => {
+  const listTree = (root: string): Promise<ListedTree> => {
     const inFlight = listings.get(root);
     if (inFlight) return inFlight;
     const generation = generations.get(root) ?? 0;
@@ -636,7 +648,7 @@ export function createVaultManager(deps: VaultDeps = {}): VaultManager {
         scheduleReconcile(root, files);
         const tree = asTree(files);
         if ((generations.get(root) ?? 0) === generation) trees.set(root, tree);
-        return tree;
+        return { tree, generation };
       } finally {
         listings.delete(root);
       }
@@ -761,11 +773,13 @@ export function createVaultManager(deps: VaultDeps = {}): VaultManager {
   return {
     async tree(companionRoot, refresh = false) {
       const root = await rootKey(companionRoot);
-      const tree = !refresh && trees.get(root);
-      const result = tree || (await listTree(root));
+      const cached = !refresh && trees.get(root);
+      const result: ListedTree = cached
+        ? { tree: cached, generation: generations.get(root) ?? 0 }
+        : await listTree(root);
       startWatching(root);
       return {
-        tree: result,
+        ...result,
         watching: watchers.has(root),
         warning: warnings.get(root) ?? null,
       };
@@ -775,7 +789,14 @@ export function createVaultManager(deps: VaultDeps = {}): VaultManager {
       if (refresh) invalidate(root);
       startWatching(root);
       const tree = trees.get(root);
-      if (tree) return { tree, watching: watchers.has(root), warning: warnings.get(root) ?? null };
+      if (tree) {
+        return {
+          tree,
+          generation: generations.get(root) ?? 0,
+          watching: watchers.has(root),
+          warning: warnings.get(root) ?? null,
+        };
+      }
       void listTree(root).catch(() => {});
       return null;
     },
@@ -818,6 +839,30 @@ export function createVaultManager(deps: VaultDeps = {}): VaultManager {
         if (currentSubscribers.size === 0) subscribers.delete(key);
       };
     },
+    subscribeTree(companionRoot, notifyTree) {
+      let active = true;
+      let subscribedRoot: string | null = null;
+      void rootKey(companionRoot).then(
+        (root) => {
+          if (!active) return;
+          subscribedRoot = root;
+          const set = treeSubscribers.get(root) ?? new Set();
+          set.add(notifyTree);
+          treeSubscribers.set(root, set);
+          startWatching(root);
+          if (!trees.has(root)) void listTree(root).catch(() => {});
+          notifyTree(generations.get(root) ?? 0);
+        },
+        () => {},
+      );
+      return () => {
+        active = false;
+        if (!subscribedRoot) return;
+        const set = treeSubscribers.get(subscribedRoot);
+        set?.delete(notifyTree);
+        if (set?.size === 0) treeSubscribers.delete(subscribedRoot);
+      };
+    },
     async refresh(companionRoot) {
       return this.tree(companionRoot, true);
     },
@@ -828,6 +873,7 @@ export function createVaultManager(deps: VaultDeps = {}): VaultManager {
       }
       activeRoot = null;
       subscribers.clear();
+      treeSubscribers.clear();
     },
     stop() {
       for (const root of watchers.keys()) closeWatchers(root);
@@ -838,6 +884,7 @@ export function createVaultManager(deps: VaultDeps = {}): VaultManager {
       pendingEvents.clear();
       recentSaves.clear();
       subscribers.clear();
+      treeSubscribers.clear();
     },
     getRecovery(companionRoot, requestedPath) {
       const root = path.resolve(companionRoot);

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

@@ -1,3 +1,4 @@
+import { REPORT_VIEW_PREFIX } from "../routes";
 import { COMPANION_DIGEST_PATTERN, COMPANION_PARAM } from "../selection";
 
 export const THEME_STORAGE_KEY = "mate-studio-theme";
@@ -203,6 +204,35 @@ export const STUDIO_CLIENT_SCRIPT = `(function () {
     });
   });
 
+  /* Delegated: a spec row's controls need no per-node wiring. */
+  var AGENT_ORDER = ["claude", "opencode"];
+  function copyPromptFor(node) {
+    var viewed = document.documentElement.getAttribute("data-agent-viewed");
+    var order = viewed ? [viewed].concat(AGENT_ORDER) : AGENT_ORDER;
+    for (var index = 0; index < order.length; index += 1) {
+      var text = node.getAttribute("data-prompt-" + order[index]);
+      if (text) return text;
+    }
+    return null;
+  }
+  if (typeof document.addEventListener === "function") document.addEventListener("click", function (event) {
+    var target = event.target;
+    if (!target || typeof target.closest !== "function") return;
+    var run = target.closest("[data-studio-action]");
+    if (run) {
+      var agents = (run.getAttribute("data-studio-agents") || "").split(" ").filter(Boolean);
+      document.dispatchEvent(new CustomEvent("studio:terminal-action", {
+        detail: { action: run.getAttribute("data-studio-action"), subject: run.getAttribute("data-studio-subject"), agents: agents },
+      }));
+      return;
+    }
+    var prompt = target.closest("[data-studio-copy-prompt]");
+    if (prompt) {
+      var text = copyPromptFor(prompt);
+      if (text) copy(text, "prompt");
+    }
+  });
+
   var savePromise = null;
   function editor() { return document.getElementById("vault-editor"); }
   function status(message) {
@@ -253,7 +283,7 @@ export const STUDIO_CLIENT_SCRIPT = `(function () {
     return target.toString();
   }
   function wireNavigation(scope) {
-    (scope || document).querySelectorAll('form[method="get"]').forEach(function (form) {
+    (scope || document).querySelectorAll('form[method="get"]:not([data-vault-refresh])').forEach(function (form) {
       form.addEventListener("submit", function (event) {
         event.preventDefault();
         navigate(navigationUrl(form, event.submitter));
@@ -335,22 +365,6 @@ export const STUDIO_CLIENT_SCRIPT = `(function () {
       event.preventDefault();
       event.returnValue = "";
     });
-  function filterTree(query) {
-    var needle = query.trim().toLowerCase();
-    document.querySelectorAll("[data-vault-entry]").forEach(function (entry) {
-      entry.hidden = !!needle && (entry.getAttribute("data-vault-entry") || "").toLowerCase().indexOf(needle) === -1;
-    });
-    document.querySelectorAll("[data-vault-dir]").forEach(function (folder) {
-      if (!needle) {
-        folder.hidden = false;
-        folder.open = folder.hasAttribute("data-vault-expanded");
-        return;
-      }
-      var match = folder.querySelector("[data-vault-entry]:not([hidden])");
-      folder.hidden = !match;
-      if (match) folder.open = true;
-    });
-  }
   function showTree(shown) {
     var root = document.documentElement;
     if (shown) root.removeAttribute("data-vault-tree");
@@ -366,18 +380,67 @@ export const STUDIO_CLIENT_SCRIPT = `(function () {
       /* a blocked web store only costs the preference, never the page */
     }
   }
-  /** Moves server-rendered parts into place; builds no markup of its own. */
+  var displayedGeneration = null;
+  var latestGeneration = null;
+  var refreshSequence = 0;
+  var filterSequence = 0;
+  var filterTimer = null;
+  var filterRequest = null;
+  var FILTER_DELAY = 150;
+
+  function failure(error) {
+    return error && error.message ? error.message : String(error);
+  }
+  function fetchMarkup(url, signal) {
+    return fetch(url, { headers: { accept: "text/html" }, signal: signal }).then(function (response) {
+      if (!response.ok) throw new Error("status " + response.status);
+      return response.text();
+    });
+  }
+  /** Moves server-rendered nodes into a container; builds no markup of its own. */
+  function moveInto(container, markup) {
+    var parsed = new DOMParser().parseFromString(markup, "text/html");
+    container.replaceChildren.apply(
+      container,
+      Array.prototype.map.call(parsed.body.childNodes, function (child) { return document.importNode(child, true); }),
+    );
+  }
+  function readGeneration(slot) {
+    var 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() {
+    var note = document.getElementById("vault-stale");
+    if (!note) return;
+    note.hidden = !(latestGeneration !== null && displayedGeneration !== null && latestGeneration > displayedGeneration);
+  }
+  function openedByViewer() {
+    var keys = [];
+    document.querySelectorAll("details[data-vault-children-url][open]").forEach(function (folder) {
+      keys.push(folder.getAttribute("data-vault-dir"));
+    });
+    return keys;
+  }
+  /** Swaps server-rendered parts into place; a refreshed tree drops loaded folders and reopens the viewer's. */
   function swapVaultSlots(markup) {
+    var reopen = openedByViewer();
     var parsed = new DOMParser().parseFromString(markup, "text/html");
     parsed.querySelectorAll("[data-vault-slot]").forEach(function (slot) {
-      var target = document.querySelector('[data-vault-slot="' + slot.getAttribute("data-vault-slot") + '"]');
+      var name = slot.getAttribute("data-vault-slot");
+      var target = document.querySelector('[data-vault-slot="' + name + '"]');
       if (!target) return;
       var node = document.importNode(slot, true);
       target.replaceWith(node);
       wireNavigation(node);
+      if (name !== "tree") return;
+      displayedGeneration = readGeneration(node);
+      node.querySelectorAll("details[data-vault-children-url]").forEach(function (folder) {
+        if (reopen.indexOf(folder.getAttribute("data-vault-dir")) !== -1) folder.open = true;
+      });
     });
-    var filter = document.getElementById("vault-filter");
-    if (filter && filter.value) filterTree(filter.value);
+    showStale();
+    runFilter();
   }
   function failVaultSlots(message) {
     document.querySelectorAll("[data-vault-slot][aria-busy]").forEach(function (slot) {
@@ -385,13 +448,109 @@ export const STUDIO_CLIENT_SCRIPT = `(function () {
       slot.textContent = message;
     });
   }
+  function loadChildren(folder) {
+    var url = folder.getAttribute("data-vault-children-url");
+    var 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(function (markup) {
+      moveInto(container, markup);
+      folder.setAttribute("data-vault-loaded", "");
+    }).catch(function (error) {
+      container.textContent = "This folder could not be loaded: " + failure(error);
+    }).finally(function () { folder.removeAttribute("data-vault-loading"); });
+  }
+  function runFilter() {
+    var filter = document.getElementById("vault-filter");
+    var results = document.getElementById("vault-filter-results");
+    var panel = document.getElementById("vault-tree-panel");
+    var layout = document.querySelector("[data-vault-layout]");
+    if (!filter || !results || !panel || !layout) return;
+    clearTimeout(filterTimer);
+    if (filterRequest) filterRequest.abort();
+    var needle = filter.value.trim();
+    filterSequence += 1;
+    if (!needle) {
+      results.hidden = true;
+      results.replaceChildren();
+      panel.removeAttribute("data-vault-filtering");
+      return;
+    }
+    var url = new URL(layout.getAttribute("data-vault-filter-url") || "", location.href);
+    url.searchParams.set("q", needle);
+    var sequence = filterSequence;
+    filterRequest = typeof AbortController !== "undefined" ? new AbortController() : null;
+    fetchMarkup(url.toString(), filterRequest ? filterRequest.signal : undefined).then(function (markup) {
+      if (sequence !== filterSequence) return;
+      moveInto(results, markup);
+      results.hidden = false;
+      panel.setAttribute("data-vault-filtering", "");
+    }).catch(function (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() {
+    var layout = document.querySelector("[data-vault-layout]");
+    var status = document.getElementById("vault-refresh-status");
+    var url = layout ? layout.getAttribute("data-vault-refresh-url") : null;
+    if (!url) return;
+    refreshSequence += 1;
+    var sequence = refreshSequence;
+    if (status) status.hidden = true;
+    fetchMarkup(url).then(function (markup) {
+      if (sequence === refreshSequence) swapVaultSlots(markup);
+    }).catch(function (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) {
+    var url = layout.getAttribute("data-vault-changes-url");
+    if (!url || typeof EventSource === "undefined") return;
+    var changes = new EventSource(url);
+    changes.onmessage = function (message) {
+      var event;
+      try { event = JSON.parse(message.data); } catch (error) { return; }
+      if (!event || event.type !== "vault-tree-changed" || typeof event.generation !== "number") return;
+      if (latestGeneration === null || event.generation > latestGeneration) latestGeneration = event.generation;
+      showStale();
+    };
+  }
   function wireVaultBrowser() {
     var layout = document.querySelector("[data-vault-layout]");
     if (!layout) return;
+    var panel = document.getElementById("vault-tree-panel");
+    displayedGeneration = readGeneration(document.querySelector('[data-vault-slot="tree"]'));
+    if (panel) {
+      panel.addEventListener("click", function (event) {
+        if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+        var link = event.target && event.target.closest ? event.target.closest("a[data-vault-entry]") : null;
+        if (!link) return;
+        event.preventDefault();
+        navigate(link.href);
+      });
+      panel.addEventListener("toggle", function (event) {
+        var folder = event.target;
+        if (folder && folder.open && folder.matches && folder.matches("details[data-vault-children-url]")) loadChildren(folder);
+      }, true);
+    }
+    var refresh = document.querySelector("form[data-vault-refresh]");
+    if (refresh) refresh.addEventListener("submit", function (event) {
+      event.preventDefault();
+      refreshTree();
+    });
     var filter = document.getElementById("vault-filter");
     if (filter) {
       filter.hidden = false;
-      filter.addEventListener("input", function () { filterTree(filter.value); });
+      filter.addEventListener("input", function () {
+        clearTimeout(filterTimer);
+        filterTimer = setTimeout(runFilter, FILTER_DELAY);
+      });
     }
     var toggle = document.getElementById("vault-tree-toggle");
     if (toggle) {
@@ -403,16 +562,93 @@ export const STUDIO_CLIENT_SCRIPT = `(function () {
         showTree(document.documentElement.getAttribute("data-vault-tree") === "hidden");
       });
     }
+    watchTreeChanges(layout);
     var deferred = layout.getAttribute("data-vault-view");
     if (!deferred) return;
-    fetch(deferred, { headers: { accept: "text/html" } }).then(function (response) {
-      if (!response.ok) throw new Error("status " + response.status);
-      return response.text();
-    }).then(swapVaultSlots).catch(function (error) {
-      failVaultSlots("The files could not be listed: " + (error && error.message ? error.message : String(error)));
+    fetchMarkup(deferred).then(swapVaultSlots).catch(function (error) {
+      failVaultSlots("The files could not be listed: " + failure(error));
     });
   }
+  /** Hosted reports: the list, the sandboxed frame, and the toast and badge for a new arrival. */
+  function wireReports() {
+    var shell = document.querySelector("[data-reports-events-url]");
+    if (!shell || typeof EventSource === "undefined") return;
+    var current = shell.getAttribute("data-companion");
+    var listUrl = shell.getAttribute("data-reports-url");
+    var viewUrl = shell.getAttribute("data-reports-view-url");
+    var list = document.getElementById("reports-list");
+    var frame = document.getElementById("reports-frame");
+    var open = document.getElementById("reports-open");
+    var empty = document.getElementById("reports-empty");
+    var template = document.getElementById("reports-item-template");
+    var badge = document.getElementById("reports-badge");
+    var toast = document.getElementById("reports-toast");
+    var toastTitle = document.getElementById("reports-toast-title");
+    var toastOpen = document.getElementById("reports-toast-open");
+    var shown = null;
+    var toastTimeout;
+    function reportHash() {
+      var match = /(?:^|[#&])report=([0-9a-f]{32})/.exec(location.hash || "");
+      return match ? match[1] : null;
+    }
+    function show(id) {
+      if (!frame) return;
+      shown = id;
+      var src = ${JSON.stringify(REPORT_VIEW_PREFIX)} + id;
+      frame.src = src;
+      frame.hidden = false;
+      if (open) { open.href = src; open.hidden = false; }
+      if (list) list.querySelectorAll("button[data-report-id]").forEach(function (button) {
+        button.setAttribute("aria-pressed", button.getAttribute("data-report-id") === id ? "true" : "false");
+      });
+      try { history.replaceState(null, "", "#report=" + id); } catch (error) { /* the address is a convenience */ }
+    }
+    function render(reports) {
+      if (!list || !template || !template.content.firstElementChild) return;
+      list.replaceChildren();
+      if (empty) empty.hidden = reports.length > 0;
+      reports.forEach(function (report) {
+        var item = template.content.firstElementChild.cloneNode(true);
+        var button = item.querySelector("button");
+        button.setAttribute("data-report-id", report.id);
+        button.setAttribute("aria-pressed", report.id === shown ? "true" : "false");
+        item.querySelector("[data-report-title]").textContent = report.title;
+        item.querySelector("[data-report-time]").textContent = new Date(report.createdAt).toLocaleString();
+        button.addEventListener("click", function () { show(report.id); });
+        list.append(item);
+      });
+      if (reports.length === 0 || reports.some(function (report) { return report.id === shown; })) return;
+      var named = reportHash();
+      show(reports.some(function (report) { return report.id === named; }) ? named : reports[0].id);
+    }
+    function refreshList() {
+      if (!list || !listUrl) return;
+      fetch(listUrl, { headers: { accept: "application/json" } }).then(function (response) {
+        if (!response.ok) throw new Error("status " + response.status);
+        return response.json();
+      }).then(function (body) { render(body.reports || []); }).catch(function () { /* the next event or reconnect retries */ });
+    }
+    function announceReport(event) {
+      if (badge) badge.hidden = false;
+      if (!toast || !toastTitle) return;
+      toastTitle.textContent = "New report: " + event.title;
+      if (toastOpen && viewUrl) toastOpen.href = viewUrl + "#report=" + event.id;
+      toast.setAttribute("data-shown", "true");
+      clearTimeout(toastTimeout);
+      toastTimeout = setTimeout(function () { toast.setAttribute("data-shown", "false"); }, 10000);
+    }
+    var events = new EventSource(shell.getAttribute("data-reports-events-url"));
+    events.onopen = refreshList;
+    events.onmessage = function (message) {
+      var event;
+      try { event = JSON.parse(message.data); } catch (error) { return; }
+      if (!event || event.type !== "report-published" || event.companion !== current) return;
+      if (list) refreshList();
+      else announceReport(event);
+    };
+  }
   wireNavigation();
   wireVault();
   wireVaultBrowser();
+  wireReports();
 })();`;