feat: add date and metadata filters

README.md

@@ -13,7 +13,7 @@ datasets:
 
 Browser-native research explorer using the public [GadgetSoftware Federal Register dataset](https://huggingface.co/datasets/GadgetSoftware/federal-register). The local proof uses React, Vite, TypeScript, DuckDB-WASM, and compact same-origin monthly Parquet assets in preparation for deployment to a free public Hugging Face Static Space.
 
-**Current status:** The Vite + TypeScript browser proof is deployed to the public Static Space at [ashish50514561-fr-data-analysis.static.hf.space](https://ashish50514561-fr-data-analysis.static.hf.space/). The August/September DuckDB-WASM check passes from the deployed origin. This is a data-loading proof, not the full explorer. Python audit/preparation tooling is isolated in `.venv` and is not part of the Space runtime.
+**Current status:** The public Static Space at [ashish50514561-fr-data-analysis.static.hf.space](https://ashish50514561-fr-data-analysis.static.hf.space/) serves the two-month data proof. The local `development` branch adds recent-six/custom/all date scopes, exact document-number and title/abstract search, type/agency/significance/abstract filters, and 25-row paging; this filter increment has passed local tests but is not deployed yet. Charts and enrichment views remain future work. Python audit/preparation tooling is isolated in `.venv` and is not part of the Space runtime.
 
 See [federal_register_explorer_plan.md](federal_register_explorer_plan.md) for the complete dataset audit, feature plan, architecture decisions, quality gates, and phased work.
 
@@ -53,9 +53,9 @@ The dataset card lists CC BY-NC 4.0 for the curated dataset and enrichment. The
 
 ## Next Product Steps
 
-1. Add a visible date-scope selector: most recent six snapshot months, a custom inclusive range, or the full snapshot. The recent-six example (`2026-04` through `2026-09`) uses about 2.12 MB of projected files; all 21 months use about 7.11 MB. Load month assets only after the user runs a query and show scope, estimated bytes, and progress.
-2. Add exact document-number lookup, title/abstract keyword search, type and agency filters, abstract availability, and a three-state significance filter (`true`, `false`, `unknown`). Multiple selected agencies match any selected association initially.
-3. Add monthly counts from the manifest, a horizontal type comparison, and a top-agency chart. Add abstract/significance coverage summaries and an accessible table alternative; all chart counts follow the selected scope and filters.
+1. **Complete locally; deployment pending:** date scopes for recent six months, custom inclusive range, and full snapshot. The recent-six example (`2026-04` through `2026-09`) uses about 2.12 MB; all 21 months use about 7.11 MB. Month files load only after a query.
+2. **Complete locally; deployment pending:** exact document-number lookup, case-insensitive all-term title/abstract search, type, agency-name substring, abstract-availability, and three-state significance filters, with 25-row paging. Multi-agency selection is still a follow-up; current matching is any document association whose name contains the entered text.
+3. **Next:** add monthly counts from the manifest, a horizontal type comparison, and a top-agency chart. Add abstract/significance coverage summaries and an accessible table alternative; all chart counts must follow the selected scope and filters.
 4. Add compact relationship views on demand: official designated subjects, CFR references, dockets, and executive briefs. Load regulatory briefs only when opening a matching rule.
 5. Defer the large `keyword`, `entity`, and extracted `topics` tables. Together they account for about 86% of repository bytes; loading all three for six recent months would transfer about 126 MB. First test prepared summaries or an explicit opt-in discovery view.
 6. Keep effective-date and comment-window histograms for later: the source contains extreme and negative values that need an explicit valid denominator and outlier handling.

dist/assets/{index-DhT9TQgF.css → index-CZaEZ6UX.css}

@@ -1 +1 @@
-#root{min-height:100vh}.page-shell{width:min(1080px,calc(100% - 48px));margin:0 auto}.masthead{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.wordmark{display:inline-flex;align-items:center;gap:12px;color:var(--ink);font-size:15px;font-weight:650;text-decoration:none}.wordmark-mark{width:36px;height:36px;display:grid;place-items:center;background:var(--forest);color:#fff;font-family:var(--serif);font-size:15px}.masthead-note,.eyebrow,.scope-label,.result-meta,.page-footer,.schema-row span{color:var(--muted);font-size:12px}.masthead-note{text-transform:uppercase}.intro{max-width:720px;padding:60px 0 42px}.eyebrow{margin:0 0 12px;color:var(--forest);font-family:var(--mono);font-size:11px;font-weight:600}.intro h1,.section-heading h2{margin:0;color:var(--ink);font-family:var(--serif);font-weight:500}.intro h1{font-size:42px;line-height:1.12}.intro-copy{max-width:620px;margin:17px 0 0;color:var(--muted);font-size:16px;line-height:1.65}.scope-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.scope-strip>div{min-width:0;padding:18px 20px 18px 0;display:grid;gap:8px}.scope-strip>div+div{padding-left:20px;border-left:1px solid var(--line)}.scope-label{text-transform:uppercase}.scope-strip strong,.scope-strip code{overflow-wrap:anywhere;color:var(--ink);font-size:13px;font-weight:600}.scope-strip code,.schema-row code,td,.result-meta{font-family:var(--mono)}.check-section{padding:40px 0 54px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-heading h2{font-size:26px;line-height:1.2}.run-button{min-height:44px;padding:0 18px;flex:0 0 auto;border:1px solid var(--forest);background:var(--forest);color:#fff;font:inherit;font-size:13px;font-weight:650;cursor:pointer}.run-button:hover:not(:disabled){background:var(--forest-dark)}.run-button:focus-visible,.schema-details summary:focus-visible{outline:3px solid var(--signal);outline-offset:3px}.run-button:disabled{cursor:wait;opacity:.7}.status-line,.empty-state{padding:16px 0;color:var(--muted);font-size:14px}.error-panel{margin-top:18px;padding:18px 20px;border-left:3px solid var(--signal);background:#fff7ef}.error-panel strong{color:#7e3116;font-size:14px}.error-panel p{margin:8px 0;color:var(--ink);font-family:var(--mono);font-size:12px;line-height:1.55;overflow-wrap:anywhere}.error-panel span{color:var(--muted);font-size:12px}.result-meta{display:flex;flex-wrap:wrap;gap:10px 24px;padding:12px 0;border-top:1px solid var(--line);font-family:var(--mono)}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}thead th{color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase}tbody th{color:var(--ink);font-size:14px;font-weight:650;white-space:nowrap}td{color:var(--ink-soft);font-size:12px;white-space:nowrap}.total-row th,.total-row td{border-top:1px solid var(--line-strong);color:var(--forest-dark);font-weight:700}.schema-details{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.schema-details summary{padding:15px 0;color:var(--forest-dark);font-size:13px;font-weight:650;cursor:pointer}.schema-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}.schema-row{min-width:0;padding:9px 12px 9px 0;display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line)}.schema-row code{overflow-wrap:anywhere;color:var(--ink-soft);font-size:11px}.schema-row span{flex:0 0 auto;font-family:var(--mono);font-size:10px}.page-footer{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line)}@media(max-width:700px){.page-shell{width:min(100% - 32px,560px)}.intro{padding:44px 0 30px}.intro h1{font-size:34px}.scope-strip{grid-template-columns:1fr}.scope-strip>div{padding:14px 0}.scope-strip>div+div{padding-left:0;border-top:1px solid var(--line);border-left:0}.section-heading{align-items:stretch;flex-direction:column}.run-button{width:100%}.schema-list{grid-template-columns:repeat(2,minmax(0,1fr))}.page-footer{align-items:flex-start;flex-direction:column;justify-content:center;padding:14px 0}}:root{font-family:Segoe UI,sans-serif;color:#202820;background:#f2f3ed;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink: #202820;--ink-soft: #39443b;--muted: #68736b;--forest: #27634a;--forest-dark: #184431;--signal: #c65b31;--line: #d7ddd4;--line-strong: #aab7a9;--serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;--mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button{border-radius:0}
+#root{min-height:100vh}.page-shell{width:min(1080px,calc(100% - 48px));margin:0 auto}.masthead{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.wordmark{display:inline-flex;align-items:center;gap:12px;color:var(--ink);font-size:15px;font-weight:650;text-decoration:none}.wordmark-mark{width:36px;height:36px;display:grid;place-items:center;background:var(--forest);color:#fff;font-family:var(--serif);font-size:15px}.masthead-note,.eyebrow,.scope-label,.result-meta,.page-footer,.schema-row span{color:var(--muted);font-size:12px}.masthead-note{text-transform:uppercase}.intro{max-width:720px;padding:60px 0 42px}.eyebrow{margin:0 0 12px;color:var(--forest);font-family:var(--mono);font-size:11px;font-weight:600}.intro h1,.section-heading h2{margin:0;color:var(--ink);font-family:var(--serif);font-weight:500}.intro h1{font-size:42px;line-height:1.12}.intro-copy{max-width:620px;margin:17px 0 0;color:var(--muted);font-size:16px;line-height:1.65}.scope-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.scope-strip>div{min-width:0;padding:18px 20px 18px 0;display:grid;gap:8px}.scope-strip>div+div{padding-left:20px;border-left:1px solid var(--line)}.scope-label{text-transform:uppercase}.scope-strip strong,.scope-strip code{overflow-wrap:anywhere;color:var(--ink);font-size:13px;font-weight:600}.scope-strip code,.schema-row code,td,.result-meta{font-family:var(--mono)}.check-section{padding:40px 0 54px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-heading h2{font-size:26px;line-height:1.2}.run-button{min-height:44px;padding:0 18px;flex:0 0 auto;border:1px solid var(--forest);background:var(--forest);color:#fff;font:inherit;font-size:13px;font-weight:650;cursor:pointer}.run-button:hover:not(:disabled){background:var(--forest-dark)}.run-button:focus-visible,.schema-details summary:focus-visible{outline:3px solid var(--signal);outline-offset:3px}.run-button:disabled{cursor:wait;opacity:.7}.status-line,.empty-state{padding:16px 0;color:var(--muted);font-size:14px}.error-panel{margin-top:18px;padding:18px 20px;border-left:3px solid var(--signal);background:#fff7ef}.error-panel strong{color:#7e3116;font-size:14px}.error-panel p{margin:8px 0;color:var(--ink);font-family:var(--mono);font-size:12px;line-height:1.55;overflow-wrap:anywhere}.error-panel span{color:var(--muted);font-size:12px}.result-meta{display:flex;flex-wrap:wrap;gap:10px 24px;padding:12px 0;border-top:1px solid var(--line);font-family:var(--mono)}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}thead th{color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase}tbody th{color:var(--ink);font-size:14px;font-weight:650;white-space:nowrap}td{color:var(--ink-soft);font-size:12px;white-space:nowrap}.total-row th,.total-row td{border-top:1px solid var(--line-strong);color:var(--forest-dark);font-weight:700}.schema-details{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.schema-details summary{padding:15px 0;color:var(--forest-dark);font-size:13px;font-weight:650;cursor:pointer}.schema-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}.schema-row{min-width:0;padding:9px 12px 9px 0;display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line)}.schema-row code{overflow-wrap:anywhere;color:var(--ink-soft);font-size:11px}.schema-row span{flex:0 0 auto;font-family:var(--mono);font-size:10px}.scope-modes{min-width:0;margin:0 0 22px;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;border:0}.scope-modes legend{width:100%;margin-bottom:10px;color:var(--muted);font-size:12px;text-transform:uppercase}.scope-modes label{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:13px;cursor:pointer}.scope-modes input{width:16px;height:16px;margin:0;accent-color:var(--forest)}.date-range-fields{margin:0 0 22px;display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:14px}.date-range-fields label,.filter-grid label{min-width:0;display:grid;align-content:start;gap:7px}.date-range-fields label>span,.filter-grid label>span{color:var(--muted);font-size:12px}.date-range-fields input,.filter-grid input,.filter-grid select{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:0;background:#fffefa;color:var(--ink);font:inherit;font-size:13px}.date-range-fields input:focus-visible,.filter-grid input:focus-visible,.filter-grid select:focus-visible{outline:3px solid color-mix(in srgb,var(--forest) 30%,transparent);outline-offset:1px;border-color:var(--forest)}.filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}.filter-grid .search-field{grid-column:span 2}.search-field small{color:var(--muted);font-size:11px;line-height:1.45}.field-error{grid-column:1 / -1;color:#8b351e;font-size:12px}.form-actions{margin-top:22px;display:flex;align-items:center;gap:16px}.secondary-button{min-height:40px;padding:0 14px;border:1px solid var(--line-strong);background:transparent;color:var(--forest-dark);font:inherit;font-size:12px;font-weight:650;cursor:pointer}.secondary-button:hover:not(:disabled){background:#e8eee7}.secondary-button:disabled{cursor:not-allowed;opacity:.45}.secondary-button:focus-visible{outline:3px solid var(--signal);outline-offset:2px}.scope-hint{color:var(--muted);font-size:11px;line-height:1.45}.results-section{margin-top:36px;border-top:1px solid var(--line-strong)}.monthly-summary{margin:4px 0 24px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.month-row{padding:10px;display:flex;justify-content:space-between;gap:8px;background:#f9faf5;color:var(--ink-soft);font-family:var(--mono);font-size:11px}.documents-table th,.documents-table td{white-space:normal}.documents-table tbody td{min-width:100px;max-width:290px;line-height:1.5}.documents-table tbody td:last-child{min-width:260px;color:var(--muted)}.document-title{display:block;color:var(--forest-dark);font-family:var(--serif);font-size:16px;line-height:1.35;text-decoration-thickness:1px;text-underline-offset:3px}.document-number{display:block;margin-top:6px;color:var(--muted);font-family:var(--mono);font-size:10px}.pagination{padding:16px 0;display:flex;align-items:center;justify-content:flex-end;gap:14px;color:var(--muted);font-family:var(--mono);font-size:11px}.page-footer{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line)}@media(max-width:700px){.page-shell{width:min(100% - 32px,560px)}.intro{padding:44px 0 30px}.intro h1{font-size:34px}.scope-strip{grid-template-columns:1fr}.scope-strip>div{padding:14px 0}.scope-strip>div+div{padding-left:0;border-top:1px solid var(--line);border-left:0}.section-heading{align-items:stretch;flex-direction:column}.run-button{width:100%}.schema-list,.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-grid .search-field{grid-column:1 / -1}.date-range-fields,.monthly-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.form-actions{align-items:flex-start;flex-direction:column}.pagination{justify-content:space-between}.page-footer{align-items:flex-start;flex-direction:column;justify-content:center;padding:14px 0}}:root{font-family:Segoe UI,sans-serif;color:#202820;background:#f2f3ed;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink: #202820;--ink-soft: #39443b;--muted: #68736b;--forest: #27634a;--forest-dark: #184431;--signal: #c65b31;--line: #d7ddd4;--line-strong: #aab7a9;--serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;--mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button{border-radius:0}

dist/index.html

@@ -10,8 +10,8 @@
     />
     <link rel="icon" href="./favicon.ico" />
     <title>Federal Register Explorer | Data Check</title>
-    <script type="module" crossorigin src="./assets/index-Dc5XcwBp.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-DhT9TQgF.css">
+    <script type="module" crossorigin src="./assets/index-BBNMQTi5.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CZaEZ6UX.css">
   </head>
   <body>
     <div id="root"></div>

federal_register_explorer_plan.md

@@ -394,18 +394,18 @@ Do not truncate 384-dimensional GTE vectors to a smaller dimension without evide
 
 ### 10. Keyword search and filter semantics
 
-For the first prototype, use a documented baseline: exact document-number lookup and case-insensitive keyword matching over titles and abstracts, with deterministic title-first ranking. Decide and document whether multiword queries use all-terms matching, any-terms matching, or phrase matching.
+The local and deployed first increment uses exact document-number lookup before text search; otherwise it applies case-insensitive all-term containment over title plus abstract. Results sort by publication date descending with document number as a stable tie-break; ranked relevance is deferred until evaluated.
 
 DuckDB-WASM provides querying, but this plan does **not** assume a particular full-text extension is available in the selected browser build. If ranked search quality is insufficient, evaluate a small lexical index separately and measure its transfer/memory overhead.
 
 Business rules to confirm before implementation:
 
-- Multiple selected agencies: match any selected agency initially; expose an all-selected mode only if needed.
+- Current agency control: substring match on one entered agency name against any `agency_names` association. If a multi-select agency control is added, match any selected association by default; expose all-selected only if user testing supports it.
 - Date endpoints: inclusive publication dates.
 - Null abstracts: searchable by title, explicitly marked.
 - Global counts: one count per document ID regardless of agency multiplicity.
 - Agency counts: distinct document IDs associated with each selected agency.
-- Sorting: deterministic tie-break with `document_number` or `id`.
+- Sorting: current default is publication date descending, then `document_number` ascending for deterministic ordering.
 - Export: same explicit filter scope as displayed; semantic export labeled as top-K results rather than all matching topic documents.
 
 Use parameterized queries and controlled sort options. Do not concatenate user input into SQL.
@@ -512,7 +512,7 @@ Deliverable: locally validated static document assets, manifest, and two-month b
 
 1. **Complete locally:** migrate the CRA starter to Vite and verify the production build.
 2. **Complete locally:** load the generated manifest and August/September projections in DuckDB-WASM; selected static-file size is 506,685 bytes.
-3. Add date-scoped shard selection, exact lookup, keyword search, filters, and paging; show the active and available coverage.
+3. **Complete locally; deployment pending:** date-scoped shard selection, exact lookup, title/abstract all-term search, type and agency-name filters, tri-state significance, abstract availability, and 25-row paging; show the active and available coverage.
 4. Add source-linked detail panels, selective enrichment loading, and filtered export.
 5. Add monthly counts, type bars, top-agency bars, and the Methods section; add official topics and pipeline enrichment after counts reconcile.
 6. Test selected-month and full-snapshot modes, missing/network/cache failures, and source-link behavior.
@@ -561,7 +561,7 @@ Recommended defaults after this review:
 - Keep exact document-number lookup and keyword search independent of AI; display source links, attribution, provenance, and explicit coverage.
 - Count distinct document IDs for document-level analytics; deduplicate agency associations and child-table joins.
 
-**Next implementation gate:** replace the fixed two-month test selector with the planned recent-six, custom-range, and all-snapshot scope control, using manifest sizes to show the transfer estimate. Then add exact document-number and title/abstract search plus the first filters; keep heavy enrichment tables opt-in.
+**Next implementation gate:** add the first charts—monthly counts, type mix, and top agencies—from the manifest and projected documents. All charts must share the active date/type/agency/search scope, expose tabular alternatives, and count distinct document IDs across agency arrays. Keep heavy enrichment tables opt-in.
 
 ### 17. Sources and verification boundaries
 

src/App.css

@@ -297,6 +297,215 @@ td {
   font-size: 10px;
 }
 
+.scope-modes {
+  min-width: 0;
+  margin: 0 0 22px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px 22px;
+  border: 0;
+}
+
+.scope-modes legend {
+  width: 100%;
+  margin-bottom: 10px;
+  color: var(--muted);
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.scope-modes label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--ink-soft);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.scope-modes input {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--forest);
+}
+
+.date-range-fields {
+  margin: 0 0 22px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 220px));
+  gap: 14px;
+}
+
+.date-range-fields label,
+.filter-grid label {
+  min-width: 0;
+  display: grid;
+  align-content: start;
+  gap: 7px;
+}
+
+.date-range-fields label > span,
+.filter-grid label > span {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.date-range-fields input,
+.filter-grid input,
+.filter-grid select {
+  width: 100%;
+  min-height: 42px;
+  padding: 9px 11px;
+  border: 1px solid var(--line-strong);
+  border-radius: 0;
+  background: #fffefa;
+  color: var(--ink);
+  font: inherit;
+  font-size: 13px;
+}
+
+.date-range-fields input:focus-visible,
+.filter-grid input:focus-visible,
+.filter-grid select:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--forest) 30%, transparent);
+  outline-offset: 1px;
+  border-color: var(--forest);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px 16px;
+}
+
+.filter-grid .search-field {
+  grid-column: span 2;
+}
+
+.search-field small {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.field-error {
+  grid-column: 1 / -1;
+  color: #8b351e;
+  font-size: 12px;
+}
+
+.form-actions {
+  margin-top: 22px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.secondary-button {
+  min-height: 40px;
+  padding: 0 14px;
+  border: 1px solid var(--line-strong);
+  background: transparent;
+  color: var(--forest-dark);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.secondary-button:hover:not(:disabled) {
+  background: #e8eee7;
+}
+
+.secondary-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.secondary-button:focus-visible {
+  outline: 3px solid var(--signal);
+  outline-offset: 2px;
+}
+
+.scope-hint {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.results-section {
+  margin-top: 36px;
+  border-top: 1px solid var(--line-strong);
+}
+
+.monthly-summary {
+  margin: 4px 0 24px;
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 1px;
+  background: var(--line);
+  border: 1px solid var(--line);
+}
+
+.month-row {
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  background: #f9faf5;
+  color: var(--ink-soft);
+  font-family: var(--mono);
+  font-size: 11px;
+}
+
+.documents-table th,
+.documents-table td {
+  white-space: normal;
+}
+
+.documents-table tbody td {
+  min-width: 100px;
+  max-width: 290px;
+  line-height: 1.5;
+}
+
+.documents-table tbody td:last-child {
+  min-width: 260px;
+  color: var(--muted);
+}
+
+.document-title {
+  display: block;
+  color: var(--forest-dark);
+  font-family: var(--serif);
+  font-size: 16px;
+  line-height: 1.35;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+
+.document-number {
+  display: block;
+  margin-top: 6px;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 10px;
+}
+
+.pagination {
+  padding: 16px 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 14px;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 11px;
+}
+
 .page-footer {
   min-height: 54px;
   display: flex;
@@ -346,6 +555,31 @@ td {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .filter-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .filter-grid .search-field {
+    grid-column: 1 / -1;
+  }
+
+  .date-range-fields {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .monthly-summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .form-actions {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .pagination {
+    justify-content: space-between;
+  }
+
   .page-footer {
     align-items: flex-start;
     flex-direction: column;

src/App.tsx

@@ -1,408 +0,0 @@
-import {
-  AsyncDuckDB,
-  ConsoleLogger,
-  DuckDBDataProtocol,
-  getJsDelivrBundles,
-  selectBundle,
-} from '@duckdb/duckdb-wasm';
-import { useEffect, useState } from 'react';
-import './App.css';
-
-const DATASET_REVISION = '1a6a6e64788c8cd6559740475e502bcc9e608d0f';
-const MANIFEST_URL = './data/documents/manifest.json';
-const TEST_MONTHS = ['2026-08', '2026-09'] as const;
-
-type SnapshotMonth = {
-  month: string;
-  path: string;
-  rows: number;
-  unique_ids: number;
-  unique_document_numbers: number;
-  bytes: number;
-};
-
-type SnapshotManifest = {
-  dataset_revision: string;
-  totals: {
-    months: number;
-    rows: number;
-    source_bytes: number;
-    bytes: number;
-  };
-  months: SnapshotMonth[];
-};
-
-type MonthResult = {
-  month: string;
-  rows: number;
-  uniqueIds: number;
-  uniqueDocumentNumbers: number;
-  missingAbstracts: number;
-  firstDate: string;
-  lastDate: string;
-};
-
-type AuditResult = {
-  engineVersion: string;
-  elapsedMs: number;
-  fileBytes: number;
-  totalRows: number;
-  uniqueIds: number;
-  uniqueDocumentNumbers: number;
-  monthCount: number;
-  schema: Array<{ name: string; type: string }>;
-  months: MonthResult[];
-};
-
-type QueryRow = Record<string, unknown>;
-
-function numberValue(value: unknown): number {
-  return Number(value);
-}
-
-function dateValue(value: unknown): string {
-  if (value instanceof Date) {
-    return value.toISOString().slice(0, 10);
-  }
-  if (typeof value === 'number' || typeof value === 'bigint') {
-    return new Date(Number(value)).toISOString().slice(0, 10);
-  }
-  return String(value);
-}
-
-async function runDatasetAudit(manifest: SnapshotManifest): Promise<AuditResult> {
-  const shards = manifest.months.filter((shard) =>
-    TEST_MONTHS.includes(shard.month as (typeof TEST_MONTHS)[number]),
-  );
-  if (shards.length !== TEST_MONTHS.length) {
-    throw new Error('The manifest is missing one or more test months.');
-  }
-
-  const files = shards.map((shard) => `${shard.month}.slim.parquet`);
-  const bundle = await selectBundle(getJsDelivrBundles());
-  const workerUrl = URL.createObjectURL(
-    new Blob([`importScripts("${bundle.mainWorker}");`], {
-      type: 'text/javascript',
-    }),
-  );
-  const worker = new Worker(workerUrl);
-  const database = new AsyncDuckDB(new ConsoleLogger(), worker);
-
-  try {
-    await database.instantiate(bundle.mainModule, bundle.pthreadWorker);
-    URL.revokeObjectURL(workerUrl);
-    const connection = await database.connect();
-
-    try {
-      await Promise.all(
-        shards.map((shard, index) =>
-          database.registerFileURL(
-            files[index],
-            new URL(shard.path, window.location.href).toString(),
-            DuckDBDataProtocol.HTTP,
-            false,
-          ),
-        ),
-      );
-
-      const source = `read_parquet(['${files.join("', '")}'], union_by_name = true)`;
-      const queryStartedAt = performance.now();
-      const monthTable = await connection.query(`
-        SELECT
-          strftime(try_cast(publication_date AS DATE), '%Y-%m') AS month,
-          count(*) AS rows,
-          count(DISTINCT id) AS unique_ids,
-          count(DISTINCT document_number) AS unique_document_numbers,
-          count(*) FILTER (WHERE abstract IS NULL OR trim(abstract) = '') AS missing_abstracts,
-          min(try_cast(publication_date AS DATE)) AS first_date,
-          max(try_cast(publication_date AS DATE)) AS last_date
-        FROM ${source}
-        GROUP BY month
-        ORDER BY month
-      `);
-      const totalTable = await connection.query(`
-        SELECT
-          count(*) AS rows,
-          count(DISTINCT id) AS unique_ids,
-          count(DISTINCT document_number) AS unique_document_numbers
-        FROM ${source}
-      `);
-      const schemaTable = await connection.query(`DESCRIBE SELECT * FROM ${source}`);
-      const elapsedMs = Math.round(performance.now() - queryStartedAt);
-
-      const months = monthTable.toArray().map((row) => {
-        const value = row.toJSON() as QueryRow;
-        return {
-          month: String(value.month),
-          rows: numberValue(value.rows),
-          uniqueIds: numberValue(value.unique_ids),
-          uniqueDocumentNumbers: numberValue(value.unique_document_numbers),
-          missingAbstracts: numberValue(value.missing_abstracts),
-          firstDate: dateValue(value.first_date),
-          lastDate: dateValue(value.last_date),
-        };
-      });
-      const total = totalTable.toArray()[0]?.toJSON() as QueryRow | undefined;
-      if (!total) {
-        throw new Error('DuckDB returned no total row.');
-      }
-
-      return {
-        engineVersion: await database.getVersion(),
-        elapsedMs,
-        fileBytes: shards.reduce((totalBytes, shard) => totalBytes + shard.bytes, 0),
-        totalRows: numberValue(total.rows),
-        uniqueIds: numberValue(total.unique_ids),
-        uniqueDocumentNumbers: numberValue(total.unique_document_numbers),
-        monthCount: months.length,
-        schema: schemaTable.toArray().map((row) => {
-          const value = row.toJSON() as QueryRow;
-          return {
-            name: String(value.column_name),
-            type: String(value.column_type),
-          };
-        }),
-        months,
-      };
-    } finally {
-      await connection.close();
-    }
-  } finally {
-    URL.revokeObjectURL(workerUrl);
-    await database.terminate();
-    worker.terminate();
-  }
-}
-
-function App() {
-  const [manifest, setManifest] = useState<SnapshotManifest | null>(null);
-  const [manifestError, setManifestError] = useState<string | null>(null);
-  const [result, setResult] = useState<AuditResult | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [isRunning, setIsRunning] = useState(false);
-
-  useEffect(() => {
-    let active = true;
-    void fetch(MANIFEST_URL, { cache: 'no-store' })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`Manifest request failed (${response.status}).`);
-        }
-        return response.json() as Promise<SnapshotManifest>;
-      })
-      .then((snapshot) => {
-        if (
-          snapshot.dataset_revision !== DATASET_REVISION ||
-          !Array.isArray(snapshot.months)
-        ) {
-          throw new Error('The static manifest does not match the expected revision.');
-        }
-        if (active) {
-          setManifest(snapshot);
-        }
-      })
-      .catch((caughtError: unknown) => {
-        if (active) {
-          setManifestError(
-            caughtError instanceof Error
-              ? caughtError.message
-              : 'The static manifest could not be loaded.',
-          );
-        }
-      });
-
-    return () => {
-      active = false;
-    };
-  }, []);
-
-  async function handleRun() {
-    if (!manifest) return;
-    setIsRunning(true);
-    setError(null);
-    setResult(null);
-    try {
-      setResult(await runDatasetAudit(manifest));
-    } catch (caughtError) {
-      setError(
-        caughtError instanceof Error
-          ? caughtError.message
-          : 'The browser query failed.',
-      );
-    } finally {
-      setIsRunning(false);
-    }
-  }
-
-  return (
-    <main className="page-shell">
-      <header className="masthead">
-        <a className="wordmark" href="https://www.federalregister.gov/">
-          <span className="wordmark-mark" aria-hidden="true">
-            FR
-          </span>
-          <span>Federal Register Explorer</span>
-        </a>
-        <span className="masthead-note">Browser data proof</span>
-      </header>
-
-      <section className="intro" aria-labelledby="page-title">
-        <p className="eyebrow">PINNED SNAPSHOT / DOCUMENTS</p>
-        <h1 id="page-title">A two-month Parquet check</h1>
-        <p className="intro-copy">
-          Query compact, same-origin month files with DuckDB-WASM. The complete
-          metadata snapshot is selected by date rather than loaded at startup.
-        </p>
-      </section>
-
-      <section className="scope-strip" aria-label="Query scope">
-        <div>
-          <span className="scope-label">Dataset commit</span>
-          <code>{manifest?.dataset_revision.slice(0, 12) ?? 'Loading…'}</code>
-        </div>
-        <div>
-          <span className="scope-label">Month shards</span>
-          <strong>
-            {TEST_MONTHS.join(' + ')} / {manifest?.totals.months ?? '…'} months
-          </strong>
-        </div>
-        <div>
-          <span className="scope-label">Search runtime</span>
-          <strong>DuckDB-WASM / browser</strong>
-        </div>
-        <div>
-          <span className="scope-label">Selected file size</span>
-          <strong>
-            {manifest
-              ? manifest.months
-                  .filter((shard) =>
-                    TEST_MONTHS.includes(shard.month as (typeof TEST_MONTHS)[number]),
-                  )
-                  .reduce((totalBytes, shard) => totalBytes + shard.bytes, 0)
-                  .toLocaleString()
-              : '—'}{' '}
-            bytes
-          </strong>
-        </div>
-      </section>
-
-      <section className="check-section" aria-labelledby="check-title">
-        <div className="section-heading">
-          <div>
-            <p className="eyebrow">PHASE A / BROWSER GATE</p>
-            <h2 id="check-title">Validate monthly assets and row counts</h2>
-          </div>
-          <button
-            className="run-button"
-            type="button"
-            onClick={handleRun}
-            disabled={isRunning || !manifest}
-          >
-            {isRunning
-              ? 'Checking shards…'
-              : manifest
-                ? 'Run browser check'
-                : 'Loading manifest…'}
-          </button>
-        </div>
-
-        {manifestError && (
-          <div className="error-panel" role="alert">
-            <strong>Snapshot manifest unavailable</strong>
-            <p>{manifestError}</p>
-          </div>
-        )}
-
-        {isRunning && (
-          <p className="status-line" role="status">
-            Loading the selected static month files. The first run also loads
-            the DuckDB-WASM runtime.
-          </p>
-        )}
-
-        {error && (
-          <div className="error-panel" role="alert">
-            <strong>Browser query failed</strong>
-            <p>{error}</p>
-            <span>
-              Keyword search remains independent of this optional data check.
-            </span>
-          </div>
-        )}
-
-        {result && (
-          <>
-            <div className="result-meta" role="status">
-              <span>DuckDB {result.engineVersion}</span>
-              <span>{result.elapsedMs.toLocaleString()} ms query time</span>
-              <span>{result.schema.length} projected columns</span>
-              <span>{result.fileBytes.toLocaleString()} static-file bytes</span>
-            </div>
-
-            <div className="table-wrap">
-              <table>
-                <thead>
-                  <tr>
-                    <th scope="col">Publication month</th>
-                    <th scope="col">Rows</th>
-                    <th scope="col">Unique IDs</th>
-                    <th scope="col">Missing abstracts</th>
-                    <th scope="col">Observed dates</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {result.months.map((month) => (
-                    <tr key={month.month}>
-                      <th scope="row">{month.month}</th>
-                      <td>{month.rows.toLocaleString()}</td>
-                      <td>{month.uniqueIds.toLocaleString()}</td>
-                      <td>{month.missingAbstracts.toLocaleString()}</td>
-                      <td>
-                        {month.firstDate} to {month.lastDate}
-                      </td>
-                    </tr>
-                  ))}
-                  <tr className="total-row">
-                    <th scope="row">Combined</th>
-                    <td>{result.totalRows.toLocaleString()}</td>
-                    <td>{result.uniqueIds.toLocaleString()}</td>
-                    <td colSpan={2}>
-                      {result.uniqueDocumentNumbers.toLocaleString()} unique
-                      document numbers across {result.monthCount} shards
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-
-            <details className="schema-details">
-              <summary>Inspect the {result.schema.length}-column projection</summary>
-              <div className="schema-list">
-                {result.schema.map((column) => (
-                  <div className="schema-row" key={column.name}>
-                    <code>{column.name}</code>
-                    <span>{column.type}</span>
-                  </div>
-                ))}
-              </div>
-            </details>
-          </>
-        )}
-
-        {!result && !error && !manifestError && !isRunning && manifest && (
-          <p className="empty-state">
-            No month files loaded yet. The query runs only after you start the
-            check.
-          </p>
-        )}
-      </section>
-
-      <footer className="page-footer">
-        <span>Source: GadgetSoftware / federal-register</span>
-        <span>Snapshot counts are not a completeness or policy-trend claim.</span>
-      </footer>
-    </main>
-  );
-}
-
-export default App;

src/Explorer.tsx

@@ -0,0 +1,571 @@
+import {
+  AsyncDuckDB,
+  ConsoleLogger,
+  DuckDBDataProtocol,
+  getJsDelivrBundles,
+  selectBundle,
+} from '@duckdb/duckdb-wasm';
+import { useEffect, useState } from 'react';
+import type { FormEvent } from 'react';
+import './App.css';
+
+const DATASET_REVISION = '1a6a6e64788c8cd6559740475e502bcc9e608d0f';
+const MANIFEST_URL = './data/documents/manifest.json';
+const PAGE_SIZE = 25;
+const DOCUMENT_TYPES = ['Notice', 'Rule', 'Proposed Rule', 'Presidential Document'];
+
+type ScopeMode = 'recent-six' | 'custom' | 'all';
+type SignificanceFilter = 'any' | 'true' | 'false' | 'unknown';
+type AbstractFilter = 'any' | 'available' | 'missing';
+type QueryRow = Record<string, unknown>;
+
+type SnapshotMonth = {
+  month: string;
+  path: string;
+  rows: number;
+  unique_ids: number;
+  unique_document_numbers: number;
+  bytes: number;
+  first_publication_date: string;
+  last_publication_date: string;
+};
+
+type SnapshotManifest = {
+  dataset_revision: string;
+  totals: {
+    months: number;
+    rows: number;
+    source_bytes: number;
+    bytes: number;
+  };
+  months: SnapshotMonth[];
+};
+
+type MonthResult = {
+  month: string;
+  rows: number;
+  firstDate: string;
+  lastDate: string;
+};
+
+type DocumentResult = {
+  id: string;
+  documentNumber: string;
+  title: string;
+  publicationDate: string;
+  type: string;
+  agencies: string[];
+  abstract: string | null;
+  htmlUrl: string | null;
+};
+
+type SearchFilters = {
+  startDate: string;
+  endDate: string;
+  query: string;
+  type: string;
+  agency: string;
+  significance: SignificanceFilter;
+  abstract: AbstractFilter;
+  page: number;
+};
+
+type QueryResult = {
+  engineVersion: string;
+  elapsedMs: number;
+  fileBytes: number;
+  totalRows: number;
+  uniqueIds: number;
+  uniqueDocumentNumbers: number;
+  schema: Array<{ name: string; type: string }>;
+  months: MonthResult[];
+  documents: DocumentResult[];
+  page: number;
+  pageSize: number;
+};
+
+function numberValue(value: unknown): number {
+  return Number(value);
+}
+
+function dateValue(value: unknown): string {
+  if (value instanceof Date) {
+    return value.toISOString().slice(0, 10);
+  }
+  if (typeof value === 'number' || typeof value === 'bigint') {
+    return new Date(Number(value)).toISOString().slice(0, 10);
+  }
+  return String(value);
+}
+
+function stringList(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value.map(String);
+  }
+  if (value && typeof value === 'object') {
+    const iterable = value as { [Symbol.iterator]?: () => Iterator<unknown> };
+    if (typeof iterable[Symbol.iterator] === 'function') {
+      return Array.from(value as Iterable<unknown>, String);
+    }
+  }
+  return [];
+}
+
+async function runDocumentQuery(
+  manifest: SnapshotManifest,
+  filters: SearchFilters,
+): Promise<QueryResult> {
+  if (!filters.startDate || !filters.endDate || filters.startDate > filters.endDate) {
+    throw new Error('Choose a valid inclusive publication-date range.');
+  }
+
+  const firstMonth = filters.startDate.slice(0, 7);
+  const lastMonth = filters.endDate.slice(0, 7);
+  const shards = manifest.months.filter(
+    (shard) => shard.month >= firstMonth && shard.month <= lastMonth,
+  );
+  if (shards.length === 0) {
+    throw new Error('The selected range contains no months in this snapshot.');
+  }
+
+  const files = shards.map((shard) => `${shard.month}.slim.parquet`);
+  const bundle = await selectBundle(getJsDelivrBundles());
+  const workerUrl = URL.createObjectURL(
+    new Blob([`importScripts("${bundle.mainWorker}");`], {
+      type: 'text/javascript',
+    }),
+  );
+  const worker = new Worker(workerUrl);
+  const database = new AsyncDuckDB(new ConsoleLogger(), worker);
+
+  try {
+    await database.instantiate(bundle.mainModule, bundle.pthreadWorker);
+    URL.revokeObjectURL(workerUrl);
+    const connection = await database.connect();
+
+    try {
+      await Promise.all(
+        shards.map((shard, index) =>
+          database.registerFileURL(
+            files[index],
+            new URL(shard.path, window.location.href).toString(),
+            DuckDBDataProtocol.HTTP,
+            false,
+          ),
+        ),
+      );
+
+      const source = `read_parquet([${files.map((file) => `'${file}'`).join(', ')}], union_by_name = true)`;
+      const conditions = [
+        "try_cast(d.publication_date AS DATE) >= CAST(? AS DATE)",
+        "try_cast(d.publication_date AS DATE) <= CAST(? AS DATE)",
+      ];
+      const values: Array<string | number> = [filters.startDate, filters.endDate];
+      const normalizedQuery = filters.query.trim();
+
+      if (/^\d{4}-\d{5}$/.test(normalizedQuery)) {
+        conditions.push('d.document_number = ?');
+        values.push(normalizedQuery);
+      } else {
+        const terms = [...new Set(normalizedQuery.toLocaleLowerCase().split(/\s+/).filter(Boolean))];
+        for (const term of terms) {
+          conditions.push(
+            "contains(lower(coalesce(d.title, '') || ' ' || coalesce(d.abstract, '')), lower(?))",
+          );
+          values.push(term);
+        }
+      }
+
+      if (filters.type) {
+        conditions.push('d.type = ?');
+        values.push(filters.type);
+      }
+      if (filters.agency.trim()) {
+        conditions.push(`EXISTS (
+          SELECT 1 FROM UNNEST(d.agency_names) AS agency(name)
+          WHERE contains(lower(agency.name), lower(?))
+        )`);
+        values.push(filters.agency.trim());
+      }
+      if (filters.significance === 'true') conditions.push('d.significant IS TRUE');
+      if (filters.significance === 'false') conditions.push('d.significant IS FALSE');
+      if (filters.significance === 'unknown') conditions.push('d.significant IS NULL');
+      if (filters.abstract === 'available') {
+        conditions.push("d.abstract IS NOT NULL AND trim(d.abstract) <> ''");
+      }
+      if (filters.abstract === 'missing') {
+        conditions.push("(d.abstract IS NULL OR trim(d.abstract) = '')");
+      }
+
+      const where = `WHERE ${conditions.join(' AND ')}`;
+      const queryPrepared = async (sql: string, parameters: Array<string | number> = []) => {
+        const statement = await connection.prepare(sql);
+        try {
+          return await statement.query(...parameters);
+        } finally {
+          await statement.close();
+        }
+      };
+
+      const queryStartedAt = performance.now();
+      const monthTable = await queryPrepared(`
+        SELECT
+          strftime(try_cast(d.publication_date AS DATE), '%Y-%m') AS month,
+          count(*) AS rows,
+          min(try_cast(d.publication_date AS DATE)) AS first_date,
+          max(try_cast(d.publication_date AS DATE)) AS last_date
+        FROM ${source} AS d
+        ${where}
+        GROUP BY month
+        ORDER BY month
+      `, values);
+      const totalTable = await queryPrepared(`
+        SELECT
+          count(*) AS rows,
+          count(DISTINCT d.id) AS unique_ids,
+          count(DISTINCT d.document_number) AS unique_document_numbers
+        FROM ${source} AS d
+        ${where}
+      `, values);
+      const documentTable = await queryPrepared(`
+        SELECT
+          d.id,
+          d.document_number,
+          d.title,
+          d.publication_date,
+          d.type,
+          d.agency_names,
+          d.abstract,
+          d.html_url
+        FROM ${source} AS d
+        ${where}
+        ORDER BY try_cast(d.publication_date AS DATE) DESC, d.document_number ASC
+        LIMIT ? OFFSET ?
+      `, [...values, PAGE_SIZE, (filters.page - 1) * PAGE_SIZE]);
+      const schemaTable = await connection.query(`DESCRIBE SELECT * FROM ${source}`);
+      const elapsedMs = Math.round(performance.now() - queryStartedAt);
+      const total = totalTable.toArray()[0]?.toJSON() as QueryRow | undefined;
+      if (!total) {
+        throw new Error('DuckDB returned no total row.');
+      }
+
+      return {
+        engineVersion: await database.getVersion(),
+        elapsedMs,
+        fileBytes: shards.reduce((totalBytes, shard) => totalBytes + shard.bytes, 0),
+        totalRows: numberValue(total.rows),
+        uniqueIds: numberValue(total.unique_ids),
+        uniqueDocumentNumbers: numberValue(total.unique_document_numbers),
+        schema: schemaTable.toArray().map((row) => {
+          const value = row.toJSON() as QueryRow;
+          return { name: String(value.column_name), type: String(value.column_type) };
+        }),
+        months: monthTable.toArray().map((row) => {
+          const value = row.toJSON() as QueryRow;
+          return {
+            month: String(value.month),
+            rows: numberValue(value.rows),
+            firstDate: dateValue(value.first_date),
+            lastDate: dateValue(value.last_date),
+          };
+        }),
+        documents: documentTable.toArray().map((row) => {
+          const value = row.toJSON() as QueryRow;
+          return {
+            id: String(value.id),
+            documentNumber: String(value.document_number),
+            title: value.title == null ? '' : String(value.title),
+            publicationDate: dateValue(value.publication_date),
+            type: value.type == null ? '' : String(value.type),
+            agencies: stringList(value.agency_names),
+            abstract: value.abstract == null ? null : String(value.abstract),
+            htmlUrl: value.html_url == null ? null : String(value.html_url),
+          };
+        }),
+        page: filters.page,
+        pageSize: PAGE_SIZE,
+      };
+    } finally {
+      await connection.close();
+    }
+  } finally {
+    URL.revokeObjectURL(workerUrl);
+    await database.terminate();
+    worker.terminate();
+  }
+}
+
+function Explorer() {
+  const [manifest, setManifest] = useState<SnapshotManifest | null>(null);
+  const [manifestError, setManifestError] = useState<string | null>(null);
+  const [result, setResult] = useState<QueryResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [scopeMode, setScopeMode] = useState<ScopeMode>('recent-six');
+  const [customStartDate, setCustomStartDate] = useState('');
+  const [customEndDate, setCustomEndDate] = useState('');
+  const [query, setQuery] = useState('');
+  const [typeFilter, setTypeFilter] = useState('');
+  const [agencyFilter, setAgencyFilter] = useState('');
+  const [significanceFilter, setSignificanceFilter] = useState<SignificanceFilter>('any');
+  const [abstractFilter, setAbstractFilter] = useState<AbstractFilter>('any');
+
+  useEffect(() => {
+    let active = true;
+    void fetch(MANIFEST_URL, { cache: 'no-store' })
+      .then((response) => {
+        if (!response.ok) throw new Error(`Manifest request failed (${response.status}).`);
+        return response.json() as Promise<SnapshotManifest>;
+      })
+      .then((snapshot) => {
+        if (snapshot.dataset_revision !== DATASET_REVISION || !Array.isArray(snapshot.months)) {
+          throw new Error('The static manifest does not match the expected revision.');
+        }
+        if (active) {
+          setManifest(snapshot);
+          setCustomStartDate(snapshot.months[Math.max(snapshot.months.length - 6, 0)]?.first_publication_date ?? '');
+          setCustomEndDate(snapshot.months.at(-1)?.last_publication_date ?? '');
+        }
+      })
+      .catch((caughtError: unknown) => {
+        if (active) {
+          setManifestError(caughtError instanceof Error ? caughtError.message : 'The static manifest could not be loaded.');
+        }
+      });
+    return () => { active = false; };
+  }, []);
+
+  const firstSnapshotDate = manifest?.months[0]?.first_publication_date ?? '';
+  const lastSnapshotDate = manifest?.months.at(-1)?.last_publication_date ?? '';
+  const recentStartDate = manifest?.months[Math.max((manifest?.months.length ?? 0) - 6, 0)]?.first_publication_date ?? '';
+  const startDate = scopeMode === 'all' ? firstSnapshotDate : scopeMode === 'custom' ? customStartDate : recentStartDate;
+  const endDate = scopeMode === 'custom' ? customEndDate : lastSnapshotDate;
+  const selectedMonths = manifest?.months.filter((month) => month.month >= startDate.slice(0, 7) && month.month <= endDate.slice(0, 7)) ?? [];
+  const selectedBytes = selectedMonths.reduce((totalBytes, month) => totalBytes + month.bytes, 0);
+  const invalidRange = !startDate || !endDate || startDate > endDate || selectedMonths.length === 0;
+
+  async function runQuery(page: number) {
+    if (!manifest || invalidRange) return;
+    setIsRunning(true);
+    setError(null);
+    try {
+      setResult(await runDocumentQuery(manifest, {
+        startDate, endDate, query, type: typeFilter, agency: agencyFilter,
+        significance: significanceFilter, abstract: abstractFilter, page,
+      }));
+    } catch (caughtError) {
+      setError(caughtError instanceof Error ? caughtError.message : 'The browser query failed.');
+    } finally {
+      setIsRunning(false);
+    }
+  }
+
+  function updateScope(mode: ScopeMode) {
+    setScopeMode(mode);
+    setResult(null);
+    setError(null);
+  }
+
+  function updateFilter<T>(setter: (value: T) => void, value: T) {
+    setter(value);
+    setResult(null);
+    setError(null);
+  }
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    void runQuery(1);
+  }
+
+  function resetFilters() {
+    setScopeMode('recent-six');
+    setQuery('');
+    setTypeFilter('');
+    setAgencyFilter('');
+    setSignificanceFilter('any');
+    setAbstractFilter('any');
+    setResult(null);
+    setError(null);
+  }
+
+  const pageCount = result ? Math.max(1, Math.ceil(result.totalRows / PAGE_SIZE)) : 1;
+
+  return (
+    <main className="page-shell">
+      <header className="masthead">
+        <a className="wordmark" href="https://www.federalregister.gov/">
+          <span className="wordmark-mark" aria-hidden="true">FR</span>
+          <span>Federal Register Explorer</span>
+        </a>
+        <span className="masthead-note">Snapshot research</span>
+      </header>
+
+      <section className="intro" aria-labelledby="page-title">
+        <p className="eyebrow">GADGETSOFTWARE / FEDERAL REGISTER</p>
+        <h1 id="page-title">Explore the snapshot</h1>
+        <p className="intro-copy">
+          Search publication metadata by date, document type, and agency. Search covers titles and abstracts only; source documents remain one click away.
+        </p>
+      </section>
+
+      <section className="scope-strip" aria-label="Snapshot summary">
+        <div>
+          <span className="scope-label">Snapshot</span>
+          <code>{manifest?.dataset_revision.slice(0, 12) ?? 'Loading…'}</code>
+        </div>
+        <div>
+          <span className="scope-label">Available dates</span>
+          <strong>{firstSnapshotDate || '…'} to {lastSnapshotDate || '…'}</strong>
+        </div>
+        <div>
+          <span className="scope-label">Selected scope</span>
+          <strong>{selectedMonths.length} months / {selectedBytes.toLocaleString()} bytes</strong>
+        </div>
+        <div>
+          <span className="scope-label">Snapshot documents</span>
+          <strong>{manifest?.totals.rows.toLocaleString() ?? '…'}</strong>
+        </div>
+      </section>
+
+      <section className="check-section" aria-labelledby="search-title">
+        <form onSubmit={handleSubmit}>
+          <div className="section-heading">
+            <div>
+              <p className="eyebrow">SEARCH AND FILTER</p>
+              <h2 id="search-title">Set the research scope</h2>
+            </div>
+            <button className="run-button" type="submit" disabled={!manifest || invalidRange || isRunning}>
+              {isRunning ? 'Searching…' : 'Search snapshot'}
+            </button>
+          </div>
+
+          <fieldset className="scope-modes">
+            <legend>Date scope</legend>
+            <label><input type="radio" name="scope" checked={scopeMode === 'recent-six'} onChange={() => updateScope('recent-six')} /> Recent 6 months</label>
+            <label><input type="radio" name="scope" checked={scopeMode === 'custom'} onChange={() => updateScope('custom')} /> Custom range</label>
+            <label><input type="radio" name="scope" checked={scopeMode === 'all'} onChange={() => updateScope('all')} /> All snapshot</label>
+          </fieldset>
+
+          {scopeMode === 'custom' && (
+            <div className="date-range-fields">
+              <label>
+                <span>From</span>
+                <input type="date" min={firstSnapshotDate} max={lastSnapshotDate} value={customStartDate} onChange={(event) => { setCustomStartDate(event.target.value); setResult(null); }} required />
+              </label>
+              <label>
+                <span>Through (inclusive)</span>
+                <input type="date" min={firstSnapshotDate} max={lastSnapshotDate} value={customEndDate} onChange={(event) => { setCustomEndDate(event.target.value); setResult(null); }} required />
+              </label>
+              {invalidRange && <span className="field-error">Choose a valid date range within the snapshot.</span>}
+            </div>
+          )}
+
+          <div className="filter-grid">
+            <label className="search-field">
+              <span>Document number or title/abstract terms</span>
+              <input type="search" value={query} onChange={(event) => updateFilter(setQuery, event.target.value)} placeholder="Exact number or all terms" />
+              <small>Exact document number takes precedence. Otherwise, every term must match title or abstract.</small>
+            </label>
+            <label>
+              <span>Document type</span>
+              <select value={typeFilter} onChange={(event) => updateFilter(setTypeFilter, event.target.value)}>
+                <option value="">All types</option>
+                {DOCUMENT_TYPES.map((type) => <option key={type} value={type}>{type}</option>)}
+              </select>
+            </label>
+            <label>
+              <span>Agency name contains</span>
+              <input type="search" value={agencyFilter} onChange={(event) => updateFilter(setAgencyFilter, event.target.value)} placeholder="Any associated agency" />
+            </label>
+            <label>
+              <span>Significance flag</span>
+              <select value={significanceFilter} onChange={(event) => updateFilter(setSignificanceFilter, event.target.value as SignificanceFilter)}>
+                <option value="any">Any / unknown</option>
+                <option value="true">True</option>
+                <option value="false">False</option>
+                <option value="unknown">Unknown only</option>
+              </select>
+            </label>
+            <label>
+              <span>Abstract</span>
+              <select value={abstractFilter} onChange={(event) => updateFilter(setAbstractFilter, event.target.value as AbstractFilter)}>
+                <option value="any">Available or missing</option>
+                <option value="available">Available</option>
+                <option value="missing">Missing</option>
+              </select>
+            </label>
+          </div>
+
+          <div className="form-actions">
+            <button className="secondary-button" type="button" onClick={resetFilters}>Reset</button>
+            <span className="scope-hint">Month files are loaded only when you search. Selected file bytes are shown above.</span>
+          </div>
+        </form>
+
+        {manifestError && <div className="error-panel" role="alert"><strong>Snapshot manifest unavailable</strong><p>{manifestError}</p></div>}
+        {isRunning && <p className="status-line" role="status">Loading selected month files and searching in your browser…</p>}
+        {error && <div className="error-panel" role="alert"><strong>Search failed</strong><p>{error}</p></div>}
+
+        {result && (
+          <div className="results-section">
+            <div className="result-meta" role="status">
+              <span>{result.totalRows.toLocaleString()} matching documents</span>
+              <span>{result.fileBytes.toLocaleString()} selected bytes</span>
+              <span>{result.elapsedMs.toLocaleString()} ms in DuckDB {result.engineVersion}</span>
+              <span>{result.schema.length} columns</span>
+            </div>
+
+            <div className="monthly-summary" aria-label="Monthly matching document counts">
+              {result.months.map((month) => (
+                <div className="month-row" key={month.month}>
+                  <span>{month.month}</span>
+                  <span>{month.rows.toLocaleString()}</span>
+                </div>
+              ))}
+            </div>
+
+            {result.documents.length === 0 ? (
+              <p className="empty-state">No documents match this scope and filter set.</p>
+            ) : (
+              <div className="table-wrap">
+                <table className="documents-table">
+                  <thead><tr><th scope="col">Document</th><th scope="col">Date / type</th><th scope="col">Agency associations</th><th scope="col">Abstract</th></tr></thead>
+                  <tbody>
+                    {result.documents.map((document) => (
+                      <tr key={document.id}>
+                        <td>
+                          {document.htmlUrl ? <a className="document-title" href={document.htmlUrl} target="_blank" rel="noreferrer">{document.title || document.documentNumber}</a> : <strong>{document.title || document.documentNumber}</strong>}
+                          <span className="document-number">{document.documentNumber}</span>
+                        </td>
+                        <td>{document.publicationDate}<br />{document.type}</td>
+                        <td>{document.agencies.join(', ') || 'Not provided'}</td>
+                        <td>{document.abstract ? `${document.abstract.slice(0, 260)}${document.abstract.length > 260 ? '…' : ''}` : <em>Abstract unavailable in this snapshot</em>}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            <div className="pagination">
+              <button className="secondary-button" type="button" onClick={() => void runQuery(result.page - 1)} disabled={isRunning || result.page <= 1}>Previous</button>
+              <span>Page {result.page} of {pageCount}</span>
+              <button className="secondary-button" type="button" onClick={() => void runQuery(result.page + 1)} disabled={isRunning || result.page >= pageCount}>Next</button>
+            </div>
+          </div>
+        )}
+
+        {!result && !error && !manifestError && !isRunning && (
+          <p className="empty-state">Choose a scope and filters, then search the pinned snapshot.</p>
+        )}
+      </section>
+
+      <footer className="page-footer">
+        <span>Source: GadgetSoftware / federal-register</span>
+        <span>Snapshot counts are not a completeness or policy-trend claim.</span>
+      </footer>
+    </main>
+  );
+}
+
+export default Explorer;

src/main.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+import Explorer from './Explorer';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <Explorer />
   </React.StrictMode>,
 );