fix: use locale-aware decimal separator in trace duration formatting

[heiwen]

Use Intl.NumberFormat to detect the browser's decimal separator and replace the hardcoded . from pretty-ms output, so duration and token count formatting use consistent locale conventions.

Closes #292

Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Duration display now respects locale-specific decimal separator settings, ensuring correct formatting for users across different regions.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

📝 Walkthrough

Walkthrough

A helper function was added to derive locale-specific decimal separators using Intl.NumberFormat. The formatDuration() function was updated to post-process prettyMs output, replacing the hardcoded . decimal separator with the appropriate locale-specific separator.

Changes

Cohort / File(s)	Summary
Traces Utils Locale Formatting apps/console/app/routes/_shell.agent.$agentSlug.branch.$branchSlug.traces/utils.ts	Added getDecimalSeparator() helper using Intl.NumberFormat to detect locale-specific decimal separators. Updated formatDuration() to replace hardcoded . with the locale decimal separator in duration output.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• turisanapo

Poem

🐰 wiggles nose with glee
A dot once danced in two, three ways,
Now locales shine through all our days!
From Italy to Germany's land,
Decimal friends hold hand in hand! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: making duration formatting locale-aware by using the correct decimal separator.
Linked Issues check	✅ Passed	The code changes directly address issue #292 by implementing locale-aware decimal separator detection and applying it to duration formatting, making it consistent with token count formatting.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the locale-aware decimal separator in trace duration formatting; no unrelated modifications are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude-issue-292-20260319-0814

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

apps/console/app/routes/_shell.agent.$agentSlug.branch.$branchSlug.traces/utils.ts (1)

4-10: Consider memoizing the decimal separator.

getDecimalSeparator() creates a new Intl.NumberFormat instance on each invocation. Since the locale doesn't change during a session, memoizing the result avoids repeated object allocations—particularly relevant in list views that render many trace items.

♻️ Proposed memoization

-function getDecimalSeparator(): string {
-  return (
-    new Intl.NumberFormat(undefined)
-      .formatToParts(1.1)
-      .find((p) => p.type === "decimal")?.value ?? "."
-  );
-}
+const getDecimalSeparator = (() => {
+  let cached: string | undefined;
+  return (): string => {
+    if (cached === undefined) {
+      cached =
+        new Intl.NumberFormat(undefined)
+          .formatToParts(1.1)
+          .find((p) => p.type === "decimal")?.value ?? ".";
+    }
+    return cached;
+  };
+})();

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@apps/console/app/routes/_shell.agent`.$agentSlug.branch.$branchSlug.traces/utils.ts
around lines 4 - 10, getDecimalSeparator currently allocates a new
Intl.NumberFormat on every call; memoize its result by computing the decimal
separator once (e.g., a module-level constant or a lazy-initialized variable)
and return that cached value on subsequent calls to avoid repeated
Intl.NumberFormat creation in hot paths; update the getDecimalSeparator function
to use the cached value while preserving the existing logic (calling
Intl.NumberFormat(undefined).formatToParts(1.1).find(...) ?? ".") and the same
fallback.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@apps/console/app/routes/_shell.agent`.$agentSlug.branch.$branchSlug.traces/utils.ts:
- Around line 4-10: getDecimalSeparator currently allocates a new
Intl.NumberFormat on every call; memoize its result by computing the decimal
separator once (e.g., a module-level constant or a lazy-initialized variable)
and return that cached value on subsequent calls to avoid repeated
Intl.NumberFormat creation in hot paths; update the getDecimalSeparator function
to use the cached value while preserving the existing logic (calling
Intl.NumberFormat(undefined).formatToParts(1.1).find(...) ?? ".") and the same
fallback.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e70f6919-fcec-4307-bd82-f1c414c6fd79

📥 Commits

Reviewing files that changed from the base of the PR and between ad55514 and 31639bc.

📒 Files selected for processing (1)

• apps/console/app/routes/_shell.agent.$agentSlug.branch.$branchSlug.traces/utils.ts