diff --git a/src/Frontend/package-lock.json b/src/Frontend/package-lock.json
index daee56d27d..cda79406bb 100644
--- a/src/Frontend/package-lock.json
+++ b/src/Frontend/package-lock.json
@@ -20,7 +20,6 @@
         "@tinyhttp/content-disposition": "2.2.4",
         "@vue-flow/controls": "1.1.3",
         "@vue-flow/core": "1.48.2",
-        "@vuepic/vue-datepicker": "13.0.0",
         "@vueuse/core": "14.3.0",
         "bootstrap": "5.3.8",
         "codemirror": "6.0.2",
@@ -1009,12 +1008,6 @@
       "integrity": "sha512-IvcV6FduIIAmLwnH+yun+QtV36SC7mERqa86aClNqmMN09WhmPPYU8ckHrZBozErf+UvHPWOTJYaGYiIcs0DgA==",
       "license": "MIT"
     },
-    "node_modules/@date-fns/tz": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
-      "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
-      "license": "MIT"
-    },
     "node_modules/@epic-web/invariant": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
@@ -1168,42 +1161,6 @@
         }
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
-      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.11"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
-      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.7.5",
-        "@floating-ui/utils": "^0.2.11"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
-      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
-      "license": "MIT"
-    },
-    "node_modules/@floating-ui/vue": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.11.tgz",
-      "integrity": "sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.7.6",
-        "@floating-ui/utils": "^0.2.11",
-        "vue-demi": ">=0.13.0"
-      }
-    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz",
@@ -1617,6 +1574,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1633,6 +1591,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1649,6 +1608,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1665,6 +1625,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1681,6 +1642,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1697,9 +1659,7 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1716,9 +1676,7 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1735,9 +1693,7 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1754,9 +1710,7 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1773,9 +1727,7 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1792,9 +1744,7 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1811,6 +1761,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1827,6 +1778,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1843,6 +1795,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2080,7 +2033,7 @@
       "version": "25.9.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.2.tgz",
       "integrity": "sha512-G05zqtJhcDLb8uslf5EjCxXg9G1KQxiV8OS0R26IC//Eoyitzqe8z37I7cqvnZlrlSfgocQRfSn/AHBZJJFyGw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": ">=7.24.0 <7.24.7"
@@ -2946,24 +2899,6 @@
         }
       }
     },
-    "node_modules/@vuepic/vue-datepicker": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-13.0.0.tgz",
-      "integrity": "sha512-7emyDtXcTDn0w1+RLcyYhdZFw2pE9EGbDuyFrN3XJju8nJVPcU822M2znrzmNdZU82R5ItyBeagZBtsYzUVy3g==",
-      "license": "MIT",
-      "dependencies": {
-        "@date-fns/tz": "^1.4.1",
-        "@floating-ui/vue": "^1.1.11",
-        "@vueuse/core": "^14.3.0",
-        "date-fns": "^4.2.1"
-      },
-      "engines": {
-        "node": ">=18.12.0"
-      },
-      "peerDependencies": {
-        "vue": ">=3.5.0"
-      }
-    },
     "node_modules/@vueuse/core": {
       "version": "14.3.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.3.0.tgz",
@@ -3847,16 +3782,6 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
-    "node_modules/date-fns": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.3.0.tgz",
-      "integrity": "sha512-OYcL+3N/jyWbYdFGqoMAhytDgxP9pbYPUUiRCOgn4Fewaadk9l/Wam4Avciiyp2BgkpfQyBV9B+ehnVJych+eQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
-      }
-    },
     "node_modules/dayjs": {
       "version": "1.11.21",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
@@ -4624,6 +4549,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -5592,6 +5518,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5612,6 +5539,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5632,6 +5560,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5652,6 +5581,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5672,6 +5602,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5692,9 +5623,7 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5715,9 +5644,7 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5738,9 +5665,7 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5761,9 +5686,7 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5784,6 +5707,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5804,6 +5728,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -7407,7 +7332,7 @@
       "version": "7.24.4",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.4.tgz",
       "integrity": "sha512-cRaY9PagdEZoRmcwzk3tUV3SVGrVQkR6bcSilav/A0vXsfpW4Lvd0BvgRMwTEDTLLGN+QdyBTG+nnvTgJhdt6w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/unicorn-magic": {
diff --git a/src/Frontend/package.json b/src/Frontend/package.json
index 652873f3c6..32133c3b7d 100644
--- a/src/Frontend/package.json
+++ b/src/Frontend/package.json
@@ -32,7 +32,6 @@
     "@tinyhttp/content-disposition": "2.2.4",
     "@vue-flow/controls": "1.1.3",
     "@vue-flow/core": "1.48.2",
-    "@vuepic/vue-datepicker": "13.0.0",
     "@vueuse/core": "14.3.0",
     "bootstrap": "5.3.8",
     "codemirror": "6.0.2",
diff --git a/src/Frontend/src/components/audit/AuditList.spec.ts b/src/Frontend/src/components/audit/AuditList.spec.ts
index 14a4d2cb59..ee80387842 100644
--- a/src/Frontend/src/components/audit/AuditList.spec.ts
+++ b/src/Frontend/src/components/audit/AuditList.spec.ts
@@ -1,5 +1,5 @@
 import { describe, test, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/vue";
+import { fireEvent, render, screen, waitFor } from "@testing-library/vue";
 import { createTestingPinia } from "@pinia/testing";
 import { createRouter, createMemoryHistory } from "vue-router";
 import { ref, shallowReadonly, nextTick, type Ref } from "vue";
@@ -209,6 +209,7 @@ async function waitForFirstLoadToComplete() {
 describe("FEATURE: Audit Messages Query State", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    localStorage.clear();
   });
 
   describe("RULE: A spinner is shown during the initial page load", () => {
@@ -333,6 +334,45 @@ describe("FEATURE: Audit Messages Query State", () => {
       expect(screen.queryByTestId("query-error")).not.toBeInTheDocument();
     });
 
+    test("EXAMPLE: A failed query offers one-click narrower ranges", async () => {
+      const { store } = await renderAuditList([]);
+
+      await waitForFirstLoadToComplete();
+
+      // default range is now-6h -> now; the two next-narrower presets apply
+      store.queryFailed = true;
+      await nextTick();
+
+      expect(screen.getAllByTestId("narrow-range").map((b) => b.textContent)).toEqual(["Last hour", "Last 15 minutes"]);
+    });
+
+    test("EXAMPLE: Clicking a narrowing action applies that range", async () => {
+      const { store } = await renderAuditList([]);
+
+      await waitForFirstLoadToComplete();
+
+      store.queryFailed = true;
+      await nextTick();
+      await fireEvent.click(screen.getByText("Last hour"));
+
+      expect(store.timeRangeFrom).toBe("now-1h");
+      expect(store.timeRangeTo).toBe("now");
+    });
+
+    test("EXAMPLE: A failed query without a time filter says the scan was unbounded", async () => {
+      const { store } = await renderAuditList([]);
+
+      await waitForFirstLoadToComplete();
+
+      store.timeRangeFrom = "";
+      store.timeRangeTo = "";
+      store.queryFailed = true;
+      await nextTick();
+
+      expect(screen.getByText(/no time filter/)).toBeInTheDocument();
+      expect(screen.getAllByTestId("narrow-range").map((b) => b.textContent)).toEqual(["Last 7 days", "Last 24 hours"]);
+    });
+
     test("EXAMPLE: The error banner is not shown when queries succeed", async () => {
       const { verify } = await renderAuditList([createMessage()]);
 
@@ -382,6 +422,19 @@ describe("FEATURE: Audit Messages Query State", () => {
     });
   });
 
+  describe("RULE: The saved default range drives the first query", () => {
+    test("EXAMPLE: Opening the view without URL params applies the browser's saved default", async () => {
+      localStorage.setItem("audit.defaultTimeRange", JSON.stringify({ from: "now-24h", to: "now" }));
+
+      const { store, refreshNow } = await renderAuditList([]);
+      await waitForFirstLoadToComplete();
+
+      expect(store.timeRangeFrom).toBe("now-24h");
+      expect(store.timeRangeTo).toBe("now");
+      expect(refreshNow).toHaveBeenCalled();
+    });
+  });
+
   describe("RULE: Leaving the view stops its activity", () => {
     test("EXAMPLE: Unmounting aborts the in-flight query and releases the auto-refresh", async () => {
       const { stop, store, unmount } = await renderAuditList([createMessage()], { neverCompleteFirstQuery: true });
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 053cd8aebd..6ee6faba93 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -16,9 +16,10 @@ import { useAuditingCapability } from "@/components/platformcapabilities/capabil
 import { CapabilityStatus } from "@/components/platformcapabilities/constants";
 import PageBanner, { type BannerMessage } from "@/components/PageBanner.vue";
 import { useConfigurationStore } from "@/stores/ConfigurationStore";
+import { loadDefaultRange, narrowingPresets, resolveTimeRange, type RangePreset } from "@/components/audit/timeRange";
 
 const store = useAuditStore();
-const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, dateRange, queryFailed } = storeToRefs(store);
+const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, timeRangeFrom, timeRangeTo, queryFailed } = storeToRefs(store);
 const route = useRoute();
 const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
@@ -60,6 +61,16 @@ const bannerMessage = computed<BannerMessage | null>(() => {
 
 const showBannerAction = computed(() => auditStatus.value !== CapabilityStatus.Unavailable && auditStatus.value !== CapabilityStatus.PartiallyUnavailable);
 
+// Query cost grows with the time window, so a timed-out query's escape hatch
+// is a narrower one — offered as one click instead of prose alone
+const hasNoTimeFilter = computed(() => resolveTimeRange({ from: timeRangeFrom.value, to: timeRangeTo.value }) === null);
+const narrowOptions = computed(() => (queryFailed.value ? narrowingPresets({ from: timeRangeFrom.value, to: timeRangeTo.value }) : []));
+
+function applyNarrowing(preset: RangePreset) {
+  timeRangeFrom.value = preset.from;
+  timeRangeTo.value = preset.to;
+}
+
 onBeforeMount(() => {
   setQuery();
 
@@ -95,15 +106,13 @@ watch(
 );
 
 function controlsQuery() {
-  const [fromDate, toDate] = dateRange.value;
-
   return {
     sortBy: sortBy.value.property,
     sortDir: sortBy.value.isAscending ? "asc" : "desc",
     filter: messageFilterString.value,
     endpoint: selectedEndpointName.value,
-    from: fromDate?.toISOString() ?? "",
-    to: toDate?.toISOString() ?? "",
+    from: timeRangeFrom.value.trim(),
+    to: timeRangeTo.value.trim(),
     pageSize: itemsPerPage.value,
   };
 }
@@ -114,7 +123,7 @@ function controlsQuery() {
 // query is still running, so a user typing a search is never ignored.
 let lastAppliedControlsQuery = "";
 
-const watchHandle = watch([itemsPerPage, sortBy, messageFilterString, selectedEndpointName, dateRange], async () => {
+const watchHandle = watch([itemsPerPage, sortBy, messageFilterString, selectedEndpointName, timeRangeFrom, timeRangeTo], async () => {
   const query = controlsQuery();
   const serialized = JSON.stringify(query);
 
@@ -137,7 +146,15 @@ function setQuery() {
       ? { isAscending: query.sortDir === "asc", property: query.sortBy as string }
       : (sortBy.value = { isAscending: false, property: FieldNames.TimeSent });
   itemsPerPage.value = query.pageSize ? parseInt(query.pageSize as string) : 100;
-  dateRange.value = query.from && query.to ? [new Date(query.from as string), new Date(query.to as string)] : [];
+  if (query.from !== undefined || query.to !== undefined) {
+    timeRangeFrom.value = (query.from as string) ?? "";
+    timeRangeTo.value = (query.to as string) ?? "";
+  } else {
+    // No range in the URL: the user's saved default (factory: last 6 hours)
+    const defaultRange = loadDefaultRange();
+    timeRangeFrom.value = defaultRange.from;
+    timeRangeTo.value = defaultRange.to;
+  }
   selectedEndpointName.value = (query.endpoint ?? "") as string;
 
   lastAppliedControlsQuery = JSON.stringify(controlsQuery());
@@ -173,7 +190,11 @@ watch(autoRefreshValue, (newValue) => {
     <WizardDialog v-if="showWizard" title="Getting Started with Auditing" :pages="wizardPages" @close="showWizard = false" />
     <div v-if="queryFailed && !queryInProgress" class="query-error" role="alert" data-testid="query-error">
       <strong>The query failed or took too long and was stopped.</strong>
-      <p>The ServiceControl instance might be too busy. Try again in an off-peak period, reduce the maximum number of results ("Show"), or narrow the date range.</p>
+      <p v-if="hasNoTimeFilter">This query has no time filter, so it scans the whole audit store. Bounding it is the quickest fix — or try again in an off-peak period.</p>
+      <p v-else>Query cost grows with the size of the time window. Try a narrower range, add a search term or endpoint filter, or reduce the number of results ("Show").</p>
+      <div v-if="narrowOptions.length > 0" class="error-actions">
+        <button v-for="preset in narrowOptions" :key="preset.label" type="button" class="narrow-action" data-testid="narrow-range" @click="applyNarrowing(preset)">{{ preset.label }}</button>
+      </div>
     </div>
     <div class="row results-table">
       <!-- Only when there is nothing to show yet. A re-fetch over existing rows leaves them
@@ -212,6 +233,27 @@ watch(autoRefreshValue, (newValue) => {
   margin: 0.25rem 0 0;
 }
 
+.error-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.6rem;
+}
+
+.narrow-action {
+  border: 1px solid #ce4844;
+  background: #fff;
+  color: #ce4844;
+  border-radius: 4px;
+  padding: 0.2rem 0.7rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+
+.narrow-action:hover {
+  background: #ce4844;
+  color: #fff;
+}
+
 .results-table {
   margin-top: 1rem;
   margin-bottom: 5rem;
diff --git a/src/Frontend/src/components/audit/DatePickerRange.vue b/src/Frontend/src/components/audit/DatePickerRange.vue
deleted file mode 100644
index cabe65b2f9..0000000000
--- a/src/Frontend/src/components/audit/DatePickerRange.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import type { DateRange } from "@/types/date";
-import { VueDatePicker } from "@vuepic/vue-datepicker";
-import "@vuepic/vue-datepicker/dist/main.css";
-import { ref, useTemplateRef, watch } from "vue";
-import { useDateFormatter } from "@/composables/dateFormatter";
-
-const { formatDateRange, isValidDateRange } = useDateFormatter();
-
-const props = defineProps<{ disabled?: boolean }>();
-const model = defineModel<DateRange>({ required: true });
-const internalModel = ref<DateRange>([]);
-const displayDataRange = ref<string>("No dates");
-const datePicker = useTemplateRef<typeof VueDatePicker>("datePicker");
-
-watch(internalModel, () => {
-  const updatedRange = internalModel.value as DateRange;
-  if (isValidDateRange(updatedRange)) {
-    model.value = updatedRange;
-    displayDataRange.value = formatDateRange(updatedRange);
-  } else internalModel.value = model.value;
-});
-
-watch(
-  model,
-  () => {
-    internalModel.value = model.value;
-  },
-  { immediate: true }
-);
-
-function clearCurrentDate() {
-  internalModel.value = [];
-  datePicker.value?.closeMenu();
-}
-</script>
-
-<template>
-  <VueDatePicker
-    ref="datePicker"
-    class="dropdown"
-    v-model="internalModel"
-    :disabled="props.disabled"
-    :formats="{ input: (dates: Date[]) => formatDateRange(dates as DateRange) }"
-    :range="{ partialRange: false }"
-    :time-config="{ enableSeconds: true }"
-    :action-row="{ showNow: false, showCancel: false, showSelect: true }"
-  >
-    <template #trigger>
-      <button type="button" class="btn btn-dropdown dropdown-toggle sp-btn-menu" :disabled="props.disabled">
-        {{ displayDataRange }}
-      </button>
-    </template>
-    <template #action-extra>
-      <button v-if="internalModel.length === 2" class="dp__action_button dp__action_cancel" @click="clearCurrentDate()">Clear Range</button>
-    </template>
-  </VueDatePicker>
-</template>
-
-<style>
-.dropdown .btn {
-  padding-left: 0.5rem;
-}
-</style>
diff --git a/src/Frontend/src/components/audit/FiltersPanel.vue b/src/Frontend/src/components/audit/FiltersPanel.vue
index cc21d3cb54..f2c7a849ad 100644
--- a/src/Frontend/src/components/audit/FiltersPanel.vue
+++ b/src/Frontend/src/components/audit/FiltersPanel.vue
@@ -4,10 +4,10 @@ import { storeToRefs } from "pinia";
 import { FieldNames, useAuditStore } from "@/stores/AuditStore";
 import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
 import { computed } from "vue";
-import DatePickerRange from "@/components/audit/DatePickerRange.vue";
+import SuperDatePicker from "@/components/audit/SuperDatePicker.vue";
 
 const store = useAuditStore();
-const { sortBy, messageFilterString, selectedEndpointName, endpoints, itemsPerPage, dateRange } = storeToRefs(store);
+const { sortBy, messageFilterString, selectedEndpointName, endpoints, itemsPerPage } = storeToRefs(store);
 const endpointNames = computed(() => {
   return [...new Set(endpoints.value.map((endpoint) => endpoint.name))].sort();
 });
@@ -70,9 +70,9 @@ function findKeyByValue(searchValue: string) {
       </div>
     </div>
     <div class="filter">
-      <div class="filter-label">Dates:</div>
+      <div class="filter-label">Sent:</div>
       <div class="filter-component">
-        <DatePickerRange v-model="dateRange" />
+        <SuperDatePicker />
       </div>
     </div>
     <div class="filter">
@@ -104,6 +104,12 @@ function findKeyByValue(searchValue: string) {
 .filter {
   display: flex;
   align-items: start;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.filter-component {
+  min-width: 0;
 }
 
 .filter:last-child {
@@ -117,7 +123,7 @@ function findKeyByValue(searchValue: string) {
 }
 
 .text-search-container {
-  width: 25rem;
+  width: min(25rem, 100%);
 }
 .note {
   font-size: 0.875em;
diff --git a/src/Frontend/src/components/audit/SuperDatePicker.spec.ts b/src/Frontend/src/components/audit/SuperDatePicker.spec.ts
new file mode 100644
index 0000000000..88190fa980
--- /dev/null
+++ b/src/Frontend/src/components/audit/SuperDatePicker.spec.ts
@@ -0,0 +1,231 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/vue";
+import { createTestingPinia } from "@pinia/testing";
+import SuperDatePicker from "@/components/audit/SuperDatePicker.vue";
+import { useAuditStore } from "@/stores/AuditStore";
+
+function renderPicker(range?: { from: string; to: string }) {
+  const pinia = createTestingPinia({ createSpy: vi.fn, initialState: range ? { AuditStore: { timeRangeFrom: range.from, timeRangeTo: range.to } } : undefined });
+  render(SuperDatePicker, { global: { plugins: [pinia] } });
+  return useAuditStore(pinia);
+}
+
+const chip = () => screen.getByRole("button", { name: /Time range/ }) as HTMLButtonElement;
+const openPicker = () => fireEvent.click(chip());
+const fromInput = () => screen.getByLabelText("Time range start") as HTMLInputElement;
+const toInput = () => screen.getByLabelText("Time range end") as HTMLInputElement;
+const applyButton = () => screen.getByRole("button", { name: "Apply time range" }) as HTMLButtonElement;
+const nativePickers = () => document.querySelectorAll('input[type="date"]') as NodeListOf<HTMLInputElement>;
+const calendarButton = (bound: "start" | "end") => screen.getByRole("button", { name: new RegExp(`calendar.*${bound}`, "i") }) as HTMLButtonElement;
+
+describe("FEATURE: Super date picker", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  test("EXAMPLE: The collapsed chip shows the default range's preset label", () => {
+    renderPicker();
+
+    expect(chip().textContent).toContain("Last 6 hours");
+  });
+
+  test("EXAMPLE: Opening the picker shows the applied range in the editor", async () => {
+    renderPicker();
+
+    await openPicker();
+
+    expect(fromInput().value).toBe("now-6h");
+    expect(toInput().value).toBe("now");
+  });
+
+  test("EXAMPLE: Typing an RFC 3339 timestamp and applying commits it to the store", async () => {
+    const store = renderPicker();
+
+    await openPicker();
+    await fireEvent.update(fromInput(), "2026-09-01 08:00:00Z");
+    await fireEvent.click(applyButton());
+
+    expect(store.timeRangeFrom).toBe("2026-09-01 08:00:00Z");
+    expect(store.timeRangeTo).toBe("now");
+  });
+
+  test("EXAMPLE: Invalid input disables Apply and explains itself", async () => {
+    renderPicker();
+
+    await openPicker();
+    await fireEvent.update(fromInput(), "next tuesday");
+
+    expect(applyButton().disabled).toBe(true);
+    expect(document.querySelector(".echo.bad")!.textContent).toContain("RFC 3339");
+  });
+
+  test("EXAMPLE: A valid range shows no diagnostics line, only an invalid one gets feedback", async () => {
+    renderPicker();
+
+    await openPicker();
+
+    expect(document.querySelector(".echo")).toBeNull();
+  });
+
+  test("EXAMPLE: Pasting an ISO 8601 interval fills both bounds", async () => {
+    renderPicker();
+
+    await openPicker();
+    const paste = new Event("paste", { bubbles: true, cancelable: true }) as ClipboardEvent;
+    Object.defineProperty(paste, "clipboardData", {
+      value: { getData: () => "2026-09-01T00:00:00Z/2026-09-01T12:00:00Z" },
+    });
+    fromInput().dispatchEvent(paste);
+    await Promise.resolve();
+
+    expect(fromInput().value).toBe("2026-09-01T00:00:00Z");
+    expect(toInput().value).toBe("2026-09-01T12:00:00Z");
+  });
+
+  test("EXAMPLE: A quick preset applies immediately and the chip shows its label", async () => {
+    const store = renderPicker();
+
+    await openPicker();
+    await fireEvent.click(screen.getByRole("button", { name: "Last 24 hours" }));
+
+    expect(store.timeRangeFrom).toBe("now-24h");
+    expect(store.timeRangeTo).toBe("now");
+    expect(chip().textContent).toContain("Last 24 hours");
+  });
+
+  test("EXAMPLE: The current range can be saved as the user's default", async () => {
+    const store = renderPicker();
+    store.timeRangeFrom = "now-24h";
+    store.timeRangeTo = "now";
+
+    await openPicker();
+    await fireEvent.click(screen.getByRole("button", { name: "Save current range as default" }));
+
+    expect(JSON.parse(localStorage.getItem("audit.defaultTimeRange")!)).toEqual({ from: "now-24h", to: "now" });
+    expect(screen.getByText("✓ Saved in this browser")).toBeInTheDocument();
+  });
+
+  test("EXAMPLE: When the applied range already is the default, there is nothing to save", async () => {
+    renderPicker();
+
+    await openPicker();
+
+    expect(screen.queryByRole("button", { name: "Save current range as default" })).toBeNull();
+    expect(screen.getByText("current range is the default")).toBeInTheDocument();
+  });
+
+  describe("RULE: Bounds read as 'from to to'; a range ending now is just its start", () => {
+    test("EXAMPLE: The editor puts From and To on their own rows, with the quick ranges listed beside them", async () => {
+      renderPicker();
+      await openPicker();
+
+      expect(screen.getByText("From")).toBeInTheDocument();
+      expect(screen.getByText("To")).toBeInTheDocument();
+      expect(document.body.textContent).not.toContain("→");
+      // every quick range is one entry of the list next to the editor
+      const quick = document.querySelector(".quick")!;
+      for (const label of ["Last 15 minutes", "Last hour", "Last 6 hours", "Last 24 hours", "Last 7 days"]) {
+        expect(quick.textContent).toContain(label);
+      }
+      expect(quick.textContent).toContain("No time filter");
+    });
+
+    test("EXAMPLE: A custom last-N range shows only its start on the chip", () => {
+      renderPicker({ from: "now-90m", to: "now" });
+
+      expect(chip().textContent!.trim()).toBe("now-90m");
+    });
+
+    test("EXAMPLE: An absolute start running to now shows both bounds on the chip", () => {
+      renderPicker({ from: "2026-09-01 08:00", to: "now" });
+
+      expect(chip().textContent!.trim()).toBe("2026-09-01 08:00 to now");
+    });
+
+    test("EXAMPLE: The default line drops 'to now' as well", async () => {
+      renderPicker();
+      await openPicker();
+
+      const line = document.querySelector(".default-config")!;
+      expect(line.textContent).toContain("now-6h");
+      expect(line.textContent).not.toMatch(/now-6h\s*(→|to)\s*now/);
+    });
+  });
+
+  describe("RULE: The editor tells the user what to type", () => {
+    test("EXAMPLE: The hint covers relative expressions, the date format, and Z or an offset for the zone", async () => {
+      renderPicker();
+      await openPicker();
+
+      const hint = document.querySelector(".hint")!;
+      expect(hint).not.toBeNull();
+      expect(hint.textContent).toContain("now-6h");
+      expect(hint.textContent).toMatch(/YYYY-MM-DD HH:mm/);
+      expect(hint.textContent).toMatch(/\bZ\b/);
+      expect(hint.textContent).toContain("+02:00");
+      expect(hint.textContent).toMatch(/local/i);
+    });
+  });
+
+  describe("RULE: Each bound has a calendar for the day; the time stays what the field says", () => {
+    beforeEach(() => {
+      HTMLInputElement.prototype.showPicker = vi.fn();
+    });
+
+    test("EXAMPLE: A day picked for the start replaces the date and keeps the field's time", async () => {
+      renderPicker();
+      await openPicker();
+      await fireEvent.update(fromInput(), "2026-09-01 08:05");
+
+      const [startPicker] = nativePickers();
+      await fireEvent.update(startPicker, "2026-09-03");
+
+      expect(fromInput().value).toBe("2026-09-03 08:05");
+    });
+
+    test("EXAMPLE: A UTC-marked time survives a day pick unchanged", async () => {
+      renderPicker();
+      await openPicker();
+      await fireEvent.update(toInput(), "2026-09-01T12:00Z");
+
+      const [, endPicker] = nativePickers();
+      await fireEvent.update(endPicker, "2026-09-03");
+
+      expect(toInput().value).toBe("2026-09-03T12:00Z");
+    });
+
+    test("EXAMPLE: A field without an absolute time gets the start of the day for From and the end of it for To", async () => {
+      renderPicker({ from: "now-6h", to: "now" });
+      await openPicker();
+
+      const [startPicker, endPicker] = nativePickers();
+      await fireEvent.update(startPicker, "2026-09-03");
+      await fireEvent.update(endPicker, "2026-09-03");
+
+      expect(fromInput().value).toBe("2026-09-03 00:00:00");
+      expect(toInput().value).toBe("2026-09-03 23:59:59");
+    });
+
+    test("EXAMPLE: The calendar opens on the field's current day", async () => {
+      renderPicker();
+      await openPicker();
+      await fireEvent.update(fromInput(), "2026-09-01 08:05");
+
+      await fireEvent.click(calendarButton("start"));
+
+      const [startPicker] = nativePickers();
+      expect(startPicker.value).toBe("2026-09-01");
+      expect(startPicker.showPicker).toHaveBeenCalled();
+    });
+
+    test("EXAMPLE: A relative bound opens the calendar on the day it resolves to", async () => {
+      renderPicker({ from: "now-6h", to: "now" });
+      await openPicker();
+
+      await fireEvent.click(calendarButton("end"));
+
+      const [, endPicker] = nativePickers();
+      expect(endPicker.value).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    });
+  });
+});
diff --git a/src/Frontend/src/components/audit/SuperDatePicker.vue b/src/Frontend/src/components/audit/SuperDatePicker.vue
new file mode 100644
index 0000000000..149610350c
--- /dev/null
+++ b/src/Frontend/src/components/audit/SuperDatePicker.vue
@@ -0,0 +1,470 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useAuditStore } from "@/stores/AuditStore";
+import FAIcon from "@/components/FAIcon.vue";
+import { faCalendarDays } from "@fortawesome/free-solid-svg-icons";
+import { describeRangeText, formatLocal, formatUtc, isEmptyRange, loadDefaultRange, parseTimePoint, rangePresets, resolveTimeRange, saveDefaultRange, factoryDefaultRange } from "@/components/audit/timeRange";
+
+const store = useAuditStore();
+const { timeRangeFrom, timeRangeTo } = storeToRefs(store);
+
+// Drafts: edits are local until applied, so typing doesn't fire queries
+const fromText = ref(timeRangeFrom.value);
+const toText = ref(timeRangeTo.value);
+watch([timeRangeFrom, timeRangeTo], ([from, to]) => {
+  fromText.value = from;
+  toText.value = to;
+});
+
+const fromParse = computed(() => parseTimePoint(fromText.value, false));
+const toParse = computed(() => parseTimePoint(toText.value, true));
+const bothEmpty = computed(() => isEmptyRange({ from: fromText.value, to: toText.value }));
+const isValid = computed(() => bothEmpty.value || (!fromParse.value.error && !toParse.value.error));
+const isDirty = computed(() => fromText.value !== timeRangeFrom.value || toText.value !== timeRangeTo.value);
+
+function compactPair(from: string, to: string) {
+  // Share the leading date when both bounds fall on it: "2026-09-03 07:55 to 13:55"
+  const [fromDate, fromTime] = from.split(" ");
+  const [toDate, toTime] = to.split(" ");
+  return fromDate === toDate ? `${fromDate} ${fromTime} to ${toTime}` : `${from} to ${to}`;
+}
+
+const noSeconds = (formatted: string) => formatted.replace(/:\d{2}(Z?)$/, "$1");
+
+// Feedback only when the draft cannot be applied; a valid draft speaks for itself
+const problem = computed(() => {
+  if (bothEmpty.value) return null;
+  const fromError = fromText.value.trim() !== "" && fromParse.value.error;
+  const toError = toText.value.trim() !== "" && toParse.value.error;
+  if (fromError || toError) return `✗ ${fromError || toError}`;
+  if (!resolveTimeRange({ from: fromText.value, to: toText.value })) return "✗ both bounds are needed (or clear both for no filter)";
+  return null;
+});
+
+// Hovering the chip shows the applied window resolved in both UTC and local time
+const chipTitle = computed(() => {
+  const resolved = resolveTimeRange({ from: timeRangeFrom.value, to: timeRangeTo.value });
+  if (!resolved) return "";
+  return `${formatUtc(resolved.from)} to ${formatUtc(resolved.to)} · local ${formatLocal(resolved.from)} to ${formatLocal(resolved.to)}`;
+});
+
+// The collapsed chip: a range is read far more often than it is edited, so the
+// closed state costs one label. Preset name when the applied expressions match
+// one, the raw expressions while a bound is live, a compact resolved range otherwise.
+const chipLabel = computed(() => {
+  const from = timeRangeFrom.value;
+  const to = timeRangeTo.value;
+  if (isEmptyRange({ from, to })) return "No time filter";
+  const preset = rangePresets.find((p) => p.from === from && p.to === to);
+  if (preset) return preset.label;
+  const resolved = resolveTimeRange({ from, to });
+  if (!resolved || resolved.live) return describeRangeText({ from, to });
+  return compactPair(noSeconds(formatLocal(resolved.from)), noSeconds(formatLocal(resolved.to)));
+});
+
+function apply() {
+  if (!isValid.value) return;
+  timeRangeFrom.value = fromText.value.trim();
+  timeRangeTo.value = toText.value.trim();
+  open.value = false;
+}
+
+function applyPreset(from: string, to: string) {
+  fromText.value = from;
+  toText.value = to;
+  apply();
+}
+
+function clearRange() {
+  applyPreset("", "");
+}
+
+// A pasted interval lands in one field; split "from/to" (ISO 8601), "a - b", "a to b"
+function onPaste(event: ClipboardEvent) {
+  const text = event.clipboardData?.getData("text") ?? "";
+  for (const separator of ["/", " - ", " — ", " → ", " to "]) {
+    const index = text.indexOf(separator);
+    if (index > 0) {
+      const a = text.slice(0, index).trim();
+      const b = text.slice(index + separator.length).trim();
+      if (!parseTimePoint(a, false).error && !parseTimePoint(b, true).error) {
+        event.preventDefault();
+        fromText.value = a;
+        toText.value = b;
+        return;
+      }
+    }
+  }
+}
+
+/* popup: hand-rolled open/close, outside-click and Escape handling.
+   Not the Popover API on purpose: a popover sits in the top layer, centred on the
+   viewport, so placing it under the chip needs CSS anchor positioning, which Firefox
+   ESR (a supported browser) does not have yet. Without that, the positioning script
+   would cost what the dismiss handling saves. Revisit once anchor positioning is
+   available in every supported browser. */
+const open = ref(false);
+const root = useTemplateRef<HTMLElement>("root");
+const fromInput = useTemplateRef<HTMLInputElement>("fromInput");
+
+async function toggleOpen() {
+  open.value = !open.value;
+  if (open.value) {
+    // Discard unapplied edits from a previous visit
+    fromText.value = timeRangeFrom.value;
+    toText.value = timeRangeTo.value;
+    await nextTick();
+    fromInput.value?.focus();
+  }
+}
+
+function onOutsidePointer(event: PointerEvent) {
+  if (open.value && root.value && !root.value.contains(event.target as Node)) open.value = false;
+}
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape") open.value = false;
+}
+onMounted(() => document.addEventListener("pointerdown", onOutsidePointer));
+onBeforeUnmount(() => document.removeEventListener("pointerdown", onOutsidePointer));
+
+/* calendar per bound: the browser's own date picker (date only, so it closes on the day
+   click in every browser) writes the day into the text field and keeps whatever time the
+   field already says. Text stays the source of truth: relative expressions and pasted
+   timestamps are typed; the calendar is one more way to fill a field in. */
+type Bound = "from" | "to";
+const fromPicker = useTemplateRef<HTMLInputElement>("fromPicker");
+const toPicker = useTemplateRef<HTMLInputElement>("toPicker");
+
+// type="date" wants "YYYY-MM-DD" in local time
+const toDateLocal = (date: Date) => formatLocal(date).slice(0, 10);
+
+function openCalendar(bound: Bound) {
+  const picker = bound === "from" ? fromPicker.value : toPicker.value;
+  if (!picker) return;
+  const text = bound === "from" ? fromText.value : toText.value;
+  // A relative bound opens on the day it currently resolves to; garbage opens on today
+  picker.value = toDateLocal(parseTimePoint(text, bound === "to").date ?? new Date());
+  if (typeof picker.showPicker === "function") {
+    try {
+      picker.showPicker();
+      return;
+    } catch {
+      // not allowed here (no user activation, or unsupported for this type): fall back
+    }
+  }
+  picker.focus();
+  picker.click();
+}
+
+// "2026-09-01 08:05Z" -> date "2026-09-01", rest " 08:05Z" (separator and time kept as typed)
+const absoluteText = /^\s*\d{4}-\d{2}-\d{2}([T ].*)$/;
+
+function onPicked(bound: Bound, event: Event) {
+  const day = (event.target as HTMLInputElement).value;
+  if (day === "") return;
+  const current = bound === "from" ? fromText.value : toText.value;
+  const kept = absoluteText.exec(current)?.[1];
+  // The field's own time survives a day change; otherwise From starts the day and To ends it
+  const text = kept !== undefined ? `${day}${kept}` : bound === "from" ? `${day} 00:00:00` : `${day} 23:59:59`;
+  if (bound === "from") fromText.value = text;
+  else toText.value = text;
+}
+
+/* configurable default range (persisted per browser in localStorage) */
+const currentDefault = ref(loadDefaultRange());
+const isFactoryDefault = computed(() => currentDefault.value.from === factoryDefaultRange.from && currentDefault.value.to === factoryDefaultRange.to);
+const isCurrentTheDefault = computed(() => currentDefault.value.from === timeRangeFrom.value && currentDefault.value.to === timeRangeTo.value);
+const justSaved = ref(false);
+let savedFeedbackTimer: number | undefined;
+function saveCurrentAsDefault() {
+  const range = { from: timeRangeFrom.value, to: timeRangeTo.value };
+  saveDefaultRange(range);
+  currentDefault.value = range;
+  justSaved.value = true;
+  window.clearTimeout(savedFeedbackTimer);
+  savedFeedbackTimer = window.setTimeout(() => (justSaved.value = false), 2000);
+}
+function resetDefault() {
+  saveDefaultRange(null);
+  currentDefault.value = { ...factoryDefaultRange };
+}
+</script>
+
+<template>
+  <div class="super-date-picker" ref="root" @keydown="onKeydown">
+    <button type="button" class="btn btn-dropdown dropdown-toggle sp-btn-menu chip" :aria-expanded="open" aria-label="Time range" :title="chipTitle" @click="toggleOpen">
+      {{ chipLabel }}
+    </button>
+
+    <div v-if="open" class="pop">
+      <div class="editor">
+        <div class="section-title">Absolute time range</div>
+        <div class="field">
+          <span class="field-label">From</span>
+          <div class="bar">
+            <input
+              ref="fromInput"
+              v-model="fromText"
+              class="bound"
+              :class="{ invalid: fromText.trim() !== '' && fromParse.error }"
+              spellcheck="false"
+              autocomplete="off"
+              aria-label="Time range start"
+              placeholder="now-6h or 2026-09-01 08:00Z"
+              @keydown.enter="apply"
+              @paste="onPaste"
+            />
+            <button type="button" class="cal" aria-label="Open a calendar for the start" title="Pick the day from a calendar" @click="openCalendar('from')"><FAIcon :icon="faCalendarDays" /></button>
+            <input ref="fromPicker" type="date" class="native-picker" tabindex="-1" aria-hidden="true" @input="onPicked('from', $event)" @change="onPicked('from', $event)" />
+          </div>
+        </div>
+        <div class="field">
+          <span class="field-label">To</span>
+          <div class="bar">
+            <input v-model="toText" class="bound" :class="{ invalid: toText.trim() !== '' && toParse.error }" spellcheck="false" autocomplete="off" aria-label="Time range end" placeholder="now" @keydown.enter="apply" @paste="onPaste" />
+            <button type="button" class="cal" aria-label="Open a calendar for the end" title="Pick the day from a calendar" @click="openCalendar('to')"><FAIcon :icon="faCalendarDays" /></button>
+            <input ref="toPicker" type="date" class="native-picker" tabindex="-1" aria-hidden="true" @input="onPicked('to', $event)" @change="onPicked('to', $event)" />
+          </div>
+        </div>
+        <p class="hint">
+          Relative: <code>now-6h</code>, <code>now-1d/d</code> (keeps sliding with auto-refresh). Absolute: <code>YYYY-MM-DD HH:mm</code> is read as local time; add <code>Z</code> for UTC or an offset such as <code>+02:00</code>. Pasted ISO 8601
+          timestamps work as they are.
+        </p>
+        <div v-if="problem" class="echo bad" role="alert">{{ problem }}</div>
+        <button type="button" class="go" :disabled="!isValid || !isDirty" @click="apply">Apply time range</button>
+
+        <div class="default-config">
+          <span class="default-label">Default when opening this view:</span>
+          <code>{{ describeRangeText(currentDefault) }}</code>
+          <button v-if="!isCurrentTheDefault" type="button" class="mini" @click="saveCurrentAsDefault">Save current range as default</button>
+          <span v-else-if="justSaved" class="saved">✓ Saved in this browser</span>
+          <span v-else class="saved muted">current range is the default</span>
+          <button v-if="!isFactoryDefault" type="button" class="mini" @click="resetDefault">Reset to last 6 hours</button>
+        </div>
+      </div>
+
+      <div class="quick">
+        <div class="section-title">Quick ranges</div>
+        <button v-for="preset in rangePresets" :key="preset.label" type="button" class="quick-item" @click="applyPreset(preset.from, preset.to)">
+          {{ preset.label }}
+        </button>
+        <button type="button" class="quick-item muted" @click="clearRange">No time filter</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.super-date-picker {
+  position: relative;
+  display: inline-block;
+}
+
+.chip {
+  white-space: nowrap;
+}
+
+.pop {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 200;
+  width: min(600px, 92vw);
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+  /* Grafana-style: the absolute editor on the left, the quick ranges listed on the right */
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+@media (max-width: 36rem) {
+  .pop {
+    grid-template-columns: 1fr;
+  }
+}
+
+.editor {
+  padding: 0.9rem 1rem;
+  border-right: 1px solid #e3e3e3;
+}
+
+.section-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: #333;
+  margin-bottom: 0.6rem;
+}
+
+.field {
+  margin-bottom: 0.6rem;
+}
+
+.field-label {
+  display: block;
+  font-size: 0.78rem;
+  color: #555;
+  margin-bottom: 0.2rem;
+}
+
+.bar {
+  position: relative; /* anchors the hidden native pickers, so the browser opens them by the fields */
+  display: flex;
+  align-items: stretch;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.bound {
+  border: 0;
+  padding: 0.3rem 0.5rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85rem;
+  flex: 1 1 10ch;
+  width: auto;
+  min-width: 7ch;
+}
+
+.bound:focus {
+  outline: 2px solid #00729c;
+  outline-offset: -2px;
+}
+
+.bound.invalid {
+  background: #fdecec;
+}
+
+.cal {
+  border: 0;
+  border-left: 1px solid #ddd;
+  background: none;
+  color: #777;
+  padding: 0 0.45rem;
+  cursor: pointer;
+}
+
+.cal:hover {
+  color: #00729c;
+  background: #f3f9fb;
+}
+
+/* Kept in the flow (so the browser anchors its picker next to the field) but invisible */
+.native-picker {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.go {
+  display: inline-block;
+  margin-top: 0.4rem;
+  border: 0;
+  border-radius: 4px;
+  background: #00729c;
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.85rem;
+  padding: 0.35rem 0.9rem;
+  cursor: pointer;
+}
+
+.go:disabled {
+  background: #e9e9e9;
+  color: #999;
+  cursor: default;
+}
+
+.hint {
+  font-size: 0.74rem;
+  line-height: 1.45;
+  color: #6b6b6b;
+  margin: 0.1rem 0 0.4rem;
+}
+
+.hint code {
+  font-size: 0.72rem;
+  color: #444;
+}
+
+.echo.bad {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.72rem;
+  line-height: 1.35;
+  color: #ce4844;
+  margin-top: 0.3rem;
+  overflow-wrap: break-word;
+}
+
+.quick {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  min-width: 11rem;
+  padding: 0.9rem 0.8rem;
+}
+
+.quick-item {
+  border: 0;
+  background: none;
+  text-align: left;
+  color: #00729c;
+  padding: 0.28rem 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.86rem;
+}
+
+.quick-item:hover {
+  background: #e6f2f6;
+}
+
+.quick-item.muted {
+  color: #777;
+}
+
+.default-config {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  border-top: 1px solid #e3e3e3;
+  margin-top: 0.8rem;
+  padding-top: 0.8rem;
+  font-size: 0.78rem;
+  color: #6b6b6b;
+}
+
+.default-config code {
+  font-size: 0.75rem;
+}
+
+.mini {
+  border: 1px solid #ccc;
+  background: #fff;
+  border-radius: 4px;
+  padding: 0.15rem 0.5rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.mini:hover {
+  border-color: #00729c;
+  color: #00729c;
+}
+
+.saved {
+  color: #2b8a3e;
+  font-size: 0.75rem;
+}
+
+.saved.muted {
+  color: #999;
+  font-style: italic;
+}
+</style>
diff --git a/src/Frontend/src/components/audit/timeRange.spec.ts b/src/Frontend/src/components/audit/timeRange.spec.ts
new file mode 100644
index 0000000000..6291605fa7
--- /dev/null
+++ b/src/Frontend/src/components/audit/timeRange.spec.ts
@@ -0,0 +1,176 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { parseTimePoint, resolveTimeRange, loadDefaultRange, saveDefaultRange, factoryDefaultRange, narrowingPresets, describeRangeText } from "@/components/audit/timeRange";
+
+const NOW = new Date("2026-09-01T10:30:45.000Z");
+const now = () => new Date(NOW);
+
+describe("parseTimePoint — absolute RFC 3339", () => {
+  test("full timestamp with Z is UTC", () => {
+    const r = parseTimePoint("2026-09-01T08:00:00Z", false, now);
+    expect(r.error).toBeUndefined();
+    expect(r.date!.toISOString()).toBe("2026-09-01T08:00:00.000Z");
+    expect(r.live).toBe(false);
+  });
+
+  test("space works as the date/time separator", () => {
+    const r = parseTimePoint("2026-09-01 08:00:00Z", false, now);
+    expect(r.date!.toISOString()).toBe("2026-09-01T08:00:00.000Z");
+  });
+
+  test("an explicit offset is honored", () => {
+    const r = parseTimePoint("2026-09-01 00:00:00-03:00", false, now);
+    expect(r.date!.toISOString()).toBe("2026-09-01T03:00:00.000Z");
+  });
+
+  test("seconds are optional", () => {
+    const r = parseTimePoint("2026-09-01T08:15Z", false, now);
+    expect(r.date!.toISOString()).toBe("2026-09-01T08:15:00.000Z");
+  });
+
+  test("a zone-less value is local wall time", () => {
+    const r = parseTimePoint("2026-09-01 08:00:00", false, now);
+    expect(r.date!.getFullYear()).toBe(2026);
+    expect(r.date!.getHours()).toBe(8);
+  });
+
+  test("a bare date is local midnight", () => {
+    const r = parseTimePoint("2026-08-31", false, now);
+    expect(r.date!.getHours()).toBe(0);
+    expect(r.date!.getDate()).toBe(31);
+  });
+
+  test("a bare date with Z forces UTC midnight", () => {
+    const r = parseTimePoint("2026-08-31Z", false, now);
+    expect(r.date!.toISOString()).toBe("2026-08-31T00:00:00.000Z");
+  });
+
+  test("a bare date with an offset is honored", () => {
+    const r = parseTimePoint("2026-08-31+02:00", false, now);
+    expect(r.date!.toISOString()).toBe("2026-08-30T22:00:00.000Z");
+  });
+
+  test("garbage is rejected with guidance", () => {
+    expect(parseTimePoint("next tuesday", false, now).error).toContain("RFC 3339");
+    expect(parseTimePoint("2026-13-45", false, now).error).toBeTruthy();
+  });
+});
+
+describe("parseTimePoint — relative expressions", () => {
+  test("now resolves to now and is live", () => {
+    const r = parseTimePoint("now", false, now);
+    expect(r.date!.getTime()).toBe(NOW.getTime());
+    expect(r.live).toBe(true);
+  });
+
+  test("now-6h subtracts six hours", () => {
+    const r = parseTimePoint("now-6h", false, now);
+    expect(r.date!.toISOString()).toBe("2026-09-01T04:30:45.000Z");
+  });
+
+  test("now/d snaps to start of the local day in a From bound", () => {
+    const r = parseTimePoint("now/d", false, now);
+    expect(r.date!.getHours()).toBe(0);
+    expect(r.date!.getMinutes()).toBe(0);
+  });
+
+  test("now-1d/d in a To bound means end of yesterday", () => {
+    const from = parseTimePoint("now-1d/d", false, now).date!;
+    const to = parseTimePoint("now-1d/d", true, now).date!;
+    expect(to.getTime()).toBeGreaterThan(from.getTime());
+    expect(to.getTime() - from.getTime()).toBe(86400e3 - 1000);
+  });
+
+  test("a malformed now-expression is rejected", () => {
+    expect(parseTimePoint("now-6x", false, now).error).toBeTruthy();
+    expect(parseTimePoint("nowhere", false, now).error).toBeTruthy();
+  });
+});
+
+describe("resolveTimeRange", () => {
+  test("both bounds resolve against the same instant", () => {
+    const r = resolveTimeRange({ from: "now-6h", to: "now" }, now)!;
+    expect(r.to.getTime() - r.from.getTime()).toBe(6 * 3600e3);
+    expect(r.live).toBe(true);
+  });
+
+  test("bounds entered backwards are swapped", () => {
+    const r = resolveTimeRange({ from: "now", to: "now-1h" }, now)!;
+    expect(r.from.getTime()).toBeLessThan(r.to.getTime());
+  });
+
+  test("an invalid bound yields no range", () => {
+    expect(resolveTimeRange({ from: "junk", to: "now" }, now)).toBeNull();
+    expect(resolveTimeRange({ from: "", to: "" }, now)).toBeNull();
+  });
+
+  test("absolute and relative bounds mix", () => {
+    const r = resolveTimeRange({ from: "2026-09-01T00:00:00Z", to: "now" }, now)!;
+    expect(r.from.toISOString()).toBe("2026-09-01T00:00:00.000Z");
+    expect(r.to.getTime()).toBe(NOW.getTime());
+    expect(r.live).toBe(true);
+  });
+});
+
+describe("default range storage", () => {
+  afterEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  test("factory default is the last 6 hours", () => {
+    expect(loadDefaultRange()).toEqual({ from: "now-6h", to: "now" });
+    expect(factoryDefaultRange).toEqual({ from: "now-6h", to: "now" });
+  });
+
+  test("a saved default round-trips", () => {
+    saveDefaultRange({ from: "now-24h", to: "now" });
+    expect(loadDefaultRange()).toEqual({ from: "now-24h", to: "now" });
+  });
+
+  test("clearing the default restores the factory value", () => {
+    saveDefaultRange({ from: "now-24h", to: "now" });
+    saveDefaultRange(null);
+    expect(loadDefaultRange()).toEqual(factoryDefaultRange);
+  });
+
+  test("corrupt storage falls back to the factory default", () => {
+    localStorage.setItem("audit.defaultTimeRange", "{nonsense");
+    expect(loadDefaultRange()).toEqual(factoryDefaultRange);
+  });
+});
+
+describe("FEATURE: Narrowing suggestions after a timed-out query", () => {
+  test("EXAMPLE: An unbounded query gets the widest still-bounded presets", () => {
+    expect(narrowingPresets({ from: "", to: "" }, now).map((p) => p.label)).toEqual(["Last 7 days", "Last 24 hours"]);
+  });
+
+  test("EXAMPLE: Only presets strictly narrower than the failed range are offered", () => {
+    expect(narrowingPresets({ from: "now-6h", to: "now" }, now).map((p) => p.label)).toEqual(["Last hour", "Last 15 minutes"]);
+  });
+
+  test("EXAMPLE: A custom absolute range gets the presets inside its span", () => {
+    expect(narrowingPresets({ from: "2026-08-30 10:00Z", to: "2026-09-01 10:00Z" }, now).map((p) => p.label)).toEqual(["Last 24 hours", "Last 6 hours"]);
+  });
+
+  test("EXAMPLE: The narrowest preset has nowhere further to go", () => {
+    expect(narrowingPresets({ from: "now-15m", to: "now" }, now)).toEqual([]);
+  });
+});
+
+describe("RULE: A range reads as 'from to to'; a range that ends now is just its start", () => {
+  test("EXAMPLE: A last-N range shows only the start expression", () => {
+    expect(describeRangeText({ from: "now-90m", to: "now" })).toBe("now-90m");
+  });
+
+  test("EXAMPLE: An absolute start that runs to now keeps its 'to now', since the start alone would read as a point in time", () => {
+    expect(describeRangeText({ from: "2026-09-01 08:00", to: "now" })).toBe("2026-09-01 08:00 to now");
+  });
+
+  test("EXAMPLE: Two live expressions are joined by 'to'", () => {
+    expect(describeRangeText({ from: "now-1d/d", to: "now/d" })).toBe("now-1d/d to now/d");
+  });
+
+  test("EXAMPLE: Absolute bounds are joined by 'to'", () => {
+    expect(describeRangeText({ from: "2026-09-01 08:00", to: "2026-09-01 12:00" })).toBe("2026-09-01 08:00 to 2026-09-01 12:00");
+  });
+});
diff --git a/src/Frontend/src/components/audit/timeRange.ts b/src/Frontend/src/components/audit/timeRange.ts
new file mode 100644
index 0000000000..fee64d6dae
--- /dev/null
+++ b/src/Frontend/src/components/audit/timeRange.ts
@@ -0,0 +1,253 @@
+// Parsing and resolution for the audit time-range picker.
+//
+// Each bound of the range is a text expression, either:
+//  - relative: "now", "now-6h", "now/d" (snap to start of unit; in the To bound
+//    a snap means end of unit), "now-7d/d" — units s m h d w M
+//  - absolute RFC 3339, tolerant: "T" or a space as separator, seconds and
+//    milliseconds optional, zone optional. A zone-less value is local wall time;
+//    "2026-08-31Z" forces UTC midnight, "2026-09-01 00:00:00-03:00" is honored
+//    as given. A bare date is midnight (in the chosen zone).
+//
+// Relative expressions stay text in the store and the URL, and are resolved to
+// concrete instants at query time — so "last 6 hours" keeps sliding with
+// auto-refresh, and a shared URL re-evaluates instead of going stale.
+
+export interface TimeRangeText {
+  from: string;
+  to: string;
+}
+
+export interface ParsedPoint {
+  date?: Date;
+  live?: boolean;
+  error?: string;
+}
+
+const RELATIVE_PATTERN = /^now(?:-(\d+)([smhdwM]))?(?:\/([smhdwM]))?$/;
+const ABSOLUTE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?)?\s*(Z|z|[+-]\d{2}:?\d{2})?$/;
+
+const UNIT_MS: Record<string, number> = { s: 1e3, m: 60e3, h: 3600e3, d: 86400e3, w: 7 * 86400e3 };
+
+export function parseTimePoint(raw: string, isEnd: boolean, now: () => Date = () => new Date()): ParsedPoint {
+  const text = raw.trim();
+  if (text === "") {
+    return { error: "empty" };
+  }
+
+  const relative = RELATIVE_PATTERN.exec(text);
+  if (relative) {
+    const [, amount, unit, snap] = relative;
+    let date = now();
+    if (amount) {
+      if (unit === "M") {
+        date = new Date(date);
+        date.setMonth(date.getMonth() - Number(amount));
+      } else {
+        date = new Date(date.getTime() - Number(amount) * UNIT_MS[unit]);
+      }
+    }
+    if (snap) {
+      date = snapToUnit(date, snap, isEnd);
+    }
+    return { date, live: true };
+  }
+
+  if (/^now/i.test(text)) {
+    return { error: "expected now, now-6h or now-1d/d" };
+  }
+
+  const absolute = ABSOLUTE_PATTERN.exec(text);
+  if (!absolute) {
+    return { error: "expected RFC 3339 (2026-09-01 14:30[:00][Z|±hh:mm]) or a relative expression (now-6h)" };
+  }
+
+  const [, year, month, day, hour = "00", minute = "00", second = "00", millis = "0", zone] = absolute;
+  if (+month < 1 || +month > 12 || +day < 1 || +day > 31 || +hour > 23 || +minute > 59 || +second > 59) {
+    return { error: "not a real date" };
+  }
+  const ms = Number((millis + "00").slice(0, 3));
+  let date: Date;
+  if (zone) {
+    let offsetMinutes = 0;
+    if (zone.toUpperCase() !== "Z") {
+      const zoneMatch = /^([+-])(\d{2}):?(\d{2})$/.exec(zone);
+      if (!zoneMatch) {
+        return { error: `unrecognized zone '${zone}'` };
+      }
+      offsetMinutes = (zoneMatch[1] === "-" ? -1 : 1) * (Number(zoneMatch[2]) * 60 + Number(zoneMatch[3]));
+    }
+    date = new Date(Date.UTC(+year, +month - 1, +day, +hour, +minute, +second, ms) - offsetMinutes * 60e3);
+  } else {
+    date = new Date(+year, +month - 1, +day, +hour, +minute, +second, ms);
+  }
+
+  // JS Date rolls invalid combinations over (Feb 30 -> Mar 2); probe the calendar day itself
+  const rolledOver = new Date(Date.UTC(+year, +month - 1, +day)).getUTCDate() !== +day;
+  return isNaN(date.getTime()) || rolledOver ? { error: "not a real date" } : { date, live: false };
+}
+
+function snapToUnit(input: Date, unit: string, toEndOfUnit: boolean): Date {
+  const date = new Date(input);
+  switch (unit) {
+    case "s":
+      date.setMilliseconds(0);
+      break;
+    case "m":
+      date.setSeconds(0, 0);
+      break;
+    case "h":
+      date.setMinutes(0, 0, 0);
+      break;
+    case "d":
+      date.setHours(0, 0, 0, 0);
+      break;
+    case "w":
+      date.setHours(0, 0, 0, 0);
+      date.setDate(date.getDate() - ((date.getDay() + 6) % 7));
+      break;
+    case "M":
+      date.setHours(0, 0, 0, 0);
+      date.setDate(1);
+      break;
+  }
+
+  if (!toEndOfUnit) {
+    return date;
+  }
+
+  const end = new Date(date);
+  switch (unit) {
+    case "s":
+      end.setSeconds(end.getSeconds() + 1);
+      break;
+    case "m":
+      end.setMinutes(end.getMinutes() + 1);
+      break;
+    case "h":
+      end.setHours(end.getHours() + 1);
+      break;
+    case "d":
+      end.setDate(end.getDate() + 1);
+      break;
+    case "w":
+      end.setDate(end.getDate() + 7);
+      break;
+    case "M":
+      end.setMonth(end.getMonth() + 1);
+      break;
+  }
+  return new Date(end.getTime() - 1000);
+}
+
+export interface ResolvedRange {
+  from: Date;
+  to: Date;
+  live: boolean;
+}
+
+// Resolves both bounds; swaps them when entered backwards. Returns null when
+// either bound is empty or invalid — callers treat that as "no range".
+export function resolveTimeRange(range: TimeRangeText, now: () => Date = () => new Date()): ResolvedRange | null {
+  const fixedNow = now();
+  const stableNow = () => fixedNow; // both bounds see the same "now"
+  const from = parseTimePoint(range.from, false, stableNow);
+  const to = parseTimePoint(range.to, true, stableNow);
+  if (!from.date || !to.date) {
+    return null;
+  }
+  const swapped = from.date > to.date;
+  return {
+    from: swapped ? to.date : from.date,
+    to: swapped ? from.date : to.date,
+    live: Boolean(from.live || to.live),
+  };
+}
+
+export function isEmptyRange(range: TimeRangeText): boolean {
+  return range.from.trim() === "" && range.to.trim() === "";
+}
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+export function formatUtc(date: Date): string {
+  return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}T${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(date.getUTCSeconds())}Z`;
+}
+
+export function formatLocal(date: Date): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
+
+// How a range reads to a person: "start to end". A relative range that ends now is what
+// "last N" means, so its start alone says it: "now-90m" rather than "now-90m to now". An
+// absolute start keeps its "to now": on its own, "2026-09-01 08:00" reads as a point in time.
+export function describeRangeText(range: TimeRangeText): string {
+  const from = range.from.trim();
+  const to = range.to.trim();
+  const lastN = from.startsWith("now") && (to === "now" || to === "");
+  return lastN ? from : `${from} to ${to}`;
+}
+
+export interface RangePreset {
+  label: string;
+  from: string;
+  to: string;
+}
+
+export const rangePresets: RangePreset[] = [
+  { label: "Last 15 minutes", from: "now-15m", to: "now" },
+  { label: "Last hour", from: "now-1h", to: "now" },
+  { label: "Last 6 hours", from: "now-6h", to: "now" },
+  { label: "Last 24 hours", from: "now-24h", to: "now" },
+  { label: "Last 7 days", from: "now-7d", to: "now" },
+  { label: "Today since 00:00", from: "now/d", to: "now" },
+  { label: "Yesterday", from: "now-1d/d", to: "now-1d/d" },
+  { label: "This week", from: "now/w", to: "now" },
+];
+
+// The one-click escape hatch for a timed-out query: the "last N" presets
+// strictly narrower than the range that just failed, widest first — a gentle
+// step down, not a cliff. An empty or invalid range has no bound at all, so
+// everything qualifies. At most two suggestions.
+export function narrowingPresets(range: TimeRangeText, now: () => Date = () => new Date()): RangePreset[] {
+  const resolved = resolveTimeRange(range, now);
+  const spanMs = resolved ? resolved.to.getTime() - resolved.from.getTime() : Infinity;
+  const spanOf = (preset: RangePreset) => {
+    const r = resolveTimeRange({ from: preset.from, to: preset.to }, now)!;
+    return r.to.getTime() - r.from.getTime();
+  };
+  return rangePresets
+    .filter((preset) => preset.to === "now" && !preset.from.includes("/") && spanOf(preset) < spanMs)
+    .slice(-2)
+    .reverse();
+}
+
+// The initial range when the URL doesn't carry one. Users can save their own
+// default (kept in this browser); the factory default bounds the first query
+// so opening the view never scans the whole store.
+export const factoryDefaultRange: TimeRangeText = { from: "now-6h", to: "now" };
+
+const DEFAULT_RANGE_STORAGE_KEY = "audit.defaultTimeRange";
+
+export function loadDefaultRange(): TimeRangeText {
+  try {
+    const stored = JSON.parse(localStorage.getItem(DEFAULT_RANGE_STORAGE_KEY) ?? "");
+    if (stored && typeof stored.from === "string" && typeof stored.to === "string") {
+      return { from: stored.from, to: stored.to };
+    }
+  } catch {
+    // fall through to the factory default
+  }
+  return { ...factoryDefaultRange };
+}
+
+export function saveDefaultRange(range: TimeRangeText | null): void {
+  try {
+    if (range === null) {
+      localStorage.removeItem(DEFAULT_RANGE_STORAGE_KEY);
+    } else {
+      localStorage.setItem(DEFAULT_RANGE_STORAGE_KEY, JSON.stringify(range));
+    }
+  } catch {
+    // storage unavailable: the default just doesn't persist
+  }
+}
diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
index 759f7fce3c..87511f9ab3 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -6,6 +6,7 @@ import type { EndpointsView } from "@/resources/EndpointView";
 import type { DateRange } from "@/types/date";
 import serviceControlClient from "@/components/serviceControlClient";
 import auditClient from "@/components/audit/auditClient";
+import { loadDefaultRange, resolveTimeRange } from "@/components/audit/timeRange";
 
 export enum FieldNames {
   TimeSent = "time_sent",
@@ -20,7 +21,11 @@ export const useAuditStore = defineStore("AuditStore", () => {
     isAscending: false,
   });
 
-  const dateRange = ref<DateRange>([]);
+  // Text expressions (relative like "now-6h" or absolute RFC 3339); resolved to
+  // instants on every refresh so live ranges slide with auto-refresh
+  const initialRange = loadDefaultRange();
+  const timeRangeFrom = ref(initialRange.from);
+  const timeRangeTo = ref(initialRange.to);
   const messageFilterString = ref("");
   const itemsPerPage = ref(100);
   const totalCount = ref(0);
@@ -48,11 +53,14 @@ export const useAuditStore = defineStore("AuditStore", () => {
     const thisQuery = new AbortController();
     activeQuery = thisQuery;
 
+    const resolvedRange = resolveTimeRange({ from: timeRangeFrom.value, to: timeRangeTo.value });
+    const dateRange: DateRange = resolvedRange ? [resolvedRange.from, resolvedRange.to] : [];
+
     try {
       const [response, data] = await auditClient.getMessages(
         {
           endpointName: selectedEndpointName.value,
-          dateRange: dateRange.value,
+          dateRange,
           messageFilterString: messageFilterString.value,
           itemsPerPage: itemsPerPage.value,
           sort: sortByInstances.value,
@@ -115,7 +123,8 @@ export const useAuditStore = defineStore("AuditStore", () => {
     itemsPerPage,
     totalCount,
     endpoints,
-    dateRange,
+    timeRangeFrom,
+    timeRangeTo,
     queryFailed,
   };
 });