nuxt-devtools-observatory 0.1.32 → 0.1.34

package/client/src/views/FetchDashboard.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { useVirtualizationConfig } from '@observatory-client/composables/useVirtualizationConfig'
 import { useResizablePane } from '@observatory-client/composables/useResizablePane'
 import { useObservatoryData } from '@observatory-client/stores/observatory'
 import type { FetchEntry } from '@observatory/types/snapshot'
 
 type FetchViewEntry = FetchEntry & { startOffset: number }
 
-const { fetch, connected } = useObservatoryData()
+const { fetch, connected, features } = useObservatoryData()
 const { paneWidth: detailWidth, onHandleMouseDown } = useResizablePane(280, 'observatory:fetch:detailWidth')
 
 const filter = ref<string>('all')
 const search = ref('')
 const selectedId = ref<string | null>(null)
 const waterfallOpen = ref(true)
+const tableScrollRef = ref<HTMLElement | null>(null)
+const currentPage = ref(1)
+
+const { preset: virtualizationPreset } = useVirtualizationConfig({ rowHeight: 38, overscan: 6 })
 
 const entries = computed<FetchViewEntry[]>(() => {
     const sorted = [...fetch.value].sort((a, b) => a.startTime - b.startTime)
@@ -24,7 +30,15 @@ const entries = computed<FetchViewEntry[]>(() => {
     }))
 })
 
-const selected = computed(() => entries.value.find((entry) => entry.id === selectedId.value) ?? null)
+const entriesById = computed(() => new Map(entries.value.map((entry) => [entry.id, entry] as const)))
+
+const selected = computed(() => {
+    if (!selectedId.value) {
+        return null
+    }
+
+    return entriesById.value.get(selectedId.value) ?? null
+})
 
 const counts = computed(() => ({
     ok: entries.value.filter((entry) => entry.status === 'ok' || entry.status === 'cached').length,
@@ -48,6 +62,94 @@ const filtered = computed(() => {
     })
 })
 
+const fetchPageSize = computed(() => {
+    const raw = features.value?.fetchPageSize
+
+    if (typeof raw !== 'number' || !Number.isFinite(raw)) {
+        return 20
+    }
+
+    return Math.max(1, Math.floor(raw))
+})
+
+const pagedFiltered = computed(() => filtered.value.slice(0, currentPage.value * fetchPageSize.value))
+const hasMoreRows = computed(() => pagedFiltered.value.length < filtered.value.length)
+
+const virtualizedRowsEnabled = computed(() => true)
+
+const rowVirtualizerOptions = computed(() => ({
+    count: pagedFiltered.value.length,
+    getScrollElement: () => tableScrollRef.value,
+    estimateSize: () => virtualizationPreset.value.rowHeight,
+    overscan: virtualizationPreset.value.overscan,
+}))
+
+const rowVirtualizer = useVirtualizer(rowVirtualizerOptions)
+
+const virtualItems = computed(() => {
+    if (!virtualizedRowsEnabled.value) {
+        return []
+    }
+
+    return rowVirtualizer.value.getVirtualItems()
+})
+
+const topVirtualPadding = computed(() => {
+    if (!virtualizedRowsEnabled.value || virtualItems.value.length === 0) {
+        return 0
+    }
+
+    return virtualItems.value[0].start
+})
+
+const bottomVirtualPadding = computed(() => {
+    if (!virtualizedRowsEnabled.value || virtualItems.value.length === 0) {
+        return 0
+    }
+
+    const total = rowVirtualizer.value.getTotalSize()
+    const last = virtualItems.value[virtualItems.value.length - 1]
+
+    return Math.max(0, total - last.end)
+})
+
+const visibleRows = computed(() => {
+    if (!virtualizedRowsEnabled.value) {
+        return pagedFiltered.value
+    }
+
+    return virtualItems.value.map((item) => pagedFiltered.value[item.index]).filter((entry): entry is FetchViewEntry => Boolean(entry))
+})
+
+watch([filter, search], () => {
+    currentPage.value = 1
+    if (tableScrollRef.value) {
+        tableScrollRef.value.scrollTop = 0
+    }
+})
+
+watch(filtered, (nextRows) => {
+    const maxPage = Math.max(1, Math.ceil(nextRows.length / fetchPageSize.value))
+
+    if (currentPage.value > maxPage) {
+        currentPage.value = maxPage
+    }
+})
+
+function onTableScroll() {
+    const element = tableScrollRef.value
+
+    if (!element || !hasMoreRows.value) {
+        return
+    }
+
+    const nearBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 32
+
+    if (nearBottom) {
+        currentPage.value += 1
+    }
+}
+
 const metaRows = computed(() => {
     if (!selected.value) {
         return []
@@ -91,11 +193,22 @@ function barColor(status: string) {
     return { ok: 'var(--teal)', error: 'var(--red)', pending: 'var(--amber)', cached: 'var(--border)' }[status] ?? 'var(--border)'
 }
 
+const maxCompletedMs = computed(() => {
+    let maxMs = 1
+
+    for (const entry of entries.value) {
+        if (entry.ms != null && entry.ms > maxMs) {
+            maxMs = entry.ms
+        }
+    }
+
+    return maxMs
+})
+
 function barWidth(entry: FetchViewEntry) {
     // Only consider completed entries for the max, so pending entries don't
     // collapse all bars to a dot while waiting.
-    const completedMs = entries.value.filter((e) => e.ms != null).map((e) => e.ms!)
-    const maxMs = completedMs.length > 0 ? Math.max(...completedMs, 1) : 1
+    const maxMs = maxCompletedMs.value
 
     return entry.ms != null ? Math.max(4, Math.round((entry.ms / maxMs) * 100)) : 4
 }
@@ -103,15 +216,26 @@ function barWidth(entry: FetchViewEntry) {
 // Waterfall uses absolute time offsets from the earliest startTime.
 // maxEnd is computed only from completed entries so that a long-running
 // pending request doesn't squash all completed bars to invisible.
-function waterfallScale() {
-    const completed = entries.value.filter((e) => e.ms != null)
-    const maxEnd = completed.length > 0 ? Math.max(...completed.map((e) => e.startOffset + e.ms!), 1) : 1
+const waterfallScale = computed(() => {
+    let maxEnd = 1
+
+    for (const entry of entries.value) {
+        if (entry.ms == null) {
+            continue
+        }
+
+        const end = entry.startOffset + entry.ms
+
+        if (end > maxEnd) {
+            maxEnd = end
+        }
+    }
 
     return maxEnd
-}
+})
 
 function wfLeft(entry: FetchViewEntry) {
-    const scale = waterfallScale()
+    const scale = waterfallScale.value
     return Math.min(98, Math.round((entry.startOffset / scale) * 100))
 }
 
@@ -122,7 +246,7 @@ function wfWidth(entry: FetchViewEntry) {
         return 2
     }
 
-    const scale = waterfallScale()
+    const scale = waterfallScale.value
     const left = wfLeft(entry)
 
     // Clamp so bar + left never exceeds 100%
@@ -173,7 +297,7 @@ function formatSize(bytes: number) {
         </div>
 
         <div class="fetch-dashboard__split tracker-split">
-            <div class="fetch-dashboard__table tracker-table-wrap">
+            <div ref="tableScrollRef" class="fetch-dashboard__table tracker-table-wrap" @scroll="onTableScroll">
                 <table class="data-table">
                     <thead>
                         <tr>
@@ -188,7 +312,14 @@ function formatSize(bytes: number) {
                     </thead>
                     <tbody>
                         <tr
-                            v-for="entry in filtered"
+                            v-if="virtualizedRowsEnabled && topVirtualPadding > 0"
+                            class="fetch-dashboard__virtual-spacer-row"
+                            aria-hidden="true"
+                        >
+                            <td colspan="7" :style="{ height: `${topVirtualPadding}px` }"></td>
+                        </tr>
+                        <tr
+                            v-for="entry in visibleRows"
                             :key="entry.id"
                             :class="{ selected: selected?.id === entry.id }"
                             @click="selectedId = entry.id"
@@ -221,16 +352,29 @@ function formatSize(bytes: number) {
                                 </div>
                             </td>
                         </tr>
+                        <tr
+                            v-if="virtualizedRowsEnabled && bottomVirtualPadding > 0"
+                            class="fetch-dashboard__virtual-spacer-row"
+                            aria-hidden="true"
+                        >
+                            <td colspan="7" :style="{ height: `${bottomVirtualPadding}px` }"></td>
+                        </tr>
                         <tr v-if="!filtered.length">
                             <td colspan="7" class="tracker-empty-cell">
                                 {{ connected ? 'No fetches recorded yet.' : 'Waiting for connection to the Nuxt app…' }}
                             </td>
                         </tr>
+                        <tr v-else class="fetch-dashboard__pagination-row" aria-live="polite">
+                            <td colspan="7" class="fetch-dashboard__pagination-cell">
+                                <span class="mono muted text-sm">showing {{ pagedFiltered.length }} of {{ filtered.length }}</span>
+                                <span v-if="hasMoreRows" class="mono muted text-sm">scroll to load more</span>
+                            </td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
 
-            <div v-if="selected" class="tracker-resize-handle" @mousedown="onHandleMouseDown" />
+            <div class="tracker-resize-handle" @mousedown="onHandleMouseDown" />
 
             <div v-if="selected" class="fetch-dashboard__detail tracker-detail-panel" :style="{ width: detailWidth + 'px' }">
                 <div class="fetch-dashboard__detail-header">
@@ -253,7 +397,7 @@ function formatSize(bytes: number) {
                 <div class="tracker-section-label fetch-dashboard__section-label fetch-dashboard__section-label--source">source</div>
                 <div class="mono text-sm muted">{{ selected.file }}:{{ selected.line }}</div>
             </div>
-            <div v-else class="tracker-detail-empty">select a call to inspect</div>
+            <div v-else class="tracker-detail-empty" :style="{ width: detailWidth + 'px' }">select a call to inspect</div>
         </div>
 
         <div class="fetch-dashboard__waterfall">
@@ -297,6 +441,25 @@ function formatSize(bytes: number) {
     min-width: 80px;
 }
 
+.fetch-dashboard__virtual-spacer-row td {
+    padding: 0;
+    border-bottom: 0;
+    background: transparent;
+}
+
+.fetch-dashboard__pagination-row td {
+    background: transparent;
+}
+
+.fetch-dashboard__pagination-cell {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--tracker-space-2);
+    padding-top: var(--tracker-space-2);
+    border-bottom: 0;
+}
+
 .fetch-dashboard__url {
     max-width: 200px;
 }
@@ -340,7 +503,7 @@ function formatSize(bytes: number) {
     padding: var(--tracker-space-2) 10px;
     overflow: auto;
     white-space: pre;
-    max-height: 160px;
+    min-height: fit-content;
 }
 
 .fetch-dashboard__waterfall {
@@ -349,6 +512,8 @@ function formatSize(bytes: number) {
     border: var(--tracker-border-width) solid var(--border);
     border-radius: var(--radius-lg);
     padding: 10px var(--tracker-space-3);
+    max-height: 35%;
+    overflow-x: auto;
 }
 
 .fetch-dashboard__waterfall-header {

package/client/src/views/PiniaStoreTracker.vue

@@ -0,0 +1,343 @@
+<script setup lang="ts">
+// No store is accessed or created here, so Pinia Tracker will show 'no store available' by default.
+import { computed, ref } from 'vue'
+import { useObservatoryData, clearPiniaStores /* editPiniaState */ } from '@observatory-client/stores/observatory'
+import type { PiniaMutationEvent, PiniaStoreEntry } from '@observatory/types/snapshot'
+
+const { piniaStores, connected } = useObservatoryData()
+
+const selectedStoreId = ref<string | null>(null)
+const selectedEventId = ref<string | null>(null)
+// Disabled until we can get it working properly. See comments in the template and applyEdit function for details.
+// const editPath = ref('')
+// const editValue = ref('')
+const editError = ref('')
+
+const stores = computed(() => [...piniaStores.value].sort((a, b) => a.id.localeCompare(b.id)))
+
+const selectedStore = computed<PiniaStoreEntry | null>(() => {
+    if (!selectedStoreId.value) {
+        return stores.value[0] ?? null
+    }
+
+    return stores.value.find((item) => item.id === selectedStoreId.value) ?? null
+})
+
+const timeline = computed<PiniaMutationEvent[]>(() => {
+    return selectedStore.value ? [...selectedStore.value.timeline].slice().reverse() : []
+})
+
+const selectedEvent = computed<PiniaMutationEvent | null>(() => {
+    if (!selectedEventId.value) {
+        return timeline.value[0] ?? null
+    }
+
+    return timeline.value.find((event) => event.id === selectedEventId.value) ?? null
+})
+
+function selectStore(id: string) {
+    selectedStoreId.value = id
+    selectedEventId.value = null
+    editError.value = ''
+}
+
+function pretty(value: unknown) {
+    try {
+        return JSON.stringify(value, null, 2)
+    } catch {
+        return String(value)
+    }
+}
+
+function renderDuration(event: PiniaMutationEvent) {
+    if (typeof event.durationMs !== 'number') {
+        return '-'
+    }
+
+    return `${event.durationMs.toFixed(2)}ms`
+}
+
+/* Edit functionality is temporarily disabled due to issues with state updates not being reflected in the UI. This is likely related to how the editPiniaState function applies changes and how the store's reactivity system detects those changes. Further investigation is needed to determine the root cause and implement a proper fix.
+function applyEdit() {
+    const store = selectedStore.value
+
+    if (!store) {
+        editError.value = 'Select a store first.'
+
+        return
+    }
+
+    if (!editPath.value.trim()) {
+        editError.value = 'Path is required (for example: preferences.theme).'
+
+        return
+    }
+
+    let nextValue: unknown = editValue.value
+
+    if (editValue.value.trim()) {
+        try {
+            nextValue = JSON.parse(editValue.value)
+        } catch {
+            nextValue = editValue.value
+        }
+    }
+
+    editError.value = ''
+    editPiniaState(store.id, editPath.value.trim(), nextValue)
+} */
+</script>
+
+<template>
+    <section class="pinia-tracker">
+        <header class="toolbar">
+            <h2>Pinia State and Mutations</h2>
+            <div class="toolbar-actions">
+                <span v-if="connected" class="status connected">Connected</span>
+                <span v-else class="status">Waiting for app</span>
+                <button class="danger" @click="clearPiniaStores">Clear timeline</button>
+            </div>
+        </header>
+
+        <div v-if="stores.length === 0" class="empty">No Pinia stores detected yet. Trigger store usage in the app.</div>
+
+        <div v-else class="content-grid">
+            <aside class="panel stores">
+                <h3>Stores</h3>
+                <button
+                    v-for="store in stores"
+                    :key="store.id"
+                    class="store-row"
+                    :class="{ active: selectedStore?.id === store.id }"
+                    @click="selectStore(store.id)"
+                >
+                    <span>{{ store.name }}</span>
+                    <small>{{ store.timeline.length }} events</small>
+                </button>
+            </aside>
+
+            <section class="panel timeline">
+                <h3>Timeline</h3>
+                <div class="list">
+                    <button
+                        v-for="event in timeline"
+                        :key="event.id"
+                        class="event-row"
+                        :class="{ active: selectedEvent?.id === event.id }"
+                        @click="selectedEventId = event.id"
+                    >
+                        <strong>{{ event.kind }}</strong>
+                        <span>{{ event.name }}</span>
+                        <small>{{ renderDuration(event) }}</small>
+                    </button>
+                </div>
+            </section>
+
+            <section class="panel inspector">
+                <h3>Inspector</h3>
+
+                <div v-if="selectedStore" class="block">
+                    <h4>Current state</h4>
+                    <pre>{{ pretty(selectedStore.state) }}</pre>
+                </div>
+
+                <!-- Edit functionality is temporarily disabled due to issues with state updates not being reflected in the UI. This is likely related to how the editPiniaState function applies changes and how the store's reactivity system detects those changes. Further investigation is needed to determine the root cause and implement a proper fix.
+                <div v-if="selectedStore" class="block edit-box">
+                    <h4>Edit state path</h4>
+                    <input v-model="editPath" placeholder="preferences.theme" />
+                    <textarea v-model="editValue" rows="4" placeholder='"dark" or {"enabled":true}' />
+                    <div class="actions">
+                        <button @click="applyEdit">Apply edit</button>
+                        <small v-if="editError" class="error">{{ editError }}</small>
+                    </div>
+                </div>
+                -->
+
+                <div v-if="selectedEvent" class="block">
+                    <h4>Selected event</h4>
+                    <p class="meta">
+                        {{ selectedEvent.kind }} · {{ selectedEvent.name }} · {{ selectedEvent.status }} ·
+                        {{ renderDuration(selectedEvent) }}
+                    </p>
+                    <h5>Diff</h5>
+                    <ul class="diff-list">
+                        <li v-for="item in selectedEvent.diff" :key="item.path">
+                            <code>{{ item.path }}</code>
+                        </li>
+                    </ul>
+                    <h5>Before</h5>
+                    <pre>{{ pretty(selectedEvent.beforeState) }}</pre>
+                    <h5>After</h5>
+                    <pre>{{ pretty(selectedEvent.afterState) }}</pre>
+                </div>
+            </section>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.pinia-tracker {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 12px;
+    padding: 12px;
+}
+
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.toolbar h2 {
+    margin: 0;
+    font-size: 14px;
+}
+
+.toolbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.status {
+    color: var(--text3);
+    font-size: 12px;
+}
+
+.status.connected {
+    color: var(--green);
+}
+
+.content-grid {
+    display: grid;
+    grid-template-columns: 220px 280px 1fr;
+    gap: 10px;
+    min-height: 0;
+    flex: 1;
+}
+
+.panel {
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg2);
+    padding: 10px;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.panel h3 {
+    margin: 0;
+    font-size: 12px;
+    color: var(--text2);
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
+
+.stores,
+.timeline,
+.inspector,
+.list {
+    overflow: auto;
+}
+
+.store-row,
+.event-row {
+    width: 100%;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--bg3);
+    color: var(--text);
+    text-align: left;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    cursor: pointer;
+}
+
+.store-row.active,
+.event-row.active {
+    border-color: var(--purple);
+}
+
+.store-row small,
+.event-row small {
+    color: var(--text3);
+}
+
+.block {
+    border-top: 1px solid var(--border);
+    padding-top: 8px;
+}
+
+.block h4,
+.block h5 {
+    margin: 0 0 6px;
+    font-size: 12px;
+}
+
+.meta {
+    margin: 0 0 6px;
+    color: var(--text2);
+    font-size: 12px;
+}
+
+pre {
+    margin: 0;
+    background: var(--bg3);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 8px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: 11px;
+    max-height: 200px;
+    overflow: auto;
+}
+
+.edit-box input,
+.edit-box textarea {
+    width: 100%;
+    background: var(--bg3);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    padding: 6px;
+    font-size: 12px;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.error {
+    color: var(--red);
+}
+
+.empty {
+    padding: 24px;
+    border: 1px dashed var(--border);
+    border-radius: 8px;
+    color: var(--text2);
+}
+
+.diff-list {
+    margin: 0;
+    padding-left: 16px;
+}
+
+.danger {
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--bg2);
+    color: var(--text);
+    padding: 6px 10px;
+    cursor: pointer;
+}
+</style>