Complete client UI i18n migration

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

packages/app/src/components/command-center.tsx

@@ -8,6 +8,7 @@ import {
   type PressableStateCallbackType,
 } from "react-native";
 import { memo, useCallback, useEffect, useMemo, useRef, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 import { Home, Plus, Settings } from "lucide-react-native";
 import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
 import { useCommandCenter } from "@/hooks/use-command-center";
@@ -202,6 +203,7 @@ interface CommandCenterAgentRowContentProps {
 
 function CommandCenterAgentRowContent({ agent }: CommandCenterAgentRowContentProps) {
   const { theme } = useUnistyles();
+  const { t } = useTranslation();
   const titleStyle = useMemo(
     () => [styles.title, { color: theme.colors.foreground }],
     [theme.colors.foreground],
@@ -222,7 +224,7 @@ function CommandCenterAgentRowContent({ agent }: CommandCenterAgentRowContentPro
         </View>
         <View style={styles.textContent}>
           <Text style={titleStyle} numberOfLines={1}>
-            {agent.title || "New agent"}
+            {agent.title || t("shell.commandCenter.newAgent")}
           </Text>
           <Text style={subtitleStyle} numberOfLines={1}>
             {shortenPath(agent.cwd)} · {formatTimeAgo(agent.lastActivityAt)}
@@ -256,10 +258,12 @@ function AgentItemsSection({
   sectionDividerStyle,
   sectionLabelStyle,
 }: AgentItemsSectionProps) {
+  const { t } = useTranslation();
+
   return (
     <>
       {actionItemsLength > 0 ? <View style={sectionDividerStyle} /> : null}
-      <Text style={sectionLabelStyle}>Agents</Text>
+      <Text style={sectionLabelStyle}>{t("shell.commandCenter.agents")}</Text>
       {agentItems.map((item, index) => {
         const rowIndex = actionItemsLength + index;
         const agent = item.agent;
@@ -283,6 +287,7 @@ function AgentItemsSection({
 
 export function CommandCenter() {
   const { theme } = useUnistyles();
+  const { t } = useTranslation();
   const {
     open,
     inputRef,
@@ -442,12 +447,12 @@ export function CommandCenter() {
 
   const resultList =
     items.length === 0 ? (
-      <Text style={emptyTextStyle}>No matches</Text>
+      <Text style={emptyTextStyle}>{t("shell.commandCenter.noMatches")}</Text>
     ) : (
       <>
         {actionItems.length > 0 ? (
           <>
-            <Text style={sectionLabelStyle}>Actions</Text>
+            <Text style={sectionLabelStyle}>{t("shell.commandCenter.actions")}</Text>
             {actionItems.map((item, index) => (
               <CommandCenterActionRow
                 key={`action:${item.action.id}`}
@@ -501,7 +506,7 @@ export function CommandCenter() {
             onChangeText={setQuery}
             onKeyPress={handleKeyPress}
             onSubmitEditing={handleSubmitEditing}
-            placeholder="Type a command or search agents..."
+            placeholder={t("shell.commandCenter.placeholder")}
             style={inputStyle}
             autoCapitalize="none"
             autoCorrect={false}
@@ -534,7 +539,7 @@ export function CommandCenter() {
               ref={inputRef}
               value={query}
               onChangeText={setQuery}
-              placeholder="Type a command or search agents..."
+              placeholder={t("shell.commandCenter.placeholder")}
               placeholderTextColor={theme.colors.foregroundMuted}
               style={inputStyle}
               autoCapitalize="none"