feat(i18n): Add Internationalization Support for UI and LLM Output (#1058)

packages/cli/src/ui/components/Help.tsx

@@ -8,6 +8,7 @@ import type React from 'react';
 import { Box, Text } from 'ink';
 import { theme } from '../semantic-colors.js';
 import { type SlashCommand, CommandKind } from '../commands/types.js';
+import { t } from '../../i18n/index.js';
 
 interface Help {
   commands: readonly SlashCommand[];
@@ -23,46 +24,41 @@ export const Help: React.FC<Help> = ({ commands }) => (
   >
     {/* Basics */}
     <Text bold color={theme.text.primary}>
-      Basics:
+      {t('Basics:')}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
-        Add context
+        {t('Add context')}
       </Text>
-      : Use{' '}
-      <Text bold color={theme.text.accent}>
-        @
-      </Text>{' '}
-      to specify files for context (e.g.,{' '}
-      <Text bold color={theme.text.accent}>
-        @src/myFile.ts
-      </Text>
-      ) to target specific files or folders.
+      :{' '}
+      {t(
+        'Use {{symbol}} to specify files for context (e.g., {{example}}) to target specific files or folders.',
+        {
+          symbol: t('@'),
+          example: t('@src/myFile.ts'),
+        },
+      )}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
-        Shell mode
+        {t('Shell mode')}
       </Text>
-      : Execute shell commands via{' '}
-      <Text bold color={theme.text.accent}>
-        !
-      </Text>{' '}
-      (e.g.,{' '}
-      <Text bold color={theme.text.accent}>
-        !npm run start
-      </Text>
-      ) or use natural language (e.g.{' '}
-      <Text bold color={theme.text.accent}>
-        start server
-      </Text>
-      ).
+      :{' '}
+      {t(
+        'Execute shell commands via {{symbol}} (e.g., {{example1}}) or use natural language (e.g., {{example2}}).',
+        {
+          symbol: t('!'),
+          example1: t('!npm run start'),
+          example2: t('start server'),
+        },
+      )}
     </Text>
 
     <Box height={1} />
 
     {/* Commands */}
     <Text bold color={theme.text.primary}>
-      Commands:
+      {t('Commands:')}
     </Text>
     {commands
       .filter((command) => command.description && !command.hidden)
@@ -97,81 +93,81 @@ export const Help: React.FC<Help> = ({ commands }) => (
         {' '}
         !{' '}
       </Text>
-      - shell command
+      - {t('shell command')}
     </Text>
     <Text color={theme.text.primary}>
-      <Text color={theme.text.secondary}>[MCP]</Text> - Model Context Protocol
-      command (from external servers)
+      <Text color={theme.text.secondary}>[MCP]</Text> -{' '}
+      {t('Model Context Protocol command (from external servers)')}
     </Text>
 
     <Box height={1} />
 
     {/* Shortcuts */}
     <Text bold color={theme.text.primary}>
-      Keyboard Shortcuts:
+      {t('Keyboard Shortcuts:')}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
         Alt+Left/Right
       </Text>{' '}
-      - Jump through words in the input
+      - {t('Jump through words in the input')}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
         Ctrl+C
       </Text>{' '}
-      - Close dialogs, cancel requests, or quit application
+      - {t('Close dialogs, cancel requests, or quit application')}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
         {process.platform === 'win32' ? 'Ctrl+Enter' : 'Ctrl+J'}
       </Text>{' '}
+      -{' '}
       {process.platform === 'linux'
-        ? '- New line (Alt+Enter works for certain linux distros)'
-        : '- New line'}
+        ? t('New line (Alt+Enter works for certain linux distros)')
+        : t('New line')}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
         Ctrl+L
       </Text>{' '}
-      - Clear the screen
+      - {t('Clear the screen')}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
         {process.platform === 'darwin' ? 'Ctrl+X / Meta+Enter' : 'Ctrl+X'}
       </Text>{' '}
-      - Open input in external editor
+      - {t('Open input in external editor')}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
         Enter
       </Text>{' '}
-      - Send message
+      - {t('Send message')}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
         Esc
       </Text>{' '}
-      - Cancel operation / Clear input (double press)
+      - {t('Cancel operation / Clear input (double press)')}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
         Shift+Tab
       </Text>{' '}
-      - Cycle approval modes
+      - {t('Cycle approval modes')}
     </Text>
     <Text color={theme.text.primary}>
       <Text bold color={theme.text.accent}>
         Up/Down
       </Text>{' '}
-      - Cycle through your prompt history
+      - {t('Cycle through your prompt history')}
     </Text>
     <Box height={1} />
     <Text color={theme.text.primary}>
-      For a full list of shortcuts, see{' '}
-      <Text bold color={theme.text.accent}>
-        docs/keyboard-shortcuts.md
-      </Text>
+      {t('For a full list of shortcuts, see {{docPath}}', {
+        docPath: t('docs/keyboard-shortcuts.md'),
+      })}
     </Text>
   </Box>
 );