From f392a9340f16d094284b3f93641d1f0004458cc1 Mon Sep 17 00:00:00 2001
From: Daniel Diaz <39510674+IslandRhythms@users.noreply.github.com>
Date: Mon, 27 Apr 2026 14:58:39 -0400
Subject: [PATCH 1/4] date picker autocomplete

---
 .../src/_util/document-search-autocomplete.js | 59 +++++++++++++++++++
 .../document-search/document-search.html      | 22 ++++++-
 .../models/document-search/document-search.js | 39 +++++++++++-
 3 files changed, 116 insertions(+), 4 deletions(-)

diff --git a/frontend/src/_util/document-search-autocomplete.js b/frontend/src/_util/document-search-autocomplete.js
index df006b76..b957b191 100644
--- a/frontend/src/_util/document-search-autocomplete.js
+++ b/frontend/src/_util/document-search-autocomplete.js
@@ -218,11 +218,70 @@ function applySuggestion(searchText, cursorPos, suggestion) {
   return null;
 }
 
+/**
+ * When the cursor is inside a Date(…) or new Date(…) argument, returns the
+ * slice indices of that argument so a picker can replace it with a quoted ISO string.
+ */
+function getDatePickerInsertionRange(searchText, cursorPos) {
+  const before = searchText.slice(0, cursorPos);
+  const re = /((?:new\s+)?Date\s*\(\s*)([^)]*)$/i;
+  const m = before.match(re);
+  if (!m) {
+    return null;
+  }
+  const innerStart = m.index + m[1].length;
+  const after = searchText.slice(cursorPos);
+  let closeIdx = -1;
+  let parenDepth = 0;
+  for (let k = 0; k < after.length; k++) {
+    const ch = after[k];
+    if (ch === '(') {
+      parenDepth++;
+    } else if (ch === ')') {
+      if (parenDepth === 0) {
+        closeIdx = cursorPos + k;
+        break;
+      }
+      parenDepth--;
+    }
+  }
+  const innerEnd = closeIdx >= 0 ? closeIdx : cursorPos;
+  return { innerStart, innerEnd };
+}
+
+function dateArgumentSliceToDatetimeLocal(slice) {
+  const t = slice.trim();
+  if (!t) {
+    return '';
+  }
+  const unquoted = (t.startsWith('"') && t.endsWith('"')) || (t.startsWith('\'') && t.endsWith('\''))
+    ? t.slice(1, -1)
+    : t;
+  const d = new Date(unquoted);
+  if (Number.isNaN(d.getTime())) {
+    return '';
+  }
+  const pad = n => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function insertQuotedIsoInDateArgument(searchText, range, isoString) {
+  const quoted = JSON.stringify(isoString);
+  const { innerStart, innerEnd } = range;
+  return {
+    text: searchText.slice(0, innerStart) + quoted + searchText.slice(innerEnd),
+    newCursorPos: innerStart + quoted.length
+  };
+}
+
 module.exports = {
   buildAutocompleteTrie,
   getAutocompleteContext,
   getAutocompleteSuggestions,
   applySuggestion,
+  getDatePickerInsertionRange,
+  dateArgumentSliceToDatetimeLocal,
+  insertQuotedIsoInDateArgument,
   QUERY_SELECTORS,
   VALUE_HELPERS,
   FUNCTION_HELPERS
diff --git a/frontend/src/models/document-search/document-search.html b/frontend/src/models/document-search/document-search.html
index f78572f1..00c874e1 100644
--- a/frontend/src/models/document-search/document-search.html
+++ b/frontend/src/models/document-search/document-search.html
@@ -5,11 +5,28 @@
     type="text"
     placeholder="Filter (supports JS, dates, ObjectIds, and more)"
     v-model="searchText"
-    @click="initFilter"
+    @click="initFilter(); updateAutocomplete()"
     @input="updateAutocomplete"
+    @keyup="updateAutocomplete"
     @keydown="handleKeyDown"
   />
-  <ul v-if="autocompleteSuggestions.length" class="absolute z-[9999] bg-surface border border-edge-strong rounded mt-1 w-full max-h-40 overflow-y-auto shadow">
+  <div
+    v-if="datePickerContext || autocompleteSuggestions.length"
+    class="absolute z-[9999] bg-surface border border-edge-strong rounded mt-1 w-full shadow"
+  >
+    <div
+      v-if="datePickerContext"
+      class="flex flex-wrap items-center gap-2 px-2 py-2 border-b border-edge-strong text-sm"
+    >
+      <span class="text-content-secondary shrink-0">Date</span>
+      <input
+        class="min-w-0 flex-1 h-8 rounded border border-edge-strong px-1 font-mono text-sm outline-edge-strong focus:ring-1 focus:ring-primary-subtle"
+        type="datetime-local"
+        :value="datePickerLocalValue"
+        @change="applyDateFromPicker($event.target.value)"
+      />
+    </div>
+    <ul v-if="autocompleteSuggestions.length" class="max-h-40 overflow-y-auto">
     <li
       v-for="(suggestion, index) in autocompleteSuggestions"
       :key="suggestion"
@@ -20,4 +37,5 @@
       {{ suggestion }}
     </li>
   </ul>
+  </div>
 </form>
diff --git a/frontend/src/models/document-search/document-search.js b/frontend/src/models/document-search/document-search.js
index 903f9e9a..637bbe6f 100644
--- a/frontend/src/models/document-search/document-search.js
+++ b/frontend/src/models/document-search/document-search.js
@@ -4,7 +4,10 @@ const template = require('./document-search.html');
 const {
   buildAutocompleteTrie,
   getAutocompleteSuggestions,
-  applySuggestion
+  applySuggestion,
+  getDatePickerInsertionRange,
+  dateArgumentSliceToDatetimeLocal,
+  insertQuotedIsoInDateArgument
 } = require('../../_util/document-search-autocomplete');
 
 module.exports = app => app.component('document-search', {
@@ -24,7 +27,9 @@ module.exports = app => app.component('document-search', {
       autocompleteSuggestions: [],
       autocompleteIndex: 0,
       autocompleteTrie: null,
-      searchText: this.value || ''
+      searchText: this.value || '',
+      datePickerContext: null,
+      datePickerLocalValue: ''
     };
   },
   watch: {
@@ -64,6 +69,15 @@ module.exports = app => app.component('document-search', {
       const input = this.$refs.searchInput;
       const cursorPos = input ? input.selectionStart : 0;
 
+      const dateRange = getDatePickerInsertionRange(this.searchText, cursorPos);
+      this.datePickerContext = dateRange;
+      if (dateRange) {
+        const argSlice = this.searchText.slice(dateRange.innerStart, dateRange.innerEnd);
+        this.datePickerLocalValue = dateArgumentSliceToDatetimeLocal(argSlice);
+      } else {
+        this.datePickerLocalValue = '';
+      }
+
       if (this.autocompleteTrie) {
         this.autocompleteSuggestions = getAutocompleteSuggestions(
           this.autocompleteTrie,
@@ -76,6 +90,27 @@ module.exports = app => app.component('document-search', {
         this.autocompleteSuggestions = [];
       }
     },
+    applyDateFromPicker(localDateTime) {
+      if (!localDateTime || !this.datePickerContext) {
+        return;
+      }
+      const iso = new Date(localDateTime).toISOString();
+      const result = insertQuotedIsoInDateArgument(
+        this.searchText,
+        this.datePickerContext,
+        iso
+      );
+      const input = this.$refs.searchInput;
+      this.searchText = result.text;
+      this.autocompleteSuggestions = [];
+      this.$nextTick(() => {
+        if (input) {
+          input.focus();
+          input.setSelectionRange(result.newCursorPos, result.newCursorPos);
+        }
+        this.updateAutocomplete();
+      });
+    },
     handleKeyDown(ev) {
       if (this.autocompleteSuggestions.length === 0) {
         return;

From 9402d2cabb9979559987c964250a8b57a7e26efd Mon Sep 17 00:00:00 2001
From: Daniel Diaz <39510674+IslandRhythms@users.noreply.github.com>
Date: Fri, 8 May 2026 15:38:43 -0400
Subject: [PATCH 2/4] address Val comments

---
 .../src/_util/document-search-autocomplete.js |   8 +-
 .../document-search/document-search.html      |   2 +
 .../models/document-search/document-search.js |  17 +++
 test/document-search-autocomplete.test.js     | 124 +++++++++++++++++-
 4 files changed, 147 insertions(+), 4 deletions(-)

diff --git a/frontend/src/_util/document-search-autocomplete.js b/frontend/src/_util/document-search-autocomplete.js
index b957b191..1a8a23d0 100644
--- a/frontend/src/_util/document-search-autocomplete.js
+++ b/frontend/src/_util/document-search-autocomplete.js
@@ -246,7 +246,8 @@ function getDatePickerInsertionRange(searchText, cursorPos) {
     }
   }
   const innerEnd = closeIdx >= 0 ? closeIdx : cursorPos;
-  return { innerStart, innerEnd };
+  const needsClosingParen = closeIdx < 0;
+  return { innerStart, innerEnd, needsClosingParen };
 }
 
 function dateArgumentSliceToDatetimeLocal(slice) {
@@ -268,9 +269,10 @@ function dateArgumentSliceToDatetimeLocal(slice) {
 function insertQuotedIsoInDateArgument(searchText, range, isoString) {
   const quoted = JSON.stringify(isoString);
   const { innerStart, innerEnd } = range;
+  const closing = range.needsClosingParen === true ? ')' : '';
   return {
-    text: searchText.slice(0, innerStart) + quoted + searchText.slice(innerEnd),
-    newCursorPos: innerStart + quoted.length
+    text: searchText.slice(0, innerStart) + quoted + closing + searchText.slice(innerEnd),
+    newCursorPos: innerStart + quoted.length + closing.length
   };
 }
 
diff --git a/frontend/src/models/document-search/document-search.html b/frontend/src/models/document-search/document-search.html
index 00c874e1..feda0dc5 100644
--- a/frontend/src/models/document-search/document-search.html
+++ b/frontend/src/models/document-search/document-search.html
@@ -12,6 +12,7 @@
   />
   <div
     v-if="datePickerContext || autocompleteSuggestions.length"
+    ref="autocompleteDropdown"
     class="absolute z-[9999] bg-surface border border-edge-strong rounded mt-1 w-full shadow"
   >
     <div
@@ -20,6 +21,7 @@
     >
       <span class="text-content-secondary shrink-0">Date</span>
       <input
+        ref="datePickerInput"
         class="min-w-0 flex-1 h-8 rounded border border-edge-strong px-1 font-mono text-sm outline-edge-strong focus:ring-1 focus:ring-primary-subtle"
         type="datetime-local"
         :value="datePickerLocalValue"
diff --git a/frontend/src/models/document-search/document-search.js b/frontend/src/models/document-search/document-search.js
index 637bbe6f..c520c781 100644
--- a/frontend/src/models/document-search/document-search.js
+++ b/frontend/src/models/document-search/document-search.js
@@ -48,8 +48,25 @@ module.exports = app => app.component('document-search', {
   },
   mounted() {
     this.$refs.searchInput.focus();
+    this._onDocPointerDownCloseDatePicker = this.onDocumentPointerDownCloseDatePicker.bind(this);
+    document.addEventListener('pointerdown', this._onDocPointerDownCloseDatePicker, true);
+  },
+  beforeUnmount() {
+    if (this._onDocPointerDownCloseDatePicker) {
+      document.removeEventListener('pointerdown', this._onDocPointerDownCloseDatePicker, true);
+    }
   },
   methods: {
+    onDocumentPointerDownCloseDatePicker(ev) {
+      const drop = this.$refs.autocompleteDropdown;
+      if (!drop || drop.contains(ev.target)) {
+        return;
+      }
+      const dateEl = this.$refs.datePickerInput;
+      if (dateEl) {
+        dateEl.blur();
+      }
+    },
     emitSearch() {
       this.$emit('input', this.searchText);
       this.$emit('search', this.searchText);
diff --git a/test/document-search-autocomplete.test.js b/test/document-search-autocomplete.test.js
index 5ede496f..88c3dbe2 100644
--- a/test/document-search-autocomplete.test.js
+++ b/test/document-search-autocomplete.test.js
@@ -5,7 +5,11 @@ const {
   buildAutocompleteTrie,
   getAutocompleteContext,
   getAutocompleteSuggestions,
-  applySuggestion
+  applySuggestion,
+  getDatePickerInsertionRange,
+  dateArgumentSliceToDatetimeLocal,
+  insertQuotedIsoInDateArgument,
+  FUNCTION_HELPERS
 } = require('../frontend/src/_util/document-search-autocomplete');
 
 describe('document-search-autocomplete', function() {
@@ -277,4 +281,122 @@ describe('document-search-autocomplete', function() {
       assert.strictEqual(result.text, '{ "name":');
     });
   });
+
+  describe('getDatePickerInsertionRange()', function() {
+    it('returns null when the cursor is not inside Date(...)', function() {
+      assert.strictEqual(getDatePickerInsertionRange('{ x: 1 }', 5), null);
+      assert.strictEqual(getDatePickerInsertionRange('{ d: 1 }', '{ d: '.length), null);
+    });
+
+    it('detects new Date( at end of before', function() {
+      const searchText = '{ x: new Date(';
+      const cursorPos = searchText.length;
+      const range = getDatePickerInsertionRange(searchText, cursorPos);
+
+      assert.ok(range);
+      assert.strictEqual(searchText.slice(0, range.innerStart).endsWith('new Date('), true);
+      assert.strictEqual(range.needsClosingParen, true);
+      assert.strictEqual(range.innerEnd, cursorPos);
+    });
+
+    it('sets needsClosingParen false when ) is present after the cursor', function() {
+      const searchText = '{ createdAt: Date() }';
+      const cursorPos = '{ createdAt: Date('.length;
+      const range = getDatePickerInsertionRange(searchText, cursorPos);
+
+      assert.ok(range);
+      assert.strictEqual(range.needsClosingParen, false);
+      assert.strictEqual(searchText.slice(range.innerStart, range.innerEnd), '');
+      assert.strictEqual(searchText[range.innerEnd], ')');
+    });
+
+    it('sets needsClosingParen true when no ) appears after the cursor', function() {
+      const searchText = '{ createdAt: Date( }';
+      const cursorPos = '{ createdAt: Date('.length;
+      const range = getDatePickerInsertionRange(searchText, cursorPos);
+
+      assert.ok(range);
+      assert.strictEqual(range.needsClosingParen, true);
+      assert.strictEqual(range.innerEnd, cursorPos);
+    });
+
+    it('finds inner slice when cursor is before the closing quote of a literal', function() {
+      const searchText = '{ createdAt: Date("2020-01-01") }';
+      const cursorPos = '{ createdAt: Date("2020-01-01'.length;
+      const range = getDatePickerInsertionRange(searchText, cursorPos);
+
+      assert.ok(range);
+      assert.strictEqual(searchText.slice(range.innerStart, range.innerEnd), '"2020-01-01"');
+      assert.strictEqual(range.needsClosingParen, false);
+    });
+  });
+
+  describe('dateArgumentSliceToDatetimeLocal()', function() {
+    it('returns empty string for blank or invalid input', function() {
+      assert.strictEqual(dateArgumentSliceToDatetimeLocal(''), '');
+      assert.strictEqual(dateArgumentSliceToDatetimeLocal('   '), '');
+      assert.strictEqual(dateArgumentSliceToDatetimeLocal('not-a-date'), '');
+    });
+
+    it('returns YYYY-MM-DDTHH:mm for a parseable slice', function() {
+      const result = dateArgumentSliceToDatetimeLocal('2020-06-15T14:30');
+      assert.ok(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(result));
+      assert.strictEqual(result.slice(0, 10), '2020-06-15');
+    });
+
+    it('strips surrounding quotes before parsing', function() {
+      const result = dateArgumentSliceToDatetimeLocal('"2021-12-25T08:00:00.000Z"');
+      assert.ok(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(result));
+    });
+  });
+
+  describe('insertQuotedIsoInDateArgument()', function() {
+    it('replaces the inner range with JSON-stringified ISO and no extra ) by default', function() {
+      const searchText = '{ d: Date(OLD) }';
+      const prefix = '{ d: Date(';
+      const inner = 'OLD';
+      const innerStart = prefix.length;
+      const innerEnd = innerStart + inner.length;
+      const range = { innerStart, innerEnd, needsClosingParen: false };
+      const iso = '2022-03-04T12:00:00.000Z';
+
+      const result = insertQuotedIsoInDateArgument(searchText, range, iso);
+      const expectedQuoted = JSON.stringify(iso);
+
+      assert.strictEqual(result.text, '{ d: Date(' + expectedQuoted + ') }');
+      assert.strictEqual(result.newCursorPos, innerStart + expectedQuoted.length);
+    });
+
+    it('appends ) when needsClosingParen is true', function() {
+      const searchText = '{ d: Date( }';
+      const innerStart = '{ d: Date('.length;
+      const range = { innerStart, innerEnd: innerStart, needsClosingParen: true };
+      const iso = '2023-01-02T00:00:00.000Z';
+
+      const result = insertQuotedIsoInDateArgument(searchText, range, iso);
+      const expectedQuoted = JSON.stringify(iso);
+
+      assert.ok(result.text.includes('{ d: Date(' + expectedQuoted + ')'));
+      assert.strictEqual(result.newCursorPos, innerStart + expectedQuoted.length + 1);
+    });
+
+    it('does not append ) when needsClosingParen is omitted (falsy)', function() {
+      const searchText = '{ d: Date(x) }';
+      const innerStart = '{ d: Date('.length;
+      const range = { innerStart, innerEnd: innerStart + 1, needsClosingParen: false };
+      const result = insertQuotedIsoInDateArgument(searchText, range, '2000-01-01T00:00:00.000Z');
+
+      assert.strictEqual(result.text.indexOf('))'), -1);
+      assert.ok(result.text.endsWith(') }'));
+    });
+  });
+
+  describe('FUNCTION_HELPERS', function() {
+    it('includes Date ObjectId and objectIdRange', function() {
+      assert.ok(FUNCTION_HELPERS.has('Date'));
+      assert.ok(FUNCTION_HELPERS.has('ObjectId'));
+      assert.ok(FUNCTION_HELPERS.has('objectIdRange'));
+      assert.ok(!FUNCTION_HELPERS.has('Math'));
+    });
+  });
 });

From 8cd1e7326d928b2d9366559c866f89b7274359a3 Mon Sep 17 00:00:00 2001
From: Daniel Diaz <39510674+IslandRhythms@users.noreply.github.com>
Date: Fri, 8 May 2026 15:53:53 -0400
Subject: [PATCH 3/4] copilot suggestions

---
 .../document-search/document-search.html       |  4 ++--
 .../models/document-search/document-search.js  | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/models/document-search/document-search.html b/frontend/src/models/document-search/document-search.html
index feda0dc5..9a67828d 100644
--- a/frontend/src/models/document-search/document-search.html
+++ b/frontend/src/models/document-search/document-search.html
@@ -5,9 +5,9 @@
     type="text"
     placeholder="Filter (supports JS, dates, ObjectIds, and more)"
     v-model="searchText"
-    @click="initFilter(); updateAutocomplete()"
+    @click="initFilter($event); updateAutocomplete()"
     @input="updateAutocomplete"
-    @keyup="updateAutocomplete"
+    @keyup="onSearchKeyup"
     @keydown="handleKeyDown"
   />
   <div
diff --git a/frontend/src/models/document-search/document-search.js b/frontend/src/models/document-search/document-search.js
index c520c781..a6662703 100644
--- a/frontend/src/models/document-search/document-search.js
+++ b/frontend/src/models/document-search/document-search.js
@@ -82,6 +82,15 @@ module.exports = app => app.component('document-search', {
         });
       }
     },
+    onSearchKeyup(ev) {
+      if (
+        this.autocompleteSuggestions.length > 0 &&
+        (ev.key === 'ArrowUp' || ev.key === 'ArrowDown')
+      ) {
+        return;
+      }
+      this.updateAutocomplete();
+    },
     updateAutocomplete() {
       const input = this.$refs.searchInput;
       const cursorPos = input ? input.selectionStart : 0;
@@ -111,7 +120,14 @@ module.exports = app => app.component('document-search', {
       if (!localDateTime || !this.datePickerContext) {
         return;
       }
-      const iso = new Date(localDateTime).toISOString();
+      const picked = new Date(localDateTime);
+      if (Number.isNaN(picked.getTime())) {
+        if (this.$toast) {
+          this.$toast.error('Invalid date or time. Enter a valid date and time, then try again.');
+        }
+        return;
+      }
+      const iso = picked.toISOString();
       const result = insertQuotedIsoInDateArgument(
         this.searchText,
         this.datePickerContext,

From 3fae467f98a4aa343cd925c00de9f2341e1aed2e Mon Sep 17 00:00:00 2001
From: Daniel Diaz <39510674+IslandRhythms@users.noreply.github.com>
Date: Fri, 8 May 2026 18:38:20 -0400
Subject: [PATCH 4/4] new date UI

---
 .../date-range-filter/date-range-filter.html  | 205 +++++++++++
 .../date-range-filter/date-range-filter.js    | 327 ++++++++++++++++++
 frontend/src/models/models.html               |   4 +
 3 files changed, 536 insertions(+)
 create mode 100644 frontend/src/models/date-range-filter/date-range-filter.html
 create mode 100644 frontend/src/models/date-range-filter/date-range-filter.js

diff --git a/frontend/src/models/date-range-filter/date-range-filter.html b/frontend/src/models/date-range-filter/date-range-filter.html
new file mode 100644
index 00000000..a65cbcb0
--- /dev/null
+++ b/frontend/src/models/date-range-filter/date-range-filter.html
@@ -0,0 +1,205 @@
+<div class="relative shrink-0" ref="root">
+  <button
+    type="button"
+    @click="togglePanel"
+    :class="[
+      'rounded-md p-1.5 shrink-0 border shadow-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+      panelOpen
+        ? 'border-primary bg-primary-subtle text-primary ring-1 ring-inset ring-primary/25'
+        : 'border-edge-strong bg-surface text-content-secondary hover:bg-muted hover:text-content hover:border-edge'
+    ]"
+    title="Filter by date"
+    aria-label="Filter by date"
+    :aria-expanded="panelOpen"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
+    </svg>
+  </button>
+  <div
+    v-if="panelOpen"
+    class="absolute right-0 left-auto top-full z-[80] mt-1 w-[min(17.5rem,calc(100vw-0.75rem))] max-h-[min(26rem,calc(100dvh-4.5rem))] overflow-x-hidden overflow-y-auto overscroll-contain rounded-md border border-edge bg-surface py-2 px-2.5 shadow-lg ring-1 ring-black/5"
+    role="dialog"
+    aria-label="Date filter"
+    @keyup.esc.prevent="closePanel"
+  >
+    <div class="mb-1.5 flex flex-wrap items-center justify-between gap-1.5">
+      <div class="text-[10px] font-semibold uppercase tracking-wider leading-tight text-gray-400">Anchor (UTC)</div>
+      <div
+        class="isolate inline-flex shrink-0 rounded-md shadow-sm ring-1 ring-inset ring-edge"
+        role="group"
+        aria-label="Anchor input mode"
+      >
+        <button
+          type="button"
+          @click="anchorIsoMode = false"
+          class="relative inline-flex items-center rounded-none rounded-l-md px-2 py-0.5 text-[10px] font-semibold focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-subtle"
+          :class="!anchorIsoMode ? 'bg-primary-subtle text-primary z-[1]' : 'bg-page text-content-secondary hover:bg-muted'"
+        >
+          Numbers
+        </button>
+        <button
+          type="button"
+          @click="anchorIsoMode = true"
+          class="relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-0.5 text-[10px] font-semibold focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-subtle"
+          :class="anchorIsoMode ? 'bg-primary-subtle text-primary z-[1]' : 'bg-page text-content-secondary hover:bg-muted'"
+        >
+          ISO
+        </button>
+      </div>
+    </div>
+    <div v-if="anchorIsoMode" class="mb-2">
+      <label class="block">
+        <span class="sr-only">ISO 8601</span>
+        <input
+          v-model="isoAnchorInput"
+          type="text"
+          autocomplete="off"
+          spellcheck="false"
+          placeholder="2026-05-08T14:30:00Z"
+          class="w-full rounded border border-edge-strong px-1.5 py-1 font-mono text-xs text-content placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary-subtle"
+          @paste="onIsoAnchorPaste"
+        />
+      </label>
+    </div>
+    <div v-else class="mb-2 grid grid-cols-3 gap-x-1.5 gap-y-1.5">
+      <label class="flex min-w-0 flex-col gap-0.5">
+        <span class="text-[10px] font-medium leading-none text-content-secondary">Year</span>
+        <input
+          v-model.number="anchorYear"
+          type="number"
+          inputmode="numeric"
+          min="1970"
+          max="2100"
+          step="1"
+          placeholder="–"
+          class="w-full min-w-0 rounded border border-edge-strong px-1.5 py-1 text-xs tabular-nums leading-snug text-content focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary-subtle"
+        />
+      </label>
+      <label class="flex min-w-0 flex-col gap-0.5">
+        <span class="text-[10px] font-medium leading-none text-content-secondary">Mo</span>
+        <input
+          v-model.number="anchorMonth"
+          type="number"
+          inputmode="numeric"
+          min="1"
+          max="12"
+          step="1"
+          placeholder="–"
+          class="w-full min-w-0 rounded border border-edge-strong px-1.5 py-1 text-xs tabular-nums leading-snug text-content focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary-subtle"
+        />
+      </label>
+      <label class="flex min-w-0 flex-col gap-0.5">
+        <span class="text-[10px] font-medium leading-none text-content-secondary">Day</span>
+        <input
+          v-model.number="anchorDay"
+          type="number"
+          inputmode="numeric"
+          min="1"
+          max="31"
+          step="1"
+          placeholder="–"
+          class="w-full min-w-0 rounded border border-edge-strong px-1.5 py-1 text-xs tabular-nums leading-snug text-content focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary-subtle"
+        />
+      </label>
+      <label class="flex min-w-0 flex-col gap-0.5">
+        <span class="text-[10px] font-medium leading-none text-content-secondary">Hr</span>
+        <input
+          v-model.number="anchorHour"
+          type="number"
+          inputmode="numeric"
+          min="0"
+          max="23"
+          step="1"
+          placeholder="–"
+          class="w-full min-w-0 rounded border border-edge-strong px-1.5 py-1 text-xs tabular-nums leading-snug text-content focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary-subtle"
+        />
+      </label>
+      <label class="flex min-w-0 flex-col gap-0.5">
+        <span class="text-[10px] font-medium leading-none text-content-secondary">Min</span>
+        <input
+          v-model.number="anchorMinute"
+          type="number"
+          inputmode="numeric"
+          min="0"
+          max="59"
+          step="1"
+          placeholder="–"
+          class="w-full min-w-0 rounded border border-edge-strong px-1.5 py-1 text-xs tabular-nums leading-snug text-content focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary-subtle"
+        />
+      </label>
+    </div>
+    <div v-if="!useCustomPath" class="mb-2">
+      <label class="block text-[10px] font-semibold uppercase tracking-wider text-gray-400 mb-0.5">Date field</label>
+      <select
+        v-model="selectedPath"
+        class="w-full max-w-full rounded border border-edge-strong px-1.5 py-1 text-xs text-content focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary-subtle"
+      >
+        <option v-for="p in datePaths" :key="p" :value="p">{{ p }}</option>
+      </select>
+    </div>
+    <div v-else class="mb-2">
+      <label class="block text-[10px] font-semibold uppercase tracking-wider text-gray-400 mb-0.5">Field path</label>
+      <input
+        v-model="customPath"
+        type="text"
+        placeholder="createdAt"
+        class="w-full max-w-full rounded border border-edge-strong px-1.5 py-1 text-xs font-mono text-content placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary-subtle"
+      />
+      <p class="mt-0.5 text-[10px] leading-snug text-content-tertiary">No Date fields in schema; enter path.</p>
+    </div>
+    <div class="mb-2 grid grid-cols-2 gap-1">
+      <button
+        type="button"
+        title="Replace filter: field strictly greater than UTC anchor (hour and minute included)"
+        class="rounded bg-primary px-2 py-1.5 text-xs font-semibold tabular-nums text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+        @click="applyAnchorComparison('$gt')"
+      >
+        $gt
+      </button>
+      <button
+        type="button"
+        title="Replace filter: field strictly less than UTC anchor (hour and minute included)"
+        class="rounded bg-primary px-2 py-1.5 text-xs font-semibold tabular-nums text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+        @click="applyAnchorComparison('$lt')"
+      >
+        $lt
+      </button>
+    </div>
+    <div class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 mb-0.5">From anchor instant</div>
+    <div class="grid grid-cols-2 gap-1">
+      <button
+        type="button"
+        title="Replace filter—7 days ending at anchor instant"
+        class="rounded border border-edge bg-page px-1.5 py-1 text-left text-[10px] leading-tight text-content-secondary hover:bg-muted"
+        @click="presetRangePreviousDays(7)"
+      >
+        −7 d
+      </button>
+      <button
+        type="button"
+        title="Replace filter—7 days starting at anchor instant"
+        class="rounded border border-edge bg-page px-1.5 py-1 text-left text-[10px] leading-tight text-content-secondary hover:bg-muted"
+        @click="presetRangeNextDays(7)"
+      >
+        +7 d
+      </button>
+      <button
+        type="button"
+        title="Replace filter—3 weeks ending at anchor instant"
+        class="rounded border border-edge bg-page px-1.5 py-1 text-left text-[10px] leading-tight text-content-secondary hover:bg-muted"
+        @click="presetRangePreviousWeeks(3)"
+      >
+        −3 wk
+      </button>
+      <button
+        type="button"
+        title="Replace filter—3 weeks starting at anchor instant"
+        class="rounded border border-edge bg-page px-1.5 py-1 text-left text-[10px] leading-tight text-content-secondary hover:bg-muted"
+        @click="presetRangeNextWeeks(3)"
+      >
+        +3 wk
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/frontend/src/models/date-range-filter/date-range-filter.js b/frontend/src/models/date-range-filter/date-range-filter.js
new file mode 100644
index 00000000..e9946ef3
--- /dev/null
+++ b/frontend/src/models/date-range-filter/date-range-filter.js
@@ -0,0 +1,327 @@
+'use strict';
+
+const template = require('./date-range-filter.html');
+
+const MS_DAY = 24 * 60 * 60 * 1000;
+
+function intFromNumberInput(v) {
+  if (v === '' || v === null || v === undefined || (typeof v === 'number' && !Number.isFinite(v))) {
+    return NaN;
+  }
+  const n = Number(v);
+  return Number.isFinite(n) ? Math.trunc(n) : NaN;
+}
+
+/**
+ * Anchor from typed parts interpreted as UTC (calendar + clock in Z).
+ * The emitted filter uses toISOString(), so the numbers you type match that string (no local TZ shift).
+ */
+function utcDateFromParts(year, month, day, hour, minute) {
+  const y = intFromNumberInput(year);
+  const mo = intFromNumberInput(month);
+  const d = intFromNumberInput(day);
+  const h = intFromNumberInput(hour);
+  const mi = intFromNumberInput(minute);
+  if (![y, mo, d, h, mi].every(n => Number.isFinite(n))) {
+    return null;
+  }
+  if (mo < 1 || mo > 12 || d < 1 || d > 31 || h < 0 || h > 23 || mi < 0 || mi > 59) {
+    return null;
+  }
+  const t = Date.UTC(y, mo - 1, d, h, mi, 0, 0);
+  const dt = new Date(t);
+  if (
+    dt.getUTCFullYear() !== y ||
+    dt.getUTCMonth() !== mo - 1 ||
+    dt.getUTCDate() !== d ||
+    dt.getUTCHours() !== h ||
+    dt.getUTCMinutes() !== mi
+  ) {
+    return null;
+  }
+  return dt;
+}
+
+/** Replace the filter bar entirely with this single-field date criterion. */
+function buildDateFilterSearchText(fieldPath, filterValueFragment) {
+  const key = JSON.stringify(fieldPath);
+  return `{ ${key}: ${filterValueFragment} }`;
+}
+
+function buildMongoDateRangeClause(start, end) {
+  const a = start.toISOString();
+  const b = end.toISOString();
+  return `{ $gte: new Date(${JSON.stringify(a)}), $lt: new Date(${JSON.stringify(b)}) }`;
+}
+
+/** @param {'$gt' | '$lt'} op */
+function buildMongoCompareClause(op, instant) {
+  const iso = instant.toISOString();
+  return `{ ${op}: new Date(${JSON.stringify(iso)}) }`;
+}
+
+function parseIso8601Like(raw) {
+  if (typeof raw !== 'string') {
+    return null;
+  }
+  const t = raw.trim();
+  if (!t) {
+    return null;
+  }
+  const d = new Date(t);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+function collectDatePathsFromSchema(schemaPaths) {
+  if (!Array.isArray(schemaPaths)) {
+    return [];
+  }
+  const out = [];
+  for (const p of schemaPaths) {
+    if (!p || typeof p.path !== 'string') {
+      continue;
+    }
+    if (p.instance === 'Date') {
+      out.push(p.path);
+    }
+    if (p.schema && typeof p.schema === 'object') {
+      for (const subKey of Object.keys(p.schema)) {
+        const sub = p.schema[subKey];
+        if (sub && sub.instance === 'Date') {
+          out.push(`${p.path}.${subKey}`);
+        }
+      }
+    }
+  }
+  const scorePath = path => {
+    const p = String(path).toLowerCase();
+    if (p === 'createdat') {
+      return 0;
+    }
+    if (p === 'updatedat') {
+      return 1;
+    }
+    if (p.endsWith('.createdat')) {
+      return 2;
+    }
+    if (p.endsWith('.updatedat')) {
+      return 3;
+    }
+    return 10;
+  };
+  out.sort((a, b) => {
+    const ds = scorePath(a) - scorePath(b);
+    if (ds !== 0) {
+      return ds;
+    }
+    return a.localeCompare(b);
+  });
+  return out;
+}
+
+module.exports = app => app.component('date-range-filter', {
+  template,
+  props: {
+    schemaPaths: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      panelOpen: false,
+      selectedPath: '',
+      customPath: '',
+      anchorYear: null,
+      anchorMonth: null,
+      anchorDay: null,
+      anchorHour: null,
+      anchorMinute: null,
+      anchorSeededOnce: false,
+      anchorIsoMode: false,
+      isoAnchorInput: '',
+      _onPointerDownOutside: null
+    };
+  },
+  computed: {
+    datePaths() {
+      return collectDatePathsFromSchema(this.schemaPaths);
+    },
+    useCustomPath() {
+      return this.datePaths.length === 0;
+    },
+    effectiveFieldPath() {
+      if (this.useCustomPath) {
+        return typeof this.customPath === 'string' ? this.customPath.trim() : '';
+      }
+      return typeof this.selectedPath === 'string' ? this.selectedPath.trim() : '';
+    }
+  },
+  watch: {
+    datePaths: {
+      handler(paths) {
+        if (paths.length === 0) {
+          return;
+        }
+        if (!paths.includes(this.selectedPath)) {
+          this.selectedPath = paths[0];
+        }
+      },
+      immediate: true
+    },
+    schemaPaths() {
+      if (this.datePaths.length > 0 && !this.selectedPath) {
+        this.selectedPath = this.datePaths[0];
+      }
+    }
+  },
+  methods: {
+    populateAnchorFromDate(dt) {
+      this.anchorYear = dt.getUTCFullYear();
+      this.anchorMonth = dt.getUTCMonth() + 1;
+      this.anchorDay = dt.getUTCDate();
+      this.anchorHour = dt.getUTCHours();
+      this.anchorMinute = dt.getUTCMinutes();
+    },
+    onIsoAnchorPaste(ev) {
+      const text = (ev.clipboardData && ev.clipboardData.getData('text/plain')) || '';
+      const trimmed = text.trim();
+      if (!trimmed) {
+        return;
+      }
+      ev.preventDefault();
+      this.isoAnchorInput = trimmed;
+      const d = parseIso8601Like(trimmed);
+      if (d) {
+        this.populateAnchorFromDate(d);
+        this.anchorSeededOnce = true;
+      }
+    },
+    togglePanel(ev) {
+      ev?.preventDefault?.();
+      this.panelOpen = !this.panelOpen;
+      if (this.panelOpen && !this.anchorSeededOnce) {
+        this.populateAnchorFromDate(new Date());
+        this.anchorSeededOnce = true;
+      }
+      this.attachOutsideListener();
+    },
+    closePanel() {
+      this.panelOpen = false;
+      this.detachOutsideListener();
+    },
+    attachOutsideListener() {
+      this.detachOutsideListener();
+      if (!this.panelOpen) {
+        return;
+      }
+      this._onPointerDownOutside = ev => {
+        const root = this.$refs.root;
+        if (!root || root.contains(ev.target)) {
+          return;
+        }
+        this.closePanel();
+      };
+      document.addEventListener('pointerdown', this._onPointerDownOutside, true);
+    },
+    detachOutsideListener() {
+      if (this._onPointerDownOutside) {
+        document.removeEventListener('pointerdown', this._onPointerDownOutside, true);
+        this._onPointerDownOutside = null;
+      }
+    },
+    resolveAnchorDate() {
+      let dt = null;
+      if (this.anchorIsoMode) {
+        dt = parseIso8601Like(this.isoAnchorInput);
+        if (!dt && this.$toast) {
+          this.$toast.error('Could not parse ISO 8601. Example: 2026-05-08T14:30:00.000Z');
+        }
+      } else {
+        dt = utcDateFromParts(
+          this.anchorYear,
+          this.anchorMonth,
+          this.anchorDay,
+          this.anchorHour,
+          this.anchorMinute
+        );
+        if (!dt && this.$toast) {
+          this.$toast.error('Enter a valid UTC date and time using the number fields.');
+        }
+      }
+      return dt;
+    },
+    validateField() {
+      if (!this.effectiveFieldPath) {
+        if (this.$toast) {
+          this.$toast.error('Choose or enter a date field path.');
+        }
+        return false;
+      }
+      return true;
+    },
+    syncNumbersFromResolvedAnchor(anchor) {
+      if (this.anchorIsoMode && anchor) {
+        this.populateAnchorFromDate(anchor);
+      }
+    },
+    commitDateRange(start, end) {
+      const clause = buildMongoDateRangeClause(start, end);
+      const nextFilter = buildDateFilterSearchText(this.effectiveFieldPath, clause);
+      this.$emit('apply', nextFilter);
+      this.closePanel();
+    },
+    applyAnchorComparison(op) {
+      if (op !== '$gt' && op !== '$lt') {
+        return;
+      }
+      if (!this.validateField()) {
+        return;
+      }
+      const anchor = this.resolveAnchorDate();
+      if (!anchor) {
+        return;
+      }
+      this.syncNumbersFromResolvedAnchor(anchor);
+      const clause = buildMongoCompareClause(op, anchor);
+      const nextFilter = buildDateFilterSearchText(this.effectiveFieldPath, clause);
+      this.$emit('apply', nextFilter);
+      this.closePanel();
+    },
+    presetRangeNextDays(days) {
+      if (!this.validateField()) {
+        return;
+      }
+      const anchor = this.resolveAnchorDate();
+      if (!anchor) {
+        return;
+      }
+      this.syncNumbersFromResolvedAnchor(anchor);
+      const start = anchor;
+      const end = new Date(anchor.getTime() + days * MS_DAY);
+      this.commitDateRange(start, end);
+    },
+    presetRangePreviousDays(days) {
+      if (!this.validateField()) {
+        return;
+      }
+      const anchor = this.resolveAnchorDate();
+      if (!anchor) {
+        return;
+      }
+      this.syncNumbersFromResolvedAnchor(anchor);
+      const start = new Date(anchor.getTime() - days * MS_DAY);
+      const end = anchor;
+      this.commitDateRange(start, end);
+    },
+    presetRangeNextWeeks(weeks) {
+      this.presetRangeNextDays(weeks * 7);
+    },
+    presetRangePreviousWeeks(weeks) {
+      this.presetRangePreviousDays(weeks * 7);
+    }
+  },
+  beforeUnmount() {
+    this.detachOutsideListener();
+  }
+});
diff --git a/frontend/src/models/models.html b/frontend/src/models/models.html
index d0c7b49b..91beffa2 100644
--- a/frontend/src/models/models.html
+++ b/frontend/src/models/models.html
@@ -109,6 +109,10 @@
             @search="search"
           >
           </document-search>
+          <date-range-filter
+            :schema-paths="schemaPaths"
+            @apply="search"
+          ></date-range-filter>
           <div>
             <span v-if="numDocuments == null">Loading ...</span>
             <span v-else-if="typeof numDocuments === 'number'">{{documents.length}}/{{numDocuments === 1 ? numDocuments + ' document' : numDocuments + ' documents'}}</span>