nuxt-devtools-observatory 0.1.31 → 0.1.32

package/client/src/stores/observatory.ts

@@ -1,7 +1,15 @@
 import { ref } from 'vue'
 import { useDevtoolsClient, onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 import type { ObservatorySnapshot, ObservatoryServerFunctions, ObservatoryClientFunctions } from '@observatory/types/rpc'
-import type { FetchEntry, ProvideEntry, InjectEntry, ComposableEntry, RenderEntry, TransitionEntry, TraceEntry } from '@observatory/types/snapshot'
+import type {
+    FetchEntry,
+    ProvideEntry,
+    InjectEntry,
+    ComposableEntry,
+    RenderEntry,
+    TransitionEntry,
+    TraceEntry,
+} from '@observatory/types/snapshot'
 
 type ProvideInjectSnapshot = { provides: ProvideEntry[]; injects: InjectEntry[] }
 

package/client/src/views/ComposableTracker.vue

@@ -6,6 +6,7 @@ import {
     editComposableValue,
     openInEditor as openInEditorFromStore,
 } from '@observatory-client/stores/observatory'
+import { matchesComposableEntryQuery } from '@observatory-client/composables/composable-search'
 import type { ComposableEntry as RuntimeComposableEntry } from '@observatory/types/snapshot'
 
 const { composables: rawEntries, connected, features, clearComposables } = useObservatoryData()
@@ -118,23 +119,8 @@ const filtered = computed(() => {
             return false
         }
 
-        const q = search.value.toLowerCase()
-
-        if (q) {
-            const matchesName = entry.name.toLowerCase().includes(q)
-            const matchesFile = entry.componentFile.toLowerCase().includes(q)
-            const matchesRef = Object.keys(entry.refs).some((k) => k.toLowerCase().includes(q))
-            const matchesVal = Object.values(entry.refs).some((v) => {
-                try {
-                    return String(JSON.stringify(v.value)).toLowerCase().includes(q)
-                } catch {
-                    return false
-                }
-            })
-
-            if (!matchesName && !matchesFile && !matchesRef && !matchesVal) {
-                return false
-            }
+        if (search.value.trim() && !matchesComposableEntryQuery(entry, search.value)) {
+            return false
         }
 
         return true
@@ -234,22 +220,67 @@ function toggleRefExpand(entryId: string, refKey: string) {
 }
 
 // ── Reverse lookup ────────────────────────────────────────────────────────
-// Clicking a ref key shows every mounted instance that exposes the same key.
+// Clicking a ref key prefers identity-based lookup for shared/global refs.
+// For non-shared keys, fallback to legacy key-name lookup.
 
-const lookupKey = ref<string | null>(null)
+interface LookupTarget {
+    key: string
+    composableName: string
+    identityGroup?: string
+}
+
+const lookupTarget = ref<LookupTarget | null>(null)
 
 const lookupResults = computed(() => {
-    if (!lookupKey.value) {
+    if (!lookupTarget.value) {
         return []
     }
 
-    const key = lookupKey.value
+    const target = lookupTarget.value
+
+    if (target.identityGroup) {
+        return entries.value.filter(
+            (entry) =>
+                entry.name === target.composableName &&
+                entry.sharedKeyGroups?.[target.key] === target.identityGroup &&
+                target.key in entry.refs
+        )
+    }
 
-    return entries.value.filter((e) => key in e.refs)
+    return entries.value.filter((entry) => target.key in entry.refs)
 })
 
-function openLookup(key: string) {
-    lookupKey.value = lookupKey.value === key ? null : key
+const lookupTitle = computed(() => {
+    if (!lookupTarget.value) {
+        return ''
+    }
+
+    if (lookupTarget.value.identityGroup) {
+        return `${lookupTarget.value.key} (shared identity)`
+    }
+
+    return lookupTarget.value.key
+})
+
+function openLookup(entry: RuntimeComposableEntry, key: string) {
+    const identityGroup = entry.sharedKeyGroups?.[key]
+    const next: LookupTarget = {
+        key,
+        composableName: entry.name,
+        identityGroup,
+    }
+
+    if (
+        lookupTarget.value?.key === next.key &&
+        lookupTarget.value?.composableName === next.composableName &&
+        lookupTarget.value?.identityGroup === next.identityGroup
+    ) {
+        lookupTarget.value = null
+
+        return
+    }
+
+    lookupTarget.value = next
 }
 
 // ── Inline editing ────────────────────────────────────────────────────────
@@ -408,8 +439,12 @@ function applyEdit() {
                     <div v-for="[k, v] in Object.entries(entry.refs)" :key="k" class="composable-tracker__ref-row">
                         <span
                             class="composable-tracker__ref-key composable-tracker__ref-key--clickable mono text-sm"
-                            :title="`click to see all instances exposing '${k}'`"
-                            @click.stop="openLookup(k)"
+                            :title="
+                                entry.sharedKeyGroups?.[k]
+                                    ? `click to see instances sharing this exact '${k}' state`
+                                    : `click to see all instances exposing '${k}'`
+                            "
+                            @click.stop="openLookup(entry, k)"
                         >
                             {{ k }}
                         </span>
@@ -530,14 +565,14 @@ function applyEdit() {
 
         <!-- ── Reverse lookup panel ──────────────────────────────────────── -->
         <Transition name="slide">
-            <div v-if="lookupKey" class="composable-tracker__lookup-panel">
+            <div v-if="lookupTarget" class="composable-tracker__lookup-panel">
                 <div class="composable-tracker__lookup-header">
-                    <span class="mono text-sm">{{ lookupKey }}</span>
+                    <span class="mono text-sm">{{ lookupTitle }}</span>
                     <span class="muted text-sm">— {{ lookupResults.length }} instance{{ lookupResults.length !== 1 ? 's' : '' }}</span>
-                    <button class="composable-tracker__clear-btn composable-tracker__lookup-close" @click="lookupKey = null">✕</button>
+                    <button class="composable-tracker__clear-btn composable-tracker__lookup-close" @click="lookupTarget = null">✕</button>
                 </div>
                 <div v-if="!lookupResults.length" class="composable-tracker__lookup-empty muted text-sm">
-                    No mounted instances expose this key.
+                    No instances matched this lookup.
                 </div>
                 <div v-for="r in lookupResults" :key="r.id" class="composable-tracker__lookup-row">
                     <span class="mono text-sm">{{ r.name }}</span>

package/client/src/views/RenderHeatmap.vue

@@ -2,6 +2,8 @@
 import { computed, defineComponent, h, ref, watch, type VNode } from 'vue'
 import { useResizablePane } from '@observatory-client/composables/useResizablePane'
 import { useObservatoryData, openInEditor as openInEditorFromStore } from '@observatory-client/stores/observatory'
+import { exportJson, importJson } from '@observatory-client/composables/useExportImport'
+import type { ObservatoryExportFile } from '@observatory-client/composables/useExportImport'
 import type { RenderEntry, RenderEvent } from '@observatory/types/snapshot'
 
 interface ComponentNode {
@@ -197,6 +199,7 @@ const activeThreshold = computed({
 })
 const activeHotOnly = ref(false)
 const frozen = ref(false)
+const isImportedSnapshot = ref(false)
 const search = ref('')
 const activeSelectedId = ref<string | null>(null)
 const activeRootId = ref<string | null>(null)
@@ -671,6 +674,7 @@ function updateSearch(event: Event) {
 function toggleFreeze() {
     if (frozen.value) {
         frozen.value = false
+        isImportedSnapshot.value = false
         frozenSnapshot.value = []
 
         return
@@ -680,6 +684,45 @@ function toggleFreeze() {
     frozen.value = true
 }
 
+function handleExport() {
+    exportJson(`observatory-renders-${Date.now()}.json`, {
+        type: 'observatory-renders',
+        version: '1',
+        exportedAt: Date.now(),
+        count: displayEntries.value.length,
+        data: displayEntries.value,
+    })
+}
+
+async function handleImport() {
+    let parsed: unknown
+
+    try {
+        parsed = await importJson()
+    } catch (err) {
+        if (err instanceof Error && err.message !== 'cancelled') {
+            alert(`Import failed: ${err.message}`)
+        }
+        return
+    }
+
+    const file = parsed as ObservatoryExportFile<RenderEntry>
+
+    if (
+        file?.type !== 'observatory-renders' ||
+        file?.version !== '1' ||
+        !Array.isArray(file?.data) ||
+        (file.data.length > 0 && (file.data[0]?.uid === undefined || !file.data[0]?.name || !file.data[0]?.file))
+    ) {
+        alert('Invalid observatory renders file.')
+        return
+    }
+
+    frozenSnapshot.value = file.data
+    frozen.value = true
+    isImportedSnapshot.value = true
+}
+
 function basename(file: string) {
     return (
         file
@@ -732,8 +775,10 @@ function formatTimestamp(t: number): string {
                 <option v-for="r in knownRoutes" :key="r" :value="r">{{ r }}</option>
             </select>
             <button :class="{ active: frozen }" class="render-heatmap__freeze tracker-toolbar__spacer" @click="toggleFreeze">
-                {{ frozen ? 'unfreeze' : 'freeze snapshot' }}
+                {{ frozen && isImportedSnapshot ? 'unfreeze (imported)' : frozen ? 'unfreeze' : 'freeze snapshot' }}
             </button>
+            <button class="render-heatmap__action-btn" title="Export render data as JSON" @click="handleExport">↓ export</button>
+            <button class="render-heatmap__action-btn" title="Import render data from JSON file" @click="handleImport">↑ import</button>
         </div>
 
         <div class="render-heatmap__stats tracker-stats-row">
@@ -952,6 +997,23 @@ function formatTimestamp(t: number): string {
     width: 90px;
 }
 
+.render-heatmap__action-btn {
+    padding: 3px 8px;
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 11px;
+    border-radius: 3px;
+    transition: all 0.12s;
+    font-family: var(--mono);
+}
+
+.render-heatmap__action-btn:hover {
+    background: var(--bg-secondary);
+    color: var(--text);
+}
+
 .stat-sub {
     margin-top: var(--tracker-space-1);
     font-size: var(--tracker-font-size-sm);