diff --git a/src/Frontend/src/components/ActionButton.vue b/src/Frontend/src/components/ActionButton.vue
index 1b94fe11a..9d16fee1a 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,13 +48,15 @@ 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"
   >
-    <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 ff74b7fa7..ed307f4fe 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";
@@ -15,25 +15,21 @@ 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>',
-});
-
-const ListFilterSelectorStub = defineComponent({
-  props: { disabled: Boolean },
-  template: '<button :data-disabled="String(disabled)" />',
+  props: { loading: Boolean, disabled: Boolean, disableOnLoading: { type: Boolean, default: true } },
+  template: '<button :data-loading="String(loading)" :disabled="disabled || (loading && disableOnLoading)"><slot name="icon" /><slot /></button>',
 });
 
 // ==================== DSL ====================
 
 function renderRefreshConfig(queryInProgress: boolean) {
-  const { rerender } = render(RefreshConfig, {
+  const { rerender, emitted } = render(RefreshConfig, {
     props: { queryInProgress, modelValue: null },
     global: {
       stubs: {
         ActionButton: ActionButtonStub,
-        ListFilterSelector: ListFilterSelectorStub,
       },
     },
   });
@@ -42,23 +38,30 @@ 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; nextRefreshAt?: number | null; modelValue?: number | null }) {
+    await rerender({ modelValue: null, ...props });
+  }
+
   return {
     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(),
     },
   };
 }
@@ -66,18 +69,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 +91,133 @@ describe("FEATURE: Refresh Controls Query State", () => {
 
       verify.refreshButtonIsNotLoading();
       verify.refreshButtonIsEnabled();
-      verify.autoRefreshSelectorIsEnabled();
+      expect(getButton().textContent).toContain("Refresh");
+    });
+
+    test("EXAMPLE: The action segment keeps one width in both states, so the group does not jump", async () => {
+      const { rerenderWith, getButton } = renderRefreshConfig(false);
+
+      expect(getButton()).toHaveClass("refresh-action");
+      expect(getButton().textContent!.trim()).toBe("Refresh");
+
+      await rerenderWith({ queryInProgress: true });
+
+      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 () => {
+      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);
+
+      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();
+    });
+  });
+
+  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 2fe5acac2..8b9e6ed12 100644
--- a/src/Frontend/src/components/RefreshConfig.vue
+++ b/src/Frontend/src/components/RefreshConfig.vue
@@ -1,62 +1,98 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
+import { computed, onBeforeUnmount, ref, useId, watch } from "vue";
 import ActionButton from "@/components/ActionButton.vue";
-import { faRefresh } from "@fortawesome/free-solid-svg-icons";
+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 }>();
+const props = defineProps<{ queryInProgress: boolean; nextRefreshAt?: number | null }>();
 const model = defineModel<number | null>({ required: true });
-const emit = defineEmits<{ (e: "manualRefresh"): Promise<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];
-  }
+const emit = defineEmits<{ (e: "manualRefresh"): Promise<void>; (e: "cancelQuery"): void }>();
+
+// 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) });
 
-  return "Off";
+function selectInterval(ms: number) {
+  model.value = ms === 0 ? null : ms;
 }
 
-const selectValue = extracted();
+// 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);
 
-const selectedRefresh = ref<string>(selectValue);
+/* clock for the countdown text, ticking only while the ring is showing */
+const now = ref(Date.now());
+let ticker: number | undefined;
+watch(
+  ringActive,
+  (active) => {
+    window.clearInterval(ticker);
+    if (active) {
+      now.value = Date.now();
+      ticker = window.setInterval(() => (now.value = Date.now()), 250);
+    }
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => window.clearInterval(ticker));
 
-watch(selectedRefresh, (newValue) => {
-  const item = autoRefreshOptionsText.find((item) => item[1] === newValue);
+// 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))));
 
-  if (item) {
-    if (item[0] === 0) {
-      model.value = null;
-    } else {
-      model.value = item[0];
-    }
+async function refreshOrCancel() {
+  if (props.queryInProgress) {
+    emit("cancelQuery");
+    return;
   }
-});
-async function refresh() {
   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>
-    <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" />
+    <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-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>
 
@@ -64,16 +100,48 @@ async function refresh() {
 .refresh-config {
   display: flex;
   align-items: center;
-  gap: 1em;
-  margin-bottom: 0.5em;
 }
 
-.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);
+}
+
+.interval-menu .dropdown-item.active,
+.interval-menu .dropdown-item.active .long {
+  color: #fff;
 }
 
-.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/ResultsCount.spec.ts b/src/Frontend/src/components/ResultsCount.spec.ts
new file mode 100644
index 000000000..20e695c3b
--- /dev/null
+++ b/src/Frontend/src/components/ResultsCount.spec.ts
@@ -0,0 +1,31 @@
+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: 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 } });
+
+    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..c5eea31bc 100644
--- a/src/Frontend/src/components/ResultsCount.vue
+++ b/src/Frontend/src/components/ResultsCount.vue
@@ -1,13 +1,28 @@
 <script setup lang="ts">
-defineProps<{
+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 {{ displayed }} of {{ total }} 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..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";
@@ -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,
@@ -323,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([]);
@@ -448,6 +488,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 6ee6faba9..97e79306d 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -4,10 +4,10 @@ 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";
-import AutoRefreshIndicator from "../AutoRefreshIndicator.vue";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import useFetchWithAutoRefresh from "@/composables/autoRefresh";
 import WizardDialog from "@/components/platformcapabilities/WizardDialog.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 } = 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();
@@ -177,13 +193,19 @@ 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" :next-refresh-at="nextRefreshAt" @manual-refresh="refreshNow" @cancel-query="store.cancelQuery" />
+          </template>
+        </FiltersPanel>
       </div>
-      <div class="row">
-        <ResultsCount :displayed="messages.length" :total="totalCount" />
+      <div class="row results-row">
+        <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" />
     </div>
@@ -254,6 +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: flex-start;
+  gap: 1rem;
+}
+
+/* ResultsCount's root uses the bootstrap .col class (flex-grow: 1); size it here */
+.results-row > * {
+  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/audit/FiltersPanel.vue b/src/Frontend/src/components/audit/FiltersPanel.vue
index f2c7a849a..19d97892b 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,17 +34,8 @@ 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 class="filter actions">
+      <slot name="actions" />
     </div>
   </div>
 </template>
@@ -108,13 +58,15 @@ function findKeyByValue(searchValue: string) {
   max-width: 100%;
 }
 
-.filter-component {
-  min-width: 0;
+.filter.actions {
+  margin-left: auto;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.15rem;
 }
 
-.filter:last-child {
-  flex-grow: 1;
-  place-content: flex-end;
+.filter-component {
+  min-width: 0;
 }
 
 .filter-label {
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>
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),
+}));
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,
   };
 });