nuxt-devtools-observatory 0.1.4 → 0.1.6

package/client/src/views/ComponentBlock.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+interface ComponentNode {
+    id: string
+    label: string
+    file: string
+    renders: number
+    avgMs: number
+    triggers: string[]
+    children: ComponentNode[]
+}
+
+const props = defineProps<{
+    node: ComponentNode
+    mode: string
+    threshold: number
+    hotOnly: boolean
+    selected?: string
+}>()
+
+const emit = defineEmits(['select'])
+
+function getVal(n: ComponentNode) {
+    return props.mode === 'count' ? n.renders : n.avgMs
+}
+
+function getMax(n: ComponentNode): number {
+    let max = 1
+
+    function walk(ns: ComponentNode[]) {
+        ns.forEach((n) => {
+            const v = getVal(n)
+
+            if (v > max) {
+                max = v
+            }
+
+            walk(n.children)
+        })
+    }
+
+    walk([n])
+
+    return Math.max(max, props.mode === 'count' ? 40 : 20)
+}
+
+function heatColor(val: number, max: number) {
+    const r = Math.min(val / max, 1)
+
+    if (r < 0.25) {
+        return { bg: '#EAF3DE', text: '#27500A', border: '#97C459' }
+    } else {
+        if (r < 0.55) {
+            return { bg: '#FAEEDA', text: '#633806', border: '#EF9F27' }
+        } else {
+            if (r < 0.8) {
+                return { bg: '#FAECE7', text: '#712B13', border: '#D85A30' }
+            } else {
+                return { bg: '#FCEBEB', text: '#791F1F', border: '#E24B4A' }
+            }
+        }
+    }
+}
+
+function isHotNode(n: ComponentNode) {
+    let value: number
+
+    if (props.mode === 'count') {
+        value = n.renders
+    } else {
+        value = n.avgMs
+    }
+
+    if (value >= props.threshold) {
+        return true
+    } else {
+        return false
+    }
+}
+
+function shouldShow(n: ComponentNode): boolean {
+    if (!props.hotOnly) {
+        return true
+    } else {
+        if (isHotNode(n)) {
+            return true
+        } else {
+            if (n.children.some(isHotNode)) {
+                return true
+            } else {
+                return false
+            }
+        }
+    }
+}
+
+function handleSelect(n: ComponentNode) {
+    emit('select', n)
+}
+</script>
+
+<template>
+    <div
+        v-if="shouldShow(props.node)"
+        :style="{
+            background: heatColor(getVal(props.node), getMax(props.node)).bg,
+            border:
+                props.selected === props.node.id
+                    ? `2px solid ${heatColor(getVal(props.node), getMax(props.node)).border}`
+                    : `1px solid ${heatColor(getVal(props.node), getMax(props.node)).border}`,
+            borderRadius: '6px',
+            padding: '6px 9px',
+            marginBottom: '5px',
+            cursor: 'pointer',
+        }"
+        @click="handleSelect(props.node)"
+    >
+        <div style="display: flex; align-items: center; gap: 6px">
+            <span
+                :style="{
+                    fontFamily: 'var(--mono)',
+                    fontSize: '11px',
+                    fontWeight: 500,
+                    color: heatColor(getVal(props.node), getMax(props.node)).text,
+                }"
+            >
+                {{ props.node.label }}
+            </span>
+            <span
+                :style="{
+                    fontFamily: 'var(--mono)',
+                    fontSize: '10px',
+                    color: heatColor(getVal(props.node), getMax(props.node)).text,
+                    opacity: 0.7,
+                    marginLeft: 'auto',
+                }"
+            >
+                {{ props.mode === 'count' ? getVal(props.node) : getVal(props.node).toFixed(1) + 'ms' }}
+                {{ props.mode === 'count' ? 'renders' : 'ms avg' }}
+            </span>
+        </div>
+        <div
+            v-if="props.node.children && props.node.children.length"
+            :style="{
+                marginLeft: '10px',
+                borderLeft: `1.5px solid ${heatColor(getVal(props.node), getMax(props.node)).border}40`,
+                paddingLeft: '8px',
+                marginTop: '5px',
+            }"
+        >
+            <ComponentBlock
+                v-for="child in props.node.children"
+                :key="child.id"
+                :node="child"
+                :mode="props.mode"
+                :threshold="props.threshold"
+                :hot-only="props.hotOnly"
+                :selected="props.selected"
+                @select="handleSelect"
+            />
+        </div>
+    </div>
+</template>

package/client/src/views/ComposableTracker.vue

@@ -1,133 +1,57 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, type Ref } from 'vue'
+import { useObservatoryData } from '../stores/observatory'
 
-interface RefEntry {
-    key: string
-    type: string
-    val: string
-}
 interface ComposableEntry {
     id: string
     name: string
     component: string
     instances: number
-    status: 'mounted' | 'unmounted'
+    status: string
     leak: boolean
     leakReason?: string
-    refs: RefEntry[]
+    refs: Array<{ key: string; type: string; val: string }>
     watchers: number
     intervals: number
-    lifecycle: { onMounted: boolean; onUnmounted: boolean; watchersCleaned: boolean; intervalsCleaned: boolean }
+    lifecycle: {
+        onMounted: boolean
+        onUnmounted: boolean
+        watchersCleaned: boolean
+        intervalsCleaned: boolean
+    }
 }
 
-const entries = ref<ComposableEntry[]>([
-    {
-        id: '1',
-        name: 'useAuth',
-        component: 'App.vue',
-        instances: 1,
-        status: 'mounted',
-        leak: false,
-        refs: [
-            { key: 'user', type: 'ref', val: '{ id: "u_9x3k", role: "admin" }' },
-            { key: 'isLoggedIn', type: 'computed', val: 'true' },
-        ],
-        watchers: 1,
-        intervals: 0,
-        lifecycle: { onMounted: true, onUnmounted: true, watchersCleaned: true, intervalsCleaned: true },
-    },
-    {
-        id: '2',
-        name: 'useWebSocket',
-        component: 'Dashboard.vue',
-        instances: 1,
-        status: 'unmounted',
-        leak: true,
-        leakReason: 'socket.close() never called — 2 watchers still running after unmount',
-        refs: [
-            { key: 'socket', type: 'ref', val: 'WebSocket { readyState: 1 }' },
-            { key: 'messages', type: 'ref', val: 'Array(47)' },
-        ],
-        watchers: 2,
-        intervals: 0,
-        lifecycle: { onMounted: true, onUnmounted: false, watchersCleaned: false, intervalsCleaned: true },
-    },
-    {
-        id: '3',
-        name: 'usePoller',
-        component: 'StockTicker.vue',
-        instances: 2,
-        status: 'unmounted',
-        leak: true,
-        leakReason: 'setInterval #37 never cleared — still firing every 2000ms',
-        refs: [
-            { key: 'data', type: 'ref', val: '{ price: 142.5 }' },
-            { key: 'intervalId', type: 'ref', val: '37' },
-        ],
-        watchers: 0,
-        intervals: 1,
-        lifecycle: { onMounted: true, onUnmounted: false, watchersCleaned: true, intervalsCleaned: false },
-    },
-    {
-        id: '4',
-        name: 'useCart',
-        component: 'CartDrawer.vue',
-        instances: 1,
-        status: 'mounted',
-        leak: false,
-        refs: [
-            { key: 'items', type: 'ref', val: 'Array(3)' },
-            { key: 'total', type: 'computed', val: '248.50' },
-        ],
-        watchers: 0,
-        intervals: 0,
-        lifecycle: { onMounted: false, onUnmounted: false, watchersCleaned: true, intervalsCleaned: true },
-    },
-    {
-        id: '5',
-        name: 'useBreakpoint',
-        component: 'Layout.vue',
-        instances: 1,
-        status: 'mounted',
-        leak: false,
-        refs: [
-            { key: 'isMobile', type: 'computed', val: 'false' },
-            { key: 'width', type: 'ref', val: '1280' },
-        ],
-        watchers: 0,
-        intervals: 0,
-        lifecycle: { onMounted: true, onUnmounted: true, watchersCleaned: true, intervalsCleaned: true },
-    },
-    {
-        id: '6',
-        name: 'useIntersectionObserver',
-        component: 'LazyImage.vue',
-        instances: 4,
-        status: 'mounted',
-        leak: false,
-        refs: [{ key: 'isVisible', type: 'ref', val: 'true' }],
-        watchers: 0,
-        intervals: 0,
-        lifecycle: { onMounted: true, onUnmounted: true, watchersCleaned: true, intervalsCleaned: true },
-    },
-])
+const { composables } = useObservatoryData()
+const entries = composables as Ref<ComposableEntry[]>
 
 const filter = ref('all')
 const search = ref('')
 const expanded = ref<string | null>(null)
 
-const counts = computed(() => ({
-    mounted: entries.value.filter((e) => e.status === 'mounted').length,
-    leaks: entries.value.filter((e) => e.leak).length,
-}))
+const counts = computed<{ mounted: number; leaks: number }>(() => {
+    return {
+        mounted: entries.value.filter((e) => e.status === 'mounted').length,
+        leaks: entries.value.filter((e) => e.leak).length,
+    }
+})
 
-const filtered = computed(() => {
+const filtered = computed<ComposableEntry[]>(() => {
     return entries.value.filter((e) => {
-        if (filter.value === 'leak' && !e.leak) return false
-        if (filter.value === 'unmounted' && e.status !== 'unmounted') return false
-        const q = search.value.toLowerCase()
-        if (q && !e.name.toLowerCase().includes(q) && !e.component.toLowerCase().includes(q)) return false
-        return true
+        if (filter.value === 'leak' && !e.leak) {
+            return false
+        } else {
+            if (filter.value === 'unmounted' && e.status !== 'unmounted') {
+                return false
+            } else {
+                const q = search.value.toLowerCase()
+
+                if (q && !e.name.toLowerCase().includes(q) && !e.component.toLowerCase().includes(q)) {
+                    return false
+                } else {
+                    return true
+                }
+            }
+        }
     })
 })
 

package/client/src/views/FetchDashboard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { useObservatoryData } from '../stores/observatory'
 
 interface FetchEntry {
     id: string
@@ -16,126 +17,21 @@ interface FetchEntry {
     startOffset?: number
 }
 
-// Mock data — in production this comes from the WS registry
-const entries = ref<FetchEntry[]>([
-    {
-        id: '1',
-        key: 'product-detail',
-        url: '/api/products/42',
-        status: 'ok',
-        origin: 'ssr',
-        ms: 48,
-        size: 3276,
-        cached: false,
-        startOffset: 0,
-        file: 'pages/products/[id].vue',
-        line: 8,
-    },
-    {
-        id: '2',
-        key: 'related-products',
-        url: '/api/products?related=42',
-        status: 'ok',
-        origin: 'ssr',
-        ms: 112,
-        size: 19148,
-        cached: false,
-        startOffset: 10,
-        file: 'pages/products/[id].vue',
-        line: 14,
-    },
-    {
-        id: '3',
-        key: 'user-session',
-        url: '/api/auth/session',
-        status: 'cached',
-        origin: 'csr',
-        ms: 0,
-        size: 819,
-        cached: true,
-        startOffset: 0,
-        file: 'layouts/default.vue',
-        line: 5,
-    },
-    {
-        id: '4',
-        key: 'cart-summary',
-        url: '/api/cart',
-        status: 'ok',
-        origin: 'csr',
-        ms: 67,
-        size: 2150,
-        cached: false,
-        startOffset: 5,
-        file: 'components/CartDrawer.vue',
-        line: 3,
-    },
-    {
-        id: '5',
-        key: 'product-reviews',
-        url: '/api/products/42/reviews',
-        status: 'pending',
-        origin: 'csr',
-        ms: undefined,
-        size: undefined,
-        cached: false,
-        startOffset: 120,
-        file: 'components/ReviewList.vue',
-        line: 6,
-    },
-    {
-        id: '6',
-        key: 'recommendations',
-        url: '/api/recommend?u=u_9x3k',
-        status: 'ok',
-        origin: 'csr',
-        ms: 201,
-        size: 9626,
-        cached: false,
-        startOffset: 30,
-        file: 'components/Recommendations.vue',
-        line: 4,
-    },
-    {
-        id: '7',
-        key: 'inventory-check',
-        url: '/api/inventory/42',
-        status: 'error',
-        origin: 'csr',
-        ms: 503,
-        size: undefined,
-        cached: false,
-        startOffset: 55,
-        file: 'components/StockBadge.vue',
-        line: 7,
-    },
-    {
-        id: '8',
-        key: 'nav-links',
-        url: '/api/nav',
-        status: 'cached',
-        origin: 'ssr',
-        ms: 0,
-        size: 1126,
-        cached: true,
-        startOffset: 0,
-        file: 'layouts/default.vue',
-        line: 9,
-    },
-])
+// Use live fetch data from the Nuxt registry bridge
+const { fetches: entries } = useObservatoryData()
 
 const filter = ref<string>('all')
 const search = ref('')
 const selected = ref<FetchEntry | null>(null)
 
 const counts = computed(() => ({
-    ok: entries.value.filter((e) => e.status === 'ok').length,
-    pending: entries.value.filter((e) => e.status === 'pending').length,
-    error: entries.value.filter((e) => e.status === 'error').length,
+    ok: entries.value?.filter((e) => e.status === 'ok').length ?? 0,
+    pending: entries.value?.filter((e) => e.status === 'pending').length ?? 0,
+    error: entries.value?.filter((e) => e.status === 'error').length ?? 0,
 }))
 
 const filtered = computed(() => {
-    return entries.value.filter((e) => {
+    return (entries.value ?? []).filter((e) => {
         if (filter.value !== 'all' && e.status !== filter.value) return false
         const q = search.value.toLowerCase()
         if (q && !e.key.includes(q) && !e.url.includes(q)) return false
@@ -176,16 +72,16 @@ function barColor(s: string) {
 }
 
 function barWidth(e: FetchEntry) {
-    const maxMs = Math.max(...entries.value.filter((x) => x.ms).map((x) => x.ms!), 1)
+    const maxMs = Math.max(...(entries.value ?? []).filter((x) => x.ms).map((x) => x.ms!), 1)
     return e.ms != null ? Math.max(4, Math.round((e.ms / maxMs) * 100)) : 4
 }
 
 function wfLeft(e: FetchEntry) {
-    const maxEnd = Math.max(...entries.value.map((x) => (x.startOffset ?? 0) + (x.ms ?? 0)), 1)
+    const maxEnd = Math.max(...(entries.value ?? []).map((x) => (x.startOffset ?? 0) + (x.ms ?? 0)), 1)
     return Math.round(((e.startOffset ?? 0) / maxEnd) * 100)
 }
 function wfWidth(e: FetchEntry) {
-    const maxEnd = Math.max(...entries.value.map((x) => (x.startOffset ?? 0) + (x.ms ?? 0)), 1)
+    const maxEnd = Math.max(...(entries.value ?? []).map((x) => (x.startOffset ?? 0) + (x.ms ?? 0)), 1)
     return e.ms != null ? Math.round((e.ms / maxEnd) * 100) : 2
 }
 
@@ -195,18 +91,12 @@ function formatSize(bytes: number) {
 }
 
 function replayFetch() {
-    if (!selected.value) return
-    const e = selected.value
-    e.status = 'pending'
-    e.ms = undefined
-    setTimeout(() => {
-        e.status = 'ok'
-        e.ms = Math.floor(Math.random() * 150 + 20)
-    }, 700)
+    // No-op: cannot replay fetch from devtools UI (see Nuxt docs)
+    // You should call the original refresh() from useFetch in-app, not here
 }
 
 function clearAll() {
-    entries.value = []
+    // No-op: cannot clear live registry from client
     selected.value = null
 }
 </script>

package/client/src/views/ProvideInjectGraph.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { useObservatoryData } from '../stores/observatory'
 
 interface TreeNodeData {
     id: string
@@ -31,15 +32,30 @@ const V_GAP = 72
 const H_GAP = 18
 
 function nodeColor(n: TreeNodeData): string {
-    if (n.injects.some((i) => !i.ok)) return 'var(--red)'
-    if (n.type === 'both') return 'var(--blue)'
-    if (n.type === 'provider') return 'var(--teal)'
+    if (n.injects.some((i) => !i.ok)) {
+        return 'var(--red)'
+    }
+
+    if (n.type === 'both') {
+        return 'var(--blue)'
+    }
+
+    if (n.type === 'provider') {
+        return 'var(--teal)'
+    }
+
     return 'var(--text3)'
 }
 
 function matchesFilter(n: TreeNodeData, filter: string): boolean {
-    if (filter === 'all') return true
-    if (filter === 'warn') return n.injects.some((i) => !i.ok)
+    if (filter === 'all') {
+        return true
+    }
+
+    if (filter === 'warn') {
+        return n.injects.some((i) => !i.ok)
+    }
+
     return n.provides.some((p) => p.key === filter) || n.injects.some((i) => i.key === filter)
 }
 
@@ -47,79 +63,8 @@ function countLeaves(n: TreeNodeData): number {
     return n.children.length === 0 ? 1 : n.children.reduce((s, c) => s + countLeaves(c), 0)
 }
 
-const nodes = ref<TreeNodeData[]>([
-    {
-        id: 'App',
-        label: 'App.vue',
-        type: 'provider',
-        provides: [
-            { key: 'authContext', val: '{ user, logout }', reactive: true },
-            { key: 'theme', val: '"dark"', reactive: false },
-        ],
-        injects: [],
-        children: [
-            {
-                id: 'Layout',
-                label: 'Layout.vue',
-                type: 'both',
-                provides: [{ key: 'routerState', val: 'useRoute()', reactive: true }],
-                injects: [{ key: 'theme', from: 'App.vue', ok: true }],
-                children: [
-                    {
-                        id: 'Sidebar',
-                        label: 'Sidebar.vue',
-                        type: 'consumer',
-                        provides: [],
-                        injects: [
-                            { key: 'authContext', from: 'App.vue', ok: true },
-                            { key: 'theme', from: 'App.vue', ok: true },
-                        ],
-                        children: [],
-                    },
-                    {
-                        id: 'NavBar',
-                        label: 'NavBar.vue',
-                        type: 'consumer',
-                        provides: [],
-                        injects: [
-                            { key: 'authContext', from: 'App.vue', ok: true },
-                            { key: 'routerState', from: 'Layout.vue', ok: true },
-                        ],
-                        children: [],
-                    },
-                    {
-                        id: 'ProductList',
-                        label: 'ProductList.vue',
-                        type: 'error',
-                        provides: [],
-                        injects: [
-                            { key: 'cartContext', from: null, ok: false },
-                            { key: 'theme', from: 'App.vue', ok: true },
-                        ],
-                        children: [
-                            {
-                                id: 'ProductCard',
-                                label: 'ProductCard.vue',
-                                type: 'error',
-                                provides: [],
-                                injects: [{ key: 'cartContext', from: null, ok: false }],
-                                children: [],
-                            },
-                        ],
-                    },
-                    {
-                        id: 'UserMenu',
-                        label: 'UserMenu.vue',
-                        type: 'consumer',
-                        provides: [],
-                        injects: [{ key: 'authContext', from: 'App.vue', ok: true }],
-                        children: [],
-                    },
-                ],
-            },
-        ],
-    },
-])
+const { provideInject } = useObservatoryData()
+const nodes = provideInject
 
 const activeFilter = ref('all')
 const selectedNode = ref<TreeNodeData | null>(null)
@@ -147,13 +92,16 @@ const layout = computed<LayoutNode[]>(() => {
     function place(node: TreeNodeData, depth: number, slotLeft: number, parentId: string | null) {
         const leaves = countLeaves(node)
         const slotW = leaves * (NODE_W + H_GAP) - H_GAP
+
         flat.push({
             data: node,
             parentId,
             x: Math.round(slotLeft + slotW / 2),
             y: Math.round(pad + depth * (NODE_H + V_GAP) + NODE_H / 2),
         })
+
         let childLeft = slotLeft
+
         for (const child of node.children) {
             const cl = countLeaves(child)
             place(child, depth + 1, childLeft, node.id)
@@ -162,6 +110,7 @@ const layout = computed<LayoutNode[]>(() => {
     }
 
     let left = pad
+
     for (const root of nodes.value) {
         const leaves = countLeaves(root)
         place(root, 0, left, null)
@@ -177,6 +126,7 @@ const canvasH = computed(() => layout.value.reduce((m, n) => Math.max(m, n.y + N
 
 const edges = computed<Edge[]>(() => {
     const byId = new Map(layout.value.map((n) => [n.data.id, n]))
+
     return layout.value
         .filter((n) => n.parentId !== null)
         .map((n) => {