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

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

@@ -0,0 +1,122 @@
+import { REPORT_VIEW_PREFIX } from "../../routes";
+import { currentTheme, setThemeListener } from "./theme";
+
+interface ReportSummary {
+  id: string;
+  title: string;
+  createdAt: number;
+}
+
+function reportHash(): string | null {
+  const match = /(?:^|[#&])report=([0-9a-f]{32})/.exec(location.hash || "");
+  return match ? match[1]! : null;
+}
+
+/** Hosted reports: the list, the sandboxed frame, and the toast and badge for a new arrival. */
+export function wireReports(): void {
+  setThemeListener(null);
+  const shell = document.querySelector("[data-reports-events-url]");
+  if (!shell || typeof EventSource === "undefined") return;
+  const current = shell.getAttribute("data-companion");
+  const listUrl = shell.getAttribute("data-reports-url");
+  const viewUrl = shell.getAttribute("data-reports-view-url");
+  const list = document.getElementById("reports-list");
+  const frame = document.getElementById("reports-frame") as HTMLIFrameElement | null;
+  const open = document.getElementById("reports-open") as HTMLAnchorElement | null;
+  const empty = document.getElementById("reports-empty");
+  const template = document.getElementById("reports-item-template") as HTMLTemplateElement | null;
+  const badge = document.getElementById("reports-badge");
+  const toast = document.getElementById("reports-toast");
+  const toastTitle = document.getElementById("reports-toast-title");
+  const toastOpen = document.getElementById("reports-toast-open") as HTMLAnchorElement | null;
+  let shown: string | null = null;
+  let toastTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  function show(id: string): void {
+    if (!frame) return;
+    shown = id;
+    const theme = currentTheme();
+    const src = `${REPORT_VIEW_PREFIX}${id}${theme === "system" ? "" : `?scheme=${theme}`}`;
+    frame.src = src;
+    frame.hidden = false;
+    if (open) {
+      open.href = src;
+      open.hidden = false;
+    }
+    if (list) {
+      list.querySelectorAll("button[data-report-id]").forEach((button) => {
+        button.setAttribute(
+          "aria-pressed",
+          button.getAttribute("data-report-id") === id ? "true" : "false",
+        );
+      });
+    }
+    try {
+      history.replaceState(null, "", `#report=${id}`);
+    } catch {
+      /* the address is a convenience */
+    }
+  }
+
+  function render(reports: ReportSummary[]): void {
+    const first = template && template.content.firstElementChild;
+    if (!list || !template || !first) return;
+    list.replaceChildren();
+    if (empty) empty.hidden = reports.length > 0;
+    for (const report of reports) {
+      const item = first.cloneNode(true) as Element;
+      const 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", () => show(report.id));
+      list.append(item);
+    }
+    if (reports.length === 0 || reports.some((report) => report.id === shown)) return;
+    const named = reportHash();
+    show(reports.some((report) => report.id === named) ? named! : reports[0]!.id);
+  }
+
+  function refreshList(): void {
+    if (!list || !listUrl) return;
+    fetch(listUrl, { headers: { accept: "application/json" } })
+      .then((response) => {
+        if (!response.ok) throw new Error(`status ${response.status}`);
+        return response.json();
+      })
+      .then((body) => render(body.reports || []))
+      .catch(() => {
+        /* the next event or reconnect retries */
+      });
+  }
+
+  function announceReport(event: { id: string; title: string }): void {
+    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(() => toast.setAttribute("data-shown", "false"), 10000);
+  }
+
+  setThemeListener(() => {
+    if (shown) show(shown);
+  });
+  const events = new EventSource(shell.getAttribute("data-reports-events-url")!);
+  events.addEventListener("open", refreshList);
+  events.addEventListener("message", (message) => {
+    let event;
+    try {
+      event = JSON.parse(message.data);
+    } catch {
+      return;
+    }
+    if (!event || event.type !== "report-published" || event.companion !== current) return;
+    if (list) refreshList();
+    else announceReport(event);
+  });
+}

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

@@ -0,0 +1,63 @@
+import { THEME_STORAGE_KEY } from "./keys";
+
+export type Theme = "system" | "dark" | "light";
+
+const THEME_CYCLE: Theme[] = ["system", "dark", "light"];
+
+function readTheme(): Theme {
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY) as Theme | null;
+    return stored && THEME_CYCLE.includes(stored) ? stored : "system";
+  } catch {
+    return "system";
+  }
+}
+
+function storeTheme(theme: Theme): void {
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+  } catch {
+    /* a blocked web store only costs the preference, never the page */
+  }
+}
+
+let theme: Theme = "system";
+/** Set by the Reports view to reload the shown report in the new appearance. */
+let onThemeChange: (() => void) | null = null;
+
+export function currentTheme(): Theme {
+  return theme;
+}
+
+export function setThemeListener(listener: (() => void) | null): void {
+  onThemeChange = listener;
+}
+
+function applyTheme(next: Theme): void {
+  theme = next;
+  if (onThemeChange) onThemeChange();
+  const root = document.documentElement;
+  if (next === "system") root.removeAttribute("data-theme");
+  else root.setAttribute("data-theme", next);
+  const control = document.getElementById("studio-theme");
+  if (control) {
+    control.textContent = `Theme: ${next}`;
+    control.setAttribute("data-theme-state", next);
+  }
+}
+
+/** Applies the remembered appearance and lets the control cycle it. */
+export function wireTheme(): void {
+  onThemeChange = null;
+  applyTheme(readTheme());
+}
+
+export function wireThemeToggle(): void {
+  const toggle = document.getElementById("studio-theme");
+  if (!toggle) return;
+  toggle.addEventListener("click", () => {
+    const next = THEME_CYCLE[(THEME_CYCLE.indexOf(theme) + 1) % THEME_CYCLE.length]!;
+    applyTheme(next);
+    storeTheme(next);
+  });
+}

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

@@ -0,0 +1,166 @@
+import { dirty, editor, pendingSave, setPendingSave } from "./page";
+
+interface IncomingVersion {
+  content?: string;
+  token?: string;
+  kind?: string;
+}
+
+/** What a mounted viewer asks of the pane that hosts it. */
+export interface ViewerHooks {
+  /** A save was applied: the file should be shown rendered. */
+  saved: () => void;
+  /** The file changed on disk while shown rendered: show its current content. */
+  changed: () => void;
+}
+
+export function status(message: string): void {
+  const node = document.getElementById("vault-status");
+  if (node) node.textContent = message;
+}
+
+function setIncoming(event: IncomingVersion): void {
+  const box = document.getElementById("vault-incoming");
+  const content = document.getElementById("vault-incoming-content");
+  const recover = document.getElementById("vault-recover");
+  if (!box || !content || !recover) return;
+  box.hidden = false;
+  content.textContent = event.content || "";
+  recover.setAttribute("data-vault-content", event.content || "");
+  recover.setAttribute("data-vault-token", event.token || "");
+}
+
+function acceptIncoming(event: IncomingVersion): void {
+  const node = editor();
+  if (!node) return;
+  node.value = event.content || "";
+  node.setAttribute("data-vault-original", node.value);
+  if (event.token) node.setAttribute("data-vault-token", event.token);
+  const box = document.getElementById("vault-incoming");
+  if (box) box.hidden = true;
+  status("incoming version loaded into the editor");
+}
+
+function save(node: HTMLTextAreaElement, hooks: ViewerHooks): void {
+  if (pendingSave()) return;
+  const companion = document.querySelector("[data-companion]");
+  const body = {
+    companion: companion ? companion.getAttribute("data-companion") : "",
+    path: node.getAttribute("data-vault-path"),
+    content: node.value,
+    token: node.getAttribute("data-vault-token"),
+  };
+  const request = fetch("/api/vault/save", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+  })
+    .then((response) =>
+      response.json().then((result: IncomingVersion & { reason?: string }) => {
+        if (!response.ok) {
+          if (response.status === 409) setIncoming(result);
+          status(result.reason || "save refused");
+          return false;
+        }
+        node.setAttribute("data-vault-token", result.token || "");
+        node.setAttribute("data-vault-original", node.value);
+        status("saved");
+        hooks.saved();
+        return true;
+      }),
+    )
+    .catch(() => {
+      status("save failed");
+      return false;
+    })
+    .finally(() => {
+      setPendingSave(null);
+    });
+  setPendingSave(request);
+}
+
+/** The one stream the mounted file holds open, closed only by `unmountViewer`. */
+let stream: EventSource | null = null;
+
+/** Applies a version the file stream reports; a dirty editor keeps its text and offers the new one. */
+function followStream(
+  eventsUrl: string,
+  node: HTMLTextAreaElement | null,
+  hooks: ViewerHooks,
+): void {
+  const events = new EventSource(eventsUrl);
+  stream = events;
+  events.addEventListener("message", (message) => {
+    let event: IncomingVersion;
+    try {
+      event = JSON.parse(message.data);
+    } catch {
+      return;
+    }
+    if (event.kind === "removed") {
+      status("this file no longer exists on disk");
+      return;
+    }
+    if (!node) {
+      hooks.changed();
+      return;
+    }
+    if (event.kind === "overwritten") {
+      setIncoming(event);
+      status("a version was overwritten; its content is available below");
+      return;
+    }
+    if (dirty()) {
+      setIncoming(event);
+      status("the file changed on disk; unsaved content is still in the editor");
+      return;
+    }
+    node.value = event.content || "";
+    node.setAttribute("data-vault-original", node.value);
+    if (event.token) node.setAttribute("data-vault-token", event.token);
+    status("updated from disk");
+  });
+}
+
+/** Closes the file's event stream and forgets the save record; the pane's own nodes go with the pane. */
+export function unmountViewer(): void {
+  if (stream) {
+    if (typeof stream.close === "function") stream.close();
+    stream = null;
+  }
+  setPendingSave(null);
+}
+
+/** Binds whatever file pane is on screen, opening exactly one event stream for its file. */
+export function mountViewer(hooks: ViewerHooks): void {
+  unmountViewer();
+  const root = document.querySelector("[data-vault-root]");
+  if (!root) return;
+  const node = editor();
+  if (node) {
+    node.setAttribute("data-vault-original", node.value);
+    const saveButton = document.getElementById("vault-save");
+    if (saveButton) saveButton.addEventListener("click", () => save(node, hooks));
+    const recover = document.getElementById("vault-recover");
+    if (recover) {
+      recover.addEventListener("click", () => {
+        acceptIncoming({
+          content: recover.getAttribute("data-vault-content") || "",
+          token: recover.getAttribute("data-vault-token") || "",
+        });
+      });
+    }
+  }
+  const eventsUrl = root.getAttribute("data-vault-events");
+  if (eventsUrl && typeof EventSource !== "undefined") followStream(eventsUrl, node, hooks);
+}
+
+/** Asks the browser to confirm leaving while the editor holds unsaved text. */
+export function wireUnloadGuard(): void {
+  if (typeof window === "undefined") return;
+  window.addEventListener("beforeunload", (event) => {
+    if (!dirty()) return;
+    event.preventDefault();
+    event.returnValue = "";
+  });
+}

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

@@ -0,0 +1,202 @@
+import {
+  fetchMarkup,
+  guard,
+  isPlainClick,
+  navigate,
+  setInPlaceNavigation,
+  wireNavigation,
+} from "./page";
+import { mountViewer, status, unmountViewer, type ViewerHooks } from "./vault-editor";
+
+/**
+ * History state this module owns. `vaultScope` marks an entry whose file pane can be swapped
+ * in, and names the companion it belongs to; `vaultScroll` is where the page was scrolled when
+ * the entry was left.
+ */
+interface PaneState {
+  vaultScope?: string;
+  vaultScroll?: number;
+}
+
+function entry(offset: number): PaneState {
+  return { vaultScope: scope(), vaultScroll: offset };
+}
+
+let swapSequence = 0;
+/** The address of the state on screen, so a declined history move can put it back. */
+let shownUrl = "";
+
+function layout(): Element | null {
+  return document.querySelector("[data-vault-layout]");
+}
+
+function scrollOffset(): number {
+  return typeof window !== "undefined" && typeof window.scrollY === "number" ? window.scrollY : 0;
+}
+
+function scrollTo(offset: number): void {
+  if (typeof window !== "undefined" && typeof window.scrollTo === "function") {
+    window.scrollTo(0, offset);
+  }
+}
+
+/** The pane fragment's address for a page address on this page's own route, else `null`. */
+function paneAddress(url: string): string | null {
+  const route = layout()?.getAttribute("data-vault-pane-route");
+  if (!route) return null;
+  try {
+    const target = new URL(url, location.href);
+    const current = new URL(location.href);
+    if (target.origin !== current.origin || target.pathname !== current.pathname) return null;
+    const pane = new URL(route, location.href);
+    pane.search = target.search;
+    return pane.toString();
+  } catch {
+    return null;
+  }
+}
+
+/** The companion this page's vault belongs to; a history entry of another one is not ours to swap. */
+function scope(): string {
+  return layout()?.getAttribute("data-vault-scope") ?? "";
+}
+
+function markShown(): void {
+  const root = document.querySelector("[data-vault-root]");
+  const path = root ? root.getAttribute("data-vault-path") : null;
+  document.querySelectorAll("a[data-vault-entry]").forEach((link) => {
+    if (path && link.getAttribute("data-vault-entry") === path) {
+      link.setAttribute("aria-current", "page");
+    } else {
+      link.removeAttribute("aria-current");
+    }
+  });
+}
+
+/** Replaces the breadcrumb and pane with the server's, rewiring what lives in them. */
+function applyPane(markup: string, offset: number): void {
+  const parsed = new DOMParser().parseFromString(markup, "text/html");
+  const crumb = parsed.querySelector("[data-vault-crumb]");
+  const pane = parsed.querySelector("[data-vault-pane]");
+  const shownCrumb = document.querySelector("[data-vault-crumb]");
+  const shownPane = document.querySelector("[data-vault-pane]");
+  if (!crumb || !pane || !shownCrumb || !shownPane) throw new Error("no pane in the answer");
+  unmountViewer();
+  const nextCrumb = document.importNode(crumb, true) as Element;
+  const nextPane = document.importNode(pane, true) as Element;
+  shownCrumb.replaceWith(nextCrumb);
+  shownPane.replaceWith(nextPane);
+  wireNavigation(nextCrumb);
+  wireNavigation(nextPane);
+  mountViewer(hooks);
+  markShown();
+  scrollTo(offset);
+}
+
+type HistoryMove = "push" | "replace" | "none";
+
+/** Shows the file `url` names in place; the latest request wins and a failed one is a normal navigation. */
+function swap(url: string, move: HistoryMove, offset: number, fallback: () => void): void {
+  const address = paneAddress(url);
+  if (!address) {
+    fallback();
+    return;
+  }
+  swapSequence += 1;
+  const mine = swapSequence;
+  fetchMarkup(address)
+    .then((markup) => {
+      if (mine !== swapSequence) return;
+      applyPane(markup, offset);
+      const target = new URL(url, location.href).toString();
+      if (move === "push") {
+        history.replaceState({ ...(history.state as PaneState | null), vaultScroll: offset }, "");
+        history.pushState(entry(offset), "", target);
+      } else if (move === "replace") {
+        history.replaceState(entry(offset), "", target);
+      }
+      shownUrl = target;
+    })
+    .catch(() => {
+      if (mine === swapSequence) fallback();
+    });
+}
+
+function showFile(url: string): boolean {
+  if (!paneAddress(url)) return false;
+  swap(url, "push", scrollOffset(), () => location.assign(url));
+  return true;
+}
+
+const hooks: ViewerHooks = {
+  saved() {
+    const root = document.querySelector("[data-vault-root]");
+    const read = root ? root.getAttribute("data-vault-read-href") : null;
+    if (!read) return;
+    const target = new URL(read, location.href).toString();
+    const offset = scrollOffset();
+    // The saved file is no longer the edit address, whatever navigation follows.
+    history.replaceState(entry(offset), "", target);
+    shownUrl = target;
+    swap(target, "none", offset, () => location.assign(target));
+    status("saved");
+  },
+  changed() {
+    const target = shownUrl || location.href;
+    swap(target, "none", scrollOffset(), () => {});
+  },
+};
+
+function wireLinks(main: Element): void {
+  main.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], a[data-vault-mode-link]")
+        : null;
+    if (!link) return;
+    event.preventDefault();
+    navigate(link.href, true);
+  });
+}
+
+function wireHistory(): void {
+  if (typeof window === "undefined") return;
+  window.addEventListener("popstate", () => {
+    const next = location.href;
+    const previous = shownUrl;
+    const state = history.state as PaneState | null;
+    const saved = state?.vaultScroll ?? 0;
+    const swappable = !!state && state.vaultScope === scope();
+    void guard().then((allowed) => {
+      if (!allowed) {
+        // Put the address of what is still shown back where the move took it from.
+        history.pushState(entry(scrollOffset()), "", previous);
+        return;
+      }
+      if (swappable) swap(next, "none", saved, () => location.reload());
+      else location.reload();
+    });
+  });
+}
+
+/** Opens files and switches modes without replacing the document; wired once, with the page. */
+export function wireVaultPane(): void {
+  const shown = layout();
+  if (!shown) return;
+  shownUrl = location.href;
+  // Only a page showing a file has a pane to come back to; a listing is reloaded.
+  if (document.querySelector("[data-vault-root]")) {
+    history.replaceState({ ...(history.state as PaneState | null), ...entry(scrollOffset()) }, "");
+  }
+  if (typeof history !== "undefined" && "scrollRestoration" in history) {
+    history.scrollRestoration = "manual";
+  }
+  setInPlaceNavigation(showFile);
+  const main = document.querySelector("[data-vault-main]");
+  if (main) wireLinks(main);
+  wireHistory();
+  mountViewer(hooks);
+}