Add i18n foundation and translations (#1027)

* feat: add i18n foundation

* feat: localize sessions sidebar

* Localize multirun/scheduled tasks and fix dialog dropdown interactions

* localize git sidebar surface and add zh-CN keys

* feat(ui): localize context panel, diff/plan views, and context sidebar content

* fix(config): resolve user config home via fs/home before embedded home

* localize header/chat UI and complete model/worktree panel strings

* localize worktree + github issue/pr dialog flows

* localize settings sections and split settings i18n dictionaries

* localize additional settings sections and sidebars

* localize more settings pages and dialogs

* fix settings select trigger localization

* localize tunnel settings ui surface

* localize additional settings sections

* localize keyboard shortcuts labels in settings

* localize terminal and utility dialogs surfaces

* feat(i18n): localize remaining UI strings

* Add Ukrainian locale

* Add Spanish locale

* Add Brazilian Portuguese locale

* Polish locale translations

packages/ui/src/components/sections/usage/PaceIndicator.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { cn } from '@/lib/utils';
 import type { PaceInfo } from '@/lib/quota';
 import { getPaceStatusColor, formatRemainingTime } from '@/lib/quota';
+import { useI18n } from '@/lib/i18n';
 
 interface PaceIndicatorProps {
   paceInfo: PaceInfo;
@@ -19,22 +20,23 @@ export const PaceIndicator: React.FC<PaceIndicatorProps> = ({
   className,
   compact = false,
 }) => {
+  const { t } = useI18n();
   const statusColor = getPaceStatusColor(paceInfo.status);
 
   const statusLabel = React.useMemo(() => {
-    switch (paceInfo.status) {
+      switch (paceInfo.status) {
       case 'on-track':
-        return 'On track';
+        return t('settings.usage.pace.status.onTrack');
       case 'slightly-fast':
-        return 'Slightly fast';
+        return t('settings.usage.pace.status.slightlyFast');
       case 'too-fast':
-        return 'Too fast';
+        return t('settings.usage.pace.status.tooFast');
       case 'exhausted':
-        return 'Used up';
-    }
-  }, [paceInfo.status]);
+        return t('settings.usage.pace.status.usedUp');
+      }
+  }, [paceInfo.status, t]);
 
-  const predictionTooltip = `Predicted usage at window end based on current pace: ${paceInfo.predictText}`;
+  const predictionTooltip = t('settings.usage.pace.predictionTooltip', { prediction: paceInfo.predictText });
 
   if (compact) {
     return (
@@ -50,9 +52,9 @@ export const PaceIndicator: React.FC<PaceIndicatorProps> = ({
           title={paceInfo.isExhausted ? undefined : predictionTooltip}
         >
           {paceInfo.isExhausted ? (
-            <>Wait {formatRemainingTime(paceInfo.remainingSeconds)}</>
+            <>{t('settings.usage.pace.wait', { duration: formatRemainingTime(paceInfo.remainingSeconds) })}</>
           ) : (
-            <>Pred: {paceInfo.predictText}</>
+            <>{t('settings.usage.pace.prediction', { prediction: paceInfo.predictText })}</>
           )}
         </span>
       </div>
@@ -64,7 +66,7 @@ export const PaceIndicator: React.FC<PaceIndicatorProps> = ({
       <div className="flex items-center gap-1.5">
         {!paceInfo.isExhausted && (
           <span className="typography-micro text-muted-foreground">
-            Pace: {paceInfo.paceRateText}
+            {t('settings.usage.pace.rate', { rate: paceInfo.paceRateText })}
           </span>
         )}
       </div>
@@ -76,12 +78,12 @@ export const PaceIndicator: React.FC<PaceIndicatorProps> = ({
           {paceInfo.isExhausted ? (
             <>
               <span className="font-medium">{statusLabel}</span>
-              <span className="text-muted-foreground"> · Wait </span>
+              <span className="text-muted-foreground">{t('settings.usage.pace.waitSeparator')}</span>
               <span className="font-medium">{formatRemainingTime(paceInfo.remainingSeconds)}</span>
             </>
           ) : (
             <span title={predictionTooltip}>
-              <span className="text-muted-foreground">Pred: </span>
+              <span className="text-muted-foreground">{t('settings.usage.pace.predictionLabel')}</span>
               <span className="font-medium">{paceInfo.predictText}</span>
             </span>
           )}

packages/ui/src/components/sections/usage/UsagePage.tsx

@@ -15,6 +15,7 @@ import { RiArrowDownSLine, RiArrowRightSLine, RiInformationLine } from '@remixic
 import type { UsageWindows, QuotaProviderId } from '@/types';
 import { getAllModelFamilies, getDisplayModelName, sortModelFamilies, groupModelsByFamilyWithGetter } from '@/lib/quota/model-families';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useI18n } from '@/lib/i18n';
 
 const formatTime = (timestamp: number | null) => {
   if (!timestamp) return '-';
@@ -34,6 +35,7 @@ interface ModelInfo {
 }
 
 export const UsagePage: React.FC = () => {
+  const { t } = useI18n();
   const results = useQuotaStore((state) => state.results);
   const selectedProviderId = useQuotaStore((state) => state.selectedProviderId);
   const setSelectedProvider = useQuotaStore((state) => state.setSelectedProvider);
@@ -70,7 +72,7 @@ export const UsagePage: React.FC = () => {
   const selectedResult = results.find((entry) => entry.providerId === selectedProviderId) ?? null;
 
   const providerMeta = QUOTA_PROVIDERS.find((provider) => provider.id === selectedProviderId);
-  const providerName = providerMeta?.name ?? selectedProviderId ?? 'Usage';
+  const providerName = providerMeta?.name ?? selectedProviderId ?? t('settings.usage.sidebar.title');
   const usage = selectedResult?.usage;
   const showInDropdown = selectedProviderId ? dropdownProviderIds.includes(selectedProviderId) : false;
   const handleDropdownToggle = React.useCallback((enabled: boolean) => {
@@ -141,8 +143,8 @@ export const UsagePage: React.FC = () => {
 
   if (!selectedProviderId) {
     return (
-      <div className="flex h-full items-center justify-center text-muted-foreground">
-        <p className="typography-body">Select a provider to view usage details.</p>
+        <div className="flex h-full items-center justify-center text-muted-foreground">
+        <p className="typography-body">{t('settings.usage.page.empty.selectProvider')}</p>
       </div>
     );
   }
@@ -156,13 +158,13 @@ export const UsagePage: React.FC = () => {
           <ProviderLogo providerId={selectedProviderId} className="h-5 w-5 shrink-0" />
           <div className="min-w-0">
             <h2 className="typography-ui-header font-semibold text-foreground truncate">
-              {providerName} Usage
+              {t('settings.usage.page.header.providerUsage', { provider: providerName })}
             </h2>
             <p className="typography-meta text-muted-foreground truncate">
               {isLoading ? (
-                <span className="animate-pulse">Refreshing usage...</span>
+                <span className="animate-pulse">{t('settings.usage.page.header.refreshing')}</span>
               ) : (
-                `Last updated: ${formatTime(lastUpdated)}`
+                t('settings.usage.page.header.lastUpdated', { time: formatTime(lastUpdated) })
               )}
             </p>
           </div>
@@ -183,19 +185,19 @@ export const UsagePage: React.FC = () => {
               }
             }}
           >
-            <Checkbox
-              checked={showInDropdown}
-              onChange={handleDropdownToggle}
-              ariaLabel="Show in header menu"
-            />
-            <div className="flex min-w-0 items-center gap-1.5">
-              <span className="typography-ui-label text-foreground">Show in Header Menu</span>
+              <Checkbox
+                checked={showInDropdown}
+                onChange={handleDropdownToggle}
+                ariaLabel={t('settings.usage.page.options.showInHeaderAria')}
+              />
+              <div className="flex min-w-0 items-center gap-1.5">
+              <span className="typography-ui-label text-foreground">{t('settings.usage.page.options.showInHeader')}</span>
               <Tooltip delayDuration={1000}>
                 <TooltipTrigger asChild>
                   <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
                 </TooltipTrigger>
                 <TooltipContent sideOffset={8} className="max-w-xs">
-                  When enabled, this provider's usage will be visible in the quick access dropdown menu in the app header.
+                  {t('settings.usage.page.options.showInHeaderTooltip')}
                 </TooltipContent>
               </Tooltip>
             </div>
@@ -205,22 +207,22 @@ export const UsagePage: React.FC = () => {
         {/* State Messages */}
         {!selectedResult && (
           <div className="mb-8 px-2">
-            <p className="typography-ui-label text-foreground">No usage data available yet.</p>
+            <p className="typography-ui-label text-foreground">{t('settings.usage.page.state.noData')}</p>
           </div>
         )}
 
         {error && (
           <div className="mb-8 rounded-lg border border-[var(--status-error-border)] bg-[var(--status-error-background)] px-4 py-3">
-            <p className="typography-ui-label font-medium text-[var(--status-error)]">Failed to refresh usage data</p>
+            <p className="typography-ui-label font-medium text-[var(--status-error)]">{t('settings.usage.page.state.refreshFailedTitle')}</p>
             <p className="typography-meta text-[var(--status-error)]/80 mt-1">{error}</p>
           </div>
         )}
 
         {selectedResult && !selectedResult.configured && (
           <div className="mb-8 rounded-lg border border-[var(--status-warning-border)] bg-[var(--status-warning-background)] px-4 py-3">
-            <p className="typography-ui-label font-medium text-[var(--status-warning)]">Provider not configured</p>
+            <p className="typography-ui-label font-medium text-[var(--status-warning)]">{t('settings.usage.page.state.providerNotConfiguredTitle')}</p>
             <p className="typography-meta text-[var(--status-warning)]/80 mt-1">
-              Add credentials in the Providers tab to enable usage tracking.
+              {t('settings.usage.page.state.providerNotConfiguredDescription')}
             </p>
           </div>
         )}
@@ -242,7 +244,7 @@ export const UsagePage: React.FC = () => {
         {providerModels.length > 0 && (
           <div className="mb-8">
             <div className="mb-1 px-1">
-              <h3 className="typography-ui-header font-medium text-foreground">Model Quotas</h3>
+              <h3 className="typography-ui-header font-medium text-foreground">{t('settings.usage.page.section.modelQuotas')}</h3>
             </div>
 
             <div className="space-y-3">
@@ -314,7 +316,7 @@ export const UsagePage: React.FC = () => {
                     >
                       <CollapsibleTrigger className="flex w-full items-center justify-between py-0.5 group">
                         <div className="flex items-center gap-1.5 text-left">
-                          <span className="typography-ui-label font-normal text-foreground">Other Models</span>
+                          <span className="typography-ui-label font-normal text-foreground">{t('settings.usage.page.section.otherModels')}</span>
                           <span className="typography-micro text-muted-foreground">
                             ({otherModels.length})
                           </span>
@@ -358,8 +360,8 @@ export const UsagePage: React.FC = () => {
         {selectedResult?.configured && usage && Object.keys(usage.windows ?? {}).length === 0 &&
           providerModels.length === 0 && (
           <div className="mb-8 px-2">
-            <p className="typography-ui-label text-foreground">No quota windows reported</p>
-            <p className="typography-meta text-muted-foreground mt-1">This provider does not currently report any rate limits or usage quotas.</p>
+            <p className="typography-ui-label text-foreground">{t('settings.usage.page.state.noQuotaWindowsTitle')}</p>
+            <p className="typography-meta text-muted-foreground mt-1">{t('settings.usage.page.state.noQuotaWindowsDescription')}</p>
           </div>
         )}
 

packages/ui/src/components/sections/usage/UsageSidebar.tsx

@@ -10,6 +10,7 @@ import { QUOTA_PROVIDERS, resolveUsageTone } from '@/lib/quota';
 import { useQuotaStore } from '@/stores/useQuotaStore';
 import { updateDesktopSettings } from '@/lib/persistence';
 import { RiRefreshLine } from '@remixicon/react';
+import { useI18n } from '@/lib/i18n';
 
 interface UsageSidebarProps {
   onItemSelect?: () => void;
@@ -27,6 +28,7 @@ const getUsagePercent = (usage: { windows?: Record<string, { usedPercent: number
 };
 
 export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
+  const { t } = useI18n();
   const results = useQuotaStore((state) => state.results);
   const selectedProviderId = useQuotaStore((state) => state.selectedProviderId);
   const setSelectedProvider = useQuotaStore((state) => state.setSelectedProvider);
@@ -79,9 +81,9 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
   return (
     <div className={cn('flex h-full flex-col', bgClass)}>
       <div className="border-b px-3 pt-4 pb-3">
-        <h2 className="text-base font-semibold text-foreground mb-3">Usage</h2>
+        <h2 className="text-base font-semibold text-foreground mb-3">{t('settings.usage.sidebar.title')}</h2>
         <div className="flex items-center justify-between gap-2">
-          <span className="typography-meta text-muted-foreground">Total {QUOTA_PROVIDERS.length}</span>
+          <span className="typography-meta text-muted-foreground">{t('settings.usage.sidebar.total', { count: QUOTA_PROVIDERS.length })}</span>
           <div className="flex items-center gap-2">
             <Tooltip delayDuration={700}>
               <TooltipTrigger asChild>
@@ -89,12 +91,12 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
                   <Checkbox
                     checked={usageAutoRefresh}
                     onChange={handleUsageAutoRefreshChange}
-                    ariaLabel="Toggle auto refresh"
+                    ariaLabel={t('settings.usage.sidebar.actions.toggleAutoRefreshAria')}
                   />
                 </span>
               </TooltipTrigger>
               <TooltipContent side="bottom">
-                Auto-refresh usage data at set interval
+                {t('settings.usage.sidebar.tooltip.autoRefresh')}
               </TooltipContent>
             </Tooltip>
             <Select
@@ -103,7 +105,7 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
               disabled={!usageAutoRefresh}
             >
               <SelectTrigger className="w-fit">
-                <SelectValue placeholder="Interval" />
+                <SelectValue placeholder={t('settings.usage.sidebar.field.intervalPlaceholder')} />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="30000">30s</SelectItem>
@@ -115,8 +117,8 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
               variant="ghost"
               className="h-7 w-7 px-0 text-muted-foreground"
               onClick={() => fetchAllQuotas()}
-              aria-label="Refresh usage"
-              title="Refresh usage"
+              aria-label={t('settings.usage.sidebar.actions.refreshAria')}
+              title={t('settings.usage.sidebar.actions.refreshTitle')}
               disabled={isLoading}
             >
               <RiRefreshLine className={cn('h-3.5 w-3.5', isLoading && 'animate-spin')} />
@@ -124,14 +126,14 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
           </div>
         </div>
         <div className="mt-2 flex items-center justify-between gap-2">
-          <span className="typography-micro text-muted-foreground">Display</span>
+          <span className="typography-micro text-muted-foreground">{t('settings.usage.sidebar.field.display')}</span>
           <Select value={usageDisplayMode} onValueChange={handleUsageDisplayModeChange}>
             <SelectTrigger className="w-fit">
-              <SelectValue placeholder="Display mode" />
+              <SelectValue placeholder={t('settings.usage.sidebar.field.displayModePlaceholder')} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="usage">Usage</SelectItem>
-              <SelectItem value="remaining">Quota remaining</SelectItem>
+              <SelectItem value="usage">{t('settings.usage.sidebar.field.displayModeUsage')}</SelectItem>
+              <SelectItem value="remaining">{t('settings.usage.sidebar.field.displayModeRemaining')}</SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -175,7 +177,7 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
                   {provider.name}
                 </span>
               {!configured && (
-                <span className="typography-micro text-muted-foreground/60 flex-shrink-0">Not set</span>
+                <span className="typography-micro text-muted-foreground/60 flex-shrink-0">{t('settings.usage.sidebar.status.notSet')}</span>
               )}
             </button>
           </div>