sealkeep 0.9.0 → 0.11.0

package/web/sessions-view.js

@@ -34,11 +34,108 @@
     return `${Math.floor(days / 30)}mo ago`;
   };
 
+  const SESSION_CACHE_KEY = "sealkeep.sessionsView.v1";
+  const NO_PROJECT = "(none)";
   let sessions = [];
+  let lastSessionData = null;
+  let lastLoadedAt = null;
+  let currentVaultId = null;
+  let hasStorageTarget = false;
+  let hasWritableStorageTarget = false;
+  let sessionEligibilityLive = false;
   const chosen = new Set();
 
   const DAY = 86400000;
 
+  /**
+   * Keep the last successful disk walk in this browser, just as My vault keeps
+   * its last catalog. A /v1/sessions walk can cover thousands of transcripts;
+   * a transient failure must not turn that useful table into an empty one.
+   * The vault id travels with the snapshot so a different vault on this same
+   * local port never inherits another vault's paths.
+   */
+  function readSessionCache(vaultId) {
+    try {
+      const cached = JSON.parse(localStorage.getItem(SESSION_CACHE_KEY) ?? "null");
+      if (cached?.version !== 1 || cached.vaultId !== vaultId || !cached.loadedAt
+        || !cached.data || !Array.isArray(cached.data.sessions)) return null;
+      return cached;
+    } catch {
+      return null;
+    }
+  }
+
+  function writeSessionCache(vaultId, data, loadedAt) {
+    if (!vaultId) return;
+    try {
+      localStorage.setItem(SESSION_CACHE_KEY, JSON.stringify({ version: 1, vaultId, data, loadedAt }));
+    } catch {
+      // A disabled/full browser store costs only the warm reload. The live
+      // session view and its in-memory fallback continue to work.
+    }
+  }
+
+  const loadedAgo = (iso) => {
+    const delta = Date.now() - Date.parse(iso);
+    if (!Number.isFinite(delta)) return "earlier";
+    const minutes = Math.max(0, 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`;
+  };
+
+  function summaryText(data) {
+    const rows = Array.isArray(data?.sessions) ? data.sessions : [];
+    const ready = rows.filter((item) => !item.archived && !item.queued);
+    const queued = rows.filter((item) => !item.archived && item.queued);
+    const readyBytes = ready.reduce((total, item) => total + (Number(item.bytes) || 0), 0);
+    const queuedBytes = queued.reduce((total, item) => total + (Number(item.bytes) || 0), 0);
+    const readyText = ready.length
+      ? `${bytes(readyBytes)} in ${ready.length} ready to archive`
+      : "none waiting for you to archive";
+    const queuedText = queued.length
+      ? ` ${bytes(queuedBytes)} in ${queued.length} already queued to seal.`
+      : "";
+    return `${bytes(Number(data?.totalBytes) || 0)} across ${rows.length} sessions on disk. ${readyText}.${queuedText}`;
+  }
+
+  function setSessionSummary(data, state = "live", loadedAt = null) {
+    const summary = $("summary");
+    summary.className = state === "failed" ? "note error" : "note";
+    if (state === "updating") {
+      summary.textContent = `${summaryText(data)} Updating · showing data loaded ${loadedAgo(loadedAt)}.`;
+    } else if (state === "failed") {
+      summary.textContent = `${summaryText(data)} Could not update · showing data loaded ${loadedAgo(loadedAt)}.`;
+    } else {
+      summary.textContent = summaryText(data);
+    }
+  }
+
+  function acceptSessionData(data, loadedAt = new Date().toISOString(), eligibilityLive = true) {
+    if (!data || !Array.isArray(data.sessions)) throw new Error("Sessions response did not include a session list");
+    sessions = data.sessions;
+    sessionEligibilityLive = eligibilityLive;
+    lastSessionData = {
+      sessions: data.sessions,
+      totalBytes: Number(data.totalBytes) || 0,
+      unarchivedBytes: Number(data.unarchivedBytes) || 0
+    };
+    lastLoadedAt = loadedAt;
+    // Project chips are a projection of THIS answer, not permanent controls.
+    // A background refresh can discover a new project (or lose an old one),
+    // so reconcile them every time while preserving a still-valid selection.
+    buildProjectChips();
+    // A selection can go stale across a refresh: anything now archived or
+    // already queued must not be re-submitted.
+    for (const row of sessions) if (row.archived || row.queued) chosen.delete(row.path);
+    setSessionSummary(lastSessionData);
+    draw();
+    refreshChoice();
+  }
+
   /**
    * The rows that survive the current filters, in the chosen order.
    *
@@ -50,6 +147,27 @@
   /** The active chip in a group, or "" for none. */
   const chip = (group) => $("chips").querySelector(`.chip.on[data-group="${group}"]`)?.dataset.value ?? "";
 
+  /**
+   * A project label is presentation, not identity. Two unrelated repositories
+   * can both be called `api`; filtering by that word mixed their sessions and
+   * made the chip's apparent folder disagree with the rows it selected. Prefer
+   * the detector's stable key, with path/name fallbacks for older cached rows.
+   */
+  function projectIdentity(row) {
+    if (!row?.project) return NO_PROJECT;
+    if (typeof row.projectKey === "string" && row.projectKey) return `key:${row.projectKey}`;
+    if (typeof row.projectPath === "string" && row.projectPath) return `path:${row.projectPath}`;
+    return `name:${row.project}`;
+  }
+
+  const compactProjectPath = (path) => String(path ?? "").replace(/^\/(?:Users|home)\/[^/]+/, "~");
+
+  function projectChipFor(row) {
+    const identity = projectIdentity(row);
+    return [...$("chips").querySelectorAll('.chip[data-group="project"]')]
+      .find((button) => button.dataset.value === identity) ?? null;
+  }
+
   function visible() {
     const needle = $("f-search").value.trim().toLowerCase();
     const agent = chip("agent");
@@ -62,10 +180,14 @@
     const rows = sessions.filter((row) => {
       if (needle && !row.path.toLowerCase().includes(needle)) return false;
       if (agent && row.agent !== agent) return false;
-      // "(none)" collects the sessions whose transcripts never said where they
-      // ran; any other project chip is a name to match exactly.
+      // The stable identity, not the display name, is the filter. This keeps
+      // same-named repositories separate and also survives a folder rename
+      // when the detector still reports the same projectKey.
+      // Keep accepting the original name-valued chips as well as the stable
+      // identities produced below. The explicit sentinel cannot collide with
+      // a real project because real names are prefixed by projectIdentity().
       if (project === "(none)") { if (row.project) return false; }
-      else if (project && row.project !== project) return false;
+      else if (project && projectIdentity(row) !== project && row.project !== project) return false;
       if (state === "archived" && !row.archived) return false;
       // A queued row is on its way into the vault: no decision is pending on
       // it, so it is not "not archived yet" — it has its own chip. The three
@@ -94,6 +216,14 @@
     const total = sessions.filter((row) => chosen.has(row.path)).reduce((sum, row) => sum + row.bytes, 0);
     $("chosen").textContent = chosen.size === 0 ? "Nothing selected." : `${chosen.size} selected · ${bytes(total)}`;
     $("archive").disabled = chosen.size === 0;
+    const rows = selectable();
+    const selected = rows.filter((row) => chosen.has(row.path)).length;
+    // The table header and the written "Select all shown" control are two
+    // entrances to one selection. Keep the native checkbox honest after either
+    // entrance, including the useful mixed state after ticking individual rows.
+    $("all").checked = rows.length > 0 && selected === rows.length;
+    $("all").indeterminate = selected > 0 && selected < rows.length;
+    $("all").disabled = rows.length === 0;
   }
 
   let draw = function () {
@@ -104,9 +234,13 @@
     // What the filters are currently hiding, said out loud. A list that silently
     // shows 12 of 697 looks like a list of 12.
     const shownBytes = rows.reduce((sum, row) => sum + row.bytes, 0);
+    const state = chip("state");
+    const queuedCount = sessions.filter((item) => !item.archived && item.queued).length;
     $("filter-count").textContent = sessions.length === 0
       ? ""
-      : `Showing ${rows.length} of ${sessions.length} sessions · ${bytes(shownBytes)}`;
+      : state === "unarchived" && rows.length === 0
+        ? `0 ready to archive of ${sessions.length} sessions${queuedCount ? ` · ${queuedCount} already queued` : ""}`
+        : `Showing ${rows.length} of ${sessions.length} sessions · ${bytes(shownBytes)}`;
 
     if (rows.length === 0) {
       const row = body.insertRow();
@@ -115,7 +249,9 @@
       cell.className = "note";
       cell.textContent = sessions.length === 0
         ? "No sessions found for the agents this build can archive."
-        : "No session matches these filters. Widen them, or clear them to see everything.";
+        : state === "unarchived" && queuedCount > 0
+          ? `No session is waiting for you to archive. ${queuedCount} ${queuedCount === 1 ? "is" : "are"} already queued; choose “Queued to seal” above to see ${queuedCount === 1 ? "it" : "them"}.`
+          : "No session matches these filters. Widen them, or clear them to see everything.";
       return;
     }
     for (const item of rows) {
@@ -125,6 +261,7 @@
       const tick = row.insertCell();
       const box = document.createElement("input");
       box.type = "checkbox";
+      box.setAttribute("aria-label", `Select ${item.path.split("/").pop()} to archive`);
       box.checked = chosen.has(item.path);
       // An archive already covers this file at exactly this length, so sealing
       // it again would write a duplicate of something we hold. A queued row is
@@ -145,7 +282,7 @@
         const name = document.createElement("span");
         name.className = "name";
         name.textContent = item.project;
-        const matching = $("chips").querySelector(`.chip[data-group="project"][data-value="${CSS.escape(item.project)}"]`);
+        const matching = projectChipFor(item);
         if (matching) {
           name.classList.add("filterable");
           name.title = "Show only this project";
@@ -155,7 +292,7 @@
         if (item.projectPath) {
           const where = document.createElement("span");
           where.className = "where";
-          where.textContent = item.projectPath.replace(/^\/(?:Users|home)\/[^/]+/, "~");
+          where.textContent = compactProjectPath(item.projectPath);
           where.title = item.projectPath;
           proj.append(where);
         }
@@ -187,17 +324,22 @@
       if (item.stored) state.innerHTML = '<span class="ok">in your cloud</span>';
       else if (item.archived) state.innerHTML = '<span class="ok">archived</span>';
       else if (item.queued && item.held) {
-        // Queued but refused on its last attempt — today that means the disk
-        // guard stopped it. "sealing…" here was a lie the queue knew better
-        // than; the guard's own sentence rides on the tooltip.
+        // A durable queued intent is not necessarily active work. In
+        // particular, a later Settings exclusion pauses automatic work without
+        // deleting it. Say which kind of hold this is instead of showing an
+        // endless "sealing…" state.
         const span = document.createElement("span");
         span.className = "note";
-        span.textContent = "waiting for room";
+        span.textContent = item.heldKind === "policy"
+          ? "paused in Settings"
+          : item.heldKind === "space"
+            ? "waiting for room"
+            : "waiting to retry";
         span.title = item.held;
         state.append(span);
       }
       else if (item.queued) state.innerHTML = `<span class="queued">sealing…${item.sealingPct !== null && item.sealingPct !== undefined ? ` ${item.sealingPct}%` : ""}</span>`;
-      else state.innerHTML = '<span class="note">not archived</span>';
+      else state.innerHTML = '<span class="note">ready to archive</span>';
     }
   };
 
@@ -207,6 +349,13 @@
   // six hundred.
   // Only rows that can actually be sealed: not archived, not already queued.
   const selectable = () => visible().filter((item) => !item.archived && !item.queued);
+  const MAX_ROUTED_SEND = 5_000;
+  // This is deliberately not `chosen`: row checkboxes mean "seal this
+  // original", while this direct action routes the complete sealed heads left
+  // by the current filters. One control must never silently borrow the other's
+  // selection language.
+  const sendableShown = () => visible().filter((item) => item.archived && !item.stored
+    && typeof item.sendableArchiveId === "string" && item.sendableArchiveId);
 
   // The button says how many it would take, so it reads as a sentence: "Select
   // all 13 shown (21 GB)". When some visible rows are already archived or in
@@ -222,21 +371,46 @@
     const total = rows.reduce((sum, row) => sum + row.bytes, 0);
     $("select-shown").textContent = !rows.length ? "Nothing to select"
       : rows.length === shown ? `Select all ${rows.length} shown (${bytes(total)})`
-      : `Select the ${rows.length} not yet archived (${bytes(total)})`;
+      : `Select the ${rows.length} ready to archive (${bytes(total)})`;
     $("select-shown").disabled = rows.length === 0;
+    const send = $("send-archived");
+    const sendable = sendableShown();
+    send.hidden = !hasStorageTarget;
+    send.disabled = !sessionEligibilityLive || !hasWritableStorageTarget || sendable.length === 0 || sendable.length > MAX_ROUTED_SEND;
+    send.textContent = sendable.length === 0
+      ? "No complete sealed chains shown"
+      : sendable.length > MAX_ROUTED_SEND
+        ? `Narrow filters to send (maximum ${MAX_ROUTED_SEND})`
+        : `Send ${sendable.length} complete sealed chain${sendable.length === 1 ? "" : "s"} shown to storage`;
+    send.title = !sessionEligibilityLive
+      ? "Refresh Sessions successfully before sending; cached eligibility is display-only"
+      : !hasWritableStorageTarget
+        ? "Connect and resume a configured storage target before sending"
+        : sendable.length === 0
+          ? "No filtered archived-but-not-stored session has a complete local sealed chain"
+          : sendable.length > MAX_ROUTED_SEND
+            ? `Normal routing accepts at most ${MAX_ROUTED_SEND} archive heads at once; narrow the filters first`
+            : "Sends only the filtered archived-but-not-stored rows with proven complete local chains, using normal project pins, target order, caps, and fallback";
   };
 
   // Shared by the static chips and the project chips built after load — a
   // dynamic chip with different click behavior would be two filter languages
   // on one row.
   function wireChip(button) {
+    button.setAttribute("aria-pressed", button.classList.contains("on") ? "true" : "false");
     button.onclick = () => {
       const on = button.classList.contains("on");
       // One chip per group: choosing "older than 30 days" replaces "older than
       // 7 days" rather than stacking two ages. Clicking the active chip clears
       // the group.
-      for (const other of $("chips").querySelectorAll(`.chip[data-group="${button.dataset.group}"]`)) other.classList.remove("on");
-      if (!on) button.classList.add("on");
+      for (const other of $("chips").querySelectorAll(`.chip[data-group="${button.dataset.group}"]`)) {
+        other.classList.remove("on");
+        other.setAttribute("aria-pressed", "false");
+      }
+      if (!on) {
+        button.classList.add("on");
+        button.setAttribute("aria-pressed", "true");
+      }
       draw();
       refreshChoice();
     };
@@ -249,18 +423,40 @@
    * one for sessions whose transcripts never said where they ran. They sit
    * before the age group so the row reads as what, then when, then how big.
    */
-  function buildProjectChips() {
-    if ($("chips").querySelector('.chip[data-group="project"]')) return;
+  function clearProjectChips() {
+    for (const node of $("chips").querySelectorAll('.chip[data-group="project"]')) node.remove();
+    for (const node of $("chips").querySelectorAll(".project-chip-sep")) node.remove();
+  }
+
+  function buildProjectChips(resetSelection = false) {
+    const selected = resetSelection ? "" : chip("project");
+    clearProjectChips();
     const totals = new Map();
     let unplaced = 0;
     for (const row of sessions) {
-      if (row.project) totals.set(row.project, (totals.get(row.project) ?? 0) + row.bytes);
-      else unplaced += 1;
+      if (!row.project) {
+        unplaced += 1;
+        continue;
+      }
+      const identity = projectIdentity(row);
+      const project = totals.get(identity) ?? {
+        identity,
+        name: row.project,
+        bytes: 0,
+        paths: new Set(),
+        projectKey: row.projectKey ?? null
+      };
+      project.bytes += Number(row.bytes) || 0;
+      if (row.projectPath) project.paths.add(row.projectPath);
+      totals.set(identity, project);
     }
     // A machine where no transcript names a project gets no dead chip row.
     if (totals.size === 0) return;
     const anchor = $("chips").querySelector('.chip[data-group="age"]');
     const add = (node) => anchor.parentElement.insertBefore(node, anchor);
+    const lead = document.createElement("span");
+    lead.className = "chip-sep project-chip-sep";
+    add(lead);
     const make = (value, label, title) => {
       const button = document.createElement("button");
       button.type = "button";
@@ -269,14 +465,42 @@
       button.dataset.value = value;
       button.textContent = label;
       if (title) button.title = title;
+      if (value === selected) button.classList.add("on");
       wireChip(button);
       add(button);
     };
-    for (const [name] of [...totals.entries()].sort((a, b) => b[1] - a[1]).slice(0, 8)) make(name, name);
-    if (unplaced > 0) make("(none)", "No project", "Sessions whose transcripts do not say which project they belong to");
-    const sep = document.createElement("span");
-    sep.className = "chip-sep";
-    add(sep);
+    const projects = [...totals.values()].sort((a, b) => b.bytes - a.bytes || a.identity.localeCompare(b.identity));
+    const nameCounts = new Map();
+    for (const project of projects) nameCounts.set(project.name, (nameCounts.get(project.name) ?? 0) + 1);
+    let shownProjects = projects.slice(0, 8);
+    const selectedProject = projects.find((project) => project.identity === selected);
+    if (selectedProject && !shownProjects.some((project) => project.identity === selected)) {
+      // A refresh can change the size ranking while someone is looking at one
+      // project. Keep that exact active identity in the controls instead of
+      // silently clearing the filter merely because it fell from 8th to 9th.
+      shownProjects = [...shownProjects.slice(0, 7), selectedProject];
+    }
+    for (const project of shownProjects) {
+      const paths = [...project.paths].sort();
+      const duplicateName = nameCounts.get(project.name) > 1;
+      const location = paths[0] ? compactProjectPath(paths[0]) : "";
+      // Same-named projects need visible locations, not two identical buttons.
+      // A truncated stable key is only the last-resort distinction for legacy
+      // rows whose metadata has no working directory at all.
+      const suffix = duplicateName
+        ? location || (project.projectKey ? `project …${project.projectKey.slice(-8)}` : "location unavailable")
+        : "";
+      const label = suffix ? `${project.name} · ${suffix}` : project.name;
+      const title = paths.length
+        ? `Sessions for ${project.name} in ${paths.join(", ")}`
+        : `Sessions for this ${project.name} project`;
+      make(project.identity, label, title);
+    }
+    if (unplaced > 0) make(NO_PROJECT, "No project", "Sessions whose transcripts do not say which project they belong to");
+    // No trailing separator: the static one at the age anchor already sits
+    // there, and adding another doubled it while the group's LEADING edge ran
+    // straight on from the state chips.
+
   }
 
   /**
@@ -286,12 +510,37 @@
    * other than a card statement. Free vaults get nothing here rather than an
    * upsell: a bar reading "0 of 0" would be worse than silence.
    */
-  async function drawPlan() {
+  async function drawPlan(statusReady = api("/v1/status"), targetsReady = api("/v1/storage/targets")) {
+    // Storage configuration must not wait behind a slow account-plan read.
+    // Free/BYOB storage is local machine state and can answer first.
+    hasWritableStorageTarget = false;
+    draw();
+    refreshChoice();
+    void targetsReady.then((payload) => {
+      const targets = Array.isArray(payload?.targets) ? payload.targets : [];
+      hasStorageTarget = targets.length > 0;
+      hasWritableStorageTarget = targets.some((target) => target?.connected === true && target?.enabled !== false);
+      for (const storageChip of $("chips").querySelectorAll(".storage-chip")) {
+        storageChip.hidden = !hasStorageTarget;
+        if (!hasStorageTarget) {
+          storageChip.classList.remove("on");
+          storageChip.setAttribute("aria-pressed", "false");
+        }
+      }
+      if (!hasStorageTarget) {
+        const activeState = $("chips").querySelector('.chip.on[data-group="state"]');
+        if (!activeState) {
+          const ready = $("chips").querySelector('.chip[data-group="state"][data-value="unarchived"]');
+          ready?.classList.add("on");
+          ready?.setAttribute("aria-pressed", "true");
+        }
+      }
+      draw();
+      refreshChoice();
+    }).catch(() => undefined);
     try {
-      const status = await api("/v1/status");
+      const status = await statusReady;
       if (!status.plan || !status.quota) return;
-      // The cloud-state chips only mean something once the account has storage.
-      for (const proChip of $("chips").querySelectorAll(".pro-chip")) proChip.hidden = false;
       const used = Number(status.quota.usedBytes) || 0;
       const limit = Number(status.quota.quotaBytes) || 0;
       const room = limit - used;
@@ -317,24 +566,51 @@
     pollTimer = setInterval(async () => {
       try {
         const data = await api("/v1/sessions");
-        sessions = data.sessions;
-        draw();
-        refreshChoice();
+        const loadedAt = new Date().toISOString();
+        acceptSessionData(data, loadedAt);
+        writeSessionCache(currentVaultId, lastSessionData, loadedAt);
         reportProgress();
-      } catch { /* one missed poll is fine; the next tick retries */ }
+      } catch {
+        // The next tick retries, but until then say that the visible rows are
+        // the last successful answer instead of silently presenting them as live.
+        if (lastSessionData) setSessionSummary(lastSessionData, "failed", lastLoadedAt);
+      }
     }, 3000);
   }
   function reportProgress() {
     const queued = sessions.filter((row) => row.queued);
-    const waiting = queued.filter((row) => row.held).length;
-    const sealing = queued.length;
-    if (sealing > 0) {
-      $("result").textContent = waiting === sealing
+    const paused = queued.filter((row) => row.heldKind === "policy");
+    const heldActive = queued.filter((row) => row.held && row.heldKind !== "policy");
+    const waiting = heldActive.length;
+    const active = queued.length - paused.length;
+    if (queued.length > 0 && typeof state !== "undefined" && state?.daemon?.phraseRemembered === false) {
+      // No amount of three-second polling can make a locked vault progress.
+      // Stop the loop and put the exact local remedy beside the waiting rows;
+      // returning to Sessions after storing the phrase kicks the drain again.
+      stopPolling();
+      $("result").textContent = `${queued.length} session${queued.length === 1 ? " is" : "s are"} waiting. This machine cannot encrypt them until it remembers your recovery phrase. `;
+      const fix = document.createElement("a");
+      fix.href = "#recovery-phrase";
+      fix.textContent = "Store recovery phrase";
+      $("result").append(fix);
+      return;
+    }
+    if (active > 0) {
+      $("result").textContent = waiting === active && heldActive.every((row) => row.heldKind === "space")
         // The guard's own sentence ends without punctuation, so this used to run
         // straight into the instruction: "...rather than filling the disk Free
         // some space and they seal on their own."
-        ? `${waiting} waiting for disk room — ${String(queued.find((row) => row.held).held).replace(/[.\s]+$/, "")}. Free some space and they seal on their own.`
-        : `Sealing in the background — ${sealing - waiting} working${waiting ? `, ${waiting} waiting for room` : ""}. You can close or refresh this page; it carries on without it.`;
+        ? `${waiting} waiting for disk room — ${String(heldActive[0].held).replace(/[.\s]+$/, "")}. Free some space and they seal on their own.`
+        : waiting === active
+          ? `${waiting} waiting to retry — ${String(heldActive[0].held).replace(/[.\s]+$/, "")}. Sealkeep will retry on its own.`
+        : `Sealing in the background — ${active - waiting} working${waiting ? `, ${waiting} waiting to retry` : ""}${paused.length ? `, ${paused.length} paused in Settings` : ""}. You can close or refresh this page; it carries on without it.`;
+    } else if (paused.length > 0) {
+      // A policy pause changes only when the person changes Settings. Polling
+      // every three seconds cannot make progress and used to keep this browser
+      // and the local API busy forever. Re-entering Sessions or changing the
+      // setting performs a normal refresh.
+      stopPolling();
+      $("result").textContent = `${paused.length} queued session${paused.length === 1 ? " is" : "s are"} paused by this machine's Settings. ${paused.length === 1 ? "It remains" : "They remain"} untouched and will continue automatically when that agent or folder is enabled.`;
     } else {
       stopPolling();
       $("result").textContent = "Everything queued is sealed. The originals are untouched — reclaim them from the retention page when you are ready.";
@@ -344,34 +620,136 @@
       const active = $("chips").querySelector('.chip[data-group="state"].on');
       if (active?.dataset.value === "sealing") {
         active.classList.remove("on");
-        $("chips").querySelector('.chip[data-group="state"][data-value="archived"]')?.classList.add("on");
+        active.setAttribute("aria-pressed", "false");
+        const archived = $("chips").querySelector('.chip[data-group="state"][data-value="archived"]');
+        archived?.classList.add("on");
+        archived?.setAttribute("aria-pressed", "true");
         draw();
         refreshChoice();
       }
     }
   }
 
-  async function load() {
-    try {
-      const data = await api("/v1/sessions");
-      sessions = data.sessions;
-      buildProjectChips();
-      // A selection can go stale across a refresh: anything now archived or
-      // already queued must not be re-submitted.
-      for (const row of sessions) if (row.archived || row.queued) chosen.delete(row.path);
-      const done = sessions.filter((item) => item.archived).length;
-      $("summary").textContent = `${bytes(data.totalBytes)} across ${sessions.length} sessions. `
-        + `${bytes(data.unarchivedBytes)} in ${sessions.length - done} not yet archived.`;
+  async function load(statusReady = null) {
+    // Start the slow disk walk immediately, but attach its rejection handler
+    // before waiting for the fast identity used to validate the saved view.
+    const sessionsReady = api("/v1/sessions").then(
+      (value) => ({ value }),
+      (error) => ({ error })
+    );
+    const identityReady = (statusReady ?? api("/v1/status")).then(
+      (value) => ({ value }),
+      (error) => ({ error })
+    );
+
+    // On an ordinary revisit the already-rendered rows are the immediate
+    // fallback. Label them now; neither a slow identity response nor a slow
+    // disk walk should postpone the fact that a refresh is in progress.
+    const immediateFallback = lastSessionData
+      ? { data: lastSessionData, loadedAt: lastLoadedAt }
+      : null;
+    if (immediateFallback) {
+      sessionEligibilityLive = false;
       draw();
       refreshChoice();
-      // A background seal keeps going whether or not this view is open. If one
-      // is running, a fresh visit picks the progress line straight back up.
-      if (sessions.some((row) => row.queued)) { reportProgress(); startPolling(); }
-    } catch (error) {
+      setSessionSummary(immediateFallback.data, "updating", immediateFallback.loadedAt);
+    }
+
+    const first = await Promise.race([
+      sessionsReady.then((result) => ({ kind: "sessions", result })),
+      identityReady.then((identity) => ({ kind: "identity", identity }))
+    ]);
+    if (first.kind === "sessions" && !first.result.error) {
+      // Live rows are safe to paint without waiting for account identity: they
+      // came from this local agent just now. Identity is needed only before
+      // persisting them for a future reload.
+      const loadedAt = new Date().toISOString();
+      acceptSessionData(first.result.value, loadedAt);
+      const accepted = lastSessionData;
+      // Start first, then let reportProgress immediately cancel it when every
+      // queued row is policy-paused. Doing these in the opposite order created
+      // a fresh timer after the pause handler had correctly stopped nothing.
+      if (sessions.some((row) => row.queued)) { startPolling(); reportProgress(); }
+      void identityReady.then((identity) => {
+        const vaultId = identity.value?.vaultId ?? null;
+        if (!vaultId) return;
+        if (currentVaultId && currentVaultId !== vaultId) {
+          chosen.clear();
+          buildProjectChips(true);
+          draw();
+          refreshChoice();
+        }
+        currentVaultId = vaultId;
+        writeSessionCache(vaultId, accepted, loadedAt);
+      });
+      return;
+    }
+    if (first.kind === "sessions" && first.result.error && immediateFallback) {
+      // The identity request may itself be slow or unavailable. The user still
+      // gets an immediate, honest warning on the rows already in front of them.
+      setSessionSummary(immediateFallback.data, "failed", immediateFallback.loadedAt);
+    }
+
+    const identity = first.kind === "identity" ? first.identity : await identityReady;
+    const vaultId = identity.value?.vaultId ?? null;
+    if (vaultId && lastSessionData && currentVaultId !== vaultId) {
+      // This port now fronts a different vault. Do not retain a prior vault's
+      // (or identity-less) paths in memory while the new disk walk completes.
+      sessions = [];
+      sessionEligibilityLive = false;
+      lastSessionData = null;
+      lastLoadedAt = null;
+      chosen.clear();
+      stopPolling();
+      clearProjectChips();
+      draw();
+      refreshChoice();
+    }
+    if (vaultId) currentVaultId = vaultId;
+
+    let fallback = lastSessionData && (!vaultId || currentVaultId === vaultId)
+      ? { data: lastSessionData, loadedAt: lastLoadedAt }
+      : null;
+    if (!fallback && vaultId) {
+      const cached = readSessionCache(vaultId);
+      if (cached) {
+        acceptSessionData(cached.data, cached.loadedAt, false);
+        fallback = { data: lastSessionData, loadedAt: lastLoadedAt };
+      }
+    }
+    if (fallback) setSessionSummary(fallback.data, "updating", fallback.loadedAt);
+
+    const result = first.kind === "sessions" ? first.result : await sessionsReady;
+    if (result.error) {
+      if (fallback) {
+        // Keep the rows, filters and selection exactly where they were. The
+        // warning explicitly names their age so cached never masquerades as live.
+        setSessionSummary(fallback.data, "failed", fallback.loadedAt);
+        return;
+      }
+      $("summary").className = "note error";
       $("summary").textContent = token
-        ? `Could not read sessions: ${error.message}`
+        ? `Could not read sessions: ${result.error.message}`
         : "Connect the dashboard first so it can read this machine's sessions.";
       $("rows").textContent = "";
+      return;
+    }
+
+    try {
+      const loadedAt = new Date().toISOString();
+      acceptSessionData(result.value, loadedAt);
+      writeSessionCache(vaultId, lastSessionData, loadedAt);
+      // A background seal keeps going whether or not this view is open. If one
+      // is running, a fresh visit picks the progress line straight back up.
+      if (sessions.some((row) => row.queued)) { startPolling(); reportProgress(); }
+    } catch (error) {
+      if (fallback) {
+        setSessionSummary(fallback.data, "failed", fallback.loadedAt);
+      } else {
+        $("summary").className = "note error";
+        $("summary").textContent = `Could not read sessions: ${error.message}`;
+        $("rows").textContent = "";
+      }
     }
   }
 
@@ -380,8 +758,13 @@
     $("f-search").addEventListener("input", () => { draw(); refreshChoice(); });
     $("f-sort").addEventListener("change", () => { draw(); refreshChoice(); });
     $("f-clear").onclick = () => {
-      for (const other of $("chips").querySelectorAll(".chip")) other.classList.remove("on");
-      $("chips").querySelector('.chip[data-value="unarchived"]').classList.add("on");
+      for (const other of $("chips").querySelectorAll(".chip")) {
+        other.classList.remove("on");
+        other.setAttribute("aria-pressed", "false");
+      }
+      const ready = $("chips").querySelector('.chip[data-value="unarchived"]');
+      ready.classList.add("on");
+      ready.setAttribute("aria-pressed", "true");
       $("f-search").value = "";
       $("f-sort").value = "size";
       draw();
@@ -415,14 +798,20 @@
         const failures = outcome.results.filter((item) => !item.ok);
         chosen.clear();
         const data = await api("/v1/sessions");
-        sessions = data.sessions;
-        // The rows just queued belong to "Sealing now", not "Not archived yet" —
+        const loadedAt = new Date().toISOString();
+        acceptSessionData(data, loadedAt);
+        writeSessionCache(currentVaultId, lastSessionData, loadedAt);
+        // The rows just queued belong to "Queued to seal", not "Ready to archive" —
         // staying on the old chip would show an empty table the moment the
         // person acted. Follow the work: switch to the chip that watches it.
         if (outcome.queued > 0) {
           const sealingChip = $("chips").querySelector('.chip[data-group="state"][data-value="sealing"]');
-          for (const other of $("chips").querySelectorAll('.chip[data-group="state"]')) other.classList.remove("on");
+          for (const other of $("chips").querySelectorAll('.chip[data-group="state"]')) {
+            other.classList.remove("on");
+            other.setAttribute("aria-pressed", "false");
+          }
           sealingChip?.classList.add("on");
+          sealingChip?.setAttribute("aria-pressed", "true");
         }
         draw();
         refreshChoice();
@@ -434,6 +823,36 @@
         $("archive").disabled = chosen.size === 0;
       }
     };
+
+    $("send-archived").onclick = async () => {
+      // Recompute from the filters at click time. Stale cached rows without the
+      // explicit API eligibility field are excluded rather than guessed in.
+      const ids = [...new Set(sendableShown().map((item) => item.sendableArchiveId))];
+      if (!sessionEligibilityLive || !hasWritableStorageTarget || ids.length === 0 || ids.length > MAX_ROUTED_SEND) return;
+      const send = $("send-archived");
+      send.disabled = true;
+      send.textContent = "Starting normal storage routing…";
+      $("result").textContent = `Starting ${ids.length} complete sealed chain${ids.length === 1 ? "" : "s"}…`;
+      try {
+        const outcome = await api("/v1/upload", { method: "POST", body: JSON.stringify({ ids }) });
+        if (outcome.upload && typeof drawUpload === "function") {
+          drawUpload(outcome.upload);
+          if ((!outcome.upload.finishedAt || outcome.upload.cleanupRetryAt) && typeof watchUpload === "function") watchUpload(outcome.upload);
+        }
+        $("result").textContent = outcome.alreadyRunning
+          ? "Another storage transfer is already running. These rows were not added; follow Queue, then try again."
+          : `Queued ${ids.length} complete sealed chain${ids.length === 1 ? "" : "s"} for normal storage routing. Follow progress in Queue.`;
+        // The successful request consumed this live eligibility snapshot.
+        // Queue completion refreshes Sessions; until then, do not offer the
+        // same heads again from stale rows.
+        if (!outcome.alreadyRunning) sessionEligibilityLive = false;
+      } catch (error) {
+        $("result").textContent = `Nothing was sent to storage: ${error.message}`;
+      } finally {
+        draw();
+        refreshChoice();
+      }
+    };
   }
 
   let initialised = false;
@@ -441,11 +860,15 @@
   // every later entry shows the already-rendered table instantly and refreshes
   // the data underneath it — no placeholder, no flash, no lost scroll.
   window.initSessionsView = function () {
+    const statusReady = api("/v1/status");
     if (!initialised) {
       initialised = true;
       wire();
-      void drawPlan();
     }
-    void load();
+    // Account identity and plan share one read with cache validation. Storage
+    // targets are refreshed on every entry because connect/pause changes are
+    // machine state, not a property of the cached session walk.
+    void drawPlan(statusReady);
+    void load(statusReady);
   };
 })();