@buoy-gg/zustand 7.0.17 → 7.0.19

package/lib/commonjs/zustand/components/ZustandModal.js

@@ -49,11 +49,16 @@ function ZustandModal({
   onMinimize,
   enableSharedModalDimensions = false,
   inline = false,
-  storesLoading = false
+  storesLoading = false,
+  initialTab = "stores",
+  initialSelectedChangeId,
+  initialDetailView,
+  onChangeSelect,
+  onStoreExpand
 }) {
   const isPro = (0, _license.useIsPro)();
   const [showProModal, setShowProModal] = (0, _react.useState)(false);
-  const [activeTab, setActiveTab] = (0, _react.useState)("stores");
+  const [activeTab, setActiveTab] = (0, _react.useState)(initialTab);
   const [selectedHistoryStore, setSelectedHistoryStore] = (0, _react.useState)(null);
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
   const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
@@ -108,6 +113,30 @@ function ZustandModal({
   }, [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 state trees 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 — shared across tabs
   const [searchText, setSearchText] = (0, _react.useState)("");
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
@@ -370,7 +399,8 @@ function ZustandModal({
         changes: activeChanges,
         selectedIndex: selectedChangeIndex,
         onIndexChange: handleIndexChange,
-        disableInternalFooter: true
+        disableInternalFooter: true,
+        initialView: initialDetailView
       });
     }
 
@@ -408,7 +438,8 @@ function ZustandModal({
         stores: displayedStores,
         searchQuery: searchText,
         onViewHistory: handleViewHistory,
-        isLoading: storesLoading
+        isLoading: storesLoading,
+        onStoreExpand: onStoreExpand
       });
     }
 

package/lib/commonjs/zustand/components/ZustandStateDetailContent.js

@@ -66,9 +66,10 @@ function ZustandStateDetailContent({
   changes,
   selectedIndex,
   onIndexChange,
-  disableInternalFooter = false
+  disableInternalFooter = false,
+  initialView = "change"
 }) {
-  const [activeView, setActiveView] = (0, _react.useState)("change");
+  const [activeView, setActiveView] = (0, _react.useState)(initialView);
   const [diffMode, setDiffMode] = (0, _react.useState)("tree");
   const totalChanges = changes.length;
   const changeColor = getChangeColor(change);

package/lib/commonjs/zustand/components/ZustandStoreBrowser.js

@@ -26,6 +26,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 function getKeysPreview(store) {
   try {
     const state = store.api.getState();
+    if (state && typeof state === "object" && state.__buoyStateOnDevice === true) {
+      return "on device";
+    }
     if (state && typeof state === "object") {
       const keys = Object.keys(state);
       const dataKeys = keys.filter(k => {
@@ -146,7 +149,8 @@ function ZustandStoreBrowser({
   stores,
   searchQuery,
   onViewHistory,
-  isLoading = false
+  isLoading = false,
+  onStoreExpand
 }) {
   const [expandedStore, setExpandedStore] = (0, _react.useState)(null);
 
@@ -157,8 +161,12 @@ function ZustandStoreBrowser({
     return stores.filter(s => s.name.toLowerCase().includes(search) || s.persistName && s.persistName.toLowerCase().includes(search));
   }, [stores, searchQuery]);
   const handleStorePress = (0, _react.useCallback)(store => {
-    setExpandedStore(prev => prev === store.name ? null : store.name);
-  }, []);
+    setExpandedStore(prev => {
+      const next = prev === store.name ? null : store.name;
+      if (next) onStoreExpand?.(store.name);
+      return next;
+    });
+  }, [onStoreExpand]);
   if (filteredStores.length === 0 && !searchQuery) {
     return isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingBrowserState, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyBrowserState, {});
   }

package/lib/commonjs/zustand/sync/zustandSyncAdapter.js

@@ -3,13 +3,57 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.zustandSyncAdapter = void 0;
+exports.zustandSyncAdapter = exports.STATE_ON_DEVICE = exports.PAYLOAD_ON_DEVICE = void 0;
 var _zustandStateStore = require("../utils/zustandStateStore");
+var _sharedUi = require("@buoy-gg/shared-ui");
+/**
+ * Sentinel used in WIRE-FORM snapshots in place of raw prevState/nextState.
+ * Same hazard as redux: up to 200 changes × 2 full trees on every snapshot
+ * freeze/OOM-killed large apps. Dashboards fetch trees via `getChangeDetail`.
+ */
+const STATE_ON_DEVICE = exports.STATE_ON_DEVICE = Object.freeze({
+  __buoyStateOnDevice: true,
+  note: "State trees stay on the device — fetched on demand via getChangeDetail / getStoreState."
+});
+
+/** Wire-form sentinel for an oversized `partial` (replace can carry a whole tree). */
+const PAYLOAD_ON_DEVICE = exports.PAYLOAD_ON_DEVICE = Object.freeze({
+  __buoyPayloadOnDevice: true,
+  note: "Partial stays on the device — fetched on demand via getChangeDetail."
+});
+const MAX_CHANGE_DETAIL_BYTES = 8 * 1024 * 1024;
+const MAX_WIRE_PAYLOAD_BYTES = 16 * 1024;
 /** Top-level keys of an object state, for the compact (no-values) view. */
 function topLevelKeys(state) {
   return state && typeof state === "object" && !Array.isArray(state) ? Object.keys(state) : undefined;
 }
 
+/**
+ * Per-change wire cache. The store prepends and never mutates a recorded
+ * change, so keying on identity is correct and self-invalidating — without it
+ * every `partial` in the list is re-measured on all ~5 snapshots per second.
+ */
+const changeCache = new WeakMap();
+function toWireChange(change) {
+  const cached = changeCache.get(change);
+  if (cached) return cached;
+  const wire = {
+    ...change,
+    prevState: STATE_ON_DEVICE,
+    nextState: STATE_ON_DEVICE,
+    partial: toWirePartial(change.partial)
+  };
+  changeCache.set(change, wire);
+  return wire;
+}
+function toWirePartial(value) {
+  if (value === undefined) return value;
+  return (0, _sharedUi.isOverWireBudget)(value, MAX_WIRE_PAYLOAD_BYTES) ? PAYLOAD_ON_DEVICE : value;
+}
+function toWireState(value) {
+  return (0, _sharedUi.isOverWireBudget)(value, MAX_WIRE_PAYLOAD_BYTES) ? STATE_ON_DEVICE : value;
+}
+
 /**
  * Sync adapter for the zustand tool, consumed by @buoy-gg/external-sync's
  * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
@@ -21,13 +65,21 @@ function topLevelKeys(state) {
  * change timeline and the store registry (with each store's current state)
  * so the dashboard can render the store browser.
  *
+ * v2: change-log prevState/nextState are replaced with on-device markers
+ * (see STATE_ON_DEVICE). Dashboards fetch trees via `getChangeDetail`.
+ * Oversized / unserializable `stores[].currentState` uses the same marker
+ * and is fetched via `getStoreState`.
+ *
  * The `setState` action powers remote time-travel/reset from the dashboard.
  */
 const zustandSyncAdapter = exports.zustandSyncAdapter = {
-  version: 1,
+  version: 2,
   getSnapshot: () => ({
-    changes: _zustandStateStore.zustandStateStore.getStateChanges(),
-    stores: _zustandStateStore.zustandStateStore.getStoreSnapshots()
+    changes: _zustandStateStore.zustandStateStore.getStateChanges().map(toWireChange),
+    stores: _zustandStateStore.zustandStateStore.getStoreSnapshots().map(store => ({
+      ...store,
+      currentState: toWireState(store.currentState)
+    }))
   }),
   subscribe: onChange => {
     const unsubscribeChanges = _zustandStateStore.zustandStateStore.subscribe(onChange);
@@ -41,6 +93,77 @@ const zustandSyncAdapter = exports.zustandSyncAdapter = {
     clearEvents: () => {
       _zustandStateStore.zustandStateStore.clearStateChanges();
     },
+    /**
+     * On-demand detail: one change's real prevState/nextState/partial.
+     * The per-snapshot stream stays tree-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 = _zustandStateStore.zustandStateStore.getStateChangeById(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 => (0, _sharedUi.isOverWireBudget)(value, MAX_CHANGE_DETAIL_BYTES) ? cappedNote : value;
+      return {
+        found: true,
+        id,
+        prevState: cap(change.prevState),
+        nextState: cap(change.nextState),
+        partial: cap(change.partial)
+      };
+    },
+    /**
+     * On-demand current state for one store. Wire-form snapshots replace
+     * oversized / unserializable `currentState` with STATE_ON_DEVICE.
+     */
+    getStoreState: params => {
+      const {
+        storeName
+      } = params ?? {};
+      if (!storeName) return {
+        found: false,
+        reason: "missing storeName"
+      };
+      const store = _zustandStateStore.zustandStateStore.getStore(storeName);
+      if (!store) return {
+        found: false,
+        reason: "unknown storeName"
+      };
+      let currentState;
+      try {
+        currentState = store.api.getState();
+      } catch {
+        currentState = undefined;
+      }
+      const cappedNote = {
+        __buoyTruncated: true,
+        note: `Exceeds the ${MAX_CHANGE_DETAIL_BYTES / (1024 * 1024)}MB detail limit — inspect it on-device.`
+      };
+      if (!(0, _sharedUi.isOverWireBudget)(currentState, MAX_CHANGE_DETAIL_BYTES)) {
+        return {
+          found: true,
+          storeName,
+          currentState
+        };
+      }
+      return {
+        found: true,
+        storeName,
+        currentState: (0, _sharedUi.isJsonSerializable)(currentState) ? cappedNote : STATE_ON_DEVICE
+      };
+    },
     /**
      * Compact current-state reader for a remote driver (MCP/LLM): the registered
      * stores with light metadata; each store's full `currentState` object stays
@@ -77,8 +200,20 @@ const zustandSyncAdapter = exports.zustandSyncAdapter = {
         storeName,
         state,
         replace
-      } = params;
-      _zustandStateStore.zustandStateStore.getStore(storeName)?.api.setState(state, replace ?? true);
+      } = params ?? {};
+      if (!storeName) return {
+        ok: false,
+        error: "Missing storeName."
+      };
+      const store = _zustandStateStore.zustandStateStore.getStore(storeName);
+      if (!store) return {
+        ok: false,
+        error: `No store named "${storeName}".`
+      };
+      store.api.setState(state, replace ?? true);
+      return {
+        ok: true
+      };
     }
   }
 };

package/lib/commonjs/zustand/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 _zustandStateStore = require("./zustandStateStore");
 /**
  * Time Machine snapshot provider for Zustand.
@@ -117,8 +118,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,
@@ -134,6 +139,10 @@ async function restore(data) {
     };
   }
   for (const [name, envelope] of Object.entries(snapshot.stores)) {
+    if (!touch(name)) {
+      excludedHits += 1;
+      continue;
+    }
     const info = _zustandStateStore.zustandStateStore.getStore(name);
     if (!info) {
       result.skipped.push({
@@ -160,12 +169,111 @@ async function restore(data) {
       result.ok = false;
     }
   }
+  if (excludedHits > 0) {
+    result.warnings.push(`${excludedHits} store(s) excluded by you`);
+  }
   return result;
 }
+const ITEM_RENDER_BYTE_LIMIT = 256 * 1024;
+
+/**
+ * Per-store restore preview. Both sides are function-stripped through the
+ * SAME depth-8 normalizer as capture — diffing snapshot-vs-RAW-live would
+ * report every stripped function and every beyond-depth subtree as removed.
+ */
+async function previewItems(target, base) {
+  const targetStores = target?.stores ?? {};
+  const liveMode = base === undefined;
+  const baseStores = {};
+  if (liveMode) {
+    for (const info of _zustandStateStore.zustandStateStore.getStores()) {
+      const fnPaths = [];
+      try {
+        baseStores[info.name] = {
+          state: stripFunctions(info.api.getState(), "", fnPaths, new WeakSet(), 0),
+          fnPaths
+        };
+      } catch {
+        // unreadable live store — treated as absent
+      }
+    }
+  } else {
+    Object.assign(baseStores, base?.stores ?? {});
+  }
+  const items = [];
+  const notes = [];
+  let preservedFns = 0;
+  const names = new Set([...Object.keys(baseStores), ...Object.keys(targetStores)]);
+  for (const name of names) {
+    const inTarget = name in targetStores;
+    const inBase = name in baseStores;
+    if (!inTarget) {
+      // Restore never touches stores the snapshot doesn't know about.
+      if (liveMode) notes.push(`store "${name}" not in snapshot — untouched`);else items.push({
+        key: name,
+        label: name,
+        verdict: "removed",
+        oldValue: baseStores[name].state
+      });
+      continue;
+    }
+    preservedFns += targetStores[name].fnPaths?.length ?? 0;
+    if (liveMode && !_zustandStateStore.zustandStateStore.getStore(name)) {
+      items.push({
+        key: name,
+        label: name,
+        verdict: "wont-apply",
+        reason: "store not registered (renamed, or created after snapshot?)"
+      });
+      continue;
+    }
+    if (!inBase) {
+      items.push({
+        key: name,
+        label: name,
+        verdict: "added",
+        newValue: targetStores[name].state
+      });
+      continue;
+    }
+    const oldState = baseStores[name].state;
+    const newState = targetStores[name].state;
+    if ((0, _dataViewer.boundedDeepEqual)(oldState, newState)) {
+      items.push({
+        key: name,
+        label: name,
+        verdict: "unchanged"
+      });
+    } else if ((0, _dataViewer.jsonLikelyLargerThan)(oldState, ITEM_RENDER_BYTE_LIMIT) || (0, _dataViewer.jsonLikelyLargerThan)(newState, ITEM_RENDER_BYTE_LIMIT)) {
+      items.push({
+        key: name,
+        label: name,
+        verdict: "too-large",
+        reason: "store too large to render a diff — restore still applies it"
+      });
+    } else {
+      items.push({
+        key: name,
+        label: name,
+        verdict: "changed",
+        oldValue: oldState,
+        newValue: newState
+      });
+    }
+  }
+  if (preservedFns > 0) {
+    notes.push(`${preservedFns} store action function${preservedFns === 1 ? "" : "s"} preserved on restore (not diffed)`);
+  }
+  return {
+    items,
+    notes
+  };
+}
 (0, _sharedUi.registerStateSnapshotProvider)({
   id: "zustand",
   label: "Zustand",
   status,
   capture,
-  restore
+  restore,
+  previewItems
 });

package/lib/commonjs/zustand/utils/zustandStateStore.js

@@ -276,6 +276,27 @@ class ZustandStateStore {
 
   // ---- Remote Mirror Mode ----
 
+  /**
+   * Replace the change log without touching the store registry. Used when a
+   * host keeps real registered stores (JUMP / RESET stay wired) but needs to
+   * reseed the event list — the docs live tour, or any mirror that already
+   * called `registerStore`. Does not fire `onClear`. Respects the enabled
+   * flag so the UI's pause button freezes the reseed.
+   */
+  replaceStateChanges(changes) {
+    if (!this.isEnabled) return;
+    this.stateChanges = changes.slice(0, this.maxChanges);
+    for (const store of this.stores.values()) {
+      store.stateChangeCount = 0;
+    }
+    for (const change of this.stateChanges) {
+      const store = this.stores.get(change.storeName);
+      if (store) store.stateChangeCount++;
+    }
+    this.notifyListeners();
+    this.notifyStoreListeners();
+  }
+
   /**
    * Permanently suppress local capture. Use when this store acts as a mirror
    * of a remote device's state changes (e.g. the desktop dashboard): data
@@ -330,22 +351,92 @@ class ZustandStateStore {
    */
   replaceFromSnapshot(changes, storeSnapshots) {
     if (!this.isEnabled) return;
-    this.stateChanges = changes.slice(0, this.maxChanges);
-    this.stores = new Map(storeSnapshots.map(snapshot => [snapshot.name, {
-      name: snapshot.name,
-      api: {
-        getState: () => snapshot.currentState,
-        setState: (partial, replace) => {
-          this.remoteSetStateHandler?.(snapshot.name, partial, replace);
+
+    // Preserve trees 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.stateChanges) {
+      const prev = existing.prevState;
+      if (!prev || prev.__buoyStateOnDevice !== true) {
+        hydrated.set(existing.id, existing);
+      }
+    }
+    this.stateChanges = changes.slice(0, this.maxChanges).map(change => {
+      const kept = hydrated.get(change.id);
+      const incoming = change.prevState;
+      return kept && incoming?.__buoyStateOnDevice === true ? {
+        ...change,
+        prevState: kept.prevState,
+        nextState: kept.nextState,
+        partial: kept.partial
+      } : change;
+    });
+
+    // Preserve currentState a remote mirror already hydrated — oversized
+    // stores arrive as STATE_ON_DEVICE markers on every snapshot.
+    const hydratedStores = new Map();
+    for (const [name, store] of this.stores) {
+      try {
+        const state = store.api.getState();
+        const marker = state;
+        if (!marker || marker.__buoyStateOnDevice !== true) {
+          hydratedStores.set(name, state);
+        }
+      } catch {
+        // ignore
+      }
+    }
+    this.stores = new Map(storeSnapshots.map(snapshot => {
+      const incoming = snapshot.currentState;
+      const kept = hydratedStores.get(snapshot.name);
+      const currentState = kept !== undefined && incoming?.__buoyStateOnDevice === true ? kept : snapshot.currentState;
+      return [snapshot.name, {
+        name: snapshot.name,
+        api: {
+          getState: () => currentState,
+          setState: (partial, replace) => {
+            this.remoteSetStateHandler?.(snapshot.name, partial, replace);
+          },
+          subscribe: () => () => {}
         },
-        subscribe: () => () => {}
-      },
-      stateChangeCount: snapshot.stateChangeCount,
-      isPersisted: snapshot.isPersisted,
-      persistName: snapshot.persistName,
-      color: snapshot.color
-    }]));
+        stateChangeCount: snapshot.stateChangeCount,
+        isPersisted: snapshot.isPersisted,
+        persistName: snapshot.persistName,
+        color: snapshot.color
+      }];
+    }));
+    this.notifyListeners();
+    this.notifyStoreListeners();
+  }
+
+  /**
+   * Hydrate one mirrored change with real trees fetched on demand from the
+   * device via the adapter's `getChangeDetail`. Remote-mirror (desktop) only.
+   */
+  hydrateChange(id, patch) {
+    const index = this.stateChanges.findIndex(c => c.id === id);
+    if (index === -1) return;
+    this.stateChanges = [...this.stateChanges.slice(0, index), {
+      ...this.stateChanges[index],
+      ...patch
+    }, ...this.stateChanges.slice(index + 1)];
     this.notifyListeners();
+  }
+
+  /**
+   * Hydrate one mirrored store's currentState fetched on demand from the
+   * device via the adapter's `getStoreState`. Remote-mirror (desktop) only.
+   */
+  hydrateStoreState(storeName, currentState) {
+    const store = this.stores.get(storeName);
+    if (!store) return;
+    this.stores.set(storeName, {
+      ...store,
+      api: {
+        ...store.api,
+        getState: () => currentState
+      }
+    });
     this.notifyStoreListeners();
   }
 

package/lib/module/zustand/components/ZustandModal.js

@@ -8,7 +8,7 @@
  * - Events tab: Live state 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, Lock, Box, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
@@ -44,11 +44,16 @@ export function ZustandModal({
   onMinimize,
   enableSharedModalDimensions = false,
   inline = false,
-  storesLoading = false
+  storesLoading = false,
+  initialTab = "stores",
+  initialSelectedChangeId,
+  initialDetailView,
+  onChangeSelect,
+  onStoreExpand
 }) {
   const isPro = useIsPro();
   const [showProModal, setShowProModal] = useState(false);
-  const [activeTab, setActiveTab] = useState("stores");
+  const [activeTab, setActiveTab] = useState(initialTab);
   const [selectedHistoryStore, setSelectedHistoryStore] = useState(null);
   const [showFilters, setShowFilters] = useState(false);
   const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
@@ -103,6 +108,30 @@ export function ZustandModal({
   }, [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 state trees 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 — shared across tabs
   const [searchText, setSearchText] = useState("");
   const [isSearchActive, setIsSearchActive] = useState(false);
@@ -365,7 +394,8 @@ export function ZustandModal({
         changes: activeChanges,
         selectedIndex: selectedChangeIndex,
         onIndexChange: handleIndexChange,
-        disableInternalFooter: true
+        disableInternalFooter: true,
+        initialView: initialDetailView
       });
     }
 
@@ -403,7 +433,8 @@ export function ZustandModal({
         stores: displayedStores,
         searchQuery: searchText,
         onViewHistory: handleViewHistory,
-        isLoading: storesLoading
+        isLoading: storesLoading,
+        onStoreExpand: onStoreExpand
       });
     }
 

package/lib/module/zustand/components/ZustandStateDetailContent.js

@@ -62,9 +62,10 @@ export function ZustandStateDetailContent({
   changes,
   selectedIndex,
   onIndexChange,
-  disableInternalFooter = false
+  disableInternalFooter = false,
+  initialView = "change"
 }) {
-  const [activeView, setActiveView] = useState("change");
+  const [activeView, setActiveView] = useState(initialView);
   const [diffMode, setDiffMode] = useState("tree");
   const totalChanges = changes.length;
   const changeColor = getChangeColor(change);