@emeryld/rrroutes-export 1.0.18 → 1.0.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@emeryld/rrroutes-export",
   "description": "Finalized leaves export helpers and CLI for RRRoutes",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "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,70 @@
         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);
+      }
+
+      .event-title-row {
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .event-action-added {
+        color: var(--ok);
+        font-weight: 700;
+      }
+
+      .event-action-removed {
+        color: var(--danger);
+      }
+
+      .event-action-modified {
+        color: var(--accent);
+        font-weight: 700;
+      }
+
+      .event-icon {
+        display: inline-flex;
+        width: 14px;
+        height: 14px;
+        color: var(--muted);
+      }
+
+      .event-icon svg {
+        width: 14px;
+        height: 14px;
+        display: block;
+      }
+
+      .event-name {
+        font-weight: 700;
+        color: var(--text);
+      }
+
       .schema-block {
         border-top: 1px solid var(--border);
         padding: 8px 0 2px;
@@ -497,15 +565,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 +596,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,10 +641,20 @@
           <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>
             </div>
@@ -564,7 +666,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>
@@ -582,10 +687,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',
@@ -614,7 +731,8 @@
         {
           id: 'types',
           label: 'types',
-          get: (leaf, schemaFlatByLeaf) => schemaTypeTokens(schemaFlatByLeaf?.[leaf.key]),
+          get: (leaf, schemaFlatByLeaf) =>
+            schemaTypeTokens(schemaFlatByLeaf?.[leaf.key]),
         },
         {
           id: 'params',
@@ -704,23 +822,23 @@
         {
           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),
         },
       ]
 
@@ -757,7 +875,9 @@
         },
         [VIEW_IDS.changelog]: {
           fieldDefs: CHANGELOG_TIMELINE_FIELDS,
-          defaultSelected: new Set(CHANGELOG_TIMELINE_FIELDS.map((field) => field.id)),
+          defaultSelected: new Set(
+            CHANGELOG_TIMELINE_FIELDS.map((field) => field.id),
+          ),
         },
       }
 
@@ -770,8 +890,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.leaves]: new Set(
+            TAB_CONFIG[VIEW_IDS.leaves].defaultSelected,
+          ),
+          [VIEW_IDS.changelog]: new Set(
+            TAB_CONFIG[VIEW_IDS.changelog].defaultSelected,
+          ),
         },
       }
 
@@ -780,7 +904,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')
@@ -807,7 +933,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
       }
@@ -919,7 +1047,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 []
@@ -958,7 +1087,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 []
@@ -1006,12 +1136,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')) {
@@ -1025,7 +1163,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())
@@ -1047,8 +1187,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())
@@ -1086,14 +1232,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
       }
@@ -1158,7 +1315,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
@@ -1194,7 +1356,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,
@@ -1208,8 +1374,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 = '') {
@@ -1226,7 +1395,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
@@ -1268,10 +1440,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)
         }
 
@@ -1292,7 +1467,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)
@@ -1313,7 +1494,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]
@@ -1322,7 +1504,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
@@ -1351,7 +1539,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)
         })
@@ -1378,7 +1568,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',
@@ -1388,10 +1580,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) {
@@ -1417,13 +1621,6 @@
         }
         content.appendChild(overview)
 
-        const fullConfig = el('div', 'section')
-        fullConfig.appendChild(el('h3', '', 'Configuration (full)'))
-        const cfgJson = el('pre', 'mono')
-        cfgJson.textContent = JSON.stringify(cfg, null, 2)
-        fullConfig.appendChild(cfgJson)
-        content.appendChild(fullConfig)
-
         const files = el('div', 'section')
         if (Array.isArray(cfg.bodyFiles) && cfg.bodyFiles.length > 0) {
           files.appendChild(el('h3', '', 'Body Files'))
@@ -1441,11 +1638,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)
         }
@@ -1453,12 +1661,22 @@
         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]),
+            (state.changelogPayload?.commits || []).map((commit, index) => [
+              commit.sha,
+              index,
+            ]),
+          )
+          const routeHistoryNewestFirst = sortEventsNewestFirst(
+            routeHistory,
+            commitBySha,
+            commitOrder,
           )
-          const routeHistoryNewestFirst = sortEventsNewestFirst(routeHistory, commitBySha, commitOrder)
           const routeChangelogSection = el('div', 'section')
           const routeChangelogDetails = el('details')
           const routeChangelogSummary = el(
@@ -1473,7 +1691,12 @@
 
           const routeChangelogBody = el('div', 'leaf-content')
           routeHistoryNewestFirst.forEach((event) => {
-            routeChangelogBody.appendChild(renderEventCard(event, commitBySha))
+            routeChangelogBody.appendChild(
+              renderEventCard(event, commitBySha, {
+                showTitle: true,
+                item: { eventKind: 'route', routeKey: leaf.key, event },
+              }),
+            )
           })
           routeChangelogDetails.appendChild(routeChangelogBody)
           routeChangelogSection.appendChild(routeChangelogDetails)
@@ -1525,18 +1748,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) {
+        const basePath = typeof path === 'string' ? path : ''
+        return basePath
+      }
+
+      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)
+            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)
+            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.path
+          return buildSchemaDiffLine(delta.op, beforeType, pathLabel, afterType)
         }
         return null
       }
@@ -1546,7 +1885,92 @@
         return `${diff.field}: ${JSON.stringify(diff.before)} -> ${JSON.stringify(diff.after)}`
       }
 
-      function renderEventCard(event, commitBySha) {
+      const EVENT_ICON_SVGS = {
+        route:
+          '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 13V3.5h11V13"/><path d="M8 3.5v9.5"/><path d="M5.5 6h.01M10.5 10h.01"/></svg>',
+        source:
+          '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="8" cy="3.5" rx="4.8" ry="2.2"/><path d="M3.2 3.5v7c0 1.2 2.1 2.2 4.8 2.2s4.8-1 4.8-2.2v-7"/><path d="M3.2 7c0 1.2 2.1 2.2 4.8 2.2s4.8-1 4.8-2.2"/></svg>',
+        schema:
+          '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.2L8 1.8l5.5 2.4L8 6.6 2.5 4.2Z"/><path d="M2.5 8L8 5.6 13.5 8 8 10.4 2.5 8Z"/><path d="M2.5 11.8 8 9.4l5.5 2.4L8 14.2l-5.5-2.4Z"/></svg>',
+        config:
+          '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4h12"/><path d="M2 8h12"/><path d="M2 12h12"/><circle cx="6" cy="4" r="1.6" fill="currentColor" stroke="none"/><circle cx="10.5" cy="8" r="1.6" fill="currentColor" stroke="none"/><circle cx="4.5" cy="12" r="1.6" fill="currentColor" stroke="none"/></svg>',
+      }
+
+      function eventVisualByType(type) {
+        switch (type) {
+          case 'route_added':
+            return { actionText: 'added', actionClass: 'event-action-added', icon: 'route' }
+          case 'route_removed':
+            return {
+              actionText: 'removed',
+              actionClass: 'event-action-removed',
+              icon: 'route',
+            }
+          case 'schema_changed':
+            return {
+              actionText: 'modified schema',
+              actionClass: 'event-action-modified',
+              icon: 'schema',
+            }
+          case 'cfg_changed':
+            return {
+              actionText: 'modified config',
+              actionClass: 'event-action-modified',
+              icon: 'config',
+            }
+          case 'source_object_added':
+            return { actionText: 'added', actionClass: 'event-action-added', icon: 'source' }
+          case 'source_object_removed':
+            return {
+              actionText: 'removed',
+              actionClass: 'event-action-removed',
+              icon: 'source',
+            }
+          case 'source_schema_changed':
+            return {
+              actionText: 'modified source object',
+              actionClass: 'event-action-modified',
+              icon: 'source',
+            }
+          default:
+            return {
+              actionText: 'modified',
+              actionClass: 'event-action-modified',
+              icon: 'schema',
+            }
+        }
+      }
+
+      function resolveEventName(item) {
+        if (!item || item.eventKind === 'source') {
+          return item?.displayName || item?.sourceObjectId || 'source object'
+        }
+        const method =
+          typeof item?.event?.method === 'string' ? item.event.method.trim() : ''
+        const path =
+          typeof item?.event?.path === 'string' ? item.event.path.trim() : ''
+        if (method && path) return `${method.toUpperCase()} ${path}`
+        if (path) return path
+        return item?.routeKey || 'route'
+      }
+
+      function renderEventIcon(iconType) {
+        const icon = el('span', `event-icon event-icon-${iconType}`)
+        icon.setAttribute('aria-hidden', 'true')
+        icon.innerHTML = EVENT_ICON_SVGS[iconType] || EVENT_ICON_SVGS.schema
+        return icon
+      }
+
+      function renderEventTitle(item) {
+        const row = el('div', 'event-title-row mono')
+        const visual = eventVisualByType(item?.event?.type)
+        row.appendChild(el('span', visual.actionClass, visual.actionText))
+        row.appendChild(renderEventIcon(visual.icon))
+        row.appendChild(el('span', 'event-name', `[${resolveEventName(item)}]`))
+        return row
+      }
+
+      function renderEventCard(event, commitBySha, options = {}) {
         const card = el('div', 'leaf-content')
         const commit = commitBySha.get(event.commitSha)
         const commitDateTime = formatCommitDateTime(commit?.authorDate)
@@ -1559,19 +1983,25 @@
           .filter(Boolean)
           .join(' - ')
         card.appendChild(el('div', 'meta', commitMeta))
-        card.appendChild(el('div', 'mono', event.type))
+        if (options.showTitle && options.item) {
+          card.appendChild(renderEventTitle(options.item))
+        }
         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)
@@ -1580,8 +2010,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
       }
@@ -1599,16 +2038,19 @@
           .join(' - ')
       }
 
-      function renderChangelogEventLines(event, commitBySha, contextLabel) {
+      function renderChangelogEventLines(item, commitBySha) {
+        const event = item.event
         const row = el('div', 'changelog-line-item')
-        row.appendChild(el('div', 'meta', buildCommitMetaLine(event, commitBySha)))
-        row.appendChild(el('div', 'mono', `${contextLabel} (${event.type})`))
+        row.appendChild(
+          el('div', 'meta', buildCommitMetaLine(event, commitBySha)),
+        )
+        row.appendChild(renderEventTitle(item))
 
         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) {
@@ -1618,9 +2060,16 @@
             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(', ')}`,
+            ),
           )
         }
 
@@ -1643,7 +2092,9 @@
         const indexB = commitOrder.get(b?.commitSha) ?? -1
         if (indexA !== indexB) return indexB - indexA
 
-        return String(b?.commitSha || '').localeCompare(String(a?.commitSha || ''))
+        return String(b?.commitSha || '').localeCompare(
+          String(a?.commitSha || ''),
+        )
       }
 
       function sortEventsNewestFirst(events, commitBySha, commitOrder) {
@@ -1654,8 +2105,12 @@
 
       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
 
@@ -1673,24 +2128,27 @@
           })
         })
 
-        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++,
+        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.commitSort !== b.commitSort) return b.commitSort - a.commitSort
-          if (a.commitIndex !== b.commitIndex) return b.commitIndex - a.commitIndex
+          if (a.commitIndex !== b.commitIndex)
+            return b.commitIndex - a.commitIndex
           return b.eventIndex - a.eventIndex
         })
 
@@ -1709,7 +2167,8 @@
       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))
         })
@@ -1728,8 +2187,14 @@
       function renderTabButtons() {
         setPressed(tabLeavesBtn, state.activeTab === VIEW_IDS.leaves)
         setPressed(tabChangelogBtn, state.activeTab === VIEW_IDS.changelog)
-        tabLeavesBtn.style.display = state.availableTabs.has(VIEW_IDS.leaves) ? '' : 'none'
-        tabChangelogBtn.style.display = state.availableTabs.has(VIEW_IDS.changelog) ? '' : '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'
@@ -1745,7 +2210,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,
@@ -1758,27 +2225,32 @@
         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))
+          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) => {
-                const contextLabel =
-                  item.eventKind === 'route'
-                    ? `Route: ${item.routeKey}`
-                    : `Source: ${item.displayName || item.sourceObjectId}`
-                return renderChangelogEventLines(item.event, commitBySha, contextLabel)
-              },
+              (item) => renderChangelogEventLines(item, commitBySha),
               'No matches.',
             )
           } else {
@@ -1786,9 +2258,15 @@
               filtered,
               (item) => {
                 const details = el('details', 'leaf')
-                const title = `${item.eventKind === 'route' ? `Route: ${item.routeKey}` : `Source: ${item.displayName || item.sourceObjectId}`} (${item.event.type})`
-                details.appendChild(el('summary', '', title))
-                details.appendChild(renderEventCard(item.event, commitBySha))
+                const summary = el('summary')
+                summary.appendChild(renderEventTitle(item))
+                details.appendChild(summary)
+                details.appendChild(
+                  renderEventCard(item.event, commitBySha, {
+                    showTitle: false,
+                    item,
+                  }),
+                )
                 return details
               },
               'No matches.',
@@ -1799,15 +2277,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
@@ -1815,7 +2295,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),
                 },
               ]
@@ -1854,7 +2337,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()
@@ -1866,7 +2351,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()
       }
 
@@ -1931,12 +2419,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) {
@@ -1953,10 +2445,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),
+            ]),
           ),
         }
       }
@@ -1965,7 +2461,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()
@@ -1975,7 +2473,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
 
@@ -1991,20 +2491,32 @@
           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.
@@ -2070,15 +2582,13 @@
         }
 
         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.'
         }
@@ -2104,7 +2614,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 = ''
         }
       })
@@ -2124,16 +2635,28 @@
         renderResults()
       })
 
-      tabLeavesBtn.addEventListener('click', () => setActiveTab(VIEW_IDS.leaves))
-      tabChangelogBtn.addEventListener('click', () => setActiveTab(VIEW_IDS.changelog))
+      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()