nuxt-devtools-observatory 0.1.13 → 0.1.15

package/client/src/views/RenderHeatmap.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, defineComponent, h, ref, watch, type VNode } from 'vue'
-import { useObservatoryData, type RenderEntry } from '../stores/observatory'
+import { useObservatoryData, getObservatoryOrigin, type RenderEntry, type RenderEvent } from '../stores/observatory'
 
 interface ComponentNode {
     id: string
@@ -13,11 +13,13 @@ interface ComponentNode {
     mountCount: number
     avgMs: number
     triggers: string[]
+    timeline: RenderEvent[]
     children: ComponentNode[]
     parentId?: string
     parentLabel?: string
     isPersistent: boolean
     isHydrationMount: boolean
+    route: string
 }
 
 const TreeNode = defineComponent({
@@ -128,6 +130,20 @@ const TreeNode = defineComponent({
                                   )
                                 : null,
                             h('span', { class: 'tree-metric-pill' }, `${metric} ${metricLabel}`),
+                            node.file && node.file !== 'unknown'
+                                ? h(
+                                      'button',
+                                      {
+                                          class: 'tree-jump-btn',
+                                          title: `Open ${node.file} in editor`,
+                                          onClick: (e: MouseEvent) => {
+                                              e.stopPropagation()
+                                              openInEditor(node.file)
+                                          },
+                                      },
+                                      '↗'
+                                  )
+                                : null,
                         ]),
                     ]
                 ),
@@ -156,6 +172,8 @@ const TreeNode = defineComponent({
 const { renders, connected } = useObservatoryData()
 
 const activeMode = ref<'count' | 'time'>('count')
+// Route filter — '' means show all routes
+const activeRoute = ref('')
 // Separate thresholds per mode so switching modes doesn't produce nonsense results.
 // Count: flag components that rendered 3+ times (1 hydration mount is normal).
 // Time: flag components averaging 16ms+ (one animation frame budget).
@@ -222,10 +240,12 @@ function buildNodes(entries: RenderEntry[]) {
             mountCount: entry.mountCount ?? 1,
             avgMs: entry.avgMs,
             triggers: entry.triggers.map(formatTrigger),
+            timeline: entry.timeline ?? [],
             children: [],
             parentId: entry.parentUid !== undefined ? String(entry.parentUid) : undefined,
             isPersistent: Boolean(entry.isPersistent),
             isHydrationMount: Boolean(entry.isHydrationMount),
+            route: entry.route ?? '/',
         })
     }
 
@@ -392,11 +412,24 @@ function subtreeHasHotNode(node: ComponentNode): boolean {
     return isHot(node) || node.children.some((child) => subtreeHasHotNode(child))
 }
 
+function nodeMatchesRoute(node: ComponentNode): boolean {
+    if (!activeRoute.value) return true
+    // A component is visible for a route if it was first seen on that route
+    // OR if any of its timeline events happened on that route.
+    if (node.route === activeRoute.value) return true
+    return node.timeline.some((e) => e.route === activeRoute.value)
+}
+
+function subtreeMatchesRoute(node: ComponentNode): boolean {
+    return nodeMatchesRoute(node) || node.children.some((child) => subtreeMatchesRoute(child))
+}
+
 function isVisibleRoot(node: ComponentNode, searchTerm: string): boolean {
     const matchesCurrentSearch = treeMatches(node, searchTerm)
     const matchesCurrentHeat = !activeHotOnly.value || subtreeHasHotNode(node)
+    const matchesCurrentRoute = !activeRoute.value || subtreeMatchesRoute(node)
 
-    return matchesCurrentSearch && matchesCurrentHeat
+    return matchesCurrentSearch && matchesCurrentHeat && matchesCurrentRoute
 }
 
 function pruneVisibleTree(node: ComponentNode, searchTerm: string): ComponentNode | null {
@@ -406,8 +439,9 @@ function pruneVisibleTree(node: ComponentNode, searchTerm: string): ComponentNod
 
     const matchesCurrentSearch = !searchTerm || matchesSearch(node, searchTerm) || visibleChildren.length > 0
     const matchesCurrentHeat = !activeHotOnly.value || isHot(node) || visibleChildren.length > 0
+    const matchesCurrentRoute = !activeRoute.value || nodeMatchesRoute(node) || visibleChildren.length > 0
 
-    if (!matchesCurrentSearch || !matchesCurrentHeat) {
+    if (!matchesCurrentSearch || !matchesCurrentHeat || !matchesCurrentRoute) {
         return null
     }
 
@@ -459,6 +493,17 @@ const appEntries = computed(() =>
     }))
 )
 
+const knownRoutes = computed(() => {
+    const routes = new Set<string>()
+    for (const node of allComponents.value) {
+        if (node.route) routes.add(node.route)
+        for (const event of node.timeline) {
+            if (event.route) routes.add(event.route)
+        }
+    }
+    return [...routes].sort()
+})
+
 const activeSelected = computed(() => allComponents.value.find((node) => node.id === activeSelectedId.value) ?? null)
 const totalRenders = computed(() => allComponents.value.reduce((sum, node) => sum + node.rerenders + node.mountCount, 0))
 const hotCount = computed(() => allComponents.value.filter((node) => isHot(node)).length)
@@ -617,9 +662,25 @@ function basename(file: string) {
     )
 }
 
+function openInEditor(file: string) {
+    if (!file || file === 'unknown') return
+    const origin = getObservatoryOrigin()
+    if (!origin) return
+    window.top?.postMessage({ type: 'observatory:open-in-editor', file }, origin)
+}
+
 function pathLabel(node: ComponentNode) {
     return node.path.join(' / ')
 }
+
+function formatMs(ms: number): string {
+    return ms < 1 ? '<1ms' : `${ms.toFixed(1)}ms`
+}
+
+function formatTimestamp(t: number): string {
+    // t is performance.now() — show as relative seconds from page load
+    return `+${(t / 1000).toFixed(2)}s`
+}
 </script>
 
 <template>
@@ -642,6 +703,10 @@ function pathLabel(node: ComponentNode) {
                 <span class="mono text-sm">{{ activeThreshold }}{{ activeMode === 'count' ? '+ renders' : 'ms+' }}</span>
             </div>
             <button :class="{ active: activeHotOnly }" @click="activeHotOnly = !activeHotOnly">hot only</button>
+            <select v-model="activeRoute" class="route-select mono text-sm" title="Filter by route">
+                <option value="">all routes</option>
+                <option v-for="r in knownRoutes" :key="r" :value="r">{{ r }}</option>
+            </select>
             <button :class="{ active: frozen }" style="margin-left: auto" @click="toggleFreeze">
                 {{ frozen ? 'unfreeze' : 'freeze snapshot' }}
             </button>
@@ -744,7 +809,17 @@ function pathLabel(node: ComponentNode) {
                         <span class="muted text-sm">path</span>
                         <span class="mono text-sm">{{ pathLabel(activeSelected) }}</span>
                         <span class="muted text-sm">file</span>
-                        <span class="mono text-sm muted">{{ activeSelected.file }}</span>
+                        <span class="mono text-sm muted" style="display: flex; align-items: center; gap: 6px">
+                            {{ activeSelected.file }}
+                            <button
+                                v-if="activeSelected.file && activeSelected.file !== 'unknown'"
+                                class="jump-btn"
+                                title="Open in editor"
+                                @click="openInEditor(activeSelected.file)"
+                            >
+                                open ↗
+                            </button>
+                        </span>
                         <span class="muted text-sm">file name</span>
                         <span class="mono text-sm">{{ basename(activeSelected.file) }}</span>
                         <span class="muted text-sm">parent</span>
@@ -778,6 +853,26 @@ function pathLabel(node: ComponentNode) {
                     <div class="section-label">triggers</div>
                     <div v-for="trigger in activeSelected.triggers" :key="trigger" class="trigger-item mono text-sm">{{ trigger }}</div>
                     <div v-if="!activeSelected.triggers.length" class="muted text-sm">no triggers recorded</div>
+
+                    <div class="section-label" style="margin-top: 8px">
+                        render timeline
+                        <span class="muted" style="font-weight: 400; text-transform: none; letter-spacing: 0">
+                            ({{ activeSelected.timeline.length }})
+                        </span>
+                    </div>
+                    <div v-if="!activeSelected.timeline.length" class="muted text-sm">no timeline events yet</div>
+                    <div v-else class="timeline-list">
+                        <div v-for="(event, idx) in [...activeSelected.timeline].reverse().slice(0, 30)" :key="idx" class="timeline-row">
+                            <span class="timeline-kind mono" :class="event.kind">{{ event.kind }}</span>
+                            <span class="timeline-time mono muted">{{ formatTimestamp(event.t) }}</span>
+                            <span class="timeline-dur mono">{{ formatMs(event.durationMs) }}</span>
+                            <span v-if="event.triggerKey" class="timeline-trigger mono muted">{{ event.triggerKey }}</span>
+                            <span class="timeline-route mono muted" style="margin-left: auto">{{ event.route }}</span>
+                        </div>
+                        <div v-if="activeSelected.timeline.length > 30" class="muted text-sm" style="padding: 2px 0">
+                            … {{ activeSelected.timeline.length - 30 }} earlier events
+                        </div>
+                    </div>
                 </template>
                 <div v-else class="detail-empty">click a component to inspect</div>
             </aside>
@@ -1153,6 +1248,123 @@ function pathLabel(node: ComponentNode) {
     color: var(--text2);
 }
 
+:deep(.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;
+}
+
+:deep(.tree-row:hover .tree-jump-btn),
+:deep(.tree-row.selected .tree-jump-btn) {
+    display: inline-flex;
+}
+
+:deep(.tree-jump-btn:hover) {
+    color: var(--teal);
+}
+
+.jump-btn {
+    font-size: 10px;
+    padding: 1px 6px;
+    border: 0.5px solid var(--border);
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--text3);
+    cursor: pointer;
+    flex-shrink: 0;
+    font-family: var(--mono);
+}
+
+.jump-btn:hover {
+    border-color: var(--teal);
+    color: var(--teal);
+    background: color-mix(in srgb, var(--teal) 8%, transparent);
+}
+
+.route-select {
+    padding: 3px 7px;
+    border: 0.5px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg2);
+    color: var(--text);
+    font-size: 11px;
+    cursor: pointer;
+    max-width: 140px;
+}
+
+.timeline-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    background: var(--bg2);
+    border-radius: var(--radius);
+    padding: 4px 8px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.timeline-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 0;
+    font-size: 11px;
+    border-bottom: 0.5px solid var(--border);
+    min-width: 0;
+}
+
+.timeline-row:last-child {
+    border-bottom: none;
+}
+
+.timeline-kind {
+    flex-shrink: 0;
+    font-size: 10px;
+    font-weight: 500;
+    min-width: 40px;
+}
+
+.timeline-kind.mount {
+    color: var(--teal);
+}
+
+.timeline-kind.update {
+    color: var(--amber);
+}
+
+.timeline-time {
+    flex-shrink: 0;
+    min-width: 52px;
+    color: var(--text3);
+}
+
+.timeline-dur {
+    flex-shrink: 0;
+    min-width: 38px;
+    color: var(--text2);
+}
+
+.timeline-trigger {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text3);
+    flex: 1;
+    min-width: 0;
+}
+
+.timeline-route {
+    flex-shrink: 0;
+    color: var(--text3);
+    font-size: 10px;
+}
+
 @media (max-width: 1180px) {
     .inspector {
         grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "0.1.13",
+  "version": "0.1.15",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -362,7 +362,7 @@ function composableTrackerPlugin() {
             const args = path.node.arguments;
             const loc = path.node.loc;
             const meta = t.objectExpression([
-              t.objectProperty(t.identifier("file"), t.stringLiteral(id.split("/").pop() ?? id)),
+              t.objectProperty(t.identifier("file"), t.stringLiteral(id)),
               t.objectProperty(t.identifier("line"), t.numericLiteral(loc?.start.line ?? 0))
             ]);
             path.replaceWith(
@@ -521,6 +521,9 @@ const module$1 = defineNuxtModule({
     if (!nuxt.options.dev) {
       return;
     }
+    if (!process.env.LAUNCH_EDITOR && !process.env.VITE_EDITOR) {
+      process.env.LAUNCH_EDITOR = "code";
+    }
     const resolver = createResolver(import.meta.url);
     nuxt.hook("vite:extendConfig", (config) => {
       const alias = config.resolve?.alias;

package/dist/runtime/composables/render-registry.d.ts

@@ -1,3 +1,15 @@
+export interface RenderEvent {
+    /** 'mount' for initial mount, 'update' for reactive re-renders */
+    kind: 'mount' | 'update';
+    /** performance.now() timestamp */
+    t: number;
+    /** Duration in ms */
+    durationMs: number;
+    /** Reactive dep key that triggered this update, if known */
+    triggerKey?: string;
+    /** Route path this render happened on */
+    route: string;
+}
 export interface RenderEntry {
     uid: number;
     name: string;
@@ -15,6 +27,8 @@ export interface RenderEntry {
         type: string;
         timestamp: number;
     }>;
+    /** Per-render timeline, capped at MAX_TIMELINE events (newest last) */
+    timeline: RenderEvent[];
     rect?: {
         x: number;
         y: number;
@@ -28,6 +42,8 @@ export interface RenderEntry {
     isPersistent: boolean;
     /** True if the first mount of this component happened during SSR hydration */
     isHydrationMount: boolean;
+    /** Route path this component was first seen on */
+    route: string;
 }
 /**
  * Sets up a render registry for tracking render-related metrics (e.g. rerenders, render time, etc.)
@@ -46,4 +62,5 @@ export declare function setupRenderRegistry(nuxtApp: {
     getAll: () => RenderEntry[];
     snapshot: () => RenderEntry[];
     reset: () => void;
+    setRoute: (path: string) => void;
 };

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

@@ -4,10 +4,15 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
   const pendingTriggeredRenders = /* @__PURE__ */ new Set();
   const renderStartTimes = /* @__PURE__ */ new Map();
   let preResetUids = /* @__PURE__ */ new Set();
+  let currentRoute = "/";
+  const MAX_TIMELINE = 100;
+  function setRoute(path) {
+    currentRoute = path;
+  }
   function ensureEntry(instance) {
     const uid = instance.$.uid;
     if (!entries.value.has(uid)) {
-      entries.value.set(uid, makeEntry(uid, instance));
+      entries.value.set(uid, makeEntry(uid, instance, currentRoute));
     }
     return entries.value.get(uid);
   }
@@ -32,7 +37,7 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     }
     renderStartTimes.set(uid, performance.now());
   }
-  function recordRenderDuration(entry) {
+  function recordRenderDuration(entry, kind) {
     if (typeof performance === "undefined") {
       return;
     }
@@ -41,9 +46,22 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
       return;
     }
     renderStartTimes.delete(entry.uid);
-    entry.totalMs += Math.max(performance.now() - startedAt, 0);
+    const durationMs = Math.max(performance.now() - startedAt, 0);
+    entry.totalMs += durationMs;
     const totalEvents = (entry.rerenders ?? 0) + Math.max(entry.mountCount, 1);
     entry.avgMs = Math.round(entry.totalMs / totalEvents * 10) / 10;
+    const lastTrigger = entry.triggers.length > 0 ? entry.triggers[entry.triggers.length - 1] : void 0;
+    const event = {
+      kind,
+      t: startedAt,
+      durationMs: Math.round(durationMs * 10) / 10,
+      triggerKey: kind === "update" && lastTrigger ? `${lastTrigger.type}: ${lastTrigger.key}` : void 0,
+      route: currentRoute
+    };
+    entry.timeline.push(event);
+    if (entry.timeline.length > MAX_TIMELINE) {
+      entry.timeline.shift();
+    }
   }
   function reset() {
     preResetUids = new Set(entries.value.keys());
@@ -54,6 +72,7 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
       entry.totalMs = 0;
       entry.avgMs = 0;
       entry.triggers = [];
+      entry.timeline = [];
     }
   }
   nuxtApp.vueApp.mixin({
@@ -73,7 +92,11 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
         entry.rerenders++;
       }
       syncRect(entry, this);
-      recordRenderDuration(entry);
+      if (!entry.isPersistent || entry.mountCount === 1) {
+        recordRenderDuration(entry, "mount");
+      } else {
+        renderStartTimes.delete(entry.uid);
+      }
       emit("render:update", { uid: entry.uid, renders: entry.rerenders });
     },
     beforeUpdate() {
@@ -92,7 +115,7 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
       pendingTriggeredRenders.delete(entry.uid);
       entry.rerenders++;
       syncRect(entry, this);
-      recordRenderDuration(entry);
+      recordRenderDuration(entry, "update");
       emit("render:update", { uid: entry.uid, renders: entry.rerenders });
     },
     unmounted() {
@@ -113,6 +136,7 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
       totalMs: entry.totalMs,
       avgMs: entry.avgMs,
       triggers: entry.triggers,
+      timeline: entry.timeline,
       rect: entry.rect ? {
         x: entry.rect.x,
         y: entry.rect.y,
@@ -123,7 +147,8 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
       } : void 0,
       parentUid: entry.parentUid,
       isPersistent: entry.isPersistent,
-      isHydrationMount: entry.isHydrationMount
+      isHydrationMount: entry.isHydrationMount,
+      route: entry.route
     };
   }
   function getAll() {
@@ -139,9 +164,9 @@ export function setupRenderRegistry(nuxtApp, options = {}) {
     const channel = window.__nuxt_devtools__?.channel;
     channel?.send(event, data);
   }
-  return { getAll, snapshot, reset };
+  return { getAll, snapshot, reset, setRoute };
 }
-function makeEntry(uid, instance) {
+function makeEntry(uid, instance, route) {
   const type = instance.$.type;
   const parentType = instance.$parent?.$?.type;
   const element = describeElement(instance.$el);
@@ -158,9 +183,11 @@ function makeEntry(uid, instance) {
     totalMs: 0,
     avgMs: 0,
     triggers: [],
+    timeline: [],
     parentUid: instance.$parent?.$.uid,
     isPersistent: false,
-    isHydrationMount: false
+    isHydrationMount: false,
+    route
   };
 }
 function describeElement(el) {

package/dist/runtime/plugin.js

@@ -87,6 +87,14 @@ export default defineNuxtPlugin(() => {
         const { id, key, value } = event.data;
         composableRegistry.editValue(id, key, value);
       }
+      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(() => {
+          });
+        }
+      }
     });
     composableRegistry.onComposableChange(() => {
       if (!lastMessageSource || !lastMessageOrigin) {
@@ -118,6 +126,7 @@ export default defineNuxtPlugin(() => {
     );
     router.afterEach((to) => {
       composableRegistry.setRoute(to.path ?? "/");
+      renderRegistry.setRoute(to.path ?? "/");
       nextTick(() => broadcastAll());
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nuxt-devtools-observatory",
-    "version": "0.1.13",
+    "version": "0.1.15",
     "description": "Nuxt DevTools: useFetch Dashboard, provide/inject Graph, Composable Tracker, Render Heatmap",
     "type": "module",
     "main": "./dist/module.mjs",