@emeryld/rrroutes-export 1.0.17 → 1.0.19

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@emeryld/rrroutes-export",
   "description": "Finalized leaves export helpers and CLI for RRRoutes",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs",

package/tools/finalized-leaves-viewer.html

@@ -24,7 +24,8 @@
 
       body {
         margin: 0;
-        font-family: 'Iosevka Web', 'SFMono-Regular', Menlo, Consolas, monospace;
+        font-family:
+          'Iosevka Web', 'SFMono-Regular', Menlo, Consolas, monospace;
         color: var(--text);
         background: var(--bg);
       }
@@ -61,7 +62,10 @@
       .primary-row {
         display: grid;
         gap: 10px;
-        grid-template-columns: minmax(220px, 0.9fr) minmax(300px, 1.4fr) minmax(220px, 1fr);
+        grid-template-columns: minmax(220px, 0.9fr) minmax(300px, 1.4fr) minmax(
+            220px,
+            1fr
+          );
         align-items: end;
       }
 
@@ -374,6 +378,31 @@
         gap: 4px;
       }
 
+      .changelog-diff-line {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        align-items: baseline;
+      }
+
+      .changelog-op.added {
+        font-weight: 700;
+        color: var(--ok);
+      }
+
+      .changelog-op.changed {
+        font-weight: 700;
+        color: var(--accent);
+      }
+
+      .changelog-op.removed {
+        color: var(--danger);
+      }
+
+      .changelog-schema-type {
+        color: var(--schema-accent);
+      }
+
       .schema-block {
         border-top: 1px solid var(--border);
         padding: 8px 0 2px;
@@ -497,15 +526,29 @@
           </label>
           <label class="control-block">
             <span class="control-label">Search text</span>
-            <input id="searchInput" type="text" placeholder="Type to search..." />
+            <input
+              id="searchInput"
+              type="text"
+              placeholder="Type to search..."
+            />
           </label>
           <div class="control-block">
             <span class="control-label">Quick filters</span>
             <div class="quick-toggles">
-              <button id="caseSensitive" class="pill-toggle" type="button" aria-pressed="false">
+              <button
+                id="caseSensitive"
+                class="pill-toggle"
+                type="button"
+                aria-pressed="false"
+              >
                 Case sensitive
               </button>
-              <button id="regexSearch" class="pill-toggle" type="button" aria-pressed="false">
+              <button
+                id="regexSearch"
+                class="pill-toggle"
+                type="button"
+                aria-pressed="false"
+              >
                 Regex
               </button>
             </div>
@@ -514,11 +557,21 @@
 
         <div class="scope-row">
           <div class="scope-actions">
-            <button id="selectAllFields" class="scope-action" type="button">All</button>
-            <button id="clearAllFields" class="scope-action" type="button">None</button>
-            <button id="coreFields" class="scope-action" type="button">Core</button>
-            <button id="schemasOnlyFields" class="scope-action" type="button">Schema</button>
-            <button id="sourceOnlyFields" class="scope-action" type="button">Source</button>
+            <button id="selectAllFields" class="scope-action" type="button">
+              All
+            </button>
+            <button id="clearAllFields" class="scope-action" type="button">
+              None
+            </button>
+            <button id="coreFields" class="scope-action" type="button">
+              Core
+            </button>
+            <button id="schemasOnlyFields" class="scope-action" type="button">
+              Schema
+            </button>
+            <button id="sourceOnlyFields" class="scope-action" type="button">
+              Source
+            </button>
           </div>
           <div id="fieldChipGroups" class="scope-groups"></div>
         </div>
@@ -549,15 +602,22 @@
           <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">
+              <button
+                id="tabLeaves"
+                class="field-chip"
+                type="button"
+                aria-pressed="true"
+              >
                 Leaves
               </button>
-              <button id="tabChangelog" class="field-chip" type="button" aria-pressed="false">
+              <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>
@@ -567,7 +627,10 @@
           <div id="activeFilterChips" class="chips filters"></div>
         </div>
 
-        <div id="status" class="meta">Load a leaves export, changelog export, or unified bundle JSON 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>
@@ -585,10 +648,22 @@
           label: 'description',
           get: (leaf) => [leaf.cfg?.description],
         },
-        { id: 'docsGroup', label: 'docsGroup', get: (leaf) => [leaf.cfg?.docsGroup] },
+        {
+          id: 'docsGroup',
+          label: 'docsGroup',
+          get: (leaf) => [leaf.cfg?.docsGroup],
+        },
         { id: 'tags', label: 'tags', get: (leaf) => leaf.cfg?.tags || [] },
-        { id: 'stability', label: 'stability', get: (leaf) => [leaf.cfg?.stability] },
-        { id: 'docsMeta', label: 'docsMeta', get: (leaf) => [leaf.cfg?.docsMeta] },
+        {
+          id: 'stability',
+          label: 'stability',
+          get: (leaf) => [leaf.cfg?.stability],
+        },
+        {
+          id: 'docsMeta',
+          label: 'docsMeta',
+          get: (leaf) => [leaf.cfg?.docsMeta],
+        },
         {
           id: 'sourceDefinition',
           label: 'source definition',
@@ -617,7 +692,8 @@
         {
           id: 'types',
           label: 'types',
-          get: (leaf, schemaFlatByLeaf) => schemaTypeTokens(schemaFlatByLeaf?.[leaf.key]),
+          get: (leaf, schemaFlatByLeaf) =>
+            schemaTypeTokens(schemaFlatByLeaf?.[leaf.key]),
         },
         {
           id: 'params',
@@ -694,35 +770,6 @@
         },
       ]
 
-      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'])
@@ -736,30 +783,29 @@
         {
           id: 'core',
           label: 'Core fields',
-          fieldIds: SEARCH_FIELDS.filter((field) => CORE_FIELD_IDS.has(field.id)).map(
-            (field) => field.id,
-          ),
+          fieldIds: SEARCH_FIELDS.filter((field) =>
+            CORE_FIELD_IDS.has(field.id),
+          ).map((field) => field.id),
         },
         {
           id: 'schema',
           label: 'Schema fields',
-          fieldIds: SEARCH_FIELDS.filter((field) => SCHEMA_SCOPE_FIELD_IDS.has(field.id)).map(
-            (field) => field.id,
-          ),
+          fieldIds: SEARCH_FIELDS.filter((field) =>
+            SCHEMA_SCOPE_FIELD_IDS.has(field.id),
+          ).map((field) => field.id),
         },
         {
           id: 'source',
           label: 'Source fields',
-          fieldIds: SEARCH_FIELDS.filter((field) => SOURCE_FIELD_IDS.has(field.id)).map(
-            (field) => field.id,
-          ),
+          fieldIds: SEARCH_FIELDS.filter((field) =>
+            SOURCE_FIELD_IDS.has(field.id),
+          ).map((field) => field.id),
         },
       ]
 
       const VIEW_IDS = {
         leaves: 'leaves',
         changelog: 'changelog',
-        changelogSource: 'changelogSource',
       }
 
       const VIEWER_MODE = {
@@ -790,11 +836,9 @@
         },
         [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)),
+          defaultSelected: new Set(
+            CHANGELOG_TIMELINE_FIELDS.map((field) => field.id),
+          ),
         },
       }
 
@@ -807,9 +851,12 @@
         viewerMode: VIEWER_MODE.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),
+          [VIEW_IDS.leaves]: new Set(
+            TAB_CONFIG[VIEW_IDS.leaves].defaultSelected,
+          ),
+          [VIEW_IDS.changelog]: new Set(
+            TAB_CONFIG[VIEW_IDS.changelog].defaultSelected,
+          ),
         },
       }
 
@@ -818,7 +865,9 @@
       const caseSensitiveToggle = document.getElementById('caseSensitive')
       const regexSearchToggle = document.getElementById('regexSearch')
       const typeMatchModeInput = document.getElementById('typeMatchMode')
-      const schemaRowsMatchOnlyToggle = document.getElementById('schemaRowsMatchOnly')
+      const schemaRowsMatchOnlyToggle = document.getElementById(
+        'schemaRowsMatchOnly',
+      )
       const fieldChipGroups = document.getElementById('fieldChipGroups')
       const activeFilterChips = document.getElementById('activeFilterChips')
       const selectAllFieldsBtn = document.getElementById('selectAllFields')
@@ -833,7 +882,6 @@
       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
@@ -846,7 +894,9 @@
       }
 
       function applyViewerModeMeta() {
-        const meta = VIEWER_MODE_META[state.viewerMode] || VIEWER_MODE_META[VIEWER_MODE.leaves]
+        const meta =
+          VIEWER_MODE_META[state.viewerMode] ||
+          VIEWER_MODE_META[VIEWER_MODE.leaves]
         document.title = meta.title
         if (viewerHeadingEl) viewerHeadingEl.textContent = meta.heading
       }
@@ -958,7 +1008,8 @@
       function toTokens(value) {
         if (value === null || value === undefined) return []
         if (typeof value === 'string') return [value]
-        if (typeof value === 'number' || typeof value === 'boolean') return [String(value)]
+        if (typeof value === 'number' || typeof value === 'boolean')
+          return [String(value)]
         if (Array.isArray(value)) return value.flatMap((item) => toTokens(item))
         if (typeof value === 'object') return [JSON.stringify(value)]
         return []
@@ -997,7 +1048,8 @@
       function schemaSectionToSearchTokens(flatSchema, sectionName) {
         if (!flatSchema || typeof flatSchema !== 'object') return []
         const sectionEntries = Object.entries(flatSchema).filter(
-          ([path]) => path === sectionName || path.startsWith(`${sectionName}.`),
+          ([path]) =>
+            path === sectionName || path.startsWith(`${sectionName}.`),
         )
 
         if (sectionEntries.length === 0) return []
@@ -1045,12 +1097,20 @@
         return Array.from(tokens)
       }
 
-      function schemaEntryMatchesActiveFilter(sectionName, fullPath, info, engine, selectedIds) {
+      function schemaEntryMatchesActiveFilter(
+        sectionName,
+        fullPath,
+        info,
+        engine,
+        selectedIds,
+      ) {
         if (!engine.active) return true
 
         let matched = false
         if (selectedIds.includes(sectionName)) {
-          matched = schemaEntryTokens(fullPath, info).some((token) => engine.test(token))
+          matched = schemaEntryTokens(fullPath, info).some((token) =>
+            engine.test(token),
+          )
         }
 
         if (!matched && selectedIds.includes('types')) {
@@ -1064,7 +1124,9 @@
           }
 
           if (typeMatchModeInput.value === 'exact' && !engine.regex) {
-            const needle = engine.caseSensitive ? engine.query : engine.query.toLowerCase()
+            const needle = engine.caseSensitive
+              ? engine.query
+              : engine.query.toLowerCase()
             const normalized = engine.caseSensitive
               ? typeTokens
               : typeTokens.map((token) => token.toLowerCase())
@@ -1086,8 +1148,14 @@
         return SEARCH_FIELDS.some((field) => {
           if (!selectedIds.includes(field.id)) return false
           const tokens = toTokens(field.get(leaf, schemaFlatByLeaf, payload))
-          if (field.id === 'types' && typeMatchModeInput.value === 'exact' && !engine.regex) {
-            const needle = engine.caseSensitive ? engine.query : engine.query.toLowerCase()
+          if (
+            field.id === 'types' &&
+            typeMatchModeInput.value === 'exact' &&
+            !engine.regex
+          ) {
+            const needle = engine.caseSensitive
+              ? engine.query
+              : engine.query.toLowerCase()
             const normalized = engine.caseSensitive
               ? tokens
               : tokens.map((token) => String(token).toLowerCase())
@@ -1125,14 +1193,25 @@
       }
 
       function setHighlighted(node, text, engine, selectedIds, fieldIds) {
-        node.innerHTML = highlightWithFieldScope(text, engine, selectedIds, fieldIds)
+        node.innerHTML = highlightWithFieldScope(
+          text,
+          engine,
+          selectedIds,
+          fieldIds,
+        )
       }
 
       function kv(key, value, engine, selectedIds, fieldIds) {
         const box = el('div', 'kv')
         box.appendChild(el('div', 'k', key))
         const valueNode = el('div', 'v mono')
-        setHighlighted(valueNode, value === undefined ? '—' : String(value), engine, selectedIds, fieldIds)
+        setHighlighted(
+          valueNode,
+          value === undefined ? '—' : String(value),
+          engine,
+          selectedIds,
+          fieldIds,
+        )
         box.appendChild(valueNode)
         return box
       }
@@ -1197,7 +1276,12 @@
         link.href = href
         link.target = '_blank'
         link.rel = 'noopener noreferrer'
-        link.innerHTML = highlightWithFieldScope(label, engine, selectedIds, fieldIds)
+        link.innerHTML = highlightWithFieldScope(
+          label,
+          engine,
+          selectedIds,
+          fieldIds,
+        )
         labelNode.appendChild(link)
         box.appendChild(labelNode)
         return box
@@ -1233,7 +1317,11 @@
 
       function getSchemaSource(source, sectionName) {
         const schemaKey = SCHEMA_SOURCE_KEYS_BY_SECTION[sectionName]
-        if (!schemaKey || !source?.schemas || typeof source.schemas !== 'object') {
+        if (
+          !schemaKey ||
+          !source?.schemas ||
+          typeof source.schemas !== 'object'
+        ) {
           return {
             schemaKey,
             sourceValue: undefined,
@@ -1247,8 +1335,11 @@
       }
 
       function resolveSchemaSourceLabel(schemaKey, sourceValue) {
-        if (!sourceValue || typeof sourceValue !== 'object') return schemaKey || 'schema'
-        return sourceValue.sourceName || sourceValue.tag || schemaKey || 'schema'
+        if (!sourceValue || typeof sourceValue !== 'object')
+          return schemaKey || 'schema'
+        return (
+          sourceValue.sourceName || sourceValue.tag || schemaKey || 'schema'
+        )
       }
 
       function createTreeNode(name = '') {
@@ -1265,7 +1356,10 @@
         Object.entries(entries)
           .sort(([a], [b]) => a.localeCompare(b))
           .forEach(([fullPath, info]) => {
-            const trimmed = fullPath === sectionName ? '' : fullPath.slice(sectionName.length + 1)
+            const trimmed =
+              fullPath === sectionName
+                ? ''
+                : fullPath.slice(sectionName.length + 1)
             const segments = trimmed ? trimmed.split('.') : []
 
             let current = root
@@ -1307,10 +1401,13 @@
 
         const appendTypeCell = (row, info) => {
           const type = el('span', 'tree-pill')
-          setHighlighted(type, info?.type || info?.kind || '—', engine, selectedIds, [
-            sectionName,
-            'types',
-          ])
+          setHighlighted(
+            type,
+            info?.type || info?.kind || '—',
+            engine,
+            selectedIds,
+            [sectionName, 'types'],
+          )
           row.appendChild(type)
         }
 
@@ -1331,7 +1428,13 @@
             .sort((a, b) => a.localeCompare(b))
             .forEach((key) =>
               container.appendChild(
-                renderTreeNode(node.children[key], engine, selectedIds, sectionName, false),
+                renderTreeNode(
+                  node.children[key],
+                  engine,
+                  selectedIds,
+                  sectionName,
+                  false,
+                ),
               ),
             )
           details.appendChild(container)
@@ -1352,7 +1455,8 @@
 
         const grouped = splitFlatSchemaBySection(flatSchema)
         let hasAnySchemaEntries = false
-        const limitToMatchedRows = isPressed(schemaRowsMatchOnlyToggle) && engine.active
+        const limitToMatchedRows =
+          isPressed(schemaRowsMatchOnlyToggle) && engine.active
 
         SCHEMA_SECTIONS.forEach((sectionName) => {
           const rawEntries = grouped[sectionName]
@@ -1361,7 +1465,13 @@
           const entries = limitToMatchedRows
             ? Object.fromEntries(
                 Object.entries(rawEntries).filter(([fullPath, info]) =>
-                  schemaEntryMatchesActiveFilter(sectionName, fullPath, info, engine, selectedIds),
+                  schemaEntryMatchesActiveFilter(
+                    sectionName,
+                    fullPath,
+                    info,
+                    engine,
+                    selectedIds,
+                  ),
                 ),
               )
             : rawEntries
@@ -1390,7 +1500,9 @@
           }
 
           const tree = buildSchemaTree(entries, sectionName)
-          block.appendChild(renderTreeNode(tree, engine, selectedIds, sectionName, true))
+          block.appendChild(
+            renderTreeNode(tree, engine, selectedIds, sectionName, true),
+          )
 
           section.appendChild(block)
         })
@@ -1417,7 +1529,9 @@
         const overview = el('div', 'section')
         overview.appendChild(el('h3', '', 'Overview'))
         const topGrid = el('div', 'grid-3')
-        topGrid.appendChild(kv('group', cfg.docsGroup, engine, selectedIds, 'docsGroup'))
+        topGrid.appendChild(
+          kv('group', cfg.docsGroup, engine, selectedIds, 'docsGroup'),
+        )
         topGrid.appendChild(
           kv(
             'tags',
@@ -1427,10 +1541,22 @@
             'tags',
           ),
         )
-        topGrid.appendChild(kv('stability', cfg.stability, engine, selectedIds, 'stability'))
+        topGrid.appendChild(
+          kv('stability', cfg.stability, engine, selectedIds, 'stability'),
+        )
         overview.appendChild(topGrid)
-        overview.appendChild(kv('summary', cfg.summary, engine, selectedIds, 'summary'))
-        overview.appendChild(kv('description', cfg.description, engine, selectedIds, 'description'))
+        overview.appendChild(
+          kv('summary', cfg.summary, engine, selectedIds, 'summary'),
+        )
+        overview.appendChild(
+          kv(
+            'description',
+            cfg.description,
+            engine,
+            selectedIds,
+            'description',
+          ),
+        )
 
         const iconRow = el('div', 'icon-row')
         if (cfg.feed) {
@@ -1473,11 +1599,22 @@
         const source = sourceByLeaf[leaf.key]
         if (source?.definition) {
           overview.appendChild(
-            createSourceRow('definition', source.definition, engine, selectedIds, 'sourceDefinition'),
+            createSourceRow(
+              'definition',
+              source.definition,
+              engine,
+              selectedIds,
+              'sourceDefinition',
+            ),
           )
         }
 
-        const separatedSchemas = renderSeparatedSchemas(flatSchema, engine, selectedIds, source)
+        const separatedSchemas = renderSeparatedSchemas(
+          flatSchema,
+          engine,
+          selectedIds,
+          source,
+        )
         if (separatedSchemas) {
           content.appendChild(separatedSchemas)
         }
@@ -1485,7 +1622,21 @@
         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]),
+            (state.changelogPayload?.commits || []).map((commit) => [
+              commit.sha,
+              commit,
+            ]),
+          )
+          const commitOrder = new Map(
+            (state.changelogPayload?.commits || []).map((commit, index) => [
+              commit.sha,
+              index,
+            ]),
+          )
+          const routeHistoryNewestFirst = sortEventsNewestFirst(
+            routeHistory,
+            commitBySha,
+            commitOrder,
           )
           const routeChangelogSection = el('div', 'section')
           const routeChangelogDetails = el('details')
@@ -1500,7 +1651,7 @@
           routeChangelogDetails.appendChild(routeChangelogSummary)
 
           const routeChangelogBody = el('div', 'leaf-content')
-          routeHistory.forEach((event) => {
+          routeHistoryNewestFirst.forEach((event) => {
             routeChangelogBody.appendChild(renderEventCard(event, commitBySha))
           })
           routeChangelogDetails.appendChild(routeChangelogBody)
@@ -1553,18 +1704,134 @@
         return parts.join(', ')
       }
 
+      function schemaFlags(nullable, optional) {
+        return `${nullable ? '-' : ''}${optional ? '?' : ''}`
+      }
+
+      function formatEntryTypeLabel(entry) {
+        if (!entry || typeof entry !== 'object') return null
+        const type = typeof entry.type === 'string' ? entry.type : 'unknown'
+        return `${type}${schemaFlags(Boolean(entry.nullable), Boolean(entry.optional))}`
+      }
+
+      function formatPathLabel(path, entry) {
+        const basePath = typeof path === 'string' ? path : ''
+        return `${basePath}${schemaFlags(Boolean(entry?.nullable), Boolean(entry?.optional))}`
+      }
+
+      function parseSignatureTypeLabel(signature) {
+        if (typeof signature !== 'string') return null
+        const typeMatch = signature.match(/(?:^|,\s*)type=([^,]+)/)
+        const nullableMatch = signature.match(/(?:^|,\s*)nullable=(true|false)/)
+        const optionalMatch = signature.match(/(?:^|,\s*)optional=(true|false)/)
+        if (!typeMatch) return null
+        const type = typeMatch[1]
+        const nullable = nullableMatch?.[1] === 'true'
+        const optional = optionalMatch?.[1] === 'true'
+        return `${type}${schemaFlags(nullable, optional)}`
+      }
+
+      function formatSourceTypeLabel(signatures) {
+        if (!Array.isArray(signatures) || signatures.length === 0) return null
+        const labels = signatures
+          .map((item) => parseSignatureTypeLabel(item))
+          .filter(Boolean)
+        if (labels.length === 0) return null
+        return labels.join(' | ')
+      }
+
+      function schemaDiffOperation(op) {
+        if (op === 'added') {
+          return { symbol: '+', word: 'added', className: 'added' }
+        }
+        if (op === 'removed') {
+          return { symbol: '-', word: 'removed', className: 'removed' }
+        }
+        return { symbol: '*', word: 'changed', className: 'changed' }
+      }
+
+      function buildSchemaDiffLine(op, beforeType, pathLabel, afterType) {
+        if (!pathLabel) return null
+        const line = el('div', 'meta mono changelog-diff-line')
+        const operation = schemaDiffOperation(op)
+        line.appendChild(
+          el(
+            'span',
+            `changelog-op ${operation.className}`,
+            `${operation.symbol} ${operation.word}`,
+          ),
+        )
+        if (beforeType) {
+          line.appendChild(el('span', 'changelog-schema-type', beforeType))
+        }
+        line.appendChild(el('span', '', pathLabel))
+        if (operation.className === 'changed' && afterType) {
+          line.appendChild(el('span', '', '->'))
+          line.appendChild(el('span', 'changelog-schema-type', afterType))
+        }
+        return line
+      }
+
+      function buildLegacySchemaDiffLine(text) {
+        return el('div', 'meta mono', text)
+      }
+
       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 || [])}`
+          if (delta.op === 'added') {
+            const afterType = formatSourceTypeLabel(delta.after)
+            if (afterType) return buildSchemaDiffLine(delta.op, afterType, location)
+            return buildLegacySchemaDiffLine(
+              `added ${location}: ${JSON.stringify(delta.after || [])}`,
+            )
+          }
+          if (delta.op === 'removed') {
+            const beforeType = formatSourceTypeLabel(delta.before)
+            if (beforeType)
+              return buildSchemaDiffLine(delta.op, beforeType, location)
+            return buildLegacySchemaDiffLine(
+              `removed ${location}: ${JSON.stringify(delta.before || [])}`,
+            )
+          }
+          const beforeType = formatSourceTypeLabel(delta.before)
+          const afterType = formatSourceTypeLabel(delta.after)
+          if (beforeType || afterType) {
+            return buildSchemaDiffLine(
+              delta.op,
+              beforeType || 'unknown',
+              location,
+              afterType || 'unknown',
+            )
+          }
+          return buildLegacySchemaDiffLine(
+            `changed ${location}: ${JSON.stringify(delta.before || [])} -> ${JSON.stringify(delta.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)}`
+          if (delta.op === 'added') {
+            const afterType = formatEntryTypeLabel(delta.after)
+            const pathLabel = formatPathLabel(delta.path, delta.after)
+            if (afterType) return buildSchemaDiffLine(delta.op, afterType, pathLabel)
+            return buildLegacySchemaDiffLine(
+              `added ${delta.path}: ${formatRouteSchemaEntry(delta.after)}`,
+            )
+          }
+          if (delta.op === 'removed') {
+            const beforeType = formatEntryTypeLabel(delta.before)
+            const pathLabel = formatPathLabel(delta.path, delta.before)
+            if (beforeType)
+              return buildSchemaDiffLine(delta.op, beforeType, pathLabel)
+            return buildLegacySchemaDiffLine(
+              `removed ${delta.path}: ${formatRouteSchemaEntry(delta.before)}`,
+            )
+          }
+          const beforeType = formatEntryTypeLabel(delta.before) || 'unknown'
+          const afterType = formatEntryTypeLabel(delta.after) || 'unknown'
+          const pathLabel =
+            formatPathLabel(delta.path, delta.after || delta.before) || delta.path
+          return buildSchemaDiffLine(delta.op, beforeType, pathLabel, afterType)
         }
         return null
       }
@@ -1589,17 +1856,21 @@
         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}`))
+          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))
+            const lineNode = formatSchemaDiffLine(delta)
+            if (!lineNode) return
+            schemaChanges.appendChild(lineNode)
           })
           card.appendChild(schemaChanges)
         }
         if (Array.isArray(event.cfgDiff) && event.cfgDiff.length > 0) {
-          card.appendChild(el('div', 'meta', `cfg changes: ${event.cfgDiff.length}`))
+          card.appendChild(
+            el('div', 'meta', `cfg changes: ${event.cfgDiff.length}`),
+          )
           const cfgChanges = el('div')
           event.cfgDiff.forEach((diff) => {
             const line = formatCfgDiffLine(diff)
@@ -1608,8 +1879,17 @@
           })
           card.appendChild(cfgChanges)
         }
-        if (Array.isArray(event.impactedRoutes) && event.impactedRoutes.length > 0) {
-          card.appendChild(el('div', 'meta', `impacted routes: ${event.impactedRoutes.length}`))
+        if (
+          Array.isArray(event.impactedRoutes) &&
+          event.impactedRoutes.length > 0
+        ) {
+          card.appendChild(
+            el(
+              'div',
+              'meta',
+              `impacted routes: ${event.impactedRoutes.length}`,
+            ),
+          )
         }
         return card
       }
@@ -1629,14 +1909,16 @@
 
       function renderChangelogEventLines(event, commitBySha, contextLabel) {
         const row = el('div', 'changelog-line-item')
-        row.appendChild(el('div', 'meta', buildCommitMetaLine(event, commitBySha)))
+        row.appendChild(
+          el('div', 'meta', buildCommitMetaLine(event, commitBySha)),
+        )
         row.appendChild(el('div', 'mono', `${contextLabel} (${event.type})`))
 
         if (Array.isArray(event.schemaDiff) && event.schemaDiff.length > 0) {
           event.schemaDiff.forEach((delta) => {
-            const line = formatSchemaDiffLine(delta)
-            if (!line) return
-            row.appendChild(el('div', 'meta mono', line))
+            const lineNode = formatSchemaDiffLine(delta)
+            if (!lineNode) return
+            row.appendChild(lineNode)
           })
         }
         if (Array.isArray(event.cfgDiff) && event.cfgDiff.length > 0) {
@@ -1646,19 +1928,57 @@
             row.appendChild(el('div', 'meta mono', line))
           })
         }
-        if (Array.isArray(event.impactedRoutes) && event.impactedRoutes.length > 0) {
+        if (
+          Array.isArray(event.impactedRoutes) &&
+          event.impactedRoutes.length > 0
+        ) {
           row.appendChild(
-            el('div', 'meta mono', `impacted routes: ${event.impactedRoutes.join(', ')}`),
+            el(
+              'div',
+              'meta mono',
+              `impacted routes: ${event.impactedRoutes.join(', ')}`,
+            ),
           )
         }
 
         return row
       }
 
+      function commitTimestamp(commit) {
+        if (!commit?.authorDate) return Number.NEGATIVE_INFINITY
+        const parsed = Date.parse(commit.authorDate)
+        return Number.isNaN(parsed) ? Number.NEGATIVE_INFINITY : parsed
+      }
+
+      function compareEventsNewestFirst(a, b, commitBySha, commitOrder) {
+        const commitA = commitBySha.get(a?.commitSha)
+        const commitB = commitBySha.get(b?.commitSha)
+        const timeDelta = commitTimestamp(commitB) - commitTimestamp(commitA)
+        if (timeDelta !== 0) return timeDelta
+
+        const indexA = commitOrder.get(a?.commitSha) ?? -1
+        const indexB = commitOrder.get(b?.commitSha) ?? -1
+        if (indexA !== indexB) return indexB - indexA
+
+        return String(b?.commitSha || '').localeCompare(
+          String(a?.commitSha || ''),
+        )
+      }
+
+      function sortEventsNewestFirst(events, commitBySha, commitOrder) {
+        return [...(events || [])].sort((a, b) =>
+          compareEventsNewestFirst(a, b, commitBySha, commitOrder),
+        )
+      }
+
       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 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
 
@@ -1669,28 +1989,34 @@
               routeKey,
               event,
               commit: commitBySha.get(event.commitSha),
+              commitSort: commitTimestamp(commitBySha.get(event.commitSha)),
               commitIndex: commitOrder.get(event.commitSha) ?? -1,
               eventIndex: sequence++,
             })
           })
         })
 
-        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) ?? -1,
-              eventIndex: sequence++,
+        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),
+                commitSort: commitTimestamp(commitBySha.get(event.commitSha)),
+                commitIndex: commitOrder.get(event.commitSha) ?? -1,
+                eventIndex: sequence++,
+              })
             })
-          })
-        })
+          },
+        )
 
         rows.sort((a, b) => {
-          if (a.commitIndex !== b.commitIndex) return b.commitIndex - a.commitIndex
+          if (a.commitSort !== b.commitSort) return b.commitSort - a.commitSort
+          if (a.commitIndex !== b.commitIndex)
+            return b.commitIndex - a.commitIndex
           return b.eventIndex - a.eventIndex
         })
 
@@ -1703,43 +2029,14 @@
         if (tabId === VIEW_IDS.changelog) {
           return buildChronologicalEvents(payload)
         }
-        if (tabId === VIEW_IDS.changelogSource) {
-          const commitOrder = new Map((payload.commits || []).map((commit, index) => [commit.sha, index]))
-          const sortEventsNewestFirst = (events) =>
-            [...(events || [])].sort((a, b) => {
-              const aIndex = commitOrder.get(a?.commitSha) ?? -1
-              const bIndex = commitOrder.get(b?.commitSha) ?? -1
-              if (aIndex !== bIndex) return bIndex - aIndex
-              return String(b?.commitSha || '').localeCompare(String(a?.commitSha || ''))
-            })
-
-          return Object.entries(payload.bySourceObject || {})
-            .map(([sourceId, events]) => {
-              const sortedEvents = sortEventsNewestFirst(events)
-              const latestCommitIndex = sortedEvents.length
-                ? commitOrder.get(sortedEvents[0]?.commitSha) ?? -1
-                : -1
-              return {
-              sourceId,
-              events: sortedEvents,
-              displayName: sortedEvents[0]?.displayName || sourceId,
-              latestCommitIndex,
-              }
-            })
-            .sort((a, b) => {
-              if (a.latestCommitIndex !== b.latestCommitIndex) {
-                return b.latestCommitIndex - a.latestCommitIndex
-              }
-              return a.displayName.localeCompare(b.displayName)
-            })
-        }
         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
+          if (selectedIds.length > 0 && !selectedIds.includes(field.id))
+            return false
           const tokens = toTokens(field.get(item))
           return tokens.some((token) => engine.test(token))
         })
@@ -1758,10 +2055,14 @@
       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'
+        tabLeavesBtn.style.display = state.availableTabs.has(VIEW_IDS.leaves)
+          ? ''
+          : 'none'
+        tabChangelogBtn.style.display = state.availableTabs.has(
+          VIEW_IDS.changelog,
+        )
+          ? ''
+          : 'none'
         const isLeavesTab = state.activeTab === VIEW_IDS.leaves
         coreFieldsBtn.style.display = isLeavesTab ? '' : 'none'
         schemasOnlyFieldsBtn.style.display = isLeavesTab ? '' : 'none'
@@ -1777,7 +2078,9 @@
         if (engine.error) {
           statusEl.textContent = `Invalid regex: ${engine.error}`
           resultsEl.innerHTML = ''
-          resultsEl.appendChild(el('div', 'empty', 'Fix the regex to continue.'))
+          resultsEl.appendChild(
+            el('div', 'empty', 'Fix the regex to continue.'),
+          )
           renderActiveFilterChips({
             selectedIds: selectedFieldIds(),
             hasRegexError: true,
@@ -1790,43 +2093,41 @@
         renderTabButtons()
         renderActiveFilterChips({ selectedIds, hasRegexError: false })
         if (state.activeTab === VIEW_IDS.leaves) {
-          const filtered = state.leaves.filter((leaf) => matchesLeaf(leaf, engine, selectedIds))
+          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.')
+          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 filtered = items.filter((item) =>
+            matchesGenericItem(item, fieldDefs, engine, selectedIds),
+          )
+          statusEl.textContent = `${filtered.length} / ${items.length} changelog events matched.`
           const commitBySha = new Map(
-            (state.changelogPayload?.commits || []).map((commit) => [commit.sha, commit]),
+            (state.changelogPayload?.commits || []).map((commit) => [
+              commit.sha,
+              commit,
+            ]),
           )
           if (state.viewerMode === VIEWER_MODE.changelog) {
             renderCollection(
               filtered,
               (item) => {
-                if (state.activeTab === VIEW_IDS.changelog) {
-                  const contextLabel =
-                    item.eventKind === 'route'
-                      ? `Route: ${item.routeKey}`
-                      : `Source: ${item.displayName || item.sourceObjectId}`
-                  return renderChangelogEventLines(item.event, commitBySha, contextLabel)
-                }
-
-                const lines = el('div', 'changelog-lines')
-                ;(item.events || []).forEach((event) => {
-                  lines.appendChild(
-                    renderChangelogEventLines(
-                      event,
-                      commitBySha,
-                      `Source: ${item.displayName || item.sourceId}`,
-                    ),
-                  )
-                })
-                return lines
+                const contextLabel =
+                  item.eventKind === 'route'
+                    ? `Route: ${item.routeKey}`
+                    : `Source: ${item.displayName || item.sourceObjectId}`
+                return renderChangelogEventLines(
+                  item.event,
+                  commitBySha,
+                  contextLabel,
+                )
               },
               'No matches.',
             )
@@ -1835,16 +2136,9 @@
               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})`
+                const title = `${item.eventKind === 'route' ? `Route: ${item.routeKey}` : `Source: ${item.displayName || item.sourceObjectId}`} (${item.event.type})`
                 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)))
-                }
+                details.appendChild(renderEventCard(item.event, commitBySha))
                 return details
               },
               'No matches.',
@@ -1855,15 +2149,17 @@
       }
 
       function selectedFieldIds() {
-        const selected = state.selectedFieldIdsByTab[state.activeTab] || new Set()
-        return currentFieldDefs().filter((field) => selected.has(field.id)).map(
-          (field) => field.id,
-        )
+        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()
+        const selected =
+          state.selectedFieldIdsByTab[state.activeTab] || new Set()
         fieldChipGroups.innerHTML = ''
         const groups =
           state.activeTab === VIEW_IDS.leaves
@@ -1871,7 +2167,10 @@
             : [
                 {
                   id: 'tabFields',
-                  label: state.activeTab === VIEW_IDS.changelog ? 'Changelog fields' : 'Source fields',
+                  label:
+                    state.activeTab === VIEW_IDS.changelog
+                      ? 'Changelog fields'
+                      : 'Source fields',
                   fieldIds: fieldDefs.map((field) => field.id),
                 },
               ]
@@ -1910,7 +2209,9 @@
       function setFieldSelection(allowedIds, options = {}) {
         const { rerender = true } = options
         state.selectedFieldIdsByTab[state.activeTab] = new Set(
-          currentFieldDefs().map((field) => field.id).filter((id) => allowedIds.has(id)),
+          currentFieldDefs()
+            .map((field) => field.id)
+            .filter((id) => allowedIds.has(id)),
         )
         renderFieldChips()
         if (rerender) renderResults()
@@ -1922,7 +2223,10 @@
         setPressed(regexSearchToggle, false)
         typeMatchModeInput.value = 'contains'
         setPressed(schemaRowsMatchOnlyToggle, false)
-        setFieldSelection(new Set(currentFieldDefs().map((field) => field.id)), { rerender: false })
+        setFieldSelection(
+          new Set(currentFieldDefs().map((field) => field.id)),
+          { rerender: false },
+        )
         renderResults()
       }
 
@@ -1987,12 +2291,16 @@
         }
 
         if (chipModels.length === 0) {
-          activeFilterChips.appendChild(el('span', 'empty', 'No active filters'))
+          activeFilterChips.appendChild(
+            el('span', 'empty', 'No active filters'),
+          )
           return
         }
 
         chipModels.forEach((chipModel) => {
-          const chip = document.createElement(chipModel.onClick ? 'button' : 'span')
+          const chip = document.createElement(
+            chipModel.onClick ? 'button' : 'span',
+          )
           chip.className = chipModel.onClick ? 'chip chip-btn' : 'chip'
           chip.textContent = chipModel.text
           if (chipModel.onClick) {
@@ -2009,10 +2317,14 @@
           search: searchInput.value,
           caseSensitive: isPressed(caseSensitiveToggle),
           regex: isPressed(regexSearchToggle),
-          typeMatchMode: typeMatchModeInput.value === 'exact' ? 'exact' : 'contains',
+          typeMatchMode:
+            typeMatchModeInput.value === 'exact' ? 'exact' : 'contains',
           schemaRowsMatchOnly: isPressed(schemaRowsMatchOnlyToggle),
           selectedFieldsByTab: Object.fromEntries(
-            Object.entries(state.selectedFieldIdsByTab).map(([key, value]) => [key, Array.from(value)]),
+            Object.entries(state.selectedFieldIdsByTab).map(([key, value]) => [
+              key,
+              Array.from(value),
+            ]),
           ),
         }
       }
@@ -2021,7 +2333,9 @@
         if (isHydratingFromUrl) return
 
         const data = collectFilterState()
-        const params = new URLSearchParams(window.location.hash.replace(/^#/, ''))
+        const params = new URLSearchParams(
+          window.location.hash.replace(/^#/, ''),
+        )
         const serialized = encodeURIComponent(JSON.stringify(data))
         params.set(URL_PARAM_KEY, serialized)
         const nextHash = params.toString()
@@ -2031,7 +2345,9 @@
       }
 
       function hydrateFilterStateFromUrl() {
-        const params = new URLSearchParams(window.location.hash.replace(/^#/, ''))
+        const params = new URLSearchParams(
+          window.location.hash.replace(/^#/, ''),
+        )
         const raw = params.get(URL_PARAM_KEY)
         if (!raw) return
 
@@ -2040,28 +2356,39 @@
           isHydratingFromUrl = true
           if (
             parsed.activeTab === VIEW_IDS.leaves ||
-            parsed.activeTab === VIEW_IDS.changelog ||
-            parsed.activeTab === VIEW_IDS.changelogSource
+            parsed.activeTab === VIEW_IDS.changelog
           ) {
             state.activeTab = parsed.activeTab
           }
           if (parsed.activeTab === 'changelogRoute') {
             state.activeTab = VIEW_IDS.changelog
           }
-          if (typeof parsed.search === 'string') searchInput.value = parsed.search
+          if (typeof parsed.search === 'string')
+            searchInput.value = parsed.search
           setPressed(caseSensitiveToggle, Boolean(parsed.caseSensitive))
           setPressed(regexSearchToggle, Boolean(parsed.regex))
-          if (parsed.typeMatchMode === 'exact' || parsed.typeMatchMode === 'contains') {
+          if (
+            parsed.typeMatchMode === 'exact' ||
+            parsed.typeMatchMode === 'contains'
+          ) {
             typeMatchModeInput.value = parsed.typeMatchMode
           }
-          setPressed(schemaRowsMatchOnlyToggle, Boolean(parsed.schemaRowsMatchOnly))
+          setPressed(
+            schemaRowsMatchOnlyToggle,
+            Boolean(parsed.schemaRowsMatchOnly),
+          )
 
-          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)
-            })
+          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.
@@ -2118,27 +2445,22 @@
         }
         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
+            : VIEW_IDS.changelog
         }
 
         if (state.leavesPayload && state.changelogPayload) {
-          statusEl.textContent =
-            `Loaded unified bundle with ${state.leaves.length} routes and ${
-              state.changelogPayload.commits?.length || 0
-            } commits.`
+          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.`
+          statusEl.textContent = `Loaded changelog payload with ${state.changelogPayload.commits?.length || 0} commits.`
         } else {
           statusEl.textContent = 'No payload loaded.'
         }
@@ -2164,7 +2486,8 @@
         try {
           await handleFile(file)
         } catch (error) {
-          statusEl.textContent = error instanceof Error ? error.message : String(error)
+          statusEl.textContent =
+            error instanceof Error ? error.message : String(error)
           resultsEl.innerHTML = ''
         }
       })
@@ -2184,17 +2507,28 @@
         renderResults()
       })
 
-      tabLeavesBtn.addEventListener('click', () => setActiveTab(VIEW_IDS.leaves))
-      tabChangelogBtn.addEventListener('click', () => setActiveTab(VIEW_IDS.changelog))
-      tabChangelogSourceBtn.addEventListener('click', () => setActiveTab(VIEW_IDS.changelogSource))
+      tabLeavesBtn.addEventListener('click', () =>
+        setActiveTab(VIEW_IDS.leaves),
+      )
+      tabChangelogBtn.addEventListener('click', () =>
+        setActiveTab(VIEW_IDS.changelog),
+      )
 
       selectAllFieldsBtn.addEventListener('click', () =>
         setFieldSelection(new Set(currentFieldDefs().map((field) => field.id))),
       )
-      clearAllFieldsBtn.addEventListener('click', () => setFieldSelection(new Set()))
-      coreFieldsBtn.addEventListener('click', () => setFieldSelection(CORE_FIELD_IDS))
-      schemasOnlyFieldsBtn.addEventListener('click', () => setFieldSelection(SCHEMA_SCOPE_FIELD_IDS))
-      sourceOnlyFieldsBtn.addEventListener('click', () => setFieldSelection(SOURCE_FIELD_IDS))
+      clearAllFieldsBtn.addEventListener('click', () =>
+        setFieldSelection(new Set()),
+      )
+      coreFieldsBtn.addEventListener('click', () =>
+        setFieldSelection(CORE_FIELD_IDS),
+      )
+      schemasOnlyFieldsBtn.addEventListener('click', () =>
+        setFieldSelection(SCHEMA_SCOPE_FIELD_IDS),
+      )
+      sourceOnlyFieldsBtn.addEventListener('click', () =>
+        setFieldSelection(SOURCE_FIELD_IDS),
+      )
       resetFiltersBtn.addEventListener('click', resetFiltersToDefault)
 
       renderFieldChips()