fix(mobile): make i18n formatting Hermes-safe

apps/mobile/.oxlintrc.json

@@ -37,6 +37,13 @@
   },
   "ignorePatterns": ["dist/*", "node_modules/**"],
   "rules": {
+    "no-restricted-globals": [
+      "error",
+      {
+        "name": "Intl",
+        "message": "Use @/lib/intl-cache so Hermes support stays explicit and tested."
+      }
+    ],
     "no-restricted-imports": [
       "error",
       {
@@ -253,14 +260,24 @@
         "anti-slop/no-reflect-get": "off",
         "anti-slop/no-runtime-typeof": "off",
         "anti-slop/no-unknown-returns": "off",
+        "no-restricted-globals": "off",
         "zod-utils/no-inline-zod-schema": "off"
       }
     },
     {
-      "files": ["src/i18n/catalogs.ts"],
+      "files": ["src/i18n/catalogs.ts", "src/lib/relative-time-locales.ts"],
+      "rules": {
+        "@typescript-eslint/no-require-imports": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "unicorn/prefer-module": "off"
+      }
+    },
+    {
+      "files": ["src/lib/intl-cache.ts"],
       "rules": {
         "@typescript-eslint/no-require-imports": "off",
         "@typescript-eslint/no-var-requires": "off",
+        "no-restricted-globals": "off",
         "unicorn/prefer-module": "off"
       }
     },

apps/mobile/package.json

@@ -26,6 +26,11 @@
     "@expo-google-fonts/jetbrains-mono": "0.4.1",
     "@expo/app-integrity": "57.0.1",
     "@expo/react-native-action-sheet": "4.1.1",
+    "@formatjs/intl-durationformat": "^0.10.18",
+    "@formatjs/intl-listformat": "^8.3.13",
+    "@formatjs/intl-numberformat": "^9.4.0",
+    "@formatjs/intl-relativetimeformat": "^12.3.13",
+    "@formatjs/intl-segmenter": "^12.2.13",
     "@kilocode/app-shared": "workspace:*",
     "@kilocode/cloud-agent-sdk": "workspace:*",
     "@kilocode/event-service": "workspace:*",

apps/mobile/src/app/(app)/kiloclaw/[instance-id]/billing.tsx

@@ -23,7 +23,7 @@ import { useKiloClawBillingStatus } from '@/lib/hooks/use-kiloclaw-queries';
 import { formatBillingDate, formatRemainingDays } from '@/lib/hooks/use-kiloclaw-billing';
 import { useThemeColors } from '@/lib/hooks/use-theme-colors';
 import { useTRPC } from '@/lib/trpc';
-import { cn } from '@/lib/utils';
+import { capitalize, cn } from '@/lib/utils';
 
 function DetailRow({
   label,
@@ -132,8 +132,7 @@ function PlanDetails({
     return <FinalCommitTermDetails billing={billing} />;
   }
   if (billing.subscription) {
-    const planName =
-      billing.subscription.plan.charAt(0).toUpperCase() + billing.subscription.plan.slice(1);
+    const planName = capitalize(billing.subscription.plan);
     const cancelling = billing.subscription.cancelAtPeriodEnd;
     return (
       <View>
@@ -163,10 +162,7 @@ function PlanDetails({
     );
   }
   if (billing.earlybird) {
-    const daysText =
-      billing.earlybird.daysRemaining === 1
-        ? t('kiloclaw.billing.oneDayLeft')
-        : t('kiloclaw.billing.daysLeft', { count: billing.earlybird.daysRemaining });
+    const daysText = formatRemainingDays(billing.earlybird.daysRemaining);
     return (
       <View>
         <DetailRow label={t('kiloclaw.billing.plan')} value={t('kiloclaw.billing.earlybird')} />

apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/device-pairing.tsx

@@ -30,6 +30,7 @@ import {
   useKiloClawPairing,
 } from '@/lib/hooks/use-kiloclaw-queries';
 import { useThemeColors } from '@/lib/hooks/use-theme-colors';
+import { capitalize } from '@/lib/utils';
 
 const CHANNEL_LABELS = {
   telegram: 'Telegram',
@@ -38,6 +39,12 @@ const CHANNEL_LABELS = {
   github: 'GitHub',
 } satisfies Record<string, string>;
 
+function channelLabel(channel: string): string {
+  return Object.hasOwn(CHANNEL_LABELS, channel)
+    ? CHANNEL_LABELS[channel as keyof typeof CHANNEL_LABELS]
+    : capitalize(channel);
+}
+
 export default function DevicePairingScreen() {
   const { 'instance-id': instanceId } = useLocalSearchParams<{ 'instance-id': string }>();
   const instanceContext = useInstanceContext(instanceId);
@@ -128,9 +135,7 @@ export default function DevicePairingScreen() {
   const hasAnyRequests = channelRequests.length > 0 || deviceRequests.length > 0;
 
   function handleApproveChannel(channel: string, code: string) {
-    const label = Object.hasOwn(CHANNEL_LABELS, channel)
-      ? CHANNEL_LABELS[channel as keyof typeof CHANNEL_LABELS]
-      : channel.charAt(0).toUpperCase() + channel.slice(1);
+    const label = channelLabel(channel);
     Alert.alert(
       t('kiloclaw.devicePairing.approveTitle'),
       t('kiloclaw.devicePairing.approveMessage', { label, code }),
@@ -212,11 +217,7 @@ export default function DevicePairingScreen() {
                         <MessageSquare size={18} color={colors.foreground} />
                       )}
                       <View className="flex-1 gap-0.5">
-                        <Text className="text-sm font-medium">
-                          {Object.hasOwn(CHANNEL_LABELS, request.channel)
-                            ? CHANNEL_LABELS[request.channel as keyof typeof CHANNEL_LABELS]
-                            : request.channel.charAt(0).toUpperCase() + request.channel.slice(1)}
-                        </Text>
+                        <Text className="text-sm font-medium">{channelLabel(request.channel)}</Text>
                         <View className="flex-row items-center gap-1.5">
                           <View className="rounded bg-muted px-1.5 py-0.5">
                             <Text className="text-xs font-mono text-muted-foreground">

apps/mobile/src/components/agents/attachment-chip-description.ts

@@ -1,6 +1,5 @@
-import { formatFileSize } from '@kilocode/kilo-chat';
-
 import { i18n } from '@/i18n';
+import { formatFileSize, formatPercent } from '@/lib/format';
 
 export type ChipStateInput = {
   filename: string;
@@ -51,7 +50,7 @@ export function progressLabel(progress: number | null): string {
   if (progress >= 1) {
     return i18n.t('agentChat.attachmentPreview.uploaded');
   }
-  return `${Math.round(progress * 100)}%`;
+  return formatPercent(progress * 100, i18n.language);
 }
 
 /**
@@ -85,7 +84,7 @@ export function describeAttachmentChip(state: ChipStateInput): ChipDescription {
 
   return {
     filename,
-    sizeText: formatFileSize(size),
+    sizeText: formatFileSize(size, i18n.language),
     progressText,
     message,
     accessibilityLabel:

apps/mobile/src/components/agents/child-session-section.tsx

@@ -71,9 +71,9 @@ export function ChildSessionSection({
   return (
     <Animated.View
       layout={LinearTransition.duration(200)}
-      className="overflow-hidden rounded-r-lg"
+      className="overflow-hidden rounded-lg"
       // eslint-disable-next-line react-native/no-inline-styles -- dynamic border color
-      style={{ borderLeftWidth: 2, borderLeftColor: borderColor }}
+      style={{ borderStartWidth: 2, borderStartColor: borderColor }}
     >
       <Pressable
         className="flex-row items-center gap-2 px-3 py-2 active:bg-secondary"

apps/mobile/src/components/agents/context-usage-display.test.ts

@@ -55,10 +55,10 @@ describe('formatCompactTokens', () => {
   it('formats below one thousand, thousands, and millions', () => {
     expect(formatCompactTokens(0)).toBe('0');
     expect(formatCompactTokens(999)).toBe('999');
-    expect(formatCompactTokens(1000)).toBe('1.0K');
+    expect(formatCompactTokens(1000)).toBe('1K');
     expect(formatCompactTokens(32_418)).toBe('32.4K');
     expect(formatCompactTokens(1500)).toBe('1.5K');
-    expect(formatCompactTokens(995_000)).toBe('995.0K');
+    expect(formatCompactTokens(995_000)).toBe('995K');
     expect(formatCompactTokens(1_200_000)).toBe('1.2M');
   });
 });

apps/mobile/src/components/agents/context-usage-display.ts

@@ -1,14 +1,12 @@
 import { i18n } from '@/i18n';
-import { formatCurrency } from '@/lib/format';
+import { formatCurrency, formatNumber, formatPercent } from '@/lib/format';
 import { type SessionContextInfo } from '@/lib/session-context-info';
 
 import { formatSessionTotalCost } from './session-list-helpers';
 import { formatSpokenCost } from './session-row-accessibility-label';
 
 export type ContextTone = 'primary' | 'warning' | 'destructive' | 'neutral';
 
-const NUMBER_FORMAT = new Intl.NumberFormat('en-US');
-
 const WARNING_TONE_THRESHOLD = 75;
 const DESTRUCTIVE_TONE_THRESHOLD = 90;
 
@@ -18,20 +16,17 @@ export function formatCompactTokens(tokens: number): string {
   if (!Number.isFinite(tokens) || tokens < 0) {
     return '0';
   }
-  if (tokens < 1000) {
-    return String(Math.trunc(tokens));
-  }
-  if (tokens < 1_000_000) {
-    return `${(tokens / 1000).toFixed(1)}K`;
-  }
-  return `${(tokens / 1_000_000).toFixed(1)}M`;
+  return formatNumber(Math.trunc(tokens), i18n.language, {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  });
 }
 
 export function formatExactTokens(tokens: number): string {
   if (!Number.isFinite(tokens) || tokens < 0) {
     return '0';
   }
-  return NUMBER_FORMAT.format(Math.trunc(tokens));
+  return formatNumber(Math.trunc(tokens), i18n.language);
 }
 
 export function formatCost(cost: number): string {
@@ -113,7 +108,7 @@ export function getHeaderPillContent({
     const tone = getContextTone(info.percentage);
     const primary =
       info.percentage !== undefined
-        ? `${info.percentage}%`
+        ? formatPercent(info.percentage, i18n.language)
         : formatCompactTokens(info.contextTokens);
     const secondary = formatSessionTotalCost(totalCostMicrodollars);
     return {
@@ -183,9 +178,9 @@ export function getContextSheetContent(
     windowUnavailable: false,
     windowUnavailableLabel: i18n.t('agentChat.contextUsage.windowUnavailable'),
     capacityKnown: true,
-    percentage: `${realPercentage}%`,
+    percentage: formatPercent(realPercentage, i18n.language),
     remainingTokens: formatExactTokens(remaining),
-    remainingPercentage: `${remainingPercentage}%`,
+    remainingPercentage: formatPercent(remainingPercentage, i18n.language),
     cost,
     tone,
   };
@@ -216,7 +211,7 @@ export function getMetricsAccessibilityLabel({
       : `${i18n.t('agentChat.contextUsage.tokensUsage', {
           used: formatExactTokens(info.contextTokens),
           window: formatExactTokens(info.contextWindow),
-          percentage: info.percentage ?? 0,
+          percentage: formatPercent(info.percentage ?? 0, i18n.language),
         })}${costPart}.`;
   return `${body}${tapPart}`;
 }

apps/mobile/src/components/agents/markdown-a11y.test.ts

@@ -43,15 +43,15 @@ describe('extractNodeText', () => {
 
 describe('linearRowLabel', () => {
   it('pairs each non-empty cell with its header', () => {
-    expect(linearRowLabel(['Name', 'Age'], ['John', '30'])).toBe('Name: John, Age: 30');
+    expect(linearRowLabel(['Name', 'Age'], ['John', '30'])).toBe('Name: John and Age: 30');
   });
 
   it('skips empty cells', () => {
     expect(linearRowLabel(['Name', 'Age'], ['John', ''])).toBe('Name: John');
   });
 
   it('keeps cells without a header as bare text', () => {
-    expect(linearRowLabel(['Name'], ['John', 'extra'])).toBe('Name: John, extra');
+    expect(linearRowLabel(['Name'], ['John', 'extra'])).toBe('Name: John and extra');
   });
 
   it('handles fewer cells than headers', () => {

apps/mobile/src/components/agents/markdown-a11y.ts

@@ -3,6 +3,9 @@
  * discriminant to narrow string/number leaves or generic prop values. */
 import { isValidElement, type ReactNode } from 'react';
 
+import { i18n } from '@/i18n';
+import { formatList } from '@/lib/format';
+
 /**
  * Spoken text for a rendered markdown node. Strings and numbers are returned
  * verbatim; arrays are joined with a single space; elements use their explicit
@@ -41,7 +44,7 @@ export function linearRowLabel(header: string[], cells: string[]): string {
       parts.push(headerText ? `${headerText}: ${cellText}` : cellText);
     }
   }
-  return parts.join(', ');
+  return formatList(parts, i18n.language);
 }
 
 /**

apps/mobile/src/components/agents/markdown-palette.ts

@@ -100,9 +100,9 @@ export function getMarkdownStyles(palette: MarkdownPalette): MarkedStyles {
       marginVertical: 4,
     },
     blockquote: {
-      borderLeftWidth: 3,
-      borderLeftColor: borderColor,
-      paddingLeft: 12,
+      borderStartWidth: 3,
+      borderStartColor: borderColor,
+      paddingStart: 12,
       marginVertical: 4,
     },
     // react-native-marked maps `list` onto each item's marker box, not a list

apps/mobile/src/components/agents/markdown-table.test.ts

@@ -273,7 +273,7 @@ describe('MarkdownTable table semantics', () => {
     });
 
     expect(accessibilityLabelOf(findFirst(element, isAccessibleLabelElement))).toBe(
-      'Name: John, Age: 30'
+      'Name: John and Age: 30'
     );
     const cells = findAll(element, isTableCell);
     expect(cells).toHaveLength(2);

apps/mobile/src/components/agents/markdown-table.tsx

@@ -32,6 +32,7 @@ import { scheduleOnRN } from 'react-native-worklets';
 
 import { moveA11yFocus } from '@/lib/a11y/announce';
 import { i18n } from '@/i18n';
+import { formatNumber } from '@/lib/format';
 import { useThemeColors } from '@/lib/hooks/use-theme-colors';
 
 import { containsPressable, extractNodeText, linearRowLabel } from './markdown-a11y';
@@ -60,16 +61,20 @@ function getColumnCount(header: ReactNode[][], rows: ReactNode[][][]): number {
   return columnCount;
 }
 
-function formatCount(count: number, singular: string, plural: string): string {
-  return `${count} ${count === 1 ? singular : plural}`;
+function formatCount(count: number, key: 'columnCount' | 'rowCount'): string {
+  const unit =
+    key === 'columnCount'
+      ? i18n.t('agentChat.markdownTable.columnCount', { count })
+      : i18n.t('agentChat.markdownTable.rowCount', { count });
+  return `${formatNumber(count, i18n.language)} ${unit}`;
 }
 
 function formatTableSummary(columnCount: number, rowCount: number): string {
-  return `${formatCount(columnCount, i18n.t('agentChat.markdownTable.column'), i18n.t('agentChat.markdownTable.columns'))} · ${formatCount(rowCount, i18n.t('agentChat.markdownTable.row'), i18n.t('agentChat.markdownTable.rows'))}`;
+  return `${formatCount(columnCount, 'columnCount')} · ${formatCount(rowCount, 'rowCount')}`;
 }
 
 function formatChipAccessibilityLabel(columnCount: number, rowCount: number): string {
-  return `${i18n.t('agentChat.markdownTable.title')}, ${formatCount(columnCount, i18n.t('agentChat.markdownTable.column'), i18n.t('agentChat.markdownTable.columns'))}, ${formatCount(rowCount, i18n.t('agentChat.markdownTable.row'), i18n.t('agentChat.markdownTable.rows'))}, ${i18n.t('agentChat.markdownTable.opensFullScreen')}`;
+  return `${i18n.t('agentChat.markdownTable.title')}, ${formatCount(columnCount, 'columnCount')}, ${formatCount(rowCount, 'rowCount')}, ${i18n.t('agentChat.markdownTable.opensFullScreen')}`;
 }
 
 // Markdown tables never fit inside a chat bubble: a horizontal ScrollView in a

apps/mobile/src/components/agents/message-details-content.ts

@@ -2,6 +2,7 @@ import { type StoredMessage } from '@kilocode/cloud-agent-sdk';
 
 import { i18n } from '@/i18n';
 import { type SessionModelOption } from '@/lib/hooks/use-session-model-options';
+import { dateTimeFormat } from '@/lib/intl-cache';
 
 import { collectCopyableText } from './collect-copyable-text';
 import { formatCost } from './context-usage-display';
@@ -24,11 +25,6 @@ type MessageDetailsContent = {
   canSelectText: boolean;
 };
 
-const SENT_TIME_FORMATTER = new Intl.DateTimeFormat(undefined, {
-  dateStyle: 'medium',
-  timeStyle: 'short',
-});
-
 /**
  * Pure projection of a StoredMessage into the details-sheet fields.
  * Unit-tested for happy / empty visibility rules; the sheet component
@@ -155,5 +151,8 @@ export function formatMessageSentTime(created: number | undefined | null): strin
   if (Number.isNaN(date.getTime())) {
     return null;
   }
-  return SENT_TIME_FORMATTER.format(date);
+  return dateTimeFormat(i18n.language, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(date);
 }