nuxt-devtools-observatory 0.1.25 → 0.1.28

package/dist/module.mjs

@@ -1,4 +1,6 @@
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addServerPlugin } from '@nuxt/kit';
+import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
+import sirv from 'sirv';
 import { parse } from '@babel/parser';
 import _traverse from '@babel/traverse';
 import _generate from '@babel/generator';
@@ -544,6 +546,8 @@ function transitionTrackerPlugin() {
 }
 
 const defaults = {
+  // Auto-enable server instrumentation for SSR projects unless explicitly overridden.
+  // This ensures initial SSR snapshots include server-side composables/fetch events.
   instrumentServer: process.env.OBSERVATORY_INSTRUMENT_SERVER === "true",
   fetchDashboard: process.env.OBSERVATORY_FETCH_DASHBOARD === "true",
   provideInjectGraph: process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH === "true",
@@ -559,7 +563,8 @@ const defaults = {
   maxComposableEntries: process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300,
   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"
+  heatmapHideInternals: process.env.OBSERVATORY_HEATMAP_HIDE_INTERNALS === "true",
+  debugRpc: process.env.OBSERVATORY_DEBUG_RPC === "true"
 };
 const module$1 = defineNuxtModule({
   meta: {
@@ -586,7 +591,7 @@ const module$1 = defineNuxtModule({
       composableTracker: options.composableTracker ?? (process.env.OBSERVATORY_COMPOSABLE_TRACKER ? process.env.OBSERVATORY_COMPOSABLE_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),
-      instrumentServer: options.instrumentServer ?? (process.env.OBSERVATORY_INSTRUMENT_SERVER ? process.env.OBSERVATORY_INSTRUMENT_SERVER === "true" : false),
+      instrumentServer: options.instrumentServer ?? (process.env.OBSERVATORY_INSTRUMENT_SERVER ? process.env.OBSERVATORY_INSTRUMENT_SERVER === "true" : nuxt.options.ssr !== false),
       heatmapThresholdCount: options.heatmapThresholdCount ?? (process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT ? Number(process.env.OBSERVATORY_HEATMAP_THRESHOLD_COUNT) : 3),
       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),
@@ -595,7 +600,8 @@ const module$1 = defineNuxtModule({
       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),
       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")
+      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)
     };
     nuxt.hook("vite:extendConfig", (config) => {
       const alias = config.resolve?.alias;
@@ -626,34 +632,80 @@ const module$1 = defineNuxtModule({
     if (resolved.fetchDashboard) {
       addServerPlugin(resolver.resolve("./runtime/nitro/fetch-capture"));
     }
-    const CLIENT_PORT = 4949;
-    const clientOrigin = `http://localhost:${CLIENT_PORT}`;
-    let innerServer = null;
-    nuxt.hook("vite:serverCreated", async (_viteServer, env) => {
-      if (!env.isClient) {
-        return;
+    const base = "/__observatory";
+    const debugRpc = resolved.debugRpc === true;
+    const debugLog = (...args) => {
+      if (debugRpc) {
+        console.info("[observatory][rpc][server]", ...args);
+      }
+    };
+    let latestSnapshot = {
+      fetch: [],
+      provideInject: { provides: [], injects: [] },
+      composables: [],
+      renders: [],
+      transitions: [],
+      features: {
+        fetchDashboard: !!resolved.fetchDashboard,
+        provideInjectGraph: !!resolved.provideInjectGraph,
+        composableTracker: !!resolved.composableTracker,
+        composableNavigationMode: resolved.composableNavigationMode,
+        renderHeatmap: !!resolved.renderHeatmap,
+        transitionTracker: !!resolved.transitionTracker
       }
-      if (innerServer) {
+    };
+    let rpc = null;
+    let viteServer = null;
+    const emitCommand = (command) => {
+      if (!viteServer) {
+        console.warn("[observatory][rpc][server] command dropped (vite ws not ready)", command);
         return;
       }
-      const { createServer } = await import('vite');
-      const { default: vue } = await import('@vitejs/plugin-vue');
-      innerServer = await createServer({
-        root: resolver.resolve("../client"),
-        base: "/",
-        server: { port: CLIENT_PORT, strictPort: true, cors: true },
-        appType: "spa",
-        configFile: false,
-        plugins: [vue()],
-        logLevel: "warn"
-      });
-      await innerServer.listen();
-      nuxt.hook("close", () => {
-        innerServer?.close();
-        innerServer = null;
-      });
+      debugLog("send command", command);
+      viteServer.ws.send("observatory:command", command);
+    };
+    addVitePlugin({
+      name: "nuxt-devtools-observatory:sirv-client",
+      configureServer(server) {
+        viteServer = server;
+        const clientDist = resolver.resolve("../client/dist");
+        server.middlewares.use(base, sirv(clientDist, { dev: true, single: true }));
+        server.ws.on("observatory:snapshot", (snapshot) => {
+          latestSnapshot = snapshot;
+          debugLog("received host snapshot", {
+            fetch: Array.isArray(snapshot.fetch) ? snapshot.fetch.length : 0,
+            composables: Array.isArray(snapshot.composables) ? snapshot.composables.length : 0,
+            renders: Array.isArray(snapshot.renders) ? snapshot.renders.length : 0,
+            transitions: Array.isArray(snapshot.transitions) ? snapshot.transitions.length : 0
+          });
+          rpc?.broadcast.onSnapshot.asEvent(snapshot);
+        });
+      }
     });
-    const base = clientOrigin;
+    onDevToolsInitialized(() => {
+      rpc = extendServerRpc(
+        "observatory",
+        {
+          async getSnapshot() {
+            return latestSnapshot;
+          },
+          async requestSnapshot() {
+            emitCommand({ cmd: "request-snapshot" });
+          },
+          async clearComposables() {
+            emitCommand({ cmd: "clear-composables" });
+          },
+          async setComposableMode(mode) {
+            emitCommand({ cmd: "set-mode", mode });
+          },
+          async editComposableValue(id, key, value) {
+            emitCommand({ cmd: "edit-composable", id, key, 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>`;
@@ -667,13 +719,12 @@ ${configScript}`);
           name: "observatory-trackers",
           title: "Observatory Trackers",
           icon: "carbon:heat-map",
-          view: { type: "iframe", src: `${base}/trackers` }
+          view: { type: "iframe", src: `${base}/trackers${resolved.debugRpc ? "?debugRpc=1" : ""}` }
         });
       }
     });
     nuxt.options.runtimeConfig.public.observatory = {
       instrumentServer: resolved.instrumentServer,
-      clientOrigin,
       fetchDashboard: resolved.fetchDashboard,
       provideInjectGraph: resolved.provideInjectGraph,
       composableTracker: resolved.composableTracker,
@@ -688,7 +739,8 @@ ${configScript}`);
       composableNavigationMode: resolved.composableNavigationMode,
       heatmapHideInternals: resolved.heatmapHideInternals,
       heatmapThresholdCount: resolved.heatmapThresholdCount,
-      heatmapThresholdTime: resolved.heatmapThresholdTime
+      heatmapThresholdTime: resolved.heatmapThresholdTime,
+      debugRpc: resolved.debugRpc
     };
   }
 });

package/dist/runtime/composables/fetch-registry.js

@@ -218,6 +218,9 @@ export function __devFetchCall(originalFn, url, opts, meta) {
       }
     },
     onResponseError({ response }) {
+      const endTime = performance.now();
+      const ms = Math.round(endTime - lastCallStart);
+      registry.update(id, { status: "error", endTime, ms });
       if (typeof opts.onResponseError === "function") {
         opts.onResponseError({ response });
       }

package/dist/runtime/plugin.js

@@ -11,7 +11,15 @@ export default defineNuxtPlugin(() => {
   }
   const nuxtApp = useNuxtApp();
   const config = useRuntimeConfig().public.observatory;
+  const debugRpc = config.debugRpc === true;
+  const debugLog = (...args) => {
+    if (debugRpc) {
+      console.info("[observatory][rpc][host]", ...args);
+    }
+  };
   let composableNavigationMode = config.composableNavigationMode === "session" ? "session" : "route";
+  let heartbeatId = null;
+  let lastSnapshotSignature = "";
   if (config.renderHeatmap) {
     nuxtApp.vueApp.config.performance = true;
   }
@@ -36,75 +44,80 @@ export default defineNuxtPlugin(() => {
   if (import.meta.client) {
     delete window.__observatory__;
     window.__observatory__ = registries;
-    let lastMessageSourceRef = null;
-    let lastMessageOrigin = "";
-    const messageHandler = (event) => {
-      if (config.clientOrigin && event.origin !== config.clientOrigin) {
+    const composableRegistry = registries.composable;
+    if (composableRegistry && composableRegistry.onComposableChange) {
+      composableRegistry.onComposableChange(() => {
+        broadcastAll("composable:onChange");
+      });
+    }
+    import.meta.hot?.on("observatory:command", (rawPayload) => {
+      if (!rawPayload || typeof rawPayload !== "object") {
         return;
       }
-      const type = event.data?.type;
-      if (type === "observatory:request") {
-        lastMessageSourceRef = event.source ? new WeakRef(event.source) : null;
-        lastMessageOrigin = event.origin;
-        const source = event.source;
-        source?.postMessage({ type: "observatory:snapshot", data: buildSnapshot() }, event.origin);
+      const payload = rawPayload;
+      if (payload.cmd === "request-snapshot") {
+        debugLog("received command: request-snapshot");
+        broadcastAll("command:request-snapshot");
         return;
       }
-      if (type === "observatory:clear-composables") {
+      if (payload.cmd === "clear-composables") {
+        debugLog("received command: clear-composables");
         if (composableRegistry) {
-          composableRegistry.clear();
+          if (composableNavigationMode === "session") {
+            composableRegistry.clearNonLayout();
+          } else {
+            composableRegistry.clear();
+          }
         }
-        const source = event.source;
-        source?.postMessage({ type: "observatory:snapshot", data: buildSnapshot() }, event.origin);
+        broadcastAll("command:clear-composables");
         return;
       }
-      if (type === "observatory:set-composable-mode") {
-        const mode = event.data?.mode;
-        if (mode === "route" || mode === "session") {
-          composableNavigationMode = mode;
-        }
-        const source = event.source;
-        source?.postMessage({ type: "observatory:snapshot", data: buildSnapshot() }, event.origin);
-      }
-      if (type === "observatory:edit-composable") {
-        const { id, key, value } = event.data;
-        if (composableRegistry) {
-          composableRegistry.editValue(id, key, value);
+      if (payload.cmd === "set-mode") {
+        debugLog("received command: set-mode", payload.mode);
+        if (payload.mode === "route" || payload.mode === "session") {
+          composableNavigationMode = payload.mode;
         }
+        broadcastAll("command:set-mode");
+        return;
       }
-      if (type === "observatory:open-in-editor") {
-        const { file } = event.data;
-        if (file && file !== "unknown") {
-          const cleaned = file.replace(/^\/@fs/, "").replace(/\?.*$/, "");
-          fetch(`/__open-in-editor?file=${encodeURIComponent(cleaned)}`).catch(() => {
-          });
-        }
+      if (payload.cmd === "edit-composable") {
+        debugLog("received command: edit-composable", { id: payload.id, key: payload.key });
+        composableRegistry?.editValue(payload.id, payload.key, payload.value);
       }
-    };
-    window.addEventListener("message", messageHandler);
+    });
     nuxtApp.hook("app:beforeUnmount", () => {
-      window.removeEventListener("message", messageHandler);
-      lastMessageSourceRef = null;
+      import.meta.hot?.off("observatory:command");
+      if (heartbeatId !== null) {
+        window.clearInterval(heartbeatId);
+        heartbeatId = null;
+      }
     });
-    const composableRegistry = registries.composable;
-    if (composableRegistry && composableRegistry.onComposableChange) {
-      composableRegistry.onComposableChange(() => {
-        const lastMessageSource = lastMessageSourceRef?.deref();
-        if (!lastMessageSource || !lastMessageOrigin) {
-          return;
-        }
-        lastMessageSource.postMessage(
-          {
-            type: "observatory:snapshot",
-            data: buildSnapshot()
-          },
-          lastMessageOrigin
-        );
-      });
-    }
   }
   nuxtApp.hook("app:mounted", () => {
-    broadcastAll();
+    broadcastAll("app:mounted");
+    nextTick(() => {
+      broadcastAll("app:mounted:nextTick");
+    });
+    setTimeout(() => {
+      broadcastAll("app:mounted:50ms");
+    }, 50);
+    setTimeout(() => {
+      broadcastAll("app:mounted:250ms");
+    }, 250);
+    if (import.meta.client && heartbeatId === null) {
+      heartbeatId = window.setInterval(() => {
+        const snapshot = buildSnapshot();
+        const signature = JSON.stringify(snapshot);
+        if (signature !== lastSnapshotSignature) {
+          lastSnapshotSignature = signature;
+          debugLog("heartbeat detected snapshot change");
+          import.meta.hot?.send("observatory:snapshot", snapshot);
+        }
+      }, 400);
+    }
+  });
+  nuxtApp.hook("page:finish", () => {
+    broadcastAll("page:finish");
   });
   if (import.meta.client) {
     const router = useRouter();
@@ -114,16 +127,25 @@ export default defineNuxtPlugin(() => {
           return;
         }
         const render = registries.render;
-        if (render && typeof render.reset === "function") render.reset();
+        if (render && typeof render.reset === "function") {
+          ;
+          render.reset();
+        }
         const provideInject = registries.provideInject;
-        if (provideInject && typeof provideInject.clear === "function")
+        if (provideInject && typeof provideInject.clear === "function") {
+          ;
           provideInject.clear();
+        }
         const composable = registries.composable;
-        if (composableNavigationMode === "route" && composable && typeof composable.clearNonLayout === "function")
+        if (composableNavigationMode === "route" && composable && typeof composable.clearNonLayout === "function") {
+          ;
           composable.clearNonLayout();
+        }
         const transition = registries.transition;
-        if (transition && typeof transition.clear === "function")
+        if (transition && typeof transition.clear === "function") {
+          ;
           transition.clear();
+        }
       }
     );
     router.afterEach((to) => {
@@ -137,18 +159,26 @@ export default defineNuxtPlugin(() => {
         ;
         render.setRoute(to.path ?? "/");
       }
-      nextTick(() => broadcastAll());
+      nextTick(() => broadcastAll("router:afterEach"));
     });
   }
-  function broadcastAll() {
+  function broadcastAll(reason = "unknown") {
     if (!import.meta.client) {
       return;
     }
-    const channel = getDevtoolsChannel();
-    if (!channel) {
+    if (!import.meta.hot) {
       return;
     }
-    channel.send("observatory:snapshot", buildSnapshot());
+    const snapshot = buildSnapshot();
+    debugLog("push snapshot", {
+      reason,
+      fetch: Array.isArray(snapshot.fetch) ? snapshot.fetch.length : 0,
+      composables: Array.isArray(snapshot.composables) ? snapshot.composables.length : 0,
+      renders: Array.isArray(snapshot.renders) ? snapshot.renders.length : 0,
+      transitions: Array.isArray(snapshot.transitions) ? snapshot.transitions.length : 0
+    });
+    lastSnapshotSignature = JSON.stringify(snapshot);
+    import.meta.hot.send("observatory:snapshot", snapshot);
   }
   function buildSnapshot() {
     function safeParse(val, fallback) {
@@ -187,7 +217,4 @@ export default defineNuxtPlugin(() => {
     };
     return snapshot;
   }
-  function getDevtoolsChannel() {
-    return window.__nuxt_devtools__?.channel ?? null;
-  }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-devtools-observatory",
-    "version": "0.1.25",
+    "version": "0.1.28",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "license": "MIT",
     "repository": {
@@ -35,11 +35,15 @@
     ],
     "scripts": {
         "dev": "nuxi dev playground",
+        "docs:dev": "pnpm --dir docs dev",
+        "docs:build": "pnpm --dir docs build",
+        "docs:generate": "pnpm --dir docs generate",
+        "docs:preview": "pnpm --dir docs preview",
         "build:client": "vite build --config client/vite.config.ts",
         "build": "npm run build:client && nuxt-module-build build",
         "prepack": "npm run build",
         "lint": "eslint .",
-        "format": "prettier --write '**/*.{ts,vue,js,json}' --ignore-path .prettierignore && stylelint '**/*.{css,vue}' --ignore-pattern '.nuxt/**' --ignore-pattern '.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --fix && eslint --fix '**/*.{ts,vue,js}' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**'",
+        "format": "prettier --write '**/*.{ts,vue,js,json}' --ignore-path .prettierignore && stylelint '**/*.{css,vue}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**' --fix && eslint --fix '**/*.{ts,vue,js}' --ignore-pattern '**/.nuxt/**' --ignore-pattern '**/.output/**' --ignore-pattern 'coverage/**' --ignore-pattern 'client/dist/**' --ignore-pattern 'scripts/**'",
         "typecheck": "vue-tsc --noEmit",
         "test": "vitest run",
         "test:watch": "vitest",
@@ -56,6 +60,7 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.39.2",
+        "@nuxt/devtools-kit": "4.0.0-alpha.3",
         "@nuxt/eslint": "^1.13.0",
         "@nuxt/kit": "^3.0.0",
         "@nuxt/module-builder": "^1.0.2",
@@ -80,6 +85,7 @@
         "playwright": "^1.58.2",
         "postcss-html": "^1.8.1",
         "prettier": "^3.8.1",
+        "sirv": "^3.0.2",
         "stylelint": "^17.4.0",
         "stylelint-config-standard": "^40.0.0",
         "stylelint-config-standard-vue": "^1.0.0",

package/client/dist/assets/index-1-H6UMCK.css

@@ -1 +0,0 @@
-.view[data-v-4f9bcc52]{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:12px;gap:10px}.stats-row[data-v-4f9bcc52]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex-shrink:0}.toolbar[data-v-4f9bcc52]{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}.split[data-v-4f9bcc52]{display:flex;gap:12px;flex:1;overflow:hidden;min-height:0}.table-wrap[data-v-4f9bcc52]{flex:1;overflow:auto;border:.5px solid var(--border);border-radius:var(--radius-lg)}.detail-panel[data-v-4f9bcc52]{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;overflow:auto;border:.5px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--bg3)}.detail-empty[data-v-4f9bcc52]{width:280px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;border:.5px dashed var(--border);border-radius:var(--radius-lg)}.detail-header[data-v-4f9bcc52]{display:flex;align-items:center;justify-content:space-between}.meta-grid[data-v-4f9bcc52]{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:11px}.section-label[data-v-4f9bcc52]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-top:6px;min-height:fit-content}.payload-box[data-v-4f9bcc52]{font-family:var(--mono);font-size:11px;color:var(--text2);background:var(--bg2);border-radius:var(--radius);padding:8px 10px;overflow:auto;white-space:pre;max-height:160px}.waterfall[data-v-4f9bcc52]{flex-shrink:0;background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px}.waterfall-header[data-v-4f9bcc52]{display:flex;align-items:center;justify-content:space-between;gap:8px}.waterfall-body[data-v-4f9bcc52]{margin-top:6px}.wf-row[data-v-4f9bcc52]{display:flex;align-items:center;gap:8px;margin-bottom:4px}.wf-track[data-v-4f9bcc52]{flex:1;position:relative;height:8px;background:var(--bg2);border-radius:2px;overflow:hidden}.wf-bar[data-v-4f9bcc52]{position:absolute;top:0;height:100%;border-radius:2px;opacity:.8}.view[data-v-0c07531b]{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:12px;gap:10px}.toolbar[data-v-0c07531b]{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}.split[data-v-0c07531b]{display:flex;gap:12px;flex:1;overflow:hidden;min-height:0}.graph-area[data-v-0c07531b]{flex:1;overflow:auto;border:.5px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--bg3)}.legend[data-v-0c07531b]{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--text2);margin-bottom:12px}.canvas-stage[data-v-0c07531b]{display:flex;justify-content:center;align-items:flex-start;min-width:100%}.dot[data-v-0c07531b]{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:2px}.canvas-wrap[data-v-0c07531b]{position:relative}.edges-svg[data-v-0c07531b]{position:absolute;top:0;left:0;pointer-events:none}.edge[data-v-0c07531b]{stroke:var(--border);stroke-width:1.5}.graph-node[data-v-0c07531b]{position:absolute;display:flex;align-items:center;gap:7px;padding:0 10px;height:32px;border-radius:var(--radius);border:.5px solid var(--border);background:var(--bg3);cursor:pointer;transition:border-color .12s,background .12s;overflow:hidden;box-sizing:border-box;white-space:nowrap}.graph-node[data-v-0c07531b]:hover{border-color:var(--text3)}.graph-node.is-selected[data-v-0c07531b]{border-color:var(--node-color);background:color-mix(in srgb,var(--node-color) 8%,transparent)}.node-dot[data-v-0c07531b]{width:7px;height:7px;border-radius:50%;flex-shrink:0}.node-label[data-v-0c07531b]{font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis}.badge-xs[data-v-0c07531b]{font-size:9px;padding:1px 4px}.detail-panel[data-v-0c07531b]{width:280px;flex-shrink:0;overflow:auto;border:.5px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--bg3);display:flex;flex-direction:column;gap:4px;min-height:0}.detail-empty[data-v-0c07531b]{width:280px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;border:.5px dashed var(--border);border-radius:var(--radius-lg);flex-shrink:0}.graph-empty[data-v-0c07531b]{display:flex;align-items:center;justify-content:center;min-height:180px;color:var(--text3);font-size:12px}.detail-header[data-v-0c07531b]{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.section-label[data-v-0c07531b]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin:8px 0 5px}.detail-section[data-v-0c07531b]{display:flex;flex-direction:column;min-height:0}.detail-list[data-v-0c07531b]{display:flex;flex-direction:column;gap:3px;overflow:auto;max-height:220px;padding-right:2px}.provide-row[data-v-0c07531b]{display:flex;flex-direction:column;gap:4px;padding:5px 8px;background:var(--bg2);border-radius:var(--radius);margin-bottom:3px}.row-warning[data-v-0c07531b]{font-size:11px;color:var(--amber);padding:2px 0}.row-consumers[data-v-0c07531b]{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:2px 0}.consumer-chip[data-v-0c07531b]{font-size:10px;padding:1px 6px;border-radius:4px;background:color-mix(in srgb,var(--blue) 10%,var(--bg3));border:.5px solid color-mix(in srgb,var(--blue) 30%,var(--border));color:var(--text2)}.scope-badge[data-v-0c07531b]{font-size:10px;padding:1px 6px;border-radius:4px}.scope-global[data-v-0c07531b]{background:color-mix(in srgb,var(--amber) 15%,transparent);border:.5px solid color-mix(in srgb,var(--amber) 40%,var(--border));color:color-mix(in srgb,var(--amber) 80%,var(--text))}.scope-layout[data-v-0c07531b]{background:color-mix(in srgb,var(--purple) 15%,transparent);border:.5px solid color-mix(in srgb,var(--purple) 40%,var(--border));color:color-mix(in srgb,var(--purple) 80%,var(--text))}.scope-component[data-v-0c07531b]{background:var(--bg3);border:.5px solid var(--border);color:var(--text3)}.row-main[data-v-0c07531b]{display:flex;align-items:center;gap:8px;min-width:0}.row-key[data-v-0c07531b]{min-width:100px;color:var(--text2);flex-shrink:0}.row-value-preview[data-v-0c07531b]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-toggle[data-v-0c07531b]{padding:2px 8px;font-size:10px}.value-box[data-v-0c07531b]{font-family:var(--mono);font-size:11px;color:var(--text2);background:#0000001a;border-radius:var(--radius);padding:8px 10px;white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:180px}.inject-row[data-v-0c07531b]{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--bg2);border-radius:var(--radius);margin-bottom:3px}.row-from[data-v-0c07531b]{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inject-miss[data-v-0c07531b]{background:#e24b4a14}.jump-btn[data-v-0c07531b]{font-size:10px;padding:1px 6px;border:.5px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text3);cursor:pointer;flex-shrink:0;font-family:var(--mono)}.jump-btn[data-v-0c07531b]:hover{border-color:var(--teal);color:var(--teal);background:color-mix(in srgb,var(--teal) 8%,transparent)}.view[data-v-28f502da]{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:12px;gap:10px}.stats-row[data-v-28f502da]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex-shrink:0}.toolbar[data-v-28f502da]{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}.clear-btn[data-v-28f502da]{color:var(--text3);border-color:var(--border);flex-shrink:0}.clear-btn[data-v-28f502da]:hover{color:var(--red);border-color:var(--red);background:transparent}.mode-btn[data-v-28f502da]{border-color:color-mix(in srgb,var(--blue) 40%,var(--border));color:var(--blue)}.mode-btn[data-v-28f502da]:hover{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent)}.list[data-v-28f502da]{flex:1;overflow:auto;display:flex;flex-direction:column;gap:5px;min-height:0}.comp-card[data-v-28f502da]{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;flex-shrink:0}.comp-card[data-v-28f502da]:hover{border-color:var(--text3)}.comp-card.leak[data-v-28f502da]{border-left:2px solid var(--red);border-radius:0 var(--radius-lg) var(--radius-lg) 0}.comp-card.expanded[data-v-28f502da]{border-color:var(--purple)}.comp-header[data-v-28f502da]{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px}.comp-identity[data-v-28f502da]{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1}.comp-name[data-v-28f502da]{font-size:12px;font-weight:500;color:var(--text);flex-shrink:0}.comp-file[data-v-28f502da]{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comp-meta[data-v-28f502da]{display:flex;align-items:center;gap:5px;flex-shrink:0}.refs-preview[data-v-28f502da]{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 8px;align-items:center}.ref-chip[data-v-28f502da]{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:4px;background:var(--bg2);border:.5px solid var(--border);font-size:11px;font-family:var(--mono);max-width:220px;overflow:hidden}.ref-chip--reactive[data-v-28f502da]{border-color:color-mix(in srgb,var(--purple) 40%,var(--border));background:color-mix(in srgb,var(--purple) 8%,var(--bg2))}.ref-chip--computed[data-v-28f502da]{border-color:color-mix(in srgb,var(--blue) 40%,var(--border));background:color-mix(in srgb,var(--blue) 8%,var(--bg2))}.ref-chip-key[data-v-28f502da]{color:var(--text2);flex-shrink:0}.ref-chip-val[data-v-28f502da]{color:var(--teal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comp-detail[data-v-28f502da]{padding:4px 12px 12px;border-top:.5px solid var(--border);display:flex;flex-direction:column;gap:3px}.leak-banner[data-v-28f502da]{background:color-mix(in srgb,var(--red) 12%,transparent);border:.5px solid color-mix(in srgb,var(--red) 40%,var(--border));border-radius:var(--radius);padding:6px 10px;font-size:11px;color:var(--red);margin-bottom:6px;font-family:var(--mono)}.section-label[data-v-28f502da]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-top:6px;margin-bottom:3px}.ref-row[data-v-28f502da]{display:flex;align-items:flex-start;gap:8px;padding:3px 0}.ref-key[data-v-28f502da]{min-width:90px;color:var(--text2);flex-shrink:0}.ref-val[data-v-28f502da]{flex:1;color:var(--teal);min-width:0}.ref-val--collapsed[data-v-28f502da]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ref-val--full[data-v-28f502da]{white-space:pre-wrap;word-break:break-all;line-height:1.5}.ref-row-actions[data-v-28f502da]{display:flex;align-items:center;gap:4px;flex-shrink:0}.expand-btn[data-v-28f502da]{font-size:9px;padding:1px 5px;border-radius:4px;border:.5px solid var(--border);background:var(--bg2);color:var(--text3);cursor:pointer;line-height:1.4;flex-shrink:0}.expand-btn[data-v-28f502da]:hover{border-color:var(--text3);color:var(--text)}.lc-row[data-v-28f502da]{display:flex;align-items:center;gap:8px;padding:2px 0}.lc-dot[data-v-28f502da]{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ref-chip--shared[data-v-28f502da]{border-color:color-mix(in srgb,var(--amber) 50%,var(--border));background:color-mix(in srgb,var(--amber) 10%,var(--bg2))}.ref-chip-shared-dot[data-v-28f502da]{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber);flex-shrink:0;margin-left:1px}.global-banner[data-v-28f502da]{display:flex;align-items:flex-start;gap:8px;background:color-mix(in srgb,var(--amber) 10%,transparent);border:.5px solid color-mix(in srgb,var(--amber) 40%,var(--border));border-radius:var(--radius);padding:7px 10px;font-size:11px;color:var(--text2);margin-bottom:6px}.global-dot[data-v-28f502da]{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;margin-top:3px}.badge-amber[data-v-28f502da]{background:color-mix(in srgb,var(--amber) 15%,transparent);color:color-mix(in srgb,var(--amber) 80%,var(--text));border:.5px solid color-mix(in srgb,var(--amber) 40%,var(--border))}.history-list[data-v-28f502da]{display:flex;flex-direction:column;gap:1px;background:var(--bg2);border-radius:var(--radius);padding:4px 8px;max-height:180px;overflow-y:auto}.history-row[data-v-28f502da]{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:11px;font-family:var(--mono);border-bottom:.5px solid var(--border)}.history-row[data-v-28f502da]:last-child{border-bottom:none}.history-time[data-v-28f502da]{min-width:52px;color:var(--text3);flex-shrink:0}.history-key[data-v-28f502da]{min-width:80px;color:var(--text2);flex-shrink:0}.history-val[data-v-28f502da]{color:var(--amber);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.stat-card[data-v-28f502da]{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:10px 14px}.stat-label[data-v-28f502da]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-bottom:4px}.stat-val[data-v-28f502da]{font-size:22px;font-weight:500;line-height:1;color:var(--text)}.ref-key--clickable[data-v-28f502da]{cursor:pointer;text-decoration:underline dotted var(--text3);text-underline-offset:2px}.ref-key--clickable[data-v-28f502da]:hover{color:var(--purple);text-decoration-color:var(--purple)}.edit-btn[data-v-28f502da]{font-size:10px;padding:1px 6px;border-radius:var(--radius);border:.5px solid var(--border);background:transparent;color:var(--text3);cursor:pointer;margin-left:auto;flex-shrink:0;font-family:var(--mono)}.edit-btn[data-v-28f502da]:hover{border-color:var(--purple);color:var(--purple);background:color-mix(in srgb,var(--purple) 8%,transparent)}.lookup-panel[data-v-28f502da]{flex-shrink:0;border:.5px solid var(--border);border-radius:var(--radius-lg);background:var(--bg3);overflow:hidden}.lookup-header[data-v-28f502da]{display:flex;align-items:center;gap:6px;padding:7px 12px;border-bottom:.5px solid var(--border);background:var(--bg2)}.lookup-row[data-v-28f502da]{display:flex;align-items:center;gap:8px;padding:5px 12px;border-bottom:.5px solid var(--border)}.lookup-row[data-v-28f502da]:last-child{border-bottom:none}.edit-overlay[data-v-28f502da]{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:100;display:flex;align-items:center;justify-content:center}.edit-dialog[data-v-28f502da]{background:var(--bg1, var(--bg2));border:.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;width:380px;max-width:92vw;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 32px #0000004d}.edit-dialog-header[data-v-28f502da]{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);margin-bottom:2px}.edit-textarea[data-v-28f502da]{width:100%;font-family:var(--mono);font-size:12px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--border);border-radius:var(--radius);color:var(--text);resize:vertical;outline:none}.edit-textarea[data-v-28f502da]:focus{border-color:var(--purple)}.edit-error[data-v-28f502da]{color:var(--red);font-family:var(--mono)}.edit-actions[data-v-28f502da]{display:flex;gap:6px;padding-top:4px}.slide-enter-active[data-v-28f502da],.slide-leave-active[data-v-28f502da]{transition:opacity .15s,transform .15s}.slide-enter-from[data-v-28f502da],.slide-leave-to[data-v-28f502da]{opacity:0;transform:translateY(6px)}.fade-enter-active[data-v-28f502da],.fade-leave-active[data-v-28f502da]{transition:opacity .15s}.fade-enter-from[data-v-28f502da],.fade-leave-to[data-v-28f502da]{opacity:0}.jump-btn[data-v-28f502da]{font-size:10px;padding:1px 6px;border:.5px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text3);cursor:pointer;flex-shrink:0;font-family:var(--mono)}.jump-btn[data-v-28f502da]:hover{border-color:var(--teal);color:var(--teal);background:color-mix(in srgb,var(--teal) 8%,transparent)}.view[data-v-a5a04da1]{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:12px;gap:10px}.controls[data-v-a5a04da1]{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}.mode-group[data-v-a5a04da1]{display:flex;gap:2px}.threshold-group[data-v-a5a04da1]{display:flex;align-items:center;gap:6px}.stats-row[data-v-a5a04da1]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex-shrink:0}.stat-sub[data-v-a5a04da1]{margin-top:4px;font-size:11px;color:var(--text3)}.inspector[data-v-a5a04da1]{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr) minmax(260px,320px);gap:12px;flex:1;min-height:0}.roots-panel[data-v-a5a04da1],.tree-panel[data-v-a5a04da1],.detail-panel[data-v-a5a04da1]{border:.5px solid var(--border);border-radius:var(--radius-lg);background:var(--bg3);min-height:0}.roots-panel[data-v-a5a04da1],.detail-panel[data-v-a5a04da1]{display:flex;flex-direction:column;overflow:auto;padding:12px;gap:8px}.panel-title[data-v-a5a04da1]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}.root-item[data-v-a5a04da1]{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);color:var(--text);text-align:left}.root-item.active[data-v-a5a04da1]{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 16%,var(--bg2))}.root-label[data-v-a5a04da1]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.root-copy[data-v-a5a04da1]{display:flex;flex-direction:column;min-width:0}.root-sub[data-v-a5a04da1]{font-size:11px}.root-meta[data-v-a5a04da1]{color:var(--text3);font-size:11px}.tree-panel[data-v-a5a04da1]{display:flex;flex-direction:column;overflow:hidden}.tree-toolbar[data-v-a5a04da1]{padding:12px;border-bottom:.5px solid var(--border)}.search-input[data-v-a5a04da1]{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);color:var(--text)}.tree-frame[data-v-a5a04da1]{flex:1;min-height:0;overflow:auto;padding:12px}[data-v-a5a04da1] .tree-canvas{display:inline-block;min-width:100%;width:max-content}[data-v-a5a04da1] .tree-node{margin-bottom:4px}[data-v-a5a04da1] .tree-row{display:grid;grid-template-columns:8px 18px minmax(0,1fr) auto;align-items:center;gap:6px;min-width:0;width:100%;padding:4px 8px;padding-left:calc(8px + (var(--tree-depth, 0) * 16px));border:1px solid transparent;border-radius:var(--radius);cursor:pointer;white-space:nowrap}[data-v-a5a04da1] .tree-row:hover{background:var(--bg2)}[data-v-a5a04da1] .tree-row.selected{background:color-mix(in srgb,var(--teal) 12%,var(--bg2));border-color:var(--teal)}[data-v-a5a04da1] .tree-row.hot{box-shadow:inset 2px 0 0 var(--red)}[data-v-a5a04da1] .tree-toggle{width:16px;height:16px;border:none;background:transparent;color:var(--text3);padding:0;font-size:14px;display:inline-flex;align-items:center;justify-content:center}[data-v-a5a04da1] .tree-toggle:disabled{cursor:default}[data-v-a5a04da1] .tree-toggle.empty{opacity:0}[data-v-a5a04da1] .tree-rail{display:block;width:2px;height:14px;border-radius:999px;background:color-mix(in srgb,var(--border) 75%,transparent)}[data-v-a5a04da1] .tree-copy{display:flex;align-items:center;min-width:0;gap:6px;overflow:hidden}[data-v-a5a04da1] .tree-name{font-size:12px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis}[data-v-a5a04da1] .tree-badges{display:flex;gap:6px;flex-shrink:0;overflow:hidden}[data-v-a5a04da1] .tree-badge{border:1px solid var(--border);border-radius:999px;padding:2px 7px;font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}[data-v-a5a04da1] .tree-metrics{display:flex;align-items:center;min-width:92px;justify-content:flex-end;flex-shrink:0;gap:6px}[data-v-a5a04da1] .tree-metric-pill{display:inline-flex;align-items:center;justify-content:center;min-width:78px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);font-size:10px;color:var(--text3)}[data-v-a5a04da1] .tree-persistent-pill{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid color-mix(in srgb,var(--amber) 55%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--amber) 10%,var(--bg2));font-size:10px;color:color-mix(in srgb,var(--amber) 80%,var(--text))}[data-v-a5a04da1] .tree-hydration-pill{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid color-mix(in srgb,var(--teal) 55%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--teal) 10%,var(--bg2));font-size:10px;color:color-mix(in srgb,var(--teal) 80%,var(--text))}[data-v-a5a04da1] .tree-children{margin-left:7px;padding-left:11px;border-left:1px solid color-mix(in srgb,var(--border) 72%,transparent)}.detail-empty[data-v-a5a04da1]{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:12px}.detail-header[data-v-a5a04da1]{display:flex;align-items:center;justify-content:space-between}.meta-grid[data-v-a5a04da1]{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}.detail-pill-row[data-v-a5a04da1]{display:flex;flex-wrap:wrap;gap:6px}.detail-pill[data-v-a5a04da1]{border:1px solid var(--border);border-radius:999px;padding:4px 8px;background:var(--bg2);font-size:11px}.detail-pill.hot[data-v-a5a04da1]{border-color:color-mix(in srgb,var(--red) 50%,var(--border));color:var(--red)}.detail-pill.persistent[data-v-a5a04da1]{border-color:color-mix(in srgb,var(--amber) 55%,var(--border));color:color-mix(in srgb,var(--amber) 80%,var(--text))}.detail-pill.hydrated[data-v-a5a04da1]{border-color:color-mix(in srgb,var(--teal) 55%,var(--border));color:color-mix(in srgb,var(--teal) 80%,var(--text))}.detail-pill.muted[data-v-a5a04da1]{color:var(--text3);border-color:var(--border)}.section-label[data-v-a5a04da1]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-top:8px;margin-bottom:4px}.trigger-item[data-v-a5a04da1]{background:var(--bg2);border-radius:var(--radius);padding:4px 8px;margin-bottom:3px;color:var(--text2)}[data-v-a5a04da1] .tree-jump-btn{display:none;padding:0 4px;border:none;background:transparent;color:var(--text3);font-size:11px;cursor:pointer;line-height:1;flex-shrink:0}[data-v-a5a04da1] .tree-row:hover .tree-jump-btn,[data-v-a5a04da1] .tree-row.selected .tree-jump-btn{display:inline-flex}[data-v-a5a04da1] .tree-jump-btn:hover{color:var(--teal)}.jump-btn[data-v-a5a04da1]{font-size:10px;padding:1px 6px;border:.5px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text3);cursor:pointer;flex-shrink:0;font-family:var(--mono)}.jump-btn[data-v-a5a04da1]:hover{border-color:var(--teal);color:var(--teal);background:color-mix(in srgb,var(--teal) 8%,transparent)}.route-select[data-v-a5a04da1]{padding:3px 7px;border:.5px solid var(--border);border-radius:var(--radius);background:var(--bg2);color:var(--text);font-size:11px;cursor:pointer;max-width:140px}.timeline-list[data-v-a5a04da1]{display:flex;flex-direction:column;gap:1px;background:var(--bg2);border-radius:var(--radius);padding:4px 8px;max-height:200px;overflow-y:auto;min-height:fit-content}.timeline-row[data-v-a5a04da1]{display:flex;align-items:center;gap:6px;padding:2px 0;font-size:11px;border-bottom:.5px solid var(--border);min-width:0;min-height:fit-content}.timeline-row[data-v-a5a04da1]:last-child{border-bottom:none}.timeline-kind[data-v-a5a04da1]{flex-shrink:0;font-size:10px;font-weight:500;min-width:40px}.timeline-kind.mount[data-v-a5a04da1]{color:var(--teal)}.timeline-kind.update[data-v-a5a04da1]{color:var(--amber)}.timeline-time[data-v-a5a04da1]{flex-shrink:0;min-width:52px;color:var(--text3)}.timeline-dur[data-v-a5a04da1]{flex-shrink:0;min-width:38px;color:var(--text2)}.timeline-trigger[data-v-a5a04da1]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text3);flex:1;min-width:0}.timeline-route[data-v-a5a04da1]{flex-shrink:0;color:var(--text3);font-size:10px}@media(max-width:1180px){.inspector[data-v-a5a04da1]{grid-template-columns:minmax(200px,240px) minmax(0,1fr)}.detail-panel[data-v-a5a04da1]{grid-column:1 / -1;max-height:220px}}.timeline-root[data-v-da869dac]{display:flex;flex-direction:column;height:100%;overflow:hidden}.stats-row[data-v-da869dac]{display:flex;gap:10px;padding:12px 14px 0;flex-shrink:0}.stat-card[data-v-da869dac]{background:var(--bg2);border:.5px solid var(--border);border-radius:var(--radius);padding:8px 14px;min-width:72px;text-align:center}.stat-val[data-v-da869dac]{font-size:20px;font-weight:600;font-family:var(--mono);line-height:1.1}.stat-unit[data-v-da869dac]{font-size:12px;opacity:.6;margin-left:1px}.stat-label[data-v-da869dac]{font-size:10px;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.4px}.toolbar[data-v-da869dac]{display:flex;align-items:center;gap:8px;padding:10px 14px;flex-shrink:0;border-bottom:.5px solid var(--border)}.search-input[data-v-da869dac]{flex:1;max-width:260px}.filter-group[data-v-da869dac]{display:flex;gap:4px}.content-area[data-v-da869dac]{display:flex;flex:1;overflow:hidden;min-height:0}.table-pane[data-v-da869dac]{flex:1;overflow:hidden auto;min-width:0}.bar-cell[data-v-da869dac]{width:200px;padding:4px 8px}.bar-track[data-v-da869dac]{position:relative;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden}.bar-fill[data-v-da869dac]{position:absolute;top:0;height:100%;min-width:3px;border-radius:4px;transition:width .15s}.detail-panel[data-v-da869dac]{width:260px;flex-shrink:0;border-left:.5px solid var(--border);overflow-y:auto;background:var(--bg3);padding:0 0 16px}.panel-header[data-v-da869dac]{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;border-bottom:.5px solid var(--border);position:sticky;top:0;background:var(--bg3);z-index:1}.panel-title[data-v-da869dac]{font-family:var(--mono);font-size:13px;font-weight:500}.close-btn[data-v-da869dac]{border:none;background:transparent;color:var(--text3);font-size:11px;padding:2px 6px;cursor:pointer}.panel-section[data-v-da869dac]{padding:10px 14px 6px;border-bottom:.5px solid var(--border)}.panel-section-title[data-v-da869dac]{font-size:10px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}.panel-row[data-v-da869dac]{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 0;font-size:12px}.panel-key[data-v-da869dac]{color:var(--text3);flex-shrink:0}.panel-val[data-v-da869dac]{color:var(--text);text-align:right;word-break:break-all}.cancel-notice[data-v-da869dac],.active-notice[data-v-da869dac]{margin:10px 14px 0;font-size:11px;line-height:1.6;padding:8px 10px;border-radius:var(--radius)}.cancel-notice[data-v-da869dac]{background:#e24b4a1a;color:var(--red);border:.5px solid rgb(226 75 74 / 30%)}.active-notice[data-v-da869dac]{background:#7f77dd1a;color:var(--purple);border:.5px solid rgb(127 119 221 / 30%)}code[data-v-da869dac]{font-family:var(--mono);font-size:10px;background:#00000026;padding:1px 4px;border-radius:3px}.panel-slide-enter-active[data-v-da869dac],.panel-slide-leave-active[data-v-da869dac]{transition:transform .18s ease,opacity .18s ease}.panel-slide-enter-from[data-v-da869dac],.panel-slide-leave-to[data-v-da869dac]{transform:translate(12px);opacity:0}#app-root[data-v-12fe13bc]{display:flex;flex-direction:column;height:100vh;overflow:hidden}.tabbar[data-v-12fe13bc]{display:flex;align-items:center;gap:2px;padding:8px 12px 0;border-bottom:.5px solid var(--border);background:var(--bg3);flex-shrink:0}.tabbar-brand[data-v-12fe13bc]{font-size:11px;font-weight:500;color:var(--purple);letter-spacing:.5px;margin-right:12px;padding-bottom:8px}.tab-btn[data-v-12fe13bc]{border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--text3);font-size:12px;padding:6px 12px 8px;cursor:pointer;transition:color .12s,border-color .12s;display:flex;align-items:center;gap:5px}.tab-btn[data-v-12fe13bc]:hover{color:var(--text);background:transparent}.tab-btn.active[data-v-12fe13bc]{color:var(--purple);border-bottom-color:var(--purple)}.tab-icon[data-v-12fe13bc]{font-size:10px;opacity:.6}.tab-content[data-v-12fe13bc]{flex:1;overflow:hidden;display:flex;flex-direction:column}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:13px;line-height:1.5}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}button{font-family:var(--font);font-size:12px;cursor:pointer;border:.5px solid var(--border);background:transparent;color:var(--text2);padding:4px 10px;border-radius:var(--radius);transition:background .12s}button:hover{background:var(--bg2)}button:active{transform:scale(.98)}button.active{background:#7f77dd26;color:var(--purple);border-color:var(--purple)}button.danger-active{background:#e24b4a1f;color:var(--red);border-color:var(--red)}button.success-active{background:#1d9e751f;color:var(--teal);border-color:var(--teal)}input[type=text],input[type=search]{font-family:var(--font);font-size:12px;border:.5px solid var(--border);background:var(--bg2);color:var(--text);padding:5px 10px;border-radius:var(--radius);outline:none;width:100%}input[type=text]:focus,input[type=search]:focus{border-color:var(--purple);box-shadow:0 0 0 2px #7f77dd33}input[type=range]{accent-color:var(--purple);cursor:pointer}.mono{font-family:var(--mono)}.muted{color:var(--text3)}.text-sm{font-size:11px}.text-xs{font-size:10px}.bold{font-weight:500}.badge{display:inline-block;font-size:10px;font-weight:500;padding:2px 7px;border-radius:99px;white-space:nowrap}.badge-ok{background:#1d9e7526;color:var(--teal)}.badge-err{background:#e24b4a1f;color:var(--red)}.badge-warn{background:#ef9f2726;color:var(--amber)}.badge-info{background:#378add1f;color:var(--blue)}.badge-gray{background:var(--bg2);color:var(--text3);border:.5px solid var(--border)}.badge-purple{background:#7f77dd26;color:var(--purple)}.card{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px}.data-table{width:100%;border-collapse:collapse;font-size:12px}.data-table th{text-align:left;font-size:10px;font-weight:500;color:var(--text3);padding:6px 8px;border-bottom:.5px solid var(--border);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}.data-table td{padding:8px;border-bottom:.5px solid var(--border);color:var(--text);vertical-align:middle}.data-table tr:hover td{background:var(--bg2);cursor:pointer}.data-table tr.selected td{background:#7f77dd14}.stat-card{background:var(--bg2);border-radius:var(--radius);padding:10px 12px}.stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}.stat-val{font-size:20px;font-weight:500}.flex{display:flex}.items-center{align-items:center}.gap-2{gap:8px}.gap-3{gap:12px}.flex-1{flex:1}.overflow-auto{overflow:auto}.p-3{padding:12px}.p-4{padding:16px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mt-2{margin-top:8px}