feat(ui): add per-user locale preference for date/time formatting

Hardcoded en-GB / en-US locales rendered dates the same way for every
viewer, ignoring the browser preference. Users whose locale uses ISO 8601
(e.g. sv-SE) had no way to see `2026-06-01` instead of `01/06/2026`.

Adds a LocaleProvider (mirrors ThemeProvider) backed by localStorage and
exposed under Settings → Profile → "Date & time format". The "Auto"
default resolves to `navigator.language`, so users with a Swedish
browser get ISO output without any configuration. The picker lists ~60
BCP-47 tags labelled via Intl.DisplayNames in the active locale. The
"Auto · <tag>" label always shows the real browser default rather than
the currently selected locale, so its meaning stays consistent
regardless of selection.

11 display formatters (MessageModal, TransactionModal, OTLP*,
QosPanel, ClockPanel, ResultsPanel, TimeRangePicker display, flow-data)
now read the locale from context and pass it to Intl.DateTimeFormat
instead of hardcoding `en-GB`. The cosmetic `.replace(',', '')` and the
`hour12: false` / `2-digit` overrides are dropped so the locale's
natural conventions apply; `fractionalSecondDigits: 3` is preserved
where it was (SIP packet timing).

Left untouched: `resolveTimeRange.ts` and `TimeRangePicker`'s input
formatter path. Those use `formatToParts` to read deterministic ISO
components for `<input type="datetime-local">` and timezone math — not
for display — so they keep the existing locale literal.

Author: fredrik-dahlgren

src/ui/src/App.tsx

@@ -27,6 +27,7 @@ import {
 import DashboardHeader from './dashboard/DashboardHeader'
 import { fetchMeAvatarObjectUrl, handleUnauthorized } from './api'
 import { ThemeProvider } from "@/components/theme/theme-provider"
+import { LocaleProvider } from "@/components/locale/locale-provider"
 import { WindowDock } from "@/components/ui/window-dock"
 import { useConfirm } from "@/components/ui/confirm-dialog"
 import { LoginPage } from './LoginPage'
@@ -548,6 +549,7 @@ function App() {
 
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <LocaleProvider defaultLocale="auto" storageKey="vite-ui-locale">
       <div className="app">
         <main className="content">
           {!token ? (
@@ -611,6 +613,7 @@ function App() {
         </main>
         <WindowDock />
       </div>
+      </LocaleProvider>
     </ThemeProvider>
   )
 }

src/ui/src/components/locale/locale-provider.tsx

@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect, useMemo, useState } from "react"
+
+type LocalePref = "auto" | string
+
+type LocaleProviderProps = {
+  children: React.ReactNode
+  defaultLocale?: LocalePref
+  storageKey?: string
+}
+
+type LocaleProviderState = {
+  locale: LocalePref
+  setLocale: (locale: LocalePref) => void
+  /** Resolved BCP-47 tag to pass to Intl APIs. For 'auto', equals `auto`. */
+  resolved: string
+  /** What 'auto' would resolve to right now, independent of the current selection. */
+  auto: string
+}
+
+function browserLocale(): string {
+  if (typeof navigator === "undefined") return "en-US"
+  return navigator.languages?.[0] || navigator.language || "en-US"
+}
+
+const initialState: LocaleProviderState = {
+  locale: "auto",
+  setLocale: () => null,
+  resolved: "en-US",
+  auto: "en-US",
+}
+
+const LocaleProviderContext = createContext<LocaleProviderState>(initialState)
+
+export function LocaleProvider({
+  children,
+  defaultLocale = "auto",
+  storageKey = "vite-ui-locale",
+  ...props
+}: LocaleProviderProps) {
+  const [locale, setLocaleState] = useState<LocalePref>(
+    () => (localStorage.getItem(storageKey) as LocalePref) || defaultLocale,
+  )
+
+  useEffect(() => {
+    localStorage.setItem(storageKey, locale)
+  }, [locale, storageKey])
+
+  const value = useMemo<LocaleProviderState>(
+    () => {
+      const auto = browserLocale()
+      return {
+        locale,
+        setLocale: setLocaleState,
+        resolved: locale === "auto" ? auto : locale,
+        auto,
+      }
+    },
+    [locale],
+  )
+
+  return (
+    <LocaleProviderContext.Provider {...props} value={value}>
+      {children}
+    </LocaleProviderContext.Provider>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useLocale = () => {
+  const context = useContext(LocaleProviderContext)
+  if (context === undefined)
+    throw new Error("useLocale must be used within a LocaleProvider")
+  return context
+}

src/ui/src/dashboard/CallFlow.tsx

@@ -7,6 +7,7 @@ import { FlowItem } from './flow/FlowItem'
 import type { FlowItemData, RawMessage } from './flow/flow-data'
 import { buildFlow, buildCallIdLegend } from './flow/flow-data'
 import { useFlowFilters } from './flow/useFlowFilters'
+import { useLocale } from '@/components/locale/locale-provider'
 
 interface CallFlowProps {
   items: RawMessage[] | null | undefined
@@ -15,6 +16,7 @@ interface CallFlowProps {
 }
 
 export default function CallFlow({ items, timeZone, onClickMessage }: CallFlowProps) {
+  const { resolved: locale } = useLocale()
   const {
     filters,
     setFilters,
@@ -30,8 +32,9 @@ export default function CallFlow({ items, timeZone, onClickMessage }: CallFlowPr
       buildFlow(filteredItems, {
         timeZone,
         grouping: filters.hostGrouping,
+        locale,
       }),
-    [filteredItems, timeZone, filters.hostGrouping],
+    [filteredItems, timeZone, filters.hostGrouping, locale],
   )
 
   const callIds = useMemo(() => buildCallIdLegend(items), [items])

src/ui/src/dashboard/MessageModal.tsx

@@ -7,6 +7,7 @@ import { FloatingWindow } from '@/components/ui/floating-window'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { displayDstIp, displaySrcIp } from '@/lib/ipAliasDisplay'
+import { useLocale } from '@/components/locale/locale-provider'
 
 function escapeHtml(str) {
   if (typeof str !== 'string') return str
@@ -158,30 +159,27 @@ function parseTimestampValue(value) {
   return null
 }
 
-function formatDateTime(value, timeZone, dateOnly = false) {
+function formatDateTime(value, locale, timeZone, dateOnly = false) {
   const date = parseTimestampValue(value)
   if (!date) return value
   const options = {
     year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
+    month: 'numeric',
+    day: 'numeric',
     ...(dateOnly
       ? {}
       : {
-          hour: '2-digit',
-          minute: '2-digit',
-          second: '2-digit',
+          hour: 'numeric',
+          minute: 'numeric',
+          second: 'numeric',
           fractionalSecondDigits: 3,
-          hour12: false,
         }),
   }
-  const formatter = timeZone && timeZone !== 'local'
-    ? new Intl.DateTimeFormat('en-GB', { ...options, timeZone })
-    : new Intl.DateTimeFormat('en-GB', options)
-  return formatter.format(date).replace(',', '')
+  if (timeZone && timeZone !== 'local') options.timeZone = timeZone
+  return new Intl.DateTimeFormat(locale, options).format(date)
 }
 
-function MetaGrid({ data, timeZone }) {
+function MetaGrid({ data, timeZone, locale }) {
   if (!data) return null
   return (
     <dl className="grid grid-cols-2 gap-x-4 gap-y-1 text-[11px] sm:grid-cols-3">
@@ -190,9 +188,9 @@ function MetaGrid({ data, timeZone }) {
         const display = raw === undefined
           ? '—'
           : field === 'timestamp'
-            ? formatDateTime(raw, timeZone)
+            ? formatDateTime(raw, locale, timeZone)
             : field === 'date'
-              ? formatDateTime(raw, timeZone, true)
+              ? formatDateTime(raw, locale, timeZone, true)
               : field === 'src_ip'
                 ? displaySrcIp(data)
                 : field === 'dst_ip'
@@ -218,6 +216,7 @@ function MetaGrid({ data, timeZone }) {
 }
 
 export default function MessageModal({ modal, onClose, timeZone }) {
+  const { resolved: locale } = useLocale()
   const [decoded, setDecoded] = React.useState(null)
   const [decoding, setDecoding] = React.useState(false)
   const [decodeError, setDecodeError] = React.useState('')
@@ -286,7 +285,7 @@ export default function MessageModal({ modal, onClose, timeZone }) {
 
         {!loading && !error && (
           <>
-            <MetaGrid data={data} timeZone={timeZone} />
+            <MetaGrid data={data} timeZone={timeZone} locale={locale} />
 
             <div className="flex items-center justify-between">
               <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">

src/ui/src/dashboard/OTLPLogRowModal.tsx

@@ -4,6 +4,7 @@ import { FloatingWindow } from '@/components/ui/floating-window'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { cn } from '@/lib/utils'
+import { useLocale } from '@/components/locale/locale-provider'
 
 function escapeHtml(str) {
   if (typeof str !== 'string') return str
@@ -79,23 +80,22 @@ function severityBadgeClass(label) {
   return 'border-border bg-card text-foreground'
 }
 
-function formatTs(val, timeZone) {
+function formatTs(val, locale, timeZone) {
   if (!val) return '—'
   try {
     const d = val instanceof Date ? val : new Date(val)
     if (Number.isNaN(d.getTime())) return String(val)
     const opts = {
       year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
+      month: 'numeric',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
       fractionalSecondDigits: 3,
-      hour12: false,
     }
     if (timeZone && timeZone !== 'local') opts.timeZone = timeZone
-    return new Intl.DateTimeFormat('en-GB', opts).format(d).replace(',', '')
+    return new Intl.DateTimeFormat(locale, opts).format(d)
   } catch {
     return String(val)
   }
@@ -120,6 +120,7 @@ const DETAIL_PRIORITY = [
 ]
 
 export default function OTLPLogRowModal({ modal, timeZone, onClose }) {
+  const { resolved: locale } = useLocale()
   const { modalKey, row } = modal
   const [jsonTab, setJsonTab] = useState('details')
 
@@ -134,7 +135,7 @@ export default function OTLPLogRowModal({ modal, timeZone, onClose }) {
       seen.add(k)
       const v = row[k]
       let display = v
-      if (k === 'timestamp' || k === 'TIMESTAMP') display = formatTs(v, timeZone)
+      if (k === 'timestamp' || k === 'TIMESTAMP') display = formatTs(v, locale, timeZone)
       else if (v != null && typeof v === 'object') display = JSON.stringify(v)
       else if (v != null) display = String(v)
       else display = '—'
@@ -159,7 +160,7 @@ export default function OTLPLogRowModal({ modal, timeZone, onClose }) {
     }
     const body = row?.body ?? row?.BODY ?? ''
     return { detailEntries: entries, jsonText: text, bodyText: String(body ?? '') }
-  }, [row, timeZone])
+  }, [row, timeZone, locale])
 
   const traceId = row?.trace_id ?? row?.TRACE_ID ?? ''
   const shortTrace =
@@ -200,7 +201,7 @@ export default function OTLPLogRowModal({ modal, timeZone, onClose }) {
               {sev}
             </span>
             <span className="font-mono text-muted-foreground">
-              {formatTs(row?.timestamp ?? row?.TIMESTAMP, timeZone)}
+              {formatTs(row?.timestamp ?? row?.TIMESTAMP, locale, timeZone)}
             </span>
           </div>
           {bodyText ? (

src/ui/src/dashboard/OTLPLogsTraceModal.tsx

@@ -5,6 +5,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { cn } from '@/lib/utils'
 import OTLPLogRowModal from './OTLPLogRowModal'
+import { useLocale } from '@/components/locale/locale-provider'
 
 /** OpenTelemetry SeverityNumber ranges (stable mapping when severity_text is empty). */
 function severityFromNumber(n) {
@@ -53,6 +54,7 @@ function rowTimestampMs(row) {
 }
 
 export default function OTLPLogsTraceModal({ modal, timeZone, onClose }) {
+  const { resolved: locale } = useLocale()
   const { modalKey, traceId, loading, items, error } = modal
   const [detailModal, setDetailModal] = useState(null)
 
@@ -69,16 +71,15 @@ export default function OTLPLogsTraceModal({ modal, timeZone, onClose }) {
       if (Number.isNaN(d.getTime())) return String(val)
       const opts = {
         year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
         fractionalSecondDigits: 3,
-        hour12: false,
       }
       if (timeZone && timeZone !== 'local') opts.timeZone = timeZone
-      return new Intl.DateTimeFormat('en-GB', opts).format(d).replace(',', '')
+      return new Intl.DateTimeFormat(locale, opts).format(d)
     } catch {
       return String(val)
     }

src/ui/src/dashboard/OTLPMetricsSeriesModal.tsx

@@ -20,6 +20,7 @@ import {
   normalizeOtlpMetricChartType,
   rowTimestampMs,
 } from './otlpMetricsSeriesChart'
+import { useLocale } from '@/components/locale/locale-provider'
 
 function formatValue(row) {
   const vd = row?.value_double ?? row?.VALUE_DOUBLE
@@ -30,6 +31,7 @@ function formatValue(row) {
 }
 
 export default function OTLPMetricsSeriesModal({ modal, timeZone, onClose }) {
+  const { resolved: locale } = useLocale()
   const { modalKey, metricName, loading, items, error } = modal
   const chartElRef = useRef(null)
   const disposeRef = useRef(null)
@@ -75,16 +77,15 @@ export default function OTLPMetricsSeriesModal({ modal, timeZone, onClose }) {
       if (Number.isNaN(d.getTime())) return String(val)
       const opts = {
         year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
         fractionalSecondDigits: 3,
-        hour12: false,
       }
       if (timeZone && timeZone !== 'local') opts.timeZone = timeZone
-      return new Intl.DateTimeFormat('en-GB', opts).format(d).replace(',', '')
+      return new Intl.DateTimeFormat(locale, opts).format(d)
     } catch {
       return String(val)
     }

src/ui/src/dashboard/OTLPTraceModal.tsx

@@ -7,6 +7,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
+import { useLocale } from '@/components/locale/locale-provider'
 
 function isEmptyParentSpanId(v) {
   if (v == null) return true
@@ -351,6 +352,7 @@ function TraceMinimap({ items, traceMinMs, rangeMs, dark }) {
 }
 
 export default function OTLPTraceModal({ modal, timeZone, onClose }) {
+  const { resolved: locale } = useLocale()
   const { modalKey, traceId, loading, items, error } = modal
   const byParent = useMemo(() => buildSpanForest(items), [items])
   const [selected, setSelected] = useState(null)
@@ -432,16 +434,15 @@ export default function OTLPTraceModal({ modal, timeZone, onClose }) {
       const d = new Date(ms)
       const opts = {
         year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
         fractionalSecondDigits: 3,
-        hour12: false,
       }
       if (timeZone && timeZone !== 'local') opts.timeZone = timeZone
-      return new Intl.DateTimeFormat('en-GB', opts).format(d).replace(',', '')
+      return new Intl.DateTimeFormat(locale, opts).format(d)
     } catch {
       return String(ms)
     }