Complete client UI i18n migration

Adds client-side i18n support, language settings, translated UI copy, and locale parity coverage.

packages/app/src/components/context-window-meter.tsx

@@ -1,6 +1,7 @@
 import { Pressable, Text, View } from "react-native";
 import Svg, { Circle } from "react-native-svg";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useTranslation } from "react-i18next";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface ContextWindowMeterProps {
@@ -81,6 +82,7 @@ export function ContextWindowMeter({
   showPercentage = false,
 }: ContextWindowMeterProps) {
   const { theme } = useUnistyles();
+  const { t } = useTranslation();
   const percentage = getUsagePercentage(maxTokens, usedTokens);
 
   if (percentage === null) {
@@ -106,7 +108,9 @@ export function ContextWindowMeter({
         <Pressable
           style={containerStyle}
           accessibilityRole="image"
-          accessibilityLabel={`Context window ${roundedPercentage}% used`}
+          accessibilityLabel={t("contextWindow.accessibility", {
+            percentage: roundedPercentage,
+          })}
         >
           <Svg
             width={svgSize}
@@ -143,13 +147,20 @@ export function ContextWindowMeter({
       </TooltipTrigger>
       <TooltipContent side="top" align="center" offset={8}>
         <View style={styles.tooltipContent}>
-          <Text style={styles.tooltipTitle}>Context window</Text>
-          <Text style={styles.tooltipText}>{`${roundedPercentage}% used`}</Text>
-          <Text
-            style={styles.tooltipDetail}
-          >{`${formatTokenCount(usedTokens)} / ${formatTokenCount(maxTokens)} tokens`}</Text>
+          <Text style={styles.tooltipTitle}>{t("contextWindow.title")}</Text>
+          <Text style={styles.tooltipText}>
+            {t("contextWindow.used", { percentage: roundedPercentage })}
+          </Text>
+          <Text style={styles.tooltipDetail}>
+            {t("contextWindow.tokens", {
+              used: formatTokenCount(usedTokens),
+              max: formatTokenCount(maxTokens),
+            })}
+          </Text>
           {formattedSessionCost ? (
-            <Text style={styles.tooltipDetail}>{`Session cost ${formattedSessionCost}`}</Text>
+            <Text style={styles.tooltipDetail}>
+              {t("contextWindow.sessionCost", { cost: formattedSessionCost })}
+            </Text>
           ) : null}
         </View>
       </TooltipContent>