@buoy-gg/jotai 7.0.17 → 7.0.18

package/lib/commonjs/jotai/components/JotaiAtomBrowser.js

@@ -20,6 +20,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 function getValuePreview(atom) {
   try {
     const value = atom.getValue();
+    if (value && typeof value === "object" && value.__buoyValueOnDevice === true) {
+      return "on device";
+    }
     if (value === undefined) return "undefined";
     if (value === null) return "null";
     if (Array.isArray(value)) {
@@ -125,7 +128,8 @@ function EmptyBrowserState() {
 function JotaiAtomBrowser({
   atoms,
   searchQuery,
-  onViewHistory
+  onViewHistory,
+  onAtomExpand
 }) {
   const [expandedAtom, setExpandedAtom] = (0, _react.useState)(null);
   const filteredAtoms = (0, _react.useMemo)(() => {
@@ -134,8 +138,12 @@ function JotaiAtomBrowser({
     return atoms.filter(a => a.label.toLowerCase().includes(search));
   }, [atoms, searchQuery]);
   const handleAtomPress = (0, _react.useCallback)(atom => {
-    setExpandedAtom(prev => prev === atom.label ? null : atom.label);
-  }, []);
+    setExpandedAtom(prev => {
+      const next = prev === atom.label ? null : atom.label;
+      if (next) onAtomExpand?.(atom.label);
+      return next;
+    });
+  }, [onAtomExpand]);
   if (filteredAtoms.length === 0 && !searchQuery) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyBrowserState, {});
   }

package/lib/commonjs/jotai/components/JotaiAtomDetailContent.js

@@ -25,7 +25,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 
 // ---- View Toggle ----
-
 const VIEW_CONFIGS = [{
   key: "change",
   label: "CHANGE",
@@ -277,9 +276,11 @@ function JotaiAtomDetailContent({
   changes,
   selectedIndex,
   onIndexChange,
-  disableInternalFooter = false
+  disableInternalFooter = false,
+  initialView = "change"
 }) {
-  const [activeView, setActiveView] = (0, _react.useState)("change");
+  // View state (initialView seeds it once; taps own it afterwards)
+  const [activeView, setActiveView] = (0, _react.useState)(initialView);
   const [diffMode, setDiffMode] = (0, _react.useState)("tree");
   const totalChanges = changes.length;
   const atomColor = _jotaiStateStore.jotaiStateStore.getAtomColor(change.atomLabel);

package/lib/commonjs/jotai/components/JotaiModal.js

@@ -47,11 +47,16 @@ function JotaiModal({
   onBack,
   onMinimize,
   enableSharedModalDimensions = false,
-  inline = false
+  inline = false,
+  initialTab,
+  initialSelectedChangeId,
+  initialDetailView,
+  onChangeSelect,
+  onAtomExpand
 }) {
   const isPro = (0, _license.useIsPro)();
   const [showProModal, setShowProModal] = (0, _react.useState)(false);
-  const [activeTab, setActiveTab] = (0, _react.useState)("atoms");
+  const [activeTab, setActiveTab] = (0, _react.useState)(initialTab ?? "atoms");
   const [selectedHistoryAtom, setSelectedHistoryAtom] = (0, _react.useState)(null);
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
   const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
@@ -103,6 +108,30 @@ function JotaiModal({
   }, [selectedChangeId, activeChanges]);
   const selectedChange = selectedChangeIndex !== null ? activeChanges[selectedChangeIndex] : null;
 
+  // Notify the host on selection (keyed by change id so re-renders with the
+  // same selection don't re-fire; remote mirrors fetch atom values here).
+  const lastNotifiedSelectionRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!onChangeSelect) return;
+    const id = selectedChange?.id ?? null;
+    if (id === null || id === lastNotifiedSelectionRef.current) return;
+    lastNotifiedSelectionRef.current = id;
+    onChangeSelect(selectedChange);
+  }, [selectedChange, onChangeSelect]);
+
+  // Deep link into a change's detail (see initialSelectedChangeId). Applied
+  // at most once per id, so the list re-rendering — or the user pressing Back
+  // — never re-opens it.
+  const appliedInitialSelectionRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!initialSelectedChangeId) return;
+    if (appliedInitialSelectionRef.current === initialSelectedChangeId) return;
+    const exists = activeChanges.some(c => c.id === initialSelectedChangeId);
+    if (!exists) return;
+    appliedInitialSelectionRef.current = initialSelectedChangeId;
+    setSelectedChangeId(initialSelectedChangeId);
+  }, [initialSelectedChangeId, activeChanges]);
+
   // Search state
   const [searchText, setSearchText] = (0, _react.useState)("");
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
@@ -343,7 +372,8 @@ function JotaiModal({
         changes: activeChanges,
         selectedIndex: selectedChangeIndex,
         onIndexChange: handleIndexChange,
-        disableInternalFooter: true
+        disableInternalFooter: true,
+        initialView: initialDetailView
       });
     }
     if (selectedHistoryAtom) {
@@ -376,7 +406,8 @@ function JotaiModal({
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomBrowser.JotaiAtomBrowser, {
         atoms: displayedAtoms,
         searchQuery: searchText,
-        onViewHistory: handleViewHistory
+        onViewHistory: handleViewHistory,
+        onAtomExpand: onAtomExpand
       });
     }
 

package/lib/commonjs/jotai/sync/jotaiSyncAdapter.js

@@ -3,8 +3,62 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.jotaiSyncAdapter = void 0;
+exports.jotaiSyncAdapter = exports.VALUE_ON_DEVICE = void 0;
 var _jotaiStateStore = require("../utils/jotaiStateStore");
+/**
+ * Sentinel used in WIRE-FORM snapshots in place of raw prevValue/nextValue.
+ * Same hazard as redux/zustand: up to 200 changes × 2 values on every
+ * snapshot. Dashboards fetch values via `getChangeDetail`.
+ */
+const VALUE_ON_DEVICE = exports.VALUE_ON_DEVICE = Object.freeze({
+  __buoyValueOnDevice: true,
+  note: "Atom values stay on the device — fetched on demand via getChangeDetail / getAtomValue."
+});
+const MAX_CHANGE_DETAIL_BYTES = 8 * 1024 * 1024;
+const MAX_WIRE_PAYLOAD_BYTES = 16 * 1024;
+function jsonLongerThan(value, limit) {
+  let bytes = 0;
+  const stack = [value];
+  const seen = new Set();
+  while (stack.length > 0) {
+    if (bytes > limit) return true;
+    const v = stack.pop();
+    if (v === null || v === undefined) bytes += 4;else if (typeof v === "string") bytes += v.length + 2;else if (typeof v === "number") bytes += 8;else if (typeof v === "boolean") bytes += 5;else if (typeof v === "object") {
+      if (seen.has(v)) continue;
+      seen.add(v);
+      if (Array.isArray(v)) {
+        bytes += 2 + v.length;
+        for (let i = 0; i < v.length; i++) stack.push(v[i]);
+      } else {
+        bytes += 2;
+        for (const k in v) {
+          bytes += k.length + 4;
+          stack.push(v[k]);
+        }
+      }
+    } else bytes += 4;
+  }
+  return bytes > limit;
+}
+function toWireChange(change) {
+  return {
+    ...change,
+    prevValue: VALUE_ON_DEVICE,
+    nextValue: VALUE_ON_DEVICE
+  };
+}
+function toWireValue(value) {
+  try {
+    JSON.stringify(value);
+  } catch {
+    return VALUE_ON_DEVICE;
+  }
+  if (jsonLongerThan(value, MAX_WIRE_PAYLOAD_BYTES)) {
+    return VALUE_ON_DEVICE;
+  }
+  return value;
+}
+
 /**
  * Sync adapter for the jotai tool, consumed by @buoy-gg/external-sync's
  * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
@@ -15,12 +69,19 @@ var _jotaiStateStore = require("../utils/jotaiStateStore");
  * already records. The snapshot carries both the change timeline and the
  * atom registry (with each atom's current value) so the dashboard can render
  * the atom browser.
+ *
+ * v2: change-log prevValue/nextValue are replaced with on-device markers.
+ * Dashboards fetch values via `getChangeDetail`. Oversized / unserializable
+ * `atoms[].currentValue` uses the same marker and is fetched via `getAtomValue`.
  */
 const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
-  version: 1,
+  version: 2,
   getSnapshot: () => ({
-    changes: _jotaiStateStore.jotaiStateStore.getAtomChanges(),
-    atoms: _jotaiStateStore.jotaiStateStore.getAtomSnapshots()
+    changes: _jotaiStateStore.jotaiStateStore.getAtomChanges().map(toWireChange),
+    atoms: _jotaiStateStore.jotaiStateStore.getAtomSnapshots().map(atom => ({
+      ...atom,
+      currentValue: toWireValue(atom.currentValue)
+    }))
   }),
   subscribe: onChange => {
     const unsubscribeChanges = _jotaiStateStore.jotaiStateStore.subscribe(onChange);
@@ -34,6 +95,78 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
     clearEvents: () => {
       _jotaiStateStore.jotaiStateStore.clearAtomChanges();
     },
+    /**
+     * On-demand detail: one change's real prevValue/nextValue.
+     * The per-snapshot stream stays value-free; this is the explicit,
+     * size-guarded channel for the detail pane.
+     */
+    getChangeDetail: params => {
+      const {
+        id
+      } = params ?? {};
+      if (!id) return {
+        found: false,
+        reason: "missing id"
+      };
+      const change = _jotaiStateStore.jotaiStateStore.getAtomChangeById(id);
+      if (!change) return {
+        found: false,
+        reason: "unknown id"
+      };
+      const cappedNote = {
+        __buoyTruncated: true,
+        note: `Exceeds the ${MAX_CHANGE_DETAIL_BYTES / (1024 * 1024)}MB detail limit — inspect it on-device.`
+      };
+      const cap = value => jsonLongerThan(value, MAX_CHANGE_DETAIL_BYTES) ? cappedNote : value;
+      return {
+        found: true,
+        id,
+        prevValue: cap(change.prevValue),
+        nextValue: cap(change.nextValue)
+      };
+    },
+    /**
+     * On-demand current value for one atom. Wire-form snapshots replace
+     * oversized / unserializable `currentValue` with VALUE_ON_DEVICE.
+     */
+    getAtomValue: params => {
+      const {
+        label
+      } = params ?? {};
+      if (!label) return {
+        found: false,
+        reason: "missing label"
+      };
+      const atom = _jotaiStateStore.jotaiStateStore.getAtom(label);
+      if (!atom) return {
+        found: false,
+        reason: "unknown label"
+      };
+      let currentValue;
+      try {
+        currentValue = atom.getValue();
+      } catch {
+        currentValue = undefined;
+      }
+      const cappedNote = {
+        __buoyTruncated: true,
+        note: `Exceeds the ${MAX_CHANGE_DETAIL_BYTES / (1024 * 1024)}MB detail limit — inspect it on-device.`
+      };
+      try {
+        JSON.stringify(currentValue);
+      } catch {
+        return {
+          found: true,
+          label,
+          currentValue: VALUE_ON_DEVICE
+        };
+      }
+      return {
+        found: true,
+        label,
+        currentValue: jsonLongerThan(currentValue, MAX_CHANGE_DETAIL_BYTES) ? cappedNote : currentValue
+      };
+    },
     /**
      * Compact current-value reader for a remote driver (MCP/LLM): registered
      * atoms with light metadata; each atom's `currentValue` stays on the device
@@ -77,7 +210,8 @@ const jotaiSyncAdapter = exports.jotaiSyncAdapter = {
       const {
         label,
         value
-      } = params;
+      } = params ?? {};
+      if (!label) throw new Error("setAtom requires a `label`");
       _jotaiStateStore.jotaiStateStore.setAtomValue(label, value);
     }
   }

package/lib/commonjs/jotai/utils/jotaiStateStore.js

@@ -290,17 +290,83 @@ class JotaiStateStore {
    */
   replaceFromSnapshot(changes, atomSnapshots) {
     if (!this.isEnabled) return;
-    this.atomChanges = changes.slice(0, this.maxChanges);
-    this.atoms = new Map(atomSnapshots.map(snapshot => [snapshot.label, {
-      label: snapshot.label,
-      changeCount: snapshot.changeCount,
-      color: snapshot.color,
-      getValue: () => snapshot.currentValue
-    }]));
+
+    // Preserve values a remote mirror already hydrated — wire-form snapshots
+    // always carry markers, and a later snapshot must not blank the detail pane.
+    const hydrated = new Map();
+    for (const existing of this.atomChanges) {
+      const prev = existing.prevValue;
+      if (!prev || prev.__buoyValueOnDevice !== true) {
+        hydrated.set(existing.id, existing);
+      }
+    }
+    this.atomChanges = changes.slice(0, this.maxChanges).map(change => {
+      const kept = hydrated.get(change.id);
+      const incoming = change.prevValue;
+      return kept && incoming?.__buoyValueOnDevice === true ? {
+        ...change,
+        prevValue: kept.prevValue,
+        nextValue: kept.nextValue
+      } : change;
+    });
+
+    // Preserve currentValue a remote mirror already hydrated — oversized
+    // atoms arrive as VALUE_ON_DEVICE markers on every snapshot.
+    const hydratedAtoms = new Map();
+    for (const [label, atom] of this.atoms) {
+      try {
+        const value = atom.getValue();
+        const marker = value;
+        if (!marker || marker.__buoyValueOnDevice !== true) {
+          hydratedAtoms.set(label, value);
+        }
+      } catch {
+        // ignore
+      }
+    }
+    this.atoms = new Map(atomSnapshots.map(snapshot => {
+      const incoming = snapshot.currentValue;
+      const kept = hydratedAtoms.get(snapshot.label);
+      const currentValue = kept !== undefined && incoming?.__buoyValueOnDevice === true ? kept : snapshot.currentValue;
+      return [snapshot.label, {
+        label: snapshot.label,
+        changeCount: snapshot.changeCount,
+        color: snapshot.color,
+        getValue: () => currentValue
+      }];
+    }));
     this.notifyListeners();
     this.notifyAtomListeners();
   }
 
+  /**
+   * Hydrate one mirrored change with real values fetched on demand from the
+   * device via the adapter's `getChangeDetail`. Remote-mirror (desktop) only.
+   */
+  hydrateChange(id, patch) {
+    const index = this.atomChanges.findIndex(c => c.id === id);
+    if (index === -1) return;
+    this.atomChanges = [...this.atomChanges.slice(0, index), {
+      ...this.atomChanges[index],
+      ...patch
+    }, ...this.atomChanges.slice(index + 1)];
+    this.notifyListeners();
+  }
+
+  /**
+   * Hydrate one mirrored atom's currentValue fetched on demand from the
+   * device via the adapter's `getAtomValue`. Remote-mirror (desktop) only.
+   */
+  hydrateAtomValue(label, currentValue) {
+    const atom = this.atoms.get(label);
+    if (!atom) return;
+    this.atoms.set(label, {
+      ...atom,
+      getValue: () => currentValue
+    });
+    this.notifyAtomListeners();
+  }
+
   // ---- Atom Registry ----
 
   registerAtom(label, getValue, setValue) {

package/lib/commonjs/jotai/utils/snapshotProvider.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _jotaiStateStore = require("./jotaiStateStore");
 /**
  * Time Machine snapshot provider for Jotai.
@@ -62,8 +63,12 @@ async function capture() {
     warnings
   };
 }
-async function restore(data) {
+async function restore(data, options) {
   const snapshot = data;
+  const excludedSet = new Set(options?.excludeKeys ?? []);
+  const includedSet = options?.includeKeys ? new Set(options.includeKeys) : null;
+  const touch = key => !excludedSet.has(key) && (!includedSet || includedSet.has(key));
+  let excludedHits = 0;
   const result = {
     ok: true,
     applied: 0,
@@ -80,6 +85,10 @@ async function restore(data) {
   }
   let derived = 0;
   for (const [label, entry] of Object.entries(snapshot.atoms)) {
+    if (!touch(label)) {
+      excludedHits += 1;
+      continue;
+    }
     if (!entry.writable) {
       derived += 1;
       continue;
@@ -113,12 +122,112 @@ async function restore(data) {
   if (derived > 0) {
     result.warnings.push(`${derived} derived atom(s) left to recompute`);
   }
+  if (excludedHits > 0) {
+    result.warnings.push(`${excludedHits} atom(s) excluded by you`);
+  }
   return result;
 }
+
+/** Per-atom restore preview. `base` omitted = compare against live atoms. */
+async function previewItems(target, base) {
+  const targetAtoms = target?.atoms ?? {};
+  const liveMode = base === undefined;
+  const baseAtoms = {};
+  if (liveMode) {
+    for (const info of _jotaiStateStore.jotaiStateStore.getAtoms()) {
+      try {
+        baseAtoms[info.label] = {
+          value: info.getValue(),
+          writable: Boolean(info.setValue)
+        };
+      } catch {
+        // unreadable atom — treated as absent
+      }
+    }
+  } else {
+    Object.assign(baseAtoms, base?.atoms ?? {});
+  }
+  const items = [];
+  const notes = [];
+  const labels = new Set([...Object.keys(baseAtoms), ...Object.keys(targetAtoms)]);
+  for (const label of labels) {
+    const inTarget = label in targetAtoms;
+    if (!inTarget) {
+      if (liveMode) notes.push(`atom "${label}" not in snapshot — untouched`);else items.push({
+        key: label,
+        label,
+        verdict: "removed",
+        oldValue: baseAtoms[label]?.value
+      });
+      continue;
+    }
+    const entry = targetAtoms[label];
+    const equal = label in baseAtoms && (0, _dataViewer.boundedDeepEqual)(baseAtoms[label].value, entry.value);
+    if (!entry.writable) {
+      items.push({
+        key: label,
+        label,
+        verdict: equal ? "unchanged" : "recomputes",
+        reason: equal ? undefined : "derived atom — recomputes from its sources",
+        oldValue: baseAtoms[label]?.value,
+        newValue: entry.value
+      });
+      continue;
+    }
+    if (liveMode) {
+      const info = _jotaiStateStore.jotaiStateStore.getAtom(label);
+      if (!info) {
+        items.push({
+          key: label,
+          label,
+          verdict: "wont-apply",
+          reason: "atom not registered (renamed, or unwatched since snapshot?)"
+        });
+        continue;
+      }
+      if (!info.setValue) {
+        items.push({
+          key: label,
+          label,
+          verdict: "wont-apply",
+          reason: "atom is now read-only (derived)"
+        });
+        continue;
+      }
+    }
+    if (!(label in baseAtoms)) {
+      items.push({
+        key: label,
+        label,
+        verdict: "added",
+        newValue: entry.value
+      });
+    } else if (equal) {
+      items.push({
+        key: label,
+        label,
+        verdict: "unchanged"
+      });
+    } else {
+      items.push({
+        key: label,
+        label,
+        verdict: "changed",
+        oldValue: baseAtoms[label].value,
+        newValue: entry.value
+      });
+    }
+  }
+  return {
+    items,
+    notes
+  };
+}
 (0, _sharedUi.registerStateSnapshotProvider)({
   id: "jotai",
   label: "Jotai",
   status,
   capture,
-  restore
+  restore,
+  previewItems
 });

package/lib/module/jotai/components/JotaiAtomBrowser.js

@@ -16,6 +16,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getValuePreview(atom) {
   try {
     const value = atom.getValue();
+    if (value && typeof value === "object" && value.__buoyValueOnDevice === true) {
+      return "on device";
+    }
     if (value === undefined) return "undefined";
     if (value === null) return "null";
     if (Array.isArray(value)) {
@@ -121,7 +124,8 @@ function EmptyBrowserState() {
 export function JotaiAtomBrowser({
   atoms,
   searchQuery,
-  onViewHistory
+  onViewHistory,
+  onAtomExpand
 }) {
   const [expandedAtom, setExpandedAtom] = useState(null);
   const filteredAtoms = useMemo(() => {
@@ -130,8 +134,12 @@ export function JotaiAtomBrowser({
     return atoms.filter(a => a.label.toLowerCase().includes(search));
   }, [atoms, searchQuery]);
   const handleAtomPress = useCallback(atom => {
-    setExpandedAtom(prev => prev === atom.label ? null : atom.label);
-  }, []);
+    setExpandedAtom(prev => {
+      const next = prev === atom.label ? null : atom.label;
+      if (next) onAtomExpand?.(atom.label);
+      return next;
+    });
+  }, [onAtomExpand]);
   if (filteredAtoms.length === 0 && !searchQuery) {
     return /*#__PURE__*/_jsx(EmptyBrowserState, {});
   }

package/lib/module/jotai/components/JotaiAtomDetailContent.js

@@ -271,9 +271,11 @@ export function JotaiAtomDetailContent({
   changes,
   selectedIndex,
   onIndexChange,
-  disableInternalFooter = false
+  disableInternalFooter = false,
+  initialView = "change"
 }) {
-  const [activeView, setActiveView] = useState("change");
+  // View state (initialView seeds it once; taps own it afterwards)
+  const [activeView, setActiveView] = useState(initialView);
   const [diffMode, setDiffMode] = useState("tree");
   const totalChanges = changes.length;
   const atomColor = jotaiStateStore.getAtomColor(change.atomLabel);

package/lib/module/jotai/components/JotaiModal.js

@@ -8,7 +8,7 @@
  * - Events tab: Live atom change monitoring with diffs
  */
 
-import { useState, useMemo, useRef, useCallback } from "react";
+import { useState, useMemo, useRef, useCallback, useEffect } from "react";
 import { View, Text, StyleSheet, FlatList, TextInput, TouchableOpacity } from "react-native";
 import { JsModal, ModalHeader, TabSelector, macOSColors, buoyColors, Search, Filter, Power, X, Box, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
@@ -42,11 +42,16 @@ export function JotaiModal({
   onBack,
   onMinimize,
   enableSharedModalDimensions = false,
-  inline = false
+  inline = false,
+  initialTab,
+  initialSelectedChangeId,
+  initialDetailView,
+  onChangeSelect,
+  onAtomExpand
 }) {
   const isPro = useIsPro();
   const [showProModal, setShowProModal] = useState(false);
-  const [activeTab, setActiveTab] = useState("atoms");
+  const [activeTab, setActiveTab] = useState(initialTab ?? "atoms");
   const [selectedHistoryAtom, setSelectedHistoryAtom] = useState(null);
   const [showFilters, setShowFilters] = useState(false);
   const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
@@ -98,6 +103,30 @@ export function JotaiModal({
   }, [selectedChangeId, activeChanges]);
   const selectedChange = selectedChangeIndex !== null ? activeChanges[selectedChangeIndex] : null;
 
+  // Notify the host on selection (keyed by change id so re-renders with the
+  // same selection don't re-fire; remote mirrors fetch atom values here).
+  const lastNotifiedSelectionRef = useRef(null);
+  useEffect(() => {
+    if (!onChangeSelect) return;
+    const id = selectedChange?.id ?? null;
+    if (id === null || id === lastNotifiedSelectionRef.current) return;
+    lastNotifiedSelectionRef.current = id;
+    onChangeSelect(selectedChange);
+  }, [selectedChange, onChangeSelect]);
+
+  // Deep link into a change's detail (see initialSelectedChangeId). Applied
+  // at most once per id, so the list re-rendering — or the user pressing Back
+  // — never re-opens it.
+  const appliedInitialSelectionRef = useRef(null);
+  useEffect(() => {
+    if (!initialSelectedChangeId) return;
+    if (appliedInitialSelectionRef.current === initialSelectedChangeId) return;
+    const exists = activeChanges.some(c => c.id === initialSelectedChangeId);
+    if (!exists) return;
+    appliedInitialSelectionRef.current = initialSelectedChangeId;
+    setSelectedChangeId(initialSelectedChangeId);
+  }, [initialSelectedChangeId, activeChanges]);
+
   // Search state
   const [searchText, setSearchText] = useState("");
   const [isSearchActive, setIsSearchActive] = useState(false);
@@ -338,7 +367,8 @@ export function JotaiModal({
         changes: activeChanges,
         selectedIndex: selectedChangeIndex,
         onIndexChange: handleIndexChange,
-        disableInternalFooter: true
+        disableInternalFooter: true,
+        initialView: initialDetailView
       });
     }
     if (selectedHistoryAtom) {
@@ -371,7 +401,8 @@ export function JotaiModal({
       return /*#__PURE__*/_jsx(JotaiAtomBrowser, {
         atoms: displayedAtoms,
         searchQuery: searchText,
-        onViewHistory: handleViewHistory
+        onViewHistory: handleViewHistory,
+        onAtomExpand: onAtomExpand
       });
     }