@emeryld/rrroutes-export 1.0.13 → 1.0.14

package/tools/finalized-leaves-viewer.html

@@ -529,6 +529,23 @@
           </div>
         </details>
 
+        <div class="scope-row">
+          <div class="scope-group">
+            <div class="scope-group-title">Views</div>
+            <div class="scope-group-chips">
+              <button id="tabLeaves" class="field-chip" type="button" aria-pressed="true">
+                Leaves
+              </button>
+              <button id="tabChangelogRoute" class="field-chip" type="button" aria-pressed="false">
+                Changelog / By Route
+              </button>
+              <button id="tabChangelogSource" class="field-chip" type="button" aria-pressed="false">
+                Changelog / By Source
+              </button>
+            </div>
+          </div>
+        </div>
+
         <div class="active-filters-row">
           <div class="active-filters-title">Active filters</div>
           <div id="activeFilterChips" class="chips filters"></div>
@@ -612,6 +629,68 @@
         },
       ]
 
+      const CHANGELOG_ROUTE_FIELDS = [
+        {
+          id: 'routeKey',
+          label: 'route',
+          get: (item) => [item.routeKey],
+        },
+        {
+          id: 'eventType',
+          label: 'event type',
+          get: (item) => item.events.map((event) => event.type),
+        },
+        {
+          id: 'schemaDiff',
+          label: 'schema diff',
+          get: (item) =>
+            item.events.flatMap((event) =>
+              Array.isArray(event.schemaDiff)
+                ? event.schemaDiff.map((delta) => JSON.stringify(delta))
+                : [],
+            ),
+        },
+        {
+          id: 'cfgDiff',
+          label: 'cfg diff',
+          get: (item) =>
+            item.events.flatMap((event) =>
+              Array.isArray(event.cfgDiff)
+                ? event.cfgDiff.map((delta) => JSON.stringify(delta))
+                : [],
+            ),
+        },
+      ]
+
+      const CHANGELOG_SOURCE_FIELDS = [
+        {
+          id: 'sourceObject',
+          label: 'source object',
+          get: (item) => [item.sourceId, item.displayName],
+        },
+        {
+          id: 'eventType',
+          label: 'event type',
+          get: (item) => item.events.map((event) => event.type),
+        },
+        {
+          id: 'impactedRoutes',
+          label: 'impacted routes',
+          get: (item) =>
+            item.events.flatMap((event) => (Array.isArray(event.impactedRoutes) ? event.impactedRoutes : [])),
+        },
+        {
+          id: 'schemaDiff',
+          label: 'schema diff',
+          get: (item) =>
+            item.events.flatMap((event) =>
+              Array.isArray(event.schemaDiff)
+                ? event.schemaDiff.map((delta) => JSON.stringify(delta))
+                : [],
+            ),
+        },
+      ]
+
       const SCHEMA_SECTIONS = ['params', 'query', 'body', 'output']
       const SCHEMA_FIELD_IDS = new Set(SCHEMA_SECTIONS)
       const SOURCE_FIELD_IDS = new Set(['sourceDefinition', 'sourceSchemas'])
@@ -645,11 +724,39 @@
         },
       ]
 
+      const VIEW_IDS = {
+        leaves: 'leaves',
+        changelogRoute: 'changelogRoute',
+        changelogSource: 'changelogSource',
+      }
+
+      const TAB_CONFIG = {
+        [VIEW_IDS.leaves]: {
+          fieldDefs: SEARCH_FIELDS,
+          defaultSelected: new Set(SEARCH_FIELDS.map((field) => field.id)),
+        },
+        [VIEW_IDS.changelogRoute]: {
+          fieldDefs: CHANGELOG_ROUTE_FIELDS,
+          defaultSelected: new Set(CHANGELOG_ROUTE_FIELDS.map((field) => field.id)),
+        },
+        [VIEW_IDS.changelogSource]: {
+          fieldDefs: CHANGELOG_SOURCE_FIELDS,
+          defaultSelected: new Set(CHANGELOG_SOURCE_FIELDS.map((field) => field.id)),
+        },
+      }
+
       const state = {
         payload: null,
+        leavesPayload: null,
+        changelogPayload: null,
         leaves: [],
-        mode: 'snapshot',
-        selectedFieldIds: new Set(SEARCH_FIELDS.map((field) => field.id)),
+        activeTab: VIEW_IDS.leaves,
+        availableTabs: new Set([VIEW_IDS.leaves]),
+        selectedFieldIdsByTab: {
+          [VIEW_IDS.leaves]: new Set(TAB_CONFIG[VIEW_IDS.leaves].defaultSelected),
+          [VIEW_IDS.changelogRoute]: new Set(TAB_CONFIG[VIEW_IDS.changelogRoute].defaultSelected),
+          [VIEW_IDS.changelogSource]: new Set(TAB_CONFIG[VIEW_IDS.changelogSource].defaultSelected),
+        },
       }
 
       const fileInput = document.getElementById('fileInput')
@@ -669,6 +776,9 @@
       const statusEl = document.getElementById('status')
       const resultsEl = document.getElementById('results')
       const controlsEl = document.querySelector('.controls')
+      const tabLeavesBtn = document.getElementById('tabLeaves')
+      const tabChangelogRouteBtn = document.getElementById('tabChangelogRoute')
+      const tabChangelogSourceBtn = document.getElementById('tabChangelogSource')
 
       const URL_PARAM_KEY = 'filters'
       let isHydratingFromUrl = false
@@ -1316,188 +1426,153 @@
         )
       }
 
-      function renderChangelogPayload(payload) {
-        state.mode = 'changelog'
-        state.payload = payload
-        state.leaves = []
-
-        if (controlsEl) {
-          controlsEl.style.display = 'none'
-        }
-
-        const commitBySha = new Map(
-          (payload.commits || []).map((commit) => [commit.sha, commit]),
-        )
-        const routeEntries = Object.entries(payload.byRoute || {}).sort(
-          ([a], [b]) => a.localeCompare(b),
-        )
-        const sourceEntries = Object.entries(payload.bySourceObject || {}).sort(
-          ([a], [b]) => a.localeCompare(b),
+      function isBundlePayload(value) {
+        return (
+          value &&
+          value.kind === 'finalized-leaves-bundle' &&
+          value.leavesPayload &&
+          value.changelogPayload
         )
+      }
 
-        statusEl.textContent = `Loaded changelog payload with ${payload.commits.length} commits.`
-        resultsEl.innerHTML = ''
+      function currentFieldDefs() {
+        return TAB_CONFIG[state.activeTab]?.fieldDefs || []
+      }
 
-        const tabs = el('div', 'chips')
-        const byRouteBtn = el('button', 'chip chip-btn', 'By Route')
-        const bySourceBtn = el('button', 'chip chip-btn', 'By Source Object')
-        byRouteBtn.type = 'button'
-        bySourceBtn.type = 'button'
-        tabs.appendChild(byRouteBtn)
-        tabs.appendChild(bySourceBtn)
-        resultsEl.appendChild(tabs)
-
-        const view = el('div')
-        resultsEl.appendChild(view)
-
-        const formatCommitDateTime = (value) => {
-          if (!value) return null
-          const parsed = new Date(value)
-          if (Number.isNaN(parsed.getTime())) return String(value)
-          return parsed.toLocaleString()
-        }
+      function formatCommitDateTime(value) {
+        if (!value) return null
+        const parsed = new Date(value)
+        if (Number.isNaN(parsed.getTime())) return String(value)
+        return parsed.toLocaleString()
+      }
 
-        const formatRouteSchemaEntry = (entry) => {
-          if (!entry || typeof entry !== 'object') return 'n/a'
-          const parts = [
-            `type=${entry.type}`,
-            `nullable=${Boolean(entry.nullable)}`,
-            `optional=${Boolean(entry.optional)}`,
-          ]
-          if ('literal' in entry) {
-            parts.push(`literal=${JSON.stringify(entry.literal)}`)
-          }
-          return parts.join(', ')
+      function formatRouteSchemaEntry(entry) {
+        if (!entry || typeof entry !== 'object') return 'n/a'
+        const parts = [
+          `type=${entry.type}`,
+          `nullable=${Boolean(entry.nullable)}`,
+          `optional=${Boolean(entry.optional)}`,
+        ]
+        if ('literal' in entry) {
+          parts.push(`literal=${JSON.stringify(entry.literal)}`)
         }
+        return parts.join(', ')
+      }
 
-        const formatSchemaDiffLine = (delta) => {
-          if (!delta || typeof delta !== 'object') return null
-
-          // Source-object schema diff shape: { section, path, op, before?, after? }
-          if ('section' in delta) {
-            const location = `${delta.section}.${delta.path}`
-            if (delta.op === 'added') {
-              return `added ${location}: ${JSON.stringify(delta.after || [])}`
-            }
-            if (delta.op === 'removed') {
-              return `removed ${location}: ${JSON.stringify(delta.before || [])}`
-            }
-            return `changed ${location}: ${JSON.stringify(delta.before || [])} -> ${JSON.stringify(
-              delta.after || [],
-            )}`
-          }
-
-          // Route schema diff shape: { path, op, before?, after? }
-          if ('path' in delta) {
-            if (delta.op === 'added') {
-              return `added ${delta.path}: ${formatRouteSchemaEntry(delta.after)}`
-            }
-            if (delta.op === 'removed') {
-              return `removed ${delta.path}: ${formatRouteSchemaEntry(delta.before)}`
-            }
-            return `changed ${delta.path}: ${formatRouteSchemaEntry(
-              delta.before,
-            )} -> ${formatRouteSchemaEntry(delta.after)}`
-          }
-
-          return null
+      function formatSchemaDiffLine(delta) {
+        if (!delta || typeof delta !== 'object') return null
+        if ('section' in delta) {
+          const location = `${delta.section}.${delta.path}`
+          if (delta.op === 'added') return `added ${location}: ${JSON.stringify(delta.after || [])}`
+          if (delta.op === 'removed') return `removed ${location}: ${JSON.stringify(delta.before || [])}`
+          return `changed ${location}: ${JSON.stringify(delta.before || [])} -> ${JSON.stringify(delta.after || [])}`
         }
-
-        const formatCfgDiffLine = (diff) => {
-          if (!diff || typeof diff !== 'object') return null
-          return `${diff.field}: ${JSON.stringify(diff.before)} -> ${JSON.stringify(diff.after)}`
+        if ('path' in delta) {
+          if (delta.op === 'added') return `added ${delta.path}: ${formatRouteSchemaEntry(delta.after)}`
+          if (delta.op === 'removed') return `removed ${delta.path}: ${formatRouteSchemaEntry(delta.before)}`
+          return `changed ${delta.path}: ${formatRouteSchemaEntry(delta.before)} -> ${formatRouteSchemaEntry(delta.after)}`
         }
-
-        const renderEventDetails = (event) => {
-          const card = el('div', 'leaf-content')
-          const commit = commitBySha.get(event.commitSha)
-          const commitDateTime = formatCommitDateTime(commit?.authorDate)
-          const commitMeta = [
-            event.commitSha.slice(0, 12),
-            commitDateTime,
-            commit?.authorName || null,
-            commit?.subject || null,
-          ]
-            .filter(Boolean)
-            .join(' - ')
-          card.appendChild(
-            el(
-              'div',
-              'meta',
-              commitMeta,
-            ),
-          )
-          card.appendChild(el('div', 'mono', event.type))
-          if (Array.isArray(event.schemaDiff) && event.schemaDiff.length > 0) {
-            card.appendChild(el('div', 'meta', `schema changes: ${event.schemaDiff.length}`))
-            const schemaChanges = el('div')
-            event.schemaDiff.forEach((delta) => {
-              const line = formatSchemaDiffLine(delta)
-              if (!line) return
-              schemaChanges.appendChild(el('div', 'meta', line))
-            })
-            card.appendChild(schemaChanges)
-          }
-          if (Array.isArray(event.cfgDiff) && event.cfgDiff.length > 0) {
-            card.appendChild(el('div', 'meta', `cfg changes: ${event.cfgDiff.length}`))
-            const cfgChanges = el('div')
-            event.cfgDiff.forEach((diff) => {
-              const line = formatCfgDiffLine(diff)
-              if (!line) return
-              cfgChanges.appendChild(el('div', 'meta', line))
-            })
-            card.appendChild(cfgChanges)
-          }
-          if (Array.isArray(event.impactedRoutes) && event.impactedRoutes.length > 0) {
-            card.appendChild(
-              el('div', 'meta', `impacted routes: ${event.impactedRoutes.length}`),
-            )
-          }
-          return card
+        return null
+      }
+
+      function formatCfgDiffLine(diff) {
+        if (!diff || typeof diff !== 'object') return null
+        return `${diff.field}: ${JSON.stringify(diff.before)} -> ${JSON.stringify(diff.after)}`
+      }
+
+      function renderEventCard(event, commitBySha) {
+        const card = el('div', 'leaf-content')
+        const commit = commitBySha.get(event.commitSha)
+        const commitDateTime = formatCommitDateTime(commit?.authorDate)
+        const commitMeta = [
+          event.commitSha.slice(0, 12),
+          commitDateTime,
+          commit?.authorName || null,
+          commit?.subject || null,
+        ]
+          .filter(Boolean)
+          .join(' - ')
+        card.appendChild(el('div', 'meta', commitMeta))
+        card.appendChild(el('div', 'mono', event.type))
+        if (Array.isArray(event.schemaDiff) && event.schemaDiff.length > 0) {
+          card.appendChild(el('div', 'meta', `schema changes: ${event.schemaDiff.length}`))
+          const schemaChanges = el('div')
+          event.schemaDiff.forEach((delta) => {
+            const line = formatSchemaDiffLine(delta)
+            if (!line) return
+            schemaChanges.appendChild(el('div', 'meta', line))
+          })
+          card.appendChild(schemaChanges)
         }
-
-        const renderByRoute = () => {
-          view.innerHTML = ''
-          if (routeEntries.length === 0) {
-            view.appendChild(el('div', 'empty', 'No route changes found in this range.'))
-            return
-          }
-
-          routeEntries.forEach(([routeKey, events]) => {
-            const details = el('details', 'leaf')
-            details.appendChild(el('summary', '', `${routeKey} (${events.length})`))
-            events.forEach((event) => details.appendChild(renderEventDetails(event)))
-            view.appendChild(details)
+        if (Array.isArray(event.cfgDiff) && event.cfgDiff.length > 0) {
+          card.appendChild(el('div', 'meta', `cfg changes: ${event.cfgDiff.length}`))
+          const cfgChanges = el('div')
+          event.cfgDiff.forEach((diff) => {
+            const line = formatCfgDiffLine(diff)
+            if (!line) return
+            cfgChanges.appendChild(el('div', 'meta', line))
           })
+          card.appendChild(cfgChanges)
         }
+        if (Array.isArray(event.impactedRoutes) && event.impactedRoutes.length > 0) {
+          card.appendChild(el('div', 'meta', `impacted routes: ${event.impactedRoutes.length}`))
+        }
+        return card
+      }
 
-        const renderBySource = () => {
-          view.innerHTML = ''
-          if (sourceEntries.length === 0) {
-            view.appendChild(
-              el('div', 'empty', 'No source-object changes found in this range.'),
-            )
-            return
-          }
-
-          sourceEntries.forEach(([sourceId, events]) => {
-            const details = el('details', 'leaf')
-            const display = events[0]?.displayName || sourceId
-            details.appendChild(el('summary', '', `${display} (${events.length})`))
-            events.forEach((event) => details.appendChild(renderEventDetails(event)))
-            view.appendChild(details)
-          })
+      function changelogItemsByTab(tabId) {
+        const payload = state.changelogPayload
+        if (!payload) return []
+        if (tabId === VIEW_IDS.changelogRoute) {
+          return Object.entries(payload.byRoute || {})
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([routeKey, events]) => ({ routeKey, events }))
         }
+        if (tabId === VIEW_IDS.changelogSource) {
+          return Object.entries(payload.bySourceObject || {})
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([sourceId, events]) => ({
+              sourceId,
+              events,
+              displayName: events[0]?.displayName || sourceId,
+            }))
+        }
+        return []
+      }
 
-        byRouteBtn.addEventListener('click', renderByRoute)
-        bySourceBtn.addEventListener('click', renderBySource)
-        renderByRoute()
+      function matchesGenericItem(item, fieldDefs, engine, selectedIds) {
+        if (!engine.active) return true
+        return fieldDefs.some((field) => {
+          if (selectedIds.length > 0 && !selectedIds.includes(field.id)) return false
+          const tokens = toTokens(field.get(item))
+          return tokens.some((token) => engine.test(token))
+        })
       }
 
-      function renderResults() {
-        if (state.mode === 'changelog') {
+      function renderCollection(items, renderItem, emptyMessage) {
+        if (items.length === 0) {
+          resultsEl.appendChild(el('div', 'empty', emptyMessage))
           return
         }
+        items.forEach((item) => {
+          resultsEl.appendChild(renderItem(item))
+        })
+      }
+
+      function renderTabButtons() {
+        setPressed(tabLeavesBtn, state.activeTab === VIEW_IDS.leaves)
+        setPressed(tabChangelogRouteBtn, state.activeTab === VIEW_IDS.changelogRoute)
+        setPressed(tabChangelogSourceBtn, state.activeTab === VIEW_IDS.changelogSource)
+        tabLeavesBtn.style.display = state.availableTabs.has(VIEW_IDS.leaves) ? '' : 'none'
+        tabChangelogRouteBtn.style.display = state.availableTabs.has(VIEW_IDS.changelogRoute) ? '' : 'none'
+        tabChangelogSourceBtn.style.display = state.availableTabs.has(VIEW_IDS.changelogSource) ? '' : 'none'
+        const isLeavesTab = state.activeTab === VIEW_IDS.leaves
+        coreFieldsBtn.style.display = isLeavesTab ? '' : 'none'
+        schemasOnlyFieldsBtn.style.display = isLeavesTab ? '' : 'none'
+        sourceOnlyFieldsBtn.style.display = isLeavesTab ? '' : 'none'
+      }
+
+      function renderResults() {
         const engine = createSearchEngine(searchInput.value.trim(), {
           caseSensitive: isPressed(caseSensitiveToggle),
           regex: isPressed(regexSearchToggle),
@@ -1515,51 +1590,84 @@
         }
 
         const selectedIds = selectedFieldIds()
-        const filtered = state.leaves.filter((leaf) => matchesLeaf(leaf, engine, selectedIds))
-
-        statusEl.textContent = `${filtered.length} / ${state.leaves.length} routes matched.`
         resultsEl.innerHTML = ''
+        renderTabButtons()
         renderActiveFilterChips({ selectedIds, hasRegexError: false })
-
-        if (filtered.length === 0) {
-          resultsEl.appendChild(el('div', 'empty', 'No matches.'))
-          syncFilterStateToUrl()
-          return
+        if (state.activeTab === VIEW_IDS.leaves) {
+          const filtered = state.leaves.filter((leaf) => matchesLeaf(leaf, engine, selectedIds))
+          statusEl.textContent = `${filtered.length} / ${state.leaves.length} routes matched.`
+          renderCollection(filtered, (leaf) => renderLeaf(leaf, engine, selectedIds), 'No matches.')
+        } else {
+          const fieldDefs = currentFieldDefs()
+          const items = changelogItemsByTab(state.activeTab)
+          const filtered = items.filter((item) => matchesGenericItem(item, fieldDefs, engine, selectedIds))
+          statusEl.textContent =
+            state.activeTab === VIEW_IDS.changelogRoute
+              ? `${filtered.length} / ${items.length} route changelog groups matched.`
+              : `${filtered.length} / ${items.length} source changelog groups matched.`
+          const commitBySha = new Map(
+            (state.changelogPayload?.commits || []).map((commit) => [commit.sha, commit]),
+          )
+          renderCollection(
+            filtered,
+            (item) => {
+              const details = el('details', 'leaf')
+              const title =
+                state.activeTab === VIEW_IDS.changelogRoute
+                  ? `${item.routeKey} (${item.events.length})`
+                  : `${item.displayName} (${item.events.length})`
+              details.appendChild(el('summary', '', title))
+              item.events.forEach((event) => details.appendChild(renderEventCard(event, commitBySha)))
+              return details
+            },
+            'No matches.',
+          )
         }
-
-        filtered.forEach((leaf) => {
-          resultsEl.appendChild(renderLeaf(leaf, engine, selectedIds))
-        })
         syncFilterStateToUrl()
       }
 
       function selectedFieldIds() {
-        return SEARCH_FIELDS.filter((field) => state.selectedFieldIds.has(field.id)).map(
+        const selected = state.selectedFieldIdsByTab[state.activeTab] || new Set()
+        return currentFieldDefs().filter((field) => selected.has(field.id)).map(
           (field) => field.id,
         )
       }
 
       function renderFieldChips() {
+        const fieldDefs = currentFieldDefs()
+        const selected = state.selectedFieldIdsByTab[state.activeTab] || new Set()
         fieldChipGroups.innerHTML = ''
-        FIELD_GROUPS.forEach((group) => {
+        const groups =
+          state.activeTab === VIEW_IDS.leaves
+            ? FIELD_GROUPS
+            : [
+                {
+                  id: 'tabFields',
+                  label: state.activeTab === VIEW_IDS.changelogRoute ? 'Route fields' : 'Source fields',
+                  fieldIds: fieldDefs.map((field) => field.id),
+                },
+              ]
+
+        groups.forEach((group) => {
           const groupWrap = el('div', 'scope-group')
           groupWrap.appendChild(el('div', 'scope-group-title', group.label))
           const chipsWrap = el('div', 'scope-group-chips')
 
           group.fieldIds.forEach((fieldId) => {
-            const field = SEARCH_FIELDS.find((item) => item.id === fieldId)
+            const field = fieldDefs.find((item) => item.id === fieldId)
             if (!field) return
             const chip = document.createElement('button')
             chip.type = 'button'
             chip.className = 'field-chip'
             chip.textContent = field.label
-            setPressed(chip, state.selectedFieldIds.has(field.id))
+            setPressed(chip, selected.has(field.id))
             chip.addEventListener('click', () => {
-              if (state.selectedFieldIds.has(field.id)) {
-                state.selectedFieldIds.delete(field.id)
+              if (selected.has(field.id)) {
+                selected.delete(field.id)
               } else {
-                state.selectedFieldIds.add(field.id)
+                selected.add(field.id)
               }
+              state.selectedFieldIdsByTab[state.activeTab] = selected
               renderFieldChips()
               renderResults()
             })
@@ -1573,8 +1681,8 @@
 
       function setFieldSelection(allowedIds, options = {}) {
         const { rerender = true } = options
-        state.selectedFieldIds = new Set(
-          SEARCH_FIELDS.map((field) => field.id).filter((id) => allowedIds.has(id)),
+        state.selectedFieldIdsByTab[state.activeTab] = new Set(
+          currentFieldDefs().map((field) => field.id).filter((id) => allowedIds.has(id)),
         )
         renderFieldChips()
         if (rerender) renderResults()
@@ -1586,7 +1694,7 @@
         setPressed(regexSearchToggle, false)
         typeMatchModeInput.value = 'contains'
         setPressed(schemaRowsMatchOnlyToggle, false)
-        setFieldSelection(new Set(SEARCH_FIELDS.map((field) => field.id)), { rerender: false })
+        setFieldSelection(new Set(currentFieldDefs().map((field) => field.id)), { rerender: false })
         renderResults()
       }
 
@@ -1642,7 +1750,7 @@
         }
         if (hasRegexError) chipModels.push({ text: 'regex error' })
 
-        const allIds = SEARCH_FIELDS.map((field) => field.id)
+        const allIds = currentFieldDefs().map((field) => field.id)
         if (selectedIds.length !== allIds.length) {
           chipModels.push({
             text: `fields: ${selectedIds.join(', ') || 'none'}`,
@@ -1669,12 +1777,15 @@
 
       function collectFilterState() {
         return {
+          activeTab: state.activeTab,
           search: searchInput.value,
           caseSensitive: isPressed(caseSensitiveToggle),
           regex: isPressed(regexSearchToggle),
           typeMatchMode: typeMatchModeInput.value === 'exact' ? 'exact' : 'contains',
           schemaRowsMatchOnly: isPressed(schemaRowsMatchOnlyToggle),
-          selectedFields: selectedFieldIds(),
+          selectedFieldsByTab: Object.fromEntries(
+            Object.entries(state.selectedFieldIdsByTab).map(([key, value]) => [key, Array.from(value)]),
+          ),
         }
       }
 
@@ -1699,6 +1810,13 @@
         try {
           const parsed = JSON.parse(decodeURIComponent(raw))
           isHydratingFromUrl = true
+          if (
+            parsed.activeTab === VIEW_IDS.leaves ||
+            parsed.activeTab === VIEW_IDS.changelogRoute ||
+            parsed.activeTab === VIEW_IDS.changelogSource
+          ) {
+            state.activeTab = parsed.activeTab
+          }
           if (typeof parsed.search === 'string') searchInput.value = parsed.search
           setPressed(caseSensitiveToggle, Boolean(parsed.caseSensitive))
           setPressed(regexSearchToggle, Boolean(parsed.regex))
@@ -1707,8 +1825,12 @@
           }
           setPressed(schemaRowsMatchOnlyToggle, Boolean(parsed.schemaRowsMatchOnly))
 
-          if (Array.isArray(parsed.selectedFields)) {
-            setFieldSelection(new Set(parsed.selectedFields), { rerender: false })
+          if (parsed.selectedFieldsByTab && typeof parsed.selectedFieldsByTab === 'object') {
+            Object.entries(parsed.selectedFieldsByTab).forEach(([tabId, ids]) => {
+              if (!Array.isArray(ids)) return
+              if (!state.selectedFieldIdsByTab[tabId]) return
+              state.selectedFieldIdsByTab[tabId] = new Set(ids)
+            })
           }
         } catch (error) {
           // Ignore malformed hash state.
@@ -1720,40 +1842,84 @@
       async function handleFile(file) {
         const text = await file.text()
         const parsed = JSON.parse(text)
-        if (isChangelogPayload(parsed)) {
-          renderChangelogPayload(parsed)
-          return
-        }
-        if (!parsed || !Array.isArray(parsed.leaves)) {
+        if (
+          !isBundlePayload(parsed) &&
+          !isChangelogPayload(parsed) &&
+          (!parsed || !Array.isArray(parsed.leaves))
+        ) {
           throw new Error(
-            'Invalid export file: expected top-level "leaves" array or changelog payload.',
+            'Invalid export file: expected leaves payload, changelog payload, or unified bundle.',
           )
         }
+        applyLoadedPayload(parsed)
+        renderResults()
+      }
 
-        state.mode = 'snapshot'
-        if (controlsEl) {
-          controlsEl.style.display = ''
-        }
-        state.payload = parsed
-        state.leaves = parsed.leaves
+      function setActiveTab(nextTab) {
+        if (!state.availableTabs.has(nextTab)) return
+        state.activeTab = nextTab
+        renderFieldChips()
         renderResults()
       }
 
+      function applyLoadedPayload(payload) {
+        state.payload = payload
+        state.availableTabs = new Set()
+        state.leavesPayload = null
+        state.changelogPayload = null
+        state.leaves = []
+
+        if (isBundlePayload(payload)) {
+          state.leavesPayload = payload.leavesPayload
+          state.changelogPayload = payload.changelogPayload
+        } else if (isChangelogPayload(payload)) {
+          state.changelogPayload = payload
+        } else if (payload && Array.isArray(payload.leaves)) {
+          state.leavesPayload = payload
+        }
+
+        if (state.leavesPayload) {
+          state.availableTabs.add(VIEW_IDS.leaves)
+          state.leaves = state.leavesPayload.leaves || []
+        }
+        if (state.changelogPayload) {
+          state.availableTabs.add(VIEW_IDS.changelogRoute)
+          state.availableTabs.add(VIEW_IDS.changelogSource)
+        }
+
+        if (!state.availableTabs.has(state.activeTab)) {
+          state.activeTab = state.availableTabs.has(VIEW_IDS.leaves)
+            ? VIEW_IDS.leaves
+            : state.availableTabs.has(VIEW_IDS.changelogRoute)
+              ? VIEW_IDS.changelogRoute
+              : VIEW_IDS.changelogSource
+        }
+
+        if (state.leavesPayload && state.changelogPayload) {
+          statusEl.textContent =
+            `Loaded unified bundle with ${state.leaves.length} routes and ${
+              state.changelogPayload.commits?.length || 0
+            } commits.`
+        } else if (state.leavesPayload) {
+          statusEl.textContent = `Loaded payload with ${state.leaves.length} routes.`
+        } else if (state.changelogPayload) {
+          statusEl.textContent =
+            `Loaded changelog payload with ${state.changelogPayload.commits?.length || 0} commits.`
+        } else {
+          statusEl.textContent = 'No payload loaded.'
+        }
+      }
+
       function initializeFromBakedPayload() {
         const baked = window.__FINALIZED_LEAVES_PAYLOAD
-        if (isChangelogPayload(baked)) {
-          renderChangelogPayload(baked)
+        if (
+          !isBundlePayload(baked) &&
+          !isChangelogPayload(baked) &&
+          (!baked || !Array.isArray(baked.leaves))
+        ) {
           return
         }
-        if (!baked || !Array.isArray(baked.leaves)) return
-
-        state.mode = 'snapshot'
-        if (controlsEl) {
-          controlsEl.style.display = ''
-        }
-        state.payload = baked
-        state.leaves = baked.leaves
-        statusEl.textContent = `Loaded baked payload with ${state.leaves.length} routes.`
+        applyLoadedPayload(baked)
         renderResults()
       }
 
@@ -1784,8 +1950,12 @@
         renderResults()
       })
 
+      tabLeavesBtn.addEventListener('click', () => setActiveTab(VIEW_IDS.leaves))
+      tabChangelogRouteBtn.addEventListener('click', () => setActiveTab(VIEW_IDS.changelogRoute))
+      tabChangelogSourceBtn.addEventListener('click', () => setActiveTab(VIEW_IDS.changelogSource))
+
       selectAllFieldsBtn.addEventListener('click', () =>
-        setFieldSelection(new Set(SEARCH_FIELDS.map((field) => field.id))),
+        setFieldSelection(new Set(currentFieldDefs().map((field) => field.id))),
       )
       clearAllFieldsBtn.addEventListener('click', () => setFieldSelection(new Set()))
       coreFieldsBtn.addEventListener('click', () => setFieldSelection(CORE_FIELD_IDS))