@orangeworks/orangetree 0.4.0

package/dist/public/app.js

@@ -0,0 +1,650 @@
+import { Canvas } from "./canvas.js";
+import { Chat } from "./chat.js";
+import { Explorer } from "./explorer.js";
+import { api, toast } from "./api.js";
+import { formModal, confirmModal, popover, reportModal } from "./ui.js";
+import { openProjectSettings as openSettingsModal } from "./projectSettings.js";
+import { showGuidelines as showGuidelinesModal } from "./guidelines.js";
+import { applyDataI18n, setLocale, onLocaleChange, currentLocale, t } from "./i18n.js";
+import { openPairingPanel } from "./pairing.js";
+import { openConnectionSettings } from "./connection.js";
+import { relatedDocs, baseName } from "./insight.js";
+const $ = (sel) => document.querySelector(sel);
+const EMPTY_TREE = {
+  version: 0,
+  currentProjectId: null,
+  projects: {},
+  nodes: {},
+  settings: { model: "", effort: "", permission: "bypass" },
+  language: null,
+  locks: {}
+};
+const state = { tree: EMPTY_TREE, selectedId: null, busy: /* @__PURE__ */ new Set(), activeRootId: null, showArchived: false };
+const canvas = new Canvas($("#canvas"), {
+  onMove(id, pos) {
+    void api("PATCH", `/nodes/${id}`, { pos });
+  },
+  onSelect(id) {
+    state.selectedId = state.selectedId === id ? null : id;
+    refresh();
+    void chat.setNode(state.selectedId ? state.tree.nodes[state.selectedId] ?? null : null);
+    if (state.selectedId) void api("PATCH", `/nodes/${rootOf(id)}`, { viewedAt: Date.now() });
+  },
+  onContextMenu(id, clientX, clientY) {
+    if (state.selectedId !== id) {
+      state.selectedId = id;
+      refresh();
+      void chat.setNode(state.tree.nodes[id] ?? null);
+    }
+    void api("PATCH", `/nodes/${rootOf(id)}`, { viewedAt: Date.now() });
+    const archived = !!state.tree.nodes[id]?.archived;
+    popover([
+      { label: t("app.menu.fork"), onClick: () => void forkNode(id) },
+      { label: t("app.menu.reparent"), onClick: () => void reparentNode(id) },
+      { label: t("app.menu.relatedDocs"), onClick: () => showRelatedDocs(id, clientX, clientY) },
+      { label: archived ? t("app.menu.unarchive") : t("app.menu.archive"), onClick: () => void archiveNode(id) },
+      "separator",
+      { label: t("app.menu.delete"), danger: true, onClick: () => void deleteNode(id) }
+    ], { x: clientX, y: clientY });
+  }
+});
+function showRelatedDocs(id, x, y) {
+  const node = state.tree.nodes[id];
+  if (!node) return;
+  const docs = relatedDocs(node, Object.values(state.tree.nodes ?? {}));
+  if (!docs.length) {
+    popover([{ label: t("app.relatedDocs.none"), onClick: () => {
+    }, disabled: true }], { x, y });
+    return;
+  }
+  popover(docs.map((d) => ({ label: `\u{1F4C4} ${baseName(d)}`, title: d, onClick: () => openViewer(d) })), { x, y });
+}
+const chat = new Chat($("#chat"), {
+  api,
+  // Empty-state first message -> create a projectless node (title = first line).
+  async onNewConversation(text) {
+    const title = (text.split("\n")[0] || "").trim().slice(0, 40) || t("chat.newConversation");
+    const node = await api("POST", "/nodes", { title });
+    state.selectedId = node.id;
+    return node;
+  },
+  // Hover ⑂ on an answer segment -> immediate seeded fork; seedless -> the modal fork flow.
+  async onFork(nodeId, opts) {
+    const seed = opts?.seedText?.trim();
+    if (!seed) {
+      await forkNode(nodeId);
+      return;
+    }
+    const parent = state.tree.nodes[nodeId];
+    const title = t("app.fork.titleSuffix", { name: parent?.title ?? nodeId }).slice(0, 40);
+    const child = await api("POST", `/nodes/${nodeId}/fork`, { title, summary: seed });
+    state.selectedId = child.id;
+    void chat.setNode(child);
+  },
+  // done is a manual, meaningful transition — confirm first (and no-op if already done), per the reference.
+  async onDone(nodeId) {
+    const n = state.tree.nodes[nodeId];
+    if (!n || n.status === "done") return;
+    const ok = await confirmModal({
+      title: t("app.done.title"),
+      message: t("app.done.msg", { id: n.id, title: n.title }),
+      okLabel: t("app.done.ok")
+    });
+    if (!ok) return;
+    void api("PATCH", `/nodes/${nodeId}`, { status: "done" });
+  },
+  onGoto: gotoNode,
+  onOpenDoc(path) {
+    openViewer(path);
+  }
+});
+function gotoNode(nodeId) {
+  const n = state.tree.nodes[nodeId];
+  if (!n) return;
+  if (ancestorsArchived(n)) {
+    state.showArchived = true;
+    $("#btn-archive").classList.add("on");
+  }
+  state.activeRootId = null;
+  state.selectedId = nodeId;
+  refresh();
+  void chat.setNode(state.tree.nodes[nodeId] ?? null);
+}
+const explorer = new Explorer($("#explorer"), {
+  api,
+  onOpen: openViewer,
+  // current-context nodes for search (current project, or projectless when none is active) — SCR-INSIGHT-006
+  nodes: () => Object.values(state.tree.nodes ?? {}).filter((n) => (n.projectId ?? null) === (state.tree.currentProjectId ?? null)),
+  onGoto: gotoNode,
+  hasSelection: () => !!state.selectedId,
+  // 📎 on a file -> attach it as the selected node's artifact (docPath = prefixed "folderId:relpath" key).
+  async onLink(path) {
+    if (!state.selectedId) return;
+    await api("PATCH", `/nodes/${state.selectedId}`, { docPath: path });
+    toast(t("app.toast.linked"), "success");
+  },
+  async onSwitchWs(id) {
+    const target = id === "none" ? null : id;
+    if (target === (state.tree.currentProjectId ?? null)) return;
+    try {
+      await api("POST", `/projects/${id || "none"}/activate`);
+    } catch {
+      explorer.setProjects(Object.values(state.tree.projects ?? {}), state.tree.currentProjectId);
+    }
+  },
+  // Create a project name-only — folders are added later in ⚙ settings (talking works without one).
+  async onAddWs() {
+    const v = await formModal({
+      title: t("app.newProject.title"),
+      submitLabel: t("app.newProject.submit"),
+      fields: [{ name: "name", label: t("app.newProject.name"), type: "text", placeholder: t("app.newProject.ph") }]
+    });
+    if (v === null) return;
+    const name = String(v.name ?? "").trim();
+    if (!name) return;
+    await api("POST", "/projects", { name });
+  },
+  async onRemoveWs(id) {
+    const pj = state.tree.projects?.[id];
+    if (!pj) return;
+    const ok = await confirmModal({
+      title: t("app.removeProject.title"),
+      message: t("app.removeProject.msg", { name: pj.name }),
+      okLabel: t("common.remove"),
+      danger: true
+    });
+    if (!ok) return;
+    await api("DELETE", `/projects/${id}`);
+  },
+  onSettings: openProjectSettings
+});
+function openProjectSettings() {
+  if (!state.tree.currentProjectId) {
+    toast(t("app.toast.selectProjectFirst"), "info");
+    return;
+  }
+  void openSettingsModal({
+    api,
+    nodes: () => Object.values(state.tree.nodes ?? {}),
+    onOpenDoc: openViewer,
+    onShowGuidelines: showGuidelines
+  });
+}
+function showGuidelines() {
+  void showGuidelinesModal(api);
+}
+function doneCandidates(tree) {
+  const nodes = Object.values(tree.nodes ?? {});
+  const out = /* @__PURE__ */ new Set();
+  for (const n of nodes) {
+    if (n.status === "done") continue;
+    const kids = nodes.filter((c) => c.parentId === n.id && !c.archived);
+    if (kids.length && kids.every((c) => c.status === "done")) out.add(n.id);
+  }
+  return out;
+}
+function projectView() {
+  const cur = state.tree.currentProjectId;
+  const inProject = (n) => cur ? n.projectId === cur : !n.projectId;
+  const nodes = {};
+  for (const [id, n] of Object.entries(state.tree.nodes ?? {})) {
+    if (inProject(n)) nodes[id] = n;
+  }
+  return { ...state.tree, nodes };
+}
+function refresh() {
+  const view = projectView();
+  let sel = view.nodes[state.selectedId ?? ""] ?? null;
+  if (!sel && state.selectedId) {
+    state.selectedId = null;
+    void chat.setNode(null);
+  }
+  sel = state.selectedId ? view.nodes[state.selectedId] ?? null : null;
+  $("#sel-lang").value = state.tree.language ?? "";
+  const navLoc = (navigator.language || "ko").slice(0, 2);
+  const lang = state.tree.language;
+  const uiLoc = lang === "ko" || lang === "en" || lang === "ja" ? lang : navLoc === "en" ? "en" : navLoc === "ja" ? "ja" : "ko";
+  if (uiLoc !== currentLocale()) setLocale(uiLoc);
+  if (document.activeElement !== $("#sel-style")) {
+    $("#sel-style").value = state.tree.settings?.style ?? "";
+  }
+  const settings = state.tree.settings;
+  const reflectSel = (sel2, val) => {
+    const el = document.querySelector(sel2);
+    if (el && document.activeElement !== el) el.value = val;
+  };
+  reflectSel("#chat-model", settings?.model ?? "");
+  reflectSel("#chat-effort", settings?.effort ?? "");
+  reflectSel("#chat-perm", settings?.permission ?? "bypass");
+  explorer.setProjects(Object.values(state.tree.projects ?? {}), state.tree.currentProjectId);
+  renderRootTabs(view);
+  const visible = visibleIds(view);
+  if (state.selectedId && !visible.has(state.selectedId)) {
+    state.selectedId = null;
+    void chat.setNode(null);
+    sel = null;
+  }
+  const dimmed = state.showArchived ? new Set([...visible].filter((id) => ancestorsArchived(view.nodes[id]))) : /* @__PURE__ */ new Set();
+  canvas.render(view, state.selectedId, doneCandidates(view), state.busy, visible, dimmed);
+  $("#btn-del").disabled = !sel;
+  $("#sel-status").disabled = !sel;
+  $("#sel-status").value = sel?.status ?? "";
+  $("#sel-info").textContent = sel ? `${sel.id} \xB7 ${sel.title}${sel.sessionId ? ` \xB7 ${t("app.sessionLinked")}` : ""}` : "";
+  const docBtn = $("#sel-doc");
+  docBtn.hidden = !sel?.docPath;
+  docBtn.onclick = sel?.docPath ? () => openViewer(sel.docPath) : null;
+  chat.updateNode(sel);
+}
+function descendantIds(id) {
+  const all = Object.values(state.tree.nodes ?? {});
+  const out = [];
+  const walk = (pid) => {
+    for (const n of all) if (n.parentId === pid) {
+      out.push(n.id);
+      walk(n.id);
+    }
+  };
+  walk(id);
+  return out;
+}
+async function forkNode(parentId) {
+  const parent = state.tree.nodes[parentId];
+  if (!parent) return;
+  const v = await formModal({
+    title: t("app.fork.title"),
+    submitLabel: t("app.fork.submit"),
+    fields: [
+      { name: "title", label: t("app.fork.field.title"), value: t("app.fork.titleSuffix", { name: parent.title }) },
+      { name: "summary", type: "textarea", label: t("app.fork.field.summary"), rows: 3, placeholder: t("app.fork.field.summaryPh") },
+      { name: "returns", type: "checkbox", label: t("app.fork.field.returns"), checkLabel: t("app.fork.field.returnsCheck"), value: false },
+      { name: "worktree", type: "checkbox", label: t("app.fork.field.worktree"), checkLabel: t("app.fork.field.worktreeCheck"), value: false }
+    ]
+  });
+  if (v === null) return;
+  const title = String(v.title ?? "").trim();
+  if (!title) return;
+  const summary = String(v.summary ?? "").trim();
+  const child = await api("POST", `/nodes/${parentId}/fork`, { title, summary, returns: v.returns === true, worktree: v.worktree === true });
+  state.selectedId = child.id;
+  void chat.setNode(child);
+}
+async function deleteNode(id) {
+  const node = state.tree.nodes[id];
+  if (!node) return;
+  const kids = descendantIds(id);
+  const ok = await confirmModal({
+    title: t("app.delete.title"),
+    message: kids.length ? t("app.delete.msgCascade", { id: node.id, title: node.title, count: kids.length }) : t("app.delete.msg", { id: node.id, title: node.title }),
+    okLabel: t("common.delete"),
+    danger: true
+  });
+  if (!ok) return;
+  await api("DELETE", `/nodes/${id}?cascade=1`);
+  if (state.selectedId === id || kids.includes(state.selectedId ?? "")) {
+    state.selectedId = null;
+    void chat.setNode(null);
+  }
+}
+function rootOf(id) {
+  let cur = state.tree.nodes[id];
+  while (cur?.parentId && state.tree.nodes[cur.parentId]) cur = state.tree.nodes[cur.parentId];
+  return cur?.id ?? id;
+}
+async function reparentNode(id) {
+  const node = state.tree.nodes[id];
+  if (!node) return;
+  const blocked = /* @__PURE__ */ new Set([id, ...descendantIds(id)]);
+  const candidates = Object.values(state.tree.nodes ?? {}).filter(
+    (n) => !blocked.has(n.id) && !n.archived && (n.projectId ?? null) === (node.projectId ?? null)
+  );
+  const options = [
+    { value: "", label: t("app.reparent.detach") },
+    ...candidates.map((n) => ({ value: n.id, label: `${n.id} \xB7 ${n.title}` }))
+  ];
+  const v = await formModal({
+    title: t("app.reparent.title"),
+    submitLabel: t("app.reparent.submit"),
+    fields: [{ name: "parent", type: "select", label: t("app.reparent.field"), value: node.parentId ?? "", options }]
+  });
+  if (v === null) return;
+  const parent = String(v.parent ?? "") || null;
+  if (parent === (node.parentId ?? null)) return;
+  await api("PATCH", `/nodes/${id}`, { parentId: parent });
+}
+async function archiveNode(id) {
+  const node = state.tree.nodes[id];
+  if (!node) return;
+  await api("PATCH", `/nodes/${id}`, { archived: !node.archived });
+}
+const MAX_ROOT_TABS = 5;
+function projectRoots(view) {
+  return Object.values(view.nodes ?? {}).filter((n) => !n.parentId && !n.archived).sort((a, b) => (b.viewedAt ?? 0) - (a.viewedAt ?? 0) || a.createdAt - b.createdAt);
+}
+function ancestorsArchived(n) {
+  let cur = n;
+  while (cur) {
+    if (cur.archived) return true;
+    cur = cur.parentId ? state.tree.nodes[cur.parentId] : void 0;
+  }
+  return false;
+}
+function visibleIds(view) {
+  const inView = (id) => id in view.nodes;
+  const base = state.activeRootId && view.nodes[state.activeRootId] ? new Set([state.activeRootId, ...descendantIds(state.activeRootId)].filter(inView)) : new Set(Object.keys(view.nodes));
+  if (state.showArchived) return base;
+  return new Set([...base].filter((id) => !ancestorsArchived(view.nodes[id])));
+}
+function pickRoot(id) {
+  state.activeRootId = id;
+  if (id) void api("PATCH", `/nodes/${id}`, { viewedAt: Date.now() });
+  refresh();
+}
+function renderRootTabs(view) {
+  const bar = $("#root-tabs");
+  bar.replaceChildren();
+  const roots = projectRoots(view);
+  if (state.activeRootId && !roots.some((r) => r.id === state.activeRootId)) state.activeRootId = null;
+  if (roots.length <= 1) {
+    bar.hidden = true;
+    return;
+  }
+  bar.hidden = false;
+  const mkTab = (label, active, onClick, title) => {
+    const b = document.createElement("button");
+    b.className = "root-tab" + (active ? " active" : "");
+    b.textContent = label.length > 14 ? `${label.slice(0, 13)}\u2026` : label;
+    if (title) b.title = title;
+    b.onclick = onClick;
+    return b;
+  };
+  bar.append(mkTab(t("rootTabs.all"), state.activeRootId == null, () => pickRoot(null), t("rootTabs.all.title")));
+  for (const r of roots.slice(0, MAX_ROOT_TABS)) {
+    bar.append(mkTab(r.title, state.activeRootId === r.id, () => pickRoot(r.id), `${r.id} \xB7 ${r.title}`));
+  }
+  const overflow = roots.slice(MAX_ROOT_TABS);
+  if (overflow.length) {
+    const more = document.createElement("button");
+    more.className = "root-tab more";
+    more.textContent = `\u2026 ${overflow.length}`;
+    more.onclick = (e) => {
+      popover(
+        overflow.map((r) => ({ label: `${r.id} \xB7 ${r.title}`, onClick: () => pickRoot(r.id) })),
+        e.currentTarget.getBoundingClientRect()
+      );
+    };
+    bar.append(more);
+  }
+}
+$("#btn-root").onclick = async () => {
+  const title = window.prompt(t("app.rootPrompt"));
+  if (!title?.trim()) return;
+  const node = await api("POST", "/nodes", { title: title.trim() });
+  state.selectedId = node.id;
+};
+function applyTheme(t2) {
+  if (t2 === "light" || t2 === "dark") document.documentElement.setAttribute("data-theme", t2);
+  else document.documentElement.removeAttribute("data-theme");
+}
+const themeSel = $("#sel-theme");
+themeSel.value = (() => {
+  try {
+    const t2 = localStorage.getItem("otree-theme");
+    return t2 === "light" || t2 === "dark" ? t2 : "system";
+  } catch {
+    return "system";
+  }
+})();
+themeSel.onchange = () => {
+  const t2 = themeSel.value;
+  try {
+    if (t2 === "system") localStorage.removeItem("otree-theme");
+    else localStorage.setItem("otree-theme", t2);
+  } catch {
+  }
+  applyTheme(t2);
+};
+$("#sel-lang").onchange = (e) => {
+  const v = e.target.value;
+  void api("POST", "/language", { language: v || null });
+  const nav = (navigator.language || "ko").slice(0, 2);
+  const uiLoc = v === "ko" || v === "en" || v === "ja" ? v : nav === "en" ? "en" : nav === "ja" ? "ja" : "ko";
+  setLocale(uiLoc);
+};
+document.documentElement.lang = currentLocale();
+applyDataI18n();
+onLocaleChange(() => {
+  refresh();
+  void explorer.refresh();
+  void chat.setNode(state.selectedId ? state.tree.nodes[state.selectedId] ?? null : null);
+});
+$("#sel-style").onchange = (e) => {
+  void api("PATCH", "/settings", { style: e.target.value });
+};
+$("#sel-status").onchange = async (e) => {
+  const value = e.target.value;
+  const id = state.selectedId;
+  if (!id || !value) return;
+  if (value === "waiting_handoff") {
+    const v = await formModal({
+      title: t("app.handoff.title"),
+      submitLabel: t("app.handoff.submit"),
+      fields: [{ name: "handoffPath", label: t("app.handoff.path"), value: state.tree.nodes[id]?.handoffPath ?? "", placeholder: "docs/handoff.md" }]
+    });
+    if (v === null) {
+      refresh();
+      return;
+    }
+    await api("PATCH", `/nodes/${id}`, { status: value, handoffPath: String(v.handoffPath ?? "").trim() || null });
+    return;
+  }
+  void api("PATCH", `/nodes/${id}`, { status: value });
+};
+$("#btn-del").onclick = () => {
+  if (state.selectedId) void deleteNode(state.selectedId);
+};
+$("#btn-archive").onclick = () => {
+  state.showArchived = !state.showArchived;
+  $("#btn-archive").classList.toggle("on", state.showArchived);
+  refresh();
+};
+$("#btn-quit").onclick = async () => {
+  if (!window.confirm(t("app.quit.confirm"))) return;
+  try {
+    await fetch("/api/shutdown", { method: "POST" });
+  } catch {
+  }
+  document.body.innerHTML = `<div style="padding:40px;font:16px system-ui;color:var(--text-3)">${t("app.quit.done")}</div>`;
+};
+const reportBtn = $("#btn-report");
+async function openReport() {
+  const v = await reportModal({ body: chat.lastAssistantText() });
+  if (v === null) return;
+  const ctx = { appVersion: appReportVersion, locale: currentLocale() };
+  if (state.selectedId) ctx.nodeId = state.selectedId;
+  const res = await api("POST", "/report", {
+    title: v.title,
+    body: v.body,
+    context: ctx,
+    ...v.images.length ? { images: v.images } : {}
+  });
+  if (res?.ok) toast(t("report.toast.success"), "success");
+}
+reportBtn.onclick = () => {
+  void openReport();
+};
+const pairBtn = $("#btn-pair");
+pairBtn.onclick = () => openPairingPanel();
+function applyPairGate(enabled) {
+  pairBtn.hidden = !enabled;
+  pairBtn.disabled = !enabled;
+}
+const settingsBtn = $("#btn-settings");
+settingsBtn.onclick = () => void openConnectionSettings();
+function applySettingsGate(enabled) {
+  settingsBtn.hidden = !enabled;
+  settingsBtn.disabled = !enabled;
+}
+let appReportVersion = "";
+function applyReportGate(enabled) {
+  reportBtn.hidden = !enabled;
+  reportBtn.disabled = !enabled;
+}
+fetch("/api/config").then((r) => r.json()).then((c) => {
+  appReportVersion = c.version ?? "";
+  applyReportGate(c.reportEnabled === true);
+  applyPairGate(c.pairEnabled === true);
+  applySettingsGate(c.setupEditable === true);
+  if (c.claudeMissing) toast(t("claude.missing"), "error", 8e3);
+}).catch(() => {
+  applyReportGate(false);
+  applyPairGate(false);
+  applySettingsGate(false);
+});
+$("#zoom-out").onclick = () => canvas.zoomBy(1.2);
+$("#zoom-in").onclick = () => canvas.zoomBy(1 / 1.2);
+$("#zoom-fit").onclick = () => canvas.fitView();
+$("#zoom-arrange").onclick = async () => {
+  await api("POST", "/arrange");
+  canvas.fitView();
+};
+let viewerWin = null;
+const viewerChannel = new BroadcastChannel("otree-viewer");
+function openViewer(path) {
+  if (!viewerWin || viewerWin.closed) {
+    const h = Math.min(screen.availHeight - 60, 1100);
+    const w = Math.round(h * 3 / 4);
+    viewerWin = window.open(
+      `/view?path=${encodeURIComponent(path)}`,
+      "otree-viewer",
+      `width=${w},height=${h},menubar=no,toolbar=no`
+    );
+  } else {
+    viewerChannel.postMessage({ path });
+    viewerWin.focus();
+  }
+}
+function makeResizer(handleId, cssVar, storeKey, side) {
+  const root = document.documentElement;
+  const saved = parseInt(localStorage.getItem(storeKey) ?? "", 10);
+  if (saved) root.style.setProperty(cssVar, `${saved}px`);
+  const handle = document.querySelector(`#${handleId}`);
+  if (!handle) return;
+  const MIN = 200, GAP = 360;
+  let dragging = false;
+  const clamp = (w) => Math.max(MIN, Math.min(w, window.innerWidth - GAP));
+  handle.addEventListener("pointerdown", (e) => {
+    dragging = true;
+    handle.setPointerCapture(e.pointerId);
+    handle.classList.add("dragging");
+    document.body.classList.add("resizing");
+  });
+  handle.addEventListener("pointermove", (e) => {
+    if (!dragging) return;
+    const w = clamp(side === "left" ? e.clientX : window.innerWidth - e.clientX);
+    root.style.setProperty(cssVar, `${w}px`);
+  });
+  const stop = (e) => {
+    if (!dragging) return;
+    dragging = false;
+    handle.releasePointerCapture(e.pointerId);
+    handle.classList.remove("dragging");
+    document.body.classList.remove("resizing");
+    const w = parseInt(getComputedStyle(root).getPropertyValue(cssVar), 10);
+    if (w) localStorage.setItem(storeKey, String(w));
+  };
+  handle.addEventListener("pointerup", stop);
+  handle.addEventListener("pointercancel", stop);
+}
+makeResizer("exp-resizer", "--exp-w", "otree-exp-w", "left");
+makeResizer("chat-resizer", "--chat-w", "otree-chat-w", "right");
+let lastUsage = null;
+function fmtReset(iso) {
+  if (!iso) return "";
+  const ts = new Date(iso).getTime();
+  if (isNaN(ts)) return "";
+  const diff = ts - Date.now();
+  if (diff <= 0) return t("app.usage.resetSoon");
+  const min = Math.round(diff / 6e4);
+  if (min < 60) return t("app.usage.resetMin", { n: min });
+  const h = Math.floor(min / 60), m = min % 60;
+  if (h < 24) return t(m ? "app.usage.resetHourMin" : "app.usage.resetHour", { h, m });
+  return t("app.usage.resetDay", { n: Math.floor(h / 24) });
+}
+function usageLevel(used) {
+  return used >= 90 ? "crit" : used >= 70 ? "warn" : "ok";
+}
+function usageItem(label, w) {
+  const used = Math.max(0, Math.min(100, w.used));
+  const remain = Math.max(0, 100 - used);
+  const reset = fmtReset(w.resetsAt);
+  const tip = `${t("app.usage.tip", { label, used, remain })}${reset ? ` \xB7 ${reset}` : ""}`;
+  return `<span class="usage-item ${usageLevel(used)}" title="${tip}">
+    <span class="ulabel">${label}</span>
+    <span class="ubar"><i style="width:${used}%"></i></span>
+    <span class="upct">${used}%</span>
+  </span>`;
+}
+function renderUsage(u) {
+  const el = $("#usage");
+  if (u && "available" in u && u.available) lastUsage = u;
+  const view = u && "available" in u && u.available ? u : lastUsage;
+  if (!view || !view.available) {
+    el.hidden = true;
+    el.innerHTML = "";
+    return;
+  }
+  const parts = [];
+  if (view.fiveHour) parts.push(usageItem(t("app.usage.fiveHour"), view.fiveHour));
+  if (view.sevenDay) parts.push(usageItem(t("app.usage.weekly"), view.sevenDay));
+  if (!parts.length) {
+    el.hidden = true;
+    el.innerHTML = "";
+    return;
+  }
+  el.innerHTML = `<span class="usage-cap" title="${t("app.usage.cap")}">\u{1F4CA}</span>` + parts.join("");
+  el.hidden = false;
+}
+function connect() {
+  const es = new EventSource("/api/events");
+  es.addEventListener("tree", (e) => {
+    state.tree = JSON.parse(e.data);
+    refresh();
+    explorer.setLocks(state.tree.locks ?? {});
+    void explorer.refresh();
+  });
+  es.addEventListener("node-stream", (e) => chat.onStream(JSON.parse(e.data)));
+  es.addEventListener("busy", (e) => {
+    const ids = JSON.parse(e.data);
+    state.busy = new Set(ids);
+    chat.setBusy(ids);
+    refresh();
+  });
+  es.addEventListener("files", () => void explorer.refresh());
+  let newtDownloadToasted = false;
+  es.addEventListener("newt-acquire", (e) => {
+    const p = JSON.parse(e.data);
+    if (p.phase === "download" && !newtDownloadToasted) {
+      newtDownloadToasted = true;
+      toast(t("newt.downloading"), "info", 6e3);
+    } else if (p.phase === "done") {
+      toast(t("newt.ready"), "success");
+    } else if (p.phase === "failed") {
+      toast(t("newt.failed"), "error", 8e3);
+    }
+  });
+  es.addEventListener("usage", (e) => renderUsage(JSON.parse(e.data)));
+  es.addEventListener("commands", (e) => chat.setCommands(JSON.parse(e.data)));
+  es.addEventListener("fork-proposal", (e) => chat.onForkProposal(JSON.parse(e.data)));
+  es.addEventListener("node-notice", (e) => chat.onNotice(JSON.parse(e.data)));
+  es.addEventListener("permission-request", (e) => chat.onPermissionRequest(JSON.parse(e.data)));
+  es.addEventListener("permission-closed", (e) => chat.onPermissionClosed(JSON.parse(e.data)));
+  es.onopen = () => $("#conn").classList.remove("off");
+  es.onerror = () => $("#conn").classList.add("off");
+}
+connect();
+refresh();
+fetch("/api/usage").then((r) => r.json()).then((u) => renderUsage(u)).catch(() => {
+});
+fetch("/api/commands").then((r) => r.json()).then((c) => chat.setCommands(c)).catch(() => {
+});
+setInterval(() => renderUsage(), 6e4);