nuxt-devtools-observatory 0.1.31 → 0.1.33

package/client/src/views/TraceViewer.vue

@@ -1,19 +1,53 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { useVirtualizationConfig } from '@observatory-client/composables/useVirtualizationConfig'
+import { useVirtualizationFlags } from '@observatory-client/composables/useVirtualizationFlags'
 import { useObservatoryData } from '@observatory-client/stores/observatory'
 import Flamegraph from '@observatory-client/components/Flamegraph.vue'
 import WaterfallView from '@observatory-client/components/WaterfallView.vue'
 import SpanInspector from '@observatory-client/components/SpanInspector.vue'
 import TraceFilter from '@observatory-client/components/TraceFilter.vue'
 import { useTraceFilter } from '@observatory-client/composables/useTraceFilter'
+import { exportJson, importJson } from '@observatory-client/composables/useExportImport'
+import {
+    buildRenderSummaryForTrace,
+    buildCrossTraceRenderSummary,
+    type CrossTraceRenderSummaryRow,
+    type TraceRenderStatsRow,
+} from '@observatory-client/composables/trace-render-aggregation'
+import type { ObservatoryExportFile } from '@observatory-client/composables/useExportImport'
 import type { TraceEntry, TraceSpan } from '@observatory/types/snapshot'
 
+type TraceSpanRow = {
+    span: TraceSpan
+    displayName: string
+    uid: string | number | undefined
+}
+
 const { traces, connected } = useObservatoryData()
 
+const importedTraces = ref<TraceEntry[]>([])
+const isImportMode = computed(() => importedTraces.value.length > 0)
+
 const selectedTraceId = ref<string | null>(null)
 const selectedSpan = ref<TraceSpan | undefined>(undefined)
 const viewMode = ref<'overview' | 'flamegraph' | 'waterfall'>('overview')
 const showFilters = ref(false)
+const renderSummaryOpen = ref(true)
+const crossTraceSummaryOpen = ref(true)
+const crossTraceSortBy = ref<'avgRerendersPerTrace' | 'deltaVsBaseline' | 'totalMs' | 'componentName'>('avgRerendersPerTrace')
+const crossTraceSortDir = ref<'asc' | 'desc'>('desc')
+const crossTraceOnlyRegressions = ref(false)
+const crossTraceOnlyComparable = ref(false)
+const crossTraceSearch = ref('')
+const highlightedUid = ref<string | number | undefined>(undefined)
+const highlightedComponentKey = ref<string | undefined>(undefined)
+const traceListScrollRef = ref<HTMLElement | null>(null)
+const crossTraceScrollRef = ref<HTMLElement | null>(null)
+
+const { effective: virtualizationFlags } = useVirtualizationFlags()
+const { preset: virtualizationPreset } = useVirtualizationConfig({ rowHeight: 34, overscan: 6 })
 
 const {
     searchQuery,
@@ -27,19 +61,26 @@ const {
 } = useTraceFilter()
 
 const sortedTraces = computed(() => {
-    return [...traces.value].sort((a, b) => b.startTime - a.startTime)
+    const source = isImportMode.value ? importedTraces.value : traces.value
+    return [...source].sort((a, b) => b.startTime - a.startTime)
 })
 
 const filteredTraces = computed(() => {
     return applyFilters(sortedTraces.value)
 })
 
+const filteredTraceById = computed(() => {
+    return new Map(filteredTraces.value.map((trace) => [trace.id, trace] as const))
+})
+
 const traceCountLabel = computed(() => {
+    const suffix = isImportMode.value ? ' (imported)' : ''
+
     if (!hasActiveFilters.value) {
-        return `${sortedTraces.value.length} traces`
+        return `${sortedTraces.value.length} traces${suffix}`
     }
 
-    return `Showing ${filteredTraces.value.length} of ${sortedTraces.value.length} traces`
+    return `Showing ${filteredTraces.value.length} of ${sortedTraces.value.length} traces${suffix}`
 })
 
 const selectedTrace = computed(() => {
@@ -47,7 +88,154 @@ const selectedTrace = computed(() => {
         return filteredTraces.value[0]
     }
 
-    return filteredTraces.value.find((t) => t.id === selectedTraceId.value)
+    return filteredTraceById.value.get(selectedTraceId.value)
+})
+
+const renderSummary = computed<TraceRenderStatsRow[]>(() => buildRenderSummaryForTrace(selectedTrace.value))
+
+const crossTraceRenderSummary = computed(() => {
+    return buildCrossTraceRenderSummary(filteredTraces.value, selectedTrace.value?.id)
+})
+
+const crossTraceRows = computed(() => {
+    const q = crossTraceSearch.value.trim().toLowerCase()
+
+    let rows = crossTraceRenderSummary.value.filter((row) => {
+        if (crossTraceOnlyRegressions.value && (row.deltaVsBaseline ?? 0) <= 0) {
+            return false
+        }
+
+        if (crossTraceOnlyComparable.value && row.selectedRerenders === undefined) {
+            return false
+        }
+
+        if (q) {
+            const nameMatch = row.componentName.toLowerCase().includes(q)
+            const fileMatch = row.file.toLowerCase().includes(q)
+
+            if (!nameMatch && !fileMatch) {
+                return false
+            }
+        }
+
+        return true
+    })
+
+    rows = [...rows].sort((a, b) => {
+        const key = crossTraceSortBy.value
+        const dir = crossTraceSortDir.value === 'asc' ? 1 : -1
+
+        if (key === 'componentName') {
+            return a.componentName.localeCompare(b.componentName) * dir
+        }
+
+        if (key === 'deltaVsBaseline') {
+            const av = a.deltaVsBaseline ?? Number.NEGATIVE_INFINITY
+            const bv = b.deltaVsBaseline ?? Number.NEGATIVE_INFINITY
+
+            return (av - bv) * dir
+        }
+
+        return ((a[key] as number) - (b[key] as number)) * dir
+    })
+
+    return rows
+})
+
+const crossTraceRegressionsCount = computed(() => crossTraceRenderSummary.value.filter((row) => (row.deltaVsBaseline ?? 0) > 0).length)
+
+const virtualizedTraceRowsEnabled = computed(() => virtualizationFlags.value.traces)
+
+const traceListVirtualizerOptions = computed(() => ({
+    count: filteredTraces.value.length,
+    getScrollElement: () => traceListScrollRef.value,
+    estimateSize: () => virtualizationPreset.value.rowHeight,
+    overscan: virtualizationPreset.value.overscan,
+}))
+
+const traceListVirtualizer = useVirtualizer(traceListVirtualizerOptions)
+
+const traceListVirtualItems = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value) {
+        return []
+    }
+
+    return traceListVirtualizer.value.getVirtualItems()
+})
+
+const traceListTopPadding = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value || traceListVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    return traceListVirtualItems.value[0].start
+})
+
+const traceListBottomPadding = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value || traceListVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    const total = traceListVirtualizer.value.getTotalSize()
+    const last = traceListVirtualItems.value[traceListVirtualItems.value.length - 1]
+
+    return Math.max(0, total - last.end)
+})
+
+const visibleTraceRows = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value) {
+        return filteredTraces.value
+    }
+
+    return traceListVirtualItems.value
+        .map((item) => filteredTraces.value[item.index])
+        .filter((trace): trace is TraceEntry => Boolean(trace))
+})
+
+const crossTraceVirtualizerOptions = computed(() => ({
+    count: crossTraceRows.value.length,
+    getScrollElement: () => crossTraceScrollRef.value,
+    estimateSize: () => virtualizationPreset.value.rowHeight,
+    overscan: virtualizationPreset.value.overscan,
+}))
+
+const crossTraceVirtualizer = useVirtualizer(crossTraceVirtualizerOptions)
+
+const crossTraceVirtualItems = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value) {
+        return []
+    }
+
+    return crossTraceVirtualizer.value.getVirtualItems()
+})
+
+const crossTraceTopPadding = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value || crossTraceVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    return crossTraceVirtualItems.value[0].start
+})
+
+const crossTraceBottomPadding = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value || crossTraceVirtualItems.value.length === 0) {
+        return 0
+    }
+
+    const total = crossTraceVirtualizer.value.getTotalSize()
+    const last = crossTraceVirtualItems.value[crossTraceVirtualItems.value.length - 1]
+
+    return Math.max(0, total - last.end)
+})
+
+const visibleCrossTraceRows = computed(() => {
+    if (!virtualizedTraceRowsEnabled.value) {
+        return crossTraceRows.value
+    }
+
+    return crossTraceVirtualItems.value
+        .map((item) => crossTraceRows.value[item.index])
+        .filter((row): row is CrossTraceRenderSummaryRow => Boolean(row))
 })
 
 function elapsedFromSpans(trace: TraceEntry): number | undefined {
@@ -126,19 +314,179 @@ function getSpanDisplayName(span: TraceSpan): string {
     return span.name
 }
 
+function getSpanUid(span: TraceSpan): string | number | undefined {
+    const metadata = span.metadata as Record<string, unknown> | undefined
+
+    return metadata?.uid as string | number | undefined
+}
+
+const selectedTraceSpanRows = computed<TraceSpanRow[]>(() => {
+    const trace = selectedTrace.value
+
+    if (!trace) {
+        return []
+    }
+
+    return trace.spans.map((span) => ({
+        span,
+        displayName: getSpanDisplayName(span),
+        uid: getSpanUid(span),
+    }))
+})
+
 function selectTrace(trace: TraceEntry) {
     selectedTraceId.value = trace.id
     selectedSpan.value = undefined
+    highlightedUid.value = undefined
+    highlightedComponentKey.value = undefined
 }
 
 function handleClearFilters() {
     clearFilters()
     selectedSpan.value = undefined
+    highlightedUid.value = undefined
+    highlightedComponentKey.value = undefined
 }
 
 function handleSpanTypesUpdate(value: Set<string>) {
     selectedSpanTypes.value = value
 }
+
+function handleExport() {
+    exportJson(`observatory-traces-${Date.now()}.json`, {
+        type: 'observatory-traces',
+        version: '1',
+        exportedAt: Date.now(),
+        count: traces.value.length,
+        data: traces.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<TraceEntry>
+
+    if (
+        file?.type !== 'observatory-traces' ||
+        file?.version !== '1' ||
+        !Array.isArray(file?.data) ||
+        (file.data.length > 0 && (!file.data[0]?.id || !file.data[0]?.name || !Array.isArray(file.data[0]?.spans)))
+    ) {
+        alert('Invalid observatory traces file.')
+        return
+    }
+
+    importedTraces.value = file.data
+    selectedTraceId.value = null
+    selectedSpan.value = undefined
+}
+
+function handleBackToLive() {
+    importedTraces.value = []
+    selectedTraceId.value = null
+    selectedSpan.value = undefined
+    highlightedUid.value = undefined
+    highlightedComponentKey.value = undefined
+}
+
+function handleRenderSummaryRowClick(uid: string | number) {
+    // Toggle highlight: clicking the already-highlighted row deselects it.
+    highlightedUid.value = highlightedUid.value === uid ? undefined : uid
+    highlightedComponentKey.value = undefined
+    selectedSpan.value = undefined
+}
+
+function formatDelta(value?: number): string {
+    if (value === undefined) {
+        return 'n/a'
+    }
+
+    const rounded = Math.round(value * 10) / 10
+
+    if (rounded > 0) {
+        return `+${rounded}`
+    }
+
+    return `${rounded}`
+}
+
+function deltaToneClass(value?: number): string {
+    if (value === undefined) {
+        return 'trace-viewer__delta--na'
+    }
+
+    if (value > 0) {
+        return 'trace-viewer__delta--regression'
+    }
+
+    if (value < 0) {
+        return 'trace-viewer__delta--improvement'
+    }
+
+    return 'trace-viewer__delta--neutral'
+}
+
+function cycleCrossTraceSort(next: 'avgRerendersPerTrace' | 'deltaVsBaseline' | 'totalMs' | 'componentName') {
+    if (crossTraceSortBy.value === next) {
+        crossTraceSortDir.value = crossTraceSortDir.value === 'desc' ? 'asc' : 'desc'
+
+        return
+    }
+
+    crossTraceSortBy.value = next
+    crossTraceSortDir.value = next === 'componentName' ? 'asc' : 'desc'
+}
+
+function sortIndicator(key: 'avgRerendersPerTrace' | 'deltaVsBaseline' | 'totalMs' | 'componentName') {
+    if (crossTraceSortBy.value !== key) {
+        return ''
+    }
+
+    return crossTraceSortDir.value === 'desc' ? ' ↓' : ' ↑'
+}
+
+const crossTraceRowByKey = computed(() => {
+    return new Map(crossTraceRows.value.map((row) => [row.componentKey, row] as const))
+})
+
+function clearCrossTraceHighlight() {
+    highlightedComponentKey.value = undefined
+    highlightedUid.value = undefined
+}
+
+function handleCrossTraceRowClick(componentKey: string) {
+    const row = crossTraceRowByKey.value.get(componentKey)
+
+    if (!row || row.selectedUid === undefined) {
+        highlightedUid.value = undefined
+        highlightedComponentKey.value = undefined
+        selectedSpan.value = undefined
+
+        return
+    }
+
+    if (highlightedComponentKey.value === componentKey) {
+        highlightedComponentKey.value = undefined
+        highlightedUid.value = undefined
+        selectedSpan.value = undefined
+
+        return
+    }
+
+    highlightedComponentKey.value = componentKey
+    highlightedUid.value = row.selectedUid
+    selectedSpan.value = undefined
+}
 </script>
 
 <template>
@@ -148,6 +496,18 @@ function handleSpanTypesUpdate(value: Set<string>) {
             <div class="trace-viewer__title">Trace Viewer</div>
             <div class="trace-viewer__header-actions">
                 <div class="trace-viewer__count muted text-sm">{{ traceCountLabel }}</div>
+                <button v-if="isImportMode" class="trace-viewer__import-mode-btn" title="Return to live data" @click="handleBackToLive">
+                    ← live
+                </button>
+                <button
+                    class="trace-viewer__action-btn"
+                    title="Export traces as JSON"
+                    :disabled="traces.length === 0 && !isImportMode"
+                    @click="handleExport"
+                >
+                    ↓ export
+                </button>
+                <button class="trace-viewer__action-btn" title="Import traces from JSON file" @click="handleImport">↑ import</button>
                 <button
                     :class="{ 'trace-viewer__filter-btn--active': showFilters }"
                     class="trace-viewer__filter-btn"
@@ -184,7 +544,7 @@ function handleSpanTypesUpdate(value: Set<string>) {
                 <div class="trace-viewer__list-header">
                     <span class="trace-viewer__list-title">Traces</span>
                 </div>
-                <div class="trace-viewer__table-wrap tracker-table-wrap">
+                <div ref="traceListScrollRef" class="trace-viewer__table-wrap tracker-table-wrap">
                     <table class="data-table">
                         <thead>
                             <tr>
@@ -195,7 +555,14 @@ function handleSpanTypesUpdate(value: Set<string>) {
                         </thead>
                         <tbody>
                             <tr
-                                v-for="trace in filteredTraces"
+                                v-if="virtualizedTraceRowsEnabled && traceListTopPadding > 0"
+                                class="trace-viewer__virtual-spacer-row"
+                                aria-hidden="true"
+                            >
+                                <td colspan="3" :style="{ height: `${traceListTopPadding}px` }"></td>
+                            </tr>
+                            <tr
+                                v-for="trace in visibleTraceRows"
                                 :key="trace.id"
                                 :class="{ 'trace-viewer__trace-row--selected': selectedTrace?.id === trace.id }"
                                 class="trace-viewer__trace-row"
@@ -205,6 +572,13 @@ function handleSpanTypesUpdate(value: Set<string>) {
                                 <td class="mono">{{ formatDuration(trace.durationMs, trace) }}</td>
                                 <td class="mono">{{ trace.spans.length }}</td>
                             </tr>
+                            <tr
+                                v-if="virtualizedTraceRowsEnabled && traceListBottomPadding > 0"
+                                class="trace-viewer__virtual-spacer-row"
+                                aria-hidden="true"
+                            >
+                                <td colspan="3" :style="{ height: `${traceListBottomPadding}px` }"></td>
+                            </tr>
                             <tr v-if="!filteredTraces.length">
                                 <td colspan="3" class="tracker-empty-cell">
                                     {{
@@ -276,19 +650,196 @@ function handleSpanTypesUpdate(value: Set<string>) {
 
                             <div class="trace-viewer__span-list">
                                 <div
-                                    v-for="span in selectedTrace.spans"
-                                    :key="span.id"
-                                    :class="{ 'trace-viewer__span-item--selected': selectedSpan?.id === span.id }"
+                                    v-for="spanRow in selectedTraceSpanRows"
+                                    :key="spanRow.span.id"
+                                    :class="{
+                                        'trace-viewer__span-item--selected': selectedSpan?.id === spanRow.span.id,
+                                        'trace-viewer__span-item--highlighted':
+                                            highlightedUid !== undefined && spanRow.uid === highlightedUid,
+                                    }"
                                     class="trace-viewer__span-item"
-                                    @click="selectedSpan = span"
+                                    @click="selectedSpan = spanRow.span"
                                 >
-                                    <div class="trace-viewer__span-name">{{ getSpanDisplayName(span) }}</div>
+                                    <div class="trace-viewer__span-name">{{ spanRow.displayName }}</div>
                                     <div class="trace-viewer__span-meta">
-                                        <span class="trace-viewer__span-type">{{ span.type }}</span>
-                                        <span class="trace-viewer__span-duration">{{ formatDuration(span.durationMs) }}</span>
+                                        <span class="trace-viewer__span-type">{{ spanRow.span.type }}</span>
+                                        <span class="trace-viewer__span-duration">{{ formatDuration(spanRow.span.durationMs) }}</span>
                                     </div>
                                 </div>
                             </div>
+
+                            <!-- Render Summary panel — shown when the trace has render spans -->
+                            <template v-if="renderSummary.length > 0">
+                                <div class="trace-viewer__render-summary-header" @click="renderSummaryOpen = !renderSummaryOpen">
+                                    <span class="trace-viewer__render-summary-toggle">{{ renderSummaryOpen ? '▾' : '▸' }}</span>
+                                    <span class="trace-viewer__render-summary-title">Render Summary</span>
+                                    <span class="trace-viewer__render-summary-count muted">{{ renderSummary.length }} components</span>
+                                    <span
+                                        v-if="highlightedUid !== undefined"
+                                        class="trace-viewer__render-summary-clear"
+                                        @click.stop="highlightedUid = undefined"
+                                    >
+                                        ✕ clear
+                                    </span>
+                                </div>
+                                <div v-if="renderSummaryOpen" class="trace-viewer__render-summary-table-wrap">
+                                    <table class="data-table trace-viewer__render-summary-table">
+                                        <thead>
+                                            <tr>
+                                                <th>Component</th>
+                                                <th title="Times the component was mounted">Mounts</th>
+                                                <th title="Reactive re-renders after initial mount">Re-renders</th>
+                                                <th title="Average render duration">Avg</th>
+                                                <th title="Sum of all render durations">Total</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr
+                                                v-for="row in renderSummary"
+                                                :key="row.uid"
+                                                :class="{ 'trace-viewer__render-summary-row--active': highlightedUid === row.uid }"
+                                                class="trace-viewer__render-summary-row"
+                                                :title="row.file"
+                                                @click="handleRenderSummaryRowClick(row.uid)"
+                                            >
+                                                <td class="mono">{{ row.componentName }}</td>
+                                                <td class="mono">{{ row.mountCount }}</td>
+                                                <td class="mono" :class="{ 'trace-viewer__render-hot': row.rerenderCount > 3 }">
+                                                    {{ row.rerenderCount }}
+                                                </td>
+                                                <td class="mono">{{ formatDuration(row.avgMs) }}</td>
+                                                <td class="mono">{{ formatDuration(row.totalMs) }}</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </template>
+
+                            <!-- Cross-trace comparison panel -->
+                            <template v-if="crossTraceRenderSummary.length > 0">
+                                <div class="trace-viewer__render-summary-header" @click="crossTraceSummaryOpen = !crossTraceSummaryOpen">
+                                    <span class="trace-viewer__render-summary-toggle">{{ crossTraceSummaryOpen ? '▾' : '▸' }}</span>
+                                    <span class="trace-viewer__render-summary-title">Cross-Trace Render Comparison</span>
+                                    <span class="trace-viewer__render-summary-count muted">
+                                        {{ crossTraceRenderSummary.length }} components · {{ filteredTraces.length }} traces
+                                    </span>
+                                    <span class="trace-viewer__render-summary-count muted">
+                                        {{ crossTraceRegressionsCount }} regressions
+                                    </span>
+                                    <span class="trace-viewer__mobile-hint muted">mobile mode: condensed columns</span>
+                                    <span
+                                        v-if="highlightedComponentKey !== undefined"
+                                        class="trace-viewer__render-summary-clear"
+                                        @click.stop="clearCrossTraceHighlight"
+                                    >
+                                        ✕ clear
+                                    </span>
+                                </div>
+                                <div v-if="crossTraceSummaryOpen" ref="crossTraceScrollRef" class="trace-viewer__render-summary-table-wrap">
+                                    <div class="trace-viewer__comparison-toolbar">
+                                        <button
+                                            :class="{ 'trace-viewer__comparison-chip--active': crossTraceOnlyRegressions }"
+                                            class="trace-viewer__comparison-chip"
+                                            @click="crossTraceOnlyRegressions = !crossTraceOnlyRegressions"
+                                        >
+                                            regressions only
+                                        </button>
+                                        <button
+                                            :class="{ 'trace-viewer__comparison-chip--active': crossTraceOnlyComparable }"
+                                            class="trace-viewer__comparison-chip"
+                                            @click="crossTraceOnlyComparable = !crossTraceOnlyComparable"
+                                        >
+                                            selected trace only
+                                        </button>
+                                        <span class="trace-viewer__comparison-spacer"></span>
+                                        <input
+                                            v-model="crossTraceSearch"
+                                            class="trace-viewer__comparison-search mono"
+                                            type="search"
+                                            placeholder="filter component..."
+                                        />
+                                    </div>
+                                    <table class="data-table trace-viewer__render-summary-table">
+                                        <thead>
+                                            <tr>
+                                                <th class="trace-viewer__sortable" @click="cycleCrossTraceSort('componentName')">
+                                                    Component{{ sortIndicator('componentName') }}
+                                                </th>
+                                                <th class="trace-viewer__col-desktop" title="How many traces include this component">
+                                                    Traces
+                                                </th>
+                                                <th
+                                                    class="trace-viewer__sortable"
+                                                    title="Average re-renders per trace"
+                                                    @click="cycleCrossTraceSort('avgRerendersPerTrace')"
+                                                >
+                                                    Avg Re-renders{{ sortIndicator('avgRerendersPerTrace') }}
+                                                </th>
+                                                <th class="trace-viewer__col-desktop" title="Re-renders in selected trace">Selected</th>
+                                                <th
+                                                    class="trace-viewer__sortable"
+                                                    title="Selected trace vs other traces baseline"
+                                                    @click="cycleCrossTraceSort('deltaVsBaseline')"
+                                                >
+                                                    Delta{{ sortIndicator('deltaVsBaseline') }}
+                                                </th>
+                                                <th class="trace-viewer__col-desktop" title="Average render duration across all renders">
+                                                    Avg ms
+                                                </th>
+                                                <th
+                                                    class="trace-viewer__sortable"
+                                                    title="Sum of all render duration across filtered traces"
+                                                    @click="cycleCrossTraceSort('totalMs')"
+                                                >
+                                                    Total ms{{ sortIndicator('totalMs') }}
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr
+                                                v-if="virtualizedTraceRowsEnabled && crossTraceTopPadding > 0"
+                                                class="trace-viewer__virtual-spacer-row"
+                                                aria-hidden="true"
+                                            >
+                                                <td colspan="7" :style="{ height: `${crossTraceTopPadding}px` }"></td>
+                                            </tr>
+                                            <tr
+                                                v-for="row in visibleCrossTraceRows"
+                                                :key="row.componentKey"
+                                                :class="{
+                                                    'trace-viewer__render-summary-row--active':
+                                                        highlightedComponentKey === row.componentKey,
+                                                }"
+                                                class="trace-viewer__render-summary-row"
+                                                :title="row.file"
+                                                @click="handleCrossTraceRowClick(row.componentKey)"
+                                            >
+                                                <td class="mono">{{ row.componentName }}</td>
+                                                <td class="mono trace-viewer__col-desktop">{{ row.tracesSeen }}</td>
+                                                <td class="mono">{{ (Math.round(row.avgRerendersPerTrace * 10) / 10).toFixed(1) }}</td>
+                                                <td class="mono trace-viewer__col-desktop">{{ row.selectedRerenders ?? 'n/a' }}</td>
+                                                <td class="mono">
+                                                    <span class="trace-viewer__delta" :class="deltaToneClass(row.deltaVsBaseline)">
+                                                        {{ formatDelta(row.deltaVsBaseline) }}
+                                                    </span>
+                                                </td>
+                                                <td class="mono trace-viewer__col-desktop">{{ formatDuration(row.avgMsPerRender) }}</td>
+                                                <td class="mono">{{ formatDuration(row.totalMs) }}</td>
+                                            </tr>
+                                            <tr
+                                                v-if="virtualizedTraceRowsEnabled && crossTraceBottomPadding > 0"
+                                                class="trace-viewer__virtual-spacer-row"
+                                                aria-hidden="true"
+                                            >
+                                                <td colspan="7" :style="{ height: `${crossTraceBottomPadding}px` }"></td>
+                                            </tr>
+                                            <tr v-if="!crossTraceRows.length">
+                                                <td colspan="7" class="tracker-empty-cell">No components match the comparison filters.</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </template>
                         </div>
 
                         <!-- Flamegraph -->
@@ -365,6 +916,44 @@ function handleSpanTypesUpdate(value: Set<string>) {
     color: var(--accent);
 }
 
+.trace-viewer__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);
+}
+
+.trace-viewer__action-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.trace-viewer__action-btn:hover:not(:disabled) {
+    background: var(--bg-secondary);
+    color: var(--text);
+}
+
+.trace-viewer__import-mode-btn {
+    padding: 3px 8px;
+    background: var(--accent-bg);
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    cursor: pointer;
+    font-size: 11px;
+    border-radius: 3px;
+    transition: all 0.12s;
+    font-family: var(--mono);
+}
+
+.trace-viewer__import-mode-btn:hover {
+    opacity: 0.8;
+}
+
 .trace-viewer__container {
     display: flex;
     flex: 1;
@@ -413,6 +1002,12 @@ function handleSpanTypesUpdate(value: Set<string>) {
     border-left: 2px solid var(--accent);
 }
 
+.trace-viewer__virtual-spacer-row td {
+    padding: 0;
+    border-bottom: 0;
+    background: transparent;
+}
+
 .trace-viewer__detail {
     flex: 1;
     display: flex;
@@ -572,7 +1167,176 @@ function handleSpanTypesUpdate(value: Set<string>) {
     overflow: auto;
 }
 
-@media (max-width: 1024px) {
+.trace-viewer__span-item--highlighted {
+    background: color-mix(in srgb, var(--purple, #a855f7) 8%, transparent);
+    border-left: 2px solid var(--purple, #a855f7);
+}
+
+.trace-viewer__render-summary-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg3, var(--bg2, var(--bg)));
+    cursor: pointer;
+    user-select: none;
+    flex-shrink: 0;
+}
+
+.trace-viewer__render-summary-header:hover {
+    background: var(--bg2, var(--bg));
+}
+
+.trace-viewer__render-summary-toggle {
+    font-size: 10px;
+    color: var(--text3, var(--text2, var(--text)));
+    width: 12px;
+    flex-shrink: 0;
+}
+
+.trace-viewer__render-summary-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text2, var(--text));
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.trace-viewer__render-summary-count {
+    font-size: 11px;
+    font-family: var(--mono);
+    color: var(--text3, var(--text2, var(--text)));
+}
+
+.trace-viewer__render-summary-clear {
+    margin-left: auto;
+    font-size: 11px;
+    color: var(--accent);
+    cursor: pointer;
+}
+
+.trace-viewer__render-summary-clear:hover {
+    text-decoration: underline;
+}
+
+.trace-viewer__mobile-hint {
+    display: none;
+    margin-left: auto;
+    font-size: 11px;
+}
+
+.trace-viewer__render-summary-table-wrap {
+    flex-shrink: 0;
+    max-height: 200px;
+    overflow: auto;
+    border-bottom: 1px solid var(--border);
+}
+
+.trace-viewer__comparison-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg2, var(--bg));
+}
+
+.trace-viewer__comparison-chip {
+    padding: 2px 8px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: transparent;
+    color: var(--text2, var(--text));
+    font-size: 11px;
+    font-family: var(--mono);
+    cursor: pointer;
+}
+
+.trace-viewer__comparison-chip--active {
+    border-color: color-mix(in srgb, var(--purple, #a855f7) 55%, var(--border));
+    background: color-mix(in srgb, var(--purple, #a855f7) 15%, transparent);
+    color: var(--purple, #a855f7);
+}
+
+.trace-viewer__comparison-spacer {
+    flex: 1;
+}
+
+.trace-viewer__comparison-search {
+    min-width: 180px;
+    max-width: 240px;
+}
+
+.trace-viewer__render-summary-table {
+    width: 100%;
+}
+
+.trace-viewer__sortable {
+    cursor: pointer;
+    user-select: none;
+}
+
+.trace-viewer__sortable:hover {
+    color: var(--text);
+}
+
+.trace-viewer__render-summary-row {
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+.trace-viewer__render-summary-row:hover {
+    background: var(--bg2, var(--bg));
+}
+
+.trace-viewer__render-summary-row--active {
+    background: color-mix(in srgb, var(--purple, #a855f7) 8%, transparent);
+    border-left: 2px solid var(--purple, #a855f7);
+}
+
+.trace-viewer__render-hot {
+    color: var(--orange, #f97316);
+    font-weight: 600;
+}
+
+.trace-viewer__delta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 46px;
+    padding: 2px 6px;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    font-weight: 600;
+}
+
+.trace-viewer__delta--regression {
+    color: var(--orange, #f97316);
+    border-color: color-mix(in srgb, var(--orange, #f97316) 40%, var(--border));
+    background: color-mix(in srgb, var(--orange, #f97316) 14%, transparent);
+}
+
+.trace-viewer__delta--improvement {
+    color: var(--green, #22c55e);
+    border-color: color-mix(in srgb, var(--green, #22c55e) 45%, var(--border));
+    background: color-mix(in srgb, var(--green, #22c55e) 14%, transparent);
+}
+
+.trace-viewer__delta--neutral {
+    color: var(--text2, var(--text));
+    border-color: var(--border);
+    background: var(--bg2, var(--bg));
+}
+
+.trace-viewer__delta--na {
+    color: var(--text3, var(--text2, var(--text)));
+    border-color: var(--border);
+    background: transparent;
+}
+
+@media (width <= 1024px) {
     .trace-viewer__container {
         flex-direction: column;
         gap: 0;
@@ -595,5 +1359,24 @@ function handleSpanTypesUpdate(value: Set<string>) {
         border-left: none;
         border-top: 1px solid var(--border);
     }
+
+    .trace-viewer__comparison-toolbar {
+        flex-wrap: wrap;
+    }
+
+    .trace-viewer__comparison-search {
+        min-width: 100%;
+        max-width: 100%;
+    }
+}
+
+@media (width <= 768px) {
+    .trace-viewer__col-desktop {
+        display: none;
+    }
+
+    .trace-viewer__mobile-hint {
+        display: inline-flex;
+    }
 }
 </style>