@youtyan/code-viewer 0.2.6 → 0.2.8

package/web/app.js

@@ -873,8 +873,6 @@
   }
 
   // web-src/views/annotations-player.ts
-  var MUTE_KEY = "gdp:annotation-muted";
-  var RATE_KEY = "gdp:annotation-rate";
   function createAnnotationsPlayer(deps) {
     const bar = deps.$("#annotation-player");
     const toggleBtn = deps.$("#annotation-player-toggle");
@@ -957,9 +955,9 @@
       speechAvailable: () => speechSupported,
       onStateChange: render
     });
-    if (localStorage.getItem(MUTE_KEY) === "1")
+    if (deps.getMuted())
       core.setMuted(true);
-    const savedRate = Number(localStorage.getItem(RATE_KEY));
+    const savedRate = deps.getRate();
     if (savedRate && savedRate >= 0.5 && savedRate <= 2 && Array.from(rateSel.options).some((o) => o.value === String(savedRate))) {
       core.setRate(savedRate);
       rateSel.value = String(savedRate);
@@ -993,12 +991,12 @@
     muteBtn.addEventListener("click", () => {
       const muted = !core.getState().muted;
       core.setMuted(muted);
-      localStorage.setItem(MUTE_KEY, muted ? "1" : "0");
+      deps.setMuted(muted);
     });
     rateSel.addEventListener("change", () => {
       const rate = Number(rateSel.value) || 1;
       core.setRate(rate);
-      localStorage.setItem(RATE_KEY, String(rate));
+      deps.setRate(rate);
     });
     function syncVisibility() {
       const hasEntries = deps.getActiveSessionEntries().length > 0;
@@ -7245,7 +7243,7 @@ ${frontmatter.yaml}
   function createAnnotationsUi(deps) {
     const { $ } = deps;
     let ANNOTATIONS = { version: 1, sessions: [] };
-    let annotationFollow = localStorage.getItem("gdp:annotation-follow") !== "0";
+    let annotationFollow = deps.getAnnotationFollow();
     let activeAnnotationId = null;
     let annotationPanelDismissed = false;
     let activeSessionId = new URLSearchParams(window.location.search).get(ANNOTATION_SESSION_PARAM);
@@ -7298,7 +7296,7 @@ ${frontmatter.yaml}
           qhPanel.hidden = true;
         document.body.classList.remove("query-history-panel-open");
       }
-      localStorage.setItem("gdp:annotation-panel", open ? "1" : "0");
+      deps.setAnnotationPanelOpenState(open);
     }
     function annotationLineTarget(entry) {
       if (!entry.line)
@@ -8068,7 +8066,7 @@ ${frontmatter.yaml}
         }
       });
     }
-    if (localStorage.getItem("gdp:annotation-panel") === "1")
+    if (deps.getAnnotationPanelOpen())
       setAnnotationPanelOpen(true);
     updateDatabaseCaptureButton();
     $("#annotations-toggle").addEventListener("click", () => {
@@ -8088,7 +8086,7 @@ ${frontmatter.yaml}
     followCheckbox.checked = annotationFollow;
     followCheckbox.addEventListener("change", () => {
       annotationFollow = followCheckbox.checked;
-      localStorage.setItem("gdp:annotation-follow", annotationFollow ? "1" : "0");
+      deps.setAnnotationFollow(annotationFollow);
     });
     $("#annotation-clear").addEventListener("click", () => {
       if (!window.confirm("Delete all annotations?"))
@@ -9648,29 +9646,7 @@ ${frontmatter.yaml}
     }
     return shikiPromise2;
   }
-  var HISTORY_KEY = "db:query-history";
   var MAX_HISTORY = 50;
-  function loadHistory() {
-    try {
-      const raw = localStorage.getItem(HISTORY_KEY);
-      if (!raw)
-        return [];
-      const parsed = JSON.parse(raw);
-      return Array.isArray(parsed) ? parsed.filter((s2) => typeof s2 === "string") : [];
-    } catch {
-      return [];
-    }
-  }
-  function saveToHistory(sql) {
-    const history2 = loadHistory();
-    const idx = history2.indexOf(sql);
-    if (idx >= 0)
-      history2.splice(idx, 1);
-    history2.unshift(sql);
-    if (history2.length > MAX_HISTORY)
-      history2.length = MAX_HISTORY;
-    localStorage.setItem(HISTORY_KEY, JSON.stringify(history2));
-  }
   function createQueryEditor(callbacks) {
     const el = document.createElement("div");
     el.className = "db-query-editor";
@@ -9780,7 +9756,6 @@ ${frontmatter.yaml}
           resultArea.appendChild(errEl);
           return;
         }
-        saveToHistory(sql);
         const suffix = result.truncated ? "+" : "";
         statusSpan.textContent = `${result.rowCount}${suffix} rows (${result.elapsedMs}ms)`;
         renderResultTable(result);
@@ -9900,15 +9875,23 @@ ${frontmatter.yaml}
         historyDropdown.hidden = true;
         return;
       }
-      const history2 = loadHistory();
       historyDropdown.innerHTML = "";
-      if (history2.length === 0) {
-        const empty = document.createElement("div");
-        empty.className = "db-query-history-empty";
-        empty.textContent = "No history";
-        historyDropdown.appendChild(empty);
-      } else {
-        for (const sql of history2) {
+      const loading = document.createElement("div");
+      loading.className = "db-query-history-empty";
+      loading.textContent = "Loading...";
+      historyDropdown.appendChild(loading);
+      historyDropdown.hidden = false;
+      Promise.resolve(callbacks.loadHistory?.() ?? []).then((history2) => {
+        historyDropdown.innerHTML = "";
+        const items = history2.slice(0, MAX_HISTORY);
+        if (items.length === 0) {
+          const empty = document.createElement("div");
+          empty.className = "db-query-history-empty";
+          empty.textContent = "No history";
+          historyDropdown.appendChild(empty);
+          return;
+        }
+        for (const sql of items) {
           const item = document.createElement("div");
           item.className = "db-query-history-item";
           item.textContent = sql.length > 100 ? `${sql.slice(0, 100)}...` : sql;
@@ -9919,8 +9902,13 @@ ${frontmatter.yaml}
           });
           historyDropdown.appendChild(item);
         }
-      }
-      historyDropdown.hidden = false;
+      }).catch(() => {
+        historyDropdown.innerHTML = "";
+        const empty = document.createElement("div");
+        empty.className = "db-query-history-empty";
+        empty.textContent = "Failed to load history";
+        historyDropdown.appendChild(empty);
+      });
     });
     const onDocumentClick = (e2) => {
       if (!historyDropdown.hidden && !historyBtn.contains(e2.target) && !historyDropdown.contains(e2.target)) {
@@ -12347,43 +12335,27 @@ ${frontmatter.yaml}
     let selectedRowIndex = -1;
     const colWidths = new Map;
     let activeResize = null;
-    function storageKey() {
-      const project = callbacks.getProjectName?.() ?? "";
-      const dbId = callbacks.getDbId();
-      if (!currentTable)
-        return null;
-      if (!dbId)
-        return null;
-      return `db:col-widths:${project}:${dbId}:${currentTable}`;
-    }
     function saveColWidths() {
-      const key = storageKey();
-      if (!key)
+      const dbId = callbacks.getDbId();
+      if (!dbId || !currentTable)
         return;
       const obj = {};
       for (const [name, w] of colWidths) {
         obj[name] = w;
       }
-      try {
-        localStorage.setItem(key, JSON.stringify(obj));
-      } catch {}
+      callbacks.setColumnWidths(dbId, currentTable, obj);
     }
     function loadColWidths() {
       colWidths.clear();
-      const key = storageKey();
-      if (!key)
+      const dbId = callbacks.getDbId();
+      if (!dbId || !currentTable)
         return;
-      try {
-        const raw = localStorage.getItem(key);
-        if (raw) {
-          const obj = JSON.parse(raw);
-          for (const [name, w] of Object.entries(obj)) {
-            if (typeof w === "number" && w > 0) {
-              colWidths.set(name, w);
-            }
-          }
+      const obj = callbacks.getColumnWidths(dbId, currentTable);
+      for (const [name, w] of Object.entries(obj)) {
+        if (typeof w === "number" && w > 0) {
+          colWidths.set(name, w);
         }
-      } catch {}
+      }
     }
     function getColWidth(colName) {
       return colWidths.get(colName) ?? DEFAULT_COL_WIDTH;
@@ -13395,10 +13367,13 @@ ${frontmatter.yaml}
     });
     const grid = createTableGrid({
       fetchPage: (table2, offset, limit, sort, filters, signal) => fetchTablePage(table2, offset, limit, sort, filters, signal),
-      getDbId: () => currentDbInfo?.id || null
+      getDbId: () => currentDbInfo?.id || null,
+      getColumnWidths: (dbId, table2) => outerDeps.getColumnWidths(dbId, table2),
+      setColumnWidths: (dbId, table2, widths) => outerDeps.setColumnWidths(dbId, table2, widths)
     });
     const queryEditor = createQueryEditor({
       executeQuery: (sql) => executeQuery(sql),
+      loadHistory: () => outerDeps.loadSqlHistory(currentDbInfo?.id || null, currentSchema),
       onSqlChange: () => cb.onStateChange()
     });
     if (initial.sqlDraft)
@@ -13831,6 +13806,10 @@ ${frontmatter.yaml}
         if (slot.isStale() || generation !== loadGeneration || currentDbInfo?.id !== requestDbId || currentTable !== table2) {
           return;
         }
+        await outerDeps.ensureDbUiState();
+        if (slot.isStale() || generation !== loadGeneration || currentDbInfo?.id !== requestDbId || currentTable !== table2) {
+          return;
+        }
         grid.load(table2, data);
       } catch (err) {
         if (slot.isStale() || isAbortError(err) || generation !== loadGeneration || currentDbInfo?.id !== requestDbId || currentTable !== table2) {
@@ -14121,13 +14100,15 @@ ${frontmatter.yaml}
     }
     function getState() {
       const loaded = !!currentDbInfo;
+      const schema = loaded ? currentSchema : initial.schema ?? currentSchema;
       const state = {
         id: cb.tabId,
         dbId: currentDbInfo?.id ?? initial.dbId ?? null,
-        schema: loaded ? currentSchema : initial.schema ?? currentSchema,
         table: loaded ? currentTable : initial.table ?? currentTable ?? null,
         view: loaded ? currentTab : initial.view ?? currentTab
       };
+      if (schema)
+        state.schema = schema;
       const sqlDraft = queryEditor.getSql();
       if (sqlDraft)
         state.sqlDraft = sqlDraft;
@@ -14270,9 +14251,69 @@ ${frontmatter.yaml}
     let enterQueue = Promise.resolve();
     let unloadListenerInstalled = false;
     let dbFilesCache = null;
+    let dbUiState = { version: 1, columnWidths: {} };
+    let dbUiLoadPromise = null;
     function isRestoring() {
       return restoringDepth > 0;
     }
+    function actionHeaders() {
+      return {
+        "Content-Type": "application/json",
+        "X-Code-Viewer-Action": "1"
+      };
+    }
+    async function ensureDbUiState() {
+      if (dbUiLoadPromise)
+        return dbUiLoadPromise;
+      dbUiLoadPromise = fetch("/_db/ui").then(async (res) => {
+        if (!res.ok)
+          return;
+        dbUiState = await res.json();
+      }).catch(() => {});
+      return dbUiLoadPromise;
+    }
+    function getColumnWidths(dbId, table2) {
+      return { ...dbUiState.columnWidths[dbId]?.[table2] || {} };
+    }
+    function setColumnWidths(dbId, table2, widths) {
+      const nextDb = { ...dbUiState.columnWidths[dbId] || {} };
+      nextDb[table2] = { ...widths };
+      dbUiState = {
+        version: 1,
+        columnWidths: { ...dbUiState.columnWidths, [dbId]: nextDb }
+      };
+      fetch("/_db/ui", {
+        method: "PATCH",
+        headers: actionHeaders(),
+        body: JSON.stringify({ columnWidths: { [dbId]: { [table2]: widths } } })
+      }).then(async (res) => {
+        if (res.ok)
+          dbUiState = await res.json();
+      }).catch(() => {});
+    }
+    async function loadSqlHistory(dbId, schema) {
+      if (!dbId)
+        return [];
+      const params = new URLSearchParams({ db: dbId });
+      if (schema)
+        params.set("schema", schema);
+      const res = await fetch(`/_db/history?${params}`);
+      if (!res.ok)
+        return [];
+      const state = await res.json();
+      const seen = new Set;
+      const history2 = [];
+      for (const entry of state.entries) {
+        const sql = entry.sql.trim();
+        if (!sql || seen.has(sql))
+          continue;
+        seen.add(sql);
+        history2.push(sql);
+        if (history2.length >= 50)
+          break;
+      }
+      return history2;
+    }
     function beginRestoring() {
       restoringDepth += 1;
       let finished = false;
@@ -14686,7 +14727,14 @@ ${frontmatter.yaml}
           closeTab(id);
         }
       });
-      const pane = createTabPane({ ...deps, fetchDbFiles: fetchDbFilesCached }, {
+      const pane = createTabPane({
+        ...deps,
+        fetchDbFiles: fetchDbFilesCached,
+        ensureDbUiState,
+        getColumnWidths,
+        setColumnWidths,
+        loadSqlHistory
+      }, {
         tabId: id,
         isActive: () => activeTabId === id,
         canSyncRoute: () => !isRestoring(),
@@ -15282,7 +15330,7 @@ ${frontmatter.yaml}
         STATE.viewedFiles.add(path);
       else
         STATE.viewedFiles.delete(path);
-      persistViewedFiles();
+      persistViewedFiles(path, viewed);
       applyViewedState();
       $$(diffCardSelector(path)).forEach((card) => {
         applyViewedToCard(card, viewed, true);
@@ -18688,7 +18736,6 @@ code-viewer annotate add-db --db app.db --tab query \\
   }
 
   // web-src/views/sidebar.ts
-  var SIDEBAR_FONT_SIZE_KEY = "gdp:sidebar-font-size";
   function sidebarAncestorDirs(path) {
     const parts = path.split("/").filter(Boolean);
     const dirs = [];
@@ -18710,6 +18757,9 @@ code-viewer annotate add-db --db app.db --tab query \\
       appendScopeParams,
       createOpenPathButton,
       normalizeViewerFontSize,
+      getSidebarFontSize,
+      persistSidebarHidden,
+      persistSidebarWidth,
       scheduleMainSurfaceFocus,
       setChevronIcon,
       trackLoad,
@@ -18730,7 +18780,7 @@ code-viewer annotate add-db --db app.db --tab query \\
     const SIDEBAR_LAZY_LOADED_DIRS = new Set;
     const SIDEBAR_LAZY_LOADING_DIRS = new Map;
     function savedSidebarFontSize() {
-      return normalizeViewerFontSize(localStorage.getItem(SIDEBAR_FONT_SIZE_KEY));
+      return normalizeViewerFontSize(getSidebarFontSize());
     }
     function applySidebarFontSize(size = savedSidebarFontSize()) {
       document.body.dataset.sidebarFontSize = size;
@@ -18832,10 +18882,11 @@ code-viewer annotate add-db --db app.db --tab query \\
         sidebarHead.after(filter);
       }
     }
-    function applySidebarHidden(hidden = STATE.sidebarHidden) {
+    function applySidebarHidden(hidden = STATE.sidebarHidden, options = {}) {
       STATE.sidebarHidden = hidden;
       document.body.classList.toggle("gdp-sidebar-hidden", hidden);
-      localStorage.setItem("gdp:sidebar-hidden", hidden ? "1" : "0");
+      if (options.persist !== false)
+        persistSidebarHidden(hidden);
       ensureSidebarToggleButton();
       setSidebarTreeActionIcons();
       placeSidebarToggle();
@@ -18977,11 +19028,13 @@ code-viewer annotate add-db --db app.db --tab query \\
             e2.stopPropagation();
             li.classList.toggle("collapsed");
             updateIcon();
-            if (li.classList.contains("collapsed"))
+            if (li.classList.contains("collapsed")) {
               STATE.collapsedDirs.add(dir.path);
-            else
+              persistCollapsedDirs({ added: [dir.path] });
+            } else {
               STATE.collapsedDirs.delete(dir.path);
-            persistCollapsedDirs();
+              persistCollapsedDirs({ removed: [dir.path] });
+            }
           };
           if (!dir.children_omitted) {
             chev.addEventListener("click", toggleDir);
@@ -19184,11 +19237,13 @@ code-viewer annotate add-db --db app.db --tab query \\
             await ensureVirtualSidebarDirLoaded(dir);
           li.classList.toggle("collapsed");
           updateIcon();
-          if (li.classList.contains("collapsed"))
+          if (li.classList.contains("collapsed")) {
             STATE.collapsedDirs.add(dir.path);
-          else
+            persistCollapsedDirs({ added: [dir.path] });
+          } else {
             STATE.collapsedDirs.delete(dir.path);
-          persistCollapsedDirs();
+            persistCollapsedDirs({ removed: [dir.path] });
+          }
           rerenderVirtualSidebar();
         } finally {
           delete li.dataset.toggling;
@@ -19492,19 +19547,28 @@ code-viewer annotate add-db --db app.db --tab query \\
       applyFilter();
     }
     function setAllSidebarDirsCollapsed(collapsed) {
+      const before = new Set(STATE.collapsedDirs);
       if (!collapsed)
         STATE.collapsedDirs.clear();
       if ($("#filelist").classList.contains("tree-virtual")) {
+        const added2 = [];
         if (collapsed) {
           for (const row of SIDEBAR_TREE_ROWS) {
-            if (row.kind === "dir")
-              STATE.collapsedDirs.add(row.path);
+            if (row.kind !== "dir")
+              continue;
+            if (!STATE.collapsedDirs.has(row.path))
+              added2.push(row.path);
+            STATE.collapsedDirs.add(row.path);
           }
         }
-        persistCollapsedDirs();
+        persistCollapsedDirs({
+          added: added2,
+          removed: collapsed ? [] : [...before]
+        });
         rerenderVirtualSidebar();
         return;
       }
+      const added = [];
       $$("#filelist .tree-dir[data-dirpath]").forEach((li) => {
         const path = li.dataset.dirpath || "";
         if (!path)
@@ -19513,10 +19577,16 @@ code-viewer annotate add-db --db app.db --tab query \\
         const dirIcon = li.querySelector(".dir-icon");
         if (dirIcon)
           setFolderIcon(dirIcon, collapsed);
-        if (collapsed)
+        if (collapsed) {
+          if (!STATE.collapsedDirs.has(path))
+            added.push(path);
           STATE.collapsedDirs.add(path);
+        }
+      });
+      persistCollapsedDirs({
+        added,
+        removed: collapsed ? [] : [...before]
       });
-      persistCollapsedDirs();
     }
     function expandSidebarAncestors(path) {
       if (!isSidebarTreeRendered())
@@ -19532,7 +19602,7 @@ code-viewer annotate add-db --db app.db --tab query \\
           setFolderIcon(icon, false);
       }
       if (changed)
-        persistCollapsedDirs();
+        persistCollapsedDirs({ removed: sidebarAncestorDirs(path) });
       rerenderVirtualSidebar();
     }
     function markActive(path, options = {}) {
@@ -19619,11 +19689,12 @@ code-viewer annotate add-db --db app.db --tab query \\
       SIDEBAR_FILTER_RAF = 0;
       applyFilter();
     }
-    function applySidebarWidth(w) {
+    function applySidebarWidth(w, options = {}) {
       const cw = Math.max(180, Math.min(900, w));
       document.documentElement.style.setProperty("--sidebar-w", `${cw}px`);
       STATE.sbWidth = cw;
-      localStorage.setItem("gdp:sbwidth", String(cw));
+      if (options.persist !== false)
+        persistSidebarWidth(cw);
     }
     function isSidebarRowVisible(row) {
       if (row.classList.contains("hidden") || row.classList.contains("hidden-by-tests"))
@@ -19846,11 +19917,13 @@ code-viewer annotate add-db --db app.db --tab query \\
           return;
         if (STATE.collapsedDirs.has(row.path) === collapsed)
           return;
-        if (collapsed)
+        if (collapsed) {
           STATE.collapsedDirs.add(row.path);
-        else
+          persistCollapsedDirs({ added: [row.path] });
+        } else {
           STATE.collapsedDirs.delete(row.path);
-        persistCollapsedDirs();
+          persistCollapsedDirs({ removed: [row.path] });
+        }
         rerenderVirtualSidebar();
         scrollVirtualSidebarPathIntoView(row.path);
         return;
@@ -23237,10 +23310,12 @@ code-viewer annotate add-db --db app.db --tab query \\
     let PENDING_G_SCOPE = null;
     let PENDING_G_UNTIL = 0;
     let PROJECT_NAME = "";
-    const SCOPE_OMIT_DIRS_STORAGE_KEY_PREFIX = "gdp:scope-omit-dirs:";
-    const SCOPE_EXCLUDE_NAMES_STORAGE_KEY_PREFIX = "gdp:scope-exclude-names:";
-    const CODE_FONT_SIZE_STORAGE_KEY = "gdp:code-font-size";
-    const VIEWER_LANGUAGE_STORAGE_KEY = "gdp:language";
+    let APP_SETTINGS = { version: 1 };
+    let VIEW_STATE = {
+      version: 1,
+      collapsedDirs: [],
+      viewedFiles: []
+    };
     const NETWORK_ACTIVITY = createNetworkActivityTracker({
       onChange: updateNetworkActivity
     });
@@ -23261,20 +23336,6 @@ code-viewer annotate add-db --db app.db --tab query \\
       NETWORK_ACTIVITY.cancelAll();
       updateNetworkActivity();
     }
-    function scopedKey(base2) {
-      return PROJECT_NAME ? `${base2}:${PROJECT_NAME}` : base2;
-    }
-    function readScopedStorage(base2) {
-      if (PROJECT_NAME) {
-        const v = localStorage.getItem(`${base2}:${PROJECT_NAME}`);
-        if (v !== null)
-          return v;
-      }
-      return localStorage.getItem(base2);
-    }
-    function writeScopedStorage(base2, value) {
-      localStorage.setItem(scopedKey(base2), value);
-    }
     const VIEWER_LANGUAGES = ["en", "ja"];
     const CLIENT_SCOPE_OMIT_DIRS_DEFAULT = [
       "node_modules",
@@ -23373,12 +23434,6 @@ code-viewer annotate add-db --db app.db --tab query \\
         ...new Set(raw.map((item) => item.trim()).filter((item) => item && item.length <= 128 && !item.includes("/") && !item.includes("\\") && item !== "." && item !== ".." && item !== ".git"))
       ].slice(0, 200).sort((a2, b2) => a2.localeCompare(b2));
     }
-    function scopeOmitDirsStorageKey() {
-      return SCOPE_OMIT_DIRS_STORAGE_KEY_PREFIX + (PROJECT_NAME || "default");
-    }
-    function scopeExcludeNamesStorageKey() {
-      return SCOPE_EXCLUDE_NAMES_STORAGE_KEY_PREFIX + (PROJECT_NAME || "default");
-    }
     function setProjectName(project) {
       if (!project)
         return;
@@ -23389,7 +23444,6 @@ code-viewer annotate add-db --db app.db --tab query \\
         projectTitle.textContent = project;
         projectTitle.title = project;
       }
-      reloadScopedState();
     }
     function setProjectBranch(branch) {
       const el = document.querySelector("#project-branch");
@@ -23399,49 +23453,135 @@ code-viewer annotate add-db --db app.db --tab query \\
       el.textContent = branch;
       el.title = branch ? `Current branch: ${branch}` : "";
     }
-    function reloadScopedState() {
-      const collapsed = readScopedStorage("gdp:collapsed-dirs");
-      if (collapsed !== null) {
-        STATE.collapsedDirs = new Set(JSON.parse(collapsed));
-      }
-      const viewed = readScopedStorage("gdp:viewed-files");
-      if (viewed !== null) {
-        STATE.viewedFiles = new Set(JSON.parse(viewed));
-      }
-      const igRaw = readScopedStorage("gdp:ignore-ws");
-      if (igRaw !== null)
-        STATE.ignoreWs = igRaw === "1";
-      const from = readScopedStorage("gdp:from");
-      const to = readScopedStorage("gdp:to");
-      if (from !== null)
-        STATE.from = from;
-      if (to !== null)
-        STATE.to = to;
-      const ht = readScopedStorage("gdp:hide-tests");
-      if (ht !== null)
-        STATE.hideTests = ht === "1";
+    function mergeLocalSettings(patch) {
+      const next = { ...APP_SETTINGS };
+      for (const [key, value] of Object.entries(patch)) {
+        if (value === null)
+          delete next[key];
+        else
+          next[key] = value;
+      }
+      APP_SETTINGS = { version: 1, ...next };
     }
-    function savedScopeOmitDirs() {
-      const raw = localStorage.getItem(scopeOmitDirsStorageKey());
-      if (raw == null)
-        return null;
-      try {
-        const parsed = JSON.parse(raw);
-        return normalizeScopeOmitDirs(Array.isArray(parsed) ? parsed : []);
-      } catch {
-        return normalizeScopeOmitDirs(raw);
+    function actionHeaders() {
+      return {
+        "Content-Type": "application/json",
+        "X-Code-Viewer-Action": "1"
+      };
+    }
+    function patchSettings(patch, options = {}) {
+      mergeLocalSettings(patch);
+      const body = JSON.stringify(patch);
+      fetch("/_state/settings", {
+        method: "PATCH",
+        headers: actionHeaders(),
+        body,
+        keepalive: options.keepalive
+      }).catch(() => {});
+    }
+    let pendingViewPatch = null;
+    let pendingViewTimer = null;
+    function mergePathDelta(next, base2, patch, addKey, removeKey) {
+      const added = new Set(base2?.[addKey] || []);
+      const removed = new Set(base2?.[removeKey] || []);
+      for (const path of patch[addKey] || []) {
+        removed.delete(path);
+        added.delete(path);
+        added.add(path);
+      }
+      for (const path of patch[removeKey] || []) {
+        added.delete(path);
+        removed.delete(path);
+        removed.add(path);
+      }
+      if (added.size > 0)
+        next[addKey] = [...added];
+      else
+        delete next[addKey];
+      if (removed.size > 0)
+        next[removeKey] = [...removed];
+      else
+        delete next[removeKey];
+    }
+    function mergeViewPatch(base2, patch) {
+      const next = { ...base2 || {}, ...patch };
+      mergePathDelta(next, base2, patch, "addedViewedFiles", "removedViewedFiles");
+      mergePathDelta(next, base2, patch, "addedCollapsedDirs", "removedCollapsedDirs");
+      return next;
+    }
+    function mergeLocalViewState(state, patch) {
+      const viewedFiles = new Set(state.viewedFiles);
+      for (const path of patch.addedViewedFiles || [])
+        viewedFiles.add(path);
+      for (const path of patch.removedViewedFiles || [])
+        viewedFiles.delete(path);
+      const collapsedDirs = new Set(state.collapsedDirs);
+      for (const path of patch.addedCollapsedDirs || [])
+        collapsedDirs.add(path);
+      for (const path of patch.removedCollapsedDirs || [])
+        collapsedDirs.delete(path);
+      return {
+        version: 1,
+        collapsedDirs: [...collapsedDirs],
+        viewedFiles: [...viewedFiles]
+      };
+    }
+    function patchViewState(patch, options = {}) {
+      VIEW_STATE = mergeLocalViewState(VIEW_STATE, patch);
+      pendingViewPatch = mergeViewPatch(pendingViewPatch, patch);
+      const send = (keepalive = false) => {
+        if (!pendingViewPatch)
+          return;
+        const body = JSON.stringify(pendingViewPatch);
+        pendingViewPatch = null;
+        fetch("/_state/view", {
+          method: "PATCH",
+          headers: actionHeaders(),
+          body,
+          keepalive
+        }).catch(() => {});
+      };
+      if (options.keepalive) {
+        if (pendingViewTimer !== null)
+          clearTimeout(pendingViewTimer);
+        pendingViewTimer = null;
+        send(true);
+        return;
+      }
+      if (options.debounce === false) {
+        if (pendingViewTimer !== null)
+          clearTimeout(pendingViewTimer);
+        pendingViewTimer = null;
+        send();
+        return;
       }
+      if (pendingViewTimer !== null)
+        clearTimeout(pendingViewTimer);
+      pendingViewTimer = setTimeout(() => {
+        pendingViewTimer = null;
+        send();
+      }, 300);
+    }
+    function flushViewStatePatch(keepalive = false) {
+      if (!pendingViewPatch)
+        return;
+      if (pendingViewTimer !== null)
+        clearTimeout(pendingViewTimer);
+      pendingViewTimer = null;
+      const body = JSON.stringify(pendingViewPatch);
+      pendingViewPatch = null;
+      fetch("/_state/view", {
+        method: "PATCH",
+        headers: actionHeaders(),
+        body,
+        keepalive
+      }).catch(() => {});
+    }
+    function savedScopeOmitDirs() {
+      return APP_SETTINGS.scopeOmitDirs ? normalizeScopeOmitDirs(APP_SETTINGS.scopeOmitDirs) : null;
     }
     function savedScopeExcludeNames() {
-      const raw = localStorage.getItem(scopeExcludeNamesStorageKey());
-      if (raw == null)
-        return null;
-      try {
-        const parsed = JSON.parse(raw);
-        return normalizeScopeExcludeNames(Array.isArray(parsed) ? parsed : []);
-      } catch {
-        return normalizeScopeExcludeNames(raw);
-      }
+      return APP_SETTINGS.scopeExcludeNames ? normalizeScopeExcludeNames(APP_SETTINGS.scopeExcludeNames) : null;
     }
     function serverScopeOmitDirsDefault() {
       return SERVER_SCOPE_OMIT_DIRS_DEFAULT.length ? SERVER_SCOPE_OMIT_DIRS_DEFAULT : CLIENT_SCOPE_OMIT_DIRS_DEFAULT;
@@ -23470,18 +23610,36 @@ code-viewer annotate add-db --db app.db --tab query \\
       return VIEWER_LANGUAGES.includes(value) ? value : "en";
     }
     function savedViewerLanguage() {
-      return normalizeViewerLanguage(localStorage.getItem(VIEWER_LANGUAGE_STORAGE_KEY));
+      return normalizeViewerLanguage(APP_SETTINGS.language);
     }
     function viewerLanguageFromSearch(search) {
       const raw = new URLSearchParams(search).get("lang");
       return raw ? normalizeViewerLanguage(raw) : null;
     }
     function savedCodeFontSize() {
-      return normalizeViewerFontSize(localStorage.getItem(CODE_FONT_SIZE_STORAGE_KEY));
+      return normalizeViewerFontSize(APP_SETTINGS.codeFontSize);
     }
     function applyCodeFontSize(size = savedCodeFontSize()) {
       document.body.dataset.codeFontSize = size;
     }
+    function savedSidebarFontSizeSetting() {
+      return normalizeViewerFontSize(APP_SETTINGS.sidebarFontSize);
+    }
+    function savedLayout() {
+      return APP_SETTINGS.layout === "line-by-line" ? "line-by-line" : "side-by-side";
+    }
+    function savedTheme() {
+      return APP_SETTINGS.theme === "light" || APP_SETTINGS.theme === "dark" ? APP_SETTINGS.theme : matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    function savedSidebarView() {
+      return APP_SETTINGS.sidebarView === "flat" ? "flat" : "tree";
+    }
+    function savedNumber(value, fallback, min, max) {
+      return typeof value === "number" && Number.isFinite(value) ? Math.max(min, Math.min(max, Math.round(value))) : fallback;
+    }
+    function savedRange() {
+      return APP_SETTINGS.range || DEFAULT_RANGE;
+    }
     function repoFileCacheKey(ref) {
       const omit = savedScopeOmitDirs();
       const exclude = savedScopeExcludeNames();
@@ -23507,37 +23665,78 @@ code-viewer annotate add-db --db app.db --tab query \\
         return null;
       }
     }
-    const STATE = (() => {
-      const igRaw = readScopedStorage("gdp:ignore-ws");
-      const fallbackRange = {
-        from: readScopedStorage("gdp:from") || DEFAULT_RANGE.from,
-        to: readScopedStorage("gdp:to") || DEFAULT_RANGE.to
-      };
+    async function loadPersistedState() {
+      const [settings, view] = await Promise.all([
+        fetch("/_state/settings").then((res) => res.ok ? res.json() : null).catch(() => null),
+        fetch("/_state/view").then((res) => res.ok ? res.json() : null).catch(() => null)
+      ]);
+      if (settings)
+        APP_SETTINGS = settings;
+      if (view)
+        VIEW_STATE = view;
+    }
+    function routeFromLocation() {
       const savedLanguage = viewerLanguageFromSearch(window.location.search) || savedViewerLanguage();
-      const parsedRoute = parseRoute(window.location.pathname, window.location.search, fallbackRange);
+      const parsedRoute = parseRoute(window.location.pathname, window.location.search, savedRange());
       const routeBase = parsedRoute.screen === "unknown" ? { screen: "diff", range: parsedRoute.range } : parsedRoute;
-      const route = routeBase.screen === "help" && !new URLSearchParams(window.location.search).has("lang") ? { ...routeBase, lang: savedLanguage } : routeBase;
+      return routeBase.screen === "help" && !new URLSearchParams(window.location.search).has("lang") ? { ...routeBase, lang: savedLanguage } : routeBase;
+    }
+    function applyPersistedStateToState() {
+      const route = routeFromLocation();
+      const savedLanguage = viewerLanguageFromSearch(window.location.search) || savedViewerLanguage();
+      STATE.layout = savedLayout();
+      STATE.theme = savedTheme();
+      STATE.language = savedLanguage;
+      STATE.sbView = savedSidebarView();
+      STATE.sbWidth = savedNumber(APP_SETTINGS.sidebarWidth, 308, 180, 900);
+      STATE.historyWidth = savedNumber(APP_SETTINGS.historyWidth, 320, 220, 640);
+      STATE.sidebarHidden = APP_SETTINGS.sidebarHidden === true;
+      STATE.collapsedDirs = new Set(VIEW_STATE.collapsedDirs || []);
+      STATE.viewedFiles = new Set(VIEW_STATE.viewedFiles || []);
+      STATE.ignoreWs = APP_SETTINGS.ignoreWhitespace === undefined ? true : APP_SETTINGS.ignoreWhitespace === true;
+      STATE.hideTests = APP_SETTINGS.hideTests === true;
+      STATE.syntaxHighlight = APP_SETTINGS.syntaxHighlight !== false;
+      STATE.autoUpdate = APP_SETTINGS.autoUpdate !== false;
+      STATE.route = route;
+      STATE.from = route.range.from;
+      STATE.to = route.range.to;
+      STATE.repoRef = route.screen === "repo" ? route.ref : "worktree";
+    }
+    async function loadInitialState() {
+      await Promise.all([loadSettings(), loadPersistedState()]);
+      applyPersistedStateToState();
+      applySidebarFontSize();
+      applyCodeFontSize();
+      applySidebarHidden(STATE.sidebarHidden, { persist: false });
+      applyHistoryWidth(STATE.historyWidth, false);
+      applySidebarWidth(STATE.sbWidth, { persist: false });
+      setLayout(STATE.layout, false);
+      applyTheme();
+      localizeViewerChrome();
+    }
+    const STATE = (() => {
+      const route = routeFromLocation();
       return {
-        layout: localStorage.getItem("gdp:layout") || "side-by-side",
-        theme: localStorage.getItem("gdp:theme") || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"),
-        language: savedLanguage,
-        sbView: localStorage.getItem("gdp:sbview") || "tree",
-        sbWidth: parseInt(localStorage.getItem("gdp:sbwidth") ?? "", 10) || 308,
-        historyWidth: parseInt(localStorage.getItem("gdp:historywidth") ?? "", 10) || 320,
-        sidebarHidden: localStorage.getItem("gdp:sidebar-hidden") === "1",
-        collapsedDirs: new Set(JSON.parse(readScopedStorage("gdp:collapsed-dirs") || "[]")),
-        ignoreWs: igRaw === null ? true : igRaw === "1",
+        layout: savedLayout(),
+        theme: savedTheme(),
+        language: viewerLanguageFromSearch(window.location.search) || savedViewerLanguage(),
+        sbView: savedSidebarView(),
+        sbWidth: savedNumber(APP_SETTINGS.sidebarWidth, 308, 180, 900),
+        historyWidth: savedNumber(APP_SETTINGS.historyWidth, 320, 220, 640),
+        sidebarHidden: APP_SETTINGS.sidebarHidden === true,
+        collapsedDirs: new Set(VIEW_STATE.collapsedDirs),
+        ignoreWs: APP_SETTINGS.ignoreWhitespace === undefined ? true : APP_SETTINGS.ignoreWhitespace === true,
         from: route.range.from,
         to: route.range.to,
         collapsed: false,
         files: [],
         activeFile: null,
-        hideTests: readScopedStorage("gdp:hide-tests") === "1",
-        syntaxHighlight: localStorage.getItem("gdp:syntax-highlight") !== "0",
-        viewedFiles: new Set(JSON.parse(readScopedStorage("gdp:viewed-files") || "[]")),
+        hideTests: APP_SETTINGS.hideTests === true,
+        syntaxHighlight: APP_SETTINGS.syntaxHighlight !== false,
+        viewedFiles: new Set(VIEW_STATE.viewedFiles),
         route,
         repoRef: route.screen === "repo" ? route.ref : "worktree",
-        autoUpdate: localStorage.getItem("gdp:auto-update") !== "0"
+        autoUpdate: APP_SETTINGS.autoUpdate !== false
       };
     })();
     let highlightConfigured = false;
@@ -23564,10 +23763,20 @@ code-viewer annotate add-db --db app.db --tab query \\
       fileBadge: (status) => DIFF_VIEW.fileBadge(status),
       fileEntryIcon: () => REPO_VIEW.fileEntryIcon(),
       applyViewedState: () => DIFF_VIEW.applyViewedState(),
-      persistCollapsedDirs: () => writeScopedStorage("gdp:collapsed-dirs", JSON.stringify([...STATE.collapsedDirs])),
+      persistCollapsedDirs: ({ added = [], removed = [] }) => {
+        if (added.length === 0 && removed.length === 0)
+          return;
+        patchViewState({
+          addedCollapsedDirs: added,
+          removedCollapsedDirs: removed
+        });
+      },
       appendScopeParams,
       createOpenPathButton,
       normalizeViewerFontSize,
+      getSidebarFontSize: savedSidebarFontSizeSetting,
+      persistSidebarHidden: (hidden) => patchSettings({ sidebarHidden: hidden }),
+      persistSidebarWidth: (width) => patchSettings({ sidebarWidth: width }),
       scheduleMainSurfaceFocus,
       setChevronIcon,
       trackLoad,
@@ -23591,7 +23800,6 @@ code-viewer annotate add-db --db app.db --tab query \\
       isRepositorySidebarMode,
       placeSidebarToggle,
       applySidebarHidden,
-      toggleSidebarHidden,
       applySidebarWidth,
       applySidebarFontSize,
       savedSidebarFontSize,
@@ -24055,7 +24263,7 @@ code-viewer annotate add-db --db app.db --tab query \\
       const next = normalizeViewerLanguage(language);
       STATE.language = next;
       if (persist)
-        localStorage.setItem(VIEWER_LANGUAGE_STORAGE_KEY, next);
+        patchSettings({ language: next });
       const select = document.querySelector("#viewer-language");
       if (select)
         select.value = next;
@@ -24139,9 +24347,10 @@ code-viewer annotate add-db --db app.db --tab query \\
       });
       return highlightLoadPromise;
     }
-    function setLayout(layout) {
+    function setLayout(layout, persist = true) {
       STATE.layout = layout;
-      localStorage.setItem("gdp:layout", layout);
+      if (persist)
+        patchSettings({ layout });
       $$("#topbar .seg button").forEach((b2) => {
         b2.classList.toggle("active", b2.dataset.layout === layout);
       });
@@ -24219,24 +24428,46 @@ code-viewer annotate add-db --db app.db --tab query \\
       const viewerLanguage = document.querySelector("#viewer-language");
       if (!input || !excludeInput || !sidebarFontSize || !codeFontSize || !viewerLanguage)
         return;
-      setViewerLanguage(normalizeViewerLanguage(viewerLanguage.value));
-      localStorage.setItem(SIDEBAR_FONT_SIZE_KEY, normalizeViewerFontSize(sidebarFontSize.value));
-      localStorage.setItem(CODE_FONT_SIZE_STORAGE_KEY, normalizeViewerFontSize(codeFontSize.value));
+      const nextSidebarFontSize = normalizeViewerFontSize(sidebarFontSize.value);
+      const nextCodeFontSize = normalizeViewerFontSize(codeFontSize.value);
+      const nextScopeOmitDirs = normalizeScopeOmitDirs(input.value);
+      const nextScopeExcludeNames = normalizeScopeExcludeNames(excludeInput.value);
+      setViewerLanguage(normalizeViewerLanguage(viewerLanguage.value), false);
+      mergeLocalSettings({
+        sidebarFontSize: nextSidebarFontSize,
+        codeFontSize: nextCodeFontSize,
+        scopeOmitDirs: nextScopeOmitDirs,
+        scopeExcludeNames: nextScopeExcludeNames
+      });
       applySidebarFontSize();
       applyCodeFontSize();
-      localStorage.setItem(scopeOmitDirsStorageKey(), JSON.stringify(normalizeScopeOmitDirs(input.value)));
-      localStorage.setItem(scopeExcludeNamesStorageKey(), JSON.stringify(normalizeScopeExcludeNames(excludeInput.value)));
+      patchSettings({
+        language: STATE.language,
+        sidebarFontSize: nextSidebarFontSize,
+        codeFontSize: nextCodeFontSize,
+        scopeOmitDirs: nextScopeOmitDirs,
+        scopeExcludeNames: nextScopeExcludeNames
+      });
       closeScopeSettings();
       refreshRepositoryTreeAfterSettings();
     }
     function resetScopeSettings() {
-      setViewerLanguage("en");
-      localStorage.removeItem(SIDEBAR_FONT_SIZE_KEY);
-      localStorage.removeItem(CODE_FONT_SIZE_STORAGE_KEY);
+      setViewerLanguage("en", false);
+      mergeLocalSettings({
+        sidebarFontSize: null,
+        codeFontSize: null,
+        scopeOmitDirs: null,
+        scopeExcludeNames: null
+      });
       applySidebarFontSize("regular");
       applyCodeFontSize("regular");
-      localStorage.removeItem(scopeOmitDirsStorageKey());
-      localStorage.removeItem(scopeExcludeNamesStorageKey());
+      patchSettings({
+        language: STATE.language,
+        sidebarFontSize: null,
+        codeFontSize: null,
+        scopeOmitDirs: null,
+        scopeExcludeNames: null
+      });
       closeScopeSettings();
       refreshRepositoryTreeAfterSettings();
     }
@@ -24569,7 +24800,7 @@ code-viewer annotate add-db --db app.db --tab query \\
       setProjectName,
       getProjectName: () => PROJECT_NAME,
       createOpenPathButton,
-      persistViewedFiles: () => writeScopedStorage("gdp:viewed-files", JSON.stringify([...STATE.viewedFiles])),
+      persistViewedFiles: (path, viewed) => patchViewState(viewed ? { addedViewedFiles: [path] } : { removedViewedFiles: [path] }),
       applyHideTests: () => applyHideTests(),
       getServerGeneration: () => SERVER_GENERATION,
       setServerGeneration: (generation) => {
@@ -24595,14 +24826,14 @@ code-viewer annotate add-db --db app.db --tab query \\
     } = DIFF_VIEW;
     applySidebarFontSize();
     applyCodeFontSize();
-    applySidebarHidden();
+    applySidebarHidden(STATE.sidebarHidden, { persist: false });
     observeSidebarHeaderHeight();
     hydrateRefSelectorMounts();
     setSidebarTreeActionIcons();
     $$(".sb-view-seg button").forEach((b2) => {
       b2.addEventListener("click", () => {
         STATE.sbView = b2.dataset.view || "tree";
-        localStorage.setItem("gdp:sbview", STATE.sbView);
+        patchSettings({ sidebarView: STATE.sbView });
         if (getSidebarFiles().length)
           renderSidebar(getSidebarFiles(), getSidebarOnFileClick());
       });
@@ -24636,14 +24867,15 @@ code-viewer annotate add-db --db app.db --tab query \\
       else
         focusMainPanel();
     });
-    function applyHistoryWidth(w) {
+    function applyHistoryWidth(w, persist = true) {
       const cw = Math.max(220, Math.min(640, w));
       document.documentElement.style.setProperty("--history-w", `${cw}px`);
       STATE.historyWidth = cw;
-      localStorage.setItem("gdp:historywidth", String(cw));
+      if (persist)
+        patchSettings({ historyWidth: cw });
     }
-    applyHistoryWidth(STATE.historyWidth);
-    applySidebarWidth(STATE.sbWidth);
+    applyHistoryWidth(STATE.historyWidth, false);
+    applySidebarWidth(STATE.sbWidth, { persist: false });
     (function trackSidebarInteraction() {
       const sb = document.getElementById("sidebar");
       if (!sb)
@@ -24742,7 +24974,7 @@ code-viewer annotate add-db --db app.db --tab query \\
     });
     $("#theme").addEventListener("click", () => {
       STATE.theme = STATE.theme === "dark" ? "light" : "dark";
-      localStorage.setItem("gdp:theme", STATE.theme);
+      patchSettings({ theme: STATE.theme });
       applyTheme();
     });
     function jumpToActiveOrFirstFilteredItem() {
@@ -25034,7 +25266,7 @@ code-viewer annotate add-db --db app.db --tab query \\
         return null;
       });
     }
-    loadSettings().finally(() => {
+    loadInitialState().finally(() => {
       if (STATE.route.screen === "help") {
         setStatus("live");
         renderHelpPage();
@@ -25066,8 +25298,7 @@ code-viewer annotate add-db --db app.db --tab query \\
       const wasDatabaseRoute = STATE.route.screen === "database";
       STATE.from = from || "";
       STATE.to = to || "";
-      writeScopedStorage("gdp:from", STATE.from);
-      writeScopedStorage("gdp:to", STATE.to);
+      patchSettings({ range: currentRange() });
       syncRefInputs();
       const range = currentRange();
       if (STATE.route.screen === "file") {
@@ -25213,6 +25444,7 @@ code-viewer annotate add-db --db app.db --tab query \\
       applySourceRouteToShell();
     }
     window.addEventListener("popstate", applyRouteFromLocation);
+    window.addEventListener("pagehide", () => flushViewStatePatch(true));
     document.querySelectorAll(".app-menu-item, .global-help-link").forEach((link2) => {
       if (link2.target === "_blank")
         return;
@@ -25234,13 +25466,14 @@ code-viewer annotate add-db --db app.db --tab query \\
     applyIgnoreWs();
     $("#ignore-ws").addEventListener("click", () => {
       STATE.ignoreWs = !STATE.ignoreWs;
-      writeScopedStorage("gdp:ignore-ws", STATE.ignoreWs ? "1" : "0");
+      patchSettings({ ignoreWhitespace: STATE.ignoreWs });
       applyIgnoreWs();
       load();
     });
-    function setSyntaxHighlight(on) {
+    function setSyntaxHighlight(on, persist = true) {
       STATE.syntaxHighlight = on;
-      localStorage.setItem("gdp:syntax-highlight", on ? "1" : "0");
+      if (persist)
+        patchSettings({ syntaxHighlight: on });
       setHighlightButton(on && getHljs() ? "loaded" : "idle");
       if (on) {
         loadSyntaxHighlighter().then((hljsRef) => {
@@ -25257,7 +25490,7 @@ code-viewer annotate add-db --db app.db --tab query \\
       setSyntaxHighlight(!STATE.syntaxHighlight);
     });
     if (STATE.syntaxHighlight)
-      setSyntaxHighlight(true);
+      setSyntaxHighlight(true, false);
     $("#reload-prom").addEventListener("click", () => {
       const btn = $("#reload-prom");
       btn.classList.add("spinning");
@@ -25265,10 +25498,6 @@ code-viewer annotate add-db --db app.db --tab query \\
         setTimeout(() => btn.classList.remove("spinning"), 200);
       });
     });
-    window.addEventListener("storage", (e2) => {
-      if (e2.key === "gdp:syntax-highlight")
-        setSyntaxHighlight(e2.newValue !== "0");
-    });
     function applyHideTests() {
       const btn = $("#hide-tests");
       if (btn)
@@ -25291,7 +25520,7 @@ code-viewer annotate add-db --db app.db --tab query \\
     applyHideTests();
     $("#hide-tests").addEventListener("click", () => {
       STATE.hideTests = !STATE.hideTests;
-      writeScopedStorage("gdp:hide-tests", STATE.hideTests ? "1" : "0");
+      patchSettings({ hideTests: STATE.hideTests });
       applyHideTests();
     });
     ANNOTATIONS_UI = createAnnotationsUi({
@@ -25312,6 +25541,10 @@ code-viewer annotate add-db --db app.db --tab query \\
       currentRange,
       getFiles: () => STATE.files,
       getRoute: () => STATE.route,
+      getAnnotationPanelOpen: () => APP_SETTINGS.annotationPanelOpen === true,
+      setAnnotationPanelOpenState: (open) => patchSettings({ annotationPanelOpen: open }),
+      getAnnotationFollow: () => APP_SETTINGS.annotationFollow !== false,
+      setAnnotationFollow: (follow) => patchSettings({ annotationFollow: follow }),
       leaveDatabaseView: () => {
         DATABASE_VIEW.suspend();
       },
@@ -25326,8 +25559,7 @@ code-viewer annotate add-db --db app.db --tab query \\
       setRange: (from, to) => {
         STATE.from = from;
         STATE.to = to;
-        writeScopedStorage("gdp:from", from);
-        writeScopedStorage("gdp:to", to);
+        patchSettings({ range: currentRange() });
       }
     });
     replaceUrlWithCurrentRoute();
@@ -25338,7 +25570,11 @@ code-viewer annotate add-db --db app.db --tab query \\
       setAnnotationPanelOpen: (open) => ANNOTATIONS_UI?.setAnnotationPanelOpen(open),
       onAnnotationsChanged: (cb) => ANNOTATIONS_UI?.onAnnotationsChanged(cb),
       onAnnotationOpened: (cb) => ANNOTATIONS_UI?.onAnnotationOpened(cb),
-      getActiveAnnotationId: () => ANNOTATIONS_UI ? ANNOTATIONS_UI.getActiveAnnotationId() : null
+      getActiveAnnotationId: () => ANNOTATIONS_UI ? ANNOTATIONS_UI.getActiveAnnotationId() : null,
+      getMuted: () => APP_SETTINGS.annotationMuted === true,
+      setMuted: (muted) => patchSettings({ annotationMuted: muted }),
+      getRate: () => APP_SETTINGS.annotationRate,
+      setRate: (rate) => patchSettings({ annotationRate: rate })
     });
     const qhCloseBtn = document.getElementById("query-history-panel-close");
     if (qhCloseBtn) {
@@ -25351,12 +25587,11 @@ code-viewer annotate add-db --db app.db --tab query \\
       const handle = document.getElementById("query-history-resizer");
       if (!panel || !handle)
         return;
-      const STORAGE_KEY = "gdp:qh-panel-width";
       const MIN_W = 280;
       const MAX_W = 800;
-      const saved = localStorage.getItem(STORAGE_KEY);
-      if (saved) {
-        const w = Math.max(MIN_W, Math.min(MAX_W, Number(saved) || 420));
+      const saved = APP_SETTINGS.queryHistoryPanelWidth;
+      if (typeof saved === "number") {
+        const w = Math.max(MIN_W, Math.min(MAX_W, saved || 420));
         panel.style.width = `${w}px`;
       }
       let dragging = false;
@@ -25380,7 +25615,7 @@ code-viewer annotate add-db --db app.db --tab query \\
           return;
         dragging = false;
         document.body.classList.remove("db-resizing");
-        localStorage.setItem(STORAGE_KEY, String(panel.offsetWidth));
+        patchSettings({ queryHistoryPanelWidth: panel.offsetWidth });
       });
     })();
     function applyAutoUpdateButton() {
@@ -25395,7 +25630,7 @@ code-viewer annotate add-db --db app.db --tab query \\
     }
     function setAutoUpdate(on) {
       STATE.autoUpdate = on;
-      localStorage.setItem("gdp:auto-update", on ? "1" : "0");
+      patchSettings({ autoUpdate: on });
       applyAutoUpdateButton();
       if (on) {
         if (bannerPendingPaths) {