From 513141a2186a1ed27e2fb171430d99c7c04e6a43 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Thu, 3 Sep 2026 17:46:33 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Age-adaptive=20timestamps=20wit?=
 =?UTF-8?q?h=20a=20relative=20label,=20and=20when=20the=20query=20ran?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Time Sent adapts to age: time only for today, "yesterday 14:32" and
weekday names for the past week, the regular browser format beyond,
with a live coarse relative label and the full timestamp in both zones
as tooltip. A "Times: local|UTC" toggle on the results line flips every
timestamp to UTC wall-clock time (day boundaries included), persisted
per browser. The results line also shows when the current results were
fetched ("ran 3 minutes ago", exact timestamp as tooltip); that is
forgotten with the results when the view is left.
---
 .../src/components/AdaptiveTimestamp.spec.ts  | 77 +++++++++++++++++++
 .../src/components/AdaptiveTimestamp.vue      | 35 +++++++++
 .../src/components/ResultsCount.spec.ts       |  9 +++
 src/Frontend/src/components/ResultsCount.vue  | 20 ++++-
 .../src/components/audit/AuditList.vue        |  4 +-
 .../src/components/audit/AuditListItem.vue    |  3 +-
 .../src/components/audit/ResultsOptions.vue   | 18 +++++
 src/Frontend/src/composables/dateFormatter.ts | 32 ++++++++
 .../src/composables/timestampZone.spec.ts     | 38 +++++++++
 src/Frontend/src/composables/timestampZone.ts | 33 ++++++++
 src/Frontend/src/stores/AuditStore.spec.ts    | 11 +++
 src/Frontend/src/stores/AuditStore.ts         |  4 +
 12 files changed, 279 insertions(+), 5 deletions(-)
 create mode 100644 src/Frontend/src/components/AdaptiveTimestamp.spec.ts
 create mode 100644 src/Frontend/src/components/AdaptiveTimestamp.vue
 create mode 100644 src/Frontend/src/composables/timestampZone.spec.ts
 create mode 100644 src/Frontend/src/composables/timestampZone.ts

diff --git a/src/Frontend/src/components/AdaptiveTimestamp.spec.ts b/src/Frontend/src/components/AdaptiveTimestamp.spec.ts
new file mode 100644
index 0000000000..2d37e1953b
--- /dev/null
+++ b/src/Frontend/src/components/AdaptiveTimestamp.spec.ts
@@ -0,0 +1,77 @@
+import { describe, expect, test, vi, beforeEach, afterEach } from "vitest";
+import { cleanup, render, screen } from "@testing-library/vue";
+import AdaptiveTimestamp from "@/components/AdaptiveTimestamp.vue";
+import { useTimestampZone } from "@/composables/timestampZone";
+
+const NOW = new Date("2026-09-03T15:00:00");
+
+function renderAt(date: Date) {
+  cleanup();
+  render(AdaptiveTimestamp, { props: { dateUtc: date.toISOString() } });
+  return {
+    absolute: screen.getByTestId("adaptive-absolute").textContent!,
+    relative: screen.getByTestId("adaptive-relative").textContent!,
+  };
+}
+
+describe("FEATURE: Age-adaptive timestamps", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(NOW);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    useTimestampZone().zone.value = "local";
+  });
+
+  test("EXAMPLE: Today shows the time only", () => {
+    const date = new Date("2026-09-03T13:00:00");
+    const { absolute, relative } = renderAt(date);
+
+    expect(absolute).toBe(date.toLocaleTimeString());
+    expect(relative).toContain("2 hours ago");
+  });
+
+  test("EXAMPLE: Yesterday is labeled yesterday", () => {
+    const date = new Date("2026-09-02T13:00:00");
+    const { absolute, relative } = renderAt(date);
+
+    expect(absolute).toBe(`yesterday ${date.toLocaleTimeString()}`);
+    expect(relative).toContain("1 day ago");
+  });
+
+  test("EXAMPLE: Within the past week the weekday is named", () => {
+    const date = new Date("2026-08-31T13:00:00"); // Monday
+    const { absolute, relative } = renderAt(date);
+
+    expect(absolute).toBe(`${date.toLocaleDateString(undefined, { weekday: "long" })} ${date.toLocaleTimeString()}`);
+    expect(relative).toContain("3 days ago");
+  });
+
+  test("EXAMPLE: Older dates keep the regular browser format", () => {
+    const date = new Date("2026-08-20T13:00:00");
+    const { absolute, relative } = renderAt(date);
+
+    expect(absolute).toBe(date.toLocaleString());
+    expect(relative).toContain("2 weeks ago");
+  });
+
+  test("EXAMPLE: In UTC mode the wall-clock time is UTC", () => {
+    const { zone } = useTimestampZone();
+    zone.value = "utc";
+
+    const date = new Date("2026-09-03T13:00:00");
+    const utcWall = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+
+    // toContain: near the UTC midnight boundary the day prefix may differ from local mode
+    expect(renderAt(date).absolute).toContain(utcWall.toLocaleTimeString());
+  });
+
+  test("EXAMPLE: The coarse relative label covers moments to years", () => {
+    expect(renderAt(new Date("2026-09-03T14:59:50")).relative).toContain("moments ago");
+    expect(renderAt(new Date("2026-09-03T14:30:00")).relative).toContain("30 minutes ago");
+    expect(renderAt(new Date("2026-06-03T15:00:00")).relative).toContain("3 months ago");
+    expect(renderAt(new Date("2024-09-03T15:00:00")).relative).toContain("2 years ago");
+  });
+});
diff --git a/src/Frontend/src/components/AdaptiveTimestamp.vue b/src/Frontend/src/components/AdaptiveTimestamp.vue
new file mode 100644
index 0000000000..b66fb08c20
--- /dev/null
+++ b/src/Frontend/src/components/AdaptiveTimestamp.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useDateFormatter } from "@/composables/dateFormatter";
+import { useTimestampZone } from "@/composables/timestampZone";
+
+const props = defineProps<{ dateUtc: string }>();
+
+const { formatAdaptiveDate, formatCoarseRelative, formatDateTooltip } = useDateFormatter();
+const { zone } = useTimestampZone();
+
+// tick so the relative label stays honest and the adaptive form rolls over at midnight
+const now = ref(new Date());
+let timer: number | undefined;
+onMounted(() => {
+  timer = window.setInterval(() => (now.value = new Date()), 5000);
+});
+onBeforeUnmount(() => window.clearInterval(timer));
+
+const absolute = computed(() => formatAdaptiveDate(props.dateUtc, () => now.value, zone.value));
+const relative = computed(() => formatCoarseRelative(props.dateUtc, () => now.value));
+const tooltip = computed(() => formatDateTooltip(props.dateUtc));
+</script>
+
+<template>
+  <span class="adaptive-timestamp" :title="tooltip">
+    <span data-testid="adaptive-absolute">{{ absolute }}</span>
+    <span class="relative" data-testid="adaptive-relative"> · {{ relative }}</span>
+  </span>
+</template>
+
+<style scoped>
+.relative {
+  color: #999;
+}
+</style>
diff --git a/src/Frontend/src/components/ResultsCount.spec.ts b/src/Frontend/src/components/ResultsCount.spec.ts
index 20e695c3b1..84255aaf82 100644
--- a/src/Frontend/src/components/ResultsCount.spec.ts
+++ b/src/Frontend/src/components/ResultsCount.spec.ts
@@ -23,6 +23,15 @@ describe("FEATURE: Results count", () => {
     expect(screen.getByText("Showing 10 of 10 result(s) · took 320 ms")).toBeInTheDocument();
   });
 
+  test("EXAMPLE: When the query ran is shown relatively with the timestamp as tooltip", () => {
+    const completedAt = new Date(Date.now() - 3 * 60 * 1000).toISOString();
+    render(ResultsCount, { props: { displayed: 10, total: 10, durationMs: 320, completedAt } });
+
+    const ran = screen.getByTestId("ran-ago");
+    expect(ran.textContent).toContain("minutes ago");
+    expect(ran.getAttribute("title")).toContain("(UTC)");
+  });
+
   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 c5eea31bca..5a90be26ff 100644
--- a/src/Frontend/src/components/ResultsCount.vue
+++ b/src/Frontend/src/components/ResultsCount.vue
@@ -1,12 +1,25 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useDateFormatter } from "@/composables/dateFormatter";
 
 const props = defineProps<{
   displayed: number;
   total: number;
   durationMs?: number | null;
+  completedAt?: string | null;
 }>();
 
+const { formatCoarseRelative, formatDateTooltip } = useDateFormatter();
+const now = ref(new Date());
+let timer: number | undefined;
+onMounted(() => {
+  timer = window.setInterval(() => (now.value = new Date()), 5000);
+});
+onBeforeUnmount(() => window.clearInterval(timer));
+
+const ranAgo = computed(() => (props.completedAt ? formatCoarseRelative(props.completedAt, () => now.value) : null));
+const ranTooltip = computed(() => (props.completedAt ? formatDateTooltip(props.completedAt) : ""));
+
 // 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));
@@ -21,7 +34,10 @@ const formattedDuration = computed(() => {
 <template>
   <div class="col format-showing-results">
     <div>
-      Showing {{ formattedDisplayed }} of {{ formattedTotal }} result(s)<template v-if="formattedDuration"> · took {{ formattedDuration }}</template>
+      Showing {{ formattedDisplayed }} of {{ formattedTotal }} result(s)<template v-if="formattedDuration"> · took {{ formattedDuration }}</template
+      ><template v-if="ranAgo">
+        · ran <span :title="ranTooltip" data-testid="ran-ago">{{ ranAgo }}</span></template
+      >
     </div>
   </div>
 </template>
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 97e79306df..d3124f1e42 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -19,7 +19,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, queryDurationMs } = storeToRefs(store);
+const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, timeRangeFrom, timeRangeTo, queryFailed, queryDurationMs, queryCompletedAt } = storeToRefs(store);
 const route = useRoute();
 const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
@@ -202,7 +202,7 @@ watch(autoRefreshValue, (newValue) => {
       </div>
       <div class="row results-row">
         <div class="results-summary">
-          <ResultsCount :displayed="messages.length" :total="totalCount" :duration-ms="queryDurationMs" />
+          <ResultsCount :displayed="messages.length" :total="totalCount" :duration-ms="queryDurationMs" :completed-at="queryCompletedAt" />
           <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 />
diff --git a/src/Frontend/src/components/audit/AuditListItem.vue b/src/Frontend/src/components/audit/AuditListItem.vue
index e82d35bdae..e22f07b5a2 100644
--- a/src/Frontend/src/components/audit/AuditListItem.vue
+++ b/src/Frontend/src/components/audit/AuditListItem.vue
@@ -5,6 +5,7 @@ import { computed } from "vue";
 import { formatDotNetTimespan } from "@/composables/formatUtils";
 import { useRouter, RouterLink } from "vue-router";
 import MessageStatusIcon from "@/components/audit/MessageStatusIcon.vue";
+import AdaptiveTimestamp from "@/components/AdaptiveTimestamp.vue";
 
 const router = useRouter();
 
@@ -33,7 +34,7 @@ const link = computed(() => {
     </div>
     <div class="message-id">{{ props.message.message_id }}</div>
     <div class="message-type">{{ props.message.message_type }}</div>
-    <div class="time-sent"><span class="label-name">Time Sent:</span>{{ new Date(props.message.time_sent).toLocaleString() }}</div>
+    <div class="time-sent"><span class="label-name">Time Sent:</span><AdaptiveTimestamp :date-utc="props.message.time_sent" /></div>
     <div class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(props.message.critical_time) }}</div>
     <div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(props.message.processing_time) }}</div>
     <div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(props.message.delivery_time) }}</div>
diff --git a/src/Frontend/src/components/audit/ResultsOptions.vue b/src/Frontend/src/components/audit/ResultsOptions.vue
index 08ff3042a4..2658c5d6aa 100644
--- a/src/Frontend/src/components/audit/ResultsOptions.vue
+++ b/src/Frontend/src/components/audit/ResultsOptions.vue
@@ -3,7 +3,9 @@ import { computed } from "vue";
 import { storeToRefs } from "pinia";
 import { FieldNames, useAuditStore } from "@/stores/AuditStore";
 import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
+import { useTimestampZone } from "@/composables/timestampZone";
 
+const { zone, toggle } = useTimestampZone();
 const store = useAuditStore();
 const { sortBy, itemsPerPage } = storeToRefs(store);
 
@@ -61,6 +63,10 @@ function findKeyByValue(searchValue: string) {
       <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 class="option">
+      <span class="option-label">Times:</span>
+      <button type="button" class="zone-toggle" data-testid="zone-toggle" :title="`Switch to ${zone === 'local' ? 'UTC' : 'local'} times`" @click="toggle">{{ zone === "local" ? "local" : "UTC" }}</button>
+    </div>
   </div>
 </template>
 
@@ -81,4 +87,16 @@ function findKeyByValue(searchValue: string) {
 .option-label {
   font-weight: bold;
 }
+
+.zone-toggle {
+  border: 0;
+  background: none;
+  color: #00729c;
+  cursor: pointer;
+  padding: 0.1rem 0.25rem;
+}
+
+.zone-toggle:hover {
+  text-decoration: underline;
+}
 </style>
diff --git a/src/Frontend/src/composables/dateFormatter.ts b/src/Frontend/src/composables/dateFormatter.ts
index 1ec3d9feba..8b87921721 100644
--- a/src/Frontend/src/composables/dateFormatter.ts
+++ b/src/Frontend/src/composables/dateFormatter.ts
@@ -61,6 +61,36 @@ export function useDateFormatter() {
   /**
    * Format date for tooltip display (local and UTC)
    */
+  // Coarse relative age: moments/minutes/hours/days/weeks/months/years ago
+  function formatCoarseRelative(dateInput: string | Date, now: () => Date = () => new Date()): string {
+    const then = dayjs.utc(dateInput).valueOf();
+    const seconds = Math.max(0, Math.round((now().getTime() - then) / 1000));
+    const unit = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"} ago`;
+    if (seconds < 45) return "moments ago";
+    if (seconds < 60 * 60) return unit(Math.max(1, Math.round(seconds / 60)), "minute");
+    if (seconds < 24 * 60 * 60) return unit(Math.round(seconds / 3600), "hour");
+    if (seconds < 7 * 24 * 60 * 60) return unit(Math.round(seconds / 86400), "day");
+    if (seconds < 5 * 7 * 24 * 60 * 60) return unit(Math.round(seconds / (7 * 86400)), "week");
+    if (seconds < 365 * 24 * 60 * 60) return unit(Math.max(1, Math.round(seconds / (30.44 * 86400))), "month");
+    return unit(Math.max(1, Math.round(seconds / (365.25 * 86400))), "year");
+  }
+
+  // Age-adaptive absolute: time only for today, 'yesterday HH:MM' and weekday
+  // names for the past week, the regular browser-formatted value beyond that.
+  // In UTC mode both the instant and "now" are rebased to UTC wall time, so the
+  // same code path also gets the day boundaries right for that zone.
+  function formatAdaptiveDate(dateInput: string | Date, now: () => Date = () => new Date(), zone: "local" | "utc" = "local"): string {
+    const toWall = (d: Date) => (zone === "utc" ? new Date(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds()) : d);
+    const date = toWall(dayjs.utc(dateInput).toDate());
+    const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+    const dayDiff = Math.round((startOfDay(toWall(now())) - startOfDay(date)) / 86400000);
+    const time = date.toLocaleTimeString();
+    if (dayDiff <= 0) return time;
+    if (dayDiff === 1) return `yesterday ${time}`;
+    if (dayDiff < 7) return `${date.toLocaleDateString(undefined, { weekday: "long" })} ${time}`;
+    return date.toLocaleString();
+  }
+
   function formatDateTooltip(dateInput: string | Date | null, titleValue?: string): string {
     if (titleValue) return titleValue;
     if (!dateInput || dateInput === emptyDate) return "";
@@ -116,6 +146,8 @@ export function useDateFormatter() {
     formatDateRange,
     formatDateTooltip,
     formatRelativeTime,
+    formatCoarseRelative,
+    formatAdaptiveDate,
     formatLicenseDate,
     isValidDateRange,
     emptyDate,
diff --git a/src/Frontend/src/composables/timestampZone.spec.ts b/src/Frontend/src/composables/timestampZone.spec.ts
new file mode 100644
index 0000000000..9240956cd3
--- /dev/null
+++ b/src/Frontend/src/composables/timestampZone.spec.ts
@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, test } from "vitest";
+import { nextTick } from "vue";
+import { useTimestampZone } from "@/composables/timestampZone";
+
+describe("FEATURE: Local/UTC timestamp zone preference", () => {
+  afterEach(() => {
+    useTimestampZone().zone.value = "local";
+    localStorage.clear();
+  });
+
+  test("EXAMPLE: Toggling flips between local and UTC", () => {
+    const { zone, toggle } = useTimestampZone();
+
+    expect(zone.value).toBe("local");
+    toggle();
+    expect(zone.value).toBe("utc");
+    toggle();
+    expect(zone.value).toBe("local");
+  });
+
+  test("EXAMPLE: Every consumer sees the same choice", () => {
+    const first = useTimestampZone();
+    const second = useTimestampZone();
+
+    first.toggle();
+
+    expect(second.zone.value).toBe("utc");
+  });
+
+  test("EXAMPLE: The choice is persisted in this browser", async () => {
+    const { toggle } = useTimestampZone();
+
+    toggle();
+    await nextTick();
+
+    expect(localStorage.getItem("timestampZone")).toBe("utc");
+  });
+});
diff --git a/src/Frontend/src/composables/timestampZone.ts b/src/Frontend/src/composables/timestampZone.ts
new file mode 100644
index 0000000000..7961eb7b16
--- /dev/null
+++ b/src/Frontend/src/composables/timestampZone.ts
@@ -0,0 +1,33 @@
+import { ref, watch } from "vue";
+
+export type TimestampZone = "local" | "utc";
+
+const STORAGE_KEY = "timestampZone";
+
+function load(): TimestampZone {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === "utc" ? "utc" : "local";
+  } catch {
+    return "local";
+  }
+}
+
+// Module-level so every timestamp on screen flips together, and the choice
+// survives navigation; persisted per browser
+const zone = ref<TimestampZone>(load());
+
+watch(zone, (value) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, value);
+  } catch {
+    // storage unavailable: the preference just doesn't persist
+  }
+});
+
+export function useTimestampZone() {
+  function toggle() {
+    zone.value = zone.value === "local" ? "utc" : "local";
+  }
+
+  return { zone, toggle };
+}
diff --git a/src/Frontend/src/stores/AuditStore.spec.ts b/src/Frontend/src/stores/AuditStore.spec.ts
index dad1797a73..07d8098721 100644
--- a/src/Frontend/src/stores/AuditStore.spec.ts
+++ b/src/Frontend/src/stores/AuditStore.spec.ts
@@ -174,6 +174,17 @@ describe("AuditStore refresh", () => {
     expect(store.queryDurationMs).toBeNull();
   });
 
+  test("clearResults forgets when the results were fetched", async () => {
+    const store = useAuditStore();
+    fetchTypedFromServiceControl.mockResolvedValueOnce([responseWithTotalCount(1), [message]]);
+    await store.refresh();
+    expect(store.queryCompletedAt).not.toBeNull();
+
+    store.clearResults();
+
+    expect(store.queryCompletedAt).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 b2aad32554..2a32a2cba8 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -38,6 +38,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
   // of the query that produced the current results
   const queryStartedAt = ref<number | null>(null);
   const queryDurationMs = ref<number | null>(null);
+  const queryCompletedAt = ref<string | null>(null);
   const searchHistory = ref(loadSearchHistory());
   let activeQuery: AbortController | null = null;
 
@@ -90,6 +91,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
       messages.value = data;
       queryFailed.value = false;
       queryDurationMs.value = Math.round(performance.now() - started);
+      queryCompletedAt.value = new Date().toISOString();
     } catch {
       if (thisQuery.signal.aborted) {
         // Superseded by a newer query, or the view was left
@@ -131,6 +133,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
     totalCount.value = 0;
     queryFailed.value = false;
     queryDurationMs.value = null;
+    queryCompletedAt.value = null;
   }
 
   return {
@@ -150,6 +153,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
     queryFailed,
     queryStartedAt,
     queryDurationMs,
+    queryCompletedAt,
     searchHistory,
     clearSearchHistory: clearHistory,
   };

From 04fe710f19999dd9544989311568a1b68ad3f216 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Fri, 4 Sep 2026 23:58:07 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20Align=20the=20row=20columns?=
 =?UTF-8?q?=20across=20the=20list,=20with=20the=20age=20folded=20into=20Ti?=
 =?UTF-8?q?me=20Sent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The audit row's grid gave every column an equal share, so short metric
cells sat on unused whitespace while a long Time Sent value wrapped
mid-label, and because every row was its own grid, a row with
"yesterday 8:22:30 PM" laid out differently from its neighbours.

The columns are now declared once on the list and shared by every row
via subgrid: each value column is never narrower than its widest value
in the list (nothing wraps) and the leftover width is shared equally,
so the columns spread out on wide screens. The message type owns the
top line; the id, the three metrics and Time Sent share the bottom
line, left aligned. The age follows the timestamp it belongs to, muted
("9:25 AM · 4 minutes ago"), rather than sitting in an unlabeled column
of its own; it hides below Bootstrap's lg breakpoint. Both style
blocks explain the mechanism in words.
---
 .../src/components/AdaptiveTimestamp.spec.ts  | 12 ++++
 .../src/components/AdaptiveTimestamp.vue      |  8 ++-
 .../src/components/audit/AuditList.vue        | 25 ++++++++
 .../components/audit/AuditListItem.spec.ts    | 61 +++++++++++++++++++
 .../src/components/audit/AuditListItem.vue    | 45 ++++++++++++--
 5 files changed, 143 insertions(+), 8 deletions(-)
 create mode 100644 src/Frontend/src/components/audit/AuditListItem.spec.ts

diff --git a/src/Frontend/src/components/AdaptiveTimestamp.spec.ts b/src/Frontend/src/components/AdaptiveTimestamp.spec.ts
index 2d37e1953b..0a70f58904 100644
--- a/src/Frontend/src/components/AdaptiveTimestamp.spec.ts
+++ b/src/Frontend/src/components/AdaptiveTimestamp.spec.ts
@@ -57,6 +57,18 @@ describe("FEATURE: Age-adaptive timestamps", () => {
     expect(relative).toContain("2 weeks ago");
   });
 
+  test("EXAMPLE: The part prop renders only one half, for split layouts", () => {
+    cleanup();
+    render(AdaptiveTimestamp, { props: { dateUtc: new Date("2026-09-03T13:00:00").toISOString(), part: "relative" } });
+    expect(screen.queryByTestId("adaptive-absolute")).not.toBeInTheDocument();
+    expect(screen.getByTestId("adaptive-relative").textContent).toBe("2 hours ago");
+
+    cleanup();
+    render(AdaptiveTimestamp, { props: { dateUtc: new Date("2026-09-03T13:00:00").toISOString(), part: "absolute" } });
+    expect(screen.queryByTestId("adaptive-relative")).not.toBeInTheDocument();
+    expect(screen.getByTestId("adaptive-absolute")).toBeInTheDocument();
+  });
+
   test("EXAMPLE: In UTC mode the wall-clock time is UTC", () => {
     const { zone } = useTimestampZone();
     zone.value = "utc";
diff --git a/src/Frontend/src/components/AdaptiveTimestamp.vue b/src/Frontend/src/components/AdaptiveTimestamp.vue
index b66fb08c20..9addc2a7f6 100644
--- a/src/Frontend/src/components/AdaptiveTimestamp.vue
+++ b/src/Frontend/src/components/AdaptiveTimestamp.vue
@@ -3,7 +3,9 @@ import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { useDateFormatter } from "@/composables/dateFormatter";
 import { useTimestampZone } from "@/composables/timestampZone";
 
-const props = defineProps<{ dateUtc: string }>();
+// part: render only one half — lets a layout place the absolute time and the
+// age in separate (grid) cells while both keep the dual-zone tooltip
+const props = defineProps<{ dateUtc: string; part?: "absolute" | "relative" }>();
 
 const { formatAdaptiveDate, formatCoarseRelative, formatDateTooltip } = useDateFormatter();
 const { zone } = useTimestampZone();
@@ -23,8 +25,8 @@ const tooltip = computed(() => formatDateTooltip(props.dateUtc));
 
 <template>
   <span class="adaptive-timestamp" :title="tooltip">
-    <span data-testid="adaptive-absolute">{{ absolute }}</span>
-    <span class="relative" data-testid="adaptive-relative"> · {{ relative }}</span>
+    <span v-if="props.part !== 'relative'" data-testid="adaptive-absolute">{{ absolute }}</span>
+    <span v-if="props.part !== 'absolute'" class="relative" data-testid="adaptive-relative">{{ props.part === "relative" ? "" : " · " }}{{ relative }}</span>
   </span>
 </template>
 
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index d3124f1e42..2f62417465 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -313,5 +313,30 @@ watch(autoRefreshValue, (newValue) => {
   margin-bottom: 5rem;
   background-color: #ffffff;
   position: relative;
+  /* The results list is a grid that places nothing itself: it only declares the six
+     columns, and every row (AuditListItem) joins them with `subgrid`. Declaring them here,
+     once, is what keeps rows aligned: a column is measured across ALL rows, which a row
+     laying out its own columns cannot do.
+
+       1.8em                       status icon
+       minmax(0, 1fr)              message id: the one value allowed to shrink and break,
+                                   so a long id never pushes the values off the row
+       minmax(max-content, 1fr)    each value column, read as: never narrower than its
+                                   widest value in the list (so nothing wraps), and once
+                                   every column has that, share the leftover width equally
+                                   (so the columns spread out on a wide screen instead of
+                                   huddling on the left)
+
+     Deliberately NOT a size container: combining container-type with content-sized
+     tracks froze Chrome's layout. */
+  display: grid;
+  grid-template-columns: 1.8em minmax(0, 1fr) repeat(4, minmax(max-content, 1fr));
+  column-gap: 0.375rem;
+  align-content: start;
+}
+
+/* Non-row children (the first-load spinner) span the full width */
+.results-table > :not(.item) {
+  grid-column: 1 / -1;
 }
 </style>
diff --git a/src/Frontend/src/components/audit/AuditListItem.spec.ts b/src/Frontend/src/components/audit/AuditListItem.spec.ts
new file mode 100644
index 0000000000..331ff3c839
--- /dev/null
+++ b/src/Frontend/src/components/audit/AuditListItem.spec.ts
@@ -0,0 +1,61 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { render, screen } from "@testing-library/vue";
+import { createMemoryHistory, createRouter } from "vue-router";
+import AuditListItem from "@/components/audit/AuditListItem.vue";
+import { type default as Message, MessageStatus } from "@/resources/Message";
+
+const NOW = new Date("2026-09-03T15:00:00");
+
+function renderRow(timeSent: string) {
+  const router = createRouter({ history: createMemoryHistory(), routes: [{ path: "/:pathMatch(.*)*", component: { template: "<div />" } }] });
+  const message = {
+    id: "id-1",
+    message_id: "msg-1",
+    message_type: "Sales.OrderPlaced",
+    time_sent: timeSent,
+    status: MessageStatus.Successful,
+    processing_time: "00:00:00.012",
+    critical_time: "00:00:00.123",
+    delivery_time: "00:00:00.001",
+  } as unknown as Message;
+  render(AuditListItem, { props: { message }, global: { plugins: [router] } });
+}
+
+describe("FEATURE: Audit row layout", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(NOW);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe("RULE: The age belongs to Time Sent, not to a column of its own", () => {
+    test("EXAMPLE: The Time Sent cell carries the label, the absolute time and the age", () => {
+      renderRow(new Date("2026-09-03T14:56:00").toISOString());
+
+      const cell = document.querySelector(".time-sent")!;
+      expect(cell.textContent).toContain("Time Sent:");
+      expect(cell.querySelector('[data-testid="adaptive-absolute"]')).not.toBeNull();
+      expect(cell.querySelector('[data-testid="adaptive-relative"]')!.textContent).toContain("4 minutes ago");
+      expect(screen.getByText("4 minutes ago", { exact: false })).toBeInTheDocument();
+    });
+
+    test("EXAMPLE: The age hides below Bootstrap's lg breakpoint through its display utilities", () => {
+      renderRow(new Date("2026-09-03T14:56:00").toISOString());
+
+      const age = document.querySelector('[data-testid="adaptive-relative"]')!.closest(".d-none.d-lg-inline");
+      expect(age).not.toBeNull();
+      // the separator hides together with the age
+      expect(age!.textContent).toContain("·");
+    });
+
+    test("EXAMPLE: There is no separate age cell", () => {
+      renderRow(new Date("2026-09-03T14:56:00").toISOString());
+
+      // the age is text inside the Time Sent cell, not a grid cell of the row
+      expect(document.querySelector(".item > .age")).toBeNull();
+    });
+  });
+});
diff --git a/src/Frontend/src/components/audit/AuditListItem.vue b/src/Frontend/src/components/audit/AuditListItem.vue
index e22f07b5a2..0fb3c8457a 100644
--- a/src/Frontend/src/components/audit/AuditListItem.vue
+++ b/src/Frontend/src/components/audit/AuditListItem.vue
@@ -34,7 +34,9 @@ const link = computed(() => {
     </div>
     <div class="message-id">{{ props.message.message_id }}</div>
     <div class="message-type">{{ props.message.message_type }}</div>
-    <div class="time-sent"><span class="label-name">Time Sent:</span><AdaptiveTimestamp :date-utc="props.message.time_sent" /></div>
+    <div class="time-sent">
+      <span class="label-name">Time Sent:</span><AdaptiveTimestamp :date-utc="props.message.time_sent" part="absolute" /><span class="age d-none d-lg-inline"> · <AdaptiveTimestamp :date-utc="props.message.time_sent" part="relative" /></span>
+    </div>
     <div class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(props.message.critical_time) }}</div>
     <div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(props.message.processing_time) }}</div>
     <div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(props.message.delivery_time) }}</div>
@@ -42,6 +44,19 @@ const link = computed(() => {
 </template>
 
 <style scoped>
+/* A row is a two-line card that is also a link.
+ *
+ * Its columns are NOT its own. The list (AuditList.vue) declares the six columns once and
+ * every row joins them with `subgrid`, so a value in one row sits exactly under the same
+ * value in the next: the widest "Time Sent" in the list sets that column for all rows.
+ * A row that sized its own columns could only measure its own values, and rows would
+ * drift apart (or wrap) as soon as one of them held a longer value.
+ *
+ *   grid-column: 1 / -1            span all six columns of the list
+ *   grid-template-columns: subgrid use them as this row's columns
+ *   grid-template-areas            where each cell goes, by name: the message type owns
+ *                                  the top line, the id and the values share the bottom
+ *                                  line, the status icon spans both */
 .item {
   color: inherit;
   text-decoration: none;
@@ -49,12 +64,13 @@ const link = computed(() => {
   border: 1px solid #ffffff;
   border-bottom: 1px solid #eee;
   display: grid;
-  grid-template-columns: 1.8em 1fr 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  grid-template-rows: auto auto;
   gap: 0.375rem;
   grid-template-areas:
-    "status message-type message-type message-type time-sent"
-    "status message-id processing-time critical-time delivery-time";
+    "status message-type message-type message-type message-type message-type"
+    "status message-id processing-time critical-time delivery-time time-sent";
 }
 .item:not(:first-child) {
   border-top-color: #eee;
@@ -76,6 +92,25 @@ const link = computed(() => {
 .time-sent {
   grid-area: time-sent;
 }
+
+/* The age reads as a footnote to the timestamp it follows. It is the first thing to go
+   when width gets tight: hidden below Bootstrap's lg breakpoint (d-none d-lg-inline on
+   the span), the absolute timestamp carries the information */
+.age,
+.age :deep(.relative) {
+  color: #777f7f;
+}
+
+/* All data cells share the bottom line; when one wraps taller, the rest stay
+   bottom aligned with it */
+.message-id,
+.processing-time,
+.critical-time,
+.delivery-time,
+.time-sent {
+  align-self: end;
+}
+
 .message-type {
   grid-area: message-type;
   font-weight: bold;