@signaltree/core 8.0.0 → 8.0.1

package/dist/enhancers/devtools/devtools.js

@@ -1,10 +1,11 @@
-import { effect, signal } from '@angular/core';
+import { signal } from '@angular/core';
 import { copyTreeProperties } from '../utils/copy-tree-properties.js';
+import { applyState, snapshotState } from '../../lib/utils.js';
 import { getPathNotifier } from '../../lib/path-notifier.js';
-import { snapshotState, applyState } from '../../lib/utils.js';
 
-function createActivityTracker() {
+function createActivityTracker(options) {
   const modules = new Map();
+  const enableConsole = options?.enableConsole === true;
   return {
     trackMethodCall: (module, method, duration) => {
       const existing = modules.get(module);
@@ -29,13 +30,15 @@ function createActivityTracker() {
       if (existing) {
         existing.errorCount++;
       }
-      console.error(`❌ [${module}] Error${context ? ` in ${context}` : ''}:`, error);
+      if (enableConsole) {
+        console.error(`❌ [${module}] Error${context ? ` in ${context}` : ''}:`, error);
+      }
     },
     getModuleActivity: module => modules.get(module),
     getAllModules: () => Array.from(modules.values())
   };
 }
-function createCompositionLogger() {
+function createCompositionLogger(options) {
   const logs = [];
   const addLog = (module, type, data) => {
     logs.push({
@@ -54,7 +57,9 @@ function createCompositionLogger() {
         modules,
         action
       });
-      console.log(`🔗 Composition ${action}:`, modules.join(' → '));
+      {
+        console.log(`🔗 Composition ${action}:`, modules.join(' → '));
+      }
     },
     logMethodExecution: (module, method, args, result) => {
       addLog(module, 'method', {
@@ -62,10 +67,12 @@ function createCompositionLogger() {
         args,
         result
       });
-      console.debug(`🔧 [${module}] ${method}`, {
-        args,
-        result
-      });
+      {
+        console.debug(`🔧 [${module}] ${method}`, {
+          args,
+          result
+        });
+      }
     },
     logStateChange: (module, path, oldValue, newValue) => {
       addLog(module, 'state', {
@@ -73,10 +80,12 @@ function createCompositionLogger() {
         oldValue,
         newValue
       });
-      console.debug(`📝 [${module}] State change at ${path}:`, {
-        from: oldValue,
-        to: newValue
-      });
+      {
+        console.debug(`📝 [${module}] State change at ${path}:`, {
+          from: oldValue,
+          to: newValue
+        });
+      }
     },
     logPerformanceWarning: (module, operation, duration, threshold) => {
       addLog(module, 'performance', {
@@ -84,7 +93,9 @@ function createCompositionLogger() {
         duration,
         threshold
       });
-      console.warn(`⚠️ [${module}] Slow ${operation}: ${duration.toFixed(2)}ms (threshold: ${threshold}ms)`);
+      {
+        console.warn(`⚠️ [${module}] Slow ${operation}: ${duration.toFixed(2)}ms (threshold: ${threshold}ms)`);
+      }
     },
     exportLogs: () => [...logs]
   };
@@ -252,6 +263,415 @@ function sanitizeState(value, options, depth = 0, seen = new WeakSet()) {
   }
   return value;
 }
+function parseDevToolsState(state) {
+  if (typeof state === 'string') {
+    try {
+      return JSON.parse(state);
+    } catch {
+      return undefined;
+    }
+  }
+  return state;
+}
+function buildDevToolsAction(type, payload, meta) {
+  return {
+    type,
+    ...(payload !== undefined && {
+      payload
+    }),
+    ...(meta && {
+      meta: meta
+    })
+  };
+}
+const GLOBAL_GROUPS_KEY = '__SIGNALTREE_DEVTOOLS_GROUPS__';
+const GLOBAL_MARKER_KEY = '__SIGNALTREE_DEVTOOLS_GLOBAL_MARKER__';
+function getRegistryHost() {
+  return typeof window !== 'undefined' ? window : globalThis;
+}
+function ensureGlobalMarker() {
+  const host = getRegistryHost();
+  if (!host[GLOBAL_MARKER_KEY]) {
+    host[GLOBAL_MARKER_KEY] = `marker_${Math.random().toString(36).slice(2)}`;
+  }
+  return host[GLOBAL_MARKER_KEY];
+}
+function getGlobalDevToolsGroups() {
+  const host = getRegistryHost();
+  if (!host[GLOBAL_GROUPS_KEY]) {
+    host[GLOBAL_GROUPS_KEY] = new Map();
+  }
+  return host[GLOBAL_GROUPS_KEY];
+}
+const devToolsGroups = getGlobalDevToolsGroups();
+const GLOBAL_CONNECTIONS_KEY = '__SIGNALTREE_DEVTOOLS_CONNECTIONS__';
+function getGlobalDevToolsConnections() {
+  const host = getRegistryHost();
+  ensureGlobalMarker();
+  if (!host[GLOBAL_CONNECTIONS_KEY]) {
+    host[GLOBAL_CONNECTIONS_KEY] = new Map();
+  }
+  return host[GLOBAL_CONNECTIONS_KEY];
+}
+const devToolsConnections = getGlobalDevToolsConnections();
+function getOrCreateDevToolsGroup(groupId, displayName) {
+  if (devToolsGroups.has(groupId)) {
+    return devToolsGroups.get(groupId);
+  }
+  const trees = new Map();
+  const lastSnapshots = new Map();
+  const lastSerialized = new Map();
+  const pendingPathsByTree = new Map();
+  let browserDevToolsConnection = null;
+  let browserDevTools = null;
+  let devToolsExtension = null;
+  let unsubscribeDevTools = null;
+  let isConnected = false;
+  let isApplyingExternalState = false;
+  let sendScheduled = false;
+  let sendTimer = null;
+  let lastSendAt = 0;
+  let sendRateLimitMs = 0;
+  let pendingAction = null;
+  let pendingExplicitAction = false;
+  let pendingSource;
+  let pendingDuration;
+  const sendAggregated = (actionType, payload) => {
+    if (!browserDevTools) return;
+    const aggregated = buildAggregatedState();
+    browserDevTools.send(buildDevToolsAction(actionType, payload), aggregated);
+  };
+  const sendEmptyState = () => {
+    try {
+      sendAggregated('SignalTree/empty', {
+        groupId
+      });
+    } catch {}
+    pendingPathsByTree.clear();
+    lastSnapshots.clear();
+    lastSerialized.clear();
+  };
+  const updateRateLimit = () => {
+    sendRateLimitMs = 0;
+    for (const tree of trees.values()) {
+      if (typeof tree.sendRateLimitMs === 'number') {
+        sendRateLimitMs = Math.max(sendRateLimitMs, tree.sendRateLimitMs);
+      }
+    }
+  };
+  const buildAggregatedState = () => {
+    const aggregated = {};
+    for (const [treeKey, tree] of trees) {
+      const snapshot = tree.readSnapshot();
+      const lastSnapshot = lastSnapshots.get(treeKey);
+      let serialized;
+      if (lastSnapshot === snapshot && lastSerialized.has(treeKey)) {
+        serialized = lastSerialized.get(treeKey);
+      } else {
+        lastSnapshots.set(treeKey, snapshot);
+        serialized = tree.buildSerializedState(snapshot);
+        lastSerialized.set(treeKey, serialized);
+      }
+      aggregated[treeKey] = serialized;
+    }
+    return aggregated;
+  };
+  const sendInit = () => {
+    if (!browserDevTools) return;
+    const aggregated = buildAggregatedState();
+    browserDevTools.send('@@INIT', aggregated);
+  };
+  const applyExternalState = state => {
+    if (state === undefined || state === null) return;
+    isApplyingExternalState = true;
+    try {
+      for (const [treeKey, tree] of trees) {
+        if (!tree.enableTimeTravel) continue;
+        const treeState = state?.[treeKey];
+        if (treeState !== undefined) {
+          tree.applyExternalState(treeState);
+        }
+      }
+    } finally {
+      isApplyingExternalState = false;
+      for (const treeKey of trees.keys()) {
+        lastSnapshots.delete(treeKey);
+        pendingPathsByTree.delete(treeKey);
+      }
+    }
+  };
+  const handleDevToolsMessage = message => {
+    if (!message || typeof message !== 'object') return;
+    const msg = message;
+    const messageType = typeof msg.type === 'string' ? msg.type : undefined;
+    if (messageType === 'START') {
+      if (browserDevTools && trees.size > 0) {
+        const elapsed = Date.now() - lastSendAt;
+        if (elapsed < 500) return;
+        const aggregated = buildAggregatedState();
+        browserDevTools.send({
+          type: 'SignalTree/reconnect'
+        }, aggregated);
+        lastSendAt = Date.now();
+      }
+      return;
+    }
+    const anyTimeTravelEnabled = Array.from(trees.values()).some(t => t.enableTimeTravel);
+    if (!anyTimeTravelEnabled) return;
+    if (messageType !== 'DISPATCH') return;
+    const actionType = msg.payload && typeof msg.payload.type === 'string' ? msg.payload.type : undefined;
+    if (!actionType) return;
+    if (actionType === 'JUMP_TO_STATE' || actionType === 'JUMP_TO_ACTION') {
+      const nextState = parseDevToolsState(msg.state);
+      applyExternalState(nextState);
+      return;
+    }
+    if (actionType === 'ROLLBACK') {
+      const nextState = parseDevToolsState(msg.state);
+      applyExternalState(nextState);
+      sendInit();
+      return;
+    }
+    if (actionType === 'COMMIT') {
+      sendInit();
+      return;
+    }
+    if (actionType === 'IMPORT_STATE') {
+      const lifted = msg.payload?.nextLiftedState;
+      const computedStates = Array.isArray(lifted?.computedStates) ? lifted.computedStates : [];
+      const indexRaw = typeof lifted?.currentStateIndex === 'number' ? lifted.currentStateIndex : computedStates.length - 1;
+      const index = Math.max(0, Math.min(indexRaw, computedStates.length - 1));
+      const entry = computedStates[index];
+      const nextState = parseDevToolsState(entry?.state);
+      applyExternalState(nextState);
+      sendInit();
+    }
+  };
+  const initBrowserDevTools = () => {
+    if (isConnected) return;
+    if (typeof window === 'undefined' || !('__REDUX_DEVTOOLS_EXTENSION__' in window)) {
+      return;
+    }
+    const waiters = new Set();
+    devToolsConnections.set(groupId, {
+      status: 'connecting',
+      connection: null,
+      tools: null,
+      subscribed: false,
+      unsubscribe: null,
+      waiters
+    });
+    try {
+      const devToolsExt = window['__REDUX_DEVTOOLS_EXTENSION__'];
+      devToolsExtension = devToolsExt;
+      const connection = devToolsExt.connect({
+        name: displayName,
+        instanceId: groupId,
+        features: {
+          dispatch: true,
+          jump: true,
+          skip: true
+        }
+      });
+      browserDevToolsConnection = connection;
+      browserDevTools = {
+        send: connection.send,
+        subscribe: connection.subscribe
+      };
+      if (browserDevTools.subscribe && !unsubscribeDevTools) {
+        const maybeUnsubscribe = browserDevTools.subscribe(handleDevToolsMessage);
+        if (typeof maybeUnsubscribe === 'function') {
+          unsubscribeDevTools = maybeUnsubscribe;
+        } else {
+          unsubscribeDevTools = () => {
+            browserDevTools?.subscribe?.(() => void 0);
+          };
+        }
+      }
+      const connEntry = devToolsConnections.get(groupId);
+      if (connEntry) {
+        connEntry.status = 'connected';
+        connEntry.connection = browserDevToolsConnection;
+        connEntry.tools = browserDevTools;
+        connEntry.subscribed = !!browserDevTools?.subscribe;
+        connEntry.unsubscribe = unsubscribeDevTools;
+        for (const waiter of connEntry.waiters) {
+          try {
+            waiter(connEntry);
+          } catch {}
+        }
+        connEntry.waiters.clear();
+      }
+      sendInit();
+      isConnected = true;
+    } catch (e) {
+      devToolsConnections.delete(groupId);
+      console.warn('[SignalTree] Failed to connect to Redux DevTools:', e);
+    }
+  };
+  const flushSend = () => {
+    sendScheduled = false;
+    if (!browserDevTools || isApplyingExternalState) return;
+    const aggregatedState = {};
+    const allFormattedPaths = [];
+    for (const [treeKey, tree] of trees) {
+      const currentSnapshot = tree.readSnapshot();
+      lastSnapshots.set(treeKey, currentSnapshot);
+      const serialized = tree.buildSerializedState(currentSnapshot);
+      lastSerialized.set(treeKey, serialized);
+      aggregatedState[treeKey] = serialized;
+      const pendingRaw = pendingPathsByTree.get(treeKey) ?? [];
+      const allowedRaw = pendingRaw.filter(p => p && tree.isPathAllowed(p));
+      if (allowedRaw.length > 0) {
+        const formatted = Array.from(new Set(allowedRaw)).map(path => tree.formatPathFn(`${treeKey}.${path}`));
+        allFormattedPaths.push(...formatted);
+      }
+    }
+    const hasMeta = pendingSource !== undefined || pendingDuration !== undefined;
+    if (allFormattedPaths.length === 0 && !pendingExplicitAction && !hasMeta) {
+      pendingAction = null;
+      pendingExplicitAction = false;
+      pendingSource = undefined;
+      pendingDuration = undefined;
+      pendingPathsByTree.clear();
+      lastSendAt = Date.now();
+      return;
+    }
+    const effectiveAction = pendingExplicitAction && pendingAction ? pendingAction : allFormattedPaths.length === 1 ? buildDevToolsAction(`SignalTree/${allFormattedPaths[0]}`, allFormattedPaths[0]) : allFormattedPaths.length > 1 ? buildDevToolsAction('SignalTree/update', allFormattedPaths) : buildDevToolsAction('SignalTree/update');
+    const actionMeta = {
+      timestamp: Date.now(),
+      ...(pendingSource && {
+        source: pendingSource
+      }),
+      ...(pendingDuration !== undefined && {
+        duration: pendingDuration,
+        slow: pendingDuration > 16
+      }),
+      ...(allFormattedPaths.length > 0 && {
+        paths: allFormattedPaths
+      })
+    };
+    const actionToSend = buildDevToolsAction(effectiveAction?.type ?? 'SignalTree/update', effectiveAction?.payload, actionMeta);
+    try {
+      browserDevTools.send(actionToSend, aggregatedState);
+    } catch {} finally {
+      pendingAction = null;
+      pendingExplicitAction = false;
+      pendingSource = undefined;
+      pendingDuration = undefined;
+      pendingPathsByTree.clear();
+      lastSendAt = Date.now();
+    }
+  };
+  const scheduleSend = (action, meta) => {
+    if (isApplyingExternalState) return;
+    if (action !== undefined) {
+      if (!pendingExplicitAction && pendingAction == null) {
+        pendingAction = action;
+        pendingExplicitAction = true;
+      } else {
+        pendingAction = null;
+        pendingExplicitAction = false;
+      }
+    }
+    if (meta?.source) {
+      if (!pendingSource) {
+        pendingSource = meta.source;
+      } else if (pendingSource !== meta.source) {
+        pendingSource = 'mixed';
+      }
+    }
+    if (meta?.duration !== undefined) {
+      pendingDuration = pendingDuration === undefined ? meta.duration : Math.max(pendingDuration, meta.duration);
+    }
+    if (!browserDevTools) return;
+    if (sendScheduled) return;
+    sendScheduled = true;
+    queueMicrotask(() => {
+      if (!browserDevTools) {
+        sendScheduled = false;
+        return;
+      }
+      const now = Date.now();
+      const waitMs = Math.max(0, sendRateLimitMs - (now - lastSendAt));
+      if (waitMs > 0) {
+        if (sendTimer) return;
+        sendTimer = setTimeout(() => {
+          sendTimer = null;
+          flushSend();
+        }, waitMs);
+        return;
+      }
+      flushSend();
+    });
+  };
+  const registerTree = (treeKey, tree) => {
+    const wasConnected = isConnected;
+    trees.set(treeKey, tree);
+    updateRateLimit();
+    initBrowserDevTools();
+    if (browserDevTools) {
+      const snapshot = tree.readSnapshot();
+      lastSnapshots.set(treeKey, snapshot);
+      lastSerialized.set(treeKey, tree.buildSerializedState(snapshot));
+      if (trees.size === 1 && !wasConnected) {
+        sendInit();
+      } else {
+        sendAggregated('SignalTree/register', {
+          treeKey
+        });
+      }
+    }
+    return () => {
+      trees.delete(treeKey);
+      pendingPathsByTree.delete(treeKey);
+      lastSnapshots.delete(treeKey);
+      lastSerialized.delete(treeKey);
+      updateRateLimit();
+      if (trees.size === 0) {
+        sendEmptyState();
+        try {
+          unsubscribeDevTools?.();
+        } catch {}
+        try {
+          browserDevToolsConnection?.unsubscribe?.();
+        } catch {}
+        try {
+          browserDevToolsConnection?.disconnect?.();
+        } catch {}
+        unsubscribeDevTools = null;
+        browserDevToolsConnection = null;
+        browserDevTools = null;
+        devToolsExtension = null;
+        isConnected = false;
+        devToolsConnections.delete(groupId);
+        devToolsGroups.delete(groupId);
+        return;
+      }
+      if (browserDevTools) {
+        sendAggregated('SignalTree/unregister', {
+          treeKey
+        });
+      }
+    };
+  };
+  const enqueue = (treeKey, pendingPaths, action, meta) => {
+    if (pendingPaths && pendingPaths.length > 0) {
+      const existing = pendingPathsByTree.get(treeKey) ?? [];
+      pendingPathsByTree.set(treeKey, [...existing, ...pendingPaths]);
+    }
+    scheduleSend(action, meta);
+  };
+  const group = {
+    registerTree,
+    enqueue,
+    connect() {
+      initBrowserDevTools();
+    }
+  };
+  devToolsGroups.set(groupId, group);
+  return group;
+}
 function devTools(config = {}) {
   const {
     enabled = true,
@@ -259,7 +679,7 @@ function devTools(config = {}) {
     name,
     enableBrowserDevTools = true,
     enableTimeTravel = true,
-    enableLogging = true,
+    enableLogging = false,
     performanceThreshold = 16,
     includePaths,
     excludePaths,
@@ -269,9 +689,11 @@ function devTools(config = {}) {
     maxDepth = 10,
     maxArrayLength = 50,
     maxStringLength = 2000,
-    serialize
+    serialize,
+    aggregatedReduxInstance
   } = config;
   const displayName = name ?? treeName;
+  const groupId = aggregatedReduxInstance?.id ?? displayName;
   const pathInclude = toArray(includePaths);
   const pathExclude = toArray(excludePaths);
   const sendRateLimitMs = maxSendsPerSecond && maxSendsPerSecond > 0 ? Math.ceil(1000 / maxSendsPerSecond) : rateLimitMs ?? 0;
@@ -284,7 +706,9 @@ function devTools(config = {}) {
       };
       return Object.assign(tree, noopMethods);
     }
-    const activityTracker = createActivityTracker();
+    const activityTracker = createActivityTracker({
+      enableConsole: enableLogging
+    });
     const logger = enableLogging ? createCompositionLogger() : createNoopLogger();
     const metrics = createModularMetrics();
     const compositionHistory = [];
@@ -302,14 +726,11 @@ function devTools(config = {}) {
     const activeProfiles = new Map();
     let browserDevToolsConnection = null;
     let browserDevTools = null;
+    let devToolsExtension = null;
     let isConnected = false;
     let isApplyingExternalState = false;
     let unsubscribeDevTools = null;
-    let unsubscribeNotifier = null;
-    let unsubscribeFlush = null;
     let pendingPaths = [];
-    let effectRef = null;
-    let effectPrimed = false;
     let sendScheduled = false;
     let pendingAction = null;
     let pendingExplicitAction = false;
@@ -358,15 +779,33 @@ function devTools(config = {}) {
         meta: meta
       })
     });
+    let lastSerializedJson;
     const flushSend = () => {
       sendScheduled = false;
       if (!browserDevTools || isApplyingExternalState) return;
       const rawSnapshot = readSnapshot();
       const currentSnapshot = rawSnapshot ?? {};
       const sanitized = buildSerializedState(currentSnapshot);
-      const defaultPaths = lastSnapshot === undefined ? [] : computeChangedPaths(lastSnapshot, currentSnapshot, maxDepth, maxArrayLength);
-      const mergedPaths = Array.from(new Set([...pendingPaths, ...defaultPaths.filter(path => path && isPathAllowed(path))]));
-      const formattedPaths = mergedPaths.map(path => formatPathFn(path));
+      let currentSerializedJson;
+      try {
+        currentSerializedJson = JSON.stringify(sanitized);
+      } catch {
+        currentSerializedJson = '';
+      }
+      const stateActuallyChanged = lastSerializedJson === undefined || currentSerializedJson !== lastSerializedJson;
+      const pendingAllowedPaths = pendingPaths.filter(path => path && isPathAllowed(path));
+      if (!stateActuallyChanged && !pendingExplicitAction && pendingAllowedPaths.length === 0) {
+        pendingAction = null;
+        pendingExplicitAction = false;
+        pendingSource = undefined;
+        pendingDuration = undefined;
+        pendingPaths = [];
+        lastSnapshot = currentSnapshot;
+        lastSerializedJson = currentSerializedJson;
+        return;
+      }
+      const rawPathsForNaming = pendingAllowedPaths.length > 0 ? Array.from(new Set(pendingAllowedPaths)) : lastSnapshot === undefined ? [] : computeChangedPaths(lastSnapshot, currentSnapshot, maxDepth, maxArrayLength).filter(path => path && isPathAllowed(path));
+      const formattedPaths = rawPathsForNaming.map(path => formatPathFn(path));
       if (pathInclude.length > 0 && formattedPaths.length === 0 && !pendingExplicitAction) {
         pendingAction = null;
         pendingExplicitAction = false;
@@ -400,6 +839,7 @@ function devTools(config = {}) {
         pendingDuration = undefined;
         pendingPaths = [];
         lastSnapshot = currentSnapshot;
+        lastSerializedJson = currentSerializedJson;
         lastSendAt = Date.now();
       }
     };
@@ -440,15 +880,23 @@ function devTools(config = {}) {
         flushSend();
       });
     };
-    const parseDevToolsState = state => {
-      if (typeof state === 'string') {
-        try {
-          return JSON.parse(state);
-        } catch {
-          return undefined;
-        }
+    const sendInit = () => {
+      if (!browserDevTools) return;
+      const rawSnapshot = readSnapshot() ?? {};
+      const serialized = buildSerializedState(rawSnapshot);
+      browserDevTools.send('@@INIT', serialized);
+      lastSnapshot = rawSnapshot;
+      try {
+        lastSerializedJson = JSON.stringify(serialized);
+      } catch {
+        lastSerializedJson = undefined;
       }
-      return state;
+      lastSendAt = Date.now();
+      pendingPaths = [];
+      pendingAction = null;
+      pendingExplicitAction = false;
+      pendingSource = undefined;
+      pendingDuration = undefined;
     };
     const applyExternalState = state => {
       if (state === undefined || state === null) return;
@@ -466,11 +914,34 @@ function devTools(config = {}) {
       }
     };
     const handleDevToolsMessage = message => {
-      if (!enableTimeTravel) return;
       if (!message || typeof message !== 'object') return;
       const msg = message;
-      if (msg.type !== 'DISPATCH' || !msg.payload?.type) return;
-      const actionType = msg.payload.type;
+      const messageType = typeof msg.type === 'string' ? msg.type : undefined;
+      if (messageType === 'START') {
+        if (lastSnapshot === undefined) {
+          sendInit();
+        } else if (browserDevTools) {
+          const elapsed = Date.now() - lastSendAt;
+          if (elapsed < 500) return;
+          const rawSnapshot = readSnapshot() ?? {};
+          const serialized = buildSerializedState(rawSnapshot);
+          browserDevTools.send({
+            type: 'SignalTree/reconnect'
+          }, serialized);
+          lastSnapshot = rawSnapshot;
+          try {
+            lastSerializedJson = JSON.stringify(serialized);
+          } catch {
+            lastSerializedJson = undefined;
+          }
+          lastSendAt = Date.now();
+        }
+        return;
+      }
+      if (!enableTimeTravel) return;
+      if (messageType !== 'DISPATCH') return;
+      const actionType = msg.payload && typeof msg.payload.type === 'string' ? msg.payload.type : undefined;
+      if (!actionType) return;
       if (actionType === 'JUMP_TO_STATE' || actionType === 'JUMP_TO_ACTION') {
         const nextState = parseDevToolsState(msg.state);
         applyExternalState(nextState);
@@ -479,44 +950,63 @@ function devTools(config = {}) {
       if (actionType === 'ROLLBACK') {
         const nextState = parseDevToolsState(msg.state);
         applyExternalState(nextState);
-        if (browserDevTools) {
-          const rawSnapshot = readSnapshot();
-          const sanitized = buildSerializedState(rawSnapshot);
-          browserDevTools.send('@@INIT', sanitized);
-        }
+        sendInit();
         return;
       }
       if (actionType === 'COMMIT') {
-        if (browserDevTools) {
-          const rawSnapshot = readSnapshot();
-          const sanitized = buildSerializedState(rawSnapshot);
-          browserDevTools.send('@@INIT', sanitized);
-        }
+        sendInit();
         return;
       }
       if (actionType === 'IMPORT_STATE') {
-        const lifted = msg.payload.nextLiftedState;
-        const computedStates = lifted?.computedStates ?? [];
-        const index = lifted?.currentStateIndex ?? computedStates.length - 1;
+        const lifted = msg.payload?.nextLiftedState;
+        const computedStates = Array.isArray(lifted?.computedStates) ? lifted.computedStates : [];
+        const indexRaw = typeof lifted?.currentStateIndex === 'number' ? lifted.currentStateIndex : computedStates.length - 1;
+        const index = Math.max(0, Math.min(indexRaw, computedStates.length - 1));
         const entry = computedStates[index];
         const nextState = parseDevToolsState(entry?.state);
         applyExternalState(nextState);
-        if (browserDevTools) {
-          const rawSnapshot = readSnapshot();
-          const sanitized = buildSerializedState(rawSnapshot);
-          browserDevTools.send('@@INIT', sanitized);
-        }
+        sendInit();
       }
     };
+    let groupUnregister = null;
     const initBrowserDevTools = () => {
+      if (aggregatedReduxInstance) {
+        const group = getOrCreateDevToolsGroup(aggregatedReduxInstance.id, aggregatedReduxInstance.name ?? displayName);
+        if (!groupUnregister) {
+          groupUnregister = group.registerTree(treeName, {
+            readSnapshot,
+            buildSerializedState,
+            applyExternalState,
+            formatPathFn,
+            isPathAllowed,
+            enableTimeTravel,
+            maxDepth,
+            maxArrayLength,
+            maxStringLength,
+            sendRateLimitMs
+          });
+        }
+        return;
+      }
       if (isConnected) return;
       if (!enableBrowserDevTools || typeof window === 'undefined' || !('__REDUX_DEVTOOLS_EXTENSION__' in window)) {
         return;
       }
+      const waiters = new Set();
+      devToolsConnections.set(groupId, {
+        status: 'connecting',
+        connection: null,
+        tools: null,
+        subscribed: false,
+        unsubscribe: null,
+        waiters
+      });
       try {
         const devToolsExt = window['__REDUX_DEVTOOLS_EXTENSION__'];
+        devToolsExtension = devToolsExt;
         const connection = devToolsExt.connect({
           name: displayName,
+          instanceId: groupId,
           features: {
             dispatch: true,
             jump: true,
@@ -538,13 +1028,27 @@ function devTools(config = {}) {
             };
           }
         }
-        const rawSnapshot = readSnapshot();
-        const sanitized = buildSerializedState(rawSnapshot);
-        browserDevTools.send('@@INIT', sanitized);
-        lastSnapshot = rawSnapshot;
+        const connEntry = devToolsConnections.get(groupId);
+        if (connEntry) {
+          connEntry.status = 'connected';
+          connEntry.connection = browserDevToolsConnection;
+          connEntry.tools = browserDevTools;
+          connEntry.subscribed = !!browserDevTools?.subscribe;
+          connEntry.unsubscribe = unsubscribeDevTools;
+          for (const waiter of connEntry.waiters) {
+            try {
+              waiter(connEntry);
+            } catch {}
+          }
+          connEntry.waiters.clear();
+        }
+        sendInit();
         isConnected = true;
-        console.log(`🔗 Connected to Redux DevTools as "${displayName}"`);
+        if (enableLogging) {
+          console.log(`🔗 Connected to Redux DevTools as "${displayName}"`);
+        }
       } catch (e) {
+        devToolsConnections.delete(groupId);
         console.warn('[SignalTree] Failed to connect to Redux DevTools:', e);
       }
     };
@@ -569,7 +1073,16 @@ function devTools(config = {}) {
       if (duration > performanceThreshold) {
         logger.logPerformanceWarning('core', 'update', duration, performanceThreshold);
       }
-      if (browserDevTools) {
+      if (aggregatedReduxInstance) {
+        const group = devToolsGroups.get(aggregatedReduxInstance.id);
+        if (group) {
+          group.enqueue(treeName, [], undefined, {
+            timestamp: Date.now(),
+            source: 'tree.update',
+            duration
+          });
+        }
+      } else if (browserDevTools) {
         scheduleSend(undefined, {
           source: 'tree.update',
           duration
@@ -631,58 +1144,152 @@ function devTools(config = {}) {
         const profile = activeProfiles.get(profileId);
         if (profile) {
           const duration = performance.now() - profile.startTime;
-          activityTracker.trackMethodCall(profile.module, profile.operation, duration);
+          metrics.trackModuleUpdate(profile.module, duration);
           activeProfiles.delete(profileId);
         }
       },
-      connectDevTools: name => {
-        if (!browserDevTools || !isConnected) {
-          initBrowserDevTools();
-        }
-        if (browserDevTools) {
-          const rawSnapshot = readSnapshot();
-          const sanitized = buildSerializedState(rawSnapshot);
-          browserDevTools.send('@@INIT', sanitized);
-          lastSnapshot = rawSnapshot;
-          console.log(`🔗 Connected to Redux DevTools as "${name}"`);
-        }
-      },
-      exportDebugSession: () => ({
-        metrics: metrics.signal(),
-        modules: activityTracker.getAllModules(),
-        logs: logger.exportLogs(),
-        compositionHistory: [...compositionHistory]
-      })
-    };
-    const methods = {
-      connectDevTools() {
+      connectDevTools: () => {
         initBrowserDevTools();
       },
-      disconnectDevTools() {
-        try {
-          unsubscribeDevTools?.();
-        } catch {}
-        try {
-          browserDevToolsConnection?.unsubscribe?.();
-        } catch {}
-        try {
-          browserDevToolsConnection?.disconnect?.();
-        } catch {}
-        browserDevTools = null;
-        browserDevToolsConnection = null;
-        isConnected = false;
-        if (unsubscribeNotifier) {
-          unsubscribeNotifier();
-          unsubscribeNotifier = null;
+      exportDebugSession: () => {
+        return {
+          metrics: metrics.signal(),
+          modules: activityTracker.getAllModules(),
+          logs: logger.exportLogs(),
+          compositionHistory
+        };
+      }
+    };
+    const shouldFilterByOwnership = Boolean(aggregatedReduxInstance);
+    const treeTopKeys = new Set();
+    const refreshTreeTopKeys = () => {
+      treeTopKeys.clear();
+      try {
+        if ('$' in tree) {
+          for (const key of Object.keys(tree.$)) {
+            treeTopKeys.add(key);
+          }
         }
-        if (unsubscribeFlush) {
-          unsubscribeFlush();
-          unsubscribeFlush = null;
+      } catch {}
+    };
+    refreshTreeTopKeys();
+    const isPathOwnedByTree = path => {
+      if (!shouldFilterByOwnership) return true;
+      if (treeTopKeys.size === 0) return true;
+      const root = path.split('.')[0];
+      if (treeTopKeys.has(root)) return true;
+      refreshTreeTopKeys();
+      return treeTopKeys.has(root);
+    };
+    const notifier = getPathNotifier();
+    const restoreInterceptors = [];
+    try {
+      if ('$' in tree) {
+        const treeNode = tree.$;
+        for (const key of treeTopKeys) {
+          const sig = treeNode[key];
+          if (typeof sig === 'function' && 'set' in sig && 'update' in sig && typeof sig.set === 'function' && typeof sig.update === 'function' && !('add' in sig) && !('remove' in sig)) {
+            const original = sig;
+            const originalSet = original.set.bind(original);
+            const originalUpdate = original.update.bind(original);
+            restoreInterceptors.push(() => {
+              original.set = originalSet;
+              original.update = originalUpdate;
+            });
+            original.set = value => {
+              const prev = original();
+              originalSet(value);
+              const next = original();
+              if (next !== prev) {
+                notifier.notify(key, next, prev);
+              }
+            };
+            original.update = updater => {
+              const prev = original();
+              originalUpdate(updater);
+              const next = original();
+              if (next !== prev) {
+                notifier.notify(key, next, prev);
+              }
+            };
+          }
         }
-        unsubscribeDevTools = null;
-        if (effectRef) {
-          effectRef.destroy();
-          effectRef = null;
+      }
+    } catch {}
+    let unsubscribePathNotifier = null;
+    let unsubscribePathFlush = null;
+    unsubscribePathNotifier = notifier.subscribe('**', (_value, _prev, path) => {
+      if (isApplyingExternalState) return;
+      if (!isPathOwnedByTree(path)) return;
+      if (!isPathAllowed(path)) return;
+      pendingPaths.push(path);
+    });
+    unsubscribePathFlush = notifier.onFlush(() => {
+      if (isApplyingExternalState) return;
+      if (pendingPaths.length === 0) return;
+      if (aggregatedReduxInstance) {
+        const group = devToolsGroups.get(aggregatedReduxInstance.id);
+        if (group) {
+          group.enqueue(treeName, pendingPaths, undefined, {
+            timestamp: Date.now(),
+            source: 'path-notifier'
+          });
+          pendingPaths = [];
+        }
+      } else {
+        if (!browserDevTools) {
+          pendingPaths = [];
+          return;
+        }
+        scheduleSend(undefined, {
+          source: 'path-notifier'
+        });
+      }
+    });
+    const result = Object.assign(enhancedTree, {
+      __devTools: devToolsInterface,
+      connectDevTools: devToolsInterface.connectDevTools,
+      exportDebugSession: devToolsInterface.exportDebugSession,
+      disconnectDevTools: () => {
+        if (unsubscribePathNotifier) {
+          unsubscribePathNotifier();
+          unsubscribePathNotifier = null;
+        }
+        if (unsubscribePathFlush) {
+          unsubscribePathFlush();
+          unsubscribePathFlush = null;
+        }
+        for (const restore of restoreInterceptors) {
+          try {
+            restore();
+          } catch {}
+        }
+        if (aggregatedReduxInstance) {
+          if (groupUnregister) {
+            groupUnregister();
+            groupUnregister = null;
+          }
+        } else {
+          if (browserDevToolsConnection) {
+            try {
+              browserDevToolsConnection.init({});
+            } catch {}
+          }
+          try {
+            unsubscribeDevTools?.();
+          } catch {}
+          try {
+            browserDevToolsConnection?.unsubscribe?.();
+          } catch {}
+          try {
+            browserDevToolsConnection?.disconnect?.();
+          } catch {}
+          browserDevToolsConnection = null;
+          browserDevTools = null;
+          devToolsExtension = null;
+          isConnected = false;
+          unsubscribeDevTools = null;
+          devToolsConnections.delete(groupId);
         }
         if (sendTimer) {
           clearTimeout(sendTimer);
@@ -695,38 +1302,13 @@ function devTools(config = {}) {
         pendingSource = undefined;
         pendingDuration = undefined;
         lastSnapshot = undefined;
+        lastSerializedJson = undefined;
       }
-    };
-    enhancedTree['__devTools'] = devToolsInterface;
-    try {
+    });
+    if (enableBrowserDevTools) {
       initBrowserDevTools();
-      const notifier = getPathNotifier();
-      unsubscribeNotifier = notifier.subscribe('**', (_value, _prev, path) => {
-        if (!isPathAllowed(path)) return;
-        pendingPaths.push(path);
-      });
-      unsubscribeFlush = notifier.onFlush(() => {
-        if (!browserDevTools) {
-          pendingPaths = [];
-          return;
-        }
-        if (pendingPaths.length === 0) return;
-        scheduleSend(undefined, {
-          source: 'path-notifier'
-        });
-      });
-      effectRef = effect(() => {
-        void originalTreeCall();
-        if (!effectPrimed) {
-          effectPrimed = true;
-          return;
-        }
-        scheduleSend(undefined, {
-          source: 'signal'
-        });
-      });
-    } catch {}
-    return Object.assign(enhancedTree, methods);
+    }
+    return result;
   };
 }
 function enableDevTools(treeName = 'SignalTree') {