npm - @emeryld/rrroutes-export - Versions diffs - 1.0.13 → 1.0.15 - Mend

@emeryld/rrroutes-export 1.0.13 → 1.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +16 -0
package/dist/defaultViewerTemplate.d.ts +1 -1
package/dist/exportFinalizedLeaves.bundle.d.ts +21 -0
package/dist/index.cjs +135 -18
package/dist/index.cjs.map +1 -1
package/dist/index.d.ts +1 -0
package/dist/index.mjs +132 -17
package/dist/index.mjs.map +1 -1
package/package.json +1 -1
package/tools/finalized-leaves-viewer.html +473 -217

package/tools/finalized-leaves-viewer.html CHANGED Viewed

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Finalized Leaves Viewer</title>
+    <title>RRRoutes Export Viewer</title>
     <style>
       :root {
         --bg: #212121;
@@ -472,7 +472,7 @@
   </head>
   <body>
     <div class="wrap">
-      <h1>Finalized Leaves Viewer</h1>
+      <h1>RRRoutes Export Viewer</h1>
       <div class="card controls">
         <div class="primary-row">
           <label class="control-block">
@@ -529,12 +529,29 @@
           </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="tabChangelog" class="field-chip" type="button" aria-pressed="false">
+                Changelog
+              </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>
         </div>
-        <div id="status" class="meta">Load a JSON export to begin.</div>
+        <div id="status" class="meta">Load a leaves export, changelog export, or unified bundle JSON to begin.</div>
       </div>
       <div id="results"></div>
@@ -612,6 +629,84 @@
         },
       ]
+      const CHANGELOG_TIMELINE_FIELDS = [
+        {
+          id: 'eventKind',
+          label: 'kind',
+          get: (item) => [item.eventKind],
+        },
+        {
+          id: 'eventType',
+          label: 'event',
+          get: (item) => [item.event.type],
+        },
+        {
+          id: 'routeKey',
+          label: 'route',
+          get: (item) => [item.routeKey],
+        },
+        {
+          id: 'sourceObject',
+          label: 'source object',
+          get: (item) => [item.sourceObjectId, item.displayName],
+        },
+        {
+          id: 'commit',
+          label: 'commit',
+          get: (item) => [
+            item.event.commitSha,
+            item.commit?.authorDate,
+            item.commit?.authorName,
+            item.commit?.subject,
+          ],
+        },
+        {
+          id: 'schemaDiff',
+          label: 'schema diff',
+          get: (item) =>
+            Array.isArray(item.event.schemaDiff)
+              ? item.event.schemaDiff.map((delta) => JSON.stringify(delta))
+              : [],
+        },
+        {
+          id: 'cfgDiff',
+          label: 'cfg diff',
+          get: (item) =>
+            Array.isArray(item.event.cfgDiff)
+              ? item.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 +740,39 @@
         },
       ]
+      const VIEW_IDS = {
+        leaves: 'leaves',
+        changelog: 'changelog',
+        changelogSource: 'changelogSource',
+      }
+      const TAB_CONFIG = {
+        [VIEW_IDS.leaves]: {
+          fieldDefs: SEARCH_FIELDS,
+          defaultSelected: new Set(SEARCH_FIELDS.map((field) => field.id)),
+        },
+        [VIEW_IDS.changelog]: {
+          fieldDefs: CHANGELOG_TIMELINE_FIELDS,
+          defaultSelected: new Set(CHANGELOG_TIMELINE_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.changelog]: new Set(TAB_CONFIG[VIEW_IDS.changelog].defaultSelected),
+          [VIEW_IDS.changelogSource]: new Set(TAB_CONFIG[VIEW_IDS.changelogSource].defaultSelected),
+        },
       }
       const fileInput = document.getElementById('fileInput')
@@ -669,6 +792,9 @@
       const statusEl = document.getElementById('status')
       const resultsEl = document.getElementById('results')
       const controlsEl = document.querySelector('.controls')
+      const tabLeavesBtn = document.getElementById('tabLeaves')
+      const tabChangelogBtn = document.getElementById('tabChangelog')
+      const tabChangelogSourceBtn = document.getElementById('tabChangelogSource')
       const URL_PARAM_KEY = 'filters'
       let isHydratingFromUrl = false
@@ -1304,6 +1430,29 @@
           content.appendChild(separatedSchemas)
         }
+        const routeHistory = state.changelogPayload?.byRoute?.[leaf.key]
+        if (Array.isArray(routeHistory) && routeHistory.length > 0) {
+          const commitBySha = new Map(
+            (state.changelogPayload?.commits || []).map((commit) => [commit.sha, commit]),
+          )
+          const routeChangelogSection = el('div', 'section')
+          const routeChangelogDetails = el('details')
+          const routeChangelogSummary = el(
+            'summary',
+            '',
+            `Route Changelog (${routeHistory.length} event${routeHistory.length === 1 ? '' : 's'})`,
+          )
+          routeChangelogDetails.appendChild(routeChangelogSummary)
+          const routeChangelogBody = el('div', 'leaf-content')
+          routeHistory.forEach((event) => {
+            routeChangelogBody.appendChild(renderEventCard(event, commitBySha))
+          })
+          routeChangelogDetails.appendChild(routeChangelogBody)
+          routeChangelogSection.appendChild(routeChangelogDetails)
+          content.appendChild(routeChangelogSection)
+        }
         details.appendChild(content)
         return details
       }
@@ -1316,188 +1465,193 @@
         )
       }
-      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))
+        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)
+        }
+        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
+      }
+      function buildChronologicalEvents(payload) {
+        if (!payload) return []
+        const commitBySha = new Map((payload.commits || []).map((commit) => [commit.sha, commit]))
+        const commitOrder = new Map((payload.commits || []).map((commit, index) => [commit.sha, index]))
+        const rows = []
+        let sequence = 0
+        Object.entries(payload.byRoute || {}).forEach(([routeKey, events]) => {
+          ;(events || []).forEach((event) => {
+            rows.push({
+              eventKind: 'route',
+              routeKey,
+              event,
+              commit: commitBySha.get(event.commitSha),
+              commitIndex: commitOrder.get(event.commitSha) ?? Number.MAX_SAFE_INTEGER,
+              eventIndex: sequence++,
             })
-            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))
+          })
+        })
+        Object.entries(payload.bySourceObject || {}).forEach(([sourceObjectId, events]) => {
+          ;(events || []).forEach((event) => {
+            rows.push({
+              eventKind: 'source',
+              sourceObjectId,
+              displayName: event.displayName || sourceObjectId,
+              event,
+              commit: commitBySha.get(event.commitSha),
+              commitIndex: commitOrder.get(event.commitSha) ?? Number.MAX_SAFE_INTEGER,
+              eventIndex: sequence++,
             })
-            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 renderByRoute = () => {
-          view.innerHTML = ''
-          if (routeEntries.length === 0) {
-            view.appendChild(el('div', 'empty', 'No route changes found in this range.'))
-            return
-          }
+        rows.sort((a, b) => {
+          if (a.commitIndex !== b.commitIndex) return a.commitIndex - b.commitIndex
+          return a.eventIndex - b.eventIndex
+        })
-          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)
-          })
+        return rows
+      }
+      function changelogItemsByTab(tabId) {
+        const payload = state.changelogPayload
+        if (!payload) return []
+        if (tabId === VIEW_IDS.changelog) {
+          return buildChronologicalEvents(payload)
+        }
+        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 []
+      }
-        const renderBySource = () => {
-          view.innerHTML = ''
-          if (sourceEntries.length === 0) {
-            view.appendChild(
-              el('div', 'empty', 'No source-object changes found in this range.'),
-            )
-            return
-          }
+      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))
+        })
+      }
-          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 renderCollection(items, renderItem, emptyMessage) {
+        if (items.length === 0) {
+          resultsEl.appendChild(el('div', 'empty', emptyMessage))
+          return
         }
+        items.forEach((item) => {
+          resultsEl.appendChild(renderItem(item))
+        })
+      }
-        byRouteBtn.addEventListener('click', renderByRoute)
-        bySourceBtn.addEventListener('click', renderBySource)
-        renderByRoute()
+      function renderTabButtons() {
+        setPressed(tabLeavesBtn, state.activeTab === VIEW_IDS.leaves)
+        setPressed(tabChangelogBtn, state.activeTab === VIEW_IDS.changelog)
+        setPressed(tabChangelogSourceBtn, state.activeTab === VIEW_IDS.changelogSource)
+        tabLeavesBtn.style.display = state.availableTabs.has(VIEW_IDS.leaves) ? '' : 'none'
+        tabChangelogBtn.style.display = state.availableTabs.has(VIEW_IDS.changelog) ? '' : '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() {
-        if (state.mode === 'changelog') {
-          return
-        }
         const engine = createSearchEngine(searchInput.value.trim(), {
           caseSensitive: isPressed(caseSensitiveToggle),
           regex: isPressed(regexSearchToggle),
@@ -1515,51 +1669,88 @@
         }
         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.changelog
+              ? `${filtered.length} / ${items.length} changelog events 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.changelog
+                  ? `${item.eventKind === 'route' ? `Route: ${item.routeKey}` : `Source: ${item.displayName || item.sourceObjectId}`} (${item.event.type})`
+                  : `${item.displayName} (${item.events.length})`
+              details.appendChild(el('summary', '', title))
+              if (state.activeTab === VIEW_IDS.changelog) {
+                details.appendChild(renderEventCard(item.event, commitBySha))
+              } else {
+                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.changelog ? 'Changelog 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 +1764,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 +1777,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 +1833,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 +1860,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 +1893,16 @@
         try {
           const parsed = JSON.parse(decodeURIComponent(raw))
           isHydratingFromUrl = true
+          if (
+            parsed.activeTab === VIEW_IDS.leaves ||
+            parsed.activeTab === VIEW_IDS.changelog ||
+            parsed.activeTab === VIEW_IDS.changelogSource
+          ) {
+            state.activeTab = parsed.activeTab
+          }
+          if (parsed.activeTab === 'changelogRoute') {
+            state.activeTab = VIEW_IDS.changelog
+          }
           if (typeof parsed.search === 'string') searchInput.value = parsed.search
           setPressed(caseSensitiveToggle, Boolean(parsed.caseSensitive))
           setPressed(regexSearchToggle, Boolean(parsed.regex))
@@ -1707,8 +1911,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 +1928,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.changelog)
+          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.changelog)
+              ? VIEW_IDS.changelog
+              : 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 +2036,12 @@
         renderResults()
       })
+      tabLeavesBtn.addEventListener('click', () => setActiveTab(VIEW_IDS.leaves))
+      tabChangelogBtn.addEventListener('click', () => setActiveTab(VIEW_IDS.changelog))
+      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))