@emeryld/rrroutes-contract 2.7.3 → 2.7.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@emeryld/rrroutes-contract",
   "description": "TypeScript contract definitions for RRRoutes",
-  "version": "2.7.3",
+  "version": "2.7.5",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs",

package/tools/finalized-leaves-viewer.html

@@ -6,14 +6,15 @@
     <title>Finalized Leaves Viewer</title>
     <style>
       :root {
-        --bg: #f5f7fb;
+        --bg: #f6f8fc;
         --surface: #ffffff;
-        --surface-2: #f8faff;
-        --border: #d6ddea;
-        --text: #172033;
-        --muted: #5b6680;
+        --surface-2: #f1f4f9;
+        --border: #d9e0eb;
+        --text: #182033;
+        --muted: #64708b;
         --accent: #1858c6;
         --ok: #1f8f4e;
+        --danger: #d12b2b;
       }
 
       * {
@@ -24,8 +25,7 @@
         margin: 0;
         font-family: 'Iosevka Web', 'SFMono-Regular', Menlo, Consolas, monospace;
         color: var(--text);
-        background: radial-gradient(circle at top right, #eaf0ff, transparent 45%),
-          linear-gradient(180deg, var(--bg), #eef2fa);
+        background: var(--bg);
       }
 
       mark {
@@ -43,9 +43,9 @@
 
       .card {
         background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        padding: 14px;
+        border: 1px solid #e7ecf4;
+        border-radius: 6px;
+        padding: 12px;
       }
 
       .controls {
@@ -59,22 +59,41 @@
         gap: 8px;
       }
 
+      .field-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
       .field-item {
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        padding: 4px 8px;
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        background: var(--surface-2);
+        padding: 3px 0;
       }
 
-      input[type='text'] {
+      input[type='text'],
+      select {
         width: 100%;
         border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 10px 12px;
+        border-radius: 4px;
+        padding: 8px 10px;
+        font: inherit;
+        background: #fff;
+      }
+
+      button {
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        padding: 7px 10px;
         font: inherit;
+        background: #fff;
+        color: var(--text);
+        cursor: pointer;
+      }
+
+      button:hover {
+        background: var(--surface-2);
       }
 
       .meta {
@@ -85,14 +104,12 @@
       #results {
         margin-top: 14px;
         display: grid;
-        gap: 10px;
+        gap: 0;
       }
 
       details.leaf {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 10px;
-        padding: 8px 10px;
+        border-top: 1px solid var(--border);
+        padding: 10px 2px;
       }
 
       summary {
@@ -103,15 +120,13 @@
 
       .leaf-content {
         display: grid;
-        gap: 10px;
+        gap: 4px;
         margin-top: 10px;
       }
 
       .section {
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 10px;
-        background: #fbfcff;
+        border-top: 1px solid #e8edf5;
+        padding: 10px 0 2px;
       }
 
       .section h3 {
@@ -121,15 +136,19 @@
 
       .grid-2 {
         display: grid;
-        gap: 8px;
+        gap: 6px;
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       }
 
+      .grid-3 {
+        display: grid;
+        gap: 6px;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
       .kv {
-        border: 1px solid var(--border);
-        border-radius: 6px;
-        padding: 6px 8px;
-        background: white;
+        border-bottom: 1px dashed #e2e8f2;
+        padding: 4px 0 6px;
       }
 
       .kv .k {
@@ -148,12 +167,16 @@
         flex-wrap: wrap;
       }
 
+      .chips.filters {
+        margin-top: 2px;
+      }
+
       .chip {
-        border: 1px solid var(--border);
-        border-radius: 999px;
-        padding: 2px 8px;
+        border: 1px solid #e0e6f0;
+        border-radius: 4px;
+        padding: 2px 6px;
         font-size: 12px;
-        background: #fff;
+        background: #f6f8fc;
       }
 
       .chip.ok {
@@ -162,6 +185,30 @@
         background: #effbf4;
       }
 
+      .icon-row {
+        display: flex;
+        gap: 6px;
+        margin-top: 2px;
+      }
+
+      .icon-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        border: 1px solid #e0e6f0;
+        border-radius: 4px;
+        font-size: 11px;
+        background: #f6f8fc;
+      }
+
+      .icon-badge.warn {
+        border-color: #f2d5d5;
+        color: #a02424;
+        background: #fff4f4;
+      }
+
       .empty {
         color: var(--muted);
       }
@@ -171,11 +218,9 @@
       }
 
       .schema-block {
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        padding: 8px;
-        margin-bottom: 8px;
-        background: white;
+        border-top: 1px solid #e8edf5;
+        padding: 8px 0 2px;
+        margin-bottom: 6px;
       }
 
       .schema-block:last-child {
@@ -189,29 +234,51 @@
 
       .schema-tree details {
         margin-left: 12px;
-        border-left: 1px dashed var(--border);
+        border-left: 1px solid #e8edf5;
         padding-left: 8px;
       }
 
       .tree-row {
         display: grid;
-        grid-template-columns: 1fr auto auto auto;
+        grid-template-columns: 1fr auto;
         gap: 8px;
         padding: 3px 0;
         align-items: center;
       }
 
+      .schema-tree summary .tree-row {
+        display: inline-grid;
+        vertical-align: middle;
+      }
+
+      .tree-name {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 2px;
+      }
+
       .tree-col-muted {
         color: var(--muted);
         font-size: 12px;
       }
 
+      .required-star {
+        color: var(--danger);
+        font-weight: 700;
+      }
+
       .tree-pill {
-        border: 1px solid var(--border);
-        border-radius: 999px;
+        border: 1px solid #e0e6f0;
+        border-radius: 4px;
         padding: 1px 6px;
         font-size: 11px;
-        background: #f9fbff;
+        background: #f2f5fa;
+      }
+
+      @media (max-width: 720px) {
+        .grid-3 {
+          grid-template-columns: 1fr;
+        }
       }
     </style>
   </head>
@@ -238,9 +305,24 @@
             <input id="regexSearch" type="checkbox" />
             <span>regex</span>
           </label>
+          <label class="field-item">
+            <span>type match</span>
+            <select id="typeMatchMode">
+              <option value="contains" selected>contains</option>
+              <option value="exact">exact</option>
+            </select>
+          </label>
         </div>
 
         <div id="fieldCheckboxes" class="field-row"></div>
+        <div class="field-actions">
+          <button id="selectAllFields" type="button">Select all</button>
+          <button id="clearAllFields" type="button">Clear all</button>
+          <button id="schemasOnlyFields" type="button">Schemas only</button>
+          <button id="metadataOnlyFields" type="button">Metadata only</button>
+          <button id="resetFilters" type="button">Reset filters</button>
+        </div>
+        <div id="activeFilterChips" class="chips filters"></div>
 
         <div id="status" class="meta">Load a JSON export to begin.</div>
       </div>
@@ -264,15 +346,42 @@
         { 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: 'schemas', label: 'schemas', get: (leaf) => [leaf.cfg?.schemas] },
         {
-          id: 'flatSchema',
-          label: 'flatSchema',
-          get: (leaf, schemaFlatByLeaf) => [schemaFlatByLeaf?.[leaf.key]],
+          id: 'types',
+          label: 'types',
+          get: (leaf, schemaFlatByLeaf) => schemaTypeTokens(schemaFlatByLeaf?.[leaf.key]),
+        },
+        {
+          id: 'params',
+          label: 'params',
+          get: (leaf, schemaFlatByLeaf) =>
+            schemaSectionToSearchTokens(schemaFlatByLeaf?.[leaf.key], 'params'),
+        },
+        {
+          id: 'query',
+          label: 'query',
+          get: (leaf, schemaFlatByLeaf) =>
+            schemaSectionToSearchTokens(schemaFlatByLeaf?.[leaf.key], 'query'),
+        },
+        {
+          id: 'body',
+          label: 'body',
+          get: (leaf, schemaFlatByLeaf) =>
+            schemaSectionToSearchTokens(schemaFlatByLeaf?.[leaf.key], 'body'),
+        },
+        {
+          id: 'output',
+          label: 'output',
+          get: (leaf, schemaFlatByLeaf) =>
+            schemaSectionToSearchTokens(schemaFlatByLeaf?.[leaf.key], 'output'),
         },
       ]
 
       const SCHEMA_SECTIONS = ['params', 'query', 'body', 'output']
+      const SCHEMA_FIELD_IDS = new Set(SCHEMA_SECTIONS)
+      const METADATA_FIELD_IDS = new Set(
+        SEARCH_FIELDS.map((field) => field.id).filter((id) => !SCHEMA_FIELD_IDS.has(id)),
+      )
 
       const state = { payload: null, leaves: [] }
 
@@ -280,10 +389,20 @@
       const searchInput = document.getElementById('searchInput')
       const caseSensitiveInput = document.getElementById('caseSensitive')
       const regexSearchInput = document.getElementById('regexSearch')
+      const typeMatchModeInput = document.getElementById('typeMatchMode')
       const fieldCheckboxes = document.getElementById('fieldCheckboxes')
+      const activeFilterChips = document.getElementById('activeFilterChips')
+      const selectAllFieldsBtn = document.getElementById('selectAllFields')
+      const clearAllFieldsBtn = document.getElementById('clearAllFields')
+      const schemasOnlyFieldsBtn = document.getElementById('schemasOnlyFields')
+      const metadataOnlyFieldsBtn = document.getElementById('metadataOnlyFields')
+      const resetFiltersBtn = document.getElementById('resetFilters')
       const statusEl = document.getElementById('status')
       const resultsEl = document.getElementById('results')
 
+      const URL_PARAM_KEY = 'filters'
+      let isHydratingFromUrl = false
+
       function escapeHtml(value) {
         return String(value)
           .replace(/&/g, '&amp;')
@@ -305,6 +424,9 @@
         if (!query) {
           return {
             active: false,
+            query,
+            caseSensitive,
+            regex,
             error: null,
             test: () => true,
             highlight: (text) => escapeHtml(text ?? ''),
@@ -317,6 +439,9 @@
             const rx = new RegExp(query, flags)
             return {
               active: true,
+              query,
+              caseSensitive,
+              regex,
               error: null,
               test: (text) => {
                 const source = String(text ?? '')
@@ -334,6 +459,9 @@
           } catch (error) {
             return {
               active: true,
+              query,
+              caseSensitive,
+              regex,
               error: error instanceof Error ? error.message : 'Invalid regex',
               test: () => false,
               highlight: (text) => escapeHtml(text ?? ''),
@@ -347,6 +475,9 @@
 
         return {
           active: true,
+          query,
+          caseSensitive,
+          regex,
           error: null,
           test: (text) => {
             const source = String(text ?? '')
@@ -370,6 +501,62 @@
         return []
       }
 
+      function flatSchemaToSearchTokens(flatSchema) {
+        if (!flatSchema || typeof flatSchema !== 'object') return []
+
+        const tokens = new Set()
+
+        Object.entries(flatSchema).forEach(([path, info]) => {
+          if (path) {
+            tokens.add(path)
+            path.split('.').forEach((segment) => {
+              if (segment) tokens.add(segment)
+            })
+          }
+
+          if (info && typeof info === 'object') {
+            tokens.add(JSON.stringify(info))
+            if (info.type) tokens.add(String(info.type))
+            if (info.kind) tokens.add(String(info.kind))
+            if (info.description) tokens.add(String(info.description))
+            if (Array.isArray(info.enumValues)) {
+              info.enumValues.forEach((value) => tokens.add(String(value)))
+            }
+          } else if (info !== null && info !== undefined) {
+            tokens.add(String(info))
+          }
+        })
+
+        tokens.add(JSON.stringify(flatSchema))
+        return Array.from(tokens)
+      }
+
+      function schemaSectionToSearchTokens(flatSchema, sectionName) {
+        if (!flatSchema || typeof flatSchema !== 'object') return []
+        const sectionEntries = Object.entries(flatSchema).filter(
+          ([path]) => path === sectionName || path.startsWith(`${sectionName}.`),
+        )
+
+        if (sectionEntries.length === 0) return []
+        return flatSchemaToSearchTokens(Object.fromEntries(sectionEntries))
+      }
+
+      function schemaTypeTokens(flatSchema) {
+        if (!flatSchema || typeof flatSchema !== 'object') return []
+
+        const tokens = new Set()
+        Object.values(flatSchema).forEach((info) => {
+          if (!info || typeof info !== 'object') return
+          if (info.type) tokens.add(String(info.type))
+          if (info.kind) tokens.add(String(info.kind))
+          if (Array.isArray(info.enumValues)) {
+            info.enumValues.forEach((value) => tokens.add(String(value)))
+          }
+        })
+
+        return Array.from(tokens)
+      }
+
       function selectedFieldIds() {
         return SEARCH_FIELDS.filter((field) => {
           const input = document.getElementById(`field-${field.id}`)
@@ -385,6 +572,13 @@
         return SEARCH_FIELDS.some((field) => {
           if (!selectedIds.includes(field.id)) return false
           const tokens = toTokens(field.get(leaf, schemaFlatByLeaf))
+          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())
+            return normalized.includes(needle)
+          }
           return tokens.some((token) => engine.test(token))
         })
       }
@@ -492,6 +686,29 @@
         const childKeys = Object.keys(node.children)
         const hasChildren = childKeys.length > 0
         const hasInfo = Boolean(node.info)
+        const appendNameCell = (row) => {
+          const nameWrap = el('span', 'mono tree-name')
+          const nameNode = el('span')
+          setHighlighted(nameNode, node.name, engine)
+          nameWrap.appendChild(nameNode)
+
+          if (node.info && !node.info.optional) {
+            const star = el('span', 'required-star', '*')
+            nameWrap.appendChild(star)
+          }
+
+          if (node.info?.nullable) {
+            nameWrap.appendChild(el('span', 'tree-col-muted', '-'))
+          }
+
+          row.appendChild(nameWrap)
+        }
+
+        const appendTypeCell = (row, info) => {
+          const type = el('span', 'tree-pill')
+          setHighlighted(type, info?.type || info?.kind || '—', engine)
+          row.appendChild(type)
+        }
 
         if (isRoot || hasChildren) {
           const details = el('details')
@@ -499,21 +716,8 @@
           const summary = el('summary')
           const row = el('div', 'tree-row')
 
-          const nameNode = el('span', 'mono')
-          setHighlighted(nameNode, node.name, engine)
-          row.appendChild(nameNode)
-
-          if (hasInfo) {
-            const type = el('span', 'tree-pill')
-            setHighlighted(type, node.info.type, engine)
-            row.appendChild(type)
-            row.appendChild(el('span', 'tree-col-muted', node.info.optional ? 'optional' : 'required'))
-            row.appendChild(el('span', 'tree-col-muted', node.info.nullable ? 'nullable' : 'non-null'))
-          } else {
-            row.appendChild(el('span'))
-            row.appendChild(el('span'))
-            row.appendChild(el('span'))
-          }
+          appendNameCell(row)
+          appendTypeCell(row, hasInfo ? node.info : null)
 
           summary.appendChild(row)
           details.appendChild(summary)
@@ -527,43 +731,37 @@
         }
 
         const row = el('div', 'tree-row')
-        const nameNode = el('span', 'mono')
-        setHighlighted(nameNode, node.name, engine)
-        row.appendChild(nameNode)
-
-        const type = el('span', 'tree-pill')
-        setHighlighted(type, node.info ? node.info.type : '—', engine)
-        row.appendChild(type)
-        row.appendChild(el('span', 'tree-col-muted', node.info?.optional ? 'optional' : 'required'))
-        row.appendChild(el('span', 'tree-col-muted', node.info?.nullable ? 'nullable' : 'non-null'))
+        appendNameCell(row)
+        appendTypeCell(row, node.info)
 
         return row
       }
 
       function renderSeparatedSchemas(flatSchema, engine) {
+        if (!flatSchema || typeof flatSchema !== 'object') return null
         const section = el('div', 'section')
         section.appendChild(el('h3', '', 'Schemas (separated by section)'))
 
         const grouped = splitFlatSchemaBySection(flatSchema)
+        let hasAnySchemaEntries = false
 
         SCHEMA_SECTIONS.forEach((sectionName) => {
+          const entries = grouped[sectionName]
+          if (!entries || Object.keys(entries).length === 0) return
+
+          hasAnySchemaEntries = true
           const block = el('div', 'schema-block')
           const header = el('div', 'schema-header mono')
           setHighlighted(header, sectionName, engine)
           block.appendChild(header)
 
-          const entries = grouped[sectionName]
-          if (!entries || Object.keys(entries).length === 0) {
-            block.appendChild(el('div', 'empty', 'No entries'))
-          } else {
-            const tree = buildSchemaTree(entries, sectionName)
-            block.appendChild(renderTreeNode(tree, engine, true))
-          }
+          const tree = buildSchemaTree(entries, sectionName)
+          block.appendChild(renderTreeNode(tree, engine, true))
 
           section.appendChild(block)
         })
 
-        return section
+        return hasAnySchemaEntries ? section : null
       }
 
       function renderLeaf(leaf, engine) {
@@ -578,60 +776,43 @@
 
         const overview = el('div', 'section')
         overview.appendChild(el('h3', '', 'Overview'))
-        const grid = el('div', 'grid-2')
-        grid.appendChild(kv('key', leaf.key, engine))
-        grid.appendChild(kv('method', leaf.method, engine))
-        grid.appendChild(kv('path', leaf.path, engine))
-        grid.appendChild(kv('group', cfg.docsGroup, engine))
-        grid.appendChild(kv('stability', cfg.stability, engine))
-        grid.appendChild(kv('feed', cfg.feed ? 'true' : 'false', engine))
-        grid.appendChild(kv('deprecated', cfg.deprecated ? 'true' : 'false', engine))
-        grid.appendChild(kv('hidden', cfg.docsHidden ? 'true' : 'false', engine))
-        overview.appendChild(grid)
-        content.appendChild(overview)
-
-        const docs = el('div', 'section')
-        docs.appendChild(el('h3', '', 'Documentation'))
-        const docGrid = el('div', 'grid-2')
-        docGrid.appendChild(kv('summary', cfg.summary, engine))
-        docGrid.appendChild(kv('description', cfg.description, engine))
-        docs.appendChild(docGrid)
-
-        const tagsRow = el('div', 'chips')
-        ;(cfg.tags || []).forEach((tag) => {
-          const chip = el('span', 'chip')
-          setHighlighted(chip, tag, engine)
-          tagsRow.appendChild(chip)
-        })
-        if ((cfg.tags || []).length === 0) {
-          tagsRow.appendChild(el('span', 'empty', 'No tags'))
+        const topGrid = el('div', 'grid-3')
+        topGrid.appendChild(kv('group', cfg.docsGroup, engine))
+        topGrid.appendChild(
+          kv('tags', cfg.tags && cfg.tags.length > 0 ? cfg.tags.join(', ') : undefined, engine),
+        )
+        topGrid.appendChild(kv('stability', cfg.stability, engine))
+        overview.appendChild(topGrid)
+        overview.appendChild(kv('summary', cfg.summary, engine))
+        overview.appendChild(kv('description', cfg.description, engine))
+
+        const iconRow = el('div', 'icon-row')
+        if (cfg.feed) {
+          const feed = el('span', 'icon-badge')
+          feed.title = 'Feed'
+          setHighlighted(feed, 'F', engine)
+          iconRow.appendChild(feed)
         }
-        docs.appendChild(tagsRow)
-
-        if (cfg.docsMeta && Object.keys(cfg.docsMeta).length > 0) {
-          Object.entries(cfg.docsMeta).forEach(([k, v]) => {
-            docs.appendChild(kv(`meta.${k}`, typeof v === 'string' ? v : JSON.stringify(v), engine))
-          })
+        if (cfg.deprecated) {
+          const deprecated = el('span', 'icon-badge warn')
+          deprecated.title = 'Deprecated'
+          setHighlighted(deprecated, 'D', engine)
+          iconRow.appendChild(deprecated)
         }
-
-        content.appendChild(docs)
-
-        const schemas = el('div', 'section')
-        schemas.appendChild(el('h3', '', 'Schema Summaries'))
-        const schemaGrid = el('div', 'grid-2')
-        const schemaObj = cfg.schemas || {}
-        schemaGrid.appendChild(renderSchemaSummary('params', schemaObj.params, engine))
-        schemaGrid.appendChild(renderSchemaSummary('query', schemaObj.query, engine))
-        schemaGrid.appendChild(renderSchemaSummary('body', schemaObj.body, engine))
-        schemaGrid.appendChild(renderSchemaSummary('output', schemaObj.output, engine))
-        schemaGrid.appendChild(renderSchemaSummary('outputMeta', schemaObj.outputMeta, engine))
-        schemaGrid.appendChild(renderSchemaSummary('queryExtension', schemaObj.queryExtension, engine))
-        schemas.appendChild(schemaGrid)
-        content.appendChild(schemas)
+        if (cfg.docsHidden) {
+          const hidden = el('span', 'icon-badge warn')
+          hidden.title = 'Hidden'
+          setHighlighted(hidden, 'H', engine)
+          iconRow.appendChild(hidden)
+        }
+        if (iconRow.childNodes.length > 0) {
+          overview.appendChild(iconRow)
+        }
+        content.appendChild(overview)
 
         const files = el('div', 'section')
-        files.appendChild(el('h3', '', 'Body Files'))
         if (Array.isArray(cfg.bodyFiles) && cfg.bodyFiles.length > 0) {
+          files.appendChild(el('h3', '', 'Body Files'))
           const chips = el('div', 'chips')
           cfg.bodyFiles.forEach((file) => {
             const chip = el('span', 'chip ok')
@@ -639,12 +820,13 @@
             chips.appendChild(chip)
           })
           files.appendChild(chips)
-        } else {
-          files.appendChild(el('div', 'empty', 'No file upload fields.'))
+          content.appendChild(files)
         }
-        content.appendChild(files)
 
-        content.appendChild(renderSeparatedSchemas(flatSchema, engine))
+        const separatedSchemas = renderSeparatedSchemas(flatSchema, engine)
+        if (separatedSchemas) {
+          content.appendChild(separatedSchemas)
+        }
 
         details.appendChild(content)
         return details
@@ -660,6 +842,10 @@
           statusEl.textContent = `Invalid regex: ${engine.error}`
           resultsEl.innerHTML = ''
           resultsEl.appendChild(el('div', 'empty', 'Fix the regex to continue.'))
+          renderActiveFilterChips({
+            selectedIds: selectedFieldIds(),
+            hasRegexError: true,
+          })
           return
         }
 
@@ -668,15 +854,18 @@
 
         statusEl.textContent = `${filtered.length} / ${state.leaves.length} routes matched.`
         resultsEl.innerHTML = ''
+        renderActiveFilterChips({ selectedIds, hasRegexError: false })
 
         if (filtered.length === 0) {
           resultsEl.appendChild(el('div', 'empty', 'No matches.'))
+          syncFilterStateToUrl()
           return
         }
 
         filtered.forEach((leaf) => {
           resultsEl.appendChild(renderLeaf(leaf, engine))
         })
+        syncFilterStateToUrl()
       }
 
       function renderFieldCheckboxes() {
@@ -694,6 +883,105 @@
         })
       }
 
+      function setFieldSelection(allowedIds) {
+        SEARCH_FIELDS.forEach((field) => {
+          const input = document.getElementById(`field-${field.id}`)
+          if (!input) return
+          input.checked = allowedIds.has(field.id)
+        })
+        renderResults()
+      }
+
+      function resetFiltersToDefault() {
+        searchInput.value = ''
+        caseSensitiveInput.checked = false
+        regexSearchInput.checked = false
+        typeMatchModeInput.value = 'contains'
+        setFieldSelection(new Set(SEARCH_FIELDS.map((field) => field.id)))
+      }
+
+      function renderActiveFilterChips({ selectedIds, hasRegexError }) {
+        activeFilterChips.innerHTML = ''
+        const chips = []
+
+        const searchValue = searchInput.value.trim()
+
+        if (searchValue) chips.push(`search: ${searchValue}`)
+        if (typeMatchModeInput.value === 'exact') chips.push('type mode: exact')
+        if (caseSensitiveInput.checked) chips.push('case sensitive')
+        if (regexSearchInput.checked) chips.push('regex')
+        if (hasRegexError) chips.push('regex error')
+
+        const allIds = SEARCH_FIELDS.map((field) => field.id)
+        if (selectedIds.length !== allIds.length) {
+          chips.push(`fields: ${selectedIds.join(', ') || 'none'}`)
+        }
+
+        if (chips.length === 0) {
+          activeFilterChips.appendChild(el('span', 'empty', 'No active filters'))
+          return
+        }
+
+        chips.forEach((chipText) => {
+          const chip = el('span', 'chip')
+          chip.textContent = chipText
+          activeFilterChips.appendChild(chip)
+        })
+      }
+
+      function collectFilterState() {
+        return {
+          search: searchInput.value,
+          caseSensitive: caseSensitiveInput.checked,
+          regex: regexSearchInput.checked,
+          typeMatchMode: typeMatchModeInput.value === 'exact' ? 'exact' : 'contains',
+          selectedFields: selectedFieldIds(),
+        }
+      }
+
+      function syncFilterStateToUrl() {
+        if (isHydratingFromUrl) return
+
+        const data = collectFilterState()
+        const params = new URLSearchParams(window.location.hash.replace(/^#/, ''))
+        const serialized = encodeURIComponent(JSON.stringify(data))
+        params.set(URL_PARAM_KEY, serialized)
+        const nextHash = params.toString()
+        if (window.location.hash !== `#${nextHash}`) {
+          window.location.hash = nextHash
+        }
+      }
+
+      function hydrateFilterStateFromUrl() {
+        const params = new URLSearchParams(window.location.hash.replace(/^#/, ''))
+        const raw = params.get(URL_PARAM_KEY)
+        if (!raw) return
+
+        try {
+          const parsed = JSON.parse(decodeURIComponent(raw))
+          isHydratingFromUrl = true
+          if (typeof parsed.search === 'string') searchInput.value = parsed.search
+          caseSensitiveInput.checked = Boolean(parsed.caseSensitive)
+          regexSearchInput.checked = Boolean(parsed.regex)
+          if (parsed.typeMatchMode === 'exact' || parsed.typeMatchMode === 'contains') {
+            typeMatchModeInput.value = parsed.typeMatchMode
+          }
+
+          if (Array.isArray(parsed.selectedFields)) {
+            const allowed = new Set(parsed.selectedFields)
+            SEARCH_FIELDS.forEach((field) => {
+              const input = document.getElementById(`field-${field.id}`)
+              if (!input) return
+              input.checked = allowed.has(field.id)
+            })
+          }
+        } catch (error) {
+          // Ignore malformed hash state.
+        } finally {
+          isHydratingFromUrl = false
+        }
+      }
+
       async function handleFile(file) {
         const text = await file.text()
         const parsed = JSON.parse(text)
@@ -731,9 +1019,20 @@
       searchInput.addEventListener('input', renderResults)
       caseSensitiveInput.addEventListener('change', renderResults)
       regexSearchInput.addEventListener('change', renderResults)
+      typeMatchModeInput.addEventListener('change', renderResults)
+
+      selectAllFieldsBtn.addEventListener('click', () =>
+        setFieldSelection(new Set(SEARCH_FIELDS.map((field) => field.id))),
+      )
+      clearAllFieldsBtn.addEventListener('click', () => setFieldSelection(new Set()))
+      schemasOnlyFieldsBtn.addEventListener('click', () => setFieldSelection(SCHEMA_FIELD_IDS))
+      metadataOnlyFieldsBtn.addEventListener('click', () => setFieldSelection(METADATA_FIELD_IDS))
+      resetFiltersBtn.addEventListener('click', resetFiltersToDefault)
 
       renderFieldCheckboxes()
+      hydrateFilterStateFromUrl()
       initializeFromBakedPayload()
+      renderResults()
     </script>
   </body>
 </html>