sealkeep 0.5.0

package/web/app.js

@@ -0,0 +1,1372 @@
+/**
+ * Sealkeep dashboard.
+ *
+ * Every value comes from the local agent's /v1 API — the page holds no business
+ * logic of its own and has no way to decrypt an archive, because the API refuses to
+ * accept a recovery phrase. Decryption stays a deliberate command you run yourself.
+ */
+const $ = (id) => document.getElementById(id);
+const TOKEN_KEY = "vaultline.localApiToken";
+
+/** The token arrives in the URL fragment, which browsers never send to a server. */
+function readTokenFromLocation() {
+  const hash = new URLSearchParams(location.hash.replace(/^#/, ""));
+  const token = hash.get("token");
+  if (token) {
+    sessionStorage.setItem(TOKEN_KEY, token);
+    history.replaceState(null, "", location.pathname);
+  }
+  return sessionStorage.getItem(TOKEN_KEY);
+}
+
+let token = readTokenFromLocation();
+let state = {};
+// Populated once the Settings tab has been opened, and again right after a
+// save. A background refresh triggered from elsewhere (Upload, Reclaim, the
+// global Refresh button) must not silently overwrite an edit in progress on
+// a tab the user cannot currently see, so it is loaded lazily rather than as
+// part of refresh() below.
+let settingsLoaded = false;
+
+async function api(path, options = {}) {
+  const response = await fetch(path, {
+    ...options,
+    headers: { "content-type": "application/json", authorization: `Bearer ${token ?? ""}`, ...options.headers }
+  });
+  // With no token presented, a 401 just means this browser has not been here
+  // yet — the gate's standing copy explains what to do. An error line on top
+  // of it is only true when a token was actually offered and refused.
+  if (response.status === 401) { showGate(token ? "That token was not accepted." : undefined); throw new Error("unauthorized"); }
+  const body = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    const error = new Error(body?.error?.message ?? `${response.status} ${response.statusText}`);
+    // Structured refusals (lastCopy, forever) ride to the caller so a button
+    // can change its own words instead of string-matching prose.
+    if (body?.error && typeof body.error === "object") Object.assign(error, { forever: body.error.forever, lastCopy: body.error.lastCopy });
+    throw error;
+  }
+  return body;
+}
+
+function showGate(message) {
+  $("app").hidden = true;
+  $("gate").hidden = false;
+  $("gate-error").hidden = !message;
+  $("gate-error").textContent = message ?? "";
+  setStatus("Not connected", "warn");
+}
+
+function setStatus(text, tone) {
+  const pill = $("connection");
+  pill.textContent = text;
+  pill.className = `pill ${tone ?? ""}`.trim();
+}
+
+const bytes = (value) => {
+  if (!Number.isFinite(value)) return "—";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let size = value, unit = 0;
+  while (size >= 1024 && unit < units.length - 1) { size /= 1024; unit += 1; }
+  return `${unit === 0 ? size : size.toFixed(1)} ${units[unit]}`;
+};
+
+const ago = (iso) => {
+  const delta = Date.now() - Date.parse(iso);
+  if (!Number.isFinite(delta)) return "—";
+  const minutes = Math.round(delta / 60000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  return days < 30 ? `${days}d ago` : `${Math.round(days / 30)}mo ago`;
+};
+
+/** The mirror image of ago(): a plain description of a moment still to come. */
+const until = (iso) => {
+  const delta = Date.parse(iso) - Date.now();
+  if (!Number.isFinite(delta)) return "—";
+  if (delta <= 0) return "any time now";
+  const days = Math.ceil(delta / 86_400_000);
+  return days <= 1 ? "within a day" : `in ${days} days`;
+};
+
+const shortPath = (path) => (path && path.length > 52 ? `…${path.slice(-51)}` : path ?? "—");
+
+/**
+ * Text that was written for a terminal, shown in a browser.
+ *
+ * Most messages reach this page from code that also prints them in a
+ * terminal, where `sealkeep autopilot` in backticks is a convention. In HTML
+ * the backticks arrived as literal characters — the header pill read
+ * "…\`sealkeep autopilot\` does it unattended instead" with the ticks showing,
+ * which is what an unfinished internal tool looks like. Backtick pairs become
+ * <code>; everything else stays text, so nothing here can inject markup.
+ */
+function prose(target, text) {
+  target.replaceChildren();
+  const parts = String(text ?? "").split(/`([^`]+)`/g);
+  parts.forEach((part, index) => {
+    if (!part) return;
+    if (index % 2 === 1) {
+      const code = document.createElement("code");
+      code.textContent = part;
+      target.append(code);
+    } else {
+      // A string child is a text node in the real DOM and in the test double
+      // alike; createTextNode is only the former.
+      target.append(part);
+    }
+  });
+  return target;
+}
+
+/**
+ * What a check is called on a page, as opposed to in a log.
+ *
+ * Doctor names its checks the way a maintainer greps for them —
+ * `sealed-key-copy`, `local-api-token`, `signer`. Shown raw they made the
+ * Health tab read as debug output, and `signer` in particular told a paying
+ * customer that their uploads were off in a word they had never seen.
+ */
+const CHECK_LABELS = {
+  config: "Vault",
+  "archive-store": "Archive folder",
+  crypto: "Encryption",
+  "local-api-token": "This window's key",
+  queue: "Waiting to archive",
+  quota: "Storage plan",
+  "recovery-phrase": "Recovery phrase",
+  "remote-storage": "Storage",
+  "sealed-key-copy": "Sealed key backup",
+  signer: "Uploads",
+  agents: "Agents"
+};
+
+/** Same names the retention page uses, so the two never disagree. */
+const POLICY_NAMES = {
+  "local-only": "keeping everything",
+  "sync-only": "uploading, keeping originals",
+  "archive-and-reclaim": "reclaiming once safely stored",
+  "manual-approval": "asking first"
+};
+
+function badge(text, kind) {
+  const node = document.createElement("span");
+  node.className = `badge badge-${kind}`;
+  node.textContent = text;
+  return node;
+}
+
+function cell(row, value, className) {
+  const node = row.insertCell();
+  if (value instanceof Node) node.append(value);
+  else node.textContent = value;
+  if (className) node.className = className;
+  return node;
+}
+
+/** Empty states name the one command that fills them. */
+function showEmpty(panelId, title, detail) {
+  const panel = $(panelId);
+  panel.replaceChildren();
+  const wrap = document.createElement("div");
+  wrap.className = "empty";
+  const heading = document.createElement("p");
+  heading.textContent = title;
+  const note = document.createElement("small");
+  note.innerHTML = detail;
+  wrap.append(heading, note);
+  panel.append(wrap);
+}
+
+function ensureTable(panelId, headers) {
+  const panel = $(panelId);
+  if (panel.querySelector("table")) return panel.querySelector("tbody");
+  const table = document.createElement("table");
+  const thead = table.createTHead().insertRow();
+  for (const header of headers) {
+    const th = document.createElement("th");
+    th.textContent = header.label;
+    if (header.num) th.className = "num";
+    thead.append(th);
+  }
+  const tbody = table.createTBody();
+  panel.replaceChildren(table);
+  return tbody;
+}
+
+const QUEUE_HEADERS = [{ label: "State" }, { label: "Agent" }, { label: "Tries", num: true }, { label: "Session" }, { label: "" }];
+// One vault table where three used to stand (My vault / Restore / Free up
+// disk were the same 53 rows wearing different verbs). Every row: what it is,
+// where its copies live, and every action that follows from that state.
+const ARCHIVE_HEADERS = [{ label: "" }, { label: "Archived" }, { label: "Size", num: true }, { label: "Session" }, { label: "Where the copies live" }, { label: "Held because" }, { label: "" }];
+
+// The vault's selection — survives redraws so ticking ten rows and refreshing
+// does not silently discard the work. Ids that stop existing are dropped.
+const vaultChosen = new Set();
+// Which project folders and snapshot chains a person opened — remembered
+// across refreshes, because a redraw that re-folds everything is a redraw
+// that loses your place.
+const vaultOpenGroups = new Set();
+const vaultOpenChains = new Set();
+
+function renderOverview({ status, retention, agents, archives, disk }) {
+  $("m-archives").textContent = status.archiveCount;
+  $("m-bytes").textContent = `${bytes(status.archivedBytes)} of history kept`;
+  $("m-queue").textContent = status.queue.ready + status.queue.leased;
+  $("m-queue-detail").textContent = status.queue.failed
+    ? `${status.queue.done} done · ${status.queue.failed} need attention`
+    : `${status.queue.done} archived so far`;
+  // A managed-tier machine has no `remoteStorage` of its own — the bucket is
+  // ours, provisioned by enrolment rather than typed into a form. Reading that
+  // absence as "not set up" told every paying customer their cloud storage was
+  // off while their archives were sitting in it, verified. doctor.ts fixed this
+  // and left a note calling it "a comforting falsehood"; the dashboard went on
+  // saying it, which is the wrong way round for the tier that pays.
+  if (status.remoteStorage) {
+    $("m-remote").textContent = `${status.remoteStorage.provider}://${status.remoteStorage.bucket}`;
+    $("m-remote-hint").textContent = `prefix ${status.remoteStorage.prefix}`;
+  } else if (status.plan) {
+    const verified = (archives ?? []).filter((archive) => archive.remote?.verifiedAt).length;
+    $("m-remote").textContent = "Sealkeep managed";
+    $("m-remote-hint").textContent = verified
+      ? `${verified} archive${verified === 1 ? "" : "s"} verified in your storage`
+      : "included with your plan";
+  } else {
+    $("m-remote").textContent = "This disk only";
+    $("m-remote-hint").textContent = "add storage to keep a second copy";
+  }
+  $("m-reclaim").textContent = bytes(retention.reclaimableBytes);
+  // The retention page names these four in plain words; the dashboard was
+  // showing the internal slug ("policy: local-only") beneath a number.
+  $("m-policy").textContent = POLICY_NAMES[retention.policy] ?? retention.policy;
+
+  const sealed = status.archiveCount;
+  $("boundary-above").textContent = `${status.queue.ready + status.queue.leased} readable, waiting`;
+  $("boundary-below").textContent = `${sealed} sealed`;
+
+  const detected = agents.filter((agent) => agent.detected);
+  const list = detected.length ? detected : agents;
+  $("agents").replaceChildren(...list.map((agent) => {
+    const row = document.createElement("div");
+    row.className = "agent";
+    const name = document.createElement("strong");
+    name.textContent = agent.agent === "codex" ? "Codex" : "Claude Code";
+    const root = document.createElement("span");
+    root.textContent = agent.root;
+    row.append(name, root, agent.detected ? badge("found", "verified") : badge("not installed", "local"));
+    return row;
+  }));
+
+  // The headline is the disk story, because that is why anyone opened this. It
+  // used to read "2 sessions preserved" on a machine holding 79 GB of
+  // unarchived transcripts, and the 79 GB appeared nowhere on the page.
+  const onDisk = disk?.unarchivedBytes ?? 0;
+  const total = disk?.sessions?.length ?? 0;
+  const pending = disk ? disk.sessions.filter((row) => !row.archived).length : 0;
+  if (status.archiveCount === 0 && onDisk > 0) {
+    overviewHeader = {
+      headline: `${bytes(onDisk)} of agent history on this disk`,
+      lede: `${pending} session${pending === 1 ? "" : "s"}, none archived yet. `
+        + '<a href="#sessions">Choose which to keep</a> — you pick them, and the originals stay where they are.'
+    };
+  } else if (status.archiveCount === 0) {
+    overviewHeader = {
+      headline: "Nothing preserved yet",
+      lede: 'Nothing has been archived yet. <a href="#sessions">Choose which sessions to keep</a> — '
+        + "you pick them, and the originals stay where they are."
+    };
+  } else if (onDisk > 0) {
+    overviewHeader = {
+      headline: `${bytes(status.archivedBytes)} sealed · ${bytes(onDisk)} still on this disk`,
+      lede: `${status.archiveCount} of ${total} session${total === 1 ? "" : "s"} archived. `
+        + `<a href="#sessions">${pending} more</a> could be, and the sealed ones restore on any machine that has your recovery kit.`
+    };
+  } else {
+    overviewHeader = {
+      headline: `${status.archiveCount} session${status.archiveCount === 1 ? "" : "s"} preserved`,
+      lede: `${bytes(status.archivedBytes)} of agent history you can restore on any machine that has your recovery kit.`
+    };
+  }
+  // Only write it to the header if Overview is the tab in view. Refresh runs this
+  // on a timer regardless of which tab is open; without this guard the disk story
+  // would overwrite the Queue or Settings title the moment a refresh landed.
+  if (currentView === "overview") applyHeader();
+}
+
+function renderQueue(queue, retention) {
+  // The automatic side's account of itself: what the rules could reclaim and
+  // what stands in the way — the conveyor's own dashboard, above the belt.
+  const eligible = retention.candidates.filter((candidate) => candidate.eligible);
+  $("retention-headline").textContent = retention.candidates.length === 0
+    ? "Nothing tracked for reclaim yet"
+    : eligible.length === 0 ? "Every source is protected" : `${bytes(retention.reclaimableBytes)} can be reclaimed`;
+  $("retention-summary").textContent = `${(POLICY_NAMES[retention.policy] ?? retention.policy).replace(/^./, (c) => c.toUpperCase())} · older than ${retention.olderThanDays} days · ${retention.graceDays}-day grace period.`;
+  $("reclaim").disabled = eligible.length === 0;
+
+  const automation = $("automation-panel");
+  const held = retention.candidates.filter((candidate) => !candidate.eligible);
+  const reasons = new Map();
+  for (const candidate of held) {
+    for (const blocker of candidate.blockers) {
+      const kind = blockerKind(blocker);
+      const entry = reasons.get(kind.chip) ?? { count: 0, size: 0, action: kind.action, example: blocker };
+      entry.count += 1;
+      entry.size += candidate.bytes;
+      reasons.set(kind.chip, entry);
+    }
+  }
+  automation.hidden = reasons.size === 0;
+  automation.replaceChildren();
+  if (reasons.size > 0) {
+    const intro = document.createElement("p");
+    intro.className = "note";
+    intro.textContent = `The automatic rules hold ${held.length} source${held.length === 1 ? "" : "s"} (${bytes(held.reduce((sum, c) => sum + c.bytes, 0))}). Why:`;
+    automation.append(intro);
+    const ACTIONS = {
+      upload: () => { const a = document.createElement("a"); a.href = "#queue"; a.textContent = "Upload pending sends the copies"; a.onclick = (e) => { e.preventDefault(); $("upload").click(); }; return a; },
+      rules: () => { const a = document.createElement("a"); a.href = "#rules"; a.textContent = "change the rules"; return a; },
+      age: () => { const span = document.createElement("span"); span.textContent = "passes on its own"; return span; }
+    };
+    for (const [chip, entry] of reasons) {
+      const line = document.createElement("p");
+      line.className = "note hold-line";
+      line.title = entry.example;
+      const label = document.createElement("b");
+      label.textContent = chip;
+      line.append(label, ` — ${entry.count} session${entry.count === 1 ? "" : "s"}, ${bytes(entry.size)} · `);
+      if (entry.action && ACTIONS[entry.action]) line.append(ACTIONS[entry.action]());
+      automation.append(line);
+    }
+    const manual = document.createElement("p");
+    manual.className = "note";
+    manual.textContent = "Or take rows in My vault yourself: check the copy, then free the disk — that click is the approval.";
+    automation.append(manual);
+  }
+
+  // A done job lives in Archives; leaving it in the queue list means a finished
+  // session sits forever beside ones still waiting, under a heading that says
+  // they are waiting. This view is only what is in flight or needs another try.
+  const active = queue.filter((job) => job.status !== "done");
+  $("count-queue").textContent = active.length || "";
+  if (active.length === 0) {
+    showEmpty("queue-panel", "Nothing waiting", 'Sessions land here when an agent hook fires, or when you <a href="#sessions">choose some to archive</a>.');
+    return;
+  }
+  const tbody = ensureTable("queue-panel", QUEUE_HEADERS);
+  tbody.replaceChildren();
+  for (const job of active) {
+    const row = tbody.insertRow();
+    // The state cell says what is actually happening, in a person's words:
+    // a working job shows the % of the file read so far, a waiting one says
+    // why it waits, a failed one says what went wrong. `badge(status)` alone
+    // was the system talking to itself.
+    const state = row.insertCell();
+    if (job.status === "leased") {
+      const pct = job.progress && job.progress.of > 0 ? Math.min(99, Math.floor((job.progress.bytes / job.progress.of) * 100)) : null;
+      state.innerHTML = `<span class="queued">sealing…${pct !== null ? ` ${pct}%` : ""}</span>`;
+      if (pct !== null) state.title = `${bytes(job.progress.bytes)} of ${bytes(job.progress.of)} read`;
+    } else if (job.status === "failed") {
+      state.innerHTML = '<span class="bad">failed</span>';
+      if (job.lastError) state.title = job.lastError.message ?? String(job.lastError);
+    } else if (job.lastError) {
+      const span = document.createElement("span");
+      span.className = "muted";
+      span.textContent = "waiting for room";
+      span.title = job.lastError.message ?? String(job.lastError);
+      state.append(span);
+    } else {
+      state.innerHTML = '<span class="muted">queued</span>';
+    }
+    cell(row, job.agent);
+    cell(row, String(job.attempts), "num");
+    cell(row, shortPath(job.sourcePath), "path");
+    // A waiting job can simply be taken back out — the session file is
+    // untouched and queueing it again is one click. The queue refuses the
+    // cases where "remove" would mean something bigger, and its refusal
+    // message is shown as-is.
+    const act = row.insertCell();
+    if (job.status !== "leased") {
+      const remove = document.createElement("button");
+      remove.type = "button";
+      remove.className = "action";
+      remove.textContent = "Remove";
+      remove.onclick = async () => {
+        remove.disabled = true;
+        try { await api(`/v1/queue/${encodeURIComponent(job.id)}`, { method: "DELETE" }); await guard(refresh); }
+        catch (error) { remove.disabled = false; setStatus(error.message, "warn"); }
+      };
+      act.append(remove);
+    }
+  }
+}
+
+/**
+ * The one button that hands over the restore command, shared by My vault and
+ * the Restore view so the two can never drift. Restoring stays a deliberate
+ * command run in a terminal — this page cannot decrypt and never will (the
+ * API refuses the phrase by design). What a row CAN do is hand over the exact
+ * command, filled in, so "how do I get this back" is a paste instead of a
+ * manual.
+ */
+function restoreButton(archive) {
+  const hand = document.createElement("button");
+  hand.type = "button";
+  hand.className = "action";
+  hand.textContent = "Restore…";
+  hand.title = "Copies the terminal command that restores this session";
+  hand.onclick = async () => {
+    const name = (archive.path || archive.id).split("/").pop();
+    // A reclaimed source is the resume-broken case: the agent's catalog still
+    // points at the old path, so the command that helps is the one that puts
+    // the file BACK THERE — not a copy on the Desktop.
+    const command = archive.reclaimed
+      ? `sealkeep recover ${archive.id} --native`
+      : `sealkeep recover ${archive.id} ~/Desktop/${name}`;
+    try { await navigator.clipboard.writeText(command); hand.textContent = "Copied"; }
+    catch { window.prompt("Run this in a terminal:", command); }
+    setTimeout(() => { hand.textContent = "Restore…"; }, 2000);
+  };
+  return hand;
+}
+
+function renderArchives(archives, retention) {
+  $("count-archives").textContent = archives.length || "";
+  if (archives.length === 0) {
+    showEmpty("archives-panel", "No archives yet", 'Nothing has been sealed on this machine. <a href="#sessions">Choose sessions to archive</a> and they appear here.');
+    return;
+  }
+
+  const panel = $("archives-panel");
+  panel.replaceChildren();
+
+  // Selection that outlived its rows is not a selection.
+  const liveIds = new Set(archives.map((archive) => archive.id));
+  for (const id of [...vaultChosen]) if (!liveIds.has(id)) vaultChosen.delete(id);
+
+  // The bulk bar: pick rows, then act on all of them at once. The dangerous
+  // verbs keep the armed two-step and say what they are about to do; bulk
+  // delete deliberately never destroys a last copy — those rows are reported
+  // and left for the row's own button, where "forever" can be said properly.
+  const bar = document.createElement("div");
+  bar.className = "row";
+  bar.style.margin = "0 0 .6rem";
+  const barCount = document.createElement("span");
+  barCount.className = "note";
+  const barActions = document.createElement("div");
+  barActions.className = "actions";
+  const byId = new Map(archives.map((archive) => [archive.id, archive]));
+  const chosenList = () => [...vaultChosen].map((id) => byId.get(id)).filter(Boolean);
+
+  const barWarning = document.createElement("p");
+  barWarning.className = "note act-note";
+  barWarning.hidden = true;
+
+  const updateBar = () => {
+    const rows = chosenList();
+    const total = rows.reduce((sum, archive) => sum + archive.bytes, 0);
+    barCount.textContent = rows.length === 0 ? "Tick rows to act on several at once." : `${rows.length} selected · ${bytes(total)}`;
+    for (const button of barActions.children) button.disabled = rows.length === 0;
+  };
+
+  const bulkCheck = document.createElement("button");
+  bulkCheck.type = "button";
+  bulkCheck.className = "action";
+  bulkCheck.textContent = "Check copies";
+  bulkCheck.title = "Asks your storage, right now, about every selected archive";
+  bulkCheck.onclick = async () => {
+    const ids = [...vaultChosen];
+    bulkCheck.disabled = true;
+    bulkCheck.textContent = "Asking…";
+    try {
+      const { results } = await api("/v1/archives/check-copies", { method: "POST", body: JSON.stringify({ ids }) });
+      const bad = results.filter((item) => !item.ok);
+      setStatus(bad.length === 0
+        ? `Your storage answered for all ${results.length}: every copy is there at its recorded size.`
+        : `${results.length - bad.length} confirmed · ${bad.length} NOT confirmed — do not trash those originals. First problem: ${bad[0].detail}`,
+        bad.length === 0 ? "ok" : "warn");
+    } catch (error) {
+      setStatus(`Could not check: ${error.message}`, "warn");
+    } finally {
+      bulkCheck.textContent = "Check copies";
+      updateBar();
+    }
+  };
+
+  const bulkFree = document.createElement("button");
+  bulkFree.type = "button";
+  bulkFree.className = "action";
+  bulkFree.textContent = "Free up disk";
+  bulkFree.title = "Moves every selected original to your trash — each one only if its cloud copy is verified, its bytes unchanged, and nothing is using it";
+  bulkFree.onclick = async () => {
+    if (bulkFree.dataset.armed !== "yes") {
+      bulkFree.dataset.armed = "yes";
+      bulkFree.textContent = "To trash?";
+      barWarning.hidden = false;
+      barWarning.textContent = `Moves ${vaultChosen.size} original session file${vaultChosen.size === 1 ? "" : "s"} to your trash. Each row is checked first — no verified cloud copy, changed bytes, or a file in use means that row is kept and says why. Archives are never touched.`;
+      setTimeout(() => { if (bulkFree.dataset.armed === "yes") { bulkFree.dataset.armed = "no"; bulkFree.textContent = "Free up disk"; barWarning.hidden = true; } }, 6000);
+      return;
+    }
+    bulkFree.dataset.armed = "no";
+    barWarning.hidden = true;
+    bulkFree.disabled = true;
+    try {
+      const outcome = await api("/v1/archives/reclaim-batch", { method: "POST", body: JSON.stringify({ ids: [...vaultChosen], confirm: true }) });
+      setStatus(`${outcome.reclaimed.length} moved to trash · ${bytes(outcome.freedBytes)} freed${outcome.kept.length ? ` · ${outcome.kept.length} kept — first reason: ${outcome.kept[0].reason}` : ""}`, outcome.kept.length ? "warn" : "ok");
+      vaultChosen.clear();
+      await guard(refresh);
+    } catch (error) {
+      bulkFree.textContent = "Free up disk";
+      setStatus(`Nothing moved: ${error.message}`, "warn");
+      updateBar();
+    }
+  };
+
+  const bulkDelete = document.createElement("button");
+  bulkDelete.type = "button";
+  bulkDelete.className = "action danger";
+  bulkDelete.textContent = "Delete from cloud";
+  bulkDelete.title = "Removes every selected archive — from your cloud and this machine. Last copies are skipped, never bulk-destroyed.";
+  bulkDelete.onclick = async () => {
+    if (bulkDelete.dataset.armed !== "yes") {
+      bulkDelete.dataset.armed = "yes";
+      bulkDelete.textContent = "Confirm delete";
+      barWarning.hidden = false;
+      barWarning.textContent = `Removes ${vaultChosen.size} archive${vaultChosen.size === 1 ? "" : "s"} — the cloud copies and everything Sealkeep holds. A row whose original session file is gone is the ONLY copy of that session: bulk delete refuses those and leaves them for their own row, where deleting forever has to be said to that one session.`;
+      setTimeout(() => { if (bulkDelete.dataset.armed === "yes") { bulkDelete.dataset.armed = "no"; bulkDelete.textContent = "Delete from cloud"; barWarning.hidden = true; } }, 6000);
+      return;
+    }
+    bulkDelete.dataset.armed = "no";
+    barWarning.hidden = true;
+    bulkDelete.disabled = true;
+    let deleted = 0;
+    const keptForever = [];
+    const failedRows = [];
+    for (const id of [...vaultChosen]) {
+      try {
+        await api(`/v1/archives/${encodeURIComponent(id)}`, { method: "DELETE", body: JSON.stringify({ confirm: true }) });
+        deleted += 1;
+        vaultChosen.delete(id);
+      } catch (error) {
+        if (error.forever) keptForever.push(id);
+        else failedRows.push(error.message);
+      }
+    }
+    setStatus(`${deleted} deleted${keptForever.length ? ` · ${keptForever.length} kept: the only copy of their session — delete those row by row, deliberately` : ""}${failedRows.length ? ` · ${failedRows.length} failed: ${failedRows[0]}` : ""}`, keptForever.length || failedRows.length ? "warn" : "ok");
+    await guard(refresh);
+  };
+
+  barActions.append(bulkCheck, bulkFree, bulkDelete);
+  bar.append(barCount, barActions);
+  panel.append(bar, barWarning);
+  updateBar();
+
+  const table = document.createElement("table");
+  const thead = table.createTHead().insertRow();
+  for (const header of ARCHIVE_HEADERS) {
+    const th = document.createElement("th");
+    th.textContent = header.label;
+    if (header.num) th.className = "num";
+    thead.append(th);
+  }
+  const tbody = table.createTBody();
+  const candidates = new Map(retention.candidates.map((candidate) => [candidate.id, candidate]));
+
+  const renderArchiveRow = (archive, indented) => {
+
+    const candidate = candidates.get(archive.id) ?? null;
+    const row = tbody.insertRow();
+    if (indented) row.className = "chain-row";
+    const tick = row.insertCell();
+    const box = document.createElement("input");
+    box.type = "checkbox";
+    box.checked = vaultChosen.has(archive.id);
+    box.onchange = () => { box.checked ? vaultChosen.add(archive.id) : vaultChosen.delete(archive.id); updateBar(); };
+    tick.append(box);
+    cell(row, ago(archive.createdAt));
+    cell(row, bytes(archive.bytes), "num");
+    const session = cell(row, String(archive.path || archive.id).split("/").pop(), "path");
+    session.title = archive.path || archive.id;
+
+    // Where the copies live — the cloud copy first because it is the one that
+    // survives this disk, then what is still ON this disk.
+    const where = row.insertCell();
+    const cloud = archive.remote
+      ? (archive.offloaded ? badge("in your cloud", "verified") : badge("here + cloud", "verified"))
+      : badge("this disk only", "local");
+    cloud.title = archive.remote
+      ? (archive.offloaded
+        ? `Verified in your storage ${ago(archive.remote.verifiedAt)} — the local sealed copy was given back to the disk. Restore fetches it.`
+        : `Verified in your storage ${ago(archive.remote.verifiedAt)}; a sealed copy is also on this machine.`)
+      : "No verified cloud copy yet — this archive is lost with this disk.";
+    where.append(cloud);
+    if (archive.reclaimed) {
+      const src = badge("source reclaimed", "free");
+      src.title = "The original file went to your trash after its copy was verified.";
+      where.append(src);
+    } else if (candidate) {
+      const src = badge("source on disk", "local");
+      src.title = "The original session file is still on this machine.";
+      where.append(src);
+    }
+
+    // Why the AUTOMATIC pass holds this one. The manual buttons on the right
+    // are how a person overrules the soft reasons; the hard ones (no cloud
+    // copy, file changed, file in use) refuse there too, with a sentence.
+    const why = row.insertCell();
+    if (!candidate || candidate.eligible) { why.textContent = "—"; why.className = "muted"; }
+    else for (const blocker of candidate.blockers) {
+      const chip = document.createElement("span");
+      chip.className = "hold-chip";
+      chip.textContent = blockerKind(blocker).chip;
+      chip.title = blocker;
+      why.append(chip);
+    }
+
+    const act = row.insertCell();
+    act.append(restoreButton(archive));
+
+    // "Is my backup really there?" — asked of the storage, right now, not of
+    // our own records. The answer arrives as a sentence on the status line
+    // and re-labels the button for a moment.
+    if (archive.remote) {
+      const check = document.createElement("button");
+      check.type = "button";
+      check.className = "action";
+      check.textContent = "Check copy";
+      check.title = "Asks your storage, right now, whether it still holds this archive at the recorded size";
+      check.onclick = async () => {
+        check.disabled = true;
+        check.textContent = "Asking…";
+        try {
+          const outcome = await api(`/v1/archives/${encodeURIComponent(archive.id)}/check-copy`, { method: "POST" });
+          check.textContent = outcome.ok ? "Copy is there ✓" : "Missing!";
+          check.classList.toggle("danger", !outcome.ok);
+          setStatus(outcome.detail, outcome.ok ? "ok" : "warn");
+        } catch (error) {
+          check.textContent = "Check copy";
+          setStatus(`Could not check: ${error.message}`, "warn");
+        } finally {
+          check.disabled = false;
+          setTimeout(() => { check.textContent = "Check copy"; check.classList.remove("danger"); }, 4000);
+        }
+      };
+      act.append(check);
+    }
+
+    // Free THIS source — the armed two-step, per row. The server holds the
+    // hard gates (verified copy incl. delta chains, unchanged bytes, not in
+    // use) and refuses with the reason; policy, age and grace are what this
+    // button exists to overrule, so they are not consulted.
+    if (candidate && !archive.reclaimed) {
+      const free = document.createElement("button");
+      free.type = "button";
+      free.className = "action";
+      free.textContent = "Free up disk";
+      free.title = archive.remote
+        ? "Moves the original session file to your trash — the verified cloud copy is the archive"
+        : "Needs a verified cloud copy first — right now this disk holds the only bytes";
+      free.disabled = !archive.remote;
+      free.onclick = async () => {
+        if (free.dataset.armed !== "yes") {
+          free.dataset.armed = "yes";
+          free.textContent = "To trash?";
+          setTimeout(() => { if (free.dataset.armed === "yes") { free.dataset.armed = "no"; free.textContent = "Free up disk"; } }, 4000);
+          return;
+        }
+        free.dataset.armed = "no";
+        free.disabled = true;
+        try {
+          const outcome = await api(`/v1/archives/${encodeURIComponent(archive.id)}/reclaim`, { method: "POST", body: JSON.stringify({ confirm: true }) });
+          setStatus(`Moved to trash: ${bytes(outcome.reclaimed.bytes)} freed. The archive is untouched.`, "ok");
+          await guard(refresh);
+        } catch (error) {
+          free.disabled = false;
+          free.textContent = "Free up disk";
+          setStatus(`Kept: ${error.message}`, "warn");
+        }
+      };
+      act.append(free);
+    }
+
+    // Delete, renamed to what it actually removes, with the danger described
+    // BEFORE the second click instead of learned from a refusal. The armed
+    // two-step stays; arming now also shows a sentence naming exactly what
+    // goes and what remains. When the original session file is already gone
+    // (`reclaimed` says so), the first click is already the forever warning —
+    // this cloud copy is the only form the session exists in anywhere, and
+    // deleting it cannot be undone by anyone. The server's own stat-based
+    // refusal stays underneath for sources deleted by hand.
+    const cloudy = !!archive.remote;
+    const foreverUpfront = !!archive.reclaimed;
+    const del = document.createElement("button");
+    del.type = "button";
+    del.className = "action danger";
+    const delRestLabel = () => (foreverUpfront || del.dataset.forever === "yes" ? "Delete forever" : cloudy ? "Delete from cloud" : "Delete");
+    del.textContent = delRestLabel();
+    const delWarning = document.createElement("span");
+    delWarning.className = "act-note";
+    delWarning.hidden = true;
+    const describeDelete = () => {
+      if (foreverUpfront || del.dataset.forever === "yes") {
+        return "DANGER: the original file is gone, so this cloud copy is the ONLY copy of this session anywhere. Deleting it destroys the session forever — nothing can bring it back.";
+      }
+      if (cloudy && archive.offloaded) {
+        return "Removes the copy from your cloud — the only sealed copy. The original session file is still on this disk, so you can seal it again.";
+      }
+      if (cloudy) {
+        return "Removes the sealed copies from your cloud and this machine. The original session file stays on this disk.";
+      }
+      return "Removes the only sealed copy, which is on this machine. The original session file stays on this disk.";
+    };
+    del.onclick = async () => {
+      if (del.dataset.armed !== "yes") {
+        del.dataset.armed = "yes";
+        del.textContent = foreverUpfront || del.dataset.forever === "yes" ? "Destroy forever?" : "Confirm delete";
+        delWarning.textContent = describeDelete();
+        delWarning.hidden = false;
+        setTimeout(() => { if (del.dataset.armed === "yes") { del.dataset.armed = "no"; del.textContent = delRestLabel(); delWarning.hidden = true; } }, 6000);
+        return;
+      }
+      del.dataset.armed = "no";
+      delWarning.hidden = true;
+      del.disabled = true;
+      try {
+        await api(`/v1/archives/${encodeURIComponent(archive.id)}`, {
+          method: "DELETE",
+          body: JSON.stringify({ confirm: true, confirmForever: foreverUpfront || del.dataset.forever === "yes" })
+        });
+        await guard(refresh);
+      } catch (error) {
+        del.disabled = false;
+        if (error.forever) {
+          // The server knows something the record did not say: the source is
+          // gone. Re-arm with the forever words and the loud description.
+          del.dataset.forever = "yes";
+          del.textContent = "Delete forever";
+          delWarning.textContent = describeDelete();
+          delWarning.hidden = false;
+          setStatus("The original file is gone — this archive is the only copy of that session. Deleting it is forever.", "warn");
+        } else {
+          del.textContent = delRestLabel();
+          setStatus(error.message, "warn");
+        }
+      }
+    };
+    act.append(del, delWarning);
+    return row;
+  };
+
+  // ---- Folder-shaped vault -------------------------------------------------
+  // A vault is not a flat list of objects; it is sessions inside projects,
+  // and a session may be a CHAIN of snapshots (a full plus the deltas sealed
+  // since). One row per session, its earlier snapshots folded behind a count,
+  // sessions folded into their project the way the Memory pool names them.
+  const bySession = new Map();
+  for (const archive of archives) {
+    const key = archive.path || archive.id;
+    if (!bySession.has(key)) bySession.set(key, []);
+    bySession.get(key).push(archive);
+  }
+  const chains = [...bySession.values()].map((chain) => [...chain].sort((a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt)));
+  chains.sort((a, b) => b[0].bytes - a[0].bytes);
+
+  const renderChain = (chain) => {
+    renderArchiveRow(chain[0], false);
+    if (chain.length > 1) {
+      const headId = chain[0].id;
+      const open = vaultOpenChains.has(headId);
+      const toggleRow = tbody.insertRow();
+      toggleRow.className = "chain-fold";
+      const cellSpan = toggleRow.insertCell();
+      cellSpan.colSpan = ARCHIVE_HEADERS.length;
+      const toggle = document.createElement("button");
+      toggle.type = "button";
+      toggle.className = "linkish";
+      toggle.textContent = `${open ? "▾" : "▸"} ${chain.length - 1} earlier snapshot${chain.length === 2 ? "" : "s"} of this session`;
+      toggle.title = "A session archived more than once is a chain: the newest snapshot above, the ones it grew from here.";
+      toggle.onclick = () => { open ? vaultOpenChains.delete(headId) : vaultOpenChains.add(headId); redrawTable(); };
+      cellSpan.append(toggle);
+      if (open) for (const older of chain.slice(1)) renderArchiveRow(older, true);
+    }
+  };
+
+  const byProject = new Map();
+  for (const chain of chains) {
+    const key = chain[0].project ?? "";
+    if (!byProject.has(key)) byProject.set(key, { name: chain[0].project, path: chain[0].projectPath, chains: [] });
+    byProject.get(key).chains.push(chain);
+  }
+  const groups = [...byProject.values()].map((group) => ({
+    ...group,
+    bytes: group.chains.reduce((sum, chain) => sum + chain[0].bytes, 0),
+    stored: group.chains.filter((chain) => chain[0].remote).length
+  })).sort((a, b) => b.bytes - a.bytes);
+
+  const redrawTable = () => {
+    tbody.replaceChildren();
+    // One project (or none named): folders would be ceremony. Flat it stays.
+    if (groups.length <= 1) {
+      for (const chain of chains) renderChain(chain);
+      return;
+    }
+    for (const group of groups) {
+      const key = group.name ?? "";
+      const open = vaultOpenGroups.has(key);
+      const header = tbody.insertRow();
+      header.className = "group-row";
+      const tick = header.insertCell();
+      const box = document.createElement("input");
+      box.type = "checkbox";
+      const headIds = group.chains.map((chain) => chain[0].id);
+      box.checked = headIds.every((id) => vaultChosen.has(id));
+      box.title = "Select every session in this project";
+      box.onchange = () => {
+        for (const id of headIds) box.checked ? vaultChosen.add(id) : vaultChosen.delete(id);
+        updateBar();
+        redrawTable();
+      };
+      tick.append(box);
+      const label = header.insertCell();
+      label.colSpan = ARCHIVE_HEADERS.length - 1;
+      const name = document.createElement("b");
+      name.textContent = `${open ? "▾" : "▸"} ${group.name ?? "No project"}`;
+      const meta = document.createElement("span");
+      meta.className = "muted";
+      meta.textContent = `  ${group.path ? group.path.replace(/^\/(?:Users|home)\/[^/]+/, "~") + " · " : ""}${group.chains.length} session${group.chains.length === 1 ? "" : "s"} · ${bytes(group.bytes)} · ${group.stored === group.chains.length ? "all in your cloud" : `${group.stored} of ${group.chains.length} in your cloud`}`;
+      label.append(name, meta);
+      label.style.cursor = "pointer";
+      label.onclick = () => { open ? vaultOpenGroups.delete(key) : vaultOpenGroups.add(key); redrawTable(); };
+      if (open) for (const chain of group.chains) renderChain(chain);
+    }
+  };
+  redrawTable();
+  panel.append(table);
+}
+
+/**
+ * A blocker sentence, folded to the two words a chip can carry, and the action
+ * that clears it. The full sentence stays on the tooltip and in the summary —
+ * what left the screen is the 48th repetition, not the information.
+ */
+function blockerKind(text) {
+  if (/not yet uploaded/.test(text)) return { chip: "no cloud copy", action: "upload" };
+  if (/keep everything|retention is set/.test(text)) return { chip: "policy keeps all", action: "rules" };
+  if (/younger than|threshold/.test(text)) return { chip: "too young", action: "age" };
+  if (/grace/.test(text)) return { chip: "in grace period", action: "age" };
+  if (/in use|using the file|open/.test(text)) return { chip: "file in use", action: null };
+  return { chip: text.length > 24 ? `${text.slice(0, 22)}…` : text, action: null };
+}
+
+/** The background service's own account of itself, so "is it working?" is answerable. */
+function renderDaemon(daemon) {
+  const pill = $("daemon");
+  pill.hidden = false;
+  const tone = daemon.state === "running" ? "ok" : daemon.state === "late" ? "warn" : "";
+  const totals = daemon.totals;
+  const summary = totals && (totals.archived || totals.reclaimed)
+    ? ` · ${totals.archived} sealed, ${totals.reclaimed} reclaimed since it started`
+    : "";
+  pill.className = `pill ${tone}`.trim();
+  prose(pill, `${daemon.detail}${summary}`);
+}
+
+function renderHealth(doctor) {
+  // Problems first. Two warnings — "no sealed key backup" and "recovery phrase
+  // not stored" — used to sit in reading order among eight passes with only a
+  // 3px border to tell them apart, on a page whose whole job is to surface
+  // exactly those two.
+  const rank = { fail: 0, warn: 1, pass: 2 };
+  const ordered = [...doctor.checks].sort((a, b) => (rank[a.status] ?? 3) - (rank[b.status] ?? 3));
+  const attention = ordered.filter((check) => check.status !== "pass").length;
+  $("count-health").textContent = attention || "";
+
+  $("checks").replaceChildren(...ordered.map((check) => {
+    const row = document.createElement("div");
+    row.className = `check check-${check.status}`;
+    const label = document.createElement("strong");
+    label.textContent = CHECK_LABELS[check.name] ?? check.name;
+    const detail = document.createElement("span");
+    prose(detail, check.detail);
+    row.append(label, detail);
+    return row;
+  }));
+  // The footer keeps its own sentence. It used to be overwritten with the crypto
+  // check's detail, so the last line of every page became "…not independently
+  // audited" — an honest fact that belongs in Health with context, not standing
+  // under the archive count as a disclaimer.
+}
+
+/**
+ * Whether this machine can seal on its own, and the way to make it so.
+ *
+ * A vault made from the terminal used to look finished and not be: the
+ * Archive button answered "no stored recovery phrase" and offered a command.
+ * This is the button.
+ */
+/**
+ * The account card in the rail: who this is, and the two facts a customer
+ * checks at a glance.
+ *
+ * The plan badge is the first acknowledgement anywhere in the chrome that a
+ * person pays; Pro gets the animated one, free gets the plain one, and a signed-
+ * out local vault gets "Local" rather than a blank. Below it: whether this
+ * machine can seal unattended, and where archives go — the two things a person
+ * wants confirmed without opening a tab.
+ */
+// The card itself lives in rail.js, shared with the Sessions and Free-up-disk
+// rules pages — keeping a private copy here is how the rail lost its top on
+// every page change. This wrapper only reuses the status the dashboard already has.
+async function renderAccountCard(status) {
+  await renderAccountRail(api, status);
+}
+
+async function renderRemember() {
+  try {
+    const state = await api("/v1/setup/state");
+    const held = Boolean(state.vault?.phraseRemembered);
+    $("remember-state").textContent = held
+      ? "This machine holds the recovery phrase, so archiving runs without you typing it."
+      : "This machine does not hold the recovery phrase. It can only archive when you type the phrase in — or store it here once.";
+    $("remember-form").hidden = held;
+  } catch (error) {
+    $("remember-state").textContent = `Could not check: ${error.message}`;
+  }
+}
+
+/**
+ * Whether this machine seals on its own, and the one control that turns it on.
+ *
+ * Before this, automatic archiving could only be enabled by the one-time setup
+ * wizard or a terminal command — the dashboard talked about "turning it on from
+ * Settings" with no such control in Settings. This is that control.
+ */
+function renderAutopilot(daemon) {
+  const state = daemon?.state;
+  const offForGood = state === "never-started";
+  $("autopilot-state").textContent = offForGood
+    ? "Automatic archiving is off. You are archiving only what you choose from the Sessions page."
+    : state === "running"
+      ? "Automatic archiving is on. Sealkeep runs in the background and seals new sessions on its own."
+      : state === "stopped"
+        ? "The background service is installed but not running right now. It should restart at your next login."
+        : "The background service is set up on this machine.";
+  $("autopilot-form").hidden = !offForGood;
+  $("autopilot-error").hidden = true;
+}
+
+$("autopilot-go").onclick = async () => {
+  $("autopilot-error").hidden = true;
+  $("autopilot-go").disabled = true;
+  try {
+    const outcome = await api("/v1/setup/service", { method: "POST", body: JSON.stringify({ confirm: true }) });
+    $("autopilot-form").hidden = true;
+    $("autopilot-state").textContent = outcome.service?.alreadyInstalled
+      ? "Automatic archiving is already set up on this machine."
+      : "Automatic archiving is on. Sealkeep will start sealing new sessions in the background within a few minutes.";
+  } catch (error) {
+    $("autopilot-error").textContent = error.message;
+    $("autopilot-error").hidden = false;
+  } finally {
+    $("autopilot-go").disabled = false;
+  }
+};
+
+$("remember-go").onclick = async () => {
+  const phrase = $("f-remember-phrase").value.trim();
+  $("remember-error").hidden = true;
+  if (!phrase) { $("remember-error").textContent = "Type the 24 words, in order."; $("remember-error").hidden = false; return; }
+  $("remember-go").disabled = true;
+  try {
+    await api("/v1/setup/remember", { method: "POST", body: JSON.stringify({ phrase }) });
+    $("f-remember-phrase").value = "";
+    await renderRemember();
+    // The sidebar card reads the same "does this machine hold the phrase" fact.
+    // Refresh it here too, or it keeps saying "Phrase not stored" beside a panel
+    // that just confirmed the opposite.
+    await renderAccountCard(state.status);
+  } catch (error) {
+    $("remember-error").textContent = error.message;
+    $("remember-error").hidden = false;
+  } finally {
+    $("remember-go").disabled = false;
+  }
+};
+
+/** Same wording as sync-rules.ts's describeSyncRules — the account and the mirror should read alike. */
+function describeSync(sync) {
+  if (sync.mode === "recent") return `most recent ${sync.keepLast} sessions`;
+  if (sync.mode === "settled") return `sessions untouched for ${sync.minAgeDays}d`;
+  return "every session";
+}
+
+function describeSyncSource(source) {
+  if (source === "account") return "from the account";
+  if (source === "cache") return "last known value; the account is unreachable right now";
+  return "built-in default; no account has ever been reachable from here";
+}
+
+function describeReclaimWindow(win) {
+  if (win.state === "open") return "Open now";
+  if (win.state === "waiting") return until(win.notBefore);
+  return "Not scheduled";
+}
+
+function describeReclaimDetail(win) {
+  if (win.state === "open") return "sources are ready — use “Move sources to trash” on the Free up disk tab";
+  if (win.state === "waiting") return `${win.pending} source${win.pending === 1 ? "" : "s"} waiting on age alone — see Free up disk for every blocker`;
+  return "reclaim is off, or nothing is archived yet";
+}
+
+/** The status readout: everything here already exists in state.status from the last refresh(). */
+function renderSettingsStatus(status) {
+  $("set-queue").textContent = status.queue.ready + status.queue.leased;
+  $("set-queue-detail").textContent = status.queue.failed ? `${status.queue.failed} need attention` : `${status.queue.done} archived so far`;
+  $("set-sync").textContent = status.lastSyncAt ? ago(status.lastSyncAt) : "never";
+  $("set-sync-ago").textContent = status.lastSyncAt ? "" : "the background service has not run on this machine yet";
+  $("set-archives").textContent = status.archiveCount;
+  $("set-reclaim-window").textContent = describeReclaimWindow(status.nextReclaimWindow);
+  $("set-reclaim-detail").textContent = describeReclaimDetail(status.nextReclaimWindow);
+}
+
+/** The account's settings, read-only by construction: nothing here has an input element. */
+function renderAccountMirror(remote) {
+  $("set-sync-mode").textContent = describeSync(remote.sync);
+  $("set-sync-source").textContent = describeSyncSource(remote.sync.source);
+  // "pro" is an enum, not a name, and the tile beneath it was a hard-coded
+  // non-breaking space. This is the only place the dashboard acknowledges that
+  // someone is paying, so it says the plan's name and what it includes.
+  const planNames = { pro: "Pro", pro_lite: "Pro Lite", free: "Free" };
+  $("set-plan").textContent = remote.plan ? (planNames[remote.plan] ?? remote.plan) : "Free — your own bucket";
+  const planNote = $("set-plan").nextElementSibling;
+  if (planNote && remote.quota?.quotaBytes) {
+    planNote.textContent = `${bytes(remote.quota.quotaBytes)} included · ${bytes(remote.quota.usedBytes ?? 0)} used`;
+  } else if (planNote) {
+    // Pro Lite holds no bytes here — its value is the escrow and the signed-in
+    // machines, and the note must not promise storage that plan does not include.
+    planNote.textContent = remote.plan === "pro_lite" ? "your storage · key escrow · every machine"
+      : remote.plan ? "managed storage" : "no account needed";
+  }
+  $("set-quota").textContent = remote.quota ? bytes(remote.quota.usedBytes) : "not known";
+  $("set-quota-detail").textContent = remote.quota ? `of ${bytes(remote.quota.quotaBytes)} included` : "sign in, or nothing is hosted on this account";
+  $("set-panel-link").href = remote.panelUrl;
+}
+
+function renderSettingsForm(local, resolvedTrashStrategy) {
+  $("f-device-label").value = local.deviceLabel;
+  $("f-watch-codex").checked = local.watchedAgents.includes("codex");
+  $("f-watch-claude").checked = local.watchedAgents.includes("claude");
+  $("f-watched-paths").value = local.watchedPaths.join("\n");
+  $("f-exclusions").value = local.exclusions.join("\n");
+  $("f-reclaim-enabled").checked = local.reclaimEnabled;
+  $("f-trash-strategy").value = local.trashStrategy;
+  $("f-trash-resolved").textContent = `"Automatic" currently means ${resolvedTrashStrategy} on this machine.`;
+  $("f-interval").value = local.schedule.intervalMinutes;
+  $("f-bandwidth").value = local.bandwidth.uploadLimitMbps ?? "";
+  $("f-reserve").value = local.diskReserveMb ?? "";
+  $("settings-saved").textContent = "";
+}
+
+/** Turns the form's current contents into the shape PUT /v1/settings expects. */
+function collectSettingsPatch() {
+  const lines = (value) => value.split("\n").map((line) => line.trim()).filter(Boolean);
+  const watchedAgents = [];
+  if ($("f-watch-codex").checked) watchedAgents.push("codex");
+  if ($("f-watch-claude").checked) watchedAgents.push("claude");
+  const bandwidth = $("f-bandwidth").value.trim();
+  return {
+    deviceLabel: $("f-device-label").value.trim(),
+    watchedAgents,
+    watchedPaths: lines($("f-watched-paths").value),
+    exclusions: lines($("f-exclusions").value),
+    reclaimEnabled: $("f-reclaim-enabled").checked,
+    trashStrategy: $("f-trash-strategy").value,
+    schedule: { intervalMinutes: Math.min(1440, Math.max(1, Math.round(Number($("f-interval").value)) || 5)) },
+    bandwidth: { uploadLimitMbps: bandwidth === "" ? null : Math.max(0, Number(bandwidth) || 0) },
+    diskReserveMb: (() => {
+      const raw = $("f-reserve").value.trim();
+      return raw === "" ? null : Math.min(102_400, Math.max(200, Math.round(Number(raw) || 0)));
+    })()
+  };
+}
+
+/**
+ * Fetched only when this tab is opened, not folded into refresh()'s Promise.all:
+ * the status half is already in state.status, and fetching /v1/settings on
+ * every background refresh would repopulate the form out from under someone
+ * mid-edit on a tab that happens to still be open.
+ */
+async function loadSettings() {
+  renderSettingsStatus(state.status);
+  const settings = await api("/v1/settings");
+  state.settings = settings;
+  renderAccountMirror(settings.remote);
+  if (!settingsLoaded) { renderSettingsForm(settings.local, settings.resolvedTrashStrategy); settingsLoaded = true; }
+  void renderRemember();
+  renderAutopilot(state.daemon);
+  // Keep the sidebar card in lockstep with the Unlocking panel it sits beside:
+  // both answer "does this machine hold the phrase", and refreshing only one led
+  // to a green "Seals on its own" card next to a "does not hold the phrase" panel.
+  void renderAccountCard(state.status);
+}
+
+async function refresh() {
+  setStatus("Refreshing", "busy");
+  const [status, queue, archives, retention, doctor, agents, daemon, disk] = await Promise.all([
+    api("/v1/status"), api("/v1/queue"), api("/v1/archives"), api("/v1/retention"), api("/v1/doctor"), api("/v1/agents"), api("/v1/daemon"),
+    // Tolerated failure: the picture of what is on disk is worth having and not
+    // worth blocking the whole dashboard over.
+    api("/v1/sessions").catch(() => null)
+  ]);
+  state = { status, queue, archives, retention, doctor, agents, daemon, disk };
+
+  $("gate").hidden = true;
+  $("app").hidden = false;
+  // A refresh — or a fresh visit — mid-upload picks the progress straight
+  // back up: the run lives on the server, the page only watches it.
+  drawUpload(status.upload ?? null);
+  if (status.upload && !status.upload.finishedAt) watchUpload();
+  renderOverview(state);
+  void renderAccountCard(status);
+  renderQueue(queue, retention);
+  renderArchives(archives, retention);
+  renderHealth(doctor);
+  renderDaemon(daemon);
+  setStatus(doctor.ok ? `Connected · vault ${status.vaultId.slice(0, 8)}` : "Connected · needs attention", doctor.ok ? "ok" : "warn");
+}
+
+// Each view owns its title. The header used to be written once, by the Overview
+// render, and left there — so "3.1 GB sealed · 79 GB still on this disk" sat
+// above the Settings form and the Queue and everything else, as if the whole app
+// were one page about the disk. Overview's line is computed from live state (see
+// renderOverview); the rest are fixed.
+const VIEW_HEADERS = {
+  sessions: { headline: "Memory pool", lede: "Pick what to archive. Nothing is chosen for you, nothing runs in the background, and no original is removed here — archiving only makes the sealed copy." },
+  rules: { headline: "Free up disk — rules", lede: "When Sealkeep may reclaim the original file. Archives are never touched by this — only the source on your disk." },
+  queue: { headline: "Queue", lede: "Work in motion: sessions sealing (with progress), uploads pending, and what the automatic rules would reclaim once copies are safe. Finished work lands in My vault." },
+  archives: { headline: "My vault", lede: "Every archive, where its copies live, and what each row can do: restore it, check the copy your storage holds, free the disk it came from, or delete it. Sources go to your trash; sealed archives are never touched by reclaiming." },
+  settings: { headline: "This machine", lede: "How this machine watches, seals and reclaims. These apply here; account-wide options live in the panel." },
+  health: { headline: "Health", lede: "What Sealkeep can and cannot do on this machine right now." }
+};
+let currentView = "overview";
+let overviewHeader = { headline: "Your agent history", lede: "Reading live state from the Sealkeep agent on this machine." };
+
+function applyHeader() {
+  const header = currentView === "overview" ? overviewHeader : VIEW_HEADERS[currentView];
+  if (!header) return;
+  $("headline").textContent = header.headline;
+  $("lede").innerHTML = header.lede;
+}
+
+// The dashboard's views double as URL fragments, so the other pages (Sessions,
+// the retention rules) can link straight to Queue / Archives / Settings / Health,
+// and a bookmarked or shared #view opens the right tab. Without this, an
+// #archives on the URL was simply ignored and every cross-page link dumped you
+// back on Overview.
+const VIEWS = ["overview", "sessions", "queue", "archives", "restore", "retention", "rules", "settings", "health"];
+// Restore and Free up disk were folded into My vault — same rows, different
+// verbs — so their names stay recognisable in URLs but land on the one table.
+const VIEW_ALIASES = { restore: "archives", retention: "archives" };
+function viewFromHash() {
+  const name = location.hash.replace(/^#/, "");
+  return VIEWS.includes(name) ? name : null;
+}
+
+function showView(name) {
+  currentView = name;
+  for (const view of document.querySelectorAll(".view")) view.hidden = view.id !== `view-${name}`;
+  for (const button of document.querySelectorAll("nav button")) button.classList.toggle("active", button.dataset.view === name);
+  applyHeader();
+  const hash = name === "overview" ? "" : `#${name}`;
+  if (location.hash !== hash) history.replaceState(null, "", location.pathname + hash);
+}
+
+function routeToView(name) {
+  name = VIEW_ALIASES[name] ?? name;
+  showView(name);
+  if (name === "settings") void guard(loadSettings);
+  // The folded pages: first entry mounts and loads, later entries are instant —
+  // the view is already rendered, and its data refreshes quietly underneath.
+  if (name === "sessions" && typeof initSessionsView === "function") initSessionsView();
+  if (name === "rules" && typeof initRulesView === "function") initRulesView();
+}
+
+document.querySelectorAll("nav button").forEach((button) => {
+  button.onclick = () => routeToView(button.dataset.view);
+});
+
+// A hash arrived at from another page, a bookmark, or the back button switches
+// the view to match. Guarded so the fake-DOM render tests, which have no window,
+// still load this script.
+if (typeof window !== "undefined" && window.addEventListener) {
+  window.addEventListener("hashchange", () => {
+    const v = viewFromHash();
+    if (v && v !== currentView) routeToView(v);
+  });
+}
+
+$("token-form").onsubmit = async (event) => {
+  event.preventDefault();
+  token = $("token-input").value.trim();
+  sessionStorage.setItem(TOKEN_KEY, token);
+  $("token-input").value = "";
+  await start();
+};
+
+$("refresh").onclick = () => void guard(refresh);
+
+// ---- Upload progress ------------------------------------------------------
+// The run lives on the server, so this block only *watches*: start it, poll
+// it through /v1/status, offer the one honest cancel there is (the archive in
+// flight finishes and verifies, nothing after it starts), and re-attach after
+// a refresh. The meter is determinate — bytes done over bytes asked — because
+// motion that ends is progress and motion that loops is decoration.
+let uploadTimer = null;
+
+function drawUpload(run) {
+  const block = $("upload-progress");
+  if (!run) { block.hidden = true; $("upload").disabled = false; return; }
+  block.hidden = false;
+  const active = !run.finishedAt;
+  $("upload").disabled = active;
+  $("upload-cancel").hidden = !active || run.cancelled;
+  const pct = run.totalBytes > 0 ? Math.round((run.doneBytes / run.totalBytes) * 100) : (active ? 0 : 100);
+  $("upload-fill").style.width = `${pct}%`;
+  // The pace, measured from this run's own history, and what it implies.
+  // Honest edges: before anything lands there is no rate worth stating, and
+  // a rate from two small files says little about the 1.6 GB one after them —
+  // bytes-based, so it converges as the big ones move through.
+  let pace = "";
+  if (!run.finishedAt && run.doneBytes > 0) {
+    const elapsed = (Date.now() - Date.parse(run.startedAt)) / 1000;
+    const rate = run.doneBytes / Math.max(1, elapsed);
+    const left = (run.totalBytes - run.doneBytes) / rate;
+    const human = left < 90 ? `${Math.max(1, Math.round(left / 10) * 10)}s` : left < 5400 ? `${Math.round(left / 60)} min` : `${(left / 3600).toFixed(1)} h`;
+    pace = ` · ${bytes(rate)}/s · ~${human} left`;
+  } else if (!run.finishedAt && run.current) {
+    pace = " · measuring speed…";
+  }
+  const sent = `${run.done.length} of ${run.totalCount} sent · ${bytes(run.doneBytes)} of ${bytes(run.totalBytes)}${run.freedBytes ? ` · ${bytes(run.freedBytes)} freed locally` : ""}${pace}`;
+  if (active) {
+    const now = run.current ? ` · sending ${run.current.archiveId.slice(0, 8)} (${bytes(run.current.bytes)})` : "";
+    $("upload-line").textContent = (run.cancelled ? "Stopping — finishing the archive in flight. " : "") + sent + now;
+  } else {
+    const failed = run.failed.length ? ` · ${run.failed.length} failed — ${run.failed[0].error}` : "";
+    $("upload-line").textContent = run.cancelled ? `Stopped. ${sent}${failed}` : `Done. ${sent}${failed}`;
+    // A stopped run leaves a decision on the table: the uploads that already
+    // landed. Keeping them is one click (dismiss); taking them back goes
+    // through the same per-copy delete as everywhere else, so an archive
+    // whose only remaining form is the cloud copy is refused by name.
+    if (run.cancelled && run.done.length > 0 && !document.getElementById("upload-rollback")) {
+      const undo = document.createElement("button");
+      undo.type = "button";
+      undo.id = "upload-rollback";
+      undo.className = "action danger";
+      undo.textContent = `Delete the ${run.done.length} uploaded`;
+      undo.onclick = async () => {
+        undo.disabled = true;
+        try {
+          const result = await api("/v1/upload/rollback", { method: "POST" });
+          const refusedNote = result.refused.length ? ` · ${result.refused.length} kept — ${result.refused[0].reason}` : "";
+          $("upload-line").textContent = `Took back ${result.deleted.length} upload${result.deleted.length === 1 ? "" : "s"}${refusedNote}`;
+          undo.remove();
+          keep.remove();
+          await guard(refresh);
+        } catch (error) { undo.disabled = false; setStatus(error.message, "warn"); }
+      };
+      const keep = document.createElement("button");
+      keep.type = "button";
+      keep.id = "upload-keep";
+      keep.className = "action";
+      keep.textContent = "Keep them";
+      keep.onclick = () => { block.hidden = true; undo.remove(); keep.remove(); };
+      $("upload-line").after(keep, undo);
+    }
+  }
+}
+
+function watchUpload() {
+  if (uploadTimer) return;
+  uploadTimer = setInterval(async () => {
+    try {
+      const status = await api("/v1/status");
+      drawUpload(status.upload);
+      if (!status.upload || status.upload.finishedAt) {
+        clearInterval(uploadTimer);
+        uploadTimer = null;
+        await guard(refresh);
+      }
+    } catch { /* a missed poll is the next poll's problem */ }
+  }, 2500);
+}
+
+$("upload").onclick = async () => {
+  await guard(async () => {
+    const result = await api("/v1/upload", { method: "POST" });
+    drawUpload(result.upload);
+    if (result.upload && !result.upload.finishedAt) watchUpload();
+    else if (result.upload && result.upload.totalCount === 0) setStatus("Nothing waiting to upload", "ok");
+  });
+};
+
+$("upload-cancel").onclick = async () => {
+  await guard(async () => { await api("/v1/upload/cancel", { method: "POST" }); });
+};
+
+$("reclaim").onclick = async () => {
+  const preview = await api("/v1/retention/apply", { method: "POST", body: JSON.stringify({ confirm: false }) });
+  const message = `Move ${preview.wouldReclaim} source file${preview.wouldReclaim === 1 ? "" : "s"} to the trash?\n\nThey stay recoverable from the trash, and their archives are untouched.`;
+  if (!confirm(message)) return;
+  await guard(async () => {
+    setStatus("Reclaiming", "busy");
+    const applied = await api("/v1/retention/apply", { method: "POST", body: JSON.stringify({ confirm: true }) });
+    await refresh();
+    setStatus(`Moved ${applied.reclaimed.length} to the trash`, "ok");
+  });
+};
+
+// Guarded rather than assumed present: the render tests run app.js against a
+// fixed page fixture that predates this form, the same reason the data it
+// would submit is loaded lazily instead of through refresh() above.
+const settingsForm = $("settings-form");
+if (settingsForm) {
+  settingsForm.onsubmit = async (event) => {
+    event.preventDefault();
+    await guard(async () => {
+      const patch = collectSettingsPatch();
+      // Same rule the reclaim endpoint already enforces: turning this on is
+      // the one change here that lets the machine act on its own later, so
+      // it gets the one confirmation dialog on this whole page.
+      if (patch.reclaimEnabled && !state.settings?.local?.reclaimEnabled) {
+        const message = "Let this machine move verified, grace-period-expired sources to the trash on its own from now on?";
+        if (!confirm(message)) return;
+        patch.confirm = true;
+      }
+      $("settings-saved").textContent = "Saving…";
+      const saved = await api("/v1/settings", { method: "PUT", body: JSON.stringify(patch) });
+      state.settings = saved;
+      renderSettingsForm(saved.local, saved.resolvedTrashStrategy);
+      renderAccountMirror(saved.remote);
+      $("settings-saved").textContent = "Saved.";
+    });
+  };
+}
+
+async function guard(action) {
+  try { await action(); }
+  catch (error) { if (error.message !== "unauthorized") setStatus(error.message, "warn"); }
+}
+
+async function start() {
+  // No token in hand is not yet a reason to gate: a browser that has been here
+  // before holds the HttpOnly cookie, which the server accepts and this page
+  // cannot see. Try the API first; only a 401 shows the gate.
+  await guard(refresh);
+  // Land on the view named in the URL (e.g. arriving at index.html#settings from
+  // the Sessions page), not always Overview.
+  const v = viewFromHash();
+  if (v) routeToView(v);
+}
+
+void start();