@youtyan/code-viewer 0.5.3 → 0.5.5

package/web/app.js

@@ -680,12 +680,16 @@
         const table = params.get("table") || undefined;
         const tabRaw = params.get("tab");
         const tab = tabRaw === "data" || tabRaw === "query" || tabRaw === "schema" || tabRaw === "er" || tabRaw === "search" || tabRaw === "snapshot" ? tabRaw : undefined;
+        const diffBefore = params.get("diffBefore") || undefined;
+        const diffAfter = params.get("diffAfter") || undefined;
         return {
           screen: "database",
           ...db ? { db } : {},
           ...schema ? { schema } : {},
           ...table ? { table } : {},
           ...tab ? { tab } : {},
+          ...diffBefore ? { diffBefore } : {},
+          ...diffAfter ? { diffAfter } : {},
           range
         };
       }
@@ -752,6 +756,10 @@
           params.set("table", route.table);
         if (route.tab)
           params.set("tab", route.tab);
+        if (route.diffBefore)
+          params.set("diffBefore", route.diffBefore);
+        if (route.diffAfter)
+          params.set("diffAfter", route.diffAfter);
         const qs = params.toString();
         return `/database${qs ? `?${qs}` : ""}`;
       }
@@ -9629,20 +9637,33 @@ ${frontmatter.yaml}
       calculatingDiff: "Computing diff…",
       diffError: "Failed to compute diff",
       noChanges: "No changes detected.",
-      before: "Before",
       loading: "Loading…",
       loadError: "Failed to load",
       saveNote: "Save",
       noteInputPlaceholder: "Enter a note",
-      inserted: "Added",
-      updated: "Updated",
-      deleted: "Deleted",
       tableCount: (n2) => `${n2} tables`,
       rowCount: (n2) => ` (${n2})`,
       listTitle: (n2) => `Snapshots (${n2})`,
       diffSummary: (changed, unchanged) => `${changed} tables changed` + (unchanged > 0 ? `, ${unchanged} unchanged` : ""),
       showingRows: (shown, total) => `Showing ${shown} of ${total}`,
-      label: (date, tables, note) => `${date} (${tables} tables)${note}`
+      label: (date, tables, note) => `${date} (${tables} tables)${note}`,
+      statusRunning: "running",
+      statusError: "error",
+      statusDone: "done",
+      progressLabel: (table2, index, total) => table2 ? `Snapshotting ${table2} (${index + 1} / ${total})` : `Finalizing… (${total} / ${total})`,
+      progressFinalizing: "Finalizing…",
+      aborted: "cancelled",
+      failed: "Failed",
+      errorPrefix: "Error",
+      compareBeforeBadge: "before",
+      compareAfterBadge: "after",
+      diffShowing: (before, after) => `Showing: ${before} → ${after}`,
+      filterPlaceholder: "Filter tables…",
+      tableCounter: (selected, total) => `${selected} / ${total} selected`,
+      coverageBeforeOnly: "not snapshotted in after",
+      coverageAfterOnly: "not snapshotted in before",
+      coverageNoteBeforeOnly: (rows) => `Only in the before snapshot (${rows} rows). Not selected for the after snapshot, so no comparison.`,
+      coverageNoteAfterOnly: (rows) => `Only in the after snapshot (${rows} rows). Not selected for the before snapshot, so no comparison.`
     },
     explorer: {
       common: {
@@ -9901,20 +9922,33 @@ ${frontmatter.yaml}
       calculatingDiff: "差分を計算中...",
       diffError: "差分の計算に失敗しました",
       noChanges: "変更は検出されませんでした。",
-      before: "更新前",
       loading: "読み込み中...",
       loadError: "読み込みに失敗しました",
       saveNote: "保存",
       noteInputPlaceholder: "メモを入力",
-      inserted: "追加",
-      updated: "更新",
-      deleted: "削除",
       tableCount: (n2) => `${n2}テーブル`,
       rowCount: (n2) => ` (${n2}件)`,
       listTitle: (n2) => `スナップショット (${n2}件)`,
       diffSummary: (changed, unchanged) => `${changed}テーブルに変更あり` + (unchanged > 0 ? `、${unchanged}テーブルは変更なし` : ""),
       showingRows: (shown, total) => `全${total}件中 ${shown}件を表示中`,
-      label: (date, tables, note) => `${date} (${tables}テーブル)${note}`
+      label: (date, tables, note) => `${date} (${tables}テーブル)${note}`,
+      statusRunning: "取得中",
+      statusError: "エラー",
+      statusDone: "完了",
+      progressLabel: (table2, index, total) => table2 ? `スナップショット取得中: ${table2} (${index + 1} / ${total})` : `仕上げ中… (${total} / ${total})`,
+      progressFinalizing: "仕上げ中…",
+      aborted: "キャンセル",
+      failed: "失敗",
+      errorPrefix: "エラー",
+      compareBeforeBadge: "比較元",
+      compareAfterBadge: "比較先",
+      diffShowing: (before, after) => `比較中: ${before} → ${after}`,
+      filterPlaceholder: "テーブル名で絞り込み…",
+      tableCounter: (selected, total) => `${selected} / ${total} 件選択中`,
+      coverageBeforeOnly: "比較先で未取得",
+      coverageAfterOnly: "比較元で未取得",
+      coverageNoteBeforeOnly: (rows) => `比較元のみに存在 (${rows}行)。比較先では対象テーブルに選ばれていないため比較できません。`,
+      coverageNoteAfterOnly: (rows) => `比較先のみに存在 (${rows}行)。比較元では対象テーブルに選ばれていないため比較できません。`
     },
     explorer: {
       common: {
@@ -14495,24 +14529,22 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     const sb = [...b2].sort();
     return sa.every((v, i2) => v === sb[i2]);
   }
-  function postJson(path, body) {
-    return fetch(path, {
+  function createSnapshotView(deps) {
+    const text2 = () => deps.getText?.() ?? dbText("en");
+    const trackLoad = (p2) => deps.trackLoad ? deps.trackLoad(p2) : p2;
+    const postJson = (path, body) => trackLoad(fetch(path, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         "X-Code-Viewer-Action": "1"
       },
       body: JSON.stringify(body)
-    });
-  }
-  function createSnapshotView(deps) {
-    const text2 = () => deps.getText?.() ?? dbText("en");
+    }));
+    const getJson = (path) => trackLoad(fetch(path));
     const changeTypeLabel = (type) => {
       if (type === "inserted")
-        return text2().snapshot.inserted;
-      if (type === "updated")
-        return text2().snapshot.updated;
-      return text2().snapshot.deleted;
+        return "+";
+      return "−";
     };
     const snapshotLabel = (s2) => {
       const date = new Date(s2.createdAt).toLocaleString();
@@ -14540,18 +14572,27 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     refreshBtn.type = "button";
     refreshBtn.className = "db-snapshot-refresh-btn";
     refreshBtn.textContent = text2().snapshot.refresh;
-    const snapshotCancelBtn = document.createElement("button");
-    snapshotCancelBtn.type = "button";
-    snapshotCancelBtn.className = "db-snapshot-job-cancel-btn";
-    snapshotCancelBtn.textContent = text2().snapshot.cancel;
-    snapshotCancelBtn.hidden = true;
-    toolbar.append(createBtn, refreshBtn, snapshotCancelBtn);
+    toolbar.append(createBtn, refreshBtn);
+    const progressArea = document.createElement("div");
+    progressArea.className = "db-snapshot-progress-area";
+    progressArea.hidden = true;
     const tableSelector = document.createElement("div");
     tableSelector.className = "db-snapshot-table-selector";
     tableSelector.hidden = true;
     const tableSelectorHeader = document.createElement("div");
     tableSelectorHeader.className = "db-snapshot-table-selector-header";
-    tableSelectorHeader.textContent = text2().snapshot.selectTablesHeader;
+    const tableSelectorHeaderLabel = document.createElement("span");
+    tableSelectorHeaderLabel.textContent = text2().snapshot.selectTablesHeader;
+    const tableSelectorCounter = document.createElement("span");
+    tableSelectorCounter.className = "db-snapshot-table-counter";
+    tableSelectorHeader.append(tableSelectorHeaderLabel, tableSelectorCounter);
+    const filterRow = document.createElement("div");
+    filterRow.className = "db-snapshot-table-filter";
+    const filterInput = document.createElement("input");
+    filterInput.type = "search";
+    filterInput.className = "db-snapshot-table-filter-input";
+    filterInput.placeholder = text2().snapshot.filterPlaceholder;
+    filterRow.appendChild(filterInput);
     const tableCheckboxes = document.createElement("div");
     tableCheckboxes.className = "db-snapshot-table-checkboxes";
     const selectActions = document.createElement("div");
@@ -14562,16 +14603,22 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     const deselectAllBtn = document.createElement("button");
     deselectAllBtn.type = "button";
     deselectAllBtn.textContent = text2().snapshot.deselectAll;
-    const noteInput = document.createElement("input");
-    noteInput.type = "text";
-    noteInput.className = "db-snapshot-note-input";
-    noteInput.placeholder = text2().snapshot.notePlaceholder;
+    selectActions.append(selectAllBtn, deselectAllBtn);
+    const noteRow = document.createElement("div");
+    noteRow.className = "db-snapshot-note-row";
     const noteField = document.createElement("label");
     noteField.className = "db-snapshot-note-field";
     const noteLabel = document.createElement("span");
     noteLabel.className = "db-snapshot-note-label";
     noteLabel.textContent = text2().snapshot.noteLabel;
+    const noteInput = document.createElement("input");
+    noteInput.type = "text";
+    noteInput.className = "db-snapshot-note-input";
+    noteInput.placeholder = text2().snapshot.notePlaceholder;
     noteField.append(noteLabel, noteInput);
+    noteRow.appendChild(noteField);
+    const actionRow = document.createElement("div");
+    actionRow.className = "db-snapshot-action-row";
     const confirmBtn = document.createElement("button");
     confirmBtn.type = "button";
     confirmBtn.className = "db-snapshot-confirm-btn";
@@ -14580,41 +14627,178 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     cancelBtn.type = "button";
     cancelBtn.className = "db-snapshot-cancel-btn";
     cancelBtn.textContent = text2().snapshot.cancel;
-    selectActions.append(selectAllBtn, deselectAllBtn, noteField, confirmBtn, cancelBtn);
-    tableSelector.append(tableSelectorHeader, tableCheckboxes, selectActions);
+    actionRow.append(confirmBtn, cancelBtn);
+    tableSelector.append(tableSelectorHeader, filterRow, tableCheckboxes, selectActions, noteRow, actionRow);
     const mainArea = document.createElement("div");
     mainArea.className = "db-snapshot-main-area";
-    el.append(guide, toolbar, tableSelector, mainArea);
+    const splitContainer = document.createElement("div");
+    splitContainer.className = "db-snapshot-split";
+    const leftPane = document.createElement("div");
+    leftPane.className = "db-snapshot-left-pane";
+    const rightPane = document.createElement("div");
+    rightPane.className = "db-snapshot-right-pane";
+    splitContainer.append(leftPane, rightPane);
+    mainArea.appendChild(splitContainer);
+    el.append(guide, toolbar, progressArea, tableSelector, mainArea);
     let snapshots = [];
-    let activeSnapshotId = null;
     let currentDiff = null;
     let disposed = false;
     const autoRefreshTimers = new Set;
-    function setActiveSnapshotId(id) {
-      activeSnapshotId = id;
-      snapshotCancelBtn.hidden = !id;
-      snapshotCancelBtn.disabled = false;
-      snapshotCancelBtn.textContent = text2().snapshot.cancel;
+    const activeJobs = new Map;
+    const cancellingJobs = new Set;
+    const jobClearTimers = new Map;
+    function upsertJob(id, patch) {
+      const prev = activeJobs.get(id) ?? { id, total: 0, done: false };
+      activeJobs.set(id, { ...prev, ...patch, id });
+      renderProgress();
+    }
+    function scheduleJobRemove(id) {
+      const existing = jobClearTimers.get(id);
+      if (existing)
+        clearTimeout(existing);
+      const t2 = setTimeout(() => {
+        jobClearTimers.delete(id);
+        cancellingJobs.delete(id);
+        activeJobs.delete(id);
+        renderProgress();
+      }, 5000);
+      jobClearTimers.set(id, t2);
+    }
+    async function cancelJob(id) {
+      if (cancellingJobs.has(id))
+        return;
+      cancellingJobs.add(id);
+      renderProgress();
+      try {
+        await postJson("/_db/snapshot/cancel", { id });
+      } catch {}
+    }
+    function renderProgress() {
+      progressArea.innerHTML = "";
+      if (activeJobs.size === 0) {
+        progressArea.hidden = true;
+        return;
+      }
+      progressArea.hidden = false;
+      const t2 = text2().snapshot;
+      for (const job of activeJobs.values()) {
+        const row = document.createElement("div");
+        row.className = "db-snapshot-progress-row";
+        row.dataset.snapshotId = job.id;
+        const label = document.createElement("span");
+        label.className = "db-snapshot-progress-label";
+        if (job.errorMessage) {
+          label.textContent = `${t2.errorPrefix}: ${job.errorMessage}`;
+          label.title = job.errorMessage;
+          row.classList.add("error");
+        } else if (job.aborted) {
+          label.textContent = t2.aborted;
+          row.classList.add("aborted");
+        } else if (job.done) {
+          label.textContent = t2.statusDone;
+          row.classList.add("done");
+        } else if (job.total > 0 && job.table) {
+          label.textContent = t2.progressLabel(job.table, job.index ?? 0, job.total);
+          row.classList.add("running");
+        } else {
+          label.textContent = t2.creating;
+          row.classList.add("running");
+        }
+        row.appendChild(label);
+        if (!job.done) {
+          const cancelRowBtn = document.createElement("button");
+          cancelRowBtn.type = "button";
+          cancelRowBtn.className = "db-snapshot-job-cancel-btn";
+          if (cancellingJobs.has(job.id)) {
+            cancelRowBtn.disabled = true;
+            cancelRowBtn.textContent = t2.cancelling;
+          } else {
+            cancelRowBtn.textContent = t2.cancel;
+            cancelRowBtn.addEventListener("click", () => {
+              cancelJob(job.id);
+            });
+          }
+          row.appendChild(cancelRowBtn);
+        }
+        progressArea.appendChild(row);
+      }
+    }
+    let tableSelectorTables = [];
+    const selectedTableSet = new Set;
+    let tableFilterValue = "";
+    function setTableSelectorVisible(visible) {
+      tableSelector.hidden = !visible;
+      createBtn.disabled = visible;
+      createBtn.classList.toggle("is-active-dialog", visible);
     }
     function showTableSelector() {
-      const tables = deps.getTables();
-      const lastTables = getLastTables();
+      tableSelectorTables = deps.getTables().filter((t2) => t2.type === "table");
+      const currentTableNames = new Set(tableSelectorTables.map((t2) => t2.name));
+      const stored = deps.getStoredSelectedTables?.();
+      const rawTables = stored?.length ? stored : getLastTables();
+      const lastTables = rawTables.filter((name) => currentTableNames.has(name));
+      selectedTableSet.clear();
+      if (lastTables.length === 0) {
+        for (const t2 of tableSelectorTables)
+          selectedTableSet.add(t2.name);
+      } else {
+        for (const name of lastTables)
+          selectedTableSet.add(name);
+      }
+      tableFilterValue = "";
+      filterInput.value = "";
+      renderTableList();
+      setTableSelectorVisible(true);
+      noteInput.value = "";
+      filterInput.focus();
+    }
+    function persistSelectedTables() {
+      deps.setStoredSelectedTables?.(Array.from(selectedTableSet).sort());
+    }
+    function renderTableList() {
+      const needle = tableFilterValue.trim().toLowerCase();
       tableCheckboxes.innerHTML = "";
-      for (const t2 of tables) {
-        if (t2.type !== "table")
+      const t2 = text2().snapshot;
+      let visible = 0;
+      for (const tbl of tableSelectorTables) {
+        if (needle && !tbl.name.toLowerCase().includes(needle))
           continue;
-        const label = document.createElement("label");
-        label.className = "db-snapshot-table-label";
+        visible++;
+        const row = document.createElement("label");
+        row.className = "db-snapshot-table-row";
         const cb = document.createElement("input");
         cb.type = "checkbox";
-        cb.checked = lastTables.length === 0 || lastTables.includes(t2.name);
-        cb.value = t2.name;
-        const rowInfo = t2.rowCount != null ? text2().snapshot.rowCount(t2.rowCount) : "";
-        label.append(cb, ` ${t2.name}${rowInfo}`);
-        tableCheckboxes.appendChild(label);
+        cb.value = tbl.name;
+        cb.checked = selectedTableSet.has(tbl.name);
+        cb.addEventListener("change", () => {
+          if (cb.checked)
+            selectedTableSet.add(tbl.name);
+          else
+            selectedTableSet.delete(tbl.name);
+          updateSelectorState();
+          persistSelectedTables();
+        });
+        const name = document.createElement("span");
+        name.className = "db-snapshot-table-row-name";
+        name.textContent = tbl.name;
+        const count = document.createElement("span");
+        count.className = "db-snapshot-table-row-count";
+        count.textContent = tbl.rowCount != null ? t2.rowCount(tbl.rowCount).trim() : "";
+        row.append(cb, name, count);
+        tableCheckboxes.appendChild(row);
       }
-      tableSelector.hidden = false;
-      noteInput.value = "";
+      if (visible === 0 && needle) {
+        const empty = document.createElement("div");
+        empty.className = "db-snapshot-table-row-empty";
+        empty.textContent = t2.empty;
+        tableCheckboxes.appendChild(empty);
+      }
+      updateSelectorState();
+    }
+    function updateSelectorState() {
+      const t2 = text2().snapshot;
+      tableSelectorCounter.textContent = t2.tableCounter(selectedTableSet.size, tableSelectorTables.length);
+      confirmBtn.disabled = selectedTableSet.size === 0;
     }
     function getLastTables() {
       const dbId = deps.getDbId();
@@ -14624,36 +14808,47 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       return done.length > 0 ? done[0].tables : [];
     }
     function getSelectedTables() {
-      return Array.from(tableCheckboxes.querySelectorAll('input[type="checkbox"]:checked')).map((cb) => cb.value);
+      return Array.from(selectedTableSet);
     }
+    filterInput.addEventListener("input", () => {
+      tableFilterValue = filterInput.value;
+      renderTableList();
+    });
+    filterInput.addEventListener("keydown", (e2) => {
+      if (e2.key === "Escape" && filterInput.value) {
+        e2.preventDefault();
+        filterInput.value = "";
+        tableFilterValue = "";
+        renderTableList();
+      }
+    });
     selectAllBtn.addEventListener("click", () => {
-      tableCheckboxes.querySelectorAll('input[type="checkbox"]').forEach((cb) => {
-        cb.checked = true;
-      });
+      const needle = tableFilterValue.trim().toLowerCase();
+      for (const tbl of tableSelectorTables) {
+        if (needle && !tbl.name.toLowerCase().includes(needle))
+          continue;
+        selectedTableSet.add(tbl.name);
+      }
+      renderTableList();
+      persistSelectedTables();
     });
     deselectAllBtn.addEventListener("click", () => {
-      tableCheckboxes.querySelectorAll('input[type="checkbox"]').forEach((cb) => {
-        cb.checked = false;
-      });
+      const needle = tableFilterValue.trim().toLowerCase();
+      if (!needle) {
+        selectedTableSet.clear();
+      } else {
+        for (const tbl of tableSelectorTables) {
+          if (tbl.name.toLowerCase().includes(needle)) {
+            selectedTableSet.delete(tbl.name);
+          }
+        }
+      }
+      renderTableList();
+      persistSelectedTables();
     });
     createBtn.addEventListener("click", showTableSelector);
     cancelBtn.addEventListener("click", () => {
-      tableSelector.hidden = true;
-    });
-    snapshotCancelBtn.addEventListener("click", async () => {
-      if (!activeSnapshotId)
-        return;
-      const snapshotId = activeSnapshotId;
-      snapshotCancelBtn.disabled = true;
-      snapshotCancelBtn.textContent = text2().snapshot.cancelling;
-      try {
-        await postJson("/_db/snapshot/cancel", { id: snapshotId });
-      } catch {} finally {
-        if (!disposed && activeSnapshotId === snapshotId) {
-          snapshotCancelBtn.disabled = false;
-          snapshotCancelBtn.textContent = text2().snapshot.cancel;
-        }
-      }
+      setTableSelectorVisible(false);
     });
     confirmBtn.addEventListener("click", async () => {
       const dbId = deps.getDbId();
@@ -14672,7 +14867,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           tables,
           note: noteInput.value.trim()
         });
-        tableSelector.hidden = true;
+        setTableSelectorVisible(false);
         scheduleAutoRefresh(dbId, schema);
       } catch {} finally {
         if (!disposed) {
@@ -14692,7 +14887,20 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       autoRefreshTimers.add(timer);
     }
     refreshBtn.addEventListener("click", refresh);
+    let inflightRefresh = null;
     async function refresh() {
+      if (inflightRefresh) {
+        await inflightRefresh;
+        return;
+      }
+      inflightRefresh = doRefresh();
+      try {
+        await inflightRefresh;
+      } finally {
+        inflightRefresh = null;
+      }
+    }
+    async function doRefresh() {
       const dbId = deps.getDbId();
       const schema = deps.getSchema();
       if (!dbId)
@@ -14701,7 +14909,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         const params = new URLSearchParams({ db: dbId });
         if (schema)
           params.set("schema", schema);
-        const snapRes = await fetch(`/_db/snapshot/list?${params}`);
+        const snapRes = await getJson(`/_db/snapshot/list?${params}`);
         if (snapRes.ok) {
           const data = await snapRes.json();
           if (disposed || deps.getDbId() !== dbId || deps.getSchema() !== schema) {
@@ -14712,6 +14920,18 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         if (disposed || deps.getDbId() !== dbId || deps.getSchema() !== schema)
           return;
         renderMain();
+        if (currentDiff) {
+          const stillValid = snapshots.some((s2) => s2.id === currentDiff?.beforeId) && snapshots.some((s2) => s2.id === currentDiff?.afterId);
+          if (!stillValid) {
+            const existing = rightPane.querySelector(".db-snapshot-diff-inline");
+            if (existing) {
+              const prev = existing;
+              prev.__tocObserver?.disconnect();
+              existing.remove();
+            }
+            currentDiff = null;
+          }
+        }
       } catch {}
     }
     async function refreshAndAutoDiff() {
@@ -14726,21 +14946,24 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       showDiffInline(prev.id, newest.id);
     }
     function renderMain() {
-      mainArea.innerHTML = "";
+      leftPane.innerHTML = "";
       const done = snapshots.filter((s2) => s2.status === "done");
       if (snapshots.length === 0) {
         const empty = document.createElement("div");
         empty.className = "db-snapshot-empty";
         empty.textContent = text2().snapshot.empty;
-        mainArea.appendChild(empty);
+        leftPane.appendChild(empty);
         return;
       }
+      const stickyHeader = document.createElement("div");
+      stickyHeader.className = "db-snapshot-sticky-header";
       const snapshotSection = document.createElement("div");
       snapshotSection.className = "db-snapshot-list-section";
       const snapTitle = document.createElement("h3");
       snapTitle.className = "db-snapshot-section-title";
-      snapTitle.textContent = text2().snapshot.listTitle(done.length);
+      snapTitle.textContent = text2().snapshot.listTitle(snapshots.length);
       snapshotSection.appendChild(snapTitle);
+      const t2 = text2().snapshot;
       for (const snap of snapshots) {
         const item = document.createElement("div");
         item.className = "db-snapshot-item";
@@ -14750,17 +14973,27 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         const date = document.createElement("span");
         date.className = "db-snapshot-date";
         date.textContent = new Date(snap.createdAt).toLocaleString();
+        const status = document.createElement("span");
+        status.className = `db-snapshot-status ${snap.status}`;
+        status.textContent = snap.status === "running" ? t2.statusRunning : snap.status === "error" ? t2.statusError : t2.statusDone;
         const tables = document.createElement("span");
         tables.className = "db-snapshot-tables-count";
         tables.title = snap.tables.join(", ");
-        tables.textContent = text2().snapshot.tableCount(snap.tables.length);
-        info.append(date, tables);
+        tables.textContent = t2.tableCount(snap.tables.length);
+        info.append(date, status, tables);
         if (snap.note) {
           const note = document.createElement("span");
           note.className = "db-snapshot-note";
           note.textContent = snap.note;
           info.appendChild(note);
         }
+        if (snap.status === "error" && snap.errorMessage) {
+          const errMsg = document.createElement("span");
+          errMsg.className = "db-snapshot-error-message";
+          errMsg.textContent = `${t2.errorPrefix}: ${snap.errorMessage}`;
+          errMsg.title = snap.errorMessage;
+          info.appendChild(errMsg);
+        }
         const actions = document.createElement("div");
         actions.className = "db-snapshot-actions";
         const noteBtn = document.createElement("button");
@@ -14797,7 +15030,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         beforeSelect.className = "db-snapshot-diff-select";
         const afterSelect = document.createElement("select");
         afterSelect.className = "db-snapshot-diff-select";
-        const sorted = [...done].sort((a2, b2) => new Date(a2.createdAt).getTime() - new Date(b2.createdAt).getTime());
+        const sorted = [...done].sort((a2, b2) => new Date(b2.createdAt).getTime() - new Date(a2.createdAt).getTime());
         for (const s2 of sorted) {
           const optB = document.createElement("option");
           optB.value = s2.id;
@@ -14809,8 +15042,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           afterSelect.appendChild(optA);
         }
         if (sorted.length >= 2) {
-          beforeSelect.selectedIndex = sorted.length - 2;
-          afterSelect.selectedIndex = sorted.length - 1;
+          beforeSelect.selectedIndex = 1;
+          afterSelect.selectedIndex = 0;
         }
         const diffBtn = document.createElement("button");
         diffBtn.type = "button";
@@ -14820,32 +15053,89 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           diffBtn.disabled = true;
           diffBtn.textContent = text2().snapshot.comparing;
           try {
-            showDiffInline(beforeSelect.value, afterSelect.value);
+            await showDiffInline(beforeSelect.value, afterSelect.value);
+            scrollDiffIntoView();
           } finally {
             diffBtn.disabled = false;
             diffBtn.textContent = text2().snapshot.diffManual;
           }
         });
-        diffCreate.append(beforeSelect, document.createTextNode(" → "), afterSelect, diffBtn);
-        snapshotSection.appendChild(diffCreate);
-      }
-      mainArea.appendChild(snapshotSection);
+        const applyDiffSelectionHighlight = () => {
+          const items = snapshotSection.querySelectorAll(".db-snapshot-item");
+          const before = beforeSelect.value;
+          const after = afterSelect.value;
+          for (const it of items) {
+            it.classList.remove("is-before", "is-after");
+            const old = it.querySelector(".db-snapshot-compare-badge");
+            if (old)
+              old.remove();
+          }
+          for (const it of items) {
+            const id = it.dataset.snapshotId ?? "";
+            let label = null;
+            if (id === before) {
+              it.classList.add("is-before");
+              label = t2.compareBeforeBadge;
+            } else if (id === after) {
+              it.classList.add("is-after");
+              label = t2.compareAfterBadge;
+            }
+            if (label) {
+              const badge = document.createElement("span");
+              badge.className = "db-snapshot-compare-badge";
+              badge.textContent = label;
+              const info = it.querySelector(".db-snapshot-info");
+              if (info)
+                info.appendChild(badge);
+            }
+          }
+        };
+        beforeSelect.addEventListener("change", applyDiffSelectionHighlight);
+        afterSelect.addEventListener("change", applyDiffSelectionHighlight);
+        applyDiffSelectionHighlight();
+        const beforeRow = document.createElement("label");
+        beforeRow.className = "db-snapshot-diff-row is-before";
+        const beforeLabel = document.createElement("span");
+        beforeLabel.className = "db-snapshot-diff-row-label";
+        beforeLabel.textContent = t2.compareBeforeBadge;
+        beforeRow.append(beforeLabel, beforeSelect);
+        const afterRow = document.createElement("label");
+        afterRow.className = "db-snapshot-diff-row is-after";
+        const afterLabel = document.createElement("span");
+        afterLabel.className = "db-snapshot-diff-row-label";
+        afterLabel.textContent = t2.compareAfterBadge;
+        afterRow.append(afterLabel, afterSelect);
+        diffCreate.append(beforeRow, afterRow, diffBtn);
+        stickyHeader.appendChild(diffCreate);
+      }
+      leftPane.append(stickyHeader, snapshotSection);
+    }
+    function scrollDiffIntoView() {
+      const section = rightPane.querySelector(".db-snapshot-diff-inline");
+      if (!section)
+        return;
+      section.scrollIntoView({ behavior: "smooth", block: "start" });
     }
     async function showDiffInline(beforeId, afterId) {
       currentDiff = { beforeId, afterId };
-      const existing = mainArea.querySelector(".db-snapshot-diff-inline");
-      if (existing)
+      deps.setRouteDiff?.({ before: beforeId, after: afterId });
+      const existing = rightPane.querySelector(".db-snapshot-diff-inline");
+      if (existing) {
+        const prev = existing;
+        prev.__tocObserver?.disconnect();
         existing.remove();
+      }
       const loading = document.createElement("div");
       loading.className = "db-snapshot-diff-inline";
       const loadingText = document.createElement("div");
       loadingText.className = "db-snapshot-loading";
       loadingText.textContent = text2().snapshot.calculatingDiff;
       loading.appendChild(loadingText);
-      mainArea.appendChild(loading);
+      rightPane.appendChild(loading);
       try {
-        const res = await fetch(`/_db/snapshot/diff/tables?before=${encodeURIComponent(beforeId)}&after=${encodeURIComponent(afterId)}`);
+        const res = await getJson(`/_db/snapshot/diff/tables?before=${encodeURIComponent(beforeId)}&after=${encodeURIComponent(afterId)}`);
         if (!res.ok) {
+          currentDiff = null;
           loading.innerHTML = "";
           const error2 = document.createElement("div");
           error2.className = "db-snapshot-error";
@@ -14857,6 +15147,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         loading.remove();
         renderDiffInline(beforeId, afterId, data.tables);
       } catch {
+        currentDiff = null;
         loading.innerHTML = "";
         const error2 = document.createElement("div");
         error2.className = "db-snapshot-error";
@@ -14865,26 +15156,76 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       }
     }
     function renderDiffInline(beforeId, afterId, tables) {
-      const existing = mainArea.querySelector(".db-snapshot-diff-inline");
-      if (existing)
+      const existing = rightPane.querySelector(".db-snapshot-diff-inline");
+      if (existing) {
+        const prev = existing;
+        prev.__tocObserver?.disconnect();
         existing.remove();
+      }
       const section = document.createElement("div");
       section.className = "db-snapshot-diff-inline";
-      const changedTables = tables.filter((t2) => t2.insertedCount + t2.updatedCount + t2.deletedCount > 0);
+      const beforeMeta = snapshots.find((s2) => s2.id === beforeId);
+      const afterMeta = snapshots.find((s2) => s2.id === afterId);
+      if (beforeMeta && afterMeta) {
+        const header = document.createElement("div");
+        header.className = "db-snapshot-diff-header";
+        const beforeLabel = new Date(beforeMeta.createdAt).toLocaleString();
+        const afterLabel = new Date(afterMeta.createdAt).toLocaleString();
+        header.textContent = text2().snapshot.diffShowing(beforeLabel, afterLabel);
+        section.appendChild(header);
+      }
+      const changedTables = tables.filter((t2) => t2.insertedCount + t2.updatedCount + t2.deletedCount > 0 || t2.coverage && t2.coverage !== "both");
       const unchangedCount = tables.length - changedTables.length;
       const summary = document.createElement("div");
       summary.className = "db-snapshot-diff-summary";
       if (changedTables.length === 0) {
         summary.textContent = text2().snapshot.noChanges;
         section.appendChild(summary);
-        mainArea.appendChild(section);
+        rightPane.appendChild(section);
         return;
       }
       summary.textContent = text2().snapshot.diffSummary(changedTables.length, unchangedCount);
       section.appendChild(summary);
+      const toc = document.createElement("div");
+      toc.className = "db-snapshot-diff-toc";
+      const tocChips = new Map;
+      section.appendChild(toc);
+      function buildStatSpans(target, inserted, updated, deleted) {
+        const make = (cls, prefix, n2) => {
+          if (n2 <= 0)
+            return;
+          const s2 = document.createElement("span");
+          s2.className = `db-snapshot-diff-stat ${cls}`;
+          s2.textContent = `${prefix}${n2}`;
+          target.appendChild(s2);
+        };
+        make("add", "+", inserted);
+        make("upd", "~", updated);
+        make("del", "-", deleted);
+      }
+      function renderCoverageOrStats(target, summary2) {
+        const tx = text2().snapshot;
+        if (summary2.coverage === "before-only") {
+          const lbl = document.createElement("span");
+          lbl.className = "db-snapshot-diff-coverage-badge before-only";
+          lbl.textContent = tx.coverageBeforeOnly;
+          target.appendChild(lbl);
+        } else if (summary2.coverage === "after-only") {
+          const lbl = document.createElement("span");
+          lbl.className = "db-snapshot-diff-coverage-badge after-only";
+          lbl.textContent = tx.coverageAfterOnly;
+          target.appendChild(lbl);
+        } else {
+          buildStatSpans(target, summary2.insertedCount, summary2.updatedCount, summary2.deletedCount);
+        }
+      }
+      const pendingLoads = [];
+      let scrollTarget = null;
       for (const t2 of changedTables) {
         const tableEl = document.createElement("div");
         tableEl.className = "db-snapshot-diff-table";
+        const sectionId = `diff-table-${t2.tableName.replace(/[^a-zA-Z0-9_]/g, "_")}`;
+        tableEl.id = sectionId;
         const tableHeader = document.createElement("div");
         tableHeader.className = "db-snapshot-diff-table-header";
         const nameSpan = document.createElement("span");
@@ -14892,26 +15233,82 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         nameSpan.textContent = t2.tableName;
         const statsSpan = document.createElement("span");
         statsSpan.className = "db-snapshot-diff-table-stats";
-        const parts = [];
-        if (t2.insertedCount > 0)
-          parts.push(`+${t2.insertedCount}`);
-        if (t2.updatedCount > 0)
-          parts.push(`~${t2.updatedCount}`);
-        if (t2.deletedCount > 0)
-          parts.push(`-${t2.deletedCount}`);
-        statsSpan.textContent = parts.join(" ");
+        renderCoverageOrStats(statsSpan, t2);
         tableHeader.append(nameSpan, statsSpan);
         tableHeader.style.cursor = "pointer";
         const rowsContainer = document.createElement("div");
         rowsContainer.className = "db-snapshot-diff-rows-container";
-        loadDiffRows(beforeId, afterId, t2.tableName, rowsContainer);
+        if (t2.coverage === "before-only" || t2.coverage === "after-only") {
+          const tx = text2().snapshot;
+          const note = document.createElement("div");
+          note.className = "db-snapshot-diff-coverage-note";
+          const rows = t2.unsnapshottedRowCount ?? 0;
+          note.textContent = t2.coverage === "before-only" ? tx.coverageNoteBeforeOnly(rows) : tx.coverageNoteAfterOnly(rows);
+          rowsContainer.appendChild(note);
+        } else {
+          pendingLoads.push(loadDiffRows(beforeId, afterId, t2.tableName, rowsContainer));
+        }
         tableHeader.addEventListener("click", () => {
           rowsContainer.hidden = !rowsContainer.hidden;
         });
         tableEl.append(tableHeader, rowsContainer);
         section.appendChild(tableEl);
+        const chip = document.createElement("button");
+        chip.type = "button";
+        chip.className = "db-snapshot-diff-toc-chip";
+        chip.dataset.targetId = sectionId;
+        const chipName = document.createElement("span");
+        chipName.className = "db-snapshot-diff-toc-chip-name";
+        chipName.textContent = t2.tableName;
+        const chipStats = document.createElement("span");
+        chipStats.className = "db-snapshot-diff-toc-chip-stats";
+        renderCoverageOrStats(chipStats, t2);
+        if (t2.coverage === "before-only" || t2.coverage === "after-only") {
+          chip.classList.add("coverage-incomplete");
+        }
+        chip.append(chipName, chipStats);
+        chip.addEventListener("click", () => {
+          scrollTarget = tableEl;
+          tableEl.scrollIntoView({ behavior: "smooth", block: "start" });
+        });
+        toc.appendChild(chip);
+        tocChips.set(sectionId, chip);
+      }
+      Promise.allSettled(pendingLoads).then(() => {
+        if (scrollTarget && rightPane.contains(scrollTarget)) {
+          scrollTarget.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      });
+      const observer = new IntersectionObserver((entries) => {
+        const intersecting = entries.filter((e2) => e2.isIntersecting);
+        if (intersecting.length === 0)
+          return;
+        intersecting.sort((a2, b2) => a2.boundingClientRect.top - b2.boundingClientRect.top);
+        const activeId = intersecting[0].target.id;
+        for (const [id, chip] of tocChips) {
+          chip.classList.toggle("active", id === activeId);
+        }
+        const activeChip = tocChips.get(activeId);
+        if (activeChip) {
+          const tocBox = toc.getBoundingClientRect();
+          const chipBox = activeChip.getBoundingClientRect();
+          const margin = 16;
+          if (chipBox.left < tocBox.left + margin) {
+            toc.scrollLeft += chipBox.left - tocBox.left - margin;
+          } else if (chipBox.right > tocBox.right - margin) {
+            toc.scrollLeft += chipBox.right - tocBox.right + margin;
+          }
+        }
+      }, {
+        root: rightPane,
+        rootMargin: "-48px 0px -60% 0px",
+        threshold: 0
+      });
+      for (const el2 of section.querySelectorAll(".db-snapshot-diff-table")) {
+        observer.observe(el2);
       }
-      mainArea.appendChild(section);
+      section.__tocObserver = observer;
+      rightPane.appendChild(section);
     }
     async function loadDiffRows(beforeId, afterId, table2, container) {
       container.innerHTML = "";
@@ -14920,7 +15317,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       loading.textContent = text2().snapshot.loading;
       container.appendChild(loading);
       try {
-        const res = await fetch(`/_db/snapshot/diff/rows?before=${encodeURIComponent(beforeId)}&after=${encodeURIComponent(afterId)}&table=${encodeURIComponent(table2)}&limit=200`);
+        const res = await getJson(`/_db/snapshot/diff/rows?before=${encodeURIComponent(beforeId)}&after=${encodeURIComponent(afterId)}&table=${encodeURIComponent(table2)}&limit=200`);
         if (!res.ok) {
           container.innerHTML = "";
           const error2 = document.createElement("div");
@@ -14953,11 +15350,19 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
             allCols.add(k);
       }
       const columns = [...allCols];
-      const table2 = document.createElement("table");
-      table2.className = "db-snap-diff-grid";
+      const colHeaderWrap = document.createElement("div");
+      colHeaderWrap.className = "db-snapshot-diff-col-header-wrap";
+      const colHeaderTable = document.createElement("table");
+      colHeaderTable.className = "db-snap-diff-grid";
+      const colHeaderColgroup = document.createElement("colgroup");
+      for (let i2 = 0;i2 < columns.length + 1; i2++) {
+        colHeaderColgroup.appendChild(document.createElement("col"));
+      }
+      colHeaderTable.appendChild(colHeaderColgroup);
       const thead = document.createElement("thead");
       const headRow = document.createElement("tr");
       const thType = document.createElement("th");
+      thType.className = "snap-diff-type-cell";
       thType.textContent = "";
       headRow.appendChild(thType);
       for (const col of columns) {
@@ -14966,16 +15371,25 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         headRow.appendChild(th);
       }
       thead.appendChild(headRow);
-      table2.appendChild(thead);
+      colHeaderTable.appendChild(thead);
+      colHeaderWrap.appendChild(colHeaderTable);
+      const rowsViewport = document.createElement("div");
+      rowsViewport.className = "db-snapshot-diff-rows-viewport";
+      const bodyTable = document.createElement("table");
+      bodyTable.className = "db-snap-diff-grid";
+      const bodyColgroup = document.createElement("colgroup");
+      for (let i2 = 0;i2 < columns.length + 1; i2++) {
+        bodyColgroup.appendChild(document.createElement("col"));
+      }
+      bodyTable.appendChild(bodyColgroup);
       const tbody = document.createElement("tbody");
       for (const row of rows) {
         if (row.changeType === "updated" && row.beforeValues && row.afterValues) {
           const trBefore = document.createElement("tr");
-          trBefore.className = "snap-diff-del";
+          trBefore.className = "snap-diff-del snap-diff-record-start";
           const tdTypeBefore = document.createElement("td");
           tdTypeBefore.className = "snap-diff-type-cell";
-          tdTypeBefore.textContent = text2().snapshot.before;
-          tdTypeBefore.rowSpan = 2;
+          tdTypeBefore.textContent = "−";
           trBefore.appendChild(tdTypeBefore);
           for (const col of columns) {
             const td = document.createElement("td");
@@ -14988,7 +15402,11 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           }
           tbody.appendChild(trBefore);
           const trAfter = document.createElement("tr");
-          trAfter.className = "snap-diff-add";
+          trAfter.className = "snap-diff-add snap-diff-record-end";
+          const tdTypeAfter = document.createElement("td");
+          tdTypeAfter.className = "snap-diff-type-cell";
+          tdTypeAfter.textContent = "+";
+          trAfter.appendChild(tdTypeAfter);
           for (const col of columns) {
             const td = document.createElement("td");
             const bs = row.beforeValues[col] == null ? "NULL" : String(row.beforeValues[col]);
@@ -15001,7 +15419,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           tbody.appendChild(trAfter);
         } else {
           const tr = document.createElement("tr");
-          tr.className = row.changeType === "inserted" ? "snap-diff-add" : "snap-diff-del";
+          const sideClass = row.changeType === "inserted" ? "snap-diff-add" : "snap-diff-del";
+          tr.className = `${sideClass} snap-diff-record-start snap-diff-record-end`;
           const tdType = document.createElement("td");
           tdType.className = "snap-diff-type-cell";
           tdType.textContent = changeTypeLabel(row.changeType);
@@ -15009,6 +15428,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           const values = row.changeType === "inserted" ? row.afterValues : row.beforeValues;
           for (const col of columns) {
             const td = document.createElement("td");
+            td.classList.add("snap-diff-changed-cell");
             const v = values?.[col];
             td.textContent = v == null ? "NULL" : String(v);
             tr.appendChild(td);
@@ -15016,8 +15436,32 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           tbody.appendChild(tr);
         }
       }
-      table2.appendChild(tbody);
-      container.appendChild(table2);
+      bodyTable.appendChild(tbody);
+      rowsViewport.appendChild(bodyTable);
+      container.append(colHeaderWrap, rowsViewport);
+      rowsViewport.addEventListener("scroll", () => {
+        colHeaderWrap.scrollLeft = rowsViewport.scrollLeft;
+      });
+      const syncColumnWidths = () => {
+        if (disposed)
+          return;
+        const firstRow = tbody.querySelector("tr");
+        if (!firstRow)
+          return;
+        const cells = firstRow.children;
+        const bodyCols = bodyColgroup.children;
+        const headerCols = colHeaderColgroup.children;
+        for (let i2 = 0;i2 < cells.length; i2++) {
+          const w = cells[i2].offsetWidth;
+          if (bodyCols[i2])
+            bodyCols[i2].style.width = `${w}px`;
+          if (headerCols[i2])
+            headerCols[i2].style.width = `${w}px`;
+        }
+      };
+      requestAnimationFrame(syncColumnWidths);
+      const ro = new ResizeObserver(syncColumnWidths);
+      ro.observe(bodyTable);
       if (total > rows.length) {
         const more = document.createElement("div");
         more.className = "db-snapshot-diff-more";
@@ -15069,7 +15513,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       if (item) {
         item.after(dialog);
       } else {
-        mainArea.prepend(dialog);
+        leftPane.prepend(dialog);
       }
       input.focus();
     }
@@ -15082,6 +15526,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       refresh();
     }
     function handleSse(data) {
+      if (disposed)
+        return;
       try {
         const parsed = JSON.parse(data);
         const dbId = deps.getDbId();
@@ -15090,21 +15536,57 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           return;
         if (parsed.schema && parsed.schema !== schema)
           return;
-        if (parsed.action === "started" && parsed.id) {
-          setActiveSnapshotId(parsed.id);
+        const id = parsed.id ?? null;
+        if (parsed.action === "started" && id) {
+          upsertJob(id, {
+            done: false,
+            total: parsed.total ?? 0,
+            index: 0
+          });
+        }
+        if (parsed.action === "progress" && id) {
+          upsertJob(id, {
+            table: parsed.table,
+            index: parsed.index,
+            total: parsed.total ?? 0,
+            done: parsed.done === true
+          });
         }
-        if (parsed.action === "created" || parsed.action === "error") {
-          setActiveSnapshotId(null);
+        if (parsed.action === "created" && id) {
+          upsertJob(id, { done: true });
+          scheduleJobRemove(id);
           refreshAndAutoDiff();
         }
+        if (parsed.action === "aborted" && id) {
+          upsertJob(id, { done: true, aborted: true });
+          scheduleJobRemove(id);
+          refresh();
+        }
+        if (parsed.action === "error" && id) {
+          upsertJob(id, {
+            done: true,
+            errorMessage: parsed.error || text2().snapshot.failed
+          });
+          scheduleJobRemove(id);
+          refresh();
+        }
       } catch {}
     }
     function dispose() {
       disposed = true;
-      setActiveSnapshotId(null);
       for (const timer of autoRefreshTimers)
         clearTimeout(timer);
       autoRefreshTimers.clear();
+      for (const timer of jobClearTimers.values())
+        clearTimeout(timer);
+      jobClearTimers.clear();
+      activeJobs.clear();
+      cancellingJobs.clear();
+      const existing = rightPane.querySelector(".db-snapshot-diff-inline");
+      if (existing) {
+        const prev = existing;
+        prev.__tocObserver?.disconnect();
+      }
     }
     function localize() {
       const t2 = text2().snapshot;
@@ -15112,8 +15594,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       guideBody.textContent = t2.guideBody;
       createBtn.textContent = t2.create;
       refreshBtn.textContent = t2.refresh;
-      if (!activeSnapshotId)
-        snapshotCancelBtn.textContent = t2.cancel;
+      renderProgress();
       tableSelectorHeader.textContent = t2.selectTablesHeader;
       selectAllBtn.textContent = t2.selectAll;
       deselectAllBtn.textContent = t2.deselectAll;
@@ -15122,21 +15603,54 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       if (!confirmBtn.disabled)
         confirmBtn.textContent = t2.confirm;
       cancelBtn.textContent = t2.cancel;
-      const prevSelects = mainArea.querySelectorAll(".db-snapshot-diff-select");
+      const prevSelects = leftPane.querySelectorAll(".db-snapshot-diff-select");
       const prevBeforeVal = prevSelects[0]?.value;
       const prevAfterVal = prevSelects[1]?.value;
-      const hadDiff = mainArea.querySelector(".db-snapshot-diff-inline") != null;
+      const hadDiff = rightPane.querySelector(".db-snapshot-diff-inline") != null;
       renderMain();
-      const newSelects = mainArea.querySelectorAll(".db-snapshot-diff-select");
-      if (newSelects[0] && prevBeforeVal)
+      const newSelects = leftPane.querySelectorAll(".db-snapshot-diff-select");
+      if (newSelects[0] && prevBeforeVal) {
         newSelects[0].value = prevBeforeVal;
-      if (newSelects[1] && prevAfterVal)
+        newSelects[0].dispatchEvent(new Event("change"));
+      }
+      if (newSelects[1] && prevAfterVal) {
         newSelects[1].value = prevAfterVal;
+        newSelects[1].dispatchEvent(new Event("change"));
+      }
       if (hadDiff && currentDiff) {
         showDiffInline(currentDiff.beforeId, currentDiff.afterId);
       }
     }
-    return { el, refresh, handleSse, dispose, localize };
+    async function restoreDiffFromRoute() {
+      const target = deps.getRouteDiff?.();
+      if (!target || !target.before || !target.after)
+        return;
+      if (currentDiff && currentDiff.beforeId === target.before && currentDiff.afterId === target.after) {
+        return;
+      }
+      if (snapshots.length === 0) {
+        await refresh();
+      }
+      if (disposed)
+        return;
+      const hasBefore = snapshots.some((s2) => s2.id === target.before);
+      const hasAfter = snapshots.some((s2) => s2.id === target.after);
+      if (!hasBefore || !hasAfter) {
+        deps.setRouteDiff?.(null);
+        return;
+      }
+      await showDiffInline(target.before, target.after);
+    }
+    return {
+      el,
+      refresh,
+      handleSse,
+      dispose,
+      localize,
+      restoreDiffFromRoute: () => {
+        restoreDiffFromRoute();
+      }
+    };
   }
 
   // web-src/views/database/table-grid.ts
@@ -17377,6 +17891,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       onClick: () => {
         setActiveTab("snapshot");
         snapshotView.refresh();
+        snapshotView.restoreDiffFromRoute();
       }
     });
     const disposeInferFkPrefSub = outerDeps.onDbUiPrefChange(() => {
@@ -17481,7 +17996,45 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       getDbId: () => currentDbInfo?.id || null,
       getSchema: () => currentSchema,
       getTables: () => schemaCache?.tables || [],
-      getText: () => paneText()
+      getText: () => paneText(),
+      trackLoad: deps.trackLoad,
+      getStoredSelectedTables: () => {
+        if (!currentDbInfo)
+          return;
+        const scope = dbUiTableExpansionScope(currentDbInfo.id, currentSchema);
+        return outerDeps.getSnapshotSelectedTables(scope);
+      },
+      setStoredSelectedTables: (tables) => {
+        if (!currentDbInfo)
+          return;
+        const scope = dbUiTableExpansionScope(currentDbInfo.id, currentSchema);
+        outerDeps.setSnapshotSelectedTables(scope, tables);
+      },
+      getRouteDiff: () => {
+        const parsed = parseRoute(window.location.pathname, window.location.search, deps.currentRange());
+        if (parsed.screen !== "database")
+          return;
+        const before = parsed.diffBefore;
+        const after = parsed.diffAfter;
+        if (!before && !after)
+          return;
+        return { before, after };
+      },
+      setRouteDiff: (diff) => {
+        const dbId = currentDbInfo?.id;
+        if (!dbId)
+          return;
+        deps.setRoute({
+          screen: "database",
+          db: dbId,
+          schema: currentSchema ?? undefined,
+          table: currentTable ?? undefined,
+          tab: "snapshot",
+          ...diff?.before ? { diffBefore: diff.before } : {},
+          ...diff?.after ? { diffAfter: diff.after } : {},
+          range: deps.currentRange()
+        }, true);
+      }
     });
     const historyView = createQueryHistoryView({
       getDbId: () => currentDbInfo?.id || null,
@@ -18337,6 +18890,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
             renderErDiagram();
         } else if (normalizedView === "snapshot") {
           snapshotView.refresh();
+          snapshotView.restoreDiffFromRoute();
         }
       }
       applyAnnotationTarget(options.annotationTarget);
@@ -18610,33 +19164,27 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         return;
       });
     }
-    function getExpandedTables(scopeKey) {
-      return [...dbUiState.expandedTables?.[scopeKey] || []];
-    }
-    function setExpandedTable(scopeKey, table2, expanded) {
-      const expandedTables = { ...dbUiState.expandedTables || {} };
-      const tables = new Set(expandedTables[scopeKey] || []);
-      if (expanded)
-        tables.add(table2);
-      else
-        tables.delete(table2);
+    function updateScopedTableList(stateKey, scopeKey, mutate) {
+      const current = { ...dbUiState[stateKey] || {} };
+      const tables = new Set(current[scopeKey] || []);
+      mutate(tables);
       const nextTables = [...tables].sort((a2, b2) => a2.localeCompare(b2));
       if (nextTables.length > 0)
-        expandedTables[scopeKey] = nextTables;
+        current[scopeKey] = nextTables;
       else
-        delete expandedTables[scopeKey];
-      const nextExpanded = Object.keys(expandedTables).length > 0 ? expandedTables : undefined;
+        delete current[scopeKey];
+      const nextMap = Object.keys(current).length > 0 ? current : undefined;
       const nextState = { ...dbUiState, version: 1 };
-      if (nextExpanded)
-        nextState.expandedTables = nextExpanded;
+      if (nextMap)
+        nextState[stateKey] = nextMap;
       else
-        delete nextState.expandedTables;
+        delete nextState[stateKey];
       applyDbUiState(nextState);
       fetch("/_db/ui", {
         method: "PATCH",
         headers: actionHeaders(),
         body: JSON.stringify({
-          expandedTables: {
+          [stateKey]: {
             [scopeKey]: nextTables.length > 0 ? nextTables : null
           }
         })
@@ -18644,6 +19192,27 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         return;
       });
     }
+    function getExpandedTables(scopeKey) {
+      return [...dbUiState.expandedTables?.[scopeKey] || []];
+    }
+    function setExpandedTable(scopeKey, table2, expanded) {
+      updateScopedTableList("expandedTables", scopeKey, (tables) => {
+        if (expanded)
+          tables.add(table2);
+        else
+          tables.delete(table2);
+      });
+    }
+    function getSnapshotSelectedTables(scopeKey) {
+      return [...dbUiState.snapshotSelectedTables?.[scopeKey] || []];
+    }
+    function setSnapshotSelectedTables(scopeKey, tables) {
+      updateScopedTableList("snapshotSelectedTables", scopeKey, (set2) => {
+        set2.clear();
+        for (const t2 of tables)
+          set2.add(t2);
+      });
+    }
     const dbUiPrefListeners = new Set;
     function applyDbUiState(next) {
       dbUiState = next;
@@ -18865,12 +19434,22 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       if (!entry)
         return;
       const s2 = entry.pane.getState();
+      const isSnapshot = s2.view === "snapshot";
+      let diffBefore;
+      let diffAfter;
+      if (isSnapshot) {
+        const url = new URL(window.location.href);
+        diffBefore = url.searchParams.get("diffBefore") ?? undefined;
+        diffAfter = url.searchParams.get("diffAfter") ?? undefined;
+      }
       deps.setRoute({
         screen: "database",
         db: s2.dbId ?? undefined,
         schema: s2.schema ?? undefined,
         table: s2.table ?? undefined,
         tab: s2.view === "data" ? undefined : s2.view,
+        ...diffBefore ? { diffBefore } : {},
+        ...diffAfter ? { diffAfter } : {},
         range: deps.currentRange()
       }, true);
     }
@@ -19120,6 +19699,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         setColumnWidths,
         getExpandedTables,
         setExpandedTable,
+        getSnapshotSelectedTables,
+        setSnapshotSelectedTables,
         getDbUiPref,
         setDbUiPref,
         onDbUiPrefChange,