nuxt-devtools-observatory 0.1.32 → 0.1.34

package/client/src/App.vue

@@ -4,14 +4,17 @@ import { useObservatoryData } from './stores/observatory'
 import FetchDashboard from './views/FetchDashboard.vue'
 import ProvideInjectGraph from './views/ProvideInjectGraph.vue'
 import ComposableTracker from './views/ComposableTracker.vue'
+import PiniaStoreTracker from './views/PiniaStoreTracker.vue'
 import RenderHeatmap from './views/RenderHeatmap.vue'
 import TransitionTimeline from './views/TransitionTimeline.vue'
 import TraceViewer from './views/TraceViewer.vue'
+import { useVirtualizationFlags } from './composables/useVirtualizationFlags'
 
 const pathMap: Record<string, string> = {
     fetch: 'fetch',
     provide: 'provide',
     composables: 'composable',
+    pinia: 'pinia',
     heatmap: 'heatmap',
     transitions: 'transitions',
     traces: 'traces',
@@ -22,12 +25,16 @@ const activeTab = ref(pathMap[segment] ?? 'fetch')
 
 const { features } = useObservatoryData()
 
+// Initializes rollout flags from query params before view rendering.
+useVirtualizationFlags()
+
 const tabs = computed(() => {
     const f = features.value || {}
     return [
         f.fetchDashboard && { id: 'fetch', label: 'useFetch', icon: '⬡' },
         f.provideInjectGraph && { id: 'provide', label: 'provide/inject', icon: '⬡' },
         f.composableTracker && { id: 'composable', label: 'Composables', icon: '⬡' },
+        f.piniaTracker && { id: 'pinia', label: 'Pinia', icon: '⬡' },
         f.renderHeatmap && { id: 'heatmap', label: 'Heatmap', icon: '⬡' },
         f.transitionTracker && { id: 'transitions', label: 'Transitions', icon: '⬡' },
         f.traceViewer && { id: 'traces', label: 'Traces', icon: '⬡' },
@@ -49,6 +56,7 @@ const tabs = computed(() => {
             <FetchDashboard v-if="activeTab === 'fetch'" />
             <ProvideInjectGraph v-else-if="activeTab === 'provide'" />
             <ComposableTracker v-else-if="activeTab === 'composable'" />
+            <PiniaStoreTracker v-else-if="activeTab === 'pinia'" />
             <RenderHeatmap v-else-if="activeTab === 'heatmap'" />
             <TransitionTimeline v-else-if="activeTab === 'transitions'" />
             <TraceViewer v-else-if="activeTab === 'traces'" />

package/client/src/components/Flamegraph.vue

@@ -291,10 +291,6 @@ const flattenedTree = computed(() => {
     background: var(--tracker-tint-purple-soft, rgb(127 119 221 / 8%));
 }
 
-.flamegraph__row--selected .flamegraph__span-name {
-    color: var(--purple, var(--accent));
-}
-
 .flamegraph__label {
     display: flex;
     align-items: center;
@@ -350,6 +346,10 @@ const flattenedTree = computed(() => {
     color: var(--text);
 }
 
+.flamegraph__row--selected .flamegraph__span-name {
+    color: var(--purple, var(--accent));
+}
+
 .flamegraph__span-type {
     padding: 2px 6px;
     background: var(--bg2, var(--bg));

package/client/src/components/SpanInspector.vue

@@ -404,7 +404,7 @@ function getSpanColorClass(type: string) {
     overflow: auto;
     max-height: 200px;
     white-space: pre-wrap;
-    word-break: break-word;
+    overflow-wrap: anywhere;
 }
 
 /* Color utilities */

package/client/src/composables/composable-search.ts

@@ -91,6 +91,9 @@ function valueMatchesQuery(value: unknown, query: string, seen: WeakSet<object>,
 /**
  * Returns true when a composable entry matches the search query.
  * Search scope includes name, file, ref keys, and nested reactive key/value content.
+ * @param {ComposableEntry} entry - Composable entry to inspect.
+ * @param {string} query - Case-insensitive search query.
+ * @returns {boolean} True when the entry matches the query.
  */
 export function matchesComposableEntryQuery(entry: ComposableEntry, query: string): boolean {
     const normalizedQuery = query.trim().toLowerCase()

package/client/src/composables/trace-render-aggregation.ts

@@ -68,7 +68,11 @@ function getComponentIdentity(metadata: SpanMetadata, fallbackId: string): { key
     }
 }
 
-/** Build per-trace render stats grouped by component UID. */
+/**
+ * Build per-trace render stats grouped by component UID.
+ * @param {TraceEntry | undefined} trace - Trace to summarize.
+ * @returns {TraceRenderStatsRow[]} Render metrics grouped by component uid.
+ */
 export function buildRenderSummaryForTrace(trace?: TraceEntry): TraceRenderStatsRow[] {
     if (!trace) {
         return []
@@ -135,7 +139,12 @@ export function buildRenderSummaryForTrace(trace?: TraceEntry): TraceRenderStats
     return rows
 }
 
-/** Build cross-trace render aggregation and comparison against a selected trace. */
+/**
+ * Build cross-trace render aggregation and comparison against a selected trace.
+ * @param {TraceEntry[]} traces - Traces included in the aggregation window.
+ * @param {string | undefined} selectedTraceId - Optional selected trace for baseline comparison.
+ * @returns {CrossTraceRenderSummaryRow[]} Aggregated comparison rows by component identity.
+ */
 export function buildCrossTraceRenderSummary(traces: TraceEntry[], selectedTraceId?: string): CrossTraceRenderSummaryRow[] {
     if (traces.length === 0) {
         return []

package/client/src/composables/useVirtualizationConfig.ts

@@ -0,0 +1,40 @@
+import { computed, ref } from 'vue'
+
+const DEFAULT_ROW_HEIGHT = 34
+const DEFAULT_OVERSCAN = 10
+const MIN_OVERSCAN = 2
+const MAX_OVERSCAN = 40
+
+function clampOverscan(value: number): number {
+    if (!Number.isFinite(value)) {
+        return DEFAULT_OVERSCAN
+    }
+
+    return Math.max(MIN_OVERSCAN, Math.min(MAX_OVERSCAN, Math.round(value)))
+}
+
+export type VirtualizationPreset = {
+    rowHeight: number
+    overscan: number
+}
+
+export function useVirtualizationConfig(initial?: Partial<VirtualizationPreset>) {
+    const rowHeight = ref(initial?.rowHeight ?? DEFAULT_ROW_HEIGHT)
+    const overscan = ref(clampOverscan(initial?.overscan ?? DEFAULT_OVERSCAN))
+
+    const preset = computed<VirtualizationPreset>(() => ({
+        rowHeight: Math.max(20, rowHeight.value),
+        overscan: clampOverscan(overscan.value),
+    }))
+
+    return {
+        rowHeight,
+        overscan,
+        preset,
+    }
+}
+
+export const VIRTUALIZATION_DEFAULTS = {
+    rowHeight: DEFAULT_ROW_HEIGHT,
+    overscan: DEFAULT_OVERSCAN,
+} as const

package/client/src/composables/useVirtualizationFlags.ts

@@ -0,0 +1,129 @@
+import { computed, ref } from 'vue'
+
+type VirtualizationScreen = 'heatmap' | 'traces' | 'composables' | 'fetch' | 'transitions'
+
+type VirtualizationFlags = {
+    enabled: boolean
+    heatmap: boolean
+    traces: boolean
+    composables: boolean
+    fetch: boolean
+    transitions: boolean
+}
+
+const defaultFlags: VirtualizationFlags = {
+    enabled: false,
+    heatmap: false,
+    traces: false,
+    composables: false,
+    fetch: false,
+    transitions: false,
+}
+
+const flags = ref<VirtualizationFlags>({ ...defaultFlags })
+
+let initialized = false
+
+function parseBooleanParam(value: string | null): boolean | null {
+    if (value == null) {
+        return null
+    }
+
+    if (value === '1' || value === 'true' || value === 'on') {
+        return true
+    }
+
+    if (value === '0' || value === 'false' || value === 'off') {
+        return false
+    }
+
+    return null
+}
+
+function readFromStorage(): VirtualizationFlags {
+    return { ...defaultFlags }
+}
+
+function applyQueryOverrides(current: VirtualizationFlags): VirtualizationFlags {
+    if (typeof window === 'undefined') {
+        return current
+    }
+
+    const params = new URLSearchParams(window.location.search)
+    const globalParam = parseBooleanParam(params.get('virt'))
+
+    const next = { ...current }
+
+    if (globalParam != null) {
+        next.enabled = globalParam
+    }
+
+    const perScreen: Array<[VirtualizationScreen, string]> = [
+        ['heatmap', 'virtHeatmap'],
+        ['traces', 'virtTraces'],
+        ['composables', 'virtComposables'],
+        ['fetch', 'virtFetch'],
+        ['transitions', 'virtTransitions'],
+    ]
+
+    for (const [key, paramName] of perScreen) {
+        const override = parseBooleanParam(params.get(paramName))
+
+        if (override != null) {
+            next[key] = override
+        }
+    }
+
+    return next
+}
+
+function init() {
+    if (initialized) {
+        return
+    }
+
+    initialized = true
+    const stored = readFromStorage()
+    const merged = applyQueryOverrides(stored)
+    flags.value = merged
+}
+
+function setAllEnabled(value: boolean) {
+    const next = {
+        ...flags.value,
+        enabled: value,
+    }
+
+    flags.value = next
+}
+
+function setScreenEnabled(screen: VirtualizationScreen, value: boolean) {
+    const next = {
+        ...flags.value,
+        [screen]: value,
+    }
+
+    flags.value = next
+}
+
+export function useVirtualizationFlags() {
+    init()
+
+    const effective = computed(() => ({
+        enabled: flags.value.enabled,
+        heatmap: flags.value.enabled && flags.value.heatmap,
+        traces: flags.value.enabled && flags.value.traces,
+        composables: flags.value.enabled && flags.value.composables,
+        fetch: flags.value.enabled && flags.value.fetch,
+        transitions: flags.value.enabled && flags.value.transitions,
+    }))
+
+    return {
+        flags,
+        effective,
+        setAllEnabled,
+        setScreenEnabled,
+    }
+}
+
+export type { VirtualizationFlags, VirtualizationScreen }

package/client/src/stores/observatory.ts

@@ -6,6 +6,7 @@ import type {
     ProvideEntry,
     InjectEntry,
     ComposableEntry,
+    PiniaStoreEntry,
     RenderEntry,
     TransitionEntry,
     TraceEntry,
@@ -16,6 +17,7 @@ type ProvideInjectSnapshot = { provides: ProvideEntry[]; injects: InjectEntry[]
 const fetchEntries = ref<FetchEntry[]>([])
 const provideInject = ref<ProvideInjectSnapshot>({ provides: [], injects: [] })
 const composables = ref<ComposableEntry[]>([])
+const piniaStores = ref<PiniaStoreEntry[]>([])
 const renders = ref<RenderEntry[]>([])
 const transitions = ref<TransitionEntry[]>([])
 const traces = ref<TraceEntry[]>([])
@@ -57,6 +59,7 @@ function applySnapshot(data: ObservatorySnapshot) {
           }
         : { provides: [], injects: [] }
     composables.value = cloneArray(data.composables as ComposableEntry[] | undefined)
+    piniaStores.value = cloneArray(data.piniaStores as PiniaStoreEntry[] | undefined)
     renders.value = normalizeRenderEntries(data.renders as RenderEntry[] | undefined)
     transitions.value = cloneArray(data.transitions as TransitionEntry[] | undefined)
     traces.value = cloneArray(data.traces as TraceEntry[] | undefined)
@@ -87,6 +90,7 @@ function applySnapshot(data: ObservatorySnapshot) {
         debugLog('first snapshot received', {
             fetch: fetchEntries.value.length,
             composables: composables.value.length,
+            piniaStores: piniaStores.value.length,
             renders: renders.value.length,
             transitions: transitions.value.length,
             traces: traces.value.length,
@@ -200,6 +204,21 @@ export function editComposableValue(id: string, key: string, value: unknown) {
     })
 }
 
+export function clearPiniaStores() {
+    piniaStores.value = []
+    rpc?.clearPiniaStores()
+        .then(() => rpc?.requestSnapshot())
+        .catch((error) => {
+            debugLog('clearPiniaStores failed', error)
+        })
+}
+
+export function editPiniaState(storeId: string, path: string, value: unknown) {
+    rpc?.editPiniaState(storeId, path, value).catch((error) => {
+        debugLog('editPiniaState failed', error)
+    })
+}
+
 export function openInEditor(file: string) {
     if (!file || file === 'unknown') {
         return
@@ -233,6 +252,7 @@ export function useObservatoryData() {
         fetch: fetchEntries,
         provideInject,
         composables,
+        piniaStores,
         renders,
         transitions,
         traces,