From e4b5d19091a5a05515a0f90cfd6256a9d530cd0f Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Thu, 3 Sep 2026 16:09:14 +0200
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=92=84=20Move=20Show=20and=20Sort=20t?=
 =?UTF-8?q?o=20the=20results=20line=20and=20align=20the=20filters=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show (page size) and Sort are result-presentation controls, not query
filters — they now sit right of 'Showing X of Y result(s)' instead of
competing with the query inputs for space in the filters panel, which
also removes their awkward wrapping. The filters panel keeps the query
inputs only (search, endpoint, time range), left-aligned; the rule that
pushed the last filter to the far right is gone.
---
 .../src/components/audit/AuditList.vue        | 19 ++++-
 .../src/components/audit/FiltersPanel.vue     | 62 +-------------
 .../src/components/audit/ResultsOptions.vue   | 84 +++++++++++++++++++
 3 files changed, 104 insertions(+), 61 deletions(-)
 create mode 100644 src/Frontend/src/components/audit/ResultsOptions.vue

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 6ee6faba9..76deddcf9 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -4,6 +4,7 @@ import { storeToRefs } from "pinia";
 import { useRoute, useRouter } from "vue-router";
 import ResultsCount from "@/components/ResultsCount.vue";
 import FiltersPanel from "@/components/audit/FiltersPanel.vue";
+import ResultsOptions from "@/components/audit/ResultsOptions.vue";
 import AuditListItem from "@/components/audit/AuditListItem.vue";
 import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from "vue";
 import RefreshConfig from "../RefreshConfig.vue";
@@ -182,8 +183,9 @@ watch(autoRefreshValue, (newValue) => {
       <div class="row">
         <FiltersPanel />
       </div>
-      <div class="row">
+      <div class="row results-row">
         <ResultsCount :displayed="messages.length" :total="totalCount" />
+        <ResultsOptions />
       </div>
       <PageBanner v-if="bannerMessage && isMassTransitConnected === false" :message="bannerMessage" :show-action="showBannerAction" @action="showWizard = true" />
     </div>
@@ -254,6 +256,21 @@ watch(autoRefreshValue, (newValue) => {
   color: #fff;
 }
 
+.results-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+/* ResultsCount's root uses the bootstrap .col class (flex-grow: 1), which would
+   push the options onto their own line; in this row both sides size to content */
+.results-row > * {
+  flex: 0 1 auto;
+  width: auto;
+}
+
 .results-table {
   margin-top: 1rem;
   margin-bottom: 5rem;
diff --git a/src/Frontend/src/components/audit/FiltersPanel.vue b/src/Frontend/src/components/audit/FiltersPanel.vue
index f2c7a849a..1330625a0 100644
--- a/src/Frontend/src/components/audit/FiltersPanel.vue
+++ b/src/Frontend/src/components/audit/FiltersPanel.vue
@@ -1,57 +1,16 @@
 <script setup lang="ts">
 import FilterInput from "@/components/FilterInput.vue";
 import { storeToRefs } from "pinia";
-import { FieldNames, useAuditStore } from "@/stores/AuditStore";
+import { useAuditStore } from "@/stores/AuditStore";
 import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
 import { computed } from "vue";
 import SuperDatePicker from "@/components/audit/SuperDatePicker.vue";
 
 const store = useAuditStore();
-const { sortBy, messageFilterString, selectedEndpointName, endpoints, itemsPerPage } = storeToRefs(store);
+const { messageFilterString, selectedEndpointName, endpoints } = storeToRefs(store);
 const endpointNames = computed(() => {
   return [...new Set(endpoints.value.map((endpoint) => endpoint.name))].sort();
 });
-
-const sortByItemsMap = new Map([
-  ["Latest sent", `${FieldNames.TimeSent},desc`],
-  ["Oldest sent", `${FieldNames.TimeSent},asc`],
-  ["Slowest processing time", `${FieldNames.ProcessingTime},desc`],
-  ["Highest critical time", `${FieldNames.CriticalTime},desc`],
-  ["Longest delivery time", `${FieldNames.DeliveryTime},desc`],
-]);
-const numberOfItemsPerPage = ["50", "100", "250", "500"];
-const sortByItems = computed(() => [...sortByItemsMap.keys()]);
-const selectedSortByItem = computed({
-  get() {
-    return findKeyByValue(`${sortBy.value.property},${sortBy.value.isAscending ? "asc" : "desc"}`);
-  },
-  set(newValue) {
-    const item = sortByItemsMap.get(newValue);
-    if (item) {
-      const strings = item.split(",");
-      sortBy.value = { isAscending: strings[1] === "asc", property: strings[0] };
-    } else {
-      sortBy.value = { isAscending: true, property: FieldNames.TimeSent };
-    }
-  },
-});
-const selectedItemsPerPage = computed({
-  get() {
-    return itemsPerPage.value.toString();
-  },
-  set(newValue) {
-    itemsPerPage.value = parseInt(newValue);
-  },
-});
-
-function findKeyByValue(searchValue: string) {
-  for (const [key, value] of sortByItemsMap.entries()) {
-    if (value === searchValue) {
-      return key;
-    }
-  }
-  return "";
-}
 </script>
 
 <template>
@@ -75,18 +34,6 @@ function findKeyByValue(searchValue: string) {
         <SuperDatePicker />
       </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" />
-      </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" />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -112,11 +59,6 @@ function findKeyByValue(searchValue: string) {
   min-width: 0;
 }
 
-.filter:last-child {
-  flex-grow: 1;
-  place-content: flex-end;
-}
-
 .filter-label {
   font-weight: bold;
   padding-block: 0.375rem;
diff --git a/src/Frontend/src/components/audit/ResultsOptions.vue b/src/Frontend/src/components/audit/ResultsOptions.vue
new file mode 100644
index 000000000..08ff3042a
--- /dev/null
+++ b/src/Frontend/src/components/audit/ResultsOptions.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { FieldNames, useAuditStore } from "@/stores/AuditStore";
+import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
+
+const store = useAuditStore();
+const { sortBy, itemsPerPage } = storeToRefs(store);
+
+const sortByItemsMap = new Map([
+  ["Latest sent", `${FieldNames.TimeSent},desc`],
+  ["Oldest sent", `${FieldNames.TimeSent},asc`],
+  ["Slowest processing time", `${FieldNames.ProcessingTime},desc`],
+  ["Highest critical time", `${FieldNames.CriticalTime},desc`],
+  ["Longest delivery time", `${FieldNames.DeliveryTime},desc`],
+]);
+const numberOfItemsPerPage = ["50", "100", "250", "500"];
+const sortByItems = computed(() => [...sortByItemsMap.keys()]);
+
+const selectedSortByItem = computed({
+  get() {
+    return findKeyByValue(`${sortBy.value.property},${sortBy.value.isAscending ? "asc" : "desc"}`);
+  },
+  set(newValue) {
+    const item = sortByItemsMap.get(newValue);
+    if (item) {
+      const strings = item.split(",");
+      sortBy.value = { isAscending: strings[1] === "asc", property: strings[0] };
+    } else {
+      sortBy.value = { isAscending: true, property: FieldNames.TimeSent };
+    }
+  },
+});
+
+const selectedItemsPerPage = computed({
+  get() {
+    return itemsPerPage.value.toString();
+  },
+  set(newValue) {
+    itemsPerPage.value = parseInt(newValue);
+  },
+});
+
+function findKeyByValue(searchValue: string) {
+  for (const [key, value] of sortByItemsMap.entries()) {
+    if (value === searchValue) {
+      return key;
+    }
+  }
+  return "";
+}
+</script>
+
+<template>
+  <div class="results-options">
+    <div class="option">
+      <span class="option-label">Show:</span>
+      <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 class="option">
+      <span class="option-label">Sort:</span>
+      <ListFilterSelector :items="sortByItems" v-model="selectedSortByItem" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.results-options {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  flex-wrap: wrap;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.option-label {
+  font-weight: bold;
+}
+</style>

From f114fb71b582c2552df58c39a2110cf63258832e Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Thu, 3 Sep 2026 16:11:38 +0200
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=92=84=20Format=20result=20counts=20i?=
 =?UTF-8?q?n=20the=20user's=20locale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Large audit stores easily reach nine-digit totals; 'Showing 100 of
158736340 result(s)' is unreadable. Both numbers now go through
Intl.NumberFormat with the user's locale (158,736,340 / 158.736.340).
ResultsCount is shared, so the heartbeats views and the throughput
queue list pick this up as well.
---
 .../src/components/ResultsCount.spec.ts        | 18 ++++++++++++++++++
 src/Frontend/src/components/ResultsCount.vue   | 11 +++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 src/Frontend/src/components/ResultsCount.spec.ts

diff --git a/src/Frontend/src/components/ResultsCount.spec.ts b/src/Frontend/src/components/ResultsCount.spec.ts
new file mode 100644
index 000000000..363162a04
--- /dev/null
+++ b/src/Frontend/src/components/ResultsCount.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@testing-library/vue";
+import ResultsCount from "@/components/ResultsCount.vue";
+
+describe("FEATURE: Results count", () => {
+  test("EXAMPLE: Large counts are formatted in the user's locale", () => {
+    render(ResultsCount, { props: { displayed: 100, total: 158736340 } });
+
+    const expected = `Showing ${(100).toLocaleString()} of ${(158736340).toLocaleString()} result(s)`;
+    expect(screen.getByText(expected)).toBeInTheDocument();
+  });
+
+  test("EXAMPLE: Zero results render plainly", () => {
+    render(ResultsCount, { props: { displayed: 0, total: 0 } });
+
+    expect(screen.getByText("Showing 0 of 0 result(s)")).toBeInTheDocument();
+  });
+});
diff --git a/src/Frontend/src/components/ResultsCount.vue b/src/Frontend/src/components/ResultsCount.vue
index 2340aa8c7..64353a48e 100644
--- a/src/Frontend/src/components/ResultsCount.vue
+++ b/src/Frontend/src/components/ResultsCount.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from "vue";
+
+const props = defineProps<{
   displayed: number;
   total: number;
 }>();
+
+// Large audit stores easily reach nine digits; format both numbers in the user's locale
+const numberFormat = new Intl.NumberFormat();
+const formattedDisplayed = computed(() => numberFormat.format(props.displayed));
+const formattedTotal = computed(() => numberFormat.format(props.total));
 </script>
 
 <template>
   <div class="col format-showing-results">
-    <div>Showing {{ displayed }} of {{ total }} result(s)</div>
+    <div>Showing {{ formattedDisplayed }} of {{ formattedTotal }} result(s)</div>
   </div>
 </template>
 

From 37e39b3ad00a88474a41bfffbc06e6f8ca451269 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Thu, 3 Sep 2026 17:28:59 +0200
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20Refresh=20lives=20in=20the=20qu?=
 =?UTF-8?q?ery=20bar=20and=20cancels=20the=20running=20query?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The refresh cluster occupied its own row above the filters; it now sits
right-aligned inside the query bar so the whole query surface is one
row. While a query is in flight the button flips from Refresh to an
enabled Cancel that aborts the running query through the store; the
abort propagates through ServiceControl and terminates the
database-side query. Once results land, the results line reports what
they cost: "Showing 100 of 158,736,340 result(s) · took 2.7 s". The
timing is forgotten with the results when the view is left.

ActionButton hard-coupled loading to disabled, which would have left
the button dead exactly when a user most wants an escape hatch; it
gains disableOnLoading (default true, existing uses unchanged) and the
refresh/cancel button opts out. The spec stubs ActionButton with the
real disabled semantics so that coupling can't silently return.
---
 src/Frontend/src/components/ActionButton.vue  |  8 ++-
 .../src/components/RefreshConfig.spec.ts      | 57 ++++++++++++++++---
 src/Frontend/src/components/RefreshConfig.vue | 43 +++++++++++---
 .../src/components/ResultsCount.spec.ts       | 13 +++++
 src/Frontend/src/components/ResultsCount.vue  | 10 +++-
 .../src/components/audit/AuditList.spec.ts    | 20 ++++++-
 .../src/components/audit/AuditList.vue        | 13 +++--
 .../src/components/audit/FiltersPanel.vue     | 10 ++++
 src/Frontend/src/stores/AuditStore.spec.ts    | 28 +++++++++
 src/Frontend/src/stores/AuditStore.ts         | 13 +++++
 10 files changed, 190 insertions(+), 25 deletions(-)

diff --git a/src/Frontend/src/components/ActionButton.vue b/src/Frontend/src/components/ActionButton.vue
index 1b94fe11a..11f48a338 100644
--- a/src/Frontend/src/components/ActionButton.vue
+++ b/src/Frontend/src/components/ActionButton.vue
@@ -12,6 +12,9 @@ interface Props {
   iconPosition?: "left" | "right";
   disabled?: boolean;
   loading?: boolean;
+  /** Loading normally disables the button; opt out for buttons that stay
+   *  actionable while work runs (e.g. a cancel button). */
+  disableOnLoading?: boolean;
   tooltip?: string;
   ariaLabel?: string;
   type?: "button" | "submit" | "reset";
@@ -23,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   iconPosition: "left",
   disabled: false,
   loading: false,
+  disableOnLoading: true,
   type: "button",
 });
 
@@ -44,8 +48,8 @@ const sizeClasses = {
 <template>
   <button
     class="btn"
-    :class="[variantClasses[props.variant], sizeClasses[props.size], { disabled: props.disabled || props.loading }]"
-    :disabled="props.disabled || props.loading"
+    :class="[variantClasses[props.variant], sizeClasses[props.size], { disabled: props.disabled || (props.loading && props.disableOnLoading) }]"
+    :disabled="props.disabled || (props.loading && props.disableOnLoading)"
     :type="props.type"
     :aria-label="props.ariaLabel"
     v-tippy="props.tooltip"
diff --git a/src/Frontend/src/components/RefreshConfig.spec.ts b/src/Frontend/src/components/RefreshConfig.spec.ts
index ff74b7fa7..5b23c722e 100644
--- a/src/Frontend/src/components/RefreshConfig.spec.ts
+++ b/src/Frontend/src/components/RefreshConfig.spec.ts
@@ -15,9 +15,11 @@ import RefreshConfig from "@/components/RefreshConfig.vue";
 
 // ==================== Stubs ====================
 
+// Mirrors ActionButton's real disabled semantics (loading disables unless opted out) —
+// a stub that diverges here hides exactly the bug this file exists to prevent.
 const ActionButtonStub = defineComponent({
-  props: { loading: Boolean, disabled: Boolean },
-  template: '<button :data-loading="String(loading)" :disabled="disabled"><slot /></button>',
+  props: { loading: Boolean, disabled: Boolean, disableOnLoading: { type: Boolean, default: true } },
+  template: '<button :data-loading="String(loading)" :disabled="disabled || (loading && disableOnLoading)"><slot /></button>',
 });
 
 const ListFilterSelectorStub = defineComponent({
@@ -28,7 +30,7 @@ const ListFilterSelectorStub = defineComponent({
 // ==================== DSL ====================
 
 function renderRefreshConfig(queryInProgress: boolean) {
-  const { rerender } = render(RefreshConfig, {
+  const { rerender, emitted } = render(RefreshConfig, {
     props: { queryInProgress, modelValue: null },
     global: {
       stubs: {
@@ -50,8 +52,15 @@ function renderRefreshConfig(queryInProgress: boolean) {
     await rerender({ queryInProgress: value, modelValue: null });
   }
 
+  async function rerenderWith(props: { queryInProgress: boolean; queryStartedAt?: number | null }) {
+    await rerender({ ...props, modelValue: null });
+  }
+
   return {
     setQueryInProgress,
+    rerenderWith,
+    getButton,
+    emitted,
     verify: {
       refreshButtonIsLoading: () => expect(getButton().dataset.loading).toBe("true"),
       refreshButtonIsNotLoading: () => expect(getButton().dataset.loading).toBe("false"),
@@ -66,18 +75,21 @@ function renderRefreshConfig(queryInProgress: boolean) {
 // ==================== Tests ====================
 
 describe("FEATURE: Refresh Controls Query State", () => {
-  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);
+  describe("RULE: The refresh button becomes a cancel button while a query runs", () => {
+    test("EXAMPLE: Idle shows Refresh; in-flight shows an enabled Cancel; everything stays usable", async () => {
+      const { setQueryInProgress, verify, getButton } = renderRefreshConfig(false);
 
       verify.refreshButtonIsNotLoading();
       verify.refreshButtonIsEnabled();
       verify.autoRefreshSelectorIsEnabled();
+      expect(getButton().textContent).toContain("Refresh");
 
       await setQueryInProgress(true);
 
       verify.refreshButtonIsLoading();
-      verify.refreshButtonIsDisabled();
+      // The button must stay enabled: it is now the escape hatch for a slow query
+      verify.refreshButtonIsEnabled();
+      expect(getButton().textContent).toContain("Cancel");
       // The selector must stay usable so auto-refresh can be turned off during a slow query
       verify.autoRefreshSelectorIsEnabled();
 
@@ -85,7 +97,36 @@ describe("FEATURE: Refresh Controls Query State", () => {
 
       verify.refreshButtonIsNotLoading();
       verify.refreshButtonIsEnabled();
-      verify.autoRefreshSelectorIsEnabled();
+      expect(getButton().textContent).toContain("Refresh");
+    });
+
+    test("EXAMPLE: The cancel button shows the elapsed query time", async () => {
+      const { rerenderWith, getButton } = renderRefreshConfig(false);
+
+      await rerenderWith({ queryInProgress: true, queryStartedAt: Date.now() - 2700 });
+
+      expect(getButton().textContent).toMatch(/Cancel · \d+\.\ds/);
+    });
+
+    test("EXAMPLE: Clicking during a query emits cancelQuery, not manualRefresh", async () => {
+      const { setQueryInProgress, getButton, emitted } = renderRefreshConfig(false);
+
+      await setQueryInProgress(true);
+      getButton().click();
+      await Promise.resolve();
+
+      expect(emitted().cancelQuery).toBeTruthy();
+      expect(emitted().manualRefresh).toBeFalsy();
+    });
+
+    test("EXAMPLE: Clicking while idle emits manualRefresh", async () => {
+      const { getButton, emitted } = renderRefreshConfig(false);
+
+      getButton().click();
+      await Promise.resolve();
+
+      expect(emitted().manualRefresh).toBeTruthy();
+      expect(emitted().cancelQuery).toBeFalsy();
     });
   });
 });
diff --git a/src/Frontend/src/components/RefreshConfig.vue b/src/Frontend/src/components/RefreshConfig.vue
index 2fe5acac2..117ab28aa 100644
--- a/src/Frontend/src/components/RefreshConfig.vue
+++ b/src/Frontend/src/components/RefreshConfig.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
 import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
 import ActionButton from "@/components/ActionButton.vue";
-import { faRefresh } from "@fortawesome/free-solid-svg-icons";
+import { faRefresh, faXmark } from "@fortawesome/free-solid-svg-icons";
 
-const props = defineProps<{ queryInProgress: boolean }>();
+const props = defineProps<{ queryInProgress: boolean; queryStartedAt?: number | null }>();
 const model = defineModel<number | null>({ required: true });
-const emit = defineEmits<{ (e: "manualRefresh"): Promise<void> }>();
+const emit = defineEmits<{ (e: "manualRefresh"): Promise<void>; (e: "cancelQuery"): void }>();
 const autoRefreshOptionsText: [number, string][] = [
   [0, "Off"],
   [5000, "Every 5 seconds"],
@@ -43,14 +43,44 @@ watch(selectedRefresh, (newValue) => {
     }
   }
 });
-async function refresh() {
+/* elapsed timer while a query runs */
+const now = ref(Date.now());
+let ticker: number | undefined;
+watch(
+  () => props.queryInProgress,
+  (running) => {
+    window.clearInterval(ticker);
+    if (running) {
+      now.value = Date.now();
+      ticker = window.setInterval(() => (now.value = Date.now()), 100);
+    }
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => window.clearInterval(ticker));
+
+const elapsedLabel = computed(() => {
+  if (!props.queryInProgress || !props.queryStartedAt) return null;
+  return `${Math.max(0, (now.value - props.queryStartedAt) / 1000).toFixed(1)}s`;
+});
+
+async function refreshOrCancel() {
+  if (props.queryInProgress) {
+    emit("cancelQuery");
+    return;
+  }
   await emit("manualRefresh");
 }
 </script>
 
 <template>
   <div class="refresh-config">
-    <ActionButton size="sm" :icon="faRefresh" :loading="props.queryInProgress" :disabled="props.queryInProgress" @click="refresh">Refresh List</ActionButton>
+    <ActionButton size="sm" :icon="props.queryInProgress ? faXmark : faRefresh" :loading="props.queryInProgress" :disable-on-loading="false" @click="refreshOrCancel">
+      <template v-if="props.queryInProgress"
+        >Cancel<template v-if="elapsedLabel"> · {{ elapsedLabel }}</template></template
+      >
+      <template v-else>Refresh</template>
+    </ActionButton>
     <div class="filter">
       <div class="filter-label">Auto-Refresh:</div>
       <div class="filter-component">
@@ -65,7 +95,6 @@ async function refresh() {
   display: flex;
   align-items: center;
   gap: 1em;
-  margin-bottom: 0.5em;
 }
 
 .filter {
diff --git a/src/Frontend/src/components/ResultsCount.spec.ts b/src/Frontend/src/components/ResultsCount.spec.ts
index 363162a04..20e695c3b 100644
--- a/src/Frontend/src/components/ResultsCount.spec.ts
+++ b/src/Frontend/src/components/ResultsCount.spec.ts
@@ -10,6 +10,19 @@ describe("FEATURE: Results count", () => {
     expect(screen.getByText(expected)).toBeInTheDocument();
   });
 
+  test("EXAMPLE: The query duration is shown when known", () => {
+    render(ResultsCount, { props: { displayed: 100, total: 500, durationMs: 2700 } });
+
+    const expected = `Showing ${(100).toLocaleString()} of ${(500).toLocaleString()} result(s) · took ${(2.7).toLocaleString(undefined, { maximumFractionDigits: 1 })} s`;
+    expect(screen.getByText(expected)).toBeInTheDocument();
+  });
+
+  test("EXAMPLE: Sub-second queries show milliseconds", () => {
+    render(ResultsCount, { props: { displayed: 10, total: 10, durationMs: 320 } });
+
+    expect(screen.getByText("Showing 10 of 10 result(s) · took 320 ms")).toBeInTheDocument();
+  });
+
   test("EXAMPLE: Zero results render plainly", () => {
     render(ResultsCount, { props: { displayed: 0, total: 0 } });
 
diff --git a/src/Frontend/src/components/ResultsCount.vue b/src/Frontend/src/components/ResultsCount.vue
index 64353a48e..c5eea31bc 100644
--- a/src/Frontend/src/components/ResultsCount.vue
+++ b/src/Frontend/src/components/ResultsCount.vue
@@ -4,17 +4,25 @@ import { computed } from "vue";
 const props = defineProps<{
   displayed: number;
   total: number;
+  durationMs?: number | null;
 }>();
 
 // Large audit stores easily reach nine digits; format both numbers in the user's locale
 const numberFormat = new Intl.NumberFormat();
 const formattedDisplayed = computed(() => numberFormat.format(props.displayed));
 const formattedTotal = computed(() => numberFormat.format(props.total));
+const formattedDuration = computed(() => {
+  if (props.durationMs === null || props.durationMs === undefined) return null;
+  if (props.durationMs < 1000) return `${props.durationMs} ms`;
+  return `${(props.durationMs / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 })} s`;
+});
 </script>
 
 <template>
   <div class="col format-showing-results">
-    <div>Showing {{ formattedDisplayed }} of {{ formattedTotal }} result(s)</div>
+    <div>
+      Showing {{ formattedDisplayed }} of {{ formattedTotal }} result(s)<template v-if="formattedDuration"> · took {{ formattedDuration }}</template>
+    </div>
   </div>
 </template>
 
diff --git a/src/Frontend/src/components/audit/AuditList.spec.ts b/src/Frontend/src/components/audit/AuditList.spec.ts
index ea2824fd5..9ffcf4aee 100644
--- a/src/Frontend/src/components/audit/AuditList.spec.ts
+++ b/src/Frontend/src/components/audit/AuditList.spec.ts
@@ -145,8 +145,12 @@ async function renderAuditList(messages: Message[] = [], options: { neverComplet
       plugins: [pinia, router],
       stubs: {
         AuditListItem: { template: '<div data-testid="message-item" />' },
-        RefreshConfig: { template: '<div data-testid="refresh-config" :data-query-in-progress="String(queryInProgress)" />', props: ["queryInProgress"] },
-        FiltersPanel: { template: '<div data-testid="filters-panel" :data-query-in-progress="String(queryInProgress)" />', props: ["queryInProgress"] },
+        RefreshConfig: {
+          template: `<div data-testid="refresh-config" :data-query-in-progress="String(queryInProgress)"><button data-testid="cancel-button" @click="$emit('cancel-query')"></button></div>`,
+          props: ["queryInProgress"],
+          emits: ["cancel-query", "manual-refresh"],
+        },
+        FiltersPanel: { template: '<div data-testid="filters-panel" :data-query-in-progress="String(queryInProgress)"><slot name="actions" /></div>', props: ["queryInProgress"] },
         ResultsCount: true,
         WizardDialog: true,
         PageBanner: true,
@@ -448,6 +452,18 @@ describe("FEATURE: Audit Messages Query State", () => {
     });
   });
 
+  describe("RULE: The refresh button cancels the running query", () => {
+    test("EXAMPLE: The cancel action aborts via the store", async () => {
+      const { store } = await renderAuditList([], { neverCompleteFirstQuery: true });
+
+      await waitForFirstLoadToComplete();
+
+      await fireEvent.click(screen.getByTestId("cancel-button"));
+
+      expect(store.cancelQuery).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 76deddcf9..3ab0878f9 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -20,7 +20,7 @@ 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, timeRangeFrom, timeRangeTo, queryFailed } = storeToRefs(store);
+const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, timeRangeFrom, timeRangeTo, queryFailed, queryStartedAt, queryDurationMs } = storeToRefs(store);
 const route = useRoute();
 const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
@@ -178,13 +178,16 @@ watch(autoRefreshValue, (newValue) => {
 <template>
   <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 />
+        <FiltersPanel>
+          <template #actions>
+            <RefreshConfig v-model="autoRefreshValue" :query-in-progress="queryInProgress" :query-started-at="queryStartedAt" @manual-refresh="refreshNow" @cancel-query="store.cancelQuery" />
+            <AutoRefreshIndicator :next-refresh-at="nextRefreshAt" :interval-ms="autoRefreshValue" :refreshing="isRefreshing" />
+          </template>
+        </FiltersPanel>
       </div>
       <div class="row results-row">
-        <ResultsCount :displayed="messages.length" :total="totalCount" />
+        <ResultsCount :displayed="messages.length" :total="totalCount" :duration-ms="queryDurationMs" />
         <ResultsOptions />
       </div>
       <PageBanner v-if="bannerMessage && isMassTransitConnected === false" :message="bannerMessage" :show-action="showBannerAction" @action="showWizard = true" />
diff --git a/src/Frontend/src/components/audit/FiltersPanel.vue b/src/Frontend/src/components/audit/FiltersPanel.vue
index 1330625a0..19d97892b 100644
--- a/src/Frontend/src/components/audit/FiltersPanel.vue
+++ b/src/Frontend/src/components/audit/FiltersPanel.vue
@@ -34,6 +34,9 @@ const endpointNames = computed(() => {
         <SuperDatePicker />
       </div>
     </div>
+    <div class="filter actions">
+      <slot name="actions" />
+    </div>
   </div>
 </template>
 
@@ -55,6 +58,13 @@ const endpointNames = computed(() => {
   max-width: 100%;
 }
 
+.filter.actions {
+  margin-left: auto;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.15rem;
+}
+
 .filter-component {
   min-width: 0;
 }
diff --git a/src/Frontend/src/stores/AuditStore.spec.ts b/src/Frontend/src/stores/AuditStore.spec.ts
index 0d75d6144..4cccb8d3f 100644
--- a/src/Frontend/src/stores/AuditStore.spec.ts
+++ b/src/Frontend/src/stores/AuditStore.spec.ts
@@ -102,6 +102,22 @@ describe("AuditStore refresh", () => {
     expect(store.queryFailed).toBe(false);
   });
 
+  test("timing state: startedAt while in flight, duration recorded on success", async () => {
+    const store = useAuditStore();
+
+    let resolveFetch!: (v: unknown) => void;
+    fetchTypedFromServiceControl.mockImplementationOnce(() => new Promise((r) => (resolveFetch = r)));
+
+    const inFlight = store.refresh();
+    expect(store.queryStartedAt).not.toBeNull();
+
+    resolveFetch([responseWithTotalCount(1), [message]]);
+    await inFlight;
+
+    expect(store.queryStartedAt).toBeNull();
+    expect(store.queryDurationMs).toBeGreaterThanOrEqual(0);
+  });
+
   test("cancelQuery aborts the query in flight without reporting a failure", async () => {
     const store = useAuditStore();
 
@@ -114,6 +130,7 @@ describe("AuditStore refresh", () => {
 
     expect(signal?.aborted).toBe(true);
     expect(store.queryFailed).toBe(false);
+    expect(store.queryStartedAt).toBeNull();
   });
 
   test("clearResults forgets the current results and any failure", async () => {
@@ -131,6 +148,17 @@ describe("AuditStore refresh", () => {
     expect(store.queryFailed).toBe(false);
   });
 
+  test("clearResults forgets the query timing", async () => {
+    const store = useAuditStore();
+    fetchTypedFromServiceControl.mockResolvedValueOnce([responseWithTotalCount(1), [message]]);
+    await store.refresh();
+    expect(store.queryDurationMs).not.toBeNull();
+
+    store.clearResults();
+
+    expect(store.queryDurationMs).toBeNull();
+  });
+
   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 39980348e..e1877774f 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -33,6 +33,10 @@ export const useAuditStore = defineStore("AuditStore", () => {
   const selectedEndpointName = ref<string>("");
   const endpoints = ref<EndpointsView[]>([]);
   const queryFailed = ref(false);
+  // Epoch ms of the in-flight query's start (null when idle) and the duration
+  // of the query that produced the current results
+  const queryStartedAt = ref<number | null>(null);
+  const queryDurationMs = ref<number | null>(null);
   let activeQuery: AbortController | null = null;
 
   async function loadEndpoints() {
@@ -56,6 +60,9 @@ export const useAuditStore = defineStore("AuditStore", () => {
     const resolvedRange = resolveTimeRange({ from: timeRangeFrom.value, to: timeRangeTo.value });
     const dateRange: DateRange = resolvedRange ? [resolvedRange.from, resolvedRange.to] : [];
 
+    const started = performance.now();
+    queryStartedAt.value = Date.now();
+
     try {
       const [response, data] = await auditClient.getMessages(
         {
@@ -76,6 +83,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
       totalCount.value = parseInt(response.headers.get("total-count") ?? "0");
       messages.value = data;
       queryFailed.value = false;
+      queryDurationMs.value = Math.round(performance.now() - started);
     } catch {
       if (thisQuery.signal.aborted) {
         // Superseded by a newer query, or the view was left
@@ -91,6 +99,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
     } finally {
       if (activeQuery === thisQuery) {
         activeQuery = null;
+        queryStartedAt.value = null;
       }
     }
   }
@@ -101,6 +110,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
   function cancelQuery() {
     activeQuery?.abort();
     activeQuery = null;
+    queryStartedAt.value = null;
   }
 
   // Forgets the current results. The view calls this when it is left: a refresh in place
@@ -110,6 +120,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
     messages.value = [];
     totalCount.value = 0;
     queryFailed.value = false;
+    queryDurationMs.value = null;
   }
 
   return {
@@ -127,6 +138,8 @@ export const useAuditStore = defineStore("AuditStore", () => {
     timeRangeFrom,
     timeRangeTo,
     queryFailed,
+    queryStartedAt,
+    queryDurationMs,
   };
 });
 

From 309f29dd34bd32d31b47f17da876b353ca246810 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Thu, 3 Sep 2026 17:29:09 +0200
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=92=84=20Countdown=20ring=20inside=20?=
 =?UTF-8?q?the=20refresh=20button,=20with=20a=20text=20countdown=20for=20s?=
 =?UTF-8?q?creen=20readers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

While auto-refresh is armed and no query runs, the refresh arrow is
replaced by a small ring that depletes toward the next refresh, with
the remaining seconds as its tooltip; during a query the button shows
the usual spinner. The ring mirrors FontAwesome's icon geometry:
ActionButton gains a named icon slot so custom icons are flex children
with the same centering as FAIcon. Reduced motion disables the
animation.

The ring is purely decorative (aria-hidden). The countdown reaches
assistive tech as a visually hidden "Next auto refresh in N seconds"
timer that describes the button, read together with it rather than
announced on every tick; the button keeps its stable name "Refresh".
The wording test runs on a frozen clock so the 250 ms ticker cannot
race it.
---
 src/Frontend/src/components/ActionButton.vue  |  4 +-
 .../components/AutoRefreshIndicator.spec.ts   | 18 ++--
 .../src/components/AutoRefreshIndicator.vue   | 90 ++++++++++++-------
 .../src/components/RefreshConfig.spec.ts      | 60 ++++++++++++-
 src/Frontend/src/components/RefreshConfig.vue | 35 ++++++--
 .../src/components/audit/AuditList.vue        |  4 +-
 6 files changed, 158 insertions(+), 53 deletions(-)

diff --git a/src/Frontend/src/components/ActionButton.vue b/src/Frontend/src/components/ActionButton.vue
index 11f48a338..9d16fee1a 100644
--- a/src/Frontend/src/components/ActionButton.vue
+++ b/src/Frontend/src/components/ActionButton.vue
@@ -54,7 +54,9 @@ const sizeClasses = {
     :aria-label="props.ariaLabel"
     v-tippy="props.tooltip"
   >
-    <FAIcon v-if="props.icon && props.iconPosition === 'left' && !props.loading" :icon="props.icon" class="icon-left" />
+    <slot v-if="!props.loading" name="icon">
+      <FAIcon v-if="props.icon && props.iconPosition === 'left'" :icon="props.icon" class="icon-left" />
+    </slot>
     <FAIcon v-if="props.loading" class="rotate" :icon="faRefresh" />
     <span v-if="$slots.default" class="button-text">
       <slot />
diff --git a/src/Frontend/src/components/AutoRefreshIndicator.spec.ts b/src/Frontend/src/components/AutoRefreshIndicator.spec.ts
index c5e766f7e..4c58509c0 100644
--- a/src/Frontend/src/components/AutoRefreshIndicator.spec.ts
+++ b/src/Frontend/src/components/AutoRefreshIndicator.spec.ts
@@ -9,19 +9,23 @@ describe("FEATURE: Auto refresh indicator", () => {
     expect(screen.queryByTestId("auto-refresh-indicator")).not.toBeInTheDocument();
   });
 
-  test("EXAMPLE: A countdown bar is shown while waiting for the next refresh", () => {
+  test("EXAMPLE: A countdown ring 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);
+    const indicator = screen.getByTestId("auto-refresh-indicator");
+    expect(indicator.dataset.state).toBe("countdown");
+    const ring = screen.getByTestId("auto-refresh-countdown");
+    // roughly half depleted: dash offset strictly between empty (0) and full circumference
+    const offset = parseFloat(ring.getAttribute("stroke-dashoffset")!);
+    const circumference = 2 * Math.PI * 6;
+    expect(offset).toBeGreaterThan(circumference * 0.25);
+    expect(offset).toBeLessThan(circumference * 0.75);
   });
 
-  test("EXAMPLE: A waiting state is shown when the refresh is due but the query is still running", () => {
+  test("EXAMPLE: A waiting spinner ring 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-indicator").dataset.state).toBe("waiting");
     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
index 773cb70ea..0c46c5de4 100644
--- a/src/Frontend/src/components/AutoRefreshIndicator.vue
+++ b/src/Frontend/src/components/AutoRefreshIndicator.vue
@@ -19,50 +19,80 @@ const fraction = computed(() => {
 });
 
 const secondsLeft = computed(() => (props.nextRefreshAt === null ? null : Math.max(0, Math.ceil((props.nextRefreshAt - now.value) / 1000))));
+
+// r=6.75 in a 16x16 viewBox (filling the box like a FontAwesome glyph does);
+// the arc depletes as the next refresh approaches
+const circumference = 2 * Math.PI * 6.75;
+const dashOffset = computed(() => (fraction.value === null ? 0 : circumference * (1 - fraction.value)));
+
+const label = computed(() => (props.refreshing ? "Waiting for query results…" : `Auto refresh in ${secondsLeft.value}s`));
 </script>
 
+<!-- Purely visual: hidden from assistive tech. The host exposes the countdown as text
+     (see RefreshConfig), so a screen reader never gets an SVG or a label that changes
+     every second as the name of the button this ring sits in. -->
 <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>
+  <span v-if="fraction !== null" class="auto-refresh-indicator" aria-hidden="true" :title="label" data-testid="auto-refresh-indicator" :data-state="refreshing ? 'waiting' : 'countdown'">
+    <svg viewBox="0 0 16 16" aria-hidden="true">
+      <circle class="track" cx="8" cy="8" r="6.75" />
+      <circle v-if="!refreshing" class="progress" cx="8" cy="8" r="6.75" :stroke-dasharray="circumference" :stroke-dashoffset="dashOffset" data-testid="auto-refresh-countdown" />
+      <circle v-else class="waiting" cx="8" cy="8" r="6.75" :stroke-dasharray="`${circumference / 5} ${circumference / 5}`" data-testid="auto-refresh-waiting" />
+    </svg>
+  </span>
 </template>
 
 <style scoped>
 .auto-refresh-indicator {
-  width: 100%;
-  height: 3px;
-  margin-top: 0.25rem;
-  background-color: #e0e0e0;
-  border-radius: 2px;
-  overflow: hidden;
+  /* mirror FontAwesome's sizing so the ring occupies exactly the arrow icon's box */
+  display: inline-block;
+  line-height: 0;
+  vertical-align: -0.125em;
+}
+
+svg {
+  width: 1em;
+  height: 1em;
 }
 
-.bar {
-  height: 100%;
-  background-color: #00729c;
-  transition: width 250ms linear;
+circle {
+  fill: none;
+  stroke-width: 2.4;
 }
 
-.bar.waiting {
-  width: 100%;
-  animation: waiting-pulse 1.2s ease-in-out infinite;
+.track {
+  stroke: #e3e3e3;
+}
+
+.progress {
+  stroke: #00729c;
+  stroke-linecap: round;
+  transform: rotate(-90deg);
+  transform-origin: center;
+  transition: stroke-dashoffset 250ms linear;
+}
+
+.waiting {
+  stroke: #b0b0b0;
+  animation: ring-spin 1.6s linear infinite;
+  transform-origin: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress {
+    transition: none;
+  }
+
+  .waiting {
+    animation: none;
+  }
 }
 
-@keyframes waiting-pulse {
-  0%,
-  100% {
-    opacity: 0.35;
+@keyframes ring-spin {
+  from {
+    transform: rotate(0deg);
   }
-  50% {
-    opacity: 0.9;
+  to {
+    transform: rotate(360deg);
   }
 }
 </style>
diff --git a/src/Frontend/src/components/RefreshConfig.spec.ts b/src/Frontend/src/components/RefreshConfig.spec.ts
index 5b23c722e..8262883ee 100644
--- a/src/Frontend/src/components/RefreshConfig.spec.ts
+++ b/src/Frontend/src/components/RefreshConfig.spec.ts
@@ -1,4 +1,4 @@
-import { describe, test, expect } from "vitest";
+import { afterEach, describe, test, expect, vi } from "vitest";
 import { render } from "@testing-library/vue";
 import { defineComponent } from "vue";
 import RefreshConfig from "@/components/RefreshConfig.vue";
@@ -19,7 +19,7 @@ import RefreshConfig from "@/components/RefreshConfig.vue";
 // a stub that diverges here hides exactly the bug this file exists to prevent.
 const ActionButtonStub = defineComponent({
   props: { loading: Boolean, disabled: Boolean, disableOnLoading: { type: Boolean, default: true } },
-  template: '<button :data-loading="String(loading)" :disabled="disabled || (loading && disableOnLoading)"><slot /></button>',
+  template: '<button :data-loading="String(loading)" :disabled="disabled || (loading && disableOnLoading)"><slot name="icon" /><slot /></button>',
 });
 
 const ListFilterSelectorStub = defineComponent({
@@ -52,8 +52,8 @@ function renderRefreshConfig(queryInProgress: boolean) {
     await rerender({ queryInProgress: value, modelValue: null });
   }
 
-  async function rerenderWith(props: { queryInProgress: boolean; queryStartedAt?: number | null }) {
-    await rerender({ ...props, modelValue: null });
+  async function rerenderWith(props: { queryInProgress: boolean; queryStartedAt?: number | null; nextRefreshAt?: number | null; modelValue?: number | null }) {
+    await rerender({ modelValue: null, ...props });
   }
 
   return {
@@ -108,6 +108,58 @@ describe("FEATURE: Refresh Controls Query State", () => {
       expect(getButton().textContent).toMatch(/Cancel · \d+\.\ds/);
     });
 
+    test("EXAMPLE: With auto-refresh armed, the countdown ring sits inside the button", async () => {
+      const { rerenderWith, getButton } = renderRefreshConfig(false);
+
+      await rerenderWith({ queryInProgress: false, nextRefreshAt: Date.now() + 3000, modelValue: 5000 });
+
+      expect(getButton().querySelector('[data-testid="auto-refresh-indicator"]')).not.toBeNull();
+      expect(getButton().textContent).toContain("Refresh");
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    test("EXAMPLE: The countdown reaches assistive tech as text describing the button, while the ring itself is decorative", async () => {
+      // Frozen clock: the component's own 250 ms ticker and the test see the same "now"
+      vi.useFakeTimers();
+      const { rerenderWith, getButton } = renderRefreshConfig(false);
+
+      await rerenderWith({ queryInProgress: false, nextRefreshAt: Date.now() + 3000, modelValue: 5000 });
+      await vi.advanceTimersByTimeAsync(0);
+
+      const button = getButton();
+      // The ring is a visual: a screen reader must neither read SVG nor a label that changes every second as the button's name
+      expect(button.querySelector('[data-testid="auto-refresh-indicator"]')).toHaveAttribute("aria-hidden", "true");
+      expect(button).toHaveAccessibleName("Refresh");
+      // The countdown is available as plain text that describes the button
+      const timer = document.getElementById(button.getAttribute("aria-describedby")!);
+      expect(timer).toHaveAttribute("role", "timer");
+      expect(timer!.textContent).toMatch(/^Next auto refresh in \d+ seconds$/);
+
+      await rerenderWith({ queryInProgress: false, nextRefreshAt: Date.now() + 800, modelValue: 5000 });
+      await vi.advanceTimersByTimeAsync(0);
+      expect(document.getElementById(button.getAttribute("aria-describedby")!)!.textContent).toBe("Next auto refresh in 1 second");
+    });
+
+    test("EXAMPLE: Without auto-refresh there is no countdown text either", async () => {
+      const { rerenderWith, getButton } = renderRefreshConfig(false);
+
+      await rerenderWith({ queryInProgress: false, nextRefreshAt: null, modelValue: null });
+
+      expect(getButton()).not.toHaveAttribute("aria-describedby");
+      expect(document.querySelector('[role="timer"]')).toBeNull();
+    });
+
+    test("EXAMPLE: Without auto-refresh there is no ring", async () => {
+      const { rerenderWith, getButton } = renderRefreshConfig(false);
+
+      await rerenderWith({ queryInProgress: false, nextRefreshAt: null, modelValue: null });
+
+      expect(getButton().querySelector('[data-testid="auto-refresh-indicator"]')).toBeNull();
+    });
+
     test("EXAMPLE: Clicking during a query emits cancelQuery, not manualRefresh", async () => {
       const { setQueryInProgress, getButton, emitted } = renderRefreshConfig(false);
 
diff --git a/src/Frontend/src/components/RefreshConfig.vue b/src/Frontend/src/components/RefreshConfig.vue
index 117ab28aa..f422dca25 100644
--- a/src/Frontend/src/components/RefreshConfig.vue
+++ b/src/Frontend/src/components/RefreshConfig.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { computed, onBeforeUnmount, ref, useId, watch } from "vue";
 import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
 import ActionButton from "@/components/ActionButton.vue";
+import AutoRefreshIndicator from "@/components/AutoRefreshIndicator.vue";
 import { faRefresh, faXmark } from "@fortawesome/free-solid-svg-icons";
 
-const props = defineProps<{ queryInProgress: boolean; queryStartedAt?: number | null }>();
+const props = defineProps<{ queryInProgress: boolean; queryStartedAt?: number | null; nextRefreshAt?: number | null }>();
 const model = defineModel<number | null>({ required: true });
 const emit = defineEmits<{ (e: "manualRefresh"): Promise<void>; (e: "cancelQuery"): void }>();
 const autoRefreshOptionsText: [number, string][] = [
@@ -43,16 +44,20 @@ watch(selectedRefresh, (newValue) => {
     }
   }
 });
-/* elapsed timer while a query runs */
+// While auto-refresh is armed and no query runs, the countdown ring takes the
+// place of the refresh arrow inside the button
+const ringActive = computed(() => !props.queryInProgress && props.nextRefreshAt != null && model.value != null);
+
+/* clock: 100 ms while a query runs (elapsed time shows tenths), 250 ms for the countdown */
 const now = ref(Date.now());
 let ticker: number | undefined;
 watch(
-  () => props.queryInProgress,
-  (running) => {
+  () => (props.queryInProgress ? 100 : ringActive.value ? 250 : null),
+  (intervalMs) => {
     window.clearInterval(ticker);
-    if (running) {
+    if (intervalMs !== null) {
       now.value = Date.now();
-      ticker = window.setInterval(() => (now.value = Date.now()), 100);
+      ticker = window.setInterval(() => (now.value = Date.now()), intervalMs);
     }
   },
   { immediate: true }
@@ -64,6 +69,11 @@ const elapsedLabel = computed(() => {
   return `${Math.max(0, (now.value - props.queryStartedAt) / 1000).toFixed(1)}s`;
 });
 
+// The ring is visual only; the countdown reaches assistive tech as text that describes
+// the button (a timer is not announced on every tick, but is read along with the button)
+const countdownId = useId();
+const secondsLeft = computed(() => (props.nextRefreshAt == null ? 0 : Math.max(0, Math.ceil((props.nextRefreshAt - now.value) / 1000))));
+
 async function refreshOrCancel() {
   if (props.queryInProgress) {
     emit("cancelQuery");
@@ -75,12 +85,16 @@ async function refreshOrCancel() {
 
 <template>
   <div class="refresh-config">
-    <ActionButton size="sm" :icon="props.queryInProgress ? faXmark : faRefresh" :loading="props.queryInProgress" :disable-on-loading="false" @click="refreshOrCancel">
+    <ActionButton size="sm" :icon="props.queryInProgress ? faXmark : ringActive ? undefined : faRefresh" :loading="props.queryInProgress" :disable-on-loading="false" :aria-describedby="ringActive ? countdownId : undefined" @click="refreshOrCancel">
+      <template v-if="ringActive && !props.queryInProgress" #icon>
+        <AutoRefreshIndicator class="ring" :next-refresh-at="props.nextRefreshAt ?? null" :interval-ms="model" :refreshing="false" />
+      </template>
       <template v-if="props.queryInProgress"
         >Cancel<template v-if="elapsedLabel"> · {{ elapsedLabel }}</template></template
       >
       <template v-else>Refresh</template>
     </ActionButton>
+    <span v-if="ringActive" :id="countdownId" class="visually-hidden" role="timer">Next auto refresh in {{ secondsLeft }} {{ secondsLeft === 1 ? "second" : "seconds" }}</span>
     <div class="filter">
       <div class="filter-label">Auto-Refresh:</div>
       <div class="filter-component">
@@ -105,4 +119,9 @@ async function refreshOrCancel() {
 .filter-label {
   font-weight: bold;
 }
+
+.ring {
+  /* the icon slot is a flex child; only the FA icon's own margin needs matching */
+  margin-right: 0.25rem;
+}
 </style>
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 3ab0878f9..8d7604b2a 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -8,7 +8,6 @@ import ResultsOptions from "@/components/audit/ResultsOptions.vue";
 import AuditListItem from "@/components/audit/AuditListItem.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";
 import useFetchWithAutoRefresh from "@/composables/autoRefresh";
 import WizardDialog from "@/components/platformcapabilities/WizardDialog.vue";
@@ -181,8 +180,7 @@ watch(autoRefreshValue, (newValue) => {
       <div class="row">
         <FiltersPanel>
           <template #actions>
-            <RefreshConfig v-model="autoRefreshValue" :query-in-progress="queryInProgress" :query-started-at="queryStartedAt" @manual-refresh="refreshNow" @cancel-query="store.cancelQuery" />
-            <AutoRefreshIndicator :next-refresh-at="nextRefreshAt" :interval-ms="autoRefreshValue" :refreshing="isRefreshing" />
+            <RefreshConfig v-model="autoRefreshValue" :query-in-progress="queryInProgress" :query-started-at="queryStartedAt" :next-refresh-at="nextRefreshAt" @manual-refresh="refreshNow" @cancel-query="store.cancelQuery" />
           </template>
         </FiltersPanel>
       </div>

From 8979e08e8d69688500e5b19737d1143d1fe52f75 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Wed, 9 Sep 2026 08:54:40 +0200
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=92=84=20Refresh=20as=20a=20Grafana-s?=
 =?UTF-8?q?tyle=20split=20button;=20a=20slow=20query=20gets=20advice=20ins?=
 =?UTF-8?q?tead=20of=20a=20clock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The refresh control is one split button: the refresh/cancel action on
the left with a fixed width for both states, and a compact segment on
the right showing the active interval as "Off", "5s", "1m", "1h" that
opens the interval menu. The separate "Auto-Refresh: Every 5 seconds"
selector is gone, which frees a good part of the query bar; the menu
spells each interval out and the segment carries the full wording as
its accessible name.

The elapsed-time clock in the Cancel label is gone (it changed the
button's width on every tick). What it was there to convey is now said
in words: once a query has been running for five seconds the results
line shows "Still running · a narrower time range makes the query
lighter" on its own line under the result stats, and drops it when the
query ends. Show, Sort and Times are pinned to the right of that line
and never wrap.
---
 .../src/components/RefreshConfig.spec.ts      |  67 ++++++--
 src/Frontend/src/components/RefreshConfig.vue | 146 ++++++++++--------
 .../src/components/audit/AuditList.spec.ts    |  38 ++++-
 .../src/components/audit/AuditList.vue        |  54 +++++--
 .../src/components/refreshInterval.spec.ts    |  24 +++
 .../src/components/refreshInterval.ts         |  33 ++++
 6 files changed, 275 insertions(+), 87 deletions(-)
 create mode 100644 src/Frontend/src/components/refreshInterval.spec.ts
 create mode 100644 src/Frontend/src/components/refreshInterval.ts

diff --git a/src/Frontend/src/components/RefreshConfig.spec.ts b/src/Frontend/src/components/RefreshConfig.spec.ts
index 8262883ee..ed307f4fe 100644
--- a/src/Frontend/src/components/RefreshConfig.spec.ts
+++ b/src/Frontend/src/components/RefreshConfig.spec.ts
@@ -22,11 +22,6 @@ const ActionButtonStub = defineComponent({
   template: '<button :data-loading="String(loading)" :disabled="disabled || (loading && disableOnLoading)"><slot name="icon" /><slot /></button>',
 });
 
-const ListFilterSelectorStub = defineComponent({
-  props: { disabled: Boolean },
-  template: '<button :data-disabled="String(disabled)" />',
-});
-
 // ==================== DSL ====================
 
 function renderRefreshConfig(queryInProgress: boolean) {
@@ -35,7 +30,6 @@ function renderRefreshConfig(queryInProgress: boolean) {
     global: {
       stubs: {
         ActionButton: ActionButtonStub,
-        ListFilterSelector: ListFilterSelectorStub,
       },
     },
   });
@@ -44,15 +38,15 @@ function renderRefreshConfig(queryInProgress: boolean) {
     return document.querySelector("button[data-loading]") as HTMLButtonElement;
   }
 
-  function getAutoRefreshSelector(): HTMLButtonElement {
-    return document.querySelector("button[data-disabled]") as HTMLButtonElement;
+  function getIntervalToggle(): HTMLButtonElement {
+    return document.querySelector('[data-testid="refresh-interval"]') as HTMLButtonElement;
   }
 
   async function setQueryInProgress(value: boolean) {
     await rerender({ queryInProgress: value, modelValue: null });
   }
 
-  async function rerenderWith(props: { queryInProgress: boolean; queryStartedAt?: number | null; nextRefreshAt?: number | null; modelValue?: number | null }) {
+  async function rerenderWith(props: { queryInProgress: boolean; nextRefreshAt?: number | null; modelValue?: number | null }) {
     await rerender({ modelValue: null, ...props });
   }
 
@@ -60,14 +54,14 @@ function renderRefreshConfig(queryInProgress: boolean) {
     setQueryInProgress,
     rerenderWith,
     getButton,
+    getIntervalToggle,
     emitted,
     verify: {
       refreshButtonIsLoading: () => expect(getButton().dataset.loading).toBe("true"),
       refreshButtonIsNotLoading: () => expect(getButton().dataset.loading).toBe("false"),
       refreshButtonIsDisabled: () => expect(getButton()).toBeDisabled(),
       refreshButtonIsEnabled: () => expect(getButton()).toBeEnabled(),
-      autoRefreshSelectorIsDisabled: () => expect(getAutoRefreshSelector().dataset.disabled).toBe("true"),
-      autoRefreshSelectorIsEnabled: () => expect(getAutoRefreshSelector().dataset.disabled).toBe("false"),
+      autoRefreshSelectorIsEnabled: () => expect(getIntervalToggle()).toBeEnabled(),
     },
   };
 }
@@ -100,12 +94,17 @@ describe("FEATURE: Refresh Controls Query State", () => {
       expect(getButton().textContent).toContain("Refresh");
     });
 
-    test("EXAMPLE: The cancel button shows the elapsed query time", async () => {
+    test("EXAMPLE: The action segment keeps one width in both states, so the group does not jump", async () => {
       const { rerenderWith, getButton } = renderRefreshConfig(false);
 
-      await rerenderWith({ queryInProgress: true, queryStartedAt: Date.now() - 2700 });
+      expect(getButton()).toHaveClass("refresh-action");
+      expect(getButton().textContent!.trim()).toBe("Refresh");
+
+      await rerenderWith({ queryInProgress: true });
 
-      expect(getButton().textContent).toMatch(/Cancel · \d+\.\ds/);
+      expect(getButton()).toHaveClass("refresh-action");
+      // no clock in the label: the width must not depend on how long the query runs
+      expect(getButton().textContent!.trim()).toBe("Cancel");
     });
 
     test("EXAMPLE: With auto-refresh armed, the countdown ring sits inside the button", async () => {
@@ -181,4 +180,44 @@ describe("FEATURE: Refresh Controls Query State", () => {
       expect(emitted().cancelQuery).toBeFalsy();
     });
   });
+
+  describe("RULE: The interval sits in the button as a short label, the way Grafana shows it", () => {
+    test("EXAMPLE: The segment reads Off, 5s, 1m or 1h for the active interval", async () => {
+      const { rerenderWith, getIntervalToggle } = renderRefreshConfig(false);
+
+      expect(getIntervalToggle().textContent!.trim()).toBe("Off");
+
+      await rerenderWith({ queryInProgress: false, modelValue: 5000 });
+      expect(getIntervalToggle().textContent!.trim()).toBe("5s");
+
+      await rerenderWith({ queryInProgress: false, modelValue: 60000 });
+      expect(getIntervalToggle().textContent!.trim()).toBe("1m");
+
+      await rerenderWith({ queryInProgress: false, modelValue: 3600000 });
+      expect(getIntervalToggle().textContent!.trim()).toBe("1h");
+    });
+
+    test("EXAMPLE: The segment names the interval in full for assistive tech", async () => {
+      const { rerenderWith, getIntervalToggle } = renderRefreshConfig(false);
+
+      await rerenderWith({ queryInProgress: false, modelValue: 60000 });
+
+      expect(getIntervalToggle()).toHaveAccessibleName("Auto-refresh: Every minute");
+    });
+
+    test("EXAMPLE: Choosing an interval from the menu sets it; choosing Off turns auto-refresh off", async () => {
+      const { emitted } = renderRefreshConfig(false);
+
+      const items = document.querySelectorAll<HTMLButtonElement>(".interval-menu .dropdown-item");
+      const byShort = (short: string) => [...items].find((item) => item.textContent!.trim().startsWith(short))!;
+
+      byShort("1m").click();
+      await Promise.resolve();
+      expect(emitted()["update:modelValue"]).toEqual([[60000]]);
+
+      byShort("Off").click();
+      await Promise.resolve();
+      expect(emitted()["update:modelValue"]).toEqual([[60000], [null]]);
+    });
+  });
 });
diff --git a/src/Frontend/src/components/RefreshConfig.vue b/src/Frontend/src/components/RefreshConfig.vue
index f422dca25..8b9e6ed12 100644
--- a/src/Frontend/src/components/RefreshConfig.vue
+++ b/src/Frontend/src/components/RefreshConfig.vue
@@ -1,74 +1,42 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, useId, watch } from "vue";
-import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
 import ActionButton from "@/components/ActionButton.vue";
 import AutoRefreshIndicator from "@/components/AutoRefreshIndicator.vue";
+import { abbreviateInterval, refreshIntervalOptions } from "@/components/refreshInterval";
 import { faRefresh, faXmark } from "@fortawesome/free-solid-svg-icons";
 
-const props = defineProps<{ queryInProgress: boolean; queryStartedAt?: number | null; nextRefreshAt?: number | null }>();
+const props = defineProps<{ queryInProgress: boolean; nextRefreshAt?: number | null }>();
 const model = defineModel<number | null>({ required: true });
 const emit = defineEmits<{ (e: "manualRefresh"): Promise<void>; (e: "cancelQuery"): void }>();
-const autoRefreshOptionsText: [number, string][] = [
-  [0, "Off"],
-  [5000, "Every 5 seconds"],
-  [15000, "Every 15 seconds"],
-  [30000, "Every 30 seconds"],
-  [60000, "Every 1 minute"],
-  [600000, "Every 10 minute"],
-  [1800000, "Every 30 minute"],
-  [3600000, "Every 1 hour"],
-];
-
-function extracted() {
-  const item = autoRefreshOptionsText.find((item) => item[0] === model.value);
-
-  if (item) {
-    return item[1];
-  }
-
-  return "Off";
-}
 
-const selectValue = extracted();
+// The interval lives in the button as a short label ("5s", "1m", "Off"), the way Grafana
+// shows it; the menu spells each option out
+const currentOption = computed(() => refreshIntervalOptions.find((option) => option.ms === (model.value ?? 0)) ?? { ms: model.value ?? 0, short: abbreviateInterval(model.value), long: abbreviateInterval(model.value) });
 
-const selectedRefresh = ref<string>(selectValue);
-
-watch(selectedRefresh, (newValue) => {
-  const item = autoRefreshOptionsText.find((item) => item[1] === newValue);
+function selectInterval(ms: number) {
+  model.value = ms === 0 ? null : ms;
+}
 
-  if (item) {
-    if (item[0] === 0) {
-      model.value = null;
-    } else {
-      model.value = item[0];
-    }
-  }
-});
 // While auto-refresh is armed and no query runs, the countdown ring takes the
 // place of the refresh arrow inside the button
 const ringActive = computed(() => !props.queryInProgress && props.nextRefreshAt != null && model.value != null);
 
-/* clock: 100 ms while a query runs (elapsed time shows tenths), 250 ms for the countdown */
+/* clock for the countdown text, ticking only while the ring is showing */
 const now = ref(Date.now());
 let ticker: number | undefined;
 watch(
-  () => (props.queryInProgress ? 100 : ringActive.value ? 250 : null),
-  (intervalMs) => {
+  ringActive,
+  (active) => {
     window.clearInterval(ticker);
-    if (intervalMs !== null) {
+    if (active) {
       now.value = Date.now();
-      ticker = window.setInterval(() => (now.value = Date.now()), intervalMs);
+      ticker = window.setInterval(() => (now.value = Date.now()), 250);
     }
   },
   { immediate: true }
 );
 onBeforeUnmount(() => window.clearInterval(ticker));
 
-const elapsedLabel = computed(() => {
-  if (!props.queryInProgress || !props.queryStartedAt) return null;
-  return `${Math.max(0, (now.value - props.queryStartedAt) / 1000).toFixed(1)}s`;
-});
-
 // The ring is visual only; the countdown reaches assistive tech as text that describes
 // the button (a timer is not announced on every tick, but is read along with the button)
 const countdownId = useId();
@@ -85,22 +53,46 @@ async function refreshOrCancel() {
 
 <template>
   <div class="refresh-config">
-    <ActionButton size="sm" :icon="props.queryInProgress ? faXmark : ringActive ? undefined : faRefresh" :loading="props.queryInProgress" :disable-on-loading="false" :aria-describedby="ringActive ? countdownId : undefined" @click="refreshOrCancel">
-      <template v-if="ringActive && !props.queryInProgress" #icon>
-        <AutoRefreshIndicator class="ring" :next-refresh-at="props.nextRefreshAt ?? null" :interval-ms="model" :refreshing="false" />
-      </template>
-      <template v-if="props.queryInProgress"
-        >Cancel<template v-if="elapsedLabel"> · {{ elapsedLabel }}</template></template
+    <div class="btn-group refresh-group" role="group" aria-label="Refresh">
+      <ActionButton
+        size="sm"
+        class="refresh-action"
+        :icon="props.queryInProgress ? faXmark : ringActive ? undefined : faRefresh"
+        :loading="props.queryInProgress"
+        :disable-on-loading="false"
+        :aria-describedby="ringActive ? countdownId : undefined"
+        @click="refreshOrCancel"
       >
-      <template v-else>Refresh</template>
-    </ActionButton>
-    <span v-if="ringActive" :id="countdownId" class="visually-hidden" role="timer">Next auto refresh in {{ secondsLeft }} {{ secondsLeft === 1 ? "second" : "seconds" }}</span>
-    <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" />
+        <template v-if="ringActive && !props.queryInProgress" #icon>
+          <AutoRefreshIndicator class="ring" :next-refresh-at="props.nextRefreshAt ?? null" :interval-ms="model" :refreshing="false" />
+        </template>
+        <template v-if="props.queryInProgress">Cancel</template>
+        <template v-else>Refresh</template>
+      </ActionButton>
+      <div class="btn-group" role="group">
+        <button
+          type="button"
+          class="btn btn-default btn-sm dropdown-toggle interval-toggle"
+          data-bs-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          :aria-label="`Auto-refresh: ${currentOption.long}`"
+          :title="`Auto-refresh: ${currentOption.long}`"
+          data-testid="refresh-interval"
+        >
+          {{ currentOption.short }}
+        </button>
+        <ul class="dropdown-menu dropdown-menu-end interval-menu">
+          <li v-for="option in refreshIntervalOptions" :key="option.ms">
+            <button type="button" class="dropdown-item" :class="{ active: option.ms === (model ?? 0) }" @click="selectInterval(option.ms)">
+              <span class="short">{{ option.short }}</span>
+              <span class="long">{{ option.long }}</span>
+            </button>
+          </li>
+        </ul>
       </div>
     </div>
+    <span v-if="ringActive" :id="countdownId" class="visually-hidden" role="timer">Next auto refresh in {{ secondsLeft }} {{ secondsLeft === 1 ? "second" : "seconds" }}</span>
   </div>
 </template>
 
@@ -108,16 +100,44 @@ async function refreshOrCancel() {
 .refresh-config {
   display: flex;
   align-items: center;
-  gap: 1em;
 }
 
-.filter {
+/* One width for "Refresh" and "Cancel", so the group does not jump between states.
+   No clock in the label: how long a query has run is advice on the results line, not a
+   number in a button */
+.refresh-action {
+  width: 7rem;
+  justify-content: center;
+}
+
+.interval-toggle {
+  min-width: 3.4em;
+  font-variant-numeric: tabular-nums;
+}
+
+.interval-menu {
+  min-width: 11rem;
+}
+
+.interval-menu .dropdown-item {
   display: flex;
-  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: 0.875rem;
+}
+
+.interval-menu .short {
+  font-variant-numeric: tabular-nums;
+  min-width: 2.5em;
+}
+
+.interval-menu .long {
+  color: var(--reduced-emphasis);
 }
 
-.filter-label {
-  font-weight: bold;
+.interval-menu .dropdown-item.active,
+.interval-menu .dropdown-item.active .long {
+  color: #fff;
 }
 
 .ring {
diff --git a/src/Frontend/src/components/audit/AuditList.spec.ts b/src/Frontend/src/components/audit/AuditList.spec.ts
index 9ffcf4aee..59f390805 100644
--- a/src/Frontend/src/components/audit/AuditList.spec.ts
+++ b/src/Frontend/src/components/audit/AuditList.spec.ts
@@ -1,4 +1,4 @@
-import { describe, test, expect, vi, beforeEach } from "vitest";
+import { describe, test, expect, vi, beforeEach, afterEach } from "vitest";
 import { fireEvent, render, screen, waitFor } from "@testing-library/vue";
 import { createTestingPinia } from "@pinia/testing";
 import { createRouter, createMemoryHistory } from "vue-router";
@@ -327,6 +327,42 @@ describe("FEATURE: Audit Messages Query State", () => {
     });
   });
 
+  describe("RULE: A query that runs long gets advice instead of a clock", () => {
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    test("EXAMPLE: After five seconds the results line suggests a narrower time range; it goes when the query ends", async () => {
+      const { isRefreshing } = await renderAuditList([createMessage()]);
+      await waitForFirstLoadToComplete();
+      vi.useFakeTimers();
+
+      isRefreshing.value = true;
+      await vi.advanceTimersByTimeAsync(4000);
+      expect(screen.queryByTestId("slow-query-hint")).not.toBeInTheDocument();
+
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(screen.getByTestId("slow-query-hint").textContent).toContain("narrower time range");
+
+      isRefreshing.value = false;
+      await nextTick();
+      expect(screen.queryByTestId("slow-query-hint")).not.toBeInTheDocument();
+    });
+
+    test("EXAMPLE: A query that finishes quickly never shows the hint", async () => {
+      const { isRefreshing } = await renderAuditList([createMessage()]);
+      await waitForFirstLoadToComplete();
+      vi.useFakeTimers();
+
+      isRefreshing.value = true;
+      await vi.advanceTimersByTimeAsync(1000);
+      isRefreshing.value = false;
+      await vi.advanceTimersByTimeAsync(10000);
+
+      expect(screen.queryByTestId("slow-query-hint")).not.toBeInTheDocument();
+    });
+  });
+
   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([]);
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 8d7604b2a..97e79306d 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -19,13 +19,28 @@ 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, timeRangeFrom, timeRangeTo, queryFailed, queryStartedAt, queryDurationMs } = storeToRefs(store);
+const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, timeRangeFrom, timeRangeTo, queryFailed, queryDurationMs } = storeToRefs(store);
 const route = useRoute();
 const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
 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);
+
+// A query that has run for a while gets advice rather than a clock: the only thing
+// the elapsed time ever told the user was "this is slow, make it lighter"
+const slowQueryAfterMs = 5000;
+const slowQuery = ref(false);
+let slowQueryTimer: number | undefined;
+watch(
+  queryInProgress,
+  (running) => {
+    window.clearTimeout(slowQueryTimer);
+    slowQuery.value = false;
+    if (running) slowQueryTimer = window.setTimeout(() => (slowQuery.value = true), slowQueryAfterMs);
+  },
+  { immediate: true }
+);
 const showWizard = ref(false);
 const { status: auditStatus } = useAuditingCapability();
 const wizardPages = computed(() => getAuditingWizardPages(auditStatus.value));
@@ -89,6 +104,7 @@ onBeforeUnmount(() => {
   // in-flight query is aborted so it does not keep running (server-side included) in the background
   stop();
   store.cancelQuery();
+  window.clearTimeout(slowQueryTimer);
   // 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();
@@ -180,12 +196,15 @@ watch(autoRefreshValue, (newValue) => {
       <div class="row">
         <FiltersPanel>
           <template #actions>
-            <RefreshConfig v-model="autoRefreshValue" :query-in-progress="queryInProgress" :query-started-at="queryStartedAt" :next-refresh-at="nextRefreshAt" @manual-refresh="refreshNow" @cancel-query="store.cancelQuery" />
+            <RefreshConfig v-model="autoRefreshValue" :query-in-progress="queryInProgress" :next-refresh-at="nextRefreshAt" @manual-refresh="refreshNow" @cancel-query="store.cancelQuery" />
           </template>
         </FiltersPanel>
       </div>
       <div class="row results-row">
-        <ResultsCount :displayed="messages.length" :total="totalCount" :duration-ms="queryDurationMs" />
+        <div class="results-summary">
+          <ResultsCount :displayed="messages.length" :total="totalCount" :duration-ms="queryDurationMs" />
+          <span v-if="slowQuery && queryInProgress" class="slow-query" role="status" data-testid="slow-query-hint">Still running · a narrower time range makes the query lighter.</span>
+        </div>
         <ResultsOptions />
       </div>
       <PageBanner v-if="bannerMessage && isMassTransitConnected === false" :message="bannerMessage" :show-action="showBannerAction" @action="showWizard = true" />
@@ -257,21 +276,38 @@ watch(autoRefreshValue, (newValue) => {
   color: #fff;
 }
 
+/* Summary on the left, Show/Sort/Times pinned on the right. The right group never
+   shrinks and never wraps; the summary is the side that gives, and a slow-query hint
+   goes on its own line under it rather than pushing the options around */
 .results-row {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  align-items: flex-start;
   gap: 1rem;
-  flex-wrap: wrap;
 }
 
-/* ResultsCount's root uses the bootstrap .col class (flex-grow: 1), which would
-   push the options onto their own line; in this row both sides size to content */
+/* ResultsCount's root uses the bootstrap .col class (flex-grow: 1); size it here */
 .results-row > * {
-  flex: 0 1 auto;
   width: auto;
 }
 
+.results-row > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.results-row > :last-child {
+  flex: 0 0 auto;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.slow-query {
+  display: block;
+  margin-top: 0.1rem;
+  font-size: 0.875em;
+  color: #8a6d3b;
+}
+
 .results-table {
   margin-top: 1rem;
   margin-bottom: 5rem;
diff --git a/src/Frontend/src/components/refreshInterval.spec.ts b/src/Frontend/src/components/refreshInterval.spec.ts
new file mode 100644
index 000000000..17b0ea2b1
--- /dev/null
+++ b/src/Frontend/src/components/refreshInterval.spec.ts
@@ -0,0 +1,24 @@
+import { describe, expect, test } from "vitest";
+import { abbreviateInterval, refreshIntervalOptions } from "@/components/refreshInterval";
+
+describe("FEATURE: Auto-refresh interval labels", () => {
+  describe("RULE: An interval reads as a short unit label, the way Grafana shows it", () => {
+    test("EXAMPLE: Off, seconds, minutes and hours", () => {
+      expect(abbreviateInterval(null)).toBe("Off");
+      expect(abbreviateInterval(0)).toBe("Off");
+      expect(abbreviateInterval(5000)).toBe("5s");
+      expect(abbreviateInterval(30000)).toBe("30s");
+      expect(abbreviateInterval(60000)).toBe("1m");
+      expect(abbreviateInterval(600000)).toBe("10m");
+      expect(abbreviateInterval(3600000)).toBe("1h");
+    });
+  });
+
+  describe("RULE: The menu offers the same intervals as before, each with its short and long label", () => {
+    test("EXAMPLE: Off first, then increasing intervals", () => {
+      expect(refreshIntervalOptions.map((o) => o.short)).toEqual(["Off", "5s", "15s", "30s", "1m", "10m", "30m", "1h"]);
+      expect(refreshIntervalOptions.find((o) => o.ms === 60000)?.long).toBe("Every minute");
+      expect(refreshIntervalOptions.find((o) => o.ms === 0)?.long).toBe("Off");
+    });
+  });
+});
diff --git a/src/Frontend/src/components/refreshInterval.ts b/src/Frontend/src/components/refreshInterval.ts
new file mode 100644
index 000000000..7abc0e032
--- /dev/null
+++ b/src/Frontend/src/components/refreshInterval.ts
@@ -0,0 +1,33 @@
+// Auto-refresh intervals and their labels. The control shows the short form the way
+// Grafana does ("5s", "1m", "1h"); the menu adds the long form for clarity.
+
+export interface RefreshIntervalOption {
+  ms: number; // 0 = off
+  short: string;
+  long: string;
+}
+
+export function abbreviateInterval(ms: number | null): string {
+  if (!ms) return "Off";
+  const seconds = Math.round(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  return `${Math.round(minutes / 60)}h`;
+}
+
+function describeInterval(ms: number): string {
+  if (ms === 0) return "Off";
+  const seconds = Math.round(ms / 1000);
+  if (seconds < 60) return `Every ${seconds} seconds`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return minutes === 1 ? "Every minute" : `Every ${minutes} minutes`;
+  const hours = Math.round(minutes / 60);
+  return hours === 1 ? "Every hour" : `Every ${hours} hours`;
+}
+
+export const refreshIntervalOptions: RefreshIntervalOption[] = [0, 5_000, 15_000, 30_000, 60_000, 600_000, 1_800_000, 3_600_000].map((ms) => ({
+  ms,
+  short: abbreviateInterval(ms),
+  long: describeInterval(ms),
+}));