thunderbird-patch-review

Easy-to-use patch review interface for Thunderbird

Contribute: ~marcc/thunderbird-review-plugin@lists.sr.ht

git clone git://mccd.space/thunderbird-patch-review

review.js (25360B)

 // Review tab: renders a patch series with inline, hunk-level commenting.
 
 import { parsePatchEmail } from "../modules/diff-parse.js";
 import { computeIntraline } from "../modules/intraline.js";
 import { formatReview } from "../modules/reply-format.js";
 import * as store from "../modules/review-store.js";
 import { SOURCEHUT_STATUSES } from "../modules/sourcehut.js";
 
 const $ = (sel) => document.querySelector(sel);
 
 const state = {
   series: [], // from background: get-series
   parsed: [], // parsePatchEmail per series entry
   comments: [], // locator -> comment, per series entry
   current: 0,
   repo: "",
 };
 
 async function bg(request) {
   const response = await messenger.runtime.sendMessage(request);
   if (!response) {
     throw new Error("no response from background script");
   }
   return response;
 }
 
 // ---------------------------------------------------------------------------
 // Boot
 
 async function init() {
   const messageId = Number(new URLSearchParams(location.search).get("mid"));
   const response = await bg({ type: "get-series", messageId });
   if (!response.ok) {
     showStatus(response.error || "unknown error", { error: true });
     return;
   }
 
   state.series = response.series;
   state.repo = response.repo || "";
   state.parsed = state.series.map((p) => parsePatchEmail(p.body));
   state.comments = await Promise.all(
     state.series.map((p) => store.loadComments(p.headerMessageId))
   );
   state.current = Math.max(0, state.series.findIndex((p) => !p.isCover));
 
   const anchor = state.series.find((p) => !p.isCover) || state.series[0];
   document.title = `Review: ${anchor.title}`;
   state.navEl = $("#series-nav");
   renderNav();
   renderSeriesTitle();
   refreshRepoDisplay(state.repo);
   state.slug =
     anchor.title.replace(/[^A-Za-z0-9._-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60) ||
     "patchset";
 
   state.isSourcehut = Boolean(response.isSourcehut);
   if (state.isSourcehut) {
     const select = $("#srht-select");
     for (const status of SOURCEHUT_STATUSES) {
       const option = document.createElement("option");
       option.value = status;
       option.textContent = status;
       select.appendChild(option);
     }
     $("#srht-status").hidden = false;
   }
 
   renderPatch();
   updateCount();
 }
 
 // ---------------------------------------------------------------------------
 // Rendering
 
 // The top-left title summarises the whole series under review: the patch
 // count and the total draft comments across it. Updated on init, on patch
 // switch, and whenever comments change.
 function renderSeriesTitle() {
   if (!state.series.length) {
     $("#series-title").textContent = "Review";
     return;
   }
   const n = state.series.length;
   const total = state.comments.reduce((sum, c) => sum + Object.keys(c).length, 0);
   $("#series-title").textContent =
     `Review Patchset (${n}); ${total} comment${total === 1 ? "" : "s"}`;
 }
 
 function renderNav() {
   const nav = state.navEl;
   if (!nav) return;
   nav.textContent = "";
 
   state.series.forEach((patch, i) => {
     const pill = document.createElement("span");
     pill.className = "pill" + (i === state.current ? " active" : "");
     pill.textContent = patch.isCover
       ? "cover"
       : patch.n !== null && patch.m
         ? `${patch.n}/${patch.m}`
         : "patch";
     const count = Object.keys(state.comments[i]).length;
     if (count) {
       const badge = document.createElement("span");
       badge.className = "badge";
       badge.textContent = count;
       pill.appendChild(badge);
     }
     pill.title = patch.subject;
     pill.addEventListener("click", () => {
       state.current = i;
       renderNav();
       renderSeriesTitle();
       renderPatch();
     });
     nav.appendChild(pill);
   });
 }
 
 function renderPatch() {
   const content = $("#patch");
   content.textContent = "";
   const i = state.current;
   const patch = state.series[i];
   const parsed = state.parsed[i];
 
   // The patch box holds the commit message (and per-patch comment + file
   // diffs); the patch selector itself lives in the top bar (#series-nav).
   const box = document.createElement("div");
   box.className = "patch-box";
 
   // Commit message (or cover letter text) with a whole-patch comment. Never
   // fall back to the raw body for a patch — that would print the whole diff
   // above the interactive one (common case: single-line commit messages,
   // whose body starts directly at the "---" scissors).
   const msg = document.createElement("div");
   msg.className = "commit-message";
 
   // Per-patch metadata header: who sent it and the subject line, mirroring
   // the top of a git-format-patch / mail message. The commit message body
   // follows below.
   const headers = document.createElement("dl");
   headers.className = "patch-headers";
   headerRow("Subject", patch.subject || "", headers);
   msg.appendChild(headers);
 
   const body = document.createElement("div");
   body.className = "commit-message-body";
   body.textContent = patch.isCover
     ? parsed.commitMessage || patch.body
     : parsed.commitMessage || patch.title;
   msg.appendChild(body);
   const existingGeneral = state.comments[i][store.GENERAL];
   // Only offer "Comment on patch" when there is no draft yet; once a comment
   // exists the readonly card (double-click / click to edit) is the only
   // entry point, so we don't also surface an "Edit comment" button.
   if (!existingGeneral) {
     const generalBtn = document.createElement("button");
     generalBtn.className = "btn-general";
     generalBtn.textContent = "Add Comment";
     generalBtn.addEventListener("click", () => openGeneralEditor(msg, generalBtn));
     msg.appendChild(generalBtn);
   }
   box.appendChild(msg);
 
   if (existingGeneral) {
     box.appendChild(commentCard(existingGeneral.text, () => openGeneralEditor(msg, null)));
   }
   content.appendChild(box);
 
   parsed.files.forEach((file, fileIndex) => {
     const details = document.createElement("details");
     details.className = "file";
     details.open = true;
 
     const summary = document.createElement("summary");
     summary.textContent = fileLabel(file);
     details.appendChild(summary);
 
     if (file.isBinary) {
       details.appendChild(binaryBlock(file, parsed));
     } else {
       details.appendChild(renderFileTable(file, fileIndex));
     }
     content.appendChild(details);
   });
 
   if (!parsed.files.length && !patch.isCover) {
     const note = document.createElement("div");
     note.className = "file-note";
     note.textContent = "No diff found in this message.";
     content.appendChild(note);
   }
 }
 
 function headerRow(name, value, into) {
   const dt = document.createElement("dt");
   dt.textContent = `${name}:`;
   const dd = document.createElement("dd");
   // Email-ish / path-ish values render better in a monospace face.
   const code = document.createElement("code");
   code.textContent = value || "\u00a0";
   dd.appendChild(code);
   into.append(dt, dd);
 }
 
 function fileLabel(file) {
   if (file.isRename) return `${file.oldPath} → ${file.newPath}`;
   if (file.isNew) return `${file.displayPath} (new file)`;
   if (file.isDeleted) return `${file.oldPath} (deleted)`;
   return file.displayPath;
 }
 
 function binaryBlock(file, parsed) {
   const wrap = document.createElement("div");
   wrap.className = "binary-note";
 
   const note = document.createElement("div");
   note.className = "file-note";
   note.textContent =
     "Binary file changed — cannot review line-by-line. The patch carries the encoded blob, not reviewable content.";
   wrap.appendChild(note);
 
   const show = document.createElement("button");
   show.textContent = "Display raw patch";
   show.addEventListener("click", () => {
     if (wrap.querySelector("pre")) {
       wrap.querySelector("pre").remove();
       show.textContent = "Display raw patch";
       return;
     }
     const pre = document.createElement("pre");
     pre.className = "binary-raw";
     pre.textContent = rawFilePatch(file, parsed);
     show.before(pre);
     show.textContent = "Hide raw patch";
   });
   wrap.appendChild(show);
   return wrap;
 }
 
 function rawFilePatch(file, parsed) {
   const lines = parsed.bodyLines || [];
   const start = file.bodyLine ?? 0;
   if (!lines.length) return "";
   let end = lines.length;
   for (let i = start + 1; i < lines.length; i++) {
     if (/^diff --git /.test(lines[i])) { end = i; break; }
   }
   // Trim the trailing git signature if present.
   for (let i = end - 1; i > start; i--) {
     if (/^-- ?$/.test(lines[i])) { end = i; break; }
   }
   return lines.slice(start, end).join("\n").trimEnd();
 }
 
 function renderFileTable(file, fileIndex) {
   const table = document.createElement("table");
   table.className = "diff";
   const tbody = document.createElement("tbody");
   table.appendChild(tbody);
 
   file.hunks.forEach((hunk, hunkIndex) => {
     const headerRow = document.createElement("tr");
     headerRow.className = "hunk-header";
     const headerCell = document.createElement("td");
     headerCell.colSpan = 3;
     headerCell.textContent = hunk.header;
     headerRow.appendChild(headerCell);
     tbody.appendChild(headerRow);
 
     const intraline = computeIntraline(hunk.lines);
 
     hunk.lines.forEach((line, lineIndex) => {
       const loc = store.locator(fileIndex, hunkIndex, lineIndex);
       const row = document.createElement("tr");
       row.className = `line ${line.origin}`;
       row.dataset.loc = loc;
 
       const oldGutter = document.createElement("td");
       oldGutter.className = "gutter";
       oldGutter.textContent = line.oldLine ?? "";
       const newGutter = document.createElement("td");
       newGutter.className = "gutter";
       newGutter.textContent = line.newLine ?? "";
       row.append(oldGutter, newGutter, codeCell(line, intraline[lineIndex]));
       row.addEventListener("click", () => toggleEditor(row, loc));
       tbody.appendChild(row);
 
       const existing = state.comments[state.current][loc];
       if (existing) {
         row.classList.add("commented");
         tbody.appendChild(commentRow(existing.text, row, loc));
       }
     });
   });
 
   return table;
 }
 
 /** Code cell, with the intra-line changed span wrapped for a stronger tint. */
 function codeCell(line, range) {
   const td = document.createElement("td");
   td.className = "code";
   if (!range) {
     td.textContent = line.raw || " ";
     return td;
   }
   // range addresses line.text; raw carries the +/- prefix, hence the offset.
   const start = range.start + 1;
   const end = range.end + 1;
   td.append(line.raw.slice(0, start));
   const hl = document.createElement("span");
   hl.className = "hl";
   hl.textContent = line.raw.slice(start, end);
   td.append(hl, line.raw.slice(end));
   return td;
 }
 
 function commentCard(text, onEdit) {
   const box = document.createElement("div");
   box.className = "comment-box readonly";
   const body = document.createElement("div");
   body.className = "comment-text";
   body.textContent = text;
   box.appendChild(body);
   box.addEventListener("dblclick", onEdit);
   box.title = "Double-click to edit";
   return box;
 }
 
 function commentRow(text, lineRow, loc) {
   const tr = document.createElement("tr");
   tr.className = "comment-row readonly";
   const td = document.createElement("td");
   td.colSpan = 3;
   td.appendChild(commentCard(text, () => toggleEditor(lineRow, loc)));
   tr.appendChild(td);
   return tr;
 }
 
 // ---------------------------------------------------------------------------
 // Comment editing
 
 function closeEditors() {
   document.querySelectorAll(".editor-row, .general-editor").forEach((el) => el.remove());
   document.querySelectorAll(".readonly[hidden]").forEach((el) => {
     el.hidden = false;
   });
 }
 
 function toggleEditor(lineRow, loc) {
   const open = lineRow.nextElementSibling;
   if (open && open.classList.contains("editor-row")) {
     closeEditors();
     return;
   }
   closeEditors();
 
   const existing = state.comments[state.current][loc];
   const ro = findReadonly(lineRow);
   if (ro) ro.hidden = true;
 
   const tr = document.createElement("tr");
   tr.className = "comment-row editor-row";
   const td = document.createElement("td");
   td.colSpan = 3;
   td.appendChild(
     editorBox(existing ? existing.text : "", loc, () => {
       tr.remove();
       if (ro) ro.hidden = false;
     })
   );
   tr.appendChild(td);
   lineRow.after(tr);
   tr.querySelector("textarea").focus();
 }
 
 // A line's readonly comment row, if any, is always the element immediately
 // after it (renderFileTable appends the comment row right after the line
 // row). Only that one belongs to this line — walking further would grab some
 // later line's comment and hide the wrong card.
 function findReadonly(lineRow) {
   const next = lineRow.nextElementSibling;
   return next && next.classList.contains("readonly") ? next : null;
 }
 
 function openGeneralEditor(anchorEl, triggerBtn) {
   closeEditors();
   const existing = state.comments[state.current][store.GENERAL];
   // The readonly general comment, if any, is the element right after the
   // commit-message block. Keep a reference back from the anchor so we hide
   // exactly that one and not some unrelated .readonly down the page.
   const ro = anchorEl.nextElementSibling?.classList?.contains("readonly")
     ? anchorEl.nextElementSibling
     : null;
   if (ro) ro.hidden = true;
   // While the editor is open the trigger button ("Comment on patch") is
   // hidden; cancel re-shows it. Post re-renders, which drops it anyway when
   // a comment now exists.
   if (triggerBtn) triggerBtn.hidden = true;
   const restoreTrigger = () => {
     if (triggerBtn) triggerBtn.hidden = false;
   };
   const box = editorBox(existing ? existing.text : "", store.GENERAL, () => {
     box.remove();
     if (ro) ro.hidden = false;
     restoreTrigger();
   });
   box.classList.add("general-editor");
   anchorEl.after(box);
   box.querySelector("textarea").focus();
 }
 
 function editorBox(initial, loc, close) {
   const box = document.createElement("div");
   box.className = "comment-box";
 
   const textarea = document.createElement("textarea");
   textarea.value = initial;
   textarea.placeholder = "Write a review comment… (Ctrl+Enter to save)";
   box.appendChild(textarea);
 
   const actions = document.createElement("div");
   actions.className = "comment-actions";
 
   const save = async () => {
     const i = state.current;
     state.comments[i] = await store.saveComment(
       state.series[i].headerMessageId,
       loc,
       textarea.value
     );
     close();
     renderPatch();
     updateCount();
   };
 
   if (initial) {
     const del = document.createElement("button");
     del.textContent = "Delete";
     del.addEventListener("click", async () => {
       textarea.value = "";
       await save();
     });
     actions.appendChild(del);
   }
 
   const cancel = document.createElement("button");
   cancel.textContent = "Cancel";
   cancel.addEventListener("click", close);
   actions.appendChild(cancel);
 
   const saveBtn = document.createElement("button");
   saveBtn.className = "primary";
   saveBtn.textContent = "Save";
   saveBtn.addEventListener("click", save);
   actions.appendChild(saveBtn);
 
   textarea.addEventListener("keydown", (e) => {
     if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
       save();
     } else if (e.key === "Escape") {
       close();
     }
   });
 
   box.appendChild(actions);
   return box;
 }
 
 function updateCount() {
   const total = state.comments.reduce((sum, c) => sum + Object.keys(c).length, 0);
   // The discard button only makes sense once there are drafts to lose.
   $("#btn-discard").hidden = total === 0;
   // Send review needs something to send: a draft comment, or — for a
   // sourcehut series — at least a patchset-status update (which can go
   // out as a stand-alone reply). Non-sourcehut with no comments is
   // disabled so the modal cannot be opened with nothing to do.
   const canSend = total > 0 || state.isSourcehut;
   $("#btn-send").disabled = !canSend;
   $("#send-split").querySelector(".menu-toggle").disabled = !canSend;
   // The title is independent of the button-pluralization below; update it
   // first so a failure in the latter cannot leave the count stale.
   renderSeriesTitle();
 }
 
 $("#btn-discard").addEventListener("click", async () => {
   closeMenus();
   const total = state.comments.reduce((sum, c) => sum + Object.keys(c).length, 0);
   if (total === 0) return;
   const fill = total === 1 ? `the 1 draft comment` : `all ${total} draft comments`;
   if (!window.confirm(`Discard ${fill} in this series? This cannot be undone.`)) {
     return;
   }
   await Promise.all(state.series.map((p) => store.clearComments(p.headerMessageId)));
   state.comments = state.series.map(() => ({}));
   renderPatch();
   updateCount();
 });
 
 // ---------------------------------------------------------------------------
 // Send review / apply series
 
 async function sendReview(mode) {
   const status =
     !$("#srht-status").hidden && $("#srht-enable").checked ? $("#srht-select").value : null;
 
   const replies = [];
   state.series.forEach((patch, i) => {
     const body = formatReview(state.parsed[i], state.comments[i]);
     if (body) {
       replies.push({ messageId: patch.id, body });
     }
   });
   if (!replies.length) {
     if (!status) {
       showStatus("No comments yet — click a diff line to add one.");
       return;
     }
     // Status-only review (e.g. APPROVED): reply to the cover letter when
     // there is one (the series is ordered cover first), body left to you.
     replies.push({ messageId: state.series[0].id, body: "" });
   }
 
   const response = await bg({ type: "send-review", mode, replies, status });
   if (!response.ok) {
     showStatus(response.error, { error: true });
     return;
   }
   if (mode === "send") {
     // The review went out: drop the now-sent draft comments and close up.
     await Promise.all(state.series.map((p) => store.clearComments(p.headerMessageId)));
     const tab = await messenger.tabs.getCurrent();
     await messenger.tabs.remove(tab.id);
   }
 }
 
 function closeMenus() {
   document.querySelectorAll(".split .menu").forEach((menu) => (menu.hidden = true));
 }
 
 function setupSplit(splitId, onPick) {
   const split = document.getElementById(splitId);
   const menu = split.querySelector(".menu");
   split.querySelector(".menu-toggle").addEventListener("click", (e) => {
     e.stopPropagation();
     const wasHidden = menu.hidden;
     closeMenus();
     menu.hidden = !wasHidden;
   });
   menu.querySelectorAll("button").forEach((button) => {
     if (button.dataset.bypass) return;
     button.addEventListener("click", () => {
       closeMenus();
       onPick(button.dataset.mode);
     });
   });
 }
 
 setupSplit("send-split", (mode) => openSendConfirm(mode));
 setupSplit("apply-split", applySeries);
 $("#btn-send").addEventListener("click", () => openSendConfirm("send"));
 
 $("#btn-send-cancel").addEventListener("click", closeSendConfirm);
 $("#btn-send-confirm").addEventListener("click", async () => {
   const mode = state.pendingSendMode;
   closeSendConfirm();
   await sendReview(mode);
 });
 
 function openSendConfirm(mode) {
   closeMenus();
   state.pendingSendMode = mode;
   $("#send-confirm").addEventListener("click", onSendConfirmBackdrop);
   const n = state.series.length;
   const commented = state.series.filter((_, i) =>
     Object.keys(state.comments[i]).length
   ).length;
   const verbSent = mode === "preview" ? "open in compose" : "send review";
   $("#send-confirm-title").textContent = mode === "preview" ? "Preview review" : "Send review";
   $("#btn-send-confirm").textContent = mode === "preview" ? "Open in compose" : "Send review";
   $("#send-confirm-summary").textContent =
     `${commented} of ${n} patch${n === 1 ? "" : "es"} has a comment; ` +
     `click ${verbSent} to continue.`;
   $("#send-confirm").hidden = false;
 }
 
 function closeSendConfirm() {
   $("#send-confirm").hidden = true;
   state.pendingSendMode = null;
   $("#send-confirm").removeEventListener("click", onSendConfirmBackdrop);
 }
 
 function onSendConfirmBackdrop(e) {
   if (e.target === $("#send-confirm")) closeSendConfirm();
 }
 
 document.addEventListener("keydown", (e) => {
   if (e.key === "Escape" && !$("#send-confirm").hidden) closeSendConfirm();
 });
 $("#btn-apply").addEventListener("click", () => applySeries("apply"));
 
 document.addEventListener("click", (e) => {
   if (!e.target.closest(".split")) {
     closeMenus();
   }
 });
 
 async function applySeries(mode) {
   const messageIds = state.series.filter((p) => !p.isCover && p.hasDiff).map((p) => p.id);
   if (!messageIds.length) {
     showStatus("Nothing here: no patch in this series contains a diff.", { error: true });
     return;
   }
 
   if (mode === "download") {
     const response = await bg({ type: "download-series", messageIds, filename: state.slug });
     if (!response.ok) {
       showStatus(response.error, { error: true });
     }
     return;
   }
 
   const repo = state.repo;
   if (!repo || $("#repo-path").classList.contains("error")) {
     showStatus("Choose a git repository", { error: true });
     return;
   }
 
   showStatus("Applying series…");
   const fresh = await bg({ type: "describe-repo", repo });
   if (fresh.ok && state.repoBranch && fresh.branch && fresh.branch !== state.repoBranch) {
     // The branch moved under us (another checkout, a rebase, etc.) between
     // the Browse pick and the Apply click. Show the new branch and ask the
     // user to confirm by re-applying, rather than silently writing onto
     // an unexpected branch.
     state.repoBranch = fresh.branch;
     renderRepoChip(fresh.name, fresh.branch);
     showStatus(
       `The repository's branch changed to "${fresh.branch}" since you chose it; ` +
       "click Apply again to confirm.",
       { error: true }
     );
     return;
   }
   if (!fresh.ok) {
     // The repo disappeared between the Browse and the Apply.
     refreshRepoDisplay(repo);
     showStatus(fresh.error || "The repository is no longer readable.", { error: true });
     return;
   }
 
   const response = await bg({ type: "apply-series", messageIds, repo });
   const text = [response.ok ? "Series applied." : "Apply failed.", response.output || response.error]
     .filter(Boolean)
     .join("\n\n");
   showStatus(text, { error: !response.ok, editor: response.ok ? repo : null });
 
   if (response.ok && mode === "modify") {
     await openEditor(repo);
   }
 }
 
 $("#repo-path").addEventListener("click", async () => {
   const response = await bg({ type: "pick-repo", start: state.repo || "" });
   if (!response.ok) {
     showStatus(
       response.error || "No directory chooser available — pick the path manually.",
       { error: true }
     );
     return;
   }
   if (response.cancelled) {
     return;
   }
   await refreshRepoDisplay(response.output);
 });
 
 // Resolve the chosen path against git and render the toolbar pill. A
 // non-repo path turns the chip red and shows the error, and blocks Apply.
 async function refreshRepoDisplay(path) {
   const chip = $("#repo-path");
   if (!path) {
     state.repo = "";
     chip.classList.remove("error");
     chip.textContent = "Choose a repository…";
     return;
   }
   chip.classList.remove("error");
   chip.textContent = "resolving…";
   const response = await bg({ type: "describe-repo", repo: path });
   if (!response.ok) {
     state.repo = "";
     chip.classList.add("error");
     chip.textContent = response.error || "not a git repository";
     return;
   }
   state.repo = response.repo || path;
   state.repoBranch = response.branch || null;
   chip.classList.remove("error");
   renderRepoChip(response.name, response.branch);
 }
 
 // The chip reads <name> · <branch> with the branch in a muted color.
 function renderRepoChip(name, branch) {
   const chip = $("#repo-path");
   chip.textContent = "";
   chip.appendChild(document.createTextNode(name));
   const sep = document.createElement("span");
   sep.className = "repo-sep";
   sep.textContent = " · ";
   chip.appendChild(sep);
   const br = document.createElement("span");
   br.className = "repo-branch";
   br.textContent = branch;
   chip.appendChild(br);
 }
 
 async function openEditor(repo) {
   const files = [...new Set(
     state.parsed.flatMap((p) => p.files.map((f) => f.displayPath)).filter(Boolean)
   )];
   const response = await bg({ type: "open-editor", repo, files });
   if (!response.ok) {
     showStatus(response.error || response.output || "Could not open the editor.", { error: true });
   } else {
     hideStatus();
   }
 }
 
 $("#btn-open-editor").addEventListener("click", () => openEditor(state.repo));
 
 // ---------------------------------------------------------------------------
 // Status panel
 
 let statusTimer = null;
 
 function showStatus(text, { error = false, editor = null } = {}) {
   if (statusTimer) {
     clearTimeout(statusTimer);
     statusTimer = null;
   }
   $("#status-text").textContent = text;
   $("#status-text").classList.toggle("error", error);
   $("#btn-open-editor").hidden = !editor;
   $("#status").hidden = false;
   // Auto-dismiss non-error notices after a few seconds; errors stay until closed.
   if (!error) {
     statusTimer = setTimeout(hideStatus, 5000);
   }
 }
 
 function hideStatus() {
   if (statusTimer) {
     clearTimeout(statusTimer);
     statusTimer = null;
   }
   $("#status").hidden = true;
 }
 
 $("#btn-status-close").addEventListener("click", hideStatus);
 
 init().catch((e) => {
   document.title = "Review: error";
   const titleEl = $("#series-title");
   if (titleEl) titleEl.textContent = "Error";
   if (state.navEl) state.navEl.textContent = "";
   showStatus(e.message || String(e), { error: true });
 });