@emeryld/rrroutes-contract 2.7.11 → 2.7.13

package/tools/finalized-leaves-viewer.html

@@ -50,22 +50,68 @@
       }
 
       .controls {
+        display: grid;
+        gap: 14px;
+      }
+
+      .primary-row {
         display: grid;
         gap: 10px;
+        grid-template-columns: minmax(220px, 0.9fr) minmax(300px, 1.4fr) minmax(220px, 1fr);
+        align-items: end;
+      }
+
+      .control-block {
+        display: grid;
+        gap: 6px;
+      }
+
+      .control-label {
+        font-size: 12px;
+        color: var(--muted);
       }
 
-      .field-row {
+      .quick-toggles {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
+        align-items: center;
+      }
+
+      .scope-row {
+        border-top: 1px solid var(--border);
+        padding-top: 12px;
+        display: grid;
+        gap: 10px;
       }
 
-      .field-actions {
+      .scope-actions {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
       }
 
+      .scope-groups {
+        display: grid;
+        gap: 10px;
+      }
+
+      .scope-group {
+        display: grid;
+        gap: 6px;
+      }
+
+      .scope-group-title {
+        font-size: 12px;
+        color: var(--muted);
+      }
+
+      .scope-group-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+      }
+
       .field-item {
         display: inline-flex;
         align-items: center;
@@ -86,7 +132,7 @@
 
       button {
         border: 1px solid var(--border);
-        border-radius: 4px;
+        border-radius: 6px;
         padding: 7px 10px;
         font: inherit;
         background: var(--surface-2);
@@ -190,12 +236,82 @@
         background: var(--surface-2);
       }
 
+      .chip-btn {
+        cursor: pointer;
+      }
+
       .chip.ok {
         border-color: #b5e4c8;
         color: var(--ok);
         background: #effbf4;
       }
 
+      .pill-toggle {
+        border: 1px solid var(--border);
+        border-radius: 999px;
+        padding: 6px 12px;
+        font-size: 12px;
+        background: var(--surface-2);
+        color: var(--text);
+      }
+
+      .pill-toggle[aria-pressed='true'] {
+        border-color: var(--accent);
+        background: rgba(167, 100, 211, 0.25);
+        color: #f0d8ff;
+      }
+
+      .scope-action {
+        font-size: 12px;
+        padding: 5px 10px;
+      }
+
+      .field-chip {
+        font-size: 12px;
+        padding: 5px 10px;
+        border-radius: 999px;
+      }
+
+      .field-chip[aria-pressed='true'] {
+        border-color: var(--schema-accent);
+        background: rgba(251, 189, 35, 0.22);
+        color: #ffe7aa;
+      }
+
+      .advanced-panel {
+        border-top: 1px solid var(--border);
+        padding-top: 10px;
+      }
+
+      .advanced-panel > summary {
+        color: var(--text);
+        font-size: 13px;
+      }
+
+      .advanced-content {
+        margin-top: 10px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+      }
+
+      .advanced-content .field-item {
+        padding: 0;
+      }
+
+      .active-filters-row {
+        border-top: 1px solid var(--border);
+        padding-top: 10px;
+        display: grid;
+        gap: 6px;
+      }
+
+      .active-filters-title {
+        color: var(--muted);
+        font-size: 12px;
+      }
+
       .icon-row {
         display: flex;
         gap: 6px;
@@ -214,6 +330,16 @@
         background: var(--surface-2);
       }
 
+      .icon-badge.feed {
+        width: auto;
+        min-width: 46px;
+        padding: 2px 8px;
+        font-weight: 700;
+        border-color: var(--schema-accent);
+        color: var(--schema-accent);
+        background: rgba(251, 189, 35, 0.15);
+      }
+
       .icon-badge.warn {
         border-color: #f2d5d5;
         color: #a02424;
@@ -329,6 +455,11 @@
       }
 
       @media (max-width: 720px) {
+        .primary-row {
+          grid-template-columns: 1fr;
+          align-items: stretch;
+        }
+
         .grid-3 {
           grid-template-columns: 1fr;
         }
@@ -339,47 +470,65 @@
     <div class="wrap">
       <h1>Finalized Leaves Viewer</h1>
       <div class="card controls">
-        <label>
-          Load export JSON file:
-          <input id="fileInput" type="file" accept="application/json,.json" />
-        </label>
-
-        <label>
-          Search text:
-          <input id="searchInput" type="text" placeholder="Type to search..." />
-        </label>
-
-        <div class="field-row">
-          <label class="field-item">
-            <input id="caseSensitive" type="checkbox" />
-            <span>case sensitive</span>
-          </label>
-          <label class="field-item">
-            <input id="regexSearch" type="checkbox" />
-            <span>regex</span>
+        <div class="primary-row">
+          <label class="control-block">
+            <span class="control-label">Load export JSON file</span>
+            <input id="fileInput" type="file" accept="application/json,.json" />
           </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>
-          <label class="field-item">
-            <input id="schemaRowsMatchOnly" type="checkbox" />
-            <span>schema rows match filter</span>
+          <label class="control-block">
+            <span class="control-label">Search text</span>
+            <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">
+                Case sensitive
+              </button>
+              <button id="regexSearch" class="pill-toggle" type="button" aria-pressed="false">
+                Regex
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <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>
+          </div>
+          <div id="fieldChipGroups" class="scope-groups"></div>
         </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>
+        <details class="advanced-panel">
+          <summary>Advanced filters</summary>
+          <div class="advanced-content">
+            <label class="field-item">
+              <span>type match</span>
+              <select id="typeMatchMode">
+                <option value="contains" selected>contains</option>
+                <option value="exact">exact</option>
+              </select>
+            </label>
+            <button
+              id="schemaRowsMatchOnly"
+              class="pill-toggle"
+              type="button"
+              aria-pressed="false"
+            >
+              Schema rows match only
+            </button>
+            <button id="resetFilters" type="button">Reset filters</button>
+          </div>
+        </details>
+
+        <div class="active-filters-row">
+          <div class="active-filters-title">Active filters</div>
+          <div id="activeFilterChips" class="chips filters"></div>
         </div>
-        <div id="activeFilterChips" class="chips filters"></div>
 
         <div id="status" class="meta">Load a JSON export to begin.</div>
       </div>
@@ -461,24 +610,56 @@
 
       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 SOURCE_FIELD_IDS = new Set(['sourceDefinition', 'sourceSchemas'])
+      const SCHEMA_SCOPE_FIELD_IDS = new Set([...SCHEMA_SECTIONS, 'types'])
+      const CORE_FIELD_IDS = new Set(
+        SEARCH_FIELDS.map((field) => field.id).filter(
+          (id) => !SCHEMA_SCOPE_FIELD_IDS.has(id) && !SOURCE_FIELD_IDS.has(id),
+        ),
       )
+      const FIELD_GROUPS = [
+        {
+          id: 'core',
+          label: 'Core fields',
+          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,
+          ),
+        },
+        {
+          id: 'source',
+          label: 'Source fields',
+          fieldIds: SEARCH_FIELDS.filter((field) => SOURCE_FIELD_IDS.has(field.id)).map(
+            (field) => field.id,
+          ),
+        },
+      ]
 
-      const state = { payload: null, leaves: [] }
+      const state = {
+        payload: null,
+        leaves: [],
+        selectedFieldIds: new Set(SEARCH_FIELDS.map((field) => field.id)),
+      }
 
       const fileInput = document.getElementById('fileInput')
       const searchInput = document.getElementById('searchInput')
-      const caseSensitiveInput = document.getElementById('caseSensitive')
-      const regexSearchInput = document.getElementById('regexSearch')
+      const caseSensitiveToggle = document.getElementById('caseSensitive')
+      const regexSearchToggle = document.getElementById('regexSearch')
       const typeMatchModeInput = document.getElementById('typeMatchMode')
-      const schemaRowsMatchOnlyInput = document.getElementById('schemaRowsMatchOnly')
-      const fieldCheckboxes = document.getElementById('fieldCheckboxes')
+      const schemaRowsMatchOnlyToggle = document.getElementById('schemaRowsMatchOnly')
+      const fieldChipGroups = document.getElementById('fieldChipGroups')
       const activeFilterChips = document.getElementById('activeFilterChips')
       const selectAllFieldsBtn = document.getElementById('selectAllFields')
       const clearAllFieldsBtn = document.getElementById('clearAllFields')
+      const coreFieldsBtn = document.getElementById('coreFields')
       const schemasOnlyFieldsBtn = document.getElementById('schemasOnlyFields')
-      const metadataOnlyFieldsBtn = document.getElementById('metadataOnlyFields')
+      const sourceOnlyFieldsBtn = document.getElementById('sourceOnlyFields')
       const resetFiltersBtn = document.getElementById('resetFilters')
       const statusEl = document.getElementById('status')
       const resultsEl = document.getElementById('results')
@@ -499,6 +680,21 @@
         return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
       }
 
+      function isPressed(button) {
+        return button?.getAttribute('aria-pressed') === 'true'
+      }
+
+      function setPressed(button, pressed) {
+        if (!button) return
+        button.setAttribute('aria-pressed', pressed ? 'true' : 'false')
+      }
+
+      function togglePressed(button) {
+        const next = !isPressed(button)
+        setPressed(button, next)
+        return next
+      }
+
       function createSearchEngine(queryRaw, options) {
         const query = queryRaw || ''
         const caseSensitive = Boolean(options.caseSensitive)
@@ -697,13 +893,6 @@
         return matched
       }
 
-      function selectedFieldIds() {
-        return SEARCH_FIELDS.filter((field) => {
-          const input = document.getElementById(`field-${field.id}`)
-          return Boolean(input && input.checked)
-        }).map((field) => field.id)
-      }
-
       function matchesLeaf(leaf, engine, selectedIds) {
         if (!engine.active) return true
         if (selectedIds.length === 0) return false
@@ -789,34 +978,24 @@
         return `vscode://file/${encodeURI(vscodePath)}:${line}:${column}`
       }
 
-      function sourceDisplay(source) {
-        return ''
-      }
-
-      function createSourceRow(key, source, engine) {
+      function createSourceRow(label, source, engine) {
         const box = el('div', 'kv')
-        const keyNode = el('div', 'k')
-        const valueNode = el('div', 'v mono')
+        const labelNode = el('div', 'v mono')
 
         if (!source || !source.file) {
-          setHighlighted(keyNode, key, engine)
-          box.appendChild(keyNode)
-          setHighlighted(valueNode, '—', engine)
-          box.appendChild(valueNode)
+          setHighlighted(labelNode, label, engine)
+          box.appendChild(labelNode)
           return box
         }
 
         const href = sourceHref(source)
-        const keyLink = document.createElement('a')
-        keyLink.href = href
-        keyLink.target = '_blank'
-        keyLink.rel = 'noopener noreferrer'
-        keyLink.innerHTML = engine.highlight(key)
-        keyNode.appendChild(keyLink)
-
-        setHighlighted(valueNode, sourceDisplay(source), engine)
-        box.appendChild(keyNode)
-        box.appendChild(valueNode)
+        const link = document.createElement('a')
+        link.href = href
+        link.target = '_blank'
+        link.rel = 'noopener noreferrer'
+        link.innerHTML = engine.highlight(label)
+        labelNode.appendChild(link)
+        box.appendChild(labelNode)
         return box
       }
 
@@ -841,6 +1020,33 @@
         return result
       }
 
+      const SCHEMA_SOURCE_KEYS_BY_SECTION = {
+        params: 'paramsSchema',
+        query: 'querySchema',
+        body: 'bodySchema',
+        output: 'outputSchema',
+      }
+
+      function getSchemaSource(source, sectionName) {
+        const schemaKey = SCHEMA_SOURCE_KEYS_BY_SECTION[sectionName]
+        if (!schemaKey || !source?.schemas || typeof source.schemas !== 'object') {
+          return {
+            schemaKey,
+            sourceValue: undefined,
+          }
+        }
+
+        return {
+          schemaKey,
+          sourceValue: source.schemas[schemaKey],
+        }
+      }
+
+      function resolveSchemaSourceLabel(schemaKey, sourceValue) {
+        if (!sourceValue || typeof sourceValue !== 'object') return schemaKey || 'schema'
+        return sourceValue.sourceName || sourceValue.tag || schemaKey || 'schema'
+      }
+
       function createTreeNode(name = '') {
         return {
           name,
@@ -928,14 +1134,14 @@
         return row
       }
 
-      function renderSeparatedSchemas(flatSchema, engine, selectedIds) {
+      function renderSeparatedSchemas(flatSchema, engine, selectedIds, source) {
         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
-        const limitToMatchedRows = schemaRowsMatchOnlyInput.checked && engine.active
+        const limitToMatchedRows = isPressed(schemaRowsMatchOnlyToggle) && engine.active
 
         SCHEMA_SECTIONS.forEach((sectionName) => {
           const rawEntries = grouped[sectionName]
@@ -956,6 +1162,20 @@
           setHighlighted(header, sectionName, engine)
           block.appendChild(header)
 
+          const schemaSource = getSchemaSource(source, sectionName)
+          if (schemaSource.sourceValue) {
+            block.appendChild(
+              createSourceRow(
+                resolveSchemaSourceLabel(
+                  schemaSource.schemaKey || `${sectionName}Schema`,
+                  schemaSource.sourceValue,
+                ),
+                schemaSource.sourceValue,
+                engine,
+              ),
+            )
+          }
+
           const tree = buildSchemaTree(entries, sectionName)
           block.appendChild(renderTreeNode(tree, engine, true))
 
@@ -989,9 +1209,9 @@
 
         const iconRow = el('div', 'icon-row')
         if (cfg.feed) {
-          const feed = el('span', 'icon-badge')
-          feed.title = 'Feed'
-          setHighlighted(feed, 'F', engine)
+          const feed = el('span', 'icon-badge feed')
+          feed.title = 'Feed endpoint'
+          setHighlighted(feed, 'Feed', engine)
           iconRow.appendChild(feed)
         }
         if (cfg.deprecated) {
@@ -1026,30 +1246,11 @@
 
         const sourceByLeaf = state.payload?.sourceByLeaf || {}
         const source = sourceByLeaf[leaf.key]
-        if (source) {
-          const sourceSection = el('div', 'section')
-          sourceSection.appendChild(el('h3', '', 'Source'))
-          sourceSection.appendChild(createSourceRow('definition', source.definition, engine))
-
-          const schemaSources = source.schemas || {}
-          const schemaEntries = Object.entries(schemaSources)
-          if (schemaEntries.length > 0) {
-            const schemaGrid = el('div', 'grid-2')
-            schemaEntries.forEach(([schemaName, schemaSource]) => {
-              const display = schemaSource?.sourceName
-                ? `${schemaName}: ${schemaSource.sourceName}`
-                : schemaSource?.tag
-                  ? `${schemaName}: ${schemaSource.tag}`
-                  : schemaName
-              schemaGrid.appendChild(createSourceRow(display, schemaSource, engine))
-            })
-            sourceSection.appendChild(schemaGrid)
-          }
-
-          content.appendChild(sourceSection)
+        if (source?.definition) {
+          overview.appendChild(createSourceRow('definition', source.definition, engine))
         }
 
-        const separatedSchemas = renderSeparatedSchemas(flatSchema, engine, selectedIds)
+        const separatedSchemas = renderSeparatedSchemas(flatSchema, engine, selectedIds, source)
         if (separatedSchemas) {
           content.appendChild(separatedSchemas)
         }
@@ -1060,8 +1261,8 @@
 
       function renderResults() {
         const engine = createSearchEngine(searchInput.value.trim(), {
-          caseSensitive: caseSensitiveInput.checked,
-          regex: regexSearchInput.checked,
+          caseSensitive: isPressed(caseSensitiveToggle),
+          regex: isPressed(regexSearchToggle),
         })
 
         if (engine.error) {
@@ -1094,65 +1295,136 @@
         syncFilterStateToUrl()
       }
 
-      function renderFieldCheckboxes() {
-        fieldCheckboxes.innerHTML = ''
-        SEARCH_FIELDS.forEach((field) => {
-          const label = el('label', 'field-item')
-          const input = document.createElement('input')
-          input.type = 'checkbox'
-          input.id = `field-${field.id}`
-          input.checked = true
-          input.addEventListener('change', renderResults)
-          label.appendChild(input)
-          label.appendChild(el('span', '', field.label))
-          fieldCheckboxes.appendChild(label)
-        })
+      function selectedFieldIds() {
+        return SEARCH_FIELDS.filter((field) => state.selectedFieldIds.has(field.id)).map(
+          (field) => field.id,
+        )
       }
 
-      function setFieldSelection(allowedIds) {
-        SEARCH_FIELDS.forEach((field) => {
-          const input = document.getElementById(`field-${field.id}`)
-          if (!input) return
-          input.checked = allowedIds.has(field.id)
+      function renderFieldChips() {
+        fieldChipGroups.innerHTML = ''
+        FIELD_GROUPS.forEach((group) => {
+          const groupWrap = el('div', 'scope-group')
+          groupWrap.appendChild(el('div', 'scope-group-title', group.label))
+          const chipsWrap = el('div', 'scope-group-chips')
+
+          group.fieldIds.forEach((fieldId) => {
+            const field = SEARCH_FIELDS.find((item) => item.id === fieldId)
+            if (!field) return
+            const chip = document.createElement('button')
+            chip.type = 'button'
+            chip.className = 'field-chip'
+            chip.textContent = field.label
+            setPressed(chip, state.selectedFieldIds.has(field.id))
+            chip.addEventListener('click', () => {
+              if (state.selectedFieldIds.has(field.id)) {
+                state.selectedFieldIds.delete(field.id)
+              } else {
+                state.selectedFieldIds.add(field.id)
+              }
+              renderFieldChips()
+              renderResults()
+            })
+            chipsWrap.appendChild(chip)
+          })
+
+          groupWrap.appendChild(chipsWrap)
+          fieldChipGroups.appendChild(groupWrap)
         })
-        renderResults()
+      }
+
+      function setFieldSelection(allowedIds, options = {}) {
+        const { rerender = true } = options
+        state.selectedFieldIds = new Set(
+          SEARCH_FIELDS.map((field) => field.id).filter((id) => allowedIds.has(id)),
+        )
+        renderFieldChips()
+        if (rerender) renderResults()
       }
 
       function resetFiltersToDefault() {
         searchInput.value = ''
-        caseSensitiveInput.checked = false
-        regexSearchInput.checked = false
+        setPressed(caseSensitiveToggle, false)
+        setPressed(regexSearchToggle, false)
         typeMatchModeInput.value = 'contains'
-        schemaRowsMatchOnlyInput.checked = false
-        setFieldSelection(new Set(SEARCH_FIELDS.map((field) => field.id)))
+        setPressed(schemaRowsMatchOnlyToggle, false)
+        setFieldSelection(new Set(SEARCH_FIELDS.map((field) => field.id)), { rerender: false })
+        renderResults()
       }
 
       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 (schemaRowsMatchOnlyInput.checked) chips.push('schema rows: matched only')
-        if (caseSensitiveInput.checked) chips.push('case sensitive')
-        if (regexSearchInput.checked) chips.push('regex')
-        if (hasRegexError) chips.push('regex error')
+        const chipModels = []
+
+        if (searchValue) {
+          chipModels.push({
+            text: `search: ${searchValue}`,
+            onClick: () => {
+              searchInput.value = ''
+              renderResults()
+            },
+          })
+        }
+        if (typeMatchModeInput.value === 'exact') {
+          chipModels.push({
+            text: 'type mode: exact',
+            onClick: () => {
+              typeMatchModeInput.value = 'contains'
+              renderResults()
+            },
+          })
+        }
+        if (isPressed(schemaRowsMatchOnlyToggle)) {
+          chipModels.push({
+            text: 'schema rows: matched only',
+            onClick: () => {
+              setPressed(schemaRowsMatchOnlyToggle, false)
+              renderResults()
+            },
+          })
+        }
+        if (isPressed(caseSensitiveToggle)) {
+          chipModels.push({
+            text: 'case sensitive',
+            onClick: () => {
+              setPressed(caseSensitiveToggle, false)
+              renderResults()
+            },
+          })
+        }
+        if (isPressed(regexSearchToggle)) {
+          chipModels.push({
+            text: 'regex',
+            onClick: () => {
+              setPressed(regexSearchToggle, false)
+              renderResults()
+            },
+          })
+        }
+        if (hasRegexError) chipModels.push({ text: 'regex error' })
 
         const allIds = SEARCH_FIELDS.map((field) => field.id)
         if (selectedIds.length !== allIds.length) {
-          chips.push(`fields: ${selectedIds.join(', ') || 'none'}`)
+          chipModels.push({
+            text: `fields: ${selectedIds.join(', ') || 'none'}`,
+            onClick: () => setFieldSelection(new Set(allIds)),
+          })
         }
 
-        if (chips.length === 0) {
+        if (chipModels.length === 0) {
           activeFilterChips.appendChild(el('span', 'empty', 'No active filters'))
           return
         }
 
-        chips.forEach((chipText) => {
-          const chip = el('span', 'chip')
-          chip.textContent = chipText
+        chipModels.forEach((chipModel) => {
+          const chip = document.createElement(chipModel.onClick ? 'button' : 'span')
+          chip.className = chipModel.onClick ? 'chip chip-btn' : 'chip'
+          chip.textContent = chipModel.text
+          if (chipModel.onClick) {
+            chip.type = 'button'
+            chip.addEventListener('click', chipModel.onClick)
+          }
           activeFilterChips.appendChild(chip)
         })
       }
@@ -1160,10 +1432,10 @@
       function collectFilterState() {
         return {
           search: searchInput.value,
-          caseSensitive: caseSensitiveInput.checked,
-          regex: regexSearchInput.checked,
+          caseSensitive: isPressed(caseSensitiveToggle),
+          regex: isPressed(regexSearchToggle),
           typeMatchMode: typeMatchModeInput.value === 'exact' ? 'exact' : 'contains',
-          schemaRowsMatchOnly: schemaRowsMatchOnlyInput.checked,
+          schemaRowsMatchOnly: isPressed(schemaRowsMatchOnlyToggle),
           selectedFields: selectedFieldIds(),
         }
       }
@@ -1190,20 +1462,15 @@
           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)
+          setPressed(caseSensitiveToggle, Boolean(parsed.caseSensitive))
+          setPressed(regexSearchToggle, Boolean(parsed.regex))
           if (parsed.typeMatchMode === 'exact' || parsed.typeMatchMode === 'contains') {
             typeMatchModeInput.value = parsed.typeMatchMode
           }
-          schemaRowsMatchOnlyInput.checked = Boolean(parsed.schemaRowsMatchOnly)
+          setPressed(schemaRowsMatchOnlyToggle, Boolean(parsed.schemaRowsMatchOnly))
 
           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)
-            })
+            setFieldSelection(new Set(parsed.selectedFields), { rerender: false })
           }
         } catch (error) {
           // Ignore malformed hash state.
@@ -1247,20 +1514,30 @@
       })
 
       searchInput.addEventListener('input', renderResults)
-      caseSensitiveInput.addEventListener('change', renderResults)
-      regexSearchInput.addEventListener('change', renderResults)
+      caseSensitiveToggle.addEventListener('click', () => {
+        togglePressed(caseSensitiveToggle)
+        renderResults()
+      })
+      regexSearchToggle.addEventListener('click', () => {
+        togglePressed(regexSearchToggle)
+        renderResults()
+      })
       typeMatchModeInput.addEventListener('change', renderResults)
-      schemaRowsMatchOnlyInput.addEventListener('change', renderResults)
+      schemaRowsMatchOnlyToggle.addEventListener('click', () => {
+        togglePressed(schemaRowsMatchOnlyToggle)
+        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))
+      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)
 
-      renderFieldCheckboxes()
+      renderFieldChips()
       hydrateFilterStateFromUrl()
       initializeFromBakedPayload()
       renderResults()