nuxt-devtools-observatory 0.1.31 → 0.1.32

package/client/src/views/TraceViewer.vue

@@ -6,14 +6,33 @@ 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 TraceRenderStatsRow,
+} from '@observatory-client/composables/trace-render-aggregation'
+import type { ObservatoryExportFile } from '@observatory-client/composables/useExportImport'
 import type { TraceEntry, TraceSpan } from '@observatory/types/snapshot'
 
 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 {
     searchQuery,
@@ -27,7 +46,8 @@ 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(() => {
@@ -35,11 +55,13 @@ const filteredTraces = computed(() => {
 })
 
 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(() => {
@@ -50,6 +72,59 @@ const selectedTrace = computed(() => {
     return filteredTraces.value.find((t) => t.id === 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)
+
 function elapsedFromSpans(trace: TraceEntry): number | undefined {
     if (!trace.spans.length) {
         return undefined
@@ -129,16 +204,152 @@ function getSpanDisplayName(span: TraceSpan): string {
 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' ? ' ↓' : ' ↑'
+}
+
+function clearCrossTraceHighlight() {
+    highlightedComponentKey.value = undefined
+    highlightedUid.value = undefined
+}
+
+function handleCrossTraceRowClick(componentKey: string) {
+    const row = crossTraceRows.value.find((item) => item.componentKey === 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 +359,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"
@@ -278,7 +501,12 @@ function handleSpanTypesUpdate(value: Set<string>) {
                                 <div
                                     v-for="span in selectedTrace.spans"
                                     :key="span.id"
-                                    :class="{ 'trace-viewer__span-item--selected': selectedSpan?.id === span.id }"
+                                    :class="{
+                                        'trace-viewer__span-item--selected': selectedSpan?.id === span.id,
+                                        'trace-viewer__span-item--highlighted':
+                                            highlightedUid !== undefined &&
+                                            (span.metadata as Record<string, unknown> | undefined)?.uid === highlightedUid,
+                                    }"
                                     class="trace-viewer__span-item"
                                     @click="selectedSpan = span"
                                 >
@@ -289,6 +517,165 @@ function handleSpanTypesUpdate(value: Set<string>) {
                                     </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" 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-for="row in crossTraceRows"
+                                                :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="!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 +752,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:hover:not(:disabled) {
+    background: var(--bg-secondary);
+    color: var(--text);
+}
+
+.trace-viewer__action-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.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;
@@ -572,7 +997,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 +1189,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>