nuxt-devtools-observatory 0.1.32 → 0.1.34

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addServerPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addVitePlugin, addImports, addPlugin, addServerPlugin } from '@nuxt/kit';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
 import sirv from 'sirv';
 import { parse } from '@babel/parser';
@@ -209,10 +209,6 @@ function fetchInstrumentPlugin() {
           plugins: ["typescript"]
         });
         let modified = false;
-        let needsFetchCallHelper = false;
-        let needsTracedAsyncDataHelper = false;
-        const hasFetchCallImport = scriptCode.includes("__devFetchCall");
-        const hasTracedAsyncDataImport = scriptCode.includes("useTracedAsyncData");
         traverse$1(ast, {
           CallExpression(path) {
             if (path.node.__observatoryTransformed) {
@@ -284,7 +280,6 @@ function fetchInstrumentPlugin() {
               ]);
               newCall.__observatoryTransformed = true;
               path.replaceWith(newCall);
-              needsTracedAsyncDataHelper = true;
               modified = true;
             } else {
               const newCall = t.callExpression(t.identifier("__devFetchCall"), [
@@ -294,7 +289,6 @@ function fetchInstrumentPlugin() {
                 meta
               ]);
               newCall.__observatoryTransformed = true;
-              needsFetchCallHelper = true;
               path.replaceWith(newCall);
               modified = true;
             }
@@ -303,18 +297,12 @@ function fetchInstrumentPlugin() {
         if (!modified) {
           return null;
         }
-        const fetchImportNames = [needsFetchCallHelper && !hasFetchCallImport ? "__devFetchCall" : ""].filter(Boolean);
-        const fetchImportStatement = fetchImportNames.length ? `import { ${fetchImportNames.join(", ")} } from 'nuxt-devtools-observatory/runtime/fetch-registry';
-` : "";
-        const asyncDataImportStatement = needsTracedAsyncDataHelper && !hasTracedAsyncDataImport ? `import { useTracedAsyncData } from 'nuxt-devtools-observatory/runtime/async-data-instrumentation';
-` : "";
-        const importStatement = fetchImportStatement + asyncDataImportStatement;
         const output = generate$1(ast, { retainLines: true }, scriptCode);
         let finalCode;
         if (isVue) {
-          finalCode = code.slice(0, scriptStart) + importStatement + output.code + code.slice(scriptStart + scriptCode.length);
+          finalCode = code.slice(0, scriptStart) + output.code + code.slice(scriptStart + scriptCode.length);
         } else {
-          finalCode = importStatement + output.code;
+          finalCode = output.code;
         }
         return {
           code: finalCode,
@@ -530,6 +518,7 @@ const defaults = {
   fetchDashboard: process.env.OBSERVATORY_FETCH_DASHBOARD === "true",
   provideInjectGraph: process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH === "true",
   composableTracker: process.env.OBSERVATORY_COMPOSABLE_TRACKER === "true",
+  piniaTracker: process.env.OBSERVATORY_PINIA_TRACKER === "true",
   renderHeatmap: process.env.OBSERVATORY_RENDER_HEATMAP === "true",
   transitionTracker: process.env.OBSERVATORY_TRANSITION_TRACKER === "true",
   traceViewer: process.env.OBSERVATORY_TRACE_VIEWER === "true",
@@ -537,9 +526,11 @@ const defaults = {
   heatmapThresholdTime: process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME) : 1600,
   maxFetchEntries: process.env.OBSERVATORY_MAX_FETCH_ENTRIES ? Number(process.env.OBSERVATORY_MAX_FETCH_ENTRIES) : 200,
   maxPayloadBytes: process.env.OBSERVATORY_MAX_PAYLOAD_BYTES ? Number(process.env.OBSERVATORY_MAX_PAYLOAD_BYTES) : 1e4,
+  fetchPageSize: process.env.OBSERVATORY_FETCH_PAGE_SIZE ? Number(process.env.OBSERVATORY_FETCH_PAGE_SIZE) : 20,
   maxTransitions: process.env.OBSERVATORY_MAX_TRANSITIONS ? Number(process.env.OBSERVATORY_MAX_TRANSITIONS) : 500,
   maxComposableHistory: process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY) : 50,
   maxComposableEntries: process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300,
+  maxPiniaTimeline: process.env.OBSERVATORY_MAX_PINIA_TIMELINE ? Number(process.env.OBSERVATORY_MAX_PINIA_TIMELINE) : 100,
   maxRenderTimeline: process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100,
   composableNavigationMode: process.env.OBSERVATORY_COMPOSABLE_NAVIGATION_MODE === "session" ? "session" : "route",
   heatmapHideInternals: process.env.OBSERVATORY_HEATMAP_HIDE_INTERNALS === "true",
@@ -568,6 +559,7 @@ const module$1 = defineNuxtModule({
       fetchDashboard: options.fetchDashboard ?? (process.env.OBSERVATORY_FETCH_DASHBOARD ? process.env.OBSERVATORY_FETCH_DASHBOARD === "true" : true),
       provideInjectGraph: options.provideInjectGraph ?? (process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH ? process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH === "true" : true),
       composableTracker: options.composableTracker ?? (process.env.OBSERVATORY_COMPOSABLE_TRACKER ? process.env.OBSERVATORY_COMPOSABLE_TRACKER === "true" : true),
+      piniaTracker: options.piniaTracker ?? (process.env.OBSERVATORY_PINIA_TRACKER ? process.env.OBSERVATORY_PINIA_TRACKER === "true" : true),
       renderHeatmap: options.renderHeatmap ?? (process.env.OBSERVATORY_RENDER_HEATMAP ? process.env.OBSERVATORY_RENDER_HEATMAP === "true" : true),
       transitionTracker: options.transitionTracker ?? (process.env.OBSERVATORY_TRANSITION_TRACKER ? process.env.OBSERVATORY_TRANSITION_TRACKER === "true" : true),
       traceViewer: options.traceViewer ?? (process.env.OBSERVATORY_TRACE_VIEWER ? process.env.OBSERVATORY_TRACE_VIEWER === "true" : true),
@@ -576,9 +568,11 @@ const module$1 = defineNuxtModule({
       heatmapThresholdTime: options.heatmapThresholdTime ?? (process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_TIME) : 1600),
       maxFetchEntries: options.maxFetchEntries ?? (process.env.OBSERVATORY_MAX_FETCH_ENTRIES ? Number(process.env.OBSERVATORY_MAX_FETCH_ENTRIES) : 200),
       maxPayloadBytes: options.maxPayloadBytes ?? (process.env.OBSERVATORY_MAX_PAYLOAD_BYTES ? Number(process.env.OBSERVATORY_MAX_PAYLOAD_BYTES) : 1e4),
+      fetchPageSize: options.fetchPageSize ?? (process.env.OBSERVATORY_FETCH_PAGE_SIZE ? Number(process.env.OBSERVATORY_FETCH_PAGE_SIZE) : 20),
       maxTransitions: options.maxTransitions ?? (process.env.OBSERVATORY_MAX_TRANSITIONS ? Number(process.env.OBSERVATORY_MAX_TRANSITIONS) : 500),
       maxComposableHistory: options.maxComposableHistory ?? (process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY) : 50),
       maxComposableEntries: options.maxComposableEntries ?? (process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300),
+      maxPiniaTimeline: options.maxPiniaTimeline ?? (process.env.OBSERVATORY_MAX_PINIA_TIMELINE ? Number(process.env.OBSERVATORY_MAX_PINIA_TIMELINE) : 100),
       maxRenderTimeline: options.maxRenderTimeline ?? (process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100),
       composableNavigationMode: options.composableNavigationMode ?? (process.env.OBSERVATORY_COMPOSABLE_NAVIGATION_MODE === "session" ? "session" : "route"),
       debugRpc: options.debugRpc ?? (process.env.OBSERVATORY_DEBUG_RPC ? process.env.OBSERVATORY_DEBUG_RPC === "true" : false)
@@ -599,6 +593,10 @@ const module$1 = defineNuxtModule({
     const vitePluginScope = resolved.instrumentServer ? { server: true, client: true } : { server: false, client: true };
     if (resolved.fetchDashboard) {
       addVitePlugin(fetchInstrumentPlugin(), vitePluginScope);
+      addImports([
+        { name: "__devFetchCall", from: resolver.resolve("./runtime/composables/fetch-registry") },
+        { name: "useTracedAsyncData", from: resolver.resolve("./runtime/instrumentation/asyncData") }
+      ]);
     }
     if (resolved.provideInjectGraph) {
       addVitePlugin(provideInjectPlugin(), vitePluginScope);
@@ -609,7 +607,7 @@ const module$1 = defineNuxtModule({
     if (resolved.transitionTracker) {
       addVitePlugin(transitionTrackerPlugin(), vitePluginScope);
     }
-    if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.renderHeatmap || resolved.transitionTracker) {
+    if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.piniaTracker || resolved.renderHeatmap || resolved.transitionTracker) {
       addPlugin(resolver.resolve("./runtime/plugin"));
     }
     if (resolved.fetchDashboard || resolved.traceViewer && resolved.instrumentServer) {
@@ -626,6 +624,7 @@ const module$1 = defineNuxtModule({
       fetch: [],
       provideInject: { provides: [], injects: [] },
       composables: [],
+      piniaStores: [],
       renders: [],
       transitions: [],
       traces: [],
@@ -633,7 +632,9 @@ const module$1 = defineNuxtModule({
         fetchDashboard: !!resolved.fetchDashboard,
         provideInjectGraph: !!resolved.provideInjectGraph,
         composableTracker: !!resolved.composableTracker,
+        piniaTracker: !!resolved.piniaTracker,
         composableNavigationMode: resolved.composableNavigationMode,
+        fetchPageSize: resolved.fetchPageSize,
         renderHeatmap: !!resolved.renderHeatmap,
         transitionTracker: !!resolved.transitionTracker,
         traceViewer: !!resolved.traceViewer
@@ -660,6 +661,7 @@ const module$1 = defineNuxtModule({
           debugLog("received host snapshot", {
             fetch: Array.isArray(snapshot.fetch) ? snapshot.fetch.length : 0,
             composables: Array.isArray(snapshot.composables) ? snapshot.composables.length : 0,
+            piniaStores: Array.isArray(snapshot.piniaStores) ? snapshot.piniaStores.length : 0,
             renders: Array.isArray(snapshot.renders) ? snapshot.renders.length : 0,
             transitions: Array.isArray(snapshot.transitions) ? snapshot.transitions.length : 0
           });
@@ -685,21 +687,20 @@ const module$1 = defineNuxtModule({
           },
           async editComposableValue(id, key, value) {
             emitCommand({ cmd: "edit-composable", id, key, value });
+          },
+          async clearPiniaStores() {
+            emitCommand({ cmd: "clear-pinia" });
+          },
+          async editPiniaState(storeId, path, value) {
+            emitCommand({ cmd: "edit-pinia", storeId, path, value });
           }
         },
         nuxt
       );
       rpc.broadcast.onSnapshot.asEvent(latestSnapshot);
     }, nuxt);
-    nuxt.hook("render:response", (response, { url }) => {
-      if (url.startsWith("/trackers") || url === "/" || url.startsWith("/index.html")) {
-        const configScript = `<script>window.__observatoryConfig = ${JSON.stringify(nuxt.options.runtimeConfig.public.observatory)};<\/script>`;
-        response.body = response.body.replace("<head>", `<head>
-${configScript}`);
-      }
-    });
     nuxt.hook("devtools:customTabs", (tabs) => {
-      if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.renderHeatmap || resolved.transitionTracker) {
+      if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.piniaTracker || resolved.renderHeatmap || resolved.transitionTracker) {
         tabs.push({
           name: "observatory-trackers",
           title: "Observatory Trackers",
@@ -713,14 +714,17 @@ ${configScript}`);
       fetchDashboard: resolved.fetchDashboard,
       provideInjectGraph: resolved.provideInjectGraph,
       composableTracker: resolved.composableTracker,
+      piniaTracker: resolved.piniaTracker,
       renderHeatmap: resolved.renderHeatmap,
       transitionTracker: resolved.transitionTracker,
       traceViewer: resolved.traceViewer,
       maxFetchEntries: resolved.maxFetchEntries,
       maxPayloadBytes: resolved.maxPayloadBytes,
+      fetchPageSize: resolved.fetchPageSize,
       maxTransitions: resolved.maxTransitions,
       maxComposableHistory: resolved.maxComposableHistory,
       maxComposableEntries: resolved.maxComposableEntries,
+      maxPiniaTimeline: resolved.maxPiniaTimeline,
       maxRenderTimeline: resolved.maxRenderTimeline,
       composableNavigationMode: resolved.composableNavigationMode,
       heatmapHideInternals: resolved.heatmapHideInternals,

package/dist/runtime/composables/pinia-store-registry.d.ts

@@ -0,0 +1,44 @@
+import type { PiniaHydrationEvent, PiniaStateDiff, PiniaStoreDependency } from '../../types/snapshot.js';
+export declare function setupPiniaStoreRegistry(options: {
+    pinia?: unknown;
+    nuxtPayload?: unknown;
+    maxTimeline?: number;
+    stackProvider?: () => string[];
+}): {
+    clear: () => void;
+    editState: (storeId: string, path: string, value: unknown) => void;
+    getAll: () => {
+        state: unknown;
+        dependencies: PiniaStoreDependency[];
+        hydrationTimeline: {
+            at: number;
+            source: "nuxt-payload" | "persistedstate" | "runtime" | "unknown";
+            details?: string;
+        }[];
+        timeline: {
+            beforeState: unknown;
+            afterState: unknown;
+            diff: PiniaStateDiff[];
+            id: string;
+            storeId: string;
+            storeName: string;
+            kind: "action" | "mutation";
+            name: string;
+            startTime: number;
+            endTime?: number;
+            durationMs?: number;
+            status: "active" | "ok" | "error";
+            callerStack?: string[];
+            payload?: unknown;
+            error?: string;
+        }[];
+        id: string;
+        name: string;
+        lastMutationAt?: number;
+        lastActionAt?: number;
+        hydration?: PiniaHydrationEvent;
+    }[];
+    getSnapshot: () => string;
+    onChange: (cb: () => void) => () => void;
+    teardown: () => void;
+};

package/dist/runtime/composables/pinia-store-registry.js

@@ -0,0 +1,447 @@
+import { getCurrentInstance } from "vue";
+function nowMs() {
+  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+function safeSnapshot(value) {
+  try {
+    return JSON.parse(JSON.stringify(value));
+  } catch {
+    return value;
+  }
+}
+function parsePath(path) {
+  return path.replace(/\[(\d+)\]/g, ".$1").split(".").map((part) => part.trim()).filter(Boolean).map((part) => /^\d+$/.test(part) ? Number(part) : part);
+}
+function setAtPath(target, path, value) {
+  const parts = parsePath(path);
+  if (parts.length === 0) {
+    return;
+  }
+  let cursor = target;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const key = parts[i];
+    if (!cursor || typeof cursor !== "object") {
+      return;
+    }
+    const objectCursor = cursor;
+    const next = objectCursor[String(key)];
+    if (next === void 0 || next === null || typeof next !== "object") {
+      objectCursor[String(key)] = typeof parts[i + 1] === "number" ? [] : {};
+    }
+    cursor = objectCursor[String(key)];
+  }
+  if (!cursor || typeof cursor !== "object") {
+    return;
+  }
+  ;
+  cursor[String(parts[parts.length - 1])] = value;
+}
+function collectDiff(before, after, path = "", depth = 0, out = []) {
+  if (out.length >= 80 || depth > 6) {
+    return out;
+  }
+  if (Object.is(before, after)) {
+    return out;
+  }
+  const beforeIsObj = before !== null && typeof before === "object";
+  const afterIsObj = after !== null && typeof after === "object";
+  if (!beforeIsObj || !afterIsObj) {
+    out.push({ path: path || "$", before, after });
+    return out;
+  }
+  const beforeRec = before;
+  const afterRec = after;
+  const keys = /* @__PURE__ */ new Set([...Object.keys(beforeRec), ...Object.keys(afterRec)]);
+  for (const key of keys) {
+    const nextPath = path ? `${path}.${key}` : key;
+    collectDiff(beforeRec[key], afterRec[key], nextPath, depth + 1, out);
+    if (out.length >= 80) {
+      break;
+    }
+  }
+  return out;
+}
+function stackFromError() {
+  const stack = new Error().stack;
+  if (!stack) {
+    return [];
+  }
+  return stack.split("\n").slice(2, 10).map((line) => line.trim());
+}
+function inferDependencyFromInstance() {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    return null;
+  }
+  const file = instance.type?.__file;
+  const name = instance.type?.__name || instance.type?.name || (file?.split("/").pop() ?? `component:${instance.uid}`);
+  return {
+    id: `component:${instance.uid}`,
+    kind: "component",
+    name,
+    file
+  };
+}
+function parseStackLine(line) {
+  const callsiteMatch = line.match(/^at\s+(.+?)\s+\((.+?):\d+:\d+\)$/);
+  if (callsiteMatch) {
+    return {
+      name: callsiteMatch[1]?.trim(),
+      file: callsiteMatch[2]?.trim()
+    };
+  }
+  const fileOnlyMatch = line.match(/^at\s+(.+?):\d+:\d+$/);
+  if (fileOnlyMatch) {
+    return {
+      file: fileOnlyMatch[1]?.trim()
+    };
+  }
+  return {};
+}
+function inferDependenciesFromStack(stack) {
+  const result = [];
+  for (const line of stack) {
+    const parsed = parseStackLine(line);
+    const file = parsed.file;
+    const rawName = parsed.name;
+    const name = rawName?.includes(".") ? rawName.split(".").pop() : rawName;
+    if (name && /^use[A-Z]/.test(name)) {
+      result.push({
+        id: `composable:${file ?? name}`,
+        kind: "composable",
+        name,
+        file
+      });
+    }
+    if (file?.includes("/composables/")) {
+      const fileName = file.split("/").pop() ?? "";
+      const composableName = fileName.replace(/\.(mjs|cjs|js|ts|tsx|vue)$/i, "");
+      if (/^use[A-Z]/.test(composableName)) {
+        result.push({
+          id: `composable-file:${file}`,
+          kind: "composable",
+          name: composableName,
+          file
+        });
+      }
+    }
+    if (file?.endsWith(".vue")) {
+      const fileName = file.split("/").pop() ?? file;
+      const componentName = fileName.replace(/\.vue$/i, "");
+      result.push({
+        id: `component-file:${file}`,
+        kind: "component",
+        name: componentName,
+        file
+      });
+    }
+  }
+  return result;
+}
+function pushUniqueDependency(deps, dependency) {
+  if (!dependency.id) {
+    return;
+  }
+  if (deps.some((item) => item.id === dependency.id)) {
+    return;
+  }
+  deps.push(dependency);
+}
+export function setupPiniaStoreRegistry(options) {
+  const pinia = options.pinia;
+  const maxTimeline = typeof options.maxTimeline === "number" ? options.maxTimeline : 100;
+  const stackProvider = options.stackProvider ?? stackFromError;
+  const entries = /* @__PURE__ */ new Map();
+  const stores = /* @__PURE__ */ new Map();
+  const stopHandles = /* @__PURE__ */ new Map();
+  const activeActions = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  let dirty = true;
+  let cached = "[]";
+  function notifyChange() {
+    dirty = true;
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+  function inferPersistedStorageDetails(store) {
+    const persistConfig = store.$persist ?? store.$options?.persist ?? store.persist;
+    if (!persistConfig) {
+      return "Persist plugin detected";
+    }
+    const list = Array.isArray(persistConfig) ? persistConfig : [persistConfig];
+    const storageLabels = /* @__PURE__ */ new Set();
+    for (const item of list) {
+      if (!item || typeof item !== "object") {
+        continue;
+      }
+      const storage = item.storage;
+      if (!storage || typeof storage !== "object") {
+        continue;
+      }
+      const candidate = storage;
+      if (typeof localStorage !== "undefined" && candidate.getItem === localStorage.getItem) {
+        storageLabels.add("localStorage");
+      } else if (typeof sessionStorage !== "undefined" && candidate.getItem === sessionStorage.getItem) {
+        storageLabels.add("sessionStorage");
+      } else {
+        storageLabels.add("custom storage");
+      }
+    }
+    if (storageLabels.size === 0) {
+      return "Persist plugin detected";
+    }
+    return `Persist plugin detected (${[...storageLabels].join(", ")})`;
+  }
+  function inferHydrationTimeline(store) {
+    const payload = options.nuxtPayload;
+    const fromPayload = !!payload?.pinia?.[store.$id];
+    const hasPersist = !!store.$persist || !!store.$options?.persist || !!store.persist;
+    const events = [];
+    let at = nowMs();
+    if (fromPayload) {
+      events.push({
+        at,
+        source: "nuxt-payload",
+        details: "Nuxt payload state detected"
+      });
+      at += 0.01;
+    }
+    if (hasPersist) {
+      events.push({
+        at,
+        source: "persistedstate",
+        details: inferPersistedStorageDetails(store)
+      });
+      at += 0.01;
+    }
+    if (events.length === 0) {
+      events.push({
+        at,
+        source: "runtime",
+        details: void 0
+      });
+    }
+    return events;
+  }
+  function trimTimeline(entry) {
+    if (entry.timeline.length <= maxTimeline) {
+      return;
+    }
+    entry.timeline.splice(0, entry.timeline.length - maxTimeline);
+  }
+  function ensureStore(store) {
+    if (!store?.$id || stores.has(store.$id)) {
+      return;
+    }
+    stores.set(store.$id, store);
+    const entry = {
+      id: store.$id,
+      name: store.$id,
+      state: safeSnapshot(store.$state),
+      dependencies: [],
+      timeline: [],
+      hydrationTimeline: inferHydrationTimeline(store),
+      hydration: void 0
+    };
+    entry.hydration = entry.hydrationTimeline[0];
+    entries.set(store.$id, entry);
+    const offAction = store.$onAction(({ name, args, after, onError }) => {
+      const actionId = `${store.$id}:action:${name}:${nowMs()}:${Math.random().toString(36).slice(2, 8)}`;
+      const start = nowMs();
+      const startSnapshot = safeSnapshot(store.$state);
+      const stack = stackProvider();
+      const dependenciesFromStack = inferDependenciesFromStack(stack);
+      const dependencyFromInstance = inferDependencyFromInstance();
+      const current = entries.get(store.$id);
+      if (!current) {
+        return;
+      }
+      if (dependencyFromInstance) {
+        pushUniqueDependency(current.dependencies, dependencyFromInstance);
+      }
+      for (const dependency of dependenciesFromStack) {
+        pushUniqueDependency(current.dependencies, dependency);
+      }
+      const event = {
+        id: actionId,
+        storeId: store.$id,
+        storeName: store.$id,
+        kind: "action",
+        name,
+        startTime: start,
+        status: "active",
+        beforeState: startSnapshot,
+        afterState: startSnapshot,
+        diff: [],
+        payload: safeSnapshot(args),
+        callerStack: stack
+      };
+      current.timeline.push(event);
+      trimTimeline(current);
+      current.lastActionAt = start;
+      activeActions.set(actionId, event);
+      notifyChange();
+      after(() => {
+        const end = nowMs();
+        const done = entries.get(store.$id);
+        if (!done) {
+          return;
+        }
+        const afterState = safeSnapshot(store.$state);
+        event.endTime = end;
+        event.durationMs = end - start;
+        event.status = "ok";
+        event.afterState = afterState;
+        event.diff = collectDiff(event.beforeState, afterState);
+        done.state = afterState;
+        done.lastMutationAt = end;
+        activeActions.delete(actionId);
+        notifyChange();
+      });
+      onError((error) => {
+        const end = nowMs();
+        const done = entries.get(store.$id);
+        if (!done) {
+          return;
+        }
+        const afterState = safeSnapshot(store.$state);
+        event.endTime = end;
+        event.durationMs = end - start;
+        event.status = "error";
+        event.afterState = afterState;
+        event.diff = collectDiff(event.beforeState, afterState);
+        event.error = error instanceof Error ? error.message : String(error);
+        done.state = afterState;
+        done.lastMutationAt = end;
+        activeActions.delete(actionId);
+        notifyChange();
+      });
+    });
+    const offSub = store.$subscribe(
+      (mutation, state) => {
+        const current = entries.get(store.$id);
+        if (!current) {
+          return;
+        }
+        const beforeState = safeSnapshot(current.state);
+        const afterState = safeSnapshot(state);
+        const at = nowMs();
+        const event = {
+          id: `${store.$id}:mutation:${at}:${Math.random().toString(36).slice(2, 8)}`,
+          storeId: store.$id,
+          storeName: store.$id,
+          kind: "mutation",
+          name: mutation.type,
+          startTime: at,
+          endTime: at,
+          durationMs: 0,
+          status: "ok",
+          beforeState,
+          afterState,
+          diff: collectDiff(beforeState, afterState),
+          payload: safeSnapshot(mutation.payload),
+          callerStack: stackProvider()
+        };
+        current.timeline.push(event);
+        trimTimeline(current);
+        current.state = afterState;
+        current.lastMutationAt = at;
+        notifyChange();
+      },
+      { detached: true, flush: "sync" }
+    );
+    stopHandles.set(store.$id, [offAction, offSub]);
+    notifyChange();
+  }
+  function clear() {
+    for (const [id, entry] of entries) {
+      const store = stores.get(id);
+      entry.timeline = [];
+      entry.dependencies = [];
+      entry.state = safeSnapshot(store?.$state ?? entry.state);
+      entry.lastActionAt = void 0;
+      entry.lastMutationAt = void 0;
+    }
+    notifyChange();
+  }
+  function editState(storeId, path, value) {
+    const store = stores.get(storeId);
+    if (!store || !path) {
+      return;
+    }
+    if (typeof store.$patch === "function") {
+      ;
+      store.$patch((state) => {
+        setAtPath(state, path, value);
+      });
+    } else {
+      setAtPath(store.$state, path, value);
+    }
+    notifyChange();
+  }
+  function getAll() {
+    return [...entries.values()].map((entry) => ({
+      ...entry,
+      state: safeSnapshot(entry.state),
+      dependencies: [...entry.dependencies],
+      hydrationTimeline: entry.hydrationTimeline.map((event) => ({ ...event })),
+      timeline: entry.timeline.map((event) => ({
+        ...event,
+        beforeState: safeSnapshot(event.beforeState),
+        afterState: safeSnapshot(event.afterState),
+        diff: [...event.diff]
+      }))
+    }));
+  }
+  function getSnapshot() {
+    if (!dirty) {
+      return cached;
+    }
+    try {
+      cached = JSON.stringify(getAll());
+    } catch {
+      cached = "[]";
+    }
+    dirty = false;
+    return cached;
+  }
+  function onChange(cb) {
+    listeners.add(cb);
+    return () => {
+      listeners.delete(cb);
+    };
+  }
+  function teardown() {
+    for (const handlers of stopHandles.values()) {
+      for (const off of handlers) {
+        off();
+      }
+    }
+    stopHandles.clear();
+    stores.clear();
+    entries.clear();
+    activeActions.clear();
+    listeners.clear();
+    dirty = true;
+    cached = "[]";
+  }
+  if (pinia?._s) {
+    for (const store of pinia._s.values()) {
+      ensureStore(store);
+    }
+  }
+  if (typeof pinia?.use === "function") {
+    pinia.use(({ store }) => {
+      ensureStore(store);
+    });
+  }
+  return {
+    clear,
+    editState,
+    getAll,
+    getSnapshot,
+    onChange,
+    teardown
+  };
+}