[P2] Time/locale formatting consistency #110

New Issue

claude · 2026-04-01T22:54:37+02:00

claude commented

2026-04-01 22:54:37 +02:00

Parent Epic

Problem

The time range picker shows 1. Apr. 21:31 which is German date format. International teams will be confused. Timestamps and durations should be consistently formatted throughout the UI.

Current State

Time range picker: 1. Apr. 21:31 – now (German locale)
Exchange table timestamps: 2026-04-01 22:31:41 (ISO-ish, fine)
Audit log timestamps: 01/04/2026, 22:33:10 (DD/MM/YYYY, different from exchanges)
Durations: mix of 178ms, 5.76s, 321s (inconsistent units)
KPI values: 5.8s, 321s (raw seconds for large values — should be 5m 21s)

Proposed Solution

1. Locale-Aware Date/Time

Use Intl.DateTimeFormat with the browser's locale, or provide a locale setting in user preferences:

English (US): Apr 1, 9:31 PM
English (UK): 1 Apr, 21:31
German:       1. Apr., 21:31
ISO (fallback): 2026-04-01 21:31

2. Consistent Timestamp Format

Use one format everywhere. Recommendation:

Context	Format	Example
Table cells	Relative when < 1h, absolute otherwise	`3m ago` or `22:31:41`
Full timestamps	ISO with local time	`2026-04-01 22:31:41`
Tooltips	Full with timezone	`2026-04-01 22:31:41.504 UTC+2`

3. Human-Readable Durations

Large durations should break into units:

Raw	Display
178ms	178ms
5760ms	5.76s
321000ms	5m 21s
320968ms (P99)	5m 21s

The current 321s in the KPI strip is confusing — nobody thinks in "321 seconds."

Acceptance Criteria

All date/time displays use consistent locale-aware formatting
Durations > 60s display as Xm Ys format
Audit log and exchange timestamps use same format
Time range picker uses locale-appropriate date format

#65 (Format durations and latencies to user locale)

## Parent Epic #100 ## Problem The time range picker shows `1. Apr. 21:31` which is German date format. International teams will be confused. Timestamps and durations should be consistently formatted throughout the UI. ## Current State - Time range picker: `1. Apr. 21:31 – now` (German locale) - Exchange table timestamps: `2026-04-01 22:31:41` (ISO-ish, fine) - Audit log timestamps: `01/04/2026, 22:33:10` (DD/MM/YYYY, different from exchanges) - Durations: mix of `178ms`, `5.76s`, `321s` (inconsistent units) - KPI values: `5.8s`, `321s` (raw seconds for large values — should be `5m 21s`) ## Proposed Solution ### 1. Locale-Aware Date/Time Use `Intl.DateTimeFormat` with the browser's locale, or provide a locale setting in user preferences: ``` English (US): Apr 1, 9:31 PM English (UK): 1 Apr, 21:31 German: 1. Apr., 21:31 ISO (fallback): 2026-04-01 21:31 ``` ### 2. Consistent Timestamp Format Use one format everywhere. Recommendation: | Context | Format | Example | |---------|--------|---------| | Table cells | Relative when < 1h, absolute otherwise | `3m ago` or `22:31:41` | | Full timestamps | ISO with local time | `2026-04-01 22:31:41` | | Tooltips | Full with timezone | `2026-04-01 22:31:41.504 UTC+2` | ### 3. Human-Readable Durations Large durations should break into units: | Raw | Display | |-----|---------| | 178ms | 178ms | | 5760ms | 5.76s | | 321000ms | 5m 21s | | 320968ms (P99) | 5m 21s | The current `321s` in the KPI strip is confusing — nobody thinks in "321 seconds." ## Acceptance Criteria - [ ] All date/time displays use consistent locale-aware formatting - [ ] Durations > 60s display as `Xm Ys` format - [ ] Audit log and exchange timestamps use same format - [ ] Time range picker uses locale-appropriate date format ## Related - #65 (Format durations and latencies to user locale)

claude added the bug ui ux labels 2026-04-01 22:54:37 +02:00

claude referenced this issue

2026-04-01 22:56:35 +02:00

Epic: UX Audit — PMF Readiness for First Market Offer #100

claude commented

2026-04-01 23:11:25 +02:00

Design Specification

Create ui/src/utils/format.ts with shared formatting functions:

formatTimestamp(iso, 'full'|'short'|'time') — Uses Intl.DateTimeFormat with browser locale
formatDuration(ms) — <1s: "123ms", 1-60s: "1.23s", 60s-1h: "2m 15s", >1h: "1h 23m"
formatRelativeTime(iso) — "3m ago", "2h ago" with full timestamp tooltip
formatCount(n) — n.toLocaleString()

Replace 9+ local formatting functions across Dashboard.tsx, AuditLogPage.tsx, AgentHealth.tsx, AppConfigPage.tsx, LayoutShell.tsx, DashboardL3.tsx, DiagramNode.tsx, ExchangeHeader.tsx.

## Design Specification Create `ui/src/utils/format.ts` with shared formatting functions: - `formatTimestamp(iso, 'full'|'short'|'time')` — Uses `Intl.DateTimeFormat` with browser locale - `formatDuration(ms)` — `<1s: "123ms"`, `1-60s: "1.23s"`, `60s-1h: "2m 15s"`, `>1h: "1h 23m"` - `formatRelativeTime(iso)` — `"3m ago"`, `"2h ago"` with full timestamp tooltip - `formatCount(n)` — `n.toLocaleString()` Replace 9+ local formatting functions across Dashboard.tsx, AuditLogPage.tsx, AgentHealth.tsx, AppConfigPage.tsx, LayoutShell.tsx, DashboardL3.tsx, DiagramNode.tsx, ExchangeHeader.tsx.

claude referenced this issue

2026-04-03 18:19:04 +02:00

Route page stats: format durations and latencies to user locale #65

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cameleer/cameleer-server#110