From af54c03f53f030072826bb8c62971ffe167ccb79 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Tue, 1 Sep 2026 00:18:55 +0200
Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20Show=20actionable=20feedback=20?=
 =?UTF-8?q?when=20the=20All=20Messages=20query=20fails=20or=20times=20out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ServiceControl now terminates audit queries that exceed the configured
query time limit. Previously any failed query left the view silently
empty (the error became an unhandled watcher rejection). The store now
records the failure and the view shows an alert explaining that the
instance might be too busy, with concrete suggestions: retry off-peak,
reduce the maximum results, or narrow the date range.
---
 .../src/components/audit/AuditList.spec.ts    | 34 ++++++++++
 .../src/components/audit/AuditList.vue        | 19 +++++-
 src/Frontend/src/stores/AuditStore.spec.ts    | 63 +++++++++++++++++++
 src/Frontend/src/stores/AuditStore.ts         | 11 +++-
 4 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 src/Frontend/src/stores/AuditStore.spec.ts

diff --git a/src/Frontend/src/components/audit/AuditList.spec.ts b/src/Frontend/src/components/audit/AuditList.spec.ts
index 622a6ca165..a5309ba572 100644
--- a/src/Frontend/src/components/audit/AuditList.spec.ts
+++ b/src/Frontend/src/components/audit/AuditList.spec.ts
@@ -314,6 +314,40 @@ describe("FEATURE: Audit Messages Query State", () => {
     });
   });
 
+  describe("RULE: A failed query tells the user what happened and what to try", () => {
+    test("EXAMPLE: The error banner is shown after a failed query", async () => {
+      const { store } = await renderAuditList([]);
+
+      await waitForFirstLoadToComplete();
+
+      store.queryFailed = true;
+      await nextTick();
+
+      expect(screen.getByTestId("query-error")).toBeInTheDocument();
+    });
+
+    test("EXAMPLE: The error banner is not shown while a retry is in flight", async () => {
+      const { store, isRefreshing } = await renderAuditList([]);
+
+      await waitForFirstLoadToComplete();
+
+      store.queryFailed = true;
+      isRefreshing.value = true;
+      await nextTick();
+
+      expect(screen.queryByTestId("query-error")).not.toBeInTheDocument();
+    });
+
+    test("EXAMPLE: The error banner is not shown when queries succeed", async () => {
+      const { verify } = await renderAuditList([createMessage()]);
+
+      await waitForFirstLoadToComplete();
+
+      verify.messagesAreVisible();
+      expect(screen.queryByTestId("query-error")).not.toBeInTheDocument();
+    });
+  });
+
   describe("RULE: A query-control change results in exactly one query", () => {
     test("EXAMPLE: Changing the filter text fires a single query", async () => {
       const { refreshNow, store } = await renderAuditList([createMessage()]);
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 19dbd77a74..2623914d36 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -17,7 +17,7 @@ import PageBanner, { type BannerMessage } from "@/components/PageBanner.vue";
 import { useConfigurationStore } from "@/stores/ConfigurationStore";
 
 const store = useAuditStore();
-const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, dateRange } = storeToRefs(store);
+const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, dateRange, queryFailed } = storeToRefs(store);
 const route = useRoute();
 const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
@@ -147,6 +147,10 @@ watch(autoRefreshValue, (newValue) => {
       <PageBanner v-if="bannerMessage && isMassTransitConnected === false" :message="bannerMessage" :show-action="showBannerAction" @action="showWizard = true" />
     </div>
     <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>
+    </div>
     <div class="row results-table">
       <LoadingSpinner v-if="firstLoad || isRefreshing" :overlay="isRefreshing && messages.length > 0" />
       <template v-for="message in messages" :key="message.id">
@@ -169,6 +173,19 @@ watch(autoRefreshValue, (newValue) => {
   margin-top: -0.5rem;
 }
 
+.query-error {
+  margin-top: 1rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid #f0c2c2;
+  border-left: 4px solid #ce4844;
+  border-radius: 4px;
+  background-color: #fdf7f7;
+}
+
+.query-error p {
+  margin: 0.25rem 0 0;
+}
+
 .results-table {
   margin-top: 1rem;
   margin-bottom: 5rem;
diff --git a/src/Frontend/src/stores/AuditStore.spec.ts b/src/Frontend/src/stores/AuditStore.spec.ts
new file mode 100644
index 0000000000..3befedce9a
--- /dev/null
+++ b/src/Frontend/src/stores/AuditStore.spec.ts
@@ -0,0 +1,63 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+
+const { fetchTypedFromServiceControl } = vi.hoisted(() => ({
+  fetchTypedFromServiceControl: vi.fn(),
+}));
+
+vi.mock("@/components/serviceControlClient", () => ({
+  default: {
+    fetchTypedFromServiceControl,
+  },
+}));
+
+import { useAuditStore } from "@/stores/AuditStore";
+
+function responseWithTotalCount(count: number): Response {
+  return { headers: new Headers({ "total-count": count.toString() }) } as Response;
+}
+
+const message = { id: "msg-1" };
+
+describe("AuditStore refresh", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.clearAllMocks();
+  });
+
+  test("a successful query populates the messages and total count", async () => {
+    fetchTypedFromServiceControl.mockResolvedValue([responseWithTotalCount(1), [message]]);
+    const store = useAuditStore();
+
+    await store.refresh();
+
+    expect(store.messages).toEqual([message]);
+    expect(store.totalCount).toBe(1);
+    expect(store.queryFailed).toBe(false);
+  });
+
+  test("a failed query flags the failure instead of throwing", async () => {
+    fetchTypedFromServiceControl.mockRejectedValue(new Error("Internal Server Error"));
+    const store = useAuditStore();
+
+    await expect(store.refresh()).resolves.toBeUndefined();
+
+    expect(store.messages).toEqual([]);
+    expect(store.totalCount).toBe(0);
+    expect(store.queryFailed).toBe(true);
+  });
+
+  test("a successful query clears an earlier failure", async () => {
+    const store = useAuditStore();
+
+    fetchTypedFromServiceControl.mockRejectedValueOnce(new Error("Internal Server Error"));
+    await store.refresh();
+    expect(store.queryFailed).toBe(true);
+
+    fetchTypedFromServiceControl.mockResolvedValue([responseWithTotalCount(1), [message]]);
+    await store.refresh();
+
+    expect(store.queryFailed).toBe(false);
+    expect(store.messages).toEqual([message]);
+  });
+});
diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
index 027a24f795..f27d14b257 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -27,6 +27,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
   const messages = ref<Message[]>([]);
   const selectedEndpointName = ref<string>("");
   const endpoints = ref<EndpointsView[]>([]);
+  const queryFailed = ref(false);
 
   async function loadEndpoints() {
     try {
@@ -49,9 +50,14 @@ export const useAuditStore = defineStore("AuditStore", () => {
       });
       totalCount.value = parseInt(response.headers.get("total-count") ?? "0");
       messages.value = data;
-    } catch (e) {
+      queryFailed.value = false;
+    } catch {
+      // A long-running query is terminated by ServiceControl after its configured query time limit
+      // and surfaces here as a failed response. Not rethrown: the callers are watchers, so a
+      // rethrow would only become an unhandled rejection instead of user feedback.
       messages.value = [];
-      throw e;
+      totalCount.value = 0;
+      queryFailed.value = true;
     }
   }
 
@@ -66,6 +72,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
     totalCount,
     endpoints,
     dateRange,
+    queryFailed,
   };
 });
 

From 5a7593e81eb13ddded2e310d5708d21809d937d1 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Tue, 1 Sep 2026 00:22:20 +0200
Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20Keep=20All=20Messages=20usable?=
 =?UTF-8?q?=20while=20a=20query=20runs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The filter inputs were disabled while a query ran, which lost the
focus after one typed character and locked users out for the duration
of a slow query; every re-fetch also covered the list with a white
overlay (#3047), so on every auto-refresh tick the rows flashed and
became unreachable.

The controls now stay enabled; starting a query aborts the one still
in flight (the abort propagates through ServiceControl and terminates
the database-side query) instead of silently dropping the new request,
and a superseded response can no longer overwrite newer results. A
re-fetch over existing rows leaves them visible and usable until the
new results replace them; the plain spinner remains only when there is
nothing to show yet.
---
 .../src/components/RefreshConfig.spec.ts      |  7 +--
 src/Frontend/src/components/RefreshConfig.vue |  2 +-
 .../src/components/audit/AuditList.spec.ts    | 52 +++++++------------
 .../src/components/audit/AuditList.vue        |  6 ++-
 .../src/components/audit/FiltersPanel.vue     | 21 ++------
 .../src/components/audit/auditClient.ts       |  5 +-
 src/Frontend/src/composables/autoRefresh.ts   | 25 +++++----
 src/Frontend/src/stores/AuditStore.spec.ts    | 40 ++++++++++++++
 src/Frontend/src/stores/AuditStore.ts         | 39 +++++++++++---
 9 files changed, 125 insertions(+), 72 deletions(-)

diff --git a/src/Frontend/src/components/RefreshConfig.spec.ts b/src/Frontend/src/components/RefreshConfig.spec.ts
index cbdb02cd5b..ff74b7fa7e 100644
--- a/src/Frontend/src/components/RefreshConfig.spec.ts
+++ b/src/Frontend/src/components/RefreshConfig.spec.ts
@@ -66,8 +66,8 @@ function renderRefreshConfig(queryInProgress: boolean) {
 // ==================== Tests ====================
 
 describe("FEATURE: Refresh Controls Query State", () => {
-  describe("RULE: Refresh controls are disabled while a query is in progress", () => {
-    test("EXAMPLE: Refresh controls reflect queryInProgress changes", async () => {
+  describe("RULE: Only the refresh action locks while a query is in progress", () => {
+    test("EXAMPLE: The refresh button loads and disables, the auto-refresh selector stays usable", async () => {
       const { setQueryInProgress, verify } = renderRefreshConfig(false);
 
       verify.refreshButtonIsNotLoading();
@@ -78,7 +78,8 @@ describe("FEATURE: Refresh Controls Query State", () => {
 
       verify.refreshButtonIsLoading();
       verify.refreshButtonIsDisabled();
-      verify.autoRefreshSelectorIsDisabled();
+      // The selector must stay usable so auto-refresh can be turned off during a slow query
+      verify.autoRefreshSelectorIsEnabled();
 
       await setQueryInProgress(false);
 
diff --git a/src/Frontend/src/components/RefreshConfig.vue b/src/Frontend/src/components/RefreshConfig.vue
index a271ef8642..2fe5acac28 100644
--- a/src/Frontend/src/components/RefreshConfig.vue
+++ b/src/Frontend/src/components/RefreshConfig.vue
@@ -54,7 +54,7 @@ async function refresh() {
     <div class="filter">
       <div class="filter-label">Auto-Refresh:</div>
       <div class="filter-component">
-        <ListFilterSelector :items="autoRefreshOptionsText.map((i) => i[1])" v-model="selectedRefresh" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" :disabled="props.queryInProgress" />
+        <ListFilterSelector :items="autoRefreshOptionsText.map((i) => i[1])" v-model="selectedRefresh" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" />
       </div>
     </div>
   </div>
diff --git a/src/Frontend/src/components/audit/AuditList.spec.ts b/src/Frontend/src/components/audit/AuditList.spec.ts
index a5309ba572..a33f086b5e 100644
--- a/src/Frontend/src/components/audit/AuditList.spec.ts
+++ b/src/Frontend/src/components/audit/AuditList.spec.ts
@@ -41,8 +41,7 @@ interface QueryStateAssertions {
   messagesAreNotVisible(): void;
   refreshControlsKnowQueryIsInProgress(): void;
   refreshControlsKnowQueryIsIdle(): void;
-  filtersKnowQueryIsInProgress(): void;
-  filtersKnowQueryIsIdle(): void;
+  filtersAreNotBlockedByQuery(): void;
 }
 
 interface RenderResult {
@@ -172,11 +171,10 @@ async function renderAuditList(messages: Message[] = []): Promise<RenderResult>
     refreshControlsKnowQueryIsIdle() {
       expect(getRefreshConfig().dataset.queryInProgress).toBe("false");
     },
-    filtersKnowQueryIsInProgress() {
-      expect(getFiltersPanel().dataset.queryInProgress).toBe("true");
-    },
-    filtersKnowQueryIsIdle() {
-      expect(getFiltersPanel().dataset.queryInProgress).toBe("false");
+    filtersAreNotBlockedByQuery() {
+      // The filters panel is deliberately not told about query progress: entering a new
+      // query must always be possible, even while a slow query is still running.
+      expect(getFiltersPanel().dataset.queryInProgress).toBe("undefined");
     },
   };
 
@@ -213,7 +211,7 @@ describe("FEATURE: Audit Messages Query State", () => {
       verify.spinnerIsVisible();
       verify.messagesAreNotVisible();
       verify.refreshControlsKnowQueryIsInProgress();
-      verify.filtersKnowQueryIsInProgress();
+      verify.filtersAreNotBlockedByQuery();
     });
 
     test("EXAMPLE: Spinner is hidden after the first fetch completes", async () => {
@@ -224,7 +222,7 @@ describe("FEATURE: Audit Messages Query State", () => {
       await waitFor(() => verify.spinnerIsNotVisible());
       verify.overlayIsNotVisible();
       verify.refreshControlsKnowQueryIsIdle();
-      verify.filtersKnowQueryIsIdle();
+      verify.filtersAreNotBlockedByQuery();
     });
   });
 
@@ -256,8 +254,8 @@ describe("FEATURE: Audit Messages Query State", () => {
     });
   });
 
-  describe("RULE: Query controls are disabled during a fetch", () => {
-    test("EXAMPLE: Query controls are disabled when a re-fetch is in-flight", async () => {
+  describe("RULE: Filters stay usable while a query is running", () => {
+    test("EXAMPLE: The filters are not blocked when a re-fetch is in-flight", async () => {
       const { verify, isRefreshing } = await renderAuditList([]);
 
       await waitForFirstLoadToComplete();
@@ -266,10 +264,10 @@ describe("FEATURE: Audit Messages Query State", () => {
       await nextTick();
 
       verify.refreshControlsKnowQueryIsInProgress();
-      verify.filtersKnowQueryIsInProgress();
+      verify.filtersAreNotBlockedByQuery();
     });
 
-    test("EXAMPLE: Query controls are re-enabled after the fetch completes", async () => {
+    test("EXAMPLE: The refresh action is re-enabled after the fetch completes", async () => {
       const { verify, isRefreshing } = await renderAuditList([]);
 
       await waitForFirstLoadToComplete();
@@ -281,36 +279,26 @@ describe("FEATURE: Audit Messages Query State", () => {
       await nextTick();
 
       verify.refreshControlsKnowQueryIsIdle();
-      verify.filtersKnowQueryIsIdle();
+      verify.filtersAreNotBlockedByQuery();
     });
   });
 
-  describe("RULE: A loading overlay is shown when re-fetching with existing results", () => {
-    test("EXAMPLE: Overlay appears over existing messages while a re-fetch is in-flight", async () => {
+  describe("RULE: Existing results stay visible and usable while a re-fetch runs", () => {
+    // The refresh button already signals the running query (spinner, Cancel, elapsed time).
+    // Covering the stale rows would only take them away from the user while waiting.
+    test("EXAMPLE: No overlay covers the rows during a re-fetch, however long it takes", async () => {
       const { verify, isRefreshing } = await renderAuditList([createMessage()]);
-
       await waitForFirstLoadToComplete();
       await waitFor(() => verify.messagesAreVisible());
 
       isRefreshing.value = true;
       await nextTick();
+      verify.overlayIsNotVisible();
+      verify.spinnerIsNotVisible();
 
-      verify.overlayIsVisible();
-      verify.messagesAreVisible();
-    });
-
-    test("EXAMPLE: Overlay disappears after the re-fetch completes", async () => {
-      const { verify, isRefreshing } = await renderAuditList([createMessage()]);
-
-      await waitForFirstLoadToComplete();
-
-      isRefreshing.value = true;
-      await nextTick();
-      verify.overlayIsVisible();
-
-      isRefreshing.value = false;
-      await nextTick();
+      await new Promise((r) => setTimeout(r, 400));
       verify.overlayIsNotVisible();
+      verify.messagesAreVisible();
     });
   });
 
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 2623914d36..ff7479c911 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -139,7 +139,7 @@ watch(autoRefreshValue, (newValue) => {
     <div class="header">
       <RefreshConfig v-model="autoRefreshValue" :query-in-progress="queryInProgress" @manual-refresh="refreshNow" />
       <div class="row">
-        <FiltersPanel :query-in-progress="queryInProgress" />
+        <FiltersPanel />
       </div>
       <div class="row">
         <ResultsCount :displayed="messages.length" :total="totalCount" />
@@ -152,7 +152,9 @@ watch(autoRefreshValue, (newValue) => {
       <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>
     </div>
     <div class="row results-table">
-      <LoadingSpinner v-if="firstLoad || isRefreshing" :overlay="isRefreshing && messages.length > 0" />
+      <!-- Only when there is nothing to show yet. A re-fetch over existing rows leaves them
+           visible and usable: the refresh button already signals the running query -->
+      <LoadingSpinner v-if="firstLoad || (isRefreshing && messages.length === 0)" />
       <template v-for="message in messages" :key="message.id">
         <AuditListItem :message="message" />
       </template>
diff --git a/src/Frontend/src/components/audit/FiltersPanel.vue b/src/Frontend/src/components/audit/FiltersPanel.vue
index 6a0a361de5..cc21d3cb54 100644
--- a/src/Frontend/src/components/audit/FiltersPanel.vue
+++ b/src/Frontend/src/components/audit/FiltersPanel.vue
@@ -6,7 +6,6 @@ import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
 import { computed } from "vue";
 import DatePickerRange from "@/components/audit/DatePickerRange.vue";
 
-const props = defineProps<{ queryInProgress?: boolean }>();
 const store = useAuditStore();
 const { sortBy, messageFilterString, selectedEndpointName, endpoints, itemsPerPage, dateRange } = storeToRefs(store);
 const endpointNames = computed(() => {
@@ -60,42 +59,32 @@ function findKeyByValue(searchValue: string) {
     <div class="filter">
       <div class="filter-label"></div>
       <div class="filter-component text-search-container">
-        <FilterInput v-model="messageFilterString" placeholder="Search messages..." aria-label="Search messages" :disabled="props.queryInProgress" />
+        <FilterInput v-model="messageFilterString" placeholder="Search messages..." aria-label="Search messages" />
         <div class="note">Check the <a href="https://docs.particular.net/servicepulse/all-messages#filtering-options">documentation</a> to see the available filtering options</div>
       </div>
     </div>
     <div class="filter">
       <div class="filter-label">Endpoint:</div>
       <div class="filter-component">
-        <ListFilterSelector
-          :items="endpointNames"
-          instructions="Select an endpoint"
-          v-model="selectedEndpointName"
-          item-name="endpoint"
-          label="Endpoint"
-          default-empty-text="Any"
-          :show-clear="true"
-          :show-filter="true"
-          :disabled="props.queryInProgress"
-        />
+        <ListFilterSelector :items="endpointNames" instructions="Select an endpoint" v-model="selectedEndpointName" item-name="endpoint" label="Endpoint" default-empty-text="Any" :show-clear="true" :show-filter="true" />
       </div>
     </div>
     <div class="filter">
       <div class="filter-label">Dates:</div>
       <div class="filter-component">
-        <DatePickerRange v-model="dateRange" :disabled="props.queryInProgress" />
+        <DatePickerRange v-model="dateRange" />
       </div>
     </div>
     <div class="filter">
       <div class="filter-label">Show:</div>
       <div class="filter-component">
-        <ListFilterSelector :items="numberOfItemsPerPage" instructions="Max results to display" v-model="selectedItemsPerPage" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" :disabled="props.queryInProgress" />
+        <ListFilterSelector :items="numberOfItemsPerPage" instructions="Max results to display" v-model="selectedItemsPerPage" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" />
       </div>
     </div>
     <div class="filter">
       <div class="filter-label">Sort:</div>
       <div class="filter-component">
-        <ListFilterSelector :items="sortByItems" v-model="selectedSortByItem" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" :disabled="props.queryInProgress" />
+        <ListFilterSelector :items="sortByItems" v-model="selectedSortByItem" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" />
       </div>
     </div>
   </div>
diff --git a/src/Frontend/src/components/audit/auditClient.ts b/src/Frontend/src/components/audit/auditClient.ts
index 097aa9a69a..92baf9d698 100644
--- a/src/Frontend/src/components/audit/auditClient.ts
+++ b/src/Frontend/src/components/audit/auditClient.ts
@@ -12,12 +12,13 @@ export interface AuditQuery {
 }
 
 class AuditClient {
-  public async getMessages(query: AuditQuery): Promise<[Response, Message[]]> {
+  public async getMessages(query: AuditQuery, signal?: AbortSignal): Promise<[Response, Message[]]> {
     const [fromDate, toDate] = query.dateRange ?? [];
     const from = fromDate?.toISOString() ?? "";
     const to = toDate?.toISOString() ?? "";
     return await serviceControlClient.fetchTypedFromServiceControl<Message[]>(
-      `messages2/?endpoint_name=${query.endpointName ?? ""}&from=${from}&to=${to}&q=${query.messageFilterString ?? ""}&page_size=${query.itemsPerPage ?? 100}&sort=${query.sort?.property ?? "time_sent"}&direction=${query.sort?.isAscending ? "asc" : "desc"}`
+      `messages2/?endpoint_name=${query.endpointName ?? ""}&from=${from}&to=${to}&q=${query.messageFilterString ?? ""}&page_size=${query.itemsPerPage ?? 100}&sort=${query.sort?.property ?? "time_sent"}&direction=${query.sort?.isAscending ? "asc" : "desc"}`,
+      signal
     );
   }
 
diff --git a/src/Frontend/src/composables/autoRefresh.ts b/src/Frontend/src/composables/autoRefresh.ts
index 493f0c6332..6630c4039d 100644
--- a/src/Frontend/src/composables/autoRefresh.ts
+++ b/src/Frontend/src/composables/autoRefresh.ts
@@ -1,22 +1,29 @@
-import { watch, ref, shallowReadonly, type WatchStopHandle } from "vue";
+import { watch, ref, computed, shallowReadonly, type WatchStopHandle } from "vue";
 import { useCounter, useDocumentVisibility, useTimeoutPoll } from "@vueuse/core";
 
 export default function useFetchWithAutoRefresh(_name: string, fetchFn: () => Promise<void>, intervalMs: number) {
   let watchStop: WatchStopHandle | null = null;
   const { count, inc, dec, reset } = useCounter(0);
   const interval = ref(intervalMs);
-  const isRefreshing = ref(false);
-  const fetchWrapper = async () => {
-    if (isRefreshing.value) {
-      return;
-    }
-    isRefreshing.value = true;
+  const inflight = ref(0);
+  const isRefreshing = computed(() => inflight.value > 0);
+  const run = async () => {
+    inflight.value++;
     try {
       await fetchFn();
     } finally {
-      isRefreshing.value = false;
+      inflight.value--;
+    }
+  };
+  // Poll path: a tick that lands while a fetch is running is skipped
+  const fetchWrapper = async () => {
+    if (inflight.value > 0) {
+      return;
     }
+    await run();
   };
+  // User path: never dropped — the fetchFn is expected to supersede its own in-flight work
+  const refreshNow = run;
   const { isActive, pause, resume } = useTimeoutPoll(
     fetchWrapper,
     interval,
@@ -66,5 +73,5 @@ export default function useFetchWithAutoRefresh(_name: string, fetchFn: () => Pr
     }
   };
 
-  return { refreshNow: fetchWrapper, isRefreshing: shallowReadonly(isRefreshing), updateInterval, isActive, start, stop };
+  return { refreshNow, isRefreshing: shallowReadonly(isRefreshing), updateInterval, isActive, start, stop };
 }
diff --git a/src/Frontend/src/stores/AuditStore.spec.ts b/src/Frontend/src/stores/AuditStore.spec.ts
index 3befedce9a..daa2ac1495 100644
--- a/src/Frontend/src/stores/AuditStore.spec.ts
+++ b/src/Frontend/src/stores/AuditStore.spec.ts
@@ -17,6 +17,14 @@ function responseWithTotalCount(count: number): Response {
   return { headers: new Headers({ "total-count": count.toString() }) } as Response;
 }
 
+function abortablePendingFetch(onSignal?: (signal: AbortSignal | undefined) => void) {
+  return (_suffix: string, signal?: AbortSignal) =>
+    new Promise((_resolve, reject) => {
+      onSignal?.(signal);
+      signal?.addEventListener("abort", () => reject(new DOMException("aborted", "AbortError")));
+    });
+}
+
 const message = { id: "msg-1" };
 
 describe("AuditStore refresh", () => {
@@ -60,4 +68,36 @@ describe("AuditStore refresh", () => {
     expect(store.queryFailed).toBe(false);
     expect(store.messages).toEqual([message]);
   });
+
+  test("a new query aborts the one still in flight and keeps the newer result", async () => {
+    const store = useAuditStore();
+
+    let firstSignal: AbortSignal | undefined;
+    fetchTypedFromServiceControl.mockImplementationOnce(abortablePendingFetch((signal) => (firstSignal = signal)));
+
+    const first = store.refresh();
+
+    const newerMessage = { id: "msg-2" };
+    fetchTypedFromServiceControl.mockResolvedValueOnce([responseWithTotalCount(1), [newerMessage]]);
+    await store.refresh();
+    await first;
+
+    expect(firstSignal?.aborted).toBe(true);
+    expect(store.messages).toEqual([newerMessage]);
+    expect(store.queryFailed).toBe(false);
+  });
+
+  test("a superseded query is not reported as a failure", async () => {
+    const store = useAuditStore();
+
+    fetchTypedFromServiceControl.mockImplementationOnce(abortablePendingFetch());
+
+    const first = store.refresh();
+
+    fetchTypedFromServiceControl.mockResolvedValueOnce([responseWithTotalCount(0), []]);
+    await store.refresh();
+    await first;
+
+    expect(store.queryFailed).toBe(false);
+  });
 });
diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
index f27d14b257..bf9c2ea27f 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -28,6 +28,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
   const selectedEndpointName = ref<string>("");
   const endpoints = ref<EndpointsView[]>([]);
   const queryFailed = ref(false);
+  let activeQuery: AbortController | null = null;
 
   async function loadEndpoints() {
     try {
@@ -40,24 +41,48 @@ export const useAuditStore = defineStore("AuditStore", () => {
   }
 
   async function refresh() {
+    // A refresh always represents the latest query the user asked for, so any query still in
+    // flight is stale: abort it (which also terminates it on the ServiceControl side) and let
+    // this one own the view state.
+    activeQuery?.abort();
+    const thisQuery = new AbortController();
+    activeQuery = thisQuery;
+
     try {
-      const [response, data] = await auditClient.getMessages({
-        endpointName: selectedEndpointName.value,
-        dateRange: dateRange.value,
-        messageFilterString: messageFilterString.value,
-        itemsPerPage: itemsPerPage.value,
-        sort: sortByInstances.value,
-      });
+      const [response, data] = await auditClient.getMessages(
+        {
+          endpointName: selectedEndpointName.value,
+          dateRange: dateRange.value,
+          messageFilterString: messageFilterString.value,
+          itemsPerPage: itemsPerPage.value,
+          sort: sortByInstances.value,
+        },
+        thisQuery.signal
+      );
+
+      if (activeQuery !== thisQuery) {
+        return;
+      }
+
       totalCount.value = parseInt(response.headers.get("total-count") ?? "0");
       messages.value = data;
       queryFailed.value = false;
     } catch {
+      if (thisQuery.signal.aborted) {
+        // Superseded by a newer query, which owns the view state from here on
+        return;
+      }
+
       // A long-running query is terminated by ServiceControl after its configured query time limit
       // and surfaces here as a failed response. Not rethrown: the callers are watchers, so a
       // rethrow would only become an unhandled rejection instead of user feedback.
       messages.value = [];
       totalCount.value = 0;
       queryFailed.value = true;
+    } finally {
+      if (activeQuery === thisQuery) {
+        activeQuery = null;
+      }
     }
   }
 

From b330f5be19cd0b160c29475cd4fcf8e130ceb011 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Tue, 1 Sep 2026 00:25:45 +0200
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20Honor=20auto-refresh=20ticks=20?=
 =?UTF-8?q?after=20slow=20queries=20and=20show=20a=20refresh=20countdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the auto-refresh period is shorter than the query duration, a tick
that lands mid-query no longer disappears: the running query is left
undisturbed (not cancelled) and the refresh runs as soon as its results
are in.

A thin countdown bar under the refresh controls now depletes towards
the next auto refresh, and pulses while a due refresh is waiting on a
running query, so it is always visible when the view will update.
---
 .../components/AutoRefreshIndicator.spec.ts   | 28 ++++++
 .../src/components/AutoRefreshIndicator.vue   | 68 +++++++++++++++
 .../src/components/audit/AuditList.spec.ts    |  1 +
 .../src/components/audit/AuditList.vue        |  4 +-
 .../src/composables/autoRefresh.spec.ts       | 85 +++++++++++++++++++
 src/Frontend/src/composables/autoRefresh.ts   | 37 ++++++--
 6 files changed, 215 insertions(+), 8 deletions(-)
 create mode 100644 src/Frontend/src/components/AutoRefreshIndicator.spec.ts
 create mode 100644 src/Frontend/src/components/AutoRefreshIndicator.vue
 create mode 100644 src/Frontend/src/composables/autoRefresh.spec.ts

diff --git a/src/Frontend/src/components/AutoRefreshIndicator.spec.ts b/src/Frontend/src/components/AutoRefreshIndicator.spec.ts
new file mode 100644
index 0000000000..c5e766f7e0
--- /dev/null
+++ b/src/Frontend/src/components/AutoRefreshIndicator.spec.ts
@@ -0,0 +1,28 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@testing-library/vue";
+import AutoRefreshIndicator from "@/components/AutoRefreshIndicator.vue";
+
+describe("FEATURE: Auto refresh indicator", () => {
+  test("EXAMPLE: Nothing is rendered while auto refresh is off", () => {
+    render(AutoRefreshIndicator, { props: { nextRefreshAt: null, intervalMs: 5000, refreshing: false } });
+
+    expect(screen.queryByTestId("auto-refresh-indicator")).not.toBeInTheDocument();
+  });
+
+  test("EXAMPLE: A countdown bar is shown while waiting for the next refresh", () => {
+    render(AutoRefreshIndicator, { props: { nextRefreshAt: Date.now() + 2500, intervalMs: 5000, refreshing: false } });
+
+    expect(screen.getByTestId("auto-refresh-indicator")).toBeInTheDocument();
+    const bar = screen.getByTestId("auto-refresh-countdown");
+    const width = parseFloat(bar.style.width);
+    expect(width).toBeGreaterThan(25);
+    expect(width).toBeLessThan(75);
+  });
+
+  test("EXAMPLE: A waiting state is shown when the refresh is due but the query is still running", () => {
+    render(AutoRefreshIndicator, { props: { nextRefreshAt: Date.now(), intervalMs: 5000, refreshing: true } });
+
+    expect(screen.getByTestId("auto-refresh-waiting")).toBeInTheDocument();
+    expect(screen.queryByTestId("auto-refresh-countdown")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/Frontend/src/components/AutoRefreshIndicator.vue b/src/Frontend/src/components/AutoRefreshIndicator.vue
new file mode 100644
index 0000000000..773cb70eab
--- /dev/null
+++ b/src/Frontend/src/components/AutoRefreshIndicator.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+
+const props = defineProps<{ nextRefreshAt: number | null; intervalMs: number | null; refreshing: boolean }>();
+
+const now = ref(Date.now());
+let timer: number | undefined;
+
+onMounted(() => {
+  timer = window.setInterval(() => (now.value = Date.now()), 250);
+});
+
+onBeforeUnmount(() => window.clearInterval(timer));
+
+const fraction = computed(() => {
+  if (props.nextRefreshAt === null || !props.intervalMs) return null;
+  const remaining = props.nextRefreshAt - now.value;
+  return Math.min(1, Math.max(0, remaining / props.intervalMs));
+});
+
+const secondsLeft = computed(() => (props.nextRefreshAt === null ? null : Math.max(0, Math.ceil((props.nextRefreshAt - now.value) / 1000))));
+</script>
+
+<template>
+  <div
+    v-if="fraction !== null"
+    class="auto-refresh-indicator"
+    role="timer"
+    :aria-label="refreshing ? 'Waiting for query results' : `Auto refresh in ${secondsLeft} seconds`"
+    :title="refreshing ? 'Waiting for query results…' : `Auto refresh in ${secondsLeft}s`"
+    data-testid="auto-refresh-indicator"
+  >
+    <div v-if="refreshing" class="bar waiting" data-testid="auto-refresh-waiting" />
+    <div v-else class="bar" :style="{ width: `${fraction * 100}%` }" data-testid="auto-refresh-countdown" />
+  </div>
+</template>
+
+<style scoped>
+.auto-refresh-indicator {
+  width: 100%;
+  height: 3px;
+  margin-top: 0.25rem;
+  background-color: #e0e0e0;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.bar {
+  height: 100%;
+  background-color: #00729c;
+  transition: width 250ms linear;
+}
+
+.bar.waiting {
+  width: 100%;
+  animation: waiting-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes waiting-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 0.9;
+  }
+}
+</style>
diff --git a/src/Frontend/src/components/audit/AuditList.spec.ts b/src/Frontend/src/components/audit/AuditList.spec.ts
index a33f086b5e..bb193dec7a 100644
--- a/src/Frontend/src/components/audit/AuditList.spec.ts
+++ b/src/Frontend/src/components/audit/AuditList.spec.ts
@@ -115,6 +115,7 @@ async function renderAuditList(messages: Message[] = []): Promise<RenderResult>
     isActive: ref(false),
     start: vi.fn(),
     stop: vi.fn(),
+    nextRefreshAt: shallowReadonly(ref<number | null>(null)),
   });
 
   const router = createRouter({
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index ff7479c911..2c430bf181 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -7,6 +7,7 @@ import FiltersPanel from "@/components/audit/FiltersPanel.vue";
 import AuditListItem from "@/components/audit/AuditListItem.vue";
 import { computed, onBeforeMount, ref, watch } from "vue";
 import RefreshConfig from "../RefreshConfig.vue";
+import AutoRefreshIndicator from "../AutoRefreshIndicator.vue";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import useFetchWithAutoRefresh from "@/composables/autoRefresh";
 import WizardDialog from "@/components/platformcapabilities/WizardDialog.vue";
@@ -21,7 +22,7 @@ const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName,
 const route = useRoute();
 const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
-const { refreshNow, isRefreshing, updateInterval, isActive, start, stop } = useFetchWithAutoRefresh("audit-list", store.refresh, 0);
+const { refreshNow, isRefreshing, updateInterval, isActive, start, stop, nextRefreshAt } = useFetchWithAutoRefresh("audit-list", store.refresh, 0);
 const firstLoad = ref(true);
 const queryInProgress = computed(() => firstLoad.value || isRefreshing.value);
 const showWizard = ref(false);
@@ -138,6 +139,7 @@ watch(autoRefreshValue, (newValue) => {
   <div>
     <div class="header">
       <RefreshConfig v-model="autoRefreshValue" :query-in-progress="queryInProgress" @manual-refresh="refreshNow" />
+      <AutoRefreshIndicator :next-refresh-at="nextRefreshAt" :interval-ms="autoRefreshValue" :refreshing="isRefreshing" />
       <div class="row">
         <FiltersPanel />
       </div>
diff --git a/src/Frontend/src/composables/autoRefresh.spec.ts b/src/Frontend/src/composables/autoRefresh.spec.ts
new file mode 100644
index 0000000000..6631788942
--- /dev/null
+++ b/src/Frontend/src/composables/autoRefresh.spec.ts
@@ -0,0 +1,85 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { flushPromises } from "@vue/test-utils";
+import useFetchWithAutoRefresh from "@/composables/autoRefresh";
+
+function deferred() {
+  let resolve!: () => void;
+  const promise = new Promise<void>((r) => (resolve = r));
+  return { promise, resolve };
+}
+
+describe("useFetchWithAutoRefresh", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test("a poll tick during a running fetch does not cancel it, and refreshes once the results are in", async () => {
+    const slowFetch = deferred();
+    const fetchFn = vi
+      .fn<() => Promise<void>>()
+      .mockImplementationOnce(() => Promise.resolve()) // initial poll fetch on start
+      .mockImplementationOnce(() => slowFetch.promise) // the user-initiated long query
+      .mockImplementation(() => Promise.resolve());
+
+    const { refreshNow, start, isRefreshing } = useFetchWithAutoRefresh("test", fetchFn, 1000);
+
+    await start();
+    await flushPromises();
+    expect(fetchFn).toHaveBeenCalledTimes(1);
+
+    const userQuery = refreshNow();
+    expect(fetchFn).toHaveBeenCalledTimes(2);
+    expect(isRefreshing.value).toBe(true);
+
+    // The auto-refresh interval elapses while the user's query is still running
+    await vi.advanceTimersByTimeAsync(1100);
+    expect(fetchFn).toHaveBeenCalledTimes(2); // the running query was not disturbed
+
+    slowFetch.resolve();
+    await userQuery;
+    await flushPromises();
+
+    // The elapsed tick was honored once the results were in
+    expect(fetchFn).toHaveBeenCalledTimes(3);
+    expect(isRefreshing.value).toBe(false);
+  });
+
+  test("the next auto refresh time is exposed while polling and cleared when stopped", async () => {
+    const fetchFn = vi.fn<() => Promise<void>>().mockResolvedValue(undefined);
+    const { start, stop, nextRefreshAt } = useFetchWithAutoRefresh("test", fetchFn, 1000);
+
+    expect(nextRefreshAt.value).toBeNull();
+
+    await start();
+    await flushPromises();
+
+    expect(nextRefreshAt.value).not.toBeNull();
+    expect(nextRefreshAt.value! - Date.now()).toBeGreaterThan(0);
+    expect(nextRefreshAt.value! - Date.now()).toBeLessThanOrEqual(1000);
+
+    stop();
+    expect(nextRefreshAt.value).toBeNull();
+  });
+
+  test("a user-initiated refresh is never dropped while a fetch is running", async () => {
+    const slowFetch = deferred();
+    const fetchFn = vi
+      .fn<() => Promise<void>>()
+      .mockImplementationOnce(() => slowFetch.promise)
+      .mockImplementation(() => Promise.resolve());
+
+    const { refreshNow } = useFetchWithAutoRefresh("test", fetchFn, 0);
+
+    const first = refreshNow();
+    const second = refreshNow(); // e.g. the user changed a filter while the first query was running
+
+    expect(fetchFn).toHaveBeenCalledTimes(2);
+
+    slowFetch.resolve();
+    await Promise.all([first, second]);
+  });
+});
diff --git a/src/Frontend/src/composables/autoRefresh.ts b/src/Frontend/src/composables/autoRefresh.ts
index 6630c4039d..458fb58492 100644
--- a/src/Frontend/src/composables/autoRefresh.ts
+++ b/src/Frontend/src/composables/autoRefresh.ts
@@ -1,4 +1,4 @@
-import { watch, ref, computed, shallowReadonly, type WatchStopHandle } from "vue";
+import { watch, ref, computed, shallowReadonly, type Ref, type WatchStopHandle } from "vue";
 import { useCounter, useDocumentVisibility, useTimeoutPoll } from "@vueuse/core";
 
 export default function useFetchWithAutoRefresh(_name: string, fetchFn: () => Promise<void>, intervalMs: number) {
@@ -6,7 +6,11 @@ export default function useFetchWithAutoRefresh(_name: string, fetchFn: () => Pr
   const { count, inc, dec, reset } = useCounter(0);
   const interval = ref(intervalMs);
   const inflight = ref(0);
+  const refreshPending = ref(false);
   const isRefreshing = computed(() => inflight.value > 0);
+  // When auto-refresh is active, the moment (epoch ms) the next poll tick is due; null while inactive
+  const nextRefreshAt = ref<number | null>(null);
+
   const run = async () => {
     inflight.value++;
     try {
@@ -14,14 +18,28 @@ export default function useFetchWithAutoRefresh(_name: string, fetchFn: () => Pr
     } finally {
       inflight.value--;
     }
+
+    if (inflight.value === 0 && refreshPending.value) {
+      // A poll tick landed while this fetch was running: the results were awaited, now honor the tick
+      refreshPending.value = false;
+      await run();
+    }
   };
-  // Poll path: a tick that lands while a fetch is running is skipped
+
+  // Poll path: a tick that lands while a fetch is already running must not cancel it —
+  // it marks a refresh as pending, which runs as soon as the current fetch completes
   const fetchWrapper = async () => {
     if (inflight.value > 0) {
-      return;
+      refreshPending.value = true;
+    } else {
+      await run();
+    }
+
+    if (isActive.value) {
+      nextRefreshAt.value = Date.now() + interval.value;
     }
-    await run();
   };
+
   // User path: never dropped — the fetchFn is expected to supersede its own in-flight work
   const refreshNow = run;
   const { isActive, pause, resume } = useTimeoutPoll(
@@ -32,6 +50,11 @@ export default function useFetchWithAutoRefresh(_name: string, fetchFn: () => Pr
 
   const visibility = useDocumentVisibility();
 
+  const pausePolling = () => {
+    pause();
+    nextRefreshAt.value = null;
+  };
+
   const start = async () => {
     inc();
     if (count.value === 1) {
@@ -42,7 +65,7 @@ export default function useFetchWithAutoRefresh(_name: string, fetchFn: () => Pr
         }
 
         if (current === "hidden" && previous === "visible") {
-          pause();
+          pausePolling();
         }
       });
     } else {
@@ -54,7 +77,7 @@ export default function useFetchWithAutoRefresh(_name: string, fetchFn: () => Pr
   const stop = () => {
     dec();
     if (count.value <= 0) {
-      pause();
+      pausePolling();
       watchStop?.();
       watchStop = null;
       reset();
@@ -73,5 +96,5 @@ export default function useFetchWithAutoRefresh(_name: string, fetchFn: () => Pr
     }
   };
 
-  return { refreshNow, isRefreshing: shallowReadonly(isRefreshing), updateInterval, isActive, start, stop };
+  return { refreshNow, isRefreshing: isRefreshing as Readonly<Ref<boolean>>, updateInterval, isActive, start, stop, nextRefreshAt: shallowReadonly(nextRefreshAt) };
 }

From 5cb81a588f4c83097f1cd7fd9eb0d55fc47acb86 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Tue, 1 Sep 2026 10:34:43 +0200
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=90=9B=20Start=20a=20typed=20search?=
 =?UTF-8?q?=20even=20while=20the=20initial=20query=20is=20still=20running?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The controls watcher bailed out during the first load, so a search typed
while the initial (possibly minutes-long) query was still running was
silently ignored: nothing was pushed to the route, the running query was
not superseded, and no new query started.

The first-load bail-out is replaced with an idempotence check: the
watcher only pushes when the controls differ from the state the route
last applied, which both suppresses the mount-time watcher replay the
old guard was protecting against and lets a real user change through at
any time.
---
 .../src/components/audit/AuditList.spec.ts    | 18 +++++++-
 .../src/components/audit/AuditList.vue        | 44 ++++++++++++-------
 2 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditList.spec.ts b/src/Frontend/src/components/audit/AuditList.spec.ts
index bb193dec7a..1ff967b76e 100644
--- a/src/Frontend/src/components/audit/AuditList.spec.ts
+++ b/src/Frontend/src/components/audit/AuditList.spec.ts
@@ -104,9 +104,12 @@ function createMessage(id = "msg-1"): Message {
 
 // ==================== Component Renderer ====================
 
-async function renderAuditList(messages: Message[] = []): Promise<RenderResult> {
+async function renderAuditList(messages: Message[] = [], options: { neverCompleteFirstQuery?: boolean } = {}): Promise<RenderResult> {
   const isRefreshing = ref(false);
   const refreshNow = vi.fn().mockResolvedValue(undefined);
+  if (options.neverCompleteFirstQuery) {
+    refreshNow.mockImplementationOnce(() => new Promise(() => {}));
+  }
 
   vi.mocked(useFetchWithAutoRefresh).mockReturnValue({
     refreshNow,
@@ -350,6 +353,19 @@ describe("FEATURE: Audit Messages Query State", () => {
       expect(refreshNow.mock.calls.length - queriesAfterFirstLoad).toBe(1);
     });
 
+    test("EXAMPLE: Typing a search during the slow initial query still starts the new query", async () => {
+      const { refreshNow, store } = await renderAuditList([], { neverCompleteFirstQuery: true });
+
+      await waitForFirstLoadToComplete();
+      expect(refreshNow).toHaveBeenCalledTimes(1); // the initial query, still running
+
+      store.messageFilterString = "orders";
+      await waitForRouteDrivenQuery();
+
+      // The new query must not be swallowed just because the first one never finished
+      expect(refreshNow).toHaveBeenCalledTimes(2);
+    });
+
     test("EXAMPLE: Changing the endpoint fires a single query", async () => {
       const { refreshNow, store } = await renderAuditList([createMessage()]);
 
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 2c430bf181..3c903edbf3 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -84,26 +84,36 @@ 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() ?? "",
+    pageSize: itemsPerPage.value,
+  };
+}
+
+// The serialized controls state the route last applied (via setQuery) or that was last pushed.
+// The controls watcher only pushes when the controls actually moved away from this, which makes
+// it safe to react to changes at any time — including while the first (possibly very slow)
+// query is still running, so a user typing a search is never ignored.
+let lastAppliedControlsQuery = "";
+
 const watchHandle = watch([itemsPerPage, sortBy, messageFilterString, selectedEndpointName, dateRange], async () => {
-  if (firstLoad.value) {
+  const query = controlsQuery();
+  const serialized = JSON.stringify(query);
+
+  if (serialized === lastAppliedControlsQuery) {
     return;
   }
 
-  const [fromDate, toDate] = dateRange.value;
-  const from = fromDate?.toISOString() ?? "";
-  const to = toDate?.toISOString() ?? "";
-
-  await router.push({
-    query: {
-      sortBy: sortBy.value.property,
-      sortDir: sortBy.value.isAscending ? "asc" : "desc",
-      filter: messageFilterString.value,
-      endpoint: selectedEndpointName.value,
-      from,
-      to,
-      pageSize: itemsPerPage.value,
-    },
-  });
+  lastAppliedControlsQuery = serialized;
+  await router.push({ query });
 });
 
 function setQuery() {
@@ -120,6 +130,8 @@ function setQuery() {
   dateRange.value = query.from && query.to ? [new Date(query.from as string), new Date(query.to as string)] : [];
   selectedEndpointName.value = (query.endpoint ?? "") as string;
 
+  lastAppliedControlsQuery = JSON.stringify(controlsQuery());
+
   watchHandle.resume();
 }
 

From 9067f3516a451e8573e5ddd48ed73b4cceef3a1e Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Tue, 1 Sep 2026 10:45:10 +0200
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=90=9B=20Leaving=20All=20Messages=20s?=
 =?UTF-8?q?tops=20its=20activity=20and=20clears=20its=20results?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Navigating away aborts the in-flight query (server-side included) and
releases the auto-refresh registration, so a backgrounded view keeps no
load on the server. The rows live in the store, which outlives the
view, so coming back showed the previous visit's rows under the
first-load spinner; the store now forgets the results, the total and
any failure when the view is left, and the next visit starts from a
clean list.
---
 .../src/components/audit/AuditList.spec.ts    | 34 +++++++++++++++++--
 .../src/components/audit/AuditList.vue        | 12 ++++++-
 src/Frontend/src/stores/AuditStore.spec.ts    | 29 ++++++++++++++++
 src/Frontend/src/stores/AuditStore.ts         | 19 +++++++++++
 4 files changed, 90 insertions(+), 4 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditList.spec.ts b/src/Frontend/src/components/audit/AuditList.spec.ts
index 1ff967b76e..14a4d2cb59 100644
--- a/src/Frontend/src/components/audit/AuditList.spec.ts
+++ b/src/Frontend/src/components/audit/AuditList.spec.ts
@@ -48,7 +48,9 @@ interface RenderResult {
   verify: QueryStateAssertions;
   isRefreshing: Ref<boolean>;
   refreshNow: ReturnType<typeof vi.fn>;
+  stop: ReturnType<typeof vi.fn>;
   store: ReturnType<typeof useAuditStore>;
+  unmount: () => void;
 }
 
 // ==================== DOM Query Helpers ====================
@@ -110,6 +112,7 @@ async function renderAuditList(messages: Message[] = [], options: { neverComplet
   if (options.neverCompleteFirstQuery) {
     refreshNow.mockImplementationOnce(() => new Promise(() => {}));
   }
+  const stop = vi.fn();
 
   vi.mocked(useFetchWithAutoRefresh).mockReturnValue({
     refreshNow,
@@ -117,7 +120,7 @@ async function renderAuditList(messages: Message[] = [], options: { neverComplet
     updateInterval: vi.fn(),
     isActive: ref(false),
     start: vi.fn(),
-    stop: vi.fn(),
+    stop,
     nextRefreshAt: shallowReadonly(ref<number | null>(null)),
   });
 
@@ -136,7 +139,7 @@ async function renderAuditList(messages: Message[] = [], options: { neverComplet
     },
   });
 
-  render(AuditList, {
+  const { unmount } = render(AuditList, {
     global: {
       plugins: [pinia, router],
       stubs: {
@@ -182,7 +185,7 @@ async function renderAuditList(messages: Message[] = [], options: { neverComplet
     },
   };
 
-  return { verify, isRefreshing, refreshNow, store: useAuditStore(pinia) };
+  return { verify, isRefreshing, refreshNow, stop, store: useAuditStore(pinia), unmount };
 }
 
 // A control change reaches the fetch via two async hops (controls watcher -> router.push -> route watcher),
@@ -378,4 +381,29 @@ describe("FEATURE: Audit Messages Query State", () => {
       expect(refreshNow.mock.calls.length - queriesAfterFirstLoad).toBe(1);
     });
   });
+
+  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 });
+
+      await waitForFirstLoadToComplete();
+
+      unmount();
+
+      expect(store.cancelQuery).toHaveBeenCalled();
+      expect(stop).toHaveBeenCalled();
+    });
+
+    test("EXAMPLE: Unmounting clears the results, so re-entering the view starts from a clean list", async () => {
+      // A refresh-in-place keeps stale rows on purpose; coming back to the view is not that:
+      // the query inputs may differ, so the previous rows must not be shown under the spinner
+      const { store, unmount } = await renderAuditList([createMessage()]);
+
+      await waitForFirstLoadToComplete();
+
+      unmount();
+
+      expect(store.clearResults).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 3c903edbf3..053cd8aebd 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
 import ResultsCount from "@/components/ResultsCount.vue";
 import FiltersPanel from "@/components/audit/FiltersPanel.vue";
 import AuditListItem from "@/components/audit/AuditListItem.vue";
-import { computed, onBeforeMount, ref, watch } from "vue";
+import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from "vue";
 import RefreshConfig from "../RefreshConfig.vue";
 import AutoRefreshIndicator from "../AutoRefreshIndicator.vue";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
@@ -73,6 +73,16 @@ onBeforeMount(() => {
   }, 0);
 });
 
+onBeforeUnmount(() => {
+  // Leaving the view stops all of its activity: the auto-refresh poll is released and the
+  // in-flight query is aborted so it does not keep running (server-side included) in the background
+  stop();
+  store.cancelQuery();
+  // The rows belong to this visit: the next one may carry different query inputs, so it
+  // starts from a clean list (a refresh in place, by contrast, keeps the stale rows)
+  store.clearResults();
+});
+
 // The route is the single source of truth for the query: control changes only push to the router,
 // and only a route change triggers a fetch. Having the fetch in both watchers (and the route in the
 // controls watcher) made a single control change fire the same query up to three times.
diff --git a/src/Frontend/src/stores/AuditStore.spec.ts b/src/Frontend/src/stores/AuditStore.spec.ts
index daa2ac1495..d121db502f 100644
--- a/src/Frontend/src/stores/AuditStore.spec.ts
+++ b/src/Frontend/src/stores/AuditStore.spec.ts
@@ -87,6 +87,35 @@ describe("AuditStore refresh", () => {
     expect(store.queryFailed).toBe(false);
   });
 
+  test("cancelQuery aborts the query in flight without reporting a failure", async () => {
+    const store = useAuditStore();
+
+    let signal: AbortSignal | undefined;
+    fetchTypedFromServiceControl.mockImplementationOnce(abortablePendingFetch((s) => (signal = s)));
+
+    const inFlight = store.refresh();
+    store.cancelQuery();
+    await inFlight;
+
+    expect(signal?.aborted).toBe(true);
+    expect(store.queryFailed).toBe(false);
+  });
+
+  test("clearResults forgets the current results and any failure", async () => {
+    const store = useAuditStore();
+    fetchTypedFromServiceControl.mockResolvedValueOnce([responseWithTotalCount(1), [message]]);
+    await store.refresh();
+    fetchTypedFromServiceControl.mockRejectedValueOnce(new Error("Internal Server Error"));
+    await store.refresh();
+    expect(store.queryFailed).toBe(true);
+
+    store.clearResults();
+
+    expect(store.messages).toEqual([]);
+    expect(store.totalCount).toBe(0);
+    expect(store.queryFailed).toBe(false);
+  });
+
   test("a superseded query is not reported as a failure", async () => {
     const store = useAuditStore();
 
diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
index bf9c2ea27f..759f7fce3c 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -86,8 +86,27 @@ export const useAuditStore = defineStore("AuditStore", () => {
     }
   }
 
+  // Stops the in-flight query, e.g. when the view showing the results is left.
+  // The abort propagates through the ServiceControl API and terminates the
+  // database query, so a backgrounded view does not keep load on the server.
+  function cancelQuery() {
+    activeQuery?.abort();
+    activeQuery = null;
+  }
+
+  // Forgets the current results. The view calls this when it is left: a refresh in place
+  // keeps stale rows on purpose, but re-entering the view may come with different query
+  // inputs, so it must start from a clean list rather than the previous one under a spinner.
+  function clearResults() {
+    messages.value = [];
+    totalCount.value = 0;
+    queryFailed.value = false;
+  }
+
   return {
     refresh,
+    cancelQuery,
+    clearResults,
     loadEndpoints,
     sortBy: sortByInstances,
     messages,