@oharness/server 0.7.0 → 0.8.0

package/dist/page/client/panels.js

@@ -0,0 +1,659 @@
+/**
+ * The remaining side panels — every artifact, the counts in the sidebar,
+ * plugin pages and the memory page — and the navigation between them.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const PANELS = String.raw `
+async function showAllArtifacts() {
+  const body = await getJson("/artifacts/all");
+  panelBody.replaceChildren();
+  if (body.error) return void panelBody.appendChild(panelError(body.error));
+  artifactKey = body.viewKey || artifactKey;
+
+  const panel = el("div", "panel");
+  panel.appendChild(el("h2", null, t("nav.artifacts")));
+
+  const groups = body.sessions || [];
+  if (!groups.length) {
+    panel.appendChild(el("p", "muted", t("artifacts.none")));
+    panel.appendChild(el("p", "muted", t("artifacts.what")));
+    panelBody.appendChild(panel);
+    return;
+  }
+
+  // Flattened once, with each row remembering the session it came from: the
+  // grouping is drawn from this order rather than iterated from the groups,
+  // so a filtered list keeps its headings without a second pass.
+  const rows = [];
+  for (const group of groups) {
+    for (const artifact of group.artifacts) rows.push({ group, artifact });
+  }
+
+  const search = el("input", "art-search");
+  search.type = "search";
+  search.placeholder = t("artifacts.search");
+  search.spellcheck = false;
+  search.autocomplete = "off";
+  panel.appendChild(search);
+
+  const summary = el("div", "muted small art-summary");
+  panel.appendChild(summary);
+
+  const list = el("div");
+  panel.appendChild(list);
+
+  panel.appendChild(el("p", "muted small art-note", t("artifacts.fromLogs")));
+  if (body.more) {
+    panel.appendChild(el("p", "muted small art-note", t("artifacts.more", { n: body.more })));
+  }
+
+  // Every keystroke redraws the list, which is affordable because the rows are
+  // already in memory: this is a filter over an array, not a request.
+  search.addEventListener("input", () => draw(search.value));
+  draw("");
+  panelBody.appendChild(panel);
+  // The panel is reached by a deliberate click, and the first thing anybody
+  // does with a list this long is narrow it.
+  search.focus();
+
+  /**
+   * Whether one row answers what was typed.
+   *
+   * Every word has to match something, and the haystack is everything the row
+   * shows plus the id the model chose: "chart tmp" finds the chart made in the
+   * tmp project, which is how somebody actually remembers an artifact.
+   */
+  function matches(entry, terms) {
+    const hay = [
+      entry.artifact.title,
+      entry.artifact.id,
+      entry.artifact.kind,
+      entry.artifact.language || "",
+      entry.group.title || "",
+    ].join(" ").toLowerCase();
+    return terms.every((term) => hay.indexOf(term) >= 0);
+  }
+
+  function draw(query) {
+    const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+    const found = terms.length ? rows.filter((entry) => matches(entry, terms)) : rows;
+
+    // Only while filtering. Unfiltered the count is already in the sidebar,
+    // and a line saying it twice is a line that says nothing.
+    summary.textContent = terms.length
+      ? t("artifacts.showing", { n: found.length, total: rows.length })
+      : "";
+
+    list.replaceChildren();
+    if (!found.length) {
+      list.appendChild(el("p", "muted", t("artifacts.noMatch", { q: query.trim() })));
+      return;
+    }
+
+    let session = null;
+    for (const entry of found) {
+      if (entry.group.session !== session) {
+        session = entry.group.session;
+        list.appendChild(sessionHeading(entry.group));
+      }
+      list.appendChild(artifactRow(entry.group, entry.artifact));
+    }
+  }
+
+  /** Which session the rows under it belong to, and when it was last touched. */
+  function sessionHeading(group) {
+    const heading = el("div", "art-group");
+    heading.appendChild(el("span", null, group.title || t("session.untitled")));
+    if (group.current) heading.appendChild(el("span", "tag", t("artifacts.thisSession")));
+    if (group.updatedAt) heading.appendChild(el("span", "muted art-when", ago(group.updatedAt)));
+    return heading;
+  }
+
+  function artifactRow(group, artifact) {
+    const row = el("div", "row-card");
+    const head = el("div", "row-head");
+
+    const mark = el("span", "art-card-mark");
+    mark.appendChild(kindIcon(artifact.kind));
+    head.appendChild(mark);
+    head.appendChild(el("span", "row-title", artifact.title));
+
+    const parts = [artifact.kind, formatBytes(artifact.bytes)];
+    if (artifact.version > 1) parts.push("v" + artifact.version);
+    if (artifact.at) parts.push(ago(artifact.at));
+    head.appendChild(el("span", "muted small", parts.join(" · ")));
+    // Said here because the panel is where someone goes looking for a link
+    // they shared, and a published artifact is the only kind that outlives
+    // this process.
+    if (artifact.publication) head.appendChild(el("span", "tag", "published"));
+
+    const open = el("button", "ghost", t("artifacts.open"));
+    open.type = "button";
+    open.addEventListener("click", () => void openArtifactFrom(group.session, artifact.id));
+    head.appendChild(open);
+
+    row.appendChild(head);
+    row.addEventListener("click", (event) => {
+      if (event.target !== open) void openArtifactFrom(group.session, artifact.id);
+    });
+    return row;
+  }
+}
+
+/** Leave the panel and show one artifact, switching sessions if it is elsewhere. */
+async function openArtifactFrom(session, id) {
+  if (session !== activeId) await openSession(session);
+  setNav(null);
+  shelf.classList.add("open");
+  // The list the shelf works from belongs to whichever session is now current,
+  // so it is reloaded before asking it for this id.
+  await loadArtifacts();
+  artifactVersion.delete(id);
+  await showArtifact(id);
+}
+
+async function refreshArtifactCount() {
+  const body = await getJson("/artifacts/all");
+  const count = document.getElementById("artifact-count");
+  if (!count) return;
+  const total = (body.sessions || []).reduce((sum, group) => sum + group.artifacts.length, 0);
+  count.textContent = total ? String(total) : "";
+}
+
+async function refreshRoutineCount() {
+  const { routines } = await getJson("/routines");
+  const count = document.getElementById("routine-count");
+  count.textContent = routines && routines.length ? String(routines.length) : "";
+}
+
+/** Sidebar entries that open a view of their own rather than a conversation. */
+const PANEL_NAV = new Set(["nav-artifacts", "nav-models", "nav-routines", "nav-settings"]);
+const pluginPages = new Map();
+async function refreshPluginPages() {
+  const session = activeId;
+  const result = await getJson("/plugin-pages?session=" + encodeURIComponent(session || ""));
+  if (activeId !== session) return;
+  for (const id of pluginPages.keys()) { document.getElementById("nav-plugin-" + id)?.remove(); PANEL_NAV.delete("nav-plugin-" + id); }
+  pluginPages.clear();
+  /*
+   * Remembered, not put in the sidebar.
+   *
+   * A plugin page is reached from a row in Settings instead. The sidebar is
+   * the set of places a session goes back to, and Memory is not one of them —
+   * it is read now and then and adjusted less often than that, which is the
+   * same reason usage lives behind a Settings row rather than beside Models.
+   * Every one of these becomes a SUB_PANEL, so the Settings row it came from
+   * stays lit while it is open.
+   */
+  for (const page of result.pages || []) {
+    if (page.renderer !== "memory") continue;
+    pluginPages.set(page.id, page);
+    SUB_PANELS["nav-plugin-" + page.id] = "nav-settings";
+  }
+}
+
+/** Ids for label/control pairs; only has to be unique within the document. */
+let fieldSeq = 0;
+
+async function showMemoryPage(id) {
+  const session = activeId;
+  const result = await getJson("/plugin-page?id=" + encodeURIComponent(id) + "&session=" + encodeURIComponent(session || ""));
+  if (shownPanel !== "nav-plugin-" + id || activeId !== session) return;
+  panelBody.replaceChildren(); panelNotes.replaceChildren();
+  if (result.error && !result.entries) return void panelBody.appendChild(panelError(result.error));
+  const panel = el("div", "panel memory-panel"); panelBody.appendChild(panel);
+  panel.appendChild(el("h2", "", t("memory.title")));
+  /*
+   * One card for what a visit is for: is sync working, how many notes there
+   * are, and what to do next. The state is said once, in words, with a line
+   * on what it means; an error sits inside it rather than in a separate
+   * "could not load" box, which read as the page itself being broken. The
+   * same message from both scopes is shown once.
+   */
+  const failures = [];
+  for (const failure of (result.errors && result.errors.length ? result.errors : result.error ? [{ message: result.error }] : [])) {
+    const same = failures.find((one) => memoryText(one) === memoryText(failure));
+    if (same) same.scope = "both"; else failures.push({ ...failure });
+  }
+  const needsSignIn = !result.signedIn || failures.some((one) => one.code === "signInFirst" || one.code === "signInAgain");
+  const state = !result.signedIn ? "local" : result.accountChanged ? "account" : !result.enabled ? "off" : result.syncing ? "syncing" : failures.length ? "error" : "on";
+  const summaryCard = el("section", "row-card memory-summary");
+  panel.appendChild(summaryCard);
+  const status = el("div", "memory-state", t("memory.state." + state));
+  summaryCard.appendChild(status);
+  summaryCard.appendChild(el("p", "muted small", t("memory.stateHint." + state)));
+  for (const failure of failures) {
+    const text = memoryText(failure);
+    const message = !result.userAvailable || !failure.scope || failure.scope === "both" ? text
+      : failure.scope === "user" ? t("memory.errorUser", { message: text })
+      : t("memory.errorProject", { message: text });
+    summaryCard.appendChild(el("p", "small memory-error", message));
+  }
+  const facts = [];
+  const projectCount = result.entries.filter((entry) => entry.scope !== "user").length;
+  facts.push(result.userAvailable
+    ? t("memory.countsScoped", { project: projectCount, user: result.entries.length - projectCount })
+    : t("memory.counts", { count: result.entries.length }));
+  // The ceiling is only news when it is close.
+  if (result.limits && result.entries.length > result.limits.maxNotes * 0.8) facts.push(t("memory.usage", { count: result.entries.length, max: result.limits.maxNotes }));
+  if (result.lastSync) facts.push(t("memory.lastSync", { when: new Date(result.lastSync).toLocaleString(LOCALE) }));
+  summaryCard.appendChild(el("p", "muted small", facts.join(" · ")));
+  if (result.omitted) summaryCard.appendChild(el("p", "muted small", t("memory.omitted", { count: result.omitted })));
+  if (result.quota && result.quota.tier === "free" && result.quota.maxNotes) {
+    summaryCard.appendChild(el("p", "muted small", t("memory.tierFree", { notes: result.quota.maxNotes, kb: Math.max(1, Math.round((result.quota.maxNoteBytes || 0) / 1024)) })));
+  }
+  // Where the files are, and how sync behaves, is looked up once; folded away by default.
+  const about = el("details", "memory-about small");
+  about.appendChild(el("summary", "muted", t("memory.aboutStorage")));
+  about.appendChild(el("p", "muted", t("memory.intro")));
+  if (result.locations && result.locations.user) {
+    about.appendChild(el("p", "muted small", t("memory.projectLocation")));
+    about.appendChild(el("p", "mono small memory-path", result.locations.project));
+    about.appendChild(el("p", "muted small", t("memory.userLocation")));
+    about.appendChild(el("p", "mono small memory-path", result.locations.user));
+  } else about.appendChild(el("p", "mono small memory-path", result.location));
+  panel.appendChild(about);
+  for (const pull of result.recent || []) {
+    const details = el("details", "memory-recent small");
+    details.appendChild(el("summary", "", t("memory.recentPulled", {
+      when: new Date(pull.at).toLocaleString(LOCALE), created: pull.created.length, updated: pull.updated.length, deleted: pull.deleted.length, merged: (pull.merged || []).length,
+    })));
+    for (const [key, notes] of [["memory.recentCreated", pull.created], ["memory.recentUpdated", pull.updated], ["memory.recentDeleted", pull.deleted], ["memory.recentMerged", pull.merged || []]]) {
+      for (const note of notes) details.appendChild(el("div", "muted", t(key, { summary: note.summary })));
+    }
+    panel.appendChild(details);
+  }
+  const act = async (input) => {
+    try {
+      const reply = await api("/plugin-page", { page: id, session, input }, 120000);
+      if (reply.error) throw Object.assign(new Error(reply.error), { code: reply.code, params: reply.params });
+      await showMemoryPage(id);
+    } catch (error) {
+      if (activeId === session && shownPanel === "nav-plugin-" + id) {
+        await showMemoryPage(id);
+        // In the summary card, in the page's language. The generic "could not
+        // load" box read as the page being broken, and its hint about the
+        // server's URL token has nothing to do with a refused action.
+        const note = el("p", "small memory-error", memoryText(error));
+        const card = panelBody.querySelector(".memory-summary");
+        (card || panelBody).appendChild(note);
+        note.scrollIntoView({ block: "nearest" });
+      }
+    }
+  };
+  const controls = el("div", "memory-actions");
+  if (needsSignIn) {
+    const signIn = el("button", "signin-site", t("memory.signIn")); signIn.type = "button";
+    signIn.onclick = async () => { const account = await getJson("/account"); openConnect(account && account.provider); };
+    controls.appendChild(signIn);
+  }
+  const toggle = el("button", "ghost", result.enabled ? t("memory.turnOff") : t("memory.turnOn"));
+  toggle.setAttribute("role", "switch"); toggle.setAttribute("aria-label", t("memory.switchLabel")); toggle.setAttribute("aria-checked", String(result.enabled));
+  toggle.disabled = !result.enabled && (!result.signedIn || result.accountChanged);
+  toggle.onclick = async () => { toggle.disabled = true; await act({ action: "enable", enabled: !result.enabled }); toggle.disabled = false; };
+  // Signed out, "turn off cloud sync" is a switch for something that is not
+  // happening; the sign-in button is the action that means something.
+  if (result.signedIn || !result.enabled) controls.appendChild(toggle);
+  if (result.signedIn) {
+    const sync = el("button", "ghost", t("memory.syncNow")); sync.disabled = !result.ready || result.syncing;
+    sync.onclick = async () => { sync.disabled = true; status.textContent = t("memory.syncing"); await act({ action: "sync" }); sync.disabled = false; };
+    controls.appendChild(sync);
+  }
+  const refresh = el("button", "ghost", t("memory.refresh")); refresh.onclick = () => { void showMemoryPage(id); }; controls.appendChild(refresh);
+  summaryCard.appendChild(controls);
+  // A conflict is what sync could not combine: both sides changed the same part.
+  // All three versions are shown, and whatever is set aside is backed up.
+  for (const conflict of result.conflicts || []) {
+    const row = el("section", "row-card memory-conflict");
+    row.appendChild(el("strong", "", t("memory.conflict", { id: conflict.id })));
+    const fields = (conflict.fields || []).map((field) => t("memory.field." + field)).join(t("memory.fieldSeparator"));
+    if (fields) row.appendChild(el("p", "muted small", t("memory.conflictFields", { fields })));
+    const versions = el("div", "memory-versions");
+    const shown = [[t("memory.local"), conflict.local], [t("memory.cloud"), conflict.cloud]];
+    if (conflict.base) shown.unshift([t("memory.base"), conflict.base]);
+    for (const [label, note] of shown) {
+      const column = el("div", "memory-version");
+      column.appendChild(el("h4", "small", label));
+      const text = el("pre", "small", note ? note.summary + "\n\n" + note.body + (note.tags && note.tags.length ? "\n\n" + note.tags.join(", ") : "") : t("memory.deleted"));
+      text.style.whiteSpace = "pre-wrap";
+      column.appendChild(text);
+      versions.appendChild(column);
+    }
+    row.appendChild(versions);
+    const actions = el("div", "memory-actions");
+    for (const [choice, label] of [["local", t("memory.keepLocal")], ["cloud", t("memory.takeCloud")], ["both", t("memory.keepBoth")]]) {
+      if (choice === "both" && !(conflict.local && conflict.cloud)) continue;
+      const button = el("button", "ghost", label); button.type = "button";
+      button.onclick = () => { void act({ action: "resolve", scope: conflict.scope, id: conflict.id, choice }); };
+      actions.appendChild(button);
+    }
+    const byHand = el("button", "ghost", t("memory.mergeByHand")); byHand.type = "button";
+    actions.appendChild(byHand);
+    row.appendChild(actions);
+    const start = conflict.local || conflict.cloud || { summary: "", body: "", tags: [] };
+    const form = el("form", "memory-editor"); form.hidden = true;
+    const summary = el("input", ""); summary.value = start.summary; summary.required = true; summary.setAttribute("aria-label", t("memory.summaryLabel"));
+    const body = el("textarea", ""); body.value = start.body; body.rows = 8; body.required = true; body.setAttribute("aria-label", t("memory.bodyLabel"));
+    const tags = el("input", ""); tags.value = (start.tags || []).join(", "); tags.setAttribute("aria-label", t("memory.tagsLabel"));
+    for (const control of [summary, body, tags]) {
+      control.style.cssText = "display:block;width:100%;box-sizing:border-box;margin:8px 0";
+      form.appendChild(control);
+    }
+    const save = el("button", "ghost", t("memory.mergeSave")); save.type = "submit";
+    form.appendChild(save);
+    form.onsubmit = async (event) => {
+      event.preventDefault(); save.disabled = true;
+      await act({ action: "resolve", scope: conflict.scope, id: conflict.id, choice: "manual", note: {
+        summary: summary.value.trim(), body: body.value.trim(), tags: tags.value.split(/[,，\s]+/).filter(Boolean), type: start.type || "",
+      } });
+      save.disabled = false;
+    };
+    byHand.onclick = () => { form.hidden = !form.hidden; };
+    row.appendChild(form);
+    panel.appendChild(row);
+  }
+  // Tidying: what a review of the notes found, and a merge waiting to be applied.
+  const labelOf = (scope, id) => {
+    const found = result.entries.find((entry) => entry.id === id && entry.scope === scope);
+    return found ? found.summary : id;
+  };
+  if (result.proposal) {
+    const proposal = result.proposal;
+    const card = el("section", "row-card memory-conflict");
+    card.appendChild(el("strong", "", t("memory.mergeTitle", { count: proposal.ids.length })));
+    card.appendChild(el("p", "muted small", proposal.source === "model" ? t("memory.mergeFromModel") : t("memory.mergeByHandHint")));
+    const sources = el("ul", "muted small");
+    proposal.ids.forEach((id, index) => {
+      sources.appendChild(el("li", "", (index === 0 ? t("memory.mergeKeeps") : t("memory.mergeRemoves")) + labelOf(proposal.scope, id)));
+    });
+    card.appendChild(sources);
+    const form = el("form", "memory-editor");
+    const summary = el("input", ""); summary.value = proposal.draft.summary; summary.required = true; summary.setAttribute("aria-label", t("memory.summaryLabel"));
+    const body = el("textarea", ""); body.value = proposal.draft.body; body.rows = 10; body.required = true; body.setAttribute("aria-label", t("memory.bodyLabel"));
+    const tags = el("input", ""); tags.value = (proposal.draft.tags || []).join(", "); tags.setAttribute("aria-label", t("memory.tagsLabel"));
+    for (const control of [summary, body, tags]) {
+      control.style.cssText = "display:block;width:100%;box-sizing:border-box;margin:8px 0";
+      form.appendChild(control);
+    }
+    const mergeActions = el("div", "memory-actions");
+    const apply = el("button", "ghost", t("memory.mergeApply")); apply.type = "submit"; mergeActions.appendChild(apply);
+    const cancel = el("button", "ghost", t("memory.mergeCancel")); cancel.type = "button";
+    cancel.onclick = () => { void act({ action: "cancelMerge" }); };
+    mergeActions.appendChild(cancel);
+    form.appendChild(mergeActions);
+    form.onsubmit = async (event) => {
+      event.preventDefault();
+      if (!confirm(t("memory.mergeConfirm"))) return;
+      apply.disabled = true;
+      await act({ action: "merge", note: { summary: summary.value.trim(), body: body.value.trim(), tags: tags.value.split(/[,，\s]+/).filter(Boolean), type: proposal.draft.type || "" } });
+      apply.disabled = false;
+    };
+    card.appendChild(form);
+    panel.appendChild(card);
+  }
+  const findings = result.review || [];
+  const consolidate = result.consolidate || {};
+  const tidy = el("details", "row-card memory-note");
+  const tidyHead = el("summary", "");
+  tidyHead.appendChild(el("span", "chev"));
+  tidyHead.appendChild(el("span", "memory-note-name", t("memory.review", { count: result.reviewTotal || findings.length })));
+  tidy.appendChild(tidyHead);
+  tidy.appendChild(el("p", "muted small", consolidate.auto ? t("memory.reviewAutoOn") : t("memory.reviewIntro")));
+  if (consolidate.lastAuto) {
+    tidy.appendChild(el("p", "muted small", t("memory.reviewLastAuto", { when: new Date(consolidate.lastAuto.at).toLocaleString(LOCALE), count: consolidate.lastAuto.merged.length })));
+  }
+  if (!findings.length) tidy.appendChild(el("p", "muted", t("memory.reviewNone")));
+  for (const finding of findings) {
+    const row = el("div", "memory-backup");
+    const text = el("div", "memory-backup-text");
+    text.appendChild(el("div", "", t("memory.finding." + finding.kind, { count: finding.ids.length })));
+    const names = finding.ids.map((id) => labelOf(finding.scope, id)).join(" / ");
+    text.appendChild(el("div", "muted small", names + (finding.detail && finding.detail.length ? " · " + finding.detail.join(", ") : "")));
+    row.appendChild(text);
+    const buttons = el("div", "memory-actions");
+    if (finding.kind === "duplicate") {
+      if (consolidate.modelAvailable) {
+        const suggest = el("button", "ghost", t("memory.mergeSuggest")); suggest.type = "button";
+        suggest.onclick = async () => {
+          suggest.disabled = true; suggest.textContent = t("memory.mergeThinking");
+          await act({ action: "propose", scope: finding.scope, ids: finding.ids, model: true });
+        };
+        buttons.appendChild(suggest);
+      }
+      const manual = el("button", "ghost", t("memory.mergeManual")); manual.type = "button";
+      manual.onclick = () => { void act({ action: "propose", scope: finding.scope, ids: finding.ids, model: false }); };
+      buttons.appendChild(manual);
+    } else {
+      const open = el("button", "ghost", t("memory.reviewOpen")); open.type = "button";
+      open.onclick = () => {
+        search.value = ""; draw();
+        const found = list.querySelector('[data-note-id="' + CSS.escape(finding.ids[0]) + '"]');
+        if (found) { found.open = true; found.scrollIntoView({ block: "center" }); }
+      };
+      buttons.appendChild(open);
+    }
+    const dismiss = el("button", "ghost", t("memory.reviewDismiss")); dismiss.type = "button";
+    dismiss.onclick = () => { void act({ action: "dismiss", key: finding.key }); };
+    buttons.appendChild(dismiss);
+    row.appendChild(buttons);
+    tidy.appendChild(row);
+  }
+  // Nothing to tidy is not worth a row.
+  if (findings.length || consolidate.lastAuto) panel.appendChild(tidy);
+  const editor = (note, extra) => {
+    const form = el("form", "memory-editor"), summary = el("input", ""), body = el("textarea", ""), tags = el("input", "");
+    summary.placeholder = t("memory.summaryPlaceholder"); summary.value = note?.summary || ""; summary.required = true;
+    body.placeholder = t("memory.bodyPlaceholder"); body.value = note?.body || ""; body.rows = 6; body.required = true;
+    tags.placeholder = t("memory.tagsPlaceholder"); tags.value = (note?.tags || []).join(", ");
+    const type = el("select", "");
+    for (const [value, label] of [["", t("memory.typeNone")], ["user", t("memory.typeUser")], ["feedback", t("memory.typeFeedback")], ["project", t("memory.typeProject")], ["reference", t("memory.typeReference")]]) {
+      const option = el("option", "", label); option.value = value; type.appendChild(option);
+    }
+    type.value = note?.type || "";
+    const scope = el("select", "");
+    for (const [value, label] of [["project", t("memory.scopeProject")], ["user", t("memory.scopeUser")]]) {
+      const option = el("option", "", label); option.value = value; scope.appendChild(option);
+    }
+    // A note moves between scopes by being written anew there; editing keeps it where it is.
+    scope.value = note?.scope || "project"; scope.disabled = !!note;
+    /*
+     * A label each, and a line saying what the field is for.
+     *
+     * Three boxes with only placeholders said nothing at all once they had
+     * content in them, which is every note anyone opens to edit. And the fact
+     * worth knowing here is not which box is which — it is that only the
+     * summary is ever in front of the model, so a vague one makes the note
+     * unfindable no matter how good the body is.
+     */
+    const labelled = (control, label, hint) => {
+      const group = el("div", "memory-field");
+      const name = el("label", "memory-label", label);
+      control.id = "mem-" + (fieldSeq += 1);
+      name.htmlFor = control.id;
+      group.appendChild(name);
+      if (hint) group.appendChild(el("div", "muted small", hint));
+      control.style.cssText = "display:block;width:100%;box-sizing:border-box";
+      group.appendChild(control);
+      return group;
+    };
+    form.appendChild(labelled(summary, t("memory.summaryLabel"), t("memory.summaryHint")));
+    form.appendChild(labelled(body, t("memory.bodyLabel"), t("memory.bodyHint")));
+    form.appendChild(labelled(tags, t("memory.tagsLabel"), t("memory.tagsHint")));
+    form.appendChild(labelled(type, t("memory.typeLabel"), ""));
+    if (result.userAvailable) form.appendChild(labelled(scope, t("memory.scopeLabel"), note ? "" : t("memory.scopeHint")));
+    const actions = el("div", "memory-actions");
+    const save = el("button", "ghost", note ? t("memory.save") : t("memory.add")); save.type = "submit"; actions.appendChild(save);
+    // Delete belongs beside Save, not stranded under the card: they are the two
+    // things this form can do, and stacking them read as two separate sections.
+    if (extra) actions.appendChild(extra);
+    form.appendChild(actions);
+    form.onsubmit = async (event) => { event.preventDefault(); save.disabled = true;
+      await act({ action: "save", scope: note ? note.scope : scope.value, ...(note ? { id: note.id, expectedHash: note.hash } : {}), note: { type: type.value, summary: summary.value.trim(), body: body.value.trim(), tags: tags.value.split(/[,，\s]+/).filter(Boolean) } }); save.disabled = false;
+    };
+    return form;
+  };
+  // What notes are, said once above the list. They come from conversations,
+  // so there is no form for writing one here; existing notes open to edit.
+  panel.appendChild(el("div", "section-title", t("memory.notesTitle", { count: result.entries.length })));
+  // With no notes the empty state below says all of this, with an example.
+  if (result.entries.length) panel.appendChild(el("p", "muted small memory-notes-intro", t("memory.notesIntro")));
+  const search = el("input", "memory-search"); search.placeholder = t("memory.search"); search.setAttribute("aria-label", t("memory.search")); search.style.margin = "16px 0"; search.hidden = !result.entries.length; panel.appendChild(search);
+  const list = el("div", ""); panel.appendChild(list);
+  const draw = () => {
+    list.replaceChildren(); const query = search.value.toLowerCase();
+    const entries = result.entries.filter((note) => (note.summary + " " + note.body + " " + note.tags.join(" ") + " " + (note.type || "") + " " + note.id).toLowerCase().includes(query));
+    if (!entries.length) {
+      if (result.entries.length) list.appendChild(el("p", "muted small", t("memory.none")));
+      else {
+        const empty = el("div", "row-card memory-empty");
+        empty.appendChild(el("div", "memory-empty-title", t("memory.emptyTitle")));
+        empty.appendChild(el("p", "muted small", t("memory.empty")));
+        list.appendChild(empty);
+      }
+    }
+    for (const note of entries) {
+      const row = el("details", "row-card memory-note");
+      /*
+       * Summary and id on one line, the way a settings row is built.
+       *
+       * The id is how the model refers to this note and how a person quotes it
+       * in a bug report, so it stays visible — but it is a handle, not content,
+       * and on a line of its own it read as the first thing in the note. On the
+       * same line as the summary it also stops being a third left edge: the
+       * disclosure marker indents the summary text, so anything under it lined
+       * up with neither the marker nor the fields below.
+       */
+      const head = el("summary", "");
+      head.appendChild(el("span", "chev"));
+      head.appendChild(el("span", "memory-note-name", note.summary));
+      head.appendChild(el("span", "memory-id mono", note.id));
+      const kind = [note.scope === "user" ? t("memory.scopeUser") : "", note.type ? t("memory.type" + note.type.charAt(0).toUpperCase() + note.type.slice(1)) : ""].filter(Boolean).join(" · ");
+      if (kind) head.appendChild(el("span", "memory-id", kind));
+      row.appendChild(head);
+      row.dataset.noteId = note.id;
+      /*
+       * Links written as [[id]] in a note, both ways.
+       *
+       * Resolved by the plugin, since only it sees both scopes; the page only
+       * draws them. A link to a note that does not exist is shown struck
+       * through rather than hidden: it usually names a note someone meant to
+       * write.
+       */
+      const links = note.links || { out: [], in: [], dangling: [] };
+      if (links.out.length || links.in.length || links.dangling.length) {
+        const line = el("div", "memory-links small");
+        const chip = (target) => {
+          const button = el("button", "memory-link", target); button.type = "button";
+          button.onclick = () => {
+            const found = list.querySelector('[data-note-id="' + CSS.escape(target) + '"]');
+            if (found) { found.open = true; found.scrollIntoView({ block: "center" }); }
+          };
+          return button;
+        };
+        if (links.out.length || links.dangling.length) {
+          line.appendChild(el("span", "", t("memory.linksOut")));
+          for (const target of links.out) line.appendChild(chip(target));
+          for (const target of links.dangling) { const missing = el("span", "memory-link missing", target); missing.title = t("memory.missing"); line.appendChild(missing); }
+        }
+        if (links.in.length) {
+          line.appendChild(el("span", "", t("memory.linksIn")));
+          for (const target of links.in) line.appendChild(chip(target));
+        }
+        row.appendChild(line);
+      }
+      const remove = el("button", "ghost", t("memory.delete")); remove.type = "button";
+      remove.onclick = () => {
+        const linked = links.in.length ? t("memory.confirmDeleteLinked", { count: links.in.length }) : "";
+        if (confirm(linked + t("memory.confirmDelete"))) void act({ action: "delete", scope: note.scope, id: note.id, expectedHash: note.hash });
+      };
+      row.appendChild(editor(note, remove));
+      list.appendChild(row);
+    }
+  };
+  search.oninput = draw; draw();
+  // Backups: every version replaced or removed without anyone looking, newest first.
+  const backupList = result.backups || [];
+  const backups = el("details", "row-card memory-note");
+  const backupsHead = el("summary", "");
+  backupsHead.appendChild(el("span", "chev"));
+  backupsHead.appendChild(el("span", "memory-note-name", t("memory.backups", { count: backupList.length })));
+  backups.appendChild(backupsHead);
+  if (!backupList.length) backups.appendChild(el("p", "muted", t("memory.backupsNone")));
+  for (const backup of backupList) {
+    const row = el("div", "memory-backup");
+    const text = el("div", "memory-backup-text");
+    text.appendChild(el("div", "", backup.summary));
+    const scopeLabel = backup.scope === "user" ? t("memory.scopeUser") : backup.scope === "project" ? t("memory.scopeProject") : "";
+    text.appendChild(el("div", "muted small", [new Date(backup.backedUpAt).toLocaleString(LOCALE), backup.reason ? t("memory.backupReason." + backup.reason) : "", scopeLabel, backup.id].filter(Boolean).join(" · ")));
+    row.appendChild(text);
+    const restore = el("button", "ghost", t("memory.restore")); restore.type = "button";
+    restore.onclick = () => { if (confirm(t("memory.confirmRestore"))) void act({ action: "restore", file: backup.file }); };
+    row.appendChild(restore);
+    backups.appendChild(row);
+  }
+  if (backupList.length) panel.appendChild(backups);
+}
+
+/**
+ * Panels reached from a row inside another panel rather than from the sidebar.
+ *
+ * A full page, drawn where Models and Routines are drawn, but without a
+ * permanent destination in the sidebar: usage is looked at now and then, and a
+ * row in the sidebar for it would be a standing invitation to a page most
+ * sessions have no reason to open. It keeps the row it came from lit, so the
+ * sidebar still says where in the app this is.
+ */
+const SUB_PANELS = { usage: "nav-settings", audit: "nav-settings", permissions: "nav-settings" };
+
+/** Which panel the panel view is currently showing, sub-panels included. */
+let shownPanel = null;
+
+/**
+ * The one switch between the transcript and a panel.
+ *
+ * Every "back to chat" path already called setNav(null), so the view swap
+ * belongs here rather than in each caller: a panel is shown, the transcript is
+ * left intact underneath it, and the composer is hidden — there is nothing to
+ * send a message to while reading a list of providers.
+ */
+function setNav(active) {
+  // Every nav destination funnels through here, so one call covers them all.
+  track("panel_opened", { panel: active });
+  shownPanel = active;
+  const lit = SUB_PANELS[active] || (PANEL_NAV.has(active) ? active : null);
+  for (const item of document.querySelectorAll(".nav-item")) item.classList.remove("active");
+  if (lit) document.getElementById(lit).classList.add("active");
+
+  const showing = PANEL_NAV.has(active) || Boolean(SUB_PANELS[active]);
+  document.body.classList.toggle("panelled", showing);
+  log.hidden = showing;
+  panelView.hidden = !showing;
+  if (showing) {
+    // The diff pane belongs to the conversation, not to a settings page.
+    review.classList.remove("open");
+    panelView.scrollTop = 0;
+  } else {
+    panelBody.replaceChildren();
+    panelNotes.replaceChildren();
+    // A transcript rendered while the log was hidden measures zero, so the
+    // scroll it asked for never happened. Ask again now that it has a height.
+    if (atBottom) log.scrollTop = log.scrollHeight;
+  }
+}
+
+document.getElementById("nav-artifacts").addEventListener("click", () => {
+  setNav("nav-artifacts");
+  void showAllArtifacts();
+});
+document.getElementById("nav-routines").addEventListener("click", () => {
+  setNav("nav-routines");
+  void showRoutines();
+});
+document.getElementById("nav-settings").addEventListener("click", () => {
+  setNav("nav-settings");
+  void showSettings();
+});
+
+`;
+//# sourceMappingURL=panels.js.map

package/dist/page/client/panels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panels.js","sourceRoot":"","sources":["../../../src/page/client/panels.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2oB/B,CAAC"}